@frame-kit/tokens 0.2.12 → 0.2.13

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 +70 -0
  2. package/dark.css +12 -0
  3. package/index.d.ts +61 -0
  4. package/index.js +61 -0
  5. package/package.json +1 -1
  6. package/scss/tokens.base.scss +74 -0
  7. package/scss/tokens.dark.scss +14 -0
package/base.css CHANGED
@@ -1150,6 +1150,76 @@
1150
1150
  6. DOCS — components used only inside developer documentation surfaces
1151
1151
  ========================================================================== */
1152
1152
  :root {
1153
+ /* ---------- Inline Loader (patterns) ---------- */
1154
+ --fk-inline-loader-gap: var(--fk-rhythm-2);
1155
+ --fk-inline-loader-padding: var(--fk-rhythm-3);
1156
+ --fk-inline-loader-font-family: var(--fk-font-family-mono);
1157
+ --fk-inline-loader-font-size: 0.75rem;
1158
+ --fk-inline-loader-letter-spacing: 0.02em;
1159
+ --fk-inline-loader-color: var(--fk-color-faint);
1160
+ /* ---------- Context Switcher (patterns) ---------- */
1161
+ --fk-context-switcher-gap: var(--fk-rhythm-2);
1162
+ --fk-context-switcher-trigger-padding: var(--fk-rhythm-2) var(--fk-rhythm-3);
1163
+ --fk-context-switcher-trigger-border-color: var(--fk-color-border);
1164
+ --fk-context-switcher-trigger-radius: var(--fk-radius-md);
1165
+ --fk-context-switcher-icon-size: 1.625rem;
1166
+ --fk-context-switcher-icon-radius: 0.4375rem;
1167
+ --fk-context-switcher-icon-color: var(--fk-color-primary);
1168
+ --fk-context-switcher-icon-bg: var(--fk-color-primary-light);
1169
+ --fk-context-switcher-icon-solid-color: #ffffff;
1170
+ --fk-context-switcher-icon-solid-bg: var(--fk-color-text);
1171
+ --fk-context-switcher-name-font-size: 0.8125rem;
1172
+ --fk-context-switcher-name-font-weight: var(--fk-font-weight-semibold);
1173
+ --fk-context-switcher-sublabel-font-family: var(--fk-font-family-mono);
1174
+ --fk-context-switcher-sublabel-font-size: 0.5625rem;
1175
+ --fk-context-switcher-sublabel-letter-spacing: 0.04em;
1176
+ --fk-context-switcher-sublabel-color: var(--fk-color-muted);
1177
+ --fk-context-switcher-sublabel-primary-color: var(--fk-color-primary);
1178
+ --fk-context-switcher-skeleton-bg: var(--fk-color-border);
1179
+ --fk-context-switcher-panel-min-width: 15rem;
1180
+ --fk-context-switcher-panel-column-width: 12.5rem;
1181
+ --fk-context-switcher-column-border-color: var(--fk-color-border);
1182
+ --fk-context-switcher-column-title-font-size: 0.7rem;
1183
+ --fk-context-switcher-column-title-color: inherit;
1184
+ --fk-context-switcher-list-max-height: 18.75rem;
1185
+ --fk-context-switcher-item-font-size: 0.875rem;
1186
+ --fk-context-switcher-item-radius: var(--fk-radius-md);
1187
+ --fk-context-switcher-item-hover-bg: var(--fk-color-surface-muted);
1188
+ --fk-context-switcher-item-active-bg: var(--fk-color-primary-light);
1189
+ --fk-context-switcher-item-active-color: var(--fk-color-primary);
1190
+ /* ---------- Dashboard Nav (patterns) ---------- */
1191
+ --fk-dashboard-nav-gap: var(--fk-rhythm-6);
1192
+ --fk-dashboard-nav-padding: var(--fk-rhythm-4);
1193
+ --fk-dashboard-nav-padding-inline-collapsed: var(--fk-rhythm-2);
1194
+ --fk-dashboard-nav-separator-color: var(--fk-color-border);
1195
+ /* ---------- Dashboard Layout (patterns) ---------- */
1196
+ --fk-dashboard-layout-max-width: 1400px;
1197
+ --fk-dashboard-layout-topbar-height: 4rem;
1198
+ --fk-dashboard-layout-topbar-bg: rgba(251, 251, 253, 0.82);
1199
+ --fk-dashboard-layout-topbar-blur: 14px;
1200
+ --fk-dashboard-layout-topbar-border-color: var(--fk-color-border);
1201
+ --fk-dashboard-layout-topbar-padding-inline: var(--fk-rhythm-8);
1202
+ --fk-dashboard-layout-aside-bg: var(--fk-color-surface);
1203
+ --fk-dashboard-layout-aside-border-color: var(--fk-color-border);
1204
+ --fk-dashboard-layout-aside-header-padding: var(--fk-rhythm-4)
1205
+ var(--fk-rhythm-5);
1206
+ --fk-dashboard-layout-toggle-size: 2rem;
1207
+ --fk-dashboard-layout-toggle-color: var(--fk-color-muted);
1208
+ --fk-dashboard-layout-toggle-hover-color: var(--fk-color-text);
1209
+ --fk-dashboard-layout-toggle-hover-bg: var(--fk-color-surface);
1210
+ --fk-dashboard-layout-toggle-hover-border-color: var(--fk-color-border);
1211
+ --fk-dashboard-layout-page-padding: var(--fk-rhythm-4);
1212
+ --fk-dashboard-layout-page-padding-wide: var(--fk-rhythm-6) var(--fk-rhythm-8);
1213
+ --fk-dashboard-layout-page-loader-bg: color-mix(
1214
+ in srgb,
1215
+ var(--fk-color-bg) 72%,
1216
+ transparent
1217
+ );
1218
+ --fk-dashboard-layout-footer-height: 2.5rem;
1219
+ --fk-dashboard-layout-footer-bg: var(--fk-color-surface);
1220
+ --fk-dashboard-layout-footer-border-color: var(--fk-color-border);
1221
+ --fk-dashboard-layout-footer-color: var(--fk-color-muted);
1222
+ --fk-dashboard-layout-footer-font-size: var(--fk-typography-small-font-size);
1153
1223
  /* ---------- Method Badge ---------- */
1154
1224
  --fk-method-badge-min-width: 3rem;
1155
1225
  --fk-method-badge-padding-block: 2px;
package/dark.css CHANGED
@@ -378,6 +378,12 @@
378
378
  --fk-avatar-stack-overflow-color: var(--fk-color-text);
379
379
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
380
380
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
381
+ /* ---------- Dashboard Layout (patterns) ---------- */
382
+ --fk-dashboard-layout-topbar-bg: color-mix(
383
+ in srgb,
384
+ var(--fk-color-bg) 82%,
385
+ transparent
386
+ );
381
387
  }
382
388
  }
383
389
  /* ---------- Class override (user preference) ---------- */
@@ -743,4 +749,10 @@ html.dark {
743
749
  --fk-avatar-stack-overflow-color: var(--fk-color-text);
744
750
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
745
751
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
752
+ /* ---------- Dashboard Layout (patterns) ---------- */
753
+ --fk-dashboard-layout-topbar-bg: color-mix(
754
+ in srgb,
755
+ var(--fk-color-bg) 82%,
756
+ transparent
757
+ );
746
758
  }
package/index.d.ts CHANGED
@@ -949,6 +949,67 @@ export type FkTokenName =
949
949
  | '--fk-content-column-headline-color'
950
950
  | '--fk-content-column-headline-font-size'
951
951
  | '--fk-content-column-headline-font-weight'
952
+ | '--fk-inline-loader-gap'
953
+ | '--fk-inline-loader-padding'
954
+ | '--fk-inline-loader-font-family'
955
+ | '--fk-inline-loader-font-size'
956
+ | '--fk-inline-loader-letter-spacing'
957
+ | '--fk-inline-loader-color'
958
+ | '--fk-context-switcher-gap'
959
+ | '--fk-context-switcher-trigger-padding'
960
+ | '--fk-context-switcher-trigger-border-color'
961
+ | '--fk-context-switcher-trigger-radius'
962
+ | '--fk-context-switcher-icon-size'
963
+ | '--fk-context-switcher-icon-radius'
964
+ | '--fk-context-switcher-icon-color'
965
+ | '--fk-context-switcher-icon-bg'
966
+ | '--fk-context-switcher-icon-solid-color'
967
+ | '--fk-context-switcher-icon-solid-bg'
968
+ | '--fk-context-switcher-name-font-size'
969
+ | '--fk-context-switcher-name-font-weight'
970
+ | '--fk-context-switcher-sublabel-font-family'
971
+ | '--fk-context-switcher-sublabel-font-size'
972
+ | '--fk-context-switcher-sublabel-letter-spacing'
973
+ | '--fk-context-switcher-sublabel-color'
974
+ | '--fk-context-switcher-sublabel-primary-color'
975
+ | '--fk-context-switcher-skeleton-bg'
976
+ | '--fk-context-switcher-panel-min-width'
977
+ | '--fk-context-switcher-panel-column-width'
978
+ | '--fk-context-switcher-column-border-color'
979
+ | '--fk-context-switcher-column-title-font-size'
980
+ | '--fk-context-switcher-column-title-color'
981
+ | '--fk-context-switcher-list-max-height'
982
+ | '--fk-context-switcher-item-font-size'
983
+ | '--fk-context-switcher-item-radius'
984
+ | '--fk-context-switcher-item-hover-bg'
985
+ | '--fk-context-switcher-item-active-bg'
986
+ | '--fk-context-switcher-item-active-color'
987
+ | '--fk-dashboard-nav-gap'
988
+ | '--fk-dashboard-nav-padding'
989
+ | '--fk-dashboard-nav-padding-inline-collapsed'
990
+ | '--fk-dashboard-nav-separator-color'
991
+ | '--fk-dashboard-layout-max-width'
992
+ | '--fk-dashboard-layout-topbar-height'
993
+ | '--fk-dashboard-layout-topbar-bg'
994
+ | '--fk-dashboard-layout-topbar-blur'
995
+ | '--fk-dashboard-layout-topbar-border-color'
996
+ | '--fk-dashboard-layout-topbar-padding-inline'
997
+ | '--fk-dashboard-layout-aside-bg'
998
+ | '--fk-dashboard-layout-aside-border-color'
999
+ | '--fk-dashboard-layout-aside-header-padding'
1000
+ | '--fk-dashboard-layout-toggle-size'
1001
+ | '--fk-dashboard-layout-toggle-color'
1002
+ | '--fk-dashboard-layout-toggle-hover-color'
1003
+ | '--fk-dashboard-layout-toggle-hover-bg'
1004
+ | '--fk-dashboard-layout-toggle-hover-border-color'
1005
+ | '--fk-dashboard-layout-page-padding'
1006
+ | '--fk-dashboard-layout-page-padding-wide'
1007
+ | '--fk-dashboard-layout-page-loader-bg'
1008
+ | '--fk-dashboard-layout-footer-height'
1009
+ | '--fk-dashboard-layout-footer-bg'
1010
+ | '--fk-dashboard-layout-footer-border-color'
1011
+ | '--fk-dashboard-layout-footer-color'
1012
+ | '--fk-dashboard-layout-footer-font-size'
952
1013
  | '--fk-method-badge-min-width'
953
1014
  | '--fk-method-badge-padding-block'
954
1015
  | '--fk-method-badge-padding-inline'
package/index.js CHANGED
@@ -949,6 +949,67 @@ export const tokens = {
949
949
  '--fk-content-column-headline-color': "var(--fk-color-text)",
950
950
  '--fk-content-column-headline-font-size': "var(\n --fk-typography-subtitle-font-size,\n 1.125rem\n )",
951
951
  '--fk-content-column-headline-font-weight': "var(--fk-font-weight-semibold)",
952
+ '--fk-inline-loader-gap': "var(--fk-rhythm-2)",
953
+ '--fk-inline-loader-padding': "var(--fk-rhythm-3)",
954
+ '--fk-inline-loader-font-family': "var(--fk-font-family-mono)",
955
+ '--fk-inline-loader-font-size': "0.75rem",
956
+ '--fk-inline-loader-letter-spacing': "0.02em",
957
+ '--fk-inline-loader-color': "var(--fk-color-faint)",
958
+ '--fk-context-switcher-gap': "var(--fk-rhythm-2)",
959
+ '--fk-context-switcher-trigger-padding': "var(--fk-rhythm-2) var(--fk-rhythm-3)",
960
+ '--fk-context-switcher-trigger-border-color': "var(--fk-color-border)",
961
+ '--fk-context-switcher-trigger-radius': "var(--fk-radius-md)",
962
+ '--fk-context-switcher-icon-size': "1.625rem",
963
+ '--fk-context-switcher-icon-radius': "0.4375rem",
964
+ '--fk-context-switcher-icon-color': "var(--fk-color-primary)",
965
+ '--fk-context-switcher-icon-bg': "var(--fk-color-primary-light)",
966
+ '--fk-context-switcher-icon-solid-color': "#ffffff",
967
+ '--fk-context-switcher-icon-solid-bg': "var(--fk-color-text)",
968
+ '--fk-context-switcher-name-font-size': "0.8125rem",
969
+ '--fk-context-switcher-name-font-weight': "var(--fk-font-weight-semibold)",
970
+ '--fk-context-switcher-sublabel-font-family': "var(--fk-font-family-mono)",
971
+ '--fk-context-switcher-sublabel-font-size': "0.5625rem",
972
+ '--fk-context-switcher-sublabel-letter-spacing': "0.04em",
973
+ '--fk-context-switcher-sublabel-color': "var(--fk-color-muted)",
974
+ '--fk-context-switcher-sublabel-primary-color': "var(--fk-color-primary)",
975
+ '--fk-context-switcher-skeleton-bg': "var(--fk-color-border)",
976
+ '--fk-context-switcher-panel-min-width': "15rem",
977
+ '--fk-context-switcher-panel-column-width': "12.5rem",
978
+ '--fk-context-switcher-column-border-color': "var(--fk-color-border)",
979
+ '--fk-context-switcher-column-title-font-size': "0.7rem",
980
+ '--fk-context-switcher-column-title-color': "inherit",
981
+ '--fk-context-switcher-list-max-height': "18.75rem",
982
+ '--fk-context-switcher-item-font-size': "0.875rem",
983
+ '--fk-context-switcher-item-radius': "var(--fk-radius-md)",
984
+ '--fk-context-switcher-item-hover-bg': "var(--fk-color-surface-muted)",
985
+ '--fk-context-switcher-item-active-bg': "var(--fk-color-primary-light)",
986
+ '--fk-context-switcher-item-active-color': "var(--fk-color-primary)",
987
+ '--fk-dashboard-nav-gap': "var(--fk-rhythm-6)",
988
+ '--fk-dashboard-nav-padding': "var(--fk-rhythm-4)",
989
+ '--fk-dashboard-nav-padding-inline-collapsed': "var(--fk-rhythm-2)",
990
+ '--fk-dashboard-nav-separator-color': "var(--fk-color-border)",
991
+ '--fk-dashboard-layout-max-width': "1400px",
992
+ '--fk-dashboard-layout-topbar-height': "4rem",
993
+ '--fk-dashboard-layout-topbar-bg': "rgba(251, 251, 253, 0.82)",
994
+ '--fk-dashboard-layout-topbar-blur': "14px",
995
+ '--fk-dashboard-layout-topbar-border-color': "var(--fk-color-border)",
996
+ '--fk-dashboard-layout-topbar-padding-inline': "var(--fk-rhythm-8)",
997
+ '--fk-dashboard-layout-aside-bg': "var(--fk-color-surface)",
998
+ '--fk-dashboard-layout-aside-border-color': "var(--fk-color-border)",
999
+ '--fk-dashboard-layout-aside-header-padding': "var(--fk-rhythm-4)\n var(--fk-rhythm-5)",
1000
+ '--fk-dashboard-layout-toggle-size': "2rem",
1001
+ '--fk-dashboard-layout-toggle-color': "var(--fk-color-muted)",
1002
+ '--fk-dashboard-layout-toggle-hover-color': "var(--fk-color-text)",
1003
+ '--fk-dashboard-layout-toggle-hover-bg': "var(--fk-color-surface)",
1004
+ '--fk-dashboard-layout-toggle-hover-border-color': "var(--fk-color-border)",
1005
+ '--fk-dashboard-layout-page-padding': "var(--fk-rhythm-4)",
1006
+ '--fk-dashboard-layout-page-padding-wide': "var(--fk-rhythm-6) var(--fk-rhythm-8)",
1007
+ '--fk-dashboard-layout-page-loader-bg': "color-mix(\n in srgb,\n var(--fk-color-bg) 72%,\n transparent\n )",
1008
+ '--fk-dashboard-layout-footer-height': "2.5rem",
1009
+ '--fk-dashboard-layout-footer-bg': "var(--fk-color-surface)",
1010
+ '--fk-dashboard-layout-footer-border-color': "var(--fk-color-border)",
1011
+ '--fk-dashboard-layout-footer-color': "var(--fk-color-muted)",
1012
+ '--fk-dashboard-layout-footer-font-size': "var(--fk-typography-small-font-size)",
952
1013
  '--fk-method-badge-min-width': "3rem",
953
1014
  '--fk-method-badge-padding-block': "2px",
954
1015
  '--fk-method-badge-padding-inline': "var(--fk-rhythm-2)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.2.12",
3
+ "version": "0.2.13",
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
@@ -1312,6 +1312,80 @@
1312
1312
  ========================================================================== */
1313
1313
 
1314
1314
  :root {
1315
+ /* ---------- Inline Loader (patterns) ---------- */
1316
+ --fk-inline-loader-gap: var(--fk-rhythm-2);
1317
+ --fk-inline-loader-padding: var(--fk-rhythm-3);
1318
+ --fk-inline-loader-font-family: var(--fk-font-family-mono);
1319
+ --fk-inline-loader-font-size: 0.75rem;
1320
+ --fk-inline-loader-letter-spacing: 0.02em;
1321
+ --fk-inline-loader-color: var(--fk-color-faint);
1322
+
1323
+ /* ---------- Context Switcher (patterns) ---------- */
1324
+ --fk-context-switcher-gap: var(--fk-rhythm-2);
1325
+ --fk-context-switcher-trigger-padding: var(--fk-rhythm-2) var(--fk-rhythm-3);
1326
+ --fk-context-switcher-trigger-border-color: var(--fk-color-border);
1327
+ --fk-context-switcher-trigger-radius: var(--fk-radius-md);
1328
+ --fk-context-switcher-icon-size: 1.625rem;
1329
+ --fk-context-switcher-icon-radius: 0.4375rem;
1330
+ --fk-context-switcher-icon-color: var(--fk-color-primary);
1331
+ --fk-context-switcher-icon-bg: var(--fk-color-primary-light);
1332
+ --fk-context-switcher-icon-solid-color: #ffffff;
1333
+ --fk-context-switcher-icon-solid-bg: var(--fk-color-text);
1334
+ --fk-context-switcher-name-font-size: 0.8125rem;
1335
+ --fk-context-switcher-name-font-weight: var(--fk-font-weight-semibold);
1336
+ --fk-context-switcher-sublabel-font-family: var(--fk-font-family-mono);
1337
+ --fk-context-switcher-sublabel-font-size: 0.5625rem;
1338
+ --fk-context-switcher-sublabel-letter-spacing: 0.04em;
1339
+ --fk-context-switcher-sublabel-color: var(--fk-color-muted);
1340
+ --fk-context-switcher-sublabel-primary-color: var(--fk-color-primary);
1341
+ --fk-context-switcher-skeleton-bg: var(--fk-color-border);
1342
+ --fk-context-switcher-panel-min-width: 15rem;
1343
+ --fk-context-switcher-panel-column-width: 12.5rem;
1344
+ --fk-context-switcher-column-border-color: var(--fk-color-border);
1345
+ --fk-context-switcher-column-title-font-size: 0.7rem;
1346
+ --fk-context-switcher-column-title-color: inherit;
1347
+ --fk-context-switcher-list-max-height: 18.75rem;
1348
+ --fk-context-switcher-item-font-size: 0.875rem;
1349
+ --fk-context-switcher-item-radius: var(--fk-radius-md);
1350
+ --fk-context-switcher-item-hover-bg: var(--fk-color-surface-muted);
1351
+ --fk-context-switcher-item-active-bg: var(--fk-color-primary-light);
1352
+ --fk-context-switcher-item-active-color: var(--fk-color-primary);
1353
+
1354
+ /* ---------- Dashboard Nav (patterns) ---------- */
1355
+ --fk-dashboard-nav-gap: var(--fk-rhythm-6);
1356
+ --fk-dashboard-nav-padding: var(--fk-rhythm-4);
1357
+ --fk-dashboard-nav-padding-inline-collapsed: var(--fk-rhythm-2);
1358
+ --fk-dashboard-nav-separator-color: var(--fk-color-border);
1359
+
1360
+ /* ---------- Dashboard Layout (patterns) ---------- */
1361
+ --fk-dashboard-layout-max-width: 1400px;
1362
+ --fk-dashboard-layout-topbar-height: 4rem;
1363
+ --fk-dashboard-layout-topbar-bg: rgba(251, 251, 253, 0.82);
1364
+ --fk-dashboard-layout-topbar-blur: 14px;
1365
+ --fk-dashboard-layout-topbar-border-color: var(--fk-color-border);
1366
+ --fk-dashboard-layout-topbar-padding-inline: var(--fk-rhythm-8);
1367
+ --fk-dashboard-layout-aside-bg: var(--fk-color-surface);
1368
+ --fk-dashboard-layout-aside-border-color: var(--fk-color-border);
1369
+ --fk-dashboard-layout-aside-header-padding: var(--fk-rhythm-4)
1370
+ var(--fk-rhythm-5);
1371
+ --fk-dashboard-layout-toggle-size: 2rem;
1372
+ --fk-dashboard-layout-toggle-color: var(--fk-color-muted);
1373
+ --fk-dashboard-layout-toggle-hover-color: var(--fk-color-text);
1374
+ --fk-dashboard-layout-toggle-hover-bg: var(--fk-color-surface);
1375
+ --fk-dashboard-layout-toggle-hover-border-color: var(--fk-color-border);
1376
+ --fk-dashboard-layout-page-padding: var(--fk-rhythm-4);
1377
+ --fk-dashboard-layout-page-padding-wide: var(--fk-rhythm-6) var(--fk-rhythm-8);
1378
+ --fk-dashboard-layout-page-loader-bg: color-mix(
1379
+ in srgb,
1380
+ var(--fk-color-bg) 72%,
1381
+ transparent
1382
+ );
1383
+ --fk-dashboard-layout-footer-height: 2.5rem;
1384
+ --fk-dashboard-layout-footer-bg: var(--fk-color-surface);
1385
+ --fk-dashboard-layout-footer-border-color: var(--fk-color-border);
1386
+ --fk-dashboard-layout-footer-color: var(--fk-color-muted);
1387
+ --fk-dashboard-layout-footer-font-size: var(--fk-typography-small-font-size);
1388
+
1315
1389
  /* ---------- Method Badge ---------- */
1316
1390
  --fk-method-badge-min-width: 3rem;
1317
1391
  --fk-method-badge-padding-block: 2px;
package/scss/tokens.dark.scss CHANGED
@@ -434,6 +434,13 @@
434
434
  --fk-avatar-stack-overflow-color: var(--fk-color-text);
435
435
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
436
436
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
437
+
438
+ /* ---------- Dashboard Layout (patterns) ---------- */
439
+ --fk-dashboard-layout-topbar-bg: color-mix(
440
+ in srgb,
441
+ var(--fk-color-bg) 82%,
442
+ transparent
443
+ );
437
444
  }
438
445
  }
439
446
 
@@ -857,4 +864,11 @@ html.dark {
857
864
  --fk-avatar-stack-overflow-color: var(--fk-color-text);
858
865
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
859
866
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
867
+
868
+ /* ---------- Dashboard Layout (patterns) ---------- */
869
+ --fk-dashboard-layout-topbar-bg: color-mix(
870
+ in srgb,
871
+ var(--fk-color-bg) 82%,
872
+ transparent
873
+ );
860
874
  }