ui-style-kit-css 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -2
- package/CONTRIBUTING.md +8 -1
- package/README.md +91 -42
- package/STYLE-MAP.md +9 -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 +47483 -15117
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +47344 -15106
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +47510 -15134
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +2821 -279
- package/dist/visual/bauhaus.css +2 -4692
- package/dist/visual/bento.css +2 -4708
- package/dist/visual/brutalism.css +812 -224
- package/dist/visual/clay.css +2 -4786
- package/dist/visual/cyberpunk.css +2238 -267
- package/dist/visual/data-terminal.css +1671 -293
- package/dist/visual/editorial-luxe.css +1889 -243
- package/dist/visual/industrial-utility.css +2717 -255
- package/dist/visual/maximalist.css +1768 -447
- package/dist/visual/minimal-saas.css +1076 -382
- package/dist/visual/neo-noir.css +2 -4787
- package/dist/visual/neumorphism.css +1266 -388
- package/dist/visual/organic-modern.css +2 -4764
- package/dist/visual/paper-editorial.css +2551 -276
- package/dist/visual/retro-glass.css +2235 -319
- package/dist/visual/retrofuturism.css +1460 -382
- package/dist/visual/tactile.css +2251 -443
- package/dist/visual/technical-blueprint.css +2207 -285
- package/dist/visual/y2k.css +1481 -294
- 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/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/RETRO-GLASS.md +105 -0
- package/docs/STYLE-GUIDE.md +40 -25
- 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 +618 -27
- package/package.json +18 -10
- package/styles/art-deco.css +1397 -12
- 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 +878 -107
- package/styles/bento.css +1176 -108
- package/styles/brutalism.css +262 -11
- package/styles/clay.css +1303 -68
- package/styles/compat-layout.css +1 -2
- package/styles/components.css +105 -34
- package/styles/content-overflow.css +11 -5
- package/styles/cyberpunk.css +1852 -47
- package/styles/data-terminal.css +1116 -12
- package/styles/editorial-luxe.css +576 -12
- package/styles/industrial-utility.css +1771 -12
- package/styles/interactive-surface-bridge.css +30 -20
- package/styles/interactive-surface-theme.css +21 -11
- package/styles/maximalist.css +1214 -132
- package/styles/minimal-saas.css +459 -88
- package/styles/native-elements.css +347 -171
- package/styles/neo-noir.css +656 -14
- package/styles/neumorphism.css +1018 -146
- package/styles/organic-modern.css +688 -18
- package/styles/paper-editorial.css +1048 -12
- package/styles/retro-glass.css +635 -46
- package/styles/retrofuturism.css +944 -56
- package/styles/tactile.css +1810 -108
- package/styles/technical-blueprint.css +668 -17
- package/styles/theme-colors.css +2 -2
- package/styles/y2k.css +950 -42
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* UI Style Kit CSS v2.
|
|
2
|
+
* UI Style Kit CSS v2.4.0
|
|
3
3
|
* CSS theme and UI style preset library.
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
|
|
15
15
|
@layer ui-style-kit.theme_colors {
|
|
16
16
|
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
|
|
17
|
-
:where([data-ui][data-
|
|
17
|
+
:where([data-ui][data-mode="light"]) {
|
|
18
18
|
--usk-border-text-mix: 45%;
|
|
19
19
|
--usk-border-min-alpha: 1;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
:where([data-ui][data-
|
|
22
|
+
:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
|
|
23
23
|
--usk-border-text-mix: 0%;
|
|
24
24
|
--usk-border-min-alpha: 0;
|
|
25
25
|
}
|
|
@@ -1597,7 +1597,8 @@
|
|
|
1597
1597
|
========================================================= */
|
|
1598
1598
|
|
|
1599
1599
|
@layer ui-style-kit.native_elements {
|
|
1600
|
-
[data-ui][data-
|
|
1600
|
+
[data-ui][data-mode] {
|
|
1601
|
+
--usk-native-bg: rgb(var(--usk-bg-rgb));
|
|
1601
1602
|
--usk-native-surface: rgb(var(--usk-surface-rgb));
|
|
1602
1603
|
--usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
|
|
1603
1604
|
--usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
|
|
@@ -1634,6 +1635,52 @@
|
|
|
1634
1635
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
1635
1636
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
1636
1637
|
--usk-native-indicator: var(--usk-native-primary);
|
|
1638
|
+
--usk-native-choice-size: 1.5rem;
|
|
1639
|
+
--usk-native-choice-background: var(--usk-native-control-bg);
|
|
1640
|
+
--usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
1641
|
+
--usk-native-checkbox-radius: .3rem;
|
|
1642
|
+
--usk-native-radio-radius: 50%;
|
|
1643
|
+
--usk-native-choice-shadow: none;
|
|
1644
|
+
--usk-native-choice-checked-background: var(--usk-native-primary);
|
|
1645
|
+
--usk-native-choice-mark-color: var(--usk-native-on-primary);
|
|
1646
|
+
--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%);
|
|
1647
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
1648
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
|
|
1649
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
1650
|
+
--usk-native-range-track-size: .45rem;
|
|
1651
|
+
--usk-native-range-track-background: var(--usk-native-track);
|
|
1652
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
1653
|
+
--usk-native-range-track-radius: 999px;
|
|
1654
|
+
--usk-native-range-track-shadow: none;
|
|
1655
|
+
--usk-native-range-progress-background: var(--usk-native-track-fill);
|
|
1656
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
1657
|
+
--usk-native-range-thumb-background: var(--usk-native-thumb);
|
|
1658
|
+
--usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
|
|
1659
|
+
--usk-native-range-thumb-radius: 50%;
|
|
1660
|
+
--usk-native-range-thumb-shadow: var(--usk-native-shadow);
|
|
1661
|
+
--usk-native-progress-size: .9rem;
|
|
1662
|
+
--usk-native-progress-track-background: var(--usk-native-track);
|
|
1663
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
1664
|
+
--usk-native-progress-track-radius: 999px;
|
|
1665
|
+
--usk-native-progress-track-shadow: none;
|
|
1666
|
+
--usk-native-progress-value-background: var(--usk-native-track-fill);
|
|
1667
|
+
--usk-native-progress-value-radius: inherit;
|
|
1668
|
+
--usk-native-progress-value-shadow: none;
|
|
1669
|
+
--usk-native-meter-optimum-background: var(--usk-native-success);
|
|
1670
|
+
--usk-native-meter-suboptimum-background: var(--usk-native-warning);
|
|
1671
|
+
--usk-native-meter-critical-background: var(--usk-native-danger);
|
|
1672
|
+
--usk-native-file-button-background: var(--usk-native-primary);
|
|
1673
|
+
--usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
1674
|
+
--usk-native-file-button-radius: var(--usk-native-radius-sm);
|
|
1675
|
+
--usk-native-file-button-shadow: var(--usk-native-shadow);
|
|
1676
|
+
--usk-native-color-swatch-border: 0 solid transparent;
|
|
1677
|
+
--usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
|
|
1678
|
+
--usk-native-indicator-opacity: .78;
|
|
1679
|
+
--usk-native-indicator-filter: none;
|
|
1680
|
+
--usk-native-scrollbar-size: .75rem;
|
|
1681
|
+
--usk-native-scrollbar-track: var(--usk-native-track);
|
|
1682
|
+
--usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
|
|
1683
|
+
--usk-native-scrollbar-radius: 999px;
|
|
1637
1684
|
--usk-native-shadow: none;
|
|
1638
1685
|
--usk-native-shadow-md: var(--usk-native-shadow);
|
|
1639
1686
|
--usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
|
|
@@ -1641,7 +1688,7 @@
|
|
|
1641
1688
|
--usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
|
|
1642
1689
|
|
|
1643
1690
|
/* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
|
|
1644
|
-
--ui-color-bg:
|
|
1691
|
+
--ui-color-bg: var(--usk-native-bg);
|
|
1645
1692
|
--ui-color-surface: var(--usk-native-surface-strong);
|
|
1646
1693
|
--ui-color-text: var(--usk-native-text);
|
|
1647
1694
|
--ui-color-muted: var(--usk-native-text-muted);
|
|
@@ -1655,7 +1702,7 @@
|
|
|
1655
1702
|
--ui-motion-easing: var(--usk-motion-easing);
|
|
1656
1703
|
}
|
|
1657
1704
|
|
|
1658
|
-
[data-ui][data-
|
|
1705
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
|
|
1659
1706
|
color: var(--usk-native-text);
|
|
1660
1707
|
font-family: var(--usk-native-font-heading);
|
|
1661
1708
|
line-height: 1.15;
|
|
@@ -1663,42 +1710,42 @@
|
|
|
1663
1710
|
}
|
|
1664
1711
|
|
|
1665
1712
|
@supports (text-wrap: balance) {
|
|
1666
|
-
[data-ui][data-
|
|
1713
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
1667
1714
|
}
|
|
1668
1715
|
|
|
1669
|
-
[data-ui][data-
|
|
1716
|
+
[data-ui][data-mode] :where(hgroup) {
|
|
1670
1717
|
display: grid;
|
|
1671
1718
|
gap: .35rem;
|
|
1672
1719
|
margin-block: 0 1rem;
|
|
1673
1720
|
}
|
|
1674
1721
|
|
|
1675
|
-
[data-ui][data-
|
|
1676
|
-
[data-ui][data-
|
|
1677
|
-
[data-ui][data-
|
|
1722
|
+
[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
1723
|
+
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
1724
|
+
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
1678
1725
|
|
|
1679
|
-
[data-ui][data-
|
|
1726
|
+
[data-ui][data-mode] :where(p) {
|
|
1680
1727
|
margin: 0 0 1rem;
|
|
1681
1728
|
color: var(--usk-native-text-muted);
|
|
1682
1729
|
line-height: 1.7;
|
|
1683
1730
|
}
|
|
1684
1731
|
|
|
1685
|
-
[data-ui][data-
|
|
1732
|
+
[data-ui][data-mode] :where(a) {
|
|
1686
1733
|
color: var(--usk-native-link);
|
|
1687
1734
|
text-decoration-thickness: .08em;
|
|
1688
1735
|
text-underline-offset: .18em;
|
|
1689
1736
|
}
|
|
1690
1737
|
|
|
1691
|
-
[data-ui][data-
|
|
1738
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
|
|
1692
1739
|
|
|
1693
|
-
[data-ui][data-
|
|
1740
|
+
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
1694
1741
|
margin: 0 0 1rem;
|
|
1695
1742
|
padding-left: 1.35rem;
|
|
1696
1743
|
color: var(--usk-native-text-muted);
|
|
1697
1744
|
}
|
|
1698
1745
|
|
|
1699
|
-
[data-ui][data-
|
|
1746
|
+
[data-ui][data-mode] :where(li) { margin-block: .25rem; }
|
|
1700
1747
|
|
|
1701
|
-
[data-ui][data-
|
|
1748
|
+
[data-ui][data-mode] :where(blockquote) {
|
|
1702
1749
|
margin: 1.25rem 0;
|
|
1703
1750
|
padding: 1rem 1.25rem;
|
|
1704
1751
|
color: var(--usk-native-text);
|
|
@@ -1707,7 +1754,7 @@
|
|
|
1707
1754
|
border-radius: var(--usk-native-radius);
|
|
1708
1755
|
}
|
|
1709
1756
|
|
|
1710
|
-
[data-ui][data-
|
|
1757
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
1711
1758
|
padding: .15em .35em;
|
|
1712
1759
|
color: var(--usk-native-text);
|
|
1713
1760
|
background: var(--usk-native-surface-soft);
|
|
@@ -1717,7 +1764,7 @@
|
|
|
1717
1764
|
font-size: .92em;
|
|
1718
1765
|
}
|
|
1719
1766
|
|
|
1720
|
-
[data-ui][data-
|
|
1767
|
+
[data-ui][data-mode] :where(pre) {
|
|
1721
1768
|
overflow: auto;
|
|
1722
1769
|
margin: 1rem 0;
|
|
1723
1770
|
padding: 1rem;
|
|
@@ -1727,57 +1774,88 @@
|
|
|
1727
1774
|
border-radius: var(--usk-native-radius);
|
|
1728
1775
|
}
|
|
1729
1776
|
|
|
1730
|
-
[data-ui][data-
|
|
1777
|
+
[data-ui][data-mode] :where(pre code) {
|
|
1731
1778
|
display: block;
|
|
1732
1779
|
padding: 0;
|
|
1733
1780
|
background: transparent;
|
|
1734
1781
|
border: 0;
|
|
1735
1782
|
}
|
|
1736
1783
|
|
|
1737
|
-
[data-ui][data-
|
|
1784
|
+
[data-ui][data-mode] :where(hr) {
|
|
1738
1785
|
height: 1px;
|
|
1739
1786
|
margin: 2rem 0;
|
|
1740
1787
|
background: var(--usk-native-border);
|
|
1741
1788
|
border: 0;
|
|
1742
1789
|
}
|
|
1743
1790
|
|
|
1744
|
-
[data-ui][data-
|
|
1791
|
+
[data-ui][data-mode] :where(mark) {
|
|
1745
1792
|
padding-inline: .15em;
|
|
1746
1793
|
color: var(--usk-native-text);
|
|
1747
1794
|
background: rgb(var(--usk-warning-rgb) / .32);
|
|
1748
1795
|
border-radius: .2em;
|
|
1749
1796
|
}
|
|
1750
1797
|
|
|
1751
|
-
[data-ui][data-
|
|
1752
|
-
[data-ui][data-
|
|
1798
|
+
[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
|
|
1799
|
+
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
|
|
1753
1800
|
|
|
1754
|
-
[data-ui][data-
|
|
1801
|
+
[data-ui][data-mode] :where(abbr[title]) {
|
|
1755
1802
|
text-decoration: underline dotted var(--usk-native-primary);
|
|
1756
1803
|
text-underline-offset: .18em;
|
|
1757
1804
|
cursor: help;
|
|
1758
1805
|
}
|
|
1759
1806
|
|
|
1760
|
-
[data-ui][data-
|
|
1807
|
+
[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
|
|
1761
1808
|
max-width: 100%;
|
|
1762
1809
|
}
|
|
1763
1810
|
|
|
1764
|
-
[data-ui][data-
|
|
1811
|
+
[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
|
|
1765
1812
|
|
|
1766
|
-
|
|
1813
|
+
/** Native playback retains browser accessibility while inheriting preset material and geometry. */
|
|
1814
|
+
[data-ui][data-mode] audio[controls] {
|
|
1815
|
+
display: block;
|
|
1816
|
+
box-sizing: border-box;
|
|
1817
|
+
inline-size: 100%;
|
|
1818
|
+
min-inline-size: 0;
|
|
1819
|
+
block-size: 60px;
|
|
1820
|
+
padding: 3px;
|
|
1821
|
+
background: var(--usk-native-control-bg);
|
|
1822
|
+
color: var(--usk-native-text);
|
|
1823
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
1824
|
+
border-radius: var(--usk-native-radius);
|
|
1825
|
+
box-shadow: var(--usk-native-shadow);
|
|
1826
|
+
accent-color: var(--usk-native-primary);
|
|
1827
|
+
color-scheme: light;
|
|
1828
|
+
}
|
|
1829
|
+
[data-ui][data-mode="dark"] audio[controls],
|
|
1830
|
+
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
|
|
1831
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
|
|
1832
|
+
border-radius: var(--usk-native-radius);
|
|
1833
|
+
background: transparent;
|
|
1834
|
+
}
|
|
1835
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
|
|
1836
|
+
background: var(--usk-native-control-bg);
|
|
1837
|
+
color: var(--usk-native-text);
|
|
1838
|
+
}
|
|
1839
|
+
[data-ui][data-mode] audio[controls]:focus-visible {
|
|
1840
|
+
outline: 2px solid var(--usk-native-focus);
|
|
1841
|
+
outline-offset: 2px;
|
|
1842
|
+
}
|
|
1767
1843
|
|
|
1768
|
-
[data-ui][data-
|
|
1844
|
+
[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
|
|
1845
|
+
|
|
1846
|
+
[data-ui][data-mode] :where(figcaption) {
|
|
1769
1847
|
margin-top: .5rem;
|
|
1770
1848
|
color: var(--usk-native-text-muted);
|
|
1771
1849
|
font-size: .9rem;
|
|
1772
1850
|
}
|
|
1773
1851
|
|
|
1774
|
-
[data-ui][data-
|
|
1852
|
+
[data-ui][data-mode] :where(form) {
|
|
1775
1853
|
display: grid;
|
|
1776
1854
|
gap: var(--usk-native-field-gap);
|
|
1777
1855
|
min-inline-size: 0;
|
|
1778
1856
|
}
|
|
1779
1857
|
|
|
1780
|
-
[data-ui][data-
|
|
1858
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
1781
1859
|
display: grid;
|
|
1782
1860
|
gap: .9rem;
|
|
1783
1861
|
min-inline-size: 0;
|
|
@@ -1788,30 +1866,30 @@
|
|
|
1788
1866
|
border-radius: var(--usk-native-radius);
|
|
1789
1867
|
}
|
|
1790
1868
|
|
|
1791
|
-
[data-ui][data-
|
|
1869
|
+
[data-ui][data-mode] :where(legend) {
|
|
1792
1870
|
padding-inline: .35rem;
|
|
1793
1871
|
color: var(--usk-native-text);
|
|
1794
1872
|
font-weight: 900;
|
|
1795
1873
|
}
|
|
1796
1874
|
|
|
1797
|
-
[data-ui][data-
|
|
1875
|
+
[data-ui][data-mode] :where(label) {
|
|
1798
1876
|
color: var(--usk-native-text);
|
|
1799
1877
|
font-weight: 750;
|
|
1800
1878
|
}
|
|
1801
1879
|
|
|
1802
|
-
[data-ui][data-
|
|
1880
|
+
[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
|
|
1803
1881
|
display: grid;
|
|
1804
1882
|
gap: var(--usk-native-field-gap);
|
|
1805
1883
|
align-content: start;
|
|
1806
1884
|
}
|
|
1807
1885
|
|
|
1808
|
-
[data-ui][data-
|
|
1886
|
+
[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
|
|
1809
1887
|
display: inline-flex;
|
|
1810
1888
|
gap: var(--usk-native-field-gap);
|
|
1811
1889
|
align-items: center;
|
|
1812
1890
|
}
|
|
1813
1891
|
|
|
1814
|
-
[data-ui][data-
|
|
1892
|
+
[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
1893
|
width: 100%;
|
|
1816
1894
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
1817
1895
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -1822,24 +1900,44 @@
|
|
|
1822
1900
|
font: inherit;
|
|
1823
1901
|
}
|
|
1824
1902
|
|
|
1825
|
-
[data-ui][data-
|
|
1903
|
+
[data-ui][data-mode] :where(input, textarea, select, button) {
|
|
1826
1904
|
color-scheme: inherit;
|
|
1827
1905
|
accent-color: var(--usk-native-primary);
|
|
1828
1906
|
}
|
|
1829
1907
|
|
|
1830
|
-
[data-ui][data-
|
|
1908
|
+
[data-ui][data-mode] :where(input, textarea)::placeholder {
|
|
1831
1909
|
color: var(--usk-native-text-muted);
|
|
1832
1910
|
opacity: .78;
|
|
1833
1911
|
}
|
|
1834
1912
|
|
|
1835
|
-
[data-ui][data-
|
|
1913
|
+
[data-ui][data-mode] :where(textarea) {
|
|
1836
1914
|
min-height: 7rem;
|
|
1837
1915
|
resize: vertical;
|
|
1838
1916
|
}
|
|
1839
1917
|
|
|
1840
|
-
[data-ui][data-
|
|
1918
|
+
[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
1919
|
+
|
|
1920
|
+
[data-ui][data-mode] :where(select:not([multiple])) {
|
|
1921
|
+
-webkit-appearance: none;
|
|
1922
|
+
appearance: none;
|
|
1923
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
1924
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
1925
|
+
background-repeat: no-repeat;
|
|
1926
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
1927
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1930
|
+
[data-ui][data-mode] :where(select[multiple]) {
|
|
1931
|
+
padding-inline-end: var(--usk-native-control-padding-inline);
|
|
1932
|
+
background-image: none;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
|
|
1936
|
+
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
|
|
1937
|
+
--usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
|
|
1938
|
+
}
|
|
1841
1939
|
|
|
1842
|
-
[data-ui][data-
|
|
1940
|
+
[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
1843
1941
|
-webkit-appearance: none;
|
|
1844
1942
|
appearance: none;
|
|
1845
1943
|
box-sizing: border-box;
|
|
@@ -1848,7 +1946,7 @@
|
|
|
1848
1946
|
font: inherit;
|
|
1849
1947
|
}
|
|
1850
1948
|
|
|
1851
|
-
[data-ui][data-
|
|
1949
|
+
[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
1852
1950
|
color: var(--usk-native-on-primary);
|
|
1853
1951
|
background: var(--usk-native-primary);
|
|
1854
1952
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -1859,29 +1957,56 @@
|
|
|
1859
1957
|
}
|
|
1860
1958
|
|
|
1861
1959
|
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
1862
|
-
[data-ui][data-
|
|
1960
|
+
[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
1961
|
display: inline-flex;
|
|
1864
1962
|
align-items: center;
|
|
1865
1963
|
justify-content: center;
|
|
1866
1964
|
gap: .55rem;
|
|
1867
1965
|
}
|
|
1868
1966
|
|
|
1869
|
-
[data-ui][data-
|
|
1967
|
+
[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
1968
|
flex: 0 0 1em;
|
|
1871
1969
|
}
|
|
1872
1970
|
|
|
1873
|
-
[data-ui][data-
|
|
1971
|
+
[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
1972
|
background: var(--usk-native-primary-hover);
|
|
1875
1973
|
border-color: var(--usk-native-primary-hover);
|
|
1876
1974
|
}
|
|
1877
1975
|
|
|
1878
|
-
[data-ui][data-
|
|
1879
|
-
|
|
1880
|
-
|
|
1976
|
+
[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
1977
|
+
-webkit-appearance: none;
|
|
1978
|
+
appearance: none;
|
|
1979
|
+
inline-size: var(--usk-native-choice-size);
|
|
1980
|
+
block-size: var(--usk-native-choice-size);
|
|
1981
|
+
background: var(--usk-native-choice-background);
|
|
1982
|
+
border: var(--usk-native-choice-border);
|
|
1983
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
1881
1984
|
accent-color: var(--usk-native-primary);
|
|
1882
1985
|
}
|
|
1883
1986
|
|
|
1884
|
-
[data-ui][data-
|
|
1987
|
+
[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
|
|
1988
|
+
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
|
|
1989
|
+
|
|
1990
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
|
|
1991
|
+
background-color: var(--usk-native-choice-checked-background);
|
|
1992
|
+
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%);
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
|
|
1996
|
+
border-color: var(--usk-native-primary);
|
|
1997
|
+
filter: brightness(1.04);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
|
|
2001
|
+
filter: brightness(.94);
|
|
2002
|
+
transform: scale(.94);
|
|
2003
|
+
}
|
|
2004
|
+
|
|
2005
|
+
[data-ui][data-mode] :where(input[type="radio"]:checked) {
|
|
2006
|
+
background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
|
|
2007
|
+
}
|
|
2008
|
+
|
|
2009
|
+
[data-ui][data-mode] :where(input[type="range"]) {
|
|
1885
2010
|
-webkit-appearance: none;
|
|
1886
2011
|
appearance: none;
|
|
1887
2012
|
width: 100%;
|
|
@@ -1890,40 +2015,50 @@
|
|
|
1890
2015
|
accent-color: var(--usk-native-primary);
|
|
1891
2016
|
}
|
|
1892
2017
|
|
|
1893
|
-
[data-ui][data-
|
|
1894
|
-
block-size:
|
|
1895
|
-
background: var(--usk-native-track);
|
|
1896
|
-
border
|
|
2018
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
2019
|
+
block-size: var(--usk-native-range-track-size);
|
|
2020
|
+
background: var(--usk-native-range-track-background);
|
|
2021
|
+
border: var(--usk-native-range-track-border);
|
|
2022
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2023
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
1897
2024
|
}
|
|
1898
2025
|
|
|
1899
|
-
[data-ui][data-
|
|
1900
|
-
block-size:
|
|
1901
|
-
background: var(--usk-native-track);
|
|
1902
|
-
border
|
|
2026
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
2027
|
+
block-size: var(--usk-native-range-track-size);
|
|
2028
|
+
background: var(--usk-native-range-track-background);
|
|
2029
|
+
border: var(--usk-native-range-track-border);
|
|
2030
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2031
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
2032
|
+
}
|
|
2033
|
+
|
|
2034
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
|
|
2035
|
+
block-size: var(--usk-native-range-track-size);
|
|
2036
|
+
background: var(--usk-native-range-progress-background);
|
|
2037
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
1903
2038
|
}
|
|
1904
2039
|
|
|
1905
|
-
[data-ui][data-
|
|
2040
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
1906
2041
|
-webkit-appearance: none;
|
|
1907
2042
|
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);
|
|
2043
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2044
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2045
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
|
|
2046
|
+
background: var(--usk-native-range-thumb-background);
|
|
2047
|
+
border: var(--usk-native-range-thumb-border);
|
|
2048
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2049
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1915
2050
|
}
|
|
1916
2051
|
|
|
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);
|
|
2052
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
2053
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2054
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2055
|
+
background: var(--usk-native-range-thumb-background);
|
|
2056
|
+
border: var(--usk-native-range-thumb-border);
|
|
2057
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2058
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1924
2059
|
}
|
|
1925
2060
|
|
|
1926
|
-
[data-ui][data-
|
|
2061
|
+
[data-ui][data-mode] :where(input[type="color"]) {
|
|
1927
2062
|
inline-size: 3rem;
|
|
1928
2063
|
block-size: 2.4rem;
|
|
1929
2064
|
padding: .2rem;
|
|
@@ -1932,84 +2067,86 @@
|
|
|
1932
2067
|
border-radius: var(--usk-native-radius-sm);
|
|
1933
2068
|
}
|
|
1934
2069
|
|
|
1935
|
-
[data-ui][data-
|
|
2070
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
|
|
1936
2071
|
padding: 0;
|
|
1937
2072
|
}
|
|
1938
2073
|
|
|
1939
|
-
[data-ui][data-
|
|
1940
|
-
border:
|
|
1941
|
-
border-radius:
|
|
2074
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
|
|
2075
|
+
border: var(--usk-native-color-swatch-border);
|
|
2076
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1942
2077
|
}
|
|
1943
2078
|
|
|
1944
|
-
[data-ui][data-
|
|
1945
|
-
border:
|
|
1946
|
-
border-radius:
|
|
2079
|
+
[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
|
|
2080
|
+
border: var(--usk-native-color-swatch-border);
|
|
2081
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1947
2082
|
}
|
|
1948
2083
|
|
|
1949
|
-
[data-ui][data-
|
|
2084
|
+
[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
|
|
1950
2085
|
|
|
1951
2086
|
/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
|
|
1952
|
-
[data-ui][data-
|
|
1953
|
-
[data-ui][data-
|
|
2087
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2088
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
1954
2089
|
margin-inline-end: .75rem;
|
|
1955
2090
|
padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
|
|
1956
2091
|
color: var(--usk-native-on-primary);
|
|
1957
|
-
background: var(--usk-native-
|
|
1958
|
-
border: var(--usk-native-
|
|
1959
|
-
border-radius: var(--usk-native-radius
|
|
2092
|
+
background: var(--usk-native-file-button-background);
|
|
2093
|
+
border: var(--usk-native-file-button-border);
|
|
2094
|
+
border-radius: var(--usk-native-file-button-radius);
|
|
2095
|
+
box-shadow: var(--usk-native-file-button-shadow);
|
|
1960
2096
|
font-weight: 800;
|
|
1961
2097
|
cursor: pointer;
|
|
1962
2098
|
}
|
|
1963
2099
|
|
|
1964
|
-
[data-ui][data-
|
|
1965
|
-
[data-ui][data-
|
|
2100
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
|
|
2101
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
|
|
1966
2102
|
background: var(--usk-native-primary-hover);
|
|
1967
2103
|
border-color: var(--usk-native-primary-hover);
|
|
1968
2104
|
}
|
|
1969
2105
|
|
|
1970
|
-
[data-ui][data-
|
|
1971
|
-
[data-ui][data-
|
|
2106
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
|
|
2107
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
|
|
1972
2108
|
box-shadow: var(--usk-native-focus-ring);
|
|
1973
2109
|
}
|
|
1974
2110
|
|
|
1975
|
-
[data-ui][data-
|
|
1976
|
-
[data-ui][data-
|
|
2111
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
|
|
2112
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
|
|
1977
2113
|
filter: brightness(.96);
|
|
1978
2114
|
}
|
|
1979
2115
|
|
|
1980
|
-
[data-ui][data-
|
|
1981
|
-
[data-ui][data-
|
|
2116
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
|
|
2117
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
|
|
1982
2118
|
color: var(--usk-native-text-muted);
|
|
1983
2119
|
background: var(--usk-native-surface-soft);
|
|
1984
2120
|
border-color: var(--usk-native-border);
|
|
1985
2121
|
cursor: not-allowed;
|
|
1986
2122
|
}
|
|
1987
2123
|
|
|
1988
|
-
[data-ui][data-
|
|
2124
|
+
[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
2125
|
background: var(--usk-native-surface-soft);
|
|
1990
2126
|
}
|
|
1991
2127
|
|
|
1992
|
-
[data-ui][data-
|
|
2128
|
+
[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
|
|
1993
2129
|
box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
|
|
1994
2130
|
}
|
|
1995
2131
|
|
|
1996
|
-
[data-ui][data-
|
|
2132
|
+
[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
|
|
1997
2133
|
border-color: var(--usk-native-success);
|
|
1998
2134
|
}
|
|
1999
2135
|
|
|
2000
|
-
[data-ui][data-
|
|
2136
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2001
2137
|
border-color: var(--usk-native-danger);
|
|
2002
2138
|
}
|
|
2003
2139
|
|
|
2004
|
-
[data-ui][data-
|
|
2140
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
|
|
2141
|
+
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
2142
|
accent-color: var(--usk-native-warning);
|
|
2006
2143
|
}
|
|
2007
2144
|
|
|
2008
|
-
[data-ui][data-
|
|
2145
|
+
[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
|
|
2009
2146
|
filter: brightness(.96);
|
|
2010
2147
|
}
|
|
2011
2148
|
|
|
2012
|
-
[data-ui][data-
|
|
2149
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2013
2150
|
color: var(--usk-native-text-muted);
|
|
2014
2151
|
background: var(--usk-native-surface-soft);
|
|
2015
2152
|
border-color: var(--usk-native-border);
|
|
@@ -2018,37 +2155,36 @@
|
|
|
2018
2155
|
cursor: not-allowed;
|
|
2019
2156
|
}
|
|
2020
2157
|
|
|
2021
|
-
[data-ui][data-
|
|
2158
|
+
[data-ui][data-mode] :where(table) {
|
|
2022
2159
|
width: 100%;
|
|
2023
2160
|
margin: 1rem 0;
|
|
2024
|
-
overflow: hidden;
|
|
2025
2161
|
background: var(--usk-native-surface);
|
|
2026
2162
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2027
2163
|
border-radius: var(--usk-native-radius);
|
|
2028
2164
|
border-collapse: collapse;
|
|
2029
2165
|
}
|
|
2030
2166
|
|
|
2031
|
-
[data-ui][data-
|
|
2167
|
+
[data-ui][data-mode] :where(caption) {
|
|
2032
2168
|
caption-side: bottom;
|
|
2033
2169
|
padding: .75rem;
|
|
2034
2170
|
color: var(--usk-native-text-muted);
|
|
2035
2171
|
font-size: .9rem;
|
|
2036
2172
|
}
|
|
2037
2173
|
|
|
2038
|
-
[data-ui][data-
|
|
2174
|
+
[data-ui][data-mode] :where(th, td) {
|
|
2039
2175
|
padding: .8rem .9rem;
|
|
2040
2176
|
text-align: left;
|
|
2041
2177
|
border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2042
2178
|
}
|
|
2043
2179
|
|
|
2044
|
-
[data-ui][data-
|
|
2180
|
+
[data-ui][data-mode] :where(th) {
|
|
2045
2181
|
color: var(--usk-native-text);
|
|
2046
2182
|
background: var(--usk-native-surface-soft);
|
|
2047
2183
|
}
|
|
2048
2184
|
|
|
2049
|
-
[data-ui][data-
|
|
2185
|
+
[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
2050
2186
|
|
|
2051
|
-
[data-ui][data-
|
|
2187
|
+
[data-ui][data-mode] :where(details) {
|
|
2052
2188
|
margin: 1rem 0;
|
|
2053
2189
|
padding: .9rem 1rem;
|
|
2054
2190
|
color: var(--usk-native-text);
|
|
@@ -2057,13 +2193,13 @@
|
|
|
2057
2193
|
border-radius: var(--usk-native-radius);
|
|
2058
2194
|
}
|
|
2059
2195
|
|
|
2060
|
-
[data-ui][data-
|
|
2196
|
+
[data-ui][data-mode] :where(summary) {
|
|
2061
2197
|
color: var(--usk-native-text);
|
|
2062
2198
|
font-weight: 900;
|
|
2063
2199
|
cursor: pointer;
|
|
2064
2200
|
}
|
|
2065
2201
|
|
|
2066
|
-
[data-ui][data-
|
|
2202
|
+
[data-ui][data-mode] :where(dialog) {
|
|
2067
2203
|
max-width: min(92vw, 42rem);
|
|
2068
2204
|
padding: 0;
|
|
2069
2205
|
color: var(--usk-native-text);
|
|
@@ -2073,47 +2209,68 @@
|
|
|
2073
2209
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
2074
2210
|
}
|
|
2075
2211
|
|
|
2076
|
-
[data-ui][data-
|
|
2212
|
+
[data-ui][data-mode] :where(dialog p) { color: inherit; }
|
|
2077
2213
|
|
|
2078
|
-
[data-ui][data-
|
|
2214
|
+
[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
2079
2215
|
|
|
2080
|
-
[data-ui][data-
|
|
2216
|
+
[data-ui][data-mode] :where(progress, meter) {
|
|
2217
|
+
-webkit-appearance: none;
|
|
2218
|
+
appearance: none;
|
|
2081
2219
|
width: 100%;
|
|
2082
|
-
min-height:
|
|
2220
|
+
min-height: var(--usk-native-progress-size);
|
|
2083
2221
|
accent-color: var(--usk-native-primary);
|
|
2084
2222
|
}
|
|
2085
2223
|
|
|
2086
|
-
[data-ui][data-
|
|
2087
|
-
|
|
2088
|
-
background:
|
|
2089
|
-
border
|
|
2224
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2225
|
+
background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
|
|
2226
|
+
background-size: 200% 100%;
|
|
2227
|
+
border: var(--usk-native-progress-track-border);
|
|
2228
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2229
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2230
|
+
animation: usk-native-progress-indeterminate 1.2s linear infinite;
|
|
2090
2231
|
}
|
|
2091
2232
|
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
background: var(--usk-native-track-fill);
|
|
2095
|
-
border-radius: inherit;
|
|
2233
|
+
@keyframes usk-native-progress-indeterminate {
|
|
2234
|
+
to { background-position: -2rem 0; }
|
|
2096
2235
|
}
|
|
2097
2236
|
|
|
2098
|
-
[data-ui][data-
|
|
2099
|
-
[data-ui][data-
|
|
2100
|
-
background: var(--usk-native-track-
|
|
2101
|
-
border
|
|
2237
|
+
[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
|
|
2238
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
|
|
2239
|
+
background: var(--usk-native-progress-track-background);
|
|
2240
|
+
border: var(--usk-native-progress-track-border);
|
|
2241
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2242
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
[data-ui][data-mode] :where(progress)::-webkit-progress-value,
|
|
2246
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
|
|
2247
|
+
background: var(--usk-native-progress-value-background);
|
|
2248
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2249
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2102
2250
|
}
|
|
2103
2251
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
2252
|
+
[data-ui][data-mode] :where(progress)::-moz-progress-bar,
|
|
2253
|
+
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
|
|
2254
|
+
background: var(--usk-native-progress-value-background);
|
|
2255
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2256
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2106
2257
|
}
|
|
2107
2258
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
|
|
2259
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
|
|
2260
|
+
|
|
2261
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
|
|
2262
|
+
background: var(--usk-native-meter-suboptimum-background);
|
|
2110
2263
|
}
|
|
2111
2264
|
|
|
2112
|
-
[data-ui][data-
|
|
2265
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
|
|
2266
|
+
background: var(--usk-native-meter-critical-background);
|
|
2267
|
+
}
|
|
2268
|
+
|
|
2269
|
+
[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
|
|
2113
2270
|
color: var(--usk-native-text);
|
|
2114
2271
|
}
|
|
2115
2272
|
|
|
2116
|
-
[data-ui][data-
|
|
2273
|
+
[data-ui][data-mode] :where(article, aside) {
|
|
2117
2274
|
padding: var(--usk-native-panel-padding);
|
|
2118
2275
|
color: var(--usk-native-text);
|
|
2119
2276
|
background: var(--usk-native-card-bg);
|
|
@@ -2122,113 +2279,132 @@
|
|
|
2122
2279
|
box-shadow: var(--usk-native-shadow);
|
|
2123
2280
|
}
|
|
2124
2281
|
|
|
2125
|
-
[data-ui][data-
|
|
2282
|
+
[data-ui][data-mode] :where(dl) {
|
|
2126
2283
|
margin: 0 0 1rem;
|
|
2127
2284
|
color: var(--usk-native-text-muted);
|
|
2128
2285
|
}
|
|
2129
2286
|
|
|
2130
|
-
[data-ui][data-
|
|
2287
|
+
[data-ui][data-mode] :where(dt) {
|
|
2131
2288
|
color: var(--usk-native-text);
|
|
2132
2289
|
font-weight: 900;
|
|
2133
2290
|
}
|
|
2134
2291
|
|
|
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-
|
|
2292
|
+
[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
|
|
2293
|
+
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
|
|
2294
|
+
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
2295
|
+
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
|
|
2296
|
+
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
|
|
2297
|
+
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
|
|
2298
|
+
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
|
|
2299
|
+
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
|
|
2300
|
+
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
|
|
2301
|
+
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
|
|
2302
|
+
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
|
|
2303
|
+
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
|
|
2304
|
+
[data-ui][data-mode] :where(datalist) { display: none; }
|
|
2305
|
+
|
|
2306
|
+
[data-ui][data-mode] :where(summary, li)::marker {
|
|
2150
2307
|
color: var(--usk-native-indicator);
|
|
2151
2308
|
}
|
|
2152
2309
|
|
|
2153
|
-
[data-ui][data-
|
|
2154
|
-
opacity:
|
|
2310
|
+
[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 {
|
|
2311
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2312
|
+
filter: var(--usk-native-indicator-filter);
|
|
2155
2313
|
accent-color: var(--usk-native-indicator);
|
|
2156
2314
|
}
|
|
2157
2315
|
|
|
2158
|
-
[data-ui][data-
|
|
2316
|
+
[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
|
|
2159
2317
|
accent-color: var(--usk-native-indicator);
|
|
2160
2318
|
}
|
|
2161
2319
|
|
|
2162
|
-
[data-ui][data-
|
|
2163
|
-
[data-ui][data-
|
|
2320
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
|
|
2321
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
|
|
2164
2322
|
opacity: .72;
|
|
2165
2323
|
}
|
|
2166
2324
|
|
|
2167
|
-
[data-ui][data-
|
|
2325
|
+
[data-ui][data-mode] :where(select)::picker-icon {
|
|
2168
2326
|
color: var(--usk-native-indicator);
|
|
2327
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2328
|
+
filter: var(--usk-native-indicator-filter);
|
|
2169
2329
|
}
|
|
2170
2330
|
|
|
2171
|
-
[data-ui][data-
|
|
2331
|
+
[data-ui][data-mode] :where(:focus-visible) {
|
|
2172
2332
|
outline: 3px solid var(--usk-native-focus);
|
|
2173
2333
|
outline-offset: 3px;
|
|
2174
2334
|
box-shadow: var(--usk-native-focus-ring);
|
|
2175
2335
|
}
|
|
2176
2336
|
|
|
2177
|
-
[data-ui][data-
|
|
2337
|
+
[data-ui][data-mode] :where(:target) {
|
|
2178
2338
|
scroll-margin-top: 6rem;
|
|
2179
2339
|
outline: 3px solid var(--usk-native-focus);
|
|
2180
2340
|
outline-offset: .35rem;
|
|
2181
2341
|
}
|
|
2182
2342
|
|
|
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-
|
|
2343
|
+
[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
|
|
2344
|
+
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
|
|
2345
|
+
[data-ui][data-mode] :where([hidden]) { display: none !important; }
|
|
2346
|
+
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
|
|
2347
|
+
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
|
|
2348
|
+
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
|
|
2349
|
+
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
|
|
2190
2350
|
|
|
2191
2351
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
2192
|
-
[data-ui][data-
|
|
2352
|
+
[data-ui][data-mode] {
|
|
2193
2353
|
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
2194
2354
|
}
|
|
2195
2355
|
|
|
2196
|
-
[data-ui][data-
|
|
2356
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
2197
2357
|
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
2198
2358
|
}
|
|
2199
2359
|
|
|
2200
|
-
[data-ui][data-
|
|
2360
|
+
[data-ui][data-mode] :where(mark) {
|
|
2201
2361
|
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
2202
2362
|
}
|
|
2203
2363
|
|
|
2204
|
-
[data-ui][data-
|
|
2364
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
2205
2365
|
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
2206
2366
|
}
|
|
2207
2367
|
|
|
2208
|
-
[data-ui][data-
|
|
2368
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2209
2369
|
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
2210
2370
|
}
|
|
2211
2371
|
|
|
2212
|
-
[data-ui][data-
|
|
2372
|
+
[data-ui][data-mode] :where(th) {
|
|
2213
2373
|
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
2214
2374
|
}
|
|
2215
2375
|
}
|
|
2216
2376
|
|
|
2217
2377
|
@media (prefers-reduced-motion: reduce) {
|
|
2218
|
-
[data-ui][data-
|
|
2219
|
-
[data-ui][data-
|
|
2378
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2379
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
2220
2380
|
transition-duration: 1ms !important;
|
|
2221
2381
|
}
|
|
2382
|
+
|
|
2383
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2384
|
+
animation: none;
|
|
2385
|
+
}
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2388
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
|
|
2389
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
|
|
2390
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
|
|
2391
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
|
|
2392
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
|
|
2393
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
|
|
2394
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
|
|
2395
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
|
|
2396
|
+
box-shadow: none;
|
|
2397
|
+
filter: none;
|
|
2222
2398
|
}
|
|
2223
2399
|
|
|
2224
2400
|
@media (forced-colors: active) {
|
|
2225
2401
|
@supports (forced-color-adjust: auto) {
|
|
2226
|
-
[data-ui][data-
|
|
2402
|
+
[data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
2227
2403
|
forced-color-adjust: auto;
|
|
2228
2404
|
}
|
|
2229
2405
|
}
|
|
2230
2406
|
|
|
2231
|
-
[data-ui][data-
|
|
2407
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2232
2408
|
border-color: Mark;
|
|
2233
2409
|
}
|
|
2234
2410
|
}
|
|
@@ -2244,7 +2420,7 @@
|
|
|
2244
2420
|
========================================================= */
|
|
2245
2421
|
|
|
2246
2422
|
@layer ui-style-kit.components {
|
|
2247
|
-
[data-ui][data-
|
|
2423
|
+
[data-ui][data-mode] :where(
|
|
2248
2424
|
h1,
|
|
2249
2425
|
h2,
|
|
2250
2426
|
h3,
|
|
@@ -2261,6 +2437,9 @@
|
|
|
2261
2437
|
label,
|
|
2262
2438
|
legend,
|
|
2263
2439
|
summary,
|
|
2440
|
+
strong,
|
|
2441
|
+
small,
|
|
2442
|
+
em,
|
|
2264
2443
|
code,
|
|
2265
2444
|
kbd,
|
|
2266
2445
|
samp,
|
|
@@ -2270,10 +2449,11 @@
|
|
|
2270
2449
|
) {
|
|
2271
2450
|
max-inline-size: 100%;
|
|
2272
2451
|
min-inline-size: 0;
|
|
2273
|
-
overflow-wrap:
|
|
2452
|
+
overflow-wrap: break-word;
|
|
2453
|
+
word-break: normal;
|
|
2274
2454
|
}
|
|
2275
2455
|
|
|
2276
|
-
[data-ui][data-
|
|
2456
|
+
[data-ui][data-mode] :where(
|
|
2277
2457
|
[class~="saas-surface"],
|
|
2278
2458
|
[class~="saas-surface-sm"],
|
|
2279
2459
|
[class~="saas-surface-lg"],
|
|
@@ -2395,13 +2575,12 @@
|
|
|
2395
2575
|
[class~="rg-alert"],
|
|
2396
2576
|
[class~="rg-table-wrap"],
|
|
2397
2577
|
[class~="rg-nav"]
|
|
2398
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
2578
|
+
), [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
2579
|
max-inline-size: 100%;
|
|
2400
2580
|
min-inline-size: 0;
|
|
2401
|
-
overflow-wrap: anywhere;
|
|
2402
2581
|
}
|
|
2403
2582
|
|
|
2404
|
-
[data-ui][data-
|
|
2583
|
+
[data-ui][data-mode] :where(
|
|
2405
2584
|
[class~="saas-button"],
|
|
2406
2585
|
[class~="saas-icon-button"],
|
|
2407
2586
|
[class~="saas-badge"],
|
|
@@ -2446,13 +2625,15 @@
|
|
|
2446
2625
|
[class~="rg-icon-button"],
|
|
2447
2626
|
[class~="rg-badge"],
|
|
2448
2627
|
[class~="rg-nav-link"]
|
|
2449
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
2628
|
+
), [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
2629
|
max-inline-size: 100%;
|
|
2451
2630
|
min-inline-size: 0;
|
|
2631
|
+
overflow-wrap: break-word;
|
|
2632
|
+
word-break: normal;
|
|
2452
2633
|
white-space: normal;
|
|
2453
2634
|
}
|
|
2454
2635
|
|
|
2455
|
-
[data-ui][data-
|
|
2636
|
+
[data-ui][data-mode] :where(
|
|
2456
2637
|
.saas-button,
|
|
2457
2638
|
.saas-icon-button,
|
|
2458
2639
|
.saas-button-pill,
|
|
@@ -2486,7 +2667,7 @@
|
|
|
2486
2667
|
.rg-button,
|
|
2487
2668
|
.rg-icon-button,
|
|
2488
2669
|
.rg-button-pill
|
|
2489
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
2670
|
+
), [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
2671
|
box-sizing: border-box;
|
|
2491
2672
|
display: inline-flex;
|
|
2492
2673
|
align-items: center;
|
|
@@ -2498,7 +2679,7 @@
|
|
|
2498
2679
|
vertical-align: middle;
|
|
2499
2680
|
}
|
|
2500
2681
|
|
|
2501
|
-
[data-ui][data-
|
|
2682
|
+
[data-ui][data-mode] :where(
|
|
2502
2683
|
.saas-button-pill,
|
|
2503
2684
|
.bento-button-pill,
|
|
2504
2685
|
.max-button-pill,
|
|
@@ -2521,7 +2702,8 @@
|
|
|
2521
2702
|
font-weight: 850;
|
|
2522
2703
|
text-align: center;
|
|
2523
2704
|
text-decoration: none;
|
|
2524
|
-
overflow-wrap:
|
|
2705
|
+
overflow-wrap: break-word;
|
|
2706
|
+
word-break: normal;
|
|
2525
2707
|
white-space: normal;
|
|
2526
2708
|
cursor: pointer;
|
|
2527
2709
|
transition:
|
|
@@ -2555,7 +2737,7 @@
|
|
|
2555
2737
|
.y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
|
|
2556
2738
|
.rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
|
|
2557
2739
|
|
|
2558
|
-
[data-ui][data-
|
|
2740
|
+
[data-ui][data-mode] :where(
|
|
2559
2741
|
.saas-button-pill:active,
|
|
2560
2742
|
.saas-button-pill[aria-pressed="true"],
|
|
2561
2743
|
.bento-button-pill:active,
|
|
@@ -2594,7 +2776,7 @@
|
|
|
2594
2776
|
.y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
|
|
2595
2777
|
.rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
|
|
2596
2778
|
|
|
2597
|
-
[data-ui][data-
|
|
2779
|
+
[data-ui][data-mode] :where(
|
|
2598
2780
|
.saas-button-pill:disabled,
|
|
2599
2781
|
.saas-button-pill[aria-disabled="true"],
|
|
2600
2782
|
.bento-button-pill:disabled,
|
|
@@ -2624,7 +2806,7 @@
|
|
|
2624
2806
|
transform: none;
|
|
2625
2807
|
}
|
|
2626
2808
|
|
|
2627
|
-
[data-ui][data-
|
|
2809
|
+
[data-ui][data-mode] :where(
|
|
2628
2810
|
.saas-tooltip,
|
|
2629
2811
|
.saas-tooltip-top,
|
|
2630
2812
|
.saas-tooltip-right,
|
|
@@ -2683,16 +2865,17 @@
|
|
|
2683
2865
|
) {
|
|
2684
2866
|
max-inline-size: min(18rem, calc(100vw - 2rem));
|
|
2685
2867
|
text-align: start;
|
|
2686
|
-
overflow-wrap:
|
|
2868
|
+
overflow-wrap: break-word;
|
|
2869
|
+
word-break: normal;
|
|
2687
2870
|
}
|
|
2688
2871
|
|
|
2689
2872
|
/* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
|
|
2690
|
-
[data-ui][data-
|
|
2691
|
-
[data-ui][data-
|
|
2873
|
+
[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
|
|
2874
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
|
|
2692
2875
|
position: relative;
|
|
2693
2876
|
}
|
|
2694
2877
|
|
|
2695
|
-
[data-ui][data-
|
|
2878
|
+
[data-ui][data-mode] :where(
|
|
2696
2879
|
[data-ui-tooltip-anchor] > .saas-tooltip-top,
|
|
2697
2880
|
[data-ui-tooltip-anchor] > .saas-tooltip-right,
|
|
2698
2881
|
[data-ui-tooltip-anchor] > .saas-tooltip-bottom,
|
|
@@ -2742,10 +2925,10 @@
|
|
|
2742
2925
|
z-index: 20;
|
|
2743
2926
|
}
|
|
2744
2927
|
|
|
2745
|
-
[data-ui][data-
|
|
2746
|
-
[data-ui][data-
|
|
2747
|
-
[data-ui][data-
|
|
2748
|
-
[data-ui][data-
|
|
2928
|
+
[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%); }
|
|
2929
|
+
[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%); }
|
|
2930
|
+
[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%); }
|
|
2931
|
+
[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
2932
|
|
|
2750
2933
|
.saas-pill { border-radius: var(--saas-radius-pill); }
|
|
2751
2934
|
.bento-pill { border-radius: var(--bento-radius-pill); }
|
|
@@ -2895,10 +3078,72 @@
|
|
|
2895
3078
|
}
|
|
2896
3079
|
}
|
|
2897
3080
|
|
|
3081
|
+
/**
|
|
3082
|
+
* Normalizes the split-line trust seal hierarchy across every visual preset.
|
|
3083
|
+
* Both lines inherit their seal's paired foreground instead of native page-text paint.
|
|
3084
|
+
* The root attributes intentionally raise specificity within the preset layer
|
|
3085
|
+
* so later style-specific defaults cannot collapse the number and caption.
|
|
3086
|
+
*/
|
|
3087
|
+
@layer ui-style-kit.presets {
|
|
3088
|
+
[data-ui][data-mode] :where(
|
|
3089
|
+
.saas-badge-seal,
|
|
3090
|
+
.bento-badge-seal,
|
|
3091
|
+
.max-badge-seal,
|
|
3092
|
+
.bau-badge-seal,
|
|
3093
|
+
.tactile-badge-seal,
|
|
3094
|
+
.neo-badge-seal,
|
|
3095
|
+
.retro-badge-seal,
|
|
3096
|
+
.brutal-badge-seal,
|
|
3097
|
+
.cyber-badge-seal,
|
|
3098
|
+
.y2k-badge-seal,
|
|
3099
|
+
.rg-badge-seal,
|
|
3100
|
+
.luxe-badge-seal,
|
|
3101
|
+
.organic-badge-seal,
|
|
3102
|
+
.utility-badge-seal,
|
|
3103
|
+
.blueprint-badge-seal,
|
|
3104
|
+
.deco-badge-seal,
|
|
3105
|
+
.clay-badge-seal,
|
|
3106
|
+
.terminal-badge-seal,
|
|
3107
|
+
.paper-badge-seal,
|
|
3108
|
+
.noir-badge-seal
|
|
3109
|
+
) > strong {
|
|
3110
|
+
color: inherit;
|
|
3111
|
+
font-size: 1.5rem;
|
|
3112
|
+
line-height: .9;
|
|
3113
|
+
}
|
|
3114
|
+
|
|
3115
|
+
[data-ui][data-mode] :where(
|
|
3116
|
+
.saas-badge-seal,
|
|
3117
|
+
.bento-badge-seal,
|
|
3118
|
+
.max-badge-seal,
|
|
3119
|
+
.bau-badge-seal,
|
|
3120
|
+
.tactile-badge-seal,
|
|
3121
|
+
.neo-badge-seal,
|
|
3122
|
+
.retro-badge-seal,
|
|
3123
|
+
.brutal-badge-seal,
|
|
3124
|
+
.cyber-badge-seal,
|
|
3125
|
+
.y2k-badge-seal,
|
|
3126
|
+
.rg-badge-seal,
|
|
3127
|
+
.luxe-badge-seal,
|
|
3128
|
+
.organic-badge-seal,
|
|
3129
|
+
.utility-badge-seal,
|
|
3130
|
+
.blueprint-badge-seal,
|
|
3131
|
+
.deco-badge-seal,
|
|
3132
|
+
.clay-badge-seal,
|
|
3133
|
+
.terminal-badge-seal,
|
|
3134
|
+
.paper-badge-seal,
|
|
3135
|
+
.noir-badge-seal
|
|
3136
|
+
) > small {
|
|
3137
|
+
color: inherit;
|
|
3138
|
+
font-size: .8125rem;
|
|
3139
|
+
line-height: 1;
|
|
3140
|
+
}
|
|
3141
|
+
}
|
|
3142
|
+
|
|
2898
3143
|
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
2899
3144
|
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
2900
3145
|
@layer ui-style-kit.components {
|
|
2901
|
-
[data-ui][data-
|
|
3146
|
+
[data-ui][data-mode] :where(
|
|
2902
3147
|
.luxe-surface,
|
|
2903
3148
|
.luxe-surface-sm,
|
|
2904
3149
|
.luxe-surface-lg,
|
|
@@ -3061,13 +3306,12 @@
|
|
|
3061
3306
|
.noir-feature-item,
|
|
3062
3307
|
.noir-callout-bar,
|
|
3063
3308
|
.noir-media-scrim
|
|
3064
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
3309
|
+
), [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
3310
|
max-inline-size: 100%;
|
|
3066
3311
|
min-inline-size: 0;
|
|
3067
|
-
overflow-wrap: anywhere;
|
|
3068
3312
|
}
|
|
3069
3313
|
|
|
3070
|
-
[data-ui][data-
|
|
3314
|
+
[data-ui][data-mode] :where(
|
|
3071
3315
|
.luxe-button,
|
|
3072
3316
|
.luxe-icon-button,
|
|
3073
3317
|
.luxe-button-cut,
|
|
@@ -3140,13 +3384,15 @@
|
|
|
3140
3384
|
.noir-badge-seal,
|
|
3141
3385
|
.noir-nav-link,
|
|
3142
3386
|
.noir-icon-medallion
|
|
3143
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
3387
|
+
), [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
3388
|
max-inline-size: 100%;
|
|
3145
3389
|
min-inline-size: 0;
|
|
3390
|
+
overflow-wrap: break-word;
|
|
3391
|
+
word-break: normal;
|
|
3146
3392
|
white-space: normal;
|
|
3147
3393
|
}
|
|
3148
3394
|
|
|
3149
|
-
[data-ui][data-
|
|
3395
|
+
[data-ui][data-mode] :where(
|
|
3150
3396
|
.luxe-button,
|
|
3151
3397
|
.luxe-icon-button,
|
|
3152
3398
|
.luxe-button-pill,
|
|
@@ -3174,7 +3420,7 @@
|
|
|
3174
3420
|
.noir-button,
|
|
3175
3421
|
.noir-icon-button,
|
|
3176
3422
|
.noir-button-pill
|
|
3177
|
-
), [data-ui]:where([data-ui="minimal-saas"])[data-
|
|
3423
|
+
), [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
3424
|
box-sizing: border-box;
|
|
3179
3425
|
display: inline-flex;
|
|
3180
3426
|
align-items: center;
|
|
@@ -3186,7 +3432,7 @@
|
|
|
3186
3432
|
vertical-align: middle;
|
|
3187
3433
|
}
|
|
3188
3434
|
|
|
3189
|
-
[data-ui][data-
|
|
3435
|
+
[data-ui][data-mode] :where(
|
|
3190
3436
|
.luxe-button-pill,
|
|
3191
3437
|
.organic-button-pill,
|
|
3192
3438
|
.utility-button-pill,
|
|
@@ -3207,7 +3453,8 @@
|
|
|
3207
3453
|
font-weight: 850;
|
|
3208
3454
|
text-align: center;
|
|
3209
3455
|
text-decoration: none;
|
|
3210
|
-
overflow-wrap:
|
|
3456
|
+
overflow-wrap: break-word;
|
|
3457
|
+
word-break: normal;
|
|
3211
3458
|
white-space: normal;
|
|
3212
3459
|
cursor: pointer;
|
|
3213
3460
|
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
|
@@ -3294,7 +3541,7 @@
|
|
|
3294
3541
|
.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
|
|
3295
3542
|
.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
|
|
3296
3543
|
|
|
3297
|
-
[data-ui][data-
|
|
3544
|
+
[data-ui][data-mode] :where(
|
|
3298
3545
|
.luxe-button-pill:active,
|
|
3299
3546
|
.luxe-button-pill[aria-pressed="true"],
|
|
3300
3547
|
.organic-button-pill:active,
|
|
@@ -3315,7 +3562,7 @@
|
|
|
3315
3562
|
.noir-button-pill[aria-pressed="true"]
|
|
3316
3563
|
) { transform: translateY(1px); }
|
|
3317
3564
|
|
|
3318
|
-
[data-ui][data-
|
|
3565
|
+
[data-ui][data-mode] :where(
|
|
3319
3566
|
.luxe-button-pill:disabled,
|
|
3320
3567
|
.luxe-button-pill[aria-disabled="true"],
|
|
3321
3568
|
.organic-button-pill:disabled,
|
|
@@ -3336,7 +3583,7 @@
|
|
|
3336
3583
|
.noir-button-pill[aria-disabled="true"]
|
|
3337
3584
|
) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
|
|
3338
3585
|
|
|
3339
|
-
[data-ui][data-
|
|
3586
|
+
[data-ui][data-mode] :where(
|
|
3340
3587
|
.luxe-tooltip,
|
|
3341
3588
|
.luxe-tooltip-top,
|
|
3342
3589
|
.luxe-tooltip-right,
|
|
@@ -3382,9 +3629,9 @@
|
|
|
3382
3629
|
.noir-tooltip-right,
|
|
3383
3630
|
.noir-tooltip-bottom,
|
|
3384
3631
|
.noir-tooltip-left
|
|
3385
|
-
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap:
|
|
3632
|
+
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
|
|
3386
3633
|
|
|
3387
|
-
[data-ui][data-
|
|
3634
|
+
[data-ui][data-mode] :where(
|
|
3388
3635
|
[data-ui-tooltip-anchor] > .luxe-tooltip-top,
|
|
3389
3636
|
[data-ui-tooltip-anchor] > .luxe-tooltip-right,
|
|
3390
3637
|
[data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
|
|
@@ -3423,10 +3670,10 @@
|
|
|
3423
3670
|
[data-ui-tooltip-anchor] > .noir-tooltip-left
|
|
3424
3671
|
) { position: absolute; z-index: 20; }
|
|
3425
3672
|
|
|
3426
|
-
[data-ui][data-
|
|
3427
|
-
[data-ui][data-
|
|
3428
|
-
[data-ui][data-
|
|
3429
|
-
[data-ui][data-
|
|
3673
|
+
[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%); }
|
|
3674
|
+
[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%); }
|
|
3675
|
+
[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%); }
|
|
3676
|
+
[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
3677
|
|
|
3431
3678
|
: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
3679
|
: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); }
|
|
@@ -3512,11 +3759,11 @@
|
|
|
3512
3759
|
--saas-font-heading: var(--saas-font-display);
|
|
3513
3760
|
--saas-font-control: var(--saas-font-display);
|
|
3514
3761
|
--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:
|
|
3762
|
+
--saas-radius-xs: .1875rem;
|
|
3763
|
+
--saas-radius-sm: .25rem;
|
|
3764
|
+
--saas-radius-md: .375rem;
|
|
3765
|
+
--saas-radius-lg: .5rem;
|
|
3766
|
+
--saas-radius-xl: .75rem;
|
|
3520
3767
|
--saas-radius-pill: 999px;
|
|
3521
3768
|
--saas-space-1: .25rem;
|
|
3522
3769
|
--saas-space-2: .5rem;
|
|
@@ -3533,33 +3780,105 @@
|
|
|
3533
3780
|
--lightningcss-light: initial;
|
|
3534
3781
|
--lightningcss-dark: ;
|
|
3535
3782
|
color-scheme: light;
|
|
3783
|
+
--saas-fallback-bg-rgb: 248 249 252;
|
|
3784
|
+
--saas-fallback-surface-rgb: 255 255 255;
|
|
3785
|
+
--saas-fallback-surface-strong-rgb: 255 255 255;
|
|
3786
|
+
--saas-fallback-surface-soft-rgb: 243 245 250;
|
|
3787
|
+
--saas-fallback-text-rgb: 19 26 53;
|
|
3788
|
+
--saas-fallback-text-muted-rgb: 97 105 131;
|
|
3789
|
+
--saas-fallback-border-rgb: 220 225 236;
|
|
3790
|
+
--saas-fallback-primary-rgb: 85 78 232;
|
|
3791
|
+
--saas-fallback-primary-hover-rgb: 103 88 244;
|
|
3792
|
+
--saas-fallback-primary-text-rgb: 255 255 255;
|
|
3793
|
+
--saas-fallback-secondary-rgb: 49 110 219;
|
|
3794
|
+
--saas-fallback-secondary-hover-rgb: 43 95 190;
|
|
3795
|
+
--saas-fallback-secondary-text-rgb: 255 255 255;
|
|
3796
|
+
--saas-fallback-accent-rgb: 103 88 244;
|
|
3797
|
+
--saas-fallback-accent-text-rgb: 255 255 255;
|
|
3798
|
+
--saas-fallback-success-rgb: 36 155 112;
|
|
3799
|
+
--saas-fallback-success-text-rgb: 19 26 53;
|
|
3800
|
+
--saas-fallback-warning-rgb: 215 146 31;
|
|
3801
|
+
--saas-fallback-warning-text-rgb: 19 26 53;
|
|
3802
|
+
--saas-fallback-danger-rgb: 214 30 70;
|
|
3803
|
+
--saas-fallback-danger-text-rgb: 255 255 255;
|
|
3804
|
+
--saas-fallback-link-rgb: 85 78 232;
|
|
3805
|
+
--saas-fallback-focus-rgb: 85 78 232;
|
|
3536
3806
|
--saas-panel-alpha: .98;
|
|
3537
|
-
--saas-panel-soft-alpha: .
|
|
3538
|
-
--saas-border-alpha: .
|
|
3539
|
-
--saas-shadow-alpha: .
|
|
3540
|
-
--saas-focus-alpha: .
|
|
3807
|
+
--saas-panel-soft-alpha: .74;
|
|
3808
|
+
--saas-border-alpha: .44;
|
|
3809
|
+
--saas-shadow-alpha: .08;
|
|
3810
|
+
--saas-focus-alpha: .3;
|
|
3811
|
+
--saas-reference-shadow: 0 .5rem 1.5rem #282f530b;
|
|
3541
3812
|
}
|
|
3542
3813
|
|
|
3543
3814
|
[data-ui="minimal-saas"][data-mode="dark"] {
|
|
3544
3815
|
--lightningcss-light: ;
|
|
3545
3816
|
--lightningcss-dark: initial;
|
|
3546
3817
|
color-scheme: dark;
|
|
3818
|
+
--saas-fallback-bg-rgb: 7 17 31;
|
|
3819
|
+
--saas-fallback-surface-rgb: 13 25 42;
|
|
3820
|
+
--saas-fallback-surface-strong-rgb: 27 36 80;
|
|
3821
|
+
--saas-fallback-surface-soft-rgb: 17 31 51;
|
|
3822
|
+
--saas-fallback-text-rgb: 241 243 251;
|
|
3823
|
+
--saas-fallback-text-muted-rgb: 180 187 205;
|
|
3824
|
+
--saas-fallback-border-rgb: 43 58 80;
|
|
3825
|
+
--saas-fallback-primary-rgb: 112 104 255;
|
|
3826
|
+
--saas-fallback-primary-hover-rgb: 135 128 255;
|
|
3827
|
+
--saas-fallback-primary-text-rgb: 7 17 31;
|
|
3828
|
+
--saas-fallback-secondary-rgb: 85 145 255;
|
|
3829
|
+
--saas-fallback-secondary-hover-rgb: 112 166 255;
|
|
3830
|
+
--saas-fallback-secondary-text-rgb: 7 17 31;
|
|
3831
|
+
--saas-fallback-accent-rgb: 87 73 239;
|
|
3832
|
+
--saas-fallback-accent-text-rgb: 255 255 255;
|
|
3833
|
+
--saas-fallback-success-rgb: 67 190 139;
|
|
3834
|
+
--saas-fallback-success-text-rgb: 7 17 31;
|
|
3835
|
+
--saas-fallback-warning-rgb: 239 173 49;
|
|
3836
|
+
--saas-fallback-warning-text-rgb: 7 17 31;
|
|
3837
|
+
--saas-fallback-danger-rgb: 255 61 104;
|
|
3838
|
+
--saas-fallback-danger-text-rgb: 7 17 31;
|
|
3839
|
+
--saas-fallback-link-rgb: 135 128 255;
|
|
3840
|
+
--saas-fallback-focus-rgb: 112 104 255;
|
|
3547
3841
|
--saas-panel-alpha: .92;
|
|
3548
3842
|
--saas-panel-soft-alpha: .64;
|
|
3549
3843
|
--saas-border-alpha: .52;
|
|
3550
3844
|
--saas-shadow-alpha: .34;
|
|
3551
3845
|
--saas-focus-alpha: .42;
|
|
3846
|
+
--saas-reference-shadow: 0 .75rem 2.125rem #00000029;
|
|
3552
3847
|
}
|
|
3553
3848
|
|
|
3554
3849
|
[data-ui="minimal-saas"][data-mode="contrast"] {
|
|
3555
3850
|
--lightningcss-light: ;
|
|
3556
3851
|
--lightningcss-dark: initial;
|
|
3557
3852
|
color-scheme: dark;
|
|
3853
|
+
--saas-fallback-bg-rgb: 0 0 0;
|
|
3854
|
+
--saas-fallback-surface-rgb: 3 8 22;
|
|
3855
|
+
--saas-fallback-surface-strong-rgb: 8 18 42;
|
|
3856
|
+
--saas-fallback-surface-soft-rgb: 0 0 0;
|
|
3857
|
+
--saas-fallback-text-rgb: 255 255 255;
|
|
3858
|
+
--saas-fallback-text-muted-rgb: 238 244 255;
|
|
3859
|
+
--saas-fallback-border-rgb: 255 255 255;
|
|
3860
|
+
--saas-fallback-primary-rgb: 111 140 255;
|
|
3861
|
+
--saas-fallback-primary-hover-rgb: 255 255 255;
|
|
3862
|
+
--saas-fallback-primary-text-rgb: 0 0 0;
|
|
3863
|
+
--saas-fallback-secondary-rgb: 0 217 255;
|
|
3864
|
+
--saas-fallback-secondary-hover-rgb: 255 255 255;
|
|
3865
|
+
--saas-fallback-secondary-text-rgb: 0 0 0;
|
|
3866
|
+
--saas-fallback-accent-rgb: 184 196 255;
|
|
3867
|
+
--saas-fallback-accent-text-rgb: 0 0 0;
|
|
3868
|
+
--saas-fallback-success-rgb: 0 255 144;
|
|
3869
|
+
--saas-fallback-success-text-rgb: 0 0 0;
|
|
3870
|
+
--saas-fallback-warning-rgb: 255 225 0;
|
|
3871
|
+
--saas-fallback-warning-text-rgb: 0 0 0;
|
|
3872
|
+
--saas-fallback-danger-rgb: 255 63 95;
|
|
3873
|
+
--saas-fallback-danger-text-rgb: 0 0 0;
|
|
3874
|
+
--saas-fallback-link-rgb: 159 178 255;
|
|
3875
|
+
--saas-fallback-focus-rgb: 255 255 255;
|
|
3558
3876
|
--saas-panel-alpha: 1;
|
|
3559
3877
|
--saas-panel-soft-alpha: .92;
|
|
3560
3878
|
--saas-border-alpha: 1;
|
|
3561
3879
|
--saas-shadow-alpha: .5;
|
|
3562
3880
|
--saas-focus-alpha: .72;
|
|
3881
|
+
--saas-reference-shadow: none;
|
|
3563
3882
|
}
|
|
3564
3883
|
|
|
3565
3884
|
[data-ui="minimal-saas"][data-theme][data-mode] {
|
|
@@ -3577,15 +3896,42 @@
|
|
|
3577
3896
|
--saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3578
3897
|
--saas-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3579
3898
|
--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
3899
|
--saas-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
3900
|
+
--saas-success-rgb: var(--usk-success-rgb);
|
|
3585
3901
|
--saas-success-text-rgb: var(--usk-success-text-rgb);
|
|
3902
|
+
--saas-warning-rgb: var(--usk-warning-rgb);
|
|
3586
3903
|
--saas-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
3904
|
+
--saas-danger-rgb: var(--usk-danger-rgb);
|
|
3587
3905
|
--saas-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
3906
|
+
--saas-link-rgb: var(--usk-link-rgb);
|
|
3588
3907
|
--saas-focus-rgb: var(--usk-focus-rgb);
|
|
3908
|
+
}
|
|
3909
|
+
|
|
3910
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
3911
|
+
--usk-native-bg: var(--saas-bg);
|
|
3912
|
+
--saas-bg-rgb: var(--usk-bg-rgb, var(--saas-fallback-bg-rgb));
|
|
3913
|
+
--saas-surface-rgb: var(--usk-surface-rgb, var(--saas-fallback-surface-rgb));
|
|
3914
|
+
--saas-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--saas-fallback-surface-strong-rgb));
|
|
3915
|
+
--saas-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--saas-fallback-surface-soft-rgb));
|
|
3916
|
+
--saas-text-rgb: var(--usk-text-rgb, var(--saas-fallback-text-rgb));
|
|
3917
|
+
--saas-text-muted-rgb: var(--usk-text-muted-rgb, var(--saas-fallback-text-muted-rgb));
|
|
3918
|
+
--saas-border-rgb: var(--usk-border-rgb, var(--saas-fallback-border-rgb));
|
|
3919
|
+
--saas-primary-rgb: var(--usk-primary-rgb, var(--saas-fallback-primary-rgb));
|
|
3920
|
+
--saas-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--saas-fallback-primary-hover-rgb));
|
|
3921
|
+
--saas-primary-text-rgb: var(--usk-primary-text-rgb, var(--saas-fallback-primary-text-rgb));
|
|
3922
|
+
--saas-secondary-rgb: var(--usk-secondary-rgb, var(--saas-fallback-secondary-rgb));
|
|
3923
|
+
--saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--saas-fallback-secondary-hover-rgb));
|
|
3924
|
+
--saas-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--saas-fallback-secondary-text-rgb));
|
|
3925
|
+
--saas-accent-rgb: var(--usk-accent-rgb, var(--saas-fallback-accent-rgb));
|
|
3926
|
+
--saas-accent-text-rgb: var(--usk-accent-text-rgb, var(--saas-fallback-accent-text-rgb));
|
|
3927
|
+
--saas-success-rgb: var(--usk-success-rgb, var(--saas-fallback-success-rgb));
|
|
3928
|
+
--saas-success-text-rgb: var(--usk-success-text-rgb, var(--saas-fallback-success-text-rgb));
|
|
3929
|
+
--saas-warning-rgb: var(--usk-warning-rgb, var(--saas-fallback-warning-rgb));
|
|
3930
|
+
--saas-warning-text-rgb: var(--usk-warning-text-rgb, var(--saas-fallback-warning-text-rgb));
|
|
3931
|
+
--saas-danger-rgb: var(--usk-danger-rgb, var(--saas-fallback-danger-rgb));
|
|
3932
|
+
--saas-danger-text-rgb: var(--usk-danger-text-rgb, var(--saas-fallback-danger-text-rgb));
|
|
3933
|
+
--saas-link-rgb: var(--usk-link-rgb, var(--saas-fallback-link-rgb));
|
|
3934
|
+
--saas-focus-rgb: var(--usk-focus-rgb, var(--saas-fallback-focus-rgb));
|
|
3589
3935
|
--usk-native-surface: var(--saas-surface);
|
|
3590
3936
|
--usk-native-surface-strong: var(--saas-surface-strong);
|
|
3591
3937
|
--usk-native-surface-soft: var(--saas-surface-soft);
|
|
@@ -3614,7 +3960,58 @@
|
|
|
3614
3960
|
--usk-native-focus-ring: var(--saas-focus-ring, 0 0 0 3px rgb(var(--saas-focus-rgb) / .28));
|
|
3615
3961
|
--usk-native-border-width: 1px;
|
|
3616
3962
|
--usk-native-field-gap: .5rem;
|
|
3617
|
-
--usk-native-panel-padding: var(--saas-space-
|
|
3963
|
+
--usk-native-panel-padding: var(--saas-space-4);
|
|
3964
|
+
--usk-native-control-min-block-size: 2.375rem;
|
|
3965
|
+
--usk-native-control-padding-block: .5rem;
|
|
3966
|
+
--usk-native-control-padding-inline: .75rem;
|
|
3967
|
+
--usk-native-subcontrol-padding-block: .38rem;
|
|
3968
|
+
--usk-native-subcontrol-padding-inline: .6rem;
|
|
3969
|
+
--usk-native-choice-size: 1rem;
|
|
3970
|
+
--usk-native-choice-background: var(--saas-control-bg);
|
|
3971
|
+
--usk-native-choice-border: 1px solid var(--saas-border);
|
|
3972
|
+
--usk-native-checkbox-radius: .25rem;
|
|
3973
|
+
--usk-native-radio-radius: 50%;
|
|
3974
|
+
--usk-native-choice-shadow: none;
|
|
3975
|
+
--usk-native-choice-checked-background: var(--saas-primary);
|
|
3976
|
+
--usk-native-choice-mark-color: var(--saas-on-primary);
|
|
3977
|
+
--usk-native-select-indicator-image: linear-gradient(27deg, transparent 50%, var(--saas-primary) 50%), linear-gradient(153deg, var(--saas-primary) 50%, transparent 50%);
|
|
3978
|
+
--usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
|
|
3979
|
+
--usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
|
|
3980
|
+
--usk-native-select-padding-inline-end: 2.25rem;
|
|
3981
|
+
--usk-native-range-track-size: .32rem;
|
|
3982
|
+
--usk-native-range-track-background: var(--saas-surface-soft);
|
|
3983
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
3984
|
+
--usk-native-range-track-radius: 999px;
|
|
3985
|
+
--usk-native-range-track-shadow: none;
|
|
3986
|
+
--usk-native-range-progress-background: var(--saas-primary);
|
|
3987
|
+
--usk-native-range-thumb-size: .95rem;
|
|
3988
|
+
--usk-native-range-thumb-background: var(--saas-primary);
|
|
3989
|
+
--usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
|
|
3990
|
+
--usk-native-range-thumb-radius: 50%;
|
|
3991
|
+
--usk-native-range-thumb-shadow: 0 .2rem .5rem rgb(var(--saas-text-rgb) / .12);
|
|
3992
|
+
--usk-native-progress-size: .35rem;
|
|
3993
|
+
--usk-native-progress-track-background: var(--saas-surface-soft);
|
|
3994
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
3995
|
+
--usk-native-progress-track-radius: 999px;
|
|
3996
|
+
--usk-native-progress-track-shadow: none;
|
|
3997
|
+
--usk-native-progress-value-background: var(--saas-primary);
|
|
3998
|
+
--usk-native-progress-value-radius: inherit;
|
|
3999
|
+
--usk-native-progress-value-shadow: none;
|
|
4000
|
+
--usk-native-meter-optimum-background: var(--saas-success);
|
|
4001
|
+
--usk-native-meter-suboptimum-background: var(--saas-warning);
|
|
4002
|
+
--usk-native-meter-critical-background: var(--saas-danger);
|
|
4003
|
+
--usk-native-file-button-background: var(--saas-primary);
|
|
4004
|
+
--usk-native-file-button-border: 1px solid var(--saas-border);
|
|
4005
|
+
--usk-native-file-button-radius: .2rem;
|
|
4006
|
+
--usk-native-file-button-shadow: none;
|
|
4007
|
+
--usk-native-color-swatch-border: 1px solid var(--saas-border);
|
|
4008
|
+
--usk-native-color-swatch-radius: .2rem;
|
|
4009
|
+
--usk-native-indicator-opacity: .72;
|
|
4010
|
+
--usk-native-indicator-filter: none;
|
|
4011
|
+
--usk-native-scrollbar-size: .65rem;
|
|
4012
|
+
--usk-native-scrollbar-track: var(--saas-surface-soft);
|
|
4013
|
+
--usk-native-scrollbar-thumb: var(--saas-primary);
|
|
4014
|
+
--usk-native-scrollbar-radius: 2px;
|
|
3618
4015
|
--saas-bg: rgb(var(--saas-bg-rgb));
|
|
3619
4016
|
--saas-surface: rgb(var(--saas-surface-rgb) / var(--saas-panel-alpha));
|
|
3620
4017
|
--saas-surface-strong: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
@@ -3628,6 +4025,7 @@
|
|
|
3628
4025
|
--saas-control-fg: var(--saas-text);
|
|
3629
4026
|
--saas-primary: rgb(var(--saas-primary-rgb));
|
|
3630
4027
|
--saas-primary-hover: rgb(var(--saas-primary-hover-rgb));
|
|
4028
|
+
--saas-brand-2: rgb(var(--saas-primary-hover-rgb));
|
|
3631
4029
|
--saas-primary-text: rgb(var(--saas-primary-text-rgb));
|
|
3632
4030
|
--saas-secondary: rgb(var(--saas-secondary-rgb));
|
|
3633
4031
|
--saas-secondary-hover: rgb(var(--saas-secondary-hover-rgb));
|
|
@@ -3645,23 +4043,26 @@
|
|
|
3645
4043
|
--saas-link: rgb(var(--saas-link-rgb));
|
|
3646
4044
|
--saas-focus: rgb(var(--saas-focus-rgb));
|
|
3647
4045
|
--saas-focus-ring: 0 0 0 3px rgb(var(--saas-focus-rgb) / var(--saas-focus-alpha));
|
|
4046
|
+
--saas-shadow-sm: 0 1px 2px rgb(var(--saas-text-rgb) / calc(var(--saas-shadow-alpha) * .65));
|
|
4047
|
+
--saas-shadow-md: var(--saas-reference-shadow);
|
|
3648
4048
|
--saas-theme-bg-size: auto;
|
|
3649
|
-
--saas-theme-bg:
|
|
3650
|
-
--saas-card-bg:
|
|
3651
|
-
--saas-control-bg:
|
|
4049
|
+
--saas-theme-bg: var(--saas-bg);
|
|
4050
|
+
--saas-card-bg: var(--saas-surface);
|
|
4051
|
+
--saas-control-bg: var(--saas-surface);
|
|
4052
|
+
--saas-hover-bg: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
3652
4053
|
--saas-spinner-track: rgb(var(--saas-border-rgb) / max(.28, calc(var(--saas-border-alpha) * .7)));
|
|
3653
4054
|
--saas-spinner-stroke: var(--saas-primary);
|
|
3654
4055
|
--saas-spinner-accent: var(--saas-accent);
|
|
3655
4056
|
}
|
|
3656
4057
|
|
|
3657
4058
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3658
|
-
[data-ui="minimal-saas"][data-
|
|
4059
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
3659
4060
|
--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
4061
|
}
|
|
3661
4062
|
}
|
|
3662
4063
|
|
|
3663
4064
|
[data-ui="minimal-saas"] {
|
|
3664
|
-
background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.
|
|
4065
|
+
background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.03),transparent 18rem),var(--saas-bg);
|
|
3665
4066
|
color: var(--saas-text);
|
|
3666
4067
|
font-family: var(--saas-font-body);
|
|
3667
4068
|
text-rendering: optimizelegibility;
|
|
@@ -3674,7 +4075,7 @@
|
|
|
3674
4075
|
box-sizing: border-box;
|
|
3675
4076
|
}
|
|
3676
4077
|
|
|
3677
|
-
[data-ui="minimal-saas"][data-
|
|
4078
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
3678
4079
|
background: var(--saas-theme-bg);
|
|
3679
4080
|
background-size: var(--saas-theme-bg-size);
|
|
3680
4081
|
}
|
|
@@ -3685,33 +4086,35 @@
|
|
|
3685
4086
|
|
|
3686
4087
|
.saas-title {
|
|
3687
4088
|
color: var(--saas-text);
|
|
3688
|
-
letter-spacing: -.
|
|
4089
|
+
letter-spacing: -.02em;
|
|
3689
4090
|
margin: 0;
|
|
3690
|
-
font-size:
|
|
3691
|
-
|
|
4091
|
+
font-size: 1.5rem;
|
|
4092
|
+
font-weight: 700;
|
|
4093
|
+
line-height: 1.05;
|
|
3692
4094
|
}
|
|
3693
4095
|
|
|
3694
4096
|
.saas-heading {
|
|
3695
4097
|
color: var(--saas-text);
|
|
3696
|
-
letter-spacing:
|
|
4098
|
+
letter-spacing: 0;
|
|
3697
4099
|
margin: 0;
|
|
3698
|
-
font-size:
|
|
3699
|
-
|
|
4100
|
+
font-size: 1rem;
|
|
4101
|
+
font-weight: 700;
|
|
4102
|
+
line-height: 1.2;
|
|
3700
4103
|
}
|
|
3701
4104
|
|
|
3702
4105
|
.saas-kicker {
|
|
3703
4106
|
color: var(--saas-primary);
|
|
3704
|
-
letter-spacing: .
|
|
4107
|
+
letter-spacing: .1em;
|
|
3705
4108
|
text-transform: uppercase;
|
|
3706
4109
|
margin: 0;
|
|
3707
|
-
font-size: .
|
|
3708
|
-
font-weight:
|
|
4110
|
+
font-size: .78rem;
|
|
4111
|
+
font-weight: 750;
|
|
3709
4112
|
}
|
|
3710
4113
|
|
|
3711
4114
|
.saas-subtitle, .saas-copy {
|
|
3712
4115
|
color: var(--saas-text-muted);
|
|
3713
4116
|
margin: 0;
|
|
3714
|
-
line-height: 1.
|
|
4117
|
+
line-height: 1.55;
|
|
3715
4118
|
}
|
|
3716
4119
|
|
|
3717
4120
|
.saas-text-muted {
|
|
@@ -3726,19 +4129,15 @@
|
|
|
3726
4129
|
}
|
|
3727
4130
|
|
|
3728
4131
|
.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:
|
|
4132
|
+
background: var(--saas-card-bg);
|
|
3730
4133
|
color: var(--saas-text);
|
|
3731
4134
|
border: 1px solid var(--saas-border);
|
|
3732
4135
|
border-radius: var(--saas-radius-lg);
|
|
3733
|
-
box-shadow:
|
|
4136
|
+
box-shadow: var(--saas-shadow-md);
|
|
3734
4137
|
transition: transform var(--saas-transition-base),box-shadow var(--saas-transition-base),border-color var(--saas-transition-base),background var(--saas-transition-base);
|
|
3735
4138
|
position: relative;
|
|
3736
4139
|
}
|
|
3737
4140
|
|
|
3738
|
-
.saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
|
|
3739
|
-
padding: var(--saas-space-6);
|
|
3740
|
-
}
|
|
3741
|
-
|
|
3742
4141
|
.saas-toolbar, :where([data-ui="minimal-saas"]) .ui-toolbar {
|
|
3743
4142
|
justify-content: space-between;
|
|
3744
4143
|
align-items: center;
|
|
@@ -3750,26 +4149,27 @@
|
|
|
3750
4149
|
|
|
3751
4150
|
.saas-surface-sm {
|
|
3752
4151
|
border-radius: var(--saas-radius-md);
|
|
3753
|
-
box-shadow:
|
|
4152
|
+
box-shadow: var(--saas-shadow-sm);
|
|
3754
4153
|
}
|
|
3755
4154
|
|
|
3756
4155
|
.saas-surface-lg {
|
|
3757
|
-
border-radius: var(--saas-radius-
|
|
3758
|
-
box-shadow:
|
|
4156
|
+
border-radius: var(--saas-radius-lg);
|
|
4157
|
+
box-shadow: var(--saas-shadow-md);
|
|
3759
4158
|
}
|
|
3760
4159
|
|
|
3761
4160
|
.saas-well, .saas-inset {
|
|
3762
4161
|
background: var(--saas-surface-soft);
|
|
3763
4162
|
color: var(--saas-text);
|
|
3764
|
-
border: 1px solid
|
|
4163
|
+
border: 1px solid var(--saas-border);
|
|
3765
4164
|
border-radius: var(--saas-radius-md);
|
|
3766
|
-
padding: var(--saas-space-
|
|
3767
|
-
box-shadow:
|
|
4165
|
+
padding: var(--saas-space-4);
|
|
4166
|
+
box-shadow: none;
|
|
3768
4167
|
}
|
|
3769
4168
|
|
|
3770
4169
|
.saas-hover-lift:hover {
|
|
3771
|
-
|
|
3772
|
-
|
|
4170
|
+
border-color: rgb(var(--saas-primary-rgb)/.42);
|
|
4171
|
+
box-shadow: var(--saas-shadow-md);
|
|
4172
|
+
transform: none;
|
|
3773
4173
|
}
|
|
3774
4174
|
|
|
3775
4175
|
.saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
@@ -3777,71 +4177,62 @@
|
|
|
3777
4177
|
justify-content: center;
|
|
3778
4178
|
align-items: center;
|
|
3779
4179
|
gap: var(--saas-space-2);
|
|
3780
|
-
background: var(--saas-
|
|
3781
|
-
min-height: 2.
|
|
4180
|
+
background: var(--saas-control-bg);
|
|
4181
|
+
min-height: 2.125rem;
|
|
3782
4182
|
color: var(--saas-text);
|
|
3783
4183
|
border: 1px solid var(--saas-border);
|
|
3784
4184
|
border-radius: var(--saas-radius-md);
|
|
3785
|
-
box-shadow:
|
|
4185
|
+
box-shadow: var(--saas-shadow-sm);
|
|
3786
4186
|
font: inherit;
|
|
3787
4187
|
cursor: pointer;
|
|
3788
4188
|
-webkit-user-select: none;
|
|
3789
4189
|
user-select: none;
|
|
3790
4190
|
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:
|
|
4191
|
+
padding: .45rem .75rem;
|
|
4192
|
+
font-weight: 700;
|
|
3793
4193
|
line-height: 1;
|
|
3794
4194
|
text-decoration: none;
|
|
3795
4195
|
display: inline-flex;
|
|
3796
4196
|
}
|
|
3797
4197
|
|
|
3798
4198
|
.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
|
-
|
|
4199
|
+
border-color: rgb(var(--saas-primary-rgb)/.48);
|
|
4200
|
+
background: var(--saas-surface-soft);
|
|
4201
|
+
transform: none;
|
|
3801
4202
|
}
|
|
3802
4203
|
|
|
3803
4204
|
.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 {
|
|
4205
|
+
box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb)/.12);
|
|
3804
4206
|
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
4207
|
}
|
|
3813
4208
|
|
|
3814
4209
|
.saas-button-primary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3815
|
-
background: var(--saas-
|
|
4210
|
+
background: linear-gradient(135deg,var(--saas-brand-2),var(--saas-primary));
|
|
3816
4211
|
border-color: var(--saas-primary-hover);
|
|
3817
4212
|
}
|
|
3818
4213
|
|
|
3819
4214
|
.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-
|
|
4215
|
+
background: rgb(var(--saas-surface-strong-rgb)/var(--saas-panel-alpha));
|
|
4216
|
+
color: var(--saas-primary);
|
|
4217
|
+
border-color: rgb(var(--saas-primary-rgb)/.32);
|
|
4218
|
+
box-shadow: none;
|
|
3823
4219
|
}
|
|
3824
4220
|
|
|
3825
4221
|
.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);
|
|
4222
|
+
background: rgb(var(--saas-primary-rgb)/.06);
|
|
4223
|
+
border-color: rgb(var(--saas-primary-rgb)/.52);
|
|
3834
4224
|
}
|
|
3835
4225
|
|
|
3836
4226
|
.saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
3837
|
-
color: var(--saas-
|
|
4227
|
+
color: var(--saas-primary);
|
|
3838
4228
|
box-shadow: none;
|
|
3839
4229
|
background: none;
|
|
4230
|
+
border-color: #0000;
|
|
3840
4231
|
}
|
|
3841
4232
|
|
|
3842
4233
|
.saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
3843
|
-
border-radius: var(--saas-radius-
|
|
3844
|
-
width: 2.
|
|
4234
|
+
border-radius: var(--saas-radius-md);
|
|
4235
|
+
width: 2.375rem;
|
|
3845
4236
|
padding: 0;
|
|
3846
4237
|
}
|
|
3847
4238
|
|
|
@@ -3855,7 +4246,7 @@
|
|
|
3855
4246
|
background: var(--saas-card-bg);
|
|
3856
4247
|
}
|
|
3857
4248
|
|
|
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 {
|
|
4249
|
+
.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
4250
|
background: var(--saas-control-bg);
|
|
3860
4251
|
}
|
|
3861
4252
|
|
|
@@ -3871,26 +4262,26 @@
|
|
|
3871
4262
|
|
|
3872
4263
|
.saas-label, :where([data-ui="minimal-saas"]) .ui-label {
|
|
3873
4264
|
color: var(--saas-text);
|
|
3874
|
-
font-size: .
|
|
3875
|
-
font-weight:
|
|
4265
|
+
font-size: .875rem;
|
|
4266
|
+
font-weight: 700;
|
|
3876
4267
|
}
|
|
3877
4268
|
|
|
3878
4269
|
.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-
|
|
4270
|
+
background: var(--saas-control-bg);
|
|
3880
4271
|
width: 100%;
|
|
3881
|
-
min-height:
|
|
4272
|
+
min-height: 2rem;
|
|
3882
4273
|
color: var(--saas-text);
|
|
3883
4274
|
border: 1px solid var(--saas-border);
|
|
3884
4275
|
border-radius: var(--saas-radius-md);
|
|
3885
4276
|
font: inherit;
|
|
3886
4277
|
transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3887
4278
|
outline: none;
|
|
3888
|
-
padding: .
|
|
4279
|
+
padding: .38rem .65rem;
|
|
3889
4280
|
}
|
|
3890
4281
|
|
|
3891
4282
|
.saas-textarea, :where([data-ui="minimal-saas"]) .ui-textarea {
|
|
3892
4283
|
resize: vertical;
|
|
3893
|
-
min-height:
|
|
4284
|
+
min-height: 7rem;
|
|
3894
4285
|
}
|
|
3895
4286
|
|
|
3896
4287
|
.saas-input::placeholder, .saas-textarea::placeholder, :where([data-ui="minimal-saas"]) .ui-input::placeholder, :where([data-ui="minimal-saas"]) .ui-textarea::placeholder {
|
|
@@ -3899,7 +4290,7 @@
|
|
|
3899
4290
|
}
|
|
3900
4291
|
|
|
3901
4292
|
.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)/.
|
|
4293
|
+
border-color: rgb(var(--saas-primary-rgb)/.42);
|
|
3903
4294
|
}
|
|
3904
4295
|
|
|
3905
4296
|
.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 +4298,11 @@
|
|
|
3907
4298
|
box-shadow: var(--saas-focus-ring);
|
|
3908
4299
|
}
|
|
3909
4300
|
|
|
4301
|
+
[data-ui="minimal-saas"][data-mode] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
|
|
4302
|
+
outline: 2px solid var(--saas-focus);
|
|
4303
|
+
outline-offset: 2px;
|
|
4304
|
+
}
|
|
4305
|
+
|
|
3910
4306
|
.saas-help-text, :where([data-ui="minimal-saas"]) .ui-help-text {
|
|
3911
4307
|
color: var(--saas-text-muted);
|
|
3912
4308
|
font-size: .875rem;
|
|
@@ -3928,11 +4324,11 @@
|
|
|
3928
4324
|
}
|
|
3929
4325
|
|
|
3930
4326
|
.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-
|
|
4327
|
+
background: var(--saas-control-bg);
|
|
3932
4328
|
border: 1px solid var(--saas-border);
|
|
3933
|
-
width:
|
|
3934
|
-
height:
|
|
3935
|
-
transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
4329
|
+
width: 1rem;
|
|
4330
|
+
height: 1rem;
|
|
4331
|
+
transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3936
4332
|
place-items: center;
|
|
3937
4333
|
display: inline-grid;
|
|
3938
4334
|
}
|
|
@@ -3948,22 +4344,23 @@
|
|
|
3948
4344
|
.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
4345
|
background: var(--saas-primary);
|
|
3950
4346
|
border-color: var(--saas-primary);
|
|
3951
|
-
box-shadow: var(--saas-
|
|
4347
|
+
box-shadow: 0 0 0 .16rem rgb(var(--saas-primary-rgb)/.18);
|
|
3952
4348
|
}
|
|
3953
4349
|
|
|
3954
4350
|
.saas-check input:checked + .saas-check-control:after, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control:after {
|
|
3955
4351
|
content: "✓";
|
|
3956
4352
|
color: var(--saas-on-primary);
|
|
3957
|
-
font-size: .
|
|
4353
|
+
font-size: .78rem;
|
|
3958
4354
|
font-weight: 900;
|
|
4355
|
+
line-height: 1;
|
|
3959
4356
|
}
|
|
3960
4357
|
|
|
3961
4358
|
.saas-radio input:checked + .saas-radio-control:after, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control:after {
|
|
3962
4359
|
content: "";
|
|
3963
4360
|
background: var(--saas-on-primary);
|
|
3964
4361
|
border-radius: 50%;
|
|
3965
|
-
width: .
|
|
3966
|
-
height: .
|
|
4362
|
+
width: .48rem;
|
|
4363
|
+
height: .48rem;
|
|
3967
4364
|
}
|
|
3968
4365
|
|
|
3969
4366
|
.saas-switch, :where([data-ui="minimal-saas"]) .ui-switch {
|
|
@@ -3984,8 +4381,8 @@
|
|
|
3984
4381
|
background: var(--saas-surface-soft);
|
|
3985
4382
|
border: 1px solid var(--saas-border);
|
|
3986
4383
|
border-radius: var(--saas-radius-pill);
|
|
3987
|
-
width:
|
|
3988
|
-
height: 1.
|
|
4384
|
+
width: 2.6rem;
|
|
4385
|
+
height: 1.3rem;
|
|
3989
4386
|
transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
3990
4387
|
position: relative;
|
|
3991
4388
|
}
|
|
@@ -3993,14 +4390,14 @@
|
|
|
3993
4390
|
.saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
|
|
3994
4391
|
background: var(--saas-surface-strong);
|
|
3995
4392
|
border: 1px solid var(--saas-border);
|
|
3996
|
-
width:
|
|
3997
|
-
height:
|
|
3998
|
-
box-shadow: 0
|
|
4393
|
+
width: .9rem;
|
|
4394
|
+
height: .9rem;
|
|
4395
|
+
box-shadow: 0 1px 2px rgb(var(--saas-text-rgb)/.12);
|
|
3999
4396
|
transition: left var(--saas-transition-fast),background var(--saas-transition-fast);
|
|
4000
4397
|
border-radius: 50%;
|
|
4001
4398
|
position: absolute;
|
|
4002
|
-
top: .
|
|
4003
|
-
left: .
|
|
4399
|
+
top: .14rem;
|
|
4400
|
+
left: .14rem;
|
|
4004
4401
|
}
|
|
4005
4402
|
|
|
4006
4403
|
.saas-switch input:checked + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track {
|
|
@@ -4010,20 +4407,25 @@
|
|
|
4010
4407
|
|
|
4011
4408
|
.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
4409
|
background: var(--saas-on-primary);
|
|
4013
|
-
left: calc(100% - 1.
|
|
4410
|
+
left: calc(100% - 1.04rem);
|
|
4411
|
+
}
|
|
4412
|
+
|
|
4413
|
+
.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 {
|
|
4414
|
+
outline: 2px solid var(--saas-focus);
|
|
4415
|
+
outline-offset: 2px;
|
|
4014
4416
|
}
|
|
4015
4417
|
|
|
4016
4418
|
.saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
|
|
4017
4419
|
align-items: center;
|
|
4018
4420
|
gap: var(--saas-space-1);
|
|
4019
4421
|
background: var(--saas-surface-soft);
|
|
4020
|
-
min-height: 1.
|
|
4422
|
+
min-height: 1.4rem;
|
|
4021
4423
|
color: var(--saas-text);
|
|
4022
|
-
border:
|
|
4023
|
-
border
|
|
4024
|
-
padding: .
|
|
4025
|
-
font-size: .
|
|
4026
|
-
font-weight:
|
|
4424
|
+
border-radius: var(--saas-radius-sm);
|
|
4425
|
+
border: 1px solid #0000;
|
|
4426
|
+
padding: .25rem .5rem;
|
|
4427
|
+
font-size: .75rem;
|
|
4428
|
+
font-weight: 700;
|
|
4027
4429
|
line-height: 1;
|
|
4028
4430
|
display: inline-flex;
|
|
4029
4431
|
}
|
|
@@ -4035,50 +4437,51 @@
|
|
|
4035
4437
|
}
|
|
4036
4438
|
|
|
4037
4439
|
.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:
|
|
4440
|
+
background: rgb(var(--saas-primary-rgb)/.1);
|
|
4441
|
+
color: var(--saas-primary);
|
|
4442
|
+
border-color: #0000;
|
|
4041
4443
|
}
|
|
4042
4444
|
|
|
4043
4445
|
.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);
|
|
4446
|
+
background: rgb(var(--saas-success-rgb)/.14);
|
|
4447
|
+
color: var(--saas-text);
|
|
4448
|
+
border-color: rgb(var(--saas-success-rgb)/.38);
|
|
4047
4449
|
}
|
|
4048
4450
|
|
|
4049
4451
|
.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);
|
|
4452
|
+
background: rgb(var(--saas-warning-rgb)/.14);
|
|
4453
|
+
color: var(--saas-text);
|
|
4454
|
+
border-color: rgb(var(--saas-warning-rgb)/.38);
|
|
4053
4455
|
}
|
|
4054
4456
|
|
|
4055
4457
|
.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);
|
|
4458
|
+
background: rgb(var(--saas-danger-rgb)/.14);
|
|
4459
|
+
color: var(--saas-text);
|
|
4460
|
+
border-color: rgb(var(--saas-danger-rgb)/.38);
|
|
4059
4461
|
}
|
|
4060
4462
|
|
|
4061
4463
|
.saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
|
|
4062
4464
|
align-items: center;
|
|
4063
|
-
gap: var(--saas-space-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4465
|
+
gap: var(--saas-space-1);
|
|
4466
|
+
border: 0;
|
|
4467
|
+
border-bottom: 1px solid var(--saas-border);
|
|
4468
|
+
box-shadow: none;
|
|
4469
|
+
background: none;
|
|
4470
|
+
border-radius: 0;
|
|
4069
4471
|
flex-wrap: wrap;
|
|
4472
|
+
padding: 0;
|
|
4070
4473
|
display: flex;
|
|
4071
4474
|
}
|
|
4072
4475
|
|
|
4073
4476
|
.saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
|
|
4074
|
-
min-height: 2.
|
|
4477
|
+
min-height: 2.125rem;
|
|
4075
4478
|
color: var(--saas-text-muted);
|
|
4076
|
-
border-radius: var(--saas-radius-
|
|
4479
|
+
border-radius: var(--saas-radius-md);
|
|
4077
4480
|
transition: color var(--saas-transition-fast),background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
|
|
4078
4481
|
justify-content: center;
|
|
4079
4482
|
align-items: center;
|
|
4080
|
-
padding: .
|
|
4081
|
-
font-weight:
|
|
4483
|
+
padding: .4rem .7rem;
|
|
4484
|
+
font-weight: 700;
|
|
4082
4485
|
text-decoration: none;
|
|
4083
4486
|
display: inline-flex;
|
|
4084
4487
|
}
|
|
@@ -4089,8 +4492,9 @@
|
|
|
4089
4492
|
}
|
|
4090
4493
|
|
|
4091
4494
|
.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
|
-
|
|
4495
|
+
color: var(--saas-text);
|
|
4496
|
+
box-shadow: inset 0-2px 0 var(--saas-primary);
|
|
4497
|
+
background: none;
|
|
4094
4498
|
}
|
|
4095
4499
|
|
|
4096
4500
|
.saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
@@ -4121,43 +4525,31 @@
|
|
|
4121
4525
|
|
|
4122
4526
|
.saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
|
|
4123
4527
|
background: var(--saas-surface-soft);
|
|
4124
|
-
border: 1px solid var(--saas-border);
|
|
4125
4528
|
border-radius: var(--saas-radius-pill);
|
|
4529
|
+
border: 0 solid #0000;
|
|
4126
4530
|
width: 100%;
|
|
4127
|
-
height: .
|
|
4531
|
+
height: .3rem;
|
|
4128
4532
|
overflow: hidden;
|
|
4129
4533
|
}
|
|
4130
4534
|
|
|
4131
4535
|
.saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
|
|
4132
4536
|
height: 100%;
|
|
4133
4537
|
width: var(--saas-progress-value, 50%);
|
|
4134
|
-
background:
|
|
4538
|
+
background: var(--saas-primary);
|
|
4135
4539
|
border-radius: inherit;
|
|
4136
4540
|
}
|
|
4137
4541
|
|
|
4138
4542
|
.saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
|
|
4139
4543
|
gap: var(--saas-space-2);
|
|
4140
|
-
padding: var(--saas-space-
|
|
4141
|
-
background: var(--saas-
|
|
4544
|
+
padding: var(--saas-space-3);
|
|
4545
|
+
background: rgb(var(--saas-primary-rgb)/.065);
|
|
4142
4546
|
color: var(--saas-text);
|
|
4143
|
-
border: 1px solid var(--saas-
|
|
4547
|
+
border: 1px solid rgb(var(--saas-primary-rgb)/.28);
|
|
4144
4548
|
border-radius: var(--saas-radius-lg);
|
|
4145
|
-
box-shadow:
|
|
4549
|
+
box-shadow: none;
|
|
4146
4550
|
display: grid;
|
|
4147
4551
|
}
|
|
4148
4552
|
|
|
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
4553
|
.saas-alert-title, :where([data-ui="minimal-saas"]) .ui-alert-title {
|
|
4162
4554
|
margin: 0;
|
|
4163
4555
|
font-weight: 900;
|
|
@@ -4181,16 +4573,16 @@
|
|
|
4181
4573
|
.saas-table th, .saas-table td, :where([data-ui="minimal-saas"]) .ui-table th, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
4182
4574
|
text-align: left;
|
|
4183
4575
|
border-bottom: 1px solid var(--saas-border);
|
|
4184
|
-
padding: .
|
|
4576
|
+
padding: .68rem .75rem;
|
|
4185
4577
|
}
|
|
4186
4578
|
|
|
4187
4579
|
.saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
|
|
4188
4580
|
color: var(--saas-text);
|
|
4189
|
-
text-transform:
|
|
4190
|
-
letter-spacing:
|
|
4191
|
-
background: rgb(var(--saas-
|
|
4192
|
-
font-size: .
|
|
4193
|
-
font-weight:
|
|
4581
|
+
text-transform: none;
|
|
4582
|
+
letter-spacing: 0;
|
|
4583
|
+
background: rgb(var(--saas-surface-soft-rgb)/.52);
|
|
4584
|
+
font-size: .78rem;
|
|
4585
|
+
font-weight: 700;
|
|
4194
4586
|
}
|
|
4195
4587
|
|
|
4196
4588
|
.saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
@@ -4476,7 +4868,6 @@
|
|
|
4476
4868
|
border-radius: var(--saas-radius-lg);
|
|
4477
4869
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4478
4870
|
display: grid;
|
|
4479
|
-
overflow: hidden;
|
|
4480
4871
|
}
|
|
4481
4872
|
|
|
4482
4873
|
.saas-feature-item {
|
|
@@ -4582,19 +4973,24 @@
|
|
|
4582
4973
|
}
|
|
4583
4974
|
|
|
4584
4975
|
.saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
|
|
4585
|
-
box-shadow:
|
|
4976
|
+
box-shadow: var(--saas-shadow-md);
|
|
4586
4977
|
}
|
|
4587
4978
|
|
|
4588
4979
|
.saas-card-accent-edge {
|
|
4589
|
-
border-inline-start-width: .
|
|
4980
|
+
border-inline-start-width: .16rem;
|
|
4590
4981
|
}
|
|
4591
4982
|
|
|
4592
4983
|
.saas-icon-medallion {
|
|
4593
|
-
|
|
4984
|
+
background: var(--saas-surface-soft);
|
|
4985
|
+
color: var(--saas-primary);
|
|
4986
|
+
border: 1px solid var(--saas-border);
|
|
4987
|
+
border-radius: var(--saas-radius-lg);
|
|
4988
|
+
box-shadow: var(--saas-shadow-sm);
|
|
4594
4989
|
}
|
|
4595
4990
|
|
|
4596
4991
|
.saas-button.saas-button-cut, .saas-button-cut, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut {
|
|
4597
|
-
|
|
4992
|
+
min-height: 2.75rem;
|
|
4993
|
+
clip-path: polygon(0 0, calc(100% - .25rem) 0, 100% .25rem, 100% 100%, 0 100%);
|
|
4598
4994
|
justify-content: center;
|
|
4599
4995
|
justify-self: start;
|
|
4600
4996
|
min-inline-size: 6rem;
|
|
@@ -4602,30 +4998,48 @@
|
|
|
4602
4998
|
}
|
|
4603
4999
|
|
|
4604
5000
|
.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:
|
|
5001
|
+
clip-path: polygon(0 0, calc(100% - .2rem) 0, 100% .2rem, 100% 100%, 0 100%);
|
|
5002
|
+
box-shadow: var(--saas-shadow-sm);
|
|
4607
5003
|
border-width: 1px;
|
|
4608
5004
|
border-radius: 0;
|
|
4609
5005
|
}
|
|
4610
5006
|
|
|
4611
5007
|
.saas-card-service, .saas-media-scrim, .saas-feature-strip, .saas-callout-bar, .saas-metric {
|
|
4612
5008
|
border: 1px solid var(--saas-border);
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
5009
|
+
box-shadow: var(--saas-shadow-md);
|
|
5010
|
+
}
|
|
5011
|
+
|
|
5012
|
+
[data-ui="minimal-saas"][data-mode] :where(fieldset, article, aside) {
|
|
5013
|
+
background: var(--saas-surface);
|
|
5014
|
+
border: 1px solid var(--saas-border);
|
|
5015
|
+
border-radius: var(--saas-radius-lg);
|
|
5016
|
+
box-shadow: none;
|
|
4616
5017
|
}
|
|
4617
5018
|
|
|
4618
|
-
[data-ui="minimal-saas"][data-
|
|
4619
|
-
|
|
5019
|
+
[data-ui="minimal-saas"][data-mode] :where(legend) {
|
|
5020
|
+
font-weight: 750;
|
|
5021
|
+
}
|
|
5022
|
+
|
|
5023
|
+
[data-ui="minimal-saas"][data-mode] :where(label) {
|
|
5024
|
+
font-weight: 700;
|
|
5025
|
+
}
|
|
5026
|
+
|
|
5027
|
+
[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])) {
|
|
5028
|
+
min-block-size: var(--usk-native-control-min-block-size);
|
|
5029
|
+
background: var(--saas-control-bg);
|
|
5030
|
+
color: var(--saas-text);
|
|
5031
|
+
border: 1px solid var(--saas-border);
|
|
4620
5032
|
border-radius: var(--saas-radius-md);
|
|
4621
|
-
box-shadow:
|
|
5033
|
+
box-shadow: var(--saas-shadow-sm);
|
|
5034
|
+
font-family: var(--saas-font-control);
|
|
5035
|
+
padding: .5rem .78rem;
|
|
5036
|
+
font-weight: 700;
|
|
4622
5037
|
}
|
|
4623
5038
|
|
|
4624
|
-
[data-ui="minimal-saas"][data-
|
|
5039
|
+
[data-ui="minimal-saas"][data-mode] :where(dialog) {
|
|
4625
5040
|
border: 1px solid var(--saas-border);
|
|
4626
5041
|
border-radius: var(--saas-radius-lg);
|
|
4627
|
-
box-shadow: 0
|
|
4628
|
-
border-inline-start-width: .22rem;
|
|
5042
|
+
box-shadow: 0 .75rem 2rem rgb(var(--saas-text-rgb)/.14);
|
|
4629
5043
|
}
|
|
4630
5044
|
|
|
4631
5045
|
.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 +5096,284 @@
|
|
|
4682
5096
|
color: #000 !important;
|
|
4683
5097
|
}
|
|
4684
5098
|
}
|
|
5099
|
+
|
|
5100
|
+
.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"] {
|
|
5101
|
+
border-color: var(--saas-danger);
|
|
5102
|
+
box-shadow: 0 0 0 2px rgb(var(--saas-danger-rgb)/.18);
|
|
5103
|
+
}
|
|
5104
|
+
|
|
5105
|
+
.saas-input[readonly], .saas-textarea[readonly], :where([data-ui="minimal-saas"]) .ui-input[readonly], :where([data-ui="minimal-saas"]) .ui-textarea[readonly] {
|
|
5106
|
+
filter: saturate(.72);
|
|
5107
|
+
opacity: .78;
|
|
5108
|
+
border-style: dashed;
|
|
5109
|
+
}
|
|
5110
|
+
|
|
5111
|
+
[data-ui="minimal-saas"][data-mode] {
|
|
5112
|
+
--usk-native-control-min-block-size: 2rem;
|
|
5113
|
+
--usk-native-control-padding-block: .38rem;
|
|
5114
|
+
--usk-native-control-padding-inline: .65rem;
|
|
5115
|
+
--usk-native-radius-sm: .1875rem;
|
|
5116
|
+
--usk-native-radius: .375rem;
|
|
5117
|
+
--usk-native-radius-lg: .5rem;
|
|
5118
|
+
--usk-native-shadow: 0 1px 2px rgb(var(--saas-text-rgb) / .06);
|
|
5119
|
+
--usk-native-shadow-md: 0 2px 6px rgb(var(--saas-text-rgb) / .08);
|
|
5120
|
+
--usk-native-focus-ring: 0 0 0 2px rgb(var(--saas-focus-rgb) / .3);
|
|
5121
|
+
--usk-native-subcontrol-padding-block: .32rem;
|
|
5122
|
+
--usk-native-subcontrol-padding-inline: .52rem;
|
|
5123
|
+
--usk-native-choice-size: .95rem;
|
|
5124
|
+
--usk-native-choice-background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
|
|
5125
|
+
--usk-native-choice-border: 1px solid rgb(var(--saas-border-rgb) / .9);
|
|
5126
|
+
--usk-native-checkbox-radius: .1875rem;
|
|
5127
|
+
--usk-native-choice-shadow: none;
|
|
5128
|
+
--usk-native-select-indicator-size: .31rem .31rem, .31rem .31rem;
|
|
5129
|
+
--usk-native-select-indicator-position: calc(100% - .92rem) 50%, calc(100% - .68rem) 50%;
|
|
5130
|
+
--usk-native-select-padding-inline-end: 2.1rem;
|
|
5131
|
+
--usk-native-range-track-size: .28rem;
|
|
5132
|
+
--usk-native-range-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
|
|
5133
|
+
--usk-native-range-track-border: 1px solid rgb(var(--saas-border-rgb) / .55);
|
|
5134
|
+
--usk-native-range-track-shadow: none;
|
|
5135
|
+
--usk-native-range-thumb-size: .9rem;
|
|
5136
|
+
--usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
|
|
5137
|
+
--usk-native-range-thumb-shadow: 0 1px 3px rgb(var(--saas-text-rgb) / .14);
|
|
5138
|
+
--usk-native-progress-size: .28rem;
|
|
5139
|
+
--usk-native-progress-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
|
|
5140
|
+
--usk-native-progress-track-border: 1px solid rgb(var(--saas-border-rgb) / .5);
|
|
5141
|
+
--usk-native-progress-track-shadow: none;
|
|
5142
|
+
--usk-native-progress-value-shadow: none;
|
|
5143
|
+
--usk-native-scrollbar-size: .55rem;
|
|
5144
|
+
--usk-native-scrollbar-track: rgb(var(--saas-surface-soft-rgb) / .72);
|
|
5145
|
+
--usk-native-scrollbar-thumb: rgb(var(--saas-primary-rgb) / .72);
|
|
5146
|
+
--usk-native-scrollbar-radius: .125rem;
|
|
5147
|
+
}
|
|
5148
|
+
|
|
5149
|
+
[data-ui="minimal-saas"][data-mode] :where(select:not([multiple])) {
|
|
5150
|
+
appearance: none;
|
|
5151
|
+
}
|
|
5152
|
+
|
|
5153
|
+
[data-ui="minimal-saas"][data-mode] :where(select:not([multiple]))::picker-icon {
|
|
5154
|
+
display: none;
|
|
5155
|
+
}
|
|
5156
|
+
|
|
5157
|
+
.saas-title {
|
|
5158
|
+
letter-spacing: -.02em;
|
|
5159
|
+
margin: 0;
|
|
5160
|
+
font-size: 1.5rem;
|
|
5161
|
+
font-weight: 700;
|
|
5162
|
+
line-height: 1.05;
|
|
5163
|
+
}
|
|
5164
|
+
|
|
5165
|
+
.saas-label, :where([data-ui="minimal-saas"]) .ui-label {
|
|
5166
|
+
font-size: .8125rem;
|
|
5167
|
+
font-weight: 650;
|
|
5168
|
+
}
|
|
5169
|
+
|
|
5170
|
+
.saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
5171
|
+
background: var(--saas-control-bg);
|
|
5172
|
+
min-height: 2.125rem;
|
|
5173
|
+
box-shadow: none;
|
|
5174
|
+
border-radius: .375rem;
|
|
5175
|
+
padding: .45rem .75rem;
|
|
5176
|
+
font-weight: 650;
|
|
5177
|
+
}
|
|
5178
|
+
|
|
5179
|
+
.saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
|
|
5180
|
+
padding: 0;
|
|
5181
|
+
}
|
|
5182
|
+
|
|
5183
|
+
.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 {
|
|
5184
|
+
min-height: 2rem;
|
|
5185
|
+
box-shadow: none;
|
|
5186
|
+
border-radius: .375rem;
|
|
5187
|
+
padding: .38rem .65rem;
|
|
5188
|
+
}
|
|
5189
|
+
|
|
5190
|
+
.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 {
|
|
5191
|
+
background: var(--saas-surface);
|
|
5192
|
+
border: 1px solid var(--saas-border);
|
|
5193
|
+
box-shadow: var(--saas-shadow-md);
|
|
5194
|
+
border-radius: .5rem;
|
|
5195
|
+
}
|
|
5196
|
+
|
|
5197
|
+
.saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
|
|
5198
|
+
padding: 1rem;
|
|
5199
|
+
}
|
|
5200
|
+
|
|
5201
|
+
.saas-well, .saas-inset {
|
|
5202
|
+
background: rgb(var(--saas-surface-soft-rgb)/.72);
|
|
5203
|
+
border: 1px solid var(--saas-border);
|
|
5204
|
+
box-shadow: none;
|
|
5205
|
+
border-radius: .375rem;
|
|
5206
|
+
padding: .75rem;
|
|
5207
|
+
}
|
|
5208
|
+
|
|
5209
|
+
.saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
|
|
5210
|
+
border-radius: .25rem;
|
|
5211
|
+
min-height: 1.35rem;
|
|
5212
|
+
padding: .18rem .45rem;
|
|
5213
|
+
}
|
|
5214
|
+
|
|
5215
|
+
.saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
|
|
5216
|
+
background: var(--saas-surface);
|
|
5217
|
+
border: 1px solid var(--saas-border);
|
|
5218
|
+
border-inline-start: 1px solid var(--saas-primary);
|
|
5219
|
+
box-shadow: none;
|
|
5220
|
+
border-radius: .375rem;
|
|
5221
|
+
}
|
|
5222
|
+
|
|
5223
|
+
.saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
|
|
5224
|
+
background: rgb(var(--saas-surface-soft-rgb)/.82);
|
|
5225
|
+
height: .3rem;
|
|
5226
|
+
}
|
|
5227
|
+
|
|
5228
|
+
.saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
|
|
5229
|
+
background: var(--saas-primary);
|
|
5230
|
+
box-shadow: none;
|
|
5231
|
+
}
|
|
5232
|
+
|
|
5233
|
+
.saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
|
|
5234
|
+
background: var(--saas-surface);
|
|
5235
|
+
box-shadow: none;
|
|
5236
|
+
border-radius: .5rem;
|
|
5237
|
+
}
|
|
5238
|
+
|
|
5239
|
+
.saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
|
|
5240
|
+
background: rgb(var(--saas-surface-soft-rgb)/.58);
|
|
5241
|
+
padding: .6rem .7rem;
|
|
5242
|
+
font-weight: 650;
|
|
5243
|
+
}
|
|
5244
|
+
|
|
5245
|
+
.saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
|
|
5246
|
+
padding: .6rem .7rem;
|
|
5247
|
+
}
|
|
5248
|
+
|
|
5249
|
+
.saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
|
|
5250
|
+
border: 0;
|
|
5251
|
+
border-bottom: 1px solid var(--saas-border);
|
|
5252
|
+
box-shadow: none;
|
|
5253
|
+
background: none;
|
|
5254
|
+
border-radius: 0;
|
|
5255
|
+
padding: 0;
|
|
5256
|
+
}
|
|
5257
|
+
|
|
5258
|
+
.saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
|
|
5259
|
+
border-radius: .25rem;
|
|
5260
|
+
min-height: 2.125rem;
|
|
5261
|
+
padding: .4rem .62rem;
|
|
5262
|
+
}
|
|
5263
|
+
|
|
5264
|
+
.saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5265
|
+
box-shadow: 0 2px 6px rgb(var(--saas-text-rgb)/.12);
|
|
5266
|
+
border-radius: .25rem;
|
|
5267
|
+
}
|
|
5268
|
+
|
|
5269
|
+
.saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
|
|
5270
|
+
background: var(--saas-surface);
|
|
5271
|
+
box-shadow: none;
|
|
5272
|
+
border-radius: .5rem;
|
|
5273
|
+
padding: 1rem;
|
|
5274
|
+
}
|
|
5275
|
+
|
|
5276
|
+
.saas-feature-item {
|
|
5277
|
+
padding: .75rem;
|
|
5278
|
+
}
|
|
5279
|
+
|
|
5280
|
+
[data-ui="minimal-saas"][data-mode] :where(dialog) {
|
|
5281
|
+
background: var(--saas-surface);
|
|
5282
|
+
box-shadow: 0 .5rem 1.25rem rgb(var(--saas-text-rgb)/.12);
|
|
5283
|
+
border-radius: .5rem;
|
|
5284
|
+
}
|
|
5285
|
+
|
|
5286
|
+
.saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
5287
|
+
background: rgb(var(--saas-success-rgb)/.12);
|
|
5288
|
+
border-color: rgb(var(--saas-success-rgb)/.58);
|
|
5289
|
+
}
|
|
5290
|
+
|
|
5291
|
+
.saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
5292
|
+
background: rgb(var(--saas-warning-rgb)/.12);
|
|
5293
|
+
border-color: rgb(var(--saas-warning-rgb)/.58);
|
|
5294
|
+
}
|
|
5295
|
+
|
|
5296
|
+
.saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
5297
|
+
background: rgb(var(--saas-danger-rgb)/.12);
|
|
5298
|
+
border-color: rgb(var(--saas-danger-rgb)/.58);
|
|
5299
|
+
}
|
|
5300
|
+
|
|
5301
|
+
.saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5302
|
+
background: linear-gradient(135deg,var(--saas-primary),var(--saas-brand-2));
|
|
5303
|
+
color: var(--saas-on-primary);
|
|
5304
|
+
border-color: var(--saas-primary);
|
|
5305
|
+
}
|
|
5306
|
+
|
|
5307
|
+
.saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5308
|
+
background: var(--saas-surface);
|
|
5309
|
+
color: var(--saas-primary);
|
|
5310
|
+
border-color: var(--saas-primary);
|
|
5311
|
+
}
|
|
5312
|
+
|
|
5313
|
+
.saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5314
|
+
background: var(--saas-danger);
|
|
5315
|
+
color: var(--saas-on-danger);
|
|
5316
|
+
border-color: var(--saas-danger);
|
|
5317
|
+
}
|
|
5318
|
+
|
|
5319
|
+
.saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5320
|
+
color: var(--saas-primary);
|
|
5321
|
+
background: none;
|
|
5322
|
+
border-color: #0000;
|
|
5323
|
+
}
|
|
5324
|
+
|
|
5325
|
+
@media (pointer: coarse) {
|
|
5326
|
+
[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) {
|
|
5327
|
+
min-block-size: 2.75rem;
|
|
5328
|
+
}
|
|
5329
|
+
}
|
|
5330
|
+
|
|
5331
|
+
.saas-card-service > .saas-icon-medallion, .saas-feature-item > .saas-icon-medallion {
|
|
5332
|
+
font-size: 1.5rem;
|
|
5333
|
+
line-height: 1;
|
|
5334
|
+
}
|
|
5335
|
+
|
|
5336
|
+
.saas-callout-bar > .saas-icon-medallion {
|
|
5337
|
+
min-block-size: 4.5rem;
|
|
5338
|
+
min-inline-size: 4.5rem;
|
|
5339
|
+
padding-block: .55rem .85rem;
|
|
5340
|
+
font-size: 2rem;
|
|
5341
|
+
font-weight: 800;
|
|
5342
|
+
line-height: 1;
|
|
5343
|
+
}
|
|
5344
|
+
|
|
5345
|
+
.saas-badge-seal > strong {
|
|
5346
|
+
font-size: 1.125rem;
|
|
5347
|
+
line-height: .9;
|
|
5348
|
+
}
|
|
5349
|
+
|
|
5350
|
+
.saas-badge-seal > small {
|
|
5351
|
+
font-size: .78rem;
|
|
5352
|
+
line-height: 1;
|
|
5353
|
+
}
|
|
5354
|
+
|
|
5355
|
+
[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"]) {
|
|
5356
|
+
background: var(--saas-warning);
|
|
5357
|
+
color: var(--saas-on-warning);
|
|
5358
|
+
border-color: var(--saas-warning);
|
|
5359
|
+
text-shadow: none;
|
|
5360
|
+
}
|
|
5361
|
+
}
|
|
5362
|
+
|
|
5363
|
+
[data-ui="minimal-saas"][data-mode] .saas-title {
|
|
5364
|
+
letter-spacing: max(.03em, .5px);
|
|
5365
|
+
margin-block: max(.75rem, 12px);
|
|
5366
|
+
}
|
|
5367
|
+
|
|
5368
|
+
[data-ui="minimal-saas"][data-mode] .saas-feature-item > .saas-icon-medallion {
|
|
5369
|
+
font-size: 1.5rem;
|
|
5370
|
+
line-height: 1;
|
|
5371
|
+
}
|
|
5372
|
+
|
|
5373
|
+
[data-ui="minimal-saas"][data-mode] .saas-callout-bar > .saas-icon-medallion {
|
|
5374
|
+
min-block-size: 4.5rem;
|
|
5375
|
+
min-inline-size: 4.5rem;
|
|
5376
|
+
font-size: 2rem;
|
|
5377
|
+
font-weight: 800;
|
|
5378
|
+
line-height: 1;
|
|
4685
5379
|
}
|