baseui 15.0.2 → 16.0.0

package/tag/types.d.ts

@@ -2,6 +2,16 @@ import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 export declare const TagKind: Readonly<{
     readonly custom: "custom";
+    readonly gray: "gray";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly yellow: "yellow";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly purple: "purple";
+    readonly magenta: "magenta";
+    readonly teal: "teal";
+    readonly lime: "lime";
     readonly neutral: "neutral";
     readonly primary: "primary";
     readonly accent: "accent";
@@ -9,21 +19,14 @@ export declare const TagKind: Readonly<{
     readonly warning: "warning";
     readonly negative: "negative";
     readonly black: "black";
-    readonly blue: "blue";
-    readonly green: "green";
-    readonly red: "red";
-    readonly yellow: "yellow";
-    readonly orange: "orange";
-    readonly purple: "purple";
     readonly brown: "brown";
-    readonly teal: "teal";
-    readonly lime: "lime";
 }>;
 export declare const TagHierarchy: Readonly<Readonly<{
     readonly primary: "primary";
     readonly secondary: "secondary";
 }>>;
 export declare const TagSize: Readonly<{
+    readonly xSmall: "xSmall";
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
@@ -58,9 +61,9 @@ export type TagProps = {
     color?: string;
     /** Text to display in native OS tooltip on long hover. */
     title?: string;
-    /** onClick handler for the action button element. */
+    /** onClick handler for the action button(the "x" button) element. */
     onActionClick?: (e: Event, children?: React.ReactNode) => unknown;
-    /** keydown handler for the action button element. */
+    /** keydown handler for the action button(the "x" button) element. */
     onActionKeyDown?: (e: Event, children?: React.ReactNode) => unknown;
     /** onClick handler for the tag. Passing an onClick handler also makes the tag clickable. */
     onClick?: null | ((event: Event) => unknown);
@@ -68,7 +71,9 @@ export type TagProps = {
     onKeyDown?: null | ((event: Event) => unknown);
     /** Determines the size of the Tag. */
     size?: TagSize;
-    startEnhancer?: React.ComponentType<{}>;
+    startEnhancer?: React.ComponentType<{
+        size?: number | string;
+    }>;
     contentMaxWidth?: string | null;
 };
 export type SharedPropsArg = {

package/tag-group/index.d.ts

@@ -0,0 +1,5 @@
+import { SIZE, HIERARCHY } from '../tag';
+export { SIZE, HIERARCHY };
+export * from './types';
+export { default as TagGroup } from './tag-group';
+export { StyledRoot } from './styled-components';

package/tag-group/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  SIZE: true,
+  HIERARCHY: true,
+  TagGroup: true,
+  StyledRoot: true
+};
+Object.defineProperty(exports, "HIERARCHY", {
+  enumerable: true,
+  get: function () {
+    return _tag.HIERARCHY;
+  }
+});
+Object.defineProperty(exports, "SIZE", {
+  enumerable: true,
+  get: function () {
+    return _tag.SIZE;
+  }
+});
+Object.defineProperty(exports, "StyledRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledRoot;
+  }
+});
+Object.defineProperty(exports, "TagGroup", {
+  enumerable: true,
+  get: function () {
+    return _tagGroup.default;
+  }
+});
+var _tag = require("../tag");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _tagGroup = _interopRequireDefault(require("./tag-group"));
+var _styledComponents = require("./styled-components");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/tag-group/styled-components.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $wrap?: boolean;
+}>;

package/tag-group/styled-components.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRoot = void 0;
+var _styles = require("../styles");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
+  $wrap,
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    columnGap: $theme.sizing.scale300,
+    rowGap: $theme.sizing.scale300,
+    ...getWrapStyles({
+      $wrap,
+      $theme
+    })
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+const getWrapStyles = ({
+  $wrap,
+  $theme
+}) => {
+  if (typeof $wrap === 'boolean') {
+    return $wrap ? {
+      padding: 0,
+      flexWrap: 'wrap'
+    } : {
+      overflowX: 'auto',
+      scrollbarWidth: 'none',
+      padding: `0 ${$theme.sizing.scale600}`
+    };
+  }
+  return {};
+};

package/tag-group/tag-group.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { TagGroupProps } from './types';
+declare const TagGroup: React.ForwardRefExoticComponent<TagGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default TagGroup;

package/tag-group/tag-group.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _tag = require("../tag");
+var _overrides = require("../helpers/overrides");
+var _styledComponents = require("./styled-components");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+const TagGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    wrap = true,
+    hierarchy = _tag.KIND.primary,
+    size = _tag.SIZE.small,
+    overrides = {}
+  } = props;
+  const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
+  const styleProps = {
+    $wrap: wrap
+  };
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    ref: ref
+  }, styleProps, rootProps), React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      hierarchy,
+      size,
+      // All tags in tag group are display only
+      onActionClick: undefined,
+      onActionKeyDown: undefined,
+      onClick: undefined,
+      onKeyDown: undefined,
+      closeable: false,
+      overrides: {
+        Root: {
+          style: {
+            // Single Tag has default margin, reset it to 0 in TagGroup
+            margin: 0,
+            ...(wrap ? {
+              maxWidth: '100%'
+            } : {}),
+            // ensure wrapping works correctly even if Tag itself has a custom maxWidth(Tag has a default maxWidth 128px on Text inside)
+            ...child.props.overrides?.Root?.style
+          },
+          ...child.props.overrides?.Root
+        },
+        ...child.props.overrides
+      }
+    });
+  }));
+});
+TagGroup.displayName = 'TagGroup';
+var _default = exports.default = TagGroup;

package/tag-group/types.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { HIERARCHY, SIZE } from '../tag';
+export type TagGroupProps = {
+    /** Set of more than one `Button` components */
+    children: Array<React.ReactNode>;
+    overrides?: TagGroupOverrides;
+    /** Determines whether tags should wrap to the next line when they exceed the container width. Defaults to true */
+    wrap?: boolean;
+    /** Defines tags look in the tag group. Set it to one of HIERARCHY[key] values. Defaults to HIERARCHY.primary */
+    hierarchy?: (typeof HIERARCHY)[keyof typeof HIERARCHY];
+    /** Determines the size of the Tag in the tag group. Defaults to small */
+    size?: (typeof SIZE)[keyof typeof SIZE];
+};
+type TagGroupOverrides = {
+    Root?: Override;
+};
+export {};

package/tag-group/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -36,34 +36,87 @@ var _default = (semanticColors = defaultSemanticColors) => ({
   buttonPrimaryText: semanticColors.contentInversePrimary,
   buttonPrimaryHover: _tokens.primitiveDarkColors.gray700Dark,
   buttonPrimaryActive: _tokens.primitiveDarkColors.gray600Dark,
+  buttonPrimaryHoverOverlay: semanticColors.hoverOverlayInverseAlpha,
+  buttonPrimaryActiveOverlay: semanticColors.pressedOverlayInverseAlpha,
   buttonPrimarySelectedFill: semanticColors.backgroundInversePrimary,
   buttonPrimarySelectedText: semanticColors.contentInversePrimary,
+  buttonPrimaryLoadingFill: semanticColors.backgroundInversePrimary,
   buttonPrimarySpinnerForeground: semanticColors.backgroundAccent,
   buttonPrimarySpinnerBackground: semanticColors.backgroundPrimary,
-  buttonSecondaryFill: semanticColors.backgroundTertiary,
+  buttonSecondaryFill: semanticColors.backgroundSecondary,
   buttonSecondaryText: semanticColors.contentPrimary,
   buttonSecondaryHover: _tokens.primitiveDarkColors.gray300Dark,
   buttonSecondaryActive: _tokens.primitiveDarkColors.gray400Dark,
+  buttonSecondaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonSecondaryActiveOverlay: semanticColors.pressedOverlayAlpha,
   buttonSecondarySelectedFill: semanticColors.backgroundInversePrimary,
   buttonSecondarySelectedText: semanticColors.contentInversePrimary,
+  buttonSecondaryLoadingFill: semanticColors.backgroundSecondary,
   buttonSecondarySpinnerForeground: semanticColors.backgroundAccent,
   buttonSecondarySpinnerBackground: semanticColors.backgroundPrimary,
   buttonTertiaryFill: 'transparent',
   buttonTertiaryText: semanticColors.contentPrimary,
   buttonTertiaryHover: _tokens.primitiveDarkColors.gray100Dark,
   buttonTertiaryActive: _tokens.primitiveDarkColors.gray200Dark,
-  buttonTertiarySelectedFill: semanticColors.backgroundInversePrimary,
-  buttonTertiarySelectedText: semanticColors.contentInversePrimary,
+  buttonTertiaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonTertiaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonTertiarySelectedFill: 'transparent',
+  buttonTertiarySelectedText: semanticColors.contentPrimary,
+  buttonTertiaryLoadingFill: 'transparent',
+  buttonTertiaryFocusFill: semanticColors.backgroundTertiary,
   buttonTertiaryDisabledActiveFill: semanticColors.backgroundStateDisabled,
   buttonTertiaryDisabledActiveText: semanticColors.contentStateDisabled,
   buttonTertiarySpinnerForeground: semanticColors.backgroundAccent,
   buttonTertiarySpinnerBackground: semanticColors.backgroundTertiary,
+  buttonDangerPrimaryFill: semanticColors.backgroundNegative,
+  buttonDangerPrimaryText: semanticColors.contentOnColor,
+  buttonDangerPrimaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerPrimaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerPrimarySelectedFill: semanticColors.backgroundNegative,
+  buttonDangerPrimarySelectedText: semanticColors.contentOnColor,
+  buttonDangerPrimaryLoadingFill: semanticColors.backgroundNegative,
+  buttonDangerPrimarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerPrimarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonDangerSecondaryFill: semanticColors.backgroundSecondary,
+  buttonDangerSecondaryText: semanticColors.contentNegative,
+  buttonDangerSecondaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerSecondaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerSecondarySelectedFill: semanticColors.backgroundNegative,
+  buttonDangerSecondarySelectedText: semanticColors.contentOnColor,
+  buttonDangerSecondaryLoadingFill: semanticColors.backgroundSecondary,
+  buttonDangerSecondarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerSecondarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonDangerTertiaryFill: 'transparent',
+  buttonDangerTertiaryText: semanticColors.contentNegative,
+  buttonDangerTertiaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerTertiaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerTertiarySelectedFill: semanticColors.backgroundPrimary,
+  buttonDangerTertiarySelectedText: semanticColors.contentNegative,
+  buttonDangerTertiaryLoadingFill: 'transparent',
+  buttonDangerTertiarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerTertiarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonOutlineFill: 'transparent',
+  buttonOutlineText: semanticColors.contentPrimary,
+  buttonOutlineHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonOutlineActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonOutlineSelectedFill: 'transparent',
+  buttonOutlineSelectedText: semanticColors.contentPrimary,
+  buttonOutlineFocusFill: semanticColors.backgroundTertiary,
+  buttonOutlineLoadingFill: 'transparent',
+  buttonOutlineSpinnerForeground: semanticColors.backgroundAccent,
+  buttonOutlineSpinnerBackground: semanticColors.backgroundPrimary,
   buttonDisabledFill: semanticColors.backgroundStateDisabled,
   buttonDisabledText: semanticColors.contentStateDisabled,
   buttonDisabledActiveFill: semanticColors.backgroundStateDisabled,
   buttonDisabledActiveText: semanticColors.contentStateDisabled,
   buttonDisabledSpinnerForeground: semanticColors.contentStateDisabled,
   buttonDisabledSpinnerBackground: semanticColors.backgroundPrimary,
+  buttonOuterBorder: semanticColors.borderSelected,
+  buttonOutlineOuterBorder: semanticColors.borderOpaque,
+  buttonDangerTertiaryOuterBorder: semanticColors.tagRedBorderSecondarySelected,
+  buttonInnerBorder: semanticColors.contentInversePrimary,
+  buttonTransparentBorder: 'transparent',
+  buttonFocusOuterBorder: semanticColors.borderAccent,
   // Breadcrumbs
   breadcrumbsText: semanticColors.contentPrimary,
   breadcrumbsSeparatorFill: semanticColors.contentTertiary,

package/themes/dark-theme/color-semantic-tokens.js

@@ -60,6 +60,7 @@ var _default = (foundation = _colorFoundationTokens.default) => {
     contentNegative: _colorPrimitiveTokens.primitiveDarkColors.red600Dark,
     contentWarning: _colorPrimitiveTokens.primitiveDarkColors.yellow600Dark,
     contentPositive: _colorPrimitiveTokens.primitiveDarkColors.green600Dark,
+    tagRedContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.red700Dark,
     // Border
     borderStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
     borderAccent: _colorPrimitiveTokens.primitiveDarkColors.blue500Dark,
@@ -70,6 +71,7 @@ var _default = (foundation = _colorFoundationTokens.default) => {
     borderWarningLight: _colorPrimitiveTokens.primitiveDarkColors.yellow400Dark,
     borderPositive: _colorPrimitiveTokens.primitiveDarkColors.green500Dark,
     borderPositiveLight: _colorPrimitiveTokens.primitiveDarkColors.green400Dark,
+    tagRedBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.red800Dark,
     // Programs
     safety: _colorPrimitiveTokens.primitiveLightColors.blue600,
     eatsGreen400: _colorPrimitiveTokens.primitiveLightColors.green600,
@@ -89,9 +91,111 @@ var _default = (foundation = _colorFoundationTokens.default) => {
     backgroundLightWarning: coreExtensions.backgroundWarningLight,
     backgroundLightNegative: coreExtensions.backgroundNegativeLight
   };
+  const tagTokens = {
+    tagGrayBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.gray400Dark,
+    tagGrayBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    tagGrayContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.gray900Dark,
+    tagGrayContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray700Dark,
+    tagGrayBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    tagGrayContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray400Dark,
+    tagGrayBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.gray500Dark,
+    tagGrayBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.gray500Dark,
+    tagGrayBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.gray800Dark,
+    tagRedBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.red400Dark,
+    tagRedBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.red100Dark,
+    tagRedContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.red900Dark,
+    tagRedContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.red700Dark,
+    tagRedBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.red100Dark,
+    tagRedContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.red400Dark,
+    tagRedBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.red500Dark,
+    tagRedBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.red500Dark,
+    tagRedBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.red800Dark,
+    tagOrangeBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.orange400Dark,
+    tagOrangeBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.orange100Dark,
+    tagOrangeContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.orange900Dark,
+    tagOrangeContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.orange700Dark,
+    tagOrangeBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.orange100Dark,
+    tagOrangeContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.orange400Dark,
+    tagYellowBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.yellow700Dark,
+    tagOrangeBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.orange500Dark,
+    tagYellowBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.yellow100Dark,
+    tagOrangeBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.orange500Dark,
+    tagOrangeBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.orange800Dark,
+    tagYellowContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.yellow50Dark,
+    tagYellowContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.yellow900Dark,
+    tagYellowBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.yellow100Dark,
+    tagYellowContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.yellow400Dark,
+    tagYellowBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.yellow800Dark,
+    tagYellowBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.yellow500Dark,
+    tagYellowBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.yellow800Dark,
+    tagGreenBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.green400Dark,
+    tagGreenBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.green100Dark,
+    tagGreenContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.green900Dark,
+    tagGreenContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.green700Dark,
+    tagGreenBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.green100Dark,
+    tagGreenContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.green400Dark,
+    tagGreenBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.green500Dark,
+    tagBlueBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.blue400Dark,
+    tagBlueBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.blue100Dark,
+    tagGreenBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.green500Dark,
+    tagBlueContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.blue900Dark,
+    tagGreenBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.green800Dark,
+    tagBlueContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.blue700Dark,
+    tagBlueBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.blue100Dark,
+    tagBlueContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.blue400Dark,
+    tagBlueBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.blue500Dark,
+    tagPurpleBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.purple400Dark,
+    tagPurpleBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.purple100Dark,
+    tagBlueBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.blue500Dark,
+    tagBlueBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.blue800Dark,
+    tagPurpleContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.purple900Dark,
+    tagPurpleContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.purple700Dark,
+    tagPurpleBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.purple100Dark,
+    tagPurpleContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.purple400Dark,
+    tagPurpleBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.purple500Dark,
+    tagMagentaBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.magenta400Dark,
+    tagPurpleBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.purple500Dark,
+    tagMagentaBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.magenta100Dark,
+    tagPurpleBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.purple800Dark,
+    tagMagentaContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.magenta900Dark,
+    tagMagentaContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.magenta700Dark,
+    tagMagentaBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.magenta100Dark,
+    tagMagentaContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.magenta400Dark,
+    tagMagentaBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.magenta500Dark,
+    tagMagentaBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.magenta500Dark,
+    tagMagentaBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.magenta800Dark,
+    tagTealBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.teal400Dark,
+    tagTealBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.teal100Dark,
+    tagTealContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.teal900Dark,
+    tagTealContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.teal700Dark,
+    tagTealBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.teal100Dark,
+    tagTealContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.teal400Dark,
+    tagTealBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.teal500Dark,
+    tagTealBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.teal500Dark,
+    tagTealBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.teal800Dark,
+    tagLimeBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.lime400Dark,
+    tagLimeBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.lime100Dark,
+    tagLimeContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.lime900Dark,
+    tagLimeContentSecondary: _colorPrimitiveTokens.primitiveDarkColors.lime700Dark,
+    tagLimeBackgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.lime100Dark,
+    tagLimeContentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.lime400Dark,
+    tagLimeBorderPrimaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.lime500Dark,
+    tagLimeBorderSecondaryUnselected: _colorPrimitiveTokens.primitiveDarkColors.lime500Dark,
+    tagLimeBorderSecondarySelected: _colorPrimitiveTokens.primitiveDarkColors.lime800Dark
+  };
+  const hoveredAndPressedColors = {
+    hoverOverlayInverseAlpha: 'rgba(0, 0, 0, 0.04)',
+    hoverOverlayAlpha: 'rgba(255, 255, 255, 0.1)',
+    hoverNegativeAlpha: 'rgba(163, 44, 52, 0.4)',
+    pressedOverlayAlpha: 'rgba(255, 255, 255, 0.15)',
+    pressedOverlayInverseAlpha: 'rgba(0, 0, 0, 0.08)',
+    pressedNegativeAlpha: 'rgba(163, 44, 52, 0.6)'
+  };
   return {
     ...core,
     ...coreExtensions,
+    ...tagTokens,
+    ...hoveredAndPressedColors,
     ...deprecated
   };
 };

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

@@ -36,34 +36,87 @@ var _default = (semanticColors = defaultSemanticColors) => ({
   buttonPrimaryText: semanticColors.contentInversePrimary,
   buttonPrimaryHover: _tokens.primitiveLightColors.gray900,
   buttonPrimaryActive: _tokens.primitiveLightColors.gray800,
+  buttonPrimaryHoverOverlay: semanticColors.hoverOverlayInverseAlpha,
+  buttonPrimaryActiveOverlay: semanticColors.pressedOverlayInverseAlpha,
   buttonPrimarySelectedFill: semanticColors.backgroundInversePrimary,
   buttonPrimarySelectedText: semanticColors.contentInversePrimary,
+  buttonPrimaryLoadingFill: semanticColors.backgroundInversePrimary,
   buttonPrimarySpinnerForeground: semanticColors.backgroundAccent,
   buttonPrimarySpinnerBackground: semanticColors.backgroundPrimary,
   buttonSecondaryFill: semanticColors.backgroundSecondary,
   buttonSecondaryText: semanticColors.contentPrimary,
   buttonSecondaryHover: _tokens.primitiveLightColors.gray200,
   buttonSecondaryActive: _tokens.primitiveLightColors.gray300,
+  buttonSecondaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonSecondaryActiveOverlay: semanticColors.pressedOverlayAlpha,
   buttonSecondarySelectedFill: semanticColors.backgroundInversePrimary,
   buttonSecondarySelectedText: semanticColors.contentInversePrimary,
+  buttonSecondaryLoadingFill: semanticColors.backgroundSecondary,
   buttonSecondarySpinnerForeground: semanticColors.backgroundAccent,
   buttonSecondarySpinnerBackground: semanticColors.backgroundPrimary,
   buttonTertiaryFill: 'transparent',
   buttonTertiaryText: semanticColors.contentPrimary,
   buttonTertiaryHover: _tokens.primitiveLightColors.gray50,
   buttonTertiaryActive: _tokens.primitiveLightColors.gray100,
-  buttonTertiarySelectedFill: semanticColors.backgroundInversePrimary,
-  buttonTertiarySelectedText: semanticColors.contentInversePrimary,
+  buttonTertiaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonTertiaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonTertiarySelectedFill: 'transparent',
+  buttonTertiarySelectedText: semanticColors.contentPrimary,
+  buttonTertiaryLoadingFill: 'transparent',
+  buttonTertiaryFocusFill: semanticColors.backgroundTertiary,
   buttonTertiaryDisabledActiveFill: semanticColors.backgroundStateDisabled,
   buttonTertiaryDisabledActiveText: semanticColors.contentStateDisabled,
   buttonTertiarySpinnerForeground: semanticColors.backgroundAccent,
   buttonTertiarySpinnerBackground: semanticColors.backgroundTertiary,
+  buttonDangerPrimaryFill: semanticColors.backgroundNegative,
+  buttonDangerPrimaryText: semanticColors.contentOnColor,
+  buttonDangerPrimaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerPrimaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerPrimarySelectedFill: semanticColors.backgroundNegative,
+  buttonDangerPrimarySelectedText: semanticColors.contentOnColor,
+  buttonDangerPrimaryLoadingFill: semanticColors.backgroundNegative,
+  buttonDangerPrimarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerPrimarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonDangerSecondaryFill: semanticColors.backgroundSecondary,
+  buttonDangerSecondaryText: semanticColors.tagRedContentSecondary,
+  buttonDangerSecondaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerSecondaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerSecondarySelectedFill: semanticColors.backgroundNegative,
+  buttonDangerSecondarySelectedText: semanticColors.contentOnColor,
+  buttonDangerSecondaryLoadingFill: semanticColors.backgroundSecondary,
+  buttonDangerSecondarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerSecondarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonDangerTertiaryFill: 'transparent',
+  buttonDangerTertiaryText: semanticColors.tagRedContentSecondary,
+  buttonDangerTertiaryHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonDangerTertiaryActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonDangerTertiarySelectedFill: semanticColors.backgroundPrimary,
+  buttonDangerTertiarySelectedText: semanticColors.tagRedContentSecondary,
+  buttonDangerTertiaryLoadingFill: 'transparent',
+  buttonDangerTertiarySpinnerForeground: semanticColors.backgroundAccent,
+  buttonDangerTertiarySpinnerBackground: semanticColors.backgroundPrimary,
+  buttonOutlineFill: 'transparent',
+  buttonOutlineText: semanticColors.contentPrimary,
+  buttonOutlineHoverOverlay: semanticColors.hoverOverlayAlpha,
+  buttonOutlineActiveOverlay: semanticColors.pressedOverlayAlpha,
+  buttonOutlineSelectedFill: 'transparent',
+  buttonOutlineSelectedText: semanticColors.contentPrimary,
+  buttonOutlineFocusFill: semanticColors.backgroundTertiary,
+  buttonOutlineLoadingFill: 'transparent',
+  buttonOutlineSpinnerForeground: semanticColors.backgroundAccent,
+  buttonOutlineSpinnerBackground: semanticColors.backgroundPrimary,
   buttonDisabledFill: semanticColors.backgroundStateDisabled,
   buttonDisabledText: semanticColors.contentStateDisabled,
   buttonDisabledActiveFill: semanticColors.backgroundStateDisabled,
   buttonDisabledActiveText: semanticColors.contentStateDisabled,
   buttonDisabledSpinnerForeground: semanticColors.contentStateDisabled,
   buttonDisabledSpinnerBackground: semanticColors.backgroundPrimary,
+  buttonOuterBorder: semanticColors.borderSelected,
+  buttonOutlineOuterBorder: semanticColors.borderOpaque,
+  buttonDangerTertiaryOuterBorder: semanticColors.tagRedBorderSecondarySelected,
+  buttonInnerBorder: semanticColors.contentInversePrimary,
+  buttonTransparentBorder: 'transparent',
+  buttonFocusOuterBorder: semanticColors.borderAccent,
   // Breadcrumbs
   breadcrumbsText: semanticColors.contentPrimary,
   breadcrumbsSeparatorFill: semanticColors.contentTertiary,