uikit-react-public 0.50.0 → 0.50.1

package/lib/components/Button/style/buttonSecondaryDestructiveStyle.ts

@@ -9,7 +9,7 @@ const buttonSecondaryDestructiveStyle = (
   loading: ButtonBaseProps['loading']
 ) => {
   const {
-    colour: { border, fill, text },
+    colour: { border, fill, icon, text },
   } = theme;
 
   const textColour = text.critical;
@@ -20,35 +20,41 @@ const buttonSecondaryDestructiveStyle = (
   const activeFillColour = fill.criticalPressed;
 
   const baseStyle = css`
-    background-color: ${theme.colour.fill.inverse};
+    --ucl-uikit-button-icon-colour: ${icon.critical};
+    background-color: transparent;
     color: ${textColour};
-    border-color: ${borderColour};
+    outline: ${theme.border.b1} solid ${borderColour};
+    outline-offset: -${theme.border.b1};
   `;
 
   const selectedStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.inverse};
     background-color: ${fill.criticalSelected};
     color: ${text.inverse};
-    border-color: transparent;
+    outline-color: transparent;
   `;
 
   const interactiveStyle = css`
     cursor: pointer;
 
     &:hover {
+      --ucl-uikit-button-icon-colour: ${icon.inverse};
       background-color: ${hoverFillColour};
-      border-color: ${hoverFillColour};
+      outline-color: transparent;
       color: ${hoverTextColour};
     }
 
     &:active {
+      --ucl-uikit-button-icon-colour: ${icon.inverse};
       background-color: ${activeFillColour};
       color: ${activeTextColour};
-      border-color: ${activeFillColour};
+      outline-color: transparent;
     }
   `;
 
   const disabledStyle = css`
-    border-color: ${theme.colour.border.disabled};
+    --ucl-uikit-button-icon-colour: ${icon.disabled};
+    outline-color: ${theme.colour.border.disabled};
     color: ${theme.colour.text.disabled};
   `;
 

package/lib/components/Button/style/buttonSecondaryStyle.ts

@@ -6,49 +6,82 @@ const buttonSecondaryStyle = (
   theme: ThemeType,
   selected: ButtonBaseProps['selected'],
   disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading']
+  loading: ButtonBaseProps['loading'],
+  onLight: ButtonBaseProps['onLight']
 ) => {
   const {
-    colour: { border, fill, text },
+    colour: { border, fill, icon, text },
   } = theme;
 
-  const textColour = text.brand;
-  const borderColour = border.brand;
-  const hoverTextColour = text.inverse;
-  const hoverFillColour = fill.brandHover;
-  const activeTextColour = text.inverse;
-  const activeFillColour = fill.brandPressed;
+  const textColour = onLight ? text.brand : text.brandInverse;
+  const borderColour = onLight ? border.brand : border.brandInverse;
+  const iconColour = onLight ? icon.brand : icon.brandInverse;
+  const hoverTextColour = onLight
+    ? text.inverse
+    : text.brandInverseSecondaryHover;
+  const hoverFillColour = onLight ? fill.brandHover : 'transparent';
+  const hoverBorderColour = onLight
+    ? 'transparent'
+    : border.brandInverseSecondaryHover;
+  const activeTextColour = onLight
+    ? text.inverse
+    : text.brandInverseSecondarySelected;
+  const activeFillColour = onLight ? fill.brandPressed : 'transparent';
+  const activeBorderColour = onLight
+    ? 'transparent'
+    : border.brandInverseSecondarySelected;
 
   const baseStyle = css`
-    background-color: ${theme.colour.fill.inverse};
+    --ucl-uikit-button-icon-colour: ${iconColour};
+    background-color: transparent;
     color: ${textColour};
-    border-color: ${borderColour};
+    outline: ${theme.border.b2} solid ${borderColour};
+    outline-offset: -${theme.border.b2};
   `;
 
   const selectedStyle = css`
-    background-color: ${theme.colour.fill.brandSubtleSelected};
-    border-color: ${borderColour};
+    --ucl-uikit-button-icon-colour: ${
+      onLight ? icon.brandSelectedOnBgFill : icon.brandInverseSecondarySelected
+    };
+    background-color: ${onLight ? fill.brandSubtleSelected : 'transparent'};
+    color: ${onLight ? text.brandHover : text.brandInverseSecondarySelected};
+    outline-color: ${
+      onLight ? border.brand : border.brandInverseSecondarySelected
+    };
   `;
 
   const interactiveStyle = css`
     cursor: pointer;
 
     &:hover {
+      --ucl-uikit-button-icon-colour: ${
+        onLight ? icon.inverse : icon.brandInverseSecondaryHover
+      };
       background-color: ${hoverFillColour};
-      border-color: ${hoverFillColour};
+      outline-color: ${hoverBorderColour};
       color: ${hoverTextColour};
     }
 
     &:active {
+      --ucl-uikit-button-icon-colour: ${
+        onLight ? icon.inverse : icon.brandInverseSecondarySelected
+      };
       background-color: ${activeFillColour};
       color: ${activeTextColour};
-      border-color: ${activeFillColour};
+      outline-color: ${activeBorderColour};
     }
   `;
 
   const disabledStyle = css`
-    border-color: ${theme.colour.border.disabled};
-    color: ${theme.colour.text.disabled};
+    --ucl-uikit-button-icon-colour: ${
+      onLight ? icon.disabled : icon.inverseDisabled
+    };
+    outline-color: ${
+      onLight ? theme.colour.border.disabled : theme.colour.icon.inverseDisabled
+    };
+    color: ${
+      onLight ? theme.colour.text.disabled : theme.colour.link.inverseDisabled
+    };
   `;
 
   return cx(

package/lib/components/Button/style/buttonSecondarySubtleStyle.ts

@@ -6,15 +6,14 @@ const buttonSecondarySubtleStyle = (
   theme: ThemeType,
   selected: ButtonBaseProps['selected'],
   disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading'],
-  paddingPx: number
+  loading: ButtonBaseProps['loading']
 ) => {
   const {
-    colour: { border, fill, text },
+    colour: { border, fill, icon, text },
   } = theme;
 
   const textColour = text.brand;
-  const borderColour = border.subtle;
+  const borderColour = border.brandSubtle;
   const hoverTextColour = text.brandHover;
   const hoverFillColour = fill.brandSubtleHover;
   const hoverBorderColour = border.brandSubtle;
@@ -25,18 +24,18 @@ const buttonSecondarySubtleStyle = (
   const selectedBorderColour = border.brand;
   const selectedTextColour = text.brandHover;
 
-  const adjustedPaddingPx = paddingPx + 1;
-
   const baseStyle = css`
-    background-color: ${theme.colour.fill.inverse};
+    --ucl-uikit-button-icon-colour: ${icon.brand};
+    background-color: transparent;
     color: ${textColour};
-    border: ${theme.border.b1} solid ${borderColour};
-    padding: 0 ${adjustedPaddingPx}px;
+    outline: ${theme.border.b1} solid ${borderColour};
+    outline-offset: -${theme.border.b1};
   `;
 
   const selectedStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.brandSelectedOnBgFill};
     background-color: ${selectedFillColour};
-    border-color: ${selectedBorderColour};
+    outline-color: ${selectedBorderColour};
     color: ${selectedTextColour};
   `;
 
@@ -44,20 +43,23 @@ const buttonSecondarySubtleStyle = (
     cursor: pointer;
 
     &:hover {
+      --ucl-uikit-button-icon-colour: ${icon.brandHover};
       background-color: ${hoverFillColour};
-      border-color: ${hoverBorderColour};
+      outline-color: ${hoverBorderColour};
       color: ${hoverTextColour};
     }
 
     &:active {
+      --ucl-uikit-button-icon-colour: ${icon.brandPressed};
       background-color: ${activeFillColour};
       color: ${activeTextColour};
-      border-color: ${activeBorderColour};
+      outline-color: ${activeBorderColour};
     }
   `;
 
   const disabledStyle = css`
-    border-color: ${border.disabled};
+    --ucl-uikit-button-icon-colour: ${icon.disabled};
+    outline-color: ${border.disabled};
     color: ${text.disabled};
   `;
 

package/lib/components/Button/style/buttonTertiaryDestructiveNoPaddingStyle.ts

@@ -0,0 +1,34 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonTertiaryDestructiveNoPaddingStyle = (
+  theme: ThemeType,
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.critical};
+    background-color: transparent;
+    color: ${theme.colour.text.critical};
+    height: fit-content;
+    padding: 0;
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+  `;
+
+  const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabled};
+    color: ${theme.colour.text.disabled};
+  `;
+
+  return cx(
+    baseStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonTertiaryDestructiveNoPaddingStyle;

package/lib/components/Button/style/buttonTertiaryDestructiveStyle.ts

@@ -6,11 +6,10 @@ const buttonTertiaryDestructiveStyle = (
   theme: ThemeType,
   selected: ButtonBaseProps['selected'],
   disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading'],
-  paddingPx: number
+  loading: ButtonBaseProps['loading']
 ) => {
   const {
-    colour: { fill, text },
+    colour: { fill, icon, text },
   } = theme;
 
   const textColour = text.critical;
@@ -21,16 +20,14 @@ const buttonTertiaryDestructiveStyle = (
   const selectedTextColour = text.inverse;
   const selectedFillColour = fill.criticalSelected;
 
-  const adjustedPaddingPx = disabled ? paddingPx + 1 : paddingPx + 2;
-
   const baseStyle = css`
-    border: none;
+    --ucl-uikit-button-icon-colour: ${icon.critical};
     background-color: transparent;
     color: ${textColour};
-    padding: 0 ${adjustedPaddingPx}px;
   `;
 
   const selectedStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.inverse};
     color: ${selectedTextColour};
     background-color: ${selectedFillColour};
   `;
@@ -39,18 +36,22 @@ const buttonTertiaryDestructiveStyle = (
     cursor: pointer;
 
     &:hover {
+      --ucl-uikit-button-icon-colour: ${icon.inverse};
       color: ${hoverTextColour};
       background-color: ${hoverFillColour};
     }
 
     &:active {
+      --ucl-uikit-button-icon-colour: ${icon.inverse};
       background-color: ${activeFillColour};
       color: ${activeTextColour};
     }
   `;
 
   const disabledStyle = css`
-    border: 1px solid ${theme.colour.border.disabled};
+    --ucl-uikit-button-icon-colour: ${icon.disabled};
+    outline: ${theme.border.b1} solid ${theme.colour.border.disabled};
+    outline-offset: -${theme.border.b1};
     color: ${theme.colour.text.disabled};
   `;
 

package/lib/components/Button/style/buttonTertiaryNoPaddingStyle.ts

@@ -6,40 +6,38 @@ const buttonTertiaryNoPaddingStyle = (
   theme: ThemeType,
   disabled: ButtonBaseProps['disabled'],
   loading: ButtonBaseProps['loading'],
-  paddingPx: number
+  onLight: ButtonBaseProps['onLight']
 ) => {
   const {
-    colour: { text },
+    colour: { icon, text },
   } = theme;
 
-  const textColour = text.brand;
-  const hoverTextColour = text.brandHover;
-  const activeTextColour = text.brandHover;
-
-  const adjustedPaddingPx = paddingPx + 2;
+  const textColour = onLight ? text.brand : text.brandInverse;
+  const iconColour = onLight ? icon.brand : icon.brandInverse;
 
   const tertiaryBaseStyle = css`
-    border: none;
+    --ucl-uikit-button-icon-colour: ${iconColour};
     background-color: transparent;
     color: ${textColour};
     height: fit-content;
-    padding: 0 ${adjustedPaddingPx}px;
+    padding: 0;
   `;
 
   const interactiveStyle = css`
     cursor: pointer;
 
     &:hover {
-      color: ${hoverTextColour};
-    }
-
-    &:active {
-      color: ${activeTextColour};
+      text-decoration: ${onLight ? 'none' : 'underline'};
     }
   `;
 
   const disabledStyle = css`
-    color: ${theme.colour.text.disabled};
+    --ucl-uikit-button-icon-colour: ${
+      onLight ? icon.disabled : icon.inverseDisabled
+    };
+    color: ${
+      onLight ? theme.colour.text.disabled : theme.colour.link.inverseDisabled
+    };
   `;
 
   return cx(

package/lib/components/Button/style/buttonTertiaryStyle.ts

@@ -6,48 +6,49 @@ const buttonTertiaryStyle = (
   theme: ThemeType,
   selected: ButtonBaseProps['selected'],
   disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading'],
-  paddingPx: number
+  loading: ButtonBaseProps['loading']
 ) => {
   const {
-    colour: { fill, text },
+    colour: { fill, icon, text },
   } = theme;
 
   const textColour = text.brand;
-  const hoverTextColour = textColour;
+  const hoverTextColour = text.brandHover;
   const hoverFillColour = fill.brandSubtleHover;
-  const activeTextColour = textColour;
+  const activeTextColour = text.brandPressed;
   const activeFillColour = fill.brandSubtleHover;
   const selectedFillColour = fill.brandSubtleHover;
 
-  const adjustedPaddingPx = paddingPx;
-
   const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.brand};
     background-color: transparent;
     color: ${textColour};
-    padding: 0 ${adjustedPaddingPx}px;
   `;
 
   const selectedStyle = css`
-    border-color: transparent;
+    --ucl-uikit-button-icon-colour: ${icon.brandSelectedOnBgFill};
     background-color: ${selectedFillColour};
+    color: ${text.brandHover};
   `;
 
   const interactiveStyle = css`
     cursor: pointer;
 
     &:hover {
+      --ucl-uikit-button-icon-colour: ${icon.brandHover};
       color: ${hoverTextColour};
       background-color: ${hoverFillColour};
     }
 
     &:active {
+      --ucl-uikit-button-icon-colour: ${icon.brandPressed};
       background-color: ${activeFillColour};
       color: ${activeTextColour};
     }
   `;
 
   const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.disabled};
     color: ${theme.colour.text.disabled};
   `;
 

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -105,7 +105,7 @@ exports[`Cell > Snapshot: variants 1`] = `
         >
           <button
             aria-disabled="false"
-            class="ucl-uikit-button css-1o7ytg2"
+            class="ucl-uikit-button css-4ha6qi"
             data-testid="ucl-uikit-button"
           >
             Button

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.0",
+  "version": "0.50.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",