@frame-kit/tokens 0.0.7 → 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 +59 -0
  2. package/index.d.ts +55 -0
  3. package/index.js +55 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +67 -0
package/base.css CHANGED
@@ -801,6 +801,65 @@
801
801
  --fk-detail-panel-padding-block: var(--fk-rhythm-2);
802
802
  --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
803
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);
804
863
  /* ---------- Dialog ---------- */
805
864
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
806
865
  --fk-dialog-overlay-z-index: 1000;
package/index.d.ts CHANGED
@@ -671,6 +671,61 @@ export type FkTokenName =
671
671
  | '--fk-detail-panel-padding-block'
672
672
  | '--fk-detail-panel-padding-inline'
673
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'
674
729
  | '--fk-dialog-overlay-bg'
675
730
  | '--fk-dialog-overlay-z-index'
676
731
  | '--fk-dialog-panel-bg'
package/index.js CHANGED
@@ -671,6 +671,61 @@ export const tokens = {
671
671
  '--fk-detail-panel-padding-block': "var(--fk-rhythm-2)",
672
672
  '--fk-detail-panel-padding-inline': "var(--fk-rhythm-1)",
673
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)",
674
729
  '--fk-dialog-overlay-bg': "rgba(0, 0, 0, 0.5)",
675
730
  '--fk-dialog-overlay-z-index': "1000",
676
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.7",
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
@@ -906,6 +906,73 @@
906
906
  --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
907
907
  --fk-detail-panel-disabled-opacity: 0.55;
908
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
+
909
976
  /* ---------- Dialog ---------- */
910
977
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
911
978
  --fk-dialog-overlay-z-index: 1000;