fomantic-ui 2.9.0-beta.31 → 2.9.0-beta.312

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

@@ -7,6 +7,7 @@
 ---------------*/
 
 /* Solid Icons */
+@importIcons: true;
 @fontName: 'icons';
 @src:
   url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),

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

@@ -60,8 +60,11 @@
 
 @labeledMargin: 2.5em;
 @labeledIconInputMargin: 3.25em;
+@labeledAndIconMargin: 4em;
 @labeledIconMargin: 1.25em;
 
+@labeledDropdownZIndex: 10;
+
 /*-------------------
         States
 --------------------*/
@@ -85,6 +88,18 @@
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
+/* file */
+@fileButtonMargin: 1em;
+@fileButtonTextColor: @mutedTextColor;
+@fileButtonTextColorHover: @hoveredTextColor;
+@fileButtonBackground: #e0e1e2;
+@fileButtonBackgroundHover: #cacbcd;
+@fileButtonFontWeight: @bold;
+
+@fileButtonInvertedBackground: #e0e1e2;
+@fileButtonInvertedBackgroundHover: @white;
+@fileButtonInvertedTextColor: @mutedTextColor;
+
 /*-------------------
       Variations
 --------------------*/

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

@@ -153,3 +153,11 @@
   )
 ;
 @tertiaryInvertedColor: @invertedMutedTextColor;
+
+/*-------------------
+       Scrolling
+--------------------*/
+@scrollingMobileMaxHeight: 15em;
+@scrollingTabletMaxHeight: 18em;
+@scrollingComputerMaxHeight: 24em;
+@scrollingWidescreenMaxHeight: 30em;

package/src/themes/default/elements/step.overrides

@@ -9,8 +9,8 @@
     url(data:application/font-woff;charset=utf-8;base64,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) format('woff')
   ;
 }
-.ui.steps .step.completed > .icon:before,
-.ui.ordered.steps .step.completed:before {
+.ui.steps .step.completed > .icon::before,
+.ui.ordered.steps .step.completed::before {
   font-family: 'Step';
   content: '\e800'; /* '' */
-}
+}

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

@@ -3,18 +3,113 @@
 *******************************/
 
 @import "variation.variables";
+@supportIE: true;
 
 /*-------------------
        Fonts
 --------------------*/
 
 @fontName          : 'Lato';
-
-@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@fontFileNameLatin : 'LatoLatin';
+@fontFileNameSupplement: 'Lato';
+
+// based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
+@fallbackFonts     : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+@headerFont        : @fontName, @fallbackFonts;
+@pageFont          : @fontName, @fallbackFonts;
+
+@fontDisplay            : swap;
+@textRendering          : optimizeLegibility;
+@unicodeRangeLatin      : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+@unicodeRangeSupplement : U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+
+@importFonts            : true;
+@fonts: {
+        @regularLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @italicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldItalicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @regularSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @italicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldItalicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+};
 
 @googleFontName    : @fontName;
-@importGoogleFonts : true;
+@importGoogleFonts : false;
 @googleFontSizes   : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
 @googleSubset      : 'latin';
 @googleFontDisplay : 'swap';
@@ -174,6 +269,12 @@
 @thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15);
 @thumbInvertedHoverBackground: rgba(255, 255, 255, 0.35);
 
+/* IE needs hex values */
+@trackBackgroundHex: #e6e6e6;
+@thumbBackgroundHex: #bfbfbf;
+@trackInvertedBackgroundHex: #323232;
+@thumbInvertedBackgroundHex: #656565;
+
 /*-------------------
   Highlighted Text
 --------------------*/
@@ -1297,10 +1398,10 @@
 @brownTertiaryColorHover     : desaturate(@brownHover, 20%);
 @brownTertiaryColorFocus     : desaturate(@brownFocus, 20%);
 @brownTertiaryColorActive    : saturate(@brownActive, 20%);
-@greyTertiaryColor           : saturate(@grey, 20%);
-@greyTertiaryColorHover      : desaturate(@greyHover, 20%);
-@greyTertiaryColorFocus      : desaturate(@greyFocus, 20%);
-@greyTertiaryColorActive     : saturate(@greyActive, 20%);
+@greyTertiaryColor           : darken(@grey, 5%);
+@greyTertiaryColorHover      : lighten(@greyHover, 5%);
+@greyTertiaryColorFocus      : lighten(@greyFocus, 8%);
+@greyTertiaryColorActive     : darken(@greyActive, 5%);
 @blackTertiaryColor          : lighten(@black, 20%);
 @blackTertiaryColorHover     : lighten(@blackHover, 40%);
 @blackTertiaryColorFocus     : lighten(@blackFocus, 40%);

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

@@ -4,6 +4,9 @@
 
 /* General */
 @variationAllSizes: mini, tiny, small, large, big, huge, massive;
+@variationAllColors: primary, secondary, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black;
+@variationAllStates: error, info, success, warning;
+@variationAllConsequences: positive, negative, error, info, success, warning;
 
 /*******************************
            Elements
@@ -12,10 +15,13 @@
 /* Button */
 @variationButtonDisabled: true;
 @variationButtonAnimated: true;
+@variationButtonAnimatedFade: true;
 @variationButtonInverted: true;
 @variationButtonSocial: true;
 @variationButtonFloated: true;
 @variationButtonCompact: true;
+@variationButtonIcon: true;
+@variationButtonLoading: true;
 @variationButtonBasic: true;
 @variationButtonTertiary: true;
 @variationButtonLabeled: true;
@@ -24,18 +30,31 @@
 @variationButtonOr: true;
 @variationButtonAttached: true;
 @variationButtonFluid: true;
+@variationButtonEqualWidth: true;
+@variationButtonVertical: true;
 @variationButtonCircular: true;
 @variationButtonGroups: true;
 @variationButtonStackable: true;
+@variationButtonWrapping: true;
+@variationButtonWrapped: true;
+@variationButtonSpaced: true;
 @variationButtonSizes: @variationAllSizes;
+@variationButtonColors: @variationAllColors;
 
 /* Container */
 @variationContainerGrid: true;
 @variationContainerRelaxed: true;
+@variationContainerVeryRelaxed: true;
 @variationContainerText: true;
+@variationContainerWide: true;
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;
+@variationContainerScrolling: true;
+@variationContainerScrollingShort: true;
+@variationContainerScrollingVeryShort: true;
+@variationContainerScrollingLong: true;
+@variationContainerScrollingVeryLong: true;
 
 /* Divider */
 @variationDividerInverted: true;
@@ -47,6 +66,7 @@
 @variationDividerClearing: true;
 @variationDividerSection: true;
 @variationDividerSizes: @variationAllSizes;
+@variationDividerColors: @variationAllColors;
 
 /* Header */
 @variationHeaderDisabled: true;
@@ -62,8 +82,15 @@
 @variationHeaderAttached: true;
 @variationHeaderTags: h1, h2, h3, h4, h5, h6;
 @variationHeaderSizes: @variationAllSizes;
+@variationHeaderColors: @variationAllColors;
 
 /* Icon */
+@variationIconDeprecated: true;
+@variationIconSolid: true;
+@variationIconAliases: true;
+@variationIconOutline: true;
+@variationIconBrand: true;
+@variationIconThin: true; /* Font Awesome Pro only */
 @variationIconDisabled: true;
 @variationIconInverted: true;
 @variationIconLoading: true;
@@ -77,6 +104,7 @@
 @variationIconCorner: true;
 @variationIconGroups: true;
 @variationIconSizes: @variationAllSizes;
+@variationIconColors: @variationAllColors;
 
 /* Image */
 @variationImageDisabled: true;
@@ -96,7 +124,7 @@
 /* Input */
 @variationInputDisabled: true;
 @variationInputInverted: true;
-@variationInputStates: true;
+@variationInputStates: @variationAllStates;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -104,6 +132,8 @@
 @variationInputLabeled: true;
 @variationInputAction: true;
 @variationInputFluid: true;
+@variationInputFile: true;
+@variationInputColors: @variationAllColors;
 @variationInputSizes: @variationAllSizes;
 
 /* Label */
@@ -120,6 +150,7 @@
 @variationLabelAttached: true;
 @variationLabelFluid: true;
 @variationLabelSizes: @variationAllSizes;
+@variationLabelColors: @variationAllColors;
 
 /* List */
 @variationListInverted: true;
@@ -139,6 +170,9 @@
 @variationListDivided: true;
 @variationListCelled: true;
 @variationListRelaxed: true;
+@variationListVeryRelaxed: true;
+@variationListHeader: true;
+@variationListDescription: true;
 @variationListSizes: @variationAllSizes;
 
 /* Loader */
@@ -148,6 +182,7 @@
 @variationLoaderInline: true;
 @variationLoaderElastic: true;
 @variationLoaderSizes: @variationAllSizes;
+@variationLoaderColors: @variationAllColors;
 
 /* Placeholder */
 @variationPlaceholderInverted: true;
@@ -181,6 +216,7 @@
 @variationSegmentPiled: true;
 @variationSegmentStacked: true;
 @variationSegmentPadded: true;
+@variationSegmentVeryPadded: true;
 @variationSegmentCircular: true;
 @variationSegmentCompact: true;
 @variationSegmentRaised: true;
@@ -194,7 +230,13 @@
 @variationSegmentTertiary: true;
 @variationSegmentAttached: true;
 @variationSegmentFitted: true;
+@variationSegmentScrolling: true;
+@variationSegmentScrollingShort: true;
+@variationSegmentScrollingVeryShort: true;
+@variationSegmentScrollingLong: true;
+@variationSegmentScrollingVeryLong: true;
 @variationSegmentSizes: @variationAllSizes;
+@variationSegmentColors: @variationAllColors;
 
 /* Step */
 @variationStepInverted: true;
@@ -204,13 +246,15 @@
 @variationStepOrdered: true;
 @variationStepFluid: true;
 @variationStepAttached: true;
+@variationStepEqualWidth: true;
 @variationStepSizes: @variationAllSizes;
 
 /* Text */
 @variationTextInverted: true;
 @variationTextDisabled: true;
-@variationTextStates: true;
+@variationTextStates: @variationAllStates;
 @variationTextSizes: @variationAllSizes;
+@variationTextColors: @variationAllColors;
 
 
 /*******************************
@@ -226,10 +270,12 @@
 @variationFormDisabled: true;
 @variationFormTransparent: true;
 @variationFormLoading: true;
-@variationFormStates: true;
+@variationFormStates: @variationAllStates;
 @variationFormRequired: true;
 @variationFormInline: true;
 @variationFormGrouped: true;
+@variationFormEqualWidth: true;
+@variationFormWide: true;
 @variationFormSizes: @variationAllSizes;
 
 /* Grid */
@@ -238,9 +284,11 @@
 @variationGridCelled: true;
 @variationGridCentered: true;
 @variationGridRelaxed: true;
+@variationGridVeryRelaxed: true;
 @variationGridPadded: true;
 @variationGridFloated: true;
 @variationGridDivided: true;
+@variationGridVertical: true;
 @variationGridAligned: true;
 @variationGridStretched: true;
 @variationGridJustified: true;
@@ -248,6 +296,10 @@
 @variationGridDoubling: true;
 @variationGridStackable: true;
 @variationGridCompact: true;
+@variationGridVeryCompact: true;
+@variationGridWide: true;
+@variationGridEqualWidth: true;
+@variationGridColors: @variationAllColors;
 
 /* Menu */
 @variationMenuInverted: true;
@@ -261,12 +313,16 @@
 @variationMenuLabeled: true;
 @variationMenuStackable: true;
 @variationMenuFloated: true;
+@variationMenuCentered: true;
 @variationMenuFitted: true;
 @variationMenuBorderless: true;
 @variationMenuCompact: true;
 @variationMenuFixed: true;
 @variationMenuAttached: true;
+@variationMenuIcon: true;
+@variationMenuEqualWidth: true;
 @variationMenuSizes: @variationAllSizes;
+@variationMenuColors: @variationAllColors;
 
 /* Message */
 @variationMessageInverted: true;
@@ -274,10 +330,11 @@
 @variationMessageAttached: true;
 @variationMessageIcon: true;
 @variationMessageFloating: true;
-@variationMessageConsequences: true;
+@variationMessageConsequences: @variationAllConsequences;
 @variationMessageCentered: true;
 @variationMessageRightAligned: true;
 @variationMessageSizes: @variationAllSizes;
+@variationMessageColors: @variationAllColors;
 
 /* Table */
 @variationTableInverted: true;
@@ -298,11 +355,32 @@
 @variationTableSortable: true;
 @variationTableCollapsing: true;
 @variationTableBasic: true;
+@variationTableVeryBasic: true;
 @variationTableCelled: true;
 @variationTablePadded: true;
+@variationTableVeryPadded: true;
 @variationTableCompact: true;
+@variationTableVeryCompact: true;
 @variationTableMarked: true;
+@variationTableEqualWidth: true;
+@variationTableWide: true;
+@variationTableScrolling: true;
+@variationTableScrollingShort: true;
+@variationTableScrollingVeryShort: true;
+@variationTableScrollingLong: true;
+@variationTableScrollingVeryLong: true;
+@variationTableStuck: true;
+@variationTableStuckHead: true;
+@variationTableStuckFoot: true;
+@variationTableStuckFirst: true;
+@variationTableStuckLast: true;
+@variationTableOverflowing: true;
+@variationTableOverflowingShort: true;
+@variationTableOverflowingVeryShort: true;
+@variationTableOverflowingLong: true;
+@variationTableOverflowingVeryLong: true;
 @variationTableSizes: @variationAllSizes;
+@variationTableColors: @variationAllColors;
 
 
 /*******************************
@@ -325,6 +403,7 @@
 
 /* Card */
 @variationCardInverted: true;
+@variationCardBasic: true;
 @variationCardDisabled: true;
 @variationCardLoading: true;
 @variationCardHorizontal: true;
@@ -334,22 +413,55 @@
 @variationCardLink: true;
 @variationCardDoubling: true;
 @variationCardStackable: true;
+@variationCardFloated: true;
+@variationCardAligned: true;
+@variationCardImage: true;
+@variationCardHeader: true;
+@variationCardDescription: true;
+@variationCardMeta: true;
+@variationCardExtra: true;
+@variationCardButton: true;
+@variationCardStar: true;
+@variationCardLike: true;
+@variationCardEqualWidth: true;
 @variationCardSizes: @variationAllSizes;
+@variationCardColors: @variationAllColors;
 
 /* Comment */
 @variationCommentInverted: true;
 @variationCommentThreaded: true;
 @variationCommentMinimal: true;
+@variationCommentAvatar: true;
+@variationCommentAuthor: true;
+@variationCommentMeta: true;
+@variationCommentActions: true;
+@variationCommentReply: true;
 @variationCommentSizes: @variationAllSizes;
+@variationCommentColors: @variationAllColors;
 
 /* Feed */
 @variationFeedInverted: true;
+@variationFeedMeta: true;
+@variationFeedSummary: true;
+@variationFeedUser: true;
+@variationFeedExtra: true;
+@variationFeedDate: true;
+@variationFeedLike: true;
 @variationFeedSizes: @variationAllSizes;
 
 /* Item */
 @variationItemInverted: true;
+@variationItemImage: true;
+@variationItemHeader: true;
+@variationItemDescription: true;
+@variationItemMeta: true;
+@variationItemExtra: true;
+@variationItemFavorite: true;
+@variationItemLike: true;
+@variationItemFloated: true;
 @variationItemAligned: true;
 @variationItemRelaxed: true;
+@variationItemVeryRelaxed: true;
 @variationItemDivided: true;
 @variationItemLink: true;
 @variationItemUnstackable: true;
@@ -360,7 +472,9 @@
 @variationStatisticStackable: true;
 @variationStatisticFloated: true;
 @variationStatisticHorizontal: true;
+@variationStatisticEqualWidth: true;
 @variationStatisticSizes: @variationAllSizes;
+@variationStatisticColors: @variationAllColors;
 
 
 /*******************************
@@ -370,14 +484,19 @@
 /* Accordion */
 @variationAccordionInverted: true;
 @variationAccordionStyled: true;
+@variationAccordionBasicStyled: true;
 @variationAccordionFluid: true;
+@variationAccordionCompact: true;
+@variationAccordionVeryCompact: true;
+@variationAccordionRightDropdown: true;
+@variationAccordionTree: true;
 
 /* Calendar */
 @variationCalendarInverted: true;
 @variationCalendarDisabled: true;
+@variationCalendarMultiMonth: true;
 
 /* Checkbox */
-@variationCheckboxBox: false;   //.box (instead of label) is an ancient fragment of sui v1 and not even documented in v2.x anymore
 @variationCheckboxDisabled: true;
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
@@ -388,6 +507,7 @@
 @variationCheckboxFitted: true;
 @variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
+@variationCheckboxColors: @variationAllColors;
 
 /* Dimmer */
 @variationDimmerInverted: true;
@@ -414,7 +534,7 @@
 @variationDropdownMultiple: true;
 @variationDropdownInline: true;
 @variationDropdownLoading: true;
-@variationDropdownStates: true;
+@variationDropdownStates: @variationAllStates;
 @variationDropdownClear: true;
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
@@ -423,6 +543,7 @@
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
 @variationDropdownPointing: true;
+@variationDropdownColumnar: true;
 @variationDropdownScrollhint: true;
 @variationDropdownSizes: @variationAllSizes;
 
@@ -438,6 +559,9 @@
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
+@variationModalCentered: true;
+@variationModalActions: true;
+@variationModalLeftActions: true;
 @variationModalSizes: @variationAllSizes;
 
 /* Nag */
@@ -447,6 +571,7 @@
 @variationNagFixed: true;
 @variationNagGroups: true;
 @variationNagSizes: @variationAllSizes;
+@variationNagColors: @variationAllColors;
 
 /* Popup */
 @variationPopupInverted: true;
@@ -464,6 +589,7 @@
 @variationPopupFlowing: true;
 @variationPopupFixed: true;
 @variationPopupSizes: @variationAllSizes;
+@variationPopupColors: @variationAllColors;
 
 /* Progress */
 @variationProgressInverted: true;
@@ -482,11 +608,13 @@
 @variationProgressSpeeds: true;
 @variationProgressRightAligned: true;
 @variationProgressSizes: @variationAllSizes;
+@variationProgressColors: @variationAllColors;
 
 /* Rating */
 @variationRatingDisabled: true;
 @variationRatingPartial: true;
 @variationRatingSizes: @variationAllSizes;
+@variationRatingColors: @variationAllColors;
 
 /* Search */
 @variationSearchDisabled: true;
@@ -496,7 +624,9 @@
 @variationSearchAligned: true;
 @variationSearchFluid: true;
 @variationSearchShort: true;
+@variationSearchVeryShort: true;
 @variationSearchLong: true;
+@variationSearchVeryLong: true;
 @variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 
@@ -507,7 +637,9 @@
 
 /* Sidebar */
 @variationSidebarThin: true;
+@variationSidebarVeryThin: true;
 @variationSidebarWide: true;
+@variationSidebarVeryWide: true;
 @variationSidebarTop: true;
 @variationSidebarBottom: true;
 @variationSidebarLeft: true;
@@ -528,6 +660,7 @@
 @variationSliderVertical: true;
 @variationSliderBasic: true;
 @variationSliderSizes: small, large, big;
+@variationSliderColors: @variationAllColors;
 
 /* Tab */
 @variationTabLoading: true;
@@ -557,6 +690,7 @@
 @variationToastAttached: true;
 @variationToastCompact: true;
 @variationToastCentered: true;
+@variationToastColors: @variationAllColors;
 
 /* Transition */
 @variationTransitionDisabled: true;
@@ -581,3 +715,6 @@
 /* Emojis */
 @variationEmojiColons: true;
 @variationEmojiNoColons: true;
+@variationEmojiDisabled: true;
+@variationEmojiLoading: true;
+@variationEmojiLink: true;