@scattered-light/loomiere-mojave 0.7.1 → 0.9.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/dist/exports/AGENTS.md +8 -5
- package/dist/exports/catalog.json +10 -0
- package/dist/exports/design-system/README.md +8 -5
- package/dist/exports/design-system/components/AppBar/README.md +58 -0
- package/dist/exports/design-system/components/AppBar/preview.html +19 -0
- package/dist/exports/design-system/components/ContextMenu/README.md +1 -1
- package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/exports/design-system/components/DataList/README.md +1 -1
- package/dist/exports/design-system/components/DataList/preview.html +1 -1
- package/dist/exports/design-system/components/DataTable/README.md +1 -1
- package/dist/exports/design-system/components/DataTable/preview.html +38 -38
- package/dist/exports/design-system/components/DescriptionList/README.md +41 -0
- package/dist/exports/design-system/components/DescriptionList/preview.html +19 -0
- package/dist/exports/design-system/components/Drawer/README.md +1 -1
- package/dist/exports/design-system/components/PickerButton/README.md +56 -0
- package/dist/exports/design-system/components/PickerButton/preview.html +19 -0
- package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/exports/design-system/components/Sheet/README.md +46 -0
- package/dist/exports/design-system/components/Sheet/preview.html +19 -0
- package/dist/exports/design-system/components/StatFigure/README.md +38 -0
- package/dist/exports/design-system/components/StatFigure/preview.html +19 -0
- package/dist/exports/design-system/components/Table/README.md +2 -2
- package/dist/exports/design-system/components/Table/preview.html +2 -2
- package/dist/exports/design-system/components/ToggleGroup/README.md +2 -2
- package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/exports/design-system/components/bundle.css +743 -85
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/dist/exports/design-system/tokens.json +35 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +105 -0
- package/dist/exports/tokens.dtcg.json +383 -26
- package/dist/tokens.css +182 -29
- package/dist/tokens.d.ts +98 -0
- package/dist/tokens.js +99 -1
- package/dist/tokens.json +707 -27
- package/dist/utilities.css +30 -0
- package/package.json +2 -2
package/dist/tokens.css
CHANGED
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
--sl-letter-spacing-normal: 0; /** Body text. */
|
|
93
93
|
--sl-letter-spacing-wide: 0.025em; /** Small text that needs air. */
|
|
94
94
|
--sl-letter-spacing-wider: 0.05em; /** Small caps and labels. */
|
|
95
|
+
--sl-letter-spacing-caps: 0.08em; /** Uppercase labels that sit beside figures, such as a column head or a working-paper caption. Between wider and widest. */
|
|
95
96
|
--sl-letter-spacing-widest: 0.1em; /** Uppercase group labels. */
|
|
96
97
|
--sl-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /** Platform UI font. Fallback when a brand typeface is unavailable. */
|
|
97
98
|
--sl-font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /** Platform serif stack. */
|
|
@@ -762,8 +763,12 @@
|
|
|
762
763
|
--sl-popup-scale-closed: 0.95; /** Popups grow from just under full size as they open, so they seem to come from the trigger. */
|
|
763
764
|
--sl-popup-list-max-height: 300px; /** A long list scrolls inside the popup after about seven rows. */
|
|
764
765
|
--sl-popup-min-width: 200px; /** Narrowest a free-floating popup or menu gets, so short labels don't make a sliver. */
|
|
766
|
+
--sl-rule-width: 0px; /** Thickness of the top rule. 0 turns it off and leaves every top edge as it was. Point it at a stroke step (stroke.medium or stroke.thick) to turn it on. */
|
|
765
767
|
--sl-color-scheme: light; /** Which way native browser parts (scrollbars, date pickers, autofill) draw: light, or dark wherever the dark theme is on. Set as color-scheme on the root and handed to AG Grid's browserColorScheme, so they follow data-theme as well as the system setting. */
|
|
768
|
+
--sl-font-figures-base-font-variant-numeric: tabular-nums; /** font-variant-numeric of font.figures-base. */
|
|
769
|
+
--sl-font-figures-condense-font-variant-numeric: tabular-nums; /** font-variant-numeric of font.figures-condense. */
|
|
766
770
|
--sl-font-eyebrow-condense-text-transform: uppercase; /** text-transform of font.eyebrow-condense. */
|
|
771
|
+
--sl-font-caps-condense-text-transform: uppercase; /** text-transform of font.caps-condense. */
|
|
767
772
|
--sl-font-eyebrow-minimize-text-transform: uppercase; /** text-transform of font.eyebrow-minimize. */
|
|
768
773
|
--sl-emphasis-standard-bg: transparent; /** standard in default: outline in accent (primary) */
|
|
769
774
|
--sl-emphasis-quiet-bg: transparent; /** quiet in default: outline in chrome (neutral) */
|
|
@@ -778,6 +783,7 @@
|
|
|
778
783
|
--sl-status-level-error-standard-bg: transparent; /** standard in error: outline in error */
|
|
779
784
|
--sl-status-level-error-quiet-bg: transparent; /** quiet in error: outline in error */
|
|
780
785
|
--sl-button-opacity-disabled: 0.5; /** A disabled button fades as a whole, keeping its shape so the layout doesn't jump. */
|
|
786
|
+
--sl-description-list-label-width: minmax(8rem, 1fr); /** The label column in the default variant. The value column takes twice the room. */
|
|
781
787
|
--sl-drawer-popup-size: min(420px, 90vw); /** Width of a side drawer. A bottom or top drawer sizes to its content up to max-size. */
|
|
782
788
|
--sl-drawer-popup-max-size: 85vh; /** Tallest a bottom or top drawer gets, leaving the page visible above it. */
|
|
783
789
|
--sl-list-detail-split-min-width: 720px; /** Side by side once this element, not the window, is this wide. Dryden used 1100px of the window. A container needs less: a list around 320px and a form around 400px still read at 720px. Narrower, the detail becomes a drawer or a page. */
|
|
@@ -786,6 +792,7 @@
|
|
|
786
792
|
--sl-list-detail-detail-max-size: 65%; /** The detail cannot cover more than this, so the list stays usable. Dryden kept the detail between 35% and 65%. */
|
|
787
793
|
--sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
|
|
788
794
|
--sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
|
|
795
|
+
--sl-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
|
|
789
796
|
--sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
|
|
790
797
|
--sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
|
|
791
798
|
--sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
|
|
@@ -1442,7 +1449,6 @@
|
|
|
1442
1449
|
--sl-vision-achromatopsia-color-data-19: var(--sl-vision-achromatopsia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
|
|
1443
1450
|
--sl-vision-achromatopsia-color-data-20: var(--sl-vision-achromatopsia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
|
|
1444
1451
|
--sl-focus-ring-width: var(--sl-a11y-focus-outline-width); /** Alias for the focus outline width, kept for components that style rings with box-shadow. */
|
|
1445
|
-
--sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
|
|
1446
1452
|
--sl-focus-outline-offset: var(--sl-a11y-focus-outline-offset); /** Outside ring: a gap between the control and the ring so it never blends into the control border. The default. */
|
|
1447
1453
|
--sl-focus-outline-offset-inset: calc(-1 * var(--sl-a11y-focus-outline-width)); /** Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor. */
|
|
1448
1454
|
--sl-focus-halo-spread: calc(var(--sl-a11y-focus-outline-offset) + var(--sl-a11y-focus-outline-width) + 2px); /** A soft glow just outside the focus ring: the gap, the ring, then 2px of tint. The ring carries the contrast (WCAG 1.4.11), so the glow can stay pale. */
|
|
@@ -1547,6 +1553,7 @@
|
|
|
1547
1553
|
--sl-spacing-stack-md: var(--sl-space-6);
|
|
1548
1554
|
--sl-spacing-stack-sm: var(--sl-space-4);
|
|
1549
1555
|
--sl-spacing-stack-xs: var(--sl-space-2);
|
|
1556
|
+
--sl-table-grand-total-rule-width: var(--sl-stroke-thick); /** The double line under a grand total row (tr data-total="grand"). It is drawn as a CSS double border, which needs at least 3px to show two strokes. */
|
|
1550
1557
|
--sl-font-body-base-font-family: var(--sl-font-family-body); /** font-family of font.body-base. */
|
|
1551
1558
|
--sl-font-body-base-font-size: var(--sl-font-size-md); /** font-size of font.body-base. */
|
|
1552
1559
|
--sl-font-body-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-base. */
|
|
@@ -1582,11 +1589,21 @@
|
|
|
1582
1589
|
--sl-font-title-base-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-base. */
|
|
1583
1590
|
--sl-font-title-base-line-height: var(--sl-line-height-md); /** line-height of font.title-base. */
|
|
1584
1591
|
--sl-font-title-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-base. */
|
|
1592
|
+
--sl-font-figures-base-font-family: var(--sl-font-family-mono); /** font-family of font.figures-base. */
|
|
1593
|
+
--sl-font-figures-base-font-size: var(--sl-font-size-md); /** font-size of font.figures-base. */
|
|
1594
|
+
--sl-font-figures-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.figures-base. */
|
|
1595
|
+
--sl-font-figures-base-line-height: var(--sl-line-height-md); /** line-height of font.figures-base. */
|
|
1596
|
+
--sl-font-figures-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.figures-base. */
|
|
1585
1597
|
--sl-font-code-condense-font-family: var(--sl-font-family-mono); /** font-family of font.code-condense. */
|
|
1586
1598
|
--sl-font-code-condense-font-size: var(--sl-font-size-sm); /** font-size of font.code-condense. */
|
|
1587
1599
|
--sl-font-code-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.code-condense. */
|
|
1588
1600
|
--sl-font-code-condense-line-height: var(--sl-line-height-sm); /** line-height of font.code-condense. */
|
|
1589
1601
|
--sl-font-code-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.code-condense. */
|
|
1602
|
+
--sl-font-figures-condense-font-family: var(--sl-font-family-mono); /** font-family of font.figures-condense. */
|
|
1603
|
+
--sl-font-figures-condense-font-size: var(--sl-font-size-sm); /** font-size of font.figures-condense. */
|
|
1604
|
+
--sl-font-figures-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.figures-condense. */
|
|
1605
|
+
--sl-font-figures-condense-line-height: var(--sl-line-height-sm); /** line-height of font.figures-condense. */
|
|
1606
|
+
--sl-font-figures-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.figures-condense. */
|
|
1590
1607
|
--sl-font-body-condense-font-family: var(--sl-font-family-body); /** font-family of font.body-condense. */
|
|
1591
1608
|
--sl-font-body-condense-font-size: var(--sl-font-size-sm); /** font-size of font.body-condense. */
|
|
1592
1609
|
--sl-font-body-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-condense. */
|
|
@@ -1617,6 +1634,11 @@
|
|
|
1617
1634
|
--sl-font-eyebrow-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.eyebrow-condense. */
|
|
1618
1635
|
--sl-font-eyebrow-condense-line-height: var(--sl-line-height-sm); /** line-height of font.eyebrow-condense. */
|
|
1619
1636
|
--sl-font-eyebrow-condense-letter-spacing: var(--sl-letter-spacing-wider); /** letter-spacing of font.eyebrow-condense. */
|
|
1637
|
+
--sl-font-caps-condense-font-family: var(--sl-font-family-body); /** font-family of font.caps-condense. */
|
|
1638
|
+
--sl-font-caps-condense-font-size: var(--sl-font-size-sm); /** font-size of font.caps-condense. */
|
|
1639
|
+
--sl-font-caps-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.caps-condense. */
|
|
1640
|
+
--sl-font-caps-condense-line-height: var(--sl-line-height-sm); /** line-height of font.caps-condense. */
|
|
1641
|
+
--sl-font-caps-condense-letter-spacing: var(--sl-letter-spacing-caps); /** letter-spacing of font.caps-condense. */
|
|
1620
1642
|
--sl-font-title-condense-font-family: var(--sl-font-family-display); /** font-family of font.title-condense. */
|
|
1621
1643
|
--sl-font-title-condense-font-size: var(--sl-font-size-sm); /** font-size of font.title-condense. */
|
|
1622
1644
|
--sl-font-title-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-condense. */
|
|
@@ -1824,6 +1846,10 @@
|
|
|
1824
1846
|
--sl-scope-info-signal: var(--sl-color-info-500); /** info signal: 500 in light, 400 in dark */
|
|
1825
1847
|
--sl-scope-info-focus: var(--sl-color-info-500); /** info focus: 500 in light, 400 in dark */
|
|
1826
1848
|
--sl-scope-chrome-fg: var(--sl-color-primary-1000); /** chrome fg, picked in the brand file (roles.concepts). */
|
|
1849
|
+
--sl-app-bar-height: var(--sl-space-16); /** Least height of the bar. It grows if its contents wrap. */
|
|
1850
|
+
--sl-app-bar-padding-inline: var(--sl-space-6); /** Space at the bar's start and end. */
|
|
1851
|
+
--sl-app-bar-gap: var(--sl-space-2-5); /** Space between the things in the bar. */
|
|
1852
|
+
--sl-app-bar-divider-height: var(--sl-space-6); /** Height of a vertical Separator between groups of actions in the bar. */
|
|
1827
1853
|
--sl-avatar-size-xs: var(--sl-space-8); /** 32px, inline with text and in dense lists. */
|
|
1828
1854
|
--sl-avatar-size-sm: var(--sl-space-10); /** 40px, in list rows and comments. */
|
|
1829
1855
|
--sl-avatar-size-md: var(--sl-space-12); /** 48px, the default. */
|
|
@@ -1854,6 +1880,10 @@
|
|
|
1854
1880
|
--sl-collection-narrow-width: var(--sl-space-96); /** Below this, a table with narrow="list" becomes a list, and the toolbar's search takes the full width. A 360px pane is under it. */
|
|
1855
1881
|
--sl-collection-editable-list-stack-width: var(--sl-space-80); /** Below this, editable rows stack and show their own labels. 320px matches. */
|
|
1856
1882
|
--sl-collection-selection-column-width: var(--sl-space-10); /** The checkbox column. Wide enough for the control, no wider, so the data keeps the room. */
|
|
1883
|
+
--sl-description-list-row-padding-block: var(--sl-space-2); /** Space above and below each pair. */
|
|
1884
|
+
--sl-description-list-row-padding-inline: var(--sl-space-4); /** Space either side of each pair, so pairs inside a sheet line up with its tab label. */
|
|
1885
|
+
--sl-description-list-column-gap: var(--sl-space-4); /** Space between the label column and the value column in the default variant. */
|
|
1886
|
+
--sl-description-list-leader-gap: var(--sl-space-1-5); /** Space between the leader and the label or value either side of it. */
|
|
1857
1887
|
--sl-drawer-handle-width: var(--sl-space-10); /** Grab bar length. */
|
|
1858
1888
|
--sl-drawer-handle-height: var(--sl-space-1); /** Grab bar thickness. */
|
|
1859
1889
|
--sl-list-detail-header-gap: var(--sl-space-3); /** Space between the title, the actions and Close. */
|
|
@@ -1861,9 +1891,22 @@
|
|
|
1861
1891
|
--sl-money-field-picker-min-inline-size: var(--sl-space-56); /** The currency list shows a code, a name and a symbol, so the popup is wider than the code trigger inside the field. */
|
|
1862
1892
|
--sl-popover-text-max-width: var(--sl-measure-narrow); /** Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger. */
|
|
1863
1893
|
--sl-popover-popup-min-width: var(--sl-popup-min-width); /** Narrow enough for a short note, wide enough that a title doesn't wrap word by word. */
|
|
1894
|
+
--sl-sheet-rule-width: var(--sl-stroke-medium); /** The top rule. A sheet always has one, so it is its own token rather than rule.width (which is 0 until a brand turns it on for tables and drawers). */
|
|
1895
|
+
--sl-sheet-padding: var(--sl-space-4); /** Space inside a sheet with inset set. Without it, rows and tables inside run edge to edge. */
|
|
1896
|
+
--sl-sheet-tab-height: var(--sl-space-7); /** Height of the tab label. */
|
|
1897
|
+
--sl-sheet-tab-padding-inline: var(--sl-space-3-5); /** Space either side of the tab label's text. */
|
|
1898
|
+
--sl-sheet-tab-radius: var(--sl-radius-sm); /** The tab label's top corners. Its bottom corners stay square where it meets the rule. */
|
|
1899
|
+
--sl-sheet-header-gap: var(--sl-space-3); /** Space between the tab label and an action at the end of the header row, such as an Edit link. */
|
|
1864
1900
|
--sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
|
|
1865
1901
|
--sl-splitter-handle-hit-size: var(--sl-a11y-min-touch-target); /** The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px. */
|
|
1866
1902
|
--sl-splitter-grip-size: var(--sl-space-1); /** 4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control. */
|
|
1903
|
+
--sl-stat-figure-figure-font-size: var(--sl-font-size-4xl); /** Size of the figure. Large enough to lead the page, a step under the page title. */
|
|
1904
|
+
--sl-stat-figure-figure-font-size-sm: var(--sl-font-size-2xl); /** Size of the figure at size="sm", for a row of figures in a card or a sheet header. */
|
|
1905
|
+
--sl-stat-figure-figure-line-height: var(--sl-line-height-4xl); /** Line height paired with figure-font-size. */
|
|
1906
|
+
--sl-stat-figure-figure-line-height-sm: var(--sl-line-height-2xl); /** Line height paired with figure-font-size-sm. */
|
|
1907
|
+
--sl-stat-figure-figure-font-weight: var(--sl-font-weight-semibold); /** Weight of the figure. */
|
|
1908
|
+
--sl-stat-figure-underline-width: var(--sl-stroke-thick); /** The double underline at underline="double", the accountant's mark for a final total. A CSS double border, so at least 3px. */
|
|
1909
|
+
--sl-stat-figure-gap: var(--sl-space-1); /** Space between the label, the figure and the caption. */
|
|
1867
1910
|
--sl-switch-track-text-font-size: var(--sl-font-size-xs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
|
|
1868
1911
|
--sl-switch-track-text-font-size-sm: var(--sl-font-size-xxs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
|
|
1869
1912
|
--sl-switch-track-text-font-size-lg: var(--sl-font-size-sm); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
|
|
@@ -1895,7 +1938,6 @@
|
|
|
1895
1938
|
--sl-color-chrome-on-1100: var(--sl-color-neutral-on-1100);
|
|
1896
1939
|
--sl-color-chrome-on-1200: var(--sl-color-neutral-on-1200);
|
|
1897
1940
|
--sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
|
|
1898
|
-
--sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
|
|
1899
1941
|
--sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
|
|
1900
1942
|
--sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
|
|
1901
1943
|
--sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
|
|
@@ -1914,6 +1956,7 @@
|
|
|
1914
1956
|
--sl-status-warning-dark: var(--sl-scope-warning-fg); /** Warning color for text or icons that need more contrast. */
|
|
1915
1957
|
--sl-status-warning-light: var(--sl-scope-warning-soft); /** Warning tint for caution backgrounds. */
|
|
1916
1958
|
--sl-text-primary: var(--sl-scope-chrome-fg); /** Body text and headings. The highest-contrast neutral. */
|
|
1959
|
+
--sl-content-pre-radius: var(--sl-radius-surface); /** Code block corners, like any panel, so a brand that squares its surfaces squares code blocks too. */
|
|
1917
1960
|
--sl-disclosure-indicator-width: var(--sl-stroke-emphasis); /** Selected tab line thickness. */
|
|
1918
1961
|
--sl-field-border-width: var(--sl-stroke-default); /** Field edge thickness. */
|
|
1919
1962
|
--sl-field-radius: var(--sl-radius-control); /** Field corners, the same as every other control. */
|
|
@@ -1935,32 +1978,36 @@
|
|
|
1935
1978
|
--sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
|
|
1936
1979
|
--sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
|
|
1937
1980
|
--sl-table-radius: var(--sl-radius-surface); /** Grid corners, like any card or panel. */
|
|
1938
|
-
--sl-
|
|
1939
|
-
--sl-font-
|
|
1940
|
-
--sl-font-
|
|
1941
|
-
--sl-font-
|
|
1942
|
-
--sl-font-
|
|
1943
|
-
--sl-font-
|
|
1944
|
-
--sl-font-
|
|
1945
|
-
--sl-font-
|
|
1946
|
-
--sl-font-
|
|
1947
|
-
--sl-font-
|
|
1948
|
-
--sl-font-
|
|
1949
|
-
--sl-font-
|
|
1950
|
-
--sl-font-
|
|
1951
|
-
--sl-font-
|
|
1952
|
-
--sl-font-
|
|
1953
|
-
--sl-font-
|
|
1954
|
-
--sl-font-
|
|
1955
|
-
--sl-font-
|
|
1956
|
-
--sl-font-
|
|
1957
|
-
--sl-font-
|
|
1958
|
-
--sl-font-
|
|
1959
|
-
--sl-font-
|
|
1960
|
-
--sl-font-
|
|
1961
|
-
--sl-font-
|
|
1962
|
-
--sl-font-
|
|
1963
|
-
--sl-font-
|
|
1981
|
+
--sl-table-subtotal-rule-width: var(--sl-stroke-default); /** The single line above a subtotal row (tr data-total="subtotal"), the line an accountant draws before adding a column. */
|
|
1982
|
+
--sl-font-body-base-font: var(--sl-font-body-base-font-weight) var(--sl-font-body-base-font-size) / var(--sl-font-body-base-line-height) var(--sl-font-body-base-font-family); /** Body copy in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1983
|
+
--sl-font-selected-base-font: var(--sl-font-selected-base-font-weight) var(--sl-font-selected-base-font-size) / var(--sl-font-selected-base-line-height) var(--sl-font-selected-base-font-family); /** The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1984
|
+
--sl-font-label-base-font: var(--sl-font-label-base-font-weight) var(--sl-font-label-base-font-size) / var(--sl-font-label-base-line-height) var(--sl-font-label-base-font-family); /** Form labels in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1985
|
+
--sl-font-link-base-font: var(--sl-font-link-base-font-weight) var(--sl-font-link-base-font-size) / var(--sl-font-link-base-line-height) var(--sl-font-link-base-font-family); /** Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1986
|
+
--sl-font-subtitle-base-font: var(--sl-font-subtitle-base-font-weight) var(--sl-font-subtitle-base-font-size) / var(--sl-font-subtitle-base-line-height) var(--sl-font-subtitle-base-font-family); /** Subtitles in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1987
|
+
--sl-font-trigger-base-font: var(--sl-font-trigger-base-font-weight) var(--sl-font-trigger-base-font-size) / var(--sl-font-trigger-base-line-height) var(--sl-font-trigger-base-font-family); /** Buttons and triggers in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1988
|
+
--sl-font-title-base-font: var(--sl-font-title-base-font-weight) var(--sl-font-title-base-font-size) / var(--sl-font-title-base-line-height) var(--sl-font-title-base-font-family); /** Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1989
|
+
--sl-font-figures-base-font: var(--sl-font-figures-base-font-weight) var(--sl-font-figures-base-font-size) / var(--sl-font-figures-base-line-height) var(--sl-font-figures-base-font-family); /** Figures in the base tier: an amount beside base text, a balance in a card. The mono family with tabular numbers, so digits line up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1990
|
+
--sl-font-code-condense-font: var(--sl-font-code-condense-font-weight) var(--sl-font-code-condense-font-size) / var(--sl-font-code-condense-line-height) var(--sl-font-code-condense-font-family); /** Code uses the mono family so characters line up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1991
|
+
--sl-font-figures-condense-font: var(--sl-font-figures-condense-font-weight) var(--sl-font-figures-condense-font-size) / var(--sl-font-figures-condense-line-height) var(--sl-font-figures-condense-font-family); /** Figures in the condense tier: amounts and counts in tables and dense rows. The mono family with tabular numbers, so digits line up down a column. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1992
|
+
--sl-font-body-condense-font: var(--sl-font-body-condense-font-weight) var(--sl-font-body-condense-font-size) / var(--sl-font-body-condense-line-height) var(--sl-font-body-condense-font-family); /** Body copy in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1993
|
+
--sl-font-trigger-condense-font: var(--sl-font-trigger-condense-font-weight) var(--sl-font-trigger-condense-font-size) / var(--sl-font-trigger-condense-line-height) var(--sl-font-trigger-condense-font-family); /** Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1994
|
+
--sl-font-selected-condense-font: var(--sl-font-selected-condense-font-weight) var(--sl-font-selected-condense-font-size) / var(--sl-font-selected-condense-line-height) var(--sl-font-selected-condense-font-family); /** The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1995
|
+
--sl-font-link-condense-font: var(--sl-font-link-condense-font-weight) var(--sl-font-link-condense-font-size) / var(--sl-font-link-condense-line-height) var(--sl-font-link-condense-font-family); /** Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1996
|
+
--sl-font-subtitle-condense-font: var(--sl-font-subtitle-condense-font-weight) var(--sl-font-subtitle-condense-font-size) / var(--sl-font-subtitle-condense-line-height) var(--sl-font-subtitle-condense-font-family); /** Subtitles in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1997
|
+
--sl-font-eyebrow-condense-font: var(--sl-font-eyebrow-condense-font-weight) var(--sl-font-eyebrow-condense-font-size) / var(--sl-font-eyebrow-condense-line-height) var(--sl-font-eyebrow-condense-font-family); /** Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1998
|
+
--sl-font-caps-condense-font: var(--sl-font-caps-condense-font-weight) var(--sl-font-caps-condense-font-size) / var(--sl-font-caps-condense-line-height) var(--sl-font-caps-condense-font-family); /** Caps labels in the condense tier: a working-paper caption, a column head over figures, a sheet's tab label. Uppercase and tracked a little wider than an eyebrow, so it reads as a label and not a heading. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1999
|
+
--sl-font-title-condense-font: var(--sl-font-title-condense-font-weight) var(--sl-font-title-condense-font-size) / var(--sl-font-title-condense-line-height) var(--sl-font-title-condense-font-family); /** Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2000
|
+
--sl-font-body-magnify-font: var(--sl-font-body-magnify-font-weight) var(--sl-font-body-magnify-font-size) / var(--sl-font-body-magnify-line-height) var(--sl-font-body-magnify-font-family); /** Body copy in the magnify tier, emphasized body text (lead paragraphs). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2001
|
+
--sl-font-trigger-magnify-font: var(--sl-font-trigger-magnify-font-weight) var(--sl-font-trigger-magnify-font-size) / var(--sl-font-trigger-magnify-line-height) var(--sl-font-trigger-magnify-font-family); /** Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2002
|
+
--sl-font-title-magnify-font: var(--sl-font-title-magnify-font-weight) var(--sl-font-title-magnify-font-size) / var(--sl-font-title-magnify-line-height) var(--sl-font-title-magnify-font-family); /** Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2003
|
+
--sl-font-body-minimize-font: var(--sl-font-body-minimize-font-weight) var(--sl-font-body-minimize-font-size) / var(--sl-font-body-minimize-line-height) var(--sl-font-body-minimize-font-family); /** Body copy in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2004
|
+
--sl-font-trigger-minimize-font: var(--sl-font-trigger-minimize-font-weight) var(--sl-font-trigger-minimize-font-size) / var(--sl-font-trigger-minimize-line-height) var(--sl-font-trigger-minimize-font-family); /** Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2005
|
+
--sl-font-selected-minimize-font: var(--sl-font-selected-minimize-font-weight) var(--sl-font-selected-minimize-font-size) / var(--sl-font-selected-minimize-line-height) var(--sl-font-selected-minimize-font-family); /** The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2006
|
+
--sl-font-link-minimize-font: var(--sl-font-link-minimize-font-weight) var(--sl-font-link-minimize-font-size) / var(--sl-font-link-minimize-line-height) var(--sl-font-link-minimize-font-family); /** Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2007
|
+
--sl-font-subtitle-minimize-font: var(--sl-font-subtitle-minimize-font-weight) var(--sl-font-subtitle-minimize-font-size) / var(--sl-font-subtitle-minimize-line-height) var(--sl-font-subtitle-minimize-font-family); /** Subtitles in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2008
|
+
--sl-font-eyebrow-minimize-font: var(--sl-font-eyebrow-minimize-font-weight) var(--sl-font-eyebrow-minimize-font-size) / var(--sl-font-eyebrow-minimize-line-height) var(--sl-font-eyebrow-minimize-font-family); /** Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2009
|
+
--sl-font-title-amplify-font: var(--sl-font-title-amplify-font-weight) var(--sl-font-title-amplify-font-size) / var(--sl-font-title-amplify-line-height) var(--sl-font-title-amplify-font-family); /** Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
2010
|
+
--sl-font-title-maximize-font: var(--sl-font-title-maximize-font-weight) var(--sl-font-title-maximize-font-size) / var(--sl-font-title-maximize-line-height) var(--sl-font-title-maximize-font-family); /** Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
|
|
1964
2011
|
--sl-emphasis-quiet-fg: var(--sl-scope-chrome-fg); /** quiet in default: outline in chrome (neutral) */
|
|
1965
2012
|
--sl-pair-ember-dune-hover: color-mix(in oklab, var(--sl-pair-ember-dune-accent) 85%, var(--sl-pair-ember-dune-bg)); /** Accent on hover: accent moved 15% toward bg. 4.76:1 against bg, which is the button label. */
|
|
1966
2013
|
--sl-pair-ember-dune-active: var(--sl-pair-ember-dune-accent); /** Accent while pressed: the accent itself, because moving it would drop the button label below AA. */
|
|
@@ -2113,11 +2160,15 @@
|
|
|
2113
2160
|
--sl-status-level-error-quiet-fg: var(--sl-scope-error-fg); /** quiet in error: outline in error */
|
|
2114
2161
|
--sl-status-level-error-quiet-border: var(--sl-scope-error-border); /** quiet in error: outline in error */
|
|
2115
2162
|
--sl-status-level-error-quiet-border-hover: var(--sl-scope-error-solid-hover); /** quiet in error: outline in error */
|
|
2163
|
+
--sl-app-bar-border-width: var(--sl-stroke-default); /** The line under the bar while rule.width is 0. With rule.width on, the line takes the thicker of the two. */
|
|
2116
2164
|
--sl-button-radius: var(--sl-radius-pill); /** Buttons are pills, so they read as actions and never as fields or cards. */
|
|
2117
2165
|
--sl-collection-row-height-sm: var(--sl-control-height-sm); /** The dense row, the same height the plain table already uses, so a checkbox fits. */
|
|
2118
2166
|
--sl-collection-row-height-md: var(--sl-control-height-md); /** A roomier row when the collection is the page rather than a dense register. */
|
|
2119
2167
|
--sl-collection-header-height-sm: var(--sl-control-height-md); /** The dense header, a step above the dense row, matching today's table header. */
|
|
2120
2168
|
--sl-collection-header-height-md: var(--sl-control-height-lg); /** The header for the roomier row. */
|
|
2169
|
+
--sl-description-list-leader-width: var(--sl-stroke-default); /** Thickness of the dotted leader. */
|
|
2170
|
+
--sl-sheet-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
|
|
2171
|
+
--sl-sheet-radius: var(--sl-radius-surface); /** Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule. */
|
|
2121
2172
|
--sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
|
|
2122
2173
|
--sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
|
|
2123
2174
|
--sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
|
|
@@ -2156,6 +2207,9 @@
|
|
|
2156
2207
|
--sl-content-prose-color: var(--sl-text-primary); /** Long-form body text. The same as body text, so prose and UI read as one voice. */
|
|
2157
2208
|
--sl-content-selection-text: var(--sl-text-primary); /** Selected text stays body text so it reads the same on the tint. */
|
|
2158
2209
|
--sl-field-border-color-error: var(--sl-status-error); /** Field edge when the value is invalid. */
|
|
2210
|
+
--sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
|
|
2211
|
+
--sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
|
|
2212
|
+
--sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
|
|
2159
2213
|
--sl-field-color: var(--sl-text-primary); /** The value you typed. */
|
|
2160
2214
|
--sl-gauge-label-color: var(--sl-text-primary); /** What is being measured. */
|
|
2161
2215
|
--sl-icon-button-color-hover: var(--sl-text-primary); /** Darkens on hover to confirm it's the target. */
|
|
@@ -2213,7 +2267,8 @@
|
|
|
2213
2267
|
--sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
|
|
2214
2268
|
--sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
|
|
2215
2269
|
--sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
|
|
2216
|
-
--sl-
|
|
2270
|
+
--sl-description-list-value-color: var(--sl-text-primary); /** Values. */
|
|
2271
|
+
--sl-stat-figure-figure-color: var(--sl-text-primary); /** The figure's color. */
|
|
2217
2272
|
--sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
|
|
2218
2273
|
--sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
|
|
2219
2274
|
--sl-focus-halo-color: var(--sl-interactive-tint-hover); /** The pale tint of the focus glow. Components on a colored scope use that scope's soft-hover instead. */
|
|
@@ -2285,6 +2340,7 @@
|
|
|
2285
2340
|
--sl-notice-description-color: var(--sl-text-secondary); /** Description on the plain surface. A tinted notice uses its palette's text color for both lines. */
|
|
2286
2341
|
--sl-popup-border-color: var(--sl-border-default); /** Popup edge, a quiet line that separates it from the page under it. */
|
|
2287
2342
|
--sl-popup-separator-color: var(--sl-border-subtle); /** Line between groups of rows, quieter than the popup edge. */
|
|
2343
|
+
--sl-rule-color: var(--sl-border-strong); /** Color of the top rule. The chrome's strong border, so the rule reads as structure, not as an accent or a selection. A brand can point it at text.primary for an ink rule. */
|
|
2288
2344
|
--sl-table-background: var(--sl-surface-canvas); /** Cell area. The page color, so a grid sits on the page like body text. */
|
|
2289
2345
|
--sl-table-subtle-color: var(--sl-text-secondary); /** Secondary text in cells and panels: counts, hints, group totals. */
|
|
2290
2346
|
--sl-table-header-background: var(--sl-surface-tray); /** Header row, side bar and other grid chrome. The tray step, so it sits a step off the cells in both themes and secondary text on it still passes AA. */
|
|
@@ -2297,7 +2353,21 @@
|
|
|
2297
2353
|
--sl-table-range-background: var(--sl-interactive-tint); /** Cells inside a dragged range selection. */
|
|
2298
2354
|
--sl-emphasis-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
|
|
2299
2355
|
--sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
|
|
2356
|
+
--sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
|
|
2357
|
+
--sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
|
|
2358
|
+
--sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
|
|
2359
|
+
--sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
|
|
2360
|
+
--sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
|
|
2300
2361
|
--sl-drawer-handle-color: var(--sl-border-strong); /** The grab bar on bottom drawers. Strong border so it reads as something to drag. */
|
|
2362
|
+
--sl-picker-button-label-color: var(--sl-text-secondary); /** The caps label, quieter than the choice it names. */
|
|
2363
|
+
--sl-sheet-background: var(--sl-surface-raised); /** The sheet's fill: the raised surface, one level above the page like any card or panel. */
|
|
2364
|
+
--sl-sheet-border-color: var(--sl-border-default); /** The sheet's sides and bottom, the everyday divider. */
|
|
2365
|
+
--sl-sheet-tab-background: var(--sl-surface-inverse); /** The tab label's fill: the inverse surface, so the label reads as the sheet's name, and its text passes AA in every theme. */
|
|
2366
|
+
--sl-stat-figure-figure-color-accent: var(--sl-text-accent); /** The figure's color at tone="accent", for a figure that asks for action (open questions, items to review). */
|
|
2367
|
+
--sl-stat-figure-label-color: var(--sl-text-secondary); /** The caps label above the figure. */
|
|
2368
|
+
--sl-stat-figure-caption-color: var(--sl-text-secondary); /** The caption under the figure. */
|
|
2369
|
+
--sl-toggle-group-segmented-background: var(--sl-surface-raised); /** Fill of a toggle that is not pressed. */
|
|
2370
|
+
--sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse); /** Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones. */
|
|
2301
2371
|
--sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent); /** Focus halo for controls that use box-shadow instead of outline: the focus ring color at 60% opacity, so it follows the accent and the theme. Becomes currentColor under prefers-contrast: more. */
|
|
2302
2372
|
--sl-calendar-day-background-hover: var(--sl-item-background-hover); /** The same hover tint as a list item, so a day feels like a choice in a list. */
|
|
2303
2373
|
--sl-check-mark-color: var(--sl-text-on-primary); /** Check mark, dash or dot on a ticked fill. */
|
|
@@ -2313,6 +2383,14 @@
|
|
|
2313
2383
|
--sl-table-row-hover: var(--sl-item-background-hover); /** Row under the pointer. Same tint as a highlighted menu row. */
|
|
2314
2384
|
--sl-table-row-selected: var(--sl-item-background-selected); /** Selected rows. Same tint as the chosen menu row. */
|
|
2315
2385
|
--sl-table-range-border: var(--sl-focus-ring); /** Edge of a range selection and of the focused cell, the same color as every focus ring. */
|
|
2386
|
+
--sl-table-total-rule-color: var(--sl-rule-color); /** The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink. */
|
|
2387
|
+
--sl-table-total-background: var(--sl-table-background); /** Fill of a subtotal or grand total row: the cell color, so the rules mark the total instead of a band. The footer's default totals row keeps the header tray. */
|
|
2388
|
+
--sl-app-bar-border-color: var(--sl-rule-color); /** The line under the bar, in the rule color, so an ink rule brand gets an ink line here too. */
|
|
2389
|
+
--sl-sheet-rule-color: var(--sl-rule-color); /** The top rule's color: the working-paper rule color, so sheets and ruled tables match. */
|
|
2390
|
+
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
|
|
2391
|
+
--sl-stat-figure-underline-color: var(--sl-rule-color); /** The double underline's color: the working-paper rule color, like a grand total's double rule. */
|
|
2392
|
+
--sl-toggle-group-segmented-border-color: var(--sl-rule-color); /** The outline around a segmented group and the line between its toggles. The rule color, so it is a control edge by default and ink with an ink rule. */
|
|
2393
|
+
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
|
|
2316
2394
|
--sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
|
|
2317
2395
|
--sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
|
|
2318
2396
|
}
|
|
@@ -5778,6 +5856,7 @@
|
|
|
5778
5856
|
--sl-popup-arrow-fill: var(--sl-popup-background);
|
|
5779
5857
|
--sl-popup-arrow-stroke: var(--sl-popup-border-color);
|
|
5780
5858
|
--sl-popup-separator-color: var(--sl-border-subtle);
|
|
5859
|
+
--sl-rule-color: var(--sl-border-strong);
|
|
5781
5860
|
--sl-table-background: var(--sl-surface-canvas);
|
|
5782
5861
|
--sl-table-color: var(--sl-text-primary);
|
|
5783
5862
|
--sl-table-subtle-color: var(--sl-text-secondary);
|
|
@@ -5793,7 +5872,31 @@
|
|
|
5793
5872
|
--sl-table-column-hover: var(--sl-fill-subtle);
|
|
5794
5873
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
5795
5874
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
5875
|
+
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
5876
|
+
--sl-table-total-background: var(--sl-table-background);
|
|
5877
|
+
--sl-app-bar-background: var(--sl-surface-raised);
|
|
5878
|
+
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
5879
|
+
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
5880
|
+
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
5881
|
+
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
5882
|
+
--sl-description-list-value-color: var(--sl-text-primary);
|
|
5883
|
+
--sl-description-list-leader-color: var(--sl-border-control);
|
|
5796
5884
|
--sl-drawer-handle-color: var(--sl-border-strong);
|
|
5885
|
+
--sl-picker-button-label-color: var(--sl-text-secondary);
|
|
5886
|
+
--sl-sheet-background: var(--sl-surface-raised);
|
|
5887
|
+
--sl-sheet-border-color: var(--sl-border-default);
|
|
5888
|
+
--sl-sheet-rule-color: var(--sl-rule-color);
|
|
5889
|
+
--sl-sheet-tab-background: var(--sl-surface-inverse);
|
|
5890
|
+
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
|
|
5891
|
+
--sl-stat-figure-figure-color: var(--sl-text-primary);
|
|
5892
|
+
--sl-stat-figure-figure-color-accent: var(--sl-text-accent);
|
|
5893
|
+
--sl-stat-figure-underline-color: var(--sl-rule-color);
|
|
5894
|
+
--sl-stat-figure-label-color: var(--sl-text-secondary);
|
|
5895
|
+
--sl-stat-figure-caption-color: var(--sl-text-secondary);
|
|
5896
|
+
--sl-toggle-group-segmented-border-color: var(--sl-rule-color);
|
|
5897
|
+
--sl-toggle-group-segmented-background: var(--sl-surface-raised);
|
|
5898
|
+
--sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
|
|
5899
|
+
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
|
|
5797
5900
|
--sl-calendar-day-background-hover: var(--sl-item-background-hover);
|
|
5798
5901
|
--sl-check-background: var(--sl-field-background);
|
|
5799
5902
|
}
|
|
@@ -5924,6 +6027,7 @@
|
|
|
5924
6027
|
--sl-popup-arrow-fill: var(--sl-popup-background);
|
|
5925
6028
|
--sl-popup-arrow-stroke: var(--sl-popup-border-color);
|
|
5926
6029
|
--sl-popup-separator-color: var(--sl-border-subtle);
|
|
6030
|
+
--sl-rule-color: var(--sl-border-strong);
|
|
5927
6031
|
--sl-table-background: var(--sl-surface-canvas);
|
|
5928
6032
|
--sl-table-color: var(--sl-text-primary);
|
|
5929
6033
|
--sl-table-subtle-color: var(--sl-text-secondary);
|
|
@@ -5939,7 +6043,31 @@
|
|
|
5939
6043
|
--sl-table-column-hover: var(--sl-fill-subtle);
|
|
5940
6044
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
5941
6045
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6046
|
+
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6047
|
+
--sl-table-total-background: var(--sl-table-background);
|
|
6048
|
+
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6049
|
+
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6050
|
+
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6051
|
+
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6052
|
+
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6053
|
+
--sl-description-list-value-color: var(--sl-text-primary);
|
|
6054
|
+
--sl-description-list-leader-color: var(--sl-border-control);
|
|
5942
6055
|
--sl-drawer-handle-color: var(--sl-border-strong);
|
|
6056
|
+
--sl-picker-button-label-color: var(--sl-text-secondary);
|
|
6057
|
+
--sl-sheet-background: var(--sl-surface-raised);
|
|
6058
|
+
--sl-sheet-border-color: var(--sl-border-default);
|
|
6059
|
+
--sl-sheet-rule-color: var(--sl-rule-color);
|
|
6060
|
+
--sl-sheet-tab-background: var(--sl-surface-inverse);
|
|
6061
|
+
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
|
|
6062
|
+
--sl-stat-figure-figure-color: var(--sl-text-primary);
|
|
6063
|
+
--sl-stat-figure-figure-color-accent: var(--sl-text-accent);
|
|
6064
|
+
--sl-stat-figure-underline-color: var(--sl-rule-color);
|
|
6065
|
+
--sl-stat-figure-label-color: var(--sl-text-secondary);
|
|
6066
|
+
--sl-stat-figure-caption-color: var(--sl-text-secondary);
|
|
6067
|
+
--sl-toggle-group-segmented-border-color: var(--sl-rule-color);
|
|
6068
|
+
--sl-toggle-group-segmented-background: var(--sl-surface-raised);
|
|
6069
|
+
--sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
|
|
6070
|
+
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
|
|
5943
6071
|
--sl-calendar-day-background-hover: var(--sl-item-background-hover);
|
|
5944
6072
|
--sl-check-background: var(--sl-field-background);
|
|
5945
6073
|
}
|
|
@@ -6070,6 +6198,7 @@
|
|
|
6070
6198
|
--sl-popup-arrow-fill: var(--sl-popup-background);
|
|
6071
6199
|
--sl-popup-arrow-stroke: var(--sl-popup-border-color);
|
|
6072
6200
|
--sl-popup-separator-color: var(--sl-border-subtle);
|
|
6201
|
+
--sl-rule-color: var(--sl-border-strong);
|
|
6073
6202
|
--sl-table-background: var(--sl-surface-canvas);
|
|
6074
6203
|
--sl-table-color: var(--sl-text-primary);
|
|
6075
6204
|
--sl-table-subtle-color: var(--sl-text-secondary);
|
|
@@ -6085,7 +6214,31 @@
|
|
|
6085
6214
|
--sl-table-column-hover: var(--sl-fill-subtle);
|
|
6086
6215
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
6087
6216
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6217
|
+
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6218
|
+
--sl-table-total-background: var(--sl-table-background);
|
|
6219
|
+
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6220
|
+
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6221
|
+
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6222
|
+
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6223
|
+
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6224
|
+
--sl-description-list-value-color: var(--sl-text-primary);
|
|
6225
|
+
--sl-description-list-leader-color: var(--sl-border-control);
|
|
6088
6226
|
--sl-drawer-handle-color: var(--sl-border-strong);
|
|
6227
|
+
--sl-picker-button-label-color: var(--sl-text-secondary);
|
|
6228
|
+
--sl-sheet-background: var(--sl-surface-raised);
|
|
6229
|
+
--sl-sheet-border-color: var(--sl-border-default);
|
|
6230
|
+
--sl-sheet-rule-color: var(--sl-rule-color);
|
|
6231
|
+
--sl-sheet-tab-background: var(--sl-surface-inverse);
|
|
6232
|
+
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
|
|
6233
|
+
--sl-stat-figure-figure-color: var(--sl-text-primary);
|
|
6234
|
+
--sl-stat-figure-figure-color-accent: var(--sl-text-accent);
|
|
6235
|
+
--sl-stat-figure-underline-color: var(--sl-rule-color);
|
|
6236
|
+
--sl-stat-figure-label-color: var(--sl-text-secondary);
|
|
6237
|
+
--sl-stat-figure-caption-color: var(--sl-text-secondary);
|
|
6238
|
+
--sl-toggle-group-segmented-border-color: var(--sl-rule-color);
|
|
6239
|
+
--sl-toggle-group-segmented-background: var(--sl-surface-raised);
|
|
6240
|
+
--sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
|
|
6241
|
+
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
|
|
6089
6242
|
--sl-calendar-day-background-hover: var(--sl-item-background-hover);
|
|
6090
6243
|
--sl-check-background: var(--sl-field-background);
|
|
6091
6244
|
}
|