@nordcode/ui 2.1.3 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/out/bundle.css +17 -9
- package/out/bundle_configless.css +2 -2
- package/out/complete.css +22 -14
- package/out/complete_configless.css +7 -7
- package/package.json +4 -3
- package/src/styles/components/buttons.css +4 -4
- package/src/styles/config/config.css +36 -73
- package/src/styles/utils/base.css +1 -1
package/CHANGELOG.md
CHANGED
package/out/bundle.css
CHANGED
|
@@ -39,11 +39,21 @@
|
|
|
39
39
|
--border-radius-medium: 4px;
|
|
40
40
|
--border-radius-large: 8px;
|
|
41
41
|
--border-radius-round: 100000px;
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
42
|
+
--control-height-base: var(--button-height-base);
|
|
43
|
+
--control-height-small: var(--button-height-small);
|
|
44
|
+
--control-spacing-minimal: .125em;
|
|
45
|
+
--control-spacing-tiny: .25em;
|
|
46
|
+
--control-spacing-nearest: .375em;
|
|
47
|
+
--control-spacing-near: .5em;
|
|
48
|
+
--control-spacing-base: .75em;
|
|
49
|
+
--control-spacing-far: 1em;
|
|
50
|
+
--control-spacing-farthest: 1.5em;
|
|
51
|
+
--shadow-box: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), inset -.4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%), inset .4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
|
|
52
|
+
--shadow-inset: inset .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
53
|
+
--shadow-nearest: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
54
|
+
--shadow-near: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
|
|
55
|
+
--shadow-medium: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
|
|
56
|
+
--shadow-far: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%), 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%), 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%), 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
|
|
47
57
|
--shadow-color-light: oklch(80% .03 265);
|
|
48
58
|
--shadow-color-light-lch: 80% .03 265;
|
|
49
59
|
--shadow-color-dark: oklch(24% .05 265);
|
|
@@ -201,8 +211,6 @@
|
|
|
201
211
|
--color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
|
|
202
212
|
--color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
|
|
203
213
|
--color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
|
|
204
|
-
--control-height-base: var(--button-height-base);
|
|
205
|
-
--control-height-small: var(--button-height-small);
|
|
206
214
|
--font-family-link: var(--font-family-default);
|
|
207
215
|
--font-family-button: var(--font-family-default);
|
|
208
216
|
}
|
|
@@ -613,12 +621,12 @@
|
|
|
613
621
|
|
|
614
622
|
::selection {
|
|
615
623
|
background-color: var(--color-brand-primary-base);
|
|
616
|
-
color: var(--color-brand-primary-
|
|
624
|
+
color: var(--color-brand-primary-contrast);
|
|
617
625
|
}
|
|
618
626
|
|
|
619
627
|
::target-text {
|
|
620
628
|
background-color: var(--color-brand-primary-base);
|
|
621
|
-
color: var(--color-brand-primary-
|
|
629
|
+
color: var(--color-brand-primary-contrast);
|
|
622
630
|
}
|
|
623
631
|
|
|
624
632
|
:where(a, .nc-link) {
|
|
@@ -405,12 +405,12 @@
|
|
|
405
405
|
|
|
406
406
|
::selection {
|
|
407
407
|
background-color: var(--color-brand-primary-base);
|
|
408
|
-
color: var(--color-brand-primary-
|
|
408
|
+
color: var(--color-brand-primary-contrast);
|
|
409
409
|
}
|
|
410
410
|
|
|
411
411
|
::target-text {
|
|
412
412
|
background-color: var(--color-brand-primary-base);
|
|
413
|
-
color: var(--color-brand-primary-
|
|
413
|
+
color: var(--color-brand-primary-contrast);
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
:where(a, .nc-link) {
|
package/out/complete.css
CHANGED
|
@@ -39,11 +39,21 @@
|
|
|
39
39
|
--border-radius-medium: 4px;
|
|
40
40
|
--border-radius-large: 8px;
|
|
41
41
|
--border-radius-round: 100000px;
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
42
|
+
--control-height-base: var(--button-height-base);
|
|
43
|
+
--control-height-small: var(--button-height-small);
|
|
44
|
+
--control-spacing-minimal: .125em;
|
|
45
|
+
--control-spacing-tiny: .25em;
|
|
46
|
+
--control-spacing-nearest: .375em;
|
|
47
|
+
--control-spacing-near: .5em;
|
|
48
|
+
--control-spacing-base: .75em;
|
|
49
|
+
--control-spacing-far: 1em;
|
|
50
|
+
--control-spacing-farthest: 1.5em;
|
|
51
|
+
--shadow-box: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), inset -.4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%), inset .4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
|
|
52
|
+
--shadow-inset: inset .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
53
|
+
--shadow-nearest: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
54
|
+
--shadow-near: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
|
|
55
|
+
--shadow-medium: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
|
|
56
|
+
--shadow-far: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%), 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%), 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%), 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
|
|
47
57
|
--shadow-color-light: oklch(80% .03 265);
|
|
48
58
|
--shadow-color-light-lch: 80% .03 265;
|
|
49
59
|
--shadow-color-dark: oklch(24% .05 265);
|
|
@@ -201,8 +211,6 @@
|
|
|
201
211
|
--color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
|
|
202
212
|
--color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
|
|
203
213
|
--color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
|
|
204
|
-
--control-height-base: var(--button-height-base);
|
|
205
|
-
--control-height-small: var(--button-height-small);
|
|
206
214
|
--font-family-link: var(--font-family-default);
|
|
207
215
|
--font-family-button: var(--font-family-default);
|
|
208
216
|
}
|
|
@@ -613,12 +621,12 @@
|
|
|
613
621
|
|
|
614
622
|
::selection {
|
|
615
623
|
background-color: var(--color-brand-primary-base);
|
|
616
|
-
color: var(--color-brand-primary-
|
|
624
|
+
color: var(--color-brand-primary-contrast);
|
|
617
625
|
}
|
|
618
626
|
|
|
619
627
|
::target-text {
|
|
620
628
|
background-color: var(--color-brand-primary-base);
|
|
621
|
-
color: var(--color-brand-primary-
|
|
629
|
+
color: var(--color-brand-primary-contrast);
|
|
622
630
|
}
|
|
623
631
|
|
|
624
632
|
:where(a, .nc-link) {
|
|
@@ -1534,7 +1542,7 @@
|
|
|
1534
1542
|
}
|
|
1535
1543
|
|
|
1536
1544
|
@layer components.buttons {
|
|
1537
|
-
:where(button,
|
|
1545
|
+
:where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
|
|
1538
1546
|
--_button-background: var(--button-background, var(--surface-hover));
|
|
1539
1547
|
--_button-color: var(--button-color, var(--text-hover));
|
|
1540
1548
|
--_button-border-color: var(--button-border-color, var(--surface-hover));
|
|
@@ -1558,7 +1566,7 @@
|
|
|
1558
1566
|
font-size: inherit;
|
|
1559
1567
|
cursor: pointer;
|
|
1560
1568
|
text-align: center;
|
|
1561
|
-
transition: var(--transition-duration-
|
|
1569
|
+
transition: var(--transition-duration-quick-2) var(--ease-2);
|
|
1562
1570
|
-webkit-text-decoration: unset;
|
|
1563
1571
|
text-decoration: unset;
|
|
1564
1572
|
box-shadow: var(--_button-box-shadow);
|
|
@@ -1666,14 +1674,14 @@
|
|
|
1666
1674
|
margin-inline: calc(-1 * var(--_button-padding-inline));
|
|
1667
1675
|
}
|
|
1668
1676
|
|
|
1669
|
-
:is([aria-label], .-icon):where(button, button
|
|
1677
|
+
:is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
1670
1678
|
--_button-border-radius: var(--border-radius-round);
|
|
1671
1679
|
aspect-ratio: 1;
|
|
1672
1680
|
fill: currentColor;
|
|
1673
1681
|
padding: 0;
|
|
1674
1682
|
}
|
|
1675
1683
|
|
|
1676
|
-
:is([aria-label], .-icon):where(button, button
|
|
1684
|
+
:is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
|
|
1677
1685
|
content: "";
|
|
1678
1686
|
inline-size: max(var(--control-height-base), 100%);
|
|
1679
1687
|
block-size: max(var(--control-height-base), 100%);
|
|
@@ -1686,7 +1694,7 @@
|
|
|
1686
1694
|
inset-inline-start: calc(-.5 * (var(--control-height-base) - 100%));
|
|
1687
1695
|
}
|
|
1688
1696
|
|
|
1689
|
-
[disabled]:where(button,
|
|
1697
|
+
[disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
1690
1698
|
--_button-border-color-hover: var(--_button-border-color);
|
|
1691
1699
|
filter: contrast(.72) opacity(.72);
|
|
1692
1700
|
cursor: not-allowed;
|
|
@@ -405,12 +405,12 @@
|
|
|
405
405
|
|
|
406
406
|
::selection {
|
|
407
407
|
background-color: var(--color-brand-primary-base);
|
|
408
|
-
color: var(--color-brand-primary-
|
|
408
|
+
color: var(--color-brand-primary-contrast);
|
|
409
409
|
}
|
|
410
410
|
|
|
411
411
|
::target-text {
|
|
412
412
|
background-color: var(--color-brand-primary-base);
|
|
413
|
-
color: var(--color-brand-primary-
|
|
413
|
+
color: var(--color-brand-primary-contrast);
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
:where(a, .nc-link) {
|
|
@@ -1326,7 +1326,7 @@
|
|
|
1326
1326
|
}
|
|
1327
1327
|
|
|
1328
1328
|
@layer components.buttons {
|
|
1329
|
-
:where(button,
|
|
1329
|
+
:where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
|
|
1330
1330
|
--_button-background: var(--button-background, var(--surface-hover));
|
|
1331
1331
|
--_button-color: var(--button-color, var(--text-hover));
|
|
1332
1332
|
--_button-border-color: var(--button-border-color, var(--surface-hover));
|
|
@@ -1350,7 +1350,7 @@
|
|
|
1350
1350
|
font-size: inherit;
|
|
1351
1351
|
cursor: pointer;
|
|
1352
1352
|
text-align: center;
|
|
1353
|
-
transition: var(--transition-duration-
|
|
1353
|
+
transition: var(--transition-duration-quick-2) var(--ease-2);
|
|
1354
1354
|
-webkit-text-decoration: unset;
|
|
1355
1355
|
text-decoration: unset;
|
|
1356
1356
|
box-shadow: var(--_button-box-shadow);
|
|
@@ -1458,14 +1458,14 @@
|
|
|
1458
1458
|
margin-inline: calc(-1 * var(--_button-padding-inline));
|
|
1459
1459
|
}
|
|
1460
1460
|
|
|
1461
|
-
:is([aria-label], .-icon):where(button, button
|
|
1461
|
+
:is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
1462
1462
|
--_button-border-radius: var(--border-radius-round);
|
|
1463
1463
|
aspect-ratio: 1;
|
|
1464
1464
|
fill: currentColor;
|
|
1465
1465
|
padding: 0;
|
|
1466
1466
|
}
|
|
1467
1467
|
|
|
1468
|
-
:is([aria-label], .-icon):where(button, button
|
|
1468
|
+
:is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
|
|
1469
1469
|
content: "";
|
|
1470
1470
|
inline-size: max(var(--control-height-base), 100%);
|
|
1471
1471
|
block-size: max(var(--control-height-base), 100%);
|
|
@@ -1478,7 +1478,7 @@
|
|
|
1478
1478
|
inset-inline-start: calc(-.5 * (var(--control-height-base) - 100%));
|
|
1479
1479
|
}
|
|
1480
1480
|
|
|
1481
|
-
[disabled]:where(button,
|
|
1481
|
+
[disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
1482
1482
|
--_button-border-color-hover: var(--_button-border-color);
|
|
1483
1483
|
filter: contrast(.72) opacity(.72);
|
|
1484
1484
|
cursor: not-allowed;
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"type": "git",
|
|
13
13
|
"url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
|
|
14
14
|
},
|
|
15
|
-
"version": "2.1.
|
|
15
|
+
"version": "2.1.5",
|
|
16
16
|
"publishConfig": {
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
@@ -68,9 +68,10 @@
|
|
|
68
68
|
"./fonts": "./src/assets/fonts/fonts.css"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
+
"baseline-browser-mapping": "^2.9.6",
|
|
71
72
|
"browserslist": "^4.28.0",
|
|
72
|
-
"
|
|
73
|
-
"
|
|
73
|
+
"browserslist-config-baseline": "^0.5.0",
|
|
74
|
+
"lightningcss": "^1.30.2"
|
|
74
75
|
},
|
|
75
76
|
"scripts": {
|
|
76
77
|
"lib:transform": "node transform.js",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer components.buttons {
|
|
2
|
-
:where(button,
|
|
2
|
+
:where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button, .nc-button) {
|
|
3
3
|
--_button-background: var(--button-background, var(--surface-hover));
|
|
4
4
|
--_button-color: var(--button-color, var(--text-hover));
|
|
5
5
|
--_button-border-color: var(--button-border-color, var(--surface-hover));
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
justify-content: center;
|
|
36
36
|
text-align: center;
|
|
37
37
|
position: relative;
|
|
38
|
-
transition: var(--transition-duration-
|
|
38
|
+
transition: var(--transition-duration-quick-2) var(--ease-2);
|
|
39
39
|
transition-property: box-shadow, transform;
|
|
40
40
|
text-decoration: unset;
|
|
41
41
|
box-shadow: var(--_button-box-shadow);
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
* it is assumed that an `aria-label` is that
|
|
174
174
|
* and the button will be styled as an icon button.
|
|
175
175
|
*/
|
|
176
|
-
:is([aria-label], .-icon):where(button, button
|
|
176
|
+
:is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
177
177
|
--_button-border-radius: var(--border-radius-round);
|
|
178
178
|
padding: 0;
|
|
179
179
|
aspect-ratio: 1;
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
-
[disabled]:where(button,
|
|
196
|
+
[disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
|
|
197
197
|
--_button-background: none !important;
|
|
198
198
|
--_button-background-hover: none !important;
|
|
199
199
|
--_button-color: var(--color-text-subtle) !important;
|
|
@@ -56,85 +56,48 @@
|
|
|
56
56
|
--border-radius-large: 8px;
|
|
57
57
|
--border-radius-round: 1e5px;
|
|
58
58
|
|
|
59
|
+
/* UI Density Elements */
|
|
60
|
+
|
|
61
|
+
--control-height-base: 2.5em;
|
|
62
|
+
--control-height-small: 2em;
|
|
63
|
+
|
|
64
|
+
--control-spacing-minimal: 0.125em;
|
|
65
|
+
--control-spacing-tiny: 0.25em;
|
|
66
|
+
--control-spacing-nearest: 0.375em;
|
|
67
|
+
--control-spacing-near: 0.5em;
|
|
68
|
+
--control-spacing-base: 0.75em;
|
|
69
|
+
--control-spacing-far: 1em;
|
|
70
|
+
--control-spacing-farthest: 1.5em;
|
|
71
|
+
|
|
59
72
|
/* SHADOWS */
|
|
60
73
|
|
|
61
|
-
--shadow-
|
|
62
|
-
|
|
63
|
-
inset 0.
|
|
74
|
+
--shadow-box:
|
|
75
|
+
0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
|
|
76
|
+
inset -0.4px 0.8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%),
|
|
77
|
+
inset 0.4px 0.8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
|
|
64
78
|
|
|
65
|
-
--shadow-
|
|
66
|
-
|
|
67
|
-
|
|
79
|
+
--shadow-inset: inset 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
80
|
+
|
|
81
|
+
--shadow-nearest: 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
|
|
68
82
|
--shadow-near:
|
|
69
|
-
0.
|
|
70
|
-
0.
|
|
71
|
-
in oklch,
|
|
72
|
-
var(--shadow-color),
|
|
73
|
-
transparent 60.5%
|
|
74
|
-
),
|
|
75
|
-
2.7px 9px 18px -2.67px color-mix(
|
|
76
|
-
in oklch,
|
|
77
|
-
var(--shadow-color),
|
|
78
|
-
transparent 68.78999999999999%
|
|
79
|
-
),
|
|
80
|
-
8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
|
|
83
|
+
0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
|
|
84
|
+
0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
|
|
85
|
+
1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
|
|
81
86
|
--shadow-medium:
|
|
82
|
-
0.
|
|
83
|
-
0.
|
|
84
|
-
in oklch,
|
|
85
|
-
var(--shadow-color),
|
|
86
|
-
transparent
|
|
87
|
-
),
|
|
88
|
-
2.7px 9px 18px -1.6px color-mix(
|
|
89
|
-
in oklch,
|
|
90
|
-
var(--shadow-color),
|
|
91
|
-
transparent 68.78999999999999%
|
|
92
|
-
),
|
|
93
|
-
8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%),
|
|
94
|
-
24.3px 81px 162px -3.2px color-mix(
|
|
95
|
-
in oklch,
|
|
96
|
-
var(--shadow-color),
|
|
97
|
-
transparent 80.52%
|
|
98
|
-
),
|
|
99
|
-
72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
|
|
87
|
+
0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
|
|
88
|
+
0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
|
|
89
|
+
1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%),
|
|
90
|
+
2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%),
|
|
91
|
+
4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
|
|
100
92
|
--shadow-far:
|
|
101
|
-
0.
|
|
102
|
-
0.
|
|
103
|
-
in oklch,
|
|
104
|
-
var(--shadow-color),
|
|
105
|
-
transparent
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
in oklch,
|
|
109
|
-
var(--shadow-color),
|
|
110
|
-
transparent 68.78999999999999%
|
|
111
|
-
),
|
|
112
|
-
8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%),
|
|
113
|
-
24.3px 81px 162px -2px color-mix(
|
|
114
|
-
in oklch,
|
|
115
|
-
var(--shadow-color),
|
|
116
|
-
transparent 80.52%
|
|
117
|
-
),
|
|
118
|
-
72.9px 243px 486px -2.5px color-mix(
|
|
119
|
-
in oklch,
|
|
120
|
-
var(--shadow-color),
|
|
121
|
-
transparent 84.61%
|
|
122
|
-
),
|
|
123
|
-
218.7px 729px 1458px -3px color-mix(
|
|
124
|
-
in oklch,
|
|
125
|
-
var(--shadow-color),
|
|
126
|
-
transparent 87.85%
|
|
127
|
-
),
|
|
128
|
-
656.1px 2187px 4374px -3.5px color-mix(
|
|
129
|
-
in oklch,
|
|
130
|
-
var(--shadow-color),
|
|
131
|
-
transparent 90.4%
|
|
132
|
-
),
|
|
133
|
-
1968.3px 6561px 13122px -4px color-mix(
|
|
134
|
-
in oklch,
|
|
135
|
-
var(--shadow-color),
|
|
136
|
-
transparent 92.41%
|
|
137
|
-
);
|
|
93
|
+
0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
|
|
94
|
+
0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
|
|
95
|
+
1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%),
|
|
96
|
+
2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%),
|
|
97
|
+
4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%),
|
|
98
|
+
7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%),
|
|
99
|
+
13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%),
|
|
100
|
+
24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
|
|
138
101
|
/* Light Theme */
|
|
139
102
|
|
|
140
103
|
--shadow-color-light: oklch(80% 0.03 265);
|