diff --git a/apps/console/src/app/globals.css b/apps/console/src/app/globals.css index 7c9c217b..44e756ef 100644 --- a/apps/console/src/app/globals.css +++ b/apps/console/src/app/globals.css @@ -5,7 +5,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - @apply text-firefly-950 dark:text-ziggurat-200 font-sans; + @apply text-neutral-950 dark:text-neutral-200 font-sans; } h4 { @@ -16,9 +16,9 @@ h5 { @apply text-[1.313rem] tracking-[-0.033rem]; } p { - @apply text-firefly-950/90 dark:text-ziggurat-200; + @apply text-neutral-800 dark:text-neutral-300; } p.red { - @apply text-util-red-500; + @apply text-red-500; } diff --git a/apps/console/src/app/layout.tsx b/apps/console/src/app/layout.tsx index 93a635e2..e82791b0 100644 --- a/apps/console/src/app/layout.tsx +++ b/apps/console/src/app/layout.tsx @@ -27,7 +27,7 @@ export default function RootLayout({ {children} diff --git a/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx b/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx index 3dd1ac90..83bced78 100644 --- a/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx +++ b/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx @@ -164,7 +164,7 @@ export default function CreateQuestionnaire(input: { templateId: string, existin } return ( - + ) diff --git a/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx b/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx index 30436cc9..c5c20cea 100644 --- a/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx +++ b/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx @@ -1,175 +1,971 @@ -import { ITheme } from "survey-core"; +import { ITheme } from 'survey-core' -export const darkTheme : ITheme = { - "backgroundImageFit": "cover", - "backgroundImageAttachment": "scroll", - "backgroundOpacity": 1, - "cssVariables": { - "--background": "#2a4750", - "--foreground": "#bdd9e1", - "--ctr-button-group-item-text-color": "#bdd9e1", - "--sjs-general-forecolor": "#bdd9e1", - "--ctr-editor-background-color": "#2a4750", - "--ctr-property-grid-chapter-caption-background-color-selected": "#2a4750", - "--sjs-general-backcolor": "#2a4750", - "--ctr-list-item-background-color-selected": "#09f1c7", - "--ctr-menu-item-background-color-hovered": "#00deb7", - "--sjs-questionpanel-hovercolor": "#f5f9fa", - "--ctr-property-grid-chapter-caption-text-color-selected": "#bdd9e1", - "--ctr-survey-question-panel-toolbar-item-text-color": "#bdd9e1", - "--ctr-survey-header-logo-placeholder-icon-color": "#303e4a", - "--ctr-list-item-text-color": "#bdd9e1", - "--ctr-property-grid-search-count-text-color": "#bdd9e1", - "--ctr-property-grid-search-button-icon-color": "#bdd9e1", - "--ctr-property-grid-search-icon-color": "#bdd9e1", - "--ctr-list-item-text-color-selected": "#082930", - "--ctr-menu-toolbar-button-background-color-pressed": "#09f1c7", - "--ctr-menu-toolbar-button-text-color": "#bdd9e1", - "--ctr-menu-toolbar-button-text-color-selected": "#bdd9e1", - "--ctr-checkbox-text-color": "#bdd9e1", - "--sjs-corner-radius": "4px", - "--sjs-base-unit": "8px", - "--sjs-font-pagetitle-color": "#bdd9e1", - "--sjs-font-pagedescription-color": "#bdd9e1", - "--sjs-font-surveytitle-color": "#bdd9e1", - "--sjs-font-surveydescription-color": "#bdd9e1", - "--sjs-font-questiontitle-color": "#bdd9e1", - "--sjs-font-questiondescription-color": "#bdd9e1", - "--sjs-font-editorfont-color": "#bdd9e1", - "--ctr-editor-content-text-color": "#bdd9e1", - "--ctr-survey-header-text-title-color-placeholder": "#bdd9e1", - "--sjs-font-editorfont-placeholdercolor": "#bdd9e1", - "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)", - "--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)", - "--sjs-border-default": "#c2d7df", - "--sjs-border-light": "#c2d7df", - "--ctr-menu-item-border-color-selected": "#09f1c7", - "--ctr-property-grid-form-background-color": "#303e4a", - "--sjs-general-dim-forecolor": "#bdd9e1", - "--ctr-survey-page-header-title-color-placeholder": "#bdd9e1", - "--primary-foreground": "#303e4a", - "--ctr-property-grid-search-text-color": "#bdd9e1", - "--sjs-secondary-backcolor": "#09f1c7", - "--sjs-secondary-backcolor-light": "#09f1c7", - "--sjs-secondary-backcolor-semi-light": "#09f1c7", - "--sjs-secondary-forecolor": "#303e4a", - "--sjs-secondary-forecolor-25": "#303e4a", - "--sjs-secondary-forecolor-50": "#303e4a", - "--sjs-secondary-foreground-100": "#303e4a", - "--sjs-secondary-foreground-200": "#303e4a", - "--sjs-secondary-foreground-300": "#303e4a", - "--sjs-secondary-foreground-400": "#303e4a", - "--sjs-secondary-foreground-500": "#303e4a", - "--sjs-secondary-foreground-600": "#303e4a", - "--sjs-secondary-foreground-700": "#303e4a", - "--sjs-secondary-foreground-800": "#303e4a", - "--sjs-secondary-foreground-900": "#303e4a", - "--sjs-secondary-forecolor-light": "#303e4a", - "--sjs-layer-1-foreground-100 " : "#303e4a", - "--sjs-layer-1-foreground-200 " : "#303e4a", - "--sjs-layer-1-foreground-300 " : "#303e4a", - "--sjs-layer-1-foreground-400 " : "#303e4a", - "--sjs-layer-1-foreground-500 " : "#303e4a", - "--sjs-layer-1-foreground-600 " : "#303e4a", - "--sjs-layer-1-foreground-700 " : "#303e4a", - "--sjs-layer-1-foreground-800 " : "#303e4a", - "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)", - "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)", - "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)", - "--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)", - "--sjs-border-inside": "#c2d7df", - "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)", - "--sjs-special-green": "rgba(25, 179, 148, 1)", - "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)", - "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)", - "--sjs-special-blue": "rgba(67, 127, 217, 1)", - "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)", - "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)", - "--sjs-special-yellow": "rgba(255, 152, 20, 1)", - "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)", - "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)", - "--sjs-article-font-xx-large-textDecoration": "none", - "--sjs-article-font-xx-large-fontWeight": "400", - "--sjs-article-font-xx-large-fontStyle": "normal", - "--sjs-article-font-xx-large-fontStretch": "normal", - "--sjs-article-font-xx-large-letterSpacing": "0", - "--sjs-article-font-xx-large-lineHeight": "64px", - "--sjs-article-font-xx-large-paragraphIndent": "0px", - "--sjs-article-font-xx-large-textCase": "none", - "--sjs-article-font-x-large-textDecoration": "none", - "--sjs-article-font-x-large-fontWeight": "400", - "--sjs-article-font-x-large-fontStyle": "normal", - "--sjs-article-font-x-large-fontStretch": "normal", - "--sjs-article-font-x-large-letterSpacing": "0", - "--sjs-article-font-x-large-lineHeight": "56px", - "--sjs-article-font-x-large-paragraphIndent": "0px", - "--sjs-article-font-x-large-textCase": "none", - "--sjs-article-font-large-textDecoration": "none", - "--sjs-article-font-large-fontWeight": "400", - "--sjs-article-font-large-fontStyle": "normal", - "--sjs-article-font-large-fontStretch": "normal", - "--sjs-article-font-large-letterSpacing": "0", - "--sjs-article-font-large-lineHeight": "40px", - "--sjs-article-font-large-paragraphIndent": "0px", - "--sjs-article-font-large-textCase": "none", - "--sjs-article-font-medium-textDecoration": "none", - "--sjs-article-font-medium-fontWeight": "400", - "--sjs-article-font-medium-fontStyle": "normal", - "--sjs-article-font-medium-fontStretch": "normal", - "--sjs-article-font-medium-letterSpacing": "0", - "--sjs-article-font-medium-lineHeight": "32px", - "--sjs-article-font-medium-paragraphIndent": "0px", - "--sjs-article-font-medium-textCase": "none", - "--sjs-article-font-default-textDecoration": "none", - "--sjs-article-font-default-fontWeight": "400", - "--sjs-article-font-default-fontStyle": "normal", - "--sjs-article-font-default-fontStretch": "normal", - "--sjs-article-font-default-letterSpacing": "0", - "--sjs-article-font-default-lineHeight": "28px", - "--sjs-article-font-default-paragraphIndent": "0px", - "--sjs-article-font-default-textCase": "none", - "--sjs-general-backcolor-dim": "#303e4a", - "--sjs-primary-backcolor": "#bdd9e1", - "--sjs-primary-backcolor-dark": "#09f1c7", - "--sjs-secondary-background-800": "#007364", - "--sjs-secondary-background-700": "#00927d", - "--sjs-secondary-background-600": "#00b696", - "--sjs-secondary-background-500": "#00deb7", - "--sjs-secondary-background-400": "#09f1c7", - "--sjs-secondary-background-300": "#53ffdd", - "--sjs-secondary-background-200": "#96ffe4", - "--sjs-secondary-background-100": "#c8ffef", - "--sjs-secondary-background-10": "#c8ffef", - "--sjs-secondary-background-25": "#c8ffef", - "--sjs-secondary-background-50": "#c8ffef", - "--sjs-primary-foreground-25": "#bdd9e1", - "--sjs-primary-foreground-50": "#bdd9e1", - "--sjs-primary-foreground-100": "#bdd9e1", - "--sjs-primary-foreground-200": "#bdd9e1", - "--sjs-primary-foreground-300": "#bdd9e1", - "--sjs-primary-foreground-400": "#bdd9e1", - "--sjs-primary-foreground-500": "#bdd9e1", - "--sjs-primary-foreground-600": "#bdd9e1", - "--sjs-primary-foreground-700": "#bdd9e1", - "--sjs-primary-foreground-800": "#bdd9e1", - "--sjs-primary-foreground-900": "#bdd9e1", - "--sjs-primary-backcolor-light": "#09f1c7", - "--sjs-primary-background-500": "#09f1c7", - "--sjs-primary-forecolor": "#303e4a", - "--sjs-primary-forecolor-light": "#303e4a", - "--sjs-special-red": "rgba(229, 10, 62, 1)", - "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)", - "--sjs-font-surveytitle-family": "var(--font-mincho)", - "--sjs-font-headertitle-family": "var(--font-mincho)", - "--ctr-font-family-code": "var(--font-outfit)", - "--ctr-font-family": "var(--font-outfit)", - "--sjs-default-font-family": "var(--font-outfit)", - "--sjs-font-family": "var(--font-outfit)", - "--sjs-font-headertitle-weight": "400", - "--sjs-header-backcolor": "#bdd9e1", - "--ctr-survey-question-panel-toolbar-item-icon-color": "#09f1c7", - }, - "themeName": "openlane", - "colorPalette": "light", - "isPanelless": true, +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '../../../../../tailwind.config'; +export const fullConfig = resolveConfig(tailwindConfig) as { + theme: { + colors: Record + fontSize: Record + spacing: Record + } +} + +const colors = { + primary: fullConfig.theme.colors.java['400'], + secondary: fullConfig.theme.colors.firefly['400'], + yellow: fullConfig.theme.colors.saffron['400'], + + surface: fullConfig.theme.colors.glaucous['950'], + background: fullConfig.theme.colors.glaucous['900'], + backgroundDim: fullConfig.theme.colors.glaucous['800'], + borderColor: fullConfig.theme.colors['oxford-blue']['700'], + backgroundLight: fullConfig.theme.colors.java['700'], + textColor: fullConfig.theme.colors.ziggurat['200'], + textColorDim: fullConfig.theme.colors.ziggurat['400'], + inputPlaceholderColor: fullConfig.theme.colors.ziggurat['400'], + iconColor: fullConfig.theme.colors.java['400'] +} + +// https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css +// exported from https://surveyjs.io/create-free-survey - use the theme tab, go to theme,then use the export button +const SJS_THEME = { + "--foreground": colors.textColor, + "--background": colors.background, + "--background-dim-light": colors.surface, + "--primary": colors.primary, + "--secondary": colors.secondary, + "--secondary-light": colors.secondary, + "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.35)", + "--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2)", + "--sjs-border-default": "rgba(255, 255, 255, 0.12)", + "--sjs-border-light": "rgba(255, 255, 255, 0.08)", + "--sjs-general-backcolor": colors.background, + "--sjs-general-backcolor-dark": "rgba(52, 52, 52, 1)", + "--sjs-general-backcolor-dim-light": "rgba(43, 43, 43, 1)", + "--sjs-general-backcolor-dim-dark": "rgba(46, 46, 46, 1)", + "--sjs-general-forecolor": colors.textColor, + "--sjs-general-forecolor-light": colors.textColorDim, + "--sjs-general-dim-forecolor": "rgba(255, 255, 255, 0.79)", + "--sjs-general-dim-forecolor-light": "rgba(255, 255, 255, 0.45)", + "--sjs-secondary-backcolor": colors.secondary, + "--sjs-secondary-backcolor-light": colors.secondary, + "--sjs-secondary-backcolor-semi-light": colors.secondary, + "--sjs-secondary-forecolor": "rgba(48, 48, 48, 1)", + "--sjs-secondary-forecolor-light": "rgba(48, 48, 48, 0.25)", + "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.35)", + "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.2)", + "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.2)", + "--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2)", + "--sjs-border-inside": "rgba(255, 255, 255, 0.08)", + "--sjs-special-red-forecolor": "rgba(48, 48, 48, 1)", + "--sjs-special-green": "rgba(36, 197, 164, 1)", + "--sjs-special-green-light": "rgba(36, 197, 164, 0.1)", + "--sjs-special-green-forecolor": "rgba(48, 48, 48, 1)", + "--sjs-special-blue": "rgba(91, 151, 242, 1)", + "--sjs-special-blue-light": "rgba(91, 151, 242, 0.1)", + "--sjs-special-blue-forecolor": "rgba(48, 48, 48, 1)", + "--sjs-special-yellow": "rgba(255, 152, 20, 1)", + "--sjs-special-yellow-light": "rgba(0, 255, 20, 0.1)", + "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)", + "--sjs-general-backcolor-dim": "rgba(36, 36, 36, 1)", + "--sjs-primary-backcolor": colors.primary, + "--sjs-primary-backcolor-dark": "rgba(0, 255, 0, 1)", + "--sjs-primary-backcolor-light": "rgba(0, 255, 0, 0.07)", + "--sjs-primary-forecolor": "rgba(32, 32, 32, 1)", + "--sjs-primary-forecolor-light": "rgba(32, 32, 32, 0.25)", + "--sjs-special-red": "rgba(254, 76, 108, 1)", + "--sjs-special-red-light": "rgba(254, 76, 108, 0.1)", + "--sjs-questionpanel-hovercolor": colors.backgroundDim, +}; + +// this theme is from the suveyjs creator colors +// the default theme variables are here: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/src/themes/default.ts +export const darkTheme: ITheme = { + backgroundImageFit: 'cover', + backgroundImageAttachment: 'scroll', + backgroundOpacity: 1, + cssVariables: { + ...SJS_THEME, + "--ctr-actionbar-button-background-color-hovered": colors.backgroundDim, + // "--ctr-actionbar-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-actionbar-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-actionbar-button-icon-color-with-text-disabled": colors.textColor, + "--ctr-actionbar-button-icon-color": colors.textColor, + // "--ctr-actionbar-button-icon-height-small": "var(--sjs-size-x2)", + // "--ctr-actionbar-button-icon-height": "var(--sjs-size-x3)", + // "--ctr-actionbar-button-icon-width-small": "var(--sjs-size-x2)", + // "--ctr-actionbar-button-icon-width": "var(--sjs-size-x3)", + // "--ctr-actionbar-button-opacity-disabled": 0.25, + // "--ctr-actionbar-button-opacity-muted": 0.35, + // "--ctr-actionbar-button-opacity-pressed": 0.5, + // "--ctr-actionbar-button-padding-bottom-large-icon": "var(--sjs-spacing-x1)", + // "--ctr-actionbar-button-padding-bottom-medium-text": "var(--sjs-spacing-x05)", + // "--ctr-actionbar-button-padding-bottom-small-icon": "var(--sjs-spacing-x05)", + // "--ctr-actionbar-button-padding-left-large-icon": "var(--sjs-spacing-x1)", + // "--ctr-actionbar-button-padding-left-medium-text": "var(--sjs-spacing-x2)", + // "--ctr-actionbar-button-padding-left-small-icon": "var(--sjs-spacing-x05)", + // "--ctr-actionbar-button-padding-right-large-icon": "var(--sjs-spacing-x1)", + // "--ctr-actionbar-button-padding-right-medium-text": "var(--sjs-spacing-x2)", + // "--ctr-actionbar-button-padding-right-small-icon": "var(--sjs-spacing-x05)", + // "--ctr-actionbar-button-padding-top-large-icon": "var(--sjs-spacing-x1)", + // "--ctr-actionbar-button-padding-top-medium-text": "var(--sjs-spacing-x05)", + // "--ctr-actionbar-button-padding-top-small-icon": "var(--sjs-spacing-x05)", + "--ctr-actionbar-button-text-color-disabled": colors.textColor, + "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)", + "--ctr-button-background-color-cta-hovered": "var(--sjs-primary-background-400)", + "--ctr-button-background-color-cta": "var(--sjs-primary-background-500)", + "--ctr-button-background-color-danger": "var(--sjs-semantic-red-background-500)", + "--ctr-button-background-color-hovered": colors.backgroundDim, + "--ctr-button-background-color": colors.background, + "--ctr-button-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-button-contextual-button-background-color-focused": colors.backgroundDim, + "--ctr-button-contextual-button-background-color-hovered": colors.backgroundDim, + // "--ctr-button-contextual-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-button-contextual-button-icon-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-button-contextual-button-icon-height": "var(--sjs-size-x3)", + // "--ctr-button-contextual-button-icon-width": "var(--sjs-size-x3)", + // "--ctr-button-contextual-button-margin-horizontal": "var(--sjs-spacing-x1)", + // "--ctr-button-contextual-button-margin-vertical": "var(--sjs-spacing-x1)", + // "--ctr-button-contextual-button-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-button-contextual-button-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-button-contextual-button-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-button-contextual-button-padding-top": "var(--sjs-spacing-x1)", + // "--ctr-button-corner-radius-small": "var(--sjs-corner-radius-x075)", + // "--ctr-button-corner-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-button-gap": "var(--sjs-spacing-x4)", + "--ctr-button-group-background-color-disabled": colors.background, + "--ctr-button-group-background-color": colors.background, + "--ctr-button-group-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-button-group-border-color": colors.backgroundDim, + // "--ctr-button-group-border-width-focused": "var(--sjs-stroke-x2)", + // "--ctr-button-group-border-width": "var(--sjs-stroke-x1)", + // "--ctr-button-group-corner-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-button-group-gap": "var(--sjs-spacing-x05)", + "--ctr-button-group-item-background-color-disabled": colors.background, + "--ctr-button-group-item-background-color-hovered": colors.backgroundDim, + "--ctr-button-group-item-background-color-selected-disabled": colors.backgroundDim, + "--ctr-button-group-item-background-color-selected": colors.backgroundDim, + "--ctr-button-group-item-background-color": colors.background, + "--ctr-button-group-item-border-color": colors.backgroundDim, + // "--ctr-button-group-item-border-width-selected-disabled": "0px", + // "--ctr-button-group-item-border-width-selected": "var(--sjs-stroke-x1)", + // "--ctr-button-group-item-border-width": "0px", + // "--ctr-button-group-item-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-button-group-item-icon-color-selected": "var(--sjs-primary-background-500)", + "--ctr-button-group-item-icon-color": colors.iconColor, + // "--ctr-button-group-item-padding-horizontal": "var(--sjs-spacing-x2)", + // "--ctr-button-group-item-padding-vertical": "var(--sjs-spacing-x1)", + "--ctr-button-group-item-text-color-disabled": colors.textColor, + "--ctr-button-group-item-text-color-selected": "var(--sjs-primary-background-500)", + "--ctr-button-group-item-text-color": colors.textColor, + // "--ctr-button-group-item-text-opacity-disabled": 0.25, + // "--ctr-button-group-padding": "var(--sjs-spacing-x05)", + // "--ctr-button-padding-horizontal-small": "var(--sjs-spacing-x4)", + // "--ctr-button-padding-vertical-small": "var(--sjs-spacing-x150)", + // "--ctr-button-shadow-blur": "var(--ctr-shadow-small-blur)", + "--ctr-button-shadow-color": "var(--ctr-shadow-small-color)", + // "--ctr-button-shadow-offset-x": "var(--ctr-shadow-small-offset-x)", + // "--ctr-button-shadow-offset-y": "var(--ctr-shadow-small-offset-y)", + // "--ctr-button-shadow-spread": "var(--ctr-shadow-small-spread)", + "--ctr-button-text-color-cta": "var(--sjs-primary-foreground-100)", + "--ctr-button-text-color-disabled": colors.textColor, + "--ctr-button-text-color": "var(--sjs-primary-background-500)", + // "--ctr-button-text-opacity-disabled": 0.25, + "--ctr-caption-with-actions-description-text-color-disabled": colors.textColor, + "--ctr-caption-with-actions-description-text-color": colors.textColor, + "--ctr-caption-with-actions-text-color-disabled": colors.textColor, + "--ctr-caption-with-actions-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-checkbox-background-color-disabled": colors.background, + "--ctr-checkbox-background-color-hovered": colors.background, + "--ctr-checkbox-background-color-selected-hovered": colors.background, + "--ctr-checkbox-background-color": colors.background, + "--ctr-checkbox-border-color-disabled": colors.backgroundDim, + "--ctr-checkbox-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-checkbox-border-color": colors.backgroundDim, + // "--ctr-checkbox-border-width": "var(--sjs-stroke-x1)", + "--ctr-checkbox-button-check-mark-color-disabled": colors.borderColor, + "--ctr-checkbox-button-check-mark-color": "var(--sjs-primary-background-500)", + // "--ctr-checkbox-button-check-mark-height": "var(--sjs-size-x2)", + // "--ctr-checkbox-button-check-mark-width": "var(--sjs-size-x2)", + // "--ctr-checkbox-button-height": "var(--sjs-size-x3)", + // "--ctr-checkbox-button-width": "var(--sjs-size-x3)", + // "--ctr-checkbox-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-checkbox-description-text-color": colors.textColor, + // "--ctr-checkbox-description-text-margin-left": "var(--sjs-spacing-x4)", + // "--ctr-checkbox-gap": "var(--sjs-spacing-x1)", + // "--ctr-checkbox-list-gap-vertical": "var(--sjs-spacing-x2)", + "--ctr-checkbox-text-color-disabled": colors.textColor, + "--ctr-checkbox-text-color": colors.textColor, + "--ctr-code-viewer-background-color": colors.background, + // "--ctr-code-viewer-code-error-row-icon-height": "var(--sjs-size-x2)", + // "--ctr-code-viewer-code-error-row-icon-width": "var(--sjs-size-x2)", + "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-code-viewer-line-number-panel-text-color": "var(--sjs-layer-2-foreground-50)", + "--ctr-code-viewer-text-color": "var(--sjs-code-gray-300)", + "--ctr-collapse-button-background-color-hovered": colors.backgroundDim, + // "--ctr-collapse-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-collapse-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-collapse-button-icon-color": colors.iconColor, + // "--ctr-corner-radius-unit": "8px", + "--ctr-data-table-background-color": colors.backgroundDim, + "--ctr-data-table-border-color": colors.borderColor, + // "--ctr-data-table-border-width": "var(--sjs-stroke-x1)", + "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)", + // "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)", + "--ctr-data-table-cell-drop-down-arrow-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-data-table-cell-drop-down-arrow-height": "var(--sjs-size-x3)", + // "--ctr-data-table-cell-drop-down-arrow-opacity": 0.5, + // "--ctr-data-table-cell-drop-down-arrow-width": "var(--sjs-size-x3)", + // "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-data-table-cell-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)", + "--ctr-data-table-cell-text-color-header": colors.inputPlaceholderColor, + // "--ctr-data-table-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-data-table-form-background-color": colors.background, + "--ctr-data-table-form-border-color": colors.backgroundDim, + // "--ctr-data-table-placeholder-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-data-table-row-background-color-drop-spot": colors.backgroundDim, + "--ctr-data-table-row-background-color-header": colors.background, + "--ctr-data-table-row-background-color": colors.background, + "--ctr-data-table-row-border-color": colors.backgroundDim, + // "--ctr-data-table-row-border-width-last-row": "0px", + // "--ctr-data-table-row-border-width": "var(--sjs-stroke-x1)", + // "--ctr-data-table-row-corner-radius-floating": "var(--sjs-corner-radius-x05)", + "--ctr-data-table-row-drag-area-icon-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-data-table-row-padding-bottom-header": "var(--sjs-spacing-x1)", + // "--ctr-data-table-row-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-data-table-row-padding-left": "0px", + // "--ctr-data-table-row-padding-right": "var(--sjs-spacing-x05)", + // "--ctr-data-table-row-padding-top-header": "var(--sjs-spacing-x1)", + // "--ctr-data-table-row-padding-top": "var(--sjs-spacing-x05)", + // "--ctr-data-table-row-shadow-floating-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-data-table-row-shadow-floating-1-color": "var(--ctr-shadow-medium-color)", + // "--ctr-data-table-row-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-data-table-row-shadow-floating-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-data-table-row-shadow-floating-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-data-table-row-shadow-floating-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-data-table-row-shadow-floating-2-color": "var(--ctr-shadow-large-color)", + // "--ctr-data-table-row-shadow-floating-2-offset-x": "var(--ctr-shadow-large-offset-x)", + // "--ctr-data-table-row-shadow-floating-2-offset-y": "var(--ctr-shadow-large-offset-y)", + // "--ctr-data-table-row-shadow-floating-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-editor-background-color-disabled": colors.background, + "--ctr-editor-background-color": colors.surface, + "--ctr-editor-border-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-editor-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-editor-border-color": colors.backgroundDim, + // "--ctr-editor-border-width-focused": "var(--sjs-stroke-x2)", + // "--ctr-editor-border-width": "var(--sjs-stroke-x1)", + "--ctr-editor-button-background-color-hovered": colors.background, + // "--ctr-editor-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-editor-button-icon-color-disabled": colors.iconColor, + "--ctr-editor-button-icon-color": colors.iconColor, + // "--ctr-editor-button-icon-height": "var(--sjs-size-x3)", + // "--ctr-editor-button-icon-opacity-disabled": 0.25, + // "--ctr-editor-button-icon-opacity-pressed": 0.5, + // "--ctr-editor-button-icon-width": "var(--sjs-size-x3)", + // "--ctr-editor-button-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-editor-button-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-editor-button-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-editor-button-padding-top": "var(--sjs-spacing-x1)", + "--ctr-editor-button-text-color": colors.textColor, + // "--ctr-editor-buttons-gap": "var(--sjs-spacing-x05)", + "--ctr-editor-color-swatch-icon-height": "var(--sjs-size-x2)", + "--ctr-editor-color-swatch-icon-width": "var(--sjs-size-x2)", + "--ctr-editor-color-swatch-margin-left": "var(--sjs-spacing-x150)", + "--ctr-editor-content-icon-color": colors.iconColor, + // "--ctr-editor-content-margin-bottom": "var(--sjs-spacing-x1)", + // "--ctr-editor-content-margin-left": "var(--sjs-spacing-x150)", + // "--ctr-editor-content-margin-right": "var(--sjs-spacing-x150)", + // "--ctr-editor-content-margin-top": "var(--sjs-spacing-x1)", + "--ctr-editor-content-text-color-disabled": colors.textColor, + "--ctr-editor-content-text-color-placeholder": colors.inputPlaceholderColor, + "--ctr-editor-content-text-color": colors.textColor, + // "--ctr-editor-content-text-opacity-disabled": 0.25, + // "--ctr-editor-corner-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-editor-gap": "var(--sjs-spacing-x05)", + "--ctr-editor-label-color-disabled": colors.textColor, + "--ctr-editor-label-color": colors.inputPlaceholderColor, + // "--ctr-editor-label-opacity-disabled": 0.25, + // "--ctr-editor-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-editor-padding-left": "var(--sjs-spacing-x05)", + // "--ctr-editor-padding-right": "var(--sjs-spacing-x05)", + // "--ctr-editor-padding-top": "var(--sjs-spacing-x05)", + "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)", + // "--ctr-error-message-corner-radius": "var(--sjs-corner-radius-x05)", + // "--ctr-error-message-gap": "var(--sjs-spacing-x1)", + "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)", + // "--ctr-error-message-icon-height": "var(--sjs-size-x3)", + // "--ctr-error-message-icon-width": "var(--sjs-size-x3)", + // "--ctr-error-message-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-error-message-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-error-message-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-error-message-padding-top": "var(--sjs-spacing-x1)", + "--ctr-error-message-text-color": colors.textColor, + "--ctr-expression-item-background-color-action-hovered": "var(--sjs-semantic-red-background-500)", + "--ctr-expression-item-background-color-action": "var(--sjs-semantic-red-background-10)", + "--ctr-expression-item-background-color-button-hovered": "var(--sjs-primary-background-500)", + "--ctr-expression-item-background-color-button": colors.backgroundDim, + "--ctr-expression-item-background-color-conjunction-hovered": "var(--sjs-semantic-yellow-background-500)", + "--ctr-expression-item-background-color-conjunction": "var(--sjs-semantic-yellow-background-10)", + "--ctr-expression-item-background-color-operator-hovered": "var(--sjs-semantic-yellow-background-500)", + "--ctr-expression-item-background-color-operator": "var(--sjs-semantic-yellow-background-10)", + "--ctr-expression-item-background-color-parameter-error": colors.background, + "--ctr-expression-item-background-color-parameter-hovered": "var(--sjs-semantic-blue-background-500)", + "--ctr-expression-item-background-color-parameter": "var(--sjs-semantic-blue-background-10)", + // "--ctr-expression-item-corner-radius": "var(--sjs-corner-radius-x1)", + // "--ctr-expression-item-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-expression-item-padding-left-button": "var(--sjs-spacing-x4)", + // "--ctr-expression-item-padding-left": "var(--sjs-spacing-x2)", + // "--ctr-expression-item-padding-right-button": "var(--sjs-spacing-x4)", + // "--ctr-expression-item-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-expression-item-padding-top": "var(--sjs-spacing-x1)", + "--ctr-expression-item-text-color-action-hovered": "var(--sjs-semantic-red-foreground-100)", + "--ctr-expression-item-text-color-action": colors.textColor, + "--ctr-expression-item-text-color-button-hovered": "var(--sjs-primary-foreground-100)", + "--ctr-expression-item-text-color-button": "var(--sjs-primary-background-500)", + "--ctr-expression-item-text-color-conjunction-hovered": "var(--sjs-semantic-yellow-foreground-100)", + "--ctr-expression-item-text-color-conjunction": colors.textColor, + "--ctr-expression-item-text-color-function": colors.textColor, + "--ctr-expression-item-text-color-operator-empty": colors.inputPlaceholderColor, + "--ctr-expression-item-text-color-operator-hovered": "var(--sjs-semantic-yellow-foreground-100)", + "--ctr-expression-item-text-color-operator": colors.textColor, + "--ctr-expression-item-text-color-parameter-empty": colors.inputPlaceholderColor, + "--ctr-expression-item-text-color-parameter-error": "var(--sjs-semantic-red-background-500)", + "--ctr-expression-item-text-color-parameter-hovered": "var(--sjs-semantic-blue-foreground-100)", + "--ctr-expression-item-text-color-parameter": colors.textColor, + // "--ctr-expression-rows-gap": "var(--sjs-spacing-x2)", + // "--ctr-font-code-line-height": "var(--sjs-line-height-x3)", + // "--ctr-font-code-size": "var(--sjs-font-size-x2)", + // "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)", + // "--ctr-font-default-line-height": "var(--sjs-line-height-x3)", + // "--ctr-font-default-size": "var(--sjs-font-size-x2)", + // "--ctr-font-large-line-height": "var(--sjs-line-height-x5)", + // "--ctr-font-large-size": "var(--sjs-font-size-x4)", + // "--ctr-font-medium-line-height": "var(--sjs-line-height-x4)", + // "--ctr-font-medium-size": "var(--sjs-font-size-x3)", + // "--ctr-font-small-line-height": "var(--sjs-line-height-x2)", + // "--ctr-font-small-size": "var(--sjs-font-size-x150)", + // "--ctr-font-unit": "8px", + // "--ctr-image-gallery-item-corner-radius": "var(--sjs-corner-radius-x075)" + "--ctr-image-gallery-item-title-color": colors.textColor, + // "--ctr-label-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-label-padding-left": "0px", + // "--ctr-label-padding-right": "0px", + // "--ctr-label-padding-top": "var(--sjs-spacing-x1)", + "--ctr-label-text-color-disabled": colors.textColor, + "--ctr-label-text-color": colors.textColor, + // "--ctr-line-height-unit": "8px", + "--ctr-list-item-background-color-hovered": colors.backgroundDim, + "--ctr-list-item-background-color-selected-submenu": colors.backgroundDim, + "--ctr-list-item-background-color-selected": "var(--sjs-primary-background-500)", + "--ctr-list-item-color-swatch-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-list-item-color-swatch-height": "var(--sjs-spacing-x3)", + "--ctr-list-item-color-swatch-width": "var(--sjs-spacing-x4)", + "--ctr-list-item-contextual-buttons-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-list-item-corner-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-list-item-gap": "var(--sjs-spacing-x2)", + "--ctr-list-item-icon-color-disabled": colors.textColor, + "--ctr-list-item-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)", + "--ctr-list-item-icon-color-selected": "var(--sjs-primary-foreground-100)", + "--ctr-list-item-icon-color": "var(--sjs-primary-background-500)", + "--ctr-list-item-label-icon-color-disabled": colors.textColor, + "--ctr-list-item-label-icon-color-hovered": "var(--sjs-layer-1-foreground-50)", + // "--ctr-list-item-padding-bottom-with-icon": "var(--sjs-spacing-x150)", + // "--ctr-list-item-padding-left": "var(--sjs-spacing-x2)", + // "--ctr-list-item-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-list-item-padding-top-with-icon": "var(--sjs-spacing-x150)", + "--ctr-list-item-submenu-arrow-color-hovered-item": colors.textColor, + "--ctr-list-item-submenu-arrow-color-selected-item-submenu": colors.textColor, + "--ctr-list-item-submenu-arrow-color": colors.textColor, + "--ctr-list-item-text-color-hovered": colors.textColor, + "--ctr-list-item-text-color-selected-submenu": colors.textColor, + "--ctr-list-item-text-color-selected": "var(--sjs-primary-foreground-100)", + "--ctr-list-item-text-color": colors.textColor, + // "--ctr-list-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-list-padding-right": "var(--sjs-spacing-x1)", + "--ctr-list-search-border-color": colors.borderColor, + "--ctr-list-search-icon-color": colors.textColor, + // "--ctr-list-search-padding-left": "var(--sjs-spacing-x3)", + "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-menu-border-color": colors.borderColor, + "--ctr-menu-item-background-color-hovered": colors.backgroundDim, + "--ctr-menu-item-background-color": colors.background, + "--ctr-menu-item-border-color-selected": "var(--sjs-primary-background-500)", + "--ctr-menu-item-icon-color": colors.textColor, + // "--ctr-menu-item-icon-height": "var(--sjs-size-x3)", + // "--ctr-menu-item-icon-width": "var(--sjs-size-x3)", + // "--ctr-menu-item-opacity-disabled": 0.25, + // "--ctr-menu-item-padding-bottom": "var(--sjs-spacing-x250)", + // "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)", + // "--ctr-menu-item-padding-left": "var(--sjs-spacing-x3)", + // "--ctr-menu-item-padding-right-icon": "var(--sjs-spacing-x2)", + // "--ctr-menu-item-padding-right": "var(--sjs-spacing-x3)", + // "--ctr-menu-item-padding-top": "var(--sjs-spacing-x250)", + "--ctr-menu-item-text-color": colors.textColor, + "--ctr-menu-toolbar-button-background-color-hovered": colors.backgroundDim, + "--ctr-menu-toolbar-button-background-color-pressed": colors.backgroundDim, + "--ctr-menu-toolbar-button-background-color-selected": colors.backgroundDim, + // "--ctr-menu-toolbar-button-corner-radius": "var(--sjs-corner-radius-x1)", + // "--ctr-menu-toolbar-button-gap": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-icon-color-selected": "var(--sjs-primary-background-500)", + "--ctr-menu-toolbar-button-icon-color": colors.textColor, + // "--ctr-menu-toolbar-button-icon-height": "var(--sjs-size-x3)", + // "--ctr-menu-toolbar-button-icon-width": "var(--sjs-size-x3)", + // "--ctr-menu-toolbar-button-opacity-disabled": 0.25, + // "--ctr-menu-toolbar-button-opacity-pressed": 0.5, + // "--ctr-menu-toolbar-button-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-menu-toolbar-button-padding-left-with-description": "var(--sjs-spacing-x150)", + // "--ctr-menu-toolbar-button-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-menu-toolbar-button-padding-right-with-description": "var(--sjs-spacing-x150)", + // "--ctr-menu-toolbar-button-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-menu-toolbar-button-padding-top-with-description": "var(--sjs-spacing-x05)", + // "--ctr-menu-toolbar-button-padding-top": "var(--sjs-spacing-x1)", + "--ctr-menu-toolbar-button-text-color-secondary": "var(--sjs-layer-1-foreground-50)", + "--ctr-menu-toolbar-button-text-color-selected": "var(--sjs-primary-background-500)", + "--ctr-menu-toolbar-button-text-color": colors.textColor, + // "--ctr-menu-toolbar-gap": "var(--sjs-spacing-x2)", + // "--ctr-menu-toolbar-padding-horizontal": "var(--sjs-spacing-x2)", + // "--ctr-menu-toolbar-padding-vertical": "var(--sjs-spacing-x150)", + "--ctr-notification-background-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-notification-background-color": colors.background, + // "--ctr-notification-opacity-error": 1, + // "--ctr-notification-opacity": 0.75, + "--ctr-notification-text-color-error": "var(--sjs-semantic-red-foreground-100)", + "--ctr-notification-text-color": colors.textColor, + "--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)", + "--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)", + "--ctr-page-navigator-button-background-color-hovered": colors.backgroundDim, + "--ctr-page-navigator-button-background-color-pressed": colors.backgroundDim, + // "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-page-navigator-button-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-page-navigator-button-icon-color": colors.iconColor, + // "--ctr-page-navigator-button-icon-height": "var(--sjs-size-x3)", + // "--ctr-page-navigator-button-icon-width": "var(--sjs-size-x3)", + // "--ctr-page-navigator-button-opacity-pressed": 0.5, + // "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)", + "--ctr-page-navigator-item-background-color-hovered": colors.background, + // "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-page-navigator-item-dot-border-color-selected": colors.iconColor, + "--ctr-page-navigator-item-dot-color-default": colors.iconColor, + "--ctr-page-navigator-item-dot-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-page-navigator-item-dot-color-selected": "var(--sjs-special-background)", + // "--ctr-page-navigator-item-dot-radius-large": "var(--sjs-size-x1)", + // "--ctr-page-navigator-item-dot-radius-small": "var(--sjs-size-x075)", + // "--ctr-page-navigator-item-gap": "var(--sjs-spacing-x1)", + // "--ctr-page-navigator-item-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-page-navigator-item-padding-left-hovered": "var(--sjs-spacing-x2)", + // "--ctr-page-navigator-item-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-page-navigator-item-padding-top": "var(--sjs-spacing-x1)", + "--ctr-page-navigator-item-text-color-hovered": colors.textColor, + // "--ctr-page-navigator-padding-bottom": "var(--sjs-spacing-x150)", + // "--ctr-page-navigator-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-page-navigator-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-page-navigator-padding-top": "var(--sjs-spacing-x150)", + "--ctr-popup-background-color": colors.background, + // "--ctr-popup-buttons-gap": "var(--sjs-spacing-x2)", + // "--ctr-popup-corner-radius": "var(--sjs-corner-radius-x2)", + "--ctr-popup-description-color": colors.textColor, + // "--ctr-popup-gap": "var(--sjs-spacing-x4)", + "--ctr-popup-haze-background-color": "var(--sjs-special-haze)", + "--ctr-popup-menu-background-color": colors.background, + // "--ctr-popup-menu-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-popup-menu-footer-background-color": colors.background, + "--ctr-popup-menu-footer-border-color": colors.borderColor, + // "--ctr-popup-menu-footer-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-popup-menu-footer-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-popup-menu-footer-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-popup-menu-footer-padding-top": "var(--sjs-spacing-x05)", + "--ctr-popup-menu-pointer-color": colors.background, + "--ctr-popup-message-color": colors.textColor, + // "--ctr-popup-padding-bottom": "var(--sjs-spacing-x4)", + // "--ctr-popup-padding-left": "var(--sjs-spacing-x4)", + // "--ctr-popup-padding-right": "var(--sjs-spacing-x4)", + // "--ctr-popup-padding-top": "var(--sjs-spacing-x4)", + // "--ctr-popup-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-popup-shadow-1-color": "var(--ctr-shadow-medium-color)", + // "--ctr-popup-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-popup-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-popup-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-popup-shadow-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-popup-shadow-2-color": "var(--ctr-shadow-large-color)", + // "--ctr-popup-shadow-2-offset-x": "var(--ctr-shadow-large-offset-x)", + // "--ctr-popup-shadow-2-offset-y": "var(--ctr-shadow-large-offset-y)", + // "--ctr-popup-shadow-2-spread": "var(--ctr-shadow-large-spread)", + // "--ctr-popup-shadow-3-blur": "var(--ctr-shadow-x-large-blur)", + "--ctr-popup-shadow-3-color": "var(--ctr-shadow-x-large-color)", + // "--ctr-popup-shadow-3-offset-x": "var(--ctr-shadow-x-large-offset-x)", + // "--ctr-popup-shadow-3-offset-y": "var(--ctr-shadow-x-large-offset-y)", + // "--ctr-popup-shadow-3-spread": "var(--ctr-shadow-x-large-spread)", + "--ctr-popup-title-color": colors.textColor, + "--ctr-preview-pager-background-color": colors.background, + "--ctr-preview-pager-border-color": colors.borderColor, + "--ctr-property-grid-background-color": colors.background, + "--ctr-property-grid-border-color": colors.borderColor, // here + "--ctr-property-grid-chapter-caption-background-color-focused": colors.backgroundDim, + "--ctr-property-grid-chapter-caption-background-color-hovered": colors.backgroundDim, + "--ctr-property-grid-chapter-caption-background-color": colors.background, + "--ctr-property-grid-chapter-caption-border-color": colors.borderColor, + "--ctr-property-grid-chapter-caption-text-color-disabled": colors.textColor, + "--ctr-property-grid-chapter-caption-text-color-selected": colors.textColor, + "--ctr-property-grid-chapter-caption-text-color": colors.textColor, + "--ctr-property-grid-form-background-color": colors.background, + // "--ctr-property-grid-form-border-width-bottom": "0px", + "--ctr-property-grid-group-caption-text-color": colors.textColor, + "--ctr-property-grid-header-background-color": colors.background, + "--ctr-property-grid-header-border-color": "var(--sjs-primary-background-500)", + // "--ctr-property-grid-header-border-width-bottom": "var(--sjs-stroke-x2)", + // "--ctr-property-grid-header-padding-bottom-with-subtitle": "var(--sjs-spacing-x075)", + // "--ctr-property-grid-header-padding-bottom": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-header-padding-left": "var(--sjs-spacing-x2)", + // "--ctr-property-grid-header-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-property-grid-header-padding-top-with-subtitle": "var(--sjs-spacing-x075)", + // "--ctr-property-grid-header-padding-top": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-placeholder-image-margin-top": "var(--sjs-spacing-x3)", + // "--ctr-property-grid-placeholder-padding-bottom": "0px", + // "--ctr-property-grid-placeholder-padding-left": "var(--sjs-spacing-x6)", + // "--ctr-property-grid-placeholder-padding-right": "var(--sjs-spacing-x6)", + // "--ctr-property-grid-placeholder-padding-top": "var(--sjs-spacing-x12)", + "--ctr-property-grid-placeholder-text-description-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-property-grid-placeholder-text-gap": "var(--sjs-spacing-x1)", + // "--ctr-property-grid-placeholder-text-max-width": "320px", + "--ctr-property-grid-placeholder-text-title-color": colors.textColor, + "--ctr-property-grid-search-background-color": colors.background, + "--ctr-property-grid-search-border-color": colors.backgroundDim, + "--ctr-property-grid-search-button-background-color-hovered": colors.background, + "--ctr-property-grid-search-button-icon-color": colors.inputPlaceholderColor, + "--ctr-property-grid-search-count-text-color": colors.inputPlaceholderColor, + // "--ctr-property-grid-search-gap": "var(--sjs-spacing-x1)", + "--ctr-property-grid-search-icon-color": colors.inputPlaceholderColor, + // "--ctr-property-grid-search-icon-height": "var(--sjs-size-x3)", + // "--ctr-property-grid-search-icon-width": "var(--sjs-size-x3)", + // "--ctr-property-grid-search-padding-bottom": "var(--sjs-spacing-x2)", + // "--ctr-property-grid-search-padding-left": "var(--sjs-spacing-x2)", + // "--ctr-property-grid-search-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-property-grid-search-padding-top": "var(--sjs-spacing-x2)", + "--ctr-property-grid-search-text-color-placeholder": colors.inputPlaceholderColor, + "--ctr-property-grid-search-text-color": colors.textColor, + "--ctr-property-grid-switcher-text-color": colors.textColor, + "--ctr-property-grid-tabs-background-color": colors.background, + "--ctr-property-grid-tabs-border-color": colors.borderColor, + // "--ctr-property-grid-tabs-border-width": "var(--sjs-stroke-x1)", + // "--ctr-property-grid-tabs-gap": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-tabs-padding-bottom": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-tabs-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-tabs-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-tabs-padding-top": "var(--sjs-spacing-x150)", + // "--ctr-property-grid-tabs-separator-margin": "var(--sjs-spacing-x150)", + "--ctr-radio-button-background-color-disabled": colors.background, + "--ctr-radio-button-background-color-hovered": colors.background, + "--ctr-radio-button-background-color-selected-hovered": colors.background, + "--ctr-radio-button-background-color": colors.background, + "--ctr-radio-button-border-color-disabled": colors.backgroundDim, + "--ctr-radio-button-border-color": colors.backgroundDim, + "--ctr-radio-button-text-color-disabled": colors.textColor, + "--ctr-radio-button-text-color": colors.textColor, + "--ctr-scrollbar-background-color": colors.backgroundDim, + // "--ctr-scrollbar-padding-vertical-hovered": "var(--sjs-spacing-x025)", + // "--ctr-scrollbar-padding-vertical": "var(--sjs-spacing-x05)", + // "--ctr-scrollbar-width": "var(--sjs-size-x150)", + "--ctr-search-button-background-color-hovered": colors.backgroundDim, + // "--ctr-search-button-corner-radius": "var(--sjs-corner-radius-x05)", + // "--ctr-search-button-icon-height": "var(--sjs-size-x2)", + // "--ctr-search-button-icon-width": "var(--sjs-size-x2)", + // "--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)", + // "--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)", + "--ctr-search-icon-color": colors.textColor, + // "--ctr-search-toolbar-gap": "var(--sjs-spacing-x05)", + "--ctr-separator-color": colors.borderColor, + // "--ctr-separator-width": "var(--sjs-size-x0125)", + // "--ctr-shadow-large-blur": "32px", + "--ctr-shadow-large-color": "var(--sjs-special-glow)", + // "--ctr-shadow-large-offset-x": "0px", + // "--ctr-shadow-large-offset-y": "16px", + // "--ctr-shadow-large-spread": "0px", + // "--ctr-shadow-medium-blur": "8px", + "--ctr-shadow-medium-color": "var(--sjs-special-glow)", + // "--ctr-shadow-medium-offset-x": "0px", + // "--ctr-shadow-medium-offset-y": "2px", + // "--ctr-shadow-medium-spread": "0px", + // "--ctr-shadow-small-blur": "2px", + "--ctr-shadow-small-color": "var(--sjs-special-shadow)", + // "--ctr-shadow-small-offset-x": "0px", + // "--ctr-shadow-small-offset-y": "1px", + // "--ctr-shadow-small-spread": "0px", + // "--ctr-shadow-x-large-blur": "64px", + "--ctr-shadow-x-large-color": "var(--sjs-special-glow)", + // "--ctr-shadow-x-large-offset-x": "0px", + // "--ctr-shadow-x-large-offset-y": "32px", + // "--ctr-shadow-x-large-spread": "0px", + // "--ctr-size-unit": "8px", + // "--ctr-spacing-unit": "8px", + "--ctr-string-table-group-header-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-string-table-group-header-text-color": "var(--sjs-layer-2-foreground-75)", + "--ctr-string-table-header-background-color": colors.background, + "--ctr-string-table-header-text-color": colors.iconColor, + "--ctr-string-table-row-background-color": colors.background, + "--ctr-string-table-row-border-color": colors.backgroundDim, + "--ctr-string-table-row-expand-button-icon-color-default": colors.textColor, + // "--ctr-string-table-row-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-string-table-row-padding-left": "var(--sjs-spacing-x3)", + // "--ctr-string-table-row-padding-right": "var(--sjs-spacing-x3)", + // "--ctr-string-table-row-padding-top": "var(--sjs-spacing-x1)", + "--ctr-string-table-row-text-color-title": colors.textColor, + // "--ctr-stroke-unit": "1px", + // "--ctr-super-tooltip-corder-radius": "var(--sjs-corner-radius-x075)", + "--ctr-surface-background-color": colors.surface, + // "--ctr-surface-placeholder-max-width": "var(--sjs-size-x90)", + // "--ctr-surface-placeholder-padding-bottom": "var(--sjs-spacing-x16)", + // "--ctr-surface-placeholder-padding-left": "var(--sjs-spacing-x6)", + // "--ctr-surface-placeholder-padding-right": "var(--sjs-spacing-x6)", + // "--ctr-surface-placeholder-padding-top": "0px", + "--ctr-surface-placeholder-text-description-color": colors.textColorDim, + // "--ctr-surface-placeholder-text-gap": "var(--sjs-spacing-x1)", + // "--ctr-surface-placeholder-text-margin-bottom": "var(--sjs-spacing-x6)", + // "--ctr-surface-placeholder-text-margin-top": "var(--sjs-spacing-x4)", + "--ctr-surface-placeholder-text-title-color": colors.textColor, + // "--ctr-surface-toolbar-gap": "var(--sjs-spacing-x1)", + // "--ctr-surface-toolbar-padding-bottom": "var(--sjs-spacing-x150)", + // "--ctr-surface-toolbar-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-surface-toolbar-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-surface-toolbar-padding-top": "var(--sjs-spacing-x150)", + "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)", + "--ctr-survey-action-button-background-color-hovered-positive": colors.backgroundDim, + // "--ctr-survey-action-button-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)", + "--ctr-survey-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)", + "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)", + // "--ctr-survey-action-button-opacity-disabled": 0.25, + "--ctr-survey-action-button-text-color-disabled": colors.textColor, + "--ctr-survey-action-button-text-color-positive": "var(--sjs-primary-background-500)", + // "--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + // "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)", + // "--ctr-survey-contextual-button-padding-bottom": "var(--sjs-spacing-x150)", + // "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-survey-contextual-button-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-survey-contextual-button-padding-top": "var(--sjs-spacing-x150)", + // "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)", + "--ctr-survey-drop-indicator-color": "var(--sjs-primary-background-500)", + "--ctr-survey-header-logo-placeholder-background-color-hovered": colors.backgroundDim, + // "--ctr-survey-header-logo-placeholder-corner-radius": "var(--sjs-corner-radius-round)", + "--ctr-survey-header-logo-placeholder-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-survey-header-logo-placeholder-icon-color": colors.inputPlaceholderColor, + // "--ctr-survey-header-logo-placeholder-icon-height": "var(--sjs-size-x6)", + // "--ctr-survey-header-logo-placeholder-icon-opacity": 0.5, + // "--ctr-survey-header-logo-placeholder-icon-width": "var(--sjs-size-x6)", + "--ctr-survey-header-text-description-color-placeholder": colors.inputPlaceholderColor, + "--ctr-survey-header-text-title-color-placeholder": colors.inputPlaceholderColor, + "--ctr-survey-image-picker-drop-spot-color": "var(--sjs-layer-2-background-500)", + "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)", + "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)", + "--ctr-survey-item-actionbar-drag-indicator-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-survey-item-actionbar-drag-indicator-height": "var(--sjs-size-x3)", + // "--ctr-survey-item-actionbar-drag-indicator-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-survey-item-actionbar-drag-indicator-padding-left": "var(--sjs-spacing-x1)", + // "--ctr-survey-item-actionbar-drag-indicator-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-survey-item-actionbar-drag-indicator-padding-top": "var(--sjs-spacing-x05)", + // "--ctr-survey-item-actionbar-drag-indicator-width": "var(--sjs-size-x3)", + // "--ctr-survey-matching-item-corner-radius-floating": "var(--sjs-corner-radius-x2)", + // "--ctr-survey-matching-item-padding-bottom-floating": "var(--sjs-spacing-x1)", + // "--ctr-survey-matching-item-padding-right-floating": "var(--sjs-spacing-x1)", + // "--ctr-survey-matching-item-padding-top-floating": "var(--sjs-spacing-x1)", + "--ctr-survey-page-background-color-hovered": colors.background, + "--ctr-survey-page-background-color-selected": colors.background, + "--ctr-survey-page-border-color-hovered": "var(--sjs-secondary-background-25)", + "--ctr-survey-page-border-color-selected": "var(--sjs-secondary-background-500)", + // "--ctr-survey-page-border-width-hovered": "var(--sjs-stroke-x2)", + // "--ctr-survey-page-border-width-selected": "var(--sjs-stroke-x2)", + // "--ctr-survey-page-drag-indicator-height": "var(--sjs-size-x2)", + // "--ctr-survey-page-drag-indicator-opacity": 0.5, + // "--ctr-survey-page-drag-indicator-width": "var(--sjs-size-x3)", + "--ctr-survey-page-header-title-color-placeholder": colors.inputPlaceholderColor, + "--ctr-survey-page-placeholder-text-color": colors.inputPlaceholderColor, + "--ctr-survey-page-toolbar-item-background-color-hovered": colors.backgroundDim, + "--ctr-survey-page-toolbar-item-background-color-selected": colors.backgroundDim, + // "--ctr-survey-page-toolbar-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-survey-page-toolbar-item-icon-color-pressed": colors.inputPlaceholderColor, + "--ctr-survey-page-toolbar-item-text-color": colors.textColor, + "--ctr-survey-placeholder-border-color": colors.borderColor, + // "--ctr-survey-placeholder-gap": "var(--sjs-spacing-x05)", + // "--ctr-survey-placeholder-padding-bottom-with-button": "var(--sjs-spacing-x6)", + // "--ctr-survey-placeholder-padding-left": "var(--sjs-spacing-x8)", + // "--ctr-survey-placeholder-padding-right": "var(--sjs-spacing-x8)", + // "--ctr-survey-placeholder-padding-top-with-button": "var(--sjs-spacing-x8)", + "--ctr-survey-placeholder-text-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-survey-question-panel-border-color-hovered": "var(--sjs-secondary-background-25)", + "--ctr-survey-question-panel-border-color-selected": "var(--sjs-secondary-background-500)", + // "--ctr-survey-question-panel-border-width-hovered": "var(--sjs-stroke-x2)", + // "--ctr-survey-question-panel-border-width-selected": "var(--sjs-stroke-x2)", + "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-survey-question-panel-drag-area-drag-indicator-height": "var(--sjs-size-x2)", + // "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5, + // "--ctr-survey-question-panel-drag-area-drag-indicator-width": "var(--sjs-size-x3)", + // "--ctr-survey-question-panel-floating-toolbar-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-survey-question-panel-floating-toolbar-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)", + "--ctr-survey-question-panel-toolbar-item-background-color-hovered": colors.backgroundDim, + "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)", + // "--ctr-survey-question-panel-toolbar-item-corner-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-survey-question-panel-toolbar-item-gap": "var(--sjs-spacing-x05)", + "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)", //xxxx + // "--ctr-survey-question-panel-toolbar-item-icon-container-height": "var(--sjs-size-x3)", + // "--ctr-survey-question-panel-toolbar-item-icon-container-width": "var(--sjs-size-x3)", + // "--ctr-survey-question-panel-toolbar-item-icon-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-icon-padding-left": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-icon-padding-right": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-icon-padding-top": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25, + // "--ctr-survey-question-panel-toolbar-item-opacity-muted": 0.5, + // "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5, + // "--ctr-survey-question-panel-toolbar-item-padding-bottom-small": "0px", + // "--ctr-survey-question-panel-toolbar-item-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-padding-left-small": "0px", + // "--ctr-survey-question-panel-toolbar-item-padding-left": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-padding-right-small": "0px", + // "--ctr-survey-question-panel-toolbar-item-padding-right-with-text": "var(--sjs-spacing-x1)", + // "--ctr-survey-question-panel-toolbar-item-padding-right": "var(--sjs-spacing-x05)", + // "--ctr-survey-question-panel-toolbar-item-padding-top-small": "0px", + // "--ctr-survey-question-panel-toolbar-item-padding-top": "var(--sjs-spacing-x05)", + "--ctr-survey-question-panel-toolbar-item-text-color": colors.textColor, + "--ctr-survey-radio-button-group-item-background-color-floating": colors.background, + // "--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + // "--ctr-survey-radio-button-group-item-shadow-floating-1-blur": "var(--ctr-shadow-large-blur)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-color": "var(--ctr-shadow-large-color)", + // "--ctr-survey-radio-button-group-item-shadow-floating-1-offset-x": "var(--ctr-shadow-large-offset-x)", + // "--ctr-survey-radio-button-group-item-shadow-floating-1-offset-y": "var(--ctr-shadow-large-offset-y)", + // "--ctr-survey-radio-button-group-item-shadow-floating-1-spread": "var(--ctr-shadow-large-spread)", + // "--ctr-survey-radio-button-group-item-shadow-floating-2-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-color": "var(--ctr-shadow-medium-color)", + // "--ctr-survey-radio-button-group-item-shadow-floating-2-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-survey-radio-button-group-item-shadow-floating-2-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-survey-radio-button-group-item-shadow-floating-2-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-survey-ranking-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", + // "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)", + // "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)", + // "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)", + "--ctr-text-decor-text-color-code": colors.textColor, + "--ctr-toggle-button-background-color-checked-focused": "var(--sjs-primary-foreground-100)", + "--ctr-toggle-button-background-color-checked": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-background-color-hovered": colors.background, + "--ctr-toggle-button-background-color": colors.background, + "--ctr-toggle-button-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-border-color": colors.backgroundDim, + // "--ctr-toggle-button-corner-radius": "var(--sjs-corner-radius-round)", + // "--ctr-toggle-button-gap-label": "var(--sjs-spacing-x1)", + // "--ctr-toggle-button-gap": "var(--sjs-spacing-x05)", + "--ctr-toggle-button-label-text-color": colors.textColor, + // "--ctr-toggle-button-padding-bottom": "var(--sjs-spacing-x075)", + // "--ctr-toggle-button-padding-left": "var(--sjs-spacing-x075)", + // "--ctr-toggle-button-padding-right": "var(--sjs-spacing-x075)", + // "--ctr-toggle-button-padding-top": "var(--sjs-spacing-x075)", + "--ctr-toggle-button-thumb-background-color-active": colors.iconColor, + "--ctr-toggle-button-thumb-background-color-checked-focused": "var(--sjs-primary-background-500)", + "--ctr-toggle-button-thumb-background-color-checked": "var(--sjs-primary-foreground-100)", + "--ctr-toggle-button-thumb-border-color": colors.backgroundDim, + // "--ctr-toggle-button-thumb-border-width": "0px", + // "--ctr-toggle-button-thumb-corner-radius": "var(--sjs-corner-radius-round)", + // "--ctr-toggle-button-thumb-height": "var(--sjs-size-x150)", + // "--ctr-toggle-button-thumb-width": "var(--sjs-size-x150)", + "--ctr-toolbox-background-color": colors.surface, + "--ctr-toolbox-border-color": colors.borderColor, + // "--ctr-toolbox-border-width-right": "var(--sjs-stroke-x1)", + "--ctr-toolbox-button-background-color-hovered": colors.backgroundDim, + // "--ctr-toolbox-gap": "var(--sjs-spacing-x05)", + // "--ctr-toolbox-group-gap": "var(--sjs-spacing-x05)", + "--ctr-toolbox-group-header-border-color": colors.borderColor, + // "--ctr-toolbox-group-header-border-width-bottom": "var(--sjs-stroke-x1)", + // "--ctr-toolbox-group-header-border-width-left": "0px", + // "--ctr-toolbox-group-header-border-width-right": "0px", + // "--ctr-toolbox-group-header-border-width-top": "0px", + "--ctr-toolbox-group-header-expand-button-color": colors.textColor, + // "--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-group-header-margin-left": "0px", + // "--ctr-toolbox-group-header-margin-right": "0px", + // "--ctr-toolbox-group-header-margin-top": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-group-header-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-group-header-padding-left": "var(--sjs-spacing-x3)", + // "--ctr-toolbox-group-header-padding-right": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-group-header-padding-top": "var(--sjs-spacing-x1)", + "--ctr-toolbox-group-header-text-color": colors.textColor, + // "--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-group-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-group-padding-right-compact": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-group-padding-right": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-item-align": "stretch", + "--ctr-toolbox-item-background-color-hovered": colors.backgroundDim, + "--ctr-toolbox-item-background-color-pressed": colors.backgroundDim, + "--ctr-toolbox-item-background-color-submenu": colors.background, + // "--ctr-toolbox-item-banner-beak-display": "block", + // "--ctr-toolbox-item-banner-icon-display": "none", + "--ctr-toolbox-item-border-color-floating": "var(--sjs-secondary-background-500)", + // "--ctr-toolbox-item-corner-radius": "var(--sjs-corner-radius-x1)", + "--ctr-toolbox-item-icon-color-disabled": colors.textColor, + "--ctr-toolbox-item-icon-color-hovered": "var(--sjs-primary-background-500)", + "--ctr-toolbox-item-icon-color-pressed": colors.textColor, + "--ctr-toolbox-item-icon-color": colors.iconColor, + // "--ctr-toolbox-item-icon-height": "var(--sjs-size-x3)", + // "--ctr-toolbox-item-icon-opacity-disabled": 0.25, + // "--ctr-toolbox-item-icon-opacity-pressed": 0.35, + // "--ctr-toolbox-item-icon-width": "var(--sjs-size-x3)", + // "--ctr-toolbox-item-margin-horizontal-no-text": "var(--sjs-spacing-x05)", + // "--ctr-toolbox-item-opacity-submenu": 1, + // "--ctr-toolbox-item-padding-bottom-submenu": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-item-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-item-padding-left-no-text": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-item-padding-left-submenu": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-item-padding-left": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-item-padding-right-no-text": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-item-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-item-padding-top-submenu": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-item-padding-top": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-item-shadow-hovered-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-item-shadow-hovered-1-color": "#00000000", + // "--ctr-toolbox-item-shadow-hovered-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-toolbox-item-shadow-hovered-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-toolbox-item-shadow-hovered-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-toolbox-item-shadow-hovered-2-blur": "var(--ctr-shadow-small-blur)", + "--ctr-toolbox-item-shadow-hovered-2-color": "#00000000", + // "--ctr-toolbox-item-shadow-hovered-2-offset-x": "var(--ctr-shadow-small-offset-x)", + // "--ctr-toolbox-item-shadow-hovered-2-offset-y": "var(--ctr-shadow-small-offset-y)", + // "--ctr-toolbox-item-shadow-hovered-2-spread": "var(--ctr-shadow-small-spread)", + // "--ctr-toolbox-item-shadow-pressed-blur": "var(--ctr-shadow-small-blur)", + "--ctr-toolbox-item-shadow-pressed-color": "#00000000", + // "--ctr-toolbox-item-shadow-pressed-offset-x": "var(--ctr-shadow-small-offset-x)", + // "--ctr-toolbox-item-shadow-pressed-offset-y": "var(--ctr-shadow-small-offset-y)", + // "--ctr-toolbox-item-shadow-pressed-spread": "var(--ctr-shadow-small-spread)", + "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000", + "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000", + "--ctr-toolbox-item-submenu-button-background-color-hovered": colors.backgroundLight, + "--ctr-toolbox-item-submenu-button-background-color": colors.background, + // "--ctr-toolbox-item-submenu-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-toolbox-item-submenu-button-icon-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-toolbox-item-submenu-button-icon-height": "var(--sjs-size-x2)", + // "--ctr-toolbox-item-submenu-button-icon-width": "var(--sjs-size-x2)", + // "--ctr-toolbox-item-submenu-button-margin-right": "var(--sjs-spacing-x1n)", + // "--ctr-toolbox-item-submenu-button-padding-bottom": "var(--sjs-spacing-x05)", + // "--ctr-toolbox-item-submenu-button-padding-left": "var(--sjs-spacing-x05)", + // "--ctr-toolbox-item-submenu-button-padding-right": "var(--sjs-spacing-x05)", + // "--ctr-toolbox-item-submenu-button-padding-top": "var(--sjs-spacing-x05)", + "--ctr-toolbox-item-text-color-hovered": colors.textColor, + "--ctr-toolbox-item-text-color-pressed": colors.textColor, + "--ctr-toolbox-item-text-color-submenu": colors.textColor, + "--ctr-toolbox-item-text-color": colors.textColor, + // "--ctr-toolbox-item-text-opacity-disabled": 0.25, + // "--ctr-toolbox-item-text-opacity-pressed": 0.5, + // "--ctr-toolbox-margin-left-compact": "0px", + // "--ctr-toolbox-min-width": "var(--sjs-size-x32)", + // "--ctr-toolbox-padding-bottom": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-padding-top": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-scrollbar-left": "auto", + // "--ctr-toolbox-scrollbar-right": "0", + // "--ctr-toolbox-scroller-align-items": "flex-start", + // "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)", + "--ctr-toolbox-search-clear-button-background-color-hovered": "var(--sjs-semantic-red-background-10)", + "--ctr-toolbox-search-clear-button-icon-color-hovered": "var(--sjs-semantic-red-background-500)", + "--ctr-toolbox-search-clear-button-icon-color": "var(--sjs-layer-1-foreground-50)", + // "--ctr-toolbox-search-gap": "var(--sjs-spacing-x1)", + "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-icon-color": "var(--sjs-primary-background-500)", + // "--ctr-toolbox-search-icon-height": "var(--sjs-size-x3)", + // "--ctr-toolbox-search-icon-width": "var(--sjs-size-x3)", + // "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)", + // "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)", + // "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)", + "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-toolbox-search-text-color": colors.textColor, + "--ctr-toolbox-separator-color": colors.borderColor, + // "--ctr-toolbox-separator-height": "var(--sjs-size-x0125)", + // "--ctr-toolbox-separator-max-width": "var(--sjs-size-max)", + // "--ctr-toolbox-separator-padding-bottom": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-separator-padding-left": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)", + // "--ctr-toolbox-separator-padding-right": "0px", + // "--ctr-toolbox-separator-padding-top": "var(--sjs-spacing-x1)", + // "--ctr-toolbox-shadow-floating-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-shadow-floating-1-color": "var(--ctr-shadow-medium-color)", + // "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-toolbox-shadow-floating-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-toolbox-shadow-floating-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-toolbox-shadow-floating-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-toolbox-shadow-floating-2-color": "var(--ctr-shadow-large-color)", + // "--ctr-toolbox-shadow-floating-2-offset-x": "var(--ctr-shadow-large-offset-x)", + // "--ctr-toolbox-shadow-floating-2-offset-y": "var(--ctr-shadow-large-offset-y)", + // "--ctr-toolbox-shadow-floating-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-toolbox-submenu-background-color": colors.background, + // "--ctr-toolbox-submenu-corner-radius": "var(--sjs-corner-radius-x1)", + // "--ctr-toolbox-submenu-group-border-width-bottom": "var(--sjs-stroke-x1)", + // "--ctr-toolbox-submenu-group-margin-bottom-last": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-submenu-group-margin-bottom": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-submenu-group-margin-left": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-submenu-group-margin-right": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-submenu-group-margin-top": "var(--sjs-spacing-x150)", + // "--ctr-toolbox-submenu-item-min-width": "calc(17 * 8px)", + // "--ctr-toolbox-submenu-margin-left": "0px", + // "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)", + // "--ctr-toolbox-submenu-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-toolbox-submenu-shadow-1-color": "var(--ctr-shadow-medium-color)", + // "--ctr-toolbox-submenu-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-toolbox-submenu-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-toolbox-submenu-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-toolbox-submenu-shadow-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)", + // "--ctr-toolbox-submenu-shadow-2-offset-x": "var(--ctr-shadow-large-offset-x)", + // "--ctr-toolbox-submenu-shadow-2-offset-y": "var(--ctr-shadow-large-offset-y)", + // "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-tooltip-background-color": colors.background, + // "--ctr-tooltip-corder-radius": "var(--sjs-corner-radius-x075)", + // "--ctr-tooltip-padding-bottom": "var(--sjs-spacing-x2)", + // "--ctr-tooltip-padding-left": "var(--sjs-spacing-x3)", + // "--ctr-tooltip-padding-right": "var(--sjs-spacing-x3)", + // "--ctr-tooltip-padding-top": "var(--sjs-spacing-x2)", + // "--ctr-tooltip-pointer-height": "var(--sjs-size-x05)", + // "--ctr-tooltip-shadow-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-tooltip-shadow-1-color": "var(--ctr-shadow-medium-color)", + // "--ctr-tooltip-shadow-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + // "--ctr-tooltip-shadow-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + // "--ctr-tooltip-shadow-1-spread": "var(--ctr-shadow-medium-spread)", + // "--ctr-tooltip-shadow-2-blur": "var(--ctr-shadow-small-blur)", + "--ctr-tooltip-shadow-2-color": "var(--ctr-shadow-small-color)", + // "--ctr-tooltip-shadow-2-offset-x": "var(--ctr-shadow-small-offset-x)", + // "--ctr-tooltip-shadow-2-offset-y": "var(--ctr-shadow-small-offset-y)", + // "--ctr-tooltip-shadow-2-spread": "var(--ctr-shadow-small-spread)", + "--lbr-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)", + // "--lbr-notification-button-corner-radius": "var(--sjs-corner-radius-x1)", + // "--lbr-notification-padding-bottom-with-button": "var(--sjs-spacing-x3)", + // "--lbr-notification-padding-left-with-button": "var(--sjs-spacing-x2)", + // "--lbr-notification-padding-left": "var(--sjs-spacing-x2)", + // "--lbr-notification-padding-right": "var(--sjs-spacing-x2)", + // "--lbr-notification-padding-top-with-button": "var(--sjs-spacing-x3)", + // "--lbr-shadow-inner-blur": "2px", + "--lbr-shadow-inner-color": "var(--sjs-special-shadow)", + // "--lbr-shadow-inner-offset-x": "0px", + // "--lbr-shadow-inner-offset-y": "1px", + // "--lbr-shadow-inner-spread": "0px", + // "--lbr-shadow-large-blur": "32px", + "--lbr-shadow-large-color": "var(--sjs-special-glow)", + // "--lbr-shadow-large-offset-x": "0px", + // "--lbr-shadow-large-offset-y": "16px", + // "--lbr-shadow-large-spread": "0px", + // "--lbr-shadow-medium-blur": "8px", + "--lbr-shadow-medium-color": "var(--sjs-special-glow)", + // "--lbr-shadow-medium-offset-x": "0px", + // "--lbr-shadow-medium-offset-y": "2px", + // "--lbr-shadow-medium-spread": "0px", + // "--lbr-shadow-small-blur": "2px", + "--lbr-shadow-small-color": "var(--sjs-special-shadow)", + // "--lbr-shadow-small-offset-x": "0px", + // "--lbr-shadow-small-offset-y": "1px", + // "--lbr-shadow-small-spread": "0px", + // "--lbr-shadow-x-large-blur": "64px", + "--lbr-shadow-x-large-color": "var(--sjs-special-glow)", + // "--lbr-shadow-x-large-offset-x": "0px", + // "--lbr-shadow-x-large-offset-y": "32px", + // "--lbr-shadow-x-large-spread": "0px", + }, + themeName: 'openlane', + colorPalette: 'light', + isPanelless: true, } diff --git a/apps/console/src/components/shared/header/header.styles.tsx b/apps/console/src/components/shared/header/header.styles.tsx index 5a760717..694637f0 100644 --- a/apps/console/src/components/shared/header/header.styles.tsx +++ b/apps/console/src/components/shared/header/header.styles.tsx @@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants' const headerStyles = tv({ slots: { header: - 'bg-ziggurat-100 text-firefly-950 fixed left-0 right-0 top-0 z-20 dark:bg-oxford-blue-900 dark:text-ziggurat-200', + 'bg-ziggurat-100 text-firefly-950 fixed left-0 right-0 top-0 z-20 dark:bg-glaucous-950 dark:text-ziggurat-200', nav: 'flex h-20 items-center justify-between pl-6 pr-7', mobileSidebar: 'block md:!hidden', userNav: 'flex items-center gap-9', diff --git a/apps/console/src/components/shared/loading/loading.styles.tsx b/apps/console/src/components/shared/loading/loading.styles.tsx index 7f67eca6..cbf8823a 100644 --- a/apps/console/src/components/shared/loading/loading.styles.tsx +++ b/apps/console/src/components/shared/loading/loading.styles.tsx @@ -2,7 +2,7 @@ import { tv, type VariantProps } from 'tailwind-variants' const loadingStyles = tv({ slots: { - loader: 'h-full w0full rounded bg-ziggurat-100 dark:bg-oxford-blue-900 animate-pulse', + loader: 'h-full w0full rounded bg-ziggurat-100 dark:bg-glaucous-950 animate-pulse', }, }) diff --git a/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx b/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx index 7c9fa679..fc96e979 100644 --- a/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx +++ b/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx @@ -10,7 +10,7 @@ const organizationSelectorStyles = tv({ dropdownContent: 'p-0', allOrganizationsLink: 'flex items-center gap-2 py-5 px-6 border-t border-oxford-blue-200', - popoverContent: 'p-0 w-[400px] dark:bg-ziggurat-900', + popoverContent: 'p-0 w-[400px] dark:bg-glaucous-900', searchWrapper: 'py-5 px-6', orgWrapper: 'transition-all duration-500 flex gap-3 items-center py-4 px-6 border-t border-oxford-blue-200 hover:bg-firefly-700 cursor-pointer relative', diff --git a/apps/console/src/components/shared/organization-selector/organization-selector.tsx b/apps/console/src/components/shared/organization-selector/organization-selector.tsx index 3ac8b4aa..4eb8eeb4 100644 --- a/apps/console/src/components/shared/organization-selector/organization-selector.tsx +++ b/apps/console/src/components/shared/organization-selector/organization-selector.tsx @@ -102,7 +102,7 @@ export const OrganizationSelector = () => {
-
Organization:
+
Organization
diff --git a/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx b/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx index e9b0ec3e..62546574 100644 --- a/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx +++ b/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx @@ -2,8 +2,8 @@ import { tv, type VariantProps } from 'tailwind-variants' const sidebarNavStyles = tv({ slots: { - nav: 'space-y-1 bg-ziggurat-100 dark:bg-oxford-blue-900 h-screen relative overflow-y-auto overflow-x-visible pt-24 pb-8 tracking-tighter', - icon: 'h-5 w-5 text-java-400', + nav: 'space-y-1 bg-ziggurat-100 dark:bg-glaucous-950 h-screen relative overflow-y-auto overflow-x-visible pt-24 pb-8 tracking-tighter', + icon: 'h-5 w-5 text-glaucous-400', linkLabel: 'font-normal absolute left-12 text-base text-nowrap duration-200', accordionTrigger: @@ -11,15 +11,14 @@ const sidebarNavStyles = tv({ link: 'font-sans px-4 py-2 group relative flex h-[2.2rem] justify-start items-center', accordionItem: 'border-none ', separator: '!my-4', - heading: - 'text-firefly-950 font-sans px-4 py-2 uppercase font-bold tracking-[0.42px] text-sm', + heading: 'text-glaucous-950 font-sans px-4 py-2 uppercase font-bold tracking-[0.42px] text-sm', badgeCount: 'flex relative ml-40 pt-px justify-center bg-aquamarine-400 text-[14px] font-semibold rounded-[6px] w-[22px] h-[22px] text-white', }, variants: { isCurrent: { true: { - link: 'rounded-md bg-aquamarine-400 font-bold hover:bg-muted dark:bg-aquamarine-400 dark:text-firefly-950', + link: 'rounded-md bg-firefly-400 font-bold hover:bg-muted dark:bg-firefly-400 dark:text-glaucous-950', badgeCount: 'flex relative ml-40 pt-px justify-center bg-ziggurat-100 dark:bg-oxford-blue-900 text-[14px] font-semibold rounded-[6px] w-[22px] h-[22px] text-firefly-950 dark:text-white', }, diff --git a/apps/console/src/components/shared/sidebar/sidebar.styles.tsx b/apps/console/src/components/shared/sidebar/sidebar.styles.tsx index 374fb844..b8ac7f27 100644 --- a/apps/console/src/components/shared/sidebar/sidebar.styles.tsx +++ b/apps/console/src/components/shared/sidebar/sidebar.styles.tsx @@ -2,10 +2,10 @@ import { tv, type VariantProps } from 'tailwind-variants' const sidebarStyles = tv({ slots: { - nav: 'relative hidden h-screen border-oxford-blue-200 bg-ziggurat-100 text-firefly-950 border-oxford-blue-200 md:block w-[57px] dark:bg-oxford-blue-900 dark:border-oxford-blue-200 dark:text-ziggurat-200', + nav: 'relative hidden h-screen border-oxford-blue-200 bg-ziggurat-100 text-firefly-950 border-oxford-blue-200 md:block w-[57px] dark:bg-glaucous-950 dark:border-oxford-blue-200 dark:text-ziggurat-200', navInner: 'relative overflow-scroll', expandNav: - 'absolute z-50 gap-1 flex items-center justify-center bg-ziggurat-100 -right-[58px] w-[58px] h-[42px] bottom-0 cursor-pointer rounded-tr-lg border border-oxford-blue-200 border-b-0 text-3xl text-java-400 dark:bg-oxford-blue-900 dark:border-oxford-blue-200', + 'absolute z-50 gap-1 flex items-center justify-center bg-ziggurat-100 -right-[58px] w-[58px] h-[42px] bottom-0 cursor-pointer rounded-tr-lg border border-oxford-blue-200 border-b-0 text-3xl text-java-400 dark:bg-glaucous-950 dark:border-oxford-blue-200', expandNavIcon: 'rotate-180', sideNav: 'text-background text-sm bg-oxford-blue-900 left-8 opacity-0 transition-all duration-300 group-hover:z-50 group-hover:ml-4 group-hover:rounded group-hover:bg-foreground group-hover:p-2 group-hover:opacity-100', diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 96f765c6..315e379d 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -13,11 +13,11 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@repo/ui": "workspace:*", - "lucide-react": "^0.454.0", + "lucide-react": "^0.462.0", "react": "18.3.12", "react-dom": "18.3.1", "react-hook-form": "^7.51.2", - "survey-react-ui": "^1.12.8", + "survey-react-ui": "^1.12.12", "survey-creator-react": "^1.12.8" }, "devDependencies": { diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts index 04ca6fb3..832e735c 100644 --- a/packages/tailwind-config/tailwind.config.ts +++ b/packages/tailwind-config/tailwind.config.ts @@ -28,12 +28,12 @@ export const config: Omit = { heading: '-0.038rem', }, colors: { - aquamarine: { // bright green, button styles + aquamarine: { '50': '#e8fff9', '100': '#c8ffef', '200': '#96ffe4', '300': '#53ffdd', - '400': '#09f1c7', // button color + '400': '#09f1c7', // light: button color '500': '#00deb7', '600': '#00b696', '700': '#00927d', @@ -42,45 +42,73 @@ export const config: Omit = { '950': '#003531', }, java: { - '50': '#f2fbfa', - '100': '#d3f4ef', - '200': '#a7e8df', - '300': '#74d4cc', - '400': '#59c1bb', // brand 2 from marketing site - '500': '#2d9f9a', - '600': '#227f7d', - '700': '#1f6666', - '800': '#1d5152', - '900': '#1c4545', - '950': '#0b2628', + '50': '#f2fbfa', + '100': '#d3f4ef', + '200': '#a7e8df', + '300': '#74d4cc', + '400': '#59c1bb', // marketing: brand 2 color + '500': '#2d9f9a', + '600': '#227f7d', + '700': '#1f6666', + '800': '#1d5152', + '900': '#1c4545', + '950': '#0b2628', + }, + // dark green background from marketing site + firefly: { + '50': '#edfefd', + '100': '#d1fcfb', + '200': '#a9f8f7', + '300': '#6ef1f2', // button color + '400': '#2ce0e4', + '500': '#10c3ca', + '600': '#109daa', + '700': '#147d8a', + '800': '#1a6570', + '900': '#1a535f', + '950': '#082930', // light: text color }, ziggurat: { - '50': '#f5f9fa', - '100': '#e9f1f5', // background color in light mode - '200': '#bdd9e1', // font color in dark mode - '300': '#a3cbd6', - '400': '#72b0be', - '500': '#5097a7', - '600': '#3d7b8c', - '700': '#336371', - '800': '#2d545f', - '900': '#2a4750', // background of panels/tables/etc. in dark mode - '950': '#1c2e35', + '50': '#f5f9fa', + '100': '#e9f1f5', // light: background color + '200': '#bdd9e1', + '300': '#a3cbd6', + '400': '#72b0be', + '500': '#5097a7', + '600': '#3d7b8c', + '700': '#336371', + '800': '#2d545f', + '900': '#2a4750', + '950': '#1c2e35', + }, + 'oxford-blue': { + '50': '#f2f7f9', + '100': '#dfeaee', + '200': '#c2d7df', + '300': '#98bac8', + '400': '#6694aa', + '500': '#4b788f', + '600': '#416379', + '700': '#395365', + '800': '#354755', + '900': '#303e4a', // dark: background color + '950': '#1c2630', }, - firefly: { // dark green background from marketing site - '50': '#edfefd', - '100': '#d1fcfb', - '200': '#a9f8f7', - '300': '#6ef1f2', - '400': '#2ce0e4', - '500': '#10c3ca', - '600': '#109daa', - '700': '#147d8a', - '800': '#1a6570', - '900': '#1a535f', - '950': '#082930', // font color in light mode + glaucous: { + '50': '#E2E7EE', + '100': '#D1D9E5', + '200': '#B4C1D5', + '300': '#93A6C2', + '400': '#768EB2', + '500': '#5A76A0', + '600': '#4A6082', + '700': '#374862', + '800': '#273344', + '900': '#161D27', // dark: panel background color + '950': '#0D1117', // dark: background color }, - 'river-bed': { // icon font color + 'river-bed': { + // icon font color '50': '#f4f6f7', '100': '#e3e8ea', '200': '#c9d2d8', @@ -92,31 +120,44 @@ export const config: Omit = { '800': '#3d444d', '900': '#363b43', '950': '#21252b', - }, - 'oxford-blue': { - '50': '#f2f7f9', - '100': '#dfeaee', - '200': '#c2d7df', - '300': '#98bac8', - '400': '#6694aa', - '500': '#4b788f', - '600': '#416379', - '700': '#395365', - '800': '#354755', - '900': '#303e4a', // background color in dark mode - '950': '#1c2630', }, - 'util-red': { - 900: '#771D1D', - 800: '#9B1C1C', - 700: '#C81E1E', - 600: '#E02424', - 500: '#F05252', - 400: '#F98080', - 300: '#F8B4B4', - 200: '#FBD5D5', - 100: '#FDE8E8', - 50: '#FDF2F2', + neutral: { + '50': '#f1f7f9', + '100': '#e1ecef', + '200': '#c5d7dd', + '300': '#aabec5', // dark: paragraph font color + '400': '#92a4aa', + '500': '#828a8c', + '600': '#6e6e6e', + '700': '#575757', + '800': '#3d3d3d', // light: paragraph font color + '900': '#242424', + '950': '#1a1a1a', + }, + saffron: { + '50': '#FEFBF1', + '100': '#FDF5DD', + '200': '#FBEABC', + '300': '#F9E19F', + '400': '#F7D77D', + '500': '#F5CB5C', + '600': '#F1B91D', + '700': '#C0900C', + '800': '#7D5E08', + '900': '#3E2F04', + '950': '#221902', + }, + red: { + '50': '#fdf2f2', + '100': '#fde8e8', + '200': '#fbd5d5', + '300': '#f8b4b4', + '400': '#f98080', + '500': '#f05252', + '600': '#e02424', + '700': '#c81e1e', + '800': '#9b1c1c', + '900': '#771d1d', }, }, fontFamily: { diff --git a/packages/ui/src/avatar/avatar.styles.tsx b/packages/ui/src/avatar/avatar.styles.tsx index 31edd450..ec1d58d3 100644 --- a/packages/ui/src/avatar/avatar.styles.tsx +++ b/packages/ui/src/avatar/avatar.styles.tsx @@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants' export const avatarStyles = tv({ slots: { avatarImageWrap: - 'relative flex h-11 w-11 shrink-0 overflow-hidden border-none rounded-md p-0', + 'relative flex h-8 w-8 shrink-0 overflow-hidden border-none rounded-md p-0', avatarImage: 'aspect-square h-full w-full', avatarFallBack: 'uppercase flex h-full w-full items-center justify-center rounded-md bg-aquamarine-400 text-white', diff --git a/packages/ui/src/button/button.styles.tsx b/packages/ui/src/button/button.styles.tsx index 8b2e8f7f..648b3841 100644 --- a/packages/ui/src/button/button.styles.tsx +++ b/packages/ui/src/button/button.styles.tsx @@ -14,7 +14,7 @@ export const buttonStyles = tv({ }, variants: { variant: { - aquamarine: '!bg-aquamarine-400 hover:!opacity-90', + aquamarine: 'bg-firefly-300 dark:bg-firefly-300 hover:!opacity-90', outline: 'border-java-800 text-oxford-blue-800 dark:text-oxford-blue-100 dark:border-java-100 border hover:!opacity-90', outlineLight: @@ -24,7 +24,7 @@ export const buttonStyles = tv({ outlineInputPadding: 'border-java-500 text-oxford-blue-800 mx-1 dark:text-oxford-blue-100 dark:border-java-100 border hover:!opacity-90', redOutline: - 'border-util-red-500 text-util-red-500 border bg-white hover:!opacity-90 dark:border-util-red-500 dark:text-util-red-500', + 'border-red-500 text-red-500 border bg-white hover:!opacity-90 dark:border-red-500 dark:text-red-500', white: {}, success: 'flex-row-reverse !bg-aquamarine-600 hover:!opacity-90', }, diff --git a/packages/ui/src/dialog/dialog.styles.tsx b/packages/ui/src/dialog/dialog.styles.tsx index 7ee51f43..09b106ed 100644 --- a/packages/ui/src/dialog/dialog.styles.tsx +++ b/packages/ui/src/dialog/dialog.styles.tsx @@ -5,7 +5,7 @@ export const dialogStyles = tv({ overlay: 'text-left fixed inset-0 z-50 bg-java-900/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', content: - 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ziggurat-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-ziggurat-800 dark:bg-ziggurat-900', + 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ziggurat-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-ziggurat-800 dark:bg-glaucous-900', close: 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ziggurat-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-ziggurat-100 data-[state=open]:text-ziggurat-500 dark:ring-offset-ziggurat-950 dark:focus:ring-ziggurat-300 dark:data-[state=open]:bg-ziggurat-800 dark:data-[state=open]:text-ziggurat-400', closeIcon: 'h-4 w-4', diff --git a/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx b/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx index e752fafc..72550a0d 100644 --- a/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx +++ b/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx @@ -10,7 +10,7 @@ export const dropdownMenuStyles = tv({ subContent: 'z-50 min-w-72 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', menuContent: - 'font-sans z-50 min-w-72 px-6 py-6 overflow-hidden rounded-md border border-oxford-blue-200 bg-white dark:bg-ziggurat-900 text-popover-foreground shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'font-sans z-50 min-w-72 px-6 py-6 overflow-hidden rounded-md border border-oxford-blue-200 bg-white dark:bg-glaucous-900 text-popover-foreground shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', menuItem: 'relative flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', menuCheckboxItem: diff --git a/packages/ui/src/form/form.styles.tsx b/packages/ui/src/form/form.styles.tsx index 3d7232f4..478d450b 100644 --- a/packages/ui/src/form/form.styles.tsx +++ b/packages/ui/src/form/form.styles.tsx @@ -5,9 +5,9 @@ export const formStyles = tv({ formItem: 'space-y-2', formLabelError: '', formDescription: 'text-sm', - formMessageIcon: 'text-util-red-400', + formMessageIcon: 'text-red-400', formMessage: - 'text-util-red-500 rounded p-[14px] bg-util-red-100 flex items-center gap-4 !mt-5', + 'text-red-500 rounded p-[14px] bg-red-100 flex items-center gap-4 !mt-5', }, }) diff --git a/packages/ui/src/icons/chevron-down.tsx b/packages/ui/src/icons/chevron-down.tsx index dab55331..66cf1000 100644 --- a/packages/ui/src/icons/chevron-down.tsx +++ b/packages/ui/src/icons/chevron-down.tsx @@ -10,7 +10,7 @@ export const ChevronDown = () => ( > ) diff --git a/packages/ui/src/input/input.styles.tsx b/packages/ui/src/input/input.styles.tsx index f51004f8..9759c8a6 100644 --- a/packages/ui/src/input/input.styles.tsx +++ b/packages/ui/src/input/input.styles.tsx @@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants' export const inputStyles = tv({ slots: { input: - 'flex h-12 w-full rounded-md border font-sans autofill:bg-white autofill:text-firefly-950 autofill:font-sans border-oxford-blue-200 bg-transparent px-3 py-none text-base transition-colors file:border-0 file:bg-transparent file:text-base file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-firefly-100 disabled:cursor-not-allowed disabled:opacity-50', + 'flex h-12 w-full rounded-md border font-sans autofill:bg-white autofill:text-firefly-950 autofill:font-sans border-oxford-blue-200 bg-transparent px-3 py-none text-base transition-colors file:border-0 file:bg-transparent file:text-base file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-firefly-100 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder-ziggurat-400', inputWrapper: 'relative flex items-center', iconWrapper: 'absolute z-20 text-firefly-500 top-1/2 -translate-y-1/2 right-4', diff --git a/packages/ui/src/panel/panel.styles.tsx b/packages/ui/src/panel/panel.styles.tsx index 26817395..404005d1 100644 --- a/packages/ui/src/panel/panel.styles.tsx +++ b/packages/ui/src/panel/panel.styles.tsx @@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants' export const panelStyles = tv({ slots: { panel: - 'flex flex-col border w-full rounded-lg bg-white dark:bg-ziggurat-900 border-oxford-blue-200 p-9', + 'flex flex-col border w-full rounded-lg bg-white border-oxford-blue-200 dark:bg-glaucous-900 dark:border-oxford-blue-700 p-9', icon: '', iconRow: 'flex gap-6', contentColumn: 'flex-1 flex flex-col gap-5', @@ -39,7 +39,7 @@ export const panelStyles = tv({ destructive: { true: { panel: - 'bg-util-red-100 text-red-500 border-none dark:bg-util-red-100 dark:border-none', + 'bg-red-100 text-red-500 border-none dark:bg-red-100 dark:border-none', }, }, }, diff --git a/packages/ui/src/select/select.styles.tsx b/packages/ui/src/select/select.styles.tsx index 942d14f1..ece3d339 100644 --- a/packages/ui/src/select/select.styles.tsx +++ b/packages/ui/src/select/select.styles.tsx @@ -3,11 +3,11 @@ import { tv, type VariantProps } from 'tailwind-variants' export const selectStyles = tv({ slots: { trigger: - 'flex h-10 w-full items-center justify-between rounded-md border border-java-400 bg-white dark:bg-ziggurat-900 px-3 py-2 text-sm ring-offset-white placeholder:text-ziggurat-500 focus:outline-none focus:ring-2 focus:ring-ziggurat-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-ziggurat-800 dark:ring-offset-ziggurat-950 dark:placeholder:text-ziggurat-400 dark:focus:ring-ziggurat-300', + 'flex h-10 w-full items-center justify-between rounded-md border border-java-400 bg-white dark:bg-glaucous-900 px-3 py-2 text-sm ring-offset-white placeholder:text-ziggurat-500 focus:outline-none focus:ring-2 focus:ring-ziggurat-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-ziggurat-800 dark:ring-offset-ziggurat-950 dark:placeholder:text-ziggurat-400 dark:focus:ring-ziggurat-300', icon: 'h-4 w-4 opacity-50', scrollButton: 'flex cursor-default items-center justify-center py-1', content: - 'relative z-50 max-h-96 overflow-hidden rounded-md border border-ziggurat-200 bg-white text-ziggurat-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-java-400 dark:bg-ziggurat-900 dark:text-ziggurat-200', + 'relative z-50 max-h-96 overflow-hidden rounded-md border border-ziggurat-200 bg-white text-ziggurat-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-java-400 dark:bg-glaucous-900 dark:text-ziggurat-200', viewport: 'p-1 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]', label: 'py-1.5 pl-8 pr-2 text-sm font-semibold', diff --git a/packages/ui/src/slider/slider.styles.ts b/packages/ui/src/slider/slider.styles.ts index f61c3457..b99ad985 100644 --- a/packages/ui/src/slider/slider.styles.ts +++ b/packages/ui/src/slider/slider.styles.ts @@ -7,6 +7,6 @@ export const sliderStyles = tv({ 'relative h-2 w-full grow overflow-hidden rounded-full bg-java-800 dark:bg-ziggurat-800', range: 'absolute h-full bg-ziggurat-900 dark:bg-ziggurat-50', thumb: - 'block h-5 w-5 rounded-full border-2 border-ziggurat-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ziggurat-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-ziggurat-50 dark:bg-ziggurat-900 dark:ring-offset-ziggurat-900 dark:focus-visible:ring-ziggurat-300', + 'block h-5 w-5 rounded-full border-2 border-ziggurat-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ziggurat-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-ziggurat-50 dark:bg-glaucous-900 dark:ring-offset-ziggurat-900 dark:focus-visible:ring-ziggurat-300', }, }) diff --git a/packages/ui/src/table/table.styles.tsx b/packages/ui/src/table/table.styles.tsx index a3932e3d..1e6fd03a 100644 --- a/packages/ui/src/table/table.styles.tsx +++ b/packages/ui/src/table/table.styles.tsx @@ -2,14 +2,14 @@ import { tv, type VariantProps } from 'tailwind-variants' export const tableStyles = tv({ slots: { - container: 'relative w-full overflow-auto border rounded-lg', - table: 'w-full caption-bottom font-sans bg-white dark:bg-ziggurat-900', + container: 'relative w-full overflow-auto border dark:border-oxford-blue-700 rounded-lg', + table: 'w-full caption-bottom font-sans bg-white dark:bg-glaucous-900', tableHeader: '[&_tr]:border-b text-left', tableBody: '[&_tr:last-child]:border-0', tableFooter: - 'p-1 border-oxford-blue-200 font-medium [&>tr]:last:border-b-0 ', + 'p-1 border-oxford-blue-200 dark:border-oxford-blue-700 font-medium [&>tr]:last:border-b-0 ', tableRow: - 'border-b border-oxford-blue-200 transition-colors data-[state=selected]:bg-java-500', + 'border-b border-oxford-blue-200 dark:border-oxford-blue-700 transition-colors data-[state=selected]:bg-java-500', tableHead: 'h-12 px-4 text-left align-middle font-medium text-java-500 [&:has([role=checkbox])]:pr-0 dark:text-ziggurat-400', tableCell: diff --git a/packages/ui/src/tabs/tabs.styles.tsx b/packages/ui/src/tabs/tabs.styles.tsx index 91f69c39..0bce5f74 100644 --- a/packages/ui/src/tabs/tabs.styles.tsx +++ b/packages/ui/src/tabs/tabs.styles.tsx @@ -16,7 +16,7 @@ const tabsStyles = tv({ 'flex-1 items-center justify-center whitespace-nowrap px-3 py-2 font-sans border-b border-ziggurat-900 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-aquamarine-900 data-[state=active]:border-b-2 data-[state=active]:text-aquamarine-900', }, solid: { - tabsList: 'rounded-md bg-white dark:bg-ziggurat-900 p-[10px] items-start', + tabsList: 'rounded-md bg-white dark:bg-glaucous-900 p-[10px] items-start', tabsTrigger: 'py-[15px] px-5 rounded-[5px] border border-transparent data-[state=active]:bg-aquamarine-400 data-[state=active]:text-firefly-950', tabsContent: 'mt-[26px]', diff --git a/packages/ui/src/toast/toast.styles.tsx b/packages/ui/src/toast/toast.styles.tsx index 9a49161a..faee6510 100644 --- a/packages/ui/src/toast/toast.styles.tsx +++ b/packages/ui/src/toast/toast.styles.tsx @@ -7,9 +7,9 @@ export const toastStyles = tv({ toast: 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-ziggurat-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:tranziggurat-x-0 data-[swipe=end]:tranziggurat-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:tranziggurat-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-ziggurat-800', toastDefault: - 'border bg-white text-firefly-950 dark:bg-ziggurat-900 dark:text-ziggurat-200', + 'border bg-white text-firefly-950 dark:bg-glaucous-900 dark:text-ziggurat-200', toastDestructive: - 'destructive group border-util-red-300 bg-util-red-100 text-util-red-500 dark:border-util-red-300 dark:bg-util-red-100 dark:text-util-red-500', + 'destructive group border-red-300 bg-red-100 text-red-500 dark:border-red-300 dark:bg-red-100 dark:text-red-500', toastSuccess: 'group border-aquamarine-600 bg-aquamarine-300 text-aquamarine-800 dark:border-aquamarine-200 dark:bg-aquamarine-100 dark:text-aquamarine-500', action: