diff --git a/.changeset/wise-shirts-pull.md b/.changeset/wise-shirts-pull.md new file mode 100644 index 000000000..c782b0129 --- /dev/null +++ b/.changeset/wise-shirts-pull.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Shadow color adjustments diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png index 601e0af7a..a59361b2c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png index 407b0f934..0783a83e1 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png index 419a54748..f79d52e8c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png index 13526bad5..60c8fb5f1 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png index 1c609d143..d540a8749 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png index 4cddfa0d6..11919dccf 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png index 1c609d143..d540a8749 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png index 1c609d143..d540a8749 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png index c50f2a339..eae10cbb2 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png index 97a36f769..a625f75d3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png index c50f2a339..eae10cbb2 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png index c50f2a339..eae10cbb2 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png index b6ad064b8..3dfb4edb9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png index acf134ec5..e51e9ee36 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png index b6ad064b8..3dfb4edb9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png index b6ad064b8..3dfb4edb9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png index 9087156fa..e918a5c1c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png index c386480f4..c762440b7 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png index 9087156fa..e918a5c1c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png index 9087156fa..e918a5c1c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png index 11148a841..96882c0ba 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png index 9d6318fd3..1e400318a 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 index 592f55585..cab3b05f3 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -368,4 +368,17 @@ }, }, }, + overlay: { + borderColor: { + $value: '{base.color.gray.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'component (internal)', + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 59b2fb522..2af0d3692 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -1903,6 +1903,17 @@ }, }, }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'component (internal)', + }, + }, + }, backdrop: { bgColor: { $value: '{base.color.gray.8}', diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 index f2c0ed817..b316e3c9f 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -423,4 +423,17 @@ }, }, }, + overlay: { + borderColor: { + $value: '{base.color.gray.8}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'component (internal)', + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 30ef8d036..18933840b 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -1901,6 +1901,17 @@ }, }, }, + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'component (internal)', + }, + }, + }, backdrop: { bgColor: { $value: '{base.color.gray.4}', diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5 index c1674d2d8..0c14424f1 100644 --- a/src/tokens/functional/shadow/dark.json5 +++ b/src/tokens/functional/shadow/dark.json5 @@ -155,7 +155,7 @@ small: { $value: [ { - color: '{base.color.gray.8}', + color: '{overlay.borderColor}', alpha: 1, offsetX: '0px', offsetY: '0px', @@ -184,7 +184,7 @@ medium: { $value: [ { - color: '{base.color.gray.8}', + color: '{overlay.borderColor}', alpha: 1, offsetX: '0px', offsetY: '0px', @@ -229,7 +229,7 @@ large: { $value: [ { - color: '{base.color.gray.8}', + color: '{overlay.borderColor}', alpha: 1, offsetX: '0px', offsetY: '0px', @@ -250,7 +250,7 @@ xlarge: { $value: [ { - color: '{base.color.gray.8}', + color: '{overlay.borderColor}', alpha: 1, offsetX: '0px', offsetY: '0px', diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5 index 5edc16de6..11b320784 100644 --- a/src/tokens/functional/shadow/light.json5 +++ b/src/tokens/functional/shadow/light.json5 @@ -154,6 +154,14 @@ floating: { small: { $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, { color: '{base.color.gray.7}', alpha: 0.04, @@ -175,6 +183,14 @@ }, medium: { $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, { color: '{base.color.gray.7}', alpha: 0.08, @@ -212,6 +228,14 @@ }, large: { $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, { color: '{base.color.gray.7}', alpha: 0.24, @@ -225,6 +249,14 @@ }, xlarge: { $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, { color: '{base.color.gray.7}', alpha: 0.32,