@dukaandost/tokens 1.0.0 → 1.0.1

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 (2) hide show
  1. package/package.json +13 -13
  2. package/src/tokens.css +263 -247
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
- {
2
- "name": "@dukaandost/tokens",
3
- "version": "1.0.0",
4
- "main": "src/index.ts",
5
- "types": "src/index.ts",
6
- "files": ["src"],
7
- "publishConfig": {
8
- "access": "public"
9
- },
10
- "scripts": {
11
- "build": "echo 'Tokens are consumed as source'"
12
- }
13
- }
1
+ {
2
+ "name": "@dukaandost/tokens",
3
+ "version": "1.0.1",
4
+ "main": "src/index.ts",
5
+ "types": "src/index.ts",
6
+ "files": ["src"],
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "scripts": {
11
+ "build": "echo 'Tokens are consumed as source'"
12
+ }
13
+ }
package/src/tokens.css CHANGED
@@ -1,247 +1,263 @@
1
- :root {
2
- /* Brand */
3
- --color-brand-primary: #180C44;
4
- --color-brand-accent: #8A38F5;
5
- --color-brand-accent-subtle: #EBE9F3;
6
- --color-brand-accent-muted: #A499C6;
7
- --color-brand-hover: #3B2395;
8
-
9
- /* Semantic */
10
- --color-semantic-error: #E9336C;
11
- --color-semantic-error-strong: #C10000;
12
- --color-semantic-error-light: #EE6691;
13
- --color-semantic-success: #099B30;
14
- --color-semantic-success-dark: #04841B;
15
- --color-semantic-success-deep: #065B15;
16
- --color-semantic-success-muted: #82AE37;
17
- --color-semantic-warning: #FCC13E;
18
- --color-semantic-warning-text: #E4AC32;
19
- --color-semantic-info: #1B4DFF;
20
- --color-semantic-info-strong: #0065F7;
21
- --color-semantic-info-dark: #02409A;
22
- --color-semantic-info-muted: #127498;
23
-
24
- /* Badge Colors */
25
- --color-badge-green-bg: #E4FFEC;
26
- --color-badge-green-border: #5FD87F;
27
- --color-badge-green-text: #099B30;
28
- --color-badge-dark-green-bg: #B3D9BA;
29
- --color-badge-dark-green-border: #04841B;
30
- --color-badge-dark-green-text: #065B15;
31
- --color-badge-blue-bg: #E6EFFC;
32
- --color-badge-blue-border: #0065F7;
33
- --color-badge-blue-text: #02409A;
34
- --color-badge-purple-bg: #FFE2FF;
35
- --color-badge-purple-border: #DF00DF;
36
- --color-badge-purple-text: #9A009A;
37
- --color-badge-violet-bg: #E8C1FF;
38
- --color-badge-violet-border: #B331FF;
39
- --color-badge-violet-text: #921EC3;
40
- --color-badge-yellow-bg: #FFF6E2;
41
- --color-badge-yellow-border: #FCC13E;
42
- --color-badge-yellow-text: #E4AC32;
43
- --color-badge-teal-bg: #E3FDFF;
44
- --color-badge-teal-border: #18CBDB;
45
- --color-badge-teal-text: #0DACBB;
46
- --color-badge-pink-bg: #FFE7EE;
47
- --color-badge-pink-border: #EE6691;
48
- --color-badge-pink-text: #E30047;
49
- --color-badge-red-bg: #FFE2E2;
50
- --color-badge-red-border: #FF2929;
51
- --color-badge-red-text: #C10000;
52
- --color-badge-orange-bg: #FDE1D4;
53
- --color-badge-orange-border: #FF6924;
54
- --color-badge-orange-text: #F65F1A;
55
- --color-badge-grey-bg: #E3E3E3;
56
- --color-badge-grey-border: #7F7F7F;
57
- --color-badge-grey-text: #545454;
58
- --color-badge-brown-bg: #F4E8DC;
59
- --color-badge-brown-border: #B87333;
60
- --color-badge-brown-text: #8B5E34;
61
-
62
- /* Text */
63
- --color-text-primary: #1A1A1A;
64
- --color-text-secondary: #2E2E2E;
65
- --color-text-tertiary: #545454;
66
- --color-text-disabled: #7F7F7F;
67
- --color-text-inverse: #FFFFFF;
68
-
69
- /* Border */
70
- --color-border-default: #D3D3D3;
71
- --color-border-subtle: #E0E0E0;
72
- --color-border-hover: #A9A9A9;
73
-
74
- /* Surface */
75
- --color-surface-default: #FFFFFF;
76
- --color-surface-subtle: #F5F5F5;
77
- --color-surface-subtle-hover: #F6F6F6;
78
- --color-surface-accent: #F4F2FF;
79
-
80
- /* Focus / Glow */
81
- --color-focus-glow: #EE6691;
82
- --color-focus-border: #E9336C;
83
-
84
- /* Gradients */
85
- --gradient-brand-alpha: linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%);
86
- --gradient-brand-beta: linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%);
87
- --gradient-brand-gamma: linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%);
88
- --gradient-brand-delta: linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%);
89
-
90
- /* Font Families (from Figma) */
91
- --font-heading: 'Amsi Pro', 'Inter', system-ui, sans-serif;
92
- --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
93
- --font-code: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
94
-
95
- /* Typography — Figma: H1 (Amsi Pro 40px) */
96
- --text-display-size: 40px;
97
- --text-display-weight: 400;
98
- --text-display-line-height: 1.37;
99
- --text-display-letter-spacing: 0em;
100
-
101
- /* Figma: H2 (Amsi Pro 32px) */
102
- --text-heading-xl-size: 32px;
103
- --text-heading-xl-weight: 400;
104
- --text-heading-xl-line-height: 1.37;
105
- --text-heading-xl-letter-spacing: 0em;
106
-
107
- /* Figma: H3 (Amsi Pro 24px) */
108
- --text-heading-lg-size: 24px;
109
- --text-heading-lg-weight: 400;
110
- --text-heading-lg-line-height: 1.37;
111
- --text-heading-lg-letter-spacing: 0em;
112
-
113
- /* Figma: H4 (Amsi Pro 20px) */
114
- --text-heading-md-size: 20px;
115
- --text-heading-md-weight: 400;
116
- --text-heading-md-line-height: 1.37;
117
- --text-heading-md-letter-spacing: 0em;
118
-
119
- /* Figma: H5 (Nunito Sans 18px) */
120
- --text-heading-sm-size: 18px;
121
- --text-heading-sm-weight: 400;
122
- --text-heading-sm-line-height: 1.36;
123
- --text-heading-sm-letter-spacing: 0em;
124
-
125
- /* Figma: Base Text (Nunito Sans 16px) */
126
- --text-body-lg-size: 16px;
127
- --text-body-lg-weight: 400;
128
- --text-body-lg-line-height: 1.36;
129
- --text-body-lg-letter-spacing: 0em;
130
-
131
- /* Figma: Mobile Base Text (Nunito Sans 14px) */
132
- --text-body-md-size: 14px;
133
- --text-body-md-weight: 400;
134
- --text-body-md-line-height: 1.36;
135
- --text-body-md-letter-spacing: 0em;
136
-
137
- /* Figma: SubText (Nunito Sans 12px) */
138
- --text-body-sm-size: 12px;
139
- --text-body-sm-weight: 400;
140
- --text-body-sm-line-height: 1.36;
141
- --text-body-sm-letter-spacing: 0em;
142
-
143
- /* Label (Nunito Sans 13px) */
144
- --text-label-size: 13px;
145
- --text-label-weight: 500;
146
- --text-label-line-height: 1.4;
147
- --text-label-letter-spacing: 0.03em;
148
-
149
- /* Label Small (Nunito Sans 11px) */
150
- --text-label-sm-size: 11px;
151
- --text-label-sm-weight: 500;
152
- --text-label-sm-line-height: 1.4;
153
- --text-label-sm-letter-spacing: 0.04em;
154
-
155
- /* Code (monospace 13px) */
156
- --text-code-size: 13px;
157
- --text-code-weight: 400;
158
- --text-code-line-height: 1.5;
159
- --text-code-letter-spacing: 0em;
160
-
161
- /* Spacing (4px grid) */
162
- --space-px: 1px;
163
- --space-0-5: 2px;
164
- --space-1: 4px;
165
- --space-2: 8px;
166
- --space-3: 12px;
167
- --space-4: 16px;
168
- --space-5: 20px;
169
- --space-6: 24px;
170
- --space-8: 32px;
171
- --space-10: 40px;
172
- --space-12: 48px;
173
-
174
- /* Border Radius */
175
- --radius-none: 0px;
176
- --radius-xs: 4px;
177
- --radius-sm: 8px;
178
- --radius-md: 12px;
179
- --radius-lg: 16px;
180
- --radius-xl: 24px;
181
- --radius-full: 9999px;
182
-
183
- /* Shadows */
184
- --shadow-none: none;
185
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
186
- --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
187
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
188
- --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
189
- --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.20);
190
- --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.2);
191
- --shadow-button-hover: 0 1px 4px rgba(0, 0, 0, 0.2);
192
- --shadow-button-filled-hover: 0 4px 10px var(--color-border-default);
193
- --shadow-button-glass-hover: 0 4px 10px var(--color-border-default);
194
- --shadow-focus-glow: 0 0 4px var(--color-focus-glow);
195
- --shadow-glow-alpha: 0 0 20px rgba(190, 3, 164, 0.50);
196
- --shadow-glow-beta: 0 0 20px rgba(148, 170, 253, 0.50);
197
- --shadow-glow-gamma: 0 0 20px rgba(130, 174, 55, 0.50);
198
- --shadow-glow-delta: 0 0 20px rgba(55, 130, 174, 0.50);
199
-
200
- /* Z-Index */
201
- --z-base: 0;
202
- --z-raised: 10;
203
- --z-dropdown: 100;
204
- --z-sticky: 200;
205
- --z-overlay: 300;
206
- --z-modal: 400;
207
- --z-popover: 500;
208
- --z-toast: 600;
209
- }
210
-
211
- /* =============================================
212
- Base — font application (Figma: Nunito Sans)
213
- ============================================= */
214
- html {
215
- font-family: var(--font-body);
216
- font-size: var(--text-body-lg-size);
217
- font-weight: 400;
218
- line-height: var(--text-body-lg-line-height);
219
- -webkit-font-smoothing: antialiased;
220
- -moz-osx-font-smoothing: grayscale;
221
- text-rendering: optimizeLegibility;
222
- }
223
-
224
- body {
225
- font-family: inherit;
226
- font-size: inherit;
227
- line-height: inherit;
228
- }
229
-
230
- /* All elements inherit font so components never fall through to browser defaults */
231
- *,
232
- *::before,
233
- *::after {
234
- box-sizing: border-box;
235
- font-family: inherit;
236
- }
237
-
238
- /* Buttons and inputs reset to match Nunito Sans (browsers apply system-ui by default) */
239
- button,
240
- input,
241
- select,
242
- textarea,
243
- optgroup {
244
- font-family: var(--font-body);
245
- font-size: inherit;
246
- line-height: inherit;
247
- }
1
+ :root {
2
+ /* Brand */
3
+ --color-brand-primary: #180C44;
4
+ --color-brand-accent: #8A38F5;
5
+ --color-brand-accent-subtle: #EBE9F3;
6
+ --color-brand-accent-muted: #A499C6;
7
+ --color-brand-hover: #3B2395;
8
+
9
+ /* Semantic */
10
+ --color-semantic-error: #E9336C;
11
+ --color-semantic-error-strong: #C10000;
12
+ --color-semantic-error-light: #EE6691;
13
+ --color-semantic-success: #099B30;
14
+ --color-semantic-success-dark: #04841B;
15
+ --color-semantic-success-deep: #065B15;
16
+ --color-semantic-success-muted: #82AE37;
17
+ --color-semantic-warning: #FCC13E;
18
+ --color-semantic-warning-text: #E4AC32;
19
+ --color-semantic-info: #1B4DFF;
20
+ --color-semantic-info-strong: #0065F7;
21
+ --color-semantic-info-dark: #02409A;
22
+ --color-semantic-info-muted: #127498;
23
+
24
+ /* Badge Colors */
25
+ --color-badge-green-bg: #E4FFEC;
26
+ --color-badge-green-border: #5FD87F;
27
+ --color-badge-green-text: #099B30;
28
+ --color-badge-dark-green-bg: #B3D9BA;
29
+ --color-badge-dark-green-border: #04841B;
30
+ --color-badge-dark-green-text: #065B15;
31
+ --color-badge-blue-bg: #E6EFFC;
32
+ --color-badge-blue-border: #0065F7;
33
+ --color-badge-blue-text: #02409A;
34
+ --color-badge-purple-bg: #FFE2FF;
35
+ --color-badge-purple-border: #DF00DF;
36
+ --color-badge-purple-text: #9A009A;
37
+ --color-badge-violet-bg: #E8C1FF;
38
+ --color-badge-violet-border: #B331FF;
39
+ --color-badge-violet-text: #921EC3;
40
+ --color-badge-yellow-bg: #FFF6E2;
41
+ --color-badge-yellow-border: #FCC13E;
42
+ --color-badge-yellow-text: #E4AC32;
43
+ --color-badge-teal-bg: #E3FDFF;
44
+ --color-badge-teal-border: #18CBDB;
45
+ --color-badge-teal-text: #0DACBB;
46
+ --color-badge-pink-bg: #FFE7EE;
47
+ --color-badge-pink-border: #EE6691;
48
+ --color-badge-pink-text: #E30047;
49
+ --color-badge-red-bg: #FFE2E2;
50
+ --color-badge-red-border: #FF2929;
51
+ --color-badge-red-text: #C10000;
52
+ --color-badge-orange-bg: #FDE1D4;
53
+ --color-badge-orange-border: #FF6924;
54
+ --color-badge-orange-text: #F65F1A;
55
+ --color-badge-grey-bg: #E3E3E3;
56
+ --color-badge-grey-border: #7F7F7F;
57
+ --color-badge-grey-text: #545454;
58
+ --color-badge-brown-bg: #F4E8DC;
59
+ --color-badge-brown-border: #B87333;
60
+ --color-badge-brown-text: #8B5E34;
61
+
62
+ /* Text */
63
+ --color-text-primary: #1A1A1A;
64
+ --color-text-secondary: #2E2E2E;
65
+ --color-text-tertiary: #545454;
66
+ --color-text-disabled: #7F7F7F;
67
+ --color-text-inverse: #FFFFFF;
68
+
69
+ /* Border */
70
+ --color-border-default: #D3D3D3;
71
+ --color-border-subtle: #E0E0E0;
72
+ --color-border-hover: #A9A9A9;
73
+
74
+ /* Surface */
75
+ --color-surface-default: #FFFFFF;
76
+ --color-surface-subtle: #F5F5F5;
77
+ --color-surface-subtle-hover: #F6F6F6;
78
+ --color-surface-accent: #F4F2FF;
79
+
80
+ /* Focus / Glow */
81
+ --color-focus-glow: #EE6691;
82
+ --color-focus-border: #E9336C;
83
+
84
+ /* Gradients */
85
+ --gradient-brand-alpha: linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%);
86
+ --gradient-brand-beta: linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%);
87
+ --gradient-brand-gamma: linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%);
88
+ --gradient-brand-delta: linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%);
89
+
90
+ /* Font Families (from Figma) */
91
+ --font-heading: 'Amsi Pro', 'Inter', system-ui, sans-serif;
92
+ --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
93
+ --font-code: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
94
+
95
+ /* Typography — Figma: H1 (Amsi Pro 40px) */
96
+ --text-display-size: 40px;
97
+ --text-display-weight: 400;
98
+ --text-display-line-height: 1.37;
99
+ --text-display-letter-spacing: 0em;
100
+
101
+ /* Figma: H2 (Amsi Pro 32px) */
102
+ --text-heading-xl-size: 32px;
103
+ --text-heading-xl-weight: 400;
104
+ --text-heading-xl-line-height: 1.37;
105
+ --text-heading-xl-letter-spacing: 0em;
106
+
107
+ /* Figma: H3 (Amsi Pro 24px) */
108
+ --text-heading-lg-size: 24px;
109
+ --text-heading-lg-weight: 400;
110
+ --text-heading-lg-line-height: 1.37;
111
+ --text-heading-lg-letter-spacing: 0em;
112
+
113
+ /* Figma: H4 (Amsi Pro 20px) */
114
+ --text-heading-md-size: 20px;
115
+ --text-heading-md-weight: 400;
116
+ --text-heading-md-line-height: 1.37;
117
+ --text-heading-md-letter-spacing: 0em;
118
+
119
+ /* Figma: H5 (Nunito Sans 18px) */
120
+ --text-heading-sm-size: 18px;
121
+ --text-heading-sm-weight: 400;
122
+ --text-heading-sm-line-height: 1.36;
123
+ --text-heading-sm-letter-spacing: 0em;
124
+
125
+ /* Figma: Base Text (Nunito Sans 16px) */
126
+ --text-body-lg-size: 16px;
127
+ --text-body-lg-weight: 400;
128
+ --text-body-lg-line-height: 1.36;
129
+ --text-body-lg-letter-spacing: 0em;
130
+
131
+ /* Figma: Mobile Base Text (Nunito Sans 14px) */
132
+ --text-body-md-size: 14px;
133
+ --text-body-md-weight: 400;
134
+ --text-body-md-line-height: 1.36;
135
+ --text-body-md-letter-spacing: 0em;
136
+
137
+ /* Figma: SubText (Nunito Sans 12px) */
138
+ --text-body-sm-size: 12px;
139
+ --text-body-sm-weight: 400;
140
+ --text-body-sm-line-height: 1.36;
141
+ --text-body-sm-letter-spacing: 0em;
142
+
143
+ /* Label (Nunito Sans 13px) */
144
+ --text-label-size: 13px;
145
+ --text-label-weight: 500;
146
+ --text-label-line-height: 1.4;
147
+ --text-label-letter-spacing: 0.03em;
148
+
149
+ /* Label Small (Nunito Sans 11px) */
150
+ --text-label-sm-size: 11px;
151
+ --text-label-sm-weight: 500;
152
+ --text-label-sm-line-height: 1.4;
153
+ --text-label-sm-letter-spacing: 0.04em;
154
+
155
+ /* Code (monospace 13px) */
156
+ --text-code-size: 13px;
157
+ --text-code-weight: 400;
158
+ --text-code-line-height: 1.5;
159
+ --text-code-letter-spacing: 0em;
160
+
161
+ /* Spacing (4px grid) */
162
+ --space-px: 1px;
163
+ --space-0-5: 2px;
164
+ --space-1: 4px;
165
+ --space-2: 8px;
166
+ --space-3: 12px;
167
+ --space-4: 16px;
168
+ --space-5: 20px;
169
+ --space-6: 24px;
170
+ --space-8: 32px;
171
+ --space-10: 40px;
172
+ --space-12: 48px;
173
+
174
+ /* Border Radius */
175
+ --radius-none: 0px;
176
+ --radius-xs: 4px;
177
+ --radius-sm: 8px;
178
+ --radius-md: 12px;
179
+ --radius-lg: 16px;
180
+ --radius-xl: 24px;
181
+ --radius-full: 9999px;
182
+
183
+ /* Shadows */
184
+ --shadow-none: none;
185
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
186
+ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
187
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
188
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
189
+ --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.20);
190
+ --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.2);
191
+ --shadow-button-hover: 0 1px 4px rgba(0, 0, 0, 0.2);
192
+ --shadow-button-filled-hover: 0 4px 10px var(--color-border-default);
193
+ --shadow-button-glass-hover: 0 4px 10px var(--color-border-default);
194
+ --shadow-focus-glow: 0 0 4px var(--color-focus-glow);
195
+ --shadow-section-inset: 2px 2px 10px 1px rgba(239, 239, 239, 0.80) inset;
196
+ --shadow-glow-alpha: 0 0 20px rgba(190, 3, 164, 0.50);
197
+ --shadow-glow-beta: 0 0 20px rgba(148, 170, 253, 0.50);
198
+ --shadow-glow-gamma: 0 0 20px rgba(130, 174, 55, 0.50);
199
+ --shadow-glow-delta: 0 0 20px rgba(55, 130, 174, 0.50);
200
+
201
+ /* Z-Index */
202
+ --z-base: 0;
203
+ --z-raised: 10;
204
+ --z-dropdown: 100;
205
+ --z-sticky: 200;
206
+ --z-overlay: 300;
207
+ --z-modal: 400;
208
+ --z-popover: 500;
209
+ --z-toast: 600;
210
+
211
+ /* =============================================
212
+ Container-query breakpoints
213
+ -------------------------------------------------
214
+ Use as the canonical thresholds for component
215
+ internal layout decisions. Container queries
216
+ don't yet evaluate var() in their conditions in
217
+ all browsers, so component CSS uses the literal
218
+ pixel values below — keep those in sync if you
219
+ change a token here.
220
+ ============================================= */
221
+ --bp-xs: 320px;
222
+ --bp-sm: 480px;
223
+ --bp-md: 768px;
224
+ --bp-lg: 1024px;
225
+ }
226
+
227
+ /* =============================================
228
+ Base — font application (Figma: Nunito Sans)
229
+ ============================================= */
230
+ html {
231
+ font-family: var(--font-body);
232
+ font-size: var(--text-body-lg-size);
233
+ font-weight: 400;
234
+ line-height: var(--text-body-lg-line-height);
235
+ -webkit-font-smoothing: antialiased;
236
+ -moz-osx-font-smoothing: grayscale;
237
+ text-rendering: optimizeLegibility;
238
+ }
239
+
240
+ body {
241
+ font-family: inherit;
242
+ font-size: inherit;
243
+ line-height: inherit;
244
+ }
245
+
246
+ /* All elements inherit font so components never fall through to browser defaults */
247
+ *,
248
+ *::before,
249
+ *::after {
250
+ box-sizing: border-box;
251
+ font-family: inherit;
252
+ }
253
+
254
+ /* Buttons and inputs reset to match Nunito Sans (browsers apply system-ui by default) */
255
+ button,
256
+ input,
257
+ select,
258
+ textarea,
259
+ optgroup {
260
+ font-family: var(--font-body);
261
+ font-size: inherit;
262
+ line-height: inherit;
263
+ }