baseui 15.0.2 → 16.0.0

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 () {