fomantic-ui 2.10.0-beta.8 → 2.10.0-beta.81

package/src/themes/classic/elements/button.variables

@@ -11,7 +11,7 @@
 @shadowOffset: (@shadowDistance / 2);
 @shadowBoxShadow: 0 -@shadowDistance 0 0 @borderColor inset;
 @backgroundColor: #fafafa;
-@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
+@backgroundImage: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.09));
 @boxShadow:
     0 0 0 1px @borderColor inset,
     @shadowBoxShadow;
@@ -38,7 +38,7 @@
 
 /* Hovered */
 @hoverBackgroundColor: "";
-@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
+@hoverBackgroundImage: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.13));
 @hoverBoxShadow: "";
 @hoverColor: @hoveredTextColor;
 @iconHoverOpacity: 0.85;
@@ -47,8 +47,8 @@
 @focusBackgroundColor: "";
 @focusBackgroundImage: none;
 @focusBoxShadow:
-    0 0 1px rgba(81, 167, 232, 0.8) inset,
-    0 0 3px 2px rgba(81, 167, 232, 0.8);
+    0 0 1px rgb(81 167 232 / 0.8) inset,
+    0 0 3px 2px rgb(81 167 232 / 0.8);
 @focusColor: @hoveredTextColor;
 @iconFocusOpacity: 0.85;
 
@@ -56,8 +56,8 @@
 @downBackgroundColor: #f1f1f1;
 @downBackgroundImage: "";
 @downBoxShadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
+    0 0 0 1px rgb(0 0 0 / 0.1) inset,
+    0 1px 4px 0 rgb(0 0 0 / 0.1) inset !important;
 @downColor: @pressedTextColor;
 
 /* Active */
@@ -65,15 +65,15 @@
 @activeBackgroundImage: none;
 @activeColor: @selectedTextColor;
 @activeBoxShadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
+    0 0 0 1px rgb(0 0 0 / 0.1) inset,
+    0 1px 4px 0 rgb(0 0 0 / 0.1) inset !important;
 
 /* Active + Hovered */
 @activeHoverBackgroundColor: #dadada;
 @activeHoverBackgroundImage: none;
 @activeHoverBoxShadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
+    0 0 0 1px rgb(0 0 0 / 0.1) inset,
+    0 1px 4px 0 rgb(0 0 0 / 0.1) inset !important;
 @activeHoverColor: @selectedTextColor;
 
 /* Loading */
@@ -84,6 +84,6 @@
 -------------------- */
 
 /* Labeled Icon */
-@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
+@labeledIconBackgroundColor: rgb(0 0 0 / 0.05);
 @labeledIconLeftShadow: -1px 0 0 0 @labeledIconBorder inset;
 @labeledIconRightShadow: 1px 0 0 0 @labeledIconBorder inset;

package/src/themes/classic/modules/progress.variables

@@ -2,8 +2,8 @@
             Progress
 *******************************/
 
-@background: rgba(0, 0, 0, 0.05);
-@boxShadow: 0 0 4px rgba(0, 0, 0, 0.1) inset;
+@background: rgb(0 0 0 / 0.05);
+@boxShadow: 0 0 4px rgb(0 0 0 / 0.1) inset;
 @barBackground: @subtleGradient #888;
 @border: 1px solid @borderColor;
 @padding: @relative3px;

package/src/themes/classic/views/card.variables

@@ -15,8 +15,8 @@
 -------------------- */
 
 /* Additional Content */
-@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
+@extraDivider: 1px solid rgb(0 0 0 / 0.05);
 @extraBackground: #fafafa @subtleGradient;
 @extraPadding: 0.75em 1em;
-@extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+@extraBoxShadow: 0 1px 1px rgb(0 0 0 / 0.15);
 @extraColor: @lightTextColor;

package/src/themes/default/collections/form.variables

@@ -107,8 +107,8 @@
 @transparentPadding: @inputPadding;
 
 /* 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 */
@@ -129,7 +129,6 @@
 /* Inverted */
 @invertedInputBackground: @inputBackground;
 @invertedInputBorderColor: @whiteBorderColor;
-@invertedInputBoxShadow: @inputBoxShadow;
 @invertedInputColor: @inputColor;
 @invertedLabelColor: @invertedTextColor;
 @invertedInputBoxShadow: none;

package/src/themes/default/collections/menu.variables

@@ -39,7 +39,7 @@
 @subMenuDistance: 0.5em;
 @subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0;
 @subMenuFontSize: @relativeTiny;
-@subMenuTextColor: rgba(0, 0, 0, 0.5);
+@subMenuTextColor: rgb(0 0 0 / 0.5);
 
 @subMenuIndent: 0;
 @subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
@@ -131,7 +131,7 @@
 @imageLabelImageMargin: -@imageLabelVerticalPadding @imageLabelTextDistance -@imageLabelVerticalPadding -@imageLabelTextDistance;
 
 /* Dropdown in Menu */
-@dropdownMenuBoxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+@dropdownMenuBoxShadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
 
 @dropdownBackground: #fff;
 @dropdownMenuDistance: 0;
@@ -154,7 +154,7 @@
 @dropdownHoveredItemColor: @selectedTextColor;
 
 /* Dropdown Variations */
-@dropdownVerticalMenuBoxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+@dropdownVerticalMenuBoxShadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
 @secondaryDropdownMenuDistance: @relative5px;
 @pointingDropdownMenuDistance: 0.75em;
 @invertedSelectionDropdownColor: @invertedTextColor;
@@ -297,35 +297,35 @@
 @tieredSubMenuActiveBackground: none transparent;
 @tieredSubMenuActiveColor: @selectedTextColor;
 
-@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
+@tieredInvertedSubMenuBackground: rgb(0 0 0 / 0.2);
 
 /* Icon */
 @iconMenuTextAlign: center;
 @iconMenuItemColor: @black;
 @iconMenuInvertedItemColor: @white;
 
-/* Tabular */
-@tabularBorderColor: @solidBorderColor;
-@tabularBackgroundColor: transparent;
-@tabularBackground: none @tabularBackgroundColor;
-@tabularBorderWidth: 1px;
-@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
-@tabularVerticalPadding: @itemVerticalPadding;
-@tabularHorizontalPadding: @relativeHuge;
-@tabularBorderRadius: @defaultBorderRadius;
-@tabularTextColor: @itemTextColor;
+/* Tabbed */
+@tabbedBorderColor: @solidBorderColor;
+@tabbedBackgroundColor: transparent;
+@tabbedBackground: none @tabbedBackgroundColor;
+@tabbedBorderWidth: 1px;
+@tabbedOppositeBorderWidth: @tabbedBorderWidth + 1px;
+@tabbedVerticalPadding: @itemVerticalPadding;
+@tabbedHorizontalPadding: @relativeHuge;
+@tabbedBorderRadius: @defaultBorderRadius;
+@tabbedTextColor: @itemTextColor;
 
-@tabularHoveredTextColor: @hoveredTextColor;
+@tabbedHoveredTextColor: @hoveredTextColor;
 
-@tabularVerticalBackground: none @tabularBackgroundColor;
+@tabbedVerticalBackground: none @tabbedBackgroundColor;
 
-@tabularFluidOffset: 1px;
-@tabularFluidWidth: e(%("calc(100%% + %d)", @tabularFluidOffset * 2));
+@tabbedFluidOffset: 1px;
+@tabbedFluidWidth: e(%("calc(100%% + %d)", @tabbedFluidOffset * 2));
 
-@tabularActiveBackground: none @white;
-@tabularActiveColor: @selectedTextColor;
-@tabularActiveBoxShadow: none;
-@tabularActiveWeight: @bold;
+@tabbedActiveBackground: none @white;
+@tabbedActiveColor: @selectedTextColor;
+@tabbedActiveBoxShadow: none;
+@tabbedActiveWeight: @bold;
 
 /* Pagination */
 @paginationMinWidth: 3em;
@@ -408,7 +408,7 @@
 @invertedSubMenuActiveColor: @white;
 
 /* Inverted Menu Divider */
-@invertedDividerBackground: rgba(255, 255, 255, 0.08);
+@invertedDividerBackground: rgb(255 255 255 / 0.08);
 @invertedVerticalDividerBackground: @invertedDividerBackground;
 
 /* Inverted Colored */
@@ -466,8 +466,8 @@
 @invertedDropdownSelectedItemBackground: @strongTransparentWhite;
 @invertedDropdownSelectedItemColor: @invertedDropdownItemColor;
 
-/* Tabular */
-@invertedTabularBorderColor: @solidWhiteBorderColor;
-@invertedTabularBorder: @borderWidth solid @invertedTabularBorderColor;
-@invertedTabularActiveBackground: none @black;
-@invertedTabularHoveredTextColor: @invertedHoveredTextColor;
+/* Tabbed */
+@invertedTabbedBorderColor: @solidWhiteBorderColor;
+@invertedTabbedBorder: @borderWidth solid @invertedTabbedBorderColor;
+@invertedTabbedActiveBackground: none @black;
+@invertedTabbedHoveredTextColor: @invertedHoveredTextColor;

package/src/themes/default/collections/message.variables

@@ -18,7 +18,7 @@
 @borderRadius: @defaultBorderRadius;
 @borderWidth: 1px;
 @borderShadow: 0 0 0 @borderWidth @strongBorderColor inset;
-@shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0);
+@shadowShadow: 0 0 0 0 rgb(0 0 0 / 0);
 @boxShadow: @borderShadow, @shadowShadow;
 
 @transition:

package/src/themes/default/collections/table.variables

@@ -69,7 +69,7 @@
 @responsiveHeaderDisplay: block;
 @responsiveFooterDisplay: block;
 @responsiveRowVerticalPadding: 1em;
-@responsiveRowBoxShadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
+@responsiveRowBoxShadow: 0 -1px 0 0 rgb(0 0 0 / 0.1) inset;
 @responsiveCellVerticalPadding: 0.25em;
 @responsiveCellHorizontalPadding: 0.75em;
 @responsiveCellBoxShadow: none;
@@ -167,8 +167,8 @@
 @attachedBottomBoxShadow: @attachedBoxShadow;
 
 /* Striped */
-@stripedBackground: rgba(0, 0, 50, 0.02);
-@invertedStripedBackground: rgba(255, 255, 255, 0.05);
+@stripedBackground: rgb(0 0 50 / 0.02);
+@invertedStripedBackground: rgb(255 255 255 / 0.05);
 
 /* Selectable */
 @selectableBackground: @transparentBlack;
@@ -236,7 +236,7 @@
 @basicTableHeaderBackground: transparent;
 @basicTableCellBackground: transparent;
 @basicTableHeaderDivider: none;
-@basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1);
+@basicTableCellBorder: 1px solid rgb(0 0 0 / 0.1);
 @basicTableCellPadding: "";
 @basicTableStripedBackground: @transparentBlack;
 

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

@@ -23,7 +23,7 @@
 @tapColor: transparent;
 @fontFamily: @pageFont;
 @fontWeight: @bold;
-@textColor: rgba(0, 0, 0, 0.6);
+@textColor: rgb(0 0 0 / 0.6);
 @textShadow: none;
 @invertedTextShadow: @textShadow;
 @borderRadius: @defaultBorderRadius;
@@ -52,7 +52,7 @@
 @rightIconMargin: 0 -(@iconDistance / 2) 0 @iconDistance;
 
 /* Loader */
-@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+@invertedLoaderFillColor: rgb(0 0 0 / 0.15);
 
 @transition:
     opacity @defaultDuration @defaultEasing,
@@ -156,7 +156,6 @@
 @iconButtonOpacity: 0.9;
 
 /* Labeled */
-@labeledLabelFontSize: @medium;
 @labeledLabelAlign: center;
 @labeledLabelPadding: "";
 @labeledLabelFontSize: @relativeMedium;
@@ -167,7 +166,7 @@
 
 /* Labeled Icon */
 @labeledIconWidth: 1em + (@verticalPadding * 2);
-@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
+@labeledIconBackgroundColor: rgb(0 0 0 / 0.05);
 @labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
 @labeledIconBorder: transparent;
 @labeledIconColor: "";
@@ -211,7 +210,7 @@
 @basicDownBackground: #f8f8f8;
 @basicDownTextColor: @pressedTextColor;
 @basicDownBoxShadow:
-    0 0 0 @basicBorderSize rgba(0, 0, 0, 0.15) inset,
+    0 0 0 @basicBorderSize rgb(0 0 0 / 0.15) inset,
     0 1px 4px 0 @borderColor inset;
 
 /* Basic Active */
@@ -225,11 +224,11 @@
 @basicInvertedDownBackground: @transparentWhite;
 @basicInvertedActiveBackground: @transparentWhite;
 
-@basicInvertedBoxShadow: 0 0 0 @invertedBorderSize rgba(255, 255, 255, 0.5) inset;
-@basicInvertedHoverBoxShadow: 0 0 0 @invertedBorderSize rgba(255, 255, 255, 1) inset;
-@basicInvertedFocusBoxShadow: 0 0 0 @invertedBorderSize rgba(255, 255, 255, 1) inset;
-@basicInvertedDownBoxShadow: 0 0 0 @invertedBorderSize rgba(255, 255, 255, 0.9) inset;
-@basicInvertedActiveBoxShadow: 0 0 0 @invertedBorderSize rgba(255, 255, 255, 0.7) inset;
+@basicInvertedBoxShadow: 0 0 0 @invertedBorderSize rgb(255 255 255 / 0.5) inset;
+@basicInvertedHoverBoxShadow: 0 0 0 @invertedBorderSize rgb(255 255 255 / 1) inset;
+@basicInvertedFocusBoxShadow: 0 0 0 @invertedBorderSize rgb(255 255 255 / 1) inset;
+@basicInvertedDownBoxShadow: 0 0 0 @invertedBorderSize rgb(255 255 255 / 0.9) inset;
+@basicInvertedActiveBoxShadow: 0 0 0 @invertedBorderSize rgb(255 255 255 / 0.7) inset;
 
 @basicInvertedColor: @darkWhite;
 @basicInvertedHoverColor: @darkWhiteHover;

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

@@ -43,7 +43,7 @@
 
 /* Inverted */
 @invertedTextColor: @white;
-@invertedHighlightColor: rgba(255, 255, 255, 0.15);
+@invertedHighlightColor: rgb(255 255 255 / 0.15);
 @invertedShadowColor: @borderColor;
 
 /* Section */

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

@@ -2082,12 +2082,12 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 
 @circularSize: 2em;
 @circularPadding: 0.5em 0;
-@circularShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+@circularShadow: 0 0 0 0.1em rgb(0 0 0 / 0.1) inset;
 
 @borderedSize: 2em;
 @borderedVerticalPadding: ((@borderedSize - @height) / 2);
 @borderedHorizontalPadding: 0;
-@borderedShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+@borderedShadow: 0 0 0 0.1em rgb(0 0 0 / 0.1) inset;
 
 @coloredBoxShadow: 0 0 0 0.1em currentColor inset;
 

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

@@ -11,7 +11,7 @@
 
 @imageHorizontalMargin: 0.25rem;
 @imageVerticalMargin: 0.5rem;
-@imageBorder: 1px solid rgba(0, 0, 0, 0.1);
+@imageBorder: 1px solid rgb(0 0 0 / 0.1);
 
 /* -------------------
        Types

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

@@ -73,7 +73,7 @@
 @placeholderFocusColor: @inputPlaceholderFocusColor;
 
 /* Down */
-@downBorderColor: rgba(0, 0, 0, 0.3);
+@downBorderColor: rgb(0 0 0 / 0.3);
 @downBackground: #fafafa;
 @downColor: @textColor;
 @downBoxShadow: none;
@@ -85,7 +85,7 @@
 @focusBoxShadow: none;
 
 /* Loader */
-@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+@invertedLoaderFillColor: rgb(0 0 0 / 0.15);
 
 /* file */
 @fileButtonMargin: 1em;

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

@@ -123,8 +123,8 @@
 @tagCircleColor: @white;
 @tagCircleSize: 0.5em;
 @tagHorizontalPadding: 1.5em;
-@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
-@basicTagCircleBoxShadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
+@tagCircleBoxShadow: 0 -1px 1px 0 rgb(0 0 0 / 0.3);
+@basicTagCircleBoxShadow: 0 -1px 3px 0 rgb(0 0 0 / 0.8);
 @tagTriangleRightOffset: 100%;
 @tagTriangleTopOffset: 50%;
 @tagTriangleSize: 1.56em;
@@ -135,7 +135,7 @@
 @ribbonTriangleSize: 1.2em;
 @basicRibbonTriangleSize: e(%("calc(%d - %d)", @ribbonTriangleSize, @basicBorderWidth));
 @basicRibbonTriangleSizeOffset: e(%("calc(1rem + %d - %d)", @ribbonTriangleSize, @basicBorderWidth));
-@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+@ribbonShadowColor: rgb(0 0 0 / 0.15);
 
 @ribbonMargin: 1rem;
 @ribbonOffset: e(%("calc(%d - %d)", -@ribbonMargin, @ribbonTriangleSize));
@@ -163,7 +163,7 @@
 @invertedBoxShadowSize: 2px;
 @invertedBorderSize: 1px;
 
-@basicInvertedBorderColor: rgba(255, 255, 255, 0.5);
+@basicInvertedBorderColor: rgb(255 255 255 / 0.5);
 
 /* Colors */
 @redTextColor: @white;

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

@@ -57,7 +57,7 @@
 @itemHeaderColor: @textColor;
 
 /* Description */
-@itemDescriptionColor: rgba(0, 0, 0, 0.7);
+@itemDescriptionColor: rgb(0 0 0 / 0.7);
 
 /* Link */
 @itemLinkColor: @linkColor;

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

@@ -37,16 +37,16 @@
 // prettier-ignore
 @placeholderLoadingGradient: linear-gradient(
     to right,
-    rgba(0, 0, 0, 0.08) 0,
-    rgba(0, 0, 0, 0.15) 15%,
-    rgba(0, 0, 0, 0.08) 30%
+    rgb(0 0 0 / 0.08) 0,
+    rgb(0 0 0 / 0.15) 15%,
+    rgb(0 0 0 / 0.08) 30%
 );
 // prettier-ignore
 @placeholderInvertedLoadingGradient: linear-gradient(
     to right,
-    rgba(255, 255, 255, 0.08) 0,
-    rgba(255, 255, 255, 0.14) 15%,
-    rgba(255, 255, 255, 0.08) 30%
+    rgb(255 255 255 / 0.08) 0,
+    rgb(255 255 255 / 0.14) 15%,
+    rgb(255 255 255 / 0.08) 30%
 );
 
 /* Variations */

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;