diff --git a/.changeset/sweet-jeans-pretend.md b/.changeset/sweet-jeans-pretend.md new file mode 100644 index 000000000..1d189081a --- /dev/null +++ b/.changeset/sweet-jeans-pretend.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Add `borderColor-translucent` diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-borderColor-translucent-linux.png new file mode 100644 index 000000000..83e8753ad Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-borderColor-translucent-linux.png new file mode 100644 index 000000000..83e8753ad Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-borderColor-translucent-linux.png new file mode 100644 index 000000000..359a66ce1 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-borderColor-translucent-linux.png new file mode 100644 index 000000000..83e8753ad Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-borderColor-translucent-linux.png new file mode 100644 index 000000000..c48a33895 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-borderColor-translucent-linux.png new file mode 100644 index 000000000..c48a33895 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-borderColor-translucent-linux.png new file mode 100644 index 000000000..6ff6db5b1 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-borderColor-translucent-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-borderColor-translucent-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-borderColor-translucent-linux.png new file mode 100644 index 000000000..c48a33895 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-borderColor-translucent-linux.png differ diff --git a/blob-report/report.zip b/blob-report/report.zip index b801449eb..fd5f9b288 100644 Binary files a/blob-report/report.zip and b/blob-report/report.zip differ diff --git a/docs/storybook/stories/Color/Functional/Border.stories.tsx b/docs/storybook/stories/Color/Functional/Border.stories.tsx index 124864375..b30da5085 100644 --- a/docs/storybook/stories/Color/Functional/Border.stories.tsx +++ b/docs/storybook/stories/Color/Functional/Border.stories.tsx @@ -15,6 +15,7 @@ const borderColors = [ 'borderColor-emphasis', 'borderColor-disabled', 'borderColor-transparent', + 'borderColor-translucent', ] export const Border = () => { 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 25b1bfd2e..bc3014ddb 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -42,6 +42,11 @@ $type: 'color', alpha: 1, }, + translucent: { + $value: '{base.color.neutral.5}', + $type: 'color', + alpha: 1, + }, neutral: { muted: { $value: '{base.color.neutral.4}', diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 779ed42ac..9fdaefca4 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -14,7 +14,7 @@ alpha: 0.1, }, borderColor: { - $value: '{base.color.white}', + $value: '{borderColor.translucent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -24,7 +24,6 @@ scopes: ['borderColor'], }, }, - alpha: 0.15, }, }, avatarStack: { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index 1a5946b89..edb490b19 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -846,6 +846,19 @@ }, }, }, + translucent: { + $value: '{base.color.white}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'component (internal)', + scopes: ['borderColor'], + }, + }, + alpha: 0.15, + }, neutral: { muted: { $value: '{base.color.neutral.4}', 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 f3f944a23..532d2e310 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -71,6 +71,11 @@ $type: 'color', alpha: 1, }, + translucent: { + $value: '{base.color.neutral.8}', + $type: 'color', + alpha: 1, + }, neutral: { muted: { $value: '{base.color.neutral.4}', diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index d48f47e19..019ef27b5 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -13,7 +13,7 @@ }, }, borderColor: { - $value: '{base.color.black}', + $value: '{borderColor.translucent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -23,7 +23,6 @@ scopes: ['borderColor'], }, }, - alpha: 0.15, }, }, avatarStack: { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 332384e32..20b6c2b98 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -836,6 +836,19 @@ }, }, }, + translucent: { + $value: '{base.color.black}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['borderColor'], + }, + }, + alpha: 0.15, + }, neutral: { muted: { $value: '{base.color.neutral.3}',