Merge pull request #153 from Shopify/add-subdued-variants

Add subdued variants to warning, highlight, and success
Shopify · Oct 1, 2020 · a69b221 · a69b221
2 parents e8be108 + 7db6b1e
commit a69b221
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- Add subdued variants to warning, highlight, and success ([#153](https://github.com/Shopify/polaris-tokens/pull/153))
+
 ## [2.12.9] - 2020-09-11
 
 - Update action secondary depressed color / add border depressed ([#150](https://github.com/Shopify/polaris-tokens/pull/150))

diff --git a/src/configs/base.ts b/src/configs/base.ts
@@ -963,6 +963,28 @@ export const config: Config = {
         figmaDescription: 'Used for banners',
       },
     },
+    {
+      name: 'surfaceWarningSubduedHovered',
+      description:
+        'For use as a subdued surface color on warning elements including banners.',
+      light: {lightness: 96},
+      dark: {lightness: 28, saturation: 71},
+      meta: {
+        figmaName: 'Surface Warning/Subdued Hovered',
+        figmaDescription: 'Used for banners',
+      },
+    },
+    {
+      name: 'surfaceWarningSubduedPressed',
+      description:
+        'For use as a subdued surface color on warning elements including banners.',
+      light: {lightness: 94},
+      dark: {lightness: 30, saturation: 71},
+      meta: {
+        figmaName: 'Surface Warning/Subdued Pressed',
+        figmaDescription: 'Used for banners',
+      },
+    },
     {
       name: 'textWarning',
       description:
@@ -1024,6 +1046,26 @@ export const config: Config = {
         figmaName: 'Surface Highlight/Subdued',
       },
     },
+    {
+      name: 'surfaceHighlightSubduedHovered',
+      description:
+        'For use as a surface color on information elements including banners.',
+      light: {lightness: 96, saturation: saturationAdjustmentFn(-20.4)},
+      dark: {lightness: 22},
+      meta: {
+        figmaName: 'Surface Highlight/Subdued Hovered',
+      },
+    },
+    {
+      name: 'surfaceHighlightSubduedPressed',
+      description:
+        'For use as a surface color on information elements including banners.',
+      light: {lightness: 94, saturation: saturationAdjustmentFn(-20.4)},
+      dark: {lightness: 25},
+      meta: {
+        figmaName: 'Surface Highlight/Subdued Pressed',
+      },
+    },
     {
       name: 'textHighlight',
       description:
@@ -1055,6 +1097,24 @@ export const config: Config = {
         figmaName: 'Border Success/Subdued',
       },
     },
+    {
+      name: 'borderSuccessSubduedHovered',
+      description: 'For use as a border on success components such as banners.',
+      light: {lightness: 76, saturation: saturationAdjustmentFn(-60)},
+      dark: {lightness: 52},
+      meta: {
+        figmaName: 'Border Success/Subdued Hovered',
+      },
+    },
+    {
+      name: 'borderSuccessSubduedPressed',
+      description: 'For use as a border on success components such as banners.',
+      light: {lightness: 74, saturation: saturationAdjustmentFn(-60)},
+      dark: {lightness: 55},
+      meta: {
+        figmaName: 'Border Success/Subdued Pressed',
+      },
+    },
     {
       name: 'iconSuccess',
       description: 'For use as an icon fill color on top of success elements.',