baseui 16.0.0 → 16.1.1

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

@@ -37,7 +37,20 @@ foundation = _colorFoundationTokens.default) => {
     borderSelected: foundation.primaryA,
     borderInverseOpaque: _colorPrimitiveTokens.default.gray800,
     borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2') || (0, _util.hexToRgb)(_colorFoundationTokens.default.primaryB, '0.2') || '',
-    borderInverseSelected: foundation.primaryB
+    borderInverseSelected: foundation.primaryB,
+    // brand default
+    brandBackgroundPrimary: _colorPrimitiveTokens.default.brandDefault600,
+    brandBackgroundSecondary: _colorPrimitiveTokens.default.brandDefault50,
+    brandBackgroundTertiary: _colorPrimitiveTokens.default.white,
+    brandBackgroundDisabled: _colorPrimitiveTokens.default.brandDefault50,
+    brandContentPrimary: _colorPrimitiveTokens.default.brandDefault600,
+    brandContentOnPrimary: _colorPrimitiveTokens.default.white,
+    brandContentOnSecondary: _colorPrimitiveTokens.default.brandDefault700,
+    brandContentOnTertiary: _colorPrimitiveTokens.default.black,
+    brandContentOnGradient: _colorPrimitiveTokens.default.white,
+    brandContentDisabled: _colorPrimitiveTokens.default.brandDefault300,
+    brandBorderAccessible: _colorPrimitiveTokens.default.brandDefault600,
+    brandBorderSubtle: _colorPrimitiveTokens.default.brandDefault100
   };
   const coreExtensions = {
     // Backgrounds

package/themes/types.d.ts

@@ -133,6 +133,18 @@ export type CoreSemanticColors = {
     borderInverseOpaque: string;
     borderInverseTransparent: string;
     borderInverseSelected: string;
+    brandBackgroundPrimary: string;
+    brandBackgroundSecondary: string;
+    brandBackgroundTertiary: string;
+    brandBackgroundDisabled: string;
+    brandContentPrimary: string;
+    brandContentOnPrimary: string;
+    brandContentOnSecondary: string;
+    brandContentOnTertiary: string;
+    brandContentOnGradient: string;
+    brandContentDisabled: string;
+    brandBorderAccessible: string;
+    brandBorderSubtle: string;
 };
 export type CoreExtensionSemanticColors = {
     backgroundStateDisabled: string;

package/tokens/color-primitive-tokens.js

@@ -175,6 +175,17 @@ const primitiveColors = exports.default = {
   brown600: '#5C3C2E',
   /* @deprecated use orange color tokens instead */
   brown700: '#3D281E',
+  // Brand colors
+  brandDefault50: '#EFF4FE',
+  brandDefault100: '#DEE9FE',
+  brandDefault200: '#CDDEFF',
+  brandDefault300: '#A9C9FF',
+  brandDefault400: '#6DAAFB',
+  brandDefault500: '#068BEE',
+  brandDefault600: '#276EF1',
+  brandDefault700: '#175BCC',
+  brandDefault800: '#1948A3',
+  brandDefault900: '#002661',
   /***** dark color tokens *****/
   gray50Dark: '#161616',
   gray100Dark: '#292929',
@@ -285,7 +296,18 @@ const primitiveColors = exports.default = {
   magenta600Dark: '#C664A9',
   magenta700Dark: '#E099C9',
   magenta800Dark: '#EEB6DB',
-  magenta900Dark: '#F1D4E7'
+  magenta900Dark: '#F1D4E7',
+  // Brand colors
+  brandDefault50Dark: '#09152C',
+  brandDefault100Dark: '#182946',
+  brandDefault200Dark: '#22375C',
+  brandDefault300Dark: '#2D4775',
+  brandDefault400Dark: '#335BA3',
+  brandDefault500Dark: '#3F6EC5',
+  brandDefault600Dark: '#5E8BDB',
+  brandDefault700Dark: '#93B4EE',
+  brandDefault800Dark: '#B3CCF6',
+  brandDefault900Dark: '#D1DFF6'
 };
 const primitiveLightColors = exports.primitiveLightColors = {};
 const primitiveDarkColors = exports.primitiveDarkColors = {};

package/tokens/types.d.ts

@@ -161,6 +161,16 @@ export type PrimitiveColors = {
     cobalt600: string;
     /** @deprecated use blue color tokens instead */
     cobalt700: string;
+    brandDefault50: string;
+    brandDefault100: string;
+    brandDefault200: string;
+    brandDefault300: string;
+    brandDefault400: string;
+    brandDefault500: string;
+    brandDefault600: string;
+    brandDefault700: string;
+    brandDefault800: string;
+    brandDefault900: string;
     gray50Dark: string;
     gray100Dark: string;
     gray200Dark: string;
@@ -271,6 +281,16 @@ export type PrimitiveColors = {
     magenta700Dark: string;
     magenta800Dark: string;
     magenta900Dark: string;
+    brandDefault50Dark: string;
+    brandDefault100Dark: string;
+    brandDefault200Dark: string;
+    brandDefault300Dark: string;
+    brandDefault400Dark: string;
+    brandDefault500Dark: string;
+    brandDefault600Dark: string;
+    brandDefault700Dark: string;
+    brandDefault800Dark: string;
+    brandDefault900Dark: string;
 };
 export type PrimitiveLightColors = {
     [K in keyof PrimitiveColors as K extends `${infer _}Dark` ? never : K]: PrimitiveColors[K];

package/utils/get-shared-styles.d.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '../styles';
+export declare const getFocusOutlineStyle: (theme: Theme) => {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const getOverlayColor: ({ $theme, $disabled, $error, }: {
+    $theme: Theme;
+    $disabled: boolean;
+    $error: boolean;
+}) => {
+    hoveredColor: string;
+    pressedColor: string;
+};

package/utils/get-shared-styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOverlayColor = exports.getFocusOutlineStyle = void 0;
+const getFocusOutlineStyle = theme => {
+  const {
+    colors,
+    sizing
+  } = theme;
+  return {
+    // 2px for the outline and 2px for the outline offset(Accessible 4px focus ring)
+    outline: `${sizing.scale0} solid ${colors.brandBorderAccessible}`,
+    outlineOffset: sizing.scale0
+  };
+};
+
+// Get overlay (for example, backplate background) color based on disabled and error states
+// Used in Checkbox, Radio, and Switch components Or any other component that requires an overlay(for example, backplate) for hovering and pressing states
+exports.getFocusOutlineStyle = getFocusOutlineStyle;
+const getOverlayColor = ({
+  $theme,
+  $disabled,
+  $error
+}) => {
+  const {
+    colors
+  } = $theme;
+  const hoveredColor = $disabled ? 'transparent' : $error ? colors.hoverNegativeAlpha : colors.hoverOverlayAlpha;
+  const pressedColor = $disabled ? 'transparent' : $error ? colors.pressedNegativeAlpha : colors.pressedOverlayAlpha;
+  return {
+    hoveredColor,
+    pressedColor
+  };
+};
+exports.getOverlayColor = getOverlayColor;