From f7533013fb206cacef24f33ccfbd8b4d8e0b099c Mon Sep 17 00:00:00 2001 From: David Nebinger Date: Tue, 22 Apr 2025 13:24:21 -0400 Subject: [PATCH 1/2] Add the missing clarity-theme source cx --- .../assets/clarity-favicon-dark.svg | 4 + .../assets/clarity-favicon-light.svg | 4 + .../assets/clarity-favicon-primary.svg | 5 + .../clarity-theme/assets/global.js | 84 + .../clarity-theme/client-extension.yaml | 29 + client-extensions/clarity-theme/package.json | 18 + .../src/css/_classic_clay_variables.scss | 748 ++ .../src/css/_classic_custom.scss | 104 + .../src/css/_clay_variables.scss | 5 + .../clarity-theme/src/css/_custom.scss | 102 + .../clarity-theme/src/css/_imports.scss | 6 + .../src/css/_liferay_variables_custom.scss | 8 + .../clarity-theme/src/css/clay.scss | 1 + .../src/css/components/_breadcrumb.scss | 4 + .../src/css/components/_color.scss | 13 + .../src/css/components/_group-item.scss | 4 + .../src/css/components/_info-panel.scss | 14 + .../src/css/components/_navbars.scss | 77 + .../src/css/components/_sidebar.scss | 73 + .../src/css/components/_table.scss | 7 + .../src/css/components/_widget.scss | 126 + .../src/css/components/commerce/_index.scss | 1 + .../css/components/commerce/_open_carts.scss | 17 + .../_custom_properties_set.scss | 79 + .../dialect/_classic_style_book_compat.scss | 40 + .../src/css/dialect/_clay_variables.scss | 23 + .../src/css/dialect/_components.scss | 15 + .../clarity-theme/src/css/dialect/_index.scss | 3 + .../src/css/dialect/_mixins.scss | 1 + .../src/css/dialect/components/_buttons.scss | 323 + .../src/css/dialect/components/_cards.scss | 73 + .../src/css/dialect/components/_colors.scss | 154 + .../css/dialect/components/_custom_forms.scss | 9 + .../components/_custom_properties.scss | 3 + .../css/dialect/components/_data_engine.scss | 7 + .../src/css/dialect/components/_forms.scss | 187 + .../src/css/dialect/components/_globals.scss | 19 + .../src/css/dialect/components/_links.scss | 3 + .../src/css/dialect/components/_nav.scss | 228 + .../src/css/dialect/components/_navs.scss | 63 + .../src/css/dialect/components/_tables.scss | 97 + .../dialect/components/_toggle-switch.scss | 3 + .../css/dialect/components/_typography.scss | 69 + .../components/commerce/_add_to_cart.scss | 3 + .../commerce/_data_set_display.scss | 22 + .../dialect/components/commerce/_index.scss | 6 + .../components/commerce/_mini_compare.scss | 8 + .../commerce/_price_range_facet.scss | 14 + .../components/commerce/_product_card.scss | 3 + .../components/commerce/_product_sort.scss | 3 + .../src/css/dialect/mixins/_colors.scss | 13 + .../src/css/dialect/variables/_alerts.scss | 145 + .../src/css/dialect/variables/_badges.scss | 28 + .../src/css/dialect/variables/_buttons.scss | 125 + .../src/css/dialect/variables/_cards.scss | 165 + .../css/dialect/variables/_color_scheme.scss | 110 + .../css/dialect/variables/_custom_forms.scss | 61 + .../dialect/variables/_custom_properties.scss | 646 ++ .../src/css/dialect/variables/_dropdowns.scss | 5 + .../src/css/dialect/variables/_forms.scss | 86 + .../src/css/dialect/variables/_globals.scss | 143 + .../src/css/dialect/variables/_labels.scss | 727 ++ .../src/css/dialect/variables/_links.scss | 6 + .../src/css/dialect/variables/_loaders.scss | 19 + .../src/css/dialect/variables/_modals.scss | 42 + .../dialect/variables/_multi_step_nav.scss | 7 + .../src/css/dialect/variables/_navs.scss | 415 + .../src/css/dialect/variables/_stickers.scss | 25 + .../src/css/dialect/variables/_tables.scss | 128 + .../css/dialect/variables/_toggle_switch.scss | 3 + .../src/css/portlet/_portlet.scss | 157 + .../src/css/portlet/_portlet_decorators.scss | 29 + .../src/css/portlet/_variables_custom.scss | 32 + .../src/frontend-token-definition.json | 7991 +++++++++++++++++ .../clarity-theme/webpack.config.js | 29 + 75 files changed, 14049 insertions(+) create mode 100644 client-extensions/clarity-theme/assets/clarity-favicon-dark.svg create mode 100644 client-extensions/clarity-theme/assets/clarity-favicon-light.svg create mode 100644 client-extensions/clarity-theme/assets/clarity-favicon-primary.svg create mode 100644 client-extensions/clarity-theme/assets/global.js create mode 100644 client-extensions/clarity-theme/client-extension.yaml create mode 100644 client-extensions/clarity-theme/package.json create mode 100644 client-extensions/clarity-theme/src/css/_classic_clay_variables.scss create mode 100644 client-extensions/clarity-theme/src/css/_classic_custom.scss create mode 100644 client-extensions/clarity-theme/src/css/_clay_variables.scss create mode 100644 client-extensions/clarity-theme/src/css/_custom.scss create mode 100644 client-extensions/clarity-theme/src/css/_imports.scss create mode 100644 client-extensions/clarity-theme/src/css/_liferay_variables_custom.scss create mode 100644 client-extensions/clarity-theme/src/css/clay.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_breadcrumb.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_color.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_group-item.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_info-panel.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_navbars.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_sidebar.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_table.scss create mode 100644 client-extensions/clarity-theme/src/css/components/_widget.scss create mode 100644 client-extensions/clarity-theme/src/css/components/commerce/_index.scss create mode 100644 client-extensions/clarity-theme/src/css/components/commerce/_open_carts.scss create mode 100644 client-extensions/clarity-theme/src/css/custom_properties/_custom_properties_set.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/_classic_style_book_compat.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/_clay_variables.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/_components.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/_index.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/_mixins.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_buttons.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_cards.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_colors.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_custom_forms.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_custom_properties.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_data_engine.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_forms.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_globals.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_links.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_nav.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_navs.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_tables.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_toggle-switch.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/_typography.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_add_to_cart.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_data_set_display.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_index.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_mini_compare.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_price_range_facet.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_card.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_sort.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/mixins/_colors.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_alerts.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_badges.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_buttons.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_cards.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_color_scheme.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_custom_forms.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_custom_properties.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_dropdowns.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_forms.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_globals.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_labels.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_links.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_loaders.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_modals.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_multi_step_nav.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_navs.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_stickers.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_tables.scss create mode 100644 client-extensions/clarity-theme/src/css/dialect/variables/_toggle_switch.scss create mode 100644 client-extensions/clarity-theme/src/css/portlet/_portlet.scss create mode 100644 client-extensions/clarity-theme/src/css/portlet/_portlet_decorators.scss create mode 100644 client-extensions/clarity-theme/src/css/portlet/_variables_custom.scss create mode 100644 client-extensions/clarity-theme/src/frontend-token-definition.json create mode 100644 client-extensions/clarity-theme/webpack.config.js diff --git a/client-extensions/clarity-theme/assets/clarity-favicon-dark.svg b/client-extensions/clarity-theme/assets/clarity-favicon-dark.svg new file mode 100644 index 0000000..bb567a1 --- /dev/null +++ b/client-extensions/clarity-theme/assets/clarity-favicon-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client-extensions/clarity-theme/assets/clarity-favicon-light.svg b/client-extensions/clarity-theme/assets/clarity-favicon-light.svg new file mode 100644 index 0000000..cfdb9a3 --- /dev/null +++ b/client-extensions/clarity-theme/assets/clarity-favicon-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client-extensions/clarity-theme/assets/clarity-favicon-primary.svg b/client-extensions/clarity-theme/assets/clarity-favicon-primary.svg new file mode 100644 index 0000000..4a01ae8 --- /dev/null +++ b/client-extensions/clarity-theme/assets/clarity-favicon-primary.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client-extensions/clarity-theme/assets/global.js b/client-extensions/clarity-theme/assets/global.js new file mode 100644 index 0000000..a92095b --- /dev/null +++ b/client-extensions/clarity-theme/assets/global.js @@ -0,0 +1,84 @@ +document.addEventListener("DOMContentLoaded", function () { + const defaultFontSize = 16; // Default font size in px + let currentFontSize = defaultFontSize; + + // Create control panel + const controlPanel = document.createElement("div"); + controlPanel.id = "accessibility-control-panel"; + controlPanel.style.position = "fixed"; + controlPanel.style.top = "20px"; // Top right position + controlPanel.style.right = "20px"; + controlPanel.style.backgroundColor = "transparent"; + controlPanel.style.border = "none"; + controlPanel.style.padding = "5px"; + controlPanel.style.zIndex = "9999"; + controlPanel.style.fontFamily = "Arial, sans-serif"; + controlPanel.style.display = "flex"; + controlPanel.style.gap = "5px"; + controlPanel.style.alignItems = "center"; + + // Create buttons A+ and A- + const increaseButton = document.createElement("button"); + increaseButton.textContent = "A+"; + increaseButton.style.padding = "5px 10px"; + increaseButton.style.border = "1px solid #1e6f6f"; + increaseButton.style.backgroundColor = "#1e6f6f"; + increaseButton.style.color = "#fff"; + increaseButton.style.borderRadius = "4px"; + increaseButton.style.cursor = "pointer"; + increaseButton.style.fontSize = "12px"; + + const decreaseButton = document.createElement("button"); + decreaseButton.textContent = "A-"; + decreaseButton.style.padding = "5px 10px"; + decreaseButton.style.border = "1px solid #1e6f6f"; + decreaseButton.style.backgroundColor = "#1e6f6f"; + decreaseButton.style.color = "#fff"; + decreaseButton.style.borderRadius = "4px"; + decreaseButton.style.cursor = "pointer"; + decreaseButton.style.fontSize = "12px"; + + increaseButton.addEventListener("click", function () { + if (currentFontSize < 24) { // Limit font size to a maximum + currentFontSize += 2; + document.documentElement.style.fontSize = `${currentFontSize}px`; + } + }); + + decreaseButton.addEventListener("click", function () { + if (currentFontSize > 12) { // Limit font size to a minimum + currentFontSize -= 2; + document.documentElement.style.fontSize = `${currentFontSize}px`; + } + }); + + // Grayscale toggle + const grayscaleToggle = document.createElement("div"); + grayscaleToggle.style.width = "20px"; + grayscaleToggle.style.height = "20px"; + grayscaleToggle.style.borderRadius = "50%"; + grayscaleToggle.style.background = "linear-gradient(to right, black 50%, white 50%)"; + grayscaleToggle.style.cursor = "pointer"; + grayscaleToggle.style.border = "1px solid #ccc"; + + grayscaleToggle.addEventListener("click", function (event) { + const clickX = event.offsetX; + const toggleWidth = grayscaleToggle.offsetWidth; + + if (clickX < toggleWidth / 2) { + // Left side (black): enable grayscale + document.documentElement.style.filter = "grayscale(100%)"; + } else { + // Right side (white): disable grayscale + document.documentElement.style.filter = "none"; + } + }); + + // Append elements to panel + controlPanel.appendChild(decreaseButton); + controlPanel.appendChild(increaseButton); + controlPanel.appendChild(grayscaleToggle); + + // Append panel to body + document.body.appendChild(controlPanel); +}); diff --git a/client-extensions/clarity-theme/client-extension.yaml b/client-extensions/clarity-theme/client-extension.yaml new file mode 100644 index 0000000..6cf2dfc --- /dev/null +++ b/client-extensions/clarity-theme/client-extension.yaml @@ -0,0 +1,29 @@ +assemble: + - from: build/buildTheme/img + into: static/img + - from: assets + into: static + - from: build/static + into: static +clarity-theme: + clayURL: css/clay.css + mainURL: css/main.css + frontendTokenDefinitionJSON: src/frontend-token-definition.json + name: Clarity Theme CSS + type: themeCSS +clarity-theme-favicon: + name: Clarity Theme Favicon + type: themeFavicon + url: clarity-favicon-primary.svg +clarity-theme-favicon-dark: + name: Clarity Theme Favicon Dark + type: themeFavicon + url: clarity-favicon-dark.svg +clarity-theme-favicon-light: + name: Clarity Theme Favicon Light + type: themeFavicon + url: clarity-favicon-light.svg +clarity-global-js: + name: Clarity Global JS + type: globalJS + url: global.*.js \ No newline at end of file diff --git a/client-extensions/clarity-theme/package.json b/client-extensions/clarity-theme/package.json new file mode 100644 index 0000000..ce86c7f --- /dev/null +++ b/client-extensions/clarity-theme/package.json @@ -0,0 +1,18 @@ +{ + "devDependencies": { + "webpack": "5.90.1", + "webpack-cli": "5.1.4" + }, + "dependencies": { + }, + "liferayDesignPack": { + "baseTheme": "styled" + }, + "main": "package.json", + "name": "@liferay/clarity-theme", + "private": true, + "scripts": { + "build": "webpack" + }, + "version": "0.1.0" +} \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/_classic_clay_variables.scss b/client-extensions/clarity-theme/src/css/_classic_clay_variables.scss new file mode 100644 index 0000000..f76d22d --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_classic_clay_variables.scss @@ -0,0 +1,748 @@ +// Global Variables + +$clay-unset: clay-unset !default; + +// An alias for `$clay-unset` + +$c-unset: $clay-unset !default; + +$clay-unset-placeholder: clay-unset-placeholder !default; + +$enable-c-inner: true !default; +$enable-lexicon-flat-colors: true !default; +$enable-scaling-components: true !default; +$scaling-breakpoint-down: sm !default; + +$enable-caret: false !default; +$enable-deprecation-messages: true !default; +$enable-gradients: false !default; +$enable-grid-classes: true !default; +$enable-pointer-cursor-for-buttons: true !default; +$enable-prefers-reduced-motion-media-query: true !default; +$enable-print-styles: true !default; +$enable-responsive-font-sizes: false !default; +$enable-rounded: true !default; +$enable-shadows: true !default; +$enable-transitions: true !default; +$enable-validation-icons: true !default; + +// Deprecated, no longer affects any compiled CSS + +$enable-hover-media-query: false !default; + +// Theme Base Colors + +$black: #000 !default; +$white: #fff !default; + +$gray-100: #f7f8f9 !default; +$gray-200: #f1f2f5 !default; +$gray-300: #e7e7ed !default; +$gray-400: #cdced9 !default; +$gray-500: #a7a9bc !default; +$gray-600: #6b6c7e !default; +$gray-700: #495057 !default; +$gray-800: #393a4a !default; +$gray-900: #272833 !default; + +$blue: if($enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default; +$cyan: if($enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default; +$green: if($enable-lexicon-flat-colors, #9be169, #287d3d) !default; +$indigo: if($enable-lexicon-flat-colors, #7785ff, #6610f2) !default; +$orange: if($enable-lexicon-flat-colors, #ffb46e, #b95000) !default; +$pink: if($enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default; +$purple: if($enable-lexicon-flat-colors, #af78ff, #6f42c1) !default; +$red: if($enable-lexicon-flat-colors, #ff5f5f, #da1414) !default; +$teal: if($enable-lexicon-flat-colors, #50d2a0, #20c997) !default; +$yellow: if($enable-lexicon-flat-colors, #ffd76e, #ffc107) !default; + +$primary: #0b5fff !default; + +$primary-d1: darken($primary, 5.1) !default; +$primary-d2: darken($primary, 10) !default; +$primary-l1: lighten($primary, 22.94) !default; +$primary-l2: lighten($primary, 32.94) !default; +$primary-l3: lighten($primary, 44.9) !default; + +$secondary: #6b6c7e !default; + +$secondary-d1: darken(saturate($secondary, 4.82), 20) !default; +$secondary-d2: darken(saturate($secondary, 5.36), 23.92) !default; +$secondary-l1: lighten( + saturate(adjust-hue($secondary, -3), 5.39), + 23.92 +) !default; +$secondary-l2: lighten( + saturate(adjust-hue($secondary, -2), 5.48), + 37.06 +) !default; +$secondary-l3: lighten( + saturate(adjust-hue($secondary, 3), 6.13), + 46.08 +) !default; + +$info: #2e5aac !default; + +$info-d1: darken($info, 5) !default; +$info-d2: darken($info, 10) !default; +$info-l1: lighten(saturate($info, 0.59), 28.04) !default; +$info-l2: lighten(desaturate($info, 3.25), 52.94) !default; + +$success: #287d3c !default; + +$success-d1: darken($success, 5) !default; +$success-d2: darken($success, 10) !default; +$success-l1: lighten(desaturate($success, 0.14), 24.95) !default; +$success-l2: lighten(desaturate($success, 1.52), 62.94) !default; + +$warning: #b95000 !default; + +$warning-d1: darken($warning, 5.1) !default; +$warning-d2: darken($warning, 10) !default; +$warning-l1: lighten($warning, 24.9) !default; +$warning-l2: lighten($warning, 60) !default; + +$danger: #da1414 !default; + +$danger-d1: darken($danger, 5) !default; +$danger-d2: darken($danger, 10) !default; +$danger-l1: lighten(desaturate($danger, 0.25), 28.04) !default; +$danger-l2: lighten(saturate($danger, 5.04), 50) !default; + +$light: #f1f2f5 !default; + +$light-d1: darken($light, 5.1) !default; +$light-d2: darken($light, 10) !default; +$light-l1: lighten(desaturate(adjust-hue($light, -15), 2.38), 1.96) !default; +$light-l2: lighten(desaturate(adjust-hue($light, -225), 16.67), 4.71) !default; + +$dark: #272833 !default; + +$dark-d1: darken($dark, 5.1) !default; +$dark-d2: darken($dark, 10) !default; +$dark-l1: lighten(saturate($dark, 0.18), 4.12) !default; +$dark-l2: lighten(desaturate($dark, 0.36), 8.04) !default; + +$theme-colors: () !default; +$theme-colors: map-merge( + ( + 'danger': $danger, + 'dark': $dark, + 'info': $info, + 'light': $light, + 'primary': $primary, + 'secondary': $secondary, + 'success': $success, + 'warning': $warning, + ), + $theme-colors +); + +// Set a specific jump point for requesting color jumps + +$theme-color-interval: 8% !default; + +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. + +$yiq-contrasted-threshold: 150 !default; + +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; + +// Spacing + +$spacer: 1rem !default; +$spacers: () !default; +$spacers: map-deep-merge( + ( + 0: var(--spacer-0, 0), + 1: var(--spacer-1, $spacer * 0.25), + 2: var(--spacer-2, $spacer * 0.5), + 3: var(--spacer-3, $spacer * 1), + 4: var(--spacer-4, $spacer * 1.25), + 5: var(--spacer-5, $spacer * 1.5), + 6: var(--spacer-6, $spacer * 2), + 7: var(--spacer-7, $spacer * 3), + 8: var(--spacer-8, $spacer * 4.5), + 9: var(--spacer-9, $spacer * 5), + 10: var(--spacer-10, $spacer * 6), + 11: var(--spacer-11, $spacer * 7.5), + 12: var(--spacer-12, $spacer * 9), + 13: var(--spacer-13, $spacer * 10), + ), + $spacers +); + +// This variable affects the `.h-*` and `.w-*` classes. + +$sizes: () !default; +$sizes: map-merge( + ( + 100: 100%, + 25: 25%, + 50: 50%, + 75: 75%, + auto: auto, + ), + $sizes +); + +// Reusable Values + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$line-height-base: 1.5 !default; + +$border-color: $gray-200 !default; +$border-width: 0.0625rem !default; + +$border-radius: 0.25rem !default; + +$border-radius-lg: var(--border-radius-lg, 0.375rem) !default; +$border-radius-sm: var(--border-radius-sm, 0.1875rem) !default; + +$rounded-0-border-radius: 0 !default; +$rounded-border-radius: var(--border-radius, $border-radius) !default; +$rounded-circle-border-radius: var(--border-radius-circle, 5000px) !default; +$rounded-pill: var(--rounded-pill, 50rem) !default; + +$box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba($black, 0.15)) !default; + +$box-shadow-lg: var(--box-shadow-lg, 0 1rem 3rem rgba($black, 0.175)) !default; +$box-shadow-sm: var( + --box-shadow-sm, + 0 0.125rem 0.25rem rgba($black, 0.075) +) !default; + +$transition-base: all 0.2s ease-in-out !default; +$transition-collapse: var(--transition-collapse, height 0.35s ease) !default; +$transition-fade: var(--transition-fade, opacity 0.15s linear) !default; + +$embed-responsive-aspect-ratios: () !default; +$embed-responsive-aspect-ratios: join( + ((21 9), (16 9), (4 3), (1 1)), + $embed-responsive-aspect-ratios +); + +$component-active-bg: #0b5fff !default; +$component-active-color: $white !default; + +$component-focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1 !default; +$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 + 0 0 0.25rem $white !default; + +// Grid + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1280px, +) !default; + +// Grid columns + +$grid-columns: 12 !default; +$grid-gutter-width: 24px !default; +$grid-row-columns: 6 !default; + +$container-max-widths: ( + sm: var(--container-max-sm, 540px), + md: var(--container-max-md, 720px), + lg: var(--container-max-lg, 960px), + xl: var(--container-max-xl, 1248px), +) !default; + +$container-form-lg: () !default; +$container-form-lg: map-deep-merge( + ( + breakpoint-up: lg, + padding-bottom-mobile: 1rem, + padding-bottom: 3rem, + padding-top-mobile: 1rem, + padding-top: 3rem, + ), + $container-form-lg +); + +$container-view: () !default; +$container-view: map-deep-merge( + ( + padding-bottom: 1.5rem, + padding-top: 1.5rem, + ), + $container-view +); + +$moz-osx-font-smoothing: grayscale !default; +$webkit-font-smoothing: antialiased !default; + +$font-import-url: null !default; + +$font-family-monospace: sfmono-regular, menlo, monaco, consolas, + 'Liberation Mono', 'Courier New', monospace !default; +$font-family-sans-serif: 'Poppins', system-ui, -apple-system, blinkmacsystemfont, + 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; +$font-family-serif: georgia, 'Times New Roman', times, serif !default; + +$font-family-base: var(--font-family-base, $font-family-sans-serif) !default; + +$font-size-base: 1rem !default; + +$font-size-lg: 1.125rem !default; +$font-size-sm: 0.875rem !default; + +$font-size-base-mobile: $font-size-base !default; +$font-size-lg-mobile: $font-size-lg !default; + +$font-weight-bold: var(--font-weight-bold, 700) !default; +$font-weight-bolder: var(--font-weight-bolder, 900) !default; +$font-weight-light: var(--font-weight-light, 300) !default; +$font-weight-lighter: var(--font-weight-lighter, lighter) !default; +$font-weight-normal: var(--font-weight-normal, 400) !default; +$font-weight-semi-bold: var(--font-weight-semi-bold, 600) !default; + +$font-weight-base: $font-weight-normal !default; + +$h1-font-size: var(--h1-font-size, 1.625rem) !default; +$h2-font-size: var(--h2-font-size, 1.375rem) !default; +$h3-font-size: var(--h3-font-size, 1.1875rem) !default; +$h4-font-size: var(--h4-font-size, 1rem) !default; +$h5-font-size: var(--h5-font-size, 0.875rem) !default; +$h6-font-size: var(--h6-font-size, 0.8125rem) !default; + +$h1-font-size-mobile: null !default; +$h2-font-size-mobile: null !default; +$h3-font-size-mobile: null !default; +$h4-font-size-mobile: null !default; +$h5-font-size-mobile: null !default; +$h6-font-size-mobile: null !default; + +$headings-color: null !default; +$headings-font-family: null !default; +$headings-font-weight: $font-weight-bold !default; +$headings-line-height: 1.2 !default; +$headings-margin-bottom: $spacer * 0.5 !default; + +// Body + +$body-bg: var(--body-bg, $white) !default; +$body-color: var(--body-color, $gray-900) !default; +$body-moz-osx-font-smoothing: $moz-osx-font-smoothing !default; +$body-text-align: inherit !default; +$body-webkit-font-smoothing: $webkit-font-smoothing !default; + +$c-body: () !default; +$c-body: map-merge( + ( + -moz-osx-font-smoothing: $body-moz-osx-font-smoothing, + -ms-overflow-style: scrollbar, + -webkit-font-smoothing: $body-webkit-font-smoothing, + background-color: $body-bg, + color: $body-color, + font-family: $font-family-base, + font-size: var(--font-size-base, $font-size-base), + font-weight: $font-weight-base, + line-height: $line-height-base, + margin: 0, + text-align: $body-text-align + ), + $c-body +); + +// Link + +$link-color: $primary !default; +$link-decoration: none !default; +$link-hover-color: $primary-d2 !default; +$link-hover-decoration: underline !default; + +// Cursors + +$disabled-cursor: not-allowed !default; +$link-cursor: pointer !default; + +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) + +$emphasized-link-hover-darken-percentage: 15% !default; + +// Paragraph + +$paragraph-margin-bottom: 1rem !default; + +$display1-size: var(--display1-size, 6rem) !default; +$display2-size: var(--display2-size, 5.5rem) !default; +$display3-size: var(--display3-size, 4.5rem) !default; +$display4-size: var(--display4-size, 3.5rem) !default; + +$display1-weight: var(--display1-weight, 300) !default; +$display2-weight: var(--display2-weight, 300) !default; +$display3-weight: var(--display3-weight, 300) !default; +$display4-weight: var(--display4-weight, 300) !default; + +$display-line-height: var( + --display-line-height, + $headings-line-height +) !default; + +$lead-font-size: var(--lead-font-size, $font-size-base * 1.25) !default; +$lead-font-weight: var(--lead-font-weight, 400) !default; + +$small-font-size: 0.875rem !default; + +$text-muted: var(--text-muted, $gray-500) !default; + +$blockquote-font-size: var(--blockquote-font-size, $font-size-base * 1.25); + +$blockquote-small-color: var(--blockquote-small-color, $gray-600); +$blockquote-small-font-size: var( + --blockquote-small-font-size, + $small-font-size +); + +$hr-border-color: var(--hr-border-color, rgba($black, 0.1)) !default; +$hr-border-width: var(--hr-border-width, $border-width) !default; +$hr-margin-y: var(--hr-margin-y, $spacer) !default; + +$mark-padding: 0.2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$code-color: $pink !default; +$code-font-size: 87.5% !default; + +$kbd-bg: $gray-900 !default; +$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; +$kbd-color: $white !default; +$kbd-font-size: $code-font-size !default; +$kbd-padding-x: 0.4rem !default; +$kbd-padding-y: 0.2rem !default; + +$nested-kbd-font-weight: $font-weight-bold !default; + +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; + +$list-inline-padding: 0.5rem !default; + +$mark-bg: #fcf8e3 !default; + +// Button + +$c-button-base: () !default; +$c-button-base: map-merge( + (-webkit-appearance: button, cursor: $link-cursor), + $c-button-base +); + +// Buttons + Forms + +$label-margin-bottom: 0.5rem !default; + +$input-btn-font-family: null !default; +$input-btn-font-size: $font-size-base !default; +$input-btn-line-height: $line-height-base !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-padding-y: 0.375rem !default; + +$input-btn-focus-width: 0.2rem !default; + +$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; + +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-font-size-sm: $font-size-sm !default; +$input-btn-line-height-sm: $line-height-sm !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-padding-y-sm: 0.25rem !default; + +$input-btn-font-size-lg: $font-size-lg !default; +$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-padding-y-lg: 0.5rem !default; + +$input-btn-border-width: $border-width !default; + +// Print + +$print-body-min-width: map-get($grid-breakpoints, 'lg') !default; +$print-page-size: a3 !default; + +// Btn + +$btn-primary: () !default; +$btn-primary: map-deep-merge( + ( + active: ( + background-image: $c-unset, + color: $c-unset, + ), + active-bg: $c-unset, + active-border-color: $c-unset, + active-focus-box-shadow: $c-unset, + background-color: var(--btn-primary-background-color, $primary), + border-color: var(--btn-primary-border-color, $primary), + box-shadow: $c-unset, + color: var(--btn-primary-color, color-yiq($primary)), + disabled: ( + background-image: $c-unset, + border-color: $c-unset, + color: $c-unset, + ), + disabled-bg: $c-unset, + focus: ( + background-image: $c-unset, + border-color: $c-unset, + color: $c-unset, + ), + focus-bg: $c-unset, + focus-box-shadow: $c-unset, + hover: ( + background-image: clay-enable-gradients($primary-d1), + color: var(--btn-primary-hover-color, color-yiq($primary-d1)), + ), + hover-bg: var(--btn-primary-hover-background-color, $primary-d1), + hover-border-color: var(--btn-primary-hover-border-color, transparent), + ), + $btn-primary +); + +$btn-outline-primary: () !default; +$btn-outline-primary: map-deep-merge( + ( + active: ( + border-color: $c-unset, + ), + active-bg: $c-unset, + active-box-shadow: $c-unset, + active-color: $c-unset, + active-focus-box-shadow: $c-unset, + border-color: var(--btn-outline-primary-border-color, $primary), + color: var(--btn-outline-primary-color, $primary), + disabled-bg: $c-unset, + disabled-border-color: $c-unset, + disabled-color: $c-unset, + focus-bg: $c-unset, + focus-box-shadow: $c-unset, + focus-color: $c-unset, + hover: ( + border-color: + var(--btn-outline-primary-hover-border-color, $primary), + ), + hover-bg: var(--btn-outline-primary-hover-background-color, $primary-l3), + hover-color: var(--btn-outline-primary-hover-color, color-yiq($primary)), + ), + $btn-outline-primary +); + +$btn-secondary: () !default; +$btn-secondary: map-deep-merge( + ( + active-bg: $c-unset, + active-border-color: $c-unset, + active-color: $c-unset, + active-focus-box-shadow: $c-unset, + background-image: clay-enable-gradients($white), + bg: var(--btn-secondary-background-color, $white), + border-color: var(--btn-secondary-border-color, $secondary-l2), + box-shadow: $c-unset, + color: var(--btn-secondary-color, $secondary), + disabled: ( + background-image: $c-unset, + ), + disabled-bg: $c-unset, + disabled-border-color: $c-unset, + disabled-color: $c-unset, + focus: ( + background-image: $c-unset, + ), + focus-bg: $c-unset, + focus-border-color: $c-unset, + focus-box-shadow: $c-unset, + focus-color: $c-unset, + hover: ( + background-image: clay-enable-gradients($gray-100), + ), + hover-bg: var(--btn-secondary-hover-background-color, $gray-100), + hover-border-color: + var(--btn-secondary-hover-border-color, $secondary-l2), + hover-color: var(--btn-secondary-hover-color, $gray-900), + ), + $btn-secondary +); + +$btn-outline-secondary: () !default; +$btn-outline-secondary: map-deep-merge( + ( + active-bg: $c-unset, + active-border-color: $c-unset, + active-box-shadow: $c-unset, + active-color: $c-unset, + active-focus-box-shadow: $c-unset, + bg: var(--btn-outline-secondary-background-color, transparent), + border-color: var(--btn-outline-secondary-border-color, $secondary-l2), + color: var(--btn-outline-secondary-color, $secondary), + disabled-bg: $c-unset, + disabled-border-color: $c-unset, + disabled-color: $c-unset, + focus-bg: $c-unset, + focus-border-color: $c-unset, + focus-box-shadow: $c-unset, + focus-color: $c-unset, + hover-bg: + var( + --btn-outline-secondary-hover-background-color, + rgba($gray-900, 0.03) + ), + hover-border-color: + var(--btn-outline-secondary-hover-border-color, transparent), + hover-color: var(--btn-outline-secondary-hover-color, color-yiq($white)), + ), + $btn-outline-secondary +); + +$btn-link-disabled-color: $gray-600 !default; + +$btn-link: () !default; +$btn-link: map-deep-merge( + ( + active: ( + box-shadow: clay-enable-shadows([none]), + ), + border-radius: 1px, + box-shadow: $c-unset, + color: var(--btn-link-color, $link-color), + disabled: ( + box-shadow: none, + color: $c-unset, + text-decoration: none, + ), + focus: ( + box-shadow: $c-unset, + text-decoration: $link-decoration, + ), + font-weight: $font-weight-normal, + hover: ( + color: var(--btn-link-hover-color, $link-hover-color), + text-decoration: $link-hover-decoration, + ), + text-decoration: $link-decoration, + ), + $btn-link +); + +// Utilities + +$bg-theme-colors: () !default; +$bg-theme-colors: map-deep-merge( + ( + 'danger': ( + background-color: var(--danger, $danger) !important, + ), + 'dark': ( + background-color: var(--dark, $dark) !important, + ), + 'gray-dark': ( + background-color: var(--gray-800, $gray-800) !important, + ), + 'info': ( + background-color: var(--info, $info) !important, + ), + 'light': ( + background-color: var(--light, $light) !important, + ), + 'lighter': ( + background-color: var(--gray-100, $gray-100) !important, + ), + 'primary': ( + background-color: var(--primary, $primary) !important, + ), + 'secondary': ( + background-color: var(--secondary, $secondary) !important, + ), + 'success': ( + background-color: var(--success, $success) !important, + ), + 'warning': ( + background-color: var(--warning, $warning) !important, + ), + ), + $bg-theme-colors +); + +$border-theme-colors: () !default; +$border-theme-colors: map-deep-merge( + ( + 'danger': ( + border-color: var(--danger, $danger) !important, + ), + 'dark': ( + border-color: var(--dark, $dark) !important, + ), + 'gray-dark': ( + border-color: var(--gray-800, $gray-800) !important, + ), + 'info': ( + border-color: var(--info, $info) !important, + ), + 'light': ( + border-color: var(--light, $light) !important, + ), + 'lighter': ( + border-color: var(-gray-100, $gray-100) !important, + ), + 'primary': ( + border-color: var(--primary, $primary) !important, + ), + 'secondary': ( + border-color: var(--secondary, $secondary) !important, + ), + 'success': ( + border-color: var(--success, $success) !important, + ), + 'warning': ( + border-color: var(--warning, $warning) !important, + ), + ), + $border-theme-colors +); + +$text-theme-colors: () !default; +$text-theme-colors: map-deep-merge( + ( + 'danger': ( + color: var(--danger, $danger) !important, + ), + 'dark': ( + color: var(--dark, $dark) !important, + ), + 'gray-dark': ( + color: var(--gray-800, $gray-800) !important, + ), + 'info': ( + color: var(--info, $info) !important, + ), + 'light': ( + color: var(--light, $light) !important, + ), + 'lighter': ( + color: var(--gray-100, $gray-100) !important, + ), + 'primary': ( + color: var(--primary, $primary) !important, + ), + 'secondary': ( + color: var(--secondary, $secondary) !important, + ), + 'success': ( + color: var(--success, $success) !important, + ), + 'warning': ( + color: var(--warning, $warning) !important, + ), + ), + $text-theme-colors +); diff --git a/client-extensions/clarity-theme/src/css/_classic_custom.scss b/client-extensions/clarity-theme/src/css/_classic_custom.scss new file mode 100644 index 0000000..9f76614 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_classic_custom.scss @@ -0,0 +1,104 @@ +@import 'components/breadcrumb'; +@import 'components/color'; +@import 'components/commerce/index'; +@import 'components/group-item'; +@import 'components/info-panel'; +@import 'components/navbars'; +@import 'components/sidebar'; +@import 'components/table'; +@import 'components/widget'; +@import 'portlet/portlet'; +@import 'portlet/portlet_decorators'; + +@import 'custom_properties/custom_properties_set'; + +body { + header { + .field-wrapper { + position: absolute; + right: 4px; + top: 2px; + + a { + color: #fff; + } + } + + .field-wrapper, + .form-group { + margin-bottom: 0; + } + + .portlet { + margin-bottom: 0; + + &:hover { + z-index: 1034; + } + } + + .search-input { + font-size: 0.88rem; + padding: 0.28rem 2rem 0.28rem 1rem; + } + + .text-default { + color: #6b6c7e; + font-weight: 600; + } + + .user-personal-bar { + .fieldset { + position: relative; + } + + .user-avatar-link .panel-notifications-count { + right: calc(100% - 0.75rem); + top: -0.35rem; + } + } + } + + .user-avatar-link { + display: block; + position: relative; + + .panel-notifications-count { + display: block; + margin: 0; + max-width: none; + position: absolute; + right: calc(100% - 0.7rem); + top: -0.4rem; + } + + .text-default { + align-items: center; + display: flex; + + .user-full-name { + margin-left: 0.5rem; + + @include media-breakpoint-down(xs) { + display: none; + } + } + } + } +} + +.btn-group + .info-panel { + @include media-breakpoint-up(sm) { + top: auto; + } +} + +#footer { + color: #fff; + margin-top: 1rem; + + > .container { + padding-bottom: 3rem; + padding-top: 3rem; + } +} diff --git a/client-extensions/clarity-theme/src/css/_clay_variables.scss b/client-extensions/clarity-theme/src/css/_clay_variables.scss new file mode 100644 index 0000000..2e27e21 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_clay_variables.scss @@ -0,0 +1,5 @@ +@import 'dialect/classic_style_book_compat'; + +@import 'classic_clay_variables'; + +@import 'dialect/clay_variables'; diff --git a/client-extensions/clarity-theme/src/css/_custom.scss b/client-extensions/clarity-theme/src/css/_custom.scss new file mode 100644 index 0000000..25e293f --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_custom.scss @@ -0,0 +1,102 @@ +@import 'classic_custom'; + +@import 'dialect/index'; + + +a { + text-decoration: none !important; +} + +.list-menu ul { + padding-left: 0; +} + +li.lfr-nav-item.open { + padding-bottom: 0.85rem; +} + +li.lfr-nav-item.open > a { + text-decoration: none; +} + + +li.lfr-nav-item.nav-item { + font-weight: bold; +} + +li.lfr-nav-item.nav-item:hover { + font-weight: bold; + color: var(--primary); +} + +li.lfr-nav-item.nav-item.selected.active { + font-weight: bold; + padding: 3px; + background-color: var(--color-brand-primary-lighten-5); + border-radius: 5px; + color: var(--primary); +} + +.bg-light { + background-color: var(--gray-100) !important; +} + +.panel-header { + border-bottom: 0px solid transparent; + border-top-left-radius: calc( 0.5rem - 1px ); + border-top-right-radius: calc( 0.5rem - 1px ); + display: block; + font-size: 0.875rem; + line-height: 1.2; + padding: 0.75rem 0.3rem; + position: relative; + width: 100%; +} + +div.clarity-legal-menu li.lfr-nav-item.nav-item { + font-weight: normal; +} + +button.facet-clear-btn > strong { + font-size:0.75rem; + padding-left: 5px; +} + +.clarity-facet-list { + padding-left: 5px; +} + +.table td.prdct { + border-bottom-color: var(--gray-200); + border-top-color: var(--white); +} + +.card.prdct { + background-color: var(--gray-100); +} + +.bg-w { + background-color: var(--white); +} + +.lfr-layout-structure-item-com-liferay-commerce-product-content-search-web-internal-portlet-cpspecificationoptionfacetsportlet { + background-color: var(--gray-100); + padding: 0.875rem; + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.lfr-layout-structure-item-com-liferay-commerce-product-content-search-web-internal-portlet-cpoptionfacetsportlet { + background-color: var(--gray-100); + padding: 0.875rem; + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.lfr-layout-structure-item-com-liferay-commerce-product-content-search-web-internal-portlet-cpoptionfacetsportlet .panel-collapse{ + padding-left: 1rem; +} + +.lfr-layout-structure-item-com-liferay-commerce-product-content-search-web-internal-portlet-cpspecificationoptionfacetsportlet .panel-collapse{ + padding-left: 1rem; +} \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/_imports.scss b/client-extensions/clarity-theme/src/css/_imports.scss new file mode 100644 index 0000000..6601833 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_imports.scss @@ -0,0 +1,6 @@ +@import 'clay/atlas-variables'; +@import 'clay/cadmin-variables'; + +@import url('https://fonts.googleapis.com/css2? family=Roboto+Slab:wght@100..900&display=swap'); *{ + font-family: 'Roboto Slab', serif; +} \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/_liferay_variables_custom.scss b/client-extensions/clarity-theme/src/css/_liferay_variables_custom.scss new file mode 100644 index 0000000..4eba98b --- /dev/null +++ b/client-extensions/clarity-theme/src/css/_liferay_variables_custom.scss @@ -0,0 +1,8 @@ +$theme-color-palette: () !default; +$theme-color-palette: map-merge( + ( + lighter: $gray-100, + gray-dark: $gray-800, + ), + $theme-color-palette +); diff --git a/client-extensions/clarity-theme/src/css/clay.scss b/client-extensions/clarity-theme/src/css/clay.scss new file mode 100644 index 0000000..d74b2c9 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/clay.scss @@ -0,0 +1 @@ +@import 'clay/atlas'; \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/components/_breadcrumb.scss b/client-extensions/clarity-theme/src/css/components/_breadcrumb.scss new file mode 100644 index 0000000..3455059 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_breadcrumb.scss @@ -0,0 +1,4 @@ +.breadcrumb-horizontal { + font-size: 0.875rem; + padding: 0; +} diff --git a/client-extensions/clarity-theme/src/css/components/_color.scss b/client-extensions/clarity-theme/src/css/components/_color.scss new file mode 100644 index 0000000..5090028 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_color.scss @@ -0,0 +1,13 @@ +@each $color, $value in $theme-color-palette { + .bg-#{$color} { + background-color: $value !important; + } + + .border-#{$color} { + border-color: $value !important; + } + + .text-#{$color} { + color: $value !important; + } +} diff --git a/client-extensions/clarity-theme/src/css/components/_group-item.scss b/client-extensions/clarity-theme/src/css/components/_group-item.scss new file mode 100644 index 0000000..ac797d9 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_group-item.scss @@ -0,0 +1,4 @@ +.list-group-item-flex > .autofit-col:first-of-type { + padding-left: 10px; + padding-right: 4px; +} diff --git a/client-extensions/clarity-theme/src/css/components/_info-panel.scss b/client-extensions/clarity-theme/src/css/components/_info-panel.scss new file mode 100644 index 0000000..2ec1e23 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_info-panel.scss @@ -0,0 +1,14 @@ +.info-panel { + @include media-breakpoint-up(md) { + bottom: 0; + position: absolute; + top: 0; + + > .sidenav-menu { + bottom: 0; + position: absolute; + right: 0 !important; + top: 0; + } + } +} diff --git a/client-extensions/clarity-theme/src/css/components/_navbars.scss b/client-extensions/clarity-theme/src/css/components/_navbars.scss new file mode 100644 index 0000000..a89df95 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_navbars.scss @@ -0,0 +1,77 @@ +.navbar-top { + padding-bottom: 0.907rem; + padding-top: 0.907rem; + + .portlet { + &:hover, + &.open { + z-index: 1035; + } + } +} + +.navbar-blank { + flex-wrap: wrap; + + .lexicon-icon { + font-size: 0.625rem; + margin: 0 0 0 0.25rem; + } +} + +.navbar-classic { + background-color: #fff; + + &.navbar-light { + border-bottom: 1px solid $secondary-l3; + } + + .navbar-blank { + @include media-breakpoint-down(xs) { + margin-top: 1rem; + } + } + + .navbar-form { + padding: 0; + + .field-wrapper { + right: 0; + top: 0; + + .lfr-icon-item { + color: #6b6c7e; + } + } + } + + .portlet-search-bar { + @include media-breakpoint-down(sm) { + width: 100%; + } + + .input-group-item { + margin-left: 0; + } + } + + .logo:hover { + text-decoration: none; + } + + .navbar-nav { + .nav-item:not(:last-of-type) { + .nav-link { + @include media-breakpoint-up(lg) { + margin-right: 16px; + } + } + } + } + + .nav-link { + color: #6b6c7e; + font-size: 0.9375rem; + font-weight: 600; + } +} diff --git a/client-extensions/clarity-theme/src/css/components/_sidebar.scss b/client-extensions/clarity-theme/src/css/components/_sidebar.scss new file mode 100644 index 0000000..2f673d6 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_sidebar.scss @@ -0,0 +1,73 @@ +.info-panel { + .sidebar > .sidenav-close { + float: right; + margin: 16px 16px 0 8px; + + + .info-panel-content { + .sidebar-header > .autofit-row { + width: auto; + } + } + } + + .sidenav-close { + float: none; + margin: 0; + } + + .sidebar-header { + .component-title { + font-size: 16px; + font-weight: 600; + } + + .component-subtitle { + font-size: 14px; + font-weight: 600; + } + + .autofit-padded-no-gutters { + margin-left: -4px; + margin-right: -4px; + + .autofit-col { + padding-left: 4px; + padding-right: 4px; + } + } + } + + .sidebar-body { + .sidebar-section { + margin-bottom: 16px; + } + } +} + +.sidebar-light { + .sidebar-header { + .text-default { + color: $secondary; + font-size: 0.875rem; + font-weight: 400; + } + + .icon-monospaced { + color: $secondary; + } + } + + .navbar-collapse { + border-bottom: 1px solid #cdced9; + } + + .navigation-bar-light, + .sidebar-section > .list-group-item, + .panel, + .panel-group .panel { + @include media-breakpoint-up(sm) { + background-color: transparent; + border-color: transparent; + } + } +} diff --git a/client-extensions/clarity-theme/src/css/components/_table.scss b/client-extensions/clarity-theme/src/css/components/_table.scss new file mode 100644 index 0000000..3c57a6c --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_table.scss @@ -0,0 +1,7 @@ +.table-list { + th:first-child, + td:first-child { + padding-left: 18px; + padding-right: 6px; + } +} diff --git a/client-extensions/clarity-theme/src/css/components/_widget.scss b/client-extensions/clarity-theme/src/css/components/_widget.scss new file mode 100644 index 0000000..16d3394 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/_widget.scss @@ -0,0 +1,126 @@ +.widget-mode-detail { + background-color: #fff; + + .title { + color: $dark; + font-weight: 700; + line-height: 1.25; + } + + .sub-title { + color: #a0a1b0; + font-weight: 400; + } + + .widget-metadata { + font-size: 0.875rem; + + .inline-item-before { + margin-right: 1rem; + } + + .username { + color: $dark; + font-weight: 600; + line-height: 2; + } + } + + .aspect-ratio { + padding-bottom: 480px; + } +} + +.widget-mode-card { + .card { + border-radius: 8px; + } + + .card-header { + border-radius: 8px 8px 0 0; + } + + .card-body { + padding: 24px; + } + + .widget-topbar { + .title-link { + color: $dark; + } + + .title { + font-size: 1.5rem; + font-weight: 700; + margin-right: 24px; + } + } + + .widget-metadata { + font-size: 0.875rem; + margin-bottom: 16px; + + .inline-item-before { + margin-right: 1rem; + } + + .username { + color: $dark; + font-weight: 600; + } + } + + .widget-resume { + font-size: 15px; + line-height: 1.6; + margin-bottom: 0; + } + + .card-footer { + background-color: transparent; + padding: 0 1rem 1rem; + } + + .widget-toolbar { + border-top: 1px solid $secondary-l3; + padding-top: 8px; + } +} + +.widget-mode-simple { + .widget-mode-simple-entry:not(:last-child) { + border-bottom: 1px solid $secondary-l3; + margin-bottom: 24px; + padding-bottom: 24px; + } + + .widget-topbar { + .title-link { + color: $dark; + } + + .title { + font-size: 1.75rem; + font-weight: 700; + } + } + + .widget-metadata { + font-size: 0.875rem; + + .inline-item-before { + margin-right: 1rem; + } + + .username { + color: $dark; + font-weight: 600; + } + } +} + +.widget-toolbar { + .autofit-col:first-of-type > .btn-outline-borderless { + margin-left: -0.75rem; + } +} diff --git a/client-extensions/clarity-theme/src/css/components/commerce/_index.scss b/client-extensions/clarity-theme/src/css/components/commerce/_index.scss new file mode 100644 index 0000000..a10e418 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/commerce/_index.scss @@ -0,0 +1 @@ +@import 'open_carts'; diff --git a/client-extensions/clarity-theme/src/css/components/commerce/_open_carts.scss b/client-extensions/clarity-theme/src/css/components/commerce/_open_carts.scss new file mode 100644 index 0000000..1dae4ff --- /dev/null +++ b/client-extensions/clarity-theme/src/css/components/commerce/_open_carts.scss @@ -0,0 +1,17 @@ +.portlet-commerce-open-order-content { + .order-details-container { + margin-bottom: var(--spacer-5); + + .lfr-icon-menu { + float: right; + + .position-fixed { + position: initial !important; + } + } + + .commerce-cta > div { + display: inline-block; + } + } +} diff --git a/client-extensions/clarity-theme/src/css/custom_properties/_custom_properties_set.scss b/client-extensions/clarity-theme/src/css/custom_properties/_custom_properties_set.scss new file mode 100644 index 0000000..36540df --- /dev/null +++ b/client-extensions/clarity-theme/src/css/custom_properties/_custom_properties_set.scss @@ -0,0 +1,79 @@ +// Aspect ratio + +.aspect-ratio { + padding-bottom: var(--aspect-ratio); +} + +.aspect-ratio-1 { + --aspect-ratio: var(--aspect-ratio-1); +} + +.aspect-ratio-2 { + --aspect-ratio: var(--aspect-ratio-2); +} + +.aspect-ratio-3 { + --aspect-ratio: var(--aspect-ratio-3); +} + +.aspect-ratio-4 { + --aspect-ratio: var(--aspect-ratio-4); +} + +.aspect-ratio-5 { + --aspect-ratio: var(--aspect-ratio-5); +} + +.aspect-ratio-6 { + --aspect-ratio: var(--aspect-ratio-6); +} + +// Body + +#wrapper { + --portlet-topper-bg: var(--primary); + --portlet-topper-color: var(--white); + --portlet-topper-link-color: var(--portlet-topper-color); + + background-color: var(--body-bg, $body-bg); + color: var(--body-color, $body-color); + font-size: var(--font-size-base, $font-size-base); +} + +// Portlet + +.portlet { + .portlet-content { + background-color: var(--portlet-bg, transparent); + } + + @at-root .controls-visible { + .portlet-content-editable { + @include media-breakpoint-down(sm) { + border-color: $portlet-topper-border; + } + } + + .portlet:hover, + .portlet.open, + .portlet.focus { + > .portlet-content-editable { + @include media-breakpoint-up(sm) { + border-color: $portlet-topper-border; + } + } + } + } +} + +.portlet-layout { + .portlet-header { + margin-bottom: $portlet-header-margin-bottom; + } +} + +// Theme footer + +#footer { + background-color: var(--brand-color-4, #30313f); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/_classic_style_book_compat.scss b/client-extensions/clarity-theme/src/css/dialect/_classic_style_book_compat.scss new file mode 100644 index 0000000..c573629 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/_classic_style_book_compat.scss @@ -0,0 +1,40 @@ +body { + // Color System: Brand Colors + + --brand-color-1: var(--color-brand-primary); + --brand-color-2: var(--color-neutral-6); + --brand-color-3: var(--color-brand-primary-darken-2); + --brand-color-4: var(--color-neutral-9); + + // Color System: Grays + + --white: var(--color-neutral-0); + --gray-100: var(--color-neutral-1); + --gray-200: var(--color-neutral-2); + --gray-300: var(--color-neutral-3); + --gray-400: var(--color-neutral-4); + --gray-500: var(--color-neutral-5); + --gray-600: var(--color-neutral-6); + --gray-700: var(--color-neutral-7); + --gray-800: var(--color-neutral-8); + --gray-900: var(--color-neutral-9); + --black: var(--color-neutral-10); + + // Color System: Theme Colors + + --primary: var(--color-brand-primary); + --secondary: var(--color-neutral-6); + --success: var(--color-state-success); + --info: var(--color-state-info); + --warning: var(--color-state-warning); + --danger: var(--color-state-error); + --gray-dark: var(--color-neutral-8); + --dark: var(--color-neutral-9); + --light: var(--color-neutral-2); + --lighter: var(--color-neutral-1); + + // Typography: Font Size + + --font-size-sm: var(--text-paragraph-sm-font-size); + --font-size-lg: var(--text-paragraph-lg-font-size); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/_clay_variables.scss b/client-extensions/clarity-theme/src/css/dialect/_clay_variables.scss new file mode 100644 index 0000000..002a005 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/_clay_variables.scss @@ -0,0 +1,23 @@ +@import 'variables/color_scheme'; + +@import 'variables/globals'; + +@import 'variables/alerts'; +@import 'variables/badges'; +@import 'variables/buttons'; +@import 'variables/cards'; +@import 'variables/custom_forms'; +@import 'variables/custom_properties'; +@import 'variables/dropdowns'; +@import 'variables/forms'; +@import 'variables/labels'; +@import 'variables/links'; +@import 'variables/loaders'; +@import 'variables/modals'; +@import 'variables/multi_step_nav'; +@import 'variables/navs'; +@import 'variables/stickers'; +@import 'variables/tables'; +@import 'variables/toggle_switch'; + +@import url('https://fonts.googleapis.com/css?family=Poppins'); diff --git a/client-extensions/clarity-theme/src/css/dialect/_components.scss b/client-extensions/clarity-theme/src/css/dialect/_components.scss new file mode 100644 index 0000000..a309c58 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/_components.scss @@ -0,0 +1,15 @@ +@import 'components/buttons'; +@import 'components/cards'; +@import 'components/colors'; +@import 'components/commerce/index'; +@import 'components/custom_forms'; +@import 'components/custom_properties'; +@import 'components/data_engine'; +@import 'components/forms'; +@import 'components/globals'; +@import 'components/links'; +@import 'components/nav'; +@import 'components/navs'; +@import 'components/tables'; +@import 'components/toggle-switch'; +@import 'components/typography'; diff --git a/client-extensions/clarity-theme/src/css/dialect/_index.scss b/client-extensions/clarity-theme/src/css/dialect/_index.scss new file mode 100644 index 0000000..7cf3772 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/_index.scss @@ -0,0 +1,3 @@ +@import 'mixins'; + +@import 'components'; diff --git a/client-extensions/clarity-theme/src/css/dialect/_mixins.scss b/client-extensions/clarity-theme/src/css/dialect/_mixins.scss new file mode 100644 index 0000000..c491cf5 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/_mixins.scss @@ -0,0 +1 @@ +@import 'mixins/colors'; diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_buttons.scss b/client-extensions/clarity-theme/src/css/dialect/components/_buttons.scss new file mode 100644 index 0000000..b9eeca5 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_buttons.scss @@ -0,0 +1,323 @@ +// Solid & Rounded + +.btn-rounded, +.btn-solid { + &.btn-style-primary { + &:not(.btn-inverted) { + --btn-active-background-color: var(--color-action-primary-active); + --btn-active-color: var(--color-action-primary-inverted); + --btn-default-background-color: var(--color-action-primary-default); + --btn-default-color: var(--color-action-primary-inverted); + --btn-disabled-background-color: var( + --color-action-primary-disabled + ); + --btn-hover-background-color: var(--color-action-primary-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-primary-active); + --btn-default-background-color: var( + --color-action-primary-inverted + ); + --btn-default-color: var(--color-action-primary-default); + --btn-disabled-color: var(--color-action-primary-disabled); + --btn-hover-color: var(--color-action-primary-hover); + } + } + + &.btn-style-secondary { + &:not(.btn-inverted) { + --btn-active-background-color: var(--color-action-secondary-active); + --btn-active-color: var(--color-action-secondary-inverted); + --btn-default-background-color: var( + --color-action-secondary-default + ); + --btn-default-color: var(--color-action-secondary-inverted); + --btn-disabled-background-color: var( + --color-action-secondary-disabled + ); + --btn-hover-background-color: var(--color-action-secondary-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-secondary-active); + --btn-default-background-color: var( + --color-action-secondary-inverted + ); + --btn-default-color: var(--color-action-secondary-default); + --btn-disabled-color: var(--color-action-secondary-disabled); + --btn-hover-color: var(--color-action-secondary-hover); + } + } + + &.btn-style-neutral { + &:not(.btn-inverted) { + --btn-active-background-color: var(--color-action-neutral-active); + --btn-active-color: var(--color-action-neutral-inverted); + --btn-default-background-color: var(--color-action-neutral-default); + --btn-default-color: var(--color-action-neutral-inverted); + --btn-disabled-background-color: var( + --color-action-neutral-disabled + ); + --btn-hover-background-color: var(--color-action-neutral-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-neutral-active); + --btn-default-background-color: var( + --color-action-neutral-inverted + ); + --btn-default-color: var(--color-action-neutral-default); + --btn-disabled-color: var(--color-action-neutral-disabled); + --btn-hover-color: var(--color-action-neutral-hover); + } + } +} + +// Ghost + +.btn-ghost { + --btn-default-background-color: transparent; + + &.btn-style-primary { + &:not(.btn-inverted) { + --btn-active-border-color: var(--color-action-primary-active); + --btn-active-color: var(--color-action-primary-active); + --btn-default-border-color: var(--color-action-primary-default); + --btn-default-color: var(--color-action-primary-default); + --btn-disabled-border-color: var(--color-action-primary-disabled); + --btn-disabled-color: var(--color-action-primary-disabled); + --btn-hover-background-color: var( + --color-action-primary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-primary-hover); + --btn-hover-color: var(--color-action-primary-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-primary-inverted); + --btn-default-border-color: var(--color-action-primary-inverted); + --btn-default-color: var(--color-action-primary-inverted); + --btn-disabled-border-color: var( + --color-action-primary-inverted-disabled + ); + --btn-disabled-color: var(--color-action-primary-inverted-disabled); + --btn-hover-background-color: var( + --color-action-primary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-primary-inverted); + --btn-hover-color: var(--color-action-primary-inverted); + } + } + + &.btn-style-secondary { + &:not(.btn-inverted) { + --btn-active-border-color: var(--color-action-secondary-active); + --btn-active-color: var(--color-action-secondary-active); + --btn-default-border-color: var(--color-action-secondary-default); + --btn-default-color: var(--color-action-secondary-default); + --btn-disabled-border-color: var(--color-action-secondary-disabled); + --btn-disabled-color: var(--color-action-secondary-disabled); + --btn-hover-background-color: var( + --color-action-secondary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-secondary-hover); + --btn-hover-color: var(--color-action-secondary-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-secondary-inverted); + --btn-default-border-color: var(--color-action-secondary-inverted); + --btn-default-color: var(--color-action-secondary-inverted); + --btn-disabled-border-color: var( + --color-action-secondary-inverted-disabled + ); + --btn-disabled-color: var( + --color-action-secondary-inverted-disabled + ); + --btn-hover-background-color: var( + --color-action-secondary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-secondary-inverted); + --btn-hover-color: var(--color-action-secondary-inverted); + } + } + + &.btn-style-neutral { + &:not(.btn-inverted) { + --btn-active-border-color: var(--color-action-neutral-active); + --btn-active-color: var(--color-action-neutral-active); + --btn-default-border-color: var(--color-action-neutral-default); + --btn-default-color: var(--color-action-neutral-default); + --btn-disabled-border-color: var(--color-action-neutral-disabled); + --btn-disabled-color: var(--color-action-neutral-disabled); + --btn-hover-background-color: var( + --color-action-neutral-inverted-hover + ); + --btn-hover-border-color: var(--color-action-neutral-hover); + --btn-hover-color: var(--color-action-neutral-hover); + } + + &.btn-inverted { + --btn-active-color: var(--color-action-neutral-inverted); + --btn-default-border-color: var(--color-action-neutral-inverted); + --btn-default-color: var(--color-action-neutral-inverted); + --btn-disabled-border-color: var( + --color-action-neutral-inverted-disabled + ); + --btn-disabled-color: var(--color-action-neutral-inverted-disabled); + --btn-hover-background-color: var( + --color-action-neutral-inverted-hover + ); + --btn-hover-border-color: var(--color-action-neutral-inverted); + --btn-hover-color: var(--color-action-neutral-inverted); + } + } +} + +// Borderless + +.btn-borderless { + --btn-active-background-color: transparent; + --btn-default-background-color: transparent; + --btn-default-border-color: transparent; + --btn-disabled-background-color: transparent; + --btn-disabled-border-color: transparent; + --btn-focus-background-color: transparent; + --btn-focus-border-color: transparent; + + &:not(.btn-inverted) { + --btn-hover-background-color: transparent; + } + + &.btn-style-primary { + &:not(.btn-inverted) { + --btn-active-background-color: var(--color-action-primary-inverted); + --btn-active-border-color: var(--color-action-primary-active); + --btn-active-color: var(--color-action-primary-active); + --btn-default-color: var(--color-action-primary-default); + --btn-disabled-color: var(--color-action-primary-disabled); + --btn-hover-border-color: var(--color-action-primary-hover); + --btn-hover-color: var(--color-action-primary-hover); + } + + &.btn-inverted { + --btn-active-border-color: var(--color-action-primary-inverted); + --btn-active-color: var(--color-action-primary-inverted); + --btn-default-color: var(--color-action-primary-inverted); + --btn-disabled-color: var(--color-action-primary-inverted-disabled); + --btn-hover-background-color: var( + --color-action-primary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-primary-inverted); + --btn-hover-color: var(--color-action-primary-inverted); + } + } + + &.btn-style-secondary { + &:not(.btn-inverted) { + --btn-active-background-color: var( + --color-action-secondary-inverted + ); + --btn-active-border-color: var(--color-action-secondary-active); + --btn-active-color: var(--color-action-secondary-active); + --btn-default-color: var(--color-action-secondary-default); + --btn-disabled-color: var(--color-action-secondary-disabled); + --btn-hover-border-color: var(--color-action-secondary-hover); + --btn-hover-color: var(--color-action-secondary-hover); + } + + &.btn-inverted { + --btn-active-border-color: var(--color-action-secondary-inverted); + --btn-active-color: var(--color-action-secondary-inverted); + --btn-default-color: var(--color-action-secondary-inverted); + --btn-disabled-color: var( + --color-action-secondary-inverted-disabled + ); + --btn-hover-background-color: var( + --color-action-secondary-inverted-hover + ); + --btn-hover-border-color: var(--color-action-secondary-inverted); + --btn-hover-color: var(--color-action-secondary-inverted); + } + } + + &.btn-style-neutral { + &:not(.btn-inverted) { + --btn-active-background-color: var(--color-action-neutral-inverted); + --btn-active-border-color: var(--color-action-neutral-active); + --btn-active-color: var(--color-action-neutral-active); + --btn-default-color: var(--color-action-neutral-default); + --btn-disabled-color: var(--color-action-neutral-disabled); + --btn-hover-border-color: var(--color-action-neutral-hover); + --btn-hover-color: var(--color-action-neutral-hover); + } + + &.btn-inverted { + --btn-active-border-color: var(--color-action-neutral-inverted); + --btn-active-color: var(--color-action-neutral-inverted); + --btn-default-color: var(--color-action-neutral-inverted); + --btn-disabled-color: var(--color-action-neutral-inverted-disabled); + --btn-hover-background-color: var( + --color-action-neutral-inverted-hover + ); + --btn-hover-border-color: var(--color-action-neutral-inverted); + --btn-hover-color: var(--color-action-neutral-inverted); + } + } +} + +// Rounded + +.btn-rounded { + --btn-border-radius: #{$rounded-pill}; + --btn-lg-border-radius: #{$rounded-pill}; + --btn-sm-border-radius: #{$rounded-pill}; + + &.btn-style-primary { + --btn-box-shadow: var(--elevation-tight-4) + var(--color-action-primary-disabled); + } + + &.btn-style-secondary { + --btn-box-shadow: var(--elevation-tight-4) + var(--color-action-secondary-disabled); + } + + &.btn-style-neutral { + --btn-box-shadow: var(--elevation-tight-4) + var(--color-action-neutral-disabled); + } +} + +// Unstyled + +.btn-unstyled { + --btn-default-border-color: transparent; +} + +// Defaults + +.btn-primary { + @extend .btn-solid, .btn-style-primary, :not(.btn-inverted); +} + +.btn-secondary { + @extend .btn-ghost, .btn-style-neutral, :not(.btn-inverted); +} + +.btn-tertiary { + @extend .btn-borderless, .btn-style-neutral, :not(.btn-inverted); +} + +.btn-outline-primary { + @extend .btn-ghost, .btn-style-primary, :not(.btn-inverted); +} + +.btn-outline-secondary { + @extend .btn-ghost, .btn-style-neutral, :not(.btn-inverted); +} + +.btn-outline-borderless { + @extend .btn-borderless, :not(.btn-inverted); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_cards.scss b/client-extensions/clarity-theme/src/css/dialect/components/_cards.scss new file mode 100644 index 0000000..a156ada --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_cards.scss @@ -0,0 +1,73 @@ +.card { + --aspect-ratio: var(--card-vertical-aspect-ratio-default); +} + +.card-horizontal { + --aspect-ratio: var(--card-horizontal-aspect-ratio-default); +} + +// Card Variants + +.card, +.card-horizontal { + &.interactive { + @include clay-card-variant($card-elevated-interactive); + } +} + +.card-outlined { + --card-border-width: var(--card-outlined-border-width); + + @include clay-card-variant($card-outlined); + + &.interactive { + @include clay-card-variant($card-outlined-interactive); + } +} + +.card-flat { + --card-border-width: var(--card-flat-border-width); + + @include clay-card-variant($card-flat); + + &.interactive { + @include clay-card-variant($card-flat-interactive); + } +} + +// Card Helpers + +.card-horizontal { + .card-item-first { + @include border-radius( + $card-inner-border-radius 0 0 $card-inner-border-radius + ); + } + + .card-item-last { + @include border-radius( + 0 $card-inner-border-radius $card-inner-border-radius 0 + ); + } +} + +// Card Row + +.card-row { + .autofit-col-gutters { + padding-left: $card-body-padding-left; + padding-right: $card-body-padding-right; + } + + .autofit-col-sm { + width: var(--card-autofit-col-sm-width); + } + + .autofit-col-md { + width: var(--card-autofit-col-md-width); + } + + .autofit-col-lg { + width: var(--card-autofit-col-lg-width); + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_colors.scss b/client-extensions/clarity-theme/src/css/dialect/components/_colors.scss new file mode 100644 index 0000000..34f81ea --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_colors.scss @@ -0,0 +1,154 @@ +// Primary + +@include color-variant( + brand-primary-darken-5, + var(--color-brand-primary-darken-5) +); +@include color-variant( + brand-primary-darken-4, + var(--color-brand-primary-darken-4) +); +@include color-variant( + brand-primary-darken-3, + var(--color-brand-primary-darken-3) +); +@include color-variant( + brand-primary-darken-2, + var(--color-brand-primary-darken-2) +); +@include color-variant( + brand-primary-darken-1, + var(--color-brand-primary-darken-1) +); +@include color-variant(brand-primary, var(--color-brand-primary)); +@include color-variant( + brand-primary-lighten-1, + var(--color-brand-primary-lighten-1) +); +@include color-variant( + brand-primary-lighten-2, + var(--color-brand-primary-lighten-2) +); +@include color-variant( + brand-primary-lighten-3, + var(--color-brand-primary-lighten-3) +); +@include color-variant( + brand-primary-lighten-4, + var(--color-brand-primary-lighten-4) +); +@include color-variant( + brand-primary-lighten-5, + var(--color-brand-primary-lighten-5) +); +@include color-variant( + brand-primary-lighten-6, + var(--color-brand-primary-lighten-6) +); + +// Secondary + +@include color-variant( + brand-secondary-darken-5, + var(--color-brand-secondary-darken-5) +); +@include color-variant( + brand-secondary-darken-4, + var(--color-brand-secondary-darken-4) +); +@include color-variant( + brand-secondary-darken-3, + var(--color-brand-secondary-darken-3) +); +@include color-variant( + brand-secondary-darken-2, + var(--color-brand-secondary-darken-2) +); +@include color-variant( + brand-secondary-darken-1, + var(--color-brand-secondary-darken-1) +); +@include color-variant(brand-secondary, var(--color-brand-secondary)); +@include color-variant( + brand-secondary-lighten-1, + var(--color-brand-secondary-lighten-1) +); +@include color-variant( + brand-secondary-lighten-2, + var(--color-brand-secondary-lighten-2) +); +@include color-variant( + brand-secondary-lighten-3, + var(--color-brand-secondary-lighten-3) +); +@include color-variant( + brand-secondary-lighten-4, + var(--color-brand-secondary-lighten-4) +); +@include color-variant( + brand-secondary-lighten-5, + var(--color-brand-secondary-lighten-5) +); +@include color-variant( + brand-secondary-lighten-6, + var(--color-brand-secondary-lighten-6) +); + +// Neutral + +@include color-variant(neutral-0, var(--color-neutral-0)); +@include color-variant(neutral-1, var(--color-neutral-1)); +@include color-variant(neutral-2, var(--color-neutral-2)); +@include color-variant(neutral-3, var(--color-neutral-3)); +@include color-variant(neutral-4, var(--color-neutral-4)); +@include color-variant(neutral-5, var(--color-neutral-5)); +@include color-variant(neutral-6, var(--color-neutral-6)); +@include color-variant(neutral-7, var(--color-neutral-7)); +@include color-variant(neutral-8, var(--color-neutral-8)); +@include color-variant(neutral-9, var(--color-neutral-9)); +@include color-variant(neutral-10, var(--color-neutral-10)); + +// Accents + +@include color-variant(accent-1, var(--color-accent-1)); +@include color-variant(accent-1-lighten, var(--color-accent-1-lighten)); +@include color-variant(accent-2, var(--color-accent-2)); +@include color-variant(accent-2-lighten, var(--color-accent-2-lighten)); +@include color-variant(accent-3, var(--color-accent-3)); +@include color-variant(accent-3-lighten, var(--color-accent-3-lighten)); +@include color-variant(accent-4, var(--color-accent-4)); +@include color-variant(accent-4-lighten, var(--color-accent-4-lighten)); +@include color-variant(accent-5, var(--color-accent-5)); +@include color-variant(accent-5-lighten, var(--color-accent-5-lighten)); +@include color-variant(accent-6, var(--color-accent-6)); +@include color-variant(accent-6-lighten, var(--color-accent-6-lighten)); + +// States + +// Success + +@include color-variant(success-darken-2, var(--color-state-success-darken-2)); +@include color-variant(success-darken-1, var(--color-state-success-darken-1)); +@include color-variant(success-lighten-1, var(--color-state-success-lighten-1)); +@include color-variant(success-lighten-2, var(--color-state-success-lighten-2)); + +// Info + +@include color-variant(info-darken-2, var(--color-state-info-darken-2)); +@include color-variant(info-darken-1, var(--color-state-info-darken-1)); +@include color-variant(info-lighten-1, var(--color-state-info-lighten-1)); +@include color-variant(info-lighten-2, var(--color-state-info-lighten-2)); + +// Warning + +@include color-variant(warning-darken-2, var(--color-state-warning-darken-2)); +@include color-variant(warning-darken-1, var(--color-state-warning-darken-1)); +@include color-variant(warning-lighten-1, var(--color-state-warning-lighten-1)); +@include color-variant(warning-lighten-2, var(--color-state-warning-lighten-2)); + +// Danger + +@include color-variant(danger-darken-2, var(--color-state-error-darken-2)); +@include color-variant(danger-darken-1, var(--color-state-error-darken-1)); +@include color-variant(danger-lighten-1, var(--color-state-error-lighten-1)); +@include color-variant(danger-lighten-2, var(--color-state-error-lighten-2)); diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_custom_forms.scss b/client-extensions/clarity-theme/src/css/dialect/components/_custom_forms.scss new file mode 100644 index 0000000..6153c23 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_custom_forms.scss @@ -0,0 +1,9 @@ +.custom-control-input { + & ~ .custom-control-label::before { + clip-path: circle(1.25rem); + } + + &:not(:disabled):hover ~ .custom-control-label::before { + box-shadow: $custom-control-indicator-hover-box-shadow; + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_custom_properties.scss b/client-extensions/clarity-theme/src/css/dialect/components/_custom_properties.scss new file mode 100644 index 0000000..da7029f --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_custom_properties.scss @@ -0,0 +1,3 @@ +body { + @include clay-css($dialect-custom-properties); +} \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_data_engine.scss b/client-extensions/clarity-theme/src/css/dialect/components/_data_engine.scss new file mode 100644 index 0000000..2d7bca2 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_data_engine.scss @@ -0,0 +1,7 @@ +body + .ddm-user-view-content + .multi-step-nav + .multi-step-item.active + .multi-step-divider { + background-color: var(--color-action-primary-default); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_forms.scss b/client-extensions/clarity-theme/src/css/dialect/components/_forms.scss new file mode 100644 index 0000000..3ca398a --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_forms.scss @@ -0,0 +1,187 @@ +.form-condensed { + --condensed-form-input-label-transform: translateY( + calc( + ( + #{$input-border-width} + #{$input-padding-y} + + (var(--form-input-line-height) / 2) + ) - 0.5em + ) + ); + --current-form-input-border-color-disabled: var( + --condensed-form-input-border-color-disabled, + var(--condensed-form-input-background-color-disabled) + ); + --form-feedback-item-margin: var(--condensed-form-feedback-item-margin); + --form-input-background-color: var(--condensed-form-input-background-color); + --form-input-border-color: var( + --condensed-form-input-border-color, + var(--condensed-form-input-background-color) + ); + --form-input-disabled-background-color: var( + --condensed-form-input-background-color-disabled + ); + --form-input-label-font-weight: var( + --condensed-form-input-label-font-weight + ); + --form-text-font-size: var(--condensed-form-text-font-size); + --form-text-font-weight: var(--condensed-form-text-font-weight); + + &.form-group, + .form-group { + &:not(.filled):not(:focus-within):not(.toggle-switch) { + --form-input-color: transparent; + --form-input-color-disabled: transparent; + --form-input-placeholder-color: transparent; + --form-input-placeholder-color-disabled: transparent; + + > label { + pointer-events: none; + } + } + + > label:not(.toggle-switch) { + background-color: var( + --condensed-form-input-label-background-color, + transparent + ); + color: var(--condensed-form-input-label-color); + font-size: var(--condensed-form-input-label-font-size); + line-height: 1; + margin: 0 var(--condensed-form-input-label-margin-x); + padding: 0 var(--condensed-form-input-label-padding-x); + position: absolute; + top: 0; + transform: var(--condensed-form-input-label-transform); + z-index: 1; + } + } +} + +.filled, +.form-group:focus-within { + --condensed-form-input-background-color-disabled: #{$form-white-color}; + --condensed-form-input-label-background-color: #{$form-white-color}; + --condensed-form-input-label-font-size: var( + --condensed-form-input-filled-label-font-size + ); + --condensed-form-input-label-font-weight: var( + --condensed-form-input-filled-label-font-weight + ); + --condensed-form-input-label-transform: translateY(-0.5em); +} + +.filled { + --condensed-form-input-background-color: #{$form-white-color}; + --condensed-form-input-border-color: var( + --condensed-form-input-filled-border-color + ); + --condensed-form-input-border-color-disabled: var( + --form-input-border-color-disabled + ); + --condensed-form-input-label-color: var( + --condensed-form-input-filled-label-color + ); + --form-input-error-bg: $form-white-color; + --form-input-success-bg: $form-white-color; + --form-input-warning-bg: $form-white-color; +} + +.form-group:focus-within { + --condensed-form-input-label-color: #{$form-input-focus-color}; +} + +.form-group > label, +.lfr-ddm-legend { + &:not(.toggle-switch) { + line-height: var(--form-input-label-line-height); + margin-left: var(--form-input-label-margin-left); + margin-right: var(--form-input-label-margin-right); + margin-top: var(--form-input-label-margin-top); + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, + font-size 0.15s ease-in-out, transform 0.15s ease-in-out; + } +} + +label.disabled, +fieldset[disabled], +.form-control[disabled] { + --condensed-form-input-label-color: var( + --condensed-form-input-label-color-disabled + ); +} + +fieldset > .lfr-ddm-legend { + color: $input-label-color; + font-size: $input-label-font-size; + font-weight: $input-label-font-weight; + margin-bottom: $input-label-margin-bottom; + max-width: 100%; + word-wrap: break-word; + + &.focus { + color: $input-label-focus-color; + } + + .reference-mark { + color: $input-label-reference-mark-color; + font-size: $input-label-reference-mark-font-size; + margin-bottom: 0; + margin-left: $input-label-reference-mark-spacer; + margin-right: $input-label-reference-mark-spacer; + margin-top: 0; + padding: 0; + vertical-align: $input-label-reference-mark-vertical-align; + } +} + +.ddm-label-required { + padding-left: 0; +} + +.form-control::placeholder, +.form-builder-select-field .form-control .option-selected-placeholder { + color: $input-placeholder-color; + font-size: var(--form-input-placeholder-font-size); + font-weight: var(--form-input-placeholder-font-weight); + line-height: var(--form-input-placeholder-line-height); + transition: color 0.15s ease-in-out; +} + +.form-feedback-item { + display: flex; +} + +.form-group .form-feedback-group .form-feedback-item { + background-color: var(--form-feedback-background-color); + border-radius: var(--form-feedback-item-border-radius); + color: var(--form-feedback-color); + line-height: var(--form-feedback-item-line-height); + margin: var(--form-feedback-item-margin); + padding: var(--form-feedback-item-padding); +} + +.has-error { + --condensed-form-input-filled-label-color: #{$danger}; + --form-feedback-background-color: #{$danger-l2}; + --form-feedback-color: #{$danger}; +} + +.has-success { + --condensed-form-input-filled-label-color: #{$success}; + --form-feedback-background-color: #{$success-l2}; + --form-feedback-color: #{$success}; +} + +.has-warning { + --condensed-form-input-filled-label-color: #{$warning}; + --form-feedback-background-color: #{$warning-l2}; + --form-feedback-color: #{$warning}; +} + +.form-text { + margin: var(--form-text-margin); + + &:empty { + margin: 0; + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_globals.scss b/client-extensions/clarity-theme/src/css/dialect/components/_globals.scss new file mode 100644 index 0000000..8bc8778 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_globals.scss @@ -0,0 +1,19 @@ +// Border Radius + +.rounded-xs { + border-radius: var(--border-radius-xs) !important; +} + +.rounded-xl { + border-radius: var(--border-radius-xl) !important; +} + +.rounded-xxl { + border-radius: var(--border-radius-xxl) !important; +} + +// Links + +a:focus-visible { + outline-color: var(--color-focus); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_links.scss b/client-extensions/clarity-theme/src/css/dialect/components/_links.scss new file mode 100644 index 0000000..929c61b --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_links.scss @@ -0,0 +1,3 @@ +.link-visited { + @include clay-link($link-visited); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_nav.scss b/client-extensions/clarity-theme/src/css/dialect/components/_nav.scss new file mode 100644 index 0000000..0616d18 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_nav.scss @@ -0,0 +1,228 @@ +.solution-nav { + $nav-link-horizontal-active-indicator-length: var( + --nav-link-horizontal-active-indicator-length + ); + $nav-link-horizontal-active-indicator-thickness: var( + --nav-link-horizontal-active-indicator-thickness + ); + $nav-link-horizontal-margin: var(--nav-link-horizontal-margin); + $nav-link-vertical-active-indicator-length: var( + --nav-link-vertical-active-indicator-length + ); + $nav-link-vertical-active-indicator-thickness: var( + --nav-link-vertical-active-indicator-thickness + ); + $nav-link-vertical-margin: var(--nav-link-vertical-margin); + + .portlet { + margin-bottom: 0; + } + + .navbar-nav { + flex-direction: var(--nav-flex-direction); + + .nav-link .layout-logo { + max-height: none; + } + } + + &.nav-primary .nav-link { + @extend .text-link-md; + } + + &.nav-secondary, + &.nav-tertiary { + .nav-link { + @extend .text-link-sm; + } + } + + .nav-link { + color: var(--nav-link-color); + margin: var(--nav-link-margin); + padding: var(--nav-link-padding); + position: relative; + + &:after { + background-color: var(--nav-link-indicator-background-color); + bottom: var(--nav-link-active-indicator-position-bottom); + content: var(--nav-link-active-indicator-content); + display: block; + height: var(--nav-link-active-indicator-height); + left: var(--nav-link-active-indicator-position-left); + position: absolute; + right: var(--nav-link-active-indicator-position-right); + top: var(--nav-link-active-indicator-position-top); + transform: var(--nav-link-active-indicator-transform); + width: var(--nav-link-active-indicator-width); + } + + &, + .text-truncate { + align-items: center; + display: flex; + } + + .layout-logo { + color: var(--nav-link-color); + height: var(--nav-link-icon-height); + margin-right: var(--nav-link-icon-margin-x); + width: var(--nav-link-icon-width); + } + } + + .nav-item { + &:first-child .nav-link { + margin-left: var(--nav-link-first-child-margin-left); + margin-top: var(--nav-link-first-child-margin-top); + } + + &:last-child .nav-link { + margin-bottom: var(--nav-link-last-child-margin-bottom); + margin-right: var(--nav-link-last-child-margin-right); + } + + &.active, + &.selected { + --nav-link-active-indicator-content: ''; + + .nav-link { + &:after { + background-color: var( + --nav-link-active-indicator-background-color + ); + } + + &, + .layout-logo { + color: var(--nav-link-active-color); + } + } + } + + .nav-link:hover { + &:after { + background-color: var( + --nav-link-hover-active-indicator-background-color, + var(--nav-link-active-indicator-background-color) + ); + } + + &, + .layout-logo { + color: var(--nav-link-hover-color); + } + } + } + + &.nav-horizontal { + --nav-flex-direction: row; + --nav-link-active-indicator-background-color: var( + --color-action-primary-hover + ); + --nav-link-active-indicator-content: ''; + --nav-link-active-indicator-height: #{$nav-link-horizontal-active-indicator-thickness}; + --nav-link-active-indicator-position-right: 50%; + --nav-link-active-indicator-transform: translateX(50%); + --nav-link-active-indicator-width: #{$nav-link-horizontal-active-indicator-length}; + --nav-link-color: var(--color-neutral-10); + --nav-link-first-child-margin-left: 0; + --nav-link-hover-color: var(--color-action-primary-hover); + --nav-link-icon-height: 1rem; + --nav-link-icon-margin-x: 0.25rem; + --nav-link-icon-width: 1rem; + --nav-link-last-child-margin-right: 0; + --nav-link-margin: #{$nav-link-horizontal-margin}; + + &.nav-primary { + --nav-link-active-indicator-position-bottom: 0; + --nav-link-padding: calc( + 0.5rem + #{$nav-link-horizontal-active-indicator-thickness} + ) + 0; + } + + &.nav-secondary { + --nav-link-active-indicator-position-bottom: calc( + 5px - #{$nav-link-horizontal-active-indicator-thickness} + ); + --nav-link-active-indicator-width: 100%; + --nav-link-padding: #{$nav-link-horizontal-active-indicator-thickness} + 0; + + &.nav-inverted { + --nav-link-color: var(--color-action-primary-inverted); + } + } + + &.nav-tertiary { + --nav-link-active-indicator-position-top: 0; + --nav-link-active-indicator-width: 100%; + --nav-link-hover-active-indicator-background-color: var( + --color-action-primary-hover + ); + --nav-link-padding: calc( + #{$nav-link-horizontal-active-indicator-thickness} + 0.375rem + ) + 0.75rem; + --nav-link-margin: 0; + + &.nav-inverted { + --nav-link-active-indicator-background-color: var( + --color-action-primary-inverted-hover + ); + --nav-link-indicator-background-color: var( + --color-action-primary-inverted-disabled + ); + } + } + + &.nav-inverted { + --nav-link-active-color: var( + --color-action-primary-inverted-disabled + ); + --nav-link-color: var(--color-action-primary-inverted-disabled); + --nav-link-hover-color: var(--color-action-primary-inverted); + + &.nav-secondary, + &.nav-tertiary { + --nav-link-active-color: var(--color-action-primary-inverted); + --nav-link-active-indicator-background-color: var( + --color-action-primary-inverted + ); + --nav-link-hover-active-indicator-background-color: var( + --color-action-primary-inverted + ); + } + } + } + + &.nav-vertical { + --nav-flex-direction: column; + --nav-link-active-color: var(--color-neutral-10); + --nav-link-active-indicator-background-color: var( + --color-action-primary-hover + ); + --nav-link-active-indicator-height: #{$nav-link-vertical-active-indicator-length}; + --nav-link-active-indicator-position-bottom: 50%; + --nav-link-active-indicator-position-left: 0; + --nav-link-active-indicator-transform: translateY(50%); + --nav-link-active-indicator-width: #{$nav-link-vertical-active-indicator-thickness}; + --nav-link-color: var(--color-neutral-6); + --nav-link-first-child-margin-top: 0; + --nav-link-hover-color: var(--color-neutral-10); + --nav-link-icon-height: 1.5rem; + --nav-link-icon-margin-x: 1rem; + --nav-link-icon-width: 1.5rem; + --nav-link-last-child-margin-bottom: 0; + --nav-link-margin: #{$nav-link-vertical-margin}; + --nav-link-padding: 0 + calc(1rem + #{$nav-link-vertical-active-indicator-thickness}); + + &.nav-inverted { + --nav-link-active-color: var(--color-action-primary-inverted); + --nav-link-color: var(--color-action-primary-inverted-disabled); + --nav-link-hover-color: var(--color-action-primary-inverted); + } + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_navs.scss b/client-extensions/clarity-theme/src/css/dialect/components/_navs.scss new file mode 100644 index 0000000..84f747d --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_navs.scss @@ -0,0 +1,63 @@ +// Nav Primary + +.nav-underline { + &.nav-active-bar-top .nav-link { + @include clay-link($nav-underline-link-active-bar-top); + } + + .nav-link { + @include clay-css($nav-underline-link); + } +} + +// Nav Secondary + +.nav-secondary { + &.nav-active-bar-top .nav-link { + @include clay-link($nav-secondary-link-active-bar-top); + } + + .nav-link { + @include clay-link($nav-secondary-link); + } +} + +// Nav Tertiary + +.nav-tertiary { + &.nav-active-bar-top .nav-link { + @include clay-link($nav-tertiary-link-active-bar-top); + } + + .nav-link { + @include clay-link($nav-tertiary-link); + } +} + +// Nav Segment + +.nav-segment { + @include clay-css($nav-segment); + + .nav-link { + @include clay-link($nav-segment-link); + } +} + +// Nav Vertical + +.nav-vertical { + @include clay-css($nav-vertical); + + &.nav-underline .nav-link { + @include clay-link($nav-underline-link-vertical); + } + + &.nav-secondary .nav-link { + @include clay-link($nav-secondary-link-vertical); + } + + &.nav-tertiary .nav-link { + @include clay-link($nav-tertiary-link-vertical); + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_tables.scss b/client-extensions/clarity-theme/src/css/dialect/components/_tables.scss new file mode 100644 index 0000000..518d005 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_tables.scss @@ -0,0 +1,97 @@ +// Table + +.table { + td, + th { + @include clay-css($c-table-base-cell); + } +} + +// Table Header + +th { + --table-cell-min-height: var(--table-header-cell-min-height); + --table-cell-padding-y: var(--table-header-cell-padding-y); + --table-cell-padding-x: var(--table-header-cell-padding-x); + --table-font-size: var(--table-header-font-size); + --table-font-weight: var(--table-header-font-weight); + --table-line-height: var(--table-header-line-height); +} + +// Table Spaced + +.table-spaced { + --table-border-radius: var(--table-spaced-row-border-radius); + --table-border-width: 0; + + @include clay-css($table-spaced); + + &, + thead { + td, + th { + @include clay-css($table-spaced-cell); + } + } + + tr { + @include clay-css(map-deep-get($table-spaced, table-row)); + } + + td:first-child, + th:first-child, + .table-cell-start { + @include clay-css(map-deep-get($table-spaced, table-cell-start)); + } + + td:last-child, + th:last-child, + .table-cell-end { + @include clay-css(map-deep-get($table-spaced, table-cell-end)); + } +} + +// Table Bordered + +.table-bordered thead { + td, + th { + @include clay-css($table-bordered-thead-cell); + } +} + +// Table Sizes + +.table-lg { + --table-cell-min-height: var(--table-lg-cell-min-height); + --table-cell-padding-y: var(--table-lg-cell-padding-y); + --table-cell-padding-x: var(--table-lg-cell-padding-x); + --table-font-size: var(--table-lg-font-size); + --table-font-weight: var(--table-lg-font-weight); + --table-line-height: var(--table-lg-line-height); + + th { + --table-header-cell-min-height: var(--table-lg-header-cell-min-height); + --table-header-cell-padding-y: var(--table-lg-header-cell-padding-y); + --table-header-cell-padding-x: var(--table-lg-header-cell-padding-x); + --table-header-font-size: var(--table-lg-header-font-size); + --table-header-font-weight: var(--table-lg-header-font-weight); + --table-header-line-height: var(--table-lg-header-line-height); + } +} + +.table-sm { + --table-cell-min-height: var(--table-sm-cell-min-height); + --table-font-size: var(--table-sm-font-size); + --table-font-weight: var(--table-sm-font-weight); + --table-line-height: var(--table-sm-line-height); + + th { + --table-header-cell-min-height: var(--table-sm-header-cell-min-height); + --table-header-cell-padding-x: var(--table-sm-header-cell-padding-x); + --table-header-cell-padding-y: var(--table-sm-header-cell-padding-y); + --table-header-font-size: var(--table-sm-header-font-size); + --table-header-font-weight: var(--table-sm-header-font-weight); + --table-header-line-height: var(--table-sm-header-line-height); + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_toggle-switch.scss b/client-extensions/clarity-theme/src/css/dialect/components/_toggle-switch.scss new file mode 100644 index 0000000..b82c468 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_toggle-switch.scss @@ -0,0 +1,3 @@ +.toggle-switch-text { + font-weight: var(--custom-control-label-font-weight); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/_typography.scss b/client-extensions/clarity-theme/src/css/dialect/components/_typography.scss new file mode 100644 index 0000000..cadc277 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/_typography.scss @@ -0,0 +1,69 @@ +// Font Family + +.font-family-base { + font-family: var(--font-family-base); +} + +.font-family-monospace { + font-family: var(--font-family-monospace); +} + +.font-family-sans-serif { + font-family: var(--font-family-sans-serif); +} + +// Paragraphs + +.text-paragraph-lg { + font-size: var(--text-paragraph-lg-font-size); + line-height: var(--text-paragraph-lg-line-height); +} + +.text-paragraph { + font-size: var(--text-paragraph-font-size); + line-height: var(--text-paragraph-line-height); +} + +.text-paragraph-sm { + font-size: var(--text-paragraph-sm-font-size); + line-height: var(--text-paragraph-sm-line-height); +} + +.text-paragraph-xs { + font-size: var(--text-paragraph-xs-font-size); + line-height: var(--text-paragraph-xs-line-height); +} + +.text-paragraph-xxs { + font-size: var(--text-paragraph-xxs-font-size); + line-height: var(--text-paragraph-xxs-line-height); +} + +// Small Caps + +.text-small-caps { + font-size: var(--text-small-caps-font-size); + letter-spacing: var(--text-small-caps-letter-spacing); + line-height: var(--text-small-caps-line-height); + text-transform: uppercase; +} + +// Links + +.text-link-lg { + font-size: var(--text-link-lg-font-size); + font-weight: var(--font-weight-bolder); + line-height: var(--text-link-lg-line-height); +} + +.text-link-md { + font-size: var(--text-link-md-font-size); + font-weight: var(--font-weight-bolder); + line-height: var(--text-link-md-line-height); +} + +.text-link-sm { + font-size: var(--text-link-sm-font-size); + font-weight: var(--font-weight-bolder); + line-height: var(--text-link-sm-line-height); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_add_to_cart.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_add_to_cart.scss new file mode 100644 index 0000000..b16097b --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_add_to_cart.scss @@ -0,0 +1,3 @@ +.add-to-cart .btn-lg { + margin: 0 var(--spacer-5); +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_data_set_display.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_data_set_display.scss new file mode 100644 index 0000000..8a0f0d7 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_data_set_display.scss @@ -0,0 +1,22 @@ +.data-set-display-wrapper .data-set-display { + &.data-set-display-stacked .data-set-display-management-bar-wrapper { + border-width: 0; + margin-bottom: 0; + } + + .navbar-form { + padding-left: 0; + padding-right: 0; + } +} + +.data-set-wrapper { + .data-set.data-set-stacked .data-set-management-bar-wrapper { + border-width: 0; + } + + .data-set-management-bar-wrapper .navbar-form { + height: auto; + padding: 0; + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_index.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_index.scss new file mode 100644 index 0000000..0cc32c4 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_index.scss @@ -0,0 +1,6 @@ +@import 'add_to_cart'; +@import 'data_set_display'; +@import 'mini_compare'; +@import 'price_range_facet'; +@import 'product_card'; +@import 'product_sort'; diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_mini_compare.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_mini_compare.scss new file mode 100644 index 0000000..d7875f1 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_mini_compare.scss @@ -0,0 +1,8 @@ +.mini-compare-delete { + --btn-active-background-color: var(--color-state-error-darken-2); + --btn-active-color: #{$white}; + --btn-default-background-color: var(--color-state-error); + --btn-default-color: #{$white}; + --btn-hover-background-color: var(--color-state-error-darken-1); + --btn-hover-color: #{$white}; +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_price_range_facet.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_price_range_facet.scss new file mode 100644 index 0000000..004fafb --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_price_range_facet.scss @@ -0,0 +1,14 @@ +.portlet-cp-price-range-facets { + .price-range-input-wrapper { + margin-bottom: 0; + } + + .price-range-seperator { + margin: auto 0 !important; + } + + .price-range-btn { + height: 100%; + margin-bottom: 0; + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_card.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_card.scss new file mode 100644 index 0000000..68eec6d --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_card.scss @@ -0,0 +1,3 @@ +.product-card { + overflow: hidden; +} diff --git a/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_sort.scss b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_sort.scss new file mode 100644 index 0000000..fb73c10 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/components/commerce/_product_sort.scss @@ -0,0 +1,3 @@ +.commerce-order-by .c-inner { + display: inline; +} diff --git a/client-extensions/clarity-theme/src/css/dialect/mixins/_colors.scss b/client-extensions/clarity-theme/src/css/dialect/mixins/_colors.scss new file mode 100644 index 0000000..509a135 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/mixins/_colors.scss @@ -0,0 +1,13 @@ +@mixin color-variant($class-suffix, $color) { + .bg-#{$class-suffix} { + background-color: $color !important; + } + + .border-#{$class-suffix} { + border-color: $color !important; + } + + .text-#{$class-suffix} { + color: $color !important; + } +} diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_alerts.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_alerts.scss new file mode 100644 index 0000000..757f360 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_alerts.scss @@ -0,0 +1,145 @@ +// Alert Variants + +$alert-primary-color: $primary; + +$alert-primary-bg: $primary-l2; +$alert-primary-border-color: transparent; +$alert-primary-btn: ( + active-bg: $primary-d1, + active-border-color: $primary-d1, + active-color: $white, + bg: $white, + border-color: $primary-l1, + color: $alert-primary-color, + hover-bg: $alert-primary-color, + hover-border-color: $alert-primary-color, + hover-color: $white, +); +$alert-primary-close-hover-color: $primary-d1; +$alert-primary-link-color: $primary-d2; + +$alert-secondary-color: $secondary; + +$alert-secondary-bg: $secondary-l2; +$alert-secondary-border-color: transparent; +$alert-secondary-btn: ( + active-bg: $secondary-d1, + active-border-color: $secondary-d1, + active-color: $white, + bg: $white, + border-color: $secondary-l1, + color: $alert-secondary-color, + hover-bg: $alert-secondary-color, + hover-border-color: $alert-secondary-color, + hover-color: $white, +); +$alert-secondary-close-hover-color: $secondary-d1; +$alert-secondary-link-color: $secondary-d2; + +$alert-success-color: $success; + +$alert-success-bg: $success-l2; +$alert-success-border-color: transparent; +$alert-success-btn: ( + active-bg: $success-d1, + active-border-color: $success-d1, + active-color: $white, + bg: $white, + border-color: $success-l1, + color: $alert-success-color, + hover-bg: $alert-success-color, + hover-border-color: $alert-success-color, + hover-color: $white, +); +$alert-success-close-hover-color: $success-d1; +$alert-success-link-color: $success-d2; + +$alert-info-color: $info; + +$alert-info-bg: $info-l2; +$alert-info-border-color: transparent; +$alert-info-btn: ( + active-bg: $info-d1, + active-border-color: $info-d1, + active-color: $white, + bg: $white, + border-color: $info-l1, + color: $alert-info-color, + hover-bg: $alert-info-color, + hover-border-color: $alert-info-color, + hover-color: $white, +); +$alert-info-close-hover-color: $info-d1; +$alert-info-link-color: $info-d2; + +$alert-warning-color: $warning; + +$alert-warning-bg: $warning-l2; +$alert-warning-border-color: transparent; +$alert-warning-btn: ( + active-bg: $warning-d1, + active-border-color: $warning-d1, + active-color: $white, + bg: $white, + border-color: $warning-l1, + color: $alert-warning-color, + hover-bg: $alert-warning-color, + hover-border-color: $alert-warning-color, + hover-color: $white, +); +$alert-warning-close-hover-color: $warning-d1; +$alert-warning-link-color: $warning-d2; + +$alert-danger-color: $danger; + +$alert-danger-bg: $danger-l2; +$alert-danger-border-color: transparent; +$alert-danger-btn: ( + active-bg: $danger-d1, + active-border-color: $danger-d1, + active-color: $white, + bg: $white, + border-color: $danger-l1, + color: $alert-danger-color, + hover-bg: $alert-danger-color, + hover-border-color: $alert-danger-color, + hover-color: $white, +); +$alert-danger-close-hover-color: $danger-d1; +$alert-danger-link-color: $danger-d2; + +$alert-light-color: $dark; + +$alert-light-bg: $light-l2; +$alert-light-border-color: transparent; +$alert-light-btn: ( + active-bg: $light, + active-border-color: $light-d1, + active-color: $white, + bg: $light-d2, + border-color: $light-l1, + color: $white, + hover-bg: $light-d1, + hover-border-color: $alert-light-color, + hover-color: $white, +); +$alert-light-close-hover-color: $light-d1; +$alert-light-link-color: $light-d2; + +$alert-dark-color: $light; + +$alert-dark-bg: $dark-l2; +$alert-dark-border-color: transparent; +$alert-dark-btn: ( + active-bg: $dark-d1, + active-border-color: $dark-d1, + active-color: $white, + bg: $white, + border-color: $dark-l1, + color: $dark-l2, + hover-bg: $dark, + hover-border-color: $alert-dark-color, + hover-color: $white, +); +$alert-dark-close-hover-color: $dark-d1; +$alert-dark-link-color: $dark-d2; diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_badges.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_badges.scss new file mode 100644 index 0000000..16c4c92 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_badges.scss @@ -0,0 +1,28 @@ +$badge-border-radius: $rounded-pill; +$badge-pill-border-radius: $rounded-pill; + +// Badge Variants + +$badge-primary-bg: $primary; +$badge-primary-color: var(--color-action-primary-inverted); + +$badge-secondary-bg: $secondary; +$badge-secondary-color: var(--color-action-secondary-inverted); + +$badge-success-bg: $success; +$badge-success-color: var(--color-action-neutral-inverted); + +$badge-info-bg: $info; +$badge-info-color: var(--color-action-neutral-inverted); + +$badge-warning-bg: $warning; +$badge-warning-color: var(--color-action-neutral-inverted); + +$badge-danger-bg: $danger; +$badge-danger-color: var(--color-action-neutral-inverted); + +$badge-light-bg: $light; +$badge-light-color: var(--color-neutral-1); + +$badge-dark-bg: $dark; +$badge-dark-color: var(--color-action-neutral-inverted); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_buttons.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_buttons.scss new file mode 100644 index 0000000..98f572c --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_buttons.scss @@ -0,0 +1,125 @@ +$btn-border-width: var(--btn-border-width); + +$btn-border-radius: var(--btn-border-radius); +$btn-border-radius-lg: var(--btn-lg-border-radius); +$btn-border-radius-sm: var(--btn-sm-border-radius); + +$btn-font-size: var(--btn-font-size); +$btn-font-size-lg: var(--btn-lg-font-size); +$btn-font-size-sm: var(--btn-sm-font-size); + +$btn-inline-item-font-size: var(--btn-inline-item-font-size); +$btn-inline-item-font-size-lg: var(--btn-lg-inline-item-font-size); +$btn-inline-item-font-size-sm: var(--btn-sm-inline-item-font-size); + +$btn-line-height: var(--btn-line-height); +$btn-line-height-lg: var(--btn-lg-line-height); +$btn-line-height-sm: var(--btn-sm-line-height); + +$dialect-btn-padding-x: var(--btn-padding-x); +$dialect-btn-padding-x-lg: var(--btn-lg-padding-x); +$dialect-btn-padding-x-sm: var(--btn-sm-padding-x); + +$btn-padding-y: var(--btn-padding-y); +$btn-padding-y-lg: var(--btn-lg-padding-y); +$btn-padding-y-sm: var(--btn-sm-padding-y); + +$btn-monospaced-size: calc(#{$btn-line-height} + 2 * #{$btn-padding-y}); +$btn-monospaced-size-lg: calc( + #{$btn-line-height-lg} + 2 * #{$btn-padding-y-lg} +); +$btn-monospaced-size-sm: calc( + #{$btn-line-height-sm} + 2 * #{$btn-padding-y-sm} +); + +$btn-disabled-opacity: 1; + +$inline-item-spacer-x: var(--btn-inline-item-spacer-x); + +$btn: ( + --btn-default-border-color: transparent, + active: ( + background-color: + var( + --btn-active-background-color, + var(--btn-default-background-color) + ), + border-color: + var(--btn-active-border-color, var(--btn-default-border-color)), + color: var(--btn-active-color), + ), + background-color: var(--btn-default-background-color), + border-color: var(--btn-default-border-color), + box-shadow: var(--btn-box-shadow), + color: var(--btn-default-color), + disabled: ( + background-color: + var( + --btn-disabled-background-color, + var(--btn-default-background-color) + ), + border-color: + var(--btn-disabled-border-color, var(--btn-default-border-color)), + color: var(--btn-disabled-color, var(--btn-default-color)), + ), + focus: ( + background-color: var(--btn-default-background-color), + border-color: var(--btn-default-border-color), + color: var(--btn-default-color), + ), + font-weight: var(--btn-font-weight), + hover: ( + background-color: + var( + --btn-hover-background-color, + var(--btn-default-background-color) + ), + border-color: + var(--btn-hover-border-color, var(--btn-default-border-color)), + color: var(--btn-hover-color, var(--btn-default-color)), + ), + padding-bottom: calc(#{$btn-padding-y} - #{$btn-border-width}), + padding-left: calc(#{$dialect-btn-padding-x} - #{$btn-border-width}), + padding-right: calc(#{$dialect-btn-padding-x} - #{$btn-border-width}), + padding-top: calc(#{$btn-padding-y} - #{$btn-border-width}), +); + +$btn-sm: ( + padding-bottom: calc(#{$btn-padding-y-sm} - #{$btn-border-width}), + padding-left: calc(#{$dialect-btn-padding-x-sm} - #{$btn-border-width}), + padding-right: calc(#{$dialect-btn-padding-x-sm} - #{$btn-border-width}), + padding-top: calc(#{$btn-padding-y-sm} - #{$btn-border-width}), +); + +$btn-lg: ( + padding-bottom: calc(#{$btn-padding-y-lg} - #{$btn-border-width}), + padding-left: calc(#{$dialect-btn-padding-x-lg} - #{$btn-border-width}), + padding-right: calc(#{$dialect-btn-padding-x-lg} - #{$btn-border-width}), + padding-top: calc(#{$btn-padding-y-lg} - #{$btn-border-width}), +); + +$btn-primary: ( + enabled: false, +); + +$btn-secondary: ( + enabled: false, +); + +$btn-outline-primary: ( + enabled: false, +); + +$btn-outline-secondary: ( + enabled: false, +); + +$btn-link: ( + color: $link-color, + hover: ( + color: $link-hover-color, + ), + disabled: ( + color: var(--color-action-primary-disabled), + ), +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_cards.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_cards.scss new file mode 100644 index 0000000..9bd1aae --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_cards.scss @@ -0,0 +1,165 @@ +$card-border-radius: var(--card-border-radius); +$card-border-width: var(--card-border-width, var(--card-elevated-border-width)); + +$card-type-template-aspect-ratio-item: ( + color: $clay-unset, + width: $clay-unset, +); + +$card-body-padding-bottom: var(--card-body-padding-bottom); +$card-body-padding-left: var(--card-body-padding-left); +$card-body-padding-right: var(--card-body-padding-right); +$card-body-padding-top: var(--card-body-padding-top); + +$form-check-card-checked-box-shadow: 0 0 0 2px $form-input-focus-color; + +// Card Aspect Ratio + +$card-aspect-ratio-item-top-left: ( + left: var(--card-aspect-ratio-item-offset), + top: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-top-center: ( + top: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-top-right: ( + right: var(--card-aspect-ratio-item-offset), + top: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-right-middle: ( + right: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-bottom-right: ( + bottom: var(--card-aspect-ratio-item-offset), + right: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-bottom-center: ( + bottom: var(--card-aspect-ratio-item-offset), +); + +$card-aspect-ratio-item-bottom-left: ( + bottom: var(--card-aspect-ratio-item-offset), + left: var(--card-aspect-ratio-item-offset), +); + +// Card Title + +$card-title: ( + color: var(--color-neutral-10), + font-size: var(--h5-font-size), + font-weight: var(--font-weight-bolder), +); + +// Card Subtitle + +$card-subtitle: ( + color: var(--color-neutral-8), + font-size: var(--text-small-caps-font-size), + font-weight: var(--font-weight-bolder), + letter-spacing: var(--text-small-caps-letter-spacing), + line-height: var(--text-small-caps-line-height), + margin-top: 0.25rem, + text-transform: uppercase, +); + +// Card Type Asset + +$card-type-asset: ( + aspect-ratio: ( + enabled: false, + ), + aspect-ratio-border-bottom-width: 0, + aspect-ratio-border-width: 0, + card-body: ( + padding-top: $card-body-padding-top, + ), +); + +// Card Variants + +$card-bg: var(--card-elevated-background-color); +$card-border-color: var(--card-elevated-border-color); +$card-box-shadow: var(--card-elevated-box-shadow); + +$card-interactive-base: ( + cursor: $link-cursor, + outline: 0, + transition: $btn-transition, +); + +$card-elevated-interactive: map-deep-merge( + $card-interactive-base, + ( + active: ( + background-color: var(--card-elevated-background-color-active), + border-color: var(--card-elevated-border-color-active), + box-shadow: var(--card-elevated-box-shadow-active), + ), + focus: ( + border-color: null, + box-shadow: $component-focus-box-shadow, + ), + hover: ( + background-color: var(--card-elevated-background-color-hover), + border-color: var(--card-elevated-border-color-hover), + box-shadow: var(--card-elevated-box-shadow-hover), + ), + ) +); + +$card-outlined: ( + background-color: var(--card-outlined-background-color), + border-color: var(--card-outlined-border-color), + box-shadow: var(--card-outlined-box-shadow), +); + +$card-outlined-interactive: map-deep-merge( + $card-interactive-base, + ( + active: ( + background-color: var(--card-outlined-background-color-active), + border-color: var(--card-outlined-border-color-active), + box-shadow: var(--card-outlined-box-shadow-active), + ), + focus: ( + border-color: null, + box-shadow: $component-focus-box-shadow, + ), + hover: ( + background-color: var(--card-outlined-background-color-hover), + border-color: var(--card-outlined-border-color-hover), + box-shadow: var(--card-outlined-box-shadow-hover), + ), + ) +); + +$card-flat: ( + background-color: var(--card-flat-background-color), + border-color: var(--card-flat-border-color), + box-shadow: var(--card-flat-box-shadow), +); + +$card-flat-interactive: map-deep-merge( + $card-interactive-base, + ( + active: ( + background-color: var(--card-flat-background-color-active), + border-color: var(--card-flat-border-color-active), + box-shadow: var(--card-flat-box-shadow-active), + ), + focus: ( + border-color: null, + box-shadow: $component-focus-box-shadow, + ), + hover: ( + background-color: var(--card-flat-background-color-hover), + border-color: var(--card-flat-border-color-hover), + box-shadow: var(--card-flat-box-shadow-hover), + ), + ) +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_color_scheme.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_color_scheme.scss new file mode 100644 index 0000000..36318c4 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_color_scheme.scss @@ -0,0 +1,110 @@ +$dialect-custom-properties: ( + --color-accent-1-lighten: #FFF3E5, + --color-accent-1: #FFB743, + --color-accent-2-lighten: #FCF2ED, + --color-accent-2: #ED915E, + --color-accent-3-lighten: #F0F7FC, + --color-accent-3: #266799, + --color-accent-4-lighten: #EFEFFA, + --color-accent-4: #525287, + --color-accent-5-lighten: #E9F0E9, + --color-accent-5: #7A947A, + --color-accent-6-lighten: #FAE8EF, + --color-accent-6: #C42F57, + --color-action-neutral-active-lighten: #D8DADA, + --color-action-neutral-active: #4F6161, + --color-action-neutral-default: #3A4747, + --color-action-neutral-disabled: #9BA59C, + --color-action-neutral-hover-lighten: #EBEDED, + --color-action-neutral-hover: #455454, + --color-action-neutral-inverted-active: #FFFFFF, + --color-action-neutral-inverted-disabled: #FFFFFF, + --color-action-neutral-inverted-hover: #FFFFFF, + --color-action-neutral-inverted: #FFFFFF, + --color-action-primary-active-lighten: #D1E3E3, + --color-action-primary-active: #1D8C8C, + --color-action-primary-disabled: #8BB9B9, + --color-action-primary-hover-lighten: #E8F1F1, + --color-action-primary-inverted-active: #FFFFFF, + --color-action-primary-inverted-disabled: #FFFFFF, + --color-action-primary-inverted-hover: #FFFFFF, + --color-action-secondary-active-lighten: #ECDBDB, + --color-action-secondary-active: #874141, + --color-action-secondary-default: #A14D4D, + --color-action-secondary-disabled: #D0A6A6, + --color-action-secondary-hover-lighten: #F6EDED, + --color-action-secondary-hover: #944747, + --color-action-secondary-inverted-active: #FFFFFF, + --color-action-secondary-inverted-disabled: #FFFFFF, + --color-action-secondary-inverted-hover: #FFFFFF, + --color-action-secondary-inverted: #FFFFFF, + --color-brand-primary-darken-1: #177272, + --color-brand-primary-darken-2: #135D5D, + --color-brand-primary-darken-3: #0E4444, + --color-brand-primary-darken-4: #092F2F, + --color-brand-primary-darken-5: #041515, + --color-brand-primary-lighten-1: #419F9F, + --color-brand-primary-lighten-2: #64AFAF, + --color-brand-primary-lighten-3: #88C3C3, + --color-brand-primary-lighten-4: #AAD4D4, + --color-brand-primary-lighten-5: #D0E7E7, + --color-brand-primary-lighten-6: #F5FAFA, + --color-brand-secondary-darken-1: #C18933, + --color-brand-secondary-darken-2: #AD7A2E, + --color-brand-secondary-darken-3: #956928, + --color-brand-secondary-darken-4: #815B22, + --color-brand-secondary-darken-5: #6D4D1D, + --color-brand-secondary-lighten-1: #DDA95A, + --color-brand-secondary-lighten-2: #E4B877, + --color-brand-secondary-lighten-3: #EACA99, + --color-brand-secondary-lighten-4: #F1D9B7, + --color-brand-secondary-lighten-5: #F7EBD9, + --color-brand-secondary-lighten-6: #FDFBF7, + --color-brand-secondary: #D79839, + --color-chart-1: #1D8C8C, + --color-chart-2: #F7BFB6, + --color-chart-3: #ACD5D5, + --color-chart-4: #A14D4D, + --color-chart-5: #0D3E64, + --color-focus: var(--color-brand-primary-lighten-3), + --color-neutral-0: #FFFFFF, + --color-neutral-1: #F8F8F8, + --color-neutral-2: #DCDFDF, + --color-neutral-3: #A6ACAC, + --color-neutral-4: #A6ACAC, + --color-neutral-5: #8B9393, + --color-neutral-6: #707A7A, + --color-neutral-7: #556161, + --color-neutral-8: #3A4747, + --color-neutral-9: #1F2E2E, + --color-state-error-darken-1: #A6002D, + --color-state-error-darken-2: #5F001A, + --color-state-error-lighten-1: #F57396, + --color-state-error-lighten-2: #FDE6EC, + --color-state-error: #ED0040, + --color-state-info-darken-1: #004981, + --color-state-info-darken-2: #002A4A, + --color-state-info-lighten-1: #73ACD8, + --color-state-info-lighten-2: #E6F0F8, + --color-state-info: #0068B8, + --color-state-success-darken-1: #106D10, + --color-state-success-darken-2: #093E09, + --color-state-success-lighten-1: #7FC97F, + --color-state-success-lighten-2: #E8F5E8, + --color-state-success: #179C17, + --color-state-warning-darken-1: #A64611, + --color-state-warning-darken-2: #5F280A, + --color-state-warning-lighten-1: #F5AA80, + --color-state-warning-lighten-2: #FDF0E8, + --color-state-warning: #ED6418, + --color-state-neutral-darken-1: #707A7A, + --color-state-neutral-darken-2: #556161, + --color-state-neutral-lighten-1: #C1C6C6, + --color-state-neutral-lighten-2: #DCDFDF, + --color-state-neutral: #8B9393, + --color-action-primary-default: var(--btn-primary-bg), + --color-action-primary-hover: var(--btn-primary-bg), + --color-action-primary-inverted: var(--btn-primary-color), + --color-brand-primary: var(--card-category-color), + --color-neutral-10: var(--card-title-color), +); \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_custom_forms.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_custom_forms.scss new file mode 100644 index 0000000..d877d40 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_custom_forms.scss @@ -0,0 +1,61 @@ +$custom-checkbox-indicator-icon-checked: clay-icon(check-small, #fff); + +$custom-control-indicator-bg: var(--custom-control-background-color); +$custom-control-indicator-border-color: var(--custom-control-border-color); +$custom-control-indicator-border-width: 0.0625rem; // 1px + +$custom-control-indicator-active-bg: var(--custom-control-background-color); +$custom-control-indicator-active-border-color: $custom-control-indicator-border-color; + +$custom-control-indicator-hover-box-shadow: 0 0 0 1rem + var(--custom-control-color-hover); + +$custom-control-indicator-focus-border-color: $form-input-focus-color; + +$custom-control-indicator-disabled-bg: var(--custom-control-background-color); +$custom-control-indicator-disabled-border-color: var( + --custom-control-border-color-disabled +); + +$custom-control-indicator-checked-bg: var(--custom-control-border-color); +$custom-control-indicator-checked-border-color: var( + --custom-control-border-color +); + +$custom-control-indicator-checked-active-bg: var(--custom-control-border-color); +$custom-control-indicator-checked-active-border-color: var( + --custom-control-border-color +); + +$custom-control-indicator-checked-disabled-bg: var( + --custom-control-border-color-disabled +); +$custom-control-indicator-checked-disabled-border-color: transparent; + +$custom-checkbox-indicator-indeterminate-bg: var(--custom-control-border-color); +$custom-checkbox-indicator-indeterminate-box-shadow: none; +$custom-control-indicator-indeterminate-border-color: var( + --custom-control-border-color +); + +$custom-radio-indicator-icon-checked: clay-icon(circle, #fff); + +$custom-radio-indicator-icon-checked-bg-size: 0.5rem; + +$custom-radio-indicator-checked-disabled-border-color: var( + --custom-control-border-color-disabled +); +$custom-radio-indicator-disabled-border-color: var( + --custom-control-border-color-disabled +); + +$custom-control-label: ( + color: var(--custom-control-label-color), + font-size: var(--custom-control-label-font-size), + font-weight: var(--custom-control-label-font-weight), + line-height: var(--custom-control-label-line-height), +); + +$custom-control-label-text: ( + padding-left: var(--custom-control-label-padding-left), +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_custom_properties.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_custom_properties.scss new file mode 100644 index 0000000..203b56a --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_custom_properties.scss @@ -0,0 +1,646 @@ +$dialect-custom-properties: () !default; +$dialect-custom-properties: map-deep-merge( + ( + --aspect-ratio-1: 100%, + --aspect-ratio-2: calc(3 / 4 * 100%), + --aspect-ratio-3: calc(2 / 3 * 100%), + --aspect-ratio-4: calc(5 / 8 * 100%), + --aspect-ratio-5: calc(9 / 16 * 100%), + --aspect-ratio-6: calc(1 / 2 * 100%), + --blockquote-font-size: 1.25rem, + --blockquote-small-color: var(--color-neutral-6), + --blockquote-small-font-size: 80%, + --body-bg: var(--color-neutral-0), + --body-color: var(--color-neutral-9), + --border-radius-circle: 50%, + --border-radius-lg: 0.75rem, + --border-radius-pill: 50rem, + --border-radius-sm: 0.375rem, + --border-radius-xl: 1rem, + --border-radius-xs: 0.25rem, + --border-radius-xxl: 1.5rem, + --border-radius: 0.5rem, + --box-shadow-lg: var(--elevation-fluffy-3) rgba(0, 0, 0, .175), + --box-shadow-sm: var(--elevation-tight-1) rgba(0, 0, 0, .075), + --box-shadow: var(--elevation-tight-3) rgba(0, 0, 0, .15), + --btn-border-radius: var(--border-radius-sm), + --btn-border-width: 0.0625rem, + --btn-font-size: 1rem, + --btn-font-weight: var(--font-weight-semi-bold), + --btn-inline-item-font-size: var(--btn-font-size), + --btn-inline-item-spacer-x: var(--spacer-1), + --btn-lg-border-radius: var(--border-radius), + --btn-lg-font-size: 1.125rem, + --btn-lg-inline-item-font-size: var(--btn-lg-font-size), + --btn-lg-line-height: 1.5rem, + --btn-lg-padding-x: 1.125rem, + --btn-lg-padding-y: 0.875rem, + --btn-line-height: 1.5rem, + --btn-padding-x: 1rem, + --btn-padding-y: 0.75rem, + --btn-sm-border-radius: var(--border-radius-xs), + --btn-sm-font-size: 0.875rem, + --btn-sm-inline-item-font-size: var(--btn-sm-font-size), + --btn-sm-line-height: 1rem, + --btn-sm-padding-x: 0.75rem, + --btn-sm-padding-y: 0.5rem, + --card-aspect-ratio-item-offset: var(--spacer-5), + --card-autofit-col-lg-width: 24rem, + --card-autofit-col-md-width: 16rem, + --card-autofit-col-sm-width: 8rem, + --card-body-padding-bottom: var(--spacer-5), + --card-body-padding-left: var(--spacer-5), + --card-body-padding-right: var(--spacer-5), + --card-body-padding-top: var(--spacer-3), + --card-border-radius: var(--border-radius), + --card-elevated-background-color-active: var(--color-neutral-0), + --card-elevated-background-color-hover: var(--color-neutral-0), + --card-elevated-background-color: var(--color-neutral-0), + --card-elevated-border-color-active: transparent, + --card-elevated-border-color-hover: transparent, + --card-elevated-border-color: transparent, + --card-elevated-border-width: 0rem, + --card-elevated-box-shadow-active: var(--elevation-tight-3) rgba(89, 36, 235, 0.22), + --card-elevated-box-shadow-hover: var(--elevation-tight-7) rgba(89, 36, 235, 0.17), + --card-elevated-box-shadow: var(--elevation-tight-3) rgba(89, 36, 235, 0.22), + --card-flat-background-color-active: var(--color-neutral-1), + --card-flat-background-color-hover: var(--color-neutral-1), + --card-flat-background-color: var(--color-neutral-1), + --card-flat-border-color-active: var(--color-action-primary-active), + --card-flat-border-color-hover: var(--color-action-primary-hover), + --card-flat-border-color: var(--color-neutral-1), + --card-flat-border-width: 0.0625rem, + --card-flat-box-shadow-active: none, + --card-flat-box-shadow-hover: none, + --card-flat-box-shadow: none, + --card-horizontal-aspect-ratio-default: var(--aspect-ratio-1), + --card-outlined-background-color-active: var(--color-neutral-0), + --card-outlined-background-color-hover: var(--color-neutral-0), + --card-outlined-background-color: var(--color-neutral-0), + --card-outlined-border-color-active: var(--color-action-primary-active), + --card-outlined-border-color-hover: var(--color-action-primary-hover), + --card-outlined-border-color: var(--color-neutral-3), + --card-outlined-border-width: 0.0625rem, + --card-outlined-box-shadow-active: none, + --card-outlined-box-shadow-hover: none, + --card-outlined-box-shadow: none, + --card-vertical-aspect-ratio-default: var(--aspect-ratio-3), + --color-accent-1-lighten: #FFF3E5, + --color-accent-1: #FFB743, + --color-accent-2-lighten: #FCF2ED, + --color-accent-2: #ED915E, + --color-accent-3-lighten: #F0F7FC, + --color-accent-3: #266799, + --color-accent-4-lighten: #EFEFFA, + --color-accent-4: #525287, + --color-accent-5-lighten: #E9F0E9, + --color-accent-5: #7A947A, + --color-accent-6-lighten: #FAE8EF, + --color-accent-6: #C42F57, + --color-action-neutral-active-lighten: #D8DADA, + --color-action-neutral-active: #4F6161, + --color-action-neutral-default: #3A4747, + --color-action-neutral-disabled: #9BA59C, + --color-action-neutral-hover-lighten: #EBEDED, + --color-action-neutral-hover: #455454, + --color-action-neutral-inverted-active: #FFFFFF, + --color-action-neutral-inverted-disabled: #FFFFFF, + --color-action-neutral-inverted-hover: #FFFFFF, + --color-action-neutral-inverted: #FFFFFF, + --color-action-primary-active-lighten: #D1E3E3, + --color-action-primary-active: #1D8C8C, + --color-action-primary-default: #187474, + --color-action-primary-disabled: #8BB9B9, + --color-action-primary-hover-lighten: #E8F1F1, + --color-action-primary-hover: #187474, + --color-action-primary-inverted-active: #FFFFFF, + --color-action-primary-inverted-disabled: #FFFFFF, + --color-action-primary-inverted-hover: #FFFFFF, + --color-action-primary-inverted: #FFFFFF, + --color-action-secondary-active-lighten: #ECDBDB, + --color-action-secondary-active: #874141, + --color-action-secondary-default: #A14D4D, + --color-action-secondary-disabled: #D0A6A6, + --color-action-secondary-hover-lighten: #F6EDED, + --color-action-secondary-hover: #944747, + --color-action-secondary-inverted-active: #FFFFFF, + --color-action-secondary-inverted-disabled: #FFFFFF, + --color-action-secondary-inverted-hover: #FFFFFF, + --color-action-secondary-inverted: #FFFFFF, + --color-brand-primary-darken-1: #177272, + --color-brand-primary-darken-2: #135D5D, + --color-brand-primary-darken-3: #0E4444, + --color-brand-primary-darken-4: #092F2F, + --color-brand-primary-darken-5: #041515, + --color-brand-primary-lighten-1: #419F9F, + --color-brand-primary-lighten-2: #64AFAF, + --color-brand-primary-lighten-3: #88C3C3, + --color-brand-primary-lighten-4: #AAD4D4, + --color-brand-primary-lighten-5: #D0E7E7, + --color-brand-primary-lighten-6: #F5FAFA, + --color-brand-primary: #1D8C8C, + --color-brand-secondary-darken-1: #C18933, + --color-brand-secondary-darken-2: #AD7A2E, + --color-brand-secondary-darken-3: #956928, + --color-brand-secondary-darken-4: #815B22, + --color-brand-secondary-darken-5: #6D4D1D, + --color-brand-secondary-lighten-1: #DDA95A, + --color-brand-secondary-lighten-2: #E4B877, + --color-brand-secondary-lighten-3: #EACA99, + --color-brand-secondary-lighten-4: #F1D9B7, + --color-brand-secondary-lighten-5: #F7EBD9, + --color-brand-secondary-lighten-6: #FDFBF7, + --color-brand-secondary: #D79839, + --color-chart-1: #1D8C8C, + --color-chart-2: #F7BFB6, + --color-chart-3: #ACD5D5, + --color-chart-4: #A14D4D, + --color-chart-5: #0D3E64, + --color-focus: var(--color-brand-primary-lighten-3), + --color-neutral-0: #FFFFFF, + --color-neutral-1: #F8F8F8, + --color-neutral-10: #041515, + --color-neutral-2: #DCDFDF, + --color-neutral-3: #A6ACAC, + --color-neutral-4: #A6ACAC, + --color-neutral-5: #8B9393, + --color-neutral-6: #707A7A, + --color-neutral-7: #556161, + --color-neutral-8: #3A4747, + --color-neutral-9: #1F2E2E, + --color-state-error-darken-1: #A6002D, + --color-state-error-darken-2: #5F001A, + --color-state-error-lighten-1: #F57396, + --color-state-error-lighten-2: #FDE6EC, + --color-state-error: #ED0040, + --color-state-info-darken-1: #004981, + --color-state-info-darken-2: #002A4A, + --color-state-info-lighten-1: #73ACD8, + --color-state-info-lighten-2: #E6F0F8, + --color-state-info: #0068B8, + --color-state-success-darken-1: #106D10, + --color-state-success-darken-2: #093E09, + --color-state-success-lighten-1: #7FC97F, + --color-state-success-lighten-2: #E8F5E8, + --color-state-success: #179C17, + --color-state-warning-darken-1: #A64611, + --color-state-warning-darken-2: #5F280A, + --color-state-warning-lighten-1: #F5AA80, + --color-state-warning-lighten-2: #FDF0E8, + --color-state-warning: #ED6418, + --color-state-neutral-darken-1: #707A7A, + --color-state-neutral-darken-2: #556161, + --color-state-neutral-lighten-1: #C1C6C6, + --color-state-neutral-lighten-2: #DCDFDF, + --color-state-neutral: #8B9393, + --condensed-form-feedback-item-margin: 0, + --condensed-form-input-background-color-disabled: var(--color-neutral-1), + --condensed-form-input-background-color: var(--color-neutral-2), + --condensed-form-input-filled-border-color: var(--color-neutral-5), + --condensed-form-input-filled-label-color: var(--color-neutral-8), + --condensed-form-input-filled-label-font-size: var(--text-paragraph-sm-font-size), + --condensed-form-input-filled-label-font-weight: var(--font-weight-bolder), + --condensed-form-input-label-color-disabled: var(--color-neutral-4), + --condensed-form-input-label-color: var(--color-neutral-5), + --condensed-form-input-label-font-size: var(--text-paragraph-font-size), + --condensed-form-input-label-font-weight: var(--font-weight-bolder), + --condensed-form-input-label-margin-x: 0.75rem, + --condensed-form-input-label-padding-x: 0.25rem, + --condensed-form-text-font-size: var(--text-paragraph-sm-font-size), + --condensed-form-text-font-weight: var(--font-weight-normal), + --container-max-lg: 960px, + --container-max-md: 720px, + --container-max-sm: 540px, + --container-max-xl: 1248px, + --custom-control-background-color: var(--color-neutral-0), + --custom-control-border-color-disabled: var(--color-action-primary-disabled), + --custom-control-border-color: var(--color-action-primary-default), + --custom-control-color-hover: var(--color-action-primary-active-lighten), + --custom-control-label-color: var(--form-input-label-color), + --custom-control-label-font-size: var(--text-paragraph-sm-font-size), + --custom-control-label-font-weight: var(--form-input-label-font-weight), + --custom-control-label-line-height: var(--text-paragraph-sm-line-height), + --custom-control-label-padding-left: 0.75rem, + --display-line-height: 1.2, + --display1-size: 6rem, + --display1-weight: var(--font-weight-light), + --display2-size: 5.5rem, + --display2-weight: var(--font-weight-light), + --display3-size: 3.0625rem, + --display3-weight: var(--font-weight-light), + --display4-size: 2.6875rem, + --display4-weight: var(--font-weight-light), + --elevation-fluffy-1: 0 5px 15px, + --elevation-fluffy-2: 0 6.25px 20px, + --elevation-fluffy-3: 0 10px 30px, + --elevation-fluffy-4: 0 10px 35px, + --elevation-fluffy-5: 0 15px 60px, + --elevation-fluffy-6: 0 17.5px 70px, + --elevation-fluffy-7: 0 35px 90px, + --elevation-tight-1: 0 1px 3px, + --elevation-tight-2: 0 1.25px 4px, + --elevation-tight-3: 0 2px 6px, + --elevation-tight-4: 0 2px 7px, + --elevation-tight-5: 0 3px 12px, + --elevation-tight-6: 0 3.5px 14px, + --elevation-tight-7: 0 7px 18px, + --elevation-tight-8: 0 12px 28px, + --elevation-tight-9: 0 13px 36px, + --font-family-base: ('Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'), + --font-family-monospace: (SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace), + --font-family-sans-serif: ('Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'), + --font-size-base: var(--text-paragraph-font-size), + --font-weight-bold: 700, + --font-weight-bolder: 800, + --font-weight-light: 300, + --font-weight-lighter: lighter, + --font-weight-normal: 400, + --font-weight-semi-bold: 600, + --form-feedback-item-border-radius: var(--border-radius), + --form-feedback-item-font-size: var(--text-paragraph-sm-font-size), + --form-feedback-item-font-weight: var(--font-weight-normal), + --form-feedback-item-line-height: var(--text-paragraph-sm-line-height), + --form-feedback-item-margin: 0.25rem 0 0, + --form-feedback-item-padding: 0.375rem 1rem, + --form-input-background-color: var(--color-neutral-0), + --form-input-border-color-disabled: var(--color-neutral-2), + --form-input-border-color: var(--color-neutral-5), + --form-input-border-radius: var(--border-radius), + --form-input-border-width: 0.0625rem, + --form-input-color-disabled: var(--color-neutral-4), + --form-input-color: var(--color-neutral-8), + --form-input-font-size: var(--text-paragraph-font-size), + --form-input-font-weight: var(--font-weight-normal), + --form-input-label-color-disabled: var(--color-neutral-8), + --form-input-label-color: var(--color-neutral-8), + --form-input-label-font-size: var(--text-paragraph-font-size), + --form-input-label-font-weight: var(--font-weight-bolder), + --form-input-label-line-height: var(--text-paragraph-line-height), + --form-input-label-margin-bottom: 0.25rem, + --form-input-label-margin-left: 1rem, + --form-input-label-margin-right: 1rem, + --form-input-label-margin-top: 0.25rem, + --form-input-label-reference-mark-color: var(--color-state-error), + --form-input-line-height: var(--text-paragraph-line-height), + --form-input-padding-x: 1rem, + --form-input-padding-y: 0.6875rem, + --form-input-placeholder-color-disabled: var(--color-neutral-3), + --form-input-placeholder-color-focus: var(--color-neutral-4), + --form-input-placeholder-color: var(--color-neutral-4), + --form-input-placeholder-font-size: var(--text-paragraph-font-size), + --form-input-placeholder-font-weight: var(--font-weight-normal), + --form-input-placeholder-line-height: var(--text-paragraph-line-height), + --form-text-color: var(--color-neutral-7), + --form-text-font-size: var(--text-paragraph-sm-font-size), + --form-text-font-weight: var(--font-weight-light), + --form-text-line-height: var(--text-paragraph-sm-line-height), + --form-text-margin: 0.25rem 1rem 0, + --h1-font-size: 2.3125rem, + --h1-font-size-mobile: 2rem, + --h1-font-size-tablet: 2.125rem, + --h1-font-weight: var(--font-weight-bold), + --h2-font-size: 2rem, + --h2-font-size-mobile: 1.8125rem, + --h2-font-size-tablet: 1.875rem, + --h2-font-weight: var(--h1-font-weight), + --h3-font-size: 1.75rem, + --h3-font-size-mobile: 1.625rem, + --h3-font-size-tablet: 1.625rem, + --h3-font-weight: var(--h1-font-weight), + --h4-font-size: 1.5rem, + --h4-font-size-mobile: 1.4375rem, + --h4-font-size-tablet: 1.4375rem, + --h4-font-weight: var(--h1-font-weight), + --h5-font-size: 1.125rem, + --h5-font-size-mobile: 1.125rem, + --h5-font-size-tablet: 1.125rem, + --h5-font-weight: var(--h1-font-weight), + --h6-font-size: 0.875rem, + --h6-font-size-mobile: 0.875rem, + --h6-font-size-tablet: 0.875rem, + --h6-font-weight: var(--h1-font-weight), + --h1-line-height: 2.5rem, + --h1-line-height-mobile: 2.25rem, + --h1-line-height-tablet: 2.5rem, + --h2-line-height: 2.5rem, + --h2-line-height-mobile: 2rem, + --h2-line-height-tablet: 2rem, + --h3-line-height: 2rem, + --h3-line-height-mobile: 2rem, + --h3-line-height-tablet: 1.75rem, + --h4-line-height: 1.75rem, + --h4-line-height-mobile: 1.5rem, + --h4-line-height-tablet: 1.75rem, + --h5-line-height: 1.25rem, + --h5-line-height-mobile: 1.25rem, + --h5-line-height-tablet: 1.25rem, + --h6-line-height: 1rem, + --h6-line-height-mobile: 1rem, + --h6-line-height-tablet: 1rem, + // --headings-line-height: 1.2, + --hr-border-color: rgba(0, 0, 0, .1), + --hr-border-margin-y: 1rem, + --hr-border-width: 1px, + --label-item-spacer-x: 0.375rem, + --label-lg-border-radius: var(--border-radius-xs), + --label-lg-font-size: var(--text-paragraph-sm-font-size), + --label-lg-font-weight: var(--font-weight-bolder), + --label-lg-icon-size: 0.875rem, + --label-lg-line-height: var(--text-paragraph-sm-line-height), + --label-lg-padding-x: var(--spacer-2), + --label-lg-padding-y: 0.125rem, + --label-sm-border-radius: var(--border-radius-xs), + --label-sm-font-size: var(--text-paragraph-xs-font-size), + --label-sm-font-weight: var(--font-weight-bolder), + --label-sm-icon-size: 0.75rem, + --label-sm-line-height: 1rem, + --label-sm-padding-x: var(--spacer-1), + --label-sm-padding-y: 0.0625rem, + --lead-font-size: 1.25rem, + --lead-font-weight: var(--font-weight-light), + --link-color: var(--color-action-primary-default), + --link-hover-color: var(--color-action-primary-hover), + --link-hover-text-decoration: underline, + --link-text-decoration: none, + --link-visited-color: #5E38BA, + --link-visited-text-decoration: none, + --marked-text-background-color: var(--color-brand-secondary-lighten-5), + --nav-link-horizontal-active-indicator-length: 100%, + --nav-link-horizontal-active-indicator-thickness: 0.125rem, + --nav-link-horizontal-margin: 0 1rem, + --nav-link-vertical-active-indicator-length: 100%, + --nav-link-vertical-active-indicator-thickness: 0.25rem, + --nav-link-vertical-margin: 1rem 0, + --spacer-0: 0, + --spacer-10: 6rem, + --spacer-11: 7.5rem, + --spacer-12: 9rem, + --spacer-13: 10rem, + --spacer-1: 0.25rem, + --spacer-2: 0.5rem, + --spacer-3: 1rem, + --spacer-4: 1.25rem, + --spacer-5: 1.5rem, + --spacer-6: 2rem, + --spacer-7: 3rem, + --spacer-8: 4.5rem, + --spacer-9: 5rem, + --tab-primary-horizontal-item-active-bar-width: auto, + --tab-primary-horizontal-item-border-bottom-width: 0.03125rem, + --tab-primary-horizontal-item-border-left-width: 0, + --tab-primary-horizontal-item-border-right-width: 0, + --tab-primary-horizontal-item-border-top-width: 0, + --tab-primary-horizontal-item-padding-x: var(--spacer-3), + --tab-primary-horizontal-item-padding-y: var(--spacer-3), + --tab-primary-item-active-bar-border-radius: 0.0625rem, + --tab-primary-item-active-bar-color-active: var(--color-brand-primary), + --tab-primary-item-active-bar-color-hover: var(--color-brand-primary-darken-1), + --tab-primary-item-active-bar-thickness: 0.1875rem, + --tab-primary-item-background-color-active: var(--tab-primary-item-background-color), + --tab-primary-item-background-color-disabled: var(--tab-primary-item-background-color), + --tab-primary-item-background-color-hover: var(--tab-primary-item-background-color), + --tab-primary-item-background-color: transparent, + --tab-primary-item-border-color-active: var(--tab-primary-item-border-color), + --tab-primary-item-border-color-hover: var(--tab-primary-item-border-color), + --tab-primary-item-border-color: var(--color-neutral-3), + --tab-primary-item-border-radius: 0, + --tab-primary-item-box-shadow-active: none, + --tab-primary-item-box-shadow-hover: none, + --tab-primary-item-color-active: var(--color-action-primary-default), + --tab-primary-item-color-disabled: var(--color-action-neutral-disabled), + --tab-primary-item-color-hover: var(--color-action-primary-hover), + --tab-primary-item-color: var(--color-neutral-7), + --tab-primary-item-font-size: var(--text-paragraph-font-size), + --tab-primary-item-font-weight-active: var(--tab-primary-item-font-weight), + --tab-primary-item-font-weight: var(--font-weight-bold), + --tab-primary-item-icon-color-active: var(--color-action-primary-default), + --tab-primary-item-icon-color-disabled: var(--color-action-neutral-disabled), + --tab-primary-item-icon-color-hover: var(--color-action-primary-hover), + --tab-primary-item-icon-color: var(--color-neutral-7), + --tab-primary-item-icon-font-size: var(--text-paragraph-font-size), + --tab-primary-item-inline-item-spacer-x: var(--spacer-3), + --tab-primary-item-inline-item-spacer-y: var(--spacer-3), + --tab-primary-item-line-height: var(--text-paragraph-line-height), + --tab-primary-vertical-item-active-bar-height: auto, + --tab-primary-vertical-item-border-bottom-width: 0, + --tab-primary-vertical-item-border-left-width: 0.0625rem, + --tab-primary-vertical-item-border-right-width: 0, + --tab-primary-vertical-item-border-top-width: 0, + --tab-primary-vertical-item-padding-x: var(--spacer-3), + --tab-primary-vertical-item-padding-y: var(--spacer-3), + --tab-secondary-horizontal-item-active-bar-width: auto, + --tab-secondary-horizontal-item-border-bottom-width: 0.0625rem, + --tab-secondary-horizontal-item-border-left-width: 0.0625rem, + --tab-secondary-horizontal-item-border-right-width: 0.0625rem, + --tab-secondary-horizontal-item-border-top-width: 0.0625rem, + --tab-secondary-horizontal-item-padding-x: var(--spacer-3), + --tab-secondary-horizontal-item-padding-y: var(--spacer-3), + --tab-secondary-item-active-bar-border-radius: 0.0625rem, + --tab-secondary-item-active-bar-color-active: var(--color-action-primary-default), + --tab-secondary-item-active-bar-color-hover: var(--color-action-primary-default), + --tab-secondary-item-active-bar-thickness: 0.1875rem, + --tab-secondary-item-background-color-active: var(--color-neutral-0), + --tab-secondary-item-background-color-disabled: var(--tab-secondary-item-background-color), + --tab-secondary-item-background-color-hover: var(--tab-secondary-item-background-color), + --tab-secondary-item-background-color: var(--color-neutral-1), + --tab-secondary-item-border-color-active: var(--tab-secondary-item-border-color), + --tab-secondary-item-border-color-hover: var(--tab-secondary-item-border-color), + --tab-secondary-item-border-color: var(--color-neutral-3), + --tab-secondary-item-border-radius: 0, + --tab-secondary-item-box-shadow-active: none, + --tab-secondary-item-box-shadow-hover: none, + --tab-secondary-item-color-active: var(--color-neutral-10), + --tab-secondary-item-color-disabled: var(--color-action-neutral-disabled), + --tab-secondary-item-color-hover: var(--color-neutral-10), + --tab-secondary-item-color: var(--color-neutral-8), + --tab-secondary-item-font-size: var(--text-paragraph-font-size), + --tab-secondary-item-font-weight-active: var(--font-weight-bold), + --tab-secondary-item-font-weight: var(--font-weight-normal), + --tab-secondary-item-icon-color-active: var(--tab-secondary-item-icon-color), + --tab-secondary-item-icon-color-disabled: var(--color-action-neutral-disabled), + --tab-secondary-item-icon-color-hover: var(--tab-secondary-item-icon-color), + --tab-secondary-item-icon-color: var(--color-neutral-7), + --tab-secondary-item-icon-font-size: var(--text-paragraph-font-size), + --tab-secondary-item-inline-item-spacer-x: var(--spacer-2), + --tab-secondary-item-inline-item-spacer-y: var(--spacer-2), + --tab-secondary-item-line-height: var(--text-paragraph-line-height), + --tab-secondary-vertical-item-active-bar-height: auto, + --tab-secondary-vertical-item-border-bottom-width: 0.0625rem, + --tab-secondary-vertical-item-border-left-width: 0.0625rem, + --tab-secondary-vertical-item-border-right-width: 0.0625rem, + --tab-secondary-vertical-item-border-top-width: 0.0625rem, + --tab-secondary-vertical-item-padding-x: var(--spacer-3), + --tab-secondary-vertical-item-padding-y: var(--spacer-3), + --tab-segment-background-color: var(--color-neutral-1), + --tab-segment-border-color: var(--color-neutral-3), + --tab-segment-border-radius: var(--border-radius-pill), + --tab-segment-border-width: 0.0625rem, + --tab-segment-item-background-color-active: var(--color-action-primary-active), + --tab-segment-item-background-color-disabled: var(--tab-segment-item-background-color), + --tab-segment-item-background-color-hover: var(--tab-segment-item-background-color), + --tab-segment-item-background-color: transparent, + --tab-segment-item-border-color-active: var(--tab-segment-item-border-color), + --tab-segment-item-border-color-disabled: var(--tab-segment-item-border-color), + --tab-segment-item-border-color-hover: var(--tab-segment-item-border-color), + --tab-segment-item-border-color: transparent, + --tab-segment-item-border-radius: var(--border-radius-pill), + --tab-segment-item-border-width: 0, + --tab-segment-item-box-shadow-active: var(--elevation-tight-2) rgba(89, 36, 235, 0.25), + --tab-segment-item-box-shadow-hover: none, + --tab-segment-item-color-active: var(--color-action-primary-inverted), + --tab-segment-item-color-disabled: var(--color-action-neutral-disabled), + --tab-segment-item-color-hover: var(--color-action-primary-active), + --tab-segment-item-color: var(--color-neutral-6), + --tab-segment-item-font-size: var(--text-link-small-font-size), + --tab-segment-item-font-weight-active: var(--tab-segment-item-font-weight), + --tab-segment-item-font-weight: var(--font-weight-bold), + --tab-segment-item-icon-color-active: var(--tab-segment-item-color-active), + --tab-segment-item-icon-color-disabled: var(--tab-segment-item-color-disabled), + --tab-segment-item-icon-color-hover: var(--tab-segment-item-color-hover), + --tab-segment-item-icon-color: var(--tab-segment-item-color), + --tab-segment-item-icon-font-size: var(--text-paragraph-font-size), + --tab-segment-item-inline-item-spacer-x: var(--spacer-3), + --tab-segment-item-inline-item-spacer-y: var(--spacer-3), + --tab-segment-item-line-height: var(--text-link-small-line-height), + --tab-segment-item-padding-x: 0.375rem, + --tab-segment-item-padding-y: var(--spacer-3), + --tab-segment-padding-x: var(--spacer-1), + --tab-segment-padding-y: var(--spacer-1), + --tab-tertiary-horizontal-item-active-bar-width: auto, + --tab-tertiary-horizontal-item-border-bottom-width: 0.0625rem, + --tab-tertiary-horizontal-item-border-left-width: 0, + --tab-tertiary-horizontal-item-border-right-width: 0, + --tab-tertiary-horizontal-item-border-top-width: 0, + --tab-tertiary-horizontal-item-padding-x: var(--spacer-3), + --tab-tertiary-horizontal-item-padding-y: var(--spacer-3), + --tab-tertiary-item-active-bar-border-radius: 0.0625rem, + --tab-tertiary-item-active-bar-color-active: var(--color-action-primary-default), + --tab-tertiary-item-active-bar-color-hover: var(--color-action-primary-hover), + --tab-tertiary-item-active-bar-thickness: 0.1875rem, + --tab-tertiary-item-background-color-active: var(--tab-tertiary-item-background-color), + --tab-tertiary-item-background-color-disabled: var(--tab-tertiary-item-background-color), + --tab-tertiary-item-background-color-hover: var(--tab-tertiary-item-background-color), + --tab-tertiary-item-background-color: var(--color-neutral-0), + --tab-tertiary-item-border-color-active: transparent, + --tab-tertiary-item-border-color-hover: var(--tab-tertiary-item-border-color), + --tab-tertiary-item-border-color: var(--color-neutral-3), + --tab-tertiary-item-border-radius: 0, + --tab-tertiary-item-box-shadow-active: var(--elevation-fluffy-2) rgba(77, 133, 255, 0.1), + --tab-tertiary-item-box-shadow-hover: none, + --tab-tertiary-item-color-active: var(--tab-tertiary-item-color), + --tab-tertiary-item-color-disabled: var(--color-action-neutral-disabled), + --tab-tertiary-item-color-hover: var(--tab-tertiary-item-color), + --tab-tertiary-item-color: var(--color-neutral-8), + --tab-tertiary-item-font-size: var(--text-paragraph-font-size), + --tab-tertiary-item-font-weight-active: var(--font-weight-bolder), + --tab-tertiary-item-font-weight: var(--font-weight-normal), + --tab-tertiary-item-icon-color-active: var(--tab-tertiary-item-icon-color), + --tab-tertiary-item-icon-color-disabled: var(--color-action-neutral-disabled), + --tab-tertiary-item-icon-color-hover: var(--tab-tertiary-item-icon-color), + --tab-tertiary-item-icon-color: var(--color-neutral-7), + --tab-tertiary-item-icon-font-size: var(--text-paragraph-font-size), + --tab-tertiary-item-inline-item-spacer-x: var(--spacer-2), + --tab-tertiary-item-inline-item-spacer-y: var(--spacer-2), + --tab-tertiary-item-line-height: var(--text-paragraph-line-height), + --tab-tertiary-vertical-item-active-bar-height: auto, + --tab-tertiary-vertical-item-border-bottom-width: 0.0625rem, + --tab-tertiary-vertical-item-border-left-width: 0, + --tab-tertiary-vertical-item-border-right-width: 0, + --tab-tertiary-vertical-item-border-top-width: 0, + --tab-tertiary-vertical-item-padding-x: var(--spacer-3), + --tab-tertiary-vertical-item-padding-y: var(--spacer-3), + --table-border-color: var(--color-neutral-3), + --table-border-radius: var(--border-radius), + --table-border-width: 0.0625rem, + --table-box-shadow: none, + --table-cell-min-height: 3.5rem, + --table-cell-padding-x: var(--spacer-3), + --table-cell-padding-y: var(--spacer-3), + --table-color: var(--color-neutral-10), + --table-font-size: var(--text-paragraph-font-size), + --table-font-weight: var(--font-weight-normal), + --table-header-background-color: var(--color-neutral-0), + --table-header-cell-min-height: 3.5rem, + --table-header-cell-padding-x: var(--spacer-3), + --table-header-cell-padding-y: var(--spacer-3), + --table-header-color: var(--color-neutral-8), + --table-header-font-size: var(--table-font-size), + --table-header-font-weight: var(--font-weight-semi-bold), + --table-header-line-height: var(--text-paragraph-line-height), + --table-header-vertical-align: middle, + --table-image-max-height: 100px, + --table-lg-cell-min-height: 4.5625rem, + --table-lg-cell-padding-x: var(--spacer-5), + --table-lg-cell-padding-y: var(--spacer-5), + --table-lg-font-size: var(--text-paragraph-font-size), + --table-lg-font-weight: var(--font-weight-normal), + --table-lg-header-cell-min-height: 4.5625rem, + --table-lg-header-cell-padding-x: var(--spacer-5), + --table-lg-header-cell-padding-y: var(--spacer-5), + --table-lg-header-font-size: var(--text-paragraph-font-size), + --table-lg-header-font-weight: var(--font-weight-semi-bold), + --table-lg-header-line-height: var(--text-paragraph-line-height), + --table-lg-line-height: var(--text-paragraph-line-height), + --table-line-height: var(--text-paragraph-line-height), + --table-row-background-color-active: var(--color-action-primary-active-lighten), + --table-row-background-color-alternate: var(--color-neutral-1), + --table-row-background-color-hover: var(--color-action-primary-hover-lighten), + --table-row-background-color: var(--color-neutral-0), + --table-row-color-hover: var(--table-row-color), + --table-sm-cell-min-height: 2.5625rem, + --table-sm-cell-padding-x: var(--spacer-2), + --table-sm-cell-padding-y: var(--spacer-2), + --table-sm-font-size: var(--text-paragraph-font-size), + --table-sm-font-weight: var(--font-weight-normal), + --table-sm-header-cell-min-height: 2.5625rem, + --table-sm-header-cell-padding-x: var(--spacer-2), + --table-sm-header-cell-padding-y: var(--spacer-2), + --table-sm-header-font-size: var(--text-paragraph-font-size), + --table-sm-header-font-weight: var(--font-weight-semi-bold), + --table-sm-header-line-height: var(--text-paragraph-line-height), + --table-sm-line-height: var(--text-paragraph-line-height), + --table-spaced-row-border-color: var(--color-neutral-3), + --table-spaced-row-border-radius: var(--border-radius), + --table-spaced-row-border-spacing: var(--spacer-2), + --table-spaced-row-border-width: 0, + --table-spaced-row-box-shadow: none, + --table-title-color: var(--color-neutral-9), + --table-title-font-size: var(--text-small-caps-font-size), + --table-title-font-weight: var(--font-weight-semi-bold), + --table-title-line-height: var(--text-paragraph-line-height), + --table-title-link-color-hover: var(--link-hover-color), + --table-title-link-color: var(--link-color), + --table-title-link-text-decoration-hover: var(--link-text-decoration-hover), + --table-title-link-text-decoration: var(--link-text-decoration), + --text-link-lg-font-size: 1.25rem, + --text-link-lg-line-height: 1.5rem, + --text-link-md-font-size: 1rem, + --text-link-md-line-height: 1.5rem, + --text-link-sm-font-size: 0.875rem, + --text-link-sm-line-height: 1rem, + --text-link-xs-font-size: 0.5625rem, + --text-link-xs-line-height: 0.75rem, + --text-muted: var(--color-neutral-4), + --text-paragraph-font-size: 1rem, + --text-paragraph-lg-font-size: 1.3125rem, + --text-paragraph-lg-font-size-mobile: 1.25rem, + --text-paragraph-lg-line-height: 2rem, + --text-paragraph-lg-line-height-mobile: 1.75rem, + --text-paragraph-line-height: 1.5rem, + --text-paragraph-sm-font-size: 0.8125rem, + --text-paragraph-sm-line-height: 1rem, + --text-paragraph-xs-font-size: 0.6875rem, + --text-paragraph-xs-line-height: 1rem, + --text-paragraph-xs-line-height-heavy: 1.25rem, + --text-paragraph-xxs-font-size: 0.5625rem, + --text-paragraph-xxs-line-height: 0.75rem, + --text-small-caps-font-size: 0.875rem, + --text-small-caps-letter-spacing: 0.04375rem, + --text-small-caps-letter-spacing-light: 0.0525rem, + --text-small-caps-line-height: 1.25rem, + --transition-base: 0.2s ease-in-out, + --transition-collapse: 0.35s ease, + --transition-fade: 0.15s linear + ), + $dialect-custom-properties +); \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_dropdowns.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_dropdowns.scss new file mode 100644 index 0000000..c91f6fb --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_dropdowns.scss @@ -0,0 +1,5 @@ +$dropdown-item-base: ( + hover: ( + background-color: $primary-l2, + ), +); \ No newline at end of file diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_forms.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_forms.scss new file mode 100644 index 0000000..8c5aef0 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_forms.scss @@ -0,0 +1,86 @@ +$input-label-color: var(--form-input-label-color); +$input-label-disabled-color: var(--form-input-label-color-disabled); +$input-label-font-size: var(--form-input-label-font-size); +$input-label-font-weight: var(--form-input-label-font-weight); +$input-label-margin-bottom: var(--form-input-label-margin-bottom); +$input-label-reference-mark-color: var(--form-input-label-reference-mark-color); +$input-label-reference-mark-font-size: 0.3125rem; +$input-label-reference-mark-spacer: 0.25rem; +$input-label-reference-mark-vertical-align: super; + +$input-bg: var(--form-input-background-color); +$input-border-color: var(--form-input-border-color); +$input-border-radius: var(--form-input-border-radius); +$input-border-width: var(--form-input-border-width); +$input-color: var(--form-input-color); +$input-font-size: var(--form-input-font-size); +$input-font-weight: var(--form-input-font-weight); +$input-height: var(--form-input-height); +$input-line-height: var(--form-input-line-height); +$input-padding-x: var(--form-input-padding-x); +$input-padding-y: var(--form-input-padding-y); +$input-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; + +$input-focus-bg: $form-white-color; +$input-focus-border-color: $form-input-focus-color; + +$input-disabled-bg: var( + --form-input-disabled-background-color, + var(--form-input-background-color) +); +$input-disabled-border-color: var( + --current-form-input-disabled-border-color, + var(--form-input-disabled-border-color) +); +$input-disabled-color: var(--form-input-color-disabled); + +$input-placeholder-color: var(--form-input-placeholder-color); +$input-placeholder-disabled-color: var(--form-input-placeholder-color-disabled); +$input-placeholder-focus-color: var(--form-input-placeholder-color-focus); + +$input-danger-bg: var(--form-input-error-bg, #{danger-l2}); +$input-danger-border-color: var(--form-input-error-border-color, #{$danger}); +$input-danger-checkbox-label-color: $input-label-color; +$input-danger-focus-bg: #{$form-white-color}; +$input-danger-focus-border-color: #{$form-input-focus-color}; +$input-success-bg: var(--form-input-success-bg, #{success-l2}); +$input-success-border-color: var( + --form-input-success-border-color, + #{$success} +); +$input-success-checkbox-label-color: $input-label-color; +$input-success-focus-bg: #{$form-white-color}; +$input-success-focus-border-color: #{$form-input-focus-color}; +$input-warning-bg: var(--form-input-warning-bg, #{warning-l2}); +$input-warning-border-color: var( + --form-input-warning-border-color, + #{$warning} +); +$input-warning-checkbox-label-color: $input-label-color; +$input-warning-focus-bg: #{$form-white-color}; +$input-warning-focus-border-color: #{$form-input-focus-color}; + +$form-feedback-indicator-margin-x: 0.25rem; + +$form-feedback-font-size: var(--form-feedback-item-font-size); +$form-feedback-font-weight: var(--form-feedback-item-font-weight); + +$form-text-color: var(--form-text-color); +$form-text-font-size: var(--form-text-font-size); +$form-text-font-weight: var(--form-text-font-weight); +$form-text-line-height: var(--form-text-line-height); + +// The following variables must be reset because they cause errors with CSS custom properties as values. + +$form-control-tag-group-padding-y: calc( + ( + #{$input-height} - (2 * #{$input-border-width}) - map-get( + $form-control-label-size, + height + ) - (map-get($form-control-label-size, margin-bottom)) - (map-get($form-control-label-size, margin-top)) + ) / 2 +); + +$form-group-item-label-spacer: calc( + (#{$input-label-font-size} * #{$line-height-base}) + #{$input-label-margin-bottom} +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_globals.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_globals.scss new file mode 100644 index 0000000..594725c --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_globals.scss @@ -0,0 +1,143 @@ +// Border Radius + +$border-radius-xxl: var(--border-radius-xxl); +$border-radius-xl: var(--border-radius-xl); +$border-radius-lg: var(--border-radius-lg); +$border-radius: var(--border-radius); +$border-radius-sm: var(--border-radius-sm); +$border-radius-xs: var(--border-radius-xs); + +$rounded-border-radius: $border-radius; +$rounded-circle-border-radius: var(--border-radius-circle); +$rounded-pill: var(--border-radius-pill); + +$panel-border-radius: 0.5rem; + +// Forms + +$form-input-focus-color: var(--color-focus); +$form-white-color: var(--color-neutral-0); + +$component-focus-box-shadow: 0 0 0 0.125rem $form-white-color#{','} 0 0 0 0.25rem + $form-input-focus-color; +$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $form-input-focus-color#{','} + inset 0 0 0 0.25rem $form-white-color; + +// Colors + +$white: var(--color-neutral-0); +$gray-100: var(--color-neutral-1); +$gray-200: var(--color-neutral-2); +$gray-300: var(--color-neutral-3); +$gray-400: var(--color-neutral-4); +$gray-500: var(--color-neutral-5); +$gray-600: var(--color-neutral-6); +$gray-700: var(--color-neutral-7); +$gray-800: var(--color-neutral-8); +$gray-900: var(--color-neutral-9); +$black: var(--color-neutral-10); + +$primary: var(--color-brand-primary); +$primary-d1: var(--color-brand-primary-darken-1); +$primary-d2: var(--color-brand-primary-darken-2); +$primary-l1: var(--color-brand-primary-lighten-2); +$primary-l2: var(--color-brand-primary-lighten-5); +$primary-l3: var(--color-brand-primary-lighten-6); + +$secondary: var(--color-brand-secondary); +$secondary-d1: var(--color-brand-secondary-darken-1); +$secondary-d2: var(--color-brand-secondary-darken-2); +$secondary-l1: var(--color-brand-secondary-lighten-2); +$secondary-l2: var(--color-brand-secondary-lighten-5); +$secondary-l3: var(--color-brand-secondary-lighten-6); + +$info: var(--color-state-info); +$info-d1: var(--color-state-info-darken-1); +$info-d2: var(--color-state-info-darken-2); +$info-l1: var(--color-state-info-lighten-1); +$info-l2: var(--color-state-info-lighten-2); + +$success: var(--color-state-success); +$success-d1: var(--color-state-success-darken-1); +$success-d2: var(--color-state-success-darken-2); +$success-l1: var(--color-state-success-lighten-1); +$success-l2: var(--color-state-success-lighten-2); + +$warning: var(--color-state-warning); +$warning-d1: var(--color-state-warning-darken-1); +$warning-d2: var(--color-state-warning-darken-2); +$warning-l1: var(--color-state-warning-lighten-1); +$warning-l2: var(--color-state-warning-lighten-2); + +$danger: var(--color-state-error); +$danger-d1: var(--color-state-error-darken-1); +$danger-d2: var(--color-state-error-darken-2); +$danger-l1: var(--color-state-error-lighten-1); +$danger-l2: var(--color-state-error-lighten-2); + +$light: var(--color-neutral-3); +$light-d1: var(--color-neutral-4); +$light-d2: var(--color-neutral-5); +$light-l1: var(--color-neutral-2); +$light-l2: var(--color-neutral-1); + +$dark: var(--color-neutral-7); +$dark-d1: var(--color-neutral-5); +$dark-d2: var(--color-neutral-6); +$dark-l1: var(--color-neutral-8); +$dark-l2: var(--color-neutral-9); + +// Headings h1-h6 + +// $headings-line-height: var(--headings-line-height); + +$h1: ( + font-weight: var(--h1-font-weight), + line-height: var(--h1-line-height), +); + +$h2: ( + font-weight: var(--h2-font-weight), + line-height: var(--h2-line-height), +); + +$h3: ( + font-weight: var(--h3-font-weight), + line-height: var(--h3-line-height), +); + +$h4: ( + font-weight: var(--h4-font-weight), + line-height: var(--h4-line-height), +); + +$h5: ( + font-weight: var(--h5-font-weight), + line-height: var(--h5-line-height), +); + +$h6: ( + font-weight: var(--h6-font-weight), + line-height: var(--h6-line-height), +); + +// Link + +$link-color: var(--link-color); +$link-decoration: var(--link-text-decoration); +$link-hover-color: var(--link-hover-color); +$link-hover-decoration: var(--link-hover-text-decoration); + +// Transitions + +$transition-base: all var(--transition-base); +$transition-fade: opacity var(--transition-fade); +$transition-collapse: height var(--transition-collapse); + +$btn-transition: color var(--transition-base), + background-color var(--transition-base), border-color var(--transition-base), + box-shadow var(--transition-base); + +// Other + +$mark-bg: var(--marked-text-background-color); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_labels.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_labels.scss new file mode 100644 index 0000000..317641d --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_labels.scss @@ -0,0 +1,727 @@ +$label-item-spacer-x: var(--label-item-spacer-x); + +$label: ( + border-radius: var(--label-sm-border-radius), + font-size: var(--label-sm-font-size), + font-weight: var(--label-sm-font-weight), + lexicon-icon: ( + height: var(--label-sm-icon-size), + width: var(--label-sm-icon-size), + ), + line-height: var(--label-sm-line-height), + padding-bottom: var(--label-sm-padding-y), + padding-left: var(--label-sm-padding-x), + padding-right: var(--label-sm-padding-x), + padding-top: var(--label-sm-padding-y), + text-transform: none, +); + +$label-lg: ( + border-radius: var(--label-lg-border-radius), + font-size: var(--label-lg-font-size), + font-weight: var(--label-lg-font-weight), + lexicon-icon: ( + height: var(--label-lg-icon-size), + width: var(--label-lg-icon-size), + ), + line-height: var(--label-lg-line-height), + padding-bottom: var(--label-lg-padding-y), + padding-left: var(--label-lg-padding-x), + padding-right: var(--label-lg-padding-x), + padding-top: var(--label-lg-padding-y), +); + +// Label Outline + +$label-primary: ( + border-color: var(--color-action-primary-default), + close: ( + focus: ( + color: var(--color-action-primary-hover), + ), + hover: ( + color: var(--color-action-primary-hover), + ), + ), + color: var(--color-action-primary-default), + focus: ( + color: var(--color-action-primary-hover), + ), + hover: ( + border-color: var(--color-action-primary-default), + color: var(--color-action-primary-hover), + ), +); + +$label-secondary: ( + border-color: var(--color-action-secondary-default), + close: ( + focus: ( + color: var(--color-action-secondary-hover), + ), + hover: ( + color: var(--color-action-secondary-hover), + ), + ), + color: var(--color-action-secondary-default), + focus: ( + color: var(--color-action-secondary-hover), + ), + hover: ( + border-color: var(--color-action-secondary-default), + color: var(--color-action-secondary-hover), + ), +); + +$label-success-hover-color: $success-d1; + +$label-success: ( + border-color: $success, + close: ( + focus: ( + color: $label-success-hover-color, + ), + hover: ( + color: $label-success-hover-color, + ), + ), + color: $success, + focus: ( + color: $label-success-hover-color, + ), + hover: ( + border-color: $success, + color: $label-success-hover-color, + ), +); + +$label-info-hover-color: $info-d1; + +$label-info: ( + border-color: $info, + close: ( + focus: ( + color: $label-info-hover-color, + ), + hover: ( + color: $label-info-hover-color, + ), + ), + color: $info, + focus: ( + color: $label-info-hover-color, + ), + hover: ( + border-color: $info, + color: $label-info-hover-color, + ), +); + +$label-warning-hover-color: $warning-d1; + +$label-warning: ( + border-color: $warning, + close: ( + focus: ( + color: $label-warning-hover-color, + ), + hover: ( + color: $label-warning-hover-color, + ), + ), + color: $warning, + focus: ( + color: $label-warning-hover-color, + ), + hover: ( + border-color: $warning, + color: $label-warning-hover-color, + ), +); + +$label-danger-hover-color: $danger-d1; + +$label-danger: ( + border-color: $danger, + close: ( + focus: ( + color: $label-danger-hover-color, + ), + hover: ( + color: $label-danger-hover-color, + ), + ), + color: $danger, + focus: ( + color: $label-danger-hover-color, + ), + hover: ( + border-color: $danger, + color: $label-danger-hover-color, + ), +); + +$label-light: ( + background-color: var(--color-neutral-6), + border-color: var(--color-neutral-1), + close: ( + focus: ( + color: var(--color-neutral-3), + ), + hover: ( + color: var(--color-neutral-3), + ), + ), + color: var(--color-neutral-1), + focus: ( + color: var(--color-neutral-1), + ), + hover: ( + background-color: var(--color-neutral-6), + border-color: var(--color-neutral-1), + color: var(--color-neutral-1), + ), +); + +$label-dark: ( + background-color: var(--color-neutral-1), + border-color: var(--color-neutral-6), + close: ( + focus: ( + color: var(--color-neutral-10), + ), + hover: ( + color: var(--color-neutral-10), + ), + ), + color: var(--color-neutral-6), + focus: ( + color: var(--color-neutral-6), + ), + hover: ( + background-color: var(--color-neutral-1), + border-color: var(--color-neutral-6), + color: var(--color-neutral-6), + ), +); + +// Label Inverse + +$label-inverse-primary: ( + background-color: var(--color-action-primary-default), + border-color: var(--color-action-primary-default), + close: ( + hover: ( + color: var(--color-action-primary-hover-lighten), + ), + ), + color: var(--color-action-primary-inverted), + hover: ( + background-color: var(--color-action-primary-hover), + border-color: var(--color-action-primary-hover), + color: var(--color-action-primary-inverted), + ), + link: ( + hover: ( + color: var(--color-action-primary-hover-lighten), + ), + ), +); + +$label-inverse-secondary: ( + background-color: var(--color-action-secondary-default), + border-color: var(--color-action-secondary-default), + color: var(--color-action-secondary-inverted), + hover: ( + background-color: var(--color-action-secondary-hover), + border-color: var(--color-action-secondary-hover), + color: var(--color-action-secondary-inverted), + ), + link: ( + hover: ( + color: var(--color-action-secondary-hover-lighten), + ), + ), + close: ( + hover: ( + color: var(--color-action-secondary-hover-lighten), + ), + ), +); + +$label-inverse-success: ( + background-color: $success, + border-color: $success, + close: ( + hover: ( + color: $success-l2, + ), + ), + color: $white, + hover: ( + background-color: $success, + border-color: $success, + color: $white, + ), + link: ( + hover: ( + color: $success-l2, + ), + ), +); + +$label-inverse-info: ( + background-color: $info, + border-color: $info, + color: $white, + hover: ( + background-color: $info, + border-color: $info, + color: $white, + ), + link: ( + hover: ( + color: $info-l2, + ), + ), + close: ( + hover: ( + color: $info-l2, + ), + ), +); + +$label-inverse-warning: ( + background-color: $warning, + border-color: $warning, + close: ( + hover: ( + color: $warning-l2, + ), + ), + color: $white, + hover: ( + background-color: $warning, + border-color: $warning, + color: $white, + ), + link: ( + hover: ( + color: $warning-l2, + ), + ), +); + +$label-inverse-danger: ( + background-color: $danger, + border-color: $danger, + close: ( + hover: ( + color: $danger-l2, + ), + ), + color: $white, + hover: ( + background-color: $danger, + border-color: $danger, + color: $white, + ), + link: ( + hover: ( + color: $danger-l2, + ), + ), +); + +$label-inverse-light: ( + background-color: var(--color-neutral-1), + border-color: var(--color-neutral-1), + close: ( + hover: ( + color: var(--color-neutral-7), + ), + ), + color: var(--color-neutral-6), + hover: ( + background-color: var(--color-neutral-1), + border-color: var(--color-neutral-1), + color: var(--color-neutral-6), + ), + link: ( + hover: ( + color: var(--color-neutral-7), + ), + ), +); + +$label-inverse-dark: ( + background-color: var(--color-neutral-6), + border-color: var(--color-neutral-6), + close: ( + hover: ( + color: var(--color-neutral-3), + ), + ), + color: var(--color-neutral-1), + hover: ( + background-color: var(--color-neutral-6), + border-color: var(--color-neutral-6), + color: var(--color-neutral-1), + ), + link: ( + hover: ( + color: var(--color-neutral-3), + ), + ), +); + +// Label Tonal + +$label-tonal-primary: ( + background-color: var(--color-action-primary-hover-lighten), + border-color: transparent, + close: ( + hover: ( + color: var(--color-action-primary-hover), + ), + ), + color: var(--color-action-primary-default), + hover: ( + background-color: var(--color-action-primary-hover), + border-color: transparent, + color: var(--color-action-primary-inverted), + ), + link: ( + hover: ( + color: var(--color-action-primary-hover), + ), + ), +); + +$label-tonal-secondary: ( + background-color: var(--color-action-secondary-hover-lighten), + border-color: transparent, + close: ( + hover: ( + color: var(--color-action-secondary-hover), + ), + ), + color: var(--color-action-secondary-default), + hover: ( + background-color: var(--color-action-secondary-hover), + border-color: transparent, + color: var(--color-action-secondary-inverted), + ), + link: ( + hover: ( + color: var(--color-action-secondary-hover), + ), + ), +); + +$label-tonal-success: ( + background-color: $success-l2, + border-color: transparent, + close: ( + hover: ( + color: $success-d2, + ), + ), + color: $success, + hover: ( + background-color: $success-l2, + border-color: transparent, + color: $success, + ), + link: ( + hover: ( + color: $success-d2, + ), + ), +); + +$label-tonal-info: ( + background-color: $info-l2, + border-color: transparent, + color: $info, + hover: ( + background-color: $info-l2, + border-color: transparent, + color: $info, + ), + link: ( + hover: ( + color: $info-d2, + ), + ), + close: ( + hover: ( + color: $info-d2, + ), + ), +); + +$label-tonal-warning: ( + background-color: $warning-l2, + border-color: transparent, + close: ( + hover: ( + color: $warning-d2, + ), + ), + color: $warning, + hover: ( + background-color: $warning-l2, + border-color: transparent, + color: $warning, + ), + link: ( + hover: ( + color: $warning-d2, + ), + ), +); + +$label-tonal-danger: ( + background-color: $danger-l2, + border-color: transparent, + close: ( + hover: ( + color: $danger-d2, + ), + ), + color: $danger, + hover: ( + background-color: $danger-l2, + border-color: transparent, + color: $danger, + ), + link: ( + hover: ( + color: $danger-d2, + ), + ), +); + +$label-tonal-light: ( + background-color: var(--color-neutral-6), + border-color: transparent, + close: ( + hover: ( + color: var(--color-neutral-3), + ), + ), + color: var(--color-neutral-1), + hover: ( + background-color: var(--color-neutral-6), + border-color: transparent, + color: var(--color-neutral-1), + ), + link: ( + hover: ( + color: var(--color-neutral-3), + ), + ), +); + +$label-tonal-dark: ( + background-color: var(--color-neutral-1), + border-color: transparent, + close: ( + hover: ( + color: var(--color-neutral-7), + ), + ), + color: var(--color-neutral-6), + hover: ( + background-color: var(--color-neutral-1), + border-color: transparent, + color: var(--color-neutral-6), + ), + link: ( + hover: ( + color: var(--color-neutral-7), + ), + ), +); + +// Label Borderless + +$label-borderless-primary: ( + border-color: transparent, + close: ( + focus: ( + color: var(--color-action-primary-hover), + ), + hover: ( + color: var(--color-action-primary-hover), + ), + ), + color: var(--color-action-primary-default), + focus: ( + color: var(--color-action-primary-hover), + ), + hover: ( + color: var(--color-action-primary-hover), + ), +); + +$label-borderless-secondary: ( + border-color: transparent, + close: ( + focus: ( + color: var(--color-action-secondary-hover), + ), + hover: ( + color: var(--color-action-secondary-hover), + ), + ), + color: var(--color-action-secondary-default), + focus: ( + color: var(--color-action-secondary-hover), + ), + hover: ( + color: var(--color-action-secondary-hover), + ), +); + +$label-borderless-success-hover-color: $success-d1; + +$label-borderless-success: ( + border-color: transparent, + close: ( + focus: ( + color: $label-borderless-success-hover-color, + ), + hover: ( + color: $label-borderless-success-hover-color, + ), + ), + color: $success, + focus: ( + color: $label-borderless-success-hover-color, + ), + hover: ( + color: $label-borderless-success-hover-color, + ), +); + +$label-borderless-info-hover-color: $info-d1; + +$label-borderless-info: ( + border-color: transparent, + close: ( + focus: ( + color: $label-borderless-info-hover-color, + ), + hover: ( + color: $label-borderless-info-hover-color, + ), + ), + color: $info, + focus: ( + color: $label-borderless-info-hover-color, + ), + hover: ( + color: $label-borderless-info-hover-color, + ), +); + +$label-borderless-warning-hover-color: $warning-d1; + +$label-borderless-warning: ( + border-color: transparent, + close: ( + focus: ( + color: $label-borderless-warning-hover-color, + ), + hover: ( + color: $label-borderless-warning-hover-color, + ), + ), + color: $warning, + focus: ( + color: $label-borderless-warning-hover-color, + ), + hover: ( + color: $label-borderless-warning-hover-color, + ), +); + +$label-borderless-danger-hover-color: $danger-d1; + +$label-borderless-danger: ( + border-color: transparent, + close: ( + focus: ( + color: $label-borderless-danger-hover-color, + ), + hover: ( + color: $label-borderless-danger-hover-color, + ), + ), + color: $danger, + focus: ( + color: $label-borderless-danger-hover-color, + ), + hover: ( + color: $label-borderless-danger-hover-color, + ), +); + +$label-borderless-light: ( + border-color: transparent, + close: ( + focus: ( + color: var(--color-neutral-3), + ), + hover: ( + color: var(--color-neutral-3), + ), + ), + color: var(--color-neutral-1), + focus: ( + color: var(--color-neutral-1), + ), + hover: ( + color: var(--color-neutral-1), + ), +); + +$label-borderless-dark: ( + border-color: transparent, + close: ( + focus: ( + color: var(--color-neutral-10), + ), + hover: ( + color: var(--color-neutral-10), + ), + ), + color: var(--color-neutral-6), + focus: ( + color: var(--color-neutral-6), + ), + hover: ( + color: var(--color-neutral-6), + ), +); + +$label-palette: ( + tonal-primary: $label-tonal-primary, + tonal-secondary: $label-tonal-secondary, + tonal-success: $label-tonal-success, + tonal-info: $label-tonal-info, + tonal-warning: $label-tonal-warning, + tonal-danger: $label-tonal-danger, + tonal-light: $label-tonal-light, + tonal-dark: $label-tonal-dark, + borderless-primary: $label-borderless-primary, + borderless-secondary: $label-borderless-secondary, + borderless-success: $label-borderless-success, + borderless-info: $label-borderless-info, + borderless-warning: $label-borderless-warning, + borderless-danger: $label-borderless-danger, + borderless-light: $label-borderless-light, + borderless-dark: $label-borderless-dark, +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_links.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_links.scss new file mode 100644 index 0000000..3b58159 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_links.scss @@ -0,0 +1,6 @@ +$link-visited: ( + visited: ( + color: var(--link-visited-color), + text-decoration: var(--link-visited-text-decoration), + ), +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_loaders.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_loaders.scss new file mode 100644 index 0000000..7e05c50 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_loaders.scss @@ -0,0 +1,19 @@ +// Loading Icon Dotted + +$loading-animation: ( + ball-0-color: $gray-600, + ball-1-color: $gray-500, + ball-2-color: $gray-400, + ball-3-color: $gray-300, + ball-4-color: $gray-200, + ball-5-color: $gray-100, +); + +$loading-animation-light: ( + ball-0-color: $white, + ball-1-color: $gray-100, + ball-2-color: $gray-200, + ball-3-color: $gray-300, + ball-4-color: $gray-400, + ball-5-color: $gray-500, +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_modals.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_modals.scss new file mode 100644 index 0000000..42dbf72 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_modals.scss @@ -0,0 +1,42 @@ +$header-close: ( + color: var(--color-action-neutral-default), + hover-color: var(--color-action-neutral-hover), + focus-color: var(--color-action-neutral-active), + disabled-color: var(--color-action-neutral-disabled), +); + +// Modal Success + +$modal-success: ( + header-bg: $success-l2, + header-border-color: $success, + header-color: $success, + header-close: $header-close, +); + +// Modal Info + +$modal-info: ( + header-bg: $info-l2, + header-border-color: $info, + header-color: $info, + header-close: $header-close, +); + +// Modal Warning + +$modal-warning: ( + header-bg: $warning-l2, + header-border-color: $warning, + header-color: $warning, + header-close: $header-close, +); + +// Modal Danger + +$modal-danger: ( + header-bg: $danger-l2, + header-border-color: $danger, + header-color: $danger, + header-close: $header-close, +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_multi_step_nav.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_multi_step_nav.scss new file mode 100644 index 0000000..21a4258 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_multi_step_nav.scss @@ -0,0 +1,7 @@ +$multi-step-divider-active-bg: var(--color-action-primary-default); +$multi-step-icon-active-bg: var(--color-action-primary-default); +$multi-step-icon-active-color: var(--color-action-primary-inverted); +$multi-step-icon-border-radius: $rounded-circle-border-radius; +$multi-step-icon-complete-color: #fff; +$multi-step-icon-font-size: var(--text-paragraph-font-size); +$multi-step-title-font-size: var(--text-paragraph-font-size); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_navs.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_navs.scss new file mode 100644 index 0000000..542b4e2 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_navs.scss @@ -0,0 +1,415 @@ +// Nav Base + +$nav-base-link: ( + after: ( + bottom: 0, + content: none, + display: block, + position: absolute, + left: 0, + right: 0, + width: auto, + ), +); + +// Nav Primary + +$nav-underline-link: ( + background-color: var(--tab-primary-item-background-color), + border-color: var(--tab-primary-item-border-color), + border-radius: var(--tab-primary-item-border-radius), + border-style: solid, + border-bottom-width: var(--tab-primary-horizontal-item-border-bottom-width), + border-left-width: var(--tab-primary-horizontal-item-border-left-width), + border-right-width: var(--tab-primary-horizontal-item-border-right-width), + border-top-width: var(--tab-primary-horizontal-item-border-top-width), + color: var(--tab-primary-item-color), + font-size: var(--tab-primary-item-font-size), + font-weight: var(--tab-primary-item-font-weight), + line-height: var(--tab-primary-item-line-height), + padding: var(--tab-primary-horizontal-item-padding-y) + var(--tab-primary-horizontal-item-padding-x), + active-class: ( + background-color: var(--tab-primary-item-background-color-active), + border-color: var(--tab-primary-item-border-color-active), + box-shadow: var(--tab-primary-item-box-shadow-active), + color: var(--tab-primary-item-color-active), + font-weight: var(--tab-primary-item-font-weight-active), + after: ( + background-color: var(--tab-primary-item-active-bar-color-active), + height: var(--tab-primary-item-active-bar-thickness), + content: '', + ), + inline-item: ( + color: var(--tab-primary-item-icon-color-active), + ), + ), + after: ( + border-radius: var(--tab-primary-item-active-bar-border-radius), + height: var(--tab-primary-item-active-bar-thickness), + width: var(--tab-primary-horizontal-item-active-bar-width), + ), + disabled: ( + border: 0, + background-color: var(--tab-primary-item-background-color-disabled), + color: var(--tab-primary-item-color-disabled), + font-weight: var(--tab-secondary-item-font-weight), + after: ( + content: none, + ), + inline-item: ( + color: var(--tab-primary-item-icon-color-disabled), + ), + ), + hover: ( + background-color: var(--tab-primary-item-background-color-hover), + border-color: var(--tab-primary-item-border-color-hover), + color: var(--tab-primary-item-color-hover), + box-shadow: var(--tab-primary-item-box-shadow-hover), + font-weight: var(--tab-primary-item-font-weight), + after: ( + background-color: var(--tab-primary-item-active-bar-color-hover), + content: '', + ), + inline-item: ( + color: var(--tab-primary-item-icon-color-hover), + ), + ), + inline-item: ( + color: var(--tab-primary-item-icon-color), + font-size: var(--tab-primary-item-icon-font-size), + margin-y: var(--tab-primary-item-inline-item-spacer-y), + ), + inline-item-after: ( + margin-left: var(--tab-primary-item-inline-item-spacer-x), + ), + inline-item-before: ( + margin-right: var(--tab-primary-item-inline-item-spacer-x), + ), +); + +$nav-underline-link-active-bar-top: ( + border-bottom-width: var(--tab-primary-horizontal-item-border-top-width), + border-left-width: var(--tab-primary-horizontal-item-border-left-width), + border-right-width: var(--tab-primary-horizontal-item-border-right-width), + border-top-width: var(--tab-primary-horizontal-item-border-bottom-width), + active-class: ( + border-bottom-color: transparent, + ), + after: ( + top: 0, + height: var(--tab-primary-item-active-bar-thickness), + width: var(--tab-primary-horizontal-item-active-bar-width), + ), +); + +$nav-underline-link-vertical: ( + border-bottom-width: var(--tab-primary-vertical-item-border-bottom-width), + border-left-width: var(--tab-primary-vertical-item-border-left-width), + border-right-width: var(--tab-primary-vertical-item-border-right-width), + border-top-width: var(--tab-primary-vertical-item-border-top-width), + padding: var(--tab-primary-vertical-item-padding-y) + var(--tab-primary-vertical-item-padding-x), + active-class: ( + border-right-color: transparent, + ), + after: ( + top: 0, + height: var(--tab-primary-vertical-item-active-bar-height), + width: var(--tab-primary-item-active-bar-thickness), + ), +); + +// Nav Secondary + +$nav-secondary-link: map-deep-merge( + ( + background-color: var(--tab-secondary-item-background-color), + border-color: var(--tab-secondary-item-border-color), + border-radius: var(--tab-secondary-item-border-radius), + border-style: solid, + border-bottom-width: + var(--tab-secondary-horizontal-item-border-bottom-width), + border-left-width: + var(--tab-secondary-horizontal-item-border-left-width), + border-right-width: + var(--tab-secondary-horizontal-item-border-right-width), + border-top-width: var(--tab-secondary-horizontal-item-border-top-width), + color: var(--tab-secondary-item-color), + font-size: var(--tab-secondary-item-font-size), + font-weight: var(--tab-secondary-item-font-weight), + line-height: var(--tab-secondary-item-line-height), + padding: var(--tab-secondary-horizontal-item-padding-y) + var(--tab-secondary-horizontal-item-padding-x), + active-class: ( + background-color: var(--tab-secondary-item-background-color-active), + border-color: var(--tab-secondary-item-border-color-active), + box-shadow: var(--tab-secondary-item-box-shadow-active), + color: var(--tab-secondary-item-color-active), + font-weight: var(--tab-secondary-item-font-weight-active), + after: ( + content: '', + ), + inline-item: ( + color: var(--tab-secondary-item-icon-color-active), + ), + ), + after: ( + background-color: var(--tab-secondary-item-active-bar-color-active), + border-radius: var(--tab-secondary-item-active-bar-border-radius), + height: var(--tab-secondary-item-active-bar-thickness), + width: var(--tab-secondary-horizontal-item-active-bar-width), + ), + disabled: ( + border: 0, + background-color: + var(--tab-secondary-item-background-color-disabled), + color: var(--tab-secondary-item-color-disabled), + font-weight: var(--tab-secondary-item-font-weight), + after: ( + content: none, + ), + inline-item: ( + color: var(--tab-secondary-item-icon-color-disabled), + ), + ), + hover: ( + background-color: var(--tab-secondary-item-background-color-hover), + border-color: var(--tab-secondary-item-border-color-hover), + color: var(--tab-secondary-item-color-hover), + box-shadow: var(--tab-secondary-item-box-shadow-hover), + after: ( + background-color: + var(--tab-secondary-item-active-bar-color-hover), + content: '', + ), + inline-item: ( + color: var(--tab-secondary-item-icon-color-hover), + ), + ), + inline-item: ( + color: var(--tab-secondary-item-icon-color), + font-size: var(--tab-secondary-item-icon-font-size), + margin-y: var(--tab-secondary-item-inline-item-spacer-y), + ), + inline-item-after: ( + margin-left: var(--tab-secondary-item-inline-item-spacer-x), + ), + inline-item-before: ( + margin-right: var(--tab-secondary-item-inline-item-spacer-x), + ), + ), + $nav-base-link +); + +$nav-secondary-link-active-bar-top: ( + active-class: ( + border-bottom-color: transparent, + ), + after: ( + top: 0, + width: var(--tab-secondary-horizontal-item-active-bar-width), + ), +); + +$nav-secondary-link-vertical: ( + border-bottom-width: var(--tab-secondary-vertical-item-border-top-width), + border-left-width: var(--tab-secondary-vertical-item-border-left-width), + border-right-width: var(--tab-secondary-vertical-item-border-right-width), + border-top-width: var(--tab-secondary-vertical-item-border-bottom-width), + padding: var(--tab-secondary-vertical-item-padding-y) + var(--tab-secondary-vertical-item-padding-x), + active-class: ( + border-right-color: transparent, + ), + after: ( + top: 0, + height: var(--tab-secondary-vertical-item-active-bar-height), + width: var(--tab-secondary-item-active-bar-thickness), + ), +); + +// Nav Tertiary + +$nav-tertiary-link: map-deep-merge( + ( + background-color: var(--tab-tertiary-item-background-color), + border-color: var(--tab-tertiary-item-border-color), + border-radius: var(--tab-tertiary-item-border-radius), + border-style: solid, + border-bottom-width: + var(--tab-tertiary-horizontal-item-border-bottom-width), + border-left-width: var(--tab-tertiary-horizontal-item-border-left-width), + border-right-width: + var(--tab-tertiary-horizontal-item-border-right-width), + border-top-width: var(--tab-tertiary-horizontal-item-border-top-width), + color: var(--tab-tertiary-item-color), + font-size: var(--tab-tertiary-item-font-size), + font-weight: var(--tab-tertiary-item-font-weight), + margin-top: 0.0625rem, + padding: var(--tab-tertiary-horizontal-item-padding-y) + var(--tab-tertiary-horizontal-item-padding-x), + line-height: var(--tab-tertiary-item-line-height), + z-index: 1, + active-class: ( + background-color: var(--tab-tertiary-item-background-color-active), + border-color: var(--tab-tertiary-item-border-color-active), + box-shadow: var(--tab-tertiary-item-box-shadow-active), + color: var(--tab-tertiary-item-color-active), + font-weight: var(--tab-tertiary-item-font-weight-active), + z-index: 2, + after: ( + content: '', + ), + inline-item: ( + color: var(--tab-tertiary-item-icon-color-disabled), + ), + ), + after: ( + background-color: var(--tab-tertiary-item-active-bar-color-active), + border-radius: var(--tab-tertiary-item-active-bar-border-radius), + height: var(--tab-tertiary-item-active-bar-thickness), + width: var(--tab-tertiary-horizontal-item-active-bar-width), + ), + disabled: ( + border: 0, + background-color: var(--tab-tertiary-item-background-color-disabled), + color: var(--tab-tertiary-item-color-disabled), + font-weight: var(--tab-tertiary-item-font-weight), + after: ( + content: none, + ), + inline-item: ( + color: var(--tab-tertiary-item-icon-color-disabled), + ), + ), + hover: ( + background-color: var(--tab-tertiary-item-background-color-hover), + border-color: var(--tab-tertiary-item-border-color-hover), + color: var(--tab-tertiary-item-color-hover), + box-shadow: var(--tab-tertiary-item-box-shadow-hover), + font-weight: var(--tab-tertiary-item-font-weight), + after: ( + background-color: + var(--tab-tertiary-item-active-bar-color-hover), + content: '', + ), + inline-item: ( + color: var(--tab-tertiary-item-icon-color-hover), + ), + ), + inline-item: ( + color: var(--tab-tertiary-item-icon-color), + font-size: var(--tab-tertiary-item-icon-font-size), + margin-y: var(--tab-tertiary-item-inline-item-spacer-y), + active-class: ( + color: var(--tab-tertiary-item-icon-color-active), + ), + ), + inline-item-after: ( + margin-left: var(--tab-tertiary-item-inline-item-spacer-x), + ), + inline-item-before: ( + margin-right: var(--tab-tertiary-item-inline-item-spacer-x), + ), + ), + $nav-base-link +); + +$nav-tertiary-link-active-bar-top: ( + border-bottom-width: var(--tab-tertiary-horizontal-item-border-top-width), + border-left-width: var(--tab-tertiary-horizontal-item-border-left-width), + border-right-width: var(--tab-tertiary-horizontal-item-border-right-width), + border-top-width: var(--tab-tertiary-horizontal-item-border-bottom-width), + active-class: ( + border-bottom-color: transparent, + ), + after: ( + top: 0, + ), +); + +$nav-tertiary-link-vertical: ( + border-bottom-width: var(--tab-tertiary-vertical-item-border-bottom-width), + border-left-width: var(--tab-tertiary-vertical-item-border-left-width), + border-right-width: var(--tab-tertiary-vertical-item-border-right-width), + border-top-width: var(--tab-tertiary-vertical-item-border-top-width), + padding: var(--tab-tertiary-vertical-item-padding-y) + var(--tab-tertiary-vertical-item-padding-x), + after: ( + height: var(--tab-tertiary-vertical-item-active-bar-height), + top: 0, + width: var(--tab-tertiary-item-active-bar-thickness), + ), + active-class: ( + border-right-color: transparent, + ), +); + +// Nav Segment + +$nav-segment: ( + background-color: var(--tab-segment-background-color), + border-color: var(--tab-segment-border-color), + border-radius: var(--tab-segment-border-radius), + border-width: var(--tab-segment-border-width), + border-style: solid, + padding: var(--tab-segment-padding-x) var(--tab-segment-padding-y), + width: fit-content, +); + +$nav-segment-link: ( + background-color: var(--tab-segment-item-background-color), + border-color: var(--tab-segment-item-border-color), + border-radius: var(--tab-segment-item-border-radius), + border-width: var(--tab-segment-item-border-width), + color: var(--tab-segment-item-color), + font-size: var(--tab-segment-item-font-size), + font-weight: var(--tab-segment-item-font-weight), + line-height: var(--tab-segment-item-line-height), + padding: var(--tab-segment-item-padding-x) var(--tab-segment-item-padding-y), + active-class: ( + background-color: var(--tab-segment-item-background-color-active), + border-color: var(--tab-segment-item-border-color-active), + box-shadow: var(--tab-segment-item-box-shadow-active), + color: var(--tab-segment-item-color-active), + font-weight: var(--tab-segment-item-font-weight-active), + inline-item: ( + color: var(--tab-segment-item-icon-color-active), + ), + ), + disabled: ( + background-color: var(--tab-segment-item-background-color-disabled), + border-color: var(--tab-segment-item-border-color-disabled), + color: var(--tab-segment-item-color-disabled), + inline-item: ( + color: var(--tab-segment-item-icon-color-disabled), + ), + ), + hover: ( + background-color: var(--tab-segment-item-background-color-hover), + border-color: var(--tab-segment-item-border-color-hover), + box-shadow: var(--tab-segment-item-box-shadow-hover), + color: var(--tab-segment-item-color-hover), + inline-item: ( + color: var(--tab-segment-item-icon-color-hover), + ), + ), + inline-item: ( + color: var(--tab-segment-item-icon-color), + font-size: var(--tab-segment-item-icon-font-size), + margin-y: var(--tab-segment-item-inline-item-spacer-y), + ), + inline-item-after: ( + margin-left: var(--tab-segment-item-inline-item-spacer-x), + ), + inline-item-before: ( + margin-right: var(--tab-segment-item-inline-item-spacer-x), + ), +); + +// Nav Vertical + +$nav-vertical: ( + flex-direction: column, +); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_stickers.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_stickers.scss new file mode 100644 index 0000000..185438a --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_stickers.scss @@ -0,0 +1,25 @@ +// Sticker Variants + +$sticker-primary-bg: var(--color-action-primary-inverted); +$sticker-primary-color: var(--color-action-primary-default); + +$sticker-secondary-bg: var(--color-action-secondary-inverted); +$sticker-secondary-color: var(--color-action-secondary-default); + +$sticker-info-bg: $white; +$sticker-info-color: $info; + +$sticker-success-bg: $white; +$sticker-success-color: $success; + +$sticker-warning-bg: $white; +$sticker-warning-color: $warning; + +$sticker-danger-bg: $white; +$sticker-danger-color: $danger; + +$sticker-light-bg: var(--color-action-neutral-default); +$sticker-light-color: var(--color-action-neutral-inverted); + +$sticker-dark-bg: var(--color-action-neutral-inverted); +$sticker-dark-color: var(--color-action-neutral-default); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_tables.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_tables.scss new file mode 100644 index 0000000..8ab8e7a --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_tables.scss @@ -0,0 +1,128 @@ +// Table + +$table-accent-bg: var(--table-row-background-color-alternate); +$table-bg: var(--table-row-background-color); +$table-border-color: var(--table-border-color); +$table-border-radius: var(--table-border-radius); +$table-border-width: var(--table-border-width); +$table-cell-padding: var(--table-cell-padding-y) var(--table-cell-padding-x); +$table-cell-padding-sm: var(--table-sm-cell-padding-y) + var(--table-sm-cell-padding-x); +$table-color: var(--table-color); +$table-font-size: var(--table-font-size); +$table-hover-bg: var(--table-row-background-color-hover); +$table-hover-color: var(--table-row-color-hover); + +$c-table-base: ( + font-weight: var(--table-font-weight), +); + +$c-table-base-cell: ( + height: var(--table-cell-min-height), +); + +$table-title: ( + color: var(--table-title-color), + font-size: var(--table-title-font-size), + font-weight: var(--table-title-font-weight), + line-height: var(--table-title-line-height), +); + +$table-title-link: ( + color: var(--table-title-link-color), + text-decoration: var(--table-title-link-text-decoration), + hover: ( + color: var(--table-title-link-color-hover), + text-decoration: var(--table-title-link-text-decoration-hover), + ), +); + +// Table Head + +$table-head-bg: var(--table-header-background-color); +$table-head-color: var(--table-header-color); + +// Table List + +$table-list-active-bg: var(--table-row-background-color-active); +$table-list-border-color: $table-border-color; +$table-list-border-radius: $table-border-radius; +$table-list-border-x-width: var(--table-border-width); +$table-list-border-y-width: var(--table-border-width); +$table-list-color: $table-color; + +$c-table-list: ( + box-shadow: var(--table-box-shadow), +); + +$c-table-list-cell: ( + border-color: $table-border-color, + border-top-width: var(--table-border-width), + line-height: var(--table-line-height), +); + +$c-table-list-tfoot: ( + background-color: var(--table-row-background-color), +); + +$c-table-list-tbody: ( + background-color: var(--table-row-background-color), +); + +$table-list-title: $table-title; +$table-list-title-link: $table-title-link; + +// Table List Head + +$table-list-head-bg: $table-head-bg; +$table-list-head-font-size: var(--table-header-font-size); +$table-list-head-font-weight: var(--table-header-font-weight); +$table-list-head-height: var(--table-header-cell-min-height); +$table-list-head-vertical-alignment: var(--table-header-vertical-align); + +// Table Spaced + +$table-spaced: ( + border-collapse: separate, + border-radius: 0, + border-spacing: 0 var(--table-spaced-row-border-spacing), + box-shadow: none, + table-cell-end: ( + border-bottom-right-radius: + clay-enable-rounded(var(--table-spaced-row-border-radius)), + border-right: var(--table-spaced-row-border-width) solid + var(--table-spaced-row-border-color), + border-top-right-radius: + clay-enable-rounded(var(--table-spaced-row-border-radius)), + ), + table-cell-start: ( + border-bottom-left-radius: + clay-enable-rounded(var(--table-spaced-row-border-radius)), + border-left: var(--table-spaced-row-border-width) solid + var(--table-spaced-row-border-color), + border-top-left-radius: + clay-enable-rounded(var(--table-spaced-row-border-radius)), + ), + table-row: ( + border-radius: + clay-enable-rounded(var(--table-spaced-row-border-radius)), + box-shadow: var(--table-spaced-row-box-shadow), + ), +); + +$table-spaced-cell: ( + border-bottom: var(--table-spaced-row-border-width) solid + var(--table-spaced-row-border-color), + border-top: var(--table-spaced-row-border-width) solid + var(--table-spaced-row-border-color), +); + +// Table Bordered + +$table-bordered-thead-cell: ( + border-bottom-width: 0, +); + +// Table Image + +$table-img-max-height: var(--table-image-max-height); diff --git a/client-extensions/clarity-theme/src/css/dialect/variables/_toggle_switch.scss b/client-extensions/clarity-theme/src/css/dialect/variables/_toggle_switch.scss new file mode 100644 index 0000000..ad0d51d --- /dev/null +++ b/client-extensions/clarity-theme/src/css/dialect/variables/_toggle_switch.scss @@ -0,0 +1,3 @@ +$toggle-switch-bar-bg: var(--color-action-neutral-default); +$toggle-switch-bar-on-bg: var(--custom-control-border-color); +$toggle-switch-text-font-size: var(--custom-control-label-font-size); diff --git a/client-extensions/clarity-theme/src/css/portlet/_portlet.scss b/client-extensions/clarity-theme/src/css/portlet/_portlet.scss new file mode 100644 index 0000000..fb75cd8 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/portlet/_portlet.scss @@ -0,0 +1,157 @@ +html#{$cadmin-selector} { + .portlet { + &:hover, + &.open { + > .cadmin.portlet-topper { + z-index: 999; + } + } + + > .cadmin.portlet-topper { + font-size: 13.92px; + padding: 0 4px 0 8px; + + @include media-breakpoint-up(md) { + display: block; + white-space: nowrap; + } + + @include media-breakpoint-up(sm) { + right: auto; + } + + .portlet-title-default { + display: inline-block; + line-height: 24px; + vertical-align: middle; + } + + .portlet-name-text { + margin-right: 12px; + } + + .portlet-topper-toolbar { + display: inline-block; + vertical-align: middle; + } + + .portlet-topper-toolbar, + .icon-monospaced { + height: 24px; + line-height: 24px; + width: 24px; + } + + .portlet-topper-toolbar .component-action { + font-size: 14px; + height: 24px; + margin-top: -2px; + width: 24px; + } + } + } + + .portlet-dropzone { + box-shadow: 0 0 0 1px transparent inset; + transition: box-shadow 300ms ease-in-out; + will-change: box-shadow; + } + + .yui3-dd-drop-active-valid .portlet-dropzone { + box-shadow: 0 0 0 1px rgba($cadmin-primary-d2, 0.2) inset; + } + + .yui3-dd-drop-over .portlet-dropzone { + box-shadow: 0 0 0 4px $cadmin-primary-d2 inset; + } +} + +.portlet-layout { + .portlet { + .management-bar, + .navbar-underline { + > .container-fluid-max-xl { + padding-left: 0; + padding-right: 0; + } + } + + .portlet-title-text { + color: map-get($theme-colors, secondary); + font-size: 0.875rem; + font-weight: 600; + line-height: 2.2; + margin-bottom: 0; + text-transform: uppercase; + } + } +} + +.portlet { + > .portlet-topper { + font-size: 0.87rem; + padding: 0 4px 0 8px; + + @include media-breakpoint-up(md) { + display: block; + white-space: nowrap; + } + + @include media-breakpoint-up(sm) { + right: auto; + } + + .portlet-title-default { + display: inline-block; + line-height: 1.5rem; + vertical-align: middle; + } + + .portlet-name-text { + margin-right: 0.75rem; + } + + .portlet-topper-toolbar { + display: inline-block; + vertical-align: middle; + } + + .portlet-topper-toolbar, + .icon-monospaced { + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; + } + + .portlet-topper-toolbar .component-action { + height: 1.5rem; + width: 1.5rem; + } + + .lexicon-icon { + height: 0.875rem; + width: 0.875rem; + } + } + + &:hover, + &.open { + > .portlet-topper { + z-index: 999; + } + } +} + +.portlet-dropzone { + box-shadow: 0 0 0 1px transparent inset; + transition: box-shadow 300ms ease-in-out; + will-change: box-shadow; + + .yui3-dd-drop-active-valid & { + box-shadow: 0 0 0 1px rgba($primary-d2, 0.2) inset; + } + + .yui3-dd-drop-over & { + box-shadow: 0 0 0 4px $primary-d2 inset; + } +} diff --git a/client-extensions/clarity-theme/src/css/portlet/_portlet_decorators.scss b/client-extensions/clarity-theme/src/css/portlet/_portlet_decorators.scss new file mode 100644 index 0000000..2bb4867 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/portlet/_portlet_decorators.scss @@ -0,0 +1,29 @@ +.portlet-decorate { + .portlet { + margin-bottom: 24px; + } + + .portlet-content { + border-radius: 0.25rem; + } +} + +.portlet-barebone, +.portlet-borderless { + .panel { + background-color: transparent; + + &.card { + border-color: #cdced9; + box-shadow: none; + } + } + + .panel-default { + border-color: #cdced9; + } + + .widget-mode-detail { + background-color: transparent; + } +} diff --git a/client-extensions/clarity-theme/src/css/portlet/_variables_custom.scss b/client-extensions/clarity-theme/src/css/portlet/_variables_custom.scss new file mode 100644 index 0000000..7acaf40 --- /dev/null +++ b/client-extensions/clarity-theme/src/css/portlet/_variables_custom.scss @@ -0,0 +1,32 @@ +$portlet-content-border-radius: var(--portlet-content-border-radius, 0); + +$portlet-decorate-bg: #fff; +$portlet-decorate-border-color: $secondary-l3; +$portlet-decorate-border-style: solid; +$portlet-decorate-border-width: 1px; +$portlet-decorate-padding: 1.5rem; + +$portlet-header-margin-bottom: var( + --portlet-header-margin-bottom, + calc(var(--spacer) * #{map-get($spacers, 5)}) +); + +$portlet-topper-bg: var(--portlet-topper-bg, var(--primary, $primary)); +$portlet-topper-border: var( + --portlet-topper-border, + var(--portlet-topper-bg, $primary) +); +$portlet-topper-border-radius: var( + --portlet-topper-border-radius, + var(--border-radius-sm, 2px) var(--border-radius-sm, 2px) 0 0 +); +$portlet-topper-color: var(--portlet-topper-color, var(--white, $white)); +$portlet-topper-link-color: var( + --portlet-topper-link-color, + var(--portlet-topper-color, $white) +); +$portlet-topper-link-hover-color: var(--portlet-topper-link-color, $white); + +$widget-resume-line-clamp: 10; +$widget-resume-line-clamp-image: 3; +$widget-resume-line-height: 1.35rem; diff --git a/client-extensions/clarity-theme/src/frontend-token-definition.json b/client-extensions/clarity-theme/src/frontend-token-definition.json new file mode 100644 index 0000000..a8df485 --- /dev/null +++ b/client-extensions/clarity-theme/src/frontend-token-definition.json @@ -0,0 +1,7991 @@ +{ + "frontendTokenCategories": [ + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "#187474", + "editorType": "ColorPicker", + "label": "Primary Button Background Color", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-primary-bg" + } + ], + "name": "btnPrimaryBgColor", + "type": "String" + }, + { + "defaultValue": "#ffffff", + "editorType": "ColorPicker", + "label": "Button Text Color", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-primary-color" + } + ], + "name": "btnPrimaryTextColor", + "type": "String" + } + ], + "label": "Buttons", + "name": "buttons" + }, + { + "frontendTokens": [ + { + "defaultValue": "#041515", + "editorType": "ColorPicker", + "label": "Card Title Color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-title-color" + } + ], + "name": "cardTitleColor", + "type": "String" + }, + { + "defaultValue": "#1D8C8C", + "editorType": "ColorPicker", + "label": "Card Category Color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-category-color" + } + ], + "name": "cardCategoryColor", + "type": "String" + } + ], + "label": "Cards", + "name": "cards" + } + ], + "label": "clarity-kids-components", + "name": "clarityKidsComponents" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "#000", + "editorType": "ColorPicker", + "label": "color-brand-primary-darken-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-darken-5" + } + ], + "name": "colorBrandPrimaryDarken5", + "type": "String" + }, + { + "defaultValue": "#110532", + "editorType": "ColorPicker", + "label": "color-brand-primary-darken-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-darken-4" + } + ], + "name": "colorBrandPrimaryDarken4", + "type": "String" + }, + { + "defaultValue": "#210963", + "editorType": "ColorPicker", + "label": "color-brand-primary-darken-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-darken-3" + } + ], + "name": "colorBrandPrimaryDarken3", + "type": "String" + }, + { + "defaultValue": "#320e95", + "editorType": "ColorPicker", + "label": "color-brand-primary-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-darken-2" + } + ], + "name": "colorBrandPrimaryDarken2", + "type": "String" + }, + { + "defaultValue": "#4212c7", + "editorType": "ColorPicker", + "label": "color-brand-primary-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-darken-1" + } + ], + "name": "colorBrandPrimaryDarken1", + "type": "String" + }, + { + "defaultValue": "#5924eb", + "editorType": "ColorPicker", + "label": "color-brand-primary", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary" + } + ], + "name": "colorBrandPrimary", + "type": "String" + }, + { + "defaultValue": "#7549ee", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-1" + } + ], + "name": "colorBrandPrimaryLighten1", + "type": "String" + }, + { + "defaultValue": "#906df2", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-2" + } + ], + "name": "colorBrandPrimaryLighten2", + "type": "String" + }, + { + "defaultValue": "#ac92f5", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-3" + } + ], + "name": "colorBrandPrimaryLighten3", + "type": "String" + }, + { + "defaultValue": "#c8b6f8", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-4" + } + ], + "name": "colorBrandPrimaryLighten4", + "type": "String" + }, + { + "defaultValue": "#e3dbfc", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-5" + } + ], + "name": "colorBrandPrimaryLighten5", + "type": "String" + }, + { + "defaultValue": "#fbfaff", + "editorType": "ColorPicker", + "label": "color-brand-primary-lighten-6", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-primary-lighten-6" + } + ], + "name": "colorBrandPrimaryLighten6", + "type": "String" + } + ], + "label": "brand-primary", + "name": "brandPrimary" + }, + { + "frontendTokens": [ + { + "defaultValue": "#312300", + "editorType": "ColorPicker", + "label": "color-brand-secondary-darken-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-darken-5" + } + ], + "name": "colorBrandSecondaryDarken5", + "type": "String" + }, + { + "defaultValue": "#614600FF", + "editorType": "ColorPicker", + "label": "color-brand-secondary-darken-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-darken-4" + } + ], + "name": "colorBrandSecondaryDarken4", + "type": "String" + }, + { + "defaultValue": "#926800", + "editorType": "ColorPicker", + "label": "color-brand-secondary-darken-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-darken-3" + } + ], + "name": "colorBrandSecondaryDarken3", + "type": "String" + }, + { + "defaultValue": "#c28b00", + "editorType": "ColorPicker", + "label": "color-brand-secondary-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-darken-2" + } + ], + "name": "colorBrandSecondaryDarken2", + "type": "String" + }, + { + "defaultValue": "#f3ae00", + "editorType": "ColorPicker", + "label": "color-brand-secondary-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-darken-1" + } + ], + "name": "colorBrandSecondaryDarken1", + "type": "String" + }, + { + "defaultValue": "#ffc124", + "editorType": "ColorPicker", + "label": "color-brand-secondary", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary" + } + ], + "name": "colorBrandSecondary", + "type": "String" + }, + { + "defaultValue": "#ffcb48", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-1" + } + ], + "name": "colorBrandSecondaryLighten1", + "type": "String" + }, + { + "defaultValue": "#ffd66d", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-2" + } + ], + "name": "colorBrandSecondaryLighten2", + "type": "String" + }, + { + "defaultValue": "#ffe092", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-3" + } + ], + "name": "colorBrandSecondaryLighten3", + "type": "String" + }, + { + "defaultValue": "#ffeab6", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-4" + } + ], + "name": "colorBrandSecondaryLighten4", + "type": "String" + }, + { + "defaultValue": "#fff5db", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-5" + } + ], + "name": "colorBrandSecondaryLighten5", + "type": "String" + }, + { + "defaultValue": "#fffbf0", + "editorType": "ColorPicker", + "label": "color-brand-secondary-lighten-6", + "mappings": [ + { + "type": "cssVariable", + "value": "color-brand-secondary-lighten-6" + } + ], + "name": "colorBrandSecondaryLighten6", + "type": "String" + } + ], + "label": "brand-secondary", + "name": "brandSecondary" + }, + { + "frontendTokens": [ + { + "defaultValue": "#1d1c21", + "editorType": "ColorPicker", + "label": "color-neutral-10", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-10" + } + ], + "name": "colorNeutral10", + "type": "String" + }, + { + "defaultValue": "#332b4a", + "editorType": "ColorPicker", + "label": "color-neutral-9", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-9" + } + ], + "name": "colorNeutral9", + "type": "String" + }, + { + "defaultValue": "#3f3851", + "editorType": "ColorPicker", + "label": "color-neutral-8", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-8" + } + ], + "name": "colorNeutral8", + "type": "String" + }, + { + "defaultValue": "#5a5469", + "editorType": "ColorPicker", + "label": "color-neutral-7", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-7" + } + ], + "name": "colorNeutral7", + "type": "String" + }, + { + "defaultValue": "#716c7f", + "editorType": "ColorPicker", + "label": "color-neutral-6", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-6" + } + ], + "name": "colorNeutral6", + "type": "String" + }, + { + "defaultValue": "#898593", + "editorType": "ColorPicker", + "label": "color-neutral-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-5" + } + ], + "name": "colorNeutral5", + "type": "String" + }, + { + "defaultValue": "#a7a3b2", + "editorType": "ColorPicker", + "label": "color-neutral-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-4" + } + ], + "name": "colorNeutral4", + "type": "String" + }, + { + "defaultValue": "#dcd9e2", + "editorType": "ColorPicker", + "label": "color-neutral-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-3" + } + ], + "name": "colorNeutral3", + "type": "String" + }, + { + "defaultValue": "#eeecf3", + "editorType": "ColorPicker", + "label": "color-neutral-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-2" + } + ], + "name": "colorNeutral2", + "type": "String" + }, + { + "defaultValue": "#f7f6f9", + "editorType": "ColorPicker", + "label": "color-neutral-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-1" + } + ], + "name": "colorNeutral1", + "type": "String" + }, + { + "defaultValue": "#fff", + "editorType": "ColorPicker", + "label": "color-neutral-0", + "mappings": [ + { + "type": "cssVariable", + "value": "color-neutral-0" + } + ], + "name": "colorNeutral0", + "type": "String" + } + ], + "label": "neutral", + "name": "neutral" + }, + { + "frontendTokens": [ + { + "defaultValue": "#eb2453", + "editorType": "ColorPicker", + "label": "color-accent-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-1" + } + ], + "name": "colorAccent1", + "type": "String" + }, + { + "defaultValue": "#ffeaef", + "editorType": "ColorPicker", + "label": "color-accent-1-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-1-lighten" + } + ], + "name": "colorAccent1Lighten", + "type": "String" + }, + { + "defaultValue": "#a7e204", + "editorType": "ColorPicker", + "label": "color-accent-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-2" + } + ], + "name": "colorAccent2", + "type": "String" + }, + { + "defaultValue": "#f0ffc6", + "editorType": "ColorPicker", + "label": "color-accent-2-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-2-lighten" + } + ], + "name": "colorAccent2Lighten", + "type": "String" + }, + { + "defaultValue": "#c70d95", + "editorType": "ColorPicker", + "label": "color-accent-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-3" + } + ], + "name": "colorAccent3", + "type": "String" + }, + { + "defaultValue": "#ffeaf9", + "editorType": "ColorPicker", + "label": "color-accent-3-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-3-lighten" + } + ], + "name": "colorAccent3Lighten", + "type": "String" + }, + { + "defaultValue": "#221874", + "editorType": "ColorPicker", + "label": "color-accent-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-4" + } + ], + "name": "colorAccent4", + "type": "String" + }, + { + "defaultValue": "#e9e8f1", + "editorType": "ColorPicker", + "label": "color-accent-4-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-4-lighten" + } + ], + "name": "colorAccent4Lighten", + "type": "String" + }, + { + "defaultValue": "#bc24eb", + "editorType": "ColorPicker", + "label": "color-accent-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-5" + } + ], + "name": "colorAccent5", + "type": "String" + }, + { + "defaultValue": "#f6daff", + "editorType": "ColorPicker", + "label": "color-accent-5-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-5-lighten" + } + ], + "name": "colorAccent5Lighten", + "type": "String" + }, + { + "defaultValue": "#1ce4b5", + "editorType": "ColorPicker", + "label": "color-accent-6", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-6" + } + ], + "name": "colorAccent6", + "type": "String" + }, + { + "defaultValue": "#defff7", + "editorType": "ColorPicker", + "label": "color-accent-6-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-accent-6-lighten" + } + ], + "name": "colorAccent6Lighten", + "type": "String" + } + ], + "label": "accents", + "name": "accents" + }, + { + "frontendTokens": [ + { + "defaultValue": "#5924eb", + "editorType": "ColorPicker", + "label": "color-action-primary-default", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-default" + } + ], + "name": "colorActionPrimaryDefault", + "type": "String" + }, + { + "defaultValue": "#4429b3", + "editorType": "ColorPicker", + "label": "color-action-primary-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-hover" + } + ], + "name": "colorActionPrimaryHover", + "type": "String" + }, + { + "defaultValue": "#3c249e", + "editorType": "ColorPicker", + "label": "color-action-primary-active", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-active" + } + ], + "name": "colorActionPrimaryActive", + "type": "String" + }, + { + "defaultValue": "#a696e4", + "editorType": "ColorPicker", + "label": "color-action-primary-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-disabled" + } + ], + "name": "colorActionPrimaryDisabled", + "type": "String" + }, + { + "defaultValue": "#f2f0fa", + "editorType": "ColorPicker", + "label": "color-action-primary-hover-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-hover-lighten" + } + ], + "name": "colorActionPrimaryHoverLighten", + "type": "String" + }, + { + "defaultValue": "#ece9f5", + "editorType": "ColorPicker", + "label": "color-action-primary-active-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-active-lighten" + } + ], + "name": "colorActionPrimaryActiveLighten", + "type": "String" + }, + { + "defaultValue": "#fff", + "editorType": "ColorPicker", + "label": "color-action-primary-inverted", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-inverted" + } + ], + "name": "colorActionPrimaryInverted", + "type": "String" + }, + { + "defaultValue": "#ffffff19", + "editorType": "ColorPicker", + "label": "color-action-primary-inverted-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-inverted-hover" + } + ], + "name": "colorActionPrimaryInvertedHover", + "type": "String" + }, + { + "defaultValue": "#ffffff80", + "editorType": "ColorPicker", + "label": "color-action-primary-inverted-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-primary-inverted-disabled" + } + ], + "name": "colorActionPrimaryInvertedDisabled", + "type": "String" + } + ], + "label": "primary-actions", + "name": "actionPrimary" + }, + { + "frontendTokens": [ + { + "defaultValue": "#ed7105", + "editorType": "ColorPicker", + "label": "color-action-secondary-default", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-default" + } + ], + "name": "colorActionSecondaryDefault", + "type": "String" + }, + { + "defaultValue": "#d26404", + "editorType": "ColorPicker", + "label": "color-action-secondary-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-hover" + } + ], + "name": "colorActionSecondaryHover", + "type": "String" + }, + { + "defaultValue": "#b95804", + "editorType": "ColorPicker", + "label": "color-action-secondary-active", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-active" + } + ], + "name": "colorActionSecondaryActive", + "type": "String" + }, + { + "defaultValue": "#f6b882", + "editorType": "ColorPicker", + "label": "color-action-secondary-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-disabled" + } + ], + "name": "colorActionSecondaryDisabled", + "type": "String" + }, + { + "defaultValue": "#faf0e6", + "editorType": "ColorPicker", + "label": "color-action-secondary-hover-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-hover-lighten" + } + ], + "name": "colorActionSecondaryHoverLighten", + "type": "String" + }, + { + "defaultValue": "#f1decd", + "editorType": "ColorPicker", + "label": "color-action-secondary-active-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-active-lighten" + } + ], + "name": "colorActionSecondaryActiveLighten", + "type": "String" + }, + { + "defaultValue": "#fff", + "editorType": "ColorPicker", + "label": "color-action-secondary-inverted", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-inverted" + } + ], + "name": "colorActionSecondaryInverted", + "type": "String" + }, + { + "defaultValue": "#ffffff19", + "editorType": "ColorPicker", + "label": "color-action-secondary-inverted-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-inverted-hover" + } + ], + "name": "colorActionSecondaryInvertedHover", + "type": "String" + }, + { + "defaultValue": "#ffffff80", + "editorType": "ColorPicker", + "label": "color-action-secondary-inverted-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-secondary-inverted-disabled" + } + ], + "name": "colorActionSecondaryInvertedDisabled", + "type": "String" + } + ], + "label": "secondary-actions", + "name": "actionSecondary" + }, + { + "frontendTokens": [ + { + "defaultValue": "#2b3a4b", + "editorType": "ColorPicker", + "label": "color-action-neutral-default", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-default" + } + ], + "name": "colorActionNeutralDefault", + "type": "String" + }, + { + "defaultValue": "#34465b", + "editorType": "ColorPicker", + "label": "color-action-neutral-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-hover" + } + ], + "name": "colorActionNeutralHover", + "type": "String" + }, + { + "defaultValue": "#3d536b", + "editorType": "ColorPicker", + "label": "color-action-neutral-active", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-active" + } + ], + "name": "colorActionNeutralActive", + "type": "String" + }, + { + "defaultValue": "#959ca5", + "editorType": "ColorPicker", + "label": "color-action-neutral-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-disabled" + } + ], + "name": "colorActionNeutralDisabled", + "type": "String" + }, + { + "defaultValue": "#eaebed", + "editorType": "ColorPicker", + "label": "color-action-neutral-hover-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-hover-lighten" + } + ], + "name": "colorActionNeutralHoverLighten", + "type": "String" + }, + { + "defaultValue": "#d5d8db", + "editorType": "ColorPicker", + "label": "color-action-neutral-active-lighten", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-active-lighten" + } + ], + "name": "colorActionNeutralActiveLighten", + "type": "String" + }, + { + "defaultValue": "#fff", + "editorType": "ColorPicker", + "label": "color-action-neutral-inverted", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-inverted" + } + ], + "name": "colorActionNeutralInverted", + "type": "String" + }, + { + "defaultValue": "#ffffff19", + "editorType": "ColorPicker", + "label": "color-action-neutral-inverted-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-inverted-hover" + } + ], + "name": "colorActionNeutralInvertedHover", + "type": "String" + }, + { + "defaultValue": "#ffffff80", + "editorType": "ColorPicker", + "label": "color-action-neutral-inverted-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "color-action-neutral-inverted-disabled" + } + ], + "name": "colorActionNeutralInvertedDisabled", + "type": "String" + } + ], + "label": "neutral-actions", + "name": "actionNeutral" + }, + { + "frontendTokens": [ + { + "defaultValue": "#25561e", + "editorType": "ColorPicker", + "label": "color-state-success-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-success-darken-2" + } + ], + "name": "colorStateSuccessDarken2", + "type": "String" + }, + { + "defaultValue": "#38802c", + "editorType": "ColorPicker", + "label": "color-state-success-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-success-darken-1" + } + ], + "name": "colorStateSuccessDarken1", + "type": "String" + }, + { + "defaultValue": "#4aab3b", + "editorType": "ColorPicker", + "label": "color-state-success", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-success" + } + ], + "name": "colorStateSuccess", + "type": "String" + }, + { + "defaultValue": "#9bd193", + "editorType": "ColorPicker", + "label": "color-state-success-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-success-lighten-1" + } + ], + "name": "colorStateSuccessLighten1", + "type": "String" + }, + { + "defaultValue": "#edf7eb", + "editorType": "ColorPicker", + "label": "color-state-success-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-success-lighten-2" + } + ], + "name": "colorStateSuccessLighten2", + "type": "String" + }, + { + "defaultValue": "#703600", + "editorType": "ColorPicker", + "label": "color-state-warning-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-warning-darken-2" + } + ], + "name": "colorStateWarningDarken2", + "type": "String" + }, + { + "defaultValue": "#a85100", + "editorType": "ColorPicker", + "label": "color-state-warning-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-warning-darken-1" + } + ], + "name": "colorStateWarningDarken1", + "type": "String" + }, + { + "defaultValue": "#e06c00", + "editorType": "ColorPicker", + "label": "color-state-warning", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-warning" + } + ], + "name": "colorStateWarning", + "type": "String" + }, + { + "defaultValue": "#eeae73", + "editorType": "ColorPicker", + "label": "color-state-warning-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-warning-lighten-1" + } + ], + "name": "colorStateWarningLighten1", + "type": "String" + }, + { + "defaultValue": "#fcf0e6", + "editorType": "ColorPicker", + "label": "color-state-warning-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-warning-lighten-2" + } + ], + "name": "colorStateWarningLighten2", + "type": "String" + }, + { + "defaultValue": "#6d0a0a", + "editorType": "ColorPicker", + "label": "color-state-error-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-error-darken-2" + } + ], + "name": "colorStateErrorDarken2", + "type": "String" + }, + { + "defaultValue": "#a40f0f", + "editorType": "ColorPicker", + "label": "color-state-error-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-error-darken-1" + } + ], + "name": "colorStateErrorDarken1", + "type": "String" + }, + { + "defaultValue": "#da1414", + "editorType": "ColorPicker", + "label": "color-state-error", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-error" + } + ], + "name": "colorStateError", + "type": "String" + }, + { + "defaultValue": "#eb7e7e", + "editorType": "ColorPicker", + "label": "color-state-error-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-error-lighten-1" + } + ], + "name": "colorStateErrorLighten1", + "type": "String" + }, + { + "defaultValue": "#fbe8e8", + "editorType": "ColorPicker", + "label": "color-state-error-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-error-lighten-2" + } + ], + "name": "colorStateErrorLighten2", + "type": "String" + }, + { + "defaultValue": "#172d56", + "editorType": "ColorPicker", + "label": "color-state-info-darken-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-info-darken-2" + } + ], + "name": "colorStateInfoDarken2", + "type": "String" + }, + { + "defaultValue": "#234481", + "editorType": "ColorPicker", + "label": "color-state-info-darken-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-info-darken-1" + } + ], + "name": "colorStateInfoDarken1", + "type": "String" + }, + { + "defaultValue": "#2e5aac", + "editorType": "ColorPicker", + "label": "color-state-info", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-info" + } + ], + "name": "colorStateInfo", + "type": "String" + }, + { + "defaultValue": "#8ca4d1", + "editorType": "ColorPicker", + "label": "color-state-info-lighten-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-info-lighten-1" + } + ], + "name": "colorStateInfoLighten1", + "type": "String" + }, + { + "defaultValue": "#eaeff7", + "editorType": "ColorPicker", + "label": "color-state-info-lighten-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-state-info-lighten-2" + } + ], + "name": "colorStateInfoLighten2", + "type": "String" + } + ], + "label": "states", + "name": "states" + }, + { + "frontendTokens": [ + { + "defaultValue": "#4d2ec9", + "editorType": "ColorPicker", + "label": "color-chart-0", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-0" + } + ], + "name": "colorChart0", + "type": "String" + }, + { + "defaultValue": "#fdcc4a", + "editorType": "ColorPicker", + "label": "color-chart-1", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-1" + } + ], + "name": "colorChart1", + "type": "String" + }, + { + "defaultValue": "#ad9ee9", + "editorType": "ColorPicker", + "label": "color-chart-2", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-2" + } + ], + "name": "colorChart2", + "type": "String" + }, + { + "defaultValue": "#fe8856", + "editorType": "ColorPicker", + "label": "color-chart-3", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-3" + } + ], + "name": "colorChart3", + "type": "String" + }, + { + "defaultValue": "#002c62", + "editorType": "ColorPicker", + "label": "color-chart-4", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-4" + } + ], + "name": "colorChart4", + "type": "String" + }, + { + "defaultValue": "#78cc88", + "editorType": "ColorPicker", + "label": "color-chart-5", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-5" + } + ], + "name": "colorChart5", + "type": "String" + }, + { + "defaultValue": "#912600", + "editorType": "ColorPicker", + "label": "color-chart-6", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-6" + } + ], + "name": "colorChart6", + "type": "String" + }, + { + "defaultValue": "#ff8585", + "editorType": "ColorPicker", + "label": "color-chart-7", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-7" + } + ], + "name": "colorChart7", + "type": "String" + }, + { + "defaultValue": "#41a0a6", + "editorType": "ColorPicker", + "label": "color-chart-8", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-8" + } + ], + "name": "colorChart8", + "type": "String" + }, + { + "defaultValue": "#3a6ba1", + "editorType": "ColorPicker", + "label": "color-chart-9", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-9" + } + ], + "name": "colorChart9", + "type": "String" + }, + { + "defaultValue": "#4d006e", + "editorType": "ColorPicker", + "label": "color-chart-10", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-10" + } + ], + "name": "colorChart10", + "type": "String" + }, + { + "defaultValue": "#8a6a00", + "editorType": "ColorPicker", + "label": "color-chart-11", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-11" + } + ], + "name": "colorChart11", + "type": "String" + }, + { + "defaultValue": "#00520a", + "editorType": "ColorPicker", + "label": "color-chart-12", + "mappings": [ + { + "type": "cssVariable", + "value": "color-chart-12" + } + ], + "name": "colorChart12", + "type": "String" + } + ], + "label": "charts", + "name": "charts" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-brand-primary-lighten-3)", + "editorType": "ColorPicker", + "label": "color-focus", + "mappings": [ + { + "type": "cssVariable", + "value": "color-focus" + } + ], + "name": "colorFocus", + "type": "String" + } + ], + "label": "global", + "name": "global" + } + ], + "label": "color-system", + "name": "colorSystem" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "label": "font-family-base", + "mappings": [ + { + "type": "cssVariable", + "value": "font-family-base" + } + ], + "name": "fontFamilyBase", + "type": "String" + }, + { + "defaultValue": "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", + "label": "font-family-monospace", + "mappings": [ + { + "type": "cssVariable", + "value": "font-family-monospace" + } + ], + "name": "fontFamilyMonospace", + "type": "String" + }, + { + "defaultValue": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "label": "font-family-sans-serif", + "mappings": [ + { + "type": "cssVariable", + "value": "font-family-sans-serif" + } + ], + "name": "fontFamilySansSerif", + "type": "String" + } + ], + "label": "font-family", + "name": "fontFamily" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "font-size-base", + "mappings": [ + { + "type": "cssVariable", + "value": "font-size-base" + } + ], + "name": "fontSizeBase", + "type": "String" + } + ], + "label": "font-size", + "name": "fontSize" + }, + { + "frontendTokens": [ + { + "defaultValue": "lighter", + "label": "font-weight-lighter", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-lighter" + } + ], + "name": "fontWeightLighter", + "type": "String" + }, + { + "defaultValue": "300", + "label": "font-weight-light", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-light" + } + ], + "name": "fontWeightLight", + "type": "String" + }, + { + "defaultValue": "500", + "label": "font-weight-normal", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-normal" + } + ], + "name": "fontWeightNormal", + "type": "String" + }, + { + "defaultValue": "600", + "label": "font-weight-semi-bold", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-semi-bold" + } + ], + "name": "fontWeightSemiBold", + "type": "String" + }, + { + "defaultValue": "700", + "label": "font-weight-bold", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-bold" + } + ], + "name": "fontWeightBold", + "type": "String" + }, + { + "defaultValue": "800", + "label": "font-weight-bolder", + "mappings": [ + { + "type": "cssVariable", + "value": "font-weight-bolder" + } + ], + "name": "fontWeightBolder", + "type": "String" + } + ], + "label": "font-weight", + "name": "fontWeight" + }, + { + "frontendTokens": [ + { + "defaultValue": "1.25rem", + "label": "text-paragraph-lg-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-lg-font-size" + } + ], + "name": "textParagraphLgFontSize", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "text-paragraph-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-font-size" + } + ], + "name": "textParagraphFontSize", + "type": "String" + }, + { + "defaultValue": "0.8125rem", + "label": "text-paragraph-sm-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-sm-font-size" + } + ], + "name": "textParagraphSmFontSize", + "type": "String" + }, + { + "defaultValue": "0.6875rem", + "label": "text-paragraph-xs-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-xs-font-size" + } + ], + "name": "textParagraphXsFontSize", + "type": "String" + }, + { + "defaultValue": "0.5625rem", + "label": "text-paragraph-xxs-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-xxs-font-size" + } + ], + "name": "textParagraphXxsFontSize", + "type": "String" + }, + { + "defaultValue": "24px", + "label": "text-paragraph-lg-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-lg-line-height" + } + ], + "name": "textParagraphLgLineHeight", + "type": "String" + }, + { + "defaultValue": "24px", + "label": "text-paragraph-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-line-height" + } + ], + "name": "textParagraphLineHeight", + "type": "String" + }, + { + "defaultValue": "20px", + "label": "text-paragraph-sm-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-sm-line-height" + } + ], + "name": "textParagraphSmLineHeight", + "type": "String" + }, + { + "defaultValue": "20px", + "label": "text-paragraph-xs-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-xs-line-height" + } + ], + "name": "textParagraphXsLineHeight", + "type": "String" + }, + { + "defaultValue": "16px", + "label": "text-paragraph-xxs-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-paragraph-xxs-line-height" + } + ], + "name": "textParagraphXxsLineHeight", + "type": "String" + } + ], + "label": "paragraphs", + "name": "paragraphs" + }, + { + "frontendTokens": [ + { + "defaultValue": "2.3125rem", + "label": "h1-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h1-font-size" + } + ], + "name": "h1FontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bold)", + "label": "h1-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h1-font-weight" + } + ], + "name": "h1FontWeight", + "type": "String" + }, + { + "defaultValue": "2rem", + "label": "h2-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h2-font-size" + } + ], + "name": "h2FontSize", + "type": "String" + }, + { + "defaultValue": "var(--h1-font-weight)", + "label": "h2-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h2-font-weight" + } + ], + "name": "h2FontWeight", + "type": "String" + }, + { + "defaultValue": "1.75rem", + "label": "h3-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h3-font-size" + } + ], + "name": "h3FontSize", + "type": "String" + }, + { + "defaultValue": "var(--h1-font-weight)", + "label": "h3-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h3-font-weight" + } + ], + "name": "h3FontWeight", + "type": "String" + }, + { + "defaultValue": "1.5rem", + "label": "h4-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h4-font-size" + } + ], + "name": "h4FontSize", + "type": "String" + }, + { + "defaultValue": "var(--h1-font-weight)", + "label": "h4-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h4-font-weight" + } + ], + "name": "h4FontWeight", + "type": "String" + }, + { + "defaultValue": "1.125rem", + "label": "h5-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h5-font-size" + } + ], + "name": "h5FontSize", + "type": "String" + }, + { + "defaultValue": "var(--h1-font-weight)", + "label": "h5-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h5-font-weight" + } + ], + "name": "h5FontWeight", + "type": "String" + }, + { + "defaultValue": "0.875rem", + "label": "h6-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "h6-font-size" + } + ], + "name": "h6FontSize", + "type": "String" + }, + { + "defaultValue": "var(--h1-font-weight)", + "label": "h6-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "h6-font-weight" + } + ], + "name": "h6FontWeight", + "type": "String" + }, + { + "defaultValue": "1.2", + "label": "headings-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "headings-line-height" + } + ], + "name": "headingsLineHeight", + "type": "String" + } + ], + "label": "headings", + "name": "headings" + }, + { + "frontendTokens": [ + { + "defaultValue": "1.2", + "label": "display-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "display-line-height" + } + ], + "name": "displayLineHeight", + "type": "String" + }, + { + "defaultValue": "6rem", + "label": "display-1-size", + "mappings": [ + { + "type": "cssVariable", + "value": "display1-size" + } + ], + "name": "display1Size", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "display-1-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "display1-weight" + } + ], + "name": "display1Weight", + "type": "String" + }, + { + "defaultValue": "5.5rem", + "label": "display-2-size", + "mappings": [ + { + "type": "cssVariable", + "value": "display2-size" + } + ], + "name": "display2Size", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "display-2-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "display2-weight" + } + ], + "name": "display2Weight", + "type": "String" + }, + { + "defaultValue": "3.0625rem", + "label": "display-3-size", + "mappings": [ + { + "type": "cssVariable", + "value": "display3-size" + } + ], + "name": "display3Size", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "display-3-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "display3-weight" + } + ], + "name": "display3Weight", + "type": "String" + }, + { + "defaultValue": "2.6875rem", + "label": "display-4-size", + "mappings": [ + { + "type": "cssVariable", + "value": "display4-size" + } + ], + "name": "display4Size", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "display-4-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "display4-weight" + } + ], + "name": "display4Weight", + "type": "String" + } + ], + "label": "displays", + "name": "displays" + }, + { + "frontendTokens": [ + { + "defaultValue": "0.875rem", + "label": "text-small-caps-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-small-caps-font-size" + } + ], + "name": "textSmallCapsFontSize", + "type": "String" + }, + { + "defaultValue": "0.05em", + "label": "text-small-caps-letter-spacing", + "mappings": [ + { + "type": "cssVariable", + "value": "text-small-caps-letter-spacing" + } + ], + "name": "textSmallCapsLetterSpacing", + "type": "String" + }, + { + "defaultValue": "20px", + "label": "text-small-caps-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-small-caps-line-height" + } + ], + "name": "textSmallCapsLineHeight", + "type": "String" + } + ], + "label": "small-caps", + "name": "smallCaps" + }, + { + "frontendTokens": [ + { + "defaultValue": "1.5rem", + "label": "text-link-lg-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-lg-font-size" + } + ], + "name": "textLinkLgFontSize", + "type": "String" + }, + { + "defaultValue": "28px", + "label": "text-link-lg-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-lg-line-height" + } + ], + "name": "textLinkLgLineHeight", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "text-link-md-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-md-font-size" + } + ], + "name": "textLinkMdFontSize", + "type": "String" + }, + { + "defaultValue": "24px", + "label": "text-link-md-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-md-line-height" + } + ], + "name": "textLinkMdLineHeight", + "type": "String" + }, + { + "defaultValue": "0.875rem", + "label": "text-link-sm-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-sm-font-size" + } + ], + "name": "textLinkSmFontSize", + "type": "String" + }, + { + "defaultValue": "20px", + "label": "text-link-sm-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "text-link-sm-line-height" + } + ], + "name": "textLinkSmLineHeight", + "type": "String" + } + ], + "label": "text-links", + "name": "textLinks" + }, + { + "frontendTokens": [ + { + "defaultValue": "1.25rem", + "label": "blockquote-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "blockquote-font-size" + } + ], + "name": "blockquoteFontSize", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-6)", + "editorType": "ColorPicker", + "label": "blockquote-small-color", + "mappings": [ + { + "type": "cssVariable", + "value": "blockquote-small-color" + } + ], + "name": "blockquoteSmallColor", + "type": "String" + }, + { + "defaultValue": "80%", + "label": "blockquote-small-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "blockquote-small-font-size" + } + ], + "name": "blockquoteSmallFontSize", + "type": "String" + }, + { + "defaultValue": "rgba(0, 0, 0, .1)", + "label": "hr-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "hr-border-color" + } + ], + "name": "hrBorderColor", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "hr-border-margin-y", + "mappings": [ + { + "type": "cssVariable", + "value": "hr-border-margin-y" + } + ], + "name": "hrBorderMarginY", + "type": "String" + }, + { + "defaultValue": "1px", + "label": "hr-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "hr-border-width" + } + ], + "name": "hrBorderWidth", + "type": "String" + }, + { + "defaultValue": "1.25rem", + "label": "lead-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "lead-font-size" + } + ], + "name": "leadFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "lead-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "lead-font-weight" + } + ], + "name": "leadFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--color-brand-secondary-lighten-5)", + "label": "marked-text-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "marked-text-background-color" + } + ], + "name": "markedTextBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-4)", + "editorType": "ColorPicker", + "label": "text-muted", + "mappings": [ + { + "type": "cssVariable", + "value": "text-muted" + } + ], + "name": "textMuted", + "type": "String" + } + ], + "label": "other", + "name": "other" + } + ], + "label": "typography", + "name": "typography" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "body-bg", + "mappings": [ + { + "type": "cssVariable", + "value": "body-bg" + } + ], + "name": "bodyBgColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-9)", + "editorType": "ColorPicker", + "label": "body-color", + "mappings": [ + { + "type": "cssVariable", + "value": "body-color" + } + ], + "name": "bodyColor", + "type": "String" + } + ], + "label": "body", + "name": "body" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "link-color", + "mappings": [ + { + "type": "cssVariable", + "value": "link-color" + } + ], + "name": "linkColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "link-hover-color", + "mappings": [ + { + "type": "cssVariable", + "value": "link-hover-color" + } + ], + "name": "linkHoverColor", + "type": "String" + }, + { + "defaultValue": "underline", + "label": "link-hover-text-decoration", + "mappings": [ + { + "type": "cssVariable", + "value": "link-hover-text-decoration" + } + ], + "name": "linkHoverTextDecoration", + "type": "String" + }, + { + "defaultValue": "none", + "label": "link-text-decoration", + "mappings": [ + { + "type": "cssVariable", + "value": "link-text-decoration" + } + ], + "name": "linkTextDecoration", + "type": "String" + }, + { + "defaultValue": "#5E38BA", + "editorType": "ColorPicker", + "label": "link-visited-color", + "mappings": [ + { + "type": "cssVariable", + "value": "link-visited-color" + } + ], + "name": "linkVisitedColor", + "type": "String" + }, + { + "defaultValue": "none", + "label": "link-visited-text-decoration", + "mappings": [ + { + "type": "cssVariable", + "value": "link-visited-text-decoration" + } + ], + "name": "linkVisitedTextDecoration", + "type": "String" + } + ], + "label": "links", + "name": "links" + }, + { + "frontendTokens": [ + { + "defaultValue": "0.25rem", + "label": "border-radius-xs", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-xs" + } + ], + "name": "borderRadiusXs", + "type": "String" + }, + { + "defaultValue": "0.375rem", + "label": "border-radius-sm", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-sm" + } + ], + "name": "borderRadiusSm", + "type": "String" + }, + { + "defaultValue": "0.5rem", + "label": "border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius" + } + ], + "name": "borderRadius", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "border-radius-lg", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-lg" + } + ], + "name": "borderRadiusLg", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "border-radius-xl", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-xl" + } + ], + "name": "borderRadiusXl", + "type": "String" + }, + { + "defaultValue": "1.5rem", + "label": "border-radius-xxl", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-xxl" + } + ], + "name": "borderRadiusXxl", + "type": "String" + }, + { + "defaultValue": "50%", + "label": "border-radius-circle", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-circle" + } + ], + "name": "borderRadiusCircle", + "type": "String" + }, + { + "defaultValue": "50rem", + "label": "border-radius-pill", + "mappings": [ + { + "type": "cssVariable", + "value": "border-radius-pill" + } + ], + "name": "borderRadiusPill", + "type": "String" + } + ], + "label": "border-radius", + "name": "borderRadius" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--elevation-tight-3) rgba(0, 0, 0, .15)", + "label": "box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "box-shadow" + } + ], + "name": "boxShadow", + "type": "String" + }, + { + "defaultValue": "var(--elevation-fluffy-3) rgba(0, 0, 0, .175)", + "label": "box-shadow-lg", + "mappings": [ + { + "type": "cssVariable", + "value": "box-shadow-lg" + } + ], + "name": "boxShadowLg", + "type": "String" + }, + { + "defaultValue": "var(--elevation-tight-1) rgba(0, 0, 0, .075)", + "label": "box-shadow-sm", + "mappings": [ + { + "type": "cssVariable", + "value": "box-shadow-sm" + } + ], + "name": "boxShadowSm", + "type": "String" + } + ], + "label": "box-shadows", + "name": "boxShadows" + }, + { + "frontendTokens": [ + { + "defaultValue": "0 5px 15px", + "label": "elevation-fluffy-1", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-1" + } + ], + "name": "elevationFluffy1", + "type": "String" + }, + { + "defaultValue": "0 6.25px 20px", + "label": "elevation-fluffy-2", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-2" + } + ], + "name": "elevationFluffy2", + "type": "String" + }, + { + "defaultValue": "0 10px 30px", + "label": "elevation-fluffy-3", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-3" + } + ], + "name": "elevationFluffy3", + "type": "String" + }, + { + "defaultValue": "0 10px 35px", + "label": "elevation-fluffy-4", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-4" + } + ], + "name": "elevationFluffy4", + "type": "String" + }, + { + "defaultValue": "0 15px 60px", + "label": "elevation-fluffy-5", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-5" + } + ], + "name": "elevationFluffy5", + "type": "String" + }, + { + "defaultValue": "0 17.5px 70px", + "label": "elevation-fluffy-6", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-6" + } + ], + "name": "elevationFluffy6", + "type": "String" + }, + { + "defaultValue": "0 35px 90px", + "label": "elevation-fluffy-7", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-fluffy-7" + } + ], + "name": "elevationFluffy7", + "type": "String" + }, + { + "defaultValue": "0 1px 3px", + "label": "elevation-tight-1", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-1" + } + ], + "name": "elevationTight1", + "type": "String" + }, + { + "defaultValue": "0 1.25px 4px", + "label": "elevation-tight-2", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-2" + } + ], + "name": "elevationTight2", + "type": "String" + }, + { + "defaultValue": "0 2px 6px", + "label": "elevation-tight-3", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-3" + } + ], + "name": "elevationTight3", + "type": "String" + }, + { + "defaultValue": "0 2px 7px", + "label": "elevation-tight-4", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-4" + } + ], + "name": "elevationTight4", + "type": "String" + }, + { + "defaultValue": "0 3px 12px", + "label": "elevation-tight-5", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-5" + } + ], + "name": "elevationTight5", + "type": "String" + }, + { + "defaultValue": "0 3.5px 14px", + "label": "elevation-tight-6", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-6" + } + ], + "name": "elevationTight6", + "type": "String" + }, + { + "defaultValue": "0 7px 18px", + "label": "elevation-tight-7", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-7" + } + ], + "name": "elevationTight7", + "type": "String" + }, + { + "defaultValue": "0 12px 28px", + "label": "elevation-tight-8", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-8" + } + ], + "name": "elevationTight8", + "type": "String" + }, + { + "defaultValue": "0 13px 36px", + "label": "elevation-tight-9", + "mappings": [ + { + "type": "cssVariable", + "value": "elevation-tight-9" + } + ], + "name": "elevationTight9", + "type": "String" + } + ], + "label": "elevations", + "name": "elevations" + }, + { + "frontendTokens": [ + { + "defaultValue": "100%", + "label": "aspect-ratio-1", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-1" + } + ], + "name": "aspectRatio1", + "type": "String" + }, + { + "defaultValue": "calc(3 / 4 * 100%)", + "label": "aspect-ratio-2", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-2" + } + ], + "name": "aspectRatio2", + "type": "String" + }, + { + "defaultValue": "calc(2 / 3 * 100%)", + "label": "aspect-ratio-3", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-3" + } + ], + "name": "aspectRatio3", + "type": "String" + }, + { + "defaultValue": "calc(5 / 8 * 100%)", + "label": "aspect-ratio-4", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-4" + } + ], + "name": "aspectRatio4", + "type": "String" + }, + { + "defaultValue": "calc(9 / 16 * 100%)", + "label": "aspect-ratio-5", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-5" + } + ], + "name": "aspectRatio5", + "type": "String" + }, + { + "defaultValue": "calc(1 / 2 * 100%)", + "label": "aspect-ratio-6", + "mappings": [ + { + "type": "cssVariable", + "value": "aspect-ratio-6" + } + ], + "name": "aspectRatio6", + "type": "String" + } + ], + "label": "aspect-ratios", + "name": "aspectRatios" + }, + { + "frontendTokens": [ + { + "defaultValue": "0.2s ease-in-out", + "label": "transition-base", + "mappings": [ + { + "type": "cssVariable", + "value": "transition-base" + } + ], + "name": "transitionBase", + "type": "String" + }, + { + "defaultValue": "0.35s ease", + "label": "transition-collapse", + "mappings": [ + { + "type": "cssVariable", + "value": "transition-collapse" + } + ], + "name": "transitionCollapse", + "type": "String" + }, + { + "defaultValue": "0.15s linear", + "label": "transition-fade", + "mappings": [ + { + "type": "cssVariable", + "value": "transition-fade" + } + ], + "name": "transitionFade", + "type": "String" + } + ], + "label": "transitions", + "name": "transitions" + } + ], + "label": "general", + "name": "general" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "0", + "label": "spacer-0", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-0" + } + ], + "name": "spacer0", + "type": "String" + }, + { + "defaultValue": "0.25rem", + "label": "spacer-1", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-1" + } + ], + "name": "spacer1", + "type": "String" + }, + { + "defaultValue": "0.5rem", + "label": "spacer-2", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-2" + } + ], + "name": "spacer2", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "spacer-3", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-3" + } + ], + "name": "spacer3", + "type": "String" + }, + { + "defaultValue": "1.5rem", + "label": "spacer-4", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-4" + } + ], + "name": "spacer4", + "type": "String" + }, + { + "defaultValue": "3rem", + "label": "spacer-5", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-5" + } + ], + "name": "spacer5", + "type": "String" + }, + { + "defaultValue": "4.5rem", + "label": "spacer-6", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-6" + } + ], + "name": "spacer6", + "type": "String" + }, + { + "defaultValue": "6rem", + "label": "spacer-7", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-7" + } + ], + "name": "spacer7", + "type": "String" + }, + { + "defaultValue": "7.5rem", + "label": "spacer-8", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-8" + } + ], + "name": "spacer8", + "type": "String" + }, + { + "defaultValue": "9rem", + "label": "spacer-9", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-9" + } + ], + "name": "spacer9", + "type": "String" + }, + { + "defaultValue": "10rem", + "label": "spacer-10", + "mappings": [ + { + "type": "cssVariable", + "value": "spacer-10" + } + ], + "name": "spacer10", + "type": "String" + } + ], + "label": "spacing", + "name": "spacing" + } + ], + "label": "spacing", + "name": "spacing" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "540px", + "label": "small", + "mappings": [ + { + "type": "cssVariable", + "value": "container-max-sm" + } + ], + "name": "containerMaxSm", + "type": "String" + }, + { + "defaultValue": "720px", + "label": "medium", + "mappings": [ + { + "type": "cssVariable", + "value": "container-max-md" + } + ], + "name": "containerMaxMd", + "type": "String" + }, + { + "defaultValue": "960px", + "label": "large", + "mappings": [ + { + "type": "cssVariable", + "value": "container-max-lg" + } + ], + "name": "containerMaxLg", + "type": "String" + }, + { + "defaultValue": "1248px", + "label": "extra-large", + "mappings": [ + { + "type": "cssVariable", + "value": "container-max-xl" + } + ], + "name": "containerMaxXl", + "type": "String" + } + ], + "label": "container-max-widths", + "name": "containerMaxWidths" + } + ], + "label": "layout", + "name": "layout" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "0.0625rem", + "label": "btn-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-border-width" + } + ], + "name": "btnBorderWidth", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-semi-bold)", + "label": "btn-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-font-weight" + } + ], + "name": "btnFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-1)", + "label": "btn-inline-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-inline-item-spacer-x" + } + ], + "name": "btnInlineItemSpacerX", + "type": "String" + } + ], + "label": "general", + "name": "buttonGeneral" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius-sm)", + "label": "btn-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-border-radius" + } + ], + "name": "btnBorderRadius", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "btn-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-font-size" + } + ], + "name": "btnFontSize", + "type": "String" + }, + { + "defaultValue": "var(--btn-font-size)", + "label": "btn-inline-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-inline-item-font-size" + } + ], + "name": "btnInlineItemFontSize", + "type": "String" + }, + { + "defaultValue": "24px", + "label": "btn-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-line-height" + } + ], + "name": "btnLineHeight", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "btn-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-padding-x" + } + ], + "name": "btnPaddingX", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "btn-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-padding-y" + } + ], + "name": "btnPaddingY", + "type": "String" + } + ], + "label": "button", + "name": "button" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius)", + "label": "btn-lg-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-border-radius" + } + ], + "name": "btnLgBorderRadius", + "type": "String" + }, + { + "defaultValue": "1.125rem", + "label": "btn-lg-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-font-size" + } + ], + "name": "btnLgFontSize", + "type": "String" + }, + { + "defaultValue": "var(--btn-lg-font-size)", + "label": "btn-lg-inline-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-inline-item-font-size" + } + ], + "name": "btnLgInlineItemFontSize", + "type": "String" + }, + { + "defaultValue": "28px", + "label": "btn-lg-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-line-height" + } + ], + "name": "btnLgLineHeight", + "type": "String" + }, + { + "defaultValue": "1.125rem", + "label": "btn-lg-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-padding-x" + } + ], + "name": "btnLgPaddingX", + "type": "String" + }, + { + "defaultValue": "0.875rem", + "label": "btn-lg-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-lg-padding-y" + } + ], + "name": "btnLgPaddingY", + "type": "String" + } + ], + "label": "button-large", + "name": "buttonLarge" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius-xs)", + "label": "btn-sm-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-border-radius" + } + ], + "name": "btnSmBorderRadius", + "type": "String" + }, + { + "defaultValue": "0.875rem", + "label": "btn-sm-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-font-size" + } + ], + "name": "btnSmFontSize", + "type": "String" + }, + { + "defaultValue": "var(--btn-sm-font-size)", + "label": "btn-sm-inline-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-inline-item-font-size" + } + ], + "name": "btnSmInlineItemFontSize", + "type": "String" + }, + { + "defaultValue": "20px", + "label": "btn-sm-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-line-height" + } + ], + "name": "btnSmLineHeight", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "btn-sm-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-padding-x" + } + ], + "name": "btnSmPaddingX", + "type": "String" + }, + { + "defaultValue": "0.5rem", + "label": "btn-sm-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "btn-sm-padding-y" + } + ], + "name": "btnSmPaddingY", + "type": "String" + } + ], + "label": "button-small", + "name": "buttonSmall" + } + ], + "label": "buttons", + "name": "buttons" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "var(--spacer-4)", + "label": "card-aspect-ratio-item-offset", + "mappings": [ + { + "type": "cssVariable", + "value": "card-aspect-ratio-item-offset" + } + ], + "name": "cardAspectRatioItemOffset", + "type": "String" + }, + { + "defaultValue": "var(--border-radius)", + "label": "card-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "card-border-radius" + } + ], + "name": "cardBorderRadius", + "type": "String" + } + ], + "label": "general", + "name": "cardGeneral" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--spacer-4)", + "label": "card-body-padding-bottom", + "mappings": [ + { + "type": "cssVariable", + "value": "card-body-padding-bottom" + } + ], + "name": "cardBodyPaddingBottom", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "card-body-padding-left", + "mappings": [ + { + "type": "cssVariable", + "value": "card-body-padding-left" + } + ], + "name": "cardBodyPaddingLeft", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "card-body-padding-right", + "mappings": [ + { + "type": "cssVariable", + "value": "card-body-padding-right" + } + ], + "name": "cardBodyPaddingRight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "card-body-padding-top", + "mappings": [ + { + "type": "cssVariable", + "value": "card-body-padding-top" + } + ], + "name": "cardBodyPaddingTop", + "type": "String" + } + ], + "label": "card-body", + "name": "cardBody" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--aspect-ratio-3)", + "label": "card-vertical-aspect-ratio-default", + "mappings": [ + { + "type": "cssVariable", + "value": "card-vertical-aspect-ratio-default" + } + ], + "name": "cardVerticalAspectRatioDefault", + "type": "String" + } + ], + "label": "vertical-cards", + "name": "verticalCards" + }, + { + "frontendTokens": [ + { + "defaultValue": "24rem", + "label": "card-autofit-col-lg-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-autofit-col-lg-width" + } + ], + "name": "cardAutofitColLgWidth", + "type": "String" + }, + { + "defaultValue": "16rem", + "label": "card-autofit-col-md-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-autofit-col-md-width" + } + ], + "name": "cardAutofitColMdWidth", + "type": "String" + }, + { + "defaultValue": "8rem", + "label": "card-autofit-col-sm-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-autofit-col-sm-width" + } + ], + "name": "cardAutofitColSmWidth", + "type": "String" + }, + { + "defaultValue": "var(--aspect-ratio-1)", + "label": "card-horizontal-aspect-ratio-default", + "mappings": [ + { + "type": "cssVariable", + "value": "card-horizontal-aspect-ratio-default" + } + ], + "name": "cardHorizontalAspectRatioDefault", + "type": "String" + } + ], + "label": "horizontal-cards", + "name": "horizontalCards" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-elevated-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-background-color" + } + ], + "name": "cardElevatedBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-elevated-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-background-color-active" + } + ], + "name": "cardElevatedBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-elevated-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-background-color-hover" + } + ], + "name": "cardElevatedBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "card-elevated-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-border-color" + } + ], + "name": "cardElevatedBorderColor", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "card-elevated-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-border-color-active" + } + ], + "name": "cardElevatedBorderColorActive", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "card-elevated-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-border-color-hover" + } + ], + "name": "cardElevatedBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0rem", + "label": "card-elevated-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-border-width" + } + ], + "name": "cardElevatedBorderWidth", + "type": "String" + }, + { + "defaultValue": "var(--elevation-tight-3) rgba(89, 36, 235, 0.22)", + "label": "card-elevated-box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-box-shadow" + } + ], + "name": "cardElevatedBoxShadow", + "type": "String" + }, + { + "defaultValue": "var(--elevation-tight-3) rgba(89, 36, 235, 0.22)", + "label": "card-elevated-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-box-shadow-active" + } + ], + "name": "cardElevatedBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "var(--elevation-tight-7) rgba(89, 36, 235, 0.17)", + "label": "card-elevated-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-elevated-box-shadow-hover" + } + ], + "name": "cardElevatedBoxShadowHover", + "type": "String" + } + ], + "label": "elevated-cards", + "name": "elevatedCards" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-outlined-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-background-color" + } + ], + "name": "cardOutlinedBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-outlined-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-background-color-active" + } + ], + "name": "cardOutlinedBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "card-outlined-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-background-color-hover" + } + ], + "name": "cardOutlinedBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "card-outlined-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-border-color" + } + ], + "name": "cardOutlinedBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active)", + "editorType": "ColorPicker", + "label": "card-outlined-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-border-color-active" + } + ], + "name": "cardOutlinedBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "card-outlined-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-border-color-hover" + } + ], + "name": "cardOutlinedBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "card-outlined-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-border-width" + } + ], + "name": "cardOutlinedBorderWidth", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-outlined-box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-box-shadow" + } + ], + "name": "cardOutlinedBoxShadow", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-outlined-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-box-shadow-active" + } + ], + "name": "cardOutlinedBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-outlined-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-outlined-box-shadow-hover" + } + ], + "name": "cardOutlinedBoxShadowHover", + "type": "String" + } + ], + "label": "outlined-cards", + "name": "outlinedCards" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "card-flat-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-background-color" + } + ], + "name": "cardFlatBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "card-flat-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-background-color-active" + } + ], + "name": "cardFlatBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "card-flat-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-background-color-hover" + } + ], + "name": "cardFlatBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "card-flat-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-border-color" + } + ], + "name": "cardFlatBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active)", + "editorType": "ColorPicker", + "label": "card-flat-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-border-color-active" + } + ], + "name": "cardFlatBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "card-flat-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-border-color-hover" + } + ], + "name": "cardFlatBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "card-flat-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-border-width" + } + ], + "name": "cardFlatBorderWidth", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-flat-box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-box-shadow" + } + ], + "name": "cardFlatBoxShadow", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-flat-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-box-shadow-active" + } + ], + "name": "cardFlatBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "card-flat-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "card-flat-box-shadow-hover" + } + ], + "name": "cardFlatBoxShadowHover", + "type": "String" + } + ], + "label": "flat-cards", + "name": "flatCards" + } + ], + "label": "cards", + "name": "cards" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "form-input-label-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-color" + } + ], + "name": "formInputLabelColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "form-input-label-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-color-disabled" + } + ], + "name": "formInputLabelColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "form-input-label-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-font-size" + } + ], + "name": "formInputLabelFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "form-input-label-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-font-weight" + } + ], + "name": "formInputLabelFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "form-input-label-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-line-height" + } + ], + "name": "formInputLabelLineHeight", + "type": "String" + }, + { + "defaultValue": "0.25rem", + "label": "form-input-label-margin-bottom", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-margin-bottom" + } + ], + "name": "formInputLabelMarginBottom", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "form-input-label-margin-left", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-margin-left" + } + ], + "name": "formInputLabelMarginLeft", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "form-input-label-margin-right", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-margin-right" + } + ], + "name": "formInputLabelMarginRight", + "type": "String" + }, + { + "defaultValue": "0.25rem", + "label": "form-input-label-margin-top", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-margin-top" + } + ], + "name": "formInputLabelMarginTop", + "type": "String" + }, + { + "defaultValue": "var(--color-state-error)", + "label": "form-input-label-reference-mark-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-label-reference-mark-color" + } + ], + "name": "formInputLabelReferenceMarkColor", + "type": "String" + } + ], + "label": "form-input-label", + "name": "formInputLabel" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "form-input-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-background-color" + } + ], + "name": "formInputBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-5)", + "editorType": "ColorPicker", + "label": "form-input-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-border-color" + } + ], + "name": "formInputBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-2)", + "editorType": "ColorPicker", + "label": "form-input-border-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-border-color-disabled" + } + ], + "name": "formInputBorderColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--border-radius)", + "label": "form-input-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-border-radius" + } + ], + "name": "formInputBorderRadius", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "form-input-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-border-width" + } + ], + "name": "formInputBorderWidth", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "form-input-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-color" + } + ], + "name": "formInputColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-4)", + "editorType": "ColorPicker", + "label": "form-input-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-color-disabled" + } + ], + "name": "formInputColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "form-input-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-font-size" + } + ], + "name": "formInputFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "form-input-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-font-weight" + } + ], + "name": "formInputFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "form-input-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-line-height" + } + ], + "name": "formInputLineHeight", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "form-input-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-padding-x" + } + ], + "name": "formInputPaddingX", + "type": "String" + }, + { + "defaultValue": "0.6875rem", + "label": "form-input-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-padding-y" + } + ], + "name": "formInputPaddingY", + "type": "String" + } + ], + "label": "form-input", + "name": "formInput" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-4)", + "editorType": "ColorPicker", + "label": "form-input-placeholder-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-color" + } + ], + "name": "formInputPlaceholderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "form-input-placeholder-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-color-disabled" + } + ], + "name": "formInputPlaceholderColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-4)", + "editorType": "ColorPicker", + "label": "form-input-placeholder-color-focus", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-color-focus" + } + ], + "name": "formInputPlaceholderColorFocus", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "form-input-placeholder-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-font-size" + } + ], + "name": "formInputPlaceholderFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "form-input-placeholder-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-font-weight" + } + ], + "name": "formInputPlaceholderFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "form-input-placeholder-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "form-input-placeholder-line-height" + } + ], + "name": "formInputPlaceholderLineHeight", + "type": "String" + } + ], + "label": "form-input-placeholder", + "name": "formInputPlaceholder" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius)", + "label": "form-feedback-item-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-border-radius" + } + ], + "name": "formFeedbackItemBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "form-feedback-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-font-size" + } + ], + "name": "formFeedbackItemFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "form-feedback-item-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-font-weight" + } + ], + "name": "formFeedbackItemFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-line-height)", + "label": "form-feedback-item-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-line-height" + } + ], + "name": "formFeedbackItemLineHeight", + "type": "String" + }, + { + "defaultValue": "0.25rem 0 0", + "label": "form-feedback-item-margin", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-margin" + } + ], + "name": "formFeedbackItemMargin", + "type": "String" + }, + { + "defaultValue": "0.375rem 1rem", + "label": "form-feedback-item-padding", + "mappings": [ + { + "type": "cssVariable", + "value": "form-feedback-item-padding" + } + ], + "name": "formFeedbackItemPadding", + "type": "String" + } + ], + "label": "form-feedback", + "name": "formFeedback" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-7)", + "editorType": "ColorPicker", + "label": "form-text-color", + "mappings": [ + { + "type": "cssVariable", + "value": "form-text-color" + } + ], + "name": "formTextColor", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "form-text-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "form-text-font-size" + } + ], + "name": "formTextFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-light)", + "label": "form-text-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "form-text-font-weight" + } + ], + "name": "formTextFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-line-height)", + "label": "form-text-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "form-text-line-height" + } + ], + "name": "formTextLineHeight", + "type": "String" + }, + { + "defaultValue": "0.25rem 1rem 0", + "label": "form-text-margin", + "mappings": [ + { + "type": "cssVariable", + "value": "form-text-margin" + } + ], + "name": "formTextMargin", + "type": "String" + } + ], + "label": "form-text", + "name": "formText" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "custom-control-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-background-color" + } + ], + "name": "customControlBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "custom-control-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-border-color" + } + ], + "name": "customControlBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-disabled)", + "editorType": "ColorPicker", + "label": "custom-control-border-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-border-color-disabled" + } + ], + "name": "customControlBorderColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active-lighten)", + "editorType": "ColorPicker", + "label": "custom-control-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-color-hover" + } + ], + "name": "customControlColorHover", + "type": "String" + }, + { + "defaultValue": "var(--form-input-label-color)", + "editorType": "ColorPicker", + "label": "custom-control-label-color", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-label-color" + } + ], + "name": "customControlLabelColor", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "custom-control-label-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-label-font-size" + } + ], + "name": "customControlLabelFontSize", + "type": "String" + }, + { + "defaultValue": "var(--form-input-label-font-weight)", + "label": "custom-control-label-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-label-font-weight" + } + ], + "name": "customControlLabelFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-line-height)", + "label": "custom-control-label-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-label-line-height" + } + ], + "name": "customControlLabelLineHeight", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "custom-control-label-padding-left", + "mappings": [ + { + "type": "cssVariable", + "value": "custom-control-label-padding-left" + } + ], + "name": "customControlLabelPaddingLeft", + "type": "String" + } + ], + "label": "custom-control", + "name": "customControl" + }, + { + "frontendTokens": [ + { + "defaultValue": "0", + "label": "condensed-form-feedback-item-margin", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-feedback-item-margin" + } + ], + "name": "condensedFormFeedbackItemMargin", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-2)", + "editorType": "ColorPicker", + "label": "condensed-form-input-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-background-color" + } + ], + "name": "condensedFormInputBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "condensed-form-input-background-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-background-color-disabled" + } + ], + "name": "condensedFormInputBackgroundColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-5)", + "editorType": "ColorPicker", + "label": "condensed-form-input-filled-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-filled-border-color" + } + ], + "name": "condensedFormInputFilledBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "condensed-form-input-filled-label-color", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-filled-label-color" + } + ], + "name": "condensedFormInputFilledLabelColor", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "condensed-form-input-filled-label-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-filled-label-font-size" + } + ], + "name": "condensedFormInputFilledLabelFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "condensed-form-input-filled-label-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-filled-label-font-weight" + } + ], + "name": "condensedFormInputFilledLabelFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-5)", + "editorType": "ColorPicker", + "label": "condensed-form-input-label-color", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-color" + } + ], + "name": "condensedFormInputLabelColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-4)", + "editorType": "ColorPicker", + "label": "condensed-form-input-label-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-color-disabled" + } + ], + "name": "condensedFormInputLabelColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "condensed-form-input-label-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-font-size" + } + ], + "name": "condensedFormInputLabelFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "condensed-form-input-label-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-font-weight" + } + ], + "name": "condensedFormInputLabelFontWeight", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "condensed-form-input-label-margin-x", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-margin-x" + } + ], + "name": "condensedFormInputLabelMarginX", + "type": "String" + }, + { + "defaultValue": "0.25rem", + "label": "condensed-form-input-label-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-input-label-padding-x" + } + ], + "name": "condensedFormInputLabelPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "condensed-form-text-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-text-font-size" + } + ], + "name": "condensedFormTextFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "condensed-form-text-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "condensed-form-text-font-weight" + } + ], + "name": "condensedFormTextFontWeight", + "type": "String" + } + ], + "label": "condensed", + "name": "condensed" + } + ], + "label": "forms", + "name": "forms" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "0.375rem", + "label": "label-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "label-item-spacer-x" + } + ], + "name": "labelItemSpacerX", + "type": "String" + } + ], + "label": "label", + "name": "label" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius-xs)", + "label": "label-lg-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-border-radius" + } + ], + "name": "labelLgBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-font-size)", + "label": "label-lg-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-font-size" + } + ], + "name": "labelLgFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "label-lg-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-font-weight" + } + ], + "name": "labelLgFontWeight", + "type": "String" + }, + { + "defaultValue": "0.875rem", + "label": "label-lg-icon-size", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-icon-size" + } + ], + "name": "labelLgIconSize", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-sm-line-height)", + "label": "label-lg-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-line-height" + } + ], + "name": "labelLgLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "label-lg-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-padding-x" + } + ], + "name": "labelLgPaddingX", + "type": "String" + }, + { + "defaultValue": "0.125rem", + "label": "label-lg-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "label-lg-padding-y" + } + ], + "name": "labelLgPaddingY", + "type": "String" + } + ], + "label": "label-large", + "name": "labelLarge" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--border-radius-xs)", + "label": "label-sm-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-border-radius" + } + ], + "name": "labelSmBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-xs-font-size)", + "label": "label-sm-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-font-size" + } + ], + "name": "labelSmFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "label-sm-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-font-weight" + } + ], + "name": "labelSmFontWeight", + "type": "String" + }, + { + "defaultValue": "0.75rem", + "label": "label-sm-icon-size", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-icon-size" + } + ], + "name": "labelSmIconSize", + "type": "String" + }, + { + "defaultValue": "1rem", + "label": "label-sm-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-line-height" + } + ], + "name": "labelSmLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-1)", + "label": "label-sm-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-padding-x" + } + ], + "name": "labelSmPaddingX", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "label-sm-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "label-sm-padding-y" + } + ], + "name": "labelSmPaddingY", + "type": "String" + } + ], + "label": "label-small", + "name": "labelSmall" + } + ], + "label": "labels", + "name": "labels" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "100%", + "label": "nav-link-horizontal-active-indicator-length", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-horizontal-active-indicator-length" + } + ], + "name": "navLinkHorizontalActiveIndicatorLength", + "type": "String" + }, + { + "defaultValue": "0.125rem", + "label": "nav-link-horizontal-active-indicator-thickness", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-horizontal-active-indicator-thickness" + } + ], + "name": "navLinkHorizontalActiveIndicatorThickness", + "type": "String" + }, + { + "defaultValue": "0 1rem", + "label": "nav-link-horizontal-margin", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-horizontal-margin" + } + ], + "name": "navLinkHorizontalMargin", + "type": "String" + }, + { + "defaultValue": "100%", + "label": "nav-link-vertical-active-indicator-length", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-vertical-active-indicator-length" + } + ], + "name": "navLinkVerticalActiveIndicatorLength", + "type": "String" + }, + { + "defaultValue": "0.25rem", + "label": "nav-link-vertical-active-indicator-thickness", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-vertical-active-indicator-thickness" + } + ], + "name": "navLinkVerticalActiveIndicatorThickness", + "type": "String" + }, + { + "defaultValue": "1rem 0", + "label": "nav-link-vertical-margin", + "mappings": [ + { + "type": "cssVariable", + "value": "nav-link-vertical-margin" + } + ], + "name": "navLinkVerticalMargin", + "type": "String" + } + ], + "label": "nav-link", + "name": "navLink" + } + ], + "label": "navigation", + "name": "navigation" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "table-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-border-color" + } + ], + "name": "tableBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--border-radius)", + "label": "table-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "table-border-radius" + } + ], + "name": "tableBorderRadius", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "table-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "table-border-width" + } + ], + "name": "tableBorderWidth", + "type": "String" + }, + { + "defaultValue": "none", + "label": "table-box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "table-box-shadow" + } + ], + "name": "tableBoxShadow", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-10)", + "editorType": "ColorPicker", + "label": "table-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-color" + } + ], + "name": "tableColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "table-header-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-background-color" + } + ], + "name": "tableHeaderBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "table-header-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-color" + } + ], + "name": "tableHeaderColor", + "type": "String" + }, + { + "defaultValue": "middle", + "label": "table-header-vertical-align", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-vertical-align" + } + ], + "name": "tableHeaderVerticalAlign", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "table-row-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-row-background-color" + } + ], + "name": "tableRowBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active-lighten)", + "editorType": "ColorPicker", + "label": "table-row-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "table-row-background-color-active" + } + ], + "name": "tableRowBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "table-row-background-color-alternate", + "mappings": [ + { + "type": "cssVariable", + "value": "table-row-background-color-alternate" + } + ], + "name": "tableRowBackgroundColorAlternate", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover-lighten)", + "editorType": "ColorPicker", + "label": "table-row-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "table-row-background-color-hover" + } + ], + "name": "tableRowBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--table-row-color)", + "editorType": "ColorPicker", + "label": "table-row-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "table-row-color-hover" + } + ], + "name": "tableRowColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-9)", + "editorType": "ColorPicker", + "label": "table-title-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-color" + } + ], + "name": "tableTitleColor", + "type": "String" + }, + { + "defaultValue": "var(--text-small-caps-font-size)", + "label": "table-title-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-font-size" + } + ], + "name": "tableTitleFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-semi-bold)", + "label": "table-title-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-font-weight" + } + ], + "name": "tableTitleFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-title-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-line-height" + } + ], + "name": "tableTitleLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--link-color)", + "editorType": "ColorPicker", + "label": "table-title-link-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-link-color" + } + ], + "name": "tableTitleLinkColor", + "type": "String" + }, + { + "defaultValue": "var(--link-hover-color)", + "editorType": "ColorPicker", + "label": "table-title-link-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-link-color-hover" + } + ], + "name": "tableTitleLinkColorHover", + "type": "String" + }, + { + "defaultValue": "var(--link-text-decoration)", + "label": "table-title-link-text-decoration", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-link-text-decoration" + } + ], + "name": "tableTitleLinkTextDecoration", + "type": "String" + }, + { + "defaultValue": "var(--link-text-decoration-hover)", + "label": "table-title-link-text-decoration-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "table-title-link-text-decoration-hover" + } + ], + "name": "tableTitleLinkTextDecorationHover", + "type": "String" + } + ], + "label": "general", + "name": "general" + }, + { + "frontendTokens": [ + { + "defaultValue": "3.5rem", + "label": "table-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-cell-min-height" + } + ], + "name": "tableCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "table-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-cell-padding-x" + } + ], + "name": "tableCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "table-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-cell-padding-y" + } + ], + "name": "tableCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "table-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-font-size" + } + ], + "name": "tableFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "table-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-font-weight" + } + ], + "name": "tableFontWeight", + "type": "String" + }, + { + "defaultValue": "3.5rem", + "label": "table-header-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-cell-min-height" + } + ], + "name": "tableHeaderCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "table-header-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-cell-padding-x" + } + ], + "name": "tableHeaderCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "table-header-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-cell-padding-y" + } + ], + "name": "tableHeaderCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--table-font-size)", + "label": "table-header-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-font-size" + } + ], + "name": "tableHeaderFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-semi-bold)", + "label": "table-header-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-font-weight" + } + ], + "name": "tableHeaderFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-header-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-header-line-height" + } + ], + "name": "tableHeaderLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-line-height" + } + ], + "name": "tableLineHeight", + "type": "String" + } + ], + "label": "table", + "name": "table" + }, + { + "frontendTokens": [ + { + "defaultValue": "4.5625rem", + "label": "table-lg-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-cell-min-height" + } + ], + "name": "tableLgCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "table-lg-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-cell-padding-x" + } + ], + "name": "tableLgCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "table-lg-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-cell-padding-y" + } + ], + "name": "tableLgCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "table-lg-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-font-size" + } + ], + "name": "tableLgFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "table-lg-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-font-weight" + } + ], + "name": "tableLgFontWeight", + "type": "String" + }, + { + "defaultValue": "4.5625rem", + "label": "table-lg-header-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-cell-min-height" + } + ], + "name": "tableLgHeaderCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "table-lg-header-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-cell-padding-x" + } + ], + "name": "tableLgHeaderCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-4)", + "label": "table-lg-header-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-cell-padding-y" + } + ], + "name": "tableLgHeaderCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "table-lg-header-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-font-size" + } + ], + "name": "tableLgHeaderFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-semi-bold)", + "label": "table-lg-header-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-font-weight" + } + ], + "name": "tableLgHeaderFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-lg-header-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-header-line-height" + } + ], + "name": "tableLgHeaderLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-lg-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-lg-line-height" + } + ], + "name": "tableLgLineHeight", + "type": "String" + } + ], + "label": "table-lg", + "name": "table-lg" + }, + { + "frontendTokens": [ + { + "defaultValue": "2.5625rem", + "label": "table-sm-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-cell-min-height" + } + ], + "name": "tableSmCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "table-sm-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-cell-padding-x" + } + ], + "name": "tableSmCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "table-sm-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-cell-padding-y" + } + ], + "name": "tableSmCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "table-sm-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-font-size" + } + ], + "name": "tableSmFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "table-sm-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-font-weight" + } + ], + "name": "tableSmFontWeight", + "type": "String" + }, + { + "defaultValue": "2.5625rem", + "label": "table-sm-header-cell-min-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-cell-min-height" + } + ], + "name": "tableSmHeaderCellMinHeight", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "table-sm-header-cell-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-cell-padding-x" + } + ], + "name": "tableSmHeaderCellPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "table-sm-header-cell-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-cell-padding-y" + } + ], + "name": "tableSmHeaderCellPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "table-sm-header-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-font-size" + } + ], + "name": "tableSmHeaderFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-semi-bold)", + "label": "table-sm-header-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-font-weight" + } + ], + "name": "tableSmHeaderFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-sm-header-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-header-line-height" + } + ], + "name": "tableSmHeaderLineHeight", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "table-sm-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-sm-line-height" + } + ], + "name": "tableSmLineHeight", + "type": "String" + } + ], + "label": "table-sm", + "name": "table-sm" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "table-spaced-row-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "table-spaced-row-border-color" + } + ], + "name": "tableSpacedRowBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--border-radius)", + "label": "table-spaced-row-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "table-spaced-row-border-radius" + } + ], + "name": "tableSpacedRowBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "table-spaced-row-border-spacing", + "mappings": [ + { + "type": "cssVariable", + "value": "table-spaced-row-border-spacing" + } + ], + "name": "tableSpacedRowBorderSpacing", + "type": "String" + }, + { + "defaultValue": "0", + "label": "table-spaced-row-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "table-spaced-row-border-width" + } + ], + "name": "tableSpacedRowBorderWidth", + "type": "String" + }, + { + "defaultValue": "none", + "label": "table-spaced-row-box-shadow", + "mappings": [ + { + "type": "cssVariable", + "value": "table-spaced-row-box-shadow" + } + ], + "name": "tableSpacedRowBoxShadow", + "type": "String" + } + ], + "label": "table-spaced", + "name": "table-spaced" + }, + { + "frontendTokens": [ + { + "defaultValue": "100px", + "label": "table-image-max-height", + "mappings": [ + { + "type": "cssVariable", + "value": "table-image-max-height" + } + ], + "name": "tableImageMaxHeight", + "type": "String" + } + ], + "label": "table-image", + "name": "table-image" + } + ], + "label": "tables", + "name": "tables" + }, + { + "frontendTokenSets": [ + { + "frontendTokens": [ + { + "defaultValue": "0.0625rem", + "label": "tab-primary-item-active-bar-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-active-bar-border-radius" + } + ], + "name": "tabPrimaryItemActiveBarBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--color-brand-primary)", + "editorType": "ColorPicker", + "label": "tab-primary-item-active-bar-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-active-bar-color-active" + } + ], + "name": "tabPrimaryItemActiveBarColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-brand-primary-darken-1)", + "editorType": "ColorPicker", + "label": "tab-primary-item-active-bar-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-active-bar-color-hover" + } + ], + "name": "tabPrimaryItemActiveBarColorHover", + "type": "String" + }, + { + "defaultValue": "0.1875rem", + "label": "tab-primary-item-active-bar-thickness", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-active-bar-thickness" + } + ], + "name": "tabPrimaryItemActiveBarThickness", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "tab-primary-item-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-background-color" + } + ], + "name": "tabPrimaryItemBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-primary-item-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-background-color-active" + } + ], + "name": "tabPrimaryItemBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-primary-item-background-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-background-color-disabled" + } + ], + "name": "tabPrimaryItemBackgroundColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-primary-item-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-background-color-hover" + } + ], + "name": "tabPrimaryItemBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "tab-primary-item-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-border-color" + } + ], + "name": "tabPrimaryItemBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-primary-item-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-border-color-active" + } + ], + "name": "tabPrimaryItemBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-primary-item-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-border-color-hover" + } + ], + "name": "tabPrimaryItemBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-item-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-border-radius" + } + ], + "name": "tabPrimaryItemBorderRadius", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-primary-item-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-box-shadow-active" + } + ], + "name": "tabPrimaryItemBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-primary-item-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-box-shadow-hover" + } + ], + "name": "tabPrimaryItemBoxShadowHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-7)", + "editorType": "ColorPicker", + "label": "tab-primary-item-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-color" + } + ], + "name": "tabPrimaryItemColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "tab-primary-item-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-color-active" + } + ], + "name": "tabPrimaryItemColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-primary-item-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-color-disabled" + } + ], + "name": "tabPrimaryItemColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "tab-primary-item-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-color-hover" + } + ], + "name": "tabPrimaryItemColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "tab-primary-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-font-size" + } + ], + "name": "tabPrimaryItemFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bold)", + "label": "tab-primary-item-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-font-weight" + } + ], + "name": "tabPrimaryItemFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--tab-primary-item-font-weight)", + "label": "tab-primary-item-font-weight-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-font-weight-active" + } + ], + "name": "tabPrimaryItemFontWeightActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-7)", + "editorType": "ColorPicker", + "label": "tab-primary-item-icon-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-icon-color" + } + ], + "name": "tabPrimaryItemIconColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "tab-primary-item-icon-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-icon-color-active" + } + ], + "name": "tabPrimaryItemIconColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-primary-item-icon-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-icon-color-disabled" + } + ], + "name": "tabPrimaryItemIconColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "tab-primary-item-icon-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-icon-color-hover" + } + ], + "name": "tabPrimaryItemIconColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "tab-primary-item-icon-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-icon-font-size" + } + ], + "name": "tabPrimaryItemIconFontSize", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-item-inline-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-inline-item-spacer-x" + } + ], + "name": "tabPrimaryItemInlineItemSpacerX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-item-inline-item-spacer-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-inline-item-spacer-y" + } + ], + "name": "tabPrimaryItemInlineItemSpacerY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "tab-primary-item-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-item-line-height" + } + ], + "name": "tabPrimaryItemLineHeight", + "type": "String" + } + ], + "label": "primary", + "name": "primary" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-primary-horizontal-item-active-bar-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-active-bar-width" + } + ], + "name": "tabPrimaryHorizontalItemActiveBarWidth", + "type": "String" + }, + { + "defaultValue": "0.03125rem", + "label": "tab-primary-horizontal-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-border-bottom-width" + } + ], + "name": "tabPrimaryHorizontalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-horizontal-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-border-left-width" + } + ], + "name": "tabPrimaryHorizontalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-horizontal-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-border-right-width" + } + ], + "name": "tabPrimaryHorizontalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-horizontal-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-border-top-width" + } + ], + "name": "tabPrimaryHorizontalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-horizontal-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-padding-x" + } + ], + "name": "tabPrimaryHorizontalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-horizontal-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-horizontal-item-padding-y" + } + ], + "name": "tabPrimaryHorizontalItemPaddingY", + "type": "String" + } + ], + "label": "primary-horizontal", + "name": "primary-horizontal" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-primary-vertical-item-active-bar-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-active-bar-height" + } + ], + "name": "tabPrimaryVerticalItemActiveBarHeight", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-vertical-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-border-bottom-width" + } + ], + "name": "tabPrimaryVerticalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-primary-vertical-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-border-left-width" + } + ], + "name": "tabPrimaryVerticalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-vertical-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-border-right-width" + } + ], + "name": "tabPrimaryVerticalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-primary-vertical-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-border-top-width" + } + ], + "name": "tabPrimaryVerticalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-vertical-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-padding-x" + } + ], + "name": "tabPrimaryVerticalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-primary-vertical-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-primary-vertical-item-padding-y" + } + ], + "name": "tabPrimaryVerticalItemPaddingY", + "type": "String" + } + ], + "label": "primary-vertical", + "name": "primary-vertical" + }, + { + "frontendTokens": [ + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-item-active-bar-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-active-bar-border-radius" + } + ], + "name": "tabSecondaryItemActiveBarBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-active-bar-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-active-bar-color-active" + } + ], + "name": "tabSecondaryItemActiveBarColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-active-bar-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-active-bar-color-hover" + } + ], + "name": "tabSecondaryItemActiveBarColorHover", + "type": "String" + }, + { + "defaultValue": "0.1875rem", + "label": "tab-secondary-item-active-bar-thickness", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-active-bar-thickness" + } + ], + "name": "tabSecondaryItemActiveBarThickness", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-background-color" + } + ], + "name": "tabSecondaryItemBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-background-color-active" + } + ], + "name": "tabSecondaryItemBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-background-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-background-color-disabled" + } + ], + "name": "tabSecondaryItemBackgroundColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-background-color-hover" + } + ], + "name": "tabSecondaryItemBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-border-color" + } + ], + "name": "tabSecondaryItemBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-border-color-active" + } + ], + "name": "tabSecondaryItemBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-border-color-hover" + } + ], + "name": "tabSecondaryItemBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-secondary-item-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-border-radius" + } + ], + "name": "tabSecondaryItemBorderRadius", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-secondary-item-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-box-shadow-active" + } + ], + "name": "tabSecondaryItemBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-secondary-item-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-box-shadow-hover" + } + ], + "name": "tabSecondaryItemBoxShadowHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-color" + } + ], + "name": "tabSecondaryItemColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-10)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-color-active" + } + ], + "name": "tabSecondaryItemColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-color-disabled" + } + ], + "name": "tabSecondaryItemColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-10)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-color-hover" + } + ], + "name": "tabSecondaryItemColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "tab-secondary-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-font-size" + } + ], + "name": "tabSecondaryItemFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "tab-secondary-item-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-font-weight" + } + ], + "name": "tabSecondaryItemFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bold)", + "label": "tab-secondary-item-font-weight-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-font-weight-active" + } + ], + "name": "tabSecondaryItemFontWeightActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-7)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-icon-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-icon-color" + } + ], + "name": "tabSecondaryItemIconColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-icon-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-icon-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-icon-color-active" + } + ], + "name": "tabSecondaryItemIconColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-icon-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-icon-color-disabled" + } + ], + "name": "tabSecondaryItemIconColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-secondary-item-icon-color)", + "editorType": "ColorPicker", + "label": "tab-secondary-item-icon-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-icon-color-hover" + } + ], + "name": "tabSecondaryItemIconColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size);", + "label": "tab-secondary-item-icon-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-icon-font-size" + } + ], + "name": "tabSecondaryItemIconFontSize", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "tab-secondary-item-inline-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-inline-item-spacer-x" + } + ], + "name": "tabSecondaryItemInlineItemSpacerX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "tab-secondary-item-inline-item-spacer-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-inline-item-spacer-y" + } + ], + "name": "tabSecondaryItemInlineItemSpacerY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "tab-secondary-item-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-item-line-height" + } + ], + "name": "tabSecondaryItemLineHeight", + "type": "String" + } + ], + "label": "secondary", + "name": "secondary" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-secondary-horizontal-item-active-bar-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-active-bar-width" + } + ], + "name": "tabSecondaryHorizontalItemActiveBarWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-horizontal-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-border-bottom-width" + } + ], + "name": "tabSecondaryHorizontalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-horizontal-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-border-left-width" + } + ], + "name": "tabSecondaryHorizontalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-horizontal-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-border-right-width" + } + ], + "name": "tabSecondaryHorizontalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-horizontal-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-border-top-width" + } + ], + "name": "tabSecondaryHorizontalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-secondary-horizontal-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-padding-x" + } + ], + "name": "tabSecondaryHorizontalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-secondary-horizontal-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-horizontal-item-padding-y" + } + ], + "name": "tabSecondaryHorizontalItemPaddingY", + "type": "String" + } + ], + "label": "secondary-horizontal", + "name": "secondary-horizontal" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-secondary-vertical-item-active-bar-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-active-bar-height" + } + ], + "name": "tabSecondaryVerticalItemActiveBarHeight", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-vertical-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-border-bottom-width" + } + ], + "name": "tabSecondaryVerticalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-vertical-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-border-left-width" + } + ], + "name": "tabSecondaryVerticalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-vertical-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-border-right-width" + } + ], + "name": "tabSecondaryVerticalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-secondary-vertical-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-border-top-width" + } + ], + "name": "tabSecondaryVerticalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-secondary-vertical-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-padding-x" + } + ], + "name": "tabSecondaryVerticalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-secondary-vertical-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-secondary-vertical-item-padding-y" + } + ], + "name": "tabSecondaryVerticalItemPaddingY", + "type": "String" + } + ], + "label": "secondary-vertical", + "name": "secondary-vertical" + }, + { + "frontendTokens": [ + { + "defaultValue": "0.0625rem", + "label": "tab-tertiary-item-active-bar-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-active-bar-border-radius" + } + ], + "name": "tabTertiaryItemActiveBarBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-default)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-active-bar-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-active-bar-color-active" + } + ], + "name": "tabTertiaryItemActiveBarColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-hover)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-active-bar-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-active-bar-color-hover" + } + ], + "name": "tabTertiaryItemActiveBarColorHover", + "type": "String" + }, + { + "defaultValue": "0.1875rem", + "label": "tab-tertiary-item-active-bar-thickness", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-active-bar-thickness" + } + ], + "name": "tabTertiaryItemActiveBarThickness", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-0)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-background-color" + } + ], + "name": "tabTertiaryItemBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-background-color-active" + } + ], + "name": "tabTertiaryItemBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-background-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-background-color-disabled" + } + ], + "name": "tabTertiaryItemBackgroundColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-background-color-hover" + } + ], + "name": "tabTertiaryItemBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-border-color" + } + ], + "name": "tabTertiaryItemBorderColor", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-border-color-active" + } + ], + "name": "tabTertiaryItemBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-border-color-hover" + } + ], + "name": "tabTertiaryItemBorderColorHover", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-item-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-border-radius" + } + ], + "name": "tabTertiaryItemBorderRadius", + "type": "String" + }, + { + "defaultValue": "var(--elevation-fluffy-2) rgba(77, 133, 255, 0.1)", + "label": "tab-tertiary-item-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-box-shadow-active" + } + ], + "name": "tabTertiaryItemBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-tertiary-item-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-box-shadow-hover" + } + ], + "name": "tabTertiaryItemBoxShadowHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-8)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-color" + } + ], + "name": "tabTertiaryItemColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-color-active" + } + ], + "name": "tabTertiaryItemColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-color-disabled" + } + ], + "name": "tabTertiaryItemColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-color-hover" + } + ], + "name": "tabTertiaryItemColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size);", + "label": "tab-tertiary-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-font-size" + } + ], + "name": "tabTertiaryItemFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-normal)", + "label": "tab-tertiary-item-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-font-weight" + } + ], + "name": "tabTertiaryItemFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bolder)", + "label": "tab-tertiary-item-font-weight-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-font-weight-active" + } + ], + "name": "tabTertiaryItemFontWeightActive", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-7)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-icon-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-icon-color" + } + ], + "name": "tabTertiaryItemIconColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-icon-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-icon-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-icon-color-active" + } + ], + "name": "tabTertiaryItemIconColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-icon-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-icon-color-disabled" + } + ], + "name": "tabTertiaryItemIconColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-tertiary-item-icon-color)", + "editorType": "ColorPicker", + "label": "tab-tertiary-item-icon-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-icon-color-hover" + } + ], + "name": "tabTertiaryItemIconColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "tab-tertiary-item-icon-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-icon-font-size" + } + ], + "name": "tabTertiaryItemIconFontSize", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "tab-tertiary-item-inline-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-inline-item-spacer-x" + } + ], + "name": "tabTertiaryItemInlineItemSpacerX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-2)", + "label": "tab-tertiary-item-inline-item-spacer-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-inline-item-spacer-y" + } + ], + "name": "tabTertiaryItemInlineItemSpacerY", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-line-height)", + "label": "tab-tertiary-item-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-item-line-height" + } + ], + "name": "tabTertiaryItemLineHeight", + "type": "String" + } + ], + "label": "tertiary", + "name": "tertiary" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-tertiary-horizontal-item-active-bar-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-active-bar-width" + } + ], + "name": "tabTertiaryHorizontalItemActiveBarWidth", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-tertiary-horizontal-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-border-bottom-width" + } + ], + "name": "tabTertiaryHorizontalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-horizontal-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-border-left-width" + } + ], + "name": "tabTertiaryHorizontalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-horizontal-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-border-right-width" + } + ], + "name": "tabTertiaryHorizontalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-horizontal-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-border-top-width" + } + ], + "name": "tabTertiaryHorizontalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-tertiary-horizontal-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-padding-x" + } + ], + "name": "tabTertiaryHorizontalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-tertiary-horizontal-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-horizontal-item-padding-y" + } + ], + "name": "tabTertiaryHorizontalItemPaddingY", + "type": "String" + } + ], + "label": "tertiary-horizontal", + "name": "tertiary-horizontal" + }, + { + "frontendTokens": [ + { + "defaultValue": "auto", + "label": "tab-tertiary-vertical-item-active-bar-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-active-bar-height" + } + ], + "name": "tabTertiaryVerticalItemActiveBarHeight", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-tertiary-vertical-item-border-bottom-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-border-bottom-width" + } + ], + "name": "tabTertiaryVerticalItemBorderBottomWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-vertical-item-border-left-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-border-left-width" + } + ], + "name": "tabTertiaryVerticalItemBorderLeftWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-vertical-item-border-right-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-border-right-width" + } + ], + "name": "tabTertiaryVerticalItemBorderRightWidth", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-tertiary-vertical-item-border-top-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-border-top-width" + } + ], + "name": "tabTertiaryVerticalItemBorderTopWidth", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-tertiary-vertical-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-padding-x" + } + ], + "name": "tabTertiaryVerticalItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-tertiary-vertical-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-tertiary-vertical-item-padding-y" + } + ], + "name": "tabTertiaryVerticalItemPaddingY", + "type": "String" + } + ], + "label": "tertiary-vertical", + "name": "tertiary-vertical" + }, + { + "frontendTokens": [ + { + "defaultValue": "var(--color-neutral-1)", + "editorType": "ColorPicker", + "label": "tab-segment-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-background-color" + } + ], + "name": "tabSegmentBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-3)", + "editorType": "ColorPicker", + "label": "tab-segment-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-border-color" + } + ], + "name": "tabSegmentBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--border-radius-pill)", + "label": "tab-segment-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-border-radius" + } + ], + "name": "tabSegmentBorderRadius", + "type": "String" + }, + { + "defaultValue": "0.0625rem", + "label": "tab-segment-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-border-width" + } + ], + "name": "tabSegmentBorderWidth", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "tab-segment-item-background-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-background-color" + } + ], + "name": "tabSegmentItemBackgroundColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active)", + "editorType": "ColorPicker", + "label": "tab-segment-item-background-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-background-color-active" + } + ], + "name": "tabSegmentItemBackgroundColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-background-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-background-color-disabled" + } + ], + "name": "tabSegmentItemBackgroundColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-background-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-background-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-background-color-hover" + } + ], + "name": "tabSegmentItemBackgroundColorHover", + "type": "String" + }, + { + "defaultValue": "transparent", + "editorType": "ColorPicker", + "label": "tab-segment-item-border-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-color" + } + ], + "name": "tabSegmentItemBorderColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-border-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-color-active" + } + ], + "name": "tabSegmentItemBorderColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-border-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-color-disabled" + } + ], + "name": "tabSegmentItemBorderColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-border-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-border-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-color-hover" + } + ], + "name": "tabSegmentItemBorderColorHover", + "type": "String" + }, + { + "defaultValue": "var(--border-radius-pill)", + "label": "tab-segment-item-border-radius", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-radius" + } + ], + "name": "tabSegmentItemBorderRadius", + "type": "String" + }, + { + "defaultValue": "0", + "label": "tab-segment-item-border-width", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-border-width" + } + ], + "name": "tabSegmentItemBorderWidth", + "type": "String" + }, + { + "defaultValue": "var(--elevation-tight-2) rgba(89, 36, 235, 0.25)", + "label": "tab-segment-item-box-shadow-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-box-shadow-active" + } + ], + "name": "tabSegmentItemBoxShadowActive", + "type": "String" + }, + { + "defaultValue": "none", + "label": "tab-segment-item-box-shadow-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-box-shadow-hover" + } + ], + "name": "tabSegmentItemBoxShadowHover", + "type": "String" + }, + { + "defaultValue": "var(--color-neutral-6)", + "editorType": "ColorPicker", + "label": "tab-segment-item-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-color" + } + ], + "name": "tabSegmentItemColor", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-inverted)", + "editorType": "ColorPicker", + "label": "tab-segment-item-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-color-active" + } + ], + "name": "tabSegmentItemColorActive", + "type": "String" + }, + { + "defaultValue": "var(--color-action-neutral-disabled)", + "editorType": "ColorPicker", + "label": "tab-segment-item-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-color-disabled" + } + ], + "name": "tabSegmentItemColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--color-action-primary-active)", + "editorType": "ColorPicker", + "label": "tab-segment-item-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-color-hover" + } + ], + "name": "tabSegmentItemColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-link-small-font-size)", + "label": "tab-segment-item-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-font-size" + } + ], + "name": "tabSegmentItemFontSize", + "type": "String" + }, + { + "defaultValue": "var(--font-weight-bold)", + "label": "tab-segment-item-font-weight", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-font-weight" + } + ], + "name": "tabSegmentItemFontWeight", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-font-weight)", + "label": "tab-segment-item-font-weight-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-font-weight-active" + } + ], + "name": "tabSegmentItemFontWeightActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-color)", + "editorType": "ColorPicker", + "label": "tab-segment-item-icon-color", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-icon-color" + } + ], + "name": "tabSegmentItemIconColor", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-color-active)", + "editorType": "ColorPicker", + "label": "tab-segment-item-icon-color-active", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-icon-color-active" + } + ], + "name": "tabSegmentItemIconColorActive", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-color-disabled)", + "editorType": "ColorPicker", + "label": "tab-segment-item-icon-color-disabled", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-icon-color-disabled" + } + ], + "name": "tabSegmentItemIconColorDisabled", + "type": "String" + }, + { + "defaultValue": "var(--tab-segment-item-color-hover)", + "editorType": "ColorPicker", + "label": "tab-segment-item-icon-color-hover", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-icon-color-hover" + } + ], + "name": "tabSegmentItemIconColorHover", + "type": "String" + }, + { + "defaultValue": "var(--text-paragraph-font-size)", + "label": "tab-segment-item-icon-font-size", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-icon-font-size" + } + ], + "name": "tabSegmentItemIconFontSize", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-segment-item-inline-item-spacer-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-inline-item-spacer-x" + } + ], + "name": "tabSegmentItemInlineItemSpacerX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-segment-item-inline-item-spacer-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-inline-item-spacer-y" + } + ], + "name": "tabSegmentItemInlineItemSpacerY", + "type": "String" + }, + { + "defaultValue": "var(--text-link-small-line-height)", + "label": "tab-segment-item-line-height", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-line-height" + } + ], + "name": "tabSegmentItemLineHeight", + "type": "String" + }, + { + "defaultValue": "0.375rem", + "label": "tab-segment-item-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-padding-x" + } + ], + "name": "tabSegmentItemPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-3)", + "label": "tab-segment-item-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-item-padding-y" + } + ], + "name": "tabSegmentItemPaddingY", + "type": "String" + }, + { + "defaultValue": "var(--spacer-1)", + "label": "tab-segment-padding-x", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-padding-x" + } + ], + "name": "tabSegmentPaddingX", + "type": "String" + }, + { + "defaultValue": "var(--spacer-1)", + "label": "tab-segment-padding-y", + "mappings": [ + { + "type": "cssVariable", + "value": "tab-segment-padding-y" + } + ], + "name": "tabSegmentPaddingY", + "type": "String" + } + ], + "label": "segment", + "name": "segment" + } + ], + "label": "tabs", + "name": "tabs" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-theme/webpack.config.js b/client-extensions/clarity-theme/webpack.config.js new file mode 100644 index 0000000..778281d --- /dev/null +++ b/client-extensions/clarity-theme/webpack.config.js @@ -0,0 +1,29 @@ +/** + * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com + * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06 + */ + +const path = require('path'); +const webpack = require('webpack'); + +const DEVELOPMENT = process.env.NODE_ENV === 'development'; + +module.exports = { + devtool: DEVELOPMENT ? 'source-map' : false, + entry: { + global: './assets/global.js', + }, + mode: DEVELOPMENT ? 'development' : 'production', + optimization: { + minimize: !DEVELOPMENT, + }, + output: { + filename: '[name].[contenthash].js', + path: path.resolve('build', 'static'), + }, + plugins: [ + new webpack.optimize.LimitChunkCountPlugin({ + maxChunks: 1, + }), + ], +}; From 55b105ad876bb10490063b5f981178f3715c4fba Mon Sep 17 00:00:00 2001 From: David Nebinger Date: Tue, 22 Apr 2025 13:24:44 -0400 Subject: [PATCH 2/2] Add the missing clarity-ticketing-batch source cx --- ...ist-type-definition.batch-engine-data.json | 323 ++++++++++++ .../01-object-folder.batch-engine-data.json | 27 + ...2-object-definition.batch-engine-data.json | 493 ++++++++++++++++++ ...3-user-relationship.batch-engine-data.json | 26 + ...ccount-relationship.batch-engine-data.json | 26 + .../05-ticket-update.batch-engine-data.json | 19 + .../06-ticket-entry.batch-engine-data.json | 194 +++++++ .../client-extension.yaml | 17 + 8 files changed, 1125 insertions(+) create mode 100644 client-extensions/clarity-ticketing-batch/batch/00-list-type-definition.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/01-object-folder.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/02-object-definition.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/03-user-relationship.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/04-account-relationship.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/05-ticket-update.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/batch/06-ticket-entry.batch-engine-data.json create mode 100644 client-extensions/clarity-ticketing-batch/client-extension.yaml diff --git a/client-extensions/clarity-ticketing-batch/batch/00-list-type-definition.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/00-list-type-definition.batch-engine-data.json new file mode 100644 index 0000000..2adaf84 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/00-list-type-definition.batch-engine-data.json @@ -0,0 +1,323 @@ +{ + "configuration": { + "className": "com.liferay.headless.admin.list.type.dto.v1_0.ListTypeDefinition", + "parameters": { + "containsHeaders": "true", + "createStrategy": "UPSERT", + "onErrorFail": "false", + "taskItemDelegateName": "DEFAULT", + "updateStrategy": "UPDATE" + } + }, + "items": [ + { + "externalReferenceCode": "PRIORITIES", + "listTypeEntries": [ + { + "externalReferenceCode": "CRITICAL", + "key": "critical", + "name_i18n": { + "en-US": "Critical" + }, + "name": "Critical" + }, + { + "externalReferenceCode": "MAJOR", + "key": "major", + "name_i18n": { + "en-US": "Major" + }, + "name": "Major" + }, + { + "externalReferenceCode": "MINOR", + "key": "minor", + "name_i18n": { + "en-US": "Minor" + }, + "name": "Minor" + }, + { + "externalReferenceCode": "MODERATE", + "key": "moderate", + "name_i18n": { + "en-US": "Moderate" + }, + "name": "Moderate" + }, + { + "externalReferenceCode": "UNASSIGNED", + "key": "unassigned", + "name_i18n": { + "en-US": "Unassigned" + }, + "name": "Unassigned" + } + ], + "name_i18n": { + "en-US": "Priorities" + }, + "name": "Priorities" + }, + { + "externalReferenceCode": "REGIONS", + "listTypeEntries": [ + { + "externalReferenceCode": "APAC", + "key": "aPAC", + "name_i18n": { + "en-US": "APAC" + }, + "name": "APAC" + }, + { + "externalReferenceCode": "EMEA", + "key": "eMEA", + "name_i18n": { + "en-US": "EMEA" + }, + "name": "EMEA" + }, + { + "externalReferenceCode": "LATAM", + "key": "lATAM", + "name_i18n": { + "en-US": "LATAM" + }, + "name": "LATAM" + }, + { + "externalReferenceCode": "NORAM", + "key": "nORAM", + "name_i18n": { + "en-US": "NORAM" + }, + "name": "NORAM" + } + ], + "name_i18n": { + "en-US": "Regions" + }, + "name": "Regions" + }, + { + "externalReferenceCode": "RESOLUTIONS", + "listTypeEntries": [ + { + "externalReferenceCode": "APPROVED", + "key": "approved", + "name_i18n": { + "en-US": "Approved" + }, + "name": "Approved" + }, + { + "externalReferenceCode": "DONE", + "key": "done", + "name_i18n": { + "en-US": "Done" + }, + "name": "Done" + }, + { + "externalReferenceCode": "DUPLICATE", + "key": "duplicate", + "name_i18n": { + "en-US": "Duplicate" + }, + "name": "Duplicate" + }, + { + "externalReferenceCode": "EXPIRED", + "key": "expired", + "name_i18n": { + "en-US": "Expired" + }, + "name": "Expired" + }, + { + "externalReferenceCode": "FIXED", + "key": "fixed", + "name_i18n": { + "en-US": "Fixed" + }, + "name": "Fixed" + }, + { + "externalReferenceCode": "REJECTED", + "key": "rejected", + "name_i18n": { + "en-US": "Rejected" + }, + "name": "Rejected" + }, + { + "externalReferenceCode": "UNRESOLVED", + "key": "unresolved", + "name_i18n": { + "en-US": "Unresolved" + }, + "name": "Unresolved" + } + ], + "name_i18n": { + "en-US": "Resolutions" + }, + "name": "Resolutions" + }, + { + "externalReferenceCode": "STATUSES", + "listTypeEntries": [ + { + "externalReferenceCode": "ANSWERED", + "key": "answered", + "name_i18n": { + "en-US": "Answered" + }, + "name": "Answered" + }, + { + "externalReferenceCode": "CLOSED", + "key": "closed", + "name_i18n": { + "en-US": "Closed" + }, + "name": "Closed" + }, + { + "externalReferenceCode": "ESCALATED", + "key": "escalated", + "name_i18n": { + "en-US": "Escalated" + }, + "name": "Escalated" + }, + { + "externalReferenceCode": "IN_PROGRESS", + "key": "inProgress", + "name_i18n": { + "en-US": "In Progress" + }, + "name": "In Progress" + }, + { + "externalReferenceCode": "IN_REVIEW", + "key": "inReview", + "name_i18n": { + "en-US": "In Review" + }, + "name": "In Review" + }, + { + "externalReferenceCode": "OPEN", + "key": "open", + "name_i18n": { + "en-US": "Open" + }, + "name": "Open" + }, + { + "externalReferenceCode": "QUEUED", + "key": "queued", + "name_i18n": { + "en-US": "Queued" + }, + "name": "Queued" + }, + { + "externalReferenceCode": "VERIFYING", + "key": "verifying", + "name_i18n": { + "en-US": "Verifying" + }, + "name": "Verifying" + }, + { + "externalReferenceCode": "WAITING", + "key": "waiting", + "name_i18n": { + "en-US": "Waiting" + }, + "name": "Waiting" + } + ], + "name_i18n": { + "en-US": "Statuses" + }, + "name": "Statuses" + }, + { + "externalReferenceCode": "TYPES", + "listTypeEntries": [ + { + "externalReferenceCode": "ACCOUNT_ISSUE", + "key": "accountIssue", + "name_i18n": { + "en-US": "Account Issue" + }, + "name": "Account Issue" + }, + { + "externalReferenceCode": "APPLICATION", + "key": "application", + "name_i18n": { + "en-US": "Application" + }, + "name": "Application" + }, + { + "externalReferenceCode": "CREDIT_LIMIT", + "key": "creditLimitIncrease", + "name_i18n": { + "en-US": "Credit Limit Increase" + }, + "name": "Credit Limit Increase" + }, + { + "externalReferenceCode": "DELIVERY_ISSUE", + "key": "deliveryIssue", + "name_i18n": { + "en-US": "Delivery Issue" + }, + "name": "Delivery Issue" + }, + { + "externalReferenceCode": "ORDER_ISSUE", + "key": "orderIssue", + "name_i18n": { + "en-US": "Order Issue" + }, + "name": "Order Issue" + }, + { + "externalReferenceCode": "OTHER", + "key": "other", + "name_i18n": { + "en-US": "Other" + }, + "name": "Other" + }, + { + "externalReferenceCode": "PRODUCT_ISSUE", + "key": "productIssue", + "name_i18n": { + "en-US": "Product Issue" + }, + "name": "Product Issue" + }, + { + "externalReferenceCode": "SITE_ISSUE", + "key": "siteIssue", + "name_i18n": { + "en-US": "Site Issue" + }, + "name": "Site Issue" + } + ], + "name_i18n": { + "en-US": "Types" + }, + "name": "Types" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/01-object-folder.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/01-object-folder.batch-engine-data.json new file mode 100644 index 0000000..f15fa93 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/01-object-folder.batch-engine-data.json @@ -0,0 +1,27 @@ +{ + "configuration": { + "className": "com.liferay.object.admin.rest.dto.v1_0.ObjectFolder", + "parameters": { + "containsHeaders": "true", + "createStrategy": "UPSERT", + "onErrorFail": "false", + "updateStrategy": "UPDATE" + }, + "taskItemDelegateName": "DEFAULT" + }, + "items": [ + { + "name": "Ticketing", + "label": { + "en_US": "Ticketing" + }, + "actions": { + "permissions": {}, + "get": {}, + "update": {}, + "delete": {} + }, + "externalReferenceCode": "TICKETING" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/02-object-definition.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/02-object-definition.batch-engine-data.json new file mode 100644 index 0000000..eafc69c --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/02-object-definition.batch-engine-data.json @@ -0,0 +1,493 @@ +{ + "configuration": { + "className": "com.liferay.object.admin.rest.dto.v1_0.ObjectDefinition", + "parameters": { + "containsHeaders": "true", + "createStrategy": "UPSERT", + "onErrorFail": "false", + "taskItemDelegateName": "DEFAULT", + "updateStrategy": "UPDATE" + } + }, + "items": [ + { + "accountEntryRestricted": true, + "accountEntryRestrictedObjectFieldName": "r_accountToTickets_accountEntryId", + "active": true, + "defaultLanguageId": "en_US", + "enableCategorization": true, + "enableComments": true, + "enableObjectEntryHistory": true, + "externalReferenceCode": "TICKET", + "label": { + "en_US": "Ticket" + }, + "name": "Ticket", + "objectActions": [ + { + "active": true, + "errorMessage": { + "en_US": "Unable to assign ticket." + }, + "label": { + "en_US": "Assign Ticket to Me" + }, + "name": "AssignTicketToMe", + "objectActionExecutorKey": "update-object-entry", + "objectActionTriggerKey": "standalone", + "parameters": { + "objectDefinitionExternalReferenceCode": "TICKET", + "predefinedValues": [ + { + "inputAsValue": false, + "label": { + "en_US": "User to Ticket" + }, + "name": "r_userToTicket_userId", + "value": "currentUserId" + } + ] + }, + "status": { + "code": 1, + "label": "success", + "label_i18n": "Success" + } + }, + { + "active": false, + "conditionExpression": "ticketStatus == 'open'", + "description": "", + "errorMessage": { + }, + "label": { + "en_US": "Liferay Ticket Etc Spring Boot Object Action Ticket" + }, + "name": "SpringBootObjectActionTicket", + "objectActionExecutorKey": "function#liferay-ticket-etc-spring-boot-object-action-ticket", + "objectActionTriggerKey": "onAfterAdd", + "parameters": { + }, + "status": { + "code": 0, + "label": "never-ran", + "label_i18n": "Never Ran" + } + } + ], + "objectFields": [ + { + "DBType": "Long", + "businessType": "Attachment", + "externalReferenceCode": "ATTACHMENT", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Attachment" + }, + "name": "attachment", + "objectFieldSettings": [ + { + "name": "acceptedFileExtensions", + "value": "jpeg, jpg, pdf, png" + }, + { + "name": "maximumFileSize", + "value": "100" + }, + { + "name": "fileSource", + "value": "userComputer" + }, + { + "name": "showFilesInDocumentsAndMedia", + "value": "false" + } + ], + "required": false, + "state": false, + "system": false, + "type": "Long" + }, + { + "DBType": "Clob", + "businessType": "RichText", + "externalReferenceCode": "DESCRIPTION", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Description" + }, + "name": "description", + "objectFieldSettings": [ + ], + "required": false, + "state": false, + "system": false, + "type": "Clob" + }, + { + "DBType": "String", + "businessType": "Picklist", + "defaultValue": "unassigned", + "externalReferenceCode": "PRIORITY", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Priority" + }, + "listTypeDefinitionExternalReferenceCode": "PRIORITIES", + "name": "priority", + "objectFieldSettings": [ + ], + "required": true, + "state": false, + "system": false, + "type": "String" + }, + { + "DBType": "String", + "businessType": "Picklist", + "defaultValue": "eMEA", + "externalReferenceCode": "REGION", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Region" + }, + "listTypeDefinitionExternalReferenceCode": "REGIONS", + "name": "region", + "objectFieldSettings": [ + ], + "required": true, + "state": false, + "system": false, + "type": "String" + }, + { + "DBType": "String", + "businessType": "Picklist", + "externalReferenceCode": "RESOLUTION", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Resolution" + }, + "listTypeDefinitionExternalReferenceCode": "RESOLUTIONS", + "name": "resolution", + "objectFieldSettings": [ + ], + "required": false, + "state": false, + "system": false, + "type": "String" + }, + { + "DBType": "String", + "businessType": "Text", + "externalReferenceCode": "SUBJECT", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Subject" + }, + "name": "subject", + "objectFieldSettings": [ + ], + "required": true, + "state": false, + "system": false, + "type": "String" + }, + { + "DBType": "Clob", + "businessType": "LongText", + "externalReferenceCode": "SUGGESTIONS", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Suggestions" + }, + "name": "suggestions", + "objectFieldSettings": [ + ], + "required": false, + "state": false, + "system": false, + "type": "Clob" + }, + { + "DBType": "String", + "businessType": "Picklist", + "defaultValue": "open", + "externalReferenceCode": "TICKET_STATUS", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Ticket Status" + }, + "listTypeDefinitionExternalReferenceCode": "STATUSES", + "name": "ticketStatus", + "objectFieldSettings": [ + { + "name": "stateFlow", + "value": { + "objectStates": [ + { + "key": "answered", + "objectStateTransitions": [ + { + "key": "closed" + } + ] + }, + { + "key": "closed", + "objectStateTransitions": [ + { + "key": "open" + } + ] + }, + { + "key": "escalated", + "objectStateTransitions": [ + { + "key": "answered" + }, + { + "key": "closed" + }, + { + "key": "inProgress" + }, + { + "key": "inReview" + }, + { + "key": "open" + }, + { + "key": "queued" + }, + { + "key": "verifying" + }, + { + "key": "waiting" + } + ] + }, + { + "key": "inProgress", + "objectStateTransitions": [ + { + "key": "answered" + }, + { + "key": "closed" + } + ] + }, + { + "key": "inReview", + "objectStateTransitions": [ + { + "key": "answered" + }, + { + "key": "closed" + }, + { + "key": "escalated" + }, + { + "key": "inProgress" + }, + { + "key": "open" + }, + { + "key": "queued" + }, + { + "key": "verifying" + }, + { + "key": "waiting" + } + ] + }, + { + "key": "open", + "objectStateTransitions": [ + { + "key": "closed" + }, + { + "key": "inProgress" + } + ] + }, + { + "key": "queued", + "objectStateTransitions": [ + { + "key": "answered" + }, + { + "key": "closed" + }, + { + "key": "escalated" + }, + { + "key": "inProgress" + }, + { + "key": "inReview" + }, + { + "key": "open" + }, + { + "key": "verifying" + }, + { + "key": "waiting" + } + ] + }, + { + "key": "verifying", + "objectStateTransitions": [ + { + "key": "open" + }, + { + "key": "queued" + }, + { + "key": "inProgress" + }, + { + "key": "answered" + }, + { + "key": "escalated" + }, + { + "key": "inReview" + }, + { + "key": "waiting" + }, + { + "key": "closed" + } + ] + }, + { + "key": "waiting", + "objectStateTransitions": [ + { + "key": "answered" + }, + { + "key": "closed" + }, + { + "key": "escalated" + }, + { + "key": "inProgress" + }, + { + "key": "inReview" + }, + { + "key": "open" + }, + { + "key": "queued" + }, + { + "key": "verifying" + } + ] + } + ] + } + } + ], + "required": true, + "state": true, + "system": false, + "type": "String" + }, + { + "DBType": "String", + "businessType": "Picklist", + "defaultValue": "other", + "externalReferenceCode": "TYPE", + "indexed": true, + "indexedAsKeyword": false, + "indexedLanguageId": "en_US", + "label": { + "en_US": "Type" + }, + "listTypeDefinitionExternalReferenceCode": "TYPES", + "name": "type", + "objectFieldSettings": [ + ], + "required": true, + "state": false, + "system": false, + "type": "String" + } + ], + "objectFolderExternalReferenceCode": "TICKETING", + "objectLayouts": [ + ], + "objectRelationships": [ + { + "deletionType": "prevent", + "label": { + "en_US": "Ticket to Tickets" + }, + "name": "ticketToTickets", + "objectDefinitionExternalReferenceCode1": "TICKET", + "objectDefinitionExternalReferenceCode2": "TICKET", + "type": "oneToMany" + } + ], + "objectValidationRules": [ + ], + "objectViews": [ + ], + "panelCategoryKey": "applications_menu.applications.custom.apps", + "parameterRequired": false, + "pluralLabel": { + "en_US": "Tickets" + }, + "portlet": true, + "restContextPath": "/o/c/tickets", + "scope": "company", + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "system": false, + "titleObjectFieldName": "subject" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/03-user-relationship.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/03-user-relationship.batch-engine-data.json new file mode 100644 index 0000000..bec0539 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/03-user-relationship.batch-engine-data.json @@ -0,0 +1,26 @@ +{ + "configuration": { + "className": "com.liferay.object.admin.rest.dto.v1_0.ObjectRelationship", + "parameters": { + "containsHeaders": "true", + "createStrategy": "INSERT", + "externalReferenceCode": "L_USER", + "onErrorFail": "false", + "taskItemDelegateName": "DEFAULT", + "updateStrategy": "UPDATE" + } + }, + "items": [ + { + "deletionType": "prevent", + "label": { + "en_US": "User to Tickets" + }, + "name": "userToTickets", + "externalReferenceCode": "USER_TO_TICKETS", + "objectDefinitionExternalReferenceCode1": "L_USER", + "objectDefinitionExternalReferenceCode2": "TICKET", + "type": "oneToMany" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/04-account-relationship.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/04-account-relationship.batch-engine-data.json new file mode 100644 index 0000000..1ae71b9 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/04-account-relationship.batch-engine-data.json @@ -0,0 +1,26 @@ +{ + "configuration": { + "className": "com.liferay.object.admin.rest.dto.v1_0.ObjectRelationship", + "parameters": { + "containsHeaders": "true", + "createStrategy": "INSERT", + "externalReferenceCode": "L_ACCOUNT", + "onErrorFail": "false", + "taskItemDelegateName": "DEFAULT", + "updateStrategy": "UPDATE" + } + }, + "items": [ + { + "deletionType": "prevent", + "label": { + "en_US": "Account to Tickets" + }, + "name": "accountToTickets", + "externalReferenceCode": "ACCOUNT_TO_TICKETS", + "objectDefinitionExternalReferenceCode1": "L_ACCOUNT", + "objectDefinitionExternalReferenceCode2": "TICKET", + "type": "oneToMany" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/05-ticket-update.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/05-ticket-update.batch-engine-data.json new file mode 100644 index 0000000..9b8046b --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/05-ticket-update.batch-engine-data.json @@ -0,0 +1,19 @@ +{ + "configuration": { + "className": "com.liferay.object.admin.rest.dto.v1_0.ObjectDefinition", + "parameters": { + "containsHeaders": "true", + "createStrategy": "UPSERT", + "onErrorFail": "false", + "taskItemDelegateName": "DEFAULT", + "updateStrategy": "PARTIAL_UPDATE" + } + }, + "items": [ + { + "accountEntryRestricted": true, + "accountEntryRestrictedObjectFieldName": "r_accountToTickets_accountEntryId", + "externalReferenceCode": "TICKET" + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/batch/06-ticket-entry.batch-engine-data.json b/client-extensions/clarity-ticketing-batch/batch/06-ticket-entry.batch-engine-data.json new file mode 100644 index 0000000..0ee20f0 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/batch/06-ticket-entry.batch-engine-data.json @@ -0,0 +1,194 @@ +{ + "configuration": { + "className": "com.liferay.object.rest.dto.v1_0.ObjectEntry", + "parameters": { + "containsHeaders": "true", + "createStrategy": "UPSERT", + "onErrorFail": "false", + "updateStrategy": "UPDATE" + }, + "taskItemDelegateName": "C_Ticket" + }, + "items": [ + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "Is there any company that you have partnered with in order to do little adjustments to my frames?", + "externalReferenceCode": "TICKET_1", + "priority": { + "key": "minor", + "name": "Minor" + }, + "r_accountToTickets_accountEntryERC": "ACCT_IRIS", + "r_userToTickets_userERC": "USER_RENEE", + "region": { + "key": "lATAM", + "name": "LATAM" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "How to adjust or tighten my frames?", + "ticketStatus": { + "key": "open", + "name": "Open" + }, + "type": { + "key": "other", + "name": "Other" + } + }, + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "No, we don’t have any retail stores because we make the digital experience even better.", + "externalReferenceCode": "TICKET_2", + "priority": { + "key": "critical", + "name": "Critical" + }, + "r_accountToTickets_accountEntryERC": "ACCT_RETRO", + "r_userToTickets_userERC": "USER_EMILY", + "region": { + "key": "lATAM", + "name": "LATAM" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "Do you have any retail stores?", + "ticketStatus": { + "key": "open", + "name": "Open" + }, + "type": { + "key": "other", + "name": "Other" + } + }, + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "All our glasses and sunglasses are a Standard Size. For the majority of people, this Standard Size is the correct fit on the face.", + "externalReferenceCode": "TICKET_3", + "priority": { + "key": "major", + "name": "Major" + }, + "r_accountToTickets_accountEntryERC": "ACCT_RETRO", + "r_userToTickets_userERC": "USER_EMILY", + "region": { + "key": "lATAM", + "name": "LATAM" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "How do I measure eyeglasses or sunglasses?", + "ticketStatus": { + "key": "open", + "name": "Open" + }, + "type": { + "key": "other", + "name": "Other" + } + }, + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "I need to understand what's the process for sending my glassess to a review as they have different problems in the side pieces.", + "externalReferenceCode": "TICKET_4", + "priority": { + "key": "moderate", + "name": "Moderate" + }, + "r_accountToTickets_accountEntryERC": "ACCT_RETRO", + "r_userToTickets_userERC": "USER_EMILY", + "region": { + "key": "aPAC", + "name": "APAC" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "Asking for help related to my glasses, model 45TRGR", + "ticketStatus": { + "key": "inProgress", + "name": "In Progress" + }, + "type": { + "key": "other", + "name": "Other" + } + }, + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "I need to adquire another pair of glasses. For existing customers, are you thinking on creating a specific promotion?", + "externalReferenceCode": "TICKET_5", + "priority": { + "key": "unassigned", + "name": "Unassigned" + }, + "r_accountToTickets_accountEntryERC": "ACCT_FOCUS", + "r_userToTickets_userERC": "USER_NEIL", + "region": { + "key": "aPAC", + "name": "APAC" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "Is there any expected promo for this summer?", + "ticketStatus": { + "key": "inProgress", + "name": "In Progress" + }, + "type": { + "key": "other", + "name": "Other" + } + }, + { + "dateCreated": "2023-05-04T21:49:04Z", + "dateModified": "2023-05-04T21:49:04Z", + "description": "I want to know what are the main recommended brands to clean my glasses, model 45TRGR", + "externalReferenceCode": "TICKET_6", + "priority": { + "key": "unassigned", + "name": "Unassigned" + }, + "r_accountToTickets_accountEntryERC": "ACCT_IRIS", + "r_userToTickets_userERC": "USER_RENEE", + "region": { + "key": "aPAC", + "name": "APAC" + }, + "status": { + "code": 0, + "label": "approved", + "label_i18n": "Approved" + }, + "subject": "Main cleaning products", + "ticketStatus": { + "key": "open", + "name": "Open" + }, + "type": { + "key": "other", + "name": "Other" + } + } + ] +} \ No newline at end of file diff --git a/client-extensions/clarity-ticketing-batch/client-extension.yaml b/client-extensions/clarity-ticketing-batch/client-extension.yaml new file mode 100644 index 0000000..4883653 --- /dev/null +++ b/client-extensions/clarity-ticketing-batch/client-extension.yaml @@ -0,0 +1,17 @@ +assemble: + - from: batch + into: batch +clarity-ticketing-batch: + name: Clarity Ticketing Batch + oAuthApplicationHeadlessServer: clarity-ticketing-batch-oauth-application-headless-server + type: batch +clarity-ticketing-batch-oauth-application-headless-server: + .serviceAddress: localhost:8080 + .serviceScheme: http + name: Clarity Ticketing Batch OAuth Application Headless Server + scopes: + - C_Ticket.everything + - Liferay.Headless.Admin.List.Type.everything + - Liferay.Headless.Batch.Engine.everything + - Liferay.Object.Admin.REST.everything + type: oAuthApplicationHeadlessServer \ No newline at end of file