/** * AOSE WordPress * aose-tokens.css * * AOSE 共通デザイントークン * 対象：aose.jp / SWELL CHILD * * 役割： * - 色 * - 幅 * - ガター * - 余白 * - 角丸 * - 影 * - フォント * - モーション数値 * * 個別ページの見た目はここでは定義しない。 * 基本UIでは、可能な限りこのファイルの値を参照する。 * * Based on: * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0 */ /* ========================================================= 1. AOSE DESIGN TOKENS ========================================================= */ :root { /* --------------------------------------------------------- 1-1. Brand Colors --------------------------------------------------------- */ --aose-color-white: #FFFFFF; --aose-color-koji-white: #F8F6F0; --aose-color-koji-beige: #DED3BE; --aose-color-ink: #282622; --aose-color-brown: #69543A; --aose-color-miso: #A66B32; --aose-color-green-light: #9AA58B; /* 補助色 */ --aose-color-muted: rgba(40, 38, 34, 0.68); --aose-color-border: rgba(40, 38, 34, 0.12); /* --------------------------------------------------------- 1-2. Semantic Colors 意味を持たせた共通参照値 --------------------------------------------------------- */ --aose-color-text: var(--aose-color-ink); --aose-color-text-muted: var(--aose-color-muted); --aose-color-background: var(--aose-color-white); --aose-color-background-soft: var(--aose-color-koji-white); --aose-color-background-beige: var(--aose-color-koji-beige); --aose-color-primary: var(--aose-color-brown); --aose-color-accent: var(--aose-color-miso); --aose-color-line: var(--aose-color-border); /* --------------------------------------------------------- 1-3. Content Width --------------------------------------------------------- */ --aose-width-wide: 1200px; --aose-width-content: 800px; --aose-width-narrow: 680px; /* --------------------------------------------------------- 1-4. Gutters PC 32px Tablet 24px SP 18px --------------------------------------------------------- */ --aose-gutter-sp: 18px; --aose-gutter-tablet: 24px; --aose-gutter-pc: 32px; /* * 実際に各レイアウトから参照する共通値。 * Mobile First で SP を初期値とする。 */ --aose-gutter: var(--aose-gutter-sp); /* --------------------------------------------------------- 1-5. Breakpoint Reference 注： CSS Custom Property は通常の @media 条件値には 直接使用できないため、ここでは設計値の記録用。 実際の @media では数値を直接使用する。 --------------------------------------------------------- */ --aose-bp-sp-max: 767px; --aose-bp-tablet-min: 768px; --aose-bp-tablet-max: 1023px; --aose-bp-pc-min: 1024px; --aose-bp-large-min: 1280px; /* --------------------------------------------------------- 1-6. Spacing Scale 8px単位を基本とする。 56px・120pxは仕様書で追加された用途限定値。 --------------------------------------------------------- */ --aose-space-0: 0; --aose-space-1: 8px; --aose-space-2: 16px; --aose-space-3: 24px; --aose-space-4: 32px; --aose-space-5: 40px; /* 子ページ等の情報密度が高い区画 */ --aose-space-7: 56px; --aose-space-8: 64px; --aose-space-10: 80px; --aose-space-12: 96px; /* 大型 Story 用途限定 */ --aose-space-15: 120px; /* --------------------------------------------------------- 1-7. Section Spacing Reference layout.css 側で用途に応じて使用する。 --------------------------------------------------------- */ --aose-section-space-sp: var(--aose-space-8); /* 64px */ --aose-section-space-dense-min: var(--aose-space-7); /* 56px */ --aose-section-space-dense-max: var(--aose-space-8); /* 64px */ --aose-section-space-pc-min: var(--aose-space-10); /* 80px */ --aose-section-space-pc-max: var(--aose-space-12); /* 96px */ --aose-story-space-min: var(--aose-space-10); /* 80px */ --aose-story-space-max: var(--aose-space-15); /* 120px */ /* --------------------------------------------------------- 1-8. Border Radius --------------------------------------------------------- */ /* カード・ボタン・情報枠 */ --aose-radius-md: 8px; /* 独立画像・入力 */ --aose-radius-sm: 6px; /* タグ・ピル */ --aose-radius-pill: 999px; /* --------------------------------------------------------- 1-9. Shadows --------------------------------------------------------- */ --aose-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.04); --aose-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.06); /* --------------------------------------------------------- 1-10. Font Families フォント自体の読み込みはこのファイルでは行わない。 --------------------------------------------------------- */ --aose-font-serif: "Noto Serif JP", serif; --aose-font-sans: "Noto Sans JP", sans-serif; --aose-font-heading: var(--aose-font-serif); --aose-font-body: var(--aose-font-sans); --aose-font-ui: var(--aose-font-sans); /* --------------------------------------------------------- 1-11. Font Weights --------------------------------------------------------- */ --aose-font-weight-regular: 400; --aose-font-weight-medium: 500; /* --------------------------------------------------------- 1-12. Motion --------------------------------------------------------- */ /* * 共通 easing */ --aose-ease: cubic-bezier(0.22, 1, 0.36, 1); /* * HERO */ --aose-motion-hero-duration: 12s; --aose-motion-hero-scale-start: 1; --aose-motion-hero-scale-end: 1.035; /* * Reveal */ --aose-motion-reveal-duration: 700ms; /* * Card Reveal */ --aose-motion-card-duration: 650ms; --aose-motion-card-delay: 90ms; /* * Hover */ --aose-motion-hover-fast: 280ms; --aose-motion-hover: 320ms; /* * Card image hover */ --aose-motion-card-image-scale: 1.04; /* * Arrow movement */ --aose-motion-arrow-distance: 4px; } /* ========================================================= 2. RESPONSIVE TOKEN SWITCH ========================================================= */ /* * Tablet * 768px - 1023px */ @media (min-width: 768px) { :root { --aose-gutter: var(--aose-gutter-tablet); } } /* * PC * 1024px - */ @media (min-width: 1024px) { :root { --aose-gutter: var(--aose-gutter-pc); } } /* ========================================================= 3. REDUCED MOTION TOKEN OVERRIDE ========================================================= */ /* * 実際の表示制御は aose-motion.css で行う。 * ここではモーション数値だけを縮退させる。 */ @media (prefers-reduced-motion: reduce) { :root { --aose-motion-hero-duration: 0.01ms; --aose-motion-reveal-duration: 0.01ms; --aose-motion-card-duration: 0.01ms; --aose-motion-card-delay: 0ms; --aose-motion-hover-fast: 0.01ms; --aose-motion-hover: 0.01ms; --aose-motion-hero-scale-start: 1; --aose-motion-hero-scale-end: 1; --aose-motion-card-image-scale: 1; --aose-motion-arrow-distance: 0px; } }