ui-style-kit-css 2.3.0 → 2.4.1
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 +57 -2
- package/CONTRIBUTING.md +8 -1
- package/README.md +102 -44
- package/STYLE-MAP.md +14 -5
- package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
- package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/dist/assets/bauhaus-barlow.ttf +0 -0
- package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
- package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
- package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/dist/assets/bento-manrope-OFL.txt +93 -0
- package/dist/assets/bento-manrope.ttf +0 -0
- package/dist/assets/clay-grain.png +0 -0
- package/dist/assets/clay-rounded-OFL.txt +93 -0
- package/dist/assets/clay-rounded.ttf +0 -0
- package/dist/assets/neo-noir-corner-dark.png +0 -0
- package/dist/assets/neo-noir-corner-light.png +0 -0
- package/dist/assets/neo-noir-texture-dark.png +0 -0
- package/dist/assets/neo-noir-texture-light.png +0 -0
- package/dist/assets/organic-display-OFL.txt +93 -0
- package/dist/assets/organic-display.ttf +0 -0
- package/dist/assets/organic-icons-LICENSE.txt +21 -0
- package/dist/assets/organic-sans-OFL.txt +93 -0
- package/dist/assets/organic-sans.ttf +0 -0
- package/dist/ui-style-kit.css +47898 -15121
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +47771 -15122
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +47932 -15145
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +3247 -295
- package/dist/visual/bauhaus.css +2 -4692
- package/dist/visual/bento.css +2 -4708
- package/dist/visual/brutalism.css +1229 -231
- package/dist/visual/clay.css +2 -4786
- package/dist/visual/cyberpunk.css +2663 -282
- package/dist/visual/data-terminal.css +2064 -276
- package/dist/visual/editorial-luxe.css +2315 -259
- package/dist/visual/industrial-utility.css +3142 -270
- package/dist/visual/maximalist.css +2185 -454
- package/dist/visual/minimal-saas.css +1503 -398
- package/dist/visual/neo-noir.css +2 -4787
- package/dist/visual/neumorphism.css +1690 -402
- package/dist/visual/organic-modern.css +2 -4764
- package/dist/visual/paper-editorial.css +2977 -292
- package/dist/visual/retro-glass.css +2625 -299
- package/dist/visual/retrofuturism.css +1885 -397
- package/dist/visual/tactile.css +2716 -498
- package/dist/visual/technical-blueprint.css +2599 -267
- package/dist/visual/y2k.css +1906 -309
- package/docs/ART-DECO.md +80 -0
- package/docs/BAUHAUS.md +152 -0
- package/docs/BENTO.md +121 -0
- package/docs/CLAY.md +127 -0
- package/docs/COLOR-THEMES.md +63 -0
- package/docs/DEMO-SHOWCASE.md +65 -0
- package/docs/ECOSYSTEM.md +4 -4
- package/docs/EDITORIAL-LUX.md +75 -0
- package/docs/INDUSTRIAL-UTILITY.md +131 -0
- package/docs/NATIVE-ELEMENTS.md +23 -17
- package/docs/NEO-NOIR.md +94 -0
- package/docs/ORGANIC-MODERN.md +91 -0
- package/docs/PAPER-EDITORIAL.md +63 -0
- package/docs/PUBLISHING.md +31 -10
- package/docs/RELEASE-2.4.0.md +88 -0
- package/docs/RELEASE-2.4.1.md +35 -0
- package/docs/RETRO-GLASS.md +105 -0
- package/docs/STYLE-GUIDE.md +41 -26
- package/docs/TACTILE.md +38 -0
- package/docs/TECHNICAL-BLUEPRINT.md +60 -0
- package/docs/TOKENS.md +80 -3
- package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
- package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
- package/manifest.json +624 -28
- package/package.json +20 -11
- package/styles/art-deco.css +1402 -17
- package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
- package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/styles/assets/bauhaus-barlow.ttf +0 -0
- package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
- package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
- package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/styles/assets/bento-manrope-OFL.txt +93 -0
- package/styles/assets/bento-manrope.ttf +0 -0
- package/styles/assets/clay-grain.png +0 -0
- package/styles/assets/clay-rounded-OFL.txt +93 -0
- package/styles/assets/clay-rounded.ttf +0 -0
- package/styles/assets/neo-noir-corner-dark.png +0 -0
- package/styles/assets/neo-noir-corner-light.png +0 -0
- package/styles/assets/neo-noir-texture-dark.png +0 -0
- package/styles/assets/neo-noir-texture-light.png +0 -0
- package/styles/assets/organic-display-OFL.txt +93 -0
- package/styles/assets/organic-display.ttf +0 -0
- package/styles/assets/organic-icons-LICENSE.txt +21 -0
- package/styles/assets/organic-sans-OFL.txt +93 -0
- package/styles/assets/organic-sans.ttf +0 -0
- package/styles/bauhaus.css +881 -110
- package/styles/bento.css +1182 -113
- package/styles/brutalism.css +266 -15
- package/styles/clay.css +1307 -72
- package/styles/compat-layout.css +1 -2
- package/styles/components.css +107 -36
- package/styles/content-overflow.css +11 -5
- package/styles/cyberpunk.css +1856 -51
- package/styles/data-terminal.css +1122 -18
- package/styles/editorial-luxe.css +581 -17
- package/styles/industrial-utility.css +1775 -16
- package/styles/interactive-surface-bridge.css +30 -20
- package/styles/interactive-surface-theme.css +21 -11
- package/styles/maximalist.css +1215 -133
- package/styles/minimal-saas.css +465 -93
- package/styles/native-elements.css +347 -171
- package/styles/neo-noir.css +661 -19
- package/styles/neumorphism.css +1021 -149
- package/styles/organic-modern.css +693 -23
- package/styles/paper-editorial.css +1053 -17
- package/styles/retro-glass.css +639 -50
- package/styles/retrofuturism.css +948 -60
- package/styles/tactile.css +1813 -111
- package/styles/technical-blueprint.css +673 -22
- package/styles/theme-colors.css +412 -2
- package/styles/y2k.css +954 -46
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* UI Style Kit CSS v2.
|
|
2
|
+
* UI Style Kit CSS v2.4.1
|
|
3
3
|
* CSS theme and UI style preset library.
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -13,13 +13,26 @@
|
|
|
13
13
|
========================================================= */
|
|
14
14
|
|
|
15
15
|
@layer ui-style-kit.theme_colors {
|
|
16
|
+
/**
|
|
17
|
+
* Optional text inks let bright palette fills retain their color without making
|
|
18
|
+
* text on neutral surfaces unreadable. Initial values preserve preset colors and
|
|
19
|
+
* prevent an outer palette's text override from leaking into a nested UI root.
|
|
20
|
+
*/
|
|
21
|
+
:where([data-ui]) {
|
|
22
|
+
--usk-primary-ink: initial;
|
|
23
|
+
--usk-accent-ink: initial;
|
|
24
|
+
}
|
|
25
|
+
|
|
16
26
|
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
|
|
17
|
-
:where([data-ui][data-
|
|
27
|
+
:where([data-ui][data-mode="light"]) {
|
|
28
|
+
/* Keep vivid fills intact while using the darker link role for text treatments. */
|
|
29
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
30
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
18
31
|
--usk-border-text-mix: 45%;
|
|
19
32
|
--usk-border-min-alpha: 1;
|
|
20
33
|
}
|
|
21
34
|
|
|
22
|
-
:where([data-ui][data-
|
|
35
|
+
:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
|
|
23
36
|
--usk-border-text-mix: 0%;
|
|
24
37
|
--usk-border-min-alpha: 0;
|
|
25
38
|
}
|
|
@@ -1584,6 +1597,403 @@
|
|
|
1584
1597
|
--usk-danger-text-rgb: 0 0 0;
|
|
1585
1598
|
--usk-focus-rgb: 255 255 255;
|
|
1586
1599
|
}
|
|
1600
|
+
|
|
1601
|
+
/** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
|
|
1602
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
|
|
1603
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
1604
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
1605
|
+
--usk-bg-rgb: 255 251 232;
|
|
1606
|
+
--usk-surface-rgb: 255 255 255;
|
|
1607
|
+
--usk-surface-strong-rgb: 255 254 245;
|
|
1608
|
+
--usk-surface-soft-rgb: 247 237 187;
|
|
1609
|
+
--usk-text-rgb: 33 29 12;
|
|
1610
|
+
--usk-text-muted-rgb: 100 91 55;
|
|
1611
|
+
--usk-border-rgb: 217 199 111;
|
|
1612
|
+
--usk-primary-rgb: 255 204 0;
|
|
1613
|
+
--usk-primary-hover-rgb: 222 175 0;
|
|
1614
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1615
|
+
--usk-secondary-rgb: 37 50 78;
|
|
1616
|
+
--usk-secondary-hover-rgb: 25 37 61;
|
|
1617
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1618
|
+
--usk-accent-rgb: 255 228 92;
|
|
1619
|
+
--usk-success-rgb: 34 122 75;
|
|
1620
|
+
--usk-warning-rgb: 144 92 0;
|
|
1621
|
+
--usk-danger-rgb: 177 54 54;
|
|
1622
|
+
--usk-link-rgb: 112 79 0;
|
|
1623
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1624
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1625
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1626
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1627
|
+
--usk-focus-rgb: 255 204 0;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
|
|
1631
|
+
--usk-bg-rgb: 18 15 3;
|
|
1632
|
+
--usk-surface-rgb: 32 27 7;
|
|
1633
|
+
--usk-surface-strong-rgb: 48 40 10;
|
|
1634
|
+
--usk-surface-soft-rgb: 25 21 5;
|
|
1635
|
+
--usk-text-rgb: 255 249 222;
|
|
1636
|
+
--usk-text-muted-rgb: 207 195 145;
|
|
1637
|
+
--usk-border-rgb: 104 88 31;
|
|
1638
|
+
--usk-primary-rgb: 255 216 59;
|
|
1639
|
+
--usk-primary-hover-rgb: 255 234 130;
|
|
1640
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1641
|
+
--usk-secondary-rgb: 142 198 255;
|
|
1642
|
+
--usk-secondary-hover-rgb: 182 220 255;
|
|
1643
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1644
|
+
--usk-accent-rgb: 255 232 102;
|
|
1645
|
+
--usk-success-rgb: 103 217 151;
|
|
1646
|
+
--usk-warning-rgb: 255 194 62;
|
|
1647
|
+
--usk-danger-rgb: 255 119 119;
|
|
1648
|
+
--usk-link-rgb: 255 232 102;
|
|
1649
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1650
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1651
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1652
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1653
|
+
--usk-focus-rgb: 255 232 102;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
|
|
1657
|
+
--usk-bg-rgb: 0 0 0;
|
|
1658
|
+
--usk-surface-rgb: 13 11 0;
|
|
1659
|
+
--usk-surface-strong-rgb: 26 22 0;
|
|
1660
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1661
|
+
--usk-text-rgb: 255 255 255;
|
|
1662
|
+
--usk-text-muted-rgb: 255 250 222;
|
|
1663
|
+
--usk-border-rgb: 255 255 255;
|
|
1664
|
+
--usk-primary-rgb: 255 214 0;
|
|
1665
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1666
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1667
|
+
--usk-secondary-rgb: 0 217 255;
|
|
1668
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1669
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1670
|
+
--usk-accent-rgb: 255 234 0;
|
|
1671
|
+
--usk-success-rgb: 0 255 144;
|
|
1672
|
+
--usk-warning-rgb: 255 191 0;
|
|
1673
|
+
--usk-danger-rgb: 255 77 77;
|
|
1674
|
+
--usk-link-rgb: 255 234 0;
|
|
1675
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1676
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1677
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1678
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1679
|
+
--usk-focus-rgb: 255 255 255;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
/** Botanical Green pairs leaf-green actions with restrained berry support. */
|
|
1683
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
|
|
1684
|
+
--usk-bg-rgb: 239 249 242;
|
|
1685
|
+
--usk-surface-rgb: 255 255 255;
|
|
1686
|
+
--usk-surface-strong-rgb: 248 253 249;
|
|
1687
|
+
--usk-surface-soft-rgb: 214 237 220;
|
|
1688
|
+
--usk-text-rgb: 14 38 23;
|
|
1689
|
+
--usk-text-muted-rgb: 75 98 81;
|
|
1690
|
+
--usk-border-rgb: 176 207 185;
|
|
1691
|
+
--usk-primary-rgb: 13 126 66;
|
|
1692
|
+
--usk-primary-hover-rgb: 8 97 50;
|
|
1693
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1694
|
+
--usk-secondary-rgb: 121 48 88;
|
|
1695
|
+
--usk-secondary-hover-rgb: 91 35 65;
|
|
1696
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1697
|
+
--usk-accent-rgb: 64 201 117;
|
|
1698
|
+
--usk-success-rgb: 24 116 65;
|
|
1699
|
+
--usk-warning-rgb: 150 96 0;
|
|
1700
|
+
--usk-danger-rgb: 178 60 70;
|
|
1701
|
+
--usk-link-rgb: 8 97 50;
|
|
1702
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1703
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1704
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1705
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1706
|
+
--usk-focus-rgb: 64 201 117;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
|
|
1710
|
+
--usk-bg-rgb: 4 17 9;
|
|
1711
|
+
--usk-surface-rgb: 10 32 18;
|
|
1712
|
+
--usk-surface-strong-rgb: 17 48 28;
|
|
1713
|
+
--usk-surface-soft-rgb: 7 24 14;
|
|
1714
|
+
--usk-text-rgb: 235 252 241;
|
|
1715
|
+
--usk-text-muted-rgb: 173 205 182;
|
|
1716
|
+
--usk-border-rgb: 49 91 63;
|
|
1717
|
+
--usk-primary-rgb: 82 222 139;
|
|
1718
|
+
--usk-primary-hover-rgb: 128 240 169;
|
|
1719
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1720
|
+
--usk-secondary-rgb: 238 148 199;
|
|
1721
|
+
--usk-secondary-hover-rgb: 255 187 222;
|
|
1722
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1723
|
+
--usk-accent-rgb: 107 240 164;
|
|
1724
|
+
--usk-success-rgb: 100 218 149;
|
|
1725
|
+
--usk-warning-rgb: 255 205 91;
|
|
1726
|
+
--usk-danger-rgb: 255 126 137;
|
|
1727
|
+
--usk-link-rgb: 128 240 169;
|
|
1728
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1729
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1730
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1731
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1732
|
+
--usk-focus-rgb: 107 240 164;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
|
|
1736
|
+
--usk-bg-rgb: 0 0 0;
|
|
1737
|
+
--usk-surface-rgb: 0 14 5;
|
|
1738
|
+
--usk-surface-strong-rgb: 0 29 11;
|
|
1739
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1740
|
+
--usk-text-rgb: 255 255 255;
|
|
1741
|
+
--usk-text-muted-rgb: 238 255 244;
|
|
1742
|
+
--usk-border-rgb: 255 255 255;
|
|
1743
|
+
--usk-primary-rgb: 0 255 112;
|
|
1744
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1745
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1746
|
+
--usk-secondary-rgb: 255 92 178;
|
|
1747
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1748
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1749
|
+
--usk-accent-rgb: 103 255 166;
|
|
1750
|
+
--usk-success-rgb: 0 255 117;
|
|
1751
|
+
--usk-warning-rgb: 255 212 0;
|
|
1752
|
+
--usk-danger-rgb: 255 77 91;
|
|
1753
|
+
--usk-link-rgb: 103 255 166;
|
|
1754
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1755
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1756
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1757
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1758
|
+
--usk-focus-rgb: 255 255 255;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
|
|
1762
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
|
|
1763
|
+
--usk-bg-rgb: 240 244 255;
|
|
1764
|
+
--usk-surface-rgb: 255 255 255;
|
|
1765
|
+
--usk-surface-strong-rgb: 248 250 255;
|
|
1766
|
+
--usk-surface-soft-rgb: 220 229 250;
|
|
1767
|
+
--usk-text-rgb: 14 27 57;
|
|
1768
|
+
--usk-text-muted-rgb: 73 89 123;
|
|
1769
|
+
--usk-border-rgb: 177 195 232;
|
|
1770
|
+
--usk-primary-rgb: 0 82 204;
|
|
1771
|
+
--usk-primary-hover-rgb: 0 61 158;
|
|
1772
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1773
|
+
--usk-secondary-rgb: 181 57 72;
|
|
1774
|
+
--usk-secondary-hover-rgb: 143 41 54;
|
|
1775
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1776
|
+
--usk-accent-rgb: 82 121 255;
|
|
1777
|
+
--usk-success-rgb: 35 121 78;
|
|
1778
|
+
--usk-warning-rgb: 151 96 0;
|
|
1779
|
+
--usk-danger-rgb: 180 55 74;
|
|
1780
|
+
--usk-link-rgb: 0 64 163;
|
|
1781
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1782
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1783
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1784
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1785
|
+
--usk-focus-rgb: 82 121 255;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
|
|
1789
|
+
--usk-bg-rgb: 4 9 25;
|
|
1790
|
+
--usk-surface-rgb: 10 20 48;
|
|
1791
|
+
--usk-surface-strong-rgb: 16 32 72;
|
|
1792
|
+
--usk-surface-soft-rgb: 7 14 36;
|
|
1793
|
+
--usk-text-rgb: 239 244 255;
|
|
1794
|
+
--usk-text-muted-rgb: 174 188 218;
|
|
1795
|
+
--usk-border-rgb: 49 70 122;
|
|
1796
|
+
--usk-primary-rgb: 111 149 255;
|
|
1797
|
+
--usk-primary-hover-rgb: 164 188 255;
|
|
1798
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1799
|
+
--usk-secondary-rgb: 255 133 147;
|
|
1800
|
+
--usk-secondary-hover-rgb: 255 173 183;
|
|
1801
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1802
|
+
--usk-accent-rgb: 143 170 255;
|
|
1803
|
+
--usk-success-rgb: 105 219 159;
|
|
1804
|
+
--usk-warning-rgb: 255 205 91;
|
|
1805
|
+
--usk-danger-rgb: 255 121 139;
|
|
1806
|
+
--usk-link-rgb: 164 188 255;
|
|
1807
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1808
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1809
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1810
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1811
|
+
--usk-focus-rgb: 143 170 255;
|
|
1812
|
+
}
|
|
1813
|
+
|
|
1814
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
|
|
1815
|
+
--usk-bg-rgb: 0 0 0;
|
|
1816
|
+
--usk-surface-rgb: 0 7 22;
|
|
1817
|
+
--usk-surface-strong-rgb: 0 15 44;
|
|
1818
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1819
|
+
--usk-text-rgb: 255 255 255;
|
|
1820
|
+
--usk-text-muted-rgb: 239 245 255;
|
|
1821
|
+
--usk-border-rgb: 255 255 255;
|
|
1822
|
+
--usk-primary-rgb: 76 133 255;
|
|
1823
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1824
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1825
|
+
--usk-secondary-rgb: 255 105 125;
|
|
1826
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1827
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1828
|
+
--usk-accent-rgb: 132 168 255;
|
|
1829
|
+
--usk-success-rgb: 0 255 144;
|
|
1830
|
+
--usk-warning-rgb: 255 212 0;
|
|
1831
|
+
--usk-danger-rgb: 255 92 112;
|
|
1832
|
+
--usk-link-rgb: 132 168 255;
|
|
1833
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1834
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1835
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1836
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1837
|
+
--usk-focus-rgb: 255 255 255;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
|
|
1841
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
|
|
1842
|
+
--usk-bg-rgb: 244 244 242;
|
|
1843
|
+
--usk-surface-rgb: 255 255 255;
|
|
1844
|
+
--usk-surface-strong-rgb: 250 250 248;
|
|
1845
|
+
--usk-surface-soft-rgb: 227 229 225;
|
|
1846
|
+
--usk-text-rgb: 27 29 28;
|
|
1847
|
+
--usk-text-muted-rgb: 86 91 88;
|
|
1848
|
+
--usk-border-rgb: 184 189 185;
|
|
1849
|
+
--usk-primary-rgb: 56 60 58;
|
|
1850
|
+
--usk-primary-hover-rgb: 37 40 38;
|
|
1851
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1852
|
+
--usk-secondary-rgb: 91 97 93;
|
|
1853
|
+
--usk-secondary-hover-rgb: 69 74 71;
|
|
1854
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1855
|
+
--usk-accent-rgb: 184 190 186;
|
|
1856
|
+
--usk-success-rgb: 48 115 79;
|
|
1857
|
+
--usk-warning-rgb: 145 94 0;
|
|
1858
|
+
--usk-danger-rgb: 168 60 60;
|
|
1859
|
+
--usk-link-rgb: 52 60 56;
|
|
1860
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1861
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1862
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1863
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1864
|
+
--usk-focus-rgb: 112 121 116;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
|
|
1868
|
+
--usk-bg-rgb: 12 13 13;
|
|
1869
|
+
--usk-surface-rgb: 25 27 26;
|
|
1870
|
+
--usk-surface-strong-rgb: 40 43 41;
|
|
1871
|
+
--usk-surface-soft-rgb: 18 20 19;
|
|
1872
|
+
--usk-text-rgb: 245 246 245;
|
|
1873
|
+
--usk-text-muted-rgb: 189 193 190;
|
|
1874
|
+
--usk-border-rgb: 78 84 80;
|
|
1875
|
+
--usk-primary-rgb: 208 212 209;
|
|
1876
|
+
--usk-primary-hover-rgb: 235 237 235;
|
|
1877
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1878
|
+
--usk-secondary-rgb: 164 170 166;
|
|
1879
|
+
--usk-secondary-hover-rgb: 194 199 196;
|
|
1880
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1881
|
+
--usk-accent-rgb: 230 232 231;
|
|
1882
|
+
--usk-success-rgb: 130 210 165;
|
|
1883
|
+
--usk-warning-rgb: 242 197 112;
|
|
1884
|
+
--usk-danger-rgb: 240 137 137;
|
|
1885
|
+
--usk-link-rgb: 220 224 221;
|
|
1886
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1887
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1888
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1889
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1890
|
+
--usk-focus-rgb: 255 255 255;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
|
|
1894
|
+
--usk-bg-rgb: 0 0 0;
|
|
1895
|
+
--usk-surface-rgb: 8 8 8;
|
|
1896
|
+
--usk-surface-strong-rgb: 20 20 20;
|
|
1897
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1898
|
+
--usk-text-rgb: 255 255 255;
|
|
1899
|
+
--usk-text-muted-rgb: 245 245 245;
|
|
1900
|
+
--usk-border-rgb: 255 255 255;
|
|
1901
|
+
--usk-primary-rgb: 255 255 255;
|
|
1902
|
+
--usk-primary-hover-rgb: 221 221 221;
|
|
1903
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1904
|
+
--usk-secondary-rgb: 205 205 205;
|
|
1905
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1906
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1907
|
+
--usk-accent-rgb: 245 245 245;
|
|
1908
|
+
--usk-success-rgb: 0 255 144;
|
|
1909
|
+
--usk-warning-rgb: 255 212 0;
|
|
1910
|
+
--usk-danger-rgb: 255 92 92;
|
|
1911
|
+
--usk-link-rgb: 255 255 255;
|
|
1912
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1913
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1914
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1915
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1916
|
+
--usk-focus-rgb: 255 255 255;
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
/** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
|
|
1920
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
|
|
1921
|
+
--usk-bg-rgb: 248 241 233;
|
|
1922
|
+
--usk-surface-rgb: 255 255 255;
|
|
1923
|
+
--usk-surface-strong-rgb: 253 249 245;
|
|
1924
|
+
--usk-surface-soft-rgb: 232 216 202;
|
|
1925
|
+
--usk-text-rgb: 49 36 29;
|
|
1926
|
+
--usk-text-muted-rgb: 102 84 74;
|
|
1927
|
+
--usk-border-rgb: 199 172 154;
|
|
1928
|
+
--usk-primary-rgb: 112 67 48;
|
|
1929
|
+
--usk-primary-hover-rgb: 83 47 34;
|
|
1930
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1931
|
+
--usk-secondary-rgb: 88 98 78;
|
|
1932
|
+
--usk-secondary-hover-rgb: 66 75 57;
|
|
1933
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1934
|
+
--usk-accent-rgb: 190 111 82;
|
|
1935
|
+
--usk-success-rgb: 53 117 76;
|
|
1936
|
+
--usk-warning-rgb: 147 91 0;
|
|
1937
|
+
--usk-danger-rgb: 173 61 55;
|
|
1938
|
+
--usk-link-rgb: 105 60 43;
|
|
1939
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1940
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1941
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1942
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1943
|
+
--usk-focus-rgb: 190 111 82;
|
|
1944
|
+
}
|
|
1945
|
+
|
|
1946
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
|
|
1947
|
+
--usk-bg-rgb: 18 12 9;
|
|
1948
|
+
--usk-surface-rgb: 35 24 19;
|
|
1949
|
+
--usk-surface-strong-rgb: 51 34 26;
|
|
1950
|
+
--usk-surface-soft-rgb: 27 18 14;
|
|
1951
|
+
--usk-text-rgb: 250 241 233;
|
|
1952
|
+
--usk-text-muted-rgb: 205 184 169;
|
|
1953
|
+
--usk-border-rgb: 107 78 61;
|
|
1954
|
+
--usk-primary-rgb: 218 158 124;
|
|
1955
|
+
--usk-primary-hover-rgb: 240 188 156;
|
|
1956
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1957
|
+
--usk-secondary-rgb: 178 192 157;
|
|
1958
|
+
--usk-secondary-hover-rgb: 207 217 190;
|
|
1959
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1960
|
+
--usk-accent-rgb: 235 169 136;
|
|
1961
|
+
--usk-success-rgb: 133 214 164;
|
|
1962
|
+
--usk-warning-rgb: 255 203 100;
|
|
1963
|
+
--usk-danger-rgb: 255 135 128;
|
|
1964
|
+
--usk-link-rgb: 240 188 156;
|
|
1965
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1966
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1967
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1968
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1969
|
+
--usk-focus-rgb: 235 169 136;
|
|
1970
|
+
}
|
|
1971
|
+
|
|
1972
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
|
|
1973
|
+
--usk-bg-rgb: 0 0 0;
|
|
1974
|
+
--usk-surface-rgb: 15 7 3;
|
|
1975
|
+
--usk-surface-strong-rgb: 31 15 7;
|
|
1976
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1977
|
+
--usk-text-rgb: 255 255 255;
|
|
1978
|
+
--usk-text-muted-rgb: 255 244 237;
|
|
1979
|
+
--usk-border-rgb: 255 255 255;
|
|
1980
|
+
--usk-primary-rgb: 255 174 128;
|
|
1981
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1982
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1983
|
+
--usk-secondary-rgb: 208 234 166;
|
|
1984
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1985
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1986
|
+
--usk-accent-rgb: 255 194 160;
|
|
1987
|
+
--usk-success-rgb: 0 255 144;
|
|
1988
|
+
--usk-warning-rgb: 255 212 0;
|
|
1989
|
+
--usk-danger-rgb: 255 102 96;
|
|
1990
|
+
--usk-link-rgb: 255 194 160;
|
|
1991
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1992
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1993
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1994
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1995
|
+
--usk-focus-rgb: 255 255 255;
|
|
1996
|
+
}
|
|
1587
1997
|
}
|
|
1588
1998
|
|
|
1589
1999
|
|
|
@@ -1597,7 +2007,8 @@
|
|
|
1597
2007
|
========================================================= */
|
|
1598
2008
|
|
|
1599
2009
|
@layer ui-style-kit.native_elements {
|
|
1600
|
-
[data-ui][data-
|
|
2010
|
+
[data-ui][data-mode] {
|
|
2011
|
+
--usk-native-bg: rgb(var(--usk-bg-rgb));
|
|
1601
2012
|
--usk-native-surface: rgb(var(--usk-surface-rgb));
|
|
1602
2013
|
--usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
|
|
1603
2014
|
--usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
|
|
@@ -1634,6 +2045,52 @@
|
|
|
1634
2045
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
1635
2046
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
1636
2047
|
--usk-native-indicator: var(--usk-native-primary);
|
|
2048
|
+
--usk-native-choice-size: 1.5rem;
|
|
2049
|
+
--usk-native-choice-background: var(--usk-native-control-bg);
|
|
2050
|
+
--usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2051
|
+
--usk-native-checkbox-radius: .3rem;
|
|
2052
|
+
--usk-native-radio-radius: 50%;
|
|
2053
|
+
--usk-native-choice-shadow: none;
|
|
2054
|
+
--usk-native-choice-checked-background: var(--usk-native-primary);
|
|
2055
|
+
--usk-native-choice-mark-color: var(--usk-native-on-primary);
|
|
2056
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
|
|
2057
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
2058
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
|
|
2059
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
2060
|
+
--usk-native-range-track-size: .45rem;
|
|
2061
|
+
--usk-native-range-track-background: var(--usk-native-track);
|
|
2062
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
2063
|
+
--usk-native-range-track-radius: 999px;
|
|
2064
|
+
--usk-native-range-track-shadow: none;
|
|
2065
|
+
--usk-native-range-progress-background: var(--usk-native-track-fill);
|
|
2066
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
2067
|
+
--usk-native-range-thumb-background: var(--usk-native-thumb);
|
|
2068
|
+
--usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
|
|
2069
|
+
--usk-native-range-thumb-radius: 50%;
|
|
2070
|
+
--usk-native-range-thumb-shadow: var(--usk-native-shadow);
|
|
2071
|
+
--usk-native-progress-size: .9rem;
|
|
2072
|
+
--usk-native-progress-track-background: var(--usk-native-track);
|
|
2073
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
2074
|
+
--usk-native-progress-track-radius: 999px;
|
|
2075
|
+
--usk-native-progress-track-shadow: none;
|
|
2076
|
+
--usk-native-progress-value-background: var(--usk-native-track-fill);
|
|
2077
|
+
--usk-native-progress-value-radius: inherit;
|
|
2078
|
+
--usk-native-progress-value-shadow: none;
|
|
2079
|
+
--usk-native-meter-optimum-background: var(--usk-native-success);
|
|
2080
|
+
--usk-native-meter-suboptimum-background: var(--usk-native-warning);
|
|
2081
|
+
--usk-native-meter-critical-background: var(--usk-native-danger);
|
|
2082
|
+
--usk-native-file-button-background: var(--usk-native-primary);
|
|
2083
|
+
--usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
2084
|
+
--usk-native-file-button-radius: var(--usk-native-radius-sm);
|
|
2085
|
+
--usk-native-file-button-shadow: var(--usk-native-shadow);
|
|
2086
|
+
--usk-native-color-swatch-border: 0 solid transparent;
|
|
2087
|
+
--usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
|
|
2088
|
+
--usk-native-indicator-opacity: .78;
|
|
2089
|
+
--usk-native-indicator-filter: none;
|
|
2090
|
+
--usk-native-scrollbar-size: .75rem;
|
|
2091
|
+
--usk-native-scrollbar-track: var(--usk-native-track);
|
|
2092
|
+
--usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
|
|
2093
|
+
--usk-native-scrollbar-radius: 999px;
|
|
1637
2094
|
--usk-native-shadow: none;
|
|
1638
2095
|
--usk-native-shadow-md: var(--usk-native-shadow);
|
|
1639
2096
|
--usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
|
|
@@ -1641,7 +2098,7 @@
|
|
|
1641
2098
|
--usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
|
|
1642
2099
|
|
|
1643
2100
|
/* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
|
|
1644
|
-
--ui-color-bg:
|
|
2101
|
+
--ui-color-bg: var(--usk-native-bg);
|
|
1645
2102
|
--ui-color-surface: var(--usk-native-surface-strong);
|
|
1646
2103
|
--ui-color-text: var(--usk-native-text);
|
|
1647
2104
|
--ui-color-muted: var(--usk-native-text-muted);
|
|
@@ -1655,7 +2112,7 @@
|
|
|
1655
2112
|
--ui-motion-easing: var(--usk-motion-easing);
|
|
1656
2113
|
}
|
|
1657
2114
|
|
|
1658
|
-
[data-ui][data-
|
|
2115
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
|
|
1659
2116
|
color: var(--usk-native-text);
|
|
1660
2117
|
font-family: var(--usk-native-font-heading);
|
|
1661
2118
|
line-height: 1.15;
|
|
@@ -1663,42 +2120,42 @@
|
|
|
1663
2120
|
}
|
|
1664
2121
|
|
|
1665
2122
|
@supports (text-wrap: balance) {
|
|
1666
|
-
[data-ui][data-
|
|
2123
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
1667
2124
|
}
|
|
1668
2125
|
|
|
1669
|
-
[data-ui][data-
|
|
2126
|
+
[data-ui][data-mode] :where(hgroup) {
|
|
1670
2127
|
display: grid;
|
|
1671
2128
|
gap: .35rem;
|
|
1672
2129
|
margin-block: 0 1rem;
|
|
1673
2130
|
}
|
|
1674
2131
|
|
|
1675
|
-
[data-ui][data-
|
|
1676
|
-
[data-ui][data-
|
|
1677
|
-
[data-ui][data-
|
|
2132
|
+
[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
2133
|
+
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
2134
|
+
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
1678
2135
|
|
|
1679
|
-
[data-ui][data-
|
|
2136
|
+
[data-ui][data-mode] :where(p) {
|
|
1680
2137
|
margin: 0 0 1rem;
|
|
1681
2138
|
color: var(--usk-native-text-muted);
|
|
1682
2139
|
line-height: 1.7;
|
|
1683
2140
|
}
|
|
1684
2141
|
|
|
1685
|
-
[data-ui][data-
|
|
2142
|
+
[data-ui][data-mode] :where(a) {
|
|
1686
2143
|
color: var(--usk-native-link);
|
|
1687
2144
|
text-decoration-thickness: .08em;
|
|
1688
2145
|
text-underline-offset: .18em;
|
|
1689
2146
|
}
|
|
1690
2147
|
|
|
1691
|
-
[data-ui][data-
|
|
2148
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
|
|
1692
2149
|
|
|
1693
|
-
[data-ui][data-
|
|
2150
|
+
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
1694
2151
|
margin: 0 0 1rem;
|
|
1695
2152
|
padding-left: 1.35rem;
|
|
1696
2153
|
color: var(--usk-native-text-muted);
|
|
1697
2154
|
}
|
|
1698
2155
|
|
|
1699
|
-
[data-ui][data-
|
|
2156
|
+
[data-ui][data-mode] :where(li) { margin-block: .25rem; }
|
|
1700
2157
|
|
|
1701
|
-
[data-ui][data-
|
|
2158
|
+
[data-ui][data-mode] :where(blockquote) {
|
|
1702
2159
|
margin: 1.25rem 0;
|
|
1703
2160
|
padding: 1rem 1.25rem;
|
|
1704
2161
|
color: var(--usk-native-text);
|
|
@@ -1707,7 +2164,7 @@
|
|
|
1707
2164
|
border-radius: var(--usk-native-radius);
|
|
1708
2165
|
}
|
|
1709
2166
|
|
|
1710
|
-
[data-ui][data-
|
|
2167
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
1711
2168
|
padding: .15em .35em;
|
|
1712
2169
|
color: var(--usk-native-text);
|
|
1713
2170
|
background: var(--usk-native-surface-soft);
|
|
@@ -1717,7 +2174,7 @@
|
|
|
1717
2174
|
font-size: .92em;
|
|
1718
2175
|
}
|
|
1719
2176
|
|
|
1720
|
-
[data-ui][data-
|
|
2177
|
+
[data-ui][data-mode] :where(pre) {
|
|
1721
2178
|
overflow: auto;
|
|
1722
2179
|
margin: 1rem 0;
|
|
1723
2180
|
padding: 1rem;
|
|
@@ -1727,57 +2184,88 @@
|
|
|
1727
2184
|
border-radius: var(--usk-native-radius);
|
|
1728
2185
|
}
|
|
1729
2186
|
|
|
1730
|
-
[data-ui][data-
|
|
2187
|
+
[data-ui][data-mode] :where(pre code) {
|
|
1731
2188
|
display: block;
|
|
1732
2189
|
padding: 0;
|
|
1733
2190
|
background: transparent;
|
|
1734
2191
|
border: 0;
|
|
1735
2192
|
}
|
|
1736
2193
|
|
|
1737
|
-
[data-ui][data-
|
|
2194
|
+
[data-ui][data-mode] :where(hr) {
|
|
1738
2195
|
height: 1px;
|
|
1739
2196
|
margin: 2rem 0;
|
|
1740
2197
|
background: var(--usk-native-border);
|
|
1741
2198
|
border: 0;
|
|
1742
2199
|
}
|
|
1743
2200
|
|
|
1744
|
-
[data-ui][data-
|
|
2201
|
+
[data-ui][data-mode] :where(mark) {
|
|
1745
2202
|
padding-inline: .15em;
|
|
1746
2203
|
color: var(--usk-native-text);
|
|
1747
2204
|
background: rgb(var(--usk-warning-rgb) / .32);
|
|
1748
2205
|
border-radius: .2em;
|
|
1749
2206
|
}
|
|
1750
2207
|
|
|
1751
|
-
[data-ui][data-
|
|
1752
|
-
[data-ui][data-
|
|
2208
|
+
[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
|
|
2209
|
+
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
|
|
1753
2210
|
|
|
1754
|
-
[data-ui][data-
|
|
2211
|
+
[data-ui][data-mode] :where(abbr[title]) {
|
|
1755
2212
|
text-decoration: underline dotted var(--usk-native-primary);
|
|
1756
2213
|
text-underline-offset: .18em;
|
|
1757
2214
|
cursor: help;
|
|
1758
2215
|
}
|
|
1759
2216
|
|
|
1760
|
-
[data-ui][data-
|
|
2217
|
+
[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
|
|
1761
2218
|
max-width: 100%;
|
|
1762
2219
|
}
|
|
1763
2220
|
|
|
1764
|
-
[data-ui][data-
|
|
2221
|
+
[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
|
|
2222
|
+
|
|
2223
|
+
/** Native playback retains browser accessibility while inheriting preset material and geometry. */
|
|
2224
|
+
[data-ui][data-mode] audio[controls] {
|
|
2225
|
+
display: block;
|
|
2226
|
+
box-sizing: border-box;
|
|
2227
|
+
inline-size: 100%;
|
|
2228
|
+
min-inline-size: 0;
|
|
2229
|
+
block-size: 60px;
|
|
2230
|
+
padding: 3px;
|
|
2231
|
+
background: var(--usk-native-control-bg);
|
|
2232
|
+
color: var(--usk-native-text);
|
|
2233
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2234
|
+
border-radius: var(--usk-native-radius);
|
|
2235
|
+
box-shadow: var(--usk-native-shadow);
|
|
2236
|
+
accent-color: var(--usk-native-primary);
|
|
2237
|
+
color-scheme: light;
|
|
2238
|
+
}
|
|
2239
|
+
[data-ui][data-mode="dark"] audio[controls],
|
|
2240
|
+
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
|
|
2241
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
|
|
2242
|
+
border-radius: var(--usk-native-radius);
|
|
2243
|
+
background: transparent;
|
|
2244
|
+
}
|
|
2245
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
|
|
2246
|
+
background: var(--usk-native-control-bg);
|
|
2247
|
+
color: var(--usk-native-text);
|
|
2248
|
+
}
|
|
2249
|
+
[data-ui][data-mode] audio[controls]:focus-visible {
|
|
2250
|
+
outline: 2px solid var(--usk-native-focus);
|
|
2251
|
+
outline-offset: 2px;
|
|
2252
|
+
}
|
|
1765
2253
|
|
|
1766
|
-
[data-ui][data-
|
|
2254
|
+
[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
|
|
1767
2255
|
|
|
1768
|
-
[data-ui][data-
|
|
2256
|
+
[data-ui][data-mode] :where(figcaption) {
|
|
1769
2257
|
margin-top: .5rem;
|
|
1770
2258
|
color: var(--usk-native-text-muted);
|
|
1771
2259
|
font-size: .9rem;
|
|
1772
2260
|
}
|
|
1773
2261
|
|
|
1774
|
-
[data-ui][data-
|
|
2262
|
+
[data-ui][data-mode] :where(form) {
|
|
1775
2263
|
display: grid;
|
|
1776
2264
|
gap: var(--usk-native-field-gap);
|
|
1777
2265
|
min-inline-size: 0;
|
|
1778
2266
|
}
|
|
1779
2267
|
|
|
1780
|
-
[data-ui][data-
|
|
2268
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
1781
2269
|
display: grid;
|
|
1782
2270
|
gap: .9rem;
|
|
1783
2271
|
min-inline-size: 0;
|
|
@@ -1788,30 +2276,30 @@
|
|
|
1788
2276
|
border-radius: var(--usk-native-radius);
|
|
1789
2277
|
}
|
|
1790
2278
|
|
|
1791
|
-
[data-ui][data-
|
|
2279
|
+
[data-ui][data-mode] :where(legend) {
|
|
1792
2280
|
padding-inline: .35rem;
|
|
1793
2281
|
color: var(--usk-native-text);
|
|
1794
2282
|
font-weight: 900;
|
|
1795
2283
|
}
|
|
1796
2284
|
|
|
1797
|
-
[data-ui][data-
|
|
2285
|
+
[data-ui][data-mode] :where(label) {
|
|
1798
2286
|
color: var(--usk-native-text);
|
|
1799
2287
|
font-weight: 750;
|
|
1800
2288
|
}
|
|
1801
2289
|
|
|
1802
|
-
[data-ui][data-
|
|
2290
|
+
[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
|
|
1803
2291
|
display: grid;
|
|
1804
2292
|
gap: var(--usk-native-field-gap);
|
|
1805
2293
|
align-content: start;
|
|
1806
2294
|
}
|
|
1807
2295
|
|
|
1808
|
-
[data-ui][data-
|
|
2296
|
+
[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
|
|
1809
2297
|
display: inline-flex;
|
|
1810
2298
|
gap: var(--usk-native-field-gap);
|
|
1811
2299
|
align-items: center;
|
|
1812
2300
|
}
|
|
1813
2301
|
|
|
1814
|
-
[data-ui][data-
|
|
2302
|
+
[data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
1815
2303
|
width: 100%;
|
|
1816
2304
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
1817
2305
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -1822,24 +2310,44 @@
|
|
|
1822
2310
|
font: inherit;
|
|
1823
2311
|
}
|
|
1824
2312
|
|
|
1825
|
-
[data-ui][data-
|
|
2313
|
+
[data-ui][data-mode] :where(input, textarea, select, button) {
|
|
1826
2314
|
color-scheme: inherit;
|
|
1827
2315
|
accent-color: var(--usk-native-primary);
|
|
1828
2316
|
}
|
|
1829
2317
|
|
|
1830
|
-
[data-ui][data-
|
|
2318
|
+
[data-ui][data-mode] :where(input, textarea)::placeholder {
|
|
1831
2319
|
color: var(--usk-native-text-muted);
|
|
1832
2320
|
opacity: .78;
|
|
1833
2321
|
}
|
|
1834
2322
|
|
|
1835
|
-
[data-ui][data-
|
|
2323
|
+
[data-ui][data-mode] :where(textarea) {
|
|
1836
2324
|
min-height: 7rem;
|
|
1837
2325
|
resize: vertical;
|
|
1838
2326
|
}
|
|
1839
2327
|
|
|
1840
|
-
[data-ui][data-
|
|
2328
|
+
[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
2329
|
+
|
|
2330
|
+
[data-ui][data-mode] :where(select:not([multiple])) {
|
|
2331
|
+
-webkit-appearance: none;
|
|
2332
|
+
appearance: none;
|
|
2333
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
2334
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
2335
|
+
background-repeat: no-repeat;
|
|
2336
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
2337
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2340
|
+
[data-ui][data-mode] :where(select[multiple]) {
|
|
2341
|
+
padding-inline-end: var(--usk-native-control-padding-inline);
|
|
2342
|
+
background-image: none;
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
|
|
2346
|
+
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
|
|
2347
|
+
--usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
|
|
2348
|
+
}
|
|
1841
2349
|
|
|
1842
|
-
[data-ui][data-
|
|
2350
|
+
[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
1843
2351
|
-webkit-appearance: none;
|
|
1844
2352
|
appearance: none;
|
|
1845
2353
|
box-sizing: border-box;
|
|
@@ -1848,7 +2356,7 @@
|
|
|
1848
2356
|
font: inherit;
|
|
1849
2357
|
}
|
|
1850
2358
|
|
|
1851
|
-
[data-ui][data-
|
|
2359
|
+
[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
1852
2360
|
color: var(--usk-native-on-primary);
|
|
1853
2361
|
background: var(--usk-native-primary);
|
|
1854
2362
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -1859,29 +2367,56 @@
|
|
|
1859
2367
|
}
|
|
1860
2368
|
|
|
1861
2369
|
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
1862
|
-
[data-ui][data-
|
|
2370
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
|
|
1863
2371
|
display: inline-flex;
|
|
1864
2372
|
align-items: center;
|
|
1865
2373
|
justify-content: center;
|
|
1866
2374
|
gap: .55rem;
|
|
1867
2375
|
}
|
|
1868
2376
|
|
|
1869
|
-
[data-ui][data-
|
|
2377
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
|
|
1870
2378
|
flex: 0 0 1em;
|
|
1871
2379
|
}
|
|
1872
2380
|
|
|
1873
|
-
[data-ui][data-
|
|
2381
|
+
[data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
|
|
1874
2382
|
background: var(--usk-native-primary-hover);
|
|
1875
2383
|
border-color: var(--usk-native-primary-hover);
|
|
1876
2384
|
}
|
|
1877
2385
|
|
|
1878
|
-
[data-ui][data-
|
|
1879
|
-
|
|
1880
|
-
|
|
2386
|
+
[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
2387
|
+
-webkit-appearance: none;
|
|
2388
|
+
appearance: none;
|
|
2389
|
+
inline-size: var(--usk-native-choice-size);
|
|
2390
|
+
block-size: var(--usk-native-choice-size);
|
|
2391
|
+
background: var(--usk-native-choice-background);
|
|
2392
|
+
border: var(--usk-native-choice-border);
|
|
2393
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
1881
2394
|
accent-color: var(--usk-native-primary);
|
|
1882
2395
|
}
|
|
1883
2396
|
|
|
1884
|
-
[data-ui][data-
|
|
2397
|
+
[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
|
|
2398
|
+
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
|
|
2399
|
+
|
|
2400
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
|
|
2401
|
+
background-color: var(--usk-native-choice-checked-background);
|
|
2402
|
+
background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
|
|
2406
|
+
border-color: var(--usk-native-primary);
|
|
2407
|
+
filter: brightness(1.04);
|
|
2408
|
+
}
|
|
2409
|
+
|
|
2410
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
|
|
2411
|
+
filter: brightness(.94);
|
|
2412
|
+
transform: scale(.94);
|
|
2413
|
+
}
|
|
2414
|
+
|
|
2415
|
+
[data-ui][data-mode] :where(input[type="radio"]:checked) {
|
|
2416
|
+
background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
|
|
2417
|
+
}
|
|
2418
|
+
|
|
2419
|
+
[data-ui][data-mode] :where(input[type="range"]) {
|
|
1885
2420
|
-webkit-appearance: none;
|
|
1886
2421
|
appearance: none;
|
|
1887
2422
|
width: 100%;
|
|
@@ -1890,40 +2425,50 @@
|
|
|
1890
2425
|
accent-color: var(--usk-native-primary);
|
|
1891
2426
|
}
|
|
1892
2427
|
|
|
1893
|
-
[data-ui][data-
|
|
1894
|
-
block-size:
|
|
1895
|
-
background: var(--usk-native-track);
|
|
1896
|
-
border
|
|
2428
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
2429
|
+
block-size: var(--usk-native-range-track-size);
|
|
2430
|
+
background: var(--usk-native-range-track-background);
|
|
2431
|
+
border: var(--usk-native-range-track-border);
|
|
2432
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2433
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
1897
2434
|
}
|
|
1898
2435
|
|
|
1899
|
-
[data-ui][data-
|
|
1900
|
-
block-size:
|
|
1901
|
-
background: var(--usk-native-track);
|
|
1902
|
-
border
|
|
2436
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
2437
|
+
block-size: var(--usk-native-range-track-size);
|
|
2438
|
+
background: var(--usk-native-range-track-background);
|
|
2439
|
+
border: var(--usk-native-range-track-border);
|
|
2440
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2441
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
|
|
2445
|
+
block-size: var(--usk-native-range-track-size);
|
|
2446
|
+
background: var(--usk-native-range-progress-background);
|
|
2447
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
1903
2448
|
}
|
|
1904
2449
|
|
|
1905
|
-
[data-ui][data-
|
|
2450
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
1906
2451
|
-webkit-appearance: none;
|
|
1907
2452
|
appearance: none;
|
|
1908
|
-
inline-size:
|
|
1909
|
-
block-size:
|
|
1910
|
-
margin-block-start:
|
|
1911
|
-
background: var(--usk-native-thumb);
|
|
1912
|
-
border: var(--usk-native-
|
|
1913
|
-
border-radius:
|
|
1914
|
-
box-shadow: var(--usk-native-shadow);
|
|
2453
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2454
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2455
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
|
|
2456
|
+
background: var(--usk-native-range-thumb-background);
|
|
2457
|
+
border: var(--usk-native-range-thumb-border);
|
|
2458
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2459
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1915
2460
|
}
|
|
1916
2461
|
|
|
1917
|
-
[data-ui][data-
|
|
1918
|
-
inline-size:
|
|
1919
|
-
block-size:
|
|
1920
|
-
background: var(--usk-native-thumb);
|
|
1921
|
-
border: var(--usk-native-
|
|
1922
|
-
border-radius:
|
|
1923
|
-
box-shadow: var(--usk-native-shadow);
|
|
2462
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
2463
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2464
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2465
|
+
background: var(--usk-native-range-thumb-background);
|
|
2466
|
+
border: var(--usk-native-range-thumb-border);
|
|
2467
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2468
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1924
2469
|
}
|
|
1925
2470
|
|
|
1926
|
-
[data-ui][data-
|
|
2471
|
+
[data-ui][data-mode] :where(input[type="color"]) {
|
|
1927
2472
|
inline-size: 3rem;
|
|
1928
2473
|
block-size: 2.4rem;
|
|
1929
2474
|
padding: .2rem;
|
|
@@ -1932,84 +2477,86 @@
|
|
|
1932
2477
|
border-radius: var(--usk-native-radius-sm);
|
|
1933
2478
|
}
|
|
1934
2479
|
|
|
1935
|
-
[data-ui][data-
|
|
2480
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
|
|
1936
2481
|
padding: 0;
|
|
1937
2482
|
}
|
|
1938
2483
|
|
|
1939
|
-
[data-ui][data-
|
|
1940
|
-
border:
|
|
1941
|
-
border-radius:
|
|
2484
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
|
|
2485
|
+
border: var(--usk-native-color-swatch-border);
|
|
2486
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1942
2487
|
}
|
|
1943
2488
|
|
|
1944
|
-
[data-ui][data-
|
|
1945
|
-
border:
|
|
1946
|
-
border-radius:
|
|
2489
|
+
[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
|
|
2490
|
+
border: var(--usk-native-color-swatch-border);
|
|
2491
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1947
2492
|
}
|
|
1948
2493
|
|
|
1949
|
-
[data-ui][data-
|
|
2494
|
+
[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
|
|
1950
2495
|
|
|
1951
2496
|
/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
|
|
1952
|
-
[data-ui][data-
|
|
1953
|
-
[data-ui][data-
|
|
2497
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2498
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
1954
2499
|
margin-inline-end: .75rem;
|
|
1955
2500
|
padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
|
|
1956
2501
|
color: var(--usk-native-on-primary);
|
|
1957
|
-
background: var(--usk-native-
|
|
1958
|
-
border: var(--usk-native-
|
|
1959
|
-
border-radius: var(--usk-native-radius
|
|
2502
|
+
background: var(--usk-native-file-button-background);
|
|
2503
|
+
border: var(--usk-native-file-button-border);
|
|
2504
|
+
border-radius: var(--usk-native-file-button-radius);
|
|
2505
|
+
box-shadow: var(--usk-native-file-button-shadow);
|
|
1960
2506
|
font-weight: 800;
|
|
1961
2507
|
cursor: pointer;
|
|
1962
2508
|
}
|
|
1963
2509
|
|
|
1964
|
-
[data-ui][data-
|
|
1965
|
-
[data-ui][data-
|
|
2510
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
|
|
2511
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
|
|
1966
2512
|
background: var(--usk-native-primary-hover);
|
|
1967
2513
|
border-color: var(--usk-native-primary-hover);
|
|
1968
2514
|
}
|
|
1969
2515
|
|
|
1970
|
-
[data-ui][data-
|
|
1971
|
-
[data-ui][data-
|
|
2516
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
|
|
2517
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
|
|
1972
2518
|
box-shadow: var(--usk-native-focus-ring);
|
|
1973
2519
|
}
|
|
1974
2520
|
|
|
1975
|
-
[data-ui][data-
|
|
1976
|
-
[data-ui][data-
|
|
2521
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
|
|
2522
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
|
|
1977
2523
|
filter: brightness(.96);
|
|
1978
2524
|
}
|
|
1979
2525
|
|
|
1980
|
-
[data-ui][data-
|
|
1981
|
-
[data-ui][data-
|
|
2526
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
|
|
2527
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
|
|
1982
2528
|
color: var(--usk-native-text-muted);
|
|
1983
2529
|
background: var(--usk-native-surface-soft);
|
|
1984
2530
|
border-color: var(--usk-native-border);
|
|
1985
2531
|
cursor: not-allowed;
|
|
1986
2532
|
}
|
|
1987
2533
|
|
|
1988
|
-
[data-ui][data-
|
|
2534
|
+
[data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
|
|
1989
2535
|
background: var(--usk-native-surface-soft);
|
|
1990
2536
|
}
|
|
1991
2537
|
|
|
1992
|
-
[data-ui][data-
|
|
2538
|
+
[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
|
|
1993
2539
|
box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
|
|
1994
2540
|
}
|
|
1995
2541
|
|
|
1996
|
-
[data-ui][data-
|
|
2542
|
+
[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
|
|
1997
2543
|
border-color: var(--usk-native-success);
|
|
1998
2544
|
}
|
|
1999
2545
|
|
|
2000
|
-
[data-ui][data-
|
|
2546
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2001
2547
|
border-color: var(--usk-native-danger);
|
|
2002
2548
|
}
|
|
2003
2549
|
|
|
2004
|
-
[data-ui][data-
|
|
2550
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
|
|
2551
|
+
background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
|
|
2005
2552
|
accent-color: var(--usk-native-warning);
|
|
2006
2553
|
}
|
|
2007
2554
|
|
|
2008
|
-
[data-ui][data-
|
|
2555
|
+
[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
|
|
2009
2556
|
filter: brightness(.96);
|
|
2010
2557
|
}
|
|
2011
2558
|
|
|
2012
|
-
[data-ui][data-
|
|
2559
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2013
2560
|
color: var(--usk-native-text-muted);
|
|
2014
2561
|
background: var(--usk-native-surface-soft);
|
|
2015
2562
|
border-color: var(--usk-native-border);
|
|
@@ -2018,37 +2565,36 @@
|
|
|
2018
2565
|
cursor: not-allowed;
|
|
2019
2566
|
}
|
|
2020
2567
|
|
|
2021
|
-
[data-ui][data-
|
|
2568
|
+
[data-ui][data-mode] :where(table) {
|
|
2022
2569
|
width: 100%;
|
|
2023
2570
|
margin: 1rem 0;
|
|
2024
|
-
overflow: hidden;
|
|
2025
2571
|
background: var(--usk-native-surface);
|
|
2026
2572
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2027
2573
|
border-radius: var(--usk-native-radius);
|
|
2028
2574
|
border-collapse: collapse;
|
|
2029
2575
|
}
|
|
2030
2576
|
|
|
2031
|
-
[data-ui][data-
|
|
2577
|
+
[data-ui][data-mode] :where(caption) {
|
|
2032
2578
|
caption-side: bottom;
|
|
2033
2579
|
padding: .75rem;
|
|
2034
2580
|
color: var(--usk-native-text-muted);
|
|
2035
2581
|
font-size: .9rem;
|
|
2036
2582
|
}
|
|
2037
2583
|
|
|
2038
|
-
[data-ui][data-
|
|
2584
|
+
[data-ui][data-mode] :where(th, td) {
|
|
2039
2585
|
padding: .8rem .9rem;
|
|
2040
2586
|
text-align: left;
|
|
2041
2587
|
border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2042
2588
|
}
|
|
2043
2589
|
|
|
2044
|
-
[data-ui][data-
|
|
2590
|
+
[data-ui][data-mode] :where(th) {
|
|
2045
2591
|
color: var(--usk-native-text);
|
|
2046
2592
|
background: var(--usk-native-surface-soft);
|
|
2047
2593
|
}
|
|
2048
2594
|
|
|
2049
|
-
[data-ui][data-
|
|
2595
|
+
[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
2050
2596
|
|
|
2051
|
-
[data-ui][data-
|
|
2597
|
+
[data-ui][data-mode] :where(details) {
|
|
2052
2598
|
margin: 1rem 0;
|
|
2053
2599
|
padding: .9rem 1rem;
|
|
2054
2600
|
color: var(--usk-native-text);
|
|
@@ -2057,13 +2603,13 @@
|
|
|
2057
2603
|
border-radius: var(--usk-native-radius);
|
|
2058
2604
|
}
|
|
2059
2605
|
|
|
2060
|
-
[data-ui][data-
|
|
2606
|
+
[data-ui][data-mode] :where(summary) {
|
|
2061
2607
|
color: var(--usk-native-text);
|
|
2062
2608
|
font-weight: 900;
|
|
2063
2609
|
cursor: pointer;
|
|
2064
2610
|
}
|
|
2065
2611
|
|
|
2066
|
-
[data-ui][data-
|
|
2612
|
+
[data-ui][data-mode] :where(dialog) {
|
|
2067
2613
|
max-width: min(92vw, 42rem);
|
|
2068
2614
|
padding: 0;
|
|
2069
2615
|
color: var(--usk-native-text);
|
|
@@ -2073,47 +2619,68 @@
|
|
|
2073
2619
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
2074
2620
|
}
|
|
2075
2621
|
|
|
2076
|
-
[data-ui][data-
|
|
2622
|
+
[data-ui][data-mode] :where(dialog p) { color: inherit; }
|
|
2077
2623
|
|
|
2078
|
-
[data-ui][data-
|
|
2624
|
+
[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
2079
2625
|
|
|
2080
|
-
[data-ui][data-
|
|
2626
|
+
[data-ui][data-mode] :where(progress, meter) {
|
|
2627
|
+
-webkit-appearance: none;
|
|
2628
|
+
appearance: none;
|
|
2081
2629
|
width: 100%;
|
|
2082
|
-
min-height:
|
|
2630
|
+
min-height: var(--usk-native-progress-size);
|
|
2083
2631
|
accent-color: var(--usk-native-primary);
|
|
2084
2632
|
}
|
|
2085
2633
|
|
|
2086
|
-
[data-ui][data-
|
|
2087
|
-
|
|
2088
|
-
background:
|
|
2089
|
-
border
|
|
2634
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2635
|
+
background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
|
|
2636
|
+
background-size: 200% 100%;
|
|
2637
|
+
border: var(--usk-native-progress-track-border);
|
|
2638
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2639
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2640
|
+
animation: usk-native-progress-indeterminate 1.2s linear infinite;
|
|
2090
2641
|
}
|
|
2091
2642
|
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
background: var(--usk-native-track-fill);
|
|
2095
|
-
border-radius: inherit;
|
|
2643
|
+
@keyframes usk-native-progress-indeterminate {
|
|
2644
|
+
to { background-position: -2rem 0; }
|
|
2096
2645
|
}
|
|
2097
2646
|
|
|
2098
|
-
[data-ui][data-
|
|
2099
|
-
[data-ui][data-
|
|
2100
|
-
background: var(--usk-native-track-
|
|
2101
|
-
border
|
|
2647
|
+
[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
|
|
2648
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
|
|
2649
|
+
background: var(--usk-native-progress-track-background);
|
|
2650
|
+
border: var(--usk-native-progress-track-border);
|
|
2651
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2652
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
[data-ui][data-mode] :where(progress)::-webkit-progress-value,
|
|
2656
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
|
|
2657
|
+
background: var(--usk-native-progress-value-background);
|
|
2658
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2659
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2660
|
+
}
|
|
2661
|
+
|
|
2662
|
+
[data-ui][data-mode] :where(progress)::-moz-progress-bar,
|
|
2663
|
+
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
|
|
2664
|
+
background: var(--usk-native-progress-value-background);
|
|
2665
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2666
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2102
2667
|
}
|
|
2103
2668
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
2669
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
|
|
2670
|
+
|
|
2671
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
|
|
2672
|
+
background: var(--usk-native-meter-suboptimum-background);
|
|
2106
2673
|
}
|
|
2107
2674
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
background: var(--usk-native-
|
|
2675
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
|
|
2676
|
+
background: var(--usk-native-meter-critical-background);
|
|
2110
2677
|
}
|
|
2111
2678
|
|
|
2112
|
-
[data-ui][data-
|
|
2679
|
+
[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
|
|
2113
2680
|
color: var(--usk-native-text);
|
|
2114
2681
|
}
|
|
2115
2682
|
|
|
2116
|
-
[data-ui][data-
|
|
2683
|
+
[data-ui][data-mode] :where(article, aside) {
|
|
2117
2684
|
padding: var(--usk-native-panel-padding);
|
|
2118
2685
|
color: var(--usk-native-text);
|
|
2119
2686
|
background: var(--usk-native-card-bg);
|
|
@@ -2122,113 +2689,132 @@
|
|
|
2122
2689
|
box-shadow: var(--usk-native-shadow);
|
|
2123
2690
|
}
|
|
2124
2691
|
|
|
2125
|
-
[data-ui][data-
|
|
2692
|
+
[data-ui][data-mode] :where(dl) {
|
|
2126
2693
|
margin: 0 0 1rem;
|
|
2127
2694
|
color: var(--usk-native-text-muted);
|
|
2128
2695
|
}
|
|
2129
2696
|
|
|
2130
|
-
[data-ui][data-
|
|
2697
|
+
[data-ui][data-mode] :where(dt) {
|
|
2131
2698
|
color: var(--usk-native-text);
|
|
2132
2699
|
font-weight: 900;
|
|
2133
2700
|
}
|
|
2134
2701
|
|
|
2135
|
-
[data-ui][data-
|
|
2136
|
-
[data-ui][data-
|
|
2137
|
-
[data-ui][data-
|
|
2138
|
-
[data-ui][data-
|
|
2139
|
-
[data-ui][data-
|
|
2140
|
-
[data-ui][data-
|
|
2141
|
-
[data-ui][data-
|
|
2142
|
-
[data-ui][data-
|
|
2143
|
-
[data-ui][data-
|
|
2144
|
-
[data-ui][data-
|
|
2145
|
-
[data-ui][data-
|
|
2146
|
-
[data-ui][data-
|
|
2147
|
-
[data-ui][data-
|
|
2148
|
-
|
|
2149
|
-
[data-ui][data-
|
|
2702
|
+
[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
|
|
2703
|
+
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
|
|
2704
|
+
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
2705
|
+
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
|
|
2706
|
+
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
|
|
2707
|
+
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
|
|
2708
|
+
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
|
|
2709
|
+
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
|
|
2710
|
+
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
|
|
2711
|
+
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
|
|
2712
|
+
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
|
|
2713
|
+
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
|
|
2714
|
+
[data-ui][data-mode] :where(datalist) { display: none; }
|
|
2715
|
+
|
|
2716
|
+
[data-ui][data-mode] :where(summary, li)::marker {
|
|
2150
2717
|
color: var(--usk-native-indicator);
|
|
2151
2718
|
}
|
|
2152
2719
|
|
|
2153
|
-
[data-ui][data-
|
|
2154
|
-
opacity:
|
|
2720
|
+
[data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
|
|
2721
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2722
|
+
filter: var(--usk-native-indicator-filter);
|
|
2155
2723
|
accent-color: var(--usk-native-indicator);
|
|
2156
2724
|
}
|
|
2157
2725
|
|
|
2158
|
-
[data-ui][data-
|
|
2726
|
+
[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
|
|
2159
2727
|
accent-color: var(--usk-native-indicator);
|
|
2160
2728
|
}
|
|
2161
2729
|
|
|
2162
|
-
[data-ui][data-
|
|
2163
|
-
[data-ui][data-
|
|
2730
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
|
|
2731
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
|
|
2164
2732
|
opacity: .72;
|
|
2165
2733
|
}
|
|
2166
2734
|
|
|
2167
|
-
[data-ui][data-
|
|
2735
|
+
[data-ui][data-mode] :where(select)::picker-icon {
|
|
2168
2736
|
color: var(--usk-native-indicator);
|
|
2737
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2738
|
+
filter: var(--usk-native-indicator-filter);
|
|
2169
2739
|
}
|
|
2170
2740
|
|
|
2171
|
-
[data-ui][data-
|
|
2741
|
+
[data-ui][data-mode] :where(:focus-visible) {
|
|
2172
2742
|
outline: 3px solid var(--usk-native-focus);
|
|
2173
2743
|
outline-offset: 3px;
|
|
2174
2744
|
box-shadow: var(--usk-native-focus-ring);
|
|
2175
2745
|
}
|
|
2176
2746
|
|
|
2177
|
-
[data-ui][data-
|
|
2747
|
+
[data-ui][data-mode] :where(:target) {
|
|
2178
2748
|
scroll-margin-top: 6rem;
|
|
2179
2749
|
outline: 3px solid var(--usk-native-focus);
|
|
2180
2750
|
outline-offset: .35rem;
|
|
2181
2751
|
}
|
|
2182
2752
|
|
|
2183
|
-
[data-ui][data-
|
|
2184
|
-
[data-ui][data-
|
|
2185
|
-
[data-ui][data-
|
|
2186
|
-
[data-ui][data-
|
|
2187
|
-
[data-ui][data-
|
|
2188
|
-
[data-ui][data-
|
|
2189
|
-
[data-ui][data-
|
|
2753
|
+
[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
|
|
2754
|
+
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
|
|
2755
|
+
[data-ui][data-mode] :where([hidden]) { display: none !important; }
|
|
2756
|
+
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
|
|
2757
|
+
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
|
|
2758
|
+
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
|
|
2759
|
+
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
|
|
2190
2760
|
|
|
2191
2761
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
2192
|
-
[data-ui][data-
|
|
2762
|
+
[data-ui][data-mode] {
|
|
2193
2763
|
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
2194
2764
|
}
|
|
2195
2765
|
|
|
2196
|
-
[data-ui][data-
|
|
2766
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
2197
2767
|
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
2198
2768
|
}
|
|
2199
2769
|
|
|
2200
|
-
[data-ui][data-
|
|
2770
|
+
[data-ui][data-mode] :where(mark) {
|
|
2201
2771
|
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
2202
2772
|
}
|
|
2203
2773
|
|
|
2204
|
-
[data-ui][data-
|
|
2774
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
2205
2775
|
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
2206
2776
|
}
|
|
2207
2777
|
|
|
2208
|
-
[data-ui][data-
|
|
2778
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2209
2779
|
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
2210
2780
|
}
|
|
2211
2781
|
|
|
2212
|
-
[data-ui][data-
|
|
2782
|
+
[data-ui][data-mode] :where(th) {
|
|
2213
2783
|
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
2214
2784
|
}
|
|
2215
2785
|
}
|
|
2216
2786
|
|
|
2217
2787
|
@media (prefers-reduced-motion: reduce) {
|
|
2218
|
-
[data-ui][data-
|
|
2219
|
-
[data-ui][data-
|
|
2788
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2789
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
2220
2790
|
transition-duration: 1ms !important;
|
|
2221
2791
|
}
|
|
2792
|
+
|
|
2793
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2794
|
+
animation: none;
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
|
|
2799
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
|
|
2800
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
|
|
2801
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
|
|
2802
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
|
|
2803
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
|
|
2804
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
|
|
2805
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
|
|
2806
|
+
box-shadow: none;
|
|
2807
|
+
filter: none;
|
|
2222
2808
|
}
|
|
2223
2809
|
|
|
2224
2810
|
@media (forced-colors: active) {
|
|
2225
2811
|
@supports (forced-color-adjust: auto) {
|
|
2226
|
-
[data-ui][data-
|
|
2812
|
+
[data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
2227
2813
|
forced-color-adjust: auto;
|
|
2228
2814
|
}
|
|
2229
2815
|
}
|
|
2230
2816
|
|
|
2231
|
-
[data-ui][data-
|
|
2817
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2232
2818
|
border-color: Mark;
|
|
2233
2819
|
}
|
|
2234
2820
|
}
|
|
@@ -2244,7 +2830,7 @@
|
|
|
2244
2830
|
========================================================= */
|
|
2245
2831
|
|
|
2246
2832
|
@layer ui-style-kit.components {
|
|
2247
|
-
[data-ui][data-
|
|
2833
|
+
[data-ui][data-mode] :where(
|
|
2248
2834
|
h1,
|
|
2249
2835
|
h2,
|
|
2250
2836
|
h3,
|
|
@@ -2261,6 +2847,9 @@
|
|
|
2261
2847
|
label,
|
|
2262
2848
|
legend,
|
|
2263
2849
|
summary,
|
|
2850
|
+
strong,
|
|
2851
|
+
small,
|
|
2852
|
+
em,
|
|
2264
2853
|
code,
|
|
2265
2854
|
kbd,
|
|
2266
2855
|
samp,
|
|
@@ -2270,10 +2859,11 @@
|
|
|
2270
2859
|
) {
|
|
2271
2860
|
max-inline-size: 100%;
|
|
2272
2861
|
min-inline-size: 0;
|
|
2273
|
-
overflow-wrap:
|
|
2862
|
+
overflow-wrap: break-word;
|
|
2863
|
+
word-break: normal;
|
|
2274
2864
|
}
|
|
2275
2865
|
|
|
2276
|
-
[data-ui][data-
|
|
2866
|
+
[data-ui][data-mode] :where(
|
|
2277
2867
|
[class~="saas-surface"],
|
|
2278
2868
|
[class~="saas-surface-sm"],
|
|
2279
2869
|
[class~="saas-surface-lg"],
|
|
@@ -2395,13 +2985,12 @@
|
|
|
2395
2985
|
[class~="rg-alert"],
|
|
2396
2986
|
[class~="rg-table-wrap"],
|
|
2397
2987
|
[class~="rg-nav"]
|
|
2398
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
2988
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
|
|
2399
2989
|
max-inline-size: 100%;
|
|
2400
2990
|
min-inline-size: 0;
|
|
2401
|
-
overflow-wrap: anywhere;
|
|
2402
2991
|
}
|
|
2403
2992
|
|
|
2404
|
-
[data-ui][data-
|
|
2993
|
+
[data-ui][data-mode] :where(
|
|
2405
2994
|
[class~="saas-button"],
|
|
2406
2995
|
[class~="saas-icon-button"],
|
|
2407
2996
|
[class~="saas-badge"],
|
|
@@ -2446,13 +3035,15 @@
|
|
|
2446
3035
|
[class~="rg-icon-button"],
|
|
2447
3036
|
[class~="rg-badge"],
|
|
2448
3037
|
[class~="rg-nav-link"]
|
|
2449
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
3038
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
|
|
2450
3039
|
max-inline-size: 100%;
|
|
2451
3040
|
min-inline-size: 0;
|
|
3041
|
+
overflow-wrap: break-word;
|
|
3042
|
+
word-break: normal;
|
|
2452
3043
|
white-space: normal;
|
|
2453
3044
|
}
|
|
2454
3045
|
|
|
2455
|
-
[data-ui][data-
|
|
3046
|
+
[data-ui][data-mode] :where(
|
|
2456
3047
|
.saas-button,
|
|
2457
3048
|
.saas-icon-button,
|
|
2458
3049
|
.saas-button-pill,
|
|
@@ -2486,7 +3077,7 @@
|
|
|
2486
3077
|
.rg-button,
|
|
2487
3078
|
.rg-icon-button,
|
|
2488
3079
|
.rg-button-pill
|
|
2489
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
3080
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
|
|
2490
3081
|
box-sizing: border-box;
|
|
2491
3082
|
display: inline-flex;
|
|
2492
3083
|
align-items: center;
|
|
@@ -2498,7 +3089,7 @@
|
|
|
2498
3089
|
vertical-align: middle;
|
|
2499
3090
|
}
|
|
2500
3091
|
|
|
2501
|
-
[data-ui][data-
|
|
3092
|
+
[data-ui][data-mode] :where(
|
|
2502
3093
|
.saas-button-pill,
|
|
2503
3094
|
.bento-button-pill,
|
|
2504
3095
|
.max-button-pill,
|
|
@@ -2521,7 +3112,8 @@
|
|
|
2521
3112
|
font-weight: 850;
|
|
2522
3113
|
text-align: center;
|
|
2523
3114
|
text-decoration: none;
|
|
2524
|
-
overflow-wrap:
|
|
3115
|
+
overflow-wrap: break-word;
|
|
3116
|
+
word-break: normal;
|
|
2525
3117
|
white-space: normal;
|
|
2526
3118
|
cursor: pointer;
|
|
2527
3119
|
transition:
|
|
@@ -2555,7 +3147,7 @@
|
|
|
2555
3147
|
.y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
|
|
2556
3148
|
.rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
|
|
2557
3149
|
|
|
2558
|
-
[data-ui][data-
|
|
3150
|
+
[data-ui][data-mode] :where(
|
|
2559
3151
|
.saas-button-pill:active,
|
|
2560
3152
|
.saas-button-pill[aria-pressed="true"],
|
|
2561
3153
|
.bento-button-pill:active,
|
|
@@ -2594,7 +3186,7 @@
|
|
|
2594
3186
|
.y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
|
|
2595
3187
|
.rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
|
|
2596
3188
|
|
|
2597
|
-
[data-ui][data-
|
|
3189
|
+
[data-ui][data-mode] :where(
|
|
2598
3190
|
.saas-button-pill:disabled,
|
|
2599
3191
|
.saas-button-pill[aria-disabled="true"],
|
|
2600
3192
|
.bento-button-pill:disabled,
|
|
@@ -2624,7 +3216,7 @@
|
|
|
2624
3216
|
transform: none;
|
|
2625
3217
|
}
|
|
2626
3218
|
|
|
2627
|
-
[data-ui][data-
|
|
3219
|
+
[data-ui][data-mode] :where(
|
|
2628
3220
|
.saas-tooltip,
|
|
2629
3221
|
.saas-tooltip-top,
|
|
2630
3222
|
.saas-tooltip-right,
|
|
@@ -2683,16 +3275,17 @@
|
|
|
2683
3275
|
) {
|
|
2684
3276
|
max-inline-size: min(18rem, calc(100vw - 2rem));
|
|
2685
3277
|
text-align: start;
|
|
2686
|
-
overflow-wrap:
|
|
3278
|
+
overflow-wrap: break-word;
|
|
3279
|
+
word-break: normal;
|
|
2687
3280
|
}
|
|
2688
3281
|
|
|
2689
3282
|
/* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
|
|
2690
|
-
[data-ui][data-
|
|
2691
|
-
[data-ui][data-
|
|
3283
|
+
[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
|
|
3284
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
|
|
2692
3285
|
position: relative;
|
|
2693
3286
|
}
|
|
2694
3287
|
|
|
2695
|
-
[data-ui][data-
|
|
3288
|
+
[data-ui][data-mode] :where(
|
|
2696
3289
|
[data-ui-tooltip-anchor] > .saas-tooltip-top,
|
|
2697
3290
|
[data-ui-tooltip-anchor] > .saas-tooltip-right,
|
|
2698
3291
|
[data-ui-tooltip-anchor] > .saas-tooltip-bottom,
|
|
@@ -2742,10 +3335,10 @@
|
|
|
2742
3335
|
z-index: 20;
|
|
2743
3336
|
}
|
|
2744
3337
|
|
|
2745
|
-
[data-ui][data-
|
|
2746
|
-
[data-ui][data-
|
|
2747
|
-
[data-ui][data-
|
|
2748
|
-
[data-ui][data-
|
|
3338
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
3339
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
3340
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
3341
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
2749
3342
|
|
|
2750
3343
|
.saas-pill { border-radius: var(--saas-radius-pill); }
|
|
2751
3344
|
.bento-pill { border-radius: var(--bento-radius-pill); }
|
|
@@ -2811,7 +3404,7 @@
|
|
|
2811
3404
|
.saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
|
|
2812
3405
|
|
|
2813
3406
|
.saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
2814
|
-
color: var(--usk-native-primary);
|
|
3407
|
+
color: var(--usk-primary-ink, var(--usk-native-primary));
|
|
2815
3408
|
background: transparent;
|
|
2816
3409
|
border-color: var(--usk-native-border);
|
|
2817
3410
|
}
|
|
@@ -2895,15 +3488,77 @@
|
|
|
2895
3488
|
}
|
|
2896
3489
|
}
|
|
2897
3490
|
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
.
|
|
3491
|
+
/**
|
|
3492
|
+
* Normalizes the split-line trust seal hierarchy across every visual preset.
|
|
3493
|
+
* Both lines inherit their seal's paired foreground instead of native page-text paint.
|
|
3494
|
+
* The root attributes intentionally raise specificity within the preset layer
|
|
3495
|
+
* so later style-specific defaults cannot collapse the number and caption.
|
|
3496
|
+
*/
|
|
3497
|
+
@layer ui-style-kit.presets {
|
|
3498
|
+
[data-ui][data-mode] :where(
|
|
3499
|
+
.saas-badge-seal,
|
|
3500
|
+
.bento-badge-seal,
|
|
3501
|
+
.max-badge-seal,
|
|
3502
|
+
.bau-badge-seal,
|
|
3503
|
+
.tactile-badge-seal,
|
|
3504
|
+
.neo-badge-seal,
|
|
3505
|
+
.retro-badge-seal,
|
|
3506
|
+
.brutal-badge-seal,
|
|
3507
|
+
.cyber-badge-seal,
|
|
3508
|
+
.y2k-badge-seal,
|
|
3509
|
+
.rg-badge-seal,
|
|
3510
|
+
.luxe-badge-seal,
|
|
3511
|
+
.organic-badge-seal,
|
|
3512
|
+
.utility-badge-seal,
|
|
3513
|
+
.blueprint-badge-seal,
|
|
3514
|
+
.deco-badge-seal,
|
|
3515
|
+
.clay-badge-seal,
|
|
3516
|
+
.terminal-badge-seal,
|
|
3517
|
+
.paper-badge-seal,
|
|
3518
|
+
.noir-badge-seal
|
|
3519
|
+
) > strong {
|
|
3520
|
+
color: inherit;
|
|
3521
|
+
font-size: 1.5rem;
|
|
3522
|
+
line-height: .9;
|
|
3523
|
+
}
|
|
3524
|
+
|
|
3525
|
+
[data-ui][data-mode] :where(
|
|
3526
|
+
.saas-badge-seal,
|
|
3527
|
+
.bento-badge-seal,
|
|
3528
|
+
.max-badge-seal,
|
|
3529
|
+
.bau-badge-seal,
|
|
3530
|
+
.tactile-badge-seal,
|
|
3531
|
+
.neo-badge-seal,
|
|
3532
|
+
.retro-badge-seal,
|
|
3533
|
+
.brutal-badge-seal,
|
|
3534
|
+
.cyber-badge-seal,
|
|
3535
|
+
.y2k-badge-seal,
|
|
3536
|
+
.rg-badge-seal,
|
|
3537
|
+
.luxe-badge-seal,
|
|
3538
|
+
.organic-badge-seal,
|
|
3539
|
+
.utility-badge-seal,
|
|
3540
|
+
.blueprint-badge-seal,
|
|
3541
|
+
.deco-badge-seal,
|
|
3542
|
+
.clay-badge-seal,
|
|
3543
|
+
.terminal-badge-seal,
|
|
3544
|
+
.paper-badge-seal,
|
|
3545
|
+
.noir-badge-seal
|
|
3546
|
+
) > small {
|
|
3547
|
+
color: inherit;
|
|
3548
|
+
font-size: .8125rem;
|
|
3549
|
+
line-height: 1;
|
|
3550
|
+
}
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
3554
|
+
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
3555
|
+
@layer ui-style-kit.components {
|
|
3556
|
+
[data-ui][data-mode] :where(
|
|
3557
|
+
.luxe-surface,
|
|
3558
|
+
.luxe-surface-sm,
|
|
3559
|
+
.luxe-surface-lg,
|
|
3560
|
+
.luxe-card,
|
|
3561
|
+
.luxe-card-service,
|
|
2907
3562
|
.luxe-card-feature,
|
|
2908
3563
|
.luxe-panel,
|
|
2909
3564
|
.luxe-toolbar,
|
|
@@ -3061,13 +3716,12 @@
|
|
|
3061
3716
|
.noir-feature-item,
|
|
3062
3717
|
.noir-callout-bar,
|
|
3063
3718
|
.noir-media-scrim
|
|
3064
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
3719
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
|
|
3065
3720
|
max-inline-size: 100%;
|
|
3066
3721
|
min-inline-size: 0;
|
|
3067
|
-
overflow-wrap: anywhere;
|
|
3068
3722
|
}
|
|
3069
3723
|
|
|
3070
|
-
[data-ui][data-
|
|
3724
|
+
[data-ui][data-mode] :where(
|
|
3071
3725
|
.luxe-button,
|
|
3072
3726
|
.luxe-icon-button,
|
|
3073
3727
|
.luxe-button-cut,
|
|
@@ -3140,13 +3794,15 @@
|
|
|
3140
3794
|
.noir-badge-seal,
|
|
3141
3795
|
.noir-nav-link,
|
|
3142
3796
|
.noir-icon-medallion
|
|
3143
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
3797
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
|
|
3144
3798
|
max-inline-size: 100%;
|
|
3145
3799
|
min-inline-size: 0;
|
|
3800
|
+
overflow-wrap: break-word;
|
|
3801
|
+
word-break: normal;
|
|
3146
3802
|
white-space: normal;
|
|
3147
3803
|
}
|
|
3148
3804
|
|
|
3149
|
-
[data-ui][data-
|
|
3805
|
+
[data-ui][data-mode] :where(
|
|
3150
3806
|
.luxe-button,
|
|
3151
3807
|
.luxe-icon-button,
|
|
3152
3808
|
.luxe-button-pill,
|
|
@@ -3174,7 +3830,7 @@
|
|
|
3174
3830
|
.noir-button,
|
|
3175
3831
|
.noir-icon-button,
|
|
3176
3832
|
.noir-button-pill
|
|
3177
|
-
), [data-ui]:where([data-ui="editorial-luxe"])[data-
|
|
3833
|
+
), [data-ui]:where([data-ui="editorial-luxe"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
|
|
3178
3834
|
box-sizing: border-box;
|
|
3179
3835
|
display: inline-flex;
|
|
3180
3836
|
align-items: center;
|
|
@@ -3186,7 +3842,7 @@
|
|
|
3186
3842
|
vertical-align: middle;
|
|
3187
3843
|
}
|
|
3188
3844
|
|
|
3189
|
-
[data-ui][data-
|
|
3845
|
+
[data-ui][data-mode] :where(
|
|
3190
3846
|
.luxe-button-pill,
|
|
3191
3847
|
.organic-button-pill,
|
|
3192
3848
|
.utility-button-pill,
|
|
@@ -3207,7 +3863,8 @@
|
|
|
3207
3863
|
font-weight: 850;
|
|
3208
3864
|
text-align: center;
|
|
3209
3865
|
text-decoration: none;
|
|
3210
|
-
overflow-wrap:
|
|
3866
|
+
overflow-wrap: break-word;
|
|
3867
|
+
word-break: normal;
|
|
3211
3868
|
white-space: normal;
|
|
3212
3869
|
cursor: pointer;
|
|
3213
3870
|
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
|
@@ -3294,7 +3951,7 @@
|
|
|
3294
3951
|
.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
|
|
3295
3952
|
.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
|
|
3296
3953
|
|
|
3297
|
-
[data-ui][data-
|
|
3954
|
+
[data-ui][data-mode] :where(
|
|
3298
3955
|
.luxe-button-pill:active,
|
|
3299
3956
|
.luxe-button-pill[aria-pressed="true"],
|
|
3300
3957
|
.organic-button-pill:active,
|
|
@@ -3315,7 +3972,7 @@
|
|
|
3315
3972
|
.noir-button-pill[aria-pressed="true"]
|
|
3316
3973
|
) { transform: translateY(1px); }
|
|
3317
3974
|
|
|
3318
|
-
[data-ui][data-
|
|
3975
|
+
[data-ui][data-mode] :where(
|
|
3319
3976
|
.luxe-button-pill:disabled,
|
|
3320
3977
|
.luxe-button-pill[aria-disabled="true"],
|
|
3321
3978
|
.organic-button-pill:disabled,
|
|
@@ -3336,7 +3993,7 @@
|
|
|
3336
3993
|
.noir-button-pill[aria-disabled="true"]
|
|
3337
3994
|
) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
|
|
3338
3995
|
|
|
3339
|
-
[data-ui][data-
|
|
3996
|
+
[data-ui][data-mode] :where(
|
|
3340
3997
|
.luxe-tooltip,
|
|
3341
3998
|
.luxe-tooltip-top,
|
|
3342
3999
|
.luxe-tooltip-right,
|
|
@@ -3382,9 +4039,9 @@
|
|
|
3382
4039
|
.noir-tooltip-right,
|
|
3383
4040
|
.noir-tooltip-bottom,
|
|
3384
4041
|
.noir-tooltip-left
|
|
3385
|
-
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap:
|
|
4042
|
+
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
|
|
3386
4043
|
|
|
3387
|
-
[data-ui][data-
|
|
4044
|
+
[data-ui][data-mode] :where(
|
|
3388
4045
|
[data-ui-tooltip-anchor] > .luxe-tooltip-top,
|
|
3389
4046
|
[data-ui-tooltip-anchor] > .luxe-tooltip-right,
|
|
3390
4047
|
[data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
|
|
@@ -3423,10 +4080,10 @@
|
|
|
3423
4080
|
[data-ui-tooltip-anchor] > .noir-tooltip-left
|
|
3424
4081
|
) { position: absolute; z-index: 20; }
|
|
3425
4082
|
|
|
3426
|
-
[data-ui][data-
|
|
3427
|
-
[data-ui][data-
|
|
3428
|
-
[data-ui][data-
|
|
3429
|
-
[data-ui][data-
|
|
4083
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
4084
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
4085
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
4086
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
3430
4087
|
|
|
3431
4088
|
:where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
|
|
3432
4089
|
:where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
|
|
@@ -3434,7 +4091,7 @@
|
|
|
3434
4091
|
:where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
|
|
3435
4092
|
:where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
|
|
3436
4093
|
|
|
3437
|
-
:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="editorial-luxe"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
|
|
4094
|
+
:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="editorial-luxe"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
|
|
3438
4095
|
|
|
3439
4096
|
:where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="editorial-luxe"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
|
|
3440
4097
|
display: inline-flex;
|
|
@@ -3533,6 +4190,29 @@
|
|
|
3533
4190
|
--lightningcss-light: initial;
|
|
3534
4191
|
--lightningcss-dark: ;
|
|
3535
4192
|
color-scheme: light;
|
|
4193
|
+
--luxe-fallback-bg-rgb: 250 244 234;
|
|
4194
|
+
--luxe-fallback-surface-rgb: 255 253 249;
|
|
4195
|
+
--luxe-fallback-surface-strong-rgb: 255 255 255;
|
|
4196
|
+
--luxe-fallback-surface-soft-rgb: 239 228 207;
|
|
4197
|
+
--luxe-fallback-text-rgb: 42 31 26;
|
|
4198
|
+
--luxe-fallback-text-muted-rgb: 109 92 84;
|
|
4199
|
+
--luxe-fallback-border-rgb: 212 192 166;
|
|
4200
|
+
--luxe-fallback-primary-rgb: 107 15 26;
|
|
4201
|
+
--luxe-fallback-primary-hover-rgb: 91 13 22;
|
|
4202
|
+
--luxe-fallback-primary-text-rgb: 255 255 255;
|
|
4203
|
+
--luxe-fallback-secondary-rgb: 17 17 17;
|
|
4204
|
+
--luxe-fallback-secondary-hover-rgb: 0 0 0;
|
|
4205
|
+
--luxe-fallback-secondary-text-rgb: 255 255 255;
|
|
4206
|
+
--luxe-fallback-accent-rgb: 201 154 70;
|
|
4207
|
+
--luxe-fallback-accent-text-rgb: 0 0 0;
|
|
4208
|
+
--luxe-fallback-success-rgb: 47 125 84;
|
|
4209
|
+
--luxe-fallback-success-text-rgb: 255 255 255;
|
|
4210
|
+
--luxe-fallback-warning-rgb: 160 107 19;
|
|
4211
|
+
--luxe-fallback-warning-text-rgb: 0 0 0;
|
|
4212
|
+
--luxe-fallback-danger-rgb: 178 60 60;
|
|
4213
|
+
--luxe-fallback-danger-text-rgb: 255 255 255;
|
|
4214
|
+
--luxe-fallback-link-rgb: 91 13 22;
|
|
4215
|
+
--luxe-fallback-focus-rgb: 201 154 70;
|
|
3536
4216
|
--luxe-panel-alpha: .98;
|
|
3537
4217
|
--luxe-panel-soft-alpha: .78;
|
|
3538
4218
|
--luxe-border-alpha: .58;
|
|
@@ -3544,6 +4224,29 @@
|
|
|
3544
4224
|
--lightningcss-light: ;
|
|
3545
4225
|
--lightningcss-dark: initial;
|
|
3546
4226
|
color-scheme: dark;
|
|
4227
|
+
--luxe-fallback-bg-rgb: 19 13 10;
|
|
4228
|
+
--luxe-fallback-surface-rgb: 33 24 20;
|
|
4229
|
+
--luxe-fallback-surface-strong-rgb: 50 36 30;
|
|
4230
|
+
--luxe-fallback-surface-soft-rgb: 25 18 15;
|
|
4231
|
+
--luxe-fallback-text-rgb: 251 245 236;
|
|
4232
|
+
--luxe-fallback-text-muted-rgb: 211 195 183;
|
|
4233
|
+
--luxe-fallback-border-rgb: 106 82 62;
|
|
4234
|
+
--luxe-fallback-primary-rgb: 201 138 93;
|
|
4235
|
+
--luxe-fallback-primary-hover-rgb: 224 169 126;
|
|
4236
|
+
--luxe-fallback-primary-text-rgb: 0 0 0;
|
|
4237
|
+
--luxe-fallback-secondary-rgb: 246 235 215;
|
|
4238
|
+
--luxe-fallback-secondary-hover-rgb: 255 248 235;
|
|
4239
|
+
--luxe-fallback-secondary-text-rgb: 0 0 0;
|
|
4240
|
+
--luxe-fallback-accent-rgb: 231 184 95;
|
|
4241
|
+
--luxe-fallback-accent-text-rgb: 0 0 0;
|
|
4242
|
+
--luxe-fallback-success-rgb: 152 224 182;
|
|
4243
|
+
--luxe-fallback-success-text-rgb: 0 0 0;
|
|
4244
|
+
--luxe-fallback-warning-rgb: 255 210 122;
|
|
4245
|
+
--luxe-fallback-warning-text-rgb: 0 0 0;
|
|
4246
|
+
--luxe-fallback-danger-rgb: 255 160 154;
|
|
4247
|
+
--luxe-fallback-danger-text-rgb: 0 0 0;
|
|
4248
|
+
--luxe-fallback-link-rgb: 240 200 125;
|
|
4249
|
+
--luxe-fallback-focus-rgb: 231 184 95;
|
|
3547
4250
|
--luxe-panel-alpha: .92;
|
|
3548
4251
|
--luxe-panel-soft-alpha: .64;
|
|
3549
4252
|
--luxe-border-alpha: .52;
|
|
@@ -3555,6 +4258,29 @@
|
|
|
3555
4258
|
--lightningcss-light: ;
|
|
3556
4259
|
--lightningcss-dark: initial;
|
|
3557
4260
|
color-scheme: dark;
|
|
4261
|
+
--luxe-fallback-bg-rgb: 0 0 0;
|
|
4262
|
+
--luxe-fallback-surface-rgb: 15 10 7;
|
|
4263
|
+
--luxe-fallback-surface-strong-rgb: 28 18 13;
|
|
4264
|
+
--luxe-fallback-surface-soft-rgb: 0 0 0;
|
|
4265
|
+
--luxe-fallback-text-rgb: 255 255 255;
|
|
4266
|
+
--luxe-fallback-text-muted-rgb: 255 245 232;
|
|
4267
|
+
--luxe-fallback-border-rgb: 255 255 255;
|
|
4268
|
+
--luxe-fallback-primary-rgb: 200 138 54;
|
|
4269
|
+
--luxe-fallback-primary-hover-rgb: 255 255 255;
|
|
4270
|
+
--luxe-fallback-primary-text-rgb: 0 0 0;
|
|
4271
|
+
--luxe-fallback-secondary-rgb: 255 243 217;
|
|
4272
|
+
--luxe-fallback-secondary-hover-rgb: 255 255 255;
|
|
4273
|
+
--luxe-fallback-secondary-text-rgb: 0 0 0;
|
|
4274
|
+
--luxe-fallback-accent-rgb: 255 211 107;
|
|
4275
|
+
--luxe-fallback-accent-text-rgb: 0 0 0;
|
|
4276
|
+
--luxe-fallback-success-rgb: 0 255 144;
|
|
4277
|
+
--luxe-fallback-success-text-rgb: 0 0 0;
|
|
4278
|
+
--luxe-fallback-warning-rgb: 255 212 0;
|
|
4279
|
+
--luxe-fallback-warning-text-rgb: 0 0 0;
|
|
4280
|
+
--luxe-fallback-danger-rgb: 255 107 107;
|
|
4281
|
+
--luxe-fallback-danger-text-rgb: 0 0 0;
|
|
4282
|
+
--luxe-fallback-link-rgb: 255 211 107;
|
|
4283
|
+
--luxe-fallback-focus-rgb: 255 255 255;
|
|
3558
4284
|
--luxe-panel-alpha: 1;
|
|
3559
4285
|
--luxe-panel-soft-alpha: .92;
|
|
3560
4286
|
--luxe-border-alpha: 1;
|
|
@@ -3577,15 +4303,42 @@
|
|
|
3577
4303
|
--luxe-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3578
4304
|
--luxe-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3579
4305
|
--luxe-accent-rgb: var(--usk-accent-rgb);
|
|
3580
|
-
--luxe-success-rgb: var(--usk-success-rgb);
|
|
3581
|
-
--luxe-warning-rgb: var(--usk-warning-rgb);
|
|
3582
|
-
--luxe-danger-rgb: var(--usk-danger-rgb);
|
|
3583
|
-
--luxe-link-rgb: var(--usk-link-rgb);
|
|
3584
4306
|
--luxe-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
4307
|
+
--luxe-success-rgb: var(--usk-success-rgb);
|
|
3585
4308
|
--luxe-success-text-rgb: var(--usk-success-text-rgb);
|
|
4309
|
+
--luxe-warning-rgb: var(--usk-warning-rgb);
|
|
3586
4310
|
--luxe-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
4311
|
+
--luxe-danger-rgb: var(--usk-danger-rgb);
|
|
3587
4312
|
--luxe-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
4313
|
+
--luxe-link-rgb: var(--usk-link-rgb);
|
|
3588
4314
|
--luxe-focus-rgb: var(--usk-focus-rgb);
|
|
4315
|
+
}
|
|
4316
|
+
|
|
4317
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
4318
|
+
--usk-native-bg: var(--luxe-bg);
|
|
4319
|
+
--luxe-bg-rgb: var(--usk-bg-rgb, var(--luxe-fallback-bg-rgb));
|
|
4320
|
+
--luxe-surface-rgb: var(--usk-surface-rgb, var(--luxe-fallback-surface-rgb));
|
|
4321
|
+
--luxe-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--luxe-fallback-surface-strong-rgb));
|
|
4322
|
+
--luxe-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--luxe-fallback-surface-soft-rgb));
|
|
4323
|
+
--luxe-text-rgb: var(--usk-text-rgb, var(--luxe-fallback-text-rgb));
|
|
4324
|
+
--luxe-text-muted-rgb: var(--usk-text-muted-rgb, var(--luxe-fallback-text-muted-rgb));
|
|
4325
|
+
--luxe-border-rgb: var(--usk-border-rgb, var(--luxe-fallback-border-rgb));
|
|
4326
|
+
--luxe-primary-rgb: var(--usk-primary-rgb, var(--luxe-fallback-primary-rgb));
|
|
4327
|
+
--luxe-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--luxe-fallback-primary-hover-rgb));
|
|
4328
|
+
--luxe-primary-text-rgb: var(--usk-primary-text-rgb, var(--luxe-fallback-primary-text-rgb));
|
|
4329
|
+
--luxe-secondary-rgb: var(--usk-secondary-rgb, var(--luxe-fallback-secondary-rgb));
|
|
4330
|
+
--luxe-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--luxe-fallback-secondary-hover-rgb));
|
|
4331
|
+
--luxe-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--luxe-fallback-secondary-text-rgb));
|
|
4332
|
+
--luxe-accent-rgb: var(--usk-accent-rgb, var(--luxe-fallback-accent-rgb));
|
|
4333
|
+
--luxe-accent-text-rgb: var(--usk-accent-text-rgb, var(--luxe-fallback-accent-text-rgb));
|
|
4334
|
+
--luxe-success-rgb: var(--usk-success-rgb, var(--luxe-fallback-success-rgb));
|
|
4335
|
+
--luxe-success-text-rgb: var(--usk-success-text-rgb, var(--luxe-fallback-success-text-rgb));
|
|
4336
|
+
--luxe-warning-rgb: var(--usk-warning-rgb, var(--luxe-fallback-warning-rgb));
|
|
4337
|
+
--luxe-warning-text-rgb: var(--usk-warning-text-rgb, var(--luxe-fallback-warning-text-rgb));
|
|
4338
|
+
--luxe-danger-rgb: var(--usk-danger-rgb, var(--luxe-fallback-danger-rgb));
|
|
4339
|
+
--luxe-danger-text-rgb: var(--usk-danger-text-rgb, var(--luxe-fallback-danger-text-rgb));
|
|
4340
|
+
--luxe-link-rgb: var(--usk-link-rgb, var(--luxe-fallback-link-rgb));
|
|
4341
|
+
--luxe-focus-rgb: var(--usk-focus-rgb, var(--luxe-fallback-focus-rgb));
|
|
3589
4342
|
--usk-native-surface: var(--luxe-surface);
|
|
3590
4343
|
--usk-native-surface-strong: var(--luxe-surface-strong);
|
|
3591
4344
|
--usk-native-surface-soft: var(--luxe-surface-soft);
|
|
@@ -3615,6 +4368,57 @@
|
|
|
3615
4368
|
--usk-native-border-width: 1px;
|
|
3616
4369
|
--usk-native-field-gap: .5rem;
|
|
3617
4370
|
--usk-native-panel-padding: var(--luxe-space-5);
|
|
4371
|
+
--usk-native-control-min-block-size: 2.75rem;
|
|
4372
|
+
--usk-native-control-padding-block: .74rem;
|
|
4373
|
+
--usk-native-control-padding-inline: 1rem;
|
|
4374
|
+
--usk-native-subcontrol-padding-block: .58rem;
|
|
4375
|
+
--usk-native-subcontrol-padding-inline: .8rem;
|
|
4376
|
+
--usk-native-choice-size: 1.35rem;
|
|
4377
|
+
--usk-native-choice-background: var(--luxe-control-bg);
|
|
4378
|
+
--usk-native-choice-border: 1px solid var(--luxe-border);
|
|
4379
|
+
--usk-native-checkbox-radius: 0;
|
|
4380
|
+
--usk-native-radio-radius: 50%;
|
|
4381
|
+
--usk-native-choice-shadow: none;
|
|
4382
|
+
--usk-native-choice-checked-background: var(--luxe-primary);
|
|
4383
|
+
--usk-native-choice-mark-color: var(--luxe-on-primary);
|
|
4384
|
+
--usk-native-select-indicator-image: linear-gradient(60deg, transparent 50%, var(--luxe-primary) 50%), linear-gradient(120deg, var(--luxe-primary) 50%, transparent 50%);
|
|
4385
|
+
--usk-native-select-indicator-size: .38rem .38rem, .38rem .38rem;
|
|
4386
|
+
--usk-native-select-indicator-position: calc(100% - 1.24rem) 50%, calc(100% - .9rem) 50%;
|
|
4387
|
+
--usk-native-select-padding-inline-end: 2.7rem;
|
|
4388
|
+
--usk-native-range-track-size: 1px;
|
|
4389
|
+
--usk-native-range-track-background: var(--luxe-surface-soft);
|
|
4390
|
+
--usk-native-range-track-border: 1px solid var(--luxe-border);
|
|
4391
|
+
--usk-native-range-track-radius: 0;
|
|
4392
|
+
--usk-native-range-track-shadow: none;
|
|
4393
|
+
--usk-native-range-progress-background: var(--luxe-primary);
|
|
4394
|
+
--usk-native-range-thumb-size: .85rem;
|
|
4395
|
+
--usk-native-range-thumb-background: var(--luxe-surface-strong);
|
|
4396
|
+
--usk-native-range-thumb-border: 1px solid var(--luxe-border);
|
|
4397
|
+
--usk-native-range-thumb-radius: 50%;
|
|
4398
|
+
--usk-native-range-thumb-shadow: none;
|
|
4399
|
+
--usk-native-progress-size: .28rem;
|
|
4400
|
+
--usk-native-progress-track-background: var(--luxe-surface-soft);
|
|
4401
|
+
--usk-native-progress-track-border: 1px solid var(--luxe-border);
|
|
4402
|
+
--usk-native-progress-track-radius: 0;
|
|
4403
|
+
--usk-native-progress-track-shadow: none;
|
|
4404
|
+
--usk-native-progress-value-background: var(--luxe-primary);
|
|
4405
|
+
--usk-native-progress-value-radius: 0;
|
|
4406
|
+
--usk-native-progress-value-shadow: none;
|
|
4407
|
+
--usk-native-meter-optimum-background: var(--luxe-success);
|
|
4408
|
+
--usk-native-meter-suboptimum-background: var(--luxe-warning);
|
|
4409
|
+
--usk-native-meter-critical-background: var(--luxe-danger);
|
|
4410
|
+
--usk-native-file-button-background: var(--luxe-primary);
|
|
4411
|
+
--usk-native-file-button-border: 1px solid var(--luxe-border);
|
|
4412
|
+
--usk-native-file-button-radius: 0;
|
|
4413
|
+
--usk-native-file-button-shadow: none;
|
|
4414
|
+
--usk-native-color-swatch-border: 1px solid var(--luxe-border);
|
|
4415
|
+
--usk-native-color-swatch-radius: 0;
|
|
4416
|
+
--usk-native-indicator-opacity: .77;
|
|
4417
|
+
--usk-native-indicator-filter: none;
|
|
4418
|
+
--usk-native-scrollbar-size: .55rem;
|
|
4419
|
+
--usk-native-scrollbar-track: var(--luxe-surface-soft);
|
|
4420
|
+
--usk-native-scrollbar-thumb: var(--luxe-primary);
|
|
4421
|
+
--usk-native-scrollbar-radius: 0;
|
|
3618
4422
|
--luxe-bg: rgb(var(--luxe-bg-rgb));
|
|
3619
4423
|
--luxe-surface: rgb(var(--luxe-surface-rgb) / var(--luxe-panel-alpha));
|
|
3620
4424
|
--luxe-surface-strong: rgb(var(--luxe-surface-strong-rgb) / var(--luxe-panel-alpha));
|
|
@@ -3655,7 +4459,7 @@
|
|
|
3655
4459
|
}
|
|
3656
4460
|
|
|
3657
4461
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3658
|
-
[data-ui="editorial-luxe"][data-
|
|
4462
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
3659
4463
|
--luxe-border: color-mix(in srgb, rgb(var(--luxe-border-rgb) / max(var(--luxe-border-alpha), var(--usk-border-min-alpha))), var(--luxe-text) var(--usk-border-text-mix));
|
|
3660
4464
|
}
|
|
3661
4465
|
}
|
|
@@ -3674,7 +4478,7 @@
|
|
|
3674
4478
|
box-sizing: border-box;
|
|
3675
4479
|
}
|
|
3676
4480
|
|
|
3677
|
-
[data-ui="editorial-luxe"][data-
|
|
4481
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
3678
4482
|
background: var(--luxe-theme-bg);
|
|
3679
4483
|
background-size: var(--luxe-theme-bg-size);
|
|
3680
4484
|
}
|
|
@@ -3700,7 +4504,7 @@
|
|
|
3700
4504
|
}
|
|
3701
4505
|
|
|
3702
4506
|
.luxe-kicker {
|
|
3703
|
-
color: var(--luxe-primary);
|
|
4507
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
3704
4508
|
letter-spacing: .12em;
|
|
3705
4509
|
text-transform: uppercase;
|
|
3706
4510
|
margin: 0;
|
|
@@ -3801,34 +4605,16 @@
|
|
|
3801
4605
|
box-shadow: inset 0 3px 10px #0000002e;
|
|
3802
4606
|
}
|
|
3803
4607
|
|
|
3804
|
-
.luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
3805
|
-
background: var(--luxe-primary);
|
|
3806
|
-
color: var(--luxe-on-primary);
|
|
3807
|
-
border-color: var(--luxe-primary);
|
|
3808
|
-
}
|
|
3809
|
-
|
|
3810
4608
|
.luxe-button-primary:hover, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3811
4609
|
background: var(--luxe-primary-hover);
|
|
3812
4610
|
border-color: var(--luxe-primary-hover);
|
|
3813
4611
|
}
|
|
3814
4612
|
|
|
3815
|
-
.luxe-button-secondary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3816
|
-
background: var(--luxe-secondary);
|
|
3817
|
-
color: var(--luxe-on-secondary);
|
|
3818
|
-
border-color: var(--luxe-secondary);
|
|
3819
|
-
}
|
|
3820
|
-
|
|
3821
4613
|
.luxe-button-secondary:hover, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
3822
4614
|
background: var(--luxe-secondary-hover);
|
|
3823
4615
|
border-color: var(--luxe-secondary-hover);
|
|
3824
4616
|
}
|
|
3825
4617
|
|
|
3826
|
-
.luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
3827
|
-
background: var(--luxe-danger);
|
|
3828
|
-
color: var(--luxe-on-danger);
|
|
3829
|
-
border-color: var(--luxe-danger);
|
|
3830
|
-
}
|
|
3831
|
-
|
|
3832
4618
|
.luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
3833
4619
|
color: var(--luxe-text);
|
|
3834
4620
|
box-shadow: none;
|
|
@@ -3851,7 +4637,7 @@
|
|
|
3851
4637
|
background: var(--luxe-card-bg);
|
|
3852
4638
|
}
|
|
3853
4639
|
|
|
3854
|
-
.luxe-toolbar, .luxe-table-wrap, .luxe-button:not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-ghost), .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-toolbar, :where([data-ui="editorial-luxe"]) .ui-table-wrap, :where([data-ui="editorial-luxe"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="editorial-luxe"]) .ui-icon-button {
|
|
4640
|
+
.luxe-toolbar, .luxe-table-wrap, .luxe-button:not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost), .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-toolbar, :where([data-ui="editorial-luxe"]) .ui-table-wrap, :where([data-ui="editorial-luxe"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="editorial-luxe"]) .ui-icon-button {
|
|
3855
4641
|
background: var(--luxe-control-bg);
|
|
3856
4642
|
}
|
|
3857
4643
|
|
|
@@ -4198,7 +4984,7 @@
|
|
|
4198
4984
|
}
|
|
4199
4985
|
|
|
4200
4986
|
.luxe-text-primary {
|
|
4201
|
-
color: var(--luxe-primary);
|
|
4987
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
4202
4988
|
}
|
|
4203
4989
|
|
|
4204
4990
|
.luxe-text-secondary {
|
|
@@ -4206,7 +4992,7 @@
|
|
|
4206
4992
|
}
|
|
4207
4993
|
|
|
4208
4994
|
.luxe-text-accent {
|
|
4209
|
-
color: var(--luxe-accent);
|
|
4995
|
+
color: var(--usk-accent-ink, var(--luxe-accent));
|
|
4210
4996
|
}
|
|
4211
4997
|
|
|
4212
4998
|
.luxe-text-success {
|
|
@@ -4431,7 +5217,7 @@
|
|
|
4431
5217
|
}
|
|
4432
5218
|
|
|
4433
5219
|
.luxe-button.luxe-button-outline-heavy, .luxe-button-outline-heavy, :where([data-ui="editorial-luxe"]) .ui-button.luxe-button-outline-heavy {
|
|
4434
|
-
color: var(--luxe-primary);
|
|
5220
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
4435
5221
|
border-style: solid;
|
|
4436
5222
|
border-width: 2px;
|
|
4437
5223
|
border-color: var(--luxe-primary);
|
|
@@ -4472,7 +5258,6 @@
|
|
|
4472
5258
|
border-radius: var(--luxe-radius-lg);
|
|
4473
5259
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4474
5260
|
display: grid;
|
|
4475
|
-
overflow: hidden;
|
|
4476
5261
|
}
|
|
4477
5262
|
|
|
4478
5263
|
.luxe-feature-item {
|
|
@@ -4515,7 +5300,7 @@
|
|
|
4515
5300
|
}
|
|
4516
5301
|
|
|
4517
5302
|
.luxe-eyebrow {
|
|
4518
|
-
color: var(--luxe-primary);
|
|
5303
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
4519
5304
|
font-family: var(--luxe-font-heading);
|
|
4520
5305
|
letter-spacing: .14em;
|
|
4521
5306
|
text-transform: uppercase;
|
|
@@ -4605,7 +5390,7 @@
|
|
|
4605
5390
|
font-family: var(--luxe-font-body);
|
|
4606
5391
|
}
|
|
4607
5392
|
|
|
4608
|
-
[data-ui="editorial-luxe"][data-
|
|
5393
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
4609
5394
|
--luxe-theme-bg: linear-gradient(90deg, rgb(var(--luxe-border-rgb) / .09) 1px, transparent 1px) 0 0 / 22rem 100%, linear-gradient(180deg, rgb(var(--luxe-primary-rgb) / .035), transparent 22rem), var(--luxe-bg);
|
|
4610
5395
|
--luxe-card-bg: linear-gradient(180deg, rgb(var(--luxe-surface-strong-rgb) / var(--luxe-panel-alpha)), rgb(var(--luxe-surface-rgb) / var(--luxe-panel-alpha)));
|
|
4611
5396
|
}
|
|
@@ -4685,7 +5470,7 @@
|
|
|
4685
5470
|
|
|
4686
5471
|
.luxe-icon-medallion {
|
|
4687
5472
|
background: var(--luxe-surface-strong);
|
|
4688
|
-
color: var(--luxe-primary);
|
|
5473
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
4689
5474
|
border: 1px solid var(--luxe-primary);
|
|
4690
5475
|
box-shadow: none;
|
|
4691
5476
|
}
|
|
@@ -4710,6 +5495,7 @@
|
|
|
4710
5495
|
clip-path: polygon(.45rem 0, calc(100% - .45rem) 0, 100% .45rem, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, .45rem 100%, 0 calc(100% - .45rem), 0 .45rem);
|
|
4711
5496
|
justify-content: center;
|
|
4712
5497
|
justify-self: start;
|
|
5498
|
+
min-block-size: 2.75rem;
|
|
4713
5499
|
min-inline-size: 6rem;
|
|
4714
5500
|
max-inline-size: 100%;
|
|
4715
5501
|
}
|
|
@@ -4727,13 +5513,13 @@
|
|
|
4727
5513
|
border-radius: 0;
|
|
4728
5514
|
}
|
|
4729
5515
|
|
|
4730
|
-
[data-ui="editorial-luxe"][data-
|
|
5516
|
+
[data-ui="editorial-luxe"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
4731
5517
|
border: 3px double var(--luxe-primary);
|
|
4732
5518
|
box-shadow: 0 .18rem 0 rgb(var(--luxe-text-rgb)/.14);
|
|
4733
5519
|
border-radius: 0;
|
|
4734
5520
|
}
|
|
4735
5521
|
|
|
4736
|
-
[data-ui="editorial-luxe"][data-
|
|
5522
|
+
[data-ui="editorial-luxe"][data-mode] :where(dialog) {
|
|
4737
5523
|
border: 3px double var(--luxe-border);
|
|
4738
5524
|
box-shadow: 0 .28rem 0 rgb(var(--luxe-text-rgb)/.16),0 1rem 2rem rgb(var(--luxe-text-rgb)/.16);
|
|
4739
5525
|
border-radius: 0;
|
|
@@ -4757,6 +5543,185 @@
|
|
|
4757
5543
|
box-shadow: inset 0 0 0 .05em;
|
|
4758
5544
|
}
|
|
4759
5545
|
|
|
5546
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
5547
|
+
--usk-native-font-control: var(--luxe-font-heading);
|
|
5548
|
+
--usk-native-control-min-block-size: 2.5rem;
|
|
5549
|
+
--usk-native-control-padding-block: .62rem;
|
|
5550
|
+
--usk-native-control-padding-inline: 1.45rem;
|
|
5551
|
+
--usk-native-border-width: 1px;
|
|
5552
|
+
--usk-native-radius-sm: .02rem;
|
|
5553
|
+
--usk-native-radius: .03rem;
|
|
5554
|
+
--usk-native-radius-lg: .04rem;
|
|
5555
|
+
--usk-native-shadow: inset 0 -1px 0 rgb(var(--luxe-border-rgb) / .54);
|
|
5556
|
+
--usk-native-shadow-md: inset 0 0 0 1px rgb(var(--luxe-border-rgb) / .38), inset 0 0 0 4px var(--luxe-surface-strong);
|
|
5557
|
+
--usk-native-focus-ring: 0 0 0 1px var(--luxe-warning), 0 0 0 4px rgb(var(--luxe-primary-rgb) / .34);
|
|
5558
|
+
--usk-native-subcontrol-padding-block: .39rem;
|
|
5559
|
+
--usk-native-subcontrol-padding-inline: .92rem;
|
|
5560
|
+
--usk-native-choice-size: 1.08rem;
|
|
5561
|
+
--usk-native-choice-background: var(--luxe-control-bg);
|
|
5562
|
+
--usk-native-choice-border: 1px solid var(--luxe-border);
|
|
5563
|
+
--usk-native-checkbox-radius: 0;
|
|
5564
|
+
--usk-native-radio-radius: 50%;
|
|
5565
|
+
--usk-native-choice-shadow: inset 0 0 0 2px var(--luxe-surface-strong);
|
|
5566
|
+
--usk-native-choice-checked-background: var(--luxe-success);
|
|
5567
|
+
--usk-native-choice-mark-color: var(--luxe-on-primary);
|
|
5568
|
+
--usk-native-select-indicator-image: linear-gradient(55deg, transparent 48%, var(--luxe-warning) 49% 51%, transparent 52%), linear-gradient(125deg, transparent 48%, var(--luxe-warning) 49% 51%, transparent 52%);
|
|
5569
|
+
--usk-native-select-indicator-size: .4rem .5rem, .4rem .5rem;
|
|
5570
|
+
--usk-native-select-indicator-position: calc(100% - 1.28rem) 50%, calc(100% - .96rem) 50%;
|
|
5571
|
+
--usk-native-select-padding-inline-end: 2.82rem;
|
|
5572
|
+
--usk-native-range-track-size: 1px;
|
|
5573
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--luxe-border), rgb(var(--luxe-warning-rgb) / .62), var(--luxe-border));
|
|
5574
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
5575
|
+
--usk-native-range-track-radius: 0;
|
|
5576
|
+
--usk-native-range-track-shadow: 0 1px 0 var(--luxe-surface-strong);
|
|
5577
|
+
--usk-native-range-progress-background: linear-gradient(90deg, var(--luxe-success), var(--luxe-warning));
|
|
5578
|
+
--usk-native-range-thumb-size: .82rem;
|
|
5579
|
+
--usk-native-range-thumb-background: var(--luxe-warning);
|
|
5580
|
+
--usk-native-range-thumb-border: 1px solid var(--luxe-border);
|
|
5581
|
+
--usk-native-range-thumb-radius: 50%;
|
|
5582
|
+
--usk-native-range-thumb-shadow: 0 0 0 2px var(--luxe-surface-strong);
|
|
5583
|
+
--usk-native-progress-size: .22rem;
|
|
5584
|
+
--usk-native-progress-track-background: rgb(var(--luxe-border-rgb) / .24);
|
|
5585
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
5586
|
+
--usk-native-progress-track-radius: 0;
|
|
5587
|
+
--usk-native-progress-track-shadow: inset 0 1px 0 rgb(var(--luxe-surface-strong-rgb) / .68);
|
|
5588
|
+
--usk-native-progress-value-background: linear-gradient(90deg, var(--luxe-success), var(--luxe-warning));
|
|
5589
|
+
--usk-native-progress-value-radius: 0;
|
|
5590
|
+
--usk-native-progress-value-shadow: 1px 0 0 var(--luxe-border);
|
|
5591
|
+
--usk-native-scrollbar-size: .42rem;
|
|
5592
|
+
--usk-native-scrollbar-track: var(--luxe-surface-soft);
|
|
5593
|
+
--usk-native-scrollbar-thumb: linear-gradient(180deg, var(--luxe-warning), var(--luxe-border));
|
|
5594
|
+
--usk-native-scrollbar-radius: 0;
|
|
5595
|
+
--usk-native-card-bg: var(--luxe-surface);
|
|
5596
|
+
--usk-native-control-bg: var(--luxe-surface-soft);
|
|
5597
|
+
}
|
|
5598
|
+
|
|
5599
|
+
@supports (color: color-mix(in srgb,black,white)) {
|
|
5600
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
5601
|
+
--usk-native-card-bg: linear-gradient(90deg, var(--luxe-surface) 0 48%, color-mix(in srgb, var(--luxe-surface) 48%, var(--luxe-primary)) 48% 100%);
|
|
5602
|
+
--usk-native-control-bg: linear-gradient(180deg, color-mix(in srgb, var(--luxe-surface-soft) 55%, var(--luxe-primary)), var(--luxe-surface-soft));
|
|
5603
|
+
}
|
|
5604
|
+
}
|
|
5605
|
+
|
|
5606
|
+
.luxe-title {
|
|
5607
|
+
letter-spacing: max(.02em, .5px);
|
|
5608
|
+
margin-block: .75rem;
|
|
5609
|
+
font-weight: 500;
|
|
5610
|
+
}
|
|
5611
|
+
|
|
5612
|
+
.luxe-label, :where([data-ui="editorial-luxe"]) .ui-label {
|
|
5613
|
+
font-size: .64rem;
|
|
5614
|
+
font-weight: 600;
|
|
5615
|
+
}
|
|
5616
|
+
|
|
5617
|
+
.luxe-button, :where([data-ui="editorial-luxe"]) .ui-button {
|
|
5618
|
+
background: var(--luxe-primary);
|
|
5619
|
+
min-height: 2.5rem;
|
|
5620
|
+
box-shadow: inset 0-1px 0 rgb(var(--luxe-border-rgb)/.54);
|
|
5621
|
+
border-radius: .02rem;
|
|
5622
|
+
padding: .62rem 1.45rem;
|
|
5623
|
+
font-weight: 600;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
.luxe-input, :where([data-ui="editorial-luxe"]) .ui-input {
|
|
5627
|
+
border-radius: 0;
|
|
5628
|
+
min-height: 2.45rem;
|
|
5629
|
+
padding: .55rem .95rem;
|
|
5630
|
+
}
|
|
5631
|
+
|
|
5632
|
+
.luxe-card, :where([data-ui="editorial-luxe"]) .ui-card {
|
|
5633
|
+
background: linear-gradient(180deg,rgb(var(--luxe-surface-strong-rgb)/.66),transparent),var(--luxe-card-bg);
|
|
5634
|
+
border: 1px solid var(--luxe-border);
|
|
5635
|
+
box-shadow: inset 0 0 0 1px rgb(var(--luxe-border-rgb)/.28),inset 0 0 0 4px var(--luxe-surface-strong);
|
|
5636
|
+
border-radius: .02rem;
|
|
5637
|
+
padding: 1.75rem;
|
|
5638
|
+
}
|
|
5639
|
+
|
|
5640
|
+
.luxe-well {
|
|
5641
|
+
background: linear-gradient(90deg,transparent 0 49.8%,rgb(var(--luxe-border-rgb)/.22) 49.8% 50.2%,transparent 50.2%),var(--luxe-surface-soft);
|
|
5642
|
+
border: 1px solid var(--luxe-border);
|
|
5643
|
+
box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
|
|
5644
|
+
}
|
|
5645
|
+
|
|
5646
|
+
.luxe-badge, :where([data-ui="editorial-luxe"]) .ui-badge {
|
|
5647
|
+
border-radius: 50%;
|
|
5648
|
+
min-height: 1.42rem;
|
|
5649
|
+
padding: .16rem .74rem;
|
|
5650
|
+
}
|
|
5651
|
+
|
|
5652
|
+
.luxe-alert, :where([data-ui="editorial-luxe"]) .ui-alert {
|
|
5653
|
+
background: linear-gradient(90deg,rgb(var(--luxe-primary-rgb)/.08),transparent 36%),var(--luxe-card-bg);
|
|
5654
|
+
border: 1px solid var(--luxe-border);
|
|
5655
|
+
box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
|
|
5656
|
+
border-radius: 0;
|
|
5657
|
+
}
|
|
5658
|
+
|
|
5659
|
+
.luxe-progress, :where([data-ui="editorial-luxe"]) .ui-progress {
|
|
5660
|
+
background: rgb(var(--luxe-border-rgb)/.24);
|
|
5661
|
+
height: .22rem;
|
|
5662
|
+
}
|
|
5663
|
+
|
|
5664
|
+
.luxe-table-wrap, :where([data-ui="editorial-luxe"]) .ui-table-wrap {
|
|
5665
|
+
background: linear-gradient(180deg,rgb(var(--luxe-surface-strong-rgb)/.62),transparent),var(--luxe-card-bg);
|
|
5666
|
+
box-shadow: inset 0 0 0 1px rgb(var(--luxe-border-rgb)/.3);
|
|
5667
|
+
border-radius: 0;
|
|
5668
|
+
}
|
|
5669
|
+
|
|
5670
|
+
.luxe-table th, :where([data-ui="editorial-luxe"]) .ui-table th {
|
|
5671
|
+
background: none;
|
|
5672
|
+
padding: .56rem 1rem;
|
|
5673
|
+
font-weight: 600;
|
|
5674
|
+
}
|
|
5675
|
+
|
|
5676
|
+
.luxe-table td, :where([data-ui="editorial-luxe"]) .ui-table td {
|
|
5677
|
+
padding: .58rem 1rem;
|
|
5678
|
+
}
|
|
5679
|
+
|
|
5680
|
+
.luxe-nav, .luxe-panel, .luxe-toolbar, .luxe-tooltip, [data-ui="editorial-luxe"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar, :where([data-ui="editorial-luxe"]) .ui-nav, :where([data-ui="editorial-luxe"]) .ui-toolbar {
|
|
5681
|
+
border: 1px solid var(--luxe-border);
|
|
5682
|
+
box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
|
|
5683
|
+
border-radius: 0;
|
|
5684
|
+
}
|
|
5685
|
+
|
|
5686
|
+
.luxe-nav, :where([data-ui="editorial-luxe"]) .ui-nav {
|
|
5687
|
+
border-block-style: solid double;
|
|
5688
|
+
border-block-width: 1px 3px;
|
|
5689
|
+
border-inline: 0;
|
|
5690
|
+
}
|
|
5691
|
+
|
|
5692
|
+
.luxe-card-service, .luxe-feature-item {
|
|
5693
|
+
border-block-start: 3px double var(--luxe-border);
|
|
5694
|
+
}
|
|
5695
|
+
|
|
5696
|
+
.luxe-callout-bar {
|
|
5697
|
+
border-block: 3px double var(--luxe-border);
|
|
5698
|
+
border-inline: 0;
|
|
5699
|
+
}
|
|
5700
|
+
|
|
5701
|
+
.luxe-tooltip-arrow {
|
|
5702
|
+
transform: rotate(45deg);
|
|
5703
|
+
}
|
|
5704
|
+
|
|
5705
|
+
.luxe-progress-bar, :where([data-ui="editorial-luxe"]) .ui-progress-bar {
|
|
5706
|
+
background: linear-gradient(90deg,var(--luxe-success),var(--luxe-warning));
|
|
5707
|
+
}
|
|
5708
|
+
|
|
5709
|
+
.luxe-card, :where([data-ui="editorial-luxe"]) .ui-card {
|
|
5710
|
+
border-radius: .02rem;
|
|
5711
|
+
}
|
|
5712
|
+
|
|
5713
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
5714
|
+
--usk-native-card-bg: linear-gradient(rgb(var(--luxe-text-rgb) / .12), rgb(var(--luxe-text-rgb) / .12)), var(--luxe-surface);
|
|
5715
|
+
}
|
|
5716
|
+
|
|
5717
|
+
.luxe-panel, .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar {
|
|
5718
|
+
background: linear-gradient(90deg,transparent 0 58%,rgb(var(--luxe-border-rgb)/.32) 58% calc(58% + 1px),transparent calc(58% + 1px)),linear-gradient(rgb(var(--luxe-text-rgb)/.12),rgb(var(--luxe-text-rgb)/.12)),var(--luxe-card-bg);
|
|
5719
|
+
}
|
|
5720
|
+
|
|
5721
|
+
.luxe-feature-strip {
|
|
5722
|
+
background: linear-gradient(90deg,transparent 0 33.333%,rgb(var(--luxe-border-rgb)/.32) 33.333% calc(33.333% + 1px),transparent calc(33.333% + 1px) 66.666%,rgb(var(--luxe-border-rgb)/.32) 66.666% calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(rgb(var(--luxe-text-rgb)/.12),rgb(var(--luxe-text-rgb)/.12)),var(--luxe-card-bg);
|
|
5723
|
+
}
|
|
5724
|
+
|
|
4760
5725
|
@media (prefers-reduced-motion: reduce) {
|
|
4761
5726
|
[data-ui="editorial-luxe"] *, [data-ui="editorial-luxe"] :before, [data-ui="editorial-luxe"] :after {
|
|
4762
5727
|
scroll-behavior: auto !important;
|
|
@@ -4801,4 +5766,1095 @@
|
|
|
4801
5766
|
color: #000 !important;
|
|
4802
5767
|
}
|
|
4803
5768
|
}
|
|
5769
|
+
|
|
5770
|
+
.luxe-input[aria-invalid="true"], .luxe-textarea[aria-invalid="true"], .luxe-select[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-input[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-textarea[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-select[aria-invalid="true"] {
|
|
5771
|
+
border-color: var(--luxe-danger);
|
|
5772
|
+
box-shadow: 0 0 0 2px rgb(var(--luxe-danger-rgb)/.18);
|
|
5773
|
+
}
|
|
5774
|
+
|
|
5775
|
+
.luxe-input[readonly], .luxe-textarea[readonly], :where([data-ui="editorial-luxe"]) .ui-input[readonly], :where([data-ui="editorial-luxe"]) .ui-textarea[readonly] {
|
|
5776
|
+
filter: saturate(.72);
|
|
5777
|
+
opacity: .78;
|
|
5778
|
+
border-style: dashed;
|
|
5779
|
+
}
|
|
5780
|
+
|
|
5781
|
+
.luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5782
|
+
background: var(--luxe-primary);
|
|
5783
|
+
color: var(--luxe-on-primary);
|
|
5784
|
+
border-color: var(--luxe-primary);
|
|
5785
|
+
}
|
|
5786
|
+
|
|
5787
|
+
.luxe-button-secondary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5788
|
+
background: var(--luxe-surface);
|
|
5789
|
+
color: var(--luxe-text);
|
|
5790
|
+
border-color: var(--luxe-border);
|
|
5791
|
+
}
|
|
5792
|
+
|
|
5793
|
+
.luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5794
|
+
background: var(--luxe-danger);
|
|
5795
|
+
color: var(--luxe-on-danger);
|
|
5796
|
+
border-color: var(--luxe-danger);
|
|
5797
|
+
}
|
|
5798
|
+
|
|
5799
|
+
.luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5800
|
+
color: var(--usk-primary-ink, var(--luxe-primary));
|
|
5801
|
+
background: none;
|
|
5802
|
+
border-color: #0000;
|
|
5803
|
+
}
|
|
5804
|
+
|
|
5805
|
+
.luxe-feature-item > .luxe-icon-medallion {
|
|
5806
|
+
font-size: 1.5rem;
|
|
5807
|
+
line-height: 1;
|
|
5808
|
+
}
|
|
5809
|
+
|
|
5810
|
+
.luxe-callout-bar > .luxe-icon-medallion {
|
|
5811
|
+
min-block-size: 4.5rem;
|
|
5812
|
+
min-inline-size: 4.5rem;
|
|
5813
|
+
font-size: 2rem;
|
|
5814
|
+
font-weight: 800;
|
|
5815
|
+
line-height: 1;
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5818
|
+
[data-ui="editorial-luxe"][data-mode="light"] {
|
|
5819
|
+
--luxe-fallback-bg-rgb: 248 245 239;
|
|
5820
|
+
--luxe-fallback-surface-rgb: 248 245 239;
|
|
5821
|
+
--luxe-fallback-surface-strong-rgb: 255 253 250;
|
|
5822
|
+
--luxe-fallback-surface-soft-rgb: 222 219 212;
|
|
5823
|
+
--luxe-fallback-text-rgb: 17 20 19;
|
|
5824
|
+
--luxe-fallback-text-muted-rgb: 99 96 90;
|
|
5825
|
+
--luxe-fallback-border-rgb: 112 109 101;
|
|
5826
|
+
--luxe-fallback-primary-rgb: 18 50 41;
|
|
5827
|
+
--luxe-fallback-primary-hover-rgb: 39 72 61;
|
|
5828
|
+
--luxe-fallback-primary-text-rgb: 244 240 232;
|
|
5829
|
+
--luxe-fallback-secondary-rgb: 17 20 19;
|
|
5830
|
+
--luxe-fallback-secondary-text-rgb: 244 240 232;
|
|
5831
|
+
--luxe-fallback-accent-rgb: 165 130 70;
|
|
5832
|
+
--luxe-fallback-accent-text-rgb: 17 20 19;
|
|
5833
|
+
--luxe-fallback-success-rgb: 18 50 41;
|
|
5834
|
+
--luxe-fallback-success-text-rgb: 244 240 232;
|
|
5835
|
+
--luxe-fallback-warning-rgb: 130 94 35;
|
|
5836
|
+
--luxe-fallback-warning-text-rgb: 255 255 255;
|
|
5837
|
+
--luxe-fallback-danger-rgb: 125 17 19;
|
|
5838
|
+
--luxe-fallback-danger-text-rgb: 255 255 255;
|
|
5839
|
+
--luxe-fallback-link-rgb: 125 17 19;
|
|
5840
|
+
--luxe-fallback-focus-rgb: 130 94 35;
|
|
5841
|
+
--luxe-status-success: rgb(var(--usk-success-rgb, 18 50 41));
|
|
5842
|
+
--luxe-status-danger: rgb(var(--usk-danger-rgb, 125 17 19));
|
|
5843
|
+
}
|
|
5844
|
+
|
|
5845
|
+
[data-ui="editorial-luxe"][data-mode="dark"] {
|
|
5846
|
+
--luxe-fallback-bg-rgb: 14 17 16;
|
|
5847
|
+
--luxe-fallback-surface-rgb: 14 17 16;
|
|
5848
|
+
--luxe-fallback-surface-strong-rgb: 18 22 21;
|
|
5849
|
+
--luxe-fallback-surface-soft-rgb: 48 50 48;
|
|
5850
|
+
--luxe-fallback-text-rgb: 232 223 210;
|
|
5851
|
+
--luxe-fallback-text-muted-rgb: 172 163 151;
|
|
5852
|
+
--luxe-fallback-border-rgb: 149 130 92;
|
|
5853
|
+
--luxe-fallback-primary-rgb: 24 56 46;
|
|
5854
|
+
--luxe-fallback-primary-hover-rgb: 40 73 62;
|
|
5855
|
+
--luxe-fallback-primary-text-rgb: 232 223 210;
|
|
5856
|
+
--luxe-fallback-secondary-rgb: 232 223 210;
|
|
5857
|
+
--luxe-fallback-secondary-text-rgb: 17 20 19;
|
|
5858
|
+
--luxe-fallback-accent-rgb: 195 164 106;
|
|
5859
|
+
--luxe-fallback-accent-text-rgb: 17 20 19;
|
|
5860
|
+
--luxe-fallback-success-rgb: 24 56 46;
|
|
5861
|
+
--luxe-fallback-success-text-rgb: 232 223 210;
|
|
5862
|
+
--luxe-fallback-warning-rgb: 195 164 106;
|
|
5863
|
+
--luxe-fallback-warning-text-rgb: 17 20 19;
|
|
5864
|
+
--luxe-fallback-danger-rgb: 141 27 28;
|
|
5865
|
+
--luxe-fallback-danger-text-rgb: 255 255 255;
|
|
5866
|
+
--luxe-fallback-link-rgb: 232 223 210;
|
|
5867
|
+
--luxe-fallback-focus-rgb: 195 164 106;
|
|
5868
|
+
--luxe-status-success: rgb(var(--usk-success-rgb, 151 196 172));
|
|
5869
|
+
--luxe-status-danger: rgb(var(--usk-danger-rgb, 239 151 152));
|
|
5870
|
+
}
|
|
5871
|
+
|
|
5872
|
+
[data-ui="editorial-luxe"][data-mode="contrast"] {
|
|
5873
|
+
--luxe-status-success: var(--luxe-success);
|
|
5874
|
+
--luxe-status-danger: var(--luxe-danger);
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
[data-ui="editorial-luxe"][data-mode] {
|
|
5878
|
+
--luxe-font-display: Didot, "Bodoni MT", "Times New Roman", serif;
|
|
5879
|
+
--luxe-font-heading: var(--luxe-font-display);
|
|
5880
|
+
--luxe-font-body: "Iowan Old Style", Georgia, serif;
|
|
5881
|
+
--luxe-font-control: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
|
|
5882
|
+
--luxe-brass: rgb(var(--usk-accent-rgb, 165 130 70));
|
|
5883
|
+
--luxe-brass-light: rgb(var(--usk-accent-rgb, 196 166 109));
|
|
5884
|
+
--luxe-on-brass: rgb(var(--usk-accent-text-rgb, 17 20 19));
|
|
5885
|
+
--luxe-rule-soft: rgb(var(--luxe-border-rgb) / .35);
|
|
5886
|
+
--luxe-card-bg: var(--luxe-surface);
|
|
5887
|
+
--luxe-control-bg: transparent;
|
|
5888
|
+
--luxe-radius-xs: 0;
|
|
5889
|
+
--luxe-radius-sm: 0;
|
|
5890
|
+
--luxe-radius-md: 0;
|
|
5891
|
+
--luxe-radius-lg: 0;
|
|
5892
|
+
--usk-native-font-control: var(--luxe-font-control);
|
|
5893
|
+
--usk-native-card-bg: var(--luxe-surface);
|
|
5894
|
+
--usk-native-control-bg: transparent;
|
|
5895
|
+
--usk-native-shadow: none;
|
|
5896
|
+
--usk-native-shadow-md: none;
|
|
5897
|
+
--usk-native-control-min-block-size: 2.125rem;
|
|
5898
|
+
--usk-native-control-padding-block: .375rem;
|
|
5899
|
+
--usk-native-control-padding-inline: .75rem;
|
|
5900
|
+
--usk-native-range-track-background: var(--luxe-border);
|
|
5901
|
+
--usk-native-range-progress-background: var(--luxe-border);
|
|
5902
|
+
--usk-native-range-thumb-background: var(--luxe-brass-light);
|
|
5903
|
+
--usk-native-range-thumb-border: 1px solid var(--luxe-brass);
|
|
5904
|
+
--usk-native-progress-value-background: var(--luxe-primary);
|
|
5905
|
+
--usk-native-choice-checked-background: var(--luxe-primary);
|
|
5906
|
+
}
|
|
5907
|
+
|
|
5908
|
+
.luxe-sheet {
|
|
5909
|
+
border: 4px double var(--luxe-border);
|
|
5910
|
+
outline: 1px solid var(--luxe-rule-soft);
|
|
5911
|
+
outline-offset: -12px;
|
|
5912
|
+
color: var(--luxe-text);
|
|
5913
|
+
background: var(--luxe-surface);
|
|
5914
|
+
font-family: var(--luxe-font-body);
|
|
5915
|
+
padding: 32px;
|
|
5916
|
+
position: relative;
|
|
5917
|
+
}
|
|
5918
|
+
|
|
5919
|
+
.luxe-sheet *, .luxe-sheet :before, .luxe-sheet :after {
|
|
5920
|
+
box-sizing: border-box;
|
|
5921
|
+
letter-spacing: 0;
|
|
5922
|
+
}
|
|
5923
|
+
|
|
5924
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-sheet :where(article, aside, section, figure, fieldset) {
|
|
5925
|
+
box-shadow: none;
|
|
5926
|
+
background: none;
|
|
5927
|
+
border: 0;
|
|
5928
|
+
border-radius: 0;
|
|
5929
|
+
padding: 0;
|
|
5930
|
+
}
|
|
5931
|
+
|
|
5932
|
+
.luxe-masthead {
|
|
5933
|
+
border-bottom: 1px solid var(--luxe-border);
|
|
5934
|
+
justify-content: space-between;
|
|
5935
|
+
align-items: start;
|
|
5936
|
+
gap: 24px;
|
|
5937
|
+
padding-bottom: 16px;
|
|
5938
|
+
display: flex;
|
|
5939
|
+
}
|
|
5940
|
+
|
|
5941
|
+
.luxe-masthead .luxe-kicker {
|
|
5942
|
+
color: var(--luxe-text-muted);
|
|
5943
|
+
}
|
|
5944
|
+
|
|
5945
|
+
.luxe-badge-seal > strong {
|
|
5946
|
+
font-size: 28px;
|
|
5947
|
+
line-height: 1;
|
|
5948
|
+
}
|
|
5949
|
+
|
|
5950
|
+
.luxe-badge-seal > small {
|
|
5951
|
+
font-size: 12px;
|
|
5952
|
+
line-height: 1.25;
|
|
5953
|
+
}
|
|
5954
|
+
|
|
5955
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-masthead-title {
|
|
5956
|
+
font-family: var(--luxe-font-display);
|
|
5957
|
+
text-transform: uppercase;
|
|
5958
|
+
letter-spacing: 0;
|
|
5959
|
+
margin: 0;
|
|
5960
|
+
font-size: 76px;
|
|
5961
|
+
font-weight: 400;
|
|
5962
|
+
line-height: 1;
|
|
5963
|
+
}
|
|
5964
|
+
|
|
5965
|
+
.luxe-collection-rail {
|
|
5966
|
+
align-content: start;
|
|
5967
|
+
gap: 24px;
|
|
5968
|
+
display: grid;
|
|
5969
|
+
}
|
|
5970
|
+
|
|
5971
|
+
.luxe-collection-rail ol {
|
|
5972
|
+
counter-reset: collection;
|
|
5973
|
+
margin: 0;
|
|
5974
|
+
padding: 0;
|
|
5975
|
+
list-style: none;
|
|
5976
|
+
}
|
|
5977
|
+
|
|
5978
|
+
.luxe-collection-rail li {
|
|
5979
|
+
counter-increment: collection;
|
|
5980
|
+
font-family: var(--luxe-font-control);
|
|
5981
|
+
align-items: center;
|
|
5982
|
+
gap: 16px;
|
|
5983
|
+
margin-bottom: 12px;
|
|
5984
|
+
display: flex;
|
|
5985
|
+
}
|
|
5986
|
+
|
|
5987
|
+
.luxe-collection-rail li:before {
|
|
5988
|
+
content: counter(collection,decimal-leading-zero);
|
|
5989
|
+
font: 10px var(--luxe-font-mono);
|
|
5990
|
+
color: var(--luxe-text-muted);
|
|
5991
|
+
}
|
|
5992
|
+
|
|
5993
|
+
.luxe-portrait {
|
|
5994
|
+
aspect-ratio: 388 / 434;
|
|
5995
|
+
border: 1px solid var(--luxe-border);
|
|
5996
|
+
overflow: hidden;
|
|
5997
|
+
}
|
|
5998
|
+
|
|
5999
|
+
.luxe-portrait img {
|
|
6000
|
+
object-fit: cover;
|
|
6001
|
+
width: 100%;
|
|
6002
|
+
height: 100%;
|
|
6003
|
+
display: block;
|
|
6004
|
+
}
|
|
6005
|
+
|
|
6006
|
+
.luxe-story {
|
|
6007
|
+
flex-direction: column;
|
|
6008
|
+
align-items: start;
|
|
6009
|
+
gap: 20px;
|
|
6010
|
+
display: flex;
|
|
6011
|
+
}
|
|
6012
|
+
|
|
6013
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-story-title {
|
|
6014
|
+
font: 400 62px/.96 var(--luxe-font-display);
|
|
6015
|
+
letter-spacing: 0;
|
|
6016
|
+
text-transform: uppercase;
|
|
6017
|
+
margin: 0;
|
|
6018
|
+
}
|
|
6019
|
+
|
|
6020
|
+
.luxe-byline {
|
|
6021
|
+
font: 10px/1.5 var(--luxe-font-control);
|
|
6022
|
+
text-transform: uppercase;
|
|
6023
|
+
margin: auto 0 0;
|
|
6024
|
+
}
|
|
6025
|
+
|
|
6026
|
+
.luxe-deck {
|
|
6027
|
+
max-width: 34ch;
|
|
6028
|
+
font: 15px/1.5 var(--luxe-font-body);
|
|
6029
|
+
margin: 0;
|
|
6030
|
+
}
|
|
6031
|
+
|
|
6032
|
+
.luxe-colophon {
|
|
6033
|
+
border-top: 1px solid var(--luxe-border);
|
|
6034
|
+
flex-wrap: wrap;
|
|
6035
|
+
justify-content: space-between;
|
|
6036
|
+
gap: 16px;
|
|
6037
|
+
padding-top: 20px;
|
|
6038
|
+
font-size: 11px;
|
|
6039
|
+
display: flex;
|
|
6040
|
+
}
|
|
6041
|
+
|
|
6042
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-section-title {
|
|
6043
|
+
font: 12px/1.4 var(--luxe-font-control);
|
|
6044
|
+
text-transform: uppercase;
|
|
6045
|
+
align-items: center;
|
|
6046
|
+
gap: 16px;
|
|
6047
|
+
margin: 0 0 20px;
|
|
6048
|
+
display: flex;
|
|
6049
|
+
}
|
|
6050
|
+
|
|
6051
|
+
.luxe-section-title:after {
|
|
6052
|
+
content: "";
|
|
6053
|
+
background: var(--luxe-border);
|
|
6054
|
+
flex: 1;
|
|
6055
|
+
height: 1px;
|
|
6056
|
+
}
|
|
6057
|
+
|
|
6058
|
+
.luxe-section-number {
|
|
6059
|
+
font: 10px var(--luxe-font-mono);
|
|
6060
|
+
color: var(--luxe-status-danger);
|
|
6061
|
+
}
|
|
6062
|
+
|
|
6063
|
+
.luxe-sheet .luxe-label, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-label {
|
|
6064
|
+
color: var(--luxe-text-muted);
|
|
6065
|
+
font: 10px/1.4 var(--luxe-font-control);
|
|
6066
|
+
text-transform: uppercase;
|
|
6067
|
+
margin: 0;
|
|
6068
|
+
}
|
|
6069
|
+
|
|
6070
|
+
.luxe-button, .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-button, :where([data-ui="editorial-luxe"]) .ui-icon-button {
|
|
6071
|
+
border: 1px solid var(--luxe-border);
|
|
6072
|
+
clip-path: none;
|
|
6073
|
+
min-height: 34px;
|
|
6074
|
+
box-shadow: none;
|
|
6075
|
+
font-family: var(--luxe-font-control);
|
|
6076
|
+
border-radius: 0;
|
|
6077
|
+
padding: 8px 16px;
|
|
6078
|
+
font-weight: 400;
|
|
6079
|
+
}
|
|
6080
|
+
|
|
6081
|
+
.luxe-sheet .luxe-button, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-button {
|
|
6082
|
+
text-transform: uppercase;
|
|
6083
|
+
white-space: nowrap;
|
|
6084
|
+
justify-content: center;
|
|
6085
|
+
align-items: center;
|
|
6086
|
+
gap: 8px;
|
|
6087
|
+
font-size: 11px;
|
|
6088
|
+
line-height: 1.35;
|
|
6089
|
+
display: inline-flex;
|
|
6090
|
+
}
|
|
6091
|
+
|
|
6092
|
+
.luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
6093
|
+
color: var(--luxe-on-primary);
|
|
6094
|
+
background: var(--luxe-primary);
|
|
6095
|
+
border-color: var(--luxe-primary);
|
|
6096
|
+
}
|
|
6097
|
+
|
|
6098
|
+
.luxe-button-secondary, .luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
6099
|
+
color: var(--luxe-text);
|
|
6100
|
+
border-color: var(--luxe-border);
|
|
6101
|
+
background: none;
|
|
6102
|
+
}
|
|
6103
|
+
|
|
6104
|
+
.luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
6105
|
+
color: var(--luxe-on-danger);
|
|
6106
|
+
background: var(--luxe-danger);
|
|
6107
|
+
border-color: var(--luxe-danger);
|
|
6108
|
+
}
|
|
6109
|
+
|
|
6110
|
+
.luxe-button:before, :where([data-ui="editorial-luxe"]) .ui-button:before {
|
|
6111
|
+
content: none;
|
|
6112
|
+
}
|
|
6113
|
+
|
|
6114
|
+
.luxe-button:hover:not(:disabled), :where([data-ui="editorial-luxe"]) .ui-button:hover:not(:disabled) {
|
|
6115
|
+
box-shadow: inset 0 0 0 1px var(--luxe-brass);
|
|
6116
|
+
}
|
|
6117
|
+
|
|
6118
|
+
.luxe-button:active, .luxe-button.is-pressed, :where([data-ui="editorial-luxe"]) .ui-button:active, :where([data-ui="editorial-luxe"]) .ui-button.is-pressed {
|
|
6119
|
+
box-shadow: inset 0 0 0 1px var(--luxe-brass);
|
|
6120
|
+
transform: none;
|
|
6121
|
+
}
|
|
6122
|
+
|
|
6123
|
+
.luxe-button:disabled, :where([data-ui="editorial-luxe"]) .ui-button:disabled {
|
|
6124
|
+
color: var(--luxe-text-muted);
|
|
6125
|
+
background: var(--luxe-surface-soft);
|
|
6126
|
+
border-color: var(--luxe-rule-soft);
|
|
6127
|
+
box-shadow: none;
|
|
6128
|
+
opacity: .65;
|
|
6129
|
+
}
|
|
6130
|
+
|
|
6131
|
+
.luxe-input, .luxe-select, .luxe-textarea, :where([data-ui="editorial-luxe"]) .ui-input, :where([data-ui="editorial-luxe"]) .ui-select, :where([data-ui="editorial-luxe"]) .ui-textarea {
|
|
6132
|
+
min-height: 34px;
|
|
6133
|
+
color: var(--luxe-text);
|
|
6134
|
+
border: 1px solid var(--luxe-border);
|
|
6135
|
+
box-shadow: none;
|
|
6136
|
+
background-color: #0000;
|
|
6137
|
+
border-radius: 0;
|
|
6138
|
+
padding: 8px 10px;
|
|
6139
|
+
}
|
|
6140
|
+
|
|
6141
|
+
.luxe-sheet :is(.luxe-input, .luxe-select, .luxe-textarea), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(.ui-input,.ui-select,.ui-textarea) {
|
|
6142
|
+
width: 100%;
|
|
6143
|
+
min-width: 0;
|
|
6144
|
+
font: 12px/1.4 var(--luxe-font-body);
|
|
6145
|
+
}
|
|
6146
|
+
|
|
6147
|
+
.luxe-textarea, :where([data-ui="editorial-luxe"]) .ui-textarea {
|
|
6148
|
+
resize: vertical;
|
|
6149
|
+
}
|
|
6150
|
+
|
|
6151
|
+
.luxe-input.luxe-input-valid, :where([data-ui="editorial-luxe"]) .ui-input.luxe-input-valid {
|
|
6152
|
+
border-color: var(--luxe-status-success);
|
|
6153
|
+
box-shadow: inset 2px 0 var(--luxe-status-success);
|
|
6154
|
+
}
|
|
6155
|
+
|
|
6156
|
+
.luxe-input[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-input[aria-invalid="true"] {
|
|
6157
|
+
border-color: var(--luxe-status-danger);
|
|
6158
|
+
box-shadow: inset 2px 0 var(--luxe-status-danger);
|
|
6159
|
+
}
|
|
6160
|
+
|
|
6161
|
+
.luxe-help-error {
|
|
6162
|
+
color: var(--luxe-status-danger);
|
|
6163
|
+
font-size: 12px;
|
|
6164
|
+
}
|
|
6165
|
+
|
|
6166
|
+
.luxe-file-upload {
|
|
6167
|
+
display: grid;
|
|
6168
|
+
position: relative;
|
|
6169
|
+
}
|
|
6170
|
+
|
|
6171
|
+
.luxe-file-upload input {
|
|
6172
|
+
opacity: 0;
|
|
6173
|
+
cursor: pointer;
|
|
6174
|
+
width: 100%;
|
|
6175
|
+
position: absolute;
|
|
6176
|
+
inset: 0;
|
|
6177
|
+
}
|
|
6178
|
+
|
|
6179
|
+
.luxe-file-drop {
|
|
6180
|
+
border: 1px solid var(--luxe-border);
|
|
6181
|
+
min-height: 160px;
|
|
6182
|
+
color: var(--luxe-text);
|
|
6183
|
+
text-align: center;
|
|
6184
|
+
font: 11px/1.5 var(--luxe-font-control);
|
|
6185
|
+
text-transform: uppercase;
|
|
6186
|
+
align-content: center;
|
|
6187
|
+
justify-items: center;
|
|
6188
|
+
gap: 16px;
|
|
6189
|
+
padding: 16px;
|
|
6190
|
+
display: grid;
|
|
6191
|
+
}
|
|
6192
|
+
|
|
6193
|
+
.luxe-file-drop svg {
|
|
6194
|
+
stroke-width: 1px;
|
|
6195
|
+
width: 36px;
|
|
6196
|
+
height: 36px;
|
|
6197
|
+
}
|
|
6198
|
+
|
|
6199
|
+
.luxe-file-upload:focus-within, .luxe-switch-segment:focus-within {
|
|
6200
|
+
outline: 2px solid var(--luxe-focus);
|
|
6201
|
+
outline-offset: 3px;
|
|
6202
|
+
}
|
|
6203
|
+
|
|
6204
|
+
.luxe-select-panel {
|
|
6205
|
+
border: 1px solid var(--luxe-border);
|
|
6206
|
+
padding: 4px;
|
|
6207
|
+
}
|
|
6208
|
+
|
|
6209
|
+
.luxe-option {
|
|
6210
|
+
width: 100%;
|
|
6211
|
+
min-height: 34px;
|
|
6212
|
+
box-shadow: none;
|
|
6213
|
+
color: var(--luxe-text);
|
|
6214
|
+
font: 11px var(--luxe-font-control);
|
|
6215
|
+
text-align: left;
|
|
6216
|
+
text-transform: uppercase;
|
|
6217
|
+
background: none;
|
|
6218
|
+
border: 0;
|
|
6219
|
+
border-radius: 0;
|
|
6220
|
+
padding: 8px 10px;
|
|
6221
|
+
display: block;
|
|
6222
|
+
}
|
|
6223
|
+
|
|
6224
|
+
.luxe-option[aria-selected="true"] {
|
|
6225
|
+
color: var(--luxe-on-danger);
|
|
6226
|
+
background: var(--luxe-danger);
|
|
6227
|
+
}
|
|
6228
|
+
|
|
6229
|
+
.luxe-check, .luxe-radio, :where([data-ui="editorial-luxe"]) .ui-check, :where([data-ui="editorial-luxe"]) .ui-radio {
|
|
6230
|
+
min-height: 32px;
|
|
6231
|
+
font: 11px var(--luxe-font-control);
|
|
6232
|
+
gap: 8px;
|
|
6233
|
+
}
|
|
6234
|
+
|
|
6235
|
+
.luxe-sheet :is(.luxe-check, .luxe-radio), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(.ui-check,.ui-radio) {
|
|
6236
|
+
margin: 0;
|
|
6237
|
+
display: flex;
|
|
6238
|
+
}
|
|
6239
|
+
|
|
6240
|
+
.luxe-check-control, .luxe-radio-control, :where([data-ui="editorial-luxe"]) .ui-check-control, :where([data-ui="editorial-luxe"]) .ui-radio-control {
|
|
6241
|
+
border: 1px solid var(--luxe-border);
|
|
6242
|
+
width: 16px;
|
|
6243
|
+
min-width: 16px;
|
|
6244
|
+
height: 16px;
|
|
6245
|
+
box-shadow: none;
|
|
6246
|
+
background: none;
|
|
6247
|
+
}
|
|
6248
|
+
|
|
6249
|
+
.luxe-check input:checked + .luxe-check-control, .luxe-radio input:checked + .luxe-radio-control, :where([data-ui="editorial-luxe"]) .ui-check input:checked+.ui-check-control, :where([data-ui="editorial-luxe"]) .ui-radio input:checked+.ui-radio-control {
|
|
6250
|
+
background: var(--luxe-primary);
|
|
6251
|
+
color: var(--luxe-on-primary);
|
|
6252
|
+
border-color: var(--luxe-border);
|
|
6253
|
+
}
|
|
6254
|
+
|
|
6255
|
+
.luxe-check input:checked + .luxe-check-control:after, :where([data-ui="editorial-luxe"]) .ui-check input:checked+.ui-check-control:after {
|
|
6256
|
+
content: "";
|
|
6257
|
+
border: 2px solid;
|
|
6258
|
+
border-width: 0 2px 2px 0;
|
|
6259
|
+
width: 4px;
|
|
6260
|
+
height: 8px;
|
|
6261
|
+
display: block;
|
|
6262
|
+
transform: translateY(-1px) rotate(45deg);
|
|
6263
|
+
}
|
|
6264
|
+
|
|
6265
|
+
.luxe-switch-segment {
|
|
6266
|
+
border: 1px solid var(--luxe-border);
|
|
6267
|
+
cursor: pointer;
|
|
6268
|
+
grid-template-columns: repeat(2, 1fr);
|
|
6269
|
+
width: 140px;
|
|
6270
|
+
min-height: 36px;
|
|
6271
|
+
display: inline-grid;
|
|
6272
|
+
position: relative;
|
|
6273
|
+
}
|
|
6274
|
+
|
|
6275
|
+
.luxe-switch-segment input {
|
|
6276
|
+
opacity: 0;
|
|
6277
|
+
width: 100%;
|
|
6278
|
+
height: 100%;
|
|
6279
|
+
margin: 0;
|
|
6280
|
+
position: absolute;
|
|
6281
|
+
}
|
|
6282
|
+
|
|
6283
|
+
.luxe-switch-segment span {
|
|
6284
|
+
min-height: 34px;
|
|
6285
|
+
font: 11px var(--luxe-font-control);
|
|
6286
|
+
text-transform: uppercase;
|
|
6287
|
+
place-items: center;
|
|
6288
|
+
display: grid;
|
|
6289
|
+
}
|
|
6290
|
+
|
|
6291
|
+
.luxe-switch-segment input:not(:checked) ~ span:first-of-type, .luxe-switch-segment input:checked ~ span:last-of-type {
|
|
6292
|
+
color: var(--luxe-on-primary);
|
|
6293
|
+
background: var(--luxe-primary);
|
|
6294
|
+
}
|
|
6295
|
+
|
|
6296
|
+
.luxe-range {
|
|
6297
|
+
appearance: none;
|
|
6298
|
+
background: none;
|
|
6299
|
+
border: 0;
|
|
6300
|
+
width: 100%;
|
|
6301
|
+
height: 28px;
|
|
6302
|
+
margin: 0;
|
|
6303
|
+
padding: 0;
|
|
6304
|
+
}
|
|
6305
|
+
|
|
6306
|
+
.luxe-range::-webkit-slider-runnable-track {
|
|
6307
|
+
background: var(--luxe-border);
|
|
6308
|
+
height: 1px;
|
|
6309
|
+
}
|
|
6310
|
+
|
|
6311
|
+
.luxe-range::-webkit-slider-thumb {
|
|
6312
|
+
appearance: none;
|
|
6313
|
+
border: 1px solid var(--luxe-brass);
|
|
6314
|
+
background: var(--luxe-brass-light);
|
|
6315
|
+
border-radius: 50%;
|
|
6316
|
+
width: 16px;
|
|
6317
|
+
height: 16px;
|
|
6318
|
+
margin-top: -7px;
|
|
6319
|
+
}
|
|
6320
|
+
|
|
6321
|
+
.luxe-range::-moz-range-track {
|
|
6322
|
+
background: var(--luxe-border);
|
|
6323
|
+
height: 1px;
|
|
6324
|
+
}
|
|
6325
|
+
|
|
6326
|
+
.luxe-range::-moz-range-thumb {
|
|
6327
|
+
border: 1px solid var(--luxe-brass);
|
|
6328
|
+
background: var(--luxe-brass-light);
|
|
6329
|
+
border-radius: 50%;
|
|
6330
|
+
width: 14px;
|
|
6331
|
+
height: 14px;
|
|
6332
|
+
}
|
|
6333
|
+
|
|
6334
|
+
.luxe-range-scale {
|
|
6335
|
+
color: var(--luxe-text-muted);
|
|
6336
|
+
font: 10px var(--luxe-font-mono);
|
|
6337
|
+
justify-content: space-between;
|
|
6338
|
+
display: flex;
|
|
6339
|
+
position: relative;
|
|
6340
|
+
}
|
|
6341
|
+
|
|
6342
|
+
.luxe-range-scale:before {
|
|
6343
|
+
content: "";
|
|
6344
|
+
background: repeating-linear-gradient(90deg,var(--luxe-rule-soft)0 1px,transparent 1px 12.5%);
|
|
6345
|
+
pointer-events: none;
|
|
6346
|
+
height: 6px;
|
|
6347
|
+
position: absolute;
|
|
6348
|
+
inset: -18px 0 auto;
|
|
6349
|
+
}
|
|
6350
|
+
|
|
6351
|
+
.luxe-progress, :where([data-ui="editorial-luxe"]) .ui-progress {
|
|
6352
|
+
background: var(--luxe-surface-soft);
|
|
6353
|
+
border: 0;
|
|
6354
|
+
border-radius: 0;
|
|
6355
|
+
height: 8px;
|
|
6356
|
+
}
|
|
6357
|
+
|
|
6358
|
+
.luxe-progress-bar, :where([data-ui="editorial-luxe"]) .ui-progress-bar {
|
|
6359
|
+
background: var(--luxe-primary);
|
|
6360
|
+
height: 100%;
|
|
6361
|
+
display: block;
|
|
6362
|
+
}
|
|
6363
|
+
|
|
6364
|
+
.luxe-segmented-progress {
|
|
6365
|
+
grid-template-columns: repeat(4, 1fr);
|
|
6366
|
+
gap: 5px;
|
|
6367
|
+
height: 5px;
|
|
6368
|
+
display: grid;
|
|
6369
|
+
}
|
|
6370
|
+
|
|
6371
|
+
.luxe-segmented-progress i {
|
|
6372
|
+
background: var(--luxe-surface-soft);
|
|
6373
|
+
}
|
|
6374
|
+
|
|
6375
|
+
.luxe-segmented-progress .is-done {
|
|
6376
|
+
background: var(--luxe-brass);
|
|
6377
|
+
}
|
|
6378
|
+
|
|
6379
|
+
.luxe-meter {
|
|
6380
|
+
background: linear-gradient(90deg,var(--luxe-danger)0 25%,var(--luxe-brass) 25% 66%,var(--luxe-surface-soft) 66%);
|
|
6381
|
+
height: 8px;
|
|
6382
|
+
position: relative;
|
|
6383
|
+
}
|
|
6384
|
+
|
|
6385
|
+
.luxe-meter:after {
|
|
6386
|
+
content: "";
|
|
6387
|
+
left: clamp(0%,calc(var(--luxe-value, 80)*1%),100%);
|
|
6388
|
+
background: var(--luxe-status-success);
|
|
6389
|
+
width: 3px;
|
|
6390
|
+
height: 18px;
|
|
6391
|
+
position: absolute;
|
|
6392
|
+
top: -5px;
|
|
6393
|
+
}
|
|
6394
|
+
|
|
6395
|
+
.luxe-alert, :where([data-ui="editorial-luxe"]) .ui-alert {
|
|
6396
|
+
border: 1px solid var(--luxe-status-success);
|
|
6397
|
+
box-shadow: none;
|
|
6398
|
+
font: 12px/1.45 var(--luxe-font-body);
|
|
6399
|
+
background: none;
|
|
6400
|
+
align-items: center;
|
|
6401
|
+
gap: 8px;
|
|
6402
|
+
padding: 8px;
|
|
6403
|
+
display: flex;
|
|
6404
|
+
}
|
|
6405
|
+
|
|
6406
|
+
.luxe-alert > div, :where([data-ui="editorial-luxe"]) .ui-alert>div {
|
|
6407
|
+
flex: 1;
|
|
6408
|
+
min-width: 0;
|
|
6409
|
+
}
|
|
6410
|
+
|
|
6411
|
+
.luxe-alert-mark, .luxe-alert-close {
|
|
6412
|
+
flex-shrink: 0;
|
|
6413
|
+
}
|
|
6414
|
+
|
|
6415
|
+
.luxe-alert-success, :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
6416
|
+
--luxe-alert-color: var(--luxe-status-success);
|
|
6417
|
+
--luxe-alert-fill: var(--luxe-success);
|
|
6418
|
+
--luxe-alert-ink: var(--luxe-on-success);
|
|
6419
|
+
}
|
|
6420
|
+
|
|
6421
|
+
.luxe-sheet .luxe-alert-warning, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-alert:where([data-ui-variant="warning"]) {
|
|
6422
|
+
--luxe-alert-color: var(--luxe-warning);
|
|
6423
|
+
--luxe-alert-fill: var(--luxe-warning);
|
|
6424
|
+
--luxe-alert-ink: var(--luxe-on-warning);
|
|
6425
|
+
border-color: var(--luxe-warning);
|
|
6426
|
+
}
|
|
6427
|
+
|
|
6428
|
+
.luxe-sheet .luxe-alert-danger, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-alert:where([data-ui-variant="danger"]) {
|
|
6429
|
+
--luxe-alert-color: var(--luxe-status-danger);
|
|
6430
|
+
--luxe-alert-fill: var(--luxe-danger);
|
|
6431
|
+
--luxe-alert-ink: var(--luxe-on-danger);
|
|
6432
|
+
border-color: var(--luxe-status-danger);
|
|
6433
|
+
}
|
|
6434
|
+
|
|
6435
|
+
.luxe-alert strong, :where([data-ui="editorial-luxe"]) .ui-alert strong {
|
|
6436
|
+
color: var(--luxe-alert-color);
|
|
6437
|
+
font: 600 10px/1.4 var(--luxe-font-control);
|
|
6438
|
+
text-transform: uppercase;
|
|
6439
|
+
display: block;
|
|
6440
|
+
}
|
|
6441
|
+
|
|
6442
|
+
.luxe-alert-mark {
|
|
6443
|
+
width: 24px;
|
|
6444
|
+
height: 24px;
|
|
6445
|
+
color: var(--luxe-alert-ink);
|
|
6446
|
+
background: var(--luxe-alert-fill);
|
|
6447
|
+
border-radius: 50%;
|
|
6448
|
+
place-items: center;
|
|
6449
|
+
display: grid;
|
|
6450
|
+
}
|
|
6451
|
+
|
|
6452
|
+
.luxe-alert-mark svg {
|
|
6453
|
+
width: 16px;
|
|
6454
|
+
height: 16px;
|
|
6455
|
+
}
|
|
6456
|
+
|
|
6457
|
+
.luxe-alert-mark > span {
|
|
6458
|
+
place-items: center;
|
|
6459
|
+
width: 100%;
|
|
6460
|
+
height: 100%;
|
|
6461
|
+
line-height: 1;
|
|
6462
|
+
display: grid;
|
|
6463
|
+
}
|
|
6464
|
+
|
|
6465
|
+
.luxe-alert-mark svg {
|
|
6466
|
+
display: block;
|
|
6467
|
+
}
|
|
6468
|
+
|
|
6469
|
+
.luxe-badge-warning, .luxe-alert-warning .luxe-alert-mark, :where([data-ui="editorial-luxe"]) .ui-badge:where([data-ui-variant="warning"]), :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="warning"]) .luxe-alert-mark {
|
|
6470
|
+
color: #fff;
|
|
6471
|
+
background: #624315;
|
|
6472
|
+
}
|
|
6473
|
+
|
|
6474
|
+
@supports (color: color-mix(in srgb,#fff,#000)) {
|
|
6475
|
+
.luxe-badge-warning, .luxe-alert-warning .luxe-alert-mark, :where([data-ui="editorial-luxe"]) .ui-badge:where([data-ui-variant="warning"]), :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="warning"]) .luxe-alert-mark {
|
|
6476
|
+
background: color-mix(in srgb,var(--luxe-warning) 45%,#000);
|
|
6477
|
+
}
|
|
6478
|
+
}
|
|
6479
|
+
|
|
6480
|
+
.luxe-alert-close {
|
|
6481
|
+
width: 24px;
|
|
6482
|
+
min-height: 24px;
|
|
6483
|
+
box-shadow: none;
|
|
6484
|
+
color: var(--luxe-text-muted);
|
|
6485
|
+
background: none;
|
|
6486
|
+
border: 0;
|
|
6487
|
+
place-items: center;
|
|
6488
|
+
padding: 0;
|
|
6489
|
+
display: grid;
|
|
6490
|
+
}
|
|
6491
|
+
|
|
6492
|
+
.luxe-alert-close svg {
|
|
6493
|
+
width: 16px;
|
|
6494
|
+
height: 16px;
|
|
6495
|
+
}
|
|
6496
|
+
|
|
6497
|
+
.luxe-tabs {
|
|
6498
|
+
border: 0;
|
|
6499
|
+
}
|
|
6500
|
+
|
|
6501
|
+
.luxe-tab-list {
|
|
6502
|
+
border-bottom: 1px solid var(--luxe-border);
|
|
6503
|
+
display: flex;
|
|
6504
|
+
}
|
|
6505
|
+
|
|
6506
|
+
.luxe-tab {
|
|
6507
|
+
min-width: 0;
|
|
6508
|
+
min-height: 34px;
|
|
6509
|
+
box-shadow: none;
|
|
6510
|
+
color: var(--luxe-text);
|
|
6511
|
+
font: 11px var(--luxe-font-control);
|
|
6512
|
+
text-transform: uppercase;
|
|
6513
|
+
background: none;
|
|
6514
|
+
border: 1px solid #0000;
|
|
6515
|
+
border-radius: 0;
|
|
6516
|
+
flex: 1;
|
|
6517
|
+
padding: 8px;
|
|
6518
|
+
}
|
|
6519
|
+
|
|
6520
|
+
.luxe-tab[aria-selected="true"] {
|
|
6521
|
+
border-color: var(--luxe-border);
|
|
6522
|
+
border-bottom-color: var(--luxe-surface);
|
|
6523
|
+
}
|
|
6524
|
+
|
|
6525
|
+
.luxe-tab-panel {
|
|
6526
|
+
padding: 20px 0;
|
|
6527
|
+
font-size: 13px;
|
|
6528
|
+
line-height: 1.5;
|
|
6529
|
+
}
|
|
6530
|
+
|
|
6531
|
+
.luxe-table-wrap, :where([data-ui="editorial-luxe"]) .ui-table-wrap {
|
|
6532
|
+
box-shadow: none;
|
|
6533
|
+
background: none;
|
|
6534
|
+
border: 0;
|
|
6535
|
+
overflow-x: auto;
|
|
6536
|
+
}
|
|
6537
|
+
|
|
6538
|
+
.luxe-sheet .luxe-table, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-table {
|
|
6539
|
+
font: 12px/1.4 var(--luxe-font-body);
|
|
6540
|
+
border: 0;
|
|
6541
|
+
}
|
|
6542
|
+
|
|
6543
|
+
.luxe-table th, :where([data-ui="editorial-luxe"]) .ui-table th {
|
|
6544
|
+
border-block: 1px solid var(--luxe-border);
|
|
6545
|
+
color: var(--luxe-text);
|
|
6546
|
+
font: 10px var(--luxe-font-control);
|
|
6547
|
+
text-transform: uppercase;
|
|
6548
|
+
background: none;
|
|
6549
|
+
}
|
|
6550
|
+
|
|
6551
|
+
.luxe-table td, :where([data-ui="editorial-luxe"]) .ui-table td {
|
|
6552
|
+
border-bottom: 1px solid var(--luxe-rule-soft);
|
|
6553
|
+
}
|
|
6554
|
+
|
|
6555
|
+
.luxe-sheet .luxe-table :is(th, td), :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-table :is(th,td) {
|
|
6556
|
+
white-space: nowrap;
|
|
6557
|
+
padding: 8px 6px;
|
|
6558
|
+
}
|
|
6559
|
+
|
|
6560
|
+
.luxe-badge-medallion {
|
|
6561
|
+
border: 4px double var(--luxe-brass-light);
|
|
6562
|
+
width: 48px;
|
|
6563
|
+
height: 48px;
|
|
6564
|
+
color: var(--luxe-on-primary);
|
|
6565
|
+
background: var(--luxe-primary);
|
|
6566
|
+
font: 10px var(--luxe-font-control);
|
|
6567
|
+
text-transform: uppercase;
|
|
6568
|
+
border-radius: 50%;
|
|
6569
|
+
place-items: center;
|
|
6570
|
+
padding: 4px;
|
|
6571
|
+
display: inline-grid;
|
|
6572
|
+
}
|
|
6573
|
+
|
|
6574
|
+
.luxe-badge-medallion.luxe-badge-danger, :where([data-ui="editorial-luxe"]) .luxe-badge-medallion.ui-badge:where([data-ui-variant="danger"]) {
|
|
6575
|
+
color: var(--luxe-on-danger);
|
|
6576
|
+
background: var(--luxe-danger);
|
|
6577
|
+
}
|
|
6578
|
+
|
|
6579
|
+
.luxe-badge-brass {
|
|
6580
|
+
color: var(--luxe-on-brass);
|
|
6581
|
+
background: var(--luxe-brass-light);
|
|
6582
|
+
}
|
|
6583
|
+
|
|
6584
|
+
.luxe-pagination {
|
|
6585
|
+
display: inline-flex;
|
|
6586
|
+
}
|
|
6587
|
+
|
|
6588
|
+
.luxe-pagination button {
|
|
6589
|
+
border: 1px solid var(--luxe-rule-soft);
|
|
6590
|
+
width: 32px;
|
|
6591
|
+
min-height: 34px;
|
|
6592
|
+
box-shadow: none;
|
|
6593
|
+
color: var(--luxe-text);
|
|
6594
|
+
font: 11px var(--luxe-font-mono);
|
|
6595
|
+
background: none;
|
|
6596
|
+
border-radius: 0;
|
|
6597
|
+
padding: 4px;
|
|
6598
|
+
}
|
|
6599
|
+
|
|
6600
|
+
.luxe-pagination button[aria-current="page"] {
|
|
6601
|
+
color: var(--luxe-on-primary);
|
|
6602
|
+
background: var(--luxe-primary);
|
|
6603
|
+
}
|
|
6604
|
+
|
|
6605
|
+
.luxe-stepper {
|
|
6606
|
+
border: 1px solid var(--luxe-border);
|
|
6607
|
+
grid-template-columns: 36px 64px 36px;
|
|
6608
|
+
display: inline-grid;
|
|
6609
|
+
}
|
|
6610
|
+
|
|
6611
|
+
.luxe-stepper :is(button, output) {
|
|
6612
|
+
min-height: 34px;
|
|
6613
|
+
box-shadow: none;
|
|
6614
|
+
color: var(--luxe-text);
|
|
6615
|
+
font: 12px var(--luxe-font-mono);
|
|
6616
|
+
background: none;
|
|
6617
|
+
border: 0;
|
|
6618
|
+
border-radius: 0;
|
|
6619
|
+
place-items: center;
|
|
6620
|
+
padding: 0;
|
|
6621
|
+
display: grid;
|
|
6622
|
+
}
|
|
6623
|
+
|
|
6624
|
+
.luxe-stepper output {
|
|
6625
|
+
border-inline: 1px solid var(--luxe-rule-soft);
|
|
6626
|
+
}
|
|
6627
|
+
|
|
6628
|
+
.luxe-stepper svg, .luxe-pagination svg {
|
|
6629
|
+
width: 16px;
|
|
6630
|
+
height: 16px;
|
|
6631
|
+
}
|
|
6632
|
+
|
|
6633
|
+
.luxe-tooltip, [data-ui="editorial-luxe"] :where(.ui-tooltip, [role="tooltip"]) {
|
|
6634
|
+
color: var(--luxe-on-primary);
|
|
6635
|
+
background: var(--luxe-primary);
|
|
6636
|
+
box-shadow: none;
|
|
6637
|
+
font: 12px/1.5 var(--luxe-font-body);
|
|
6638
|
+
border: 0;
|
|
6639
|
+
padding: 16px;
|
|
6640
|
+
position: relative;
|
|
6641
|
+
}
|
|
6642
|
+
|
|
6643
|
+
.luxe-tooltip:after {
|
|
6644
|
+
content: "";
|
|
6645
|
+
background: var(--luxe-primary);
|
|
6646
|
+
width: 14px;
|
|
6647
|
+
height: 14px;
|
|
6648
|
+
position: absolute;
|
|
6649
|
+
bottom: -7px;
|
|
6650
|
+
left: 24px;
|
|
6651
|
+
rotate: 45deg;
|
|
6652
|
+
}
|
|
6653
|
+
|
|
6654
|
+
.luxe-dialog {
|
|
6655
|
+
border: 3px double var(--luxe-border);
|
|
6656
|
+
max-width: 520px;
|
|
6657
|
+
color: var(--luxe-text);
|
|
6658
|
+
background: var(--luxe-surface-strong);
|
|
6659
|
+
box-shadow: none;
|
|
6660
|
+
text-align: center;
|
|
6661
|
+
border-radius: 0;
|
|
6662
|
+
padding: 16px;
|
|
6663
|
+
}
|
|
6664
|
+
|
|
6665
|
+
.luxe-sheet .luxe-dialog {
|
|
6666
|
+
border: 3px double var(--luxe-border);
|
|
6667
|
+
background: var(--luxe-surface-strong);
|
|
6668
|
+
padding: 12px;
|
|
6669
|
+
}
|
|
6670
|
+
|
|
6671
|
+
dialog.luxe-dialog:not([open]) {
|
|
6672
|
+
display: none;
|
|
6673
|
+
}
|
|
6674
|
+
|
|
6675
|
+
dialog.luxe-dialog[open] {
|
|
6676
|
+
width: min(520px, 100% - 32px);
|
|
6677
|
+
margin: auto;
|
|
6678
|
+
position: fixed;
|
|
6679
|
+
inset: 0;
|
|
6680
|
+
}
|
|
6681
|
+
|
|
6682
|
+
.luxe-dialog::backdrop {
|
|
6683
|
+
background: #0009;
|
|
6684
|
+
}
|
|
6685
|
+
|
|
6686
|
+
.luxe-dialog-actions {
|
|
6687
|
+
flex-wrap: wrap;
|
|
6688
|
+
justify-content: center;
|
|
6689
|
+
gap: 12px;
|
|
6690
|
+
margin-top: 12px;
|
|
6691
|
+
display: flex;
|
|
6692
|
+
}
|
|
6693
|
+
|
|
6694
|
+
.luxe-details {
|
|
6695
|
+
border-top: 1px solid var(--luxe-border);
|
|
6696
|
+
font-size: 12px;
|
|
6697
|
+
}
|
|
6698
|
+
|
|
6699
|
+
.luxe-details summary {
|
|
6700
|
+
font-family: var(--luxe-font-control);
|
|
6701
|
+
padding: 12px 0;
|
|
6702
|
+
}
|
|
6703
|
+
|
|
6704
|
+
[data-ui="editorial-luxe"][data-mode] details.luxe-details {
|
|
6705
|
+
border: 0;
|
|
6706
|
+
border-top: 1px solid var(--luxe-border);
|
|
6707
|
+
box-shadow: none;
|
|
6708
|
+
background: none;
|
|
6709
|
+
padding: 0;
|
|
6710
|
+
}
|
|
6711
|
+
|
|
6712
|
+
.luxe-skeleton {
|
|
6713
|
+
gap: 8px;
|
|
6714
|
+
display: grid;
|
|
6715
|
+
}
|
|
6716
|
+
|
|
6717
|
+
.luxe-skeleton i {
|
|
6718
|
+
background: var(--luxe-surface-soft);
|
|
6719
|
+
height: 6px;
|
|
6720
|
+
animation: 1.7s ease-in-out infinite luxe-pulse;
|
|
6721
|
+
}
|
|
6722
|
+
|
|
6723
|
+
.luxe-skeleton i:nth-child(2) {
|
|
6724
|
+
width: 76%;
|
|
6725
|
+
}
|
|
6726
|
+
|
|
6727
|
+
.luxe-spinner, .luxe-loading-spinner, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
6728
|
+
width: 28px;
|
|
6729
|
+
height: 28px;
|
|
6730
|
+
border: 2px solid var(--luxe-rule-soft);
|
|
6731
|
+
border-top-color: var(--luxe-brass);
|
|
6732
|
+
border-bottom-color: var(--luxe-brass);
|
|
6733
|
+
block-size: 28px;
|
|
6734
|
+
inline-size: 28px;
|
|
6735
|
+
box-shadow: none;
|
|
6736
|
+
clip-path: none;
|
|
6737
|
+
background: none;
|
|
6738
|
+
border-radius: 50%;
|
|
6739
|
+
flex-shrink: 0;
|
|
6740
|
+
animation: 1.8s linear infinite luxe-spin;
|
|
6741
|
+
position: relative;
|
|
6742
|
+
}
|
|
6743
|
+
|
|
6744
|
+
.luxe-spinner:before, .luxe-loading-spinner:before, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):before {
|
|
6745
|
+
content: "";
|
|
6746
|
+
border: 1px solid #0000;
|
|
6747
|
+
border-inline-color: var(--luxe-text);
|
|
6748
|
+
border-radius: 50%;
|
|
6749
|
+
animation: 1.2s linear infinite luxe-counter-spin;
|
|
6750
|
+
position: absolute;
|
|
6751
|
+
inset: 4px;
|
|
6752
|
+
}
|
|
6753
|
+
|
|
6754
|
+
.luxe-spinner-sm {
|
|
6755
|
+
width: 18px;
|
|
6756
|
+
height: 18px;
|
|
6757
|
+
block-size: 18px;
|
|
6758
|
+
inline-size: 18px;
|
|
6759
|
+
}
|
|
6760
|
+
|
|
6761
|
+
.luxe-spinner-lg {
|
|
6762
|
+
width: 40px;
|
|
6763
|
+
height: 40px;
|
|
6764
|
+
block-size: 40px;
|
|
6765
|
+
inline-size: 40px;
|
|
6766
|
+
}
|
|
6767
|
+
|
|
6768
|
+
.luxe-spinner-sm:before {
|
|
6769
|
+
inset: 2px;
|
|
6770
|
+
}
|
|
6771
|
+
|
|
6772
|
+
.luxe-button[aria-busy="true"]:after, [data-ui="editorial-luxe"] :where(button[aria-busy="true"]):after, :where([data-ui="editorial-luxe"]) .ui-button[aria-busy="true"]:after {
|
|
6773
|
+
width: 12px;
|
|
6774
|
+
height: 12px;
|
|
6775
|
+
box-shadow: none;
|
|
6776
|
+
clip-path: none;
|
|
6777
|
+
background: none;
|
|
6778
|
+
border: 2px solid;
|
|
6779
|
+
border-right-color: #0000;
|
|
6780
|
+
border-radius: 50%;
|
|
6781
|
+
flex: 0 0 12px;
|
|
6782
|
+
animation: .9s linear infinite luxe-spin;
|
|
6783
|
+
}
|
|
6784
|
+
|
|
6785
|
+
.luxe-sheet [hidden] {
|
|
6786
|
+
display: none !important;
|
|
6787
|
+
}
|
|
6788
|
+
|
|
6789
|
+
.luxe-sheet :is(button, a, input, select, textarea, [tabindex]):focus-visible {
|
|
6790
|
+
outline: 2px solid var(--luxe-focus);
|
|
6791
|
+
outline-offset: 3px;
|
|
6792
|
+
}
|
|
6793
|
+
|
|
6794
|
+
.luxe-card, .luxe-panel, .luxe-toolbar, .luxe-well, .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar, :where([data-ui="editorial-luxe"]) .ui-card, :where([data-ui="editorial-luxe"]) .ui-toolbar {
|
|
6795
|
+
background: var(--luxe-surface);
|
|
6796
|
+
border: 1px solid var(--luxe-border);
|
|
6797
|
+
box-shadow: none;
|
|
6798
|
+
border-radius: 0;
|
|
6799
|
+
}
|
|
6800
|
+
|
|
6801
|
+
[data-ui="editorial-luxe"][data-mode] :where(fieldset, article, aside) {
|
|
6802
|
+
background: var(--luxe-surface);
|
|
6803
|
+
}
|
|
6804
|
+
|
|
6805
|
+
@keyframes luxe-pulse {
|
|
6806
|
+
50% {
|
|
6807
|
+
opacity: .45;
|
|
6808
|
+
}
|
|
6809
|
+
}
|
|
6810
|
+
|
|
6811
|
+
@keyframes luxe-counter-spin {
|
|
6812
|
+
to {
|
|
6813
|
+
transform: rotate(-360deg);
|
|
6814
|
+
}
|
|
6815
|
+
}
|
|
6816
|
+
|
|
6817
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6818
|
+
.luxe-spinner, .luxe-loading-spinner, .luxe-spinner:before, .luxe-loading-spinner:before, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):before, .luxe-spinner, .luxe-skeleton i, .luxe-button[aria-busy="true"]:after, [data-ui="editorial-luxe"] :where(.ui-spinner, button[aria-busy="true"]):after, :where([data-ui="editorial-luxe"]) .ui-button[aria-busy="true"]:after {
|
|
6819
|
+
animation: none !important;
|
|
6820
|
+
}
|
|
6821
|
+
}
|
|
6822
|
+
|
|
6823
|
+
@media (pointer: coarse) {
|
|
6824
|
+
.luxe-sheet :is(button, .luxe-input, .luxe-select, .luxe-check, .luxe-radio, .luxe-switch-segment, .luxe-range, .luxe-file-drop), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(button,.ui-input,.ui-select,.ui-check,.ui-radio,.luxe-switch-segment,.luxe-range,.luxe-file-drop) {
|
|
6825
|
+
min-height: 44px;
|
|
6826
|
+
}
|
|
6827
|
+
|
|
6828
|
+
.luxe-sheet .luxe-alert-close, .luxe-sheet .luxe-pagination button {
|
|
6829
|
+
width: 44px;
|
|
6830
|
+
}
|
|
6831
|
+
|
|
6832
|
+
.luxe-sheet .luxe-stepper {
|
|
6833
|
+
grid-template-columns: 44px 64px 44px;
|
|
6834
|
+
}
|
|
6835
|
+
}
|
|
6836
|
+
|
|
6837
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-button.luxe-button-warning, :where([data-ui="editorial-luxe"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
6838
|
+
background: var(--luxe-warning);
|
|
6839
|
+
color: var(--luxe-on-warning);
|
|
6840
|
+
border-color: var(--luxe-warning);
|
|
6841
|
+
text-shadow: none;
|
|
6842
|
+
}
|
|
6843
|
+
|
|
6844
|
+
[data-ui="editorial-luxe"][data-theme][data-mode="contrast"] .luxe-button.luxe-button-danger, :where([data-ui="editorial-luxe"])[data-theme][data-mode="contrast"] .ui-button.ui-button:where([data-ui-variant="danger"]) {
|
|
6845
|
+
color: rgb(var(--usk-danger-text-rgb, 0 0 0));
|
|
6846
|
+
text-shadow: none;
|
|
6847
|
+
background: #ff5270;
|
|
6848
|
+
border-color: #ff5270;
|
|
6849
|
+
}
|
|
6850
|
+
|
|
6851
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-badge-seal > strong {
|
|
6852
|
+
font-size: 28px;
|
|
6853
|
+
line-height: 1;
|
|
6854
|
+
}
|
|
6855
|
+
|
|
6856
|
+
[data-ui="editorial-luxe"][data-mode] .luxe-badge-seal > small {
|
|
6857
|
+
font-size: 12px;
|
|
6858
|
+
line-height: 1.25;
|
|
6859
|
+
}
|
|
4804
6860
|
}
|