@cubit-ui/tokens 0.0.0-stage → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +29 -3
  3. package/dist/css/dark.css +80 -0
  4. package/dist/css/tokens.css +79 -0
  5. package/dist/index.cjs +17 -0
  6. package/dist/index.d.ts +23 -0
  7. package/dist/index.d.ts.map +1 -0
  8. package/dist/index.js +309 -0
  9. package/dist/primitives.d.ts +101 -0
  10. package/dist/primitives.d.ts.map +1 -0
  11. package/dist/semantics.d.ts +80 -0
  12. package/dist/semantics.d.ts.map +1 -0
  13. package/dist/themes/dark.d.ts +8 -0
  14. package/dist/themes/dark.d.ts.map +1 -0
  15. package/dist/themes/light.d.ts +7 -0
  16. package/dist/themes/light.d.ts.map +1 -0
  17. package/package.json +45 -3
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Cubit UI
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,29 @@
1
- # Temporary Holding Version
2
-
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
1
+ # @cubit-ui/tokens
2
+
3
+ Design tokens for Cubit UI: primitive and semantic tokens, light/dark themes, and CSS variables.
4
+
5
+ > **Language notice:** The Korean README ([README.md](https://github.com/tsuel-dev/Cubit/blob/main/README.md)) in the repository root always takes precedence. If this document differs from it or is inaccurate, the Korean README prevails.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install @cubit-ui/tokens
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```ts
16
+ import '@cubit-ui/tokens/css/tokens.css';
17
+ import '@cubit-ui/tokens/css/dark.css';
18
+ import { setTheme } from '@cubit-ui/tokens';
19
+
20
+ setTheme('dark'); // 'light' | 'dark' | 'system'
21
+ ```
22
+
23
+ ## Links
24
+
25
+ - Repository & full documentation: <https://github.com/tsuel-dev/Cubit>
26
+ - Issues: <https://github.com/tsuel-dev/Cubit/issues>
27
+ - Contact (legal, licensing, security): github@mataku.org
28
+
29
+ License: MIT
package/dist/css/dark.css ADDED
@@ -0,0 +1,80 @@
1
+ /* Cubit UI Design Tokens - Dark Theme */
2
+ [data-theme="dark"] {
3
+ --ui-color-bg-canvas: #000000;
4
+ --ui-color-bg-surface: #121212;
5
+ --ui-color-bg-muted: #212121;
6
+ --ui-color-bg-subtle: #424242;
7
+ --ui-color-bg-secondary: #331d0d;
8
+ --ui-color-bg-secondary-subtle: #442611;
9
+ --ui-color-text-primary: #ffffff;
10
+ --ui-color-text-secondary: #e0e0e0;
11
+ --ui-color-text-muted: #bdbdbd;
12
+ --ui-color-text-inverse: #000000;
13
+ --ui-color-primary: #ff5500;
14
+ --ui-color-primary-hover: #ff6e26;
15
+ --ui-color-primary-active: #e04b00;
16
+ --ui-color-primary-contrast: #ffffff;
17
+ --ui-color-primary-subtle: #2a1408;
18
+ --ui-color-border: #424242;
19
+ --ui-color-border-strong: #9e9e9e;
20
+ --ui-color-border-muted: #212121;
21
+ --ui-color-focus-ring: #ff7733;
22
+ --ui-color-success: #4ade80;
23
+ --ui-color-success-bg: #052e16;
24
+ --ui-color-success-contrast: #ffffff;
25
+ --ui-color-warning: #fbbf24;
26
+ --ui-color-warning-bg: #451a03;
27
+ --ui-color-warning-contrast: #000000;
28
+ --ui-color-error: #f87171;
29
+ --ui-color-error-bg: #450a0a;
30
+ --ui-color-error-contrast: #ffffff;
31
+ --ui-color-info: #38bdf8;
32
+ --ui-color-info-bg: #082f49;
33
+ --ui-color-info-contrast: #ffffff;
34
+ --ui-color-secondary-1: #38bdf8;
35
+ --ui-color-secondary-2: #2dd4bf;
36
+ --ui-color-skeleton: #333333;
37
+ --ui-color-skeleton-shine: #212121;
38
+ --ui-color-tile: #161616;
39
+ }
40
+
41
+ @media (prefers-color-scheme: dark) {
42
+ :root:not([data-theme="light"]) {
43
+ --ui-color-bg-canvas: #000000;
44
+ --ui-color-bg-surface: #121212;
45
+ --ui-color-bg-muted: #212121;
46
+ --ui-color-bg-subtle: #424242;
47
+ --ui-color-bg-secondary: #331d0d;
48
+ --ui-color-bg-secondary-subtle: #442611;
49
+ --ui-color-text-primary: #ffffff;
50
+ --ui-color-text-secondary: #e0e0e0;
51
+ --ui-color-text-muted: #bdbdbd;
52
+ --ui-color-text-inverse: #000000;
53
+ --ui-color-primary: #ff5500;
54
+ --ui-color-primary-hover: #ff6e26;
55
+ --ui-color-primary-active: #e04b00;
56
+ --ui-color-primary-contrast: #ffffff;
57
+ --ui-color-primary-subtle: #2a1408;
58
+ --ui-color-border: #424242;
59
+ --ui-color-border-strong: #9e9e9e;
60
+ --ui-color-border-muted: #212121;
61
+ --ui-color-focus-ring: #ff7733;
62
+ --ui-color-success: #4ade80;
63
+ --ui-color-success-bg: #052e16;
64
+ --ui-color-success-contrast: #ffffff;
65
+ --ui-color-warning: #fbbf24;
66
+ --ui-color-warning-bg: #451a03;
67
+ --ui-color-warning-contrast: #000000;
68
+ --ui-color-error: #f87171;
69
+ --ui-color-error-bg: #450a0a;
70
+ --ui-color-error-contrast: #ffffff;
71
+ --ui-color-info: #38bdf8;
72
+ --ui-color-info-bg: #082f49;
73
+ --ui-color-info-contrast: #ffffff;
74
+ --ui-color-secondary-1: #38bdf8;
75
+ --ui-color-secondary-2: #2dd4bf;
76
+ --ui-color-skeleton: #333333;
77
+ --ui-color-skeleton-shine: #212121;
78
+ --ui-color-tile: #161616;
79
+ }
80
+ }
package/dist/css/tokens.css ADDED
@@ -0,0 +1,79 @@
1
+ /* Cubit UI Design Tokens - Root / Light Theme */
2
+ :root,
3
+ [data-theme="light"] {
4
+ --ui-space-0: 0px;
5
+ --ui-space-1: 4px;
6
+ --ui-space-2: 8px;
7
+ --ui-space-3: 12px;
8
+ --ui-space-4: 16px;
9
+ --ui-space-5: 20px;
10
+ --ui-space-6: 24px;
11
+ --ui-space-8: 32px;
12
+ --ui-space-10: 40px;
13
+ --ui-space-12: 48px;
14
+ --ui-space-16: 64px;
15
+ --ui-radius-none: 0px;
16
+ --ui-radius-sm: 8px;
17
+ --ui-radius-md: 12px;
18
+ --ui-radius-lg: 16px;
19
+ --ui-radius-full: 9999px;
20
+ --ui-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
21
+ --ui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
22
+ --ui-font-size-xs: 12px;
23
+ --ui-font-size-sm: 14px;
24
+ --ui-font-size-md: 16px;
25
+ --ui-font-size-lg: 18px;
26
+ --ui-font-size-xl: 20px;
27
+ --ui-font-size-2xl: 24px;
28
+ --ui-font-size-3xl: 30px;
29
+ --ui-line-height-none: 1;
30
+ --ui-line-height-tight: 1.25;
31
+ --ui-line-height-snug: 1.375;
32
+ --ui-line-height-normal: 1.5;
33
+ --ui-line-height-relaxed: 1.625;
34
+ --ui-font-weight-normal: 400;
35
+ --ui-font-weight-medium: 500;
36
+ --ui-font-weight-semibold: 600;
37
+ --ui-font-weight-bold: 700;
38
+ --ui-border-width-thin: 1px;
39
+ --ui-border-width-thick: 2px;
40
+ --ui-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
41
+ --ui-transition-normal: 150ms cubic-bezier(0.4, 0, 0.2, 1);
42
+ --ui-transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);
43
+ --ui-color-bg-canvas: #ffffff;
44
+ --ui-color-bg-surface: #ffffff;
45
+ --ui-color-bg-muted: #f5f5f5;
46
+ --ui-color-bg-subtle: #fafafa;
47
+ --ui-color-bg-secondary: #ffebcc;
48
+ --ui-color-bg-secondary-subtle: #ffe4c9;
49
+ --ui-color-text-primary: #000000;
50
+ --ui-color-text-secondary: #616161;
51
+ --ui-color-text-muted: #9e9e9e;
52
+ --ui-color-text-inverse: #ffffff;
53
+ --ui-color-primary: #ff5500;
54
+ --ui-color-primary-hover: #e04b00;
55
+ --ui-color-primary-active: #cc4400;
56
+ --ui-color-primary-contrast: #ffffff;
57
+ --ui-color-primary-subtle: #fff3e6;
58
+ --ui-color-border: #e0e0e0;
59
+ --ui-color-border-strong: #000000;
60
+ --ui-color-border-muted: #eeeeee;
61
+ --ui-color-focus-ring: #ff5500;
62
+ --ui-color-success: #1b873f;
63
+ --ui-color-success-bg: #e8f5e9;
64
+ --ui-color-success-contrast: #ffffff;
65
+ --ui-color-warning: #d97706;
66
+ --ui-color-warning-bg: #fffbeb;
67
+ --ui-color-warning-contrast: #000000;
68
+ --ui-color-error: #d32f2f;
69
+ --ui-color-error-bg: #fde8e8;
70
+ --ui-color-error-contrast: #ffffff;
71
+ --ui-color-info: #0284c7;
72
+ --ui-color-info-bg: #e0f2fe;
73
+ --ui-color-info-contrast: #ffffff;
74
+ --ui-color-secondary-1: #0284c7;
75
+ --ui-color-secondary-2: #0d9488;
76
+ --ui-color-skeleton: #e9ecef;
77
+ --ui-color-skeleton-shine: #f8f9fa;
78
+ --ui-color-tile: #f7f8fa;
79
+ }
package/dist/index.cjs ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={black:"#000000",white:"#ffffff",primary:"#ff5500",primaryHover:"#e04b00",primaryActive:"#cc4400",primarySubtle:"#fff3e6",secondaryBgLight:"#ffebcc",secondaryBgSubtle:"#ffe4c9",secondaryAccent1:"#0284c7",secondaryAccent1Dark:"#38bdf8",secondaryAccent2:"#0d9488",secondaryAccent2Dark:"#2dd4bf",gray:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",950:"#121212"},success:"#1b873f",successBg:"#e8f5e9",warning:"#d97706",warningBg:"#fffbeb",error:"#d32f2f",errorBg:"#fde8e8",info:"#0284c7",infoBg:"#e0f2fe"},i={0:"0px",1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px",8:"32px",10:"40px",12:"48px",16:"64px"},c={none:"0px",sm:"8px",md:"12px",lg:"16px",full:"9999px"},e={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',fontFamilyMono:'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',fontSize:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px"},lineHeight:{none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625"},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"}},s={width:{none:"0px",thin:"1px",thick:"2px"}},n={duration:{fast:"100ms",normal:"150ms",slow:"250ms"},timing:"cubic-bezier(0.4, 0, 0.2, 1)"},l={"--ui-color-bg-canvas":o.white,"--ui-color-bg-surface":o.white,"--ui-color-bg-muted":o.gray[100],"--ui-color-bg-subtle":o.gray[50],"--ui-color-bg-secondary":o.secondaryBgLight,"--ui-color-bg-secondary-subtle":o.secondaryBgSubtle,"--ui-color-text-primary":o.black,"--ui-color-text-secondary":o.gray[700],"--ui-color-text-muted":o.gray[500],"--ui-color-text-inverse":o.white,"--ui-color-primary":o.primary,"--ui-color-primary-hover":o.primaryHover,"--ui-color-primary-active":o.primaryActive,"--ui-color-primary-contrast":o.white,"--ui-color-primary-subtle":o.primarySubtle,"--ui-color-border":o.gray[300],"--ui-color-border-strong":o.black,"--ui-color-border-muted":o.gray[200],"--ui-color-focus-ring":o.primary,"--ui-color-success":o.success,"--ui-color-success-bg":o.successBg,"--ui-color-success-contrast":o.white,"--ui-color-warning":o.warning,"--ui-color-warning-bg":o.warningBg,"--ui-color-warning-contrast":o.black,"--ui-color-error":o.error,"--ui-color-error-bg":o.errorBg,"--ui-color-error-contrast":o.white,"--ui-color-info":o.info,"--ui-color-info-bg":o.infoBg,"--ui-color-info-contrast":o.white,"--ui-color-secondary-1":o.secondaryAccent1,"--ui-color-secondary-2":o.secondaryAccent2,"--ui-color-skeleton":"#e9ecef","--ui-color-skeleton-shine":"#f8f9fa","--ui-color-tile":"#f7f8fa"},u={"--ui-color-bg-canvas":o.black,"--ui-color-bg-surface":o.gray[950],"--ui-color-bg-muted":o.gray[900],"--ui-color-bg-subtle":o.gray[800],"--ui-color-bg-secondary":"#331d0d","--ui-color-bg-secondary-subtle":"#442611","--ui-color-text-primary":o.white,"--ui-color-text-secondary":o.gray[300],"--ui-color-text-muted":o.gray[400],"--ui-color-text-inverse":o.black,"--ui-color-primary":o.primary,"--ui-color-primary-hover":"#ff6e26","--ui-color-primary-active":"#e04b00","--ui-color-primary-contrast":o.white,"--ui-color-primary-subtle":"#2a1408","--ui-color-border":o.gray[800],"--ui-color-border-strong":o.gray[500],"--ui-color-border-muted":o.gray[900],"--ui-color-focus-ring":"#ff7733","--ui-color-success":"#4ade80","--ui-color-success-bg":"#052e16","--ui-color-success-contrast":o.white,"--ui-color-warning":"#fbbf24","--ui-color-warning-bg":"#451a03","--ui-color-warning-contrast":o.black,"--ui-color-error":"#f87171","--ui-color-error-bg":"#450a0a","--ui-color-error-contrast":o.white,"--ui-color-info":"#38bdf8","--ui-color-info-bg":"#082f49","--ui-color-info-contrast":o.white,"--ui-color-secondary-1":o.secondaryAccent1Dark,"--ui-color-secondary-2":o.secondaryAccent2Dark,"--ui-color-skeleton":"#333333","--ui-color-skeleton-shine":"#212121","--ui-color-tile":"#161616"},g={"--ui-space-0":i[0],"--ui-space-1":i[1],"--ui-space-2":i[2],"--ui-space-3":i[3],"--ui-space-4":i[4],"--ui-space-5":i[5],"--ui-space-6":i[6],"--ui-space-8":i[8],"--ui-space-10":i[10],"--ui-space-12":i[12],"--ui-space-16":i[16],"--ui-radius-none":c.none,"--ui-radius-sm":c.sm,"--ui-radius-md":c.md,"--ui-radius-lg":c.lg,"--ui-radius-full":c.full,"--ui-font-family-base":e.fontFamily,"--ui-font-family-mono":e.fontFamilyMono,"--ui-font-size-xs":e.fontSize.xs,"--ui-font-size-sm":e.fontSize.sm,"--ui-font-size-md":e.fontSize.md,"--ui-font-size-lg":e.fontSize.lg,"--ui-font-size-xl":e.fontSize.xl,"--ui-font-size-2xl":e.fontSize["2xl"],"--ui-font-size-3xl":e.fontSize["3xl"],"--ui-line-height-none":e.lineHeight.none,"--ui-line-height-tight":e.lineHeight.tight,"--ui-line-height-snug":e.lineHeight.snug,"--ui-line-height-normal":e.lineHeight.normal,"--ui-line-height-relaxed":e.lineHeight.relaxed,"--ui-font-weight-normal":e.fontWeight.normal,"--ui-font-weight-medium":e.fontWeight.medium,"--ui-font-weight-semibold":e.fontWeight.semibold,"--ui-font-weight-bold":e.fontWeight.bold,"--ui-border-width-thin":s.width.thin,"--ui-border-width-thick":s.width.thick,"--ui-transition-fast":`${n.duration.fast} ${n.timing}`,"--ui-transition-normal":`${n.duration.normal} ${n.timing}`,"--ui-transition-slow":`${n.duration.slow} ${n.timing}`};function a(r,t=" "){return Object.entries(r).map(([f,m])=>`${t}${f}: ${m};`).join(`
2
+ `)}function d(){const r={...g,...l};return`/* Cubit UI Design Tokens - Root / Light Theme */
3
+ :root,
4
+ [data-theme="light"] {
5
+ ${a(r)}
6
+ }
7
+ `}function h(){return`/* Cubit UI Design Tokens - Dark Theme */
8
+ [data-theme="dark"] {
9
+ ${a(u)}
10
+ }
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ :root:not([data-theme="light"]) {
14
+ ${a(u," ")}
15
+ }
16
+ }
17
+ `}function b(r,t=document.documentElement){r==="system"?t.removeAttribute("data-theme"):t.setAttribute("data-theme",r)}function y(r=document.documentElement){const t=r.getAttribute("data-theme");return t==="light"||t==="dark"?t:"system"}exports.borders=s;exports.colors=o;exports.darkTheme=u;exports.formatCssVariables=a;exports.generateDarkCss=h;exports.generateRootCss=d;exports.getTheme=y;exports.lightTheme=l;exports.radii=c;exports.setTheme=b;exports.spacing=i;exports.staticTokens=g;exports.transitions=n;exports.typography=e;
package/dist/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ /**
2
+ * 토큰 객체를 CSS Custom Property 문자열 블록으로 변환
3
+ */
4
+ export declare function formatCssVariables<K extends string = string>(tokens: Record<K, string>, indent?: string): string;
5
+ /**
6
+ * 라이트 테마 (루트) CSS 생성
7
+ */
8
+ export declare function generateRootCss(): string;
9
+ /**
10
+ * 다크 테마 ([data-theme="dark"] 및 @media prefers-color-scheme) CSS 생성
11
+ */
12
+ export declare function generateDarkCss(): string;
13
+ export * from './primitives';
14
+ export * from './semantics';
15
+ export * from './themes/light';
16
+ export * from './themes/dark';
17
+ /**
18
+ * 런타임 테마 적용 헬퍼 (Vanilla / React / Svelte 공용)
19
+ */
20
+ export type ThemeMode = 'light' | 'dark' | 'system';
21
+ export declare function setTheme(theme: ThemeMode, targetElement?: HTMLElement): void;
22
+ export declare function getTheme(targetElement?: HTMLElement): ThemeMode;
23
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,SAAO,GAAG,MAAM,CAI9G;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAYxC;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAYxC;AAED,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAE9B;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,aAAa,GAAE,WAAsC,GAAG,IAAI,CAMtG;AAED,wBAAgB,QAAQ,CAAC,aAAa,GAAE,WAAsC,GAAG,SAAS,CAMzF"}
package/dist/index.js ADDED
@@ -0,0 +1,309 @@
1
+ const o = {
2
+ // 기준 색상
3
+ black: "#000000",
4
+ white: "#ffffff",
5
+ // 프라이머리 및 보조 (기준값 고정)
6
+ primary: "#ff5500",
7
+ primaryHover: "#e04b00",
8
+ primaryActive: "#cc4400",
9
+ primarySubtle: "#fff3e6",
10
+ // 보조 / 배경용 (기준값 고정)
11
+ secondaryBgLight: "#ffebcc",
12
+ secondaryBgSubtle: "#ffe4c9",
13
+ // 보조 브랜드 색상 (보조색상1·2 - 기준값 고정)
14
+ secondaryAccent1: "#0284c7",
15
+ // 파랑 계열 (라이트)
16
+ secondaryAccent1Dark: "#38bdf8",
17
+ // 파랑 계열 (다크)
18
+ secondaryAccent2: "#0d9488",
19
+ // 틸 계열 (라이트)
20
+ secondaryAccent2Dark: "#2dd4bf",
21
+ // 틸 계열 (다크)
22
+ // 뉴트럴 계열 (단단한 콘트라스트)
23
+ gray: {
24
+ 50: "#fafafa",
25
+ 100: "#f5f5f5",
26
+ 200: "#eeeeee",
27
+ 300: "#e0e0e0",
28
+ 400: "#bdbdbd",
29
+ 500: "#9e9e9e",
30
+ 600: "#757575",
31
+ 700: "#616161",
32
+ 800: "#424242",
33
+ 900: "#212121",
34
+ 950: "#121212"
35
+ },
36
+ // 시맨틱 상태 색상 (AA 대비율 유지)
37
+ success: "#1b873f",
38
+ successBg: "#e8f5e9",
39
+ warning: "#d97706",
40
+ warningBg: "#fffbeb",
41
+ error: "#d32f2f",
42
+ errorBg: "#fde8e8",
43
+ info: "#0284c7",
44
+ infoBg: "#e0f2fe"
45
+ }, i = {
46
+ 0: "0px",
47
+ 1: "4px",
48
+ // 4px 기반 스케일
49
+ 2: "8px",
50
+ // 8px 기반 스케일
51
+ 3: "12px",
52
+ 4: "16px",
53
+ 5: "20px",
54
+ 6: "24px",
55
+ 8: "32px",
56
+ 10: "40px",
57
+ 12: "48px",
58
+ 16: "64px"
59
+ }, c = {
60
+ none: "0px",
61
+ sm: "8px",
62
+ md: "12px",
63
+ lg: "16px",
64
+ full: "9999px"
65
+ // Avatar, Indicator, Pill 전용
66
+ }, e = {
67
+ // 시스템 폰트 스택 기반
68
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
69
+ fontFamilyMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
70
+ fontSize: {
71
+ xs: "12px",
72
+ sm: "14px",
73
+ md: "16px",
74
+ lg: "18px",
75
+ xl: "20px",
76
+ "2xl": "24px",
77
+ "3xl": "30px"
78
+ },
79
+ lineHeight: {
80
+ none: "1",
81
+ tight: "1.25",
82
+ snug: "1.375",
83
+ normal: "1.5",
84
+ relaxed: "1.625"
85
+ },
86
+ fontWeight: {
87
+ normal: "400",
88
+ medium: "500",
89
+ semibold: "600",
90
+ bold: "700"
91
+ }
92
+ }, s = {
93
+ width: {
94
+ none: "0px",
95
+ thin: "1px",
96
+ thick: "2px"
97
+ }
98
+ }, n = {
99
+ duration: {
100
+ fast: "100ms",
101
+ normal: "150ms",
102
+ slow: "250ms"
103
+ },
104
+ timing: "cubic-bezier(0.4, 0, 0.2, 1)"
105
+ }, f = {
106
+ // Surface / Background
107
+ "--ui-color-bg-canvas": o.white,
108
+ "--ui-color-bg-surface": o.white,
109
+ "--ui-color-bg-muted": o.gray[100],
110
+ "--ui-color-bg-subtle": o.gray[50],
111
+ "--ui-color-bg-secondary": o.secondaryBgLight,
112
+ // #ffebcc
113
+ "--ui-color-bg-secondary-subtle": o.secondaryBgSubtle,
114
+ // #ffe4c9
115
+ // Text / Foreground
116
+ "--ui-color-text-primary": o.black,
117
+ "--ui-color-text-secondary": o.gray[700],
118
+ "--ui-color-text-muted": o.gray[500],
119
+ "--ui-color-text-inverse": o.white,
120
+ // Primary / Brand Accent
121
+ "--ui-color-primary": o.primary,
122
+ // #ff5500
123
+ "--ui-color-primary-hover": o.primaryHover,
124
+ // #e04b00
125
+ "--ui-color-primary-active": o.primaryActive,
126
+ // #cc4400
127
+ "--ui-color-primary-contrast": o.white,
128
+ "--ui-color-primary-subtle": o.primarySubtle,
129
+ // Borders & Dividers (Cubit 대비 강화)
130
+ "--ui-color-border": o.gray[300],
131
+ "--ui-color-border-strong": o.black,
132
+ "--ui-color-border-muted": o.gray[200],
133
+ // Focus & Rings
134
+ "--ui-color-focus-ring": o.primary,
135
+ // Feedback states (WCAG AA 4.5:1 준수)
136
+ "--ui-color-success": o.success,
137
+ "--ui-color-success-bg": o.successBg,
138
+ "--ui-color-success-contrast": o.white,
139
+ "--ui-color-warning": o.warning,
140
+ "--ui-color-warning-bg": o.warningBg,
141
+ "--ui-color-warning-contrast": o.black,
142
+ "--ui-color-error": o.error,
143
+ "--ui-color-error-bg": o.errorBg,
144
+ "--ui-color-error-contrast": o.white,
145
+ "--ui-color-info": o.info,
146
+ "--ui-color-info-bg": o.infoBg,
147
+ "--ui-color-info-contrast": o.white,
148
+ // 보조 브랜드 색상 (보조색상1·2)
149
+ "--ui-color-secondary-1": o.secondaryAccent1,
150
+ "--ui-color-secondary-2": o.secondaryAccent2,
151
+ "--ui-color-skeleton": "#e9ecef",
152
+ "--ui-color-skeleton-shine": "#f8f9fa",
153
+ "--ui-color-tile": "#f7f8fa"
154
+ }, u = {
155
+ // Surface / Background (다크 모드 계층)
156
+ "--ui-color-bg-canvas": o.black,
157
+ // #000000
158
+ "--ui-color-bg-surface": o.gray[950],
159
+ // #121212
160
+ "--ui-color-bg-muted": o.gray[900],
161
+ // #212121
162
+ "--ui-color-bg-subtle": o.gray[800],
163
+ // #424242
164
+ "--ui-color-bg-secondary": "#331d0d",
165
+ // #ffebcc의 다크 모드 심도 매핑 (대비 보장)
166
+ "--ui-color-bg-secondary-subtle": "#442611",
167
+ // #ffe4c9의 다크 모드 심도 매핑
168
+ // Text / Foreground
169
+ "--ui-color-text-primary": o.white,
170
+ // #ffffff
171
+ "--ui-color-text-secondary": o.gray[300],
172
+ // #e0e0e0
173
+ "--ui-color-text-muted": o.gray[400],
174
+ // #bdbdbd
175
+ "--ui-color-text-inverse": o.black,
176
+ // Primary / Brand Accent (#ff5500 대비율 최적화)
177
+ "--ui-color-primary": o.primary,
178
+ // #ff5500
179
+ "--ui-color-primary-hover": "#ff6e26",
180
+ // 다크 가독성 호버
181
+ "--ui-color-primary-active": "#e04b00",
182
+ "--ui-color-primary-contrast": o.white,
183
+ "--ui-color-primary-subtle": "#2a1408",
184
+ // Borders & Dividers (Cubit 테두리 대비 강화)
185
+ "--ui-color-border": o.gray[800],
186
+ // #424242
187
+ "--ui-color-border-strong": o.gray[500],
188
+ // #9e9e9e
189
+ "--ui-color-border-muted": o.gray[900],
190
+ // #212121
191
+ // Focus & Rings
192
+ "--ui-color-focus-ring": "#ff7733",
193
+ // Feedback states (WCAG AA 4.5:1 준수)
194
+ "--ui-color-success": "#4ade80",
195
+ "--ui-color-success-bg": "#052e16",
196
+ "--ui-color-success-contrast": o.white,
197
+ "--ui-color-warning": "#fbbf24",
198
+ "--ui-color-warning-bg": "#451a03",
199
+ "--ui-color-warning-contrast": o.black,
200
+ "--ui-color-error": "#f87171",
201
+ "--ui-color-error-bg": "#450a0a",
202
+ "--ui-color-error-contrast": o.white,
203
+ "--ui-color-info": "#38bdf8",
204
+ "--ui-color-info-bg": "#082f49",
205
+ "--ui-color-info-contrast": o.white,
206
+ // 보조 브랜드 색상 (보조색상1·2)
207
+ "--ui-color-secondary-1": o.secondaryAccent1Dark,
208
+ "--ui-color-secondary-2": o.secondaryAccent2Dark,
209
+ "--ui-color-skeleton": "#333333",
210
+ "--ui-color-skeleton-shine": "#212121",
211
+ "--ui-color-tile": "#161616"
212
+ }, m = {
213
+ // Spacing
214
+ "--ui-space-0": i[0],
215
+ "--ui-space-1": i[1],
216
+ "--ui-space-2": i[2],
217
+ "--ui-space-3": i[3],
218
+ "--ui-space-4": i[4],
219
+ "--ui-space-5": i[5],
220
+ "--ui-space-6": i[6],
221
+ "--ui-space-8": i[8],
222
+ "--ui-space-10": i[10],
223
+ "--ui-space-12": i[12],
224
+ "--ui-space-16": i[16],
225
+ // Radii (rounded — Bootstrap 스타일 라운딩)
226
+ "--ui-radius-none": c.none,
227
+ "--ui-radius-sm": c.sm,
228
+ "--ui-radius-md": c.md,
229
+ "--ui-radius-lg": c.lg,
230
+ "--ui-radius-full": c.full,
231
+ // Typography
232
+ "--ui-font-family-base": e.fontFamily,
233
+ "--ui-font-family-mono": e.fontFamilyMono,
234
+ "--ui-font-size-xs": e.fontSize.xs,
235
+ "--ui-font-size-sm": e.fontSize.sm,
236
+ "--ui-font-size-md": e.fontSize.md,
237
+ "--ui-font-size-lg": e.fontSize.lg,
238
+ "--ui-font-size-xl": e.fontSize.xl,
239
+ "--ui-font-size-2xl": e.fontSize["2xl"],
240
+ "--ui-font-size-3xl": e.fontSize["3xl"],
241
+ "--ui-line-height-none": e.lineHeight.none,
242
+ "--ui-line-height-tight": e.lineHeight.tight,
243
+ "--ui-line-height-snug": e.lineHeight.snug,
244
+ "--ui-line-height-normal": e.lineHeight.normal,
245
+ "--ui-line-height-relaxed": e.lineHeight.relaxed,
246
+ "--ui-font-weight-normal": e.fontWeight.normal,
247
+ "--ui-font-weight-medium": e.fontWeight.medium,
248
+ "--ui-font-weight-semibold": e.fontWeight.semibold,
249
+ "--ui-font-weight-bold": e.fontWeight.bold,
250
+ // Borders
251
+ "--ui-border-width-thin": s.width.thin,
252
+ "--ui-border-width-thick": s.width.thick,
253
+ // Transitions
254
+ "--ui-transition-fast": `${n.duration.fast} ${n.timing}`,
255
+ "--ui-transition-normal": `${n.duration.normal} ${n.timing}`,
256
+ "--ui-transition-slow": `${n.duration.slow} ${n.timing}`
257
+ };
258
+ function a(r, t = " ") {
259
+ return Object.entries(r).map(([l, g]) => `${t}${l}: ${g};`).join(`
260
+ `);
261
+ }
262
+ function d() {
263
+ const r = {
264
+ ...m,
265
+ ...f
266
+ };
267
+ return `/* Cubit UI Design Tokens - Root / Light Theme */
268
+ :root,
269
+ [data-theme="light"] {
270
+ ${a(r)}
271
+ }
272
+ `;
273
+ }
274
+ function b() {
275
+ return `/* Cubit UI Design Tokens - Dark Theme */
276
+ [data-theme="dark"] {
277
+ ${a(u)}
278
+ }
279
+
280
+ @media (prefers-color-scheme: dark) {
281
+ :root:not([data-theme="light"]) {
282
+ ${a(u, " ")}
283
+ }
284
+ }
285
+ `;
286
+ }
287
+ function h(r, t = document.documentElement) {
288
+ r === "system" ? t.removeAttribute("data-theme") : t.setAttribute("data-theme", r);
289
+ }
290
+ function p(r = document.documentElement) {
291
+ const t = r.getAttribute("data-theme");
292
+ return t === "light" || t === "dark" ? t : "system";
293
+ }
294
+ export {
295
+ s as borders,
296
+ o as colors,
297
+ u as darkTheme,
298
+ a as formatCssVariables,
299
+ b as generateDarkCss,
300
+ d as generateRootCss,
301
+ p as getTheme,
302
+ f as lightTheme,
303
+ c as radii,
304
+ h as setTheme,
305
+ i as spacing,
306
+ m as staticTokens,
307
+ n as transitions,
308
+ e as typography
309
+ };
package/dist/primitives.d.ts ADDED
@@ -0,0 +1,101 @@
1
+ /**
2
+ * Cubit UI Primitives
3
+ * 불변의 기준 원시값 정의 (절대 변경 금지 기준값 준수)
4
+ */
5
+ export declare const colors: {
6
+ readonly black: "#000000";
7
+ readonly white: "#ffffff";
8
+ readonly primary: "#ff5500";
9
+ readonly primaryHover: "#e04b00";
10
+ readonly primaryActive: "#cc4400";
11
+ readonly primarySubtle: "#fff3e6";
12
+ readonly secondaryBgLight: "#ffebcc";
13
+ readonly secondaryBgSubtle: "#ffe4c9";
14
+ readonly secondaryAccent1: "#0284c7";
15
+ readonly secondaryAccent1Dark: "#38bdf8";
16
+ readonly secondaryAccent2: "#0d9488";
17
+ readonly secondaryAccent2Dark: "#2dd4bf";
18
+ readonly gray: {
19
+ readonly 50: "#fafafa";
20
+ readonly 100: "#f5f5f5";
21
+ readonly 200: "#eeeeee";
22
+ readonly 300: "#e0e0e0";
23
+ readonly 400: "#bdbdbd";
24
+ readonly 500: "#9e9e9e";
25
+ readonly 600: "#757575";
26
+ readonly 700: "#616161";
27
+ readonly 800: "#424242";
28
+ readonly 900: "#212121";
29
+ readonly 950: "#121212";
30
+ };
31
+ readonly success: "#1b873f";
32
+ readonly successBg: "#e8f5e9";
33
+ readonly warning: "#d97706";
34
+ readonly warningBg: "#fffbeb";
35
+ readonly error: "#d32f2f";
36
+ readonly errorBg: "#fde8e8";
37
+ readonly info: "#0284c7";
38
+ readonly infoBg: "#e0f2fe";
39
+ };
40
+ export declare const spacing: {
41
+ readonly 0: "0px";
42
+ readonly 1: "4px";
43
+ readonly 2: "8px";
44
+ readonly 3: "12px";
45
+ readonly 4: "16px";
46
+ readonly 5: "20px";
47
+ readonly 6: "24px";
48
+ readonly 8: "32px";
49
+ readonly 10: "40px";
50
+ readonly 12: "48px";
51
+ readonly 16: "64px";
52
+ };
53
+ export declare const radii: {
54
+ readonly none: "0px";
55
+ readonly sm: "8px";
56
+ readonly md: "12px";
57
+ readonly lg: "16px";
58
+ readonly full: "9999px";
59
+ };
60
+ export declare const typography: {
61
+ readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
62
+ readonly fontFamilyMono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
63
+ readonly fontSize: {
64
+ readonly xs: "12px";
65
+ readonly sm: "14px";
66
+ readonly md: "16px";
67
+ readonly lg: "18px";
68
+ readonly xl: "20px";
69
+ readonly '2xl': "24px";
70
+ readonly '3xl': "30px";
71
+ };
72
+ readonly lineHeight: {
73
+ readonly none: "1";
74
+ readonly tight: "1.25";
75
+ readonly snug: "1.375";
76
+ readonly normal: "1.5";
77
+ readonly relaxed: "1.625";
78
+ };
79
+ readonly fontWeight: {
80
+ readonly normal: "400";
81
+ readonly medium: "500";
82
+ readonly semibold: "600";
83
+ readonly bold: "700";
84
+ };
85
+ };
86
+ export declare const borders: {
87
+ readonly width: {
88
+ readonly none: "0px";
89
+ readonly thin: "1px";
90
+ readonly thick: "2px";
91
+ };
92
+ };
93
+ export declare const transitions: {
94
+ readonly duration: {
95
+ readonly fast: "100ms";
96
+ readonly normal: "150ms";
97
+ readonly slow: "250ms";
98
+ };
99
+ readonly timing: "cubic-bezier(0.4, 0, 0.2, 1)";
100
+ };
101
+ //# sourceMappingURL=primitives.d.ts.map
package/dist/primitives.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC"}
package/dist/semantics.d.ts ADDED
@@ -0,0 +1,80 @@
1
+ export interface ThemeTokens {
2
+ '--ui-color-bg-canvas': string;
3
+ '--ui-color-bg-surface': string;
4
+ '--ui-color-bg-muted': string;
5
+ '--ui-color-bg-subtle': string;
6
+ '--ui-color-bg-secondary': string;
7
+ '--ui-color-bg-secondary-subtle': string;
8
+ '--ui-color-text-primary': string;
9
+ '--ui-color-text-secondary': string;
10
+ '--ui-color-text-muted': string;
11
+ '--ui-color-text-inverse': string;
12
+ '--ui-color-primary': string;
13
+ '--ui-color-primary-hover': string;
14
+ '--ui-color-primary-active': string;
15
+ '--ui-color-primary-contrast': string;
16
+ '--ui-color-primary-subtle': string;
17
+ '--ui-color-border': string;
18
+ '--ui-color-border-strong': string;
19
+ '--ui-color-border-muted': string;
20
+ '--ui-color-focus-ring': string;
21
+ '--ui-color-success': string;
22
+ '--ui-color-success-bg': string;
23
+ '--ui-color-success-contrast': string;
24
+ '--ui-color-warning': string;
25
+ '--ui-color-warning-bg': string;
26
+ '--ui-color-warning-contrast': string;
27
+ '--ui-color-error': string;
28
+ '--ui-color-error-bg': string;
29
+ '--ui-color-error-contrast': string;
30
+ '--ui-color-info': string;
31
+ '--ui-color-info-bg': string;
32
+ '--ui-color-info-contrast': string;
33
+ '--ui-color-secondary-1': string;
34
+ '--ui-color-secondary-2': string;
35
+ '--ui-color-skeleton': string;
36
+ '--ui-color-skeleton-shine': string;
37
+ '--ui-color-tile': string;
38
+ }
39
+ export declare const staticTokens: {
40
+ readonly '--ui-space-0': "0px";
41
+ readonly '--ui-space-1': "4px";
42
+ readonly '--ui-space-2': "8px";
43
+ readonly '--ui-space-3': "12px";
44
+ readonly '--ui-space-4': "16px";
45
+ readonly '--ui-space-5': "20px";
46
+ readonly '--ui-space-6': "24px";
47
+ readonly '--ui-space-8': "32px";
48
+ readonly '--ui-space-10': "40px";
49
+ readonly '--ui-space-12': "48px";
50
+ readonly '--ui-space-16': "64px";
51
+ readonly '--ui-radius-none': "0px";
52
+ readonly '--ui-radius-sm': "8px";
53
+ readonly '--ui-radius-md': "12px";
54
+ readonly '--ui-radius-lg': "16px";
55
+ readonly '--ui-radius-full': "9999px";
56
+ readonly '--ui-font-family-base': "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
57
+ readonly '--ui-font-family-mono': "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
58
+ readonly '--ui-font-size-xs': "12px";
59
+ readonly '--ui-font-size-sm': "14px";
60
+ readonly '--ui-font-size-md': "16px";
61
+ readonly '--ui-font-size-lg': "18px";
62
+ readonly '--ui-font-size-xl': "20px";
63
+ readonly '--ui-font-size-2xl': "24px";
64
+ readonly '--ui-font-size-3xl': "30px";
65
+ readonly '--ui-line-height-none': "1";
66
+ readonly '--ui-line-height-tight': "1.25";
67
+ readonly '--ui-line-height-snug': "1.375";
68
+ readonly '--ui-line-height-normal': "1.5";
69
+ readonly '--ui-line-height-relaxed': "1.625";
70
+ readonly '--ui-font-weight-normal': "400";
71
+ readonly '--ui-font-weight-medium': "500";
72
+ readonly '--ui-font-weight-semibold': "600";
73
+ readonly '--ui-font-weight-bold': "700";
74
+ readonly '--ui-border-width-thin': "1px";
75
+ readonly '--ui-border-width-thick': "2px";
76
+ readonly '--ui-transition-fast': "100ms cubic-bezier(0.4, 0, 0.2, 1)";
77
+ readonly '--ui-transition-normal': "150ms cubic-bezier(0.4, 0, 0.2, 1)";
78
+ readonly '--ui-transition-slow': "250ms cubic-bezier(0.4, 0, 0.2, 1)";
79
+ };
80
+ //# sourceMappingURL=semantics.d.ts.map
package/dist/semantics.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"semantics.d.ts","sourceRoot":"","sources":["../src/semantics.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAE1B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,yBAAyB,EAAE,MAAM,CAAC;IAClC,gCAAgC,EAAE,MAAM,CAAC;IAGzC,yBAAyB,EAAE,MAAM,CAAC;IAClC,2BAA2B,EAAE,MAAM,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;IAChC,yBAAyB,EAAE,MAAM,CAAC;IAGlC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IACpC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IAGpC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,0BAA0B,EAAE,MAAM,CAAC;IACnC,yBAAyB,EAAE,MAAM,CAAC;IAGlC,uBAAuB,EAAE,MAAM,CAAC;IAGhC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;IAChC,6BAA6B,EAAE,MAAM,CAAC;IACtC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;IAChC,6BAA6B,EAAE,MAAM,CAAC;IACtC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,0BAA0B,EAAE,MAAM,CAAC;IACnC,wBAAwB,EAAE,MAAM,CAAC;IACjC,wBAAwB,EAAE,MAAM,CAAC;IACjC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDf,CAAC"}
package/dist/themes/dark.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ThemeTokens } from '../semantics';
2
+ /**
3
+ * Dark Theme Tokens
4
+ * 기준값: Background Black 기반 / Text White / Primary #ff5500 유지 및 WCAG 2.1 AA 대비 보장
5
+ * 보조 색상(#ffebcc, #ffe4c9)의 정체성을 다크 모드에 맞게 고대비로 매핑
6
+ */
7
+ export declare const darkTheme: ThemeTokens;
8
+ //# sourceMappingURL=dark.d.ts.map
package/dist/themes/dark.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../src/themes/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,WAqDvB,CAAC"}
package/dist/themes/light.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ThemeTokens } from '../semantics';
2
+ /**
3
+ * Light Theme Tokens
4
+ * 기준값: Background White / Text Black / Primary #ff5500 / Secondary #ffebcc, #ffe4c9
5
+ */
6
+ export declare const lightTheme: ThemeTokens;
7
+ //# sourceMappingURL=light.d.ts.map
package/dist/themes/light.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../src/themes/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,WAqDxB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,48 @@
1
1
  {
2
2
  "name": "@cubit-ui/tokens",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "1.0.0",
4
+ "description": "Design tokens and CSS custom properties generator for Cubit UI",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/tsuel-dev/Cubit.git",
9
+ "directory": "packages/tokens"
10
+ },
11
+ "homepage": "https://github.com/tsuel-dev/Cubit#readme",
12
+ "bugs": {
13
+ "url": "https://github.com/tsuel-dev/Cubit/issues"
14
+ },
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "keywords": [
19
+ "web-components",
20
+ "ui",
21
+ "design-system",
22
+ "cubit"
23
+ ],
24
+ "type": "module",
25
+ "main": "./dist/index.js",
26
+ "module": "./dist/index.js",
27
+ "types": "./dist/index.d.ts",
28
+ "exports": {
29
+ ".": {
30
+ "types": "./dist/index.d.ts",
31
+ "import": "./dist/index.js"
32
+ },
33
+ "./css/tokens.css": "./dist/css/tokens.css",
34
+ "./css/dark.css": "./dist/css/dark.css",
35
+ "./css/*": "./dist/css/*"
36
+ },
37
+ "files": [
38
+ "dist"
39
+ ],
40
+ "devDependencies": {
41
+ "typescript": "^5.7.3",
42
+ "vite": "^6.0.7"
43
+ },
44
+ "scripts": {
45
+ "build": "vite build && tsc --emitDeclarationOnly",
46
+ "typecheck": "tsc --noEmit"
47
+ }
6
48
  }