baseui 14.0.0 → 15.0.0

package/tag/styled-components.js

@@ -18,34 +18,30 @@ LICENSE file in the root directory of this source tree.
 */
 
 function customOnRamp(color, unit) {
+  // This is a temporary fix to prevent the tag from crashing when the color is not defined
+  if (!color && !(unit === '0' || unit === '1000')) {
+    return undefined;
+  }
   switch (unit) {
     case '0':
       return 'white';
     case '50':
-      // @ts-ignore
       return (0, _tint.default)(0.8, color);
     case '100':
-      // @ts-ignore
       return (0, _tint.default)(0.6, color);
     case '200':
-      // @ts-ignore
       return (0, _tint.default)(0.4, color);
     case '300':
-      // @ts-ignore
       return (0, _tint.default)(0.2, color);
     case '400':
       return color;
     case '500':
-      // @ts-ignore
       return (0, _shade.default)(0.2, color);
     case '600':
-      // @ts-ignore
       return (0, _shade.default)(0.4, color);
     case '700':
-      // @ts-ignore
       return (0, _shade.default)(0.6, color);
     case '800':
-      // @ts-ignore
       return (0, _shade.default)(0.8, color);
     case '1000':
       return 'black';
@@ -55,8 +51,8 @@ function customOnRamp(color, unit) {
 }
 const COLOR_STATE = {
   disabled: 'disabled',
-  solid: 'solid',
-  outline: 'outline'
+  primary: 'primary',
+  secondary: 'secondary'
 };
 
 // Probably best to bake this into the theme once we hit our next major.
@@ -67,25 +63,22 @@ const neutralColorStates = {
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNeutralFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagNeutralOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagNeutralOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagNeutralOutlinedBackground
+    backgroundColor: theme.colors.tagNeutralOutlinedBackground,
+    borderColor: null
   })
 };
 const primaryColorStates = {
@@ -93,228 +86,247 @@ const primaryColorStates = {
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPrimaryFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagPrimaryOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagPrimaryOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagPrimaryOutlinedBackground
+    backgroundColor: theme.colors.tagPrimaryOutlinedBackground,
+    borderColor: null
   })
 };
-const accentColorStates = {
+const blueColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagAccentFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagAccentOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.blue50, theme.colors.blue100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagAccentOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagAccentOutlinedBackground
+    backgroundColor: theme.colors.tagAccentOutlinedBackground,
+    borderColor: null
   })
 };
-const positiveColorStates = {
+const greenColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPositiveFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagPositiveOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.green50, theme.colors.green100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagPositiveOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagPositiveOutlinedBackground
+    backgroundColor: theme.colors.tagPositiveOutlinedBackground,
+    borderColor: null
   })
 };
-const warningColorStates = {
+const yellowColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagWarningFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagWarningOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.yellow50, theme.colors.yellow100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagWarningOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagWarningOutlinedBackground
+    backgroundColor: theme.colors.tagWarningOutlinedBackground,
+    borderColor: null
   })
 };
-const negativeColorStates = {
+const redColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNegativeFontDisabled,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagNegativeOutlinedDisabled
+    backgroundColor: pick(theme, theme.colors.red50, theme.colors.red100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
-    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: theme.colors.tagNegativeOutlinedFont,
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: theme.colors.tagNegativeOutlinedBackground
+    backgroundColor: theme.colors.tagNegativeOutlinedBackground,
+    borderColor: null
+  })
+};
+const limeColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: pick(theme, theme.colors.lime300, theme.colors.lime400Dark),
+    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.lime900Dark),
+    backgroundColor: pick(theme, theme.colors.lime600, theme.colors.lime400Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.lime700, theme.colors.lime700Dark),
+    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
+    borderColor: null
+  })
+};
+const tealColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: pick(theme, theme.colors.teal300, theme.colors.teal400Dark),
+    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.teal900Dark),
+    backgroundColor: pick(theme, theme.colors.teal600, theme.colors.teal400Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.teal700, theme.colors.teal700Dark),
+    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
+    borderColor: null
   })
 };
 const orangeColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.orange200, theme.colors.orange600),
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.orange200, theme.colors.orange700)
+    color: pick(theme, theme.colors.orange300, theme.colors.orange400Dark),
+    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
-    color: theme.colors.white,
-    backgroundColor: pick(theme, theme.colors.orange400, theme.colors.orange500),
-    // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.orange900Dark),
+    backgroundColor: pick(theme, theme.colors.orange600, theme.colors.orange400Dark),
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
-    color: pick(theme, theme.colors.orange400, theme.colors.orange300),
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.orange200, theme.colors.orange500)
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.orange700, theme.colors.orange700Dark),
+    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
+    borderColor: null
   })
 };
 const purpleColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.purple200, theme.colors.purple600),
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.purple200, theme.colors.purple700)
+    color: pick(theme, theme.colors.purple300, theme.colors.purple400Dark),
+    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
+    borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
-    color: theme.colors.white,
-    backgroundColor: pick(theme, theme.colors.purple400, theme.colors.purple500),
-    // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.purple900Dark),
+    backgroundColor: pick(theme, theme.colors.purple600, theme.colors.purple400Dark),
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
-    color: pick(theme, theme.colors.purple400, theme.colors.purple300),
-    // @ts-ignore
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.purple200, theme.colors.purple500)
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.purple700, theme.colors.purple700Dark),
+    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
+    borderColor: null
   })
 };
 const brownColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.brown200, theme.colors.brown600),
-    // @ts-ignore
+    color: pick(theme, theme.colors.amber200, theme.colors.amber400Dark),
     backgroundColor: null,
-    borderColor: pick(theme, theme.colors.brown200, theme.colors.brown700)
+    borderColor: pick(theme, theme.colors.amber200, theme.colors.amber400Dark)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
-    color: theme.colors.white,
-    backgroundColor: pick(theme, theme.colors.brown400, theme.colors.brown500),
-    // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.gray900Dark),
+    backgroundColor: pick(theme, theme.colors.amber600, theme.colors.amber400Dark),
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
-    color: pick(theme, theme.colors.brown400, theme.colors.brown300),
-    // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.amber600, theme.colors.amber600Dark),
     backgroundColor: null,
-    borderColor: pick(theme, theme.colors.brown200, theme.colors.brown500)
+    borderColor: pick(theme, theme.colors.amber600, theme.colors.amber600Dark)
   })
 };
 const customColorStates = {
   // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
-    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   }),
   // @ts-ignore
-  [COLOR_STATE.solid]: (theme, color) => ({
+  [COLOR_STATE.primary]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
     backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
-    // @ts-ignore
     borderColor: null
   }),
   // @ts-ignore
-  [COLOR_STATE.outline]: (theme, color) => ({
+  [COLOR_STATE.secondary]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
-    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
   })
@@ -322,26 +334,28 @@ const customColorStates = {
 const colorMap = {
   [_constants.KIND.neutral]: neutralColorStates,
   [_constants.KIND.primary]: primaryColorStates,
-  [_constants.KIND.accent]: accentColorStates,
-  [_constants.KIND.positive]: positiveColorStates,
-  [_constants.KIND.warning]: warningColorStates,
-  [_constants.KIND.negative]: negativeColorStates,
+  [_constants.KIND.accent]: blueColorStates,
+  [_constants.KIND.positive]: greenColorStates,
+  [_constants.KIND.warning]: yellowColorStates,
+  [_constants.KIND.negative]: redColorStates,
   [_constants.KIND.black]: primaryColorStates,
-  [_constants.KIND.blue]: accentColorStates,
-  [_constants.KIND.green]: positiveColorStates,
-  [_constants.KIND.red]: negativeColorStates,
-  [_constants.KIND.yellow]: warningColorStates,
+  [_constants.KIND.blue]: blueColorStates,
+  [_constants.KIND.green]: greenColorStates,
+  [_constants.KIND.red]: redColorStates,
+  [_constants.KIND.yellow]: yellowColorStates,
   [_constants.KIND.orange]: orangeColorStates,
   [_constants.KIND.purple]: purpleColorStates,
   [_constants.KIND.brown]: brownColorStates,
+  [_constants.KIND.lime]: limeColorStates,
+  [_constants.KIND.teal]: tealColorStates,
   [_constants.KIND.custom]: customColorStates
 };
 
 // @ts-ignore
 const getColorStateFromProps = props => {
   if (props.$disabled) return COLOR_STATE.disabled;
-  if (props.$variant === _constants.VARIANT.solid) return COLOR_STATE.solid;
-  return COLOR_STATE.outline;
+  if (props.$hierarchy === _constants.HIERARCHY.primary) return COLOR_STATE.primary;
+  return COLOR_STATE.secondary;
 };
 const Action = exports.Action = (0, _styles.styled)('span', props => {
   const {
@@ -410,7 +424,7 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
     $theme,
     $kind = _constants.KIND.primary,
     $clickable,
-    $variant,
+    $hierarchy,
     $disabled,
     $closeable,
     $isFocusVisible,
@@ -418,14 +432,13 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
     $size = _constants.SIZE.small,
     $contentMaxWidth
   } = props;
-  const borderRadius = $theme.borders.tagBorderRadius;
+  const borderRadius = $size === _constants.SIZE.small ? $theme.borders.radius200 : $theme.borders.radius300;
   const paddingMagnitude = {
     [_constants.SIZE.small]: $theme.sizing.scale300,
     [_constants.SIZE.medium]: $theme.sizing.scale500,
     [_constants.SIZE.large]: $theme.sizing.scale600
   }[$size];
-  const borderWidth = !$disabled && $variant === _constants.VARIANT.solid ? 0 : '2px';
-  // @ts-ignore
+  const borderWidth = !$disabled && $hierarchy === _constants.HIERARCHY.primary || $kind !== _constants.KIND.custom ? 0 : '2px';
   const {
     color,
     backgroundColor,

package/tag/tag.js

@@ -46,7 +46,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     overrides = {},
     startEnhancer,
     title,
-    variant = _constants.VARIANT.light
+    hierarchy = _constants.HIERARCHY.secondary
   } = props;
   const [focusVisible, setFocusVisible] = React.useState(false);
   function handleFocus(event) {
@@ -103,7 +103,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     $isFocused: isFocused,
     $isHovered: isHovered,
     $kind: kind,
-    $variant: variant,
+    $hierarchy: hierarchy,
     $isFocusVisible: focusVisible,
     $size: size
   };

package/tag/types.d.ts

@@ -16,11 +16,12 @@ export declare const TagKind: Readonly<{
     readonly orange: "orange";
     readonly purple: "purple";
     readonly brown: "brown";
+    readonly teal: "teal";
+    readonly lime: "lime";
 }>;
-export declare const TagVariant: Readonly<Readonly<{
-    readonly solid: "solid";
-    readonly light: "light";
-    readonly outlined: "outlined";
+export declare const TagHierarchy: Readonly<Readonly<{
+    readonly primary: "primary";
+    readonly secondary: "secondary";
 }>>;
 export declare const TagSize: Readonly<{
     readonly small: "small";
@@ -28,7 +29,7 @@ export declare const TagSize: Readonly<{
     readonly large: "large";
 }>;
 export type TagKind = keyof typeof TagKind;
-export type TagVariant = (typeof TagVariant)[keyof typeof TagVariant];
+export type TagHierarchy = (typeof TagHierarchy)[keyof typeof TagHierarchy];
 export type TagSize = keyof typeof TagSize;
 export type TagOverrides = {
     Root?: Override;
@@ -49,8 +50,8 @@ export type TagProps = {
     isHovered?: boolean;
     /** Defines tags look by purpose. Set it to one of KIND[key] values. Defaults to KIND.primary */
     kind?: TagKind;
-    /** Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light */
-    variant?: TagVariant;
+    /** Defines tags look. Set it to one of HIERARCHY[key] values. Defaults to HIERARCHY.secondary */
+    hierarchy?: TagHierarchy;
     /** Component or String value for label of tag. Default is empty string. */
     children?: React.ReactNode;
     /** The color theme to be applied to a Tag. Default is `KIND.primary`. */
@@ -79,7 +80,7 @@ export type SharedPropsArg = {
     $isFocused?: boolean;
     $isHovered?: boolean;
     $kind?: string;
-    $variant?: string;
+    $hierarchy?: string;
     $isFocusVisible?: boolean;
     $size?: string;
     $contentMaxWidth?: string | null;

package/tag/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TagVariant = exports.TagSize = exports.TagKind = void 0;
+exports.TagSize = exports.TagKind = exports.TagHierarchy = void 0;
 var _constants = require("./constants");
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -13,5 +13,5 @@ LICENSE file in the root directory of this source tree.
 */
 
 const TagKind = exports.TagKind = Object.freeze(_constants.KIND);
-const TagVariant = exports.TagVariant = Object.freeze(_constants.VARIANT);
+const TagHierarchy = exports.TagHierarchy = Object.freeze(_constants.HIERARCHY);
 const TagSize = exports.TagSize = Object.freeze(_constants.SIZE);

package/themes/dark-theme/color-component-tokens.d.ts

@@ -1,3 +1,3 @@
-import type { FoundationColorTokens, ComponentColorTokens } from '../types';
-declare const _default: (themePrimitives?: FoundationColorTokens) => ComponentColorTokens;
+import type { SemanticColors, ComponentColors } from '../types';
+declare const _default: (semanticColors?: SemanticColors) => ComponentColors;
 export default _default;