chore(dynamic icons): color updates (#4946)

kflournoy-sf · web-flow · commit 4c4f061cf611 · 2021-12-01T18:23:42.000-05:00
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -72,6 +72,10 @@
 #### Fixed
 - Fixed missing attribute `required` on date input
 
+### [Dynamic Icons](https://www.lightningdesignsystem.com/components/dynamic-icons)
+#### Changed
+- Updated dynamic icon colors to match new Salesforce color palettes.
+
 ### [Icons](https://www.lightningdesignsystem.com/components/icons)
 #### Removed
 - Removed outdated documentation about changing background color, as this contradicts current Design System guidelines.
diff --git a/ui/components/dynamic-icons/RELEASENOTES.md b/ui/components/dynamic-icons/RELEASENOTES.md
@@ -5,3 +5,8 @@
 <!-- ## [Unreleased] -->
 
 <!-- ## [VERSION] -->
+
+## 2.17.0
+
+### Changed
+- Updated dynamic icon colors to match new Salesforce color palettes.
diff --git a/ui/components/dynamic-icons/ellie/_index.scss b/ui/components/dynamic-icons/ellie/_index.scss
@@ -71,7 +71,7 @@ $_ellie-frameset: (
   svg {
     width: $_ellie-sprite-width;
     vertical-align: top;
-    color: #00a0e3;
+    color: $palette-cloud-blue-60;
   }
 
   circle:nth-child(2n + 1) {
@@ -81,8 +81,8 @@ $_ellie-frameset: (
   }
 
   circle:nth-child(2n) {
-    fill: $color-gray-1;
-    stroke: $color-gray-1;
+    fill: $palette-neutral-100;
+    stroke: $palette-neutral-100;
     stroke-width: 1px;
   }
 }
diff --git a/ui/components/dynamic-icons/ellie/example.jsx b/ui/components/dynamic-icons/ellie/example.jsx
@@ -8,18 +8,24 @@ import Ellie from './';
     Exports
 ----------------------------------------------------------------------------- */
 
-export default (
-  <Ellie
-    className="slds-is-animated"
-    title="Description of the icon"
-    assistiveText="Text alternative"
-  />
-);
+export default [
+  {
+    id: 'default',
+    label: 'Ellie – default',
+    element: (
+      <Ellie
+        className="slds-is-animated"
+        title="Description of the icon"
+        assistiveText="Text alternative"
+      />
+    )
+  }
+];
 
 export let states = [
   {
     id: 'paused',
-    label: 'Paused',
+    label: 'Ellie – Paused',
     element: (
       <Ellie
         className="slds-is-animated slds-is-paused"
@@ -30,7 +36,7 @@ export let states = [
   },
   {
     id: 'static',
-    label: 'Static (no animation)',
+    label: 'Ellie – Static (no animation)',
     element: (
       <Ellie title="Description of the icon" assistiveText="Text alternative" />
     )
diff --git a/ui/components/dynamic-icons/eq/example.jsx b/ui/components/dynamic-icons/eq/example.jsx
@@ -8,4 +8,12 @@ import EqIcon from './';
     Exports
 ----------------------------------------------------------------------------- */
 
-export default <EqIcon />;
+export default [
+    {
+        id: 'default',
+        label: 'EQ – default',
+        element: (
+            <EqIcon />
+        )
+    }
+];
diff --git a/ui/components/dynamic-icons/global-action-help/example.jsx b/ui/components/dynamic-icons/global-action-help/example.jsx
@@ -8,4 +8,12 @@ import GlobalActionHelp from './';
     Exports
 ----------------------------------------------------------------------------- */
 
-export default <GlobalActionHelp />;
+export default [
+    {
+        id: 'default',
+        label: 'Global Action Help - Default',
+        element: (
+            <GlobalActionHelp />
+        )
+    }
+];
diff --git a/ui/components/dynamic-icons/score/_index.scss b/ui/components/dynamic-icons/score/_index.scss
@@ -34,8 +34,8 @@
  * @restrict .slds-icon-score svg
  */
 .slds-icon-score__positive {
-  fill: #30a664;
-  stroke: #30a664;
+  fill: $color-background-success-dark;
+  stroke: $color-background-success-dark;
 }
 
 /**
@@ -46,7 +46,7 @@
  */
 .slds-icon-score__negative {
   fill: transparent;
-  stroke: #d2504c;
+  stroke: $color-background-destructive;
 }
 
 [data-slds-state="positive"] .slds-icon-score__positive,
diff --git a/ui/components/dynamic-icons/score/example.jsx b/ui/components/dynamic-icons/score/example.jsx
@@ -8,19 +8,26 @@ import Score from './';
     Exports
 ----------------------------------------------------------------------------- */
 
-// Default
-export default <Score data-slds-state="positive" />;
+export default [
+  {
+    id: 'default',
+    label: 'Score – default',
+    element: (
+      <Score data-slds-state="positive" />
+    )
+  }
+];
 
 // States
 export let states = [
   {
     id: 'positive',
-    label: 'Positive',
+    label: 'Score – Positive',
     element: <Score data-slds-state="positive" />
   },
   {
     id: 'negative',
-    label: 'Negative',
+    label: 'Score – Negative',
     element: <Score data-slds-state="negative" />
   }
 ];
diff --git a/ui/components/dynamic-icons/strength/_index.scss b/ui/components/dynamic-icons/strength/_index.scss
@@ -27,7 +27,7 @@
   circle { // 1
     stroke-width: 0.95px;
     fill: transparent;
-    stroke: #ccc;
+    stroke: $palette-neutral-60;
     transition: // 2
       fill 0.4s ease-in-out,
       stroke 0.4s ease-in-out;
@@ -51,8 +51,8 @@
   &[data-slds-strength="3"] circle:nth-child(1),
   &[data-slds-strength="3"] circle:nth-child(2),
   &[data-slds-strength="3"] circle:nth-child(3) {
-    fill: #04844b;
-    stroke: #04844b;
+    fill: $color-text-success;
+    stroke: $color-text-success;
   }
 
   &[data-slds-strength="-1"] circle:nth-child(1),
@@ -61,8 +61,8 @@
   &[data-slds-strength="-3"] circle:nth-child(1),
   &[data-slds-strength="-3"] circle:nth-child(2),
   &[data-slds-strength="-3"] circle:nth-child(3) {
-    fill: #ffdde1;
-    stroke: #c23934;
+    fill: $palette-pink-90;
+    stroke: $color-background-error-dark;
   }
 
   /**
@@ -126,11 +126,11 @@
 // Improve readability of animations
 // stylelint-disable
 @keyframes slds-icon-strength-positive-load {
-  0%   { fill: transparent; stroke: #ccc; }
-  100% { fill: #04844b; stroke: #04844b; }
+  0%   { fill: transparent; stroke: $palette-neutral-60; }
+  100% { fill: $color-text-success; stroke: $color-text-success; }
 }
 
 @keyframes slds-icon-strength-negative-load {
-  0%   { fill: transparent; stroke: #ccc; }
-  100% { fill: #ffdde1; stroke: #c23934; }
+  0%   { fill: transparent; stroke: $palette-neutral-60; }
+  100% { fill: $palette-pink-90; stroke: $color-background-destructive; }
 }
diff --git a/ui/components/dynamic-icons/strength/example.jsx b/ui/components/dynamic-icons/strength/example.jsx
@@ -9,7 +9,15 @@ import Strength from './';
 ----------------------------------------------------------------------------- */
 
 // Default
-export default <Strength data-slds-strength="0" />;
+export default [
+  {
+    id: 'default',
+    label: 'Strength – default',
+    element: (
+      <Strength data-slds-strength="0" />
+    )
+  }
+];
 
 // States
 export let states = [
@@ -45,17 +53,17 @@ export let states = [
   },
   {
     id: 'animated',
-    label: 'Animated on load',
+    label: 'Strength – Animated on load',
     element: <Strength className="slds-is-animated" data-slds-strength="3" />
   },
   {
     id: 'animated-negative',
-    label: 'Animated on load (negative)',
+    label: 'Strength – Animated on load (negative)',
     element: <Strength className="slds-is-animated" data-slds-strength="-3" />
   },
   {
     id: 'paused',
-    label: 'Paused',
+    label: 'Strength – Paused',
     element: (
       <Strength
         className="slds-is-animated slds-is-paused"
diff --git a/ui/components/dynamic-icons/trend/_index.scss b/ui/components/dynamic-icons/trend/_index.scss
@@ -64,16 +64,16 @@ $_icon-trend-one: 1.125px;
 }
 
 .slds-icon-trend[data-slds-trend="down"] {
-  color: #c23934;
+  color: $color-background-error-dark;
   transform: rotate(45deg);
 }
 
 .slds-icon-trend[data-slds-trend="neutral"] {
-  color: #979797;
+  color: $palette-neutral-60;
 }
 
 .slds-icon-trend[data-slds-trend="up"] {
-  color: #028048;
+  color: $color-background-success-dark;
   transform: rotate(-45deg);
 }
 
diff --git a/ui/components/dynamic-icons/trend/example.jsx b/ui/components/dynamic-icons/trend/example.jsx
@@ -9,20 +9,26 @@ import Trend from './';
 ----------------------------------------------------------------------------- */
 
 // Default
-export default (
-  <Trend
-    data-slds-trend="neutral"
-    className="slds-is-animated"
-    title="Description of the icon"
-    assistiveText="Text alternative"
-  />
-);
+export default [
+  {
+    id: 'default',
+    label: 'Trend – default',
+    element: (
+      <Trend
+        data-slds-trend="neutral"
+        className="slds-is-animated"
+        title="Description of the icon"
+        assistiveText="Text alternative"
+      />
+    )
+  }
+];
 
 // States
 export let states = [
   {
     id: 'down',
-    label: 'Down',
+    label: 'Trend - Down',
     element: (
       <Trend
         data-slds-trend="down"
@@ -34,7 +40,7 @@ export let states = [
   },
   {
     id: 'up',
-    label: 'Up',
+    label: 'Trend - Up',
     element: (
       <Trend
         data-slds-trend="up"
@@ -46,7 +52,7 @@ export let states = [
   },
   {
     id: 'static',
-    label: 'Static (no animation)',
+    label: 'Trend - Static (no animation)',
     element: (
       <Trend
         data-slds-trend="up"
@@ -57,7 +63,7 @@ export let states = [
   },
   {
     id: 'paused',
-    label: 'Paused',
+    label: 'Trend - Paused',
     element: (
       <Trend
         data-slds-trend="up"
diff --git a/ui/components/dynamic-icons/typing/example.jsx b/ui/components/dynamic-icons/typing/example.jsx
@@ -8,18 +8,24 @@ import TypingIcon from './';
     Exports
 ----------------------------------------------------------------------------- */
 
-export default (
-  <TypingIcon
-    title="User is typing"
-    assistiveText="User is typing"
-    isAnimated
-  />
-);
+export default [
+  {
+    id: 'default',
+    label: 'Typing – default',
+    element: (
+      <TypingIcon
+        title="User is typing"
+        assistiveText="User is typing"
+        isAnimated
+      />
+    )
+  }
+];
 
 export let states = [
   {
     id: 'paused',
-    label: 'Paused',
+    label: 'Typing – Paused',
     element: (
       <TypingIcon
         title="User is typing"
@@ -31,7 +37,7 @@ export let states = [
   },
   {
     id: 'static',
-    label: 'Static',
+    label: 'Typing – Static',
     element: (
       <TypingIcon title="User is typing" assistiveText="User is typing" />
     )
diff --git a/ui/components/dynamic-icons/waffle/example.jsx b/ui/components/dynamic-icons/waffle/example.jsx
@@ -9,4 +9,12 @@ import WaffleIcon from './';
 ----------------------------------------------------------------------------- */
 
 // Default
-export default <WaffleIcon />;
+export default [
+    {
+        id: 'default',
+        label: 'Waffle',
+        element: (
+            <WaffleIcon />
+        )
+    }
+];

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ $_ellie-frameset: (`
`71`	`71`	`svg {`
`72`	`72`	`width: $_ellie-sprite-width;`
`73`	`73`	`vertical-align: top;`
`74`		`- color: #00a0e3;`
	`74`	`+ color: $palette-cloud-blue-60;`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`circle:nth-child(2n + 1) {`
`@@ -81,8 +81,8 @@ $_ellie-frameset: (`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`circle:nth-child(2n) {`
`84`		`- fill: $color-gray-1;`
`85`		`- stroke: $color-gray-1;`
	`84`	`+ fill: $palette-neutral-100;`
	`85`	`+ stroke: $palette-neutral-100;`
`86`	`86`	`stroke-width: 1px;`
`87`	`87`	`}`
`88`	`88`	`}`