@frame-kit/tokens 0.0.1 → 0.0.2

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 +22 -0
  2. package/index.d.ts +18 -0
  3. package/index.js +18 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +24 -0
package/base.css CHANGED
@@ -772,6 +772,28 @@
772
772
  --fk-content-split-rail-toggle-color: var(--fk-color-muted);
773
773
  --fk-content-split-rail-toggle-color-hover: var(--fk-color-text);
774
774
  --fk-content-split-rail-toggle-bg-hover: var(--fk-color-surface-muted);
775
+ /* ---------- Table Empty State ---------- */
776
+ --fk-table-empty-state-gap: var(--fk-rhythm-3);
777
+ --fk-table-empty-state-padding-block: var(--fk-rhythm-8);
778
+ --fk-table-empty-state-padding-inline: var(--fk-rhythm-4);
779
+ --fk-table-empty-state-border-color: var(--fk-color-border);
780
+ --fk-table-empty-state-radius: var(--fk-radius-lg);
781
+ --fk-table-empty-state-bg: var(--fk-color-surface);
782
+ --fk-table-empty-state-icon-color: var(--fk-color-muted);
783
+ --fk-table-empty-state-title-font-size: var(--fk-typography-body-font-size);
784
+ --fk-table-empty-state-title-font-weight: var(--fk-font-weight-semibold);
785
+ --fk-table-empty-state-title-color: var(--fk-color-text-strong);
786
+ --fk-table-empty-state-description-font-size: var(
787
+ --fk-typography-small-font-size
788
+ );
789
+ --fk-table-empty-state-description-color: var(--fk-color-muted);
790
+ --fk-table-empty-state-description-max-width: 24rem;
791
+ --fk-table-empty-state-actions-gap: var(--fk-rhythm-2);
792
+ --fk-table-empty-state-actions-margin-top: var(--fk-rhythm-1);
793
+ /* ---------- Detail Panel ---------- */
794
+ --fk-detail-panel-padding-block: var(--fk-rhythm-2);
795
+ --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
796
+ --fk-detail-panel-disabled-opacity: 0.55;
775
797
  /* ---------- Dialog ---------- */
776
798
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
777
799
  --fk-dialog-overlay-z-index: 1000;
package/index.d.ts CHANGED
@@ -649,6 +649,24 @@ export type FkTokenName =
649
649
  | '--fk-content-split-rail-toggle-color'
650
650
  | '--fk-content-split-rail-toggle-color-hover'
651
651
  | '--fk-content-split-rail-toggle-bg-hover'
652
+ | '--fk-table-empty-state-gap'
653
+ | '--fk-table-empty-state-padding-block'
654
+ | '--fk-table-empty-state-padding-inline'
655
+ | '--fk-table-empty-state-border-color'
656
+ | '--fk-table-empty-state-radius'
657
+ | '--fk-table-empty-state-bg'
658
+ | '--fk-table-empty-state-icon-color'
659
+ | '--fk-table-empty-state-title-font-size'
660
+ | '--fk-table-empty-state-title-font-weight'
661
+ | '--fk-table-empty-state-title-color'
662
+ | '--fk-table-empty-state-description-font-size'
663
+ | '--fk-table-empty-state-description-color'
664
+ | '--fk-table-empty-state-description-max-width'
665
+ | '--fk-table-empty-state-actions-gap'
666
+ | '--fk-table-empty-state-actions-margin-top'
667
+ | '--fk-detail-panel-padding-block'
668
+ | '--fk-detail-panel-padding-inline'
669
+ | '--fk-detail-panel-disabled-opacity'
652
670
  | '--fk-dialog-overlay-bg'
653
671
  | '--fk-dialog-overlay-z-index'
654
672
  | '--fk-dialog-panel-bg'
package/index.js CHANGED
@@ -649,6 +649,24 @@ export const tokens = {
649
649
  '--fk-content-split-rail-toggle-color': "var(--fk-color-muted)",
650
650
  '--fk-content-split-rail-toggle-color-hover': "var(--fk-color-text)",
651
651
  '--fk-content-split-rail-toggle-bg-hover': "var(--fk-color-surface-muted)",
652
+ '--fk-table-empty-state-gap': "var(--fk-rhythm-3)",
653
+ '--fk-table-empty-state-padding-block': "var(--fk-rhythm-8)",
654
+ '--fk-table-empty-state-padding-inline': "var(--fk-rhythm-4)",
655
+ '--fk-table-empty-state-border-color': "var(--fk-color-border)",
656
+ '--fk-table-empty-state-radius': "var(--fk-radius-lg)",
657
+ '--fk-table-empty-state-bg': "var(--fk-color-surface)",
658
+ '--fk-table-empty-state-icon-color': "var(--fk-color-muted)",
659
+ '--fk-table-empty-state-title-font-size': "var(--fk-typography-body-font-size)",
660
+ '--fk-table-empty-state-title-font-weight': "var(--fk-font-weight-semibold)",
661
+ '--fk-table-empty-state-title-color': "var(--fk-color-text-strong)",
662
+ '--fk-table-empty-state-description-font-size': "var(\n --fk-typography-small-font-size\n )",
663
+ '--fk-table-empty-state-description-color': "var(--fk-color-muted)",
664
+ '--fk-table-empty-state-description-max-width': "24rem",
665
+ '--fk-table-empty-state-actions-gap': "var(--fk-rhythm-2)",
666
+ '--fk-table-empty-state-actions-margin-top': "var(--fk-rhythm-1)",
667
+ '--fk-detail-panel-padding-block': "var(--fk-rhythm-2)",
668
+ '--fk-detail-panel-padding-inline': "var(--fk-rhythm-1)",
669
+ '--fk-detail-panel-disabled-opacity': "0.55",
652
670
  '--fk-dialog-overlay-bg': "rgba(0, 0, 0, 0.5)",
653
671
  '--fk-dialog-overlay-z-index': "1000",
654
672
  '--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.1",
3
+ "version": "0.0.2",
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
@@ -875,6 +875,30 @@
875
875
  --fk-content-split-rail-toggle-color-hover: var(--fk-color-text);
876
876
  --fk-content-split-rail-toggle-bg-hover: var(--fk-color-surface-muted);
877
877
 
878
+ /* ---------- Table Empty State ---------- */
879
+ --fk-table-empty-state-gap: var(--fk-rhythm-3);
880
+ --fk-table-empty-state-padding-block: var(--fk-rhythm-8);
881
+ --fk-table-empty-state-padding-inline: var(--fk-rhythm-4);
882
+ --fk-table-empty-state-border-color: var(--fk-color-border);
883
+ --fk-table-empty-state-radius: var(--fk-radius-lg);
884
+ --fk-table-empty-state-bg: var(--fk-color-surface);
885
+ --fk-table-empty-state-icon-color: var(--fk-color-muted);
886
+ --fk-table-empty-state-title-font-size: var(--fk-typography-body-font-size);
887
+ --fk-table-empty-state-title-font-weight: var(--fk-font-weight-semibold);
888
+ --fk-table-empty-state-title-color: var(--fk-color-text-strong);
889
+ --fk-table-empty-state-description-font-size: var(
890
+ --fk-typography-small-font-size
891
+ );
892
+ --fk-table-empty-state-description-color: var(--fk-color-muted);
893
+ --fk-table-empty-state-description-max-width: 24rem;
894
+ --fk-table-empty-state-actions-gap: var(--fk-rhythm-2);
895
+ --fk-table-empty-state-actions-margin-top: var(--fk-rhythm-1);
896
+
897
+ /* ---------- Detail Panel ---------- */
898
+ --fk-detail-panel-padding-block: var(--fk-rhythm-2);
899
+ --fk-detail-panel-padding-inline: var(--fk-rhythm-1);
900
+ --fk-detail-panel-disabled-opacity: 0.55;
901
+
878
902
  /* ---------- Dialog ---------- */
879
903
  --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
880
904
  --fk-dialog-overlay-z-index: 1000;