baseui 12.2.0 → 13.0.0

package/tag/styled-components.js

@@ -32,30 +32,38 @@ function customOnRamp(color, unit) {
       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':
@@ -71,6 +79,7 @@ var COLOR_STATE = {
   solid: 'solid',
   outline: 'outline'
 }; // Probably best to bake this into the theme once we hit our next major.
+// @ts-ignore
 
 var pick = function pick(theme, light, dark) {
   return theme.name && theme.name.includes('dark') ? dark : light;
@@ -79,6 +88,7 @@ var pick = function pick(theme, light, dark) {
 var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagNeutralFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedDisabled
   };
@@ -86,11 +96,13 @@ var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColo
   return {
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_neutralColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagNeutralOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedBackground
   };
@@ -98,6 +110,7 @@ var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColo
 var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagPrimaryFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedDisabled
   };
@@ -105,11 +118,13 @@ var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColo
   return {
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_primaryColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagPrimaryOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedBackground
   };
@@ -117,6 +132,7 @@ var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColo
 var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagAccentFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedDisabled
   };
@@ -124,11 +140,13 @@ var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorSt
   return {
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_accentColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagAccentOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedBackground
   };
@@ -136,6 +154,7 @@ var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorSt
 var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagPositiveFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedDisabled
   };
@@ -143,11 +162,13 @@ var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveC
   return {
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_positiveColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagPositiveOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedBackground
   };
@@ -155,6 +176,7 @@ var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveC
 var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagWarningFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedDisabled
   };
@@ -162,11 +184,13 @@ var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColo
   return {
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_warningColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagWarningOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedBackground
   };
@@ -174,6 +198,7 @@ var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColo
 var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagNegativeFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedDisabled
   };
@@ -181,11 +206,13 @@ var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeC
   return {
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_negativeColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagNegativeOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedBackground
   };
@@ -193,6 +220,7 @@ var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeC
 var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.orange200, _tokens.colors.orange600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.orange200, _tokens.colors.orange700)
   };
@@ -200,11 +228,13 @@ var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorSt
   return {
     color: _tokens.colors.white,
     backgroundColor: pick(theme, _tokens.colors.orange400, _tokens.colors.orange500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_orangeColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.orange400, _tokens.colors.orange300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.orange200, _tokens.colors.orange500)
   };
@@ -212,6 +242,7 @@ var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorSt
 var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.purple200, _tokens.colors.purple600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.purple200, _tokens.colors.purple700)
   };
@@ -219,11 +250,13 @@ var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorSt
   return {
     color: _tokens.colors.white,
     backgroundColor: pick(theme, _tokens.colors.purple400, _tokens.colors.purple500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_purpleColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.purple400, _tokens.colors.purple300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.purple200, _tokens.colors.purple500)
   };
@@ -231,6 +264,7 @@ var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorSt
 var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.brown200, _tokens.colors.brown600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.brown200, _tokens.colors.brown700)
   };
@@ -238,11 +272,13 @@ var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorState
   return {
     color: _tokens.colors.white,
     backgroundColor: pick(theme, _tokens.colors.brown400, _tokens.colors.brown500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_brownColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, _tokens.colors.brown400, _tokens.colors.brown300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, _tokens.colors.brown200, _tokens.colors.brown500)
   };
@@ -250,6 +286,7 @@ var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorState
 var customColorStates = (_customColorStates = {}, _defineProperty(_customColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   };
@@ -257,16 +294,18 @@ var customColorStates = (_customColorStates = {}, _defineProperty(_customColorSt
   return {
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
     backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_customColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
   };
 }), _customColorStates);
-var colorMap = (_colorMap = {}, _defineProperty(_colorMap, _constants.KIND.neutral, neutralColorStates), _defineProperty(_colorMap, _constants.KIND.primary, primaryColorStates), _defineProperty(_colorMap, _constants.KIND.accent, accentColorStates), _defineProperty(_colorMap, _constants.KIND.positive, positiveColorStates), _defineProperty(_colorMap, _constants.KIND.warning, warningColorStates), _defineProperty(_colorMap, _constants.KIND.negative, negativeColorStates), _defineProperty(_colorMap, _constants.KIND.black, primaryColorStates), _defineProperty(_colorMap, _constants.KIND.blue, accentColorStates), _defineProperty(_colorMap, _constants.KIND.green, positiveColorStates), _defineProperty(_colorMap, _constants.KIND.red, negativeColorStates), _defineProperty(_colorMap, _constants.KIND.yellow, warningColorStates), _defineProperty(_colorMap, _constants.KIND.orange, orangeColorStates), _defineProperty(_colorMap, _constants.KIND.purple, purpleColorStates), _defineProperty(_colorMap, _constants.KIND.brown, brownColorStates), _defineProperty(_colorMap, _constants.KIND.custom, customColorStates), _colorMap);
+var colorMap = (_colorMap = {}, _defineProperty(_colorMap, _constants.KIND.neutral, neutralColorStates), _defineProperty(_colorMap, _constants.KIND.primary, primaryColorStates), _defineProperty(_colorMap, _constants.KIND.accent, accentColorStates), _defineProperty(_colorMap, _constants.KIND.positive, positiveColorStates), _defineProperty(_colorMap, _constants.KIND.warning, warningColorStates), _defineProperty(_colorMap, _constants.KIND.negative, negativeColorStates), _defineProperty(_colorMap, _constants.KIND.black, primaryColorStates), _defineProperty(_colorMap, _constants.KIND.blue, accentColorStates), _defineProperty(_colorMap, _constants.KIND.green, positiveColorStates), _defineProperty(_colorMap, _constants.KIND.red, negativeColorStates), _defineProperty(_colorMap, _constants.KIND.yellow, warningColorStates), _defineProperty(_colorMap, _constants.KIND.orange, orangeColorStates), _defineProperty(_colorMap, _constants.KIND.purple, purpleColorStates), _defineProperty(_colorMap, _constants.KIND.brown, brownColorStates), _defineProperty(_colorMap, _constants.KIND.custom, customColorStates), _colorMap); // @ts-ignore
 
 var getColorStateFromProps = function getColorStateFromProps(props) {
   if (props.$disabled) return COLOR_STATE.disabled;
@@ -341,7 +380,7 @@ var Root = (0, _styles.styled)('span', function (props) {
       $size = _props$$size2 === void 0 ? _constants.SIZE.small : _props$$size2;
   var borderRadius = $theme.borders.tagBorderRadius;
   var paddingMagnitude = (_SIZE$small$SIZE$medi2 = {}, _defineProperty(_SIZE$small$SIZE$medi2, _constants.SIZE.small, $theme.sizing.scale300), _defineProperty(_SIZE$small$SIZE$medi2, _constants.SIZE.medium, $theme.sizing.scale500), _defineProperty(_SIZE$small$SIZE$medi2, _constants.SIZE.large, $theme.sizing.scale600), _SIZE$small$SIZE$medi2)[$size];
-  var borderWidth = !$disabled && $variant === _constants.VARIANT.solid ? 0 : '2px';
+  var borderWidth = !$disabled && $variant === _constants.VARIANT.solid ? 0 : '2px'; // @ts-ignore
 
   var _colorMap$$kind$getCo = colorMap[$kind][getColorStateFromProps(props)]($theme, $color),
       color = _colorMap$$kind$getCo.color,

package/tag/tag.js

@@ -45,6 +45,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
 // Delete requires modifying Delete's viewbox to prevent visual regressions.
+// @ts-ignore
 var ModifiedViewBoxDeleteIcon = function ModifiedViewBoxDeleteIcon(props) {
   return /*#__PURE__*/React.createElement(_delete.default, _extends({
     viewBox: "5 5 13.186 13.186"
@@ -153,6 +154,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: handleKeyDown
   };
   var actionHandlers = disabled ? {} : {
+    // @ts-ignore
     onClick: function onClick(event) {
       // we don't want onClick to be called when the close icon is clicked
       event.stopPropagation();

package/tag/types.d.ts

@@ -27,17 +27,17 @@ export declare const TagSize: Readonly<{
     readonly medium: "medium";
     readonly large: "large";
 }>;
-export declare type TagKind = keyof typeof TagKind;
-export declare type TagVariant = typeof TagVariant[keyof typeof TagVariant];
-export declare type TagSize = keyof typeof TagSize;
-export declare type TagOverrides = {
+export type TagKind = keyof typeof TagKind;
+export type TagVariant = (typeof TagVariant)[keyof typeof TagVariant];
+export type TagSize = keyof typeof TagSize;
+export type TagOverrides = {
     Root?: Override;
     Action?: Override;
     ActionIcon?: Override;
     StartEnhancerContainer?: Override;
     Text?: Override;
 };
-export declare type TagProps = {
+export type TagProps = {
     overrides?: TagOverrides;
     /** Include or exclude the "x" button and click action. */
     closeable?: boolean;
@@ -69,7 +69,7 @@ export declare type TagProps = {
     size?: TagSize;
     startEnhancer?: React.ComponentType<{}>;
 };
-export declare type SharedPropsArg = {
+export type SharedPropsArg = {
     $clickable?: boolean;
     $closeable?: boolean;
     $color?: string;

package/textarea/stateful-textarea.js

@@ -26,7 +26,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 function StatefulTextarea(props) {
-  return /*#__PURE__*/React.createElement(_statefulContainer.default, props, function (childrenProps) {
-    return /*#__PURE__*/React.createElement(_textarea.default, childrenProps);
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(_statefulContainer.default, props, function (childrenProps) {
+      return /*#__PURE__*/React.createElement(_textarea.default, childrenProps);
+    })
+  );
 }

package/textarea/textarea.js

@@ -78,7 +78,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
       _this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onFocus(e);
     });
@@ -86,7 +87,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
       _this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onBlur(e);
     });

package/textarea/types.d.ts

@@ -2,9 +2,9 @@ import type * as React from 'react';
 import type { Properties } from 'csstype';
 import type { Override } from '../helpers/overrides';
 import type { BaseInputProps, StateReducer, State, ADJOINED, SIZE } from '../input';
-declare type SyntheticTextareaEvent = React.SyntheticEvent<HTMLTextAreaElement>;
-export declare type Size = keyof typeof SIZE;
-export declare type SharedStyleProps = {
+type SyntheticTextareaEvent = React.SyntheticEvent<HTMLTextAreaElement>;
+export type Size = keyof typeof SIZE;
+export type SharedStyleProps = {
     $adjoined: keyof typeof ADJOINED;
     $disabled?: boolean;
     $error?: boolean;
@@ -15,11 +15,11 @@ export declare type SharedStyleProps = {
     $resize?: Properties['resize'];
     $size: Size;
 };
-declare type BaseTextAreaProps = BaseInputProps<HTMLTextAreaElement>;
-export declare type TextareaOverrides = {
+type BaseTextAreaProps = BaseInputProps<HTMLTextAreaElement>;
+export type TextareaOverrides = {
     Root?: Override;
 } & BaseTextAreaProps['overrides'];
-export declare type TextareaProps = {
+export type TextareaProps = {
     overrides?: TextareaOverrides;
     resize?: Properties['resize'];
     /** Sets the size and number of visible text lines
@@ -27,7 +27,7 @@ export declare type TextareaProps = {
     rows?: number;
     maxLength?: number;
 } & BaseTextAreaProps;
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: (props: any) => React.ReactNode;
     initialState?: State;
     stateReducer?: StateReducer;
@@ -36,9 +36,9 @@ export declare type StatefulContainerProps = {
     onKeyPress?: (e: SyntheticTextareaEvent) => unknown;
     onKeyUp?: (e: SyntheticTextareaEvent) => unknown;
 };
-declare type OmitProps = {
+type OmitProps = {
     children: (props: any) => React.ReactNode;
 };
-declare type FullStProps = TextareaProps & StatefulContainerProps;
-export declare type StatefulTextareaProps = Partial<Omit<FullStProps, keyof OmitProps>>;
+type FullStProps = TextareaProps & StatefulContainerProps;
+export type StatefulTextareaProps = Partial<Omit<FullStProps, keyof OmitProps>>;
 export {};

package/theme.js.flow

@@ -0,0 +1,44 @@
+/*
+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.
+*/
+// @flow
+
+import type {
+  BreakpointsT,
+  MediaQueryT,
+  GridT,
+  FontT,
+  TypographyT,
+  SizingT,
+  LightingT,
+  AnimationT,
+  BorderT,
+  BordersT,
+  ZIndexT,
+} from './themes';
+import type { ResponsiveT, CSSLengthUnitT } from './layout-grid';
+import type { ThemeT } from './styles';
+
+export type {
+  BreakpointsT,
+  MediaQueryT,
+  GridT,
+  FontT,
+  TypographyT,
+  SizingT,
+  LightingT,
+  AnimationT,
+  BorderT,
+  BordersT,
+  ZIndexT,
+  ResponsiveT,
+  CSSLengthUnitT,
+  ThemeT,
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

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

@@ -73,7 +73,7 @@ var _default = function _default() {
     calendarBackground: themePrimitives.mono800,
     calendarForeground: themePrimitives.white,
     calendarForegroundDisabled: themePrimitives.mono300,
-    calendarHeaderBackground: themePrimitives.primary700,
+    calendarHeaderBackground: themePrimitives.mono800,
     calendarHeaderForeground: themePrimitives.primary,
     calendarHeaderBackgroundActive: themePrimitives.primary600,
     calendarHeaderForegroundDisabled: themePrimitives.primary500,

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

@@ -70,7 +70,7 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
   calendarBackground: themePrimitives.mono800,
   calendarForeground: themePrimitives.white,
   calendarForegroundDisabled: themePrimitives.mono300,
-  calendarHeaderBackground: themePrimitives.primary700,
+  calendarHeaderBackground: themePrimitives.mono800,
   calendarHeaderForeground: themePrimitives.primary,
   calendarHeaderBackgroundActive: themePrimitives.primary600,
   calendarHeaderForegroundDisabled: themePrimitives.primary500,

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

@@ -37,26 +37,31 @@ var _default = function _default() {
     contentInverseTertiary: _colors.default.gray600,
     // Border
     borderOpaque: _colors.default.gray700,
+    // @ts-ignore
     borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08'),
     borderSelected: foundation.primaryA,
     borderInverseOpaque: _colors.default.gray400,
+    // @ts-ignore
     borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2'),
     borderInverseSelected: foundation.primaryB
   };
   var coreExtensions = {
     // Backgrounds
     backgroundStateDisabled: _colors.default.gray800,
+    // @ts-ignore
     backgroundOverlayDark: (0, _util.hexToRgb)(_colors.default.black, '0.3'),
+    // @ts-ignore
     backgroundOverlayLight: (0, _util.hexToRgb)(_colors.default.black, '0.08'),
+    // @ts-ignore
     backgroundOverlayArt: (0, _util.hexToRgb)(_colors.default.black, '0.16'),
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: _colors.default.green500,
-    backgroundLightAccent: _colors.default.blue700,
-    backgroundLightPositive: _colors.default.green700,
-    backgroundLightNegative: _colors.default.red700,
-    backgroundLightWarning: _colors.default.yellow700,
+    backgroundAccentLight: _colors.default.blue700,
+    backgroundPositiveLight: _colors.default.green700,
+    backgroundNegativeLight: _colors.default.red700,
+    backgroundWarningLight: _colors.default.yellow700,
     backgroundAlwaysDark: _colors.default.gray900,
     backgroundAlwaysLight: _colors.default.gray100,
     // Content
@@ -74,6 +79,9 @@ var _default = function _default() {
     borderNegative: _colors.default.red500,
     borderWarning: _colors.default.yellow500,
     borderPositive: _colors.default.green500,
+    borderNegativeLight: _colors.default.red200,
+    borderWarningLight: _colors.default.yellow200,
+    borderPositiveLight: _colors.default.green200,
     // Programs
     safety: _colors.default.blue400,
     eatsGreen400: _colors.default.green400,

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

@@ -54,10 +54,10 @@ export default (
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: colors.green500,
-    backgroundLightAccent: colors.blue700,
-    backgroundLightPositive: colors.green700,
-    backgroundLightNegative: colors.red700,
-    backgroundLightWarning: colors.yellow700,
+    backgroundAccentLight: colors.blue700,
+    backgroundPositiveLight: colors.green700,
+    backgroundNegativeLight: colors.red700,
+    backgroundWarningLight: colors.yellow700,
     backgroundAlwaysDark: colors.gray900,
     backgroundAlwaysLight: colors.gray100,
 
@@ -77,6 +77,9 @@ export default (
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
     borderPositive: colors.green500,
+    borderNegativeLight: colors.red200,
+    borderWarningLight: colors.yellow200,
+    borderPositiveLight: colors.green200,
 
     // Programs
     safety: colors.blue400,

package/themes/index.d.ts

@@ -11,6 +11,6 @@ import type { Colors as StyleColors } from '../styles';
 export { createDarkTheme, createLightTheme, createLightTheme as createTheme, LightTheme, LightThemeMove, lightThemePrimitives, DarkTheme, DarkThemeMove, darkThemePrimitives, DarkTheme as darkThemeOverrides, };
 export * from './types';
 /** @deprecated use ColorTokens instead. To be removed in future versions.*/
-export declare type Colors = StyleColors;
+export type Colors = StyleColors;
 /** @deprecated use Primitives instead. To be removed in future versions.*/
-export declare type ThemePrimitives = Primitives;
+export type ThemePrimitives = Primitives;

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

@@ -37,26 +37,31 @@ var _default = function _default() {
     contentInverseTertiary: _colors.default.gray400,
     // Border
     borderOpaque: _colors.default.gray200,
+    // @ts-ignore
     borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08'),
     borderSelected: foundation.primaryA,
     borderInverseOpaque: _colors.default.gray700,
+    // @ts-ignore
     borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2'),
     borderInverseSelected: foundation.primaryB
   };
   var coreExtensions = {
     // Backgrounds
     backgroundStateDisabled: _colors.default.gray50,
+    // @ts-ignore
     backgroundOverlayDark: (0, _util.hexToRgb)(_colors.default.black, '0.3'),
+    // @ts-ignore
     backgroundOverlayLight: (0, _util.hexToRgb)(_colors.default.black, '0.08'),
+    // @ts-ignore
     backgroundOverlayArt: (0, _util.hexToRgb)(_colors.default.black, '0.00'),
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: _colors.default.green400,
-    backgroundLightAccent: _colors.default.blue50,
-    backgroundLightNegative: _colors.default.red50,
-    backgroundLightWarning: _colors.default.yellow50,
-    backgroundLightPositive: _colors.default.green50,
+    backgroundAccentLight: _colors.default.blue50,
+    backgroundNegativeLight: _colors.default.red50,
+    backgroundWarningLight: _colors.default.yellow50,
+    backgroundPositiveLight: _colors.default.green50,
     backgroundAlwaysDark: _colors.default.black,
     backgroundAlwaysLight: _colors.default.white,
     // Content
@@ -74,6 +79,9 @@ var _default = function _default() {
     borderNegative: _colors.default.red200,
     borderWarning: _colors.default.yellow200,
     borderPositive: _colors.default.green200,
+    borderNegativeLight: _colors.default.red200,
+    borderWarningLight: _colors.default.yellow200,
+    borderPositiveLight: _colors.default.green200,
     // Programs
     safety: _colors.default.blue400,
     eatsGreen400: _colors.default.green400,

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

@@ -54,10 +54,10 @@ export default (
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: colors.green400,
-    backgroundLightAccent: colors.blue50,
-    backgroundLightNegative: colors.red50,
-    backgroundLightWarning: colors.yellow50,
-    backgroundLightPositive: colors.green50,
+    backgroundAccentLight: colors.blue50,
+    backgroundNegativeLight: colors.red50,
+    backgroundWarningLight: colors.yellow50,
+    backgroundPositiveLight: colors.green50,
     backgroundAlwaysDark: colors.black,
     backgroundAlwaysLight: colors.white,
 
@@ -77,6 +77,9 @@ export default (
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
     borderPositive: colors.green200,
+    borderNegativeLight: colors.red200,
+    borderWarningLight: colors.yellow200,
+    borderPositiveLight: colors.green200,
 
     // Programs
     safety: colors.blue400,