@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/theme-variables.json

@@ -0,0 +1,336 @@
+{
+  "base-reads": {
+    "--so-disabled-opacity": "Disabled opacity: dims the box or root of a disabled component. The base layer sets descendants of the dimmed node to 1; default: 0.35.",
+    "--so-caption-gap-sm": "Caption scale: inline gap between a caption and its control (Label, Field and radio text), size sm.",
+    "--so-caption-gap-normal": "Caption scale: inline gap between a caption and its control (Label, Field and radio text), size normal.",
+    "--so-caption-gap-lg": "Caption scale: inline gap between a caption and its control (Label, Field and radio text), size lg.",
+    "--so-caption-gap-xl": "Caption scale: inline gap between a caption and its control (Label, Field and radio text), size xl.",
+    "--so-caption-gap-2xl": "Caption scale: inline gap between a caption and its control (Label, Field and radio text), size 2xl.",
+    "--so-caption-stack-sm": "Caption scale: block gap above and below a control, between the label above and help text below, size sm.",
+    "--so-caption-stack-normal": "Caption scale: block gap above and below a control, between the label above and help text below, size normal.",
+    "--so-caption-stack-lg": "Caption scale: block gap above and below a control, between the label above and help text below, size lg.",
+    "--so-caption-stack-xl": "Caption scale: block gap above and below a control, between the label above and help text below, size xl.",
+    "--so-caption-stack-2xl": "Caption scale: block gap above and below a control, between the label above and help text below, size 2xl.",
+    "--so-caption-font-size-sm": "Caption font size, size sm; surrounding font size - 2px; normal has no font-size override and inherits the surrounding font.",
+    "--so-caption-line-height-sm": "Caption line height, size sm.",
+    "--so-caption-font-size-lg": "Caption font size, size lg; surrounding font size + 2px.",
+    "--so-caption-line-height-lg": "Caption line height, size lg.",
+    "--so-caption-font-size-xl": "Caption font size, size xl; surrounding font size + 4px.",
+    "--so-caption-line-height-xl": "Caption line height, size xl.",
+    "--so-caption-font-size-2xl": "Caption font size, size 2xl; surrounding font size + 8px.",
+    "--so-caption-line-height-2xl": "Caption line height, size 2xl.",
+    "--so-caption-note-font-size-sm": "Control note font size (Field help/error text and Slider tick labels), size sm; surrounding font size - 4px.",
+    "--so-caption-note-line-height-sm": "Control note line height, size sm.",
+    "--so-caption-note-font-size-normal": "Control note font size (Field help/error text and Slider tick labels), size normal; surrounding font size - 2px.",
+    "--so-caption-note-line-height-normal": "Control note line height, size normal.",
+    "--so-caption-note-font-size-lg": "Control note font size (Field help/error text and Slider tick labels), size lg; inherits the surrounding font size.",
+    "--so-caption-note-line-height-lg": "Control note line height, size lg.",
+    "--so-caption-note-font-size-xl": "Control note font size (Field help/error text and Slider tick labels), size xl; surrounding font size + 2px.",
+    "--so-caption-note-line-height-xl": "Control note line height, size xl.",
+    "--so-caption-note-font-size-2xl": "Control note font size (Field help/error text and Slider tick labels), size 2xl; surrounding font size + 4px.",
+    "--so-caption-note-line-height-2xl": "Control note line height, size 2xl.",
+    "--so-required-size": "Side length of the required-field dot on a control.",
+    "--so-required-offset": "Required-field dot offset from the top and inline-start corner of a control; negative values move it outward.",
+    "--so-target-size": "Minimum pointer target size (WCAG 2.5.8): side length of field clear buttons, NumberInput step buttons, Select arrow, DatePicker calendar button, tag close button and Table sort button; also the swipe grip hit area.",
+    "--so-button-height-sm": "Button height; other component parts use it to align with a button in the same row, size sm.",
+    "--so-button-height-normal": "Button height; other component parts use it to align with a button in the same row, size normal.",
+    "--so-button-height-lg": "Button height; other component parts use it to align with a button in the same row, size lg.",
+    "--so-button-height-xl": "Button height; other component parts use it to align with a button in the same row, size xl.",
+    "--so-button-height-2xl": "Button height; other component parts use it to align with a button in the same row, size 2xl.",
+    "--so-button-padding-sm": "Button inline padding on each side, size sm.",
+    "--so-button-padding-normal": "Button inline padding on each side, size normal.",
+    "--so-button-padding-lg": "Button inline padding on each side, size lg.",
+    "--so-button-padding-xl": "Button inline padding on each side, size xl.",
+    "--so-button-padding-2xl": "Button inline padding on each side, size 2xl.",
+    "--so-button-gap-sm": "Gap between Button row parts (slots and text); also the Scroller navigation-to-track gap and Pagination cell gap, size sm.",
+    "--so-button-gap-normal": "Gap between Button row parts (slots and text); also the Scroller navigation-to-track gap and Pagination cell gap, size normal.",
+    "--so-button-gap-lg": "Gap between Button row parts (slots and text); also the Scroller navigation-to-track gap and Pagination cell gap, size lg.",
+    "--so-button-gap-xl": "Gap between Button row parts (slots and text); also the Scroller navigation-to-track gap and Pagination cell gap, size xl.",
+    "--so-button-gap-2xl": "Gap between Button row parts (slots and text); also the Scroller navigation-to-track gap and Pagination cell gap, size 2xl.",
+    "--so-button-font-size-sm": "Button font size; also used by the Pagination row and Calendar month heading, size sm; surrounding font size - 2px; normal has no font-size override and inherits the surrounding font.",
+    "--so-button-line-height-sm": "Button line height, size sm.",
+    "--so-button-font-size-lg": "Button font size; also used by the Pagination row and Calendar month heading, size lg; surrounding font size + 2px.",
+    "--so-button-line-height-lg": "Button line height, size lg.",
+    "--so-button-font-size-xl": "Button font size; also used by the Pagination row and Calendar month heading, size xl; surrounding font size + 4px.",
+    "--so-button-line-height-xl": "Button line height, size xl.",
+    "--so-button-font-size-2xl": "Button font size; also used by the Pagination row and Calendar month heading, size 2xl; surrounding font size + 8px.",
+    "--so-button-line-height-2xl": "Button line height, size 2xl.",
+    "--so-check-box-size-sm": "CheckBox box side length; also the radio ring size, size sm.",
+    "--so-check-box-size-normal": "CheckBox box side length; also the radio ring size, size normal.",
+    "--so-check-box-size-lg": "CheckBox box side length; also the radio ring size, size lg.",
+    "--so-check-box-size-xl": "CheckBox box side length; also the radio ring size, size xl.",
+    "--so-check-box-size-2xl": "CheckBox box side length; also the radio ring size, size 2xl.",
+    "--so-accordion-gap": "Gap between Accordion sections.",
+    "--so-accordion-header-padding": "Accordion section header block padding.",
+    "--so-accordion-content-padding": "Expanded Accordion panel block padding.",
+    "--so-icon-size-sm": "Icon side length in em of the surrounding font; also used by the CheckBox mark, size sm.",
+    "--so-icon-size-normal": "Icon side length in em of the surrounding font; also used by the CheckBox mark, size normal.",
+    "--so-icon-size-lg": "Icon side length in em of the surrounding font; also used by the CheckBox mark, size lg.",
+    "--so-icon-size-xl": "Icon side length in em of the surrounding font; also used by the CheckBox mark, size xl.",
+    "--so-icon-size-2xl": "Icon side length in em of the surrounding font; also used by the CheckBox mark, size 2xl.",
+    "--so-input-height-sm": "Input, NumberInput, DateInput and DatePicker range box height; also the Textarea row and adjacent Field label spacer, size sm.",
+    "--so-input-height-normal": "Input, NumberInput, DateInput and DatePicker range box height; also the Textarea row and adjacent Field label spacer, size normal.",
+    "--so-input-height-lg": "Input, NumberInput, DateInput and DatePicker range box height; also the Textarea row and adjacent Field label spacer, size lg.",
+    "--so-input-height-xl": "Input, NumberInput, DateInput and DatePicker range box height; also the Textarea row and adjacent Field label spacer, size xl.",
+    "--so-input-height-2xl": "Input, NumberInput, DateInput and DatePicker range box height; also the Textarea row and adjacent Field label spacer, size 2xl.",
+    "--so-input-font-size-sm": "Field text font size; also the DateInput segment row, DatePicker range dash and Select arrow icon, size sm; surrounding font size - 2px; normal has no font-size override and inherits the surrounding font.",
+    "--so-input-line-height-sm": "Textarea and Select arrow line height; a single-line field uses its full height as the line height, size sm.",
+    "--so-input-line-height-normal": "Textarea and Select arrow line height; a single-line field uses its full height as the line height, size normal.",
+    "--so-input-font-size-lg": "Field text font size; also the DateInput segment row, DatePicker range dash and Select arrow icon, size lg; surrounding font size + 2px.",
+    "--so-input-line-height-lg": "Textarea and Select arrow line height; a single-line field uses its full height as the line height, size lg.",
+    "--so-input-font-size-xl": "Field text font size; also the DateInput segment row, DatePicker range dash and Select arrow icon, size xl; surrounding font size + 4px.",
+    "--so-input-line-height-xl": "Textarea and Select arrow line height; a single-line field uses its full height as the line height, size xl.",
+    "--so-input-font-size-2xl": "Field text font size; also the DateInput segment row, DatePicker range dash and Select arrow icon, size 2xl; surrounding font size + 8px.",
+    "--so-input-line-height-2xl": "Textarea and Select arrow line height; a single-line field uses its full height as the line height, size 2xl.",
+    "--so-input-indent-sm": "Inline text inset from the border of Input, NumberInput, Textarea and DateInput, size sm.",
+    "--so-input-indent-normal": "Inline text inset from the border of Input, NumberInput, Textarea and DateInput, size normal.",
+    "--so-input-indent-lg": "Inline text inset from the border of Input, NumberInput, Textarea and DateInput, size lg.",
+    "--so-input-indent-xl": "Inline text inset from the border of Input, NumberInput, Textarea and DateInput, size xl.",
+    "--so-input-indent-2xl": "Inline text inset from the border of Input, NumberInput, Textarea and DateInput, size 2xl.",
+    "--so-input-slot-gap": "Field slot clearance from the top and bottom borders: slot row height is field height minus two borders and two clearances. Also used by DateInput and the DatePicker range box.",
+    "--so-input-slot-padding": "Field slot outer inline padding and NumberInput step-button pair inline padding; for the DatePicker range box, calendar button inset from the border.",
+    "--so-input-slot-spacing": "Gap between field slot parts and between NumberInput step buttons; for the DatePicker range box, gap between clear and calendar buttons.",
+    "--so-input-min-width": "Minimum width of Input, Textarea, NumberInput and the Select root, preventing collapse in narrow containers. Also the default length of horizontal Slider and ProgressLinear.",
+    "--so-input-text-min-width": "Minimum width of the editable field area; slots yield space in narrow fields.",
+    "--so-input-border": "Input border thickness. The theme draws the border and sets this on the block; slot row height excludes it. Without a theme: 0.",
+    "--so-field-columns": "Field columns with an inline-start label. Set by the application: for example, a form subgrid or a single column in a narrow container.",
+    "--so-field-error-gap": "Gap between the Field error icon and its text, in em.",
+    "--so-field-required-size": "Side length of the required-field dot by the Field label, in em of the label font.",
+    "--so-field-required-gap": "Required-field dot offset from the Field label text, in em.",
+    "--so-field-required-lift": "Required-field dot rise above the Field label baseline, in em.",
+    "--so-number-input-border": "NumberInput border thickness. The theme draws the border and sets this on the block; slot row height excludes it. Without a theme: 0.",
+    "--so-switch-width-sm": "Switch track width, size sm.",
+    "--so-switch-width-normal": "Switch track width, size normal.",
+    "--so-switch-width-lg": "Switch track width, size lg.",
+    "--so-switch-width-xl": "Switch track width, size xl.",
+    "--so-switch-width-2xl": "Switch track width, size 2xl.",
+    "--so-switch-height-sm": "Switch track height; the thumb is this height minus two insets, size sm.",
+    "--so-switch-height-normal": "Switch track height; the thumb is this height minus two insets, size normal.",
+    "--so-switch-height-lg": "Switch track height; the thumb is this height minus two insets, size lg.",
+    "--so-switch-height-xl": "Switch track height; the thumb is this height minus two insets, size xl.",
+    "--so-switch-height-2xl": "Switch track height; the thumb is this height minus two insets, size 2xl.",
+    "--so-switch-inset": "Switch thumb inset from the track edges.",
+    "--so-switch-required-offset": "Required-field dot offset from the Switch track corner.",
+    "--so-tabs-gap": "Gap between tabs in the list and between the list and its leading/trailing row slots.",
+    "--so-tabs-panel-gap": "Gap between a vertical tab row and its panel.",
+    "--so-tabs-panel-margin": "Horizontal tab panel top and bottom margin, separating it from the row.",
+    "--so-tabs-slot-padding": "Tab row leading/trailing slot inline padding.",
+    "--so-tabs-row-padding": "Tab row block padding; also the close button inset from the top and bottom.",
+    "--so-tabs-close-padding": "Tab close button inline padding.",
+    "--so-tags-gap": "Gap between tags in a row; also used by custom tag layouts in a slot.",
+    "--so-tags-field-gap": "Gap between tags in a field slot.",
+    "--so-tags-bleed": "Space for the theme tag focus ring in a scroll row: row padding and scroll padding.",
+    "--so-tags-close-padding": "Tag close button padding around its icon.",
+    "--so-tags-item-height-sm": "Tag pill height, size sm.",
+    "--so-tags-item-height-normal": "Tag pill height, size normal.",
+    "--so-tags-item-height-lg": "Tag pill height, size lg.",
+    "--so-tags-item-height-xl": "Tag pill height, size xl.",
+    "--so-tags-item-height-2xl": "Tag pill height, size 2xl.",
+    "--so-tags-item-font-size-sm": "Tag row and close button font size, size sm; surrounding font size - 4px.",
+    "--so-tags-item-line-height-sm": "Tag line height, size sm.",
+    "--so-tags-item-font-size-normal": "Tag row and close button font size, size normal; surrounding font size - 2px.",
+    "--so-tags-item-line-height-normal": "Tag line height, size normal.",
+    "--so-tags-item-font-size-lg": "Tag row and close button font size, size lg; inherits the surrounding font size.",
+    "--so-tags-item-line-height-lg": "Tag line height, size lg.",
+    "--so-tags-item-font-size-xl": "Tag row and close button font size, size xl; surrounding font size + 2px.",
+    "--so-tags-item-line-height-xl": "Tag line height, size xl.",
+    "--so-tags-item-font-size-2xl": "Tag row and close button font size, size 2xl; surrounding font size + 4px.",
+    "--so-tags-item-line-height-2xl": "Tag line height, size 2xl.",
+    "--so-tags-item-padding-sm": "Tag row inline padding and close button inset from the pill end, size sm.",
+    "--so-tags-item-padding-normal": "Tag row inline padding and close button inset from the pill end, size normal.",
+    "--so-tags-item-padding-lg": "Tag row inline padding and close button inset from the pill end, size lg.",
+    "--so-tags-item-padding-xl": "Tag row inline padding and close button inset from the pill end, size xl.",
+    "--so-tags-item-padding-2xl": "Tag row inline padding and close button inset from the pill end, size 2xl.",
+    "--so-tags-item-gap-sm": "Gap between tag row parts and the close button, size sm.",
+    "--so-tags-item-gap-normal": "Gap between tag row parts and the close button, size normal.",
+    "--so-tags-item-gap-lg": "Gap between tag row parts and the close button, size lg.",
+    "--so-tags-item-gap-xl": "Gap between tag row parts and the close button, size xl.",
+    "--so-tags-item-gap-2xl": "Gap between tag row parts and the close button, size 2xl.",
+    "--so-tags-fade": "Width of the scroll tag row edge hint inside a field. The theme draws the hint and sets this on the row; the scroll viewport excludes it. Without a hint: 0.",
+    "--so-group-separator-width": "Menu, ListBox and Select group separator line thickness. The theme draws the line and sets this on the list; a section without a separator reserves the same space. Without a theme: 0.",
+    "--so-list-box-gap": "Gap between ListBox items, groups and root parts; also used by the Select list.",
+    "--so-list-box-padding": "ListBox root padding around the header, list and footer; also used by the Select list.",
+    "--so-list-box-min-width": "ListBox minimum width; also used by the Menu panel.",
+    "--so-list-box-max-width": "ListBox maximum width; also used by the Menu panel, limited to the viewport width.",
+    "--so-list-box-group-label-padding": "ListBox and Select group label top and bottom padding.",
+    "--so-filler-height": "Virtual spacer height for omitted ListBox/Select items and Table rows. Written inline on the spacer by the library; themes must not set it. Fallback: 0.",
+    "--so-select-max-height": "Select list maximum height when maxRows is unset. The library writes an explicit row limit inline on the list.",
+    "--so-select-item-padding": "Select option row block padding.",
+    "--so-menu-padding": "Menu item list padding; the separator extends by the same amount to span the full list width.",
+    "--so-menu-separator-margin": "Menu separator top and bottom margin; these margins separate sections because the menu list has no gaps.",
+    "--so-menu-group-label-padding": "Menu group label top and bottom padding.",
+    "--so-menu-dot-size": "Side length of the selected Menu radio dot, in em of the row font.",
+    "--so-menu-shortcut-gap": "Menu shortcut hint and item arrow offset from the item text, in em.",
+    "--so-popover-max-width": "Maximum width of an anchored Popover panel, limited to the viewport width.",
+    "--so-popover-max-height": "Maximum height of an anchored Popover panel, limited to half the viewport height; also used by the Menu panel.",
+    "--so-popover-padding": "Popover content padding; also used by Menu item panel content.",
+    "--so-popover-close-offset": "Popover close button inset from the panel top and inline end.",
+    "--so-tooltip-max-width": "Tooltip maximum width, limited to the viewport width.",
+    "--so-tooltip-padding-inline": "Tooltip inline padding; also used by Slider thumb tooltips.",
+    "--so-tooltip-padding-block": "Tooltip top and bottom padding; also used by Slider thumb tooltips.",
+    "--so-tooltip-line": "Tooltip and Slider thumb tooltip line height. The theme sets font size without line height; Slider uses this line height to reserve space above the thumbs for an always-visible tooltip.",
+    "--so-panel-surface": "Surface of overlay panels (Popover, Select, DatePicker, Menu, Dialog and Drawer), the Calendar month picker card and toast cards. The theme sets it on the panel and uses it as the background; the base layer uses it for the local surface inside the panel (--so-place-surface). Unset without a theme.",
+    "--so-place-surface": "Local surface behind components. The theme sets it on the document root for the page; the application sets it alongside its own card background. Inside overlays the base layer derives it from --so-panel-surface. Makes the sticky Table header backing opaque; no backing when unset.",
+    "--so-swipe-grip-length": "Swipe grip mark length along the panel edge for Popover, Select, DatePicker and Drawer.",
+    "--so-swipe-grip-thickness": "Swipe grip mark thickness.",
+    "--so-modal-padding": "Modal layer content inset from the Dialog or Drawer panel edge.",
+    "--so-modal-gap": "Gap between modal layer header, body and footer, implemented as body top and bottom padding.",
+    "--so-modal-title-line": "Modal title line height; header buttons align with the center of its first line.",
+    "--so-modal-footer-gap": "Gap between modal footer actions.",
+    "--so-modal-button-gap": "Gap between modal header buttons.",
+    "--so-dialog-width": "Dialog width. The document root supplies the default; the library writes the width prop inline on the window.",
+    "--so-dialog-height": "Dialog height. Defaults to content height; the library writes the height prop inline on the window.",
+    "--so-dialog-offset": "Dialog inset from viewport edges without an explicit side offset; also limits the maximum size.",
+    "--so-dialog-offset-top": "Dialog top inset, written by the library from the offset prop and layout:offset:before adjustments. Themes must not set it. Fallback: --so-dialog-offset.",
+    "--so-dialog-offset-bottom": "Dialog bottom inset, written by the library. Themes must not set it. Fallback: --so-dialog-offset.",
+    "--so-dialog-offset-start": "Dialog inline-start inset, written by the library. Themes must not set it. Fallback: --so-dialog-offset.",
+    "--so-dialog-offset-end": "Dialog inline-end inset, written by the library. Themes must not set it. Fallback: --so-dialog-offset.",
+    "--so-drawer-width": "Drawer width at a side edge. The document root supplies the default; the library writes the width prop inline on the panel.",
+    "--so-drawer-height": "Drawer height at the top or bottom edge. Defaults to content height; the library writes the height prop inline on the panel.",
+    "--so-drawer-gap": "Backdrop strip at the edge opposite the Drawer; maximum panel size is the viewport minus this strip.",
+    "--so-textarea-border": "Textarea border thickness. The theme draws the border and sets this on the block; text padding excludes it. Without a theme: 0.",
+    "--so-scroller-bleed": "Space for Scroller content focus rings: viewport padding that does not increase the track height above or below it; the snap viewport is at least this wide.",
+    "--so-scroller-fade": "Scroller track edge hint width. The theme draws the hint and sets this on the track root; the snap viewport lies between the hints. Without hints: 0.",
+    "--so-slider-thumb-size-sm": "Slider thumb side length and thumb band height; half is the root travel-end padding, one third is the halo; aligns an adjacent Field label with the band, size sm.",
+    "--so-slider-thumb-size-normal": "Slider thumb side length and thumb band height; half is the root travel-end padding, one third is the halo; aligns an adjacent Field label with the band, size normal.",
+    "--so-slider-thumb-size-lg": "Slider thumb side length and thumb band height; half is the root travel-end padding, one third is the halo; aligns an adjacent Field label with the band, size lg.",
+    "--so-slider-thumb-size-xl": "Slider thumb side length and thumb band height; half is the root travel-end padding, one third is the halo; aligns an adjacent Field label with the band, size xl.",
+    "--so-slider-thumb-size-2xl": "Slider thumb side length and thumb band height; half is the root travel-end padding, one third is the halo; aligns an adjacent Field label with the band, size 2xl.",
+    "--so-slider-rail-size-sm": "Slider rail and fill thickness; also the ProgressLinear thickness, size sm.",
+    "--so-slider-rail-size-normal": "Slider rail and fill thickness; also the ProgressLinear thickness, size normal.",
+    "--so-slider-rail-size-lg": "Slider rail and fill thickness; also the ProgressLinear thickness, size lg.",
+    "--so-slider-rail-size-xl": "Slider rail and fill thickness; also the ProgressLinear thickness, size xl.",
+    "--so-slider-rail-size-2xl": "Slider rail and fill thickness; also the ProgressLinear thickness, size 2xl.",
+    "--so-slider-gap-sm": "Gap between Slider tick labels/tooltip and the thumb band, size sm.",
+    "--so-slider-gap-normal": "Gap between Slider tick labels/tooltip and the thumb band, size normal.",
+    "--so-slider-gap-lg": "Gap between Slider tick labels/tooltip and the thumb band, size lg.",
+    "--so-slider-gap-xl": "Gap between Slider tick labels/tooltip and the thumb band, size xl.",
+    "--so-slider-gap-2xl": "Gap between Slider tick labels/tooltip and the thumb band, size 2xl.",
+    "--so-slider-length": "Default vertical Slider length; also used by vertical ProgressLinear.",
+    "--so-slider-thumb-border": "Slider thumb border thickness. The theme draws the border and sets this on the slider; the tooltip is positioned beyond this border at the thumb edge. Without a theme: 0.",
+    "--so-slider-position": "Slider thumb/tick center position from the axis start, as a percentage. Written inline on the thumb/tick by the library; themes must not set it. Fallback: 0%.",
+    "--so-slider-range-start": "Slider fill start from the axis start, as a percentage. Written inline on the fill by the library; themes must not set it. Fallback: 0%.",
+    "--so-slider-range-end": "Slider fill end from the axis start, as a percentage. Written inline on the fill by the library; themes must not set it. Fallback: 0%.",
+    "--so-rating-star-size-sm": "Rating star icon box side length; star boxes touch each other, size sm.",
+    "--so-rating-star-size-normal": "Rating star icon box side length; star boxes touch each other, size normal.",
+    "--so-rating-star-size-lg": "Rating star icon box side length; star boxes touch each other, size lg.",
+    "--so-rating-star-size-xl": "Rating star icon box side length; star boxes touch each other, size xl.",
+    "--so-rating-star-size-2xl": "Rating star icon box side length; star boxes touch each other, size 2xl.",
+    "--so-rating-fraction": "Filled fraction of a Rating star, from 0 to 1. Written inline on the star by the library; themes must not set it. Fallback: 0.",
+    "--so-progress-linear-percent": "ProgressLinear completion percentage. Written inline on the root by the library while progress is determinate; themes must not set it. Fallback: 0%.",
+    "--so-progress-spinner-size-sm": "ProgressSpinner ring diameter; ring thickness is one eighth of it, size sm.",
+    "--so-progress-spinner-size-normal": "ProgressSpinner ring diameter; ring thickness is one eighth of it, size normal.",
+    "--so-progress-spinner-size-lg": "ProgressSpinner ring diameter; ring thickness is one eighth of it, size lg.",
+    "--so-progress-spinner-size-xl": "ProgressSpinner ring diameter; ring thickness is one eighth of it, size xl.",
+    "--so-progress-spinner-size-2xl": "ProgressSpinner ring diameter; ring thickness is one eighth of it, size 2xl.",
+    "--so-progress-spinner-fraction": "ProgressSpinner completion fraction, from 0 to 1. Written inline on the root by the library while progress is determinate; themes must not set it. Fallback: 0.",
+    "--so-calendar-bleed": "Space around a Calendar day tile for its focus ring: the cell is wider than the tile by this amount on each side. The cell determines the heading row, month height, navigation button placement and footer edges; twice this space gives the month picker card gaps.",
+    "--so-calendar-day-font-size-sm": "Calendar day number and month/year picker tile font size; weekday labels use the next smaller size (the same at sm), size sm; surrounding font size - 4px.",
+    "--so-calendar-day-line-height-sm": "Calendar day number line height, size sm.",
+    "--so-calendar-day-font-size-normal": "Calendar day number and month/year picker tile font size; weekday labels use the next smaller size (the same at sm), size normal; surrounding font size - 2px.",
+    "--so-calendar-day-line-height-normal": "Calendar day number line height, size normal.",
+    "--so-calendar-day-font-size-lg": "Calendar day number and month/year picker tile font size; weekday labels use the next smaller size (the same at sm), size lg; inherits the surrounding font size.",
+    "--so-calendar-day-line-height-lg": "Calendar day number line height, size lg.",
+    "--so-calendar-day-font-size-xl": "Calendar day number and month/year picker tile font size; weekday labels use the next smaller size (the same at sm), size xl; surrounding font size + 2px.",
+    "--so-calendar-day-line-height-xl": "Calendar day number line height, size xl.",
+    "--so-calendar-day-font-size-2xl": "Calendar day number and month/year picker tile font size; weekday labels use the next smaller size (the same at sm), size 2xl; surrounding font size + 4px.",
+    "--so-calendar-day-line-height-2xl": "Calendar day number line height, size 2xl.",
+    "--so-date-input-border": "DateInput border thickness. The theme draws the border and sets this on the block; slot row height excludes it. Without a theme: 0.",
+    "--so-date-input-segment-padding": "DateInput highlighted segment padding from its digits, in em of the row font; combined with the row inset, this gives the field text inset.",
+    "--so-date-input-literal-padding": "DateInput segment separator padding, in em of the row font.",
+    "--so-date-picker-border": "DatePicker range box border thickness. The theme draws the border and sets this on the block; slot row height excludes it. Without a theme: 0.",
+    "--so-date-picker-padding": "DatePicker panel content padding around the calendar.",
+    "--so-toasts-offset": "Toast region inset from viewport edges, in addition to the safe-area inset.",
+    "--so-toasts-width": "Toast width; fills the region width on narrow screens.",
+    "--so-toasts-gap": "Gap between toasts in a column; also the toast slot clipping allowance for shadow and focus rings, and how far each rear cascade toast peeks out from under the preceding toast.",
+    "--so-toasts-padding-block": "Toast card top and bottom padding.",
+    "--so-toasts-padding-inline": "Toast card inline padding.",
+    "--so-toasts-line": "Toast text line height. The theme sets font size without line height; the icon box and close button align with the center of the first line.",
+    "--so-toasts-card-gap": "Gap between icon, text and close button in the toast card row.",
+    "--so-toasts-body-gap": "Gap between toast title, description and custom content.",
+    "--so-toasts-content-gap": "Gap between custom toast content parts (action buttons).",
+    "--so-toasts-content-offset": "Custom toast content offset from the text above it.",
+    "--so-toasts-spinner-size": "Loading ring diameter in place of the toast icon, in em of the icon box; follows the type icon glyph circumference.",
+    "--so-toasts-cascade-narrow": "Width fraction by which each rear toast narrows per cascade level, as a number.",
+    "--so-toasts-cascade-layers": "Number of visible rear toast cascade layers; deeper toasts sit behind the last visible layer and are transparent.",
+    "--so-toasts-depth": "Toast depth in the cascade, as a numeric position in the collection. Written on the toast by markup; themes must not set it. Fallback: 0.",
+    "--so-toasts-front-height": "Front cascade toast height, written on the region by TToastsFrontPlugin (@soxa-ui/theme-base/setup), installed by the theme. Rear toasts use this height; without it they fill the cascade cell to the same height.",
+    "--so-table-bleed": "Space around a Table cell button for its focus ring: cell top/bottom padding. Body row height is Button height plus twice this space; cell inline padding is Button padding plus this space.",
+    "--so-table-head-trim": "Amount by which the Table header row is shorter than a body row.",
+    "--so-table-font-size-sm": "Table cell and header label font size, one step below Button, size sm; surrounding font size - 4px.",
+    "--so-table-line-height-sm": "Table cell and header label line height, size sm.",
+    "--so-table-font-size-normal": "Table cell and header label font size, one step below Button, size normal; surrounding font size - 2px.",
+    "--so-table-line-height-normal": "Table cell and header label line height, size normal.",
+    "--so-table-font-size-lg": "Table cell and header label font size, one step below Button, size lg; inherits the surrounding font size.",
+    "--so-table-line-height-lg": "Table cell and header label line height, size lg.",
+    "--so-table-font-size-xl": "Table cell and header label font size, one step below Button, size xl; surrounding font size + 2px.",
+    "--so-table-line-height-xl": "Table cell and header label line height, size xl.",
+    "--so-table-font-size-2xl": "Table cell and header label font size, one step below Button, size 2xl; surrounding font size + 4px.",
+    "--so-table-line-height-2xl": "Table cell and header label line height, size 2xl.",
+    "--so-table-column-min-width": "Minimum Table column width when no width is set. Before core lays out columns, its width is this minimum plus both cell paddings. Fixed layout does not inspect cell content; the minimum is the header width itself.",
+    "--so-table-sort-gap": "Gap between a Table header label and sort button, keeping the button hit area off the label.",
+    "--so-table-sort-padding": "Table sort button padding around its arrow, on each side, in units of the header font.",
+    "--so-table-resizer-width": "Table column resize handle hit strip width, centered on the column boundary (on the table edge for the last column).",
+    "--so-table-column-width": "Table column width, written by core on the header from the column width or available-space layout. Themes must not set it; without it the column shares the remaining space.",
+    "--so-table-head-offset": "Sticky Table header offset from the scroll edge. The application sets a positive offset on the table or wrapper for its sticky bar; the base layer sets a negative offset for a table viewport directly in Dialog/Drawer bodies or Popover content. Fallback: 0.",
+    "--so-table-head-height": "Sticky Table header height, written on the table root by TTableHeadPlugin (@soxa-ui/theme-base/setup), installed by the theme. Keeps body focus below the header and the backing under its full height. Fallback: one header row.",
+    "--so-table-head-border": "Line thickness under the sticky Table header. The theme draws the line and sets this on the header; the header backing stops before it. Without a theme: 0.",
+    "--so-table-body-shift": "Neighboring Table column cell shift in reorderPreview: column. The base layer distributes it to cells by column number. The theme sets it on the body using its motion while a column is dragged, for at most thirty columns (the base layer rule limit). Without it cells stay in place.",
+    "--so-table-body-dragged": "Dragged Table column cell visibility in reorderPreview: column (hidden hides cells in their original positions). The theme sets it on the body using its motion, with the same column-count limit. Fallback: row visibility.",
+    "--so-swipe-offset": "Layer offset during swipe-to-dismiss, in signed pixels along the viewport axis. The gesture plugin writes it on the dragged layer (Popover, Select, DatePicker, Drawer or toast); themes must not set it. The base layer uses it in translate and registers it without inheritance. Fallback: 0px.",
+    "--so-table-column-drag": "Dragged Table header inline offset during column reorder. The gesture plugin writes it on the header to follow the pointer and, after release, to reach the destination. Themes must not set it. The base layer uses it in translate; the theme transitions the landing. Fallback: 0."
+  },
+  "theme-reads": {
+    "--so-dir-sign": "Writing direction sign from the nearest dir: 1 for left-to-right, -1 for right-to-left. Written by the base layer dir rules; themes multiply mirroring transforms (scale, gradient angle or offset) by it.",
+    "--so-label-gap": "Inline gap between Label text and its control. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-label-stack": "Block gap above and below the Label control. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-field-gap": "Inline gap between the Field label and field. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-field-stack": "Block gap above the Field and below it for help text. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-radio-control-size": "Radio ring side length, using the CheckBox box size. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-switch-width": "Switch track width. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-switch-height": "Switch track height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-input-height": "Input field height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-input-slot-row": "Input slot row height: field height minus two borders and two clearances, derived from field height. Themes read it and set the size step and border instead.",
+    "--so-number-input-height": "NumberInput field height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-number-input-slot-row": "NumberInput slot row height: field height minus two borders and two clearances. Themes read it and set the size step and border instead.",
+    "--so-textarea-row": "Textarea row height, using the Input height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-textarea-indent": "Textarea text inset from the border. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-tags-item-height": "Tag pill height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-slider-thumb-size": "Slider thumb side length. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-slider-rail-size": "Slider rail and fill thickness. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-slider-gap": "Gap between Slider tick labels/tooltip and the thumb band. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-slider-tick-size": "Slider tick side length: half the rail thickness plus one pixel, derived from rail thickness. Read by the theme.",
+    "--so-slider-halo-size": "Slider thumb halo size: one third of the thumb side length, derived from thumb size. The theme reads it to draw the halo.",
+    "--so-rating-star-size": "Rating star side length. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-progress-linear-thickness": "ProgressLinear thickness, using the Slider rail size. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-progress-spinner-size": "ProgressSpinner ring diameter. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-pagination-cell": "Pagination cell side length, using Button height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-pagination-gap": "Pagination cell gap, using Button gap. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-calendar-day": "Calendar day tile side length, using Button height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-calendar-cell": "Calendar day cell size: day tile plus two focus-ring allowances, derived from the tile. Read by the theme.",
+    "--so-calendar-head": "Calendar heading row height: the day tile height, derived from the tile. Read by the theme.",
+    "--so-calendar-gap": "Gap between Calendar months: half a day cell, derived from the cell. Read by the theme.",
+    "--so-date-input-height": "DateInput field height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-date-input-indent": "DateInput segment row inset from the border. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-date-input-slot-row": "DateInput slot row height: field height minus two borders and two clearances. Themes read it and set the size step and border instead.",
+    "--so-date-picker-height": "DatePicker range box height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-date-picker-slot-row": "DatePicker range box slot row height: box height minus two borders and two clearances. Themes read it and set the size step and border instead.",
+    "--so-date-picker-button": "DatePicker clear/calendar button side length: its field slot row height. Read by the theme.",
+    "--so-toasts-lift": "Cascade toast block-axis step away from the viewport edge, derived from toast depth, visible layer count and gap. The base layer includes it with the swipe offset in translate; themes read it when defining their own cascade toast translate for entry/exit.",
+    "--so-toasts-peek-sign": "Direction in which rear cascade toasts peek out: 1 at the viewport top, -1 at the bottom. Written by the base layer from the region placement; read by the theme.",
+    "--so-table-button": "Table cell button height, using Button height. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-table-button-inline": "Table cell button inline padding, using Button padding. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-table-row": "Table row height: button height plus two focus-ring allowances, derived from button height. Read by the theme.",
+    "--so-table-head-row": "Table header row height: row height minus the header trim, derived from row height. Read by the theme.",
+    "--so-table-cell-inline": "Table cell inline padding: button padding plus focus-ring allowance, derived from button padding. Read by the theme.",
+    "--so-table-check": "Table selection-column checkbox side length, using the CheckBox box size. The base block resolves its size scale step into this variable; themes read it and set the scale step instead.",
+    "--so-tabs-active-pos": "Active tab position along the row main axis, measured from its edge. Written on the Tabs row (__bar: list plus edge slots) by TTabsViewPlugin (@soxa-ui/theme-base/setup), installed by the theme. The theme uses it to draw the active marker on the row. Absent without the plugin.",
+    "--so-tabs-active-size": "Active tab length along the row main axis. Written on the Tabs row by TTabsViewPlugin; absent without the plugin.",
+    "--so-tabs-gap-pos": "Start of the Tabs row line gap under the active tab, measured from the row edge. Written on the row by TTabsViewPlugin; absent without the plugin.",
+    "--so-tabs-gap-size": "Length of the Tabs row line gap under the active tab. Written on the row by TTabsViewPlugin; absent without the plugin.",
+    "--so-tabs-active-moving": "Active marker movement flag: 1 while row pseudo-element transitions finish. Written on the row by TTabsViewPlugin; the theme uses it for marker transition duration: calc(var(--so-tabs-active-moving, 0) * 200ms).",
+    "--so-table-column-ghost": "Table column resize ghost inline offset during deferred handle dragging (data-resize-ghost). Written on the header by the resize plugin; the theme draws the ghost and uses it in translate.",
+    "--so-table-column-ghost-size": "Table column resize ghost height from the header top to the table bottom inside its viewport. Written on the header by the resize plugin.",
+    "--so-table-column-shift": "Dragged Table column width, used to move neighbors during reorder. The gesture plugin writes it on the header in reorderPreview: head, or on the root in column mode. The theme animates neighbors with it and sets body variables (--so-table-body-shift)."
+  }
+}