//- See this proposal for more info: https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/

//- Please keep the following variables in sync with the scss color map
- var grayColors = {"Gray 0": "#f6f7f7", "Gray 2":"#f0f0f1", "Gray 5": "#dcdcde", "Gray 10": "#c3c4c7", "Gray 20": "#a7aaad", "Gray 30": "#8c8f94", "Gray 40": "#787c82", "Gray 50": "#646970", "Gray 60": "#50575e", "Gray 70": "#3c434a", "Gray 80": "#2c3338", "Gray 90": "#1d2327", "Gray 100": "#101517"}

- var blueColors = {"Blue 0": "#f0f6fc", "Blue 5": "#c5d9ed", "Blue 10": "#9ec2e6", "Blue 20": "#72aee6", "Blue 30": "#4f94d4", "Blue 40": "#3582c4", "Blue 50": "#2271b1", "Blue 60": "#135e96", "Blue 70": "#0a4b78", "Blue 80": "#043959", "Blue 90": "#01263a", "Blue 100": "#00131c" }

- var redColors = {"Red 0": "#fcf0f1", "Red 5": "#facfd2", "Red 10": "#ffabaf", "Red 20": "#ff8085", "Red 30": "#f86368", "Red 40": "#e65054", "Red 50": "#d63638", "Red 60": "#b32d2e", "Red 70": "#8a2424", "Red 80": "#691c1c", "Red 90": "#451313", "Red 100": "#240a0a"}

- var yellowColors = {"Yellow 0": "#fcf9e8", "Yellow 5": "#f5e6ab", "Yellow 10": "#f2d675", "Yellow 20": "#f0c33c", "Yellow 30": "#dba617", "Yellow 40": "#bd8600", "Yellow 50": "#996800", "Yellow 60": "#755100", "Yellow 70": "#614200", "Yellow 80": "#4a3200", "Yellow 90": "#362400", "Yellow 100": "#211600"}

- var greenColors = {"Green 0": "#edfaef", "Green 5": "#b8e6bf", "Green 10": "#68de7c", "Green 20": "#1ed14b", "Green 30": "#00ba37", "Green 40": "#00a32a", "Green 50": "#008a20", "Green 60": "#007017", "Green 70": "#005c12", "Green 80": "#00450c", "Green 90": "#003008", "Green 100": "#001c05"}
      
mixin colorTile(color, hex)
  //- Convert color name to a class format
  - var colorClass = color.toLowerCase().replace(/[\s]/gi, '-')
  //- Generate tile markup
  div(class=["background-" + colorClass, "color-tile"])
    .name #{color}
    .value-code #{hex}
    
//- Start document markup
header.site-header
  h1 WordPress Color Palette

.colors-wrapper.wrapper
  section.color-group-blue
    each hex, color in blueColors
     +colorTile(color, hex)
  
  section.color-group-gray
    each hex, color in grayColors
      +colorTile(color, hex)
      
  section.color-group-red
    each hex, color in redColors
      +colorTile(color, hex)
      
  section.color-group-yellow
    each hex, color in yellowColors
      +colorTile(color, hex)
      
  section.color-group-green
    each hex, color in greenColors
      +colorTile(color, hex)
      
      
//- mixin color-section(color, hex)
//-   section(class=["colors-" + color , "color-group"])
//-     div(class=["background-" + color + "-50" , "color", "value"])
//-       .name #{color} 50
//-       .value-code #{hex}

//- mixin color-section2(color, hex)
//-   each val, index in {1:'one',2:'two',3:'three'}
//-     section(class=["colors-" + color , "color-group"])
//-       div(class=["background-" + color + "-50" , "color", "value"])
//-         .name #{color} 50
//-         .value-code #{hex}
View Compiled
//Colors

$color-white: #fff;
$color-black: #000;

$color-text-subtle: color(gray-50);

// Color map of all of the hex values.
// Please keep this map in sync with the HTML
$colors: (
  white: #fff,
  black: #000,
  gray-0: #f6f7f7,
  gray-2: #f0f0f1,
  gray-5: #dcdcde,
  gray-10: #c3c4c7,
  gray-20: #a7aaad,
  gray-30: #8c8f94,
  gray-40: #787c82,
  gray-50: #646970,
  gray-60: #50575e,
  gray-70: #3c434a,
  gray-80: #2c3338,
  gray-90: #1d2327,
  gray-100: #101517,
  blue-0: #f0f6fc,
  blue-5: #c5d9ed,
  blue-10: #9ec2e6,
  blue-20: #72aee6,
  blue-30: #4f94d4,
  blue-40: #3582c4,
  blue-50: #2271b1,
  blue-60: #135e96,
  blue-70: #0a4b78,
  blue-80: #043959,
  blue-90: #01263a,
  blue-100: #00131c,
  red-0: #fcf0f1,
  red-5: #facfd2,
  red-10: #ffabaf,
  red-20: #ff8085,
  red-30: #f86368,
  red-40: #e65054,
  red-50: #d63638,
  red-60: #b32d2e,
  red-70: #8a2424,
  red-80: #691c1c,
  red-90: #451313,
  red-100: #240a0a,
  yellow-0: #fcf9e8,
  yellow-5: #f5e6ab,
  yellow-10: #f2d675,
  yellow-20: #f0c33c,
  yellow-30: #dba617,
  yellow-40: #bd8600,
  yellow-50: #996800,
  yellow-60: #755100,
  yellow-70: #614200,
  yellow-80: #4a3200,
  yellow-90: #362400,
  yellow-100: #211600,
  green-0: #edfaef,
  green-5: #b8e6bf,
  green-10: #68de7c,
  green-20: #1ed14b,
  green-30: #00ba37,
  green-40: #00a32a,
  green-50: #008a20,
  green-60: #007017,
  green-70: #005c12,
  green-80: #00450c,
  green-90: #003008,
  green-100: #001c05
);

// Simple function to retreive colors in the $colors map.
// e.g. `background-color: color(gray-50);`

@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}

// Generate utility classes
// e.g. `.color-gray-50` or `.background-gray-50`

@mixin color-utilities($property: "color") {
  @each $name, $hex in $colors {
    &-#{$name} {
      #{$property}: $hex;
    }
  }
}

.color {
  @include color-utilities(); // e.g. `.color-gray-50`
}

.background {
  @include color-utilities(background); // e.g.  `.background-gray-50`
}

.colors-wrapper {
  display: block;
  line-height: 1.5;
  padding: 0 1rem 1rem;

  // Use dark text for light colors
  [class*="background-blue"] {
    color: color(blue-100);
  }
  
  [class*="background-gray"] {
    color: color(gray-100);
  }
  
  [class*="background-red"] {
    color: color(red-100);
  }
  
  [class*="background-yellow"] {
    color: color(yellow-100);
  }
  
  [class*="background-green"] {
    color: color(green-100);
  }

  // Use light text for dark colors
  [class*="-50"],
  [class*="60"],
  [class*="-70"],
  [class*="-80"],
  [class*="-90"],
  [class*="-100"] {
    color: rgba(white, 1);
  }

  [class^="color-group"] {
    display: flex;
    margin-bottom: 0.25rem;
  }
} //end color-wrapper

.color-tile {
  flex: 1;
  padding: 1rem 1rem 5rem;
  line-height: 1.25;
  font-size: 14px;
  overflow: hidden;

  .name {
    margin-bottom: 0.25rem;
    text-transform: capitalize;
    font-weight: 700;
  }
  
  .value-code {
    margin-bottom: 0.25rem;
  }
  
  &[class*="-50"] {
    // flex: 2.5;
  }
  
  // Hide all names and hex codes that aren't 50 color tiles
  @media only screen and (max-width: 1600px) {
    // flex: unset;
    // flex: 0 1 auto;
    
    
    &:not([class*="-50"]) {
      // .value-code,
      // .name {
      //   display: none;
      // }
    }
  }
}

@media only screen and (max-width: 1100px) {
  .color-tile {
    font-size: 12px;
    padding: 0.5rem 0.5rem 3rem;
  }
}

@media only screen and (max-width: 800px) {
  [class^="color-group"] {
    flex-direction: column;
  }
  
  .color-tile {
    font-size: 14px;
  }
}



// Misc CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 16px;
  color: color(gray-50);
}

a {
  color: color(gray-50);
  
  &:hover {
    color: color(gray-80);
  }
}

p {
  max-width: 32em;
}

.site-header {
  padding: 3rem 4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid color(gray-5);
  
  h1, p {
    margin: 0;
  }
  
  h1 {
    color: color(blue-50);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.