@frame-kit/tokens 0.0.6 → 0.1.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 (5) hide show
  1. package/base.css +72 -6
  2. package/index.d.ts +59 -0
  3. package/index.js +65 -6
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +80 -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);
@@ -794,6 +801,65 @@
794
801
  --fk-detail-panel-padding-block: var(--fk-rhythm-2);
795
802
  --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
796
803
  --fk-detail-panel-disabled-opacity: 0.55;
804
+ /* ---------- Sidebar Nav ---------- */
805
+ --fk-sidebar-nav-group-gap: var(--fk-rhythm-5);
806
+ --fk-sidebar-nav-group-inner-gap: var(--fk-rhythm-2);
807
+ --fk-sidebar-nav-label-padding-inline: var(--fk-rhythm-3);
808
+ --fk-sidebar-nav-label-font-family: var(--fk-font-family-mono);
809
+ --fk-sidebar-nav-label-font-size: 0.625rem;
810
+ --fk-sidebar-nav-label-font-weight: var(--fk-font-weight-semibold);
811
+ --fk-sidebar-nav-label-color: var(--fk-color-muted);
812
+ --fk-sidebar-nav-row-stack: var(--fk-rhythm-1);
813
+ --fk-sidebar-nav-row-gap: var(--fk-rhythm-2);
814
+ --fk-sidebar-nav-row-padding-block: var(--fk-rhythm-2);
815
+ --fk-sidebar-nav-row-padding-inline: var(--fk-rhythm-3);
816
+ --fk-sidebar-nav-row-radius: var(--fk-radius-md);
817
+ --fk-sidebar-nav-row-bg: transparent;
818
+ --fk-sidebar-nav-row-font-family: var(--fk-font-family-base);
819
+ --fk-sidebar-nav-row-font-size: 0.875rem;
820
+ --fk-sidebar-nav-row-font-weight: var(--fk-font-weight-medium);
821
+ --fk-sidebar-nav-row-color: var(--fk-color-muted);
822
+ --fk-sidebar-nav-row-bg-hover: var(--fk-color-surface-muted);
823
+ --fk-sidebar-nav-row-color-hover: var(--fk-color-text);
824
+ --fk-sidebar-nav-row-bg-active: var(--fk-color-primary);
825
+ --fk-sidebar-nav-row-color-active: #ffffff;
826
+ --fk-sidebar-nav-rail-padding: var(--fk-rhythm-2);
827
+ --fk-sidebar-nav-focus-ring: var(--fk-focus-ring);
828
+ --fk-sidebar-nav-branch-bg: var(--fk-color-primary-light);
829
+ --fk-sidebar-nav-branch-color: var(--fk-color-primary);
830
+ --fk-sidebar-nav-icon-color: var(--fk-color-muted);
831
+ --fk-sidebar-nav-icon-color-hover: var(--fk-color-text);
832
+ --fk-sidebar-nav-chevron-color: var(--fk-color-muted);
833
+ --fk-sidebar-nav-children-indent: var(--fk-rhythm-6);
834
+ --fk-sidebar-nav-children-offset: var(--fk-rhythm-2);
835
+ --fk-sidebar-nav-children-gap: var(--fk-rhythm-2);
836
+ --fk-sidebar-nav-children-line-color: var(--fk-color-border);
837
+ --fk-sidebar-nav-children-line-offset: var(--fk-rhythm-3);
838
+ --fk-sidebar-nav-children-line-width: var(--fk-border-width, 1px);
839
+ --fk-sidebar-nav-child-padding-block: var(--fk-rhythm-2);
840
+ --fk-sidebar-nav-child-padding-inline: var(--fk-rhythm-3);
841
+ --fk-sidebar-nav-child-radius: var(--fk-radius-md);
842
+ --fk-sidebar-nav-child-font-size: 0.875rem;
843
+ --fk-sidebar-nav-child-font-weight: var(--fk-font-weight-medium);
844
+ --fk-sidebar-nav-child-font-weight-active: var(--fk-font-weight-semibold);
845
+ --fk-sidebar-nav-child-color: var(--fk-color-muted);
846
+ --fk-sidebar-nav-child-color-hover: var(--fk-color-text);
847
+ --fk-sidebar-nav-child-bg-hover: var(--fk-color-surface-muted);
848
+ --fk-sidebar-nav-flyout-gap: var(--fk-rhythm-1);
849
+ --fk-sidebar-nav-flyout-min-width: 13rem;
850
+ --fk-sidebar-nav-flyout-padding: var(--fk-rhythm-2);
851
+ --fk-sidebar-nav-flyout-bg: var(--fk-color-surface);
852
+ --fk-sidebar-nav-flyout-border: var(--fk-color-border);
853
+ --fk-sidebar-nav-flyout-radius: var(--fk-radius-md);
854
+ --fk-sidebar-nav-flyout-shadow: var(
855
+ --fk-shadow-lg,
856
+ 0 18px 44px -14px rgba(20, 34, 80, 0.3)
857
+ );
858
+ --fk-sidebar-nav-flyout-icon-radius: var(--fk-radius-sm);
859
+ --fk-sidebar-nav-flyout-title-font-family: var(--fk-font-family-display);
860
+ --fk-sidebar-nav-flyout-title-font-size: 0.84375rem;
861
+ --fk-sidebar-nav-flyout-title-font-weight: var(--fk-font-weight-semibold);
862
+ --fk-sidebar-nav-flyout-title-color: var(--fk-color-text);
797
863
  /* ---------- Dialog ---------- */
798
864
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
799
865
  --fk-dialog-overlay-z-index: 1000;
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'
@@ -667,6 +671,61 @@ export type FkTokenName =
667
671
  | '--fk-detail-panel-padding-block'
668
672
  | '--fk-detail-panel-padding-inline'
669
673
  | '--fk-detail-panel-disabled-opacity'
674
+ | '--fk-sidebar-nav-group-gap'
675
+ | '--fk-sidebar-nav-group-inner-gap'
676
+ | '--fk-sidebar-nav-label-padding-inline'
677
+ | '--fk-sidebar-nav-label-font-family'
678
+ | '--fk-sidebar-nav-label-font-size'
679
+ | '--fk-sidebar-nav-label-font-weight'
680
+ | '--fk-sidebar-nav-label-color'
681
+ | '--fk-sidebar-nav-row-stack'
682
+ | '--fk-sidebar-nav-row-gap'
683
+ | '--fk-sidebar-nav-row-padding-block'
684
+ | '--fk-sidebar-nav-row-padding-inline'
685
+ | '--fk-sidebar-nav-row-radius'
686
+ | '--fk-sidebar-nav-row-bg'
687
+ | '--fk-sidebar-nav-row-font-family'
688
+ | '--fk-sidebar-nav-row-font-size'
689
+ | '--fk-sidebar-nav-row-font-weight'
690
+ | '--fk-sidebar-nav-row-color'
691
+ | '--fk-sidebar-nav-row-bg-hover'
692
+ | '--fk-sidebar-nav-row-color-hover'
693
+ | '--fk-sidebar-nav-row-bg-active'
694
+ | '--fk-sidebar-nav-row-color-active'
695
+ | '--fk-sidebar-nav-rail-padding'
696
+ | '--fk-sidebar-nav-focus-ring'
697
+ | '--fk-sidebar-nav-branch-bg'
698
+ | '--fk-sidebar-nav-branch-color'
699
+ | '--fk-sidebar-nav-icon-color'
700
+ | '--fk-sidebar-nav-icon-color-hover'
701
+ | '--fk-sidebar-nav-chevron-color'
702
+ | '--fk-sidebar-nav-children-indent'
703
+ | '--fk-sidebar-nav-children-offset'
704
+ | '--fk-sidebar-nav-children-gap'
705
+ | '--fk-sidebar-nav-children-line-color'
706
+ | '--fk-sidebar-nav-children-line-offset'
707
+ | '--fk-sidebar-nav-children-line-width'
708
+ | '--fk-sidebar-nav-child-padding-block'
709
+ | '--fk-sidebar-nav-child-padding-inline'
710
+ | '--fk-sidebar-nav-child-radius'
711
+ | '--fk-sidebar-nav-child-font-size'
712
+ | '--fk-sidebar-nav-child-font-weight'
713
+ | '--fk-sidebar-nav-child-font-weight-active'
714
+ | '--fk-sidebar-nav-child-color'
715
+ | '--fk-sidebar-nav-child-color-hover'
716
+ | '--fk-sidebar-nav-child-bg-hover'
717
+ | '--fk-sidebar-nav-flyout-gap'
718
+ | '--fk-sidebar-nav-flyout-min-width'
719
+ | '--fk-sidebar-nav-flyout-padding'
720
+ | '--fk-sidebar-nav-flyout-bg'
721
+ | '--fk-sidebar-nav-flyout-border'
722
+ | '--fk-sidebar-nav-flyout-radius'
723
+ | '--fk-sidebar-nav-flyout-shadow'
724
+ | '--fk-sidebar-nav-flyout-icon-radius'
725
+ | '--fk-sidebar-nav-flyout-title-font-family'
726
+ | '--fk-sidebar-nav-flyout-title-font-size'
727
+ | '--fk-sidebar-nav-flyout-title-font-weight'
728
+ | '--fk-sidebar-nav-flyout-title-color'
670
729
  | '--fk-dialog-overlay-bg'
671
730
  | '--fk-dialog-overlay-z-index'
672
731
  | '--fk-dialog-panel-bg'
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)",
@@ -667,6 +671,61 @@ export const tokens = {
667
671
  '--fk-detail-panel-padding-block': "var(--fk-rhythm-2)",
668
672
  '--fk-detail-panel-padding-inline': "var(--fk-rhythm-1)",
669
673
  '--fk-detail-panel-disabled-opacity': "0.55",
674
+ '--fk-sidebar-nav-group-gap': "var(--fk-rhythm-5)",
675
+ '--fk-sidebar-nav-group-inner-gap': "var(--fk-rhythm-2)",
676
+ '--fk-sidebar-nav-label-padding-inline': "var(--fk-rhythm-3)",
677
+ '--fk-sidebar-nav-label-font-family': "var(--fk-font-family-mono)",
678
+ '--fk-sidebar-nav-label-font-size': "0.625rem",
679
+ '--fk-sidebar-nav-label-font-weight': "var(--fk-font-weight-semibold)",
680
+ '--fk-sidebar-nav-label-color': "var(--fk-color-muted)",
681
+ '--fk-sidebar-nav-row-stack': "var(--fk-rhythm-1)",
682
+ '--fk-sidebar-nav-row-gap': "var(--fk-rhythm-2)",
683
+ '--fk-sidebar-nav-row-padding-block': "var(--fk-rhythm-2)",
684
+ '--fk-sidebar-nav-row-padding-inline': "var(--fk-rhythm-3)",
685
+ '--fk-sidebar-nav-row-radius': "var(--fk-radius-md)",
686
+ '--fk-sidebar-nav-row-bg': "transparent",
687
+ '--fk-sidebar-nav-row-font-family': "var(--fk-font-family-base)",
688
+ '--fk-sidebar-nav-row-font-size': "0.875rem",
689
+ '--fk-sidebar-nav-row-font-weight': "var(--fk-font-weight-medium)",
690
+ '--fk-sidebar-nav-row-color': "var(--fk-color-muted)",
691
+ '--fk-sidebar-nav-row-bg-hover': "var(--fk-color-surface-muted)",
692
+ '--fk-sidebar-nav-row-color-hover': "var(--fk-color-text)",
693
+ '--fk-sidebar-nav-row-bg-active': "var(--fk-color-primary)",
694
+ '--fk-sidebar-nav-row-color-active': "#ffffff",
695
+ '--fk-sidebar-nav-rail-padding': "var(--fk-rhythm-2)",
696
+ '--fk-sidebar-nav-focus-ring': "var(--fk-focus-ring)",
697
+ '--fk-sidebar-nav-branch-bg': "var(--fk-color-primary-light)",
698
+ '--fk-sidebar-nav-branch-color': "var(--fk-color-primary)",
699
+ '--fk-sidebar-nav-icon-color': "var(--fk-color-muted)",
700
+ '--fk-sidebar-nav-icon-color-hover': "var(--fk-color-text)",
701
+ '--fk-sidebar-nav-chevron-color': "var(--fk-color-muted)",
702
+ '--fk-sidebar-nav-children-indent': "var(--fk-rhythm-6)",
703
+ '--fk-sidebar-nav-children-offset': "var(--fk-rhythm-2)",
704
+ '--fk-sidebar-nav-children-gap': "var(--fk-rhythm-2)",
705
+ '--fk-sidebar-nav-children-line-color': "var(--fk-color-border)",
706
+ '--fk-sidebar-nav-children-line-offset': "var(--fk-rhythm-3)",
707
+ '--fk-sidebar-nav-children-line-width': "var(--fk-border-width, 1px)",
708
+ '--fk-sidebar-nav-child-padding-block': "var(--fk-rhythm-2)",
709
+ '--fk-sidebar-nav-child-padding-inline': "var(--fk-rhythm-3)",
710
+ '--fk-sidebar-nav-child-radius': "var(--fk-radius-md)",
711
+ '--fk-sidebar-nav-child-font-size': "0.875rem",
712
+ '--fk-sidebar-nav-child-font-weight': "var(--fk-font-weight-medium)",
713
+ '--fk-sidebar-nav-child-font-weight-active': "var(--fk-font-weight-semibold)",
714
+ '--fk-sidebar-nav-child-color': "var(--fk-color-muted)",
715
+ '--fk-sidebar-nav-child-color-hover': "var(--fk-color-text)",
716
+ '--fk-sidebar-nav-child-bg-hover': "var(--fk-color-surface-muted)",
717
+ '--fk-sidebar-nav-flyout-gap': "var(--fk-rhythm-1)",
718
+ '--fk-sidebar-nav-flyout-min-width': "13rem",
719
+ '--fk-sidebar-nav-flyout-padding': "var(--fk-rhythm-2)",
720
+ '--fk-sidebar-nav-flyout-bg': "var(--fk-color-surface)",
721
+ '--fk-sidebar-nav-flyout-border': "var(--fk-color-border)",
722
+ '--fk-sidebar-nav-flyout-radius': "var(--fk-radius-md)",
723
+ '--fk-sidebar-nav-flyout-shadow': "var(\n --fk-shadow-lg,\n 0 18px 44px -14px rgba(20, 34, 80, 0.3)\n )",
724
+ '--fk-sidebar-nav-flyout-icon-radius': "var(--fk-radius-sm)",
725
+ '--fk-sidebar-nav-flyout-title-font-family': "var(--fk-font-family-display)",
726
+ '--fk-sidebar-nav-flyout-title-font-size': "0.84375rem",
727
+ '--fk-sidebar-nav-flyout-title-font-weight': "var(--fk-font-weight-semibold)",
728
+ '--fk-sidebar-nav-flyout-title-color': "var(--fk-color-text)",
670
729
  '--fk-dialog-overlay-bg': "rgba(0, 0, 0, 0.5)",
671
730
  '--fk-dialog-overlay-z-index': "1000",
672
731
  '--fk-dialog-panel-bg': "var(--fk-color-surface)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.0.6",
3
+ "version": "0.1.0",
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);
@@ -899,6 +906,73 @@
899
906
  --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
900
907
  --fk-detail-panel-disabled-opacity: 0.55;
901
908
 
909
+ /* ---------- Sidebar Nav ---------- */
910
+ --fk-sidebar-nav-group-gap: var(--fk-rhythm-5);
911
+ --fk-sidebar-nav-group-inner-gap: var(--fk-rhythm-2);
912
+
913
+ --fk-sidebar-nav-label-padding-inline: var(--fk-rhythm-3);
914
+ --fk-sidebar-nav-label-font-family: var(--fk-font-family-mono);
915
+ --fk-sidebar-nav-label-font-size: 0.625rem;
916
+ --fk-sidebar-nav-label-font-weight: var(--fk-font-weight-semibold);
917
+ --fk-sidebar-nav-label-color: var(--fk-color-muted);
918
+
919
+ --fk-sidebar-nav-row-stack: var(--fk-rhythm-1);
920
+ --fk-sidebar-nav-row-gap: var(--fk-rhythm-2);
921
+ --fk-sidebar-nav-row-padding-block: var(--fk-rhythm-2);
922
+ --fk-sidebar-nav-row-padding-inline: var(--fk-rhythm-3);
923
+ --fk-sidebar-nav-row-radius: var(--fk-radius-md);
924
+ --fk-sidebar-nav-row-bg: transparent;
925
+ --fk-sidebar-nav-row-font-family: var(--fk-font-family-base);
926
+ --fk-sidebar-nav-row-font-size: 0.875rem;
927
+ --fk-sidebar-nav-row-font-weight: var(--fk-font-weight-medium);
928
+ --fk-sidebar-nav-row-color: var(--fk-color-muted);
929
+ --fk-sidebar-nav-row-bg-hover: var(--fk-color-surface-muted);
930
+ --fk-sidebar-nav-row-color-hover: var(--fk-color-text);
931
+ --fk-sidebar-nav-row-bg-active: var(--fk-color-primary);
932
+ --fk-sidebar-nav-row-color-active: #ffffff;
933
+ --fk-sidebar-nav-rail-padding: var(--fk-rhythm-2);
934
+ --fk-sidebar-nav-focus-ring: var(--fk-focus-ring);
935
+
936
+ --fk-sidebar-nav-branch-bg: var(--fk-color-primary-light);
937
+ --fk-sidebar-nav-branch-color: var(--fk-color-primary);
938
+ --fk-sidebar-nav-icon-color: var(--fk-color-muted);
939
+ --fk-sidebar-nav-icon-color-hover: var(--fk-color-text);
940
+ --fk-sidebar-nav-chevron-color: var(--fk-color-muted);
941
+
942
+ --fk-sidebar-nav-children-indent: var(--fk-rhythm-6);
943
+ --fk-sidebar-nav-children-offset: var(--fk-rhythm-2);
944
+ --fk-sidebar-nav-children-gap: var(--fk-rhythm-2);
945
+ --fk-sidebar-nav-children-line-color: var(--fk-color-border);
946
+ --fk-sidebar-nav-children-line-offset: var(--fk-rhythm-3);
947
+ --fk-sidebar-nav-children-line-width: var(--fk-border-width, 1px);
948
+
949
+ // Children match the parent row's height — same padding-block and font-size.
950
+ --fk-sidebar-nav-child-padding-block: var(--fk-rhythm-2);
951
+ --fk-sidebar-nav-child-padding-inline: var(--fk-rhythm-3);
952
+ --fk-sidebar-nav-child-radius: var(--fk-radius-md);
953
+ --fk-sidebar-nav-child-font-size: 0.875rem;
954
+ --fk-sidebar-nav-child-font-weight: var(--fk-font-weight-medium);
955
+ --fk-sidebar-nav-child-font-weight-active: var(--fk-font-weight-semibold);
956
+ --fk-sidebar-nav-child-color: var(--fk-color-muted);
957
+ --fk-sidebar-nav-child-color-hover: var(--fk-color-text);
958
+ --fk-sidebar-nav-child-bg-hover: var(--fk-color-surface-muted);
959
+
960
+ --fk-sidebar-nav-flyout-gap: var(--fk-rhythm-1);
961
+ --fk-sidebar-nav-flyout-min-width: 13rem;
962
+ --fk-sidebar-nav-flyout-padding: var(--fk-rhythm-2);
963
+ --fk-sidebar-nav-flyout-bg: var(--fk-color-surface);
964
+ --fk-sidebar-nav-flyout-border: var(--fk-color-border);
965
+ --fk-sidebar-nav-flyout-radius: var(--fk-radius-md);
966
+ --fk-sidebar-nav-flyout-shadow: var(
967
+ --fk-shadow-lg,
968
+ 0 18px 44px -14px rgba(20, 34, 80, 0.3)
969
+ );
970
+ --fk-sidebar-nav-flyout-icon-radius: var(--fk-radius-sm);
971
+ --fk-sidebar-nav-flyout-title-font-family: var(--fk-font-family-display);
972
+ --fk-sidebar-nav-flyout-title-font-size: 0.84375rem;
973
+ --fk-sidebar-nav-flyout-title-font-weight: var(--fk-font-weight-semibold);
974
+ --fk-sidebar-nav-flyout-title-color: var(--fk-color-text);
975
+
902
976
  /* ---------- Dialog ---------- */
903
977
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
904
978
  --fk-dialog-overlay-z-index: 1000;