From 324242d3e2282d82b7e83f75186a7145073c60b6 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Thu, 17 Oct 2024 12:54:33 +0300 Subject: [PATCH 01/17] The `creator.sidebar.toolbar` property is `undefined` in v1.12.5 (#5965) Fixes #5961 Co-authored-by: tsv2013 --- .../src/components/side-bar/side-bar-header-model.ts | 2 +- .../src/components/side-bar/side-bar-model.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-header-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-header-model.ts index 0bf6561b26..3b6cc5f7e5 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-header-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-header-model.ts @@ -12,7 +12,7 @@ export class SidebarHeaderModel extends Base { public get component(): string { return this.componentName || "svc-side-bar-default-header"; } - public get componentModel(): string { + public get componentModel(): any { return this.componentData || this; } diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts index 564384bccd..e131fe930c 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts @@ -83,7 +83,7 @@ export class SidebarModel extends Base { this.onExpandCallback = undefined; } public executeOnExpand(callback: () => void) { - if(this.renderedIsVisible) { + if (this.renderedIsVisible) { callback(); } this.onExpandCallback = callback; @@ -98,7 +98,7 @@ export class SidebarModel extends Base { } if (this._visible !== val) { this._visible = val; - if(!this.animationAllowed) { + if (!this.animationAllowed) { this.afterExpand(); } this.visibilityAnimation.sync(val); @@ -237,4 +237,7 @@ export class SidebarModel extends Base { } this.rootElement = undefined; } + public get toolbar() { + return this.header?.toolbar; + } } \ No newline at end of file From f62d1e74fd7017116b806c8abf0f5e3b425541d3 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Thu, 17 Oct 2024 17:36:51 +0300 Subject: [PATCH 02/17] =?UTF-8?q?=D0=A1reator=20settings=20(#5962)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 - add theme modules building * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/38 add used css variables inti theme * work for https://github.com/surveyjs/private-tasks/issues/382 - ko fix style binding * work for https://github.com/surveyjs/private-tasks/issues/382 - refactoring theme modules * work for https://github.com/surveyjs/private-tasks/issues/382 - extract themes from survey-creator-core * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 update default theme * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 update themes * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 fix * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 update default theme * work for https://github.com/surveyjs/private-tasks/issues/382 update default theme * work for https://github.com/surveyjs/private-tasks/issues/382 * work for https://github.com/surveyjs/private-tasks/issues/382 update default theme --------- Co-authored-by: OlgaLarina --- build-packages.yml | 1 + devops-pull-requests.yml | 1 + devops-visual-regression-tests.yml | 5 + .../src/creator.component.html | 2 +- .../src/side-bar/property-grid.component.html | 2 +- .../creator-themes-import.js | 150 + packages/survey-creator-core/jest.config.js | 1 + packages/survey-creator-core/package.json | 1 + .../src/components/side-bar/side-bar-model.ts | 3 + .../side-bar/side-bar-page-model.ts | 2 + .../src/components/side-bar/tab-control.scss | 5 +- .../src/components/tabs/designer-plugin.ts | 86 +- .../src/components/tabs/theme-plugin.ts | 18 +- .../src/components/tabs/themes.ts | 9 +- .../survey-creator-core/src/creator-base.ts | 51 +- .../src/creator-options.ts | 1 + .../creator-theme-model-definition.ts | 24 + .../src/creator-theme/creator-theme-model.ts | 309 ++ .../src/creator-theme/creator-themes.ts | 21 + .../src/creator-theme/creator.scss | 2 + .../src/creator-theme/font-sizes.scss | 23 + .../src/creator-theme/sizes.scss | 107 + .../survey-creator-core/src/entries/index.ts | 2 + .../src/localization/english.ts | 17 +- .../blocks/spg-buttongroup.scss | 1 + .../property-grid-theme/property-grid.scss | 3 - .../src/property-grid/condition-survey.ts | 2 +- .../src/property-grid/index.ts | 26 + .../property-grid/property-grid-view-model.ts | 9 +- .../src/themes/default-contrast.ts | 68 + .../src/themes/default-dark.ts | 68 + .../src/themes/default-light.ts | 68 + .../survey-creator-core/src/themes/default.ts | 614 ++++ .../survey-creator-core/src/themes/index.ts | 6 + .../predefined-themes/default/contrast.css | 57 + .../themes/predefined-themes/default/dark.css | 57 + .../predefined-themes/default/light.css | 57 + .../src/themes/predefined-themes/v2-20.css | 3263 +++++++++++++++++ .../src/themes/predefined-themes/v2-24.css | 3263 +++++++++++++++++ .../survey-creator-core/src/themes/utils.ts | 23 + .../survey-creator-core/src/variables.scss | 33 +- .../creator-theme-model.tests.ts | 135 + .../survey-creator-core/tsconfig.i18n.json | 3 + packages/survey-creator-core/tsconfig.json | 7 +- .../survey-creator-core/tsconfig.themes.json | 17 + .../survey-creator-core/webpack.config.js | 6 + packages/survey-creator-core/webpack.i18n.js | 8 +- .../webpack.themes.config.js | 28 + packages/survey-creator-knockout/index.html | 2 + packages/survey-creator-knockout/index.js | 1 + .../src/side-bar/property-grid.html | 2 +- .../src/survey-creator.html | 2 +- .../src/tabs/designer.html | 2 +- .../src/utils/utils.ts | 21 + packages/survey-creator-react/index.html | 2 + packages/survey-creator-react/index.js | 5 +- .../src/SurveyCreator.tsx | 7 +- .../src/side-bar/PropertyGrid.tsx | 3 +- .../tests/creator.spec.tsx | 2 +- packages/survey-creator-vue/src/Creator.vue | 2 +- .../src/side-bar/PropertyGrid.vue | 3 +- visual-regression-tests.yml | 5 + 62 files changed, 8655 insertions(+), 69 deletions(-) create mode 100644 packages/survey-creator-core/creator-themes-import.js create mode 100644 packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts create mode 100644 packages/survey-creator-core/src/creator-theme/creator-theme-model.ts create mode 100644 packages/survey-creator-core/src/creator-theme/creator-themes.ts create mode 100644 packages/survey-creator-core/src/creator-theme/font-sizes.scss create mode 100644 packages/survey-creator-core/src/creator-theme/sizes.scss create mode 100644 packages/survey-creator-core/src/themes/default-contrast.ts create mode 100644 packages/survey-creator-core/src/themes/default-dark.ts create mode 100644 packages/survey-creator-core/src/themes/default-light.ts create mode 100644 packages/survey-creator-core/src/themes/default.ts create mode 100644 packages/survey-creator-core/src/themes/index.ts create mode 100644 packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css create mode 100644 packages/survey-creator-core/src/themes/predefined-themes/default/dark.css create mode 100644 packages/survey-creator-core/src/themes/predefined-themes/default/light.css create mode 100644 packages/survey-creator-core/src/themes/predefined-themes/v2-20.css create mode 100644 packages/survey-creator-core/src/themes/predefined-themes/v2-24.css create mode 100644 packages/survey-creator-core/src/themes/utils.ts create mode 100644 packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts create mode 100644 packages/survey-creator-core/tsconfig.themes.json create mode 100644 packages/survey-creator-core/webpack.themes.config.js diff --git a/build-packages.yml b/build-packages.yml index 441b5fbcd0..094b7abe6e 100644 --- a/build-packages.yml +++ b/build-packages.yml @@ -256,6 +256,7 @@ jobs: - script: | cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core + npm run build:themes npm run build:i18n npm run build displayName: 'Build Creator V2 Core' diff --git a/devops-pull-requests.yml b/devops-pull-requests.yml index f40cc85721..7cd0864d0c 100644 --- a/devops-pull-requests.yml +++ b/devops-pull-requests.yml @@ -191,6 +191,7 @@ jobs: - script: | cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core + npm run build:themes npm run build:i18n npm run build displayName: 'Build Creator V2 Core' diff --git a/devops-visual-regression-tests.yml b/devops-visual-regression-tests.yml index 3e2c24da3b..0e855f13bd 100644 --- a/devops-visual-regression-tests.yml +++ b/devops-visual-regression-tests.yml @@ -92,6 +92,11 @@ jobs: npm run remove-package-lock displayName: 'npm run remove-package-lock' + - script: | + cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core + npm run build:themes + displayName: 'Build Creator V2 Core themes' + - script: | cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core npm run build:i18n diff --git a/packages/survey-creator-angular/src/creator.component.html b/packages/survey-creator-angular/src/creator.component.html index 95f506928b..d2b226ee25 100644 --- a/packages/survey-creator-angular/src/creator.component.html +++ b/packages/survey-creator-angular/src/creator.component.html @@ -1,6 +1,6 @@ -
+
diff --git a/packages/survey-creator-angular/src/side-bar/property-grid.component.html b/packages/survey-creator-angular/src/side-bar/property-grid.component.html index 16171815f0..b3fb6fc21b 100644 --- a/packages/survey-creator-angular/src/side-bar/property-grid.component.html +++ b/packages/survey-creator-angular/src/side-bar/property-grid.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js new file mode 100644 index 0000000000..d8ba76a127 --- /dev/null +++ b/packages/survey-creator-core/creator-themes-import.js @@ -0,0 +1,150 @@ +const fs = require("fs"); + +const baseThemeName = "v2-20"; +const sourcePath = "./src/themes/predefined-themes/"; +const _dirPath = "./src/themes/"; +const regularExpression = /(?--\w*(-*\w*)*)\s?:\s?(?.*[^;]);/gi; +const cssVariablesRegExp = /(?--\w*(-*\w*)*)/gi; +var themeNameMap = { + "v2-20": "sc2020", + "v2-24": "default" +}; +var creatorThemePalettes = { + "default": ["light", "dark", "contrast"] +}; +var palettes = { + "light": ["default-light", "default-contrast"], + "dark": ["default-dark"], +}; +var themeConstants = { + "default": { + "--ctr-toolbox-scrollbar-left": "auto", + "--ctr-toolbox-scrollbar-right": "0", + "--ctr-toolbox-scrollbar-display": "none", + "--ctr-toolbox-scroller-align-items": "flex-start", + "--ctr-toolbox-item-submenu-button-right": "8px", + "--ctr-toolbox-item-align": "stretch", + "--ctr-toolbox-submenu-offset": "13px", + "--ctr-toolbox-width-compact": "72px", + "--ctr-toolbox-separator-width": "calc(100% + 8px)", + "--ctr-toolbox-separator-width-compact": "40px", + "--ctr-toolbox-item-banner-icon-display": "none", + "--ctr-toolbox-item-banner-beak-display": "block", + "--ctr-toolbox-item-banner-left": "64px", + "--ctr-toolbox-submenu-item-min-width": "calc(17 * 8px)", + } +}; + +const baseThemeCssVariable = getCssVariablesFormFile(baseThemeName + ".css"); +const themeDistinctions = {}; + +function getUsedCssVariables(path) { + fs.readdirSync(path, { withFileTypes: true }).forEach(item => { + if(item.isDirectory()) { + getUsedCssVariables(path + item.name + "/"); + } else if(item.name.indexOf(".scss") === (item.name.length - 5)) { + const data = fs.readFileSync(path + item.name, "utf8"); + + const matches = data.matchAll(cssVariablesRegExp); + Array.from(matches, m => { + const variable = m.groups["variable"]; + if(usedCssVariablesList.indexOf(variable) === -1) { + usedCssVariablesList.push(variable); + } + }); + } + }); +} + +function getCssVariablesFormFile(fileName) { + try { + const data = fs.readFileSync(sourcePath + fileName, "utf8"); + // console.log(data); + + const matches = data.matchAll(regularExpression); + const themeCssVariables = {}; + Array.from(matches, m => themeCssVariables[m.groups["var1"]] = m.groups["var2"]); + return themeCssVariables; + } catch (err) { + console.error(err); + } +} + +function capitalizedFirstLetter(word) { + return word.charAt(0).toUpperCase() + word.slice(1); +} + +function getCorrectValue(variableKey, value) { + if(variableKey.indexOf("-opacity-") > -1) { + return parseInt(value) / 100; + } else { + return value; + } +} + +function isLightTheme(themeName) { + let result = true; + Object.keys(palettes).forEach(palette => { + if(palettes[palette].indexOf(themeName) > -1) { + result = palette === "light"; + } + }); + return result; +} + +function writeTheme(themeName, cssVariables, variableName) { + const theme = { themeName, cssVariables }; + const themeJson = JSON.stringify(theme, null, 2); + const result = `const Theme = ${themeJson};\nexport default Theme;\nexport const ${variableName} = Theme;`; + fs.writeFileSync(_dirPath + themeName + ".ts", result); +} + +function writeThemePalette(themeName, paletteName, cssVariables) { + const fileName = [themeName, paletteName].join("-"); + const baseThemeVariable = capitalizedFirstLetter(themeName); + const variableName = [baseThemeVariable, capitalizedFirstLetter(paletteName)].join(""); + const isLight = isLightTheme(fileName); + + const theme = { themeName: fileName, isLight: isLight, cssVariables: cssVariables }; + const themeJson = JSON.stringify(theme, null, 2); + const importsString = `import { assign } from "./utils";\nimport { ${baseThemeVariable} } from "./${themeName}";\n`; + const useImportString = `const themeCssVariables = {};\nassign(themeCssVariables, ${baseThemeVariable}.cssVariables, Theme.cssVariables);\nassign(Theme, { cssVariables: themeCssVariables });\n`; + const result = `${importsString}\nconst Theme = ${themeJson};\n${useImportString}\nexport default Theme;\nexport const ${variableName} = Theme;`; + fs.writeFileSync(_dirPath + fileName + ".ts", result); + + return `import ${variableName}Theme from "./${fileName}";\nexport const ${variableName} = ${variableName}Theme;\n`; +} + +const usedCssVariablesList = []; +getUsedCssVariables("./src/"); + +Object.keys(themeNameMap).forEach(themeName => { + if(themeName !== baseThemeName && !!baseThemeCssVariable) { + const curThemeCssVariables = getCssVariablesFormFile(themeName + ".css"); + const distinctions = themeConstants[themeNameMap[themeName]] || {}; + Object.keys(curThemeCssVariables || {}).forEach(variableKey => { + const variableValue = curThemeCssVariables[variableKey]; + if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) { + distinctions[variableKey] = getCorrectValue(variableKey, variableValue); + } + }); + themeDistinctions[themeNameMap[themeName]] = distinctions; + } +}); + +let indexFileContent = ""; +Object.keys(themeNameMap).forEach(themeName => { + if(themeName !== baseThemeName) { + const currentTheme = themeNameMap[themeName]; + console.log("Theme - " + currentTheme); + writeTheme(currentTheme, themeDistinctions[currentTheme], capitalizedFirstLetter(currentTheme)); + + const palettes = creatorThemePalettes[currentTheme]; + (palettes || []).forEach(paletteName => { + console.log("Palette - " + paletteName); + const curPaletteCssVariables = getCssVariablesFormFile(currentTheme + "/" + paletteName + ".css"); + indexFileContent += writeThemePalette(currentTheme, paletteName, curPaletteCssVariables); + }); + } +}); +fs.writeFileSync(_dirPath + "index.ts", indexFileContent); diff --git a/packages/survey-creator-core/jest.config.js b/packages/survey-creator-core/jest.config.js index 83516e4d46..f53bb3d645 100644 --- a/packages/survey-creator-core/jest.config.js +++ b/packages/survey-creator-core/jest.config.js @@ -23,6 +23,7 @@ module.exports = { "\\.html?$": "/tests/empty-module.js", "survey-core/themes": "/node_modules/survey-core/themes/index.js", "survey.i18n": "/node_modules/survey-core/survey.i18n.js", + "survey-creator-core/themes": "/src/themes/index.ts", "survey-creator-core": "/src/editorLocalization.ts", "survey-core": "/node_modules/survey-core/survey.core.js", "tslib": "/node_modules/tslib", diff --git a/packages/survey-creator-core/package.json b/packages/survey-creator-core/package.json index c065c9146c..de08a733a4 100644 --- a/packages/survey-creator-core/package.json +++ b/packages/survey-creator-core/package.json @@ -10,6 +10,7 @@ "scripts": { "build": "webpack --env buildType=dev && webpack --env buildType=prod", "build:i18n": "webpack --config ./webpack.i18n.js --env buildType=dev && webpack --config ./webpack.i18n.js --env buildType=prod", + "build:themes": "node creator-themes-import.js && webpack --config ./webpack.themes.config.js --env buildType=dev && webpack --config ./webpack.themes.config.js --env buildType=prod", "test": "jest", "test:cov": "jest --coverage", "test:dev": "jest --watch", diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts index e131fe930c..000d44a4e4 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts @@ -189,6 +189,9 @@ export class SidebarModel extends Base { return this._activePage; } public setActivePage(newPage: SidebarPageModel): void { + if (!!this._activePage && this._activePage.id !== newPage.id && !!this._activePage.deactivateCallback) { + this._activePage.deactivateCallback(); + } this.pages.forEach(page => page.visible = false); this._activePage = newPage; if (this._activePage) { diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts index bdb45a3056..103cf2d615 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts +++ b/packages/survey-creator-core/src/components/side-bar/side-bar-page-model.ts @@ -11,6 +11,8 @@ export class SidebarPageModel extends Base { @property() componentData: any; @property() componentName: string; + deactivateCallback: () => void; + constructor(public id: string, public sidePanel: SidebarModel, componentName?: string, componentData?: any) { super(); !!componentName && (this.componentName = componentName); diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss index dd41837a3a..eabd987f4a 100644 --- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss +++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss @@ -137,8 +137,11 @@ border-radius: var(--ctr-menu-toolbar-button-corner-radius, 4px); cursor: pointer; } -.svc-menu-action__button:hover { +.svc-menu-action__button:hover, +.svc-menu-action__button:focus, +.svc-menu-action__button:focus-within { background: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim); + outline: unset; } .svc-menu-action__button.svc-menu-action__button--pressed { opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5); diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index 2f5548b893..a5dd4a83ed 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -10,6 +10,11 @@ import { DesignerStateManager } from "./designer-state-manager"; import { TabControlModel } from "../side-bar/tab-control-model"; import { pgTabIcons } from "../../property-grid/icons"; import { MenuButton } from "../../utils/actions"; +import { editorLocalization } from "../../editorLocalization"; +import { creatorThemeModelPropertyGridDefinition } from "../../creator-theme/creator-theme-model-definition"; +import { CreatorThemeModel } from "../../creator-theme/creator-theme-model"; +import { ICreatorTheme } from "../../creator-theme/creator-themes"; +import { getPredefinedColorsItemValues } from "./themes"; export class TabDesignerPlugin implements ICreatorPlugin { public model: TabDesignerViewModel; @@ -19,6 +24,9 @@ export class TabDesignerPlugin implements ICreatorPlugin { private propertyGridTab: SidebarPageModel; private toolboxTab: SidebarPageModel; private propertyGridPlaceholderPage: SidebarPageModel; + private themeModel: CreatorThemeModel; + private themePropertyGrid: PropertyGridModel; + private themePropertyGridTab: SidebarPageModel; private surveySettingsAction: Action; private saveSurveyAction: Action; public previewAction: Action; @@ -53,10 +61,13 @@ export class TabDesignerPlugin implements ICreatorPlugin { } private updateHeaderComponent() { + const activePage = this.creator.sidebar.activePage; if (this.showOneCategoryInPropertyGrid && this.activePageIsPropertyGrid) { this.creator.sidebar.header.componentName = "svc-side-bar-property-grid-header"; this.creator.sidebar.header.componentData = this.propertyGridViewModel.objectSelectionAction; - } else if (this.showOneCategoryInPropertyGrid && this.creator.sidebar.activePage === this.propertyGridPlaceholderPage.id) { + } else if (this.showOneCategoryInPropertyGrid && (activePage === this.propertyGridPlaceholderPage.id + || activePage === this.themePropertyGridTab.id + )) { this.creator.sidebar.header.componentName = "svc-side-bar-header"; this.creator.sidebar.header.componentData = this.creator.sidebar.header; } else { @@ -67,7 +78,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { private updateActivePage() { if (this.showOneCategoryInPropertyGrid) { - this.creator.sidebar.activePage = this.creator.survey.pageCount ? this.propertyGridTab.id : this.propertyGridPlaceholderPage.id; + this.setActivePage(this.creator.survey.pageCount ? this.propertyGridTab.id : this.propertyGridPlaceholderPage.id); this.updateHeaderComponent(); } else { this.setPropertyGridIsActivePage(); @@ -75,7 +86,11 @@ export class TabDesignerPlugin implements ICreatorPlugin { } private setPropertyGridIsActivePage() { - this.creator.sidebar.activePage = this.propertyGridTab.id; + this.setActivePage(this.propertyGridTab.id); + } + + private setActivePage(id: string): void { + this.creator.sidebar.activePage = id; this.updateHeaderComponent(); } @@ -95,6 +110,60 @@ export class TabDesignerPlugin implements ICreatorPlugin { } } + private syncTheme(theme?: ICreatorTheme) { + const newTheme = theme || this.themeModel.toJSON(); + this.creator.syncTheme(newTheme); + } + private updatePredefinedColorChoices() { + this.themePropertyGrid.survey.getAllQuestions().forEach(question => { + if (question.name === "--sjs-primary-background-500" || question.name === "--sjs-secondary-background-500") { + (question as any).choices = getPredefinedColorsItemValues(this.themeModel["isLight"] === false ? "dark" : "light"); + } + }); + } + updateThemeSettings() { + if (this.creator.showCreatorThemeSettings) { + this.themeModel.loadTheme(this.creator.creatorTheme); + this.themePropertyGrid.obj = this.themeModel; + this.updatePredefinedColorChoices(); + } + } + private createCreatorThemeSettingsPage(creator: SurveyCreatorModel) { + this.themeModel = new CreatorThemeModel(); + this.themePropertyGrid = new PropertyGridModel(undefined, creator, creatorThemeModelPropertyGridDefinition); + this.themePropertyGrid.showOneCategoryInPropertyGrid = true; + this.themePropertyGrid.surveyInstanceCreatedArea = "designer-tab:creator-settings"; + const themePropertyGridViewModel = new PropertyGridViewModel(this.themePropertyGrid, creator); + themePropertyGridViewModel.searchEnabled = false; + this.themePropertyGridTab = this.creator.sidebar.addPage("creatorTheme", "svc-property-grid", themePropertyGridViewModel); + this.themePropertyGridTab.caption = editorLocalization.getString("ed.creatorSettingTitle"); + this.themePropertyGridTab.deactivateCallback = () => { + settingsAction.active = false; + }; + this.themeModel.onThemeSelected.add((sender, options) => { + this.syncTheme(options.theme); + this.themePropertyGrid.survey.editingObj = undefined; + this.themePropertyGrid.survey.editingObj = sender; + this.updatePredefinedColorChoices(); + }); + this.themeModel.onThemePropertyChanged.add((sender, options) => { + this.syncTheme(); + }); + + const settingsAction = new MenuButton({ + id: "theme-settings", + locTooltipName: "pe.tabs.creatorSettingTitle", + iconName: "icon-config", + pressed: false, + action: () => { + this.creator.sidebar.expandSidebar(); + this.setActivePage(this.themePropertyGridTab.id); + settingsAction.active = true; + } + }); + this.tabControlModel.bottomToolbar.setItems([settingsAction]); + } + constructor(private creator: SurveyCreatorModel) { creator.addPluginTab("designer", this); this.tabControlModel = new TabControlModel(this.creator.sidebar); @@ -128,6 +197,10 @@ export class TabDesignerPlugin implements ICreatorPlugin { this.propertyGridPlaceholderPage = this.creator.sidebar.addPage("propertyGridPlaceholder", "svc-property-grid-placeholder", this.propertyGridViewModel); this.propertyGridPlaceholderPage.caption = "Survey Settings"; + if (this.creator.showCreatorThemeSettings) { + this.createCreatorThemeSettingsPage(creator); + } + this.designerStateManager = new DesignerStateManager(); this.designerStateManager.initForSurvey(this.creator.survey); this.creator.onSurveyInstanceCreated.add((s, o) => { @@ -177,6 +250,9 @@ export class TabDesignerPlugin implements ICreatorPlugin { return action; }); this.tabControlModel.topToolbar.setItems(pgTabs); + this.propertyGridTab.deactivateCallback = () => { + pgTabs.forEach(tab => tab.active = false); + }; this.propertyGrid.survey.onCurrentPageChanged.add((sender: SurveyModel, options: CurrentPageChangedEvent) => { pgTabs.forEach(action => { @@ -194,6 +270,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { this.creator.sidebar.hideSideBarVisibilityControlActions = this.showOneCategoryInPropertyGrid; this.updateActivePage(); this.updateTabControl(); + this.updateThemeSettings(); this.creator.focusElement(undefined, true); } @@ -204,6 +281,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { this.model = undefined; this.propertyGridTab.visible = false; this.propertyGridPlaceholderPage.visible = false; + if (!!this.themePropertyGridTab) this.themePropertyGridTab.visible = false; this.toolboxTab.visible = false; this.creator.sidebar.hideSideBarVisibilityControlActions = false; this.creator.sidebar.sideAreaComponentName = undefined; @@ -232,7 +310,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { if (!this.creator.showSidebar) { this.creator.setShowSidebar(true, true); } - this.creator.sidebar.activePage = "toolbox"; + this.setActivePage("toolbox"); }, active: new ComputedUpdater(() => this.creator.sidebar.activePage === "toolbox"), visible: new ComputedUpdater(() => { diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts index 0bccb09b16..537946e9e7 100644 --- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts @@ -5,7 +5,7 @@ import { ICreatorPlugin } from "../../creator-settings"; import { editorLocalization, getLocString } from "../../editorLocalization"; import { ThemeTabViewModel } from "./theme-builder"; import { SidebarPageModel } from "../side-bar/side-bar-page-model"; -import { PredefinedColors, PredefinedThemes, Themes } from "./themes"; +import { getPredefinedColorsItemValues, PredefinedColors, PredefinedThemes, Themes } from "./themes"; import { assign, notShortCircuitAnd, saveToFileHandler } from "../../utils/utils"; import { PropertyGridModel } from "../../property-grid"; import { PropertyGridViewModel } from "../../property-grid/property-grid-view-model"; @@ -148,11 +148,6 @@ export class ThemeTabPlugin implements ICreatorPlugin { pageDescriptionQuestion.readOnly = !pageElements.some(p => !!p.description); } } - private getPredefinedColorsItemValues() { - return Object.keys(PredefinedColors[this.themeModel.colorPalette]).map(colorName => - new ItemValue(PredefinedColors[this.themeModel.colorPalette][colorName], getLocString("theme.colors." + colorName)) - ); - } private updatePropertyGridColorEditorWithPredefinedColors() { const page = this.propertyGrid.survey.pages[0]; const header = page?.getElementByName("header") as PanelModel; @@ -160,13 +155,13 @@ export class ThemeTabPlugin implements ICreatorPlugin { const headerViewContainer = (header.elements[0] as QuestionCompositeModel).contentPanel; const headerBackgroundQuestion = headerViewContainer.getQuestionByName("backgroundColor") as QuestionSelectBase; if (!!headerBackgroundQuestion) { - headerBackgroundQuestion.choices = this.getPredefinedColorsItemValues(); + headerBackgroundQuestion.choices = getPredefinedColorsItemValues(this.themeModel.colorPalette); } } this.propertyGrid.survey.getAllQuestions().forEach(question => { if (["color", "coloralpha"].indexOf(question.getType()) !== -1) { - (question as any).choices = this.getPredefinedColorsItemValues(); + (question as any).choices = getPredefinedColorsItemValues(this.themeModel.colorPalette); } }); } @@ -350,7 +345,12 @@ export class ThemeTabPlugin implements ICreatorPlugin { this.creator.sidebar.activePage = this.propertyGridTab.id; this.propertyGridTab.visible = true; this.updateTabControl(); - this.creator.expandCategoryIfNeeded(); + this.expandCategoryIfNeeded(); + } + private expandCategoryIfNeeded() { + if (!this.model.survey.isEmpty) { + this.propertyGrid.expandCategoryIfNeeded(); + } } private updateTabControlActions() { if (this.showOneCategoryInPropertyGrid) { diff --git a/packages/survey-creator-core/src/components/tabs/themes.ts b/packages/survey-creator-core/src/components/tabs/themes.ts index c79659954b..36028b9d50 100644 --- a/packages/survey-creator-core/src/components/tabs/themes.ts +++ b/packages/survey-creator-core/src/components/tabs/themes.ts @@ -1,4 +1,5 @@ -import { ITheme } from "survey-core"; +import { ItemValue, ITheme, Trigger } from "survey-core"; +import { getLocString } from "../../editorLocalization"; export const Themes: { [index: string]: ITheme } = {}; export const PredefinedThemes: string[] = ["default", "sharp", "borderless", "flat", "plain", "doubleborder", "layered", "solid", "threedimensional", "contrast"]; @@ -23,3 +24,9 @@ export const PredefinedColors = { green: "rgba(140, 204, 90, 1)" } }; + +export function getPredefinedColorsItemValues(colorPalette: string = "light") { + return Object.keys(PredefinedColors[colorPalette]).map(colorName => + new ItemValue(PredefinedColors[colorPalette][colorName], getLocString("theme.colors." + colorName)) + ); +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 9e13df2256..a1c8f12143 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -15,7 +15,7 @@ import { IsTouch } from "survey-core"; import { QuestionConverter } from "./questionconverter"; import { SurveyTextWorker } from "./textWorker"; import { QuestionToolbox, QuestionToolboxItem } from "./toolbox"; -import { getNextItemValue, getNextItemText } from "./utils/utils"; +import { getNextItemValue, getNextItemText, assign } from "./utils/utils"; import { PropertyGridModel } from "./property-grid"; import { ObjType, SurveyHelper } from "./survey-helper"; import { ICreatorSelectionOwner } from "./selection-owner"; @@ -54,6 +54,7 @@ import { } from "./creator-events-api"; import { ExpandCollapseManager } from "./expand-collapse-manager"; import designTabSurveyThemeJSON from "./designTabSurveyThemeJSON"; +import { ICreatorTheme } from "./creator-theme/creator-themes"; import { SurveyElementAdornerBase } from "./components/action-container-view-model"; import { TabbedMenuContainer, TabbedMenuItem } from "./tabbed-menu"; @@ -141,6 +142,7 @@ export class SurveyCreatorModel extends Base * @see saveThemeFunc */ @property({ defaultValue: false }) showThemeTab: boolean; + @property({ defaultValue: false }) showCreatorThemeSettings: boolean; /** * Specifies whether to display the Translation tab. * @@ -2159,7 +2161,9 @@ export class SurveyCreatorModel extends Base } public get designTabSurveyThemeVariables(): {} { - return designTabSurveyThemeJSON.cssVariables; + const cssVariables = {}; + assign(cssVariables, designTabSurveyThemeJSON.cssVariables, { "--sjs-base-unit": "var(--ctr-surface-base-unit)" }); + return cssVariables; } public getSurveyJSON(): any { @@ -2746,6 +2750,9 @@ export class SurveyCreatorModel extends Base if (!selEl) return; clearInterval(this.currentFocusInterval); clearTimeout(this.currentFocusTimeout); + if (this.animationEnabled && this.survey.isLazyRendering) { + this.survey.disableLazyRenderingBeforeElement(selEl); + } this.currentFocusTimeout = setTimeout(() => { this.currentFocusInterval = setInterval(() => { const el = document.getElementById(selEl.id); @@ -2791,7 +2798,7 @@ export class SurveyCreatorModel extends Base //#region Obsolete designerPropertyGrid protected get designerPropertyGrid(): PropertyGridModel { - const propertyGridTab = this.sidebar.getPageById(this.sidebar.activePage); + const propertyGridTab = this.sidebar.getPageById("propertyGrid"); if (!propertyGridTab) return null; return propertyGridTab.componentData ? (propertyGridTab.componentData.propertyGridModel as any as PropertyGridModel) : null; } @@ -2888,23 +2895,9 @@ export class SurveyCreatorModel extends Base this.designerPropertyGrid.setPropertyGridDefinition(val); } } - private getPropertyGridExpandedCategory(): string { - if (!this.designerPropertyGrid) return undefined; - const panels = this.designerPropertyGrid.survey.getAllPanels(); - for (var i = 0; i < panels.length; i++) { - if ((panels[i]).isExpanded) return panels[i].name; - } - return ""; - } public expandCategoryIfNeeded(): void { - const expandedTabName = settings.propertyGrid.defaultExpandedTabName; - if (!!expandedTabName && !this.getPropertyGridExpandedCategory() && !this.survey.isEmpty) { - const panel = this.designerPropertyGrid.survey.getPanelByName(expandedTabName); - if (!!panel) { - panel.blockAnimations(); - panel.expand(); - panel.releaseAnimations(); - } + if (!this.survey.isEmpty) { + this.designerPropertyGrid.expandCategoryIfNeeded(); } } private selectionChanged(element: Base, propertyName?: string, focus = true) { @@ -3908,6 +3901,26 @@ export class SurveyCreatorModel extends Base .append("svc-creator--disable-animations", !this.animationEnabled) .toString(); } + + @property({ defaultValue: {} }) themeVariables: { [index: string]: string } = {}; + @property() creatorTheme: ICreatorTheme; + + public applyTheme(theme: ICreatorTheme): void { + this.syncTheme(theme); + const designerPlugin = this.getPlugin("designer") as TabDesignerPlugin; + if (designerPlugin) { + designerPlugin.updateThemeSettings(); + } + } + public syncTheme(theme: ICreatorTheme): void { + if (!theme) return; + this.creatorTheme = theme; + + const newCssVariable = {}; + assign(newCssVariable, theme?.cssVariables); + this.themeVariables = newCssVariable; + } + public allowDragPages = false; public collapsePagesOnDrag = false; } diff --git a/packages/survey-creator-core/src/creator-options.ts b/packages/survey-creator-core/src/creator-options.ts index cbd411c985..14fc85108e 100644 --- a/packages/survey-creator-core/src/creator-options.ts +++ b/packages/survey-creator-core/src/creator-options.ts @@ -52,6 +52,7 @@ export interface ICreatorOptions { * [Theme Editor](https://surveyjs.io/survey-creator/documentation/theme-editor (linkStyle)) */ showThemeTab?: boolean; + showCreatorThemeSettings?: boolean; /** * Specifies whether to call the [`saveSurveyFunc`](https://surveyjs.io/Documentation/Survey-Creator?id=surveycreator#saveSurveyFunc) and [`saveThemeFunc`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#saveThemeFunc) functions each time survey or theme settings are changed. * diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts new file mode 100644 index 0000000000..ea05c026a6 --- /dev/null +++ b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts @@ -0,0 +1,24 @@ +import { ISurveyPropertiesDefinition, ISurveyPropertyGridDefinition } from "../question-editor/definition"; + +const creatorThemeModelProperties: ISurveyPropertiesDefinition = { + "creatorTheme": { + properties: [ + { name: "themeName", index: 1 }, + { name: "--sjs-special-background", index: 10 }, + { name: "--sjs-primary-background-500", index: 20 }, + { name: "--sjs-secondary-background-500", index: 30 }, + { name: "fontScale", index: 40 }, + { name: "scale", index: 50 }, + { name: "surfaceScale", index: 60 }, + ], + }, +}; + +export const creatorThemeModelPropertyGridDefinition: ISurveyPropertyGridDefinition = { + autoGenerateProperties: true, + classes: creatorThemeModelProperties +}; + +export class creatorThemeModelEditorDefinition { + public static definition: ISurveyPropertiesDefinition = creatorThemeModelProperties; +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts new file mode 100644 index 0000000000..d8fb97997c --- /dev/null +++ b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts @@ -0,0 +1,309 @@ +import { Serializer, Base, property, ArrayChanges, EventBase, ILoadFromJSONOptions, ISaveToJSONOptions } from "survey-core"; +import { getLocString } from "../editorLocalization"; +import { assign, roundTo2Decimals } from "../utils/utils"; +import { CreatorThemes, ICreatorTheme, PredefinedCreatorThemes } from "./creator-themes"; +import * as Themes from "survey-creator-core/themes"; + +Object.keys(Themes || {}).forEach(themeName => { + const theme: ICreatorTheme = Themes[themeName]; + if (PredefinedCreatorThemes.indexOf(theme.themeName) === -1) { + PredefinedCreatorThemes.push(theme.themeName); + } + CreatorThemes[theme.themeName] = theme; +}); + +export class CreatorThemeModel extends Base implements ICreatorTheme { + static defautlThemeName = "sc2020"; + initialCssVariables: { [index: string]: string } = {}; + themeCssVariablesChanges?: { [index: string]: string } = {}; + + unitDictionary: { [index: string]: number } = { + "--ctr-font-unit": 8, + "--ctr-line-height-unit": 8, + "--ctr-size-unit": 8, + "--ctr-spacing-unit": 8, + "--ctr-corner-radius-unit": 8, + "--ctr-stroke-unit": 1, + "--ctr-surface-base-unit": 8, + } + + @property() themeName: string = CreatorThemeModel.defautlThemeName; + @property() scale: number; + @property() fontScale: number; + @property() surfaceScale: number; + @property() isLight: boolean = true; + + public onThemeSelected = new EventBase(); + public onThemePropertyChanged = new EventBase(); + + constructor() { + super(); + this.onPropertyValueChangedCallback = ( + name: string, + oldValue: any, + newValue: any, + sender: Base, + arrayChanges: ArrayChanges + ) => { + this.onThemePropertyValueChangedCallback( + name, + oldValue, + newValue, + sender, + arrayChanges + ); + }; + } + + public getType(): string { + return "creatortheme"; + } + + public get cssVariables(): { [index: string]: string } { + return this.toJSON()["cssVariables"] || {}; + } + + private setThemeCssVariablesChanges(name: string, value: any) { + if (this.themeCssVariablesChanges[name] !== value) { + this.themeCssVariablesChanges[name] = value; + this.onThemePropertyChanged.fire(this, { name, value }); + } + } + private onThemePropertyValueChangedCallback(name: string, oldValue: any, newValue: any, sender: Base, arrayChanges: ArrayChanges) { + if (this.blockThemeChangedNotifications > 0) return; + + if (name === "themeName") { + this.loadTheme({ themeName: newValue }); + this.onThemeSelected.fire(this, { theme: this.toJSON() }); + } else if (name.indexOf("--") === 0) { + this.setThemeCssVariablesChanges(name, newValue); + } else if (name == "fontScale" || name == "scale" || name == "surfaceScale") { + this.scalePropertiesChanged(name, newValue); + } + } + private scalePropertiesChanged(propertyName: string, newValue: number) { + if (propertyName == "fontScale") { + this.scalingProperties("--ctr-font-unit", newValue); + this.scalingProperties("--ctr-line-height-unit", newValue); + } else if (propertyName == "scale") { + this.scalingProperties("--ctr-size-unit", newValue); + this.scalingProperties("--ctr-spacing-unit", newValue); + this.scalingProperties("--ctr-corner-radius-unit", newValue); + + } else if (propertyName == "surfaceScale") { + this.scalingProperties("--ctr-surface-base-unit", newValue); + } + } + private scalingProperties(cssName: string, newValue: number) { + const baseUnit = this.unitDictionary[cssName]; + this.setThemeCssVariablesChanges(cssName, (newValue * baseUnit / 100) + "px"); + } + private scaleValue(cssName: string, scale: number) { + const baseUnit = this.unitDictionary[cssName]; + this[cssName] = (scale * baseUnit / 100) + "px"; + } + private scaleCssVariables() { + if (this.fontScale !== undefined) { + this.scaleValue("--ctr-font-unit", this.fontScale); + this.scaleValue("--ctr-line-height-unit", this.fontScale); + } + if (this.scale !== undefined) { + this.scaleValue("--ctr-size-unit", this.scale); + this.scaleValue("--ctr-spacing-unit", this.scale); + this.scaleValue("--ctr-corner-radius-unit", this.scale); + } + if (this.surfaceScale !== undefined) { + this.scaleValue("--ctr-surface-base-unit", this.surfaceScale); + } + } + private getScaleFactor(cssName: string): number { + return !!this[cssName] ? roundTo2Decimals(parseFloat(this[cssName]) * 100 / this.unitDictionary[cssName]) : undefined; + } + private updateScaleProperties() { + this.blockThemeChangedNotifications += 1; + try { + this.fontScale = this.getScaleFactor(/*this.isDefaultTheme ? "--ctr-font-size" :*/ "--ctr-font-unit"); + this.scale = this.getScaleFactor(/*this.isDefaultTheme ? "--sjs-base-unit" :*/ "--ctr-size-unit"); + this.surfaceScale = this.getScaleFactor("--ctr-surface-base-unit"); + } finally { + this.blockThemeChangedNotifications -= 1; + } + } + + private blockThemeChangedNotifications = 0; + public loadTheme(theme: ICreatorTheme = {}) { + this.blockThemeChangedNotifications += 1; + try { + const baseTheme = CreatorThemes[theme.themeName] || {}; + this.themeName = theme.themeName || baseTheme.themeName || CreatorThemeModel.defautlThemeName; + + const effectiveThemeCssVariables = {}; + assign(effectiveThemeCssVariables, baseTheme.cssVariables || {}); + assign(effectiveThemeCssVariables, theme.cssVariables || {}, this.themeCssVariablesChanges); + + const effectiveTheme: ICreatorTheme = {}; + assign(effectiveTheme, baseTheme, theme, { cssVariables: effectiveThemeCssVariables, themeName: this.themeName }); + + // this.initializeColorCalculator(effectiveTheme.cssVariables); + this.fromJSON(effectiveTheme); + } finally { + this.blockThemeChangedNotifications -= 1; + } + } + + fromJSON(json: ICreatorTheme, options?: ILoadFromJSONOptions): void { + if (!json) return; + + const _json = {}; + assign(_json, json); + delete _json["cssVariables"]; + super.fromJSON(_json, options); + + if (json.cssVariables) { + super.fromJSON(json.cssVariables, options); + this.initialCssVariables = {}; + assign(this.initialCssVariables, json.cssVariables); + + this.updateScaleProperties(); + } + } + + toJSON(options?: ISaveToJSONOptions): ICreatorTheme { + this.scaleCssVariables(); + + const result = super.toJSON(options); + const cssVariables = {}; + assign(cssVariables, this.initialCssVariables, this.themeCssVariablesChanges); + result.cssVariables = cssVariables; + Object.keys(result).forEach(key => { + if (key.indexOf("--") == 0) { + delete result[key]; + } + }); + if (Object.keys(result.cssVariables).length === 0) { + delete result.cssVariables; + } + return result; + } +} + +Serializer.addClass( + "creatortheme", + [ + { + type: "dropdown", + name: "themeName", + choices: PredefinedCreatorThemes.map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) })), + } + ], + (json) => { return new CreatorThemeModel(); } +); + +Serializer.addProperties("creatortheme", [ + { + type: "color", + name: "--sjs-special-background", + default: "#F3F3F3FF", + onPropertyEditorUpdate: function (obj: any, editor: any) { + if (!!editor) { + editor.title = getLocString("creatortheme.--sjs-special-background"); + } + } + }, { + type: "color", + name: "--sjs-primary-background-500", + default: "#19B394FF", + onPropertyEditorUpdate: function (obj: any, editor: any) { + if (!!editor) { + editor.title = getLocString("creatortheme.--sjs-primary-background-500"); + } + }, + }, { + type: "color", + name: "--sjs-secondary-background-500", + default: "#FF9814FF", + displayName: "" + }, { + name: "--ctr-font-unit", + default: "8px", + visible: false, + }, { + name: "--ctr-line-height-unit", + default: "8px", + visible: false, + }, { + type: "spinedit", + name: "fontScale", + isSerializable: false, + default: 100, + enableIf: (obj: CreatorThemeModel): boolean => { + return !obj || obj.themeName !== CreatorThemeModel.defautlThemeName; + }, + onPropertyEditorUpdate: function (obj: any, editor: any) { + if (!!editor) { + editor.unit = "%"; + editor.min = 0; + editor.step = 5; + editor.title = getLocString("creatortheme.fontScale"); + editor.titleLocation = "left"; + editor.descriptionLocation = "hidden"; + } + } + }, { + name: "--ctr-spacing-unit", + default: "8px", + visible: false, + }, { + name: "--ctr-size-unit", + default: "8px", + visible: false, + }, { + name: "--ctr-corner-radius-unit", + default: "8px", + visible: false, + }, { + type: "spinedit", + name: "scale", + isSerializable: false, + default: 100, + enableIf: (obj: CreatorThemeModel): boolean => { + return !obj || obj.themeName !== CreatorThemeModel.defautlThemeName; + }, + onPropertyEditorUpdate: function (obj: any, editor: any) { + if (!!editor) { + editor.unit = "%"; + editor.min = 0; + editor.step = 5; + editor.title = getLocString("creatortheme.userInterfaceBaseUnit"); + editor.titleLocation = "left"; + editor.descriptionLocation = "hidden"; + } + } + }, { + name: "--ctr-surface-base-unit", + default: "8px", + visible: false, + }, { + type: "spinedit", + name: "surfaceScale", + isSerializable: false, + default: 100, + enableIf: (obj: CreatorThemeModel): boolean => { + return !obj || obj.themeName !== CreatorThemeModel.defautlThemeName; + }, + onPropertyEditorUpdate: function (obj: any, editor: any) { + if (!!editor) { + editor.unit = "%"; + editor.min = 0; + editor.step = 5; + editor.title = getLocString("creatortheme.surfaceScale"); + editor.titleLocation = "left"; + editor.descriptionLocation = "hidden"; + } + } + }, { + name: "isLight:boolean", + visible: false, + isSerializable: false, + }, +]); \ No newline at end of file diff --git a/packages/survey-creator-core/src/creator-theme/creator-themes.ts b/packages/survey-creator-core/src/creator-theme/creator-themes.ts new file mode 100644 index 0000000000..0ccb527007 --- /dev/null +++ b/packages/survey-creator-core/src/creator-theme/creator-themes.ts @@ -0,0 +1,21 @@ +export interface ICreatorTheme { + themeName?: string; + cssVariables?: { [index: string]: string }; +} + +export const PredefinedCreatorThemes: string[] = ["sc2020"]; +export const CreatorThemes: { [index: string]: ICreatorTheme } = { + "sc2020": { + themeName: "sc2020", + cssVariables: { + "--sjs-special-background": "#F3F3F3FF", + "--sjs-primary-background-500": "#19B394FF", + "--sjs-primary-background-10": "#19B3941A", + "--sjs-primary-background-400": "#14A48BFF", + "--sjs-secondary-background-500": "#FF9814FF", + "--sjs-secondary-background-25": "#FF981440", + "--sjs-secondary-background-10": "#FF98141A", + "--ctr-surface-background-color": "var(--sjs-special-background)", + } + } +}; diff --git a/packages/survey-creator-core/src/creator-theme/creator.scss b/packages/survey-creator-core/src/creator-theme/creator.scss index 2498063d5c..bdd4cba488 100644 --- a/packages/survey-creator-core/src/creator-theme/creator.scss +++ b/packages/survey-creator-core/src/creator-theme/creator.scss @@ -1,3 +1,5 @@ @import "../variables.scss"; +@import "./sizes.scss"; +@import "./font-sizes.scss"; @import "./button.scss"; @import "./action-button.scss"; diff --git a/packages/survey-creator-core/src/creator-theme/font-sizes.scss b/packages/survey-creator-core/src/creator-theme/font-sizes.scss new file mode 100644 index 0000000000..eab1962218 --- /dev/null +++ b/packages/survey-creator-core/src/creator-theme/font-sizes.scss @@ -0,0 +1,23 @@ +$font-unit: var(--ctr-font-unit, 8px); +$line-height-unit: var(--ctr-line-height-unit, 8px); + +.svc-creator { + --sjs-font-size-x1: calc(#{$font-unit} * 1); + --sjs-font-size-x150: calc(#{$font-unit} * 1.5); + --sjs-font-size-x2: calc(#{$font-unit} * 2); + --sjs-font-size-x3: calc(#{$font-unit} * 3); + --sjs-font-size-x4: calc(#{$font-unit} * 4); + --sjs-font-size-x5: calc(#{$font-unit} * 5); + --sjs-font-size-x6: calc(#{$font-unit} * 6); + --sjs-font-size-x7: calc(#{$font-unit} * 7); + --sjs-font-size-x8: calc(#{$font-unit} * 8); + --sjs-line-height-x1: calc(#{$line-height-unit} * 1); + --sjs-line-height-x150: calc(#{$line-height-unit} * 1.5); + --sjs-line-height-x2: calc(#{$line-height-unit} * 2); + --sjs-line-height-x3: calc(#{$line-height-unit} * 3); + --sjs-line-height-x4: calc(#{$line-height-unit} * 4); + --sjs-line-height-x5: calc(#{$line-height-unit} * 5); + --sjs-line-height-x6: calc(#{$line-height-unit} * 6); + --sjs-line-height-x7: calc(#{$line-height-unit} * 7); + --sjs-line-height-x8: calc(#{$line-height-unit} * 8); +} diff --git a/packages/survey-creator-core/src/creator-theme/sizes.scss b/packages/survey-creator-core/src/creator-theme/sizes.scss new file mode 100644 index 0000000000..c8f06c814b --- /dev/null +++ b/packages/survey-creator-core/src/creator-theme/sizes.scss @@ -0,0 +1,107 @@ +$size-unit: var(--ctr-size-unit, 8px); +$spacing-unit: var(--ctr-spacing-unit, 8px); +$corner-radius-unit: var(--ctr-corner-radius-unit, 8px); +$stroke-unit: var(--ctr-stroke-unit, 1px); + +.svc-creator { + --sjs-spacing-x2: calc(#{$spacing-unit} * 2); + --sjs-spacing-x3: calc(#{$spacing-unit} * 3); + --sjs-spacing-x1: calc(#{$spacing-unit} * 1); + --sjs-spacing-x05: calc(#{$spacing-unit} * 0.5); + --sjs-spacing-x025: calc(#{$spacing-unit} * 0.25); + --sjs-spacing-x0125: calc(#{$spacing-unit} * 0.125); + --sjs-spacing-x150: calc(#{$spacing-unit} * 1.5); + --sjs-spacing-x250: calc(#{$spacing-unit} * 2.5); + --sjs-spacing-x4: calc(#{$spacing-unit} * 4); + --sjs-spacing-x350: calc(#{$spacing-unit} * 3.5); + --sjs-spacing-x5: calc(#{$spacing-unit} * 5); + --sjs-spacing-x6: calc(#{$spacing-unit} * 6); + --sjs-spacing-x7: calc(#{$spacing-unit} * 7); + --sjs-spacing-x8: calc(#{$spacing-unit} * 8); + --sjs-spacing-x9: calc(#{$spacing-unit} * 9); + --sjs-spacing-x10: calc(#{$spacing-unit} * 10); + --sjs-spacing-x11: calc(#{$spacing-unit} * 11); + --sjs-spacing-x12: calc(#{$spacing-unit} * 12); + --sjs-spacing-x13: calc(#{$spacing-unit} * 13); + --sjs-spacing-x14: calc(#{$spacing-unit} * 14); + --sjs-spacing-x15: calc(#{$spacing-unit} * 15); + --sjs-spacing-x16: calc(#{$spacing-unit} * 16); + --sjs-spacing-x075: calc(#{$spacing-unit} * 0.75); + --sjs-spacing-x125: calc(#{$spacing-unit} * 1.25); + --sjs-spacing-x1050: calc(#{$spacing-unit} * 10.5); + --sjs-spacing-x0375: calc(#{$spacing-unit} * 0.375); + --sjs-spacing-x850: calc(#{$spacing-unit} * 8.5); + --sjs-spacing-x025n: -calc(#{$spacing-unit} * 0.25); + --sjs-spacing-x3n: -calc(#{$spacing-unit} * 3); + --sjs-spacing-x4n: -calc(#{$spacing-unit} * 4); + --sjs-spacing-x05n: -calc(#{$spacing-unit} * 0.5); + --sjs-spacing-x1n: -calc(#{$spacing-unit} * 1); + --sjs-spacing-x150n: -calc(#{$spacing-unit} * 1.5); + --sjs-spacing-x2n: -calc(#{$spacing-unit} * 2); + --sjs-spacing-x5n: -calc(#{$spacing-unit} * 5); + --sjs-spacing-x6n: -calc(#{$spacing-unit} * 6); + --sjs-spacing-x7n: -calc(#{$spacing-unit} * 7); + --sjs-spacing-x8n: -calc(#{$spacing-unit} * 8); + --sjs-corner-radius-x0125: calc(#{$corner-radius-unit} * 0.125); + --sjs-corner-radius-x025: calc(#{$corner-radius-unit} * 0.25); + --sjs-corner-radius-x05: calc(#{$corner-radius-unit} * 0.5); + --sjs-corner-radius-x075: calc(#{$corner-radius-unit} * 0.75); + --sjs-corner-radius-x1: calc(#{$corner-radius-unit} * 1); + --sjs-corner-radius-x125: calc(#{$corner-radius-unit} * 1.25); + --sjs-corner-radius-x150: calc(#{$corner-radius-unit} * 1.5); + --sjs-corner-radius-x2: calc(#{$corner-radius-unit} * 2); + --sjs-corner-radius-x250: calc(#{$corner-radius-unit} * 2.5); + --sjs-corner-radius-x3: calc(#{$corner-radius-unit} * 3); + --sjs-corner-radius-x350: calc(#{$corner-radius-unit} * 3.5); + --sjs-corner-radius-x4: calc(#{$corner-radius-unit} * 4); + --sjs-corner-radius-x5: calc(#{$corner-radius-unit} * 5); + --sjs-corner-radius-x6: calc(#{$corner-radius-unit} * 6); + --sjs-corner-radius-x7: calc(#{$corner-radius-unit} * 7); + --sjs-corner-radius-x8: calc(#{$corner-radius-unit} * 8); + --sjs-corner-radius-round: calc(#{$corner-radius-unit} * 128); + --sjs-corner-radius-x0375: calc(#{$corner-radius-unit} * 0.375); + --sjs-stroke-x1: calc(#{$stroke-unit} * 0.125); + --sjs-stroke-x2: calc(#{$stroke-unit} * 0.25); + --sjs-stroke-x3: calc(#{$stroke-unit} * 0.375); + --sjs-stroke-x4: calc(#{$stroke-unit} * 0.5); + --sjs-stroke-x6: calc(#{$stroke-unit} * 0.75); + --sjs-stroke-x8: calc(#{$stroke-unit} * 1); + --sjs-size-x0125: calc(#{$size-unit} * 0.125); + --sjs-size-x025: calc(#{$size-unit} * 0.25); + --sjs-size-x05: calc(#{$size-unit} * 0.5); + --sjs-size-x075: calc(#{$size-unit} * 0.75); + --sjs-size-x1: calc(#{$size-unit} * 1); + --sjs-size-x125: calc(#{$size-unit} * 1.25); + --sjs-size-x150: calc(#{$size-unit} * 1.5); + --sjs-size-x2: calc(#{$size-unit} * 2); + --sjs-size-x250: calc(#{$size-unit} * 2.5); + --sjs-size-x3: calc(#{$size-unit} * 3); + --sjs-size-x350: calc(#{$size-unit} * 3.5); + --sjs-size-x4: calc(#{$size-unit} * 4); + --sjs-size-x5: calc(#{$size-unit} * 5); + --sjs-size-x6: calc(#{$size-unit} * 6); + --sjs-size-x7: calc(#{$size-unit} * 7); + --sjs-size-x8: calc(#{$size-unit} * 8); + --sjs-size-x9: calc(#{$size-unit} * 9); + --sjs-size-x10: calc(#{$size-unit} * 10); + --sjs-size-x11: calc(#{$size-unit} * 11); + --sjs-size-x12: calc(#{$size-unit} * 12); + --sjs-size-x13: calc(#{$size-unit} * 13); + --sjs-size-x14: calc(#{$size-unit} * 14); + --sjs-size-x15: calc(#{$size-unit} * 15); + --sjs-size-x16: calc(#{$size-unit} * 16); + --sjs-size-x550: calc(#{$size-unit} * 5.5); + --sjs-size-max: 10000px; + --sjs-size-x17: calc(#{$size-unit} * 17); + --sjs-size-x18: calc(#{$size-unit} * 18); + --sjs-size-x64: calc(#{$size-unit} * 64); + --sjs-size-x90: calc(#{$size-unit} * 90); + --sjs-size-x80: calc(#{$size-unit} * 80); + --sjs-size-x40: calc(#{$size-unit} * 40); + --sjs-size-x32: calc(#{$size-unit} * 32); + --sjs-size-x20: calc(#{$size-unit} * 20); + --sjs-size-x86: calc(#{$size-unit} * 86); + --sjs-size-x60: calc(#{$size-unit} * 60); + --sjs-size-x28: calc(#{$size-unit} * 28); + --sjs-size-x50: calc(#{$size-unit} * 50); +} diff --git a/packages/survey-creator-core/src/entries/index.ts b/packages/survey-creator-core/src/entries/index.ts index b61feec902..d07d2765f3 100644 --- a/packages/survey-creator-core/src/entries/index.ts +++ b/packages/survey-creator-core/src/entries/index.ts @@ -96,6 +96,8 @@ export * from "../utils/resizer"; export * from "../plugins/undo-redo"; export * from "../plugins/undo-redo/undo-redo-manager"; export * from "../pages-controller"; +export * from "../creator-theme/creator-theme-model-definition"; +export * from "../creator-theme/creator-theme-model"; export * from "../presets/presets-base"; export * from "../presets/presets"; export * from "../presets/presets-properties"; diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts index 3d529f8470..b8c3795cd5 100644 --- a/packages/survey-creator-core/src/localization/english.ts +++ b/packages/survey-creator-core/src/localization/english.ts @@ -71,6 +71,7 @@ export var enStrings = { surveySettingsTooltip: "Survey settings", themeSettings: "Theme Settings", themeSettingsTooltip: "Theme settings", + creatorSettingTitle: "Creator Settings", showPanel: "Show Panel", hidePanel: "Hide Panel", prevSelected: "Select previous", @@ -1708,7 +1709,21 @@ export var enStrings = { tulip: "Tulip", brown: "Brown", green: "Green" - } + }, + }, + creatortheme: { + "--sjs-special-background": "Surface background", + "--sjs-primary-background-500": "Accent colors", + "surfaceScale": "Surface", + "userInterfaceBaseUnit": "User interface", + "fontScale": "Font", + + names: { + "sc2020": "Survey Creator 2020", + "default-light": "Light", + "default-dark": "Dark", + "default-contrast": "Contrast" + }, } }; diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss index 0598fe5f3f..bff0f8d3c4 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss @@ -59,6 +59,7 @@ } .spg-root-modern.spg-root--one-category { + height: 100%; background-color: var(--ctr-property-grid-form-background-color, $background-dim); border-right: unset; diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss index b1807083fb..822c6e936c 100644 --- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss +++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss @@ -30,9 +30,6 @@ .spg-container { width: 100%; -} - -.spg-container.spg-container_search { height: 100%; } diff --git a/packages/survey-creator-core/src/property-grid/condition-survey.ts b/packages/survey-creator-core/src/property-grid/condition-survey.ts index 94e6b70059..b81004792d 100644 --- a/packages/survey-creator-core/src/property-grid/condition-survey.ts +++ b/packages/survey-creator-core/src/property-grid/condition-survey.ts @@ -6,7 +6,7 @@ import { PropertyEditorSetupValue } from "./index"; import { assignDefaultV2Classes, wrapTextByCurlyBraces } from "../utils/utils"; import { logicCss } from "../components/tabs/logic-theme"; import { getLogicString } from "../components/tabs/logic-types"; -import { CreatorBase } from "src/creator-base"; +import { CreatorBase } from "../creator-base"; export class ConditionEditorItem { public conjunction: string = "and"; diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts index f53f82ae34..05681308b2 100644 --- a/packages/survey-creator-core/src/property-grid/index.ts +++ b/packages/survey-creator-core/src/property-grid/index.ts @@ -1106,6 +1106,24 @@ export class PropertyGridModel { } }); } + public expandCategoryIfNeeded(): void { + const expandedTabName = creatorSettings.propertyGrid.defaultExpandedTabName; + if (!!expandedTabName && !this.getPropertyGridExpandedCategory()) { + const panel = this.survey.getPanelByName(expandedTabName); + if (!!panel) { + panel.blockAnimations(); + panel.expand(); + panel.releaseAnimations(); + } + } + } + private getPropertyGridExpandedCategory(): string { + const panels = this.survey.getAllPanels(); + for (var i = 0; i < panels.length; i++) { + if ((panels[i]).isExpanded) return panels[i].name; + } + return ""; + } private collapseOtherPanels(panel: PanelModel): void { this.collapseAllCategoriesExcept(panel); } @@ -1709,6 +1727,14 @@ export class PropertyGridEditorColor extends PropertyGridEditor { const res: any = { type: "color", allowEmptyValue: true }; return res; } + public onCreated(obj: Base, question: Question, prop: JsonObjectProperty) { + question.valueFromDataCallback = function (val: any): any { + return val; + }; + question.valueToDataCallback = function (val: any): any { + return val; + }; + } } export class PropertyGridEditorColorWithAlpha extends PropertyGridEditor { diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts index 78f0b82def..24127617dc 100644 --- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts +++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts @@ -1,4 +1,4 @@ -import { Base, SurveyModel, property, PopupModel, Action } from "survey-core"; +import { Base, SurveyModel, property, PopupModel, Action, CssClassBuilder } from "survey-core"; import { PropertyGridModel } from "./index"; import { SelectionHistory } from "../selection-history"; import { SurveyHelper } from "../survey-helper"; @@ -49,6 +49,13 @@ export class PropertyGridViewModel extends Base { this.onSurveyChanged(); } + public get rootCss(): string { + return new CssClassBuilder() + .append("spg-container") + .append("spg-container_search", this.searchEnabled) + .toString(); + } + protected onPropertyValueChanged(name: string, oldValue: any, newValue: any) { super.onPropertyValueChanged(name, oldValue, newValue); diff --git a/packages/survey-creator-core/src/themes/default-contrast.ts b/packages/survey-creator-core/src/themes/default-contrast.ts new file mode 100644 index 0000000000..524f43c01c --- /dev/null +++ b/packages/survey-creator-core/src/themes/default-contrast.ts @@ -0,0 +1,68 @@ +import { assign } from "./utils"; +import { Default } from "./default"; + +const Theme = { + "themeName": "default-contrast", + "isLight": true, + "cssVariables": { + "--sjs-layer-1-background-500": "#FFFFFFFF", + "--sjs-layer-1-background-400": "#EBEBEBFF", + "--sjs-layer-1-foreground-100": "#000000FF", + "--sjs-layer-1-foreground-50": "#00000099", + "--sjs-layer-3-background-500": "#EBEBEBFF", + "--sjs-layer-3-foreground-100": "#000000FF", + "--sjs-layer-3-foreground-50": "#00000099", + "--sjs-layer-2-background-500": "#F0F0F0FF", + "--sjs-layer-2-background-400": "#DCDCDCFF", + "--sjs-special-haze": "#D5C7FB59", + "--sjs-border-25": "#C8C8C8FF", + "--sjs-border-10": "#C8C8C8FF", + "--sjs-primary-background-500": "#3A179EFF", + "--sjs-primary-background-10": "#3A179E1A", + "--sjs-primary-background-400": "#240973FF", + "--sjs-primary-foreground-100": "#FFFFFFFF", + "--sjs-primary-foreground-25": "#FFFFFF40", + "--sjs-secondary-background-500": "#3A179EFF", + "--sjs-secondary-background-25": "#3A179E40", + "--sjs-secondary-background-10": "#3A179E1A", + "--sjs-secondary-foreground-100": "#FFFFFFFF", + "--sjs-secondary-forecolor-25": "#FFFFFF40", + "--sjs-semantic-red-background-500": "#E50A66FF", + "--sjs-semantic-red-background-10": "#E50A661A", + "--sjs-semantic-red-foreground-100": "#FFFFFFFF", + "--sjs-semantic-green-background-500": "#19AAB3FF", + "--sjs-semantic-green-background-10": "#19AAB31A", + "--sjs-semantic-green-foreground-100": "#FFFFFFFF", + "--sjs-semantic-blue-background-500": "#4F43D9FF", + "--sjs-semantic-blue-background-10": "#4F43D91A", + "--sjs-semantic-blue-foreground-100": "#FFFFFFFF", + "--sjs-semantic-yellow-background-500": "#FF710BFF", + "--sjs-semantic-yellow-background-10": "#FF710B1A", + "--sjs-semantic-yellow-foreground-100": "#FFFFFFFF", + "--sjs-semantic-white-background-500": "#FFFFFFFF", + "--sjs-code-gray-700": "#B6B6B6FF", + "--sjs-code-blue-500": "#326FCAFF", + "--sjs-code-gray-300": "#505050FF", + "--sjs-code-green-500": "#08997CFF", + "--sjs-code-red-500": "#F41B50FF", + "--sjs-code-purple-500": "#C22FA2FF", + "--sjs-code-yellow-500": "#F58D06FF", + "--sjs-code-gray-500": "#8A8A8AFF", + "--sjs-special-background": "#F4F2FBFF", + "--sjs-layer-1-foreground-75": "#000000FF", + "--sjs-layer-3-background-400": "#D7D7D7FF", + "--sjs-special-glow": "#240A6D1A", + "--sjs-special-shadow": "#00000040", + "--sjs-layer-3-foreground-75": "#000000FF", + "--sjs-layer-2-foreground-100": "#000000FF", + "--sjs-layer-2-foreground-75": "#000000FF", + "--sjs-layer-2-foreground-50": "#00000099", + "--sjs-border-25-overlay": "#00000040" + } +}; +const themeCssVariables = {}; +assign(themeCssVariables, Default.cssVariables, Theme.cssVariables); +assign(Theme, { cssVariables: themeCssVariables }); + +export default Theme; +export const DefaultContrast = Theme; \ No newline at end of file diff --git a/packages/survey-creator-core/src/themes/default-dark.ts b/packages/survey-creator-core/src/themes/default-dark.ts new file mode 100644 index 0000000000..0cb3e82407 --- /dev/null +++ b/packages/survey-creator-core/src/themes/default-dark.ts @@ -0,0 +1,68 @@ +import { assign } from "./utils"; +import { Default } from "./default"; + +const Theme = { + "themeName": "default-dark", + "isLight": false, + "cssVariables": { + "--sjs-layer-1-background-500": "#181818FF", + "--sjs-layer-1-background-400": "#282828FF", + "--sjs-layer-1-foreground-100": "#FFFFFFCC", + "--sjs-layer-1-foreground-50": "#FFFFFF66", + "--sjs-layer-3-background-500": "#202020FF", + "--sjs-layer-3-foreground-100": "#FFFFFFCC", + "--sjs-layer-3-foreground-50": "#FFFFFF66", + "--sjs-layer-2-background-500": "#101010FF", + "--sjs-layer-2-background-400": "#202020FF", + "--sjs-special-haze": "#000000BF", + "--sjs-border-25": "#2D2D2DFF", + "--sjs-border-10": "#2D2D2DFF", + "--sjs-primary-background-500": "#3EDFD5FF", + "--sjs-primary-background-10": "#3EDFD51A", + "--sjs-primary-background-400": "#29DCD1FF", + "--sjs-primary-foreground-100": "#0C0C0CFF", + "--sjs-primary-foreground-25": "#0C0C0C40", + "--sjs-secondary-background-500": "#EDA925FF", + "--sjs-secondary-background-25": "#EDA92540", + "--sjs-secondary-background-10": "#EDA9251A", + "--sjs-secondary-foreground-100": "#0C0C0CFF", + "--sjs-secondary-forecolor-25": "#0C0C0C40", + "--sjs-semantic-red-background-500": "#FF3B6AFF", + "--sjs-semantic-red-background-10": "#FF3B6A1A", + "--sjs-semantic-red-foreground-100": "#FFFFFFFF", + "--sjs-semantic-green-background-500": "#3EDFD5FF", + "--sjs-semantic-green-background-10": "#3EDFD51A", + "--sjs-semantic-green-foreground-100": "#FFFFFFFF", + "--sjs-semantic-blue-background-500": "#66B4FCFF", + "--sjs-semantic-blue-background-10": "#66B4FC1A", + "--sjs-semantic-blue-foreground-100": "#FFFFFFFF", + "--sjs-semantic-yellow-background-500": "#EDA925FF", + "--sjs-semantic-yellow-background-10": "#EDA9251A", + "--sjs-semantic-yellow-foreground-100": "#FFFFFFFF", + "--sjs-semantic-white-background-500": "#FFFFFFFF", + "--sjs-code-gray-700": "#B6B6B6FF", + "--sjs-code-blue-500": "#326FCAFF", + "--sjs-code-gray-300": "#505050FF", + "--sjs-code-green-500": "#08997CFF", + "--sjs-code-red-500": "#F41B50FF", + "--sjs-code-purple-500": "#C22FA2FF", + "--sjs-code-yellow-500": "#F58D06FF", + "--sjs-code-gray-500": "#8A8A8AFF", + "--sjs-special-background": "#0C0C0CFF", + "--sjs-layer-1-foreground-75": "#FFFFFFB3", + "--sjs-layer-3-background-400": "#303030FF", + "--sjs-special-glow": "#000000BF", + "--sjs-special-shadow": "#000000FF", + "--sjs-layer-3-foreground-75": "#FFFFFFB3", + "--sjs-layer-2-foreground-100": "#FFFFFFCC", + "--sjs-layer-2-foreground-75": "#FFFFFFB3", + "--sjs-layer-2-foreground-50": "#FFFFFF66", + "--sjs-border-25-overlay": "#FFFFFF26" + } +}; +const themeCssVariables = {}; +assign(themeCssVariables, Default.cssVariables, Theme.cssVariables); +assign(Theme, { cssVariables: themeCssVariables }); + +export default Theme; +export const DefaultDark = Theme; \ No newline at end of file diff --git a/packages/survey-creator-core/src/themes/default-light.ts b/packages/survey-creator-core/src/themes/default-light.ts new file mode 100644 index 0000000000..2932daa51e --- /dev/null +++ b/packages/survey-creator-core/src/themes/default-light.ts @@ -0,0 +1,68 @@ +import { assign } from "./utils"; +import { Default } from "./default"; + +const Theme = { + "themeName": "default-light", + "isLight": true, + "cssVariables": { + "--sjs-layer-1-background-500": "#FFFFFFFF", + "--sjs-layer-1-background-400": "#F5F5F5FF", + "--sjs-layer-1-foreground-100": "#000000E6", + "--sjs-layer-1-foreground-50": "#00000080", + "--sjs-layer-3-background-500": "#F4F4F4FF", + "--sjs-layer-3-foreground-100": "#000000E6", + "--sjs-layer-3-foreground-50": "#00000080", + "--sjs-layer-2-background-500": "#F8F8F8FF", + "--sjs-layer-2-background-400": "#EEEEEEFF", + "--sjs-special-haze": "#CCEEEE59", + "--sjs-border-25": "#DCDCDCFF", + "--sjs-border-10": "#E6E6E6FF", + "--sjs-primary-background-500": "#19B394FF", + "--sjs-primary-background-10": "#19B3941A", + "--sjs-primary-background-400": "#14A48BFF", + "--sjs-primary-foreground-100": "#FFFFFFFF", + "--sjs-primary-foreground-25": "#FFFFFF40", + "--sjs-secondary-background-500": "#FF9814FF", + "--sjs-secondary-background-25": "#FF981440", + "--sjs-secondary-background-10": "#FF98141A", + "--sjs-secondary-foreground-100": "#FFFFFFFF", + "--sjs-secondary-forecolor-25": "#FFFFFF40", + "--sjs-semantic-red-background-500": "#E50A3EFF", + "--sjs-semantic-red-background-10": "#E50A3E1A", + "--sjs-semantic-red-foreground-100": "#FFFFFFFF", + "--sjs-semantic-green-background-500": "#19B394FF", + "--sjs-semantic-green-background-10": "#19B3941A", + "--sjs-semantic-green-foreground-100": "#FFFFFFFF", + "--sjs-semantic-blue-background-500": "#437FD9FF", + "--sjs-semantic-blue-background-10": "#437FD91A", + "--sjs-semantic-blue-foreground-100": "#FFFFFFFF", + "--sjs-semantic-yellow-background-500": "#FF9814FF", + "--sjs-semantic-yellow-background-10": "#FF98141A", + "--sjs-semantic-yellow-foreground-100": "#FFFFFFFF", + "--sjs-semantic-white-background-500": "#FFFFFFFF", + "--sjs-code-gray-700": "#B6B6B6FF", + "--sjs-code-blue-500": "#326FCAFF", + "--sjs-code-gray-300": "#505050FF", + "--sjs-code-green-500": "#08997CFF", + "--sjs-code-red-500": "#F41B50FF", + "--sjs-code-purple-500": "#C22FA2FF", + "--sjs-code-yellow-500": "#F58D06FF", + "--sjs-code-gray-500": "#8A8A8AFF", + "--sjs-special-background": "#EDF9F7FF", + "--sjs-layer-1-foreground-75": "#000000BF", + "--sjs-layer-3-background-400": "#EAEAEAFF", + "--sjs-special-glow": "#004C441A", + "--sjs-special-shadow": "#00000026", + "--sjs-layer-3-foreground-75": "#000000BF", + "--sjs-layer-2-foreground-100": "#000000E6", + "--sjs-layer-2-foreground-75": "#000000BF", + "--sjs-layer-2-foreground-50": "#00000080", + "--sjs-border-25-overlay": "#00000026" + } +}; +const themeCssVariables = {}; +assign(themeCssVariables, Default.cssVariables, Theme.cssVariables); +assign(Theme, { cssVariables: themeCssVariables }); + +export default Theme; +export const DefaultLight = Theme; \ No newline at end of file diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts new file mode 100644 index 0000000000..f17bb7920f --- /dev/null +++ b/packages/survey-creator-core/src/themes/default.ts @@ -0,0 +1,614 @@ +const Theme = { + "themeName": "default", + "cssVariables": { + "--ctr-toolbox-scrollbar-left": "auto", + "--ctr-toolbox-scrollbar-right": "0", + "--ctr-toolbox-scrollbar-display": "none", + "--ctr-toolbox-scroller-align-items": "flex-start", + "--ctr-toolbox-item-submenu-button-right": "8px", + "--ctr-toolbox-item-align": "stretch", + "--ctr-toolbox-submenu-offset": "13px", + "--ctr-toolbox-width-compact": "72px", + "--ctr-toolbox-separator-width": "calc(100% + 8px)", + "--ctr-toolbox-separator-width-compact": "40px", + "--ctr-toolbox-item-banner-icon-display": "none", + "--ctr-toolbox-item-banner-beak-display": "block", + "--ctr-toolbox-item-banner-left": "64px", + "--ctr-toolbox-submenu-item-min-width": "calc(17 * 8px)", + "--ctr-toolbox-group-header-margin-left": "0px", + "--ctr-button-group-item-border-width": "0px", + "--ctr-button-group-gap": "0px", + "--ctr-shadow-medium-blur": "8px", + "--ctr-shadow-large-blur": "32px", + "--ctr-shadow-large-offset-y": "16px", + "--ctr-button-group-item-border-width-selected-disabled": "0px", + "--ctr-shadow-x-large-offset-y": "32px", + "--ctr-shadow-x-large-blur": "64px", + "--ctr-property-grid-placeholder-text-max-width": "256px", + "--ctr-surface-placeholder-padding-top": "0px", + "--ctr-toolbox-group-header-margin-right": "0px", + "--ctr-property-grid-placeholder-padding-bottom": "0px", + "--ctr-editor-content-text-opacity-disabled": 0.25, + "--ctr-editor-button-icon-opacity-disabled": 0.25, + "--ctr-editor-button-icon-opacity-pressed": 0.5, + "--ctr-actionbar-button-opacity-pressed": 0.5, + "--ctr-actionbar-button-opacity-disabled": 0.25, + "--ctr-actionbar-button-opacity-muted": 0.35, + "--ctr-menu-item-opacity-disabled": 0.25, + "--ctr-menu-toolbar-button-opacity-disabled": 0.25, + "--ctr-menu-toolbar-button-opacity-pressed": 0.5, + "--ctr-toolbox-item-text-opacity-pressed": 0.5, + "--ctr-toolbox-item-icon-opacity-pressed": 0.35, + "--ctr-toolbox-item-opacity-submenu": 1, + "--ctr-toolbox-item-text-opacity-disabled": 0.25, + "--ctr-page-navigator-button-opacity-pressed": 0.5, + "--ctr-button-text-opacity-disabled": 0.25, + "--ctr-notification-opacity": "75px", + "--ctr-notification-opacity-error": 1, + "--ctr-toolbox-separator-padding-right": "0px", + "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5, + "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25, + "--ctr-survey-action-button-opacity-disabled": 0.25, + "--ctr-property-grid-form-border-width-bottom": "0px", + "--lbr-shadow-x-large-offset-y": "32px", + "--lbr-shadow-x-large-blur": "64px", + "--lbr-shadow-large-offset-y": "16px", + "--lbr-shadow-large-blur": "32px", + "--lbr-shadow-medium-blur": "8px", + "--ctr-toolbox-item-shadow-hovered-1-color": "#00000000", + "--ctr-toolbox-item-shadow-pressed-color": "#00000000", + "--ctr-toolbox-item-shadow-hovered-2-color": "#00000000", + "--ctr-toolbox-item-icon-opacity-disabled": 0.25, + "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000", + "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000", + "--ctr-toolbox-submenu-margin-left": "0px", + "--ctr-survey-page-drag-indicator-opacity": "50px", + "--ctr-line-height-unit": "8px", + "--ctr-font-unit": "8px", + "--ctr-spacing-unit": "8px", + "--ctr-corner-radius-unit": "8px", + "--ctr-stroke-unit": "1px", + "--ctr-size-unit": "8px", + "--ctr-toolbox-item-icon-color": "var(--sjs-primary-background-500)", + "--ctr-toolbox-item-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-item-icon-color-pressed": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-item-text-color-pressed": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-toolbox-border-color": "var(--sjs-border-25)", + "--ctr-toolbox-border-width-right": "var(--sjs-stroke-x1)", + "--ctr-toolbox-group-header-padding-left": "var(--sjs-spacing-x3)", + "--ctr-toolbox-group-header-padding-right": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-menu-toolbar-button-background-color-selected": "var(--sjs-primary-background-10)", + "--ctr-menu-toolbar-button-icon-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-menu-toolbar-button-icon-color-selected": "var(--sjs-primary-background-500)", + "--ctr-toolbox-item-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-toolbox-item-text-color-hovered": "var(--sjs-layer-1-foreground-100)", + "--ctr-property-grid-form-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-list-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-button-group-item-border-color": "var(--sjs-border-10)", + "--ctr-button-group-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-button-group-item-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-button-group-item-text-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-menu-item-icon-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-button-group-item-icon-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-button-group-item-background-color-hovered": "var(--sjs-layer-3-background-400)", + "--ctr-button-group-item-text-color-selected": "var(--sjs-primary-background-500)", + "--ctr-button-group-item-icon-color-selected": "var(--sjs-primary-background-500)", + "--ctr-editor-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-editor-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-editor-border-color": "var(--sjs-border-10)", + "--ctr-editor-background-color-disabled": "var(--sjs-layer-1-background-500)", + "--ctr-editor-button-icon-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-editor-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-radio-button-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-radio-button-border-color": "var(--sjs-border-10)", + "--ctr-checkbox-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-checkbox-border-color": "var(--sjs-border-10)", + "--ctr-checkbox-button-check-mark-color": "var(--sjs-primary-background-500)", + "--ctr-radio-button-background-color-hovered": "var(--sjs-layer-3-background-400)", + "--ctr-radio-button-background-color-disabled": "var(--sjs-layer-1-background-500)", + "--ctr-checkbox-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-checkbox-button-check-mark-color-disabled": "var(--sjs-border-25)", + "--ctr-checkbox-background-color-hovered": "var(--sjs-layer-3-background-400)", + "--ctr-checkbox-background-color-disabled": "var(--sjs-layer-1-background-500)", + "--ctr-checkbox-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-list-padding-left": "var(--sjs-spacing-x1)", + "--ctr-list-padding-right": "var(--sjs-spacing-x1)", + "--ctr-actionbar-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-popup-menu-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-popup-menu-footer-padding-left": "var(--sjs-spacing-x1)", + "--ctr-button-group-item-background-color-disabled": "var(--sjs-layer-1-background-500)", + "--ctr-radio-button-background-color-selected-hovered": "var(--sjs-layer-1-background-500)", + "--ctr-checkbox-background-color-selected-hovered": "var(--sjs-layer-1-background-500)", + "--ctr-radio-button-border-color-disabled": "var(--sjs-border-10)", + "--ctr-checkbox-border-color-disabled": "var(--sjs-border-10)", + "--ctr-button-group-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-button-group-padding": "var(--sjs-spacing-x05)", + "--ctr-button-group-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-button-group-border-color": "var(--sjs-border-10)", + "--ctr-button-group-border-width": "var(--sjs-stroke-x1)", + "--ctr-button-group-item-padding-vertical": "var(--sjs-spacing-x1)", + "--ctr-button-group-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-button-group-item-text-color-disabled": "var(--sjs-layer-3-foreground-100)", + "--ctr-survey-page-background-color-selected": "var(--sjs-special-background)", + "--ctr-surface-background-color": "var(--sjs-special-background)", + "--ctr-survey-question-panel-toolbar-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-popup-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-popup-corner-radius": "var(--sjs-corner-radius-x2)", + "--ctr-shadow-large-color": "var(--sjs-special-glow)", + "--ctr-shadow-medium-color": "var(--sjs-special-glow)", + "--ctr-button-padding-horizontal-small": "var(--sjs-spacing-x4)", + "--ctr-button-padding-vertical-small": "var(--sjs-spacing-x150)", + "--ctr-button-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-button-corner-radius-small": "var(--sjs-corner-radius-x075)", + "--ctr-list-item-icon-color": "var(--sjs-primary-background-500)", + "--ctr-list-item-icon-color-selected": "var(--sjs-primary-foreground-100)", + "--ctr-list-item-icon-color-disabled": "var(--sjs-layer-1-foreground-75)", + "--ctr-editor-button-background-color-hovered": "var(--sjs-layer-3-background-400)", + "--ctr-survey-page-toolbar-item-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-survey-page-toolbar-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-list-search-icon-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-caption-with-actions-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-label-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-label-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-caption-with-actions-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-radio-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-checkbox-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-button-group-item-background-color-selected-disabled": "var(--sjs-layer-1-background-400)", + "--ctr-popup-haze-background-color": "var(--sjs-special-haze)", + "--ctr-shadow-small-color": "var(--sjs-special-shadow)", + "--ctr-shadow-x-large-color": "var(--sjs-special-glow)", + "--ctr-actionbar-button-icon-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-actionbar-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-actionbar-button-icon-color-with-text-disabled": "var(--sjs-layer-1-foreground-75)", + "--ctr-list-item-submenu-arrow-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-page-navigator-button-icon-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-page-navigator-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-property-grid-tabs-padding-left": "var(--sjs-spacing-x150)", + "--ctr-property-grid-tabs-padding-bottom": "var(--sjs-spacing-x150)", + "--ctr-property-grid-tabs-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-property-grid-tabs-border-width": "var(--sjs-stroke-x1)", + "--ctr-property-grid-tabs-border-color": "var(--sjs-border-25)", + "--ctr-property-grid-tabs-separator-margin": "var(--sjs-spacing-x150)", + "--ctr-property-grid-tabs-gap": "var(--sjs-spacing-x150)", + "--ctr-property-grid-border-color": "var(--sjs-border-25)", + "--ctr-property-grid-placeholder-padding-left": "var(--sjs-spacing-x6)", + "--ctr-property-grid-placeholder-padding-top": "var(--sjs-spacing-x12)", + "--ctr-property-grid-placeholder-image-margin-top": "var(--sjs-spacing-x3)", + "--ctr-property-grid-placeholder-text-gap": "var(--sjs-spacing-x1)", + "--ctr-property-grid-placeholder-text-title-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-property-grid-placeholder-text-description-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-surface-placeholder-padding-left": "var(--sjs-spacing-x6)", + "--ctr-surface-placeholder-padding-bottom": "var(--sjs-spacing-x16)", + "--ctr-surface-placeholder-text-margin-top": "var(--sjs-spacing-x4)", + "--ctr-surface-placeholder-text-margin-bottom": "var(--sjs-spacing-x6)", + "--ctr-surface-placeholder-text-gap": "var(--sjs-spacing-x1)", + "--ctr-surface-placeholder-max-width": "var(--sjs-size-x90)", + "--ctr-surface-placeholder-padding-right": "var(--sjs-spacing-x6)", + "--ctr-property-grid-tabs-padding-right": "var(--sjs-spacing-x150)", + "--ctr-property-grid-tabs-padding-top": "var(--sjs-spacing-x150)", + "--ctr-property-grid-placeholder-padding-right": "var(--sjs-spacing-x6)", + "--ctr-popup-menu-footer-padding-right": "var(--sjs-spacing-x1)", + "--ctr-editor-content-text-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-editor-label-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-editor-content-icon-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-editor-content-text-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-editor-button-text-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-editor-label-color-disabled": "var(--sjs-layer-3-foreground-100)", + "--ctr-editor-content-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-editor-button-icon-color-disabled": "var(--sjs-layer-3-foreground-75)", + "--ctr-radio-button-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-checkbox-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-checkbox-description-text-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)", + "--ctr-actionbar-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-actionbar-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-list-item-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-list-item-background-color-selected": "var(--sjs-primary-background-500)", + "--ctr-list-item-text-color-selected": "var(--sjs-primary-foreground-100)", + "--ctr-list-item-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-list-item-text-color-hovered": "var(--sjs-layer-1-foreground-100)", + "--ctr-list-item-submenu-arrow-color-hovered-item": "var(--sjs-layer-1-foreground-75)", + "--ctr-list-item-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-list-item-contextual-buttons-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-list-item-color-swatch-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-menu-item-icon-width": "var(--sjs-size-x3)", + "--ctr-menu-item-icon-height": "var(--sjs-size-x3)", + "--ctr-menu-item-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-menu-item-padding-left": "var(--sjs-spacing-x3)", + "--ctr-menu-item-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-menu-item-border-color-selected": "var(--sjs-primary-background-500)", + "--ctr-menu-item-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-menu-toolbar-button-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-menu-toolbar-button-icon-width": "var(--sjs-size-x3)", + "--ctr-menu-toolbar-button-icon-height": "var(--sjs-size-x3)", + "--ctr-menu-toolbar-button-padding-left": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-gap": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-padding-top": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-text-color-secondary": "var(--sjs-layer-1-foreground-50)", + "--ctr-menu-toolbar-button-text-color-selected": "var(--sjs-primary-background-500)", + "--ctr-menu-toolbar-button-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-menu-toolbar-button-background-color-pressed": "var(--sjs-layer-1-background-400)", + "--ctr-toolbox-item-icon-width": "var(--sjs-size-x3)", + "--ctr-toolbox-item-icon-height": "var(--sjs-size-x3)", + "--ctr-toolbox-item-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-toolbox-item-padding-left": "var(--sjs-spacing-x150)", + "--ctr-toolbox-item-padding-right": "var(--sjs-spacing-x2)", + "--ctr-toolbox-item-padding-top": "var(--sjs-spacing-x1)", + "--ctr-toolbox-item-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-toolbox-item-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-toolbox-item-padding-right-no-text": "var(--sjs-spacing-x1)", + "--ctr-toolbox-item-border-color-floating": "var(--sjs-secondary-background-500)", + "--ctr-toolbox-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-page-navigator-item-dot-radius-small": "var(--sjs-size-x075)", + "--ctr-page-navigator-item-dot-border-color-selected": "var(--sjs-layer-3-foreground-75)", + "--ctr-page-navigator-item-dot-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-page-navigator-item-dot-color-default": "var(--sjs-layer-3-foreground-75)", + "--ctr-page-navigator-item-dot-color-selected": "var(--sjs-special-background)", + "--ctr-page-navigator-item-background-color-hovered": "var(--sjs-layer-1-background-500)", + "--ctr-page-navigator-item-text-color-hovered": "var(--sjs-layer-1-foreground-100)", + "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-button-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-button-text-color": "var(--sjs-primary-background-500)", + "--ctr-button-gap": "var(--sjs-spacing-x4)", + "--ctr-button-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-button-background-color-danger": "var(--sjs-semantic-red-background-500)", + "--ctr-button-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-button-background-color-cta": "var(--sjs-primary-background-500)", + "--ctr-button-background-color-cta-hovered": "var(--sjs-primary-background-400)", + "--ctr-button-text-color-cta": "var(--sjs-primary-foreground-100)", + "--ctr-collapse-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-collapse-button-icon-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-collapse-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-collapse-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-property-grid-switcher-text-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-property-grid-chapter-caption-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-property-grid-chapter-caption-border-color": "var(--sjs-border-25)", + "--ctr-property-grid-chapter-caption-text-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-property-grid-chapter-caption-text-color-selected": "var(--sjs-layer-1-foreground-100)", + "--ctr-property-grid-chapter-caption-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-property-grid-chapter-caption-background-color-focused": "var(--sjs-layer-1-background-400)", + "--ctr-property-grid-chapter-caption-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-expression-item-background-color-parameter": "var(--sjs-semantic-blue-background-10)", + "--ctr-expression-item-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-expression-item-text-color-parameter": "var(--sjs-layer-3-foreground-100)", + "--ctr-expression-item-background-color-parameter-hovered": "var(--sjs-semantic-blue-background-500)", + "--ctr-expression-item-background-color-parameter-error": "var(--sjs-layer-1-background-500)", + "--ctr-expression-item-text-color-parameter-hovered": "var(--sjs-semantic-blue-foreground-100)", + "--ctr-expression-item-text-color-parameter-empty": "var(--sjs-layer-3-foreground-50)", + "--ctr-expression-item-text-color-parameter-error": "var(--sjs-semantic-red-background-500)", + "--ctr-expression-item-text-color-operator": "var(--sjs-layer-3-foreground-100)", + "--ctr-expression-item-text-color-operator-hovered": "var(--sjs-semantic-yellow-foreground-100)", + "--ctr-expression-item-text-color-operator-empty": "var(--sjs-layer-3-foreground-50)", + "--ctr-expression-item-text-color-conjunction": "var(--sjs-layer-3-foreground-100)", + "--ctr-expression-item-text-color-conjunction-hovered": "var(--sjs-semantic-yellow-foreground-100)", + "--ctr-expression-item-text-color-action": "var(--sjs-layer-3-foreground-100)", + "--ctr-expression-item-text-color-action-hovered": "var(--sjs-semantic-red-foreground-100)", + "--ctr-expression-item-text-color-button": "var(--sjs-primary-background-500)", + "--ctr-expression-item-text-color-button-hovered": "var(--sjs-primary-foreground-100)", + "--ctr-expression-item-background-color-operator": "var(--sjs-semantic-yellow-background-10)", + "--ctr-expression-item-background-color-operator-hovered": "var(--sjs-semantic-yellow-background-500)", + "--ctr-expression-item-background-color-conjunction": "var(--sjs-semantic-yellow-background-10)", + "--ctr-expression-item-background-color-conjunction-hovered": "var(--sjs-semantic-yellow-background-500)", + "--ctr-expression-item-background-color-action": "var(--sjs-semantic-red-background-10)", + "--ctr-expression-item-background-color-action-hovered": "var(--sjs-semantic-red-background-500)", + "--ctr-expression-item-background-color-button": "var(--sjs-primary-background-10)", + "--ctr-expression-item-background-color-button-hovered": "var(--sjs-primary-background-500)", + "--ctr-expression-item-text-color-function": "var(--sjs-layer-3-foreground-100)", + "--ctr-data-table-background-color": "var(--sjs-layer-1-background-400)", + "--ctr-data-table-border-color": "var(--sjs-border-25)", + "--ctr-separator-width": "var(--sjs-size-x0125)", + "--ctr-separator-color": "var(--sjs-border-25)", + "--ctr-popup-padding-left": "var(--sjs-spacing-x4)", + "--ctr-popup-padding-right": "var(--sjs-spacing-x4)", + "--ctr-popup-padding-top": "var(--sjs-spacing-x4)", + "--ctr-popup-padding-bottom": "var(--sjs-spacing-x4)", + "--ctr-popup-gap": "var(--sjs-spacing-x4)", + "--ctr-popup-title-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-popup-message-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-popup-buttons-gap": "var(--sjs-spacing-x2)", + "--ctr-popup-description-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-toolbox-group-header-padding-top": "var(--sjs-spacing-x1)", + "--ctr-toolbox-group-header-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-toolbox-group-header-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-notification-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-notification-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-notification-text-color-error": "var(--sjs-semantic-red-foreground-100)", + "--ctr-notification-background-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-string-table-row-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-string-table-row-border-color": "var(--sjs-border-10)", + "--ctr-string-table-row-text-color-title": "var(--sjs-layer-1-foreground-100)", + "--ctr-string-table-row-expand-button-icon-color-default": "var(--sjs-layer-1-foreground-75)", + "--ctr-string-table-header-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-string-table-header-text-color": "var(--sjs-layer-3-foreground-75)", + "--ctr-string-table-group-header-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-string-table-group-header-text-color": "var(--sjs-layer-2-foreground-75)", + "--ctr-text-decor-text-color-code": "var(--sjs-layer-1-foreground-100)", + "--ctr-menu-border-color": "var(--sjs-border-25)", + "--ctr-property-grid-header-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-property-grid-header-padding-left": "var(--sjs-spacing-x2)", + "--ctr-property-grid-header-padding-right": "var(--sjs-spacing-x2)", + "--ctr-property-grid-header-padding-top": "var(--sjs-spacing-x150)", + "--ctr-property-grid-header-padding-bottom": "var(--sjs-spacing-x150)", + "--ctr-property-grid-header-border-color": "var(--sjs-primary-background-500)", + "--ctr-property-grid-header-border-width-bottom": "var(--sjs-stroke-x2)", + "--ctr-caption-with-actions-description-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-caption-with-actions-description-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)", + "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)", + "--ctr-data-table-row-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)", + "--ctr-data-table-row-border-color": "var(--sjs-border-10)", + "--ctr-data-table-row-drag-area-icon-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-data-table-row-background-color-drop-spot": "var(--sjs-layer-1-background-400)", + "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)", + "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)", + "--ctr-error-message-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-separator-color": "var(--sjs-border-25)", + "--ctr-toolbox-separator-padding-top": "var(--sjs-spacing-x1)", + "--ctr-toolbox-separator-max-width": "var(--sjs-size-max)", + "--ctr-toolbox-separator-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-toolbox-gap": "var(--sjs-spacing-x05)", + "--ctr-toolbox-padding-top": "var(--sjs-spacing-x150)", + "--ctr-toolbox-padding-bottom": "var(--sjs-spacing-x2)", + "--ctr-toolbox-group-gap": "var(--sjs-spacing-x05)", + "--ctr-toolbox-group-padding-left": "var(--sjs-spacing-x150)", + "--ctr-toolbox-group-padding-right": "var(--sjs-spacing-x150)", + "--ctr-button-contextual-button-background-color-hovered": "var(--sjs-layer-3-background-500)", + "--ctr-button-contextual-button-background-color-focused": "var(--sjs-primary-background-10)", + "--ctr-survey-question-panel-toolbar-item-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)", + "--ctr-survey-question-panel-toolbar-item-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)", + "--ctr-survey-page-toolbar-item-icon-color-pressed": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-page-toolbar-item-text-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-survey-page-toolbar-item-background-color-selected": "var(--sjs-primary-background-10)", + "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-preview-pager-border-color": "var(--sjs-border-25)", + "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-code-viewer-line-number-panel-text-color": "var(--sjs-layer-2-foreground-50)", + "--ctr-property-grid-group-caption-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-group-header-expand-button-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-editor-border-width": "var(--sjs-stroke-x1)", + "--ctr-editor-border-width-focused": "var(--sjs-stroke-x2)", + "--ctr-editor-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-editor-border-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-surface-placeholder-text-title-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-surface-placeholder-text-description-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-page-placeholder-text-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-placeholder-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-survey-placeholder-border-color": "var(--sjs-border-25)", + "--ctr-survey-drop-indicator-color": "var(--sjs-primary-background-500)", + "--ctr-property-grid-search-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-property-grid-search-text-color": "var(--sjs-layer-3-foreground-100)", + "--ctr-property-grid-search-text-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-property-grid-search-border-color": "var(--sjs-border-10)", + "--ctr-search-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)", + "--ctr-search-button-icon-color-clear-hovered": "var(--sjs-semantic-red-background-500)", + "--ctr-search-button-background-color-clear-hovered": "var(--sjs-semantic-red-background-10)", + "--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-property-grid-search-count-text-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-scrollbar-background-color": "var(--sjs-border-10)", + "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)", + "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)", + "--ctr-survey-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)", + "--ctr-survey-action-button-text-color-positive": "var(--sjs-primary-background-500)", + "--ctr-survey-action-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)", + "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)", + "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)", + "--lbr-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)", + "--ctr-property-grid-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-survey-header-logo-placeholder-icon-color": "var(--sjs-layer-3-foreground-50)", + "--lbr-notification-padding-left": "var(--sjs-spacing-x2)", + "--lbr-notification-padding-right": "var(--sjs-spacing-x2)", + "--lbr-notification-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--lbr-notification-padding-left-with-button": "var(--sjs-spacing-x2)", + "--lbr-notification-padding-top-with-button": "var(--sjs-spacing-x3)", + "--lbr-notification-padding-bottom-with-button": "var(--sjs-spacing-x3)", + "--ctr-survey-image-picker-drop-spot-color": "var(--sjs-layer-2-background-500)", + "--ctr-data-table-row-corner-radius-floating": "var(--sjs-corner-radius-x05)", + "--ctr-survey-item-actionbar-drag-indicator-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)", + "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)", + "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)", + "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)", + "--ctr-toolbox-search-border-color": "var(--sjs-border-25)", + "--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)", + "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-clear-button-icon-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-clear-button-background-color-hovered": "var(--sjs-semantic-red-background-10)", + "--ctr-search-icon-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-toolbox-search-icon-color": "var(--sjs-primary-background-500)", + "--ctr-toolbox-search-clear-button-icon-color-hovered": "var(--sjs-semantic-red-background-500)", + "--ctr-toolbox-group-header-margin-top": "var(--sjs-spacing-x1)", + "--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)", + "--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)", + "--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)", + "--ctr-font-large-size": "var(--sjs-font-size-x4)", + "--ctr-font-large-line-height": "var(--sjs-line-height-x5)", + "--ctr-font-medium-size": "var(--sjs-font-size-x3)", + "--ctr-font-medium-line-height": "var(--sjs-line-height-x4)", + "--ctr-font-default-size": "var(--sjs-font-size-x2)", + "--ctr-font-default-line-height": "var(--sjs-line-height-x3)", + "--ctr-font-small-size": "var(--sjs-font-size-x150)", + "--ctr-font-small-line-height": "var(--sjs-line-height-x2)", + "--ctr-font-code-size": "var(--sjs-font-size-x2)", + "--ctr-font-code-line-height": "var(--sjs-line-height-x3)", + "--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + "--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + "--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)", + "--ctr-survey-ranking-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + "--ctr-survey-header-logo-placeholder-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-survey-header-logo-placeholder-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-survey-header-text-title-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-header-text-description-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-page-border-color-selected": "var(--sjs-secondary-background-500)", + "--ctr-survey-page-header-title-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-page-background-color-hovered": "var(--sjs-special-background)", + "--ctr-list-search-border-color": "var(--sjs-border-25)", + "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-toolbox-shadow-floating-2-offset-x": "var(--ctr-shadow-large-offset-x)", + "--ctr-toolbox-shadow-floating-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-toolbox-shadow-floating-2-offset-y": "var(--ctr-shadow-large-offset-y)", + "--ctr-toolbox-shadow-floating-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-shadow-floating-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-toolbox-shadow-floating-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-toolbox-shadow-floating-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-toolbox-shadow-floating-2-color": "var(--ctr-shadow-large-color)", + "--ctr-toolbox-shadow-floating-1-color": "var(--ctr-shadow-medium-color)", + "--ctr-toolbox-submenu-group-margin-left": "var(--sjs-spacing-x150)", + "--ctr-toolbox-item-shadow-hovered-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-toolbox-item-shadow-hovered-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-toolbox-item-shadow-hovered-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-item-shadow-hovered-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-toolbox-item-shadow-pressed-offset-x": "var(--ctr-shadow-small-offset-x)", + "--ctr-toolbox-item-shadow-pressed-offset-y": "var(--ctr-shadow-small-offset-y)", + "--ctr-toolbox-item-shadow-pressed-blur": "var(--ctr-shadow-small-blur)", + "--ctr-toolbox-item-shadow-pressed-spread": "var(--ctr-shadow-small-spread)", + "--ctr-toolbox-item-shadow-hovered-2-offset-x": "var(--ctr-shadow-small-offset-x)", + "--ctr-toolbox-item-shadow-hovered-2-offset-y": "var(--ctr-shadow-small-offset-y)", + "--ctr-toolbox-item-shadow-hovered-2-blur": "var(--ctr-shadow-small-blur)", + "--ctr-toolbox-item-shadow-hovered-2-spread": "var(--ctr-shadow-small-spread)", + "--ctr-button-shadow-offset-x": "var(--ctr-shadow-small-offset-x)", + "--ctr-button-shadow-offset-y": "var(--ctr-shadow-small-offset-y)", + "--ctr-button-shadow-blur": "var(--ctr-shadow-small-blur)", + "--ctr-button-shadow-spread": "var(--ctr-shadow-small-spread)", + "--ctr-button-shadow-color": "var(--ctr-shadow-small-color)", + "--ctr-popup-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-popup-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-popup-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-popup-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-popup-shadow-1-color": "var(--ctr-shadow-medium-color)", + "--ctr-popup-shadow-2-offset-x": "var(--ctr-shadow-large-offset-x)", + "--ctr-popup-shadow-2-offset-y": "var(--ctr-shadow-large-offset-y)", + "--ctr-popup-shadow-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-popup-shadow-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-popup-shadow-2-color": "var(--ctr-shadow-large-color)", + "--ctr-popup-shadow-3-offset-x": "var(--ctr-shadow-x-large-offset-x)", + "--ctr-popup-shadow-3-offset-y": "var(--ctr-shadow-x-large-offset-y)", + "--ctr-popup-shadow-3-blur": "var(--ctr-shadow-x-large-blur)", + "--ctr-popup-shadow-3-spread": "var(--ctr-shadow-x-large-spread)", + "--ctr-popup-shadow-3-color": "var(--ctr-shadow-x-large-color)", + "--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)", + "--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)", + "--ctr-toolbox-min-width": "var(--sjs-size-x32)", + "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)", + "--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)", + "--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)", + "--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)", + "--ctr-toolbox-group-padding-right-compact": "var(--sjs-spacing-x150)", + "--ctr-survey-question-panel-floating-toolbar-padding-left": "var(--sjs-spacing-x150)", + "--ctr-survey-question-panel-floating-toolbar-padding-right": "var(--sjs-spacing-x150)", + "--ctr-toolbox-item-icon-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-toolbox-item-margin-horizontal-no-text": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-padding-left-no-text": "var(--sjs-spacing-x1)", + "--ctr-toolbox-item-background-color-pressed": "var(--sjs-layer-1-background-400)", + "--ctr-toolbox-submenu-group-margin-right": "var(--sjs-spacing-x150)", + "--ctr-toolbox-submenu-group-margin-top": "var(--sjs-spacing-x150)", + "--ctr-toolbox-submenu-group-margin-bottom": "var(--sjs-spacing-x150)", + "--ctr-toolbox-submenu-group-margin-bottom-last": "var(--sjs-spacing-x150)", + "--ctr-toolbox-submenu-group-border-width-bottom": "var(--sjs-stroke-x1)", + "--ctr-toolbox-submenu-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-toolbox-submenu-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-toolbox-submenu-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-toolbox-submenu-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-toolbox-submenu-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-submenu-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-toolbox-submenu-shadow-1-color": "var(--ctr-shadow-medium-color)", + "--ctr-toolbox-submenu-shadow-2-offset-x": "var(--ctr-shadow-large-offset-x)", + "--ctr-toolbox-submenu-shadow-2-offset-y": "var(--ctr-shadow-large-offset-y)", + "--ctr-toolbox-submenu-shadow-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)", + "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)", + "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)", + "--ctr-list-item-submenu-arrow-color-selected-item-submenu": "var(--sjs-layer-1-foreground-75)", + "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)", + "--ctr-menu-toolbar-button-padding-right": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-menu-item-padding-right": "var(--sjs-spacing-x3)", + "--ctr-menu-item-padding-right-icon": "var(--sjs-spacing-x2)", + "--ctr-menu-toolbar-button-padding-top-with-description": "var(--sjs-spacing-x05)", + "--ctr-property-grid-header-padding-top-with-subtitle": "var(--sjs-spacing-x075)", + "--ctr-property-grid-header-padding-bottom-with-subtitle": "var(--sjs-spacing-x075)", + "--ctr-data-table-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-data-table-placeholder-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-list-item-label-icon-color-hovered": "var(--sjs-layer-1-foreground-50)", + "--ctr-list-item-label-icon-color-disabled": "var(--sjs-layer-1-foreground-75)", + "--ctr-data-table-form-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-data-table-form-border-color": "var(--sjs-border-10)", + "--ctr-menu-toolbar-button-padding-left-with-description": "var(--sjs-spacing-x150)", + "--ctr-menu-toolbar-button-padding-right-with-description": "var(--sjs-spacing-x150)", + "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)", + "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)", + "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)", + "--ctr-toggle-button-thumb-background-color-active": "var(--sjs-layer-3-foreground-75)", + "--ctr-toggle-button-thumb-corner-radius": "var(--sjs-corner-radius-round)", + "--ctr-toggle-button-corner-radius": "var(--sjs-corner-radius-round)", + "--ctr-toggle-button-gap": "var(--sjs-spacing-x05)", + "--ctr-toggle-button-padding-left": "var(--sjs-spacing-x075)", + "--ctr-toggle-button-padding-right": "var(--sjs-spacing-x075)", + "--ctr-toggle-button-padding-top": "var(--sjs-spacing-x075)", + "--ctr-toggle-button-padding-bottom": "var(--sjs-spacing-x075)", + "--ctr-toggle-button-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-toggle-button-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-border-color": "var(--sjs-border-10)", + "--ctr-toggle-button-thumb-width": "var(--sjs-size-x150)", + "--ctr-toggle-button-thumb-height": "var(--sjs-size-x150)", + "--ctr-toggle-button-background-color-checked": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-thumb-background-color-checked-focused": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-background-color-checked-focused": "var(--sjs-primary-foreground-100)", + "--ctr-toggle-button-background-color-hovered": "var(--sjs-layer-3-background-400)", + "--ctr-toggle-button-label-text-color": "var(--sjs-layer-1-foreground-100)", + "--ctr-toggle-button-gap-label": "var(--sjs-spacing-x1)", + "--ctr-toggle-button-thumb-background-color-checked": "var(--sjs-primary-foreground-100)", + "--ctr-toggle-button-thumb-border-color": "var(--sjs-border-10)", + "--ctr-toolbox-item-submenu-button-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-toolbox-item-submenu-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-toolbox-item-submenu-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-toolbox-item-submenu-button-padding-left": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-submenu-button-padding-right": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-submenu-button-padding-top": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-submenu-button-padding-bottom": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-submenu-button-icon-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-item-submenu-button-margin-right": "var(--sjs-spacing-x1n)", + "--ctr-survey-matching-item-padding-right-floating": "var(--sjs-spacing-x1)", + "--ctr-survey-matching-item-padding-top-floating": "var(--sjs-spacing-x1)", + "--ctr-survey-matching-item-padding-bottom-floating": "var(--sjs-spacing-x1)", + "--ctr-survey-matching-item-corner-radius-floating": "var(--sjs-corner-radius-x2)", + "--ctr-tooltip-corder-radius": "var(--sjs-corner-radius-x075)", + "--ctr-tooltip-padding-left": "var(--sjs-spacing-x3)", + "--ctr-tooltip-padding-right": "var(--sjs-spacing-x3)", + "--ctr-tooltip-padding-top": "var(--sjs-spacing-x2)", + "--ctr-tooltip-padding-bottom": "var(--sjs-spacing-x2)", + "--ctr-tooltip-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-tooltip-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-tooltip-shadow-2-offset-x": "var(--ctr-shadow-small-offset-x)", + "--ctr-tooltip-shadow-2-offset-y": "var(--ctr-shadow-small-offset-y)", + "--ctr-tooltip-shadow-2-blur": "var(--ctr-shadow-small-blur)", + "--ctr-tooltip-shadow-2-spread": "var(--ctr-shadow-small-spread)", + "--ctr-tooltip-shadow-2-color": "var(--ctr-shadow-small-color)", + "--ctr-tooltip-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-tooltip-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-tooltip-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-tooltip-shadow-1-color": "var(--ctr-shadow-medium-color)", + "--ctr-super-tooltip-corder-radius": "var(--sjs-corner-radius-x075)", + "--ctr-menu-item-padding-bottom": "var(--sjs-spacing-x250)", + "--ctr-menu-item-padding-top": "var(--sjs-spacing-x250)" + } +}; +export default Theme; +export const Default = Theme; \ No newline at end of file diff --git a/packages/survey-creator-core/src/themes/index.ts b/packages/survey-creator-core/src/themes/index.ts new file mode 100644 index 0000000000..84305229a7 --- /dev/null +++ b/packages/survey-creator-core/src/themes/index.ts @@ -0,0 +1,6 @@ +import DefaultLightTheme from "./default-light"; +export const DefaultLight = DefaultLightTheme; +import DefaultDarkTheme from "./default-dark"; +export const DefaultDark = DefaultDarkTheme; +import DefaultContrastTheme from "./default-contrast"; +export const DefaultContrast = DefaultContrastTheme; diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css b/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css new file mode 100644 index 0000000000..e10619845f --- /dev/null +++ b/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css @@ -0,0 +1,57 @@ + /* Variables */ + :root { + --sjs-layer-1-background-500: #FFFFFFFF; + --sjs-layer-1-background-400: #EBEBEBFF; + --sjs-layer-1-foreground-100: #000000FF; + --sjs-layer-1-foreground-50: #00000099; + --sjs-layer-3-background-500: #EBEBEBFF; + --sjs-layer-3-foreground-100: #000000FF; + --sjs-layer-3-foreground-50: #00000099; + --sjs-layer-2-background-500: #F0F0F0FF; + --sjs-layer-2-background-400: #DCDCDCFF; + --sjs-special-haze: #D5C7FB59; + --sjs-border-25: #C8C8C8FF; + --sjs-border-10: #C8C8C8FF; + --sjs-primary-background-500: #3A179EFF; + --sjs-primary-background-10: #3A179E1A; + --sjs-primary-background-400: #240973FF; + --sjs-primary-foreground-100: #FFFFFFFF; + --sjs-primary-foreground-25: #FFFFFF40; + --sjs-secondary-background-500: #3A179EFF; + --sjs-secondary-background-25: #3A179E40; + --sjs-secondary-background-10: #3A179E1A; + --sjs-secondary-foreground-100: #FFFFFFFF; + --sjs-secondary-forecolor-25: #FFFFFF40; + --sjs-semantic-red-background-500: #E50A66FF; + --sjs-semantic-red-background-10: #E50A661A; + --sjs-semantic-red-foreground-100: #FFFFFFFF; + --sjs-semantic-green-background-500: #19AAB3FF; + --sjs-semantic-green-background-10: #19AAB31A; + --sjs-semantic-green-foreground-100: #FFFFFFFF; + --sjs-semantic-blue-background-500: #4F43D9FF; + --sjs-semantic-blue-background-10: #4F43D91A; + --sjs-semantic-blue-foreground-100: #FFFFFFFF; + --sjs-semantic-yellow-background-500: #FF710BFF; + --sjs-semantic-yellow-background-10: #FF710B1A; + --sjs-semantic-yellow-foreground-100: #FFFFFFFF; + --sjs-semantic-white-background-500: #FFFFFFFF; + --sjs-code-gray-700: #B6B6B6FF; + --sjs-code-blue-500: #326FCAFF; + --sjs-code-gray-300: #505050FF; + --sjs-code-green-500: #08997CFF; + --sjs-code-red-500: #F41B50FF; + --sjs-code-purple-500: #C22FA2FF; + --sjs-code-yellow-500: #F58D06FF; + --sjs-code-gray-500: #8A8A8AFF; + --sjs-special-background: #F4F2FBFF; + --sjs-layer-1-foreground-75: #000000FF; + --sjs-layer-3-background-400: #D7D7D7FF; + --sjs-special-glow: #240A6D1A; + --sjs-special-shadow: #00000040; + --sjs-layer-3-foreground-75: #000000FF; + --sjs-layer-2-foreground-100: #000000FF; + --sjs-layer-2-foreground-75: #000000FF; + --sjs-layer-2-foreground-50: #00000099; + --sjs-border-25-overlay: #00000040; +} + diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css b/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css new file mode 100644 index 0000000000..255b4ad505 --- /dev/null +++ b/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css @@ -0,0 +1,57 @@ + /* Variables */ + :root { + --sjs-layer-1-background-500: #181818FF; + --sjs-layer-1-background-400: #282828FF; + --sjs-layer-1-foreground-100: #FFFFFFCC; + --sjs-layer-1-foreground-50: #FFFFFF66; + --sjs-layer-3-background-500: #202020FF; + --sjs-layer-3-foreground-100: #FFFFFFCC; + --sjs-layer-3-foreground-50: #FFFFFF66; + --sjs-layer-2-background-500: #101010FF; + --sjs-layer-2-background-400: #202020FF; + --sjs-special-haze: #000000BF; + --sjs-border-25: #2D2D2DFF; + --sjs-border-10: #2D2D2DFF; + --sjs-primary-background-500: #3EDFD5FF; + --sjs-primary-background-10: #3EDFD51A; + --sjs-primary-background-400: #29DCD1FF; + --sjs-primary-foreground-100: #0C0C0CFF; + --sjs-primary-foreground-25: #0C0C0C40; + --sjs-secondary-background-500: #EDA925FF; + --sjs-secondary-background-25: #EDA92540; + --sjs-secondary-background-10: #EDA9251A; + --sjs-secondary-foreground-100: #0C0C0CFF; + --sjs-secondary-forecolor-25: #0C0C0C40; + --sjs-semantic-red-background-500: #FF3B6AFF; + --sjs-semantic-red-background-10: #FF3B6A1A; + --sjs-semantic-red-foreground-100: #FFFFFFFF; + --sjs-semantic-green-background-500: #3EDFD5FF; + --sjs-semantic-green-background-10: #3EDFD51A; + --sjs-semantic-green-foreground-100: #FFFFFFFF; + --sjs-semantic-blue-background-500: #66B4FCFF; + --sjs-semantic-blue-background-10: #66B4FC1A; + --sjs-semantic-blue-foreground-100: #FFFFFFFF; + --sjs-semantic-yellow-background-500: #EDA925FF; + --sjs-semantic-yellow-background-10: #EDA9251A; + --sjs-semantic-yellow-foreground-100: #FFFFFFFF; + --sjs-semantic-white-background-500: #FFFFFFFF; + --sjs-code-gray-700: #B6B6B6FF; + --sjs-code-blue-500: #326FCAFF; + --sjs-code-gray-300: #505050FF; + --sjs-code-green-500: #08997CFF; + --sjs-code-red-500: #F41B50FF; + --sjs-code-purple-500: #C22FA2FF; + --sjs-code-yellow-500: #F58D06FF; + --sjs-code-gray-500: #8A8A8AFF; + --sjs-special-background: #0C0C0CFF; + --sjs-layer-1-foreground-75: #FFFFFFB3; + --sjs-layer-3-background-400: #303030FF; + --sjs-special-glow: #000000BF; + --sjs-special-shadow: #000000FF; + --sjs-layer-3-foreground-75: #FFFFFFB3; + --sjs-layer-2-foreground-100: #FFFFFFCC; + --sjs-layer-2-foreground-75: #FFFFFFB3; + --sjs-layer-2-foreground-50: #FFFFFF66; + --sjs-border-25-overlay: #FFFFFF26; +} + diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/light.css b/packages/survey-creator-core/src/themes/predefined-themes/default/light.css new file mode 100644 index 0000000000..522298e0ed --- /dev/null +++ b/packages/survey-creator-core/src/themes/predefined-themes/default/light.css @@ -0,0 +1,57 @@ + /* Variables */ + :root { + --sjs-layer-1-background-500: #FFFFFFFF; + --sjs-layer-1-background-400: #F5F5F5FF; + --sjs-layer-1-foreground-100: #000000E6; + --sjs-layer-1-foreground-50: #00000080; + --sjs-layer-3-background-500: #F4F4F4FF; + --sjs-layer-3-foreground-100: #000000E6; + --sjs-layer-3-foreground-50: #00000080; + --sjs-layer-2-background-500: #F8F8F8FF; + --sjs-layer-2-background-400: #EEEEEEFF; + --sjs-special-haze: #CCEEEE59; + --sjs-border-25: #DCDCDCFF; + --sjs-border-10: #E6E6E6FF; + --sjs-primary-background-500: #19B394FF; + --sjs-primary-background-10: #19B3941A; + --sjs-primary-background-400: #14A48BFF; + --sjs-primary-foreground-100: #FFFFFFFF; + --sjs-primary-foreground-25: #FFFFFF40; + --sjs-secondary-background-500: #FF9814FF; + --sjs-secondary-background-25: #FF981440; + --sjs-secondary-background-10: #FF98141A; + --sjs-secondary-foreground-100: #FFFFFFFF; + --sjs-secondary-forecolor-25: #FFFFFF40; + --sjs-semantic-red-background-500: #E50A3EFF; + --sjs-semantic-red-background-10: #E50A3E1A; + --sjs-semantic-red-foreground-100: #FFFFFFFF; + --sjs-semantic-green-background-500: #19B394FF; + --sjs-semantic-green-background-10: #19B3941A; + --sjs-semantic-green-foreground-100: #FFFFFFFF; + --sjs-semantic-blue-background-500: #437FD9FF; + --sjs-semantic-blue-background-10: #437FD91A; + --sjs-semantic-blue-foreground-100: #FFFFFFFF; + --sjs-semantic-yellow-background-500: #FF9814FF; + --sjs-semantic-yellow-background-10: #FF98141A; + --sjs-semantic-yellow-foreground-100: #FFFFFFFF; + --sjs-semantic-white-background-500: #FFFFFFFF; + --sjs-code-gray-700: #B6B6B6FF; + --sjs-code-blue-500: #326FCAFF; + --sjs-code-gray-300: #505050FF; + --sjs-code-green-500: #08997CFF; + --sjs-code-red-500: #F41B50FF; + --sjs-code-purple-500: #C22FA2FF; + --sjs-code-yellow-500: #F58D06FF; + --sjs-code-gray-500: #8A8A8AFF; + --sjs-special-background: #EDF9F7FF; + --sjs-layer-1-foreground-75: #000000BF; + --sjs-layer-3-background-400: #EAEAEAFF; + --sjs-special-glow: #004C441A; + --sjs-special-shadow: #00000026; + --sjs-layer-3-foreground-75: #000000BF; + --sjs-layer-2-foreground-100: #000000E6; + --sjs-layer-2-foreground-75: #000000BF; + --sjs-layer-2-foreground-50: #00000080; + --sjs-border-25-overlay: #00000026; +} + diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css new file mode 100644 index 0000000000..5470188397 --- /dev/null +++ b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css @@ -0,0 +1,3263 @@ + /* Variables */ + :root { + --ctr-toolbox-border-width-right: 0px; + --ctr-list-item-corner-radius: 0px; + --ctr-button-group-item-corner-radius: 0px; + --ctr-button-group-gap: -1px; + --ctr-editor-corner-radius: 0px; + --ctr-editor-button-corner-radius: 0px; + --ctr-checkbox-corner-radius: 0px; + --ctr-list-padding-left: 0px; + --ctr-list-padding-right: 0px; + --ctr-popup-menu-padding-left: 0px; + --ctr-popup-menu-padding-right: 0px; + --ctr-popup-menu-padding-top: 0px; + --ctr-popup-menu-padding-bottom: 0px; + --ctr-popup-menu-footer-padding-left: 0px; + --ctr-button-group-corner-radius: 0px; + --ctr-button-group-padding: 0px; + --ctr-button-group-border-width: 0px; + --ctr-shadow-medium-blur: 6px; + --ctr-shadow-medium-offset-y: 2px; + --ctr-shadow-large-blur: 16px; + --ctr-shadow-large-offset-y: 8px; + --ctr-shadow-large-offset-x: 0px; + --ctr-shadow-large-spread: 0px; + --ctr-shadow-medium-offset-x: 0px; + --ctr-shadow-medium-spread: 0px; + --ctr-list-search-icon-opacity: 100px; + --ctr-label-opacity-disabled: 25px; + --ctr-caption-with-actions-text-opacity-disabled: 25px; + --ctr-radio-button-text-opacity-disabled: 25px; + --ctr-checkbox-text-opacity-disabled: 25px; + --ctr-shadow-small-offset-x: 0px; + --ctr-shadow-small-offset-y: 1px; + --ctr-shadow-small-blur: 2px; + --ctr-shadow-small-spread: 0px; + --ctr-shadow-x-large-offset-x: 0px; + --ctr-shadow-x-large-offset-y: 0px; + --ctr-shadow-x-large-blur: 0px; + --ctr-shadow-x-large-spread: 0px; + --ctr-property-grid-placeholder-text-max-width: 320px; + --ctr-surface-placeholder-padding-top: 0px; + --ctr-property-grid-placeholder-padding-bottom: 0px; + --ctr-popup-menu-footer-padding-right: 0px; + --ctr-editor-content-text-opacity-disabled: 25px; + --ctr-editor-label-opacity-disabled: 25px; + --ctr-editor-button-icon-opacity-disabled: 25px; + --ctr-editor-button-icon-opacity-pressed: 50px; + --ctr-checkbox-description-text-opacity-disabled: 25px; + --ctr-actionbar-button-opacity-pressed: 50px; + --ctr-actionbar-button-opacity-disabled: 25px; + --ctr-actionbar-button-opacity-muted: 50px; + --ctr-list-item-opacity-disabled: 25px; + --ctr-list-item-contextual-buttons-opacity-pressed: 50px; + --ctr-list-item-contextual-buttons-opacity-default: 50px; + --ctr-editor-color-swatch-opacity-hovered: 50px; + --ctr-editor-color-swatch-opacity-disabled: 25px; + --ctr-menu-item-opacity-disabled: 25px; + --ctr-menu-toolbar-button-opacity-disabled: 25px; + --ctr-menu-toolbar-button-opacity-pressed: 50px; + --ctr-toolbox-item-text-opacity-pressed: 50px; + --ctr-toolbox-item-icon-opacity-pressed: 35px; + --ctr-toolbox-item-opacity-submenu: 85px; + --ctr-toolbox-item-text-opacity-disabled: 25px; + --ctr-toolbox-button-opacity-pressed: 50px; + --ctr-page-navigator-button-opacity-pressed: 50px; + --ctr-button-text-opacity-disabled: 25px; + --ctr-property-grid-switcher-toggle-button-border-width-checked: 0px; + --ctr-property-grid-chapter-caption-text-opacity-disabled: 25px; + --ctr-notification-opacity: 75px; + --ctr-notification-opacity-error: 100px; + --ctr-string-table-row-border-width-top: 0px; + --ctr-string-table-row-border-width-left: 0px; + --ctr-string-table-row-border-width-right: 0px; + --ctr-toolbox-group-header-border-width-top: 0px; + --ctr-toolbox-group-header-border-width-left: 0px; + --ctr-toolbox-group-header-border-width-right: 0px; + --ctr-text-decor-padding-top: 0px; + --ctr-text-decor-padding-bottom: 0px; + --ctr-caption-with-actions-description-text-opacity-disabled: 25px; + --ctr-data-table-cell-drop-down-arrow-opacity: 50px; + --ctr-data-table-cell-padding-top-header: 0px; + --ctr-data-table-cell-padding-bottom-header: 0px; + --ctr-data-table-cell-opacity-disabled: 25px; + --ctr-data-table-row-padding-left: 0px; + --ctr-data-table-row-drag-area-icon-opacity: 50px; + --ctr-data-table-row-border-width-last-row: 0px; + --ctr-toolbox-padding-left: 0px; + --ctr-toolbox-padding-right: 0px; + --ctr-toolbox-group-padding-top: 0px; + --ctr-toolbox-group-padding-bottom: 0px; + --ctr-button-contextual-button-opacity-disabled: 25px; + --ctr-button-contextual-button-opacity-pressed: 50px; + --lbr-contextual-button-icon-opacity-disabled: 25px; + --ctr-survey-question-panel-toolbar-item-opacity-pressed: 50px; + --ctr-survey-question-panel-toolbar-item-opacity-disabled: 25px; + --ctr-survey-question-panel-toolbar-item-icon-padding-left-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-right-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-top-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom-large: 0px; + --ctr-survey-question-panel-toolbar-item-opacity-muted: 50px; + --ctr-survey-question-panel-toolbar-item-padding-left-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-right-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-top-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-bottom-small: 0px; + --ctr-survey-question-panel-drag-area-drag-indicator-opacity: 50px; + --ctr-survey-question-panel-drag-area-padding-left-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-right-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-top-with-buttons-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-bottom-with-buttons-mobile: 0px; + --ctr-preview-pager-padding-right: 0px; + --ctr-preview-pager-padding-left: 0px; + --ctr-code-viewer-code-error-row-fix-button-padding-top: 0px; + --ctr-code-viewer-code-error-row-fix-button-padding-bottom: 0px; + --ctr-code-viewer-padding-left-fullscreen: 0px; + --ctr-code-viewer-padding-right-fullscreen: 0px; + --ctr-code-viewer-padding-top-fullscreen: 0px; + --ctr-code-viewer-padding-bottom-fullscreen: 0px; + --ctr-code-viewer-corner-radius-fullscreen: 0px; + --ctr-label-padding-left: 0px; + --ctr-label-padding-right: 0px; + --ctr-editor-limit-label-padding-right-with-button: 0px; + --ctr-property-grid-search-corner-radius: 0px; + --ctr-search-button-opacity-disabled: 25px; + --ctr-survey-action-button-opacity-disabled: 25px; + --ctr-survey-contextual-button-icon-opacity-disabled: 25px; + --lbr-action-button-opacity-disabled: 25px; + --lbr-tag-box-item-remove-button-opacity-pressed: 50px; + --lbr-popup-menu-search-corner-radius: 0px; + --lbr-popup-menu-search-clear-button-opacity-disabled: 25px; + --lbr-notification-opacity: 75px; + --lbr-notification-opacity-error: 100px; + --ctr-survey-placeholder-loading-circle-opacity: 10px; + --ctr-survey-image-picker-item-loading-circle-opacity: 10px; + --ctr-data-table-row-corner-radius-floating: 0px; + --ctr-survey-item-actionbar-drag-indicator-opacity: 50px; + --ctr-survey-item-actionbar-drag-indicator-padding-left-mobile: 0px; + --ctr-survey-item-actionbar-drag-indicator-padding-right-mobile: 0px; + --ctr-page-navigator-item-opacity-step-1: 75px; + --ctr-page-navigator-item-opacity-step-2: 50px; + --ctr-page-navigator-item-opacity-step-3: 25px; + --ctr-toolbox-search-corner-radius: 0px; + --ctr-toolbox-group-header-margin-top: 0px; + --ctr-toolbox-group-header-margin-bottom: 0px; + --lbr-shadow-x-large-offset-x: 0px; + --lbr-shadow-x-large-offset-y: 0px; + --lbr-shadow-x-large-blur: 0px; + --lbr-shadow-x-large-spread: 0px; + --lbr-shadow-large-offset-x: 0px; + --lbr-shadow-large-offset-y: 8px; + --lbr-shadow-large-blur: 16px; + --lbr-shadow-large-spread: 0px; + --lbr-shadow-medium-offset-x: 0px; + --lbr-shadow-medium-offset-y: 2px; + --lbr-shadow-medium-blur: 6px; + --lbr-shadow-medium-spread: 0px; + --lbr-shadow-small-offset-x: 0px; + --lbr-shadow-small-offset-y: 1px; + --lbr-shadow-small-blur: 2px; + --lbr-shadow-small-spread: 0px; + --lbr-checkboxes-item-text-opacity-disabled: 25px; + --ctr-survey-checkboxes-item-button-opacity-inactive: 35px; + --lbr-checkboxes-item-button-check-mark-opacity-disabled: 25px; + --ctr-survey-radio-button-group-item-button-opacity-inactive: 35px; + --lbr-radio-buttons-item-button-dot-opacity-disabled: 25px; + --lbr-radio-buttons-item-text-opacity-disabled: 25px; + --lbr-editor-text-opacity-disabled: 25px; + --lbr-editor-padding-left-preview: 0px; + --lbr-editor-padding-right-preview: 0px; + --lbr-editor-corner-radius-preview: 0px; + --lbr-labeled-editor-label-opacity-disabled: 25px; + --lbr-editor-button-icon-opacity-pressed: 50px; + --lbr-editor-button-icon-opacity-disabled: 25px; + --lbr-rating-item-text-opacity-disabled: 25px; + --lbr-rating-label-opacity-disabled: 25px; + --lbr-rating-smiley-opacity-disabled-selected: 15px; + --lbr-rating-smiley-red-opacity: 25px; + --lbr-rating-smiley-red-opacity-hovered: 50px; + --lbr-rating-smiley-yellow-opacity: 25px; + --lbr-rating-smiley-yellow-opacity-hovered: 50px; + --lbr-rating-smiley-green-opacity: 25px; + --lbr-rating-smiley-green-opacity-hovered: 50px; + --lbr-ranking-item-number-text-opacity-disabled: 25px; + --lbr-ranking-item-number-icon-opacity-disabled: 25px; + --lbr-ranking-item-text-opacity-disabled: 25px; + --ctr-survey-ranking-item-padding-left-floating-mobile: 0px; + --lbr-ranking-indicators-padding-left: 0px; + --lbr-ranking-indicators-padding-right: 0px; + --lbr-ranking-indicators-drag-indicator-icon-opacity-mobile: 25px; + --lbr-ranking-indicators-sort-indicator-padding-left-mobile: 0px; + --lbr-ranking-indicators-sort-indicator-padding-right-mobile: 0px; + --ctr-survey-item-actionbar-padding-left: 0px; + --lbr-boolean-thumb-text-opacity-disabled: 25px; + --lbr-image-picker-item-opacity-disabled: 25px; + --lbr-image-picker-item-opacity-preview: 25px; + --lbr-image-picker-item-opacity-hovered: 50px; + --lbr-image-picker-item-opacity-error: 75px; + --lbr-file-upload-item-loading-circle-opacity: 10px; + --lbr-signature-loading-circle-opacity: 10px; + --lbr-placeholder-loading-circle-opacity: 10px; + --lbr-file-upload-image-opacity-disabled: 25px; + --lbr-list-item-text-opacity-disabled: 25px; + --lbr-page-layout-gap-none: 0px; + --lbr-button-text-opacity-disabled: 25px; + --lbr-window-header-button-opacity-pressed: 50px; + --lbr-matrix-title-cell-text-opacity-disabled: 25px; + --ctr-survey-header-logo-loading-circle-opacity: 10px; + --lbr-cover-padding-bottom-no-background: 0px; + --lbr-tag-box-item-opacity-disabled: 25px; + --lbr-popup-menu-footer-padding-left: 0px; + --lbr-popup-menu-footer-padding-right: 0px; + --lbr-matrix-details-padding-right: 0px; + --lbr-dynamic-panel-tabs-item-padding-left: 0px; + --lbr-dynamic-panel-tabs-item-padding-right: 0px; + --lbr-dynamic-panel-tabs-item-opacity-disabled: 25px; + --lbr-dynamic-panel-tabs-button-icon-opacity-pressed: 50px; + --lbr-step-progress-bar-connector-opacity: 50px; + --lbr-step-progress-bar-step-dot-background-opacity: 50px; + --lbr-step-progress-bar-step-dot-margin-top: 0px; + --lbr-step-progress-bar-step-dot-margin-bottom: 0px; + --lbr-step-progress-bar-margin-top-position-bottom: 0px; + --lbr-page-padding-left: 0px; + --lbr-page-padding-right: 0px; + --ctr-survey-question-panel-opacity-hidden: 25px; + --lbr-question-panel-corner-radius-nested: 0px; + --lbr-progress-bar-section-title-opacity-pressed: 50px; + --lbr-dynamic-panel-item-header-title-opacity-disabled: 25px; + --lbr-placeholder-text-opacity-disabled: 25px; + --lbr-placeholder-padding-bottom-with-button: 0px; + --lbr-signature-signature-opacity-disabled: 25px; + --ctr-editor-color-swatch-icon-color: #FFFFFFFF; + --ctr-editor-color-swatch-icon-color-stroke: #00000040; + --lbr-pager-text-opacity-disabled: 25px; + --misc-component-container-padding: 64px; + --misc-component-container-gap: 64px; + --misc-component-title-padding-left: 12px; + --misc-component-title-padding-right: 12px; + --misc-component-title-padding-top: 7px; + --misc-component-title-padding-bottom: 8px; + --misc-component-title-corner-radius: 4px; + --misc-component-container-corner-radius: 16px; + --misc-component-title-margin-top: 64px; + --misc-component-title-margin-bottom: 16px; + --misc-component-container-padding-top-with-title: 0px; + --lbr-dynamic-panel-details-area-padding-bottom: 0px; + --lbr-question-panel-header-title-opacity-disabled: 25px; + --lbr-question-panel-header-description-opacity-disabled: 25px; + --lbr-question-panel-header-gap-mobile: 0px; + --lbr-panel-header-padding-left-expandable: 0px; + --lbr-dynamic-panel-tabs-padding-left-nested: 0px; + --lbr-dynamic-panel-tabs-padding-right-nested: 0px; + --lbr-page-padding-bottom-no-buttons: 0px; + --ctr-survey-page-margin-bottom: 0px; + --ctr-survey-page-margin-left-mobile: 0px; + --ctr-survey-page-margin-right-mobile: 0px; + --ctr-survey-page-margin-top-mobile: 0px; + --lbr-dynamic-panel-content-margin-top-placeholder: 0px; + --lbr-question-panel-padding-top-error: 0px; + --lbr-question-panel-padding-bottom-error: 0px; + --ctr-survey-question-panel-padding-top-selected: 0px; + --ctr-survey-page-header-padding-new-page: 0px; + --lbr-panel-layout-item-min-width: 0px; + --ctr-button-group-item-text-opacity-disabled: 25px; + --ctr-button-group-item-icon-opacity-disabled: 25px; + --lbr-matrix-margin-left-expandable: 0px; + --lbr-matrix-margin-left-no-row-title: 0px; + --lbr-matrix-gap-single-select: 0px; + --lbr-drop-down-buttons-margin: 0px; + --lbr-drop-down-padding-left-preview: 0px; + --lbr-drop-down-padding-right-preview: 0px; + --lbr-tag-box-item-padding-left-preview: 0px; + --ctr-survey-header-logo-placeholder-icon-opacity: 50px; + --ctr-survey-image-no-image-icon-opacity: 50px; + --ctr-list-search-corner-radius: 0px; + --ctr-property-grid-search-icon-opacity: 100px; + --ctr-toolbox-search-icon-opacity: 100px; + --ctr-preview-device-width: 400px; + --ctr-toolbox-submenu-group-margin-left: 0px; + --lbr-shadow-inner-offset-x: 0px; + --lbr-shadow-inner-offset-y: 1px; + --lbr-shadow-inner-blur: 2px; + --lbr-shadow-inner-spread: 0px; + --lbr-progress-bar-pager-label-opacity-floating: 75px; + --ctr-survey-question-panel-floating-toolbar-opacity-no-focus: 25px; + --lbr-page-loading-background-opacity: 75px; + --lbr-page-loading-loading-icon-circle-opacity: 10px; + --lbr-ghost-button-opacity: 25px; + --ctr-toolbox-item-icon-opacity-disabled: 15px; + --ctr-list-item-icon-opacity-label: 50px; + --ctr-toolbox-item-margin-horizontal-no-text: 0px; + --ctr-toolbox-submenu-group-margin-right: 0px; + --ctr-toolbox-submenu-group-margin-top: 0px; + --ctr-toolbox-submenu-group-margin-bottom-last: 0px; + --ctr-toolbox-submenu-group-border-width-bottom: 0px; + --ctr-toolbox-submenu-background-color: #00000000; + --ctr-toolbox-submenu-corner-radius: 0px; + --ctr-toolbox-submenu-shadow-1-color: #00000000; + --ctr-toolbox-submenu-shadow-2-color: #00000000; + --ctr-toolbox-submenu-margin-top: 0px; + --ctr-data-table-corner-radius: 0px; + --ctr-data-table-placeholder-corner-radius: 0px; + --ctr-list-item-label-icon-opacity-label: 50px; + --ctr-survey-page-drag-indicator-opacity: 50px; + --lbr-footer-padding-left-transparent: 0px; + --lbr-footer-padding-right-transparent: 0px; + --lbr-app-header-menu-item-opacity-disabled: 25px; + --ctr-toggle-button-thumb-border-width: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-left-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-right-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-top-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom-x-small: 0px; + --lbr-slider-label-opacity-disabled: 25px; + --lbr-slider-thumb-dot-opacity-disabled: 100px; + --lbr-matching-item-text-opacity-disabled: 25px; + --ctr-super-tooltip-padding-left: 0px; + --ctr-super-tooltip-padding-right: 0px; + --ctr-super-tooltip-padding-top: 0px; + --ctr-super-tooltip-padding-bottom: 0px; + --lbr-blank-form-text-item-padding-left: 0px; + --lbr-blank-form-text-item-padding-right: 0px; + --ctr-survey-item-actionbar-padding-right-add: 0px; + --lbr-blank-form-field-padding-top: 0px; + --lbr-blank-form-field-padding-bottom: 0px; + --lbr-blank-form-field-padding-left: 0px; + --lbr-blank-form-field-padding-right: 0px; + --ctr-line-height-unit: 8px; + --ctr-font-unit: 8px; + --ctr-spacing-unit: 8px; + --ctr-corner-radius-unit: 8px; + --ctr-stroke-unit: 1px; + --ctr-size-unit: 8px; +} + + /* Aliases */ + :root { + --ctr-toolbox-item-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-text-color: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-icon-color-pressed: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-text-color-pressed: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-background-color: var(--sjs-layer-3-background-500); + --ctr-toolbox-border-color: var(--sjs-border-25); + --ctr-toolbox-group-header-padding-left: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-padding-right: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-margin-left: var(--sjs-spacing-x2); + --ctr-menu-toolbar-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-menu-toolbar-button-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-menu-toolbar-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-menu-toolbar-button-icon-color-selected: var(--sjs-primary-background-500); + --ctr-toolbox-item-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-toolbox-item-text-color-hovered: var(--sjs-layer-1-foreground-100); + --ctr-property-grid-form-background-color: var(--sjs-layer-3-background-500); + --ctr-button-group-item-border-color: var(--sjs-border-25); + --ctr-button-group-item-border-width: var(--sjs-stroke-x1); + --ctr-button-group-item-background-color: var(--sjs-layer-1-background-500); + --ctr-button-group-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-menu-item-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-button-group-item-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-button-group-item-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-button-group-item-text-color-selected: var(--sjs-primary-background-500); + --ctr-button-group-item-icon-color-selected: var(--sjs-primary-background-500); + --ctr-editor-background-color: var(--sjs-layer-1-background-500); + --ctr-editor-border-color: var(--sjs-border-25); + --ctr-editor-background-color-disabled: var(--sjs-layer-3-background-500); + --ctr-editor-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-button-group-item-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color: var(--sjs-layer-1-background-500); + --ctr-radio-button-border-color: var(--sjs-border-25); + --ctr-radio-button-border-width: var(--sjs-stroke-x1); + --ctr-checkbox-background-color: var(--sjs-layer-1-background-500); + --ctr-checkbox-border-color: var(--sjs-border-25); + --ctr-checkbox-border-width: var(--sjs-stroke-x1); + --ctr-checkbox-button-check-mark-color: var(--sjs-primary-background-500); + --ctr-radio-button-button-dot-color-default: var(--sjs-primary-background-500); + --ctr-radio-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-radio-button-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-radio-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-radio-button-background-color-disabled: var(--sjs-layer-3-background-500); + --ctr-radio-button-button-dot-color-disabled: var(--sjs-border-25); + --ctr-checkbox-border-width-focused: var(--sjs-stroke-x2); + --ctr-checkbox-border-color-focused: var(--sjs-primary-background-500); + --ctr-checkbox-button-check-mark-color-disabled: var(--sjs-border-25); + --ctr-checkbox-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-checkbox-background-color-disabled: var(--sjs-layer-3-background-500); + --ctr-list-padding-bottom: var(--sjs-spacing-x1); + --ctr-list-padding-top: var(--sjs-spacing-x1); + --ctr-list-border-color: var(--sjs-border-25); + --ctr-actionbar-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-popup-menu-corner-radius: var(--sjs-corner-radius-x05); + --ctr-button-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-button-group-item-background-color-disabled: var(--sjs-layer-3-background-500); + --ctr-radio-button-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-radio-button-border-color-selected: var(--sjs-border-25); + --ctr-radio-button-background-color-focused: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color-selected-hovered: var(--sjs-layer-3-background-500); + --ctr-radio-button-background-color-selected-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-selected-hovered: var(--sjs-layer-3-background-500); + --ctr-checkbox-background-color-selected-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-border-color-selected: var(--sjs-border-25); + --ctr-radio-button-border-color-disabled: var(--sjs-border-25); + --ctr-checkbox-border-color-disabled: var(--sjs-border-25); + --ctr-button-group-background-color: var(--sjs-layer-1-background-500); + --ctr-button-group-border-color: var(--sjs-border-25); + --ctr-button-group-item-border-width-selected: var(--sjs-stroke-x1); + --ctr-button-group-item-padding-horizontal: var(--sjs-spacing-x2); + --ctr-button-group-item-padding-vertical: var(--sjs-spacing-x150); + --ctr-button-group-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-button-group-border-color-focused: var(--sjs-primary-background-500); + --ctr-button-group-border-width-focused: var(--sjs-stroke-x2); + --ctr-button-group-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-survey-page-background-color-selected: var(--sjs-secondary-background-10); + --ctr-surface-background-color: var(--sjs-layer-3-background-500); + --ctr-survey-question-panel-toolbar-item-corner-radius: var(--sjs-corner-radius-x05); + --ctr-popup-background-color: var(--sjs-layer-2-background-500); + --ctr-popup-corner-radius: var(--sjs-corner-radius-x05); + --ctr-shadow-large-color: var(--sjs-special-glow); + --ctr-shadow-medium-color: var(--sjs-special-glow); + --ctr-button-padding-horizontal: var(--sjs-spacing-x6); + --ctr-button-padding-vertical: var(--sjs-spacing-x2); + --ctr-button-contextual-button-margin-horizontal: var(--sjs-spacing-x1); + --ctr-button-contextual-button-margin-vertical: var(--sjs-spacing-x1); + --ctr-button-padding-horizontal-small: var(--sjs-spacing-x4); + --ctr-button-padding-vertical-small: var(--sjs-spacing-x150); + --ctr-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-button-corner-radius-small: var(--sjs-corner-radius-x05); + --ctr-list-item-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-list-item-icon-color-selected: var(--sjs-primary-foreground-100); + --ctr-list-item-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-editor-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-survey-page-toolbar-item-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-survey-page-toolbar-item-corner-radius: var(--sjs-corner-radius-x05); + --ctr-list-search-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-caption-with-actions-text-color: var(--sjs-layer-3-foreground-50); + --ctr-label-text-color: var(--sjs-layer-3-foreground-50); + --ctr-label-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-caption-with-actions-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-radio-button-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-checkbox-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-button-group-item-background-color-selected-disabled: var(--sjs-layer-3-background-500); + --ctr-button-group-item-border-width-selected-disabled: var(--sjs-stroke-x1); + --ctr-popup-haze-background-color: var(--sjs-special-haze); + --ctr-shadow-small-color: var(--sjs-special-shadow); + --ctr-shadow-x-large-color: var(--sjs-special-glow); + --ctr-actionbar-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-actionbar-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-selected: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text-hovered: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text-disabled: var(--sjs-layer-3-foreground-50); + --ctr-list-item-submenu-arrow-color: var(--sjs-layer-1-foreground-50); + --ctr-list-item-submenu-arrow-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-page-navigator-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-page-navigator-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-list-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-tabs-padding-left: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-padding-bottom: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-tabs-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-tabs-border-color: var(--sjs-border-25); + --ctr-property-grid-tabs-separator-margin: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-gap: var(--sjs-spacing-x150); + --ctr-property-grid-border-color: var(--sjs-border-25); + --ctr-property-grid-border-width-left: var(--sjs-stroke-x1); + --ctr-property-grid-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-property-grid-placeholder-padding-top: var(--sjs-spacing-x12); + --ctr-property-grid-placeholder-image-margin-top: var(--sjs-spacing-x3); + --ctr-property-grid-placeholder-text-gap: var(--sjs-spacing-x1); + --ctr-property-grid-placeholder-text-title-color: var(--sjs-layer-3-foreground-100); + --ctr-property-grid-placeholder-text-description-color: var(--sjs-layer-3-foreground-50); + --ctr-surface-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-surface-placeholder-padding-bottom: var(--sjs-spacing-x16); + --ctr-surface-placeholder-text-margin-top: var(--sjs-spacing-x4); + --ctr-surface-placeholder-text-margin-bottom: var(--sjs-spacing-x6); + --ctr-surface-placeholder-text-gap: var(--sjs-spacing-x1); + --ctr-surface-placeholder-max-width: var(--sjs-size-x90); + --ctr-surface-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-toolbox-group-header-margin-right: var(--sjs-spacing-x2); + --ctr-property-grid-tabs-padding-right: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-padding-top: var(--sjs-spacing-x150); + --ctr-property-grid-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-editor-content-text-color: var(--sjs-layer-1-foreground-100); + --ctr-editor-label-color: var(--sjs-layer-1-foreground-50); + --ctr-editor-content-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-editor-content-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-editor-button-text-color: var(--sjs-layer-1-foreground-100); + --ctr-editor-label-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-editor-content-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-editor-content-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-editor-button-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-radio-button-text-color: var(--sjs-layer-3-foreground-100); + --ctr-checkbox-text-color: var(--sjs-layer-3-foreground-100); + --ctr-checkbox-description-text-color: var(--sjs-layer-1-foreground-50); + --ctr-checkbox-description-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-actionbar-button-gap: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-left-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-right-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-bottom-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-text-color: var(--sjs-primary-background-500); + --ctr-actionbar-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-actionbar-button-padding-left-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-right-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-top-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-bottom-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-left-medium-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-medium-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-top-medium-text: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-bottom-medium-text: var(--sjs-spacing-x05); + --ctr-actionbar-button-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-actionbar-button-border-color-selected: var(--sjs-primary-background-500); + --ctr-actionbar-button-border-width-selected: var(--sjs-stroke-x2); + --ctr-list-item-gap: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-left-large-icon-text: var(--sjs-spacing-x150); + --ctr-actionbar-button-padding-right-large-icon-text: var(--sjs-spacing-x2); + --ctr-list-item-padding-left: var(--sjs-spacing-x2); + --ctr-list-item-padding-right: var(--sjs-spacing-x2); + --ctr-list-item-padding-top: var(--sjs-spacing-x1); + --ctr-list-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-list-item-padding-right-submenu: var(--sjs-spacing-x1); + --ctr-list-item-padding-left-second-level: var(--sjs-spacing-x4); + --ctr-list-item-padding-bottom-with-icon: var(--sjs-spacing-x150); + --ctr-list-item-padding-top-with-icon: var(--sjs-spacing-x150); + --ctr-list-item-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-list-item-background-color-selected: var(--sjs-primary-background-500); + --ctr-list-item-text-color-selected: var(--sjs-primary-foreground-100); + --ctr-list-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-list-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-list-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-item-text-color-hovered: var(--sjs-layer-3-foreground-100); + --ctr-list-item-submenu-arrow-color-hovered-item: var(--sjs-layer-3-foreground-50); + --ctr-list-item-icon-color-hovered: var(--sjs-layer-3-foreground-50); + --ctr-list-item-contextual-buttons-color: var(--sjs-layer-3-foreground-50); + --ctr-list-item-contextual-buttons-color-hovered: var(--sjs-primary-background-500); + --ctr-list-item-contextual-buttons-color-danger-hovered: var(--sjs-semantic-red-background-500); + --ctr-list-item-contextual-buttons-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-list-item-contextual-buttons-padding: var(--sjs-spacing-x05); + --ctr-list-item-submenu-arrow-padding: var(--sjs-spacing-x05); + --ctr-list-item-contextual-buttons-gap: var(--sjs-spacing-x1); + --ctr-list-item-color-swatch-color-primary: var(--sjs-primary-background-500); + --ctr-list-item-color-swatch-corner-radius: var(--sjs-corner-radius-x0375); + --ctr-list-item-color-swatch-width: var(--sjs-spacing-x4); + --ctr-list-item-color-swatch-height: var(--sjs-spacing-x3); + --ctr-list-item-color-swatch-border-color: var(--sjs-border-25-overlay); + --ctr-list-item-color-swatch-border-width: var(--sjs-stroke-x1); + --ctr-list-item-color-swatch-border-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-list-background-color: var(--sjs-layer-1-background-500); + --ctr-editor-color-swatch-background-color-primary: var(--sjs-primary-background-500); + --ctr-editor-color-swatch-corner-radius: var(--sjs-corner-radius-x0375); + --ctr-editor-color-swatch-border-color: var(--sjs-border-25-overlay); + --ctr-editor-color-swatch-border-width: var(--sjs-stroke-x1); + --ctr-editor-color-swatch-padding-horizontal: var(--sjs-spacing-x1); + --ctr-editor-color-swatch-padding-vertical: var(--sjs-spacing-x05); + --ctr-editor-button-padding-top: var(--sjs-spacing-x1); + --ctr-editor-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-button-padding-left: var(--sjs-spacing-x1); + --ctr-editor-button-padding-right: var(--sjs-spacing-x1); + --ctr-editor-button-gap: var(--sjs-spacing-x1); + --ctr-actionbar-button-icon-width-small: var(--sjs-size-x2); + --ctr-actionbar-button-icon-height-small: var(--sjs-size-x2); + --ctr-actionbar-button-icon-width: var(--sjs-size-x3); + --ctr-actionbar-button-icon-height: var(--sjs-size-x3); + --ctr-actionbar-button-drop-down-arrow-width: var(--sjs-size-x2); + --ctr-actionbar-button-drop-down-arrow-height: var(--sjs-size-x2); + --ctr-list-item-icon-width: var(--sjs-size-x3); + --ctr-list-item-icon-height: var(--sjs-size-x3); + --ctr-list-item-submenu-arrow-width: var(--sjs-size-x2); + --ctr-list-item-submenu-arrow-height: var(--sjs-size-x2); + --ctr-editor-color-swatch-icon-width: var(--sjs-size-x2); + --ctr-editor-color-swatch-icon-height: var(--sjs-size-x2); + --ctr-editor-content-icon-width: var(--sjs-size-x3); + --ctr-editor-content-icon-height: var(--sjs-size-x3); + --ctr-editor-button-icon-width: var(--sjs-size-x3); + --ctr-editor-button-icon-height: var(--sjs-size-x3); + --ctr-radio-button-button-width: var(--sjs-size-x3); + --ctr-radio-button-button-height: var(--sjs-size-x3); + --ctr-radio-button-button-dot-width: var(--sjs-size-x1); + --ctr-radio-button-button-dot-height: var(--sjs-size-x1); + --ctr-checkbox-button-width: var(--sjs-size-x3); + --ctr-checkbox-button-height: var(--sjs-size-x3); + --ctr-checkbox-link-color: var(--sjs-primary-background-500); + --ctr-button-group-item-icon-width: var(--sjs-size-x3); + --ctr-button-group-item-icon-height: var(--sjs-size-x3); + --ctr-menu-item-icon-width: var(--sjs-size-x3); + --ctr-menu-item-icon-height: var(--sjs-size-x3); + --ctr-menu-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-menu-item-padding-left: var(--sjs-spacing-x3); + --ctr-menu-item-gap: var(--sjs-spacing-x1); + --ctr-menu-item-background-color: var(--sjs-layer-1-background-500); + --ctr-menu-item-border-color-selected: var(--sjs-primary-background-500); + --ctr-menu-item-border-width-bottom-selected: var(--sjs-stroke-x2); + --ctr-menu-item-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-menu-background-color: var(--sjs-layer-1-background-500); + --ctr-menu-toolbar-button-text-color: var(--sjs-layer-1-foreground-100); + --ctr-menu-toolbar-button-icon-width: var(--sjs-size-x3); + --ctr-menu-toolbar-button-icon-height: var(--sjs-size-x3); + --ctr-menu-toolbar-button-padding-left: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-gap: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-padding-top: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-text-gap: var(--sjs-spacing-x05); + --ctr-menu-toolbar-button-text-color-secondary: var(--sjs-layer-1-foreground-50); + --ctr-menu-toolbar-button-text-color-selected: var(--sjs-primary-background-500); + --ctr-menu-toolbar-button-text-color-secondary-pressed: var(--sjs-layer-1-foreground-100); + --ctr-menu-toolbar-button-text-color-secondary-selected: var(--sjs-primary-background-500); + --ctr-menu-toolbar-button-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-menu-toolbar-button-background-color-pressed: var(--sjs-layer-3-background-500); + --ctr-menu-toolbar-button-text-color-secondary-disabled: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-icon-width: var(--sjs-size-x3); + --ctr-toolbox-item-icon-height: var(--sjs-size-x3); + --ctr-toolbox-item-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-padding-left: var(--sjs-spacing-x150); + --ctr-toolbox-item-padding-right: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-item-gap: var(--sjs-spacing-x1); + --ctr-toolbox-item-corner-radius: var(--sjs-corner-radius-round); + --ctr-toolbox-item-padding-right-no-text: var(--sjs-spacing-x150); + --ctr-toolbox-item-padding-left-rtl: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-right-rtl: var(--sjs-spacing-x150); + --ctr-toolbox-item-border-color-floating: var(--sjs-secondary-background-500); + --ctr-toolbox-item-border-width-floating: var(--sjs-stroke-x2); + --ctr-toolbox-button-icon-color-pressed: var(--sjs-primary-background-500); + --ctr-toolbox-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-toolbox-button-background-color-pressed: var(--sjs-primary-background-10); + --ctr-page-navigator-item-dot-radius-small: var(--sjs-size-x075); + --ctr-page-navigator-item-dot-radius-large: var(--sjs-size-x1); + --ctr-page-navigator-item-dot-border-width-selected: var(--sjs-stroke-x2); + --ctr-page-navigator-item-dot-border-color-selected: var(--sjs-primary-background-500); + --ctr-page-navigator-item-dot-color-hovered: var(--sjs-primary-background-500); + --ctr-page-navigator-item-dot-color-default: var(--sjs-border-25); + --ctr-page-navigator-item-dot-color-selected: var(--sjs-primary-foreground-100); + --ctr-page-navigator-item-dot-container-width: var(--sjs-size-x250); + --ctr-page-navigator-item-dot-container-height: var(--sjs-size-x250); + --ctr-page-navigator-item-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-page-navigator-item-text-color-hovered: var(--sjs-layer-1-foreground-100); + --ctr-page-navigator-item-padding-left-hovered: var(--sjs-spacing-x2); + --ctr-page-navigator-item-padding-right: var(--sjs-spacing-x150); + --ctr-page-navigator-item-padding-top: var(--sjs-spacing-x1); + --ctr-page-navigator-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-page-navigator-item-gap: var(--sjs-spacing-x1); + --ctr-page-navigator-item-corner-radius: var(--sjs-corner-radius-round); + --ctr-page-navigator-item-padding-left: var(--sjs-spacing-x150); + --ctr-page-navigator-button-padding: var(--sjs-spacing-x125); + --ctr-page-navigator-button-icon-width: var(--sjs-size-x3); + --ctr-page-navigator-button-icon-height: var(--sjs-size-x3); + --ctr-page-navigator-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-page-navigator-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-page-navigator-button-background-color-pressed: var(--sjs-primary-background-10); + --ctr-page-navigator-button-icon-color-pressed: var(--sjs-primary-background-500); + --ctr-popup-menu-background-color: var(--sjs-layer-1-background-500); + --ctr-popup-menu-pointer-width: var(--sjs-size-x2); + --ctr-popup-menu-pointer-height: var(--sjs-size-x1); + --ctr-popup-menu-pointer-color: var(--sjs-layer-1-background-500); + --ctr-popup-menu-pointer-margin: var(--sjs-spacing-x4); + --ctr-button-background-color: var(--sjs-layer-1-background-500); + --ctr-button-text-color: var(--sjs-primary-background-500); + --ctr-button-gap: var(--sjs-spacing-x4); + --ctr-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-button-background-color-danger: var(--sjs-semantic-red-background-500); + --ctr-button-background-color-danger-hovered: var(--sjs-semantic-red-background-500); + --ctr-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-button-background-color-cta: var(--sjs-primary-background-500); + --ctr-button-background-color-cta-hovered: var(--sjs-primary-background-400); + --ctr-button-text-color-danger: var(--sjs-semantic-red-foreground-100); + --ctr-button-text-color-cta: var(--sjs-primary-foreground-100); + --ctr-button-text-color-danger-focused: var(--sjs-semantic-red-background-500); + --ctr-button-border-color-danger-focused: var(--sjs-semantic-red-background-500); + --ctr-collapse-button-icon-width: var(--sjs-size-x3); + --ctr-collapse-button-icon-height: var(--sjs-size-x3); + --ctr-collapse-button-padding: var(--sjs-spacing-x150); + --ctr-collapse-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-collapse-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-collapse-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-collapse-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-property-grid-switcher-text-color: var(--sjs-layer-1-foreground-50); + --ctr-property-grid-switcher-gap: var(--sjs-spacing-x1); + --ctr-property-grid-switcher-toggle-button-background-color: var(--sjs-layer-3-background-500); + --ctr-property-grid-switcher-toggle-button-border-color: var(--sjs-border-25); + --ctr-property-grid-switcher-toggle-button-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-switcher-toggle-button-padding-left: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-switcher-toggle-button-padding-top: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-padding-bottom: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-thumb-color: var(--sjs-layer-3-foreground-50); + --ctr-property-grid-switcher-toggle-button-thumb-width: var(--sjs-size-x1); + --ctr-property-grid-switcher-toggle-button-thumb-height: var(--sjs-size-x1); + --ctr-property-grid-switcher-toggle-button-thumb-corner-radius: var(--sjs-corner-radius-round); + --ctr-property-grid-switcher-toggle-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-property-grid-switcher-toggle-button-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-property-grid-switcher-toggle-button-background-color-checked: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-background-color-checked-focused: var(--sjs-primary-foreground-100); + --ctr-property-grid-switcher-toggle-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-property-grid-switcher-toggle-button-thumb-color-checked: var(--sjs-primary-foreground-100); + --ctr-property-grid-switcher-toggle-button-thumb-color-checked-focused: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-padding-left-checked: var(--sjs-spacing-x2); + --ctr-property-grid-switcher-toggle-button-padding-right-checked: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-thumb-color-focused: var(--sjs-primary-background-500); + --ctr-property-grid-chapter-caption-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-chapter-caption-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-chapter-caption-border-color: var(--sjs-border-25); + --ctr-property-grid-chapter-caption-text-color: var(--sjs-layer-1-foreground-50); + --ctr-property-grid-chapter-caption-text-color-selected: var(--sjs-layer-1-foreground-100); + --ctr-property-grid-chapter-caption-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-property-grid-chapter-caption-background-color-focused: var(--sjs-layer-3-background-500); + --ctr-property-grid-chapter-caption-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-expression-item-padding-left: var(--sjs-spacing-x2); + --ctr-expression-item-background-color-parameter: var(--sjs-semantic-blue-background-10); + --ctr-expression-item-padding-right: var(--sjs-spacing-x2); + --ctr-expression-item-padding-top: var(--sjs-spacing-x1); + --ctr-expression-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-expression-item-corner-radius: var(--sjs-corner-radius-round); + --ctr-expression-item-text-color-parameter: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-background-color-parameter-hovered: var(--sjs-semantic-blue-background-500); + --ctr-expression-item-background-color-parameter-editing: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-parameter-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-border-width: var(--sjs-stroke-x2); + --ctr-expression-item-text-color-parameter-hovered: var(--sjs-semantic-blue-foreground-100); + --ctr-expression-item-text-color-parameter-editing: var(--sjs-layer-1-foreground-100); + --ctr-expression-item-text-color-parameter-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-parameter-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-operator-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-operator: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-operator-hovered: var(--sjs-semantic-yellow-foreground-100); + --ctr-expression-item-text-color-operator-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-conjunction: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-conjunction-hovered: var(--sjs-semantic-yellow-foreground-100); + --ctr-expression-item-text-color-conjunction-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-conjunction-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-action: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-action-hovered: var(--sjs-semantic-red-foreground-100); + --ctr-expression-item-text-color-action-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-action-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-button: var(--sjs-primary-background-500); + --ctr-expression-item-text-color-button-hovered: var(--sjs-primary-foreground-100); + --ctr-expression-item-background-color-operator: var(--sjs-semantic-yellow-background-10); + --ctr-expression-item-background-color-operator-hovered: var(--sjs-semantic-yellow-background-500); + --ctr-expression-item-background-color-operator-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-conjunction: var(--sjs-semantic-yellow-background-10); + --ctr-expression-item-background-color-conjunction-hovered: var(--sjs-semantic-yellow-background-500); + --ctr-expression-item-background-color-conjunction-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-action: var(--sjs-semantic-red-background-10); + --ctr-expression-item-background-color-action-hovered: var(--sjs-semantic-red-background-500); + --ctr-expression-item-background-color-action-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-button: var(--sjs-primary-background-10); + --ctr-expression-item-background-color-button-hovered: var(--sjs-primary-background-500); + --ctr-expression-item-border-color-editing: var(--sjs-semantic-blue-background-500); + --ctr-expression-item-text-color-function: var(--sjs-layer-3-foreground-100); + --ctr-data-table-background-color: var(--sjs-layer-3-background-500); + --ctr-data-table-border-color: var(--sjs-border-25); + --ctr-data-table-border-width: var(--sjs-stroke-x1); + --ctr-separator-width: var(--sjs-size-x0125); + --ctr-separator-color: var(--sjs-border-25); + --ctr-separator-margin-vertical-small: var(--sjs-spacing-x1); + --ctr-separator-margin-horizontal-small: var(--sjs-spacing-x1); + --ctr-separator-margin-vertical-medium: var(--sjs-spacing-x2); + --ctr-separator-margin-horizontal-medium: var(--sjs-spacing-x2); + --ctr-popup-padding-left: var(--sjs-spacing-x4); + --ctr-popup-padding-right: var(--sjs-spacing-x4); + --ctr-popup-padding-top: var(--sjs-spacing-x4); + --ctr-popup-padding-bottom: var(--sjs-spacing-x4); + --ctr-popup-gap: var(--sjs-spacing-x4); + --ctr-popup-title-color: var(--sjs-layer-2-foreground-100); + --ctr-popup-message-color: var(--sjs-layer-2-foreground-100); + --ctr-popup-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-popup-buttons-gap: var(--sjs-spacing-x2); + --ctr-popup-margin-left: var(--sjs-spacing-x4); + --ctr-popup-margin-right: var(--sjs-spacing-x4); + --ctr-popup-margin-top: var(--sjs-spacing-x4); + --ctr-popup-margin-bottom: var(--sjs-spacing-x8); + --ctr-popup-description-color: var(--sjs-layer-2-foreground-50); + --ctr-popup-margin-top-mobile: var(--sjs-spacing-x2); + --ctr-popup-padding-left-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-right-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-top-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-bottom-mobile: var(--sjs-spacing-x3); + --ctr-popup-corner-radius-mobile: var(--sjs-corner-radius-x2); + --ctr-popup-gap-mobile: var(--sjs-spacing-x3); + --ctr-toolbox-group-header-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-border-color: var(--sjs-border-25); + --ctr-toolbox-group-header-border-width-bottom: var(--sjs-stroke-x1); + --ctr-toolbox-group-header-text-color: var(--sjs-layer-3-foreground-100); + --ctr-toolbox-group-header-expand-button-width: var(--sjs-size-x3); + --ctr-toolbox-group-header-expand-button-height: var(--sjs-size-x3); + --ctr-notification-background-color: var(--sjs-layer-1-background-500); + --ctr-notification-padding-left: var(--sjs-spacing-x2); + --ctr-notification-padding-right: var(--sjs-spacing-x2); + --ctr-notification-padding-top: var(--sjs-spacing-x1); + --ctr-notification-padding-bottom: var(--sjs-spacing-x1); + --ctr-notification-text-color: var(--sjs-layer-1-foreground-100); + --ctr-notification-corder-radius: var(--sjs-corner-radius-x05); + --ctr-notification-text-color-error: var(--sjs-semantic-red-foreground-100); + --ctr-notification-background-color-error: var(--sjs-semantic-red-background-500); + --ctr-string-table-row-padding-left: var(--sjs-spacing-x3); + --ctr-string-table-row-padding-right: var(--sjs-spacing-x3); + --ctr-string-table-row-padding-top: var(--sjs-spacing-x1); + --ctr-string-table-row-padding-bottom: var(--sjs-spacing-x1); + --ctr-string-table-row-gap: var(--sjs-spacing-x4); + --ctr-string-table-row-background-color: var(--sjs-layer-1-background-500); + --ctr-string-table-row-border-color: var(--sjs-border-10); + --ctr-string-table-row-border-width-bottom: var(--sjs-stroke-x1); + --ctr-string-table-row-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-string-table-row-text-color-title: var(--sjs-layer-1-foreground-100); + --ctr-string-table-row-expand-button-icon-width: var(--sjs-size-x2); + --ctr-string-table-row-expand-button-icon-height: var(--sjs-size-x2); + --ctr-string-table-row-expand-button-margin-right: var(--sjs-spacing-x1); + --ctr-string-table-row-expand-button-icon-color-default: var(--sjs-layer-1-foreground-50); + --ctr-string-table-header-background-color: var(--sjs-layer-3-background-500); + --ctr-string-table-header-text-color: var(--sjs-layer-3-foreground-50); + --ctr-string-table-group-header-background-color: var(--sjs-layer-2-background-500); + --ctr-string-table-group-header-text-color: var(--sjs-layer-2-foreground-50); + --ctr-string-table-row-margin-small: var(--sjs-spacing-x3); + --ctr-string-table-row-margin-medium: var(--sjs-spacing-x6); + --ctr-string-table-row-margin-large: var(--sjs-spacing-x9); + --ctr-text-decor-background-color-editing: var(--sjs-layer-1-background-500); + --ctr-text-decor-background-color-code: var(--sjs-secondary-background-10); + --ctr-text-decor-border-color: var(--sjs-border-25); + --ctr-text-decor-border-color-editing: var(--sjs-primary-background-500); + --ctr-text-decor-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-text-decor-text-color: var(--sjs-layer-1-foreground-100); + --ctr-text-decor-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-text-decor-text-color-limitation: var(--sjs-layer-1-foreground-50); + --ctr-text-decor-text-color-code: var(--sjs-layer-3-foreground-100); + --ctr-text-decor-border-width: var(--sjs-stroke-x2); + --ctr-text-decor-border-width-code: var(--sjs-stroke-x1); + --ctr-text-decor-padding-left: var(--sjs-spacing-x05); + --ctr-text-decor-padding-right: var(--sjs-spacing-x05); + --ctr-text-decor-padding-left-editing: var(--sjs-spacing-x1); + --ctr-text-decor-padding-right-editing: var(--sjs-spacing-x1); + --ctr-text-decor-padding-top-editing: var(--sjs-spacing-x05); + --ctr-text-decor-padding-bottom-editing: var(--sjs-spacing-x05); + --ctr-text-decor-gap: var(--sjs-spacing-x1); + --ctr-text-decor-padding-left-limitation: var(--sjs-spacing-x025); + --ctr-text-decor-padding-right-limitation: var(--sjs-spacing-x025); + --ctr-text-decor-corner-radius: var(--sjs-corner-radius-x0375); + --ctr-text-decor-border-color-code: var(--sjs-secondary-background-25); + --ctr-menu-border-color: var(--sjs-border-25); + --ctr-menu-border-width: var(--sjs-stroke-x1); + --ctr-menu-toolbar-gap: var(--sjs-spacing-x2); + --ctr-menu-toolbar-padding-horizontal: var(--sjs-spacing-x2); + --ctr-menu-toolbar-padding-vertical: var(--sjs-spacing-x150); + --ctr-menu-toolbar-padding-vertical-mobile: var(--sjs-spacing-x05); + --ctr-menu-toolbar-separator-height: var(--sjs-size-x3); + --ctr-popup-menu-footer-padding-top: var(--sjs-spacing-x05); + --ctr-popup-menu-footer-padding-bottom: var(--sjs-spacing-x05); + --ctr-popup-menu-footer-background-color: var(--sjs-layer-3-background-500); + --ctr-popup-menu-footer-border-color: var(--sjs-border-25); + --ctr-popup-menu-footer-border-width-top: var(--sjs-stroke-x1); + --ctr-property-grid-header-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-header-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-header-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-header-padding-top: var(--sjs-spacing-x150); + --ctr-property-grid-header-padding-bottom: var(--sjs-spacing-x150); + --ctr-property-grid-header-border-color: var(--sjs-primary-background-500); + --ctr-property-grid-header-border-width-bottom: var(--sjs-stroke-x2); + --ctr-caption-with-actions-padding-right: var(--sjs-spacing-x0125); + --ctr-caption-with-actions-description-button-margin-left: var(--sjs-spacing-x05); + --ctr-caption-with-actions-description-text-color: var(--sjs-layer-3-foreground-50); + --ctr-caption-with-actions-description-padding-bottom: var(--sjs-spacing-x2); + --ctr-caption-with-actions-description-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-data-table-cell-padding-left: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-right: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-top: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-bottom: var(--sjs-spacing-x1); + --ctr-data-table-cell-gap: var(--sjs-spacing-x1); + --ctr-data-table-cell-text-color: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-drop-down-arrow-color: var(--sjs-layer-1-foreground-50); + --ctr-data-table-cell-drop-down-arrow-width: var(--sjs-size-x2); + --ctr-data-table-cell-drop-down-arrow-height: var(--sjs-size-x2); + --ctr-data-table-cell-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-data-table-cell-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-text-color-header: var(--sjs-layer-2-foreground-50); + --ctr-data-table-cell-drop-down-arrow-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-border-width-focused: var(--sjs-stroke-x2); + --ctr-data-table-cell-border-color-focused: var(--sjs-primary-background-500); + --ctr-data-table-cell-corner-radius-focused: var(--sjs-corner-radius-x05); + --ctr-data-table-row-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-row-background-color-header: var(--sjs-layer-2-background-500); + --ctr-data-table-row-border-color: var(--sjs-border-25); + --ctr-data-table-row-border-width: var(--sjs-stroke-x1); + --ctr-data-table-row-padding-top: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-bottom: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-right: var(--sjs-spacing-x05); + --ctr-data-table-row-drag-area-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-data-table-row-drag-area-icon-width: var(--sjs-size-x3); + --ctr-data-table-row-drag-area-icon-height: var(--sjs-size-x3); + --ctr-data-table-row-drag-area-padding-left: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-right: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-top: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-bottom: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-left-header: var(--sjs-spacing-x5); + --ctr-data-table-row-padding-right-header: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-top-header: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-bottom-header: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-left-no-drag: var(--sjs-spacing-x1); + --ctr-data-table-row-background-color-drop-spot: var(--sjs-layer-3-background-500); + --ctr-string-table-row-text-color: var(--sjs-layer-1-foreground-100); + --ctr-string-table-title-background-color: var(--sjs-layer-1-background-500); + --ctr-string-table-title-border-color: var(--sjs-border-10); + --ctr-string-table-title-border-width-bottom: var(--sjs-stroke-x1); + --ctr-string-table-title-padding-left: var(--sjs-spacing-x3); + --ctr-string-table-title-padding-right: var(--sjs-spacing-x3); + --ctr-string-table-title-padding-top: var(--sjs-spacing-x2); + --ctr-string-table-title-padding-bottom: var(--sjs-spacing-x2); + --ctr-string-table-corner-radius: var(--sjs-corner-radius-x05); + --ctr-string-table-title-actionbar-gap: var(--sjs-spacing-x1); + --ctr-string-table-title-caption-color: var(--sjs-layer-1-foreground-50); + --ctr-string-table-title-caption-padding-vert: var(--sjs-spacing-x1); + --ctr-string-table-title-padding-left-actions: var(--sjs-spacing-x2); + --ctr-string-table-title-padding-right-actions: var(--sjs-spacing-x2); + --ctr-error-message-background-color: var(--sjs-semantic-red-background-10); + --ctr-error-message-corner-radius: var(--sjs-corner-radius-x05); + --ctr-error-message-gap: var(--sjs-spacing-x1); + --ctr-error-message-padding-left: var(--sjs-spacing-x150); + --ctr-error-message-padding-right: var(--sjs-spacing-x150); + --ctr-error-message-padding-top: var(--sjs-spacing-x1); + --ctr-error-message-padding-bottom: var(--sjs-spacing-x1); + --ctr-error-message-icon-width: var(--sjs-size-x3); + --ctr-error-message-icon-height: var(--sjs-size-x3); + --ctr-error-message-icon-color: var(--sjs-semantic-red-background-500); + --ctr-error-message-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-item-contextual-buttons-width: var(--sjs-size-x2); + --ctr-list-item-contextual-buttons-height: var(--sjs-size-x2); + --ctr-toolbox-separator-color: var(--sjs-border-25); + --ctr-toolbox-separator-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-separator-height: var(--sjs-size-x0125); + --ctr-toolbox-separator-max-width: var(--sjs-size-x9); + --ctr-toolbox-separator-padding-left: var(--sjs-spacing-x2); + --ctr-toolbox-separator-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-separator-padding-right: var(--sjs-spacing-x2); + --ctr-toolbox-gap: var(--sjs-spacing-x05); + --ctr-toolbox-padding-top: var(--sjs-spacing-x150); + --ctr-toolbox-padding-bottom: var(--sjs-spacing-x2); + --ctr-toolbox-group-gap: var(--sjs-spacing-x05); + --ctr-toolbox-group-padding-left: var(--sjs-spacing-x150); + --ctr-toolbox-group-padding-right: var(--sjs-spacing-x150); + --ctr-button-contextual-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-button-contextual-button-padding-left: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-right: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-top: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-button-contextual-button-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-button-contextual-button-icon-width: var(--sjs-size-x3); + --ctr-button-contextual-button-icon-height: var(--sjs-size-x3); + --ctr-button-contextual-button-background-color-focused: var(--sjs-primary-background-10); + --lbr-contextual-button-background-color: var(--sjs-layer-1-background-500); + --lbr-contextual-button-width: var(--sjs-size-x6); + --lbr-contextual-button-height: var(--sjs-size-x6); + --lbr-contextual-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-contextual-button-padding-left: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-right: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-top: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-bottom: var(--sjs-spacing-x150); + --lbr-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-contextual-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-contextual-button-border-width: var(--sjs-stroke-x1); + --lbr-contextual-button-border-color: var(--sjs-border-25); + --lbr-contextual-button-border-color-hovered-positive: var(--sjs-primary-background-500); + --lbr-contextual-button-width-small: var(--sjs-size-x4); + --lbr-contextual-button-height-small: var(--sjs-size-x4); + --lbr-contextual-button-padding-left-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-right-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-top-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-bottom-small: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-gap: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-left: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-right: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-survey-question-panel-toolbar-item-icon-container-width: var(--sjs-size-x3); + --ctr-survey-question-panel-toolbar-item-icon-container-height: var(--sjs-size-x3); + --ctr-survey-question-panel-toolbar-item-icon-padding-left: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-right: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-color: var(--sjs-secondary-background-500); + --ctr-survey-question-panel-toolbar-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-question-panel-toolbar-item-background-color-selected: var(--sjs-secondary-background-10); + --ctr-survey-question-panel-toolbar-item-icon-color-pressed: var(--sjs-layer-1-foreground-50); + --ctr-survey-page-toolbar-item-icon-color-pressed: var(--sjs-layer-1-foreground-50); + --ctr-survey-page-toolbar-item-text-color: var(--sjs-layer-3-foreground-100); + --ctr-survey-question-panel-toolbar-item-padding-left-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-right-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-top-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-bottom-with-text: var(--sjs-spacing-x1); + --ctr-survey-page-toolbar-item-background-color-selected: var(--sjs-secondary-background-10); + --ctr-survey-question-panel-drag-area-padding-left: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-right: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-top: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-drag-indicator-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-question-panel-drag-area-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-question-panel-drag-area-drag-indicator-height: var(--sjs-size-x2); + --ctr-survey-question-panel-drag-area-expand-button-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-question-panel-drag-area-padding-top-mobile: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-bottom-mobile: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-top-with-buttons: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-bottom-with-buttons: var(--sjs-spacing-x05); + --ctr-preview-pager-background-color: var(--sjs-layer-1-background-500); + --ctr-preview-pager-border-color: var(--sjs-border-25); + --ctr-preview-pager-border-width-top: var(--sjs-stroke-x1); + --ctr-preview-pager-padding-top: var(--sjs-spacing-x1); + --ctr-preview-pager-padding-bottom: var(--sjs-spacing-x1); + --ctr-preview-pager-gap: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-code-viewer-code-error-row-background-color: var(--sjs-semantic-red-background-10); + --ctr-code-viewer-code-error-row-border-color: var(--sjs-border-25); + --ctr-code-viewer-code-error-row-border-width-top: var(--sjs-stroke-x1); + --ctr-code-viewer-code-error-row-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-code-error-row-padding-right: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-padding-top: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-padding-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-gap: var(--sjs-spacing-x2); + --ctr-code-viewer-code-error-row-icon-width: var(--sjs-size-x2); + --ctr-code-viewer-code-error-row-icon-height: var(--sjs-size-x2); + --ctr-code-viewer-code-error-row-icon-color: var(--sjs-semantic-red-background-500); + --ctr-code-viewer-code-error-row-text-color: var(--sjs-layer-1-foreground-100); + --ctr-code-viewer-code-error-row-fix-button-background-color: var(--sjs-layer-1-background-500); + --ctr-code-viewer-code-error-row-fix-button-padding-left: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-fix-button-padding-right: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-fix-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-code-viewer-code-error-row-fix-button-icon-width: var(--sjs-size-x3); + --ctr-code-viewer-code-error-row-fix-button-icon-height: var(--sjs-size-x3); + --ctr-code-viewer-code-error-row-fix-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-code-viewer-code-error-row-fix-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-code-viewer-background-color: var(--sjs-layer-1-background-500); + --ctr-code-viewer-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-code-viewer-title-color: var(--sjs-layer-3-foreground-100); + --ctr-code-viewer-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-right: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-top: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-bottom: var(--sjs-spacing-x2); + --ctr-code-viewer-corner-radius: var(--sjs-corner-radius-x05); + --ctr-code-viewer-text-color: var(--sjs-code-gray-300); + --ctr-code-viewer-text-margin-left: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-right: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-top: var(--sjs-spacing-x1); + --ctr-code-viewer-text-margin-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-background-color: var(--sjs-layer-3-background-500); + --ctr-code-viewer-line-number-panel-width: var(--sjs-size-x8); + --ctr-code-viewer-line-number-panel-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-line-number-panel-padding-right: var(--sjs-spacing-x2); + --ctr-code-viewer-line-number-panel-padding-top: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-padding-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-text-color: var(--sjs-layer-3-foreground-50); + --ctr-data-table-cell-smiley-width: var(--sjs-size-x3); + --ctr-data-table-cell-smiley-height: var(--sjs-size-x3); + --ctr-data-table-cell-smiley-corner-radius: var(--sjs-corner-radius-round); + --ctr-data-table-cell-smiley-padding: var(--sjs-spacing-x075); + --ctr-data-table-cell-smiley-color: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-smiley-stroke-width: var(--sjs-stroke-x1); + --ctr-property-grid-group-caption-padding-left: var(--sjs-spacing-x4); + --ctr-property-grid-group-caption-padding-right: var(--sjs-spacing-x4); + --ctr-property-grid-group-caption-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-group-caption-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-group-caption-border-color: var(--sjs-border-25); + --ctr-property-grid-group-caption-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-group-caption-text-color: var(--sjs-layer-3-foreground-100); + --ctr-toolbox-group-header-expand-button-color: var(--sjs-layer-3-foreground-50); + --lbr-question-panel-background-color: var(--sjs-layer-1-background-500); + --ctr-label-padding-top: var(--sjs-spacing-x1); + --ctr-label-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-padding-left: var(--sjs-spacing-x05); + --ctr-editor-padding-right: var(--sjs-spacing-x05); + --ctr-editor-padding-top: var(--sjs-spacing-x05); + --ctr-editor-padding-bottom: var(--sjs-spacing-x05); + --ctr-editor-gap: var(--sjs-spacing-x05); + --ctr-editor-border-width: var(--sjs-stroke-x1); + --ctr-editor-content-margin-left: var(--sjs-spacing-x150); + --ctr-editor-content-margin-right: var(--sjs-spacing-x150); + --ctr-editor-content-margin-top: var(--sjs-spacing-x1); + --ctr-editor-content-margin-bottom: var(--sjs-spacing-x1); + --ctr-editor-content-gap: var(--sjs-spacing-x1); + --ctr-editor-color-swatch-margin-left: var(--sjs-spacing-x150); + --ctr-editor-label-padding-left: var(--sjs-spacing-x150); + --ctr-editor-label-padding-right: var(--sjs-spacing-x2); + --ctr-editor-label-padding-top: var(--sjs-spacing-x1); + --ctr-editor-label-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-label-separator-width: var(--sjs-stroke-x1); + --ctr-editor-label-separator-color: var(--sjs-border-10); + --ctr-editor-limit-label-padding-left: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-right: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-top: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-bottom: var(--sjs-spacing-x150); + --ctr-editor-buttons-gap: var(--sjs-spacing-x05); + --ctr-editor-border-width-focused: var(--sjs-stroke-x2); + --ctr-editor-border-color-focused: var(--sjs-primary-background-500); + --ctr-editor-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-editor-error-margin: var(--sjs-spacing-x1); + --ctr-checkbox-list-gap-vertical: var(--sjs-spacing-x2); + --ctr-checkbox-list-gap-horizontal: var(--sjs-spacing-x4); + --ctr-surface-placeholder-text-title-color: var(--sjs-layer-3-foreground-100); + --ctr-surface-placeholder-text-description-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-page-placeholder-border-color: var(--sjs-border-25); + --ctr-survey-page-placeholder-border-width: var(--sjs-stroke-x1); + --ctr-survey-page-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-bottom: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-text-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-page-placeholder-gap: var(--sjs-spacing-x4); + --ctr-surface-placeholder-padding-top-completed: var(--sjs-spacing-x6); + --ctr-surface-placeholder-padding-bottom-completed: var(--sjs-spacing-x6); + --ctr-surface-placeholder-gap: var(--sjs-spacing-x4); + --ctr-data-table-placeholder-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-placeholder-gap: var(--sjs-spacing-x05); + --ctr-data-table-placeholder-padding-left: var(--sjs-spacing-x8); + --ctr-data-table-placeholder-padding-right: var(--sjs-spacing-x8); + --ctr-data-table-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-data-table-placeholder-padding-bottom: var(--sjs-spacing-x6); + --ctr-data-table-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-placeholder-gap: var(--sjs-spacing-x05); + --ctr-survey-placeholder-padding-left: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-right: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-top-with-button: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-bottom-with-button: var(--sjs-spacing-x6); + --ctr-survey-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-placeholder-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-placeholder-border-color: var(--sjs-border-25); + --ctr-survey-placeholder-border-width: var(--sjs-stroke-x1); + --ctr-survey-drop-indicator-color: var(--sjs-secondary-background-500); + --ctr-survey-drop-indicator-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-drop-indicator-width: var(--sjs-size-x025); + --ctr-search-background-color: var(--sjs-layer-1-background-500); + --ctr-search-corner-radius: var(--sjs-corner-radius-round); + --ctr-search-padding-left: var(--sjs-spacing-x2); + --ctr-search-padding-right: var(--sjs-spacing-x2); + --ctr-search-padding-top: var(--sjs-spacing-x150); + --ctr-search-padding-bottom: var(--sjs-spacing-x150); + --ctr-search-text-color: var(--sjs-layer-1-foreground-100); + --ctr-search-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-property-grid-search-background-color: var(--sjs-layer-3-background-500); + --ctr-property-grid-search-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-search-text-color: var(--sjs-layer-3-foreground-100); + --ctr-property-grid-search-text-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-search-toolbar-gap: var(--sjs-spacing-x05); + --ctr-search-text-margin: var(--sjs-spacing-x05); + --ctr-property-grid-search-border-color: var(--sjs-border-25); + --ctr-property-grid-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-search-gap: var(--sjs-spacing-x1); + --ctr-search-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-search-button-padding-vertical: var(--sjs-spacing-x05); + --ctr-search-button-padding-horizontal: var(--sjs-spacing-x05); + --ctr-search-button-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-search-button-icon-width: var(--sjs-size-x2); + --ctr-search-button-icon-height: var(--sjs-size-x2); + --ctr-search-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-search-button-icon-color-clear-hovered: var(--sjs-semantic-red-background-500); + --ctr-search-button-background-color-clear-hovered: var(--sjs-semantic-red-background-10); + --ctr-property-grid-search-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-property-grid-search-button-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-property-grid-search-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-search-count-text-color: var(--sjs-layer-1-foreground-50); + --ctr-search-count-text-margin-right: var(--sjs-spacing-x1); + --ctr-property-grid-search-count-text-color: var(--sjs-layer-3-foreground-50); + --ctr-scrollbar-background-color: var(--sjs-border-25); + --ctr-scrollbar-corner-radius: var(--sjs-corner-radius-round); + --ctr-scrollbar-padding-horizontal: var(--sjs-spacing-x05); + --ctr-scrollbar-padding-vertical: var(--sjs-spacing-x05); + --ctr-scrollbar-width: var(--sjs-size-x150); + --ctr-survey-question-panel-toolbar-gap: var(--sjs-spacing-x1); + --ctr-survey-info-panel-background-color: var(--sjs-layer-1-background-400); + --ctr-survey-info-panel-padding-left: var(--sjs-spacing-x8); + --ctr-survey-info-panel-padding-right: var(--sjs-spacing-x8); + --ctr-survey-info-panel-padding-top: var(--sjs-spacing-x4); + --ctr-survey-info-panel-padding-bottom: var(--sjs-spacing-x4); + --ctr-survey-info-panel-corner-radius: var(--sjs-corner-radius-x1); + --ctr-survey-info-panel-gap: var(--sjs-spacing-x05); + --ctr-survey-info-panel-text-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-info-panel-padding-bottom-with-button: var(--sjs-spacing-x2); + --ctr-survey-info-panel-padding-left-small: var(--sjs-spacing-x3); + --ctr-survey-info-panel-padding-right-small: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-left: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-right: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-top: var(--sjs-spacing-x1); + --ctr-survey-action-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-action-button-gap: var(--sjs-spacing-x1); + --ctr-survey-action-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-action-button-icon-width: var(--sjs-size-x3); + --ctr-survey-action-button-icon-height: var(--sjs-size-x3); + --ctr-survey-action-button-icon-width-small: var(--sjs-size-x2); + --ctr-survey-action-button-icon-height-small: var(--sjs-size-x2); + --ctr-survey-action-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-action-button-icon-color-positive: var(--sjs-primary-background-500); + --ctr-survey-action-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-action-button-text-color-positive: var(--sjs-primary-background-500); + --ctr-survey-action-button-text-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-action-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-survey-action-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --ctr-survey-action-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-survey-action-button-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-survey-action-button-padding-left-with-icon: var(--sjs-spacing-x2); + --ctr-survey-action-button-padding-left-icon-only: var(--sjs-spacing-x1); + --ctr-survey-action-button-padding-right-icon-only: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-contextual-button-width: var(--sjs-size-x6); + --ctr-survey-contextual-button-height: var(--sjs-size-x6); + --ctr-survey-contextual-button-width-small: var(--sjs-size-x4); + --ctr-survey-contextual-button-height-small: var(--sjs-size-x4); + --ctr-survey-contextual-button-padding-left: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-left-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-right: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-right-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-top: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-top-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-bottom: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-bottom-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-contextual-button-border-width: var(--sjs-stroke-x1); + --ctr-survey-contextual-button-border-color: var(--sjs-border-25); + --ctr-survey-contextual-button-border-color-hovered-positive: var(--sjs-primary-background-500); + --ctr-survey-contextual-button-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-contextual-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-contextual-button-width-large: var(--sjs-size-x8); + --lbr-contextual-button-height-large: var(--sjs-size-x8); + --lbr-contextual-button-padding-left-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-right-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-top-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-bottom-large: var(--sjs-spacing-x2); + --lbr-contextual-button-background-color-camera: var(--sjs-semantic-red-background-500); + --lbr-contextual-button-icon-color-camera: var(--sjs-semantic-red-foreground-100); + --lbr-contextual-button-border-width-hovered-camera: var(--sjs-stroke-x2); + --lbr-contextual-button-border-color-hovered-camera: var(--sjs-semantic-red-background-500); + --lbr-action-button-padding-left: var(--sjs-spacing-x3); + --lbr-action-button-padding-left-icon-only: var(--sjs-spacing-x1); + --lbr-action-button-padding-left-with-icon: var(--sjs-spacing-x2); + --lbr-action-button-padding-right: var(--sjs-spacing-x3); + --lbr-action-button-padding-right-icon-only: var(--sjs-spacing-x1); + --lbr-action-button-padding-top: var(--sjs-spacing-x1); + --lbr-action-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-action-button-gap: var(--sjs-spacing-x1); + --lbr-action-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-action-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-action-button-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-action-button-icon-color-positive: var(--sjs-primary-background-500); + --lbr-action-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --lbr-action-button-text-color-positive: var(--sjs-primary-background-500); + --lbr-action-button-text-color-negative: var(--sjs-semantic-red-background-500); + --lbr-action-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-action-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-action-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-survey-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --ctr-survey-placeholder-border-color-hovered: var(--sjs-primary-background-500); + --ctr-survey-placeholder-border-width-hovered: var(--sjs-stroke-x2); + --ctr-survey-info-panel-icon-color: var(--sjs-primary-background-500); + --ctr-string-table-footer-text-color: var(--sjs-layer-3-foreground-50); + --ctr-string-table-footer-padding-top: var(--sjs-spacing-x2); + --ctr-string-table-footer-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-background-color: var(--sjs-layer-1-background-500); + --lbr-tag-box-item-remove-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-tag-box-item-remove-button-padding: var(--sjs-spacing-x05); + --lbr-tag-box-item-remove-button-icon-color: var(--sjs-primary-foreground-100); + --lbr-tag-box-item-remove-button-background-color-hovered: var(--sjs-primary-foreground-25); + --lbr-popup-menu-search-background-color: var(--sjs-layer-1-background-500); + --lbr-popup-menu-search-padding-left: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-right: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-top: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-bottom: var(--sjs-spacing-x2); + --lbr-popup-menu-search-clear-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-popup-menu-search-text-color: var(--sjs-layer-1-foreground-100); + --lbr-popup-menu-search-clear-button-padding-horizontal: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-popup-menu-search-clear-button-padding-vertical: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-popup-menu-search-text-margin: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-background-color-hovered: var(--sjs-semantic-red-background-10); + --lbr-popup-menu-search-border-color: var(--sjs-border-10); + --lbr-popup-menu-search-border-width-bottom: var(--sjs-stroke-x1); + --lbr-popup-menu-search-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-popup-menu-search-icon-margin-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-logo-placeholder-icon-width: var(--sjs-size-x6); + --ctr-survey-header-logo-placeholder-icon-height: var(--sjs-size-x6); + --lbr-separator-color: var(--sjs-border-25); + --lbr-separator-margin-vertical-small: var(--sjs-spacing-x1); + --lbr-separator-margin-horizontal-small: var(--sjs-spacing-x1); + --lbr-separator-margin-vertical-medium: var(--sjs-spacing-x2); + --lbr-separator-margin-horizontal-medium: var(--sjs-spacing-x2); + --lbr-tooltip-padding-left: var(--sjs-spacing-x2); + --lbr-tooltip-padding-right: var(--sjs-spacing-x2); + --lbr-tooltip-padding-top: var(--sjs-spacing-x1); + --lbr-tooltip-padding-bottom: var(--sjs-spacing-x1); + --lbr-tooltip-corder-radius: var(--sjs-corner-radius-x05); + --lbr-tooltip-text-color: var(--sjs-layer-1-foreground-100); + --lbr-tooltip-text-color-error: var(--sjs-semantic-red-foreground-100); + --lbr-tooltip-background-color: var(--sjs-layer-1-background-500); + --lbr-tooltip-background-color-error: var(--sjs-semantic-red-background-500); + --lbr-notification-padding-left: var(--sjs-spacing-x6); + --lbr-notification-padding-right: var(--sjs-spacing-x6); + --lbr-notification-padding-top: var(--sjs-spacing-x3); + --lbr-notification-padding-bottom: var(--sjs-spacing-x3); + --lbr-notification-corder-radius: var(--sjs-corner-radius-x1); + --lbr-notification-text-color: var(--sjs-layer-1-foreground-100); + --lbr-notification-text-color-error: var(--sjs-semantic-red-foreground-100); + --lbr-notification-background-color: var(--sjs-layer-1-background-500); + --lbr-notification-background-color-error: var(--sjs-semantic-red-background-500); + --lbr-notification-gap: var(--sjs-spacing-x6); + --lbr-notification-text-color-success: var(--sjs-semantic-green-foreground-100); + --lbr-notification-background-color-success: var(--sjs-semantic-green-background-500); + --lbr-notification-button-border-width: var(--sjs-stroke-x2); + --lbr-notification-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-notification-button-padding-left: var(--sjs-spacing-x3); + --lbr-notification-button-padding-right: var(--sjs-spacing-x3); + --lbr-notification-button-padding-top: var(--sjs-spacing-x1); + --lbr-notification-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-notification-padding-right-with-button: var(--sjs-spacing-x2); + --lbr-notification-padding-left-with-button: var(--sjs-spacing-x6); + --lbr-notification-padding-top-with-button: var(--sjs-spacing-x2); + --lbr-notification-padding-bottom-with-button: var(--sjs-spacing-x2); + --ctr-survey-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-survey-placeholder-padding-bottom: var(--sjs-spacing-x8); + --ctr-survey-placeholder-loading-width: var(--sjs-size-x6); + --ctr-survey-placeholder-loading-height: var(--sjs-size-x6); + --ctr-survey-placeholder-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-placeholder-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-image-background-color-no-image: var(--sjs-layer-2-background-500); + --ctr-survey-image-no-image-icon-color: var(--sjs-layer-2-foreground-50); + --ctr-survey-image-no-image-icon-width: var(--sjs-size-x6); + --ctr-survey-image-no-image-icon-height: var(--sjs-size-x6); + --ctr-survey-image-picker-item-border-width-placeholder: var(--sjs-stroke-x1); + --ctr-survey-image-picker-item-border-color-placeholder: var(--sjs-border-25); + --ctr-survey-image-picker-item-border-color-hovered-placeholder: var(--sjs-primary-background-500); + --ctr-survey-image-picker-item-border-width-hovered-placeholder: var(--sjs-stroke-x2); + --ctr-survey-image-picker-item-background-color-hovered-placeholder: var(--sjs-primary-background-10); + --ctr-survey-image-picker-item-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-image-picker-item-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-image-picker-item-no-image-icon-color: var(--sjs-layer-2-foreground-50); + --ctr-survey-image-picker-item-background-color-no-image: var(--sjs-layer-2-background-500); + --ctr-survey-image-picker-drop-spot-color: var(--sjs-layer-3-background-500); + --ctr-survey-image-picker-dragging-panel-corner-radius: var(--sjs-corner-radius-x1); + --ctr-survey-image-picker-dragging-panel-padding: var(--sjs-spacing-x05); + --ctr-survey-image-picker-dragging-panel-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-item-actionbar-sort-indicator-color: var(--sjs-primary-background-500); + --ctr-survey-item-actionbar-drag-indicator-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-item-actionbar-drag-indicator-padding-left: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-drag-indicator-padding-right: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-drag-indicator-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-drag-indicator-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-item-actionbar-drag-indicator-height: var(--sjs-size-x3); + --ctr-survey-item-actionbar-sort-indicator-padding-left: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-sort-indicator-padding-right: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-sort-indicator-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-sort-indicator-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-sort-indicator-width: var(--sjs-size-x3); + --ctr-survey-item-actionbar-sort-indicator-height: var(--sjs-size-x3); + --ctr-actionbar-button-padding-bottom-large-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-icon-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-bottom-large-icon-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-left-large-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-large-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-medium-text-drop-down: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-right-large-text-drop-down: var(--sjs-spacing-x150); + --ctr-string-table-title-caption-color-secondary: var(--sjs-layer-1-foreground-50); + --ctr-string-table-title-caption-gap: var(--sjs-spacing-x05); + --ctr-property-grid-form-padding-left: var(--sjs-spacing-x4); + --ctr-property-grid-form-padding-right: var(--sjs-spacing-x4); + --ctr-property-grid-form-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-form-padding-bottom: var(--sjs-spacing-x5); + --ctr-property-grid-form-border-color: var(--sjs-border-25); + --ctr-property-grid-form-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-form-padding-top-no-label: var(--sjs-spacing-x4); + --ctr-property-grid-form-gap: var(--sjs-spacing-x2); + --ctr-page-navigator-padding-left: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-right: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-top: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-bottom: var(--sjs-spacing-x150); + --ctr-page-navigator-gap: var(--sjs-spacing-x2); + --ctr-toolbox-search-padding-left: var(--sjs-spacing-x3); + --ctr-toolbox-search-padding-right: var(--sjs-spacing-x2); + --ctr-toolbox-search-padding-top: var(--sjs-spacing-x250); + --ctr-toolbox-search-icon-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-toolbox-search-padding-bottom: var(--sjs-spacing-x250); + --ctr-toolbox-search-border-color: var(--sjs-border-25); + --ctr-toolbox-search-gap: var(--sjs-spacing-x1); + --ctr-toolbox-search-text-color: var(--sjs-layer-3-foreground-100); + --ctr-toolbox-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-toolbox-search-text-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-toolbox-search-clear-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-toolbox-search-clear-button-background-color-hovered: var(--sjs-semantic-red-background-10); + --ctr-search-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-search-gap: var(--sjs-spacing-x1); + --ctr-search-icon-width: var(--sjs-size-x3); + --ctr-search-icon-height: var(--sjs-size-x3); + --ctr-search-icon-width-small: var(--sjs-size-x2); + --ctr-search-icon-height-small: var(--sjs-size-x2); + --ctr-toolbox-search-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-toolbox-search-clear-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --ctr-toolbox-separator-max-width-compact: var(--sjs-size-max); + --ctr-toolbox-separator-padding-left-compact: var(--sjs-spacing-x2); + --ctr-toolbox-separator-padding-right-compact: var(--sjs-spacing-x2); + --ctr-checkbox-gap: var(--sjs-spacing-x1); + --ctr-checkbox-description-button-margin-left: var(--sjs-spacing-x05); + --ctr-checkbox-description-text-margin-left: var(--sjs-spacing-x4); + --ctr-button-group-item-content-interval: var(--sjs-spacing-x1); + --ctr-radio-button-gap: var(--sjs-spacing-x1); + --ctr-editor-layout-gap: var(--sjs-spacing-x1); + --ctr-expression-items-gap: var(--sjs-spacing-x1); + --ctr-expression-rows-gap: var(--sjs-spacing-x2); + --ctr-font-large-size: var(--sjs-font-size-x4); + --ctr-font-large-line-height: var(--sjs-line-height-x5); + --ctr-font-medium-size: var(--sjs-font-size-x3); + --ctr-font-medium-line-height: var(--sjs-line-height-x4); + --ctr-font-default-size: var(--sjs-font-size-x2); + --ctr-font-default-line-height: var(--sjs-line-height-x3); + --ctr-font-small-size: var(--sjs-font-size-x150); + --ctr-font-small-line-height: var(--sjs-line-height-x2); + --ctr-font-code-size: var(--sjs-font-size-x2); + --ctr-font-code-line-height: var(--sjs-line-height-x3); + --ctr-survey-checkboxes-item-margin-left-hovered: var(--sjs-spacing-x5n); + --lbr-checkboxes-item-margin-top: var(--sjs-spacing-x05); + --lbr-checkboxes-item-margin-bottom: var(--sjs-spacing-x05); + --lbr-checkboxes-item-text-margin-left: var(--sjs-spacing-x1); + --lbr-shadow-x-large-color: var(--sjs-special-glow); + --lbr-shadow-large-color: var(--sjs-special-glow); + --lbr-shadow-medium-color: var(--sjs-special-glow); + --lbr-shadow-small-color: var(--sjs-special-shadow); + --lbr-checkboxes-item-button-margin-top: var(--sjs-spacing-x1); + --lbr-checkboxes-item-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-checkboxes-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-checkboxes-item-text-margin-bottom: var(--sjs-spacing-x1); + --lbr-checkboxes-item-button-width: var(--sjs-size-x3); + --lbr-checkboxes-item-button-height: var(--sjs-size-x3); + --lbr-checkboxes-item-button-corner-radius: var(--sjs-corner-radius-x025); + --lbr-checkboxes-item-button-background-color: var(--sjs-layer-2-background-500); + --lbr-checkboxes-item-button-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-checkboxes-item-button-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-checkboxes-item-button-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-checkboxes-item-button-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-checkboxes-item-button-shadow-color: var(--lbr-shadow-inner-color); + --lbr-checkboxes-item-button-check-mark-width: var(--sjs-size-x2); + --lbr-checkboxes-item-button-check-mark-height: var(--sjs-size-x2); + --lbr-checkboxes-item-button-check-mark-color: var(--sjs-primary-background-500); + --lbr-checkboxes-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-checkboxes-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-checkboxes-item-button-background-color-preview: var(--sjs-layer-1-background-500); + --lbr-checkboxes-item-button-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-checkboxes-item-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-checkboxes-item-button-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-checkboxes-item-button-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-checkboxes-item-button-background-color-focused: var(--sjs-layer-1-background-500); + --lbr-checkboxes-item-button-background-color-checked: var(--sjs-primary-background-500); + --lbr-checkboxes-item-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-checkboxes-item-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-checkboxes-item-button-check-mark-color-checked: var(--sjs-primary-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-read-only: var(--sjs-layer-1-foreground-100); + --ctr-survey-checkboxes-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-checkboxes-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-checkboxes-item-corner-radius-floating: var(--sjs-corner-radius-round); + --ctr-survey-checkboxes-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-checkboxes-item-padding-right-floating: var(--sjs-spacing-x3); + --ctr-survey-checkboxes-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-checkboxes-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-checkboxes-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-checkboxes-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-checkboxes-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-checkboxes-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-checkboxes-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-checkboxes-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-checkboxes-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-checkboxes-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-radio-button-group-item-corner-radius-floating: var(--sjs-corner-radius-round); + --ctr-survey-radio-button-group-item-margin-left: var(--sjs-spacing-x5); + --ctr-survey-radio-button-group-item-margin-left-mobile: var(--sjs-spacing-x3); + --ctr-survey-radio-button-group-item-margin-left-floating: var(--sjs-spacing-x1); + --ctr-survey-radio-button-group-item-margin-right-floating: var(--sjs-spacing-x3); + --lbr-radio-buttons-item-margin-top: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-margin-bottom: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-text-margin-left: var(--sjs-spacing-x1); + --ctr-survey-radio-button-group-item-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-margin-top: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-width: var(--sjs-size-x3); + --lbr-radio-buttons-item-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-radio-buttons-item-button-background-color: var(--sjs-layer-2-background-500); + --lbr-radio-buttons-item-button-dot-width: var(--sjs-size-x1); + --lbr-radio-buttons-item-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-radio-buttons-item-button-dot-color: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-dot-color-checked: var(--sjs-primary-foreground-100); + --lbr-radio-buttons-item-button-dot-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-radio-buttons-item-button-dot-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-radio-buttons-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-radio-buttons-item-text-margin-bottom: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-radio-buttons-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-radio-button-group-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-radio-buttons-item-button-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-radio-buttons-item-button-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-radio-buttons-item-button-shadow-color: var(--lbr-shadow-inner-color); + --lbr-radio-buttons-item-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-radio-buttons-item-button-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-radio-buttons-item-button-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-radio-buttons-item-button-background-color-focused: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-checked: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-background-color-preview: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-error: var(--sjs-semantic-red-background-10); + --ctr-survey-radio-button-group-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-radio-button-group-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-radio-button-group-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-radio-button-group-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-radio-button-group-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-radio-button-group-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-radio-button-group-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-radio-button-group-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-radio-button-group-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-radio-button-group-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --lbr-radio-buttons-item-button-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-radio-buttons-item-button-check-mark-width: var(--sjs-size-x2); + --lbr-radio-buttons-item-button-check-mark-height: var(--sjs-size-x2); + --lbr-radio-buttons-item-button-check-mark-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-radio-buttons-item-button-background-color-alternate: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-read-only-alternate: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-disabled-alternate: var(--sjs-layer-1-background-500); + --lbr-editor-corner-radius: var(--sjs-corner-radius-x05); + --lbr-editor-padding-left: var(--sjs-spacing-x2); + --lbr-editor-padding-right: var(--sjs-spacing-x2); + --lbr-editor-padding-top: var(--sjs-spacing-x150); + --lbr-editor-padding-bottom: var(--sjs-spacing-x150); + --lbr-editor-gap: var(--sjs-spacing-x2); + --lbr-editor-background-color: var(--sjs-layer-2-background-500); + --lbr-editor-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-editor-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-editor-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-editor-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-editor-shadow-color: var(--lbr-shadow-inner-color); + --lbr-editor-text-color: var(--sjs-layer-2-foreground-100); + --lbr-editor-text-color-placeholder: var(--sjs-layer-2-foreground-50); + --lbr-editor-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-editor-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-editor-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-editor-text-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-editor-text-color-disabled-placeholder: var(--sjs-layer-2-foreground-100); + --lbr-editor-border-width-focused: var(--sjs-stroke-x2); + --lbr-editor-border-color-focused: var(--sjs-primary-background-500); + --lbr-editor-limit-label-color: var(--sjs-layer-2-foreground-50); + --lbr-editor-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-editor-border-width-bottom-preview: var(--sjs-stroke-x1); + --lbr-editor-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-editor-text-color-read-only-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-editor-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-matrix-total-row-cell-padding-left: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-padding-right: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-padding-top: var(--sjs-spacing-x150); + --lbr-matrix-total-row-cell-padding-bottom: var(--sjs-spacing-x150); + --lbr-matrix-total-row-cell-border-width-bottom: var(--sjs-stroke-x1); + --lbr-matrix-total-row-cell-border-color: var(--sjs-border-10); + --lbr-labeled-editor-padding-left: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-right: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-labeled-editor-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-labeled-editor-label-color: var(--sjs-layer-2-foreground-50); + --lbr-labeled-editor-label-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-labeled-editor-padding-top-mobile-empty: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-bottom-mobile-empty: var(--sjs-spacing-x2); + --ctr-survey-labeled-editor-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-labeled-editor-margin-left-mobile: var(--sjs-spacing-x3n); + --lbr-editor-button-corner-radius: var(--sjs-corner-radius-x025); + --lbr-editor-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-editor-button-icon-color: var(--sjs-layer-2-foreground-50); + --lbr-editor-button-padding-top: var(--sjs-spacing-x1); + --lbr-editor-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-editor-button-padding-left: var(--sjs-spacing-x1); + --lbr-editor-button-padding-right: var(--sjs-spacing-x1); + --lbr-editor-button-icon-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-editor-button-icon-width: var(--sjs-size-x3); + --lbr-editor-button-icon-height: var(--sjs-size-x3); + --lbr-rating-item-background-color: var(--sjs-layer-1-background-500); + --lbr-rating-item-padding-left: var(--sjs-spacing-x05); + --lbr-rating-item-padding-right: var(--sjs-spacing-x05); + --lbr-rating-item-padding-top: var(--sjs-spacing-x05); + --lbr-rating-item-padding-bottom: var(--sjs-spacing-x05); + --lbr-rating-item-width: var(--sjs-size-x6); + --lbr-rating-item-height: var(--sjs-size-x6); + --lbr-rating-item-corner-radius: var(--sjs-corner-radius-round); + --lbr-rating-item-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-rating-item-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-rating-item-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-rating-item-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-rating-item-shadow-color: var(--lbr-shadow-small-color); + --lbr-rating-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-text-margin-left: var(--sjs-spacing-x2); + --lbr-rating-item-text-margin-right: var(--sjs-spacing-x2); + --lbr-rating-smiley-icon-color: var(--sjs-border-25); + --lbr-rating-smiley-icon-width: var(--sjs-size-x3); + --lbr-rating-smiley-icon-height: var(--sjs-size-x3); + --lbr-rating-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-item-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-item-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-item-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-item-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-item-border-width-disabled: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-read-only: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-item-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-item-border-color-read-only: var(--sjs-border-25); + --lbr-rating-item-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-item-border-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-text-color-read-only: var(--sjs-layer-1-foreground-50); + --lbr-rating-item-text-color-selected: var(--sjs-primary-foreground-100); + --lbr-rating-label-color: var(--sjs-layer-1-foreground-50); + --lbr-rating-label-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-border-width: var(--sjs-stroke-x2); + --lbr-rating-smiley-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-smiley-border-color: var(--sjs-border-25); + --lbr-rating-smiley-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-smiley-border-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-smiley-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-smiley-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-background-color-preview-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-smiley-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-smiley-icon-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-icon-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-icon-color-focused: var(--sjs-primary-background-500); + --lbr-rating-smiley-icon-color-selected: var(--sjs-primary-foreground-100); + --lbr-rating-smiley-icon-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-icon-color-preview-selected: var(--sjs-layer-1-background-500); + --lbr-rating-smiley-icon-color-error: var(--sjs-layer-1-foreground-50); + --lbr-rating-smiley-icon-color-disabled-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-red-icon-color: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-icon-color-selected: var(--sjs-semantic-red-foreground-100); + --lbr-rating-smiley-red-border-color: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-background-color-hovered: var(--sjs-semantic-red-background-10); + --lbr-rating-smiley-red-background-color-selected: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-background-color-selected-focused: var(--sjs-semantic-red-foreground-100); + --lbr-rating-smiley-yellow-icon-color: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-icon-color-selected: var(--sjs-semantic-yellow-foreground-100); + --lbr-rating-smiley-yellow-border-color: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-background-color-hovered: var(--sjs-semantic-yellow-background-10); + --lbr-rating-smiley-yellow-background-color-selected: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-background-color-selected-focused: var(--sjs-semantic-yellow-foreground-100); + --lbr-rating-smiley-green-icon-color: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-icon-color-selected: var(--sjs-semantic-green-foreground-100); + --lbr-rating-smiley-green-border-color: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-background-color-hovered: var(--sjs-semantic-green-background-10); + --lbr-rating-smiley-green-background-color-selected: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-background-color-selected-focused: var(--sjs-semantic-green-foreground-100); + --lbr-rating-star-width: var(--sjs-size-x6); + --lbr-rating-star-height: var(--sjs-size-x6); + --lbr-rating-star-border-width: var(--sjs-stroke-x2); + --lbr-rating-star-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-star-border-color: var(--sjs-border-25); + --lbr-rating-star-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-star-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-star-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-star-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-star-background-color-preview-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-star-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-star-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-star-background-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-background-color-inactive: var(--sjs-border-25); + --lbr-ranking-item-number-width: var(--sjs-size-x5); + --lbr-ranking-item-number-height: var(--sjs-size-x5); + --lbr-ranking-item-number-corner-radius: var(--sjs-corner-radius-round); + --lbr-ranking-item-number-background-color: var(--sjs-primary-background-10); + --lbr-ranking-item-number-text-color: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-number-icon-width: var(--sjs-size-x2); + --lbr-ranking-item-number-icon-height: var(--sjs-size-x2); + --lbr-rating-star-width-small: var(--sjs-size-x3); + --lbr-rating-star-height-small: var(--sjs-size-x3); + --lbr-ranking-item-number-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-ranking-item-number-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-ranking-item-number-border-color-focused: var(--sjs-primary-background-500); + --lbr-ranking-item-number-border-width-focused: var(--sjs-stroke-x2); + --ctr-survey-ranking-item-digit-background-color-inactive: var(--sjs-layer-3-background-500); + --ctr-survey-ranking-item-digit-text-color-inactive: var(--sjs-layer-3-foreground-50); + --lbr-ranking-item-number-icon-color: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-gap: var(--sjs-spacing-x2); + --lbr-ranking-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-ranking-item-text-margin-bottom: var(--sjs-spacing-x1); + --ctr-survey-ranking-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-ranking-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-item-actionbar-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-drag-indicator-icon-color: var(--sjs-primary-background-500); + --ctr-survey-ranking-margin-left: var(--sjs-spacing-x5); + --ctr-survey-ranking-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-ranking-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-ranking-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-ranking-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-ranking-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-ranking-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-ranking-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-ranking-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-ranking-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-ranking-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-ranking-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-ranking-item-corner-radius-floating: var(--sjs-corner-radius-round); + --ctr-survey-ranking-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-ranking-item-padding-right-floating: var(--sjs-spacing-x4); + --ctr-survey-ranking-item-padding-top-floating: var(--sjs-spacing-x05); + --ctr-survey-ranking-item-padding-bottom-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-shadow-floating-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-ranking-item-shadow-floating-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-ranking-item-shadow-floating-1-blur: var(--lbr-shadow-large-blur); + --lbr-ranking-item-shadow-floating-1-spread: var(--lbr-shadow-large-spread); + --lbr-ranking-item-shadow-floating-1-color: var(--lbr-shadow-large-color); + --lbr-ranking-item-shadow-floating-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-ranking-item-shadow-floating-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-ranking-item-shadow-floating-2-blur: var(--lbr-shadow-medium-blur); + --lbr-ranking-item-shadow-floating-2-spread: var(--lbr-shadow-medium-spread); + --lbr-ranking-item-shadow-floating-2-color: var(--lbr-shadow-medium-color); + --lbr-ranking-item-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-ranking-item-corner-radius-floating: var(--sjs-corner-radius-round); + --lbr-ranking-item-padding-left-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-top-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-bottom-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-right-floating: var(--sjs-spacing-x4); + --lbr-ranking-drop-spot-color: var(--sjs-layer-1-background-400); + --lbr-ranking-item-number-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-ranking-item-number-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-number-border-width-preview: var(--sjs-stroke-x1); + --ctr-survey-item-actionbar-padding-left-mobile: var(--sjs-spacing-x2); + --ctr-survey-item-actionbar-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-icon-color: var(--sjs-primary-background-500); + --lbr-ranking-indicators-drag-indicator-icon-width: var(--sjs-size-x3); + --lbr-ranking-indicators-drag-indicator-icon-height: var(--sjs-size-x3); + --lbr-ranking-indicators-sort-indicator-icon-width: var(--sjs-size-x3); + --lbr-ranking-indicators-sort-indicator-icon-height: var(--sjs-size-x3); + --lbr-ranking-indicators-padding-top: var(--sjs-spacing-x05); + --lbr-ranking-indicators-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-padding-left-mobile: var(--sjs-spacing-x2); + --lbr-ranking-indicators-drag-indicator-padding-left: var(--sjs-spacing-x1); + --lbr-ranking-indicators-drag-indicator-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-padding-left: var(--sjs-spacing-x1); + --lbr-ranking-indicators-drag-indicator-icon-color-mobile: var(--sjs-layer-1-foreground-100); + --lbr-ranking-indicators-drag-indicator-padding-top: var(--sjs-spacing-x05); + --lbr-ranking-indicators-drag-indicator-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-sort-indicator-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-sort-indicator-padding-top: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-button-height: var(--sjs-size-x3); + --lbr-radio-buttons-item-button-dot-height: var(--sjs-size-x1); + --lbr-boolean-thumb-background-color-active: var(--sjs-layer-1-background-500); + --lbr-boolean-thumb-padding-left: var(--sjs-spacing-x3); + --lbr-boolean-thumb-padding-right: var(--sjs-spacing-x3); + --lbr-boolean-thumb-padding-top: var(--sjs-spacing-x1); + --lbr-boolean-thumb-padding-bottom: var(--sjs-spacing-x1); + --lbr-boolean-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-boolean-thumb-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-boolean-thumb-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-boolean-thumb-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-boolean-thumb-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-boolean-thumb-shadow-color: var(--lbr-shadow-small-color); + --lbr-boolean-thumb-text-color: var(--sjs-layer-2-foreground-50); + --lbr-boolean-corner-radius: var(--sjs-corner-radius-round); + --lbr-boolean-background-color: var(--sjs-layer-2-background-500); + --lbr-boolean-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-boolean-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-boolean-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-boolean-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-boolean-shadow-color: var(--lbr-shadow-inner-color); + --lbr-boolean-padding-left: var(--sjs-spacing-x05); + --lbr-boolean-padding-right: var(--sjs-spacing-x05); + --lbr-boolean-padding-top: var(--sjs-spacing-x05); + --lbr-boolean-padding-bottom: var(--sjs-spacing-x05); + --lbr-boolean-gap: var(--sjs-spacing-x05); + --lbr-boolean-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-boolean-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-boolean-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-boolean-thumb-text-color-active: var(--sjs-primary-background-500); + --lbr-boolean-thumb-text-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-boolean-thumb-text-color-read-only: var(--sjs-layer-2-foreground-50); + --lbr-boolean-thumb-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-read-only-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-preview-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-disabled-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-border-color-focused: var(--sjs-primary-background-500); + --lbr-boolean-thumb-border-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-boolean-border-width-focused: var(--sjs-stroke-x2); + --lbr-boolean-thumb-border-width-read-only: var(--sjs-stroke-x2); + --lbr-boolean-thumb-border-width-preview: var(--sjs-stroke-x1); + --lbr-boolean-thumb-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-image-picker-item-title-color: var(--sjs-layer-1-foreground-100); + --lbr-image-picker-item-title-margin-top: var(--sjs-spacing-x1); + --lbr-image-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-image-contextual-buttons-gap: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color-positive: var(--sjs-primary-background-500); + --lbr-contextual-button-icon-color-positive: var(--sjs-primary-background-500); + --ctr-survey-image-picker-dragging-panel-shadow-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-image-picker-dragging-panel-shadow-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-image-picker-dragging-panel-shadow-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-image-picker-dragging-panel-shadow-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-image-picker-dragging-panel-shadow-color: var(--ctr-shadow-medium-color); + --lbr-image-picker-item-background-error: var(--sjs-semantic-red-background-500); + --lbr-image-picker-item-check-mark-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-item-title-color: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-gap: var(--sjs-spacing-x1); + --lbr-file-upload-item-image-thumbnail-width: var(--sjs-size-x12); + --lbr-file-upload-item-image-thumbnail-height: var(--sjs-size-x12); + --lbr-file-upload-item-image-thumbnail-background-color: var(--sjs-layer-3-background-500); + --lbr-file-upload-item-file-icon-width: var(--sjs-size-x9); + --lbr-file-upload-item-file-icon-height: var(--sjs-size-x9); + --lbr-file-upload-item-file-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-file-upload-item-loading-width: var(--sjs-size-x6); + --lbr-file-upload-item-loading-height: var(--sjs-size-x6); + --lbr-file-upload-item-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-item-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-file-upload-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-placeholder-border-color-placeholder: var(--sjs-border-25); + --lbr-placeholder-border-width-placeholder: var(--sjs-stroke-x1); + --lbr-file-upload-contextual-buttons-gap: var(--sjs-spacing-x1); + --lbr-signature-loading-width: var(--sjs-size-x6); + --lbr-signature-loading-height: var(--sjs-size-x6); + --lbr-signature-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-signature-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-signature-signature-color: var(--sjs-primary-background-500); + --lbr-file-upload-pager-margin: var(--sjs-spacing-x2); + --lbr-file-upload-item-list-gap: var(--sjs-spacing-x4); + --lbr-file-upload-item-list-margin-left: var(--sjs-spacing-x6); + --lbr-file-upload-item-list-margin-right: var(--sjs-spacing-x6); + --lbr-placeholder-border-color-hovered: var(--sjs-primary-background-500); + --lbr-placeholder-border-width-hovered: var(--sjs-stroke-x2); + --lbr-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --lbr-file-upload-data-area-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-file-upload-data-area-background-color-image: var(--sjs-layer-2-background-500); + --lbr-file-upload-data-area-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-placeholder-loading-width: var(--sjs-size-x6); + --lbr-placeholder-loading-height: var(--sjs-size-x6); + --lbr-placeholder-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-placeholder-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-file-upload-contextual-buttons-camera-button-margin: var(--sjs-spacing-x1); + --lbr-list-item-corner-radius: var(--sjs-corner-radius-x05); + --lbr-list-item-gap: var(--sjs-spacing-x4); + --lbr-list-item-padding-left: var(--sjs-spacing-x2); + --lbr-list-item-padding-right: var(--sjs-spacing-x2); + --lbr-list-item-padding-top: var(--sjs-spacing-x150); + --lbr-list-item-padding-bottom: var(--sjs-spacing-x150); + --lbr-list-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-list-item-description-color: var(--sjs-layer-1-foreground-50); + --lbr-list-item-text-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-list-item-text-color-loading: var(--sjs-layer-1-foreground-50); + --lbr-list-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-list-item-background-color-selected-focused: var(--sjs-primary-background-500); + --lbr-list-item-border-color-focused: var(--sjs-border-10); + --lbr-list-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-list-item-background-color-selected: var(--sjs-primary-background-10); + --lbr-list-item-description-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-list-item-description-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-panel-layout-gap-small: var(--sjs-spacing-x1); + --lbr-panel-layout-gap-medium: var(--sjs-spacing-x2); + --lbr-panel-layout-gap-large: var(--sjs-spacing-x4); + --lbr-page-layout-gap-small: var(--sjs-spacing-x1); + --lbr-page-layout-gap-medium: var(--sjs-spacing-x2); + --lbr-page-layout-gap-large: var(--sjs-spacing-x4); + --lbr-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-button-padding-left: var(--sjs-spacing-x8); + --lbr-button-padding-right: var(--sjs-spacing-x8); + --lbr-button-padding-top: var(--sjs-spacing-x2); + --lbr-button-padding-bottom: var(--sjs-spacing-x2); + --lbr-button-background-color: var(--sjs-layer-1-background-500); + --lbr-button-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-button-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-button-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-button-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-button-shadow-color: var(--lbr-shadow-small-color); + --lbr-button-text-color: var(--sjs-primary-background-500); + --lbr-button-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-button-background-color-panelless: var(--sjs-layer-2-background-500); + --lbr-button-background-color-hovered-panelless: var(--sjs-layer-2-background-400); + --lbr-button-background-color-cta: var(--sjs-primary-background-500); + --lbr-button-background-color-hovered-cta: var(--sjs-primary-background-400); + --lbr-button-background-color-danger: var(--sjs-semantic-red-background-500); + --lbr-button-border-color-focused-danger: var(--sjs-semantic-red-background-500); + --lbr-button-border-width-focused-danger: var(--sjs-stroke-x2); + --lbr-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-button-text-color-cta: var(--sjs-primary-foreground-100); + --lbr-button-text-color-danger: var(--sjs-semantic-red-foreground-100); + --lbr-button-padding-left-small: var(--sjs-spacing-x4); + --lbr-button-padding-right-small: var(--sjs-spacing-x4); + --lbr-button-padding-top-small: var(--sjs-spacing-x150); + --lbr-button-padding-bottom-small: var(--sjs-spacing-x150); + --lbr-button-text-color-disabled-panelless: var(--sjs-layer-2-foreground-100); + --lbr-dialog-corner-radius: var(--sjs-corner-radius-x1); + --lbr-dialog-footer-margin-top: var(--sjs-spacing-x4); + --lbr-dialog-padding-left: var(--sjs-spacing-x4); + --lbr-dialog-padding-right: var(--sjs-spacing-x4); + --lbr-dialog-padding-top: var(--sjs-spacing-x4); + --lbr-dialog-padding-bottom: var(--sjs-spacing-x4); + --lbr-dialog-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-dialog-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-dialog-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-dialog-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-dialog-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-dialog-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-dialog-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-dialog-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-dialog-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-dialog-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-dialog-background-color: var(--sjs-layer-1-background-400); + --lbr-dialog-title-color: var(--sjs-layer-1-foreground-100); + --lbr-dialog-text-color: var(--sjs-layer-1-foreground-100); + --lbr-dialog-title-margin-bottom: var(--sjs-spacing-x2); + --lbr-dialog-footer-gap: var(--sjs-spacing-x2); + --lbr-dialog-screen-color: var(--sjs-special-haze); + --lbr-dialog-margin-left: var(--sjs-spacing-x4); + --lbr-dialog-margin-right: var(--sjs-spacing-x4); + --lbr-dialog-margin-top: var(--sjs-spacing-x4); + --lbr-dialog-margin-bottom: var(--sjs-spacing-x4); + --lbr-dialog-padding-left-center: var(--sjs-spacing-x8); + --lbr-dialog-padding-right-center: var(--sjs-spacing-x8); + --lbr-window-corner-radius: var(--sjs-corner-radius-x1); + --lbr-window-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-window-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-window-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-window-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-window-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-window-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-window-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-window-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-window-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-window-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-window-background-color: var(--sjs-layer-3-background-500); + --lbr-window-header-title-color: var(--sjs-layer-3-foreground-100); + --lbr-window-border-color: var(--sjs-border-25); + --lbr-window-border-width: var(--sjs-stroke-x1); + --lbr-window-header-padding-left: var(--sjs-spacing-x2); + --lbr-window-header-padding-right: var(--sjs-spacing-x1); + --lbr-window-header-padding-top: var(--sjs-spacing-x1); + --lbr-window-header-padding-bottom: var(--sjs-spacing-x1); + --lbr-window-header-gap: var(--sjs-spacing-x4); + --lbr-window-header-button-gap: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-left: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-right: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-top: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-window-header-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-window-header-button-icon-color: var(--sjs-layer-3-foreground-50); + --lbr-window-header-button-icon-width: var(--sjs-size-x2); + --lbr-window-header-button-icon-height: var(--sjs-size-x2); + --lbr-window-header-button-icon-color-hovered: var(--sjs-primary-background-500); + --lbr-window-header-button-background-color-hovered: var(--sjs-primary-background-10); + --lbr-matrix-title-cell-padding-left: var(--sjs-spacing-x2); + --lbr-matrix-title-cell-padding-right: var(--sjs-spacing-x2); + --lbr-matrix-title-cell-padding-top: var(--sjs-spacing-x150); + --lbr-matrix-title-cell-padding-bottom: var(--sjs-spacing-x150); + --lbr-matrix-title-cell-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-matrix-cell-corner-radius: var(--sjs-corner-radius-x075); + --ctr-survey-matrix-cell-border-color-hovered: var(--sjs-secondary-background-10); + --ctr-survey-matrix-cell-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-matrix-cell-border-color-edit: var(--sjs-primary-background-500); + --ctr-survey-matrix-cell-border-width: var(--sjs-stroke-x2); + --lbr-matrix-row-gap: var(--sjs-spacing-x2); + --lbr-matrix-details-padding-left: var(--sjs-spacing-x8); + --lbr-matrix-details-padding-right-delete-button: var(--sjs-spacing-x7); + --lbr-matrix-details-padding-top: var(--sjs-spacing-x3); + --lbr-matrix-details-padding-bottom: var(--sjs-spacing-x3); + --lbr-progress-bar-section-color-completed: var(--sjs-semantic-green-background-500); + --lbr-progress-bar-height: var(--sjs-size-x025); + --lbr-progress-bar-section-color-disabled-completed: var(--sjs-border-25); + --lbr-progress-bar-section-color: var(--sjs-border-10); + --lbr-progress-bar-section-color-disabled: var(--sjs-border-10); + --lbr-progress-bar-section-title-color: var(--sjs-layer-3-foreground-50); + --lbr-progress-bar-section-title-margin-left: var(--sjs-spacing-x4); + --lbr-progress-bar-section-title-margin-right: var(--sjs-spacing-x4); + --lbr-progress-bar-pager-label-text-color: var(--sjs-layer-3-foreground-50); + --lbr-progress-bar-pager-padding-left: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-padding-right: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-padding-top: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-padding-bottom: var(--sjs-spacing-x1); + --lbr-progress-bar-section-title-margin-top: var(--sjs-spacing-x2); + --lbr-progress-bar-section-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-survey-header-logo-placeholder-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-header-logo-placeholder-padding-left: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-top: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-header-logo-toolbar-gap: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --ctr-survey-header-logo-placeholder-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-survey-header-logo-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-header-logo-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-header-logo-loading-width: var(--sjs-size-x6); + --ctr-survey-header-logo-loading-height: var(--sjs-size-x6); + --ctr-survey-header-logo-loading-margin-left: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-top: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-bottom: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --lbr-header-logo-height: var(--sjs-size-x5); + --lbr-header-padding-left: var(--sjs-spacing-x3); + --ctr-survey-header-padding-right-logo-placeholder: var(--sjs-spacing-x1); + --lbr-header-padding-top: var(--sjs-spacing-x3); + --lbr-header-padding-bottom: var(--sjs-spacing-x3); + --lbr-header-border-color: var(--sjs-primary-background-500); + --lbr-header-border-width-bottom: var(--sjs-stroke-x2); + --lbr-header-gap: var(--sjs-spacing-x4); + --lbr-header-text-gap: var(--sjs-spacing-x1); + --lbr-header-text-title-color: var(--sjs-primary-background-500); + --lbr-header-text-description-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-header-text-title-color: var(--sjs-primary-background-500); + --ctr-survey-header-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-header-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-header-text-title-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-text-description-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-text-title-color-error: var(--sjs-semantic-red-background-500); + --lbr-header-padding-right: var(--sjs-spacing-x3); + --lbr-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-header-padding-right-mobile-toc-button: var(--sjs-spacing-x2); + --ctr-survey-header-text-margin-left-mobile-logo-placeholder: var(--sjs-spacing-x2); + --ctr-survey-header-padding-left-mobile-logo-placeholder: var(--sjs-spacing-x1); + --lbr-header-gap-vertical-mobile: var(--sjs-spacing-x3); + --lbr-header-logo-margin-top-mobile: var(--sjs-spacing-x2); + --ctr-survey-header-gap: var(--sjs-spacing-x1); + --lbr-cover-gap: var(--sjs-spacing-x3); + --lbr-cover-text-gap: var(--sjs-spacing-x1); + --lbr-cover-text-title-color: var(--sjs-layer-3-foreground-100); + --lbr-cover-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-cover-text-min-width: var(--sjs-size-x64); + --lbr-cover-text-title-color-dark-mode: var(--sjs-semantic-white-background-500); + --lbr-cover-text-description-color-dark-mode: var(--sjs-semantic-white-background-500); + --lbr-cover-padding-left: var(--sjs-spacing-x5); + --lbr-cover-padding-right: var(--sjs-spacing-x5); + --lbr-cover-padding-top: var(--sjs-spacing-x5); + --lbr-cover-padding-bottom: var(--sjs-spacing-x5); + --lbr-cover-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-cover-height: var(--sjs-size-x32); + --lbr-cover-overlap: var(--sjs-spacing-x8); + --lbr-cover-overlap-mobile: var(--sjs-spacing-x2); + --lbr-timer-background-color: var(--sjs-layer-1-background-500); + --lbr-timer-padding: var(--sjs-spacing-x1); + --lbr-timer-corner-radius: var(--sjs-corner-radius-round); + --lbr-timer-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-timer-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-timer-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-timer-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-timer-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-timer-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-timer-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-timer-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-timer-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-timer-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-timer-width: var(--sjs-size-x18); + --lbr-timer-height: var(--sjs-size-x18); + --lbr-timer-text-color-primary: var(--sjs-primary-background-500); + --lbr-timer-text-color-secondary: var(--sjs-layer-1-foreground-50); + --lbr-timer-progress-color: var(--sjs-layer-3-background-500); + --lbr-timer-progress-width: var(--sjs-stroke-x2); + --lbr-timer-progress-color-filled: var(--sjs-primary-background-500); + --lbr-timer-progress-width-filled: var(--sjs-stroke-x4); + --lbr-timer-width-small: var(--sjs-size-x9); + --lbr-timer-height-small: var(--sjs-size-x9); + --lbr-timer-padding-small: var(--sjs-spacing-x05); + --lbr-tag-box-item-corner-radius: var(--sjs-corner-radius-x025); + --lbr-tag-box-item-padding-left: var(--sjs-spacing-x150); + --lbr-tag-box-item-padding-right: var(--sjs-spacing-x150); + --lbr-tag-box-item-padding-top: var(--sjs-spacing-x1); + --lbr-tag-box-item-padding-bottom: var(--sjs-spacing-x1); + --lbr-tag-box-item-background-color: var(--sjs-primary-background-500); + --lbr-tag-box-item-text-color: var(--sjs-primary-foreground-100); + --lbr-tag-box-item-remove-button-margin-left: var(--sjs-spacing-x4); + --lbr-tag-box-item-mask-color-1: var(--sjs-primary-background-500); + --lbr-tag-box-item-mask-color-2: var(--sjs-primary-background-10); + --lbr-tag-box-item-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-tag-box-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-tag-box-item-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-popup-menu-footer-background-color: var(--sjs-layer-2-background-500); + --lbr-popup-menu-footer-padding-top: var(--sjs-spacing-x05); + --lbr-popup-menu-footer-padding-bottom: var(--sjs-spacing-x05); + --lbr-popup-menu-footer-border-color: var(--sjs-border-10); + --lbr-popup-menu-footer-border-width-top: var(--sjs-stroke-x1); + --lbr-toc-background-color: var(--sjs-layer-1-background-500); + --lbr-toc-border-color: var(--sjs-border-25); + --lbr-toc-border-width-right: var(--sjs-stroke-x1); + --lbr-toc-padding-left: var(--sjs-spacing-x1); + --lbr-toc-padding-right: var(--sjs-spacing-x1); + --lbr-toc-padding-top: var(--sjs-spacing-x1); + --lbr-toc-padding-bottom: var(--sjs-spacing-x1); + --lbr-ranking-gap-vertical: var(--sjs-spacing-x3); + --ctr-survey-checkboxes-show-more-button-margin-top: var(--sjs-spacing-x05); + --ctr-survey-checkboxes-show-more-button-margin-bottom: var(--sjs-spacing-x05); + --ctr-survey-checkboxes-show-more-button-margin-left: var(--sjs-spacing-x6); + --ctr-survey-checkboxes-info-panel-margin-top: var(--sjs-spacing-x2); + --ctr-survey-radio-button-group-show-more-button-margin-left: var(--sjs-spacing-x6); + --ctr-survey-radio-button-group-show-more-button-margin-top: var(--sjs-spacing-x05); + --ctr-survey-radio-button-group-show-more-button-margin-bottom: var(--sjs-spacing-x05); + --ctr-survey-radio-button-group-info-panel-margin-top: var(--sjs-spacing-x2); + --lbr-checkboxes-comment-box-margin-top: var(--sjs-spacing-x2); + --lbr-radio-buttons-comment-box-margin-top: var(--sjs-spacing-x2); + --lbr-checkboxes-info-panel-margin-left: var(--sjs-spacing-x5); + --lbr-checkboxes-info-panel-margin-right: var(--sjs-spacing-x5); + --lbr-radio-buttons-info-panel-margin-left: var(--sjs-spacing-x5); + --lbr-radio-buttons-info-panel-margin-right: var(--sjs-spacing-x5); + --lbr-drop-down-comment-box-margin-top: var(--sjs-spacing-x2); + --ctr-survey-drop-down-gap: var(--sjs-spacing-x2); + --lbr-rating-item-gap: var(--sjs-spacing-x1); + --ctr-survey-rating-actionbar-margin-top: var(--sjs-spacing-x05); + --ctr-survey-rating-actionbar-margin-bottom: var(--sjs-spacing-x05); + --lbr-rating-label-margin: var(--sjs-spacing-x1); + --lbr-matrix-margin-top-error: var(--sjs-spacing-x3); + --lbr-dynamic-panel-tabs-item-padding-top: var(--sjs-spacing-x2); + --lbr-dynamic-panel-tabs-item-padding-bottom: var(--sjs-spacing-x2); + --lbr-dynamic-panel-tabs-item-border-color-selected: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-item-border-width-bottom-selected: var(--sjs-stroke-x2); + --lbr-dynamic-panel-tabs-item-text-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-tabs-item-text-color-selected: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-tabs-button-padding-left: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-right: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-top: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-dynamic-panel-tabs-button-icon-width: var(--sjs-size-x3); + --lbr-dynamic-panel-tabs-button-icon-height: var(--sjs-size-x3); + --lbr-dynamic-panel-tabs-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-tabs-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-tabs-item-border-color-hovered: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-item-border-width-bottom-hovered: var(--sjs-stroke-x2); + --lbr-dynamic-panel-tabs-button-margin-top: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-background-color-hovered: var(--sjs-primary-background-10); + --lbr-dynamic-panel-tabs-button-icon-color-hovered: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-border-color: var(--sjs-border-10); + --lbr-dynamic-panel-tabs-border-width-bottom: var(--sjs-stroke-x1); + --lbr-dynamic-panel-tabs-padding-left: var(--sjs-spacing-x5); + --lbr-dynamic-panel-tabs-padding-right: var(--sjs-spacing-x5); + --lbr-dynamic-panel-tabs-gap: var(--sjs-spacing-x4); + --lbr-step-progress-bar-step-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-step-progress-bar-step-gap: var(--sjs-spacing-x2); + --lbr-step-progress-bar-step-title-margin-horizontal: var(--sjs-spacing-x2); + --lbr-step-progress-bar-step-title-margin-vertical: var(--sjs-spacing-x05); + --lbr-step-progress-bar-step-title-text-color: var(--sjs-layer-3-foreground-100); + --lbr-step-progress-bar-step-background-color: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-step-dot-margin-left: var(--sjs-spacing-x075); + --lbr-step-progress-bar-step-dot-background-color-unvisited: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-step-dot-border-color-selected: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-border-width-selected: var(--sjs-stroke-x4); + --lbr-step-progress-bar-step-dot-text-color-unvisited: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-step-dot-text-width: var(--sjs-spacing-x3); + --lbr-step-progress-bar-step-dot-text-height: var(--sjs-spacing-x3); + --lbr-step-progress-bar-step-dot-text-margin-bottom: var(--sjs-spacing-x025); + --lbr-step-progress-bar-connector-color: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-connector-color-visited: var(--sjs-primary-background-500); + --lbr-step-progress-bar-connector-height: var(--sjs-size-x025); + --lbr-step-progress-bar-step-dot-background-color-selected: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-border-width-hovered: var(--sjs-stroke-x6); + --lbr-step-progress-bar-step-dot-text-color-selected: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-background-color-hovered: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-text-color-hovered: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-background-color-visited: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-text-color-visited: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-margin-right: var(--sjs-spacing-x075); + --lbr-step-progress-bar-step-dot-width-with-number: var(--sjs-size-x3); + --lbr-step-progress-bar-step-dot-height-with-number: var(--sjs-size-x3); + --lbr-step-progress-bar-step-dot-width: var(--sjs-size-x1); + --lbr-step-progress-bar-step-dot-height: var(--sjs-size-x1); + --lbr-step-progress-bar-margin-left: var(--sjs-spacing-x5); + --lbr-step-progress-bar-margin-right: var(--sjs-spacing-x5); + --lbr-step-progress-bar-margin-top: var(--sjs-spacing-x4); + --lbr-step-progress-bar-pager-text-color: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-margin-bottom: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-position-bottom: var(--sjs-spacing-x6); + --lbr-step-progress-bar-pager-margin-vertical: var(--sjs-spacing-x1); + --lbr-step-progress-bar-step-title-margin-vertical-mobile: var(--sjs-spacing-x250); + --lbr-step-progress-bar-margin-bottom-with-pager: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-margin-top-fit-to-survey: var(--sjs-spacing-x7); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles: var(--sjs-spacing-x4); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles-fit-to-survey: var(--sjs-spacing-x12); + --lbr-step-progress-bar-margin-left-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-right-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-top-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-bottom-mobile: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-position-bottom-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-pager-margin-horizontal: var(--sjs-spacing-x075); + --ctr-survey-question-panel-toolbar-margin-left: var(--sjs-spacing-x1n); + --ctr-survey-question-panel-toolbar-margin-right: var(--sjs-spacing-x1n); + --ctr-survey-question-panel-toolbar-margin-top: var(--sjs-spacing-x2); + --lbr-question-panel-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-question-panel-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-question-panel-border-width-selected: var(--sjs-stroke-x2); + --lbr-question-panel-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-question-panel-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-question-panel-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-question-panel-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-question-panel-shadow-color: var(--lbr-shadow-small-color); + --ctr-survey-page-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-page-border-width-selected: var(--sjs-stroke-x2); + --lbr-page-padding-top: var(--sjs-spacing-x5); + --lbr-page-padding-bottom: var(--sjs-spacing-x12); + --ctr-survey-page-corner-radius: var(--sjs-corner-radius-x1); + --lbr-page-button-footer-margin-top: var(--sjs-spacing-x4); + --lbr-page-error-margin-top-below-content: var(--sjs-spacing-x2); + --lbr-page-error-margin-bottom-above-content: var(--sjs-spacing-x2); + --lbr-page-button-footer-gap: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-left: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-right: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-top: var(--sjs-spacing-x3); + --lbr-dynamic-panel-footer-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-question-panel-border-color-hovered: var(--sjs-secondary-background-25); + --ctr-survey-question-panel-border-width-hovered: var(--sjs-stroke-x2); + --ctr-survey-question-panel-border-color-nested: var(--sjs-border-25); + --ctr-survey-question-panel-border-width-nested: var(--sjs-stroke-x1); + --ctr-survey-question-panel-corner-radius-selection-panelless: var(--sjs-corner-radius-x075); + --lbr-panel-border-color-panelless: var(--sjs-border-25); + --lbr-panel-border-width-panelless: var(--sjs-stroke-x1); + --lbr-question-panel-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-survey-page-border-color-hovered: var(--sjs-secondary-background-25); + --ctr-survey-page-border-width-hovered: var(--sjs-stroke-x2); + --lbr-panel-border-color-nested: var(--sjs-border-10); + --lbr-panel-border-width-nested: var(--sjs-stroke-x1); + --lbr-panel-border-color-nested-panelless: var(--sjs-border-10); + --lbr-panel-border-width-nested-panelless: var(--sjs-stroke-x1); + --lbr-dynamic-panel-footer-border-color: var(--sjs-border-10); + --lbr-dynamic-panel-footer-border-width-top: var(--sjs-stroke-x1); + --lbr-dynamic-panel-progress-bar-background-color: var(--sjs-layer-1-background-500); + --lbr-progress-bar-section-title-color-selected: var(--sjs-layer-3-foreground-100); + --lbr-progress-bar-section-title-color-pressed: var(--sjs-layer-3-foreground-100); + --lbr-matrix-row-background-color-alternate: var(--sjs-layer-1-background-400); + --lbr-question-panel-header-title-color: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-header-description-color: var(--sjs-layer-1-foreground-50); + --lbr-question-panel-header-gap: var(--sjs-spacing-x05); + --lbr-question-panel-number-color: var(--sjs-layer-1-foreground-50); + --lbr-question-panel-number-width: var(--sjs-size-x5); + --lbr-question-panel-number-margin-left: var(--sjs-spacing-x1); + --lbr-question-panel-number-margin-right: var(--sjs-spacing-x1); + --lbr-question-panel-number-height: var(--sjs-size-x3); + --lbr-question-panel-number-margin-bottom: var(--sjs-spacing-x0375); + --lbr-question-panel-expand-button-icon-width: var(--sjs-size-x2); + --lbr-question-panel-expand-button-icon-height: var(--sjs-size-x2); + --lbr-question-panel-expand-button-padding-left: var(--sjs-spacing-x2); + --lbr-question-panel-expand-button-padding-right: var(--sjs-spacing-x1); + --lbr-question-panel-expand-button-padding-top: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-padding-bottom: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-panel-add-button-margin-top: var(--sjs-spacing-x1); + --lbr-panel-content-margin-left: var(--sjs-spacing-x5); + --lbr-panel-content-margin-right: var(--sjs-spacing-x5); + --lbr-panel-content-margin-top: var(--sjs-spacing-x5); + --lbr-panel-content-margin-bottom: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-title-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-item-header-title-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-item-header-padding-bottom: var(--sjs-spacing-x4); + --lbr-dynamic-panel-remove-button-margin: var(--sjs-spacing-x2); + --lbr-page-header-title-color: var(--sjs-layer-3-foreground-100); + --lbr-page-header-description-color: var(--sjs-layer-3-foreground-50); + --lbr-page-header-title-color-not-completed-rule: var(--sjs-secondary-background-500); + --lbr-page-header-title-gap: var(--sjs-spacing-x2); + --lbr-page-header-gap: var(--sjs-spacing-x05); + --lbr-page-header-padding-vertical-with-button: var(--sjs-spacing-x05); + --lbr-toc-menu-button-background-color-page: var(--lbr-background-color); + --lbr-background-color: var(--sjs-layer-3-background-500); + --lbr-popup-menu-corner-radius: var(--sjs-corner-radius-x05); + --lbr-popup-menu-padding-left: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-right: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-top: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-bottom: var(--sjs-spacing-x05); + --lbr-popup-menu-background-color: var(--sjs-layer-1-background-500); + --lbr-popup-menu-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-popup-menu-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-popup-menu-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-popup-menu-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-popup-menu-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-popup-menu-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-popup-menu-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-popup-menu-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-popup-menu-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-popup-menu-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-popup-menu-screen-color: var(--sjs-special-haze); + --lbr-popup-menu-margin-left: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-right: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-top: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-bottom: var(--sjs-spacing-x4); + --lbr-popup-menu-width-tablet: var(--sjs-size-x40); + --lbr-pager-text-color: var(--sjs-layer-1-foreground-50); + --lbr-pager-text-margin-top: var(--sjs-spacing-x05); + --lbr-pager-text-margin-bottom: var(--sjs-spacing-x05); + --lbr-pager-gap: var(--sjs-spacing-x2); + --lbr-error-panel-background-color: var(--sjs-semantic-red-background-10); + --lbr-error-panel-text-color: var(--sjs-semantic-red-background-500); + --lbr-error-panel-corner-radius: var(--sjs-corner-radius-x05); + --lbr-error-panel-padding-left-small: var(--sjs-spacing-x150); + --lbr-error-panel-padding-right-small: var(--sjs-spacing-x150); + --lbr-error-panel-padding-top-small: var(--sjs-spacing-x1); + --lbr-error-panel-padding-bottom-small: var(--sjs-spacing-x1); + --lbr-error-panel-padding-left-medium: var(--sjs-spacing-x3); + --lbr-error-panel-padding-right-medium: var(--sjs-spacing-x3); + --lbr-error-panel-padding-top-medium: var(--sjs-spacing-x2); + --lbr-error-panel-padding-bottom-medium: var(--sjs-spacing-x2); + --lbr-error-panel-padding-left-large: var(--sjs-spacing-x5); + --lbr-error-panel-padding-right-large: var(--sjs-spacing-x5); + --lbr-error-panel-padding-top-large: var(--sjs-spacing-x3); + --lbr-error-panel-padding-bottom-large: var(--sjs-spacing-x3); + --lbr-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --lbr-placeholder-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-placeholder-padding-left: var(--sjs-spacing-x8); + --lbr-placeholder-padding-right: var(--sjs-spacing-x8); + --lbr-placeholder-padding-top: var(--sjs-spacing-x2); + --lbr-placeholder-padding-bottom: var(--sjs-spacing-x2); + --lbr-placeholder-gap: var(--sjs-spacing-x05); + --lbr-placeholder-padding-left-small: var(--sjs-spacing-x3); + --lbr-placeholder-padding-right-small: var(--sjs-spacing-x3); + --lbr-placeholder-padding-bottom-with-button-small: var(--sjs-spacing-x2); + --lbr-logo-color-primary: var(--sjs-primary-background-500); + --lbr-logo-color-secondary: var(--sjs-secondary-background-500); + --lbr-scrollbar-thumb-color: var(--sjs-border-25); + --lbr-scrollbar-thumb-margin: var(--sjs-spacing-x05); + --lbr-scrollbar-width: var(--sjs-size-x150); + --lbr-scrollbar-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-complete-page-gap: var(--sjs-spacing-x6); + --lbr-complete-page-padding-left: var(--sjs-spacing-x8); + --lbr-complete-page-padding-right: var(--sjs-spacing-x8); + --lbr-complete-page-padding-top: var(--sjs-spacing-x12); + --lbr-complete-page-padding-bottom: var(--sjs-spacing-x16); + --lbr-complete-page-text-title-color: var(--sjs-layer-3-foreground-100); + --lbr-complete-page-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-complete-page-text-gap: var(--sjs-spacing-x2); + --lbr-complete-page-gap-no-description: var(--sjs-spacing-x3); + --lbr-placeholder-text-color-active: var(--sjs-layer-1-foreground-100); + --lbr-signature-background-error: var(--sjs-semantic-red-background-10); + --lbr-signature-signature-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-signature-signature-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-signature-signature-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-footer-logo-height: var(--sjs-spacing-x8); + --lbr-footer-text-title-color: var(--sjs-layer-1-foreground-100); + --lbr-footer-text-description-color: var(--sjs-layer-1-foreground-50); + --lbr-footer-text-gap: var(--sjs-spacing-x05); + --lbr-footer-gap: var(--sjs-spacing-x1); + --lbr-footer-padding-left: var(--sjs-spacing-x16); + --lbr-footer-padding-right: var(--sjs-spacing-x16); + --lbr-footer-padding-top: var(--sjs-spacing-x4); + --lbr-footer-padding-bottom: var(--sjs-spacing-x4); + --lbr-footer-background-color: var(--sjs-layer-1-background-500); + --lbr-footer-border-width-bottom: var(--sjs-stroke-x1); + --lbr-footer-border-color: var(--sjs-border-25); + --lbr-footer-padding-left-simple: var(--sjs-spacing-x2); + --lbr-footer-padding-right-simple: var(--sjs-spacing-x2); + --lbr-footer-padding-top-simple: var(--sjs-spacing-x1); + --lbr-footer-padding-bottom-simple: var(--sjs-spacing-x1); + --lbr-footer-logo-color-simple: var(--sjs-layer-3-foreground-50); + --lbr-top-banner-background-color: var(--sjs-secondary-background-500); + --lbr-top-banner-text-color: var(--sjs-secondary-foreground-100); + --lbr-top-banner-padding-left: var(--sjs-spacing-x16); + --lbr-top-banner-padding-right: var(--sjs-spacing-x16); + --lbr-top-banner-padding-top: var(--sjs-spacing-x150); + --lbr-top-banner-padding-bottom: var(--sjs-spacing-x2); + --lbr-top-banner-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-top-banner-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-top-banner-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-top-banner-padding-bottom-mobile: var(--sjs-spacing-x150); + --lbr-dynamic-panel-item-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-nested-matrix-panel-header-border-color-nested: var(--sjs-border-10); + --lbr-nested-matrix-panel-header-border-width-bottom-nested: var(--sjs-stroke-x1); + --ctr-survey-page-header-title-color-placeholder: var(--sjs-layer-3-foreground-50); + --lbr-pager-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-panel-header-border-color: var(--sjs-border-10); + --lbr-panel-header-border-width-bottom: var(--sjs-stroke-x1); + --lbr-panel-content-margin-left-mobile: var(--sjs-spacing-x3); + --lbr-panel-content-margin-right-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-left: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-right: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-top: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-bottom: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-top-header-below: var(--sjs-spacing-x150); + --lbr-question-panel-header-description-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-header-padding-bottom-action-button: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-top-header-below-mobile: var(--sjs-spacing-x075); + --lbr-question-panel-expand-button-padding-left-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-expand-button-padding-right-mobile: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-icon-width-mobile: var(--sjs-size-x150); + --lbr-question-panel-expand-button-icon-height-mobile: var(--sjs-size-x150); + --lbr-question-panel-expand-button-padding-top-mobile: var(--sjs-spacing-x075); + --lbr-question-panel-expand-button-padding-bottom-mobile: var(--sjs-spacing-x075); + --ctr-survey-question-panel-toolbar-margin-top-mobile: var(--sjs-spacing-x1); + --lbr-nested-matrix-panel-header-padding-bottom-nested: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-text-color: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-item-header-padding-left: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-padding-right: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-item-header-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-left: var(--sjs-spacing-x5); + --lbr-panel-header-padding-right: var(--sjs-spacing-x5); + --lbr-panel-header-padding-top: var(--sjs-spacing-x4); + --lbr-panel-header-padding-bottom: var(--sjs-spacing-x4); + --lbr-panel-header-title-color: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-expand-button-icon-color-focused: var(--sjs-layer-1-background-500); + --lbr-question-panel-expand-button-icon-color-focused-stroke: var(--sjs-primary-background-500); + --lbr-dynamic-panel-item-header-padding-top: var(--sjs-spacing-x4); + --lbr-dynamic-panel-item-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-panel-header-padding-top-nested: var(--sjs-spacing-x2); + --lbr-panel-header-padding-bottom-nested: var(--sjs-spacing-x2); + --lbr-panel-header-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-panel-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-panel-content-margin-top-mobile: var(--sjs-spacing-x3); + --lbr-panel-content-margin-bottom-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-footer-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-dynamic-panel-footer-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-dynamic-panel-remove-button-margin-vertical-mobile: var(--sjs-spacing-x1); + --lbr-page-button-footer-margin-top-panelless: var(--sjs-spacing-x7); + --lbr-page-padding-left-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-right-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-bottom-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-top-responsive: var(--sjs-spacing-x5); + --lbr-page-width: var(--sjs-size-x80); + --lbr-page-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-page-error-margin-top-below-content-mobile: var(--sjs-spacing-x2); + --lbr-page-error-margin-bottom-above-content-mobile: var(--sjs-spacing-x2); + --ctr-survey-page-button-footer-margin-top: var(--sjs-spacing-x2); + --ctr-survey-page-padding-left: var(--sjs-spacing-x3); + --ctr-survey-page-padding-right: var(--sjs-spacing-x3); + --ctr-survey-page-padding-top: var(--sjs-spacing-x5); + --ctr-survey-page-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-page-margin-left: var(--sjs-spacing-x2); + --ctr-survey-page-margin-right: var(--sjs-spacing-x2); + --ctr-survey-page-margin-top: var(--sjs-spacing-x2); + --ctr-survey-page-width: var(--sjs-size-x90); + --ctr-survey-page-padding-top-selected: var(--sjs-spacing-x1); + --ctr-survey-page-background-color-hovered: var(--sjs-secondary-background-10); + --ctr-survey-page-margin-bottom-new-page: var(--sjs-spacing-x9); + --ctr-survey-question-panel-margin-left-panelless: var(--sjs-spacing-x2n); + --ctr-survey-question-panel-margin-right-panelless: var(--sjs-spacing-x2n); + --ctr-survey-question-panel-margin-top-panelless: var(--sjs-spacing-x2n); + --ctr-survey-page-toolbar-margin-left: var(--sjs-spacing-x1n); + --ctr-survey-page-toolbar-margin-right: var(--sjs-spacing-x1n); + --ctr-survey-page-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-content-margin-bottom-placeholder: var(--sjs-spacing-x10); + --lbr-question-panel-padding-left: var(--sjs-spacing-x5); + --lbr-question-panel-padding-right: var(--sjs-spacing-x5); + --lbr-question-panel-padding-top: var(--sjs-spacing-x4); + --lbr-question-panel-padding-bottom: var(--sjs-spacing-x5); + --lbr-question-panel-header-padding-right-header-left: var(--sjs-spacing-x3); + --lbr-question-panel-header-padding-bottom-header-left: var(--sjs-spacing-x150); + --lbr-question-panel-header-padding-top-header-left: var(--sjs-spacing-x150); + --lbr-question-panel-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-top-no-header: var(--sjs-spacing-x5); + --lbr-question-panel-padding-bottom-collapsed: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-top-action-button: var(--sjs-spacing-x1n); + --lbr-question-panel-header-padding-bottom-action-button-collapsed: var(--sjs-spacing-x1n); + --lbr-question-panel-error-margin-vertical: var(--sjs-spacing-x5); + --lbr-question-panel-error-margin-vertical-near-header: var(--sjs-spacing-x4); + --lbr-question-panel-error-margin-horizontal: var(--sjs-spacing-x5n); + --lbr-question-panel-error-margin-vertical-panelless: var(--sjs-spacing-x1); + --lbr-question-panel-error-margin-vertical-near-header-panelless: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-header-below: var(--sjs-spacing-x4); + --lbr-question-panel-error-margin-horizontal-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-error-margin-vertical-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-error-margin-vertical-near-header-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-top-no-header-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-bottom-header-below-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-collapsed-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-left-expandable: var(--sjs-spacing-x5n); + --lbr-question-panel-header-padding-left-numbering: var(--sjs-spacing-x5n); + --lbr-question-panel-header-padding-right-action-button: var(--sjs-spacing-x3n); + --lbr-question-panel-padding-top-collapsed: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-left-expandable-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-header-padding-left-numbering-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-padding-top-collapsed-mobile: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-bottom-selected: var(--sjs-spacing-x2); + --ctr-survey-question-panel-drag-area-margin-left: var(--sjs-spacing-x5n); + --ctr-survey-question-panel-drag-area-margin-right: var(--sjs-spacing-x5n); + --ctr-survey-question-panel-padding-bottom-minimized: var(--sjs-spacing-x4); + --ctr-survey-question-panel-drag-area-margin-bottom-no-header: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-left-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-right-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-top-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-panelless-no-editing: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-selected-mobile: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-question-panel-drag-area-margin-right-mobile: var(--sjs-spacing-x3n); + --ctr-survey-question-panel-padding-bottom: var(--sjs-spacing-x8); + --lbr-page-header-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-question-panel-margin-bottom-panelless: var(--sjs-spacing-x2n); + --ctr-survey-page-button-footer-margin-top-panelless: var(--sjs-spacing-x7); + --lbr-page-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-multiple-text-gap: var(--sjs-spacing-x2); + --lbr-labeled-editor-error-margin-top: var(--sjs-spacing-x1); + --ctr-string-table-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-string-table-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-string-table-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-string-table-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-string-table-shadow-color: var(--ctr-shadow-small-color); + --ctr-survey-question-panel-drag-area-expand-button-margin: var(--sjs-spacing-x05); + --lbr-editor-min-height: var(--sjs-size-x6); + --lbr-matrix-row-padding-left-expandable-header-row: var(--sjs-spacing-x6); + --lbr-matrix-row-padding-right-delete-button-colunm-title-row: var(--sjs-spacing-x7); + --lbr-matrix-margin-left: var(--sjs-spacing-x2n); + --lbr-matrix-gap: var(--sjs-spacing-x2); + --lbr-matrix-details-padding-left-no-row-titles: var(--sjs-spacing-x6); + --lbr-matrix-add-button-margin-left: var(--sjs-spacing-x3n); + --lbr-matrix-add-button-margin-left-expandable: var(--sjs-spacing-x3); + --lbr-matrix-margin-top-colunm-titles: var(--sjs-spacing-x150n); + --lbr-matrix-margin-bottom-add-button: var(--sjs-spacing-x150n); + --lbr-matrix-row-padding-top-single-select: var(--sjs-spacing-x1); + --lbr-matrix-row-padding-bottom-single-select: var(--sjs-spacing-x1); + --lbr-matrix-row-margin-bottom-column-titles-alt-rows: var(--sjs-spacing-x2); + --ctr-survey-ranking-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-ranking-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-radio-button-group-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-radio-button-group-item-margin-left-hovered-mobile: var(--sjs-spacing-x3n); + --lbr-drop-down-buttons-gap: var(--sjs-spacing-x05); + --lbr-drop-down-padding-left: var(--sjs-spacing-x2); + --lbr-drop-down-padding-right: var(--sjs-spacing-x05); + --lbr-drop-down-padding-top: var(--sjs-spacing-x05); + --lbr-drop-down-padding-bottom: var(--sjs-spacing-x05); + --lbr-tag-box-gap: var(--sjs-spacing-x05); + --lbr-tag-box-padding-left: var(--sjs-spacing-x05); + --lbr-tag-box-search-text-margin-left: var(--sjs-spacing-x2); + --lbr-file-upload-height: var(--sjs-size-x40); + --lbr-ranking-gap-horizontal: var(--sjs-spacing-x5); + --lbr-image-height: var(--sjs-size-x40); + --ctr-survey-image-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-image-picker-item-height: var(--sjs-size-x20); + --lbr-image-picker-item-select-button-margin-left: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-right: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-top: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-signature-height: var(--sjs-size-x40); + --lbr-signature-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-ranking-drop-spot-height: var(--sjs-spacing-x5); + --lbr-ranking-drop-spot-width: var(--sjs-size-x32); + --lbr-ranking-drop-spot-corner-radius: var(--sjs-corner-radius-round); + --ctr-toolbox-group-header-min-height: var(--sjs-spacing-x5); + --lbr-image-picker-gap: var(--sjs-spacing-x2); + --ctr-editor-layout-min-width: var(--sjs-size-x32); + --lbr-image-picker-item-min-width: var(--sjs-size-x32); + --ctr-data-table-actionbar-button-width: var(--sjs-spacing-x5); + --ctr-actionbar-button-icon-color-colorful: var(--sjs-primary-background-500); + --lbr-toc-menu-button-margin-page: var(--sjs-spacing-x2); + --lbr-toc-menu-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-item-actionbar-padding-left-inactive-mobile: var(--sjs-spacing-x5); + --ctr-survey-radio-button-group-show-more-button-margin-left-mobile: var(--sjs-spacing-x8); + --ctr-survey-checkboxes-show-more-button-margin-left-mobile: var(--sjs-spacing-x8); + --lbr-rating-item-width-small: var(--sjs-spacing-x3); + --lbr-rating-item-height-small: var(--sjs-spacing-x3); + --lbr-contextual-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --lbr-contextual-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-contextual-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-list-search-padding-left: var(--sjs-spacing-x2); + --ctr-list-search-padding-right: var(--sjs-spacing-x2); + --ctr-list-search-padding-top: var(--sjs-spacing-x250); + --ctr-list-search-padding-bottom: var(--sjs-spacing-x250); + --ctr-list-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-list-search-border-color: var(--sjs-border-25); + --ctr-list-search-gap: var(--sjs-spacing-x2); + --ctr-list-search-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-list-search-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-search-icon-width: var(--sjs-size-x3); + --ctr-list-search-icon-height: var(--sjs-size-x3); + --ctr-property-grid-search-icon-width: var(--sjs-size-x3); + --ctr-property-grid-search-icon-height: var(--sjs-size-x3); + --ctr-toolbox-search-icon-width: var(--sjs-size-x3); + --ctr-toolbox-search-icon-height: var(--sjs-size-x3); + --ctr-button-padding-horizontal-contextual-button: var(--sjs-spacing-x10); + --ctr-survey-header-width: var(--sjs-size-x86); + --ctr-surface-gap: var(--sjs-spacing-x5); + --ctr-surface-padding-top: var(--sjs-spacing-x5); + --ctr-expression-item-padding-left-button: var(--sjs-spacing-x4); + --ctr-expression-item-padding-right-button: var(--sjs-spacing-x4); + --ctr-preview-device-background-color: var(--sjs-layer-1-background-500); + --ctr-preview-device-border-color: var(--sjs-layer-3-background-500); + --ctr-preview-device-border-width: var(--sjs-stroke-x4); + --ctr-preview-device-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-preview-device-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-preview-device-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-preview-device-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-preview-device-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-preview-device-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-preview-device-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-preview-device-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-preview-device-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-preview-device-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-preview-device-padding-left: var(--sjs-spacing-x2); + --ctr-preview-device-padding-right: var(--sjs-spacing-x2); + --ctr-preview-device-padding-top: var(--sjs-spacing-x8); + --ctr-preview-device-padding-bottom: var(--sjs-spacing-x8); + --ctr-preview-device-frame-background-color: var(--lbr-background-color); + --ctr-preview-device-corner-radius: var(--sjs-corner-radius-x4); + --ctr-surface-padding-left: var(--sjs-spacing-x5); + --ctr-surface-padding-right: var(--sjs-spacing-x5); + --ctr-surface-padding-bottom: var(--sjs-spacing-x5); + --ctr-preview-device-frame-border-width: var(--sjs-stroke-x2); + --ctr-preview-device-frame-border-color: var(--sjs-border-25); + --ctr-surface-divider-color: var(--sjs-border-25); + --ctr-surface-divider-width: var(--sjs-stroke-x1); + --ctr-toolbox-button-padding-left: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-right: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-button-margin-horizontal: var(--sjs-spacing-x05); + --ctr-toolbox-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-toolbox-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-border-width-right-floating: var(--sjs-stroke-x1); + --ctr-surface-text-color: var(--sjs-layer-3-foreground-100); + --ctr-surface-text-color-link: var(--sjs-primary-background-400); + --ctr-string-table-background-color: var(--sjs-layer-3-background-500); + --lbr-header-gap-mobile: var(--sjs-spacing-x2); + --lbr-toc-menu-button-margin-right-header: var(--sjs-spacing-x1n); + --lbr-complete-page-text-max-width: var(--sjs-size-x90); + --ctr-toolbox-item-padding-left-submenu: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-top-submenu: var(--sjs-spacing-x150); + --ctr-toolbox-item-padding-bottom-submenu: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-gap: var(--sjs-spacing-x05); + --ctr-data-table-row-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-data-table-row-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-data-table-row-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-data-table-row-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-data-table-row-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-data-table-row-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-data-table-row-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-data-table-row-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-data-table-row-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-data-table-row-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-code-viewer-code-error-row-fix-button-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-code-viewer-code-error-row-fix-button-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-code-viewer-code-error-row-fix-button-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-code-viewer-code-error-row-fix-button-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-code-viewer-code-error-row-fix-button-shadow-color: var(--ctr-shadow-small-color); + --ctr-toolbox-item-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-item-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-item-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-item-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-item-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-item-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-toolbox-item-shadow-hovered-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-hovered-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-hovered-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-hovered-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-hovered-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-item-shadow-pressed-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-pressed-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-pressed-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-pressed-spread: var(--ctr-shadow-small-spread); + --ctr-toolbox-item-shadow-pressed-color: var(--ctr-shadow-small-color); + --ctr-toolbox-item-shadow-hovered-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-hovered-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-hovered-2-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-hovered-2-spread: var(--ctr-shadow-small-spread); + --ctr-toolbox-item-shadow-hovered-2-color: var(--ctr-shadow-small-color); + --ctr-page-navigator-item-shadow-hovered-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-page-navigator-item-shadow-hovered-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-page-navigator-item-shadow-hovered-1-blur: var(--ctr-shadow-medium-blur); + --ctr-page-navigator-item-shadow-hovered-1-spread: var(--ctr-shadow-medium-spread); + --ctr-page-navigator-item-shadow-hovered-1-color: var(--ctr-shadow-medium-color); + --ctr-page-navigator-item-shadow-hovered-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-page-navigator-item-shadow-hovered-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-page-navigator-item-shadow-hovered-2-blur: var(--ctr-shadow-small-blur); + --ctr-page-navigator-item-shadow-hovered-2-spread: var(--ctr-shadow-small-spread); + --ctr-page-navigator-item-shadow-hovered-2-color: var(--ctr-shadow-small-color); + --ctr-button-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-button-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-button-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-button-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-button-shadow-color: var(--ctr-shadow-small-color); + --ctr-popup-menu-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-popup-menu-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-popup-menu-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-popup-menu-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-popup-menu-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-popup-menu-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-popup-menu-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-popup-menu-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-popup-menu-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-popup-menu-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-text-decor-shadow-editing-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-text-decor-shadow-editing-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-text-decor-shadow-editing-blur: var(--ctr-shadow-medium-blur); + --ctr-text-decor-shadow-editing-spread: var(--ctr-shadow-medium-spread); + --ctr-text-decor-shadow-editing-color: var(--ctr-shadow-medium-color); + --ctr-search-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-search-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-search-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-search-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-search-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-search-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-search-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-search-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-search-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-search-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-popup-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-popup-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-popup-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-popup-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-popup-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-popup-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-popup-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-popup-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-popup-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-popup-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-popup-shadow-3-offset-x: var(--ctr-shadow-x-large-offset-x); + --ctr-popup-shadow-3-offset-y: var(--ctr-shadow-x-large-offset-y); + --ctr-popup-shadow-3-blur: var(--ctr-shadow-x-large-blur); + --ctr-popup-shadow-3-spread: var(--ctr-shadow-x-large-spread); + --ctr-popup-shadow-3-color: var(--ctr-shadow-x-large-color); + --ctr-notification-shadow-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-notification-shadow-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-notification-shadow-blur: var(--ctr-shadow-medium-blur); + --ctr-notification-shadow-spread: var(--ctr-shadow-medium-spread); + --ctr-notification-shadow-color: var(--ctr-shadow-medium-color); + --lbr-shadow-inner-color: var(--sjs-special-shadow); + --ctr-code-viewer-text-margin-left-results-table: var(--sjs-spacing-x3); + --ctr-code-viewer-text-margin-right-results-table: var(--sjs-spacing-x3); + --ctr-code-viewer-text-margin-top-results-table: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-bottom-results-table: var(--sjs-spacing-x2); + --lbr-matrix-margin-right-delete-button: var(--sjs-spacing-x3n); + --ctr-survey-ranking-info-panel-margin-top-select-to-rank-horizontal: var(--sjs-spacing-x2); + --ctr-checkbox-list-margin-top: var(--sjs-spacing-x2); + --ctr-editor-color-swatch-background-color-secondary: var(--sjs-secondary-background-500); + --ctr-editor-color-swatch-background-color-red: var(--sjs-semantic-red-background-500); + --ctr-editor-color-swatch-background-color-blue: var(--sjs-semantic-blue-background-500); + --ctr-editor-color-swatch-background-color-light: var(--sjs-layer-3-background-500); + --ctr-editor-color-swatch-background-color-dark: var(--sjs-layer-1-foreground-100); + --ctr-editor-color-swatch-background-color-gray: var(--sjs-layer-1-foreground-50); + --ctr-list-item-color-swatch-color-secondary: var(--sjs-secondary-background-500); + --ctr-list-item-color-swatch-color-red: var(--sjs-semantic-red-background-500); + --ctr-list-item-color-swatch-color-blue: var(--sjs-semantic-blue-background-500); + --ctr-list-item-color-swatch-color-light: var(--sjs-layer-3-background-500); + --ctr-list-item-color-swatch-color-dark: var(--sjs-layer-1-foreground-100); + --ctr-list-item-color-swatch-color-gray: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-background-color-submenu: var(--sjs-layer-2-background-500); + --ctr-toolbox-item-text-color-submenu: var(--sjs-layer-2-foreground-100); + --lbr-file-upload-item-remove-button-margin-right-file: var(--sjs-spacing-x05); + --lbr-file-upload-item-remove-button-margin-right-thumbnail: var(--sjs-spacing-x2n); + --lbr-file-upload-item-remove-button-margin-top-thumbnail: var(--sjs-spacing-x2n); + --lbr-contextual-button-border-color-hovered-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-contextual-button-border-color-hovered-negative: var(--sjs-semantic-red-background-500); + --lbr-step-progress-bar-padding-left-fit-to-survey: var(--sjs-spacing-x05n); + --lbr-step-progress-bar-padding-right-fit-to-survey: var(--sjs-spacing-x05n); + --lbr-step-progress-bar-padding-left-fit-to-survey-with-number: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-padding-right-fit-to-survey-with-number: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-width: var(--sjs-size-x80); + --ctr-toolbox-min-width: var(--sjs-size-x32); + --ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x8); + --ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x8); + --ctr-popup-menu-margin-left-tablet: var(--sjs-spacing-x3); + --ctr-popup-menu-margin-right-tablet: var(--sjs-spacing-x3); + --ctr-popup-menu-max-width-tablet: var(--sjs-size-x40); + --ctr-font-default-line-height-all-caps: var(--sjs-line-height-x2); + --ctr-page-navigator-margin-top: var(--sjs-spacing-x12); + --lbr-progress-bar-height-large: var(--sjs-size-x05); + --lbr-progress-bar-margin-vertical: var(--sjs-spacing-x6n); + --lbr-progress-bar-margin-vertical-with-titles: var(--sjs-spacing-x3n); + --lbr-progress-bar-pager-label-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-progress-bar-pager-label-padding-left: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-label-padding-right: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-label-padding-top: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-label-padding-bottom: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-label-corner-radius: var(--sjs-corner-radius-x05); + --lbr-progress-bar-pager-label-text-color-floating: var(--sjs-layer-1-foreground-100); + --lbr-progress-bar-pager-label-shadow-1-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-progress-bar-pager-label-shadow-1-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-progress-bar-pager-label-shadow-1-blur: var(--lbr-shadow-small-blur); + --lbr-progress-bar-pager-label-shadow-1-spread: var(--lbr-shadow-small-spread); + --lbr-progress-bar-pager-label-shadow-1-color: var(--lbr-shadow-small-color); + --lbr-progress-bar-pager-label-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-progress-bar-pager-label-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-progress-bar-pager-label-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-progress-bar-pager-label-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-progress-bar-pager-label-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-step-progress-bar-background-color-fixed: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-shadow-fixed-1-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-step-progress-bar-shadow-fixed-1-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-step-progress-bar-shadow-fixed-1-blur: var(--lbr-shadow-small-blur); + --lbr-step-progress-bar-shadow-fixed-1-spread: var(--lbr-shadow-small-spread); + --lbr-step-progress-bar-shadow-fixed-1-color: var(--lbr-shadow-small-color); + --lbr-step-progress-bar-shadow-fixed-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-step-progress-bar-shadow-fixed-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-step-progress-bar-shadow-fixed-2-blur: var(--lbr-shadow-medium-blur); + --lbr-step-progress-bar-shadow-fixed-2-spread: var(--lbr-shadow-medium-spread); + --lbr-step-progress-bar-shadow-fixed-2-color: var(--lbr-shadow-medium-color); + --lbr-step-progress-bar-margin-top-fixed: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-top-no-titles-fixed: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-no-titles-fixed: var(--sjs-spacing-x1); + --lbr-step-progress-bar-margin-bottom-with-pager-fixed: var(--sjs-spacing-x150); + --lbr-step-progress-bar-margin-top-position-bottom-mobile: var(--sjs-spacing-x2); + --ctr-page-banner-background-color: var(--sjs-secondary-background-500); + --ctr-page-banner-text-color: var(--sjs-secondary-foreground-100); + --ctr-page-banner-padding-left: var(--sjs-spacing-x8); + --ctr-page-banner-padding-right: var(--sjs-spacing-x8); + --ctr-page-banner-padding-top: var(--sjs-spacing-x150); + --ctr-page-banner-padding-bottom: var(--sjs-spacing-x2); + --ctr-page-banner-padding-left-mobile: var(--sjs-spacing-x3); + --ctr-page-banner-padding-right-mobile: var(--sjs-spacing-x3); + --ctr-page-banner-padding-top-mobile: var(--sjs-spacing-x1); + --ctr-page-banner-padding-bottom-mobile: var(--sjs-spacing-x150); + --ctr-survey-panel-border-color-container: var(--sjs-border-25); + --ctr-survey-panel-border-width-container: var(--sjs-stroke-x1); + --ctr-survey-question-panel-padding-bottom-selected-panelless: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-bottom-panelless: var(--sjs-spacing-x6); + --ctr-surface-background-color-panelless: var(--sjs-layer-1-background-500); + --ctr-button-background-color-panelless: var(--sjs-layer-2-background-500); + --ctr-button-background-color-panelless-hovered: var(--sjs-layer-2-background-400); + --ctr-button-text-color-panelless-disabled: var(--sjs-layer-2-foreground-100); + --ctr-button-contextual-button-icon-color-panelless: var(--sjs-layer-2-foreground-50); + --ctr-toolbox-group-padding-left-compact: var(--sjs-spacing-x150); + --ctr-toolbox-group-padding-right-compact: var(--sjs-spacing-x150); + --ctr-radio-button-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-checkbox-button-check-mark-width: var(--sjs-size-x2); + --ctr-checkbox-button-check-mark-height: var(--sjs-size-x2); + --lbr-drop-down-content-margin-top: var(--sjs-spacing-x1); + --lbr-drop-down-content-margin-bottom: var(--sjs-spacing-x1); + --ctr-property-grid-width: var(--sjs-size-x60); + --ctr-survey-panel-drag-area-margin-bottom-panelless-selected: var(--sjs-spacing-x2); + --ctr-survey-panel-drag-area-margin-bottom-panelless-no-header-selected: var(--sjs-spacing-x3); + --ctr-survey-question-panel-floating-toolbar-margin: var(--sjs-spacing-x150); + --ctr-survey-question-panel-floating-toolbar-padding-left: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-padding-right: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-gap-items: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-question-panel-floating-toolbar-border-color: var(--sjs-border-10); + --ctr-survey-question-panel-floating-toolbar-border-width: var(--sjs-stroke-x1); + --ctr-survey-question-panel-floating-toolbar-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-question-panel-floating-toolbar-gap-groups: var(--sjs-spacing-x1); + --lbr-page-loading-background-color: var(--sjs-layer-3-background-500); + --lbr-page-loading-padding-bottom: var(--sjs-spacing-x8); + --lbr-page-loading-loading-icon-width: var(--sjs-size-x12); + --lbr-page-loading-loading-icon-height: var(--sjs-size-x12); + --lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-page-loading-loading-icon-circle-color-spin: var(--sjs-primary-background-500); + --lbr-page-loading-title-color: var(--sjs-layer-3-foreground-100); + --lbr-page-loading-padding-top: var(--sjs-spacing-x3); + --lbr-page-loading-padding-left: var(--sjs-spacing-x3); + --lbr-page-loading-padding-right: var(--sjs-spacing-x3); + --lbr-page-loading-message-color: var(--sjs-layer-3-foreground-50); + --lbr-ghost-button-padding-left: var(--sjs-spacing-x2); + --lbr-ghost-button-padding-right: var(--sjs-spacing-x2); + --lbr-ghost-button-padding-top: var(--sjs-spacing-x1); + --lbr-ghost-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-ghost-button-border-width: var(--sjs-stroke-x2); + --lbr-ghost-button-border-color: var(--sjs-layer-3-foreground-100); + --lbr-ghost-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-ghost-button-text-color: var(--sjs-layer-3-foreground-100); + --lbr-page-loading-buttons-margin-top: var(--sjs-spacing-x3); + --lbr-ghost-button-border-color-hovered: var(--sjs-primary-background-500); + --lbr-ghost-button-text-color-hovered: var(--sjs-primary-background-400); + --lbr-ghost-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-page-loading-buttons-gap: var(--sjs-spacing-x1); + --lbr-page-loading-error-icon-color-error: var(--sjs-semantic-red-background-500); + --lbr-page-loading-error-icon-width-error: var(--sjs-size-x8); + --lbr-page-loading-error-icon-height-error: var(--sjs-size-x8); + --ctr-toolbox-item-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-font-large-size: var(--sjs-font-size-x4); + --lbr-font-large-line-height: var(--sjs-line-height-x5); + --lbr-font-medium-size: var(--sjs-font-size-x3); + --lbr-font-medium-line-height: var(--sjs-line-height-x4); + --lbr-font-default-size: var(--sjs-font-size-x2); + --lbr-font-default-line-height: var(--sjs-line-height-x3); + --lbr-font-default-line-height-all-caps: var(--sjs-line-height-x2); + --lbr-font-small-size: var(--sjs-font-size-x150); + --lbr-font-small-line-height: var(--sjs-line-height-x2); + --lbr-font-code-size: var(--sjs-font-size-x2); + --lbr-font-code-line-height: var(--sjs-line-height-x3); + --ctr-list-item-padding-right-with-label-icon: var(--sjs-spacing-x150); + --ctr-survey-question-panel-padding-bottom-minimized-mobile: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-minimized-selected-mobile: var(--sjs-spacing-x3); + --ctr-survey-panel-background-color-overing: var(--sjs-primary-background-10); + --ctr-survey-panel-border-color-overing: var(--sjs-primary-background-500); + --ctr-survey-panel-border-width-overing: var(--sjs-stroke-x2); + --ctr-survey-page-background-color-overing: var(--sjs-primary-background-10); + --ctr-survey-page-border-color-overing: var(--sjs-primary-background-500); + --ctr-survey-page-border-width-overing: var(--sjs-stroke-x2); + --ctr-toolbox-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-padding-left-no-text: var(--sjs-spacing-x150); + --ctr-toolbox-item-background-color-pressed: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-shadow-subitem-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-subitem-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-subitem-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-subitem-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-subitem-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-item-shadow-subitem-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-subitem-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-subitem-2-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-subitem-2-spread: var(--ctr-shadow-small-spread); + --ctr-toolbox-item-shadow-subitem-2-color: var(--ctr-shadow-small-color); + --ctr-toolbox-submenu-group-margin-bottom: var(--sjs-spacing-x2); + --ctr-toolbox-submenu-group-border-color: var(--sjs-border-10); + --ctr-toolbox-submenu-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-submenu-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-submenu-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-submenu-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-submenu-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-submenu-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-submenu-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-submenu-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-submenu-margin-left: var(--sjs-spacing-x2); + --ctr-list-item-background-color-selected-submenu: var(--sjs-primary-background-10); + --ctr-list-item-text-color-selected-submenu: var(--sjs-layer-1-foreground-100); + --ctr-list-item-icon-color-selected-submenu: var(--sjs-layer-1-foreground-50); + --ctr-list-item-submenu-arrow-color-selected-item-submenu: var(--sjs-layer-1-foreground-50); + --ctr-menu-item-padding-left-icon: var(--sjs-spacing-x2); + --ctr-menu-toolbar-button-padding-right: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-menu-item-padding-right: var(--sjs-spacing-x3); + --ctr-menu-item-padding-right-icon: var(--sjs-spacing-x2); + --ctr-menu-toolbar-button-padding-top-with-description: var(--sjs-spacing-x05); + --ctr-property-grid-header-padding-top-with-subtitle: var(--sjs-spacing-x075); + --ctr-property-grid-header-padding-bottom-with-subtitle: var(--sjs-spacing-x075); + --ctr-list-item-label-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-list-item-label-icon-color-hovered: var(--sjs-layer-3-foreground-50); + --ctr-list-item-label-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-list-item-label-icon-color-selected: var(--sjs-primary-foreground-100); + --ctr-data-table-form-gap: var(--sjs-spacing-x2); + --ctr-data-table-form-padding-left: var(--sjs-spacing-x4); + --ctr-data-table-form-background-color: var(--sjs-layer-3-background-500); + --ctr-data-table-form-padding-right: var(--sjs-spacing-x4); + --ctr-data-table-form-padding-top: var(--sjs-spacing-x2); + --ctr-data-table-form-padding-top-no-label: var(--sjs-spacing-x4); + --ctr-data-table-form-padding-bottom: var(--sjs-spacing-x5); + --ctr-data-table-form-border-width-bottom: var(--sjs-stroke-x1); + --ctr-data-table-form-border-color: var(--sjs-border-25); + --ctr-menu-toolbar-button-padding-left-with-description: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-padding-right-with-description: var(--sjs-spacing-x1); + --ctr-survey-page-border-color-minimized: var(--sjs-border-10); + --ctr-survey-page-border-width-minimized: var(--sjs-stroke-x2); + --ctr-survey-page-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-page-drag-indicator-height: var(--sjs-size-x2); + --ctr-survey-page-drag-indicator-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-resize-frame-grip-width: var(--sjs-size-x1); + --ctr-survey-resize-frame-grip-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-resize-frame-grip-color: var(--sjs-layer-1-background-500); + --ctr-survey-resize-frame-grip-height: var(--sjs-size-x3); + --ctr-survey-resize-frame-margin: var(--sjs-spacing-x05n); + --ctr-survey-resize-frame-grip-border-color: var(--sjs-secondary-background-500); + --ctr-survey-resize-frame-grip-border-width: var(--sjs-stroke-x2); + --lbr-footer-text-description-color-transparent: var(--sjs-layer-3-foreground-50); + --lbr-footer-text-title-color-transparent: var(--sjs-layer-3-foreground-100); + --lbr-footer-padding-top-transparent: var(--sjs-spacing-x8n); + --lbr-footer-padding-bottom-transparent: var(--sjs-spacing-x12); + --lbr-footer-padding-bottom-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-left-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-right-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-top-transparent-responsive: var(--sjs-spacing-x1n); + --lbr-footer-text-max-width: var(--sjs-size-x50); + --lbr-app-header-background-color: var(--sjs-primary-background-500); + --lbr-app-header-padding-left: var(--sjs-spacing-x3); + --lbr-app-header-padding-right: var(--sjs-spacing-x5); + --lbr-app-header-menu-item-padding-top: var(--sjs-spacing-x250); + --lbr-app-header-menu-item-padding-bottom: var(--sjs-spacing-x3); + --lbr-app-header-border-color: var(--sjs-primary-background-400); + --lbr-app-header-border-width-bottom: var(--sjs-stroke-x4); + --lbr-app-header-title-text-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-icon-width: var(--sjs-size-x4); + --lbr-app-header-title-icon-height: var(--sjs-size-x4); + --lbr-app-header-title-icon-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-gap: var(--sjs-spacing-x150); + --lbr-app-header-menu-gap: var(--sjs-spacing-x5); + --lbr-app-header-menu-item-border-color-selected: var(--sjs-primary-foreground-100); + --lbr-app-header-menu-item-border-width-bottom: var(--sjs-stroke-x4); + --lbr-app-header-menu-item-text-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-margin-bottom: var(--sjs-spacing-x05); + --lbr-app-header-menu-item-border-color-hovered: var(--sjs-primary-foreground-100); + --lbr-footer-padding-left-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-right-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-top-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-bottom-transparent-mobile: var(--sjs-spacing-x3); + --ctr-surface-toolbar-padding-left: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-right: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-top: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-bottom: var(--sjs-spacing-x150); + --ctr-surface-toolbar-gap: var(--sjs-spacing-x1); + --ctr-toggle-button-thumb-background-color-active: var(--sjs-layer-1-foreground-50); + --ctr-toggle-button-thumb-corner-radius: var(--sjs-corner-radius-round); + --ctr-toggle-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-toggle-button-gap: var(--sjs-spacing-x05); + --ctr-toggle-button-padding-left: var(--sjs-spacing-x05); + --ctr-toggle-button-padding-right: var(--sjs-spacing-x05); + --ctr-toggle-button-padding-top: var(--sjs-spacing-x05); + --ctr-toggle-button-padding-bottom: var(--sjs-spacing-x05); + --ctr-toggle-button-background-color: var(--sjs-layer-1-background-500); + --ctr-toggle-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-toggle-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-toggle-button-border-color: var(--sjs-border-25); + --ctr-toggle-button-border-width: var(--sjs-stroke-x1); + --ctr-toggle-button-thumb-width: var(--sjs-size-x2); + --ctr-toggle-button-thumb-height: var(--sjs-size-x2); + --ctr-toggle-button-background-color-checked: var(--sjs-primary-background-500); + --ctr-toggle-button-thumb-background-color-checked-focused: var(--sjs-primary-background-500); + --ctr-toggle-button-background-color-checked-focused: var(--sjs-primary-foreground-100); + --ctr-toggle-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-toggle-button-label-text-color: var(--sjs-layer-3-foreground-100); + --ctr-toggle-button-gap-label: var(--sjs-spacing-x1); + --ctr-toggle-button-thumb-background-color-checked: var(--sjs-primary-foreground-100); + --ctr-property-grid-advanced-mode-switcher-margin-top: var(--sjs-spacing-x4); + --ctr-property-grid-advanced-mode-switcher-margin-bottom: var(--sjs-spacing-x3); + --ctr-toggle-button-thumb-border-color: var(--sjs-border-25); + --ctr-toolbox-item-submenu-button-background-color: var(--sjs-layer-3-background-500); + --ctr-toolbox-item-submenu-button-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-submenu-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-toolbox-item-submenu-button-padding-left: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-right: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-top: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-bottom: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-icon-width: var(--sjs-size-x2); + --ctr-toolbox-item-submenu-button-icon-height: var(--sjs-size-x2); + --ctr-toolbox-item-submenu-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-toolbox-item-submenu-button-icon-color-hovered: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-submenu-button-margin-left: var(--sjs-spacing-x2); + --ctr-toolbox-item-submenu-button-margin-right: var(--sjs-spacing-x05n); + --lbr-background-color-panelless: var(--sjs-layer-1-background-500); + --ctr-survey-question-panel-toolbar-item-icon-container-width-x-small: var(--sjs-size-x2); + --ctr-survey-question-panel-toolbar-item-icon-container-height-x-small: var(--sjs-size-x2); + --lbr-slider-label-tick-color: var(--sjs-border-25); + --lbr-slider-label-tick-width: var(--sjs-size-x0125); + --lbr-slider-label-tick-height: var(--sjs-size-x05); + --lbr-slider-label-text-color: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-min-width: var(--sjs-size-x4); + --lbr-slider-thumb-width: var(--sjs-size-x4); + --lbr-slider-thumb-height: var(--sjs-size-x4); + --lbr-slider-thumb-color: var(--sjs-layer-1-background-500); + --lbr-slider-thumb-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-slider-thumb-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-slider-thumb-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-slider-thumb-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-slider-thumb-shadow-color: var(--lbr-shadow-small-color); + --lbr-slider-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-thumb-padding-left: var(--sjs-spacing-x075); + --lbr-slider-path-height: var(--sjs-size-x05); + --lbr-slider-path-color: var(--sjs-border-10); + --lbr-slider-path-color-filled: var(--sjs-primary-background-500); + --lbr-slider-path-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-label-gap: var(--sjs-spacing-x05); + --lbr-slider-gap: var(--sjs-spacing-x1); + --lbr-slider-path-margin-left: var(--sjs-spacing-x1); + --lbr-slider-path-margin-right: var(--sjs-spacing-x1); + --lbr-slider-thumb-dot-width: var(--sjs-size-x150); + --lbr-slider-thumb-dot-height: var(--sjs-size-x150); + --lbr-slider-thumb-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-thumb-dot-color: var(--sjs-primary-background-500); + --lbr-slider-margin-left: var(--sjs-spacing-x05n); + --lbr-slider-margin-right: var(--sjs-spacing-x05n); + --lbr-slider-thumb-padding-right: var(--sjs-spacing-x075); + --lbr-slider-thumb-padding-top: var(--sjs-spacing-x075); + --lbr-slider-thumb-padding-bottom: var(--sjs-spacing-x075); + --lbr-tooltip-pointer-width: var(--sjs-size-x150); + --lbr-tooltip-pointer-height: var(--sjs-size-x075); + --lbr-tooltip-pointer-margin-left: var(--sjs-spacing-x1); + --lbr-tooltip-pointer-margin-right: var(--sjs-spacing-x1); + --lbr-tooltip-shadow-1-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-tooltip-shadow-1-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-tooltip-shadow-1-blur: var(--lbr-shadow-medium-blur); + --lbr-tooltip-shadow-1-spread: var(--lbr-shadow-medium-spread); + --lbr-tooltip-shadow-1-color: var(--lbr-shadow-medium-color); + --lbr-tooltip-shadow-2-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-tooltip-shadow-2-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-tooltip-shadow-2-blur: var(--lbr-shadow-small-blur); + --lbr-tooltip-shadow-2-spread: var(--lbr-shadow-small-spread); + --lbr-tooltip-shadow-2-color: var(--lbr-shadow-small-color); + --lbr-slider-tooltip-text-color: var(--sjs-primary-background-500); + --lbr-slider-thumb-dot-width-hovering: var(--sjs-size-x2); + --lbr-slider-thumb-dot-height-hovering: var(--sjs-size-x2); + --lbr-slider-path-color-read-only: var(--sjs-layer-1-background-400); + --lbr-slider-path-color-filled-read-only: var(--sjs-layer-1-foreground-100); + --lbr-slider-path-height-preview: var(--sjs-size-x0125); + --lbr-slider-path-color-preview: var(--sjs-border-10); + --lbr-slider-path-color-filled-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-read-only: var(--sjs-border-10); + --lbr-slider-thumb-dot-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-thumb-dot-width-preivew: var(--sjs-size-x0125); + --lbr-slider-thumb-dot-height-preview: var(--sjs-size-x2); + --lbr-slider-label-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-slider-thumb-dot-color-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-path-color-filled-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-thumb-border-width-focused: var(--sjs-stroke-x2); + --lbr-slider-thumb-border-color-focused: var(--sjs-primary-background-500); + --lbr-slider-path-color-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-thumb-dot-color-error: var(--sjs-semantic-red-background-500); + --lbr-slider-path-color-error: var(--sjs-semantic-red-background-10); + --lbr-matching-item-corner-radius: var(--sjs-corner-radius-x1); + --lbr-matching-item-padding-left: var(--sjs-spacing-x3); + --lbr-matching-item-padding-right: var(--sjs-spacing-x3); + --lbr-matching-item-padding-top: var(--sjs-spacing-x2); + --lbr-matching-item-padding-bottom: var(--sjs-spacing-x2); + --lbr-matching-item-background-color: var(--sjs-layer-1-background-500); + --lbr-matching-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-matching-gap-vertical: var(--sjs-spacing-x2); + --lbr-matching-item-border-color-answered: var(--sjs-border-10); + --lbr-matching-gap-horizontal: var(--sjs-spacing-x4); + --lbr-matching-item-background-color-answered: var(--sjs-layer-2-background-500); + --lbr-matching-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-matching-item-background-color-active: var(--sjs-primary-background-10); + --lbr-matching-item-border-width: var(--sjs-stroke-x1); + --lbr-matching-item-border-color: var(--sjs-border-25); + --lbr-matching-item-border-color-focused: var(--sjs-primary-background-500); + --lbr-matching-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-matching-item-border-color-active: var(--sjs-border-10); + --lbr-matching-item-text-color-answered: var(--sjs-layer-2-foreground-50); + --lbr-matching-item-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-matching-item-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-disalbed-answered: var(--sjs-layer-2-foreground-100); + --lbr-matching-item-background-color-answered-disabled: var(--sjs-layer-2-background-400); + --lbr-matching-item-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-matching-item-border-color-read-only-answered: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-read-only-answered: var(--sjs-layer-1-foreground-100); + --lbr-matching-connector-button-icon-width: var(--sjs-size-x2); + --lbr-matching-connector-button-icon-height: var(--sjs-size-x2); + --lbr-matching-connector-button-icon-color: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-background-color: var(--sjs-layer-1-background-500); + --lbr-matching-connector-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-matching-connector-button-border-width: var(--sjs-stroke-x1); + --lbr-matching-connector-button-border-color: var(--sjs-border-25); + --lbr-matching-connector-button-padding-left: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-right: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-top: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-bottom: var(--sjs-spacing-x025); + --lbr-matching-connector-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-border-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-matching-connector-button-border-color-focused: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-icon-color-focused: var(--sjs-semantic-red-background-500); + --lbr-matching-item-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-background-color-read-only: var(--sjs-layer-1-background-400); + --ctr-survey-matching-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-matching-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-matching-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-matching-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-matching-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-matching-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-matching-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-matching-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-matching-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-matching-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-matching-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-matching-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-matching-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-matching-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-matching-item-padding-right-floating: var(--sjs-spacing-x3); + --ctr-survey-matching-item-padding-top-floating: var(--sjs-spacing-x05); + --ctr-survey-matching-item-padding-bottom-floating: var(--sjs-spacing-x05); + --ctr-survey-matching-item-corner-radius-floating: var(--sjs-corner-radius-round); + --ctr-survey-matching-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --ctr-survey-matching-item-border-color-inactive: var(--sjs-border-10); + --ctr-tooltip-corder-radius: var(--sjs-corner-radius-x05); + --ctr-tooltip-padding-left: var(--sjs-spacing-x3); + --ctr-tooltip-padding-right: var(--sjs-spacing-x3); + --ctr-tooltip-padding-top: var(--sjs-spacing-x2); + --ctr-tooltip-padding-bottom: var(--sjs-spacing-x2); + --ctr-tooltip-text-color: var(--sjs-layer-1-foreground-100); + --ctr-tooltip-background-color: var(--sjs-layer-1-background-500); + --ctr-tooltip-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-tooltip-shadow-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-tooltip-shadow-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-tooltip-shadow-2-blur: var(--ctr-shadow-small-blur); + --ctr-tooltip-shadow-2-spread: var(--ctr-shadow-small-spread); + --ctr-tooltip-shadow-2-color: var(--ctr-shadow-small-color); + --ctr-tooltip-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-tooltip-pointer-width: var(--sjs-size-x1); + --ctr-tooltip-pointer-height: var(--sjs-size-x05); + --ctr-tooltip-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-tooltip-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-tooltip-pointer-margin-left: var(--sjs-spacing-x1); + --ctr-tooltip-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-tooltip-pointer-margin-right: var(--sjs-spacing-x1); + --ctr-super-tooltip-corder-radius: var(--sjs-corner-radius-x05); + --ctr-super-tooltip-text-color-title: var(--sjs-layer-1-foreground-100); + --ctr-super-tooltip-image-width: var(--sjs-size-x32); + --ctr-super-tooltip-image-height: var(--sjs-size-x32); + --ctr-super-tooltip-text-color-description: var(--sjs-layer-1-foreground-50); + --ctr-super-tooltip-text-gap: var(--sjs-spacing-x05); + --ctr-super-tooltip-background-color: var(--sjs-layer-1-background-500); + --ctr-super-tooltip-pointer-width: var(--sjs-size-x150); + --ctr-super-tooltip-pointer-height: var(--sjs-size-x075); + --ctr-super-tooltip-pointer-margin-left: var(--sjs-spacing-x2); + --ctr-super-tooltip-pointer-margin-right: var(--sjs-spacing-x2); + --ctr-super-tooltip-width: var(--sjs-size-x64); + --ctr-super-tooltip-text-margin-left: var(--sjs-spacing-x3); + --ctr-super-tooltip-text-margin-right: var(--sjs-spacing-x3); + --ctr-super-tooltip-text-margin-top: var(--sjs-spacing-x250); + --ctr-super-tooltip-text-margin-bottom: var(--sjs-spacing-x3); + --ctr-super-tooltip-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-super-tooltip-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-super-tooltip-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-super-tooltip-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-super-tooltip-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-super-tooltip-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-super-tooltip-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-super-tooltip-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-super-tooltip-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-super-tooltip-shadow-1-color: var(--ctr-shadow-medium-color); + --lbr-timer-gap: var(--sjs-spacing-x05n); + --lbr-blank-form-text-item-padding-top: var(--sjs-spacing-x1); + --lbr-blank-form-text-item-padding-bottom: var(--sjs-spacing-x1); + --lbr-blank-form-text-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-blank-form-text-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-border-width: var(--sjs-stroke-x1); + --lbr-blank-form-field-border-width-focused: var(--sjs-stroke-x2); + --lbr-blank-form-field-border-color: var(--sjs-border-10); + --lbr-blank-form-field-border-color-focused: var(--sjs-primary-background-500); + --lbr-blank-form-gap: var(--sjs-spacing-x1); + --lbr-blank-form-line-height: var(--sjs-spacing-x2); + --ctr-survey-blank-form-add-row-button-margin-left: var(--sjs-spacing-x3n); + --ctr-survey-blank-form-add-row-button-margin-top: var(--sjs-spacing-x2); + --ctr-survey-blank-form-add-row-button-margin-buttom: var(--sjs-spacing-x1n); + --ctr-menu-item-padding-bottom: var(--sjs-spacing-x250); + --ctr-menu-item-padding-top: var(--sjs-spacing-x250); + --ctr-survey-blank-form-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-label-text-color: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-label-margin-top: var(--sjs-spacing-x05); + --lbr-blank-form-field-margin-bottom: var(--sjs-spacing-x150n); + --lbr-blank-form-field-margin-top: var(--sjs-spacing-x1); + --lbr-blank-form-field-text-color: var(--sjs-layer-1-foreground-100); + --ctr-scrollbar-padding-horizontal-hovered: var(--sjs-spacing-x025); + --ctr-scrollbar-padding-vertical-hovered: var(--sjs-spacing-x025); + --ctr-toolbox-search-margin-bottom-compact: var(--sjs-spacing-x1n); + --lbr-slider-margin-top: var(--sjs-spacing-x1); + --lbr-button-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-button-padding-left-mobile: var(--sjs-spacing-x3); +} + diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css new file mode 100644 index 0000000000..edfa5de22f --- /dev/null +++ b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css @@ -0,0 +1,3263 @@ + /* Variables */ + :root { + --ctr-toolbox-group-header-margin-left: 0px; + --ctr-button-group-item-border-width: 0px; + --ctr-button-group-gap: 0px; + --ctr-popup-menu-padding-left: 0px; + --ctr-popup-menu-padding-right: 0px; + --ctr-popup-menu-padding-top: 0px; + --ctr-popup-menu-padding-bottom: 0px; + --ctr-shadow-medium-blur: 8px; + --ctr-shadow-medium-offset-y: 2px; + --ctr-shadow-large-blur: 32px; + --ctr-shadow-large-offset-y: 16px; + --ctr-shadow-large-offset-x: 0px; + --ctr-shadow-large-spread: 0px; + --ctr-shadow-medium-offset-x: 0px; + --ctr-shadow-medium-spread: 0px; + --ctr-list-search-icon-opacity: 100px; + --ctr-label-opacity-disabled: 25px; + --ctr-caption-with-actions-text-opacity-disabled: 25px; + --ctr-radio-button-text-opacity-disabled: 25px; + --ctr-checkbox-text-opacity-disabled: 25px; + --ctr-button-group-item-border-width-selected-disabled: 0px; + --ctr-shadow-small-offset-x: 0px; + --ctr-shadow-small-offset-y: 1px; + --ctr-shadow-small-blur: 2px; + --ctr-shadow-small-spread: 0px; + --ctr-shadow-x-large-offset-x: 0px; + --ctr-shadow-x-large-offset-y: 32px; + --ctr-shadow-x-large-blur: 64px; + --ctr-shadow-x-large-spread: 0px; + --ctr-property-grid-placeholder-text-max-width: 256px; + --ctr-surface-placeholder-padding-top: 0px; + --ctr-toolbox-group-header-margin-right: 0px; + --ctr-property-grid-placeholder-padding-bottom: 0px; + --ctr-editor-content-text-opacity-disabled: 25px; + --ctr-editor-label-opacity-disabled: 25px; + --ctr-editor-button-icon-opacity-disabled: 25px; + --ctr-editor-button-icon-opacity-pressed: 50px; + --ctr-checkbox-description-text-opacity-disabled: 25px; + --ctr-actionbar-button-opacity-pressed: 50px; + --ctr-actionbar-button-opacity-disabled: 25px; + --ctr-actionbar-button-opacity-muted: 35px; + --ctr-list-item-opacity-disabled: 25px; + --ctr-list-item-contextual-buttons-opacity-pressed: 50px; + --ctr-list-item-contextual-buttons-opacity-default: 50px; + --ctr-editor-color-swatch-opacity-hovered: 50px; + --ctr-editor-color-swatch-opacity-disabled: 25px; + --ctr-menu-item-opacity-disabled: 25px; + --ctr-menu-toolbar-button-opacity-disabled: 25px; + --ctr-menu-toolbar-button-opacity-pressed: 50px; + --ctr-toolbox-item-text-opacity-pressed: 50px; + --ctr-toolbox-item-icon-opacity-pressed: 35px; + --ctr-toolbox-item-opacity-submenu: 100px; + --ctr-toolbox-item-text-opacity-disabled: 25px; + --ctr-toolbox-button-opacity-pressed: 50px; + --ctr-page-navigator-button-opacity-pressed: 50px; + --ctr-button-text-opacity-disabled: 25px; + --ctr-property-grid-switcher-toggle-button-border-width-checked: 0px; + --ctr-property-grid-chapter-caption-text-opacity-disabled: 25px; + --ctr-notification-opacity: 75px; + --ctr-notification-opacity-error: 100px; + --ctr-string-table-row-border-width-top: 0px; + --ctr-string-table-row-border-width-left: 0px; + --ctr-string-table-row-border-width-right: 0px; + --ctr-toolbox-group-header-border-width-top: 0px; + --ctr-toolbox-group-header-border-width-left: 0px; + --ctr-toolbox-group-header-border-width-right: 0px; + --ctr-text-decor-padding-top: 0px; + --ctr-text-decor-padding-bottom: 0px; + --ctr-caption-with-actions-description-text-opacity-disabled: 25px; + --ctr-data-table-cell-drop-down-arrow-opacity: 50px; + --ctr-data-table-cell-padding-top-header: 0px; + --ctr-data-table-cell-padding-bottom-header: 0px; + --ctr-data-table-cell-opacity-disabled: 25px; + --ctr-data-table-row-padding-left: 0px; + --ctr-data-table-row-drag-area-icon-opacity: 50px; + --ctr-data-table-row-border-width-last-row: 0px; + --ctr-toolbox-separator-padding-right: 0px; + --ctr-toolbox-padding-left: 0px; + --ctr-toolbox-padding-right: 0px; + --ctr-toolbox-group-padding-top: 0px; + --ctr-toolbox-group-padding-bottom: 0px; + --ctr-button-contextual-button-opacity-disabled: 25px; + --ctr-button-contextual-button-opacity-pressed: 50px; + --lbr-contextual-button-icon-opacity-disabled: 25px; + --ctr-survey-question-panel-toolbar-item-opacity-pressed: 50px; + --ctr-survey-question-panel-toolbar-item-opacity-disabled: 25px; + --ctr-survey-question-panel-toolbar-item-icon-padding-left-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-right-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-top-large: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom-large: 0px; + --ctr-survey-question-panel-toolbar-item-opacity-muted: 50px; + --ctr-survey-question-panel-toolbar-item-padding-left-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-right-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-top-small: 0px; + --ctr-survey-question-panel-toolbar-item-padding-bottom-small: 0px; + --ctr-survey-question-panel-drag-area-drag-indicator-opacity: 50px; + --ctr-survey-question-panel-drag-area-padding-left-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-right-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-top-with-buttons-mobile: 0px; + --ctr-survey-question-panel-drag-area-padding-bottom-with-buttons-mobile: 0px; + --ctr-preview-pager-padding-right: 0px; + --ctr-preview-pager-padding-left: 0px; + --ctr-code-viewer-code-error-row-fix-button-padding-top: 0px; + --ctr-code-viewer-code-error-row-fix-button-padding-bottom: 0px; + --ctr-code-viewer-padding-left-fullscreen: 0px; + --ctr-code-viewer-padding-right-fullscreen: 0px; + --ctr-code-viewer-padding-top-fullscreen: 0px; + --ctr-code-viewer-padding-bottom-fullscreen: 0px; + --ctr-code-viewer-corner-radius-fullscreen: 0px; + --ctr-label-padding-left: 0px; + --ctr-label-padding-right: 0px; + --ctr-editor-limit-label-padding-right-with-button: 0px; + --ctr-property-grid-search-corner-radius: 0px; + --ctr-search-button-opacity-disabled: 25px; + --ctr-survey-action-button-opacity-disabled: 25px; + --ctr-survey-contextual-button-icon-opacity-disabled: 25px; + --lbr-action-button-opacity-disabled: 25px; + --lbr-tag-box-item-remove-button-opacity-pressed: 50px; + --lbr-popup-menu-search-corner-radius: 0px; + --lbr-popup-menu-search-clear-button-opacity-disabled: 25px; + --lbr-notification-opacity: 75px; + --lbr-notification-opacity-error: 100px; + --ctr-survey-placeholder-loading-circle-opacity: 10px; + --ctr-survey-image-picker-item-loading-circle-opacity: 10px; + --ctr-survey-item-actionbar-drag-indicator-opacity: 50px; + --ctr-survey-item-actionbar-drag-indicator-padding-left-mobile: 0px; + --ctr-survey-item-actionbar-drag-indicator-padding-right-mobile: 0px; + --ctr-property-grid-form-border-width-bottom: 0px; + --ctr-page-navigator-item-opacity-step-1: 75px; + --ctr-page-navigator-item-opacity-step-2: 50px; + --ctr-page-navigator-item-opacity-step-3: 25px; + --ctr-toolbox-search-corner-radius: 0px; + --lbr-shadow-x-large-offset-x: 0px; + --lbr-shadow-x-large-offset-y: 32px; + --lbr-shadow-x-large-blur: 64px; + --lbr-shadow-x-large-spread: 0px; + --lbr-shadow-large-offset-x: 0px; + --lbr-shadow-large-offset-y: 16px; + --lbr-shadow-large-blur: 32px; + --lbr-shadow-large-spread: 0px; + --lbr-shadow-medium-offset-x: 0px; + --lbr-shadow-medium-offset-y: 2px; + --lbr-shadow-medium-blur: 8px; + --lbr-shadow-medium-spread: 0px; + --lbr-shadow-small-offset-x: 0px; + --lbr-shadow-small-offset-y: 1px; + --lbr-shadow-small-blur: 2px; + --lbr-shadow-small-spread: 0px; + --lbr-checkboxes-item-text-opacity-disabled: 25px; + --ctr-survey-checkboxes-item-button-opacity-inactive: 35px; + --lbr-checkboxes-item-button-check-mark-opacity-disabled: 25px; + --ctr-survey-radio-button-group-item-button-opacity-inactive: 35px; + --lbr-radio-buttons-item-button-dot-opacity-disabled: 25px; + --lbr-radio-buttons-item-text-opacity-disabled: 25px; + --lbr-editor-text-opacity-disabled: 25px; + --lbr-editor-padding-left-preview: 0px; + --lbr-editor-padding-right-preview: 0px; + --lbr-editor-corner-radius-preview: 0px; + --lbr-labeled-editor-label-opacity-disabled: 25px; + --lbr-editor-button-icon-opacity-pressed: 50px; + --lbr-editor-button-icon-opacity-disabled: 25px; + --lbr-rating-item-text-opacity-disabled: 25px; + --lbr-rating-label-opacity-disabled: 25px; + --lbr-rating-smiley-opacity-disabled-selected: 15px; + --lbr-rating-smiley-red-opacity: 25px; + --lbr-rating-smiley-red-opacity-hovered: 50px; + --lbr-rating-smiley-yellow-opacity: 25px; + --lbr-rating-smiley-yellow-opacity-hovered: 50px; + --lbr-rating-smiley-green-opacity: 25px; + --lbr-rating-smiley-green-opacity-hovered: 50px; + --lbr-ranking-item-number-text-opacity-disabled: 25px; + --lbr-ranking-item-number-icon-opacity-disabled: 25px; + --lbr-ranking-item-text-opacity-disabled: 25px; + --ctr-survey-ranking-item-padding-left-floating-mobile: 0px; + --lbr-ranking-indicators-padding-left: 0px; + --lbr-ranking-indicators-padding-right: 0px; + --lbr-ranking-indicators-drag-indicator-icon-opacity-mobile: 25px; + --lbr-ranking-indicators-sort-indicator-padding-left-mobile: 0px; + --lbr-ranking-indicators-sort-indicator-padding-right-mobile: 0px; + --ctr-survey-item-actionbar-padding-left: 0px; + --lbr-boolean-thumb-text-opacity-disabled: 25px; + --lbr-image-picker-item-opacity-disabled: 25px; + --lbr-image-picker-item-opacity-preview: 25px; + --lbr-image-picker-item-opacity-hovered: 50px; + --lbr-image-picker-item-opacity-error: 75px; + --lbr-file-upload-item-loading-circle-opacity: 10px; + --lbr-signature-loading-circle-opacity: 10px; + --lbr-placeholder-loading-circle-opacity: 10px; + --lbr-file-upload-image-opacity-disabled: 25px; + --lbr-list-item-text-opacity-disabled: 25px; + --lbr-page-layout-gap-none: 0px; + --lbr-button-text-opacity-disabled: 25px; + --lbr-window-header-button-opacity-pressed: 50px; + --lbr-matrix-title-cell-text-opacity-disabled: 25px; + --ctr-survey-header-logo-loading-circle-opacity: 10px; + --lbr-cover-padding-bottom-no-background: 0px; + --lbr-tag-box-item-opacity-disabled: 25px; + --lbr-popup-menu-footer-padding-left: 0px; + --lbr-popup-menu-footer-padding-right: 0px; + --lbr-matrix-details-padding-right: 0px; + --lbr-dynamic-panel-tabs-item-padding-left: 0px; + --lbr-dynamic-panel-tabs-item-padding-right: 0px; + --lbr-dynamic-panel-tabs-item-opacity-disabled: 25px; + --lbr-dynamic-panel-tabs-button-icon-opacity-pressed: 50px; + --lbr-step-progress-bar-connector-opacity: 50px; + --lbr-step-progress-bar-step-dot-background-opacity: 50px; + --lbr-step-progress-bar-step-dot-margin-top: 0px; + --lbr-step-progress-bar-step-dot-margin-bottom: 0px; + --lbr-step-progress-bar-margin-top-position-bottom: 0px; + --lbr-page-padding-left: 0px; + --lbr-page-padding-right: 0px; + --ctr-survey-question-panel-opacity-hidden: 25px; + --lbr-question-panel-corner-radius-nested: 0px; + --lbr-progress-bar-section-title-opacity-pressed: 50px; + --lbr-dynamic-panel-item-header-title-opacity-disabled: 25px; + --lbr-placeholder-text-opacity-disabled: 25px; + --lbr-placeholder-padding-bottom-with-button: 0px; + --lbr-signature-signature-opacity-disabled: 25px; + --ctr-editor-color-swatch-icon-color: #FFFFFFFF; + --ctr-editor-color-swatch-icon-color-stroke: #00000040; + --lbr-pager-text-opacity-disabled: 25px; + --misc-component-container-padding: 64px; + --misc-component-container-gap: 64px; + --misc-component-title-padding-left: 12px; + --misc-component-title-padding-right: 12px; + --misc-component-title-padding-top: 7px; + --misc-component-title-padding-bottom: 8px; + --misc-component-title-corner-radius: 4px; + --misc-component-container-corner-radius: 16px; + --misc-component-title-margin-top: 64px; + --misc-component-title-margin-bottom: 16px; + --misc-component-container-padding-top-with-title: 0px; + --lbr-dynamic-panel-details-area-padding-bottom: 0px; + --lbr-question-panel-header-title-opacity-disabled: 25px; + --lbr-question-panel-header-description-opacity-disabled: 25px; + --lbr-question-panel-header-gap-mobile: 0px; + --lbr-panel-header-padding-left-expandable: 0px; + --lbr-dynamic-panel-tabs-padding-left-nested: 0px; + --lbr-dynamic-panel-tabs-padding-right-nested: 0px; + --lbr-page-padding-bottom-no-buttons: 0px; + --ctr-survey-page-margin-bottom: 0px; + --ctr-survey-page-margin-left-mobile: 0px; + --ctr-survey-page-margin-right-mobile: 0px; + --ctr-survey-page-margin-top-mobile: 0px; + --lbr-dynamic-panel-content-margin-top-placeholder: 0px; + --lbr-question-panel-padding-top-error: 0px; + --lbr-question-panel-padding-bottom-error: 0px; + --ctr-survey-question-panel-padding-top-selected: 0px; + --ctr-survey-page-header-padding-new-page: 0px; + --lbr-panel-layout-item-min-width: 0px; + --ctr-button-group-item-text-opacity-disabled: 25px; + --ctr-button-group-item-icon-opacity-disabled: 25px; + --lbr-matrix-margin-left-expandable: 0px; + --lbr-matrix-margin-left-no-row-title: 0px; + --lbr-matrix-gap-single-select: 0px; + --lbr-drop-down-buttons-margin: 0px; + --lbr-drop-down-padding-left-preview: 0px; + --lbr-drop-down-padding-right-preview: 0px; + --lbr-tag-box-item-padding-left-preview: 0px; + --ctr-survey-header-logo-placeholder-icon-opacity: 50px; + --ctr-survey-image-no-image-icon-opacity: 50px; + --ctr-list-search-corner-radius: 0px; + --ctr-property-grid-search-icon-opacity: 100px; + --ctr-toolbox-search-icon-opacity: 100px; + --ctr-preview-device-width: 400px; + --ctr-toolbox-item-shadow-hovered-1-color: #00000000; + --ctr-toolbox-item-shadow-pressed-color: #00000000; + --ctr-toolbox-item-shadow-hovered-2-color: #00000000; + --lbr-shadow-inner-offset-x: 0px; + --lbr-shadow-inner-offset-y: 1px; + --lbr-shadow-inner-blur: 2px; + --lbr-shadow-inner-spread: 0px; + --lbr-progress-bar-pager-label-opacity-floating: 75px; + --ctr-survey-question-panel-floating-toolbar-opacity-no-focus: 25px; + --lbr-page-loading-background-opacity: 75px; + --lbr-page-loading-loading-icon-circle-opacity: 10px; + --lbr-ghost-button-opacity: 25px; + --ctr-toolbox-item-icon-opacity-disabled: 25px; + --ctr-list-item-icon-opacity-label: 50px; + --ctr-toolbox-item-shadow-subitem-1-color: #00000000; + --ctr-toolbox-item-shadow-subitem-2-color: #00000000; + --ctr-toolbox-submenu-margin-left: 0px; + --ctr-list-item-label-icon-opacity-label: 50px; + --ctr-survey-page-drag-indicator-opacity: 50px; + --lbr-footer-padding-left-transparent: 0px; + --lbr-footer-padding-right-transparent: 0px; + --lbr-app-header-menu-item-opacity-disabled: 25px; + --ctr-toggle-button-thumb-border-width: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-left-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-right-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-top-x-small: 0px; + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom-x-small: 0px; + --lbr-slider-label-opacity-disabled: 25px; + --lbr-slider-thumb-dot-opacity-disabled: 100px; + --lbr-matching-item-text-opacity-disabled: 25px; + --ctr-super-tooltip-padding-left: 0px; + --ctr-super-tooltip-padding-right: 0px; + --ctr-super-tooltip-padding-top: 0px; + --ctr-super-tooltip-padding-bottom: 0px; + --lbr-blank-form-text-item-padding-left: 0px; + --lbr-blank-form-text-item-padding-right: 0px; + --ctr-survey-item-actionbar-padding-right-add: 0px; + --lbr-blank-form-field-padding-top: 0px; + --lbr-blank-form-field-padding-bottom: 0px; + --lbr-blank-form-field-padding-left: 0px; + --lbr-blank-form-field-padding-right: 0px; + --ctr-line-height-unit: 8px; + --ctr-font-unit: 8px; + --ctr-spacing-unit: 8px; + --ctr-corner-radius-unit: 8px; + --ctr-stroke-unit: 1px; + --ctr-size-unit: 8px; +} + + /* Aliases */ + :root { + --ctr-toolbox-item-icon-color: var(--sjs-primary-background-500); + --ctr-toolbox-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-icon-color-pressed: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-text-color-pressed: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-background-color: var(--sjs-layer-1-background-500); + --ctr-toolbox-border-color: var(--sjs-border-25); + --ctr-toolbox-border-width-right: var(--sjs-stroke-x1); + --ctr-toolbox-group-header-padding-left: var(--sjs-spacing-x3); + --ctr-toolbox-group-header-padding-right: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-corner-radius: var(--sjs-corner-radius-x1); + --ctr-menu-toolbar-button-background-color-selected: var(--sjs-primary-background-10); + --ctr-menu-toolbar-button-icon-color: var(--sjs-layer-1-foreground-75); + --ctr-menu-toolbar-button-icon-color-selected: var(--sjs-primary-background-500); + --ctr-toolbox-item-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-toolbox-item-text-color-hovered: var(--sjs-layer-1-foreground-100); + --ctr-property-grid-form-background-color: var(--sjs-layer-1-background-500); + --ctr-list-item-corner-radius: var(--sjs-corner-radius-x075); + --ctr-button-group-item-border-color: var(--sjs-border-10); + --ctr-button-group-item-corner-radius: var(--sjs-corner-radius-x075); + --ctr-button-group-item-background-color: var(--sjs-layer-3-background-500); + --ctr-button-group-item-text-color: var(--sjs-layer-3-foreground-100); + --ctr-menu-item-icon-color: var(--sjs-layer-1-foreground-75); + --ctr-button-group-item-icon-color: var(--sjs-layer-3-foreground-75); + --ctr-button-group-item-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-button-group-item-text-color-selected: var(--sjs-primary-background-500); + --ctr-button-group-item-icon-color-selected: var(--sjs-primary-background-500); + --ctr-editor-corner-radius: var(--sjs-corner-radius-x075); + --ctr-editor-background-color: var(--sjs-layer-3-background-500); + --ctr-editor-border-color: var(--sjs-border-10); + --ctr-editor-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-editor-button-icon-color: var(--sjs-layer-3-foreground-75); + --ctr-editor-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-button-group-item-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color: var(--sjs-layer-3-background-500); + --ctr-radio-button-border-color: var(--sjs-border-10); + --ctr-radio-button-border-width: var(--sjs-stroke-x1); + --ctr-checkbox-background-color: var(--sjs-layer-3-background-500); + --ctr-checkbox-border-color: var(--sjs-border-10); + --ctr-checkbox-border-width: var(--sjs-stroke-x1); + --ctr-checkbox-button-check-mark-color: var(--sjs-primary-background-500); + --ctr-radio-button-button-dot-color-default: var(--sjs-primary-background-500); + --ctr-radio-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-radio-button-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-radio-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-radio-button-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-radio-button-button-dot-color-disabled: var(--sjs-border-25); + --ctr-checkbox-border-width-focused: var(--sjs-stroke-x2); + --ctr-checkbox-border-color-focused: var(--sjs-primary-background-500); + --ctr-checkbox-button-check-mark-color-disabled: var(--sjs-border-25); + --ctr-checkbox-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-checkbox-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-checkbox-corner-radius: var(--sjs-corner-radius-x05); + --ctr-list-padding-left: var(--sjs-spacing-x1); + --ctr-list-padding-right: var(--sjs-spacing-x1); + --ctr-list-padding-bottom: var(--sjs-spacing-x1); + --ctr-list-padding-top: var(--sjs-spacing-x1); + --ctr-list-border-color: var(--sjs-border-25); + --ctr-actionbar-button-corner-radius: var(--sjs-corner-radius-x1); + --ctr-popup-menu-corner-radius: var(--sjs-corner-radius-x1); + --ctr-popup-menu-footer-padding-left: var(--sjs-spacing-x1); + --ctr-button-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-button-group-item-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-radio-button-border-color-selected: var(--sjs-border-25); + --ctr-radio-button-background-color-focused: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color-selected-hovered: var(--sjs-layer-1-background-500); + --ctr-radio-button-background-color-selected-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-selected: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-selected-hovered: var(--sjs-layer-1-background-500); + --ctr-checkbox-background-color-selected-focused: var(--sjs-layer-1-background-500); + --ctr-checkbox-border-color-selected: var(--sjs-border-25); + --ctr-radio-button-border-color-disabled: var(--sjs-border-10); + --ctr-checkbox-border-color-disabled: var(--sjs-border-10); + --ctr-button-group-corner-radius: var(--sjs-corner-radius-x075); + --ctr-button-group-padding: var(--sjs-spacing-x05); + --ctr-button-group-background-color: var(--sjs-layer-3-background-500); + --ctr-button-group-border-color: var(--sjs-border-10); + --ctr-button-group-border-width: var(--sjs-stroke-x1); + --ctr-button-group-item-border-width-selected: var(--sjs-stroke-x1); + --ctr-button-group-item-padding-horizontal: var(--sjs-spacing-x2); + --ctr-button-group-item-padding-vertical: var(--sjs-spacing-x1); + --ctr-button-group-background-color-disabled: var(--sjs-layer-1-background-500); + --ctr-button-group-border-color-focused: var(--sjs-primary-background-500); + --ctr-button-group-border-width-focused: var(--sjs-stroke-x2); + --ctr-button-group-item-text-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-survey-page-background-color-selected: var(--sjs-special-background); + --ctr-surface-background-color: var(--sjs-special-background); + --ctr-survey-question-panel-toolbar-item-corner-radius: var(--sjs-corner-radius-x075); + --ctr-popup-background-color: var(--sjs-layer-1-background-500); + --ctr-popup-corner-radius: var(--sjs-corner-radius-x2); + --ctr-shadow-large-color: var(--sjs-special-glow); + --ctr-shadow-medium-color: var(--sjs-special-glow); + --ctr-button-padding-horizontal: var(--sjs-spacing-x6); + --ctr-button-padding-vertical: var(--sjs-spacing-x2); + --ctr-button-contextual-button-margin-horizontal: var(--sjs-spacing-x1); + --ctr-button-contextual-button-margin-vertical: var(--sjs-spacing-x1); + --ctr-button-padding-horizontal-small: var(--sjs-spacing-x4); + --ctr-button-padding-vertical-small: var(--sjs-spacing-x150); + --ctr-button-corner-radius: var(--sjs-corner-radius-x075); + --ctr-button-corner-radius-small: var(--sjs-corner-radius-x075); + --ctr-list-item-icon-color: var(--sjs-primary-background-500); + --ctr-list-item-icon-color-selected: var(--sjs-primary-foreground-100); + --ctr-list-item-icon-color-disabled: var(--sjs-layer-1-foreground-75); + --ctr-editor-button-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-survey-page-toolbar-item-background-color-hovered: var(--sjs-primary-background-10); + --ctr-survey-page-toolbar-item-corner-radius: var(--sjs-corner-radius-x075); + --ctr-list-search-icon-color: var(--sjs-layer-1-foreground-75); + --ctr-caption-with-actions-text-color: var(--sjs-layer-1-foreground-50); + --ctr-label-text-color: var(--sjs-layer-1-foreground-50); + --ctr-label-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-caption-with-actions-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-radio-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-checkbox-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-button-group-item-background-color-selected-disabled: var(--sjs-layer-1-background-400); + --ctr-popup-haze-background-color: var(--sjs-special-haze); + --ctr-shadow-small-color: var(--sjs-special-shadow); + --ctr-shadow-x-large-color: var(--sjs-special-glow); + --ctr-actionbar-button-icon-color: var(--sjs-layer-1-foreground-75); + --ctr-actionbar-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-selected: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text-hovered: var(--sjs-primary-background-500); + --ctr-actionbar-button-icon-color-with-text-disabled: var(--sjs-layer-1-foreground-75); + --ctr-list-item-submenu-arrow-color: var(--sjs-layer-1-foreground-75); + --ctr-list-item-submenu-arrow-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-page-navigator-button-icon-color: var(--sjs-layer-3-foreground-75); + --ctr-page-navigator-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-list-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-tabs-padding-left: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-padding-bottom: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-tabs-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-tabs-border-color: var(--sjs-border-25); + --ctr-property-grid-tabs-separator-margin: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-gap: var(--sjs-spacing-x150); + --ctr-property-grid-border-color: var(--sjs-border-25); + --ctr-property-grid-border-width-left: var(--sjs-stroke-x1); + --ctr-property-grid-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-property-grid-placeholder-padding-top: var(--sjs-spacing-x12); + --ctr-property-grid-placeholder-image-margin-top: var(--sjs-spacing-x3); + --ctr-property-grid-placeholder-text-gap: var(--sjs-spacing-x1); + --ctr-property-grid-placeholder-text-title-color: var(--sjs-layer-1-foreground-100); + --ctr-property-grid-placeholder-text-description-color: var(--sjs-layer-1-foreground-50); + --ctr-surface-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-surface-placeholder-padding-bottom: var(--sjs-spacing-x16); + --ctr-surface-placeholder-text-margin-top: var(--sjs-spacing-x4); + --ctr-surface-placeholder-text-margin-bottom: var(--sjs-spacing-x6); + --ctr-surface-placeholder-text-gap: var(--sjs-spacing-x1); + --ctr-surface-placeholder-max-width: var(--sjs-size-x90); + --ctr-surface-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-property-grid-tabs-padding-right: var(--sjs-spacing-x150); + --ctr-property-grid-tabs-padding-top: var(--sjs-spacing-x150); + --ctr-property-grid-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-popup-menu-footer-padding-right: var(--sjs-spacing-x1); + --ctr-editor-content-text-color: var(--sjs-layer-3-foreground-100); + --ctr-editor-label-color: var(--sjs-layer-3-foreground-50); + --ctr-editor-content-icon-color: var(--sjs-layer-3-foreground-75); + --ctr-editor-content-text-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-editor-button-text-color: var(--sjs-layer-3-foreground-100); + --ctr-editor-label-color-disabled: var(--sjs-layer-3-foreground-100); + --ctr-editor-content-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-editor-content-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-editor-button-icon-color-disabled: var(--sjs-layer-3-foreground-75); + --ctr-radio-button-text-color: var(--sjs-layer-1-foreground-100); + --ctr-checkbox-text-color: var(--sjs-layer-1-foreground-100); + --ctr-checkbox-description-text-color: var(--sjs-layer-1-foreground-75); + --ctr-checkbox-description-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-actionbar-button-gap: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-left-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-right-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-bottom-large-icon: var(--sjs-spacing-x1); + --ctr-actionbar-button-text-color: var(--sjs-primary-background-500); + --ctr-actionbar-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-actionbar-button-padding-left-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-right-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-top-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-bottom-small-icon: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-left-medium-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-medium-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-top-medium-text: var(--sjs-spacing-x05); + --ctr-actionbar-button-padding-bottom-medium-text: var(--sjs-spacing-x05); + --ctr-actionbar-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-actionbar-button-border-color-selected: var(--sjs-primary-background-500); + --ctr-actionbar-button-border-width-selected: var(--sjs-stroke-x2); + --ctr-list-item-gap: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-left-large-icon-text: var(--sjs-spacing-x150); + --ctr-actionbar-button-padding-right-large-icon-text: var(--sjs-spacing-x2); + --ctr-list-item-padding-left: var(--sjs-spacing-x2); + --ctr-list-item-padding-right: var(--sjs-spacing-x2); + --ctr-list-item-padding-top: var(--sjs-spacing-x1); + --ctr-list-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-list-item-padding-right-submenu: var(--sjs-spacing-x1); + --ctr-list-item-padding-left-second-level: var(--sjs-spacing-x4); + --ctr-list-item-padding-bottom-with-icon: var(--sjs-spacing-x150); + --ctr-list-item-padding-top-with-icon: var(--sjs-spacing-x150); + --ctr-list-item-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-list-item-background-color-selected: var(--sjs-primary-background-500); + --ctr-list-item-text-color-selected: var(--sjs-primary-foreground-100); + --ctr-list-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-list-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-list-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-item-text-color-hovered: var(--sjs-layer-1-foreground-100); + --ctr-list-item-submenu-arrow-color-hovered-item: var(--sjs-layer-1-foreground-75); + --ctr-list-item-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-list-item-contextual-buttons-color: var(--sjs-layer-1-foreground-50); + --ctr-list-item-contextual-buttons-color-hovered: var(--sjs-primary-background-500); + --ctr-list-item-contextual-buttons-color-danger-hovered: var(--sjs-semantic-red-background-500); + --ctr-list-item-contextual-buttons-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-list-item-contextual-buttons-padding: var(--sjs-spacing-x05); + --ctr-list-item-submenu-arrow-padding: var(--sjs-spacing-x05); + --ctr-list-item-contextual-buttons-gap: var(--sjs-spacing-x1); + --ctr-list-item-color-swatch-color-primary: var(--sjs-primary-background-500); + --ctr-list-item-color-swatch-corner-radius: var(--sjs-corner-radius-x05); + --ctr-list-item-color-swatch-width: var(--sjs-spacing-x4); + --ctr-list-item-color-swatch-height: var(--sjs-spacing-x3); + --ctr-list-item-color-swatch-border-color: var(--sjs-border-25-overlay); + --ctr-list-item-color-swatch-border-width: var(--sjs-stroke-x1); + --ctr-list-item-color-swatch-border-color-selected-item: var(--sjs-primary-foreground-100); + --ctr-list-background-color: var(--sjs-layer-1-background-500); + --ctr-editor-color-swatch-background-color-primary: var(--sjs-primary-background-500); + --ctr-editor-color-swatch-corner-radius: var(--sjs-corner-radius-x0375); + --ctr-editor-color-swatch-border-color: var(--sjs-border-25-overlay); + --ctr-editor-color-swatch-border-width: var(--sjs-stroke-x1); + --ctr-editor-color-swatch-padding-horizontal: var(--sjs-spacing-x1); + --ctr-editor-color-swatch-padding-vertical: var(--sjs-spacing-x05); + --ctr-editor-button-padding-top: var(--sjs-spacing-x1); + --ctr-editor-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-button-padding-left: var(--sjs-spacing-x1); + --ctr-editor-button-padding-right: var(--sjs-spacing-x1); + --ctr-editor-button-gap: var(--sjs-spacing-x1); + --ctr-actionbar-button-icon-width-small: var(--sjs-size-x2); + --ctr-actionbar-button-icon-height-small: var(--sjs-size-x2); + --ctr-actionbar-button-icon-width: var(--sjs-size-x3); + --ctr-actionbar-button-icon-height: var(--sjs-size-x3); + --ctr-actionbar-button-drop-down-arrow-width: var(--sjs-size-x2); + --ctr-actionbar-button-drop-down-arrow-height: var(--sjs-size-x2); + --ctr-list-item-icon-width: var(--sjs-size-x3); + --ctr-list-item-icon-height: var(--sjs-size-x3); + --ctr-list-item-submenu-arrow-width: var(--sjs-size-x2); + --ctr-list-item-submenu-arrow-height: var(--sjs-size-x2); + --ctr-editor-color-swatch-icon-width: var(--sjs-size-x2); + --ctr-editor-color-swatch-icon-height: var(--sjs-size-x2); + --ctr-editor-content-icon-width: var(--sjs-size-x3); + --ctr-editor-content-icon-height: var(--sjs-size-x3); + --ctr-editor-button-icon-width: var(--sjs-size-x3); + --ctr-editor-button-icon-height: var(--sjs-size-x3); + --ctr-radio-button-button-width: var(--sjs-size-x3); + --ctr-radio-button-button-height: var(--sjs-size-x3); + --ctr-radio-button-button-dot-width: var(--sjs-size-x1); + --ctr-radio-button-button-dot-height: var(--sjs-size-x1); + --ctr-checkbox-button-width: var(--sjs-size-x3); + --ctr-checkbox-button-height: var(--sjs-size-x3); + --ctr-checkbox-link-color: var(--sjs-primary-background-500); + --ctr-button-group-item-icon-width: var(--sjs-size-x3); + --ctr-button-group-item-icon-height: var(--sjs-size-x3); + --ctr-menu-item-icon-width: var(--sjs-size-x3); + --ctr-menu-item-icon-height: var(--sjs-size-x3); + --ctr-menu-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-menu-item-padding-left: var(--sjs-spacing-x3); + --ctr-menu-item-gap: var(--sjs-spacing-x1); + --ctr-menu-item-background-color: var(--sjs-layer-1-background-500); + --ctr-menu-item-border-color-selected: var(--sjs-primary-background-500); + --ctr-menu-item-border-width-bottom-selected: var(--sjs-stroke-x2); + --ctr-menu-item-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-menu-background-color: var(--sjs-layer-1-background-500); + --ctr-menu-toolbar-button-text-color: var(--sjs-layer-1-foreground-100); + --ctr-menu-toolbar-button-icon-width: var(--sjs-size-x3); + --ctr-menu-toolbar-button-icon-height: var(--sjs-size-x3); + --ctr-menu-toolbar-button-padding-left: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-gap: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-padding-top: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-text-gap: var(--sjs-spacing-x05); + --ctr-menu-toolbar-button-text-color-secondary: var(--sjs-layer-1-foreground-50); + --ctr-menu-toolbar-button-text-color-selected: var(--sjs-primary-background-500); + --ctr-menu-toolbar-button-text-color-secondary-pressed: var(--sjs-layer-1-foreground-100); + --ctr-menu-toolbar-button-text-color-secondary-selected: var(--sjs-primary-background-500); + --ctr-menu-toolbar-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-menu-toolbar-button-background-color-pressed: var(--sjs-layer-1-background-400); + --ctr-menu-toolbar-button-text-color-secondary-disabled: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-icon-width: var(--sjs-size-x3); + --ctr-toolbox-item-icon-height: var(--sjs-size-x3); + --ctr-toolbox-item-background-color-hovered: var(--sjs-primary-background-10); + --ctr-toolbox-item-padding-left: var(--sjs-spacing-x150); + --ctr-toolbox-item-padding-right: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-item-gap: var(--sjs-spacing-x1); + --ctr-toolbox-item-corner-radius: var(--sjs-corner-radius-x1); + --ctr-toolbox-item-padding-right-no-text: var(--sjs-spacing-x1); + --ctr-toolbox-item-padding-left-rtl: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-right-rtl: var(--sjs-spacing-x150); + --ctr-toolbox-item-border-color-floating: var(--sjs-secondary-background-500); + --ctr-toolbox-item-border-width-floating: var(--sjs-stroke-x2); + --ctr-toolbox-button-icon-color-pressed: var(--sjs-primary-background-500); + --ctr-toolbox-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-toolbox-button-background-color-pressed: var(--sjs-primary-background-10); + --ctr-page-navigator-item-dot-radius-small: var(--sjs-size-x075); + --ctr-page-navigator-item-dot-radius-large: var(--sjs-size-x1); + --ctr-page-navigator-item-dot-border-width-selected: var(--sjs-stroke-x2); + --ctr-page-navigator-item-dot-border-color-selected: var(--sjs-layer-3-foreground-75); + --ctr-page-navigator-item-dot-color-hovered: var(--sjs-primary-background-500); + --ctr-page-navigator-item-dot-color-default: var(--sjs-layer-3-foreground-75); + --ctr-page-navigator-item-dot-color-selected: var(--sjs-special-background); + --ctr-page-navigator-item-dot-container-width: var(--sjs-size-x250); + --ctr-page-navigator-item-dot-container-height: var(--sjs-size-x250); + --ctr-page-navigator-item-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-page-navigator-item-text-color-hovered: var(--sjs-layer-1-foreground-100); + --ctr-page-navigator-item-padding-left-hovered: var(--sjs-spacing-x2); + --ctr-page-navigator-item-padding-right: var(--sjs-spacing-x150); + --ctr-page-navigator-item-padding-top: var(--sjs-spacing-x1); + --ctr-page-navigator-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-page-navigator-item-gap: var(--sjs-spacing-x1); + --ctr-page-navigator-item-corner-radius: var(--sjs-corner-radius-x075); + --ctr-page-navigator-item-padding-left: var(--sjs-spacing-x150); + --ctr-page-navigator-button-padding: var(--sjs-spacing-x125); + --ctr-page-navigator-button-icon-width: var(--sjs-size-x3); + --ctr-page-navigator-button-icon-height: var(--sjs-size-x3); + --ctr-page-navigator-button-corner-radius: var(--sjs-corner-radius-x1); + --ctr-page-navigator-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-page-navigator-button-background-color-pressed: var(--sjs-primary-background-10); + --ctr-page-navigator-button-icon-color-pressed: var(--sjs-primary-background-500); + --ctr-popup-menu-background-color: var(--sjs-layer-1-background-500); + --ctr-popup-menu-pointer-width: var(--sjs-size-x2); + --ctr-popup-menu-pointer-height: var(--sjs-size-x1); + --ctr-popup-menu-pointer-color: var(--sjs-layer-1-background-500); + --ctr-popup-menu-pointer-margin: var(--sjs-spacing-x4); + --ctr-button-background-color: var(--sjs-layer-1-background-500); + --ctr-button-text-color: var(--sjs-primary-background-500); + --ctr-button-gap: var(--sjs-spacing-x4); + --ctr-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-button-background-color-danger: var(--sjs-semantic-red-background-500); + --ctr-button-background-color-danger-hovered: var(--sjs-semantic-red-background-500); + --ctr-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-button-background-color-cta: var(--sjs-primary-background-500); + --ctr-button-background-color-cta-hovered: var(--sjs-primary-background-400); + --ctr-button-text-color-danger: var(--sjs-semantic-red-foreground-100); + --ctr-button-text-color-cta: var(--sjs-primary-foreground-100); + --ctr-button-text-color-danger-focused: var(--sjs-semantic-red-background-500); + --ctr-button-border-color-danger-focused: var(--sjs-semantic-red-background-500); + --ctr-collapse-button-icon-width: var(--sjs-size-x3); + --ctr-collapse-button-icon-height: var(--sjs-size-x3); + --ctr-collapse-button-padding: var(--sjs-spacing-x150); + --ctr-collapse-button-corner-radius: var(--sjs-corner-radius-x1); + --ctr-collapse-button-icon-color: var(--sjs-layer-3-foreground-75); + --ctr-collapse-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-collapse-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-property-grid-switcher-text-color: var(--sjs-layer-1-foreground-75); + --ctr-property-grid-switcher-gap: var(--sjs-spacing-x1); + --ctr-property-grid-switcher-toggle-button-background-color: var(--sjs-layer-3-background-500); + --ctr-property-grid-switcher-toggle-button-border-color: var(--sjs-border-25); + --ctr-property-grid-switcher-toggle-button-border-width: var(--sjs-stroke-x1); + --ctr-property-grid-switcher-toggle-button-padding-left: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-switcher-toggle-button-padding-top: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-padding-bottom: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-thumb-color: var(--sjs-layer-3-foreground-50); + --ctr-property-grid-switcher-toggle-button-thumb-width: var(--sjs-size-x1); + --ctr-property-grid-switcher-toggle-button-thumb-height: var(--sjs-size-x1); + --ctr-property-grid-switcher-toggle-button-thumb-corner-radius: var(--sjs-corner-radius-round); + --ctr-property-grid-switcher-toggle-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-property-grid-switcher-toggle-button-background-color-hovered: var(--sjs-layer-1-background-500); + --ctr-property-grid-switcher-toggle-button-background-color-checked: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-background-color-checked-focused: var(--sjs-primary-foreground-100); + --ctr-property-grid-switcher-toggle-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-property-grid-switcher-toggle-button-thumb-color-checked: var(--sjs-primary-foreground-100); + --ctr-property-grid-switcher-toggle-button-thumb-color-checked-focused: var(--sjs-primary-background-500); + --ctr-property-grid-switcher-toggle-button-padding-left-checked: var(--sjs-spacing-x2); + --ctr-property-grid-switcher-toggle-button-padding-right-checked: var(--sjs-spacing-x05); + --ctr-property-grid-switcher-toggle-button-thumb-color-focused: var(--sjs-primary-background-500); + --ctr-property-grid-chapter-caption-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-chapter-caption-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-chapter-caption-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-chapter-caption-border-color: var(--sjs-border-25); + --ctr-property-grid-chapter-caption-text-color: var(--sjs-layer-1-foreground-75); + --ctr-property-grid-chapter-caption-text-color-selected: var(--sjs-layer-1-foreground-100); + --ctr-property-grid-chapter-caption-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-property-grid-chapter-caption-background-color-focused: var(--sjs-layer-1-background-400); + --ctr-property-grid-chapter-caption-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-expression-item-padding-left: var(--sjs-spacing-x2); + --ctr-expression-item-background-color-parameter: var(--sjs-semantic-blue-background-10); + --ctr-expression-item-padding-right: var(--sjs-spacing-x2); + --ctr-expression-item-padding-top: var(--sjs-spacing-x1); + --ctr-expression-item-padding-bottom: var(--sjs-spacing-x1); + --ctr-expression-item-corner-radius: var(--sjs-corner-radius-x1); + --ctr-expression-item-text-color-parameter: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-background-color-parameter-hovered: var(--sjs-semantic-blue-background-500); + --ctr-expression-item-background-color-parameter-editing: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-parameter-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-border-width: var(--sjs-stroke-x2); + --ctr-expression-item-text-color-parameter-hovered: var(--sjs-semantic-blue-foreground-100); + --ctr-expression-item-text-color-parameter-editing: var(--sjs-layer-1-foreground-100); + --ctr-expression-item-text-color-parameter-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-parameter-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-operator-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-operator: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-operator-hovered: var(--sjs-semantic-yellow-foreground-100); + --ctr-expression-item-text-color-operator-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-conjunction: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-conjunction-hovered: var(--sjs-semantic-yellow-foreground-100); + --ctr-expression-item-text-color-conjunction-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-conjunction-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-action: var(--sjs-layer-3-foreground-100); + --ctr-expression-item-text-color-action-hovered: var(--sjs-semantic-red-foreground-100); + --ctr-expression-item-text-color-action-empty: var(--sjs-layer-3-foreground-50); + --ctr-expression-item-text-color-action-error: var(--sjs-semantic-red-background-500); + --ctr-expression-item-text-color-button: var(--sjs-primary-background-500); + --ctr-expression-item-text-color-button-hovered: var(--sjs-primary-foreground-100); + --ctr-expression-item-background-color-operator: var(--sjs-semantic-yellow-background-10); + --ctr-expression-item-background-color-operator-hovered: var(--sjs-semantic-yellow-background-500); + --ctr-expression-item-background-color-operator-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-conjunction: var(--sjs-semantic-yellow-background-10); + --ctr-expression-item-background-color-conjunction-hovered: var(--sjs-semantic-yellow-background-500); + --ctr-expression-item-background-color-conjunction-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-action: var(--sjs-semantic-red-background-10); + --ctr-expression-item-background-color-action-hovered: var(--sjs-semantic-red-background-500); + --ctr-expression-item-background-color-action-error: var(--sjs-layer-1-background-500); + --ctr-expression-item-background-color-button: var(--sjs-primary-background-10); + --ctr-expression-item-background-color-button-hovered: var(--sjs-primary-background-500); + --ctr-expression-item-border-color-editing: var(--sjs-semantic-blue-background-500); + --ctr-expression-item-text-color-function: var(--sjs-layer-3-foreground-100); + --ctr-data-table-background-color: var(--sjs-layer-1-background-400); + --ctr-data-table-border-color: var(--sjs-border-25); + --ctr-data-table-border-width: var(--sjs-stroke-x1); + --ctr-separator-width: var(--sjs-size-x0125); + --ctr-separator-color: var(--sjs-border-25); + --ctr-separator-margin-vertical-small: var(--sjs-spacing-x1); + --ctr-separator-margin-horizontal-small: var(--sjs-spacing-x1); + --ctr-separator-margin-vertical-medium: var(--sjs-spacing-x2); + --ctr-separator-margin-horizontal-medium: var(--sjs-spacing-x2); + --ctr-popup-padding-left: var(--sjs-spacing-x4); + --ctr-popup-padding-right: var(--sjs-spacing-x4); + --ctr-popup-padding-top: var(--sjs-spacing-x4); + --ctr-popup-padding-bottom: var(--sjs-spacing-x4); + --ctr-popup-gap: var(--sjs-spacing-x4); + --ctr-popup-title-color: var(--sjs-layer-1-foreground-100); + --ctr-popup-message-color: var(--sjs-layer-1-foreground-100); + --ctr-popup-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-popup-buttons-gap: var(--sjs-spacing-x2); + --ctr-popup-margin-left: var(--sjs-spacing-x4); + --ctr-popup-margin-right: var(--sjs-spacing-x4); + --ctr-popup-margin-top: var(--sjs-spacing-x4); + --ctr-popup-margin-bottom: var(--sjs-spacing-x8); + --ctr-popup-description-color: var(--sjs-layer-1-foreground-75); + --ctr-popup-margin-top-mobile: var(--sjs-spacing-x2); + --ctr-popup-padding-left-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-right-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-top-mobile: var(--sjs-spacing-x3); + --ctr-popup-padding-bottom-mobile: var(--sjs-spacing-x3); + --ctr-popup-corner-radius-mobile: var(--sjs-corner-radius-x2); + --ctr-popup-gap-mobile: var(--sjs-spacing-x3); + --ctr-toolbox-group-header-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-border-color: var(--sjs-border-25); + --ctr-toolbox-group-header-border-width-bottom: var(--sjs-stroke-x1); + --ctr-toolbox-group-header-text-color: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-group-header-expand-button-width: var(--sjs-size-x3); + --ctr-toolbox-group-header-expand-button-height: var(--sjs-size-x3); + --ctr-notification-background-color: var(--sjs-layer-1-background-500); + --ctr-notification-padding-left: var(--sjs-spacing-x2); + --ctr-notification-padding-right: var(--sjs-spacing-x2); + --ctr-notification-padding-top: var(--sjs-spacing-x1); + --ctr-notification-padding-bottom: var(--sjs-spacing-x1); + --ctr-notification-text-color: var(--sjs-layer-1-foreground-100); + --ctr-notification-corder-radius: var(--sjs-corner-radius-x05); + --ctr-notification-text-color-error: var(--sjs-semantic-red-foreground-100); + --ctr-notification-background-color-error: var(--sjs-semantic-red-background-500); + --ctr-string-table-row-padding-left: var(--sjs-spacing-x3); + --ctr-string-table-row-padding-right: var(--sjs-spacing-x3); + --ctr-string-table-row-padding-top: var(--sjs-spacing-x1); + --ctr-string-table-row-padding-bottom: var(--sjs-spacing-x1); + --ctr-string-table-row-gap: var(--sjs-spacing-x4); + --ctr-string-table-row-background-color: var(--sjs-layer-1-background-500); + --ctr-string-table-row-border-color: var(--sjs-border-10); + --ctr-string-table-row-border-width-bottom: var(--sjs-stroke-x1); + --ctr-string-table-row-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-string-table-row-text-color-title: var(--sjs-layer-1-foreground-100); + --ctr-string-table-row-expand-button-icon-width: var(--sjs-size-x2); + --ctr-string-table-row-expand-button-icon-height: var(--sjs-size-x2); + --ctr-string-table-row-expand-button-margin-right: var(--sjs-spacing-x1); + --ctr-string-table-row-expand-button-icon-color-default: var(--sjs-layer-1-foreground-75); + --ctr-string-table-header-background-color: var(--sjs-layer-3-background-500); + --ctr-string-table-header-text-color: var(--sjs-layer-3-foreground-75); + --ctr-string-table-group-header-background-color: var(--sjs-layer-2-background-500); + --ctr-string-table-group-header-text-color: var(--sjs-layer-2-foreground-75); + --ctr-string-table-row-margin-small: var(--sjs-spacing-x3); + --ctr-string-table-row-margin-medium: var(--sjs-spacing-x6); + --ctr-string-table-row-margin-large: var(--sjs-spacing-x9); + --ctr-text-decor-background-color-editing: var(--sjs-layer-1-background-500); + --ctr-text-decor-background-color-code: var(--sjs-secondary-background-10); + --ctr-text-decor-border-color: var(--sjs-border-25); + --ctr-text-decor-border-color-editing: var(--sjs-primary-background-500); + --ctr-text-decor-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-text-decor-text-color: var(--sjs-layer-1-foreground-100); + --ctr-text-decor-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-text-decor-text-color-limitation: var(--sjs-layer-1-foreground-50); + --ctr-text-decor-text-color-code: var(--sjs-layer-1-foreground-100); + --ctr-text-decor-border-width: var(--sjs-stroke-x2); + --ctr-text-decor-border-width-code: var(--sjs-stroke-x1); + --ctr-text-decor-padding-left: var(--sjs-spacing-x05); + --ctr-text-decor-padding-right: var(--sjs-spacing-x05); + --ctr-text-decor-padding-left-editing: var(--sjs-spacing-x1); + --ctr-text-decor-padding-right-editing: var(--sjs-spacing-x1); + --ctr-text-decor-padding-top-editing: var(--sjs-spacing-x05); + --ctr-text-decor-padding-bottom-editing: var(--sjs-spacing-x05); + --ctr-text-decor-gap: var(--sjs-spacing-x1); + --ctr-text-decor-padding-left-limitation: var(--sjs-spacing-x025); + --ctr-text-decor-padding-right-limitation: var(--sjs-spacing-x025); + --ctr-text-decor-corner-radius: var(--sjs-corner-radius-x0375); + --ctr-text-decor-border-color-code: var(--sjs-secondary-background-25); + --ctr-menu-border-color: var(--sjs-border-25); + --ctr-menu-border-width: var(--sjs-stroke-x1); + --ctr-menu-toolbar-gap: var(--sjs-spacing-x2); + --ctr-menu-toolbar-padding-horizontal: var(--sjs-spacing-x2); + --ctr-menu-toolbar-padding-vertical: var(--sjs-spacing-x150); + --ctr-menu-toolbar-padding-vertical-mobile: var(--sjs-spacing-x05); + --ctr-menu-toolbar-separator-height: var(--sjs-size-x3); + --ctr-popup-menu-footer-padding-top: var(--sjs-spacing-x05); + --ctr-popup-menu-footer-padding-bottom: var(--sjs-spacing-x05); + --ctr-popup-menu-footer-background-color: var(--sjs-layer-3-background-500); + --ctr-popup-menu-footer-border-color: var(--sjs-border-25); + --ctr-popup-menu-footer-border-width-top: var(--sjs-stroke-x1); + --ctr-property-grid-header-background-color: var(--sjs-layer-1-background-500); + --ctr-property-grid-header-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-header-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-header-padding-top: var(--sjs-spacing-x150); + --ctr-property-grid-header-padding-bottom: var(--sjs-spacing-x150); + --ctr-property-grid-header-border-color: var(--sjs-primary-background-500); + --ctr-property-grid-header-border-width-bottom: var(--sjs-stroke-x2); + --ctr-caption-with-actions-padding-right: var(--sjs-spacing-x0125); + --ctr-caption-with-actions-description-button-margin-left: var(--sjs-spacing-x05); + --ctr-caption-with-actions-description-text-color: var(--sjs-layer-1-foreground-50); + --ctr-caption-with-actions-description-padding-bottom: var(--sjs-spacing-x2); + --ctr-caption-with-actions-description-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-padding-left: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-right: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-top: var(--sjs-spacing-x1); + --ctr-data-table-cell-padding-bottom: var(--sjs-spacing-x1); + --ctr-data-table-cell-gap: var(--sjs-spacing-x1); + --ctr-data-table-cell-text-color: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-drop-down-arrow-color: var(--sjs-layer-1-foreground-50); + --ctr-data-table-cell-drop-down-arrow-width: var(--sjs-size-x2); + --ctr-data-table-cell-drop-down-arrow-height: var(--sjs-size-x2); + --ctr-data-table-cell-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-data-table-cell-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-text-color-header: var(--sjs-layer-3-foreground-50); + --ctr-data-table-cell-drop-down-arrow-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-border-width-focused: var(--sjs-stroke-x2); + --ctr-data-table-cell-border-color-focused: var(--sjs-primary-background-500); + --ctr-data-table-cell-corner-radius-focused: var(--sjs-corner-radius-x075); + --ctr-data-table-row-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-row-background-color-header: var(--sjs-layer-3-background-500); + --ctr-data-table-row-border-color: var(--sjs-border-10); + --ctr-data-table-row-border-width: var(--sjs-stroke-x1); + --ctr-data-table-row-padding-top: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-bottom: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-right: var(--sjs-spacing-x05); + --ctr-data-table-row-drag-area-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-data-table-row-drag-area-icon-width: var(--sjs-size-x3); + --ctr-data-table-row-drag-area-icon-height: var(--sjs-size-x3); + --ctr-data-table-row-drag-area-padding-left: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-right: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-top: var(--sjs-spacing-x1); + --ctr-data-table-row-drag-area-padding-bottom: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-left-header: var(--sjs-spacing-x5); + --ctr-data-table-row-padding-right-header: var(--sjs-spacing-x05); + --ctr-data-table-row-padding-top-header: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-bottom-header: var(--sjs-spacing-x1); + --ctr-data-table-row-padding-left-no-drag: var(--sjs-spacing-x1); + --ctr-data-table-row-background-color-drop-spot: var(--sjs-layer-1-background-400); + --ctr-string-table-row-text-color: var(--sjs-layer-1-foreground-100); + --ctr-string-table-title-background-color: var(--sjs-layer-1-background-500); + --ctr-string-table-title-border-color: var(--sjs-border-10); + --ctr-string-table-title-border-width-bottom: var(--sjs-stroke-x1); + --ctr-string-table-title-padding-left: var(--sjs-spacing-x3); + --ctr-string-table-title-padding-right: var(--sjs-spacing-x3); + --ctr-string-table-title-padding-top: var(--sjs-spacing-x2); + --ctr-string-table-title-padding-bottom: var(--sjs-spacing-x2); + --ctr-string-table-corner-radius: var(--sjs-corner-radius-x05); + --ctr-string-table-title-actionbar-gap: var(--sjs-spacing-x1); + --ctr-string-table-title-caption-color: var(--sjs-layer-1-foreground-50); + --ctr-string-table-title-caption-padding-vert: var(--sjs-spacing-x1); + --ctr-string-table-title-padding-left-actions: var(--sjs-spacing-x2); + --ctr-string-table-title-padding-right-actions: var(--sjs-spacing-x2); + --ctr-error-message-background-color: var(--sjs-semantic-red-background-10); + --ctr-error-message-corner-radius: var(--sjs-corner-radius-x05); + --ctr-error-message-gap: var(--sjs-spacing-x1); + --ctr-error-message-padding-left: var(--sjs-spacing-x150); + --ctr-error-message-padding-right: var(--sjs-spacing-x150); + --ctr-error-message-padding-top: var(--sjs-spacing-x1); + --ctr-error-message-padding-bottom: var(--sjs-spacing-x1); + --ctr-error-message-icon-width: var(--sjs-size-x3); + --ctr-error-message-icon-height: var(--sjs-size-x3); + --ctr-error-message-icon-color: var(--sjs-semantic-red-background-500); + --ctr-error-message-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-item-contextual-buttons-width: var(--sjs-size-x2); + --ctr-list-item-contextual-buttons-height: var(--sjs-size-x2); + --ctr-toolbox-separator-color: var(--sjs-border-25); + --ctr-toolbox-separator-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-separator-height: var(--sjs-size-x0125); + --ctr-toolbox-separator-max-width: var(--sjs-size-max); + --ctr-toolbox-separator-padding-left: var(--sjs-spacing-x2); + --ctr-toolbox-separator-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-gap: var(--sjs-spacing-x05); + --ctr-toolbox-padding-top: var(--sjs-spacing-x150); + --ctr-toolbox-padding-bottom: var(--sjs-spacing-x2); + --ctr-toolbox-group-gap: var(--sjs-spacing-x05); + --ctr-toolbox-group-padding-left: var(--sjs-spacing-x150); + --ctr-toolbox-group-padding-right: var(--sjs-spacing-x150); + --ctr-button-contextual-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-button-contextual-button-padding-left: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-right: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-top: var(--sjs-spacing-x1); + --ctr-button-contextual-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-button-contextual-button-background-color-hovered: var(--sjs-layer-3-background-500); + --ctr-button-contextual-button-icon-width: var(--sjs-size-x3); + --ctr-button-contextual-button-icon-height: var(--sjs-size-x3); + --ctr-button-contextual-button-background-color-focused: var(--sjs-primary-background-10); + --lbr-contextual-button-background-color: var(--sjs-layer-1-background-500); + --lbr-contextual-button-width: var(--sjs-size-x6); + --lbr-contextual-button-height: var(--sjs-size-x6); + --lbr-contextual-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-contextual-button-padding-left: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-right: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-top: var(--sjs-spacing-x150); + --lbr-contextual-button-padding-bottom: var(--sjs-spacing-x150); + --lbr-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-contextual-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-contextual-button-border-width: var(--sjs-stroke-x1); + --lbr-contextual-button-border-color: var(--sjs-border-25); + --lbr-contextual-button-border-color-hovered-positive: var(--sjs-primary-background-500); + --lbr-contextual-button-width-small: var(--sjs-size-x4); + --lbr-contextual-button-height-small: var(--sjs-size-x4); + --lbr-contextual-button-padding-left-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-right-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-top-small: var(--sjs-spacing-x1); + --lbr-contextual-button-padding-bottom-small: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-gap: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-left: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-right: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-survey-question-panel-toolbar-item-icon-container-width: var(--sjs-size-x3); + --ctr-survey-question-panel-toolbar-item-icon-container-height: var(--sjs-size-x3); + --ctr-survey-question-panel-toolbar-item-icon-padding-left: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-right: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-toolbar-item-icon-color: var(--sjs-secondary-background-500); + --ctr-survey-question-panel-toolbar-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-question-panel-toolbar-item-background-color-selected: var(--sjs-secondary-background-10); + --ctr-survey-question-panel-toolbar-item-icon-color-pressed: var(--sjs-layer-1-foreground-50); + --ctr-survey-page-toolbar-item-icon-color-pressed: var(--sjs-layer-3-foreground-50); + --ctr-survey-page-toolbar-item-text-color: var(--sjs-layer-3-foreground-100); + --ctr-survey-question-panel-toolbar-item-padding-left-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-right-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-top-with-text: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-padding-bottom-with-text: var(--sjs-spacing-x1); + --ctr-survey-page-toolbar-item-background-color-selected: var(--sjs-primary-background-10); + --ctr-survey-question-panel-drag-area-padding-left: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-right: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-top: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-drag-indicator-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-question-panel-drag-area-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-question-panel-drag-area-drag-indicator-height: var(--sjs-size-x2); + --ctr-survey-question-panel-drag-area-expand-button-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-question-panel-drag-area-padding-top-mobile: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-bottom-mobile: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-top-with-buttons: var(--sjs-spacing-x05); + --ctr-survey-question-panel-drag-area-padding-bottom-with-buttons: var(--sjs-spacing-x05); + --ctr-preview-pager-background-color: var(--sjs-layer-1-background-500); + --ctr-preview-pager-border-color: var(--sjs-border-25); + --ctr-preview-pager-border-width-top: var(--sjs-stroke-x1); + --ctr-preview-pager-padding-top: var(--sjs-spacing-x1); + --ctr-preview-pager-padding-bottom: var(--sjs-spacing-x1); + --ctr-preview-pager-gap: var(--sjs-spacing-x1); + --ctr-survey-question-panel-toolbar-item-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-code-viewer-code-error-row-background-color: var(--sjs-semantic-red-background-10); + --ctr-code-viewer-code-error-row-border-color: var(--sjs-border-25); + --ctr-code-viewer-code-error-row-border-width-top: var(--sjs-stroke-x1); + --ctr-code-viewer-code-error-row-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-code-error-row-padding-right: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-padding-top: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-padding-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-gap: var(--sjs-spacing-x2); + --ctr-code-viewer-code-error-row-icon-width: var(--sjs-size-x2); + --ctr-code-viewer-code-error-row-icon-height: var(--sjs-size-x2); + --ctr-code-viewer-code-error-row-icon-color: var(--sjs-semantic-red-background-500); + --ctr-code-viewer-code-error-row-text-color: var(--sjs-layer-1-foreground-100); + --ctr-code-viewer-code-error-row-fix-button-background-color: var(--sjs-layer-1-background-500); + --ctr-code-viewer-code-error-row-fix-button-padding-left: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-fix-button-padding-right: var(--sjs-spacing-x1); + --ctr-code-viewer-code-error-row-fix-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-code-viewer-code-error-row-fix-button-icon-width: var(--sjs-size-x3); + --ctr-code-viewer-code-error-row-fix-button-icon-height: var(--sjs-size-x3); + --ctr-code-viewer-code-error-row-fix-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-code-viewer-code-error-row-fix-button-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-code-viewer-background-color: var(--sjs-layer-1-background-500); + --ctr-code-viewer-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-code-viewer-title-color: var(--sjs-layer-3-foreground-100); + --ctr-code-viewer-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-right: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-top: var(--sjs-spacing-x2); + --ctr-code-viewer-padding-bottom: var(--sjs-spacing-x2); + --ctr-code-viewer-corner-radius: var(--sjs-corner-radius-x05); + --ctr-code-viewer-text-color: var(--sjs-code-gray-300); + --ctr-code-viewer-text-margin-left: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-right: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-top: var(--sjs-spacing-x1); + --ctr-code-viewer-text-margin-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-background-color: var(--sjs-layer-2-background-500); + --ctr-code-viewer-line-number-panel-width: var(--sjs-size-x8); + --ctr-code-viewer-line-number-panel-padding-left: var(--sjs-spacing-x2); + --ctr-code-viewer-line-number-panel-padding-right: var(--sjs-spacing-x2); + --ctr-code-viewer-line-number-panel-padding-top: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-padding-bottom: var(--sjs-spacing-x1); + --ctr-code-viewer-line-number-panel-text-color: var(--sjs-layer-2-foreground-50); + --ctr-data-table-cell-smiley-width: var(--sjs-size-x3); + --ctr-data-table-cell-smiley-height: var(--sjs-size-x3); + --ctr-data-table-cell-smiley-corner-radius: var(--sjs-corner-radius-round); + --ctr-data-table-cell-smiley-padding: var(--sjs-spacing-x075); + --ctr-data-table-cell-smiley-color: var(--sjs-layer-1-foreground-100); + --ctr-data-table-cell-smiley-stroke-width: var(--sjs-stroke-x1); + --ctr-property-grid-group-caption-padding-left: var(--sjs-spacing-x4); + --ctr-property-grid-group-caption-padding-right: var(--sjs-spacing-x4); + --ctr-property-grid-group-caption-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-group-caption-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-group-caption-border-color: var(--sjs-border-25); + --ctr-property-grid-group-caption-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-group-caption-text-color: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-group-header-expand-button-color: var(--sjs-layer-1-foreground-75); + --lbr-question-panel-background-color: var(--sjs-layer-1-background-500); + --ctr-label-padding-top: var(--sjs-spacing-x1); + --ctr-label-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-padding-left: var(--sjs-spacing-x05); + --ctr-editor-padding-right: var(--sjs-spacing-x05); + --ctr-editor-padding-top: var(--sjs-spacing-x05); + --ctr-editor-padding-bottom: var(--sjs-spacing-x05); + --ctr-editor-gap: var(--sjs-spacing-x05); + --ctr-editor-border-width: var(--sjs-stroke-x1); + --ctr-editor-content-margin-left: var(--sjs-spacing-x150); + --ctr-editor-content-margin-right: var(--sjs-spacing-x150); + --ctr-editor-content-margin-top: var(--sjs-spacing-x1); + --ctr-editor-content-margin-bottom: var(--sjs-spacing-x1); + --ctr-editor-content-gap: var(--sjs-spacing-x1); + --ctr-editor-color-swatch-margin-left: var(--sjs-spacing-x150); + --ctr-editor-label-padding-left: var(--sjs-spacing-x150); + --ctr-editor-label-padding-right: var(--sjs-spacing-x2); + --ctr-editor-label-padding-top: var(--sjs-spacing-x1); + --ctr-editor-label-padding-bottom: var(--sjs-spacing-x1); + --ctr-editor-label-separator-width: var(--sjs-stroke-x1); + --ctr-editor-label-separator-color: var(--sjs-border-10); + --ctr-editor-limit-label-padding-left: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-right: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-top: var(--sjs-spacing-x150); + --ctr-editor-limit-label-padding-bottom: var(--sjs-spacing-x150); + --ctr-editor-buttons-gap: var(--sjs-spacing-x05); + --ctr-editor-border-width-focused: var(--sjs-stroke-x2); + --ctr-editor-border-color-focused: var(--sjs-primary-background-500); + --ctr-editor-border-color-error: var(--sjs-semantic-red-background-500); + --ctr-editor-error-margin: var(--sjs-spacing-x1); + --ctr-checkbox-list-gap-vertical: var(--sjs-spacing-x2); + --ctr-checkbox-list-gap-horizontal: var(--sjs-spacing-x4); + --ctr-surface-placeholder-text-title-color: var(--sjs-layer-3-foreground-100); + --ctr-surface-placeholder-text-description-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-page-placeholder-border-color: var(--sjs-border-25); + --ctr-survey-page-placeholder-border-width: var(--sjs-stroke-x1); + --ctr-survey-page-placeholder-padding-left: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-right: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-padding-bottom: var(--sjs-spacing-x6); + --ctr-survey-page-placeholder-text-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-page-placeholder-gap: var(--sjs-spacing-x4); + --ctr-surface-placeholder-padding-top-completed: var(--sjs-spacing-x6); + --ctr-surface-placeholder-padding-bottom-completed: var(--sjs-spacing-x6); + --ctr-surface-placeholder-gap: var(--sjs-spacing-x4); + --ctr-data-table-placeholder-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-placeholder-gap: var(--sjs-spacing-x05); + --ctr-data-table-placeholder-padding-left: var(--sjs-spacing-x8); + --ctr-data-table-placeholder-padding-right: var(--sjs-spacing-x8); + --ctr-data-table-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-data-table-placeholder-padding-bottom: var(--sjs-spacing-x6); + --ctr-data-table-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-placeholder-gap: var(--sjs-spacing-x05); + --ctr-survey-placeholder-padding-left: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-right: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-top-with-button: var(--sjs-spacing-x8); + --ctr-survey-placeholder-padding-bottom-with-button: var(--sjs-spacing-x6); + --ctr-survey-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-placeholder-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-placeholder-border-color: var(--sjs-border-25); + --ctr-survey-placeholder-border-width: var(--sjs-stroke-x1); + --ctr-survey-drop-indicator-color: var(--sjs-primary-background-500); + --ctr-survey-drop-indicator-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-drop-indicator-width: var(--sjs-size-x025); + --ctr-search-background-color: var(--sjs-layer-1-background-500); + --ctr-search-corner-radius: var(--sjs-corner-radius-round); + --ctr-search-padding-left: var(--sjs-spacing-x2); + --ctr-search-padding-right: var(--sjs-spacing-x2); + --ctr-search-padding-top: var(--sjs-spacing-x150); + --ctr-search-padding-bottom: var(--sjs-spacing-x150); + --ctr-search-text-color: var(--sjs-layer-1-foreground-100); + --ctr-search-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-property-grid-search-background-color: var(--sjs-layer-3-background-500); + --ctr-property-grid-search-padding-left: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-right: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-search-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-search-text-color: var(--sjs-layer-3-foreground-100); + --ctr-property-grid-search-text-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-search-toolbar-gap: var(--sjs-spacing-x05); + --ctr-search-text-margin: var(--sjs-spacing-x05); + --ctr-property-grid-search-border-color: var(--sjs-border-10); + --ctr-property-grid-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-property-grid-search-gap: var(--sjs-spacing-x1); + --ctr-search-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-search-button-padding-vertical: var(--sjs-spacing-x05); + --ctr-search-button-padding-horizontal: var(--sjs-spacing-x05); + --ctr-search-button-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-search-button-icon-width: var(--sjs-size-x2); + --ctr-search-button-icon-height: var(--sjs-size-x2); + --ctr-search-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-search-button-icon-color-clear-hovered: var(--sjs-semantic-red-background-500); + --ctr-search-button-background-color-clear-hovered: var(--sjs-semantic-red-background-10); + --ctr-property-grid-search-button-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-property-grid-search-button-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-property-grid-search-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-search-count-text-color: var(--sjs-layer-1-foreground-50); + --ctr-search-count-text-margin-right: var(--sjs-spacing-x1); + --ctr-property-grid-search-count-text-color: var(--sjs-layer-3-foreground-50); + --ctr-scrollbar-background-color: var(--sjs-border-10); + --ctr-scrollbar-corner-radius: var(--sjs-corner-radius-round); + --ctr-scrollbar-padding-horizontal: var(--sjs-spacing-x05); + --ctr-scrollbar-padding-vertical: var(--sjs-spacing-x05); + --ctr-scrollbar-width: var(--sjs-size-x150); + --ctr-survey-question-panel-toolbar-gap: var(--sjs-spacing-x1); + --ctr-survey-info-panel-background-color: var(--sjs-layer-2-background-500); + --ctr-survey-info-panel-padding-left: var(--sjs-spacing-x8); + --ctr-survey-info-panel-padding-right: var(--sjs-spacing-x8); + --ctr-survey-info-panel-padding-top: var(--sjs-spacing-x4); + --ctr-survey-info-panel-padding-bottom: var(--sjs-spacing-x4); + --ctr-survey-info-panel-corner-radius: var(--sjs-corner-radius-x1); + --ctr-survey-info-panel-gap: var(--sjs-spacing-x05); + --ctr-survey-info-panel-text-color: var(--sjs-layer-2-foreground-50); + --ctr-survey-info-panel-padding-bottom-with-button: var(--sjs-spacing-x2); + --ctr-survey-info-panel-padding-left-small: var(--sjs-spacing-x3); + --ctr-survey-info-panel-padding-right-small: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-left: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-right: var(--sjs-spacing-x3); + --ctr-survey-action-button-padding-top: var(--sjs-spacing-x1); + --ctr-survey-action-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-action-button-gap: var(--sjs-spacing-x1); + --ctr-survey-action-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-action-button-icon-width: var(--sjs-size-x3); + --ctr-survey-action-button-icon-height: var(--sjs-size-x3); + --ctr-survey-action-button-icon-width-small: var(--sjs-size-x2); + --ctr-survey-action-button-icon-height-small: var(--sjs-size-x2); + --ctr-survey-action-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-action-button-icon-color-positive: var(--sjs-primary-background-500); + --ctr-survey-action-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-action-button-text-color-positive: var(--sjs-primary-background-500); + --ctr-survey-action-button-text-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-action-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-survey-action-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --ctr-survey-action-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-survey-action-button-icon-color-disabled: var(--sjs-layer-1-foreground-50); + --ctr-survey-action-button-padding-left-with-icon: var(--sjs-spacing-x2); + --ctr-survey-action-button-padding-left-icon-only: var(--sjs-spacing-x1); + --ctr-survey-action-button-padding-right-icon-only: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-contextual-button-width: var(--sjs-size-x6); + --ctr-survey-contextual-button-height: var(--sjs-size-x6); + --ctr-survey-contextual-button-width-small: var(--sjs-size-x4); + --ctr-survey-contextual-button-height-small: var(--sjs-size-x4); + --ctr-survey-contextual-button-padding-left: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-left-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-right: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-right-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-top: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-top-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-padding-bottom: var(--sjs-spacing-x150); + --ctr-survey-contextual-button-padding-bottom-small: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-contextual-button-border-width: var(--sjs-stroke-x1); + --ctr-survey-contextual-button-border-color: var(--sjs-border-25); + --ctr-survey-contextual-button-border-color-hovered-positive: var(--sjs-primary-background-500); + --ctr-survey-contextual-button-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-contextual-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-contextual-button-width-large: var(--sjs-size-x8); + --lbr-contextual-button-height-large: var(--sjs-size-x8); + --lbr-contextual-button-padding-left-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-right-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-top-large: var(--sjs-spacing-x2); + --lbr-contextual-button-padding-bottom-large: var(--sjs-spacing-x2); + --lbr-contextual-button-background-color-camera: var(--sjs-semantic-red-background-500); + --lbr-contextual-button-icon-color-camera: var(--sjs-semantic-red-foreground-100); + --lbr-contextual-button-border-width-hovered-camera: var(--sjs-stroke-x2); + --lbr-contextual-button-border-color-hovered-camera: var(--sjs-semantic-red-background-500); + --lbr-action-button-padding-left: var(--sjs-spacing-x3); + --lbr-action-button-padding-left-icon-only: var(--sjs-spacing-x1); + --lbr-action-button-padding-left-with-icon: var(--sjs-spacing-x2); + --lbr-action-button-padding-right: var(--sjs-spacing-x3); + --lbr-action-button-padding-right-icon-only: var(--sjs-spacing-x1); + --lbr-action-button-padding-top: var(--sjs-spacing-x1); + --lbr-action-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-action-button-gap: var(--sjs-spacing-x1); + --lbr-action-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-action-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-action-button-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-action-button-icon-color-positive: var(--sjs-primary-background-500); + --lbr-action-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --lbr-action-button-text-color-positive: var(--sjs-primary-background-500); + --lbr-action-button-text-color-negative: var(--sjs-semantic-red-background-500); + --lbr-action-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-action-button-background-color-hovered-positive: var(--sjs-primary-background-10); + --lbr-action-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-survey-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --ctr-survey-placeholder-border-color-hovered: var(--sjs-primary-background-500); + --ctr-survey-placeholder-border-width-hovered: var(--sjs-stroke-x2); + --ctr-survey-info-panel-icon-color: var(--sjs-primary-background-500); + --ctr-string-table-footer-text-color: var(--sjs-layer-3-foreground-50); + --ctr-string-table-footer-padding-top: var(--sjs-spacing-x2); + --ctr-string-table-footer-padding-bottom: var(--sjs-spacing-x2); + --ctr-property-grid-background-color: var(--sjs-layer-1-background-500); + --lbr-tag-box-item-remove-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-tag-box-item-remove-button-padding: var(--sjs-spacing-x05); + --lbr-tag-box-item-remove-button-icon-color: var(--sjs-primary-foreground-100); + --lbr-tag-box-item-remove-button-background-color-hovered: var(--sjs-primary-foreground-25); + --lbr-popup-menu-search-background-color: var(--sjs-layer-1-background-500); + --lbr-popup-menu-search-padding-left: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-right: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-top: var(--sjs-spacing-x2); + --lbr-popup-menu-search-padding-bottom: var(--sjs-spacing-x2); + --lbr-popup-menu-search-clear-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-popup-menu-search-text-color: var(--sjs-layer-1-foreground-100); + --lbr-popup-menu-search-clear-button-padding-horizontal: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-popup-menu-search-clear-button-padding-vertical: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-popup-menu-search-text-margin: var(--sjs-spacing-x05); + --lbr-popup-menu-search-clear-button-background-color-hovered: var(--sjs-semantic-red-background-10); + --lbr-popup-menu-search-border-color: var(--sjs-border-10); + --lbr-popup-menu-search-border-width-bottom: var(--sjs-stroke-x1); + --lbr-popup-menu-search-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-popup-menu-search-icon-margin-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-icon-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-logo-placeholder-icon-width: var(--sjs-size-x6); + --ctr-survey-header-logo-placeholder-icon-height: var(--sjs-size-x6); + --lbr-separator-color: var(--sjs-border-25); + --lbr-separator-margin-vertical-small: var(--sjs-spacing-x1); + --lbr-separator-margin-horizontal-small: var(--sjs-spacing-x1); + --lbr-separator-margin-vertical-medium: var(--sjs-spacing-x2); + --lbr-separator-margin-horizontal-medium: var(--sjs-spacing-x2); + --lbr-tooltip-padding-left: var(--sjs-spacing-x2); + --lbr-tooltip-padding-right: var(--sjs-spacing-x2); + --lbr-tooltip-padding-top: var(--sjs-spacing-x1); + --lbr-tooltip-padding-bottom: var(--sjs-spacing-x1); + --lbr-tooltip-corder-radius: var(--sjs-corner-radius-x05); + --lbr-tooltip-text-color: var(--sjs-layer-1-foreground-100); + --lbr-tooltip-text-color-error: var(--sjs-semantic-red-foreground-100); + --lbr-tooltip-background-color: var(--sjs-layer-1-background-500); + --lbr-tooltip-background-color-error: var(--sjs-semantic-red-background-500); + --lbr-notification-padding-left: var(--sjs-spacing-x2); + --lbr-notification-padding-right: var(--sjs-spacing-x2); + --lbr-notification-padding-top: var(--sjs-spacing-x3); + --lbr-notification-padding-bottom: var(--sjs-spacing-x3); + --lbr-notification-corder-radius: var(--sjs-corner-radius-x1); + --lbr-notification-text-color: var(--sjs-layer-1-foreground-100); + --lbr-notification-text-color-error: var(--sjs-semantic-red-foreground-100); + --lbr-notification-background-color: var(--sjs-layer-1-background-500); + --lbr-notification-background-color-error: var(--sjs-semantic-red-background-500); + --lbr-notification-gap: var(--sjs-spacing-x6); + --lbr-notification-text-color-success: var(--sjs-semantic-green-foreground-100); + --lbr-notification-background-color-success: var(--sjs-semantic-green-background-500); + --lbr-notification-button-border-width: var(--sjs-stroke-x2); + --lbr-notification-button-corner-radius: var(--sjs-corner-radius-x1); + --lbr-notification-button-padding-left: var(--sjs-spacing-x3); + --lbr-notification-button-padding-right: var(--sjs-spacing-x3); + --lbr-notification-button-padding-top: var(--sjs-spacing-x1); + --lbr-notification-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-notification-padding-right-with-button: var(--sjs-spacing-x2); + --lbr-notification-padding-left-with-button: var(--sjs-spacing-x2); + --lbr-notification-padding-top-with-button: var(--sjs-spacing-x3); + --lbr-notification-padding-bottom-with-button: var(--sjs-spacing-x3); + --ctr-survey-placeholder-padding-top: var(--sjs-spacing-x6); + --ctr-survey-placeholder-padding-bottom: var(--sjs-spacing-x8); + --ctr-survey-placeholder-loading-width: var(--sjs-size-x6); + --ctr-survey-placeholder-loading-height: var(--sjs-size-x6); + --ctr-survey-placeholder-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-placeholder-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-image-background-color-no-image: var(--sjs-layer-2-background-500); + --ctr-survey-image-no-image-icon-color: var(--sjs-layer-2-foreground-50); + --ctr-survey-image-no-image-icon-width: var(--sjs-size-x6); + --ctr-survey-image-no-image-icon-height: var(--sjs-size-x6); + --ctr-survey-image-picker-item-border-width-placeholder: var(--sjs-stroke-x1); + --ctr-survey-image-picker-item-border-color-placeholder: var(--sjs-border-25); + --ctr-survey-image-picker-item-border-color-hovered-placeholder: var(--sjs-primary-background-500); + --ctr-survey-image-picker-item-border-width-hovered-placeholder: var(--sjs-stroke-x2); + --ctr-survey-image-picker-item-background-color-hovered-placeholder: var(--sjs-primary-background-10); + --ctr-survey-image-picker-item-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-image-picker-item-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-image-picker-item-no-image-icon-color: var(--sjs-layer-2-foreground-50); + --ctr-survey-image-picker-item-background-color-no-image: var(--sjs-layer-2-background-500); + --ctr-survey-image-picker-drop-spot-color: var(--sjs-layer-2-background-500); + --ctr-survey-image-picker-dragging-panel-corner-radius: var(--sjs-corner-radius-x1); + --ctr-survey-image-picker-dragging-panel-padding: var(--sjs-spacing-x05); + --ctr-survey-image-picker-dragging-panel-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-row-corner-radius-floating: var(--sjs-corner-radius-x05); + --ctr-survey-item-actionbar-sort-indicator-color: var(--sjs-primary-background-500); + --ctr-survey-item-actionbar-drag-indicator-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-item-actionbar-drag-indicator-padding-left: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-drag-indicator-padding-right: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-drag-indicator-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-drag-indicator-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-item-actionbar-drag-indicator-height: var(--sjs-size-x3); + --ctr-survey-item-actionbar-sort-indicator-padding-left: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-sort-indicator-padding-right: var(--sjs-spacing-x1); + --ctr-survey-item-actionbar-sort-indicator-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-sort-indicator-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-sort-indicator-width: var(--sjs-size-x3); + --ctr-survey-item-actionbar-sort-indicator-height: var(--sjs-size-x3); + --ctr-actionbar-button-padding-bottom-large-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-top-large-icon-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-bottom-large-icon-text: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-left-large-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-large-text: var(--sjs-spacing-x2); + --ctr-actionbar-button-padding-right-medium-text-drop-down: var(--sjs-spacing-x1); + --ctr-actionbar-button-padding-right-large-text-drop-down: var(--sjs-spacing-x150); + --ctr-string-table-title-caption-color-secondary: var(--sjs-layer-1-foreground-50); + --ctr-string-table-title-caption-gap: var(--sjs-spacing-x05); + --ctr-property-grid-form-padding-left: var(--sjs-spacing-x4); + --ctr-property-grid-form-padding-right: var(--sjs-spacing-x4); + --ctr-property-grid-form-padding-top: var(--sjs-spacing-x2); + --ctr-property-grid-form-padding-bottom: var(--sjs-spacing-x5); + --ctr-property-grid-form-border-color: var(--sjs-border-25); + --ctr-property-grid-form-padding-top-no-label: var(--sjs-spacing-x4); + --ctr-property-grid-form-gap: var(--sjs-spacing-x2); + --ctr-page-navigator-padding-left: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-right: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-top: var(--sjs-spacing-x150); + --ctr-page-navigator-padding-bottom: var(--sjs-spacing-x150); + --ctr-page-navigator-gap: var(--sjs-spacing-x2); + --ctr-toolbox-search-padding-left: var(--sjs-spacing-x3); + --ctr-toolbox-search-padding-right: var(--sjs-spacing-x2); + --ctr-toolbox-search-padding-top: var(--sjs-spacing-x250); + --ctr-toolbox-search-icon-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-search-padding-bottom: var(--sjs-spacing-x250); + --ctr-toolbox-search-border-color: var(--sjs-border-25); + --ctr-toolbox-search-gap: var(--sjs-spacing-x1); + --ctr-toolbox-search-text-color: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-toolbox-search-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-search-clear-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-search-clear-button-background-color-hovered: var(--sjs-semantic-red-background-10); + --ctr-search-icon-color: var(--sjs-layer-1-foreground-75); + --ctr-search-gap: var(--sjs-spacing-x1); + --ctr-search-icon-width: var(--sjs-size-x3); + --ctr-search-icon-height: var(--sjs-size-x3); + --ctr-search-icon-width-small: var(--sjs-size-x2); + --ctr-search-icon-height-small: var(--sjs-size-x2); + --ctr-toolbox-search-icon-color: var(--sjs-primary-background-500); + --ctr-toolbox-search-clear-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --ctr-toolbox-group-header-margin-top: var(--sjs-spacing-x1); + --ctr-toolbox-group-header-margin-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-separator-max-width-compact: var(--sjs-size-max); + --ctr-toolbox-separator-padding-left-compact: var(--sjs-spacing-x2); + --ctr-toolbox-separator-padding-right-compact: var(--sjs-spacing-x2); + --ctr-checkbox-gap: var(--sjs-spacing-x1); + --ctr-checkbox-description-button-margin-left: var(--sjs-spacing-x05); + --ctr-checkbox-description-text-margin-left: var(--sjs-spacing-x4); + --ctr-button-group-item-content-interval: var(--sjs-spacing-x1); + --ctr-radio-button-gap: var(--sjs-spacing-x1); + --ctr-editor-layout-gap: var(--sjs-spacing-x1); + --ctr-expression-items-gap: var(--sjs-spacing-x1); + --ctr-expression-rows-gap: var(--sjs-spacing-x2); + --ctr-font-large-size: var(--sjs-font-size-x4); + --ctr-font-large-line-height: var(--sjs-line-height-x5); + --ctr-font-medium-size: var(--sjs-font-size-x3); + --ctr-font-medium-line-height: var(--sjs-line-height-x4); + --ctr-font-default-size: var(--sjs-font-size-x2); + --ctr-font-default-line-height: var(--sjs-line-height-x3); + --ctr-font-small-size: var(--sjs-font-size-x150); + --ctr-font-small-line-height: var(--sjs-line-height-x2); + --ctr-font-code-size: var(--sjs-font-size-x2); + --ctr-font-code-line-height: var(--sjs-line-height-x3); + --ctr-survey-checkboxes-item-margin-left-hovered: var(--sjs-spacing-x5n); + --lbr-checkboxes-item-margin-top: var(--sjs-spacing-x05); + --lbr-checkboxes-item-margin-bottom: var(--sjs-spacing-x05); + --lbr-checkboxes-item-text-margin-left: var(--sjs-spacing-x1); + --lbr-shadow-x-large-color: var(--sjs-special-glow); + --lbr-shadow-large-color: var(--sjs-special-glow); + --lbr-shadow-medium-color: var(--sjs-special-glow); + --lbr-shadow-small-color: var(--sjs-special-shadow); + --lbr-checkboxes-item-button-margin-top: var(--sjs-spacing-x1); + --lbr-checkboxes-item-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-checkboxes-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-checkboxes-item-text-margin-bottom: var(--sjs-spacing-x1); + --lbr-checkboxes-item-button-width: var(--sjs-size-x3); + --lbr-checkboxes-item-button-height: var(--sjs-size-x3); + --lbr-checkboxes-item-button-corner-radius: var(--sjs-corner-radius-x025); + --lbr-checkboxes-item-button-background-color: var(--sjs-layer-2-background-500); + --lbr-checkboxes-item-button-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-checkboxes-item-button-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-checkboxes-item-button-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-checkboxes-item-button-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-checkboxes-item-button-shadow-color: var(--lbr-shadow-inner-color); + --lbr-checkboxes-item-button-check-mark-width: var(--sjs-size-x2); + --lbr-checkboxes-item-button-check-mark-height: var(--sjs-size-x2); + --lbr-checkboxes-item-button-check-mark-color: var(--sjs-primary-background-500); + --lbr-checkboxes-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-checkboxes-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-checkboxes-item-button-background-color-preview: var(--sjs-layer-1-background-500); + --lbr-checkboxes-item-button-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-checkboxes-item-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-checkboxes-item-button-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-checkboxes-item-button-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-checkboxes-item-button-background-color-focused: var(--sjs-layer-1-background-500); + --lbr-checkboxes-item-button-background-color-checked: var(--sjs-primary-background-500); + --lbr-checkboxes-item-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-checkboxes-item-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-checkboxes-item-button-check-mark-color-checked: var(--sjs-primary-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-checkboxes-item-button-check-mark-color-read-only: var(--sjs-layer-1-foreground-100); + --ctr-survey-checkboxes-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-checkboxes-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-checkboxes-item-corner-radius-floating: var(--sjs-corner-radius-x1); + --ctr-survey-checkboxes-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-checkboxes-item-padding-right-floating: var(--sjs-spacing-x3); + --ctr-survey-checkboxes-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-checkboxes-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-checkboxes-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-checkboxes-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-checkboxes-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-checkboxes-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-checkboxes-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-checkboxes-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-checkboxes-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-checkboxes-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-radio-button-group-item-corner-radius-floating: var(--sjs-corner-radius-x1); + --ctr-survey-radio-button-group-item-margin-left: var(--sjs-spacing-x5); + --ctr-survey-radio-button-group-item-margin-left-mobile: var(--sjs-spacing-x3); + --ctr-survey-radio-button-group-item-margin-left-floating: var(--sjs-spacing-x1); + --ctr-survey-radio-button-group-item-margin-right-floating: var(--sjs-spacing-x3); + --lbr-radio-buttons-item-margin-top: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-margin-bottom: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-text-margin-left: var(--sjs-spacing-x1); + --ctr-survey-radio-button-group-item-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-margin-top: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-width: var(--sjs-size-x3); + --lbr-radio-buttons-item-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-radio-buttons-item-button-background-color: var(--sjs-layer-2-background-500); + --lbr-radio-buttons-item-button-dot-width: var(--sjs-size-x1); + --lbr-radio-buttons-item-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-radio-buttons-item-button-dot-color: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-dot-color-checked: var(--sjs-primary-foreground-100); + --lbr-radio-buttons-item-button-dot-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-radio-buttons-item-button-dot-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-radio-buttons-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-radio-buttons-item-text-margin-bottom: var(--sjs-spacing-x1); + --lbr-radio-buttons-item-button-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-radio-buttons-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-radio-button-group-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-radio-buttons-item-button-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-radio-buttons-item-button-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-radio-buttons-item-button-shadow-color: var(--lbr-shadow-inner-color); + --lbr-radio-buttons-item-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-radio-buttons-item-button-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-radio-buttons-item-button-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-radio-buttons-item-button-background-color-focused: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-checked: var(--sjs-primary-background-500); + --lbr-radio-buttons-item-button-background-color-preview: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-error: var(--sjs-semantic-red-background-10); + --ctr-survey-radio-button-group-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-radio-button-group-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-radio-button-group-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-radio-button-group-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-radio-button-group-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-radio-button-group-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-radio-button-group-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-radio-button-group-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-radio-button-group-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-radio-button-group-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --lbr-radio-buttons-item-button-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-radio-buttons-item-button-check-mark-width: var(--sjs-size-x2); + --lbr-radio-buttons-item-button-check-mark-height: var(--sjs-size-x2); + --lbr-radio-buttons-item-button-check-mark-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-radio-buttons-item-button-background-color-alternate: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-read-only-alternate: var(--sjs-layer-1-background-500); + --lbr-radio-buttons-item-button-background-color-disabled-alternate: var(--sjs-layer-1-background-500); + --lbr-editor-corner-radius: var(--sjs-corner-radius-x05); + --lbr-editor-padding-left: var(--sjs-spacing-x2); + --lbr-editor-padding-right: var(--sjs-spacing-x2); + --lbr-editor-padding-top: var(--sjs-spacing-x150); + --lbr-editor-padding-bottom: var(--sjs-spacing-x150); + --lbr-editor-gap: var(--sjs-spacing-x2); + --lbr-editor-background-color: var(--sjs-layer-2-background-500); + --lbr-editor-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-editor-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-editor-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-editor-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-editor-shadow-color: var(--lbr-shadow-inner-color); + --lbr-editor-text-color: var(--sjs-layer-2-foreground-100); + --lbr-editor-text-color-placeholder: var(--sjs-layer-2-foreground-50); + --lbr-editor-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-editor-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-editor-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-editor-text-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-editor-text-color-disabled-placeholder: var(--sjs-layer-2-foreground-100); + --lbr-editor-border-width-focused: var(--sjs-stroke-x2); + --lbr-editor-border-color-focused: var(--sjs-primary-background-500); + --lbr-editor-limit-label-color: var(--sjs-layer-2-foreground-50); + --lbr-editor-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-editor-border-width-bottom-preview: var(--sjs-stroke-x1); + --lbr-editor-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-editor-text-color-read-only-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-editor-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-matrix-total-row-cell-padding-left: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-padding-right: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-padding-top: var(--sjs-spacing-x150); + --lbr-matrix-total-row-cell-padding-bottom: var(--sjs-spacing-x150); + --lbr-matrix-total-row-cell-border-width-bottom: var(--sjs-stroke-x1); + --lbr-matrix-total-row-cell-border-color: var(--sjs-border-10); + --lbr-labeled-editor-padding-left: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-right: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-labeled-editor-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-labeled-editor-label-color: var(--sjs-layer-2-foreground-50); + --lbr-labeled-editor-label-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-labeled-editor-padding-top-mobile-empty: var(--sjs-spacing-x2); + --lbr-labeled-editor-padding-bottom-mobile-empty: var(--sjs-spacing-x2); + --ctr-survey-labeled-editor-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-labeled-editor-margin-left-mobile: var(--sjs-spacing-x3n); + --lbr-editor-button-corner-radius: var(--sjs-corner-radius-x025); + --lbr-editor-button-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-editor-button-icon-color: var(--sjs-layer-2-foreground-50); + --lbr-editor-button-padding-top: var(--sjs-spacing-x1); + --lbr-editor-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-editor-button-padding-left: var(--sjs-spacing-x1); + --lbr-editor-button-padding-right: var(--sjs-spacing-x1); + --lbr-editor-button-icon-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-editor-button-icon-width: var(--sjs-size-x3); + --lbr-editor-button-icon-height: var(--sjs-size-x3); + --lbr-rating-item-background-color: var(--sjs-layer-1-background-500); + --lbr-rating-item-padding-left: var(--sjs-spacing-x05); + --lbr-rating-item-padding-right: var(--sjs-spacing-x05); + --lbr-rating-item-padding-top: var(--sjs-spacing-x05); + --lbr-rating-item-padding-bottom: var(--sjs-spacing-x05); + --lbr-rating-item-width: var(--sjs-size-x6); + --lbr-rating-item-height: var(--sjs-size-x6); + --lbr-rating-item-corner-radius: var(--sjs-corner-radius-round); + --lbr-rating-item-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-rating-item-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-rating-item-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-rating-item-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-rating-item-shadow-color: var(--lbr-shadow-small-color); + --lbr-rating-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-text-margin-left: var(--sjs-spacing-x2); + --lbr-rating-item-text-margin-right: var(--sjs-spacing-x2); + --lbr-rating-smiley-icon-color: var(--sjs-border-25); + --lbr-rating-smiley-icon-width: var(--sjs-size-x3); + --lbr-rating-smiley-icon-height: var(--sjs-size-x3); + --lbr-rating-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-item-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-item-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-item-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-item-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-item-border-width-disabled: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-read-only: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-rating-item-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-item-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-item-border-color-read-only: var(--sjs-border-25); + --lbr-rating-item-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-item-border-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-item-text-color-read-only: var(--sjs-layer-1-foreground-50); + --lbr-rating-item-text-color-selected: var(--sjs-primary-foreground-100); + --lbr-rating-label-color: var(--sjs-layer-1-foreground-50); + --lbr-rating-label-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-border-width: var(--sjs-stroke-x2); + --lbr-rating-smiley-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-smiley-border-color: var(--sjs-border-25); + --lbr-rating-smiley-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-smiley-border-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-smiley-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-smiley-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-background-color-preview-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-smiley-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-smiley-icon-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-icon-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-smiley-icon-color-focused: var(--sjs-primary-background-500); + --lbr-rating-smiley-icon-color-selected: var(--sjs-primary-foreground-100); + --lbr-rating-smiley-icon-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-icon-color-preview-selected: var(--sjs-layer-1-background-500); + --lbr-rating-smiley-icon-color-error: var(--sjs-layer-1-foreground-50); + --lbr-rating-smiley-icon-color-disabled-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-smiley-red-icon-color: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-icon-color-selected: var(--sjs-semantic-red-foreground-100); + --lbr-rating-smiley-red-border-color: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-background-color-hovered: var(--sjs-semantic-red-background-10); + --lbr-rating-smiley-red-background-color-selected: var(--sjs-semantic-red-background-500); + --lbr-rating-smiley-red-background-color-selected-focused: var(--sjs-semantic-red-foreground-100); + --lbr-rating-smiley-yellow-icon-color: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-icon-color-selected: var(--sjs-semantic-yellow-foreground-100); + --lbr-rating-smiley-yellow-border-color: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-background-color-hovered: var(--sjs-semantic-yellow-background-10); + --lbr-rating-smiley-yellow-background-color-selected: var(--sjs-semantic-yellow-background-500); + --lbr-rating-smiley-yellow-background-color-selected-focused: var(--sjs-semantic-yellow-foreground-100); + --lbr-rating-smiley-green-icon-color: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-icon-color-selected: var(--sjs-semantic-green-foreground-100); + --lbr-rating-smiley-green-border-color: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-background-color-hovered: var(--sjs-semantic-green-background-10); + --lbr-rating-smiley-green-background-color-selected: var(--sjs-semantic-green-background-500); + --lbr-rating-smiley-green-background-color-selected-focused: var(--sjs-semantic-green-foreground-100); + --lbr-rating-star-width: var(--sjs-size-x6); + --lbr-rating-star-height: var(--sjs-size-x6); + --lbr-rating-star-border-width: var(--sjs-stroke-x2); + --lbr-rating-star-border-width-preview: var(--sjs-stroke-x1); + --lbr-rating-star-border-color: var(--sjs-border-25); + --lbr-rating-star-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-border-color-disabled: var(--sjs-layer-2-background-400); + --lbr-rating-star-border-color-focused: var(--sjs-primary-background-500); + --lbr-rating-star-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-rating-star-background-color-selected: var(--sjs-primary-background-500); + --lbr-rating-star-background-color-preview-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-background-color-disabled-selected: var(--sjs-layer-2-background-400); + --lbr-rating-star-background-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-rating-star-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-rating-star-background-color-read-only-selected: var(--sjs-layer-1-foreground-100); + --lbr-rating-star-background-color-inactive: var(--sjs-border-25); + --lbr-ranking-item-number-width: var(--sjs-size-x5); + --lbr-ranking-item-number-height: var(--sjs-size-x5); + --lbr-ranking-item-number-corner-radius: var(--sjs-corner-radius-round); + --lbr-ranking-item-number-background-color: var(--sjs-primary-background-10); + --lbr-ranking-item-number-text-color: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-number-icon-width: var(--sjs-size-x2); + --lbr-ranking-item-number-icon-height: var(--sjs-size-x2); + --lbr-rating-star-width-small: var(--sjs-size-x3); + --lbr-rating-star-height-small: var(--sjs-size-x3); + --lbr-ranking-item-number-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-ranking-item-number-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-ranking-item-number-border-color-focused: var(--sjs-primary-background-500); + --lbr-ranking-item-number-border-width-focused: var(--sjs-stroke-x2); + --ctr-survey-ranking-item-digit-background-color-inactive: var(--sjs-layer-3-background-500); + --ctr-survey-ranking-item-digit-text-color-inactive: var(--sjs-layer-3-foreground-50); + --lbr-ranking-item-number-icon-color: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-gap: var(--sjs-spacing-x2); + --lbr-ranking-item-text-margin-top: var(--sjs-spacing-x1); + --lbr-ranking-item-text-margin-bottom: var(--sjs-spacing-x1); + --ctr-survey-ranking-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --lbr-ranking-item-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-item-actionbar-padding-top: var(--sjs-spacing-x05); + --ctr-survey-item-actionbar-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-drag-indicator-icon-color: var(--sjs-primary-background-500); + --ctr-survey-ranking-margin-left: var(--sjs-spacing-x5); + --ctr-survey-ranking-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-ranking-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-ranking-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-ranking-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-ranking-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-ranking-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-ranking-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-ranking-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-ranking-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-ranking-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-ranking-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-ranking-item-corner-radius-floating: var(--sjs-corner-radius-x1); + --ctr-survey-ranking-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-ranking-item-padding-right-floating: var(--sjs-spacing-x4); + --ctr-survey-ranking-item-padding-top-floating: var(--sjs-spacing-x05); + --ctr-survey-ranking-item-padding-bottom-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-shadow-floating-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-ranking-item-shadow-floating-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-ranking-item-shadow-floating-1-blur: var(--lbr-shadow-large-blur); + --lbr-ranking-item-shadow-floating-1-spread: var(--lbr-shadow-large-spread); + --lbr-ranking-item-shadow-floating-1-color: var(--lbr-shadow-large-color); + --lbr-ranking-item-shadow-floating-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-ranking-item-shadow-floating-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-ranking-item-shadow-floating-2-blur: var(--lbr-shadow-medium-blur); + --lbr-ranking-item-shadow-floating-2-spread: var(--lbr-shadow-medium-spread); + --lbr-ranking-item-shadow-floating-2-color: var(--lbr-shadow-medium-color); + --lbr-ranking-item-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-ranking-item-corner-radius-floating: var(--sjs-corner-radius-round); + --lbr-ranking-item-padding-left-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-top-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-bottom-floating: var(--sjs-spacing-x05); + --lbr-ranking-item-padding-right-floating: var(--sjs-spacing-x4); + --lbr-ranking-drop-spot-color: var(--sjs-layer-1-background-400); + --lbr-ranking-item-number-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-ranking-item-number-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-ranking-item-number-border-width-preview: var(--sjs-stroke-x1); + --ctr-survey-item-actionbar-padding-left-mobile: var(--sjs-spacing-x2); + --ctr-survey-item-actionbar-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-icon-color: var(--sjs-primary-background-500); + --lbr-ranking-indicators-drag-indicator-icon-width: var(--sjs-size-x3); + --lbr-ranking-indicators-drag-indicator-icon-height: var(--sjs-size-x3); + --lbr-ranking-indicators-sort-indicator-icon-width: var(--sjs-size-x3); + --lbr-ranking-indicators-sort-indicator-icon-height: var(--sjs-size-x3); + --lbr-ranking-indicators-padding-top: var(--sjs-spacing-x05); + --lbr-ranking-indicators-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-padding-left-mobile: var(--sjs-spacing-x2); + --lbr-ranking-indicators-drag-indicator-padding-left: var(--sjs-spacing-x1); + --lbr-ranking-indicators-drag-indicator-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-padding-right: var(--sjs-spacing-x1); + --lbr-ranking-indicators-sort-indicator-padding-left: var(--sjs-spacing-x1); + --lbr-ranking-indicators-drag-indicator-icon-color-mobile: var(--sjs-layer-1-foreground-100); + --lbr-ranking-indicators-drag-indicator-padding-top: var(--sjs-spacing-x05); + --lbr-ranking-indicators-drag-indicator-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-sort-indicator-padding-bottom: var(--sjs-spacing-x05); + --lbr-ranking-indicators-sort-indicator-padding-top: var(--sjs-spacing-x05); + --lbr-radio-buttons-item-button-height: var(--sjs-size-x3); + --lbr-radio-buttons-item-button-dot-height: var(--sjs-size-x1); + --lbr-boolean-thumb-background-color-active: var(--sjs-layer-1-background-500); + --lbr-boolean-thumb-padding-left: var(--sjs-spacing-x3); + --lbr-boolean-thumb-padding-right: var(--sjs-spacing-x3); + --lbr-boolean-thumb-padding-top: var(--sjs-spacing-x1); + --lbr-boolean-thumb-padding-bottom: var(--sjs-spacing-x1); + --lbr-boolean-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-boolean-thumb-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-boolean-thumb-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-boolean-thumb-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-boolean-thumb-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-boolean-thumb-shadow-color: var(--lbr-shadow-small-color); + --lbr-boolean-thumb-text-color: var(--sjs-layer-2-foreground-50); + --lbr-boolean-corner-radius: var(--sjs-corner-radius-round); + --lbr-boolean-background-color: var(--sjs-layer-2-background-500); + --lbr-boolean-shadow-offset-x: var(--lbr-shadow-inner-offset-x); + --lbr-boolean-shadow-offset-y: var(--lbr-shadow-inner-offset-y); + --lbr-boolean-shadow-blur: var(--lbr-shadow-inner-blur); + --lbr-boolean-shadow-spread: var(--lbr-shadow-inner-spread); + --lbr-boolean-shadow-color: var(--lbr-shadow-inner-color); + --lbr-boolean-padding-left: var(--sjs-spacing-x05); + --lbr-boolean-padding-right: var(--sjs-spacing-x05); + --lbr-boolean-padding-top: var(--sjs-spacing-x05); + --lbr-boolean-padding-bottom: var(--sjs-spacing-x05); + --lbr-boolean-gap: var(--sjs-spacing-x05); + --lbr-boolean-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-boolean-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-boolean-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-boolean-thumb-text-color-active: var(--sjs-primary-background-500); + --lbr-boolean-thumb-text-color-disabled: var(--sjs-layer-2-foreground-100); + --lbr-boolean-thumb-text-color-read-only: var(--sjs-layer-2-foreground-50); + --lbr-boolean-thumb-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-read-only-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-preview-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-text-color-disabled-active: var(--sjs-layer-1-foreground-100); + --lbr-boolean-border-color-focused: var(--sjs-primary-background-500); + --lbr-boolean-thumb-border-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-boolean-thumb-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-boolean-border-width-focused: var(--sjs-stroke-x2); + --lbr-boolean-thumb-border-width-read-only: var(--sjs-stroke-x2); + --lbr-boolean-thumb-border-width-preview: var(--sjs-stroke-x1); + --lbr-boolean-thumb-background-color-hovered: var(--sjs-layer-2-background-400); + --lbr-image-picker-item-title-color: var(--sjs-layer-1-foreground-100); + --lbr-image-picker-item-title-margin-top: var(--sjs-spacing-x1); + --lbr-image-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-image-contextual-buttons-gap: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color-positive: var(--sjs-primary-background-500); + --lbr-contextual-button-icon-color-positive: var(--sjs-primary-background-500); + --ctr-survey-image-picker-dragging-panel-shadow-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-image-picker-dragging-panel-shadow-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-image-picker-dragging-panel-shadow-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-image-picker-dragging-panel-shadow-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-image-picker-dragging-panel-shadow-color: var(--ctr-shadow-medium-color); + --lbr-image-picker-item-background-error: var(--sjs-semantic-red-background-500); + --lbr-image-picker-item-check-mark-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-item-title-color: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-gap: var(--sjs-spacing-x1); + --lbr-file-upload-item-image-thumbnail-width: var(--sjs-size-x12); + --lbr-file-upload-item-image-thumbnail-height: var(--sjs-size-x12); + --lbr-file-upload-item-image-thumbnail-background-color: var(--sjs-layer-3-background-500); + --lbr-file-upload-item-file-icon-width: var(--sjs-size-x9); + --lbr-file-upload-item-file-icon-height: var(--sjs-size-x9); + --lbr-file-upload-item-file-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-file-upload-item-loading-width: var(--sjs-size-x6); + --lbr-file-upload-item-loading-height: var(--sjs-size-x6); + --lbr-file-upload-item-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-file-upload-item-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-file-upload-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --lbr-file-upload-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-placeholder-border-color-placeholder: var(--sjs-border-25); + --lbr-placeholder-border-width-placeholder: var(--sjs-stroke-x1); + --lbr-file-upload-contextual-buttons-gap: var(--sjs-spacing-x1); + --lbr-signature-loading-width: var(--sjs-size-x6); + --lbr-signature-loading-height: var(--sjs-size-x6); + --lbr-signature-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-signature-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-signature-signature-color: var(--sjs-primary-background-500); + --lbr-file-upload-pager-margin: var(--sjs-spacing-x2); + --lbr-file-upload-item-list-gap: var(--sjs-spacing-x4); + --lbr-file-upload-item-list-margin-left: var(--sjs-spacing-x6); + --lbr-file-upload-item-list-margin-right: var(--sjs-spacing-x6); + --lbr-placeholder-border-color-hovered: var(--sjs-primary-background-500); + --lbr-placeholder-border-width-hovered: var(--sjs-stroke-x2); + --lbr-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --lbr-file-upload-data-area-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-file-upload-data-area-background-color-image: var(--sjs-layer-2-background-500); + --lbr-file-upload-data-area-background-color-read-only: var(--sjs-layer-1-background-400); + --lbr-placeholder-loading-width: var(--sjs-size-x6); + --lbr-placeholder-loading-height: var(--sjs-size-x6); + --lbr-placeholder-loading-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-placeholder-loading-circle-color-spin: var(--sjs-primary-background-500); + --lbr-file-upload-contextual-buttons-camera-button-margin: var(--sjs-spacing-x1); + --lbr-list-item-corner-radius: var(--sjs-corner-radius-x05); + --lbr-list-item-gap: var(--sjs-spacing-x4); + --lbr-list-item-padding-left: var(--sjs-spacing-x2); + --lbr-list-item-padding-right: var(--sjs-spacing-x2); + --lbr-list-item-padding-top: var(--sjs-spacing-x150); + --lbr-list-item-padding-bottom: var(--sjs-spacing-x150); + --lbr-list-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-list-item-description-color: var(--sjs-layer-1-foreground-50); + --lbr-list-item-text-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-list-item-text-color-loading: var(--sjs-layer-1-foreground-50); + --lbr-list-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-list-item-background-color-selected-focused: var(--sjs-primary-background-500); + --lbr-list-item-border-color-focused: var(--sjs-border-10); + --lbr-list-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-list-item-background-color-selected: var(--sjs-primary-background-10); + --lbr-list-item-description-color-selected-focused: var(--sjs-primary-foreground-100); + --lbr-list-item-description-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-panel-layout-gap-small: var(--sjs-spacing-x1); + --lbr-panel-layout-gap-medium: var(--sjs-spacing-x2); + --lbr-panel-layout-gap-large: var(--sjs-spacing-x4); + --lbr-page-layout-gap-small: var(--sjs-spacing-x1); + --lbr-page-layout-gap-medium: var(--sjs-spacing-x2); + --lbr-page-layout-gap-large: var(--sjs-spacing-x4); + --lbr-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-button-padding-left: var(--sjs-spacing-x8); + --lbr-button-padding-right: var(--sjs-spacing-x8); + --lbr-button-padding-top: var(--sjs-spacing-x2); + --lbr-button-padding-bottom: var(--sjs-spacing-x2); + --lbr-button-background-color: var(--sjs-layer-1-background-500); + --lbr-button-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-button-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-button-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-button-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-button-shadow-color: var(--lbr-shadow-small-color); + --lbr-button-text-color: var(--sjs-primary-background-500); + --lbr-button-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-button-background-color-panelless: var(--sjs-layer-2-background-500); + --lbr-button-background-color-hovered-panelless: var(--sjs-layer-2-background-400); + --lbr-button-background-color-cta: var(--sjs-primary-background-500); + --lbr-button-background-color-hovered-cta: var(--sjs-primary-background-400); + --lbr-button-background-color-danger: var(--sjs-semantic-red-background-500); + --lbr-button-border-color-focused-danger: var(--sjs-semantic-red-background-500); + --lbr-button-border-width-focused-danger: var(--sjs-stroke-x2); + --lbr-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-button-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-button-text-color-cta: var(--sjs-primary-foreground-100); + --lbr-button-text-color-danger: var(--sjs-semantic-red-foreground-100); + --lbr-button-padding-left-small: var(--sjs-spacing-x4); + --lbr-button-padding-right-small: var(--sjs-spacing-x4); + --lbr-button-padding-top-small: var(--sjs-spacing-x150); + --lbr-button-padding-bottom-small: var(--sjs-spacing-x150); + --lbr-button-text-color-disabled-panelless: var(--sjs-layer-2-foreground-100); + --lbr-dialog-corner-radius: var(--sjs-corner-radius-x1); + --lbr-dialog-footer-margin-top: var(--sjs-spacing-x4); + --lbr-dialog-padding-left: var(--sjs-spacing-x4); + --lbr-dialog-padding-right: var(--sjs-spacing-x4); + --lbr-dialog-padding-top: var(--sjs-spacing-x4); + --lbr-dialog-padding-bottom: var(--sjs-spacing-x4); + --lbr-dialog-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-dialog-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-dialog-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-dialog-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-dialog-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-dialog-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-dialog-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-dialog-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-dialog-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-dialog-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-dialog-background-color: var(--sjs-layer-1-background-400); + --lbr-dialog-title-color: var(--sjs-layer-1-foreground-100); + --lbr-dialog-text-color: var(--sjs-layer-1-foreground-100); + --lbr-dialog-title-margin-bottom: var(--sjs-spacing-x2); + --lbr-dialog-footer-gap: var(--sjs-spacing-x2); + --lbr-dialog-screen-color: var(--sjs-special-haze); + --lbr-dialog-margin-left: var(--sjs-spacing-x4); + --lbr-dialog-margin-right: var(--sjs-spacing-x4); + --lbr-dialog-margin-top: var(--sjs-spacing-x4); + --lbr-dialog-margin-bottom: var(--sjs-spacing-x4); + --lbr-dialog-padding-left-center: var(--sjs-spacing-x8); + --lbr-dialog-padding-right-center: var(--sjs-spacing-x8); + --lbr-window-corner-radius: var(--sjs-corner-radius-x1); + --lbr-window-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-window-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-window-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-window-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-window-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-window-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-window-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-window-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-window-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-window-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-window-background-color: var(--sjs-layer-3-background-500); + --lbr-window-header-title-color: var(--sjs-layer-3-foreground-100); + --lbr-window-border-color: var(--sjs-border-25); + --lbr-window-border-width: var(--sjs-stroke-x1); + --lbr-window-header-padding-left: var(--sjs-spacing-x2); + --lbr-window-header-padding-right: var(--sjs-spacing-x1); + --lbr-window-header-padding-top: var(--sjs-spacing-x1); + --lbr-window-header-padding-bottom: var(--sjs-spacing-x1); + --lbr-window-header-gap: var(--sjs-spacing-x4); + --lbr-window-header-button-gap: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-left: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-right: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-top: var(--sjs-spacing-x1); + --lbr-window-header-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-window-header-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-window-header-button-icon-color: var(--sjs-layer-3-foreground-50); + --lbr-window-header-button-icon-width: var(--sjs-size-x2); + --lbr-window-header-button-icon-height: var(--sjs-size-x2); + --lbr-window-header-button-icon-color-hovered: var(--sjs-primary-background-500); + --lbr-window-header-button-background-color-hovered: var(--sjs-primary-background-10); + --lbr-matrix-title-cell-padding-left: var(--sjs-spacing-x2); + --lbr-matrix-title-cell-padding-right: var(--sjs-spacing-x2); + --lbr-matrix-title-cell-padding-top: var(--sjs-spacing-x150); + --lbr-matrix-title-cell-padding-bottom: var(--sjs-spacing-x150); + --lbr-matrix-title-cell-text-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-matrix-cell-corner-radius: var(--sjs-corner-radius-x075); + --ctr-survey-matrix-cell-border-color-hovered: var(--sjs-secondary-background-10); + --ctr-survey-matrix-cell-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-matrix-cell-border-color-edit: var(--sjs-primary-background-500); + --ctr-survey-matrix-cell-border-width: var(--sjs-stroke-x2); + --lbr-matrix-row-gap: var(--sjs-spacing-x2); + --lbr-matrix-details-padding-left: var(--sjs-spacing-x8); + --lbr-matrix-details-padding-right-delete-button: var(--sjs-spacing-x7); + --lbr-matrix-details-padding-top: var(--sjs-spacing-x3); + --lbr-matrix-details-padding-bottom: var(--sjs-spacing-x3); + --lbr-progress-bar-section-color-completed: var(--sjs-semantic-green-background-500); + --lbr-progress-bar-height: var(--sjs-size-x025); + --lbr-progress-bar-section-color-disabled-completed: var(--sjs-border-25); + --lbr-progress-bar-section-color: var(--sjs-border-10); + --lbr-progress-bar-section-color-disabled: var(--sjs-border-10); + --lbr-progress-bar-section-title-color: var(--sjs-layer-3-foreground-50); + --lbr-progress-bar-section-title-margin-left: var(--sjs-spacing-x4); + --lbr-progress-bar-section-title-margin-right: var(--sjs-spacing-x4); + --lbr-progress-bar-pager-label-text-color: var(--sjs-layer-3-foreground-50); + --lbr-progress-bar-pager-padding-left: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-padding-right: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-padding-top: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-padding-bottom: var(--sjs-spacing-x1); + --lbr-progress-bar-section-title-margin-top: var(--sjs-spacing-x2); + --lbr-progress-bar-section-title-margin-bottom: var(--sjs-spacing-x2); + --ctr-survey-header-logo-placeholder-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-header-logo-placeholder-padding-left: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-top: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-padding-bottom: var(--sjs-spacing-x1); + --ctr-survey-header-logo-toolbar-gap: var(--sjs-spacing-x1); + --ctr-survey-header-logo-placeholder-background-color-hovered: var(--sjs-primary-background-10); + --ctr-survey-header-logo-placeholder-icon-color-hovered: var(--sjs-primary-background-500); + --ctr-survey-header-logo-loading-circle-color: var(--sjs-layer-1-foreground-100); + --ctr-survey-header-logo-loading-circle-color-spin: var(--sjs-primary-background-500); + --ctr-survey-header-logo-loading-width: var(--sjs-size-x6); + --ctr-survey-header-logo-loading-height: var(--sjs-size-x6); + --ctr-survey-header-logo-loading-margin-left: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-right: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-top: var(--sjs-spacing-x1); + --ctr-survey-header-logo-loading-margin-bottom: var(--sjs-spacing-x1); + --ctr-survey-contextual-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --lbr-header-logo-height: var(--sjs-size-x5); + --lbr-header-padding-left: var(--sjs-spacing-x3); + --ctr-survey-header-padding-right-logo-placeholder: var(--sjs-spacing-x1); + --lbr-header-padding-top: var(--sjs-spacing-x3); + --lbr-header-padding-bottom: var(--sjs-spacing-x3); + --lbr-header-border-color: var(--sjs-primary-background-500); + --lbr-header-border-width-bottom: var(--sjs-stroke-x2); + --lbr-header-gap: var(--sjs-spacing-x4); + --lbr-header-text-gap: var(--sjs-spacing-x1); + --lbr-header-text-title-color: var(--sjs-primary-background-500); + --lbr-header-text-description-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-header-text-title-color: var(--sjs-primary-background-500); + --ctr-survey-header-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-header-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-header-text-title-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-text-description-color-placeholder: var(--sjs-layer-3-foreground-50); + --ctr-survey-header-text-title-color-error: var(--sjs-semantic-red-background-500); + --lbr-header-padding-right: var(--sjs-spacing-x3); + --lbr-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-header-padding-right-mobile-toc-button: var(--sjs-spacing-x2); + --ctr-survey-header-text-margin-left-mobile-logo-placeholder: var(--sjs-spacing-x2); + --ctr-survey-header-padding-left-mobile-logo-placeholder: var(--sjs-spacing-x1); + --lbr-header-gap-vertical-mobile: var(--sjs-spacing-x3); + --lbr-header-logo-margin-top-mobile: var(--sjs-spacing-x2); + --ctr-survey-header-gap: var(--sjs-spacing-x1); + --lbr-cover-gap: var(--sjs-spacing-x3); + --lbr-cover-text-gap: var(--sjs-spacing-x1); + --lbr-cover-text-title-color: var(--sjs-layer-3-foreground-100); + --lbr-cover-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-cover-text-min-width: var(--sjs-size-x64); + --lbr-cover-text-title-color-dark-mode: var(--sjs-semantic-white-background-500); + --lbr-cover-text-description-color-dark-mode: var(--sjs-semantic-white-background-500); + --lbr-cover-padding-left: var(--sjs-spacing-x5); + --lbr-cover-padding-right: var(--sjs-spacing-x5); + --lbr-cover-padding-top: var(--sjs-spacing-x5); + --lbr-cover-padding-bottom: var(--sjs-spacing-x5); + --lbr-cover-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-cover-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-cover-height: var(--sjs-size-x32); + --lbr-cover-overlap: var(--sjs-spacing-x8); + --lbr-cover-overlap-mobile: var(--sjs-spacing-x2); + --lbr-timer-background-color: var(--sjs-layer-1-background-500); + --lbr-timer-padding: var(--sjs-spacing-x1); + --lbr-timer-corner-radius: var(--sjs-corner-radius-round); + --lbr-timer-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-timer-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-timer-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-timer-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-timer-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-timer-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-timer-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-timer-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-timer-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-timer-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-timer-width: var(--sjs-size-x18); + --lbr-timer-height: var(--sjs-size-x18); + --lbr-timer-text-color-primary: var(--sjs-primary-background-500); + --lbr-timer-text-color-secondary: var(--sjs-layer-1-foreground-50); + --lbr-timer-progress-color: var(--sjs-layer-3-background-500); + --lbr-timer-progress-width: var(--sjs-stroke-x2); + --lbr-timer-progress-color-filled: var(--sjs-primary-background-500); + --lbr-timer-progress-width-filled: var(--sjs-stroke-x4); + --lbr-timer-width-small: var(--sjs-size-x9); + --lbr-timer-height-small: var(--sjs-size-x9); + --lbr-timer-padding-small: var(--sjs-spacing-x05); + --lbr-tag-box-item-corner-radius: var(--sjs-corner-radius-x025); + --lbr-tag-box-item-padding-left: var(--sjs-spacing-x150); + --lbr-tag-box-item-padding-right: var(--sjs-spacing-x150); + --lbr-tag-box-item-padding-top: var(--sjs-spacing-x1); + --lbr-tag-box-item-padding-bottom: var(--sjs-spacing-x1); + --lbr-tag-box-item-background-color: var(--sjs-primary-background-500); + --lbr-tag-box-item-text-color: var(--sjs-primary-foreground-100); + --lbr-tag-box-item-remove-button-margin-left: var(--sjs-spacing-x4); + --lbr-tag-box-item-mask-color-1: var(--sjs-primary-background-500); + --lbr-tag-box-item-mask-color-2: var(--sjs-primary-background-10); + --lbr-tag-box-item-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-tag-box-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-tag-box-item-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-popup-menu-footer-background-color: var(--sjs-layer-2-background-500); + --lbr-popup-menu-footer-padding-top: var(--sjs-spacing-x05); + --lbr-popup-menu-footer-padding-bottom: var(--sjs-spacing-x05); + --lbr-popup-menu-footer-border-color: var(--sjs-border-10); + --lbr-popup-menu-footer-border-width-top: var(--sjs-stroke-x1); + --lbr-toc-background-color: var(--sjs-layer-1-background-500); + --lbr-toc-border-color: var(--sjs-border-25); + --lbr-toc-border-width-right: var(--sjs-stroke-x1); + --lbr-toc-padding-left: var(--sjs-spacing-x1); + --lbr-toc-padding-right: var(--sjs-spacing-x1); + --lbr-toc-padding-top: var(--sjs-spacing-x1); + --lbr-toc-padding-bottom: var(--sjs-spacing-x1); + --lbr-ranking-gap-vertical: var(--sjs-spacing-x3); + --ctr-survey-checkboxes-show-more-button-margin-top: var(--sjs-spacing-x05); + --ctr-survey-checkboxes-show-more-button-margin-bottom: var(--sjs-spacing-x05); + --ctr-survey-checkboxes-show-more-button-margin-left: var(--sjs-spacing-x6); + --ctr-survey-checkboxes-info-panel-margin-top: var(--sjs-spacing-x2); + --ctr-survey-radio-button-group-show-more-button-margin-left: var(--sjs-spacing-x6); + --ctr-survey-radio-button-group-show-more-button-margin-top: var(--sjs-spacing-x05); + --ctr-survey-radio-button-group-show-more-button-margin-bottom: var(--sjs-spacing-x05); + --ctr-survey-radio-button-group-info-panel-margin-top: var(--sjs-spacing-x2); + --lbr-checkboxes-comment-box-margin-top: var(--sjs-spacing-x2); + --lbr-radio-buttons-comment-box-margin-top: var(--sjs-spacing-x2); + --lbr-checkboxes-info-panel-margin-left: var(--sjs-spacing-x5); + --lbr-checkboxes-info-panel-margin-right: var(--sjs-spacing-x5); + --lbr-radio-buttons-info-panel-margin-left: var(--sjs-spacing-x5); + --lbr-radio-buttons-info-panel-margin-right: var(--sjs-spacing-x5); + --lbr-drop-down-comment-box-margin-top: var(--sjs-spacing-x2); + --ctr-survey-drop-down-gap: var(--sjs-spacing-x2); + --lbr-rating-item-gap: var(--sjs-spacing-x1); + --ctr-survey-rating-actionbar-margin-top: var(--sjs-spacing-x05); + --ctr-survey-rating-actionbar-margin-bottom: var(--sjs-spacing-x05); + --lbr-rating-label-margin: var(--sjs-spacing-x1); + --lbr-matrix-margin-top-error: var(--sjs-spacing-x3); + --lbr-dynamic-panel-tabs-item-padding-top: var(--sjs-spacing-x2); + --lbr-dynamic-panel-tabs-item-padding-bottom: var(--sjs-spacing-x2); + --lbr-dynamic-panel-tabs-item-border-color-selected: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-item-border-width-bottom-selected: var(--sjs-stroke-x2); + --lbr-dynamic-panel-tabs-item-text-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-tabs-item-text-color-selected: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-tabs-button-padding-left: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-right: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-top: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-dynamic-panel-tabs-button-icon-width: var(--sjs-size-x3); + --lbr-dynamic-panel-tabs-button-icon-height: var(--sjs-size-x3); + --lbr-dynamic-panel-tabs-button-icon-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-tabs-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-tabs-item-border-color-hovered: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-item-border-width-bottom-hovered: var(--sjs-stroke-x2); + --lbr-dynamic-panel-tabs-button-margin-top: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-dynamic-panel-tabs-button-background-color-hovered: var(--sjs-primary-background-10); + --lbr-dynamic-panel-tabs-button-icon-color-hovered: var(--sjs-primary-background-500); + --lbr-dynamic-panel-tabs-border-color: var(--sjs-border-10); + --lbr-dynamic-panel-tabs-border-width-bottom: var(--sjs-stroke-x1); + --lbr-dynamic-panel-tabs-padding-left: var(--sjs-spacing-x5); + --lbr-dynamic-panel-tabs-padding-right: var(--sjs-spacing-x5); + --lbr-dynamic-panel-tabs-gap: var(--sjs-spacing-x4); + --lbr-step-progress-bar-step-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-step-progress-bar-step-gap: var(--sjs-spacing-x2); + --lbr-step-progress-bar-step-title-margin-horizontal: var(--sjs-spacing-x2); + --lbr-step-progress-bar-step-title-margin-vertical: var(--sjs-spacing-x05); + --lbr-step-progress-bar-step-title-text-color: var(--sjs-layer-3-foreground-100); + --lbr-step-progress-bar-step-background-color: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-step-dot-margin-left: var(--sjs-spacing-x075); + --lbr-step-progress-bar-step-dot-background-color-unvisited: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-step-dot-border-color-selected: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-border-width-selected: var(--sjs-stroke-x4); + --lbr-step-progress-bar-step-dot-text-color-unvisited: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-step-dot-text-width: var(--sjs-spacing-x3); + --lbr-step-progress-bar-step-dot-text-height: var(--sjs-spacing-x3); + --lbr-step-progress-bar-step-dot-text-margin-bottom: var(--sjs-spacing-x025); + --lbr-step-progress-bar-connector-color: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-connector-color-visited: var(--sjs-primary-background-500); + --lbr-step-progress-bar-connector-height: var(--sjs-size-x025); + --lbr-step-progress-bar-step-dot-background-color-selected: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-border-width-hovered: var(--sjs-stroke-x6); + --lbr-step-progress-bar-step-dot-text-color-selected: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-background-color-hovered: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-text-color-hovered: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-background-color-visited: var(--sjs-primary-background-500); + --lbr-step-progress-bar-step-dot-text-color-visited: var(--sjs-primary-foreground-100); + --lbr-step-progress-bar-step-dot-margin-right: var(--sjs-spacing-x075); + --lbr-step-progress-bar-step-dot-width-with-number: var(--sjs-size-x3); + --lbr-step-progress-bar-step-dot-height-with-number: var(--sjs-size-x3); + --lbr-step-progress-bar-step-dot-width: var(--sjs-size-x1); + --lbr-step-progress-bar-step-dot-height: var(--sjs-size-x1); + --lbr-step-progress-bar-margin-left: var(--sjs-spacing-x5); + --lbr-step-progress-bar-margin-right: var(--sjs-spacing-x5); + --lbr-step-progress-bar-margin-top: var(--sjs-spacing-x4); + --lbr-step-progress-bar-pager-text-color: var(--sjs-layer-3-foreground-50); + --lbr-step-progress-bar-margin-bottom: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-position-bottom: var(--sjs-spacing-x6); + --lbr-step-progress-bar-pager-margin-vertical: var(--sjs-spacing-x1); + --lbr-step-progress-bar-step-title-margin-vertical-mobile: var(--sjs-spacing-x250); + --lbr-step-progress-bar-margin-bottom-with-pager: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-margin-top-fit-to-survey: var(--sjs-spacing-x7); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles: var(--sjs-spacing-x4); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles-fit-to-survey: var(--sjs-spacing-x12); + --lbr-step-progress-bar-margin-left-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-right-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-top-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-bottom-mobile: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-position-bottom-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-margin-bottom-position-bottom-no-titles-mobile: var(--sjs-spacing-x3); + --lbr-step-progress-bar-pager-margin-horizontal: var(--sjs-spacing-x075); + --ctr-survey-question-panel-toolbar-margin-left: var(--sjs-spacing-x1n); + --ctr-survey-question-panel-toolbar-margin-right: var(--sjs-spacing-x1n); + --ctr-survey-question-panel-toolbar-margin-top: var(--sjs-spacing-x2); + --lbr-question-panel-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-question-panel-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-question-panel-border-width-selected: var(--sjs-stroke-x2); + --lbr-question-panel-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-question-panel-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-question-panel-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-question-panel-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-question-panel-shadow-color: var(--lbr-shadow-small-color); + --ctr-survey-page-border-color-selected: var(--sjs-secondary-background-500); + --ctr-survey-page-border-width-selected: var(--sjs-stroke-x2); + --lbr-page-padding-top: var(--sjs-spacing-x5); + --lbr-page-padding-bottom: var(--sjs-spacing-x12); + --ctr-survey-page-corner-radius: var(--sjs-corner-radius-x1); + --lbr-page-button-footer-margin-top: var(--sjs-spacing-x4); + --lbr-page-error-margin-top-below-content: var(--sjs-spacing-x2); + --lbr-page-error-margin-bottom-above-content: var(--sjs-spacing-x2); + --lbr-page-button-footer-gap: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-left: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-right: var(--sjs-spacing-x2); + --lbr-dynamic-panel-footer-padding-top: var(--sjs-spacing-x3); + --lbr-dynamic-panel-footer-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-question-panel-border-color-hovered: var(--sjs-secondary-background-25); + --ctr-survey-question-panel-border-width-hovered: var(--sjs-stroke-x2); + --ctr-survey-question-panel-border-color-nested: var(--sjs-border-25); + --ctr-survey-question-panel-border-width-nested: var(--sjs-stroke-x1); + --ctr-survey-question-panel-corner-radius-selection-panelless: var(--sjs-corner-radius-x075); + --lbr-panel-border-color-panelless: var(--sjs-border-25); + --lbr-panel-border-width-panelless: var(--sjs-stroke-x1); + --lbr-question-panel-background-color-hovered: var(--sjs-layer-1-background-400); + --ctr-survey-page-border-color-hovered: var(--sjs-secondary-background-25); + --ctr-survey-page-border-width-hovered: var(--sjs-stroke-x2); + --lbr-panel-border-color-nested: var(--sjs-border-10); + --lbr-panel-border-width-nested: var(--sjs-stroke-x1); + --lbr-panel-border-color-nested-panelless: var(--sjs-border-10); + --lbr-panel-border-width-nested-panelless: var(--sjs-stroke-x1); + --lbr-dynamic-panel-footer-border-color: var(--sjs-border-10); + --lbr-dynamic-panel-footer-border-width-top: var(--sjs-stroke-x1); + --lbr-dynamic-panel-progress-bar-background-color: var(--sjs-layer-1-background-500); + --lbr-progress-bar-section-title-color-selected: var(--sjs-layer-3-foreground-100); + --lbr-progress-bar-section-title-color-pressed: var(--sjs-layer-3-foreground-100); + --lbr-matrix-row-background-color-alternate: var(--sjs-layer-1-background-400); + --lbr-question-panel-header-title-color: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-header-description-color: var(--sjs-layer-1-foreground-50); + --lbr-question-panel-header-gap: var(--sjs-spacing-x05); + --lbr-question-panel-number-color: var(--sjs-layer-1-foreground-50); + --lbr-question-panel-number-width: var(--sjs-size-x5); + --lbr-question-panel-number-margin-left: var(--sjs-spacing-x1); + --lbr-question-panel-number-margin-right: var(--sjs-spacing-x1); + --lbr-question-panel-number-height: var(--sjs-size-x3); + --lbr-question-panel-number-margin-bottom: var(--sjs-spacing-x0375); + --lbr-question-panel-expand-button-icon-width: var(--sjs-size-x2); + --lbr-question-panel-expand-button-icon-height: var(--sjs-size-x2); + --lbr-question-panel-expand-button-padding-left: var(--sjs-spacing-x2); + --lbr-question-panel-expand-button-padding-right: var(--sjs-spacing-x1); + --lbr-question-panel-expand-button-padding-top: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-padding-bottom: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-survey-panel-add-button-margin-top: var(--sjs-spacing-x1); + --lbr-panel-content-margin-left: var(--sjs-spacing-x5); + --lbr-panel-content-margin-right: var(--sjs-spacing-x5); + --lbr-panel-content-margin-top: var(--sjs-spacing-x5); + --lbr-panel-content-margin-bottom: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-title-color: var(--sjs-layer-1-foreground-50); + --lbr-dynamic-panel-item-header-title-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-item-header-padding-bottom: var(--sjs-spacing-x4); + --lbr-dynamic-panel-remove-button-margin: var(--sjs-spacing-x2); + --lbr-page-header-title-color: var(--sjs-layer-3-foreground-100); + --lbr-page-header-description-color: var(--sjs-layer-3-foreground-50); + --lbr-page-header-title-color-not-completed-rule: var(--sjs-secondary-background-500); + --lbr-page-header-title-gap: var(--sjs-spacing-x2); + --lbr-page-header-gap: var(--sjs-spacing-x05); + --lbr-page-header-padding-vertical-with-button: var(--sjs-spacing-x05); + --lbr-toc-menu-button-background-color-page: var(--lbr-background-color); + --lbr-background-color: var(--sjs-layer-3-background-500); + --lbr-popup-menu-corner-radius: var(--sjs-corner-radius-x05); + --lbr-popup-menu-padding-left: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-right: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-top: var(--sjs-spacing-x05); + --lbr-popup-menu-padding-bottom: var(--sjs-spacing-x05); + --lbr-popup-menu-background-color: var(--sjs-layer-1-background-500); + --lbr-popup-menu-shadow-1-offset-x: var(--lbr-shadow-large-offset-x); + --lbr-popup-menu-shadow-1-offset-y: var(--lbr-shadow-large-offset-y); + --lbr-popup-menu-shadow-1-blur: var(--lbr-shadow-large-blur); + --lbr-popup-menu-shadow-1-spread: var(--lbr-shadow-large-spread); + --lbr-popup-menu-shadow-1-color: var(--lbr-shadow-large-color); + --lbr-popup-menu-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-popup-menu-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-popup-menu-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-popup-menu-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-popup-menu-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-popup-menu-screen-color: var(--sjs-special-haze); + --lbr-popup-menu-margin-left: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-right: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-top: var(--sjs-spacing-x4); + --lbr-popup-menu-margin-bottom: var(--sjs-spacing-x4); + --lbr-popup-menu-width-tablet: var(--sjs-size-x40); + --lbr-pager-text-color: var(--sjs-layer-1-foreground-50); + --lbr-pager-text-margin-top: var(--sjs-spacing-x05); + --lbr-pager-text-margin-bottom: var(--sjs-spacing-x05); + --lbr-pager-gap: var(--sjs-spacing-x2); + --lbr-error-panel-background-color: var(--sjs-semantic-red-background-10); + --lbr-error-panel-text-color: var(--sjs-semantic-red-background-500); + --lbr-error-panel-corner-radius: var(--sjs-corner-radius-x05); + --lbr-error-panel-padding-left-small: var(--sjs-spacing-x150); + --lbr-error-panel-padding-right-small: var(--sjs-spacing-x150); + --lbr-error-panel-padding-top-small: var(--sjs-spacing-x1); + --lbr-error-panel-padding-bottom-small: var(--sjs-spacing-x1); + --lbr-error-panel-padding-left-medium: var(--sjs-spacing-x3); + --lbr-error-panel-padding-right-medium: var(--sjs-spacing-x3); + --lbr-error-panel-padding-top-medium: var(--sjs-spacing-x2); + --lbr-error-panel-padding-bottom-medium: var(--sjs-spacing-x2); + --lbr-error-panel-padding-left-large: var(--sjs-spacing-x5); + --lbr-error-panel-padding-right-large: var(--sjs-spacing-x5); + --lbr-error-panel-padding-top-large: var(--sjs-spacing-x3); + --lbr-error-panel-padding-bottom-large: var(--sjs-spacing-x3); + --lbr-placeholder-text-color: var(--sjs-layer-1-foreground-50); + --lbr-placeholder-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-placeholder-padding-left: var(--sjs-spacing-x8); + --lbr-placeholder-padding-right: var(--sjs-spacing-x8); + --lbr-placeholder-padding-top: var(--sjs-spacing-x2); + --lbr-placeholder-padding-bottom: var(--sjs-spacing-x2); + --lbr-placeholder-gap: var(--sjs-spacing-x05); + --lbr-placeholder-padding-left-small: var(--sjs-spacing-x3); + --lbr-placeholder-padding-right-small: var(--sjs-spacing-x3); + --lbr-placeholder-padding-bottom-with-button-small: var(--sjs-spacing-x2); + --lbr-logo-color-primary: var(--sjs-primary-background-500); + --lbr-logo-color-secondary: var(--sjs-secondary-background-500); + --lbr-scrollbar-thumb-color: var(--sjs-border-25); + --lbr-scrollbar-thumb-margin: var(--sjs-spacing-x05); + --lbr-scrollbar-width: var(--sjs-size-x150); + --lbr-scrollbar-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-complete-page-gap: var(--sjs-spacing-x6); + --lbr-complete-page-padding-left: var(--sjs-spacing-x8); + --lbr-complete-page-padding-right: var(--sjs-spacing-x8); + --lbr-complete-page-padding-top: var(--sjs-spacing-x12); + --lbr-complete-page-padding-bottom: var(--sjs-spacing-x16); + --lbr-complete-page-text-title-color: var(--sjs-layer-3-foreground-100); + --lbr-complete-page-text-description-color: var(--sjs-layer-3-foreground-50); + --lbr-complete-page-text-gap: var(--sjs-spacing-x2); + --lbr-complete-page-gap-no-description: var(--sjs-spacing-x3); + --lbr-placeholder-text-color-active: var(--sjs-layer-1-foreground-100); + --lbr-signature-background-error: var(--sjs-semantic-red-background-10); + --lbr-signature-signature-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-signature-signature-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-signature-signature-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-footer-logo-height: var(--sjs-spacing-x8); + --lbr-footer-text-title-color: var(--sjs-layer-1-foreground-100); + --lbr-footer-text-description-color: var(--sjs-layer-1-foreground-50); + --lbr-footer-text-gap: var(--sjs-spacing-x05); + --lbr-footer-gap: var(--sjs-spacing-x1); + --lbr-footer-padding-left: var(--sjs-spacing-x16); + --lbr-footer-padding-right: var(--sjs-spacing-x16); + --lbr-footer-padding-top: var(--sjs-spacing-x4); + --lbr-footer-padding-bottom: var(--sjs-spacing-x4); + --lbr-footer-background-color: var(--sjs-layer-1-background-500); + --lbr-footer-border-width-bottom: var(--sjs-stroke-x1); + --lbr-footer-border-color: var(--sjs-border-25); + --lbr-footer-padding-left-simple: var(--sjs-spacing-x2); + --lbr-footer-padding-right-simple: var(--sjs-spacing-x2); + --lbr-footer-padding-top-simple: var(--sjs-spacing-x1); + --lbr-footer-padding-bottom-simple: var(--sjs-spacing-x1); + --lbr-footer-logo-color-simple: var(--sjs-layer-3-foreground-50); + --lbr-top-banner-background-color: var(--sjs-secondary-background-500); + --lbr-top-banner-text-color: var(--sjs-secondary-foreground-100); + --lbr-top-banner-padding-left: var(--sjs-spacing-x16); + --lbr-top-banner-padding-right: var(--sjs-spacing-x16); + --lbr-top-banner-padding-top: var(--sjs-spacing-x150); + --lbr-top-banner-padding-bottom: var(--sjs-spacing-x2); + --lbr-top-banner-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-top-banner-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-top-banner-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-top-banner-padding-bottom-mobile: var(--sjs-spacing-x150); + --lbr-dynamic-panel-item-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-nested-matrix-panel-header-border-color-nested: var(--sjs-border-10); + --lbr-nested-matrix-panel-header-border-width-bottom-nested: var(--sjs-stroke-x1); + --ctr-survey-page-header-title-color-placeholder: var(--sjs-layer-3-foreground-50); + --lbr-pager-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-panel-header-border-color: var(--sjs-border-10); + --lbr-panel-header-border-width-bottom: var(--sjs-stroke-x1); + --lbr-panel-content-margin-left-mobile: var(--sjs-spacing-x3); + --lbr-panel-content-margin-right-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-left: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-right: var(--sjs-spacing-x3); + --lbr-dynamic-panel-details-area-padding-top: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-bottom: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-top-header-below: var(--sjs-spacing-x150); + --lbr-question-panel-header-description-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-header-padding-bottom-action-button: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-top-header-below-mobile: var(--sjs-spacing-x075); + --lbr-question-panel-expand-button-padding-left-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-expand-button-padding-right-mobile: var(--sjs-spacing-x05); + --lbr-question-panel-expand-button-icon-width-mobile: var(--sjs-size-x150); + --lbr-question-panel-expand-button-icon-height-mobile: var(--sjs-size-x150); + --lbr-question-panel-expand-button-padding-top-mobile: var(--sjs-spacing-x075); + --lbr-question-panel-expand-button-padding-bottom-mobile: var(--sjs-spacing-x075); + --ctr-survey-question-panel-toolbar-margin-top-mobile: var(--sjs-spacing-x1); + --lbr-nested-matrix-panel-header-padding-bottom-nested: var(--sjs-spacing-x2); + --lbr-matrix-total-row-cell-text-color: var(--sjs-layer-1-foreground-100); + --lbr-dynamic-panel-item-header-padding-left: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-padding-right: var(--sjs-spacing-x5); + --lbr-dynamic-panel-item-header-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-item-header-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-left: var(--sjs-spacing-x5); + --lbr-panel-header-padding-right: var(--sjs-spacing-x5); + --lbr-panel-header-padding-top: var(--sjs-spacing-x4); + --lbr-panel-header-padding-bottom: var(--sjs-spacing-x4); + --lbr-panel-header-title-color: var(--sjs-layer-1-foreground-100); + --lbr-question-panel-expand-button-icon-color-focused: var(--sjs-layer-1-background-500); + --lbr-question-panel-expand-button-icon-color-focused-stroke: var(--sjs-primary-background-500); + --lbr-dynamic-panel-item-header-padding-top: var(--sjs-spacing-x4); + --lbr-dynamic-panel-item-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-panel-header-padding-top-nested: var(--sjs-spacing-x2); + --lbr-panel-header-padding-bottom-nested: var(--sjs-spacing-x2); + --lbr-panel-header-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-panel-header-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-panel-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-panel-content-margin-top-mobile: var(--sjs-spacing-x3); + --lbr-panel-content-margin-bottom-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-footer-padding-top-mobile: var(--sjs-spacing-x1); + --lbr-dynamic-panel-footer-padding-bottom-mobile: var(--sjs-spacing-x1); + --lbr-dynamic-panel-remove-button-margin-vertical-mobile: var(--sjs-spacing-x1); + --lbr-page-button-footer-margin-top-panelless: var(--sjs-spacing-x7); + --lbr-page-padding-left-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-right-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-bottom-responsive: var(--sjs-spacing-x5); + --lbr-page-padding-top-responsive: var(--sjs-spacing-x5); + --lbr-page-width: var(--sjs-size-x80); + --lbr-page-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-page-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-page-error-margin-top-below-content-mobile: var(--sjs-spacing-x2); + --lbr-page-error-margin-bottom-above-content-mobile: var(--sjs-spacing-x2); + --ctr-survey-page-button-footer-margin-top: var(--sjs-spacing-x2); + --ctr-survey-page-padding-left: var(--sjs-spacing-x3); + --ctr-survey-page-padding-right: var(--sjs-spacing-x3); + --ctr-survey-page-padding-top: var(--sjs-spacing-x5); + --ctr-survey-page-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-page-margin-left: var(--sjs-spacing-x2); + --ctr-survey-page-margin-right: var(--sjs-spacing-x2); + --ctr-survey-page-margin-top: var(--sjs-spacing-x2); + --ctr-survey-page-width: var(--sjs-size-x90); + --ctr-survey-page-padding-top-selected: var(--sjs-spacing-x1); + --ctr-survey-page-background-color-hovered: var(--sjs-special-background); + --ctr-survey-page-margin-bottom-new-page: var(--sjs-spacing-x9); + --ctr-survey-question-panel-margin-left-panelless: var(--sjs-spacing-x2n); + --ctr-survey-question-panel-margin-right-panelless: var(--sjs-spacing-x2n); + --ctr-survey-question-panel-margin-top-panelless: var(--sjs-spacing-x2n); + --ctr-survey-page-toolbar-margin-left: var(--sjs-spacing-x1n); + --ctr-survey-page-toolbar-margin-right: var(--sjs-spacing-x1n); + --ctr-survey-page-padding-top-mobile: var(--sjs-spacing-x3); + --lbr-dynamic-panel-content-margin-bottom-placeholder: var(--sjs-spacing-x10); + --lbr-question-panel-padding-left: var(--sjs-spacing-x5); + --lbr-question-panel-padding-right: var(--sjs-spacing-x5); + --lbr-question-panel-padding-top: var(--sjs-spacing-x4); + --lbr-question-panel-padding-bottom: var(--sjs-spacing-x5); + --lbr-question-panel-header-padding-right-header-left: var(--sjs-spacing-x3); + --lbr-question-panel-header-padding-bottom-header-left: var(--sjs-spacing-x150); + --lbr-question-panel-header-padding-top-header-left: var(--sjs-spacing-x150); + --lbr-question-panel-padding-left-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-top-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-top-no-header: var(--sjs-spacing-x5); + --lbr-question-panel-padding-bottom-collapsed: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-top-action-button: var(--sjs-spacing-x1n); + --lbr-question-panel-header-padding-bottom-action-button-collapsed: var(--sjs-spacing-x1n); + --lbr-question-panel-error-margin-vertical: var(--sjs-spacing-x5); + --lbr-question-panel-error-margin-vertical-near-header: var(--sjs-spacing-x4); + --lbr-question-panel-error-margin-horizontal: var(--sjs-spacing-x5n); + --lbr-question-panel-error-margin-vertical-panelless: var(--sjs-spacing-x1); + --lbr-question-panel-error-margin-vertical-near-header-panelless: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-header-below: var(--sjs-spacing-x4); + --lbr-question-panel-error-margin-horizontal-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-error-margin-vertical-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-error-margin-vertical-near-header-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-top-no-header-mobile: var(--sjs-spacing-x3); + --lbr-question-panel-padding-bottom-header-below-mobile: var(--sjs-spacing-x2); + --lbr-question-panel-padding-bottom-collapsed-mobile: var(--sjs-spacing-x1); + --lbr-question-panel-header-padding-left-expandable: var(--sjs-spacing-x5n); + --lbr-question-panel-header-padding-left-numbering: var(--sjs-spacing-x5n); + --lbr-question-panel-header-padding-right-action-button: var(--sjs-spacing-x3n); + --lbr-question-panel-padding-top-collapsed: var(--sjs-spacing-x2); + --lbr-question-panel-header-padding-left-expandable-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-header-padding-left-numbering-mobile: var(--sjs-spacing-x3n); + --lbr-question-panel-padding-top-collapsed-mobile: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-bottom-selected: var(--sjs-spacing-x2); + --ctr-survey-question-panel-drag-area-margin-left: var(--sjs-spacing-x5n); + --ctr-survey-question-panel-drag-area-margin-right: var(--sjs-spacing-x5n); + --ctr-survey-question-panel-padding-bottom-minimized: var(--sjs-spacing-x4); + --ctr-survey-question-panel-drag-area-margin-bottom-no-header: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-left-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-right-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-top-panelless: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-panelless-no-editing: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-selected-mobile: var(--sjs-spacing-x1); + --ctr-survey-question-panel-drag-area-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-question-panel-drag-area-margin-right-mobile: var(--sjs-spacing-x3n); + --ctr-survey-question-panel-padding-bottom: var(--sjs-spacing-x8); + --lbr-page-header-padding-bottom: var(--sjs-spacing-x3); + --ctr-survey-question-panel-margin-bottom-panelless: var(--sjs-spacing-x2n); + --ctr-survey-page-button-footer-margin-top-panelless: var(--sjs-spacing-x7); + --lbr-page-header-padding-bottom-mobile: var(--sjs-spacing-x2); + --lbr-multiple-text-gap: var(--sjs-spacing-x2); + --lbr-labeled-editor-error-margin-top: var(--sjs-spacing-x1); + --ctr-string-table-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-string-table-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-string-table-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-string-table-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-string-table-shadow-color: var(--ctr-shadow-small-color); + --ctr-survey-question-panel-drag-area-expand-button-margin: var(--sjs-spacing-x05); + --lbr-editor-min-height: var(--sjs-size-x6); + --lbr-matrix-row-padding-left-expandable-header-row: var(--sjs-spacing-x6); + --lbr-matrix-row-padding-right-delete-button-colunm-title-row: var(--sjs-spacing-x7); + --lbr-matrix-margin-left: var(--sjs-spacing-x2n); + --lbr-matrix-gap: var(--sjs-spacing-x2); + --lbr-matrix-details-padding-left-no-row-titles: var(--sjs-spacing-x6); + --lbr-matrix-add-button-margin-left: var(--sjs-spacing-x3n); + --lbr-matrix-add-button-margin-left-expandable: var(--sjs-spacing-x3); + --lbr-matrix-margin-top-colunm-titles: var(--sjs-spacing-x150n); + --lbr-matrix-margin-bottom-add-button: var(--sjs-spacing-x150n); + --lbr-matrix-row-padding-top-single-select: var(--sjs-spacing-x1); + --lbr-matrix-row-padding-bottom-single-select: var(--sjs-spacing-x1); + --lbr-matrix-row-margin-bottom-column-titles-alt-rows: var(--sjs-spacing-x2); + --ctr-survey-ranking-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-ranking-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-radio-button-group-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-radio-button-group-item-margin-left-hovered-mobile: var(--sjs-spacing-x3n); + --lbr-drop-down-buttons-gap: var(--sjs-spacing-x05); + --lbr-drop-down-padding-left: var(--sjs-spacing-x2); + --lbr-drop-down-padding-right: var(--sjs-spacing-x05); + --lbr-drop-down-padding-top: var(--sjs-spacing-x05); + --lbr-drop-down-padding-bottom: var(--sjs-spacing-x05); + --lbr-tag-box-gap: var(--sjs-spacing-x05); + --lbr-tag-box-padding-left: var(--sjs-spacing-x05); + --lbr-tag-box-search-text-margin-left: var(--sjs-spacing-x2); + --lbr-file-upload-height: var(--sjs-size-x40); + --lbr-ranking-gap-horizontal: var(--sjs-spacing-x5); + --lbr-image-height: var(--sjs-size-x40); + --ctr-survey-image-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --ctr-survey-image-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-image-picker-item-height: var(--sjs-size-x20); + --lbr-image-picker-item-select-button-margin-left: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-right: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-top: var(--sjs-spacing-x1); + --lbr-image-picker-item-select-button-margin-bottom: var(--sjs-spacing-x1); + --lbr-signature-height: var(--sjs-size-x40); + --lbr-signature-contextual-buttons-margin-left: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-right: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-top: var(--sjs-spacing-x1); + --lbr-signature-contextual-buttons-margin-bottom: var(--sjs-spacing-x1); + --lbr-ranking-drop-spot-height: var(--sjs-spacing-x5); + --lbr-ranking-drop-spot-width: var(--sjs-size-x32); + --lbr-ranking-drop-spot-corner-radius: var(--sjs-corner-radius-round); + --ctr-toolbox-group-header-min-height: var(--sjs-spacing-x5); + --lbr-image-picker-gap: var(--sjs-spacing-x2); + --ctr-editor-layout-min-width: var(--sjs-size-x32); + --lbr-image-picker-item-min-width: var(--sjs-size-x32); + --ctr-data-table-actionbar-button-width: var(--sjs-spacing-x5); + --ctr-actionbar-button-icon-color-colorful: var(--sjs-primary-background-500); + --lbr-toc-menu-button-margin-page: var(--sjs-spacing-x2); + --lbr-toc-menu-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-survey-item-actionbar-padding-left-inactive-mobile: var(--sjs-spacing-x5); + --ctr-survey-radio-button-group-show-more-button-margin-left-mobile: var(--sjs-spacing-x8); + --ctr-survey-checkboxes-show-more-button-margin-left-mobile: var(--sjs-spacing-x8); + --lbr-rating-item-width-small: var(--sjs-spacing-x3); + --lbr-rating-item-height-small: var(--sjs-spacing-x3); + --lbr-contextual-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --lbr-contextual-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-contextual-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-list-search-padding-left: var(--sjs-spacing-x2); + --ctr-list-search-padding-right: var(--sjs-spacing-x2); + --ctr-list-search-padding-top: var(--sjs-spacing-x250); + --ctr-list-search-padding-bottom: var(--sjs-spacing-x250); + --ctr-list-search-border-width-bottom: var(--sjs-stroke-x1); + --ctr-list-search-border-color: var(--sjs-border-25); + --ctr-list-search-gap: var(--sjs-spacing-x2); + --ctr-list-search-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --ctr-list-search-text-color: var(--sjs-layer-1-foreground-100); + --ctr-list-search-icon-width: var(--sjs-size-x3); + --ctr-list-search-icon-height: var(--sjs-size-x3); + --ctr-property-grid-search-icon-width: var(--sjs-size-x3); + --ctr-property-grid-search-icon-height: var(--sjs-size-x3); + --ctr-toolbox-search-icon-width: var(--sjs-size-x3); + --ctr-toolbox-search-icon-height: var(--sjs-size-x3); + --ctr-button-padding-horizontal-contextual-button: var(--sjs-spacing-x10); + --ctr-survey-header-width: var(--sjs-size-x86); + --ctr-surface-gap: var(--sjs-spacing-x5); + --ctr-surface-padding-top: var(--sjs-spacing-x5); + --ctr-expression-item-padding-left-button: var(--sjs-spacing-x4); + --ctr-expression-item-padding-right-button: var(--sjs-spacing-x4); + --ctr-preview-device-background-color: var(--sjs-layer-1-background-500); + --ctr-preview-device-border-color: var(--sjs-layer-3-background-500); + --ctr-preview-device-border-width: var(--sjs-stroke-x4); + --ctr-preview-device-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-preview-device-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-preview-device-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-preview-device-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-preview-device-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-preview-device-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-preview-device-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-preview-device-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-preview-device-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-preview-device-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-preview-device-padding-left: var(--sjs-spacing-x2); + --ctr-preview-device-padding-right: var(--sjs-spacing-x2); + --ctr-preview-device-padding-top: var(--sjs-spacing-x8); + --ctr-preview-device-padding-bottom: var(--sjs-spacing-x8); + --ctr-preview-device-frame-background-color: var(--lbr-background-color); + --ctr-preview-device-corner-radius: var(--sjs-corner-radius-x4); + --ctr-surface-padding-left: var(--sjs-spacing-x5); + --ctr-surface-padding-right: var(--sjs-spacing-x5); + --ctr-surface-padding-bottom: var(--sjs-spacing-x5); + --ctr-preview-device-frame-border-width: var(--sjs-stroke-x2); + --ctr-preview-device-frame-border-color: var(--sjs-border-25); + --ctr-surface-divider-color: var(--sjs-border-25); + --ctr-surface-divider-width: var(--sjs-stroke-x1); + --ctr-toolbox-button-padding-left: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-right: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-top: var(--sjs-spacing-x1); + --ctr-toolbox-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-toolbox-button-margin-horizontal: var(--sjs-spacing-x05); + --ctr-toolbox-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-toolbox-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-border-width-right-floating: var(--sjs-stroke-x1); + --ctr-surface-text-color: var(--sjs-layer-3-foreground-100); + --ctr-surface-text-color-link: var(--sjs-primary-background-400); + --ctr-string-table-background-color: var(--sjs-layer-3-background-500); + --lbr-header-gap-mobile: var(--sjs-spacing-x2); + --lbr-toc-menu-button-margin-right-header: var(--sjs-spacing-x1n); + --lbr-complete-page-text-max-width: var(--sjs-size-x90); + --ctr-toolbox-item-padding-left-submenu: var(--sjs-spacing-x2); + --ctr-toolbox-item-padding-top-submenu: var(--sjs-spacing-x150); + --ctr-toolbox-item-padding-bottom-submenu: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-margin-left: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-gap: var(--sjs-spacing-x05); + --ctr-data-table-row-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-data-table-row-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-data-table-row-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-data-table-row-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-data-table-row-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-data-table-row-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-data-table-row-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-data-table-row-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-data-table-row-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-data-table-row-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-code-viewer-code-error-row-fix-button-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-code-viewer-code-error-row-fix-button-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-code-viewer-code-error-row-fix-button-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-code-viewer-code-error-row-fix-button-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-code-viewer-code-error-row-fix-button-shadow-color: var(--ctr-shadow-small-color); + --ctr-toolbox-item-shadow-floating-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-floating-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-floating-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-floating-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-floating-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-item-shadow-floating-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-item-shadow-floating-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-item-shadow-floating-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-item-shadow-floating-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-item-shadow-floating-2-color: var(--ctr-shadow-large-color); + --ctr-toolbox-item-shadow-hovered-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-hovered-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-hovered-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-hovered-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-pressed-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-pressed-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-pressed-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-pressed-spread: var(--ctr-shadow-small-spread); + --ctr-toolbox-item-shadow-hovered-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-hovered-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-hovered-2-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-hovered-2-spread: var(--ctr-shadow-small-spread); + --ctr-page-navigator-item-shadow-hovered-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-page-navigator-item-shadow-hovered-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-page-navigator-item-shadow-hovered-1-blur: var(--ctr-shadow-medium-blur); + --ctr-page-navigator-item-shadow-hovered-1-spread: var(--ctr-shadow-medium-spread); + --ctr-page-navigator-item-shadow-hovered-1-color: var(--ctr-shadow-medium-color); + --ctr-page-navigator-item-shadow-hovered-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-page-navigator-item-shadow-hovered-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-page-navigator-item-shadow-hovered-2-blur: var(--ctr-shadow-small-blur); + --ctr-page-navigator-item-shadow-hovered-2-spread: var(--ctr-shadow-small-spread); + --ctr-page-navigator-item-shadow-hovered-2-color: var(--ctr-shadow-small-color); + --ctr-button-shadow-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-button-shadow-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-button-shadow-blur: var(--ctr-shadow-small-blur); + --ctr-button-shadow-spread: var(--ctr-shadow-small-spread); + --ctr-button-shadow-color: var(--ctr-shadow-small-color); + --ctr-popup-menu-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-popup-menu-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-popup-menu-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-popup-menu-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-popup-menu-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-popup-menu-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-popup-menu-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-popup-menu-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-popup-menu-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-popup-menu-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-text-decor-shadow-editing-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-text-decor-shadow-editing-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-text-decor-shadow-editing-blur: var(--ctr-shadow-medium-blur); + --ctr-text-decor-shadow-editing-spread: var(--ctr-shadow-medium-spread); + --ctr-text-decor-shadow-editing-color: var(--ctr-shadow-medium-color); + --ctr-search-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-search-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-search-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-search-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-search-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-search-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-search-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-search-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-search-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-search-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-popup-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-popup-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-popup-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-popup-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-popup-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-popup-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-popup-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-popup-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-popup-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-popup-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-popup-shadow-3-offset-x: var(--ctr-shadow-x-large-offset-x); + --ctr-popup-shadow-3-offset-y: var(--ctr-shadow-x-large-offset-y); + --ctr-popup-shadow-3-blur: var(--ctr-shadow-x-large-blur); + --ctr-popup-shadow-3-spread: var(--ctr-shadow-x-large-spread); + --ctr-popup-shadow-3-color: var(--ctr-shadow-x-large-color); + --ctr-notification-shadow-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-notification-shadow-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-notification-shadow-blur: var(--ctr-shadow-medium-blur); + --ctr-notification-shadow-spread: var(--ctr-shadow-medium-spread); + --ctr-notification-shadow-color: var(--ctr-shadow-medium-color); + --lbr-shadow-inner-color: var(--sjs-special-shadow); + --ctr-code-viewer-text-margin-left-results-table: var(--sjs-spacing-x3); + --ctr-code-viewer-text-margin-right-results-table: var(--sjs-spacing-x3); + --ctr-code-viewer-text-margin-top-results-table: var(--sjs-spacing-x2); + --ctr-code-viewer-text-margin-bottom-results-table: var(--sjs-spacing-x2); + --lbr-matrix-margin-right-delete-button: var(--sjs-spacing-x3n); + --ctr-survey-ranking-info-panel-margin-top-select-to-rank-horizontal: var(--sjs-spacing-x2); + --ctr-checkbox-list-margin-top: var(--sjs-spacing-x2); + --ctr-editor-color-swatch-background-color-secondary: var(--sjs-secondary-background-500); + --ctr-editor-color-swatch-background-color-red: var(--sjs-semantic-red-background-500); + --ctr-editor-color-swatch-background-color-blue: var(--sjs-semantic-blue-background-500); + --ctr-editor-color-swatch-background-color-light: var(--sjs-layer-3-background-500); + --ctr-editor-color-swatch-background-color-dark: var(--sjs-layer-1-foreground-100); + --ctr-editor-color-swatch-background-color-gray: var(--sjs-layer-1-foreground-50); + --ctr-list-item-color-swatch-color-secondary: var(--sjs-secondary-background-500); + --ctr-list-item-color-swatch-color-red: var(--sjs-semantic-red-background-500); + --ctr-list-item-color-swatch-color-blue: var(--sjs-semantic-blue-background-500); + --ctr-list-item-color-swatch-color-light: var(--sjs-layer-3-background-500); + --ctr-list-item-color-swatch-color-dark: var(--sjs-layer-1-foreground-100); + --ctr-list-item-color-swatch-color-gray: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-background-color-submenu: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-text-color-submenu: var(--sjs-layer-2-foreground-100); + --lbr-file-upload-item-remove-button-margin-right-file: var(--sjs-spacing-x05); + --lbr-file-upload-item-remove-button-margin-right-thumbnail: var(--sjs-spacing-x2n); + --lbr-file-upload-item-remove-button-margin-top-thumbnail: var(--sjs-spacing-x2n); + --lbr-contextual-button-border-color-hovered-negative: var(--sjs-semantic-red-background-500); + --ctr-survey-contextual-button-border-color-hovered-negative: var(--sjs-semantic-red-background-500); + --lbr-step-progress-bar-padding-left-fit-to-survey: var(--sjs-spacing-x05n); + --lbr-step-progress-bar-padding-right-fit-to-survey: var(--sjs-spacing-x05n); + --lbr-step-progress-bar-padding-left-fit-to-survey-with-number: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-padding-right-fit-to-survey-with-number: var(--sjs-spacing-x1n); + --lbr-step-progress-bar-width: var(--sjs-size-x80); + --ctr-toolbox-min-width: var(--sjs-size-x32); + --ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x8); + --ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x8); + --ctr-popup-menu-margin-left-tablet: var(--sjs-spacing-x3); + --ctr-popup-menu-margin-right-tablet: var(--sjs-spacing-x3); + --ctr-popup-menu-max-width-tablet: var(--sjs-size-x40); + --ctr-font-default-line-height-all-caps: var(--sjs-line-height-x2); + --ctr-page-navigator-margin-top: var(--sjs-spacing-x12); + --lbr-progress-bar-height-large: var(--sjs-size-x05); + --lbr-progress-bar-margin-vertical: var(--sjs-spacing-x6n); + --lbr-progress-bar-margin-vertical-with-titles: var(--sjs-spacing-x3n); + --lbr-progress-bar-pager-label-background-color-floating: var(--sjs-layer-1-background-500); + --lbr-progress-bar-pager-label-padding-left: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-label-padding-right: var(--sjs-spacing-x150); + --lbr-progress-bar-pager-label-padding-top: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-label-padding-bottom: var(--sjs-spacing-x1); + --lbr-progress-bar-pager-label-corner-radius: var(--sjs-corner-radius-x05); + --lbr-progress-bar-pager-label-text-color-floating: var(--sjs-layer-1-foreground-100); + --lbr-progress-bar-pager-label-shadow-1-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-progress-bar-pager-label-shadow-1-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-progress-bar-pager-label-shadow-1-blur: var(--lbr-shadow-small-blur); + --lbr-progress-bar-pager-label-shadow-1-spread: var(--lbr-shadow-small-spread); + --lbr-progress-bar-pager-label-shadow-1-color: var(--lbr-shadow-small-color); + --lbr-progress-bar-pager-label-shadow-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-progress-bar-pager-label-shadow-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-progress-bar-pager-label-shadow-2-blur: var(--lbr-shadow-medium-blur); + --lbr-progress-bar-pager-label-shadow-2-spread: var(--lbr-shadow-medium-spread); + --lbr-progress-bar-pager-label-shadow-2-color: var(--lbr-shadow-medium-color); + --lbr-step-progress-bar-background-color-fixed: var(--sjs-layer-3-background-500); + --lbr-step-progress-bar-shadow-fixed-1-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-step-progress-bar-shadow-fixed-1-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-step-progress-bar-shadow-fixed-1-blur: var(--lbr-shadow-small-blur); + --lbr-step-progress-bar-shadow-fixed-1-spread: var(--lbr-shadow-small-spread); + --lbr-step-progress-bar-shadow-fixed-1-color: var(--lbr-shadow-small-color); + --lbr-step-progress-bar-shadow-fixed-2-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-step-progress-bar-shadow-fixed-2-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-step-progress-bar-shadow-fixed-2-blur: var(--lbr-shadow-medium-blur); + --lbr-step-progress-bar-shadow-fixed-2-spread: var(--lbr-shadow-medium-spread); + --lbr-step-progress-bar-shadow-fixed-2-color: var(--lbr-shadow-medium-color); + --lbr-step-progress-bar-margin-top-fixed: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-top-no-titles-fixed: var(--sjs-spacing-x2); + --lbr-step-progress-bar-margin-bottom-no-titles-fixed: var(--sjs-spacing-x1); + --lbr-step-progress-bar-margin-bottom-with-pager-fixed: var(--sjs-spacing-x150); + --lbr-step-progress-bar-margin-top-position-bottom-mobile: var(--sjs-spacing-x2); + --ctr-page-banner-background-color: var(--sjs-secondary-background-500); + --ctr-page-banner-text-color: var(--sjs-secondary-foreground-100); + --ctr-page-banner-padding-left: var(--sjs-spacing-x8); + --ctr-page-banner-padding-right: var(--sjs-spacing-x8); + --ctr-page-banner-padding-top: var(--sjs-spacing-x150); + --ctr-page-banner-padding-bottom: var(--sjs-spacing-x2); + --ctr-page-banner-padding-left-mobile: var(--sjs-spacing-x3); + --ctr-page-banner-padding-right-mobile: var(--sjs-spacing-x3); + --ctr-page-banner-padding-top-mobile: var(--sjs-spacing-x1); + --ctr-page-banner-padding-bottom-mobile: var(--sjs-spacing-x150); + --ctr-survey-panel-border-color-container: var(--sjs-border-25); + --ctr-survey-panel-border-width-container: var(--sjs-stroke-x1); + --ctr-survey-question-panel-padding-bottom-selected-panelless: var(--sjs-spacing-x1); + --ctr-survey-question-panel-padding-bottom-panelless: var(--sjs-spacing-x6); + --ctr-surface-background-color-panelless: var(--sjs-layer-1-background-500); + --ctr-button-background-color-panelless: var(--sjs-layer-2-background-500); + --ctr-button-background-color-panelless-hovered: var(--sjs-layer-2-background-400); + --ctr-button-text-color-panelless-disabled: var(--sjs-layer-2-foreground-100); + --ctr-button-contextual-button-icon-color-panelless: var(--sjs-layer-2-foreground-50); + --ctr-toolbox-group-padding-left-compact: var(--sjs-spacing-x150); + --ctr-toolbox-group-padding-right-compact: var(--sjs-spacing-x150); + --ctr-radio-button-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-checkbox-button-check-mark-width: var(--sjs-size-x2); + --ctr-checkbox-button-check-mark-height: var(--sjs-size-x2); + --lbr-drop-down-content-margin-top: var(--sjs-spacing-x1); + --lbr-drop-down-content-margin-bottom: var(--sjs-spacing-x1); + --ctr-property-grid-width: var(--sjs-size-x60); + --ctr-survey-panel-drag-area-margin-bottom-panelless-selected: var(--sjs-spacing-x2); + --ctr-survey-panel-drag-area-margin-bottom-panelless-no-header-selected: var(--sjs-spacing-x3); + --ctr-survey-question-panel-floating-toolbar-margin: var(--sjs-spacing-x150); + --ctr-survey-question-panel-floating-toolbar-padding-left: var(--sjs-spacing-x150); + --ctr-survey-question-panel-floating-toolbar-padding-right: var(--sjs-spacing-x150); + --ctr-survey-question-panel-floating-toolbar-padding-top: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-padding-bottom: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-gap-items: var(--sjs-spacing-x05); + --ctr-survey-question-panel-floating-toolbar-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-question-panel-floating-toolbar-border-color: var(--sjs-border-10); + --ctr-survey-question-panel-floating-toolbar-border-width: var(--sjs-stroke-x1); + --ctr-survey-question-panel-floating-toolbar-background-color: var(--sjs-layer-1-background-500); + --ctr-survey-question-panel-floating-toolbar-gap-groups: var(--sjs-spacing-x1); + --lbr-page-loading-background-color: var(--sjs-layer-3-background-500); + --lbr-page-loading-padding-bottom: var(--sjs-spacing-x8); + --lbr-page-loading-loading-icon-width: var(--sjs-size-x12); + --lbr-page-loading-loading-icon-height: var(--sjs-size-x12); + --lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-1-foreground-100); + --lbr-page-loading-loading-icon-circle-color-spin: var(--sjs-primary-background-500); + --lbr-page-loading-title-color: var(--sjs-layer-3-foreground-100); + --lbr-page-loading-padding-top: var(--sjs-spacing-x3); + --lbr-page-loading-padding-left: var(--sjs-spacing-x3); + --lbr-page-loading-padding-right: var(--sjs-spacing-x3); + --lbr-page-loading-message-color: var(--sjs-layer-3-foreground-50); + --lbr-ghost-button-padding-left: var(--sjs-spacing-x2); + --lbr-ghost-button-padding-right: var(--sjs-spacing-x2); + --lbr-ghost-button-padding-top: var(--sjs-spacing-x1); + --lbr-ghost-button-padding-bottom: var(--sjs-spacing-x1); + --lbr-ghost-button-border-width: var(--sjs-stroke-x2); + --lbr-ghost-button-border-color: var(--sjs-layer-3-foreground-100); + --lbr-ghost-button-corner-radius: var(--sjs-corner-radius-x05); + --lbr-ghost-button-text-color: var(--sjs-layer-3-foreground-100); + --lbr-page-loading-buttons-margin-top: var(--sjs-spacing-x3); + --lbr-ghost-button-border-color-hovered: var(--sjs-primary-background-500); + --lbr-ghost-button-text-color-hovered: var(--sjs-primary-background-400); + --lbr-ghost-button-border-color-focused: var(--sjs-primary-background-500); + --lbr-page-loading-buttons-gap: var(--sjs-spacing-x1); + --lbr-page-loading-error-icon-color-error: var(--sjs-semantic-red-background-500); + --lbr-page-loading-error-icon-width-error: var(--sjs-size-x8); + --lbr-page-loading-error-icon-height-error: var(--sjs-size-x8); + --ctr-toolbox-item-icon-color-disabled: var(--sjs-layer-1-foreground-100); + --ctr-toolbox-item-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-font-large-size: var(--sjs-font-size-x4); + --lbr-font-large-line-height: var(--sjs-line-height-x5); + --lbr-font-medium-size: var(--sjs-font-size-x3); + --lbr-font-medium-line-height: var(--sjs-line-height-x4); + --lbr-font-default-size: var(--sjs-font-size-x2); + --lbr-font-default-line-height: var(--sjs-line-height-x3); + --lbr-font-default-line-height-all-caps: var(--sjs-line-height-x2); + --lbr-font-small-size: var(--sjs-font-size-x150); + --lbr-font-small-line-height: var(--sjs-line-height-x2); + --lbr-font-code-size: var(--sjs-font-size-x2); + --lbr-font-code-line-height: var(--sjs-line-height-x3); + --ctr-list-item-padding-right-with-label-icon: var(--sjs-spacing-x150); + --ctr-survey-question-panel-padding-bottom-minimized-mobile: var(--sjs-spacing-x2); + --ctr-survey-question-panel-padding-bottom-minimized-selected-mobile: var(--sjs-spacing-x3); + --ctr-survey-panel-background-color-overing: var(--sjs-primary-background-10); + --ctr-survey-panel-border-color-overing: var(--sjs-primary-background-500); + --ctr-survey-panel-border-width-overing: var(--sjs-stroke-x2); + --ctr-survey-page-background-color-overing: var(--sjs-primary-background-10); + --ctr-survey-page-border-color-overing: var(--sjs-primary-background-500); + --ctr-survey-page-border-width-overing: var(--sjs-stroke-x2); + --ctr-toolbox-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-margin-horizontal-no-text: var(--sjs-spacing-x05); + --ctr-toolbox-item-padding-left-no-text: var(--sjs-spacing-x1); + --ctr-toolbox-item-background-color-pressed: var(--sjs-layer-1-background-400); + --ctr-toolbox-item-shadow-subitem-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-item-shadow-subitem-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-item-shadow-subitem-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-item-shadow-subitem-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-item-shadow-subitem-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-toolbox-item-shadow-subitem-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-toolbox-item-shadow-subitem-2-blur: var(--ctr-shadow-small-blur); + --ctr-toolbox-item-shadow-subitem-2-spread: var(--ctr-shadow-small-spread); + --ctr-toolbox-submenu-group-margin-right: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-margin-top: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-margin-bottom: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-margin-bottom-last: var(--sjs-spacing-x150); + --ctr-toolbox-submenu-group-border-color: var(--sjs-border-10); + --ctr-toolbox-submenu-group-border-width-bottom: var(--sjs-stroke-x1); + --ctr-toolbox-submenu-background-color: var(--sjs-layer-1-background-500); + --ctr-toolbox-submenu-corner-radius: var(--sjs-corner-radius-x1); + --ctr-toolbox-submenu-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-toolbox-submenu-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-toolbox-submenu-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-toolbox-submenu-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-toolbox-submenu-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-toolbox-submenu-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-toolbox-submenu-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-toolbox-submenu-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-toolbox-submenu-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-toolbox-submenu-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-toolbox-submenu-margin-top: var(--sjs-spacing-x1n); + --ctr-list-item-background-color-selected-submenu: var(--sjs-primary-background-10); + --ctr-list-item-text-color-selected-submenu: var(--sjs-layer-1-foreground-100); + --ctr-list-item-icon-color-selected-submenu: var(--sjs-primary-background-500); + --ctr-list-item-submenu-arrow-color-selected-item-submenu: var(--sjs-layer-1-foreground-75); + --ctr-menu-item-padding-left-icon: var(--sjs-spacing-x2); + --ctr-menu-toolbar-button-padding-right: var(--sjs-spacing-x1); + --ctr-menu-toolbar-button-padding-bottom: var(--sjs-spacing-x1); + --ctr-menu-item-padding-right: var(--sjs-spacing-x3); + --ctr-menu-item-padding-right-icon: var(--sjs-spacing-x2); + --ctr-menu-toolbar-button-padding-top-with-description: var(--sjs-spacing-x05); + --ctr-property-grid-header-padding-top-with-subtitle: var(--sjs-spacing-x075); + --ctr-property-grid-header-padding-bottom-with-subtitle: var(--sjs-spacing-x075); + --ctr-data-table-corner-radius: var(--sjs-corner-radius-x075); + --ctr-data-table-placeholder-corner-radius: var(--sjs-corner-radius-x075); + --ctr-list-item-label-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-list-item-label-icon-color-hovered: var(--sjs-layer-1-foreground-50); + --ctr-list-item-label-icon-color-disabled: var(--sjs-layer-1-foreground-75); + --ctr-list-item-label-icon-color-selected: var(--sjs-primary-foreground-100); + --ctr-data-table-form-gap: var(--sjs-spacing-x2); + --ctr-data-table-form-padding-left: var(--sjs-spacing-x4); + --ctr-data-table-form-background-color: var(--sjs-layer-1-background-500); + --ctr-data-table-form-padding-right: var(--sjs-spacing-x4); + --ctr-data-table-form-padding-top: var(--sjs-spacing-x2); + --ctr-data-table-form-padding-top-no-label: var(--sjs-spacing-x4); + --ctr-data-table-form-padding-bottom: var(--sjs-spacing-x5); + --ctr-data-table-form-border-width-bottom: var(--sjs-stroke-x1); + --ctr-data-table-form-border-color: var(--sjs-border-10); + --ctr-menu-toolbar-button-padding-left-with-description: var(--sjs-spacing-x150); + --ctr-menu-toolbar-button-padding-right-with-description: var(--sjs-spacing-x150); + --ctr-survey-page-border-color-minimized: var(--sjs-border-10); + --ctr-survey-page-border-width-minimized: var(--sjs-stroke-x2); + --ctr-survey-page-drag-indicator-width: var(--sjs-size-x3); + --ctr-survey-page-drag-indicator-height: var(--sjs-size-x2); + --ctr-survey-page-drag-indicator-color: var(--sjs-layer-3-foreground-50); + --ctr-survey-resize-frame-grip-width: var(--sjs-size-x150); + --ctr-survey-resize-frame-grip-corner-radius: var(--sjs-corner-radius-x05); + --ctr-survey-resize-frame-grip-color: var(--sjs-layer-1-background-500); + --ctr-survey-resize-frame-grip-height: var(--sjs-size-x150); + --ctr-survey-resize-frame-margin: var(--sjs-spacing-x1n); + --ctr-survey-resize-frame-grip-border-color: var(--sjs-secondary-background-500); + --ctr-survey-resize-frame-grip-border-width: var(--sjs-stroke-x2); + --lbr-footer-text-description-color-transparent: var(--sjs-layer-3-foreground-50); + --lbr-footer-text-title-color-transparent: var(--sjs-layer-3-foreground-100); + --lbr-footer-padding-top-transparent: var(--sjs-spacing-x8n); + --lbr-footer-padding-bottom-transparent: var(--sjs-spacing-x12); + --lbr-footer-padding-bottom-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-left-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-right-transparent-responsive: var(--sjs-spacing-x5); + --lbr-footer-padding-top-transparent-responsive: var(--sjs-spacing-x1n); + --lbr-footer-text-max-width: var(--sjs-size-x50); + --lbr-app-header-background-color: var(--sjs-primary-background-500); + --lbr-app-header-padding-left: var(--sjs-spacing-x3); + --lbr-app-header-padding-right: var(--sjs-spacing-x5); + --lbr-app-header-menu-item-padding-top: var(--sjs-spacing-x250); + --lbr-app-header-menu-item-padding-bottom: var(--sjs-spacing-x3); + --lbr-app-header-border-color: var(--sjs-primary-background-400); + --lbr-app-header-border-width-bottom: var(--sjs-stroke-x4); + --lbr-app-header-title-text-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-icon-width: var(--sjs-size-x4); + --lbr-app-header-title-icon-height: var(--sjs-size-x4); + --lbr-app-header-title-icon-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-gap: var(--sjs-spacing-x150); + --lbr-app-header-menu-gap: var(--sjs-spacing-x5); + --lbr-app-header-menu-item-border-color-selected: var(--sjs-primary-foreground-100); + --lbr-app-header-menu-item-border-width-bottom: var(--sjs-stroke-x4); + --lbr-app-header-menu-item-text-color: var(--sjs-primary-foreground-100); + --lbr-app-header-title-margin-bottom: var(--sjs-spacing-x05); + --lbr-app-header-menu-item-border-color-hovered: var(--sjs-primary-foreground-100); + --lbr-footer-padding-left-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-right-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-top-transparent-mobile: var(--sjs-spacing-x3); + --lbr-footer-padding-bottom-transparent-mobile: var(--sjs-spacing-x3); + --ctr-surface-toolbar-padding-left: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-right: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-top: var(--sjs-spacing-x150); + --ctr-surface-toolbar-padding-bottom: var(--sjs-spacing-x150); + --ctr-surface-toolbar-gap: var(--sjs-spacing-x1); + --ctr-toggle-button-thumb-background-color-active: var(--sjs-layer-3-foreground-75); + --ctr-toggle-button-thumb-corner-radius: var(--sjs-corner-radius-round); + --ctr-toggle-button-corner-radius: var(--sjs-corner-radius-round); + --ctr-toggle-button-gap: var(--sjs-spacing-x05); + --ctr-toggle-button-padding-left: var(--sjs-spacing-x075); + --ctr-toggle-button-padding-right: var(--sjs-spacing-x075); + --ctr-toggle-button-padding-top: var(--sjs-spacing-x075); + --ctr-toggle-button-padding-bottom: var(--sjs-spacing-x075); + --ctr-toggle-button-background-color: var(--sjs-layer-3-background-500); + --ctr-toggle-button-border-color-focused: var(--sjs-primary-background-500); + --ctr-toggle-button-border-width-focused: var(--sjs-stroke-x2); + --ctr-toggle-button-border-color: var(--sjs-border-10); + --ctr-toggle-button-border-width: var(--sjs-stroke-x1); + --ctr-toggle-button-thumb-width: var(--sjs-size-x150); + --ctr-toggle-button-thumb-height: var(--sjs-size-x150); + --ctr-toggle-button-background-color-checked: var(--sjs-primary-background-500); + --ctr-toggle-button-thumb-background-color-checked-focused: var(--sjs-primary-background-500); + --ctr-toggle-button-background-color-checked-focused: var(--sjs-primary-foreground-100); + --ctr-toggle-button-background-color-hovered: var(--sjs-layer-3-background-400); + --ctr-toggle-button-label-text-color: var(--sjs-layer-1-foreground-100); + --ctr-toggle-button-gap-label: var(--sjs-spacing-x1); + --ctr-toggle-button-thumb-background-color-checked: var(--sjs-primary-foreground-100); + --ctr-property-grid-advanced-mode-switcher-margin-top: var(--sjs-spacing-x4); + --ctr-property-grid-advanced-mode-switcher-margin-bottom: var(--sjs-spacing-x3); + --ctr-toggle-button-thumb-border-color: var(--sjs-border-10); + --ctr-toolbox-item-submenu-button-background-color: var(--sjs-layer-1-background-500); + --ctr-toolbox-item-submenu-button-background-color-hovered: var(--sjs-primary-background-10); + --ctr-toolbox-item-submenu-button-corner-radius: var(--sjs-corner-radius-x05); + --ctr-toolbox-item-submenu-button-padding-left: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-right: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-top: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-padding-bottom: var(--sjs-spacing-x05); + --ctr-toolbox-item-submenu-button-icon-width: var(--sjs-size-x2); + --ctr-toolbox-item-submenu-button-icon-height: var(--sjs-size-x2); + --ctr-toolbox-item-submenu-button-icon-color: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-submenu-button-icon-color-hovered: var(--sjs-layer-1-foreground-50); + --ctr-toolbox-item-submenu-button-margin-left: var(--sjs-spacing-x2); + --ctr-toolbox-item-submenu-button-margin-right: var(--sjs-spacing-x1n); + --lbr-background-color-panelless: var(--sjs-layer-1-background-500); + --ctr-survey-question-panel-toolbar-item-icon-container-width-x-small: var(--sjs-size-x2); + --ctr-survey-question-panel-toolbar-item-icon-container-height-x-small: var(--sjs-size-x2); + --lbr-slider-label-tick-color: var(--sjs-border-25); + --lbr-slider-label-tick-width: var(--sjs-size-x0125); + --lbr-slider-label-tick-height: var(--sjs-size-x05); + --lbr-slider-label-text-color: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-min-width: var(--sjs-size-x4); + --lbr-slider-thumb-width: var(--sjs-size-x4); + --lbr-slider-thumb-height: var(--sjs-size-x4); + --lbr-slider-thumb-color: var(--sjs-layer-1-background-500); + --lbr-slider-thumb-shadow-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-slider-thumb-shadow-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-slider-thumb-shadow-blur: var(--lbr-shadow-small-blur); + --lbr-slider-thumb-shadow-spread: var(--lbr-shadow-small-spread); + --lbr-slider-thumb-shadow-color: var(--lbr-shadow-small-color); + --lbr-slider-thumb-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-thumb-padding-left: var(--sjs-spacing-x075); + --lbr-slider-path-height: var(--sjs-size-x05); + --lbr-slider-path-color: var(--sjs-border-10); + --lbr-slider-path-color-filled: var(--sjs-primary-background-500); + --lbr-slider-path-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-label-gap: var(--sjs-spacing-x05); + --lbr-slider-gap: var(--sjs-spacing-x1); + --lbr-slider-path-margin-left: var(--sjs-spacing-x1); + --lbr-slider-path-margin-right: var(--sjs-spacing-x1); + --lbr-slider-thumb-dot-width: var(--sjs-size-x150); + --lbr-slider-thumb-dot-height: var(--sjs-size-x150); + --lbr-slider-thumb-dot-corner-radius: var(--sjs-corner-radius-round); + --lbr-slider-thumb-dot-color: var(--sjs-primary-background-500); + --lbr-slider-margin-left: var(--sjs-spacing-x05n); + --lbr-slider-margin-right: var(--sjs-spacing-x05n); + --lbr-slider-thumb-padding-right: var(--sjs-spacing-x075); + --lbr-slider-thumb-padding-top: var(--sjs-spacing-x075); + --lbr-slider-thumb-padding-bottom: var(--sjs-spacing-x075); + --lbr-tooltip-pointer-width: var(--sjs-size-x150); + --lbr-tooltip-pointer-height: var(--sjs-size-x075); + --lbr-tooltip-pointer-margin-left: var(--sjs-spacing-x1); + --lbr-tooltip-pointer-margin-right: var(--sjs-spacing-x1); + --lbr-tooltip-shadow-1-offset-x: var(--lbr-shadow-medium-offset-x); + --lbr-tooltip-shadow-1-offset-y: var(--lbr-shadow-medium-offset-y); + --lbr-tooltip-shadow-1-blur: var(--lbr-shadow-medium-blur); + --lbr-tooltip-shadow-1-spread: var(--lbr-shadow-medium-spread); + --lbr-tooltip-shadow-1-color: var(--lbr-shadow-medium-color); + --lbr-tooltip-shadow-2-offset-x: var(--lbr-shadow-small-offset-x); + --lbr-tooltip-shadow-2-offset-y: var(--lbr-shadow-small-offset-y); + --lbr-tooltip-shadow-2-blur: var(--lbr-shadow-small-blur); + --lbr-tooltip-shadow-2-spread: var(--lbr-shadow-small-spread); + --lbr-tooltip-shadow-2-color: var(--lbr-shadow-small-color); + --lbr-slider-tooltip-text-color: var(--sjs-primary-background-500); + --lbr-slider-thumb-dot-width-hovering: var(--sjs-size-x2); + --lbr-slider-thumb-dot-height-hovering: var(--sjs-size-x2); + --lbr-slider-path-color-read-only: var(--sjs-layer-1-background-400); + --lbr-slider-path-color-filled-read-only: var(--sjs-layer-1-foreground-100); + --lbr-slider-path-height-preview: var(--sjs-size-x0125); + --lbr-slider-path-color-preview: var(--sjs-border-10); + --lbr-slider-path-color-filled-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-read-only: var(--sjs-border-10); + --lbr-slider-thumb-dot-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-slider-thumb-dot-width-preivew: var(--sjs-size-x0125); + --lbr-slider-thumb-dot-height-preview: var(--sjs-size-x2); + --lbr-slider-label-text-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-slider-label-tick-color-disabled: var(--sjs-layer-1-foreground-100); + --lbr-slider-thumb-dot-color-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-path-color-filled-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-thumb-border-width-focused: var(--sjs-stroke-x2); + --lbr-slider-thumb-border-color-focused: var(--sjs-primary-background-500); + --lbr-slider-path-color-disabled: var(--sjs-layer-2-background-400); + --lbr-slider-thumb-dot-color-error: var(--sjs-semantic-red-background-500); + --lbr-slider-path-color-error: var(--sjs-semantic-red-background-10); + --lbr-matching-item-corner-radius: var(--sjs-corner-radius-x1); + --lbr-matching-item-padding-left: var(--sjs-spacing-x3); + --lbr-matching-item-padding-right: var(--sjs-spacing-x3); + --lbr-matching-item-padding-top: var(--sjs-spacing-x2); + --lbr-matching-item-padding-bottom: var(--sjs-spacing-x2); + --lbr-matching-item-background-color: var(--sjs-layer-1-background-500); + --lbr-matching-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-matching-gap-vertical: var(--sjs-spacing-x2); + --lbr-matching-item-border-color-answered: var(--sjs-border-10); + --lbr-matching-gap-horizontal: var(--sjs-spacing-x4); + --lbr-matching-item-background-color-answered: var(--sjs-layer-2-background-500); + --lbr-matching-item-background-color-hovered: var(--sjs-layer-1-background-400); + --lbr-matching-item-background-color-active: var(--sjs-primary-background-10); + --lbr-matching-item-border-width: var(--sjs-stroke-x1); + --lbr-matching-item-border-color: var(--sjs-border-25); + --lbr-matching-item-border-color-focused: var(--sjs-primary-background-500); + --lbr-matching-item-border-width-focused: var(--sjs-stroke-x2); + --lbr-matching-item-border-color-active: var(--sjs-border-10); + --lbr-matching-item-text-color-answered: var(--sjs-layer-2-foreground-50); + --lbr-matching-item-background-color-error: var(--sjs-semantic-red-background-10); + --lbr-matching-item-border-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-disalbed-answered: var(--sjs-layer-2-foreground-100); + --lbr-matching-item-background-color-answered-disabled: var(--sjs-layer-2-background-400); + --lbr-matching-item-background-color-disabled: var(--sjs-layer-2-background-400); + --lbr-matching-item-border-color-read-only-answered: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-preview: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-text-color-read-only-answered: var(--sjs-layer-1-foreground-100); + --lbr-matching-connector-button-icon-width: var(--sjs-size-x2); + --lbr-matching-connector-button-icon-height: var(--sjs-size-x2); + --lbr-matching-connector-button-icon-color: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-background-color: var(--sjs-layer-1-background-500); + --lbr-matching-connector-button-corner-radius: var(--sjs-corner-radius-round); + --lbr-matching-connector-button-border-width: var(--sjs-stroke-x1); + --lbr-matching-connector-button-border-color: var(--sjs-border-25); + --lbr-matching-connector-button-padding-left: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-right: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-top: var(--sjs-spacing-x025); + --lbr-matching-connector-button-padding-bottom: var(--sjs-spacing-x025); + --lbr-matching-connector-button-icon-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-border-color-hovered: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-border-width-focused: var(--sjs-stroke-x2); + --lbr-matching-connector-button-border-color-focused: var(--sjs-semantic-red-background-500); + --lbr-matching-connector-button-icon-color-focused: var(--sjs-semantic-red-background-500); + --lbr-matching-item-text-color-read-only: var(--sjs-layer-1-foreground-100); + --lbr-matching-item-background-color-read-only: var(--sjs-layer-1-background-400); + --ctr-survey-matching-item-margin-left-hovered: var(--sjs-spacing-x5n); + --ctr-survey-matching-item-margin-left-mobile: var(--sjs-spacing-x3n); + --ctr-survey-matching-item-shadow-floating-1-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-survey-matching-item-shadow-floating-1-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-survey-matching-item-shadow-floating-1-blur: var(--ctr-shadow-large-blur); + --ctr-survey-matching-item-shadow-floating-1-spread: var(--ctr-shadow-large-spread); + --ctr-survey-matching-item-shadow-floating-1-color: var(--ctr-shadow-large-color); + --ctr-survey-matching-item-shadow-floating-2-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-survey-matching-item-shadow-floating-2-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-survey-matching-item-shadow-floating-2-blur: var(--ctr-shadow-medium-blur); + --ctr-survey-matching-item-shadow-floating-2-spread: var(--ctr-shadow-medium-spread); + --ctr-survey-matching-item-shadow-floating-2-color: var(--ctr-shadow-medium-color); + --ctr-survey-matching-item-background-color-floating: var(--sjs-layer-1-background-500); + --ctr-survey-matching-item-padding-left-floating: var(--sjs-spacing-x1); + --ctr-survey-matching-item-padding-right-floating: var(--sjs-spacing-x1); + --ctr-survey-matching-item-padding-top-floating: var(--sjs-spacing-x1); + --ctr-survey-matching-item-padding-bottom-floating: var(--sjs-spacing-x1); + --ctr-survey-matching-item-corner-radius-floating: var(--sjs-corner-radius-x2); + --ctr-survey-matching-item-text-color-inactive: var(--sjs-layer-1-foreground-50); + --ctr-survey-matching-item-border-color-inactive: var(--sjs-border-10); + --ctr-tooltip-corder-radius: var(--sjs-corner-radius-x075); + --ctr-tooltip-padding-left: var(--sjs-spacing-x3); + --ctr-tooltip-padding-right: var(--sjs-spacing-x3); + --ctr-tooltip-padding-top: var(--sjs-spacing-x2); + --ctr-tooltip-padding-bottom: var(--sjs-spacing-x2); + --ctr-tooltip-text-color: var(--sjs-layer-1-foreground-100); + --ctr-tooltip-background-color: var(--sjs-layer-1-background-500); + --ctr-tooltip-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-tooltip-shadow-2-offset-x: var(--ctr-shadow-small-offset-x); + --ctr-tooltip-shadow-2-offset-y: var(--ctr-shadow-small-offset-y); + --ctr-tooltip-shadow-2-blur: var(--ctr-shadow-small-blur); + --ctr-tooltip-shadow-2-spread: var(--ctr-shadow-small-spread); + --ctr-tooltip-shadow-2-color: var(--ctr-shadow-small-color); + --ctr-tooltip-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-tooltip-pointer-width: var(--sjs-size-x1); + --ctr-tooltip-pointer-height: var(--sjs-size-x05); + --ctr-tooltip-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-tooltip-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-tooltip-pointer-margin-left: var(--sjs-spacing-x1); + --ctr-tooltip-shadow-1-color: var(--ctr-shadow-medium-color); + --ctr-tooltip-pointer-margin-right: var(--sjs-spacing-x1); + --ctr-super-tooltip-corder-radius: var(--sjs-corner-radius-x075); + --ctr-super-tooltip-text-color-title: var(--sjs-layer-1-foreground-100); + --ctr-super-tooltip-image-width: var(--sjs-size-x32); + --ctr-super-tooltip-image-height: var(--sjs-size-x32); + --ctr-super-tooltip-text-color-description: var(--sjs-layer-1-foreground-50); + --ctr-super-tooltip-text-gap: var(--sjs-spacing-x05); + --ctr-super-tooltip-background-color: var(--sjs-layer-1-background-500); + --ctr-super-tooltip-pointer-width: var(--sjs-size-x150); + --ctr-super-tooltip-pointer-height: var(--sjs-size-x075); + --ctr-super-tooltip-pointer-margin-left: var(--sjs-spacing-x2); + --ctr-super-tooltip-pointer-margin-right: var(--sjs-spacing-x2); + --ctr-super-tooltip-width: var(--sjs-size-x64); + --ctr-super-tooltip-text-margin-left: var(--sjs-spacing-x3); + --ctr-super-tooltip-text-margin-right: var(--sjs-spacing-x3); + --ctr-super-tooltip-text-margin-top: var(--sjs-spacing-x250); + --ctr-super-tooltip-text-margin-bottom: var(--sjs-spacing-x3); + --ctr-super-tooltip-shadow-1-offset-x: var(--ctr-shadow-medium-offset-x); + --ctr-super-tooltip-shadow-2-offset-x: var(--ctr-shadow-large-offset-x); + --ctr-super-tooltip-shadow-2-offset-y: var(--ctr-shadow-large-offset-y); + --ctr-super-tooltip-shadow-2-blur: var(--ctr-shadow-large-blur); + --ctr-super-tooltip-shadow-2-spread: var(--ctr-shadow-large-spread); + --ctr-super-tooltip-shadow-2-color: var(--ctr-shadow-large-color); + --ctr-super-tooltip-shadow-1-offset-y: var(--ctr-shadow-medium-offset-y); + --ctr-super-tooltip-shadow-1-blur: var(--ctr-shadow-medium-blur); + --ctr-super-tooltip-shadow-1-spread: var(--ctr-shadow-medium-spread); + --ctr-super-tooltip-shadow-1-color: var(--ctr-shadow-medium-color); + --lbr-timer-gap: var(--sjs-spacing-x05n); + --lbr-blank-form-text-item-padding-top: var(--sjs-spacing-x1); + --lbr-blank-form-text-item-padding-bottom: var(--sjs-spacing-x1); + --lbr-blank-form-text-item-text-color: var(--sjs-layer-1-foreground-100); + --lbr-blank-form-text-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-border-width: var(--sjs-stroke-x1); + --lbr-blank-form-field-border-width-focused: var(--sjs-stroke-x2); + --lbr-blank-form-field-border-color: var(--sjs-border-10); + --lbr-blank-form-field-border-color-focused: var(--sjs-primary-background-500); + --lbr-blank-form-gap: var(--sjs-spacing-x1); + --lbr-blank-form-line-height: var(--sjs-spacing-x2); + --ctr-survey-blank-form-add-row-button-margin-left: var(--sjs-spacing-x3n); + --ctr-survey-blank-form-add-row-button-margin-top: var(--sjs-spacing-x2); + --ctr-survey-blank-form-add-row-button-margin-buttom: var(--sjs-spacing-x1n); + --ctr-menu-item-padding-bottom: var(--sjs-spacing-x250); + --ctr-menu-item-padding-top: var(--sjs-spacing-x250); + --ctr-survey-blank-form-item-text-color-placeholder: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-label-text-color: var(--sjs-layer-1-foreground-50); + --lbr-blank-form-field-label-margin-top: var(--sjs-spacing-x05); + --lbr-blank-form-field-margin-bottom: var(--sjs-spacing-x150n); + --lbr-blank-form-field-margin-top: var(--sjs-spacing-x1); + --lbr-blank-form-field-text-color: var(--sjs-layer-1-foreground-100); + --ctr-scrollbar-padding-horizontal-hovered: var(--sjs-spacing-x025); + --ctr-scrollbar-padding-vertical-hovered: var(--sjs-spacing-x025); + --ctr-toolbox-search-margin-bottom-compact: var(--sjs-spacing-x1n); + --lbr-slider-margin-top: var(--sjs-spacing-x1); + --lbr-button-padding-right-mobile: var(--sjs-spacing-x3); + --lbr-button-padding-left-mobile: var(--sjs-spacing-x3); +} + diff --git a/packages/survey-creator-core/src/themes/utils.ts b/packages/survey-creator-core/src/themes/utils.ts new file mode 100644 index 0000000000..ec7e51c30b --- /dev/null +++ b/packages/survey-creator-core/src/themes/utils.ts @@ -0,0 +1,23 @@ + +export function trimEmptyFields(object: { [index: string]: string }): void { + Object.keys(object).forEach(key => { + if (object[key] === undefined || object[key] === null) { + delete object[key]; + } + }); +} + +export function assign(...inputs: Array) { + const objects = (inputs || []).filter(obj => !!obj); + if (objects.length <= 1) { + return; + } + if (objects.length == 2) { + Object.keys(objects[1]).forEach(key => objects[0][key] = objects[1][key]); + trimEmptyFields(inputs[0]); + return; + } + for (let i = 1; i < objects.length; i++) { + assign(objects[0], objects[i]); + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss index 062ca36d15..7841a95c5a 100644 --- a/packages/survey-creator-core/src/variables.scss +++ b/packages/survey-creator-core/src/variables.scss @@ -54,7 +54,7 @@ $blue: var(--sjs-special-blue, #437fd9); $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1))); $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff); -$font-family: var(--sjs-font-family, var(--font-family)); +$font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family))); $font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))); $base-unit: var(--sjs-base-unit, var(--base-unit, 8px)); @@ -75,28 +75,35 @@ $sd-panel-medium-min-width: 176px; @mixin smallBold { --small-bold-font-size: var(--sjs-font-size, calc(2 * #{$base-unit})); + --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size)); + --ctr-small-bold-line-height: var(--small-bold-font-size); + font-family: $font-family; font-style: normal; font-weight: 600; - font-size: calc(0.75 * var(--small-bold-font-size)); - line-height: $font-size; + font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px)); + line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px)); } @mixin defaultBold { --default-bold-font-size: var(--sjs-font-size, calc(2 * #{$base-unit})); + --ctr-default-bold-line-height: calc(1.5 * var(--default-bold-font-size)); + font-family: $font-family; font-style: normal; font-weight: 600; - font-size: $font-size; - line-height: calc(1.5 * var(--default-bold-font-size)); + font-size: var(--ctr-font-default-size, var(--default-bold-font-size, 16px)); + line-height: var(--ctr-font-default-line-height, var(--ctr-default-bold-line-height, 24px)); } @mixin defaultFont { --default-font-size: var(--sjs-font-size, calc(2 * #{$base-unit})); + --ctr-default-line-height: calc(1.5 * var(--default-font-size)); + font-family: $font-family; - font-style: normal; - font-size: $font-size; - line-height: calc(1.5 * var(--default-font-size)); + font-weight: 400; + font-size: var(--ctr-font-default-size, var(--default-font-size, 16px)); + line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px)); } @mixin borderLight { @@ -110,12 +117,14 @@ $sd-panel-medium-min-width: 176px; $tab-min-height: var(--tab-min-height, auto); @mixin mediumBold { - --medium-bold-font-size: #{$base-unit}; + --ctr-medium-bold-font-size: calc(3 * #{$base-unit}); + --ctr-medium-bold-line-height: calc(4 * #{$base-unit}); + font-family: $font-family; font-style: normal; - font-weight: bold; - font-size: calc(3 * var(--medium-bold-font-size)); - line-height: calc(4 * var(--medium-bold-font-size)); + font-weight: 700; + font-size: var(--ctr-font-medium-size, var(--ctr-medium-bold-font-size, 24px)); + line-height: var(--ctr-font-medium-line-height, var(--ctr-medium-bold-line-height, 32px)); } @mixin textEllipsis { diff --git a/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts b/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts new file mode 100644 index 0000000000..86291c03a1 --- /dev/null +++ b/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts @@ -0,0 +1,135 @@ +import { CreatorTester } from "../creator-tester"; +import { CreatorThemeModel } from "../../src/creator-theme/creator-theme-model"; +import { TabDesignerPlugin } from "../../src/components/tabs/designer-plugin"; +import { CreatorThemes, ICreatorTheme } from "../../src/creator-theme/creator-themes"; + +import "survey-core/survey.i18n"; +export { QuestionSpinEditorModel } from "../../src/custom-questions/question-spin-editor"; +export { QuestionColorModel } from "../../src/custom-questions/question-color"; + +test("Creator theme model de/serialization", (): any => { + const themeModel = new CreatorThemeModel(); + let result = themeModel.cssVariables || {}; + expect(Object.keys(result).length).toBe(0); + + const themeJson: ICreatorTheme = { + themeName: "custom", + cssVariables: { + "--ctr-size-unit": "6px", + "--ctr-corner-radius-unit": "6px", + "--ctr-spacing-unit": "6px", + "--sjs-special-background": "rgba(253, 255, 148, 0.5)", + "--sjs-primary-background-500": "rgba(248, 248, 248, 1)", + "--sjs-secondary-background-500": "#0b864b", + } + }; + themeModel.fromJSON(themeJson); + expect(themeModel.scale).toBe(75); + expect(themeModel.themeName).toBe("custom"); + + expect(themeModel["--ctr-size-unit"]).toBe("6px"); + expect(themeModel["--sjs-special-background"]).toBe("rgba(253, 255, 148, 0.5)"); + expect(themeModel["--sjs-primary-background-500"]).toBe("rgba(248, 248, 248, 1)"); + expect(themeModel["--sjs-secondary-background-500"]).toBe("#0b864b"); + + const themeModelJson = themeModel.toJSON(); + expect(themeModelJson).toStrictEqual(themeJson); +}); + +test("Default theme serialization", (): any => { + const themeModel = new CreatorThemeModel(); + let result = themeModel.cssVariables || {}; + expect(Object.keys(result).length).toBe(0); + + themeModel.loadTheme(); + expect(themeModel.themeName).toBe("sc2020"); + expect(themeModel.scale).toBe(100); + expect(themeModel["--sjs-special-background"]).toBe("#F3F3F3FF"); + expect(themeModel["--sjs-primary-background-500"]).toBe("#19B394FF"); + expect(themeModel["--sjs-secondary-background-500"]).toBe("#FF9814FF"); + + const themeModelJson = themeModel.toJSON(); + expect(themeModelJson).toStrictEqual({ themeName: "sc2020" }); +}); + +test("Creator theme: sync css variables", (): any => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true, showCreatorThemeSettings: true }); + const designerPlugin: TabDesignerPlugin = creator.getPlugin("designer"); + const themeModel = designerPlugin["themeModel"]; + let surfaceBackgroundColor = designerPlugin["themePropertyGrid"].survey.findQuestionByName("--sjs-special-background"); + + expect(creator.themeVariables["--sjs-special-background"]).toEqual(undefined); + expect((themeModel.cssVariables || {})["--sjs-special-background"]).toEqual(undefined); + expect(surfaceBackgroundColor.value).toEqual("#F3F3F3FF"); + + const newValue = "#c95ae7"; + surfaceBackgroundColor.value = newValue; + expect(creator.themeVariables["--sjs-special-background"]).toEqual(newValue); + expect((themeModel.cssVariables || {})["--sjs-special-background"]).toEqual(newValue); + expect(surfaceBackgroundColor.value).toEqual(newValue); +}); + +test("creator.applyTheme", () => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true, showCreatorThemeSettings: true }); + const themeJson: ICreatorTheme = { + themeName: "custom", + cssVariables: { + "--sjs-special-background": "rgba(253, 255, 148, 0.5)", + "--sjs-primary-background-500": "rgba(248, 248, 248, 1)", + "--sjs-secondary-background-500": "#0b864b", + "--ctr-font-unit": "18px", + "--ctr-line-height-unit": "18px", + "--ctr-size-unit": "6px", + "--ctr-corner-radius-unit": "6px", + "--ctr-spacing-unit": "6px", + "--ctr-surface-base-unit": "10px", + "--sjs-test": "green" + } + }; + + creator.applyTheme(themeJson); + + const designerPlugin: TabDesignerPlugin = creator.getPlugin("designer"); + const themeModel = designerPlugin["themeModel"]; + + expect(creator.themeVariables["--sjs-test"]).toEqual("green"); + expect((themeModel.cssVariables || {})["--sjs-test"]).toEqual("green"); + + const themeModelJson = themeModel.toJSON(); + expect(themeModelJson).toStrictEqual(themeJson); +}); + +test("Creator theme check scale", (): any => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true, showCreatorThemeSettings: true }); + const designerPlugin: TabDesignerPlugin = creator.getPlugin("designer"); + const themeModel = designerPlugin["themeModel"]; + let scale = designerPlugin["themePropertyGrid"].survey.findQuestionByName("scale"); + let fontScale = designerPlugin["themePropertyGrid"].survey.findQuestionByName("fontScale"); + + const themeJson: ICreatorTheme = { + themeName: "custom", + cssVariables: { + "--ctr-font-unit": "10px", + "--ctr-line-height-unit": "10px", + "--ctr-spacing-unit": "12px", + "--ctr-size-unit": "12px", + "--ctr-corner-radius-unit": "12px", + } + }; + themeModel.fromJSON(themeJson); + expect(themeModel.themeName).toBe("custom"); + expect(themeModel.fontScale).toBe(125); + expect(themeModel.scale).toBe(150); + + fontScale.value = 150; + + let themeModelJsonCssVariables = themeModel.toJSON().cssVariables || {}; + expect(themeModelJsonCssVariables["--ctr-font-unit"]).toEqual("12px"); + expect(themeModelJsonCssVariables["--ctr-line-height-unit"]).toEqual("12px"); + + scale.value = 225; + themeModelJsonCssVariables = themeModel.toJSON().cssVariables || {}; + expect(themeModelJsonCssVariables["--ctr-size-unit"]).toEqual("18px"); + expect(themeModelJsonCssVariables["--ctr-spacing-unit"]).toEqual("18px"); + expect(themeModelJsonCssVariables["--ctr-corner-radius-unit"]).toEqual("18px"); +}); \ No newline at end of file diff --git a/packages/survey-creator-core/tsconfig.i18n.json b/packages/survey-creator-core/tsconfig.i18n.json index fb24bf6b54..3ddc83b8ad 100644 --- a/packages/survey-creator-core/tsconfig.i18n.json +++ b/packages/survey-creator-core/tsconfig.i18n.json @@ -7,6 +7,9 @@ "survey-creator-core": [ "./src/editorLocalization.ts" ], + "survey-creator-core/themes": [ + "./src/themes/index.ts" + ], }, } } \ No newline at end of file diff --git a/packages/survey-creator-core/tsconfig.json b/packages/survey-creator-core/tsconfig.json index fef1e143c2..ef1f13c9b1 100644 --- a/packages/survey-creator-core/tsconfig.json +++ b/packages/survey-creator-core/tsconfig.json @@ -10,7 +10,12 @@ "moduleResolution": "node", "baseUrl": ".", "declaration": true, - "declarationDir": "build/typings/" + "declarationDir": "build/typings/", + "paths": { + "survey-creator-core/themes": [ + "./src/themes/index.ts" + ], + }, }, "include": [ "./src/entries/index.ts" diff --git a/packages/survey-creator-core/tsconfig.themes.json b/packages/survey-creator-core/tsconfig.themes.json new file mode 100644 index 0000000000..027b574027 --- /dev/null +++ b/packages/survey-creator-core/tsconfig.themes.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "survey-core": [ + "./build" + ] + }, + "declaration": true, + "declarationDir": "./build/themes/", + }, + "include": [ + "./src/themes/index.ts" + ], + "exclude": [], +} \ No newline at end of file diff --git a/packages/survey-creator-core/webpack.config.js b/packages/survey-creator-core/webpack.config.js index 9104d16352..9429241c8a 100644 --- a/packages/survey-creator-core/webpack.config.js +++ b/packages/survey-creator-core/webpack.config.js @@ -195,6 +195,12 @@ module.exports = function (options) { commonjs: "survey-core/themes", amd: "survey-core/themes", }, + "survey-creator-core/themes": { + root: "SurveyCreatorTheme", + commonjs2: "survey-creator-core/themes", + commonjs: "survey-creator-core/themes", + amd: "survey-creator-core/themes", + }, }, plugins: [ new DashedNamePlugin(), diff --git a/packages/survey-creator-core/webpack.i18n.js b/packages/survey-creator-core/webpack.i18n.js index 05c61b62ba..3288076742 100644 --- a/packages/survey-creator-core/webpack.i18n.js +++ b/packages/survey-creator-core/webpack.i18n.js @@ -16,7 +16,13 @@ const config = { commonjs2: "survey-creator-core", commonjs: "survey-creator-core", amd: "survey-creator-core" - } + }, + "survey-creator-core/themes": { + root: "SurveyCreatorTheme", + commonjs2: "survey-creator-core/themes", + commonjs: "survey-creator-core/themes", + amd: "survey-creator-core/themes", + }, } }; diff --git a/packages/survey-creator-core/webpack.themes.config.js b/packages/survey-creator-core/webpack.themes.config.js new file mode 100644 index 0000000000..38f1e000fa --- /dev/null +++ b/packages/survey-creator-core/webpack.themes.config.js @@ -0,0 +1,28 @@ +"use strict"; + +const webpackCommonConfig = require("./webpack.config"); +const { merge } = require("webpack-merge"); +var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); +var path = require("path"); + +const config = { + output: { + path: __dirname + "/build/themes" + }, + entry: { + "default-light": path.resolve(__dirname, "./src/themes/default-light.ts"), + "default-dark": path.resolve(__dirname, "./src/themes/default-dark.ts"), + "default-contrast": path.resolve(__dirname, "./src/themes/default-contrast.ts"), + "index": path.resolve(__dirname, "./src/themes/index.ts"), + }, + plugins: [new FixStyleOnlyEntriesPlugin()], +}; + +module.exports = function (options) { + options.platform = ""; + options.libraryName = "SurveyCreatorTheme"; + options.tsConfigFile = path.resolve(__dirname, "./tsconfig.themes.json"); + const mainConfig = webpackCommonConfig(options); + mainConfig.entry = {}; + return merge(mainConfig, config); +}; diff --git a/packages/survey-creator-knockout/index.html b/packages/survey-creator-knockout/index.html index 05549dc5a9..28f17b4bfe 100644 --- a/packages/survey-creator-knockout/index.html +++ b/packages/survey-creator-knockout/index.html @@ -24,7 +24,9 @@ + + diff --git a/packages/survey-creator-knockout/index.js b/packages/survey-creator-knockout/index.js index d9a6b9d15f..9bf511d5a2 100644 --- a/packages/survey-creator-knockout/index.js +++ b/packages/survey-creator-knockout/index.js @@ -12,6 +12,7 @@ function init() { showLogicTab: true, showTranslationTab: true, showThemeTab: true, + showCreatorThemeSettings: true, showEmbeddedSurveyTab: true, isAutoSave: true, inplaceEditForValues: true diff --git a/packages/survey-creator-knockout/src/side-bar/property-grid.html b/packages/survey-creator-knockout/src/side-bar/property-grid.html index 54a8af7fbf..6e89e09b06 100644 --- a/packages/survey-creator-knockout/src/side-bar/property-grid.html +++ b/packages/survey-creator-knockout/src/side-bar/property-grid.html @@ -1,4 +1,4 @@ -
+
diff --git a/packages/survey-creator-knockout/src/survey-creator.html b/packages/survey-creator-knockout/src/survey-creator.html index d2c57ff8f5..5c61fddc3e 100644 --- a/packages/survey-creator-knockout/src/survey-creator.html +++ b/packages/survey-creator-knockout/src/survey-creator.html @@ -1,5 +1,5 @@ -
+
diff --git a/packages/survey-creator-knockout/src/tabs/designer.html b/packages/survey-creator-knockout/src/tabs/designer.html index 847f25cbda..b10f50e4cc 100644 --- a/packages/survey-creator-knockout/src/tabs/designer.html +++ b/packages/survey-creator-knockout/src/tabs/designer.html @@ -23,7 +23,7 @@
+ data-bind="css: designerCss, style:{maxWidth: survey.renderedWidth}, creatorStyle: creator.designTabSurveyThemeVariables">
diff --git a/packages/survey-creator-knockout/src/utils/utils.ts b/packages/survey-creator-knockout/src/utils/utils.ts index ab27c85f0d..3cf7c91fa9 100644 --- a/packages/survey-creator-knockout/src/utils/utils.ts +++ b/packages/survey-creator-knockout/src/utils/utils.ts @@ -19,4 +19,25 @@ ko.bindingHandlers["afterRenderParent"] = { element.style.display = "none"; valueAccessor() && valueAccessor()([element.parentElement]); }, +}; + +ko.bindingHandlers["creatorStyle"] = { + update: function (element, valueAccessor, allBindings) { + if (element && element.style.length) { + for (let index = element.style.length - 1; index >= 0; index--) { + const style = element.style[index] as string; + if (style && (style.indexOf("--sjs-") === 0 || style.indexOf("--ctr-") === 0 || style.indexOf("--lbr-") === 0)) { + element.style.removeProperty(style); + } + } + } + var value = ko.utils.unwrapObservable(valueAccessor()) || {}; + Object.keys(value).forEach(key => { + if (key.indexOf("--") === 0) { + element.style.setProperty(key, value[key]); + } else { + element.style[key] = value[key]; + } + }); + } }; \ No newline at end of file diff --git a/packages/survey-creator-react/index.html b/packages/survey-creator-react/index.html index f744c41db6..83ac25fe7f 100644 --- a/packages/survey-creator-react/index.html +++ b/packages/survey-creator-react/index.html @@ -16,7 +16,9 @@ + + diff --git a/packages/survey-creator-react/index.js b/packages/survey-creator-react/index.js index 3796adb492..ba32f96585 100644 --- a/packages/survey-creator-react/index.js +++ b/packages/survey-creator-react/index.js @@ -109,6 +109,7 @@ const options = { showThemeTab: true, showEmbeddedSurveyTab: true, showThemeTab: true, + showCreatorThemeSettings: true, isAutoSave: true }; @@ -204,11 +205,11 @@ creator.onMachineTranslate.add((_, options) => { options.strings.forEach(str => { translatedStrings.push(options.toLocale + ": " + str); }); options.callback(translatedStrings); }); -// creator.showOneCategoryInPropertyGrid = true; // creator.JSON = json; // creator.locale = "de"; window.creator = creator; -creator.getPlugin("designer").showOneCategoryInPropertyGrid = true; +creator.showOneCategoryInPropertyGrid = true; +// creator.getPlugin("designer").showOneCategoryInPropertyGrid = true; // creator.getPlugin("theme").showOneCategoryInPropertyGrid = true; creator.toolbox.searchEnabled = true; diff --git a/packages/survey-creator-react/src/SurveyCreator.tsx b/packages/survey-creator-react/src/SurveyCreator.tsx index 01b5ad9a8a..66a7ff7ba3 100644 --- a/packages/survey-creator-react/src/SurveyCreator.tsx +++ b/packages/survey-creator-react/src/SurveyCreator.tsx @@ -20,7 +20,8 @@ import { import { ICreatorOptions, SurveyCreatorModel, - ITabbedMenuItem + ITabbedMenuItem, + assign } from "survey-creator-core"; import { TabbedMenuComponent } from "./TabbedMenu"; @@ -75,6 +76,8 @@ export class SurveyCreatorComponent extends SurveyElementBase< const areaClassName = "svc-full-container svc-creator__area svc-flex-column" + (this.props.creator.haveCommercialLicense ? "" : " svc-creator__area--with-banner"); const contentWrapperClassName = "svc-creator__content-wrapper svc-flex-row" + (this.props.creator.isMobileView ? " svc-creator__content-wrapper--footer-toolbar" : ""); const fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation); + const creatorStyles = {}; + assign(creatorStyles, this.style, this.props.creator.themeVariables); let licenseBanner = null; if (!this.props.creator.haveCommercialLicense) { const htmlValue = { __html: this.props.creator.licenseText }; @@ -86,7 +89,7 @@ export class SurveyCreatorComponent extends SurveyElementBase< } //AM: width unrecognized by react return ( -
+
diff --git a/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx b/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx index 83968001cd..69b1f91bad 100644 --- a/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx +++ b/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx @@ -24,9 +24,8 @@ export class PropertyGridComponent extends SurveyElementBase +
diff --git a/packages/survey-creator-react/tests/creator.spec.tsx b/packages/survey-creator-react/tests/creator.spec.tsx index 9b7f7e6d43..35217a0bb6 100644 --- a/packages/survey-creator-react/tests/creator.spec.tsx +++ b/packages/survey-creator-react/tests/creator.spec.tsx @@ -24,7 +24,7 @@ describe("Creator", () => { expect(testInstance.instance.style).toBeUndefined(); expect(testInstance.props.creator).not.toBeNull(); expect(creatorElement.props.className.includes("svc-creator")).toBe(true); - expect(creatorElement.props.style).toBeUndefined(); + expect(creatorElement.props.style).toEqual({}); }); test("check creator props with style", () => { diff --git a/packages/survey-creator-vue/src/Creator.vue b/packages/survey-creator-vue/src/Creator.vue index 37bad4b0e0..0870ab7703 100644 --- a/packages/survey-creator-vue/src/Creator.vue +++ b/packages/survey-creator-vue/src/Creator.vue @@ -1,7 +1,7 @@