@akanaka/tokens 0.3.0 → 0.4.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 (6) hide show
  1. package/dist/index.d.ts +113 -1
  2. package/dist/index.js +113 -0
  3. package/dist/index.js.map +1 -1
  4. package/dist/tokens.css +57 -0
  5. package/dist/tokens.css.map +1 -1
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const colors: {
12
12
  readonly 100: "#F5F5F4";
13
13
  readonly 200: "#E7E5E4";
14
14
  readonly 300: "#D6D3D1";
15
+ readonly 400: "#A8A29E";
15
16
  readonly 500: "#78716C";
16
17
  readonly 700: "#44403C";
17
18
  readonly 900: "#1C1917";
@@ -22,6 +23,38 @@ declare const colors: {
22
23
  readonly error: "#EF4444";
23
24
  readonly info: "#3B82F6";
24
25
  };
26
+ readonly green: {
27
+ readonly 50: "#F0FDF4";
28
+ readonly 100: "#DCFCE7";
29
+ readonly 200: "#BBF7D0";
30
+ readonly 500: "#22C55E";
31
+ readonly 600: "#16A34A";
32
+ readonly 700: "#15803D";
33
+ };
34
+ readonly amber: {
35
+ readonly 50: "#FFFBEB";
36
+ readonly 100: "#FEF3C7";
37
+ readonly 200: "#FDE68A";
38
+ readonly 500: "#F59E0B";
39
+ readonly 600: "#D97706";
40
+ readonly 700: "#B45309";
41
+ };
42
+ readonly red: {
43
+ readonly 50: "#FEF2F2";
44
+ readonly 100: "#FEE2E2";
45
+ readonly 200: "#FECACA";
46
+ readonly 500: "#EF4444";
47
+ readonly 600: "#DC2626";
48
+ readonly 700: "#B91C1C";
49
+ };
50
+ readonly blue: {
51
+ readonly 50: "#EFF6FF";
52
+ readonly 100: "#DBEAFE";
53
+ readonly 200: "#BFDBFE";
54
+ readonly 500: "#3B82F6";
55
+ readonly 600: "#2563EB";
56
+ readonly 700: "#1D4ED8";
57
+ };
25
58
  };
26
59
  declare const typography: {
27
60
  readonly fontFamily: {
@@ -72,6 +105,45 @@ declare const transitions: {
72
105
  readonly base: "200ms ease";
73
106
  readonly slow: "300ms ease";
74
107
  };
108
+ declare const semantic: {
109
+ readonly background: {
110
+ readonly default: "#FFFFFF";
111
+ readonly page: "#FAFAF9";
112
+ readonly muted: "#F5F5F4";
113
+ readonly subtle: "#E7E5E4";
114
+ readonly elevated: "#FFFFFF";
115
+ readonly overlay: "rgba(28, 25, 23, 0.5)";
116
+ readonly primary: "#E07A5F";
117
+ readonly success: "#F0FDF4";
118
+ readonly warning: "#FFFBEB";
119
+ readonly error: "#FEF2F2";
120
+ readonly info: "#EFF6FF";
121
+ readonly nav: "#FADDD5";
122
+ readonly navHover: "#F4B8A6";
123
+ readonly navActive: "#E07A5F";
124
+ };
125
+ readonly foreground: {
126
+ readonly default: "#1C1917";
127
+ readonly muted: "#78716C";
128
+ readonly subtle: "#A8A29E";
129
+ readonly primary: "#A8503A";
130
+ readonly success: "#15803D";
131
+ readonly warning: "#B45309";
132
+ readonly error: "#B91C1C";
133
+ readonly info: "#1D4ED8";
134
+ readonly onPrimary: "#FFFFFF";
135
+ readonly nav: "#44403C";
136
+ readonly navHover: "#1C1917";
137
+ readonly navActive: "#FFFFFF";
138
+ };
139
+ readonly border: {
140
+ readonly default: "#E7E5E4";
141
+ readonly muted: "#F5F5F4";
142
+ readonly strong: "#D6D3D1";
143
+ readonly primary: "#E07A5F";
144
+ readonly error: "#EF4444";
145
+ };
146
+ };
75
147
  declare const cssVars: {
76
148
  readonly colors: {
77
149
  readonly primary: {
@@ -87,6 +159,7 @@ declare const cssVars: {
87
159
  readonly 100: "var(--color-neutral-100)";
88
160
  readonly 200: "var(--color-neutral-200)";
89
161
  readonly 300: "var(--color-neutral-300)";
162
+ readonly 400: "var(--color-neutral-400)";
90
163
  readonly 500: "var(--color-neutral-500)";
91
164
  readonly 700: "var(--color-neutral-700)";
92
165
  readonly 900: "var(--color-neutral-900)";
@@ -96,6 +169,45 @@ declare const cssVars: {
96
169
  readonly error: "var(--color-error)";
97
170
  readonly info: "var(--color-info)";
98
171
  };
172
+ readonly semantic: {
173
+ readonly background: {
174
+ readonly default: "var(--background-default)";
175
+ readonly page: "var(--background-page)";
176
+ readonly muted: "var(--background-muted)";
177
+ readonly subtle: "var(--background-subtle)";
178
+ readonly elevated: "var(--background-elevated)";
179
+ readonly overlay: "var(--background-overlay)";
180
+ readonly primary: "var(--background-primary)";
181
+ readonly success: "var(--background-success)";
182
+ readonly warning: "var(--background-warning)";
183
+ readonly error: "var(--background-error)";
184
+ readonly info: "var(--background-info)";
185
+ readonly nav: "var(--background-nav)";
186
+ readonly navHover: "var(--background-nav-hover)";
187
+ readonly navActive: "var(--background-nav-active)";
188
+ };
189
+ readonly foreground: {
190
+ readonly default: "var(--foreground-default)";
191
+ readonly muted: "var(--foreground-muted)";
192
+ readonly subtle: "var(--foreground-subtle)";
193
+ readonly primary: "var(--foreground-primary)";
194
+ readonly success: "var(--foreground-success)";
195
+ readonly warning: "var(--foreground-warning)";
196
+ readonly error: "var(--foreground-error)";
197
+ readonly info: "var(--foreground-info)";
198
+ readonly onPrimary: "var(--foreground-on-primary)";
199
+ readonly nav: "var(--foreground-nav)";
200
+ readonly navHover: "var(--foreground-nav-hover)";
201
+ readonly navActive: "var(--foreground-nav-active)";
202
+ };
203
+ readonly border: {
204
+ readonly default: "var(--border-default)";
205
+ readonly muted: "var(--border-muted)";
206
+ readonly strong: "var(--border-strong)";
207
+ readonly primary: "var(--border-primary)";
208
+ readonly error: "var(--border-error)";
209
+ };
210
+ };
99
211
  };
100
212
 
101
- export { colors, cssVars, radius, shadows, spacing, transitions, typography };
213
+ export { colors, cssVars, radius, semantic, shadows, spacing, transitions, typography };
package/dist/index.js CHANGED
@@ -13,6 +13,7 @@ var colors = {
13
13
  100: "#F5F5F4",
14
14
  200: "#E7E5E4",
15
15
  300: "#D6D3D1",
16
+ 400: "#A8A29E",
16
17
  500: "#78716C",
17
18
  700: "#44403C",
18
19
  900: "#1C1917"
@@ -22,6 +23,38 @@ var colors = {
22
23
  warning: "#F59E0B",
23
24
  error: "#EF4444",
24
25
  info: "#3B82F6"
26
+ },
27
+ green: {
28
+ 50: "#F0FDF4",
29
+ 100: "#DCFCE7",
30
+ 200: "#BBF7D0",
31
+ 500: "#22C55E",
32
+ 600: "#16A34A",
33
+ 700: "#15803D"
34
+ },
35
+ amber: {
36
+ 50: "#FFFBEB",
37
+ 100: "#FEF3C7",
38
+ 200: "#FDE68A",
39
+ 500: "#F59E0B",
40
+ 600: "#D97706",
41
+ 700: "#B45309"
42
+ },
43
+ red: {
44
+ 50: "#FEF2F2",
45
+ 100: "#FEE2E2",
46
+ 200: "#FECACA",
47
+ 500: "#EF4444",
48
+ 600: "#DC2626",
49
+ 700: "#B91C1C"
50
+ },
51
+ blue: {
52
+ 50: "#EFF6FF",
53
+ 100: "#DBEAFE",
54
+ 200: "#BFDBFE",
55
+ 500: "#3B82F6",
56
+ 600: "#2563EB",
57
+ 700: "#1D4ED8"
25
58
  }
26
59
  };
27
60
  var typography = {
@@ -73,6 +106,45 @@ var transitions = {
73
106
  base: "200ms ease",
74
107
  slow: "300ms ease"
75
108
  };
109
+ var semantic = {
110
+ background: {
111
+ default: "#FFFFFF",
112
+ page: "#FAFAF9",
113
+ muted: "#F5F5F4",
114
+ subtle: "#E7E5E4",
115
+ elevated: "#FFFFFF",
116
+ overlay: "rgba(28, 25, 23, 0.5)",
117
+ primary: "#E07A5F",
118
+ success: "#F0FDF4",
119
+ warning: "#FFFBEB",
120
+ error: "#FEF2F2",
121
+ info: "#EFF6FF",
122
+ nav: "#FADDD5",
123
+ navHover: "#F4B8A6",
124
+ navActive: "#E07A5F"
125
+ },
126
+ foreground: {
127
+ default: "#1C1917",
128
+ muted: "#78716C",
129
+ subtle: "#A8A29E",
130
+ primary: "#A8503A",
131
+ success: "#15803D",
132
+ warning: "#B45309",
133
+ error: "#B91C1C",
134
+ info: "#1D4ED8",
135
+ onPrimary: "#FFFFFF",
136
+ nav: "#44403C",
137
+ navHover: "#1C1917",
138
+ navActive: "#FFFFFF"
139
+ },
140
+ border: {
141
+ default: "#E7E5E4",
142
+ muted: "#F5F5F4",
143
+ strong: "#D6D3D1",
144
+ primary: "#E07A5F",
145
+ error: "#EF4444"
146
+ }
147
+ };
76
148
  var cssVars = {
77
149
  colors: {
78
150
  primary: {
@@ -88,6 +160,7 @@ var cssVars = {
88
160
  100: "var(--color-neutral-100)",
89
161
  200: "var(--color-neutral-200)",
90
162
  300: "var(--color-neutral-300)",
163
+ 400: "var(--color-neutral-400)",
91
164
  500: "var(--color-neutral-500)",
92
165
  700: "var(--color-neutral-700)",
93
166
  900: "var(--color-neutral-900)"
@@ -96,12 +169,52 @@ var cssVars = {
96
169
  warning: "var(--color-warning)",
97
170
  error: "var(--color-error)",
98
171
  info: "var(--color-info)"
172
+ },
173
+ semantic: {
174
+ background: {
175
+ default: "var(--background-default)",
176
+ page: "var(--background-page)",
177
+ muted: "var(--background-muted)",
178
+ subtle: "var(--background-subtle)",
179
+ elevated: "var(--background-elevated)",
180
+ overlay: "var(--background-overlay)",
181
+ primary: "var(--background-primary)",
182
+ success: "var(--background-success)",
183
+ warning: "var(--background-warning)",
184
+ error: "var(--background-error)",
185
+ info: "var(--background-info)",
186
+ nav: "var(--background-nav)",
187
+ navHover: "var(--background-nav-hover)",
188
+ navActive: "var(--background-nav-active)"
189
+ },
190
+ foreground: {
191
+ default: "var(--foreground-default)",
192
+ muted: "var(--foreground-muted)",
193
+ subtle: "var(--foreground-subtle)",
194
+ primary: "var(--foreground-primary)",
195
+ success: "var(--foreground-success)",
196
+ warning: "var(--foreground-warning)",
197
+ error: "var(--foreground-error)",
198
+ info: "var(--foreground-info)",
199
+ onPrimary: "var(--foreground-on-primary)",
200
+ nav: "var(--foreground-nav)",
201
+ navHover: "var(--foreground-nav-hover)",
202
+ navActive: "var(--foreground-nav-active)"
203
+ },
204
+ border: {
205
+ default: "var(--border-default)",
206
+ muted: "var(--border-muted)",
207
+ strong: "var(--border-strong)",
208
+ primary: "var(--border-primary)",
209
+ error: "var(--border-error)"
210
+ }
99
211
  }
100
212
  };
101
213
  export {
102
214
  colors,
103
215
  cssVars,
104
216
  radius,
217
+ semantic,
105
218
  shadows,
106
219
  spacing,
107
220
  transitions,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n Design Tokens — TypeScript Constants\n Mirrors tokens.css for programmatic access.\n ========================================================================== */\n\nexport const colors = {\n primary: {\n 50: \"#FDF4F1\",\n 100: \"#FADDD5\",\n 200: \"#F4B8A6\",\n 500: \"#E07A5F\",\n 600: \"#C9664A\",\n 700: \"#A8503A\",\n },\n neutral: {\n 50: \"#FAFAF9\",\n 100: \"#F5F5F4\",\n 200: \"#E7E5E4\",\n 300: \"#D6D3D1\",\n 500: \"#78716C\",\n 700: \"#44403C\",\n 900: \"#1C1917\",\n },\n semantic: {\n success: \"#22C55E\",\n warning: \"#F59E0B\",\n error: \"#EF4444\",\n info: \"#3B82F6\",\n },\n} as const;\n\nexport const typography = {\n fontFamily: {\n sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n mono: \"'JetBrains Mono', ui-monospace, monospace\",\n },\n fontWeight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n },\n fontSize: {\n caption: \"0.75rem\",\n overline: \"0.6875rem\",\n bodySm: \"0.8125rem\",\n body: \"0.875rem\",\n h3: \"1rem\",\n h2: \"1.125rem\",\n h1: \"1.5rem\",\n display: \"2.25rem\",\n },\n} as const;\n\nexport const spacing = {\n 1: \"0.25rem\",\n 2: \"0.5rem\",\n 3: \"0.75rem\",\n 4: \"1rem\",\n 6: \"1.5rem\",\n 8: \"2rem\",\n 12: \"3rem\",\n} as const;\n\nexport const radius = {\n sm: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n full: \"9999px\",\n} as const;\n\nexport const shadows = {\n sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n fast: \"150ms ease\",\n base: \"200ms ease\",\n slow: \"300ms ease\",\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n colors: {\n primary: {\n 50: \"var(--color-primary-50)\",\n 100: \"var(--color-primary-100)\",\n 200: \"var(--color-primary-200)\",\n 500: \"var(--color-primary-500)\",\n 600: \"var(--color-primary-600)\",\n 700: \"var(--color-primary-700)\",\n },\n neutral: {\n 50: \"var(--color-neutral-50)\",\n 100: \"var(--color-neutral-100)\",\n 200: \"var(--color-neutral-200)\",\n 300: \"var(--color-neutral-300)\",\n 500: \"var(--color-neutral-500)\",\n 700: \"var(--color-neutral-700)\",\n 900: \"var(--color-neutral-900)\",\n },\n success: \"var(--color-success)\",\n warning: \"var(--color-warning)\",\n error: \"var(--color-error)\",\n info: \"var(--color-info)\",\n },\n} as const;\n"],"mappings":";AAKO,IAAM,SAAS;AAAA,EACpB,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN;AAEO,IAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAEO,IAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,IAAM,UAAU;AAAA,EACrB,QAAQ;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;","names":[]}
1
+ {"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n Design Tokens — TypeScript Constants\n Mirrors tokens.css for programmatic access.\n ========================================================================== */\n\nexport const colors = {\n primary: {\n 50: \"#FDF4F1\",\n 100: \"#FADDD5\",\n 200: \"#F4B8A6\",\n 500: \"#E07A5F\",\n 600: \"#C9664A\",\n 700: \"#A8503A\",\n },\n neutral: {\n 50: \"#FAFAF9\",\n 100: \"#F5F5F4\",\n 200: \"#E7E5E4\",\n 300: \"#D6D3D1\",\n 400: \"#A8A29E\",\n 500: \"#78716C\",\n 700: \"#44403C\",\n 900: \"#1C1917\",\n },\n semantic: {\n success: \"#22C55E\",\n warning: \"#F59E0B\",\n error: \"#EF4444\",\n info: \"#3B82F6\",\n },\n green: {\n 50: \"#F0FDF4\",\n 100: \"#DCFCE7\",\n 200: \"#BBF7D0\",\n 500: \"#22C55E\",\n 600: \"#16A34A\",\n 700: \"#15803D\",\n },\n amber: {\n 50: \"#FFFBEB\",\n 100: \"#FEF3C7\",\n 200: \"#FDE68A\",\n 500: \"#F59E0B\",\n 600: \"#D97706\",\n 700: \"#B45309\",\n },\n red: {\n 50: \"#FEF2F2\",\n 100: \"#FEE2E2\",\n 200: \"#FECACA\",\n 500: \"#EF4444\",\n 600: \"#DC2626\",\n 700: \"#B91C1C\",\n },\n blue: {\n 50: \"#EFF6FF\",\n 100: \"#DBEAFE\",\n 200: \"#BFDBFE\",\n 500: \"#3B82F6\",\n 600: \"#2563EB\",\n 700: \"#1D4ED8\",\n },\n} as const;\n\nexport const typography = {\n fontFamily: {\n sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n mono: \"'JetBrains Mono', ui-monospace, monospace\",\n },\n fontWeight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n },\n fontSize: {\n caption: \"0.75rem\",\n overline: \"0.6875rem\",\n bodySm: \"0.8125rem\",\n body: \"0.875rem\",\n h3: \"1rem\",\n h2: \"1.125rem\",\n h1: \"1.5rem\",\n display: \"2.25rem\",\n },\n} as const;\n\nexport const spacing = {\n 1: \"0.25rem\",\n 2: \"0.5rem\",\n 3: \"0.75rem\",\n 4: \"1rem\",\n 6: \"1.5rem\",\n 8: \"2rem\",\n 12: \"3rem\",\n} as const;\n\nexport const radius = {\n sm: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n full: \"9999px\",\n} as const;\n\nexport const shadows = {\n sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n fast: \"150ms ease\",\n base: \"200ms ease\",\n slow: \"300ms ease\",\n} as const;\n\nexport const semantic = {\n background: {\n default: \"#FFFFFF\",\n page: \"#FAFAF9\",\n muted: \"#F5F5F4\",\n subtle: \"#E7E5E4\",\n elevated: \"#FFFFFF\",\n overlay: \"rgba(28, 25, 23, 0.5)\",\n primary: \"#E07A5F\",\n success: \"#F0FDF4\",\n warning: \"#FFFBEB\",\n error: \"#FEF2F2\",\n info: \"#EFF6FF\",\n nav: \"#FADDD5\",\n navHover: \"#F4B8A6\",\n navActive: \"#E07A5F\",\n },\n foreground: {\n default: \"#1C1917\",\n muted: \"#78716C\",\n subtle: \"#A8A29E\",\n primary: \"#A8503A\",\n success: \"#15803D\",\n warning: \"#B45309\",\n error: \"#B91C1C\",\n info: \"#1D4ED8\",\n onPrimary: \"#FFFFFF\",\n nav: \"#44403C\",\n navHover: \"#1C1917\",\n navActive: \"#FFFFFF\",\n },\n border: {\n default: \"#E7E5E4\",\n muted: \"#F5F5F4\",\n strong: \"#D6D3D1\",\n primary: \"#E07A5F\",\n error: \"#EF4444\",\n },\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n colors: {\n primary: {\n 50: \"var(--color-primary-50)\",\n 100: \"var(--color-primary-100)\",\n 200: \"var(--color-primary-200)\",\n 500: \"var(--color-primary-500)\",\n 600: \"var(--color-primary-600)\",\n 700: \"var(--color-primary-700)\",\n },\n neutral: {\n 50: \"var(--color-neutral-50)\",\n 100: \"var(--color-neutral-100)\",\n 200: \"var(--color-neutral-200)\",\n 300: \"var(--color-neutral-300)\",\n 400: \"var(--color-neutral-400)\",\n 500: \"var(--color-neutral-500)\",\n 700: \"var(--color-neutral-700)\",\n 900: \"var(--color-neutral-900)\",\n },\n success: \"var(--color-success)\",\n warning: \"var(--color-warning)\",\n error: \"var(--color-error)\",\n info: \"var(--color-info)\",\n },\n semantic: {\n background: {\n default: \"var(--background-default)\",\n page: \"var(--background-page)\",\n muted: \"var(--background-muted)\",\n subtle: \"var(--background-subtle)\",\n elevated: \"var(--background-elevated)\",\n overlay: \"var(--background-overlay)\",\n primary: \"var(--background-primary)\",\n success: \"var(--background-success)\",\n warning: \"var(--background-warning)\",\n error: \"var(--background-error)\",\n info: \"var(--background-info)\",\n nav: \"var(--background-nav)\",\n navHover: \"var(--background-nav-hover)\",\n navActive: \"var(--background-nav-active)\",\n },\n foreground: {\n default: \"var(--foreground-default)\",\n muted: \"var(--foreground-muted)\",\n subtle: \"var(--foreground-subtle)\",\n primary: \"var(--foreground-primary)\",\n success: \"var(--foreground-success)\",\n warning: \"var(--foreground-warning)\",\n error: \"var(--foreground-error)\",\n info: \"var(--foreground-info)\",\n onPrimary: \"var(--foreground-on-primary)\",\n nav: \"var(--foreground-nav)\",\n navHover: \"var(--foreground-nav-hover)\",\n navActive: \"var(--foreground-nav-active)\",\n },\n border: {\n default: \"var(--border-default)\",\n muted: \"var(--border-muted)\",\n strong: \"var(--border-strong)\",\n primary: \"var(--border-primary)\",\n error: \"var(--border-error)\",\n },\n },\n} as const;\n"],"mappings":"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","names":[]}
package/dist/tokens.css CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  /* src/tokens.css */
9
9
  :root {
10
+ --color-white: #FFFFFF;
10
11
  --color-primary-50: #FDF4F1;
11
12
  --color-primary-100: #FADDD5;
12
13
  --color-primary-200: #F4B8A6;
@@ -17,9 +18,34 @@
17
18
  --color-neutral-100: #F5F5F4;
18
19
  --color-neutral-200: #E7E5E4;
19
20
  --color-neutral-300: #D6D3D1;
21
+ --color-neutral-400: #A8A29E;
20
22
  --color-neutral-500: #78716C;
21
23
  --color-neutral-700: #44403C;
22
24
  --color-neutral-900: #1C1917;
25
+ --color-green-50: #F0FDF4;
26
+ --color-green-100: #DCFCE7;
27
+ --color-green-200: #BBF7D0;
28
+ --color-green-500: #22C55E;
29
+ --color-green-600: #16A34A;
30
+ --color-green-700: #15803D;
31
+ --color-amber-50: #FFFBEB;
32
+ --color-amber-100: #FEF3C7;
33
+ --color-amber-200: #FDE68A;
34
+ --color-amber-500: #F59E0B;
35
+ --color-amber-600: #D97706;
36
+ --color-amber-700: #B45309;
37
+ --color-red-50: #FEF2F2;
38
+ --color-red-100: #FEE2E2;
39
+ --color-red-200: #FECACA;
40
+ --color-red-500: #EF4444;
41
+ --color-red-600: #DC2626;
42
+ --color-red-700: #B91C1C;
43
+ --color-blue-50: #EFF6FF;
44
+ --color-blue-100: #DBEAFE;
45
+ --color-blue-200: #BFDBFE;
46
+ --color-blue-500: #3B82F6;
47
+ --color-blue-600: #2563EB;
48
+ --color-blue-700: #1D4ED8;
23
49
  --color-success: #22C55E;
24
50
  --color-warning: #F59E0B;
25
51
  --color-error: #EF4444;
@@ -61,6 +87,37 @@
61
87
  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);
62
88
  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);
63
89
  --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);
90
+ --background-default: var(--color-white);
91
+ --background-page: var(--color-neutral-50);
92
+ --background-muted: var(--color-neutral-100);
93
+ --background-subtle: var(--color-neutral-200);
94
+ --background-elevated: var(--color-white);
95
+ --background-overlay: rgba(28, 25, 23, 0.5);
96
+ --background-primary: var(--color-primary-500);
97
+ --background-success: var(--color-green-50);
98
+ --background-warning: var(--color-amber-50);
99
+ --background-error: var(--color-red-50);
100
+ --background-info: var(--color-blue-50);
101
+ --background-nav: var(--color-primary-100);
102
+ --background-nav-hover: var(--color-primary-200);
103
+ --background-nav-active: var(--color-primary-500);
104
+ --foreground-default: var(--color-neutral-900);
105
+ --foreground-muted: var(--color-neutral-500);
106
+ --foreground-subtle: var(--color-neutral-400);
107
+ --foreground-primary: var(--color-primary-700);
108
+ --foreground-success: var(--color-green-700);
109
+ --foreground-warning: var(--color-amber-700);
110
+ --foreground-error: var(--color-red-700);
111
+ --foreground-info: var(--color-blue-700);
112
+ --foreground-on-primary: #FFFFFF;
113
+ --foreground-nav: var(--color-neutral-700);
114
+ --foreground-nav-hover: var(--color-neutral-900);
115
+ --foreground-nav-active: var(--color-white);
116
+ --border-default: var(--color-neutral-200);
117
+ --border-muted: var(--color-neutral-100);
118
+ --border-strong: var(--color-neutral-300);
119
+ --border-primary: var(--color-primary-500);
120
+ --border-error: var(--color-error);
64
121
  --transition-fast: 150ms ease;
65
122
  --transition-base: 200ms ease;
66
123
  --transition-slow: 300ms ease;
package/dist/tokens.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n Design Tokens — CSS Variables\n Source of truth for the design system.\n ========================================================================== */\n\n:root {\n /* -------------------------------------------------------------------------\n Colors — Primary (Terracotta)\n ------------------------------------------------------------------------- */\n --color-primary-50: #FDF4F1;\n --color-primary-100: #FADDD5;\n --color-primary-200: #F4B8A6;\n --color-primary-500: #E07A5F;\n --color-primary-600: #C9664A;\n --color-primary-700: #A8503A;\n\n /* -------------------------------------------------------------------------\n Colors — Neutrals (Warm Stone)\n ------------------------------------------------------------------------- */\n --color-neutral-50: #FAFAF9;\n --color-neutral-100: #F5F5F4;\n --color-neutral-200: #E7E5E4;\n --color-neutral-300: #D6D3D1;\n --color-neutral-500: #78716C;\n --color-neutral-700: #44403C;\n --color-neutral-900: #1C1917;\n\n /* -------------------------------------------------------------------------\n Colors — Semantic\n ------------------------------------------------------------------------- */\n --color-success: #22C55E;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* -------------------------------------------------------------------------\n Typography — Font Families\n ------------------------------------------------------------------------- */\n --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n /* -------------------------------------------------------------------------\n Typography — Font Weights\n ------------------------------------------------------------------------- */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n /* -------------------------------------------------------------------------\n Typography — Font Sizes\n ------------------------------------------------------------------------- */\n --font-size-caption: 0.75rem; /* 12px */\n --font-size-overline: 0.6875rem; /* 11px */\n --font-size-body-sm: 0.8125rem; /* 13px */\n --font-size-body: 0.875rem; /* 14px */\n --font-size-h3: 1rem; /* 16px */\n --font-size-h2: 1.125rem; /* 18px */\n --font-size-h1: 1.5rem; /* 24px */\n --font-size-display: 2.25rem; /* 36px */\n\n /* -------------------------------------------------------------------------\n Spacing\n ------------------------------------------------------------------------- */\n --spacing-1: 0.25rem; /* 4px */\n --spacing-2: 0.5rem; /* 8px */\n --spacing-3: 0.75rem; /* 12px */\n --spacing-4: 1rem; /* 16px */\n --spacing-6: 1.5rem; /* 24px */\n --spacing-8: 2rem; /* 32px */\n --spacing-12: 3rem; /* 48px */\n\n /* -------------------------------------------------------------------------\n Border Radius\n ------------------------------------------------------------------------- */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-full: 9999px;\n\n /* -------------------------------------------------------------------------\n Shadows\n ------------------------------------------------------------------------- */\n --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n /* -------------------------------------------------------------------------\n Transitions\n ------------------------------------------------------------------------- */\n --transition-fast: 150ms ease;\n --transition-base: 200ms ease;\n --transition-slow: 300ms ease;\n}"],"mappings":";;;;;;;;AAaA;AAIE,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,mBAAiB;AACjB,mBAAiB;AACjB,iBAAe;AACf,gBAAc;AAKd;AAAA,IAAa,SAAS;AAAA,IAAE,SAAS;AAAA,IAAE,aAAa;AAAA,IAAE;AAClD;AAAA,IAAa,gBAAgB;AAAA,IAAE,YAAY;AAAA,IAAE;AAK7C,yBAAuB;AACvB,wBAAsB;AACtB,0BAAwB;AACxB,sBAAoB;AACpB,2BAAyB;AAKzB,uBAAqB;AACrB,wBAAsB;AACtB,uBAAqB;AACrB,oBAAkB;AAClB,kBAAgB;AAChB,kBAAgB;AAChB,kBAAgB;AAChB,uBAAqB;AAKrB,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AAKd,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAKf,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC1C,kBAAgB,EAAE,EAAE,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AAK7C,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AAC3B;","names":[]}
1
+ {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n Design Tokens — CSS Variables\n Source of truth for the design system.\n ========================================================================== */\n\n:root {\n /* -------------------------------------------------------------------------\n Colors — Primary (Terracotta)\n ------------------------------------------------------------------------- */\n --color-white: #FFFFFF;\n --color-primary-50: #FDF4F1;\n --color-primary-100: #FADDD5;\n --color-primary-200: #F4B8A6;\n --color-primary-500: #E07A5F;\n --color-primary-600: #C9664A;\n --color-primary-700: #A8503A;\n\n /* -------------------------------------------------------------------------\n Colors — Neutrals (Warm Stone)\n ------------------------------------------------------------------------- */\n --color-neutral-50: #FAFAF9;\n --color-neutral-100: #F5F5F4;\n --color-neutral-200: #E7E5E4;\n --color-neutral-300: #D6D3D1;\n /* Neutral addition */\n --color-neutral-400: #A8A29E;\n --color-neutral-500: #78716C;\n --color-neutral-700: #44403C;\n --color-neutral-900: #1C1917;\n\n /* Green */\n --color-green-50: #F0FDF4;\n --color-green-100: #DCFCE7;\n --color-green-200: #BBF7D0;\n --color-green-500: #22C55E;\n --color-green-600: #16A34A;\n --color-green-700: #15803D;\n\n /* Amber */\n --color-amber-50: #FFFBEB;\n --color-amber-100: #FEF3C7;\n --color-amber-200: #FDE68A;\n --color-amber-500: #F59E0B;\n --color-amber-600: #D97706;\n --color-amber-700: #B45309;\n\n /* Red */\n --color-red-50: #FEF2F2;\n --color-red-100: #FEE2E2;\n --color-red-200: #FECACA;\n --color-red-500: #EF4444;\n --color-red-600: #DC2626;\n --color-red-700: #B91C1C;\n\n /* Blue */\n --color-blue-50: #EFF6FF;\n --color-blue-100: #DBEAFE;\n --color-blue-200: #BFDBFE;\n --color-blue-500: #3B82F6;\n --color-blue-600: #2563EB;\n --color-blue-700: #1D4ED8;\n\n /* -------------------------------------------------------------------------\n Colors — Semantic\n ------------------------------------------------------------------------- */\n --color-success: #22C55E;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* -------------------------------------------------------------------------\n Typography — Font Families\n ------------------------------------------------------------------------- */\n --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n /* -------------------------------------------------------------------------\n Typography — Font Weights\n ------------------------------------------------------------------------- */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n /* -------------------------------------------------------------------------\n Typography — Font Sizes\n ------------------------------------------------------------------------- */\n --font-size-caption: 0.75rem; /* 12px */\n --font-size-overline: 0.6875rem; /* 11px */\n --font-size-body-sm: 0.8125rem; /* 13px */\n --font-size-body: 0.875rem; /* 14px */\n --font-size-h3: 1rem; /* 16px */\n --font-size-h2: 1.125rem; /* 18px */\n --font-size-h1: 1.5rem; /* 24px */\n --font-size-display: 2.25rem; /* 36px */\n\n /* -------------------------------------------------------------------------\n Spacing\n ------------------------------------------------------------------------- */\n --spacing-1: 0.25rem; /* 4px */\n --spacing-2: 0.5rem; /* 8px */\n --spacing-3: 0.75rem; /* 12px */\n --spacing-4: 1rem; /* 16px */\n --spacing-6: 1.5rem; /* 24px */\n --spacing-8: 2rem; /* 32px */\n --spacing-12: 3rem; /* 48px */\n\n /* -------------------------------------------------------------------------\n Border Radius\n ------------------------------------------------------------------------- */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-full: 9999px;\n\n /* -------------------------------------------------------------------------\n Shadows\n ------------------------------------------------------------------------- */\n --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n /* -------------------------------------------------------------------------\n Semantic — Backgrounds\n ------------------------------------------------------------------------- */\n --background-default: var(--color-white);\n --background-page: var(--color-neutral-50);\n --background-muted: var(--color-neutral-100);\n --background-subtle: var(--color-neutral-200);\n --background-elevated: var(--color-white);\n --background-overlay: rgba(28, 25, 23, 0.5);\n --background-primary: var(--color-primary-500);\n --background-success: var(--color-green-50);\n --background-warning: var(--color-amber-50);\n --background-error: var(--color-red-50);\n --background-info: var(--color-blue-50);\n --background-nav: var(--color-primary-100);\n --background-nav-hover: var(--color-primary-200);\n --background-nav-active: var(--color-primary-500);\n\n /* -------------------------------------------------------------------------\n Semantic — Foregrounds (text/icons)\n ------------------------------------------------------------------------- */\n --foreground-default: var(--color-neutral-900);\n --foreground-muted: var(--color-neutral-500);\n --foreground-subtle: var(--color-neutral-400);\n --foreground-primary: var(--color-primary-700);\n --foreground-success: var(--color-green-700);\n --foreground-warning: var(--color-amber-700);\n --foreground-error: var(--color-red-700);\n --foreground-info: var(--color-blue-700);\n --foreground-on-primary: #FFFFFF;\n --foreground-nav: var(--color-neutral-700);\n --foreground-nav-hover: var(--color-neutral-900);\n --foreground-nav-active: var(--color-white);\n\n /* -------------------------------------------------------------------------\n Semantic — Borders\n ------------------------------------------------------------------------- */\n --border-default: var(--color-neutral-200);\n --border-muted: var(--color-neutral-100);\n --border-strong: var(--color-neutral-300);\n --border-primary: var(--color-primary-500);\n --border-error: var(--color-error);\n\n /* -------------------------------------------------------------------------\n Transitions\n ------------------------------------------------------------------------- */\n --transition-fast: 150ms ease;\n --transition-base: 200ms ease;\n --transition-slow: 300ms ease;\n}"],"mappings":";;;;;;;;AAaA;AAIE,iBAAe;AACf,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAErB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAGrB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,kBAAgB;AAChB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AAGjB,mBAAiB;AACjB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAKlB,mBAAiB;AACjB,mBAAiB;AACjB,iBAAe;AACf,gBAAc;AAKd;AAAA,IAAa,SAAS;AAAA,IAAE,SAAS;AAAA,IAAE,aAAa;AAAA,IAAE;AAClD;AAAA,IAAa,gBAAgB;AAAA,IAAE,YAAY;AAAA,IAAE;AAK7C,yBAAuB;AACvB,wBAAsB;AACtB,0BAAwB;AACxB,sBAAoB;AACpB,2BAAyB;AAKzB,uBAAqB;AACrB,wBAAsB;AACtB,uBAAqB;AACrB,oBAAkB;AAClB,kBAAgB;AAChB,kBAAgB;AAChB,kBAAgB;AAChB,uBAAqB;AAKrB,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AAKd,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAKf,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC1C,kBAAgB,EAAE,EAAE,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AAK7C,wBAAsB,IAAI;AAC1B,qBAAmB,IAAI;AACvB,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,yBAAuB,IAAI;AAC3B,wBAAsB,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACvC,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,2BAAyB;AACzB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AACpB,mBAAiB,IAAI;AACrB,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AAKpB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AAC3B;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akanaka/tokens",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Design tokens for the design system",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",