Added variants for border subdued roles (#123)

* Added variants for border subdued roles Added variants for subdued border roles for banners. Also increased the contrast for default border variants. * Fix linting issues Co-authored-by: Marten Bjork <marten.bjork@shopify.com>
Shopify · Mar 12, 2020 · e235e54 · e235e54
1 parent 8a8f98b
commit e235e54
Showing 1 changed file with 53 additions and 6 deletions.
diff --git a/src/configs/base.ts b/src/configs/base.ts
@@ -199,6 +199,15 @@ export const config: Config = {
         figmaName: 'Border/Default',
       },
     },
+    {
+      name: 'borderNeutralSubdued',
+      description: 'For use as the border on banners.',
+      light: {lightness: 77},
+      dark: {lightness: 35},
+      meta: {
+        figmaName: 'Border Neutral/Subdued',
+      },
+    },
     {
       name: 'borderHovered',
       description: 'Used for borders on hovered interactive elements',
@@ -563,13 +572,23 @@ export const config: Config = {
     {
       name: 'borderCritical',
       description:
-        'For use as a border on critical components such as banners, and as an outline on interactive elements in an error state.',
-      light: {lightness: 50},
+        'For use as a border on critical components such as an outline on interactive elements in an error state.',
+      light: {lightness: 60},
       dark: {lightness: 50},
       meta: {
         figmaName: 'Border Critical/Default',
       },
     },
+    {
+      name: 'borderCriticalSubdued',
+      description:
+        'For use as a border on critical components such as banners.',
+      light: {lightness: 77, saturation: saturationAdjustmentFn(-50)},
+      dark: {lightness: 50},
+      meta: {
+        figmaName: 'Border Critical/Subdued',
+      },
+    },
     {
       name: 'borderCriticalDisabled',
       description:
@@ -762,11 +781,20 @@ export const config: Config = {
   warning: [
     {
       name: 'borderWarning',
+      description: 'For use as a border on warning components such as...',
+      light: {lightness: 60},
+      dark: {lightness: 50},
+      meta: {
+        figmaName: 'Border Warning/Default',
+      },
+    },
+    {
+      name: 'borderWarningSubdued',
       description: 'For use as a border on warning components such as banners.',
       light: {lightness: 77, saturation: saturationAdjustmentFn(-40)},
       dark: {lightness: 50},
       meta: {
-        figmaName: 'Border Warning/Default',
+        figmaName: 'Border Warning/Subdued',
       },
     },
     {
@@ -814,12 +842,21 @@ export const config: Config = {
   highlight: [
     {
       name: 'borderHighlight',
+      description: 'For use as a border on informational components such as...',
+      light: {lightness: 60},
+      dark: {lightness: 60},
+      meta: {
+        figmaName: 'Border Highlight/Default',
+      },
+    },
+    {
+      name: 'borderHighlightSubdued',
       description:
         'For use as a border on informational components such as banners.',
-      light: {lightness: 60, saturation: saturationAdjustmentFn(19.6)},
+      light: {lightness: 77, saturation: saturationAdjustmentFn(-40)},
       dark: {lightness: 60},
       meta: {
-        figmaName: 'Border Highlight/Default',
+        figmaName: 'Border Highlight/Subdued',
       },
     },
     {
@@ -866,11 +903,21 @@ export const config: Config = {
   success: [
     {
       name: 'borderSuccess',
+      description:
+        'For use as a border on success components such as text inputs.',
+      light: {lightness: 60},
+      dark: {lightness: 50},
+      meta: {
+        figmaName: 'Border Success/Default',
+      },
+    },
+    {
+      name: 'borderSuccessSubdued',
       description: 'For use as a border on success components such as banners.',
       light: {lightness: 77, saturation: saturationAdjustmentFn(-60)},
       dark: {lightness: 50},
       meta: {
-        figmaName: 'Border Success/Default',
+        figmaName: 'Border Success/Subdued',
       },
     },
     {