diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts index fbc6b3cc0d..dff9667b79 100644 --- a/packages/cli/bin/designsystemet.ts +++ b/packages/cli/bin/designsystemet.ts @@ -11,7 +11,7 @@ import { createSystemTokenFiles, tokenSetsToFiles } from '../src/tokens/create/f import { cliOptions, createTokens, tokenSetDimensions } from '../src/tokens/create.js'; import { generateConfigFromTokens } from '../src/tokens/generate-config.js'; import type { OutputFile, Theme } from '../src/tokens/types.js'; -import { colorNamesByCategory } from '../src/tokens/utils.js'; +import { toColorNames } from '../src/tokens/utils.js'; import { dsfs } from '../src/utils/filesystem.js'; import { parseCreateConfig, readConfigFile } from './config.js'; @@ -127,19 +127,21 @@ function makeTokenCommands() { const files: OutputFile[] = []; + // Pick colors from first theme since we have a constraint they should be the same across themes. + const colorNames = toColorNames(config.themes?.[themeNames[0]]?.colors); + for (const [name, themeConfig] of Object.entries(config.themes)) { - const { tokenSets } = await createTokens({ name, ...themeConfig } as Theme); + const { tokenSets } = await createTokens({ name, colorNames, ...themeConfig } as Theme & { + colorNames: string[]; + }); files.push(...tokenSetsToFiles(tokenSets)); } - // Pick colors from first theme since we have a constraint they should be the same across themes. - const colors = config.themes?.[themeNames[0]]?.colors ?? { main: {}, support: {} }; - files.push( ...(await createSystemTokenFiles({ tokenSetDimensions, themeNames, - colors: colorNamesByCategory(colors), + colorNames, })), ); diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts index 745cf363d9..3041bdddd8 100644 --- a/packages/cli/src/scripts/update-preview-tokens.ts +++ b/packages/cli/src/scripts/update-preview-tokens.ts @@ -6,7 +6,7 @@ import { createTokens, tokenSetDimensions } from '../tokens/create.js'; import { buildOptions, processPlatform } from '../tokens/process/platform.js'; import { processThemeObject } from '../tokens/process/utils/getMultidimensionalThemes.js'; import type { Theme } from '../tokens/types.js'; -import { colorNamesByCategory } from '../tokens/utils.js'; +import { toColorNames } from '../tokens/utils.js'; import { dsfs } from '../utils/filesystem.js'; const OUTDIR = '../../internal/components/src/tokens/design-tokens'; @@ -25,11 +25,11 @@ const toPreviewToken = (tokens: { token: TransformedToken; formatted: string }[] type PreviewToken = { variable: string; value: string }; export const formatTheme = async (themeConfig: Theme) => { - const { tokenSets } = await createTokens(themeConfig); - + const colorNames = toColorNames(themeConfig.colors); const themeNames = [themeConfig.name]; - const colors = colorNamesByCategory(themeConfig.colors); - const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors); + + const { tokenSets } = await createTokens({ ...themeConfig, colorNames } as Theme & { colorNames: string[] }); + const $themes = await generate$Themes(tokenSetDimensions, themeNames, colorNames); const processed$themes = $themes.map(processThemeObject); diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index f80f4eec4a..9ae5fbb05a 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -2,11 +2,11 @@ import { generateColorScheme } from './create/generators/primitives/color-scheme import { generateGlobals } from './create/generators/primitives/globals.js'; import { generateSize, generateSizeGlobal } from './create/generators/primitives/size.js'; import { generateFontSizes, generateTypography } from './create/generators/primitives/typography.js'; -import { generateSemanticColors } from './create/generators/semantic/color.js'; -import { generateColorModes } from './create/generators/semantic/color-modes.js'; +import { generateColorTokens } from './create/generators/semantic/color.js'; import { generateSemanticStyle } from './create/generators/semantic/style.js'; import { generateTheme } from './create/generators/themes/theme.js'; import type { Theme, TokenSet, TokenSetDimensions, TokenSets } from './types.js'; +import { toFlatColors } from './utils.js'; export const tokenSetDimensions: TokenSetDimensions = { colorSchemes: ['dark', 'light'], @@ -30,10 +30,13 @@ export const cliOptions = { }, } as const; -export const createTokens = async (theme: Theme) => { - const { colors, typography, name, borderRadius, overrides } = theme; +export const createTokens = async (theme: Theme & { colorNames: string[] }) => { + const { typography, name, borderRadius, overrides, colorNames } = theme; const { colorSchemes, sizeModes } = tokenSetDimensions; + const colors = toFlatColors(theme.colors); + const colorTokens = Object.entries(generateColorTokens(colorNames, name)); + const tokenSets: TokenSets = new Map([ ['primitives/globals', generateGlobals()], ...sizeModes.map((size): [string, TokenSet] => [`primitives/modes/size/${size}`, generateSize(size)]), @@ -47,13 +50,12 @@ export const createTokens = async (theme: Theme) => { ...colorSchemes.flatMap((scheme): [string, TokenSet][] => [ [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)], ]), - [`themes/${name}`, generateTheme(colors, name, borderRadius)], - ['semantic/color', generateSemanticColors(colors, name)], - // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1' - ...Object.entries(generateColorModes(colors, name)).flatMap(([mode, colors]): [string, TokenSet][] => - Object.entries(colors).map(([key, colorSet]): [string, TokenSet] => [`semantic/modes/${mode}/${key}`, colorSet]), - ), - [`semantic/style`, generateSemanticStyle()], + [`themes/${name}`, generateTheme(colorNames, name, borderRadius)], + ...colorTokens.map(([colorName, colorSetTokens]): [string, TokenSet] => [ + `semantic/color/${colorName}`, + colorSetTokens, + ]), + [`semantic/style`, generateSemanticStyle(colorNames)], ]); return { tokenSets }; diff --git a/packages/cli/src/tokens/create/files.ts b/packages/cli/src/tokens/create/files.ts index 6175e3c2d0..e9e2734156 100644 --- a/packages/cli/src/tokens/create/files.ts +++ b/packages/cli/src/tokens/create/files.ts @@ -1,4 +1,4 @@ -import type { ColorNamesByCategory, OutputFile, TokenSetDimensions, TokenSets } from '../types.js'; +import type { OutputFile, TokenSetDimensions, TokenSets } from '../types.js'; import { generate$Designsystemet } from './generators/$designsystemet.js'; import { generate$Metadata } from './generators/$metadata.js'; import { generate$Themes } from './generators/$themes.js'; @@ -7,7 +7,7 @@ export const stringify = (data: unknown) => JSON.stringify(data, null, 2); type CreateTokenFilesOptions = { tokenSetDimensions: TokenSetDimensions; - colors: ColorNamesByCategory; + colorNames: string[]; themeNames: string[]; }; @@ -17,15 +17,15 @@ type CreateTokenFilesOptions = { * `$themes.json` and `$metadata.json` are essential for Token Studio and Style Dictionary to correctly interpret and manage the design tokens. */ export const createSystemTokenFiles = async (options: CreateTokenFilesOptions) => { - const { colors, themeNames, tokenSetDimensions } = options; + const { colorNames, themeNames, tokenSetDimensions } = options; const files: OutputFile[] = []; const $themesPath = '$themes.json'; const $metadataPath = '$metadata.json'; const $designsystemetPath = '$designsystemet.jsonc'; - const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors); - const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colors); + const $themes = await generate$Themes(tokenSetDimensions, themeNames, colorNames); + const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colorNames); const $designsystemet = generate$Designsystemet(); files.push({ destination: $themesPath, output: stringify($themes) }); diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index 60884c74d3..0b926609c3 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -1,4 +1,4 @@ -import type { ColorNamesByCategory, TokenSetDimensions } from '../../types.js'; +import type { TokenSetDimensions } from '../../types.js'; type Metadata = { tokenSetOrder: string[]; @@ -12,7 +12,7 @@ type Metadata = { export function generate$Metadata( tokenSetDimensions: TokenSetDimensions, themeNames: string[], - colors: ColorNamesByCategory, + colorNames: string[], ): Metadata { const { colorSchemes, sizeModes } = tokenSetDimensions; return { @@ -28,8 +28,7 @@ export function generate$Metadata( ]), ...themeNames.map((theme) => `themes/${theme}`), 'semantic/color', - ...colors.main.map((color) => `semantic/modes/main-color/${color}`), - ...colors.support.map((color) => `semantic/modes/support-color/${color}`), + ...colorNames.map((color) => `semantic/color/${color}`), 'semantic/style', ], }; diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index c65392db89..c62d05d2ba 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -1,9 +1,7 @@ import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types'; import type { ColorScheme } from '../../../colors/types.js'; -import type { ColorNamesByCategory, SizeModes, TokenSetDimensions } from '../../types.js'; - -const capitalize = (word: string) => word.charAt(0).toUpperCase() + word.slice(1); +import type { SizeModes, TokenSetDimensions } from '../../types.js'; async function createHash(text: string, algo = 'SHA-1') { const crypto = globalThis.crypto; @@ -38,7 +36,7 @@ type ThemeObject_ = ThemeObject & { export async function generate$Themes( tokenSetDimensions: TokenSetDimensions, themeNames: string[], - colors: ColorNamesByCategory, + colorNames: string[], ): Promise { const { colorSchemes, sizeModes } = tokenSetDimensions; return [ @@ -47,8 +45,7 @@ export async function generate$Themes( ...generateTypographyGroup(themeNames), ...generateColorSchemesGroup(colorSchemes, themeNames), generateSemanticGroup(), - ...(await generateColorGroup('main', colors.main)), - ...(await generateColorGroup('support', colors.support)), + ...(await generateColorGroup(colorNames)), ]; } @@ -155,7 +152,6 @@ function generateSemanticGroup(): ThemeObject_ { name: 'Semantic', selectedTokenSets: { 'semantic/style': TokenSetStatus.ENABLED, - 'semantic/color': TokenSetStatus.ENABLED, 'primitives/globals': TokenSetStatus.SOURCE, }, $figmaCollectionId: 'VariableCollectionId:34811:5976', @@ -164,19 +160,16 @@ function generateSemanticGroup(): ThemeObject_ { }; } -async function generateColorGroup( - group: 'main' | 'support', - colors: ColorNamesByCategory['main'] | ColorNamesByCategory['support'], -): Promise { +async function generateColorGroup(colorNames: string[]): Promise { return Promise.all( - colors.map( + colorNames.map( async (color): Promise => ({ - id: await createHash(`${group}-${color}`), + id: await createHash(color), name: color, selectedTokenSets: { - [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED, + [`semantic/color/${color}`]: TokenSetStatus.ENABLED, }, - group: `${capitalize(group)} color`, + group: `Color`, }), ), ); diff --git a/packages/cli/src/tokens/create/generators/primitives/color-scheme.ts b/packages/cli/src/tokens/create/generators/primitives/color-scheme.ts index 57110e5831..794cc1d4a9 100644 --- a/packages/cli/src/tokens/create/generators/primitives/color-scheme.ts +++ b/packages/cli/src/tokens/create/generators/primitives/color-scheme.ts @@ -1,9 +1,9 @@ import * as R from 'ramda'; import { baseColors, colorMetadata, dsLinkColor } from '../../../../colors/colorMetadata.js'; import { generateColorScale } from '../../../../colors/index.js'; -import type { Color, ColorScheme } from '../../../../colors/types.js'; +import type { Color, ColorScheme, CssColor } from '../../../../colors/types.js'; import type { ColorOverrideSchema } from '../../../../config.js'; -import type { Colors, Token, TokenSet } from '../../../types.js'; +import type { Token, TokenSet } from '../../../types.js'; const generateColor = (colorArray: Color[], overrides?: Record): TokenSet => { const obj: TokenSet = {}; @@ -22,7 +22,7 @@ const generateColor = (colorArray: Color[], overrides?: Record): export const generateColorScheme = ( themeName: string, colorScheme: ColorScheme, - colors: Colors, + colors: Record, overrides?: ColorOverrideSchema, ): TokenSet => { /* Create override mappings for each color */ @@ -55,25 +55,21 @@ export const generateColorScheme = ( return Object.keys(positionOverrides).length > 0 ? positionOverrides : undefined; }; - const main = R.mapObjIndexed( - (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), - colors.main, - ); - - const support = R.mapObjIndexed( - (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), - colors.support, - ); + const colorScales = R.mapObjIndexed((color, colorName) => { + if (colorName === 'neutral') { + const neutralColorScale = generateColorScale(colors.neutral, colorScheme); + return generateColor(neutralColorScale, createColorOverrides('neutral')); + } - const neutralColorScale = generateColorScale(colors.neutral, colorScheme); - const neutral = generateColor(neutralColorScale, createColorOverrides('neutral')); + return generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)); + }, colors); const baseColorsWithOverrides = { ...baseColors, ...overrides?.severity, }; - const globalColors = R.mapObjIndexed( + const severityColors = R.mapObjIndexed( (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), baseColorsWithOverrides, ); @@ -85,18 +81,16 @@ export const generateColorScheme = ( : undefined; /* Default focus-inner is position 1 (background-default), focus-outer is position 11 (text-default) */ - const defaultFocusInner = neutralColorScale[0].hex; - const defaultFocusOuter = neutralColorScale[10].hex; + const defaultFocusInner = colorScales.neutral[1].$value; + const defaultFocusOuter = colorScales.neutral[11].$value; const focusInnerOverride = overrides?.focus?.inner?.[colorScheme as 'light' | 'dark']; const focusOuterOverride = overrides?.focus?.outer?.[colorScheme as 'light' | 'dark']; return { [themeName]: { - ...main, - ...support, - neutral, - ...globalColors, + ...colorScales, + ...severityColors, link: { visited: linkOverride || defaultLinkVisited, }, diff --git a/packages/cli/src/tokens/create/generators/semantic/color-modes.ts b/packages/cli/src/tokens/create/generators/semantic/color-modes.ts deleted file mode 100644 index 948d40aadc..0000000000 --- a/packages/cli/src/tokens/create/generators/semantic/color-modes.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { type ColorNames, semanticColorNames } from '../../../../colors/types.js'; -import type { Colors, Token, TokenSet } from '../../../types.js'; - -type SemanticModes = { - 'main-color': Record; - 'support-color': Record; -}; - -export const generateColorModes = (colors: Colors, _themeName: string) => { - const mainColorNames = Object.keys(colors.main); - const supportColorNames = Object.keys(colors.support); - - const modes: SemanticModes = { - 'main-color': {}, - 'support-color': {}, - }; - - const categories = [ - ['main-color', mainColorNames], - ['support-color', supportColorNames], - ] as const; - - // Create main-color and support-color modes for the custom colors - for (const [colorCategory, colorNames] of categories) { - for (const colorName of colorNames) { - const category = colorCategory.replace('-color', ''); - const customColorTokens = { - color: { - [category]: generateColorScaleTokens(colorName), - }, - }; - modes[colorCategory][colorName] = customColorTokens; - } - } - - return modes; -}; - -const generateColorScaleTokens = (colorName: string): Record => { - const colorScale = {} as Record; - - for (const colorSemantic of semanticColorNames) { - colorScale[colorSemantic] = { - $type: 'color', - $value: `{color.${colorName}.${colorSemantic}}`, - }; - } - - return colorScale; -}; diff --git a/packages/cli/src/tokens/create/generators/semantic/color.ts b/packages/cli/src/tokens/create/generators/semantic/color.ts index ac30400605..6ba99f3cd7 100644 --- a/packages/cli/src/tokens/create/generators/semantic/color.ts +++ b/packages/cli/src/tokens/create/generators/semantic/color.ts @@ -1,57 +1,24 @@ -import * as R from 'ramda'; -import { baseColorNames } from '../../../../colors/colorMetadata.js'; -import { type ColorNames, semanticColorMap } from '../../../../colors/types.js'; -import type { Colors, Token, TokenSet } from '../../../types.js'; +import { type ColorNames, semanticColorNames } from '../../../../colors/types.js'; +import type { Token, TokenSet } from '../../../types.js'; -export const generateSemanticColors = (colors: Colors, _themeName: string) => { - const mainColorNames = Object.keys(colors.main); - const supportColorNames = Object.keys(colors.support); +export const generateColorTokens = (colorNames: string[], _themeName: string): Record => { + const colorTokens = {} as Record; - const customColors = [...mainColorNames, 'neutral', ...supportColorNames]; - - const allColors = [...customColors, ...baseColorNames]; - - const semanticColorTokens = allColors.map((colorName) => [colorName, generateColorScaleTokens(colorName)]); - - return { - ...baseColorTemplate, - color: { - ...Object.fromEntries(semanticColorTokens), - ...baseColorTemplate.color, - }, - }; -}; + for (const colorName of colorNames) { + const customColorTokens = generateSemanticColorScaleTokens(colorName); + colorTokens[colorName] = customColorTokens; + } -const baseColorTemplate: TokenSet = { - color: { - focus: { - inner: { - $type: 'color', - $value: '{color.focus.inner-color}', - }, - outer: { - $type: 'color', - $value: '{color.focus.outer-color}', - }, - }, - }, - link: { - color: { - visited: { - $type: 'color', - $value: '{color.link.visited}', - }, - }, - }, + return colorTokens; }; -const generateColorScaleTokens = (colorName: string): Record => { +const generateSemanticColorScaleTokens = (colorName: string): Record => { const colorScale = {} as Record; - for (const [colorSemantic, colorNumber] of R.toPairs(semanticColorMap)) { - colorScale[colorSemantic] = { + for (const semanticColorName of semanticColorNames) { + colorScale[semanticColorName] = { $type: 'color', - $value: `{color.${colorName}.${colorNumber}}`, + $value: `{color.${colorName}.${semanticColorName}}`, }; } diff --git a/packages/cli/src/tokens/create/generators/semantic/style.ts b/packages/cli/src/tokens/create/generators/semantic/style.ts index e454fc41f1..465f9aa49c 100644 --- a/packages/cli/src/tokens/create/generators/semantic/style.ts +++ b/packages/cli/src/tokens/create/generators/semantic/style.ts @@ -1,7 +1,52 @@ +import * as R from 'ramda'; +import { type ColorNames, semanticColorMap } from '../../../../colors/types.js'; import type { Token, TokenSet } from '../../../types.js'; -export function generateSemanticStyle(): TokenSet { +export function generateSemanticStyle(colorNames: string[]): TokenSet { return { + ...generateColors(colorNames), + 'border-width': { + default: { + $type: 'borderWidth', + $value: '{border-width.1}', + }, + focus: { + $type: 'borderWidth', + $value: '{border-width.3}', + }, + }, + 'border-radius': { + sm: { + $type: 'dimension', + $value: '{border-radius.1}', + }, + md: { + $type: 'dimension', + $value: '{border-radius.2}', + }, + lg: { + $type: 'dimension', + $value: '{border-radius.3}', + }, + xl: { + $type: 'dimension', + $value: '{border-radius.4}', + }, + default: { + $type: 'dimension', + $value: '{border-radius.5}', + }, + full: { + $type: 'dimension', + $value: '{border-radius.6}', + }, + }, + opacity: { + disabled: { + $type: 'opacity', + $value: '{opacity.30}', + }, + }, typography: { heading: { '2xl': { @@ -232,22 +277,6 @@ export function generateSemanticStyle(): TokenSet { }, }, }, - opacity: { - disabled: { - $type: 'opacity', - $value: '{opacity.30}', - }, - }, - 'border-width': { - default: { - $type: 'borderWidth', - $value: '{border-width.1}', - }, - focus: { - $type: 'borderWidth', - $value: '{border-width.3}', - }, - }, shadow: { xs: { $type: 'boxShadow', @@ -270,32 +299,6 @@ export function generateSemanticStyle(): TokenSet { $value: '{shadow.500}', }, }, - 'border-radius': { - sm: { - $type: 'dimension', - $value: '{border-radius.1}', - }, - md: { - $type: 'dimension', - $value: '{border-radius.2}', - }, - lg: { - $type: 'dimension', - $value: '{border-radius.3}', - }, - xl: { - $type: 'dimension', - $value: '{border-radius.4}', - }, - default: { - $type: 'dimension', - $value: '{border-radius.5}', - }, - full: { - $type: 'dimension', - $value: '{border-radius.6}', - }, - }, size: { '0': { $type: 'dimension', @@ -419,3 +422,49 @@ function _generateTypography() { }, }; } + +export const generateColors = (colorNames: string[]) => { + const semanticColorTokens = colorNames.map((colorName) => [colorName, generateColorScaleTokens(colorName)]); + + return { + ...baseColorTemplate, + ...Object.fromEntries(semanticColorTokens), + ...baseColorTemplate.color, + }; +}; + +const baseColorTemplate: TokenSet = { + color: { + focus: { + inner: { + $type: 'color', + $value: '{color.focus.inner-color}', + }, + outer: { + $type: 'color', + $value: '{color.focus.outer-color}', + }, + }, + }, + link: { + color: { + visited: { + $type: 'color', + $value: '{color.link.visited}', + }, + }, + }, +}; + +const generateColorScaleTokens = (colorName: string): Record => { + const colorScale = {} as Record; + + for (const [colorSemantic, colorNumber] of R.toPairs(semanticColorMap)) { + colorScale[colorSemantic] = { + $type: 'color', + $value: `{color.${colorName}.${colorNumber}}`, + }; + } + + return colorScale; +}; diff --git a/packages/cli/src/tokens/create/generators/themes/theme.ts b/packages/cli/src/tokens/create/generators/themes/theme.ts index 413552abdf..6149d79908 100644 --- a/packages/cli/src/tokens/create/generators/themes/theme.ts +++ b/packages/cli/src/tokens/create/generators/themes/theme.ts @@ -1,15 +1,10 @@ import * as R from 'ramda'; -import { baseColorNames } from '../../../../colors/colorMetadata.js'; import { type ColorNumber, semanticColorMap } from '../../../../colors/types.js'; -import type { Colors, Token, TokenSet } from '../../../types.js'; - -export const generateTheme = (colors: Colors, themeName: string, borderRadius: number) => { - const mainColorNames = Object.keys(colors.main); - const supportColorNames = Object.keys(colors.support); - const customColors = [...mainColorNames, 'neutral', ...supportColorNames, ...baseColorNames]; +import type { Token, TokenSet } from '../../../types.js'; +export const generateTheme = (colorNames: string[], themeName: string, borderRadius: number) => { const themeColorTokens = Object.fromEntries( - customColors.map((colorName) => [colorName, generateColorScaleTokens(colorName, themeName)]), + colorNames.map((colorName) => [colorName, generateColorScaleTokens(colorName, themeName)]), ); const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName); diff --git a/packages/cli/src/tokens/format.ts b/packages/cli/src/tokens/format.ts index 90f622d9bf..95f7dff6dc 100644 --- a/packages/cli/src/tokens/format.ts +++ b/packages/cli/src/tokens/format.ts @@ -5,7 +5,7 @@ import { createThemeCSSFiles } from './process/output/theme.js'; import { type FormatOptions, processPlatform } from './process/platform.js'; import { processThemeObject } from './process/utils/getMultidimensionalThemes.js'; import type { Theme } from './types.js'; -import { colorNamesByCategory } from './utils.js'; +import { toColorNames } from './utils.js'; export const formatTokens = async (options: Omit) => { const processedBuilds = await processPlatform({ @@ -18,11 +18,11 @@ export const formatTokens = async (options: Omit { - const { tokenSets } = await createTokens(themeConfig); - const themeNames = [themeConfig.name]; - const colors = colorNamesByCategory(themeConfig.colors); - const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors); + const colorNames = toColorNames(themeConfig.colors); + + const { tokenSets } = await createTokens({ ...themeConfig, colorNames } as Theme & { colorNames: string[] }); + const $themes = await generate$Themes(tokenSetDimensions, themeNames, colorNames); const processed$themes = $themes.map(processThemeObject); diff --git a/packages/cli/src/tokens/utils.ts b/packages/cli/src/tokens/utils.ts index ccd4d6d4e8..ec4a3f21a1 100644 --- a/packages/cli/src/tokens/utils.ts +++ b/packages/cli/src/tokens/utils.ts @@ -1,13 +1,9 @@ import * as R from 'ramda'; import type { Tokens } from 'style-dictionary'; import type { DesignToken, TransformedToken } from 'style-dictionary/types'; -import { - type ColorCategories, - type ColorNamesByCategory, - type Colors, - colorCategories, - type TokenSet, -} from './types.js'; +import { baseColors } from '../colors/colorMetadata.js'; +import type { CssColor } from '../index.js'; +import { type ColorCategories, colorCategories, type Theme, type TokenSet } from './types.js'; const mapToLowerCase = R.map(R.toLower); @@ -166,10 +162,18 @@ export function orderBySize(sizes: string[]): string[] { return R.sortBy(sizeComparator, sizes); } -export function colorNamesByCategory(colors: Colors): ColorNamesByCategory { - const result = {} as ColorNamesByCategory; - for (const category of Object.values(colorCategories)) { - result[category] = Object.keys(colors[category] ?? {}); - } - return result; +export function toFlatColors(colors: Theme['colors']): Record { + const colorsCategories = colors ? colors : { main: {}, support: {}, neutral: `#ececec` }; + return { + ...colorsCategories.main, + ...colorsCategories.support, + neutral: colorsCategories.neutral as CssColor, + ...baseColors, + }; +} + +export function toColorNames(themeColors: Theme['colors']): string[] { + const colors = toFlatColors(themeColors); + + return Object.keys(colors); } diff --git a/packages/cli/tests/config/build/colors.d.ts b/packages/cli/tests/config/build/colors.d.ts index b47a470305..fe5c02006e 100644 --- a/packages/cli/tests/config/build/colors.d.ts +++ b/packages/cli/tests/config/build/colors.d.ts @@ -1,16 +1,10 @@ /* This file is deprecated and will be removed in a future release. Use types.d.ts instead */ -/* build: v1.13.2 */ +/* build: v1.14.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme declare module '@digdir/designsystemet-types' { export interface ColorDefinitions { - dominant: never; - complimentary: never; - first: never; - second: never; - third: never; - fourth: never; neutral: never; } export interface SeverityColorDefinitions { diff --git a/packages/cli/tests/config/build/other-org.css b/packages/cli/tests/config/build/other-org.css index 1bd3d7cd87..bf198a9c31 100644 --- a/packages/cli/tests/config/build/other-org.css +++ b/packages/cli/tests/config/build/other-org.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /* -build: v1.13.2 -design-tokens: v1.13.2 +build: v1.14.0 +design-tokens: v1.14.0 */ @layer ds.theme.size-mode { @@ -123,22 +123,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #00cc00; --ds-color-complimentary-base-contrast-subtle: #004d00; --ds-color-complimentary-base-contrast-default: #000000; - --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-tinted: #faf2ef; - --ds-color-neutral-surface-default: #ffffff; - --ds-color-neutral-surface-tinted: #f6e5e0; - --ds-color-neutral-surface-hover: #f0d4cc; - --ds-color-neutral-surface-active: #e9c1b6; - --ds-color-neutral-border-subtle: #e3b0a2; - --ds-color-neutral-border-default: #c3593a; - --ds-color-neutral-border-strong: #9c4127; - --ds-color-neutral-text-subtle: #9c4127; - --ds-color-neutral-text-default: #4a1f12; - --ds-color-neutral-base-default: #c05030; - --ds-color-neutral-base-hover: #9f4228; - --ds-color-neutral-base-active: #803520; - --ds-color-neutral-base-contrast-subtle: #fdfafa; - --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-first-background-default: #ffffff; --ds-color-first-background-tinted: #edf4fc; --ds-color-first-surface-default: #ffffff; @@ -203,6 +187,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #23371c; --ds-color-fourth-base-contrast-subtle: #f5f7f4; --ds-color-fourth-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #faf2ef; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #f6e5e0; + --ds-color-neutral-surface-hover: #f0d4cc; + --ds-color-neutral-surface-active: #e9c1b6; + --ds-color-neutral-border-subtle: #e3b0a2; + --ds-color-neutral-border-default: #c3593a; + --ds-color-neutral-border-strong: #9c4127; + --ds-color-neutral-text-subtle: #9c4127; + --ds-color-neutral-text-default: #4a1f12; + --ds-color-neutral-base-default: #c05030; + --ds-color-neutral-base-hover: #9f4228; + --ds-color-neutral-base-active: #803520; + --ds-color-neutral-base-contrast-subtle: #fdfafa; + --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-info-background-default: #ffffff; --ds-color-info-background-tinted: #edf5fa; --ds-color-info-surface-default: #ffffff; @@ -270,6 +270,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #4a1f12; --ds-link-color-visited: #663299; + --ds-background-default: #ffffff; + --ds-background-tinted: #fff0f0; + --ds-surface-default: #ffffff; + --ds-surface-tinted: #ffe2e2; + --ds-surface-hover: #ffcece; + --ds-surface-active: #ffb8b8; + --ds-border-subtle: #f9a6a6; + --ds-border-default: #a06b6b; + --ds-border-strong: #7c5353; + --ds-text-subtle: #7c5353; + --ds-text-default: #3a2626; + --ds-base-default: #ffaaaa; + --ds-base-hover: #e39797; + --ds-base-active: #c68484; + --ds-base-contrast-subtle: #3b2727; + --ds-base-contrast-default: #000000; color-scheme: light; } @@ -308,22 +324,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #00cc00; --ds-color-complimentary-base-contrast-subtle: #004d00; --ds-color-complimentary-base-contrast-default: #000000; - --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-tinted: #faf2ef; - --ds-color-neutral-surface-default: #ffffff; - --ds-color-neutral-surface-tinted: #f6e5e0; - --ds-color-neutral-surface-hover: #f0d4cc; - --ds-color-neutral-surface-active: #e9c1b6; - --ds-color-neutral-border-subtle: #e3b0a2; - --ds-color-neutral-border-default: #c3593a; - --ds-color-neutral-border-strong: #9c4127; - --ds-color-neutral-text-subtle: #9c4127; - --ds-color-neutral-text-default: #4a1f12; - --ds-color-neutral-base-default: #c05030; - --ds-color-neutral-base-hover: #9f4228; - --ds-color-neutral-base-active: #803520; - --ds-color-neutral-base-contrast-subtle: #fdfafa; - --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-first-background-default: #ffffff; --ds-color-first-background-tinted: #edf4fc; --ds-color-first-surface-default: #ffffff; @@ -388,6 +388,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #23371c; --ds-color-fourth-base-contrast-subtle: #f5f7f4; --ds-color-fourth-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #faf2ef; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #f6e5e0; + --ds-color-neutral-surface-hover: #f0d4cc; + --ds-color-neutral-surface-active: #e9c1b6; + --ds-color-neutral-border-subtle: #e3b0a2; + --ds-color-neutral-border-default: #c3593a; + --ds-color-neutral-border-strong: #9c4127; + --ds-color-neutral-text-subtle: #9c4127; + --ds-color-neutral-text-default: #4a1f12; + --ds-color-neutral-base-default: #c05030; + --ds-color-neutral-base-hover: #9f4228; + --ds-color-neutral-base-active: #803520; + --ds-color-neutral-base-contrast-subtle: #fdfafa; + --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-info-background-default: #ffffff; --ds-color-info-background-tinted: #edf5fa; --ds-color-info-surface-default: #ffffff; @@ -455,6 +471,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #4a1f12; --ds-link-color-visited: #663299; + --ds-background-default: #ffffff; + --ds-background-tinted: #fff0f0; + --ds-surface-default: #ffffff; + --ds-surface-tinted: #ffe2e2; + --ds-surface-hover: #ffcece; + --ds-surface-active: #ffb8b8; + --ds-border-subtle: #f9a6a6; + --ds-border-default: #a06b6b; + --ds-border-strong: #7c5353; + --ds-text-subtle: #7c5353; + --ds-text-default: #3a2626; + --ds-base-default: #ffaaaa; + --ds-base-hover: #e39797; + --ds-base-active: #c68484; + --ds-base-contrast-subtle: #3b2727; + --ds-base-contrast-default: #000000; color-scheme: light; } @@ -658,22 +690,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #004f00; --ds-color-complimentary-base-contrast-subtle: #a7b5a7; --ds-color-complimentary-base-contrast-default: #ffffff; - --ds-color-neutral-background-default: #24140f; - --ds-color-neutral-background-tinted: #2f1a14; - --ds-color-neutral-surface-default: #3b2119; - --ds-color-neutral-surface-tinted: #44261d; - --ds-color-neutral-surface-hover: #4f2c22; - --ds-color-neutral-surface-active: #63372b; - --ds-color-neutral-border-subtle: #774233; - --ds-color-neutral-border-default: #b56f5b; - --ds-color-neutral-border-strong: #cc9d8f; - --ds-color-neutral-text-subtle: #cc9d8f; - --ds-color-neutral-text-default: #f4eae7; - --ds-color-neutral-base-default: #c45c3e; - --ds-color-neutral-base-hover: #ce785f; - --ds-color-neutral-base-active: #d89380; - --ds-color-neutral-base-contrast-subtle: #0b0503; - --ds-color-neutral-base-contrast-default: #000000; --ds-color-first-background-default: #15181b; --ds-color-first-background-tinted: #1c2024; --ds-color-first-surface-default: #24282d; @@ -738,6 +754,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #bcc8b7; --ds-color-fourth-base-contrast-subtle: #0b0c0a; --ds-color-fourth-base-contrast-default: #000000; + --ds-color-neutral-background-default: #24140f; + --ds-color-neutral-background-tinted: #2f1a14; + --ds-color-neutral-surface-default: #3b2119; + --ds-color-neutral-surface-tinted: #44261d; + --ds-color-neutral-surface-hover: #4f2c22; + --ds-color-neutral-surface-active: #63372b; + --ds-color-neutral-border-subtle: #774233; + --ds-color-neutral-border-default: #b56f5b; + --ds-color-neutral-border-strong: #cc9d8f; + --ds-color-neutral-text-subtle: #cc9d8f; + --ds-color-neutral-text-default: #f4eae7; + --ds-color-neutral-base-default: #c45c3e; + --ds-color-neutral-base-hover: #ce785f; + --ds-color-neutral-base-active: #d89380; + --ds-color-neutral-base-contrast-subtle: #0b0503; + --ds-color-neutral-base-contrast-default: #000000; --ds-color-info-background-default: #0d1925; --ds-color-info-background-tinted: #112130; --ds-color-info-surface-default: #15293d; @@ -805,6 +837,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #24140f; --ds-color-focus-outer: #f4eae7; --ds-link-color-visited: #b49acd; + --ds-background-default: #1d1616; + --ds-background-tinted: #271d1d; + --ds-surface-default: #312525; + --ds-surface-tinted: #382a2a; + --ds-surface-hover: #423131; + --ds-surface-active: #533e3e; + --ds-border-subtle: #634a49; + --ds-border-default: #9f7777; + --ds-border-strong: #cf9b9a; + --ds-text-subtle: #cf9b9a; + --ds-text-default: #fae8e8; + --ds-base-default: #472f2f; + --ds-base-hover: #5e3f3f; + --ds-base-active: #785050; + --ds-base-contrast-subtle: #d1cbcb; + --ds-base-contrast-default: #ffffff; color-scheme: dark; } @@ -843,22 +891,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #004f00; --ds-color-complimentary-base-contrast-subtle: #a7b5a7; --ds-color-complimentary-base-contrast-default: #ffffff; - --ds-color-neutral-background-default: #24140f; - --ds-color-neutral-background-tinted: #2f1a14; - --ds-color-neutral-surface-default: #3b2119; - --ds-color-neutral-surface-tinted: #44261d; - --ds-color-neutral-surface-hover: #4f2c22; - --ds-color-neutral-surface-active: #63372b; - --ds-color-neutral-border-subtle: #774233; - --ds-color-neutral-border-default: #b56f5b; - --ds-color-neutral-border-strong: #cc9d8f; - --ds-color-neutral-text-subtle: #cc9d8f; - --ds-color-neutral-text-default: #f4eae7; - --ds-color-neutral-base-default: #c45c3e; - --ds-color-neutral-base-hover: #ce785f; - --ds-color-neutral-base-active: #d89380; - --ds-color-neutral-base-contrast-subtle: #0b0503; - --ds-color-neutral-base-contrast-default: #000000; --ds-color-first-background-default: #15181b; --ds-color-first-background-tinted: #1c2024; --ds-color-first-surface-default: #24282d; @@ -923,6 +955,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #bcc8b7; --ds-color-fourth-base-contrast-subtle: #0b0c0a; --ds-color-fourth-base-contrast-default: #000000; + --ds-color-neutral-background-default: #24140f; + --ds-color-neutral-background-tinted: #2f1a14; + --ds-color-neutral-surface-default: #3b2119; + --ds-color-neutral-surface-tinted: #44261d; + --ds-color-neutral-surface-hover: #4f2c22; + --ds-color-neutral-surface-active: #63372b; + --ds-color-neutral-border-subtle: #774233; + --ds-color-neutral-border-default: #b56f5b; + --ds-color-neutral-border-strong: #cc9d8f; + --ds-color-neutral-text-subtle: #cc9d8f; + --ds-color-neutral-text-default: #f4eae7; + --ds-color-neutral-base-default: #c45c3e; + --ds-color-neutral-base-hover: #ce785f; + --ds-color-neutral-base-active: #d89380; + --ds-color-neutral-base-contrast-subtle: #0b0503; + --ds-color-neutral-base-contrast-default: #000000; --ds-color-info-background-default: #0d1925; --ds-color-info-background-tinted: #112130; --ds-color-info-surface-default: #15293d; @@ -990,6 +1038,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #24140f; --ds-color-focus-outer: #f4eae7; --ds-link-color-visited: #b49acd; + --ds-background-default: #1d1616; + --ds-background-tinted: #271d1d; + --ds-surface-default: #312525; + --ds-surface-tinted: #382a2a; + --ds-surface-hover: #423131; + --ds-surface-active: #533e3e; + --ds-border-subtle: #634a49; + --ds-border-default: #9f7777; + --ds-border-strong: #cf9b9a; + --ds-text-subtle: #cf9b9a; + --ds-text-default: #fae8e8; + --ds-base-default: #472f2f; + --ds-base-hover: #5e3f3f; + --ds-base-active: #785050; + --ds-base-contrast-subtle: #d1cbcb; + --ds-base-contrast-default: #ffffff; color-scheme: dark; } @@ -1084,28 +1148,6 @@ design-tokens: v1.13.2 --ds-body-long-xs-letter-spacing: 0.0015em; } } -@layer ds.theme.color { -[data-color="complimentary"], [data-color-scheme][data-color="complimentary"] { - --ds-color-background-default: var(--ds-color-complimentary-background-default); - --ds-color-background-tinted: var(--ds-color-complimentary-background-tinted); - --ds-color-surface-default: var(--ds-color-complimentary-surface-default); - --ds-color-surface-tinted: var(--ds-color-complimentary-surface-tinted); - --ds-color-surface-hover: var(--ds-color-complimentary-surface-hover); - --ds-color-surface-active: var(--ds-color-complimentary-surface-active); - --ds-color-border-subtle: var(--ds-color-complimentary-border-subtle); - --ds-color-border-default: var(--ds-color-complimentary-border-default); - --ds-color-border-strong: var(--ds-color-complimentary-border-strong); - --ds-color-text-subtle: var(--ds-color-complimentary-text-subtle); - --ds-color-text-default: var(--ds-color-complimentary-text-default); - --ds-color-base-default: var(--ds-color-complimentary-base-default); - --ds-color-base-hover: var(--ds-color-complimentary-base-hover); - --ds-color-base-active: var(--ds-color-complimentary-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-complimentary-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-complimentary-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="danger"], [data-color-scheme][data-color="danger"] { --ds-color-background-default: var(--ds-color-danger-background-default); @@ -1128,72 +1170,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -:root, [data-color-scheme], [data-color="dominant"] { - --ds-color-background-default: var(--ds-color-dominant-background-default); - --ds-color-background-tinted: var(--ds-color-dominant-background-tinted); - --ds-color-surface-default: var(--ds-color-dominant-surface-default); - --ds-color-surface-tinted: var(--ds-color-dominant-surface-tinted); - --ds-color-surface-hover: var(--ds-color-dominant-surface-hover); - --ds-color-surface-active: var(--ds-color-dominant-surface-active); - --ds-color-border-subtle: var(--ds-color-dominant-border-subtle); - --ds-color-border-default: var(--ds-color-dominant-border-default); - --ds-color-border-strong: var(--ds-color-dominant-border-strong); - --ds-color-text-subtle: var(--ds-color-dominant-text-subtle); - --ds-color-text-default: var(--ds-color-dominant-text-default); - --ds-color-base-default: var(--ds-color-dominant-base-default); - --ds-color-base-hover: var(--ds-color-dominant-base-hover); - --ds-color-base-active: var(--ds-color-dominant-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-dominant-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-dominant-base-contrast-default); -} - -} - -@layer ds.theme.color { -[data-color="first"], [data-color-scheme][data-color="first"] { - --ds-color-background-default: var(--ds-color-first-background-default); - --ds-color-background-tinted: var(--ds-color-first-background-tinted); - --ds-color-surface-default: var(--ds-color-first-surface-default); - --ds-color-surface-tinted: var(--ds-color-first-surface-tinted); - --ds-color-surface-hover: var(--ds-color-first-surface-hover); - --ds-color-surface-active: var(--ds-color-first-surface-active); - --ds-color-border-subtle: var(--ds-color-first-border-subtle); - --ds-color-border-default: var(--ds-color-first-border-default); - --ds-color-border-strong: var(--ds-color-first-border-strong); - --ds-color-text-subtle: var(--ds-color-first-text-subtle); - --ds-color-text-default: var(--ds-color-first-text-default); - --ds-color-base-default: var(--ds-color-first-base-default); - --ds-color-base-hover: var(--ds-color-first-base-hover); - --ds-color-base-active: var(--ds-color-first-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-first-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-first-base-contrast-default); -} - -} - -@layer ds.theme.color { -[data-color="fourth"], [data-color-scheme][data-color="fourth"] { - --ds-color-background-default: var(--ds-color-fourth-background-default); - --ds-color-background-tinted: var(--ds-color-fourth-background-tinted); - --ds-color-surface-default: var(--ds-color-fourth-surface-default); - --ds-color-surface-tinted: var(--ds-color-fourth-surface-tinted); - --ds-color-surface-hover: var(--ds-color-fourth-surface-hover); - --ds-color-surface-active: var(--ds-color-fourth-surface-active); - --ds-color-border-subtle: var(--ds-color-fourth-border-subtle); - --ds-color-border-default: var(--ds-color-fourth-border-default); - --ds-color-border-strong: var(--ds-color-fourth-border-strong); - --ds-color-text-subtle: var(--ds-color-fourth-text-subtle); - --ds-color-text-default: var(--ds-color-fourth-text-default); - --ds-color-base-default: var(--ds-color-fourth-base-default); - --ds-color-base-hover: var(--ds-color-fourth-base-hover); - --ds-color-base-active: var(--ds-color-fourth-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-fourth-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-fourth-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="info"], [data-color-scheme][data-color="info"] { --ds-color-background-default: var(--ds-color-info-background-default); @@ -1238,28 +1214,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -[data-color="second"], [data-color-scheme][data-color="second"] { - --ds-color-background-default: var(--ds-color-second-background-default); - --ds-color-background-tinted: var(--ds-color-second-background-tinted); - --ds-color-surface-default: var(--ds-color-second-surface-default); - --ds-color-surface-tinted: var(--ds-color-second-surface-tinted); - --ds-color-surface-hover: var(--ds-color-second-surface-hover); - --ds-color-surface-active: var(--ds-color-second-surface-active); - --ds-color-border-subtle: var(--ds-color-second-border-subtle); - --ds-color-border-default: var(--ds-color-second-border-default); - --ds-color-border-strong: var(--ds-color-second-border-strong); - --ds-color-text-subtle: var(--ds-color-second-text-subtle); - --ds-color-text-default: var(--ds-color-second-text-default); - --ds-color-base-default: var(--ds-color-second-base-default); - --ds-color-base-hover: var(--ds-color-second-base-hover); - --ds-color-base-active: var(--ds-color-second-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-second-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-second-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="success"], [data-color-scheme][data-color="success"] { --ds-color-background-default: var(--ds-color-success-background-default); @@ -1282,28 +1236,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -[data-color="third"], [data-color-scheme][data-color="third"] { - --ds-color-background-default: var(--ds-color-third-background-default); - --ds-color-background-tinted: var(--ds-color-third-background-tinted); - --ds-color-surface-default: var(--ds-color-third-surface-default); - --ds-color-surface-tinted: var(--ds-color-third-surface-tinted); - --ds-color-surface-hover: var(--ds-color-third-surface-hover); - --ds-color-surface-active: var(--ds-color-third-surface-active); - --ds-color-border-subtle: var(--ds-color-third-border-subtle); - --ds-color-border-default: var(--ds-color-third-border-default); - --ds-color-border-strong: var(--ds-color-third-border-strong); - --ds-color-text-subtle: var(--ds-color-third-text-subtle); - --ds-color-text-default: var(--ds-color-third-text-default); - --ds-color-base-default: var(--ds-color-third-base-default); - --ds-color-base-hover: var(--ds-color-third-base-hover); - --ds-color-base-active: var(--ds-color-third-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-third-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-third-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="warning"], [data-color-scheme][data-color="warning"] { --ds-color-background-default: var(--ds-color-warning-background-default); diff --git a/packages/cli/tests/config/build/some-org.css b/packages/cli/tests/config/build/some-org.css index b2ee25fc16..a128a177e5 100644 --- a/packages/cli/tests/config/build/some-org.css +++ b/packages/cli/tests/config/build/some-org.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /* -build: v1.13.2 -design-tokens: v1.13.2 +build: v1.14.0 +design-tokens: v1.14.0 */ @layer ds.theme.size-mode { @@ -123,22 +123,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #561448; --ds-color-complimentary-base-contrast-subtle: #f8f1f7; --ds-color-complimentary-base-contrast-default: #ffffff; - --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-tinted: #f3f3f3; - --ds-color-neutral-surface-default: #ffffff; - --ds-color-neutral-surface-tinted: #e8e8e8; - --ds-color-neutral-surface-hover: #dadada; - --ds-color-neutral-surface-active: #cacaca; - --ds-color-neutral-border-subtle: #bcbcbc; - --ds-color-neutral-border-default: #797979; - --ds-color-neutral-border-strong: #5d5d5d; - --ds-color-neutral-text-subtle: #5d5d5d; - --ds-color-neutral-text-default: #2b2b2b; - --ds-color-neutral-base-default: #303030; - --ds-color-neutral-base-hover: #424242; - --ds-color-neutral-base-active: #545454; - --ds-color-neutral-base-contrast-subtle: #c6c6c6; - --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-first-background-default: #ffffff; --ds-color-first-background-tinted: #fef0f1; --ds-color-first-surface-default: #ffffff; @@ -203,6 +187,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #b24caf; --ds-color-fourth-base-contrast-subtle: #1d0c1c; --ds-color-fourth-base-contrast-default: #000000; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f3f3f3; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #e8e8e8; + --ds-color-neutral-surface-hover: #dadada; + --ds-color-neutral-surface-active: #cacaca; + --ds-color-neutral-border-subtle: #bcbcbc; + --ds-color-neutral-border-default: #797979; + --ds-color-neutral-border-strong: #5d5d5d; + --ds-color-neutral-text-subtle: #5d5d5d; + --ds-color-neutral-text-default: #2b2b2b; + --ds-color-neutral-base-default: #303030; + --ds-color-neutral-base-hover: #424242; + --ds-color-neutral-base-active: #545454; + --ds-color-neutral-base-contrast-subtle: #c6c6c6; + --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-info-background-default: #ffffff; --ds-color-info-background-tinted: #edf5fa; --ds-color-info-surface-default: #ffffff; @@ -270,6 +270,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #00ff00; --ds-color-focus-outer: #ffff00; --ds-link-color-visited: #ff1234; + --ds-background-default: #ff0000; + --ds-background-tinted: #f0ff00; + --ds-surface-default: #ffffff; + --ds-surface-tinted: #ddeaf6; + --ds-surface-hover: #c7ddf0; + --ds-surface-active: #afcee9; + --ds-border-subtle: #99c0e3; + --ds-border-default: #2a7cc5; + --ds-border-strong: #005db1; + --ds-text-subtle: #005db1; + --ds-text-default: #002c54; + --ds-base-default: #0062BA; + --ds-base-hover: #004f96; + --ds-base-active: #003d75; + --ds-base-contrast-subtle: #dbe9f5; + --ds-base-contrast-default: #ffffff; color-scheme: light; } @@ -308,22 +324,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #561448; --ds-color-complimentary-base-contrast-subtle: #f8f1f7; --ds-color-complimentary-base-contrast-default: #ffffff; - --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-tinted: #f3f3f3; - --ds-color-neutral-surface-default: #ffffff; - --ds-color-neutral-surface-tinted: #e8e8e8; - --ds-color-neutral-surface-hover: #dadada; - --ds-color-neutral-surface-active: #cacaca; - --ds-color-neutral-border-subtle: #bcbcbc; - --ds-color-neutral-border-default: #797979; - --ds-color-neutral-border-strong: #5d5d5d; - --ds-color-neutral-text-subtle: #5d5d5d; - --ds-color-neutral-text-default: #2b2b2b; - --ds-color-neutral-base-default: #303030; - --ds-color-neutral-base-hover: #424242; - --ds-color-neutral-base-active: #545454; - --ds-color-neutral-base-contrast-subtle: #c6c6c6; - --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-first-background-default: #ffffff; --ds-color-first-background-tinted: #fef0f1; --ds-color-first-surface-default: #ffffff; @@ -388,6 +388,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #b24caf; --ds-color-fourth-base-contrast-subtle: #1d0c1c; --ds-color-fourth-base-contrast-default: #000000; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f3f3f3; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #e8e8e8; + --ds-color-neutral-surface-hover: #dadada; + --ds-color-neutral-surface-active: #cacaca; + --ds-color-neutral-border-subtle: #bcbcbc; + --ds-color-neutral-border-default: #797979; + --ds-color-neutral-border-strong: #5d5d5d; + --ds-color-neutral-text-subtle: #5d5d5d; + --ds-color-neutral-text-default: #2b2b2b; + --ds-color-neutral-base-default: #303030; + --ds-color-neutral-base-hover: #424242; + --ds-color-neutral-base-active: #545454; + --ds-color-neutral-base-contrast-subtle: #c6c6c6; + --ds-color-neutral-base-contrast-default: #ffffff; --ds-color-info-background-default: #ffffff; --ds-color-info-background-tinted: #edf5fa; --ds-color-info-surface-default: #ffffff; @@ -455,6 +471,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #00ff00; --ds-color-focus-outer: #ffff00; --ds-link-color-visited: #ff1234; + --ds-background-default: #ff0000; + --ds-background-tinted: #f0ff00; + --ds-surface-default: #ffffff; + --ds-surface-tinted: #ddeaf6; + --ds-surface-hover: #c7ddf0; + --ds-surface-active: #afcee9; + --ds-border-subtle: #99c0e3; + --ds-border-default: #2a7cc5; + --ds-border-strong: #005db1; + --ds-text-subtle: #005db1; + --ds-text-default: #002c54; + --ds-base-default: #0062BA; + --ds-base-hover: #004f96; + --ds-base-active: #003d75; + --ds-base-contrast-subtle: #dbe9f5; + --ds-base-contrast-default: #ffffff; color-scheme: light; } @@ -658,22 +690,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #dfbdd8; --ds-color-complimentary-base-contrast-subtle: #120c11; --ds-color-complimentary-base-contrast-default: #000000; - --ds-color-neutral-background-default: #181818; - --ds-color-neutral-background-tinted: #1f1f1f; - --ds-color-neutral-surface-default: #282828; - --ds-color-neutral-surface-tinted: #2e2e2e; - --ds-color-neutral-surface-hover: #353535; - --ds-color-neutral-surface-active: #434343; - --ds-color-neutral-border-subtle: #505050; - --ds-color-neutral-border-default: #818181; - --ds-color-neutral-border-strong: #a8a8a8; - --ds-color-neutral-text-subtle: #a8a8a8; - --ds-color-neutral-text-default: #ececec; - --ds-color-neutral-base-default: #ababab; - --ds-color-neutral-base-hover: #969696; - --ds-color-neutral-base-active: #818181; - --ds-color-neutral-base-contrast-subtle: #1b1b1b; - --ds-color-neutral-base-contrast-default: #000000; --ds-color-first-background-default: #241313; --ds-color-first-background-tinted: #301919; --ds-color-first-surface-default: #3c2020; @@ -738,6 +754,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #461e44; --ds-color-fourth-base-contrast-subtle: #f5eff5; --ds-color-fourth-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #181818; + --ds-color-neutral-background-tinted: #1f1f1f; + --ds-color-neutral-surface-default: #282828; + --ds-color-neutral-surface-tinted: #2e2e2e; + --ds-color-neutral-surface-hover: #353535; + --ds-color-neutral-surface-active: #434343; + --ds-color-neutral-border-subtle: #505050; + --ds-color-neutral-border-default: #818181; + --ds-color-neutral-border-strong: #a8a8a8; + --ds-color-neutral-text-subtle: #a8a8a8; + --ds-color-neutral-text-default: #ececec; + --ds-color-neutral-base-default: #ababab; + --ds-color-neutral-base-hover: #969696; + --ds-color-neutral-base-active: #818181; + --ds-color-neutral-base-contrast-subtle: #1b1b1b; + --ds-color-neutral-base-contrast-default: #000000; --ds-color-info-background-default: #0d1925; --ds-color-info-background-tinted: #112130; --ds-color-info-surface-default: #15293d; @@ -805,6 +837,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #00ffff; --ds-color-focus-outer: #ff00aa; --ds-link-color-visited: #1234ff; + --ds-background-default: #000fff; + --ds-background-tinted: #ff00ff; + --ds-surface-default: #142941; + --ds-surface-tinted: #172f4b; + --ds-surface-hover: #1a3757; + --ds-surface-active: #21446d; + --ds-border-subtle: #285182; + --ds-border-default: #5a84b4; + --ds-border-strong: #8eaacb; + --ds-text-subtle: #8eaacb; + --ds-text-default: #e7edf4; + --ds-base-default: #4c91cf; + --ds-base-hover: #6fa6d8; + --ds-base-active: #92bce1; + --ds-base-contrast-subtle: #0d1924; + --ds-base-contrast-default: #000000; color-scheme: dark; } @@ -843,22 +891,6 @@ design-tokens: v1.13.2 --ds-color-complimentary-base-active: #dfbdd8; --ds-color-complimentary-base-contrast-subtle: #120c11; --ds-color-complimentary-base-contrast-default: #000000; - --ds-color-neutral-background-default: #181818; - --ds-color-neutral-background-tinted: #1f1f1f; - --ds-color-neutral-surface-default: #282828; - --ds-color-neutral-surface-tinted: #2e2e2e; - --ds-color-neutral-surface-hover: #353535; - --ds-color-neutral-surface-active: #434343; - --ds-color-neutral-border-subtle: #505050; - --ds-color-neutral-border-default: #818181; - --ds-color-neutral-border-strong: #a8a8a8; - --ds-color-neutral-text-subtle: #a8a8a8; - --ds-color-neutral-text-default: #ececec; - --ds-color-neutral-base-default: #ababab; - --ds-color-neutral-base-hover: #969696; - --ds-color-neutral-base-active: #818181; - --ds-color-neutral-base-contrast-subtle: #1b1b1b; - --ds-color-neutral-base-contrast-default: #000000; --ds-color-first-background-default: #241313; --ds-color-first-background-tinted: #301919; --ds-color-first-surface-default: #3c2020; @@ -923,6 +955,22 @@ design-tokens: v1.13.2 --ds-color-fourth-base-active: #461e44; --ds-color-fourth-base-contrast-subtle: #f5eff5; --ds-color-fourth-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #181818; + --ds-color-neutral-background-tinted: #1f1f1f; + --ds-color-neutral-surface-default: #282828; + --ds-color-neutral-surface-tinted: #2e2e2e; + --ds-color-neutral-surface-hover: #353535; + --ds-color-neutral-surface-active: #434343; + --ds-color-neutral-border-subtle: #505050; + --ds-color-neutral-border-default: #818181; + --ds-color-neutral-border-strong: #a8a8a8; + --ds-color-neutral-text-subtle: #a8a8a8; + --ds-color-neutral-text-default: #ececec; + --ds-color-neutral-base-default: #ababab; + --ds-color-neutral-base-hover: #969696; + --ds-color-neutral-base-active: #818181; + --ds-color-neutral-base-contrast-subtle: #1b1b1b; + --ds-color-neutral-base-contrast-default: #000000; --ds-color-info-background-default: #0d1925; --ds-color-info-background-tinted: #112130; --ds-color-info-surface-default: #15293d; @@ -990,6 +1038,22 @@ design-tokens: v1.13.2 --ds-color-focus-inner: #00ffff; --ds-color-focus-outer: #ff00aa; --ds-link-color-visited: #1234ff; + --ds-background-default: #000fff; + --ds-background-tinted: #ff00ff; + --ds-surface-default: #142941; + --ds-surface-tinted: #172f4b; + --ds-surface-hover: #1a3757; + --ds-surface-active: #21446d; + --ds-border-subtle: #285182; + --ds-border-default: #5a84b4; + --ds-border-strong: #8eaacb; + --ds-text-subtle: #8eaacb; + --ds-text-default: #e7edf4; + --ds-base-default: #4c91cf; + --ds-base-hover: #6fa6d8; + --ds-base-active: #92bce1; + --ds-base-contrast-subtle: #0d1924; + --ds-base-contrast-default: #000000; color-scheme: dark; } @@ -1084,28 +1148,6 @@ design-tokens: v1.13.2 --ds-body-long-xs-letter-spacing: 0.0015em; } } -@layer ds.theme.color { -[data-color="complimentary"], [data-color-scheme][data-color="complimentary"] { - --ds-color-background-default: var(--ds-color-complimentary-background-default); - --ds-color-background-tinted: var(--ds-color-complimentary-background-tinted); - --ds-color-surface-default: var(--ds-color-complimentary-surface-default); - --ds-color-surface-tinted: var(--ds-color-complimentary-surface-tinted); - --ds-color-surface-hover: var(--ds-color-complimentary-surface-hover); - --ds-color-surface-active: var(--ds-color-complimentary-surface-active); - --ds-color-border-subtle: var(--ds-color-complimentary-border-subtle); - --ds-color-border-default: var(--ds-color-complimentary-border-default); - --ds-color-border-strong: var(--ds-color-complimentary-border-strong); - --ds-color-text-subtle: var(--ds-color-complimentary-text-subtle); - --ds-color-text-default: var(--ds-color-complimentary-text-default); - --ds-color-base-default: var(--ds-color-complimentary-base-default); - --ds-color-base-hover: var(--ds-color-complimentary-base-hover); - --ds-color-base-active: var(--ds-color-complimentary-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-complimentary-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-complimentary-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="danger"], [data-color-scheme][data-color="danger"] { --ds-color-background-default: var(--ds-color-danger-background-default); @@ -1128,72 +1170,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -:root, [data-color-scheme], [data-color="dominant"] { - --ds-color-background-default: var(--ds-color-dominant-background-default); - --ds-color-background-tinted: var(--ds-color-dominant-background-tinted); - --ds-color-surface-default: var(--ds-color-dominant-surface-default); - --ds-color-surface-tinted: var(--ds-color-dominant-surface-tinted); - --ds-color-surface-hover: var(--ds-color-dominant-surface-hover); - --ds-color-surface-active: var(--ds-color-dominant-surface-active); - --ds-color-border-subtle: var(--ds-color-dominant-border-subtle); - --ds-color-border-default: var(--ds-color-dominant-border-default); - --ds-color-border-strong: var(--ds-color-dominant-border-strong); - --ds-color-text-subtle: var(--ds-color-dominant-text-subtle); - --ds-color-text-default: var(--ds-color-dominant-text-default); - --ds-color-base-default: var(--ds-color-dominant-base-default); - --ds-color-base-hover: var(--ds-color-dominant-base-hover); - --ds-color-base-active: var(--ds-color-dominant-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-dominant-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-dominant-base-contrast-default); -} - -} - -@layer ds.theme.color { -[data-color="first"], [data-color-scheme][data-color="first"] { - --ds-color-background-default: var(--ds-color-first-background-default); - --ds-color-background-tinted: var(--ds-color-first-background-tinted); - --ds-color-surface-default: var(--ds-color-first-surface-default); - --ds-color-surface-tinted: var(--ds-color-first-surface-tinted); - --ds-color-surface-hover: var(--ds-color-first-surface-hover); - --ds-color-surface-active: var(--ds-color-first-surface-active); - --ds-color-border-subtle: var(--ds-color-first-border-subtle); - --ds-color-border-default: var(--ds-color-first-border-default); - --ds-color-border-strong: var(--ds-color-first-border-strong); - --ds-color-text-subtle: var(--ds-color-first-text-subtle); - --ds-color-text-default: var(--ds-color-first-text-default); - --ds-color-base-default: var(--ds-color-first-base-default); - --ds-color-base-hover: var(--ds-color-first-base-hover); - --ds-color-base-active: var(--ds-color-first-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-first-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-first-base-contrast-default); -} - -} - -@layer ds.theme.color { -[data-color="fourth"], [data-color-scheme][data-color="fourth"] { - --ds-color-background-default: var(--ds-color-fourth-background-default); - --ds-color-background-tinted: var(--ds-color-fourth-background-tinted); - --ds-color-surface-default: var(--ds-color-fourth-surface-default); - --ds-color-surface-tinted: var(--ds-color-fourth-surface-tinted); - --ds-color-surface-hover: var(--ds-color-fourth-surface-hover); - --ds-color-surface-active: var(--ds-color-fourth-surface-active); - --ds-color-border-subtle: var(--ds-color-fourth-border-subtle); - --ds-color-border-default: var(--ds-color-fourth-border-default); - --ds-color-border-strong: var(--ds-color-fourth-border-strong); - --ds-color-text-subtle: var(--ds-color-fourth-text-subtle); - --ds-color-text-default: var(--ds-color-fourth-text-default); - --ds-color-base-default: var(--ds-color-fourth-base-default); - --ds-color-base-hover: var(--ds-color-fourth-base-hover); - --ds-color-base-active: var(--ds-color-fourth-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-fourth-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-fourth-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="info"], [data-color-scheme][data-color="info"] { --ds-color-background-default: var(--ds-color-info-background-default); @@ -1238,28 +1214,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -[data-color="second"], [data-color-scheme][data-color="second"] { - --ds-color-background-default: var(--ds-color-second-background-default); - --ds-color-background-tinted: var(--ds-color-second-background-tinted); - --ds-color-surface-default: var(--ds-color-second-surface-default); - --ds-color-surface-tinted: var(--ds-color-second-surface-tinted); - --ds-color-surface-hover: var(--ds-color-second-surface-hover); - --ds-color-surface-active: var(--ds-color-second-surface-active); - --ds-color-border-subtle: var(--ds-color-second-border-subtle); - --ds-color-border-default: var(--ds-color-second-border-default); - --ds-color-border-strong: var(--ds-color-second-border-strong); - --ds-color-text-subtle: var(--ds-color-second-text-subtle); - --ds-color-text-default: var(--ds-color-second-text-default); - --ds-color-base-default: var(--ds-color-second-base-default); - --ds-color-base-hover: var(--ds-color-second-base-hover); - --ds-color-base-active: var(--ds-color-second-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-second-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-second-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="success"], [data-color-scheme][data-color="success"] { --ds-color-background-default: var(--ds-color-success-background-default); @@ -1282,28 +1236,6 @@ design-tokens: v1.13.2 } -@layer ds.theme.color { -[data-color="third"], [data-color-scheme][data-color="third"] { - --ds-color-background-default: var(--ds-color-third-background-default); - --ds-color-background-tinted: var(--ds-color-third-background-tinted); - --ds-color-surface-default: var(--ds-color-third-surface-default); - --ds-color-surface-tinted: var(--ds-color-third-surface-tinted); - --ds-color-surface-hover: var(--ds-color-third-surface-hover); - --ds-color-surface-active: var(--ds-color-third-surface-active); - --ds-color-border-subtle: var(--ds-color-third-border-subtle); - --ds-color-border-default: var(--ds-color-third-border-default); - --ds-color-border-strong: var(--ds-color-third-border-strong); - --ds-color-text-subtle: var(--ds-color-third-text-subtle); - --ds-color-text-default: var(--ds-color-third-text-default); - --ds-color-base-default: var(--ds-color-third-base-default); - --ds-color-base-hover: var(--ds-color-third-base-hover); - --ds-color-base-active: var(--ds-color-third-base-active); - --ds-color-base-contrast-subtle: var(--ds-color-third-base-contrast-subtle); - --ds-color-base-contrast-default: var(--ds-color-third-base-contrast-default); -} - -} - @layer ds.theme.color { [data-color="warning"], [data-color-scheme][data-color="warning"] { --ds-color-background-default: var(--ds-color-warning-background-default); diff --git a/packages/cli/tests/config/build/types.d.ts b/packages/cli/tests/config/build/types.d.ts index 679573f49f..c7cdc496ae 100644 --- a/packages/cli/tests/config/build/types.d.ts +++ b/packages/cli/tests/config/build/types.d.ts @@ -1,15 +1,9 @@ -/* build: v1.13.2 */ +/* build: v1.14.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme declare module '@digdir/designsystemet-types' { export interface ColorDefinitions { - dominant: never; - complimentary: never; - first: never; - second: never; - third: never; - fourth: never; neutral: never; } export interface SeverityColorDefinitions { diff --git a/packages/cli/tests/config/design-tokens/$designsystemet.jsonc b/packages/cli/tests/config/design-tokens/$designsystemet.jsonc index 2bc470b385..b982a9f27f 100644 --- a/packages/cli/tests/config/design-tokens/$designsystemet.jsonc +++ b/packages/cli/tests/config/design-tokens/$designsystemet.jsonc @@ -1,4 +1,4 @@ { "name": "@digdir/designsystemet", - "version": "1.13.2" + "version": "1.14.0" } \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/$metadata.json b/packages/cli/tests/config/design-tokens/$metadata.json index 16c3dde899..a25eb5fbc2 100644 --- a/packages/cli/tests/config/design-tokens/$metadata.json +++ b/packages/cli/tests/config/design-tokens/$metadata.json @@ -19,12 +19,17 @@ "themes/some-org", "themes/other-org", "semantic/color", - "semantic/modes/main-color/dominant", - "semantic/modes/main-color/complimentary", - "semantic/modes/support-color/first", - "semantic/modes/support-color/second", - "semantic/modes/support-color/third", - "semantic/modes/support-color/fourth", + "semantic/color/dominant", + "semantic/color/complimentary", + "semantic/color/first", + "semantic/color/second", + "semantic/color/third", + "semantic/color/fourth", + "semantic/color/neutral", + "semantic/color/info", + "semantic/color/success", + "semantic/color/warning", + "semantic/color/danger", "semantic/style" ] } \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/$themes.json b/packages/cli/tests/config/design-tokens/$themes.json index 467dfd31e8..cf96c75891 100644 --- a/packages/cli/tests/config/design-tokens/$themes.json +++ b/packages/cli/tests/config/design-tokens/$themes.json @@ -107,7 +107,6 @@ "name": "Semantic", "selectedTokenSets": { "semantic/style": "enabled", - "semantic/color": "enabled", "primitives/globals": "source" }, "$figmaCollectionId": "VariableCollectionId:34811:5976", @@ -115,51 +114,91 @@ "group": "Semantic" }, { - "id": "21e2bd9a713964df9b7fcee294d1ff568b79f270", + "id": "18abe41a47a1ec464e4a502902d3e791142ecaa4", "name": "dominant", "selectedTokenSets": { - "semantic/modes/main-color/dominant": "enabled" + "semantic/color/dominant": "enabled" }, - "group": "Main color" + "group": "Color" }, { - "id": "398515dd0662a8a5ac6d2f1ff57c4a1214d4af87", + "id": "a496d42fc07a58949b17bfe8ddda74064f8f3f1f", "name": "complimentary", "selectedTokenSets": { - "semantic/modes/main-color/complimentary": "enabled" + "semantic/color/complimentary": "enabled" }, - "group": "Main color" + "group": "Color" }, { - "id": "850086db50ab2678dbd84e9994d81d696f3e6513", + "id": "e0996a37c13d44c3b06074939d43fa3759bd32c1", "name": "first", "selectedTokenSets": { - "semantic/modes/support-color/first": "enabled" + "semantic/color/first": "enabled" }, - "group": "Support color" + "group": "Color" }, { - "id": "c69fb8f69a2b50bee470a3e2dda1872ba65ba2ce", + "id": "352f7829a2384b001cc12b0c2613c756454a1f6a", "name": "second", "selectedTokenSets": { - "semantic/modes/support-color/second": "enabled" + "semantic/color/second": "enabled" }, - "group": "Support color" + "group": "Color" }, { - "id": "934c852ee2aa7d462f084e1fdc0c069ee9f3d3f2", + "id": "34fb3300b9a77bebdc988ec3edd0d4a6a42a26f9", "name": "third", "selectedTokenSets": { - "semantic/modes/support-color/third": "enabled" + "semantic/color/third": "enabled" }, - "group": "Support color" + "group": "Color" }, { - "id": "cfa64bb6d93cdba55e2586081a01b11bbccc1589", + "id": "2db18e1d98e7ab7f49dea56027312c2d97b1a2e0", "name": "fourth", "selectedTokenSets": { - "semantic/modes/support-color/fourth": "enabled" + "semantic/color/fourth": "enabled" }, - "group": "Support color" + "group": "Color" + }, + { + "id": "e7fb41a6a0544d8a8aa178232034311f9d725555", + "name": "neutral", + "selectedTokenSets": { + "semantic/color/neutral": "enabled" + }, + "group": "Color" + }, + { + "id": "59bd0a3ff43b32849b319e645d4798d8a5d1e889", + "name": "info", + "selectedTokenSets": { + "semantic/color/info": "enabled" + }, + "group": "Color" + }, + { + "id": "53a5687cb26dc41f2ab4033e97e13adefd3740d6", + "name": "success", + "selectedTokenSets": { + "semantic/color/success": "enabled" + }, + "group": "Color" + }, + { + "id": "383fd7bf84aa027bdc40159c5d7c5805664a8eb2", + "name": "warning", + "selectedTokenSets": { + "semantic/color/warning": "enabled" + }, + "group": "Color" + }, + { + "id": "222b3e11200d82d61f1b89533e59175f71d23972", + "name": "danger", + "selectedTokenSets": { + "semantic/color/danger": "enabled" + }, + "group": "Color" } ] \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color.json b/packages/cli/tests/config/design-tokens/semantic/color.json deleted file mode 100644 index 53d3aeb7ce..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/color.json +++ /dev/null @@ -1,748 +0,0 @@ -{ - "color": { - "dominant": { - "background-default": { - "$type": "color", - "$value": "{color.dominant.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.dominant.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.dominant.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.dominant.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.dominant.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.dominant.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.dominant.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.dominant.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.dominant.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.dominant.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.dominant.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.dominant.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.dominant.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.dominant.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.dominant.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.dominant.16}" - } - }, - "complimentary": { - "background-default": { - "$type": "color", - "$value": "{color.complimentary.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.complimentary.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.complimentary.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.complimentary.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.complimentary.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.complimentary.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.complimentary.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.complimentary.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.complimentary.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.complimentary.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.complimentary.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.complimentary.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.complimentary.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.complimentary.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.complimentary.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.complimentary.16}" - } - }, - "neutral": { - "background-default": { - "$type": "color", - "$value": "{color.neutral.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.neutral.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.neutral.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.neutral.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.neutral.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.neutral.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.neutral.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.neutral.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.neutral.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.neutral.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.neutral.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.neutral.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.neutral.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.neutral.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.neutral.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.neutral.16}" - } - }, - "first": { - "background-default": { - "$type": "color", - "$value": "{color.first.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.first.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.first.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.first.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.first.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.first.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.first.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.first.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.first.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.first.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.first.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.first.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.first.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.first.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.first.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.first.16}" - } - }, - "second": { - "background-default": { - "$type": "color", - "$value": "{color.second.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.second.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.second.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.second.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.second.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.second.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.second.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.second.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.second.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.second.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.second.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.second.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.second.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.second.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.second.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.second.16}" - } - }, - "third": { - "background-default": { - "$type": "color", - "$value": "{color.third.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.third.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.third.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.third.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.third.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.third.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.third.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.third.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.third.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.third.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.third.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.third.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.third.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.third.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.third.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.third.16}" - } - }, - "fourth": { - "background-default": { - "$type": "color", - "$value": "{color.fourth.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.fourth.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.fourth.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.fourth.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.fourth.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.fourth.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.fourth.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.fourth.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.fourth.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.fourth.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.fourth.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.fourth.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.fourth.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.fourth.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.fourth.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.fourth.16}" - } - }, - "info": { - "background-default": { - "$type": "color", - "$value": "{color.info.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.info.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.info.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.info.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.info.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.info.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.info.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.info.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.info.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.info.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.info.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.info.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.info.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.info.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.info.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.info.16}" - } - }, - "success": { - "background-default": { - "$type": "color", - "$value": "{color.success.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.success.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.success.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.success.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.success.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.success.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.success.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.success.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.success.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.success.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.success.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.success.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.success.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.success.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.success.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.success.16}" - } - }, - "warning": { - "background-default": { - "$type": "color", - "$value": "{color.warning.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.warning.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.warning.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.warning.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.warning.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.warning.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.warning.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.warning.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.warning.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.warning.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.warning.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.warning.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.warning.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.warning.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.warning.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.warning.16}" - } - }, - "danger": { - "background-default": { - "$type": "color", - "$value": "{color.danger.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.danger.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.danger.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.danger.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.danger.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.danger.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.danger.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.danger.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.danger.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.danger.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.danger.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.danger.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.danger.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.danger.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.danger.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.danger.16}" - } - }, - "focus": { - "inner": { - "$type": "color", - "$value": "{color.focus.inner-color}" - }, - "outer": { - "$type": "color", - "$value": "{color.focus.outer-color}" - } - } - }, - "link": { - "color": { - "visited": { - "$type": "color", - "$value": "{color.link.visited}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/complimentary.json b/packages/cli/tests/config/design-tokens/semantic/color/complimentary.json new file mode 100644 index 0000000000..d39b0b15f4 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/complimentary.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.complimentary.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.complimentary.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.complimentary.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.complimentary.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.complimentary.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.complimentary.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.complimentary.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.complimentary.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.complimentary.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.complimentary.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.complimentary.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.complimentary.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.complimentary.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.complimentary.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.complimentary.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.complimentary.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/danger.json b/packages/cli/tests/config/design-tokens/semantic/color/danger.json new file mode 100644 index 0000000000..9500f48686 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/danger.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.danger.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.danger.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.danger.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.danger.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.danger.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.danger.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.danger.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.danger.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.danger.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.danger.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.danger.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.danger.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.danger.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.danger.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.danger.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.danger.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/dominant.json b/packages/cli/tests/config/design-tokens/semantic/color/dominant.json new file mode 100644 index 0000000000..96795fcdec --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/dominant.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.dominant.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.dominant.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.dominant.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.dominant.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.dominant.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.dominant.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.dominant.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.dominant.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.dominant.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.dominant.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.dominant.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.dominant.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.dominant.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.dominant.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.dominant.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.dominant.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/first.json b/packages/cli/tests/config/design-tokens/semantic/color/first.json new file mode 100644 index 0000000000..d44dd974fd --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/first.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.first.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.first.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.first.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.first.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.first.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.first.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.first.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.first.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.first.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.first.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.first.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.first.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.first.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.first.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.first.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.first.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/fourth.json b/packages/cli/tests/config/design-tokens/semantic/color/fourth.json new file mode 100644 index 0000000000..1c2cbc1ea0 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/fourth.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.fourth.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.fourth.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.fourth.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.fourth.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.fourth.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.fourth.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.fourth.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.fourth.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.fourth.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.fourth.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.fourth.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.fourth.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.fourth.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.fourth.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.fourth.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.fourth.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/info.json b/packages/cli/tests/config/design-tokens/semantic/color/info.json new file mode 100644 index 0000000000..4945b40b82 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/info.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.info.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.info.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.info.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.info.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.info.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.info.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.info.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.info.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.info.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.info.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.info.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.info.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.info.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.info.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.info.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.info.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/neutral.json b/packages/cli/tests/config/design-tokens/semantic/color/neutral.json new file mode 100644 index 0000000000..0afb216987 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/neutral.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.neutral.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.neutral.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.neutral.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.neutral.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.neutral.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.neutral.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.neutral.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.neutral.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.neutral.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.neutral.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.neutral.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.neutral.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.neutral.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.neutral.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.neutral.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.neutral.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/second.json b/packages/cli/tests/config/design-tokens/semantic/color/second.json new file mode 100644 index 0000000000..672935cb94 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/second.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.second.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.second.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.second.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.second.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.second.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.second.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.second.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.second.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.second.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.second.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.second.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.second.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.second.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.second.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.second.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.second.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/success.json b/packages/cli/tests/config/design-tokens/semantic/color/success.json new file mode 100644 index 0000000000..19ad1ad20a --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/success.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.success.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.success.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.success.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.success.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.success.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.success.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.success.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.success.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.success.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.success.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.success.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.success.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.success.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.success.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.success.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.success.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/third.json b/packages/cli/tests/config/design-tokens/semantic/color/third.json new file mode 100644 index 0000000000..17e244edd0 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/third.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.third.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.third.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.third.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.third.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.third.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.third.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.third.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.third.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.third.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.third.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.third.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.third.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.third.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.third.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.third.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.third.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/color/warning.json b/packages/cli/tests/config/design-tokens/semantic/color/warning.json new file mode 100644 index 0000000000..fa4430c5f4 --- /dev/null +++ b/packages/cli/tests/config/design-tokens/semantic/color/warning.json @@ -0,0 +1,66 @@ +{ + "background-default": { + "$type": "color", + "$value": "{color.warning.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.warning.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.warning.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.warning.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.warning.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.warning.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.warning.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.warning.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.warning.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.warning.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.warning.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.warning.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.warning.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.warning.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.warning.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.warning.base-contrast-default}" + } +} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/main-color/complimentary.json b/packages/cli/tests/config/design-tokens/semantic/modes/main-color/complimentary.json deleted file mode 100644 index 6101e27ee0..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/main-color/complimentary.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "main": { - "background-default": { - "$type": "color", - "$value": "{color.complimentary.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.complimentary.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.complimentary.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.complimentary.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.complimentary.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.complimentary.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.complimentary.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.complimentary.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.complimentary.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.complimentary.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.complimentary.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.complimentary.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.complimentary.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.complimentary.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.complimentary.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.complimentary.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/main-color/dominant.json b/packages/cli/tests/config/design-tokens/semantic/modes/main-color/dominant.json deleted file mode 100644 index e16dcd35e5..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/main-color/dominant.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "main": { - "background-default": { - "$type": "color", - "$value": "{color.dominant.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.dominant.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.dominant.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.dominant.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.dominant.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.dominant.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.dominant.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.dominant.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.dominant.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.dominant.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.dominant.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.dominant.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.dominant.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.dominant.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.dominant.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.dominant.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/first.json b/packages/cli/tests/config/design-tokens/semantic/modes/support-color/first.json deleted file mode 100644 index cf4ef38e5d..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/first.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "support": { - "background-default": { - "$type": "color", - "$value": "{color.first.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.first.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.first.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.first.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.first.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.first.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.first.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.first.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.first.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.first.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.first.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.first.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.first.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.first.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.first.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.first.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/fourth.json b/packages/cli/tests/config/design-tokens/semantic/modes/support-color/fourth.json deleted file mode 100644 index 8bbe049c1b..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/fourth.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "support": { - "background-default": { - "$type": "color", - "$value": "{color.fourth.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.fourth.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.fourth.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.fourth.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.fourth.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.fourth.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.fourth.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.fourth.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.fourth.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.fourth.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.fourth.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.fourth.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.fourth.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.fourth.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.fourth.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.fourth.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/second.json b/packages/cli/tests/config/design-tokens/semantic/modes/support-color/second.json deleted file mode 100644 index 6ce30d398d..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/second.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "support": { - "background-default": { - "$type": "color", - "$value": "{color.second.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.second.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.second.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.second.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.second.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.second.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.second.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.second.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.second.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.second.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.second.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.second.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.second.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.second.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.second.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.second.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/third.json b/packages/cli/tests/config/design-tokens/semantic/modes/support-color/third.json deleted file mode 100644 index 899060b653..0000000000 --- a/packages/cli/tests/config/design-tokens/semantic/modes/support-color/third.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "color": { - "support": { - "background-default": { - "$type": "color", - "$value": "{color.third.background-default}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.third.background-tinted}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.third.surface-default}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.third.surface-tinted}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.third.surface-hover}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.third.surface-active}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.third.border-subtle}" - }, - "border-default": { - "$type": "color", - "$value": "{color.third.border-default}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.third.border-strong}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.third.text-subtle}" - }, - "text-default": { - "$type": "color", - "$value": "{color.third.text-default}" - }, - "base-default": { - "$type": "color", - "$value": "{color.third.base-default}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.third.base-hover}" - }, - "base-active": { - "$type": "color", - "$value": "{color.third.base-active}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.third.base-contrast-subtle}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.third.base-contrast-default}" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/tests/config/design-tokens/semantic/style.json b/packages/cli/tests/config/design-tokens/semantic/style.json index 8f999a8363..00822a612b 100644 --- a/packages/cli/tests/config/design-tokens/semantic/style.json +++ b/packages/cli/tests/config/design-tokens/semantic/style.json @@ -1,4 +1,802 @@ { + "color": { + "focus": { + "inner": { + "$type": "color", + "$value": "{color.focus.inner-color}" + }, + "outer": { + "$type": "color", + "$value": "{color.focus.outer-color}" + } + } + }, + "link": { + "color": { + "visited": { + "$type": "color", + "$value": "{color.link.visited}" + } + } + }, + "dominant": { + "background-default": { + "$type": "color", + "$value": "{color.dominant.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.dominant.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.dominant.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.dominant.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.dominant.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.dominant.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.dominant.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.dominant.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.dominant.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.dominant.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.dominant.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.dominant.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.dominant.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.dominant.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.dominant.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.dominant.16}" + } + }, + "complimentary": { + "background-default": { + "$type": "color", + "$value": "{color.complimentary.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.complimentary.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.complimentary.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.complimentary.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.complimentary.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.complimentary.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.complimentary.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.complimentary.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.complimentary.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.complimentary.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.complimentary.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.complimentary.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.complimentary.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.complimentary.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.complimentary.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.complimentary.16}" + } + }, + "first": { + "background-default": { + "$type": "color", + "$value": "{color.first.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.first.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.first.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.first.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.first.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.first.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.first.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.first.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.first.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.first.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.first.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.first.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.first.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.first.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.first.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.first.16}" + } + }, + "second": { + "background-default": { + "$type": "color", + "$value": "{color.second.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.second.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.second.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.second.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.second.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.second.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.second.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.second.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.second.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.second.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.second.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.second.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.second.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.second.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.second.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.second.16}" + } + }, + "third": { + "background-default": { + "$type": "color", + "$value": "{color.third.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.third.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.third.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.third.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.third.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.third.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.third.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.third.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.third.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.third.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.third.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.third.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.third.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.third.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.third.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.third.16}" + } + }, + "fourth": { + "background-default": { + "$type": "color", + "$value": "{color.fourth.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.fourth.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.fourth.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.fourth.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.fourth.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.fourth.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.fourth.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.fourth.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.fourth.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.fourth.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.fourth.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.fourth.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.fourth.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.fourth.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.fourth.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.fourth.16}" + } + }, + "neutral": { + "background-default": { + "$type": "color", + "$value": "{color.neutral.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.neutral.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.neutral.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.neutral.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.neutral.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.neutral.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.neutral.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.neutral.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.neutral.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.neutral.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.neutral.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.neutral.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.neutral.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.neutral.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.neutral.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.neutral.16}" + } + }, + "info": { + "background-default": { + "$type": "color", + "$value": "{color.info.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.info.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.info.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.info.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.info.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.info.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.info.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.info.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.info.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.info.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.info.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.info.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.info.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.info.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.info.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.info.16}" + } + }, + "success": { + "background-default": { + "$type": "color", + "$value": "{color.success.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.success.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.success.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.success.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.success.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.success.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.success.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.success.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.success.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.success.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.success.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.success.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.success.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.success.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.success.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.success.16}" + } + }, + "warning": { + "background-default": { + "$type": "color", + "$value": "{color.warning.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.warning.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.warning.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.warning.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.warning.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.warning.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.warning.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.warning.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.warning.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.warning.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.warning.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.warning.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.warning.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.warning.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.warning.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.warning.16}" + } + }, + "danger": { + "background-default": { + "$type": "color", + "$value": "{color.danger.1}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.danger.2}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.danger.3}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.danger.4}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.danger.5}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.danger.6}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.danger.7}" + }, + "border-default": { + "$type": "color", + "$value": "{color.danger.8}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.danger.9}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.danger.10}" + }, + "text-default": { + "$type": "color", + "$value": "{color.danger.11}" + }, + "base-default": { + "$type": "color", + "$value": "{color.danger.12}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.danger.13}" + }, + "base-active": { + "$type": "color", + "$value": "{color.danger.14}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.danger.15}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.danger.16}" + } + }, + "focus": { + "inner": { + "$type": "color", + "$value": "{color.focus.inner-color}" + }, + "outer": { + "$type": "color", + "$value": "{color.focus.outer-color}" + } + }, + "border-width": { + "default": { + "$type": "borderWidth", + "$value": "{border-width.1}" + }, + "focus": { + "$type": "borderWidth", + "$value": "{border-width.3}" + } + }, + "border-radius": { + "sm": { + "$type": "dimension", + "$value": "{border-radius.1}" + }, + "md": { + "$type": "dimension", + "$value": "{border-radius.2}" + }, + "lg": { + "$type": "dimension", + "$value": "{border-radius.3}" + }, + "xl": { + "$type": "dimension", + "$value": "{border-radius.4}" + }, + "default": { + "$type": "dimension", + "$value": "{border-radius.5}" + }, + "full": { + "$type": "dimension", + "$value": "{border-radius.6}" + } + }, + "opacity": { + "disabled": { + "$type": "opacity", + "$value": "{opacity.30}" + } + }, "typography": { "heading": { "2xl": { @@ -229,22 +1027,6 @@ } } }, - "opacity": { - "disabled": { - "$type": "opacity", - "$value": "{opacity.30}" - } - }, - "border-width": { - "default": { - "$type": "borderWidth", - "$value": "{border-width.1}" - }, - "focus": { - "$type": "borderWidth", - "$value": "{border-width.3}" - } - }, "shadow": { "xs": { "$type": "boxShadow", @@ -267,32 +1049,6 @@ "$value": "{shadow.500}" } }, - "border-radius": { - "sm": { - "$type": "dimension", - "$value": "{border-radius.1}" - }, - "md": { - "$type": "dimension", - "$value": "{border-radius.2}" - }, - "lg": { - "$type": "dimension", - "$value": "{border-radius.3}" - }, - "xl": { - "$type": "dimension", - "$value": "{border-radius.4}" - }, - "default": { - "$type": "dimension", - "$value": "{border-radius.5}" - }, - "full": { - "$type": "dimension", - "$value": "{border-radius.6}" - } - }, "size": { "0": { "$type": "dimension", diff --git a/packages/cli/tests/config/design-tokens/themes/other-org.json b/packages/cli/tests/config/design-tokens/themes/other-org.json index e70c05489a..81bb645382 100644 --- a/packages/cli/tests/config/design-tokens/themes/other-org.json +++ b/packages/cli/tests/config/design-tokens/themes/other-org.json @@ -132,72 +132,6 @@ "$value": "{other-org.complimentary.16}" } }, - "neutral": { - "1": { - "$type": "color", - "$value": "{other-org.neutral.1}" - }, - "2": { - "$type": "color", - "$value": "{other-org.neutral.2}" - }, - "3": { - "$type": "color", - "$value": "{other-org.neutral.3}" - }, - "4": { - "$type": "color", - "$value": "{other-org.neutral.4}" - }, - "5": { - "$type": "color", - "$value": "{other-org.neutral.5}" - }, - "6": { - "$type": "color", - "$value": "{other-org.neutral.6}" - }, - "7": { - "$type": "color", - "$value": "{other-org.neutral.7}" - }, - "8": { - "$type": "color", - "$value": "{other-org.neutral.8}" - }, - "9": { - "$type": "color", - "$value": "{other-org.neutral.9}" - }, - "10": { - "$type": "color", - "$value": "{other-org.neutral.10}" - }, - "11": { - "$type": "color", - "$value": "{other-org.neutral.11}" - }, - "12": { - "$type": "color", - "$value": "{other-org.neutral.12}" - }, - "13": { - "$type": "color", - "$value": "{other-org.neutral.13}" - }, - "14": { - "$type": "color", - "$value": "{other-org.neutral.14}" - }, - "15": { - "$type": "color", - "$value": "{other-org.neutral.15}" - }, - "16": { - "$type": "color", - "$value": "{other-org.neutral.16}" - } - }, "first": { "1": { "$type": "color", @@ -462,6 +396,72 @@ "$value": "{other-org.fourth.16}" } }, + "neutral": { + "1": { + "$type": "color", + "$value": "{other-org.neutral.1}" + }, + "2": { + "$type": "color", + "$value": "{other-org.neutral.2}" + }, + "3": { + "$type": "color", + "$value": "{other-org.neutral.3}" + }, + "4": { + "$type": "color", + "$value": "{other-org.neutral.4}" + }, + "5": { + "$type": "color", + "$value": "{other-org.neutral.5}" + }, + "6": { + "$type": "color", + "$value": "{other-org.neutral.6}" + }, + "7": { + "$type": "color", + "$value": "{other-org.neutral.7}" + }, + "8": { + "$type": "color", + "$value": "{other-org.neutral.8}" + }, + "9": { + "$type": "color", + "$value": "{other-org.neutral.9}" + }, + "10": { + "$type": "color", + "$value": "{other-org.neutral.10}" + }, + "11": { + "$type": "color", + "$value": "{other-org.neutral.11}" + }, + "12": { + "$type": "color", + "$value": "{other-org.neutral.12}" + }, + "13": { + "$type": "color", + "$value": "{other-org.neutral.13}" + }, + "14": { + "$type": "color", + "$value": "{other-org.neutral.14}" + }, + "15": { + "$type": "color", + "$value": "{other-org.neutral.15}" + }, + "16": { + "$type": "color", + "$value": "{other-org.neutral.16}" + } + }, "info": { "1": { "$type": "color", diff --git a/packages/cli/tests/config/design-tokens/themes/some-org.json b/packages/cli/tests/config/design-tokens/themes/some-org.json index b8d51d880b..89cd69d647 100644 --- a/packages/cli/tests/config/design-tokens/themes/some-org.json +++ b/packages/cli/tests/config/design-tokens/themes/some-org.json @@ -132,72 +132,6 @@ "$value": "{some-org.complimentary.16}" } }, - "neutral": { - "1": { - "$type": "color", - "$value": "{some-org.neutral.1}" - }, - "2": { - "$type": "color", - "$value": "{some-org.neutral.2}" - }, - "3": { - "$type": "color", - "$value": "{some-org.neutral.3}" - }, - "4": { - "$type": "color", - "$value": "{some-org.neutral.4}" - }, - "5": { - "$type": "color", - "$value": "{some-org.neutral.5}" - }, - "6": { - "$type": "color", - "$value": "{some-org.neutral.6}" - }, - "7": { - "$type": "color", - "$value": "{some-org.neutral.7}" - }, - "8": { - "$type": "color", - "$value": "{some-org.neutral.8}" - }, - "9": { - "$type": "color", - "$value": "{some-org.neutral.9}" - }, - "10": { - "$type": "color", - "$value": "{some-org.neutral.10}" - }, - "11": { - "$type": "color", - "$value": "{some-org.neutral.11}" - }, - "12": { - "$type": "color", - "$value": "{some-org.neutral.12}" - }, - "13": { - "$type": "color", - "$value": "{some-org.neutral.13}" - }, - "14": { - "$type": "color", - "$value": "{some-org.neutral.14}" - }, - "15": { - "$type": "color", - "$value": "{some-org.neutral.15}" - }, - "16": { - "$type": "color", - "$value": "{some-org.neutral.16}" - } - }, "first": { "1": { "$type": "color", @@ -462,6 +396,72 @@ "$value": "{some-org.fourth.16}" } }, + "neutral": { + "1": { + "$type": "color", + "$value": "{some-org.neutral.1}" + }, + "2": { + "$type": "color", + "$value": "{some-org.neutral.2}" + }, + "3": { + "$type": "color", + "$value": "{some-org.neutral.3}" + }, + "4": { + "$type": "color", + "$value": "{some-org.neutral.4}" + }, + "5": { + "$type": "color", + "$value": "{some-org.neutral.5}" + }, + "6": { + "$type": "color", + "$value": "{some-org.neutral.6}" + }, + "7": { + "$type": "color", + "$value": "{some-org.neutral.7}" + }, + "8": { + "$type": "color", + "$value": "{some-org.neutral.8}" + }, + "9": { + "$type": "color", + "$value": "{some-org.neutral.9}" + }, + "10": { + "$type": "color", + "$value": "{some-org.neutral.10}" + }, + "11": { + "$type": "color", + "$value": "{some-org.neutral.11}" + }, + "12": { + "$type": "color", + "$value": "{some-org.neutral.12}" + }, + "13": { + "$type": "color", + "$value": "{some-org.neutral.13}" + }, + "14": { + "$type": "color", + "$value": "{some-org.neutral.14}" + }, + "15": { + "$type": "color", + "$value": "{some-org.neutral.15}" + }, + "16": { + "$type": "color", + "$value": "{some-org.neutral.16}" + } + }, "info": { "1": { "$type": "color",