@amboss/design-system 3.41.0 → 3.41.1

package/build/esm/web-tokens/web-tokens/scss/_theming.scss

@@ -0,0 +1,32 @@
+@use "sass:meta";
+@use "light";
+@use "dark";
+@use "subthemes";
+
+// Available subthemes: ai, brand, brandSubtle, dimmed, dimmedSubtle, error, info, inverted, success
+$available-subthemes: ("ai", "brand", "brandSubtle", "dimmed", "dimmedSubtle", "error", "info", "inverted", "success");
+
+@mixin theming($dark-theme-selector: ".dark-theme", $subthemes: ()) {
+  // Subtheme selectors
+  @each $name in $available-subthemes {
+    @if $subthemes == all or index($subthemes, $name) {
+      [data-subtheme="#{$name}"] {
+        @include meta.apply(meta.get-mixin("ds-subtheme-light-#{$name}", subthemes));
+      }
+      :global(#{$dark-theme-selector}) [data-subtheme="#{$name}"] {
+        @include meta.apply(meta.get-mixin("ds-subtheme-dark-#{$name}", subthemes));
+      }
+    }
+  }
+
+  // Base theme + unset at the bottom (cascade order ensures unset overrides subthemes when nested)
+  :root,
+  [data-subtheme="unset"] {
+    @include light.ds-theme-light;
+  }
+
+  :global(#{$dark-theme-selector}),
+  :global(#{$dark-theme-selector}) [data-subtheme="unset"] {
+    @include dark.ds-theme-dark;
+  }
+}

package/build/esm/web-tokens/web-tokens/scss/_variables.scss

@@ -0,0 +1,380 @@
+$colorBadgeBackground: var(--color-badge-background);
+$colorBadgeBackgroundGreen: var(--color-badge-background-green);
+$colorBadgeBackgroundBlue: var(--color-badge-background-blue);
+$colorBadgeBackgroundYellow: var(--color-badge-background-yellow);
+$colorBadgeBackgroundBrand: var(--color-badge-background-brand);
+$colorBadgeBackgroundPurple: var(--color-badge-background-purple);
+$colorBadgeBackgroundRed: var(--color-badge-background-red);
+$colorBadgeBackgroundGray: var(--color-badge-background-gray);
+$colorBadgeForeground: var(--color-badge-foreground);
+$colorBadgeForegroundGreen: var(--color-badge-foreground-green);
+$colorBadgeForegroundBlue: var(--color-badge-foreground-blue);
+$colorBadgeForegroundYellow: var(--color-badge-foreground-yellow);
+$colorBadgeForegroundBrand: var(--color-badge-foreground-brand);
+$colorBadgeForegroundPurple: var(--color-badge-foreground-purple);
+$colorBadgeForegroundRed: var(--color-badge-foreground-red);
+$colorBadgeForegroundGray: var(--color-badge-foreground-gray);
+$colorBadgeBorder: var(--color-badge-border);
+$colorBadgeBorderGreen: var(--color-badge-border-green);
+$colorBadgeBorderBlue: var(--color-badge-border-blue);
+$colorBadgeBorderYellow: var(--color-badge-border-yellow);
+$colorBadgeBorderBrand: var(--color-badge-border-brand);
+$colorBadgeBorderPurple: var(--color-badge-border-purple);
+$colorBadgeBorderRed: var(--color-badge-border-red);
+$colorBadgeBorderGray: var(--color-badge-border-gray);
+$colorBadgeBorderSubtle: var(--color-badge-borderSubtle);
+$colorBadgeBorderSubtleGreen: var(--color-badge-borderSubtle-green);
+$colorBadgeBorderSubtleBlue: var(--color-badge-borderSubtle-blue);
+$colorBadgeBorderSubtleYellow: var(--color-badge-borderSubtle-yellow);
+$colorBadgeBorderSubtleBrand: var(--color-badge-borderSubtle-brand);
+$colorBadgeBorderSubtlePurple: var(--color-badge-borderSubtle-purple);
+$colorBadgeBorderSubtleRed: var(--color-badge-borderSubtle-red);
+$colorBadgeBorderSubtleGray: var(--color-badge-borderSubtle-gray);
+$colorAvatarBorder: var(--color-avatar-border);
+$colorColorIndicatorBrand: var(--color-color-indicator-brand);
+$colorColorIndicatorGray: var(--color-color-indicator-gray);
+$colorColorIndicatorPurple: var(--color-color-indicator-purple);
+$colorColorIndicatorBlue: var(--color-color-indicator-blue);
+$colorColorIndicatorGreen: var(--color-color-indicator-green);
+$colorColorIndicatorYellow: var(--color-color-indicator-yellow);
+$colorColorIndicatorRed: var(--color-color-indicator-red);
+$colorColorIndicatorNeonBlue: var(--color-color-indicator-neonBlue);
+$colorColorIndicatorNeonGreen: var(--color-color-indicator-neonGreen);
+$colorColorIndicatorNeonPink: var(--color-color-indicator-neonPink);
+$colorContentBoxBorderInfo: var(--color-content-box-border-info);
+$colorContentBoxBorderError: var(--color-content-box-border-error);
+$colorContentBoxBorderSuccess: var(--color-content-box-border-success);
+$colorContentBoxBorderWarning: var(--color-content-box-border-warning);
+$colorDosageIconDefault: var(--color-dosage-icon-default);
+$colorDosageIconHover: var(--color-dosage-icon-hover);
+$colorToggleBackground: var(--color-toggle-background);
+$colorToggleBackgroundHighlight: var(--color-toggle-background-highlight);
+$colorToggleThumbBackgroundOff: var(--color-toggle-thumb-background-off);
+$colorToggleThumbBackgroundOn: var(--color-toggle-thumb-background-on);
+$colorToggleBorderHighlight: var(--color-toggle-border-highlight);
+$colorSegmentedProgressBarMonochrome: var(--color-segmented-progress-bar-monochrome);
+$colorSegmentedProgressBarSuccess: var(--color-segmented-progress-bar-success);
+$colorSegmentedProgressBarWarning: var(--color-segmented-progress-bar-warning);
+$colorSegmentedProgressBarAlert: var(--color-segmented-progress-bar-alert);
+$colorSegmentedProgressBarInProgress: var(--color-segmented-progress-bar-in-progress);
+$colorTagBackgroundGray: var(--color-tag-background-gray);
+$colorTagBackgroundBlue: var(--color-tag-background-blue);
+$colorTagTextGray: var(--color-tag-text-gray);
+$colorTagTextBlue: var(--color-tag-text-blue);
+$colorRangeInputBackgroundThumbDefault: var(--color-range-input-background-thumb-default);
+$colorSearchInputBackground: var(--color-search-input-background);
+$colorChartBorder: var(--color-chart-border);
+$colorChartGridPrimaryDefault: var(--color-chart-grid-primary-default);
+$colorChartGridSecondaryDefault: var(--color-chart-grid-secondary-default);
+$colorChartBackground: var(--color-chart-background);
+$colorChartBackgroundInverted: var(--color-chart-background-inverted);
+$colorChartTextPositiveDefault: var(--color-chart-text-positive-default);
+$colorChartTextNegativeDefault: var(--color-chart-text-negative-default);
+$colorChartTextWarningDefault: var(--color-chart-text-warning-default);
+$colorChartNeutral: var(--color-chart-neutral);
+$colorChartNeutralSubtle: var(--color-chart-neutral-subtle);
+$colorChartNeutralBold: var(--color-chart-neutral-bold);
+$colorChartPositive: var(--color-chart-positive);
+$colorChartPositiveSubtle: var(--color-chart-positive-subtle);
+$colorChartPositiveBold: var(--color-chart-positive-bold);
+$colorChartWarning: var(--color-chart-warning);
+$colorChartWarningSubtle: var(--color-chart-warning-subtle);
+$colorChartWarningBold: var(--color-chart-warning-bold);
+$colorChartNegative: var(--color-chart-negative);
+$colorChartNegativeSubtle: var(--color-chart-negative-subtle);
+$colorChartNegativeBold: var(--color-chart-negative-bold);
+$colorChartInfo: var(--color-chart-info);
+$colorChartInfoSubtle: var(--color-chart-info-subtle);
+$colorChartInfoBold: var(--color-chart-info-bold);
+$colorChartAccent: var(--color-chart-accent);
+$colorChartAccentSubtle: var(--color-chart-accent-subtle);
+$colorChartAccentBold: var(--color-chart-accent-bold);
+$colorMediaItemBackgroundBlack: var(--color-media-item-background-black);
+$colorMediaItemBackgroundWhite: var(--color-media-item-background-white);
+$colorMediaItemBackgroundTransparent: var(--color-media-item-background-transparent);
+$colorMediaItemOverlayHover: var(--color-media-item-overlay-hover);
+$colorMediaItemOverlayActive: var(--color-media-item-overlay-active);
+$colorMediaItemCategoryIconBackgroundDefault: var(--color-media-item-category-icon-background-default);
+$colorDestructiveTertiaryButtonBackgroundHover: var(--color-destructive-tertiary-button-background-hover);
+$colorDestructiveTertiaryButtonBackgroundActive: var(--color-destructive-tertiary-button-background-active);
+$colorQbankAnswerBackgroundTitleCorrectDefault: var(--color-qbank-answer-background-title-correct-default);
+$colorQbankAnswerBackgroundTitleCorrectHover: var(--color-qbank-answer-background-title-correct-hover);
+$colorQbankAnswerBackgroundTitleCorrectWithHintDefault: var(--color-qbank-answer-background-title-correct-with-hint-default);
+$colorQbankAnswerBackgroundTitleCorrectWithHintHover: var(--color-qbank-answer-background-title-correct-with-hint-hover);
+$colorQbankAnswerBackgroundTitleIncorrectDefault: var(--color-qbank-answer-background-title-incorrect-default);
+$colorQbankAnswerBackgroundTitleIncorrectHover: var(--color-qbank-answer-background-title-incorrect-hover);
+$colorQbankAnswerBackgroundExplanationCorrectDefault: var(--color-qbank-answer-background-explanation-correct-default);
+$colorQbankAnswerBackgroundExplanationCorrectWithHintDefault: var(--color-qbank-answer-background-explanation-correct-with-hint-default);
+$colorQbankAnswerBackgroundExplanationIncorrectDefault: var(--color-qbank-answer-background-explanation-incorrect-default);
+$colorQbankAnswerBorderCorrectDefault: var(--color-qbank-answer-border-correct-default);
+$colorQbankAnswerBorderCorrectWithHintDefault: var(--color-qbank-answer-border-correct-with-hint-default);
+$colorQbankAnswerBorderIncorrectDefault: var(--color-qbank-answer-border-incorrect-default);
+$colorSkeletonLoaderBackgroundContainer: var(--color-skeletonLoader-background-container);
+$colorSkeletonLoaderBackgroundElement: var(--color-skeletonLoader-background-element);
+$colorSkeletonLoaderBackgroundShimmer: var(--color-skeletonLoader-background-shimmer);
+$colorCanvas: var(--color-canvas);
+$colorBackgroundPrimary: var(--color-background-primary);
+$colorBackgroundSecondary: var(--color-background-secondary);
+$colorBackgroundSecondaryHover: var(--color-background-secondary-hover);
+$colorBackgroundSecondaryActive: var(--color-background-secondary-active);
+$colorBackgroundAccent: var(--color-background-accent);
+$colorBackgroundAccentHover: var(--color-background-accent-hover);
+$colorBackgroundAccentActive: var(--color-background-accent-active);
+$colorBackgroundAccentDisabled: var(--color-background-accent-disabled);
+$colorBackgroundElevated: var(--color-background-elevated);
+$colorBackgroundOnAccent: var(--color-background-onAccent);
+$colorBackgroundOnAccentHover: var(--color-background-onAccent-hover);
+$colorBackgroundOnAccentActive: var(--color-background-onAccent-active);
+$colorBackgroundOnAccentDisabled: var(--color-background-onAccent-disabled);
+$colorBackgroundError: var(--color-background-error);
+$colorBackgroundErrorHover: var(--color-background-error-hover);
+$colorBackgroundErrorActive: var(--color-background-error-active);
+$colorBackgroundErrorDisabled: var(--color-background-error-disabled);
+$colorBackgroundSuccess: var(--color-background-success);
+$colorBackgroundInfo: var(--color-background-info);
+$colorBackgroundWarning: var(--color-background-warning);
+$colorBackgroundAccentSubtle: var(--color-background-accentSubtle);
+$colorBackgroundErrorSubtle: var(--color-background-errorSubtle);
+$colorBackgroundSuccessSubtle: var(--color-background-successSubtle);
+$colorBackgroundInfoSubtle: var(--color-background-infoSubtle);
+$colorBackgroundWarningSubtle: var(--color-background-warningSubtle);
+$colorBackgroundTextHighlightPrimary: var(--color-background-textHighlight-primary);
+$colorBackgroundTextHighlightSecondary: var(--color-background-textHighlight-secondary);
+$colorBackgroundTextHighlightFind: var(--color-background-textHighlight-find);
+$colorBackgroundTextHighlightLearningRadar: var(--color-background-textHighlight-learningRadar);
+$colorBackgroundTextHighlightQbankKeyInfo: var(--color-background-textHighlight-qbankKeyInfo);
+$colorBackgroundTextHighlightRelevancePrimary: var(--color-background-textHighlight-relevancePrimary);
+$colorBackgroundTextHighlightRelevanceSecondary: var(--color-background-textHighlight-relevanceSecondary);
+$colorBackgroundTextHighlightCustomBlue: var(--color-background-textHighlight-customBlue);
+$colorBackgroundTextHighlightCustomGreen: var(--color-background-textHighlight-customGreen);
+$colorBackgroundTextHighlightCustomPink: var(--color-background-textHighlight-customPink);
+$colorBackgroundContrast: var(--color-background-contrast);
+$colorBackgroundTransparent: var(--color-background-transparent);
+$colorBackgroundTransparentSelected: var(--color-background-transparent-selected);
+$colorBackgroundTransparentHover: var(--color-background-transparent-hover);
+$colorBackgroundTransparentActive: var(--color-background-transparent-active);
+$colorBackgroundTransparentSelectedHover: var(--color-background-transparent-selectedHover);
+$colorBackgroundPlaceholder: var(--color-background-placeholder);
+$colorBackgroundPlaceholderHover: var(--color-background-placeholder-hover);
+$colorBackgroundBackdrop: var(--color-background-backdrop);
+$colorTextPrimary: var(--color-text-primary);
+$colorTextPrimaryHover: var(--color-text-primary-hover);
+$colorTextSecondary: var(--color-text-secondary);
+$colorTextSecondaryHover: var(--color-text-secondary-hover);
+$colorTextTertiary: var(--color-text-tertiary);
+$colorTextTertiaryDisabled: var(--color-text-tertiary-disabled);
+$colorTextTertiaryHover: var(--color-text-tertiary-hover);
+$colorTextQuaternary: var(--color-text-quaternary);
+$colorTextAccent: var(--color-text-accent);
+$colorTextAccentHover: var(--color-text-accent-hover);
+$colorTextOnAccent: var(--color-text-onAccent);
+$colorTextOnAccentDisabled: var(--color-text-onAccent-disabled);
+$colorTextOnAccentSubtle: var(--color-text-onAccentSubtle);
+$colorTextInfo: var(--color-text-info);
+$colorTextError: var(--color-text-error);
+$colorTextErrorDisabled: var(--color-text-error-disabled);
+$colorTextWarning: var(--color-text-warning);
+$colorTextSuccess: var(--color-text-success);
+$colorTextUnderline: var(--color-text-underline);
+$colorTextUnderlineHover: var(--color-text-underline-hover);
+$colorTextDottedUnderline: var(--color-text-dottedUnderline);
+$colorTextDottedUnderlineHover: var(--color-text-dottedUnderline-hover);
+$colorIconPrimary: var(--color-icon-primary);
+$colorIconPrimaryHover: var(--color-icon-primary-hover);
+$colorIconSecondary: var(--color-icon-secondary);
+$colorIconSecondaryHover: var(--color-icon-secondary-hover);
+$colorIconTertiary: var(--color-icon-tertiary);
+$colorIconTertiaryHover: var(--color-icon-tertiary-hover);
+$colorIconQuaternary: var(--color-icon-quaternary);
+$colorIconQuaternaryHover: var(--color-icon-quaternary-hover);
+$colorIconAccent: var(--color-icon-accent);
+$colorIconAccentHover: var(--color-icon-accent-hover);
+$colorIconOnAccent: var(--color-icon-onAccent);
+$colorIconOnAccentHover: var(--color-icon-onAccent-hover);
+$colorIconOnAccentSubtle: var(--color-icon-onAccentSubtle);
+$colorIconOnAccentSubtleHover: var(--color-icon-onAccentSubtle-hover);
+$colorIconInfo: var(--color-icon-info);
+$colorIconInfoHover: var(--color-icon-info-hover);
+$colorIconError: var(--color-icon-error);
+$colorIconErrorHover: var(--color-icon-error-hover);
+$colorIconWarning: var(--color-icon-warning);
+$colorIconWarningHover: var(--color-icon-warning-hover);
+$colorIconSuccess: var(--color-icon-success);
+$colorIconSuccessHover: var(--color-icon-success-hover);
+$colorIconBrand: var(--color-icon-brand);
+$colorIconBrandHover: var(--color-icon-brand-hover);
+$colorBorderPrimary: var(--color-border-primary);
+$colorBorderPrimaryHover: var(--color-border-primary-hover);
+$colorBorderPrimaryActive: var(--color-border-primary-active);
+$colorBorderPrimaryDisabled: var(--color-border-primary-disabled);
+$colorBorderSecondary: var(--color-border-secondary);
+$colorBorderSecondaryHover: var(--color-border-secondary-hover);
+$colorBorderSecondaryActive: var(--color-border-secondary-active);
+$colorBorderAccent: var(--color-border-accent);
+$colorBorderOnAccent: var(--color-border-onAccent);
+$colorBorderAccentSubtle: var(--color-border-accentSubtle);
+$colorBorderError: var(--color-border-error);
+$colorBorderSuccess: var(--color-border-success);
+$colorBorderSuccessSubtle: var(--color-border-successSubtle);
+$colorBorderErrorSubtle: var(--color-border-errorSubtle);
+$colorBorderInfoSubtle: var(--color-border-infoSubtle);
+$colorBorderWarningSubtle: var(--color-border-warningSubtle);
+$colorDividerPrimary: var(--color-divider-primary);
+$colorDividerSecondary: var(--color-divider-secondary);
+$colorDividerSecondarySolid: var(--color-divider-secondarySolid);
+$colorContentIconPhysicianDefault: var(--color-content-icon-physician-default);
+$colorContentIconPhysicianHover: var(--color-content-icon-physician-hover);
+$colorContentIconPhysicianUnimportantDefault: var(--color-content-icon-physicianUnimportant-default);
+$colorContentIconPhysicianUnimportantHover: var(--color-content-icon-physicianUnimportant-hover);
+$colorContentIconUnimportantDefault: var(--color-content-icon-unimportant-default);
+$colorContentIconUnimportantHover: var(--color-content-icon-unimportant-hover);
+$colorContentTextPhysicianDefault: var(--color-content-text-physician-default);
+$colorContentTextPhysicianHover: var(--color-content-text-physician-hover);
+$colorContentTextPhysicianUnimportantDefault: var(--color-content-text-physicianUnimportant-default);
+$colorContentTextPhysicianUnimportantHover: var(--color-content-text-physicianUnimportant-hover);
+$colorContentTextUnimportantDefault: var(--color-content-text-unimportant-default);
+$colorContentTextUnimportantHover: var(--color-content-text-unimportant-hover);
+$colorContentTextUnderlinePhysicianDefault: var(--color-content-textUnderline-physician-default);
+$colorContentTextUnderlinePhysicianHover: var(--color-content-textUnderline-physician-hover);
+$colorContentTextUnderlinePhysicianUnimportantDefault: var(--color-content-textUnderline-physicianUnimportant-default);
+$colorContentTextUnderlinePhysicianUnimportantHover: var(--color-content-textUnderline-physicianUnimportant-hover);
+$colorContentTextUnderlineUnimportantDefault: var(--color-content-textUnderline-unimportant-default);
+$colorContentTextUnderlineUnimportantHover: var(--color-content-textUnderline-unimportant-hover);
+$colorContentTextDottedUnderlinePhysicianDefault: var(--color-content-textDottedUnderline-physician-default);
+$colorContentTextDottedUnderlinePhysicianHover: var(--color-content-textDottedUnderline-physician-hover);
+$colorContentTextDottedUnderlinePhysicianUnimportantDefault: var(--color-content-textDottedUnderline-physicianUnimportant-default);
+$colorContentTextDottedUnderlinePhysicianUnimportantHover: var(--color-content-textDottedUnderline-physicianUnimportant-hover);
+$colorContentTextDottedUnderlineUnimportantDefault: var(--color-content-textDottedUnderline-unimportant-default);
+$colorContentTextDottedUnderlineUnimportantHover: var(--color-content-textDottedUnderline-unimportant-hover);
+$colorContentReferenceButtonBackgroundDefault: var(--color-content-reference-button-background-default);
+$colorContentReferenceButtonBackgroundHover: var(--color-content-reference-button-background-hover);
+$colorContentReferenceButtonBackgroundActive: var(--color-content-reference-button-background-active);
+$colorContentDosageButtonBackgroundDefault: var(--color-content-dosage-button-background-default);
+$colorContentDosageButtonBackgroundHover: var(--color-content-dosage-button-background-hover);
+$colorContentDosageButtonTextDefault: var(--color-content-dosage-button-text-default);
+$colorContentDosageButtonTextHover: var(--color-content-dosage-button-text-hover);
+$colorContentTableRowHover: var(--color-content-table-row-hover);
+$colorSplashCardTextAccentDefault: var(--color-splash-card-text-accent-default);
+$colorSplashCardBackgroundHover: var(--color-splash-card-background-hover);
+$elevation1: var(--elevation-1);
+$elevation2: var(--elevation-2);
+$elevation3: var(--elevation-3);
+$elevation4: var(--elevation-4);
+$shadowDefaultRing: var(--shadow-default-ring);
+$shadowFocusRing: var(--shadow-focus-ring);
+$sizeDimensionIconS: 16px;
+$sizeDimensionIconM: 24px;
+$sizeDimensionIconL: 48px;
+$sizeDimensionContentMaxWidth: 1024px;
+$sizeDimensionDividerM: 16px;
+$sizeDimensionDividerL: 24px;
+$sizeDimensionDividerXl: 32px;
+$sizeDimensionCheckboxS: 16px;
+$sizeDimensionCheckboxM: 24px;
+$sizeDimensionRadioS: 16px;
+$sizeDimensionRadioM: 24px;
+$sizeDimensionRadioPointS: 6px;
+$sizeDimensionRadioPointM: 10px;
+$sizeDimensionToggleHeightS: 16px;
+$sizeDimensionToggleHeightM: 24px;
+$sizeDimensionToggleWidthS: 28px;
+$sizeDimensionToggleWidthM: 40px;
+$sizeDimensionTextareaMinHeightM: 36px;
+$sizeDimensionTogglePointS: 8px;
+$sizeDimensionTogglePointM: 16px;
+$sizeDimensionToggleButtonHeightM: 32px;
+$sizeDimensionDropdownMenuWidth: 120px;
+$sizeDimensionModalWidthM: 560px;
+$sizeDimensionModalWidthL: 720px;
+$sizeDimensionModalMaxHeightL: 800px;
+$sizeDimensionModalMarginL: 40px;
+$sizeDimensionModalFullScreenContentWidth: 1280px;
+$sizeDimensionMediaViewerBarSeparatorWidth: 1px;
+$sizeDimensionLegendKeyWidth: 12px;
+$sizeLetterSpacingNone: 0px;
+$sizeLetterSpacingS: 0.5px;
+$sizeLetterSpacingM: 1px;
+$sizeFontXs: 12px;
+$sizeFontS: 14px;
+$sizeFontM: 16px;
+$sizeFontL: 18px;
+$sizeFontXl: 20px;
+$sizeFontXxl: 24px;
+$sizeFontXxxl: 26px;
+$sizeSpacingZero: 0px;
+$sizeSpacingXxxs: 2px;
+$sizeSpacingXxs: 4px;
+$sizeSpacingXs: 8px;
+$sizeSpacingS: 12px;
+$sizeSpacingM: 16px;
+$sizeSpacingL: 24px;
+$sizeSpacingXl: 32px;
+$sizeSpacingXxl: 48px;
+$sizeBorderRadiusNone: 0px;
+$sizeBorderRadiusXs: 4px;
+$sizeBorderRadiusS: 8px;
+$sizeBorderRadiusM: 12px;
+$sizeBorderRadiusL: 16px;
+$sizeBorderRadiusXl: 24px;
+$sizeBorderRadiusFull: 9999px;
+$sizeLineHeightXs: 1.1428571429;
+$sizeLineHeightS: 1.25;
+$sizeLineHeightM: 1.3333333;
+$sizeLineHeightL: 1.4285714286;
+$sizeLineHeightXl: 1.5;
+$sizeLineHeightXxl: 1.625;
+$sizeLineHeightXxxl: 1.714286;
+$animationTimingFunction: ease-in-out;
+$animationDurationSlow: 300ms;
+$animationDurationMedium: 200ms;
+$animationDurationFast: 100ms;
+$animationModalOpenDuration: 400ms;
+$animationModalOpenDelay: 150ms;
+$animationModalOpenTimingFunction: cubic-bezier(0.25, 0.1, 0.25, 1);
+$animationModalBackdropOpenDuration: 300ms;
+$animationModalBackdropOpenTimingFunction: cubic-bezier(0.25, 0.1, 0.25, 1);
+$animationToastEntryDuration: 300ms;
+$animationToastEntryDistanceY: 20px;
+$animationToastExitDuration: 100ms;
+$animationToastExitDistanceY: 20px;
+$animationNavBarTabButtonOpenDuration: 150ms;
+$animationNavBarTabButtonOpenDelay: 150ms;
+$animationNavBarTabButtonOpenTimingFunction: ease-out;
+$animationNavSlideOpenDuration: 300ms;
+$animationNavSlideOpenTimingFunction: ease-in-out;
+$animationPromptInputFocusDuration: 150ms;
+$animationPromptInputFocusTimingFunction: ease-in-out;
+$animationAnimatedBorderRotationDuration: 4000ms;
+$animationAnimatedBorderRotationTimingFunction: ease-in-out;
+$animationAnimatedBorderFadeOutDuration: 300ms;
+$animationAnimatedBorderFadeOutTimingFunction: cubic-bezier(0.4, 0, 0.2, 1);
+$breakpointS: 576;
+$breakpointM: 768;
+$breakpointL: 1024;
+$breakpointXl: 1280;
+$breakpointXxl: 1536;
+$fontStyleItalic: italic;
+$fontFamilyLato: Lato, "Apple Symbols", BlinkMacSystemFont, segoe ui, avenir next, avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+$opacityHidden: 0;
+$opacityDisabled: 0.3;
+$opacityHover: 0.6;
+$opacityVisible: 1;
+$spacingsZero: 0px;
+$spacingsXxs: 4px;
+$spacingsXs: 8px;
+$spacingsS: 12px;
+$spacingsM: 16px;
+$spacingsL: 24px;
+$spacingsXl: 32px;
+$spacingsXxl: 48px;
+$iconsS: 16px;
+$iconsM: 24px;
+$iconsL: 48px;
+$weightNormal: 400;
+$weightSemibold: 600;
+$weightBold: 700;
+$weightBlack: 900;
+$weightInherit: inherit;
+$zIndexDropdown: 1;
+$zIndexTooltip: 2;
+$zIndexModal: 3;

package/build/esm/web-tokens/web-tokens/scss/subthemes/_ai.scss

@@ -0,0 +1,27 @@
+@mixin ds-subtheme-light-ai {
+  & {
+    --color-text-accent: #5325a2;
+    --color-background-accent: #6934c4;
+    --color-background-accent-hover: #5325a2;
+    --color-background-accent-active: #5325a2;
+    --color-background-accent-disabled: rgba(105, 52, 196, 0.3);
+    --color-background-accentSubtle: #edeafd;
+    --color-icon-accent: #6934c4;
+    --color-border-accent: #6934c4;
+    --shadow-focus-ring: 0px 0px 0px 4px rgba(105, 52, 196, 0.25);
+  }
+}
+
+@mixin ds-subtheme-dark-ai {
+  & {
+    --color-text-accent: #ddd7fd;
+    --color-background-accent: #471a95;
+    --color-background-accent-hover: #6d37c8;
+    --color-background-accent-active: #471a95;
+    --color-background-accent-disabled: rgba(109, 55, 200, 0.3);
+    --color-background-accentSubtle: #2f1c4f;
+    --color-icon-accent: #9369ff;
+    --color-border-accent: #9369ff;
+    --shadow-focus-ring: 0px 0px 0px 4px rgba(105, 52, 196, 0.25);
+  }
+}

package/build/esm/web-tokens/web-tokens/scss/subthemes/_brand.scss

@@ -0,0 +1,93 @@
+@mixin ds-subtheme-light-brand {
+  & {
+    --color-text-primary: #ffffff;
+    --color-text-primary-hover: #ffffff;
+    --color-text-underline-hover: #ffffff;
+    --color-text-secondary: #ffffff;
+    --color-text-tertiary: rgba(255, 255, 255, 0.65);
+    --color-text-accent: #85d3dc;
+    --color-text-onAccent: #054f57;
+    --color-text-error: #fad1d1;
+    --color-text-info: #d2e2f9;
+    --color-text-success: #d0f1e8;
+    --color-text-warning: #fceaca;
+    --color-text-warning-hover: #fceaca;
+    --color-background-primary: #054f57;
+    --color-background-secondary: rgba(0, 0, 0, 0.3);
+    --color-background-accent: #ffffff;
+    --color-background-accent-hover: rgba(255, 255, 255, 0.8);
+    --color-background-accent-active: rgba(255, 255, 255, 0.65);
+    --color-background-accent-disabled: rgba(255, 255, 255, 0.65);
+    --color-background-accentSubtle: #047a88;
+    --color-background-transparent: rgba(255, 255, 255, 0);
+    --color-background-transparent-hover: rgba(255, 255, 255, 0.08);
+    --color-background-transparent-active: rgba(255, 255, 255, 0.08);
+    --color-icon-primary: #ffffff;
+    --color-icon-secondary: #ffffff;
+    --color-icon-tertiary: rgba(255, 255, 255, 0.8);
+    --color-icon-brand: #ffffff;
+    --color-icon-accent: #85d3dc;
+    --color-icon-error: #f07575;
+    --color-icon-info: #6e95cf;
+    --color-icon-success: #8adcc6;
+    --color-icon-warning: #f6c66f;
+    --color-icon-warning-hover: #f6c66f;
+    --color-icon-onAccent: #ffffff;
+    --color-border-primary: rgba(255, 255, 255, 0.3);
+    --color-border-primary-hover: rgba(255, 255, 255, 0.65);
+    --color-searchInput-background: rgba(0, 0, 0, 0.3);
+    --color-divider-primary: rgba(255, 255, 255, 0.3);
+    --color-divider-secondary: rgba(255, 255, 255, 0.3);
+    --color-colorIndicator-brand: #0aa6b8;
+    --color-toggle-background: rgba(0, 0, 0, 0.3);
+    --color-toggle-thumb-background-off: #ffffff;
+    --color-toggle-thumb-background-on: #054f57;
+  }
+}
+
+@mixin ds-subtheme-dark-brand {
+  & {
+    --color-text-primary: #ffffff;
+    --color-text-primary-hover: #ffffff;
+    --color-text-underline-hover: #ffffff;
+    --color-text-secondary: rgba(255, 255, 255, 0.8);
+    --color-text-tertiary: rgba(255, 255, 255, 0.65);
+    --color-text-accent: #80dfea;
+    --color-text-error: #fee7e7;
+    --color-text-info: #e7effe;
+    --color-text-onAccent: #1d6670;
+    --color-text-success: #e2fef7;
+    --color-text-warning: #fefbd2;
+    --color-text-warning-hover: #fefbd2;
+    --color-background-primary: #1d6670;
+    --color-background-secondary: #223c44;
+    --color-background-accent: #ffffff;
+    --color-background-accent-hover: rgba(255, 255, 255, 0.8);
+    --color-background-accent-active: rgba(255, 255, 255, 0.65);
+    --color-background-accent-disabled: rgba(255, 255, 255, 0.65);
+    --color-background-accentSubtle: #223c44;
+    --color-background-transparent: rgba(255, 255, 255, 0);
+    --color-background-transparent-hover: rgba(147, 149, 159, 0.15);
+    --color-background-transparent-active: rgba(147, 149, 159, 0.15);
+    --color-icon-primary: #ced1d6;
+    --color-icon-secondary: rgba(255, 255, 255, 0.8);
+    --color-icon-tertiary: rgba(255, 255, 255, 0.65);
+    --color-icon-brand: #ced1d6;
+    --color-icon-accent: #2db5c6;
+    --color-icon-error: #d07c7c;
+    --color-icon-onAccent: #1a1c1c;
+    --color-icon-info: #6e95cf;
+    --color-icon-success: #41a48a;
+    --color-icon-warning: #cbc576;
+    --color-icon-warning-hover: #cbc576;
+    --color-border-primary: rgba(255, 255, 255, 0.3);
+    --color-border-primary-hover: rgba(255, 255, 255, 0.65);
+    --color-searchInput-background: #223c44;
+    --color-divider-primary: rgba(255, 255, 255, 0.3);
+    --color-divider-secondary: rgba(255, 255, 255, 0.3);
+    --color-colorIndicator-brand: #80dfea;
+    --color-toggle-background: #223c44;
+    --color-toggle-thumb-background-off: #ffffff;
+    --color-toggle-thumb-background-on: #1d6670;
+  }
+}

package/build/esm/web-tokens/web-tokens/scss/subthemes/_brandSubtle.scss

@@ -0,0 +1,25 @@
+@mixin ds-subtheme-light-brandSubtle {
+  & {
+    --color-background-transparent-hover: rgba(96, 117, 133, 0.05);
+    --color-background-accentSubtle: #e7f6f8;
+    --color-text-primary: #5a7183;
+    --color-text-secondary: #5a7183;
+    --color-text-accent: #047a88;
+    --color-toggle-background: #7b8e9d;
+    --color-toggle-thumb-background-off: #ffffff;
+    --color-toggle-thumb-background-on: #ffffff;
+  }
+}
+
+@mixin ds-subtheme-dark-brandSubtle {
+  & {
+    --color-background-transparent-hover: rgba(255, 255, 255, 0.08);
+    --color-background-accentSubtle: #223c44;
+    --color-text-primary: rgba(255, 255, 255, 0.65);
+    --color-text-secondary: rgba(255, 255, 255, 0.65);
+    --color-text-accent: #2db5c6;
+    --color-toggle-background: #7b8e9d;
+    --color-toggle-thumb-background-off: #ffffff;
+    --color-toggle-thumb-background-on: #ffffff;
+  }
+}