From 688c3f395dafb43360204c29bfd8dd21ab719b1d Mon Sep 17 00:00:00 2001 From: Florian Haas Date: Tue, 24 Jan 2017 18:57:42 +0100 Subject: [PATCH 1/4] v1 Sass (LMS): set !default on all colors Colors should be overridable. See https://openedx.atlassian.net/browse/PLAT-1181 This sets all color variables to !default for v1 (pre-Pattern Library) Sass. --- lms/static/sass/partials/base/_variables.scss | 410 +++++++++--------- 1 file changed, 205 insertions(+), 205 deletions(-) diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index 5b786e0a43..cb4c8cae9e 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -68,125 +68,125 @@ $gray-d2: shade($gray,40%) !default; $gray-d3: shade($gray,60%) !default; $gray-d4: shade($gray,80%) !default; -$yellow: rgb(255, 252, 221); +$yellow: rgb(255, 252, 221) !default; -$pink: rgb(182,37,103); -$pink-l1: tint($pink,20%); -$pink-l2: tint($pink,40%); -$pink-l3: tint($pink,60%); -$pink-l4: tint($pink,80%); -$pink-l5: tint($pink,90%); -$pink-d1: shade($pink,20%); -$pink-d2: shade($pink,40%); -$pink-d3: shade($pink,60%); -$pink-d4: shade($pink,80%); -$pink-s1: saturate($pink,15%); -$pink-s2: saturate($pink,30%); -$pink-s3: saturate($pink,45%); -$pink-u1: desaturate($pink,15%); -$pink-u2: desaturate($pink,30%); -$pink-u3: desaturate($pink,45%); +$pink: rgb(182,37,103) !default; +$pink-l1: tint($pink,20%) !default; +$pink-l2: tint($pink,40%) !default; +$pink-l3: tint($pink,60%) !default; +$pink-l4: tint($pink,80%) !default; +$pink-l5: tint($pink,90%) !default; +$pink-d1: shade($pink,20%) !default; +$pink-d2: shade($pink,40%) !default; +$pink-d3: shade($pink,60%) !default; +$pink-d4: shade($pink,80%) !default; +$pink-s1: saturate($pink,15%) !default; +$pink-s2: saturate($pink,30%) !default; +$pink-s3: saturate($pink,45%) !default; +$pink-u1: desaturate($pink,15%) !default; +$pink-u2: desaturate($pink,30%) !default; +$pink-u3: desaturate($pink,45%) !default; -$red: rgb(178, 6, 16); -$red-l1: tint($red,20%); -$red-l2: tint($red,40%); -$red-l3: tint($red,60%); -$red-l4: tint($red,80%); -$red-l5: tint($red,90%); -$red-d1: shade($red,20%); -$red-d2: shade($red,40%); -$red-d3: shade($red,60%); -$red-d4: shade($red,80%); -$red-s1: saturate($red,15%); -$red-s2: saturate($red,30%); -$red-s3: saturate($red,45%); -$red-u1: desaturate($red,15%); -$red-u2: desaturate($red,30%); -$red-u3: desaturate($red,45%); +$red: rgb(178, 6, 16) !default; +$red-l1: tint($red,20%) !default; +$red-l2: tint($red,40%) !default; +$red-l3: tint($red,60%) !default; +$red-l4: tint($red,80%) !default; +$red-l5: tint($red,90%) !default; +$red-d1: shade($red,20%) !default; +$red-d2: shade($red,40%) !default; +$red-d3: shade($red,60%) !default; +$red-d4: shade($red,80%) !default; +$red-s1: saturate($red,15%) !default; +$red-s2: saturate($red,30%) !default; +$red-s3: saturate($red,45%) !default; +$red-u1: desaturate($red,15%) !default; +$red-u2: desaturate($red,30%) !default; +$red-u3: desaturate($red,45%) !default; -$green: rgb(37, 184, 90); -$green-l1: tint($green,20%); -$green-l2: tint($green,40%); -$green-l3: tint($green,60%); -$green-l4: tint($green,80%); -$green-l5: tint($green,90%); -$green-d1: shade($green,20%); -$green-d2: shade($green,40%); -$green-d3: shade($green,60%); -$green-d4: shade($green,80%); -$green-s1: saturate($green,15%); -$green-s2: saturate($green,30%); -$green-s3: saturate($green,45%); -$green-u1: desaturate($green,15%); -$green-u2: desaturate($green,30%); -$green-u3: desaturate($green,45%); +$green: rgb(37, 184, 90) !default; +$green-l1: tint($green,20%) !default; +$green-l2: tint($green,40%) !default; +$green-l3: tint($green,60%) !default; +$green-l4: tint($green,80%) !default; +$green-l5: tint($green,90%) !default; +$green-d1: shade($green,20%) !default; +$green-d2: shade($green,40%) !default; +$green-d3: shade($green,60%) !default; +$green-d4: shade($green,80%) !default; +$green-s1: saturate($green,15%) !default; +$green-s2: saturate($green,30%) !default; +$green-s3: saturate($green,45%) !default; +$green-u1: desaturate($green,15%) !default; +$green-u2: desaturate($green,30%) !default; +$green-u3: desaturate($green,45%) !default; -$yellow: rgb(255, 252, 221); // yellow color used by LMS -//$yellow: rgb(237, 189, 60); // yellow color used by Studio -$yellow-l1: tint($yellow,20%); -$yellow-l2: tint($yellow,40%); -$yellow-l3: tint($yellow,60%); -$yellow-l4: tint($yellow,80%); -$yellow-l5: tint($yellow,90%); -$yellow-d1: shade($yellow,20%); -$yellow-d2: shade($yellow,40%); -$yellow-d3: shade($yellow,60%); -$yellow-d4: shade($yellow,80%); -$yellow-s1: saturate($yellow,15%); -$yellow-s2: saturate($yellow,30%); -$yellow-s3: saturate($yellow,45%); -$yellow-u1: desaturate($yellow,15%); -$yellow-u2: desaturate($yellow,30%); -$yellow-u3: desaturate($yellow,45%); +$yellow: rgb(255, 252, 221) !default; // yellow color used by LMS +//$yellow: rgb(237, 189, 60) !default; // yellow color used by Studio +$yellow-l1: tint($yellow,20%) !default; +$yellow-l2: tint($yellow,40%) !default; +$yellow-l3: tint($yellow,60%) !default; +$yellow-l4: tint($yellow,80%) !default; +$yellow-l5: tint($yellow,90%) !default; +$yellow-d1: shade($yellow,20%) !default; +$yellow-d2: shade($yellow,40%) !default; +$yellow-d3: shade($yellow,60%) !default; +$yellow-d4: shade($yellow,80%) !default; +$yellow-s1: saturate($yellow,15%) !default; +$yellow-s2: saturate($yellow,30%) !default; +$yellow-s3: saturate($yellow,45%) !default; +$yellow-u1: desaturate($yellow,15%) !default; +$yellow-u2: desaturate($yellow,30%) !default; +$yellow-u3: desaturate($yellow,45%) !default; -$blue: rgb(0, 121, 188); -$blue-l1: tint($blue,20%); -$blue-l2: tint($blue,40%); -$blue-l3: tint($blue,60%); -$blue-l4: tint($blue,80%); -$blue-l5: tint($blue,90%); -$blue-d1: shade($blue,20%); -$blue-d2: shade($blue,40%); -$blue-d3: shade($blue,60%); -$blue-d4: shade($blue,80%); -$blue-s1: saturate($blue,15%); -$blue-s2: saturate($blue,30%); -$blue-s3: saturate($blue,45%); -$blue-u1: desaturate($blue,15%); -$blue-u2: desaturate($blue,30%); -$blue-u3: desaturate($blue,45%); -$blue-t0: rgba($blue, 0.125); -$blue-t1: rgba($blue, 0.25); -$blue-t2: rgba($blue, 0.50); -$blue-t3: rgba($blue, 0.75); +$blue: rgb(0, 121, 188) !default; +$blue-l1: tint($blue,20%) !default; +$blue-l2: tint($blue,40%) !default; +$blue-l3: tint($blue,60%) !default; +$blue-l4: tint($blue,80%) !default; +$blue-l5: tint($blue,90%) !default; +$blue-d1: shade($blue,20%) !default; +$blue-d2: shade($blue,40%) !default; +$blue-d3: shade($blue,60%) !default; +$blue-d4: shade($blue,80%) !default; +$blue-s1: saturate($blue,15%) !default; +$blue-s2: saturate($blue,30%) !default; +$blue-s3: saturate($blue,45%) !default; +$blue-u1: desaturate($blue,15%) !default; +$blue-u2: desaturate($blue,30%) !default; +$blue-u3: desaturate($blue,45%) !default; +$blue-t0: rgba($blue, 0.125) !default; +$blue-t1: rgba($blue, 0.25) !default; +$blue-t2: rgba($blue, 0.50) !default; +$blue-t3: rgba($blue, 0.75) !default; -$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant -$uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant +$uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant +$uxpl-blue-hover-active: rgb(6, 86, 131) !default; // wcag2a compliant -$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant -$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant +$uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant +$uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant -$uxpl-pink-base: rgb(194, 56, 125); // wcag2a compliant -$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%); // wcag2a compliant +$uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant -$uxpl-grayscale-x-back: rgb(245, 245, 245); // UXPL grayscale, x-back +$uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back -$orange: rgb(237, 189, 60); -$orange-l1: tint($orange,20%); -$orange-l2: tint($orange,40%); -$orange-l3: tint($orange,60%); -$orange-l4: tint($orange,80%); -$orange-l5: tint($orange,90%); -$orange-d1: shade($orange,20%); -$orange-d2: shade($orange,40%); -$orange-d3: shade($orange,60%); -$orange-d4: shade($orange,80%); -$orange-s1: saturate($orange,15%); -$orange-s2: saturate($orange,30%); -$orange-s3: saturate($orange,45%); -$orange-u1: desaturate($orange,15%); -$orange-u2: desaturate($orange,30%); -$orange-u3: desaturate($orange,45%); +$orange: rgb(237, 189, 60) !default; +$orange-l1: tint($orange,20%) !default; +$orange-l2: tint($orange,40%) !default; +$orange-l3: tint($orange,60%) !default; +$orange-l4: tint($orange,80%) !default; +$orange-l5: tint($orange,90%) !default; +$orange-d1: shade($orange,20%) !default; +$orange-d2: shade($orange,40%) !default; +$orange-d3: shade($orange,60%) !default; +$orange-d4: shade($orange,80%) !default; +$orange-s1: saturate($orange,15%) !default; +$orange-s2: saturate($orange,30%) !default; +$orange-s3: saturate($orange,45%) !default; +$orange-u1: desaturate($orange,15%) !default; +$orange-u2: desaturate($orange,30%) !default; +$orange-u3: desaturate($orange,45%) !default; // ==================== @@ -226,104 +226,104 @@ $success-color: rgb(0, 155, 0) !default; // old color variables // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above. -$dark-gray1: rgb(74,74,74); -$light-gray1: rgb(242,242,242); -$light-gray2: rgb(171,171,171); -$light-gray3: rgb(249,249,249); -$light-gray4: rgb(252,252,252); -$dark-gray2: rgb(151,151,151); -$blue1: rgb(74,144,226); -$blue2: rgb(0,161,229); -$green1: rgb(97,161,46); -$red1: rgb(208,2,27); +$dark-gray1: rgb(74,74,74) !default; +$light-gray1: rgb(242,242,242) !default; +$light-gray2: rgb(171,171,171) !default; +$light-gray3: rgb(249,249,249) !default; +$light-gray4: rgb(252,252,252) !default; +$dark-gray2: rgb(151,151,151) !default; +$blue1: rgb(74,144,226) !default; +$blue2: rgb(0,161,229) !default; +$green1: rgb(97,161,46) !default; +$red1: rgb(208,2,27) !default; // edx-specific: marketing site variables // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above. -$m-gray: rgb(138,140,143); //C8F -$m-gray-l1: rgb(151,153,155); -$m-gray-l2: rgb(164,166,168); -$m-gray-l3: rgb(177,178,180); -$m-gray-l4: rgb(245,245,245); -$m-gray-d1: rgb(111, 112, 116); -$m-gray-d2: rgb(112,114,118); -$m-gray-d3: rgb(100,102,104); -$m-gray-d4: rgb(5,5,5); -$m-gray-t0: rgba($m-gray,0.125); -$m-gray-t1: rgba($m-gray,0.25); -$m-gray-t2: rgba($m-gray,0.50); -$m-gray-t3: rgba($m-gray,0.75); +$m-gray: rgb(138,140,143) !default; //C8F +$m-gray-l1: rgb(151,153,155) !default; +$m-gray-l2: rgb(164,166,168) !default; +$m-gray-l3: rgb(177,178,180) !default; +$m-gray-l4: rgb(245,245,245) !default; +$m-gray-d1: rgb(111, 112, 116) !default; +$m-gray-d2: rgb(112,114,118) !default; +$m-gray-d3: rgb(100,102,104) !default; +$m-gray-d4: rgb(5,5,5) !default; +$m-gray-t0: rgba($m-gray,0.125) !default; +$m-gray-t1: rgba($m-gray,0.25) !default; +$m-gray-t2: rgba($m-gray,0.50) !default; +$m-gray-t3: rgba($m-gray,0.75) !default; $m-blue: $uxpl-blue-base; // uxpl blue base -$m-blue-l1: rgb(43,172,230); -$m-blue-l2: rgb(66,181,233); -$m-blue-l3: rgb(89,190,236); -$m-blue-l4: tint($m-blue,90%); -$m-blue-l5: tint($m-blue,95%); -$m-blue-l6: #4bb4fb; -$m-blue-d1: rgb(23,144,199); -$m-blue-d2: $blue; -$m-blue-d3: rgb(18,111,154); -$m-blue-d4: rgb(10,74,103); -$m-blue-d5: rgb(0,158,231); -$m-blue-d6: #256A97; -$m-blue-t0: rgba($m-blue,0.125); -$m-blue-t1: rgba($m-blue,0.25); -$m-blue-t2: rgba($m-blue,0.50); -$m-blue-t3: rgba($m-blue,0.75); +$m-blue-l1: rgb(43,172,230) !default; +$m-blue-l2: rgb(66,181,233) !default; +$m-blue-l3: rgb(89,190,236) !default; +$m-blue-l4: tint($m-blue,90%) !default; +$m-blue-l5: tint($m-blue,95%) !default; +$m-blue-l6: #4bb4fb !default; +$m-blue-d1: rgb(23,144,199) !default; +$m-blue-d2: $blue !default; +$m-blue-d3: rgb(18,111,154) !default; +$m-blue-d4: rgb(10,74,103) !default; +$m-blue-d5: rgb(0,158,231) !default; +$m-blue-d6: #256A97 !default; +$m-blue-t0: rgba($m-blue,0.125) !default; +$m-blue-t1: rgba($m-blue,0.25) !default; +$m-blue-t2: rgba($m-blue,0.50) !default; +$m-blue-t3: rgba($m-blue,0.75) !default; $m-pink: $uxpl-pink-base; // uxpl pink base -$m-pink-l1: rgb(202,47,115); -$m-pink-l2: rgb(211,63,128); -$m-pink-l3: rgb(215,84,142); -$m-pink-l4: tint($m-pink,75%); -$m-pink-l5: tint($m-pink,85%); -$m-pink-d1: rgb(160,37,91); -$m-pink-d2: rgb(140,32,79); -$m-pink-d3: rgb(119,28,68); +$m-pink-l1: rgb(202,47,115) !default; +$m-pink-l2: rgb(211,63,128) !default; +$m-pink-l3: rgb(215,84,142) !default; +$m-pink-l4: tint($m-pink,75%) !default; +$m-pink-l5: tint($m-pink,85%) !default; +$m-pink-d1: rgb(160,37,91) !default; +$m-pink-d2: rgb(140,32,79) !default; +$m-pink-d3: rgb(119,28,68) !default; $m-green: $uxpl-green-base; // uxpl green base -$m-green-s1: rgb(96, 188, 97); -$m-green-l1: tint($m-green,20%); -$m-green-l2: tint($m-green,40%); -$m-green-l3: tint($m-green,60%); -$m-green-l4: tint($m-green,90%); -$m-green-l5: tint($m-green,95%); -$m-green-d1: shade($m-green,20%); -$m-green-d2: shade($m-green,40%); -$m-green-d3: shade($m-green,60%); -$m-green-d4: shade($m-green,90%); -$m-green-t0: rgba($m-green,0.125); -$m-green-t1: rgba($m-green,0.25); -$m-green-t2: rgba($m-green,0.50); -$m-green-t3: rgba($m-green,0.75); +$m-green-s1: rgb(96, 188, 97) !default; +$m-green-l1: tint($m-green,20%) !default; +$m-green-l2: tint($m-green,40%) !default; +$m-green-l3: tint($m-green,60%) !default; +$m-green-l4: tint($m-green,90%) !default; +$m-green-l5: tint($m-green,95%) !default; +$m-green-d1: shade($m-green,20%) !default; +$m-green-d2: shade($m-green,40%) !default; +$m-green-d3: shade($m-green,60%) !default; +$m-green-d4: shade($m-green,90%) !default; +$m-green-t0: rgba($m-green,0.125) !default; +$m-green-t1: rgba($m-green,0.25) !default; +$m-green-t2: rgba($m-green,0.50) !default; +$m-green-t3: rgba($m-green,0.75) !default; // edx-specific: verified -$verified-color-lvl1: $m-green; -$verified-color-lvl2: $m-green-l1; -$verified-color-lvl3: $m-green-l2; -$verified-color-lvl4: $m-green-l3; -$verified-color-lvl5: $m-green-l4; +$verified-color-lvl1: $m-green !default; +$verified-color-lvl2: $m-green-l1 !default; +$verified-color-lvl3: $m-green-l2 !default; +$verified-color-lvl4: $m-green-l3 !default; +$verified-color-lvl5: $m-green-l4 !default; // edx-specific: professional ed -$professional-color-lvl1: $m-pink; -$professional-color-lvl2: $m-pink-l1; -$professional-color-lvl3: $m-pink-l2; -$professional-color-lvl4: $m-pink-l3; -$professional-color-lvl5: $m-pink-l4; +$professional-color-lvl1: $m-pink !default; +$professional-color-lvl2: $m-pink-l1 !default; +$professional-color-lvl3: $m-pink-l2 !default; +$professional-color-lvl4: $m-pink-l3 !default; +$professional-color-lvl5: $m-pink-l4 !default; // edx-specific: honor code -$honorcode-color-lvl1: $m-blue; -$honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%); +$honorcode-color-lvl1: $m-blue !default; +$honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%) !default; // edx-specific: audit -$audit-color-lvl1: rgb(221, 221, 221); -$audit-color-lvl2: tint($audit-color-lvl1, 33%); +$audit-color-lvl1: rgb(221, 221, 221) !default; +$audit-color-lvl2: tint($audit-color-lvl1, 33%) !default; // edx-specific: credit -$credit-color-base: rgb(244,195,0); // accessible with black text +$credit-color-base: rgb(244,195,0) !default; // accessible with black text // edx-specific: Studio/Staff actions -$staff-color: $uxpl-pink-base; +$staff-color: $uxpl-pink-base !default; // ---------------------------- @@ -394,12 +394,12 @@ $border-color-l3: $m-gray-l3 !default; $border-color-l4: $m-gray-l4 !default; // visual horizontal rules -$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)); -$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)); -$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)); -$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0)); -$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)); -$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)); +$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)) !default; +$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)) !default; +$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)) !default; +$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0)) !default; +$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)) !default; +$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)) !default; // notifications $notify-banner-bg-1: rgb(56,56,56) !default; @@ -449,7 +449,7 @@ $button-color: $uxpl-blue-base !default; $button-archive-color: rgb(238,238,238) !default; // #eeeeee // larger, random elements -$dark-trans-bg: rgba(0, 0, 0, .75); +$dark-trans-bg: rgba(0, 0, 0, .75) !default; $body-bg: $uxpl-grayscale-x-back !default; @@ -458,8 +458,8 @@ $container-bg: $white !default; // header $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default; $header-bg: $white !default; -$header-graphic-super-color: $m-blue-d1; -$header-graphic-sub-color: $m-gray-d2; +$header-graphic-super-color: $m-blue-d1 !default; +$header-graphic-sub-color: $m-gray-d2 !default; $header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif !default; $header_image_margin: -69px !default; @@ -486,7 +486,7 @@ $courseware-navigation-color: $uxpl-blue-base !default; $homepage__header--gradient__color--alpha: lighten($gray, 15%) !default; $homepage__header--gradient__color--bravo: saturate($gray, 30%) !default; $homepage__header--background: lighten($gray, 15%) !default; -$homepage-background: rgb(252, 252, 252); +$homepage-background: rgb(252, 252, 252) !default; $course-card-height: ($baseline*18) !default; $course-image-height: ($baseline*8) !default; $course-info-height: ($baseline*10) !default; @@ -516,8 +516,8 @@ $course-header-bg: rgba(255,255,255, 0.93) !default; $result-highlight-color-base: rgba($highlight-color, 0.25) !default; // sidebar -$sidebar-chapter-bg-top: rgba(255, 255, 255, .5); -$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0); +$sidebar-chapter-bg-top: rgba(255, 255, 255, .5) !default; +$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0) !default; $sidebar-chapter-bg: rgb(246,246,246) !default; $sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214)) !default; @@ -535,15 +535,15 @@ $light-gray: rgb(221, 221, 221) !default; $dark-gray: rgb(51, 51, 51) !default; $border-color: rgb(200, 200, 200) !default; $sidebar-color: rgb(246, 246, 246) !default; -$outer-border-color: $gray-l3; +$outer-border-color: $gray-l3 !default; // used by descriptor css $lightGrey: rgb(237,241,245) !default; -$mediumGrey: #ced2db; +$mediumGrey: #ced2db !default; $darkGrey: rgb(136,145,161) !default; -$extraDarkGrey: #3d4043; +$extraDarkGrey: #3d4043 !default; $lightGrey1: $gray-l3 !default; -$paleYellow: #fffcf1; -$blue-d1: shade($blue,20%); -$blue-d2: shade($blue,40%); -$blue-d4: shade($blue,80%); +$paleYellow: #fffcf1 !default; +$blue-d1: shade($blue,20%) !default; +$blue-d2: shade($blue,40%) !default; +$blue-d4: shade($blue,80%) !default; From 85a8e2211731f3cf1e264b10b06f95913c1ce550 Mon Sep 17 00:00:00 2001 From: Florian Haas Date: Tue, 24 Jan 2017 19:01:02 +0100 Subject: [PATCH 2/4] v2 Sass (LMS): Set !default on all colors Colors should be overridable. See https://openedx.atlassian.net/browse/PLAT-1181 This sets all color variables to !default for v2 (Pattern Library) Sass. --- .../base/_variables.scss | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/common/static/sass/edx-pattern-library-shims/base/_variables.scss b/common/static/sass/edx-pattern-library-shims/base/_variables.scss index 317eb2fa5a..7222357753 100644 --- a/common/static/sass/edx-pattern-library-shims/base/_variables.scss +++ b/common/static/sass/edx-pattern-library-shims/base/_variables.scss @@ -1,5 +1,5 @@ // COLORS -$light-gray1: rgb(221, 221, 221); +$light-gray1: rgb(221, 221, 221) !default; // Font Sizes in em @@ -127,15 +127,15 @@ $font-sizes: ( // +Colors - UXPL new pattern library colors // ==================== -$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant -$uxpl-blue-hover-active: darken($uxpl-blue-base, 7%); // wcag2a compliant +$uxpl-blue-base: rgba(0, 116, 180, 1) !default; // wcag2a compliant +$uxpl-blue-hover-active: darken($uxpl-blue-base, 7%) !default; // wcag2a compliant -$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant -$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant +$uxpl-green-base: rgba(0, 129, 0, 1) !default; // wcag2a compliant +$uxpl-green-hover-active: lighten($uxpl-green-base, 7%) !default; // wcag2a compliant -$uxpl-gray-dark: rgb(17, 17, 17); -$uxpl-gray-base: rgb(65, 65, 65); -$uxpl-gray-background: rgb(217, 217, 217); +$uxpl-gray-dark: rgb(17, 17, 17) !default; +$uxpl-gray-base: rgb(65, 65, 65) !default; +$uxpl-gray-background: rgb(217, 217, 217) !default; // Alert styles @@ -146,9 +146,9 @@ $warning-color-accent: rgb(255, 252, 221) !default; // CAPA correctness color to be consistent with Alert styles above -$correct: $success-color; -$partially-correct: $success-color; -$incorrect: $error-color; +$correct: $success-color !default; +$partially-correct: $success-color !default; +$incorrect: $error-color !default; // BUTTONS From b7f996afcb75c0e27df580a3405098cf9640a058 Mon Sep 17 00:00:00 2001 From: Florian Haas Date: Wed, 1 Feb 2017 11:46:08 +0100 Subject: [PATCH 3/4] v1 Sass (LMS): remove duplicate color definition The double definition of $blue-d1, $blue-d2, and $blue-d4 is superfluous, so remove the second instance of each. --- lms/static/sass/partials/base/_variables.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index cb4c8cae9e..a60a96187c 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -544,6 +544,3 @@ $darkGrey: rgb(136,145,161) !default; $extraDarkGrey: #3d4043 !default; $lightGrey1: $gray-l3 !default; $paleYellow: #fffcf1 !default; -$blue-d1: shade($blue,20%) !default; -$blue-d2: shade($blue,40%) !default; -$blue-d4: shade($blue,80%) !default; From 64fd392933cd0bfc25615b29244a897742b1c338 Mon Sep 17 00:00:00 2001 From: Florian Haas Date: Wed, 1 Feb 2017 11:51:24 +0100 Subject: [PATCH 4/4] v1 Sass (CMS): set !default on all colors Colors should be overridable. See https://openedx.atlassian.net/browse/PLAT-1181 This sets all color variables to !default for v1 (pre-Pattern Library) Sass in Studio. --- cms/static/sass/partials/_variables.scss | 362 +++++++++++------------ 1 file changed, 181 insertions(+), 181 deletions(-) diff --git a/cms/static/sass/partials/_variables.scss b/cms/static/sass/partials/_variables.scss index 933c377ed5..69912569b1 100644 --- a/cms/static/sass/partials/_variables.scss +++ b/cms/static/sass/partials/_variables.scss @@ -37,190 +37,190 @@ $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; // +Colors - Utility // ==================== -$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent +$transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI width/transitions but element is transparent // +Colors - UXPL new pattern library colors // ==================== -$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant -$uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant +$uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant +$uxpl-blue-hover-active: rgb(6, 86, 131) !default; // wcag2a compliant -$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant -$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant +$uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant +$uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant -$uxpl-pink-base: rgb(194, 56, 125); // wcag2a compliant -$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%); // wcag2a compliant +$uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant -$uxpl-grayscale-x-back: rgb(245, 245, 245); // UXPL grayscale, x-back +$uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back -$uxpl-primary-accent: rgb(14, 166, 236); +$uxpl-primary-accent: rgb(14, 166, 236) !default; // +Colors - Primary // ==================== -$black: rgb(0,0,0); -$black-t0: rgba($black, 0.125); -$black-t1: rgba($black, 0.25); -$black-t2: rgba($black, 0.5); -$black-t3: rgba($black, 0.75); -$black-t4: rgba($black, 0.85); +$black: rgb(0,0,0) !default; +$black-t0: rgba($black, 0.125) !default; +$black-t1: rgba($black, 0.25) !default; +$black-t2: rgba($black, 0.5) !default; +$black-t3: rgba($black, 0.75) !default; +$black-t4: rgba($black, 0.85) !default; -$white: rgb(255,255,255); -$white-t0: rgba($white, 0.125); -$white-t1: rgba($white, 0.25); -$white-t2: rgba($white, 0.5); -$white-t3: rgba($white, 0.75); +$white: rgb(255,255,255) !default; +$white-t0: rgba($white, 0.125) !default; +$white-t1: rgba($white, 0.25) !default; +$white-t2: rgba($white, 0.5) !default; +$white-t3: rgba($white, 0.75) !default; -$gray: rgb(127,127,127); -$gray-l1: tint($gray,20%); -$gray-l2: tint($gray,40%); -$gray-l3: tint($gray,60%); -$gray-l4: tint($gray,80%); -$gray-l5: tint($gray,90%); -$gray-l6: tint($gray,95%); -$gray-l7: tint($gray,99%); -$gray-d1: shade($gray,20%); -$gray-d2: shade($gray,40%); -$gray-d3: shade($gray,60%); -$gray-d4: shade($gray,80%); +$gray: rgb(127,127,127) !default; +$gray-l1: tint($gray,20%) !default; +$gray-l2: tint($gray,40%) !default; +$gray-l3: tint($gray,60%) !default; +$gray-l4: tint($gray,80%) !default; +$gray-l5: tint($gray,90%) !default; +$gray-l6: tint($gray,95%) !default; +$gray-l7: tint($gray,99%) !default; +$gray-d1: shade($gray,20%) !default; +$gray-d2: shade($gray,40%) !default; +$gray-d3: shade($gray,60%) !default; +$gray-d4: shade($gray,80%) !default; // These define button styles similar to LMS // The goal here is consistency (until we can overhaul all of this...) -$btn-lms-border: #d2c9c9; -$btn-lms-background: #f1f1f1; -$btn-lms-gradient: #d9d1d1; -$btn-lms-shadow: #fcfbfb; -$btn-lms-shadow-hover: #fefefe; -$btn-lms-background-hover: #e4e4e4; -$btn-lms-gradient-hover: #d1c9c9; -$btn-lms-shadow-active: #cac2c2; +$btn-lms-border: #d2c9c9 !default; +$btn-lms-background: #f1f1f1 !default; +$btn-lms-gradient: #d9d1d1 !default; +$btn-lms-shadow: #fcfbfb !default; +$btn-lms-shadow-hover: #fefefe !default; +$btn-lms-background-hover: #e4e4e4 !default; +$btn-lms-gradient-hover: #d1c9c9 !default; +$btn-lms-shadow-active: #cac2c2 !default; -$blue: rgb(0, 159, 230); -$blue-l1: tint($blue,20%); -$blue-l2: tint($blue,40%); -$blue-l3: tint($blue,60%); -$blue-l4: tint($blue,80%); -$blue-l5: tint($blue,90%); -$blue-d1: shade($blue,20%); -$blue-d2: shade($blue,40%); -$blue-d3: shade($blue,60%); -$blue-d4: shade($blue,80%); -$blue-s1: saturate($blue,15%); -$blue-s2: saturate($blue,30%); -$blue-s3: saturate($blue,45%); -$blue-u1: desaturate($blue,15%); -$blue-u2: desaturate($blue,30%); -$blue-u3: desaturate($blue,45%); -$blue-t0: rgba($blue, 0.125); -$blue-t1: rgba($blue, 0.25); -$blue-t2: rgba($blue, 0.50); -$blue-t3: rgba($blue, 0.75); +$blue: rgb(0, 159, 230) !default; +$blue-l1: tint($blue,20%) !default; +$blue-l2: tint($blue,40%) !default; +$blue-l3: tint($blue,60%) !default; +$blue-l4: tint($blue,80%) !default; +$blue-l5: tint($blue,90%) !default; +$blue-d1: shade($blue,20%) !default; +$blue-d2: shade($blue,40%) !default; +$blue-d3: shade($blue,60%) !default; +$blue-d4: shade($blue,80%) !default; +$blue-s1: saturate($blue,15%) !default; +$blue-s2: saturate($blue,30%) !default; +$blue-s3: saturate($blue,45%) !default; +$blue-u1: desaturate($blue,15%) !default; +$blue-u2: desaturate($blue,30%) !default; +$blue-u3: desaturate($blue,45%) !default; +$blue-t0: rgba($blue, 0.125) !default; +$blue-t1: rgba($blue, 0.25) !default; +$blue-t2: rgba($blue, 0.50) !default; +$blue-t3: rgba($blue, 0.75) !default; -$pink: rgb(183, 37, 103); // #b72567; -$pink-l1: tint($pink,20%); -$pink-l2: tint($pink,40%); -$pink-l3: tint($pink,60%); -$pink-l4: tint($pink,80%); -$pink-l5: tint($pink,90%); -$pink-d1: shade($pink,20%); -$pink-d2: shade($pink,40%); -$pink-d3: shade($pink,60%); -$pink-d4: shade($pink,80%); -$pink-s1: saturate($pink,15%); -$pink-s2: saturate($pink,30%); -$pink-s3: saturate($pink,45%); -$pink-u1: desaturate($pink,15%); -$pink-u2: desaturate($pink,30%); -$pink-u3: desaturate($pink,45%); +$pink: rgb(183, 37, 103) !default; // #b72567; +$pink-l1: tint($pink,20%) !default; +$pink-l2: tint($pink,40%) !default; +$pink-l3: tint($pink,60%) !default; +$pink-l4: tint($pink,80%) !default; +$pink-l5: tint($pink,90%) !default; +$pink-d1: shade($pink,20%) !default; +$pink-d2: shade($pink,40%) !default; +$pink-d3: shade($pink,60%) !default; +$pink-d4: shade($pink,80%) !default; +$pink-s1: saturate($pink,15%) !default; +$pink-s2: saturate($pink,30%) !default; +$pink-s3: saturate($pink,45%) !default; +$pink-u1: desaturate($pink,15%) !default; +$pink-u2: desaturate($pink,30%) !default; +$pink-u3: desaturate($pink,45%) !default; -$red: rgb(178, 6, 16); // #b20610; -$red-l1: tint($red,20%); -$red-l2: tint($red,40%); -$red-l3: tint($red,60%); -$red-l4: tint($red,80%); -$red-l5: tint($red,90%); -$red-d1: shade($red,20%); -$red-d2: shade($red,40%); -$red-d3: shade($red,60%); -$red-d4: shade($red,80%); -$red-s1: saturate($red,15%); -$red-s2: saturate($red,30%); -$red-s3: saturate($red,45%); -$red-u1: desaturate($red,15%); -$red-u2: desaturate($red,30%); -$red-u3: desaturate($red,45%); +$red: rgb(178, 6, 16) !default; // #b20610; +$red-l1: tint($red,20%) !default; +$red-l2: tint($red,40%) !default; +$red-l3: tint($red,60%) !default; +$red-l4: tint($red,80%) !default; +$red-l5: tint($red,90%) !default; +$red-d1: shade($red,20%) !default; +$red-d2: shade($red,40%) !default; +$red-d3: shade($red,60%) !default; +$red-d4: shade($red,80%) !default; +$red-s1: saturate($red,15%) !default; +$red-s2: saturate($red,30%) !default; +$red-s3: saturate($red,45%) !default; +$red-u1: desaturate($red,15%) !default; +$red-u2: desaturate($red,30%) !default; +$red-u3: desaturate($red,45%) !default; -$green: rgb(37, 184, 90); // #25b85a -$green-l1: tint($green,20%); -$green-l2: tint($green,40%); -$green-l3: tint($green,60%); -$green-l4: tint($green,80%); -$green-l5: tint($green,90%); -$green-d1: shade($green,20%); -$green-d2: shade($green,40%); -$green-d3: shade($green,60%); -$green-d4: shade($green,80%); -$green-s1: saturate($green,15%); -$green-s2: saturate($green,30%); -$green-s3: saturate($green,45%); -$green-u1: desaturate($green,15%); -$green-u2: desaturate($green,30%); -$green-u3: desaturate($green,45%); +$green: rgb(37, 184, 90) !default; // #25b85a +$green-l1: tint($green,20%) !default; +$green-l2: tint($green,40%) !default; +$green-l3: tint($green,60%) !default; +$green-l4: tint($green,80%) !default; +$green-l5: tint($green,90%) !default; +$green-d1: shade($green,20%) !default; +$green-d2: shade($green,40%) !default; +$green-d3: shade($green,60%) !default; +$green-d4: shade($green,80%) !default; +$green-s1: saturate($green,15%) !default; +$green-s2: saturate($green,30%) !default; +$green-s3: saturate($green,45%) !default; +$green-u1: desaturate($green,15%) !default; +$green-u2: desaturate($green,30%) !default; +$green-u3: desaturate($green,45%) !default; -$yellow: rgb(237, 189, 60); -$yellow-l1: tint($yellow,20%); -$yellow-l2: tint($yellow,40%); -$yellow-l3: tint($yellow,60%); -$yellow-l4: tint($yellow,80%); -$yellow-l5: tint($yellow,90%); -$yellow-d1: shade($yellow,20%); -$yellow-d2: shade($yellow,40%); -$yellow-d3: shade($yellow,60%); -$yellow-d4: shade($yellow,80%); -$yellow-s1: saturate($yellow,15%); -$yellow-s2: saturate($yellow,30%); -$yellow-s3: saturate($yellow,45%); -$yellow-u1: desaturate($yellow,15%); -$yellow-u2: desaturate($yellow,30%); -$yellow-u3: desaturate($yellow,45%); +$yellow: rgb(237, 189, 60) !default; +$yellow-l1: tint($yellow,20%) !default; +$yellow-l2: tint($yellow,40%) !default; +$yellow-l3: tint($yellow,60%) !default; +$yellow-l4: tint($yellow,80%) !default; +$yellow-l5: tint($yellow,90%) !default; +$yellow-d1: shade($yellow,20%) !default; +$yellow-d2: shade($yellow,40%) !default; +$yellow-d3: shade($yellow,60%) !default; +$yellow-d4: shade($yellow,80%) !default; +$yellow-s1: saturate($yellow,15%) !default; +$yellow-s2: saturate($yellow,30%) !default; +$yellow-s3: saturate($yellow,45%) !default; +$yellow-u1: desaturate($yellow,15%) !default; +$yellow-u2: desaturate($yellow,30%) !default; +$yellow-u3: desaturate($yellow,45%) !default; -$orange: rgb(237, 189, 60); -$orange-l1: tint($orange,20%); -$orange-l2: tint($orange,40%); -$orange-l3: tint($orange,60%); -$orange-l4: tint($orange,80%); -$orange-l5: tint($orange,90%); -$orange-d1: shade($orange,20%); -$orange-d2: shade($orange,40%); -$orange-d3: shade($orange,60%); -$orange-d4: shade($orange,80%); -$orange-s1: saturate($orange,15%); -$orange-s2: saturate($orange,30%); -$orange-s3: saturate($orange,45%); -$orange-u1: desaturate($orange,15%); -$orange-u2: desaturate($orange,30%); -$orange-u3: desaturate($orange,45%); +$orange: rgb(237, 189, 60) !default; +$orange-l1: tint($orange,20%) !default; +$orange-l2: tint($orange,40%) !default; +$orange-l3: tint($orange,60%) !default; +$orange-l4: tint($orange,80%) !default; +$orange-l5: tint($orange,90%) !default; +$orange-d1: shade($orange,20%) !default; +$orange-d2: shade($orange,40%) !default; +$orange-d3: shade($orange,60%) !default; +$orange-d4: shade($orange,80%) !default; +$orange-s1: saturate($orange,15%) !default; +$orange-s2: saturate($orange,30%) !default; +$orange-s3: saturate($orange,45%) !default; +$orange-u1: desaturate($orange,15%) !default; +$orange-u2: desaturate($orange,30%) !default; +$orange-u3: desaturate($orange,45%) !default; // +Colors - Shadows // ==================== -$shadow: rgba($black, 0.2); -$shadow-l1: rgba($black, 0.1); -$shadow-l2: rgba($black, 0.05); -$shadow-d1: rgba($black, 0.4); -$shadow-d2: rgba($black, 0.6); +$shadow: rgba($black, 0.2) !default; +$shadow-l1: rgba($black, 0.1) !default; +$shadow-l2: rgba($black, 0.05) !default; +$shadow-d1: rgba($black, 0.4) !default; +$shadow-d2: rgba($black, 0.6) !default; // +Colors - Application // ==================== -$color-draft: $gray-l3; -$color-live: $blue; -$color-ready: $green; -$color-warning: $orange-l2; -$color-error: $red-l2; -$color-staff-only: $black; -$color-gated: $black; -$color-visibility-set: $black; +$color-draft: $gray-l3 !default; +$color-live: $blue !default; +$color-ready: $green !default; +$color-warning: $orange-l2 !default; +$color-error: $red-l2 !default; +$color-staff-only: $black !default; +$color-gated: $black !default; +$color-visibility-set: $black !default; -$color-heading-base: $gray-d2; -$color-copy-base: $gray-l1; -$color-copy-emphasized: $gray-d2; +$color-heading-base: $gray-d2 !default; +$color-copy-base: $gray-l1 !default; +$color-copy-emphasized: $gray-d2 !default; // +Timing // ==================== @@ -235,46 +235,46 @@ $tmg-f3: 0.125s; // +Archetype UI // ==================== -$ui-action-primary-color: $blue-u2; -$ui-action-primary-color-focus: $blue-s1; +$ui-action-primary-color: $blue-u2 !default; +$ui-action-primary-color-focus: $blue-s1 !default; -$ui-link-color: $blue-u2; -$ui-link-color-focus: $blue-s1; +$ui-link-color: $blue-u2 !default; +$ui-link-color-focus: $blue-s1 !default; // +Specific UI // ==================== $ui-notification-height: ($baseline*10); -$ui-update-color: $blue-l4; +$ui-update-color: $blue-l4 !default; // +Deprecated // ==================== // do not use, future clean up will use updated styles -$baseFontColor: $gray-d2; -$lighter-base-font-color: rgb(100,100,100); -$offBlack: #3c3c3c; -$green: #108614; -$lightGrey: #edf1f5; -$mediumGrey: #b0b6c2; -$darkGrey: #8891a1; -$extraDarkGrey: #3d4043; -$paleYellow: #fffcf1; -$yellow: rgb(255, 254, 223); -$green: rgb(37, 184, 90); -$brightGreen: rgb(22, 202, 87); -$disabledGreen: rgb(124, 206, 153); -$darkGreen: rgb(52, 133, 76); -$lightBluishGrey: rgb(197, 207, 223); -$lightBluishGrey2: rgb(213, 220, 228); -$error-red: rgb(253, 87, 87); +$baseFontColor: $gray-d2 !default; +$lighter-base-font-color: rgb(100,100,100) !default; +$offBlack: #3c3c3c !default; +$green: #108614 !default; +$lightGrey: #edf1f5 !default; +$mediumGrey: #b0b6c2 !default; +$darkGrey: #8891a1 !default; +$extraDarkGrey: #3d4043 !default; +$paleYellow: #fffcf1 !default; +$yellow: rgb(255, 254, 223) !default; +$green: rgb(37, 184, 90) !default; +$brightGreen: rgb(22, 202, 87) !default; +$disabledGreen: rgb(124, 206, 153) !default; +$darkGreen: rgb(52, 133, 76) !default; +$lightBluishGrey: rgb(197, 207, 223) !default; +$lightBluishGrey2: rgb(213, 220, 228) !default; +$error-red: rgb(253, 87, 87) !default; //carryover from LMS for xmodules -$sidebar-color: rgb(246, 246, 246); +$sidebar-color: rgb(246, 246, 246) !default; // type $sans-serif: $f-sans-serif; $body-line-height: golden-ratio(.875em, 1); // carried over from LMS for xmodules -$action-primary-active-bg: #1AA1DE; // $m-blue -$very-light-text: $white; +$action-primary-active-bg: #1AA1DE !default; // $m-blue +$very-light-text: $white !default;