baseui 14.0.0 → 15.0.0

package/themes/light-theme/color-component-tokens.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _colorTokens = _interopRequireDefault(require("./color-tokens"));
+var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-tokens"));
+var _tokens = require("../../tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -13,341 +14,345 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
+const defaultSemanticColors = (0, _colorSemanticTokens.default)();
 const tagHoverBackground = `rgba(0, 0, 0, 0.08)`;
 
 /* ---- Component colors ---- */
-// TODO(#2318) Make it a plain object in the next v11 major version
-// with values taken from `defaultFoundationColorTokens`.
-// Due to the legacy `createTheme` type the value need to be
-// overrideable through primitives (`foundation` )
-var _default = (themePrimitives = _colorTokens.default) => ({
-  bannerActionLowInfo: themePrimitives.accent100,
-  bannerActionLowNegative: themePrimitives.negative100,
-  bannerActionLowPositive: themePrimitives.positive100,
-  bannerActionLowWarning: themePrimitives.warning200,
-  bannerActionHighInfo: themePrimitives.accent500,
-  bannerActionHighNegative: themePrimitives.negative500,
-  bannerActionHighPositive: themePrimitives.positive500,
-  bannerActionHighWarning: themePrimitives.warning200,
+var _default = (semanticColors = defaultSemanticColors) => ({
+  // Banner
+  bannerActionLowInfo: _tokens.primitiveLightColors.blue100,
+  bannerActionLowNegative: _tokens.primitiveLightColors.red100,
+  bannerActionLowPositive: _tokens.primitiveLightColors.green100,
+  bannerActionLowWarning: _tokens.primitiveLightColors.yellow100,
+  bannerActionHighInfo: _tokens.primitiveLightColors.blue700,
+  bannerActionHighNegative: _tokens.primitiveLightColors.red700,
+  bannerActionHighPositive: _tokens.primitiveLightColors.green700,
+  bannerActionHighWarning: _tokens.primitiveLightColors.yellow200,
+  // BottomNavigation
+  bottomNavigationText: _tokens.primitiveLightColors.gray600,
+  bottomNavigationSelectedText: semanticColors.contentPrimary,
   // Buttons
-  buttonPrimaryFill: themePrimitives.primary,
-  buttonPrimaryText: themePrimitives.white,
-  buttonPrimaryHover: themePrimitives.primary700,
-  buttonPrimaryActive: themePrimitives.primary600,
-  buttonPrimarySelectedFill: themePrimitives.primary600,
-  buttonPrimarySelectedText: themePrimitives.white,
-  buttonPrimarySpinnerForeground: themePrimitives.accent,
-  buttonPrimarySpinnerBackground: themePrimitives.primaryB,
-  buttonSecondaryFill: themePrimitives.primary100,
-  buttonSecondaryText: themePrimitives.primary,
-  buttonSecondaryHover: themePrimitives.primary200,
-  buttonSecondaryActive: themePrimitives.primary300,
-  buttonSecondarySelectedFill: themePrimitives.primary300,
-  buttonSecondarySelectedText: themePrimitives.primary,
-  buttonSecondarySpinnerForeground: themePrimitives.accent,
-  buttonSecondarySpinnerBackground: themePrimitives.primaryB,
+  buttonPrimaryFill: semanticColors.backgroundInversePrimary,
+  buttonPrimaryText: semanticColors.contentInversePrimary,
+  buttonPrimaryHover: _tokens.primitiveLightColors.gray900,
+  buttonPrimaryActive: _tokens.primitiveLightColors.gray800,
+  buttonPrimarySelectedFill: semanticColors.backgroundInversePrimary,
+  buttonPrimarySelectedText: semanticColors.contentInversePrimary,
+  buttonPrimarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonPrimarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonSecondaryFill: semanticColors.backgroundSecondary,
+  buttonSecondaryText: semanticColors.contentPrimary,
+  buttonSecondaryHover: _tokens.primitiveLightColors.gray200,
+  buttonSecondaryActive: _tokens.primitiveLightColors.gray300,
+  buttonSecondarySelectedFill: semanticColors.backgroundInversePrimary,
+  buttonSecondarySelectedText: semanticColors.contentInversePrimary,
+  buttonSecondarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonSecondarySpinnerBackground: semanticColors.backgroundPrimary,
   buttonTertiaryFill: 'transparent',
-  buttonTertiaryText: themePrimitives.primary,
-  buttonTertiaryHover: themePrimitives.primary50,
-  buttonTertiaryActive: themePrimitives.primary100,
-  buttonTertiarySelectedFill: themePrimitives.primary100,
-  buttonTertiarySelectedText: themePrimitives.primary,
-  buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
-  buttonTertiaryDisabledActiveText: themePrimitives.mono600,
-  buttonTertiarySpinnerForeground: themePrimitives.accent,
-  buttonTertiarySpinnerBackground: themePrimitives.primary100,
-  buttonDisabledFill: themePrimitives.mono200,
-  buttonDisabledText: themePrimitives.mono600,
-  buttonDisabledActiveFill: themePrimitives.mono700,
-  buttonDisabledActiveText: themePrimitives.mono100,
-  buttonDisabledSpinnerForeground: themePrimitives.mono600,
-  buttonDisabledSpinnerBackground: themePrimitives.mono400,
+  buttonTertiaryText: semanticColors.contentPrimary,
+  buttonTertiaryHover: _tokens.primitiveLightColors.gray50,
+  buttonTertiaryActive: _tokens.primitiveLightColors.gray100,
+  buttonTertiarySelectedFill: semanticColors.backgroundInversePrimary,
+  buttonTertiarySelectedText: semanticColors.contentInversePrimary,
+  buttonTertiaryDisabledActiveFill: semanticColors.backgroundStateDisabled,
+  buttonTertiaryDisabledActiveText: semanticColors.contentStateDisabled,
+  buttonTertiarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonTertiarySpinnerBackground: semanticColors.backgroundTertiary,
+  buttonDisabledFill: semanticColors.backgroundStateDisabled,
+  buttonDisabledText: semanticColors.contentStateDisabled,
+  buttonDisabledActiveFill: semanticColors.backgroundStateDisabled,
+  buttonDisabledActiveText: semanticColors.contentStateDisabled,
+  buttonDisabledSpinnerForeground: semanticColors.contentStateDisabled,
+  buttonDisabledSpinnerBackground: semanticColors.backgroundPrimary,
   // Breadcrumbs
-  breadcrumbsText: themePrimitives.black,
-  breadcrumbsSeparatorFill: themePrimitives.mono700,
+  breadcrumbsText: semanticColors.contentPrimary,
+  breadcrumbsSeparatorFill: semanticColors.contentTertiary,
   // Datepicker
-  calendarBackground: themePrimitives.mono100,
-  calendarForeground: themePrimitives.mono1000,
-  calendarForegroundDisabled: themePrimitives.mono500,
-  calendarHeaderBackground: themePrimitives.white,
-  calendarHeaderForeground: themePrimitives.primary,
-  calendarHeaderBackgroundActive: themePrimitives.primary700,
-  calendarHeaderForegroundDisabled: themePrimitives.primary500,
-  calendarDayForegroundPseudoSelected: themePrimitives.mono1000,
-  calendarDayBackgroundPseudoSelectedHighlighted: themePrimitives.primary200,
-  calendarDayForegroundPseudoSelectedHighlighted: themePrimitives.mono1000,
-  calendarDayBackgroundSelected: themePrimitives.primary,
-  calendarDayForegroundSelected: themePrimitives.white,
-  calendarDayBackgroundSelectedHighlighted: themePrimitives.primary,
-  calendarDayForegroundSelectedHighlighted: themePrimitives.white,
+  calendarBackground: semanticColors.backgroundPrimary,
+  calendarForeground: semanticColors.contentPrimary,
+  calendarForegroundDisabled: semanticColors.contentStateDisabled,
+  calendarHeaderBackground: semanticColors.backgroundPrimary,
+  calendarHeaderForeground: semanticColors.contentPrimary,
+  calendarHeaderBackgroundActive: semanticColors.backgroundInversePrimary,
+  calendarHeaderForegroundDisabled: semanticColors.contentStateDisabled,
+  calendarDayForegroundPseudoSelected: semanticColors.backgroundInversePrimary,
+  calendarDayBackgroundPseudoSelectedHighlighted: semanticColors.backgroundTertiary,
+  calendarDayForegroundPseudoSelectedHighlighted: semanticColors.contentPrimary,
+  calendarDayBackgroundSelected: semanticColors.backgroundInversePrimary,
+  calendarDayForegroundSelected: semanticColors.contentInversePrimary,
+  calendarDayBackgroundSelectedHighlighted: semanticColors.backgroundInversePrimary,
+  calendarDayForegroundSelectedHighlighted: semanticColors.contentInversePrimary,
   // Combobox
-  comboboxListItemFocus: themePrimitives.mono200,
-  comboboxListItemHover: themePrimitives.mono300,
+  comboboxListItemFocus: semanticColors.backgroundSecondary,
+  comboboxListItemHover: semanticColors.backgroundTertiary,
   // FileUploader
-  fileUploaderBackgroundColor: themePrimitives.mono200,
-  fileUploaderBackgroundColorActive: themePrimitives.primary50,
-  fileUploaderBorderColorActive: themePrimitives.primary,
-  fileUploaderBorderColorDefault: themePrimitives.mono500,
-  fileUploaderMessageColor: themePrimitives.mono800,
+  fileUploaderBackgroundColor: semanticColors.backgroundSecondary,
+  fileUploaderBackgroundColorActive: semanticColors.backgroundPrimary,
+  fileUploaderBorderColorActive: semanticColors.borderSelected,
+  fileUploaderBorderColorDefault: semanticColors.borderOpaque,
+  fileUploaderMessageColor: semanticColors.contentPrimary,
   // Links
-  linkText: themePrimitives.primary,
-  linkVisited: themePrimitives.primary700,
-  linkHover: themePrimitives.primary600,
-  linkActive: themePrimitives.primary500,
+  linkText: semanticColors.contentPrimary,
+  linkVisited: _tokens.primitiveLightColors.gray600,
+  linkHover: _tokens.primitiveLightColors.gray800,
+  linkActive: _tokens.primitiveLightColors.gray700,
   // List
-  listHeaderFill: themePrimitives.white,
-  listBodyFill: themePrimitives.white,
+  listHeaderFill: semanticColors.backgroundPrimary,
+  listBodyFill: semanticColors.backgroundPrimary,
   // ProgressSteps
-  progressStepsCompletedText: themePrimitives.white,
-  progressStepsCompletedFill: themePrimitives.primary,
-  progressStepsActiveText: themePrimitives.white,
-  progressStepsActiveFill: themePrimitives.primary,
+  progressStepsCompletedText: semanticColors.contentInversePrimary,
+  progressStepsCompletedFill: semanticColors.backgroundInversePrimary,
+  progressStepsActiveText: semanticColors.contentInversePrimary,
+  progressStepsActiveFill: semanticColors.backgroundInversePrimary,
   // Toggle
-  toggleFill: themePrimitives.white,
-  toggleFillChecked: themePrimitives.primary,
-  toggleFillDisabled: themePrimitives.mono600,
-  toggleTrackFill: themePrimitives.mono400,
-  toggleTrackFillDisabled: themePrimitives.mono300,
+  toggleFill: semanticColors.backgroundPrimary,
+  toggleFillChecked: semanticColors.contentPrimary,
+  toggleFillDisabled: semanticColors.contentStateDisabled,
+  toggleTrackFill: semanticColors.backgroundTertiary,
+  toggleTrackFillDisabled: semanticColors.backgroundStateDisabled,
   // Tick
-  tickFill: themePrimitives.mono100,
-  tickFillHover: themePrimitives.mono200,
-  tickFillActive: themePrimitives.mono300,
-  tickFillSelected: themePrimitives.primary,
-  tickFillSelectedHover: themePrimitives.primary700,
-  tickFillSelectedHoverActive: themePrimitives.primary600,
-  tickFillError: themePrimitives.negative50,
-  tickFillErrorHover: themePrimitives.negative100,
-  tickFillErrorHoverActive: themePrimitives.negative200,
-  tickFillErrorSelected: themePrimitives.negative400,
-  tickFillErrorSelectedHover: themePrimitives.negative500,
-  tickFillErrorSelectedHoverActive: themePrimitives.negative600,
-  tickFillDisabled: themePrimitives.mono600,
-  tickBorder: themePrimitives.mono700,
-  tickBorderError: themePrimitives.negative400,
-  tickMarkFill: themePrimitives.white,
-  tickMarkFillError: themePrimitives.white,
-  tickMarkFillDisabled: themePrimitives.mono100,
+  tickFill: semanticColors.backgroundPrimary,
+  tickFillHover: _tokens.primitiveLightColors.gray50,
+  tickFillActive: _tokens.primitiveLightColors.gray100,
+  tickFillSelected: semanticColors.contentPrimary,
+  tickFillSelectedHover: _tokens.primitiveLightColors.gray900,
+  tickFillSelectedHoverActive: _tokens.primitiveLightColors.gray800,
+  tickFillError: semanticColors.backgroundPrimary,
+  tickFillErrorHover: _tokens.primitiveLightColors.gray50,
+  tickFillErrorHoverActive: _tokens.primitiveLightColors.gray100,
+  tickFillErrorSelected: semanticColors.contentNegative,
+  tickFillErrorSelectedHover: _tokens.primitiveLightColors.red700,
+  tickFillErrorSelectedHoverActive: _tokens.primitiveLightColors.red800,
+  tickFillDisabled: semanticColors.backgroundStateDisabled,
+  tickBorder: semanticColors.contentTertiary,
+  tickBorderError: semanticColors.borderNegative,
+  tickMarkFill: semanticColors.contentInversePrimary,
+  tickMarkFillError: semanticColors.contentOnColor,
+  tickMarkFillDisabled: semanticColors.contentInversePrimary,
   // Slider/Toggle
   sliderTrackFill: 'transparent',
-  sliderHandleFill: themePrimitives.primaryA,
-  sliderHandleFillDisabled: themePrimitives.primary400,
-  sliderHandleInnerFill: themePrimitives.primaryA,
-  sliderTrackFillHover: themePrimitives.mono500,
-  sliderTrackFillActive: themePrimitives.mono600,
-  sliderTrackFillDisabled: themePrimitives.mono300,
-  sliderHandleInnerFillDisabled: themePrimitives.mono400,
-  sliderHandleInnerFillSelectedHover: themePrimitives.primary,
-  sliderHandleInnerFillSelectedActive: themePrimitives.primary500,
+  sliderHandleFill: semanticColors.contentPrimary,
+  sliderHandleFillDisabled: semanticColors.backgroundStateDisabled,
+  sliderHandleInnerFill: semanticColors.contentPrimary,
+  sliderTrackFillHover: _tokens.primitiveLightColors.gray200,
+  sliderTrackFillActive: _tokens.primitiveLightColors.gray300,
+  sliderTrackFillDisabled: semanticColors.backgroundStateDisabled,
+  sliderHandleInnerFillDisabled: semanticColors.backgroundStateDisabled,
+  sliderHandleInnerFillSelectedHover: _tokens.primitiveLightColors.gray900,
+  sliderHandleInnerFillSelectedActive: _tokens.primitiveLightColors.gray800,
   // Inputs
-  inputBorder: themePrimitives.mono300,
-  inputFill: themePrimitives.mono300,
-  inputFillError: themePrimitives.negative50,
-  inputFillDisabled: themePrimitives.mono200,
-  inputFillActive: themePrimitives.mono200,
-  inputFillPositive: themePrimitives.positive50,
-  inputTextDisabled: themePrimitives.mono600,
-  inputBorderError: themePrimitives.negative200,
-  inputBorderPositive: themePrimitives.positive200,
-  inputEnhancerFill: themePrimitives.mono300,
-  inputEnhancerFillDisabled: themePrimitives.mono300,
-  inputEnhancerTextDisabled: themePrimitives.mono600,
-  inputPlaceholder: themePrimitives.mono700,
-  inputPlaceholderDisabled: themePrimitives.mono600,
+  inputBorder: semanticColors.borderOpaque,
+  inputFill: semanticColors.backgroundSecondary,
+  inputFillError: semanticColors.backgroundPrimary,
+  inputFillDisabled: semanticColors.backgroundStateDisabled,
+  inputFillActive: semanticColors.backgroundPrimary,
+  inputFillPositive: semanticColors.backgroundPrimary,
+  inputTextDisabled: semanticColors.contentStateDisabled,
+  inputBorderError: semanticColors.borderNegative,
+  inputBorderPositive: semanticColors.borderPositive,
+  inputEnhancerFill: semanticColors.contentPrimary,
+  inputEnhancerFillDisabled: semanticColors.contentStateDisabled,
+  inputEnhancerTextDisabled: semanticColors.contentStateDisabled,
+  inputPlaceholder: semanticColors.contentTertiary,
+  inputPlaceholderDisabled: semanticColors.contentStateDisabled,
   // Menu
-  menuFill: themePrimitives.mono100,
-  menuFillHover: themePrimitives.mono200,
-  menuFontDefault: themePrimitives.mono800,
-  menuFontDisabled: themePrimitives.mono500,
-  menuFontHighlighted: themePrimitives.mono1000,
-  menuFontSelected: themePrimitives.mono1000,
+  menuFill: semanticColors.backgroundPrimary,
+  menuFillHover: semanticColors.backgroundSecondary,
+  menuFontDefault: semanticColors.contentPrimary,
+  menuFontDisabled: semanticColors.contentStateDisabled,
+  menuFontHighlighted: semanticColors.contentPrimary,
+  menuFontSelected: semanticColors.contentPrimary,
   // Modal
-  modalCloseColor: themePrimitives.mono1000,
-  modalCloseColorHover: themePrimitives.mono800,
-  modalCloseColorFocus: themePrimitives.mono800,
+  modalCloseColor: semanticColors.contentPrimary,
+  modalCloseColorHover: _tokens.primitiveLightColors.gray900,
+  modalCloseColorFocus: _tokens.primitiveLightColors.gray800,
   // Tab
-  tabBarFill: themePrimitives.mono200,
-  tabColor: themePrimitives.mono800,
+  tabBarFill: semanticColors.backgroundPrimary,
+  tabColor: semanticColors.contentTertiary,
   // Notification
-  notificationInfoBackground: themePrimitives.accent50,
-  notificationInfoText: themePrimitives.primaryA,
-  notificationPositiveBackground: themePrimitives.positive50,
-  notificationPositiveText: themePrimitives.primaryA,
-  notificationWarningBackground: themePrimitives.warning50,
-  notificationWarningText: themePrimitives.primaryA,
-  notificationNegativeBackground: themePrimitives.negative50,
-  notificationNegativeText: themePrimitives.primaryA,
+  notificationInfoBackground: semanticColors.backgroundAccentLight,
+  notificationInfoText: semanticColors.contentPrimary,
+  notificationPositiveBackground: semanticColors.backgroundPositiveLight,
+  notificationPositiveText: semanticColors.contentPrimary,
+  notificationWarningBackground: semanticColors.backgroundWarningLight,
+  notificationWarningText: semanticColors.contentPrimary,
+  notificationNegativeBackground: semanticColors.backgroundNegativeLight,
+  notificationNegativeText: semanticColors.contentPrimary,
   // Tag
 
   // Custom ramps
-  tagFontDisabledRampUnit: '100',
+  tagFontDisabledRampUnit: '200',
   tagSolidFontRampUnit: '0',
   tagSolidRampUnit: '400',
-  tagOutlinedFontRampUnit: '400',
-  tagOutlinedRampUnit: '200',
+  tagOutlinedFontRampUnit: '600',
+  tagOutlinedRampUnit: '600',
   // Deprecated
   tagSolidHoverRampUnit: '50',
   tagSolidActiveRampUnit: '100',
   tagSolidDisabledRampUnit: '50',
-  tagSolidFontHoverRampUnit: '500',
+  tagSolidFontHoverRampUnit: '700',
   tagLightRampUnit: '50',
   tagLightHoverRampUnit: '100',
-  tagLightActiveRampUnit: '100',
-  tagLightFontRampUnit: '500',
-  tagLightFontHoverRampUnit: '500',
-  tagOutlinedHoverRampUnit: '50',
-  tagOutlinedActiveRampUnit: '0',
-  tagOutlinedFontHoverRampUnit: '400',
+  tagLightActiveRampUnit: '200',
+  tagLightFontRampUnit: '600',
+  tagLightFontHoverRampUnit: '200',
+  tagOutlinedHoverRampUnit: '700',
+  tagOutlinedActiveRampUnit: '800',
+  tagOutlinedFontHoverRampUnit: '700',
   // Neutral
-  tagNeutralFontDisabled: themePrimitives.mono600,
-  tagNeutralOutlinedDisabled: themePrimitives.mono400,
-  tagNeutralSolidFont: themePrimitives.white,
-  tagNeutralSolidBackground: themePrimitives.black,
-  tagNeutralOutlinedBackground: themePrimitives.mono600,
-  tagNeutralOutlinedFont: themePrimitives.black,
+  tagNeutralFontDisabled: _tokens.primitiveLightColors.gray200,
+  tagNeutralOutlinedDisabled: _tokens.primitiveLightColors.gray200,
+  tagNeutralSolidFont: _tokens.primitiveLightColors.white,
+  tagNeutralSolidBackground: _tokens.primitiveLightColors.gray600,
+  tagNeutralOutlinedBackground: _tokens.primitiveLightColors.gray50,
+  tagNeutralOutlinedFont: _tokens.primitiveLightColors.gray700,
   // Deprecated
-  tagNeutralSolidHover: themePrimitives.mono300,
-  tagNeutralSolidActive: themePrimitives.mono400,
-  tagNeutralSolidDisabled: themePrimitives.mono200,
-  tagNeutralSolidFontHover: themePrimitives.mono900,
-  tagNeutralLightBackground: themePrimitives.mono300,
-  tagNeutralLightHover: themePrimitives.mono300,
-  tagNeutralLightActive: themePrimitives.mono400,
-  tagNeutralLightDisabled: themePrimitives.mono200,
-  tagNeutralLightFont: themePrimitives.mono900,
-  tagNeutralLightFontHover: themePrimitives.mono900,
-  tagNeutralOutlinedActive: themePrimitives.mono900,
-  tagNeutralOutlinedFontHover: themePrimitives.mono800,
+  tagNeutralSolidHover: _tokens.primitiveLightColors.gray900,
+  tagNeutralSolidActive: _tokens.primitiveLightColors.gray800,
+  tagNeutralSolidDisabled: _tokens.primitiveLightColors.gray200,
+  tagNeutralSolidFontHover: _tokens.primitiveLightColors.gray700,
+  tagNeutralLightBackground: _tokens.primitiveLightColors.white,
+  tagNeutralLightHover: _tokens.primitiveLightColors.gray50,
+  tagNeutralLightActive: _tokens.primitiveLightColors.gray100,
+  tagNeutralLightDisabled: _tokens.primitiveLightColors.gray200,
+  tagNeutralLightFont: _tokens.primitiveLightColors.gray600,
+  tagNeutralLightFontHover: _tokens.primitiveLightColors.gray700,
+  tagNeutralOutlinedActive: _tokens.primitiveLightColors.gray800,
+  tagNeutralOutlinedFontHover: _tokens.primitiveLightColors.gray700,
   tagNeutralOutlinedHover: tagHoverBackground,
   // Primary
-  tagPrimaryFontDisabled: themePrimitives.primary400,
-  tagPrimaryOutlinedDisabled: themePrimitives.primary200,
-  tagPrimarySolidFont: themePrimitives.white,
-  tagPrimarySolidBackground: themePrimitives.primary,
-  tagPrimaryOutlinedFontHover: themePrimitives.primary,
-  tagPrimaryOutlinedFont: themePrimitives.primary,
+  tagPrimaryFontDisabled: _tokens.primitiveLightColors.gray300,
+  tagPrimaryOutlinedDisabled: _tokens.primitiveLightColors.gray200,
+  tagPrimarySolidFont: _tokens.primitiveLightColors.white,
+  tagPrimarySolidBackground: _tokens.primitiveLightColors.gray600,
+  tagPrimaryOutlinedFontHover: _tokens.primitiveLightColors.gray900,
+  tagPrimaryOutlinedFont: _tokens.primitiveLightColors.gray700,
   // Deprecated
-  tagPrimarySolidHover: themePrimitives.primary100,
-  tagPrimarySolidActive: themePrimitives.primary200,
-  tagPrimarySolidDisabled: themePrimitives.primary50,
-  tagPrimarySolidFontHover: themePrimitives.primary700,
-  tagPrimaryLightBackground: themePrimitives.primary50,
-  tagPrimaryLightHover: themePrimitives.primary100,
-  tagPrimaryLightActive: themePrimitives.primary100,
-  tagPrimaryLightDisabled: themePrimitives.primary50,
-  tagPrimaryLightFont: themePrimitives.primary500,
-  tagPrimaryLightFontHover: themePrimitives.primary500,
-  tagPrimaryOutlinedActive: themePrimitives.primary600,
+  tagPrimarySolidHover: _tokens.primitiveLightColors.gray900,
+  tagPrimarySolidActive: _tokens.primitiveLightColors.gray900,
+  tagPrimarySolidDisabled: _tokens.primitiveLightColors.gray200,
+  tagPrimarySolidFontHover: _tokens.primitiveLightColors.gray900,
+  tagPrimaryLightBackground: _tokens.primitiveLightColors.white,
+  tagPrimaryLightHover: _tokens.primitiveLightColors.gray50,
+  tagPrimaryLightActive: _tokens.primitiveLightColors.gray100,
+  tagPrimaryLightDisabled: _tokens.primitiveLightColors.gray200,
+  tagPrimaryLightFont: _tokens.primitiveLightColors.black,
+  tagPrimaryLightFontHover: _tokens.primitiveLightColors.gray900,
+  tagPrimaryOutlinedActive: _tokens.primitiveLightColors.gray900,
   tagPrimaryOutlinedHover: tagHoverBackground,
-  tagPrimaryOutlinedBackground: themePrimitives.primary400,
+  tagPrimaryOutlinedBackground: _tokens.primitiveLightColors.gray50,
   // Accent
-  tagAccentFontDisabled: themePrimitives.accent200,
-  tagAccentOutlinedDisabled: themePrimitives.accent200,
-  tagAccentSolidFont: themePrimitives.white,
-  tagAccentSolidBackground: themePrimitives.accent400,
-  tagAccentOutlinedBackground: themePrimitives.accent200,
-  tagAccentOutlinedFont: themePrimitives.accent400,
+  tagAccentFontDisabled: _tokens.primitiveLightColors.blue300,
+  tagAccentOutlinedDisabled: _tokens.primitiveLightColors.blue200,
+  tagAccentSolidFont: _tokens.primitiveLightColors.white,
+  tagAccentSolidBackground: _tokens.primitiveLightColors.blue600,
+  tagAccentOutlinedBackground: _tokens.primitiveLightColors.blue50,
+  tagAccentOutlinedFont: _tokens.primitiveLightColors.blue700,
   // Deprecated
-  tagAccentSolidHover: themePrimitives.accent50,
-  tagAccentSolidActive: themePrimitives.accent100,
-  tagAccentSolidDisabled: themePrimitives.accent50,
-  tagAccentSolidFontHover: themePrimitives.accent500,
-  tagAccentLightBackground: themePrimitives.accent50,
-  tagAccentLightHover: themePrimitives.accent100,
-  tagAccentLightActive: themePrimitives.accent100,
-  tagAccentLightDisabled: themePrimitives.accent50,
-  tagAccentLightFont: themePrimitives.accent500,
-  tagAccentLightFontHover: themePrimitives.accent500,
-  tagAccentOutlinedActive: themePrimitives.accent600,
-  tagAccentOutlinedFontHover: themePrimitives.accent400,
+  tagAccentSolidHover: _tokens.primitiveLightColors.blue50,
+  tagAccentSolidActive: _tokens.primitiveLightColors.blue100,
+  tagAccentSolidDisabled: _tokens.primitiveLightColors.blue50,
+  tagAccentSolidFontHover: _tokens.primitiveLightColors.blue500,
+  tagAccentLightBackground: _tokens.primitiveLightColors.blue50,
+  tagAccentLightHover: _tokens.primitiveLightColors.blue100,
+  tagAccentLightActive: _tokens.primitiveLightColors.blue200,
+  tagAccentLightDisabled: _tokens.primitiveLightColors.blue50,
+  tagAccentLightFont: _tokens.primitiveLightColors.blue600,
+  tagAccentLightFontHover: _tokens.primitiveLightColors.blue700,
+  tagAccentOutlinedActive: _tokens.primitiveLightColors.blue800,
+  tagAccentOutlinedFontHover: _tokens.primitiveLightColors.blue700,
   tagAccentOutlinedHover: tagHoverBackground,
   // Positive
-  tagPositiveFontDisabled: themePrimitives.positive200,
-  tagPositiveOutlinedDisabled: themePrimitives.positive200,
-  tagPositiveSolidFont: themePrimitives.white,
-  tagPositiveSolidBackground: themePrimitives.positive400,
-  tagPositiveOutlinedBackground: themePrimitives.positive200,
-  tagPositiveOutlinedFont: themePrimitives.positive400,
+  tagPositiveFontDisabled: _tokens.primitiveLightColors.green300,
+  tagPositiveOutlinedDisabled: _tokens.primitiveLightColors.green200,
+  tagPositiveSolidFont: _tokens.primitiveLightColors.white,
+  tagPositiveSolidBackground: _tokens.primitiveLightColors.green600,
+  tagPositiveOutlinedBackground: _tokens.primitiveLightColors.green50,
+  tagPositiveOutlinedFont: _tokens.primitiveLightColors.green700,
   // Deprecated
-  tagPositiveSolidHover: themePrimitives.positive50,
-  tagPositiveSolidActive: themePrimitives.positive100,
-  tagPositiveSolidDisabled: themePrimitives.positive50,
-  tagPositiveSolidFontHover: themePrimitives.positive500,
-  tagPositiveLightBackground: themePrimitives.positive50,
-  tagPositiveLightHover: themePrimitives.positive100,
-  tagPositiveLightActive: themePrimitives.positive100,
-  tagPositiveLightDisabled: themePrimitives.positive50,
-  tagPositiveLightFont: themePrimitives.positive500,
-  tagPositiveLightFontHover: themePrimitives.positive500,
-  tagPositiveOutlinedActive: themePrimitives.positive600,
-  tagPositiveOutlinedFontHover: themePrimitives.positive400,
+  tagPositiveSolidHover: _tokens.primitiveLightColors.green50,
+  tagPositiveSolidActive: _tokens.primitiveLightColors.green100,
+  tagPositiveSolidDisabled: _tokens.primitiveLightColors.green50,
+  tagPositiveSolidFontHover: _tokens.primitiveLightColors.green500,
+  tagPositiveLightBackground: _tokens.primitiveLightColors.green50,
+  tagPositiveLightHover: _tokens.primitiveLightColors.green100,
+  tagPositiveLightActive: _tokens.primitiveLightColors.green200,
+  tagPositiveLightDisabled: _tokens.primitiveLightColors.green50,
+  tagPositiveLightFont: _tokens.primitiveLightColors.green600,
+  tagPositiveLightFontHover: _tokens.primitiveLightColors.green700,
+  tagPositiveOutlinedActive: _tokens.primitiveLightColors.green800,
+  tagPositiveOutlinedFontHover: _tokens.primitiveLightColors.green700,
   tagPositiveOutlinedHover: tagHoverBackground,
   // Warning
-  tagWarningFontDisabled: themePrimitives.warning300,
-  tagWarningOutlinedDisabled: themePrimitives.warning300,
-  tagWarningSolidFont: themePrimitives.warning700,
-  tagWarningSolidBackground: themePrimitives.warning400,
-  tagWarningOutlinedBackground: themePrimitives.warning300,
-  tagWarningOutlinedFont: themePrimitives.warning600,
+  tagWarningFontDisabled: _tokens.primitiveLightColors.yellow200,
+  tagWarningOutlinedDisabled: _tokens.primitiveLightColors.yellow200,
+  tagWarningSolidFont: _tokens.primitiveLightColors.yellow900,
+  tagWarningSolidBackground: _tokens.primitiveLightColors.yellow300,
+  tagWarningOutlinedBackground: _tokens.primitiveLightColors.yellow50,
+  tagWarningOutlinedFont: _tokens.primitiveLightColors.yellow700,
   // Deprecated
-  tagWarningSolidHover: themePrimitives.warning50,
-  tagWarningSolidActive: themePrimitives.warning100,
-  tagWarningSolidDisabled: themePrimitives.warning50,
-  tagWarningSolidFontHover: themePrimitives.warning500,
-  tagWarningLightBackground: themePrimitives.warning50,
-  tagWarningLightHover: themePrimitives.warning100,
-  tagWarningLightActive: themePrimitives.warning100,
-  tagWarningLightDisabled: themePrimitives.warning50,
-  tagWarningLightFont: themePrimitives.warning500,
-  tagWarningLightFontHover: themePrimitives.warning500,
-  tagWarningOutlinedActive: themePrimitives.warning600,
-  tagWarningOutlinedFontHover: themePrimitives.warning600,
+  tagWarningSolidHover: _tokens.primitiveLightColors.yellow50,
+  tagWarningSolidActive: _tokens.primitiveLightColors.yellow100,
+  tagWarningSolidDisabled: _tokens.primitiveLightColors.yellow50,
+  tagWarningSolidFontHover: _tokens.primitiveLightColors.yellow500,
+  tagWarningLightBackground: _tokens.primitiveLightColors.yellow50,
+  tagWarningLightHover: _tokens.primitiveLightColors.yellow100,
+  tagWarningLightActive: _tokens.primitiveLightColors.yellow200,
+  tagWarningLightDisabled: _tokens.primitiveLightColors.yellow50,
+  tagWarningLightFont: _tokens.primitiveLightColors.yellow600,
+  tagWarningLightFontHover: _tokens.primitiveLightColors.yellow700,
+  tagWarningOutlinedActive: _tokens.primitiveLightColors.yellow800,
+  tagWarningOutlinedFontHover: _tokens.primitiveLightColors.yellow700,
   tagWarningOutlinedHover: tagHoverBackground,
   // Negative
-  tagNegativeFontDisabled: themePrimitives.negative200,
-  tagNegativeOutlinedDisabled: themePrimitives.negative200,
-  tagNegativeSolidFont: themePrimitives.white,
-  tagNegativeSolidBackground: themePrimitives.negative400,
-  tagNegativeOutlinedBackground: themePrimitives.negative200,
-  tagNegativeOutlinedFont: themePrimitives.negative400,
+  tagNegativeFontDisabled: _tokens.primitiveLightColors.red300,
+  tagNegativeOutlinedDisabled: _tokens.primitiveLightColors.red200,
+  tagNegativeSolidFont: _tokens.primitiveLightColors.white,
+  tagNegativeSolidBackground: _tokens.primitiveLightColors.red600,
+  tagNegativeOutlinedBackground: _tokens.primitiveLightColors.red50,
+  tagNegativeOutlinedFont: _tokens.primitiveLightColors.red700,
   // Deprecated
-  tagNegativeSolidHover: themePrimitives.negative50,
-  tagNegativeSolidActive: themePrimitives.negative100,
-  tagNegativeSolidDisabled: themePrimitives.negative50,
-  tagNegativeSolidFontHover: themePrimitives.negative500,
-  tagNegativeLightBackground: themePrimitives.negative50,
-  tagNegativeLightHover: themePrimitives.negative100,
-  tagNegativeLightActive: themePrimitives.negative100,
-  tagNegativeLightDisabled: themePrimitives.negative50,
-  tagNegativeLightFont: themePrimitives.negative500,
-  tagNegativeLightFontHover: themePrimitives.negative500,
-  tagNegativeOutlinedActive: themePrimitives.negative600,
-  tagNegativeOutlinedFontHover: themePrimitives.negative400,
+  tagNegativeSolidHover: _tokens.primitiveLightColors.red50,
+  tagNegativeSolidActive: _tokens.primitiveLightColors.red100,
+  tagNegativeSolidDisabled: _tokens.primitiveLightColors.red50,
+  tagNegativeSolidFontHover: _tokens.primitiveLightColors.red500,
+  tagNegativeLightBackground: _tokens.primitiveLightColors.red50,
+  tagNegativeLightHover: _tokens.primitiveLightColors.red100,
+  tagNegativeLightActive: _tokens.primitiveLightColors.red200,
+  tagNegativeLightDisabled: _tokens.primitiveLightColors.red50,
+  tagNegativeLightFont: _tokens.primitiveLightColors.red600,
+  tagNegativeLightFontHover: _tokens.primitiveLightColors.red700,
+  tagNegativeOutlinedActive: _tokens.primitiveLightColors.red800,
+  tagNegativeOutlinedFontHover: _tokens.primitiveLightColors.red700,
   tagNegativeOutlinedHover: tagHoverBackground,
   // Table
-  tableHeadBackgroundColor: themePrimitives.mono100,
-  tableBackground: themePrimitives.mono100,
-  tableStripedBackground: themePrimitives.mono200,
-  tableFilter: themePrimitives.mono600,
-  tableFilterHeading: themePrimitives.mono700,
-  tableFilterBackground: themePrimitives.mono100,
-  tableFilterFooterBackground: themePrimitives.mono200,
+  tableHeadBackgroundColor: semanticColors.backgroundPrimary,
+  tableBackground: semanticColors.backgroundPrimary,
+  tableStripedBackground: semanticColors.backgroundSecondary,
+  tableFilter: semanticColors.contentTertiary,
+  tableFilterHeading: semanticColors.contentPrimary,
+  tableFilterBackground: semanticColors.backgroundPrimary,
+  tableFilterFooterBackground: semanticColors.backgroundSecondary,
   // Toast
-  toastText: themePrimitives.white,
-  toastPrimaryText: themePrimitives.white,
-  toastInfoBackground: themePrimitives.accent400,
-  toastInfoText: themePrimitives.white,
-  toastPositiveBackground: themePrimitives.positive400,
-  toastPositiveText: themePrimitives.white,
-  toastWarningBackground: themePrimitives.warning400,
-  toastWarningText: themePrimitives.black,
-  toastNegativeBackground: themePrimitives.negative400,
-  toastNegativeText: themePrimitives.white,
+  toastText: semanticColors.contentOnColor,
+  toastPrimaryText: semanticColors.contentOnColor,
+  toastInfoBackground: semanticColors.backgroundAccent,
+  toastInfoText: semanticColors.contentOnColor,
+  toastPositiveBackground: semanticColors.backgroundPositive,
+  toastPositiveText: semanticColors.contentOnColor,
+  toastWarningBackground: semanticColors.backgroundWarning,
+  toastWarningText: semanticColors.contentOnColorInverse,
+  toastNegativeBackground: semanticColors.backgroundNegative,
+  toastNegativeText: semanticColors.contentOnColor,
   // Spinner
-  spinnerTrackFill: themePrimitives.mono900,
+  spinnerTrackFill: semanticColors.backgroundTertiary,
   // Progress bar
-  progressbarTrackFill: themePrimitives.mono900,
+  progressbarTrackFill: semanticColors.backgroundTertiary,
   // Tooltip
-  tooltipBackground: themePrimitives.mono900,
-  tooltipText: themePrimitives.mono100
+  tooltipBackground: semanticColors.backgroundInverseSecondary,
+  tooltipText: semanticColors.contentInversePrimary,
+  // Rating
+  ratingInactiveFill: semanticColors.backgroundPrimary,
+  ratingStroke: semanticColors.contentPrimary
 });
 exports.default = _default;