@nattstack/ui 0.1.1 → 0.1.3

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 (80) hide show
  1. package/README.md +4 -1
  2. package/dist/baseline/index.css +4 -9
  3. package/dist/colors/accent/amber.css +61 -0
  4. package/dist/colors/accent/blue.css +64 -0
  5. package/dist/colors/accent/bronze.css +67 -0
  6. package/dist/colors/accent/brown.css +67 -0
  7. package/dist/colors/accent/crimson.css +67 -0
  8. package/dist/colors/accent/cyan.css +67 -0
  9. package/dist/colors/accent/gold.css +67 -0
  10. package/dist/colors/accent/grass.css +67 -0
  11. package/dist/colors/accent/green.css +67 -0
  12. package/dist/colors/accent/index.css +25 -0
  13. package/dist/colors/accent/indigo.css +67 -0
  14. package/dist/colors/accent/iris.css +67 -0
  15. package/dist/colors/accent/jade.css +67 -0
  16. package/dist/colors/accent/lime.css +67 -0
  17. package/dist/colors/accent/mint.css +67 -0
  18. package/dist/colors/accent/orange.css +58 -0
  19. package/dist/colors/accent/pink.css +67 -0
  20. package/dist/colors/accent/plum.css +67 -0
  21. package/dist/colors/accent/purple.css +67 -0
  22. package/dist/colors/accent/red.css +67 -0
  23. package/dist/colors/accent/ruby.css +67 -0
  24. package/dist/colors/accent/sky.css +67 -0
  25. package/dist/colors/accent/teal.css +67 -0
  26. package/dist/colors/accent/tomato.css +67 -0
  27. package/dist/colors/accent/violet.css +67 -0
  28. package/dist/colors/accent/yellow.css +61 -0
  29. package/dist/colors/color-scheme.css +7 -0
  30. package/dist/colors/index.css +4 -5
  31. package/dist/colors/neutral/gray.css +67 -0
  32. package/dist/colors/neutral/index.css +6 -0
  33. package/dist/colors/neutral/mauve.css +67 -0
  34. package/dist/colors/neutral/olive.css +67 -0
  35. package/dist/colors/neutral/sage.css +67 -0
  36. package/dist/colors/neutral/sand.css +67 -0
  37. package/dist/colors/neutral/slate.css +67 -0
  38. package/dist/colors/semantic/index.css +2 -0
  39. package/dist/colors/semantic/neutral-on-accent.css +11 -0
  40. package/dist/colors/semantic/semantic.css +26 -0
  41. package/dist/components/button/button.d.ts +1 -1
  42. package/dist/components/button/button.stylex.js +12 -6
  43. package/dist/components/checkbox/checkbox.stylex.js +4 -4
  44. package/dist/components/colors/palette.d.ts +74 -0
  45. package/dist/components/colors/palette.js +74 -0
  46. package/dist/components/combobox/combobox-input.stylex.js +4 -4
  47. package/dist/components/combobox/combobox-search.stylex.js +2 -2
  48. package/dist/components/combobox/combobox-value.stylex.js +1 -1
  49. package/dist/components/dialog-responsive/dialog-responsive-backdrop.stylex.js +1 -1
  50. package/dist/components/dialog-responsive/dialog-responsive-bar.stylex.js +1 -1
  51. package/dist/components/dialog-responsive/dialog-responsive-popup.stylex.js +2 -2
  52. package/dist/components/index.d.ts +2 -1
  53. package/dist/components/index.js +3 -2
  54. package/dist/components/input/input.stylex.js +2 -2
  55. package/dist/components/menu/menu-submenu-trigger.stylex.js +1 -1
  56. package/dist/components/otp-field/otp-field-input.stylex.js +2 -2
  57. package/dist/components/picker/picker-item.stylex.js +2 -2
  58. package/dist/components/picker/picker-popup.stylex.js +1 -1
  59. package/dist/components/picker/picker-trigger.stylex.js +3 -3
  60. package/dist/components/select/select-value.stylex.js +1 -1
  61. package/dist/components/stylex.css +94 -86
  62. package/dist/components/switch/switch.stylex.js +2 -2
  63. package/dist/components/tabs/tabs-panel.stylex.js +1 -1
  64. package/dist/components/tabs-pill/tabs-pill-indicator.stylex.js +1 -1
  65. package/dist/components/tabs-pill/tabs-pill-tab.stylex.js +4 -4
  66. package/dist/components/tabs-segmented/tabs-segmented-indicator.stylex.js +1 -1
  67. package/dist/components/tabs-segmented/tabs-segmented-list.stylex.js +1 -1
  68. package/dist/components/tabs-segmented/tabs-segmented-tab.stylex.js +2 -2
  69. package/dist/components/tabs-underline/tabs-underline-indicator.stylex.js +1 -1
  70. package/dist/components/tabs-underline/tabs-underline-list.stylex.js +1 -1
  71. package/dist/components/tabs-underline/tabs-underline-tab.stylex.js +2 -2
  72. package/dist/components/toggle-group/toggle-group-item.stylex.js +2 -2
  73. package/dist/components/tooltip/tooltip-popup.stylex.js +2 -2
  74. package/dist/tailwind-colors/color.css +48 -83
  75. package/dist/tailwind-colors/root.css +1 -26
  76. package/package.json +12 -7
  77. package/dist/colors/gray.css +0 -335
  78. package/dist/colors/primary.css +0 -1399
  79. package/dist/colors/root-p3.css +0 -904
  80. package/dist/colors/root.css +0 -900
package/README.md CHANGED
@@ -20,6 +20,9 @@ bun add @nattstack/ui
20
20
  @import "tailwindcss";
21
21
  @import "@nattstack/ui/tailwind-colors";
22
22
  @import "@nattstack/ui/tailwind-tokenless-10";
23
+
24
+ /* Required: the compiled component styles */
25
+ @import "@nattstack/ui/components";
23
26
  ```
24
27
 
25
28
  ```tsx
@@ -29,7 +32,7 @@ import { Button } from "@nattstack/ui"
29
32
 
30
33
  function App() {
31
34
  return (
32
- <html className="color-gray-slate color-primary-blue">
35
+ <html data-color-theme="light" data-color-neutral="slate" data-color-accent="blue">
33
36
  <head>...</head>
34
37
  <body>
35
38
  <Button label="Click me" />
package/dist/baseline/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* ====================================================== /
2
2
  Baseline
3
- Last updated: 2026.04.09
3
+ Last updated: 2026.08.30
4
4
 
5
5
  Baseline styles smooth over browser inconsistencies,
6
6
  improve the authoring experience, and assume
@@ -15,8 +15,8 @@
15
15
  Theme text selection colors
16
16
  */
17
17
  ::selection {
18
- background: var(--color-primary-6);
19
- color: var(--color-gray-12);
18
+ background: var(--color-accent-6);
19
+ color: var(--color-text-primary);
20
20
  }
21
21
 
22
22
  /*
@@ -29,17 +29,12 @@
29
29
  html {
30
30
  -moz-text-size-adjust: none;
31
31
  -webkit-text-size-adjust: none;
32
- color-scheme: light;
33
- scrollbar-color: var(--color-gray-6) transparent;
32
+ scrollbar-color: var(--color-border) transparent;
34
33
  scrollbar-width: thin;
35
34
  text-size-adjust: none;
36
35
  touch-action: manipulation;
37
36
  }
38
37
 
39
- html.dark {
40
- color-scheme: dark;
41
- }
42
-
43
38
  /*
44
39
  Base typography and theme tokens
45
40
  - Improve font rendering
package/dist/colors/accent/amber.css ADDED
@@ -0,0 +1,61 @@
1
+ [data-color-accent="amber"] {
2
+ --color-accent-1: light-dark(#fefdfb, #16120c);
3
+ --color-accent-2: light-dark(#fefbe9, #1d180f);
4
+ --color-accent-3: light-dark(#fff7c2, #302008);
5
+ --color-accent-4: light-dark(#ffee9c, #3f2700);
6
+ --color-accent-5: light-dark(#fbe577, #4d3000);
7
+ --color-accent-6: light-dark(#f3d673, #5c3d05);
8
+ --color-accent-7: light-dark(#e9c162, #714f19);
9
+ --color-accent-8: light-dark(#e2a336, #8f6424);
10
+ --color-accent-9: light-dark(#ffc53d, #ffc53d);
11
+ --color-accent-10: light-dark(#ffba18, #ffd60a);
12
+ --color-accent-11: light-dark(#ab6400, #ffca16);
13
+ --color-accent-12: light-dark(#4f3422, #ffe7b3);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="amber"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.995 0.992 0.985),
20
+ color(display-p3 0.082 0.07 0.05)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.994 0.986 0.921),
24
+ color(display-p3 0.111 0.094 0.064)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.994 0.969 0.782),
28
+ color(display-p3 0.178 0.128 0.049)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.989 0.937 0.65),
32
+ color(display-p3 0.239 0.156 0)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.97 0.902 0.527),
36
+ color(display-p3 0.29 0.193 0)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.936 0.844 0.506),
40
+ color(display-p3 0.344 0.245 0.076)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.89 0.762 0.443),
44
+ color(display-p3 0.422 0.314 0.141)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.85 0.65 0.3),
48
+ color(display-p3 0.535 0.399 0.189)
49
+ );
50
+ --color-accent-9: light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26));
51
+ --color-accent-10: light-dark(
52
+ color(display-p3 0.959 0.741 0.274),
53
+ color(display-p3 1 0.87 0.15)
54
+ );
55
+ --color-accent-11: light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29));
56
+ --color-accent-12: light-dark(
57
+ color(display-p3 0.294 0.208 0.145),
58
+ color(display-p3 0.984 0.909 0.726)
59
+ );
60
+ }
61
+ }
package/dist/colors/accent/blue.css ADDED
@@ -0,0 +1,64 @@
1
+ [data-color-accent="blue"] {
2
+ --color-accent-1: light-dark(#fbfdff, #0d1520);
3
+ --color-accent-2: light-dark(#f4faff, #111927);
4
+ --color-accent-3: light-dark(#e6f4fe, #0d2847);
5
+ --color-accent-4: light-dark(#d5efff, #003362);
6
+ --color-accent-5: light-dark(#c2e5ff, #004074);
7
+ --color-accent-6: light-dark(#acd8fc, #104d87);
8
+ --color-accent-7: light-dark(#8ec8f6, #205d9e);
9
+ --color-accent-8: light-dark(#5eb1ef, #2870bd);
10
+ --color-accent-9: light-dark(#0090ff, #0090ff);
11
+ --color-accent-10: light-dark(#0588f0, #3b9eff);
12
+ --color-accent-11: light-dark(#0d74ce, #70b8ff);
13
+ --color-accent-12: light-dark(#113264, #c2e6ff);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="blue"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.986 0.992 0.999),
20
+ color(display-p3 0.057 0.081 0.122)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.96 0.979 0.998),
24
+ color(display-p3 0.072 0.098 0.147)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.912 0.956 0.991),
28
+ color(display-p3 0.078 0.154 0.27)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.853 0.932 1),
32
+ color(display-p3 0.033 0.197 0.37)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.788 0.894 0.998),
36
+ color(display-p3 0.08 0.245 0.441)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.709 0.843 0.976),
40
+ color(display-p3 0.14 0.298 0.511)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.606 0.777 0.947),
44
+ color(display-p3 0.195 0.361 0.6)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.451 0.688 0.917),
48
+ color(display-p3 0.239 0.434 0.72)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.247 0.556 0.969),
52
+ color(display-p3 0.247 0.556 0.969)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.234 0.523 0.912),
56
+ color(display-p3 0.344 0.612 0.973)
57
+ );
58
+ --color-accent-11: light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1));
59
+ --color-accent-12: light-dark(
60
+ color(display-p3 0.102 0.193 0.379),
61
+ color(display-p3 0.788 0.898 0.99)
62
+ );
63
+ }
64
+ }
package/dist/colors/accent/bronze.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="bronze"] {
2
+ --color-accent-1: light-dark(#fdfcfc, #141110);
3
+ --color-accent-2: light-dark(#fdf7f5, #1c1917);
4
+ --color-accent-3: light-dark(#f6edea, #262220);
5
+ --color-accent-4: light-dark(#efe4df, #302a27);
6
+ --color-accent-5: light-dark(#e7d9d3, #3b3330);
7
+ --color-accent-6: light-dark(#dfcdc5, #493e3a);
8
+ --color-accent-7: light-dark(#d3bcb3, #5a4c47);
9
+ --color-accent-8: light-dark(#c2a499, #6f5f58);
10
+ --color-accent-9: light-dark(#a18072, #a18072);
11
+ --color-accent-10: light-dark(#957468, #ae8c7e);
12
+ --color-accent-11: light-dark(#7d5e54, #d4b3a5);
13
+ --color-accent-12: light-dark(#43302b, #ede0d9);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="bronze"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.991 0.988 0.988),
20
+ color(display-p3 0.076 0.067 0.063)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.989 0.97 0.961),
24
+ color(display-p3 0.106 0.097 0.093)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.958 0.932 0.919),
28
+ color(display-p3 0.147 0.132 0.125)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.929 0.894 0.877),
32
+ color(display-p3 0.185 0.166 0.156)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.898 0.853 0.832),
36
+ color(display-p3 0.227 0.202 0.19)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.861 0.805 0.778),
40
+ color(display-p3 0.278 0.246 0.23)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.812 0.739 0.706),
44
+ color(display-p3 0.343 0.302 0.281)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.741 0.647 0.606),
48
+ color(display-p3 0.426 0.374 0.347)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.611 0.507 0.455),
52
+ color(display-p3 0.611 0.507 0.455)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.563 0.461 0.414),
56
+ color(display-p3 0.66 0.556 0.504)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.471 0.373 0.336),
60
+ color(display-p3 0.81 0.707 0.655)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.251 0.191 0.172),
64
+ color(display-p3 0.921 0.88 0.854)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/brown.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="brown"] {
2
+ --color-accent-1: light-dark(#fefdfc, #12110f);
3
+ --color-accent-2: light-dark(#fcf9f6, #1c1816);
4
+ --color-accent-3: light-dark(#f6eee7, #28211d);
5
+ --color-accent-4: light-dark(#f0e4d9, #322922);
6
+ --color-accent-5: light-dark(#ebdaca, #3e3128);
7
+ --color-accent-6: light-dark(#e4cdb7, #4d3c2f);
8
+ --color-accent-7: light-dark(#dcbc9f, #614a39);
9
+ --color-accent-8: light-dark(#cea37e, #7c5f46);
10
+ --color-accent-9: light-dark(#ad7f58, #ad7f58);
11
+ --color-accent-10: light-dark(#a07553, #b88c67);
12
+ --color-accent-11: light-dark(#815e46, #dbb594);
13
+ --color-accent-12: light-dark(#3e332e, #f2e1ca);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="brown"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.995 0.992 0.989),
20
+ color(display-p3 0.071 0.067 0.059)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.987 0.976 0.964),
24
+ color(display-p3 0.107 0.095 0.087)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.959 0.936 0.909),
28
+ color(display-p3 0.151 0.13 0.115)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.934 0.897 0.855),
32
+ color(display-p3 0.191 0.161 0.138)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.909 0.856 0.798),
36
+ color(display-p3 0.235 0.194 0.162)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.88 0.808 0.73),
40
+ color(display-p3 0.291 0.237 0.192)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.841 0.742 0.639),
44
+ color(display-p3 0.365 0.295 0.232)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.782 0.647 0.514),
48
+ color(display-p3 0.469 0.377 0.287)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.651 0.505 0.368),
52
+ color(display-p3 0.651 0.505 0.368)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.601 0.465 0.344),
56
+ color(display-p3 0.697 0.557 0.423)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.485 0.374 0.288),
60
+ color(display-p3 0.835 0.715 0.597)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.236 0.202 0.183),
64
+ color(display-p3 0.938 0.885 0.802)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/crimson.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="crimson"] {
2
+ --color-accent-1: light-dark(#fffcfd, #191114);
3
+ --color-accent-2: light-dark(#fef7f9, #201318);
4
+ --color-accent-3: light-dark(#ffe9f0, #381525);
5
+ --color-accent-4: light-dark(#fedce7, #4d122f);
6
+ --color-accent-5: light-dark(#facedd, #5c1839);
7
+ --color-accent-6: light-dark(#f3bed1, #6d2545);
8
+ --color-accent-7: light-dark(#eaacc3, #873356);
9
+ --color-accent-8: light-dark(#e093b2, #b0436e);
10
+ --color-accent-9: light-dark(#e93d82, #e93d82);
11
+ --color-accent-10: light-dark(#df3478, #ee518a);
12
+ --color-accent-11: light-dark(#cb1d63, #ff92ad);
13
+ --color-accent-12: light-dark(#621639, #fdd3e8);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="crimson"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.998 0.989 0.992),
20
+ color(display-p3 0.093 0.068 0.078)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.991 0.969 0.976),
24
+ color(display-p3 0.117 0.078 0.095)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.987 0.917 0.941),
28
+ color(display-p3 0.203 0.091 0.143)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.975 0.866 0.904),
32
+ color(display-p3 0.277 0.087 0.182)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.953 0.813 0.864),
36
+ color(display-p3 0.332 0.115 0.22)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.921 0.755 0.817),
40
+ color(display-p3 0.394 0.162 0.268)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.88 0.683 0.761),
44
+ color(display-p3 0.489 0.222 0.336)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.834 0.592 0.694),
48
+ color(display-p3 0.638 0.289 0.429)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.843 0.298 0.507),
52
+ color(display-p3 0.843 0.298 0.507)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.807 0.266 0.468),
56
+ color(display-p3 0.864 0.364 0.539)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.731 0.195 0.388),
60
+ color(display-p3 1 0.56 0.66)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.352 0.111 0.221),
64
+ color(display-p3 0.966 0.834 0.906)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/cyan.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="cyan"] {
2
+ --color-accent-1: light-dark(#fafdfe, #0b161a);
3
+ --color-accent-2: light-dark(#f2fafb, #101b20);
4
+ --color-accent-3: light-dark(#def7f9, #082c36);
5
+ --color-accent-4: light-dark(#caf1f6, #003848);
6
+ --color-accent-5: light-dark(#b5e9f0, #004558);
7
+ --color-accent-6: light-dark(#9ddde7, #045468);
8
+ --color-accent-7: light-dark(#7dcedc, #12677e);
9
+ --color-accent-8: light-dark(#3db9cf, #11809c);
10
+ --color-accent-9: light-dark(#00a2c7, #00a2c7);
11
+ --color-accent-10: light-dark(#0797b9, #23afd0);
12
+ --color-accent-11: light-dark(#107d98, #4ccce6);
13
+ --color-accent-12: light-dark(#0d3c48, #b6ecf7);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="cyan"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.982 0.992 0.996),
20
+ color(display-p3 0.053 0.085 0.098)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.955 0.981 0.984),
24
+ color(display-p3 0.072 0.105 0.122)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.888 0.965 0.975),
28
+ color(display-p3 0.073 0.168 0.209)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.821 0.941 0.959),
32
+ color(display-p3 0.063 0.216 0.277)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.751 0.907 0.935),
36
+ color(display-p3 0.091 0.267 0.336)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.671 0.862 0.9),
40
+ color(display-p3 0.137 0.324 0.4)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.564 0.8 0.854),
44
+ color(display-p3 0.186 0.398 0.484)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.388 0.715 0.798),
48
+ color(display-p3 0.23 0.496 0.6)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.282 0.627 0.765),
52
+ color(display-p3 0.282 0.627 0.765)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.264 0.583 0.71),
56
+ color(display-p3 0.331 0.675 0.801)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.08 0.48 0.63),
60
+ color(display-p3 0.446 0.79 0.887)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.108 0.232 0.277),
64
+ color(display-p3 0.757 0.919 0.962)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/gold.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="gold"] {
2
+ --color-accent-1: light-dark(#fdfdfc, #121211);
3
+ --color-accent-2: light-dark(#faf9f2, #1b1a17);
4
+ --color-accent-3: light-dark(#f2f0e7, #24231f);
5
+ --color-accent-4: light-dark(#eae6db, #2d2b26);
6
+ --color-accent-5: light-dark(#e1dccf, #38352e);
7
+ --color-accent-6: light-dark(#d8d0bf, #444039);
8
+ --color-accent-7: light-dark(#cbc0aa, #544f46);
9
+ --color-accent-8: light-dark(#b9a88d, #696256);
10
+ --color-accent-9: light-dark(#978365, #978365);
11
+ --color-accent-10: light-dark(#8c7a5e, #a39073);
12
+ --color-accent-11: light-dark(#71624b, #cbb99f);
13
+ --color-accent-12: light-dark(#3b352b, #e8e2d9);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="gold"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.992 0.992 0.989),
20
+ color(display-p3 0.071 0.071 0.067)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.98 0.976 0.953),
24
+ color(display-p3 0.104 0.101 0.09)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.947 0.94 0.909),
28
+ color(display-p3 0.141 0.136 0.122)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.914 0.904 0.865),
32
+ color(display-p3 0.177 0.17 0.152)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.88 0.865 0.816),
36
+ color(display-p3 0.217 0.207 0.185)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.84 0.818 0.756),
40
+ color(display-p3 0.265 0.252 0.225)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.788 0.753 0.677),
44
+ color(display-p3 0.327 0.31 0.277)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.715 0.66 0.565),
48
+ color(display-p3 0.407 0.384 0.342)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.579 0.517 0.41),
52
+ color(display-p3 0.579 0.517 0.41)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.538 0.479 0.38),
56
+ color(display-p3 0.628 0.566 0.463)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.433 0.386 0.305),
60
+ color(display-p3 0.784 0.728 0.635)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.227 0.209 0.173),
64
+ color(display-p3 0.906 0.887 0.855)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/grass.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="grass"] {
2
+ --color-accent-1: light-dark(#fbfefb, #0e1511);
3
+ --color-accent-2: light-dark(#f5fbf5, #141a15);
4
+ --color-accent-3: light-dark(#e9f6e9, #1b2a1e);
5
+ --color-accent-4: light-dark(#daf1db, #1d3a24);
6
+ --color-accent-5: light-dark(#c9e8ca, #25482d);
7
+ --color-accent-6: light-dark(#b2ddb5, #2d5736);
8
+ --color-accent-7: light-dark(#94ce9a, #366740);
9
+ --color-accent-8: light-dark(#65ba74, #3e7949);
10
+ --color-accent-9: light-dark(#46a758, #46a758);
11
+ --color-accent-10: light-dark(#3e9b4f, #53b365);
12
+ --color-accent-11: light-dark(#2a7e3b, #71d083);
13
+ --color-accent-12: light-dark(#203c25, #c2f0c2);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="grass"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.986 0.996 0.985),
20
+ color(display-p3 0.062 0.083 0.067)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.966 0.983 0.964),
24
+ color(display-p3 0.083 0.103 0.085)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.923 0.965 0.917),
28
+ color(display-p3 0.118 0.163 0.122)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.872 0.94 0.865),
32
+ color(display-p3 0.142 0.225 0.15)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.811 0.908 0.802),
36
+ color(display-p3 0.178 0.279 0.186)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.733 0.864 0.724),
40
+ color(display-p3 0.217 0.337 0.224)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.628 0.803 0.622),
44
+ color(display-p3 0.258 0.4 0.264)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.477 0.72 0.482),
48
+ color(display-p3 0.302 0.47 0.305)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.38 0.647 0.378),
52
+ color(display-p3 0.38 0.647 0.378)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.344 0.598 0.342),
56
+ color(display-p3 0.426 0.694 0.426)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.263 0.488 0.261),
60
+ color(display-p3 0.535 0.807 0.542)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.151 0.233 0.153),
64
+ color(display-p3 0.797 0.936 0.776)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/green.css ADDED
@@ -0,0 +1,67 @@
1
+ [data-color-accent="green"] {
2
+ --color-accent-1: light-dark(#fbfefc, #0e1512);
3
+ --color-accent-2: light-dark(#f4fbf6, #121b17);
4
+ --color-accent-3: light-dark(#e6f6eb, #132d21);
5
+ --color-accent-4: light-dark(#d6f1df, #113b29);
6
+ --color-accent-5: light-dark(#c4e8d1, #174933);
7
+ --color-accent-6: light-dark(#adddc0, #20573e);
8
+ --color-accent-7: light-dark(#8eceaa, #28684a);
9
+ --color-accent-8: light-dark(#5bb98b, #2f7c57);
10
+ --color-accent-9: light-dark(#30a46c, #30a46c);
11
+ --color-accent-10: light-dark(#2b9a66, #33b074);
12
+ --color-accent-11: light-dark(#218358, #3dd68c);
13
+ --color-accent-12: light-dark(#193b2d, #b1f1cb);
14
+ }
15
+
16
+ @media (color-gamut: p3) {
17
+ [data-color-accent="green"] {
18
+ --color-accent-1: light-dark(
19
+ color(display-p3 0.986 0.996 0.989),
20
+ color(display-p3 0.062 0.083 0.071)
21
+ );
22
+ --color-accent-2: light-dark(
23
+ color(display-p3 0.963 0.983 0.967),
24
+ color(display-p3 0.079 0.106 0.09)
25
+ );
26
+ --color-accent-3: light-dark(
27
+ color(display-p3 0.913 0.964 0.925),
28
+ color(display-p3 0.1 0.173 0.133)
29
+ );
30
+ --color-accent-4: light-dark(
31
+ color(display-p3 0.859 0.94 0.879),
32
+ color(display-p3 0.115 0.229 0.166)
33
+ );
34
+ --color-accent-5: light-dark(
35
+ color(display-p3 0.796 0.907 0.826),
36
+ color(display-p3 0.147 0.282 0.206)
37
+ );
38
+ --color-accent-6: light-dark(
39
+ color(display-p3 0.718 0.863 0.761),
40
+ color(display-p3 0.185 0.338 0.25)
41
+ );
42
+ --color-accent-7: light-dark(
43
+ color(display-p3 0.61 0.801 0.675),
44
+ color(display-p3 0.227 0.403 0.298)
45
+ );
46
+ --color-accent-8: light-dark(
47
+ color(display-p3 0.451 0.715 0.559),
48
+ color(display-p3 0.27 0.479 0.351)
49
+ );
50
+ --color-accent-9: light-dark(
51
+ color(display-p3 0.332 0.634 0.442),
52
+ color(display-p3 0.332 0.634 0.442)
53
+ );
54
+ --color-accent-10: light-dark(
55
+ color(display-p3 0.308 0.595 0.417),
56
+ color(display-p3 0.357 0.682 0.474)
57
+ );
58
+ --color-accent-11: light-dark(
59
+ color(display-p3 0.19 0.5 0.32),
60
+ color(display-p3 0.434 0.828 0.573)
61
+ );
62
+ --color-accent-12: light-dark(
63
+ color(display-p3 0.132 0.228 0.18),
64
+ color(display-p3 0.747 0.938 0.807)
65
+ );
66
+ }
67
+ }
package/dist/colors/accent/index.css ADDED
@@ -0,0 +1,25 @@
1
+ @import "./gold.css";
2
+ @import "./bronze.css";
3
+ @import "./brown.css";
4
+ @import "./yellow.css";
5
+ @import "./amber.css";
6
+ @import "./orange.css";
7
+ @import "./tomato.css";
8
+ @import "./red.css";
9
+ @import "./ruby.css";
10
+ @import "./crimson.css";
11
+ @import "./pink.css";
12
+ @import "./plum.css";
13
+ @import "./purple.css";
14
+ @import "./violet.css";
15
+ @import "./iris.css";
16
+ @import "./indigo.css";
17
+ @import "./blue.css";
18
+ @import "./cyan.css";
19
+ @import "./teal.css";
20
+ @import "./jade.css";
21
+ @import "./green.css";
22
+ @import "./grass.css";
23
+ @import "./lime.css";
24
+ @import "./mint.css";
25
+ @import "./sky.css";