@sysvale/cuida 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/@sysvale/tokens.scss

@@ -27,285 +27,245 @@ $bg-gradient: 158.71deg, #FFFFFF -36.57%, #F1F5FB 156.92%;
 
 $appbar-color: #576169;
 
-$n-0: #ffffff;
+$n-0: #FFFFFF;
 $n-10: #FAFCFE;
 $n-20: #F4F8FB;
 $n-30: #E7EDF3;
 $n-40: #DFE5EC;
-$n-50: #d6dce3;
-$n-100: #c3ccd5;
-$n-200: #acb8c3;
-$n-300: #99a6b2;
-$n-400: #8794a1;
+
+$lightNeutralsShades: $n-0, $n-10, $n-20, $n-30, $n-40;
+$lightNeutralsTokens: '$n-0', '$n-10', '$n-20', '$n-30', '$n-40';
+
+$lightNeutralMetaData: 'Light Neutrals', 'Light', $lightNeutralsShades, $lightNeutralsTokens;
+
+$n-50: #D6DCE3;
+$n-100: #C3CCD5;
+$n-200: #ACB8C3;
+$n-300: #99A6B2;
+$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', 'Gray', $midNeutralsShades, $midNeutralsTokens;
+
 $n-500: #647382;
-$n-600: #52616f;
-$n-700: #3b4754;
-$n-800: #28333e;
-$n-900: #1d262f;
+$n-600: #52616F;
+$n-700: #3B4754;
+$n-800: #28333E;
+$n-900: #1D262F;
+
+$darkNeutralsShades: $n-500, $n-600, $n-700, $n-800, $n-900;
+$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;
-
-$ts-50: #F7FCFF;
-$ts-100: #E2F4FE;
+$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;
+
+$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;
-
-$bn-50: #F8FAFE;
-$bn-100: #ecf1fe;
-$bn-200: #B6D1F7;
-$bn-300: #83ADE7;
-$bn-400: #4B88DD;
-$bn-500: #2C70CD;
-$bn-600: #1A55A8;
-$bn-700: #174382;
-
-$in-50: #F5F6FF;
-$in-100: #E5EAFF;
+$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: #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: #ebefff;
 $in-200: #CED6FD;
-$in-300: #AAB7F8;
-$in-400: #7080D2;
-$in-500: #4D5DAC;
-$in-600: #384584;
-$in-700: #353D64;
-
-$vr-50: #FBF7FF;
-$vr-100: #F5EBFF;
+$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: #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;
 
-$rc-50: #fef5f6;
-$rc-100: #ffe6e9;
+$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: #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';
 
-$og-50: #FEF9F8;
-$og-100: #FFEBE5;
+$redMetaData: 'Carmen Red', 'Red', $carmenRedShades, $carmenRedTokens;
+
+$og-50: #fef7f6;
+$og-100: #ffefeb;
 $og-200: #FFD6CC;
 $og-300: #FDAF9B;
 $og-400: #FF8567;
 $og-500: #F06442;
 $og-600: #D64B29;
-$og-700: #AB3C21;
-
-$al-50: #fefbf5;
-$al-100: #fff1dc;
-$al-200: #FFE2B8;
-$al-300: #FDCD87;
-$al-400: #FFB952;
-$al-500: #EEA22F;
-$al-600: #D38817;
-$al-700: #A56A12;
-
-$g: (
-);
-
-$g: map-merge(("50": $gp-50,
-			"100": $gp-100,
-			"200": $gp-200,
-			"300": $gp-300,
-			"400": $gp-400,
-			"500": $gp-500,
-			"600": $gp-600,
-			"700": $gp-700,
-		),
-		$g);
-
-$t: (
+$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: #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:
+	[$lightNeutralMetaData],
+	[$midNeutralsMetaData],
+	[$darkNeutralsMetaData],
+	[$greenMetaData],
+	[$tealMetaData],
+	[$turquoiseMetaData],
+	[$blueMetaData],
+	[$indigoMetaData],
+	[$violetMetaData],
+	[$pinkMetaData],
+	[$redMetaData],
+	[$orangeMetaData],
+	[$amberMetaData];
+
+$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,
 );
 
-$t: map-merge(("50": $ts-50,
-			"100": $ts-100,
-			"200": $ts-200,
-			"300": $ts-300,
-			"400": $ts-400,
-			"500": $ts-500,
-			"600": $ts-600,
-			"700": $ts-700,
-		),
-		$t);
-
-$b: (
-);
-
-$b: map-merge(("50": $bn-50,
-			"100": $bn-100,
-			"200": $bn-200,
-			"300": $bn-300,
-			"400": $bn-400,
-			"500": $bn-500,
-			"600": $bn-600,
-			"700": $bn-700,
-		),
-		$b);
-
-$i: (
-);
-
-$i: map-merge(("50": $in-50,
-			"100": $in-100,
-			"200": $in-200,
-			"300": $in-300,
-			"400": $in-400,
-			"500": $in-500,
-			"600": $in-600,
-			"700": $in-700,
-		),
-		$i);
-
-$v: (
-);
-
-$v: map-merge(("50": $vr-50,
-			"100": $vr-100,
-			"200": $vr-200,
-			"300": $vr-300,
-			"400": $vr-400,
-			"500": $vr-500,
-			"600": $vr-600,
-			"700": $vr-700,
-		),
-		$v);
-
-$p: (
-);
-
-$p: map-merge(("50": $pp-50,
-			"100": $pp-100,
-			"200": $pp-200,
-			"300": $pp-300,
-			"400": $pp-400,
-			"500": $pp-500,
-			"600": $pp-600,
-			"700": $pp-700,
-		),
-		$p);
-
-$r: (
-);
-
-$r: map-merge(("50": $rc-50,
-			"100": $rc-100,
-			"200": $rc-200,
-			"300": $rc-300,
-			"400": $rc-400,
-			"500": $rc-500,
-			"600": $rc-600,
-			"700": $rc-700,
-		),
-		$r);
-
-$o: (
-);
-
-$o: map-merge(("50": $og-50,
-			"100": $og-100,
-			"200": $og-200,
-			"300": $og-300,
-			"400": $og-400,
-			"500": $og-500,
-			"600": $og-600,
-			"700": $og-700,
-		),
-		$o);
-
-$a: (
-);
-
-$a: map-merge(("50": $al-50,
-			"100": $al-100,
-			"200": $al-200,
-			"300": $al-300,
-			"400": $al-400,
-			"500": $al-500,
-			"600": $al-600,
-			"700": $al-700,
-		),
-		$a);
-
-$n: (
+$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,
 );
 
-$n: map-merge(("0": $n-0,
-			"10": $n-10,
-			"20": $n-20,
-			"30": $n-30,
-			"40": $n-40,
-			"50": $n-50,
-			"100": $n-100,
-			"200": $n-200,
-			"300": $n-300,
-			"400": $n-400,
-			"500": $n-500,
-			"600": $n-600,
-			"700": $n-700,
-			"800": $n-800,
-			"900": $n-900,
-		),
-		$n);
-
-$palete: ();
-
-$palete: map-merge(
-	(
-		'PiccoloGreen': $g,
-		'SulivanTurquoise': $t,
-		'NocturneBlue': $b,
-		'NightWingIndigo': $i,
-		'RavenViolet': $v,
-		'PeppaPink': $p,
-		'CarmenRed': $r,
-		'GokuOrange': $o,
-		'LisaAmber': $a,
-		'Neutrals': $n,
-	),
-$palete);
-
-$baseColors: (
-	'teal': $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,
-	'gray': $n-30,
+$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,
 );
 
-$disabledColors: (
-	'teal': $ts-300,
+$shades300: (
 	'green': $gp-300,
+	'teal': $ta-300,
+	'turquoise': $ts-300,
 	'blue': $bn-300,
 	'indigo': $in-300,
 	'violet': $vr-300,
@@ -318,24 +278,26 @@ $disabledColors: (
 	'white': $n-0,
 );
 
-$mutedColors: (
-	'teal': $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: (
-	'teal': $ts-500,
+$shades500: (
 	'green': $gp-500,
+	'teal': $ta-500,
+	'turquoise': $ts-500,
 	'blue': $bn-500,
 	'indigo': $in-500,
 	'violet': $vr-500,
@@ -348,17 +310,265 @@ $hoverColors: (
 	'white': $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: (
+	'gp-50': $gp-50,
+	'gp-100': $gp-100,
+	'gp-200': $gp-200,
+	'gp-300': $gp-300,
+	'gp-400': $gp-400,
+	'gp-500': $gp-500,
+	'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,
+	'ts-300': $ts-300,
+	'ts-400': $ts-400,
+	'ts-500': $ts-500,
+	'ts-600': $ts-600,
+	'ts-700': $ts-700,
+
+	'bn-50': $bn-50,
+	'bn-100': $bn-100,
+	'bn-200': $bn-200,
+	'bn-300': $bn-300,
+	'bn-400': $bn-400,
+	'bn-500': $bn-500,
+	'bn-600': $bn-600,
+	'bn-700': $bn-700,
+
+	'in-50': $in-50,
+	'in-100': $in-100,
+	'in-200': $in-200,
+	'in-300': $in-300,
+	'in-400': $in-400,
+	'in-500': $in-500,
+	'in-600': $in-600,
+	'in-700': $in-700,
+
+	'vr-50': $vr-50,
+	'vr-100': $vr-100,
+	'vr-200': $vr-200,
+	'vr-300': $vr-300,
+	'vr-400': $vr-400,
+	'vr-500': $vr-500,
+	'vr-600': $vr-600,
+	'vr-700': $vr-700,
+
+	'pp-50': $pp-50,
+	'pp-100': $pp-100,
+	'pp-200': $pp-200,
+	'pp-300': $pp-300,
+	'pp-400': $pp-400,
+	'pp-500': $pp-500,
+	'pp-600': $pp-600,
+	'pp-700': $pp-700,
+
+	'rc-50': $rc-50,
+	'rc-100': $rc-100,
+	'rc-200': $rc-200,
+	'rc-300': $rc-300,
+	'rc-400': $rc-400,
+	'rc-500': $rc-500,
+	'rc-600': $rc-600,
+	'rc-700': $rc-700,
+
+	'og-50': $og-50,
+	'og-100': $og-100,
+	'og-200': $og-200,
+	'og-300': $og-300,
+	'og-400': $og-400,
+	'og-500': $og-500,
+	'og-600': $og-600,
+	'og-700': $og-700,
+
+	'al-50': $al-50,
+	'al-100': $al-100,
+	'al-200': $al-200,
+	'al-300': $al-300,
+	'al-400': $al-400,
+	'al-500': $al-500,
+	'al-600': $al-600,
+	'al-700': $al-700,
+
+	"n-0": $n-0,
+	"n-10": $n-10,
+	"n-20": $n-20,
+	"n-30": $n-30,
+	"n-40": $n-40,
+	"n-50": $n-50,
+	"n-100": $n-100,
+	"n-200": $n-200,
+	"n-300": $n-300,
+	"n-400": $n-400,
+	"n-500": $n-500,
+	"n-600": $n-600,
+	"n-700": $n-700,
+	"n-800": $n-800,
+	"n-900": $n-900,
+);
+
 @mixin variantResolver {
-	@each $color-name, $base-color in $baseColors {
-		$disabled: map-get($disabledColors , $color-name);
-		$muted: map-get($mutedColors , $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, $hover);
+			@content($color-name, $shade-50, $shade-100, $shade-200, $shade-300, $base-color, $shade-500, $shade-600);
+		}
+	}
+}
+
+@mixin paleteResolver {
+	@each $token-name, $token in $allColors {
+		$color: $token;
+
+		&--#{$token-name} {
+			@content($color);
 		}
 	}
 }
+
+:export {
+	gp50: $gp-50;
+	gp100: $gp-100;
+	gp200: $gp-200;
+	gp300: $gp-300;
+	gp400: $gp-400;
+	gp500: $gp-500;
+	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;
+	ts300: $ts-300;
+	ts400: $ts-400;
+	ts500: $ts-500;
+	ts600: $ts-600;
+	ts700: $ts-700;
+
+	bn50: $bn-50;
+	bn100: $bn-100;
+	bn200: $bn-200;
+	bn300: $bn-300;
+	bn400: $bn-400;
+	bn500: $bn-500;
+	bn600: $bn-600;
+	bn700: $bn-700;
+
+	in50: $in-50;
+	in100: $in-100;
+	in200: $in-200;
+	in300: $in-300;
+	in400: $in-400;
+	in500: $in-500;
+	in600: $in-600;
+	in700: $in-700;
+
+	vr50: $vr-50;
+	vr100: $vr-100;
+	vr200: $vr-200;
+	vr300: $vr-300;
+	vr400: $vr-400;
+	vr500: $vr-500;
+	vr600: $vr-600;
+	vr700: $vr-700;
+
+	pp50: $pp-50;
+	pp100: $pp-100;
+	pp200: $pp-200;
+	pp300: $pp-300;
+	pp400: $pp-400;
+	pp500: $pp-500;
+	pp600: $pp-600;
+	pp700: $pp-700;
+
+	rc50: $rc-50;
+	rc100: $rc-100;
+	rc200: $rc-200;
+	rc300: $rc-300;
+	rc400: $rc-400;
+	rc500: $rc-500;
+	rc600: $rc-600;
+	rc700: $rc-700;
+
+	og50: $og-50;
+	og100: $og-100;
+	og200: $og-200;
+	og300: $og-300;
+	og400: $og-400;
+	og500: $og-500;
+	og600: $og-600;
+	og700: $og-700;
+
+	al50: $al-50;
+	al100: $al-100;
+	al200: $al-200;
+	al300: $al-300;
+	al400: $al-400;
+	al500: $al-500;
+	al600: $al-600;
+	al700: $al-700;
+
+	n0: $n-0;
+	n10: $n-10;
+	n20: $n-20;
+	n30: $n-30;
+	n40: $n-40;
+	n50: $n-50;
+	n100: $n-100;
+	n200: $n-200;
+	n300: $n-300;
+	n400: $n-400;
+	n500: $n-500;
+	n600: $n-600;
+	n700: $n-700;
+	n800: $n-800;
+	n900: $n-900;
+
+	palete: $palete;
+}
+
 $z-index-sunk: -1000;
 $z-index-base: 0;
 $z-index-backdrop: 1000;
@@ -583,81 +793,81 @@ $transition: map-merge(
 );
 
 @mixin heading-1 {
-	font-size: 45px !important;
+	font-size: 45px;
 	font-weight: 700;
-	letter-spacing: 0.15px !important;
+	letter-spacing: 0.15px;
 }
 
 @mixin heading-2 {
-	font-size: 33px !important;
+	font-size: 33px;
 	font-weight: 700;
-	letter-spacing: 0.1px !important;
+	letter-spacing: 0.1px;
 }
 
 @mixin heading-3 {
-	font-size: 29px !important;
+	font-size: 29px;
 	font-weight: 650;
-	letter-spacing: 0px !important;
+	letter-spacing: 0px;
 }
 
 @mixin subheading-1 {
-	font-size: 25px !important;
+	font-size: 25px;
 	font-weight: 600;
-	letter-spacing: 0.15px !important;
+	letter-spacing: 0.15px;
 }
 
 @mixin subheading-2 {
-	font-size: 21px !important;
+	font-size: 21px;
 	font-weight: 600;
-	letter-spacing: 0px !important;
+	letter-spacing: 0px;
 }
 
 @mixin subheading-3 {
-	font-size: 17px !important;
+	font-size: 17px;
 	font-weight: 600;
-	letter-spacing: 0px !important;
+	letter-spacing: 0px;
 }
 
 @mixin body-1 {
-	font-size: 17px !important;
+	font-size: 17px;
 	font-weight: 430;
-	letter-spacing: 0px !important;
+	letter-spacing: 0px;
 }
 
 @mixin body-2 {
-	font-size: 15px !important;
+	font-size: 15px;
 	font-weight: 430;
-	letter-spacing: 0px !important;
+	letter-spacing: 0px;
 }
 
 @mixin button-1 {
-	font-size: 16px !important;
+	font-size: 16px;
 	font-weight: 750;
-	letter-spacing: 0.2px !important;
+	letter-spacing: 0.2px;
 }
 
 @mixin button-2 {
-	font-size: 14px !important;
+	font-size: 14px;
 	font-weight: 700;
-	letter-spacing: 0.15px !important;
+	letter-spacing: 0.15px;
 }
 
 @mixin button-3 {
-	font-size: 12px !important;
+	font-size: 12px;
 	font-weight: 700;
-	letter-spacing: 0.15px !important;
+	letter-spacing: 0.15px;
 }
 
 @mixin caption {
-	font-size: 13.5px !important;
+	font-size: 13.5px;
 	font-weight: 470;
-	letter-spacing: 0.1px !important;
+	letter-spacing: 0.1px;
 }
 
 @mixin overline {
-	font-size: 11.5px !important;
+	font-size: 11.5px;
 	font-weight: 650;
-	letter-spacing: 0.15px !important;
+	letter-spacing: 0.15px;
 }
 
 @mixin label {