diff --git a/.gitignore b/.gitignore index c620990730c..7c5fc7e0ea0 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ schema.graphql lerna.json .stormTests *storybook.log +.normalizedFigmaExport.json # TODO remove after moving traffic splitting config to WPC gateway.*.json diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss index 49331b8e82a..37bfacb9cc4 100644 --- a/apps/admin/src/App.scss +++ b/apps/admin/src/App.scss @@ -1,88 +1,9 @@ -// OLD +// OLD - Will probably be removed. @import "~@webiny/app-serverless-cms/styles.scss"; // NEW +// Base styles. @import "~@webiny/admin-ui/styles.scss"; -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 14.5 95.6% 55.9%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 8px; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; - } -} - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} +// The default theme. Learn more: https://webiny.link/admin-themes. +@import "~@webiny/admin-ui/theme.scss"; diff --git a/package.json b/package.json index 99fee203356..f2121955399 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,8 @@ "webiny": "./node_modules/.bin/webiny", "wby": "./node_modules/.bin/wby", "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook", - "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook" + "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook", + "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js" }, "husky": { "hooks": { diff --git a/packages/admin-ui/.storybook/preview.ts b/packages/admin-ui/.storybook/preview.ts index 7925c2c61c6..2aef0f83262 100644 --- a/packages/admin-ui/.storybook/preview.ts +++ b/packages/admin-ui/.storybook/preview.ts @@ -1,6 +1,6 @@ import type { Preview } from "@storybook/react"; -import "../src/styles.scss"; +import "../src/theme.scss"; const preview: Preview = { parameters: { diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md new file mode 100644 index 00000000000..2938c866cdb --- /dev/null +++ b/packages/admin-ui/DEVELOPMENT.md @@ -0,0 +1,24 @@ +# Overview +This document covers different aspects of the development process for the `@webiny/admin-ui` package. + +## Tailwind CSS +Webiny's Admin app uses Tailwind CSS for styling. + +### Tailwind Configuration +Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section. + +### Default Theme +One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). + +But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section). + +### Figma To Code +Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin. + +Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root: + +```bash +yarn webiny-admin-import-from-figma +``` + +This will generate a new `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file. diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md index ec7f16ff73e..6d1a06ff2b4 100644 --- a/packages/admin-ui/README.md +++ b/packages/admin-ui/README.md @@ -1,15 +1,10 @@ -# @webiny/admin-ui -[![](https://img.shields.io/npm/dw/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui) -[![](https://img.shields.io/npm/v/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui) -[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -## Install -``` -npm install --save @webiny/admin-ui -``` - -Or if you prefer yarn: -``` -yarn add @webiny/admin-ui -``` +# `@webiny/admin-ui` + +This package contains React components and styles for Webiny's Admin app. + +> [!NOTE] +> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package. + + + + \ No newline at end of file diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index 811476a9118..e752c799ea8 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -41,9 +41,11 @@ "@types/react": "18.2.79", "@webiny/cli": "0.0.0", "@webiny/project-utils": "0.0.0", + "chalk": "^4.1.0", "css-loader": "^6.10.0", "file-loader": "6.2.0", "postcss-loader": "^6.2.1", + "prettier": "^2.8.3", "rimraf": "^5.0.5", "sass": "1.44.0", "storybook": "7.6.20", diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js new file mode 100644 index 00000000000..6688b8ad4bd --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma.js @@ -0,0 +1,53 @@ +const fs = require("fs"); +const { green } = require("chalk"); +const path = require("path"); +const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json"); +const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport"); +const { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme"); +const { createThemeScss } = require("./importFromFigma/createThemeScss"); +const { formatCode } = require("./importFromFigma/formatCode"); + +const saveFileAndFormat = async (filePath, content) => { + fs.writeFileSync(filePath, content); + await formatCode(filePath); +}; + +(async () => { + const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport); + const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport); + const stylesScss = createThemeScss(normalizedFigmaExport); + + const paths = { + cwd: process.cwd(), + normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"), + createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"), + stylesScss: path.join(__dirname, "../src/theme.scss") + }; + + console.log("Storing..."); + console.log( + `‣ normalized Figma export (${green( + path.relative(paths.cwd, paths.normalizedFigmaExport) + )}).` + ); + console.log( + `‣ Tailwind config theme (${green( + path.relative(paths.cwd, paths.createTailwindConfigTheme) + )}).` + ); + console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`); + + await saveFileAndFormat( + paths.normalizedFigmaExport, + JSON.stringify(normalizedFigmaExport, null, 2) + ); + + await saveFileAndFormat( + paths.createTailwindConfigTheme, + `module.exports = ${JSON.stringify(tailwindConfigTheme, null, 2)};` + ); + + await saveFileAndFormat(paths.stylesScss, stylesScss); + + console.log("Done."); +})(); diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js new file mode 100644 index 00000000000..4839c48035a --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js @@ -0,0 +1,169 @@ +const createTailwindConfigTheme = normalizedFigmaExport => { + return { + backgroundColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "backgroundColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `hsl(var(--bg-${color}-default))` + }; + } + + acc[color][variant] = `hsl(var(--bg-${variantName}))`; + } + return acc; + }, {}), + borderColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `hsl(var(--border-${color}-default))` + }; + } + + acc[color][variant] = `hsl(var(--border-${variantName}))`; + } + return acc; + }, {}), + borderRadius: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderRadius") { + acc[variantName] = `var(--radius-${variantName})`; + } + return acc; + }, {}), + borderWidth: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "borderWidth") { + acc[variantName] = `var(--border-width-${variantName})`; + } + return acc; + }, {}), + fill: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "fill") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `hsl(var(--fill-${color}-default))` + }; + } + + acc[color][variant] = `hsl(var(--fill-${variantName}))`; + } + return acc; + }, {}), + + // Not in Figma export, so we're manually setting the values here. + fontSize: { + h1: [ + "var(--text-h1)", + { + lineHeight: "var(--text-h1-leading)", + letterSpacing: "var(--text-h1-tracking)" + } + ], + h2: [ + "var(--text-h2)", + { + lineHeight: "var(--text-h2-leading)", + letterSpacing: "var(--text-h2-tracking)" + } + ], + h3: [ + "var(--text-h3)", + { + lineHeight: "var(--text-h3-leading)", + letterSpacing: "var(--text-h3-tracking)" + } + ], + h4: [ + "var(--text-h4)", + { + lineHeight: "var(--text-h4-leading)", + letterSpacing: "var(--text-h4-tracking)" + } + ], + h5: [ + "var(--text-h5)", + { + lineHeight: "var(--text-h5-leading)", + letterSpacing: "var(--text-h5-tracking)" + } + ], + h6: [ + "var(--text-h6)", + { + lineHeight: "var(--text-h6-leading)", + letterSpacing: "var(--text-h6-tracking)" + } + ], + xl: [ + "var(--text-xl)", + { + lineHeight: "var(--text-xl-leading)", + letterSpacing: "var(--text-xl-tracking)" + } + ], + lg: [ + "var(--text-lg)", + { + lineHeight: "var(--text-lg-leading)", + letterSpacing: "var(--text-lg-tracking)" + } + ], + md: [ + "var(--text-md)", + { + lineHeight: "var(--text-md-leading)", + letterSpacing: "var(--text-md-tracking)" + } + ], + sm: [ + "var(--text-sm)", + { + lineHeight: "var(--text-sm-leading)", + letterSpacing: "var(--text-sm-tracking)" + } + ] + }, + + margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "margin") { + acc[variantName] = `var(--margin-${variantName})`; + } + return acc; + }, {}), + padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "padding") { + acc[variantName] = `var(--padding-${variantName})`; + } + return acc; + }, {}), + shadow: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "shadow") { + acc[variantName] = `var(--shadow-${variantName})`; + } + return acc; + }, {}), + spacing: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "spacing") { + acc[variantName] = `var(--spacing-${variantName})`; + } + return acc; + }, {}), + textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => { + if (type === "textColor") { + const [color, variant] = variantName.split("-"); + if (!acc[color]) { + acc[color] = { + DEFAULT: `hsl(var(--text-${color}-default))` + }; + } + + acc[color][variant] = `hsl(var(--text-${variantName}))`; + } + return acc; + }, {}) + }; +}; + +module.exports = { createTailwindConfigTheme }; diff --git a/packages/admin-ui/scripts/importFromFigma/createThemeScss.js b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js new file mode 100644 index 00000000000..f0c2867714e --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js @@ -0,0 +1,224 @@ +const fs = require("fs"); + +const createThemeScss = normalizedFigmaExport => { + // Generate `theme.scss` file. + let stylesScss = fs.readFileSync(__dirname + "/templates/theme.scss.txt", "utf8"); + + // 1. Background color. + { + let currentBgColorGroup = null; + const bgColors = normalizedFigmaExport + .filter(item => item.type === "backgroundColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--bg-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentBgColorGroup) { + currentBgColorGroup = colorGroup; + return cssVar; + } + + if (!currentBgColorGroup || currentBgColorGroup !== colorGroup) { + currentBgColorGroup = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{BACKGROUND_COLOR}", bgColors.join("\n")); + } + + // 2. Border color. + { + let currentBorderColor = null; + const borderColors = normalizedFigmaExport + .filter(item => item.type === "borderColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--border-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentBorderColor) { + currentBorderColor = colorGroup; + return cssVar; + } + + if (!currentBorderColor || currentBorderColor !== colorGroup) { + currentBorderColor = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{BORDER_COLOR}", borderColors.join("\n")); + } + + // 3. Border radius. + { + const borderRadius = normalizedFigmaExport + .filter(item => item.type === "borderRadius") + .map(variable => { + return `--radius-${variable.variantName}: ${variable.resolvedValue}px;`; + }); + + stylesScss = stylesScss.replace("{BORDER_RADIUS}", borderRadius.join("\n")); + } + + // 4. Border width. + { + const borderWidth = normalizedFigmaExport + .filter(item => item.type === "borderWidth") + .map( + variable => `--border-width-${variable.variantName}: ${variable.resolvedValue}px;` + ); + + stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n")); + } + + // 5. Fill. + { + let currentFillColorGroup = null; + const fillColors = normalizedFigmaExport + .filter(item => item.type === "fill") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--fill-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentFillColorGroup) { + currentFillColorGroup = colorGroup; + return cssVar; + } + + if (!currentFillColorGroup || currentFillColorGroup !== colorGroup) { + currentFillColorGroup = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{FILL}", fillColors.join("\n")); + } + + // 6. Font. + { + // Font is not in Figma, we're manually setting the values here. + stylesScss = stylesScss.replace("{FONT}", `--font-sans: 'Inter', sans-serif;`); + } + + // 7. Margin. + { + const margin = normalizedFigmaExport + .filter(item => item.type === "margin") + .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n")); + } + + // 8. Padding. + { + const padding = normalizedFigmaExport + .filter(item => item.type === "padding") + .map(variable => `--padding-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{PADDING}", padding.join("\n")); + } + + // 9. Shadow. + { + const shadow = normalizedFigmaExport + .filter(item => item.type === "shadow") + .map(variable => `--shadow-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{SHADOW}", shadow.join("\n")); + } + + // 10. Spacing. + { + const spacing = normalizedFigmaExport + .filter(item => item.type === "spacing") + .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`); + + stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n")); + } + + // 11. Text color. + { + let currentTextColor = null; + const textColors = normalizedFigmaExport + .filter(item => item.type === "textColor") + .map(variable => { + const [colorGroup] = variable.variantName.split("-"); + const cssVar = `--text-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`; + + if (!currentTextColor) { + currentTextColor = colorGroup; + return cssVar; + } + + if (!currentTextColor || currentTextColor !== colorGroup) { + currentTextColor = colorGroup; + return ["", cssVar]; + } + return cssVar; + }) + .flat(); + + stylesScss = stylesScss.replace("{TEXT_COLOR}", textColors.join("\n")); + } + + // 12. Text size. + { + // Not in Figma export, so we're manually setting the values here. + stylesScss = stylesScss.replace( + "{TEXT_SIZE}", + [ + "// Headings.", + "--text-h1: 3rem;", + "--text-h1-leading: 3.75rem;", + "--text-h1-tracking: -2%;", + "", + "--text-h2: 2.25rem;", + "--text-h2-leading: 2.75rem;", + "--text-h2-tracking: -2%;", + "", + "--text-h3: 1.875rem;", + "--text-h3-leading: 2.375rem;", + "--text-h3-tracking: initial;", + "", + "--text-h4: 1.25rem;", + "--text-h4-leading: 1.875rem;", + "--text-h4-tracking: initial;", + "", + "--text-h5: 1rem;", + "--text-h5-leading: 1.5rem;", + "--text-h5-tracking: initial;", + "", + "--text-h6: 0.875rem;", + "--text-h6-leading: 1.25rem;", + "--text-h6-tracking: initial;", + "", + "// Text.", + "--text-xl: 1.25rem;", + "--text-xl-leading: 1.875rem;", + "--text-xl-tracking: initial;", + "", + "--text-lg: 1rem;", + "--text-lg-leading: 1.5rem;", + "--text-lg-tracking: initial;", + "", + "--text-md: 0.875rem;", + "--text-md-leading: 1.375rem;", + "--text-md-tracking: initial;", + "", + "--text-sm: 0.75rem;", + "--text-sm-leading: 1.125rem;", + "--text-sm-tracking: initial;" + ].join("\n") + ); + } + return stylesScss; +}; + +module.exports = { createThemeScss }; diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json new file mode 100644 index 00000000000..fbfc7c65593 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json @@ -0,0 +1,3255 @@ +{ + "id": "VariableCollectionId:37:6", + "name": "Alias tokens", + "modes": { + "37:2": "Mode 1" + }, + "variableIds": [ + "VariableID:39:112", + "VariableID:1141:3695", + "VariableID:39:113", + "VariableID:62:2199", + "VariableID:1141:3698", + "VariableID:39:116", + "VariableID:39:117", + "VariableID:39:114", + "VariableID:39:115", + "VariableID:39:118", + "VariableID:39:119", + "VariableID:1141:4555", + "VariableID:39:120", + "VariableID:841:778", + "VariableID:841:783", + "VariableID:39:121", + "VariableID:39:122", + "VariableID:1141:4556", + "VariableID:39:123", + "VariableID:841:779", + "VariableID:841:784", + "VariableID:835:90", + "VariableID:835:91", + "VariableID:1141:4557", + "VariableID:835:92", + "VariableID:841:780", + "VariableID:841:785", + "VariableID:52:22", + "VariableID:52:23", + "VariableID:851:2608", + "VariableID:52:24", + "VariableID:891:81144", + "VariableID:52:25", + "VariableID:52:28", + "VariableID:52:29", + "VariableID:52:30", + "VariableID:52:31", + "VariableID:52:32", + "VariableID:529:17319", + "VariableID:1335:7762", + "VariableID:183:122214", + "VariableID:1335:7763", + "VariableID:1335:7764", + "VariableID:1152:342", + "VariableID:849:906", + "VariableID:183:122215", + "VariableID:183:122216", + "VariableID:183:122217", + "VariableID:183:122218", + "VariableID:1141:6772", + "VariableID:183:122219", + "VariableID:849:783", + "VariableID:849:784", + "VariableID:52:18", + "VariableID:81:1904", + "VariableID:81:1905", + "VariableID:52:19", + "VariableID:79:37", + "VariableID:79:38", + "VariableID:79:39", + "VariableID:79:40", + "VariableID:79:235", + "VariableID:79:239", + "VariableID:80:242", + "VariableID:80:243", + "VariableID:80:244", + "VariableID:80:245", + "VariableID:59:8", + "VariableID:59:9", + "VariableID:1141:4558", + "VariableID:59:10", + "VariableID:841:781", + "VariableID:841:786", + "VariableID:59:11", + "VariableID:59:12", + "VariableID:1141:4559", + "VariableID:59:13", + "VariableID:841:782", + "VariableID:841:787", + "VariableID:1148:687", + "VariableID:79:7", + "VariableID:1148:690", + "VariableID:1148:689", + "VariableID:528:17123", + "VariableID:1516:33864", + "VariableID:528:17124", + "VariableID:1516:33861", + "VariableID:1516:33862", + "VariableID:528:17125", + "VariableID:1516:33863", + "VariableID:528:17126", + "VariableID:528:17127", + "VariableID:528:17128", + "VariableID:1148:688", + "VariableID:79:8", + "VariableID:79:12", + "VariableID:79:236", + "VariableID:79:237", + "VariableID:79:238", + "VariableID:1516:33865", + "VariableID:1516:15576", + "VariableID:107:716", + "VariableID:1516:33674", + "VariableID:528:17129", + "VariableID:528:17130", + "VariableID:528:17131", + "VariableID:528:17132", + "VariableID:528:17133", + "VariableID:528:17134", + "VariableID:107:713", + "VariableID:1516:33668", + "VariableID:1516:33671", + "VariableID:79:232", + "VariableID:1516:33672", + "VariableID:79:233", + "VariableID:79:234", + "VariableID:203:4497", + "VariableID:95:1557", + "VariableID:849:780", + "VariableID:95:1558", + "VariableID:846:3890", + "VariableID:95:1559", + "VariableID:1227:19184", + "VariableID:1227:21660", + "VariableID:1227:21661", + "VariableID:95:1560" + ], + "variables": [ + { + "id": "VariableID:39:112", + "name": "backgroundColor/backgroundColor-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:113", + "name": "backgroundColor/backgroundColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:114", + "name": "backgroundColor/backgroundColor-neutral-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:118:19505" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.9843137264251709, + "b": 0.9843137264251709, + "a": 1 + }, + "alias": "VariableID:118:19505", + "aliasName": "colors/colors-neutral-50" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:115", + "name": "backgroundColor/backgroundColor-neutral-base", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:823:2" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:823:2", + "aliasName": "colors/colors-neutral-0" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:116", + "name": "backgroundColor/backgroundColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:117", + "name": "backgroundColor/backgroundColor-neutral-light", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:49" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9686274528503418, + "g": 0.9725490212440491, + "b": 0.9764705896377563, + "a": 1 + }, + "alias": "VariableID:39:49", + "aliasName": "colors/colors-neutral-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:118", + "name": "backgroundColor/backgroundColor-primary-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:119", + "name": "backgroundColor/backgroundColor-primary-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:120", + "name": "backgroundColor/backgroundColor-primary-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:121", + "name": "backgroundColor/backgroundColor-secondary-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:122", + "name": "backgroundColor/backgroundColor-secondary-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:39:123", + "name": "backgroundColor/backgroundColor-secondary-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:18", + "name": "borderRadius/borderRadius-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:133" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:39:133", + "aliasName": "radius/dimensions-border-radius-2" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:19", + "name": "borderRadius/borderRadius-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:134" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:39:134", + "aliasName": "radius/dimensions-border-radius-4" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:22", + "name": "textColor/textColor-neutral-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:23", + "name": "textColor/textColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:24", + "name": "textColor/textColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:25", + "name": "textColor/textColor-neutral-light", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:124" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:39:124", + "aliasName": "colors/white-500" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:28", + "name": "textColor/textColor-accent-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:29", + "name": "textColor/textColor-accent-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:30", + "name": "textColor/textColor-accent-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:31", + "name": "textColor/textColor-sucess-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:52:32", + "name": "textColor/textColor-sucess-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:8", + "name": "backgroundColor/backgroundColor-destructive-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:9", + "name": "backgroundColor/backgroundColor-destructive-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:43" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8745098114013672, + "g": 0.3803921639919281, + "b": 0.3803921639919281, + "a": 1 + }, + "alias": "VariableID:38:43", + "aliasName": "colors/colors-destructive-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:10", + "name": "backgroundColor/backgroundColor-destructive-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:40" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9372549057006836, + "b": 0.9372549057006836, + "a": 1 + }, + "alias": "VariableID:38:40", + "aliasName": "colors/colors-destructive-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:11", + "name": "backgroundColor/backgroundColor-warning-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:35" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9843137264251709, + "g": 0.8117647171020508, + "b": 0.29019609093666077, + "a": 1 + }, + "alias": "VariableID:38:35", + "aliasName": "colors/colors-warning-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:12", + "name": "backgroundColor/backgroundColor-warning-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:33" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.8745098114013672, + "b": 0.529411792755127, + "a": 1 + }, + "alias": "VariableID:38:33", + "aliasName": "colors/colors-warning-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:59:13", + "name": "backgroundColor/backgroundColor-warning-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:31" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9803921580314636, + "b": 0.929411768913269, + "a": 1 + }, + "alias": "VariableID:38:31", + "aliasName": "colors/colors-warning-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:62:2199", + "name": "backgroundColor/backgroundColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:51" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8909133672714233, + "g": 0.898869514465332, + "b": 0.9227376580238342, + "a": 1 + }, + "alias": "VariableID:39:51", + "aliasName": "colors/colors-neutral-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:7", + "name": "dimension/dimension-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:8", + "name": "dimension/dimension-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:12", + "name": "dimension/dimension-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:37", + "name": "borderRadius/borderRadius-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:135" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:39:135", + "aliasName": "radius/dimensions-border-radius-8" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:38", + "name": "borderRadius/borderRadius-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:136" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:39:136", + "aliasName": "radius/dimensions-border-radius-16" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:39", + "name": "borderRadius/borderRadius-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:137" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:39:137", + "aliasName": "radius/dimensions-border-radius-24" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:40", + "name": "borderRadius/borderRadius-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:52:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 36, + "alias": "VariableID:52:21", + "aliasName": "radius/dimensions-border-radius-36" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:232", + "name": "padding/padding-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:233", + "name": "padding/padding-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:234", + "name": "padding/padding-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:235", + "name": "shadow/shadow-flat", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 0 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:236", + "name": "dimension/dimension-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:237", + "name": "dimension/dimension-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:238", + "name": "dimension/dimension-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:79:239", + "name": "shadow/shadow-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 4 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:242", + "name": "shadow/shadow-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 8 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:243", + "name": "shadow/shadow-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 16 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:244", + "name": "shadow/shadow-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 24 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:80:245", + "name": "shadow/shadow-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": 48 + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": null + } + }, + "scopes": ["EFFECT_FLOAT"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:81:1904", + "name": "borderWidth/borderWidth-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:59:20" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 1, + "alias": "VariableID:59:20", + "aliasName": "borderWidth/dimensions-border-width-1" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:81:1905", + "name": "borderWidth/borderWidth-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:59:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:59:21", + "aliasName": "borderWidth/dimensions-border-width-2" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1557", + "name": "fill/fill-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:56" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.1882352977991104, + "g": 0.2078431397676468, + "b": 0.23529411852359772, + "a": 1 + }, + "alias": "VariableID:39:56", + "aliasName": "colors/colors-neutral-800" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1558", + "name": "fill/fill-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1559", + "name": "fill/fill-accent-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:95:1560", + "name": "fill/fill-neutral-base", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:124" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "alias": "VariableID:39:124", + "aliasName": "colors/white-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:107:713", + "name": "padding/padding-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:107:716", + "name": "padding/padding-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122214", + "name": "borderColor/borderColor-neutral-black", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:57" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.09803921729326248, + "g": 0.10980392247438431, + "b": 0.125490203499794, + "a": 1 + }, + "alias": "VariableID:39:57", + "aliasName": "colors/colors-neutral-900" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122215", + "name": "borderColor/borderColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122216", + "name": "borderColor/borderColor-neutral-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122217", + "name": "borderColor/borderColor-neutral-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:49" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9686274528503418, + "g": 0.9725490212440491, + "b": 0.9764705896377563, + "a": 1 + }, + "alias": "VariableID:39:49", + "aliasName": "colors/colors-neutral-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122218", + "name": "borderColor/borderColor-accent-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:17" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9803921580314636, + "g": 0.34117648005485535, + "b": 0.13725490868091583, + "a": 1 + }, + "alias": "VariableID:38:17", + "aliasName": "colors/colors-primary-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:183:122219", + "name": "borderColor/borderColor-accent-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:4" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9529722929000854, + "b": 0.9474395513534546, + "a": 1 + }, + "alias": "VariableID:37:4", + "aliasName": "colors/colors-primary-100" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:203:4497", + "name": "padding/padding-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17123", + "name": "spacing/spacing-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17124", + "name": "spacing/spacing-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17125", + "name": "spacing/spacing-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17126", + "name": "spacing/spacing-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17127", + "name": "spacing/spacing-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17128", + "name": "spacing/spacing-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4495" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 48, + "alias": "VariableID:203:4495", + "aliasName": "space/dimensions-fixed-48" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17129", + "name": "margin/margin-xs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4487" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 4, + "alias": "VariableID:203:4487", + "aliasName": "space/dimensions-fixed-4" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17130", + "name": "margin/margin-sm", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4488" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 8, + "alias": "VariableID:203:4488", + "aliasName": "space/dimensions-fixed-8" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17131", + "name": "margin/margin-md", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4492" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 16, + "alias": "VariableID:203:4492", + "aliasName": "space/dimensions-fixed-16" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17132", + "name": "margin/margin-lg", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4493" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 24, + "alias": "VariableID:203:4493", + "aliasName": "space/dimensions-fixed-24" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17133", + "name": "margin/margin-xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:528:17134", + "name": "margin/margin-xxl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4494" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 32, + "alias": "VariableID:203:4494", + "aliasName": "space/dimensions-fixed-32" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:529:17319", + "name": "textColor/textColor-sucess-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:90", + "name": "backgroundColor/backgroundColor-success-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:91", + "name": "backgroundColor/backgroundColor-success-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:835:92", + "name": "backgroundColor/backgroundColor-success-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:23" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8705882430076599, + "g": 0.9647058844566345, + "b": 0.9490196108818054, + "a": 1 + }, + "alias": "VariableID:38:23", + "aliasName": "colors/colors-success-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:778", + "name": "backgroundColor/backgroundColor-primary-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:19" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7764706015586853, + "g": 0.20000000298023224, + "b": 0.0235294122248888, + "a": 1 + }, + "alias": "VariableID:38:19", + "aliasName": "colors/colors-primary-700" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:779", + "name": "backgroundColor/backgroundColor-secondary-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:28" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.572549045085907, + "b": 0.4313725531101227, + "a": 1 + }, + "alias": "VariableID:38:28", + "aliasName": "colors/colors-success-700" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:780", + "name": "backgroundColor/backgroundColor-success-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:824:7484" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.572549045085907, + "b": 0.4313725531101227, + "a": 1 + }, + "alias": "VariableID:824:7484", + "aliasName": "colors/colors-secondary-700" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:781", + "name": "backgroundColor/backgroundColor-destructive-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:45" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6745098233222961, + "g": 0.09019608050584793, + "b": 0.0941176488995552, + "a": 1 + }, + "alias": "VariableID:38:45", + "aliasName": "colors/colors-destructive-600" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:782", + "name": "backgroundColor/backgroundColor-warning-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:37" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7450980544090271, + "g": 0.5568627715110779, + "b": 0, + "a": 1 + }, + "alias": "VariableID:38:37", + "aliasName": "colors/colors-warning-700" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:783", + "name": "backgroundColor/backgroundColor-primary-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:21" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.5098039507865906, + "g": 0.12156862765550613, + "b": 0, + "a": 1 + }, + "alias": "VariableID:38:21", + "aliasName": "colors/colors-primary-900" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:784", + "name": "backgroundColor/backgroundColor-secondary-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:30" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.29019609093666077, + "b": 0.1921568661928177, + "a": 1 + }, + "alias": "VariableID:38:30", + "aliasName": "colors/colors-success-900" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:785", + "name": "backgroundColor/backgroundColor-success-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:824:7486" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.29019609093666077, + "b": 0.1921568661928177, + "a": 1 + }, + "alias": "VariableID:824:7486", + "aliasName": "colors/colors-secondary-900" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:786", + "name": "backgroundColor/backgroundColor-destructive-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:47" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.3960784375667572, + "g": 0.03529411926865578, + "b": 0.03529411926865578, + "a": 1 + }, + "alias": "VariableID:38:47", + "aliasName": "colors/colors-destructive-800" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:841:787", + "name": "backgroundColor/backgroundColor-warning-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:38" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.4274509847164154, + "g": 0.32156863808631897, + "b": 0.003921568859368563, + "a": 1 + }, + "alias": "VariableID:38:38", + "aliasName": "colors/colors-warning-800" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:846:3890", + "name": "fill/fill-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:780", + "name": "fill/fill-neutral-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:783", + "name": "borderColor/borderColor-destructive-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:784", + "name": "borderColor/borderColor-success-default", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:849:906", + "name": "borderColor/borderColor-neutral-strong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:851:2608", + "name": "textColor/textColor-neutral-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:53" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6138784885406494, + "g": 0.6435658931732178, + "b": 0.689746081829071, + "a": 1 + }, + "alias": "VariableID:39:53", + "aliasName": "colors/colors-neutral-500" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:891:81144", + "name": "textColor/textColor-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:52" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.7438521981239319, + "g": 0.7645292282104492, + "b": 0.7989909052848816, + "a": 1 + }, + "alias": "VariableID:39:52", + "aliasName": "colors/colors-neutral-400" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:3695", + "name": "backgroundColor/backgroundColor-neutral-xstrong", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:55" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.34716352820396423, + "g": 0.38350826501846313, + "b": 0.42792969942092896, + "a": 1 + }, + "alias": "VariableID:39:55", + "aliasName": "colors/colors-neutral-700" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:3698", + "name": "backgroundColor/backgroundColor-neutral-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:50" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9411764740943909, + "g": 0.9450980424880981, + "b": 0.9529411792755127, + "a": 1 + }, + "alias": "VariableID:39:50", + "aliasName": "colors/colors-neutral-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4555", + "name": "backgroundColor/backgroundColor-primary-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:15" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9882352948188782, + "g": 0.6666666865348816, + "b": 0.5686274766921997, + "a": 1 + }, + "alias": "VariableID:38:15", + "aliasName": "colors/colors-primary-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4556", + "name": "backgroundColor/backgroundColor-secondary-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:25" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.43921568989753723, + "g": 0.8588235378265381, + "b": 0.7803921699523926, + "a": 1 + }, + "alias": "VariableID:38:25", + "aliasName": "colors/colors-success-400" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4557", + "name": "backgroundColor/backgroundColor-success-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:24" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.6745098233222961, + "g": 0.9137254953384399, + "b": 0.8666666746139526, + "a": 1 + }, + "alias": "VariableID:38:24", + "aliasName": "colors/colors-success-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4558", + "name": "backgroundColor/backgroundColor-destructive-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:42" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9607843160629272, + "g": 0.5803921818733215, + "b": 0.572549045085907, + "a": 1 + }, + "alias": "VariableID:38:42", + "aliasName": "colors/colors-destructive-300" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:4559", + "name": "backgroundColor/backgroundColor-warning-disabled", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:32" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9960784316062927, + "g": 0.9333333373069763, + "b": 0.7529411911964417, + "a": 1 + }, + "alias": "VariableID:38:32", + "aliasName": "colors/colors-warning-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1141:6772", + "name": "borderColor/borderColor-accent-dimmed", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:37:9" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9921568632125854, + "g": 0.800000011920929, + "b": 0.7372549176216125, + "a": 1 + }, + "alias": "VariableID:37:9", + "aliasName": "colors/colors-primary-200" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:687", + "name": "dimension/dimension-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:688", + "name": "spacing/spacing-3xl", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4496" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 64, + "alias": "VariableID:203:4496", + "aliasName": "space/dimensions-fixed-64" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:689", + "name": "spacing/spacing-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1148:690", + "name": "spacing/spacing-none", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1148:691" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": "VariableID:1148:691", + "aliasName": "space/dimensions-fixed-0" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1152:342", + "name": "borderColor/borderColor-neutral-dark", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:39:54" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.4613589644432068, + "g": 0.5014801025390625, + "b": 0.5576497316360474, + "a": 1 + }, + "alias": "VariableID:39:54", + "aliasName": "colors/colors-neutral-600" + } + }, + "scopes": ["ALL_SCOPES"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:19184", + "name": "fill/fill-success", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:26" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0, + "g": 0.7490196228027344, + "b": 0.6196078658103943, + "a": 1 + }, + "alias": "VariableID:38:26", + "aliasName": "colors/colors-success-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:21660", + "name": "fill/fill-warning", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:35" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9843137264251709, + "g": 0.8117647171020508, + "b": 0.29019609093666077, + "a": 1 + }, + "alias": "VariableID:38:35", + "aliasName": "colors/colors-warning-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1227:21661", + "name": "fill/fill-destructive", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7762", + "name": "textColor/textColor-destructive-primary", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:44" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.8313725590705872, + "g": 0.1411764770746231, + "b": 0.1411764770746231, + "a": 1 + }, + "alias": "VariableID:38:44", + "aliasName": "colors/colors-destructive-500" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7763", + "name": "textColor/textColor-destructive-muted", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:42" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 0.9607843160629272, + "g": 0.5803921818733215, + "b": 0.572549045085907, + "a": 1 + }, + "alias": "VariableID:38:42", + "aliasName": "colors/colors-destructive-300" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1335:7764", + "name": "textColor/textColor-destructive-subtle", + "description": "", + "type": "COLOR", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:38:40" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": { + "r": 1, + "g": 0.9372549057006836, + "b": 0.9372549057006836, + "a": 1 + }, + "alias": "VariableID:38:40", + "aliasName": "colors/colors-destructive-100" + } + }, + "scopes": ["TEXT_FILL"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:15576", + "name": "padding/padding-xxs", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:4489" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 2, + "alias": "VariableID:203:4489", + "aliasName": "space/dimensions-fixed-2" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33668", + "name": "padding/padding-sm-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33669" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 10, + "alias": "VariableID:1516:33669", + "aliasName": "space/dimensions-fixed-10" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33671", + "name": "padding/padding-sm-extra", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5688" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 12, + "alias": "VariableID:203:5688", + "aliasName": "space/dimensions-fixed-12" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33672", + "name": "padding/padding-md-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5689" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 20, + "alias": "VariableID:203:5689", + "aliasName": "space/dimensions-fixed-20" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33674", + "name": "padding/padding-xs-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33670" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 6, + "alias": "VariableID:1516:33670", + "aliasName": "space/dimensions-fixed-6" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33861", + "name": "spacing/spacing-sm-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33669" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 10, + "alias": "VariableID:1516:33669", + "aliasName": "space/dimensions-fixed-10" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33862", + "name": "spacing/spacing-sm-extra", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5688" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 12, + "alias": "VariableID:203:5688", + "aliasName": "space/dimensions-fixed-12" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33863", + "name": "spacing/spacing-md-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:203:5689" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 20, + "alias": "VariableID:203:5689", + "aliasName": "space/dimensions-fixed-20" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33864", + "name": "spacing/spacing-xs-plus", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1516:33670" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 6, + "alias": "VariableID:1516:33670", + "aliasName": "space/dimensions-fixed-6" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + }, + { + "id": "VariableID:1516:33865", + "name": "padding/padding-none", + "description": "", + "type": "FLOAT", + "valuesByMode": { + "37:2": { + "type": "VARIABLE_ALIAS", + "id": "VariableID:1148:691" + } + }, + "resolvedValuesByMode": { + "37:2": { + "resolvedValue": 0, + "alias": "VariableID:1148:691", + "aliasName": "space/dimensions-fixed-0" + } + }, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "hiddenFromPublishing": false, + "codeSyntax": {} + } + ] +} diff --git a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js new file mode 100644 index 00000000000..d6ab4b73331 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js @@ -0,0 +1,53 @@ +function rgbToHsl(r, g, b) { + // Convert RGB values (0-255 range) to the range of 0-1 + r /= 255; + g /= 255; + b /= 255; + + const maxVal = Math.max(r, g, b); + const minVal = Math.min(r, g, b); + const delta = maxVal - minVal; + + let h = 0, + s = 0, + l = (maxVal + minVal) / 2; + + if (delta !== 0) { + s = delta / (1 - Math.abs(2 * l - 1)); + + if (maxVal === r) { + h = ((g - b) / delta) % 6; + } else if (maxVal === g) { + h = (b - r) / delta + 2; + } else { + h = (r - g) / delta + 4; + } + + h = Math.round(h * 60); // Convert to degrees + if (h < 0) { + h += 360; + } + } + + s = +(s * 100).toFixed(1); + l = +(l * 100).toFixed(1); + + return { h, s, l }; +} + +function figmaRgbaToHsla(figmaColor) { + const { r, g, b, a } = figmaColor; + + // Convert normalized RGBA to standard RGB (0-255) + const red = Math.round(r * 255); + const green = Math.round(g * 255); + const blue = Math.round(b * 255); + + // Get the HSL values + const { h, s, l } = rgbToHsl(red, green, blue); + + // Return the HSLA value + return { h, s, l, a }; +} + +module.exports = { figmaRgbaToHsla }; diff --git a/packages/admin-ui/scripts/importFromFigma/formatCode.js b/packages/admin-ui/scripts/importFromFigma/formatCode.js new file mode 100644 index 00000000000..3b851aaf12c --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/formatCode.js @@ -0,0 +1,14 @@ +const fs = require("fs"); +const prettier = require("prettier"); + +const formatCode = async filePath => { + const options = await prettier.resolveConfig(filePath); + const fileContentRaw = fs.readFileSync(filePath).toString("utf8"); + const fileContentFormatted = prettier.format(fileContentRaw, { + ...options, + filepath: filePath + }); + fs.writeFileSync(filePath, fileContentFormatted); +}; + +module.exports = { formatCode }; diff --git a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js new file mode 100644 index 00000000000..5dcac7e340b --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js @@ -0,0 +1,68 @@ +const aliasTokensExport = require("./exports/Alias tokens.json"); +const { figmaRgbaToHsla } = require("./figmaRgbaToHsla"); + +const VARIABLE_TYPES = [ + "backgroundColor", + "borderColor", + "fill", + "textColor", + "padding", + "shadow", + "spacing", + "margin", + "borderRadius", + "borderWidth" +]; + +const IGNORED_VARIABLE_TYPES = ["dimension"]; + +const isIgnoredVariableType = variableName => { + for (const type of IGNORED_VARIABLE_TYPES) { + if (variableName.startsWith(type + "/")) { + return true; + } + } + + return false; +}; + +const getVariableType = variableName => { + for (const type of VARIABLE_TYPES) { + if (variableName.startsWith(type + "/")) { + return type; + } + } + + throw new Error(`Unknown variable type for variable "${variableName}".`); +}; + +const normalizeFigmaExport = () => { + return aliasTokensExport.variables + .map(variable => { + const { aliasName, resolvedValue } = variable.resolvedValuesByMode["37:2"]; + + const [, variantName] = variable.name.match(/[a-zA-Z]*?\/[a-zA-Z]*?-(.*)/); + + if (isIgnoredVariableType(variable.name)) { + return null; + } + + const type = getVariableType(variable.name); + + return { + type, + name: variable.name, + aliasName, + hsla: figmaRgbaToHsla(resolvedValue), + variantName, + resolvedValue + }; + }) + .filter(Boolean) + .sort((variable1, variable2) => { + // Order by variable.name, from A to Z. + return variable1.name.localeCompare(variable2.name); + }); +}; + +module.exports = { normalizeFigmaExport }; diff --git a/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt new file mode 100644 index 00000000000..18d28fb4464 --- /dev/null +++ b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt @@ -0,0 +1,45 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); + +@layer base { + :root { + // Background colors. + {BACKGROUND_COLOR} + + // Border color. + {BORDER_COLOR} + + // Border radius. + {BORDER_RADIUS} + + // Border width. + {BORDER_WIDTH} + + // Fill. + {FILL} + + // Font. + {FONT} + + // Margin. + {MARGIN} + + // Padding. + {PADDING} + + // Shadow. + {SHADOW} + + // Spacing. + {SPACING} + + // Text color. + {TEXT_COLOR} + + // Text size. + {TEXT_SIZE} + } +} diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss index a973d113489..bcfea48aa09 100644 --- a/packages/admin-ui/src/styles.scss +++ b/packages/admin-ui/src/styles.scss @@ -1,84 +1,2 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 14.5 95.6% 55.9%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 8px; - - --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 8px; - } -} - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} +// Some global styles might end up here. +// We'll see how it goes. diff --git a/packages/admin-ui/src/theme.scss b/packages/admin-ui/src/theme.scss new file mode 100644 index 00000000000..38fc311d752 --- /dev/null +++ b/packages/admin-ui/src/theme.scss @@ -0,0 +1,209 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); + +@layer base { + :root { + // Background colors. + --bg-destructive-default: 0, 71%, 48.6%; + --bg-destructive-disabled: 1, 83.2%, 76.7%; + --bg-destructive-muted: 0, 66.3%, 62.7%; + --bg-destructive-strong: 0, 76.4%, 38.2%; + --bg-destructive-subtle: 0, 100%, 96.9%; + --bg-destructive-xstrong: 0, 83.6%, 21.6%; + + --bg-neutral-base: 0, 0%, 100%; + --bg-neutral-dark: 214, 12.3%, 11.2%; + --bg-neutral-dimmed: 220, 11.1%, 94.7%; + --bg-neutral-disabled: 220, 11.1%, 94.7%; + --bg-neutral-light: 210, 14.3%, 97.3%; + --bg-neutral-muted: 225, 16.7%, 90.6%; + --bg-neutral-strong: 219, 12.1%, 77.3%; + --bg-neutral-subtle: 180, 11.1%, 98.2%; + --bg-neutral-xstrong: 213, 10.1%, 38.8%; + + --bg-primary-default: 15, 95.6%, 55.9%; + --bg-primary-disabled: 14, 94.7%, 77.8%; + --bg-primary-muted: 14, 94.7%, 77.8%; + --bg-primary-strong: 14, 94.1%, 40%; + --bg-primary-subtle: 5, 100%, 97.5%; + --bg-primary-xstrong: 14, 100%, 25.5%; + + --bg-secondary-default: 170, 100%, 37.5%; + --bg-secondary-disabled: 169, 59.8%, 64.9%; + --bg-secondary-muted: 169, 59.8%, 64.9%; + --bg-secondary-strong: 165, 100%, 28.6%; + --bg-secondary-subtle: 170, 57.1%, 91.8%; + --bg-secondary-xstrong: 160, 100%, 14.5%; + + --bg-success-default: 170, 100%, 37.5%; + --bg-success-disabled: 168, 58.1%, 79.4%; + --bg-success-muted: 169, 59.8%, 64.9%; + --bg-success-strong: 165, 100%, 28.6%; + --bg-success-subtle: 170, 57.1%, 91.8%; + --bg-success-xstrong: 160, 100%, 14.5%; + + --bg-warning-default: 45, 95.7%, 63.7%; + --bg-warning-disabled: 45, 96.9%, 87.5%; + --bg-warning-muted: 45, 95.1%, 75.9%; + --bg-warning-strong: 45, 100%, 37.3%; + --bg-warning-subtle: 43, 100%, 96.5%; + --bg-warning-xstrong: 45, 98.2%, 21.6%; + + // Border color. + --border-accent-default: 15, 95.6%, 55.9%; + --border-accent-dimmed: 15, 94.2%, 86.5%; + --border-accent-subtle: 5, 100%, 97.5%; + + --border-destructive-default: 0, 71%, 48.6%; + + --border-neutral-black: 214, 12.3%, 11.2%; + --border-neutral-dark: 215, 9.6%, 51%; + --border-neutral-dimmed: 220, 11.1%, 94.7%; + --border-neutral-muted: 219, 12.1%, 77.3%; + --border-neutral-strong: 218, 10.7%, 65.3%; + --border-neutral-subtle: 210, 14.3%, 97.3%; + + --border-success-default: 170, 100%, 37.5%; + + // Border radius. + --radius-lg: 16px; + --radius-md: 8px; + --radius-sm: 4px; + --radius-xl: 24px; + --radius-xs: 2px; + --radius-xxl: 36px; + + // Border width. + --border-width-md: 2px; + --border-width-sm: 1px; + + // Fill. + --fill-accent-default: 15, 95.6%, 55.9%; + + --fill-destructive: 0, 71%, 48.6%; + + --fill-neutral-base: 0, 0%, 100%; + --fill-neutral-dark: 215, 11.1%, 21.2%; + --fill-neutral-disabled: 219, 12.1%, 77.3%; + --fill-neutral-strong: 218, 10.7%, 65.3%; + --fill-neutral-xstrong: 213, 10.1%, 38.8%; + + --fill-success: 170, 100%, 37.5%; + + --fill-warning: 45, 95.7%, 63.7%; + + // Font. + --font-sans: "Inter", sans-serif; + + // Margin. + --margin-lg: 24px; + --margin-md: 16px; + --margin-sm: 8px; + --margin-xl: 32px; + --margin-xs: 4px; + --margin-xxl: 32px; + + // Padding. + --padding-lg: 24px; + --padding-md: 16px; + --padding-md-plus: 20px; + --padding-none: 0px; + --padding-sm: 8px; + --padding-sm-extra: 12px; + --padding-sm-plus: 10px; + --padding-xl: 32px; + --padding-xs: 4px; + --padding-xs-plus: 6px; + --padding-xxl: 48px; + --padding-xxs: 2px; + + // Shadow. + --shadow-flat: 0px; + --shadow-lg: 16px; + --shadow-md: 8px; + --shadow-sm: 4px; + --shadow-xl: 24px; + --shadow-xxl: 48px; + + // Spacing. + --spacing-3xl: 64px; + --spacing-lg: 24px; + --spacing-md: 16px; + --spacing-md-plus: 20px; + --spacing-none: 0px; + --spacing-sm: 8px; + --spacing-sm-extra: 12px; + --spacing-sm-plus: 10px; + --spacing-xl: 32px; + --spacing-xs: 4px; + --spacing-xs-plus: 6px; + --spacing-xxl: 48px; + --spacing-xxs: 2px; + + // Text color. + --text-accent-muted: 14, 94.7%, 77.8%; + --text-accent-primary: 15, 95.6%, 55.9%; + --text-accent-subtle: 5, 100%, 97.5%; + + --text-destructive-muted: 1, 83.2%, 76.7%; + --text-destructive-primary: 0, 71%, 48.6%; + --text-destructive-subtle: 0, 100%, 96.9%; + + --text-neutral-dimmed: 219, 12.1%, 77.3%; + --text-neutral-disabled: 219, 12.1%, 77.3%; + --text-neutral-light: 0, 0%, 100%; + --text-neutral-muted: 218, 10.7%, 65.3%; + --text-neutral-primary: 214, 12.3%, 11.2%; + --text-neutral-strong: 213, 10.1%, 38.8%; + + --text-sucess-muted: 169, 59.8%, 64.9%; + --text-sucess-primary: 170, 100%, 37.5%; + --text-sucess-subtle: 170, 57.1%, 91.8%; + + // Text size. + // Headings. + --text-h1: 3rem; + --text-h1-leading: 3.75rem; + --text-h1-tracking: -2%; + + --text-h2: 2.25rem; + --text-h2-leading: 2.75rem; + --text-h2-tracking: -2%; + + --text-h3: 1.875rem; + --text-h3-leading: 2.375rem; + --text-h3-tracking: initial; + + --text-h4: 1.25rem; + --text-h4-leading: 1.875rem; + --text-h4-tracking: initial; + + --text-h5: 1rem; + --text-h5-leading: 1.5rem; + --text-h5-tracking: initial; + + --text-h6: 0.875rem; + --text-h6-leading: 1.25rem; + --text-h6-tracking: initial; + + // Text. + --text-xl: 1.25rem; + --text-xl-leading: 1.875rem; + --text-xl-tracking: initial; + + --text-lg: 1rem; + --text-lg-leading: 1.5rem; + --text-lg-tracking: initial; + + --text-md: 0.875rem; + --text-md-leading: 1.375rem; + --text-md-tracking: initial; + + --text-sm: 0.75rem; + --text-sm-leading: 1.125rem; + --text-sm-tracking: initial; + } +} diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts index 35edc5647fc..85b11dccbf6 100644 --- a/packages/admin-ui/src/utils.ts +++ b/packages/admin-ui/src/utils.ts @@ -1,6 +1,14 @@ import { clsx, type ClassValue } from "clsx"; import { generateId as baseGenerateId } from "@webiny/utils/generateId"; -import { twMerge } from "tailwind-merge"; +import { extendTailwindMerge } from "tailwind-merge"; +import { cva, type VariantProps } from "class-variance-authority"; +export { makeDecoratable } from "@webiny/react-composition"; + +const twMerge = extendTailwindMerge({ + override: { + theme: { borderWidth: ["sm", "md"] } + } +}); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); @@ -12,3 +20,5 @@ export const generateId = (initialId?: string) => { } return "wby-" + baseGenerateId(4); }; + +export { cva, type VariantProps }; diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js index 525b0f80742..61d18db3891 100644 --- a/packages/admin-ui/tailwind.config.js +++ b/packages/admin-ui/tailwind.config.js @@ -6,6 +6,19 @@ const project = getProject(); const webinyPackagesGlob = `${project.root}/node_modules/@webiny/app*/**/*.js`; const webinyAdminUiPackageGlob = `${project.root}/node_modules/@webiny/admin-ui/**/*.js`; const adminAppSourceGlob = `${project.root}/apps/admin`; +const { + backgroundColor, + borderColor, + borderRadius, + borderWidth, + fill, + fontSize, + margin, + padding, + shadow, + spacing, + textColor +} = require("./tailwind.config.theme"); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -19,65 +32,38 @@ module.exports = { "2xl": "1400px" } }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))" - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))" - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))" - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))" - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))" - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))" - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))" - } - }, - borderRadius: { - lg: `var(--radius)`, - md: `calc(var(--radius) - 2px)`, - sm: "calc(var(--radius) - 4px)" - }, - fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans] - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" } - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" } - } + backgroundColor, + borderColor, + borderRadius, + borderWidth, + fill, + fontSize, + margin, + padding, + shadow, + spacing, + textColor, + + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + serif: ["var(--font-serif)", ...fontFamily.serif], + mono: ["var(--font-mono)", ...fontFamily.mono] + }, + + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" } }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out" + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" } } + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out" } }, plugins: [require("tailwindcss-animate")] diff --git a/packages/admin-ui/tailwind.config.theme.js b/packages/admin-ui/tailwind.config.theme.js new file mode 100644 index 00000000000..57b96652535 --- /dev/null +++ b/packages/admin-ui/tailwind.config.theme.js @@ -0,0 +1,270 @@ +module.exports = { + backgroundColor: { + destructive: { + DEFAULT: "hsl(var(--bg-destructive-default))", + default: "hsl(var(--bg-destructive-default))", + disabled: "hsl(var(--bg-destructive-disabled))", + muted: "hsl(var(--bg-destructive-muted))", + strong: "hsl(var(--bg-destructive-strong))", + subtle: "hsl(var(--bg-destructive-subtle))", + xstrong: "hsl(var(--bg-destructive-xstrong))" + }, + neutral: { + DEFAULT: "hsl(var(--bg-neutral-default))", + base: "hsl(var(--bg-neutral-base))", + dark: "hsl(var(--bg-neutral-dark))", + dimmed: "hsl(var(--bg-neutral-dimmed))", + disabled: "hsl(var(--bg-neutral-disabled))", + light: "hsl(var(--bg-neutral-light))", + muted: "hsl(var(--bg-neutral-muted))", + strong: "hsl(var(--bg-neutral-strong))", + subtle: "hsl(var(--bg-neutral-subtle))", + xstrong: "hsl(var(--bg-neutral-xstrong))" + }, + primary: { + DEFAULT: "hsl(var(--bg-primary-default))", + default: "hsl(var(--bg-primary-default))", + disabled: "hsl(var(--bg-primary-disabled))", + muted: "hsl(var(--bg-primary-muted))", + strong: "hsl(var(--bg-primary-strong))", + subtle: "hsl(var(--bg-primary-subtle))", + xstrong: "hsl(var(--bg-primary-xstrong))" + }, + secondary: { + DEFAULT: "hsl(var(--bg-secondary-default))", + default: "hsl(var(--bg-secondary-default))", + disabled: "hsl(var(--bg-secondary-disabled))", + muted: "hsl(var(--bg-secondary-muted))", + strong: "hsl(var(--bg-secondary-strong))", + subtle: "hsl(var(--bg-secondary-subtle))", + xstrong: "hsl(var(--bg-secondary-xstrong))" + }, + success: { + DEFAULT: "hsl(var(--bg-success-default))", + default: "hsl(var(--bg-success-default))", + disabled: "hsl(var(--bg-success-disabled))", + muted: "hsl(var(--bg-success-muted))", + strong: "hsl(var(--bg-success-strong))", + subtle: "hsl(var(--bg-success-subtle))", + xstrong: "hsl(var(--bg-success-xstrong))" + }, + warning: { + DEFAULT: "hsl(var(--bg-warning-default))", + default: "hsl(var(--bg-warning-default))", + disabled: "hsl(var(--bg-warning-disabled))", + muted: "hsl(var(--bg-warning-muted))", + strong: "hsl(var(--bg-warning-strong))", + subtle: "hsl(var(--bg-warning-subtle))", + xstrong: "hsl(var(--bg-warning-xstrong))" + } + }, + borderColor: { + accent: { + DEFAULT: "hsl(var(--border-accent-default))", + default: "hsl(var(--border-accent-default))", + dimmed: "hsl(var(--border-accent-dimmed))", + subtle: "hsl(var(--border-accent-subtle))" + }, + destructive: { + DEFAULT: "hsl(var(--border-destructive-default))", + default: "hsl(var(--border-destructive-default))" + }, + neutral: { + DEFAULT: "hsl(var(--border-neutral-default))", + black: "hsl(var(--border-neutral-black))", + dark: "hsl(var(--border-neutral-dark))", + dimmed: "hsl(var(--border-neutral-dimmed))", + muted: "hsl(var(--border-neutral-muted))", + strong: "hsl(var(--border-neutral-strong))", + subtle: "hsl(var(--border-neutral-subtle))" + }, + success: { + DEFAULT: "hsl(var(--border-success-default))", + default: "hsl(var(--border-success-default))" + } + }, + borderRadius: { + lg: "var(--radius-lg)", + md: "var(--radius-md)", + sm: "var(--radius-sm)", + xl: "var(--radius-xl)", + xs: "var(--radius-xs)", + xxl: "var(--radius-xxl)" + }, + borderWidth: { + md: "var(--border-width-md)", + sm: "var(--border-width-sm)" + }, + fill: { + accent: { + DEFAULT: "hsl(var(--fill-accent-default))", + default: "hsl(var(--fill-accent-default))" + }, + destructive: { + DEFAULT: "hsl(var(--fill-destructive-default))", + undefined: "hsl(var(--fill-destructive))" + }, + neutral: { + DEFAULT: "hsl(var(--fill-neutral-default))", + base: "hsl(var(--fill-neutral-base))", + dark: "hsl(var(--fill-neutral-dark))", + disabled: "hsl(var(--fill-neutral-disabled))", + strong: "hsl(var(--fill-neutral-strong))", + xstrong: "hsl(var(--fill-neutral-xstrong))" + }, + success: { + DEFAULT: "hsl(var(--fill-success-default))", + undefined: "hsl(var(--fill-success))" + }, + warning: { + DEFAULT: "hsl(var(--fill-warning-default))", + undefined: "hsl(var(--fill-warning))" + } + }, + fontSize: { + h1: [ + "var(--text-h1)", + { + lineHeight: "var(--text-h1-leading)", + letterSpacing: "var(--text-h1-tracking)" + } + ], + h2: [ + "var(--text-h2)", + { + lineHeight: "var(--text-h2-leading)", + letterSpacing: "var(--text-h2-tracking)" + } + ], + h3: [ + "var(--text-h3)", + { + lineHeight: "var(--text-h3-leading)", + letterSpacing: "var(--text-h3-tracking)" + } + ], + h4: [ + "var(--text-h4)", + { + lineHeight: "var(--text-h4-leading)", + letterSpacing: "var(--text-h4-tracking)" + } + ], + h5: [ + "var(--text-h5)", + { + lineHeight: "var(--text-h5-leading)", + letterSpacing: "var(--text-h5-tracking)" + } + ], + h6: [ + "var(--text-h6)", + { + lineHeight: "var(--text-h6-leading)", + letterSpacing: "var(--text-h6-tracking)" + } + ], + xl: [ + "var(--text-xl)", + { + lineHeight: "var(--text-xl-leading)", + letterSpacing: "var(--text-xl-tracking)" + } + ], + lg: [ + "var(--text-lg)", + { + lineHeight: "var(--text-lg-leading)", + letterSpacing: "var(--text-lg-tracking)" + } + ], + md: [ + "var(--text-md)", + { + lineHeight: "var(--text-md-leading)", + letterSpacing: "var(--text-md-tracking)" + } + ], + sm: [ + "var(--text-sm)", + { + lineHeight: "var(--text-sm-leading)", + letterSpacing: "var(--text-sm-tracking)" + } + ] + }, + margin: { + lg: "var(--margin-lg)", + md: "var(--margin-md)", + sm: "var(--margin-sm)", + xl: "var(--margin-xl)", + xs: "var(--margin-xs)", + xxl: "var(--margin-xxl)" + }, + padding: { + lg: "var(--padding-lg)", + md: "var(--padding-md)", + "md-plus": "var(--padding-md-plus)", + none: "var(--padding-none)", + sm: "var(--padding-sm)", + "sm-extra": "var(--padding-sm-extra)", + "sm-plus": "var(--padding-sm-plus)", + xl: "var(--padding-xl)", + xs: "var(--padding-xs)", + "xs-plus": "var(--padding-xs-plus)", + xxl: "var(--padding-xxl)", + xxs: "var(--padding-xxs)" + }, + shadow: { + flat: "var(--shadow-flat)", + lg: "var(--shadow-lg)", + md: "var(--shadow-md)", + sm: "var(--shadow-sm)", + xl: "var(--shadow-xl)", + xxl: "var(--shadow-xxl)" + }, + spacing: { + "3xl": "var(--spacing-3xl)", + lg: "var(--spacing-lg)", + md: "var(--spacing-md)", + "md-plus": "var(--spacing-md-plus)", + none: "var(--spacing-none)", + sm: "var(--spacing-sm)", + "sm-extra": "var(--spacing-sm-extra)", + "sm-plus": "var(--spacing-sm-plus)", + xl: "var(--spacing-xl)", + xs: "var(--spacing-xs)", + "xs-plus": "var(--spacing-xs-plus)", + xxl: "var(--spacing-xxl)", + xxs: "var(--spacing-xxs)" + }, + textColor: { + accent: { + DEFAULT: "hsl(var(--text-accent-default))", + muted: "hsl(var(--text-accent-muted))", + primary: "hsl(var(--text-accent-primary))", + subtle: "hsl(var(--text-accent-subtle))" + }, + destructive: { + DEFAULT: "hsl(var(--text-destructive-default))", + muted: "hsl(var(--text-destructive-muted))", + primary: "hsl(var(--text-destructive-primary))", + subtle: "hsl(var(--text-destructive-subtle))" + }, + neutral: { + DEFAULT: "hsl(var(--text-neutral-default))", + dimmed: "hsl(var(--text-neutral-dimmed))", + disabled: "hsl(var(--text-neutral-disabled))", + light: "hsl(var(--text-neutral-light))", + muted: "hsl(var(--text-neutral-muted))", + primary: "hsl(var(--text-neutral-primary))", + strong: "hsl(var(--text-neutral-strong))" + }, + sucess: { + DEFAULT: "hsl(var(--text-sucess-default))", + muted: "hsl(var(--text-sucess-muted))", + primary: "hsl(var(--text-sucess-primary))", + subtle: "hsl(var(--text-sucess-subtle))" + } + } +}; diff --git a/packages/admin-ui/webiny.config.js b/packages/admin-ui/webiny.config.js index 0306bb741ca..b7d13bb2255 100644 --- a/packages/admin-ui/webiny.config.js +++ b/packages/admin-ui/webiny.config.js @@ -6,10 +6,16 @@ module.exports = { commands: { build: async (options, context) => { await createBuildPackage({ cwd: __dirname })(options, context); - - const from = path.join(__dirname, "tailwind.config.js"); - const to = path.join(__dirname, "dist/tailwind.config.js"); - fs.cpSync(from, to); + { + const from = path.join(__dirname, "tailwind.config.js"); + const to = path.join(__dirname, "dist/tailwind.config.js"); + fs.cpSync(from, to); + } + { + const from = path.join(__dirname, "tailwind.config.theme.js"); + const to = path.join(__dirname, "dist/tailwind.config.theme.js"); + fs.cpSync(from, to); + } }, watch: createWatchPackage({ cwd: __dirname }) } diff --git a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss index 086b65a2dfd..cfac00fa601 100644 --- a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss +++ b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss @@ -1,3 +1,5 @@ +// OLD - Will probably be removed. + // Webiny theme variables $webiny-theme-light-primary: #fa5723; $webiny-theme-light-secondary: #00ccb0; @@ -15,3 +17,10 @@ $webiny-theme-typography-font-family: "Source Sans Pro"; // Import admin app styles @import "~@webiny/app-serverless-cms/styles.scss"; + +// NEW +// Base styles. +@import "~@webiny/admin-ui/styles.scss"; + +// The default theme. Learn more: https://webiny.link/admin-themes. +@import "~@webiny/admin-ui/theme.scss"; diff --git a/yarn.lock b/yarn.lock index c5ad7948c47..063d053c348 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2485,7 +2485,14 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.25.2, @babel/compat-data@npm:^7.25.4": +"@babel/compat-data@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/compat-data@npm:7.25.2" + checksum: b61bc9da7cfe249f19d08da00f4f0c20550cd9ad5bffcde787c2bf61a8a6fa5b66d92bbd89031f3a6e5495a799a2a2499f2947b6cc7964be41979377473ab132 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.25.4": version: 7.25.4 resolution: "@babel/compat-data@npm:7.25.4" checksum: b12a91d27c3731a4b0bdc9312a50b1911f41f7f728aaf0d4b32486e2257fd2cb2d3ea1a295e98449600c48f2c7883a3196ca77cda1cef7d97a10c2e83d037974 @@ -2644,7 +2651,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.25.0": +"@babel/generator@npm:^7.23.0": version: 7.25.6 resolution: "@babel/generator@npm:7.25.6" dependencies: @@ -2680,6 +2687,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/generator@npm:7.25.0" + dependencies: + "@babel/types": ^7.25.0 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^2.5.1 + checksum: bf25649dde4068bff8e387319bf820f2cb3b1af7b8c0cfba0bd90880656427c8bad96cd5cb6db7058d20cffe93149ee59da16567018ceaa21ecaefbf780a785c + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-annotate-as-pure@npm:7.18.6" @@ -2876,7 +2895,24 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.25.0, @babel/helper-create-class-features-plugin@npm:^7.25.4": +"@babel/helper-create-class-features-plugin@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/helper-create-class-features-plugin@npm:7.25.0" + dependencies: + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-member-expression-to-functions": ^7.24.8 + "@babel/helper-optimise-call-expression": ^7.24.7 + "@babel/helper-replace-supers": ^7.25.0 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 + "@babel/traverse": ^7.25.0 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: e986c1187e16837b71f12920bd77e672b4bc19ac6dfe30b9d9d515a311c5cc5a085a8e337ac8597b1cb7bd0efdbfcc66f69bf652786c9a022070f9b782deec0d + languageName: node + linkType: hard + +"@babel/helper-create-class-features-plugin@npm:^7.25.4": version: 7.25.4 resolution: "@babel/helper-create-class-features-plugin@npm:7.25.4" dependencies: @@ -3740,12 +3776,12 @@ __metadata: linkType: hard "@babel/helpers@npm:^7.25.0": - version: 7.25.6 - resolution: "@babel/helpers@npm:7.25.6" + version: 7.25.0 + resolution: "@babel/helpers@npm:7.25.0" dependencies: "@babel/template": ^7.25.0 - "@babel/types": ^7.25.6 - checksum: 5a548999db82049a5f7ac6de57576b4ed0d386ce07d058151698836ed411eae6230db12535487caeebb68a2ffc964491e8aead62364a5132ab0ae20e8b68e19f + "@babel/types": ^7.25.0 + checksum: 739e3704ff41a30f5eaac469b553f4d3ab02be6ced083f5925851532dfbd9efc5c347728e77b754ed0b262a4e5e384e60932a62c192d338db7e4b7f3adf9f4a7 languageName: node linkType: hard @@ -3843,13 +3879,13 @@ __metadata: linkType: hard "@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.0": - version: 7.25.6 - resolution: "@babel/parser@npm:7.25.6" + version: 7.25.3 + resolution: "@babel/parser@npm:7.25.3" dependencies: - "@babel/types": ^7.25.6 + "@babel/types": ^7.25.2 bin: parser: ./bin/babel-parser.js - checksum: 85b237ded09ee43cc984493c35f3b1ff8a83e8dbbb8026b8132e692db6567acc5a1659ec928e4baa25499ddd840d7dae9dee3062be7108fe23ec5f94a8066b1e + checksum: b55aba64214fa1d66ccd0d29f476d2e55a48586920d280f88c546f81cbbececc0e01c9d05a78d6bf206e8438b9c426caa344942c1a581eecc4d365beaab8a20e languageName: node linkType: hard @@ -4589,13 +4625,13 @@ __metadata: linkType: hard "@babel/plugin-syntax-typescript@npm:^7.24.7": - version: 7.25.4 - resolution: "@babel/plugin-syntax-typescript@npm:7.25.4" + version: 7.24.7 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 9b89b8930cd5983f64251d75c9fcdc17a8dc73837d6de12220ff972888ecff4054a6467cf0c423cad242aa96c0f0564a39a0823073728cc02239b80d13f02230 + checksum: 56fe84f3044ecbf038977281648db6b63bd1301f2fff6595820dc10ee276c1d1586919d48d52a8d497ecae32c958be38f42c1c8d174dc58aad856c516dc5b35a languageName: node linkType: hard @@ -4802,15 +4838,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.25.4": - version: 7.25.4 - resolution: "@babel/plugin-transform-class-properties@npm:7.25.4" +"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.7" dependencies: - "@babel/helper-create-class-features-plugin": ^7.25.4 - "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: b73f7d968639c6c2dfc13f4c5a8fe45cefd260f0faa7890ae12e65d41211072544ff5e128c8b61a86887b29ffd3df8422dbdfbf61648488e71d4bb599c41f4a5 + checksum: 1348d7ce74da38ba52ea85b3b4289a6a86913748569ef92ef0cff30702a9eb849e5eaf59f1c6f3517059aa68115fb3067e389735dccacca39add4e2b0c67e291 languageName: node linkType: hard @@ -4826,15 +4862,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/plugin-transform-class-properties@npm:7.24.7" +"@babel/plugin-transform-class-properties@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-class-properties@npm:7.25.4" dependencies: - "@babel/helper-create-class-features-plugin": ^7.24.7 - "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-create-class-features-plugin": ^7.25.4 + "@babel/helper-plugin-utils": ^7.24.8 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 1348d7ce74da38ba52ea85b3b4289a6a86913748569ef92ef0cff30702a9eb849e5eaf59f1c6f3517059aa68115fb3067e389735dccacca39add4e2b0c67e291 + checksum: b73f7d968639c6c2dfc13f4c5a8fe45cefd260f0faa7890ae12e65d41211072544ff5e128c8b61a86887b29ffd3df8422dbdfbf61648488e71d4bb599c41f4a5 languageName: node linkType: hard @@ -5861,15 +5897,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.25.4": - version: 7.25.4 - resolution: "@babel/plugin-transform-private-methods@npm:7.25.4" +"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.7" dependencies: - "@babel/helper-create-class-features-plugin": ^7.25.4 - "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cb1dabfc03e2977990263d65bc8f43a9037dffbb5d9a5f825c00d05447ff68015099408c1531d9dd88f18a41a90f5062dc48f3a1d52b415d2d2ee4827dedff09 + checksum: c151548e34909be2adcceb224d8fdd70bafa393bc1559a600906f3f647317575bf40db670470934a360e90ee8084ef36dffa34ec25d387d414afd841e74cf3fe languageName: node linkType: hard @@ -5885,15 +5921,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/plugin-transform-private-methods@npm:7.24.7" +"@babel/plugin-transform-private-methods@npm:^7.25.4": + version: 7.25.4 + resolution: "@babel/plugin-transform-private-methods@npm:7.25.4" dependencies: - "@babel/helper-create-class-features-plugin": ^7.24.7 - "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-create-class-features-plugin": ^7.25.4 + "@babel/helper-plugin-utils": ^7.24.8 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: c151548e34909be2adcceb224d8fdd70bafa393bc1559a600906f3f647317575bf40db670470934a360e90ee8084ef36dffa34ec25d387d414afd841e74cf3fe + checksum: cb1dabfc03e2977990263d65bc8f43a9037dffbb5d9a5f825c00d05447ff68015099408c1531d9dd88f18a41a90f5062dc48f3a1d52b415d2d2ee4827dedff09 languageName: node linkType: hard @@ -7132,7 +7168,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8": +"@babel/runtime@npm:^7.13.10": version: 7.25.6 resolution: "@babel/runtime@npm:7.25.6" dependencies: @@ -7159,6 +7195,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.17.8": + version: 7.25.0 + resolution: "@babel/runtime@npm:7.25.0" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: 4a2a374a58eb01aaa65c5762606e90b3a1f448e0c637d42278b6cc0b42a9f5399b5f381ba9f237ee087da2860d14dd2d1de7bddcbe18be6a3cafba97e44bed64 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.18.3": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -7327,7 +7372,18 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.25.6": +"@babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/types@npm:7.25.2" + dependencies: + "@babel/helper-string-parser": ^7.24.8 + "@babel/helper-validator-identifier": ^7.24.7 + to-fast-properties: ^2.0.0 + checksum: f73f66ba903c6f7e38f519a33d53a67d49c07e208e59ea65250362691dc546c6da7ab90ec66ee79651ef697329872f6f97eb19a6dfcacc026fd05e76a563c5d2 + languageName: node + linkType: hard + +"@babel/types@npm:^7.25.6": version: 7.25.6 resolution: "@babel/types@npm:7.25.6" dependencies: @@ -17740,11 +17796,13 @@ __metadata: "@webiny/project-utils": 0.0.0 "@webiny/react-composition": 0.0.0 "@webiny/utils": 0.0.0 + chalk: ^4.1.0 class-variance-authority: ^0.7.0 clsx: ^2.1.1 css-loader: ^6.10.0 file-loader: 6.2.0 postcss-loader: ^6.2.1 + prettier: ^2.8.3 react: 18.2.0 rimraf: ^5.0.5 sass: 1.44.0 @@ -25480,9 +25538,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001659 - resolution: "caniuse-lite@npm:1.0.30001659" - checksum: 99304d1ca91ddd25065d200ecc545668187359d54eea5d9eef6b4d99f28ce1164c0a6c7f785c531a336aeed171055f50be5bc68ae0b1e564474c1d35ce737947 + version: 1.0.30001651 + resolution: "caniuse-lite@npm:1.0.30001651" + checksum: c31a5a01288e70cdbbfb5cd94af3df02f295791673173b8ce6d6a16db4394a6999197d44190be5a6ff06b8c2c7d2047e94dfd5e5eb4c103ab000fca2d370afc7 languageName: node linkType: hard @@ -25668,7 +25726,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.5.3": +"chokidar@npm:^3.5.3, chokidar@npm:^3.6.0": version: 3.6.0 resolution: "chokidar@npm:3.6.0" dependencies: @@ -25768,20 +25826,13 @@ __metadata: languageName: node linkType: hard -"cjs-module-lexer@npm:^1.2.2": +"cjs-module-lexer@npm:^1.2.2, cjs-module-lexer@npm:^1.2.3": version: 1.3.1 resolution: "cjs-module-lexer@npm:1.3.1" checksum: 75f20ac264a397ea5c63f9c2343a51ab878043666468f275e94862f7180ec1d764a400ec0c09085dcf0db3193c74a8b571519abd2bf4be0d2be510d1377c8d4b languageName: node linkType: hard -"cjs-module-lexer@npm:^1.2.3": - version: 1.4.1 - resolution: "cjs-module-lexer@npm:1.4.1" - checksum: 2556807a99aec1f9daac60741af96cd613a707f343174ae7967da46402c91dced411bf830d209f2e93be4cecea46fc75cecf1f17c799d7d8a9e1dd6204bfcd22 - languageName: node - linkType: hard - "class-variance-authority@npm:^0.7.0": version: 0.7.0 resolution: "class-variance-authority@npm:0.7.0" @@ -26696,7 +26747,16 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.37.1, core-js-compat@npm:^3.38.0": +"core-js-compat@npm:^3.37.1": + version: 3.38.0 + resolution: "core-js-compat@npm:3.38.0" + dependencies: + browserslist: ^4.23.3 + checksum: bd410be723e3621f7e8c7a4dce91eaefc603d95133da89c042dd961aca368c7281894bd9af14116a455a4473288fb6c121b185cb8a1e8290b8ace15aedb315f2 + languageName: node + linkType: hard + +"core-js-compat@npm:^3.38.0": version: 3.38.1 resolution: "core-js-compat@npm:3.38.1" dependencies: @@ -28734,9 +28794,9 @@ __metadata: linkType: hard "electron-to-chromium@npm:^1.5.4": - version: 1.5.18 - resolution: "electron-to-chromium@npm:1.5.18" - checksum: ee4ca16604804582fe3e94134bd42edc91316e14e09829c5324818157c669f60105c088de0de466888f656b15f07d8fdf62d450afa76f94b8a4b201cf474fe0b + version: 1.5.5 + resolution: "electron-to-chromium@npm:1.5.5" + checksum: fcdd2797ece1ece6764b88b5fc36cfc6a571e08b832c6777d8bbefa19cae22a36614411aacc5687d9fea7e1db86469f53c3952ca2579c5fe705dea7ed270d8cc languageName: node linkType: hard @@ -28905,7 +28965,7 @@ __metadata: languageName: node linkType: hard -"enhanced-resolve@npm:^5.17.1": +"enhanced-resolve@npm:^5.17.0": version: 5.17.1 resolution: "enhanced-resolve@npm:5.17.1" dependencies: @@ -29268,9 +29328,9 @@ __metadata: linkType: hard "escalade@npm:^3.1.2": - version: 3.2.0 - resolution: "escalade@npm:3.2.0" - checksum: 47b029c83de01b0d17ad99ed766347b974b0d628e848de404018f3abee728e987da0d2d370ad4574aa3d5b5bfc368754fd085d69a30f8e75903486ec4b5b709e + version: 3.1.2 + resolution: "escalade@npm:3.1.2" + checksum: 1ec0977aa2772075493002bdbd549d595ff6e9393b1cb0d7d6fcaf78c750da0c158f180938365486f75cb69fba20294351caddfce1b46552a7b6c3cde52eaa02 languageName: node linkType: hard @@ -30667,9 +30727,9 @@ __metadata: linkType: hard "flow-parser@npm:0.*": - version: 0.245.2 - resolution: "flow-parser@npm:0.245.2" - checksum: 2c2aacd543b287196ffb1bde4278ac0d8df47b7753ecc5a6e9cc16990ed53332b4d9d62768a546006d4065084ffb606c46088833e2e007ecf447f03548448127 + version: 0.243.0 + resolution: "flow-parser@npm:0.243.0" + checksum: e95c931196e502aed946b95e03d6561940db6c200d94b02623e47ac4bd92643f3b3d166c53db4b2133de00b6f750c51fae6874ef34528e35f81f3e11a2a1d0da languageName: node linkType: hard @@ -37683,18 +37743,18 @@ __metadata: linkType: hard "nypm@npm:^0.3.8": - version: 0.3.11 - resolution: "nypm@npm:0.3.11" + version: 0.3.9 + resolution: "nypm@npm:0.3.9" dependencies: citty: ^0.1.6 consola: ^3.2.3 execa: ^8.0.1 pathe: ^1.1.2 - pkg-types: ^1.2.0 - ufo: ^1.5.4 + pkg-types: ^1.1.1 + ufo: ^1.5.3 bin: nypm: dist/cli.mjs - checksum: baad0850b2c9f3d5cbf5733c064820a5b813504bf2b7ce52e6eefd39dd876358d95614759f321fd213379e01b3604e20fabfef2e4334f707b078c15a263ffa4f + checksum: 67fb85384d097fa281047d8dccc23bff4a4ffd7be8952c575c3ceda1b3bbc1401b8e0660d7a0f742b80e8b63f097d040dbba410cae4b94b8cad6a66e94ad8710 languageName: node linkType: hard @@ -38703,9 +38763,9 @@ __metadata: linkType: hard "picocolors@npm:^1.0.1": - version: 1.1.0 - resolution: "picocolors@npm:1.1.0" - checksum: a64d653d3a188119ff45781dfcdaeedd7625583f45280aea33fcb032c7a0d3959f2368f9b192ad5e8aade75b74dbd954ffe3106c158509a45e4c18ab379a2acd + version: 1.0.1 + resolution: "picocolors@npm:1.0.1" + checksum: fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5 languageName: node linkType: hard @@ -38986,14 +39046,14 @@ __metadata: languageName: node linkType: hard -"pkg-types@npm:^1.1.1, pkg-types@npm:^1.2.0": - version: 1.2.0 - resolution: "pkg-types@npm:1.2.0" +"pkg-types@npm:^1.1.1": + version: 1.1.3 + resolution: "pkg-types@npm:1.1.3" dependencies: confbox: ^0.1.7 mlly: ^1.7.1 pathe: ^1.1.2 - checksum: c9ea31be8c7bf0b760c075d5e39f71d90fcebee316e49688345e9095d520ed766f3bfd560227e3f3c28639399a0641a27193eef60c4802d89cb414e21240bbb5 + checksum: 1085f1ed650db71d62ec9201d0ad4dc9455962b0e40d309e26bb8c01bb5b1560087e44d49e8e034497668c7cdde7cb5397995afa79c9fa1e2b35af9c9abafa82 languageName: node linkType: hard @@ -45601,7 +45661,7 @@ __metadata: languageName: node linkType: hard -"ufo@npm:^1.5.3, ufo@npm:^1.5.4": +"ufo@npm:^1.5.3": version: 1.5.4 resolution: "ufo@npm:1.5.4" checksum: f244703b7d4f9f0df4f9af23921241ab73410b591f4e5b39c23e3147f3159b139a4b1fb5903189c306129f7a16b55995dac0008e0fbae88a37c3e58cbc34d833 @@ -45834,17 +45894,14 @@ __metadata: linkType: hard "unplugin@npm:^1.3.1": - version: 1.14.0 - resolution: "unplugin@npm:1.14.0" + version: 1.12.1 + resolution: "unplugin@npm:1.12.1" dependencies: acorn: ^8.12.1 + chokidar: ^3.6.0 + webpack-sources: ^3.2.3 webpack-virtual-modules: ^0.6.2 - peerDependencies: - webpack-sources: ^3 - peerDependenciesMeta: - webpack-sources: - optional: true - checksum: 97053128698ca36a26cbd0bf2b3d1fe6bd6d4cb7307192a53843b11f632377c0af18bd21396c702317c31cc5441b23ee7abcb174eef9220a66c1523b071df6b9 + checksum: 39fe19b592b03de4762e61ed16b7d411a5cb34ee7ad58bf3249663674062a59dfada4ce49ed0f7351e67633358477d680d564db1e973d9bfbcb572973ae11b88 languageName: node linkType: hard @@ -46571,9 +46628,10 @@ __metadata: linkType: hard "webpack@npm:5": - version: 5.94.0 - resolution: "webpack@npm:5.94.0" + version: 5.93.0 + resolution: "webpack@npm:5.93.0" dependencies: + "@types/eslint-scope": ^3.7.3 "@types/estree": ^1.0.5 "@webassemblyjs/ast": ^1.12.1 "@webassemblyjs/wasm-edit": ^1.12.1 @@ -46582,7 +46640,7 @@ __metadata: acorn-import-attributes: ^1.9.5 browserslist: ^4.21.10 chrome-trace-event: ^1.0.2 - enhanced-resolve: ^5.17.1 + enhanced-resolve: ^5.17.0 es-module-lexer: ^1.2.1 eslint-scope: 5.1.1 events: ^3.2.0 @@ -46602,7 +46660,7 @@ __metadata: optional: true bin: webpack: bin/webpack.js - checksum: 6a3d667be304a69cd6dcb8d676bc29f47642c0d389af514cfcd646eaaa809961bc6989fc4b2621a717dfc461130f29c6e20006d62a32e012dafaa9517813a4e6 + checksum: c93bd73d9e1ab49b07e139582187f1c3760ee2cf0163b6288fab2ae210e39e59240a26284e7e5d29bec851255ef4b43c51642c882fa5a94e16ce7cb906deeb47 languageName: node linkType: hard