@biom3/react - npm Package Compare versions

Comparing version 0.9.4-beta to 0.9.6-beta

package.json

 {
   "name": "@biom3/react",
-  "version": "0.9.4-beta",
+  "version": "0.9.6-beta",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "types": "./dist/index.d.ts",

src/components/Banner/styles.ts

@@ -27,2 +27,8 @@ import { BiomeTheme } from '@biom3/design-tokens';
 
+export const rightHandButtonsContainerSx = {
+  display: 'flex',
+  gap: 'base.spacing.x2',
+  ml: 'auto',
+};
+
 export const getBannerColoring = (variant: BannerVariant) => {
@@ -29,0 +35,0 @@ switch (variant) {

src/components/Banner/types.ts

 import { Colors } from '@biom3/design-tokens';
 import { ReactElement } from 'react';
 
+import {
+  ButtConProps,
+  ButtonProps,
+  ButtonVariant,
+} from '../../types/clickable';
 import { BoxProps } from '../Box';
@@ -16,1 +21,26 @@ import { BodyProps } from '../Text/Body';
   BodyProps<RC> & { variant?: BannerVariant };
+
+type StrippedDownVariants = Exclude<
+  ButtonVariant,
+  | 'secondary'
+  | 'secondary/destructive'
+  | 'tertiary/inverse'
+  | 'primary/inverse'
+  | 'primary/destructive'
+>;
+
+export type BannerRightButtConProps<RC extends ReactElement | undefined> = Omit<
+  ButtConProps<RC>,
+  'variant' | 'size'
+> & {
+  bannerVariant?: BannerVariant;
+  variant?: StrippedDownVariants;
+};
+
+export type BannerRightButtonProps<RC extends ReactElement | undefined> = Omit<
+  ButtonProps<RC>,
+  'variant' | 'size'
+> & {
+  bannerVariant?: BannerVariant;
+  variant?: StrippedDownVariants;
+};

src/components/Clickable/Buttons/styles.ts

@@ -121,2 +121,21 @@ /* eslint-disable @typescript-eslint/no-use-before-define */
 
+const getPrimaryInverseButtonGenericStyles = ({ base }: BiomeTheme) => ({
+  background:
+    base.colorMode === 'lightOnDark'
+      ? 'base.color.translucent.inverse.1000'
+      : 'base.color.neutral.500',
+  color: 'base.color.text.primary',
+  '&::before': {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    background:
+      base.colorMode === 'lightOnDark'
+        ? 'base.color.translucent.inverse.1000'
+        : 'base.color.neutral.500',
+  },
+});
+
 const getPrimaryDestructiveButtonGenericStyles = ({ base }: BiomeTheme) => ({
@@ -369,2 +388,120 @@ background: 'base.color.status.destructive.bright',
 
+export function getSmallPrimaryInverseButtonUniqueStyles(
+  themeProps: BiomeTheme,
+) {
+  const { base } = themeProps;
+  const hoverCutaway = `calc(${base.border.size[100]} + ${base.border.size[200]})`;
+  const pressCutaway = `calc(${base.border.size[200]} + ${base.border.size[200]})`;
+
+  return {
+    ...smallButtonStaticStyles(themeProps),
+    '&:hover:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[200]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        background: 'base.color.text.primary',
+        clipPath: `inset(${hoverCutaway} ${hoverCutaway} ${hoverCutaway} ${hoverCutaway} round ${base.borderRadius.x10})`,
+      },
+    },
+
+    '&:active:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[200]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        clipPath: `inset(${pressCutaway} ${pressCutaway} ${pressCutaway} ${pressCutaway} round ${base.borderRadius.x10})`,
+      },
+    },
+  };
+}
+
+export function getMediumPrimaryInverseButtonUniqueStyles(
+  themeProps: BiomeTheme,
+) {
+  const { base } = themeProps;
+  const hoverCutaway = `calc(${base.border.size[200]} + ${base.border.size[300]})`;
+  const pressCutaway = `calc(${base.border.size[300]} + ${base.border.size[300]})`;
+
+  return {
+    ...mediumButtonStaticStyles(themeProps),
+    '&:hover:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[300]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        clipPath: `inset(${hoverCutaway} ${hoverCutaway} ${hoverCutaway} ${hoverCutaway} round ${base.borderRadius.x15})`,
+      },
+    },
+
+    '&:active:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[300]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        clipPath: `inset(${pressCutaway} ${pressCutaway} ${pressCutaway} ${pressCutaway} round ${base.borderRadius.x15})`,
+      },
+    },
+  };
+}
+
+export function getLargePrimaryInverseButtonUniqueStyles(
+  themeProps: BiomeTheme,
+) {
+  const { base } = themeProps;
+  const hoverCutaway = `calc(${base.border.size[200]} + ${base.border.size[400]})`;
+  const pressCutaway = `calc(${base.border.size[400]} + ${base.border.size[400]})`;
+
+  return {
+    ...largeButtonStaticStyles(themeProps),
+    '&:hover:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[400]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        clipPath: `inset(${hoverCutaway} ${hoverCutaway} ${hoverCutaway} ${hoverCutaway} round ${base.borderRadius.x20})`,
+      },
+    },
+
+    '&:active:not([disabled])': {
+      background: 'transparent',
+      boxShadow: `inset 0 0 0 ${base.border.size[400]} ${
+        base.colorMode === 'lightOnDark'
+          ? base.color.translucent.inverse[1000]
+          : base.color.neutral[500]
+      }`,
+
+      '&::before': {
+        content: '""',
+        clipPath: `inset(${pressCutaway} ${pressCutaway} ${pressCutaway} ${pressCutaway} round ${base.borderRadius.x20})`,
+      },
+    },
+  };
+}
+
 export function getSmallSecondaryDestructiveButtonUniqueStyles(
@@ -619,2 +756,15 @@ themeProps: BiomeTheme,
 
+export function getPrimaryInverseButtonStyles(
+  size: ButtonSize,
+  themeProps: BiomeTheme,
+) {
+  return merge(
+    size === 'small'
+      ? getSmallPrimaryInverseButtonUniqueStyles(themeProps)
+      : size === 'medium'
+      ? getMediumPrimaryInverseButtonUniqueStyles(themeProps)
+      : getLargePrimaryInverseButtonUniqueStyles(themeProps),
+  );
+}
+
 export function getSecondaryButtonStyles(
@@ -899,2 +1049,9 @@ size: ButtonSize,
 
+    case 'primary/inverse':
+      return merge(
+        baseButtonStyles,
+        getPrimaryInverseButtonStyles(size, themeProps),
+        getPrimaryInverseButtonGenericStyles(themeProps),
+      );
+
     case 'primary':
@@ -910,3 +1067,2 @@ default:
 
-// ButtCon
 export const getButtConIconStyles = ({
@@ -920,19 +1076,23 @@ variant,
   themeProps: BiomeTheme;
-}) => ({
-  width:
-    size === 'small'
-      ? base.icon.size[200]
-      : size === 'medium'
-      ? base.icon.size[250]
-      : base.icon.size[300],
-  fill: variant.includes('primary')
-    ? base.color.brand[2]
-    : variant.includes('secondary/destructive')
-    ? base.color.status.destructive.bright
-    : variant.includes('secondary')
-    ? base.color.text.primary
-    : variant.includes('tertiary/inverse')
-    ? base.color.text.inverse.primary
-    : base.color.text.primary,
-});
+}) => {
+  return {
+    width:
+      size === 'small'
+        ? base.icon.size[200]
+        : size === 'medium'
+        ? base.icon.size[250]
+        : base.icon.size[300],
+    fill: variant.includes('primary/inverse')
+      ? base.color.text.primary
+      : variant.includes('primary')
+      ? base.color.brand[2]
+      : variant.includes('secondary/destructive')
+      ? base.color.status.destructive.bright
+      : variant.includes('secondary')
+      ? base.color.text.primary
+      : variant.includes('tertiary/inverse')
+      ? base.color.text.inverse.primary
+      : base.color.text.primary,
+  };
+};
 
@@ -1041,2 +1201,5 @@ export const getButtConStyles = ({
       break;
+    case 'primary/inverse':
+      fill = base.color.text.primary;
+      break;
     case 'primary':
@@ -1043,0 +1206,0 @@ fill = base.color.text.inverse.primary;

src/types/clickable.ts

@@ -56,2 +56,3 @@ import { BodySize } from '@biom3/design-tokens';
   | 'primary/destructive'
+  | 'primary/inverse'
   | 'secondary'
@@ -58,0 +59,0 @@ | 'secondary/destructive'

No alert changes

Improved metrics

Total package byte prevSize

3251555

increased by0.77%

Number of package files

479

increased by0.21%

Lines of code

51366

increased by0.79%

No dependency changes