@baseline-ui/tokens 0.37.1 → 0.39.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.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
2
  import * as _vanilla_extract_css from '@vanilla-extract/css';
3
- import { StyleRule } from '@vanilla-extract/css';
3
+ import { GlobalStyleRule, StyleRule } from '@vanilla-extract/css';
4
4
  import React from 'react';
5
5
 
6
6
  declare const Layers: {
@@ -180,8 +180,8 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
180
180
  } & {
181
181
  color?: "text.primary" | "text.secondary" | "text.helper" | "text.placeholder" | "text.interactive.disabled" | "text.inverse" | "text.oninteractive" | "text.interactive.enabled" | "text.interactive.hovered" | "text.interactive.active" | "text.interactive.visited" | "icon.primary" | "icon.secondary" | "icon.interactive.disabled" | "icon.inverse" | "icon.oninteractive" | "icon.interactive.enabled" | "icon.interactive.hovered" | "icon.interactive.active" | "icon.interactive.visited" | "background.interactive.enabled" | "background.interactive.hovered" | "background.interactive.active" | "background.interactive.visited" | "background.interactive.disabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | undefined;
182
182
  backgroundColor?: "background.interactive.enabled" | "background.interactive.hovered" | "background.interactive.active" | "background.interactive.visited" | "background.interactive.disabled" | "background.primary.subtle" | "background.primary.medium" | "background.primary.strong" | "background.secondary.subtle" | "background.secondary.medium" | "background.secondary.strong" | "background.inverse.subtle" | "background.inverse.medium" | "background.inverse.strong" | "background.overlay.subtle" | "background.overlay.medium" | "background.positive.subtle" | "background.positive.medium" | "background.positive.strong" | "border.positive.interactive.enabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | undefined;
183
- borderColor?: "transparent" | "border.positive.interactive.enabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive.enabled" | "border.interactive.hovered" | "border.interactive.active" | "border.interactive.visited" | "border.interactive.disabled" | undefined;
184
- outlineColor?: "transparent" | "border.positive.interactive.enabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive.enabled" | "border.interactive.hovered" | "border.interactive.active" | "border.interactive.visited" | "border.interactive.disabled" | undefined;
183
+ borderColor?: "transparent" | "border.positive.interactive.enabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive.enabled" | "border.interactive.hovered" | "border.interactive.active" | "border.interactive.visited" | "border.interactive.disabled" | "border.positive.medium" | "border.positive.strong" | "border.positive.subtle" | undefined;
184
+ outlineColor?: "transparent" | "border.positive.interactive.enabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.default" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive.enabled" | "border.interactive.hovered" | "border.interactive.active" | "border.interactive.visited" | "border.interactive.disabled" | "border.positive.medium" | "border.positive.strong" | "border.positive.subtle" | undefined;
185
185
  } & {
186
186
  position?: ("fixed" | "absolute" | "relative" | {
187
187
  mobile?: "fixed" | "absolute" | "relative" | undefined;
@@ -354,6 +354,9 @@ declare const themeContract: {
354
354
  subtle: string;
355
355
  medium: string;
356
356
  strong: string;
357
+ interactive: {
358
+ enabled: string;
359
+ };
357
360
  };
358
361
  };
359
362
  text: {
@@ -400,6 +403,9 @@ declare const themeContract: {
400
403
  interactive: {
401
404
  enabled: string;
402
405
  };
406
+ subtle: string;
407
+ medium: string;
408
+ strong: string;
403
409
  };
404
410
  };
405
411
  };
@@ -679,6 +685,9 @@ declare const themeVars: {
679
685
  subtle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
680
686
  medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
681
687
  strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
688
+ interactive: {
689
+ enabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
690
+ };
682
691
  };
683
692
  };
684
693
  text: {
@@ -725,6 +734,9 @@ declare const themeVars: {
725
734
  interactive: {
726
735
  enabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
727
736
  };
737
+ subtle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
738
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
739
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
728
740
  };
729
741
  };
730
742
  };
@@ -912,15 +924,14 @@ declare const breakpoints: {
912
924
  desktop: number;
913
925
  };
914
926
  type Breakpoint = keyof typeof breakpoints;
915
- type CSSProps = Omit<StyleRule, "@media" | "@supports">;
916
927
  declare const queries: {
917
928
  tablet: string;
918
929
  desktop: string;
919
930
  };
920
931
  interface ResponsiveStyle {
921
- mobile?: CSSProps;
922
- tablet?: CSSProps;
923
- desktop?: CSSProps;
932
+ mobile?: GlobalStyleRule;
933
+ tablet?: GlobalStyleRule;
934
+ desktop?: GlobalStyleRule;
924
935
  }
925
936
  declare const responsiveStyle: ({ mobile, tablet, desktop, }: ResponsiveStyle) => StyleRule;
926
937
 
@@ -975,12 +986,6 @@ interface Border {
975
986
  interactive: Interactive;
976
987
  positive: Positive;
977
988
  }
978
- interface Positive {
979
- interactive: Interactive2;
980
- }
981
- interface Interactive2 {
982
- enabled: string;
983
- }
984
989
  interface Icon {
985
990
  primary: string;
986
991
  secondary: string;
@@ -1003,7 +1008,16 @@ interface Background {
1003
1008
  inverse: Primary;
1004
1009
  secondary: Primary;
1005
1010
  overlay: Overlay;
1006
- positive: Primary;
1011
+ positive: Positive;
1012
+ }
1013
+ interface Positive {
1014
+ subtle: string;
1015
+ medium: string;
1016
+ strong: string;
1017
+ interactive: Interactive2;
1018
+ }
1019
+ interface Interactive2 {
1020
+ enabled: string;
1007
1021
  }
1008
1022
  interface Overlay {
1009
1023
  subtle: string;
@@ -1247,7 +1261,10 @@ var color$4 = {
1247
1261
  positive: {
1248
1262
  subtle: "#ffffff",
1249
1263
  medium: "#f6f9fd",
1250
- strong: "#f0f3f9"
1264
+ strong: "#f0f3f9",
1265
+ interactive: {
1266
+ enabled: "#000000"
1267
+ }
1251
1268
  }
1252
1269
  },
1253
1270
  text: {
@@ -1293,7 +1310,10 @@ var color$4 = {
1293
1310
  positive: {
1294
1311
  interactive: {
1295
1312
  enabled: "#000000"
1296
- }
1313
+ },
1314
+ subtle: "#f0f3f9",
1315
+ medium: "#d7dce4",
1316
+ strong: "#a9aeb7"
1297
1317
  }
1298
1318
  }
1299
1319
  };
@@ -1578,7 +1598,10 @@ var color$3 = {
1578
1598
  positive: {
1579
1599
  subtle: "#ffffff",
1580
1600
  medium: "#f6f9fd",
1581
- strong: "#f0f3f9"
1601
+ strong: "#f0f3f9",
1602
+ interactive: {
1603
+ enabled: "#000000"
1604
+ }
1582
1605
  }
1583
1606
  },
1584
1607
  text: {
@@ -1624,7 +1647,10 @@ var color$3 = {
1624
1647
  positive: {
1625
1648
  interactive: {
1626
1649
  enabled: "#000000"
1627
- }
1650
+ },
1651
+ subtle: "#f0f3f9",
1652
+ medium: "#d7dce4",
1653
+ strong: "#a9aeb7"
1628
1654
  }
1629
1655
  }
1630
1656
  };
@@ -1851,26 +1877,26 @@ var color$2 = {
1851
1877
  support: {
1852
1878
  error: {
1853
1879
  subtler: "#ffddd7",
1854
- subtle: "#ffc0b6",
1880
+ subtle: "#fbb9ae",
1855
1881
  medium: "#cb4029",
1856
1882
  strong: "#672d23"
1857
1883
  },
1858
1884
  success: {
1859
1885
  subtler: "#d4ffdb",
1860
- subtle: "#97dba1",
1886
+ subtle: "#b4e8bd",
1861
1887
  medium: "#3b7d45",
1862
1888
  strong: "#2b412f"
1863
1889
  },
1864
1890
  warning: {
1865
1891
  subtler: "#ffefc8",
1866
- subtle: "#f0c968",
1892
+ subtle: "#f8df9f",
1867
1893
  medium: "#8d6b17",
1868
1894
  strong: "#5b481a"
1869
1895
  },
1870
1896
  info: {
1871
1897
  subtler: "#ffdef6",
1872
- subtle: "#de9dcc",
1873
- medium: "#885c7c",
1898
+ subtle: "#eec0e1",
1899
+ medium: "#a26190",
1874
1900
  strong: "#4f2b45"
1875
1901
  }
1876
1902
  },
@@ -1882,19 +1908,19 @@ var color$2 = {
1882
1908
  primary: {
1883
1909
  subtle: "#fafafa",
1884
1910
  medium: "#F2F2F2",
1885
- strong: "#eeeeee"
1911
+ strong: "#e5e4e3"
1886
1912
  },
1887
1913
  interactive: {
1888
1914
  enabled: "#de9dcc",
1889
- hovered: "#89597c",
1915
+ hovered: "#bf7fad",
1890
1916
  active: "#de9dcc",
1891
1917
  visited: "#de9dcc",
1892
1918
  disabled: "rgb(10.2% 7.84% 7.84% / 0.5)"
1893
1919
  },
1894
1920
  inverse: {
1895
- subtle: "#67594b",
1896
- medium: "#44403c",
1897
- strong: "1a1414"
1921
+ subtle: "#6d6965",
1922
+ medium: "#322e2e",
1923
+ strong: "#1a1414"
1898
1924
  },
1899
1925
  overlay: {
1900
1926
  subtle: "rgb(98% 98% 98% / 0.25)",
@@ -1902,26 +1928,29 @@ var color$2 = {
1902
1928
  interactive: "rgb(87.1% 61.6% 80% / 0.25)"
1903
1929
  },
1904
1930
  secondary: {
1905
- subtle: "#e2dbd9",
1906
- medium: "#c2b8ae",
1907
- strong: "#9f9790"
1931
+ subtle: "#d1d0cc",
1932
+ medium: "#b6b4ad",
1933
+ strong: "#a09d94"
1908
1934
  },
1909
1935
  positive: {
1910
1936
  subtle: "#fafafa",
1911
1937
  medium: "#f2f2f2",
1912
- strong: "#efebe7"
1938
+ strong: "#e5e4e3",
1939
+ interactive: {
1940
+ enabled: "#de9dcc"
1941
+ }
1913
1942
  }
1914
1943
  },
1915
1944
  text: {
1916
1945
  primary: "#1a1414",
1917
- secondary: "#67594b",
1918
- helper: "#67594b",
1919
- placeholder: "#9f9790",
1946
+ secondary: "#322e2e",
1947
+ helper: "#4a4646",
1948
+ placeholder: "#6d6965",
1920
1949
  inverse: "#fafafa",
1921
1950
  oninteractive: "#1a1414",
1922
1951
  interactive: {
1923
1952
  enabled: "#1a1414",
1924
- hovered: "#67594b",
1953
+ hovered: "#4a4646",
1925
1954
  active: "#1a1414",
1926
1955
  visited: "#1a1414",
1927
1956
  disabled: "rgb(10.2% 7.84% 7.84% / 0.5)"
@@ -1929,33 +1958,36 @@ var color$2 = {
1929
1958
  },
1930
1959
  icon: {
1931
1960
  primary: "#1a1414",
1932
- secondary: "#67594b",
1961
+ secondary: "#4a4646",
1933
1962
  inverse: "#fafafa",
1934
1963
  oninteractive: "#1a1414",
1935
1964
  interactive: {
1936
- enabled: "#1e794d",
1937
- hovered: "#6eb579",
1938
- active: "#1e794d",
1939
- visited: "#1e794d",
1965
+ enabled: "#a26190",
1966
+ hovered: "#de9dcc",
1967
+ active: "#a26190",
1968
+ visited: "#824974",
1940
1969
  disabled: "rgb(10.2% 7.84% 7.84% / 0.5)"
1941
1970
  }
1942
1971
  },
1943
1972
  border: {
1944
- subtle: "#efebe7",
1945
- medium: "#e2dbd9",
1946
- strong: "#c2b8ae",
1973
+ subtle: "#e5e4e3",
1974
+ medium: "#d1d0cc",
1975
+ strong: "#b6b4ad",
1947
1976
  inverse: "#1a1414",
1948
1977
  interactive: {
1949
- enabled: "#6eb579",
1950
- hovered: "#1e794d",
1951
- active: "#6eb579",
1952
- visited: "#6eb579",
1978
+ enabled: "#de9dcc",
1979
+ hovered: "#824974",
1980
+ active: "#de9dcc",
1981
+ visited: "#de9dcc",
1953
1982
  disabled: "rgb(10.2% 7.84% 7.84% / 0.5)"
1954
1983
  },
1955
1984
  positive: {
1956
1985
  interactive: {
1957
1986
  enabled: "#de9dcc"
1958
- }
1987
+ },
1988
+ subtle: "#e5e4e3",
1989
+ medium: "#d1d0cc",
1990
+ strong: "#b6b4ad"
1959
1991
  }
1960
1992
  }
1961
1993
  };
@@ -2223,7 +2255,7 @@ var color$1 = {
2223
2255
  disabled: "#a9aeb7"
2224
2256
  },
2225
2257
  inverse: {
2226
- subtle: "#717885",
2258
+ subtle: "#707785",
2227
2259
  medium: "#3d434e",
2228
2260
  strong: "#2b2e36"
2229
2261
  },
@@ -2240,14 +2272,17 @@ var color$1 = {
2240
2272
  positive: {
2241
2273
  subtle: "#ffffff",
2242
2274
  medium: "#f6f9fd",
2243
- strong: "#f0f3f9"
2275
+ strong: "#f0f3f9",
2276
+ interactive: {
2277
+ enabled: "#4537de"
2278
+ }
2244
2279
  }
2245
2280
  },
2246
2281
  text: {
2247
2282
  primary: "#2b2e36",
2248
2283
  secondary: "#4d525d",
2249
2284
  helper: "#606671",
2250
- placeholder: "#717885",
2285
+ placeholder: "#707785",
2251
2286
  inverse: "#ffffff",
2252
2287
  oninteractive: "#ffffff",
2253
2288
  interactive: {
@@ -2286,7 +2321,10 @@ var color$1 = {
2286
2321
  positive: {
2287
2322
  interactive: {
2288
2323
  enabled: "#4537de"
2289
- }
2324
+ },
2325
+ subtle: "#f0f3f9",
2326
+ medium: "#d7dce4",
2327
+ strong: "#a9aeb7"
2290
2328
  }
2291
2329
  }
2292
2330
  };
@@ -2554,7 +2592,7 @@ var color = {
2554
2592
  disabled: "#606671"
2555
2593
  },
2556
2594
  inverse: {
2557
- subtle: "#717885",
2595
+ subtle: "#707785",
2558
2596
  medium: "#f0f3f9",
2559
2597
  strong: "#ffffff"
2560
2598
  },
@@ -2571,14 +2609,17 @@ var color = {
2571
2609
  positive: {
2572
2610
  subtle: "#f0f3f9",
2573
2611
  medium: "#f6f9fd",
2574
- strong: "#ffffff"
2612
+ strong: "#ffffff",
2613
+ interactive: {
2614
+ enabled: "#4537de"
2615
+ }
2575
2616
  }
2576
2617
  },
2577
2618
  text: {
2578
2619
  primary: "#ffffff",
2579
2620
  secondary: "#d7dce4",
2580
2621
  helper: "#a9aeb7",
2581
- placeholder: "#717885",
2622
+ placeholder: "#a9aeb7",
2582
2623
  inverse: "#2b2e36",
2583
2624
  oninteractive: "#2b2e36",
2584
2625
  interactive: {
@@ -2617,7 +2658,10 @@ var color = {
2617
2658
  positive: {
2618
2659
  interactive: {
2619
2660
  enabled: "#4537de"
2620
- }
2661
+ },
2662
+ subtle: "#f0f3f9",
2663
+ medium: "#d7dce4",
2664
+ strong: "#a9aeb7"
2621
2665
  }
2622
2666
  }
2623
2667
  };
@@ -2913,6 +2957,9 @@ declare const themes: {
2913
2957
  subtle: string;
2914
2958
  medium: string;
2915
2959
  strong: string;
2960
+ interactive: {
2961
+ enabled: string;
2962
+ };
2916
2963
  };
2917
2964
  };
2918
2965
  text: {
@@ -2959,6 +3006,9 @@ declare const themes: {
2959
3006
  interactive: {
2960
3007
  enabled: string;
2961
3008
  };
3009
+ subtle: string;
3010
+ medium: string;
3011
+ strong: string;
2962
3012
  };
2963
3013
  };
2964
3014
  };
@@ -3237,6 +3287,9 @@ declare const themes: {
3237
3287
  subtle: string;
3238
3288
  medium: string;
3239
3289
  strong: string;
3290
+ interactive: {
3291
+ enabled: string;
3292
+ };
3240
3293
  };
3241
3294
  };
3242
3295
  text: {
@@ -3283,6 +3336,9 @@ declare const themes: {
3283
3336
  interactive: {
3284
3337
  enabled: string;
3285
3338
  };
3339
+ subtle: string;
3340
+ medium: string;
3341
+ strong: string;
3286
3342
  };
3287
3343
  };
3288
3344
  };
@@ -3563,6 +3619,9 @@ declare const themes: {
3563
3619
  subtle: string;
3564
3620
  medium: string;
3565
3621
  strong: string;
3622
+ interactive: {
3623
+ enabled: string;
3624
+ };
3566
3625
  };
3567
3626
  };
3568
3627
  text: {
@@ -3609,6 +3668,9 @@ declare const themes: {
3609
3668
  interactive: {
3610
3669
  enabled: string;
3611
3670
  };
3671
+ subtle: string;
3672
+ medium: string;
3673
+ strong: string;
3612
3674
  };
3613
3675
  };
3614
3676
  };
@@ -3887,6 +3949,9 @@ declare const themes: {
3887
3949
  subtle: string;
3888
3950
  medium: string;
3889
3951
  strong: string;
3952
+ interactive: {
3953
+ enabled: string;
3954
+ };
3890
3955
  };
3891
3956
  };
3892
3957
  text: {
@@ -3933,6 +3998,9 @@ declare const themes: {
3933
3998
  interactive: {
3934
3999
  enabled: string;
3935
4000
  };
4001
+ subtle: string;
4002
+ medium: string;
4003
+ strong: string;
3936
4004
  };
3937
4005
  };
3938
4006
  };
@@ -4213,6 +4281,9 @@ declare const themes: {
4213
4281
  subtle: string;
4214
4282
  medium: string;
4215
4283
  strong: string;
4284
+ interactive: {
4285
+ enabled: string;
4286
+ };
4216
4287
  };
4217
4288
  };
4218
4289
  text: {
@@ -4259,6 +4330,9 @@ declare const themes: {
4259
4330
  interactive: {
4260
4331
  enabled: string;
4261
4332
  };
4333
+ subtle: string;
4334
+ medium: string;
4335
+ strong: string;
4262
4336
  };
4263
4337
  };
4264
4338
  };
@@ -4537,6 +4611,9 @@ declare const themes: {
4537
4611
  subtle: string;
4538
4612
  medium: string;
4539
4613
  strong: string;
4614
+ interactive: {
4615
+ enabled: string;
4616
+ };
4540
4617
  };
4541
4618
  };
4542
4619
  text: {
@@ -4583,6 +4660,9 @@ declare const themes: {
4583
4660
  interactive: {
4584
4661
  enabled: string;
4585
4662
  };
4663
+ subtle: string;
4664
+ medium: string;
4665
+ strong: string;
4586
4666
  };
4587
4667
  };
4588
4668
  };