Skip to content
Permalink
Browse files

Made stylelint throw errors if custom colours are found (#3090)

* made stylelint throw errors if custom colours are found

* don't allow HTML named colours

* Revert "don't allow HTML named colours"

This reverts commit 149d144.

* optimized stylelint rules

* removed commented out code

* updated inline comments

* split _variables.scss into 2 files

* fixed linting error and inline comment

* reorganized SCSS variables again

* renamed file again

* simplified regex

* dont allow any color names at all
  • Loading branch information...
mmmavis committed May 9, 2019
1 parent ea9f2e4 commit a60daa91cfd956b5b341fcd199f597b017037351
@@ -0,0 +1,22 @@
var config = {
"plugins": ["stylelint-prettier"],
"rules": {
"color-named": "never",
"color-no-hex": true,
"declaration-property-value-blacklist": [
{
"/.*/": [
/rgba{0,1}\(/i,
/hsla{0,1}\(/i,
/hwb\(/i,
/gray\(/i
]
},
{
"message": "Custom colors are not allowed. Please use brand colors listed in _colors.scss."
}
]
}
};

module.exports = config;
@@ -30,6 +30,7 @@
"test:procfile": "node test/test-procfile.js",
"test:eslint": "eslint --config ./.eslintrc.json \"cypress/integration/*.js\" \"network-api/networkapi/{,!(frontend)/**/}*.js\" \"source/js/**/*.js\" \"source/js/**/*.jsx\" webpack.config.js",
"test:scss": "stylelint \"source/sass/**/*.scss\" \"source/js/**/*.scss\" --syntax scss",
"test:scss:styleguide:color": "stylelint \"source/sass/**/*.scss\" \"source/js/**/*.scss\" \"!source/sass/**/_colors.scss\" --syntax scss --config .stylelintrc-colors.js",
"test:css": "stylelint \"network-api/networkapi/{,!(frontend)/**/}*.css\" --syntax scss",
"test": "run-s test:** build",
"watch": "npm run build && run-p watch:**",
@@ -83,9 +83,9 @@ $btn-shadow-width: 3px;
}

.btn {
border: 1px solid black;
border: 1px solid $black;
border-bottom-width: $btn-shadow-width;
color: black;
color: $black;
text-transform: initial;
transition: all 0.1s linear;
width: 100%;
@@ -53,7 +53,7 @@

&::after {
content: " ";
background: white;
background: $white;
border-radius: 20px;
box-shadow: 2px 2px 3px $gray-80;
display: inline-block;
@@ -45,7 +45,7 @@
display: flex;
align-items: center;
justify-content: center;
background: white;
background: $white;

@media (min-width: $bp-cs) {
position: absolute;
@@ -141,12 +141,12 @@
width: 2px;
height: 2px;
border-radius: 1000px;
background: white;
box-shadow: 0 0 0 9px white, 0 0 0 10px $option-color;
background: $white;
box-shadow: 0 0 0 9px $white, 0 0 0 10px $option-color;
margin: 10px;

&.selected {
box-shadow: 0 0 0 6px $option-color, 0 0 0 9px white,
box-shadow: 0 0 0 6px $option-color, 0 0 0 9px $white,
0 0 0 10px $option-color;
background: $option-color;
}
@@ -253,8 +253,8 @@
height: 1.5em;
top: -0.7em;
left: 50%;
color: black;
background: white;
color: $black;
background: $white;
border: 1px solid $gray-20;
border-radius: 2em;
box-shadow: 2px 2px 3px 0 $gray-80;
@@ -57,7 +57,7 @@
top: 0;
left: 0;
width: 100vw;
background: white;
background: $white;
transition: opacity 0.2s, height 0s;

&:not(.menu-open) {
@@ -71,12 +71,12 @@
.social-button {
width: auto;
height: auto;
border-bottom: 1px solid white;
border-bottom: 1px solid $white;
margin: 0;
padding: 1rem 1rem 1rem 4rem;
background-color: $gray-05;
background-position: 20px center;
color: black;
color: $black;
font-weight: 300;

@include hover-focus-active {
@@ -98,20 +98,20 @@
}

.donate {
background: black;
background: $black;
padding-top: 3rem;
padding-bottom: 3rem;

h3,
p {
color: white;
color: $white;
font-weight: 300;
}
}
}

.narrow-screen-menu-background {
background: white;
background: $white;
height: 100%;
}

@@ -123,13 +123,13 @@
.btn-donate {
background: $red;
border-radius: 14px;
color: white;
color: $white;
padding: 4px 12px;
font-size: 14px;

@include hover-focus-active {
background: $dark-red;
color: white;
color: $white;
}
}

@@ -5,9 +5,9 @@
.pni-s-link {
$margin-x: 0.5rem;

border: 1px solid black;
border: 1px solid $black;
border-bottom-width: $btn-shadow-width;
color: black;
color: $black;
transition: all 0.1s linear;
border-radius: 2em;
white-space: nowrap;
@@ -45,7 +45,7 @@
}

.col-12 {
border: 2px solid #dedede;
border: 2px solid $gray-20;
}
}

@@ -5,7 +5,7 @@
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.9);
background: transparentize($white, 0.1);

.modal.show {
display: block;
@@ -17,9 +17,9 @@
}

.modal-content {
border: 2px solid black;
border: 2px solid $black;
border-radius: 0;
box-shadow: 4px 4px 0 0 black;
box-shadow: 4px 4px 0 0 $black;
padding: 0 2em 2em;
}

@@ -38,7 +38,7 @@
font-size: 2.5rem;
font-weight: normal;
line-height: 1;
color: black;
color: $black;
text-shadow: 0 1px 0 $white;
opacity: 1;
}
@@ -17,7 +17,7 @@
background: $white;
padding: 15px;
width: 100%;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 3px $border-shadow-color;
border-top: 1px solid $gray-20;
display: block;
position: fixed;
@@ -24,6 +24,6 @@
}

.placeholder {
background: linear-gradient(to right, #ff506f 0%, #a66efd 100%);
background: linear-gradient(to right, $pulse-pink 0%, $pulse-purple 100%);
}
}
@@ -57,7 +57,7 @@
content: " ";
height: $height;
width: 2px;
background-color: white;
background-color: $white;
bottom: 0;
}

@@ -83,7 +83,7 @@
@include scaleText(16px, 20px);

background: $red;
color: white;
color: $white;
padding: 15px 18px;
border-radius: calc((20px + 18px * 2) / 2); // half of button's height

@@ -95,7 +95,7 @@
p,
.h2-heading,
.h5-heading {
color: white;
color: $white;
}

.h2-heading {
@@ -0,0 +1,41 @@
// Note: Only approved brand colors should be added to this file.
// Double check with the design team before you introduce a new variable here.

// Foundation Brand Palatte

$white: #ffffff;
$gray-05: #f2f2f2;
$gray-20: #cccccc;
$gray-40: #999999;
$gray-60: #666666;
$gray-80: #333333;
$black: #000000;

$light-red: #ffe6e8;
$red: #ff4f5e;
$dark-red: #cc0011;

$light-blue: #b7b9fa;
$blue: #595cf3;
$dark-blue: #0d10bf;

// Privacy Not Included (PNI) Palatte

$pni-blue: #1808f2;
$pni-blue-purple: #4a17d4;
$pni-purple: #7f28b7;
$pni-purple-pink: #b0379b;
$pni-pink: #e4487d;
$pni-gradient: linear-gradient(to right, $pni-blue 0%, $pni-pink 100%);

$bg-product-image: #f4f4f4; /* keep this #f4f4f4 as this is the background colour that product images have */

// Pulse Palatte

$pulse-pink: #ff506f;
$pulse-purple: #a66efd;

// Social Media Brand Colours

$fb-blue: #3b5999;
$twitter-blue: #1da1f3;
@@ -1,32 +1,9 @@
// Side-wide Palatte

$gray-05: #f2f2f2;
$gray-20: #cccccc;
$gray-40: #999999;
$gray-60: #666666;
$gray-80: #333333;
$black: #000000;
$white: #ffffff;

$light-red: #ffe6e8;
$red: #ff4f5e;
$dark-red: #cc0011;

$light-blue: #b7b9fa;
$blue: #595cf3;
$dark-blue: #0d10bf;

// Privacy Not Included (PNI) Palatte

$pni-blue: #1808f2;
$pni-blue-purple: #4a17d4;
$pni-purple: #7f28b7;
$pni-purple-pink: #b0379b;
$pni-pink: #e4487d;
$pni-gradient: linear-gradient(to right, $pni-blue 0%, $pni-pink 100%);

$bg-product-image: #f4f4f4; // keep this #f4f4f4 as this is the background colour that product images have
@import "./colors";

// Font weight

$btn-font-weight: 700;

// Shadow

$border-shadow-color: transparentize($black, 0.85);
@@ -1,7 +1,7 @@
$category-nav-border-bottom-thickness: 4px;

.category-nav {
background: white;
background: $white;
overflow-x: auto;
white-space: nowrap;
border-top: 1px solid $gray-20;
@@ -21,14 +21,14 @@ $category-nav-border-bottom-thickness: 4px;
margin-right: 20px;
padding: 10px 0 6px;
text-decoration: none;
border-bottom: $category-nav-border-bottom-thickness solid white;
border-bottom: $category-nav-border-bottom-thickness solid $white;

&:hover {
color: $black;
}

&.active {
border-color: black;
border-color: $black;
}

&.featured[data-name="Valentine's Day"] {
@@ -1,7 +1,7 @@
// product draft rules
.draft-product::before {
content: "This is a draft.";
color: #ffa7a7;
color: $light-red;
font-weight: bold;
font-size: 120%;
font-family: "Zilla Slab";
@@ -64,7 +64,7 @@
bottom: 0;

&:focus {
background: red;
background: $dark-red;
bottom: 100%;

& + h2 {
@@ -276,7 +276,7 @@ $product-detail-padding-x: (
padding: $padding-y 1rem;

&.h5-heading {
color: white;
color: $white;
}

@media (min-width: $bp-md) {
@@ -17,7 +17,7 @@
color: inherit;
color: $black;
text-decoration: none;
border-bottom-color: black;
border-bottom-color: $black;
}

@at-root #multipage-nav-mobile &#{&}.active {

0 comments on commit a60daa9

Please sign in to comment.
You can’t perform that action at this time.