From 75d1fb4d0d78b6616361ad6385808c76797d711e Mon Sep 17 00:00:00 2001 From: MH4GF Date: Tue, 15 Oct 2024 15:40:40 +0900 Subject: [PATCH 1/2] maintenance: implement `@packages/figma-to-css-variables` --- .../figma-to-css-variables/.gitignore | 1 + .../packages/figma-to-css-variables/README.md | 32 +++ .../bin/fetchFigmaLocalVariables.mjs | 36 +++ .../figma-to-css-variables/bin/index.mjs | 55 ++++ .../bin/runStyleDictionary.mjs | 109 ++++++++ .../transformVariablesForStyleDictionary.mjs | 126 +++++++++ .../figma-to-css-variables/biome.jsonc | 3 + .../figma-to-css-variables/package.json | 18 ++ frontend/pnpm-lock.yaml | 248 ++++++++++++++++++ 9 files changed, 628 insertions(+) create mode 100644 frontend/packages/figma-to-css-variables/.gitignore create mode 100644 frontend/packages/figma-to-css-variables/README.md create mode 100644 frontend/packages/figma-to-css-variables/bin/fetchFigmaLocalVariables.mjs create mode 100644 frontend/packages/figma-to-css-variables/bin/index.mjs create mode 100644 frontend/packages/figma-to-css-variables/bin/runStyleDictionary.mjs create mode 100644 frontend/packages/figma-to-css-variables/bin/transformVariablesForStyleDictionary.mjs create mode 100644 frontend/packages/figma-to-css-variables/biome.jsonc create mode 100644 frontend/packages/figma-to-css-variables/package.json diff --git a/frontend/packages/figma-to-css-variables/.gitignore b/frontend/packages/figma-to-css-variables/.gitignore new file mode 100644 index 000000000..a9a5aecf4 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/.gitignore @@ -0,0 +1 @@ +tmp diff --git a/frontend/packages/figma-to-css-variables/README.md b/frontend/packages/figma-to-css-variables/README.md new file mode 100644 index 000000000..a9ce6f799 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/README.md @@ -0,0 +1,32 @@ +# Figma to CSS Variables + +## Overview + +This script is designed to handle various tasks related to Figma local variables and Style Dictionary. It can fetch Figma local variables, transform them for Style Dictionary, and run Style Dictionary with specified options. + +## Environment Variables + +The script requires the following environment variables: + +- `FIGMA_FILE_KEY`: The key of the Figma file. +- `FIGMA_ACCESS_TOKEN`: The token to access the Figma API. + +## Command Line Arguments + +The script accepts the following command line arguments: + +- `--fetch`: Fetches Figma local variables. +- `--transform`: Transforms variables for Style Dictionary. +- `--generate`: Runs Style Dictionary with the specified output path. +- `--output `: Specifies the output path for the generated files. Defaults to 'build/css'. +- `--filter-modes `: Specifies filter modes for Style Dictionary as a comma-separated list. + +If no specific argument is provided, the script defaults to running all steps in sequence. + +## Usage + +To run the script, use the following command: + +```sh +FIGMA_FILE_KEY=FnK... FIGMA_ACCESS_TOKEN=figd_xxx pnpm --filter @packages/figma-to-css-variables gen --output '../../apps/service-site/src/styles' --filter-modes 'Dark,Mode 1' +``` diff --git a/frontend/packages/figma-to-css-variables/bin/fetchFigmaLocalVariables.mjs b/frontend/packages/figma-to-css-variables/bin/fetchFigmaLocalVariables.mjs new file mode 100644 index 000000000..7bf23ca6e --- /dev/null +++ b/frontend/packages/figma-to-css-variables/bin/fetchFigmaLocalVariables.mjs @@ -0,0 +1,36 @@ +import { promises as fs } from 'node:fs' +import { mkdir } from 'node:fs/promises' + +/** + * Fetches local variables from the Figma API and saves them to a temporary file. + * @returns {Promise} + */ +export async function fetchFigmaLocalVariables() { + const FIGMA_FILE_KEY = process.env.FIGMA_FILE_KEY + const FIGMA_ACCESS_TOKEN = process.env.FIGMA_ACCESS_TOKEN + + if (!FIGMA_FILE_KEY || !FIGMA_ACCESS_TOKEN) { + throw new Error( + 'FIGMA_FILE_KEY and FIGMA_ACCESS_TOKEN environment variables are required.', + ) + } + + const url = `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/variables/local` + const headers = { + 'X-Figma-Token': FIGMA_ACCESS_TOKEN, + } + + const response = await fetch(url, { headers }) + if (!response.ok) { + throw new Error(`Failed to fetch variables: ${response.statusText}`) + } + + const data = await response.json() + + await mkdir('tmp', { recursive: true }) + await fs.writeFile( + 'tmp/local-variables.json', + JSON.stringify(data.meta, null, 2), + ) + console.info('Local variables fetched and saved to tmp/local-variables.json') +} diff --git a/frontend/packages/figma-to-css-variables/bin/index.mjs b/frontend/packages/figma-to-css-variables/bin/index.mjs new file mode 100644 index 000000000..4d7105ed5 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/bin/index.mjs @@ -0,0 +1,55 @@ +import { fetchFigmaLocalVariables } from './fetchFigmaLocalVariables.mjs' +import { runStyleDictionary } from './runStyleDictionary.mjs' +import { transformVariablesForStyleDictionary } from './transformVariablesForStyleDictionary.mjs' + +/** + * Main function to handle command line arguments and execute corresponding tasks. + * + * Command line arguments: + * - `--fetch`: Fetches Figma local variables. + * - `--transform`: Transforms variables for Style Dictionary. + * - `--generate`: Runs Style Dictionary with the specified output path. + * - `--output `: Specifies the output path for the generated files. Defaults to 'build/css'. + * - `--filter-modes `: Specifies filter modes for Style Dictionary as a comma-separated list. + * + * If no specific argument is provided, it defaults to running all steps in sequence. + * + * @returns {Promise} A promise that resolves when all tasks are completed. + */ +async function main() { + const args = process.argv.slice(2) + + let outputPath = null + const filterModes = [] + + if (args.includes('--output')) { + const outputIndex = args.indexOf('--output') + if (outputIndex !== -1 && args[outputIndex + 1]) { + outputPath = args[outputIndex + 1] + } + } + + if (args.includes('--filter-modes')) { + const filterModesIndex = args.indexOf('--filter-modes') + if (filterModesIndex !== -1 && args[filterModesIndex + 1]) { + filterModes.push(...args[filterModesIndex + 1].split(',')) + } + } + + if (args.includes('--fetch')) { + await fetchFigmaLocalVariables() + } else if (args.includes('--transform')) { + await transformVariablesForStyleDictionary() + } else if (args.includes('--generate')) { + await runStyleDictionary(outputPath, filterModes) + } else { + // Default to running all steps + await fetchFigmaLocalVariables() + await transformVariablesForStyleDictionary() + await runStyleDictionary(outputPath, filterModes) + } +} + +main().catch((err) => { + console.error('Error:', err) +}) diff --git a/frontend/packages/figma-to-css-variables/bin/runStyleDictionary.mjs b/frontend/packages/figma-to-css-variables/bin/runStyleDictionary.mjs new file mode 100644 index 000000000..1b0ab2832 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/bin/runStyleDictionary.mjs @@ -0,0 +1,109 @@ +import fs from 'node:fs' +import path from 'node:path' +import StyleDictionary from 'style-dictionary' + +function isNumber(token) { + const targets = [ + 'size', + 'border-radius', + 'border-width', + 'spacing', + 'font-size', + 'line-height', + 'sizing', + ] + + return ( + targets.includes(token.attributes?.category ?? '') || + targets.includes(token.attributes?.type ?? '') + ) +} + +StyleDictionary.registerTransform({ + type: 'value', + transitive: true, + name: 'number/px', + filter: isNumber, + transform: (token) => { + const val = Number.parseFloat(token.value) + if (Number.isNaN(val)) + throw `Invalid Number: '${token.name}: ${token.value}' is not a valid number, cannot transform to 'px' \n` + return `${val}px` + }, +}) + +function source(input) { + return [`${input}/**/*.json`] +} + +/** + * Runs the Style Dictionary build process for each sub-directory found in the input directory. + * + * @param {string[]} filterDirNames - An array of directory names to filter and process. + * @param {string} [outputPath='build/css'] - The output path where the CSS files will be generated. + * @returns {Promise} - A promise that resolves when the build process is complete. + */ +export async function runStyleDictionary( + outputPath = 'build/css', + filterDirNames = [], +) { + try { + const inputDir = path.resolve('tmp/transformed-variables') + const subDirs = fs + .readdirSync(inputDir, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory()) + .filter( + (dirent) => + filterDirNames.length === 0 || filterDirNames.includes(dirent.name), + ) + .map((dirent) => dirent.name) + + for (const subDir of subDirs) { + const subDirInput = path.join(inputDir, subDir) + const subDirOutput = `${path.join(outputPath, subDir)}/` + + const config = { + source: [source(subDirInput)], + platforms: { + css: { + transformGroup: 'css', + buildPath: subDirOutput, + files: [ + { + destination: 'variables.css', + format: 'css/variables', + }, + ], + /** + * Resetting the configuration to display size-related numbers in px. + * The default settings are as follows: + * @see: https://styledictionary.com/reference/hooks/transform-groups/predefined/ + */ + transforms: [ + 'attribute/cti', + 'name/kebab', + 'time/seconds', + 'html/icon', + 'color/css', + 'number/px', + ], + }, + }, + log: { + warnings: 'warn', // 'warn' | 'error' | 'disabled' + verbosity: 'verbose', // 'default' | 'silent' | 'verbose' + errors: { + brokenReferences: 'console', // 'throw' | 'console' + }, + }, + } + + const styleDictionary = new StyleDictionary(config) + await styleDictionary.buildAllPlatforms() + } + + console.info('Style Dictionary build complete.') + } catch (error) { + console.error(`Error during Style Dictionary generation: ${error.message}`) + } +} diff --git a/frontend/packages/figma-to-css-variables/bin/transformVariablesForStyleDictionary.mjs b/frontend/packages/figma-to-css-variables/bin/transformVariablesForStyleDictionary.mjs new file mode 100644 index 000000000..cf640a722 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/bin/transformVariablesForStyleDictionary.mjs @@ -0,0 +1,126 @@ +import { promises as fs } from 'node:fs' +import { mkdir } from 'node:fs/promises' +import path from 'node:path' + +/** + * Retrieves the token value from the variable based on the mode. + * @param {Object} variable + * @param {string} modeId + * @param {Object[]} localVariables + * @returns {string|number} + */ +function tokenValueFromVariable(variable, modeId, localVariables) { + const value = variable.valuesByMode[modeId] + if (typeof value === 'object') { + if ('type' in value && value.type === 'VARIABLE_ALIAS') { + const aliasedVariable = localVariables[value.id] + // console.log(aliasedVariable, value.id) + return `{${aliasedVariable?.name.replace(/\//g, '.')}}` + } + if ('r' in value) { + return rgbToHex(value) // Assuming rgbToHex is defined elsewhere + } + + throw new Error(`Format of variable value is invalid: ${value}`) + } + + if (typeof value === 'number') { + return Number.isInteger(value) ? value : Math.floor(value * 100) / 100 + } + + return value +} + +function rgbToHex({ r, g, b, a }) { + if (a === undefined) { + a = 1 + } + + const toHex = (value) => { + const hex = Math.round(value * 255).toString(16) + return hex.length === 1 ? `0${hex}` : hex + } + + const hex = [toHex(r), toHex(g), toHex(b)].join('') + return `#${hex}${a !== 1 ? toHex(a) : ''}` +} + +/** + * Infers token type from the variable. + * @param {Object} variable + * @returns {string} + */ +function tokenTypeFromVariable(variable) { + switch (variable.resolvedType) { + case 'BOOLEAN': + return 'boolean' + case 'COLOR': + return 'color' + case 'FLOAT': + return 'number' + case 'STRING': + return 'string' + } +} + +/** + * Transforms Figma local variables into Style Dictionary format. + * @returns {Promise} + */ +export async function transformVariablesForStyleDictionary() { + const localVariablesPath = 'tmp/local-variables.json' + const transformedDir = 'tmp/transformed-variables' + + const data = JSON.parse(await fs.readFile(localVariablesPath, 'utf-8')) + const localVariables = data.variables + const localVariableCollections = data.variableCollections + + await mkdir(transformedDir, { recursive: true }) + + const fileContents = {} + + for (const variable of Object.values(localVariables)) { + if (variable.remote) continue // Skip remote variables + + const collection = localVariableCollections[variable.variableCollectionId] + if (collection) { + for (const mode of collection.modes) { + const fileName = `${mode.name}/${collection.name}.json` + const filePath = path.join(transformedDir, fileName) + + if (!fileContents[filePath]) { + fileContents[filePath] = {} + } + + let obj = fileContents[filePath] + for (const groupName of variable.name.split('/')) { + obj[groupName] = obj[groupName] || {} + obj = obj[groupName] + } + + const token = { + type: tokenTypeFromVariable(variable), + value: tokenValueFromVariable(variable, mode.modeId, localVariables), + description: variable.description || '', + extensions: { + 'com.figma': { + hiddenFromPublishing: variable.hiddenFromPublishing, + scopes: variable.scopes, + codeSyntax: variable.codeSyntax, + }, + }, + } + + Object.assign(obj, token) + } + } + } + + for (const [filePath, content] of Object.entries(fileContents)) { + const dir = path.dirname(filePath) + await mkdir(dir, { recursive: true }) + await fs.writeFile(filePath, JSON.stringify(content, null, 2)) + } + + console.info('Variables transformed and saved to tmp/transformed-variables/') +} diff --git a/frontend/packages/figma-to-css-variables/biome.jsonc b/frontend/packages/figma-to-css-variables/biome.jsonc new file mode 100644 index 000000000..e6843d979 --- /dev/null +++ b/frontend/packages/figma-to-css-variables/biome.jsonc @@ -0,0 +1,3 @@ +{ + "extends": ["../../packages/configs/biome.jsonc"] +} diff --git a/frontend/packages/figma-to-css-variables/package.json b/frontend/packages/figma-to-css-variables/package.json new file mode 100644 index 000000000..ee49d710d --- /dev/null +++ b/frontend/packages/figma-to-css-variables/package.json @@ -0,0 +1,18 @@ +{ + "name": "@packages/figma-to-css-variables", + "main": "bin/index.mjs", + "scripts": { + "gen": "node bin/index.mjs", + "lint": "conc -c auto pnpm:lint:*", + "lint:biome": "biome check .", + "fmt": "conc -c auto pnpm:fmt:*", + "fmt:biome": "biome check --write --unsafe ." + }, + "devDependencies": { + "@biomejs/biome": "1.9.3", + "@packages/configs": "workspace:*" + }, + "dependencies": { + "style-dictionary": "^4.1.3" + } +} diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 5c4375cb8..8dcf90524 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -148,6 +148,19 @@ importers: specifier: ^2.0.5 version: 2.0.5 + packages/figma-to-css-variables: + dependencies: + style-dictionary: + specifier: ^4.1.3 + version: 4.1.3 + devDependencies: + '@biomejs/biome': + specifier: 1.9.3 + version: 1.9.3 + '@packages/configs': + specifier: workspace:* + version: link:../configs + packages/ui: dependencies: '@radix-ui/react-dropdown-menu': @@ -891,6 +904,15 @@ packages: cpu: [x64] os: [win32] + '@bundled-es-modules/deepmerge@4.3.1': + resolution: {integrity: sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==} + + '@bundled-es-modules/glob@10.4.2': + resolution: {integrity: sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==} + + '@bundled-es-modules/memfs@4.9.4': + resolution: {integrity: sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==} + '@contentlayer2/cli@0.5.1': resolution: {integrity: sha512-nwDTAXKBXUg/eORBxXLDA9FoCxaSqhengSb6FjlyBCkrRyJ3IKQhWilld9Ol1xyYfTisI/5iddHa9ZB4kqltNg==} @@ -2323,6 +2345,13 @@ packages: '@xtuc/long@4.2.2': resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} + '@yarnpkg/lockfile@1.1.0': + resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} + + '@zip.js/zip.js@2.7.52': + resolution: {integrity: sha512-+5g7FQswvrCHwYKNMd/KFxZSObctLSsQOgqBSi0LzwHo3li9Eh1w5cF5ndjQw9Zbr3ajVnd2+XyiX85gAetx1Q==} + engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'} + abort-controller@3.0.0: resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==} engines: {node: '>=6.5'} @@ -2527,6 +2556,10 @@ packages: resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} hasBin: true + at-least-node@1.0.0: + resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} + engines: {node: '>= 4.0.0'} + available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -2728,6 +2761,9 @@ packages: change-case@3.1.0: resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==} + change-case@5.4.4: + resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==} + character-entities-html4@2.1.0: resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} @@ -2755,6 +2791,10 @@ packages: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} + ci-info@3.9.0: + resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} + engines: {node: '>=8'} + cipher-base@1.0.4: resolution: {integrity: sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==} @@ -2862,6 +2902,10 @@ packages: commondir@1.0.1: resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} + component-emitter@2.0.0: + resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==} + engines: {node: '>=18'} + concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} @@ -3543,6 +3587,9 @@ packages: resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + find-yarn-workspace-root@2.0.0: + resolution: {integrity: sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==} + flat-cache@3.2.0: resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} engines: {node: ^10.12.0 || >=12.0.0} @@ -3584,6 +3631,10 @@ packages: resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} engines: {node: '>=14.14'} + fs-extra@9.1.0: + resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} + engines: {node: '>=10'} + fs-monkey@1.0.6: resolution: {integrity: sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==} @@ -3663,6 +3714,10 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + glob@10.4.5: + resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} + hasBin: true + glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported @@ -3911,6 +3966,9 @@ packages: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. + inherits@2.0.3: + resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==} + inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -4165,6 +4223,9 @@ packages: resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} engines: {node: '>=14'} + jackspeak@3.4.3: + resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + jest-worker@27.5.1: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} @@ -4218,6 +4279,10 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json-stable-stringify@1.1.1: + resolution: {integrity: sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==} + engines: {node: '>= 0.4'} + json5@1.0.2: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true @@ -4233,6 +4298,9 @@ packages: jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} + jsonify@0.0.1: + resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==} + jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -4244,6 +4312,9 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} + klaw-sync@6.0.0: + resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==} + kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} engines: {node: '>=6'} @@ -4793,6 +4864,10 @@ packages: resolution: {integrity: sha512-X0nmbb8xUUi637JXzCxY/K4AtO/I0fB5b7iiGaHJHu8IXBWV8TnQ4xqa0Igb/NoAg3OP2uXNhSeiTsErETOA/g==} engines: {node: '>= 14.17.0'} + open@7.4.2: + resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==} + engines: {node: '>=8'} + open@8.4.2: resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} engines: {node: '>=12'} @@ -4864,6 +4939,9 @@ packages: resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==} engines: {node: '>= 14'} + package-json-from-dist@1.0.1: + resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + pako@1.0.11: resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} @@ -4904,6 +4982,11 @@ packages: pascal-case@3.1.2: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} + patch-package@8.0.0: + resolution: {integrity: sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==} + engines: {node: '>=14', npm: '>5'} + hasBin: true + path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} @@ -4944,6 +5027,12 @@ packages: resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==} engines: {node: '>=12'} + path-unified@0.1.0: + resolution: {integrity: sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==} + + path@0.12.7: + resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==} + pathval@2.0.0: resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==} engines: {node: '>= 14.16'} @@ -5360,6 +5449,11 @@ packages: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + rimraf@2.7.1: + resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==} + deprecated: Rimraf versions prior to v4 are no longer supported + hasBin: true + rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} deprecated: Rimraf versions prior to v4 are no longer supported @@ -5509,6 +5603,10 @@ packages: sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + slash@2.0.0: + resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==} + engines: {node: '>=6'} + slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -5581,6 +5679,9 @@ packages: stream-http@3.2.0: resolution: {integrity: sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==} + stream@0.0.3: + resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==} + streamsearch@1.1.0: resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} engines: {node: '>=10.0.0'} @@ -5667,6 +5768,11 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-dictionary@4.1.3: + resolution: {integrity: sha512-KJTkMaFbwSdSsDm6m5M6ki7oQo9vMKV37Vyj0cFpkYw6ucqQKORRQNZT0KXUubxNTtbjv2tmy9wvDSayxS0Zzg==} + engines: {node: '>=18.0.0'} + hasBin: true + style-loader@3.3.4: resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==} engines: {node: '>= 12.13.0'} @@ -6080,6 +6186,9 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + util@0.10.4: + resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==} + util@0.12.5: resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} @@ -7166,6 +7275,31 @@ snapshots: '@biomejs/cli-win32-x64@1.9.3': optional: true + '@bundled-es-modules/deepmerge@4.3.1': + dependencies: + deepmerge: 4.3.1 + + '@bundled-es-modules/glob@10.4.2': + dependencies: + buffer: 6.0.3 + events: 3.3.0 + glob: 10.4.5 + patch-package: 8.0.0 + path: 0.12.7 + stream: 0.0.3 + string_decoder: 1.3.0 + url: 0.11.4 + + '@bundled-es-modules/memfs@4.9.4': + dependencies: + assert: 2.1.0 + buffer: 6.0.3 + events: 3.3.0 + memfs: 4.13.0 + path: 0.12.7 + stream: 0.0.3 + util: 0.12.5 + '@contentlayer2/cli@0.5.1(esbuild@0.18.20)': dependencies: '@contentlayer2/core': 0.5.1(esbuild@0.18.20) @@ -8815,6 +8949,10 @@ snapshots: '@xtuc/long@4.2.2': {} + '@yarnpkg/lockfile@1.1.0': {} + + '@zip.js/zip.js@2.7.52': {} + abort-controller@3.0.0: dependencies: event-target-shim: 5.0.1 @@ -9039,6 +9177,8 @@ snapshots: astring@1.9.0: {} + at-least-node@1.0.0: {} + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -9305,6 +9445,8 @@ snapshots: upper-case: 1.1.3 upper-case-first: 1.1.2 + change-case@5.4.4: {} + character-entities-html4@2.1.0: {} character-entities-legacy@3.0.0: {} @@ -9331,6 +9473,8 @@ snapshots: chrome-trace-event@1.0.4: {} + ci-info@3.9.0: {} + cipher-base@1.0.4: dependencies: inherits: 2.0.4 @@ -9426,6 +9570,8 @@ snapshots: commondir@1.0.1: {} + component-emitter@2.0.0: {} + concat-map@0.0.1: {} concurrently@9.0.1: @@ -10380,6 +10526,10 @@ snapshots: locate-path: 7.2.0 path-exists: 5.0.0 + find-yarn-workspace-root@2.0.0: + dependencies: + micromatch: 4.0.8 + flat-cache@3.2.0: dependencies: flatted: 3.3.1 @@ -10432,6 +10582,13 @@ snapshots: jsonfile: 6.1.0 universalify: 2.0.1 + fs-extra@9.1.0: + dependencies: + at-least-node: 1.0.0 + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.1 + fs-monkey@1.0.6: {} fs.realpath@1.0.0: {} @@ -10511,6 +10668,15 @@ snapshots: minipass: 7.1.2 path-scurry: 1.11.1 + glob@10.4.5: + dependencies: + foreground-child: 3.3.0 + jackspeak: 3.4.3 + minimatch: 9.0.5 + minipass: 7.1.2 + package-json-from-dist: 1.0.1 + path-scurry: 1.11.1 + glob@7.2.3: dependencies: fs.realpath: 1.0.0 @@ -10852,6 +11018,8 @@ snapshots: once: 1.4.0 wrappy: 1.0.2 + inherits@2.0.3: {} + inherits@2.0.4: {} ini@1.3.8: {} @@ -11101,6 +11269,12 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + jackspeak@3.4.3: + dependencies: + '@isaacs/cliui': 8.0.2 + optionalDependencies: + '@pkgjs/parseargs': 0.11.0 + jest-worker@27.5.1: dependencies: '@types/node': 20.16.10 @@ -11140,6 +11314,13 @@ snapshots: json-stable-stringify-without-jsonify@1.0.1: {} + json-stable-stringify@1.1.1: + dependencies: + call-bind: 1.0.7 + isarray: 2.0.5 + jsonify: 0.0.1 + object-keys: 1.1.1 + json5@1.0.2: dependencies: minimist: 1.2.8 @@ -11154,6 +11335,8 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + jsonify@0.0.1: {} + jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.8 @@ -11167,6 +11350,10 @@ snapshots: kind-of@6.0.3: {} + klaw-sync@6.0.0: + dependencies: + graceful-fs: 4.2.11 + kleur@3.0.3: {} language-subtag-registry@0.3.23: {} @@ -12020,6 +12207,11 @@ snapshots: oo-ascii-tree@1.103.1: {} + open@7.4.2: + dependencies: + is-docker: 2.2.1 + is-wsl: 2.2.0 + open@8.4.2: dependencies: define-lazy-prop: 2.0.0 @@ -12124,6 +12316,8 @@ snapshots: degenerator: 5.0.1 netmask: 2.0.2 + package-json-from-dist@1.0.1: {} + pako@1.0.11: {} param-case@2.1.1: @@ -12184,6 +12378,24 @@ snapshots: no-case: 3.0.4 tslib: 2.7.0 + patch-package@8.0.0: + dependencies: + '@yarnpkg/lockfile': 1.1.0 + chalk: 4.1.2 + ci-info: 3.9.0 + cross-spawn: 7.0.3 + find-yarn-workspace-root: 2.0.0 + fs-extra: 9.1.0 + json-stable-stringify: 1.1.1 + klaw-sync: 6.0.0 + minimist: 1.2.8 + open: 7.4.2 + rimraf: 2.7.1 + semver: 7.6.3 + slash: 2.0.0 + tmp: 0.0.33 + yaml: 2.5.1 + path-browserify@1.0.1: {} path-case@2.1.1: @@ -12211,6 +12423,13 @@ snapshots: path-type@5.0.0: {} + path-unified@0.1.0: {} + + path@0.12.7: + dependencies: + process: 0.11.10 + util: 0.10.4 + pathval@2.0.0: {} pbkdf2@3.1.2: @@ -12745,6 +12964,10 @@ snapshots: reusify@1.0.4: {} + rimraf@2.7.1: + dependencies: + glob: 7.2.3 + rimraf@3.0.2: dependencies: glob: 7.2.3 @@ -12941,6 +13164,8 @@ snapshots: sisteransi@1.0.5: {} + slash@2.0.0: {} + slash@3.0.0: {} slash@5.1.0: {} @@ -13011,6 +13236,10 @@ snapshots: readable-stream: 3.6.2 xtend: 4.0.2 + stream@0.0.3: + dependencies: + component-emitter: 2.0.0 + streamsearch@1.1.0: {} string-width@4.2.3: @@ -13116,6 +13345,21 @@ snapshots: strip-json-comments@3.1.1: {} + style-dictionary@4.1.3: + dependencies: + '@bundled-es-modules/deepmerge': 4.3.1 + '@bundled-es-modules/glob': 10.4.2 + '@bundled-es-modules/memfs': 4.9.4 + '@zip.js/zip.js': 2.7.52 + chalk: 5.3.0 + change-case: 5.4.4 + commander: 8.3.0 + is-plain-obj: 4.1.0 + json5: 2.2.3 + patch-package: 8.0.0 + path-unified: 0.1.0 + tinycolor2: 1.6.0 + style-loader@3.3.4(webpack@5.95.0(esbuild@0.18.20)): dependencies: webpack: 5.95.0(esbuild@0.18.20) @@ -13522,6 +13766,10 @@ snapshots: util-deprecate@1.0.2: {} + util@0.10.4: + dependencies: + inherits: 2.0.3 + util@0.12.5: dependencies: inherits: 2.0.4 From 4a996b55b74ce573780d1c8fbc8e0514577b33b5 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Tue, 15 Oct 2024 16:06:11 +0900 Subject: [PATCH 2/2] maintenance: replace css variable files --- .../src/styles/Dark/variables.css | 295 ++++++++++++++++++ .../variables.css} | 44 +-- .../apps/service-site/src/styles/globals.css | 4 +- .../src/styles/variables.tokens-dark.css | 295 ------------------ 4 files changed, 319 insertions(+), 319 deletions(-) create mode 100644 frontend/apps/service-site/src/styles/Dark/variables.css rename frontend/apps/service-site/src/styles/{variables.tokens-typography.css => Mode 1/variables.css} (100%) delete mode 100644 frontend/apps/service-site/src/styles/variables.tokens-dark.css diff --git a/frontend/apps/service-site/src/styles/Dark/variables.css b/frontend/apps/service-site/src/styles/Dark/variables.css new file mode 100644 index 000000000..98afb2513 --- /dev/null +++ b/frontend/apps/service-site/src/styles/Dark/variables.css @@ -0,0 +1,295 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --color-gray-0: #ffffff; + --color-gray-5: #f7f7f7; + --color-gray-10: #f0f0f0; + --color-gray-30: #e7e8ea; + --color-gray-50: #d1d2d3; + --color-gray-100: #bebfc1; + --color-gray-400: #5f6366; + --color-gray-500: #434546; + --color-gray-600: #393b3c; + --color-gray-700: #383a3b; + --color-gray-800: #2e3031; + --color-gray-900: #232526; + --color-gray-1000: #141616; + --color-vermilion-700: #803f30; + --color-vermilion-800: #a6523f; + --color-vermilion-900: #d55235; + --color-vermilion-1000: #c64427; + --color-gold-50: #fff9eb; + --color-gold-300: #ffbf36; + --color-gold-950: #461402; + --color-gold-alpha-10: rgba(240, 181, 55, 0.1); + --color-gold-alpha-20: rgba(240, 181, 55, 0.2); + --color-gold-alpha-40: rgba(240, 181, 55, 0.4); + --color-gold-alpha-50: rgba(240, 181, 55, 0.5); + --color-gold-alpha-100: #ffbf36; + --color-white-alpha-5: rgba(255, 255, 255, 0.05); + --color-white-alpha-10: rgba(255, 255, 255, 0.1); + --color-white-alpha-20: rgba(255, 255, 255, 0.2); + --color-white-alpha-30: rgba(255, 255, 255, 0.3); + --color-white-alpha-40: rgba(255, 255, 255, 0.4); + --color-white-alpha-50: rgba(255, 255, 255, 0.5); + --color-white-alpha-60: rgba(255, 255, 255, 0.6); + --color-white-alpha-70: rgba(255, 255, 255, 0.7); + --color-white-alpha-100: #ffffff; + --color-black-alpha-5: rgba(0, 0, 0, 0.05); + --color-black-alpha-10: rgba(0, 0, 0, 0.1); + --color-black-alpha-20: rgba(0, 0, 0, 0.2); + --color-black-alpha-30: rgba(0, 0, 0, 0.3); + --color-black-alpha-40: rgba(0, 0, 0, 0.4); + --color-black-alpha-50: rgba(0, 0, 0, 0.5); + --color-black-alpha-60: rgba(0, 0, 0, 0.6); + --color-black-alpha-70: rgba(0, 0, 0, 0.7); + --color-black-alpha-100: #000000; + --color-yellow-alpha-10: rgba(255, 215, 72, 0.1); + --color-yellow-alpha-20: rgba(255, 215, 72, 0.2); + --color-yellow-alpha-100: #ffd748; + --color-teal-100: #f9fefe; + --color-teal-200: #f0fbfc; + --color-teal-300: #d7f9fc; + --color-teal-400: #bef4f9; + --color-teal-500: #a5edf3; + --color-teal-600: #87e2eb; + --color-teal-700: #5bd3de; + --color-teal-800: #00bfcf; + --color-teal-900: #00a9b6; + --color-teal-1000: #009ba8; + --color-teal-1100: #00818c; + --color-teal-1200: #003f45; + --color-teal-alpha-20: rgba(0, 169, 182, 0.2); + --color-teal-alpha-40: rgba(0, 169, 182, 0.4); + --color-green-10: #fafefb; + --color-green-50: #eefff5; + --color-green-80: #deffe6; + --color-green-100: #c8ffd7; + --color-green-200: #b4fed7; + --color-green-300: #4af19c; + --color-green-400: #1ded83; + --color-green-500: #36c271; + --color-green-600: #008543; + --color-green-700: #174428; + --color-green-950: #00331b; + --color-green-alpha-10: rgba(29, 237, 131, 0.1); + --color-green-alpha-20: rgba(29, 237, 131, 0.2); + --color-green-alpha-40: rgba(29, 237, 131, 0.4); + --color-green-alpha-100: #1ded83; + --color-purple-alpha-10: rgba(193, 112, 255, 0.1); + --color-purple-alpha-20: rgba(193, 112, 255, 0.2); + --color-purple-alpha-40: rgba(193, 112, 255, 0.4); + --color-purple-alpha-100: #c170ff; + --color-red-50: #fff2f1; + --color-red-300: #ffa5a1; + --color-red-500: #f75049; + --color-red-550: #d55235; + --color-red-600: #c64427; + --color-red-650: #a6523f; + --color-red-700: #803f30; + --color-red-950: #480a07; + --color-red-alpha-10: rgba(247, 80, 73, 0.1); + --color-red-alpha-20: rgba(247, 80, 73, 0.2); + --color-red-alpha-40: rgba(247, 80, 73, 0.4); + --color-red-alpha-100: #f75049; + --color-blue-alpha-10: rgba(20, 188, 255, 0.1); + --color-blue-alpha-20: rgba(20, 188, 255, 0.2); + --color-blue-alpha-100: #14bcff; + --color-blue-alpha-900-accentcolor: #3e63dd; + --color-red-milk-40: rgba(255, 195, 193, 0.4); + --color-red-milk-100: #ffc3c1; + --color-red-milk-200: #ea928e; + --color-green-milk-40: rgba(176, 249, 212, 0.4); + --color-green-milk-100: #b0f9d4; + --color-green-milk-200: #5ec692; + --color-blue-milk-40: rgba(204, 232, 242, 0.4); + --color-blue-milk-100: #cce8f2; + --color-blue-milk-200: #97bdcb; + --color-yellow-milk-40: rgba(231, 221, 179, 0.4); + --color-yellow-milk-100: #e7ddb3; + --color-yellow-milk-200: #c3b476; + --border-radius-none: 0px; + --border-radius-xs: 1px; + --border-radius-sm: 2px; + --border-radius-smbase: 3px; + --border-radius-base: 4px; + --border-radius-md: 6px; + --border-radius-lg: 8px; + --border-radius-lg-plus: 9px; + --border-radius-xl: 12px; + --border-radius-2xl: 16px; + --border-radius-3xl: 20px; + --border-radius-full: 9999px; + --border-width-base: 1px; + --spacing-0: 0px; + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 12px; + --spacing-4: 16px; + --spacing-5: 20px; + --spacing-6: 24px; + --spacing-7: 28px; + --spacing-8: 32px; + --spacing-9: 36px; + --spacing-10: 40px; + --spacing-14: 56px; + --spacing-20: 80px; + --spacing-30: 120px; + --spacing-275: 275px; + --spacing-1half: 6px; + --spacing-half: 2px; + --global-background: #141616; + --global-foreground: #ffffff; + --global-muted-background: #232526; + --global-border: #383a3b; + --global-body-text: #d1d2d3; + --global-mute-text: #bebfc1; + --primary-accent: #1ded83; + --primary-hover: #4af19c; + --primary-color: #1ded83; + --primary-accent-overlay: rgba(29, 237, 131, 0.1); + --primary-on-white-shape: #36c271; + --primary-on-white-text: #008543; + --info-background: #ffffff; + --info-foreground: #003f45; + --error-background: #ffffff; + --error-foreground: #480a07; + --success-background: #ffffff; + --success-foreground: #00331b; + --warning-background: #ffffff; + --warning-foreground: #461402; + --button-border: #434546; + --button-foreground: #000000; + --button-primary-foreground: #000000; + --button-secondary-foreground: #ffffff; + --button-background: #2e3031; + --button-background-hover: #434546; + --button-background-active: #5f6366; + --button-disabled-foreground: #5f6366; + --button-disabled-background: #2e3031; + --button-primary: #1ded83; + --button-primary-background-hover: #4af19c; + --button-danger: #c64427; + --button-danger-foreground: #ffffff; + --button-danger-background-hover: #d55235; + --button-ghost-secondary-background: #00331b; + --button-secondary-background-hover: #ffffff; + --avatar-text: #232526; + --avatar-background: #ffd748; + --pane-border: #383a3b; + --pane-border-hover: #5f6366; + --pane-border-active: #434546; + --pane-muted-background: #2e3031; + --pane-background: #232526; + --pane-background-hover: #383a3b; + --pane-background-active: #2e3031; + --link-default: #bebfc1; + --link-active: #ffffff; + --tooltip-border: #f0f0f0; + --tooltip-foreground: #2e3031; + --tooltip-background: #ffffff; + --toggle-background: #5f6366; + --toggle-background-checked: #1ded83; + --toggle-foreground: #ffffff; + --node-border: #2e3031; + --node-background: #141616; + --node-block: #00a9b6; + --node-page-active: #ffbf36; + --node-layout: #1ded83; + --node-action: #f75049; + --node-page-default: rgba(240, 181, 55, 0.5); + --node-partial: #c170ff; + --danger-default: #c64427; + --danger-hover: #d55235; + --danger-disabled: #803f30; + --collaborator-color-1: #14bcff; + --collaborator-color-2: #f87dbd; + --collaborator-color-3: #ff8570; + --collaborator-color-4: #00caa7; + --collaborator-color-5: #7fc44f; + --collaborator-color-6: #b39aff; + --collaborator-color-7: #d2a800; + --collaborator-color-8: #83acff; + --collaborator-color-9: #fb8d30; + --collaborator-color-you: #ffd748; + --checkbox-background: #f0f0f0; + --checkbox-border: #d1d2d3; + --checkbox-border-hover: #bebfc1; + --checkbox-border-active: #5f6366; + --checkbox-border-disable: #434546; + --checkbox-background-disable: #393b3c; + --checkbox-foreground: #ffffff; + --dropdown-background-hover: #2e3031; + --dropdown-background-active: #232526; + --dropdown-border: #5f6366; + --shadow-basic-shadow: #000000; + --shadow-context-menu-shadow: rgba(0, 0, 0, 0.4); + --overlay-5: rgba(255, 255, 255, 0.05); + --overlay-10: rgba(255, 255, 255, 0.1); + --overlay-20: rgba(255, 255, 255, 0.2); + --overlay-30: rgba(255, 255, 255, 0.3); + --overlay-40: rgba(255, 255, 255, 0.4); + --overlay-50: rgba(255, 255, 255, 0.5); + --overlay-60: rgba(255, 255, 255, 0.6); + --overlay-70: rgba(255, 255, 255, 0.7); + --overlay-100: #ffffff; + --overlay-30-revert: rgba(0, 0, 0, 0.3); + --modal-overlay: rgba(0, 0, 0, 0.2); + --edit: #28507a; + --accent: #3e63dd; + --select-royal-blue: #3e63dd; + --select-indigo: #4d56c9; + --select-blue-violet: #5e52c1; + --select-studio: #7b4cb8; + --select-trendy-pink: #984bac; + --select-mulberry: #c44791; + --select-cabaret: #d84676; + --select-mandy: #d54a5c; + --select-valencia: #d54b48; + --select-flamingo: #e9672b; + --select-saffron: #ffbb38; + --select-golden-dream: #ffe52e; + --select-yellow-green: #bee76b; + --select-fruit-salad: #509956; + --select-ocean-green: #3f957a; + --select-lochinvar: #379889; + --select-boston-blue: #3096bc; + --select-spray: #81dcfa; + --select-riptide: #8ce3cf; + --select-cherokee: #ffdd9c; + --select-kobi: #eca3bb; + --select-light-wisteria: #bda6dc; + --position-pattern-border: #393b3c; + --position-pattern-border-hover: #5f6366; + --position-pattern-background: #232526; + --position-pattern-foreground: #5f6366; + --position-pattern-foreground-hover: #bebfc1; + --callout-callout: #ffffff; + --callout-default-background: rgba(255, 255, 255, 0.05); + --callout-default-border: rgba(255, 255, 255, 0.1); + --callout-default-text: #bebfc1; + --callout-default-link: #ffffff; + --callout-default-underline: rgba(255, 255, 255, 0.4); + --callout-danger-background: rgba(247, 80, 73, 0.1); + --callout-danger-border: rgba(247, 80, 73, 0.2); + --callout-danger-text: #ea928e; + --callout-danger-link: #ffc3c1; + --callout-danger-underline: rgba(255, 195, 193, 0.4); + --callout-success-background: rgba(29, 237, 131, 0.1); + --callout-success-border: rgba(29, 237, 131, 0.2); + --callout-success-text: #5ec692; + --callout-success-link: #b0f9d4; + --callout-success-underline: rgba(176, 249, 212, 0.4); + --callout-info-background: rgba(20, 188, 255, 0.1); + --callout-info-border: rgba(20, 188, 255, 0.2); + --callout-info-text: #97bdcb; + --callout-info-link: #cce8f2; + --callout-info-underline: rgba(204, 232, 242, 0.4); + --callout-warning-background: rgba(255, 215, 72, 0.1); + --callout-warning-border: rgba(255, 215, 72, 0.2); + --callout-warning-text: #c3b476; + --callout-warning-link: #e7ddb3; + --callout-warning-underline: rgba(231, 221, 179, 0.4); +} diff --git a/frontend/apps/service-site/src/styles/variables.tokens-typography.css b/frontend/apps/service-site/src/styles/Mode 1/variables.css similarity index 100% rename from frontend/apps/service-site/src/styles/variables.tokens-typography.css rename to frontend/apps/service-site/src/styles/Mode 1/variables.css index ac37835e8..63f2fa0ce 100644 --- a/frontend/apps/service-site/src/styles/variables.tokens-typography.css +++ b/frontend/apps/service-site/src/styles/Mode 1/variables.css @@ -3,27 +3,27 @@ */ :root { - --main-font-ja: Hiragino Sans; - --message-font: Montserrat; - --main-font: Inter; - --text-weight-ja-bold: W6; - --text-weight-ja-regular: W3; - --text-weight-en-bold: Bold; - --text-weight-en-semibold: SemiBold; - --text-weight-en-medium: Medium; - --text-weight-en-regular: Regular; - --text-weight-en-light: Light; - --font-size-18: 48px; - --font-size-16: 40px; - --font-size-14: 32px; - --font-size-10: 24px; - --font-size-9: 22px; - --font-size-8: 20px; - --font-size-7: 18px; - --font-size-6: 16px; - --font-size-5: 14px; - --font-size-4: 13px; - --font-size-3: 12px; - --font-size-2: 11px; --font-size-1: 10px; + --font-size-2: 11px; + --font-size-3: 12px; + --font-size-4: 13px; + --font-size-5: 14px; + --font-size-6: 16px; + --font-size-7: 18px; + --font-size-8: 20px; + --font-size-9: 22px; + --font-size-10: 24px; + --font-size-14: 32px; + --font-size-16: 40px; + --font-size-18: 48px; + --text-weight-en-light: Light; + --text-weight-en-regular: Regular; + --text-weight-en-medium: Medium; + --text-weight-en-semibold: SemiBold; + --text-weight-en-bold: Bold; + --text-weight-ja-regular: W3; + --text-weight-ja-bold: W6; + --main-font: Inter; + --message-font: Montserrat; + --main-font-ja: Hiragino Sans; } diff --git a/frontend/apps/service-site/src/styles/globals.css b/frontend/apps/service-site/src/styles/globals.css index 077f6dd76..7d249c34d 100644 --- a/frontend/apps/service-site/src/styles/globals.css +++ b/frontend/apps/service-site/src/styles/globals.css @@ -1,7 +1,7 @@ @import 'destyle.css'; @import './variables.css'; -@import './variables.tokens-dark.css'; -@import './variables.tokens-typography.css'; +@import './Dark/variables.css'; +@import './Mode 1/variables.css'; :root { --main-padding: var(--spacing-10, 40px); diff --git a/frontend/apps/service-site/src/styles/variables.tokens-dark.css b/frontend/apps/service-site/src/styles/variables.tokens-dark.css deleted file mode 100644 index 3b8aa738b..000000000 --- a/frontend/apps/service-site/src/styles/variables.tokens-dark.css +++ /dev/null @@ -1,295 +0,0 @@ -/** - * Do not edit directly, this file was auto-generated. - */ - -:root { - --callout-callout: #ffffff; - --select-light-wisteria: #bda6dc; - --select-kobi: #eca3bb; - --select-cherokee: #ffdd9c; - --select-riptide: #8ce3cf; - --select-spray: #81dcfa; - --select-boston-blue: #3096bc; - --select-lochinvar: #379889; - --select-ocean-green: #3f957a; - --select-fruit-salad: #509956; - --select-yellow-green: #bee76b; - --select-golden-dream: #ffe52e; - --select-saffron: #ffbb38; - --select-flamingo: #e9672b; - --select-valencia: #d54b48; - --select-mandy: #d54a5c; - --select-cabaret: #d84676; - --select-mulberry: #c44791; - --select-trendy-pink: #984bac; - --select-studio: #7b4cb8; - --select-blue-violet: #5e52c1; - --select-indigo: #4d56c9; - --select-royal-blue: #3e63dd; - --accent: #3e63dd; - --edit: #28507a; - --shadow-context-menu-shadow: rgba(0, 0, 0, 0.4); - --shadow-basic-shadow: #000000; - --collaborator-color-9: #fb8d30; - --collaborator-color-8: #83acff; - --collaborator-color-7: #d2a800; - --collaborator-color-6: #b39aff; - --collaborator-color-5: #7fc44f; - --collaborator-color-4: #00caa7; - --collaborator-color-3: #ff8570; - --collaborator-color-2: #f87dbd; - --spacing-half: 2px; - --spacing-1half: 6px; - --spacing-275: 275px; - --spacing-30: 120px; - --spacing-20: 80px; - --spacing-14: 56px; - --spacing-10: 40px; - --spacing-9: 36px; - --spacing-8: 32px; - --spacing-7: 28px; - --spacing-6: 24px; - --spacing-5: 20px; - --spacing-4: 16px; - --spacing-3: 12px; - --spacing-2: 8px; - --spacing-1: 4px; - --spacing-0: 0px; - --border-width-base: 1px; - --border-radius-full: 9999px; - --border-radius-3xl: 20px; - --border-radius-2xl: 16px; - --border-radius-xl: 12px; - --border-radius-lg-plus: 9px; - --border-radius-lg: 8px; - --border-radius-md: 6px; - --border-radius-base: 4px; - --border-radius-smbase: 3px; - --border-radius-sm: 2px; - --border-radius-xs: 1px; - --border-radius-none: 0px; - --color-yellow-milk-200: #c3b476; - --color-yellow-milk-100: #e7ddb3; - --color-yellow-milk-40: rgba(231, 221, 179, 0.4); - --color-blue-milk-200: #97bdcb; - --color-blue-milk-100: #cce8f2; - --color-blue-milk-40: rgba(204, 232, 242, 0.4); - --color-green-milk-200: #5ec692; - --color-green-milk-100: #b0f9d4; - --color-green-milk-40: rgba(176, 249, 212, 0.4); - --color-red-milk-200: #ea928e; - --color-red-milk-100: #ffc3c1; - --color-red-milk-40: rgba(255, 195, 193, 0.4); - --color-blue-alpha-900-accentcolor: #3e63dd; - --color-blue-alpha-100: #14bcff; - --color-blue-alpha-20: rgba(20, 188, 255, 0.2); - --color-blue-alpha-10: rgba(20, 188, 255, 0.1); - --color-red-alpha-40: rgba(247, 80, 73, 0.4); - --color-red-alpha-20: rgba(247, 80, 73, 0.2); - --color-red-alpha-10: rgba(247, 80, 73, 0.1); - --color-red-950: #480a07; - --color-red-700: #803f30; - --color-red-650: #a6523f; - --color-red-600: #c64427; - --color-red-550: #d55235; - --color-red-500: #f75049; - --color-red-300: #ffa5a1; - --color-red-50: #fff2f1; - --color-purple-alpha-100: #c170ff; - --color-purple-alpha-40: rgba(193, 112, 255, 0.4); - --color-purple-alpha-20: rgba(193, 112, 255, 0.2); - --color-purple-alpha-10: rgba(193, 112, 255, 0.1); - --color-green-alpha-40: rgba(29, 237, 131, 0.4); - --color-green-alpha-20: rgba(29, 237, 131, 0.2); - --color-green-alpha-10: rgba(29, 237, 131, 0.1); - --color-green-950: #00331b; - --color-green-700: #174428; - --color-green-600: #008543; - --color-green-500: #36c271; - --color-green-400: #1ded83; - --color-green-300: #4af19c; - --color-green-200: #b4fed7; - --color-green-100: #c8ffd7; - --color-green-80: #deffe6; - --color-green-50: #eefff5; - --color-green-10: #fafefb; - --color-teal-alpha-40: rgba(0, 169, 182, 0.4); - --color-teal-alpha-20: rgba(0, 169, 182, 0.2); - --color-teal-1200: #003f45; - --color-teal-1100: #00818c; - --color-teal-1000: #009ba8; - --color-teal-900: #00a9b6; - --color-teal-800: #00bfcf; - --color-teal-700: #5bd3de; - --color-teal-600: #87e2eb; - --color-teal-500: #a5edf3; - --color-teal-400: #bef4f9; - --color-teal-300: #d7f9fc; - --color-teal-200: #f0fbfc; - --color-teal-100: #f9fefe; - --color-yellow-alpha-100: #ffd748; - --color-yellow-alpha-20: rgba(255, 215, 72, 0.2); - --color-yellow-alpha-10: rgba(255, 215, 72, 0.1); - --color-black-alpha-100: #000000; - --color-black-alpha-70: rgba(0, 0, 0, 0.7); - --color-black-alpha-60: rgba(0, 0, 0, 0.6); - --color-black-alpha-50: rgba(0, 0, 0, 0.5); - --color-black-alpha-40: rgba(0, 0, 0, 0.4); - --color-black-alpha-30: rgba(0, 0, 0, 0.3); - --color-black-alpha-20: rgba(0, 0, 0, 0.2); - --color-black-alpha-10: rgba(0, 0, 0, 0.1); - --color-black-alpha-5: rgba(0, 0, 0, 0.05); - --color-white-alpha-100: #ffffff; - --color-white-alpha-70: rgba(255, 255, 255, 0.7); - --color-white-alpha-60: rgba(255, 255, 255, 0.6); - --color-white-alpha-50: rgba(255, 255, 255, 0.5); - --color-white-alpha-40: rgba(255, 255, 255, 0.4); - --color-white-alpha-30: rgba(255, 255, 255, 0.3); - --color-white-alpha-20: rgba(255, 255, 255, 0.2); - --color-white-alpha-10: rgba(255, 255, 255, 0.1); - --color-white-alpha-5: rgba(255, 255, 255, 0.05); - --color-gold-alpha-50: rgba(240, 181, 55, 0.5); - --color-gold-alpha-40: rgba(240, 181, 55, 0.4); - --color-gold-alpha-20: rgba(240, 181, 55, 0.2); - --color-gold-alpha-10: rgba(240, 181, 55, 0.1); - --color-gold-950: #461402; - --color-gold-300: #ffbf36; - --color-gold-50: #fff9eb; - --color-vermilion-1000: #c64427; - --color-vermilion-900: #d55235; - --color-vermilion-800: #a6523f; - --color-vermilion-700: #803f30; - --color-gray-1000: #141616; - --color-gray-900: #232526; - --color-gray-800: #2e3031; - --color-gray-700: #383a3b; - --color-gray-600: #393b3c; - --color-gray-500: #434546; - --color-gray-400: #5f6366; - --color-gray-100: #bebfc1; - --color-gray-50: #d1d2d3; - --color-gray-30: #e7e8ea; - --color-gray-10: #f0f0f0; - --color-gray-5: #f7f7f7; - --color-gray-0: #ffffff; - --callout-warning-underline: var(--color-yellow-milk-40); - --callout-warning-link: var(--color-yellow-milk-100); - --callout-warning-text: var(--color-yellow-milk-200); - --callout-warning-border: var(--color-yellow-alpha-20); - --callout-warning-background: var(--color-yellow-alpha-10); - --callout-info-underline: var(--color-blue-milk-40); - --callout-info-link: var(--color-blue-milk-100); - --callout-info-text: var(--color-blue-milk-200); - --callout-info-border: var(--color-blue-alpha-20); - --callout-info-background: var(--color-blue-alpha-10); - --callout-success-underline: var(--color-green-milk-40); - --callout-success-link: var(--color-green-milk-100); - --callout-success-text: var(--color-green-milk-200); - --callout-success-border: var(--color-green-alpha-20); - --callout-success-background: var(--color-green-alpha-10); - --callout-danger-underline: var(--color-red-milk-40); - --callout-danger-link: var(--color-red-milk-100); - --callout-danger-text: var(--color-red-milk-200); - --callout-danger-border: var(--color-red-alpha-20); - --callout-danger-background: var(--color-red-alpha-10); - --callout-default-underline: var(--color-white-alpha-40); - --callout-default-link: var(--color-white-alpha-100); - --callout-default-text: var(--color-gray-100); - --callout-default-border: var(--color-white-alpha-10); - --callout-default-background: var(--color-white-alpha-5); - --position-pattern-foreground-hover: var(--color-gray-100); - --position-pattern-foreground: var(--color-gray-400); - --position-pattern-background: var(--color-gray-900); - --position-pattern-border-hover: var(--color-gray-400); - --position-pattern-border: var(--color-gray-600); - --modal-overlay: var(--color-black-alpha-20); - --overlay-30-revert: var(--color-black-alpha-30); - --overlay-100: var(--color-white-alpha-100); - --overlay-70: var(--color-white-alpha-70); - --overlay-60: var(--color-white-alpha-60); - --overlay-50: var(--color-white-alpha-50); - --overlay-40: var(--color-white-alpha-40); - --overlay-30: var(--color-white-alpha-30); - --overlay-20: var(--color-white-alpha-20); - --overlay-10: var(--color-white-alpha-10); - --overlay-5: var(--color-white-alpha-5); - --dropdown-border: var(--color-gray-400); - --dropdown-background-active: var(--color-gray-900); - --dropdown-background-hover: var(--color-gray-800); - --checkbox-foreground: var(--color-gray-0); - --checkbox-background-disable: var(--color-gray-600); - --checkbox-border-disable: var(--color-gray-500); - --checkbox-border-active: var(--color-gray-400); - --checkbox-border-hover: var(--color-gray-100); - --checkbox-border: var(--color-gray-50); - --checkbox-background: var(--color-gray-10); - --collaborator-color-you: var(--color-yellow-alpha-100); - --collaborator-color-1: var(--color-blue-alpha-100); - --danger-disabled: var(--color-vermilion-700); - --danger-hover: var(--color-vermilion-900); - --danger-default: var(--color-vermilion-1000); - --node-partial: var(--color-purple-alpha-100); - --node-page-default: var(--color-gold-alpha-50); - --node-block: var(--color-teal-900); - --node-background: var(--color-gray-1000); - --node-border: var(--color-gray-800); - --toggle-foreground: var(--color-gray-0); - --toggle-background: var(--color-gray-400); - --tooltip-background: var(--color-white-alpha-100); - --tooltip-foreground: var(--color-gray-800); - --tooltip-border: var(--color-gray-10); - --link-active: var(--color-gray-0); - --link-default: var(--color-gray-100); - --pane-background-active: var(--color-gray-800); - --pane-background-hover: var(--color-gray-700); - --pane-background: var(--color-gray-900); - --pane-muted-background: var(--color-gray-800); - --pane-border-active: var(--color-gray-500); - --pane-border-hover: var(--color-gray-400); - --pane-border: var(--color-gray-700); - --avatar-background: var(--color-yellow-alpha-100); - --avatar-text: var(--color-gray-900); - --button-secondary-background-hover: var(--color-white-alpha-100); - --button-ghost-secondary-background: var(--color-green-950); - --button-danger-foreground: var(--color-white-alpha-100); - --button-disabled-background: var(--color-gray-800); - --button-disabled-foreground: var(--color-gray-400); - --button-background-active: var(--color-gray-400); - --button-background-hover: var(--color-gray-500); - --button-background: var(--color-gray-800); - --button-secondary-foreground: var(--color-white-alpha-100); - --button-primary-foreground: var(--color-black-alpha-100); - --button-foreground: var(--color-black-alpha-100); - --button-border: var(--color-gray-500); - --warning-foreground: var(--color-gold-950); - --warning-background: var(--color-gray-0); - --success-foreground: var(--color-green-950); - --success-background: var(--color-gray-0); - --error-foreground: var(--color-red-950); - --error-background: var(--color-gray-0); - --info-foreground: var(--color-teal-1200); - --info-background: var(--color-gray-0); - --primary-on-white-text: var(--color-green-600); - --primary-on-white-shape: var(--color-green-500); - --primary-accent-overlay: var(--color-green-alpha-10); - --primary-color: var(--color-green-400); - --primary-hover: var(--color-green-300); - --primary-accent: var(--color-green-400); - --global-mute-text: var(--color-gray-100); - --global-body-text: var(--color-gray-50); - --global-border: var(--color-gray-700); - --global-muted-background: var(--color-gray-900); - --global-foreground: var(--color-gray-0); - --global-background: var(--color-gray-1000); - --color-red-alpha-100: var(--color-red-500); - --color-green-alpha-100: var(--color-green-400); - --color-gold-alpha-100: var(--color-gold-300); - --node-action: var(--color-red-alpha-100); - --node-layout: var(--color-green-alpha-100); - --node-page-active: var(--color-gold-alpha-100); - --toggle-background-checked: var(--primary-color); - --button-danger-background-hover: var(--danger-hover); - --button-danger: var(--danger-default); - --button-primary-background-hover: var(--primary-hover); - --button-primary: var(--primary-color); -}