/* * 디자인 토큰. * * 세 가지 상태를 다룬다. * data-theme="light" → 라이트 고정 * data-theme="dark" → 다크 고정 * data-theme="system" → 기기 설정(prefers-color-scheme)을 따름 * * 서버가 에 값을 박아 내려보내므로 JS 없이 첫 페인트가 끝난다. * 그래서 새로고침할 때 흰 화면이 번쩍이지 않는다. * * 규칙 하나: 어떤 색도 미디어 쿼리나 [data-theme] 블록 안에서만 정의하지 않는다. * 라이트 값은 항상 맨 :root 에 있고, 다크 블록은 그중 일부를 덮어쓰기만 한다. * 그렇게 해야 다크에서 값을 하나 빠뜨려도 라이트 값이 남아 최소한 읽히기는 한다. * * 회색 계열은 중립(무채색)으로 맞춰 둔다. 예전에는 파란 기가 섞인 회색 * (#F7F9FC, #667085, #0E1420 …)을 썼는데, 파란 브랜드색과 겹치면서 화면 전체가 * 은은하게 푸르렀다. 회색을 무채색으로 두면 파랑이 쓰인 자리에서만 파랗게 보여 * 강조가 실제로 강조로 읽힌다. */ :root { color-scheme: light; /* --- 면 --- */ --starterkit-bg: #FFFFFF; /* 페이지 바닥 */ --starterkit-surface: #FFFFFF; /* 카드·패널 */ --starterkit-surface-2: #F9F9F9; /* 한 단계 낮은 면: 테이블 헤더, 입력 배경 */ --starterkit-surface-3: #F0F0F0; /* 더 낮은 면: 비활성, 스켈레톤 */ --starterkit-soft: #F7F7F8; /* 연한 강조 면 */ --starterkit-soft-2: #ECECEC; /* 강조 면: 선택된 항목 */ --starterkit-soft-3: #E3E3E3; /* 강조 면(진한 쪽) */ /* --- 글자 --- */ --starterkit-ink: #0D0D0D; --starterkit-muted: #5D5D5D; /* * 컬러 위에 얹는 글자. 라이트·다크 모두 흰색이다. * 파란 버튼 위 글자까지 테마 따라 뒤집으면 읽을 수 없게 된다. */ --starterkit-on-accent: #FFFFFF; --starterkit-on-accent-soft: rgba(255, 255, 255, 0.7); /* --- 선 --- */ --starterkit-line: #E5E5E5; --starterkit-line-strong: #D4D4D4; /* --- 브랜드 --- */ /* * -blue 는 배경(버튼)으로 쓰는 색이라 그 위에 흰 글자가 얹힌다. * -blue-text 는 면 위에 얹는 글자·아이콘용이다. 다크에서 둘의 방향이 * 반대(배경은 어둡게, 글자는 밝게)라서 한 변수로는 못 쓴다. * * 무채색 화면에서 유일하게 색을 갖는 자리다. 여기만 바꾸면 화면 전체의 * 강조색이 따라 바뀐다. 완전 무채색으로 가려면 -blue 를 #0D0D0D, * -blue-text 를 #0D0D0D, 다크에서는 각각 #ECECEC 로 두면 된다. */ --starterkit-blue: #0062FF; --starterkit-blue-strong: #0052D6; /* hover */ --starterkit-blue-text: #0062FF; --starterkit-blue-border: #C7D9FF; /* 선택된 항목의 파란 테두리 */ --starterkit-indigo: #4F46E5; --starterkit-indigo-strong: #4338CA; /* hover */ --starterkit-purple: #7A5AF8; --starterkit-purple-soft: #F1EFFE; --starterkit-navy: #171717; /* 푸터·관리자 사이드바 바닥 */ --starterkit-navy-2: #2E2E2E; /* --- 상태 --- */ --starterkit-green: #12B76A; --starterkit-green-soft: #E9F7F0; --starterkit-green-text: #027A48; --starterkit-orange: #F79009; --starterkit-orange-soft: #FDF3E7; --starterkit-orange-soft-2: #FBEFD5; /* 앰버 계열 연한 면 */ --starterkit-orange-text: #B54708; --starterkit-orange-ink: #7A3E0A; /* 연한 앰버 면 위 진한 글자 */ --starterkit-red: #DC2626; --starterkit-red-soft: #FDF2F2; --starterkit-red-text: #B42318; /* --- 그림자 --- */ /* 면을 선으로 나누고 그림자는 거의 쓰지 않는다. 떠 있는 요소에만 얕게 깐다. */ --starterkit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --starterkit-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --starterkit-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); } /* * 다크 값. * * 아래 두 블록은 글자 하나까지 같아야 한다. CSS 로는 선택자와 미디어 쿼리가 * 값을 나눠 가질 수 없어 어쩔 수 없이 두 벌을 둔다. 한쪽만 고치는 사고를 막으려고 * tests/Unit/DesignTokensTest.php 가 두 블록이 같은지 검사한다. * * 바닥(#171717)보다 카드(#212121)를 밝게 둔다. 어두운 화면에서는 위로 올라올수록 * 밝아야 층이 읽힌다. 라이트에서 카드가 바닥보다 밝은 것과 방향이 같다. */ :root[data-theme="dark"] { color-scheme: dark; --starterkit-bg: #171717; --starterkit-surface: #212121; --starterkit-surface-2: #2A2A2A; --starterkit-surface-3: #303030; --starterkit-soft: #232323; --starterkit-soft-2: #2F2F2F; --starterkit-soft-3: #383838; --starterkit-ink: #ECECEC; --starterkit-muted: #A4A4A4; --starterkit-line: #373737; --starterkit-line-strong: #4A4A4A; /* 배경으로 쓰는 파랑은 흰 글자를 얹어야 하므로 크게 밝히지 않는다. */ --starterkit-blue: #2A67E8; --starterkit-blue-strong: #4C86FF; /* 어두운 면 위 글자는 반대로 충분히 밝혀야 읽힌다. */ --starterkit-blue-text: #7FB0FF; --starterkit-blue-border: #3A5480; --starterkit-indigo: #7C74F0; --starterkit-indigo-strong: #948DF5; --starterkit-purple: #A18BFF; --starterkit-purple-soft: #2A2542; --starterkit-navy: #0F0F0F; --starterkit-navy-2: #262626; --starterkit-green: #2BC98A; --starterkit-green-soft: #16291F; --starterkit-green-text: #4ADE9B; --starterkit-orange: #F5A524; --starterkit-orange-soft: #2B2113; --starterkit-orange-soft-2: #322614; --starterkit-orange-text: #FBBF5B; --starterkit-orange-ink: #FCD9A0; --starterkit-red: #E5484D; --starterkit-red-soft: #2E1A1A; --starterkit-red-text: #FF8F86; /* 어두운 바닥에서는 흰 그림자가 안 보이므로 더 짙게 깐다. */ --starterkit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --starterkit-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); --starterkit-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { /* * 'system' 을 고른 사용자와 아직 아무것도 고르지 않은 사용자(쿠키 없음)가 여기 걸린다. * light·dark 를 명시적으로 고른 사용자는 제외해야, 밝은 화면을 원한 사람이 * OS 설정 때문에 어두워지는 일이 없다. */ :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --starterkit-bg: #171717; --starterkit-surface: #212121; --starterkit-surface-2: #2A2A2A; --starterkit-surface-3: #303030; --starterkit-soft: #232323; --starterkit-soft-2: #2F2F2F; --starterkit-soft-3: #383838; --starterkit-ink: #ECECEC; --starterkit-muted: #A4A4A4; --starterkit-line: #373737; --starterkit-line-strong: #4A4A4A; --starterkit-blue: #2A67E8; --starterkit-blue-strong: #4C86FF; --starterkit-blue-text: #7FB0FF; --starterkit-blue-border: #3A5480; --starterkit-indigo: #7C74F0; --starterkit-indigo-strong: #948DF5; --starterkit-purple: #A18BFF; --starterkit-purple-soft: #2A2542; --starterkit-navy: #0F0F0F; --starterkit-navy-2: #262626; --starterkit-green: #2BC98A; --starterkit-green-soft: #16291F; --starterkit-green-text: #4ADE9B; --starterkit-orange: #F5A524; --starterkit-orange-soft: #2B2113; --starterkit-orange-soft-2: #322614; --starterkit-orange-text: #FBBF5B; --starterkit-orange-ink: #FCD9A0; --starterkit-red: #E5484D; --starterkit-red-soft: #2E1A1A; --starterkit-red-text: #FF8F86; --starterkit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --starterkit-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); --starterkit-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } } /* * 부트스트랩이 body 와 카드·입력에 자기 색을 깔아 둔다. 그 값들이 우리 토큰보다 * 뒤에 로드되지는 않지만 명시도가 같은 자리에서 겹치므로, 바닥과 기본 글자색만 * 여기서 못박아 둔다. 이게 없으면 다크에서 카드 밖 여백이 흰 채로 남는다. */ body { background-color: var(--starterkit-bg); color: var(--starterkit-ink); }