@frame-kit/tokens 0.2.13 → 0.2.15

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 (7) hide show
  1. package/base.css +9 -1
  2. package/dark.css +1 -1
  3. package/index.d.ts +4 -0
  4. package/index.js +5 -1
  5. package/package.json +1 -1
  6. package/scss/tokens.base.scss +9 -1
  7. package/scss/tokens.dark.scss +1 -1
package/base.css CHANGED
@@ -92,7 +92,12 @@
92
92
  --fk-overlay-brand: rgba(37, 99, 235, 0.18);
93
93
  /* ---------- Shadows ---------- */
94
94
  /* ---------- Focus ---------- */
95
- --fk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
95
+ /* The ring's width on its own. A scroll container clips on both axes the
96
+ moment either one scrolls, so any container whose children run its full
97
+ width has to leave this much room or it cuts the ring off them. Kept
98
+ separate from the shadow so the two cannot drift apart. */
99
+ --fk-focus-ring-width: 3px;
100
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18);
96
101
  /* ==========================================================================
97
102
  2. SEMANTIC — meaningful assignments using primitives
98
103
  ========================================================================== */
@@ -1193,6 +1198,7 @@
1193
1198
  --fk-dashboard-nav-padding-inline-collapsed: var(--fk-rhythm-2);
1194
1199
  --fk-dashboard-nav-separator-color: var(--fk-color-border);
1195
1200
  /* ---------- Dashboard Layout (patterns) ---------- */
1201
+ --fk-dashboard-layout-height: 100vh;
1196
1202
  --fk-dashboard-layout-max-width: 1400px;
1197
1203
  --fk-dashboard-layout-topbar-height: 4rem;
1198
1204
  --fk-dashboard-layout-topbar-bg: rgba(251, 251, 253, 0.82);
@@ -1204,6 +1210,7 @@
1204
1210
  --fk-dashboard-layout-aside-header-padding: var(--fk-rhythm-4)
1205
1211
  var(--fk-rhythm-5);
1206
1212
  --fk-dashboard-layout-toggle-size: 2rem;
1213
+ --fk-dashboard-layout-menu-size: 2.25rem;
1207
1214
  --fk-dashboard-layout-toggle-color: var(--fk-color-muted);
1208
1215
  --fk-dashboard-layout-toggle-hover-color: var(--fk-color-text);
1209
1216
  --fk-dashboard-layout-toggle-hover-bg: var(--fk-color-surface);
@@ -1219,6 +1226,7 @@
1219
1226
  --fk-dashboard-layout-footer-bg: var(--fk-color-surface);
1220
1227
  --fk-dashboard-layout-footer-border-color: var(--fk-color-border);
1221
1228
  --fk-dashboard-layout-footer-color: var(--fk-color-muted);
1229
+ --fk-dashboard-layout-footer-font-family: var(--fk-font-family-base);
1222
1230
  --fk-dashboard-layout-footer-font-size: var(--fk-typography-small-font-size);
1223
1231
  /* ---------- Method Badge ---------- */
1224
1232
  --fk-method-badge-min-width: 3rem;
package/dark.css CHANGED
@@ -31,7 +31,7 @@
31
31
  --fk-color-muted: #8a8f98;
32
32
  --fk-color-border: #2e2e34;
33
33
  /* Focus */
34
- --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
34
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(59, 158, 255, 0.4);
35
35
  /* ==========================================================================
36
36
  3. ATOMS
37
37
  ========================================================================== */
package/index.d.ts CHANGED
@@ -60,6 +60,7 @@ export type FkTokenName =
60
60
  | '--fk-radius-lg'
61
61
  | '--fk-radius-full'
62
62
  | '--fk-overlay-brand'
63
+ | '--fk-focus-ring-width'
63
64
  | '--fk-focus-ring'
64
65
  | '--fk-typography-subtitle-font-size'
65
66
  | '--fk-typography-heading-font-size'
@@ -988,6 +989,7 @@ export type FkTokenName =
988
989
  | '--fk-dashboard-nav-padding'
989
990
  | '--fk-dashboard-nav-padding-inline-collapsed'
990
991
  | '--fk-dashboard-nav-separator-color'
992
+ | '--fk-dashboard-layout-height'
991
993
  | '--fk-dashboard-layout-max-width'
992
994
  | '--fk-dashboard-layout-topbar-height'
993
995
  | '--fk-dashboard-layout-topbar-bg'
@@ -998,6 +1000,7 @@ export type FkTokenName =
998
1000
  | '--fk-dashboard-layout-aside-border-color'
999
1001
  | '--fk-dashboard-layout-aside-header-padding'
1000
1002
  | '--fk-dashboard-layout-toggle-size'
1003
+ | '--fk-dashboard-layout-menu-size'
1001
1004
  | '--fk-dashboard-layout-toggle-color'
1002
1005
  | '--fk-dashboard-layout-toggle-hover-color'
1003
1006
  | '--fk-dashboard-layout-toggle-hover-bg'
@@ -1009,6 +1012,7 @@ export type FkTokenName =
1009
1012
  | '--fk-dashboard-layout-footer-bg'
1010
1013
  | '--fk-dashboard-layout-footer-border-color'
1011
1014
  | '--fk-dashboard-layout-footer-color'
1015
+ | '--fk-dashboard-layout-footer-font-family'
1012
1016
  | '--fk-dashboard-layout-footer-font-size'
1013
1017
  | '--fk-method-badge-min-width'
1014
1018
  | '--fk-method-badge-padding-block'
package/index.js CHANGED
@@ -60,7 +60,8 @@ export const tokens = {
60
60
  '--fk-radius-lg': "0.75rem",
61
61
  '--fk-radius-full': "9999px",
62
62
  '--fk-overlay-brand': "rgba(37, 99, 235, 0.18)",
63
- '--fk-focus-ring': "0 0 0 3px rgba(37, 99, 235, 0.18)",
63
+ '--fk-focus-ring-width': "3px",
64
+ '--fk-focus-ring': "0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18)",
64
65
  '--fk-typography-subtitle-font-size': "var(--fk-typography-lead-font-size)",
65
66
  '--fk-typography-heading-font-size': "1.5rem",
66
67
  '--fk-typography-h1-font-size': "3.5rem",
@@ -988,6 +989,7 @@ export const tokens = {
988
989
  '--fk-dashboard-nav-padding': "var(--fk-rhythm-4)",
989
990
  '--fk-dashboard-nav-padding-inline-collapsed': "var(--fk-rhythm-2)",
990
991
  '--fk-dashboard-nav-separator-color': "var(--fk-color-border)",
992
+ '--fk-dashboard-layout-height': "100vh",
991
993
  '--fk-dashboard-layout-max-width': "1400px",
992
994
  '--fk-dashboard-layout-topbar-height': "4rem",
993
995
  '--fk-dashboard-layout-topbar-bg': "rgba(251, 251, 253, 0.82)",
@@ -998,6 +1000,7 @@ export const tokens = {
998
1000
  '--fk-dashboard-layout-aside-border-color': "var(--fk-color-border)",
999
1001
  '--fk-dashboard-layout-aside-header-padding': "var(--fk-rhythm-4)\n var(--fk-rhythm-5)",
1000
1002
  '--fk-dashboard-layout-toggle-size': "2rem",
1003
+ '--fk-dashboard-layout-menu-size': "2.25rem",
1001
1004
  '--fk-dashboard-layout-toggle-color': "var(--fk-color-muted)",
1002
1005
  '--fk-dashboard-layout-toggle-hover-color': "var(--fk-color-text)",
1003
1006
  '--fk-dashboard-layout-toggle-hover-bg': "var(--fk-color-surface)",
@@ -1009,6 +1012,7 @@ export const tokens = {
1009
1012
  '--fk-dashboard-layout-footer-bg': "var(--fk-color-surface)",
1010
1013
  '--fk-dashboard-layout-footer-border-color': "var(--fk-color-border)",
1011
1014
  '--fk-dashboard-layout-footer-color': "var(--fk-color-muted)",
1015
+ '--fk-dashboard-layout-footer-font-family': "var(--fk-font-family-base)",
1012
1016
  '--fk-dashboard-layout-footer-font-size': "var(--fk-typography-small-font-size)",
1013
1017
  '--fk-method-badge-min-width': "3rem",
1014
1018
  '--fk-method-badge-padding-block': "2px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.2.13",
3
+ "version": "0.2.15",
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
@@ -108,7 +108,12 @@
108
108
  /* ---------- Shadows ---------- */
109
109
 
110
110
  /* ---------- Focus ---------- */
111
- --fk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
111
+ /* The ring's width on its own. A scroll container clips on both axes the
112
+ moment either one scrolls, so any container whose children run its full
113
+ width has to leave this much room or it cuts the ring off them. Kept
114
+ separate from the shadow so the two cannot drift apart. */
115
+ --fk-focus-ring-width: 3px;
116
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18);
112
117
 
113
118
  /* ==========================================================================
114
119
  2. SEMANTIC — meaningful assignments using primitives
@@ -1358,6 +1363,7 @@
1358
1363
  --fk-dashboard-nav-separator-color: var(--fk-color-border);
1359
1364
 
1360
1365
  /* ---------- Dashboard Layout (patterns) ---------- */
1366
+ --fk-dashboard-layout-height: 100vh;
1361
1367
  --fk-dashboard-layout-max-width: 1400px;
1362
1368
  --fk-dashboard-layout-topbar-height: 4rem;
1363
1369
  --fk-dashboard-layout-topbar-bg: rgba(251, 251, 253, 0.82);
@@ -1369,6 +1375,7 @@
1369
1375
  --fk-dashboard-layout-aside-header-padding: var(--fk-rhythm-4)
1370
1376
  var(--fk-rhythm-5);
1371
1377
  --fk-dashboard-layout-toggle-size: 2rem;
1378
+ --fk-dashboard-layout-menu-size: 2.25rem;
1372
1379
  --fk-dashboard-layout-toggle-color: var(--fk-color-muted);
1373
1380
  --fk-dashboard-layout-toggle-hover-color: var(--fk-color-text);
1374
1381
  --fk-dashboard-layout-toggle-hover-bg: var(--fk-color-surface);
@@ -1384,6 +1391,7 @@
1384
1391
  --fk-dashboard-layout-footer-bg: var(--fk-color-surface);
1385
1392
  --fk-dashboard-layout-footer-border-color: var(--fk-color-border);
1386
1393
  --fk-dashboard-layout-footer-color: var(--fk-color-muted);
1394
+ --fk-dashboard-layout-footer-font-family: var(--fk-font-family-base);
1387
1395
  --fk-dashboard-layout-footer-font-size: var(--fk-typography-small-font-size);
1388
1396
 
1389
1397
  /* ---------- Method Badge ---------- */
package/scss/tokens.dark.scss CHANGED
@@ -37,7 +37,7 @@
37
37
  --fk-color-border: #2e2e34;
38
38
 
39
39
  /* Focus */
40
- --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
40
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(59, 158, 255, 0.4);
41
41
 
42
42
  /* ==========================================================================
43
43
  3. ATOMS