@oxide/design-system 3.0.2 → 3.0.3--canary.148.17951596811.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.
Files changed (13) hide show
  1. package/README.md +0 -1
  2. package/dist/button.css +2 -2
  3. package/dist/components/src/index.d.ts +3 -3
  4. package/dist/components/src/index.js +20 -21
  5. package/dist/components/src/index.js.map +1 -1
  6. package/dist/tabs.css +4 -5
  7. package/package.json +35 -31
  8. package/styles/dist/blue.css +9 -25
  9. package/styles/dist/green.css +9 -25
  10. package/styles/dist/main.css +33 -61
  11. package/styles/dist/purple.css +9 -25
  12. package/styles/dist/red.css +9 -25
  13. package/styles/dist/yellow.css +9 -25
package/dist/tabs.css CHANGED
@@ -19,21 +19,20 @@
19
19
  }
20
20
 
21
21
  .ox-tabs-list:after {
22
- @apply block w-full border-b border-secondary;
22
+ @apply border-secondary block w-full border-b;
23
23
  content: ' ';
24
24
  }
25
25
  .ox-tabs.full-width .ox-tabs-list:before {
26
- @apply block w-10 min-w-max flex-shrink-0 border-b border-secondary;
26
+ @apply border-secondary block w-10 min-w-max flex-shrink-0 border-b;
27
27
  content: ' ';
28
28
  }
29
29
 
30
30
  .ox-tabs-panel:focus-visible {
31
- @apply outline outline-2 outline-offset-[1rem] outline-accent-secondary;
31
+ @apply outline-accent-secondary outline outline-2 outline-offset-[1rem];
32
32
  }
33
33
 
34
34
  .ox-tab {
35
- @apply h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2
36
- uppercase !no-underline text-mono-sm text-tertiary border-secondary;
35
+ @apply text-mono-sm text-tertiary border-secondary h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2 uppercase !no-underline;
37
36
  }
38
37
 
39
38
  .ox-tab[data-state='active'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxide/design-system",
3
- "version": "3.0.2",
3
+ "version": "3.0.3--canary.148.17951596811.0",
4
4
  "description": "Home of reusable design assets and token for oxide internal sites",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -34,49 +34,53 @@
34
34
  "author": "Oxide Computer Company <bots@oxidecomputer.com>",
35
35
  "license": "MPL 2.0",
36
36
  "devDependencies": {
37
- "@figma-export/cli": "^6.0.2",
38
- "@figma-export/output-components-as-svg": "^6.0.1",
39
- "@figma-export/output-components-as-svgr": "^6.0.1",
40
- "@figma-export/transform-svg-with-svgo": "^6.0.2",
37
+ "@eslint/eslintrc": "^3.3.1",
38
+ "@eslint/js": "^9.36.0",
39
+ "@figma-export/cli": "^6.2.3",
40
+ "@figma-export/output-components-as-svg": "^6.2.3",
41
+ "@figma-export/output-components-as-svgr": "^6.2.3",
42
+ "@figma-export/transform-svg-with-svgo": "^6.2.3",
43
+ "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
41
44
  "@svgr/plugin-jsx": "^8.1.0",
42
- "@trivago/prettier-plugin-sort-imports": "^3.3.0",
43
- "@types/culori": "^2.1.1",
45
+ "@types/culori": "^4.0.1",
44
46
  "@types/react": "^18.0.28",
45
47
  "@types/react-dom": "^18.0.11",
46
- "@types/svg-sprite": "^0.0.34",
47
- "@typescript-eslint/eslint-plugin": "^5.47.0",
48
- "auto": "^11.0.5",
49
- "culori": "^4.0.1",
50
- "dedent": "^1.5.3",
51
- "eslint": "^8.23.0",
52
- "eslint-config-prettier": "^8.5.0",
53
- "eslint-plugin-prettier": "^4.2.1",
54
- "glob": "^10.3.1",
48
+ "@types/svg-sprite": "^0.0.39",
49
+ "@typescript-eslint/eslint-plugin": "^8.44.1",
50
+ "auto": "^11.3.0",
51
+ "culori": "^4.0.2",
52
+ "dedent": "^1.7.0",
53
+ "eslint": "^9.36.0",
54
+ "eslint-config-prettier": "^10.1.8",
55
+ "eslint-plugin-prettier": "^5.5.4",
56
+ "glob": "^11.0.3",
57
+ "globals": "^16.4.0",
55
58
  "npm-run-all": "^4.1.5",
56
- "prettier": "^2.7.1",
57
- "style-dictionary": "^3.7.1",
58
- "svg-sprite": "^2.0.2",
59
- "token-transformer": "^0.0.26",
60
- "tsup": "^8.4.0",
61
- "tsx": "^4.19.2",
62
- "typescript": "^5.1.6",
59
+ "prettier": "^3.6.2",
60
+ "style-dictionary": "^5.0.4",
61
+ "svg-sprite": "^2.0.4",
62
+ "token-transformer": "^0.0.33",
63
+ "tsup": "^8.5.0",
64
+ "tsx": "^4.20.5",
65
+ "typescript": "^5.9.2",
63
66
  "vite-tsconfig-paths": "^5.1.4",
64
- "vitest": "^3.0.7",
65
- "zx": "^7.2.0"
67
+ "vitest": "^3.2.4",
68
+ "zx": "^8.8.3"
66
69
  },
67
70
  "peerDependencies": {
68
71
  "@asciidoctor/core": "^3.0.0",
69
- "@oxide/react-asciidoc": "^1.0.4",
72
+ "@oxide/react-asciidoc": "^1.3.0",
70
73
  "react": ">=18.0.0",
71
74
  "react-dom": ">=18.0.0"
72
75
  },
73
76
  "dependencies": {
74
- "@floating-ui/react": "^0.27.4",
75
- "@headlessui/react": "^2.2.0",
76
- "@radix-ui/react-accordion": "^1.2.2",
77
- "@radix-ui/react-tabs": "^1.1.3",
77
+ "@floating-ui/react": "^0.27.16",
78
+ "@headlessui/react": "^2.2.8",
79
+ "@radix-ui/react-accordion": "^1.2.12",
80
+ "@radix-ui/react-tabs": "^1.1.13",
78
81
  "classnames": "^2.5.1",
79
- "shiki": "^1.24.0"
82
+ "prettier-plugin-tailwindcss": "^0.6.14",
83
+ "shiki": "^3.13.0"
80
84
  },
81
85
  "files": [
82
86
  "styles/dist/*.css",
package/styles/dist/blue.css CHANGED
@@ -5,9 +5,7 @@
5
5
  --surface-secondary: var(--color-neutral-100);
6
6
  --surface-tertiary: var(--color-neutral-200);
7
7
  --surface-disabled: var(--color-neutral-100);
8
- --surface-scrim: color(
9
- display-p3 0.0314 0.0588 0.0667 / 0.4
10
- ); /* #080f1166 with alpha 0.4 */
8
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
11
9
  --surface-accent: var(--theme-accent-800);
12
10
  --surface-accent-hover: var(--theme-accent-700);
13
11
  --surface-accent-secondary: var(--theme-accent-200);
@@ -94,18 +92,10 @@
94
92
  --stroke-info-secondary: var(--theme-info-600);
95
93
  --stroke-info-tertiary: var(--theme-info-400);
96
94
  --stroke-info-quaternary: var(--theme-info-300);
97
- --chart-fill-area-primary: color(
98
- display-p3 0.4706 0.5412 0.8667 / 0.7
99
- ); /* #788addb3 with alpha 0.7019607843137254 */
100
- --chart-fill-area-secondary: color(
101
- display-p3 0.4039 0.4627 0.7333 / 0.7
102
- ); /* #6776bbb3 with alpha 0.7019607843137254 */
103
- --chart-fill-area-tertiary: color(
104
- display-p3 0.3176 0.3569 0.5608 / 0.7
105
- ); /* #515b8fb3 with alpha 0.7019607843137254 */
106
- --chart-fill-area-quaternary: color(
107
- display-p3 0.2353 0.2627 0.4 / 0.2
108
- ); /* #3c436633 with alpha 0.2 */
95
+ --chart-fill-area-primary: color(display-p3 0.4706 0.5412 0.8667 / 0.70); /* #788addb3 with alpha 0.7019607843137254 */;
96
+ --chart-fill-area-secondary: color(display-p3 0.4039 0.4627 0.7333 / 0.70); /* #6776bbb3 with alpha 0.7019607843137254 */;
97
+ --chart-fill-area-tertiary: color(display-p3 0.3176 0.3569 0.5608 / 0.70); /* #515b8fb3 with alpha 0.7019607843137254 */;
98
+ --chart-fill-area-quaternary: color(display-p3 0.2353 0.2627 0.4000 / 0.20); /* #3c436633 with alpha 0.2 */;
109
99
  --chart-fill-item-primary: var(--theme-accent-700);
110
100
  --chart-fill-item-secondary: var(--theme-accent-600);
111
101
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -119,16 +109,10 @@
119
109
  --chart-stroke-line-secondary: var(--color-yellow-600);
120
110
  --chart-stroke-line-tertiary: var(--color-red-600);
121
111
  --chart-stroke-line-quaternary: var(--color-blue-600);
122
- --chart-stroke-y-axis: color(
123
- display-p3 0.1765 0.2 0.2078 / 0.4
124
- ); /* #2d333566 with alpha 0.4 */
125
- --chart-stroke-item: color(
126
- display-p3 0.4706 0.5412 0.8667 / 0.4
127
- ); /* #788add66 with alpha 0.4 */
112
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
113
+ --chart-stroke-item: color(display-p3 0.4706 0.5412 0.8667 / 0.40); /* #788add66 with alpha 0.4 */;
128
114
  --chart-stroke-item-inactive: var(--color-neutral-200);
129
- --chart-stroke-error: color(
130
- display-p3 0.8549 0.3804 0.4667 / 0.4
131
- ); /* #da617766 with alpha 0.4 */
115
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
132
116
  --theme-accent-100: var(--color-blue-100);
133
117
  --theme-accent-200: var(--color-blue-200);
134
118
  --theme-accent-300: var(--color-blue-300);
@@ -177,4 +161,4 @@
177
161
  --theme-info-600: var(--color-blue-600);
178
162
  --theme-info-700: var(--color-blue-700);
179
163
  --theme-info-800: var(--color-blue-800);
180
- }
164
+ }
package/styles/dist/green.css CHANGED
@@ -5,9 +5,7 @@
5
5
  --surface-secondary: var(--color-neutral-100);
6
6
  --surface-tertiary: var(--color-neutral-200);
7
7
  --surface-disabled: var(--color-neutral-100);
8
- --surface-scrim: color(
9
- display-p3 0.0314 0.0588 0.0667 / 0.4
10
- ); /* #080f1166 with alpha 0.4 */
8
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
11
9
  --surface-accent: var(--theme-accent-800);
12
10
  --surface-accent-hover: var(--theme-accent-700);
13
11
  --surface-accent-secondary: var(--theme-accent-200);
@@ -94,18 +92,10 @@
94
92
  --stroke-info-secondary: var(--theme-info-600);
95
93
  --stroke-info-tertiary: var(--theme-info-400);
96
94
  --stroke-info-quaternary: var(--theme-info-300);
97
- --chart-fill-area-primary: color(
98
- display-p3 0.1255 0.6392 0.4235 / 0.7
99
- ); /* #20a36cb3 with alpha 0.7019607843137254 */
100
- --chart-fill-area-secondary: color(
101
- display-p3 0.1373 0.5412 0.3686 / 0.7
102
- ); /* #238a5eb3 with alpha 0.7019607843137254 */
103
- --chart-fill-area-tertiary: color(
104
- display-p3 0.1373 0.4157 0.298 / 0.7
105
- ); /* #236a4cb3 with alpha 0.7019607843137254 */
106
- --chart-fill-area-quaternary: color(
107
- display-p3 0.1255 0.302 0.2314 / 0.2
108
- ); /* #204d3b33 with alpha 0.2 */
95
+ --chart-fill-area-primary: color(display-p3 0.1255 0.6392 0.4235 / 0.70); /* #20a36cb3 with alpha 0.7019607843137254 */;
96
+ --chart-fill-area-secondary: color(display-p3 0.1373 0.5412 0.3686 / 0.70); /* #238a5eb3 with alpha 0.7019607843137254 */;
97
+ --chart-fill-area-tertiary: color(display-p3 0.1373 0.4157 0.2980 / 0.70); /* #236a4cb3 with alpha 0.7019607843137254 */;
98
+ --chart-fill-area-quaternary: color(display-p3 0.1255 0.3020 0.2314 / 0.20); /* #204d3b33 with alpha 0.2 */;
109
99
  --chart-fill-item-primary: var(--theme-accent-700);
110
100
  --chart-fill-item-secondary: var(--theme-accent-600);
111
101
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -119,16 +109,10 @@
119
109
  --chart-stroke-line-secondary: var(--color-yellow-600);
120
110
  --chart-stroke-line-tertiary: var(--color-red-600);
121
111
  --chart-stroke-line-quaternary: var(--color-blue-600);
122
- --chart-stroke-y-axis: color(
123
- display-p3 0.1765 0.2 0.2078 / 0.4
124
- ); /* #2d333566 with alpha 0.4 */
125
- --chart-stroke-item: color(
126
- display-p3 0.1255 0.6392 0.4235 / 0.4
127
- ); /* #20a36c66 with alpha 0.4 */
112
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
113
+ --chart-stroke-item: color(display-p3 0.1255 0.6392 0.4235 / 0.40); /* #20a36c66 with alpha 0.4 */;
128
114
  --chart-stroke-item-inactive: var(--color-neutral-200);
129
- --chart-stroke-error: color(
130
- display-p3 0.8549 0.3804 0.4667 / 0.4
131
- ); /* #da617766 with alpha 0.4 */
115
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
132
116
  --theme-accent-100: var(--color-green-100);
133
117
  --theme-accent-200: var(--color-green-200);
134
118
  --theme-accent-300: var(--color-green-300);
@@ -177,4 +161,4 @@
177
161
  --theme-info-600: var(--color-blue-600);
178
162
  --theme-info-700: var(--color-blue-700);
179
163
  --theme-info-800: var(--color-blue-800);
180
- }
164
+ }
package/styles/dist/main.css CHANGED
@@ -1,32 +1,32 @@
1
1
  /* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
2
- @import 'tailwindcss';
2
+ @import "tailwindcss";
3
3
 
4
4
  :root {
5
- --color-neutral-1000: color(display-p3 0.9961 1 1); /* #FEFFFF */
6
- --color-neutral-900: color(display-p3 0.8431 0.8471 0.851); /* #D7D8D9 */
5
+ --color-neutral-1000: color(display-p3 0.9961 1.0000 1.0000); /* #FEFFFF */
6
+ --color-neutral-900: color(display-p3 0.8431 0.8471 0.8510); /* #D7D8D9 */
7
7
  --color-neutral-800: color(display-p3 0.7216 0.7333 0.7373); /* #B8BBBC */
8
8
  --color-neutral-700: color(display-p3 0.6314 0.6431 0.6471); /* #A1A4A5 */
9
9
  --color-neutral-600: color(display-p3 0.4941 0.5137 0.5216); /* #7e8385 */
10
10
  --color-neutral-500: color(display-p3 0.3569 0.3725 0.3804); /* #5B5F61 */
11
- --color-neutral-400: color(display-p3 0.251 0.2745 0.2784); /* #404647 */
12
- --color-neutral-300: color(display-p3 0.1765 0.2 0.2078); /* #2D3335 */
11
+ --color-neutral-400: color(display-p3 0.2510 0.2745 0.2784); /* #404647 */
12
+ --color-neutral-300: color(display-p3 0.1765 0.2000 0.2078); /* #2D3335 */
13
13
  --color-neutral-200: color(display-p3 0.1098 0.1333 0.1451); /* #1C2225 */
14
14
  --color-neutral-100: color(display-p3 0.0784 0.1059 0.1137); /* #141B1D */
15
15
  --color-neutral-50: color(display-p3 0.0627 0.0863 0.0941); /* #101618 */
16
16
  --color-neutral-0: color(display-p3 0.0314 0.0588 0.0667); /* #080F11 */
17
- --color-blue-800: color(display-p3 0.5451 0.6314 1); /* #8BA1FF */
17
+ --color-blue-800: color(display-p3 0.5451 0.6314 1.0000); /* #8BA1FF */
18
18
  --color-blue-700: color(display-p3 0.4706 0.5412 0.8667); /* #788ADD */
19
19
  --color-blue-600: color(display-p3 0.4039 0.4627 0.7333); /* #6776BB */
20
20
  --color-blue-500: color(display-p3 0.3176 0.3569 0.5608); /* #515B8F */
21
- --color-blue-400: color(display-p3 0.2353 0.2627 0.4); /* #3C4366 */
21
+ --color-blue-400: color(display-p3 0.2353 0.2627 0.4000); /* #3C4366 */
22
22
  --color-blue-300: color(display-p3 0.1765 0.1882 0.2824); /* #2D3048 */
23
23
  --color-blue-200: color(display-p3 0.1176 0.1255 0.1765); /* #1E202D */
24
24
  --color-blue-100: color(display-p3 0.0902 0.0941 0.1294); /* #171821 */
25
25
  --color-purple-800: color(display-p3 0.7451 0.5843 0.9216); /* #BE95EB */
26
- --color-purple-700: color(display-p3 0.6392 0.502 0.7961); /* #A380CB */
26
+ --color-purple-700: color(display-p3 0.6392 0.5020 0.7961); /* #A380CB */
27
27
  --color-purple-600: color(display-p3 0.5451 0.4275 0.6745); /* #8B6DAC */
28
28
  --color-purple-500: color(display-p3 0.4235 0.3333 0.5176); /* #6C5584 */
29
- --color-purple-400: color(display-p3 0.302 0.2431 0.3686); /* #4D3E5E */
29
+ --color-purple-400: color(display-p3 0.3020 0.2431 0.3686); /* #4D3E5E */
30
30
  --color-purple-300: color(display-p3 0.2196 0.1765 0.2627); /* #382D43 */
31
31
  --color-purple-200: color(display-p3 0.1451 0.1216 0.1686); /* #251F2B */
32
32
  --color-purple-100: color(display-p3 0.1176 0.0941 0.1333); /* #1E1822 */
@@ -39,30 +39,28 @@
39
39
  --color-red-200: color(display-p3 0.1373 0.0824 0.0902); /* #231517 */
40
40
  --color-red-100: color(display-p3 0.1176 0.0745 0.0784); /* #1E1314 */
41
41
  --color-yellow-800: color(display-p3 0.9608 0.7255 0.2667); /* #F5B944 */
42
- --color-yellow-700: color(display-p3 0.7922 0.6 0.2314); /* #CA993B */
43
- --color-yellow-600: color(display-p3 0.6 0.4549 0.1882); /* #997430 */
42
+ --color-yellow-700: color(display-p3 0.7922 0.6000 0.2314); /* #CA993B */
43
+ --color-yellow-600: color(display-p3 0.6000 0.4549 0.1882); /* #997430 */
44
44
  --color-yellow-500: color(display-p3 0.4627 0.3529 0.1529); /* #765A27 */
45
45
  --color-yellow-400: color(display-p3 0.3333 0.2588 0.1216); /* #55421F */
46
- --color-yellow-300: color(display-p3 0.2392 0.1882 0.098); /* #3D3019 */
46
+ --color-yellow-300: color(display-p3 0.2392 0.1882 0.0980); /* #3D3019 */
47
47
  --color-yellow-200: color(display-p3 0.1608 0.1255 0.0745); /* #292013 */
48
- --color-yellow-100: color(display-p3 0.1255 0.098 0.0588); /* #20190F */
48
+ --color-yellow-100: color(display-p3 0.1255 0.0980 0.0588); /* #20190F */
49
49
  --color-green-800: color(display-p3 0.2824 0.8353 0.5922); /* #48d597 */
50
50
  --color-green-700: color(display-p3 0.1255 0.6392 0.4235); /* #20A36C */
51
51
  --color-green-600: color(display-p3 0.1373 0.5412 0.3686); /* #238A5E */
52
- --color-green-500: color(display-p3 0.1373 0.4157 0.298); /* #236A4C */
53
- --color-green-400: color(display-p3 0.1255 0.302 0.2314); /* #204D3B */
52
+ --color-green-500: color(display-p3 0.1373 0.4157 0.2980); /* #236A4C */
53
+ --color-green-400: color(display-p3 0.1255 0.3020 0.2314); /* #204D3B */
54
54
  --color-green-300: color(display-p3 0.1098 0.2157 0.1804); /* #1C372E */
55
55
  --color-green-200: color(display-p3 0.0863 0.1373 0.1333); /* #162322 */
56
- --color-green-100: color(display-p3 0.0745 0.102 0.1098); /* #131A1C */
56
+ --color-green-100: color(display-p3 0.0745 0.1020 0.1098); /* #131A1C */
57
57
  --surface-default: var(--color-neutral-0);
58
58
  --surface-hover: var(--color-neutral-200);
59
59
  --surface-raise: var(--color-neutral-50);
60
60
  --surface-secondary: var(--color-neutral-100);
61
61
  --surface-tertiary: var(--color-neutral-200);
62
62
  --surface-disabled: var(--color-neutral-100);
63
- --surface-scrim: color(
64
- display-p3 0.0314 0.0588 0.0667 / 0.4
65
- ); /* #080f1166 with alpha 0.4 */
63
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
66
64
  --surface-accent: var(--theme-accent-800);
67
65
  --surface-accent-hover: var(--theme-accent-700);
68
66
  --surface-accent-secondary: var(--theme-accent-200);
@@ -149,18 +147,10 @@
149
147
  --stroke-info-secondary: var(--theme-info-600);
150
148
  --stroke-info-tertiary: var(--theme-info-400);
151
149
  --stroke-info-quaternary: var(--theme-info-300);
152
- --chart-fill-area-primary: color(
153
- display-p3 0.1255 0.6392 0.4235 / 0.7
154
- ); /* #20a36cb3 with alpha 0.7019607843137254 */
155
- --chart-fill-area-secondary: color(
156
- display-p3 0.1373 0.5412 0.3686 / 0.7
157
- ); /* #238a5eb3 with alpha 0.7019607843137254 */
158
- --chart-fill-area-tertiary: color(
159
- display-p3 0.1373 0.4157 0.298 / 0.7
160
- ); /* #236a4cb3 with alpha 0.7019607843137254 */
161
- --chart-fill-area-quaternary: color(
162
- display-p3 0.1255 0.302 0.2314 / 0.2
163
- ); /* #204d3b33 with alpha 0.2 */
150
+ --chart-fill-area-primary: color(display-p3 0.1255 0.6392 0.4235 / 0.70); /* #20a36cb3 with alpha 0.7019607843137254 */;
151
+ --chart-fill-area-secondary: color(display-p3 0.1373 0.5412 0.3686 / 0.70); /* #238a5eb3 with alpha 0.7019607843137254 */;
152
+ --chart-fill-area-tertiary: color(display-p3 0.1373 0.4157 0.2980 / 0.70); /* #236a4cb3 with alpha 0.7019607843137254 */;
153
+ --chart-fill-area-quaternary: color(display-p3 0.1255 0.3020 0.2314 / 0.20); /* #204d3b33 with alpha 0.2 */;
164
154
  --chart-fill-item-primary: var(--theme-accent-700);
165
155
  --chart-fill-item-secondary: var(--theme-accent-600);
166
156
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -174,16 +164,10 @@
174
164
  --chart-stroke-line-secondary: var(--color-yellow-600);
175
165
  --chart-stroke-line-tertiary: var(--color-red-600);
176
166
  --chart-stroke-line-quaternary: var(--color-blue-600);
177
- --chart-stroke-y-axis: color(
178
- display-p3 0.1765 0.2 0.2078 / 0.4
179
- ); /* #2d333566 with alpha 0.4 */
180
- --chart-stroke-item: color(
181
- display-p3 0.1255 0.6392 0.4235 / 0.4
182
- ); /* #20a36c66 with alpha 0.4 */
167
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
168
+ --chart-stroke-item: color(display-p3 0.1255 0.6392 0.4235 / 0.40); /* #20a36c66 with alpha 0.4 */;
183
169
  --chart-stroke-item-inactive: var(--color-neutral-200);
184
- --chart-stroke-error: color(
185
- display-p3 0.8549 0.3804 0.4667 / 0.4
186
- ); /* #da617766 with alpha 0.4 */
170
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
187
171
  --theme-accent-100: var(--color-green-100);
188
172
  --theme-accent-200: var(--color-green-200);
189
173
  --theme-accent-300: var(--color-green-300);
@@ -236,7 +220,7 @@
236
220
 
237
221
  @theme inline {
238
222
  --font-sans: SuisseIntl, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
239
- --font-mono: 'GT America Mono', monospace;
223
+ --font-mono: "GT America Mono", monospace;
240
224
 
241
225
  --background-color-default: var(--surface-default);
242
226
  --background-color-hover: var(--surface-hover);
@@ -252,9 +236,7 @@
252
236
  --background-color-destructive: var(--surface-destructive);
253
237
  --background-color-destructive-hover: var(--surface-destructive-hover);
254
238
  --background-color-destructive-secondary: var(--surface-destructive-secondary);
255
- --background-color-destructive-secondary-hover: var(
256
- --surface-destructive-secondary-hover
257
- );
239
+ --background-color-destructive-secondary-hover: var(--surface-destructive-secondary-hover);
258
240
  --background-color-notice: var(--surface-notice);
259
241
  --background-color-notice-hover: var(--surface-notice-hover);
260
242
  --background-color-notice-secondary: var(--surface-notice-secondary);
@@ -429,12 +411,10 @@
429
411
  box-shadow: 0px 1px 2px #00000099;
430
412
  }
431
413
  @utility elevation-2 {
432
- box-shadow: 0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033,
433
- 0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066;
414
+ box-shadow: 0px 2.188px 4.625px #00000021,0px 10px 13px #00000033,0px 25.313px 34.875px #00000045,0px 50px 80px #00000066;
434
415
  }
435
416
  @utility elevation-3 {
436
- box-shadow: 0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033,
437
- 0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066;
417
+ box-shadow: 0px 4.375px 4.625px #00000021,0px 20px 13px #00000033,0px 50.625px 34.875px #00000045,0px 100px 80px #00000066;
438
418
  }
439
419
 
440
420
  @utility text-mono-xs {
@@ -443,9 +423,7 @@
443
423
  line-height: 1rem;
444
424
  font-size: 0.6875rem;
445
425
  letter-spacing: 0.04rem;
446
- text-transform: uppercase;
447
- font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
448
- 'calt' off;
426
+ text-transform: uppercase; font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
449
427
  }
450
428
  @utility text-mono-sm {
451
429
  font-family: var(--font-mono);
@@ -453,18 +431,14 @@
453
431
  line-height: 1rem;
454
432
  font-size: 0.75rem;
455
433
  letter-spacing: 0.04rem;
456
- text-transform: uppercase;
457
- font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
458
- 'calt' off;
434
+ text-transform: uppercase; font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
459
435
  }
460
436
  @utility text-mono-code {
461
437
  font-family: var(--font-mono);
462
438
  font-weight: 400;
463
439
  line-height: 1rem;
464
440
  font-size: 0.75rem;
465
- letter-spacing: 0rem;
466
- font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
467
- 'calt' off;
441
+ letter-spacing: 0rem; font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
468
442
  }
469
443
  @utility text-mono-md {
470
444
  font-family: var(--font-mono);
@@ -472,9 +446,7 @@
472
446
  line-height: 1.25rem;
473
447
  font-size: 0.875rem;
474
448
  letter-spacing: 0.04rem;
475
- text-transform: uppercase;
476
- font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
477
- 'calt' off;
449
+ text-transform: uppercase; font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
478
450
  }
479
451
  @utility text-sans-sm {
480
452
  font-family: var(--font-sans);
@@ -552,4 +524,4 @@
552
524
  line-height: 1.625rem;
553
525
  font-size: 1.125rem;
554
526
  letter-spacing: 0.02rem;
555
- }
527
+ }
package/styles/dist/purple.css CHANGED
@@ -5,9 +5,7 @@
5
5
  --surface-secondary: var(--color-neutral-100);
6
6
  --surface-tertiary: var(--color-neutral-200);
7
7
  --surface-disabled: var(--color-neutral-100);
8
- --surface-scrim: color(
9
- display-p3 0.0314 0.0588 0.0667 / 0.4
10
- ); /* #080f1166 with alpha 0.4 */
8
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
11
9
  --surface-accent: var(--theme-accent-800);
12
10
  --surface-accent-hover: var(--theme-accent-700);
13
11
  --surface-accent-secondary: var(--theme-accent-200);
@@ -94,18 +92,10 @@
94
92
  --stroke-info-secondary: var(--theme-info-600);
95
93
  --stroke-info-tertiary: var(--theme-info-400);
96
94
  --stroke-info-quaternary: var(--theme-info-300);
97
- --chart-fill-area-primary: color(
98
- display-p3 0.6392 0.502 0.7961 / 0.7
99
- ); /* #a380cbb3 with alpha 0.7019607843137254 */
100
- --chart-fill-area-secondary: color(
101
- display-p3 0.5451 0.4275 0.6745 / 0.7
102
- ); /* #8b6dacb3 with alpha 0.7019607843137254 */
103
- --chart-fill-area-tertiary: color(
104
- display-p3 0.4235 0.3333 0.5176 / 0.7
105
- ); /* #6c5584b3 with alpha 0.7019607843137254 */
106
- --chart-fill-area-quaternary: color(
107
- display-p3 0.302 0.2431 0.3686 / 0.2
108
- ); /* #4d3e5e33 with alpha 0.2 */
95
+ --chart-fill-area-primary: color(display-p3 0.6392 0.5020 0.7961 / 0.70); /* #a380cbb3 with alpha 0.7019607843137254 */;
96
+ --chart-fill-area-secondary: color(display-p3 0.5451 0.4275 0.6745 / 0.70); /* #8b6dacb3 with alpha 0.7019607843137254 */;
97
+ --chart-fill-area-tertiary: color(display-p3 0.4235 0.3333 0.5176 / 0.70); /* #6c5584b3 with alpha 0.7019607843137254 */;
98
+ --chart-fill-area-quaternary: color(display-p3 0.3020 0.2431 0.3686 / 0.20); /* #4d3e5e33 with alpha 0.2 */;
109
99
  --chart-fill-item-primary: var(--theme-accent-700);
110
100
  --chart-fill-item-secondary: var(--theme-accent-600);
111
101
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -119,16 +109,10 @@
119
109
  --chart-stroke-line-secondary: var(--color-yellow-600);
120
110
  --chart-stroke-line-tertiary: var(--color-red-600);
121
111
  --chart-stroke-line-quaternary: var(--color-blue-600);
122
- --chart-stroke-y-axis: color(
123
- display-p3 0.1765 0.2 0.2078 / 0.4
124
- ); /* #2d333566 with alpha 0.4 */
125
- --chart-stroke-item: color(
126
- display-p3 0.6392 0.502 0.7961 / 0.4
127
- ); /* #a380cb66 with alpha 0.4 */
112
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
113
+ --chart-stroke-item: color(display-p3 0.6392 0.5020 0.7961 / 0.40); /* #a380cb66 with alpha 0.4 */;
128
114
  --chart-stroke-item-inactive: var(--color-neutral-200);
129
- --chart-stroke-error: color(
130
- display-p3 0.8549 0.3804 0.4667 / 0.4
131
- ); /* #da617766 with alpha 0.4 */
115
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
132
116
  --theme-accent-100: var(--color-purple-100);
133
117
  --theme-accent-200: var(--color-purple-200);
134
118
  --theme-accent-300: var(--color-purple-300);
@@ -177,4 +161,4 @@
177
161
  --theme-info-600: var(--color-blue-600);
178
162
  --theme-info-700: var(--color-blue-700);
179
163
  --theme-info-800: var(--color-blue-800);
180
- }
164
+ }
package/styles/dist/red.css CHANGED
@@ -5,9 +5,7 @@
5
5
  --surface-secondary: var(--color-neutral-100);
6
6
  --surface-tertiary: var(--color-neutral-200);
7
7
  --surface-disabled: var(--color-neutral-100);
8
- --surface-scrim: color(
9
- display-p3 0.0314 0.0588 0.0667 / 0.4
10
- ); /* #080f1166 with alpha 0.4 */
8
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
11
9
  --surface-accent: var(--theme-accent-800);
12
10
  --surface-accent-hover: var(--theme-accent-700);
13
11
  --surface-accent-secondary: var(--theme-accent-200);
@@ -94,18 +92,10 @@
94
92
  --stroke-info-secondary: var(--theme-info-600);
95
93
  --stroke-info-tertiary: var(--theme-info-400);
96
94
  --stroke-info-quaternary: var(--theme-info-300);
97
- --chart-fill-area-primary: color(
98
- display-p3 0.8549 0.3804 0.4667 / 0.7
99
- ); /* #da6177b3 with alpha 0.7019607843137254 */
100
- --chart-fill-area-secondary: color(
101
- display-p3 0.7647 0.3412 0.4157 / 0.7
102
- ); /* #c3576ab3 with alpha 0.7019607843137254 */
103
- --chart-fill-area-tertiary: color(
104
- display-p3 0.5843 0.2706 0.3255 / 0.7
105
- ); /* #954553b3 with alpha 0.7019607843137254 */
106
- --chart-fill-area-quaternary: color(
107
- display-p3 0.4157 0.2039 0.2353 / 0.2
108
- ); /* #6a343c33 with alpha 0.2 */
95
+ --chart-fill-area-primary: color(display-p3 0.8549 0.3804 0.4667 / 0.70); /* #da6177b3 with alpha 0.7019607843137254 */;
96
+ --chart-fill-area-secondary: color(display-p3 0.7647 0.3412 0.4157 / 0.70); /* #c3576ab3 with alpha 0.7019607843137254 */;
97
+ --chart-fill-area-tertiary: color(display-p3 0.5843 0.2706 0.3255 / 0.70); /* #954553b3 with alpha 0.7019607843137254 */;
98
+ --chart-fill-area-quaternary: color(display-p3 0.4157 0.2039 0.2353 / 0.20); /* #6a343c33 with alpha 0.2 */;
109
99
  --chart-fill-item-primary: var(--theme-accent-700);
110
100
  --chart-fill-item-secondary: var(--theme-accent-600);
111
101
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -119,16 +109,10 @@
119
109
  --chart-stroke-line-secondary: var(--color-yellow-600);
120
110
  --chart-stroke-line-tertiary: var(--color-red-600);
121
111
  --chart-stroke-line-quaternary: var(--color-blue-600);
122
- --chart-stroke-y-axis: color(
123
- display-p3 0.1765 0.2 0.2078 / 0.4
124
- ); /* #2d333566 with alpha 0.4 */
125
- --chart-stroke-item: color(
126
- display-p3 0.8549 0.3804 0.4667 / 0.4
127
- ); /* #da617766 with alpha 0.4 */
112
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
113
+ --chart-stroke-item: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
128
114
  --chart-stroke-item-inactive: var(--color-neutral-200);
129
- --chart-stroke-error: color(
130
- display-p3 0.8549 0.3804 0.4667 / 0.4
131
- ); /* #da617766 with alpha 0.4 */
115
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
132
116
  --theme-accent-100: var(--color-red-100);
133
117
  --theme-accent-200: var(--color-red-200);
134
118
  --theme-accent-300: var(--color-red-300);
@@ -177,4 +161,4 @@
177
161
  --theme-info-600: var(--color-blue-600);
178
162
  --theme-info-700: var(--color-blue-700);
179
163
  --theme-info-800: var(--color-blue-800);
180
- }
164
+ }
package/styles/dist/yellow.css CHANGED
@@ -5,9 +5,7 @@
5
5
  --surface-secondary: var(--color-neutral-100);
6
6
  --surface-tertiary: var(--color-neutral-200);
7
7
  --surface-disabled: var(--color-neutral-100);
8
- --surface-scrim: color(
9
- display-p3 0.0314 0.0588 0.0667 / 0.4
10
- ); /* #080f1166 with alpha 0.4 */
8
+ --surface-scrim: color(display-p3 0.0314 0.0588 0.0667 / 0.40); /* #080f1166 with alpha 0.4 */;
11
9
  --surface-accent: var(--theme-accent-800);
12
10
  --surface-accent-hover: var(--theme-accent-700);
13
11
  --surface-accent-secondary: var(--theme-accent-200);
@@ -94,18 +92,10 @@
94
92
  --stroke-info-secondary: var(--theme-info-600);
95
93
  --stroke-info-tertiary: var(--theme-info-400);
96
94
  --stroke-info-quaternary: var(--theme-info-300);
97
- --chart-fill-area-primary: color(
98
- display-p3 0.7922 0.6 0.2314 / 0.7
99
- ); /* #ca993bb3 with alpha 0.7019607843137254 */
100
- --chart-fill-area-secondary: color(
101
- display-p3 0.6 0.4549 0.1882 / 0.7
102
- ); /* #997430b3 with alpha 0.7019607843137254 */
103
- --chart-fill-area-tertiary: color(
104
- display-p3 0.4627 0.3529 0.1529 / 0.7
105
- ); /* #765a27b3 with alpha 0.7019607843137254 */
106
- --chart-fill-area-quaternary: color(
107
- display-p3 0.3333 0.2588 0.1216 / 0.2
108
- ); /* #55421f33 with alpha 0.2 */
95
+ --chart-fill-area-primary: color(display-p3 0.7922 0.6000 0.2314 / 0.70); /* #ca993bb3 with alpha 0.7019607843137254 */;
96
+ --chart-fill-area-secondary: color(display-p3 0.6000 0.4549 0.1882 / 0.70); /* #997430b3 with alpha 0.7019607843137254 */;
97
+ --chart-fill-area-tertiary: color(display-p3 0.4627 0.3529 0.1529 / 0.70); /* #765a27b3 with alpha 0.7019607843137254 */;
98
+ --chart-fill-area-quaternary: color(display-p3 0.3333 0.2588 0.1216 / 0.20); /* #55421f33 with alpha 0.2 */;
109
99
  --chart-fill-item-primary: var(--theme-accent-700);
110
100
  --chart-fill-item-secondary: var(--theme-accent-600);
111
101
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -119,16 +109,10 @@
119
109
  --chart-stroke-line-secondary: var(--color-yellow-600);
120
110
  --chart-stroke-line-tertiary: var(--color-red-600);
121
111
  --chart-stroke-line-quaternary: var(--color-blue-600);
122
- --chart-stroke-y-axis: color(
123
- display-p3 0.1765 0.2 0.2078 / 0.4
124
- ); /* #2d333566 with alpha 0.4 */
125
- --chart-stroke-item: color(
126
- display-p3 0.7922 0.6 0.2314 / 0.4
127
- ); /* #ca993b66 with alpha 0.4 */
112
+ --chart-stroke-y-axis: color(display-p3 0.1765 0.2000 0.2078 / 0.40); /* #2d333566 with alpha 0.4 */;
113
+ --chart-stroke-item: color(display-p3 0.7922 0.6000 0.2314 / 0.40); /* #ca993b66 with alpha 0.4 */;
128
114
  --chart-stroke-item-inactive: var(--color-neutral-200);
129
- --chart-stroke-error: color(
130
- display-p3 0.8549 0.3804 0.4667 / 0.4
131
- ); /* #da617766 with alpha 0.4 */
115
+ --chart-stroke-error: color(display-p3 0.8549 0.3804 0.4667 / 0.40); /* #da617766 with alpha 0.4 */;
132
116
  --theme-accent-100: var(--color-yellow-100);
133
117
  --theme-accent-200: var(--color-yellow-200);
134
118
  --theme-accent-300: var(--color-yellow-300);
@@ -177,4 +161,4 @@
177
161
  --theme-info-600: var(--color-blue-600);
178
162
  --theme-info-700: var(--color-blue-700);
179
163
  --theme-info-800: var(--color-blue-800);
180
- }
164
+ }