diff --git a/packages/create-tokens/.eslintrc.cjs b/packages/create-tokens/.eslintrc.cjs new file mode 100644 index 0000000000..17b2c863b7 --- /dev/null +++ b/packages/create-tokens/.eslintrc.cjs @@ -0,0 +1,7 @@ +module.exports = { + root: false, + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + }, +}; diff --git a/packages/create-tokens/index.js b/packages/create-tokens/index.js new file mode 100755 index 0000000000..741b50aa1e --- /dev/null +++ b/packages/create-tokens/index.js @@ -0,0 +1,5 @@ +#!/usr/bin/env node + +import { require } from 'tsx/cjs/api'; + +require('./src/bin/create-tokens.ts', import.meta.url); diff --git a/packages/create-tokens/package.json b/packages/create-tokens/package.json new file mode 100644 index 0000000000..cb309828db --- /dev/null +++ b/packages/create-tokens/package.json @@ -0,0 +1,33 @@ +{ + "name": "@digdir/create-tokens", + "version": "0.1.0-alpha.7", + "description": "CLI tool to create an initial token structure for Designsystemet", + "author": "Designsystemet team", + "repository": { + "type": "git", + "url": "git+https://github.com/digdir/designsystemet.git" + }, + "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/create-tokens", + "license": "MIT", + "type": "module", + "publishConfig": { + "access": "public" + }, + "main": "index.js", + "bin": "index.js", + "scripts": { + "start": "node index.js" + }, + "dependencies": { + "@commander-js/extra-typings": "^12.0.1", + "change-case": "^5.3.0", + "commander": "^12.0.0", + "kleur": "^3.0.3", + "prompts": "^2.4.0", + "tsx": "^4.11.2" + }, + "devDependencies": { + "@tokens-studio/types": "^0.4.0", + "@types/prompts": "^2.4.9" + } +} diff --git a/packages/create-tokens/src/bin/create-tokens.ts b/packages/create-tokens/src/bin/create-tokens.ts new file mode 100644 index 0000000000..1719b62d03 --- /dev/null +++ b/packages/create-tokens/src/bin/create-tokens.ts @@ -0,0 +1,21 @@ +import { Argument, program } from '@commander-js/extra-typings'; + +import { createTokensPackage } from '../createTokensPackage'; + +program + .name('npm create @digdir/tokens') + .description( + 'CLI tool to create an initial token structure for Designsystemet', + ); + +program + .addArgument( + new Argument('', 'Target directory for the generated code'), + ) + .action(async (targetDir) => { + await createTokensPackage(targetDir); + }); + +program.showHelpAfterError(); + +void program.parseAsync(process.argv); diff --git a/packages/create-tokens/src/createTokensPackage.ts b/packages/create-tokens/src/createTokensPackage.ts new file mode 100644 index 0000000000..6a2ee00d3d --- /dev/null +++ b/packages/create-tokens/src/createTokensPackage.ts @@ -0,0 +1,335 @@ +import path from 'node:path'; +import fs from 'node:fs/promises'; + +import { bold, dim, red, green } from 'kleur'; +import type { Choice, Options } from 'prompts'; +import prompts from 'prompts'; + +import packageJsonTemplate from '../template/template-files/package.json'; + +import generateMetadata from './generateMetadataJson.js'; +import generateThemes from './generateThemesJson.js'; +import { + toGeneratedCssFileName, + normalizeTokenSetName, + toValidPackageName, +} from './utils.js'; +import { nextStepsMarkdown } from './nextStepsMarkdown.js'; + +const DEFAULT_FILES_PATH = path.join(__dirname, '../template/default-files'); + +const TOKEN_TEMPLATE_FILES_PATH = path.join( + __dirname, + '../template/template-files/design-tokens', +); + +const MODES = ['Light', 'Dark', 'Contrast'] as const; +export type Mode = (typeof MODES)[number]; + +interface DirectoryAnswers { + directoryAction?: 'clean' | 'ignore' | 'exit'; +} +interface PackageAnswers { + packageName: string; +} + +interface TokensAnswers { + tokensDir: string; + themeCount: number; + modes: Mode[]; +} + +interface ThemeAnswers { + name: string; +} + +const promptOptions: Options = { + onCancel: () => { + console.log(`${red('✖')} Operation cancelled`); + process.exit(); + }, +}; + +export async function createTokensPackage(targetDir: string) { + const TARGET_DIR = path.resolve(process.cwd(), targetDir); + const initialPackageName = toValidPackageName(path.basename(TARGET_DIR)); + + // Check target directory contents + let isTargetDirEmpty = true; + try { + const files = await fs.readdir(TARGET_DIR); + isTargetDirEmpty = files.length === 0; + } catch (err) { + if ((err as NodeJS.ErrnoException).code === 'ENOENT') { + // Directory doesn't exist, so we're good + } else { + console.error(err); + console.log('Continuing...'); + } + } + + const { directoryAction } = (await prompts( + { + name: 'directoryAction', + type: isTargetDirEmpty ? null : 'select', + message: 'Target directory is not empty. How should we proceed?', + choices: [ + { + title: 'Clean', + value: 'clean', + description: 'Empty the directory and continue', + }, + { + title: 'Ignore', + value: 'ignore', + description: + 'Keep directory as is. Files may be overwritten with new output.', + }, + { + title: 'Exit', + value: 'exit', + description: 'Exit without doing anything.', + }, + ], + }, + promptOptions, + )) as DirectoryAnswers; + + if (directoryAction === 'exit') { + process.exit(); + } + + const { packageName } = (await prompts( + [ + { + name: 'packageName', + type: 'text', + message: 'Enter a package name (for package.json)', + initial: initialPackageName, + }, + ], + promptOptions, + )) as PackageAnswers; + + const { modes, themeCount, tokensDir } = (await prompts( + [ + { + name: 'themeCount', + type: 'number', + message: 'How many themes do you want?', + initial: 1, + min: 1, + }, + { + name: 'modes', + type: 'multiselect', + choices: MODES.filter((x) => x !== 'Light').map((mode) => ({ + title: mode, + value: mode, + })), + message: 'Which color modes do you want?', + instructions: ` + Instructions: + ↑/↓: Highlight option + ←/→/[space]: Toggle selection + a: Toggle all + enter/return: Complete answer +${green('◉')} Light ${dim('- This is the default mode, and cannot be disabled')}`, + onState: (obj: { value: Choice[] }) => { + obj.value.unshift({ title: 'Light', value: 'Light', selected: true }); + }, + }, + { + name: 'tokensDir', + type: 'text', + initial: 'design-tokens', + message: `Enter the desired path for the design tokens`, + }, + ], + promptOptions, + )) as TokensAnswers; + + const themes: string[] = []; + const TOKENS_TARGET_DIR = path.join(TARGET_DIR, tokensDir); + + for (let n = 1; n <= themeCount; n++) { + const theme: ThemeAnswers = await prompts( + [ + { + name: 'name', + type: 'text', + message: `Enter the name of the ${ordinal(n)} theme`, + validate: (value: string) => isValidThemeName(themes, value), + }, + ], + promptOptions, + ); + themes.push(theme.name); + } + + const { defaultTheme = themes[0] } = (await prompts( + { + name: 'defaultTheme', + type: themeCount === 1 ? null : 'select', + message: 'Select the default theme to export in package.json', + choices: themes.map((theme) => ({ title: theme, value: theme })), + initial: 0, + }, + promptOptions, + )) as { defaultTheme?: string }; + console.log( + ` +Will now create the following: + ${bold('Package name')}: ${packageName} + ${bold('Directory')}: ${TARGET_DIR} + ${bold('Tokens directory')}: ${TOKENS_TARGET_DIR} + ${bold('Themes')}: ${themes.join(', ')} + ${bold('Default theme')}: ${defaultTheme} + ${bold('Color modes')}: ${modes.join(', ')} +`, + ); + if (directoryAction === 'clean') { + console.log( + bold().red(`Warning: Contents of ${TARGET_DIR} will be deleted`), + ); + } + if (directoryAction === 'ignore') { + console.log( + bold().yellow( + `Warning: Existing files in ${TARGET_DIR} may be overwritten`, + ), + ); + } + + const res = await prompts( + { + name: 'proceed', + type: 'confirm', + message: 'Proceed?', + initial: directoryAction === undefined, // default to proceeding if the output directory is empty + }, + promptOptions, + ); + + if (!res.proceed) { + process.exit(); + } + + if (directoryAction === 'clean') { + await fs.rm(TARGET_DIR, { recursive: true }); + } + + await fs.cp(DEFAULT_FILES_PATH, path.join(TARGET_DIR), { + recursive: true, + }); + if (tokensDir !== 'design-tokens') { + await fs.rename( + path.join(TARGET_DIR, 'design-tokens'), + path.join(TOKENS_TARGET_DIR), + ); + } + + try { + await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'themes')); + } catch { + // Directory creation failed, probably because the directory already exists + } + + for (const theme of themes.map(normalizeTokenSetName)) { + for (const mode of modes.map(normalizeTokenSetName)) { + // Copy the global file for the color mode + await fs.cp( + path.join( + TOKEN_TEMPLATE_FILES_PATH, + `primitives/colors/${mode}/global.json`, + ), + path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`), + { recursive: true }, + ); + + // Create theme primitives for the color mode + const template = await fs.readFile( + path.join( + TOKEN_TEMPLATE_FILES_PATH, + `primitives/colors/${mode}/theme-template.json`, + ), + ); + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`), + template.toString('utf-8').replaceAll('', theme), + ); + } + + // Create main theme token set + const template = await fs.readFile( + path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`), + ); + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, `themes/${theme}.json`), + template.toString('utf-8').replaceAll('', theme), + ); + + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, '$metadata.json'), + JSON.stringify(generateMetadata(modes, themes), undefined, 2), + ); + + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, '$themes.json'), + JSON.stringify(generateThemes(modes, themes), undefined, 2), + ); + } + + // Configure package.json file + packageJsonTemplate.name = packageName; + packageJsonTemplate.main = packageJsonTemplate.main.replace( + '', + toGeneratedCssFileName(defaultTheme), + ); + await fs.writeFile( + path.join(TARGET_DIR, 'package.json'), + JSON.stringify(packageJsonTemplate, undefined, 2), + ); + + const readmePath = path.join(TARGET_DIR, 'README.md'); + const currentReadme = await fs.readFile(readmePath); + await fs.writeFile( + readmePath, + [ + currentReadme.toString('utf-8'), + nextStepsMarkdown(themes, modes, tokensDir, packageName), + ].join('\n'), + ); + + console.log('🎉 Files successfully generated!'); + console.log( + `Read about the next steps in the generated README at ${readmePath}`, + ); +} + +function isValidThemeName(themes: string[], value: string): true | string { + const s = value.trim(); + if (s.length === 0) { + return 'Theme name cannot be empty.'; + } + if (themes.includes(s)) { + return 'Theme names must be unique.'; + } + if (/[^a-zæøå0-9 _-]/i.test(s)) { + return 'Theme name can only contain letters, numbers, dashes and underscores.'; + } + return true; +} + +function ordinal(n: number): string { + switch (n) { + case 1: + return '1st'; + case 2: + return '2nd'; + case 3: + return '3rd'; + default: + return `${n}th`; + } +} diff --git a/packages/create-tokens/src/generateMetadataJson.ts b/packages/create-tokens/src/generateMetadataJson.ts new file mode 100644 index 0000000000..651c2e5f53 --- /dev/null +++ b/packages/create-tokens/src/generateMetadataJson.ts @@ -0,0 +1,27 @@ +import { normalizeTokenSetName } from './utils.js'; + +interface Metadata { + tokenSetOrder: string[]; +} + +export default function generateMetadataJson( + modes: Array<'Light' | 'Dark' | 'Contrast'>, + themes: string[], +): Metadata { + return { + tokenSetOrder: [ + 'primitives/globals', + 'primitives/typography/default', + ...modes.flatMap((mode) => [ + `primitives/colors/${normalizeTokenSetName(mode)}/global`, + ...themes.map( + (theme) => + `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`, + ), + ]), + ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`), + 'semantic/color', + 'semantic/style', + ], + }; +} diff --git a/packages/create-tokens/src/generateThemesJson.ts b/packages/create-tokens/src/generateThemesJson.ts new file mode 100644 index 0000000000..d801433041 --- /dev/null +++ b/packages/create-tokens/src/generateThemesJson.ts @@ -0,0 +1,69 @@ +import { randomUUID } from 'node:crypto'; + +import { TokenSetStatus, type ThemeObject } from '@tokens-studio/types'; + +import { normalizeTokenSetName } from './utils.js'; + +export default function generateThemesJson( + modes: Array<'Light' | 'Dark' | 'Contrast'>, + themes: string[], +): ThemeObject[] { + return [ + ...generateModesGroup(modes, themes), + ...generateThemesGroup(themes), + generateSemanticGroup(), + ]; +} + +function generateModesGroup( + modes: Array<'Light' | 'Dark' | 'Contrast'>, + themes: string[], +): ThemeObject[] { + return modes.map( + (mode): ThemeObject => ({ + id: randomUUID(), + name: mode, + selectedTokenSets: Object.fromEntries([ + [ + `primitives/colors/${normalizeTokenSetName(mode)}/global`, + TokenSetStatus.ENABLED, + ], + ...themes.map( + (theme) => + [ + `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`, + TokenSetStatus.ENABLED, + ] as const, + ), + ]), + group: 'Mode', + }), + ); +} + +function generateThemesGroup(themes: string[]): ThemeObject[] { + return themes.map( + (theme): ThemeObject => ({ + id: randomUUID(), + name: theme, + selectedTokenSets: { + [`themes/${normalizeTokenSetName(theme)}`]: TokenSetStatus.ENABLED, + }, + group: 'Theme', + }), + ); +} + +function generateSemanticGroup(): ThemeObject { + return { + id: randomUUID(), + name: 'Semantic', + selectedTokenSets: { + 'semantic/style': TokenSetStatus.ENABLED, + 'semantic/color': TokenSetStatus.ENABLED, + 'primitives/globals': TokenSetStatus.SOURCE, + 'primitives/typography/default': TokenSetStatus.SOURCE, + }, + group: 'Semantic', + }; +} diff --git a/packages/create-tokens/src/nextStepsMarkdown.ts b/packages/create-tokens/src/nextStepsMarkdown.ts new file mode 100644 index 0000000000..66aae6fa1d --- /dev/null +++ b/packages/create-tokens/src/nextStepsMarkdown.ts @@ -0,0 +1,101 @@ +import { normalizeTokenSetName, toGeneratedCssFileName } from './utils.js'; +import type { Mode } from './createTokensPackage.js'; + +export function nextStepsMarkdown( + themes: string[], + modes: Mode[], + tokensTargetDir: string, + packageName: string, +) { + const themeModeCombinations = themes.flatMap((theme) => + modes.map((mode): [theme: string, mode: string] => [theme, mode]), + ); + const themeOrThemes = `theme${themes.length > 1 ? 's' : ''}`; + const isOrAre = themes.length > 1 ? 'are' : 'is'; + + return ` +## Next steps + +### Using the ${themeOrThemes} in Figma + +1. Initialise a git repository in the current directory +2. Push the tokens to GitHub, GitLab or Azure DevOps +3. [Open the Figma component library](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) and save it to your project +4. Install the [Tokens Studio plugin](https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)) in Figma +5. [Set up sync](https://docs.tokens.studio/sync/sync) in Tokens Studio for Figma +6. Use the ["Create variables" action](https://docs.tokens.studio/variables/creating-variables) in Tokens Studio +7. Push the resulting variables from Tokens Studio to Git + +### Customizing the ${themeOrThemes} + +1. Go to https://theme.designsystemet.no and set up a color theme +2. Press "Kopier tema" +3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to + the corresponding file under \`${tokensTargetDir}\`: +${themeModeCombinations.map(([theme, mode]) => ` **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\` `).join('\n')} + This can also be done in Tokens Studio for Figma. +4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2 + with the correct theme identifier, depending on the theme you're customizing. + This is the same as the json filename without extension (e.g. ${themes.map((x) => `\`${normalizeTokenSetName(x)}\``).join(', ')}). +${themes.length > 1 ? '5. Repeat steps 1—4 for the remaining themes' : ''} + +### Using the correct ${themeOrThemes} in Figma components + +The "Designsystemet - Core UI Kit" component library is set up with the themes +"Theme1" and "Theme2" by default. To ensure our custom ${themeOrThemes} ${isOrAre} used, follow these steps: + +1. Open your copy of "Designsystemet - Core UI Kit" in Figma +2. Pull any changes from Git using Tokens Studio +3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio +4. Access the [Variables modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) +5. Select the "Theme" collection in the upper left dropdown +6. Select "All variables" +7. Right click the modes "Theme1" and click "Delete mode" +8. Repeat for "Theme2" +9. Publish the library + +### Updating the Figma components after theme changes + +1. Open your copy of "Designsystemet - Core UI Kit" in Figma +2. Pull any changes from Git using Tokens Studio +3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio +4. Publish the library + +### Using the ${themeOrThemes} in code + +The current directory is set up to easily publish the ${themeOrThemes} as an npm package. + +1. Check that the package.json file is set up to your liking +2. \`npm install\` +3. \`npm run build\` - builds the css files for each theme and outputs them to \`./dist\` +4. \`npm publish\` - publishes the package to npm as \`${packageName}\`, unless you manually changed \`package.json\` + +In a different npm package (e.g. a frontend web app), follow the "Get started" +instructions at https://github.com/digdir/designsystemet but replace +\`@digdir/designsystemet-theme\` with \`${packageName}\`. In short: + +#### Install packages + +\`\`\` +npm i ${packageName} @digdir/designsystemet-css @digdir/designsystemet-react +\`\`\` + +#### Import the default theme and use components + +\`\`\`js +import '${packageName}'; +import '@digdir/designsystemet-css'; +import { Button } from '@digdir/designsystemet-react'; +\`\`\` + +${ + themes.length > 1 + ? ` +#### Or import a specific theme +\`\`\`js +import '${packageName}/${toGeneratedCssFileName(themes[1])}'; +\`\`\` +`.trim() + : '' +}`; +} diff --git a/packages/create-tokens/src/utils.ts b/packages/create-tokens/src/utils.ts new file mode 100644 index 0000000000..f5672134c2 --- /dev/null +++ b/packages/create-tokens/src/utils.ts @@ -0,0 +1,19 @@ +import { kebabCase } from 'change-case'; + +export function normalizeTokenSetName(name: string): string { + return kebabCase(name); +} + +export function toGeneratedCssFileName(name: string): string { + // This needs to match the output from `npx @digdir/designsystemet tokens` + return `${name.toLowerCase()}.css`; +} + +export function toValidPackageName(projectName: string) { + return projectName + .trim() + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/^[._]/, '') + .replace(/[^a-z\d\-~]+/g, '-'); +} diff --git a/packages/create-tokens/template/default-files/.gitignore b/packages/create-tokens/template/default-files/.gitignore new file mode 100644 index 0000000000..c6bba59138 --- /dev/null +++ b/packages/create-tokens/template/default-files/.gitignore @@ -0,0 +1,130 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* diff --git a/packages/create-tokens/template/default-files/README.md b/packages/create-tokens/template/default-files/README.md new file mode 100644 index 0000000000..418646b244 --- /dev/null +++ b/packages/create-tokens/template/default-files/README.md @@ -0,0 +1,10 @@ +# Design tokens for @digdir/designsystemet + +## Getting started + +``` +npm install +npm run build +``` + +The package is set up for publishing as an NPM library with `npm publish`. Ensure `package.json` is satisfactory before you do this. diff --git a/packages/create-tokens/template/default-files/design-tokens/README.md b/packages/create-tokens/template/default-files/design-tokens/README.md new file mode 100644 index 0000000000..414b1a8b98 --- /dev/null +++ b/packages/create-tokens/template/default-files/design-tokens/README.md @@ -0,0 +1,3 @@ +# Design tokens + +Design tokens structure from [Designsystemet](https://github.com/digdir/designsystemet) diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json b/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json new file mode 100644 index 0000000000..c6a71c9a88 --- /dev/null +++ b/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json @@ -0,0 +1,197 @@ +{ + "border-width": { + "1": { + "type": "borderWidth", + "value": "1px" + }, + "2": { + "type": "borderWidth", + "value": "2px" + } + }, + "shadow": { + "100": { + "type": "boxShadow", + "value": [ + { + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow", + "x": "0", + "y": "0", + "blur": "1", + "spread": "0" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ] + }, + "200": { + "type": "boxShadow", + "value": [ + { + "color": "rgba(0,0,0,0.15)", + "type": "dropShadow", + "x": "0", + "y": "0", + "blur": "1", + "spread": "0" + }, + { + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow", + "x": "0", + "y": "1", + "blur": "2", + "spread": "0" + }, + { + "x": "0", + "y": "2", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.1)", + "type": "dropShadow" + } + ] + }, + "300": { + "type": "boxShadow", + "value": [ + { + "color": "rgba(0,0,0,0.14)", + "type": "dropShadow", + "x": "0", + "y": "0", + "blur": "1", + "spread": "0" + }, + { + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "4", + "spread": "0" + }, + { + "x": "0", + "y": "4", + "blur": "8", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ] + }, + "400": { + "type": "boxShadow", + "value": [ + { + "color": "rgba(0,0,0,0.13)", + "type": "dropShadow", + "x": "0", + "y": "0", + "blur": "1", + "spread": "0" + }, + { + "color": "rgba(0,0,0,0.13)", + "type": "dropShadow", + "x": "0", + "y": "3", + "blur": "5", + "spread": "0" + }, + { + "x": "0", + "y": "6", + "blur": "12", + "spread": "0", + "color": "rgba(0,0,0,0.14)", + "type": "dropShadow" + } + ] + }, + "500": { + "type": "boxShadow", + "value": [ + { + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow", + "x": "0", + "y": "0", + "blur": "1", + "spread": "0" + }, + { + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow", + "x": "0", + "y": "4", + "blur": "8", + "spread": "0" + }, + { + "x": "0", + "y": "12", + "blur": "24", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ] + } + }, + "border-radius": { + "2": { + "type": "borderRadius", + "value": "2" + }, + "4": { + "type": "borderRadius", + "value": "4" + }, + "8": { + "type": "borderRadius", + "value": "8" + }, + "12": { + "type": "borderRadius", + "value": "12" + }, + "16": { + "type": "borderRadius", + "value": "16" + }, + "24": { + "type": "borderRadius", + "value": "24" + }, + "32": { + "type": "borderRadius", + "value": "32" + }, + "9999": { + "type": "borderRadius", + "value": "9999" + } + }, + "opacity": { + "30": { + "type": "opacity", + "value": "30%" + } + }, + "sizing": { + "base": { + "type": "sizing", + "value": "4" + } + } +} diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json b/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json new file mode 100644 index 0000000000..8ec654585f --- /dev/null +++ b/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json @@ -0,0 +1,86 @@ +{ + "font-family": { + "main": { + "type": "fontFamilies", + "value": "Inter" + } + }, + "line-height": { + "300": { + "type": "lineHeights", + "value": "130%" + }, + "500": { + "type": "lineHeights", + "value": "150%" + }, + "600": { + "type": "lineHeights", + "value": "160%" + }, + "700": { + "type": "lineHeights", + "value": "170%" + } + }, + "font-weight": { + "medium": { + "type": "fontWeights", + "value": "500" + }, + "semibold": { + "type": "fontWeights", + "value": "600" + }, + "regular": { + "type": "fontWeights", + "value": "400" + } + }, + "font-size": { + "f-3": { + "type": "fontSizes", + "value": "12" + }, + "f-2": { + "type": "fontSizes", + "value": "13" + }, + "f-1": { + "type": "fontSizes", + "value": "14" + }, + "f0": { + "type": "fontSizes", + "value": "16" + }, + "f1": { + "type": "fontSizes", + "value": "18" + }, + "f2": { + "type": "fontSizes", + "value": "21" + }, + "f3": { + "type": "fontSizes", + "value": "24" + }, + "f4": { + "type": "fontSizes", + "value": "30" + }, + "f5": { + "type": "fontSizes", + "value": "36" + }, + "f6": { + "type": "fontSizes", + "value": "48" + }, + "f7": { + "type": "fontSizes", + "value": "60" + } + } +} diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/color.json b/packages/create-tokens/template/default-files/design-tokens/semantic/color.json new file mode 100644 index 0000000000..037e6c7877 --- /dev/null +++ b/packages/create-tokens/template/default-files/design-tokens/semantic/color.json @@ -0,0 +1,562 @@ +{ + "color": { + "accent": { + "background-default": { + "type": "color", + "value": "{color.accent.1}" + }, + "background-subtle": { + "type": "color", + "value": "{color.accent.2}" + }, + "surface-default": { + "type": "color", + "value": "{color.accent.3}" + }, + "surface-hover": { + "type": "color", + "value": "{color.accent.4}" + }, + "surface-active": { + "type": "color", + "value": "{color.accent.5}" + }, + "border-subtle": { + "type": "color", + "value": "{color.accent.6}" + }, + "border-default": { + "type": "color", + "value": "{color.accent.7}" + }, + "border-strong": { + "type": "color", + "value": "{color.accent.8}" + }, + "base-default": { + "type": "color", + "value": "{color.accent.9}" + }, + "base-hover": { + "type": "color", + "value": "{color.accent.10}" + }, + "base-active": { + "type": "color", + "value": "{color.accent.11}" + }, + "text-subtle": { + "type": "color", + "value": "{color.accent.12}" + }, + "text-default": { + "type": "color", + "value": "{color.accent.13}" + }, + "contrast-default": { + "type": "color", + "value": "{color.accent.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{color.accent.contrast-2}" + } + }, + "neutral": { + "background-default": { + "type": "color", + "value": "{color.neutral.1}" + }, + "background-subtle": { + "type": "color", + "value": "{color.neutral.2}" + }, + "surface-default": { + "type": "color", + "value": "{color.neutral.3}" + }, + "surface-hover": { + "type": "color", + "value": "{color.neutral.4}" + }, + "surface-active": { + "type": "color", + "value": "{color.neutral.5}" + }, + "border-subtle": { + "type": "color", + "value": "{color.neutral.6}" + }, + "border-default": { + "type": "color", + "value": "{color.neutral.7}" + }, + "border-strong": { + "type": "color", + "value": "{color.neutral.8}" + }, + "base-default": { + "type": "color", + "value": "{color.neutral.9}" + }, + "base-hover": { + "type": "color", + "value": "{color.neutral.10}" + }, + "base-active": { + "type": "color", + "value": "{color.neutral.11}" + }, + "text-subtle": { + "type": "color", + "value": "{color.neutral.12}" + }, + "text-default": { + "type": "color", + "value": "{color.neutral.13}" + }, + "contrast-default": { + "type": "color", + "value": "{color.neutral.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{color.neutral.contrast-2}" + } + }, + "brand1": { + "background-default": { + "type": "color", + "value": "{color.brand1.1}" + }, + "background-subtle": { + "type": "color", + "value": "{color.brand1.2}" + }, + "surface-default": { + "type": "color", + "value": "{color.brand1.3}" + }, + "surface-hover": { + "type": "color", + "value": "{color.brand1.4}" + }, + "surface-active": { + "type": "color", + "value": "{color.brand1.5}" + }, + "border-subtle": { + "type": "color", + "value": "{color.brand1.6}" + }, + "border-default": { + "type": "color", + "value": "{color.brand1.7}" + }, + "border-strong": { + "type": "color", + "value": "{color.brand1.8}" + }, + "base-default": { + "type": "color", + "value": "{color.brand1.9}" + }, + "base-hover": { + "type": "color", + "value": "{color.brand1.10}" + }, + "base-active": { + "type": "color", + "value": "{color.brand1.11}" + }, + "text-subtle": { + "type": "color", + "value": "{color.brand1.12}" + }, + "text-default": { + "type": "color", + "value": "{color.brand1.13}" + }, + "contrast-default": { + "type": "color", + "value": "{color.brand1.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{color.brand1.contrast-2}" + } + }, + "brand2": { + "background-default": { + "type": "color", + "value": "{color.brand2.1}" + }, + "background-subtle": { + "type": "color", + "value": "{color.brand2.2}" + }, + "surface-default": { + "type": "color", + "value": "{color.brand2.3}" + }, + "surface-hover": { + "type": "color", + "value": "{color.brand2.4}" + }, + "surface-active": { + "type": "color", + "value": "{color.brand2.5}" + }, + "border-subtle": { + "type": "color", + "value": "{color.brand2.6}" + }, + "border-default": { + "type": "color", + "value": "{color.brand2.7}" + }, + "border-strong": { + "type": "color", + "value": "{color.brand2.8}" + }, + "base-default": { + "type": "color", + "value": "{color.brand2.9}" + }, + "base-hover": { + "type": "color", + "value": "{color.brand2.10}" + }, + "base-active": { + "type": "color", + "value": "{color.brand2.11}" + }, + "text-subtle": { + "type": "color", + "value": "{color.brand2.12}" + }, + "text-default": { + "type": "color", + "value": "{color.brand2.13}" + }, + "contrast-default": { + "type": "color", + "value": "{color.brand2.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{color.brand2.contrast-2}" + } + }, + "brand3": { + "background-default": { + "type": "color", + "value": "{color.brand3.1}" + }, + "background-subtle": { + "type": "color", + "value": "{color.brand3.2}" + }, + "surface-default": { + "type": "color", + "value": "{color.brand3.3}" + }, + "surface-hover": { + "type": "color", + "value": "{color.brand3.4}" + }, + "surface-active": { + "type": "color", + "value": "{color.brand3.5}" + }, + "border-subtle": { + "type": "color", + "value": "{color.brand3.6}" + }, + "border-default": { + "type": "color", + "value": "{color.brand3.7}" + }, + "border-strong": { + "type": "color", + "value": "{color.brand3.8}" + }, + "base-default": { + "type": "color", + "value": "{color.brand3.9}" + }, + "base-hover": { + "type": "color", + "value": "{color.brand3.10}" + }, + "base-active": { + "type": "color", + "value": "{color.brand3.11}" + }, + "text-subtle": { + "type": "color", + "value": "{color.brand3.12}" + }, + "text-default": { + "type": "color", + "value": "{color.brand3.13}" + }, + "contrast-default": { + "type": "color", + "value": "{color.brand3.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{color.brand3.contrast-2}" + } + }, + "success": { + "background-default": { + "type": "color", + "value": "{global.green.1}" + }, + "background-subtle": { + "type": "color", + "value": "{global.green.2}" + }, + "surface-default": { + "type": "color", + "value": "{global.green.3}" + }, + "surface-hover": { + "type": "color", + "value": "{global.green.4}" + }, + "surface-active": { + "type": "color", + "value": "{global.green.5}" + }, + "border-subtle": { + "type": "color", + "value": "{global.green.6}" + }, + "border-default": { + "type": "color", + "value": "{global.green.7}" + }, + "border-strong": { + "type": "color", + "value": "{global.green.8}" + }, + "base-default": { + "type": "color", + "value": "{global.green.9}" + }, + "base-hover": { + "type": "color", + "value": "{global.green.10}" + }, + "base-active": { + "type": "color", + "value": "{global.green.11}" + }, + "text-subtle": { + "type": "color", + "value": "{global.green.12}" + }, + "text-default": { + "type": "color", + "value": "{global.green.13}" + }, + "contrast-default": { + "type": "color", + "value": "{global.green.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{global.green.contrast-2}" + } + }, + "danger": { + "background-default": { + "type": "color", + "value": "{global.red.1}" + }, + "background-subtle": { + "type": "color", + "value": "{global.red.2}" + }, + "surface-default": { + "type": "color", + "value": "{global.red.3}" + }, + "surface-hover": { + "type": "color", + "value": "{global.red.4}" + }, + "surface-active": { + "type": "color", + "value": "{global.red.5}" + }, + "border-subtle": { + "type": "color", + "value": "{global.red.6}" + }, + "border-default": { + "type": "color", + "value": "{global.red.7}" + }, + "border-strong": { + "type": "color", + "value": "{global.red.8}" + }, + "base-default": { + "type": "color", + "value": "{global.red.9}" + }, + "base-hover": { + "type": "color", + "value": "{global.red.10}" + }, + "base-active": { + "type": "color", + "value": "{global.red.11}" + }, + "text-subtle": { + "type": "color", + "value": "{global.red.12}" + }, + "text-default": { + "type": "color", + "value": "{global.red.13}" + }, + "contrast-default": { + "type": "color", + "value": "{global.red.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{global.red.contrast-2}" + } + }, + "info": { + "background-default": { + "type": "color", + "value": "{global.blue.1}" + }, + "background-subtle": { + "type": "color", + "value": "{global.blue.2}" + }, + "surface-default": { + "type": "color", + "value": "{global.blue.3}" + }, + "surface-hover": { + "type": "color", + "value": "{global.blue.4}" + }, + "surface-active": { + "type": "color", + "value": "{global.blue.5}" + }, + "border-subtle": { + "type": "color", + "value": "{global.blue.6}" + }, + "border-default": { + "type": "color", + "value": "{global.blue.7}" + }, + "border-strong": { + "type": "color", + "value": "{global.blue.8}" + }, + "base-default": { + "type": "color", + "value": "{global.blue.9}" + }, + "base-hover": { + "type": "color", + "value": "{global.blue.10}" + }, + "base-active": { + "type": "color", + "value": "{global.blue.11}" + }, + "text-subtle": { + "type": "color", + "value": "{global.blue.12}" + }, + "text-default": { + "type": "color", + "value": "{global.blue.13}" + }, + "contrast-default": { + "type": "color", + "value": "{global.blue.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{global.blue.contrast-2}" + } + }, + "warning": { + "background-default": { + "type": "color", + "value": "{global.yellow.1}" + }, + "background-subtle": { + "type": "color", + "value": "{global.yellow.2}" + }, + "surface-default": { + "type": "color", + "value": "{global.yellow.3}" + }, + "surface-hover": { + "type": "color", + "value": "{global.yellow.4}" + }, + "surface-active": { + "type": "color", + "value": "{global.yellow.5}" + }, + "border-subtle": { + "type": "color", + "value": "{global.yellow.6}" + }, + "border-default": { + "type": "color", + "value": "{global.yellow.7}" + }, + "border-strong": { + "type": "color", + "value": "{global.yellow.8}" + }, + "base-default": { + "type": "color", + "value": "{global.orange.9}" + }, + "base-hover": { + "type": "color", + "value": "{global.orange.10}" + }, + "base-active": { + "type": "color", + "value": "{global.orange.11}" + }, + "text-subtle": { + "type": "color", + "value": "{global.orange.12}" + }, + "text-default": { + "type": "color", + "value": "{global.orange.13}" + }, + "contrast-default": { + "type": "color", + "value": "{global.yellow.contrast-1}" + }, + "contrast-subtle": { + "type": "color", + "value": "{global.yellow.contrast-2}" + } + } + } +} diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/style.json b/packages/create-tokens/template/default-files/design-tokens/semantic/style.json new file mode 100644 index 0000000000..dabf65db81 --- /dev/null +++ b/packages/create-tokens/template/default-files/design-tokens/semantic/style.json @@ -0,0 +1,543 @@ +{ + "typography": { + "heading": { + "2xl": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f7}" + } + }, + "xl": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f6}" + }, + "description": "H1" + }, + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f5}" + }, + "description": "H2" + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f4}" + }, + "description": "H3" + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f3}" + }, + "description": "H4" + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f2}" + }, + "description": "H5" + }, + "2xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f1}" + }, + "description": "H6" + } + }, + "ingress": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f4}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f3}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f2}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f1}" + } + } + }, + "paragraph": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.500}", + "fontSize": "{font-size.f2}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.500}", + "fontSize": "{font-size.f1}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.500}", + "fontSize": "{font-size.f0}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.500}", + "fontSize": "{font-size.f-1}" + } + }, + "short": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f2}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f1}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f0}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f-1}" + } + } + }, + "long": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f1}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f0}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f-1}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.700}", + "fontSize": "{font-size.f-2}" + } + } + } + }, + "label": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f2}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f1}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f0}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.medium}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f-1}" + } + } + }, + "error_message": { + "lg": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f2}" + } + }, + "md": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f1}" + } + }, + "sm": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f0}" + } + }, + "xs": { + "type": "typography", + "value": { + "fontFamily": "{font-family.main}", + "fontWeight": "{font-weight.regular}", + "lineHeight": "{line-height.300}", + "fontSize": "{font-size.f-1}" + } + } + } + }, + "opacity": { + "disabled": { + "type": "opacity", + "value": "{opacity.30}" + } + }, + "border-radius": { + "sm": { + "type": "borderRadius", + "value": "{border-radius.2}" + }, + "md": { + "type": "borderRadius", + "value": "{border-radius.4}" + }, + "lg": { + "type": "borderRadius", + "value": "{border-radius.8}" + }, + "xl": { + "type": "borderRadius", + "value": "{border-radius.12}" + }, + "2xl": { + "type": "borderRadius", + "value": "{border-radius.16}" + }, + "3xl": { + "type": "borderRadius", + "value": "{border-radius.24}" + }, + "4xl": { + "type": "borderRadius", + "value": "{border-radius.32}" + }, + "full": { + "type": "borderRadius", + "value": "{border-radius.9999}" + } + }, + "spacing": { + "0": { + "type": "spacing", + "value": "{sizing.base}*0" + }, + "1": { + "type": "spacing", + "value": "{sizing.base}*1" + }, + "2": { + "type": "spacing", + "value": "{sizing.base}*2" + }, + "3": { + "type": "spacing", + "value": "{sizing.base}*3" + }, + "4": { + "type": "spacing", + "value": "{sizing.base}*4" + }, + "5": { + "type": "spacing", + "value": "{sizing.base}*5" + }, + "6": { + "type": "spacing", + "value": "{sizing.base}*6" + }, + "7": { + "type": "spacing", + "value": "{sizing.base}*7" + }, + "8": { + "type": "spacing", + "value": "{sizing.base}*8" + }, + "9": { + "type": "spacing", + "value": "{sizing.base}*9" + }, + "10": { + "type": "spacing", + "value": "{sizing.base}*10" + }, + "11": { + "type": "spacing", + "value": "{sizing.base}*11" + }, + "12": { + "type": "spacing", + "value": "{sizing.base}*12" + }, + "13": { + "type": "spacing", + "value": "{sizing.base}*13" + }, + "14": { + "type": "spacing", + "value": "{sizing.base}*14" + }, + "15": { + "type": "spacing", + "value": "{sizing.base}*15" + }, + "18": { + "type": "spacing", + "value": "{sizing.base}*18" + }, + "22": { + "type": "spacing", + "value": "{sizing.base}*22" + }, + "26": { + "type": "spacing", + "value": "{sizing.base}*26" + }, + "30": { + "type": "spacing", + "value": "{sizing.base}*30" + } + }, + "sizing": { + "0": { + "type": "sizing", + "value": "{sizing.base}*0" + }, + "1": { + "type": "sizing", + "value": "{sizing.base}*1" + }, + "2": { + "type": "sizing", + "value": "{sizing.base}*2" + }, + "3": { + "type": "sizing", + "value": "{sizing.base}*3" + }, + "4": { + "type": "sizing", + "value": "{sizing.base}*4" + }, + "5": { + "type": "sizing", + "value": "{sizing.base}*5" + }, + "6": { + "type": "sizing", + "value": "{sizing.base}*6" + }, + "7": { + "type": "sizing", + "value": "{sizing.base}*7" + }, + "8": { + "type": "sizing", + "value": "{sizing.base}*8" + }, + "9": { + "type": "sizing", + "value": "{sizing.base}*9" + }, + "10": { + "type": "sizing", + "value": "{sizing.base}*10" + }, + "11": { + "type": "sizing", + "value": "{sizing.base}*11" + }, + "12": { + "type": "sizing", + "value": "{sizing.base}*12" + }, + "13": { + "type": "sizing", + "value": "{sizing.base}*13" + }, + "14": { + "type": "sizing", + "value": "{sizing.base}*14" + }, + "15": { + "type": "sizing", + "value": "{sizing.base}*15" + }, + "18": { + "type": "sizing", + "value": "{sizing.base}*18" + }, + "22": { + "type": "sizing", + "value": "{sizing.base}*22" + }, + "26": { + "type": "sizing", + "value": "{sizing.base}*26" + }, + "30": { + "type": "sizing", + "value": "{sizing.base}*30" + } + }, + "border-width": { + "default": { + "type": "borderWidth", + "value": "{border-width.1}" + }, + "active": { + "type": "borderWidth", + "value": "{border-width.2}" + }, + "tab_focus": { + "type": "borderWidth", + "value": "{border-width.2}" + } + }, + "shadow": { + "xs": { + "type": "boxShadow", + "value": "{shadow.100}" + }, + "sm": { + "type": "boxShadow", + "value": "{shadow.200}" + }, + "md": { + "type": "boxShadow", + "value": "{shadow.300}" + }, + "lg": { + "type": "boxShadow", + "value": "{shadow.400}" + }, + "xl": { + "type": "boxShadow", + "value": "{shadow.500}" + } + } +} diff --git a/packages/create-tokens/template/prettier.config.mjs b/packages/create-tokens/template/prettier.config.mjs new file mode 100644 index 0000000000..67be8eec58 --- /dev/null +++ b/packages/create-tokens/template/prettier.config.mjs @@ -0,0 +1,9 @@ +/** + * NOTE: This config exists to ensure files in the template dir are + * formatted using the default prettier rules + * @see https://prettier.io/docs/en/configuration.html + * @type {import("prettier").Config} + */ +const config = {}; + +export default config; diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json new file mode 100644 index 0000000000..c12da3fcf6 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json @@ -0,0 +1,376 @@ +{ + "global": { + "blue": { + "1": { + "value": "#000408", + "type": "color" + }, + "2": { + "value": "#021423", + "type": "color" + }, + "3": { + "value": "#032540", + "type": "color" + }, + "4": { + "value": "#043256", + "type": "color" + }, + "5": { + "value": "#063f6c", + "type": "color" + }, + "6": { + "value": "#4291ce", + "type": "color" + }, + "7": { + "value": "#78b1dc", + "type": "color" + }, + "8": { + "value": "#aed0ea", + "type": "color" + }, + "9": { + "value": "#0A71C0", + "type": "color" + }, + "10": { + "value": "#085ea0", + "type": "color" + }, + "11": { + "value": "#074b80", + "type": "color" + }, + "12": { + "value": "#a6cbe8", + "type": "color" + }, + "13": { + "value": "#e8f1f9", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#f3f8fc", + "type": "color" + } + }, + "green": { + "1": { + "value": "#000401", + "type": "color" + }, + "2": { + "value": "#011704", + "type": "color" + }, + "3": { + "value": "#022b08", + "type": "color" + }, + "4": { + "value": "#03380a", + "type": "color" + }, + "5": { + "value": "#04480d", + "type": "color" + }, + "6": { + "value": "#2f9f3e", + "type": "color" + }, + "7": { + "value": "#6dbc78", + "type": "color" + }, + "8": { + "value": "#a8d7ae", + "type": "color" + }, + "9": { + "value": "#078D19", + "type": "color" + }, + "10": { + "value": "#067615", + "type": "color" + }, + "11": { + "value": "#056011", + "type": "color" + }, + "12": { + "value": "#a0d3a7", + "type": "color" + }, + "13": { + "value": "#e7f4e9", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000401", + "type": "color" + } + }, + "orange": { + "1": { + "value": "#070301", + "type": "color" + }, + "2": { + "value": "#200f05", + "type": "color" + }, + "3": { + "value": "#3a1b0a", + "type": "color" + }, + "4": { + "value": "#50240d", + "type": "color" + }, + "5": { + "value": "#652e10", + "type": "color" + }, + "6": { + "value": "#d1713e", + "type": "color" + }, + "7": { + "value": "#df9b77", + "type": "color" + }, + "8": { + "value": "#ecc4ae", + "type": "color" + }, + "9": { + "value": "#CA5C21", + "type": "color" + }, + "10": { + "value": "#a94d1c", + "type": "color" + }, + "11": { + "value": "#8a3f17", + "type": "color" + }, + "12": { + "value": "#e9bda5", + "type": "color" + }, + "13": { + "value": "#faefe9", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#0d0602", + "type": "color" + } + }, + "purple": { + "1": { + "value": "#060308", + "type": "color" + }, + "2": { + "value": "#1a0d26", + "type": "color" + }, + "3": { + "value": "#301748", + "type": "color" + }, + "4": { + "value": "#402060", + "type": "color" + }, + "5": { + "value": "#52287a", + "type": "color" + }, + "6": { + "value": "#9e7dbf", + "type": "color" + }, + "7": { + "value": "#b9a1d0", + "type": "color" + }, + "8": { + "value": "#d5c7e3", + "type": "color" + }, + "9": { + "value": "#663299", + "type": "color" + }, + "10": { + "value": "#4f2777", + "type": "color" + }, + "11": { + "value": "#381b54", + "type": "color" + }, + "12": { + "value": "#d0c0e0", + "type": "color" + }, + "13": { + "value": "#f2eef7", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#eee8f3", + "type": "color" + } + }, + "red": { + "1": { + "value": "#0b0101", + "type": "color" + }, + "2": { + "value": "#2b0606", + "type": "color" + }, + "3": { + "value": "#4b0a0a", + "type": "color" + }, + "4": { + "value": "#620e0e", + "type": "color" + }, + "5": { + "value": "#7c1212", + "type": "color" + }, + "6": { + "value": "#d66b6b", + "type": "color" + }, + "7": { + "value": "#e29797", + "type": "color" + }, + "8": { + "value": "#eec1c1", + "type": "color" + }, + "9": { + "value": "#C01B1B", + "type": "color" + }, + "10": { + "value": "#9a1616", + "type": "color" + }, + "11": { + "value": "#771111", + "type": "color" + }, + "12": { + "value": "#ecbaba", + "type": "color" + }, + "13": { + "value": "#faeded", + "type": "color" + }, + "contrast-1": { + "value": "#fffefe", + "type": "color" + }, + "contrast-2": { + "value": "#f6e0e0", + "type": "color" + } + }, + "yellow": { + "1": { + "value": "#040301", + "type": "color" + }, + "2": { + "value": "#181304", + "type": "color" + }, + "3": { + "value": "#2b2307", + "type": "color" + }, + "4": { + "value": "#3a300a", + "type": "color" + }, + "5": { + "value": "#4a3d0d", + "type": "color" + }, + "6": { + "value": "#a7881c", + "type": "color" + }, + "7": { + "value": "#cca723", + "type": "color" + }, + "8": { + "value": "#edc94b", + "type": "color" + }, + "9": { + "value": "#EABF28", + "type": "color" + }, + "10": { + "value": "#d0aa24", + "type": "color" + }, + "11": { + "value": "#b7951f", + "type": "color" + }, + "12": { + "value": "#ebc232", + "type": "color" + }, + "13": { + "value": "#faf0cd", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#382d0a", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json new file mode 100644 index 0000000000..e424f5b596 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json @@ -0,0 +1,314 @@ +{ + "": { + "accent": { + "1": { + "value": "#000409", + "type": "color" + }, + "2": { + "value": "#001427", + "type": "color" + }, + "3": { + "value": "#002445", + "type": "color" + }, + "4": { + "value": "#00315c", + "type": "color" + }, + "5": { + "value": "#003d75", + "type": "color" + }, + "6": { + "value": "#4b90ce", + "type": "color" + }, + "7": { + "value": "#7eb0dc", + "type": "color" + }, + "8": { + "value": "#b0cfea", + "type": "color" + }, + "9": { + "value": "#0062BA", + "type": "color" + }, + "10": { + "value": "#005099", + "type": "color" + }, + "11": { + "value": "#003d75", + "type": "color" + }, + "12": { + "value": "#a9cae8", + "type": "color" + }, + "13": { + "value": "#e8f1f9", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#ddeaf6", + "type": "color" + } + }, + "neutral": { + "1": { + "value": "#020405", + "type": "color" + }, + "2": { + "value": "#0e141b", + "type": "color" + }, + "3": { + "value": "#192433", + "type": "color" + }, + "4": { + "value": "#243142", + "type": "color" + }, + "5": { + "value": "#333e4e", + "type": "color" + }, + "6": { + "value": "#858c96", + "type": "color" + }, + "7": { + "value": "#a6abb2", + "type": "color" + }, + "8": { + "value": "#c9ccd0", + "type": "color" + }, + "9": { + "value": "#1E2B3C", + "type": "color" + }, + "10": { + "value": "#303c4b", + "type": "color" + }, + "11": { + "value": "#444e5d", + "type": "color" + }, + "12": { + "value": "#c3c6cb", + "type": "color" + }, + "13": { + "value": "#eff0f1", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#bbbfc4", + "type": "color" + } + }, + "brand1": { + "1": { + "value": "#060303", + "type": "color" + }, + "2": { + "value": "#230d0e", + "type": "color" + }, + "3": { + "value": "#3c1819", + "type": "color" + }, + "4": { + "value": "#522021", + "type": "color" + }, + "5": { + "value": "#68292a", + "type": "color" + }, + "6": { + "value": "#eb5b5f", + "type": "color" + }, + "7": { + "value": "#f78d8f", + "type": "color" + }, + "8": { + "value": "#fabcbd", + "type": "color" + }, + "9": { + "value": "#F45F63", + "type": "color" + }, + "10": { + "value": "#d15155", + "type": "color" + }, + "11": { + "value": "#b04447", + "type": "color" + }, + "12": { + "value": "#fab4b5", + "type": "color" + }, + "13": { + "value": "#feeced", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000000", + "type": "color" + } + }, + "brand2": { + "1": { + "value": "#050301", + "type": "color" + }, + "2": { + "value": "#191303", + "type": "color" + }, + "3": { + "value": "#2d2206", + "type": "color" + }, + "4": { + "value": "#3d2e09", + "type": "color" + }, + "5": { + "value": "#4f3b0b", + "type": "color" + }, + "6": { + "value": "#b28419", + "type": "color" + }, + "7": { + "value": "#daa21f", + "type": "color" + }, + "8": { + "value": "#eec76c", + "type": "color" + }, + "9": { + "value": "#E5AA20", + "type": "color" + }, + "10": { + "value": "#c9951c", + "type": "color" + }, + "11": { + "value": "#ae8118", + "type": "color" + }, + "12": { + "value": "#ecc059", + "type": "color" + }, + "13": { + "value": "#faefd6", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#2b2006", + "type": "color" + } + }, + "brand3": { + "1": { + "value": "#010407", + "type": "color" + }, + "2": { + "value": "#041421", + "type": "color" + }, + "3": { + "value": "#07253c", + "type": "color" + }, + "4": { + "value": "#0a3251", + "type": "color" + }, + "5": { + "value": "#0d4068", + "type": "color" + }, + "6": { + "value": "#1c90e8", + "type": "color" + }, + "7": { + "value": "#57b2f8", + "type": "color" + }, + "8": { + "value": "#9cd2fb", + "type": "color" + }, + "9": { + "value": "#1E98F5", + "type": "color" + }, + "10": { + "value": "#1a83d3", + "type": "color" + }, + "11": { + "value": "#166eb2", + "type": "color" + }, + "12": { + "value": "#90ccfa", + "type": "color" + }, + "13": { + "value": "#e3f2fe", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#010407", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json new file mode 100644 index 0000000000..9c9a1c7a18 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json @@ -0,0 +1,376 @@ +{ + "global": { + "blue": { + "1": { + "value": "#031d30", + "type": "color" + }, + "2": { + "value": "#032540", + "type": "color" + }, + "3": { + "value": "#043256", + "type": "color" + }, + "4": { + "value": "#063f6c", + "type": "color" + }, + "5": { + "value": "#074d84", + "type": "color" + }, + "6": { + "value": "#075490", + "type": "color" + }, + "7": { + "value": "#0c72c1", + "type": "color" + }, + "8": { + "value": "#98c3e5", + "type": "color" + }, + "9": { + "value": "#0c72c1", + "type": "color" + }, + "10": { + "value": "#085ea0", + "type": "color" + }, + "11": { + "value": "#074b80", + "type": "color" + }, + "12": { + "value": "#62a4d7", + "type": "color" + }, + "13": { + "value": "#cde2f2", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#f3f8fc", + "type": "color" + } + }, + "green": { + "1": { + "value": "#022106", + "type": "color" + }, + "2": { + "value": "#022b08", + "type": "color" + }, + "3": { + "value": "#03380a", + "type": "color" + }, + "4": { + "value": "#04480d", + "type": "color" + }, + "5": { + "value": "#045810", + "type": "color" + }, + "6": { + "value": "#056011", + "type": "color" + }, + "7": { + "value": "#068117", + "type": "color" + }, + "8": { + "value": "#90cc98", + "type": "color" + }, + "9": { + "value": "#078d19", + "type": "color" + }, + "10": { + "value": "#067615", + "type": "color" + }, + "11": { + "value": "#056011", + "type": "color" + }, + "12": { + "value": "#54b061", + "type": "color" + }, + "13": { + "value": "#cbe7cf", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000401", + "type": "color" + } + }, + "orange": { + "1": { + "value": "#2e1508", + "type": "color" + }, + "2": { + "value": "#3a1b0a", + "type": "color" + }, + "3": { + "value": "#50240d", + "type": "color" + }, + "4": { + "value": "#652e10", + "type": "color" + }, + "5": { + "value": "#7a3814", + "type": "color" + }, + "6": { + "value": "#863d16", + "type": "color" + }, + "7": { + "value": "#b5531e", + "type": "color" + }, + "8": { + "value": "#e6b398", + "type": "color" + }, + "9": { + "value": "#c95c21", + "type": "color" + }, + "10": { + "value": "#a94d1c", + "type": "color" + }, + "11": { + "value": "#8a3f17", + "type": "color" + }, + "12": { + "value": "#d98a5f", + "type": "color" + }, + "13": { + "value": "#f3dbcd", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#0d0602", + "type": "color" + } + }, + "purple": { + "1": { + "value": "#251238", + "type": "color" + }, + "2": { + "value": "#301748", + "type": "color" + }, + "3": { + "value": "#402060", + "type": "color" + }, + "4": { + "value": "#52287a", + "type": "color" + }, + "5": { + "value": "#643196", + "type": "color" + }, + "6": { + "value": "#6b399d", + "type": "color" + }, + "7": { + "value": "#865daf", + "type": "color" + }, + "8": { + "value": "#c9b7db", + "type": "color" + }, + "9": { + "value": "#663399", + "type": "color" + }, + "10": { + "value": "#4f2777", + "type": "color" + }, + "11": { + "value": "#381b54", + "type": "color" + }, + "12": { + "value": "#ae93c9", + "type": "color" + }, + "13": { + "value": "#e4dbed", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#eee8f3", + "type": "color" + } + }, + "red": { + "1": { + "value": "#3b0808", + "type": "color" + }, + "2": { + "value": "#4b0a0a", + "type": "color" + }, + "3": { + "value": "#620e0e", + "type": "color" + }, + "4": { + "value": "#7c1212", + "type": "color" + }, + "5": { + "value": "#961515", + "type": "color" + }, + "6": { + "value": "#a31717", + "type": "color" + }, + "7": { + "value": "#c93c3c", + "type": "color" + }, + "8": { + "value": "#e9b0b0", + "type": "color" + }, + "9": { + "value": "#bf1b1b", + "type": "color" + }, + "10": { + "value": "#9a1616", + "type": "color" + }, + "11": { + "value": "#771111", + "type": "color" + }, + "12": { + "value": "#dd8585", + "type": "color" + }, + "13": { + "value": "#f5d9d9", + "type": "color" + }, + "contrast-1": { + "value": "#fffefe", + "type": "color" + }, + "contrast-2": { + "value": "#f6dfdf", + "type": "color" + } + }, + "yellow": { + "1": { + "value": "#221b06", + "type": "color" + }, + "2": { + "value": "#2b2307", + "type": "color" + }, + "3": { + "value": "#3a300a", + "type": "color" + }, + "4": { + "value": "#4a3d0d", + "type": "color" + }, + "5": { + "value": "#5a4a0f", + "type": "color" + }, + "6": { + "value": "#635011", + "type": "color" + }, + "7": { + "value": "#856d17", + "type": "color" + }, + "8": { + "value": "#e4ba27", + "type": "color" + }, + "9": { + "value": "#eabf28", + "type": "color" + }, + "10": { + "value": "#d0aa24", + "type": "color" + }, + "11": { + "value": "#b7951f", + "type": "color" + }, + "12": { + "value": "#bd9a20", + "type": "color" + }, + "13": { + "value": "#f4de8f", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#382d0a", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json new file mode 100644 index 0000000000..e09aa09fec --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json @@ -0,0 +1,314 @@ +{ + "": { + "accent": { + "1": { + "value": "#001c36", + "type": "color" + }, + "2": { + "value": "#002445", + "type": "color" + }, + "3": { + "value": "#00315c", + "type": "color" + }, + "4": { + "value": "#003d75", + "type": "color" + }, + "5": { + "value": "#004b8f", + "type": "color" + }, + "6": { + "value": "#00529d", + "type": "color" + }, + "7": { + "value": "#1972c1", + "type": "color" + }, + "8": { + "value": "#9cc2e4", + "type": "color" + }, + "9": { + "value": "#0062BA", + "type": "color" + }, + "10": { + "value": "#005099", + "type": "color" + }, + "11": { + "value": "#003d75", + "type": "color" + }, + "12": { + "value": "#69a2d6", + "type": "color" + }, + "13": { + "value": "#cee1f2", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#ddeaf6", + "type": "color" + } + }, + "neutral": { + "1": { + "value": "#131c27", + "type": "color" + }, + "2": { + "value": "#192433", + "type": "color" + }, + "3": { + "value": "#243142", + "type": "color" + }, + "4": { + "value": "#333e4e", + "type": "color" + }, + "5": { + "value": "#424d5b", + "type": "color" + }, + "6": { + "value": "#495361", + "type": "color" + }, + "7": { + "value": "#67707c", + "type": "color" + }, + "8": { + "value": "#bbbfc4", + "type": "color" + }, + "9": { + "value": "#1E2B3C", + "type": "color" + }, + "10": { + "value": "#303c4b", + "type": "color" + }, + "11": { + "value": "#444e5d", + "type": "color" + }, + "12": { + "value": "#989ea5", + "type": "color" + }, + "13": { + "value": "#dddfe1", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#bbbfc4", + "type": "color" + } + }, + "brand1": { + "1": { + "value": "#2f1213", + "type": "color" + }, + "2": { + "value": "#3c1819", + "type": "color" + }, + "3": { + "value": "#522021", + "type": "color" + }, + "4": { + "value": "#68292a", + "type": "color" + }, + "5": { + "value": "#7f3234", + "type": "color" + }, + "6": { + "value": "#8b3639", + "type": "color" + }, + "7": { + "value": "#bc494c", + "type": "color" + }, + "8": { + "value": "#f9a9ab", + "type": "color" + }, + "9": { + "value": "#F45F63", + "type": "color" + }, + "10": { + "value": "#d15155", + "type": "color" + }, + "11": { + "value": "#b04447", + "type": "color" + }, + "12": { + "value": "#f67679", + "type": "color" + }, + "13": { + "value": "#fcd5d6", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000000", + "type": "color" + } + }, + "brand2": { + "1": { + "value": "#231a05", + "type": "color" + }, + "2": { + "value": "#2d2206", + "type": "color" + }, + "3": { + "value": "#3d2e09", + "type": "color" + }, + "4": { + "value": "#4f3b0b", + "type": "color" + }, + "5": { + "value": "#60470d", + "type": "color" + }, + "6": { + "value": "#684e0f", + "type": "color" + }, + "7": { + "value": "#8e6914", + "type": "color" + }, + "8": { + "value": "#e9b742", + "type": "color" + }, + "9": { + "value": "#E5AA20", + "type": "color" + }, + "10": { + "value": "#c9951c", + "type": "color" + }, + "11": { + "value": "#ae8118", + "type": "color" + }, + "12": { + "value": "#c9951c", + "type": "color" + }, + "13": { + "value": "#f5dda7", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#2b2006", + "type": "color" + } + }, + "brand3": { + "1": { + "value": "#061d30", + "type": "color" + }, + "2": { + "value": "#07253c", + "type": "color" + }, + "3": { + "value": "#0a3251", + "type": "color" + }, + "4": { + "value": "#0d4068", + "type": "color" + }, + "5": { + "value": "#0f4e7f", + "type": "color" + }, + "6": { + "value": "#11558a", + "type": "color" + }, + "7": { + "value": "#1773b9", + "type": "color" + }, + "8": { + "value": "#81c5f9", + "type": "color" + }, + "9": { + "value": "#1E98F5", + "type": "color" + }, + "10": { + "value": "#1a83d3", + "type": "color" + }, + "11": { + "value": "#166eb2", + "type": "color" + }, + "12": { + "value": "#38a4f6", + "type": "color" + }, + "13": { + "value": "#c4e4fc", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#010407", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json new file mode 100644 index 0000000000..4e3c7330d5 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json @@ -0,0 +1,376 @@ +{ + "global": { + "blue": { + "1": { + "value": "#fefeff", + "type": "color" + }, + "2": { + "value": "#edf5fa", + "type": "color" + }, + "3": { + "value": "#d3e5f4", + "type": "color" + }, + "4": { + "value": "#b7d5ed", + "type": "color" + }, + "5": { + "value": "#9bc5e5", + "type": "color" + }, + "6": { + "value": "#94c1e3", + "type": "color" + }, + "7": { + "value": "#2f86c9", + "type": "color" + }, + "8": { + "value": "#075089", + "type": "color" + }, + "9": { + "value": "#0c72c1", + "type": "color" + }, + "10": { + "value": "#085ea0", + "type": "color" + }, + "11": { + "value": "#074b80", + "type": "color" + }, + "12": { + "value": "#0966ac", + "type": "color" + }, + "13": { + "value": "#043256", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#f3f8fc", + "type": "color" + } + }, + "green": { + "1": { + "value": "#fcfefc", + "type": "color" + }, + "2": { + "value": "#ecf6ed", + "type": "color" + }, + "3": { + "value": "#cfe9d3", + "type": "color" + }, + "4": { + "value": "#b3dcb8", + "type": "color" + }, + "5": { + "value": "#95ce9d", + "type": "color" + }, + "6": { + "value": "#8bca94", + "type": "color" + }, + "7": { + "value": "#189528", + "type": "color" + }, + "8": { + "value": "#045a10", + "type": "color" + }, + "9": { + "value": "#078d19", + "type": "color" + }, + "10": { + "value": "#067615", + "type": "color" + }, + "11": { + "value": "#056011", + "type": "color" + }, + "12": { + "value": "#067314", + "type": "color" + }, + "13": { + "value": "#03380a", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000401", + "type": "color" + } + }, + "orange": { + "1": { + "value": "#fffefd", + "type": "color" + }, + "2": { + "value": "#fbf1ec", + "type": "color" + }, + "3": { + "value": "#f4ddd0", + "type": "color" + }, + "4": { + "value": "#eecab7", + "type": "color" + }, + "5": { + "value": "#e7b69c", + "type": "color" + }, + "6": { + "value": "#e5b094", + "type": "color" + }, + "7": { + "value": "#cc632b", + "type": "color" + }, + "8": { + "value": "#7e3a15", + "type": "color" + }, + "9": { + "value": "#c95c21", + "type": "color" + }, + "10": { + "value": "#a94d1c", + "type": "color" + }, + "11": { + "value": "#8a3f17", + "type": "color" + }, + "12": { + "value": "#a1491a", + "type": "color" + }, + "13": { + "value": "#50240d", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#0d0602", + "type": "color" + } + }, + "purple": { + "1": { + "value": "#fefefe", + "type": "color" + }, + "2": { + "value": "#f5f2f9", + "type": "color" + }, + "3": { + "value": "#e7dfef", + "type": "color" + }, + "4": { + "value": "#d9cce6", + "type": "color" + }, + "5": { + "value": "#ccbadd", + "type": "color" + }, + "6": { + "value": "#c7b4da", + "type": "color" + }, + "7": { + "value": "#9572b9", + "type": "color" + }, + "8": { + "value": "#663399", + "type": "color" + }, + "9": { + "value": "#663399", + "type": "color" + }, + "10": { + "value": "#4f2777", + "type": "color" + }, + "11": { + "value": "#381b54", + "type": "color" + }, + "12": { + "value": "#7b4ea7", + "type": "color" + }, + "13": { + "value": "#402060", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#eee8f3", + "type": "color" + } + }, + "red": { + "1": { + "value": "#fffefe", + "type": "color" + }, + "2": { + "value": "#fbf1f1", + "type": "color" + }, + "3": { + "value": "#f5dcdc", + "type": "color" + }, + "4": { + "value": "#f0c7c7", + "type": "color" + }, + "5": { + "value": "#eab3b3", + "type": "color" + }, + "6": { + "value": "#e8acac", + "type": "color" + }, + "7": { + "value": "#d25b5b", + "type": "color" + }, + "8": { + "value": "#9a1616", + "type": "color" + }, + "9": { + "value": "#bf1b1b", + "type": "color" + }, + "10": { + "value": "#9a1616", + "type": "color" + }, + "11": { + "value": "#771111", + "type": "color" + }, + "12": { + "value": "#c22020", + "type": "color" + }, + "13": { + "value": "#620e0e", + "type": "color" + }, + "contrast-1": { + "value": "#fffefe", + "type": "color" + }, + "contrast-2": { + "value": "#f6dfdf", + "type": "color" + } + }, + "yellow": { + "1": { + "value": "#fffefc", + "type": "color" + }, + "2": { + "value": "#fbf2d3", + "type": "color" + }, + "3": { + "value": "#f5e19b", + "type": "color" + }, + "4": { + "value": "#efcf5d", + "type": "color" + }, + "5": { + "value": "#e6bc27", + "type": "color" + }, + "6": { + "value": "#e0b726", + "type": "color" + }, + "7": { + "value": "#9a7e1a", + "type": "color" + }, + "8": { + "value": "#5d4c10", + "type": "color" + }, + "9": { + "value": "#eabf28", + "type": "color" + }, + "10": { + "value": "#d0aa24", + "type": "color" + }, + "11": { + "value": "#b7951f", + "type": "color" + }, + "12": { + "value": "#776114", + "type": "color" + }, + "13": { + "value": "#3a300a", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#382d0a", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json new file mode 100644 index 0000000000..ba2b9b9190 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json @@ -0,0 +1,314 @@ +{ + "": { + "accent": { + "1": { + "value": "#fefeff", + "type": "color" + }, + "2": { + "value": "#eef4fa", + "type": "color" + }, + "3": { + "value": "#d4e5f3", + "type": "color" + }, + "4": { + "value": "#bad5ec", + "type": "color" + }, + "5": { + "value": "#a1c5e5", + "type": "color" + }, + "6": { + "value": "#97bfe3", + "type": "color" + }, + "7": { + "value": "#3a85ca", + "type": "color" + }, + "8": { + "value": "#004d93", + "type": "color" + }, + "9": { + "value": "#0062BA", + "type": "color" + }, + "10": { + "value": "#005099", + "type": "color" + }, + "11": { + "value": "#003d75", + "type": "color" + }, + "12": { + "value": "#0163ba", + "type": "color" + }, + "13": { + "value": "#00315c", + "type": "color" + }, + "contrast-1": { + "value": "#fefeff", + "type": "color" + }, + "contrast-2": { + "value": "#ddeaf6", + "type": "color" + } + }, + "neutral": { + "1": { + "value": "#fefefe", + "type": "color" + }, + "2": { + "value": "#f3f4f5", + "type": "color" + }, + "3": { + "value": "#e1e3e5", + "type": "color" + }, + "4": { + "value": "#ced1d4", + "type": "color" + }, + "5": { + "value": "#bdc1c6", + "type": "color" + }, + "6": { + "value": "#b8bcc1", + "type": "color" + }, + "7": { + "value": "#7a818c", + "type": "color" + }, + "8": { + "value": "#444e5d", + "type": "color" + }, + "9": { + "value": "#1E2B3C", + "type": "color" + }, + "10": { + "value": "#303c4b", + "type": "color" + }, + "11": { + "value": "#444e5d", + "type": "color" + }, + "12": { + "value": "#5b6471", + "type": "color" + }, + "13": { + "value": "#243142", + "type": "color" + }, + "contrast-1": { + "value": "#fefefe", + "type": "color" + }, + "contrast-2": { + "value": "#bbbfc4", + "type": "color" + } + }, + "brand1": { + "1": { + "value": "#fffefe", + "type": "color" + }, + "2": { + "value": "#fef0f1", + "type": "color" + }, + "3": { + "value": "#fcdadb", + "type": "color" + }, + "4": { + "value": "#fbc4c5", + "type": "color" + }, + "5": { + "value": "#f9adaf", + "type": "color" + }, + "6": { + "value": "#f9a5a7", + "type": "color" + }, + "7": { + "value": "#d95558", + "type": "color" + }, + "8": { + "value": "#843336", + "type": "color" + }, + "9": { + "value": "#F45F63", + "type": "color" + }, + "10": { + "value": "#d15155", + "type": "color" + }, + "11": { + "value": "#b04447", + "type": "color" + }, + "12": { + "value": "#a84144", + "type": "color" + }, + "13": { + "value": "#522021", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#000000", + "type": "color" + } + }, + "brand2": { + "1": { + "value": "#fffefc", + "type": "color" + }, + "2": { + "value": "#fbf3e0", + "type": "color" + }, + "3": { + "value": "#f5dfac", + "type": "color" + }, + "4": { + "value": "#f0ce7e", + "type": "color" + }, + "5": { + "value": "#eaba4a", + "type": "color" + }, + "6": { + "value": "#e8b338", + "type": "color" + }, + "7": { + "value": "#a57a17", + "type": "color" + }, + "8": { + "value": "#634a0e", + "type": "color" + }, + "9": { + "value": "#E5AA20", + "type": "color" + }, + "10": { + "value": "#c9951c", + "type": "color" + }, + "11": { + "value": "#ae8118", + "type": "color" + }, + "12": { + "value": "#7e5d12", + "type": "color" + }, + "13": { + "value": "#3d2e09", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#2b2006", + "type": "color" + } + }, + "brand3": { + "1": { + "value": "#fdfeff", + "type": "color" + }, + "2": { + "value": "#eaf6fe", + "type": "color" + }, + "3": { + "value": "#c8e6fd", + "type": "color" + }, + "4": { + "value": "#a9d7fb", + "type": "color" + }, + "5": { + "value": "#84c7fa", + "type": "color" + }, + "6": { + "value": "#7ac2f9", + "type": "color" + }, + "7": { + "value": "#1a85d6", + "type": "color" + }, + "8": { + "value": "#105082", + "type": "color" + }, + "9": { + "value": "#1E98F5", + "type": "color" + }, + "10": { + "value": "#1a83d3", + "type": "color" + }, + "11": { + "value": "#166eb2", + "type": "color" + }, + "12": { + "value": "#1466a5", + "type": "color" + }, + "13": { + "value": "#0a3251", + "type": "color" + }, + "contrast-1": { + "value": "#000000", + "type": "color" + }, + "contrast-2": { + "value": "#010407", + "type": "color" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json new file mode 100644 index 0000000000..ba9a158aa2 --- /dev/null +++ b/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json @@ -0,0 +1,314 @@ +{ + "color": { + "accent": { + "1": { + "type": "color", + "value": "{.accent.1}" + }, + "2": { + "type": "color", + "value": "{.accent.2}" + }, + "3": { + "type": "color", + "value": "{.accent.3}" + }, + "4": { + "type": "color", + "value": "{.accent.4}" + }, + "5": { + "type": "color", + "value": "{.accent.5}" + }, + "6": { + "type": "color", + "value": "{.accent.6}" + }, + "7": { + "type": "color", + "value": "{.accent.7}" + }, + "8": { + "type": "color", + "value": "{.accent.8}" + }, + "9": { + "type": "color", + "value": "{.accent.9}" + }, + "10": { + "type": "color", + "value": "{.accent.10}" + }, + "11": { + "type": "color", + "value": "{.accent.11}" + }, + "12": { + "type": "color", + "value": "{.accent.12}" + }, + "13": { + "type": "color", + "value": "{.accent.13}" + }, + "contrast-1": { + "type": "color", + "value": "{.accent.contrast-1}" + }, + "contrast-2": { + "type": "color", + "value": "{.accent.contrast-2}" + } + }, + "neutral": { + "1": { + "type": "color", + "value": "{.neutral.1}" + }, + "2": { + "type": "color", + "value": "{.neutral.2}" + }, + "3": { + "type": "color", + "value": "{.neutral.3}" + }, + "4": { + "type": "color", + "value": "{.neutral.4}" + }, + "5": { + "type": "color", + "value": "{.neutral.5}" + }, + "6": { + "type": "color", + "value": "{.neutral.6}" + }, + "7": { + "type": "color", + "value": "{.neutral.7}" + }, + "8": { + "type": "color", + "value": "{.neutral.8}" + }, + "9": { + "type": "color", + "value": "{.neutral.9}" + }, + "10": { + "type": "color", + "value": "{.neutral.10}" + }, + "11": { + "type": "color", + "value": "{.neutral.11}" + }, + "12": { + "type": "color", + "value": "{.neutral.12}" + }, + "13": { + "type": "color", + "value": "{.neutral.13}" + }, + "contrast-1": { + "type": "color", + "value": "{.neutral.contrast-1}" + }, + "contrast-2": { + "type": "color", + "value": "{.neutral.contrast-2}" + } + }, + "brand1": { + "1": { + "type": "color", + "value": "{.brand1.1}" + }, + "2": { + "type": "color", + "value": "{.brand1.2}" + }, + "3": { + "type": "color", + "value": "{.brand1.3}" + }, + "4": { + "type": "color", + "value": "{.brand1.4}" + }, + "5": { + "type": "color", + "value": "{.brand1.5}" + }, + "6": { + "type": "color", + "value": "{.brand1.6}" + }, + "7": { + "type": "color", + "value": "{.brand1.7}" + }, + "8": { + "type": "color", + "value": "{.brand1.8}" + }, + "9": { + "type": "color", + "value": "{.brand1.9}" + }, + "10": { + "type": "color", + "value": "{.brand1.10}" + }, + "11": { + "type": "color", + "value": "{.brand1.11}" + }, + "12": { + "type": "color", + "value": "{.brand1.12}" + }, + "13": { + "type": "color", + "value": "{.brand1.13}" + }, + "contrast-1": { + "type": "color", + "value": "{.brand1.contrast-1}" + }, + "contrast-2": { + "type": "color", + "value": "{.brand1.contrast-2}" + } + }, + "brand2": { + "1": { + "type": "color", + "value": "{.brand2.1}" + }, + "2": { + "type": "color", + "value": "{.brand2.2}" + }, + "3": { + "type": "color", + "value": "{.brand2.3}" + }, + "4": { + "type": "color", + "value": "{.brand2.4}" + }, + "5": { + "type": "color", + "value": "{.brand2.5}" + }, + "6": { + "type": "color", + "value": "{.brand2.6}" + }, + "7": { + "type": "color", + "value": "{.brand2.7}" + }, + "8": { + "type": "color", + "value": "{.brand2.8}" + }, + "9": { + "type": "color", + "value": "{.brand2.9}" + }, + "10": { + "type": "color", + "value": "{.brand2.10}" + }, + "11": { + "type": "color", + "value": "{.brand2.11}" + }, + "12": { + "type": "color", + "value": "{.brand2.12}" + }, + "13": { + "type": "color", + "value": "{.brand2.13}" + }, + "contrast-1": { + "type": "color", + "value": "{.brand2.contrast-1}" + }, + "contrast-2": { + "type": "color", + "value": "{.brand2.contrast-2}" + } + }, + "brand3": { + "1": { + "type": "color", + "value": "{.brand3.1}" + }, + "2": { + "type": "color", + "value": "{.brand3.2}" + }, + "3": { + "type": "color", + "value": "{.brand3.3}" + }, + "4": { + "type": "color", + "value": "{.brand3.4}" + }, + "5": { + "type": "color", + "value": "{.brand3.5}" + }, + "6": { + "type": "color", + "value": "{.brand3.6}" + }, + "7": { + "type": "color", + "value": "{.brand3.7}" + }, + "8": { + "type": "color", + "value": "{.brand3.8}" + }, + "9": { + "type": "color", + "value": "{.brand3.9}" + }, + "10": { + "type": "color", + "value": "{.brand3.10}" + }, + "11": { + "type": "color", + "value": "{.brand3.11}" + }, + "12": { + "type": "color", + "value": "{.brand3.12}" + }, + "13": { + "type": "color", + "value": "{.brand3.13}" + }, + "contrast-1": { + "type": "color", + "value": "{.brand3.contrast-1}" + }, + "contrast-2": { + "type": "color", + "value": "{.brand3.contrast-2}" + } + } + } +} diff --git a/packages/create-tokens/template/template-files/package.json b/packages/create-tokens/template/template-files/package.json new file mode 100644 index 0000000000..3896e6fbc3 --- /dev/null +++ b/packages/create-tokens/template/template-files/package.json @@ -0,0 +1,23 @@ +{ + "name": "package-name-here", + "version": "1.0.0", + "description": "CSS variables for @digdir/designsystemet", + "type": "module", + "main": "dist/", + "files": [ + "dist" + ], + "exports": { + "./*": "./dist/*" + }, + "scripts": { + "build": "npm run clean && designsystemet tokens -o ./dist", + "clean": "rimraf dist" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "@digdir/designsystemet": "^0.1.0-alpha.7", + "rimraf": "^5.0.7" + } +} diff --git a/packages/create-tokens/tsconfig.json b/packages/create-tokens/tsconfig.json new file mode 100644 index 0000000000..04f45c2126 --- /dev/null +++ b/packages/create-tokens/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": false + }, + "rootDir": "./src", + "include": ["src", "template"] +} diff --git a/yarn.lock b/yarn.lock index f7aa674981..34bf9f9adb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2198,6 +2198,23 @@ __metadata: languageName: node linkType: hard +"@digdir/create-tokens@workspace:packages/create-tokens": + version: 0.0.0-use.local + resolution: "@digdir/create-tokens@workspace:packages/create-tokens" + dependencies: + "@commander-js/extra-typings": "npm:^12.0.1" + "@tokens-studio/types": "npm:^0.4.0" + "@types/prompts": "npm:^2.4.9" + change-case: "npm:^5.3.0" + commander: "npm:^12.0.0" + kleur: "npm:^3.0.3" + prompts: "npm:^2.4.0" + tsx: "npm:^4.11.2" + bin: + create-tokens: index.js + languageName: unknown + linkType: soft + "@digdir/design-system-react@workspace:packages/react-old": version: 0.0.0-use.local resolution: "@digdir/design-system-react@workspace:packages/react-old" @@ -6812,6 +6829,16 @@ __metadata: languageName: node linkType: hard +"@types/prompts@npm:^2.4.9": + version: 2.4.9 + resolution: "@types/prompts@npm:2.4.9" + dependencies: + "@types/node": "npm:*" + kleur: "npm:^3.0.3" + checksum: 10/69b8372f4c790b45fea16a46ff8d1bcc71b14579481776b67bd6263637118a7ecb1f12e1311506c29fadc81bf618dc64f1a91f903cfd5be67a0455a227b3e462 + languageName: node + linkType: hard + "@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5"