Merge pull request #21 from pressbooks/simplify-colors

Simplify colors (fix #16)

app/admin.php

@@ -21,73 +21,25 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
             'slug' => 'primary',
             'hex' => '#b01109',
             'label' => __('Primary Color', 'aldine'),
-            'description' => __('Used for primary elements.', 'aldine'),
+            'description' => __('Primary color, used for links and other primary elements.', 'aldine'),
         ],
         [
             'slug' => 'accent',
             'hex' => '#015d75',
             'label' => __('Accent Color', 'aldine'),
-            'description' => __('Used for accents.', 'aldine'),
+            'description' => __('Accent color, used for flourishes and secondary elements.', 'aldine'),
         ],
         [
-            'slug' => 'link',
-            'hex' => '#b01109',
-            'label' => __('Link Color', 'aldine'),
-            'description' => __('Used for links.', 'aldine'),
-        ],
-        [
-            'slug' => 'header_link',
-            'hex' => '#b01109',
-            'label' => __('Header Link Color', 'aldine'),
-            'description' => __('Used for links in the header.', 'aldine'),
-        ],
-        [
-            'slug' => 'block_border',
-            'hex' => '#b01109',
-            'label' => __('Block Border Color', 'aldine'),
-            'description' => __('Used for home button block border.', 'aldine'),
-        ],
-        [
-            'slug' => 'fg',
-            'hex' => '#ffffff',
-            'label' => __('Foreground Color', 'aldine'),
-            'description' => __('Used for the foreground text of colored blocks.', 'aldine'),
-        ],
-        [
-            'slug' => 'bg',
-            'hex' => '#015d75',
-            'label' => __('Background Color', 'aldine'),
-            'description' => __('Used for the background of colored blocks.', 'aldine'),
-        ],
-        [
-            'slug' => 'btn_text',
+            'slug' => 'primary_fg',
             'hex' => '#ffffff',
-            'label' => __('Button Text Color', 'aldine'),
-            'description' => __('Used for the foreground text of buttons.', 'aldine'),
-        ],
-        [
-            'slug' => 'btn_active_text',
-            'hex' => '#b01109',
-            'label' => __('Button Active Text Color', 'aldine'),
-            'description' => __('Used for the foreground text of active buttons.', 'aldine'),
-        ],
-        [
-            'slug' => 'btn_bg',
-            'hex' => '#b01109',
-            'label' => __('Button Background Color', 'aldine'),
-            'description' => __('Used for the background of buttons.', 'aldine'),
-        ],
-        [
-            'slug' => 'btn_inverse_text',
-            'hex' => '#b01109',
-            'label' => __('Inverse Button Text Color', 'aldine'),
-            'description' => __('Used for the foreground text of buttons.', 'aldine'),
+            'label' => __('Primary Foreground Color', 'aldine'),
+            'description' => __('Used for text on a primary background.', 'aldine'),
         ],
         [
-            'slug' => 'btn_inverse_active_text',
+            'slug' => 'accent_fg',
             'hex' => '#ffffff',
-            'label' => __('Inverse Button Active Text Color', 'aldine'),
-            'description' => __('Used for the background of buttons.', 'aldine'),
+            'label' => __('Accent Foreground Color', 'aldine'),
+            'description' => __('Used for text on an accent color background.', 'aldine'),
         ],
     ] as $color) {
         $wp_customize->add_setting("pb_network_color_{$color['slug']}", [

app/setup.php

@@ -169,18 +169,10 @@ add_action('after_setup_theme', function () {
 add_action('wp_head', function () {
     $primary = get_option('pb_network_color_primary');
     $accent = get_option('pb_network_color_accent');
-    $link = get_option('pb_network_color_link');
-    $header_link = get_option('pb_network_color_header_link');
-    $fg = get_option('pb_network_color_fg');
-    $bg = get_option('pb_network_color_bg');
-    $btn_text = get_option('pb_network_color_btn_text');
-    $btn_active_text = get_option('pb_network_color_btn_active_text');
-    $btn_bg = get_option('pb_network_color_btn_bg');
-    $btn_inverse_text = get_option('pb_network_color_btn_inverse_text');
-    $btn_inverse_active_text = get_option('pb_network_color_btn_inverse_active_text');
-    $block_border = get_option('pb_network_color_block_border');
+    $primary_fg = get_option('pb_network_color_primary_fg');
+    $accent_fg = get_option('pb_network_color_accent_fg');
     $header_text = get_header_textcolor();
-    if ($primary || $accent || $header_text) { ?>
+    if ($primary || $accent || $primary_fg || $accent_fg || $header_text) { ?>
 <style type="text/css">:root {
 <?php if ($primary) { ?>
 --primary: <?= $primary ?>;
@@ -188,38 +180,14 @@ add_action('wp_head', function () {
 if ($accent) { ?>
 --accent: <?= $accent ?>;
 <?php }
-if ($link) { ?>
---link: <?= $link ?>;
+if ($primary_fg) { ?>
+--primary-fg: <?= $primary_fg ?>;
+<?php }
+if ($accent_fg) { ?>
+--accent-fg: <?= $accent_fg ?>;
 <?php }
 if ($header_text) { ?>
 --header-text: <?= $header_text ?>;
-<?php }
-if ($fg) { ?>
---fg: <?= $fg ?>;
-<?php }
-if ($bg) { ?>
---bg: <?= $bg ?>;
-<?php }
-if ($btn_text) { ?>
---btn-text: <?= $btn_text ?>;
-<?php }
-if ($btn_active_text) { ?>
---btn-active-text: <?= $btn_active_text ?>;
-<?php }
-if ($btn_bg) { ?>
---btn-bg: <?= $btn_bg ?>;
-<?php }
-if ($btn_inverse_text) { ?>
---btn-inverse-text: <?= $btn_inverse_text ?>;
-<?php }
-if ($btn_inverse_active_text) { ?>
---btn-inverse-active-text: <?= $btn_inverse_active_text ?>;
-<?php }
-if ($header_link) { ?>
---header-link: <?= $header_link ?>;
-<?php }
-if ($block_border) { ?>
---block-border: <?= $block_border ?>;
 <?php } ?>
 }</style>
     <?php }

resources/assets/styles/common/_global.scss

@@ -48,21 +48,13 @@ h2 {
 :root {
   --primary: $brand-primary;
   --accent: $brand-accent;
-  --link: $brand-primary;
+  --primary-fg: $white;
+  --secondary-fg: $white;
   --header-text: $black;
-  --header-link: $brand-primary;
-  --fg: $white;
-  --bg: $brand-accent;
-  --block-border: $brand-primary;
-  --btn-text: $white;
-  --btn-active-text: $brand-primary;
-  --btn-bg: $brand-primary;
-  --btn-inverse-text: $brand-primary;
-  --btn-inverse-active-text: $white;
 }
 
 a {
-  color: var(--link, $brand-primary);
+  color: var(--primary, $brand-primary);
   text-decoration: none;
 }
 

resources/assets/styles/components/_buttons.scss

@@ -3,13 +3,13 @@
   width: rem(250);
   height: rem(60);
   padding: rem(19);
-  border: 2px solid var(--btn-bg, $brand-primary);
+  border: 2px solid var(--primary, $brand-primary);
   border-radius: 3px;
-  background: var(--btn-bg, $brand-primary);
+  background: var(--primary, $brand-primary);
   font-family: $font-family-sans-serif;
   font-size: 1rem;
   font-weight: 600;
-  color: var(--btn-text, $white);
+  color: var(--primary-fg, $white);
   line-height: normal;
   letter-spacing: rem(2);
   text-align: center;
@@ -21,7 +21,7 @@
   &:hover,
   &:focus {
     background: $white;
-    color: var(--btn-active-text, $brand-primary);
+    color: var(--primary, $brand-primary);
   }
 
   &.button-small {
@@ -36,12 +36,12 @@
 
   &.button-inverse {
     background: $white;
-    color: var(--btn-inverse-text, $brand-primary);
+    color: var(--primary, $brand-primary);
 
     &:hover,
     &:focus {
-      color: var(--btn-inverse-active-text, $white);
-      background: var(--btn-bg, $brand-primary);
+      color: var(--primary-fg, $white);
+      background: var(--primary, $brand-primary);
     }
   }
 }

resources/assets/styles/layouts/_footer.scss

@@ -4,8 +4,8 @@
     padding: 60px 42.5px 40px;
     font-family: $font-family-sans-serif;
     font-size: rem(16);
-    color: var(--fg, $white);
-    background: var(--bg, $brand-accent);
+    color: var(--accent-fg, $white);
+    background: var(--accent, $brand-accent);
 
     ul {
       margin: 0;
@@ -17,13 +17,13 @@
     }
 
     a {
-      color: var(--fg, $white);
+      color: var(--accent-fg, $white);
       text-decoration: none;
       border-bottom: solid 1px transparent;
 
       &:hover,
       &:focus {
-        border-bottom: solid 1px var(--fg, $white);
+        border-bottom: solid 1px var(--accent-fg, $white);
       }
     }
 
@@ -36,7 +36,7 @@
     }
 
     .network-footer-block {
-      border-top: solid 1px var(--fg, $white);
+      border-top: solid 1px var(--accent-fg, $white);
     }
 
     .network-footer-block-1 {

resources/assets/styles/layouts/_header.scss

@@ -16,14 +16,14 @@
       top: 7px;
       width: 25px;
       height: 3px;
-      background: var(--link, $brand-primary);
+      background: var(--primary, $brand-primary);
 
       &::before,
       &::after {
         width: 25px;
         height: 3px;
         content: '';
-        background: var(--link, $brand-primary);
+        background: var(--primary, $brand-primary);
       }
 
       &::before {
@@ -41,11 +41,11 @@
 
     &.is-active .icon {
       // TODO
-      background: var(--fg, $white);
+      background: var(--primary-fg, $white);
 
       &::before,
       &::after {
-        background: var(--fg, $white);
+        background: var(--primary-fg, $white);
       }
     }
   }
@@ -73,7 +73,7 @@
       font-family: $font-family-sans-serif;
       font-size: rem(24);
       line-height: (80/24);
-      color: var(--fg, $white);
+      color: var(--primary-fg, $white);
       letter-spacing: 0;
     }
 
@@ -85,12 +85,12 @@
       margin: 0;
       padding: 0 52px;
       z-index: 1;
-      background: var(--bg, $brand-primary);
+      background: var(--primary, $brand-primary);
 
       a {
         display: block;
         width: 100%;
-        border-bottom: solid 1px var(--fg, $white);
+        border-bottom: solid 1px var(--primary-fg, $white);
 
         &:last-child {
           border-bottom: 0;
@@ -139,7 +139,7 @@
 
         &:hover,
         &:focus {
-          color: var(--header-link, $brand-primary);
+          color: var(--primary, $brand-primary);
         }
 
         &:nth-child(1) {

resources/assets/styles/layouts/pages/_catalog.scss

@@ -55,12 +55,12 @@
       &:hover,
       &:focus {
         background: #fafdff;
-        color: var(--link, $brand-primary);
+        color: var(--primary, $brand-primary);
       }
     }
 
     .has-active-child > a {
-      color: var(--link, $brand-primary);
+      color: var(--primary, $brand-primary);
     }
 
     ul {
@@ -93,7 +93,7 @@
 
         a.is-active {
           font-weight: 600;
-          color: var(--link, $brand-primary);
+          color: var(--primary, $brand-primary);
 
           .close {
             opacity: 1;
@@ -105,7 +105,7 @@
 
   .arrow {
     path {
-      fill: var(--link, $brand-primary);
+      fill: var(--primary, $brand-primary);
     }
   }
 
@@ -183,8 +183,8 @@
     height: rem(230);
     float: left;
     padding: 1.5rem rem(8) rem(26);
-    border: solid 2px var(--bg, $brand-accent);
-    background: var(--bg, $brand-accent);
+    border: solid 2px var(--accent, $brand-accent);
+    background: var(--accent, $brand-accent);
 
     p {
       margin: 0;
@@ -192,7 +192,7 @@
 
     a {
       font-family: $font-family-sans-serif;
-      color: $white;
+      color: var(--accent-fg, $white);
       text-decoration: none;
     }
 
@@ -217,6 +217,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
+    width: 100%;
     margin-top: rem(83);
     align-items: baseline;
     font-family: $font-family-sans-serif;
@@ -226,7 +227,7 @@
 
       &:hover,
       &:focus {
-        color: var(--link, $brand-primary);
+        color: var(--primary, $brand-primary);
       }
     }
 
@@ -234,7 +235,7 @@
     .next {
       display: block;
       margin: 0 rem(26);
-      font-family: Karla-Regular;
+      font-family: $font-family-sans-serif;
       font-size: rem(16);
 
       svg {
@@ -243,7 +244,7 @@
         margin: 0 rem(6);
 
         path {
-          fill: var(--link, $brand-primary);
+          fill: var(--primary, $brand-primary);
         }
       }
     }
@@ -425,12 +426,12 @@
           margin-top: rem(60);
 
           > a {
-            background: var(--link, $brand-primary);
-            color: $white;
+            background: var(--primary, $brand-primary);
+            color: var(--primary-fg, $white);
 
             .arrow {
               path {
-                fill: $white;
+                fill: var(--primary-fg, $white);
               }
             }
           }

resources/assets/styles/layouts/pages/_front-page.scss

@@ -29,26 +29,26 @@
 
   .blocks.blocks-4 {
     .widget_text:nth-child(2) {
-      color: var(--fg, $white);
-      background: var(--bg, $brand-accent);
+      color: var(--accent-fg, $white);
+      background: var(--accent, $brand-accent);
 
       h3 {
-        color: var(--fg, $white);
+        color: var(--accent-fg, $white);
 
         &::before {
-          background: var(--fg, $white);
+          background: var(--accent-fg, $white);
         }
       }
 
       .button {
-        color: var(--fg, $white);
-        border-color: var(--fg, $white);
+        color: var(--accent-fg, $white);
+        border-color: var(--accent-fg, $white);
         background: transparent;
 
         &:hover,
         &:focus {
-          color: var(--bg, $brand-accent);
-          background: var(--fg, $white);
+          color: var(--accent, $brand-accent);
+          background: var(--accent-fg, $white);
         }
       }
     }
@@ -57,7 +57,7 @@
       margin-top: 2rem;
       margin-right: 0.5rem;
       margin-left: 0.5rem;
-      border: solid 2px var(--block-border, $brand-primary);
+      border: solid 2px var(--primary, $brand-primary);
       box-shadow: unset;
     }
   }
@@ -140,12 +140,12 @@
       height: 24.125rem;
       margin: 0 0 2rem;
       padding: 1.5rem 1.85rem 2.1875rem;
-      border: solid 2px var(--bg, $brand-accent);
-      background: var(--bg, $brand-accent);
+      border: solid 2px var(--accent, $brand-accent);
+      background: var(--accent, $brand-accent);
 
       a {
         font-family: $font-family-sans-serif;
-        color: $white;
+        color: var(--accent-fg, $white);
         text-decoration: none;
       }