/* * SF6 Combo デザイントークン * lib/design_token/sf_colors.dart の Color 定義を CSS Variables 化したもの。 * に dark/light の class が付与され、prefers-color-scheme に同期する。 * 初回ペイント前の classList 付与は web/index.html の inline script が担う (FOUC 対策)。 */ :root { /* spacing */ --sf-margin-xs: 4px; --sf-margin-s: 8px; --sf-margin-m: 12px; --sf-margin-l: 16px; --sf-margin-xl: 24px; --sf-margin-xxl: 32px; /* layout */ --sf-border-width: 1px; --sf-button-size: 48px; --sf-cell-height: 52px; --sf-icon-size: 18px; --sf-pressed-scale: 1.15; --sf-scale-anim-ms: 120ms; } /* Light defaults (also applied when prefers-color-scheme: light) */ :root, html.light { --sf-text-primary: #000000; --sf-text-secondary: #5A5A5E; --sf-text-tertiary: #FFFFFF; --sf-bg-primary: #FDFDFC; --sf-bg-secondary: #F4F4F4; --sf-bg-tertiary: #E5E5EA; --sf-surface-primary: #FFFFFF; --sf-surface-secondary: #E5E5E5; --sf-surface-tertiary: #F7F7FB; --sf-button-primary: #000000; --sf-button-secondary: #F0F0F0; --sf-button-bg-primary: #FFFFFF; --sf-button-border-primary: #C5C5C7; --sf-button-highlight: #FFFFFF; --sf-slider-thumb: #5A5A5E; --sf-slider-active: #000000; --sf-slider-inactive: #C5C5C7; --sf-slider-active-tick: #C5C5C7; --sf-slider-inactive-tick: #5A5A5E; --sf-switch-thumb: #FFFFFF; --sf-popup-bg-primary: #FCFCFF; --sf-barrier-primary: rgba(0, 0, 0, 0.098); --sf-border-primary: #B7B7B7; --sf-border-secondary: #EAEAEA; --sf-separator-primary: #E8E8E8; --sf-shadow-primary: rgba(0, 0, 0, 0.1); /* Semantic colors (theme-aware) */ --sf-color-error: #c00; --sf-color-on-error: #fff; --sf-color-error-bg: #c00; --sf-color-warning: #EDAC50; --sf-color-on-warning: #fff; --sf-color-favorite: #e0245e; /* Fixed colors (theme-independent, defined here for completeness) */ --sf-color-video-bg: #000; --sf-color-on-video: #fff; --sf-overlay-scrim: rgba(0, 0, 0, 0.6); --sf-overlay-scrim-strong: rgba(0, 0, 0, 0.55); --sf-overlay-scrim-medium: rgba(0, 0, 0, 0.54); --sf-overlay-white: #fff; --sf-overlay-white-alpha: rgba(255, 255, 255, 0.24); --sf-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.24); --sf-error-screen-bg: #fff; } html.dark { --sf-text-primary: #FFFFFF; --sf-text-secondary: #C5C5C7; --sf-text-tertiary: #000000; --sf-bg-primary: #000000; --sf-bg-secondary: #181818; --sf-bg-tertiary: #121212; --sf-surface-primary: #121212; --sf-surface-secondary: #2F2F2F; --sf-surface-tertiary: #0F0F0F; --sf-button-primary: #FFFFFF; --sf-button-secondary: #F0F0F0; --sf-button-bg-primary: #181919; --sf-button-border-primary: #3A3A3A; --sf-button-highlight: #5A5A5E; --sf-slider-thumb: #FFFFFF; --sf-slider-active: #FFFFFF; --sf-slider-inactive: #38383B; --sf-slider-active-tick: #1C1C1E; --sf-slider-inactive-tick: #1C1C1E; --sf-switch-thumb: #000000; --sf-popup-bg-primary: #181919; --sf-barrier-primary: rgba(0, 0, 0, 0.75); --sf-border-primary: #B7B7B7; --sf-border-secondary: #232323; --sf-separator-primary: #38383B; --sf-shadow-primary: transparent; /* Semantic colors (theme-aware) */ --sf-color-error: #ff6b6b; --sf-color-on-error: #fff; --sf-color-error-bg: #c00; --sf-color-warning: #EDAC50; --sf-color-on-warning: #fff; --sf-color-favorite: #ff5a7a; /* Fixed colors */ --sf-color-video-bg: #000; --sf-color-on-video: #fff; --sf-overlay-scrim: rgba(0, 0, 0, 0.6); --sf-overlay-scrim-strong: rgba(0, 0, 0, 0.55); --sf-overlay-scrim-medium: rgba(0, 0, 0, 0.54); --sf-overlay-white: #fff; --sf-overlay-white-alpha: rgba(255, 255, 255, 0.24); --sf-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4); --sf-error-screen-bg: #000; }