Merge pull request #116 from primer/auareyou-blend

Added `border.subtle` to the global variables

.changeset/chilled-worms-whisper.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Added `border.subtle` to the global variables

data/colors_v2/vars/component_dark.ts

@@ -3,7 +3,7 @@ import {alpha, darken, get} from '../../../src/utils'
 export default {
   avatar: {
     bg: alpha(get('scale.white'), 0.1),
-    border: alpha(get('scale.white'), 0.1),
+    border: get('border.subtle'),
     stackFade: get('scale.gray.6'),
     stackFadeMore: get('scale.gray.7'),
     childShadow: (theme: any) => `-2px -2px 0 ${get('scale.gray.9')(theme)}`
@@ -46,7 +46,7 @@ export default {
   btn: {
     text: get('scale.gray.1'),
     bg: get('scale.gray.7'),
-    border: get('scale.gray.6'),
+    border: get('border.subtle'),
     shadow: '0 0 transparent',
     insetShadow: '0 0 transparent',
     hoverBg: get('scale.gray.6'),
@@ -64,18 +64,18 @@ export default {
     primary: {
       text: '#ffffff',
       bg: get('scale.green.5'),
-      border: get('scale.green.4'),
+      border: get('border.subtle'),
       shadow: '0 0 transparent',
       insetShadow: '0 0 transparent',
       hoverBg: get('scale.green.4'),
-      hoverBorder: get('scale.green.3'),
+      hoverBorder: get('border.subtle'),
       selectedBg: get('scale.green.5'),
       selectedShadow: '0 0 transparent',
       disabledText: alpha(get('scale.white'), 0.5),
       disabledBg: alpha(get('scale.green.5'), 0.6),
-      disabledBorder: 'transparent',
+      disabledBorder: get('border.subtle'),
       focusBg: get('scale.green.5'),
-      focusBorder: get('scale.green.3'),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha('#2ea44f', 0.4)(theme)}`,
       icon: get('scale.white'),
       counterBg: alpha(get('scale.white'), 0.2)
@@ -85,18 +85,18 @@ export default {
       text: get('scale.blue.3'),
       hoverText: get('scale.blue.3'),
       hoverBg: get('scale.gray.6'),
-      hoverBorder: get('scale.blue.3'),
+      hoverBorder: get('border.subtle'),
       hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`,
       hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`,
       hoverCounterBg: alpha(get('scale.white'), 0.2),
       selectedText: get('scale.white'),
       selectedBg: get('scale.blue.7'),
-      selectedBorder: alpha(get('scale.white'), 0.1),
+      selectedBorder: get('border.subtle'),
       selectedShadow: '0 0 transparent',
       disabledText: alpha(get('scale.blue.3'), 0.5),
       disabledBg: get('scale.gray.9'),
       disabledCounterBg: alpha(get('scale.blue.5'), 0.05),
-      focusBorder: get('scale.blue.3'),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`,
       counterBg: alpha(get('scale.blue.5'), 0.1)
     },
@@ -105,18 +105,18 @@ export default {
       text: get('scale.red.4'),
       hoverText: '#ffffff',
       hoverBg: get('scale.red.5'),
-      hoverBorder: get('scale.red.4'),
+      hoverBorder: get('border.subtle'),
       hoverShadow: '0 0 transparent',
       hoverInsetShadow: '0 0 transparent',
       hoverCounterBg: alpha('#fff', 0.2),
       selectedText: '#ffffff',
       selectedBg: get('scale.red.6'),
-      selectedBorder: alpha(get('scale.white'), 0.1),
+      selectedBorder: get('border.subtle'),
       selectedShadow: '0 0 transparent',
       disabledText: alpha(get('scale.red.4'), 0.5),
       disabledBg: get('scale.gray.9'),
       disabledCounterBg: alpha(get('scale.red.5'), 0.05),
-      focusBorder: get('scale.red.4'),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`,
       counterBg: alpha(get('scale.red.5'), 0.1),
       icon: get('scale.red.4'),

data/colors_v2/vars/component_light.ts

@@ -3,7 +3,7 @@ import {alpha, darken, get} from '../../../src/utils'
 export default {
   avatar: {
     bg: get('scale.white'),
-    border: 'transparent',
+    border: get('border.subtle'),
     stackFade: get('scale.gray.3'),
     stackFadeMore: get('scale.gray.2'),
     childShadow: (theme: any) => `-2px -2px 0 ${alpha(get('scale.white'), 0.8)(theme)}`
@@ -48,16 +48,16 @@ export default {
   btn: {
     text: get('scale.gray.9'),
     bg: get('scale.gray.0'),
-    border: alpha(get('scale.black'), 0.15),
+    border: get('border.subtle'),
     shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`,
     insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`,
     hoverBg: '#f3f4f6',
-    hoverBorder: alpha(get('scale.black'), 0.15),
+    hoverBorder: get('border.subtle'),
     activeBg: darken(get('btn.hoverBg'), 0.03),
-    activeBorder: alpha(get('scale.black'), 0.1),
+    activeBorder: get('border.subtle'),
     selectedBg: darken(get('btn.hoverBg'), 0.02),
     focusBg: get('scale.gray.0'),
-    focusBorder: alpha(get('scale.black'), 0.15),
+    focusBorder: get('border.subtle'),
     focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}`,
     shadowActive: (theme: any) => `inset 0 0.15em 0.3em ${alpha(get('scale.black'), 0.15)(theme)}`, // TODO: Deprecate? Not used in Primer CSS
     shadowInputFocus: (theme: any) => `0 0 0 0.2em ${alpha(get('scale.blue.5'), 0.3)(theme)}`, // TODO: Deprecate?
@@ -66,18 +66,18 @@ export default {
     primary: {
       text: get('scale.white'),
       bg: '#2ea44f',
-      border: alpha(get('scale.black'), 0.15),
+      border: get('border.subtle'),
       shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`,
       insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`,
       hoverBg: '#2c974b',
-      hoverBorder: alpha(get('scale.black'), 0.15),
+      hoverBorder: get('border.subtle'),
       selectedBg: darken(get('btn.primary.hoverBg'), 0.02),
       selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.green.9'), 0.2)(theme)}`,
       disabledText: alpha(get('scale.white'), 0.8),
       disabledBg: '#94d3a2',
-      disabledBorder: alpha(get('scale.black'), 0.1),
+      disabledBorder: get('border.subtle'),
       focusBg: '#2ea44f',
-      focusBorder: alpha(get('scale.black'), 0.15),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('btn.primary.focusBg'), 0.4)(theme)}`,
       icon: alpha(get('scale.white'), 0.8),
       counterBg: alpha(get('scale.white'), 0.2)
@@ -87,18 +87,18 @@ export default {
       text: get('scale.blue.5'),
       hoverText: get('scale.white'),
       hoverBg: get('scale.blue.5'),
-      hoverBorder: alpha(get('scale.black'), 0.15),
+      hoverBorder: get('border.subtle'),
       hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`,
       hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`,
       hoverCounterBg: alpha(get('scale.white'), 0.2),
       selectedText: get('scale.white'),
       selectedBg: darken(get('scale.blue.5'), 0.03),
-      selectedBorder: alpha(get('scale.black'), 0.15),
+      selectedBorder: get('border.subtle'),
       selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.blue.9'), 0.2)(theme)}`,
       disabledText: alpha(get('scale.blue.5'), 0.5),
       disabledBg: get('scale.gray.0'),
       disabledCounterBg: alpha(get('scale.blue.5'), 0.05),
-      focusBorder: alpha(get('scale.black'), 0.15),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`,
       counterBg: alpha(get('scale.blue.5'), 0.1)
     },
@@ -107,18 +107,18 @@ export default {
       text: get('scale.red.5'),
       hoverText: get('scale.white'),
       hoverBg: get('scale.red.6'),
-      hoverBorder: alpha(get('scale.black'), 0.15),
+      hoverBorder: get('border.subtle'),
       hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`,
       hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`,
       hoverCounterBg: alpha(get('scale.white'), 0.2),
       selectedText: get('scale.white'),
       selectedBg: darken(get('scale.red.5'), 0.03),
-      selectedBorder: alpha(get('scale.black'), 0.15),
+      selectedBorder: get('border.subtle'),
       selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.red.9'), 0.2)(theme)}`,
       disabledText: alpha(get('scale.red.5'), 0.5),
       disabledBg: get('scale.gray.0'),
       disabledCounterBg: alpha(get('scale.red.5'), 0.05),
-      focusBorder: alpha(get('scale.black'), 0.15),
+      focusBorder: get('border.subtle'),
       focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`,
       counterBg: alpha(get('scale.red.5'), 0.1),
       icon: get('scale.red.5'),

data/colors_v2/vars/deprecated.ts

@@ -326,11 +326,11 @@ export default {
   },
   diffstat: {
     neutralBg: get('neutral.muted'),
-    neutralBorder: get('neutral.muted'),
+    neutralBorder: get('border.subtle'),
     deletionBg: get('danger.emphasis'),
-    deletionBorder: get('danger.emphasis'),
+    deletionBorder: get('border.subtle'),
     additionBg: get('success.emphasis'),
-    additionBorder: get('success.emphasis')
+    additionBorder: get('border.subtle'),
   },
   diff: {
     addition: {

data/colors_v2/vars/global_dark.ts

@@ -14,7 +14,8 @@ export default {
   },
   border: {
     default: get('scale.gray.6'),
-    muted: get('scale.gray.7')
+    muted: get('scale.gray.7'),
+    subtle: alpha(get('scale.gray.0'), 0.1)
   },
   shadow: {
     small: '0 0 transparent',

data/colors_v2/vars/global_light.ts

@@ -14,7 +14,8 @@ export default {
   },
   border: {
     default: get('scale.gray.2'),
-    muted: lighten(get('scale.gray.2'), 0.03)
+    muted: lighten(get('scale.gray.2'), 0.03),
+    subtle: alpha(get('scale.black'), 0.15)
   },
   shadow: {
     small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`,