@tokenami/ds 0.0.67 → 0.0.69

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/README.md CHANGED
@@ -79,9 +79,31 @@ This will mean a font size that scales between `12px` (`0.75rem`) and `18px` (`1
79
79
 
80
80
  ## Radix UI Colours
81
81
 
82
- The design system uses [Radix UI colours](https://www.radix-ui.com/colors). A powerful feature of this palette is dark mode by default when applying the appropriate steps in the scale to each use case.
82
+ The design system uses [Radix UI P3 colours](https://www.radix-ui.com/colors) and includes fallbacks for browsers/displays that don't support P3 colours.
83
83
 
84
- Find out more about [how to use the Radix palette](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on their website.
84
+ A powerful feature of this palette is dark mode by default when applying the appropriate steps in the scale to each use case. Find out more about [how to use the Radix palette](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on their website.
85
+
86
+ ### Gradients
87
+
88
+ Use the `--gradient_to-[t|r|b|l|tr|tl|br|bl]` tokens along with the `--gradient-from` and `--gradient-to` custom properties to apply gradients.
89
+
90
+ ```tsx
91
+ css({
92
+ '--background-image': 'var(--gradient_to-b)',
93
+ '--gradient-from': 'var(--color_crimson9)',
94
+ '--gradient-to': 'var(--color_green10)',
95
+ });
96
+ ```
97
+
98
+ The base gradients use the sRGB colour space to match the behaviour of design tools, but you can use the `--gradient_hd-to-[t|r|b|l|tr|tl|br|bl]` tokens to apply gradients using the OKLCH colour space for a more accurate representation of colour.
99
+
100
+ ```tsx
101
+ css({
102
+ '--background-image': 'var(--gradient_hd-to-b)',
103
+ '--gradient-from': 'var(--color_crimson9)',
104
+ '--gradient-to': 'var(--color_green10)',
105
+ });
106
+ ```
85
107
 
86
108
  ## Right-to-left support
87
109
 
package/dist/index.cjs CHANGED
@@ -5,82 +5,12 @@ var colors = require('@radix-ui/colors');
5
5
 
6
6
  // src/index.ts
7
7
  var shared = {
8
- black: "#000",
9
- white: "#fff",
10
- ...colors.blackA,
11
- ...colors.whiteA
12
- };
13
- var sharedP3 = {
14
8
  black: "color(display-p3 0 0 0)",
15
9
  white: "color(display-p3 1 1 1)",
16
10
  ...colors.blackP3A,
17
11
  ...colors.whiteP3A
18
12
  };
19
13
  var light = {
20
- ...colors.gray,
21
- ...colors.mauve,
22
- ...colors.slate,
23
- ...colors.sage,
24
- ...colors.olive,
25
- ...colors.sand,
26
- ...colors.gold,
27
- ...colors.bronze,
28
- ...colors.brown,
29
- ...colors.yellow,
30
- ...colors.amber,
31
- ...colors.orange,
32
- ...colors.tomato,
33
- ...colors.red,
34
- ...colors.ruby,
35
- ...colors.crimson,
36
- ...colors.pink,
37
- ...colors.plum,
38
- ...colors.purple,
39
- ...colors.violet,
40
- ...colors.iris,
41
- ...colors.indigo,
42
- ...colors.blue,
43
- ...colors.cyan,
44
- ...colors.teal,
45
- ...colors.jade,
46
- ...colors.green,
47
- ...colors.grass,
48
- ...colors.lime,
49
- ...colors.mint,
50
- ...colors.sky,
51
- ...colors.grayA,
52
- ...colors.mauveA,
53
- ...colors.slateA,
54
- ...colors.sageA,
55
- ...colors.oliveA,
56
- ...colors.sandA,
57
- ...colors.goldA,
58
- ...colors.bronzeA,
59
- ...colors.brownA,
60
- ...colors.yellowA,
61
- ...colors.amberA,
62
- ...colors.orangeA,
63
- ...colors.tomatoA,
64
- ...colors.redA,
65
- ...colors.rubyA,
66
- ...colors.crimsonA,
67
- ...colors.pinkA,
68
- ...colors.plumA,
69
- ...colors.purpleA,
70
- ...colors.violetA,
71
- ...colors.irisA,
72
- ...colors.indigoA,
73
- ...colors.blueA,
74
- ...colors.cyanA,
75
- ...colors.tealA,
76
- ...colors.jadeA,
77
- ...colors.greenA,
78
- ...colors.grassA,
79
- ...colors.limeA,
80
- ...colors.mintA,
81
- ...colors.skyA
82
- };
83
- var lightP3 = {
84
14
  ...colors.grayP3,
85
15
  ...colors.mauveP3,
86
16
  ...colors.slateP3,
@@ -145,70 +75,6 @@ var lightP3 = {
145
75
  ...colors.skyP3A
146
76
  };
147
77
  var dark = {
148
- ...colors.grayDark,
149
- ...colors.mauveDark,
150
- ...colors.slateDark,
151
- ...colors.sageDark,
152
- ...colors.oliveDark,
153
- ...colors.sandDark,
154
- ...colors.goldDark,
155
- ...colors.bronzeDark,
156
- ...colors.brownDark,
157
- ...colors.yellowDark,
158
- ...colors.amberDark,
159
- ...colors.orangeDark,
160
- ...colors.tomatoDark,
161
- ...colors.redDark,
162
- ...colors.rubyDark,
163
- ...colors.crimsonDark,
164
- ...colors.pinkDark,
165
- ...colors.plumDark,
166
- ...colors.purpleDark,
167
- ...colors.violetDark,
168
- ...colors.irisDark,
169
- ...colors.indigoDark,
170
- ...colors.blueDark,
171
- ...colors.cyanDark,
172
- ...colors.tealDark,
173
- ...colors.jadeDark,
174
- ...colors.greenDark,
175
- ...colors.grassDark,
176
- ...colors.limeDark,
177
- ...colors.mintDark,
178
- ...colors.skyDark,
179
- ...colors.grayDarkA,
180
- ...colors.mauveDarkA,
181
- ...colors.slateDarkA,
182
- ...colors.sageDarkA,
183
- ...colors.oliveDarkA,
184
- ...colors.sandDarkA,
185
- ...colors.goldDarkA,
186
- ...colors.bronzeDarkA,
187
- ...colors.brownDarkA,
188
- ...colors.yellowDarkA,
189
- ...colors.amberDarkA,
190
- ...colors.orangeDarkA,
191
- ...colors.tomatoDarkA,
192
- ...colors.redDarkA,
193
- ...colors.rubyDarkA,
194
- ...colors.crimsonDarkA,
195
- ...colors.pinkDarkA,
196
- ...colors.plumDarkA,
197
- ...colors.purpleDarkA,
198
- ...colors.violetDarkA,
199
- ...colors.irisDarkA,
200
- ...colors.indigoDarkA,
201
- ...colors.blueDarkA,
202
- ...colors.cyanDarkA,
203
- ...colors.tealDarkA,
204
- ...colors.jadeDarkA,
205
- ...colors.greenDarkA,
206
- ...colors.grassDarkA,
207
- ...colors.limeDarkA,
208
- ...colors.mintDarkA,
209
- ...colors.skyDarkA
210
- };
211
- var darkP3 = {
212
78
  ...colors.grayDarkP3,
213
79
  ...colors.mauveDarkP3,
214
80
  ...colors.slateDarkP3,
@@ -471,23 +337,7 @@ var src_default = config.createConfig({
471
337
  display: "none"
472
338
  }
473
339
  },
474
- themeSelector: (mode) => {
475
- const attrSelector = (mode2) => `[data-theme=${mode2}]`;
476
- const p3 = (modeSelector) => [
477
- "@supports (color: color(display-p3 1 1 1))",
478
- "@media (color-gamut: p3)",
479
- modeSelector
480
- ];
481
- if (mode === "root")
482
- return ":root";
483
- if (mode === "rootP3")
484
- return p3(":root");
485
- if (mode === "lightP3")
486
- return p3(attrSelector("light"));
487
- if (mode === "darkP3")
488
- return p3(attrSelector("dark"));
489
- return attrSelector(mode);
490
- },
340
+ themeSelector: (mode) => mode === "root" ? ":root" : `[data-theme=${mode}]`,
491
341
  theme: {
492
342
  modes: {
493
343
  root: {
@@ -513,30 +363,6 @@ var src_default = config.createConfig({
513
363
  ...shared,
514
364
  ...dark
515
365
  }
516
- },
517
- rootP3: {
518
- color: {
519
- current: "currentColor",
520
- transparent: "transparent",
521
- ...sharedP3,
522
- ...lightP3
523
- }
524
- },
525
- lightP3: {
526
- color: {
527
- current: "currentColor",
528
- transparent: "transparent",
529
- ...sharedP3,
530
- ...lightP3
531
- }
532
- },
533
- darkP3: {
534
- color: {
535
- current: "currentColor",
536
- transparent: "transparent",
537
- ...sharedP3,
538
- ...darkP3
539
- }
540
366
  }
541
367
  },
542
368
  alpha: {
@@ -718,21 +544,6 @@ var src_default = config.createConfig({
718
544
  "lg-xl": fluid({ property: "fluid-flex-basis", from: BP_LG, to: BP_XL }),
719
545
  "lg-2xl": fluid({ property: "fluid-flex-basis", from: BP_LG, to: BP_2XL })
720
546
  },
721
- "fluid-text-size": {
722
- xs: 12 / BASE_FONT_SIZE,
723
- sm: 14 / BASE_FONT_SIZE,
724
- base: 16 / BASE_FONT_SIZE,
725
- lg: 18 / BASE_FONT_SIZE,
726
- xl: 20 / BASE_FONT_SIZE,
727
- "2xl": 24 / BASE_FONT_SIZE,
728
- "3xl": 30 / BASE_FONT_SIZE,
729
- "4xl": 36 / BASE_FONT_SIZE,
730
- "5xl": 48 / BASE_FONT_SIZE,
731
- "6xl": 60 / BASE_FONT_SIZE,
732
- "7xl": 72 / BASE_FONT_SIZE,
733
- "8xl": 96 / BASE_FONT_SIZE,
734
- "9xl": 128 / BASE_FONT_SIZE
735
- },
736
547
  "fluid-text-size-clamp": {
737
548
  "min-max": fluid({ property: "fluid-text-size", from: BP_SM, to: BP_2XL, divider: 1 }),
738
549
  "sm-md": fluid({ property: "fluid-text-size", from: BP_SM, to: BP_MD, divider: 1 }),
@@ -788,7 +599,7 @@ var src_default = config.createConfig({
788
599
  "lg-xl": fluid({ property: "fluid-inset-y", from: BP_LG, to: BP_XL }),
789
600
  "lg-2xl": fluid({ property: "fluid-inset-y", from: BP_LG, to: BP_2XL })
790
601
  },
791
- "fluid-bottom": {
602
+ "fluid-bottom-clamp": {
792
603
  "min-max": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_2XL }),
793
604
  "sm-md": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_MD }),
794
605
  "sm-lg": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_LG }),
@@ -810,7 +621,7 @@ var src_default = config.createConfig({
810
621
  "lg-xl": fluid({ property: "fluid-top", from: BP_LG, to: BP_XL }),
811
622
  "lg-2xl": fluid({ property: "fluid-top", from: BP_LG, to: BP_2XL })
812
623
  },
813
- "fluid-inset-x": {
624
+ "fluid-inset-x-clamp": {
814
625
  "min-max": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_2XL }),
815
626
  "sm-md": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_MD }),
816
627
  "sm-lg": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_LG }),
@@ -843,7 +654,7 @@ var src_default = config.createConfig({
843
654
  "lg-xl": fluid({ property: "fluid-left", from: BP_LG, to: BP_XL }),
844
655
  "lg-2xl": fluid({ property: "fluid-left", from: BP_LG, to: BP_2XL })
845
656
  },
846
- "fluid-m": {
657
+ "fluid-m-clamp": {
847
658
  "min-max": fluid({ property: "fluid-m", from: BP_SM, to: BP_2XL }),
848
659
  "sm-md": fluid({ property: "fluid-m", from: BP_SM, to: BP_MD }),
849
660
  "sm-lg": fluid({ property: "fluid-m", from: BP_SM, to: BP_LG }),
@@ -1234,14 +1045,22 @@ var src_default = config.createConfig({
1234
1045
  mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
1235
1046
  },
1236
1047
  gradient: {
1237
- "to-t": optionalViaGradient("to top"),
1238
- "to-tr": optionalViaGradient("to top right"),
1239
- "to-r": optionalViaGradient("to right"),
1240
- "to-br": optionalViaGradient("to bottom right"),
1241
- "to-b": optionalViaGradient("to bottom"),
1242
- "to-bl": optionalViaGradient("to bottom left"),
1243
- "to-l": optionalViaGradient("to left"),
1244
- "to-tl": optionalViaGradient("to top left")
1048
+ "to-t": optionalViaGradient("to top in srgb"),
1049
+ "to-tr": optionalViaGradient("to top right in srgb"),
1050
+ "to-r": optionalViaGradient("to right in srgb"),
1051
+ "to-br": optionalViaGradient("to bottom right in srgb"),
1052
+ "to-b": optionalViaGradient("to bottom in srgb"),
1053
+ "to-bl": optionalViaGradient("to bottom left in srgb"),
1054
+ "to-l": optionalViaGradient("to left in srgb"),
1055
+ "to-tl": optionalViaGradient("to top left in srgb"),
1056
+ "hd-to-t": optionalViaGradient("to top in oklch"),
1057
+ "hd-to-tr": optionalViaGradient("to top right in oklch"),
1058
+ "hd-to-r": optionalViaGradient("to right in oklch"),
1059
+ "hd-to-br": optionalViaGradient("to bottom right in oklch"),
1060
+ "hd-to-b": optionalViaGradient("to bottom in oklch"),
1061
+ "hd-to-bl": optionalViaGradient("to bottom left in oklch"),
1062
+ "hd-to-l": optionalViaGradient("to left in oklch"),
1063
+ "hd-to-tl": optionalViaGradient("to top left in oklch")
1245
1064
  },
1246
1065
  space: {
1247
1066
  "0": 0,
@@ -1444,6 +1263,21 @@ var src_default = config.createConfig({
1444
1263
  "8xl": rem(96),
1445
1264
  "9xl": rem(128)
1446
1265
  },
1266
+ "fluid-text-size": {
1267
+ xs: 12 / BASE_FONT_SIZE,
1268
+ sm: 14 / BASE_FONT_SIZE,
1269
+ base: 16 / BASE_FONT_SIZE,
1270
+ lg: 18 / BASE_FONT_SIZE,
1271
+ xl: 20 / BASE_FONT_SIZE,
1272
+ "2xl": 24 / BASE_FONT_SIZE,
1273
+ "3xl": 30 / BASE_FONT_SIZE,
1274
+ "4xl": 36 / BASE_FONT_SIZE,
1275
+ "5xl": 48 / BASE_FONT_SIZE,
1276
+ "6xl": 60 / BASE_FONT_SIZE,
1277
+ "7xl": 72 / BASE_FONT_SIZE,
1278
+ "8xl": 96 / BASE_FONT_SIZE,
1279
+ "9xl": 128 / BASE_FONT_SIZE
1280
+ },
1447
1281
  tracking: {
1448
1282
  tighter: "-0.05em",
1449
1283
  tight: "-0.025em",
@@ -1701,8 +1535,6 @@ var src_default = config.createConfig({
1701
1535
  fill: ["color"],
1702
1536
  flex: ["flex"],
1703
1537
  "flex-basis": ["grid", "space", "fluid-flex-basis-clamp"],
1704
- "flex-basis-min": ["number"],
1705
- "flex-basis-max": ["number"],
1706
1538
  "fluid-height-min": ["number"],
1707
1539
  "fluid-height-max": ["number"],
1708
1540
  "fluid-border-spacing-min": ["number"],
@@ -1823,18 +1655,18 @@ var src_default = config.createConfig({
1823
1655
  "inline-size": ["size", "grid", "fluid-width-clamp"],
1824
1656
  inset: ["grid", "space", "fluid-inset-clamp"],
1825
1657
  "inset-block": ["grid", "space", "fluid-inset-y-clamp"],
1826
- "inset-block-end": ["grid", "space", "fluid-bottom"],
1658
+ "inset-block-end": ["grid", "space", "fluid-bottom-clamp"],
1827
1659
  "inset-block-start": ["grid", "space", "fluid-top-clamp"],
1828
- "inset-inline": ["grid", "space", "fluid-inset-x"],
1660
+ "inset-inline": ["grid", "space", "fluid-inset-x-clamp"],
1829
1661
  "inset-inline-end": ["grid", "space", "fluid-right-clamp"],
1830
1662
  "inset-inline-start": ["grid", "space", "fluid-left-clamp"],
1831
1663
  left: ["grid", "space", "fluid-left-clamp"],
1832
1664
  "letter-spacing": ["tracking"],
1833
- margin: ["grid", "fluid-m"],
1665
+ margin: ["grid", "fluid-m-clamp"],
1834
1666
  "margin-block": ["grid", "fluid-my-clamp"],
1835
1667
  "margin-block-end": ["grid", "fluid-mb-clamp"],
1836
1668
  "margin-block-start": ["grid", "fluid-mt-clamp"],
1837
- "margin-inline": ["grid", "fluid-mx"],
1669
+ "margin-inline": ["grid", "fluid-mx-clamp"],
1838
1670
  "margin-inline-end": ["grid", "fluid-mr-clamp"],
1839
1671
  "margin-inline-start": ["grid", "fluid-ml-clamp"],
1840
1672
  "margin-top": ["grid", "fluid-mt-clamp"],
@@ -1854,11 +1686,11 @@ var src_default = config.createConfig({
1854
1686
  "outline-color": ["color"],
1855
1687
  "outline-width": ["line-size"],
1856
1688
  "outline-offset": ["offset"],
1857
- padding: ["grid", "fluid-p"],
1689
+ padding: ["grid", "fluid-p-clamp"],
1858
1690
  "padding-block": ["grid", "fluid-py-clamp"],
1859
1691
  "padding-block-end": ["grid", "fluid-pb-clamp"],
1860
1692
  "padding-block-start": ["grid", "fluid-pt-clamp"],
1861
- "padding-inline": ["grid", "fluid-px"],
1693
+ "padding-inline": ["grid", "fluid-px-clamp"],
1862
1694
  "padding-inline-end": ["grid", "fluid-pr-clamp"],
1863
1695
  "padding-inline-start": ["grid", "fluid-pl-clamp"],
1864
1696
  "padding-top": ["grid", "fluid-pt-clamp"],
@@ -1867,11 +1699,11 @@ var src_default = config.createConfig({
1867
1699
  "padding-left": ["grid", "fluid-pl-clamp"],
1868
1700
  right: ["grid", "space", "fluid-right-clamp"],
1869
1701
  "row-gap": ["grid", "fluid-row-gap-clamp"],
1870
- "scroll-margin": ["grid", "fluid-scroll-m"],
1702
+ "scroll-margin": ["grid", "fluid-scroll-m-clamp"],
1871
1703
  "scroll-margin-block": ["grid", "fluid-scroll-my-clamp"],
1872
1704
  "scroll-margin-block-end": ["grid", "fluid-scroll-mb-clamp"],
1873
1705
  "scroll-margin-block-start": ["grid", "fluid-scroll-mt-clamp"],
1874
- "scroll-margin-inline": ["grid", "fluid-scroll-mx"],
1706
+ "scroll-margin-inline": ["grid", "fluid-scroll-mx-clamp"],
1875
1707
  "scroll-margin-inline-end": ["grid", "fluid-scroll-mr-clamp"],
1876
1708
  "scroll-margin-inline-start": ["grid", "fluid-scroll-ml-clamp"],
1877
1709
  "scroll-margin-top": ["grid", "fluid-scroll-mt-clamp"],
@@ -1882,7 +1714,7 @@ var src_default = config.createConfig({
1882
1714
  "scroll-padding-block": ["grid", "fluid-scroll-py-clamp"],
1883
1715
  "scroll-padding-block-end": ["grid", "fluid-scroll-pb-clamp"],
1884
1716
  "scroll-padding-block-start": ["grid", "fluid-scroll-pt-clamp"],
1885
- "scroll-padding-inline": ["grid", "fluid-scroll-px"],
1717
+ "scroll-padding-inline": ["grid", "fluid-scroll-px-clamp"],
1886
1718
  "scroll-padding-inline-end": ["grid", "fluid-scroll-pr-clamp"],
1887
1719
  "scroll-padding-inline-start": ["grid", "fluid-scroll-pl-clamp"],
1888
1720
  "scroll-padding-top": ["grid", "fluid-scroll-pt-clamp"],