@oxide/design-system 6.1.4-canary.dab3ea9 → 6.2.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 (9) hide show
  1. package/dist/asciidoc.css +462 -353
  2. package/dist/button.css +1 -1
  3. package/dist/spinner.css +2 -2
  4. package/dist/tabs.css +2 -2
  5. package/package.json +1 -1
  6. package/styles/dark.css +1 -1
  7. package/styles/light.css +8 -8
  8. package/styles/main.css +84 -56
  9. package/styles/tailwind.css +33 -7
package/dist/button.css CHANGED
@@ -14,7 +14,7 @@ label {
14
14
  }
15
15
  &.ox-button:after {
16
16
  content: '';
17
- @apply absolute bottom-0 left-0 right-0 top-0 rounded-md border border-current/5;
17
+ @apply absolute top-0 right-0 bottom-0 left-0 rounded-md border border-current/5;
18
18
  }
19
19
  &.btn-primary {
20
20
  @apply text-accent bg-accent hover:bg-accent-hover disabled:text-accent/35 disabled:bg-accent;
package/dist/spinner.css CHANGED
@@ -56,11 +56,11 @@
56
56
  }
57
57
 
58
58
  .light .spinner-danger .path {
59
- stroke: var(--color-red-700);
59
+ stroke: var(--color-red-700);
60
60
  }
61
61
 
62
62
  .light .spinner-primary .path {
63
- stroke: var(--color-green-700);
63
+ stroke: var(--color-green-700);
64
64
  }
65
65
 
66
66
  @keyframes rotate {
package/dist/tabs.css CHANGED
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  .ox-tab {
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!;
35
+ @apply text-mono-sm text-tertiary border-secondary h-10 space-x-2 border-b px-1.5 pt-2 pb-1 whitespace-nowrap uppercase no-underline!;
36
36
  }
37
37
 
38
38
  .ox-tab[data-state='active'],
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  .ox-tab > .ox-badge {
56
- @apply -mt-1 select-none text-current;
56
+ @apply -mt-1 text-current select-none;
57
57
  }
58
58
 
59
59
  .ox-tab[data-state='inactive'] > .ox-badge,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxide/design-system",
3
- "version": "6.1.4-canary.dab3ea9",
3
+ "version": "6.2.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/dark.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --surface-secondary: var(--color-neutral-100);
7
7
  --surface-tertiary: var(--color-neutral-300);
8
8
  --surface-disabled: var(--color-neutral-100);
9
- --surface-scrim: oklch(0.162 0.0100 260.0 / 0.4);
9
+ --surface-scrim: oklch(0.162 0.01 260 / 0.4);
10
10
  --surface-accent-alt-inverse: var(--theme-accent-alt-800);
11
11
  --surface-accent-alt: var(--theme-accent-alt-200);
12
12
  --surface-accent-alt-hover: var(--theme-accent-alt-300);
package/styles/light.css CHANGED
@@ -1,11 +1,11 @@
1
- [data-theme="light"] {
1
+ [data-theme='light'] {
2
2
  --surface-default: var(--color-neutral-1300);
3
3
  --surface-hover: var(--color-neutral-1100);
4
4
  --surface-raise: var(--color-neutral-1200);
5
5
  --surface-secondary: var(--color-neutral-1100);
6
6
  --surface-tertiary: var(--color-neutral-1000);
7
7
  --surface-disabled: var(--color-neutral-1100);
8
- --surface-scrim: oklch(0.162 0.0100 260.0 / 0.1);
8
+ --surface-scrim: oklch(0.162 0.01 260 / 0.1);
9
9
  --surface-accent-alt-inverse: var(--theme-accent-alt-800);
10
10
  --surface-accent-alt: var(--theme-accent-alt-1200);
11
11
  --surface-accent-alt-hover: var(--theme-accent-alt-1100);
@@ -112,12 +112,12 @@
112
112
  --syntax-rose: var(--color-red-300);
113
113
  }
114
114
 
115
- [data-theme="light"],
116
- [data-theme="light"] .red-theme,
117
- [data-theme="light"] .yellow-theme,
118
- [data-theme="light"] .blue-theme,
119
- [data-theme="light"] .green-theme,
120
- [data-theme="light"] .purple-theme {
115
+ [data-theme='light'],
116
+ [data-theme='light'] .red-theme,
117
+ [data-theme='light'] .yellow-theme,
118
+ [data-theme='light'] .blue-theme,
119
+ [data-theme='light'] .green-theme,
120
+ [data-theme='light'] .purple-theme {
121
121
  --surface-accent-inverse: var(--theme-accent-800);
122
122
  --surface-accent: var(--theme-accent-1200);
123
123
  --surface-accent-hover: var(--theme-accent-1100);
package/styles/main.css CHANGED
@@ -1,82 +1,82 @@
1
1
  @theme inline {
2
2
  --font-sans: SuisseIntl, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
3
- --font-mono: "GT America Mono", monospace;
3
+ --font-mono: 'GT America Mono', monospace;
4
4
 
5
- --color-neutral-1300: oklch(0.995 0.0001 260.0);
6
- --color-neutral-1200: oklch(0.975 0.0001 260.0);
7
- --color-neutral-1100: oklch(0.950 0.0001 260.0);
8
- --color-neutral-1000: oklch(0.925 0.0001 260.0);
9
- --color-neutral-900: oklch(0.900 0.0001 260.0);
10
- --color-neutral-800: oklch(0.790 0.0011 260.0);
11
- --color-neutral-700: oklch(0.717 0.0021 260.0);
12
- --color-neutral-600: oklch(0.606 0.0031 260.0);
13
- --color-neutral-500: oklch(0.483 0.0041 260.0);
14
- --color-neutral-400: oklch(0.389 0.0050 260.0);
15
- --color-neutral-300: oklch(0.316 0.0060 260.0);
16
- --color-neutral-200: oklch(0.247 0.0070 260.0);
17
- --color-neutral-100: oklch(0.216 0.0080 260.0);
18
- --color-neutral-50: oklch(0.195 0.0090 260.0);
19
- --color-neutral-0: oklch(0.162 0.0100 260.0);
20
- --color-blue-1300: oklch(0.950 0.0194 272.0);
21
- --color-blue-1200: oklch(0.922 0.0390 272.0);
22
- --color-blue-1100: oklch(0.892 0.0598 272.0);
23
- --color-blue-1000: oklch(0.852 0.0880 272.0);
24
- --color-blue-900: oklch(0.825 0.1090 272.0);
25
- --color-blue-800: oklch(0.710 0.1500 272.0);
26
- --color-blue-700: oklch(0.670 0.1216 275.3);
5
+ --color-neutral-1300: oklch(0.995 0.0001 260);
6
+ --color-neutral-1200: oklch(0.975 0.0001 260);
7
+ --color-neutral-1100: oklch(0.95 0.0001 260);
8
+ --color-neutral-1000: oklch(0.925 0.0001 260);
9
+ --color-neutral-900: oklch(0.9 0.0001 260);
10
+ --color-neutral-800: oklch(0.79 0.0011 260);
11
+ --color-neutral-700: oklch(0.717 0.0021 260);
12
+ --color-neutral-600: oklch(0.606 0.0031 260);
13
+ --color-neutral-500: oklch(0.483 0.0041 260);
14
+ --color-neutral-400: oklch(0.389 0.005 260);
15
+ --color-neutral-300: oklch(0.316 0.006 260);
16
+ --color-neutral-200: oklch(0.247 0.007 260);
17
+ --color-neutral-100: oklch(0.216 0.008 260);
18
+ --color-neutral-50: oklch(0.195 0.009 260);
19
+ --color-neutral-0: oklch(0.162 0.01 260);
20
+ --color-blue-1300: oklch(0.95 0.0194 272);
21
+ --color-blue-1200: oklch(0.922 0.039 272);
22
+ --color-blue-1100: oklch(0.892 0.0598 272);
23
+ --color-blue-1000: oklch(0.852 0.088 272);
24
+ --color-blue-900: oklch(0.825 0.109 272);
25
+ --color-blue-800: oklch(0.71 0.15 272);
26
+ --color-blue-700: oklch(0.67 0.1216 275.3);
27
27
  --color-blue-600: oklch(0.563 0.1139 278.7);
28
- --color-blue-500: oklch(0.474 0.0984 282.0);
28
+ --color-blue-500: oklch(0.474 0.0984 282);
29
29
  --color-blue-400: oklch(0.379 0.0776 285.3);
30
30
  --color-blue-300: oklch(0.308 0.0623 288.7);
31
- --color-blue-200: oklch(0.240 0.0479 292.0);
32
- --color-purple-1300: oklch(0.950 0.0226 305.4);
31
+ --color-blue-200: oklch(0.24 0.0479 292);
32
+ --color-purple-1300: oklch(0.95 0.0226 305.4);
33
33
  --color-purple-1200: oklch(0.922 0.0455 305.4);
34
34
  --color-purple-1100: oklch(0.892 0.0697 305.4);
35
35
  --color-purple-1000: oklch(0.852 0.1027 305.4);
36
36
  --color-purple-900: oklch(0.825 0.1271 305.4);
37
- --color-purple-800: oklch(0.740 0.1750 305.4);
38
- --color-purple-700: oklch(0.670 0.1419 308.7);
37
+ --color-purple-800: oklch(0.74 0.175 305.4);
38
+ --color-purple-700: oklch(0.67 0.1419 308.7);
39
39
  --color-purple-600: oklch(0.563 0.1328 312.1);
40
40
  --color-purple-500: oklch(0.474 0.1148 315.4);
41
41
  --color-purple-400: oklch(0.379 0.0906 318.7);
42
42
  --color-purple-300: oklch(0.308 0.0727 322.1);
43
- --color-purple-200: oklch(0.240 0.0559 325.4);
44
- --color-red-1300: oklch(0.950 0.0253 11.3);
43
+ --color-purple-200: oklch(0.24 0.0559 325.4);
44
+ --color-red-1300: oklch(0.95 0.0253 11.3);
45
45
  --color-red-1200: oklch(0.922 0.0509 11.3);
46
- --color-red-1100: oklch(0.892 0.0780 11.3);
46
+ --color-red-1100: oklch(0.892 0.078 11.3);
47
47
  --color-red-1000: oklch(0.852 0.1149 11.3);
48
48
  --color-red-900: oklch(0.825 0.1423 11.3);
49
- --color-red-800: oklch(0.712 0.1850 11.3);
50
- --color-red-700: oklch(0.670 0.1588 14.7);
51
- --color-red-600: oklch(0.563 0.1487 18.0);
49
+ --color-red-800: oklch(0.712 0.185 11.3);
50
+ --color-red-700: oklch(0.67 0.1588 14.7);
51
+ --color-red-600: oklch(0.563 0.1487 18);
52
52
  --color-red-500: oklch(0.474 0.1285 21.3);
53
53
  --color-red-400: oklch(0.379 0.1014 24.7);
54
- --color-red-300: oklch(0.308 0.0814 28.0);
55
- --color-red-200: oklch(0.240 0.0626 31.3);
56
- --color-yellow-1300: oklch(0.950 0.0213 75.0);
57
- --color-yellow-1200: oklch(0.922 0.0428 75.0);
58
- --color-yellow-1100: oklch(0.892 0.0656 75.0);
59
- --color-yellow-1000: oklch(0.852 0.0966 75.0);
60
- --color-yellow-900: oklch(0.825 0.1196 75.0);
61
- --color-yellow-800: oklch(0.837 0.1400 75.0);
62
- --color-yellow-700: oklch(0.670 0.1336 78.3);
63
- --color-yellow-600: oklch(0.563 0.1250 81.7);
64
- --color-yellow-500: oklch(0.474 0.1081 85.0);
54
+ --color-red-300: oklch(0.308 0.0814 28);
55
+ --color-red-200: oklch(0.24 0.0626 31.3);
56
+ --color-yellow-1300: oklch(0.95 0.0213 75);
57
+ --color-yellow-1200: oklch(0.922 0.0428 75);
58
+ --color-yellow-1100: oklch(0.892 0.0656 75);
59
+ --color-yellow-1000: oklch(0.852 0.0966 75);
60
+ --color-yellow-900: oklch(0.825 0.1196 75);
61
+ --color-yellow-800: oklch(0.837 0.14 75);
62
+ --color-yellow-700: oklch(0.67 0.1336 78.3);
63
+ --color-yellow-600: oklch(0.563 0.125 81.7);
64
+ --color-yellow-500: oklch(0.474 0.1081 85);
65
65
  --color-yellow-400: oklch(0.379 0.0853 88.3);
66
66
  --color-yellow-300: oklch(0.308 0.0685 91.7);
67
- --color-yellow-200: oklch(0.240 0.0526 95.0);
68
- --color-green-1300: oklch(0.950 0.0292 163.7);
67
+ --color-yellow-200: oklch(0.24 0.0526 95);
68
+ --color-green-1300: oklch(0.95 0.0292 163.7);
69
69
  --color-green-1200: oklch(0.922 0.0586 163.7);
70
70
  --color-green-1100: oklch(0.892 0.0899 163.7);
71
71
  --color-green-1000: oklch(0.852 0.1324 163.7);
72
- --color-green-900: oklch(0.825 0.1640 163.7);
73
- --color-green-800: oklch(0.770 0.1919 163.7);
74
- --color-green-700: oklch(0.670 0.1831 167.0);
72
+ --color-green-900: oklch(0.825 0.164 163.7);
73
+ --color-green-800: oklch(0.77 0.1919 163.7);
74
+ --color-green-700: oklch(0.67 0.1831 167);
75
75
  --color-green-600: oklch(0.563 0.1714 170.4);
76
76
  --color-green-500: oklch(0.474 0.1481 173.7);
77
- --color-green-400: oklch(0.379 0.1169 177.0);
77
+ --color-green-400: oklch(0.379 0.1169 177);
78
78
  --color-green-300: oklch(0.308 0.0938 180.4);
79
- --color-green-200: oklch(0.240 0.0722 183.7);
79
+ --color-green-200: oklch(0.24 0.0722 183.7);
80
80
  --theme-accent-200: var(--color-green-200);
81
81
  --theme-accent-300: var(--color-green-300);
82
82
  --theme-accent-400: var(--color-green-400);
@@ -347,7 +347,14 @@
347
347
  font-size: 0.6875rem;
348
348
  letter-spacing: 0.04rem;
349
349
  text-transform: uppercase;
350
- font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
350
+ font-feature-settings:
351
+ 'ss02' on,
352
+ 'ss03' on,
353
+ 'ss09' on,
354
+ 'ss06' on,
355
+ 'ss07' on,
356
+ 'ss08' on,
357
+ 'calt' off;
351
358
  }
352
359
  /* @figma mono/regular/sm */
353
360
  @utility text-mono-sm {
@@ -357,7 +364,14 @@
357
364
  font-size: 0.75rem;
358
365
  letter-spacing: 0.04rem;
359
366
  text-transform: uppercase;
360
- font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
367
+ font-feature-settings:
368
+ 'ss02' on,
369
+ 'ss03' on,
370
+ 'ss09' on,
371
+ 'ss06' on,
372
+ 'ss07' on,
373
+ 'ss08' on,
374
+ 'calt' off;
361
375
  }
362
376
  /* @figma mono/regular/code */
363
377
  @utility text-mono-code {
@@ -366,7 +380,14 @@
366
380
  line-height: 1rem;
367
381
  font-size: 0.75rem;
368
382
  letter-spacing: 0rem;
369
- font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
383
+ font-feature-settings:
384
+ 'ss02' on,
385
+ 'ss03' on,
386
+ 'ss09' on,
387
+ 'ss06' on,
388
+ 'ss07' on,
389
+ 'ss08' on,
390
+ 'calt' off;
370
391
  }
371
392
  /* @figma mono/regular/md */
372
393
  @utility text-mono-md {
@@ -376,7 +397,14 @@
376
397
  font-size: 0.875rem;
377
398
  letter-spacing: 0.04rem;
378
399
  text-transform: uppercase;
379
- font-feature-settings: "ss02" on,"ss03" on,"ss09" on,"ss06" on,"ss07" on,"ss08" on,"calt" off;
400
+ font-feature-settings:
401
+ 'ss02' on,
402
+ 'ss03' on,
403
+ 'ss09' on,
404
+ 'ss06' on,
405
+ 'ss07' on,
406
+ 'ss08' on,
407
+ 'calt' off;
380
408
  }
381
409
  /* @figma sans/regular/sm */
382
410
  @utility text-sans-sm {
package/styles/tailwind.css CHANGED
@@ -67,10 +67,11 @@ Make sure disabled buttons don't get the pointer cursor.
67
67
  --shadow-menu:
68
68
  var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a,
69
69
  0px 16px 24px -8px #0000000f, var(--shadow-border-bg);
70
- --shadow-menu-inset: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a,
71
- 0px 16px 24px -8px #0000000f;
70
+ --shadow-menu-inset:
71
+ 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
72
72
  --inset-outline: 1px solid #ffffff15;
73
- --shadow-toast: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
73
+ --shadow-toast:
74
+ 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
74
75
  --shadow-modal:
75
76
  var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a,
76
77
  0px 24px 32px -8px #0000000f, var(--shadow-border-bg);
@@ -79,7 +80,7 @@ Make sure disabled buttons don't get the pointer cursor.
79
80
  var(--shadow-border-bg);
80
81
  }
81
82
 
82
- [data-theme="light"] {
83
+ [data-theme='light'] {
83
84
  --shadow-border-base: 0 0 0 1px #00000014;
84
85
  --shadow-border-bg: 0 0 0 1px var(--surface-secondary);
85
86
  --shadow-border: var(--shadow-border-base), var(--shadow-border-bg);
@@ -95,10 +96,11 @@ Make sure disabled buttons don't get the pointer cursor.
95
96
  --shadow-menu:
96
97
  var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a,
97
98
  0px 16px 24px -8px #0000000f, var(--shadow-border-bg);
98
- --shadow-menu-inset: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a,
99
- 0px 16px 24px -8px #0000000f;
99
+ --shadow-menu-inset:
100
+ 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
100
101
  --inset-outline: 1px solid #00000015;
101
- --shadow-toast: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
102
+ --shadow-toast:
103
+ 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
102
104
  --shadow-modal:
103
105
  var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a,
104
106
  0px 24px 32px -8px #0000000f, var(--shadow-border-bg);
@@ -147,3 +149,27 @@ Make sure disabled buttons don't get the pointer cursor.
147
149
  ::selection {
148
150
  @apply text-accent bg-accent;
149
151
  }
152
+
153
+ @utility text-mono-code {
154
+ @apply text-[0.825em] !normal-case;
155
+ font-feature-settings: 'calt' 0;
156
+ letter-spacing: 0;
157
+ }
158
+
159
+ @utility accent-link {
160
+ @apply text-accent-secondary hover:text-accent;
161
+ text-decoration: underline;
162
+ text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
163
+ }
164
+
165
+ @utility link-with-underline {
166
+ @apply text-default hover:text-raise;
167
+ text-decoration: underline;
168
+ text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
169
+ }
170
+
171
+ @utility inline-code {
172
+ @apply mr-[1px] ml-[1px] rounded-md border px-0.5 align-[1px] text-[0.825em] tracking-normal!;
173
+ background-color: color-mix(in srgb, currentColor 8%, transparent);
174
+ border-color: color-mix(in srgb, currentColor 10%, transparent);
175
+ }