@frame-kit/tokens 0.0.2 → 0.0.7

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 (5) hide show
  1. package/base.css +13 -6
  2. package/index.d.ts +4 -0
  3. package/index.js +10 -6
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +13 -6
package/base.css CHANGED
@@ -43,13 +43,16 @@
43
43
  --fk-color-border-light: #f1f5f9;
44
44
  --fk-color-success: #16a34a;
45
45
  --fk-color-success-subtle: #f0fdf4;
46
+ --fk-color-success-strong: #15803d; /* dark text shade for on-tint contrast */
46
47
  --fk-color-warning: #d97706;
47
48
  --fk-color-warning-subtle: #fffbeb;
49
+ --fk-color-warning-strong: #92400e; /* dark text shade for on-tint contrast */
48
50
  --fk-color-danger: #dc2626;
49
51
  --fk-color-danger-light: #fee2e2;
50
52
  --fk-color-danger-light-border: #fecaca;
51
53
  --fk-color-danger-subtle: #fef2f2;
52
54
  --fk-color-danger-surface: #fee2e2;
55
+ --fk-color-danger-strong: #991b1b; /* dark text shade for on-tint contrast */
53
56
  --fk-white: #fff;
54
57
  /* ---------- Utility ---------- */
55
58
  --fk-black-50: rgba(0, 0, 0, 0.5);
@@ -57,6 +60,10 @@
57
60
  --fk-font-family-base:
58
61
  'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
59
62
  Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
63
+ /* Display face for headings/wordmark. Defaults to the base family, so a
64
+ single-typeface theme is unchanged; brands with a distinct display face
65
+ override only this token. */
66
+ --fk-font-family-display: var(--fk-font-family-base);
60
67
  --fk-font-family-mono:
61
68
  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
62
69
  'Courier New', monospace;
@@ -224,12 +231,12 @@
224
231
  --fk-badge-default-color: #374151;
225
232
  --fk-badge-primary-bg: var(--fk-color-primary-light, #dbeafe);
226
233
  --fk-badge-primary-color: var(--fk-color-primary-active, #1e40af);
227
- --fk-badge-success-bg: #dcfce7;
228
- --fk-badge-success-color: #15803d;
229
- --fk-badge-warning-bg: #fef3c7;
230
- --fk-badge-warning-color: #92400e;
231
- --fk-badge-danger-bg: #fee2e2;
232
- --fk-badge-danger-color: #991b1b;
234
+ --fk-badge-success-bg: var(--fk-color-success-subtle);
235
+ --fk-badge-success-color: var(--fk-color-success-strong);
236
+ --fk-badge-warning-bg: var(--fk-color-warning-subtle);
237
+ --fk-badge-warning-color: var(--fk-color-warning-strong);
238
+ --fk-badge-danger-bg: var(--fk-color-danger-light);
239
+ --fk-badge-danger-color: var(--fk-color-danger-strong);
233
240
  /* ---------- Toast ---------- */
234
241
  --fk-toast-bg: var(--fk-color-surface);
235
242
  --fk-toast-border-color: var(--fk-color-border);
package/index.d.ts CHANGED
@@ -26,16 +26,20 @@ export type FkTokenName =
26
26
  | '--fk-color-border-light'
27
27
  | '--fk-color-success'
28
28
  | '--fk-color-success-subtle'
29
+ | '--fk-color-success-strong'
29
30
  | '--fk-color-warning'
30
31
  | '--fk-color-warning-subtle'
32
+ | '--fk-color-warning-strong'
31
33
  | '--fk-color-danger'
32
34
  | '--fk-color-danger-light'
33
35
  | '--fk-color-danger-light-border'
34
36
  | '--fk-color-danger-subtle'
35
37
  | '--fk-color-danger-surface'
38
+ | '--fk-color-danger-strong'
36
39
  | '--fk-white'
37
40
  | '--fk-black-50'
38
41
  | '--fk-font-family-base'
42
+ | '--fk-font-family-display'
39
43
  | '--fk-font-family-mono'
40
44
  | '--fk-font-weight-normal'
41
45
  | '--fk-font-weight-medium'
package/index.js CHANGED
@@ -26,16 +26,20 @@ export const tokens = {
26
26
  '--fk-color-border-light': "#f1f5f9",
27
27
  '--fk-color-success': "#16a34a",
28
28
  '--fk-color-success-subtle': "#f0fdf4",
29
+ '--fk-color-success-strong': "#15803d",
29
30
  '--fk-color-warning': "#d97706",
30
31
  '--fk-color-warning-subtle': "#fffbeb",
32
+ '--fk-color-warning-strong': "#92400e",
31
33
  '--fk-color-danger': "#dc2626",
32
34
  '--fk-color-danger-light': "#fee2e2",
33
35
  '--fk-color-danger-light-border': "#fecaca",
34
36
  '--fk-color-danger-subtle': "#fef2f2",
35
37
  '--fk-color-danger-surface': "#fee2e2",
38
+ '--fk-color-danger-strong': "#991b1b",
36
39
  '--fk-white': "#fff",
37
40
  '--fk-black-50': "rgba(0, 0, 0, 0.5)",
38
41
  '--fk-font-family-base': "'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,\n Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
42
+ '--fk-font-family-display': "var(--fk-font-family-base)",
39
43
  '--fk-font-family-mono': "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',\n 'Courier New', monospace",
40
44
  '--fk-font-weight-normal': "400",
41
45
  '--fk-font-weight-medium': "500",
@@ -176,12 +180,12 @@ export const tokens = {
176
180
  '--fk-badge-default-color': "#374151",
177
181
  '--fk-badge-primary-bg': "var(--fk-color-primary-light, #dbeafe)",
178
182
  '--fk-badge-primary-color': "var(--fk-color-primary-active, #1e40af)",
179
- '--fk-badge-success-bg': "#dcfce7",
180
- '--fk-badge-success-color': "#15803d",
181
- '--fk-badge-warning-bg': "#fef3c7",
182
- '--fk-badge-warning-color': "#92400e",
183
- '--fk-badge-danger-bg': "#fee2e2",
184
- '--fk-badge-danger-color': "#991b1b",
183
+ '--fk-badge-success-bg': "var(--fk-color-success-subtle)",
184
+ '--fk-badge-success-color': "var(--fk-color-success-strong)",
185
+ '--fk-badge-warning-bg': "var(--fk-color-warning-subtle)",
186
+ '--fk-badge-warning-color': "var(--fk-color-warning-strong)",
187
+ '--fk-badge-danger-bg': "var(--fk-color-danger-light)",
188
+ '--fk-badge-danger-color': "var(--fk-color-danger-strong)",
185
189
  '--fk-toast-bg': "var(--fk-color-surface)",
186
190
  '--fk-toast-border-color': "var(--fk-color-border)",
187
191
  '--fk-toast-border-radius': "var(--fk-radius-lg)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.0.2",
3
+ "version": "0.0.7",
4
4
  "description": "Default design tokens (CSS custom properties) and dark theme for FrameKit.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/scss/tokens.base.scss CHANGED
@@ -49,13 +49,16 @@
49
49
 
50
50
  --fk-color-success: #16a34a;
51
51
  --fk-color-success-subtle: #f0fdf4;
52
+ --fk-color-success-strong: #15803d; /* dark text shade for on-tint contrast */
52
53
  --fk-color-warning: #d97706;
53
54
  --fk-color-warning-subtle: #fffbeb;
55
+ --fk-color-warning-strong: #92400e; /* dark text shade for on-tint contrast */
54
56
  --fk-color-danger: #dc2626;
55
57
  --fk-color-danger-light: #fee2e2;
56
58
  --fk-color-danger-light-border: #fecaca;
57
59
  --fk-color-danger-subtle: #fef2f2;
58
60
  --fk-color-danger-surface: #fee2e2;
61
+ --fk-color-danger-strong: #991b1b; /* dark text shade for on-tint contrast */
59
62
 
60
63
  --fk-white: #fff;
61
64
 
@@ -66,6 +69,10 @@
66
69
  --fk-font-family-base:
67
70
  'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
68
71
  Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
72
+ /* Display face for headings/wordmark. Defaults to the base family, so a
73
+ single-typeface theme is unchanged; brands with a distinct display face
74
+ override only this token. */
75
+ --fk-font-family-display: var(--fk-font-family-base);
69
76
  --fk-font-family-mono:
70
77
  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
71
78
  'Courier New', monospace;
@@ -269,12 +276,12 @@
269
276
  --fk-badge-default-color: #374151;
270
277
  --fk-badge-primary-bg: var(--fk-color-primary-light, #dbeafe);
271
278
  --fk-badge-primary-color: var(--fk-color-primary-active, #1e40af);
272
- --fk-badge-success-bg: #dcfce7;
273
- --fk-badge-success-color: #15803d;
274
- --fk-badge-warning-bg: #fef3c7;
275
- --fk-badge-warning-color: #92400e;
276
- --fk-badge-danger-bg: #fee2e2;
277
- --fk-badge-danger-color: #991b1b;
279
+ --fk-badge-success-bg: var(--fk-color-success-subtle);
280
+ --fk-badge-success-color: var(--fk-color-success-strong);
281
+ --fk-badge-warning-bg: var(--fk-color-warning-subtle);
282
+ --fk-badge-warning-color: var(--fk-color-warning-strong);
283
+ --fk-badge-danger-bg: var(--fk-color-danger-light);
284
+ --fk-badge-danger-color: var(--fk-color-danger-strong);
278
285
 
279
286
  /* ---------- Toast ---------- */
280
287
  --fk-toast-bg: var(--fk-color-surface);