baseui 0.0.0-next-e40d68e → 0.0.0-next-7c7b20c

package/button/index.d.ts

@@ -37,8 +37,14 @@ export interface ButtonOverrides {
   LoadingSpinner?: Override<any>;
 }
 
+export interface CustomColorsT {
+  backgroundColor: string;
+  color: string;
+}
+
 export interface ButtonProps
   extends StyletronComponentInjectedProps<ButtonProps> {
+  colors?: CustomColorsT;
   href?: string;
   target?: string;
   children?: React.ReactNode;

package/button/styled-components.js

@@ -18,6 +18,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var BaseButton = (0, _index.styled)('button', function (_ref) {
   var $theme = _ref.$theme,
       $size = _ref.$size,
+      $colors = _ref.$colors,
       $kind = _ref.$kind,
       $shape = _ref.$shape,
       $isLoading = _ref.$isLoading,
@@ -69,8 +70,9 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     $theme: $theme,
     $size: $size,
     $shape: $shape
-  })), getKindStyles({
+  })), getColorStyles({
     $theme: $theme,
+    $colors: $colors,
     $kind: $kind,
     $isLoading: $isLoading,
     $isSelected: $isSelected,
@@ -345,13 +347,27 @@ function getPaddingStyles(_ref12) {
   }
 }
 
-function getKindStyles(_ref13) {
+function getColorStyles(_ref13) {
   var $theme = _ref13.$theme,
+      $colors = _ref13.$colors,
       $isLoading = _ref13.$isLoading,
       $isSelected = _ref13.$isSelected,
       $kind = _ref13.$kind,
       $disabled = _ref13.$disabled;
 
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }

package/button/styled-components.js.flow

@@ -14,6 +14,7 @@ export const BaseButton = styled<SharedStylePropsT>(
   ({
     $theme,
     $size,
+    $colors,
     $kind,
     $shape,
     $isLoading,
@@ -55,8 +56,14 @@ export const BaseButton = styled<SharedStylePropsT>(
     ...getFontStyles({$theme, $size}),
     ...getBorderRadiiStyles({$theme, $size, $shape}),
     ...getPaddingStyles({$theme, $size, $shape}),
-    // Kind style override
-    ...getKindStyles({$theme, $kind, $isLoading, $isSelected, $disabled}),
+    ...getColorStyles({
+      $theme,
+      $colors,
+      $kind,
+      $isLoading,
+      $isSelected,
+      $disabled,
+    }),
     ...getShapeStyles({$theme, $shape, $size}),
   }),
 );
@@ -302,26 +309,43 @@ function getPaddingStyles({$theme, $size, $shape}) {
   }
 }
 
-type KindStylesT = {|
+type ColorStylesT = {|
   color?: string,
   backgroundColor?: string,
   ':hover'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
   ':focus'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
   ':active'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
 |};
-function getKindStyles({
+function getColorStyles({
   $theme,
+  $colors,
   $isLoading,
   $isSelected,
   $kind,
   $disabled,
-}): KindStylesT {
+}): ColorStylesT {
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)',
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }

package/button/types.js.flow

@@ -19,8 +19,14 @@ export type OverridesT = {
   LoadingSpinner?: OverrideT,
 };
 
+export type CustomColorsT = {|
+  backgroundColor: string,
+  color: string,
+|};
+
 export type ButtonPropsT = {
   children?: React$Node,
+  colors?: CustomColorsT,
   disabled?: boolean,
   /** A helper rendered at the end of the button. */
   // eslint-disable-next-line flowtype/no-weak-types
@@ -44,6 +50,7 @@ export type ButtonPropsT = {
 };
 
 export type SharedStylePropsT = {
+  $colors?: CustomColorsT,
   $kind?: $Keys<typeof KIND>,
   $isSelected?: boolean,
   $shape?: $Keys<typeof SHAPE>,

package/button/utils.js

@@ -12,13 +12,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 function getSharedProps(_ref) {
-  var disabled = _ref.disabled,
+  var colors = _ref.colors,
+      disabled = _ref.disabled,
       isLoading = _ref.isLoading,
       isSelected = _ref.isSelected,
       kind = _ref.kind,
       shape = _ref.shape,
       size = _ref.size;
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/button/utils.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 import type {ButtonPropsT} from './types.js';
 
 export function getSharedProps({
+  colors,
   disabled,
   isLoading,
   isSelected,
@@ -16,6 +17,7 @@ export function getSharedProps({
   size,
 }: ButtonPropsT) {
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/es/button/styled-components.js

@@ -9,6 +9,7 @@ import { KIND, SIZE, SHAPE } from './constants.js';
 export const BaseButton = styled('button', ({
   $theme,
   $size,
+  $colors,
   $kind,
   $shape,
   $isLoading,
@@ -64,9 +65,9 @@ export const BaseButton = styled('button', ({
     $size,
     $shape
   }),
-  // Kind style override
-  ...getKindStyles({
+  ...getColorStyles({
     $theme,
+    $colors,
     $kind,
     $isLoading,
     $isSelected,
@@ -344,13 +345,27 @@ function getPaddingStyles({
   }
 }
 
-function getKindStyles({
+function getColorStyles({
   $theme,
+  $colors,
   $isLoading,
   $isSelected,
   $kind,
   $disabled
 }) {
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }

package/es/button/utils.js

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export function getSharedProps({
+  colors,
   disabled,
   isLoading,
   isSelected,
@@ -13,6 +14,7 @@ export function getSharedProps({
   size
 }) {
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/esm/button/styled-components.js

@@ -15,6 +15,7 @@ import { KIND, SIZE, SHAPE } from './constants.js';
 export var BaseButton = styled('button', function (_ref) {
   var $theme = _ref.$theme,
       $size = _ref.$size,
+      $colors = _ref.$colors,
       $kind = _ref.$kind,
       $shape = _ref.$shape,
       $isLoading = _ref.$isLoading,
@@ -66,8 +67,9 @@ export var BaseButton = styled('button', function (_ref) {
     $theme: $theme,
     $size: $size,
     $shape: $shape
-  })), getKindStyles({
+  })), getColorStyles({
     $theme: $theme,
+    $colors: $colors,
     $kind: $kind,
     $isLoading: $isLoading,
     $isSelected: $isSelected,
@@ -337,13 +339,27 @@ function getPaddingStyles(_ref12) {
   }
 }
 
-function getKindStyles(_ref13) {
+function getColorStyles(_ref13) {
   var $theme = _ref13.$theme,
+      $colors = _ref13.$colors,
       $isLoading = _ref13.$isLoading,
       $isSelected = _ref13.$isSelected,
       $kind = _ref13.$kind,
       $disabled = _ref13.$disabled;
 
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }

package/esm/button/utils.js

@@ -5,13 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export function getSharedProps(_ref) {
-  var disabled = _ref.disabled,
+  var colors = _ref.colors,
+      disabled = _ref.disabled,
       isLoading = _ref.isLoading,
       isSelected = _ref.isSelected,
       kind = _ref.kind,
       shape = _ref.shape,
       size = _ref.size;
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/menu/index.d.ts

@@ -107,7 +107,7 @@ export interface StatefulContainerProps {
   removeMenuFromNesting?: (ref: React.Ref<HTMLElement>) => void;
   getParentMenu?: (ref: React.Ref<HTMLElement>) => void;
   getChildMenu?: (ref: React.Ref<HTMLElement>) => void;
-  nestedMenuHoverIndex?: nubmer;
+  nestedMenuHoverIndex?: number;
   isNestedMenuVisible?: (ref: React.Ref<HTMLElement>) => boolean;
 }
 export interface StatefulContainerState {

package/package.json

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