fomantic-ui 2.10.0-beta.7 → 2.10.0-beta.70

package/src/themes/default/elements/segment.variables

@@ -52,7 +52,7 @@
 @placeholderBackground: @offWhite;
 @placeholderPadding: @padding;
 @placeholderBorderColor: @borderColor;
-@placeholderBoxShadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+@placeholderBoxShadow: 0 2px 25px 0 rgb(34 36 38 / 0.05) inset;
 @placeholderMinHeight: 18rem;
 @placeholderContentMaxWidth: 15rem;
 @placeholderContentInlineButtonMargin: 0 @5px 0 0;
@@ -74,15 +74,15 @@
 @stackedPadding: @verticalPadding + (0.4em);
 @tallStackedPadding: @verticalPadding + (0.8em);
 @stackedBorderColor: @borderColor;
-@invertedStackedBorderColor: rgba(225, 225, 225, 0.5);
+@invertedStackedBorderColor: rgb(225 225 225 / 0.5);
 
 /*******************************
             States
 *******************************/
 
 /* Loading Dimmer */
-@loaderDimmerColor: rgba(255, 255, 255, 0.8);
-@loaderInvertedDimmerColor: rgba(0, 0, 0, 0.85);
+@loaderDimmerColor: rgb(255 255 255 / 0.8);
+@loaderInvertedDimmerColor: rgb(0 0 0 / 0.85);
 @loaderDimmerZIndex: 100;
 
 /* Loading Spinner */
@@ -138,8 +138,8 @@
 @secondaryInvertedBackground:
     lighten(@black, (@secondaryInvertedLightness * 100))
     linear-gradient(
-        rgba(255, 255, 255, @secondaryInvertedLightness) 0,
-        rgba(255, 255, 255, @secondaryInvertedLightness) 100%
+        rgb(255 255 255 / @secondaryInvertedLightness) 0,
+        rgb(255 255 255 / @secondaryInvertedLightness) 100%
     );
 @secondaryInvertedColor: @invertedMutedTextColor;
 
@@ -148,8 +148,8 @@
 @tertiaryInvertedBackground:
     lighten(@black, (@tertiaryInvertedLightness * 100))
     linear-gradient(
-        rgba(255, 255, 255, @tertiaryInvertedLightness) 0,
-        rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
+        rgb(255 255 255 / @tertiaryInvertedLightness) 0,
+        rgb(255 255 255 / @tertiaryInvertedLightness) 100%
     );
 @tertiaryInvertedColor: @invertedMutedTextColor;
 

package/src/themes/default/globals/reset.overrides

@@ -1,20 +1,26 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
-/* Document
-   ========================================================================== */
+/*
+Document
+========
+*/
 
 /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Use a more readable tab size (opinionated).
  */
 
 html {
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
 }
 
-/* Sections
-   ========================================================================== */
+/*
+Sections
+========
+*/
 
 /**
  * Remove the margin in all browsers.
@@ -24,74 +30,13 @@ body {
     margin: 0;
 }
 
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-    display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-    // https://github.com/necolas/normalize.css/issues/519
-    // stylelint-disable-next-line font-family-no-duplicate-names
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-    background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-}
+/*
+Text-level semantics
+====================
+*/
 
 /**
- * Add the correct font weight in Chrome, Edge, and Safari.
+ * Add the correct font weight in Chrome and Safari.
  */
 
 b,
@@ -100,16 +45,15 @@ strong {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+ * 2. Correct the odd 'em' font sizing in all browsers.
  */
 
 code,
 kbd,
-samp {
-    // https://github.com/necolas/normalize.css/issues/519
-    // stylelint-disable-next-line font-family-no-duplicate-names
-    font-family: monospace, monospace; /* 1 */
+samp,
+pre {
+    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
     font-size: 1em; /* 2 */
 }
 
@@ -122,8 +66,7 @@ small {
 }
 
 /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
+ * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
  */
 
 sub,
@@ -142,19 +85,23 @@ sup {
     top: -0.5em;
 }
 
-/* Embedded content
-   ========================================================================== */
+/*
+Tabular data
+============
+*/
 
 /**
- * Remove the border on images inside links in IE 10.
+ * Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
  */
 
-img {
-    border-style: none;
+table {
+    border-color: currentColor;
 }
 
-/* Forms
-   ========================================================================== */
+/*
+Forms
+=====
+*/
 
 /**
  * 1. Change the font styles in all browsers.
@@ -172,26 +119,6 @@ textarea {
     margin: 0; /* 2 */
 }
 
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
-    overflow: visible; /* 1 */
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
-    text-transform: none; /* 1 */
-}
-
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
@@ -204,54 +131,15 @@ button,
 }
 
 /**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-    padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
+ * Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
  */
 
 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+    padding: 0;
 }
 
 /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * Add the correct vertical alignment in Chrome and Firefox.
  */
 
 progress {
@@ -259,30 +147,11 @@ progress {
 }
 
 /**
- * Remove the default vertical scrollbar in IE 10+.
+ * Correct the cursor style of increment and decrement buttons in Safari.
  */
 
-textarea {
-    overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
     height: auto;
 }
 
@@ -300,13 +169,13 @@ textarea {
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
+ * 2. Change font properties to 'inherit' in Safari.
  */
 
 ::-webkit-file-upload-button {
@@ -314,40 +183,15 @@ textarea {
     font: inherit; /* 2 */
 }
 
-/* Interactive
-   ========================================================================== */
-
 /*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-    display: block;
-}
+Interactive
+===========
+*/
 
 /*
- * Add the correct display in all browsers.
+ * Add the correct display in Chrome and Safari.
  */
 
 summary {
     display: list-item;
 }
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-    display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-    display: none;
-}

package/src/themes/default/globals/site.variables

@@ -232,7 +232,7 @@
 @pageOverflowX: hidden;
 
 @lineHeight: 1.4285em;
-@textColor: rgba(0, 0, 0, 0.87);
+@textColor: rgb(0 0 0 / 0.87);
 
 /* -------------------
       Paragraph
@@ -259,21 +259,21 @@
 @customScrollbarWidth: 10px;
 @customScrollbarHeight: 10px;
 
-@trackBackground: rgba(0, 0, 0, 0.1);
+@trackBackground: rgb(0 0 0 / 0.1);
 @trackBorderRadius: 0;
 
 @thumbBorderRadius: 5px;
-@thumbBackground: rgba(0, 0, 0, 0.25);
+@thumbBackground: rgb(0 0 0 / 0.25);
 @thumbTransition: color 0.2s ease;
 
-@thumbInactiveBackground: rgba(0, 0, 0, 0.15);
-@thumbHoverBackground: rgba(128, 135, 139, 0.8);
+@thumbInactiveBackground: rgb(0 0 0 / 0.15);
+@thumbHoverBackground: rgb(128 135 139 / 0.8);
 
 /* Inverted */
-@trackInvertedBackground: rgba(255, 255, 255, 0.1);
-@thumbInvertedBackground: rgba(255, 255, 255, 0.25);
-@thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15);
-@thumbInvertedHoverBackground: rgba(255, 255, 255, 0.35);
+@trackInvertedBackground: rgb(255 255 255 / 0.1);
+@thumbInvertedBackground: rgb(255 255 255 / 0.25);
+@thumbInvertedInactiveBackground: rgb(255 255 255 / 0.15);
+@thumbInvertedHoverBackground: rgb(255 255 255 / 0.35);
 
 /* Scrolling */
 @scrollingMobileMaxHeight: 15em;
@@ -289,7 +289,7 @@
 @highlightBackground: #cce2ff;
 @highlightColor: @textColor;
 
-@inputHighlightBackground: rgba(100, 100, 100, 0.4);
+@inputHighlightBackground: rgb(100 100 100 / 0.4);
 @inputHighlightColor: @textColor;
 
 /* -------------------
@@ -301,10 +301,10 @@
 @loaderSpeed: 0.6s;
 @loaderSpeedSlow: 0.9s;
 @loaderLineWidth: 0.2em;
-@loaderFillColor: rgba(0, 0, 0, 0.1);
+@loaderFillColor: rgb(0 0 0 / 0.1);
 @loaderLineColor: @grey;
 
-@invertedLoaderFillColor: rgba(255, 255, 255, 0.15);
+@invertedLoaderFillColor: rgb(255 255 255 / 0.15);
 @invertedLoaderLineColor: @white;
 
 /* -------------------
@@ -544,7 +544,7 @@
 
 /* Box Shadows */
 
-@shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0);
+@shadowShadow: 0 0 0 0 rgb(0 0 0 / 0);
 @borderWidth: 1px;
 
 @primaryBoxShadow:
@@ -642,14 +642,14 @@
      Alpha Colors
 -------------------- */
 
-@subtleTransparentBlack: rgba(0, 0, 0, 0.03);
-@transparentBlack: rgba(0, 0, 0, 0.05);
-@strongTransparentBlack: rgba(0, 0, 0, 0.1);
-@veryStrongTransparentBlack: rgba(0, 0, 0, 0.15);
+@subtleTransparentBlack: rgb(0 0 0 / 0.03);
+@transparentBlack: rgb(0 0 0 / 0.05);
+@strongTransparentBlack: rgb(0 0 0 / 0.1);
+@veryStrongTransparentBlack: rgb(0 0 0 / 0.15);
 
-@subtleTransparentWhite: rgba(255, 255, 255, 0.02);
-@transparentWhite: rgba(255, 255, 255, 0.08);
-@strongTransparentWhite: rgba(255, 255, 255, 0.15);
+@subtleTransparentWhite: rgb(255 255 255 / 0.02);
+@transparentWhite: rgb(255 255 255 / 0.08);
+@strongTransparentWhite: rgb(255 255 255 / 0.15);
 
 /* -------------------
        Accents
@@ -662,11 +662,11 @@
 @subtleShadow: 0 1px 2px 0 @borderColor;
 @bottomShadow: 0 2px 1px -1px @borderColor;
 @floatingShadow:
-    0 2px 4px 0 rgba(34, 36, 38, 0.12),
-    0 2px 10px 0 rgba(34, 36, 38, 0.15);
+    0 2px 4px 0 rgb(34 36 38 / 0.12),
+    0 2px 10px 0 rgb(34 36 38 / 0.15);
 @invertedFloatingShadow:
-    0 2px 4px 0 rgba(225, 225, 225, 0.1),
-    0 2px 10px 0 rgba(225, 225, 225, 0.5);
+    0 2px 4px 0 rgb(225 225 225 / 0.1),
+    0 2px 10px 0 rgb(225 225 225 / 0.5);
 
 /*******************************
            Power-User
@@ -769,22 +769,22 @@
      Neutral Text
 -------------------- */
 
-@darkTextColor: rgba(0, 0, 0, 0.85);
-@mutedTextColor: rgba(0, 0, 0, 0.6);
-@lightTextColor: rgba(0, 0, 0, 0.4);
+@darkTextColor: rgb(0 0 0 / 0.85);
+@mutedTextColor: rgb(0 0 0 / 0.6);
+@lightTextColor: rgb(0 0 0 / 0.4);
 
-@unselectedTextColor: rgba(0, 0, 0, 0.4);
-@hoveredTextColor: rgba(0, 0, 0, 0.8);
-@pressedTextColor: rgba(0, 0, 0, 0.9);
-@selectedTextColor: rgba(0, 0, 0, 0.95);
+@unselectedTextColor: rgb(0 0 0 / 0.4);
+@hoveredTextColor: rgb(0 0 0 / 0.8);
+@pressedTextColor: rgb(0 0 0 / 0.9);
+@selectedTextColor: rgb(0 0 0 / 0.95);
 
-@invertedTextColor: rgba(255, 255, 255, 0.9);
-@invertedMutedTextColor: rgba(255, 255, 255, 0.8);
-@invertedLightTextColor: rgba(255, 255, 255, 0.7);
-@invertedUnselectedTextColor: rgba(255, 255, 255, 0.5);
-@invertedHoveredTextColor: rgba(255, 255, 255, 1);
-@invertedPressedTextColor: rgba(255, 255, 255, 1);
-@invertedSelectedTextColor: rgba(255, 255, 255, 1);
+@invertedTextColor: rgb(255 255 255 / 0.9);
+@invertedMutedTextColor: rgb(255 255 255 / 0.8);
+@invertedLightTextColor: rgb(255 255 255 / 0.7);
+@invertedUnselectedTextColor: rgb(255 255 255 / 0.5);
+@invertedHoveredTextColor: rgb(255 255 255 / 1);
+@invertedPressedTextColor: rgb(255 255 255 / 1);
+@invertedSelectedTextColor: rgb(255 255 255 / 1);
 
 /* -------------------
      Brand Colors
@@ -807,19 +807,19 @@
 
 @circularRadius: 500rem;
 
-@borderColor: rgba(34, 36, 38, 0.15);
-@strongBorderColor: rgba(34, 36, 38, 0.22);
-@internalBorderColor: rgba(34, 36, 38, 0.1);
-@selectedBorderColor: rgba(34, 36, 38, 0.35);
-@strongSelectedBorderColor: rgba(34, 36, 38, 0.5);
-@disabledBorderColor: rgba(34, 36, 38, 0.5);
+@borderColor: rgb(34 36 38 / 0.15);
+@strongBorderColor: rgb(34 36 38 / 0.22);
+@internalBorderColor: rgb(34 36 38 / 0.1);
+@selectedBorderColor: rgb(34 36 38 / 0.35);
+@strongSelectedBorderColor: rgb(34 36 38 / 0.5);
+@disabledBorderColor: rgb(34 36 38 / 0.5);
 
 @solidInternalBorderColor: #fafafa;
 @solidBorderColor: #d4d4d5;
 @solidSelectedBorderColor: #bcbdbd;
 
-@whiteBorderColor: rgba(255, 255, 255, 0.1);
-@selectedWhiteBorderColor: rgba(255, 255, 255, 0.8);
+@whiteBorderColor: rgb(255 255 255 / 0.1);
+@selectedWhiteBorderColor: rgb(255 255 255 / 0.8);
 
 @solidWhiteBorderColor: #555;
 @selectedSolidWhiteBorderColor: #999;
@@ -1058,8 +1058,8 @@
 
 @disabledOpacity: 0.45;
 @disabledPointerEvents: none;
-@disabledTextColor: rgba(40, 40, 40, 0.3);
-@invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
+@disabledTextColor: rgb(40 40 40 / 0.3);
+@invertedDisabledTextColor: rgb(225 225 225 / 0.3);
 
 /* -------------------
         Hover
@@ -1067,8 +1067,8 @@
 
 /* ---  Shadows  --- */
 @floatingShadowHover:
-    0 2px 4px 0 rgba(34, 36, 38, 0.15),
-    0 2px 10px 0 rgba(34, 36, 38, 0.25);
+    0 2px 4px 0 rgb(34 36 38 / 0.15),
+    0 2px 10px 0 rgb(34 36 38 / 0.25);
 
 /* ---  Colors  --- */
 @primaryColorHover: if(iscolor(@primaryColor), saturate(darken(@primaryColor, 5), 10, relative), @primaryColor);

package/src/themes/default/globals/variation.variables

@@ -320,7 +320,7 @@
 @variationMenuSecondary: true;
 @variationMenuPointing: true;
 @variationMenuVertical: true;
-@variationMenuTabular: true;
+@variationMenuTabbed: true;
 @variationMenuPagination: true;
 @variationMenuText: true;
 @variationMenuFluid: true;
@@ -337,6 +337,7 @@
 @variationMenuEqualWidth: true;
 @variationMenuWrapping: true;
 @variationMenuWrapped: true;
+@variationMenuTabbedLegacyTabular: false;
 @variationMenuSizes: @variationAllSizes;
 @variationMenuColors: @variationAllColors;
 
@@ -789,7 +790,7 @@
 
 /* Emojis */
 @variationEmojiColons: true;
-@variationEmojiNoColons: true;
+@variationEmojiNoColons: false;
 @variationEmojiDisabled: true;
 @variationEmojiLoading: true;
 @variationEmojiLink: true;

package/src/themes/default/modules/accordion.variables

@@ -75,7 +75,6 @@
 @styledTitlePadding: 0.75em 1em;
 @styledTitleFontWeight: @bold;
 @styledTitleColor: @unselectedTextColor;
-@styledTitleTransition: background-color @defaultDuration @defaultEasing;
 @styledTitleBorder: 1px solid @borderColor;
 @styledTitleTransition:
     background @defaultDuration @defaultEasing,

package/src/themes/default/modules/checkbox.variables

@@ -71,7 +71,7 @@
 
 /* Disabled */
 @disabledCheckboxOpacity: 0.5;
-@disabledCheckboxLabelColor: rgba(0, 0, 0, 1);
+@disabledCheckboxLabelColor: rgb(0 0 0 / 1);
 
 /* -------------------
         Types

package/src/themes/default/modules/dimmer.variables

@@ -5,7 +5,7 @@
 @dimmablePosition: relative;
 @dimmerPosition: absolute;
 
-@backgroundColor: rgba(0, 0, 0, 0.85);
+@backgroundColor: rgb(0 0 0 / 0.85);
 @lineHeight: 1;
 @perspective: 2000px;
 @padding: 1em;
@@ -22,8 +22,8 @@
 @blurredEndFilter: e("blur(5px) grayscale(0.7)");
 @blurredTransition: 800ms filter @defaultEasing;
 
-@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
-@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6);
+@blurredBackgroundColor: rgb(0 0 0 / 0.6);
+@blurredInvertedBackgroundColor: rgb(255 255 255 / 0.6);
 
 /* Hidden (Default) */
 @hiddenOpacity: 0;
@@ -44,20 +44,20 @@
 -------------------- */
 
 /* Inverted */
-@invertedBackgroundColor: rgba(255, 255, 255, 0.85);
+@invertedBackgroundColor: rgb(255 255 255 / 0.85);
 @invertedTextColor: @fullBlack;
 
 /* Simple */
 @simpleZIndex: 1;
-@simpleStartBackgroundColor: rgba(0, 0, 0, 0);
+@simpleStartBackgroundColor: rgb(0 0 0 / 0);
 @simpleEndBackgroundColor: @backgroundColor;
-@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
+@simpleInvertedStartBackgroundColor: rgb(255 255 255 / 0);
 @simpleInvertedEndBackgroundColor: @invertedBackgroundColor;
 
 /* Intensity */
-@veryLightBackgroundColor: rgba(0, 0, 0, 0.25);
-@lightBackgroundColor: rgba(0, 0, 0, 0.45);
-@mediumBackgroundColor: rgba(0, 0, 0, 0.65);
-@veryLightInvertedBackgroundColor: rgba(255, 255, 255, 0.25);
-@lightInvertedBackgroundColor: rgba(255, 255, 255, 0.45);
-@mediumInvertedBackgroundColor: rgba(255, 255, 255, 0.65);
+@veryLightBackgroundColor: rgb(0 0 0 / 0.25);
+@lightBackgroundColor: rgb(0 0 0 / 0.45);
+@mediumBackgroundColor: rgb(0 0 0 / 0.65);
+@veryLightInvertedBackgroundColor: rgb(255 255 255 / 0.25);
+@lightInvertedBackgroundColor: rgb(255 255 255 / 0.45);
+@mediumInvertedBackgroundColor: rgb(255 255 255 / 0.65);