/* ========================================================================== oneDesk Design Tokens 원본: Figma Variables 내보내기 - onedesk.tokens.json (Primitives: Color 스케일, Spacing) - light.tokens.json (Semantic: Text/Icon/Surface/Border/Button, Spacing System) 이 파일이 공통 색·간격의 단일 출처(single source of truth)다. 공통 컴포넌트 CSS(app-pages-common.css 끝의 공통 섹션들)는 이 변수를 var(--od-token, #fallback) 형태로 참조한다 — 폴백 값은 토큰 값과 동일하게 유지할 것. ========================================================================== */ :root { /* ---- Primitives · Spacing (onedesk.tokens.json > Spacing) ---- */ --od-spacing-0: 0px; --od-spacing-1: 4px; --od-spacing-2: 8px; --od-spacing-3: 12px; --od-spacing-4: 16px; --od-spacing-5: 20px; --od-spacing-6: 24px; /* ---- Primitives · Color/Black (#111827 alpha) ---- */ --od-black-10: rgba(17, 24, 39, 0.1); --od-black-20: rgba(17, 24, 39, 0.2); --od-black-30: rgba(17, 24, 39, 0.3); --od-black-40: rgba(17, 24, 39, 0.4); --od-black-50: rgba(17, 24, 39, 0.5); --od-black-60: rgba(17, 24, 39, 0.6); --od-black-70: rgba(17, 24, 39, 0.7); --od-black-80: rgba(17, 24, 39, 0.8); --od-black-90: rgba(17, 24, 39, 0.9); --od-black-100: #111827; /* ---- Primitives · Color/White ---- */ --od-white-10: rgba(255, 255, 255, 0.1); --od-white-20: rgba(255, 255, 255, 0.2); --od-white-30: rgba(255, 255, 255, 0.3); --od-white-40: rgba(255, 255, 255, 0.4); --od-white-50: rgba(255, 255, 255, 0.5); --od-white-60: rgba(255, 255, 255, 0.6); --od-white-70: rgba(255, 255, 255, 0.7); --od-white-80: rgba(255, 255, 255, 0.8); --od-white-90: rgba(255, 255, 255, 0.9); --od-white-100: #ffffff; /* ---- Primitives · Color/Primary ---- */ --od-primary-50: #edeffe; --od-primary-100: #c8cefc; --od-primary-200: #aeb6fb; --od-primary-300: #8895f9; --od-primary-400: #7181f8; --od-primary-500: #4e61f6; --od-primary-600: #4758e0; --od-primary-700: #3745af; --od-primary-800: #2b3587; --od-primary-900: #212967; /* ---- Primitives · Color/Grey ---- */ --od-grey-50: #f9fafb; --od-grey-100: #f3f4f6; --od-grey-200: #e5e7ea; --od-grey-300: #d2d5db; --od-grey-400: #9ea2ae; --od-grey-500: #6d717f; --od-grey-600: #4d5461; --od-grey-700: #394050; --od-grey-800: #212936; --od-grey-900: #131927; /* ---- Primitives · Color/Green ---- */ --od-green-50: #ecf8ef; --od-green-100: #c5e9cd; --od-green-200: #a9deb4; --od-green-300: #81cf92; --od-green-400: #69c57d; --od-green-500: #43b75d; --od-green-600: #3da755; --od-green-700: #308242; --od-green-800: #256533; --od-green-900: #1c4d27; /* ---- Primitives · Color/Red ---- */ --od-red-50: #fdecec; --od-red-100: #fac5c3; --od-red-200: #f7a9a7; --od-red-300: #f4827e; --od-red-400: #f16965; --od-red-500: #ee443f; --od-red-600: #d93e39; --od-red-700: #a9302d; --od-red-800: #832523; --od-red-900: #641d1a; /* ---- Primitives · Color/Yellow ---- */ --od-yellow-50: #fff7e6; --od-yellow-100: #ffe5b0; --od-yellow-200: #ffd88a; --od-yellow-300: #ffc654; --od-yellow-400: #ffbb33; --od-yellow-500: #ffaa00; --od-yellow-600: #e89b00; --od-yellow-700: #b57900; --od-yellow-800: #8c5e00; --od-yellow-900: #6b4700; /* ---- Primitives · Color/Blue ---- */ --od-blue-50: #e6f4ff; --od-blue-100: #b0deff; --od-blue-200: #8aceff; --od-blue-300: #54b8ff; --od-blue-400: #33aaff; --od-blue-500: #0095ff; --od-blue-600: #0088e8; --od-blue-700: #006ab5; --od-blue-800: #00528c; --od-blue-900: #003f6b; /* ---- Primitives · Color/indigo ---- */ --od-indigo-50: #eef2ff; --od-indigo-100: #e0e7ff; --od-indigo-200: #c6d2ff; --od-indigo-300: #a3b3ff; --od-indigo-400: #7c86ff; --od-indigo-500: #615fff; --od-indigo-600: #4f39f6; --od-indigo-700: #432dd7; --od-indigo-800: #372aac; --od-indigo-900: #312c85; /* ==== Semantic · light (light.tokens.json) ==== */ /* ---- Text Color ---- */ --od-text-primary-white: var(--od-white-100); --od-text-secondary-white: var(--od-white-60); --od-text-primary-black: var(--od-grey-900); --od-text-secondary-dark-grey: var(--od-grey-600); --od-text-grey: var(--od-grey-400); --od-text-light-grey: var(--od-grey-300); --od-text-disabled: var(--od-grey-400); --od-text-accent: var(--od-primary-500); --od-text-links: var(--od-indigo-500); --od-text-success: var(--od-green-500); --od-text-info: var(--od-blue-500); --od-text-warning: var(--od-yellow-600); --od-text-error: var(--od-red-500); /* ---- Icon Color ---- */ --od-icon-white: var(--od-white-100); --od-icon-black: var(--od-grey-900); --od-icon-grey: var(--od-grey-400); --od-icon-dark-grey: var(--od-grey-600); --od-icon-light-grey: var(--od-grey-300); --od-icon-accent: var(--od-primary-500); --od-icon-success: var(--od-green-500); --od-icon-info: var(--od-blue-500); --od-icon-warning: var(--od-yellow-600); --od-icon-error: var(--od-red-500); /* ---- Surface Color ---- */ --od-surface-white: var(--od-white-100); --od-surface-black: var(--od-grey-900); --od-surface-grey: var(--od-grey-50); --od-surface-accent: var(--od-primary-50); /* ---- Border Color ---- */ --od-border-primary: var(--od-grey-200); /* ---- Button Color ---- */ --od-button-fill-primary: var(--od-primary-500); --od-button-fill-primary-hover: var(--od-primary-700); --od-button-fill-primary-focus: var(--od-primary-500); --od-button-fill-primary-pressed: var(--od-primary-800); --od-button-fill-primary-disabled: var(--od-grey-200); --od-button-fill-secondary: var(--od-grey-100); --od-button-fill-secondary-hover: var(--od-grey-200); --od-button-fill-secondary-focus: var(--od-grey-100); --od-button-fill-secondary-pressed: var(--od-grey-300); --od-button-fill-secondary-disabled: var(--od-grey-100); /* ---- Spacing System ---- */ --od-spacing-none: var(--od-spacing-0); --od-spacing-xxs: var(--od-spacing-1); --od-spacing-xs: var(--od-spacing-2); --od-spacing-sm: var(--od-spacing-3); --od-spacing-md: var(--od-spacing-4); --od-spacing-lg: var(--od-spacing-5); --od-spacing-xl: var(--od-spacing-6); --od-radius-xxs: var(--od-spacing-1); --od-radius-xs: var(--od-spacing-2); --od-radius-sm: var(--od-spacing-3); --od-radius-md: var(--od-spacing-4); --od-radius-lg: var(--od-spacing-5); --od-radius-xl: var(--od-spacing-6); }