From 42cef0663ae4e49e7349f68e62a8c898aea3826e Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 11 Dec 2024 14:20:36 +0100 Subject: [PATCH] add default border --- .changeset/pretty-donkeys-sell.md | 5 + scripts/buildFigma.ts | 12 +- scripts/buildTokens.ts | 24 +- scripts/themes.config.ts | 18 +- src/platforms/css.ts | 12 +- .../base/size/{size.json => size.json5} | 0 src/tokens/base/typography/typography.json | 48 -- src/tokens/base/typography/typography.json5 | 48 ++ .../border/{light.json5 => border.json5} | 0 src/tokens/functional/border/dark.json5 | 12 - src/tokens/functional/size/border.json | 111 ---- src/tokens/functional/size/border.json5 | 115 ++++ .../{breakpoints.json => breakpoints.json5} | 0 .../{size-coarse.json => size-coarse.json5} | 0 .../size/{size-fine.json => size-fine.json5} | 0 .../functional/size/{size.json => size.json5} | 0 .../size/{viewport.json => viewport.json5} | 0 .../functional/typography/typography.json | 527 ------------------ .../functional/typography/typography.json5 | 527 ++++++++++++++++++ 19 files changed, 727 insertions(+), 732 deletions(-) create mode 100644 .changeset/pretty-donkeys-sell.md rename src/tokens/base/size/{size.json => size.json5} (100%) delete mode 100644 src/tokens/base/typography/typography.json create mode 100644 src/tokens/base/typography/typography.json5 rename src/tokens/functional/border/{light.json5 => border.json5} (100%) delete mode 100644 src/tokens/functional/border/dark.json5 delete mode 100644 src/tokens/functional/size/border.json create mode 100644 src/tokens/functional/size/border.json5 rename src/tokens/functional/size/{breakpoints.json => breakpoints.json5} (100%) rename src/tokens/functional/size/{size-coarse.json => size-coarse.json5} (100%) rename src/tokens/functional/size/{size-fine.json => size-fine.json5} (100%) rename src/tokens/functional/size/{size.json => size.json5} (100%) rename src/tokens/functional/size/{viewport.json => viewport.json5} (100%) delete mode 100644 src/tokens/functional/typography/typography.json create mode 100644 src/tokens/functional/typography/typography.json5 diff --git a/.changeset/pretty-donkeys-sell.md b/.changeset/pretty-donkeys-sell.md new file mode 100644 index 000000000..9650cc2dc --- /dev/null +++ b/.changeset/pretty-donkeys-sell.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Add default border and fix wrong dark color token diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts index 534be0cc5..1e2d37b40 100644 --- a/scripts/buildFigma.ts +++ b/scripts/buildFigma.ts @@ -78,12 +78,10 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = * Size tokens * ----------------------------------- */ const sizeFiles = [ - 'src/tokens/base/size/size.json', - 'src/tokens/functional/size/breakpoints.json', - 'src/tokens/functional/size/size.json', - 'src/tokens/functional/size/border.json', - // 'src/tokens/functional/size/size-fine.json', - // 'src/tokens/functional/size/size-coarse.json', + 'src/tokens/base/size/size.json5', + 'src/tokens/functional/size/breakpoints.json5', + 'src/tokens/functional/size/size.json5', + 'src/tokens/functional/size/border.json5', ] // const sizeExtended = await PrimerStyleDictionary.extend({ @@ -101,7 +99,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = * ----------------------------------- */ // const typeExtended = await PrimerStyleDictionary.extend({ - source: ['src/tokens/base/typography/typography.json', 'src/tokens/functional/typography/typography.json'], + source: ['src/tokens/base/typography/typography.json5', 'src/tokens/functional/typography/typography.json5'], include: [], platforms: { figma: figma(`figma/typography/typography.json`, buildOptions.prefix, buildOptions.buildPath), diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index 7dc017f3d..cf408abe9 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -30,7 +30,7 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = ( include, log: { warnings: 'disabled', // 'warn' | 'error' | 'disabled' - verbosity: 'silent', // 'default' | 'silent' | 'verbose' + verbosity: 'verbose', // 'default' | 'silent' | 'verbose' errors: { brokenReferences: 'throw', // 'throw' | 'console' }, @@ -106,9 +106,9 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P for (const file of sizeFiles) { const extendedSD = await PrimerStyleDictionary.extend( getStyleDictionaryConfig( - `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`, + `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json5', '')}`, [file], - ['src/tokens/base/size/size.json', ...sizeFiles], + ['src/tokens/base/size/size.json5', ...sizeFiles], buildOptions, ), ) @@ -117,7 +117,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P // build base scales const SdBaseSize = await PrimerStyleDictionary.extend( // using includes as source - getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], { + getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json5'], [], { buildPath: buildOptions.buildPath, prefix: undefined, }), @@ -134,8 +134,8 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P const extendedSD = await PrimerStyleDictionary.extend( getStyleDictionaryConfig( `functional/typography/typography`, - [`src/tokens/functional/typography/*.json`], - [`src/tokens/base/typography/*.json`], + [`src/tokens/functional/typography/*.json5`], + [`src/tokens/base/typography/*.json5`], buildOptions, { css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, { @@ -149,7 +149,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P await extendedSD.buildAllPlatforms() const SdTypo = await PrimerStyleDictionary.extend( - getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions), + getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json5`], [], buildOptions), ) await SdTypo.buildAllPlatforms() } catch (e) { @@ -202,21 +202,21 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P `src/tokens/base/color/light/display-light.json5`, `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/light.json5`, + `src/tokens/functional/border/*.json5`, ], include: [`src/tokens/base/color/light/light.json5`], }, // typography { filename: 'typography', - source: [`src/tokens/base/typography/*.json`, `src/tokens/functional/typography/*.json`], - include: [`src/tokens/base/typography/*.json`], + source: [`src/tokens/base/typography/*.json5`, `src/tokens/functional/typography/*.json5`], + include: [`src/tokens/base/typography/*.json5`], }, // size { filename: 'size', - source: [`src/tokens/base/size/*.json`, `src/tokens/functional/size/*.json`], - include: [`src/tokens/base/size/*.json`], + source: [`src/tokens/base/size/*.json5`, `src/tokens/functional/size/*.json5`], + include: [`src/tokens/base/size/*.json5`], }, // motion { diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts index 7f7af978c..64f349fe8 100644 --- a/scripts/themes.config.ts +++ b/scripts/themes.config.ts @@ -7,7 +7,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/light.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, ], include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`], @@ -18,7 +18,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/light.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/light/overrides/light.tritanopia.json5`, ], @@ -30,7 +30,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/light.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`, ], @@ -42,7 +42,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/light.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/light/overrides/light.high-contrast.json5`, ], @@ -58,7 +58,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, - `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, ], include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`], @@ -70,7 +70,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`, `src/tokens/functional/shadow/dark.json5`, - `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, ], include: [ @@ -86,7 +86,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, - `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`, ], @@ -98,7 +98,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, - `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`, ], @@ -110,7 +110,7 @@ export const themes: TokenBuildInput[] = [ source: [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, - `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/border/*.json5`, `src/tokens/functional/color/components/*.json5`, `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`, ], diff --git a/src/platforms/css.ts b/src/platforms/css.ts index 0af9084ac..0d564dd22 100644 --- a/src/platforms/css.ts +++ b/src/platforms/css.ts @@ -53,8 +53,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) options?.themed === true && token.$type !== 'custom-viewportRange' && !isFromFile(token, [ - 'src/tokens/functional/size/size-coarse.json', - 'src/tokens/functional/size/size-fine.json', + 'src/tokens/functional/size/size-coarse.json5', + 'src/tokens/functional/size/size-fine.json5', ]), options: { showFileHeader: false, @@ -72,8 +72,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) options?.themed !== true && token.$type !== 'custom-viewportRange' && !isFromFile(token, [ - 'src/tokens/functional/size/size-coarse.json', - 'src/tokens/functional/size/size-fine.json', + 'src/tokens/functional/size/size-coarse.json5', + 'src/tokens/functional/size/size-fine.json5', ]), options: { showFileHeader: false, @@ -95,8 +95,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) filter: token => isSource(token) && isFromFile(token, [ - 'src/tokens/functional/size/size-coarse.json', - 'src/tokens/functional/size/size-fine.json', + 'src/tokens/functional/size/size-coarse.json5', + 'src/tokens/functional/size/size-fine.json5', ]), options: { descriptions: false, diff --git a/src/tokens/base/size/size.json b/src/tokens/base/size/size.json5 similarity index 100% rename from src/tokens/base/size/size.json rename to src/tokens/base/size/size.json5 diff --git a/src/tokens/base/typography/typography.json b/src/tokens/base/typography/typography.json deleted file mode 100644 index b1c4453ca..000000000 --- a/src/tokens/base/typography/typography.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "base": { - "text": { - "weight": { - "light": { - "$type": "fontWeight", - "$value": 300, - "$extensions": { - "org.primer.figma": { - "collection": "base/typography", - "scopes": ["fontWeight"] - } - } - }, - "normal": { - "$value": 400, - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "base/typography", - "scopes": ["fontWeight"] - } - } - }, - "medium": { - "$value": 500, - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "base/typography", - "scopes": ["fontWeight"] - } - } - }, - "semibold": { - "$value": 600, - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "base/typography", - "scopes": ["fontWeight"] - } - } - } - } - } - } -} diff --git a/src/tokens/base/typography/typography.json5 b/src/tokens/base/typography/typography.json5 new file mode 100644 index 000000000..669e92cbc --- /dev/null +++ b/src/tokens/base/typography/typography.json5 @@ -0,0 +1,48 @@ +{ + base: { + text: { + weight: { + light: { + $type: 'fontWeight', + $value: 300, + $extensions: { + 'org.primer.figma': { + collection: 'base/typography', + scopes: ['fontWeight'], + }, + }, + }, + normal: { + $value: 400, + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'base/typography', + scopes: ['fontWeight'], + }, + }, + }, + medium: { + $value: 500, + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'base/typography', + scopes: ['fontWeight'], + }, + }, + }, + semibold: { + $value: 600, + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'base/typography', + scopes: ['fontWeight'], + }, + }, + }, + }, + }, + }, +} diff --git a/src/tokens/functional/border/light.json5 b/src/tokens/functional/border/border.json5 similarity index 100% rename from src/tokens/functional/border/light.json5 rename to src/tokens/functional/border/border.json5 diff --git a/src/tokens/functional/border/dark.json5 b/src/tokens/functional/border/dark.json5 deleted file mode 100644 index dfacf7ef4..000000000 --- a/src/tokens/functional/border/dark.json5 +++ /dev/null @@ -1,12 +0,0 @@ -{ - outline: { - focus: { - $value: { - color: '{focus.outlineColor}', - style: 'solid', - width: '2px', - }, - $type: 'border', - }, - }, -} diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json deleted file mode 100644 index 42d58a7b6..000000000 --- a/src/tokens/functional/size/border.json +++ /dev/null @@ -1,111 +0,0 @@ -{ - "boxShadow": { - "thin": { - "$value": "inset 0 0 0 {borderWidth.thin}", - "$description": "Thin shadow for borders", - "$type": "string" - }, - "thick": { - "$value": "inset 0 0 0 {borderWidth.thick}", - "$type": "string" - }, - "thicker": { - "$value": "inset 0 0 0 {borderWidth.thicker}", - "$type": "string" - } - }, - "borderWidth": { - "thin": { - "$value": "max(1px, 0.0625rem)", - "$type": "string" - }, - "thick": { - "$value": "max(2px, 0.125rem)", - "$type": "string" - }, - "thicker": { - "$value": "max(4px, 0.25rem)", - "$type": "string" - } - }, - "borderRadius": { - "small": { - "$value": "3px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "functional/size", - "scopes": ["radius"], - "codeSyntax": { - "web": "var(--borderRadius-small) /* utility class: .rounded-1 */" - } - } - } - }, - "medium": { - "$value": "6px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "functional/size", - "scopes": ["radius"], - "codeSyntax": { - "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */" - } - } - } - }, - "large": { - "$value": "12px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "functional/size", - "scopes": ["radius"], - "codeSyntax": { - "web": "var(--borderRadius-large) /* utility class: .rounded-3 */" - } - } - } - }, - "full": { - "$value": "9999px", - "$type": "dimension", - "$description": "Use this border radius for pill shaped elements", - "$extensions": { - "org.primer.figma": { - "collection": "functional/size", - "scopes": ["radius"], - "codeSyntax": { - "web": "var(--borderRadius-full) /* utility class: .circle */" - } - } - } - }, - "default": { - "$value": "{borderRadius.medium}", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "functional/size", - "scopes": ["radius"], - "codeSyntax": { - "web": "var(--borderRadius-default) /* utility class: .rounded-2 */" - } - } - } - } - }, - "outline": { - "focus": { - "offset": { - "$value": "-2px", - "$type": "dimension" - }, - "width": { - "$value": "2px", - "$type": "dimension" - } - } - } -} diff --git a/src/tokens/functional/size/border.json5 b/src/tokens/functional/size/border.json5 new file mode 100644 index 000000000..0e30aaf4f --- /dev/null +++ b/src/tokens/functional/size/border.json5 @@ -0,0 +1,115 @@ +{ + boxShadow: { + thin: { + $value: 'inset 0 0 0 {borderWidth.thin}', + $description: 'Thin shadow for borders', + $type: 'string', + }, + thick: { + $value: 'inset 0 0 0 {borderWidth.thick}', + $type: 'string', + }, + thicker: { + $value: 'inset 0 0 0 {borderWidth.thicker}', + $type: 'string', + }, + }, + borderWidth: { + default: { + $value: '{borderWidth.thin}', + $type: 'string', + }, + thin: { + $value: 'max(1px, 0.0625rem)', + $type: 'string', + }, + thick: { + $value: 'max(2px, 0.125rem)', + $type: 'string', + }, + thicker: { + $value: 'max(4px, 0.25rem)', + $type: 'string', + }, + }, + borderRadius: { + small: { + $value: '3px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'functional/size', + scopes: ['radius'], + codeSyntax: { + web: 'var(--borderRadius-small) /* utility class: .rounded-1 */', + }, + }, + }, + }, + medium: { + $value: '6px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'functional/size', + scopes: ['radius'], + codeSyntax: { + web: 'var(--borderRadius-medium) /* utility class: .rounded-2 */', + }, + }, + }, + }, + large: { + $value: '12px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'functional/size', + scopes: ['radius'], + codeSyntax: { + web: 'var(--borderRadius-large) /* utility class: .rounded-3 */', + }, + }, + }, + }, + full: { + $value: '9999px', + $type: 'dimension', + $description: 'Use this border radius for pill shaped elements', + $extensions: { + 'org.primer.figma': { + collection: 'functional/size', + scopes: ['radius'], + codeSyntax: { + web: 'var(--borderRadius-full) /* utility class: .circle */', + }, + }, + }, + }, + default: { + $value: '{borderRadius.medium}', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'functional/size', + scopes: ['radius'], + codeSyntax: { + web: 'var(--borderRadius-default) /* utility class: .rounded-2 */', + }, + }, + }, + }, + }, + outline: { + focus: { + offset: { + $value: '-2px', + $type: 'dimension', + }, + width: { + $value: '2px', + $type: 'dimension', + }, + }, + }, +} diff --git a/src/tokens/functional/size/breakpoints.json b/src/tokens/functional/size/breakpoints.json5 similarity index 100% rename from src/tokens/functional/size/breakpoints.json rename to src/tokens/functional/size/breakpoints.json5 diff --git a/src/tokens/functional/size/size-coarse.json b/src/tokens/functional/size/size-coarse.json5 similarity index 100% rename from src/tokens/functional/size/size-coarse.json rename to src/tokens/functional/size/size-coarse.json5 diff --git a/src/tokens/functional/size/size-fine.json b/src/tokens/functional/size/size-fine.json5 similarity index 100% rename from src/tokens/functional/size/size-fine.json rename to src/tokens/functional/size/size-fine.json5 diff --git a/src/tokens/functional/size/size.json b/src/tokens/functional/size/size.json5 similarity index 100% rename from src/tokens/functional/size/size.json rename to src/tokens/functional/size/size.json5 diff --git a/src/tokens/functional/size/viewport.json b/src/tokens/functional/size/viewport.json5 similarity index 100% rename from src/tokens/functional/size/viewport.json rename to src/tokens/functional/size/viewport.json5 diff --git a/src/tokens/functional/typography/typography.json b/src/tokens/functional/typography/typography.json deleted file mode 100644 index 3f899e6a1..000000000 --- a/src/tokens/functional/typography/typography.json +++ /dev/null @@ -1,527 +0,0 @@ -{ - "fontStack": { - "system": { - "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", - "$type": "fontFamily", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontFamily"] - } - } - }, - "sansSerif": { - "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", - "$type": "fontFamily", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontFamily"] - } - } - }, - "sansSerifDisplay": { - "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", - "$type": "fontFamily", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontFamily"] - } - } - }, - "monospace": { - "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", - "$type": "fontFamily", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontFamily"] - } - } - } - }, - "text": { - "display": { - "lineBoxHeight": { - "$value": 1.4, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 40 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"], - "fontSizeInPx": 40 - } - } - }, - "size": { - "$value": "40px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "lineHeight": { - "$value": 1.4, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 40 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "weight": { - "$value": "{base.text.weight.medium}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "$value": { - "fontWeight": "{text.display.weight}", - "fontSize": "{text.display.size}", - "lineHeight": "{text.display.lineHeight}", - "fontFamily": "{fontStack.sansSerifDisplay}" - }, - "$type": "typography", - "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports." - } - }, - "title": { - "size": { - "large": { - "$value": "32px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "medium": { - "$value": "20px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "small": { - "$value": "16px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - } - }, - "lineHeight": { - "large": { - "$value": 1.5, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 32 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "medium": { - "$value": 1.6, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 20 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "small": { - "$value": 1.5, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 16 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - } - }, - "weight": { - "large": { - "$value": "{base.text.weight.semibold}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "medium": { - "$value": "{base.text.weight.semibold}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "small": { - "$value": "{base.text.weight.semibold}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - } - }, - "shorthand": { - "large": { - "$value": { - "fontWeight": "{text.title.weight.large}", - "fontSize": "{text.title.size.large}", - "lineHeight": "{text.title.lineHeight.large}", - "fontFamily": "{fontStack.sansSerifDisplay}" - }, - "$type": "typography", - "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports." - }, - "medium": { - "$value": { - "fontWeight": "{text.title.weight.medium}", - "fontSize": "{text.title.size.medium}", - "lineHeight": "{text.title.lineHeight.medium}", - "fontFamily": "{fontStack.sansSerifDisplay}" - }, - "$type": "typography", - "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition." - }, - "small": { - "$value": { - "fontWeight": "{text.title.weight.small}", - "fontSize": "{text.title.size.small}", - "lineHeight": "{text.title.lineHeight.small}", - "fontFamily": "{fontStack.sansSerif}" - }, - "$type": "typography", - "$description": "Uses the same size as body (large) with a heavier weight of semibold (600)." - } - } - }, - "subtitle": { - "size": { - "$value": "20px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "lineHeight": { - "$value": 1.6, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 20 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "weight": { - "$value": "{base.text.weight.normal}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "$value": { - "fontWeight": "{text.subtitle.weight}", - "fontSize": "{text.subtitle.size}", - "lineHeight": "{text.subtitle.lineHeight}", - "fontFamily": "{fontStack.sansSerifDisplay}" - }, - "$type": "typography", - "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)." - } - }, - "body": { - "size": { - "large": { - "$value": "16px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "medium": { - "$value": "14px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "small": { - "$value": "12px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - } - }, - "lineHeight": { - "large": { - "$value": 1.5, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 16 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "medium": { - "$value": 1.4285, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 14 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "small": { - "$value": 1.6666, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 12 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - } - }, - "weight": { - "$value": "{base.text.weight.normal}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "large": { - "$value": { - "fontWeight": "{text.body.weight}", - "fontSize": "{text.body.size.large}", - "lineHeight": "{text.body.lineHeight.large}", - "fontFamily": "{fontStack.sansSerif}" - }, - "$type": "typography", - "$description": "User-generated content, markdown rendering." - }, - "medium": { - "$value": { - "fontWeight": "{text.body.weight}", - "fontSize": "{text.body.size.medium}", - "lineHeight": "{text.body.lineHeight.medium}", - "fontFamily": "{fontStack.sansSerif}" - }, - "$type": "typography", - "$description": "Default UI font. Most commonly used for body text." - }, - "small": { - "$value": { - "fontWeight": "{text.body.weight}", - "fontSize": "{text.body.size.small}", - "lineHeight": "{text.body.lineHeight.small}", - "fontFamily": "{fontStack.sansSerif}" - }, - "$type": "typography", - "$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px." - } - } - }, - "caption": { - "size": { - "$value": "12px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "lineHeight": { - "$value": 1.3333, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 12 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "weight": { - "$value": "{base.text.weight.normal}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "$value": { - "fontWeight": "{text.caption.weight}", - "fontSize": "{text.caption.size}", - "lineHeight": "{text.caption.lineHeight}", - "fontFamily": "{fontStack.sansSerif}" - }, - "$type": "typography", - "$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements." - } - }, - "codeBlock": { - "size": { - "$value": "13px", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "lineHeight": { - "$value": 1.5385, - "$type": "number", - "$extensions": { - "org.primer.data": { - "fontSize": 13 - }, - "org.primer.figma": { - "collection": "typography", - "scopes": ["lineHeight"] - } - } - }, - "weight": { - "$value": "{base.text.weight.normal}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "$value": { - "fontWeight": "{text.codeBlock.weight}", - "fontSize": "{text.codeBlock.size}", - "lineHeight": "{text.codeBlock.lineHeight}", - "fontFamily": "{fontStack.monospace}" - }, - "$type": "typography", - "$description": "Default style for rendering code blocks." - } - }, - "codeInline": { - "size": { - "$value": "0.9285em", - "$type": "dimension", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontSize"] - } - } - }, - "weight": { - "$value": "{base.text.weight.normal}", - "$type": "fontWeight", - "$extensions": { - "org.primer.figma": { - "collection": "typography", - "scopes": ["fontWeight"] - } - } - }, - "shorthand": { - "$value": { - "fontWeight": "{text.codeInline.weight}", - "fontSize": "{text.codeInline.size}", - "fontFamily": "{fontStack.monospace}" - }, - "$type": "typography", - "$description": "Inline code blocks using em units to inherit size from its parent." - } - } - } -} diff --git a/src/tokens/functional/typography/typography.json5 b/src/tokens/functional/typography/typography.json5 new file mode 100644 index 000000000..bf7a9c038 --- /dev/null +++ b/src/tokens/functional/typography/typography.json5 @@ -0,0 +1,527 @@ +{ + fontStack: { + system: { + $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + $type: 'fontFamily', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontFamily'], + }, + }, + }, + sansSerif: { + $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + $type: 'fontFamily', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontFamily'], + }, + }, + }, + sansSerifDisplay: { + $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + $type: 'fontFamily', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontFamily'], + }, + }, + }, + monospace: { + $value: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace', + $type: 'fontFamily', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontFamily'], + }, + }, + }, + }, + text: { + display: { + lineBoxHeight: { + $value: 1.4, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 40, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + fontSizeInPx: 40, + }, + }, + }, + size: { + $value: '40px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + lineHeight: { + $value: 1.4, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 40, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + weight: { + $value: '{base.text.weight.medium}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + $value: { + fontWeight: '{text.display.weight}', + fontSize: '{text.display.size}', + lineHeight: '{text.display.lineHeight}', + fontFamily: '{fontStack.sansSerifDisplay}', + }, + $type: 'typography', + $description: 'Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.', + }, + }, + title: { + size: { + large: { + $value: '32px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + medium: { + $value: '20px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + small: { + $value: '16px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + }, + lineHeight: { + large: { + $value: 1.5, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 32, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + medium: { + $value: 1.6, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 20, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + small: { + $value: 1.5, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 16, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + }, + weight: { + large: { + $value: '{base.text.weight.semibold}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + medium: { + $value: '{base.text.weight.semibold}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + small: { + $value: '{base.text.weight.semibold}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + }, + shorthand: { + large: { + $value: { + fontWeight: '{text.title.weight.large}', + fontSize: '{text.title.size.large}', + lineHeight: '{text.title.lineHeight.large}', + fontFamily: '{fontStack.sansSerifDisplay}', + }, + $type: 'typography', + $description: 'Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.', + }, + medium: { + $value: { + fontWeight: '{text.title.weight.medium}', + fontSize: '{text.title.size.medium}', + lineHeight: '{text.title.lineHeight.medium}', + fontFamily: '{fontStack.sansSerifDisplay}', + }, + $type: 'typography', + $description: 'Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.', + }, + small: { + $value: { + fontWeight: '{text.title.weight.small}', + fontSize: '{text.title.size.small}', + lineHeight: '{text.title.lineHeight.small}', + fontFamily: '{fontStack.sansSerif}', + }, + $type: 'typography', + $description: 'Uses the same size as body (large) with a heavier weight of semibold (600).', + }, + }, + }, + subtitle: { + size: { + $value: '20px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + lineHeight: { + $value: 1.6, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 20, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + weight: { + $value: '{base.text.weight.normal}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + $value: { + fontWeight: '{text.subtitle.weight}', + fontSize: '{text.subtitle.size}', + lineHeight: '{text.subtitle.lineHeight}', + fontFamily: '{fontStack.sansSerifDisplay}', + }, + $type: 'typography', + $description: 'Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).', + }, + }, + body: { + size: { + large: { + $value: '16px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + medium: { + $value: '14px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + small: { + $value: '12px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + }, + lineHeight: { + large: { + $value: 1.5, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 16, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + medium: { + $value: 1.4285, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 14, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + small: { + $value: 1.6666, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 12, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + }, + weight: { + $value: '{base.text.weight.normal}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + large: { + $value: { + fontWeight: '{text.body.weight}', + fontSize: '{text.body.size.large}', + lineHeight: '{text.body.lineHeight.large}', + fontFamily: '{fontStack.sansSerif}', + }, + $type: 'typography', + $description: 'User-generated content, markdown rendering.', + }, + medium: { + $value: { + fontWeight: '{text.body.weight}', + fontSize: '{text.body.size.medium}', + lineHeight: '{text.body.lineHeight.medium}', + fontFamily: '{fontStack.sansSerif}', + }, + $type: 'typography', + $description: 'Default UI font. Most commonly used for body text.', + }, + small: { + $value: { + fontWeight: '{text.body.weight}', + fontSize: '{text.body.size.small}', + lineHeight: '{text.body.lineHeight.small}', + fontFamily: '{fontStack.sansSerif}', + }, + $type: 'typography', + $description: 'Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.', + }, + }, + }, + caption: { + size: { + $value: '12px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + lineHeight: { + $value: 1.3333, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 12, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + weight: { + $value: '{base.text.weight.normal}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + $value: { + fontWeight: '{text.caption.weight}', + fontSize: '{text.caption.size}', + lineHeight: '{text.caption.lineHeight}', + fontFamily: '{fontStack.sansSerif}', + }, + $type: 'typography', + $description: 'Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.', + }, + }, + codeBlock: { + size: { + $value: '13px', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + lineHeight: { + $value: 1.5385, + $type: 'number', + $extensions: { + 'org.primer.data': { + fontSize: 13, + }, + 'org.primer.figma': { + collection: 'typography', + scopes: ['lineHeight'], + }, + }, + }, + weight: { + $value: '{base.text.weight.normal}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + $value: { + fontWeight: '{text.codeBlock.weight}', + fontSize: '{text.codeBlock.size}', + lineHeight: '{text.codeBlock.lineHeight}', + fontFamily: '{fontStack.monospace}', + }, + $type: 'typography', + $description: 'Default style for rendering code blocks.', + }, + }, + codeInline: { + size: { + $value: '0.9285em', + $type: 'dimension', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontSize'], + }, + }, + }, + weight: { + $value: '{base.text.weight.normal}', + $type: 'fontWeight', + $extensions: { + 'org.primer.figma': { + collection: 'typography', + scopes: ['fontWeight'], + }, + }, + }, + shorthand: { + $value: { + fontWeight: '{text.codeInline.weight}', + fontSize: '{text.codeInline.size}', + fontFamily: '{fontStack.monospace}', + }, + $type: 'typography', + $description: 'Inline code blocks using em units to inherit size from its parent.', + }, + }, + }, +}