@frame-kit/tokens 0.2.4 → 0.2.6

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 +10 -0
  2. package/dark.css +4 -0
  3. package/index.d.ts +7 -0
  4. package/index.js +7 -0
  5. package/package.json +1 -1
  6. package/scss/tokens.base.scss +10 -0
  7. package/scss/tokens.dark.scss +4 -0
package/base.css CHANGED
@@ -743,6 +743,16 @@
743
743
  --fk-data-table-border-radius: var(--fk-radius-md);
744
744
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
745
745
  --fk-data-table-cell-padding: var(--fk-rhythm-3);
746
+ /* Group headings */
747
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
748
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
749
+ --fk-data-table-group-heading-font-size: var(
750
+ --fk-typography-caption-font-size
751
+ );
752
+ --fk-data-table-group-heading-font-weight: var(--fk-font-weight-semibold);
753
+ --fk-data-table-group-heading-letter-spacing: 0.04em;
754
+ --fk-data-table-group-heading-text-transform: uppercase;
755
+ --fk-data-table-group-heading-padding: var(--fk-rhythm-2) var(--fk-rhythm-3);
746
756
  --fk-data-table-empty-padding: var(--fk-rhythm-8);
747
757
  --fk-data-table-empty-color: var(--fk-color-text-muted);
748
758
  --fk-data-table-loading-bg: var(--fk-color-surface-overlay);
package/dark.css CHANGED
@@ -301,6 +301,8 @@
301
301
  --fk-data-table-body-color: var(--fk-color-text);
302
302
  --fk-data-table-border-color: var(--fk-color-border);
303
303
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
304
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
305
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
304
306
  --fk-data-table-empty-color: var(--fk-color-text-muted);
305
307
  --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
306
308
  --fk-data-table-loading-color: var(--fk-color-text-muted);
@@ -666,6 +668,8 @@ html.dark {
666
668
  --fk-data-table-body-color: var(--fk-color-text);
667
669
  --fk-data-table-border-color: var(--fk-color-border);
668
670
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
671
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
672
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
669
673
  --fk-data-table-empty-color: var(--fk-color-text-muted);
670
674
  --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
671
675
  --fk-data-table-loading-color: var(--fk-color-text-muted);
package/index.d.ts CHANGED
@@ -620,6 +620,13 @@ export type FkTokenName =
620
620
  | '--fk-data-table-border-radius'
621
621
  | '--fk-data-table-row-hover-bg'
622
622
  | '--fk-data-table-cell-padding'
623
+ | '--fk-data-table-group-heading-bg'
624
+ | '--fk-data-table-group-heading-color'
625
+ | '--fk-data-table-group-heading-font-size'
626
+ | '--fk-data-table-group-heading-font-weight'
627
+ | '--fk-data-table-group-heading-letter-spacing'
628
+ | '--fk-data-table-group-heading-text-transform'
629
+ | '--fk-data-table-group-heading-padding'
623
630
  | '--fk-data-table-empty-padding'
624
631
  | '--fk-data-table-empty-color'
625
632
  | '--fk-data-table-loading-bg'
package/index.js CHANGED
@@ -620,6 +620,13 @@ export const tokens = {
620
620
  '--fk-data-table-border-radius': "var(--fk-radius-md)",
621
621
  '--fk-data-table-row-hover-bg': "var(--fk-color-surface-muted)",
622
622
  '--fk-data-table-cell-padding': "var(--fk-rhythm-3)",
623
+ '--fk-data-table-group-heading-bg': "var(--fk-color-surface-muted)",
624
+ '--fk-data-table-group-heading-color': "var(--fk-color-text-muted)",
625
+ '--fk-data-table-group-heading-font-size': "var(\n --fk-typography-caption-font-size\n )",
626
+ '--fk-data-table-group-heading-font-weight': "var(--fk-font-weight-semibold)",
627
+ '--fk-data-table-group-heading-letter-spacing': "0.04em",
628
+ '--fk-data-table-group-heading-text-transform': "uppercase",
629
+ '--fk-data-table-group-heading-padding': "var(--fk-rhythm-2) var(--fk-rhythm-3)",
623
630
  '--fk-data-table-empty-padding': "var(--fk-rhythm-8)",
624
631
  '--fk-data-table-empty-color': "var(--fk-color-text-muted)",
625
632
  '--fk-data-table-loading-bg': "var(--fk-color-surface-overlay)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
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
@@ -843,6 +843,16 @@
843
843
  --fk-data-table-border-radius: var(--fk-radius-md);
844
844
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
845
845
  --fk-data-table-cell-padding: var(--fk-rhythm-3);
846
+ /* Group headings */
847
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
848
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
849
+ --fk-data-table-group-heading-font-size: var(
850
+ --fk-typography-caption-font-size
851
+ );
852
+ --fk-data-table-group-heading-font-weight: var(--fk-font-weight-semibold);
853
+ --fk-data-table-group-heading-letter-spacing: 0.04em;
854
+ --fk-data-table-group-heading-text-transform: uppercase;
855
+ --fk-data-table-group-heading-padding: var(--fk-rhythm-2) var(--fk-rhythm-3);
846
856
  --fk-data-table-empty-padding: var(--fk-rhythm-8);
847
857
  --fk-data-table-empty-color: var(--fk-color-text-muted);
848
858
  --fk-data-table-loading-bg: var(--fk-color-surface-overlay);
package/scss/tokens.dark.scss CHANGED
@@ -349,6 +349,8 @@
349
349
  --fk-data-table-body-color: var(--fk-color-text);
350
350
  --fk-data-table-border-color: var(--fk-color-border);
351
351
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
352
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
353
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
352
354
  --fk-data-table-empty-color: var(--fk-color-text-muted);
353
355
  --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
354
356
  --fk-data-table-loading-color: var(--fk-color-text-muted);
@@ -771,6 +773,8 @@ html.dark {
771
773
  --fk-data-table-body-color: var(--fk-color-text);
772
774
  --fk-data-table-border-color: var(--fk-color-border);
773
775
  --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
776
+ --fk-data-table-group-heading-bg: var(--fk-color-surface-muted);
777
+ --fk-data-table-group-heading-color: var(--fk-color-text-muted);
774
778
  --fk-data-table-empty-color: var(--fk-color-text-muted);
775
779
  --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
776
780
  --fk-data-table-loading-color: var(--fk-color-text-muted);