From 920e2578a90f2b4a6b4e06b100de616254fedbd4 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 26 Jun 2023 13:41:11 +0200 Subject: [PATCH 1/2] created separte figma build file which compiles list of files to fetch --- .changeset/sixty-teachers-hunt.md | 5 + README.md | 26 + package.json | 3 +- scripts/buildPlatforms/buildFigma.ts | 111 ++ scripts/buildTokens.ts | 2 + src/PrimerStyleDictionary.ts | 6 + src/formats/index.ts | 1 + src/formats/jsonFigma.ts | 62 + src/platforms/figma.ts | 46 + src/platforms/index.ts | 1 + src/tokens/base/color/dark/dark.dimmed.json5 | 920 +++++++++++++-- src/tokens/base/color/dark/dark.json5 | 915 +++++++++++++-- src/tokens/base/color/light/light.json5 | 465 ++++++++ src/tokens/base/size/size.json | 136 ++- .../functional/color/dark/app-dark.json5 | 287 +++++ .../functional/color/dark/patterns-dark.json5 | 1001 +++++++++++++++++ .../color/dark/primitives-dark.json5 | 448 ++++++++ .../functional/color/dark/syntax-dark.json5 | 282 +++++ .../functional/color/light/app-light.json5 | 287 +++++ .../color/light/patterns-light.json5 | 994 ++++++++++++++++ .../color/light/primitives-light.json5 | 448 ++++++++ .../functional/color/light/syntax-light.json5 | 284 ++++- src/tokens/functional/size/border.json | 41 +- src/tokens/functional/size/breakpoints.json | 48 +- src/tokens/functional/size/size.json | 336 +++++- 25 files changed, 6900 insertions(+), 255 deletions(-) create mode 100644 .changeset/sixty-teachers-hunt.md create mode 100644 scripts/buildPlatforms/buildFigma.ts create mode 100644 src/formats/jsonFigma.ts create mode 100644 src/platforms/figma.ts diff --git a/.changeset/sixty-teachers-hunt.md b/.changeset/sixty-teachers-hunt.md new file mode 100644 index 000000000..bdb66fbfc --- /dev/null +++ b/.changeset/sixty-teachers-hunt.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': minor +--- + +Adding support for figma tokens diff --git a/README.md b/README.md index 5e414d8cf..f801fbdba 100644 --- a/README.md +++ b/README.md @@ -168,6 +168,32 @@ A `mix` proprty must always have a `color` and a `weight` child. `color` can be } ``` +#### Extensions property + +According to the [w3c design token specs](https://design-tokens.github.io/community-group/format/#design-token), the [`$extensions`](https://design-tokens.github.io/community-group/format/#extensions) property is used for additional meta data. + +For our Figma export we use the following meta data: + +- `collection` the collection that the token is added to within Figma +- `mode` the mode that the token is added to within the collection in Figma +- `scopes` the scopes that are assigned to the token in Figma, the actual Figma compatible `scopes` are retreive from an object in the [figmaAttributes transformer](./src/transformers/figmaAttributes.ts) + +Code example + +```js + bgColor: { + $value: '{borderColor.accent.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, + } +``` + ## License [MIT](./LICENSE) © [GitHub](https://github.com/) diff --git a/package.json b/package.json index 509f799e9..6c3bab5db 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "build": "ts-node ./scripts/build.ts && tsc --project tsconfig.build.json", "build:next": "ts-node -r tsconfig-paths/register ./scripts/buildTokens.ts && ts-node ./scripts/buildFallbacks.ts", "build:tokens": "node -e \"require('./build')._init()\"", - "build:new-tokens": "npm run build:tokens && npm run build:next", + "build:figma": "ts-node scripts/buildPlatforms/buildFigma.ts", + "build:new-tokens": "npm run build:tokens && npm run build:next && npm run build:figma", "tokenJson:check": "ts-node scripts/diffThemes.ts && ts-node scripts/diffTokenProps.ts", "contrast:check": "ts-node -e \"require('./scripts/color-contrast').check()\"", "format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css}'", diff --git a/scripts/buildPlatforms/buildFigma.ts b/scripts/buildPlatforms/buildFigma.ts new file mode 100644 index 000000000..33d74cdb7 --- /dev/null +++ b/scripts/buildPlatforms/buildFigma.ts @@ -0,0 +1,111 @@ +import fs from 'fs' +import {PrimerStyleDictionary} from '~/src/PrimerStyleDictionary' +import {themes} from '../themes.config' +import {figma} from '~/src/platforms' +import type {ConfigGeneratorOptions} from '~/src/types/StyleDictionaryConfigGenerator' + +export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => { + /** ----------------------------------- + * Colors + * ----------------------------------- */ + // base colors + const baseScales = [ + { + name: 'light', + source: [`src/tokens/base/color/light/light.json5`], + }, + { + name: 'dark', + source: [`src/tokens/base/color/dark/dark.json5`], + }, + // { + // name: 'dark-dimmed', + // source: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.dimmed.json5`], + // }, + ] + + for (const {name, source} of baseScales) { + PrimerStyleDictionary.extend({ + source, + platforms: { + figma: figma(`figma/scales/${name}.json`, buildOptions.prefix, buildOptions.buildPath), + }, + }).buildAllPlatforms() + } + // + for (const {filename, source, include} of themes) { + if (['light', 'dark' /*, 'dark-dimmed'*/].includes(filename)) { + // build functional scales + PrimerStyleDictionary.extend({ + source, + include, + platforms: { + figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, { + mode: filename, + }), + }, + }).buildAllPlatforms() + } + } + /** ----------------------------------- + * 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', + ] + // + PrimerStyleDictionary.extend({ + source: sizeFiles, + include: sizeFiles, + platforms: { + figma: figma(`figma/dimension/dimension.json`, buildOptions.prefix, buildOptions.buildPath), + }, + }).buildAllPlatforms() + + /** ----------------------------------- + * Create list of files + * ----------------------------------- */ + const dirNames = fs + .readdirSync(`${buildOptions.buildPath}figma`, {withFileTypes: true}) + .filter(dir => dir.isDirectory()) + .map(dir => dir.name) + + const files = dirNames.flatMap(dir => { + const localFiles = fs.readdirSync(`${buildOptions.buildPath}figma/${dir}`) + return localFiles.map(file => `${buildOptions.buildPath}figma/${dir}/${file}`) + }) + + const tokens: { + collection: string + mode: string + }[] = files.flatMap(filePath => JSON.parse(fs.readFileSync(filePath, 'utf8'))) + const collections: Record = {} + + for (const {collection, mode} of tokens) { + if (!(collection in collections)) { + collections[collection] = [] + } + if (!collections[collection].includes(mode)) { + collections[collection].push(mode) + } + } + + // define the order of the modes + // we inverse it to deal with the -1 of the indexOf if item is not found in the array: basically anything that is not in the list should come last + const modeOrder = ['light', 'dark'].reverse() + // sort modes in the order defined above + for (const collection in collections) { + collections[collection].sort((a, b) => modeOrder.indexOf(b) - modeOrder.indexOf(a)) + } + // write to file + fs.writeFileSync(`${buildOptions.buildPath}figma/figma.json`, JSON.stringify({collections, files}, null, 2)) +} + +buildFigma({ + buildPath: 'tokens-next-private/', +}) diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index df56af20b..ad94350cd 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -16,6 +16,7 @@ import type {ConfigGeneratorOptions, StyleDictionaryConfigGenerator} from '~/src import type {TokenBuildInput} from '~/src/types/TokenBuildInput' import glob from 'fast-glob' import {themes} from './themes.config' +import {buildFigma} from './buildPlatforms/buildFigma' /** * getStyleDictionaryConfig * @param filename output file name without extension @@ -46,6 +47,7 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = ( }) export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => { + buildFigma(buildOptions) /** ----------------------------------- * Colors, shadows & borders * ----------------------------------- */ diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index 309564fac..35b199bb9 100644 --- a/src/PrimerStyleDictionary.ts +++ b/src/PrimerStyleDictionary.ts @@ -32,6 +32,7 @@ import { jsonPostCssFallback, cssWrapMediaQuery, cssVariables, + jsonFigma, } from './formats' /** @@ -99,6 +100,11 @@ StyleDictionary.registerFormat({ formatter: jsonPostCssFallback, }) +StyleDictionary.registerFormat({ + name: 'json/figma', + formatter: jsonFigma, +}) + /** * Transformers * diff --git a/src/formats/index.ts b/src/formats/index.ts index f75f1e559..520bd2263 100644 --- a/src/formats/index.ts +++ b/src/formats/index.ts @@ -2,6 +2,7 @@ export {cssThemed} from './cssThemed' export {cssCustomMedia} from './cssCustomMedia' export {cssWrapMediaQuery} from './cssWrapMediaQuery' export {cssVariables} from './cssVariables' +export {jsonFigma} from './jsonFigma' export {javascriptCommonJs} from './javascriptCommonJs' export {javascriptEsm} from './javascriptEsm' export {jsonNestedPrefixed} from './jsonNestedPrefixed' diff --git a/src/formats/jsonFigma.ts b/src/formats/jsonFigma.ts new file mode 100644 index 000000000..9ce7fa048 --- /dev/null +++ b/src/formats/jsonFigma.ts @@ -0,0 +1,62 @@ +import StyleDictionary from 'style-dictionary' +import {format} from 'prettier' +import type {FormatterArguments} from 'style-dictionary/types/Format' +const {sortByReference} = StyleDictionary.formatHelpers + +const replaceRegEx = /(?:{|})/g + +const isReference = (string: string): boolean => /^\{([^\\]*)\}$/g.test(string) + +const getReference = (dictionary: StyleDictionary.Dictionary, refString: string) => { + if (isReference(refString)) { + // retrieve reference token + const refToken = dictionary.getReferences(refString)[0] + // return full reference + return [refToken.attributes?.collection, ...refToken.path].filter(Boolean).join('/') + } + return undefined +} + +const getFigmaType = (type: string): string => { + const validTypes = { + color: 'COLOR', + dimension: 'FLOAT', + } + if (type in validTypes) return validTypes[type as keyof typeof validTypes] + throw new Error(`Invalid type: ${type}`) +} + +/** + * @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement) + * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts) + * @returns formatted `string` + */ +export const jsonFigma: StyleDictionary.Formatter = ({ + dictionary, + file: _file, + platform: _platform, +}: FormatterArguments) => { + // sort tokens by reference + const tokens = dictionary.allTokens.sort(sortByReference(dictionary)).map(token => { + const {attributes, value, $type, comment: description, original, alpha, mix} = token + const {mode, collection, scopes} = attributes || {} + const tokenName = token.name.replace(replaceRegEx, '') + return { + name: tokenName, + value, + type: getFigmaType($type), + alpha, + isMix: mix ? true : undefined, + description, + refId: [collection, tokenName].filter(Boolean).join('/'), + reference: getReference(dictionary, original.value), + collection, + mode, + scopes, + } + }) + // add file header and convert output + const output = JSON.stringify(tokens, null, 2) + // return prettified + return format(output, {parser: 'json', printWidth: 500}) +} diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts new file mode 100644 index 000000000..c7cc373d3 --- /dev/null +++ b/src/platforms/figma.ts @@ -0,0 +1,46 @@ +import type StyleDictionary from 'style-dictionary' +import type {PlatformInitializer} from '~/src/types/PlatformInitializer' +import {isSource} from '~/src/filters' + +const validFigmaToken = (token: StyleDictionary.TransformedToken) => { + const validTypes = ['color', 'dimension'] + // is a siource token, not an included one + if (!isSource(token)) return false + // has a collection attribute + if ( + !('$extensions' in token) || + !('org.primer.figma' in token.$extensions) || + !('collection' in token.$extensions['org.primer.figma']) + ) + return false + // is a color or dimension type + return validTypes.includes(token.$type) +} + +export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => ({ + prefix, + buildPath, + transforms: [ + 'color/rgbaFloat', + 'name/pathToSlashNotation', + 'figma/attributes', + 'dimension/pixelUnitless', + // 'border/figma', + // 'typography/figma', + 'fontWeight/number', + ], + options: { + basePxFontSize: 16, + ...options, + }, + files: [ + { + destination: outputFile, + filter: validFigmaToken, + format: `json/figma`, + options: { + outputReferences: true, + }, + }, + ], +}) diff --git a/src/platforms/index.ts b/src/platforms/index.ts index 644ba4afa..7dcab58fb 100644 --- a/src/platforms/index.ts +++ b/src/platforms/index.ts @@ -2,6 +2,7 @@ export {css} from './css' export {deprecatedJson} from './deprecatedJson' export {docJson} from './docJson' export {fallbacks} from './fallbacks' +export {figma} from './figma' export {javascript} from './javascript' export {json} from './json' export {scss} from './scss' diff --git a/src/tokens/base/color/dark/dark.dimmed.json5 b/src/tokens/base/color/dark/dark.dimmed.json5 index 4066f1ec5..10f1f73dd 100644 --- a/src/tokens/base/color/dark/dark.dimmed.json5 +++ b/src/tokens/base/color/dark/dark.dimmed.json5 @@ -8,118 +8,858 @@ black: { $value: '#1c2128', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, }, white: { $value: '#cdd9e5', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, }, gray: { - '0': {$value: '#cdd9e5', $type: 'color'}, - '1': {$value: '#adbac7', $type: 'color'}, - '2': {$value: '#909dab', $type: 'color'}, - '3': {$value: '#768390', $type: 'color'}, - '4': {$value: '#636e7b', $type: 'color'}, - '5': {$value: '#545d68', $type: 'color'}, - '6': {$value: '#444c56', $type: 'color'}, - '7': {$value: '#373e47', $type: 'color'}, - '8': {$value: '#2d333b', $type: 'color'}, - '9': {$value: '#22272e', $type: 'color'}, + '0': { + $value: '#cdd9e5', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#adbac7', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#909dab', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#768390', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#636e7b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#545d68', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#444c56', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#373e47', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#2d333b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#22272e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, blue: { - '0': {$value: '#c6e6ff', $type: 'color'}, - '1': {$value: '#96d0ff', $type: 'color'}, - '2': {$value: '#6cb6ff', $type: 'color'}, - '3': {$value: '#539bf5', $type: 'color'}, - '4': {$value: '#4184e4', $type: 'color'}, - '5': {$value: '#316dca', $type: 'color'}, - '6': {$value: '#255ab2', $type: 'color'}, - '7': {$value: '#1b4b91', $type: 'color'}, - '8': {$value: '#143d79', $type: 'color'}, - '9': {$value: '#0f2d5c', $type: 'color'}, + '0': { + $value: '#c6e6ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#96d0ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#6cb6ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#539bf5', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#4184e4', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#316dca', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#255ab2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#1b4b91', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#143d79', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#0f2d5c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, green: { - '0': {$value: '#b4f1b4', $type: 'color'}, - '1': {$value: '#8ddb8c', $type: 'color'}, - '2': {$value: '#6bc46d', $type: 'color'}, - '3': {$value: '#57ab5a', $type: 'color'}, - '4': {$value: '#46954a', $type: 'color'}, - '5': {$value: '#347d39', $type: 'color'}, - '6': {$value: '#2b6a30', $type: 'color'}, - '7': {$value: '#245829', $type: 'color'}, - '8': {$value: '#1b4721', $type: 'color'}, - '9': {$value: '#113417', $type: 'color'}, + '0': { + $value: '#b4f1b4', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#8ddb8c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#6bc46d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#57ab5a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#46954a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#347d39', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#2b6a30', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#245829', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#1b4721', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#113417', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, yellow: { - '0': {$value: '#fbe090', $type: 'color'}, - '1': {$value: '#eac55f', $type: 'color'}, - '2': {$value: '#daaa3f', $type: 'color'}, - '3': {$value: '#c69026', $type: 'color'}, - '4': {$value: '#ae7c14', $type: 'color'}, - '5': {$value: '#966600', $type: 'color'}, - '6': {$value: '#805400', $type: 'color'}, - '7': {$value: '#6c4400', $type: 'color'}, - '8': {$value: '#593600', $type: 'color'}, - '9': {$value: '#452700', $type: 'color'}, + '0': { + $value: '#fbe090', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#eac55f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#daaa3f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#c69026', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#ae7c14', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#966600', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#805400', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#6c4400', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#593600', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#452700', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, orange: { - '0': {$value: '#ffddb0', $type: 'color'}, - '1': {$value: '#ffbc6f', $type: 'color'}, - '2': {$value: '#f69d50', $type: 'color'}, - '3': {$value: '#e0823d', $type: 'color'}, - '4': {$value: '#cc6b2c', $type: 'color'}, - '5': {$value: '#ae5622', $type: 'color'}, - '6': {$value: '#94471b', $type: 'color'}, - '7': {$value: '#7f3913', $type: 'color'}, - '8': {$value: '#682d0f', $type: 'color'}, - '9': {$value: '#4d210c', $type: 'color'}, + '0': { + $value: '#ffddb0', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#ffbc6f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#f69d50', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#e0823d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#cc6b2c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#ae5622', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#94471b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#7f3913', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#682d0f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#4d210c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, red: { - '0': {$value: '#ffd8d3', $type: 'color'}, - '1': {$value: '#ffb8b0', $type: 'color'}, - '2': {$value: '#ff938a', $type: 'color'}, - '3': {$value: '#f47067', $type: 'color'}, - '4': {$value: '#e5534b', $type: 'color'}, - '5': {$value: '#c93c37', $type: 'color'}, - '6': {$value: '#ad2e2c', $type: 'color'}, - '7': {$value: '#922323', $type: 'color'}, - '8': {$value: '#78191b', $type: 'color'}, - '9': {$value: '#5d0f12', $type: 'color'}, + '0': { + $value: '#ffd8d3', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#ffb8b0', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#ff938a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#f47067', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#e5534b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#c93c37', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#ad2e2c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#922323', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#78191b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#5d0f12', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, purple: { - '0': {$value: '#eedcff', $type: 'color'}, - '1': {$value: '#dcbdfb', $type: 'color'}, - '2': {$value: '#dcbdfb', $type: 'color'}, - '3': {$value: '#b083f0', $type: 'color'}, - '4': {$value: '#986ee2', $type: 'color'}, - '5': {$value: '#8256d0', $type: 'color'}, - '6': {$value: '#6b44bc', $type: 'color'}, - '7': {$value: '#5936a2', $type: 'color'}, - '8': {$value: '#472c82', $type: 'color'}, - '9': {$value: '#352160', $type: 'color'}, + '0': { + $value: '#eedcff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#dcbdfb', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#dcbdfb', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#b083f0', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#986ee2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#8256d0', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#6b44bc', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#5936a2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#472c82', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#352160', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, pink: { - '0': {$value: '#ffd7eb', $type: 'color'}, - '1': {$value: '#ffb3d8', $type: 'color'}, - '2': {$value: '#fc8dc7', $type: 'color'}, - '3': {$value: '#e275ad', $type: 'color'}, - '4': {$value: '#c96198', $type: 'color'}, - '5': {$value: '#ae4c82', $type: 'color'}, - '6': {$value: '#983b6e', $type: 'color'}, - '7': {$value: '#7e325a', $type: 'color'}, - '8': {$value: '#69264a', $type: 'color'}, - '9': {$value: '#551639', $type: 'color'}, + '0': { + $value: '#ffd7eb', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#ffb3d8', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#fc8dc7', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#e275ad', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#c96198', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#ae4c82', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#983b6e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#7e325a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#69264a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#551639', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, coral: { - '0': {$value: '#ffdacf', $type: 'color'}, - '1': {$value: '#ffb9a5', $type: 'color'}, - '2': {$value: '#f79981', $type: 'color'}, - '3': {$value: '#ec775c', $type: 'color'}, - '4': {$value: '#de5b41', $type: 'color'}, - '5': {$value: '#c2442d', $type: 'color'}, - '6': {$value: '#a93524', $type: 'color'}, - '7': {$value: '#8d291b', $type: 'color'}, - '8': {$value: '#771d13', $type: 'color'}, - '9': {$value: '#5d1008', $type: 'color'}, + '0': { + $value: '#ffdacf', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '1': { + $value: '#ffb9a5', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '2': { + $value: '#f79981', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '3': { + $value: '#ec775c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '4': { + $value: '#de5b41', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '5': { + $value: '#c2442d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '6': { + $value: '#a93524', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '7': { + $value: '#8d291b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '8': { + $value: '#771d13', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, + '9': { + $value: '#5d1008', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'dark dimmed base', + }, + }, + }, }, }, }, diff --git a/src/tokens/base/color/dark/dark.json5 b/src/tokens/base/color/dark/dark.json5 index e39ce77b6..768214dca 100644 --- a/src/tokens/base/color/dark/dark.json5 +++ b/src/tokens/base/color/dark/dark.json5 @@ -8,123 +8,858 @@ black: { $value: '#010409', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, }, "white": { $value: '#ffffff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, }, transparent: { $value: '#000000', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, alpha: 0, }, gray: { - '0': {$value: '#f0f6fc', $type: 'color'}, - '1': {$value: '#c9d1d9', $type: 'color'}, - '2': {$value: '#b1bac4', $type: 'color'}, - '3': {$value: '#8b949e', $type: 'color'}, - '4': {$value: '#6e7681', $type: 'color'}, - '5': {$value: '#484f58', $type: 'color'}, - '6': {$value: '#30363d', $type: 'color'}, - '7': {$value: '#21262d', $type: 'color'}, - '8': {$value: '#161b22', $type: 'color'}, - '9': {$value: '#0d1117', $type: 'color'}, + '0': { + $value: '#f0f6fc', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#c9d1d9', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#b1bac4', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#8b949e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#6e7681', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#484f58', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#30363d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#21262d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#161b22', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#0d1117', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, blue: { - '0': {$value: '#cae8ff', $type: 'color'}, - '1': {$value: '#a5d6ff', $type: 'color'}, - '2': {$value: '#79c0ff', $type: 'color'}, - '3': {$value: '#58a6ff', $type: 'color'}, - '4': {$value: '#388bfd', $type: 'color'}, - '5': {$value: '#1f6feb', $type: 'color'}, - '6': {$value: '#1158c7', $type: 'color'}, - '7': {$value: '#0d419d', $type: 'color'}, - '8': {$value: '#0c2d6b', $type: 'color'}, - '9': {$value: '#051d4d', $type: 'color'}, + '0': { + $value: '#cae8ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#a5d6ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#79c0ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#58a6ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#388bfd', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#1f6feb', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#1158c7', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#0d419d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#0c2d6b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#051d4d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, green: { - '0': {$value: '#aff5b4', $type: 'color'}, - '1': {$value: '#7ee787', $type: 'color'}, - '2': {$value: '#56d364', $type: 'color'}, - '3': {$value: '#3fb950', $type: 'color'}, - '4': {$value: '#2ea043', $type: 'color'}, - '5': {$value: '#238636', $type: 'color'}, - '6': {$value: '#196c2e', $type: 'color'}, - '7': {$value: '#0f5323', $type: 'color'}, - '8': {$value: '#033a16', $type: 'color'}, - '9': {$value: '#04260f', $type: 'color'}, + '0': { + $value: '#aff5b4', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#7ee787', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#56d364', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#3fb950', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#2ea043', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#238636', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#196c2e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#0f5323', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#033a16', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#04260f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, yellow: { - '0': {$value: '#f8e3a1', $type: 'color'}, - '1': {$value: '#f2cc60', $type: 'color'}, - '2': {$value: '#e3b341', $type: 'color'}, - '3': {$value: '#d29922', $type: 'color'}, - '4': {$value: '#bb8009', $type: 'color'}, - '5': {$value: '#9e6a03', $type: 'color'}, - '6': {$value: '#845306', $type: 'color'}, - '7': {$value: '#693e00', $type: 'color'}, - '8': {$value: '#4b2900', $type: 'color'}, - '9': {$value: '#341a00', $type: 'color'}, + '0': { + $value: '#f8e3a1', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#f2cc60', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#e3b341', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#d29922', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#bb8009', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#9e6a03', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#845306', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#693e00', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#4b2900', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#341a00', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, orange: { - '0': {$value: '#ffdfb6', $type: 'color'}, - '1': {$value: '#ffc680', $type: 'color'}, - '2': {$value: '#ffa657', $type: 'color'}, - '3': {$value: '#f0883e', $type: 'color'}, - '4': {$value: '#db6d28', $type: 'color'}, - '5': {$value: '#bd561d', $type: 'color'}, - '6': {$value: '#9b4215', $type: 'color'}, - '7': {$value: '#762d0a', $type: 'color'}, - '8': {$value: '#5a1e02', $type: 'color'}, - '9': {$value: '#3d1300', $type: 'color'}, + '0': { + $value: '#ffdfb6', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#ffc680', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#ffa657', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#f0883e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#db6d28', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#bd561d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#9b4215', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#762d0a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#5a1e02', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#3d1300', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, red: { - '0': {$value: '#ffdcd7', $type: 'color'}, - '1': {$value: '#ffc1ba', $type: 'color'}, - '2': {$value: '#ffa198', $type: 'color'}, - '3': {$value: '#ff7b72', $type: 'color'}, - '4': {$value: '#f85149', $type: 'color'}, - '5': {$value: '#da3633', $type: 'color'}, - '6': {$value: '#b62324', $type: 'color'}, - '7': {$value: '#8e1519', $type: 'color'}, - '8': {$value: '#67060c', $type: 'color'}, - '9': {$value: '#490202', $type: 'color'}, + '0': { + $value: '#ffdcd7', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#ffc1ba', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#ffa198', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#ff7b72', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#f85149', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#da3633', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#b62324', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#8e1519', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#67060c', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#490202', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, purple: { - '0': {$value: '#eddeff', $type: 'color'}, - '1': {$value: '#e2c5ff', $type: 'color'}, - '2': {$value: '#d2a8ff', $type: 'color'}, - '3': {$value: '#bc8cff', $type: 'color'}, - '4': {$value: '#a371f7', $type: 'color'}, - '5': {$value: '#8957e5', $type: 'color'}, - '6': {$value: '#6e40c9', $type: 'color'}, - '7': {$value: '#553098', $type: 'color'}, - '8': {$value: '#3c1e70', $type: 'color'}, - '9': {$value: '#271052', $type: 'color'}, + '0': { + $value: '#eddeff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#e2c5ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#d2a8ff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#bc8cff', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#a371f7', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#8957e5', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#6e40c9', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#553098', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#3c1e70', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#271052', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, pink: { - '0': {$value: '#ffdaec', $type: 'color'}, - '1': {$value: '#ffbedd', $type: 'color'}, - '2': {$value: '#ff9bce', $type: 'color'}, - '3': {$value: '#f778ba', $type: 'color'}, - '4': {$value: '#db61a2', $type: 'color'}, - '5': {$value: '#bf4b8a', $type: 'color'}, - '6': {$value: '#9e3670', $type: 'color'}, - '7': {$value: '#7d2457', $type: 'color'}, - '8': {$value: '#5e103e', $type: 'color'}, - '9': {$value: '#42062a', $type: 'color'}, + '0': { + $value: '#ffdaec', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#ffbedd', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#ff9bce', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#f778ba', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#db61a2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#bf4b8a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#9e3670', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#7d2457', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#5e103e', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#42062a', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, coral: { - '0': {$value: '#ffddd2', $type: 'color'}, - '1': {$value: '#ffc2b2', $type: 'color'}, - '2': {$value: '#ffa28b', $type: 'color'}, - '3': {$value: '#f78166', $type: 'color'}, - '4': {$value: '#ea6045', $type: 'color'}, - '5': {$value: '#cf462d', $type: 'color'}, - '6': {$value: '#ac3220', $type: 'color'}, - '7': {$value: '#872012', $type: 'color'}, - '8': {$value: '#640d04', $type: 'color'}, - '9': {$value: '#460701', $type: 'color'}, + '0': { + $value: '#ffddd2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '1': { + $value: '#ffc2b2', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '2': { + $value: '#ffa28b', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '3': { + $value: '#f78166', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '4': { + $value: '#ea6045', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '5': { + $value: '#cf462d', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '6': { + $value: '#ac3220', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '7': { + $value: '#872012', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '8': { + $value: '#640d04', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, + '9': { + $value: '#460701', + $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/dark", + }, + }, + }, }, }, }, diff --git a/src/tokens/base/color/light/light.json5 b/src/tokens/base/color/light/light.json5 index aa44e32ff..4dbadeab5 100644 --- a/src/tokens/base/color/light/light.json5 +++ b/src/tokens/base/color/light/light.json5 @@ -8,392 +8,857 @@ black: { $value: '#1f2328', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, transparent: { $value: '#ffffff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, alpha: 0, }, white: { $value: '#ffffff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, gray: { '0': { $value: '#f6f8fa', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#eaeef2', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#d0d7de', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#afb8c1', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#8c959f', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#6e7781', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#57606a', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#424a53', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#32383f', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#24292f', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, blue: { '0': { $value: '#ddf4ff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#b6e3ff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#80ccff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#54aeff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#218bff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#0969da', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#0550ae', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#033d8b', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#0a3069', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#002155', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, green: { '0': { $value: '#dafbe1', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#aceebb', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#6fdd8b', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#4ac26b', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#2da44e', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#1a7f37', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#116329', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#044f1e', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#003d16', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#002d11', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, yellow: { '0': { $value: '#fff8c5', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#fae17d', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#eac54f', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#d4a72c', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#bf8700', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#9a6700', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#7d4e00', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#633c01', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#4d2d00', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#3b2300', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, orange: { '0': { $value: '#fff1e5', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#ffd8b5', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#ffb77c', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#fb8f44', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#e16f24', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#bc4c00', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#953800', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#762c00', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#5c2200', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#471700', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, red: { '0': { $value: '#ffebe9', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#ffcecb', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#ffaba8', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#ff8182', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#fa4549', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#cf222e', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#a40e26', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#82071e', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#660018', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#4c0014', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, purple: { '0': { $value: '#fbefff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#ecd8ff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#d8b9ff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#c297ff', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#a475f9', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#8250df', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#6639ba', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#512a97', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#3e1f79', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#2e1461', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, pink: { '0': { $value: '#ffeff7', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#ffd3eb', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#ffadda', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#ff80c8', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#e85aad', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#bf3989', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#99286e', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#772057', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#611347', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#4d0336', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, coral: { '0': { $value: '#fff0eb', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '1': { $value: '#ffd6cc', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '2': { $value: '#ffb4a1', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '3': { $value: '#fd8c73', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '4': { $value: '#ec6547', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '5': { $value: '#c4432b', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '6': { $value: '#9e2f1c', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '7': { $value: '#801f0f', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '8': { $value: '#691105', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, '9': { $value: '#510901', $type: 'color', + $extensions: { + 'org.primer.figma': { + "collection": "base/color/light", + }, + }, }, }, }, diff --git a/src/tokens/base/size/size.json b/src/tokens/base/size/size.json index 8ea0f1117..0209a4d7e 100644 --- a/src/tokens/base/size/size.json +++ b/src/tokens/base/size/size.json @@ -3,71 +3,173 @@ "size": { "4": { "$value": "4px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "8": { "$value": "8px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "12": { "$value": "12px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "16": { "$value": "16px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "20": { "$value": "20px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "24": { "$value": "24px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "28": { "$value": "28px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "32": { "$value": "32px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "36": { "$value": "36px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "40": { "$value": "40px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "44": { "$value": "44px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "48": { "$value": "48px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "64": { "$value": "64px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "80": { "$value": "80px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "96": { "$value": "96px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "112": { "$value": "112px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } }, "128": { "$value": "128px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "base/size", + "scopes": ["size"] + } + } } } } diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5 index 6d1bad399..7f57017f7 100644 --- a/src/tokens/functional/color/dark/app-dark.json5 +++ b/src/tokens/functional/color/dark/app-dark.json5 @@ -3,6 +3,13 @@ borderColor: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, highlight: { @@ -10,6 +17,13 @@ bgColor: { $value: '{base.color.yellow.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -19,6 +33,13 @@ bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -28,27 +49,62 @@ text: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, num: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { num: { $value: '{base.color.green.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.3, }, line: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, mix: null, }, word: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -58,27 +114,62 @@ text: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, num: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { num: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.3, }, line: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, mix: null, }, word: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -88,6 +179,13 @@ num: { $value: '{borderColor.accent.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -95,6 +193,13 @@ iconColor: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -103,6 +208,13 @@ bgColor: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -110,15 +222,36 @@ fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, gutters: { bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, gutterMarker: { @@ -126,10 +259,24 @@ default: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, muted: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -137,36 +284,78 @@ fgColor: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, cursor: { fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, selection: { bgColor: { $value: '{borderColor.accent.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, activeline: { bgColor: { $value: '{bgColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, matchingBracket: { fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, lines: { bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, syntax: { @@ -174,34 +363,90 @@ comment: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, constant: { $value: '{base.color.blue.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, entity: { $value: '{base.color.purple.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, keyword: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, storage: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, string: { $value: '{base.color.blue.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, support: { $value: '{base.color.blue.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, variable: { $value: '{base.color.orange.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -211,21 +456,49 @@ default: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.7, }, logo: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, borderColor: { divider: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -233,10 +506,24 @@ bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, borderColor: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, } diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index eb58f6ccb..0227ba441 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -3,11 +3,25 @@ bgColor: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, borderColor: { $value: '{borderColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, avatarStack: { @@ -16,10 +30,24 @@ default: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, muted: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -29,10 +57,24 @@ rest: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.2, @@ -41,6 +83,13 @@ active: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.4, @@ -49,34 +98,83 @@ disabled: { $value: '{bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, placeholder: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, emphasis: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.2, @@ -85,28 +183,70 @@ disabled: { $value: '{borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, selected: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, success: { $value: '{borderColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, danger: { $value: '{borderColor.danger.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, warning: { $value: '{borderColor.attention.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, iconColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, transparent: { @@ -114,24 +254,59 @@ rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.12, }, active: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, disabled: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.08, }, }, @@ -139,14 +314,35 @@ rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -155,20 +351,48 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { hover: { $value: '{bgColor.danger.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{bgColor.danger.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -178,10 +402,24 @@ rest: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.blue.3}', weight: 0.2, @@ -190,6 +428,13 @@ active: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.blue.3}', weight: 0.4, @@ -198,26 +443,61 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{base.color.black}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.blue.3}', weight: 0.2, @@ -226,6 +506,13 @@ active: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.blue.3}', weight: 0.4, @@ -234,6 +521,13 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -243,10 +537,24 @@ rest: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.2, @@ -255,6 +563,13 @@ active: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.4, @@ -263,26 +578,61 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -291,28 +641,70 @@ rest: { $value: '{base.color.black}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, checked: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{control.borderColor.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, checked: { $value: '{control.checked.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -320,6 +712,13 @@ borderColor: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, button: { @@ -328,46 +727,116 @@ rest: { $value: '{control.fgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{control.bgColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{control.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{control.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -376,10 +845,24 @@ rest: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -387,16 +870,37 @@ rest: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.3}', weight: 0.2, @@ -405,6 +909,13 @@ active: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.3}', weight: 0.4, @@ -413,6 +924,13 @@ disabled: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.2}', weight: 0.6, @@ -423,15 +941,36 @@ rest: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.1, }, hover: { $value: '{button.primary.borderColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{button.primary.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -440,46 +979,116 @@ rest: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{control.fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.transparent.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{control.transparent.bgColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{control.transparent.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{control.transparent.borderColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{control.transparent.borderColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -488,18 +1097,46 @@ rest: { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, active: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -507,28 +1144,70 @@ rest: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{base.color.blue.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { hover: { $value: '{borderColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, selected: { $value: '{borderColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -537,18 +1216,46 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, active: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -556,24 +1263,59 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.red.4}', weight: 0.4, @@ -582,20 +1324,48 @@ disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{button.danger.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -606,6 +1376,13 @@ rest: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -614,6 +1391,13 @@ rest: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 1, }, }, @@ -623,6 +1407,13 @@ rest: { $value: '{base.color.green.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, }, @@ -632,16 +1423,37 @@ rest: { $value: '{base.color.blue.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, hover: { $value: '{base.color.blue.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, disabled: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.05, }, }, @@ -649,14 +1461,35 @@ rest: { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -666,16 +1499,37 @@ hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, disabled: { $value: '{bgColor.danger.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.05, }, rest: { $value: '{base.color.red.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, }, @@ -683,14 +1537,35 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -700,29 +1575,64 @@ outlineColor: { $value: '{borderColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, header: { bgColor: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.95, }, fgColor: { default: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, alpha: 0.7, }, logo: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { divider: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -730,10 +1640,24 @@ bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, borderColor: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, menu: { @@ -741,6 +1665,13 @@ active: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -748,11 +1679,25 @@ bgColor: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, backdrop: { bgColor: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -761,11 +1706,25 @@ borderColor: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, bgColor: { active: { $value: '{base.color.blue.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -774,6 +1733,13 @@ selected: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -781,6 +1747,13 @@ bgColor: { $value: '{base.color.gray.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, treeViewItem: { @@ -789,6 +1762,13 @@ rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -798,16 +1778,37 @@ active: { $value: '{base.color.coral.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{borderColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, iconColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, }, diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index d9004d4d5..7a92e7ec4 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -3,6 +3,13 @@ default: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.gray.1}', weight: 0.25, @@ -11,6 +18,13 @@ muted: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.gray.4}', weight: 0.5, @@ -19,20 +33,48 @@ onEmphasis: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, link: { rest: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, accent: { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.blue.5}', weight: 0.35, @@ -41,165 +83,396 @@ success: { $value: '{base.color.green.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, attention: { $value: '{base.color.yellow.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, severe: { $value: '{base.color.orange.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, danger: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, open: { $value: '{fgColor.success}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, closed: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, done: { $value: '{base.color.purple.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, sponsors: { $value: '{base.color.pink.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { default: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, muted: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{base.color.gray.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, transparent: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, neutral: { muted: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, }, emphasis: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, accent: { muted: { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, success: { muted: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, }, emphasis: { $value: '{base.color.green.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, attention: { muted: { $value: '{base.color.yellow.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, }, emphasis: { $value: '{base.color.yellow.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, severe: { muted: { $value: '{base.color.orange.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, danger: { muted: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, open: { muted: { $value: '{bgColor.success.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, emphasis: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, closed: { muted: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, done: { muted: { $value: '{base.color.purple.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.15, }, emphasis: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, sponsors: { muted: { $value: '{base.color.pink.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, emphasis: { $value: '{base.color.pink.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -207,131 +480,306 @@ default: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, muted: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, transparent: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, neutral: { muted: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, accent: { muted: { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, success: { muted: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.green.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, attention: { muted: { $value: '{base.color.yellow.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.yellow.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, severe: { muted: { $value: '{base.color.orange.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, danger: { muted: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, open: { muted: { $value: '{borderColor.success.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, emphasis: { $value: '{borderColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, closed: { muted: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, done: { muted: { $value: '{base.color.purple.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, sponsors: { muted: { $value: '{base.color.pink.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.pink.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['borderColor'], + }, + }, }, }, }, diff --git a/src/tokens/functional/color/dark/syntax-dark.json5 b/src/tokens/functional/color/dark/syntax-dark.json5 index d0faa57e9..c0907e204 100644 --- a/src/tokens/functional/color/dark/syntax-dark.json5 +++ b/src/tokens/functional/color/dark/syntax-dark.json5 @@ -4,70 +4,172 @@ black: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'black-bright': { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, white: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'white-bright': { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, gray: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, red: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'red-bright': { $value: '{base.color.red.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, green: { $value: '{base.color.green.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'green-bright': { $value: '{base.color.green.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, yellow: { $value: '{base.color.yellow.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'yellow-bright': { $value: '{base.color.yellow.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, blue: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'blue-bright': { $value: '{base.color.blue.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, magenta: { $value: '{base.color.purple.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'magenta-bright': { $value: '{base.color.purple.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, cyan: { $value: '#39c5cf', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'cyan-bright': { $value: '#56d4dd', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, prettylights: { @@ -75,51 +177,117 @@ comment: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, constant: { $value: '{base.color.blue.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, 'constant-other-reference-link': { $value: '{base.color.blue.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, entity: { $value: '{base.color.purple.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, storage: { modifier: { import: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, 'entity-tag': { $value: '{base.color.green.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, keyword: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, string: { $value: '{base.color.blue.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, variable: { $value: '{base.color.orange.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, brackethighlighter: { unmatched: { $value: '{base.color.red.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, angle: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, invalid: { @@ -127,10 +295,22 @@ text: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.red.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, @@ -139,72 +319,162 @@ text: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, 'string-regexp': { $value: '{base.color.green.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, markup: { list: { $value: '{base.color.yellow.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, heading: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, italic: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bold: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, deleted: { text: { $value: '{base.color.red.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.red.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, inserted: { text: { $value: '{base.color.green.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.green.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, changed: { text: { $value: '{base.color.orange.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.orange.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, ignored: { text: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, bg: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, @@ -213,6 +483,12 @@ range: { $value: '{base.color.purple.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, @@ -221,6 +497,12 @@ mark: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'dark', + }, + }, }, }, }, diff --git a/src/tokens/functional/color/light/app-light.json5 b/src/tokens/functional/color/light/app-light.json5 index 79accca5a..fc213c285 100644 --- a/src/tokens/functional/color/light/app-light.json5 +++ b/src/tokens/functional/color/light/app-light.json5 @@ -3,6 +3,13 @@ borderColor: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, highlight: { @@ -10,6 +17,13 @@ bgColor: { $value: '{base.color.yellow.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -18,6 +32,13 @@ bgColor: { $value: '{bgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -27,16 +48,37 @@ text: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, num: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { num: { $value: '{base.color.green.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.0}', weight: 0.8, @@ -45,10 +87,24 @@ line: { $value: '{base.color.green.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, word: { $value: '{base.color.green.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -57,24 +113,59 @@ text: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, num: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { num: { $value: '{base.color.red.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, line: { $value: '{base.color.red.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, word: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -84,6 +175,13 @@ num: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -92,6 +190,13 @@ iconColor: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -100,6 +205,13 @@ bgColor: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -107,15 +219,36 @@ fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, gutters: { bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, gutterMarker: { @@ -123,10 +256,24 @@ default: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, muted: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -134,36 +281,78 @@ fgColor: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, cursor: { fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, selection: { bgColor: { $value: '{borderColor.accent.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, activeline: { bgColor: { $value: '{bgColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, matchingBracket: { fgColor: { $value: '{fgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, lines: { bgColor: { $value: '{bgColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, syntax: { @@ -171,34 +360,90 @@ comment: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, constant: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, entity: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, keyword: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, storage: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, string: { $value: '{base.color.blue.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, support: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, variable: { $value: '{base.color.orange.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, }, @@ -208,21 +453,49 @@ default: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.7, }, logo: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, borderColor: { divider: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -230,10 +503,24 @@ bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, borderColor: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, } diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index e7bc95122..343868531 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -3,10 +3,24 @@ bgColor: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, borderColor: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, avatarStack: { @@ -15,10 +29,24 @@ default: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, muted: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -28,10 +56,24 @@ rest: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.2}', weight: 0.2, @@ -40,6 +82,13 @@ active: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.2}', weight: 0.4, @@ -48,34 +97,83 @@ disabled: { $value: '{bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, placeholder: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, emphasis: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.2, @@ -84,28 +182,70 @@ disabled: { $value: '{borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, selected: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, success: { $value: '{borderColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, danger: { $value: '{borderColor.danger.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, warning: { $value: '{borderColor.attention.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, iconColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, transparent: { @@ -113,38 +253,94 @@ rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, active: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -153,20 +349,48 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { hover: { $value: '{bgColor.danger.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{bgColor.danger.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.4, }, }, @@ -176,10 +400,24 @@ rest: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.blue.7}', weight: 0.2, @@ -188,6 +426,13 @@ active: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.blue.7}', weight: 0.4, @@ -196,26 +441,61 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.blue.7}', weight: 0.2, @@ -224,6 +504,13 @@ active: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, mix: { color: '{base.color.blue.7}', weight: 0.4, @@ -232,6 +519,13 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -241,10 +535,24 @@ rest: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.3}', weight: 0.2, @@ -253,6 +561,13 @@ active: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.gray.3}', weight: 0.4, @@ -261,26 +576,61 @@ disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, fgColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.onEmphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -289,28 +639,70 @@ rest: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, checked: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{control.borderColor.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, checked: { $value: '{control.checked.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -318,6 +710,13 @@ borderColor: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, button: { @@ -326,24 +725,59 @@ rest: { $value: '{control.fgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{control.bgColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{control.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, selected: { $value: '{control.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', @@ -354,18 +788,46 @@ rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + } + }, }, }, }, @@ -374,10 +836,24 @@ rest: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.8, }, }, @@ -385,6 +861,13 @@ rest: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.8, }, }, @@ -392,10 +875,24 @@ rest: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.6}', weight: 0.2, @@ -404,6 +901,13 @@ active: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.6}', weight: 0.4, @@ -412,6 +916,13 @@ disabled: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.0}', weight: 0.6, @@ -422,15 +933,36 @@ rest: { $value: '{base.color.black}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.15, }, hover: { $value: '{button.primary.borderColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{button.primary.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -439,46 +971,116 @@ rest: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{control.fgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.transparent.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{control.transparent.bgColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{control.transparent.bgColor.active}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{control.transparent.borderColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{control.transparent.borderColor.hover}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{control.borderColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -487,18 +1089,46 @@ rest: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, active: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -506,14 +1136,35 @@ rest: { $value: '{control.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.blue.7}', weight: 0.4, @@ -522,16 +1173,37 @@ disabled: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { hover: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -540,18 +1212,46 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, active: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -559,24 +1259,59 @@ rest: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { rest: { $value: '{control.bgColor.rest}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, hover: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, active: { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.red.8}', weight: 0.4, @@ -585,20 +1320,48 @@ disabled: { $value: '{control.bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, borderColor: { rest: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, active: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -609,6 +1372,13 @@ rest: { $value: '{bgColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 1, }, }, @@ -618,6 +1388,13 @@ rest: { $value: '{bgColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 1, }, }, @@ -627,6 +1404,13 @@ rest: { $value: '{base.color.green.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, }, @@ -636,16 +1420,37 @@ rest: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, disabled: { $value: '{bgColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.05, }, }, @@ -653,14 +1458,35 @@ rest: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -670,16 +1496,37 @@ hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, disabled: { $value: '{bgColor.danger.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.05, }, rest: { $value: '{bgColor.danger.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.1, }, }, @@ -687,6 +1534,13 @@ rest: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.red.6}', weight: 0.3, @@ -695,10 +1549,24 @@ hover: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.5, }, }, @@ -708,28 +1576,63 @@ outlineColor: { $value: '{borderColor.accent.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, header: { bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, fgColor: { default: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, alpha: 0.7, }, logo: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, borderColor: { divider: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, @@ -737,10 +1640,24 @@ bgColor: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, borderColor: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, menu: { @@ -748,6 +1665,13 @@ active: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -755,11 +1679,25 @@ bgColor: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, backdrop: { bgColor: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.2, }, }, @@ -768,11 +1706,25 @@ borderColor: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, bgColor: { active: { $value: '{base.color.blue.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -781,6 +1733,13 @@ selected: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -788,6 +1747,13 @@ bgColor: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, treeViewItem: { @@ -796,6 +1762,13 @@ rest: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -805,16 +1778,37 @@ active: { $value: '{base.color.coral.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, hover: { $value: '{borderColor.neutral.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, iconColor: { rest: { $value: '{fgColor.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, }, diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index a29788846..4f1aff0d1 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -3,10 +3,24 @@ default: { $value: '{base.color.black}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, muted: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.gray.5}', weight: 0.5, @@ -15,36 +29,92 @@ onEmphasis: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, disabled: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, link: { rest: { $value: '{fgColor.accent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, accent: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, success: { $value: '{base.color.green.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, attention: { $value: '{base.color.yellow.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, severe: { $value: '{base.color.orange.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, danger: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, mix: { color: '{base.color.red.4}', weight: 0.05, @@ -53,70 +123,175 @@ open: { $value: '{fgColor.success}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, closed: { $value: '{fgColor.danger}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, done: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, sponsors: { $value: '{base.color.pink.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, bgColor: { default: { $value: '{base.color.white}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, muted: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, disabled: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, transparent: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, neutral: { muted: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, alpha: 0.5, }, emphasis: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, accent: { muted: { $value: '{base.color.blue.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, success: { muted: { $value: '{base.color.green.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, mix: { color: '{base.color.green.5}', weight: 0.75, @@ -127,70 +302,168 @@ muted: { $value: '{base.color.yellow.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.yellow.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, severe: { muted: { $value: '{base.color.orange.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, danger: { muted: { $value: '{base.color.red.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, open: { muted: { $value: '{bgColor.success.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{bgColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, closed: { muted: { $value: '{base.color.red.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, done: { muted: { $value: '{base.color.purple.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, sponsors: { muted: { $value: '{base.color.pink.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, emphasis: { $value: '{base.color.pink.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, }, }, }, @@ -198,131 +471,306 @@ default: { $value: '{base.color.gray.2}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, muted: { $value: '{borderColor.default}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, disabled: { $value: '{bgColor.disabled}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, transparent: { $value: '{base.color.transparent}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, neutral: { muted: { $value: '{base.color.gray.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.2, }, emphasis: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, accent: { muted: { $value: '{base.color.blue.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, success: { muted: { $value: '{base.color.green.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.green.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, attention: { muted: { $value: '{base.color.yellow.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.yellow.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, severe: { muted: { $value: '{base.color.orange.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, danger: { muted: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, open: { muted: { $value: '{borderColor.success.muted}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, emphasis: { $value: '{borderColor.success.emphasis}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, closed: { muted: { $value: '{base.color.red.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, done: { muted: { $value: '{base.color.purple.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, sponsors: { muted: { $value: '{base.color.pink.3}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, alpha: 0.4, }, emphasis: { $value: '{base.color.pink.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['borderColor'], + }, + }, }, }, }, diff --git a/src/tokens/functional/color/light/syntax-light.json5 b/src/tokens/functional/color/light/syntax-light.json5 index 9839c4219..8e707c26f 100644 --- a/src/tokens/functional/color/light/syntax-light.json5 +++ b/src/tokens/functional/color/light/syntax-light.json5 @@ -4,70 +4,172 @@ black: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'black-bright': { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, white: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'white-bright': { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, gray: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, red: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'red-bright': { $value: '{base.color.red.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, green: { $value: '{base.color.green.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'green-bright': { $value: '{base.color.green.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, yellow: { $value: '{base.color.yellow.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'yellow-bright': { $value: '{base.color.yellow.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, blue: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'blue-bright': { $value: '{base.color.blue.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, magenta: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'magenta-bright': { $value: '{base.color.purple.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, cyan: { $value: '#1b7c83', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'cyan-bright': { $value: '#3192aa', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, prettylights: { @@ -75,51 +177,117 @@ comment: { $value: '{base.color.gray.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, constant: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, 'constant-other-reference-link': { $value: '{base.color.blue.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, entity: { $value: '{base.color.purple.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, storage: { modifier: { import: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, }, 'entity-tag': { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, keyword: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, string: { $value: '{base.color.blue.8}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, variable: { $value: '{base.color.orange.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, brackethighlighter: { unmatched: { $value: '{base.color.red.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, angle: { $value: '{base.color.gray.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, invalid: { @@ -127,10 +295,22 @@ text: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.red.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, }, @@ -139,72 +319,162 @@ text: { $value: '{base.color.gray.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.red.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, }, 'string-regexp': { $value: '{base.color.green.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, markup: { list: { $value: '{base.color.yellow.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, heading: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, italic: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bold: { $value: '{base.color.gray.9}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, deleted: { text: { $value: '{base.color.red.7}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.red.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, inserted: { text: { $value: '{base.color.green.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.green.0}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, changed: { text: { $value: '{base.color.orange.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.orange.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, ignored: { text: { $value: '{base.color.gray.1}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, bg: { $value: '{base.color.blue.6}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, }, @@ -213,6 +483,12 @@ range: { $value: '{base.color.purple.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, }, @@ -221,9 +497,15 @@ mark: { $value: '{base.color.gray.4}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'pattern/mode', + mode: 'light', + }, + }, }, }, - } + }, }, }, }, diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json index 23b03be55..e875da073 100644 --- a/src/tokens/functional/size/border.json +++ b/src/tokens/functional/size/border.json @@ -30,20 +30,45 @@ }, "borderRadius": { "small": { - "$value": "3px", - "$type": "dimension" + "value": "3px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["radius"] + } + } }, "medium": { - "$value": "6px", - "$type": "dimension" + "value": "6px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["radius"] + } + } }, "large": { - "$value": "12px", - "$type": "dimension" + "value": "12px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["radius"] + } + } }, "full": { - "$value": "9999px", - "$type": "dimension" + "value": "9999px", + "$type": "dimension", + "$description": "Use this border radius for pill shaped elements", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["radius"] + } + } } }, "outline": { diff --git a/src/tokens/functional/size/breakpoints.json b/src/tokens/functional/size/breakpoints.json index 74ba054d3..a634ba1fd 100644 --- a/src/tokens/functional/size/breakpoints.json +++ b/src/tokens/functional/size/breakpoints.json @@ -2,27 +2,63 @@ "breakpoint": { "xsmall": { "$value": "320px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "small": { "$value": "544px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "medium": { "$value": "768px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "large": { "$value": "1012px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "xlarge": { "$value": "1280px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "xxlarge": { "$value": "1440px", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } } } } diff --git a/src/tokens/functional/size/size.json b/src/tokens/functional/size/size.json index 3df303ff4..1b79334ec 100644 --- a/src/tokens/functional/size/size.json +++ b/src/tokens/functional/size/size.json @@ -3,21 +3,45 @@ "minTarget": { "fine": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "coarse": { "$value": "{base.size.44}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } } }, "xsmall": { "size": { "$value": "{base.size.24}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "lineBoxHeight": { "$value": "{base.size.20}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "paddingBlock": { "$value": "2px", @@ -26,30 +50,66 @@ "paddingInline": { "condensed": { "$value": "{base.size.4}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "normal": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "$value": "{base.size.4}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "small": { "size": { "$value": "{base.size.28}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "lineBoxHeight": { "$value": "{base.size.20}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "paddingBlock": { "$value": "{base.size.4}", @@ -58,26 +118,56 @@ "paddingInline": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "normal": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "$value": "{base.size.4}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "medium": { "size": { "$value": "{base.size.32}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "lineBoxHeight": { "$value": "{base.size.20}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "paddingBlock": { "$value": "6px", @@ -86,30 +176,66 @@ "paddingInline": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "normal": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "large": { "size": { "$value": "{base.size.40}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "lineBoxHeight": { "$value": "{base.size.20}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "paddingBlock": { "$value": "10px", @@ -118,26 +244,56 @@ "paddingInline": { "normal": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "xlarge": { "size": { "$value": "{base.size.48}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "lineBoxHeight": { "$value": "{base.size.20}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["size"] + } + } }, "paddingBlock": { "$value": "14px", @@ -146,16 +302,34 @@ "paddingInline": { "normal": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } } }, @@ -163,29 +337,65 @@ "padding": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "normal": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.24}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } }, "gap": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "normal": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.24}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } } }, @@ -194,11 +404,23 @@ "gap": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.16}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } } }, @@ -206,11 +428,23 @@ "gap": { "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } } }, @@ -218,15 +452,33 @@ "gap": { "auto": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "condensed": { "$value": "{base.size.8}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } }, "spacious": { "$value": "{base.size.12}", - "$type": "dimension" + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "functional/size", + "scopes": ["gap"] + } + } } } } From a3574d6e064e49375f859955bd6c984a72bbe93e Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 19 Jul 2023 18:45:47 +0200 Subject: [PATCH 2/2] fix issues with token validation --- src/tokens/base/color/dark/dark.dimmed.json5 | 188 +++++++++---------- src/tokens/functional/size/border.json | 8 +- 2 files changed, 98 insertions(+), 98 deletions(-) diff --git a/src/tokens/base/color/dark/dark.dimmed.json5 b/src/tokens/base/color/dark/dark.dimmed.json5 index 10f1f73dd..5316c92c4 100644 --- a/src/tokens/base/color/dark/dark.dimmed.json5 +++ b/src/tokens/base/color/dark/dark.dimmed.json5 @@ -10,12 +10,12 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -24,12 +24,12 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -39,7 +39,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -48,7 +48,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -57,7 +57,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -66,7 +66,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -75,7 +75,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -84,7 +84,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -93,7 +93,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -102,7 +102,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -111,7 +111,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -120,7 +120,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -131,7 +131,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -140,7 +140,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -149,7 +149,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -158,7 +158,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -167,7 +167,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -176,7 +176,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -185,7 +185,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -194,7 +194,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -203,7 +203,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -212,7 +212,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -223,7 +223,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -232,7 +232,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -241,7 +241,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -250,7 +250,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -259,7 +259,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -268,7 +268,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -277,7 +277,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -286,7 +286,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -295,7 +295,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -304,7 +304,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -315,7 +315,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -324,7 +324,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -333,7 +333,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -342,7 +342,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -351,7 +351,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -360,7 +360,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -369,7 +369,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -378,7 +378,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -387,7 +387,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -396,7 +396,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -407,7 +407,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -416,7 +416,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -425,7 +425,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -434,7 +434,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -443,7 +443,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -452,7 +452,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -461,7 +461,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -470,7 +470,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -479,7 +479,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -488,7 +488,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -499,7 +499,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -508,7 +508,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -517,7 +517,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -526,7 +526,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -535,7 +535,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -544,7 +544,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -553,7 +553,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -562,7 +562,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -571,7 +571,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -580,7 +580,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -591,7 +591,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -600,7 +600,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -609,7 +609,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -618,7 +618,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -627,7 +627,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -636,7 +636,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -645,7 +645,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -654,7 +654,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -663,7 +663,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -672,7 +672,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -683,7 +683,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -692,7 +692,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -701,7 +701,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -710,7 +710,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -719,7 +719,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -728,7 +728,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -737,7 +737,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -746,7 +746,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -755,7 +755,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -764,7 +764,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -775,7 +775,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -784,7 +784,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -793,7 +793,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -802,7 +802,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -811,7 +811,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -820,7 +820,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -829,7 +829,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -838,7 +838,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -847,7 +847,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, @@ -856,7 +856,7 @@ $type: 'color', $extensions: { 'org.primer.figma': { - collection: 'dark dimmed base', + collection: 'base/color/dark-dimmed', }, }, }, diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json index e875da073..7bd66abcf 100644 --- a/src/tokens/functional/size/border.json +++ b/src/tokens/functional/size/border.json @@ -30,7 +30,7 @@ }, "borderRadius": { "small": { - "value": "3px", + "$value": "3px", "$type": "dimension", "$extensions": { "org.primer.figma": { @@ -40,7 +40,7 @@ } }, "medium": { - "value": "6px", + "$value": "6px", "$type": "dimension", "$extensions": { "org.primer.figma": { @@ -50,7 +50,7 @@ } }, "large": { - "value": "12px", + "$value": "12px", "$type": "dimension", "$extensions": { "org.primer.figma": { @@ -60,7 +60,7 @@ } }, "full": { - "value": "9999px", + "$value": "9999px", "$type": "dimension", "$description": "Use this border radius for pill shaped elements", "$extensions": {