baseui 14.0.0 → 15.0.0

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

@@ -0,0 +1,3 @@
+import type { FoundationColors } from '../types';
+export declare const foundationColors: FoundationColors;
+export default foundationColors;

package/themes/dark-theme/{color-tokens.js → color-foundation-tokens.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.darkColorTokens = void 0;
+exports.foundationColors = exports.default = void 0;
 var _tokens = require("../../tokens");
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -13,11 +13,11 @@ LICENSE file in the root directory of this source tree.
 */
 
 // color constants
-const darkColorTokens = exports.darkColorTokens = {
+const foundationColors = exports.foundationColors = {
   // Primary Palette
-  primaryA: _tokens.colors.gray200,
-  primaryB: _tokens.colors.gray900,
-  primary: _tokens.colors.white,
+  primaryA: _tokens.primitiveDarkColors.gray900Dark,
+  primaryB: _tokens.primitiveDarkColors.gray50Dark,
+  primary: '#FFFFFF',
   primary50: '#F6F6F6',
   primary100: '#EEEEEE',
   primary200: '#E2E2E2',
@@ -27,7 +27,7 @@ const darkColorTokens = exports.darkColorTokens = {
   primary600: '#545454',
   primary700: '#333333',
   // Accent Palette
-  accent: _tokens.colors.blue400,
+  accent: _tokens.primitiveDarkColors.blue400Dark,
   accent50: '#EFF3FE',
   accent100: '#D4E2FC',
   accent200: '#A0BFF8',
@@ -37,7 +37,7 @@ const darkColorTokens = exports.darkColorTokens = {
   accent600: '#174291',
   accent700: '#102C60',
   // Negative Palette
-  negative: _tokens.colors.red500,
+  negative: _tokens.primitiveDarkColors.red400Dark,
   negative50: '#FFEFED',
   negative100: '#FED7D2',
   negative200: '#F1998E',
@@ -47,7 +47,7 @@ const darkColorTokens = exports.darkColorTokens = {
   negative600: '#870F00',
   negative700: '#5A0A00',
   // Warning Palette
-  warning: _tokens.colors.yellow500,
+  warning: _tokens.primitiveDarkColors.yellow400Dark,
   warning50: '#FFFAF0',
   warning100: '#FFF2D9',
   warning200: '#FFE3AC',
@@ -57,7 +57,7 @@ const darkColorTokens = exports.darkColorTokens = {
   warning600: '#996F00',
   warning700: '#674D1B',
   // Positive Palette
-  positive: _tokens.colors.green400,
+  positive: _tokens.primitiveDarkColors.green400Dark,
   positive50: '#E6F2ED',
   positive100: '#ADDEC9',
   positive200: '#66D19E',
@@ -79,9 +79,6 @@ const darkColorTokens = exports.darkColorTokens = {
   mono700: '#1F1F1F',
   mono800: '#141414',
   mono900: '#111111',
-  mono1000: '#000000',
-  // Rating Palette,
-  ratingInactiveFill: _tokens.colors.gray500,
-  ratingStroke: _tokens.colors.gray700
+  mono1000: '#000000'
 };
-var _default = exports.default = darkColorTokens;
+var _default = exports.default = foundationColors;

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

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

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _colorTokens = _interopRequireDefault(require("./color-tokens"));
+var _colorFoundationTokens = _interopRequireDefault(require("./color-foundation-tokens"));
 var _util = require("../../styles/util");
-var _colors = _interopRequireDefault(require("../../tokens/colors"));
+var _colorPrimitiveTokens = require("../../tokens/color-primitive-tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -14,80 +14,74 @@ 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.
 */
-var _default = (
-// themePrimitives or foundation colors
-foundation = _colorTokens.default) => {
+var _default = (foundation = _colorFoundationTokens.default) => {
   const core = {
     // Background
     backgroundPrimary: foundation.primaryB,
-    backgroundSecondary: _colors.default.gray800,
-    backgroundTertiary: _colors.default.gray700,
-    backgroundInversePrimary: foundation.primaryA,
-    backgroundInverseSecondary: _colors.default.gray300,
+    backgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    backgroundTertiary: _colorPrimitiveTokens.primitiveDarkColors.gray200Dark,
+    backgroundInversePrimary: _colorPrimitiveTokens.primitiveDarkColors.gray800Dark,
+    backgroundInverseSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray700Dark,
     // Content
-    contentPrimary: _colors.default.white,
-    contentSecondary: _colors.default.gray300,
-    contentTertiary: _colors.default.gray400,
-    contentInversePrimary: _colors.default.black,
-    contentInverseSecondary: _colors.default.gray700,
-    contentInverseTertiary: _colors.default.gray600,
+    contentPrimary: foundation.primaryA,
+    contentSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray800Dark,
+    contentTertiary: _colorPrimitiveTokens.primitiveDarkColors.gray700Dark,
+    contentInversePrimary: _colorPrimitiveTokens.primitiveDarkColors.black,
+    contentInverseSecondary: _colorPrimitiveTokens.primitiveDarkColors.gray200Dark,
+    contentInverseTertiary: _colorPrimitiveTokens.primitiveDarkColors.gray300Dark,
     // Border
-    borderOpaque: _colors.default.gray700,
-    // @ts-ignore
-    borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08'),
+    borderOpaque: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    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'),
+    borderInverseOpaque: _colorPrimitiveTokens.primitiveDarkColors.gray300Dark,
+    borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2') || '',
     borderInverseSelected: foundation.primaryB
   };
   const coreExtensions = {
     // Backgrounds
-    backgroundStateDisabled: _colors.default.gray800,
-    // @ts-ignore
-    backgroundOverlay: (0, _util.hexToRgb)(_colors.default.black, '0.7'),
-    // @ts-ignore
-    backgroundOverlayArt: (0, _util.hexToRgb)(_colors.default.black, '0.16'),
+    backgroundStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    backgroundOverlay: (0, _util.hexToRgb)(_colorPrimitiveTokens.primitiveDarkColors.black, '0.7') || '',
+    backgroundOverlayArt: (0, _util.hexToRgb)(_colorPrimitiveTokens.primitiveDarkColors.black, '0.16') || '',
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: _colors.default.green500,
-    backgroundAccentLight: _colors.default.blue700,
-    backgroundPositiveLight: _colors.default.green700,
-    backgroundNegativeLight: _colors.default.red700,
-    backgroundWarningLight: _colors.default.yellow700,
-    backgroundAlwaysDark: _colors.default.gray900,
-    backgroundAlwaysLight: _colors.default.gray100,
+    backgroundPositive: foundation.positive,
+    backgroundAccentLight: _colorPrimitiveTokens.primitiveDarkColors.blue100Dark,
+    backgroundPositiveLight: _colorPrimitiveTokens.primitiveDarkColors.green100Dark,
+    backgroundNegativeLight: _colorPrimitiveTokens.primitiveDarkColors.red100Dark,
+    backgroundWarningLight: _colorPrimitiveTokens.primitiveDarkColors.yellow100Dark,
+    backgroundAlwaysDark: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    backgroundAlwaysLight: _colorPrimitiveTokens.primitiveDarkColors.gray900Dark,
     // Content
-    contentStateDisabled: _colors.default.gray600,
-    contentAccent: _colors.default.blue300,
-    contentOnColor: _colors.default.white,
-    contentOnColorInverse: _colors.default.black,
-    contentNegative: _colors.default.red300,
-    contentWarning: _colors.default.yellow300,
-    contentPositive: _colors.default.green300,
+    contentStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray400Dark,
+    contentAccent: _colorPrimitiveTokens.primitiveDarkColors.blue600Dark,
+    contentOnColor: _colorPrimitiveTokens.primitiveDarkColors.gray900Dark,
+    contentOnColorInverse: _colorPrimitiveTokens.primitiveDarkColors.black,
+    contentNegative: _colorPrimitiveTokens.primitiveDarkColors.red600Dark,
+    contentWarning: _colorPrimitiveTokens.primitiveDarkColors.yellow600Dark,
+    contentPositive: _colorPrimitiveTokens.primitiveDarkColors.green600Dark,
     // Border
-    borderStateDisabled: _colors.default.gray800,
-    borderAccent: _colors.default.blue400,
-    borderAccentLight: _colors.default.blue500,
-    borderNegative: _colors.default.red500,
-    borderWarning: _colors.default.yellow500,
-    borderPositive: _colors.default.green500,
-    borderNegativeLight: _colors.default.red200,
-    borderWarningLight: _colors.default.yellow200,
-    borderPositiveLight: _colors.default.green200,
+    borderStateDisabled: _colorPrimitiveTokens.primitiveDarkColors.gray100Dark,
+    borderAccent: _colorPrimitiveTokens.primitiveDarkColors.blue500Dark,
+    borderAccentLight: _colorPrimitiveTokens.primitiveDarkColors.blue400Dark,
+    borderNegative: _colorPrimitiveTokens.primitiveDarkColors.red500Dark,
+    borderNegativeLight: _colorPrimitiveTokens.primitiveDarkColors.red400Dark,
+    borderWarning: _colorPrimitiveTokens.primitiveDarkColors.yellow500Dark,
+    borderWarningLight: _colorPrimitiveTokens.primitiveDarkColors.yellow400Dark,
+    borderPositive: _colorPrimitiveTokens.primitiveDarkColors.green500Dark,
+    borderPositiveLight: _colorPrimitiveTokens.primitiveDarkColors.green400Dark,
     // Programs
-    safety: _colors.default.blue400,
-    eatsGreen400: _colors.default.green400,
-    freightBlue400: _colors.default.cobalt400,
-    jumpRed400: _colors.default.red400,
-    rewardsTier1: _colors.default.blue400,
-    rewardsTier2: _colors.default.yellow400,
-    rewardsTier3: _colors.default.platinum400,
-    rewardsTier4: _colors.default.gray200,
-    membership: _colors.default.yellow600
+    safety: _colorPrimitiveTokens.primitiveLightColors.blue600,
+    eatsGreen400: _colorPrimitiveTokens.primitiveLightColors.green600,
+    freightBlue400: _colorPrimitiveTokens.primitiveLightColors.cobalt400,
+    rewardsTier1: _colorPrimitiveTokens.primitiveLightColors.blue600,
+    rewardsTier2: _colorPrimitiveTokens.primitiveLightColors.yellow300,
+    rewardsTier3: _colorPrimitiveTokens.primitiveLightColors.platinum400,
+    rewardsTier4: _colorPrimitiveTokens.primitiveLightColors.black,
+    membership: _colorPrimitiveTokens.primitiveLightColors.yellow600
   };
   const deprecated = {
+    jumpRed400: _colorPrimitiveTokens.primitiveLightColors.red600,
     backgroundOverlayLight: coreExtensions.backgroundOverlay,
     backgroundOverlayDark: coreExtensions.backgroundOverlay,
     backgroundLightAccent: coreExtensions.backgroundAccentLight,

package/themes/dark-theme/create-dark-theme.d.ts

@@ -1,2 +1,2 @@
-import type { Theme, MakeExtendable, DeepPartial } from '../../styles/types';
+import type { DeepPartial, MakeExtendable, Theme } from '../../styles/types';
 export default function createDarkTheme<OverridesT extends DeepPartial<MakeExtendable<Theme>> = {}>(overrides?: OverridesT): Theme & OverridesT;

package/themes/dark-theme/create-dark-theme.js

@@ -4,20 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createDarkTheme;
-var _animation = _interopRequireDefault(require("../shared/animation"));
-var _borders = _interopRequireDefault(require("./borders"));
-var _breakpoints = _interopRequireDefault(require("../shared/breakpoints"));
 var _deepMerge = _interopRequireDefault(require("../../utils/deep-merge"));
 var _utils = require("../utils");
-var _colorTokens = _interopRequireDefault(require("./color-tokens"));
 var _tokens = require("../../tokens");
 var _colorComponentTokens = _interopRequireDefault(require("./color-component-tokens"));
 var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-tokens"));
-var _typography = _interopRequireDefault(require("../shared/typography"));
-var _grid = _interopRequireDefault(require("../shared/grid"));
-var _lighting = _interopRequireDefault(require("../shared/lighting"));
-var _mediaQuery = _interopRequireDefault(require("../shared/media-query"));
-var _sizing = _interopRequireDefault(require("../shared/sizing"));
+var _colorFoundationTokens = _interopRequireDefault(require("./color-foundation-tokens"));
+var _darkTheme = require("./dark-theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -27,32 +20,19 @@ LICENSE file in the root directory of this source tree.
 */
 
 function createDarkTheme(overrides) {
-  const foundationColorTokens = {
-    ..._colorTokens.default,
-    ...(0, _utils.getFoundationColorTokenOverrides)(overrides?.colors)
+  const foundationColors = {
+    ..._colorFoundationTokens.default,
+    ...(0, _utils.getFoundationColorOverrides)(overrides?.colors)
   };
-  const semanticColorTokens = (0, _colorSemanticTokens.default)(foundationColorTokens);
-  const componentColorTokens = (0, _colorComponentTokens.default)(foundationColorTokens);
+  const semanticColors = (0, _colorSemanticTokens.default)(foundationColors);
+  const componentColors = (0, _colorComponentTokens.default)(semanticColors);
   const theme = {
-    animation: _animation.default,
-    borders: _borders.default,
-    breakpoints: _breakpoints.default,
+    ...structuredClone(_darkTheme.DarkTheme),
     colors: {
-      ..._tokens.colors,
-      ...foundationColorTokens,
-      ...semanticColorTokens,
-      ...componentColorTokens
-    },
-    direction: 'auto',
-    grid: _grid.default,
-    lighting: _lighting.default,
-    mediaQuery: _mediaQuery.default,
-    sizing: _sizing.default,
-    typography: _typography.default,
-    // TODO(#2318) Remove in v11, the next major version.
-    // Do not use.
-    zIndex: {
-      modal: 2000
+      ..._tokens.primitiveColors,
+      ...foundationColors,
+      ...semanticColors,
+      ...componentColors
     }
   };
   return (0, _deepMerge.default)(theme, overrides);

package/themes/dark-theme/dark-theme.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DarkTheme = void 0;
-var _colorTokens = _interopRequireDefault(require("./color-tokens"));
-var _colors = _interopRequireDefault(require("../../tokens/colors"));
+var _colorFoundationTokens = _interopRequireDefault(require("./color-foundation-tokens"));
+var _colorPrimitiveTokens = _interopRequireDefault(require("../../tokens/color-primitive-tokens"));
 var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-tokens"));
 var _colorComponentTokens = _interopRequireDefault(require("./color-component-tokens"));
 var _borders = _interopRequireDefault(require("./borders"));
@@ -27,8 +27,8 @@ LICENSE file in the root directory of this source tree.
 const DarkTheme = exports.DarkTheme = {
   name: 'dark-theme',
   colors: {
-    ..._colorTokens.default,
-    ..._colors.default,
+    ..._colorFoundationTokens.default,
+    ..._colorPrimitiveTokens.default,
     ...(0, _colorComponentTokens.default)(),
     ...(0, _colorSemanticTokens.default)()
   },

package/themes/dark-theme/primitives.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _colorTokens = _interopRequireDefault(require("./color-tokens"));
+var _colorFoundationTokens = _interopRequireDefault(require("./color-foundation-tokens"));
 var _typography = require("../shared/typography");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
@@ -17,7 +17,7 @@ LICENSE file in the root directory of this source tree.
 // We don't use this ourselves. We provide it for backward compatibility.
 // People may have used it to create their own custom theme.
 const primitives = {
-  ..._colorTokens.default,
+  ..._colorFoundationTokens.default,
   ..._typography.fontTokens
 };
 var _default = exports.default = primitives;

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

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