Adds the new positive color, tweaks Secondary to math the lightness… (playfulprogramming#1251)

… of Primary.

Author: edpratti

src/styles/variables/colors.scss

@@ -20,7 +20,9 @@
 	--neutral95_72: rgba(229, 244, 255, 0.72);
 	--neutral95_48: rgba(229, 244, 255, 0.48);
 	--neutral95_12: rgba(229, 244, 255, 0.12);
+
 	--primary10: rgba(0, 30, 46, 1);
+	--primary15: rgba(0, 41, 62, 1);
 	--primary20: rgba(0, 52, 77, 1);
 	--primary30: rgba(0, 76, 109, 1);
 	--primary40: rgba(0, 101, 144, 1);
@@ -36,7 +38,10 @@
 	--primary80_16: rgba(135, 206, 255, 0.16);
 	--primary90: rgba(200, 230, 255, 1);
 	--primary95: rgba(229, 242, 255, 1);
+	--primary99: rgba(242, 248, 255, 1);
+
 	--secondary10: rgba(56, 0, 55, 1);
+	--secondary15: rgba(68, 7, 66, 1);
 	--secondary20: rgba(83, 19, 80, 1);
 	--secondary30: rgba(109, 44, 105, 1);
 	--secondary40: rgba(140, 69, 133, 1);
@@ -52,7 +57,29 @@
 	--secondary80_16: rgba(255, 173, 243, 0.16);
 	--secondary90: rgba(255, 214, 245, 1);
 	--secondary95: rgba(255, 235, 247, 1);
+	--secondary99: rgba(255, 245, 251);
+	
+	--positive10: rgba(0, 33, 16, 1);
+	--positive15: rgba(0, 45, 23, 1);
+	--positive20: rgba(0, 57, 31, 1);
+	--positive30: rgba(0, 82, 47, 1);
+	--positive40: rgba(0, 109, 63, 1);
+	--positive40_64: rgba(0, 109, 63, 0.64);
+	--positive40_32: rgba(0, 109, 63, 0.32);
+	--positive40_16: rgba(0, 109, 63, 0.16);
+	--positive50: rgba(38, 135, 85, 1);
+	--positive60: rgba(69, 162, 109, 1);
+	--positive70: rgba(97, 189, 134, 1);
+	--positive80: rgba(125, 217, 159, 1);
+	--positive80_64: rgba(125, 217, 159, 0.64);
+	--positive80_32: rgba(125, 217, 159, 0.32);
+	--positive80_16: rgba(125, 217, 159, 0.16);
+	--positive90: rgba(166, 243, 193, 1);
+	--positive95: rgba(193, 255, 212, 1);
+	--positive99: rgba(229, 255, 238, 1);
+
 	--error10: rgba(65, 0, 2, 1);
+	--error15: rgba(85, 0, 3, 1);
 	--error20: rgba(105, 0, 5, 1);
 	--error30: rgba(147, 0, 10, 1);
 	--error40: rgba(186, 26, 26, 1);
@@ -68,4 +95,5 @@
 	--error80_16: rgba(255, 180, 171, 0.16);
 	--error90: rgba(255, 218, 214, 1);
 	--error95: rgba(255, 237, 234, 1);
+	--error99: rgba(255, 245, 245, 1);
 }

src/styles/variables/themes.scss

@@ -9,42 +9,69 @@
 	--primary_high-contrast: var(--primary20);
 	--primary_high-contrast_hovered: var(--primary30);
 	--primary_high-contrast_pressed: var(--primary40);
+
 	--secondary_default: var(--secondary40);
 	--secondary_on-default: var(--secondary95);
 	--secondary_variant: var(--secondary80);
 	--secondary_on-variant: var(--secondary10);
 	--secondary_high-contrast: var(--secondary20);
 	--secondary_high-contrast_hovered: var(--secondary30);
 	--secondary_high-contrast_pressed: var(--secondary40);
+
 	--error_default: var(--error40);
 	--error_on-default: var(--error95);
 	--error_variant: var(--error80);
 	--error_on-variant: var(--error10);
 	--error_high-contrast: var(--error20);
 	--error_high-contrast_hovered: var(--error30);
 	--error_high-contrast_pressed: var(--error40);
+
+	--positive_default: var(--positive40);
+	--positive_on-default: var(--positive95);
+	--positive_variant: var(--positive80);
+	--positive_on-variant: var(--positive10);
+	--positive_high-contrast: var(--positive20);
+	--positive_high-contrast_hovered: var(--positive30);
+	--positive_high-contrast_pressed: var(--positive40);
+
 	--surface_primary_emphasis-high: var(--primary80);
 	--surface_primary_emphasis-medium: var(--primary80_64);
 	--surface_primary_emphasis-low: var(--primary80_32);
 	--surface_primary_emphasis-none: var(--primary80_16);
+
 	--surface_secondary_emphasis-high: var(--secondary80);
 	--surface_secondary_emphasis-medium: var(--secondary80_64);
 	--surface_secondary_emphasis-low: var(--secondary80_32);
 	--surface_secondary_emphasis-none: var(--secondary80_16);
+
+	--surface_positive_emphasis-high: var(--positive80);
+	--surface_positive_emphasis-medium: var(--positive80_64);
+	--surface_positive_emphasis-low: var(--positive80_32);
+	--surface_positive_emphasis-none: var(--positive80_16);
+
 	--surface_error_emphasis-high: var(--error80);
 	--surface_error_emphasis-medium: var(--error80_64);
 	--surface_error_emphasis-low: var(--error80_32);
 	--surface_error_emphasis-none: var(--error80_16);
+
 	--background_primary: var(--primary95);
+	--background_primary-bright: var(--primary99);
 	--background_secondary: var(--secondary95);
+	--background_secondary-bright: var(--secondary99);
+	--background_positive: var(--positive95);
+	--background_positive-bright: var(--positive99);
 	--background_error: var(--error95);
+	--background_error-bright: var(--error99);
 	--background_focus: var(--white);
 	--background_disabled: var(--neutral10_12);
+
 	--foreground_emphasis-high: var(--neutral10);
 	--foreground_emphasis-medium: var(--neutral10_72);
 	--foreground_disabled: var(--neutral10_48);
+
 	--focus-outline_primary: var(--primary40);
 	--focus-outline_secondary: var(--secondary40);
+	--focus-outline_positive: var(--positive40);
 	--focus-outline_error: var(--error40);
 }
 
@@ -60,42 +87,69 @@ body.dark,
 		--primary_high-contrast: var(--primary80);
 		--primary_high-contrast_hovered: var(--primary70);
 		--primary_high-contrast_pressed: var(--primary60);
+
 		--secondary_default: var(--secondary80);
 		--secondary_on-default: var(--secondary10);
 		--secondary_variant: var(--secondary40);
 		--secondary_on-variant: var(--secondary95);
 		--secondary_high-contrast: var(--secondary80);
 		--secondary_high-contrast_hovered: var(--secondary70);
 		--secondary_high-contrast_pressed: var(--secondary60);
+
+		--positive_default: var(--positive80);
+		--positive_on-default: var(--positive10);
+		--positive_variant: var(--positive40);
+		--positive_on-variant: var(--positive95);
+		--positive_high-contrast: var(--positive80);
+		--positive_high-contrast_hovered: var(--positive70);
+		--positive_high-contrast_pressed: var(--positive60);
+
 		--error_default: var(--error80);
 		--error_on-default: var(--error10);
 		--error_variant: var(--error40);
 		--error_on-variant: var(--error95);
 		--error_high-contrast: var(--error80);
 		--error_high-contrast_hovered: var(--error70);
 		--error_high-contrast_pressed: var(--error60);
+
 		--surface_primary_emphasis-high: var(--primary40);
 		--surface_primary_emphasis-medium: var(--primary40_64);
 		--surface_primary_emphasis-low: var(--primary40_32);
 		--surface_primary_emphasis-none: var(--primary40_16);
+
 		--surface_secondary_emphasis-high: var(--secondary40);
 		--surface_secondary_emphasis-medium: var(--secondary40_64);
 		--surface_secondary_emphasis-low: var(--secondary40_32);
 		--surface_secondary_emphasis-none: var(--secondary40_16);
+
+		--surface_positive_emphasis-high: var(--positive40);
+		--surface_positive_emphasis-medium: var(--positive40_64);
+		--surface_positive_emphasis-low: var(--positive40_32);
+		--surface_positive_emphasis-none: var(--positive40_16);
+
 		--surface_error_emphasis-high: var(--error40);
 		--surface_error_emphasis-medium: var(--error40_64);
 		--surface_error_emphasis-low: var(--error40_32);
 		--surface_error_emphasis-none: var(--error40_16);
+
 		--background_primary: var(--primary10);
+		--background_primary-bright: var(--primary15);
 		--background_secondary: var(--secondary10);
+		--background_secondary-bright: var(--secondary15);
+		--background_positive: var(--positive10);
+		--background_positive-bright: var(--positive15);
 		--background_error: var(--error10);
+		--background_error-bright: var(--error15);
 		--background_focus: var(--black);
 		--background_disabled: var(--neutral95_12);
+
 		--foreground_emphasis-high: var(--neutral95);
 		--foreground_emphasis-medium: var(--neutral95_72);
 		--foreground_disabled: var(--neutral95_48);
+
 		--focus-outline_primary: var(--primary80);
 		--focus-outline_secondary: var(--secondary80);
+		--focus-outline_positive: var(--positive80);
 		--focus-outline_error: var(--error80);
 	}
 }