UI-272 Add warning class to radial chart in stencil library Signed-of… (

#359) * UI-272 Add warning class to radial chart in stencil library Signed-off-by: Tara Black <[email protected]> * UI-272 Replace HSL with HEX Signed-off-by: Tara Black <[email protected]> * UI-272 Remove hsl functions and add chart colors Signed-off-by: Tara Black <[email protected]>
chef · May 17, 2019 · 58632b3 · 58632b3
1 parent f2dd1c2
commit 58632b3
Show file tree

Hide file tree

Showing 45 changed files with 265 additions and 253 deletions.
diff --git a/components/chef-ui-library/src/atoms/chef-alert/chef-alert.scss b/components/chef-ui-library/src/atoms/chef-alert/chef-alert.scss
@@ -1,12 +1,12 @@
 chef-alert {
   #{--alert-color}: var(--chef-success);
-  background-color: chef-hsl(var(--alert-color));
+  background-color: var(--alert-color);
   display: -webkit-flex;
   display: flex;
   margin: 0;
   padding: 8px;
   width: 100%;
-  color: chef-hsl(var(--chef-white));
+  color: var(--chef-white);
   border-radius: 4px;
   -webkit-flex-direction: row;
   flex-direction: row;

diff --git a/components/chef-ui-library/src/atoms/chef-button/chef-button.scss b/components/chef-ui-library/src/atoms/chef-button/chef-button.scss
@@ -35,9 +35,9 @@ chef-button {
 }
 
 chef-button {
-  #{--background-color}: chef-hsl(var(--chef-dark-grey));
-  #{--border-color}: chef-hsl(var(--chef-dark-grey));
-  #{--color}: chef-hsl(var(--chef-white));
+  #{--background-color}: var(--chef-dark-grey);
+  #{--border-color}: var(--chef-dark-grey);
+  #{--color}: var(--chef-white);
 }
 
 chef-button {
@@ -101,27 +101,27 @@ chef-button {
 chef-button[primary] {
   #{--background-color}: palette($primary-default, 5);
   #{--border-color}: palette($primary-default, 5);
-  #{--color}: chef-hsl(var(--chef-white));
+  #{--color}: var(--chef-white);
 
   &:hover {
     #{--background-color}: palette($primary-default, 4);
     #{--border-color}: palette($primary-default, 4);
-    #{--color}: chef-hsl(var(--chef-white));
+    #{--color}: var(--chef-white);
   }
 
   &:active {
     #{--background-color}: palette($primary-default, 3);
     #{--border-color}: palette($primary-default, 3);
-    #{--color}: chef-hsl(var(--chef-white));
+    #{--color}: var(--chef-white);
   }
 
   &[disabled] {
     #{--background-color}: palette($primary-default, 9);
     #{--border-color}: palette($primary-default, 9);
-    #{--color}: chef-hsl(var(--chef-white));
+    #{--color}: var(--chef-white);
 
     chef-loading-spinner {
-      #{--fill}: chef-hsl(var(--chef-white));
+      #{--fill}: var(--chef-white);
       #{--fill-alt}: palette($primary-default, 10);
     }
   }
@@ -134,27 +134,27 @@ chef-button[primary] {
   &[caution] {
     #{--background-color}: palette($primary-caution, 5);
     #{--border-color}: palette($primary-caution, 5);
-    #{--color}: chef-hsl(var(--chef-white));
+    #{--color}: var(--chef-white);
 
     &:hover {
       #{--background-color}: palette($primary-caution, 4);
       #{--border-color}: palette($primary-caution, 4);
-      #{--color}: chef-hsl(var(--chef-white));
+      #{--color}: var(--chef-white);
     }
 
     &:active {
       #{--background-color}: palette($primary-caution, 3);
       #{--border-color}: palette($primary-caution, 3);
-      #{--color}: chef-hsl(var(--chef-white));
+      #{--color}: var(--chef-white);
     }
 
     &[disabled] {
       #{--background-color}: palette($primary-caution, 9);
       #{--border-color}: palette($primary-caution, 9);
-      #{--color}: chef-hsl(var(--chef-white));
+      #{--color}: var(--chef-white);
 
       chef-loading-spinner {
-        #{--fill}: chef-hsl(var(--chef-white));
+        #{--fill}: var(--chef-white);
         #{--fill-alt}: palette($primary-caution, 10);
       }
     }
@@ -167,7 +167,7 @@ chef-button[primary] {
 }
 
 chef-button[secondary] {
-  #{--background-color}: chef-hsl(var(--chef-white));
+  #{--background-color}: var(--chef-white);
   #{--border-color}: palette($primary-default, 5);
   #{--color}: palette($primary-default, 5);
 
@@ -184,7 +184,7 @@ chef-button[secondary] {
   }
 
   &[disabled] {
-    #{--background-color}: chef-hsl(var(--chef-white));
+    #{--background-color}: var(--chef-white);
     #{--border-color}: palette($primary-default, 9);
     #{--color}: palette($primary-default, 9);
 
@@ -200,7 +200,7 @@ chef-button[secondary] {
   }
 
   &[caution] {
-    #{--background-color}: chef-hsl(var(--chef-white));
+    #{--background-color}: var(--chef-white);
     #{--border-color}: palette($primary-caution, 5);
     #{--color}: palette($primary-caution, 5);
 
@@ -217,7 +217,7 @@ chef-button[secondary] {
     }
 
     &[disabled] {
-      #{--background-color}: chef-hsl(var(--chef-white));
+      #{--background-color}: var(--chef-white);
       #{--border-color}: palette($primary-caution, 9);
       #{--color}: palette($primary-caution, 9);
 

diff --git a/components/chef-ui-library/src/atoms/chef-card/chef-card.scss b/components/chef-ui-library/src/atoms/chef-card/chef-card.scss
@@ -5,7 +5,7 @@ chef-card {
   .content {
     display: block;
     padding: 1em;
-    background-color: chef-hsl(var(--chef-white));
+    background-color: var(--chef-white);
     box-shadow: var(--chef-box-shadow);
     border-radius: var(--chef-border-radius);
   }

diff --git a/components/chef-ui-library/src/atoms/chef-checkbox/chef-checkbox.scss b/components/chef-ui-library/src/atoms/chef-checkbox/chef-checkbox.scss
@@ -12,39 +12,39 @@ chef-checkbox {
     height: 20px;
     border: 2px solid;
     border-radius: var(--chef-border-radius);
-    color: chef-hsl(var(--chef-white));
+    color: var(--chef-white);
     align-items: center;
     justify-content: center;
 
     chef-icon {
-      color: chef-hsl(var(--chef-white));
+      color: var(--chef-white);
     }
   }
 
   .label-wrap {
     display: none;
     margin-left: 14px;
     font-size: 14px;
-    color: chef-hsl(var(--chef-primary-dark));
+    color: var(--chef-primary-dark);
   }
 
   &[aria-labelledby] .label-wrap {
     display: block;
   }
 
   &[aria-checked='true'] .check-wrap {
-    border-color: chef-hsl(var(--chef-primary-bright));
-    background-color: chef-hsl(var(--chef-primary-bright));
+    border-color: var(--chef-primary-bright);
+    background-color: var(--chef-primary-bright);
   }
 
   &[aria-checked='false'] .check-wrap {
-    border-color: chef-hsl(var(--chef-dark-grey));
-    background-color: chef-hsl(var(--chef-white));
+    border-color: var(--chef-dark-grey);
+    background-color: var(--chef-white);
   }
 
   &[aria-checked='mixed'] .check-wrap {
-    border-color: chef-hsl(var(--chef-primary-bright));
-    background-color: chef-hsl(var(--chef-primary-bright));
+    border-color: var(--chef-primary-bright);
+    background-color: var(--chef-primary-bright);
   }
 
   &[aria-disabled] {

diff --git a/components/chef-ui-library/src/atoms/chef-click-outside/chef-click-outside.tsx b/components/chef-ui-library/src/atoms/chef-click-outside/chef-click-outside.tsx
@@ -27,8 +27,8 @@ import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/
  * </script>
  *
  * <style>
- *   #wrapper { display: block; background: hsl(var(--chef-white)); }
- *   #content { padding: 1em; border: 1px solid; border-color: hsl(var(--chef-grey)); }
+ *   #wrapper { display: block; background: var(--chef-white); }
+ *   #content { padding: 1em; border: 1px solid; border-color: var(--chef-grey); }
  *   .omitted { margin: 1em 1em 0 0; }
  * </style>
  */

diff --git a/components/chef-ui-library/src/atoms/chef-dropdown/chef-dropdown.scss b/components/chef-ui-library/src/atoms/chef-dropdown/chef-dropdown.scss
@@ -3,7 +3,7 @@ chef-dropdown {
   display: none;
   box-shadow: var(--chef-box-shadow);
   border-radius: var(--chef-border-radius);
-  background-color: chef-hsl(var(--chef-white));
+  background-color: var(--chef-white);
 
   &[visible] {
     display: block;

diff --git a/components/chef-ui-library/src/atoms/chef-heading/chef-heading.scss b/components/chef-ui-library/src/atoms/chef-heading/chef-heading.scss
@@ -1,6 +1,6 @@
 chef-heading {
   .page-title {
-    color: chef-hsl(var(--chef-primary-dark));
+    color: var(--chef-primary-dark);
     margin-top: 0;
     margin-bottom: 12px;
     font-weight: inherit;

diff --git a/components/chef-ui-library/src/atoms/chef-input/chef-input.scss b/components/chef-ui-library/src/atoms/chef-input/chef-input.scss
@@ -1,14 +1,14 @@
 chef-input {
-  #{--border-color}: chef-hsl(var(--chef-grey));
-  --default-focus-border: chef-hsl(var(--chef-primary-bright));
+  #{--border-color}: var(--chef-grey);
+  --default-focus-border: var(--chef-primary-bright);
   border: 1px solid var(--border-color);
   transition: border-color 0.5s ease;
-  background-color: chef-hsl(var(--chef-white));
+  background-color: var(--chef-white);
   border-radius: var(--chef-border-radius);
   display: inline-block;
 
   &.focused {
-    border-color: var(--focus-border-color, var(--default-focus-border));
+    border-color: var(--focus-border-color), var(--default-focus-border);
   }
 
   input {

diff --git a/components/chef-ui-library/src/atoms/chef-option/chef-option.tsx b/components/chef-ui-library/src/atoms/chef-option/chef-option.tsx
@@ -145,8 +145,8 @@ export class ChefOption {
     return [
       <style>
         { `[selected=${this.optionId}] [${this.optionId}], [highlighted=${this.optionId}] #${this.optionId} {
-             background-color: hsl(var(--chef-primary-bright));
-             color: hsl(var(--chef-white));
+             background-color: var(--chef-primary-bright);
+             color: var(--chef-white);
            }`
         }
       </style>,

diff --git a/components/chef-ui-library/src/atoms/chef-pill/chef-pill.scss b/components/chef-ui-library/src/atoms/chef-pill/chef-pill.scss
@@ -1,6 +1,6 @@
 chef-pill {
-  #{--background-color}: var(--pill-background-color, chef-hsl(var(--chef-light-grey)));
-  #{--text-color}: var(--pill-text-color, chef-hsl(var(--chef-dark-grey)));
+  #{--background-color}: var(--pill-background-color, var(--chef-light-grey));
+  #{--text-color}: var(--pill-text-color, var(--chef-dark-grey));
 
   display: inline-block;
   white-space: nowrap;

diff --git a/components/chef-ui-library/src/atoms/chef-snippet/chef-snippet.scss b/components/chef-ui-library/src/atoms/chef-snippet/chef-snippet.scss
@@ -8,8 +8,8 @@ chef-snippet {
     overflow: auto;
     font-family: Consolas, Menlo, Monaco, Courier, monospace;
     font-size: 14px;
-    background: chef-hsl(var(--chef-white));
-    color: chef-hsl(var(--chef-dark-grey));
+    background: var(--chef-white);
+    color: var(--chef-dark-grey);
     line-height: 1.5em;
     direction: ltr;
     text-align: left;

diff --git a/components/chef-ui-library/src/atoms/chef-step/chef-step.scss b/components/chef-ui-library/src/atoms/chef-step/chef-step.scss
@@ -5,10 +5,10 @@ chef-step {
   padding: 2px 12px 2px 2px;
   border: 1px solid transparent;
   border-radius: 30px;
-  background: chef-hsl(var(--chef-white));
+  background: var(--chef-white);
   box-shadow: var(--chef-box-shadow);
   font-size: 12px;
-  color: chef-hsl(var(--chef-primary-bright));
+  color: var(--chef-primary-bright);
   white-space: nowrap;
 
   // step number
@@ -20,8 +20,8 @@ chef-step {
     text-align: center;
     margin-right: 8px;
     border-radius: 100%;
-    background: chef-hsl(var(--chef-primary-bright));
-    color: chef-hsl(var(--chef-white));
+    background: var(--chef-primary-bright);
+    color: var(--chef-white);
   }
 
   // horizontal line between steps
@@ -33,30 +33,30 @@ chef-step {
     width: 20px;
     left: -21px;
     top: 50%;
-    background: chef-hsl(var(--chef-primary-bright));
+    background: var(--chef-primary-bright);
   }
 
   &[selected] {
-    #{--border-color}: chef-hsl(var(--chef-primary-bright));
+    #{--border-color}: var(--chef-primary-bright);
     border: 1px solid var(--border-color);
-    color: chef-hsl(var(--chef-primary-bright));
+    color: var(--chef-primary-bright);
 
     &::before {
-      background: chef-hsl(var(--chef-primary-bright));
-      color: chef-hsl(var(--chef-white));
+      background: var(--chef-primary-bright);
+      color: var(--chef-white);
     }
   }
 
   &[disabled] {
-    color: chef-hsl(var(--chef-dark-grey));
+    color: var(--chef-dark-grey);
 
     &::before {
-      background: chef-hsl(var(--chef-light-grey));
-      color: chef-hsl(var(--chef-dark-grey));
+      background: var(--chef-light-grey);
+      color: var(--chef-dark-grey);
     }
 
     &::after {
-      background: chef-hsl(var(--chef-grey));
+      background: var(--chef-grey);
     }
   }
 

diff --git a/components/chef-ui-library/src/atoms/chef-subheading/chef-subheading.scss b/components/chef-ui-library/src/atoms/chef-subheading/chef-subheading.scss
@@ -3,6 +3,6 @@ chef-subheading {
     margin-top: 0;
     margin-bottom: 0;
     font-size: inherit;
-    color: chef-hsl(var(--chef-dark-grey));
+    color: var(--chef-dark-grey);
   }
 }
diff --git a/components/chef-ui-library/src/atoms/chef-tooltip/chef-tooltip.scss b/components/chef-ui-library/src/atoms/chef-tooltip/chef-tooltip.scss
@@ -1,5 +1,5 @@
 chef-tooltip {
-  #{--background-color}: var(--tooltip-color, chef-hsl(var(--chef-white)));
+  #{--background-color}: var(--tooltip-color, var(--chef-white));
   display: block;
   position: fixed;
   opacity: 0;
@@ -15,7 +15,7 @@ chef-tooltip {
   font-family: var(--chef-font-family);
   font-size: var(--chef-base-font-size);
   font-weight: normal;
-  color: chef-hsl(var(--chef-primary-dark));
+  color: var(--chef-primary-dark);
 
   &:after {
     content: '';
@@ -28,7 +28,7 @@ chef-tooltip {
   }
 
   &.top {
-    transform: translate(-50%, calc(-100% - 0.75em));
+    transform: translate(-50%), calc(-100% - 0.75em);
 
     &::after {
       left: 50%;

diff --git a/components/chef-ui-library/src/charts/chef-data-point/chef-data-point.tsx b/components/chef-ui-library/src/charts/chef-data-point/chef-data-point.tsx
@@ -7,23 +7,28 @@ import { Component, Event, EventEmitter, Prop } from '@stencil/core';
  * @example
  * <style>
  *   chef-radial-chart .failed, chef-radial-chart .critical {
- *     color: hsl(var(--chef-critical));
+ *     color: var(--chef-critical);
+ *   }
+ *  chef-radial-chart .warning, chef-radial-chart .warning {
+ *     color: var(--chef-primary);
  *   }
  *   chef-radial-chart .success, chef-radial-chart .major {
- *     color: hsl(var(--chef-success));
+ *     color: var(--chef-ok);
  *   }
  *   chef-radial-chart .skipped, chef-radial-chart .minor {
- *     color: hsl(var(--chef-grey));
+ *     color: var(--chef-unknown);
  *   }
  * </style>
  * <chef-radial-chart style="width: 220px; height: 220px;">
  *   <span slot="innerText">Text for the center of the chart</span>
  *
  *   <chef-data-point value="4" class="failed">4 Failed</chef-data-point>
- *   <chef-data-point value="3" class="success">3 Successful</chef-data-point>
- *   <chef-data-point value="2" class="skipped">2 Skipped</chef-data-point>
+ *   <chef-data-point value="3" class="warning">3 Failed</chef-data-point>
+ *   <chef-data-point value="2" class="success">2 Successful</chef-data-point>
+ *   <chef-data-point value="1" class="skipped">1 Skipped</chef-data-point>
  *
- *   <chef-data-point value="3" secondary class="critical">Critical</chef-data-point>
+ *   <chef-data-point value="4" secondary class="critical">Critical</chef-data-point>
+ *   <chef-data-point value="3" secondary class="warning">Warning</chef-data-point>
  *   <chef-data-point value="2" secondary class="major">Major</chef-data-point>
  *   <chef-data-point value="1" secondary class="minor">Minor</chef-data-point>
  * </chef-radial-chart>