@oxide/design-system 2.8.0--canary.437591d.0 → 2.8.1--canary.2cfc995.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 (7) hide show
  1. package/package.json +1 -1
  2. package/styles/dist/blue.css +24 -8
  3. package/styles/dist/green.css +24 -8
  4. package/styles/dist/main.css +24 -8
  5. package/styles/dist/purple.css +24 -8
  6. package/styles/dist/red.css +24 -8
  7. package/styles/dist/yellow.css +24 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxide/design-system",
3
- "version": "2.8.0--canary.437591d.0",
3
+ "version": "2.8.1--canary.2cfc995.0",
4
4
  "description": "Home of reusable design assets and token for oxide internal sites",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/styles/dist/blue.css CHANGED
@@ -5,7 +5,9 @@
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: var(--color-neutral-0);
8
+ --surface-scrim: color(
9
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
10
+ ); /* #080f1166 with alpha 0.4 */
9
11
  --surface-accent: var(--theme-accent-800);
10
12
  --surface-accent-hover: var(--theme-accent-700);
11
13
  --surface-accent-secondary: var(--theme-accent-200);
@@ -92,10 +94,18 @@
92
94
  --stroke-info-secondary: var(--theme-info-600);
93
95
  --stroke-info-tertiary: var(--theme-info-400);
94
96
  --stroke-info-quaternary: var(--theme-info-300);
95
- --chart-fill-area-primary: var(--theme-accent-700);
96
- --chart-fill-area-secondary: var(--theme-accent-600);
97
- --chart-fill-area-tertiary: var(--theme-accent-500);
98
- --chart-fill-area-quaternary: var(--theme-accent-400);
97
+ --chart-fill-area-primary: color(
98
+ display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.7
99
+ ); /* #788addb3 with alpha 0.7 */
100
+ --chart-fill-area-secondary: color(
101
+ display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 / 0.7
102
+ ); /* #6776bbb3 with alpha 0.7 */
103
+ --chart-fill-area-tertiary: color(
104
+ display-p3 0.32502672686325673 0.3556441327376487 0.5459647947277517 / 0.7
105
+ ); /* #515b8fb3 with alpha 0.7 */
106
+ --chart-fill-area-quaternary: color(
107
+ display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 / 0.2
108
+ ); /* #3c436633 with alpha 0.2 */
99
109
  --chart-fill-item-primary: var(--theme-accent-700);
100
110
  --chart-fill-item-secondary: var(--theme-accent-600);
101
111
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -109,10 +119,16 @@
109
119
  --chart-stroke-line-secondary: var(--color-yellow-600);
110
120
  --chart-stroke-line-tertiary: var(--color-red-600);
111
121
  --chart-stroke-line-quaternary: var(--color-blue-600);
112
- --chart-stroke-y-axis: var(--stroke-default);
113
- --chart-stroke-item: var(--theme-accent-700);
122
+ --chart-stroke-y-axis: color(
123
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
124
+ ); /* #2d333566 with alpha 0.4 */
125
+ --chart-stroke-item: color(
126
+ display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.4
127
+ ); /* #788add66 with alpha 0.4 */
114
128
  --chart-stroke-item-inactive: var(--color-neutral-200);
115
- --chart-stroke-error: var(--theme-destructive-700);
129
+ --chart-stroke-error: color(
130
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
131
+ ); /* #da617766 with alpha 0.4 */
116
132
  --theme-accent-100: var(--color-blue-100);
117
133
  --theme-accent-200: var(--color-blue-200);
118
134
  --theme-accent-300: var(--color-blue-300);
package/styles/dist/green.css CHANGED
@@ -5,7 +5,9 @@
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: var(--color-neutral-0);
8
+ --surface-scrim: color(
9
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
10
+ ); /* #080f1166 with alpha 0.4 */
9
11
  --surface-accent: var(--theme-accent-800);
10
12
  --surface-accent-hover: var(--theme-accent-700);
11
13
  --surface-accent-secondary: var(--theme-accent-200);
@@ -92,10 +94,18 @@
92
94
  --stroke-info-secondary: var(--theme-info-600);
93
95
  --stroke-info-tertiary: var(--theme-info-400);
94
96
  --stroke-info-quaternary: var(--theme-info-300);
95
- --chart-fill-area-primary: var(--theme-accent-700);
96
- --chart-fill-area-secondary: var(--theme-accent-600);
97
- --chart-fill-area-tertiary: var(--theme-accent-500);
98
- --chart-fill-area-quaternary: var(--theme-accent-400);
97
+ --chart-fill-area-primary: color(
98
+ display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7
99
+ ); /* #20a36cb3 with alpha 0.7 */
100
+ --chart-fill-area-secondary: color(
101
+ display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7
102
+ ); /* #238a5eb3 with alpha 0.7 */
103
+ --chart-fill-area-tertiary: color(
104
+ display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7
105
+ ); /* #236a4cb3 with alpha 0.7 */
106
+ --chart-fill-area-quaternary: color(
107
+ display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2
108
+ ); /* #204d3b33 with alpha 0.2 */
99
109
  --chart-fill-item-primary: var(--theme-accent-700);
100
110
  --chart-fill-item-secondary: var(--theme-accent-600);
101
111
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -109,10 +119,16 @@
109
119
  --chart-stroke-line-secondary: var(--color-yellow-600);
110
120
  --chart-stroke-line-tertiary: var(--color-red-600);
111
121
  --chart-stroke-line-quaternary: var(--color-blue-600);
112
- --chart-stroke-y-axis: var(--stroke-default);
113
- --chart-stroke-item: var(--theme-accent-700);
122
+ --chart-stroke-y-axis: color(
123
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
124
+ ); /* #2d333566 with alpha 0.4 */
125
+ --chart-stroke-item: color(
126
+ display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4
127
+ ); /* #20a36c66 with alpha 0.4 */
114
128
  --chart-stroke-item-inactive: var(--color-neutral-200);
115
- --chart-stroke-error: var(--theme-destructive-700);
129
+ --chart-stroke-error: color(
130
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
131
+ ); /* #da617766 with alpha 0.4 */
116
132
  --theme-accent-100: var(--color-green-100);
117
133
  --theme-accent-200: var(--color-green-200);
118
134
  --theme-accent-300: var(--color-green-300);
package/styles/dist/main.css CHANGED
@@ -164,7 +164,9 @@
164
164
  --surface-secondary: var(--color-neutral-100);
165
165
  --surface-tertiary: var(--color-neutral-200);
166
166
  --surface-disabled: var(--color-neutral-100);
167
- --surface-scrim: rgba(var(--color-neutral-0), 0.4);
167
+ --surface-scrim: color(
168
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
169
+ ); /* #080f1166 with alpha 0.4 */
168
170
  --surface-accent: var(--theme-accent-800);
169
171
  --surface-accent-hover: var(--theme-accent-700);
170
172
  --surface-accent-secondary: var(--theme-accent-200);
@@ -251,10 +253,18 @@
251
253
  --stroke-info-secondary: var(--theme-info-600);
252
254
  --stroke-info-tertiary: var(--theme-info-400);
253
255
  --stroke-info-quaternary: var(--theme-info-300);
254
- --chart-fill-area-primary: rgba(var(--theme-accent-700), 0.7019607843137254);
255
- --chart-fill-area-secondary: rgba(var(--theme-accent-600), 0.7019607843137254);
256
- --chart-fill-area-tertiary: rgba(var(--theme-accent-500), 0.7019607843137254);
257
- --chart-fill-area-quaternary: rgba(var(--theme-accent-400), 0.2);
256
+ --chart-fill-area-primary: color(
257
+ display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7
258
+ ); /* #20a36cb3 with alpha 0.7 */
259
+ --chart-fill-area-secondary: color(
260
+ display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7
261
+ ); /* #238a5eb3 with alpha 0.7 */
262
+ --chart-fill-area-tertiary: color(
263
+ display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7
264
+ ); /* #236a4cb3 with alpha 0.7 */
265
+ --chart-fill-area-quaternary: color(
266
+ display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2
267
+ ); /* #204d3b33 with alpha 0.2 */
258
268
  --chart-fill-item-primary: var(--theme-accent-700);
259
269
  --chart-fill-item-secondary: var(--theme-accent-600);
260
270
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -268,10 +278,16 @@
268
278
  --chart-stroke-line-secondary: var(--color-yellow-600);
269
279
  --chart-stroke-line-tertiary: var(--color-red-600);
270
280
  --chart-stroke-line-quaternary: var(--color-blue-600);
271
- --chart-stroke-y-axis: rgba(var(--stroke-default), 0.4);
272
- --chart-stroke-item: rgba(var(--theme-accent-700), 0.4);
281
+ --chart-stroke-y-axis: color(
282
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
283
+ ); /* #2d333566 with alpha 0.4 */
284
+ --chart-stroke-item: color(
285
+ display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4
286
+ ); /* #20a36c66 with alpha 0.4 */
273
287
  --chart-stroke-item-inactive: var(--color-neutral-200);
274
- --chart-stroke-error: rgba(var(--theme-destructive-700), 0.4);
288
+ --chart-stroke-error: color(
289
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
290
+ ); /* #da617766 with alpha 0.4 */
275
291
  --theme-accent-100: var(--color-green-100);
276
292
  --theme-accent-200: var(--color-green-200);
277
293
  --theme-accent-300: var(--color-green-300);
package/styles/dist/purple.css CHANGED
@@ -5,7 +5,9 @@
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: var(--color-neutral-0);
8
+ --surface-scrim: color(
9
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
10
+ ); /* #080f1166 with alpha 0.4 */
9
11
  --surface-accent: var(--theme-accent-800);
10
12
  --surface-accent-hover: var(--theme-accent-700);
11
13
  --surface-accent-secondary: var(--theme-accent-200);
@@ -92,10 +94,18 @@
92
94
  --stroke-info-secondary: var(--theme-info-600);
93
95
  --stroke-info-tertiary: var(--theme-info-400);
94
96
  --stroke-info-quaternary: var(--theme-info-300);
95
- --chart-fill-area-primary: var(--theme-accent-700);
96
- --chart-fill-area-secondary: var(--theme-accent-600);
97
- --chart-fill-area-tertiary: var(--theme-accent-500);
98
- --chart-fill-area-quaternary: var(--theme-accent-400);
97
+ --chart-fill-area-primary: color(
98
+ display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.7
99
+ ); /* #a380cbb3 with alpha 0.7 */
100
+ --chart-fill-area-secondary: color(
101
+ display-p3 0.5266029147263402 0.43201348221720354 0.658472257647523 / 0.7
102
+ ); /* #8b6dacb3 with alpha 0.7 */
103
+ --chart-fill-area-tertiary: color(
104
+ display-p3 0.40927836765624315 0.3368069077031495 0.5055688506059814 / 0.7
105
+ ); /* #6c5584b3 with alpha 0.7 */
106
+ --chart-fill-area-quaternary: color(
107
+ display-p3 0.2925207541619176 0.24535487188954597 0.3602153988663625 / 0.2
108
+ ); /* #4d3e5e33 with alpha 0.2 */
99
109
  --chart-fill-item-primary: var(--theme-accent-700);
100
110
  --chart-fill-item-secondary: var(--theme-accent-600);
101
111
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -109,10 +119,16 @@
109
119
  --chart-stroke-line-secondary: var(--color-yellow-600);
110
120
  --chart-stroke-line-tertiary: var(--color-red-600);
111
121
  --chart-stroke-line-quaternary: var(--color-blue-600);
112
- --chart-stroke-y-axis: var(--stroke-default);
113
- --chart-stroke-item: var(--theme-accent-700);
122
+ --chart-stroke-y-axis: color(
123
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
124
+ ); /* #2d333566 with alpha 0.4 */
125
+ --chart-stroke-item: color(
126
+ display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.4
127
+ ); /* #a380cb66 with alpha 0.4 */
114
128
  --chart-stroke-item-inactive: var(--color-neutral-200);
115
- --chart-stroke-error: var(--theme-destructive-700);
129
+ --chart-stroke-error: color(
130
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
131
+ ); /* #da617766 with alpha 0.4 */
116
132
  --theme-accent-100: var(--color-purple-100);
117
133
  --theme-accent-200: var(--color-purple-200);
118
134
  --theme-accent-300: var(--color-purple-300);
package/styles/dist/red.css CHANGED
@@ -5,7 +5,9 @@
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: var(--color-neutral-0);
8
+ --surface-scrim: color(
9
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
10
+ ); /* #080f1166 with alpha 0.4 */
9
11
  --surface-accent: var(--theme-accent-800);
10
12
  --surface-accent-hover: var(--theme-accent-700);
11
13
  --surface-accent-secondary: var(--theme-accent-200);
@@ -92,10 +94,18 @@
92
94
  --stroke-info-secondary: var(--theme-info-600);
93
95
  --stroke-info-tertiary: var(--theme-info-400);
94
96
  --stroke-info-quaternary: var(--theme-info-300);
95
- --chart-fill-area-primary: var(--theme-accent-700);
96
- --chart-fill-area-secondary: var(--theme-accent-600);
97
- --chart-fill-area-tertiary: var(--theme-accent-500);
98
- --chart-fill-area-quaternary: var(--theme-accent-400);
97
+ --chart-fill-area-primary: color(
98
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.7
99
+ ); /* #da6177b3 with alpha 0.7 */
100
+ --chart-fill-area-secondary: color(
101
+ display-p3 0.7123368412346623 0.3659764657543945 0.42018168321468297 / 0.7
102
+ ); /* #c3576ab3 with alpha 0.7 */
103
+ --chart-fill-area-tertiary: color(
104
+ display-p3 0.54467993913213 0.2881585750532095 0.32859275026896756 / 0.7
105
+ ); /* #954553b3 with alpha 0.7 */
106
+ --chart-fill-area-quaternary: color(
107
+ display-p3 0.3880353956012564 0.21503505622273383 0.2377024955644162 / 0.2
108
+ ); /* #6a343c33 with alpha 0.2 */
99
109
  --chart-fill-item-primary: var(--theme-accent-700);
100
110
  --chart-fill-item-secondary: var(--theme-accent-600);
101
111
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -109,10 +119,16 @@
109
119
  --chart-stroke-line-secondary: var(--color-yellow-600);
110
120
  --chart-stroke-line-tertiary: var(--color-red-600);
111
121
  --chart-stroke-line-quaternary: var(--color-blue-600);
112
- --chart-stroke-y-axis: var(--stroke-default);
113
- --chart-stroke-item: var(--theme-accent-700);
122
+ --chart-stroke-y-axis: color(
123
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
124
+ ); /* #2d333566 with alpha 0.4 */
125
+ --chart-stroke-item: color(
126
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
127
+ ); /* #da617766 with alpha 0.4 */
114
128
  --chart-stroke-item-inactive: var(--color-neutral-200);
115
- --chart-stroke-error: var(--theme-destructive-700);
129
+ --chart-stroke-error: color(
130
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
131
+ ); /* #da617766 with alpha 0.4 */
116
132
  --theme-accent-100: var(--color-red-100);
117
133
  --theme-accent-200: var(--color-red-200);
118
134
  --theme-accent-300: var(--color-red-300);
package/styles/dist/yellow.css CHANGED
@@ -5,7 +5,9 @@
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: var(--color-neutral-0);
8
+ --surface-scrim: color(
9
+ display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
10
+ ); /* #080f1166 with alpha 0.4 */
9
11
  --surface-accent: var(--theme-accent-800);
10
12
  --surface-accent-hover: var(--theme-accent-700);
11
13
  --surface-accent-secondary: var(--theme-accent-200);
@@ -92,10 +94,18 @@
92
94
  --stroke-info-secondary: var(--theme-info-600);
93
95
  --stroke-info-tertiary: var(--theme-info-400);
94
96
  --stroke-info-quaternary: var(--theme-info-300);
95
- --chart-fill-area-primary: var(--theme-accent-700);
96
- --chart-fill-area-secondary: var(--theme-accent-600);
97
- --chart-fill-area-tertiary: var(--theme-accent-500);
98
- --chart-fill-area-quaternary: var(--theme-accent-400);
97
+ --chart-fill-area-primary: color(
98
+ display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.7
99
+ ); /* #ca993bb3 with alpha 0.7 */
100
+ --chart-fill-area-secondary: color(
101
+ display-p3 0.577577081670476 0.46066704465450065 0.23478898502532436 / 0.7
102
+ ); /* #997430b3 with alpha 0.7 */
103
+ --chart-fill-area-tertiary: color(
104
+ display-p3 0.4456676007915647 0.3572643913038676 0.1862111103866858 / 0.7
105
+ ); /* #765a27b3 with alpha 0.7 */
106
+ --chart-fill-area-quaternary: color(
107
+ display-p3 0.32158715205107063 0.26170195700266397 0.14269771287346764 / 0.2
108
+ ); /* #55421f33 with alpha 0.2 */
99
109
  --chart-fill-item-primary: var(--theme-accent-700);
100
110
  --chart-fill-item-secondary: var(--theme-accent-600);
101
111
  --chart-fill-item-tertiary: var(--theme-accent-500);
@@ -109,10 +119,16 @@
109
119
  --chart-stroke-line-secondary: var(--color-yellow-600);
110
120
  --chart-stroke-line-tertiary: var(--color-red-600);
111
121
  --chart-stroke-line-quaternary: var(--color-blue-600);
112
- --chart-stroke-y-axis: var(--stroke-default);
113
- --chart-stroke-item: var(--theme-accent-700);
122
+ --chart-stroke-y-axis: color(
123
+ display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
124
+ ); /* #2d333566 with alpha 0.4 */
125
+ --chart-stroke-item: color(
126
+ display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.4
127
+ ); /* #ca993b66 with alpha 0.4 */
114
128
  --chart-stroke-item-inactive: var(--color-neutral-200);
115
- --chart-stroke-error: var(--theme-destructive-700);
129
+ --chart-stroke-error: color(
130
+ display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
131
+ ); /* #da617766 with alpha 0.4 */
116
132
  --theme-accent-100: var(--color-yellow-100);
117
133
  --theme-accent-200: var(--color-yellow-200);
118
134
  --theme-accent-300: var(--color-yellow-300);