baseui 0.0.0-next-e19fc5fd2 → 0.0.0-next-ff0c2b52d

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/themes/dark-theme/color-semantic-tokens.js

@@ -89,9 +89,102 @@ 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
+  };
   return {
     ...core,
     ...coreExtensions,
+    ...tagTokens,
     ...deprecated
   };
 };

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

@@ -92,9 +92,102 @@ foundation = _colorFoundationTokens.default) => {
     backgroundLightWarning: coreExtensions.backgroundWarningLight,
     backgroundLightNegative: coreExtensions.backgroundNegativeLight
   };
+  const tagTokens = {
+    tagGrayBackgroundPrimary: _colorPrimitiveTokens.default.gray600,
+    tagGrayBackgroundSecondary: _colorPrimitiveTokens.default.gray50,
+    tagGrayContentPrimary: _colorPrimitiveTokens.default.white,
+    tagGrayContentSecondary: _colorPrimitiveTokens.default.gray700,
+    tagGrayBackgroundStateDisabled: _colorPrimitiveTokens.default.gray50,
+    tagGrayContentStateDisabled: _colorPrimitiveTokens.default.gray300,
+    tagGrayBorderPrimaryUnselected: _colorPrimitiveTokens.default.gray700,
+    tagGrayBorderSecondaryUnselected: _colorPrimitiveTokens.default.gray100,
+    tagGrayBorderSecondarySelected: _colorPrimitiveTokens.default.gray600,
+    tagRedBackgroundPrimary: _colorPrimitiveTokens.default.red600,
+    tagRedBackgroundSecondary: _colorPrimitiveTokens.default.red50,
+    tagRedContentPrimary: _colorPrimitiveTokens.default.white,
+    tagRedContentSecondary: _colorPrimitiveTokens.default.red700,
+    tagRedBackgroundStateDisabled: _colorPrimitiveTokens.default.red50,
+    tagRedContentStateDisabled: _colorPrimitiveTokens.default.red300,
+    tagRedBorderPrimaryUnselected: _colorPrimitiveTokens.default.red700,
+    tagRedBorderSecondaryUnselected: _colorPrimitiveTokens.default.red100,
+    tagRedBorderSecondarySelected: _colorPrimitiveTokens.default.red700,
+    tagOrangeBackgroundPrimary: _colorPrimitiveTokens.default.orange600,
+    tagOrangeBackgroundSecondary: _colorPrimitiveTokens.default.orange50,
+    tagOrangeContentPrimary: _colorPrimitiveTokens.default.white,
+    tagOrangeContentSecondary: _colorPrimitiveTokens.default.orange700,
+    tagOrangeBackgroundStateDisabled: _colorPrimitiveTokens.default.orange50,
+    tagOrangeContentStateDisabled: _colorPrimitiveTokens.default.orange300,
+    tagYellowBackgroundPrimary: _colorPrimitiveTokens.default.yellow300,
+    tagOrangeBorderPrimaryUnselected: _colorPrimitiveTokens.default.orange700,
+    tagYellowBackgroundSecondary: _colorPrimitiveTokens.default.yellow50,
+    tagOrangeBorderSecondaryUnselected: _colorPrimitiveTokens.default.orange100,
+    tagOrangeBorderSecondarySelected: _colorPrimitiveTokens.default.orange700,
+    tagYellowContentPrimary: _colorPrimitiveTokens.default.black,
+    tagYellowContentSecondary: _colorPrimitiveTokens.default.yellow700,
+    tagYellowBackgroundStateDisabled: _colorPrimitiveTokens.default.yellow50,
+    tagYellowContentStateDisabled: _colorPrimitiveTokens.default.yellow200,
+    tagYellowBorderPrimaryUnselected: _colorPrimitiveTokens.default.yellow400,
+    tagYellowBorderSecondaryUnselected: _colorPrimitiveTokens.default.yellow100,
+    tagYellowBorderSecondarySelected: _colorPrimitiveTokens.default.yellow700,
+    tagGreenBackgroundPrimary: _colorPrimitiveTokens.default.green600,
+    tagGreenBackgroundSecondary: _colorPrimitiveTokens.default.green50,
+    tagGreenContentPrimary: _colorPrimitiveTokens.default.white,
+    tagGreenContentSecondary: _colorPrimitiveTokens.default.green700,
+    tagGreenBackgroundStateDisabled: _colorPrimitiveTokens.default.green50,
+    tagGreenContentStateDisabled: _colorPrimitiveTokens.default.green300,
+    tagGreenBorderPrimaryUnselected: _colorPrimitiveTokens.default.green700,
+    tagBlueBackgroundPrimary: _colorPrimitiveTokens.default.blue600,
+    tagBlueBackgroundSecondary: _colorPrimitiveTokens.default.blue50,
+    tagGreenBorderSecondaryUnselected: _colorPrimitiveTokens.default.green100,
+    tagBlueContentPrimary: _colorPrimitiveTokens.default.white,
+    tagGreenBorderSecondarySelected: _colorPrimitiveTokens.default.green700,
+    tagBlueContentSecondary: _colorPrimitiveTokens.default.blue700,
+    tagBlueBackgroundStateDisabled: _colorPrimitiveTokens.default.blue50,
+    tagBlueContentStateDisabled: _colorPrimitiveTokens.default.blue300,
+    tagBlueBorderPrimaryUnselected: _colorPrimitiveTokens.default.blue700,
+    tagPurpleBackgroundPrimary: _colorPrimitiveTokens.default.purple600,
+    tagPurpleBackgroundSecondary: _colorPrimitiveTokens.default.purple50,
+    tagBlueBorderSecondaryUnselected: _colorPrimitiveTokens.default.blue100,
+    tagBlueBorderSecondarySelected: _colorPrimitiveTokens.default.blue700,
+    tagPurpleContentPrimary: _colorPrimitiveTokens.default.white,
+    tagPurpleContentSecondary: _colorPrimitiveTokens.default.purple700,
+    tagPurpleBackgroundStateDisabled: _colorPrimitiveTokens.default.purple50,
+    tagPurpleContentStateDisabled: _colorPrimitiveTokens.default.purple300,
+    tagPurpleBorderPrimaryUnselected: _colorPrimitiveTokens.default.purple700,
+    tagMagentaBackgroundPrimary: _colorPrimitiveTokens.default.magenta600,
+    tagPurpleBorderSecondaryUnselected: _colorPrimitiveTokens.default.purple100,
+    tagMagentaBackgroundSecondary: _colorPrimitiveTokens.default.magenta50,
+    tagPurpleBorderSecondarySelected: _colorPrimitiveTokens.default.purple700,
+    tagMagentaContentPrimary: _colorPrimitiveTokens.default.white,
+    tagMagentaContentSecondary: _colorPrimitiveTokens.default.magenta700,
+    tagMagentaBackgroundStateDisabled: _colorPrimitiveTokens.default.magenta50,
+    tagMagentaContentStateDisabled: _colorPrimitiveTokens.default.magenta300,
+    tagMagentaBorderPrimaryUnselected: _colorPrimitiveTokens.default.magenta700,
+    tagMagentaBorderSecondaryUnselected: _colorPrimitiveTokens.default.magenta100,
+    tagMagentaBorderSecondarySelected: _colorPrimitiveTokens.default.magenta700,
+    tagTealBackgroundPrimary: _colorPrimitiveTokens.default.teal600,
+    tagTealBackgroundSecondary: _colorPrimitiveTokens.default.teal50,
+    tagTealContentPrimary: _colorPrimitiveTokens.default.white,
+    tagTealContentSecondary: _colorPrimitiveTokens.default.teal700,
+    tagTealBackgroundStateDisabled: _colorPrimitiveTokens.default.teal50,
+    tagTealContentStateDisabled: _colorPrimitiveTokens.default.teal300,
+    tagTealBorderPrimaryUnselected: _colorPrimitiveTokens.default.teal700,
+    tagTealBorderSecondaryUnselected: _colorPrimitiveTokens.default.teal100,
+    tagTealBorderSecondarySelected: _colorPrimitiveTokens.default.teal700,
+    tagLimeBackgroundPrimary: _colorPrimitiveTokens.default.lime600,
+    tagLimeBackgroundSecondary: _colorPrimitiveTokens.default.lime50,
+    tagLimeContentPrimary: _colorPrimitiveTokens.default.white,
+    tagLimeContentSecondary: _colorPrimitiveTokens.default.lime700,
+    tagLimeBackgroundStateDisabled: _colorPrimitiveTokens.default.lime50,
+    tagLimeContentStateDisabled: _colorPrimitiveTokens.default.lime300,
+    tagLimeBorderPrimaryUnselected: _colorPrimitiveTokens.default.lime700,
+    tagLimeBorderSecondaryUnselected: _colorPrimitiveTokens.default.lime100,
+    tagLimeBorderSecondarySelected: _colorPrimitiveTokens.default.lime700
+  };
   return {
     ...core,
     ...coreExtensions,
+    ...tagTokens,
     ...deprecated
   };
 };