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);
|
|
2102
2660
|
}
|
|
2103
2661
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
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);
|
|
2106
2667
|
}
|
|
2107
2668
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
|
|
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);
|
|
2673
|
+
}
|
|
2674
|
+
|
|
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="brutalism"])[data-
|
|
2988
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"])[data-
|
|
3038
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"])[data-
|
|
3080
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"]) .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,10 +3488,72 @@
|
|
|
2895
3488
|
}
|
|
2896
3489
|
}
|
|
2897
3490
|
|
|
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
|
+
|
|
2898
3553
|
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
2899
3554
|
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
2900
3555
|
@layer ui-style-kit.components {
|
|
2901
|
-
[data-ui][data-
|
|
3556
|
+
[data-ui][data-mode] :where(
|
|
2902
3557
|
.luxe-surface,
|
|
2903
3558
|
.luxe-surface-sm,
|
|
2904
3559
|
.luxe-surface-lg,
|
|
@@ -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="brutalism"])[data-
|
|
3719
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"])[data-
|
|
3797
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"])[data-
|
|
3833
|
+
), [data-ui]:where([data-ui="brutalism"])[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="brutalism"]) :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="brutalism"]) :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="brutalism"]) :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;
|
|
@@ -3534,6 +4191,29 @@
|
|
|
3534
4191
|
--lightningcss-light: initial;
|
|
3535
4192
|
--lightningcss-dark: ;
|
|
3536
4193
|
color-scheme: light;
|
|
4194
|
+
--brutal-fallback-bg-rgb: 245 247 250;
|
|
4195
|
+
--brutal-fallback-surface-rgb: 255 255 255;
|
|
4196
|
+
--brutal-fallback-surface-strong-rgb: 252 252 253;
|
|
4197
|
+
--brutal-fallback-surface-soft-rgb: 232 235 240;
|
|
4198
|
+
--brutal-fallback-text-rgb: 17 36 59;
|
|
4199
|
+
--brutal-fallback-text-muted-rgb: 90 104 119;
|
|
4200
|
+
--brutal-fallback-border-rgb: 200 207 217;
|
|
4201
|
+
--brutal-fallback-primary-rgb: 13 59 102;
|
|
4202
|
+
--brutal-fallback-primary-hover-rgb: 11 49 85;
|
|
4203
|
+
--brutal-fallback-primary-text-rgb: 255 255 255;
|
|
4204
|
+
--brutal-fallback-secondary-rgb: 214 43 43;
|
|
4205
|
+
--brutal-fallback-secondary-hover-rgb: 178 35 35;
|
|
4206
|
+
--brutal-fallback-secondary-text-rgb: 255 255 255;
|
|
4207
|
+
--brutal-fallback-accent-rgb: 233 90 90;
|
|
4208
|
+
--brutal-fallback-accent-text-rgb: 0 0 0;
|
|
4209
|
+
--brutal-fallback-success-rgb: 47 125 84;
|
|
4210
|
+
--brutal-fallback-success-text-rgb: 255 255 255;
|
|
4211
|
+
--brutal-fallback-warning-rgb: 164 106 0;
|
|
4212
|
+
--brutal-fallback-warning-text-rgb: 0 0 0;
|
|
4213
|
+
--brutal-fallback-danger-rgb: 198 40 40;
|
|
4214
|
+
--brutal-fallback-danger-text-rgb: 255 255 255;
|
|
4215
|
+
--brutal-fallback-link-rgb: 11 49 85;
|
|
4216
|
+
--brutal-fallback-focus-rgb: 214 43 43;
|
|
3537
4217
|
--brutal-panel-alpha: .92;
|
|
3538
4218
|
--brutal-panel-strong-alpha: .98;
|
|
3539
4219
|
--brutal-panel-soft-alpha: .74;
|
|
@@ -3547,6 +4227,29 @@
|
|
|
3547
4227
|
--lightningcss-light: ;
|
|
3548
4228
|
--lightningcss-dark: initial;
|
|
3549
4229
|
color-scheme: dark;
|
|
4230
|
+
--brutal-fallback-bg-rgb: 8 17 28;
|
|
4231
|
+
--brutal-fallback-surface-rgb: 16 32 48;
|
|
4232
|
+
--brutal-fallback-surface-strong-rgb: 24 49 73;
|
|
4233
|
+
--brutal-fallback-surface-soft-rgb: 11 23 36;
|
|
4234
|
+
--brutal-fallback-text-rgb: 243 247 251;
|
|
4235
|
+
--brutal-fallback-text-muted-rgb: 188 200 213;
|
|
4236
|
+
--brutal-fallback-border-rgb: 71 96 121;
|
|
4237
|
+
--brutal-fallback-primary-rgb: 108 169 227;
|
|
4238
|
+
--brutal-fallback-primary-hover-rgb: 147 193 237;
|
|
4239
|
+
--brutal-fallback-primary-text-rgb: 0 0 0;
|
|
4240
|
+
--brutal-fallback-secondary-rgb: 255 106 106;
|
|
4241
|
+
--brutal-fallback-secondary-hover-rgb: 255 146 146;
|
|
4242
|
+
--brutal-fallback-secondary-text-rgb: 0 0 0;
|
|
4243
|
+
--brutal-fallback-accent-rgb: 255 154 154;
|
|
4244
|
+
--brutal-fallback-accent-text-rgb: 0 0 0;
|
|
4245
|
+
--brutal-fallback-success-rgb: 143 223 182;
|
|
4246
|
+
--brutal-fallback-success-text-rgb: 0 0 0;
|
|
4247
|
+
--brutal-fallback-warning-rgb: 255 210 122;
|
|
4248
|
+
--brutal-fallback-warning-text-rgb: 0 0 0;
|
|
4249
|
+
--brutal-fallback-danger-rgb: 255 143 143;
|
|
4250
|
+
--brutal-fallback-danger-text-rgb: 0 0 0;
|
|
4251
|
+
--brutal-fallback-link-rgb: 165 203 241;
|
|
4252
|
+
--brutal-fallback-focus-rgb: 255 106 106;
|
|
3550
4253
|
--brutal-panel-alpha: .82;
|
|
3551
4254
|
--brutal-panel-strong-alpha: .94;
|
|
3552
4255
|
--brutal-panel-soft-alpha: .58;
|
|
@@ -3560,6 +4263,29 @@
|
|
|
3560
4263
|
--lightningcss-light: ;
|
|
3561
4264
|
--lightningcss-dark: initial;
|
|
3562
4265
|
color-scheme: dark;
|
|
4266
|
+
--brutal-fallback-bg-rgb: 0 0 0;
|
|
4267
|
+
--brutal-fallback-surface-rgb: 6 16 26;
|
|
4268
|
+
--brutal-fallback-surface-strong-rgb: 10 29 48;
|
|
4269
|
+
--brutal-fallback-surface-soft-rgb: 0 0 0;
|
|
4270
|
+
--brutal-fallback-text-rgb: 255 255 255;
|
|
4271
|
+
--brutal-fallback-text-muted-rgb: 238 244 255;
|
|
4272
|
+
--brutal-fallback-border-rgb: 255 255 255;
|
|
4273
|
+
--brutal-fallback-primary-rgb: 102 181 255;
|
|
4274
|
+
--brutal-fallback-primary-hover-rgb: 255 255 255;
|
|
4275
|
+
--brutal-fallback-primary-text-rgb: 0 0 0;
|
|
4276
|
+
--brutal-fallback-secondary-rgb: 255 102 102;
|
|
4277
|
+
--brutal-fallback-secondary-hover-rgb: 255 255 255;
|
|
4278
|
+
--brutal-fallback-secondary-text-rgb: 0 0 0;
|
|
4279
|
+
--brutal-fallback-accent-rgb: 255 170 170;
|
|
4280
|
+
--brutal-fallback-accent-text-rgb: 0 0 0;
|
|
4281
|
+
--brutal-fallback-success-rgb: 0 255 144;
|
|
4282
|
+
--brutal-fallback-success-text-rgb: 0 0 0;
|
|
4283
|
+
--brutal-fallback-warning-rgb: 255 212 0;
|
|
4284
|
+
--brutal-fallback-warning-text-rgb: 0 0 0;
|
|
4285
|
+
--brutal-fallback-danger-rgb: 255 92 92;
|
|
4286
|
+
--brutal-fallback-danger-text-rgb: 0 0 0;
|
|
4287
|
+
--brutal-fallback-link-rgb: 140 198 255;
|
|
4288
|
+
--brutal-fallback-focus-rgb: 255 255 255;
|
|
3563
4289
|
--brutal-panel-alpha: 1;
|
|
3564
4290
|
--brutal-panel-strong-alpha: 1;
|
|
3565
4291
|
--brutal-panel-soft-alpha: .92;
|
|
@@ -3584,15 +4310,42 @@
|
|
|
3584
4310
|
--brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3585
4311
|
--brutal-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3586
4312
|
--brutal-accent-rgb: var(--usk-accent-rgb);
|
|
3587
|
-
--brutal-success-rgb: var(--usk-success-rgb);
|
|
3588
|
-
--brutal-warning-rgb: var(--usk-warning-rgb);
|
|
3589
|
-
--brutal-danger-rgb: var(--usk-danger-rgb);
|
|
3590
|
-
--brutal-link-rgb: var(--usk-link-rgb);
|
|
3591
4313
|
--brutal-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
4314
|
+
--brutal-success-rgb: var(--usk-success-rgb);
|
|
3592
4315
|
--brutal-success-text-rgb: var(--usk-success-text-rgb);
|
|
4316
|
+
--brutal-warning-rgb: var(--usk-warning-rgb);
|
|
3593
4317
|
--brutal-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
4318
|
+
--brutal-danger-rgb: var(--usk-danger-rgb);
|
|
3594
4319
|
--brutal-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
4320
|
+
--brutal-link-rgb: var(--usk-link-rgb);
|
|
3595
4321
|
--brutal-focus-rgb: var(--usk-focus-rgb);
|
|
4322
|
+
}
|
|
4323
|
+
|
|
4324
|
+
[data-ui="brutalism"][data-mode] {
|
|
4325
|
+
--usk-native-bg: var(--brutal-bg);
|
|
4326
|
+
--brutal-bg-rgb: var(--usk-bg-rgb, var(--brutal-fallback-bg-rgb));
|
|
4327
|
+
--brutal-surface-rgb: var(--usk-surface-rgb, var(--brutal-fallback-surface-rgb));
|
|
4328
|
+
--brutal-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--brutal-fallback-surface-strong-rgb));
|
|
4329
|
+
--brutal-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--brutal-fallback-surface-soft-rgb));
|
|
4330
|
+
--brutal-text-rgb: var(--usk-text-rgb, var(--brutal-fallback-text-rgb));
|
|
4331
|
+
--brutal-text-muted-rgb: var(--usk-text-muted-rgb, var(--brutal-fallback-text-muted-rgb));
|
|
4332
|
+
--brutal-border-rgb: var(--usk-border-rgb, var(--brutal-fallback-border-rgb));
|
|
4333
|
+
--brutal-primary-rgb: var(--usk-primary-rgb, var(--brutal-fallback-primary-rgb));
|
|
4334
|
+
--brutal-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--brutal-fallback-primary-hover-rgb));
|
|
4335
|
+
--brutal-primary-text-rgb: var(--usk-primary-text-rgb, var(--brutal-fallback-primary-text-rgb));
|
|
4336
|
+
--brutal-secondary-rgb: var(--usk-secondary-rgb, var(--brutal-fallback-secondary-rgb));
|
|
4337
|
+
--brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--brutal-fallback-secondary-hover-rgb));
|
|
4338
|
+
--brutal-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--brutal-fallback-secondary-text-rgb));
|
|
4339
|
+
--brutal-accent-rgb: var(--usk-accent-rgb, var(--brutal-fallback-accent-rgb));
|
|
4340
|
+
--brutal-accent-text-rgb: var(--usk-accent-text-rgb, var(--brutal-fallback-accent-text-rgb));
|
|
4341
|
+
--brutal-success-rgb: var(--usk-success-rgb, var(--brutal-fallback-success-rgb));
|
|
4342
|
+
--brutal-success-text-rgb: var(--usk-success-text-rgb, var(--brutal-fallback-success-text-rgb));
|
|
4343
|
+
--brutal-warning-rgb: var(--usk-warning-rgb, var(--brutal-fallback-warning-rgb));
|
|
4344
|
+
--brutal-warning-text-rgb: var(--usk-warning-text-rgb, var(--brutal-fallback-warning-text-rgb));
|
|
4345
|
+
--brutal-danger-rgb: var(--usk-danger-rgb, var(--brutal-fallback-danger-rgb));
|
|
4346
|
+
--brutal-danger-text-rgb: var(--usk-danger-text-rgb, var(--brutal-fallback-danger-text-rgb));
|
|
4347
|
+
--brutal-link-rgb: var(--usk-link-rgb, var(--brutal-fallback-link-rgb));
|
|
4348
|
+
--brutal-focus-rgb: var(--usk-focus-rgb, var(--brutal-fallback-focus-rgb));
|
|
3596
4349
|
--usk-native-surface: var(--brutal-surface);
|
|
3597
4350
|
--usk-native-surface-strong: var(--brutal-surface-strong);
|
|
3598
4351
|
--usk-native-surface-soft: var(--brutal-surface-soft);
|
|
@@ -3622,6 +4375,57 @@
|
|
|
3622
4375
|
--usk-native-border-width: 3px;
|
|
3623
4376
|
--usk-native-field-gap: .5rem;
|
|
3624
4377
|
--usk-native-panel-padding: var(--brutal-space-5);
|
|
4378
|
+
--usk-native-control-min-block-size: 3rem;
|
|
4379
|
+
--usk-native-control-padding-block: .74rem;
|
|
4380
|
+
--usk-native-control-padding-inline: 1rem;
|
|
4381
|
+
--usk-native-subcontrol-padding-block: .58rem;
|
|
4382
|
+
--usk-native-subcontrol-padding-inline: .8rem;
|
|
4383
|
+
--usk-native-choice-size: 1.55rem;
|
|
4384
|
+
--usk-native-choice-background: var(--brutal-control-bg);
|
|
4385
|
+
--usk-native-choice-border: 2px solid var(--brutal-border);
|
|
4386
|
+
--usk-native-checkbox-radius: 0;
|
|
4387
|
+
--usk-native-radio-radius: 0;
|
|
4388
|
+
--usk-native-choice-shadow: 4px 4px 0 var(--brutal-border);
|
|
4389
|
+
--usk-native-choice-checked-background: var(--brutal-primary);
|
|
4390
|
+
--usk-native-choice-mark-color: var(--brutal-on-primary);
|
|
4391
|
+
--usk-native-select-indicator-image: linear-gradient(48deg, transparent 50%, var(--brutal-primary) 50%), linear-gradient(132deg, var(--brutal-primary) 50%, transparent 50%);
|
|
4392
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
4393
|
+
--usk-native-select-indicator-position: calc(100% - 1.24rem) 50%, calc(100% - .9rem) 50%;
|
|
4394
|
+
--usk-native-select-padding-inline-end: 2.7rem;
|
|
4395
|
+
--usk-native-range-track-size: .8rem;
|
|
4396
|
+
--usk-native-range-track-background: var(--brutal-surface-soft);
|
|
4397
|
+
--usk-native-range-track-border: 2px solid var(--brutal-border);
|
|
4398
|
+
--usk-native-range-track-radius: 0;
|
|
4399
|
+
--usk-native-range-track-shadow: 4px 4px 0 var(--brutal-border);
|
|
4400
|
+
--usk-native-range-progress-background: var(--brutal-primary);
|
|
4401
|
+
--usk-native-range-thumb-size: 1.45rem;
|
|
4402
|
+
--usk-native-range-thumb-background: var(--brutal-surface-strong);
|
|
4403
|
+
--usk-native-range-thumb-border: 2px solid var(--brutal-border);
|
|
4404
|
+
--usk-native-range-thumb-radius: 0;
|
|
4405
|
+
--usk-native-range-thumb-shadow: 4px 4px 0 var(--brutal-border);
|
|
4406
|
+
--usk-native-progress-size: .95rem;
|
|
4407
|
+
--usk-native-progress-track-background: var(--brutal-surface-soft);
|
|
4408
|
+
--usk-native-progress-track-border: 2px solid var(--brutal-border);
|
|
4409
|
+
--usk-native-progress-track-radius: 0;
|
|
4410
|
+
--usk-native-progress-track-shadow: 4px 4px 0 var(--brutal-border);
|
|
4411
|
+
--usk-native-progress-value-background: var(--brutal-primary);
|
|
4412
|
+
--usk-native-progress-value-radius: 0;
|
|
4413
|
+
--usk-native-progress-value-shadow: 4px 4px 0 var(--brutal-border);
|
|
4414
|
+
--usk-native-meter-optimum-background: var(--brutal-success);
|
|
4415
|
+
--usk-native-meter-suboptimum-background: var(--brutal-warning);
|
|
4416
|
+
--usk-native-meter-critical-background: var(--brutal-danger);
|
|
4417
|
+
--usk-native-file-button-background: var(--brutal-primary);
|
|
4418
|
+
--usk-native-file-button-border: 2px solid var(--brutal-border);
|
|
4419
|
+
--usk-native-file-button-radius: 0;
|
|
4420
|
+
--usk-native-file-button-shadow: 4px 4px 0 var(--brutal-border);
|
|
4421
|
+
--usk-native-color-swatch-border: 2px solid var(--brutal-border);
|
|
4422
|
+
--usk-native-color-swatch-radius: 0;
|
|
4423
|
+
--usk-native-indicator-opacity: .82;
|
|
4424
|
+
--usk-native-indicator-filter: none;
|
|
4425
|
+
--usk-native-scrollbar-size: 1rem;
|
|
4426
|
+
--usk-native-scrollbar-track: var(--brutal-surface-soft);
|
|
4427
|
+
--usk-native-scrollbar-thumb: var(--brutal-primary);
|
|
4428
|
+
--usk-native-scrollbar-radius: 0;
|
|
3625
4429
|
--brutal-bg: rgb(var(--brutal-bg-rgb));
|
|
3626
4430
|
--brutal-surface: rgb(var(--brutal-surface-rgb) / var(--brutal-panel-alpha));
|
|
3627
4431
|
--brutal-surface-strong: rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-strong-alpha));
|
|
@@ -3667,7 +4471,7 @@
|
|
|
3667
4471
|
}
|
|
3668
4472
|
|
|
3669
4473
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3670
|
-
[data-ui="brutalism"][data-
|
|
4474
|
+
[data-ui="brutalism"][data-mode] {
|
|
3671
4475
|
--brutal-border: color-mix(in srgb, rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha))), var(--brutal-text) var(--usk-border-text-mix));
|
|
3672
4476
|
}
|
|
3673
4477
|
}
|
|
@@ -3683,7 +4487,7 @@
|
|
|
3683
4487
|
box-sizing: border-box;
|
|
3684
4488
|
}
|
|
3685
4489
|
|
|
3686
|
-
[data-ui="brutalism"][data-
|
|
4490
|
+
[data-ui="brutalism"][data-mode] {
|
|
3687
4491
|
background: var(--brutal-theme-bg);
|
|
3688
4492
|
background-size: var(--brutal-theme-bg-size);
|
|
3689
4493
|
}
|
|
@@ -3769,7 +4573,7 @@
|
|
|
3769
4573
|
}
|
|
3770
4574
|
|
|
3771
4575
|
.brutal-kicker {
|
|
3772
|
-
color: var(--brutal-primary);
|
|
4576
|
+
color: var(--usk-primary-ink, var(--brutal-primary));
|
|
3773
4577
|
letter-spacing: .12em;
|
|
3774
4578
|
margin: 0;
|
|
3775
4579
|
font-size: .85rem;
|
|
@@ -3902,7 +4706,7 @@
|
|
|
3902
4706
|
background: var(--brutal-card-bg);
|
|
3903
4707
|
}
|
|
3904
4708
|
|
|
3905
|
-
.brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .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="brutalism"]) .ui-icon-button {
|
|
4709
|
+
.brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .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="brutalism"]) .ui-icon-button {
|
|
3906
4710
|
background: var(--brutal-control-bg);
|
|
3907
4711
|
}
|
|
3908
4712
|
|
|
@@ -4113,7 +4917,7 @@
|
|
|
4113
4917
|
}
|
|
4114
4918
|
|
|
4115
4919
|
.brutal-text-primary {
|
|
4116
|
-
color: var(--brutal-primary);
|
|
4920
|
+
color: var(--usk-primary-ink, var(--brutal-primary));
|
|
4117
4921
|
}
|
|
4118
4922
|
|
|
4119
4923
|
.brutal-text-secondary {
|
|
@@ -4121,7 +4925,7 @@
|
|
|
4121
4925
|
}
|
|
4122
4926
|
|
|
4123
4927
|
.brutal-text-accent {
|
|
4124
|
-
color: var(--brutal-accent);
|
|
4928
|
+
color: var(--usk-accent-ink, var(--brutal-accent));
|
|
4125
4929
|
}
|
|
4126
4930
|
|
|
4127
4931
|
.brutal-text-success {
|
|
@@ -4224,7 +5028,7 @@
|
|
|
4224
5028
|
}
|
|
4225
5029
|
|
|
4226
5030
|
.brutal-button.brutal-button-outline-heavy, .brutal-button-outline-heavy, :where([data-ui="brutalism"]) .ui-button.brutal-button-outline-heavy {
|
|
4227
|
-
color: var(--brutal-primary);
|
|
5031
|
+
color: var(--usk-primary-ink, var(--brutal-primary));
|
|
4228
5032
|
border-style: solid;
|
|
4229
5033
|
border-width: 2px;
|
|
4230
5034
|
border-color: var(--brutal-primary);
|
|
@@ -4265,7 +5069,6 @@
|
|
|
4265
5069
|
border-radius: var(--brutal-radius-lg);
|
|
4266
5070
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4267
5071
|
display: grid;
|
|
4268
|
-
overflow: hidden;
|
|
4269
5072
|
}
|
|
4270
5073
|
|
|
4271
5074
|
.brutal-feature-item {
|
|
@@ -4308,7 +5111,7 @@
|
|
|
4308
5111
|
}
|
|
4309
5112
|
|
|
4310
5113
|
.brutal-eyebrow {
|
|
4311
|
-
color: var(--brutal-primary);
|
|
5114
|
+
color: var(--usk-primary-ink, var(--brutal-primary));
|
|
4312
5115
|
font-family: var(--brutal-font-heading);
|
|
4313
5116
|
letter-spacing: .14em;
|
|
4314
5117
|
text-transform: uppercase;
|
|
@@ -4399,6 +5202,7 @@
|
|
|
4399
5202
|
clip-path: polygon(.52rem 0, 100% 0, 100% calc(100% - .52rem), calc(100% - .52rem) 100%, 0 100%, 0 .52rem);
|
|
4400
5203
|
justify-content: center;
|
|
4401
5204
|
justify-self: start;
|
|
5205
|
+
min-block-size: 2.75rem;
|
|
4402
5206
|
inline-size: min(100%, 14rem);
|
|
4403
5207
|
min-inline-size: 6rem;
|
|
4404
5208
|
max-inline-size: 100%;
|
|
@@ -4417,13 +5221,13 @@
|
|
|
4417
5221
|
border-radius: 0;
|
|
4418
5222
|
}
|
|
4419
5223
|
|
|
4420
|
-
[data-ui="brutalism"][data-
|
|
5224
|
+
[data-ui="brutalism"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
4421
5225
|
border: 3px solid var(--brutal-text);
|
|
4422
5226
|
box-shadow: .26rem .26rem 0 var(--brutal-text);
|
|
4423
5227
|
border-radius: 0;
|
|
4424
5228
|
}
|
|
4425
5229
|
|
|
4426
|
-
[data-ui="brutalism"][data-
|
|
5230
|
+
[data-ui="brutalism"][data-mode] :where(dialog) {
|
|
4427
5231
|
border: 3px solid var(--brutal-text);
|
|
4428
5232
|
box-shadow: .48rem .48rem 0 var(--brutal-text);
|
|
4429
5233
|
border-radius: 0;
|
|
@@ -4439,6 +5243,145 @@
|
|
|
4439
5243
|
box-shadow: .12em .12em;
|
|
4440
5244
|
}
|
|
4441
5245
|
|
|
5246
|
+
[data-ui="brutalism"][data-mode] {
|
|
5247
|
+
--usk-native-font-control: var(--brutal-font-mono);
|
|
5248
|
+
--usk-native-control-min-block-size: 2.7rem;
|
|
5249
|
+
--usk-native-control-padding-block: .5rem;
|
|
5250
|
+
--usk-native-control-padding-inline: .72rem;
|
|
5251
|
+
--usk-native-border-width: 4px;
|
|
5252
|
+
--usk-native-radius-sm: 0;
|
|
5253
|
+
--usk-native-radius: 0;
|
|
5254
|
+
--usk-native-radius-lg: 0;
|
|
5255
|
+
--usk-native-shadow: .32rem .32rem 0 var(--brutal-text);
|
|
5256
|
+
--usk-native-shadow-md: .48rem .48rem 0 var(--brutal-primary);
|
|
5257
|
+
--usk-native-focus-ring: 0 0 0 2px var(--brutal-surface-strong), 0 0 0 6px var(--brutal-warning);
|
|
5258
|
+
--usk-native-subcontrol-padding-block: .34rem;
|
|
5259
|
+
--usk-native-subcontrol-padding-inline: .52rem;
|
|
5260
|
+
--usk-native-choice-size: 1.18rem;
|
|
5261
|
+
--usk-native-choice-background: var(--brutal-surface-strong);
|
|
5262
|
+
--usk-native-choice-border: 3px solid var(--brutal-text);
|
|
5263
|
+
--usk-native-checkbox-radius: 0;
|
|
5264
|
+
--usk-native-radio-radius: 0;
|
|
5265
|
+
--usk-native-choice-shadow: .12rem .12rem 0 var(--brutal-primary);
|
|
5266
|
+
--usk-native-choice-checked-background: var(--brutal-primary);
|
|
5267
|
+
--usk-native-choice-mark-color: var(--brutal-on-primary);
|
|
5268
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 38%, var(--brutal-warning) 39% 61%, transparent 62%), linear-gradient(135deg, var(--brutal-warning) 0 50%, transparent 51%);
|
|
5269
|
+
--usk-native-select-indicator-size: .7rem .7rem, .7rem .7rem;
|
|
5270
|
+
--usk-native-select-indicator-position: calc(100% - 1.38rem) 50%, calc(100% - .92rem) 50%;
|
|
5271
|
+
--usk-native-select-padding-inline-end: 2.85rem;
|
|
5272
|
+
--usk-native-range-track-size: .92rem;
|
|
5273
|
+
--usk-native-range-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-soft) 0 1.05rem, var(--brutal-text) 1.05rem calc(1.05rem + 3px));
|
|
5274
|
+
--usk-native-range-track-border: 3px solid var(--brutal-text);
|
|
5275
|
+
--usk-native-range-track-radius: 0;
|
|
5276
|
+
--usk-native-range-track-shadow: inset 0 0 0 2px var(--brutal-surface-strong);
|
|
5277
|
+
--usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .9rem, var(--brutal-warning) .9rem 1.05rem);
|
|
5278
|
+
--usk-native-range-thumb-size: 1.24rem;
|
|
5279
|
+
--usk-native-range-thumb-background: var(--brutal-text);
|
|
5280
|
+
--usk-native-range-thumb-border: 3px solid var(--brutal-warning);
|
|
5281
|
+
--usk-native-range-thumb-radius: 0;
|
|
5282
|
+
--usk-native-range-thumb-shadow: .14rem .14rem 0 var(--brutal-primary);
|
|
5283
|
+
--usk-native-progress-size: 1.22rem;
|
|
5284
|
+
--usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-strong) 0 1rem, var(--brutal-text) 1rem calc(1rem + 3px));
|
|
5285
|
+
--usk-native-progress-track-border: 3px solid var(--brutal-text);
|
|
5286
|
+
--usk-native-progress-track-radius: 0;
|
|
5287
|
+
--usk-native-progress-track-shadow: inset 0 0 0 2px var(--brutal-surface-soft);
|
|
5288
|
+
--usk-native-progress-value-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .82rem, var(--brutal-warning) .82rem 1rem);
|
|
5289
|
+
--usk-native-progress-value-radius: 0;
|
|
5290
|
+
--usk-native-progress-value-shadow: inset -3px 0 0 var(--brutal-text);
|
|
5291
|
+
--usk-native-scrollbar-size: 1.25rem;
|
|
5292
|
+
--usk-native-scrollbar-track: repeating-linear-gradient(0deg, var(--brutal-surface-soft) 0 .7rem, var(--brutal-text) .7rem calc(.7rem + 2px));
|
|
5293
|
+
--usk-native-scrollbar-thumb: var(--brutal-primary);
|
|
5294
|
+
--usk-native-scrollbar-radius: 0;
|
|
5295
|
+
}
|
|
5296
|
+
|
|
5297
|
+
.brutal-title {
|
|
5298
|
+
letter-spacing: max(.032em, .5px);
|
|
5299
|
+
margin-block: .75rem;
|
|
5300
|
+
font-weight: 1000;
|
|
5301
|
+
}
|
|
5302
|
+
|
|
5303
|
+
.brutal-label, :where([data-ui="brutalism"]) .ui-label {
|
|
5304
|
+
font-size: .68rem;
|
|
5305
|
+
font-weight: 900;
|
|
5306
|
+
}
|
|
5307
|
+
|
|
5308
|
+
.brutal-button, :where([data-ui="brutalism"]) .ui-button {
|
|
5309
|
+
background: var(--brutal-primary);
|
|
5310
|
+
min-height: 2.7rem;
|
|
5311
|
+
box-shadow: .32rem .32rem 0 var(--brutal-text);
|
|
5312
|
+
border-radius: 0 .08rem 0 0;
|
|
5313
|
+
padding: .5rem .72rem;
|
|
5314
|
+
font-weight: 900;
|
|
5315
|
+
}
|
|
5316
|
+
|
|
5317
|
+
.brutal-input, :where([data-ui="brutalism"]) .ui-input {
|
|
5318
|
+
border-radius: 0 0 .06rem;
|
|
5319
|
+
min-height: 2.55rem;
|
|
5320
|
+
padding: .46rem .64rem;
|
|
5321
|
+
}
|
|
5322
|
+
|
|
5323
|
+
.brutal-card, :where([data-ui="brutalism"]) .ui-card {
|
|
5324
|
+
background: var(--brutal-card-bg);
|
|
5325
|
+
border: 4px solid var(--brutal-text);
|
|
5326
|
+
box-shadow: .42rem .42rem 0 var(--brutal-primary);
|
|
5327
|
+
border-radius: 0;
|
|
5328
|
+
padding: .88rem;
|
|
5329
|
+
}
|
|
5330
|
+
|
|
5331
|
+
.brutal-well {
|
|
5332
|
+
background: repeating-linear-gradient(0deg,rgb(var(--brutal-text-rgb)/.08)0 2px,transparent 2px .65rem),var(--brutal-surface-soft);
|
|
5333
|
+
border: 3px solid var(--brutal-text);
|
|
5334
|
+
box-shadow: inset .5rem 0 0 var(--brutal-warning);
|
|
5335
|
+
}
|
|
5336
|
+
|
|
5337
|
+
.brutal-badge, :where([data-ui="brutalism"]) .ui-badge {
|
|
5338
|
+
border-radius: 0;
|
|
5339
|
+
min-height: 1.55rem;
|
|
5340
|
+
padding: .15rem .42rem;
|
|
5341
|
+
}
|
|
5342
|
+
|
|
5343
|
+
.brutal-alert, :where([data-ui="brutalism"]) .ui-alert {
|
|
5344
|
+
background: var(--brutal-surface-strong);
|
|
5345
|
+
border: 4px solid var(--brutal-text);
|
|
5346
|
+
box-shadow: .28rem .28rem 0 var(--brutal-warning);
|
|
5347
|
+
border-radius: 0;
|
|
5348
|
+
}
|
|
5349
|
+
|
|
5350
|
+
.brutal-progress, :where([data-ui="brutalism"]) .ui-progress {
|
|
5351
|
+
background: repeating-linear-gradient(90deg,var(--brutal-surface-strong)0 1rem,var(--brutal-text) 1rem calc(1rem + 3px));
|
|
5352
|
+
height: 1.22rem;
|
|
5353
|
+
}
|
|
5354
|
+
|
|
5355
|
+
.brutal-table-wrap, :where([data-ui="brutalism"]) .ui-table-wrap {
|
|
5356
|
+
background: var(--brutal-surface-strong);
|
|
5357
|
+
box-shadow: .32rem .32rem 0 var(--brutal-primary);
|
|
5358
|
+
border-radius: 0;
|
|
5359
|
+
}
|
|
5360
|
+
|
|
5361
|
+
.brutal-table th, :where([data-ui="brutalism"]) .ui-table th {
|
|
5362
|
+
background: var(--brutal-text);
|
|
5363
|
+
padding: .48rem .62rem;
|
|
5364
|
+
font-weight: 950;
|
|
5365
|
+
}
|
|
5366
|
+
|
|
5367
|
+
.brutal-table td, :where([data-ui="brutalism"]) .ui-table td {
|
|
5368
|
+
padding: .46rem .6rem;
|
|
5369
|
+
}
|
|
5370
|
+
|
|
5371
|
+
.brutal-nav, .brutal-panel, .brutal-toolbar, .brutal-tooltip, [data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .brutal-card-service, .brutal-feature-strip, .brutal-callout-bar, :where([data-ui="brutalism"]) .ui-nav, :where([data-ui="brutalism"]) .ui-toolbar {
|
|
5372
|
+
border: 4px solid var(--brutal-text);
|
|
5373
|
+
box-shadow: .34rem .34rem 0 var(--brutal-primary);
|
|
5374
|
+
border-radius: 0;
|
|
5375
|
+
}
|
|
5376
|
+
|
|
5377
|
+
.brutal-nav-link, :where([data-ui="brutalism"]) .ui-nav-link {
|
|
5378
|
+
border-inline-start: 3px solid var(--brutal-text);
|
|
5379
|
+
}
|
|
5380
|
+
|
|
5381
|
+
.brutal-progress-bar, :where([data-ui="brutalism"]) .ui-progress-bar {
|
|
5382
|
+
background: repeating-linear-gradient(90deg,var(--brutal-primary)0 .82rem,var(--brutal-warning) .82rem 1rem);
|
|
5383
|
+
}
|
|
5384
|
+
|
|
4442
5385
|
@media (prefers-reduced-motion: reduce) {
|
|
4443
5386
|
[data-ui="brutalism"] *, [data-ui="brutalism"] :before, [data-ui="brutalism"] :after {
|
|
4444
5387
|
scroll-behavior: auto !important;
|
|
@@ -4483,4 +5426,59 @@
|
|
|
4483
5426
|
color: #000 !important;
|
|
4484
5427
|
}
|
|
4485
5428
|
}
|
|
5429
|
+
|
|
5430
|
+
.brutal-input[aria-invalid="true"], .brutal-textarea[aria-invalid="true"], .brutal-select[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-input[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-textarea[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-select[aria-invalid="true"] {
|
|
5431
|
+
border-color: var(--brutal-danger);
|
|
5432
|
+
box-shadow: 3px 3px 0 rgb(var(--brutal-danger-rgb)/.38);
|
|
5433
|
+
}
|
|
5434
|
+
|
|
5435
|
+
.brutal-input[readonly], .brutal-textarea[readonly], :where([data-ui="brutalism"]) .ui-input[readonly], :where([data-ui="brutalism"]) .ui-textarea[readonly] {
|
|
5436
|
+
filter: saturate(.72);
|
|
5437
|
+
opacity: .78;
|
|
5438
|
+
border-style: dashed;
|
|
5439
|
+
}
|
|
5440
|
+
|
|
5441
|
+
.brutal-button-primary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5442
|
+
background: var(--brutal-primary);
|
|
5443
|
+
color: var(--brutal-on-primary);
|
|
5444
|
+
border-color: var(--brutal-primary);
|
|
5445
|
+
}
|
|
5446
|
+
|
|
5447
|
+
.brutal-button-secondary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5448
|
+
background: var(--brutal-secondary);
|
|
5449
|
+
color: var(--brutal-on-secondary);
|
|
5450
|
+
border-color: var(--brutal-secondary);
|
|
5451
|
+
}
|
|
5452
|
+
|
|
5453
|
+
.brutal-button-danger, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5454
|
+
background: var(--brutal-danger);
|
|
5455
|
+
color: var(--brutal-on-danger);
|
|
5456
|
+
border-color: var(--brutal-danger);
|
|
5457
|
+
}
|
|
5458
|
+
|
|
5459
|
+
.brutal-button-ghost, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5460
|
+
color: var(--usk-primary-ink, var(--brutal-primary));
|
|
5461
|
+
background: none;
|
|
5462
|
+
border-color: #0000;
|
|
5463
|
+
}
|
|
5464
|
+
|
|
5465
|
+
.brutal-feature-item > .brutal-icon-medallion {
|
|
5466
|
+
font-size: 1.5rem;
|
|
5467
|
+
line-height: 1;
|
|
5468
|
+
}
|
|
5469
|
+
|
|
5470
|
+
.brutal-callout-bar > .brutal-icon-medallion {
|
|
5471
|
+
min-block-size: 4.5rem;
|
|
5472
|
+
min-inline-size: 4.5rem;
|
|
5473
|
+
font-size: 2rem;
|
|
5474
|
+
font-weight: 800;
|
|
5475
|
+
line-height: 1;
|
|
5476
|
+
}
|
|
5477
|
+
|
|
5478
|
+
[data-ui="brutalism"][data-mode] .brutal-button.brutal-button-warning, :where([data-ui="brutalism"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
5479
|
+
background: var(--brutal-warning);
|
|
5480
|
+
color: var(--brutal-on-warning);
|
|
5481
|
+
border-color: var(--brutal-warning);
|
|
5482
|
+
text-shadow: none;
|
|
5483
|
+
}
|
|
4486
5484
|
}
|