feat: support primary color customization

cft-group · Jan 14, 2021 · df6305a · df6305a
1 parent 672d6f1
commit df6305a
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 64 deletions.
diff --git a/src/common/variables.css b/src/common/variables.css
@@ -29,6 +29,13 @@
   --Footnote: normal normal 500 10px/14px "Inter", sans-serif;
   --Tnum: "tnum" 1;
 
+  /* Colors - Primary Defaults */
+  --Primary: var(--B400);
+  --PrimaryHover: var(--B500);
+  --PrimaryActive: var(--B600);
+  --PrimaryLight: var(--B50);
+  --PrimaryLightHover: var(--B100);
+
   /* Colors - Neutral */
   --N0: #FFFFFF;
   --N10: #F5F5F6;

diff --git a/src/packages/core/src/action/action.css b/src/packages/core/src/action/action.css
@@ -6,28 +6,28 @@
 
   &:hover {
     & ._e_action__icon svg {
-      fill: var(--B500);
+      fill: var(--PrimaryHover);
     }
     & ._e_action__text {
-      color: var(--B500);
+      color: var(--PrimaryHover);
     }
   }
 
   &:focus {
     & ._e_action__icon svg {
-      fill: var(--B500);
+      fill: var(--PrimaryHover);
     }
     & ._e_action__text {
-      color: var(--B500);
+      color: var(--PrimaryHover);
     }
   }
 
   &:active {
     & ._e_action__icon svg {
-      fill: var(--B600);
+      fill: var(--PrimaryActive);
     }
     & ._e_action__text {
-      color: var(--B600);
+      color: var(--PrimaryActive);
     }
   }
 }

diff --git a/src/packages/core/src/breadcrumbs/breadcrumbs.css b/src/packages/core/src/breadcrumbs/breadcrumbs.css
@@ -4,17 +4,17 @@
 
 ._e_breadcrumbs__item {
   font: var(--Body1);
-  color: var(--B400);
+  color: var(--Primary);
   cursor: pointer;
 
   &:hover {
-    color: var(--B500);
+    color: var(--PrimaryHover);
   }
   &:focus {
-    color: var(--B500);
+    color: var(--PrimaryHover);
   }
   &:active {
-    color: var(--B600);
+    color: var(--PrimaryActive);
   }
 
   &::after {

diff --git a/src/packages/core/src/button/button.css b/src/packages/core/src/button/button.css
@@ -7,35 +7,35 @@
   padding: 0 var(--S16);
   font: var(--Subhead);
   background-color: var(--N50);
-  color: var(--B400);
+  color: var(--Primary);
 
   &:hover {
-    background-color: var(--B50);
+    background-color: var(--PrimaryLight);
   }
 
   &:focus {
-    background-color: var(--B50);
+    background-color: var(--PrimaryLight);
   }
 
   &:active {
-    background-color: var(--B100);
+    background-color: var(--PrimaryLightHover);
   }
 }
 
 ._e_button_appearance_primary {
-  background-color: var(--B400);
+  background-color: var(--Primary);
   color: var(--N0);
 
   &:hover {
-    background-color: var(--B500);
+    background-color: var(--PrimaryHover);
   }
 
   &:focus {
-    background-color: var(--B500);
+    background-color: var(--PrimaryHover);
   }
 
   &:active {
-    background-color: var(--B600);
+    background-color: var(--PrimaryActive);
   }
 }
 

diff --git a/src/packages/core/src/chip/chip.css b/src/packages/core/src/chip/chip.css
@@ -16,19 +16,19 @@
   }
 
   &:active {
-    background-color: var(--B50);
+    background-color: var(--PrimaryLight);
   }
 }
 
 ._e_chip_selected {
-  background-color: var(--B50);
+  background-color: var(--PrimaryLight);
 
   &:hover {
-    background-color: var(--B100);
+    background-color: var(--PrimaryLightHover);
   }
 
   &:focus {
-    background-color: var(--B100);
+    background-color: var(--PrimaryLightHover);
   }
 
   &:active {
@@ -40,7 +40,7 @@
   }
 
   & ._e_chip__text {
-    color: var(--B400);
+    color: var(--Primary);
   }
 }
 
@@ -53,7 +53,7 @@
   & svg {
     width: var(--S20);
     height: var(--S20);
-    fill: var(--B400);
+    fill: var(--Primary);
   }
 }
 

diff --git a/src/packages/core/src/datepicker/datepicker.css b/src/packages/core/src/datepicker/datepicker.css
@@ -52,7 +52,7 @@
     background-color: var(--N50);
 
     & svg {
-      fill: var(--B400);
+      fill: var(--Primary);
     }
   }
 }
@@ -104,9 +104,9 @@
 
 ._e_dpcal__date_selected {
   color: var(--N0);
-  background-color: var(--B400);
+  background-color: var(--Primary);
 
   &:hover {
-    background-color: var(--B500);
+    background-color: var(--PrimaryHover);
   }
 }
diff --git a/src/packages/core/src/dropdown/dropdown.css b/src/packages/core/src/dropdown/dropdown.css
@@ -43,10 +43,10 @@
 }
 
 ._e_dropdown__item_selected {
-  background-color: var(--B50);
+  background-color: var(--PrimaryLight);
 
   &:hover {
-    background-color: var(--B100);
+    background-color: var(--PrimaryLightHover);
   }
 
   &::after {
@@ -62,5 +62,5 @@
 }
 
 ._e_dropdown__item_active._e_dropdown__item_selected {
-  background-color: var(--B100);
+  background-color: var(--PrimaryLightHover);
 }
diff --git a/src/packages/core/src/input/input.css b/src/packages/core/src/input/input.css
@@ -6,7 +6,7 @@
 
 ._e_input_focused {
   & ._e_input__label {
-    color: var(--B400);
+    color: var(--Primary);
     transform: none;
   }
 
@@ -16,7 +16,7 @@
 
   & ._e_input__line {
     height: 2px;
-    background-color: var(--B400);
+    background-color: var(--Primary);
   }
 }
 
@@ -154,7 +154,7 @@
 
   &:focus {
     & ~ ._e_input__label {
-      color: var(--B400);
+      color: var(--Primary);
       transform: none;
     }
 
@@ -164,7 +164,7 @@
 
     & ~ ._e_input__line {
       height: 2px;
-      background-color: var(--B400);
+      background-color: var(--Primary);
     }
   }
 

diff --git a/src/packages/core/src/link/link.css b/src/packages/core/src/link/link.css
@@ -1,16 +1,16 @@
 ._e_link {
-  color: var(--B400);
+  color: var(--Primary);
   cursor: pointer;
 
   &:hover {
-    color: var(--B500);
+    color: var(--PrimaryHover);
   }
 
   &:focus {
-    color: var(--B500);
+    color: var(--PrimaryHover);
   }
 
   &:active {
-    color: var(--B600);
+    color: var(--PrimaryActive);
   }
 }
diff --git a/src/packages/core/src/select/select.css b/src/packages/core/src/select/select.css
@@ -10,7 +10,7 @@
       transform: rotate(180deg);
 
       & svg {
-        fill: var(--B400);
+        fill: var(--Primary);
       }
     }
   }
@@ -19,7 +19,7 @@
     transform: rotate(180deg);
 
     & svg {
-      fill: var(--B400);
+      fill: var(--Primary);
     }
   }
 }

diff --git a/src/packages/core/src/spinner/spinner.css b/src/packages/core/src/spinner/spinner.css
@@ -29,7 +29,7 @@
   width: var(--S4);
   height: var(--S12);
   border-radius: 2px;
-  background-color: var(--B400);
+  background-color: var(--Primary);
 }
 
 ._e_spinner div:nth-child(1) {

diff --git a/src/packages/core/src/table/table-pagination.css b/src/packages/core/src/table/table-pagination.css
@@ -41,7 +41,7 @@
 
   &:hover {
     & svg {
-      fill: var(--B400);
+      fill: var(--Primary);
     }
 
     &::after {

diff --git a/src/packages/core/src/table/table.css b/src/packages/core/src/table/table.css
@@ -196,7 +196,7 @@
 
 ._e_tbody__row_selected:nth-child(n) {
   & ._e_tbody__cell {
-    background-color: var(--B50);
+    background-color: var(--PrimaryLight);
   }
 }
 

diff --git a/src/packages/core/src/tabs/tabs.css b/src/packages/core/src/tabs/tabs.css
@@ -25,6 +25,6 @@
 }
 
 ._e_tabs__item_selected {
-  color: var(--B400);
-  box-shadow: 0 2px 0 0 var(--B400);
+  color: var(--Primary);
+  box-shadow: 0 2px 0 0 var(--Primary);
 }
diff --git a/src/packages/core/src/toggle-button/toggle-button.css b/src/packages/core/src/toggle-button/toggle-button.css
@@ -34,15 +34,15 @@
 }
 
 ._e_toggle-button__item_selected {
-  border-color: var(--B100);
-  background-color: var(--B50);
-  color: var(--B400);
+  border-color: var(--PrimaryLightHover);
+  background-color: var(--PrimaryLight);
+  color: var(--Primary);
 
   &:hover {
-    background-color: var(--B100);
+    background-color: var(--PrimaryLightHover);
   }
 
   & + ._e_toggle-button__item {
-    border-left-color: var(--B100);
+    border-left-color: var(--PrimaryLightHover);
   }
 }
diff --git a/src/packages/core/src/upload/upload.css b/src/packages/core/src/upload/upload.css
@@ -34,8 +34,8 @@
 
 ._e_upload_highlighted {
   & ._e_upload__input {
-    border-color: var(--B400);
-    background-color: var(--B50);
+    border-color: var(--Primary);
+    background-color: var(--PrimaryLight);
   }
 }
 
@@ -57,18 +57,18 @@
   cursor: pointer;
 
   &:hover {
-    border-color: var(--B400);
-    background-color: var(--B50);
+    border-color: var(--Primary);
+    background-color: var(--PrimaryLight);
   }
 
   &:focus {
-    border-color: var(--B400);
-    background-color: var(--B50);
+    border-color: var(--Primary);
+    background-color: var(--PrimaryLight);
   }
 
   &:active {
-    border-color: var(--B500);
-    background-color: var(--B100);
+    border-color: var(--PrimaryHover);
+    background-color: var(--PrimaryLightHover);
   }
 }
 
@@ -78,7 +78,7 @@
 
 ._e_upload__action {
   font: var(--Subhead);
-  color: var(--B400);
+  color: var(--Primary);
 }
 
 ._e_upload__hint {