ui-style-kit-css 2.3.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +57 -2
- package/CONTRIBUTING.md +8 -1
- package/README.md +102 -44
- package/STYLE-MAP.md +14 -5
- package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
- package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/dist/assets/bauhaus-barlow.ttf +0 -0
- package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
- package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
- package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/dist/assets/bento-manrope-OFL.txt +93 -0
- package/dist/assets/bento-manrope.ttf +0 -0
- package/dist/assets/clay-grain.png +0 -0
- package/dist/assets/clay-rounded-OFL.txt +93 -0
- package/dist/assets/clay-rounded.ttf +0 -0
- package/dist/assets/neo-noir-corner-dark.png +0 -0
- package/dist/assets/neo-noir-corner-light.png +0 -0
- package/dist/assets/neo-noir-texture-dark.png +0 -0
- package/dist/assets/neo-noir-texture-light.png +0 -0
- package/dist/assets/organic-display-OFL.txt +93 -0
- package/dist/assets/organic-display.ttf +0 -0
- package/dist/assets/organic-icons-LICENSE.txt +21 -0
- package/dist/assets/organic-sans-OFL.txt +93 -0
- package/dist/assets/organic-sans.ttf +0 -0
- package/dist/ui-style-kit.css +47898 -15121
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +47771 -15122
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +47932 -15145
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +3247 -295
- package/dist/visual/bauhaus.css +2 -4692
- package/dist/visual/bento.css +2 -4708
- package/dist/visual/brutalism.css +1229 -231
- package/dist/visual/clay.css +2 -4786
- package/dist/visual/cyberpunk.css +2663 -282
- package/dist/visual/data-terminal.css +2064 -276
- package/dist/visual/editorial-luxe.css +2315 -259
- package/dist/visual/industrial-utility.css +3142 -270
- package/dist/visual/maximalist.css +2185 -454
- package/dist/visual/minimal-saas.css +1503 -398
- package/dist/visual/neo-noir.css +2 -4787
- package/dist/visual/neumorphism.css +1690 -402
- package/dist/visual/organic-modern.css +2 -4764
- package/dist/visual/paper-editorial.css +2977 -292
- package/dist/visual/retro-glass.css +2625 -299
- package/dist/visual/retrofuturism.css +1885 -397
- package/dist/visual/tactile.css +2716 -498
- package/dist/visual/technical-blueprint.css +2599 -267
- package/dist/visual/y2k.css +1906 -309
- package/docs/ART-DECO.md +80 -0
- package/docs/BAUHAUS.md +152 -0
- package/docs/BENTO.md +121 -0
- package/docs/CLAY.md +127 -0
- package/docs/COLOR-THEMES.md +63 -0
- package/docs/DEMO-SHOWCASE.md +65 -0
- package/docs/ECOSYSTEM.md +4 -4
- package/docs/EDITORIAL-LUX.md +75 -0
- package/docs/INDUSTRIAL-UTILITY.md +131 -0
- package/docs/NATIVE-ELEMENTS.md +23 -17
- package/docs/NEO-NOIR.md +94 -0
- package/docs/ORGANIC-MODERN.md +91 -0
- package/docs/PAPER-EDITORIAL.md +63 -0
- package/docs/PUBLISHING.md +31 -10
- package/docs/RELEASE-2.4.0.md +88 -0
- package/docs/RELEASE-2.4.1.md +35 -0
- package/docs/RETRO-GLASS.md +105 -0
- package/docs/STYLE-GUIDE.md +41 -26
- package/docs/TACTILE.md +38 -0
- package/docs/TECHNICAL-BLUEPRINT.md +60 -0
- package/docs/TOKENS.md +80 -3
- package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
- package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
- package/manifest.json +624 -28
- package/package.json +20 -11
- package/styles/art-deco.css +1402 -17
- package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
- package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/styles/assets/bauhaus-barlow.ttf +0 -0
- package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
- package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
- package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/styles/assets/bento-manrope-OFL.txt +93 -0
- package/styles/assets/bento-manrope.ttf +0 -0
- package/styles/assets/clay-grain.png +0 -0
- package/styles/assets/clay-rounded-OFL.txt +93 -0
- package/styles/assets/clay-rounded.ttf +0 -0
- package/styles/assets/neo-noir-corner-dark.png +0 -0
- package/styles/assets/neo-noir-corner-light.png +0 -0
- package/styles/assets/neo-noir-texture-dark.png +0 -0
- package/styles/assets/neo-noir-texture-light.png +0 -0
- package/styles/assets/organic-display-OFL.txt +93 -0
- package/styles/assets/organic-display.ttf +0 -0
- package/styles/assets/organic-icons-LICENSE.txt +21 -0
- package/styles/assets/organic-sans-OFL.txt +93 -0
- package/styles/assets/organic-sans.ttf +0 -0
- package/styles/bauhaus.css +881 -110
- package/styles/bento.css +1182 -113
- package/styles/brutalism.css +266 -15
- package/styles/clay.css +1307 -72
- package/styles/compat-layout.css +1 -2
- package/styles/components.css +107 -36
- package/styles/content-overflow.css +11 -5
- package/styles/cyberpunk.css +1856 -51
- package/styles/data-terminal.css +1122 -18
- package/styles/editorial-luxe.css +581 -17
- package/styles/industrial-utility.css +1775 -16
- package/styles/interactive-surface-bridge.css +30 -20
- package/styles/interactive-surface-theme.css +21 -11
- package/styles/maximalist.css +1215 -133
- package/styles/minimal-saas.css +465 -93
- package/styles/native-elements.css +347 -171
- package/styles/neo-noir.css +661 -19
- package/styles/neumorphism.css +1021 -149
- package/styles/organic-modern.css +693 -23
- package/styles/paper-editorial.css +1053 -17
- package/styles/retro-glass.css +639 -50
- package/styles/retrofuturism.css +948 -60
- package/styles/tactile.css +1813 -111
- package/styles/technical-blueprint.css +673 -22
- package/styles/theme-colors.css +412 -2
- package/styles/y2k.css +954 -46
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* UI Style Kit CSS v2.
|
|
2
|
+
* UI Style Kit CSS v2.4.1
|
|
3
3
|
* CSS theme and UI style preset library.
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -13,13 +13,26 @@
|
|
|
13
13
|
========================================================= */
|
|
14
14
|
|
|
15
15
|
@layer ui-style-kit.theme_colors {
|
|
16
|
+
/**
|
|
17
|
+
* Optional text inks let bright palette fills retain their color without making
|
|
18
|
+
* text on neutral surfaces unreadable. Initial values preserve preset colors and
|
|
19
|
+
* prevent an outer palette's text override from leaking into a nested UI root.
|
|
20
|
+
*/
|
|
21
|
+
:where([data-ui]) {
|
|
22
|
+
--usk-primary-ink: initial;
|
|
23
|
+
--usk-accent-ink: initial;
|
|
24
|
+
}
|
|
25
|
+
|
|
16
26
|
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
|
|
17
|
-
:where([data-ui][data-
|
|
27
|
+
:where([data-ui][data-mode="light"]) {
|
|
28
|
+
/* Keep vivid fills intact while using the darker link role for text treatments. */
|
|
29
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
30
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
18
31
|
--usk-border-text-mix: 45%;
|
|
19
32
|
--usk-border-min-alpha: 1;
|
|
20
33
|
}
|
|
21
34
|
|
|
22
|
-
:where([data-ui][data-
|
|
35
|
+
:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
|
|
23
36
|
--usk-border-text-mix: 0%;
|
|
24
37
|
--usk-border-min-alpha: 0;
|
|
25
38
|
}
|
|
@@ -1584,6 +1597,403 @@
|
|
|
1584
1597
|
--usk-danger-text-rgb: 0 0 0;
|
|
1585
1598
|
--usk-focus-rgb: 255 255 255;
|
|
1586
1599
|
}
|
|
1600
|
+
|
|
1601
|
+
/** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
|
|
1602
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
|
|
1603
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
1604
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
1605
|
+
--usk-bg-rgb: 255 251 232;
|
|
1606
|
+
--usk-surface-rgb: 255 255 255;
|
|
1607
|
+
--usk-surface-strong-rgb: 255 254 245;
|
|
1608
|
+
--usk-surface-soft-rgb: 247 237 187;
|
|
1609
|
+
--usk-text-rgb: 33 29 12;
|
|
1610
|
+
--usk-text-muted-rgb: 100 91 55;
|
|
1611
|
+
--usk-border-rgb: 217 199 111;
|
|
1612
|
+
--usk-primary-rgb: 255 204 0;
|
|
1613
|
+
--usk-primary-hover-rgb: 222 175 0;
|
|
1614
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1615
|
+
--usk-secondary-rgb: 37 50 78;
|
|
1616
|
+
--usk-secondary-hover-rgb: 25 37 61;
|
|
1617
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1618
|
+
--usk-accent-rgb: 255 228 92;
|
|
1619
|
+
--usk-success-rgb: 34 122 75;
|
|
1620
|
+
--usk-warning-rgb: 144 92 0;
|
|
1621
|
+
--usk-danger-rgb: 177 54 54;
|
|
1622
|
+
--usk-link-rgb: 112 79 0;
|
|
1623
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1624
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1625
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1626
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1627
|
+
--usk-focus-rgb: 255 204 0;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
|
|
1631
|
+
--usk-bg-rgb: 18 15 3;
|
|
1632
|
+
--usk-surface-rgb: 32 27 7;
|
|
1633
|
+
--usk-surface-strong-rgb: 48 40 10;
|
|
1634
|
+
--usk-surface-soft-rgb: 25 21 5;
|
|
1635
|
+
--usk-text-rgb: 255 249 222;
|
|
1636
|
+
--usk-text-muted-rgb: 207 195 145;
|
|
1637
|
+
--usk-border-rgb: 104 88 31;
|
|
1638
|
+
--usk-primary-rgb: 255 216 59;
|
|
1639
|
+
--usk-primary-hover-rgb: 255 234 130;
|
|
1640
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1641
|
+
--usk-secondary-rgb: 142 198 255;
|
|
1642
|
+
--usk-secondary-hover-rgb: 182 220 255;
|
|
1643
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1644
|
+
--usk-accent-rgb: 255 232 102;
|
|
1645
|
+
--usk-success-rgb: 103 217 151;
|
|
1646
|
+
--usk-warning-rgb: 255 194 62;
|
|
1647
|
+
--usk-danger-rgb: 255 119 119;
|
|
1648
|
+
--usk-link-rgb: 255 232 102;
|
|
1649
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1650
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1651
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1652
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1653
|
+
--usk-focus-rgb: 255 232 102;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
|
|
1657
|
+
--usk-bg-rgb: 0 0 0;
|
|
1658
|
+
--usk-surface-rgb: 13 11 0;
|
|
1659
|
+
--usk-surface-strong-rgb: 26 22 0;
|
|
1660
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1661
|
+
--usk-text-rgb: 255 255 255;
|
|
1662
|
+
--usk-text-muted-rgb: 255 250 222;
|
|
1663
|
+
--usk-border-rgb: 255 255 255;
|
|
1664
|
+
--usk-primary-rgb: 255 214 0;
|
|
1665
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1666
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1667
|
+
--usk-secondary-rgb: 0 217 255;
|
|
1668
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1669
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1670
|
+
--usk-accent-rgb: 255 234 0;
|
|
1671
|
+
--usk-success-rgb: 0 255 144;
|
|
1672
|
+
--usk-warning-rgb: 255 191 0;
|
|
1673
|
+
--usk-danger-rgb: 255 77 77;
|
|
1674
|
+
--usk-link-rgb: 255 234 0;
|
|
1675
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1676
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1677
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1678
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1679
|
+
--usk-focus-rgb: 255 255 255;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
/** Botanical Green pairs leaf-green actions with restrained berry support. */
|
|
1683
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
|
|
1684
|
+
--usk-bg-rgb: 239 249 242;
|
|
1685
|
+
--usk-surface-rgb: 255 255 255;
|
|
1686
|
+
--usk-surface-strong-rgb: 248 253 249;
|
|
1687
|
+
--usk-surface-soft-rgb: 214 237 220;
|
|
1688
|
+
--usk-text-rgb: 14 38 23;
|
|
1689
|
+
--usk-text-muted-rgb: 75 98 81;
|
|
1690
|
+
--usk-border-rgb: 176 207 185;
|
|
1691
|
+
--usk-primary-rgb: 13 126 66;
|
|
1692
|
+
--usk-primary-hover-rgb: 8 97 50;
|
|
1693
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1694
|
+
--usk-secondary-rgb: 121 48 88;
|
|
1695
|
+
--usk-secondary-hover-rgb: 91 35 65;
|
|
1696
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1697
|
+
--usk-accent-rgb: 64 201 117;
|
|
1698
|
+
--usk-success-rgb: 24 116 65;
|
|
1699
|
+
--usk-warning-rgb: 150 96 0;
|
|
1700
|
+
--usk-danger-rgb: 178 60 70;
|
|
1701
|
+
--usk-link-rgb: 8 97 50;
|
|
1702
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1703
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1704
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1705
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1706
|
+
--usk-focus-rgb: 64 201 117;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
|
|
1710
|
+
--usk-bg-rgb: 4 17 9;
|
|
1711
|
+
--usk-surface-rgb: 10 32 18;
|
|
1712
|
+
--usk-surface-strong-rgb: 17 48 28;
|
|
1713
|
+
--usk-surface-soft-rgb: 7 24 14;
|
|
1714
|
+
--usk-text-rgb: 235 252 241;
|
|
1715
|
+
--usk-text-muted-rgb: 173 205 182;
|
|
1716
|
+
--usk-border-rgb: 49 91 63;
|
|
1717
|
+
--usk-primary-rgb: 82 222 139;
|
|
1718
|
+
--usk-primary-hover-rgb: 128 240 169;
|
|
1719
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1720
|
+
--usk-secondary-rgb: 238 148 199;
|
|
1721
|
+
--usk-secondary-hover-rgb: 255 187 222;
|
|
1722
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1723
|
+
--usk-accent-rgb: 107 240 164;
|
|
1724
|
+
--usk-success-rgb: 100 218 149;
|
|
1725
|
+
--usk-warning-rgb: 255 205 91;
|
|
1726
|
+
--usk-danger-rgb: 255 126 137;
|
|
1727
|
+
--usk-link-rgb: 128 240 169;
|
|
1728
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1729
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1730
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1731
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1732
|
+
--usk-focus-rgb: 107 240 164;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
|
|
1736
|
+
--usk-bg-rgb: 0 0 0;
|
|
1737
|
+
--usk-surface-rgb: 0 14 5;
|
|
1738
|
+
--usk-surface-strong-rgb: 0 29 11;
|
|
1739
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1740
|
+
--usk-text-rgb: 255 255 255;
|
|
1741
|
+
--usk-text-muted-rgb: 238 255 244;
|
|
1742
|
+
--usk-border-rgb: 255 255 255;
|
|
1743
|
+
--usk-primary-rgb: 0 255 112;
|
|
1744
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1745
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1746
|
+
--usk-secondary-rgb: 255 92 178;
|
|
1747
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1748
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1749
|
+
--usk-accent-rgb: 103 255 166;
|
|
1750
|
+
--usk-success-rgb: 0 255 117;
|
|
1751
|
+
--usk-warning-rgb: 255 212 0;
|
|
1752
|
+
--usk-danger-rgb: 255 77 91;
|
|
1753
|
+
--usk-link-rgb: 103 255 166;
|
|
1754
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1755
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1756
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1757
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1758
|
+
--usk-focus-rgb: 255 255 255;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
|
|
1762
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
|
|
1763
|
+
--usk-bg-rgb: 240 244 255;
|
|
1764
|
+
--usk-surface-rgb: 255 255 255;
|
|
1765
|
+
--usk-surface-strong-rgb: 248 250 255;
|
|
1766
|
+
--usk-surface-soft-rgb: 220 229 250;
|
|
1767
|
+
--usk-text-rgb: 14 27 57;
|
|
1768
|
+
--usk-text-muted-rgb: 73 89 123;
|
|
1769
|
+
--usk-border-rgb: 177 195 232;
|
|
1770
|
+
--usk-primary-rgb: 0 82 204;
|
|
1771
|
+
--usk-primary-hover-rgb: 0 61 158;
|
|
1772
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1773
|
+
--usk-secondary-rgb: 181 57 72;
|
|
1774
|
+
--usk-secondary-hover-rgb: 143 41 54;
|
|
1775
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1776
|
+
--usk-accent-rgb: 82 121 255;
|
|
1777
|
+
--usk-success-rgb: 35 121 78;
|
|
1778
|
+
--usk-warning-rgb: 151 96 0;
|
|
1779
|
+
--usk-danger-rgb: 180 55 74;
|
|
1780
|
+
--usk-link-rgb: 0 64 163;
|
|
1781
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1782
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1783
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1784
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1785
|
+
--usk-focus-rgb: 82 121 255;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
|
|
1789
|
+
--usk-bg-rgb: 4 9 25;
|
|
1790
|
+
--usk-surface-rgb: 10 20 48;
|
|
1791
|
+
--usk-surface-strong-rgb: 16 32 72;
|
|
1792
|
+
--usk-surface-soft-rgb: 7 14 36;
|
|
1793
|
+
--usk-text-rgb: 239 244 255;
|
|
1794
|
+
--usk-text-muted-rgb: 174 188 218;
|
|
1795
|
+
--usk-border-rgb: 49 70 122;
|
|
1796
|
+
--usk-primary-rgb: 111 149 255;
|
|
1797
|
+
--usk-primary-hover-rgb: 164 188 255;
|
|
1798
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1799
|
+
--usk-secondary-rgb: 255 133 147;
|
|
1800
|
+
--usk-secondary-hover-rgb: 255 173 183;
|
|
1801
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1802
|
+
--usk-accent-rgb: 143 170 255;
|
|
1803
|
+
--usk-success-rgb: 105 219 159;
|
|
1804
|
+
--usk-warning-rgb: 255 205 91;
|
|
1805
|
+
--usk-danger-rgb: 255 121 139;
|
|
1806
|
+
--usk-link-rgb: 164 188 255;
|
|
1807
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1808
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1809
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1810
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1811
|
+
--usk-focus-rgb: 143 170 255;
|
|
1812
|
+
}
|
|
1813
|
+
|
|
1814
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
|
|
1815
|
+
--usk-bg-rgb: 0 0 0;
|
|
1816
|
+
--usk-surface-rgb: 0 7 22;
|
|
1817
|
+
--usk-surface-strong-rgb: 0 15 44;
|
|
1818
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1819
|
+
--usk-text-rgb: 255 255 255;
|
|
1820
|
+
--usk-text-muted-rgb: 239 245 255;
|
|
1821
|
+
--usk-border-rgb: 255 255 255;
|
|
1822
|
+
--usk-primary-rgb: 76 133 255;
|
|
1823
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1824
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1825
|
+
--usk-secondary-rgb: 255 105 125;
|
|
1826
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1827
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1828
|
+
--usk-accent-rgb: 132 168 255;
|
|
1829
|
+
--usk-success-rgb: 0 255 144;
|
|
1830
|
+
--usk-warning-rgb: 255 212 0;
|
|
1831
|
+
--usk-danger-rgb: 255 92 112;
|
|
1832
|
+
--usk-link-rgb: 132 168 255;
|
|
1833
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1834
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1835
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1836
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1837
|
+
--usk-focus-rgb: 255 255 255;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
|
|
1841
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
|
|
1842
|
+
--usk-bg-rgb: 244 244 242;
|
|
1843
|
+
--usk-surface-rgb: 255 255 255;
|
|
1844
|
+
--usk-surface-strong-rgb: 250 250 248;
|
|
1845
|
+
--usk-surface-soft-rgb: 227 229 225;
|
|
1846
|
+
--usk-text-rgb: 27 29 28;
|
|
1847
|
+
--usk-text-muted-rgb: 86 91 88;
|
|
1848
|
+
--usk-border-rgb: 184 189 185;
|
|
1849
|
+
--usk-primary-rgb: 56 60 58;
|
|
1850
|
+
--usk-primary-hover-rgb: 37 40 38;
|
|
1851
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1852
|
+
--usk-secondary-rgb: 91 97 93;
|
|
1853
|
+
--usk-secondary-hover-rgb: 69 74 71;
|
|
1854
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1855
|
+
--usk-accent-rgb: 184 190 186;
|
|
1856
|
+
--usk-success-rgb: 48 115 79;
|
|
1857
|
+
--usk-warning-rgb: 145 94 0;
|
|
1858
|
+
--usk-danger-rgb: 168 60 60;
|
|
1859
|
+
--usk-link-rgb: 52 60 56;
|
|
1860
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1861
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1862
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1863
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1864
|
+
--usk-focus-rgb: 112 121 116;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
|
|
1868
|
+
--usk-bg-rgb: 12 13 13;
|
|
1869
|
+
--usk-surface-rgb: 25 27 26;
|
|
1870
|
+
--usk-surface-strong-rgb: 40 43 41;
|
|
1871
|
+
--usk-surface-soft-rgb: 18 20 19;
|
|
1872
|
+
--usk-text-rgb: 245 246 245;
|
|
1873
|
+
--usk-text-muted-rgb: 189 193 190;
|
|
1874
|
+
--usk-border-rgb: 78 84 80;
|
|
1875
|
+
--usk-primary-rgb: 208 212 209;
|
|
1876
|
+
--usk-primary-hover-rgb: 235 237 235;
|
|
1877
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1878
|
+
--usk-secondary-rgb: 164 170 166;
|
|
1879
|
+
--usk-secondary-hover-rgb: 194 199 196;
|
|
1880
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1881
|
+
--usk-accent-rgb: 230 232 231;
|
|
1882
|
+
--usk-success-rgb: 130 210 165;
|
|
1883
|
+
--usk-warning-rgb: 242 197 112;
|
|
1884
|
+
--usk-danger-rgb: 240 137 137;
|
|
1885
|
+
--usk-link-rgb: 220 224 221;
|
|
1886
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1887
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1888
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1889
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1890
|
+
--usk-focus-rgb: 255 255 255;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
|
|
1894
|
+
--usk-bg-rgb: 0 0 0;
|
|
1895
|
+
--usk-surface-rgb: 8 8 8;
|
|
1896
|
+
--usk-surface-strong-rgb: 20 20 20;
|
|
1897
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1898
|
+
--usk-text-rgb: 255 255 255;
|
|
1899
|
+
--usk-text-muted-rgb: 245 245 245;
|
|
1900
|
+
--usk-border-rgb: 255 255 255;
|
|
1901
|
+
--usk-primary-rgb: 255 255 255;
|
|
1902
|
+
--usk-primary-hover-rgb: 221 221 221;
|
|
1903
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1904
|
+
--usk-secondary-rgb: 205 205 205;
|
|
1905
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1906
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1907
|
+
--usk-accent-rgb: 245 245 245;
|
|
1908
|
+
--usk-success-rgb: 0 255 144;
|
|
1909
|
+
--usk-warning-rgb: 255 212 0;
|
|
1910
|
+
--usk-danger-rgb: 255 92 92;
|
|
1911
|
+
--usk-link-rgb: 255 255 255;
|
|
1912
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1913
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1914
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1915
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1916
|
+
--usk-focus-rgb: 255 255 255;
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
/** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
|
|
1920
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
|
|
1921
|
+
--usk-bg-rgb: 248 241 233;
|
|
1922
|
+
--usk-surface-rgb: 255 255 255;
|
|
1923
|
+
--usk-surface-strong-rgb: 253 249 245;
|
|
1924
|
+
--usk-surface-soft-rgb: 232 216 202;
|
|
1925
|
+
--usk-text-rgb: 49 36 29;
|
|
1926
|
+
--usk-text-muted-rgb: 102 84 74;
|
|
1927
|
+
--usk-border-rgb: 199 172 154;
|
|
1928
|
+
--usk-primary-rgb: 112 67 48;
|
|
1929
|
+
--usk-primary-hover-rgb: 83 47 34;
|
|
1930
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1931
|
+
--usk-secondary-rgb: 88 98 78;
|
|
1932
|
+
--usk-secondary-hover-rgb: 66 75 57;
|
|
1933
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1934
|
+
--usk-accent-rgb: 190 111 82;
|
|
1935
|
+
--usk-success-rgb: 53 117 76;
|
|
1936
|
+
--usk-warning-rgb: 147 91 0;
|
|
1937
|
+
--usk-danger-rgb: 173 61 55;
|
|
1938
|
+
--usk-link-rgb: 105 60 43;
|
|
1939
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1940
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1941
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1942
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1943
|
+
--usk-focus-rgb: 190 111 82;
|
|
1944
|
+
}
|
|
1945
|
+
|
|
1946
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
|
|
1947
|
+
--usk-bg-rgb: 18 12 9;
|
|
1948
|
+
--usk-surface-rgb: 35 24 19;
|
|
1949
|
+
--usk-surface-strong-rgb: 51 34 26;
|
|
1950
|
+
--usk-surface-soft-rgb: 27 18 14;
|
|
1951
|
+
--usk-text-rgb: 250 241 233;
|
|
1952
|
+
--usk-text-muted-rgb: 205 184 169;
|
|
1953
|
+
--usk-border-rgb: 107 78 61;
|
|
1954
|
+
--usk-primary-rgb: 218 158 124;
|
|
1955
|
+
--usk-primary-hover-rgb: 240 188 156;
|
|
1956
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1957
|
+
--usk-secondary-rgb: 178 192 157;
|
|
1958
|
+
--usk-secondary-hover-rgb: 207 217 190;
|
|
1959
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1960
|
+
--usk-accent-rgb: 235 169 136;
|
|
1961
|
+
--usk-success-rgb: 133 214 164;
|
|
1962
|
+
--usk-warning-rgb: 255 203 100;
|
|
1963
|
+
--usk-danger-rgb: 255 135 128;
|
|
1964
|
+
--usk-link-rgb: 240 188 156;
|
|
1965
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1966
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1967
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1968
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1969
|
+
--usk-focus-rgb: 235 169 136;
|
|
1970
|
+
}
|
|
1971
|
+
|
|
1972
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
|
|
1973
|
+
--usk-bg-rgb: 0 0 0;
|
|
1974
|
+
--usk-surface-rgb: 15 7 3;
|
|
1975
|
+
--usk-surface-strong-rgb: 31 15 7;
|
|
1976
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1977
|
+
--usk-text-rgb: 255 255 255;
|
|
1978
|
+
--usk-text-muted-rgb: 255 244 237;
|
|
1979
|
+
--usk-border-rgb: 255 255 255;
|
|
1980
|
+
--usk-primary-rgb: 255 174 128;
|
|
1981
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1982
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1983
|
+
--usk-secondary-rgb: 208 234 166;
|
|
1984
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1985
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1986
|
+
--usk-accent-rgb: 255 194 160;
|
|
1987
|
+
--usk-success-rgb: 0 255 144;
|
|
1988
|
+
--usk-warning-rgb: 255 212 0;
|
|
1989
|
+
--usk-danger-rgb: 255 102 96;
|
|
1990
|
+
--usk-link-rgb: 255 194 160;
|
|
1991
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1992
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1993
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1994
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1995
|
+
--usk-focus-rgb: 255 255 255;
|
|
1996
|
+
}
|
|
1587
1997
|
}
|
|
1588
1998
|
|
|
1589
1999
|
|
|
@@ -1597,7 +2007,8 @@
|
|
|
1597
2007
|
========================================================= */
|
|
1598
2008
|
|
|
1599
2009
|
@layer ui-style-kit.native_elements {
|
|
1600
|
-
[data-ui][data-
|
|
2010
|
+
[data-ui][data-mode] {
|
|
2011
|
+
--usk-native-bg: rgb(var(--usk-bg-rgb));
|
|
1601
2012
|
--usk-native-surface: rgb(var(--usk-surface-rgb));
|
|
1602
2013
|
--usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
|
|
1603
2014
|
--usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
|
|
@@ -1634,6 +2045,52 @@
|
|
|
1634
2045
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
1635
2046
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
1636
2047
|
--usk-native-indicator: var(--usk-native-primary);
|
|
2048
|
+
--usk-native-choice-size: 1.5rem;
|
|
2049
|
+
--usk-native-choice-background: var(--usk-native-control-bg);
|
|
2050
|
+
--usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2051
|
+
--usk-native-checkbox-radius: .3rem;
|
|
2052
|
+
--usk-native-radio-radius: 50%;
|
|
2053
|
+
--usk-native-choice-shadow: none;
|
|
2054
|
+
--usk-native-choice-checked-background: var(--usk-native-primary);
|
|
2055
|
+
--usk-native-choice-mark-color: var(--usk-native-on-primary);
|
|
2056
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
|
|
2057
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
2058
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
|
|
2059
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
2060
|
+
--usk-native-range-track-size: .45rem;
|
|
2061
|
+
--usk-native-range-track-background: var(--usk-native-track);
|
|
2062
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
2063
|
+
--usk-native-range-track-radius: 999px;
|
|
2064
|
+
--usk-native-range-track-shadow: none;
|
|
2065
|
+
--usk-native-range-progress-background: var(--usk-native-track-fill);
|
|
2066
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
2067
|
+
--usk-native-range-thumb-background: var(--usk-native-thumb);
|
|
2068
|
+
--usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
|
|
2069
|
+
--usk-native-range-thumb-radius: 50%;
|
|
2070
|
+
--usk-native-range-thumb-shadow: var(--usk-native-shadow);
|
|
2071
|
+
--usk-native-progress-size: .9rem;
|
|
2072
|
+
--usk-native-progress-track-background: var(--usk-native-track);
|
|
2073
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
2074
|
+
--usk-native-progress-track-radius: 999px;
|
|
2075
|
+
--usk-native-progress-track-shadow: none;
|
|
2076
|
+
--usk-native-progress-value-background: var(--usk-native-track-fill);
|
|
2077
|
+
--usk-native-progress-value-radius: inherit;
|
|
2078
|
+
--usk-native-progress-value-shadow: none;
|
|
2079
|
+
--usk-native-meter-optimum-background: var(--usk-native-success);
|
|
2080
|
+
--usk-native-meter-suboptimum-background: var(--usk-native-warning);
|
|
2081
|
+
--usk-native-meter-critical-background: var(--usk-native-danger);
|
|
2082
|
+
--usk-native-file-button-background: var(--usk-native-primary);
|
|
2083
|
+
--usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
2084
|
+
--usk-native-file-button-radius: var(--usk-native-radius-sm);
|
|
2085
|
+
--usk-native-file-button-shadow: var(--usk-native-shadow);
|
|
2086
|
+
--usk-native-color-swatch-border: 0 solid transparent;
|
|
2087
|
+
--usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
|
|
2088
|
+
--usk-native-indicator-opacity: .78;
|
|
2089
|
+
--usk-native-indicator-filter: none;
|
|
2090
|
+
--usk-native-scrollbar-size: .75rem;
|
|
2091
|
+
--usk-native-scrollbar-track: var(--usk-native-track);
|
|
2092
|
+
--usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
|
|
2093
|
+
--usk-native-scrollbar-radius: 999px;
|
|
1637
2094
|
--usk-native-shadow: none;
|
|
1638
2095
|
--usk-native-shadow-md: var(--usk-native-shadow);
|
|
1639
2096
|
--usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
|
|
@@ -1641,7 +2098,7 @@
|
|
|
1641
2098
|
--usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
|
|
1642
2099
|
|
|
1643
2100
|
/* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
|
|
1644
|
-
--ui-color-bg:
|
|
2101
|
+
--ui-color-bg: var(--usk-native-bg);
|
|
1645
2102
|
--ui-color-surface: var(--usk-native-surface-strong);
|
|
1646
2103
|
--ui-color-text: var(--usk-native-text);
|
|
1647
2104
|
--ui-color-muted: var(--usk-native-text-muted);
|
|
@@ -1655,7 +2112,7 @@
|
|
|
1655
2112
|
--ui-motion-easing: var(--usk-motion-easing);
|
|
1656
2113
|
}
|
|
1657
2114
|
|
|
1658
|
-
[data-ui][data-
|
|
2115
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
|
|
1659
2116
|
color: var(--usk-native-text);
|
|
1660
2117
|
font-family: var(--usk-native-font-heading);
|
|
1661
2118
|
line-height: 1.15;
|
|
@@ -1663,42 +2120,42 @@
|
|
|
1663
2120
|
}
|
|
1664
2121
|
|
|
1665
2122
|
@supports (text-wrap: balance) {
|
|
1666
|
-
[data-ui][data-
|
|
2123
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
1667
2124
|
}
|
|
1668
2125
|
|
|
1669
|
-
[data-ui][data-
|
|
2126
|
+
[data-ui][data-mode] :where(hgroup) {
|
|
1670
2127
|
display: grid;
|
|
1671
2128
|
gap: .35rem;
|
|
1672
2129
|
margin-block: 0 1rem;
|
|
1673
2130
|
}
|
|
1674
2131
|
|
|
1675
|
-
[data-ui][data-
|
|
1676
|
-
[data-ui][data-
|
|
1677
|
-
[data-ui][data-
|
|
2132
|
+
[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
2133
|
+
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
2134
|
+
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
1678
2135
|
|
|
1679
|
-
[data-ui][data-
|
|
2136
|
+
[data-ui][data-mode] :where(p) {
|
|
1680
2137
|
margin: 0 0 1rem;
|
|
1681
2138
|
color: var(--usk-native-text-muted);
|
|
1682
2139
|
line-height: 1.7;
|
|
1683
2140
|
}
|
|
1684
2141
|
|
|
1685
|
-
[data-ui][data-
|
|
2142
|
+
[data-ui][data-mode] :where(a) {
|
|
1686
2143
|
color: var(--usk-native-link);
|
|
1687
2144
|
text-decoration-thickness: .08em;
|
|
1688
2145
|
text-underline-offset: .18em;
|
|
1689
2146
|
}
|
|
1690
2147
|
|
|
1691
|
-
[data-ui][data-
|
|
2148
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
|
|
1692
2149
|
|
|
1693
|
-
[data-ui][data-
|
|
2150
|
+
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
1694
2151
|
margin: 0 0 1rem;
|
|
1695
2152
|
padding-left: 1.35rem;
|
|
1696
2153
|
color: var(--usk-native-text-muted);
|
|
1697
2154
|
}
|
|
1698
2155
|
|
|
1699
|
-
[data-ui][data-
|
|
2156
|
+
[data-ui][data-mode] :where(li) { margin-block: .25rem; }
|
|
1700
2157
|
|
|
1701
|
-
[data-ui][data-
|
|
2158
|
+
[data-ui][data-mode] :where(blockquote) {
|
|
1702
2159
|
margin: 1.25rem 0;
|
|
1703
2160
|
padding: 1rem 1.25rem;
|
|
1704
2161
|
color: var(--usk-native-text);
|
|
@@ -1707,7 +2164,7 @@
|
|
|
1707
2164
|
border-radius: var(--usk-native-radius);
|
|
1708
2165
|
}
|
|
1709
2166
|
|
|
1710
|
-
[data-ui][data-
|
|
2167
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
1711
2168
|
padding: .15em .35em;
|
|
1712
2169
|
color: var(--usk-native-text);
|
|
1713
2170
|
background: var(--usk-native-surface-soft);
|
|
@@ -1717,7 +2174,7 @@
|
|
|
1717
2174
|
font-size: .92em;
|
|
1718
2175
|
}
|
|
1719
2176
|
|
|
1720
|
-
[data-ui][data-
|
|
2177
|
+
[data-ui][data-mode] :where(pre) {
|
|
1721
2178
|
overflow: auto;
|
|
1722
2179
|
margin: 1rem 0;
|
|
1723
2180
|
padding: 1rem;
|
|
@@ -1727,57 +2184,88 @@
|
|
|
1727
2184
|
border-radius: var(--usk-native-radius);
|
|
1728
2185
|
}
|
|
1729
2186
|
|
|
1730
|
-
[data-ui][data-
|
|
2187
|
+
[data-ui][data-mode] :where(pre code) {
|
|
1731
2188
|
display: block;
|
|
1732
2189
|
padding: 0;
|
|
1733
2190
|
background: transparent;
|
|
1734
2191
|
border: 0;
|
|
1735
2192
|
}
|
|
1736
2193
|
|
|
1737
|
-
[data-ui][data-
|
|
2194
|
+
[data-ui][data-mode] :where(hr) {
|
|
1738
2195
|
height: 1px;
|
|
1739
2196
|
margin: 2rem 0;
|
|
1740
2197
|
background: var(--usk-native-border);
|
|
1741
2198
|
border: 0;
|
|
1742
2199
|
}
|
|
1743
2200
|
|
|
1744
|
-
[data-ui][data-
|
|
2201
|
+
[data-ui][data-mode] :where(mark) {
|
|
1745
2202
|
padding-inline: .15em;
|
|
1746
2203
|
color: var(--usk-native-text);
|
|
1747
2204
|
background: rgb(var(--usk-warning-rgb) / .32);
|
|
1748
2205
|
border-radius: .2em;
|
|
1749
2206
|
}
|
|
1750
2207
|
|
|
1751
|
-
[data-ui][data-
|
|
1752
|
-
[data-ui][data-
|
|
2208
|
+
[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
|
|
2209
|
+
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
|
|
1753
2210
|
|
|
1754
|
-
[data-ui][data-
|
|
2211
|
+
[data-ui][data-mode] :where(abbr[title]) {
|
|
1755
2212
|
text-decoration: underline dotted var(--usk-native-primary);
|
|
1756
2213
|
text-underline-offset: .18em;
|
|
1757
2214
|
cursor: help;
|
|
1758
2215
|
}
|
|
1759
2216
|
|
|
1760
|
-
[data-ui][data-
|
|
2217
|
+
[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
|
|
1761
2218
|
max-width: 100%;
|
|
1762
2219
|
}
|
|
1763
2220
|
|
|
1764
|
-
[data-ui][data-
|
|
2221
|
+
[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
|
|
2222
|
+
|
|
2223
|
+
/** Native playback retains browser accessibility while inheriting preset material and geometry. */
|
|
2224
|
+
[data-ui][data-mode] audio[controls] {
|
|
2225
|
+
display: block;
|
|
2226
|
+
box-sizing: border-box;
|
|
2227
|
+
inline-size: 100%;
|
|
2228
|
+
min-inline-size: 0;
|
|
2229
|
+
block-size: 60px;
|
|
2230
|
+
padding: 3px;
|
|
2231
|
+
background: var(--usk-native-control-bg);
|
|
2232
|
+
color: var(--usk-native-text);
|
|
2233
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2234
|
+
border-radius: var(--usk-native-radius);
|
|
2235
|
+
box-shadow: var(--usk-native-shadow);
|
|
2236
|
+
accent-color: var(--usk-native-primary);
|
|
2237
|
+
color-scheme: light;
|
|
2238
|
+
}
|
|
2239
|
+
[data-ui][data-mode="dark"] audio[controls],
|
|
2240
|
+
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
|
|
2241
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
|
|
2242
|
+
border-radius: var(--usk-native-radius);
|
|
2243
|
+
background: transparent;
|
|
2244
|
+
}
|
|
2245
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
|
|
2246
|
+
background: var(--usk-native-control-bg);
|
|
2247
|
+
color: var(--usk-native-text);
|
|
2248
|
+
}
|
|
2249
|
+
[data-ui][data-mode] audio[controls]:focus-visible {
|
|
2250
|
+
outline: 2px solid var(--usk-native-focus);
|
|
2251
|
+
outline-offset: 2px;
|
|
2252
|
+
}
|
|
1765
2253
|
|
|
1766
|
-
[data-ui][data-
|
|
2254
|
+
[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
|
|
1767
2255
|
|
|
1768
|
-
[data-ui][data-
|
|
2256
|
+
[data-ui][data-mode] :where(figcaption) {
|
|
1769
2257
|
margin-top: .5rem;
|
|
1770
2258
|
color: var(--usk-native-text-muted);
|
|
1771
2259
|
font-size: .9rem;
|
|
1772
2260
|
}
|
|
1773
2261
|
|
|
1774
|
-
[data-ui][data-
|
|
2262
|
+
[data-ui][data-mode] :where(form) {
|
|
1775
2263
|
display: grid;
|
|
1776
2264
|
gap: var(--usk-native-field-gap);
|
|
1777
2265
|
min-inline-size: 0;
|
|
1778
2266
|
}
|
|
1779
2267
|
|
|
1780
|
-
[data-ui][data-
|
|
2268
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
1781
2269
|
display: grid;
|
|
1782
2270
|
gap: .9rem;
|
|
1783
2271
|
min-inline-size: 0;
|
|
@@ -1788,30 +2276,30 @@
|
|
|
1788
2276
|
border-radius: var(--usk-native-radius);
|
|
1789
2277
|
}
|
|
1790
2278
|
|
|
1791
|
-
[data-ui][data-
|
|
2279
|
+
[data-ui][data-mode] :where(legend) {
|
|
1792
2280
|
padding-inline: .35rem;
|
|
1793
2281
|
color: var(--usk-native-text);
|
|
1794
2282
|
font-weight: 900;
|
|
1795
2283
|
}
|
|
1796
2284
|
|
|
1797
|
-
[data-ui][data-
|
|
2285
|
+
[data-ui][data-mode] :where(label) {
|
|
1798
2286
|
color: var(--usk-native-text);
|
|
1799
2287
|
font-weight: 750;
|
|
1800
2288
|
}
|
|
1801
2289
|
|
|
1802
|
-
[data-ui][data-
|
|
2290
|
+
[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
|
|
1803
2291
|
display: grid;
|
|
1804
2292
|
gap: var(--usk-native-field-gap);
|
|
1805
2293
|
align-content: start;
|
|
1806
2294
|
}
|
|
1807
2295
|
|
|
1808
|
-
[data-ui][data-
|
|
2296
|
+
[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
|
|
1809
2297
|
display: inline-flex;
|
|
1810
2298
|
gap: var(--usk-native-field-gap);
|
|
1811
2299
|
align-items: center;
|
|
1812
2300
|
}
|
|
1813
2301
|
|
|
1814
|
-
[data-ui][data-
|
|
2302
|
+
[data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
1815
2303
|
width: 100%;
|
|
1816
2304
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
1817
2305
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -1822,24 +2310,44 @@
|
|
|
1822
2310
|
font: inherit;
|
|
1823
2311
|
}
|
|
1824
2312
|
|
|
1825
|
-
[data-ui][data-
|
|
2313
|
+
[data-ui][data-mode] :where(input, textarea, select, button) {
|
|
1826
2314
|
color-scheme: inherit;
|
|
1827
2315
|
accent-color: var(--usk-native-primary);
|
|
1828
2316
|
}
|
|
1829
2317
|
|
|
1830
|
-
[data-ui][data-
|
|
2318
|
+
[data-ui][data-mode] :where(input, textarea)::placeholder {
|
|
1831
2319
|
color: var(--usk-native-text-muted);
|
|
1832
2320
|
opacity: .78;
|
|
1833
2321
|
}
|
|
1834
2322
|
|
|
1835
|
-
[data-ui][data-
|
|
2323
|
+
[data-ui][data-mode] :where(textarea) {
|
|
1836
2324
|
min-height: 7rem;
|
|
1837
2325
|
resize: vertical;
|
|
1838
2326
|
}
|
|
1839
2327
|
|
|
1840
|
-
[data-ui][data-
|
|
2328
|
+
[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
2329
|
+
|
|
2330
|
+
[data-ui][data-mode] :where(select:not([multiple])) {
|
|
2331
|
+
-webkit-appearance: none;
|
|
2332
|
+
appearance: none;
|
|
2333
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
2334
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
2335
|
+
background-repeat: no-repeat;
|
|
2336
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
2337
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2340
|
+
[data-ui][data-mode] :where(select[multiple]) {
|
|
2341
|
+
padding-inline-end: var(--usk-native-control-padding-inline);
|
|
2342
|
+
background-image: none;
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
|
|
2346
|
+
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
|
|
2347
|
+
--usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
|
|
2348
|
+
}
|
|
1841
2349
|
|
|
1842
|
-
[data-ui][data-
|
|
2350
|
+
[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
1843
2351
|
-webkit-appearance: none;
|
|
1844
2352
|
appearance: none;
|
|
1845
2353
|
box-sizing: border-box;
|
|
@@ -1848,7 +2356,7 @@
|
|
|
1848
2356
|
font: inherit;
|
|
1849
2357
|
}
|
|
1850
2358
|
|
|
1851
|
-
[data-ui][data-
|
|
2359
|
+
[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
1852
2360
|
color: var(--usk-native-on-primary);
|
|
1853
2361
|
background: var(--usk-native-primary);
|
|
1854
2362
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -1859,29 +2367,56 @@
|
|
|
1859
2367
|
}
|
|
1860
2368
|
|
|
1861
2369
|
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
1862
|
-
[data-ui][data-
|
|
2370
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
|
|
1863
2371
|
display: inline-flex;
|
|
1864
2372
|
align-items: center;
|
|
1865
2373
|
justify-content: center;
|
|
1866
2374
|
gap: .55rem;
|
|
1867
2375
|
}
|
|
1868
2376
|
|
|
1869
|
-
[data-ui][data-
|
|
2377
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
|
|
1870
2378
|
flex: 0 0 1em;
|
|
1871
2379
|
}
|
|
1872
2380
|
|
|
1873
|
-
[data-ui][data-
|
|
2381
|
+
[data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
|
|
1874
2382
|
background: var(--usk-native-primary-hover);
|
|
1875
2383
|
border-color: var(--usk-native-primary-hover);
|
|
1876
2384
|
}
|
|
1877
2385
|
|
|
1878
|
-
[data-ui][data-
|
|
1879
|
-
|
|
1880
|
-
|
|
2386
|
+
[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
2387
|
+
-webkit-appearance: none;
|
|
2388
|
+
appearance: none;
|
|
2389
|
+
inline-size: var(--usk-native-choice-size);
|
|
2390
|
+
block-size: var(--usk-native-choice-size);
|
|
2391
|
+
background: var(--usk-native-choice-background);
|
|
2392
|
+
border: var(--usk-native-choice-border);
|
|
2393
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
1881
2394
|
accent-color: var(--usk-native-primary);
|
|
1882
2395
|
}
|
|
1883
2396
|
|
|
1884
|
-
[data-ui][data-
|
|
2397
|
+
[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
|
|
2398
|
+
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
|
|
2399
|
+
|
|
2400
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
|
|
2401
|
+
background-color: var(--usk-native-choice-checked-background);
|
|
2402
|
+
background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
|
|
2406
|
+
border-color: var(--usk-native-primary);
|
|
2407
|
+
filter: brightness(1.04);
|
|
2408
|
+
}
|
|
2409
|
+
|
|
2410
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
|
|
2411
|
+
filter: brightness(.94);
|
|
2412
|
+
transform: scale(.94);
|
|
2413
|
+
}
|
|
2414
|
+
|
|
2415
|
+
[data-ui][data-mode] :where(input[type="radio"]:checked) {
|
|
2416
|
+
background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
|
|
2417
|
+
}
|
|
2418
|
+
|
|
2419
|
+
[data-ui][data-mode] :where(input[type="range"]) {
|
|
1885
2420
|
-webkit-appearance: none;
|
|
1886
2421
|
appearance: none;
|
|
1887
2422
|
width: 100%;
|
|
@@ -1890,40 +2425,50 @@
|
|
|
1890
2425
|
accent-color: var(--usk-native-primary);
|
|
1891
2426
|
}
|
|
1892
2427
|
|
|
1893
|
-
[data-ui][data-
|
|
1894
|
-
block-size:
|
|
1895
|
-
background: var(--usk-native-track);
|
|
1896
|
-
border
|
|
2428
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
2429
|
+
block-size: var(--usk-native-range-track-size);
|
|
2430
|
+
background: var(--usk-native-range-track-background);
|
|
2431
|
+
border: var(--usk-native-range-track-border);
|
|
2432
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2433
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
1897
2434
|
}
|
|
1898
2435
|
|
|
1899
|
-
[data-ui][data-
|
|
1900
|
-
block-size:
|
|
1901
|
-
background: var(--usk-native-track);
|
|
1902
|
-
border
|
|
2436
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
2437
|
+
block-size: var(--usk-native-range-track-size);
|
|
2438
|
+
background: var(--usk-native-range-track-background);
|
|
2439
|
+
border: var(--usk-native-range-track-border);
|
|
2440
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2441
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
|
|
2445
|
+
block-size: var(--usk-native-range-track-size);
|
|
2446
|
+
background: var(--usk-native-range-progress-background);
|
|
2447
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
1903
2448
|
}
|
|
1904
2449
|
|
|
1905
|
-
[data-ui][data-
|
|
2450
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
1906
2451
|
-webkit-appearance: none;
|
|
1907
2452
|
appearance: none;
|
|
1908
|
-
inline-size:
|
|
1909
|
-
block-size:
|
|
1910
|
-
margin-block-start:
|
|
1911
|
-
background: var(--usk-native-thumb);
|
|
1912
|
-
border: var(--usk-native-
|
|
1913
|
-
border-radius:
|
|
1914
|
-
box-shadow: var(--usk-native-shadow);
|
|
2453
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2454
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2455
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
|
|
2456
|
+
background: var(--usk-native-range-thumb-background);
|
|
2457
|
+
border: var(--usk-native-range-thumb-border);
|
|
2458
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2459
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1915
2460
|
}
|
|
1916
2461
|
|
|
1917
|
-
[data-ui][data-
|
|
1918
|
-
inline-size:
|
|
1919
|
-
block-size:
|
|
1920
|
-
background: var(--usk-native-thumb);
|
|
1921
|
-
border: var(--usk-native-
|
|
1922
|
-
border-radius:
|
|
1923
|
-
box-shadow: var(--usk-native-shadow);
|
|
2462
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
2463
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2464
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2465
|
+
background: var(--usk-native-range-thumb-background);
|
|
2466
|
+
border: var(--usk-native-range-thumb-border);
|
|
2467
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2468
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1924
2469
|
}
|
|
1925
2470
|
|
|
1926
|
-
[data-ui][data-
|
|
2471
|
+
[data-ui][data-mode] :where(input[type="color"]) {
|
|
1927
2472
|
inline-size: 3rem;
|
|
1928
2473
|
block-size: 2.4rem;
|
|
1929
2474
|
padding: .2rem;
|
|
@@ -1932,84 +2477,86 @@
|
|
|
1932
2477
|
border-radius: var(--usk-native-radius-sm);
|
|
1933
2478
|
}
|
|
1934
2479
|
|
|
1935
|
-
[data-ui][data-
|
|
2480
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
|
|
1936
2481
|
padding: 0;
|
|
1937
2482
|
}
|
|
1938
2483
|
|
|
1939
|
-
[data-ui][data-
|
|
1940
|
-
border:
|
|
1941
|
-
border-radius:
|
|
2484
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
|
|
2485
|
+
border: var(--usk-native-color-swatch-border);
|
|
2486
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1942
2487
|
}
|
|
1943
2488
|
|
|
1944
|
-
[data-ui][data-
|
|
1945
|
-
border:
|
|
1946
|
-
border-radius:
|
|
2489
|
+
[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
|
|
2490
|
+
border: var(--usk-native-color-swatch-border);
|
|
2491
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1947
2492
|
}
|
|
1948
2493
|
|
|
1949
|
-
[data-ui][data-
|
|
2494
|
+
[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
|
|
1950
2495
|
|
|
1951
2496
|
/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
|
|
1952
|
-
[data-ui][data-
|
|
1953
|
-
[data-ui][data-
|
|
2497
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2498
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
1954
2499
|
margin-inline-end: .75rem;
|
|
1955
2500
|
padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
|
|
1956
2501
|
color: var(--usk-native-on-primary);
|
|
1957
|
-
background: var(--usk-native-
|
|
1958
|
-
border: var(--usk-native-
|
|
1959
|
-
border-radius: var(--usk-native-radius
|
|
2502
|
+
background: var(--usk-native-file-button-background);
|
|
2503
|
+
border: var(--usk-native-file-button-border);
|
|
2504
|
+
border-radius: var(--usk-native-file-button-radius);
|
|
2505
|
+
box-shadow: var(--usk-native-file-button-shadow);
|
|
1960
2506
|
font-weight: 800;
|
|
1961
2507
|
cursor: pointer;
|
|
1962
2508
|
}
|
|
1963
2509
|
|
|
1964
|
-
[data-ui][data-
|
|
1965
|
-
[data-ui][data-
|
|
2510
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
|
|
2511
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
|
|
1966
2512
|
background: var(--usk-native-primary-hover);
|
|
1967
2513
|
border-color: var(--usk-native-primary-hover);
|
|
1968
2514
|
}
|
|
1969
2515
|
|
|
1970
|
-
[data-ui][data-
|
|
1971
|
-
[data-ui][data-
|
|
2516
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
|
|
2517
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
|
|
1972
2518
|
box-shadow: var(--usk-native-focus-ring);
|
|
1973
2519
|
}
|
|
1974
2520
|
|
|
1975
|
-
[data-ui][data-
|
|
1976
|
-
[data-ui][data-
|
|
2521
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
|
|
2522
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
|
|
1977
2523
|
filter: brightness(.96);
|
|
1978
2524
|
}
|
|
1979
2525
|
|
|
1980
|
-
[data-ui][data-
|
|
1981
|
-
[data-ui][data-
|
|
2526
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
|
|
2527
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
|
|
1982
2528
|
color: var(--usk-native-text-muted);
|
|
1983
2529
|
background: var(--usk-native-surface-soft);
|
|
1984
2530
|
border-color: var(--usk-native-border);
|
|
1985
2531
|
cursor: not-allowed;
|
|
1986
2532
|
}
|
|
1987
2533
|
|
|
1988
|
-
[data-ui][data-
|
|
2534
|
+
[data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
|
|
1989
2535
|
background: var(--usk-native-surface-soft);
|
|
1990
2536
|
}
|
|
1991
2537
|
|
|
1992
|
-
[data-ui][data-
|
|
2538
|
+
[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
|
|
1993
2539
|
box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
|
|
1994
2540
|
}
|
|
1995
2541
|
|
|
1996
|
-
[data-ui][data-
|
|
2542
|
+
[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
|
|
1997
2543
|
border-color: var(--usk-native-success);
|
|
1998
2544
|
}
|
|
1999
2545
|
|
|
2000
|
-
[data-ui][data-
|
|
2546
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2001
2547
|
border-color: var(--usk-native-danger);
|
|
2002
2548
|
}
|
|
2003
2549
|
|
|
2004
|
-
[data-ui][data-
|
|
2550
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
|
|
2551
|
+
background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
|
|
2005
2552
|
accent-color: var(--usk-native-warning);
|
|
2006
2553
|
}
|
|
2007
2554
|
|
|
2008
|
-
[data-ui][data-
|
|
2555
|
+
[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
|
|
2009
2556
|
filter: brightness(.96);
|
|
2010
2557
|
}
|
|
2011
2558
|
|
|
2012
|
-
[data-ui][data-
|
|
2559
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2013
2560
|
color: var(--usk-native-text-muted);
|
|
2014
2561
|
background: var(--usk-native-surface-soft);
|
|
2015
2562
|
border-color: var(--usk-native-border);
|
|
@@ -2018,37 +2565,36 @@
|
|
|
2018
2565
|
cursor: not-allowed;
|
|
2019
2566
|
}
|
|
2020
2567
|
|
|
2021
|
-
[data-ui][data-
|
|
2568
|
+
[data-ui][data-mode] :where(table) {
|
|
2022
2569
|
width: 100%;
|
|
2023
2570
|
margin: 1rem 0;
|
|
2024
|
-
overflow: hidden;
|
|
2025
2571
|
background: var(--usk-native-surface);
|
|
2026
2572
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2027
2573
|
border-radius: var(--usk-native-radius);
|
|
2028
2574
|
border-collapse: collapse;
|
|
2029
2575
|
}
|
|
2030
2576
|
|
|
2031
|
-
[data-ui][data-
|
|
2577
|
+
[data-ui][data-mode] :where(caption) {
|
|
2032
2578
|
caption-side: bottom;
|
|
2033
2579
|
padding: .75rem;
|
|
2034
2580
|
color: var(--usk-native-text-muted);
|
|
2035
2581
|
font-size: .9rem;
|
|
2036
2582
|
}
|
|
2037
2583
|
|
|
2038
|
-
[data-ui][data-
|
|
2584
|
+
[data-ui][data-mode] :where(th, td) {
|
|
2039
2585
|
padding: .8rem .9rem;
|
|
2040
2586
|
text-align: left;
|
|
2041
2587
|
border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2042
2588
|
}
|
|
2043
2589
|
|
|
2044
|
-
[data-ui][data-
|
|
2590
|
+
[data-ui][data-mode] :where(th) {
|
|
2045
2591
|
color: var(--usk-native-text);
|
|
2046
2592
|
background: var(--usk-native-surface-soft);
|
|
2047
2593
|
}
|
|
2048
2594
|
|
|
2049
|
-
[data-ui][data-
|
|
2595
|
+
[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
2050
2596
|
|
|
2051
|
-
[data-ui][data-
|
|
2597
|
+
[data-ui][data-mode] :where(details) {
|
|
2052
2598
|
margin: 1rem 0;
|
|
2053
2599
|
padding: .9rem 1rem;
|
|
2054
2600
|
color: var(--usk-native-text);
|
|
@@ -2057,13 +2603,13 @@
|
|
|
2057
2603
|
border-radius: var(--usk-native-radius);
|
|
2058
2604
|
}
|
|
2059
2605
|
|
|
2060
|
-
[data-ui][data-
|
|
2606
|
+
[data-ui][data-mode] :where(summary) {
|
|
2061
2607
|
color: var(--usk-native-text);
|
|
2062
2608
|
font-weight: 900;
|
|
2063
2609
|
cursor: pointer;
|
|
2064
2610
|
}
|
|
2065
2611
|
|
|
2066
|
-
[data-ui][data-
|
|
2612
|
+
[data-ui][data-mode] :where(dialog) {
|
|
2067
2613
|
max-width: min(92vw, 42rem);
|
|
2068
2614
|
padding: 0;
|
|
2069
2615
|
color: var(--usk-native-text);
|
|
@@ -2073,47 +2619,68 @@
|
|
|
2073
2619
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
2074
2620
|
}
|
|
2075
2621
|
|
|
2076
|
-
[data-ui][data-
|
|
2622
|
+
[data-ui][data-mode] :where(dialog p) { color: inherit; }
|
|
2077
2623
|
|
|
2078
|
-
[data-ui][data-
|
|
2624
|
+
[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
2079
2625
|
|
|
2080
|
-
[data-ui][data-
|
|
2626
|
+
[data-ui][data-mode] :where(progress, meter) {
|
|
2627
|
+
-webkit-appearance: none;
|
|
2628
|
+
appearance: none;
|
|
2081
2629
|
width: 100%;
|
|
2082
|
-
min-height:
|
|
2630
|
+
min-height: var(--usk-native-progress-size);
|
|
2083
2631
|
accent-color: var(--usk-native-primary);
|
|
2084
2632
|
}
|
|
2085
2633
|
|
|
2086
|
-
[data-ui][data-
|
|
2087
|
-
|
|
2088
|
-
background:
|
|
2089
|
-
border
|
|
2634
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2635
|
+
background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
|
|
2636
|
+
background-size: 200% 100%;
|
|
2637
|
+
border: var(--usk-native-progress-track-border);
|
|
2638
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2639
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2640
|
+
animation: usk-native-progress-indeterminate 1.2s linear infinite;
|
|
2090
2641
|
}
|
|
2091
2642
|
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
background: var(--usk-native-track-fill);
|
|
2095
|
-
border-radius: inherit;
|
|
2643
|
+
@keyframes usk-native-progress-indeterminate {
|
|
2644
|
+
to { background-position: -2rem 0; }
|
|
2096
2645
|
}
|
|
2097
2646
|
|
|
2098
|
-
[data-ui][data-
|
|
2099
|
-
[data-ui][data-
|
|
2100
|
-
background: var(--usk-native-track-
|
|
2101
|
-
border
|
|
2647
|
+
[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
|
|
2648
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
|
|
2649
|
+
background: var(--usk-native-progress-track-background);
|
|
2650
|
+
border: var(--usk-native-progress-track-border);
|
|
2651
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2652
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
[data-ui][data-mode] :where(progress)::-webkit-progress-value,
|
|
2656
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
|
|
2657
|
+
background: var(--usk-native-progress-value-background);
|
|
2658
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2659
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2660
|
+
}
|
|
2661
|
+
|
|
2662
|
+
[data-ui][data-mode] :where(progress)::-moz-progress-bar,
|
|
2663
|
+
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
|
|
2664
|
+
background: var(--usk-native-progress-value-background);
|
|
2665
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2666
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2102
2667
|
}
|
|
2103
2668
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
2669
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
|
|
2670
|
+
|
|
2671
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
|
|
2672
|
+
background: var(--usk-native-meter-suboptimum-background);
|
|
2106
2673
|
}
|
|
2107
2674
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
background: var(--usk-native-
|
|
2675
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
|
|
2676
|
+
background: var(--usk-native-meter-critical-background);
|
|
2110
2677
|
}
|
|
2111
2678
|
|
|
2112
|
-
[data-ui][data-
|
|
2679
|
+
[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
|
|
2113
2680
|
color: var(--usk-native-text);
|
|
2114
2681
|
}
|
|
2115
2682
|
|
|
2116
|
-
[data-ui][data-
|
|
2683
|
+
[data-ui][data-mode] :where(article, aside) {
|
|
2117
2684
|
padding: var(--usk-native-panel-padding);
|
|
2118
2685
|
color: var(--usk-native-text);
|
|
2119
2686
|
background: var(--usk-native-card-bg);
|
|
@@ -2122,113 +2689,132 @@
|
|
|
2122
2689
|
box-shadow: var(--usk-native-shadow);
|
|
2123
2690
|
}
|
|
2124
2691
|
|
|
2125
|
-
[data-ui][data-
|
|
2692
|
+
[data-ui][data-mode] :where(dl) {
|
|
2126
2693
|
margin: 0 0 1rem;
|
|
2127
2694
|
color: var(--usk-native-text-muted);
|
|
2128
2695
|
}
|
|
2129
2696
|
|
|
2130
|
-
[data-ui][data-
|
|
2697
|
+
[data-ui][data-mode] :where(dt) {
|
|
2131
2698
|
color: var(--usk-native-text);
|
|
2132
2699
|
font-weight: 900;
|
|
2133
2700
|
}
|
|
2134
2701
|
|
|
2135
|
-
[data-ui][data-
|
|
2136
|
-
[data-ui][data-
|
|
2137
|
-
[data-ui][data-
|
|
2138
|
-
[data-ui][data-
|
|
2139
|
-
[data-ui][data-
|
|
2140
|
-
[data-ui][data-
|
|
2141
|
-
[data-ui][data-
|
|
2142
|
-
[data-ui][data-
|
|
2143
|
-
[data-ui][data-
|
|
2144
|
-
[data-ui][data-
|
|
2145
|
-
[data-ui][data-
|
|
2146
|
-
[data-ui][data-
|
|
2147
|
-
[data-ui][data-
|
|
2148
|
-
|
|
2149
|
-
[data-ui][data-
|
|
2702
|
+
[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
|
|
2703
|
+
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
|
|
2704
|
+
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
2705
|
+
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
|
|
2706
|
+
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
|
|
2707
|
+
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
|
|
2708
|
+
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
|
|
2709
|
+
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
|
|
2710
|
+
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
|
|
2711
|
+
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
|
|
2712
|
+
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
|
|
2713
|
+
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
|
|
2714
|
+
[data-ui][data-mode] :where(datalist) { display: none; }
|
|
2715
|
+
|
|
2716
|
+
[data-ui][data-mode] :where(summary, li)::marker {
|
|
2150
2717
|
color: var(--usk-native-indicator);
|
|
2151
2718
|
}
|
|
2152
2719
|
|
|
2153
|
-
[data-ui][data-
|
|
2154
|
-
opacity:
|
|
2720
|
+
[data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
|
|
2721
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2722
|
+
filter: var(--usk-native-indicator-filter);
|
|
2155
2723
|
accent-color: var(--usk-native-indicator);
|
|
2156
2724
|
}
|
|
2157
2725
|
|
|
2158
|
-
[data-ui][data-
|
|
2726
|
+
[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
|
|
2159
2727
|
accent-color: var(--usk-native-indicator);
|
|
2160
2728
|
}
|
|
2161
2729
|
|
|
2162
|
-
[data-ui][data-
|
|
2163
|
-
[data-ui][data-
|
|
2730
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
|
|
2731
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
|
|
2164
2732
|
opacity: .72;
|
|
2165
2733
|
}
|
|
2166
2734
|
|
|
2167
|
-
[data-ui][data-
|
|
2735
|
+
[data-ui][data-mode] :where(select)::picker-icon {
|
|
2168
2736
|
color: var(--usk-native-indicator);
|
|
2737
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2738
|
+
filter: var(--usk-native-indicator-filter);
|
|
2169
2739
|
}
|
|
2170
2740
|
|
|
2171
|
-
[data-ui][data-
|
|
2741
|
+
[data-ui][data-mode] :where(:focus-visible) {
|
|
2172
2742
|
outline: 3px solid var(--usk-native-focus);
|
|
2173
2743
|
outline-offset: 3px;
|
|
2174
2744
|
box-shadow: var(--usk-native-focus-ring);
|
|
2175
2745
|
}
|
|
2176
2746
|
|
|
2177
|
-
[data-ui][data-
|
|
2747
|
+
[data-ui][data-mode] :where(:target) {
|
|
2178
2748
|
scroll-margin-top: 6rem;
|
|
2179
2749
|
outline: 3px solid var(--usk-native-focus);
|
|
2180
2750
|
outline-offset: .35rem;
|
|
2181
2751
|
}
|
|
2182
2752
|
|
|
2183
|
-
[data-ui][data-
|
|
2184
|
-
[data-ui][data-
|
|
2185
|
-
[data-ui][data-
|
|
2186
|
-
[data-ui][data-
|
|
2187
|
-
[data-ui][data-
|
|
2188
|
-
[data-ui][data-
|
|
2189
|
-
[data-ui][data-
|
|
2753
|
+
[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
|
|
2754
|
+
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
|
|
2755
|
+
[data-ui][data-mode] :where([hidden]) { display: none !important; }
|
|
2756
|
+
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
|
|
2757
|
+
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
|
|
2758
|
+
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
|
|
2759
|
+
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
|
|
2190
2760
|
|
|
2191
2761
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
2192
|
-
[data-ui][data-
|
|
2762
|
+
[data-ui][data-mode] {
|
|
2193
2763
|
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
2194
2764
|
}
|
|
2195
2765
|
|
|
2196
|
-
[data-ui][data-
|
|
2766
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
2197
2767
|
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
2198
2768
|
}
|
|
2199
2769
|
|
|
2200
|
-
[data-ui][data-
|
|
2770
|
+
[data-ui][data-mode] :where(mark) {
|
|
2201
2771
|
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
2202
2772
|
}
|
|
2203
2773
|
|
|
2204
|
-
[data-ui][data-
|
|
2774
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
2205
2775
|
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
2206
2776
|
}
|
|
2207
2777
|
|
|
2208
|
-
[data-ui][data-
|
|
2778
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2209
2779
|
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
2210
2780
|
}
|
|
2211
2781
|
|
|
2212
|
-
[data-ui][data-
|
|
2782
|
+
[data-ui][data-mode] :where(th) {
|
|
2213
2783
|
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
2214
2784
|
}
|
|
2215
2785
|
}
|
|
2216
2786
|
|
|
2217
2787
|
@media (prefers-reduced-motion: reduce) {
|
|
2218
|
-
[data-ui][data-
|
|
2219
|
-
[data-ui][data-
|
|
2788
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2789
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
2220
2790
|
transition-duration: 1ms !important;
|
|
2221
2791
|
}
|
|
2792
|
+
|
|
2793
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2794
|
+
animation: none;
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
|
|
2799
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
|
|
2800
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
|
|
2801
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
|
|
2802
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
|
|
2803
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
|
|
2804
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
|
|
2805
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
|
|
2806
|
+
box-shadow: none;
|
|
2807
|
+
filter: none;
|
|
2222
2808
|
}
|
|
2223
2809
|
|
|
2224
2810
|
@media (forced-colors: active) {
|
|
2225
2811
|
@supports (forced-color-adjust: auto) {
|
|
2226
|
-
[data-ui][data-
|
|
2812
|
+
[data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
2227
2813
|
forced-color-adjust: auto;
|
|
2228
2814
|
}
|
|
2229
2815
|
}
|
|
2230
2816
|
|
|
2231
|
-
[data-ui][data-
|
|
2817
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2232
2818
|
border-color: Mark;
|
|
2233
2819
|
}
|
|
2234
2820
|
}
|
|
@@ -2244,7 +2830,7 @@
|
|
|
2244
2830
|
========================================================= */
|
|
2245
2831
|
|
|
2246
2832
|
@layer ui-style-kit.components {
|
|
2247
|
-
[data-ui][data-
|
|
2833
|
+
[data-ui][data-mode] :where(
|
|
2248
2834
|
h1,
|
|
2249
2835
|
h2,
|
|
2250
2836
|
h3,
|
|
@@ -2261,6 +2847,9 @@
|
|
|
2261
2847
|
label,
|
|
2262
2848
|
legend,
|
|
2263
2849
|
summary,
|
|
2850
|
+
strong,
|
|
2851
|
+
small,
|
|
2852
|
+
em,
|
|
2264
2853
|
code,
|
|
2265
2854
|
kbd,
|
|
2266
2855
|
samp,
|
|
@@ -2270,10 +2859,11 @@
|
|
|
2270
2859
|
) {
|
|
2271
2860
|
max-inline-size: 100%;
|
|
2272
2861
|
min-inline-size: 0;
|
|
2273
|
-
overflow-wrap:
|
|
2862
|
+
overflow-wrap: break-word;
|
|
2863
|
+
word-break: normal;
|
|
2274
2864
|
}
|
|
2275
2865
|
|
|
2276
|
-
[data-ui][data-
|
|
2866
|
+
[data-ui][data-mode] :where(
|
|
2277
2867
|
[class~="saas-surface"],
|
|
2278
2868
|
[class~="saas-surface-sm"],
|
|
2279
2869
|
[class~="saas-surface-lg"],
|
|
@@ -2395,13 +2985,12 @@
|
|
|
2395
2985
|
[class~="rg-alert"],
|
|
2396
2986
|
[class~="rg-table-wrap"],
|
|
2397
2987
|
[class~="rg-nav"]
|
|
2398
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
2988
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"])[data-
|
|
3038
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"])[data-
|
|
3080
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
2814
|
-
color: var(--usk-native-primary);
|
|
3407
|
+
color: var(--usk-primary-ink, var(--usk-native-primary));
|
|
2815
3408
|
background: transparent;
|
|
2816
3409
|
border-color: var(--usk-native-border);
|
|
2817
3410
|
}
|
|
@@ -2895,15 +3488,77 @@
|
|
|
2895
3488
|
}
|
|
2896
3489
|
}
|
|
2897
3490
|
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
.
|
|
3491
|
+
/**
|
|
3492
|
+
* Normalizes the split-line trust seal hierarchy across every visual preset.
|
|
3493
|
+
* Both lines inherit their seal's paired foreground instead of native page-text paint.
|
|
3494
|
+
* The root attributes intentionally raise specificity within the preset layer
|
|
3495
|
+
* so later style-specific defaults cannot collapse the number and caption.
|
|
3496
|
+
*/
|
|
3497
|
+
@layer ui-style-kit.presets {
|
|
3498
|
+
[data-ui][data-mode] :where(
|
|
3499
|
+
.saas-badge-seal,
|
|
3500
|
+
.bento-badge-seal,
|
|
3501
|
+
.max-badge-seal,
|
|
3502
|
+
.bau-badge-seal,
|
|
3503
|
+
.tactile-badge-seal,
|
|
3504
|
+
.neo-badge-seal,
|
|
3505
|
+
.retro-badge-seal,
|
|
3506
|
+
.brutal-badge-seal,
|
|
3507
|
+
.cyber-badge-seal,
|
|
3508
|
+
.y2k-badge-seal,
|
|
3509
|
+
.rg-badge-seal,
|
|
3510
|
+
.luxe-badge-seal,
|
|
3511
|
+
.organic-badge-seal,
|
|
3512
|
+
.utility-badge-seal,
|
|
3513
|
+
.blueprint-badge-seal,
|
|
3514
|
+
.deco-badge-seal,
|
|
3515
|
+
.clay-badge-seal,
|
|
3516
|
+
.terminal-badge-seal,
|
|
3517
|
+
.paper-badge-seal,
|
|
3518
|
+
.noir-badge-seal
|
|
3519
|
+
) > strong {
|
|
3520
|
+
color: inherit;
|
|
3521
|
+
font-size: 1.5rem;
|
|
3522
|
+
line-height: .9;
|
|
3523
|
+
}
|
|
3524
|
+
|
|
3525
|
+
[data-ui][data-mode] :where(
|
|
3526
|
+
.saas-badge-seal,
|
|
3527
|
+
.bento-badge-seal,
|
|
3528
|
+
.max-badge-seal,
|
|
3529
|
+
.bau-badge-seal,
|
|
3530
|
+
.tactile-badge-seal,
|
|
3531
|
+
.neo-badge-seal,
|
|
3532
|
+
.retro-badge-seal,
|
|
3533
|
+
.brutal-badge-seal,
|
|
3534
|
+
.cyber-badge-seal,
|
|
3535
|
+
.y2k-badge-seal,
|
|
3536
|
+
.rg-badge-seal,
|
|
3537
|
+
.luxe-badge-seal,
|
|
3538
|
+
.organic-badge-seal,
|
|
3539
|
+
.utility-badge-seal,
|
|
3540
|
+
.blueprint-badge-seal,
|
|
3541
|
+
.deco-badge-seal,
|
|
3542
|
+
.clay-badge-seal,
|
|
3543
|
+
.terminal-badge-seal,
|
|
3544
|
+
.paper-badge-seal,
|
|
3545
|
+
.noir-badge-seal
|
|
3546
|
+
) > small {
|
|
3547
|
+
color: inherit;
|
|
3548
|
+
font-size: .8125rem;
|
|
3549
|
+
line-height: 1;
|
|
3550
|
+
}
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
3554
|
+
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
3555
|
+
@layer ui-style-kit.components {
|
|
3556
|
+
[data-ui][data-mode] :where(
|
|
3557
|
+
.luxe-surface,
|
|
3558
|
+
.luxe-surface-sm,
|
|
3559
|
+
.luxe-surface-lg,
|
|
3560
|
+
.luxe-card,
|
|
3561
|
+
.luxe-card-service,
|
|
2907
3562
|
.luxe-card-feature,
|
|
2908
3563
|
.luxe-panel,
|
|
2909
3564
|
.luxe-toolbar,
|
|
@@ -3061,13 +3716,12 @@
|
|
|
3061
3716
|
.noir-feature-item,
|
|
3062
3717
|
.noir-callout-bar,
|
|
3063
3718
|
.noir-media-scrim
|
|
3064
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
3719
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"])[data-
|
|
3797
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"])[data-
|
|
3833
|
+
), [data-ui]:where([data-ui="minimal-saas"])[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="minimal-saas"]) :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="minimal-saas"]) :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="minimal-saas"]) :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;
|
|
@@ -3512,11 +4169,11 @@
|
|
|
3512
4169
|
--saas-font-heading: var(--saas-font-display);
|
|
3513
4170
|
--saas-font-control: var(--saas-font-display);
|
|
3514
4171
|
--saas-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
3515
|
-
--saas-radius-xs: .
|
|
3516
|
-
--saas-radius-sm: .
|
|
3517
|
-
--saas-radius-md: .
|
|
3518
|
-
--saas-radius-lg:
|
|
3519
|
-
--saas-radius-xl:
|
|
4172
|
+
--saas-radius-xs: .1875rem;
|
|
4173
|
+
--saas-radius-sm: .25rem;
|
|
4174
|
+
--saas-radius-md: .375rem;
|
|
4175
|
+
--saas-radius-lg: .5rem;
|
|
4176
|
+
--saas-radius-xl: .75rem;
|
|
3520
4177
|
--saas-radius-pill: 999px;
|
|
3521
4178
|
--saas-space-1: .25rem;
|
|
3522
4179
|
--saas-space-2: .5rem;
|
|
@@ -3533,33 +4190,105 @@
|
|
|
3533
4190
|
--lightningcss-light: initial;
|
|
3534
4191
|
--lightningcss-dark: ;
|
|
3535
4192
|
color-scheme: light;
|
|
4193
|
+
--saas-fallback-bg-rgb: 248 249 252;
|
|
4194
|
+
--saas-fallback-surface-rgb: 255 255 255;
|
|
4195
|
+
--saas-fallback-surface-strong-rgb: 255 255 255;
|
|
4196
|
+
--saas-fallback-surface-soft-rgb: 243 245 250;
|
|
4197
|
+
--saas-fallback-text-rgb: 19 26 53;
|
|
4198
|
+
--saas-fallback-text-muted-rgb: 97 105 131;
|
|
4199
|
+
--saas-fallback-border-rgb: 220 225 236;
|
|
4200
|
+
--saas-fallback-primary-rgb: 85 78 232;
|
|
4201
|
+
--saas-fallback-primary-hover-rgb: 103 88 244;
|
|
4202
|
+
--saas-fallback-primary-text-rgb: 255 255 255;
|
|
4203
|
+
--saas-fallback-secondary-rgb: 49 110 219;
|
|
4204
|
+
--saas-fallback-secondary-hover-rgb: 43 95 190;
|
|
4205
|
+
--saas-fallback-secondary-text-rgb: 255 255 255;
|
|
4206
|
+
--saas-fallback-accent-rgb: 103 88 244;
|
|
4207
|
+
--saas-fallback-accent-text-rgb: 255 255 255;
|
|
4208
|
+
--saas-fallback-success-rgb: 36 155 112;
|
|
4209
|
+
--saas-fallback-success-text-rgb: 19 26 53;
|
|
4210
|
+
--saas-fallback-warning-rgb: 215 146 31;
|
|
4211
|
+
--saas-fallback-warning-text-rgb: 19 26 53;
|
|
4212
|
+
--saas-fallback-danger-rgb: 214 30 70;
|
|
4213
|
+
--saas-fallback-danger-text-rgb: 255 255 255;
|
|
4214
|
+
--saas-fallback-link-rgb: 85 78 232;
|
|
4215
|
+
--saas-fallback-focus-rgb: 85 78 232;
|
|
3536
4216
|
--saas-panel-alpha: .98;
|
|
3537
|
-
--saas-panel-soft-alpha: .
|
|
3538
|
-
--saas-border-alpha: .
|
|
3539
|
-
--saas-shadow-alpha: .
|
|
3540
|
-
--saas-focus-alpha: .
|
|
4217
|
+
--saas-panel-soft-alpha: .74;
|
|
4218
|
+
--saas-border-alpha: .44;
|
|
4219
|
+
--saas-shadow-alpha: .08;
|
|
4220
|
+
--saas-focus-alpha: .3;
|
|
4221
|
+
--saas-reference-shadow: 0 .5rem 1.5rem #282f530b;
|
|
3541
4222
|
}
|
|
3542
4223
|
|
|
3543
4224
|
[data-ui="minimal-saas"][data-mode="dark"] {
|
|
3544
4225
|
--lightningcss-light: ;
|
|
3545
4226
|
--lightningcss-dark: initial;
|
|
3546
4227
|
color-scheme: dark;
|
|
4228
|
+
--saas-fallback-bg-rgb: 7 17 31;
|
|
4229
|
+
--saas-fallback-surface-rgb: 13 25 42;
|
|
4230
|
+
--saas-fallback-surface-strong-rgb: 27 36 80;
|
|
4231
|
+
--saas-fallback-surface-soft-rgb: 17 31 51;
|
|
4232
|
+
--saas-fallback-text-rgb: 241 243 251;
|
|
4233
|
+
--saas-fallback-text-muted-rgb: 180 187 205;
|
|
4234
|
+
--saas-fallback-border-rgb: 43 58 80;
|
|
4235
|
+
--saas-fallback-primary-rgb: 112 104 255;
|
|
4236
|
+
--saas-fallback-primary-hover-rgb: 135 128 255;
|
|
4237
|
+
--saas-fallback-primary-text-rgb: 7 17 31;
|
|
4238
|
+
--saas-fallback-secondary-rgb: 85 145 255;
|
|
4239
|
+
--saas-fallback-secondary-hover-rgb: 112 166 255;
|
|
4240
|
+
--saas-fallback-secondary-text-rgb: 7 17 31;
|
|
4241
|
+
--saas-fallback-accent-rgb: 87 73 239;
|
|
4242
|
+
--saas-fallback-accent-text-rgb: 255 255 255;
|
|
4243
|
+
--saas-fallback-success-rgb: 67 190 139;
|
|
4244
|
+
--saas-fallback-success-text-rgb: 7 17 31;
|
|
4245
|
+
--saas-fallback-warning-rgb: 239 173 49;
|
|
4246
|
+
--saas-fallback-warning-text-rgb: 7 17 31;
|
|
4247
|
+
--saas-fallback-danger-rgb: 255 61 104;
|
|
4248
|
+
--saas-fallback-danger-text-rgb: 7 17 31;
|
|
4249
|
+
--saas-fallback-link-rgb: 135 128 255;
|
|
4250
|
+
--saas-fallback-focus-rgb: 112 104 255;
|
|
3547
4251
|
--saas-panel-alpha: .92;
|
|
3548
4252
|
--saas-panel-soft-alpha: .64;
|
|
3549
4253
|
--saas-border-alpha: .52;
|
|
3550
4254
|
--saas-shadow-alpha: .34;
|
|
3551
4255
|
--saas-focus-alpha: .42;
|
|
4256
|
+
--saas-reference-shadow: 0 .75rem 2.125rem #00000029;
|
|
3552
4257
|
}
|
|
3553
4258
|
|
|
3554
4259
|
[data-ui="minimal-saas"][data-mode="contrast"] {
|
|
3555
4260
|
--lightningcss-light: ;
|
|
3556
4261
|
--lightningcss-dark: initial;
|
|
3557
4262
|
color-scheme: dark;
|
|
4263
|
+
--saas-fallback-bg-rgb: 0 0 0;
|
|
4264
|
+
--saas-fallback-surface-rgb: 3 8 22;
|
|
4265
|
+
--saas-fallback-surface-strong-rgb: 8 18 42;
|
|
4266
|
+
--saas-fallback-surface-soft-rgb: 0 0 0;
|
|
4267
|
+
--saas-fallback-text-rgb: 255 255 255;
|
|
4268
|
+
--saas-fallback-text-muted-rgb: 238 244 255;
|
|
4269
|
+
--saas-fallback-border-rgb: 255 255 255;
|
|
4270
|
+
--saas-fallback-primary-rgb: 111 140 255;
|
|
4271
|
+
--saas-fallback-primary-hover-rgb: 255 255 255;
|
|
4272
|
+
--saas-fallback-primary-text-rgb: 0 0 0;
|
|
4273
|
+
--saas-fallback-secondary-rgb: 0 217 255;
|
|
4274
|
+
--saas-fallback-secondary-hover-rgb: 255 255 255;
|
|
4275
|
+
--saas-fallback-secondary-text-rgb: 0 0 0;
|
|
4276
|
+
--saas-fallback-accent-rgb: 184 196 255;
|
|
4277
|
+
--saas-fallback-accent-text-rgb: 0 0 0;
|
|
4278
|
+
--saas-fallback-success-rgb: 0 255 144;
|
|
4279
|
+
--saas-fallback-success-text-rgb: 0 0 0;
|
|
4280
|
+
--saas-fallback-warning-rgb: 255 225 0;
|
|
4281
|
+
--saas-fallback-warning-text-rgb: 0 0 0;
|
|
4282
|
+
--saas-fallback-danger-rgb: 255 63 95;
|
|
4283
|
+
--saas-fallback-danger-text-rgb: 0 0 0;
|
|
4284
|
+
--saas-fallback-link-rgb: 159 178 255;
|
|
4285
|
+
--saas-fallback-focus-rgb: 255 255 255;
|
|
3558
4286
|
--saas-panel-alpha: 1;
|
|
3559
4287
|
--saas-panel-soft-alpha: .92;
|
|
3560
4288
|
--saas-border-alpha: 1;
|
|
3561
4289
|
--saas-shadow-alpha: .5;
|
|
3562
4290
|
--saas-focus-alpha: .72;
|
|
4291
|
+
--saas-reference-shadow: none;
|
|
3563
4292
|
}
|
|
3564
4293
|
|
|
3565
4294
|
[data-ui="minimal-saas"][data-theme][data-mode] {
|
|
@@ -3577,15 +4306,42 @@
|
|
|
3577
4306
|
--saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3578
4307
|
--saas-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3579
4308
|
--saas-accent-rgb: var(--usk-accent-rgb);
|
|
3580
|
-
--saas-success-rgb: var(--usk-success-rgb);
|
|
3581
|
-
--saas-warning-rgb: var(--usk-warning-rgb);
|
|
3582
|
-
--saas-danger-rgb: var(--usk-danger-rgb);
|
|
3583
|
-
--saas-link-rgb: var(--usk-link-rgb);
|
|
3584
4309
|
--saas-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
4310
|
+
--saas-success-rgb: var(--usk-success-rgb);
|
|
3585
4311
|
--saas-success-text-rgb: var(--usk-success-text-rgb);
|
|
4312
|
+
--saas-warning-rgb: var(--usk-warning-rgb);
|
|
3586
4313
|
--saas-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
4314
|
+
--saas-danger-rgb: var(--usk-danger-rgb);
|
|
3587
4315
|
--saas-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
4316
|
+
--saas-link-rgb: var(--usk-link-rgb);
|
|
3588
4317
|
--saas-focus-rgb: var(--usk-focus-rgb);
|
|
4318
|
+
}
|
|
4319
|
+
|
|
4320
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
4321
|
+
--usk-native-bg: var(--saas-bg);
|
|
4322
|
+
--saas-bg-rgb: var(--usk-bg-rgb, var(--saas-fallback-bg-rgb));
|
|
4323
|
+
--saas-surface-rgb: var(--usk-surface-rgb, var(--saas-fallback-surface-rgb));
|
|
4324
|
+
--saas-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--saas-fallback-surface-strong-rgb));
|
|
4325
|
+
--saas-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--saas-fallback-surface-soft-rgb));
|
|
4326
|
+
--saas-text-rgb: var(--usk-text-rgb, var(--saas-fallback-text-rgb));
|
|
4327
|
+
--saas-text-muted-rgb: var(--usk-text-muted-rgb, var(--saas-fallback-text-muted-rgb));
|
|
4328
|
+
--saas-border-rgb: var(--usk-border-rgb, var(--saas-fallback-border-rgb));
|
|
4329
|
+
--saas-primary-rgb: var(--usk-primary-rgb, var(--saas-fallback-primary-rgb));
|
|
4330
|
+
--saas-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--saas-fallback-primary-hover-rgb));
|
|
4331
|
+
--saas-primary-text-rgb: var(--usk-primary-text-rgb, var(--saas-fallback-primary-text-rgb));
|
|
4332
|
+
--saas-secondary-rgb: var(--usk-secondary-rgb, var(--saas-fallback-secondary-rgb));
|
|
4333
|
+
--saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--saas-fallback-secondary-hover-rgb));
|
|
4334
|
+
--saas-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--saas-fallback-secondary-text-rgb));
|
|
4335
|
+
--saas-accent-rgb: var(--usk-accent-rgb, var(--saas-fallback-accent-rgb));
|
|
4336
|
+
--saas-accent-text-rgb: var(--usk-accent-text-rgb, var(--saas-fallback-accent-text-rgb));
|
|
4337
|
+
--saas-success-rgb: var(--usk-success-rgb, var(--saas-fallback-success-rgb));
|
|
4338
|
+
--saas-success-text-rgb: var(--usk-success-text-rgb, var(--saas-fallback-success-text-rgb));
|
|
4339
|
+
--saas-warning-rgb: var(--usk-warning-rgb, var(--saas-fallback-warning-rgb));
|
|
4340
|
+
--saas-warning-text-rgb: var(--usk-warning-text-rgb, var(--saas-fallback-warning-text-rgb));
|
|
4341
|
+
--saas-danger-rgb: var(--usk-danger-rgb, var(--saas-fallback-danger-rgb));
|
|
4342
|
+
--saas-danger-text-rgb: var(--usk-danger-text-rgb, var(--saas-fallback-danger-text-rgb));
|
|
4343
|
+
--saas-link-rgb: var(--usk-link-rgb, var(--saas-fallback-link-rgb));
|
|
4344
|
+
--saas-focus-rgb: var(--usk-focus-rgb, var(--saas-fallback-focus-rgb));
|
|
3589
4345
|
--usk-native-surface: var(--saas-surface);
|
|
3590
4346
|
--usk-native-surface-strong: var(--saas-surface-strong);
|
|
3591
4347
|
--usk-native-surface-soft: var(--saas-surface-soft);
|
|
@@ -3614,7 +4370,58 @@
|
|
|
3614
4370
|
--usk-native-focus-ring: var(--saas-focus-ring, 0 0 0 3px rgb(var(--saas-focus-rgb) / .28));
|
|
3615
4371
|
--usk-native-border-width: 1px;
|
|
3616
4372
|
--usk-native-field-gap: .5rem;
|
|
3617
|
-
--usk-native-panel-padding: var(--saas-space-
|
|
4373
|
+
--usk-native-panel-padding: var(--saas-space-4);
|
|
4374
|
+
--usk-native-control-min-block-size: 2.375rem;
|
|
4375
|
+
--usk-native-control-padding-block: .5rem;
|
|
4376
|
+
--usk-native-control-padding-inline: .75rem;
|
|
4377
|
+
--usk-native-subcontrol-padding-block: .38rem;
|
|
4378
|
+
--usk-native-subcontrol-padding-inline: .6rem;
|
|
4379
|
+
--usk-native-choice-size: 1rem;
|
|
4380
|
+
--usk-native-choice-background: var(--saas-control-bg);
|
|
4381
|
+
--usk-native-choice-border: 1px solid var(--saas-border);
|
|
4382
|
+
--usk-native-checkbox-radius: .25rem;
|
|
4383
|
+
--usk-native-radio-radius: 50%;
|
|
4384
|
+
--usk-native-choice-shadow: none;
|
|
4385
|
+
--usk-native-choice-checked-background: var(--saas-primary);
|
|
4386
|
+
--usk-native-choice-mark-color: var(--saas-on-primary);
|
|
4387
|
+
--usk-native-select-indicator-image: linear-gradient(27deg, transparent 50%, var(--saas-primary) 50%), linear-gradient(153deg, var(--saas-primary) 50%, transparent 50%);
|
|
4388
|
+
--usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
|
|
4389
|
+
--usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
|
|
4390
|
+
--usk-native-select-padding-inline-end: 2.25rem;
|
|
4391
|
+
--usk-native-range-track-size: .32rem;
|
|
4392
|
+
--usk-native-range-track-background: var(--saas-surface-soft);
|
|
4393
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
4394
|
+
--usk-native-range-track-radius: 999px;
|
|
4395
|
+
--usk-native-range-track-shadow: none;
|
|
4396
|
+
--usk-native-range-progress-background: var(--saas-primary);
|
|
4397
|
+
--usk-native-range-thumb-size: .95rem;
|
|
4398
|
+
--usk-native-range-thumb-background: var(--saas-primary);
|
|
4399
|
+
--usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
|
|
4400
|
+
--usk-native-range-thumb-radius: 50%;
|
|
4401
|
+
--usk-native-range-thumb-shadow: 0 .2rem .5rem rgb(var(--saas-text-rgb) / .12);
|
|
4402
|
+
--usk-native-progress-size: .35rem;
|
|
4403
|
+
--usk-native-progress-track-background: var(--saas-surface-soft);
|
|
4404
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
4405
|
+
--usk-native-progress-track-radius: 999px;
|
|
4406
|
+
--usk-native-progress-track-shadow: none;
|
|
4407
|
+
--usk-native-progress-value-background: var(--saas-primary);
|
|
4408
|
+
--usk-native-progress-value-radius: inherit;
|
|
4409
|
+
--usk-native-progress-value-shadow: none;
|
|
4410
|
+
--usk-native-meter-optimum-background: var(--saas-success);
|
|
4411
|
+
--usk-native-meter-suboptimum-background: var(--saas-warning);
|
|
4412
|
+
--usk-native-meter-critical-background: var(--saas-danger);
|
|
4413
|
+
--usk-native-file-button-background: var(--saas-primary);
|
|
4414
|
+
--usk-native-file-button-border: 1px solid var(--saas-border);
|
|
4415
|
+
--usk-native-file-button-radius: .2rem;
|
|
4416
|
+
--usk-native-file-button-shadow: none;
|
|
4417
|
+
--usk-native-color-swatch-border: 1px solid var(--saas-border);
|
|
4418
|
+
--usk-native-color-swatch-radius: .2rem;
|
|
4419
|
+
--usk-native-indicator-opacity: .72;
|
|
4420
|
+
--usk-native-indicator-filter: none;
|
|
4421
|
+
--usk-native-scrollbar-size: .65rem;
|
|
4422
|
+
--usk-native-scrollbar-track: var(--saas-surface-soft);
|
|
4423
|
+
--usk-native-scrollbar-thumb: var(--saas-primary);
|
|
4424
|
+
--usk-native-scrollbar-radius: 2px;
|
|
3618
4425
|
--saas-bg: rgb(var(--saas-bg-rgb));
|
|
3619
4426
|
--saas-surface: rgb(var(--saas-surface-rgb) / var(--saas-panel-alpha));
|
|
3620
4427
|
--saas-surface-strong: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
@@ -3628,6 +4435,7 @@
|
|
|
3628
4435
|
--saas-control-fg: var(--saas-text);
|
|
3629
4436
|
--saas-primary: rgb(var(--saas-primary-rgb));
|
|
3630
4437
|
--saas-primary-hover: rgb(var(--saas-primary-hover-rgb));
|
|
4438
|
+
--saas-brand-2: rgb(var(--saas-primary-hover-rgb));
|
|
3631
4439
|
--saas-primary-text: rgb(var(--saas-primary-text-rgb));
|
|
3632
4440
|
--saas-secondary: rgb(var(--saas-secondary-rgb));
|
|
3633
4441
|
--saas-secondary-hover: rgb(var(--saas-secondary-hover-rgb));
|
|
@@ -3645,23 +4453,26 @@
|
|
|
3645
4453
|
--saas-link: rgb(var(--saas-link-rgb));
|
|
3646
4454
|
--saas-focus: rgb(var(--saas-focus-rgb));
|
|
3647
4455
|
--saas-focus-ring: 0 0 0 3px rgb(var(--saas-focus-rgb) / var(--saas-focus-alpha));
|
|
4456
|
+
--saas-shadow-sm: 0 1px 2px rgb(var(--saas-text-rgb) / calc(var(--saas-shadow-alpha) * .65));
|
|
4457
|
+
--saas-shadow-md: var(--saas-reference-shadow);
|
|
3648
4458
|
--saas-theme-bg-size: auto;
|
|
3649
|
-
--saas-theme-bg:
|
|
3650
|
-
--saas-card-bg:
|
|
3651
|
-
--saas-control-bg:
|
|
4459
|
+
--saas-theme-bg: var(--saas-bg);
|
|
4460
|
+
--saas-card-bg: var(--saas-surface);
|
|
4461
|
+
--saas-control-bg: var(--saas-surface);
|
|
4462
|
+
--saas-hover-bg: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
3652
4463
|
--saas-spinner-track: rgb(var(--saas-border-rgb) / max(.28, calc(var(--saas-border-alpha) * .7)));
|
|
3653
4464
|
--saas-spinner-stroke: var(--saas-primary);
|
|
3654
4465
|
--saas-spinner-accent: var(--saas-accent);
|
|
3655
4466
|
}
|
|
3656
4467
|
|
|
3657
4468
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3658
|
-
[data-ui="minimal-saas"][data-
|
|
4469
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
3659
4470
|
--saas-border: color-mix(in srgb, rgb(var(--saas-border-rgb) / max(var(--saas-border-alpha), var(--usk-border-min-alpha))), var(--saas-text) var(--usk-border-text-mix));
|
|
3660
4471
|
}
|
|
3661
4472
|
}
|
|
3662
4473
|
|
|
3663
4474
|
[data-ui="minimal-saas"] {
|
|
3664
|
-
background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.
|
|
4475
|
+
background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.03),transparent 18rem),var(--saas-bg);
|
|
3665
4476
|
color: var(--saas-text);
|
|
3666
4477
|
font-family: var(--saas-font-body);
|
|
3667
4478
|
text-rendering: optimizelegibility;
|
|
@@ -3674,7 +4485,7 @@
|
|
|
3674
4485
|
box-sizing: border-box;
|
|
3675
4486
|
}
|
|
3676
4487
|
|
|
3677
|
-
[data-ui="minimal-saas"][data-
|
|
4488
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
3678
4489
|
background: var(--saas-theme-bg);
|
|
3679
4490
|
background-size: var(--saas-theme-bg-size);
|
|
3680
4491
|
}
|
|
@@ -3685,33 +4496,35 @@
|
|
|
3685
4496
|
|
|
3686
4497
|
.saas-title {
|
|
3687
4498
|
color: var(--saas-text);
|
|
3688
|
-
letter-spacing: -.
|
|
4499
|
+
letter-spacing: -.02em;
|
|
3689
4500
|
margin: 0;
|
|
3690
|
-
font-size:
|
|
3691
|
-
|
|
4501
|
+
font-size: 1.5rem;
|
|
4502
|
+
font-weight: 700;
|
|
4503
|
+
line-height: 1.05;
|
|
3692
4504
|
}
|
|
3693
4505
|
|
|
3694
4506
|
.saas-heading {
|
|
3695
4507
|
color: var(--saas-text);
|
|
3696
|
-
letter-spacing:
|
|
4508
|
+
letter-spacing: 0;
|
|
3697
4509
|
margin: 0;
|
|
3698
|
-
font-size:
|
|
3699
|
-
|
|
4510
|
+
font-size: 1rem;
|
|
4511
|
+
font-weight: 700;
|
|
4512
|
+
line-height: 1.2;
|
|
3700
4513
|
}
|
|
3701
4514
|
|
|
3702
4515
|
.saas-kicker {
|
|
3703
|
-
color: var(--saas-primary);
|
|
3704
|
-
letter-spacing: .
|
|
4516
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4517
|
+
letter-spacing: .1em;
|
|
3705
4518
|
text-transform: uppercase;
|
|
3706
4519
|
margin: 0;
|
|
3707
|
-
font-size: .
|
|
3708
|
-
font-weight:
|
|
4520
|
+
font-size: .78rem;
|
|
4521
|
+
font-weight: 750;
|
|
3709
4522
|
}
|
|
3710
4523
|
|
|
3711
4524
|
.saas-subtitle, .saas-copy {
|
|
3712
4525
|
color: var(--saas-text-muted);
|
|
3713
4526
|
margin: 0;
|
|
3714
|
-
line-height: 1.
|
|
4527
|
+
line-height: 1.55;
|
|
3715
4528
|
}
|
|
3716
4529
|
|
|
3717
4530
|
.saas-text-muted {
|
|
@@ -3726,19 +4539,15 @@
|
|
|
3726
4539
|
}
|
|
3727
4540
|
|
|
3728
4541
|
.saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-card, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap {
|
|
3729
|
-
background:
|
|
4542
|
+
background: var(--saas-card-bg);
|
|
3730
4543
|
color: var(--saas-text);
|
|
3731
4544
|
border: 1px solid var(--saas-border);
|
|
3732
4545
|
border-radius: var(--saas-radius-lg);
|
|
3733
|
-
box-shadow:
|
|
4546
|
+
box-shadow: var(--saas-shadow-md);
|
|
3734
4547
|
transition: transform var(--saas-transition-base),box-shadow var(--saas-transition-base),border-color var(--saas-transition-base),background var(--saas-transition-base);
|
|
3735
4548
|
position: relative;
|
|
3736
4549
|
}
|
|
3737
4550
|
|
|
3738
|
-
.saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
|
|
3739
|
-
padding: var(--saas-space-6);
|
|
3740
|
-
}
|
|
3741
|
-
|
|
3742
4551
|
.saas-toolbar, :where([data-ui="minimal-saas"]) .ui-toolbar {
|
|
3743
4552
|
justify-content: space-between;
|
|
3744
4553
|
align-items: center;
|
|
@@ -3750,26 +4559,27 @@
|
|
|
3750
4559
|
|
|
3751
4560
|
.saas-surface-sm {
|
|
3752
4561
|
border-radius: var(--saas-radius-md);
|
|
3753
|
-
box-shadow:
|
|
4562
|
+
box-shadow: var(--saas-shadow-sm);
|
|
3754
4563
|
}
|
|
3755
4564
|
|
|
3756
4565
|
.saas-surface-lg {
|
|
3757
|
-
border-radius: var(--saas-radius-
|
|
3758
|
-
box-shadow:
|
|
4566
|
+
border-radius: var(--saas-radius-lg);
|
|
4567
|
+
box-shadow: var(--saas-shadow-md);
|
|
3759
4568
|
}
|
|
3760
4569
|
|
|
3761
4570
|
.saas-well, .saas-inset {
|
|
3762
4571
|
background: var(--saas-surface-soft);
|
|
3763
4572
|
color: var(--saas-text);
|
|
3764
|
-
border: 1px solid
|
|
4573
|
+
border: 1px solid var(--saas-border);
|
|
3765
4574
|
border-radius: var(--saas-radius-md);
|
|
3766
|
-
padding: var(--saas-space-
|
|
3767
|
-
box-shadow:
|
|
4575
|
+
padding: var(--saas-space-4);
|
|
4576
|
+
box-shadow: none;
|
|
3768
4577
|
}
|
|
3769
4578
|
|
|
3770
4579
|
.saas-hover-lift:hover {
|
|
3771
|
-
|
|
3772
|
-
|
|
4580
|
+
border-color: rgb(var(--saas-primary-rgb)/.42);
|
|
4581
|
+
box-shadow: var(--saas-shadow-md);
|
|
4582
|
+
transform: none;
|
|
3773
4583
|
}
|
|
3774
4584
|
|
|
3775
4585
|
.saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
@@ -3777,71 +4587,62 @@
|
|
|
3777
4587
|
justify-content: center;
|
|
3778
4588
|
align-items: center;
|
|
3779
4589
|
gap: var(--saas-space-2);
|
|
3780
|
-
background: var(--saas-
|
|
3781
|
-
min-height: 2.
|
|
4590
|
+
background: var(--saas-control-bg);
|
|
4591
|
+
min-height: 2.125rem;
|
|
3782
4592
|
color: var(--saas-text);
|
|
3783
4593
|
border: 1px solid var(--saas-border);
|
|
3784
4594
|
border-radius: var(--saas-radius-md);
|
|
3785
|
-
box-shadow:
|
|
4595
|
+
box-shadow: var(--saas-shadow-sm);
|
|
3786
4596
|
font: inherit;
|
|
3787
4597
|
cursor: pointer;
|
|
3788
4598
|
-webkit-user-select: none;
|
|
3789
4599
|
user-select: none;
|
|
3790
4600
|
transition: color var(--saas-transition-fast),background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast),transform var(--saas-transition-fast);
|
|
3791
|
-
padding: .
|
|
3792
|
-
font-weight:
|
|
4601
|
+
padding: .45rem .75rem;
|
|
4602
|
+
font-weight: 700;
|
|
3793
4603
|
line-height: 1;
|
|
3794
4604
|
text-decoration: none;
|
|
3795
4605
|
display: inline-flex;
|
|
3796
4606
|
}
|
|
3797
4607
|
|
|
3798
4608
|
.saas-button:hover, .saas-icon-button:hover, :where([data-ui="minimal-saas"]) .ui-button:hover, :where([data-ui="minimal-saas"]) .ui-icon-button:hover {
|
|
3799
|
-
border-color: var(--saas-primary);
|
|
3800
|
-
|
|
4609
|
+
border-color: rgb(var(--saas-primary-rgb)/.48);
|
|
4610
|
+
background: var(--saas-surface-soft);
|
|
4611
|
+
transform: none;
|
|
3801
4612
|
}
|
|
3802
4613
|
|
|
3803
4614
|
.saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active, :where([data-ui="minimal-saas"]) .ui-button:active, :where([data-ui="minimal-saas"]) .ui-icon-button:active, :where([data-ui="minimal-saas"]) .ui-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-button.is-active, :where([data-ui="minimal-saas"]) .ui-icon-button.is-active {
|
|
4615
|
+
box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb)/.12);
|
|
3804
4616
|
transform: translateY(1px);
|
|
3805
|
-
box-shadow: inset 0 3px 10px #0000002e;
|
|
3806
|
-
}
|
|
3807
|
-
|
|
3808
|
-
.saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
3809
|
-
background: var(--saas-primary);
|
|
3810
|
-
color: var(--saas-on-primary);
|
|
3811
|
-
border-color: var(--saas-primary);
|
|
3812
4617
|
}
|
|
3813
4618
|
|
|
3814
4619
|
.saas-button-primary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3815
|
-
background: var(--saas-
|
|
4620
|
+
background: linear-gradient(135deg,var(--saas-brand-2),var(--saas-primary));
|
|
3816
4621
|
border-color: var(--saas-primary-hover);
|
|
3817
4622
|
}
|
|
3818
4623
|
|
|
3819
4624
|
.saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3820
|
-
background: var(--saas-
|
|
3821
|
-
color: var(--saas-
|
|
3822
|
-
border-color: var(--saas-
|
|
4625
|
+
background: rgb(var(--saas-surface-strong-rgb)/var(--saas-panel-alpha));
|
|
4626
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4627
|
+
border-color: rgb(var(--saas-primary-rgb)/.32);
|
|
4628
|
+
box-shadow: none;
|
|
3823
4629
|
}
|
|
3824
4630
|
|
|
3825
4631
|
.saas-button-secondary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
3826
|
-
background: var(--saas-
|
|
3827
|
-
border-color: var(--saas-
|
|
3828
|
-
}
|
|
3829
|
-
|
|
3830
|
-
.saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
3831
|
-
background: var(--saas-danger);
|
|
3832
|
-
color: var(--saas-on-danger);
|
|
3833
|
-
border-color: var(--saas-danger);
|
|
4632
|
+
background: rgb(var(--saas-primary-rgb)/.06);
|
|
4633
|
+
border-color: rgb(var(--saas-primary-rgb)/.52);
|
|
3834
4634
|
}
|
|
3835
4635
|
|
|
3836
4636
|
.saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
3837
|
-
color: var(--saas-
|
|
4637
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
3838
4638
|
box-shadow: none;
|
|
3839
4639
|
background: none;
|
|
4640
|
+
border-color: #0000;
|
|
3840
4641
|
}
|
|
3841
4642
|
|
|
3842
4643
|
.saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
3843
|
-
border-radius: var(--saas-radius-
|
|
3844
|
-
width: 2.
|
|
4644
|
+
border-radius: var(--saas-radius-md);
|
|
4645
|
+
width: 2.375rem;
|
|
3845
4646
|
padding: 0;
|
|
3846
4647
|
}
|
|
3847
4648
|
|
|
@@ -3855,7 +4656,7 @@
|
|
|
3855
4656
|
background: var(--saas-card-bg);
|
|
3856
4657
|
}
|
|
3857
4658
|
|
|
3858
|
-
.saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap, :where([data-ui="minimal-saas"]) .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="minimal-saas"]) .ui-icon-button {
|
|
4659
|
+
.saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost), .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap, :where([data-ui="minimal-saas"]) .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="minimal-saas"]) .ui-icon-button {
|
|
3859
4660
|
background: var(--saas-control-bg);
|
|
3860
4661
|
}
|
|
3861
4662
|
|
|
@@ -3871,26 +4672,26 @@
|
|
|
3871
4672
|
|
|
3872
4673
|
.saas-label, :where([data-ui="minimal-saas"]) .ui-label {
|
|
3873
4674
|
color: var(--saas-text);
|
|
3874
|
-
font-size: .
|
|
3875
|
-
font-weight:
|
|
4675
|
+
font-size: .875rem;
|
|
4676
|
+
font-weight: 700;
|
|
3876
4677
|
}
|
|
3877
4678
|
|
|
3878
4679
|
.saas-input, .saas-textarea, .saas-select, :where([data-ui="minimal-saas"]) .ui-input, :where([data-ui="minimal-saas"]) .ui-textarea, :where([data-ui="minimal-saas"]) .ui-select {
|
|
3879
|
-
background: var(--saas-
|
|
4680
|
+
background: var(--saas-control-bg);
|
|
3880
4681
|
width: 100%;
|
|
3881
|
-
min-height:
|
|
4682
|
+
min-height: 2rem;
|
|
3882
4683
|
color: var(--saas-text);
|
|
3883
4684
|
border: 1px solid var(--saas-border);
|
|
3884
4685
|
border-radius: var(--saas-radius-md);
|
|
3885
4686
|
font: inherit;
|
|
3886
4687
|
transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3887
4688
|
outline: none;
|
|
3888
|
-
padding: .
|
|
4689
|
+
padding: .38rem .65rem;
|
|
3889
4690
|
}
|
|
3890
4691
|
|
|
3891
4692
|
.saas-textarea, :where([data-ui="minimal-saas"]) .ui-textarea {
|
|
3892
4693
|
resize: vertical;
|
|
3893
|
-
min-height:
|
|
4694
|
+
min-height: 7rem;
|
|
3894
4695
|
}
|
|
3895
4696
|
|
|
3896
4697
|
.saas-input::placeholder, .saas-textarea::placeholder, :where([data-ui="minimal-saas"]) .ui-input::placeholder, :where([data-ui="minimal-saas"]) .ui-textarea::placeholder {
|
|
@@ -3899,7 +4700,7 @@
|
|
|
3899
4700
|
}
|
|
3900
4701
|
|
|
3901
4702
|
.saas-input:hover, .saas-textarea:hover, .saas-select:hover, :where([data-ui="minimal-saas"]) .ui-input:hover, :where([data-ui="minimal-saas"]) .ui-textarea:hover, :where([data-ui="minimal-saas"]) .ui-select:hover {
|
|
3902
|
-
border-color: rgb(var(--saas-primary-rgb)/.
|
|
4703
|
+
border-color: rgb(var(--saas-primary-rgb)/.42);
|
|
3903
4704
|
}
|
|
3904
4705
|
|
|
3905
4706
|
.saas-input:focus, .saas-textarea:focus, .saas-select:focus, :where([data-ui="minimal-saas"]) .ui-input:focus, :where([data-ui="minimal-saas"]) .ui-textarea:focus, :where([data-ui="minimal-saas"]) .ui-select:focus {
|
|
@@ -3907,6 +4708,11 @@
|
|
|
3907
4708
|
box-shadow: var(--saas-focus-ring);
|
|
3908
4709
|
}
|
|
3909
4710
|
|
|
4711
|
+
[data-ui="minimal-saas"][data-mode] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
|
|
4712
|
+
outline: 2px solid var(--saas-focus);
|
|
4713
|
+
outline-offset: 2px;
|
|
4714
|
+
}
|
|
4715
|
+
|
|
3910
4716
|
.saas-help-text, :where([data-ui="minimal-saas"]) .ui-help-text {
|
|
3911
4717
|
color: var(--saas-text-muted);
|
|
3912
4718
|
font-size: .875rem;
|
|
@@ -3928,11 +4734,11 @@
|
|
|
3928
4734
|
}
|
|
3929
4735
|
|
|
3930
4736
|
.saas-check-control, .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio-control {
|
|
3931
|
-
background: var(--saas-
|
|
4737
|
+
background: var(--saas-control-bg);
|
|
3932
4738
|
border: 1px solid var(--saas-border);
|
|
3933
|
-
width:
|
|
3934
|
-
height:
|
|
3935
|
-
transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
4739
|
+
width: 1rem;
|
|
4740
|
+
height: 1rem;
|
|
4741
|
+
transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3936
4742
|
place-items: center;
|
|
3937
4743
|
display: inline-grid;
|
|
3938
4744
|
}
|
|
@@ -3948,22 +4754,23 @@
|
|
|
3948
4754
|
.saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control {
|
|
3949
4755
|
background: var(--saas-primary);
|
|
3950
4756
|
border-color: var(--saas-primary);
|
|
3951
|
-
box-shadow: var(--saas-
|
|
4757
|
+
box-shadow: 0 0 0 .16rem rgb(var(--saas-primary-rgb)/.18);
|
|
3952
4758
|
}
|
|
3953
4759
|
|
|
3954
4760
|
.saas-check input:checked + .saas-check-control:after, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control:after {
|
|
3955
4761
|
content: "✓";
|
|
3956
4762
|
color: var(--saas-on-primary);
|
|
3957
|
-
font-size: .
|
|
4763
|
+
font-size: .78rem;
|
|
3958
4764
|
font-weight: 900;
|
|
4765
|
+
line-height: 1;
|
|
3959
4766
|
}
|
|
3960
4767
|
|
|
3961
4768
|
.saas-radio input:checked + .saas-radio-control:after, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control:after {
|
|
3962
4769
|
content: "";
|
|
3963
4770
|
background: var(--saas-on-primary);
|
|
3964
4771
|
border-radius: 50%;
|
|
3965
|
-
width: .
|
|
3966
|
-
height: .
|
|
4772
|
+
width: .48rem;
|
|
4773
|
+
height: .48rem;
|
|
3967
4774
|
}
|
|
3968
4775
|
|
|
3969
4776
|
.saas-switch, :where([data-ui="minimal-saas"]) .ui-switch {
|
|
@@ -3984,8 +4791,8 @@
|
|
|
3984
4791
|
background: var(--saas-surface-soft);
|
|
3985
4792
|
border: 1px solid var(--saas-border);
|
|
3986
4793
|
border-radius: var(--saas-radius-pill);
|
|
3987
|
-
width:
|
|
3988
|
-
height: 1.
|
|
4794
|
+
width: 2.6rem;
|
|
4795
|
+
height: 1.3rem;
|
|
3989
4796
|
transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3990
4797
|
position: relative;
|
|
3991
4798
|
}
|
|
@@ -3993,14 +4800,14 @@
|
|
|
3993
4800
|
.saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
|
|
3994
4801
|
background: var(--saas-surface-strong);
|
|
3995
4802
|
border: 1px solid var(--saas-border);
|
|
3996
|
-
width:
|
|
3997
|
-
height:
|
|
3998
|
-
box-shadow: 0
|
|
4803
|
+
width: .9rem;
|
|
4804
|
+
height: .9rem;
|
|
4805
|
+
box-shadow: 0 1px 2px rgb(var(--saas-text-rgb)/.12);
|
|
3999
4806
|
transition: left var(--saas-transition-fast),background var(--saas-transition-fast);
|
|
4000
4807
|
border-radius: 50%;
|
|
4001
4808
|
position: absolute;
|
|
4002
|
-
top: .
|
|
4003
|
-
left: .
|
|
4809
|
+
top: .14rem;
|
|
4810
|
+
left: .14rem;
|
|
4004
4811
|
}
|
|
4005
4812
|
|
|
4006
4813
|
.saas-switch input:checked + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track {
|
|
@@ -4010,20 +4817,25 @@
|
|
|
4010
4817
|
|
|
4011
4818
|
.saas-switch input:checked + .saas-switch-track .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
|
|
4012
4819
|
background: var(--saas-on-primary);
|
|
4013
|
-
left: calc(100% - 1.
|
|
4820
|
+
left: calc(100% - 1.04rem);
|
|
4821
|
+
}
|
|
4822
|
+
|
|
4823
|
+
.saas-check input:focus-visible + .saas-check-control, .saas-radio input:focus-visible + .saas-radio-control, .saas-switch input:focus-visible + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-check input:focus-visible+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:focus-visible+.ui-radio-control, :where([data-ui="minimal-saas"]) .ui-switch input:focus-visible+.ui-switch-track {
|
|
4824
|
+
outline: 2px solid var(--saas-focus);
|
|
4825
|
+
outline-offset: 2px;
|
|
4014
4826
|
}
|
|
4015
4827
|
|
|
4016
4828
|
.saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
|
|
4017
4829
|
align-items: center;
|
|
4018
4830
|
gap: var(--saas-space-1);
|
|
4019
4831
|
background: var(--saas-surface-soft);
|
|
4020
|
-
min-height: 1.
|
|
4832
|
+
min-height: 1.4rem;
|
|
4021
4833
|
color: var(--saas-text);
|
|
4022
|
-
border:
|
|
4023
|
-
border
|
|
4024
|
-
padding: .
|
|
4025
|
-
font-size: .
|
|
4026
|
-
font-weight:
|
|
4834
|
+
border-radius: var(--saas-radius-sm);
|
|
4835
|
+
border: 1px solid #0000;
|
|
4836
|
+
padding: .25rem .5rem;
|
|
4837
|
+
font-size: .75rem;
|
|
4838
|
+
font-weight: 700;
|
|
4027
4839
|
line-height: 1;
|
|
4028
4840
|
display: inline-flex;
|
|
4029
4841
|
}
|
|
@@ -4035,50 +4847,51 @@
|
|
|
4035
4847
|
}
|
|
4036
4848
|
|
|
4037
4849
|
.saas-badge-secondary, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="secondary"]) {
|
|
4038
|
-
background: var(--saas-
|
|
4039
|
-
color: var(--saas-
|
|
4040
|
-
border-color:
|
|
4850
|
+
background: rgb(var(--saas-primary-rgb)/.1);
|
|
4851
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4852
|
+
border-color: #0000;
|
|
4041
4853
|
}
|
|
4042
4854
|
|
|
4043
4855
|
.saas-badge-success, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="success"]) {
|
|
4044
|
-
background: var(--saas-success);
|
|
4045
|
-
color: var(--saas-
|
|
4046
|
-
border-color: var(--saas-success);
|
|
4856
|
+
background: rgb(var(--saas-success-rgb)/.14);
|
|
4857
|
+
color: var(--saas-text);
|
|
4858
|
+
border-color: rgb(var(--saas-success-rgb)/.38);
|
|
4047
4859
|
}
|
|
4048
4860
|
|
|
4049
4861
|
.saas-badge-warning, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
4050
|
-
background: var(--saas-warning);
|
|
4051
|
-
color: var(--saas-
|
|
4052
|
-
border-color: var(--saas-warning);
|
|
4862
|
+
background: rgb(var(--saas-warning-rgb)/.14);
|
|
4863
|
+
color: var(--saas-text);
|
|
4864
|
+
border-color: rgb(var(--saas-warning-rgb)/.38);
|
|
4053
4865
|
}
|
|
4054
4866
|
|
|
4055
4867
|
.saas-badge-danger, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
4056
|
-
background: var(--saas-danger);
|
|
4057
|
-
color: var(--saas-
|
|
4058
|
-
border-color: var(--saas-danger);
|
|
4868
|
+
background: rgb(var(--saas-danger-rgb)/.14);
|
|
4869
|
+
color: var(--saas-text);
|
|
4870
|
+
border-color: rgb(var(--saas-danger-rgb)/.38);
|
|
4059
4871
|
}
|
|
4060
4872
|
|
|
4061
4873
|
.saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
|
|
4062
4874
|
align-items: center;
|
|
4063
|
-
gap: var(--saas-space-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4875
|
+
gap: var(--saas-space-1);
|
|
4876
|
+
border: 0;
|
|
4877
|
+
border-bottom: 1px solid var(--saas-border);
|
|
4878
|
+
box-shadow: none;
|
|
4879
|
+
background: none;
|
|
4880
|
+
border-radius: 0;
|
|
4069
4881
|
flex-wrap: wrap;
|
|
4882
|
+
padding: 0;
|
|
4070
4883
|
display: flex;
|
|
4071
4884
|
}
|
|
4072
4885
|
|
|
4073
4886
|
.saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
|
|
4074
|
-
min-height: 2.
|
|
4887
|
+
min-height: 2.125rem;
|
|
4075
4888
|
color: var(--saas-text-muted);
|
|
4076
|
-
border-radius: var(--saas-radius-
|
|
4889
|
+
border-radius: var(--saas-radius-md);
|
|
4077
4890
|
transition: color var(--saas-transition-fast),background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
4078
4891
|
justify-content: center;
|
|
4079
4892
|
align-items: center;
|
|
4080
|
-
padding: .
|
|
4081
|
-
font-weight:
|
|
4893
|
+
padding: .4rem .7rem;
|
|
4894
|
+
font-weight: 700;
|
|
4082
4895
|
text-decoration: none;
|
|
4083
4896
|
display: inline-flex;
|
|
4084
4897
|
}
|
|
@@ -4089,8 +4902,9 @@
|
|
|
4089
4902
|
}
|
|
4090
4903
|
|
|
4091
4904
|
.saas-nav-link[aria-current="page"], .saas-nav-link.is-active, :where([data-ui="minimal-saas"]) .ui-nav-link[aria-current="page"], :where([data-ui="minimal-saas"]) .ui-nav-link.is-active {
|
|
4092
|
-
color: var(--saas-
|
|
4093
|
-
|
|
4905
|
+
color: var(--saas-text);
|
|
4906
|
+
box-shadow: inset 0-2px 0 var(--saas-primary);
|
|
4907
|
+
background: none;
|
|
4094
4908
|
}
|
|
4095
4909
|
|
|
4096
4910
|
.saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
@@ -4121,50 +4935,39 @@
|
|
|
4121
4935
|
|
|
4122
4936
|
.saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
|
|
4123
4937
|
background: var(--saas-surface-soft);
|
|
4124
|
-
border: 1px solid var(--saas-border);
|
|
4125
4938
|
border-radius: var(--saas-radius-pill);
|
|
4939
|
+
border: 0 solid #0000;
|
|
4126
4940
|
width: 100%;
|
|
4127
|
-
height: .
|
|
4941
|
+
height: .3rem;
|
|
4128
4942
|
overflow: hidden;
|
|
4129
4943
|
}
|
|
4130
4944
|
|
|
4131
4945
|
.saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
|
|
4132
4946
|
height: 100%;
|
|
4133
4947
|
width: var(--saas-progress-value, 50%);
|
|
4134
|
-
background:
|
|
4948
|
+
background: var(--saas-primary);
|
|
4135
4949
|
border-radius: inherit;
|
|
4136
4950
|
}
|
|
4137
4951
|
|
|
4138
4952
|
.saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
|
|
4139
4953
|
gap: var(--saas-space-2);
|
|
4140
|
-
padding: var(--saas-space-
|
|
4141
|
-
background: var(--saas-
|
|
4954
|
+
padding: var(--saas-space-3);
|
|
4955
|
+
background: rgb(var(--saas-primary-rgb)/.065);
|
|
4142
4956
|
color: var(--saas-text);
|
|
4143
|
-
border: 1px solid var(--saas-
|
|
4957
|
+
border: 1px solid rgb(var(--saas-primary-rgb)/.28);
|
|
4144
4958
|
border-radius: var(--saas-radius-lg);
|
|
4145
|
-
box-shadow:
|
|
4959
|
+
box-shadow: none;
|
|
4146
4960
|
display: grid;
|
|
4147
4961
|
}
|
|
4148
4962
|
|
|
4149
|
-
.saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
4150
|
-
border-left-color: var(--saas-success);
|
|
4151
|
-
}
|
|
4152
|
-
|
|
4153
|
-
.saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
4154
|
-
border-left-color: var(--saas-warning);
|
|
4155
|
-
}
|
|
4156
|
-
|
|
4157
|
-
.saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
4158
|
-
border-left-color: var(--saas-danger);
|
|
4159
|
-
}
|
|
4160
|
-
|
|
4161
4963
|
.saas-alert-title, :where([data-ui="minimal-saas"]) .ui-alert-title {
|
|
4964
|
+
color: var(--saas-text);
|
|
4162
4965
|
margin: 0;
|
|
4163
4966
|
font-weight: 900;
|
|
4164
4967
|
}
|
|
4165
4968
|
|
|
4166
4969
|
.saas-alert-body, :where([data-ui="minimal-saas"]) .ui-alert-body {
|
|
4167
|
-
color: var(--saas-text
|
|
4970
|
+
color: var(--saas-text);
|
|
4168
4971
|
margin: 0;
|
|
4169
4972
|
line-height: 1.55;
|
|
4170
4973
|
}
|
|
@@ -4181,16 +4984,16 @@
|
|
|
4181
4984
|
.saas-table th, .saas-table td, :where([data-ui="minimal-saas"]) .ui-table th, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
4182
4985
|
text-align: left;
|
|
4183
4986
|
border-bottom: 1px solid var(--saas-border);
|
|
4184
|
-
padding: .
|
|
4987
|
+
padding: .68rem .75rem;
|
|
4185
4988
|
}
|
|
4186
4989
|
|
|
4187
4990
|
.saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
|
|
4188
4991
|
color: var(--saas-text);
|
|
4189
|
-
text-transform:
|
|
4190
|
-
letter-spacing:
|
|
4191
|
-
background: rgb(var(--saas-
|
|
4192
|
-
font-size: .
|
|
4193
|
-
font-weight:
|
|
4992
|
+
text-transform: none;
|
|
4993
|
+
letter-spacing: 0;
|
|
4994
|
+
background: rgb(var(--saas-surface-soft-rgb)/.52);
|
|
4995
|
+
font-size: .78rem;
|
|
4996
|
+
font-weight: 700;
|
|
4194
4997
|
}
|
|
4195
4998
|
|
|
4196
4999
|
.saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
@@ -4202,7 +5005,7 @@
|
|
|
4202
5005
|
}
|
|
4203
5006
|
|
|
4204
5007
|
.saas-text-primary {
|
|
4205
|
-
color: var(--saas-primary);
|
|
5008
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4206
5009
|
}
|
|
4207
5010
|
|
|
4208
5011
|
.saas-text-secondary {
|
|
@@ -4210,7 +5013,7 @@
|
|
|
4210
5013
|
}
|
|
4211
5014
|
|
|
4212
5015
|
.saas-text-accent {
|
|
4213
|
-
color: var(--saas-accent);
|
|
5016
|
+
color: var(--usk-accent-ink, var(--saas-accent));
|
|
4214
5017
|
}
|
|
4215
5018
|
|
|
4216
5019
|
.saas-text-success {
|
|
@@ -4435,7 +5238,7 @@
|
|
|
4435
5238
|
}
|
|
4436
5239
|
|
|
4437
5240
|
.saas-button.saas-button-outline-heavy, .saas-button-outline-heavy, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy {
|
|
4438
|
-
color: var(--saas-primary);
|
|
5241
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4439
5242
|
border-style: solid;
|
|
4440
5243
|
border-width: 2px;
|
|
4441
5244
|
border-color: var(--saas-primary);
|
|
@@ -4476,7 +5279,6 @@
|
|
|
4476
5279
|
border-radius: var(--saas-radius-lg);
|
|
4477
5280
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4478
5281
|
display: grid;
|
|
4479
|
-
overflow: hidden;
|
|
4480
5282
|
}
|
|
4481
5283
|
|
|
4482
5284
|
.saas-feature-item {
|
|
@@ -4519,7 +5321,7 @@
|
|
|
4519
5321
|
}
|
|
4520
5322
|
|
|
4521
5323
|
.saas-eyebrow {
|
|
4522
|
-
color: var(--saas-primary);
|
|
5324
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
4523
5325
|
font-family: var(--saas-font-heading);
|
|
4524
5326
|
letter-spacing: .14em;
|
|
4525
5327
|
text-transform: uppercase;
|
|
@@ -4582,19 +5384,24 @@
|
|
|
4582
5384
|
}
|
|
4583
5385
|
|
|
4584
5386
|
.saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
|
|
4585
|
-
box-shadow:
|
|
5387
|
+
box-shadow: var(--saas-shadow-md);
|
|
4586
5388
|
}
|
|
4587
5389
|
|
|
4588
5390
|
.saas-card-accent-edge {
|
|
4589
|
-
border-inline-start-width: .
|
|
5391
|
+
border-inline-start-width: .16rem;
|
|
4590
5392
|
}
|
|
4591
5393
|
|
|
4592
5394
|
.saas-icon-medallion {
|
|
4593
|
-
|
|
5395
|
+
background: var(--saas-surface-soft);
|
|
5396
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
5397
|
+
border: 1px solid var(--saas-border);
|
|
5398
|
+
border-radius: var(--saas-radius-lg);
|
|
5399
|
+
box-shadow: var(--saas-shadow-sm);
|
|
4594
5400
|
}
|
|
4595
5401
|
|
|
4596
5402
|
.saas-button.saas-button-cut, .saas-button-cut, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut {
|
|
4597
|
-
|
|
5403
|
+
min-height: 2.75rem;
|
|
5404
|
+
clip-path: polygon(0 0, calc(100% - .25rem) 0, 100% .25rem, 100% 100%, 0 100%);
|
|
4598
5405
|
justify-content: center;
|
|
4599
5406
|
justify-self: start;
|
|
4600
5407
|
min-inline-size: 6rem;
|
|
@@ -4602,30 +5409,48 @@
|
|
|
4602
5409
|
}
|
|
4603
5410
|
|
|
4604
5411
|
.saas-button.saas-button-outline-heavy, .saas-button-outline-heavy, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy {
|
|
4605
|
-
clip-path: polygon(0 0, calc(100% - .
|
|
4606
|
-
box-shadow:
|
|
5412
|
+
clip-path: polygon(0 0, calc(100% - .2rem) 0, 100% .2rem, 100% 100%, 0 100%);
|
|
5413
|
+
box-shadow: var(--saas-shadow-sm);
|
|
4607
5414
|
border-width: 1px;
|
|
4608
5415
|
border-radius: 0;
|
|
4609
5416
|
}
|
|
4610
5417
|
|
|
4611
5418
|
.saas-card-service, .saas-media-scrim, .saas-feature-strip, .saas-callout-bar, .saas-metric {
|
|
4612
5419
|
border: 1px solid var(--saas-border);
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
5420
|
+
box-shadow: var(--saas-shadow-md);
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
[data-ui="minimal-saas"][data-mode] :where(fieldset, article, aside) {
|
|
5424
|
+
background: var(--saas-surface);
|
|
5425
|
+
border: 1px solid var(--saas-border);
|
|
5426
|
+
border-radius: var(--saas-radius-lg);
|
|
5427
|
+
box-shadow: none;
|
|
4616
5428
|
}
|
|
4617
5429
|
|
|
4618
|
-
[data-ui="minimal-saas"][data-
|
|
4619
|
-
|
|
5430
|
+
[data-ui="minimal-saas"][data-mode] :where(legend) {
|
|
5431
|
+
font-weight: 750;
|
|
5432
|
+
}
|
|
5433
|
+
|
|
5434
|
+
[data-ui="minimal-saas"][data-mode] :where(label) {
|
|
5435
|
+
font-weight: 700;
|
|
5436
|
+
}
|
|
5437
|
+
|
|
5438
|
+
[data-ui="minimal-saas"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
5439
|
+
min-block-size: var(--usk-native-control-min-block-size);
|
|
5440
|
+
background: var(--saas-control-bg);
|
|
5441
|
+
color: var(--saas-text);
|
|
5442
|
+
border: 1px solid var(--saas-border);
|
|
4620
5443
|
border-radius: var(--saas-radius-md);
|
|
4621
|
-
box-shadow:
|
|
5444
|
+
box-shadow: var(--saas-shadow-sm);
|
|
5445
|
+
font-family: var(--saas-font-control);
|
|
5446
|
+
padding: .5rem .78rem;
|
|
5447
|
+
font-weight: 700;
|
|
4622
5448
|
}
|
|
4623
5449
|
|
|
4624
|
-
[data-ui="minimal-saas"][data-
|
|
5450
|
+
[data-ui="minimal-saas"][data-mode] :where(dialog) {
|
|
4625
5451
|
border: 1px solid var(--saas-border);
|
|
4626
5452
|
border-radius: var(--saas-radius-lg);
|
|
4627
|
-
box-shadow: 0
|
|
4628
|
-
border-inline-start-width: .22rem;
|
|
5453
|
+
box-shadow: 0 .75rem 2rem rgb(var(--saas-text-rgb)/.14);
|
|
4629
5454
|
}
|
|
4630
5455
|
|
|
4631
5456
|
.saas-button[aria-busy="true"]:after, .saas-icon-button[aria-busy="true"]:after, [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="minimal-saas"]) .ui-button[aria-busy="true"]:after, :where([data-ui="minimal-saas"]) .ui-icon-button[aria-busy="true"]:after {
|
|
@@ -4682,4 +5507,284 @@
|
|
|
4682
5507
|
color: #000 !important;
|
|
4683
5508
|
}
|
|
4684
5509
|
}
|
|
5510
|
+
|
|
5511
|
+
.saas-input[aria-invalid="true"], .saas-textarea[aria-invalid="true"], .saas-select[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-input[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-textarea[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-select[aria-invalid="true"] {
|
|
5512
|
+
border-color: var(--saas-danger);
|
|
5513
|
+
box-shadow: 0 0 0 2px rgb(var(--saas-danger-rgb)/.18);
|
|
5514
|
+
}
|
|
5515
|
+
|
|
5516
|
+
.saas-input[readonly], .saas-textarea[readonly], :where([data-ui="minimal-saas"]) .ui-input[readonly], :where([data-ui="minimal-saas"]) .ui-textarea[readonly] {
|
|
5517
|
+
filter: saturate(.72);
|
|
5518
|
+
opacity: .78;
|
|
5519
|
+
border-style: dashed;
|
|
5520
|
+
}
|
|
5521
|
+
|
|
5522
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
5523
|
+
--usk-native-control-min-block-size: 2rem;
|
|
5524
|
+
--usk-native-control-padding-block: .38rem;
|
|
5525
|
+
--usk-native-control-padding-inline: .65rem;
|
|
5526
|
+
--usk-native-radius-sm: .1875rem;
|
|
5527
|
+
--usk-native-radius: .375rem;
|
|
5528
|
+
--usk-native-radius-lg: .5rem;
|
|
5529
|
+
--usk-native-shadow: 0 1px 2px rgb(var(--saas-text-rgb) / .06);
|
|
5530
|
+
--usk-native-shadow-md: 0 2px 6px rgb(var(--saas-text-rgb) / .08);
|
|
5531
|
+
--usk-native-focus-ring: 0 0 0 2px rgb(var(--saas-focus-rgb) / .3);
|
|
5532
|
+
--usk-native-subcontrol-padding-block: .32rem;
|
|
5533
|
+
--usk-native-subcontrol-padding-inline: .52rem;
|
|
5534
|
+
--usk-native-choice-size: .95rem;
|
|
5535
|
+
--usk-native-choice-background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
5536
|
+
--usk-native-choice-border: 1px solid rgb(var(--saas-border-rgb) / .9);
|
|
5537
|
+
--usk-native-checkbox-radius: .1875rem;
|
|
5538
|
+
--usk-native-choice-shadow: none;
|
|
5539
|
+
--usk-native-select-indicator-size: .31rem .31rem, .31rem .31rem;
|
|
5540
|
+
--usk-native-select-indicator-position: calc(100% - .92rem) 50%, calc(100% - .68rem) 50%;
|
|
5541
|
+
--usk-native-select-padding-inline-end: 2.1rem;
|
|
5542
|
+
--usk-native-range-track-size: .28rem;
|
|
5543
|
+
--usk-native-range-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
|
|
5544
|
+
--usk-native-range-track-border: 1px solid rgb(var(--saas-border-rgb) / .55);
|
|
5545
|
+
--usk-native-range-track-shadow: none;
|
|
5546
|
+
--usk-native-range-thumb-size: .9rem;
|
|
5547
|
+
--usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
|
|
5548
|
+
--usk-native-range-thumb-shadow: 0 1px 3px rgb(var(--saas-text-rgb) / .14);
|
|
5549
|
+
--usk-native-progress-size: .28rem;
|
|
5550
|
+
--usk-native-progress-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
|
|
5551
|
+
--usk-native-progress-track-border: 1px solid rgb(var(--saas-border-rgb) / .5);
|
|
5552
|
+
--usk-native-progress-track-shadow: none;
|
|
5553
|
+
--usk-native-progress-value-shadow: none;
|
|
5554
|
+
--usk-native-scrollbar-size: .55rem;
|
|
5555
|
+
--usk-native-scrollbar-track: rgb(var(--saas-surface-soft-rgb) / .72);
|
|
5556
|
+
--usk-native-scrollbar-thumb: rgb(var(--saas-primary-rgb) / .72);
|
|
5557
|
+
--usk-native-scrollbar-radius: .125rem;
|
|
5558
|
+
}
|
|
5559
|
+
|
|
5560
|
+
[data-ui="minimal-saas"][data-mode] :where(select:not([multiple])) {
|
|
5561
|
+
appearance: none;
|
|
5562
|
+
}
|
|
5563
|
+
|
|
5564
|
+
[data-ui="minimal-saas"][data-mode] :where(select:not([multiple]))::picker-icon {
|
|
5565
|
+
display: none;
|
|
5566
|
+
}
|
|
5567
|
+
|
|
5568
|
+
.saas-title {
|
|
5569
|
+
letter-spacing: -.02em;
|
|
5570
|
+
margin: 0;
|
|
5571
|
+
font-size: 1.5rem;
|
|
5572
|
+
font-weight: 700;
|
|
5573
|
+
line-height: 1.05;
|
|
5574
|
+
}
|
|
5575
|
+
|
|
5576
|
+
.saas-label, :where([data-ui="minimal-saas"]) .ui-label {
|
|
5577
|
+
font-size: .8125rem;
|
|
5578
|
+
font-weight: 650;
|
|
5579
|
+
}
|
|
5580
|
+
|
|
5581
|
+
.saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
5582
|
+
background: var(--saas-control-bg);
|
|
5583
|
+
min-height: 2.125rem;
|
|
5584
|
+
box-shadow: none;
|
|
5585
|
+
border-radius: .375rem;
|
|
5586
|
+
padding: .45rem .75rem;
|
|
5587
|
+
font-weight: 650;
|
|
5588
|
+
}
|
|
5589
|
+
|
|
5590
|
+
.saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
5591
|
+
padding: 0;
|
|
5592
|
+
}
|
|
5593
|
+
|
|
5594
|
+
.saas-input, .saas-textarea, .saas-select, :where([data-ui="minimal-saas"]) .ui-input, :where([data-ui="minimal-saas"]) .ui-textarea, :where([data-ui="minimal-saas"]) .ui-select {
|
|
5595
|
+
min-height: 2rem;
|
|
5596
|
+
box-shadow: none;
|
|
5597
|
+
border-radius: .375rem;
|
|
5598
|
+
padding: .38rem .65rem;
|
|
5599
|
+
}
|
|
5600
|
+
|
|
5601
|
+
.saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-card, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap {
|
|
5602
|
+
background: var(--saas-surface);
|
|
5603
|
+
border: 1px solid var(--saas-border);
|
|
5604
|
+
box-shadow: var(--saas-shadow-md);
|
|
5605
|
+
border-radius: .5rem;
|
|
5606
|
+
}
|
|
5607
|
+
|
|
5608
|
+
.saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
|
|
5609
|
+
padding: 1rem;
|
|
5610
|
+
}
|
|
5611
|
+
|
|
5612
|
+
.saas-well, .saas-inset {
|
|
5613
|
+
background: rgb(var(--saas-surface-soft-rgb)/.72);
|
|
5614
|
+
border: 1px solid var(--saas-border);
|
|
5615
|
+
box-shadow: none;
|
|
5616
|
+
border-radius: .375rem;
|
|
5617
|
+
padding: .75rem;
|
|
5618
|
+
}
|
|
5619
|
+
|
|
5620
|
+
.saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
|
|
5621
|
+
border-radius: .25rem;
|
|
5622
|
+
min-height: 1.35rem;
|
|
5623
|
+
padding: .18rem .45rem;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
.saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
|
|
5627
|
+
background: var(--saas-surface);
|
|
5628
|
+
border: 1px solid var(--saas-border);
|
|
5629
|
+
border-inline-start: 1px solid var(--saas-primary);
|
|
5630
|
+
box-shadow: none;
|
|
5631
|
+
border-radius: .375rem;
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
.saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
|
|
5635
|
+
background: rgb(var(--saas-surface-soft-rgb)/.82);
|
|
5636
|
+
height: .3rem;
|
|
5637
|
+
}
|
|
5638
|
+
|
|
5639
|
+
.saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
|
|
5640
|
+
background: var(--saas-primary);
|
|
5641
|
+
box-shadow: none;
|
|
5642
|
+
}
|
|
5643
|
+
|
|
5644
|
+
.saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
|
|
5645
|
+
background: var(--saas-surface);
|
|
5646
|
+
box-shadow: none;
|
|
5647
|
+
border-radius: .5rem;
|
|
5648
|
+
}
|
|
5649
|
+
|
|
5650
|
+
.saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
|
|
5651
|
+
background: rgb(var(--saas-surface-soft-rgb)/.58);
|
|
5652
|
+
padding: .6rem .7rem;
|
|
5653
|
+
font-weight: 650;
|
|
5654
|
+
}
|
|
5655
|
+
|
|
5656
|
+
.saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
5657
|
+
padding: .6rem .7rem;
|
|
5658
|
+
}
|
|
5659
|
+
|
|
5660
|
+
.saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
|
|
5661
|
+
border: 0;
|
|
5662
|
+
border-bottom: 1px solid var(--saas-border);
|
|
5663
|
+
box-shadow: none;
|
|
5664
|
+
background: none;
|
|
5665
|
+
border-radius: 0;
|
|
5666
|
+
padding: 0;
|
|
5667
|
+
}
|
|
5668
|
+
|
|
5669
|
+
.saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
|
|
5670
|
+
border-radius: .25rem;
|
|
5671
|
+
min-height: 2.125rem;
|
|
5672
|
+
padding: .4rem .62rem;
|
|
5673
|
+
}
|
|
5674
|
+
|
|
5675
|
+
.saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5676
|
+
box-shadow: 0 2px 6px rgb(var(--saas-text-rgb)/.12);
|
|
5677
|
+
border-radius: .25rem;
|
|
5678
|
+
}
|
|
5679
|
+
|
|
5680
|
+
.saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
|
|
5681
|
+
background: var(--saas-surface);
|
|
5682
|
+
box-shadow: none;
|
|
5683
|
+
border-radius: .5rem;
|
|
5684
|
+
padding: 1rem;
|
|
5685
|
+
}
|
|
5686
|
+
|
|
5687
|
+
.saas-feature-item {
|
|
5688
|
+
padding: .75rem;
|
|
5689
|
+
}
|
|
5690
|
+
|
|
5691
|
+
[data-ui="minimal-saas"][data-mode] :where(dialog) {
|
|
5692
|
+
background: var(--saas-surface);
|
|
5693
|
+
box-shadow: 0 .5rem 1.25rem rgb(var(--saas-text-rgb)/.12);
|
|
5694
|
+
border-radius: .5rem;
|
|
5695
|
+
}
|
|
5696
|
+
|
|
5697
|
+
.saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
5698
|
+
background: rgb(var(--saas-success-rgb)/.12);
|
|
5699
|
+
border-color: rgb(var(--saas-success-rgb)/.58);
|
|
5700
|
+
}
|
|
5701
|
+
|
|
5702
|
+
.saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
5703
|
+
background: rgb(var(--saas-warning-rgb)/.12);
|
|
5704
|
+
border-color: rgb(var(--saas-warning-rgb)/.58);
|
|
5705
|
+
}
|
|
5706
|
+
|
|
5707
|
+
.saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
5708
|
+
background: rgb(var(--saas-danger-rgb)/.12);
|
|
5709
|
+
border-color: rgb(var(--saas-danger-rgb)/.58);
|
|
5710
|
+
}
|
|
5711
|
+
|
|
5712
|
+
.saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5713
|
+
background: linear-gradient(135deg,var(--saas-primary),var(--saas-brand-2));
|
|
5714
|
+
color: var(--saas-on-primary);
|
|
5715
|
+
border-color: var(--saas-primary);
|
|
5716
|
+
}
|
|
5717
|
+
|
|
5718
|
+
.saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5719
|
+
background: var(--saas-surface);
|
|
5720
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
5721
|
+
border-color: var(--saas-primary);
|
|
5722
|
+
}
|
|
5723
|
+
|
|
5724
|
+
.saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5725
|
+
background: var(--saas-danger);
|
|
5726
|
+
color: var(--saas-on-danger);
|
|
5727
|
+
border-color: var(--saas-danger);
|
|
5728
|
+
}
|
|
5729
|
+
|
|
5730
|
+
.saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5731
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
5732
|
+
background: none;
|
|
5733
|
+
border-color: #0000;
|
|
5734
|
+
}
|
|
5735
|
+
|
|
5736
|
+
@media (pointer: coarse) {
|
|
5737
|
+
[data-ui="minimal-saas"] :where(.saas-button, .saas-icon-button, .saas-input, .saas-select, .saas-nav-link), :where([data-ui="minimal-saas"]) :where(.ui-button,.ui-icon-button,.ui-input,.ui-select,.ui-nav-link) {
|
|
5738
|
+
min-block-size: 2.75rem;
|
|
5739
|
+
}
|
|
5740
|
+
}
|
|
5741
|
+
|
|
5742
|
+
.saas-card-service > .saas-icon-medallion, .saas-feature-item > .saas-icon-medallion {
|
|
5743
|
+
font-size: 1.5rem;
|
|
5744
|
+
line-height: 1;
|
|
5745
|
+
}
|
|
5746
|
+
|
|
5747
|
+
.saas-callout-bar > .saas-icon-medallion {
|
|
5748
|
+
min-block-size: 4.5rem;
|
|
5749
|
+
min-inline-size: 4.5rem;
|
|
5750
|
+
padding-block: .55rem .85rem;
|
|
5751
|
+
font-size: 2rem;
|
|
5752
|
+
font-weight: 800;
|
|
5753
|
+
line-height: 1;
|
|
5754
|
+
}
|
|
5755
|
+
|
|
5756
|
+
.saas-badge-seal > strong {
|
|
5757
|
+
font-size: 1.125rem;
|
|
5758
|
+
line-height: .9;
|
|
5759
|
+
}
|
|
5760
|
+
|
|
5761
|
+
.saas-badge-seal > small {
|
|
5762
|
+
font-size: .78rem;
|
|
5763
|
+
line-height: 1;
|
|
5764
|
+
}
|
|
5765
|
+
|
|
5766
|
+
[data-ui="minimal-saas"][data-mode] .saas-button.saas-button-warning, :where([data-ui="minimal-saas"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
5767
|
+
background: var(--saas-warning);
|
|
5768
|
+
color: var(--saas-on-warning);
|
|
5769
|
+
border-color: var(--saas-warning);
|
|
5770
|
+
text-shadow: none;
|
|
5771
|
+
}
|
|
5772
|
+
}
|
|
5773
|
+
|
|
5774
|
+
[data-ui="minimal-saas"][data-mode] .saas-title {
|
|
5775
|
+
letter-spacing: max(.03em, .5px);
|
|
5776
|
+
margin-block: max(.75rem, 12px);
|
|
5777
|
+
}
|
|
5778
|
+
|
|
5779
|
+
[data-ui="minimal-saas"][data-mode] .saas-feature-item > .saas-icon-medallion {
|
|
5780
|
+
font-size: 1.5rem;
|
|
5781
|
+
line-height: 1;
|
|
5782
|
+
}
|
|
5783
|
+
|
|
5784
|
+
[data-ui="minimal-saas"][data-mode] .saas-callout-bar > .saas-icon-medallion {
|
|
5785
|
+
min-block-size: 4.5rem;
|
|
5786
|
+
min-inline-size: 4.5rem;
|
|
5787
|
+
font-size: 2rem;
|
|
5788
|
+
font-weight: 800;
|
|
5789
|
+
line-height: 1;
|
|
4685
5790
|
}
|