Fix #961 - Add Nebula colors to variables, migrate root: vars to vari…

…ables partial
mozilla · Aug 3, 2021 · d5a8050 · d5a8050
1 parent 32b0974
commit d5a8050
Show file tree

Hide file tree

Showing 2 changed files with 199 additions and 40 deletions.
diff --git a/static/scss/includes/variables.scss b/static/scss/includes/variables.scss
@@ -1,3 +1,43 @@
+// CSS Custom Properties
+:root {
+  --blue3: #0060df;
+  --blue4: #0250bb;
+  --blue5: #073072;
+  --blue7: #003eaa;
+  --blue8: #002275;
+  --buttonFocus: 0 0 0 1px #0a84ff, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+  --darkBlueGradient: linear-gradient(60deg, #2d264e, #26294e);
+  --dropShadowLight: 0 0 10px -3px #3d3f4740;
+  --dropShadowDark: 0 12px 18px 2px rgba(34, 0, 51, 0.09), 0 6px 22px 4px rgba(4, 25, 59, 0.87), 0 6px 10px -4px rgba(14, 13, 26, 0.12);
+  --grey10: hsl(240, 9%, 98%);
+  --grey20: #f1f1f3;
+  --grey30: #d7d7db;
+  --grey40: #b1b1b3;
+  --grey50: #737373;
+  --grey60: #4a4a4f;
+  --grey70: #38383d;
+  --grey80: #2a2a2e;
+  --grey90: #0c0c0d;
+  --inkLight: #2b1e44;
+  --ink: #20123a;
+  --inkDark: #1d1133;
+  --textDark: var(--grey70);
+  --lightestGray: rgba(123, 127, 141, 0.071);
+  --maxContentWidth: 1350px;
+  --metropolis: "Metropolis", Arial, Helvetica, sans-serif;
+  --fxGradient: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
+  --h1Gradient: linear-gradient(-90deg, #83a0f7, #b66dff);
+  --rowFullWidthHPadding: 2.25em;
+  --rowFullWidthVPadding: 1.25em;
+  --violet3: #9059ff;
+  --violet4: #7542e5;
+  --warningRed: #d70022;
+  --white: #fff;
+  --background: #F5F7F9;
+  --dashboardMaxWith: calc(830px + 3rem);
+  --bannerGray: #42425A;
+}
+
 // Fonts
 $font-metropolis: "Metropolis", Arial, Helvetica, sans-serif;
 
@@ -6,3 +46,162 @@ $color-mpp-background: #E5E5E5;
 $color-mpp-gray-30: #ECECEC;
 
 $box-shadow-mpp-sm: 0px 0px 4px rgba(0, 0, 0, 0.12);
+
+
+// NEBULA COLORS
+
+// Primary Colors
+// Purple:
+$color-purple-90: #321C64;
+$color-purple-80: #45278D;
+$color-purple-70: #592ACB;
+$color-purple-60: #7542E5;
+$color-purple-50: #9059FF;
+$color-purple-40: #AB71FF;
+$color-purple-30: #C689FF;
+$color-purple-20: #CB9EFF;
+$color-purple-10: #D9BFFF;
+$color-purple-05: #E7DFFF;
+
+// Green:
+$color-green-90: #00736C;
+$color-green-80: #00A49A;
+$color-green-70: #1CC4A0;
+$color-green-60: #3AD4B3;
+$color-green-50: #3FE1B0;
+$color-green-40: #54FFBD;
+$color-green-30: #88FFD1;
+$color-green-20: #B3FFE3;
+$color-green-10: #D1FFEE;
+$color-green-05: #E3FFF3;
+
+// Neutral Colors
+// Grays:
+$color-black: #000000;
+$color-grey-60: #0C0C0D;
+$color-grey-50: #3D3D3D;
+$color-grey-40: #6D6D6E;
+$color-grey-30: #9E9E9E;
+$color-grey-20: #CECECF;
+$color-grey-10: #E7E7E7;
+$color-grey-05: #F9F9FA;
+
+// Whites:
+$color-white: #FFFFFF;
+$color-white-80: rgba($color-white, 0.8);
+$color-white-60: rgba($color-white, 0.6);
+$color-white-40: rgba($color-white, 0.4);
+$color-white-20: rgba($color-white, 0.2);
+
+
+// Functional Colors
+// Informational:
+$color-informational: #0060DF;
+$color-informational-active: #054096;
+$color-informational-hover: #0250BB;
+$color-informational-focus: #99BFF2;
+
+// Success:
+$color-success: #3AD4B3;
+$color-success-active: #1CC4A0;
+$color-success-hover: #B3FFE3;
+$color-success-focus: #3FE1B0;
+
+// Error
+$color-error: #FF4F5E;
+$color-error-active: #C50042;
+$color-error-hover: #E22850;
+$color-error-focus: #FFBDC5 ;
+
+// Warning
+$color-warning: #FFA436;
+$color-warning-active: #FFA436;
+$color-warning-hover: #FFA436;
+$color-warning-focus: #FFA436;
+
+
+// Secondary Colors
+// Violet
+$color-violet-90: #2B1141;
+$color-violet-80: #4E1A69;
+$color-violet-70: #722291;
+$color-violet-60: #952BB9;
+$color-violet-50: #B833E1;
+$color-violet-40: #D74CF0;
+$color-violet-30: #F770FF;
+$color-violet-20: #F68FFF;
+$color-violet-10: #F6B8FF;
+$color-violet-05: #F7E2FF;
+
+// Blue
+$color-blue-90: #09204D;
+$color-blue-80: #073072;
+$color-blue-70: #054096;
+$color-blue-60: #0250BB;
+$color-blue-50: #0060DF;
+$color-blue-40: #0090ED;
+$color-blue-30: #00B3F4;
+$color-blue-20: #00DDFF;
+$color-blue-10: #80EBFF;
+$color-blue-05: #AAF2FF;
+
+// Orange
+$color-orange-90: #7C1504;
+$color-orange-80: #9E280B;
+$color-orange-70: #CC3D00;
+$color-orange-60: #E25920;
+$color-orange-50: #FF7139;
+$color-orange-40: #FF8A50;
+$color-orange-30: #FFA266;
+$color-orange-20: #FFB587;
+$color-orange-10: #FFD5B2;
+$color-orange-05: #FFF4DE;
+
+// Yellow
+$color-yellow-90: #960E18;
+$color-yellow-80: #A7341F;
+$color-yellow-70: #C45A27;
+$color-yellow-60: #E27F2E;
+$color-yellow-50: #FFA436;
+$color-yellow-40: #FFBD4F;
+$color-yellow-30: #FFD567;
+$color-yellow-20: #FFEA80;
+$color-yellow-10: #FFFF98;
+$color-yellow-05: #FFFFCC;
+
+// Red
+$color-red-90: #440306;
+$color-red-80: #810220;
+$color-red-70: #C50042;
+$color-red-60: #E22850;
+$color-red-50: #FF4F5E;
+$color-red-40: #FF6A75;
+$color-red-30: #FF848B;
+$color-red-20: #FF9AA2;
+$color-red-10: #FFBDC5;
+$color-red-05: #FFDFE7;
+
+// Pink
+$color-pink-90: #50134B;
+$color-pink-80: #7F145B;
+$color-pink-70: #C60084;
+$color-pink-60: #E31587;
+$color-pink-50: #FF298A;
+$color-pink-40: #FF4AA2;
+$color-pink-30: #FF6BBA;
+$color-pink-20: #FF8AC5;
+$color-pink-10: #FFB4DB;
+$color-pink-05: #FFDEF0;
+
+
+// Gradients
+$gradient-pink: radial-gradient(100% 100% at 100% 0%, #9D62FC 0%, #FD3296 100%);
+$gradient-orange: radial-gradient(100% 100% at 100% 0%, #E22850 0%, #FFA436 100%);
+$gradient-green: radial-gradient(100% 100% at 100% 0%, #0060DF 0%, #3FE1B0 100%);
+$gradient-blue: radial-gradient(100% 100% at 100% 0%, #B833E1 0%, #9059FF 37.1%, #5B6DF8 61.4%, #0090ED 100%);
+
+
+// Base Colors
+$color-purple: $color-violet-90;
+$color-green: $color-green-50;
+$color-grey: $color-grey-60;
diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -1,43 +1,3 @@
-:root {
-  --blue3: #0060df;
-  --blue4: #0250bb;
-  --blue5: #073072;
-  --blue7: #003eaa;
-  --blue8: #002275;
-  --buttonFocus: 0 0 0 1px #0a84ff, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
-  --darkBlueGradient: linear-gradient(60deg, #2d264e, #26294e);
-  --dropShadowLight: 0 0 10px -3px #3d3f4740;
-  --dropShadowDark: 0 12px 18px 2px rgba(34, 0, 51, 0.09), 0 6px 22px 4px rgba(4, 25, 59, 0.87), 0 6px 10px -4px rgba(14, 13, 26, 0.12);
-  --grey10: hsl(240, 9%, 98%);
-  --grey20: #f1f1f3;
-  --grey30: #d7d7db;
-  --grey40: #b1b1b3;
-  --grey50: #737373;
-  --grey60: #4a4a4f;
-  --grey70: #38383d;
-  --grey80: #2a2a2e;
-  --grey90: #0c0c0d;
-  --inkLight: #2b1e44;
-  --ink: #20123a;
-  --inkDark: #1d1133;
-  --textDark: var(--grey70);
-  --lightestGray: rgba(123, 127, 141, 0.071);
-  --maxContentWidth: 1350px;
-  --metropolis: "Metropolis", Arial, Helvetica, sans-serif;
-  --fxGradient: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
-  --h1Gradient: linear-gradient(-90deg, #83a0f7, #b66dff);
-  --rowFullWidthHPadding: 2.25em;
-  --rowFullWidthVPadding: 1.25em;
-  --violet3: #9059ff;
-  --violet4: #7542e5;
-  --warningRed: #d70022;
-  --successGreen: #3FE1B0; 
-  --white: #fff;
-  --background: #F5F7F9;
-  --dashboardMaxWith: calc(830px + 3rem);
-  --bannerGray: #42425A;
-}
-
 * {
   box-sizing: border-box;
 }