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

package/checkbox/styled-components.js

@@ -285,13 +285,9 @@ const Toggle = exports.Toggle = (0, _styles.styled)('div', props => {
 Toggle.displayName = "Toggle";
 Toggle.displayName = 'Toggle';
 const ToggleTrack = exports.ToggleTrack = (0, _styles.styled)('div', props => {
-  let backgroundColor = props.$theme.colors.toggleTrackFill;
-  if (props.$disabled) {
-    backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
-  } else if (props.$error && props.$checked) {
-    backgroundColor = props.$theme.colors.tickFillError;
-  }
+  const backgroundColor = props.$disabled ? props.$theme.colors.toggleTrackFillDisabled : props.$theme.colors.toggleTrackFill;
   return {
+    flex: '0 0 auto',
     alignItems: 'center',
     backgroundColor,
     borderTopLeftRadius: '7px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-e19fc5fd2",
+  "version": "0.0.0-next-ff0c2b52d",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/tag/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly xSmall: "xSmall";
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
@@ -7,8 +8,7 @@ export declare const HIERARCHY: Readonly<{
     readonly primary: "primary";
     readonly secondary: "secondary";
 }>;
-export declare const KIND: {
-    readonly custom: "custom";
+export declare const DEPRECATED_KIND: Readonly<{
     readonly neutral: "neutral";
     readonly primary: "primary";
     readonly accent: "accent";
@@ -16,13 +16,39 @@ export declare const KIND: {
     readonly warning: "warning";
     readonly negative: "negative";
     readonly black: "black";
-    readonly blue: "blue";
-    readonly green: "green";
+    readonly brown: "brown";
+}>;
+export declare const SUPPORTED_KIND: 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";
+}>;
+export declare const KIND: {
+    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 brown: "brown";
+    readonly magenta: "magenta";
     readonly teal: "teal";
     readonly lime: "lime";
+    readonly neutral: "neutral";
+    readonly primary: "primary";
+    readonly accent: "accent";
+    readonly positive: "positive";
+    readonly warning: "warning";
+    readonly negative: "negative";
+    readonly black: "black";
+    readonly brown: "brown";
 };

package/tag/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZE = exports.KIND = exports.HIERARCHY = void 0;
+exports.SUPPORTED_KIND = exports.SIZE = exports.KIND = exports.HIERARCHY = exports.DEPRECATED_KIND = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -11,6 +11,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 const SIZE = exports.SIZE = {
+  xSmall: 'xSmall',
   small: 'small',
   medium: 'medium',
   large: 'large'
@@ -19,26 +20,32 @@ const HIERARCHY = exports.HIERARCHY = Object.freeze({
   primary: 'primary',
   secondary: 'secondary'
 });
-
-// todo: dynamic identity map generation
-const KIND = exports.KIND = {
-  custom: 'custom',
-  // semantic
+const DEPRECATED_KIND = exports.DEPRECATED_KIND = Object.freeze({
   neutral: 'neutral',
   primary: 'primary',
   accent: 'accent',
   positive: 'positive',
   warning: 'warning',
   negative: 'negative',
-  // primitive
   black: 'black',
-  blue: 'blue',
-  green: 'green',
+  brown: 'brown'
+});
+const SUPPORTED_KIND = exports.SUPPORTED_KIND = Object.freeze({
+  custom: 'custom',
+  gray: 'gray',
   red: 'red',
-  yellow: 'yellow',
   orange: 'orange',
+  yellow: 'yellow',
+  green: 'green',
+  blue: 'blue',
   purple: 'purple',
-  brown: 'brown',
+  magenta: 'magenta',
   teal: 'teal',
   lime: 'lime'
+});
+
+// todo: dynamic identity map generation
+const KIND = exports.KIND = {
+  ...DEPRECATED_KIND,
+  ...SUPPORTED_KIND
 };

package/tag/deprecated-styles.d.ts

@@ -0,0 +1,119 @@
+export declare const deprecatedNeutralColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedPrimaryColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedBlueColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedGreenColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedYellowColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedRedColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};
+export declare const deprecatedBrownColorStates: {
+    disabled: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    primary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+    secondary: (theme: any, color: any) => {
+        color: any;
+        backgroundColor: any;
+        borderColor: any;
+    };
+};

package/tag/deprecated-styles.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deprecatedYellowColorStates = exports.deprecatedRedColorStates = exports.deprecatedPrimaryColorStates = exports.deprecatedNeutralColorStates = exports.deprecatedGreenColorStates = exports.deprecatedBrownColorStates = exports.deprecatedBlueColorStates = void 0;
+// Note: all the styles exported from this file are deprecated and won't be maintained going forward.
+// They are kept here for backward compatibility reasons only.
+
+const COLOR_STATE = {
+  disabled: 'disabled',
+  primary: 'primary',
+  secondary: 'secondary'
+};
+
+// Probably best to bake this into the theme once we hit our next major.
+// @ts-ignore
+const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
+const deprecatedNeutralColorStates = exports.deprecatedNeutralColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagNeutralFontDisabled,
+    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagNeutralSolidFont,
+    backgroundColor: theme.colors.tagNeutralSolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagNeutralOutlinedFont,
+    backgroundColor: theme.colors.tagNeutralOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedPrimaryColorStates = exports.deprecatedPrimaryColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagPrimaryFontDisabled,
+    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagPrimarySolidFont,
+    backgroundColor: theme.colors.tagPrimarySolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagPrimaryOutlinedFont,
+    backgroundColor: theme.colors.tagPrimaryOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedBlueColorStates = exports.deprecatedBlueColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagAccentFontDisabled,
+    backgroundColor: pick(theme, theme.colors.blue50, theme.colors.blue100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagAccentSolidFont,
+    backgroundColor: theme.colors.tagAccentSolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagAccentOutlinedFont,
+    backgroundColor: theme.colors.tagAccentOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedGreenColorStates = exports.deprecatedGreenColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagPositiveFontDisabled,
+    backgroundColor: pick(theme, theme.colors.green50, theme.colors.green100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagPositiveSolidFont,
+    backgroundColor: theme.colors.tagPositiveSolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagPositiveOutlinedFont,
+    backgroundColor: theme.colors.tagPositiveOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedYellowColorStates = exports.deprecatedYellowColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagWarningFontDisabled,
+    backgroundColor: pick(theme, theme.colors.yellow50, theme.colors.yellow100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagWarningSolidFont,
+    backgroundColor: theme.colors.tagWarningSolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagWarningOutlinedFont,
+    backgroundColor: theme.colors.tagWarningOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedRedColorStates = exports.deprecatedRedColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: theme.colors.tagNegativeFontDisabled,
+    backgroundColor: pick(theme, theme.colors.red50, theme.colors.red100Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: theme.colors.tagNegativeSolidFont,
+    backgroundColor: theme.colors.tagNegativeSolidBackground,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: theme.colors.tagNegativeOutlinedFont,
+    backgroundColor: theme.colors.tagNegativeOutlinedBackground,
+    borderColor: null
+  })
+};
+const deprecatedBrownColorStates = exports.deprecatedBrownColorStates = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.disabled]: (theme, color) => ({
+    color: pick(theme, theme.colors.amber200, theme.colors.amber400Dark),
+    backgroundColor: null,
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.primary]: (theme, color) => ({
+    color: pick(theme, theme.colors.white, theme.colors.gray900Dark),
+    backgroundColor: pick(theme, theme.colors.amber600, theme.colors.amber400Dark),
+    borderColor: null
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
+  [COLOR_STATE.secondary]: (theme, color) => ({
+    color: pick(theme, theme.colors.amber600, theme.colors.amber600Dark),
+    backgroundColor: null,
+    borderColor: null
+  })
+};

package/tag/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Tag } from './tag';
 export { Root as StyledRoot, Action as StyledAction, Text as StyledText, } from './styled-components';
-export { KIND, HIERARCHY, SIZE } from './constants';
+export { KIND, HIERARCHY, SIZE, SUPPORTED_KIND, DEPRECATED_KIND } from './constants';
 export * from './types';

package/tag/index.js

@@ -10,8 +10,16 @@ var _exportNames = {
   StyledText: true,
   KIND: true,
   HIERARCHY: true,
-  SIZE: true
+  SIZE: true,
+  SUPPORTED_KIND: true,
+  DEPRECATED_KIND: true
 };
+Object.defineProperty(exports, "DEPRECATED_KIND", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEPRECATED_KIND;
+  }
+});
 Object.defineProperty(exports, "HIERARCHY", {
   enumerable: true,
   get: function () {
@@ -30,6 +38,12 @@ Object.defineProperty(exports, "SIZE", {
     return _constants.SIZE;
   }
 });
+Object.defineProperty(exports, "SUPPORTED_KIND", {
+  enumerable: true,
+  get: function () {
+    return _constants.SUPPORTED_KIND;
+  }
+});
 Object.defineProperty(exports, "StyledAction", {
   enumerable: true,
   get: function () {