diff --git a/.changeset/chilled-worms-whisper.md b/.changeset/chilled-worms-whisper.md new file mode 100644 index 000000000..d318482e7 --- /dev/null +++ b/.changeset/chilled-worms-whisper.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Added `border.subtle` to the global variables diff --git a/data/colors_v2/vars/component_dark.ts b/data/colors_v2/vars/component_dark.ts index a4f0cede1..56886896c 100644 --- a/data/colors_v2/vars/component_dark.ts +++ b/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'), diff --git a/data/colors_v2/vars/component_light.ts b/data/colors_v2/vars/component_light.ts index ded5e75d9..bf4a9288f 100644 --- a/data/colors_v2/vars/component_light.ts +++ b/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'), diff --git a/data/colors_v2/vars/deprecated.ts b/data/colors_v2/vars/deprecated.ts index e9bbcf306..6446be383 100644 --- a/data/colors_v2/vars/deprecated.ts +++ b/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: { diff --git a/data/colors_v2/vars/global_dark.ts b/data/colors_v2/vars/global_dark.ts index c3ea1bb1b..ad2e8db26 100644 --- a/data/colors_v2/vars/global_dark.ts +++ b/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', diff --git a/data/colors_v2/vars/global_light.ts b/data/colors_v2/vars/global_light.ts index 716b57357..cf83a7192 100644 --- a/data/colors_v2/vars/global_light.ts +++ b/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)}`,