Updated Sucroa flavor

The Sucroa flavor has been updated to the latest version. Alerts and the .nano progress bar have been removed, the .toast has been added using the color palette that the flavor uses, the alert colors have been moved to .card color variants, .drawer has been added using the colors of <nav>, generic shadows remain unchanged, based on the fact that the flavor still uses shadows, the .drawer component does not have a shadow by the way (I think it causes some problems, but this requires further testing). If anyone wants to update the flavor, please refer to this commit!

dist/mini-nord.css

@@ -1739,7 +1739,7 @@ mark.inline-block {
   left: 50%;
   transform: translate(-50%, -50%);
   color: #ECEFF4;
-  border-radius: 2rem;
+  border-radius: 32px;
   padding: 12px 24px;
   z-index: 1111;
 }

dist/mini-sucroa.css

@@ -1156,6 +1156,76 @@ footer.sticky {
   bottom: 0;
 }
 
+.drawer-toggle:before {
+  position: relative;
+  top: 9px;
+  font-family: sans-serif;
+  font-size: 40px;
+  line-height: 0.125;
+  content: '\2261';
+}
+
+.drawer {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  overflow-y: auto;
+  background: #e8deff;
+  border: 1px solid #a9a2ba;
+  border-radius: 2px;
+  margin: 0;
+  z-index: 1110;
+}
+
+.drawer:not(.right) {
+  left: -320px;
+  transition: left 0.3s;
+}
+
+.drawer.right {
+  right: -320px;
+  transition: right 0.3s;
+}
+
+.drawer .close {
+  position: absolute;
+  top: 12px;
+  right: 4px;
+  z-index: 1111;
+  padding: 0;
+}
+
+@media screen and (max-width: 320px) {
+  .drawer {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .drawer:not(.persistent) {
+    position: static;
+    height: 100%;
+    z-index: 1100;
+  }
+  .drawer:not(.persistent) .close {
+    display: none;
+  }
+  .drawer-toggle:not(.persistent) {
+    display: none;
+  }
+}
+
+[type="checkbox"]:checked + .drawer:not(.right) {
+  left: 0;
+}
+
+[type="checkbox"]:checked + .drawer.right {
+  right: 0;
+}
+
 /*
 	Definitions for the responsive table component.
 */
@@ -1325,17 +1395,30 @@ table.striped tr:nth-of-type(2n) > td {
   width: auto;
 }
 
-.card.inverse {
+.card.warning {
-  background: #211423;
+  background: #fe9992;
+  border: 1px solid #fedb64;
+}
+
+.card.warning > .section {
+  border-bottom: 1px solid #fedb64;
+}
+
+.card.warning > .section:last-child {
+  border-bottom: 0;
+}
+
+.card.error {
+  background: #ac354e;
   color: #fffddc;
-  border: 1px solid #190f1a;
+  border: 1px solid #86293d;
 }
 
-.card.inverse > .section {
+.card.error > .section {
-  border-bottom: 1px solid #493e4b;
+  border-bottom: 1px solid #86293d;
 }
 
-.card.inverse > .section:last-child {
+.card.error > .section:last-child {
   border-bottom: 0;
 }
 
@@ -1558,6 +1641,18 @@ mark.inline-block {
   display: inline-block;
 }
 
+.toast {
+  position: fixed;
+  background: #424242;
+  bottom: 24px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fffddc;
+  border-radius: 32px;
+  padding: 12px 24px;
+  z-index: 1111;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;
@@ -1650,6 +1745,16 @@ mark.inline-block {
   padding: 5px;
 }
 
+.toast.small {
+  border-radius: 24px;
+  padding: 8px 16px;
+}
+
+.toast.large {
+  border-radius: 48px;
+  padding: 18px 36px;
+}
+
 /*
 	Definitions for progress elements and spinners.
 */
@@ -1756,32 +1861,6 @@ progress.tertiary::-moz-progress-bar {
   background: #2b866d;
 }
 
-progress.nano {
-  height: 2px;
-  width: calc(100% - 0);
-  margin: 0 0;
-  margin: 0 auto;
-  border-radius: 0;
-}
-
-progress.nano::-webkit-progress-value {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-progress.nano::-moz-progress-bar {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-progress.nano[value="1000"]::-webkit-progress-value {
-  border-radius: 0;
-}
-
-progress.nano[value="1000"]::-moz-progress-bar {
-  border-radius: 0;
-}
-
 .spinner-donut.secondary {
   border: 4px solid #f2cad3;
   border-left: 4px solid #d2405f;

docs/customization/navigation.html

@@ -300,6 +300,10 @@
 										<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
 										<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
 									</tr>
+									<tr>
+										<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
+										<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
+									</tr>
 									<tr>
 										<td data-label="Variable">$drawer-width</td><td data-label="Type">Width</td>
 										<td data-label="Description">Width for the drawer component</td><td data-label="Sample value">320px</td>

docs/v2/DEVLOG.md

@@ -1146,7 +1146,6 @@
 - Tested `.drawer` on the `modules.html` page, it seems to work pretty well.
 - Documented `.drawer` component, updated descriptions wherever possible, the customization documentation will be added in later.
 - *TODO* list for tomorrow (before release):
-	- Update flavors to use the new `.drawer` component, rebuild.
 	- Update all flavors to work with new components etc.
 	- Update all flavor demos.
 	- Look into updating the templates.
@@ -1165,3 +1164,5 @@
 - Updated menus in all `customization` pages.
 - Updated `mini-nord` to use the new components.
 - Added screencasts to `core` and `grid` modules, so that people get a better starter.
+- Added `$drawer-border-radius` for constistency.
+- Updated `mini-sucroa` to use the new components.

src/flavors/mini-dark.scss

@@ -279,6 +279,7 @@ $nav-sublink-bar-color:		#616161;									// Subcategory bar color
 $drawer-name:							'drawer';									// Class name for the drawer component
 $drawer-back-color:				$nav-back-color;					// Background color of the drawer component
 $drawer-border-style:			$nav-border-style;				// Border style of the drawer component
+$drawer-border-radius:		0;												// Border radius of the drawer component
 $drawer-width:						320px;										// Width of the drawer component
 $drawer-padding:					0;												// Padding of the drawer component
 $drawer-box-shadow:				none;											// Box shadow for the drawer component

src/flavors/mini-default.scss

@@ -279,6 +279,7 @@ $nav-sublink-bar-color:		#bdbdbd;									// Subcategory bar color
 $drawer-name:							'drawer';									// Class name for the drawer component
 $drawer-back-color:				$nav-back-color;					// Background color of the drawer component
 $drawer-border-style:			$nav-border-style;				// Border style of the drawer component
+$drawer-border-radius:		0;												// Border radius of the drawer component
 $drawer-width:						320px;										// Width of the drawer component
 $drawer-padding:					0;												// Padding of the drawer component
 $drawer-box-shadow:				none;											// Box shadow for the drawer component

src/flavors/mini-nord.scss

@@ -289,6 +289,7 @@ $nav-sublink-bar-color:			#81A1C1;								// Subcategory bar color
 $drawer-name:							'drawer';									// Class name for the drawer component
 $drawer-back-color:				$nav-back-color;					// Background color of the drawer component
 $drawer-border-style:			$nav-border-style;				// Border style of the drawer component
+$drawer-border-radius:		0;												// Border radius of the drawer component
 $drawer-width:						320px;										// Width of the drawer component
 $drawer-padding:					0;												// Padding of the drawer component
 $drawer-box-shadow:				none;											// Box shadow for the drawer component
@@ -442,7 +443,7 @@ $toast-bottom:							24px;										// Bottom position for toasts
 $toast-back-color:					#424242;								// Background color for toasts
 $toast-fore-color:					#ECEFF4;								// Text color for toasts
 $toast-border-style:				0;											// Border style for toasts
-$toast-border-radius:				2rem;										// Border radius for toasts
+$toast-border-radius:				32px;										// Border radius for toasts
 $toast-padding:							12px 24px;							// Padding for toasts
 $toast-box-shadow:					none;										// Box shadow for toasts
 $toast-style1-name:					'small';								// Class name for toast style 1

src/flavors/mini-sucroa.scss

@@ -282,6 +282,24 @@ $nav-sublink-prefix:			'sublink';								// Prefix for the subcategory links in
 $nav-sublink-depth:				2;												// Amount of subcategory classes to add
 $nav-sublink-padding-left:14px;											// Left padding to add to subcategories
 $nav-include-sublink-bar:	false;										// Should a left border bar be added to subcategories (`true`/`false`) [2]
+$drawer-name:							'drawer';									// Class name for the drawer component
+$drawer-back-color:				$nav-back-color;					// Background color of the drawer component
+$drawer-border-style:			$nav-border-style;				// Border style of the drawer component
+$drawer-border-radius:		2px;											// Border radius of the drawer component
+$drawer-width:						320px;										// Width of the drawer component
+$drawer-padding:					0;												// Padding of the drawer component
+$drawer-box-shadow:				none;											// Box shadow for the drawer component
+$drawer-mobile-breakpoint: 768px;										// Mobile breakpoint for the drawer component
+$drawer-normal-height:		calc(100vh - 54px);				// Height of the drawer component when shown as normal menu
+$drawer-right-name:				'right';									// Class name for the right variant of the drawer component
+$drawer-persistent-name:	'persistent';							// Class name for the persisten variant of the drawer component
+$drawer-toggle-name:			'drawer-toggle';					// Class name for the drawer component's toggle
+$drawer-toggle-font-size:	40px;											// Font size for the drawer component's toggle icon
+$drawer-toggle-line-height:0.125;										// Line height for the drawer component's toggle icon
+$drawer-toggle-top:				9px;											// Top position for the drawer component's toggle icon
+$drawer-close-name:				'close';									// Class name of the close element for the drawer component
+$drawer-close-top:				12px;											// Top position of the drawer component's close icon
+$drawer-close-right:			4px;											// Right position of the drawer component's close icon
 $footer-back-color:				#211423;									// Background color for <footer>
 $footer-fore-color:				#fffddc;									// Text color for <footer>
 $footer-border-style:			0;												// Border stye for <footer>
@@ -346,12 +364,18 @@ $card-size2-name:						'small';								// Class name for small cards
 $card-size2-width:					240px;									// Width for small cards
 $card-size3-name:						'fluid';								// Class name for fluid cards
 $card-size3-width:					100%;										// Width for fluid cards
-$card-style1-name:					'inverse';							// Class name for card style 1
+$card-style1-name:					'warning';							// Class name for card style 1
-$card-style1-back-color:		$fore-color;						// Background color for card style 1
+$card-style1-back-color:		#fe9992;								// Background color for card style 1
-$card-style1-fore-color:		#fffddc;								// Text color for card style 1
+$card-style1-fore-color:		$fore-color;						// Text color for card style 1
-$card-style1-border-style:	1px solid #190f1a;			// Border style for card style 1
+$card-style1-border-style:	1px solid #fedb64;			// Border style for card style 1
 $card-style1-border-radius:	2px;										// Border radius for card style 1
-$card-style1-section-border-style:1px solid #493e4b;// Border style for card style 1 sections
+$card-style1-section-border-style:1px solid #fedb64;// Border style for card style 1 sections
+$card-style2-name:						'error';							// Class name for card style 2
+$card-style2-back-color:			#ac354e;							// Background color for card style 2
+$card-style2-fore-color:			#fffddc;							// Text color for card style 2
+$card-style2-border-style:		1px solid #86293d;		// Border style for card style 2
+$card-style2-border-radius:		2px;									// Border radius for card style 2
+$card-style2-section-border-style:1px solid #86293d;// Border style for card style 2 sections
 $card-section-style1-name:					'light';				// Class name for card section style 1
 $card-section-style1-back-color:		#f6e5e6;				// Background color for card section style 1
 $card-section-style1-fore-color:		$fore-color;		// Text color for card section style 1
@@ -407,7 +431,22 @@ $mark-style2-border-radius:	2px;										// Border radius for <mark> style 2
 $mark-style2-padding:				5px;										// Padding for <mark> style 2
 $mark-style2-font-size:			100%;										// Font size for <mark> style 2
 $mark-style2-line-height:		1.35;										// Line height for <mark> style 2
-$include-toast:							false;									// Should the toast component be included? (`true`/`false`)
+$toast-name:								'toast';								// Class name for toast component
+$toast-bottom:							24px;									// Bottom position for toasts
+$toast-back-color:					#424242;								// Background color for toasts
+$toast-fore-color:					#fffddc;								// Text color for toasts
+$toast-border-style:				0;											// Border style for toasts
+$toast-border-radius:				32px;										// Border radius for toasts
+$toast-padding:							12px 24px;							// Padding for toasts
+$toast-box-shadow:					none;										// Box shadow for toasts
+$toast-style1-name:					'small';								// Class name for toast style 1
+$toast-style1-border-style:	0;											// Border style for toast style 1
+$toast-style1-border-radius:24px;										// Border radius for toast style 1
+$toast-style1-padding:			8px 16px;								// Padding for toast style 1
+$toast-style2-name:					'large';								// Class name for toast style 2
+$toast-style2-border-style:	0;											// Border style for toast style 2
+$toast-style2-border-radius:48px;										// Border radius for toast style 2
+$toast-style2-padding:			18px 36px;							// Padding for toast style 2
 $include-tooltip:						true;										// Should tooltips be included? (`true`/`false`) [1]
 $tooltip-name:							'tooltip';							// Class name for the tooltip component
 $tooltip-back-color:				$fore-color;						// Background color for tooltips
@@ -439,12 +478,6 @@ $progress-variant1-name:				'secondary';				// Class name for <progress> variant
 $progress-variant1-fore-color:	#d2405f;						// Progress bar color for <progress> variant 1
 $progress-variant2-name:				'tertiary';					// Class name for <progress> variant 2
 $progress-variant2-fore-color:	#2b866d;						// Progress bar color for <progress> variant 2
-$progress-style1-name:					'nano';							// Class name for <progress> style 1
-$progress-style1-height:				2px;								// Height for <progress> style 1
-$progress-style1-top-bottom-margin:		0;						// Top and bottom margin for <progress> style 1
-$progress-style1-left-right-margin:		0;						// Left and right margin for <progress> style 1
-$progress-style1-border-style:				0;						// Border style for <progress> style 1
-$progress-style1-border-radius:				0;						// Border radius for <progress> style 1
 $spinner-donut-name:		'spinner-donut';						// Class name for donut spinner
 $spinner-donut-border-thickness:		4px;						// Border thickness for donut spinner
 $spinner-donut-back-color:			#d6daef;						// Background color for donut spinner
@@ -546,6 +579,8 @@ $include-center-block-name:		false;								// Should center block be included? (
 @include make-card-alt-size ($card-size3-name, $card-size3-width);
 @include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
 	$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
+@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
+	$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
 @include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
 	$card-section-style1-fore-color);
 @include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
@@ -562,6 +597,10 @@ $include-center-block-name:		false;								// Should center block be included? (
 	$mark-style1-border-radius, $mark-style1-padding);
 @include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
 	$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
+@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
+	$toast-style1-border-radius, $toast-style1-padding);
+@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
+	$toast-style2-border-radius, $toast-style2-padding);
 @import '../mini/progress';
 /*
 	Custom elements for progress elements and spinners.
@@ -569,9 +608,6 @@ $include-center-block-name:		false;								// Should center block be included? (
 @include make-progress-inline ($progress-inline-name, $progress-inline-width);
 @include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
 @include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
-@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
-	$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
-	$progress-style1-border-style, $progress-style1-border-radius);
 @include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
 	$spinner-donut-variant1-fore-color);
 @include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,

src/mini/_navigation.scss

@@ -239,7 +239,12 @@ footer {
 		height: 100vh;
 		overflow-y: auto;
 		background: $drawer-back-color;
-		border: $drawer-border-style;
+		@if $drawer-border-style != 0 {
+			border: $drawer-border-style;
+		}
+		@if $drawer-border-radius != 0 {
+			border-radius: $drawer-border-radius;
+		}
 		margin: 0;
 		@if $drawer-padding != 0 {
 			padding: $drawer-padding;