@smwb/ui-styles 1.0.0

package/less/default/globals/default.variables.less

@@ -0,0 +1,584 @@
+/*-------------------
+       Fonts
+--------------------*/
+@import (css) url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+@fontSize: 16px;
+@fontName: "Roboto";
+@fontFamily: @fontName, sans-serif;
+
+// Breakpoints: see foundation/breakpoints.less (single source)
+
+/*-------------------
+    Common colors
+--------------------*/
+@pageBg: #fff;
+@primaryColor: #6750a4;
+@secondaryColor: #625b71;
+@errorColor: red;
+@successColor: #36913b;
+@warningColor: #ed6c02;
+@infoColor: #0288d1;
+
+// Semantic color set — "on" (foreground), container, hover, active.
+// Components with a `color` prop resolve through these.
+@onSecondaryColor: #fff;
+@onErrorColor: #fff;
+@onSuccessColor: #fff;
+@onWarningColor: #fff;
+@onInfoColor: #fff;
+
+@secondaryColorHover: ~"color-mix(in srgb, @{secondaryColor} 8%, transparent)";
+@secondaryColorActive: ~"color-mix(in srgb, @{secondaryColor} 14%, transparent)";
+@secondaryColorFocus: ~"color-mix(in srgb, @{secondaryColor} 12%, transparent)";
+@errorColorHover: ~"color-mix(in srgb, @{errorColor} 8%, transparent)";
+@errorColorActive: ~"color-mix(in srgb, @{errorColor} 14%, transparent)";
+@errorColorFocus: ~"color-mix(in srgb, @{errorColor} 12%, transparent)";
+@successColorHover: ~"color-mix(in srgb, @{successColor} 8%, transparent)";
+@successColorActive: ~"color-mix(in srgb, @{successColor} 14%, transparent)";
+@successColorFocus: ~"color-mix(in srgb, @{successColor} 12%, transparent)";
+@warningColorHover: ~"color-mix(in srgb, @{warningColor} 8%, transparent)";
+@warningColorActive: ~"color-mix(in srgb, @{warningColor} 14%, transparent)";
+@warningColorFocus: ~"color-mix(in srgb, @{warningColor} 12%, transparent)";
+@infoColorHover: ~"color-mix(in srgb, @{infoColor} 8%, transparent)";
+@infoColorActive: ~"color-mix(in srgb, @{infoColor} 14%, transparent)";
+@infoColorFocus: ~"color-mix(in srgb, @{infoColor} 12%, transparent)";
+
+@outlineColor: #79747e;
+@onPrimaryColor: #fff;
+@primaryContainer: #eaddff;
+@onPrimaryContainer: #21005e;
+@onPrimaryContainerHover: ~"color-mix(in srgb, #000 2%, @{primaryContainer})";
+@onPrimaryContainerActive: ~"color-mix(in srgb, #000 4%, @{primaryContainer})";
+
+@surfaceVariant: #e7e0ec;
+@surfaceBackground: #fffbfe;
+@onSurfaceColor: #1c1b1f;
+@onSurfaceVariant: #49454e;
+@onSurfaceHover: ~"color-mix(in srgb, @{onSurfaceColor} 8%, transparent)";
+@onSurfaceActive: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
+@disabledTextColor: ~"color-mix(in srgb, @{onSurfaceColor} 38%, transparent)";
+@disabledBgColor: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
+
+@primaryTextColor: #000;
+@scrollThumbColor: @disabledTextColor;
+
+@primaryColorHover: ~"color-mix(in srgb, @{primaryColor} 8%, transparent)";
+@primaryColorActive: ~"color-mix(in srgb, @{primaryColor} 14%, transparent)";
+@primaryColorFocus: ~"color-mix(in srgb, @{primaryColor} 12%, transparent)";
+
+@dividerColor: rgba(0, 0, 0, 0.12);
+
+/*-------------------
+    Border-radius
+--------------------*/
+@circleBorderRadius: @smui-radius-circle;
+
+/*=====================================================================
+    Component spacing tokens
+---------------------------------------------------------------------
+    Every gap / padding / margin in the components resolves through one
+    of these. On-grid values reference the foundation spacing scale
+    (foundation/spacing.less) so rescaling @smui-spacing-unit cascades
+    everywhere; off-grid values (commented) keep a literal but still
+    live here as a single, independently-overridable knob.
+=====================================================================*/
+@accordionSummaryPaddingX: @smui-space-lg;
+@accordionSummaryGap: 15px; // off-grid
+
+@avatarSizeSmall: 24px;
+@avatarSizeMedium: 40px;
+@avatarSizeLarge: 56px;
+@avatarGroupOverlap: @smui-space-sm;
+@avatarGroupBorder: 2px;
+
+@breadcrumbsGap: @smui-space-sm;
+
+@dividerSpacing: @smui-space-sm;
+@dividerTextGap: @smui-space-md;
+
+@paginationGap: @smui-space-xs;
+@paginationItemSize: 32px;
+@paginationItemSizeSmall: 26px;
+@paginationItemPaddingX: 6px; // off-grid
+
+@ratingGap: @smui-space-xxs;
+
+@skeletonRadius: @smui-radius-sm;
+
+@stepperConnectorGap: @smui-space-sm;
+@stepperIconSize: 24px;
+@stepperLabelGap: @smui-space-sm;
+
+@appBarPaddingX: @smui-space-lg;
+@appBarActionPadding: @smui-space-md;
+@appBarActionsGap: 10px; // off-grid
+
+@badgePaddingX: 6px; // off-grid
+
+@buttonGap: @smui-space-sm;
+@buttonPaddingSmall: @smui-space-xs 10px; // 10 off-grid
+@buttonPaddingMedium: 6px 14px; // off-grid
+@buttonPaddingLarge: @smui-space-sm 22px; // 22 off-grid
+
+@cardPadding: @smui-space-lg;
+
+@expansionPanelGap: @smui-space-md;
+@expansionPanelPadding: @smui-space-lg;
+@expansionPanelRadius: @smui-radius-lg;
+@expansionPanelOverlayZ: 1001; // off-grid; aligns with modal overlay layer
+
+@checkboxGroupGap: @smui-space-xl;
+
+@chipGap: @smui-space-sm;
+@chipPaddingX: @smui-space-md;
+
+@datePickerHeaderPadding: 15px @smui-space-md; // 15 off-grid
+@datePickerPadding: @smui-space-sm;
+@datePickerYearPadding: 5px; // off-grid
+@datePickerFooterPaddingY: @smui-space-sm;
+@datePickerLabelGap: 10px; // off-grid
+@datePickerHelperMarginTop: @smui-space-xs;
+@datePickerDayMarginX: @smui-space-xxs;
+
+@fabExtendedPaddingX: @smui-space-lg;
+@fabExtendedSmallPaddingX: @smui-space-md;
+
+@imagesListItemBarPaddingX: @smui-space-md;
+@imagesListItemBarPadding: 6px 0px @smui-space-md 0px; // 6 off-grid
+
+@listItemPadding: @smui-space-sm @smui-space-lg;
+@listItemGap: @smui-space-xl;
+
+@menuListPaddingY: @smui-space-sm;
+@menuItemPaddingX: @smui-space-lg;
+@menuItemGap: 6px; // off-grid
+@menuDividerSpacing: @smui-space-sm;
+@menuIconGap: 10px; // off-grid
+@menuTextInset: 40px; // off-grid
+@menuTextInsetDense: 36px; // off-grid
+
+@progressDotMargin: @smui-space-xs;
+
+@screenDividerLabelMargin: 5px; // off-grid
+
+@messagePadding: @smui-space-md @smui-space-xl;
+@messageGap: 10px; // off-grid
+@messageTitleMarginBottom: @smui-space-xs;
+
+@modalHeaderPadding: @smui-space-xl @smui-space-xl 10px @smui-space-xl; // 10 off-grid
+@modalContentPadding: 10px @smui-space-xl; // 10 off-grid
+@modalActionsPadding: 10px @smui-space-xl @smui-space-xl @smui-space-xl; // 10 off-grid
+
+@radioGroupGap: @smui-space-xl;
+@radioRowGap: 50px; // off-grid
+
+@selectFieldPadding: @smui-space-lg;
+@selectFieldFilledPadding: 22px @smui-space-lg 10px @smui-space-lg; // 22/10 off-grid
+@selectFieldChipsGap: 6px; // off-grid
+@selectFieldValueGap: @smui-space-xxs;
+@selectFieldMenuItemPadding: @smui-space-sm @smui-space-xxl;
+@selectFieldCreatePaddingY: 10px; // off-grid
+@selectFieldSearchPadding: @smui-space-sm @smui-space-lg;
+@selectFieldChipMarginLeft: @smui-space-xs;
+
+@sheetPadding: @smui-space-xl;
+@sheetHeaderPaddingY: 10px; // off-grid
+@sheetHeaderPaddingBottom: 5px; // off-grid
+@sheetContentPaddingLeft: 10px; // off-grid
+@sheetHandleSpace: @smui-space-xl; // drag-to-resize grab-handle hit area
+
+@sidebarPadding: @smui-space-lg;
+@sidebarOpenGap: @smui-space-xl;
+@sidebarNavGap: 5px; // off-grid
+@sidebarNavItemGap: @smui-space-sm;
+
+@sliderPaddingY: 13px; // off-grid
+@sliderMarksGap: 25px; // off-grid
+@sliderLabelPaddingTop: 10px; // off-grid
+@sliderTooltipPadding: @smui-space-xs 10px; // 10 off-grid
+
+@snackbarGap: @smui-space-xl;
+@snackbarWidth: 350px;
+@snackbarPadding: @smui-space-lg;
+
+@tabPaddingX: @smui-space-xxl;
+@tabIconPaddingTop: 6px; // off-grid
+@tabIconPaddingBottom: @smui-space-xs;
+@tabLabelPaddingLeft: @smui-space-sm;
+
+@tableCellPaddingX: @smui-space-lg;
+@tableToolbarMarginBottom: 10px; // off-grid
+@tableActionsGap: 5px; // off-grid
+
+@tablePaginationPaddingX: @smui-space-lg;
+@tablePaginationOuterGap: 60px; // off-grid
+@tablePaginationControlsGap: 30px; // off-grid
+@tablePaginationRowsGap: @smui-space-xl;
+@tablePaginationSelectPaddingY: @smui-space-xs;
+
+@textFieldNotchPaddingX: @smui-space-sm;
+@textFieldNotchCondensedPaddingX: 5px; // off-grid
+@textFieldFilledInputPadding: @smui-space-lg @smui-space-lg 17px; // 17 off-grid
+@textFieldFilledLabelPadding: 23px @smui-space-lg 10px @smui-space-lg; // 23/10 off-grid
+@textFieldAffixPaddingX: @smui-space-lg;
+@textFieldHelperMarginTop: @smui-space-sm;
+@textFieldAdornmentGap: @smui-space-sm;
+@textFieldAffixMarginX: @smui-space-lg;
+@textFieldAdornmentFilledMarginTop: @smui-space-md;
+
+@toggleGap: @smui-space-sm;
+
+@tooltipPaddingX: @smui-space-sm;
+
+@treeViewIndent: 30px; // off-grid
+@treeViewItemGap: 10px; // off-grid
+
+/*-------------------
+     Text Field
+--------------------*/
+@textFieldBorderRadius: @smui-radius-sm;
+
+@textFieldLabelColor: rgba(0, 0, 0, 0.6);
+@textFieldLabelDisabledColor: @disabledTextColor;
+
+@textFieldInputColor: rgba(0, 0, 0, 0.87);
+@textFieldInputDisabledColor: @disabledTextColor;
+
+@textFieldNotchedColor: rgba(0, 0, 0, 0.38);
+@textFieldNotchedHoverColor: #000;
+@textFieldNotchedDisabledColor: rgba(0, 0, 0, 0.26);
+
+@textFieldHelperTextColor: rgba(0, 0, 0, 0.6);
+@textFieldHelperTextDisabledColor: @disabledTextColor;
+
+@textFieldFilledBorderColor: rgba(0, 0, 0, 0.42);
+@textFieldFilledHoverBorderColor: #000;
+@textFieldFilledDisabledBorderColor: rgba(0, 0, 0, 0.26);
+@textFieldFilledBgColor: rgba(0, 0, 0, 0.05);
+@textFieldFilledHoverBgColor: rgba(0, 0, 0, 0.07);
+@textFieldFilledFocusedBgColor: rgba(0, 0, 0, 0.12);
+@textFieldFilledDisabledBgColor: rgba(0, 0, 0, 0.045);
+
+/*-------------------
+     App bar
+--------------------*/
+@appBarHeight: 65px;
+@appBarBg: @surfaceBackground;
+@appBarContentColor: @onSurfaceVariant;
+
+/*-------------------
+     Checkbox
+--------------------*/
+@checkboxBorderRadius: @smui-radius-xs;
+@checkboxBorderColor: @onSurfaceColor;
+@checkboxDisabledColor: @disabledTextColor;
+@checkboxCheckedBg: @primaryColor;
+
+/*-------------------
+     Radio button
+--------------------*/
+@radioRippleColor: ~"color-mix(in srgb, @{primaryColor} 30%, transparent)";
+
+/*-------------------
+     Toggle
+--------------------*/
+@toggleTrackColor: @surfaceVariant;
+@toggleDefaultThumbColor: @outlineColor;
+@toggleTrackWidth: 50px;
+@toggleThumbActiveColor: @surfaceBackground;
+@toggleTrackActiveColor: @primaryColor;
+@toggleTrackHeight: 30px;
+@toggleThumbHeight: 20px;
+@toggleThumbUncheckedHeight: 15px;
+@toggleSelectedLeft: 25px;
+@toggleUnselectedLeft: 5px;
+@toggleBorderColor: @outlineColor;
+@toggleWithBorder: true;
+
+/*-------------------
+    Button
+--------------------*/
+@buttonBorderRadius: 24px;
+@smallButtonFontSize: 13px;
+@mediumButtonFontSize: 14px;
+@largeButtonFontSize: 15px;
+@buttonDisabledBg: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
+
+@buttonContainedHoverBg: ~"color-mix(in srgb, #fff 4%, @{primaryColor})";
+@buttonContainedActiveBg: ~"color-mix(in srgb, #fff 10%, @{primaryColor})";
+@buttonContainedFocusBg: ~"color-mix(in srgb, #fff 10%, @{primaryColor})";
+
+@buttonOutlinedHoverBg: ~"color-mix(in srgb, @{primaryColor} 8%, transparent)";
+@buttonOutlinedActiveBg: ~"color-mix(in srgb, @{primaryColor} 12%, transparent)";
+@buttonOutlinedFocusBg: ~"color-mix(in srgb, @{primaryColor} 12%, transparent)";
+
+@fabBorderRadius: @smui-radius-xl;
+@fabFocusBg: @onPrimaryContainerActive;
+@fabActiveBg: @onPrimaryContainerActive;
+@fabHoverBg: @onPrimaryContainerHover;
+
+/*-------------------
+    Modal
+--------------------*/
+@modalOverlayBg: rgba(0, 0, 0, 0.5);
+@modalBorderRadius: @smui-radius-xl;
+
+/*-------------------
+    Snackbar
+--------------------*/
+@snackbarDarkBg: #313033;
+@snackbarLightBg: #e6e1e5;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBg: @surfaceBackground;
+@chipsHoverBg: @onSurfaceHover;
+@chipsActiveBg: @onSurfaceActive;
+@chipsOutlinedBorder: @outlineColor;
+@chipsIconColor: @primaryColor;
+@chipsIconColorHover: @primaryColor;
+@chipsBorderRadius: 6px;
+@chipsSelectedBg: #e8def8;
+@chipsDefaultShadow: 0px 3px 5px -1px rgb(0 0 0 / 11%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+  0px 2px 3px 0px rgb(0 0 0 / 12%);
+
+/*-------------------
+    Menu
+--------------------*/
+@menuBorderRadius: @smui-radius-sm;
+@menuBgColor: #fff;
+@menuBoxShadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
+@menuTextColor: @onSurfaceColor;
+@menuDisabledTextColor: @disabledTextColor;
+@menuOpacityHover: 0.08;
+@menuOpacityActive: 0.12;
+@menuOpacity-focus: 0.12;
+@menuOpacitySelected: 0.08;
+@menuDividerColor: @dividerColor;
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColor: @onSurfaceVariant;
+@tabColorDefault: @onSurfaceVariant;
+@tabColorActive: @primaryColor;
+@tabBgColor: @primaryColor;
+@tabOpacityHover: 0.04;
+@tabOpacityFocus: 0.12;
+
+/*-------------------
+    Slider
+--------------------*/
+@sliderColor: @primaryColor;
+@sliderHoverColor: ~"color-mix(in srgb, @{primaryColor} 5%, transparent)";
+@sliderActiveColor: ~"color-mix(in srgb, @{primaryColor} 15%, transparent)";
+@sliderDisabledColor: #9e9e9e;
+@sliderLabelRadius: @smui-radius-sm;
+
+/*-------------------
+    Table
+--------------------*/
+@tableBorderColor: ~"color-mix(in srgb, @{primaryTextColor} 12%, transparent)";
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBg: @surfaceVariant;
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBg: @primaryColorHover;
+
+/*-------------------
+     Sheet
+--------------------*/
+@sheetBorderRadius: @smui-radius-xxl;
+
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBg: #6d6d6d;
+@tooltipTextColor: @primaryTextColorDark;
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColor: @textFieldInputColor;
+
+/*-------------------
+     Card
+--------------------*/
+@cardBorderRadius: @smui-radius-lg;
+
+/*-------------------
+    DataPicker
+--------------------*/
+@dataPickerIconDisabledColor: rgba(0, 0, 0, 0.26);
+@dataPickerWeekDayColor: rgba(0, 0, 0, 0.6);
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgLight: ~"color-mix(in srgb, @{primaryColor} 10%, transparent)";
+@messageBorderRadius: @smui-radius-xs;
+
+/*===================================================== DARK THEME =================================================*/
+/*-------------------
+    Common
+--------------------*/
+@pageBgDark: #1f1f1f;
+@surfaceBackgroundDark: #1c1b1f;
+@primaryTextColorDark: #fff;
+@grayColor: rgba(#fff, 0.3);
+@scrollThumbColorDark: @grayColor;
+@primaryColorDark: #d0bcff;
+@onPrimaryColorDark: #371e73;
+@outlineColorDark: #938f99;
+@primaryContainerDark: #4f378b;
+@onPrimaryContainerDark: #eaddff;
+@onPrimaryContainerHoverDark: ~"color-mix(in srgb, #fff 6%, @{primaryContainerDark})";
+@onPrimaryContainerActiveDark: ~"color-mix(in srgb, #fff 10%, @{primaryContainerDark})";
+
+@surfaceVariantDark: #49454f;
+@onSurfaceColorDark: #e6e1e5;
+@onSurfaceVariantDark: #cac4d0;
+@onSurfaceHoverDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 8%, transparent)";
+@onSurfaceActiveDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
+@disabledBgColorDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
+@disabledTextColorDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 38%, transparent)";
+
+@primaryColorHoverDark: ~"color-mix(in srgb, @{primaryColorDark} 8%, transparent)";
+@primaryColorActiveDark: ~"color-mix(in srgb, @{primaryColorDark} 14%, transparent)";
+@primaryColorFocusDark: ~"color-mix(in srgb, @{primaryColorDark} 12%, transparent)";
+
+@dividerColorDark: rgba(255, 255, 255, 0.12);
+
+/*-------------------
+    Button
+--------------------*/
+@buttonContainedTextColorDark: #371e73;
+@buttonDisabledBgDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
+@buttonContainedHoverBgDark: ~"color-mix(in srgb, #fff 4%, @{primaryColorDark})";
+@buttonContainedActiveBgDark: ~"color-mix(in srgb, #fff 8%, @{primaryColorDark})";
+@buttonContainedFocusBgDark: ~"color-mix(in srgb, #fff 8%, @{primaryColorDark})";
+
+@buttonOutlinedHoverBgDark: ~"color-mix(in srgb, @{primaryColorDark} 8%, transparent)";
+@buttonOutlinedActiveBgDark: ~"color-mix(in srgb, @{primaryColorDark} 12%, transparent)";
+@buttonOutlinedFocusBgDark: ~"color-mix(in srgb, @{primaryColorDark} 12%, transparent)";
+
+@fabFocusBgDark: @onPrimaryContainerActiveDark;
+@fabActiveBgDark: @onPrimaryContainerActiveDark;
+@fabHoverBgDark: @onPrimaryContainerHoverDark;
+
+/*-------------------
+    Checkbox
+--------------------*/
+@checkboxBorderColorDark: @onSurfaceColorDark;
+@checkboxDisabledColorDark: @grayColor;
+@checkboxCheckedBgDark: @primaryColorDark;
+
+/*-------------------
+    Toggle
+--------------------*/
+@toggleTrackColorDark: @surfaceVariantDark;
+@toggleThumbActiveColorDark: @primaryColor;
+@toggleTrackActiveColorDark: @onPrimaryContainerDark;
+@toggleBorderColorDark: @outlineColorDark;
+
+/*-------------------
+     Text Field
+--------------------*/
+@textFieldLabelColorDark: rgba(255, 255, 255, 0.7);
+@textFieldLabelDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldInputColorDark: #fff;
+@textFieldInputDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldNotchedColorDark: rgba(255, 255, 255, 0.3);
+@textFieldNotchedHoverColorDark: #fff;
+@textFieldNotchedDisabledColorDark: rgba(255, 255, 255, 0.3);
+
+@textFieldHelperTextColorDark: rgba(255, 255, 255, 0.7);
+@textFieldHelperTextDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldFilledBorderColorDark: rgba(255, 255, 255, 0.7);
+@textFieldFilledHoverBorderColorDark: #fff;
+@textFieldFilledDisabledBorderColorDark: rgba(255, 255, 255, 0.5);
+@textFieldFilledBgColorDark: rgba(255, 255, 255, 0.09);
+@textFieldFilledHoverBgColorDark: rgba(255, 255, 255, 0.13);
+@textFieldFilledFocusedBgColorDark: rgba(255, 255, 255, 0.13);
+@textFieldFilledDisabledBgColorDark: rgba(255, 255, 255, 0.045);
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColorDark: @textFieldInputColorDark;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBgDark: @onSurfaceHoverDark;
+@chipsHoverBgDark: @onSurfaceActiveDark;
+@chipsActiveBgDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 16%, transparent)";
+@chipsOutlinedBorderDark: @outlineColorDark;
+@chipsIconColorDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 60%, transparent)";
+@chipsIconColorHoverDark: @onSurfaceColorDark;
+@chipsSelectedBgDark: @chipsActiveBgDark;
+
+/*-------------------
+    Radio
+--------------------*/
+
+/*-------------------
+    Menu
+--------------------*/
+@menuTextColorDark: @onSurfaceColorDark;
+@menuDividerColorDark: @dividerColorDark;
+@menuDisabledTextColorDark: @grayColor;
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColorDark: ~"color-mix(in srgb, @{primaryTextColorDark} 70%, transparent)";
+@tabColorDefaultDark: ~"color-mix(in srgb, @{primaryTextColorDark} 70%, transparent)";
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBgDark: @surfaceVariantDark;
+
+/*-------------------
+     App bar
+--------------------*/
+@appBarBgDark: @surfaceBackgroundDark;
+@appBarContentColorDark: @onSurfaceVariantDark;
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBgDark: transparent;
+
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBgDark: #fff;
+@tooltipTextColorDark: @primaryTextColor;
+
+/*-------------------
+    DataPicker
+--------------------*/
+@dataPickerIconDisabledColorDark: rgba(255, 255, 255, 0.5);
+@dataPickerWeekDayColorDark: rgba(255, 255, 255, 0.6);
+
+/*-------------------
+    Table
+--------------------*/
+@tableBorderColorDark: ~"color-mix(in srgb, @{primaryTextColorDark} 12%, transparent)";
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgDark: #323232;

package/less/foundation/breakpoints.less

@@ -0,0 +1,80 @@
+//=====================================================================
+//  Responsive breakpoints + media-query mixins
+//---------------------------------------------------------------------
+//  Single source for the breakpoint scale (was copy-pasted into every
+//  *.variables.less). The legacy @xs..@xl names are kept as aliases so
+//  the grid and any client overrides keep working.
+//
+//  Mixins take a detached ruleset:
+//
+//    .smui-media-up(md; {
+//      .smwb-card { padding: @smui-space-xxl; }
+//    });
+//    .smui-media-down(sm; {
+//      .smwb-appbar { padding: 0 @smui-space-sm; }
+//    });
+//    .smui-media-between(sm; lg; { ... });
+//
+//  @bp accepts a scale keyword (xs sm md lg xl) or a raw length.
+//  Override a breakpoint from theme.config: @smui-bp-md: 700px;
+//=====================================================================
+
+// Breakpoint scale
+@smui-bp-xs: 0;
+@smui-bp-sm: 420px;
+@smui-bp-md: 768px;
+@smui-bp-lg: 1024px;
+@smui-bp-xl: 1200px;
+
+// Legacy aliases (grid @gridBreakpoints, client overrides)
+@xs: @smui-bp-xs;
+@sm: @smui-bp-sm;
+@md: @smui-bp-md;
+@lg: @smui-bp-lg;
+@xl: @smui-bp-xl;
+
+// keyword -> length resolver (same guarded pattern as spacing.less)
+.smui-resolve-bp(@v) {
+  @smui-bp: @v;
+}
+.smui-resolve-bp(xs) {
+  @smui-bp: @smui-bp-xs;
+}
+.smui-resolve-bp(sm) {
+  @smui-bp: @smui-bp-sm;
+}
+.smui-resolve-bp(md) {
+  @smui-bp: @smui-bp-md;
+}
+.smui-resolve-bp(lg) {
+  @smui-bp: @smui-bp-lg;
+}
+.smui-resolve-bp(xl) {
+  @smui-bp: @smui-bp-xl;
+}
+
+// min-width: applies at @bp and wider
+.smui-media-up(@bp; @rules) {
+  .smui-resolve-bp(@bp);
+  @media (min-width: @smui-bp) {
+    @rules();
+  }
+}
+
+// max-width: applies below @bp (0.02px keeps it exclusive of @bp itself)
+.smui-media-down(@bp; @rules) {
+  .smui-resolve-bp(@bp);
+  @media (max-width: (@smui-bp - 0.02px)) {
+    @rules();
+  }
+}
+
+// inclusive of @from, exclusive of @to
+.smui-media-between(@from; @to; @rules) {
+  .smui-resolve-bp(@from);
+  @smui-bp-from: @smui-bp;
+  .smui-resolve-bp(@to);
+  @media (min-width: @smui-bp-from) and (max-width: (@smui-bp - 0.02px)) {
+    @rules();
+  }
+}