baseui 15.0.1 → 16.0.0

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

@@ -62,6 +62,7 @@ foundation = _colorFoundationTokens.default) => {
     contentNegative: _colorPrimitiveTokens.default.red600,
     contentWarning: _colorPrimitiveTokens.default.yellow600,
     contentPositive: _colorPrimitiveTokens.default.green600,
+    tagRedContentSecondary: _colorPrimitiveTokens.default.red700,
     // Border
     borderStateDisabled: _colorPrimitiveTokens.default.gray50,
     borderAccent: _colorPrimitiveTokens.default.blue600,
@@ -72,6 +73,7 @@ foundation = _colorFoundationTokens.default) => {
     borderWarningLight: _colorPrimitiveTokens.default.yellow200,
     borderPositive: _colorPrimitiveTokens.default.green600,
     borderPositiveLight: _colorPrimitiveTokens.default.green300,
+    tagRedBorderSecondarySelected: _colorPrimitiveTokens.default.red700,
     // Programs
     safety: _colorPrimitiveTokens.default.blue600,
     eatsGreen400: _colorPrimitiveTokens.default.green600,
@@ -92,9 +94,111 @@ 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
+  };
+  const hoveredAndPressedColors = {
+    hoverOverlayInverseAlpha: 'rgba(255, 255, 255, 0.1)',
+    hoverOverlayAlpha: 'rgba(0, 0, 0, 0.04)',
+    hoverNegativeAlpha: 'rgba(222, 17, 53, 0.1)',
+    pressedOverlayAlpha: 'rgba(0, 0, 0, 0.08)',
+    pressedOverlayInverseAlpha: 'rgba(255, 255, 255, 0.2)',
+    pressedNegativeAlpha: 'rgba(222, 17, 53, 0.15)'
+  };
   return {
     ...core,
     ...coreExtensions,
+    ...tagTokens,
+    ...hoveredAndPressedColors,
     ...deprecated
   };
 };

package/themes/shared/animation.js

@@ -12,8 +12,11 @@ LICENSE file in the root directory of this source tree.
 */
 
 const animation = {
+  timing0: '0',
   timing100: '100ms',
+  timing150: '150ms',
   timing200: '200ms',
+  timing250: '250ms',
   timing300: '300ms',
   timing400: '400ms',
   timing500: '500ms',
@@ -22,12 +25,34 @@ const animation = {
   timing800: '800ms',
   timing900: '900ms',
   timing1000: '1000ms',
-  easeInCurve: 'cubic-bezier(.8, .2, .6, 1)',
+  timing1500: '1500ms',
+  timing3000: '3000ms',
+  timing5000: '5000ms',
+  timing7000: '7000ms',
+  // Moves at constant speed. Commonly used for opacity and color changes.
+  easeLinear: 'cubic-bezier(0, 0, 1, 1)',
+  linearCurve: 'cubic-bezier(0, 0, 1, 1)',
+  // use easeLinear
+  // Motion starts at top speed and comes to a very gradual stop.
+  // Commonly used for entering elements.
+  easeDecelerate: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  easeOutQuinticCurve: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  // use easeDecelerate
   easeOutCurve: 'cubic-bezier(.2, .8, .4, 1)',
-  easeInOutCurve: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  easeInQuinticCurve: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
-  easeOutQuinticCurve: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  // Motion begins very gradually and ends at top speed.
+  // Commonly used for exiting elements.
+  easeAccelerate: 'cubic-bezier(0.64, 0, 0.78, 0)',
+  easeInQuinticCurve: 'cubic-bezier(0.64, 0, 0.78, 0)',
+  // use easeAccelerate
+  easeInCurve: 'cubic-bezier(.8, .2, .6, 1)',
+  // Motion begins and ends very gradually with high velocity movement
+  // in the middle.A good default for most motion.
+  easeAccelerateDecelerate: 'cubic-bezier(0.83, 0, 0.17, 1)',
   easeInOutQuinticCurve: 'cubic-bezier(0.86, 0, 0.07, 1)',
-  linearCurve: 'cubic-bezier(0, 0, 1, 1)'
+  // use easeAccelerateDecelerate
+  easeInOutCurve: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  // Motion begins naturally and speeds up slightly. Good for feeling
+  // of responsiveness when paired with short durations.
+  easeResponsiveAccelerate: 'cubic-bezier(0.11, 0, 0.5, 0)'
 };
 var _default = exports.default = animation;

package/themes/types.d.ts

@@ -155,6 +155,7 @@ export type CoreExtensionSemanticColors = {
     contentNegative: string;
     contentWarning: string;
     contentPositive: string;
+    tagRedContentSecondary: string;
     borderStateDisabled: string;
     borderAccent: string;
     borderAccentLight: string;
@@ -164,6 +165,7 @@ export type CoreExtensionSemanticColors = {
     borderNegativeLight: string;
     borderWarningLight: string;
     borderPositiveLight: string;
+    tagRedBorderSecondarySelected: string;
     safety: string;
     eatsGreen400: string;
     freightBlue400: string;
@@ -189,7 +191,15 @@ export type DeprecatedSemanticColors = {
     /** @deprecated this color token is deprecated */
     backgroundLightNegative: string;
 };
-export type SemanticColors = {} & CoreSemanticColors & CoreExtensionSemanticColors & DeprecatedSemanticColors;
+export type HoveredAndPressedSemanticColors = {
+    hoverOverlayInverseAlpha: string;
+    pressedOverlayInverseAlpha: string;
+    hoverOverlayAlpha: string;
+    pressedOverlayAlpha: string;
+    hoverNegativeAlpha: string;
+    pressedNegativeAlpha: string;
+};
+export type SemanticColors = {} & CoreSemanticColors & CoreExtensionSemanticColors & DeprecatedSemanticColors & HoveredAndPressedSemanticColors;
 export type ComponentColors = {
     bannerActionLowInfo: string;
     bannerActionLowNegative: string;
@@ -205,34 +215,87 @@ export type ComponentColors = {
     buttonPrimaryText: string;
     buttonPrimaryHover: string;
     buttonPrimaryActive: string;
+    buttonPrimaryHoverOverlay: string;
+    buttonPrimaryActiveOverlay: string;
     buttonPrimarySelectedText: string;
     buttonPrimarySelectedFill: string;
+    buttonPrimaryLoadingFill: string;
     buttonPrimarySpinnerForeground: string;
     buttonPrimarySpinnerBackground: string;
     buttonSecondaryFill: string;
     buttonSecondaryText: string;
     buttonSecondaryHover: string;
     buttonSecondaryActive: string;
+    buttonSecondaryHoverOverlay: string;
+    buttonSecondaryActiveOverlay: string;
     buttonSecondarySelectedText: string;
     buttonSecondarySelectedFill: string;
+    buttonSecondaryLoadingFill: string;
     buttonSecondarySpinnerForeground: string;
     buttonSecondarySpinnerBackground: string;
     buttonTertiaryFill: string;
     buttonTertiaryText: string;
     buttonTertiaryHover: string;
     buttonTertiaryActive: string;
+    buttonTertiaryHoverOverlay: string;
+    buttonTertiaryActiveOverlay: string;
     buttonTertiarySelectedText: string;
     buttonTertiarySelectedFill: string;
+    buttonTertiaryLoadingFill: string;
+    buttonTertiaryFocusFill: string;
     buttonTertiaryDisabledActiveFill: string;
     buttonTertiaryDisabledActiveText: string;
     buttonTertiarySpinnerForeground: string;
     buttonTertiarySpinnerBackground: string;
+    buttonDangerPrimaryFill: string;
+    buttonDangerPrimaryText: string;
+    buttonDangerPrimaryHoverOverlay: string;
+    buttonDangerPrimaryActiveOverlay: string;
+    buttonDangerPrimarySelectedText: string;
+    buttonDangerPrimarySelectedFill: string;
+    buttonDangerPrimaryLoadingFill: string;
+    buttonDangerPrimarySpinnerForeground: string;
+    buttonDangerPrimarySpinnerBackground: string;
+    buttonDangerSecondaryFill: string;
+    buttonDangerSecondaryText: string;
+    buttonDangerSecondaryHoverOverlay: string;
+    buttonDangerSecondaryActiveOverlay: string;
+    buttonDangerSecondarySelectedText: string;
+    buttonDangerSecondarySelectedFill: string;
+    buttonDangerSecondaryLoadingFill: string;
+    buttonDangerSecondarySpinnerForeground: string;
+    buttonDangerSecondarySpinnerBackground: string;
+    buttonDangerTertiaryFill: string;
+    buttonDangerTertiaryText: string;
+    buttonDangerTertiaryHoverOverlay: string;
+    buttonDangerTertiaryActiveOverlay: string;
+    buttonDangerTertiarySelectedText: string;
+    buttonDangerTertiarySelectedFill: string;
+    buttonDangerTertiaryLoadingFill: string;
+    buttonDangerTertiarySpinnerForeground: string;
+    buttonDangerTertiarySpinnerBackground: string;
+    buttonOutlineFill: string;
+    buttonOutlineText: string;
+    buttonOutlineHoverOverlay: string;
+    buttonOutlineActiveOverlay: string;
+    buttonOutlineSelectedFill: string;
+    buttonOutlineSelectedText: string;
+    buttonOutlineFocusFill: string;
+    buttonOutlineLoadingFill: string;
+    buttonOutlineSpinnerForeground: string;
+    buttonOutlineSpinnerBackground: string;
     buttonDisabledFill: string;
     buttonDisabledText: string;
     buttonDisabledActiveFill: string;
     buttonDisabledActiveText: string;
     buttonDisabledSpinnerForeground: string;
     buttonDisabledSpinnerBackground: string;
+    buttonOuterBorder: string;
+    buttonOutlineOuterBorder: string;
+    buttonDangerTertiaryOuterBorder: string;
+    buttonTransparentBorder: string;
+    buttonInnerBorder: string;
+    buttonFocusOuterBorder: string;
     breadcrumbsText: string;
     breadcrumbsSeparatorFill: string;
     calendarBackground: string;
@@ -629,8 +692,11 @@ export type Lighting = {
     deepBelow: string;
 };
 export type Animation = {
+    timing0: string;
     timing100: string;
+    timing150: string;
     timing200: string;
+    timing250: string;
     timing300: string;
     timing400: string;
     timing500: string;
@@ -639,6 +705,10 @@ export type Animation = {
     timing800: string;
     timing900: string;
     timing1000: string;
+    timing1500: string;
+    timing3000: string;
+    timing5000: string;
+    timing7000: string;
     easeOutCurve: string;
     easeInCurve: string;
     easeInOutCurve: string;
@@ -646,6 +716,11 @@ export type Animation = {
     easeOutQuinticCurve: string;
     easeInOutQuinticCurve: string;
     linearCurve: string;
+    easeLinear: string;
+    easeDecelerate: string;
+    easeAccelerate: string;
+    easeAccelerateDecelerate: string;
+    easeResponsiveAccelerate: string;
 };
 export type Border = {
     borderColor: Properties['borderColor'];