From 7db6b1ea05ab1e6dde6b8a891076e88499ce9ce8 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Thu, 1 Oct 2020 08:31:06 -0400
Subject: [PATCH] Add subdued variants to warning, highlight, and success

---
 CHANGELOG.md        |  2 ++
 src/configs/base.ts | 60 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0736942b..2647cb97 100644
--- 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
index abab28be..c44b07af 100644
--- a/src/configs/base.ts
+++ b/src/configs/base.ts
@@ -934,6 +934,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:
@@ -995,6 +1017,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:
@@ -1026,6 +1068,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.',