From a20947205aacb564bcc0a05a8213ace2820a8684 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 6 Feb 2025 15:10:53 +0100 Subject: [PATCH 1/2] merhe shadow tokens --- scripts/themes.config.ts | 18 +- src/tokens/functional/shadow/dark.json5 | 369 ------------------ .../shadow/{light.json5 => shadow.json5} | 271 ++++++++++++- 3 files changed, 279 insertions(+), 379 deletions(-) delete mode 100644 src/tokens/functional/shadow/dark.json5 rename src/tokens/functional/shadow/{light.json5 => shadow.json5} (55%) diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts index 728ec10e6..0ecaf966e 100644 --- a/scripts/themes.config.ts +++ b/scripts/themes.config.ts @@ -5,7 +5,7 @@ export const themes: TokenBuildInput[] = [ filename: 'light', theme: 'light', source: [ - `src/tokens/functional/shadow/light.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -21,7 +21,7 @@ export const themes: TokenBuildInput[] = [ filename: 'light-tritanopia', theme: 'light-tritanopia', source: [ - `src/tokens/functional/shadow/light.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -38,7 +38,7 @@ export const themes: TokenBuildInput[] = [ filename: 'light-colorblind', theme: 'light-protanopia-deuteranopia', source: [ - `src/tokens/functional/shadow/light.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -55,7 +55,7 @@ export const themes: TokenBuildInput[] = [ filename: 'light-high-contrast', theme: 'light-high-contrast', source: [ - `src/tokens/functional/shadow/light.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -72,7 +72,7 @@ export const themes: TokenBuildInput[] = [ filename: 'dark', theme: 'dark', source: [ - `src/tokens/functional/shadow/dark.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, @@ -88,7 +88,7 @@ export const themes: TokenBuildInput[] = [ filename: 'dark-dimmed', theme: 'dark-dimmed', source: [ - `src/tokens/functional/shadow/dark.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -105,7 +105,7 @@ export const themes: TokenBuildInput[] = [ filename: 'dark-tritanopia', theme: 'dark-tritanopia', source: [ - `src/tokens/functional/shadow/dark.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -122,7 +122,7 @@ export const themes: TokenBuildInput[] = [ filename: 'dark-colorblind', theme: 'dark-protanopia-deuteranopia', source: [ - `src/tokens/functional/shadow/dark.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, @@ -139,7 +139,7 @@ export const themes: TokenBuildInput[] = [ filename: 'dark-high-contrast', theme: 'dark-high-contrast', source: [ - `src/tokens/functional/shadow/dark.json5`, + `src/tokens/functional/shadow/shadow.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, `src/tokens/functional/color/*.json5`, diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5 deleted file mode 100644 index 966fbd6b9..000000000 --- a/src/tokens/functional/shadow/dark.json5 +++ /dev/null @@ -1,369 +0,0 @@ -{ - avatar: { - shadow: { - $value: [ - { - color: '{base.color.neutral.1}', - alpha: 1, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '2px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component shadow', - }, - }, - }, - }, - button: { - default: { - shadow: { - resting: { - $value: [ - { - color: '{base.color.transparent}', - alpha: 0, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '0px', - inset: false, - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component shadow', - }, - }, - }, - }, - }, - primary: { - shadow: { - selected: { - $value: [ - { - color: '{base.color.transparent}', - alpha: 0, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '0px', - inset: false, - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component shadow', - }, - }, - }, - }, - }, - outline: { - shadow: { - selected: { - $value: [ - { - color: '{base.color.transparent}', - alpha: 0, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '0px', - inset: false, - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component shadow', - }, - }, - }, - }, - }, - danger: { - shadow: { - selected: { - $value: [ - { - color: '{base.color.transparent}', - alpha: 0, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '0px', - inset: false, - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component shadow', - }, - }, - }, - }, - }, - }, - shadow: { - inset: { - $value: { - color: '{base.color.neutral.0}', - alpha: 0.24, - offsetX: '0px', - offsetY: '1px', - blur: '0px', - spread: '0px', - inset: true, - }, - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - resting: { - xsmall: { - $value: { - color: '{base.color.neutral.0}', - alpha: 0.8, - offsetX: '0px', - offsetY: '1px', - blur: '0px', - spread: '0px', - inset: false, - }, - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - small: { - $value: [ - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '1px', - blur: '0px', - spread: '0px', - inset: false, - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - medium: { - $value: [ - { - color: '{base.color.neutral.0}', - alpha: 0.8, - offsetX: '0px', - offsetY: '3px', - blur: '6px', - spread: '0px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - }, - floating: { - small: { - $value: [ - { - color: '{overlay.borderColor}', - alpha: 1, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '1px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '6px', - blur: '12px', - spread: '-3px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '6px', - blur: '18px', - spread: '0px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - medium: { - $value: [ - { - color: '{overlay.borderColor}', - alpha: 1, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '1px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '8px', - blur: '16px', - spread: '-4px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '4px', - blur: '32px', - spread: '-4px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '24px', - blur: '48px', - spread: '-12px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '48px', - blur: '96px', - spread: '-24px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - large: { - $value: [ - { - color: '{overlay.borderColor}', - alpha: 1, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '1px', - }, - { - color: '{base.color.neutral.0}', - alpha: 1, - offsetX: '0px', - offsetY: '24px', - blur: '48px', - spread: '0px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - xlarge: { - $value: [ - { - color: '{overlay.borderColor}', - alpha: 1, - offsetX: '0px', - offsetY: '0px', - blur: '0px', - spread: '1px', - }, - { - color: '{base.color.neutral.0}', - alpha: 1, - offsetX: '0px', - offsetY: '32px', - blur: '64px', - spread: '0px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - legacy: { - $value: [ - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '6px', - blur: '12px', - spread: '-3px', - }, - { - color: '{base.color.neutral.0}', - alpha: 0.4, - offsetX: '0px', - offsetY: '6px', - blur: '18px', - spread: '0px', - }, - ], - $type: 'shadow', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'shadow', - }, - }, - }, - }, - }, -} diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/shadow.json5 similarity index 55% rename from src/tokens/functional/shadow/light.json5 rename to src/tokens/functional/shadow/shadow.json5 index bbe7b5020..b22af96e4 100644 --- a/src/tokens/functional/shadow/light.json5 +++ b/src/tokens/functional/shadow/shadow.json5 @@ -17,6 +17,20 @@ collection: 'mode', group: 'component shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.neutral.1}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '2px', + }, + ], + }, + }, }, }, }, @@ -41,6 +55,21 @@ collection: 'mode', group: 'component shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.transparent}', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + }, + }, }, }, }, @@ -92,6 +121,19 @@ }, ], }, + dark: { + $value: [ + { + color: '{base.color.transparent}', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + }, }, }, }, @@ -117,6 +159,21 @@ collection: 'mode', group: 'component shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.transparent}', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + }, + }, }, }, }, @@ -155,6 +212,19 @@ }, ], }, + dark: { + $value: [ + { + color: '{base.color.transparent}', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + }, }, }, }, @@ -178,6 +248,19 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: { + color: '{base.color.neutral.0}', + alpha: 0.24, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: true, + }, + }, + }, }, }, resting: { @@ -197,6 +280,19 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: { + color: '{base.color.neutral.0}', + alpha: 0.8, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: false, + }, + }, + }, }, }, small: { @@ -217,6 +313,21 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + }, + }, }, }, medium: { @@ -236,6 +347,20 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.neutral.0}', + alpha: 0.8, + offsetX: '0px', + offsetY: '3px', + blur: '6px', + spread: '0px', + }, + ], + }, + }, }, }, }, @@ -273,6 +398,36 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '6px', + blur: '12px', + spread: '-3px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '6px', + blur: '18px', + spread: '0px', + }, + ], + }, + }, }, }, medium: { @@ -324,6 +479,52 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '8px', + blur: '16px', + spread: '-4px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '4px', + blur: '32px', + spread: '-4px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '24px', + blur: '48px', + spread: '-12px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '48px', + blur: '96px', + spread: '-24px', + }, + ], + }, + }, }, }, large: { @@ -351,6 +552,28 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, + { + color: '{base.color.neutral.0}', + alpha: 1, + offsetX: '0px', + offsetY: '24px', + blur: '48px', + spread: '0px', + }, + ], + }, + }, }, }, xlarge: { @@ -378,6 +601,28 @@ collection: 'mode', group: 'shadow', }, + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{overlay.borderColor}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, + { + color: '{base.color.neutral.0}', + alpha: 1, + offsetX: '0px', + offsetY: '32px', + blur: '64px', + spread: '0px', + }, + ], + }, + }, }, }, legacy: { @@ -400,7 +645,31 @@ }, ], $type: 'shadow', + $extensions: { + 'org.primer.overrides': { + dark: { + $value: [ + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '6px', + blur: '12px', + spread: '-3px', + }, + { + color: '{base.color.neutral.0}', + alpha: 0.4, + offsetX: '0px', + offsetY: '6px', + blur: '18px', + spread: '0px', + }, + ], + }, + }, + }, }, }, }, -} +} \ No newline at end of file From ec3052391831032dc20fa2870851e0f1b42edb42 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 6 Feb 2025 17:04:08 +0100 Subject: [PATCH 2/2] fix lintint issue --- scripts/validateTokenJson.ts | 10 +++---- src/schemas/shadowToken.ts | 32 +++++++++++++++++++++++ src/tokens/functional/shadow/shadow.json5 | 2 ++ 3 files changed, 39 insertions(+), 5 deletions(-) diff --git a/scripts/validateTokenJson.ts b/scripts/validateTokenJson.ts index 3d488f90d..23fc55679 100644 --- a/scripts/validateTokenJson.ts +++ b/scripts/validateTokenJson.ts @@ -65,15 +65,15 @@ if (getFlag('--silent') === null) { // eslint-disable-next-line no-console console.log(`\u001b[36;1m\u001b[1m${fail.fileName}\u001b[0m`) - for (const path of Object.keys(fail.errorsByPath)) { + for (const mainPath of Object.keys(fail.errorsByPath)) { // eslint-disable-next-line no-console - console.log(`\nPath: \u001b[34;1m\u001b[1m${path}\u001b[0m`) + console.log(`\nPath: \u001b[34;1m\u001b[1m${mainPath}\u001b[0m`) // eslint-disable-next-line no-console console.log( - fail.errorsByPath[path] + fail.errorsByPath[mainPath] .map( - ({message, code, errors}) => - `${message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n ↳ ')}, code: ${code}, errors:\n ${errors + ({message, code, errors, ...item}) => + `${message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n ↳ ')}, code: ${code}, path: ${item.path}, errors:\n ${errors .map(error => { return `- ${error.issues[0].code}: ${error.issues[0].message}` }) diff --git a/src/schemas/shadowToken.ts b/src/schemas/shadowToken.ts index 265924472..b78455504 100644 --- a/src/schemas/shadowToken.ts +++ b/src/schemas/shadowToken.ts @@ -19,6 +19,12 @@ export const shadowValue = z }) .strict() +const baseShadowToken = baseToken.extend({ + $value: z.union([shadowValue, referenceValue, z.array(shadowValue)]), +}) + +const override = z.union([referenceValue, baseShadowToken]).optional() + export const shadowToken = baseToken .extend({ $value: z.union([shadowValue, z.array(shadowValue), referenceValue]), @@ -42,6 +48,32 @@ export const shadowToken = baseToken group: z.string().optional(), }) .strict(), + 'org.primer.overrides': z + .object( + { + light: override, + 'light-tritanopia': override, + 'light-protanopia-deuteranopia': override, + 'light-high-contrast': override, + dark: override, + 'dark-tritanopia': override, + 'dark-protanopia-deuteranopia': override, + 'dark-high-contrast': override, + 'dark-dimmed': override, + }, + { + errorMap: e => { + if (e.code === 'unrecognized_keys') { + return { + message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`, + } + } + return {message: `Error: ${e.code}`} + }, + }, + ) + .strict() + .optional(), }) .optional(), }) diff --git a/src/tokens/functional/shadow/shadow.json5 b/src/tokens/functional/shadow/shadow.json5 index b22af96e4..9f972bac0 100644 --- a/src/tokens/functional/shadow/shadow.json5 +++ b/src/tokens/functional/shadow/shadow.json5 @@ -646,6 +646,8 @@ ], $type: 'shadow', $extensions: { + 'org.primer.figma': { + }, 'org.primer.overrides': { dark: { $value: [