@smwb/ui-styles 1.0.0

package/less/themes/summer/variables.less

@@ -0,0 +1,380 @@
+/*-------------------
+       Fonts
+--------------------*/
+@import (css)
+  url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap");
+
+@fontSize: 16px;
+@fontName: "Poppins";
+@fontFamily: @fontName, sans-serif;
+
+// Breakpoints: see foundation/breakpoints.less (single source)
+
+/*-------------------
+    Common colors
+--------------------*/
+@pageBg: #fff;
+@primaryColor: #fe9603;
+@errorColor: red;
+@successColor: #36913b;
+@warningColor: #ed6c02;
+@infoColor: #0288d1;
+@outlineColor: @primaryColor;
+@onPrimaryColor: #fff;
+@primaryContainer: @primaryColor;
+@onPrimaryContainer: @onPrimaryColor;
+@onPrimaryContainerHover: lighten(@primaryContainer, 6%);
+@onPrimaryContainerActive: lighten(@primaryContainer, 10%);
+
+@surfaceVariant: #fff;
+@surfaceBackground: #fff;
+@onSurfaceColor: @primaryTextColor;
+@onSurfaceVariant: @surfaceVariantDark;
+@onSurfaceHover: rgba(#000, 0.08);
+@onSurfaceActive: rgba(#000, 0.12);
+@disabledTextColor: rgba(#000, 0.38);
+@disabledBgColor: rgba(#000, 0.12);
+
+@primaryTextColor: #333;
+@scrollThumbColor: @disabledTextColor;
+
+@primaryColorHover: rgba(@primaryColor, 0.08);
+@primaryColorActive: rgba(@primaryColor, 0.12);
+@primaryColorFocus: rgba(@primaryColor, 0.14);
+
+/*-------------------
+    Border-radius
+--------------------*/
+@circleBorderRadius: 50%;
+
+/*-------------------
+     Text Field
+--------------------*/
+@textFieldBorderRadius: 4px;
+
+@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: 56px;
+@appBarBg: @primaryColor;
+@appBarContentColor: @onPrimaryColor;
+
+/*-------------------
+     Checkbox
+--------------------*/
+@checkboxBorderRadius: 2px;
+@checkboxBorderColor: @disabledTextColor;
+@checkboxDisabledColor: @disabledTextColor;
+@checkboxCheckedBg: @primaryColor;
+
+/*-------------------
+     Radio button
+--------------------*/
+@radioRippleColor: rgba(@primaryColor, 0.3);
+
+/*-------------------
+     Toggle
+--------------------*/
+@toggleTrackColor: @disabledTextColor;
+@toggleDefaultThumbColor: #fff;
+@toggleTrackWidth: 36px;
+@toggleThumbActiveColor: @primaryColor;
+@toggleTrackActiveColor: rgba(@primaryColor, 0.4);
+@toggleTrackHeight: 15px;
+@toggleThumbHeight: 20px;
+@toggleThumbUncheckedHeight: 20px;
+@toggleSelectedLeft: 18px;
+@toggleUnselectedLeft: -3px;
+@toggleBorderColor: none;
+@toggleWithBorder: false;
+
+/*-------------------
+    Button
+--------------------*/
+@buttonBorderRadius: 4px;
+@smallButtonFontSize: 13px;
+@mediumButtonFontSize: 14px;
+@largeButtonFontSize: 15px;
+@buttonDisabledBg: @disabledBgColor;
+
+@buttonContainedHoverBg: #444;
+@buttonContainedActiveBg: #444;
+@buttonContainedFocusBg: #444;
+
+@buttonOutlinedHoverBg: rgba(@primaryColor, 0.08);
+@buttonOutlinedActiveBg: rgba(@primaryColor, 0.14);
+@buttonOutlinedFocusBg: rgba(@primaryColor, 0.12);
+
+@fabBorderRadius: 50%;
+@fabFocusBg: @onPrimaryContainerActive;
+@fabActiveBg: @onPrimaryContainerActive;
+@fabHoverBg: @onPrimaryContainerHover;
+
+/*-------------------
+    Modal
+--------------------*/
+@modalOverlayBg: rgba(0, 0, 0, 0.5);
+@modalBorderRadius: 4px;
+
+/*-------------------
+    Snackbar
+--------------------*/
+@snackbarDarkBg: #313033;
+@snackbarLightBg: #fefefe;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBg: rgba(#000, 0.06);
+@chipsHoverBg: @onSurfaceHover;
+@chipsActiveBg: @onSurfaceActive;
+@chipsOutlinedBorder: @chipsIconColor;
+@chipsIconColor: rgba(@primaryTextColor, 0.5);
+@chipsIconColorHover: rgba(@primaryTextColor, 0.8);
+@chipsBorderRadius: 24px;
+@chipsSelectedBg: @onSurfaceActive;
+@chipsDefaultShadow: none;
+
+/*-------------------
+    Menu
+--------------------*/
+@menuBorderRadius: 4px;
+@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;
+@menuOpacitySelected: 0.08;
+@menuDividerColor: rgba(0, 0, 0, 0.12);
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColor: rgba(@primaryTextColor, 0.7);
+@tabColorDefault: rgba(@primaryTextColor, 0.7);
+@tabColorActive: @primaryColor;
+@tabBgColor: @primaryColor;
+@tabOpacityHover: 0.04;
+@tabOpacityFocus: 0.12;
+
+/*-------------------
+    Slider
+--------------------*/
+@sliderColor: @primaryColor;
+@sliderDisabledColor: #9e9e9e;
+@sliderLabelRadius: 4px;
+@sliderHoverColor: rgba(@primaryColor, 0.05);
+@sliderActiveColor: rgba(@primaryColor, 0.15);
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBg: rgba(@primaryColor, 0.1);
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBg: transparent;
+
+/*-------------------
+     Sheet
+--------------------*/
+@sheetBorderRadius: 0px;
+
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBg: #6d6d6d;
+@tooltipTextColor: @primaryTextColorDark;
+
+/*-------------------
+     Card
+--------------------*/
+@cardBorderRadius: 0px;
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColor: @textFieldInputColor;
+
+/*-------------------
+    Table
+--------------------*/
+@tableBorderColor: rgba(@primaryTextColor, 0.12);
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgLight: rgba(@primaryColor, 0.1);
+@messageBorderRadius: 2px;
+
+/*===================================================== DARK THEME =================================================*/
+/*-------------------
+    Common
+--------------------*/
+@pageBgDark: #121212;
+@surfaceBackgroundDark: #292929;
+@primaryTextColorDark: #fff;
+@grayColor: rgba(#fff, 0.3);
+@scrollThumbColorDark: @grayColor;
+@primaryColorDark: lighten(#fe9603, 10%);
+@onPrimaryColorDark: #000;
+@outlineColorDark: #938f99;
+@primaryContainerDark: @primaryColorDark;
+@onPrimaryContainerDark: @onPrimaryColorDark;
+@onPrimaryContainerHoverDark: lighten(@primaryColorDark, 6%);
+@onPrimaryContainerActiveDark: lighten(@primaryColorDark, 10%);
+
+@surfaceVariantDark: #49454f;
+@onSurfaceColorDark: #fff;
+@onSurfaceVariantDark: #fff;
+@onSurfaceHoverDark: rgba(@onSurfaceColorDark, 0.1);
+@onSurfaceActiveDark: rgba(@onSurfaceColorDark, 0.12);
+@disabledBgColorDark: rgba(@onSurfaceColorDark, 0.12);
+@disabledTextColorDark: rgba(@onSurfaceColorDark, 0.38);
+
+@primaryColorHoverDark: rgba(@primaryColorDark, 0.04);
+@primaryColorActiveDark: rgba(@primaryColorDark, 0.1);
+@primaryColorFocusDark: rgba(@primaryColorDark, 0.08);
+
+/*-------------------
+    Button
+--------------------*/
+@buttonContainedTextColorDark: #371e73;
+@buttonDisabledBgDark: rgba(@onSurfaceColorDark, 0.12);
+@buttonContainedHoverBgDark: lighten(@primaryColorDark, 4%);
+@buttonContainedActiveBgDark: lighten(@primaryColorDark, 8%);
+@buttonContainedFocusBgDark: lighten(@primaryColorDark, 8%);
+
+@buttonOutlinedHoverBgDark: rgba(@primaryColorDark, 0.08);
+@buttonOutlinedActiveBgDark: rgba(@primaryColorDark, 0.12);
+@buttonOutlinedFocusBgDark: rgba(@primaryColorDark, 0.12);
+
+@fabFocusBgDark: @onPrimaryContainerActiveDark;
+@fabActiveBgDark: @onPrimaryContainerActiveDark;
+@fabHoverBgDark: @onPrimaryContainerHoverDark;
+
+/*-------------------
+    Checkbox
+--------------------*/
+@checkboxBorderColorDark: @outlineColorDark;
+@checkboxDisabledColorDark: @grayColor;
+@checkboxCheckedBgDark: @primaryColorDark;
+
+/*-------------------
+    Toggle
+--------------------*/
+@toggleTrackColorDark: @disabledTextColorDark;
+@toggleThumbActiveColorDark: @primaryColorDark;
+@toggleTrackActiveColorDark: rgba(@primaryColorDark, 0.4);
+@toggleBorderColorDark: @outlineColorDark;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBgDark: @onSurfaceHoverDark;
+@chipsHoverBgDark: @onSurfaceActiveDark;
+@chipsActiveBgDark: rgba(@onSurfaceColorDark, 0.16);
+@chipsOutlinedBorderDark: @outlineColorDark;
+@chipsIconColorDark: rgba(@onSurfaceColorDark, 0.6);
+@chipsIconColorHoverDark: @onSurfaceColorDark;
+@chipsSelectedBgDark: @chipsActiveBgDark;
+
+/*-------------------
+    Radio
+--------------------*/
+
+/*-------------------
+    Menu
+--------------------*/
+@menuTextColorDark: @onSurfaceColorDark;
+@menuDisabledTextColorDark: @grayColor;
+@menuDividerColorDark: rgba(255, 255, 255, 0.12);
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColorDark: rgba(@primaryTextColorDark, 0.7);
+@tabColorDefaultDark: rgba(@primaryTextColorDark, 0.7);
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBgDark: @surfaceVariantDark;
+
+/*-------------------
+     App bar
+--------------------*/
+@appBarBgDark: @surfaceBackgroundDark;
+@appBarContentColorDark: @onSurfaceVariantDark;
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBgDark: transparent;
+
+/*-------------------
+    Table
+--------------------*/
+@tableBorderColorDark: rgba(@primaryTextColorDark, 0.12);
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBgDark: #fff;
+@tooltipTextColorDark: @primaryTextColor;
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColorDark: @textFieldInputColorDark;
+
+/*-------------------
+     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);
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgDark: #323232;

package/less/variables.less

@@ -0,0 +1,260 @@
+:root {
+  --smui-onSurfaceVariant: @onSurfaceVariant;
+  --smui-onSurfaceColor: @onSurfaceColor;
+  --smui-primaryColor: @primaryColor;
+  --smui-fontFamily: @fontFamily;
+  --smui-pageBackground: @pageBg;
+  --smui-scrollThumbColor: @scrollThumbColor;
+  --smui-surfaceBackground: @surfaceBackground;
+  --smui-primaryTextColor: @primaryTextColor;
+  --smui-onPrimaryColor: @onPrimaryColor;
+  --smui-disabledTextColor: @disabledTextColor;
+  --smui-outlineColor: @outlineColor;
+  --smui-onSurfaceHover: @onSurfaceHover;
+  --smui-onSurfaceActive: @onSurfaceActive;
+  --smui-surfaceVariant: @surfaceVariant;
+  --smui-disabledBgColor: @disabledBgColor;
+  --smui-primaryContainer: @primaryContainer;
+  --smui-onPrimaryContainer: @onPrimaryContainer;
+  --smui-onPrimaryContainerHover: @onPrimaryContainerHover;
+  --smui-onPrimaryContainerActive: @onPrimaryContainerActive;
+  --smui-primaryColorHover: @primaryColorHover;
+  --smui-primaryColorActive: @primaryColorActive;
+  --smui-primaryColorFocus: @primaryColorFocus;
+
+  /* Semantic color set (color prop) */
+  --smui-secondaryColor: @secondaryColor;
+  --smui-errorColor: @errorColor;
+  --smui-successColor: @successColor;
+  --smui-warningColor: @warningColor;
+  --smui-infoColor: @infoColor;
+  --smui-onSecondaryColor: @onSecondaryColor;
+  --smui-onErrorColor: @onErrorColor;
+  --smui-onSuccessColor: @onSuccessColor;
+  --smui-onWarningColor: @onWarningColor;
+  --smui-onInfoColor: @onInfoColor;
+  --smui-secondaryColorHover: @secondaryColorHover;
+  --smui-secondaryColorActive: @secondaryColorActive;
+  --smui-secondaryColorFocus: @secondaryColorFocus;
+  --smui-errorColorHover: @errorColorHover;
+  --smui-errorColorActive: @errorColorActive;
+  --smui-errorColorFocus: @errorColorFocus;
+  --smui-successColorHover: @successColorHover;
+  --smui-successColorActive: @successColorActive;
+  --smui-successColorFocus: @successColorFocus;
+  --smui-warningColorHover: @warningColorHover;
+  --smui-warningColorActive: @warningColorActive;
+  --smui-warningColorFocus: @warningColorFocus;
+  --smui-infoColorHover: @infoColorHover;
+  --smui-infoColorActive: @infoColorActive;
+  --smui-infoColorFocus: @infoColorFocus;
+
+  --smui-dividerColor: @dividerColor;
+
+  --smui-buttonOutlinedHoverBg: @buttonOutlinedHoverBg;
+  --smui-buttonOutlinedActiveBg: @buttonOutlinedActiveBg;
+  --smui-buttonOutlinedFocusBg: @buttonOutlinedFocusBg;
+  --smui-buttonContainedHoverBg: @buttonContainedHoverBg;
+  --smui-buttonContainedActiveBg: @buttonContainedActiveBg;
+  --smui-buttonContainedFocusBg: @buttonContainedFocusBg;
+  --smui-buttonDisabledBg: @buttonDisabledBg;
+
+  --smui-checkboxBorderColor: @checkboxBorderColor;
+  --smui-checkboxDisabledColor: @checkboxDisabledColor;
+  --smui-checkboxCheckedBg: @checkboxCheckedBg;
+
+  --smui-toggleTrackColor: @toggleTrackColor;
+  --smui-toggleThumbActiveColor: @toggleThumbActiveColor;
+  --smui-toggleTrackActiveColor: @toggleTrackActiveColor;
+  --smui-toggleBorderColor: @toggleBorderColor;
+
+  --smui-chipsBg: @chipsBg;
+  --smui-chipsIconColorHover: @chipsIconColorHover;
+  --smui-chipsIconColor: @chipsIconColor;
+  --smui-chipsOutlinedBorder: @chipsOutlinedBorder;
+  --smui-chipsHoverBg: @chipsHoverBg;
+  --smui-chipsActiveBg: @chipsActiveBg;
+
+  --smui-menuTextColor: @menuTextColor;
+  --smui-menuDividerColor: @menuDividerColor;
+  --smui-menuDisabledTextColor: @menuDisabledTextColor;
+
+  --smui-tabIconColor: @tabIconColor;
+  --smui-tabColorDefault: @tabColorDefault;
+
+  --smui-sliderColor: @sliderColor;
+  --smui-sliderDisabledColor: @sliderDisabledColor;
+
+  --smui-fabFocusBg: @fabFocusBg;
+  --smui-fabActiveBg: @fabActiveBg;
+  --smui-fabHoverBg: @fabHoverBg;
+
+  --smui-indicatorTrackBg: @indicatorTrackBg;
+
+  --smui-appBarBg: @appBarBg;
+  --smui-appBarContentColor: @appBarContentColor;
+
+  --smui-navItemActiveBg: @navItemActiveBg;
+  --smui-tableBorderColor: @tableBorderColor;
+
+  --smui-tooltipBg: @tooltipBg;
+  --smui-tooltipTextColor: @tooltipTextColor;
+
+  --smui-textFieldLabelColor: @textFieldLabelColor;
+  --smui-textFieldLabelDisabledColor: @textFieldLabelDisabledColor;
+  --smui-textFieldInputColor: @textFieldInputColor;
+  --smui-textFieldInputDisabledColor: @textFieldInputDisabledColor;
+  --smui-textFieldNotchedColor: @textFieldNotchedColor;
+  --smui-textFieldNotchedHoverColor: @textFieldNotchedHoverColor;
+  --smui-textFieldNotchedDisabledColor: @textFieldNotchedDisabledColor;
+  --smui-textFieldHelperTextColor: @textFieldHelperTextColor;
+  --smui-textFieldHelperTextDisabledColor: @textFieldHelperTextDisabledColor;
+  --smui-textFieldFilledBorderColor: @textFieldFilledBorderColor;
+  --smui-textFieldFilledHoverBorderColor: @textFieldFilledHoverBorderColor;
+  --smui-textFieldFilledDisabledBorderColor: @textFieldFilledDisabledBorderColor;
+  --smui-textFieldFilledBgColor: @textFieldFilledBgColor;
+  --smui-textFieldFilledHoverBgColor: @textFieldFilledHoverBgColor;
+  --smui-textFieldFilledFocusedBgColor: @textFieldFilledFocusedBgColor;
+  --smui-textFieldFilledDisabledBgColor: @textFieldFilledDisabledBgColor;
+
+  --smui-selectFieldSearchMenuColor: @selectFieldSearchMenuColor;
+
+  --smui-dataPickerIconDisabledColor: @dataPickerIconDisabledColor;
+  --smui-dataPickerWeekDayColor: @dataPickerWeekDayColor;
+
+  --smui-messageBackground: @messageBgLight;
+
+  /* Spacing scale (overridable at runtime by client apps) */
+  --smui-spacing-unit: @smui-spacing-unit;
+  --smui-space-xxs: @smui-space-xxs;
+  --smui-space-xs: @smui-space-xs;
+  --smui-space-sm: @smui-space-sm;
+  --smui-space-md: @smui-space-md;
+  --smui-space-lg: @smui-space-lg;
+  --smui-space-xl: @smui-space-xl;
+  --smui-space-xxl: @smui-space-xxl;
+  --smui-space-xxxl: @smui-space-xxxl;
+
+  /* Border-radius scale */
+  --smui-radius-xs: @smui-radius-xs;
+  --smui-radius-sm: @smui-radius-sm;
+  --smui-radius-md: @smui-radius-md;
+  --smui-radius-lg: @smui-radius-lg;
+  --smui-radius-xl: @smui-radius-xl;
+  --smui-radius-xxl: @smui-radius-xxl;
+
+  /* Elevation scale */
+  --smui-elevation-1: @smui-elevation-1;
+  --smui-elevation-2: @smui-elevation-2;
+  --smui-elevation-4: @smui-elevation-4;
+  --smui-elevation-6: @smui-elevation-6;
+  --smui-elevation-8: @smui-elevation-8;
+  --smui-elevation-12: @smui-elevation-12;
+  --smui-elevation-24: @smui-elevation-24;
+
+  /* Breakpoints (for JS / container queries) */
+  --smui-bp-sm: @smui-bp-sm;
+  --smui-bp-md: @smui-bp-md;
+  --smui-bp-lg: @smui-bp-lg;
+  --smui-bp-xl: @smui-bp-xl;
+}
+
+:root[data-theme="dark"] {
+  --smui-onSurfaceVariant: @onSurfaceVariantDark;
+  --smui-onSurfaceColor: @onSurfaceColorDark;
+  --smui-primaryColor: @primaryColorDark;
+  --smui-fontFamily: @fontFamily;
+  --smui-pageBackground: @pageBgDark;
+  --smui-scrollThumbColor: @scrollThumbColorDark;
+  --smui-surfaceBackground: @surfaceBackgroundDark;
+  --smui-primaryTextColor: @primaryTextColorDark;
+  --smui-onPrimaryColor: @onPrimaryColorDark;
+  --smui-disabledTextColor: @disabledTextColorDark;
+  --smui-outlineColor: @outlineColorDark;
+  --smui-onSurfaceHover: @onSurfaceHoverDark;
+  --smui-onSurfaceActive: @onSurfaceActiveDark;
+  --smui-surfaceVariant: @surfaceVariantDark;
+  --smui-disabledBgColor: @disabledBgColorDark;
+  --smui-primaryContainer: @primaryContainerDark;
+  --smui-onPrimaryContainer: @onPrimaryContainerDark;
+  --smui-onPrimaryContainerHover: @onPrimaryContainerHoverDark;
+  --smui-onPrimaryContainerActive: @onPrimaryContainerActiveDark;
+  --smui-primaryColorHover: @primaryColorHoverDark;
+  --smui-primaryColorActive: @primaryColorActiveDark;
+  --smui-primaryColorFocus: @primaryColorFocusDark;
+
+  --smui-dividerColor: @dividerColorDark;
+
+  --smui-buttonOutlinedHoverBg: @buttonOutlinedHoverBgDark;
+  --smui-buttonOutlinedActiveBg: @buttonOutlinedActiveBgDark;
+  --smui-buttonOutlinedFocusBg: @buttonOutlinedFocusBgDark;
+  --smui-buttonContainedHoverBg: @buttonContainedHoverBgDark;
+  --smui-buttonContainedActiveBg: @buttonContainedActiveBgDark;
+  --smui-buttonContainedFocusBg: @buttonContainedFocusBgDark;
+  --smui-buttonDisabledBg: @buttonDisabledBgDark;
+
+  --smui-checkboxBorderColor: @checkboxBorderColorDark;
+  --smui-checkboxDisabledColor: @checkboxDisabledColorDark;
+  --smui-checkboxCheckedBg: @checkboxCheckedBgDark;
+
+  --smui-toggleTrackColor: @toggleTrackColorDark;
+  --smui-toggleThumbActiveColor: @toggleThumbActiveColorDark;
+  --smui-toggleTrackActiveColor: @toggleTrackActiveColorDark;
+  --smui-toggleBorderColor: @toggleBorderColorDark;
+
+  --smui-chipsBg: @chipsBgDark;
+  --smui-chipsIconColorHover: @chipsIconColorHoverDark;
+  --smui-chipsIconColor: @chipsIconColorDark;
+  --smui-chipsOutlinedBorder: @chipsOutlinedBorderDark;
+  --smui-chipsHoverBg: @chipsHoverBgDark;
+  --smui-chipsActiveBg: @chipsActiveBgDark;
+  --smui-chipsSelectedBg: @chipsSelectedBgDark;
+
+  --smui-menuTextColor: @menuTextColorDark;
+  --smui-menuDividerColor: @menuDividerColorDark;
+  --smui-menuDisabledTextColor: @menuDisabledTextColorDark;
+
+  --smui-tabIconColor: @tabIconColorDark;
+  --smui-tabColorDefault: @tabColorDefaultDark;
+  --smui-tableBorderColor: @tableBorderColorDark;
+  --smui-sliderColor: @sliderColor;
+  --smui-sliderDisabledColor: @sliderDisabledColor;
+
+  --smui-fabFocusBg: @fabFocusBgDark;
+  --smui-fabActiveBg: @fabActiveBgDark;
+  --smui-fabHoverBg: @fabHoverBgDark;
+
+  --smui-indicatorTrackBg: @indicatorTrackBgDark;
+
+  --smui-appBarBg: @appBarBgDark;
+  --smui-appBarContentColor: @appBarContentColorDark;
+
+  --smui-navItemActiveBg: @navItemActiveBgDark;
+
+  --smui-tooltipBg: @tooltipBgDark;
+  --smui-tooltipTextColor: @tooltipTextColorDark;
+
+  --smui-textFieldLabelColor: @textFieldLabelColorDark;
+  --smui-textFieldLabelDisabledColor: @textFieldLabelDisabledColorDark;
+  --smui-textFieldInputColor: @textFieldInputColorDark;
+  --smui-textFieldInputDisabledColor: @textFieldInputDisabledColorDark;
+  --smui-textFieldNotchedColor: @textFieldNotchedColorDark;
+  --smui-textFieldNotchedHoverColor: @textFieldNotchedHoverColorDark;
+  --smui-textFieldNotchedDisabledColor: @textFieldNotchedDisabledColorDark;
+  --smui-textFieldHelperTextColor: @textFieldHelperTextColorDark;
+  --smui-textFieldHelperTextDisabledColor: @textFieldHelperTextDisabledColorDark;
+  --smui-textFieldFilledBorderColor: @textFieldFilledBorderColorDark;
+  --smui-textFieldFilledHoverBorderColor: @textFieldFilledHoverBorderColorDark;
+  --smui-textFieldFilledDisabledBorderColor: @textFieldFilledDisabledBorderColorDark;
+  --smui-textFieldFilledBgColor: @textFieldFilledBgColorDark;
+  --smui-textFieldFilledHoverBgColor: @textFieldFilledHoverBgColorDark;
+  --smui-textFieldFilledFocusedBgColor: @textFieldFilledFocusedBgColorDark;
+  --smui-textFieldFilledDisabledBgColor: @textFieldFilledDisabledBgColorDark;
+
+  --smui-selectFieldSearchMenuColor: @textFieldInputColorDark;
+
+  --smui-dataPickerIconDisabledColor: @dataPickerIconDisabledColorDark;
+  --smui-dataPickerWeekDayColor: @dataPickerWeekDayColorDark;
+
+  --smui-messageBackground: @messageBgDark;
+}