From 03d61326ad0d2af9bc46a1a140108a4b579c0c8d Mon Sep 17 00:00:00 2001 From: Will Gardiner Date: Mon, 14 Oct 2024 07:48:34 -0700 Subject: [PATCH] APP-304: Add semantic design variables (#2499) --- .gitignore | 3 + design/.gitignore | 176 + design/README.md | 23 + design/index.mjs | 285 + design/package.json | 17 + design/tokens/tokens.json | 7825 +++++++++++++++++ package.json | 3 +- tailwind.common.js | 308 + tailwind.css | 258 +- .../src/theme/extendColors.stories.tsx | 297 + .../src/clients/terrasos/Terrasos.muiTheme.ts | 22 +- .../clients/terrasos/Terrasos.tailwind.css | 275 +- 12 files changed, 9459 insertions(+), 33 deletions(-) create mode 100644 design/.gitignore create mode 100644 design/README.md create mode 100644 design/index.mjs create mode 100644 design/package.json create mode 100644 design/tokens/tokens.json create mode 100644 web-components/src/theme/extendColors.stories.tsx diff --git a/.gitignore b/.gitignore index 048d3b6825..94d71219a7 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,9 @@ node_modules # production /build +# generated design token styles +/design/build + # misc .DS_Store .env.local diff --git a/design/.gitignore b/design/.gitignore new file mode 100644 index 0000000000..cedc7aa75a --- /dev/null +++ b/design/.gitignore @@ -0,0 +1,176 @@ +build/ +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore + +# Logs + +logs +_.log +npm-debug.log_ +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Caches + +.cache + +# 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/) + +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt +dist + +# Gatsby files + +# 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 + +# 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.* + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) folder config +.DS_Store diff --git a/design/README.md b/design/README.md new file mode 100644 index 0000000000..21b21ae100 --- /dev/null +++ b/design/README.md @@ -0,0 +1,23 @@ +# Design + +This package processes [design tokens](https://tr.designtokens.org/format/) to generate CSS variables and a Tailwind config. It expects the design tokens exported from our Figma with the [Design Tokens plugin](https://www.figma.com/community/plugin/888356646278934516/design-tokens). + +``` +bun run build-tokens +``` + +It parses `tokens/tokens.json` and generates +- `base-regen.css`: base colors for Regen theme +- `base-terrasos.css`: base colors for Terrasos theme +- `alias-regen.css`: aliased colors that reference theme base colors (e.g. `primary.400` => `green.400`) +- `alias-terrasos.css`: aliased colors that reference theme base colors +- `semantic-regen-dark.css`: semantic colors for elements with a dark theme +- `semantic-regen-light.css`: semantic colors for elements with a light theme +- `semantic-terrasos-dark.css`: semantic colors for elements with a dark theme +- `semantic-terrasos-light.css`: semantic colors for elements with a light theme +- `tailwind.common.js`: a shared js file that can reference the relevant css variables for all theme clients + +These files can then be integrated into our app's theming system, by updating +- `tailwind.common.js`: shared interface +- `tailwind.css`: default theme variables +- `web-marketplace/src/clients/*/*.tailwind.css`: client specific theme variables \ No newline at end of file diff --git a/design/index.mjs b/design/index.mjs new file mode 100644 index 0000000000..2b86fc65e3 --- /dev/null +++ b/design/index.mjs @@ -0,0 +1,285 @@ +import fs from 'fs'; +import _ from 'lodash'; +import path from 'path'; +import StyleDictionary from 'style-dictionary'; +import { outputReferencesFilter } from 'style-dictionary/utils'; +import Color from 'tinycolor2'; + +const referenceFixes = [ + { pattern: /regen base colors\.regen\./g, replacement: 'regen base colors.' }, + { + pattern: /terrasos base colors\.terrasos\./g, + replacement: 'terrasos base colors.', + }, + { + pattern: /regen base colors\.terrasos\./g, + replacement: 'regen base colors.', + }, + { pattern: /{alias\.regen light\.color/g, replacement: '{alias.regen.color' }, + { pattern: /{alias\.regen dark\.color/g, replacement: '{alias.regen.color' }, + { + pattern: /{alias\.terrasos light\.color/g, + replacement: '{alias.terrasos.color', + }, + { + pattern: /{alias\.terrasos dark\.color/g, + replacement: '{alias.terrasos.color', + }, + { + pattern: /{regen base colors\.regen light\./g, + replacement: '{regen base colors.', + }, + { + pattern: /{regen base colors\.regen dark\./g, + replacement: '{regen base colors.', + }, + { + pattern: /{terrasos base colors\.regen dark\./g, + replacement: '{terrasos base colors.', + }, +]; + +const pathTransforms = [ + { pattern: 'alias.regen.color', replacement: 'ac' }, + { pattern: 'alias.terrasos.color', replacement: 'ac' }, + { pattern: 'regen base colors', replacement: 'bc' }, + { pattern: 'terrasos base colors', replacement: 'bc' }, + { pattern: 'mapped.regen light', replacement: 'sc' }, + { pattern: 'mapped.regen dark', replacement: 'sc' }, + { pattern: 'mapped.terrasos light', replacement: 'sc' }, + { pattern: 'mapped.terrasos dark', replacement: 'sc' }, +]; +const nameTransforms = pathTransforms.map(({ pattern, replacement }) => ({ + pattern: new RegExp(pattern.replace(/\.|\ /g, '-'), 'g'), + replacement, +})); + +// Function to update the value field based on the specified rules +const updateValue = value => { + let originalValue = value; + + for (const { pattern, replacement } of referenceFixes) { + value = value.replace(pattern, replacement); + } + if (originalValue !== value) { + console.log(`Transformed: ${originalValue} -> ${value}`); + } + return value; +}; + +const updateJsonValues = obj => { + _.forOwn(obj, (value, key) => { + if (_.isObject(value)) { + updateJsonValues(value); + } else if (key === 'value') { + obj[key] = updateValue(value); + } + }); +}; + +// Register custom parser +StyleDictionary.registerParser({ + name: 'custom-json', + pattern: /\.json$/, + parser: ({ filePath, contents }) => { + console.log('Parsing file:', filePath); + const jsonData = JSON.parse(contents); + updateJsonValues(jsonData); + return jsonData; + }, +}); + +// Register custom transform for Modern RGB color values +StyleDictionary.registerTransform({ + name: 'color/rgb-modern', + type: 'value', + matcher: token => token.type === 'color', + transform: function (token, _, options) { + const legacyFmt = Color( + options.usesDtcg ? token.$value : token.value, + ).toRgbString(); + return legacyFmt.replace( + /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d+(\.\d+)?)?\)/, + '$1 $2 $3', + ); + }, +}); + +// Register custom transform to remove prefix from variable names +StyleDictionary.registerTransform({ + name: 'name/cti/kebab-remove-prefix', + type: 'name', + transform: prop => { + let transformedName = prop.name; + for (const { pattern, replacement } of nameTransforms) { + transformedName = transformedName.replace( + new RegExp(pattern, 'g'), + `${replacement}`, + ); + } + return transformedName; + }, +}); + +StyleDictionary.registerTransform({ + name: 'value/cti/kebab-remove-prefix', + type: 'value', + transform: prop => { + let transformedValue = prop.value; + + for (const { pattern, replacement } of pathTransforms) { + transformedValue = transformedValue.replace( + new RegExp(pattern, 'g'), + `${replacement}-`, + ); + } + console.log(`${prop.value} => ${transformedValue}`); + + return transformedValue; + }, +}); + +// Register custom format for Tailwind CSS with nested variables +StyleDictionary.registerFormat({ + name: 'tailwind/colors', + format: ({ dictionary }) => { + const tokens = {}; + dictionary.allTokens.forEach(y => + _.setWith(tokens, y.path, y.value, Object), + ); + return `module.exports = { + theme: { + extend: { + colors: ${JSON.stringify(tokens, null, 2)} + } + } + }`; + }, +}); + +// Register custom format for Tailwind CSS with nested variables and shared variables +StyleDictionary.registerFormat({ + name: 'tailwind/colors-shared', + format: ({ dictionary }) => { + const tokens = {}; + dictionary.allTokens.forEach(y => { + const path = y.path.join('.'); + + const isReference = str => str.startsWith('{') && str.endsWith('}'); + const wrapRgbVar = str => `rgb(var(--${str}) / )`; + let newPath = path; + let newValue = path; + + for (const { pattern, replacement } of pathTransforms) { + newPath = newPath + .replace(new RegExp(pattern, 'g'), replacement) + .replace(/\&/g, '-') + .replace(/\%/g, ''); + } + newValue = newPath.replace(/\./g, '-'); + + _.setWith( + tokens, + newPath, + wrapRgbVar(newValue.replace(/\./g, '-')), + Object, + ); + }); + + // console.log(JSON.stringify(tokens, null, 2)); + + return `module.exports = { + theme: { + extend: { + colors: ${JSON.stringify(tokens, null, 2)} + } + } + }`; + }, +}); + +const cssFiles = [ + { + name: 'semantic-regen-light', + tokenPath: 'mapped.regen light', + }, + { + name: 'semantic-regen-dark', + tokenPath: 'mapped.regen dark', + }, + { + name: 'semantic-terrasos-light', + tokenPath: 'mapped.terrasos light', + }, + { + name: 'semantic-terrasos-dark', + tokenPath: 'mapped.terrasos dark', + }, + { + name: 'base-regen', + tokenPath: 'regen base colors.', + }, + { + name: 'base-terrasos', + tokenPath: 'terrasos base colors.', + }, + { + name: 'alias-regen', + tokenPath: 'alias.regen.color', + }, + { + name: 'alias-terrasos', + tokenPath: 'alias.terrasos.color', + }, +]; + +// Define the configuration +const config = { + log: { + verbosity: 'verbose', + }, + source: ['tokens/tokens.json'], + parsers: ['custom-json'], + platforms: { + tailwind: { + transformGroup: 'js', + transforms: [ + 'name/kebab', + 'color/rgb-modern', + 'name/cti/kebab-remove-prefix', + 'value/cti/kebab-remove-prefix', + ], + buildPath: 'build/', + files: [ + { + destination: 'tailwind.common.js', + format: 'tailwind/colors-shared', + options: { + outputReferences: true, + }, + }, + ...cssFiles.map(({ name, tokenPath }) => ({ + destination: `${name}.css`, + format: 'css/variables', + options: { + outputReferences: true, + }, + filter: function (token) { + return token.path.join('.').includes(tokenPath); + }, + })), + ], + }, + }, +}; + +// Apply the configuration and build +const styleDictionary = new StyleDictionary(config); +//const styleDictionary = StyleDictionary.extend(config); +styleDictionary.buildAllPlatforms(); + +// Optionally, log the output paths +console.log('Build completed. Output files:'); +config.platforms.tailwind.files.forEach(file => { + console.log(`${config.platforms.tailwind.buildPath}${file.destination}`); +}); diff --git a/design/package.json b/design/package.json new file mode 100644 index 0000000000..a0f3edec53 --- /dev/null +++ b/design/package.json @@ -0,0 +1,17 @@ +{ + "name": "design", + "module": "index.ts", + "type": "module", + "devDependencies": { + "@types/bun": "latest", + "lodash": "^4.17.21", + "style-dictionary": "^4.1.3", + "tinycolor2": "^1.6.0" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "scripts": { + "build-tokens": "bun run node index.mjs" + } +} \ No newline at end of file diff --git a/design/tokens/tokens.json b/design/tokens/tokens.json new file mode 100644 index 0000000000..b69a5f635a --- /dev/null +++ b/design/tokens/tokens.json @@ -0,0 +1,7825 @@ +{ + "regen base colors": { + "neutral": { + "0": { + "type": "color", + "value": "#ffffffff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:22", + "exportKey": "variables" + } + } + }, + "100": { + "type": "color", + "value": "#fafafaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:21", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#efefefff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:20", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#d2d5d9ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:19", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#8f8f8fff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:18", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#545555ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:17", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#202020ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:16", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#000000ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:15", + "exportKey": "variables" + } + } + } + }, + "green": { + "100": { + "type": "color", + "value": "#f7fffaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:114", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#dcf0e3ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:26", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#b9e1c7ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:25", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#7bc796ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:24", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#4fb573ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:23", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#1a7d3cff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1974:4", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#004c1bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2014:3", + "exportKey": "variables" + } + } + } + }, + "yellow": { + "100": { + "type": "color", + "value": "#fffbf0ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:115", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#fff1cfff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:30", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#ffe7adff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:29", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#ffd877ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:28", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#ffc432ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:27", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#ac7b01ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:116", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#654802ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:117", + "exportKey": "variables" + } + } + } + }, + "red": { + "100": { + "type": "color", + "value": "#f8eeecff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:119", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#f8dad4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:34", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#f2b5a8ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:33", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#e6735cff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:32", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#de4526ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:31", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#b2270bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:120", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#6b1200ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2021:121", + "exportKey": "variables" + } + } + } + }, + "blue": { + "100": { + "type": "color", + "value": "#eff4fbff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:39", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#d8e4f5ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:38", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#b1caecff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:37", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#6d9bdbff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:36", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#3d7acfff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:35", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#2160b8ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:122", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#00347dff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:123", + "exportKey": "variables" + } + } + } + }, + "orange": { + "100": { + "type": "color", + "value": "#fff6ecff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:125", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#ffecd5ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1921:42", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#ffcf98ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:127", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#e69e5cff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1940:6", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#e07716ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1940:7", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#be5b01ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:124", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#7a400bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1975:6", + "exportKey": "variables" + } + } + } + }, + "purple": { + "100": { + "type": "color", + "value": "#f4f8ffff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:176", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#edf3ffff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:177", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#dde1e9ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1950:3", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#bbc3d2ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1955:9", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#808eabff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1955:8", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#56688fff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:1942:6", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#33456bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2040:175", + "exportKey": "variables" + } + } + } + }, + "gradients": { + "blue-green": { + "400": { + "type": "color", + "value": "#c4dab5ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:584", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#79c6aaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:585", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#527984ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:586", + "exportKey": "variables" + } + } + } + }, + "purple": { + "400": { + "type": "color", + "value": "#faebd1ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Value", + "collection": "Regen base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:921", + "exportKey": "variables" + } + } + } + } + } + }, + "alias": { + "regen": { + "color": { + "primary": { + "100": { + "type": "color", + "value": "{regen base colors.regen.green.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:544", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "{regen base colors.regen.green.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:4", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "{regen base colors.regen.green.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:545", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "{regen base colors.regen.green.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2043:3812", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.green.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:5", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.regen.green.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:6", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "{regen base colors.regen.green.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:543", + "exportKey": "variables" + } + } + } + }, + "neutral": { + "0": { + "type": "color", + "value": "{regen base colors.regen.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:543", + "exportKey": "variables" + } + } + }, + "100": { + "type": "color", + "value": "{regen base colors.regen.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:551", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "{regen base colors.regen.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:552", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "{regen base colors.regen.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:553", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "{regen base colors.regen.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:555", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:556", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.regen.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:558", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "{regen base colors.regen.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:559", + "exportKey": "variables" + } + } + } + }, + "gradients": { + "primary-gradient": { + "400": { + "type": "color", + "value": "{regen base colors.regen.gradients.blue-green.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:594", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.gradients.blue-green.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:595", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.regen.gradients.blue-green.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:597", + "exportKey": "variables" + } + } + } + }, + "purple-gradient": { + "400": { + "type": "color", + "value": "{regen base colors.regen.gradients.purple.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:922", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.gradients.blue-green.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:923", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.regen.purple.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:924", + "exportKey": "variables" + } + } + } + } + }, + "success": { + "400": { + "type": "color", + "value": "{regen base colors.regen.green.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:10", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.green.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:12", + "exportKey": "variables" + } + } + } + }, + "error": { + "400": { + "type": "color", + "value": "{regen base colors.regen.red.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:18", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.regen.red.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:17", + "exportKey": "variables" + } + } + } + } + } + }, + "terrasos": { + "color": { + "primary": { + "100": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:544", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:4", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:545", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2043:3812", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:5", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2011:6", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "{terrasos base colors.terrasos.yellow.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2044:543", + "exportKey": "variables" + } + } + } + }, + "neutral": { + "0": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:543", + "exportKey": "variables" + } + } + }, + "100": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:551", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:552", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:553", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:555", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:556", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:558", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "{terrasos base colors.terrasos.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [], + "variableId": "VariableID:2045:559", + "exportKey": "variables" + } + } + } + }, + "gradients": { + "primary-gradient": { + "400": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:594", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:595", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:597", + "exportKey": "variables" + } + } + } + }, + "purple-gradient": { + "400": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:922", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:923", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{regen base colors.terrasos.yellow.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:924", + "exportKey": "variables" + } + } + } + } + }, + "success": { + "400": { + "type": "color", + "value": "{terrasos base colors.terrasos.green.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:10", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{terrasos base colors.terrasos.green.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:12", + "exportKey": "variables" + } + } + } + }, + "error": { + "400": { + "type": "color", + "value": "{terrasos base colors.terrasos.red.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:18", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{terrasos base colors.terrasos.red.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos", + "collection": "Alias", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:17", + "exportKey": "variables" + } + } + } + } + } + } + }, + "terrasos base colors": { + "neutral": { + "0": { + "type": "color", + "value": "#ffffffff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:14", + "exportKey": "variables" + } + } + }, + "100": { + "type": "color", + "value": "#fafafaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:13", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#efefefff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:12", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#d2d5d9ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:11", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#a5a4a4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:10", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#636464ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:9", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#383838ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:8", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#000000ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:7", + "exportKey": "variables" + } + } + } + }, + "yellow": { + "100": { + "type": "color", + "value": "#fffae6ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:16", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#fff1b6ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:51", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#ffe67eff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:52", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#ffdf58ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:53", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#ffcd00ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:54", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#bd9a11ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:55", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#8a6e0bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2041:56", + "exportKey": "variables" + } + } + } + }, + "green": { + "100": { + "type": "color", + "value": "#f7fffaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:3", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#def8e7ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:4", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#b3e8c6ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:5", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#8ad3a4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:6", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#49af6dff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:7", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#248846ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:8", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#0f5a26ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2214:9", + "exportKey": "variables" + } + } + } + }, + "red": { + "100": { + "type": "color", + "value": "#f8eeecff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:10", + "exportKey": "variables" + } + } + }, + "200": { + "type": "color", + "value": "#f8dad4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:11", + "exportKey": "variables" + } + } + }, + "300": { + "type": "color", + "value": "#f2b5a8ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:12", + "exportKey": "variables" + } + } + }, + "400": { + "type": "color", + "value": "#e6735cff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:13", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#de4526ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:14", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#b2270bff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:15", + "exportKey": "variables" + } + } + }, + "700": { + "type": "color", + "value": "#6b1200ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Mode 1", + "collection": "Terrasos base colors", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2216:16", + "exportKey": "variables" + } + } + } + } + }, + "mapped": { + "regen light": { + "text": { + "paragraph": { + "type": "color", + "value": "{alias.regen light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:58", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.regen light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:59", + "exportKey": "variables" + } + } + }, + "link": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:60", + "exportKey": "variables" + } + } + }, + "sub-header": { + "type": "color", + "value": "{alias.regen light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2045:560", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2199:560", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.regen light.color.error.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2216:19", + "exportKey": "variables" + } + } + }, + "over-image": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2234:4", + "exportKey": "variables" + } + } + } + }, + "surface": { + "page-background-default": { + "type": "color", + "value": "{alias.regen light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:62", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2186:3311", + "exportKey": "variables" + } + } + }, + "page-background-light": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2228:7", + "exportKey": "variables" + } + } + } + }, + "card": { + "standard": { + "background": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2044:547", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2170:7607", + "exportKey": "variables" + } + } + }, + "header-background": { + "type": "color", + "value": "{alias.regen light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2247:905", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "diagonal-background": { + "type": "color", + "value": "#f1f7f6ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2290:33", + "exportKey": "variables" + } + } + } + } + }, + "icon": { + "standard": { + "dark": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2146:3506", + "exportKey": "variables" + } + } + }, + "light": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3315", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.regen light.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2216:20", + "exportKey": "variables" + } + } + }, + "success": { + "type": "color", + "value": "{alias.regen light.color.success.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:2", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.regen light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:3", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2237:5", + "exportKey": "variables" + } + } + }, + "shade": { + "type": "color", + "value": "{alias.regen light.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2292:34", + "exportKey": "variables" + } + } + } + }, + "ecosystem": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:908", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:909", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:910", + "exportKey": "variables" + } + } + } + }, + "sdg": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:7", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:8", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:9", + "exportKey": "variables" + } + } + }, + "number": { + "type": "color", + "value": "{alias.regen light.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:5", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.regen light.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:6", + "exportKey": "variables" + } + } + }, + "stroke&shadow": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:10", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2269:12", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "100%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:12", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:13", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:14", + "exportKey": "variables" + } + } + } + }, + "25%-blue-green-gradient": { + "400": { + "type": "color", + "value": "#dfecdaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:22", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#bce1d4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:23", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#a8bcc1ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:24", + "exportKey": "variables" + } + } + } + }, + "10%-blue-green-gradient": { + "400": { + "type": "color", + "value": "#ecf3e9ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:27", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#d6ece5ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:28", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#cbd7daff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:29", + "exportKey": "variables" + } + } + } + }, + "background": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2289:31", + "exportKey": "variables" + } + } + } + } + }, + "gradient": { + "lighter-gradient": { + "300": { + "type": "color", + "value": "{alias.regen light.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:572", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:571", + "exportKey": "variables" + } + } + } + }, + "heavy-gradient": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:599", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:598", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:583", + "exportKey": "variables" + } + } + } + } + }, + "button": { + "text&icon": { + "light": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:573", + "exportKey": "variables" + } + } + }, + "dark": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:575", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3316", + "exportKey": "variables" + } + } + }, + "prefinance": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2267:2", + "exportKey": "variables" + } + } + } + }, + "surface": { + "standard": { + "secondary-hover": { + "type": "color", + "value": "{alias.regen light.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:600", + "exportKey": "variables" + } + } + }, + "primary-disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:601", + "exportKey": "variables" + } + } + }, + "secondary-default": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3312", + "exportKey": "variables" + } + } + }, + "secondary-disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3313", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:928", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:929", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:930", + "exportKey": "variables" + } + } + } + } + }, + "outline": { + "secondary-disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3314", + "exportKey": "variables" + } + } + } + } + }, + "tabs": { + "tab-underline": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2206:561", + "exportKey": "variables" + } + } + } + }, + "tag": { + "impact": { + "background": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2208:562", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:8", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:3", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:4", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen light.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:5", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2208:563", + "exportKey": "variables" + } + } + } + }, + "filter": { + "background-unselected": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:911", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.regen light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:912", + "exportKey": "variables" + } + } + }, + "stroke-unselected": { + "type": "color", + "value": "{alias.regen light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:913", + "exportKey": "variables" + } + } + }, + "stroke-selected": { + "type": "color", + "value": "{alias.regen light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:914", + "exportKey": "variables" + } + } + }, + "outer-shadow": { + "type": "color", + "value": "#00000033", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:915", + "exportKey": "variables" + } + } + }, + "inner-shadow": { + "type": "color", + "value": "#00000033", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:916", + "exportKey": "variables" + } + } + } + }, + "credit-category": { + "300": { + "type": "color", + "value": "{alias.regen light.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:14", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:15", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:9", + "exportKey": "variables" + } + } + } + } + }, + "tooltip": { + "outline": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2210:564", + "exportKey": "variables" + } + } + }, + "fill": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2243:904", + "exportKey": "variables" + } + } + } + }, + "input": { + "background-default": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2222:4", + "exportKey": "variables" + } + } + }, + "background-disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2223:5", + "exportKey": "variables" + } + } + }, + "triangle-icon-default": { + "type": "color", + "value": "{alias.regen light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:8", + "exportKey": "variables" + } + } + }, + "triangle-icon-disabled": { + "type": "color", + "value": "{alias.regen light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:9", + "exportKey": "variables" + } + } + } + }, + "table": { + "surface-dark": { + "type": "color", + "value": "{alias.regen light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2226:6", + "exportKey": "variables" + } + } + }, + "surface-light": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2232:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2232:3", + "exportKey": "variables" + } + } + } + }, + "checkbox-or-radio-selector": { + "background-default": { + "type": "color", + "value": "{alias.regen light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{regen base colors.regen light.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2274:3", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.regen light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:4", + "exportKey": "variables" + } + } + } + } + }, + "regen dark": { + "text": { + "paragraph": { + "type": "color", + "value": "{alias.regen dark.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:58", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:59", + "exportKey": "variables" + } + } + }, + "link": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:60", + "exportKey": "variables" + } + } + }, + "sub-header": { + "type": "color", + "value": "{alias.regen dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2045:560", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2199:560", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.regen dark.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2216:19", + "exportKey": "variables" + } + } + }, + "over-image": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2234:4", + "exportKey": "variables" + } + } + } + }, + "surface": { + "page-background-default": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:62", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2186:3311", + "exportKey": "variables" + } + } + }, + "page-background-light": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2228:7", + "exportKey": "variables" + } + } + } + }, + "card": { + "standard": { + "background": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2044:547", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2170:7607", + "exportKey": "variables" + } + } + }, + "header-background": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2247:905", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "diagonal-background": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2290:33", + "exportKey": "variables" + } + } + } + } + }, + "icon": { + "standard": { + "dark": { + "type": "color", + "value": "{alias.regen dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2146:3506", + "exportKey": "variables" + } + } + }, + "light": { + "type": "color", + "value": "{alias.regen dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3315", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.regen dark.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2216:20", + "exportKey": "variables" + } + } + }, + "success": { + "type": "color", + "value": "{alias.regen dark.color.success.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:2", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{regen base colors.regen dark.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:3", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2237:5", + "exportKey": "variables" + } + } + }, + "shade": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2292:34", + "exportKey": "variables" + } + } + } + }, + "ecosystem": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:908", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:909", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:910", + "exportKey": "variables" + } + } + } + }, + "sdg": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:7", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:8", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:9", + "exportKey": "variables" + } + } + }, + "number": { + "type": "color", + "value": "{alias.regen dark.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:5", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.regen dark.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:6", + "exportKey": "variables" + } + } + }, + "stroke&shadow": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:10", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2269:12", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "100%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:12", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:13", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:14", + "exportKey": "variables" + } + } + } + }, + "25%-blue-green-gradient": { + "400": { + "type": "color", + "value": "#dfecdaff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:22", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#bce1d4ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:23", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#a8bcc1ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:24", + "exportKey": "variables" + } + } + } + }, + "10%-blue-green-gradient": { + "400": { + "type": "color", + "value": "#ecf3e9ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:27", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "#d6ece5ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:28", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "#cbd7daff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:29", + "exportKey": "variables" + } + } + } + }, + "background": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2289:31", + "exportKey": "variables" + } + } + } + } + }, + "gradient": { + "lighter-gradient": { + "300": { + "type": "color", + "value": "{alias.regen dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:572", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:571", + "exportKey": "variables" + } + } + } + }, + "heavy-gradient": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:599", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:598", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.primary-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:583", + "exportKey": "variables" + } + } + } + } + }, + "button": { + "text&icon": { + "light": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:573", + "exportKey": "variables" + } + } + }, + "dark": { + "type": "color", + "value": "{alias.regen dark.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:575", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3316", + "exportKey": "variables" + } + } + }, + "prefinance": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2267:2", + "exportKey": "variables" + } + } + } + }, + "surface": { + "standard": { + "secondary-hover": { + "type": "color", + "value": "{alias.regen dark.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:600", + "exportKey": "variables" + } + } + }, + "primary-disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:601", + "exportKey": "variables" + } + } + }, + "secondary-default": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3312", + "exportKey": "variables" + } + } + }, + "secondary-disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3313", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:928", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:929", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:930", + "exportKey": "variables" + } + } + } + } + }, + "outline": { + "secondary-disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3314", + "exportKey": "variables" + } + } + } + } + }, + "tabs": { + "tab-underline": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2206:561", + "exportKey": "variables" + } + } + } + }, + "tag": { + "impact": { + "background": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2208:562", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:8", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:3", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:4", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.regen dark.color.gradients.purple-gradient.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:5", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2208:563", + "exportKey": "variables" + } + } + } + }, + "filter": { + "background-unselected": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:911", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:912", + "exportKey": "variables" + } + } + }, + "stroke-unselected": { + "type": "color", + "value": "{alias.regen dark.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:913", + "exportKey": "variables" + } + } + }, + "stroke-selected": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:914", + "exportKey": "variables" + } + } + }, + "outer-shadow": { + "type": "color", + "value": "#ffffff80", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:915", + "exportKey": "variables" + } + } + }, + "inner-shadow": { + "type": "color", + "value": "#ffffff80", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:916", + "exportKey": "variables" + } + } + } + }, + "credit-category": { + "300": { + "type": "color", + "value": "{alias.regen dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:14", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:15", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.regen dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:9", + "exportKey": "variables" + } + } + } + } + }, + "tooltip": { + "outline": { + "type": "color", + "value": "{alias.regen dark.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2210:564", + "exportKey": "variables" + } + } + }, + "fill": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2243:904", + "exportKey": "variables" + } + } + } + }, + "input": { + "background-default": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2222:4", + "exportKey": "variables" + } + } + }, + "background-disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2223:5", + "exportKey": "variables" + } + } + }, + "triangle-icon-default": { + "type": "color", + "value": "{alias.regen dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:8", + "exportKey": "variables" + } + } + }, + "triangle-icon-disabled": { + "type": "color", + "value": "{alias.regen dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:9", + "exportKey": "variables" + } + } + } + }, + "table": { + "surface-dark": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2226:6", + "exportKey": "variables" + } + } + }, + "surface-light": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2232:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2232:3", + "exportKey": "variables" + } + } + } + }, + "checkbox-or-radio-selector": { + "background-default": { + "type": "color", + "value": "{alias.regen dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.regen dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2274:3", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.regen dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Regen Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:4", + "exportKey": "variables" + } + } + } + } + }, + "terrasos light": { + "text": { + "paragraph": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:58", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:59", + "exportKey": "variables" + } + } + }, + "link": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:60", + "exportKey": "variables" + } + } + }, + "sub-header": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2045:560", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2199:560", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.terrasos light.color.error.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2216:19", + "exportKey": "variables" + } + } + }, + "over-image": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2234:4", + "exportKey": "variables" + } + } + } + }, + "surface": { + "page-background-default": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:62", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2186:3311", + "exportKey": "variables" + } + } + }, + "page-background-light": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2228:7", + "exportKey": "variables" + } + } + } + }, + "card": { + "standard": { + "background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2044:547", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2170:7607", + "exportKey": "variables" + } + } + }, + "header-background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2247:905", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "diagonal-background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2290:33", + "exportKey": "variables" + } + } + } + } + }, + "icon": { + "standard": { + "dark": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2146:3506", + "exportKey": "variables" + } + } + }, + "light": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3315", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.terrasos light.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2216:20", + "exportKey": "variables" + } + } + }, + "success": { + "type": "color", + "value": "{alias.terrasos light.color.success.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:2", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:3", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2237:5", + "exportKey": "variables" + } + } + }, + "shade": { + "type": "color", + "value": "{alias.terrasos light.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2292:34", + "exportKey": "variables" + } + } + } + }, + "ecosystem": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:908", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:909", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:910", + "exportKey": "variables" + } + } + } + }, + "sdg": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:7", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:8", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:9", + "exportKey": "variables" + } + } + }, + "number": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:5", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:6", + "exportKey": "variables" + } + } + }, + "stroke&shadow": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:10", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2269:12", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "100%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:12", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:13", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:14", + "exportKey": "variables" + } + } + } + }, + "25%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:22", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:23", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:24", + "exportKey": "variables" + } + } + } + }, + "10%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:27", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:28", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.primary.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:29", + "exportKey": "variables" + } + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2289:31", + "exportKey": "variables" + } + } + } + } + }, + "gradient": { + "lighter-gradient": { + "300": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:572", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:571", + "exportKey": "variables" + } + } + } + }, + "heavy-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:599", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:598", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:583", + "exportKey": "variables" + } + } + } + } + }, + "button": { + "text&icon": { + "light": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:573", + "exportKey": "variables" + } + } + }, + "dark": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:575", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3316", + "exportKey": "variables" + } + } + }, + "prefinance": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2267:2", + "exportKey": "variables" + } + } + } + }, + "surface": { + "standard": { + "secondary-hover": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:600", + "exportKey": "variables" + } + } + }, + "primary-disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:601", + "exportKey": "variables" + } + } + }, + "secondary-default": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3312", + "exportKey": "variables" + } + } + }, + "secondary-disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3313", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:928", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:929", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:930", + "exportKey": "variables" + } + } + } + } + }, + "outline": { + "secondary-disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3314", + "exportKey": "variables" + } + } + } + } + }, + "tabs": { + "tab-underline": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2206:561", + "exportKey": "variables" + } + } + } + }, + "tag": { + "impact": { + "background": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2208:562", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:8", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:3", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:4", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:5", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2208:563", + "exportKey": "variables" + } + } + } + }, + "filter": { + "background-unselected": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:911", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:912", + "exportKey": "variables" + } + } + }, + "stroke-unselected": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:913", + "exportKey": "variables" + } + } + }, + "stroke-selected": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:914", + "exportKey": "variables" + } + } + }, + "outer-shadow": { + "type": "color", + "value": "#00000033", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:915", + "exportKey": "variables" + } + } + }, + "inner-shadow": { + "type": "color", + "value": "#00000033", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:916", + "exportKey": "variables" + } + } + } + }, + "credit-category": { + "300": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:14", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos light.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:15", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:9", + "exportKey": "variables" + } + } + } + } + }, + "tooltip": { + "outline": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2210:564", + "exportKey": "variables" + } + } + }, + "fill": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2243:904", + "exportKey": "variables" + } + } + } + }, + "input": { + "background-default": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2222:4", + "exportKey": "variables" + } + } + }, + "background-disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2223:5", + "exportKey": "variables" + } + } + }, + "triangle-icon-default": { + "type": "color", + "value": "{alias.terrasos light.color.primary.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:8", + "exportKey": "variables" + } + } + }, + "triangle-icon-disabled": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:9", + "exportKey": "variables" + } + } + } + }, + "table": { + "surface-dark": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2226:6", + "exportKey": "variables" + } + } + }, + "surface-light": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2232:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2232:3", + "exportKey": "variables" + } + } + } + }, + "checkbox-or-radio-selector": { + "background-default": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2274:3", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.terrasos light.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Light", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:4", + "exportKey": "variables" + } + } + } + } + }, + "terrasos dark": { + "text": { + "paragraph": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:58", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2041:59", + "exportKey": "variables" + } + } + }, + "link": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:60", + "exportKey": "variables" + } + } + }, + "sub-header": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2045:560", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2199:560", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.terrasos dark.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2216:19", + "exportKey": "variables" + } + } + }, + "over-image": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "TEXT_FILL" + ], + "variableId": "VariableID:2234:4", + "exportKey": "variables" + } + } + } + }, + "surface": { + "page-background-default": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2041:62", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2186:3311", + "exportKey": "variables" + } + } + }, + "page-background-light": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2228:7", + "exportKey": "variables" + } + } + } + }, + "card": { + "standard": { + "background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2044:547", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2170:7607", + "exportKey": "variables" + } + } + }, + "header-background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2247:905", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "diagonal-background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2290:33", + "exportKey": "variables" + } + } + } + } + }, + "icon": { + "standard": { + "dark": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2146:3506", + "exportKey": "variables" + } + } + }, + "light": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3315", + "exportKey": "variables" + } + } + }, + "error": { + "type": "color", + "value": "{alias.terrasos dark.color.error.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2216:20", + "exportKey": "variables" + } + } + }, + "success": { + "type": "color", + "value": "{alias.terrasos dark.color.success.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:2", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2218:3", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2237:5", + "exportKey": "variables" + } + } + }, + "shade": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2292:34", + "exportKey": "variables" + } + } + } + }, + "ecosystem": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:908", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:909", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2255:910", + "exportKey": "variables" + } + } + } + }, + "sdg": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:7", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:8", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:9", + "exportKey": "variables" + } + } + }, + "number": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:5", + "exportKey": "variables" + } + } + }, + "header": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:6", + "exportKey": "variables" + } + } + }, + "stroke&shadow": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2269:10", + "exportKey": "variables" + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2269:12", + "exportKey": "variables" + } + } + } + }, + "credibility": { + "100%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:12", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:13", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:14", + "exportKey": "variables" + } + } + } + }, + "25%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:22", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:23", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:24", + "exportKey": "variables" + } + } + } + }, + "10%-blue-green-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:27", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:28", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2288:29", + "exportKey": "variables" + } + } + } + }, + "background": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2289:31", + "exportKey": "variables" + } + } + } + } + }, + "gradient": { + "lighter-gradient": { + "300": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:572", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2178:571", + "exportKey": "variables" + } + } + } + }, + "heavy-gradient": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:599", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:598", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2181:583", + "exportKey": "variables" + } + } + } + } + }, + "button": { + "text&icon": { + "light": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:573", + "exportKey": "variables" + } + } + }, + "dark": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2179:575", + "exportKey": "variables" + } + } + }, + "disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3316", + "exportKey": "variables" + } + } + }, + "prefinance": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2267:2", + "exportKey": "variables" + } + } + } + }, + "surface": { + "standard": { + "secondary-hover": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.200}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:600", + "exportKey": "variables" + } + } + }, + "primary-disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2181:601", + "exportKey": "variables" + } + } + }, + "secondary-default": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3312", + "exportKey": "variables" + } + } + }, + "secondary-disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3313", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:928", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:929", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2266:930", + "exportKey": "variables" + } + } + } + } + }, + "outline": { + "secondary-disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2187:3314", + "exportKey": "variables" + } + } + } + } + }, + "tabs": { + "tab-underline": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2206:561", + "exportKey": "variables" + } + } + } + }, + "tag": { + "impact": { + "background": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2208:562", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:8", + "exportKey": "variables" + } + } + } + }, + "prefinance": { + "400": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:3", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:4", + "exportKey": "variables" + } + } + }, + "600": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2267:5", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2208:563", + "exportKey": "variables" + } + } + } + }, + "filter": { + "background-unselected": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:911", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2257:912", + "exportKey": "variables" + } + } + }, + "stroke-unselected": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.400}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:913", + "exportKey": "variables" + } + } + }, + "stroke-selected": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.0}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2257:914", + "exportKey": "variables" + } + } + }, + "outer-shadow": { + "type": "color", + "value": "#ffffff80", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:915", + "exportKey": "variables" + } + } + }, + "inner-shadow": { + "type": "color", + "value": "#ffffff80", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "EFFECT_COLOR" + ], + "variableId": "VariableID:2258:916", + "exportKey": "variables" + } + } + } + }, + "credit-category": { + "300": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:14", + "exportKey": "variables" + } + } + }, + "500": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_SCOPES" + ], + "variableId": "VariableID:2268:15", + "exportKey": "variables" + } + } + }, + "text&icon": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "TEXT_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2268:9", + "exportKey": "variables" + } + } + } + } + }, + "tooltip": { + "outline": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.100}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2210:564", + "exportKey": "variables" + } + } + }, + "fill": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "ALL_FILLS", + "STROKE_COLOR" + ], + "variableId": "VariableID:2243:904", + "exportKey": "variables" + } + } + } + }, + "input": { + "background-default": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2222:4", + "exportKey": "variables" + } + } + }, + "background-disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2223:5", + "exportKey": "variables" + } + } + }, + "triangle-icon-default": { + "type": "color", + "value": "{alias.terrasos dark.color.primary.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:8", + "exportKey": "variables" + } + } + }, + "triangle-icon-disabled": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.300}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL", + "STROKE_COLOR" + ], + "variableId": "VariableID:2230:9", + "exportKey": "variables" + } + } + } + }, + "table": { + "surface-dark": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2226:6", + "exportKey": "variables" + } + } + }, + "surface-light": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2232:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2232:3", + "exportKey": "variables" + } + } + } + }, + "checkbox-or-radio-selector": { + "background-default": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.700}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:2", + "exportKey": "variables" + } + } + }, + "stroke": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.500}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "STROKE_COLOR" + ], + "variableId": "VariableID:2274:3", + "exportKey": "variables" + } + } + }, + "background-selected": { + "type": "color", + "value": "{alias.terrasos dark.color.neutral.600}", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "mode": "Terrasos Dark", + "collection": "Mapped", + "scopes": [ + "FRAME_FILL", + "SHAPE_FILL" + ], + "variableId": "VariableID:2274:4", + "exportKey": "variables" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/package.json b/package.json index 1998c4f9d6..b1366c546d 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,8 @@ "test-update-snapshot": "bun run --cwd web-marketplace test-update-snapshot", "bump": "lerna version --no-push --conventional-commits", "bump-and-push": "lerna version --conventional-commits", - "postinstall": "patch-package" + "postinstall": "patch-package", + "build-design-tokens": "bun run --cwd design build-tokens" }, "devDependencies": { "@graphql-codegen/cli": "1.21.4", diff --git a/tailwind.common.js b/tailwind.common.js index 6bdd586200..552e1bf5d4 100644 --- a/tailwind.common.js +++ b/tailwind.common.js @@ -1,6 +1,9 @@ /* eslint-disable lingui/no-unlocalized-strings */ // This file defines the common tailwind configuration to be used as the basis // of each project's tailwind.config.js file. + +// colors generated from Figma design tokens are under extend.colors as bc (base colors), ac (alias colors), and sc (semantic colors) +// prefer using semantic colors over alias colors, and only use base colors as a last resort module.exports = { theme: { fontFamily: { @@ -96,6 +99,311 @@ module.exports = { backgroundColor: { transparent: 'transparent', }, + colors: { + bc: { + neutral: { + 0: 'rgb(var(--bc-neutral-0) / )', + 100: 'rgb(var(--bc-neutral-100) / )', + 200: 'rgb(var(--bc-neutral-200) / )', + 300: 'rgb(var(--bc-neutral-300) / )', + 400: 'rgb(var(--bc-neutral-400) / )', + 500: 'rgb(var(--bc-neutral-500) / )', + 600: 'rgb(var(--bc-neutral-600) / )', + 700: 'rgb(var(--bc-neutral-700) / )', + }, + green: { + 100: 'rgb(var(--bc-green-100) / )', + 200: 'rgb(var(--bc-green-200) / )', + 300: 'rgb(var(--bc-green-300) / )', + 400: 'rgb(var(--bc-green-400) / )', + 500: 'rgb(var(--bc-green-500) / )', + 600: 'rgb(var(--bc-green-600) / )', + 700: 'rgb(var(--bc-green-700) / )', + }, + yellow: { + 100: 'rgb(var(--bc-yellow-100) / )', + 200: 'rgb(var(--bc-yellow-200) / )', + 300: 'rgb(var(--bc-yellow-300) / )', + 400: 'rgb(var(--bc-yellow-400) / )', + 500: 'rgb(var(--bc-yellow-500) / )', + 600: 'rgb(var(--bc-yellow-600) / )', + 700: 'rgb(var(--bc-yellow-700) / )', + }, + red: { + 100: 'rgb(var(--bc-red-100) / )', + 200: 'rgb(var(--bc-red-200) / )', + 300: 'rgb(var(--bc-red-300) / )', + 400: 'rgb(var(--bc-red-400) / )', + 500: 'rgb(var(--bc-red-500) / )', + 600: 'rgb(var(--bc-red-600) / )', + 700: 'rgb(var(--bc-red-700) / )', + }, + blue: { + 100: 'rgb(var(--bc-blue-100) / )', + 200: 'rgb(var(--bc-blue-200) / )', + 300: 'rgb(var(--bc-blue-300) / )', + 400: 'rgb(var(--bc-blue-400) / )', + 500: 'rgb(var(--bc-blue-500) / )', + 600: 'rgb(var(--bc-blue-600) / )', + 700: 'rgb(var(--bc-blue-700) / )', + }, + orange: { + 100: 'rgb(var(--bc-orange-100) / )', + 200: 'rgb(var(--bc-orange-200) / )', + 300: 'rgb(var(--bc-orange-300) / )', + 400: 'rgb(var(--bc-orange-400) / )', + 500: 'rgb(var(--bc-orange-500) / )', + 600: 'rgb(var(--bc-orange-600) / )', + 700: 'rgb(var(--bc-orange-700) / )', + }, + purple: { + 100: 'rgb(var(--bc-purple-100) / )', + 200: 'rgb(var(--bc-purple-200) / )', + 300: 'rgb(var(--bc-purple-300) / )', + 400: 'rgb(var(--bc-purple-400) / )', + 500: 'rgb(var(--bc-purple-500) / )', + 600: 'rgb(var(--bc-purple-600) / )', + 700: 'rgb(var(--bc-purple-700) / )', + }, + gradients: { + 'blue-green': { + 400: 'rgb(var(--bc-gradients-blue-green-400) / )', + 500: 'rgb(var(--bc-gradients-blue-green-500) / )', + 600: 'rgb(var(--bc-gradients-blue-green-600) / )', + }, + purple: { + 400: 'rgb(var(--bc-gradients-purple-400) / )', + }, + }, + }, + ac: { + primary: { + 100: 'rgb(var(--ac-primary-100) / )', + 200: 'rgb(var(--ac-primary-200) / )', + 300: 'rgb(var(--ac-primary-300) / )', + 400: 'rgb(var(--ac-primary-400) / )', + 500: 'rgb(var(--ac-primary-500) / )', + 600: 'rgb(var(--ac-primary-600) / )', + 700: 'rgb(var(--ac-primary-700) / )', + }, + neutral: { + 0: 'rgb(var(--ac-neutral-0) / )', + 100: 'rgb(var(--ac-neutral-100) / )', + 200: 'rgb(var(--ac-neutral-200) / )', + 300: 'rgb(var(--ac-neutral-300) / )', + 400: 'rgb(var(--ac-neutral-400) / )', + 500: 'rgb(var(--ac-neutral-500) / )', + 600: 'rgb(var(--ac-neutral-600) / )', + 700: 'rgb(var(--ac-neutral-700) / )', + }, + gradients: { + 'primary-gradient': { + 400: 'rgb(var(--ac-gradients-primary-gradient-400) / )', + 500: 'rgb(var(--ac-gradients-primary-gradient-500) / )', + 600: 'rgb(var(--ac-gradients-primary-gradient-600) / )', + }, + 'purple-gradient': { + 400: 'rgb(var(--ac-gradients-purple-gradient-400) / )', + 500: 'rgb(var(--ac-gradients-purple-gradient-500) / )', + 600: 'rgb(var(--ac-gradients-purple-gradient-600) / )', + }, + }, + success: { + 400: 'rgb(var(--ac-success-400) / )', + 500: 'rgb(var(--ac-success-500) / )', + }, + error: { + 400: 'rgb(var(--ac-error-400) / )', + 500: 'rgb(var(--ac-error-500) / )', + }, + }, + sc: { + text: { + paragraph: 'rgb(var(--sc-text-paragraph) / )', + header: 'rgb(var(--sc-text-header) / )', + link: 'rgb(var(--sc-text-link) / )', + 'sub-header': 'rgb(var(--sc-text-sub-header) / )', + disabled: 'rgb(var(--sc-text-disabled) / )', + error: 'rgb(var(--sc-text-error) / )', + 'over-image': 'rgb(var(--sc-text-over-image) / )', + }, + surface: { + 'page-background-default': + 'rgb(var(--sc-surface-page-background-default) / )', + stroke: 'rgb(var(--sc-surface-stroke) / )', + 'page-background-light': + 'rgb(var(--sc-surface-page-background-light) / )', + }, + card: { + standard: { + background: + 'rgb(var(--sc-card-standard-background) / )', + stroke: 'rgb(var(--sc-card-standard-stroke) / )', + 'header-background': + 'rgb(var(--sc-card-standard-header-background) / )', + }, + credibility: { + 'diagonal-background': + 'rgb(var(--sc-card-credibility-diagonal-background) / )', + }, + }, + icon: { + standard: { + dark: 'rgb(var(--sc-icon-standard-dark) / )', + light: 'rgb(var(--sc-icon-standard-light) / )', + error: 'rgb(var(--sc-icon-standard-error) / )', + success: 'rgb(var(--sc-icon-standard-success) / )', + background: + 'rgb(var(--sc-icon-standard-background) / )', + disabled: 'rgb(var(--sc-icon-standard-disabled) / )', + shade: 'rgb(var(--sc-icon-standard-shade) / )', + }, + ecosystem: { + 400: 'rgb(var(--sc-icon-ecosystem-400) / )', + 500: 'rgb(var(--sc-icon-ecosystem-500) / )', + 600: 'rgb(var(--sc-icon-ecosystem-600) / )', + }, + sdg: { + 400: 'rgb(var(--sc-icon-sdg-400) / )', + 500: 'rgb(var(--sc-icon-sdg-500) / )', + 600: 'rgb(var(--sc-icon-sdg-600) / )', + number: 'rgb(var(--sc-icon-sdg-number) / )', + header: 'rgb(var(--sc-icon-sdg-header) / )', + 'stroke-shadow': + 'rgb(var(--sc-icon-sdg-stroke-shadow) / )', + background: 'rgb(var(--sc-icon-sdg-background) / )', + }, + credibility: { + '100-blue-green-gradient': { + 400: 'rgb(var(--sc-icon-credibility-100-blue-green-gradient-400) / )', + 500: 'rgb(var(--sc-icon-credibility-100-blue-green-gradient-500) / )', + 600: 'rgb(var(--sc-icon-credibility-100-blue-green-gradient-600) / )', + }, + '25-blue-green-gradient': { + 400: 'rgb(var(--sc-icon-credibility-25-blue-green-gradient-400) / )', + 500: 'rgb(var(--sc-icon-credibility-25-blue-green-gradient-500) / )', + 600: 'rgb(var(--sc-icon-credibility-25-blue-green-gradient-600) / )', + }, + '10-blue-green-gradient': { + 400: 'rgb(var(--sc-icon-credibility-10-blue-green-gradient-400) / )', + 500: 'rgb(var(--sc-icon-credibility-10-blue-green-gradient-500) / )', + 600: 'rgb(var(--sc-icon-credibility-10-blue-green-gradient-600) / )', + }, + background: + 'rgb(var(--sc-icon-credibility-background) / )', + }, + }, + gradient: { + 'lighter-gradient': { + 300: 'rgb(var(--sc-gradient-lighter-gradient-300) / )', + 500: 'rgb(var(--sc-gradient-lighter-gradient-500) / )', + }, + 'heavy-gradient': { + 400: 'rgb(var(--sc-gradient-heavy-gradient-400) / )', + 500: 'rgb(var(--sc-gradient-heavy-gradient-500) / )', + 600: 'rgb(var(--sc-gradient-heavy-gradient-600) / )', + }, + }, + button: { + 'text-icon': { + light: 'rgb(var(--sc-button-text-icon-light) / )', + dark: 'rgb(var(--sc-button-text-icon-dark) / )', + disabled: + 'rgb(var(--sc-button-text-icon-disabled) / )', + prefinance: + 'rgb(var(--sc-button-text-icon-prefinance) / )', + }, + surface: { + standard: { + 'secondary-hover': + 'rgb(var(--sc-button-surface-standard-secondary-hover) / )', + 'primary-disabled': + 'rgb(var(--sc-button-surface-standard-primary-disabled) / )', + 'secondary-default': + 'rgb(var(--sc-button-surface-standard-secondary-default) / )', + 'secondary-disabled': + 'rgb(var(--sc-button-surface-standard-secondary-disabled) / )', + }, + prefinance: { + 400: 'rgb(var(--sc-button-surface-prefinance-400) / )', + 500: 'rgb(var(--sc-button-surface-prefinance-500) / )', + 600: 'rgb(var(--sc-button-surface-prefinance-600) / )', + }, + }, + outline: { + 'secondary-disabled': + 'rgb(var(--sc-button-outline-secondary-disabled) / )', + }, + }, + tabs: { + 'tab-underline': + 'rgb(var(--sc-tabs-tab-underline) / )', + }, + tag: { + impact: { + background: + 'rgb(var(--sc-tag-impact-background) / )', + 'text-icon': + 'rgb(var(--sc-tag-impact-text-icon) / )', + }, + prefinance: { + 400: 'rgb(var(--sc-tag-prefinance-400) / )', + 500: 'rgb(var(--sc-tag-prefinance-500) / )', + 600: 'rgb(var(--sc-tag-prefinance-600) / )', + 'text-icon': + 'rgb(var(--sc-tag-prefinance-text-icon) / )', + }, + filter: { + 'background-unselected': + 'rgb(var(--sc-tag-filter-background-unselected) / )', + 'background-selected': + 'rgb(var(--sc-tag-filter-background-selected) / )', + 'stroke-unselected': + 'rgb(var(--sc-tag-filter-stroke-unselected) / )', + 'stroke-selected': + 'rgb(var(--sc-tag-filter-stroke-selected) / )', + 'outer-shadow': + 'rgb(var(--sc-tag-filter-outer-shadow) / )', + 'inner-shadow': + 'rgb(var(--sc-tag-filter-inner-shadow) / )', + }, + 'credit-category': { + 300: 'rgb(var(--sc-tag-credit-category-300) / )', + 500: 'rgb(var(--sc-tag-credit-category-500) / )', + 'text-icon': + 'rgb(var(--sc-tag-credit-category-text-icon) / )', + }, + }, + tooltip: { + outline: 'rgb(var(--sc-tooltip-outline) / )', + fill: 'rgb(var(--sc-tooltip-fill) / )', + }, + input: { + 'background-default': + 'rgb(var(--sc-input-background-default) / )', + 'background-disabled': + 'rgb(var(--sc-input-background-disabled) / )', + 'triangle-icon-default': + 'rgb(var(--sc-input-triangle-icon-default) / )', + 'triangle-icon-disabled': + 'rgb(var(--sc-input-triangle-icon-disabled) / )', + }, + table: { + 'surface-dark': 'rgb(var(--sc-table-surface-dark) / )', + 'surface-light': + 'rgb(var(--sc-table-surface-light) / )', + stroke: 'rgb(var(--sc-table-stroke) / )', + }, + 'checkbox-or-radio-selector': { + 'background-default': + 'rgb(var(--sc-checkbox-or-radio-selector-background-default) / )', + stroke: + 'rgb(var(--sc-checkbox-or-radio-selector-stroke) / )', + 'background-selected': + 'rgb(var(--sc-checkbox-or-radio-selector-background-selected) / )', + }, + }, + }, }, }, plugins: [], diff --git a/tailwind.css b/tailwind.css index 7d8a65d31d..c2b37ea870 100644 --- a/tailwind.css +++ b/tailwind.css @@ -48,8 +48,176 @@ --purple-200: 187 195 210; --purple-100: 221 225 233; - --orange-700: 122 64 11; + /* regen base colors */ + --bc-gradients-purple-400: 250 235 209; + --bc-gradients-blue-green-600: 82 121 132; + --bc-gradients-blue-green-500: 121 198 170; + --bc-gradients-blue-green-400: 196 218 181; + --bc-purple-700: 51 69 107; + --bc-purple-600: 86 104 143; + --bc-purple-500: 128 142 171; + --bc-purple-400: 187 195 210; + --bc-purple-300: 221 225 233; + --bc-purple-200: 237 243 255; + --bc-purple-100: 244 248 255; + --bc-orange-700: 122 64 11; + --bc-orange-600: 190 91 1; + --bc-orange-500: 224 119 22; + --bc-orange-400: 230 158 92; + --bc-orange-300: 255 207 152; + --bc-orange-200: 255 236 213; + --bc-orange-100: 255 246 236; + --bc-blue-700: 0 52 125; + --bc-blue-600: 33 96 184; + --bc-blue-500: 61 122 207; + --bc-blue-400: 109 155 219; + --bc-blue-300: 177 202 236; + --bc-blue-200: 216 228 245; + --bc-blue-100: 239 244 251; + --bc-red-700: 107 18 0; + --bc-red-600: 178 39 11; + --bc-red-500: 222 69 38; + --bc-red-400: 230 115 92; + --bc-red-300: 242 181 168; + --bc-red-200: 248 218 212; + --bc-red-100: 248 238 236; + --bc-yellow-700: 101 72 2; + --bc-yellow-600: 172 123 1; + --bc-yellow-500: 255 196 50; + --bc-yellow-400: 255 216 119; + --bc-yellow-300: 255 231 173; + --bc-yellow-200: 255 241 207; + --bc-yellow-100: 255 251 240; + --bc-green-700: 0 76 27; + --bc-green-600: 26 125 60; + --bc-green-500: 79 181 115; + --bc-green-400: 123 199 150; + --bc-green-300: 185 225 199; + --bc-green-200: 220 240 227; + --bc-green-100: 247 255 250; + --bc-neutral-700: 0 0 0; + --bc-neutral-600: 32 32 32; + --bc-neutral-500: 84 85 85; + --bc-neutral-400: 143 143 143; + --bc-neutral-300: 210 213 217; + --bc-neutral-200: 239 239 239; + --bc-neutral-100: 250 250 250; + --bc-neutral-0: 255 255 255; + /* alias.regen */ + --ac-error-500: var(--bc-red-500); + --ac-error-400: var(--bc-red-400); + --ac-success-500: var(--bc-green-500); + --ac-success-400: var(--bc-green-400); + --ac-gradients-purple-gradient-600: var(--bc-purple-600); + --ac-gradients-purple-gradient-500: var(--bc-gradients-blue-green-500); + --ac-gradients-purple-gradient-400: var(--bc-gradients-purple-400); + --ac-gradients-primary-gradient-600: var(--bc-gradients-blue-green-600); + --ac-gradients-primary-gradient-500: var(--bc-gradients-blue-green-500); + --ac-gradients-primary-gradient-400: var(--bc-gradients-blue-green-400); + --ac-neutral-700: var(--bc-neutral-700); + --ac-neutral-600: var(--bc-neutral-600); + --ac-neutral-500: var(--bc-neutral-500); + --ac-neutral-400: var(--bc-neutral-400); + --ac-neutral-300: var(--bc-neutral-300); + --ac-neutral-200: var(--bc-neutral-200); + --ac-neutral-100: var(--bc-neutral-100); + --ac-neutral-0: var(--bc-neutral-0); + --ac-primary-700: var(--bc-green-700); + --ac-primary-600: var(--bc-green-600); + --ac-primary-500: var(--bc-green-500); + --ac-primary-400: var(--bc-green-400); + --ac-primary-300: var(--bc-green-300); + --ac-primary-200: var(--bc-green-200); + --ac-primary-100: var(--bc-green-100); + + /* mapped.regen light */ + --sc-tag-filter-inner-shadow: 0 0 0; + --sc-tag-filter-outer-shadow: 0 0 0; + --sc-icon-credibility-10-blue-green-gradient-600: 203 215 218; + --sc-icon-credibility-10-blue-green-gradient-500: 214 236 229; + --sc-icon-credibility-10-blue-green-gradient-400: 236 243 233; + --sc-icon-credibility-25-blue-green-gradient-600: 168 188 193; + --sc-icon-credibility-25-blue-green-gradient-500: 188 225 212; + --sc-icon-credibility-25-blue-green-gradient-400: 223 236 218; + --sc-card-credibility-diagonal-background: 241 247 246; + --sc-checkbox-or-radio-selector-stroke: var(--bc-neutral-200); + --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-100); + --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-0); + --sc-table-stroke: var(--ac-neutral-200); + --sc-table-surface-light: var(--ac-neutral-0); + --sc-table-surface-dark: var(--ac-neutral-100); + --sc-input-triangle-icon-disabled: var(--ac-neutral-400); + --sc-input-triangle-icon-default: var(--ac-primary-500); + --sc-input-background-disabled: var(--ac-neutral-200); + --sc-input-background-default: var(--ac-neutral-0); + --sc-tooltip-fill: var(--ac-neutral-0); + --sc-tooltip-outline: var(--ac-primary-500); + --sc-tag-credit-category-text-icon: var(--ac-neutral-0); + --sc-tag-credit-category-500: var(--ac-primary-500); + --sc-tag-credit-category-300: var(--ac-primary-300); + --sc-tag-filter-stroke-selected: var(--ac-neutral-500); + --sc-tag-filter-stroke-unselected: var(--ac-neutral-200); + --sc-tag-filter-background-selected: var(--ac-neutral-100); + --sc-tag-filter-background-unselected: var(--ac-neutral-0); + --sc-tag-prefinance-text-icon: var(--ac-neutral-0); + --sc-tag-prefinance-600: var(--ac-gradients-purple-gradient-600); + --sc-tag-prefinance-500: var(--ac-gradients-purple-gradient-500); + --sc-tag-prefinance-400: var(--ac-gradients-purple-gradient-400); + --sc-tag-impact-text-icon: var(--ac-neutral-0); + --sc-tag-impact-background: var(--ac-primary-500); + --sc-tabs-tab-underline: var(--ac-primary-500); + --sc-button-outline-secondary-disabled: var(--ac-neutral-300); + --sc-button-surface-prefinance-600: var(--ac-gradients-purple-gradient-600); + --sc-button-surface-prefinance-500: var(--ac-gradients-purple-gradient-500); + --sc-button-surface-prefinance-400: var(--ac-gradients-purple-gradient-400); + --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-100); + --sc-button-surface-standard-secondary-default: var(--ac-neutral-0); + --sc-button-surface-standard-primary-disabled: var(--ac-neutral-300); + --sc-button-surface-standard-secondary-hover: var(--ac-primary-200); + --sc-button-text-icon-prefinance: var(--ac-gradients-purple-gradient-600); + --sc-button-text-icon-disabled: var(--ac-neutral-300); + --sc-button-text-icon-dark: var(--ac-primary-500); + --sc-button-text-icon-light: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-600: var(--ac-gradients-primary-gradient-600); + --sc-gradient-heavy-gradient-500: var(--ac-gradients-primary-gradient-500); + --sc-gradient-heavy-gradient-400: var(--ac-gradients-primary-gradient-400); + --sc-gradient-lighter-gradient-500: var(--ac-primary-500); + --sc-gradient-lighter-gradient-300: var(--ac-primary-300); + --sc-icon-credibility-background: var(--ac-neutral-0); + --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-sdg-background: var(--ac-neutral-0); + --sc-icon-sdg-stroke-shadow: var(--ac-neutral-300); + --sc-icon-sdg-header: var(--ac-neutral-600); + --sc-icon-sdg-number: var(--ac-primary-400); + --sc-icon-sdg-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-sdg-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-sdg-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-ecosystem-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-ecosystem-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-ecosystem-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-standard-shade: var(--ac-primary-300); + --sc-icon-standard-disabled: var(--ac-neutral-400); + --sc-icon-standard-background: var(--ac-neutral-200); + --sc-icon-standard-success: var(--ac-success-400); + --sc-icon-standard-error: var(--ac-error-400); + --sc-icon-standard-light: var(--ac-neutral-0); + --sc-icon-standard-dark: var(--ac-primary-500); + --sc-card-standard-header-background: var(--ac-neutral-200); + --sc-card-standard-stroke: var(--ac-neutral-300); + --sc-card-standard-background: var(--ac-neutral-0); + --sc-surface-page-background-light: var(--ac-neutral-0); + --sc-surface-stroke: var(--ac-neutral-300); + --sc-surface-page-background-default: var(--ac-neutral-100); + --sc-text-over-image: var(--ac-neutral-0); + --sc-text-error: var(--ac-error-500); + --sc-text-disabled: var(--ac-neutral-400); + --sc-text-sub-header: var(--ac-neutral-400); + --sc-text-link: var(--ac-primary-500); + --sc-text-header: var(--ac-neutral-700); + --sc-text-paragraph: var(--ac-neutral-500); } .dark { @@ -88,6 +256,94 @@ --purple-300: 187 195 210; --purple-200: 128 142 171; --purple-100: 86 104 143; + + /* mapped.regen dark */ + --sc-tag-filter-inner-shadow: 255 255 255; + --sc-tag-filter-outer-shadow: 255 255 255; + --sc-icon-credibility-10-blue-green-gradient-600: 203 215 218; + --sc-icon-credibility-10-blue-green-gradient-500: 214 236 229; + --sc-icon-credibility-10-blue-green-gradient-400: 236 243 233; + --sc-icon-credibility-25-blue-green-gradient-600: 168 188 193; + --sc-icon-credibility-25-blue-green-gradient-500: 188 225 212; + --sc-icon-credibility-25-blue-green-gradient-400: 223 236 218; + --sc-icon-standard-background: var(--bc-neutral-500); + --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-600); + --sc-checkbox-or-radio-selector-stroke: var(--ac-neutral-500); + --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-700); + --sc-table-stroke: var(--ac-neutral-500); + --sc-table-surface-light: var(--ac-neutral-700); + --sc-table-surface-dark: var(--ac-neutral-600); + --sc-input-triangle-icon-disabled: var(--ac-neutral-300); + --sc-input-triangle-icon-default: var(--ac-primary-500); + --sc-input-background-disabled: var(--ac-neutral-600); + --sc-input-background-default: var(--ac-neutral-700); + --sc-tooltip-fill: var(--ac-neutral-700); + --sc-tooltip-outline: var(--ac-primary-400); + --sc-tag-credit-category-text-icon: var(--ac-neutral-0); + --sc-tag-credit-category-500: var(--ac-primary-500); + --sc-tag-credit-category-300: var(--ac-primary-300); + --sc-tag-filter-stroke-selected: var(--ac-neutral-0); + --sc-tag-filter-stroke-unselected: var(--ac-neutral-400); + --sc-tag-filter-background-selected: var(--ac-neutral-500); + --sc-tag-filter-background-unselected: var(--ac-neutral-600); + --sc-tag-prefinance-text-icon: var(--ac-neutral-0); + --sc-tag-prefinance-600: var(--ac-gradients-purple-gradient-600); + --sc-tag-prefinance-500: var(--ac-gradients-purple-gradient-500); + --sc-tag-prefinance-400: var(--ac-gradients-purple-gradient-400); + --sc-tag-impact-text-icon: var(--ac-neutral-0); + --sc-tag-impact-background: var(--ac-primary-500); + --sc-tabs-tab-underline: var(--ac-primary-500); + --sc-button-outline-secondary-disabled: var(--ac-neutral-300); + --sc-button-surface-prefinance-600: var(--ac-gradients-purple-gradient-600); + --sc-button-surface-prefinance-500: var(--ac-gradients-purple-gradient-500); + --sc-button-surface-prefinance-400: var(--ac-gradients-purple-gradient-400); + --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-600); + --sc-button-surface-standard-secondary-default: var(--ac-neutral-700); + --sc-button-surface-standard-primary-disabled: var(--ac-neutral-500); + --sc-button-surface-standard-secondary-hover: var(--ac-primary-200); + --sc-button-text-icon-prefinance: var(--ac-gradients-purple-gradient-600); + --sc-button-text-icon-disabled: var(--ac-neutral-500); + --sc-button-text-icon-dark: var(--ac-primary-200); + --sc-button-text-icon-light: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-600: var(--ac-gradients-primary-gradient-600); + --sc-gradient-heavy-gradient-500: var(--ac-gradients-primary-gradient-500); + --sc-gradient-heavy-gradient-400: var(--ac-gradients-primary-gradient-400); + --sc-gradient-lighter-gradient-500: var(--ac-primary-500); + --sc-gradient-lighter-gradient-300: var(--ac-primary-300); + --sc-icon-credibility-background: var(--ac-neutral-700); + --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-sdg-background: var(--ac-neutral-700); + --sc-icon-sdg-stroke-shadow: var(--ac-neutral-500); + --sc-icon-sdg-header: var(--ac-neutral-100); + --sc-icon-sdg-number: var(--ac-primary-400); + --sc-icon-sdg-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-sdg-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-sdg-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-ecosystem-600: var(--ac-gradients-primary-gradient-600); + --sc-icon-ecosystem-500: var(--ac-gradients-primary-gradient-500); + --sc-icon-ecosystem-400: var(--ac-gradients-primary-gradient-400); + --sc-icon-standard-shade: var(--ac-primary-500); + --sc-icon-standard-disabled: var(--ac-neutral-200); + --sc-icon-standard-success: var(--ac-success-400); + --sc-icon-standard-error: var(--ac-error-400); + --sc-icon-standard-light: var(--ac-primary-300); + --sc-icon-standard-dark: var(--ac-primary-300); + --sc-card-credibility-diagonal-background: var(--ac-neutral-600); + --sc-card-standard-header-background: var(--ac-neutral-600); + --sc-card-standard-stroke: var(--ac-neutral-500); + --sc-card-standard-background: var(--ac-neutral-700); + --sc-surface-page-background-light: var(--ac-neutral-600); + --sc-surface-stroke: var(--ac-neutral-500); + --sc-surface-page-background-default: var(--ac-neutral-700); + --sc-text-over-image: var(--ac-neutral-0); + --sc-text-error: var(--ac-error-400); + --sc-text-disabled: var(--ac-neutral-300); + --sc-text-sub-header: var(--ac-neutral-300); + --sc-text-link: var(--ac-primary-500); + --sc-text-header: var(--ac-neutral-0); + --sc-text-paragraph: var(--ac-neutral-200); } .bg-transparent { diff --git a/web-components/src/theme/extendColors.stories.tsx b/web-components/src/theme/extendColors.stories.tsx new file mode 100644 index 0000000000..669a636bb6 --- /dev/null +++ b/web-components/src/theme/extendColors.stories.tsx @@ -0,0 +1,297 @@ +import _ from 'lodash'; + +import { cn } from '../utils/styles/cn'; + +const Swatch = ({ + bgColor, + className, +}: { + bgColor: string; + className?: string; +}) => ( +
+ {bgColor.substring(3)} +
+); + +const Row = ({ children }: { children: React.ReactNode }) => ( +
{children}
+); + +export const BaseColors = { + render: () => ( + <> +

Base Colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ), +}; + +export default { + title: 'Extend Colors', + component: BaseColors, +}; + +function Alias() { + return ( + <> +

Alias Colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ); +} + +export const AliasColors = { + render: () => +}; + +export const SemanticColors = { + render: () => ( + <> +

Semantic Colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ), +}; diff --git a/web-marketplace/src/clients/terrasos/Terrasos.muiTheme.ts b/web-marketplace/src/clients/terrasos/Terrasos.muiTheme.ts index 6b6619b678..2ab1715667 100644 --- a/web-marketplace/src/clients/terrasos/Terrasos.muiTheme.ts +++ b/web-marketplace/src/clients/terrasos/Terrasos.muiTheme.ts @@ -37,22 +37,22 @@ const regenTheme = createTheme({ dark: '#201F22', }, secondary: { - main: '#4FB573', - dark: '#7BC796', - contrastText: '#B9E1C7', - light: '#DCF0E3', + main: '#BD9A11', + dark: '#FFCD00', + contrastText: '#FFDF58', + light: '#FFF1B6', }, warning: { - main: '#FFC432', - dark: '#FFD365', - contrastText: '#FFE7AD', - light: '#FFF3D6', + main: '#FFCD00', + dark: '#FFDF58', + contrastText: '#FFF1B6', + light: '#FFFAE6', }, info: { dark: '#545555', main: '#8f8f8f', light: '#EFEFEF', - contrastText: '#b0ddc0', + contrastText: '#BD9A11', }, orange: { contrastText: '#FBDBB6', @@ -67,8 +67,8 @@ const regenTheme = createTheme({ 600: '#C4C4C4', }, error: { - main: '#DE4526', - dark: '#E6735C', + main: '#B2270B', + dark: '#DE4526', contrastText: '#F2B5A8', light: '#F8DAD4', }, diff --git a/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css b/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css index 74f747bf7f..765dd5cc2b 100644 --- a/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css +++ b/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css @@ -13,9 +13,9 @@ */ --brand-400: 189 154 17; - --brand-300: 189 154 17; - --brand-200: 189 154 17; - --brand-100: 189 154 17; + --brand-300: 255 205 0; + --brand-200: 255 230 126; + --brand-100: 255 241 182; --grey-0: 255 255 255; --grey-100: 250 250 250; @@ -25,12 +25,12 @@ --grey-500: 99 100 100; --grey-600: 32 32 32; --grey-700: 0 0 0; - --warning-400: 255 196 50; - --warning-300: 255 211 101; - --warning-200: 255 231 173; - --warning-100: 255 243 214; + --warning-400: 255 205 0; + --warning-300: 255 223 88; + --warning-200: 255 241 182; + --warning-100: 255 250 230; - --error-400: 255 69 38; + --error-400: 178 39 11; --error-300: 230 115 92; --error-200: 242 181 168; --error-100: 248 218 212; @@ -46,13 +46,159 @@ --purple-300: 128 142 171; --purple-200: 187 195 210; --purple-100: 221 225 233; + + /* terrasos base colors */ + --bc-red-700: 107 18 0; + --bc-red-600: 178 39 11; + --bc-red-500: 222 69 38; + --bc-red-400: 230 115 92; + --bc-red-300: 242 181 168; + --bc-red-200: 248 218 212; + --bc-red-100: 248 238 236; + --bc-green-700: 15 90 38; + --bc-green-600: 36 136 70; + --bc-green-500: 73 175 109; + --bc-green-400: 138 211 164; + --bc-green-300: 179 232 198; + --bc-green-200: 222 248 231; + --bc-green-100: 247 255 250; + --bc-yellow-700: 138 110 11; + --bc-yellow-600: 189 154 17; + --bc-yellow-500: 255 205 0; + --bc-yellow-400: 255 223 88; + --bc-yellow-300: 255 230 126; + --bc-yellow-200: 255 241 182; + --bc-yellow-100: 255 250 230; + --bc-neutral-700: 0 0 0; + --bc-neutral-600: 56 56 56; + --bc-neutral-500: 99 100 100; + --bc-neutral-400: 165 164 164; + --bc-neutral-300: 210 213 217; + --bc-neutral-200: 239 239 239; + --bc-neutral-100: 250 250 250; + --bc-neutral-0: 255 255 255; + + /* alias.terrasos */ + --ac-error-500: var(--bc-red-500); + --ac-error-400: var(--bc-red-400); + --ac-success-500: var(--bc-green-500); + --ac-success-400: var(--bc-green-400); + --ac-gradients-purple-gradient-600: var(--bc-yellow-600); + --ac-gradients-purple-gradient-500: var(--bc-yellow-500); + --ac-gradients-purple-gradient-400: var(--bc-yellow-400); + --ac-gradients-primary-gradient-600: var(--bc-yellow-600); + --ac-gradients-primary-gradient-500: var(--bc-yellow-500); + --ac-gradients-primary-gradient-400: var(--bc-yellow-400); + --ac-neutral-700: var(--bc-neutral-700); + --ac-neutral-600: var(--bc-neutral-600); + --ac-neutral-500: var(--bc-neutral-500); + --ac-neutral-400: var(--bc-neutral-400); + --ac-neutral-300: var(--bc-neutral-300); + --ac-neutral-200: var(--bc-neutral-200); + --ac-neutral-100: var(--bc-neutral-100); + --ac-neutral-0: var(--bc-neutral-0); + --ac-primary-700: var(--bc-yellow-700); + --ac-primary-600: var(--bc-yellow-600); + --ac-primary-500: var(--bc-yellow-500); + --ac-primary-400: var(--bc-yellow-400); + --ac-primary-300: var(--bc-yellow-300); + --ac-primary-200: var(--bc-yellow-200); + --ac-primary-100: var(--bc-yellow-100); + + /* mapped terrasos light */ + --sc-tag-filter-inner-shadow: 0 0 0; + --sc-tag-filter-outer-shadow: 0 0 0; + --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-100); + --sc-checkbox-or-radio-selector-stroke: var(--ac-neutral-200); + --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-0); + --sc-table-stroke: var(--ac-neutral-200); + --sc-table-surface-light: var(--ac-neutral-0); + --sc-table-surface-dark: var(--ac-neutral-100); + --sc-input-triangle-icon-disabled: var(--ac-neutral-400); + --sc-input-triangle-icon-default: var(--ac-primary-600); + --sc-input-background-disabled: var(--ac-neutral-200); + --sc-input-background-default: var(--ac-neutral-0); + --sc-tooltip-fill: var(--ac-neutral-0); + --sc-tooltip-outline: var(--ac-neutral-400); + --sc-tag-credit-category-text-icon: var(--ac-neutral-700); + --sc-tag-credit-category-500: var(--ac-primary-500); + --sc-tag-credit-category-300: var(--ac-primary-500); + --sc-tag-filter-stroke-selected: var(--ac-neutral-500); + --sc-tag-filter-stroke-unselected: var(--ac-neutral-200); + --sc-tag-filter-background-selected: var(--ac-neutral-100); + --sc-tag-filter-background-unselected: var(--ac-neutral-0); + --sc-tag-prefinance-text-icon: var(--ac-neutral-700); + --sc-tag-prefinance-600: var(--ac-primary-500); + --sc-tag-prefinance-500: var(--ac-primary-500); + --sc-tag-prefinance-400: var(--ac-primary-500); + --sc-tag-impact-text-icon: var(--ac-neutral-700); + --sc-tag-impact-background: var(--ac-primary-500); + --sc-tabs-tab-underline: var(--ac-primary-500); + --sc-button-outline-secondary-disabled: var(--ac-neutral-300); + --sc-button-surface-prefinance-600: var(--ac-neutral-700); + --sc-button-surface-prefinance-500: var(--ac-neutral-700); + --sc-button-surface-prefinance-400: var(--ac-neutral-700); + --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-100); + --sc-button-surface-standard-secondary-default: var(--ac-neutral-0); + --sc-button-surface-standard-primary-disabled: var(--ac-neutral-300); + --sc-button-surface-standard-secondary-hover: var(--ac-neutral-500); + --sc-button-text-icon-prefinance: var(--ac-neutral-700); + --sc-button-text-icon-disabled: var(--ac-neutral-300); + --sc-button-text-icon-dark: var(--ac-neutral-700); + --sc-button-text-icon-light: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-600: var(--ac-neutral-700); + --sc-gradient-heavy-gradient-500: var(--ac-neutral-700); + --sc-gradient-heavy-gradient-400: var(--ac-neutral-700); + --sc-gradient-lighter-gradient-500: var(--ac-neutral-500); + --sc-gradient-lighter-gradient-300: var(--ac-neutral-500); + --sc-icon-credibility-background: var(--ac-neutral-0); + --sc-icon-credibility-10-blue-green-gradient-600: var(--ac-primary-200); + --sc-icon-credibility-10-blue-green-gradient-500: var(--ac-primary-200); + --sc-icon-credibility-10-blue-green-gradient-400: var(--ac-primary-200); + --sc-icon-credibility-25-blue-green-gradient-600: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-500: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-400: var(--ac-primary-500); + --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-neutral-700); + --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-neutral-700); + --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-neutral-700); + --sc-icon-sdg-background: var(--ac-neutral-0); + --sc-icon-sdg-stroke-shadow: var(--ac-neutral-300); + --sc-icon-sdg-header: var(--ac-neutral-600); + --sc-icon-sdg-number: var(--ac-neutral-700); + --sc-icon-sdg-600: var(--ac-neutral-500); + --sc-icon-sdg-500: var(--ac-neutral-500); + --sc-icon-sdg-400: var(--ac-neutral-500); + --sc-icon-ecosystem-600: var(--ac-primary-600); + --sc-icon-ecosystem-500: var(--ac-primary-600); + --sc-icon-ecosystem-400: var(--ac-primary-600); + --sc-icon-standard-shade: var(--ac-primary-300); + --sc-icon-standard-disabled: var(--ac-neutral-400); + --sc-icon-standard-background: var(--ac-neutral-200); + --sc-icon-standard-success: var(--ac-success-400); + --sc-icon-standard-error: var(--ac-error-400); + --sc-icon-standard-light: var(--ac-neutral-0); + --sc-icon-standard-dark: var(--ac-primary-600); + --sc-card-credibility-diagonal-background: var(--ac-neutral-100); + --sc-card-standard-header-background: var(--ac-neutral-200); + --sc-card-standard-stroke: var(--ac-neutral-300); + --sc-card-standard-background: var(--ac-neutral-0); + --sc-surface-page-background-light: var(--ac-neutral-0); + --sc-surface-stroke: var(--ac-neutral-300); + --sc-surface-page-background-default: var(--ac-neutral-100); + --sc-text-over-image: var(--ac-neutral-0); + --sc-text-error: var(--ac-error-500); + --sc-text-disabled: var(--ac-neutral-400); + --sc-text-sub-header: var(--ac-neutral-400); + --sc-text-link: var(--ac-primary-600); + --sc-text-header: var(--ac-neutral-700); + --sc-text-paragraph: var(--ac-neutral-500); } .dark { - --brand-400: 123 199 150; - --brand-300: 185 225 199; - --brand-200: 220 240 227; - --brand-100: 79 181 115; + --brand-400: 255 205 0; + --brand-300: 255 230 126; + --brand-200: 255 241 182; + --brand-100: 189 154 17; --grey-0: 0 0 0; --grey-100: 32 32 32; @@ -63,15 +209,15 @@ --grey-600: 250 250 250; --grey-700: 255 255 255; - --warning-400: 255 211 101; - --warning-300: 255 231 173; - --warning-200: 255 243 214; - --warning-100: 255 196 50; + --warning-400: 255 205 0; + --warning-300: 255 223 88; + --warning-200: 255 241 182; + --warning-100: 255 250 230; - --error-400: 230 115 92; - --error-300: 242 181 168; - --error-200: 248 218 212; - --error-100: 255 69 38; + --error-400: 255 223 88; + --error-300: 255 241 182; + --error-200: 255 250 230; + --error-100: 255 205 0; --blue-400: 109 155 219; --blue-300: 177 202 236; @@ -84,5 +230,94 @@ --purple-300: 187 195 210; --purple-200: 128 142 171; --purple-100: 86 104 143; + + + /* mapped terrasos dark */ + --sc-tag-filter-inner-shadow: 255 255 255; + --sc-tag-filter-outer-shadow: 255 255 255; + --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-600); + --sc-checkbox-or-radio-selector-stroke: var(--ac-neutral-500); + --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-700); + --sc-table-stroke: var(--ac-neutral-500); + --sc-table-surface-light: var(--ac-neutral-700); + --sc-table-surface-dark: var(--ac-neutral-600); + --sc-input-triangle-icon-disabled: var(--ac-neutral-300); + --sc-input-triangle-icon-default: var(--ac-primary-500); + --sc-input-background-disabled: var(--ac-neutral-500); + --sc-input-background-default: var(--ac-neutral-700); + --sc-tooltip-fill: var(--ac-neutral-700); + --sc-tooltip-outline: var(--ac-neutral-100); + --sc-tag-credit-category-text-icon: var(--ac-neutral-700); + --sc-tag-credit-category-500: var(--ac-primary-500); + --sc-tag-credit-category-300: var(--ac-primary-500); + --sc-tag-filter-stroke-selected: var(--ac-neutral-0); + --sc-tag-filter-stroke-unselected: var(--ac-neutral-400); + --sc-tag-filter-background-selected: var(--ac-neutral-500); + --sc-tag-filter-background-unselected: var(--ac-neutral-600); + --sc-tag-prefinance-text-icon: var(--ac-neutral-700); + --sc-tag-prefinance-600: var(--ac-primary-500); + --sc-tag-prefinance-500: var(--ac-primary-500); + --sc-tag-prefinance-400: var(--ac-primary-500); + --sc-tag-impact-text-icon: var(--ac-neutral-700); + --sc-tag-impact-background: var(--ac-primary-500); + --sc-tabs-tab-underline: var(--ac-primary-500); + --sc-button-outline-secondary-disabled: var(--ac-neutral-300); + --sc-button-surface-prefinance-600: var(--ac-neutral-700); + --sc-button-surface-prefinance-500: var(--ac-neutral-700); + --sc-button-surface-prefinance-400: var(--ac-neutral-700); + --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-600); + --sc-button-surface-standard-secondary-default: var(--ac-neutral-700); + --sc-button-surface-standard-primary-disabled: var(--ac-neutral-500); + --sc-button-surface-standard-secondary-hover: var(--ac-neutral-200); + --sc-button-text-icon-prefinance: var(--ac-neutral-700); + --sc-button-text-icon-disabled: var(--ac-neutral-500); + --sc-button-text-icon-dark: var(--ac-neutral-0); + --sc-button-text-icon-light: var(--ac-neutral-700); + --sc-gradient-heavy-gradient-600: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-500: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-400: var(--ac-neutral-0); + --sc-gradient-lighter-gradient-500: var(--ac-neutral-0); + --sc-gradient-lighter-gradient-300: var(--ac-neutral-0); + --sc-icon-credibility-background: var(--ac-neutral-700); + --sc-icon-credibility-10-blue-green-gradient-600: var(--ac-primary-500); + --sc-icon-credibility-10-blue-green-gradient-500: var(--ac-primary-500); + --sc-icon-credibility-10-blue-green-gradient-400: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-600: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-500: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-400: var(--ac-primary-500); + --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-neutral-0); + --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-neutral-0); + --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-neutral-0); + --sc-icon-sdg-background: var(--ac-neutral-700); + --sc-icon-sdg-stroke-shadow: var(--ac-neutral-500); + --sc-icon-sdg-header: var(--ac-neutral-100); + --sc-icon-sdg-number: var(--ac-neutral-0); + --sc-icon-sdg-600: var(--ac-neutral-500); + --sc-icon-sdg-500: var(--ac-neutral-500); + --sc-icon-sdg-400: var(--ac-neutral-500); + --sc-icon-ecosystem-600: var(--ac-primary-400); + --sc-icon-ecosystem-500: var(--ac-primary-400); + --sc-icon-ecosystem-400: var(--ac-primary-400); + --sc-icon-standard-shade: var(--ac-primary-500); + --sc-icon-standard-disabled: var(--ac-neutral-200); + --sc-icon-standard-background: var(--ac-neutral-500); + --sc-icon-standard-success: var(--ac-success-400); + --sc-icon-standard-error: var(--ac-error-400); + --sc-icon-standard-light: var(--ac-primary-300); + --sc-icon-standard-dark: var(--ac-primary-300); + --sc-card-credibility-diagonal-background: var(--ac-neutral-600); + --sc-card-standard-header-background: var(--ac-neutral-600); + --sc-card-standard-stroke: var(--ac-neutral-500); + --sc-card-standard-background: var(--ac-neutral-700); + --sc-surface-page-background-light: var(--ac-neutral-600); + --sc-surface-stroke: var(--ac-neutral-500); + --sc-surface-page-background-default: var(--ac-neutral-700); + --sc-text-over-image: var(--ac-neutral-0); + --sc-text-error: var(--ac-error-400); + --sc-text-disabled: var(--ac-neutral-300); + --sc-text-sub-header: var(--ac-neutral-300); + --sc-text-link: var(--ac-primary-500); + --sc-text-header: var(--ac-neutral-0); + --sc-text-paragraph: var(--ac-neutral-200); } }