diff --git a/.changeset/itchy-beers-fix.md b/.changeset/itchy-beers-fix.md new file mode 100644 index 000000000..b7fd29b0f --- /dev/null +++ b/.changeset/itchy-beers-fix.md @@ -0,0 +1,6 @@ +--- +"@primer/primitives": patch +--- + +- Update Overlay backdrop color for dark mode +- Add Overlay backdrop tokens to the old build diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts index b7799ed07..c1dc7682a 100644 --- a/data/colors/vars/component_dark.ts +++ b/data/colors/vars/component_dark.ts @@ -26,7 +26,8 @@ export default { }, overlay: { shadow: (theme: any) => - `0 0 0 1px ${get('scale.gray.6')(theme)}, 0 16px 32px ${alpha(get('scale.black'), 0.85)(theme)}` + `0 0 0 1px ${get('scale.gray.6')(theme)}, 0 16px 32px ${alpha(get('scale.black'), 0.85)(theme)}`, + backdrop: alpha(get('scale.gray.8'), 0.4) }, header: { text: alpha(get('scale.white'), 0.7), diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts index a606bc904..409ce2911 100644 --- a/data/colors/vars/component_light.ts +++ b/data/colors/vars/component_light.ts @@ -26,7 +26,8 @@ export default { }, overlay: { shadow: (theme: any) => - `0 1px 3px ${alpha(get('scale.black'), 0.12)(theme)}, 0 8px 24px ${alpha(get('scale.gray.7'), 0.12)(theme)}` + `0 1px 3px ${alpha(get('scale.black'), 0.12)(theme)}, 0 8px 24px ${alpha(get('scale.gray.7'), 0.12)(theme)}`, + backdrop: alpha(get('scale.gray.4'), 0.2) }, header: { text: alpha(get('scale.white'), 0.7), diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 9b277fa3a..2fe2f3438 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -739,9 +739,9 @@ }, backdrop: { bgColor: { - $value: '{base.color.gray.2}', + $value: '{base.color.gray.8}', $type: 'color', - alpha: 0.2, + alpha: 0.4, }, }, },