@sysvale/cuida 3.0.0-beta.95 → 3.0.0-beta.96

package/dist/@sysvale/tokens.scss

@@ -47,7 +47,7 @@ $n-400: #8794A1;
 $midNeutralsShades: $n-50, $n-100, $n-200, $n-300, $n-400;
 $midNeutralsTokens: '$n-50', '$n-100', '$n-200', '$n-300', '$n-400';
 
-$midNeutralsMetaData: 'Mid Neutrals', 'Mid', $midNeutralsShades, $midNeutralsTokens;
+$midNeutralsMetaData: 'Mid Neutrals', 'Gray', $midNeutralsShades, $midNeutralsTokens;
 
 $n-500: #647382;
 $n-600: #52616F;
@@ -60,133 +60,152 @@ $darkNeutralsTokens: '$n-500', '$n-600', '$n-700', '$n-800', '$n-900';
 
 $darkNeutralsMetaData: 'Dark Neutrals', 'Dark', $darkNeutralsShades, $darkNeutralsTokens;
 
-$gp-50: #F3FCF8;
-$gp-100: #DEF7EB;
-$gp-200: #ABEDD9;
-$gp-300: #6DDFBC;
-$gp-400: #2AC092;
-$gp-500: #239F78;
-$gp-600: #1B795B;
-$gp-700: #126349;
+$gp-50: #f3fcf8;
+$gp-100: #e2f8ef;
+$gp-200: #abedd3;
+$gp-300: #6ddfb1;
+$gp-400: #2db981;
+$gp-500: #239f6d;
+$gp-600: #1c7d56;
+$gp-700: #136746;
 
 $piccoloGreenShades: $gp-50, $gp-100, $gp-200, $gp-300, $gp-400, $gp-500, $gp-600, $gp-700;
 $piccoloGreenTokens: '$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400', '$gp-500', '$gp-600', '$gp-700';
 
 $greenMetaData: 'Piccolo Green', 'Green', $piccoloGreenShades, $piccoloGreenTokens;
 
-$ts-50: #F7FCFF;
-$ts-100: #E2F4FE;
+$ta-50: #eefcfa;
+$ta-100: #dcf9f6;
+$ta-200: #a2f1e5;
+$ta-300: #51e6d0;
+$ta-400: #20c5ad;
+$ta-500: #18aa94;
+$ta-600: #138675;
+$ta-700: #0f6b5d;
+
+$aquamanTealShades: $ta-50, $ta-100, $ta-200, $ta-300, $ta-400, $ta-500, $ta-600, $ta-700;
+$aquamanTealTokens: '$ta-50', '$ta-100', '$ta-200', '$ta-300', '$ta-400', '$ta-500', '$ta-600', '$ta-700';
+
+$tealMetaData: 'Aquaman Teal', 'Teal', $aquamanTealShades, $aquamanTealTokens;
+
+$ts-50: #f5fbff;
+$ts-100: #e6f6fe;
 $ts-200: #C2EDFF;
 $ts-300: #7BD0F4;
 $ts-400: #42AAD7;
 $ts-500: #1F86B2;
 $ts-600: #18698B;
-$ts-700: #13526D;
+$ts-700: #155875;
 
 $sulivanTurquoiseShades: $ts-50, $ts-100, $ts-200, $ts-300, $ts-400, $ts-500, $ts-600, $ts-700;
 $sulivanTurquoiseTokens: '$ts-50', '$ts-100', '$ts-200', '$ts-300', '$ts-400', '$ts-500', '$ts-600', '$ts-700';
 
 $turquoiseMetaData: 'Sulivan Turquoise', 'Turquoise', $sulivanTurquoiseShades, $sulivanTurquoiseTokens;
 
-$bn-50: #F8FAFE;
-$bn-100: #ECF1FE;
-$bn-200: #B6D1F7;
-$bn-300: #83ADE7;
-$bn-400: #4B88DD;
-$bn-500: #2C70CD;
-$bn-600: #1A55A8;
-$bn-700: #174382;
+$bn-50: #f6f9fe;
+$bn-100: #e6effe;
+$bn-200: #b4cdf8;
+$bn-300: #729ee9;
+$bn-400: #467bd8;
+$bn-500: #2f64c1;
+$bn-600: #2051a7;
+$bn-700: #19438a;
 
 $nocturneBlueShades: $bn-50, $bn-100, $bn-200, $bn-300, $bn-400, $bn-500, $bn-600, $bn-700;
 $nocturneBlueTokens: '$bn-50', '$bn-100', '$bn-200', '$bn-300', '$bn-400', '$bn-500', '$bn-600', '$bn-700';
 
 $blueMetaData: 'Nocturne Blue', 'Blue', $nocturneBlueShades, $nocturneBlueTokens;
 
-$in-50: #F5F6FF;
-$in-100: #E5EAFF;
+$in-50: #f5f6ff;
+$in-100: #ebefff;
 $in-200: #CED6FD;
-$in-300: #AAB7F8;
-$in-400: #7080D2;
-$in-500: #4D5DAC;
-$in-600: #384584;
-$in-700: #353D64;
+$in-300: #9bacf8;
+$in-400: #6a7cd7;
+$in-500: #4b5caf;
+$in-600: #374486;
+$in-700: #2f396f;
 
 $nightwingIndigoShades: $in-50, $in-100, $in-200, $in-300, $in-400, $in-500, $in-600, $in-700;
 $nightwingIndigoTokens: '$in-50', '$in-100', '$in-200', '$in-300', '$in-400', '$in-500', '$in-600', '$in-700';
 
 $indigoMetaData: 'Nightwing Indigo', 'Indigo', $nightwingIndigoShades, $nightwingIndigoTokens;
 
-$vr-50: #FBF7FF;
-$vr-100: #F5EBFF;
+$vr-50: #faf5ff;
+$vr-100: #f7f0ff;
 $vr-200: #E6D2F9;
 $vr-300: #CEABED;
-$vr-400: #A975D7;
+$vr-400: #a772d5;
 $vr-500: #8955B9;
 $vr-600: #6B3A98;
-$vr-700: #4F2673;
+$vr-700: #5c3082;
 
 $ravenVioletShades: $vr-50, $vr-100, $vr-200, $vr-300, $vr-400, $vr-500, $vr-600, $vr-700;
 $ravenVioletTokens: '$vr-50', '$vr-100', '$vr-200', '$vr-300', '$vr-400', '$vr-500', '$vr-600', '$vr-700';
 
 $violetMetaData: 'Raven Violet', 'Violet', $ravenVioletShades, $ravenVioletTokens;
 
-$pp-50: #FFF7FC;
-$pp-100: #FFEBF7;
+$pp-50: #fff5fb;
+$pp-100: #ffebf7;
 $pp-200: #F9C8E2;
 $pp-300: #EF8FC0;
 $pp-400: #DA629F;
 $pp-500: #BE377C;
 $pp-600: #A12663;
-$pp-700: #701A48;
+$pp-700: #88255a;
 
 $peppaPinkShades: $pp-50, $pp-100, $pp-200, $pp-300, $pp-400, $pp-500, $pp-600, $pp-700;
 $peppaPinkTokens: '$pp-50', '$pp-100', '$pp-200', '$pp-300', '$pp-400', '$pp-500', '$pp-600', '$pp-700';
 
 $pinkMetaData: 'Peppa Pink', 'Pink', $peppaPinkShades, $peppaPinkTokens;
 
-$rc-50: #FEF5F6;
-$rc-100: #FFE6E9;
+$rc-50: #fef6f7;
+$rc-100: #ffebed;
 $rc-200: #FABDC5;
 $rc-300: #F98B98;
 $rc-400: #F3596C;
 $rc-500: #E03E52;
 $rc-600: #C92C3F;
-$rc-700: #A42333;
+$rc-700: #b22435;
 
 $carmenRedShades: $rc-50, $rc-100, $rc-200, $rc-300, $rc-400, $rc-500, $rc-600, $rc-700;
 $carmenRedTokens: '$rc-50', '$rc-100', '$rc-200', '$rc-300', '$rc-400', '$rc-500', '$rc-600', '$rc-700';
 
 $redMetaData: 'Carmen Red', 'Red', $carmenRedShades, $carmenRedTokens;
 
-$og-50: #FEF9F8;
-$og-100: #FFEBE5;
+$og-50: #fef7f6;
+$og-100: #ffefeb;
 $og-200: #FFD6CC;
 $og-300: #FDAF9B;
 $og-400: #FF8567;
 $og-500: #F06442;
 $og-600: #D64B29;
-$og-700: #AB3C21;
+$og-700: #bc4224;
 
 $gokuOrangeShades: $og-50, $og-100, $og-200, $og-300, $og-400, $og-500, $og-600, $og-700;
 $gokuOrangeTokens: '$og-50', '$og-100', '$og-200', '$og-300', '$og-400', '$og-500', '$og-600', '$og-700';
 
 $orangeMetaData: 'Goku Orange', 'Orange', $gokuOrangeShades, $gokuOrangeTokens;
 
-$al-50: #fefbf5;
-$al-100: #fff1dc;
-$al-200: #FFE2B8;
-$al-300: #FDCD87;
-$al-400: #FFB952;
-$al-500: #EEA22F;
-$al-600: #D38817;
-$al-700: #A56A12;
+$al-50: #fefbf6;
+$al-100: #fdf3e2;
+$al-200: #ffe5b8;
+$al-300: #fdd286;
+$al-400: #f6bd5a;
+$al-500: #eda831;
+$al-600: #d89013;
+$al-700: #c08011;
 
 $lisaAmberShades: $al-50, $al-100, $al-200, $al-300, $al-400, $al-500, $al-600, $al-700;
 $lisaAmberTokens: '$al-50', '$al-100', '$al-200', '$al-300', '$al-400', '$al-500', '$al-600', '$al-700';
 
 $amberMetaData: 'Lisa Amber', 'Amber', $lisaAmberShades, $lisaAmberTokens;
 
-$palete: [$greenMetaData],
+$palete:
+	[$lightNeutralMetaData],
+	[$midNeutralsMetaData],
+	[$darkNeutralsMetaData],
+	[$greenMetaData],
+	[$tealMetaData],
 	[$turquoiseMetaData],
 	[$blueMetaData],
 	[$indigoMetaData],
@@ -194,29 +213,59 @@ $palete: [$greenMetaData],
 	[$pinkMetaData],
 	[$redMetaData],
 	[$orangeMetaData],
-	[$amberMetaData],
-	[$lightNeutralMetaData],
-	[$midNeutralsMetaData],
-	[$darkNeutralsMetaData];
+	[$amberMetaData];
 
-$baseColors: (
-	'turquoise': $ts-400,
-	'green': $gp-400,
-	'blue': $bn-400,
-	'indigo': $in-400,
-	'violet': $vr-400,
-	'pink': $pp-400,
-	'red': $rc-400,
-	'orange': $og-400,
-	'amber': $al-400,
-	'dark': $n-600,
+$shades50: (
+	'green': $gp-50,
+	'teal': $ta-50,
+	'turquoise': $ts-50,
+	'blue': $bn-50,
+	'indigo': $in-50,
+	'violet': $vr-50,
+	'pink': $pp-50,
+	'red': $rc-50,
+	'orange': $og-50,
+	'amber': $al-50,
+	'dark': $n-30,
+	'gray': $n-0,
+);
+
+$shades100: (
+	'green': $gp-100,
+	'teal': $ta-100,
+	'turquoise': $ts-100,
+	'blue': $bn-100,
+	'indigo': $in-100,
+	'violet': $vr-100,
+	'pink': $pp-100,
+	'red': $rc-100,
+	'orange': $og-100,
+	'amber': $al-100,
+	'dark': $n-500,
 	'gray': $n-30,
 	'white': $n-0,
 );
 
-$disabledColors: (
-	'turquoise': $ts-300,
+$shades200: (
+	'green': $gp-200,
+	'teal': $ta-200,
+	'turquoise': $ts-200,
+	'blue': $bn-200,
+	'indigo': $in-200,
+	'violet': $vr-200,
+	'pink': $pp-200,
+	'red': $rc-200,
+	'orange': $og-200,
+	'amber': $al-200,
+	'dark': $n-200,
+	'gray': $n-20,
+	'white': $n-0,
+);
+
+$shades300: (
 	'green': $gp-300,
+	'teal': $ta-300,
+	'turquoise': $ts-300,
 	'blue': $bn-300,
 	'indigo': $in-300,
 	'violet': $vr-300,
@@ -229,24 +278,26 @@ $disabledColors: (
 	'white': $n-0,
 );
 
-$mutedColors: (
-	'turquoise': $ts-200,
-	'green': $gp-200,
-	'blue': $bn-200,
-	'indigo': $in-200,
-	'violet': $vr-200,
-	'pink': $pp-200,
-	'red': $rc-200,
-	'orange': $og-200,
-	'amber': $al-200,
-	'dark': $n-200,
-	'gray': $n-20,
+$shades400: (
+	'green': $gp-400,
+	'teal': $ta-400,
+	'turquoise': $ts-400,
+	'blue': $bn-400,
+	'indigo': $in-400,
+	'violet': $vr-400,
+	'pink': $pp-400,
+	'red': $rc-400,
+	'orange': $og-400,
+	'amber': $al-400,
+	'dark': $n-600,
+	'gray': $n-30,
 	'white': $n-0,
 );
 
-$hoverColors: (
-	'turquoise': $ts-500,
+$shades500: (
 	'green': $gp-500,
+	'teal': $ta-500,
+	'turquoise': $ts-500,
 	'blue': $bn-500,
 	'indigo': $in-500,
 	'violet': $vr-500,
@@ -259,18 +310,20 @@ $hoverColors: (
 	'white': $n-0,
 );
 
-$backgroundColors: (
-	'green': $gp-50,
-	'turquoise': $ts-50,
-	'blue': $bn-50,
-	'indigo': $in-50,
-	'violet': $vr-50,
-	'pink': $pp-50,
-	'red': $rc-50,
-	'orange': $og-50,
-	'amber': $al-50,
-	'dark': $n-30,
-	'gray': $n-0,
+$shades600: (
+	'green': $gp-600,
+	'teal': $ta-600,
+	'turquoise': $ts-600,
+	'blue': $bn-600,
+	'indigo': $in-600,
+	'violet': $vr-600,
+	'pink': $pp-600,
+	'red': $rc-600,
+	'orange': $og-600,
+	'amber': $al-600,
+	'dark': $n-800,
+	'gray': $n-200,
+	'white': $n-0,
 );
 
 $allColors: (
@@ -283,6 +336,15 @@ $allColors: (
 	'gp-600': $gp-600,
 	'gp-700': $gp-700,
 
+	'ta-50': $ta-50,
+	'ta-100': $ta-100,
+	'ta-200': $ta-200,
+	'ta-300': $ta-300,
+	'ta-400': $ta-400,
+	'ta-500': $ta-500,
+	'ta-600': $ta-600,
+	'ta-700': $ta-700,
+
 	'ts-50': $ts-50,
 	'ts-100': $ts-100,
 	'ts-200': $ts-200,
@@ -373,14 +435,16 @@ $allColors: (
 );
 
 @mixin variantResolver {
-	@each $color-name, $base-color in $baseColors {
-		$disabled: map-get($disabledColors , $color-name);
-		$muted: map-get($mutedColors , $color-name);
-		$background: map-get($backgroundColors , $color-name);
-		$hover: map-get($hoverColors , $color-name);
+	@each $color-name, $base-color in $shades400 {
+		$shade-50: map-get($shades50 , $color-name);
+		$shade-100: map-get($shades100 , $color-name);
+		$shade-200: map-get($shades200 , $color-name);
+		$shade-300: map-get($shades300 , $color-name);
+		$shade-500: map-get($shades500 , $color-name);
+		$shade-600: map-get($shades600 , $color-name);
 
 		&--#{$color-name} {
-			@content($color-name, $base-color, $disabled, $muted, $background, $hover);
+			@content($color-name, $shade-50, $shade-100, $shade-200, $shade-300, $base-color, $shade-500, $shade-600);
 		}
 	}
 }
@@ -405,6 +469,15 @@ $allColors: (
 	gp600: $gp-600;
 	gp700: $gp-700;
 
+	ta50: $ta-50;
+	ta100: $ta-100;
+	ta200: $ta-200;
+	ta300: $ta-300;
+	ta400: $ta-400;
+	ta500: $ta-500;
+	ta600: $ta-600;
+	ta700: $ta-700;
+
 	ts50: $ts-50;
 	ts100: $ts-100;
 	ts200: $ts-200;