@fibery/ui-kit 1.40.3 → 1.41.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fibery/ui-kit
 
+## 1.41.0
+
+### Minor Changes
+
+- 6139f68: ThemePalette, design-system restructuring
+
+## 1.40.4
+
+### Patch Changes
+
+- Updated dependencies [16959b0]
+  - @fibery/helpers@1.4.0
+  - @fibery/react@1.4.7
+
 ## 1.40.3
 
 ### Patch Changes

package/eslint.config.mjs

@@ -0,0 +1,16 @@
+import baseConfig from "@fibery/eslint-config";
+
+export default [
+  ...baseConfig,
+  {
+    rules: {
+      "no-restricted-imports": ["error", {patterns: ["@fibery/ui-kit/*"]}],
+    },
+  },
+  {
+    files: ["src/icons/**/*"],
+    rules: {
+      "unicorn/filename-case": "off",
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.40.3",
+  "version": "1.41.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -10,6 +10,7 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-navigation-menu": "1.2.1",
     "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
@@ -19,13 +20,12 @@
     "@types/d3-shape": "^3.1.6",
     "@types/react-select-country-list": "^2.2.3",
     "@types/setimmediate": "^1.0.4",
-    "@types/ua-parser-js": "0.7.36",
     "antd": "4.24.7",
-    "chroma-js": "2.1.2",
-    "chrono-node": "^2.7.5",
+    "chrono-node": "^2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
     "color-hash": "1.0.3",
+    "colorjs.io": "0.6.1",
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",
     "invariant": "2.2.4",
@@ -43,13 +43,12 @@
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-virtuoso": "4.14.1",
+    "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
-    "ua-parser-js": "1.0.39",
     "@fibery/emoji-data": "2.7.1",
-    "@fibery/helpers": "1.3.4",
-    "@fibery/react": "1.4.6"
+    "@fibery/helpers": "1.4.0",
+    "@fibery/react": "1.4.7"
   },
   "peerDependencies": {
     "react": "18.3.1",
@@ -62,7 +61,6 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
-    "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
@@ -84,7 +82,7 @@
     "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.1",
-    "@fibery/eslint-config": "8.6.2"
+    "@fibery/eslint-config": "9.0.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -100,8 +98,7 @@
       "cobertura"
     ],
     "moduleNameMapper": {
-      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js",
-      "createInlineTheme\\.js$": "<rootDir>/src/__mocks__/createInlineTheme.js"
+      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js"
     },
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": [
@@ -132,6 +129,7 @@
     "test:ci": "pnpm run test --reporters=default --reporters=jest-junit",
     "test:coverage": "pnpm run test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
     "lint": "eslint .",
-    "generate-icons": "node scripts/generate-icons.mjs"
+    "generate-icons": "node scripts/generate-icons.mjs",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/a11y-color.test.ts

@@ -0,0 +1,162 @@
+import {a11yColor} from "./a11y-color";
+
+describe("a11yColor", () => {
+  describe("returns original color when", () => {
+    it("color already passes contrast on light background", () => {
+      // Dark blue on white should already pass
+      const result = a11yColor("#000080", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(0,0,128)"`);
+    });
+
+    it("color already passes contrast on dark background", () => {
+      // White on black should already pass
+      const result = a11yColor("#ffffff", "#000000");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
+    });
+
+    it("invalid toMakeA11y color is provided", () => {
+      const result = a11yColor("invalid-color", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"invalid-color"`);
+    });
+
+    it("invalid background color is provided", () => {
+      const result = a11yColor("#ff0000", "invalid-bg");
+      expect(result).toMatchInlineSnapshot(`"#ff0000"`);
+    });
+
+    it("transparent is provided as toMakeA11y", () => {
+      const result = a11yColor("transparent", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"transparent"`);
+    });
+
+    it("transparent is provided as background", () => {
+      const result = a11yColor("#ff0000", "transparent");
+      expect(result).toMatchInlineSnapshot(`"#ff0000"`);
+    });
+  });
+
+  describe("adjusts colors for contrast", () => {
+    it("makes light color darker on white background", () => {
+      // Light yellow on white needs to be darker
+      const result = a11yColor("#ffff00", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(154,154,0)"`);
+    });
+
+    it("makes dark color lighter on black background", () => {
+      // Dark blue on black needs to be lighter
+      const result = a11yColor("#000033", "#000000");
+      expect(result).toMatchInlineSnapshot(`"rgb(49,49,255)"`);
+    });
+
+    it("handles medium colors on light backgrounds", () => {
+      // Medium gray on white
+      const result = a11yColor("#808080", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+    });
+
+    it("handles medium colors on dark backgrounds", () => {
+      // Medium gray on black
+      const result = a11yColor("#808080", "#000000");
+      expect(result).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+    });
+  });
+
+  describe("respects minimum contrast ratio", () => {
+    it("uses default 3.0 contrast ratio", () => {
+      const result = a11yColor("#cccccc", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(148,148,148)"`);
+    });
+
+    it("adjusts for higher contrast ratio (4.5 WCAG AA)", () => {
+      const result = a11yColor("#cccccc", "#ffffff", 4.5);
+      expect(result).toMatchInlineSnapshot(`"rgb(118,118,118)"`);
+    });
+
+    it("adjusts for highest contrast ratio (7.0 WCAG AAA)", () => {
+      const result = a11yColor("#cccccc", "#ffffff", 7.0);
+      expect(result).toMatchInlineSnapshot(`"rgb(89,89,89)"`);
+    });
+  });
+
+  describe("handles various color formats", () => {
+    it("handles 3-digit hex colors", () => {
+      const result = a11yColor("#f00", "#fff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles 6-digit hex colors", () => {
+      const result = a11yColor("#ff0000", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles rgb() colors", () => {
+      const result = a11yColor("rgb(255, 0, 0)", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles named colors", () => {
+      const result = a11yColor("red", "white");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles hsl() colors", () => {
+      const result = a11yColor("hsl(0, 100%, 50%)", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+  });
+
+  describe("real-world use cases", () => {
+    it("brand green on white background", () => {
+      const result = a11yColor("#69AC5E", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(96,164,85)"`);
+    });
+
+    it("brand blue on white background", () => {
+      const result = a11yColor("#4978D4", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(73,120,212)"`);
+    });
+
+    it("light text on dark theme background", () => {
+      const result = a11yColor("#aaaaaa", "#1a1a1a");
+      expect(result).toMatchInlineSnapshot(`"rgb(170,170,170)"`);
+    });
+
+    it("card type colors on white", () => {
+      const cardColors = [
+        "#F0D0DD",
+        "#F5D3CA",
+        "#FAE0B7",
+        "#FCEAA2",
+        "#E3ECAB",
+        "#CFEFC8",
+        "#C1F3DF",
+        "#C1EDF5",
+        "#C1E0F5",
+        "#C7D6F9",
+        "#D8D3F5",
+        "#E8D1EF",
+        "#E6DFDA",
+        "#D2D2D2",
+        "#FFFF8D",
+      ];
+
+      expect(cardColors.map((color) => a11yColor(color, "#ffffff"))).toEqual([
+        "rgb(212,120,158)",
+        "rgb(224,119,91)",
+        "rgb(207,132,14)",
+        "rgb(180,145,6)",
+        "rgb(140,157,36)",
+        "rgb(71,169,49)",
+        "rgb(33,169,115)",
+        "rgb(30,162,186)",
+        "rgb(57,156,223)",
+        "rgb(107,146,239)",
+        "rgb(150,137,228)",
+        "rgb(189,124,209)",
+        "rgb(169,144,127)",
+        "rgb(148,148,148)",
+        "rgb(154,154,0)",
+      ]);
+    });
+  });
+});

package/src/a11y-color.ts

@@ -1,5 +1,5 @@
 // https://github.com/alex-page/a11ycolor
-import chroma from "chroma-js";
+import {fromHSL, getContrastRatio, getHsl, isValidColor, toCss} from "./color-utils";
 
 class LRUCache<TKey, TValue> {
   #capacity: number;
@@ -41,12 +41,7 @@ const checkColor = (colorValue: string) => {
   if (colorValue === "transparent") {
     return false;
   }
-
-  try {
-    return chroma.valid(colorValue);
-  } catch (error) {
-    return false;
-  }
+  return isValidColor(colorValue);
 };
 
 /**
@@ -58,10 +53,10 @@ const checkColor = (colorValue: string) => {
  *
  * @return {string}            - The closest hex color for `toMakeA11y` on `background`
  */
-export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0) {
+export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0): string {
   const key = toMakeA11y + background + minimumContrast;
   if (cache.has(key)) {
-    return cache.get(key);
+    return cache.get(key)!;
   }
   if (!checkColor(toMakeA11y) || !checkColor(background)) {
     cache.put(key, toMakeA11y);
@@ -71,23 +66,21 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
   if (minimumContrast < 0 && minimumContrast > 21) {
     throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
   }
-  const a11y = chroma(toMakeA11y);
-  const bg = chroma(background);
 
   // Check the ratio straight away, if it passes return the value as hex
-  if (chroma.contrast(background, toMakeA11y) >= minimumContrast) {
-    const val = a11y.hex();
+  if (getContrastRatio(background, toMakeA11y) >= minimumContrast) {
+    const val = toCss(toMakeA11y);
     cache.put(key, val);
     return val;
   }
 
   // Ratio didn't pass so we need to find the nearest color
-  const a11yHSL = a11y.hsl();
+  const a11yHSL = getHsl(toMakeA11y);
   const a11yLightness = a11yHSL[2] * 100;
   const minHexDiff = 100 / 255; // 255 Colors / 100% HSL
 
-  const isBlackBgContrast = chroma.contrast(background, "#000") >= minimumContrast;
-  const isWhiteBgContrast = chroma.contrast(background, "#FFF") >= minimumContrast;
+  const isBlackBgContrast = getContrastRatio(background, "#000") >= minimumContrast;
+  const isWhiteBgContrast = getContrastRatio(background, "#FFF") >= minimumContrast;
   let minLightness = 0;
   let maxLightness = 100;
   let isDarkColor = false;
@@ -117,19 +110,19 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
   // Binary search until we find the colour that meets contrast
   while (!foundColor) {
     const midLightness = (minLightness + maxLightness) / 2;
-    const midA11y = chroma.hsl(a11yHSL[0], a11yHSL[1], midLightness / 100);
+    const midA11yHex = fromHSL(a11yHSL[0], a11yHSL[1], midLightness / 100);
 
     // Give up if we are stuck
     if (Math.abs(maxLightness - minLightness) < 0.01) {
-      foundColor = midA11y.hex();
+      foundColor = midA11yHex;
       break;
     }
 
     // The colour meets contrast
-    if (chroma.contrast(midA11y.hex(), bg) >= minimumContrast) {
+    if (getContrastRatio(midA11yHex, background) >= minimumContrast) {
       // It is the minimal lightness range for one hexadecimal
       if (maxLightness - minLightness <= minHexDiff) {
-        foundColor = midA11y.hex();
+        foundColor = midA11yHex;
       } else if (isDarkColor) {
         // If it is going to be a dark color move the min to mid
         minLightness = midLightness;

package/src/actions-menu/actions-menu-item.tsx

@@ -2,7 +2,7 @@ import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
 import {FunctionComponent, memo, ReactNode, useId} from "react";
-import {border, colors, layout, layoutVars, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {border, layout, layoutVars, lineHeight, space, textStyles, themeVars} from "../design-system";
 import CheckedIcon from "../icons/react/Checked";
 import {IconBaseProps} from "../icons/types";
 import {Spinner} from "../loaders";
@@ -12,7 +12,7 @@ import {useTheme} from "../theme-provider";
 import {useIsPhone} from "../use-is-phone";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
-import _ from "lodash";
+import noop from "lodash/noop";
 
 const hiddenTextCss = css`
   visibility: hidden;
@@ -41,7 +41,7 @@ const rowCss = css`
   }
 `;
 
-const dangerousItemCss = css`
+export const dangerousItemCss = css`
   &.${rowCss} {
     &[data-highlighted] {
       color: ${themeVars.danger};
@@ -52,21 +52,21 @@ const dangerousItemCss = css`
   }
 `;
 
-const dangerousConfirmationCss = css`
+export const dangerousConfirmationCss = css`
   &.${rowCss} {
     background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    color: ${colors.inversedTextColor};
+    color: ${themeVars.whiteColor};
     border-radius: ${border.radius6}px;
 
-    --actions-menu-item-icon-color: ${colors.inversedTextColor};
+    --actions-menu-item-icon-color: ${themeVars.whiteColor};
 
     &:hover,
     &[data-highlighted] {
       background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-      color: ${colors.inversedTextColor};
+      color: ${themeVars.whiteColor};
       border-radius: ${border.radius6}px;
 
-      --actions-menu-item-icon-color: ${colors.inversedTextColor};
+      --actions-menu-item-icon-color: ${themeVars.whiteColor};
     }
   }
 `;
@@ -95,7 +95,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string[]; loading
   const theme = useTheme();
   const isPhone = useIsPhone();
 
-  const shortcuts = _.isArray(shortcut) ? shortcut : shortcut ? [shortcut] : null;
+  const shortcuts = Array.isArray(shortcut) ? shortcut : shortcut ? [shortcut] : null;
 
   return loading || shortcuts || checked ? (
     <div className={cornerCss}>
@@ -218,9 +218,6 @@ const ActionsMenuItemComponent: React.FC<
   );
 });
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = ({className, ...props}) => {
   const id = useId();
   const activeDangerousRow = useActiveDangerousRow();

package/src/actions-menu/context-actions-menu.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import noop from "lodash/noop";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
 import * as ContextMenu from "../context-menu";
@@ -12,13 +12,14 @@ import {useState} from "react";
 
 export const ContextActionsMenu = ({
   open,
-  onOpenChange = _.noop,
+  onOpenChange = noop,
   trigger,
   children,
   disabled,
   mobileTitle,
   supportsMobile,
   autoFocusOnClose = true,
+  contentStyles,
 }: ActionsMenuProps): JSX.Element => {
   const isPhone = useIsPhone();
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
@@ -31,6 +32,7 @@ export const ContextActionsMenu = ({
         open={open}
         onOpenChange={onOpenChange}
         mobileTitle={mobileTitle}
+        contentStyles={contentStyles}
         supportsMobile
         // Extra div is important here to not loose the original onClick handler
         trigger={<div>{trigger}</div>}
@@ -48,7 +50,10 @@ export const ContextActionsMenu = ({
           {trigger}
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
-          <ContextMenu.Content onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}>
+          <ContextMenu.Content
+            className={contentStyles}
+            onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
+          >
             <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
           </ContextMenu.Content>
         </ContextMenu.Portal>

package/src/ai/model.tsx

@@ -66,7 +66,6 @@ export const Model = ({initialValue, onChange}: Props) => {
       <Tooltip
         // props
         title={`Model: ${item.name}`}
-        // eslint-disable-next-line
         description={item.desc}
         instant
       >

package/src/ai/temperature.tsx

@@ -60,7 +60,6 @@ export const Temperature = ({initialValue, onChange}: Props) => {
       <Tooltip
         // props
         title={`Click to change`}
-        // eslint-disable-next-line
         description={`Model's temperature: ${temperature.toFixed(
           2
         )}. Temperature controls the degree of randomness in generated output. A lower temperature setting will result in more predictable and less creative outputs while a higher temperature setting will result in more unpredictable and more creative outputs.`}

package/src/animated-height-container.tsx

@@ -1,7 +1,7 @@
 import {useSize} from "@fibery/react/src/use-size";
 import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
 import {duration, transition} from "./design-system";
-import _ from "lodash";
+import noop from "lodash/noop";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
 type AnimatedHeightContainerProps = ComponentProps<"div"> & {
@@ -12,7 +12,7 @@ type AnimatedHeightContainerProps = ComponentProps<"div"> & {
 
 export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeightContainerProps>(
   function AnimatedHeightContainerComponent(
-    {className, noAnimation = false, onTransitionStart = _.noop, onTransitionEnd = _.noop, children, ...otherProps},
+    {className, noAnimation = false, onTransitionStart = noop, onTransitionEnd = noop, children, ...otherProps},
     ref
   ) {
     const measuredContainer = useRef<HTMLDivElement | null>(null);
@@ -46,7 +46,7 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
     // Disable scroll so that overflowed contend won't show on focus
     // https://stackoverflow.com/questions/67694101/overflowed-content-is-showing-on-focus
     useEffect(() => {
-      let cleanup = _.noop;
+      let cleanup = noop;
 
       if (animating && containerRef.current) {
         const element = containerRef.current;

package/src/antd/ant-modal.tsx

@@ -1,9 +1,10 @@
 import Modal from "antd/lib/modal";
 import {ModalProps} from "antd/lib/modal/Modal";
 import "antd/lib/modal/style/css";
-import {border, createInlineTheme, space, themeVars} from "../design-system";
-import {useTheme} from "../theme-provider";
+import {border, space, themeVars} from "../design-system";
+import {ThemeProvider} from "../theme-provider";
 import {css, cx} from "@linaria/core";
+import {ReactNode} from "react";
 
 const modalCss = css`
   & .ant-modal-content {
@@ -19,8 +20,12 @@ const modalCss = css`
   }
 `;
 
+function renderWithTheme(node: ReactNode): ReactNode {
+  return <ThemeProvider portal>{node}</ThemeProvider>;
+}
+
 export function AntModal({bodyStyle = {}, className, ...restProps}: ModalProps) {
-  const theme = useTheme();
-  const inlineTheme = createInlineTheme(theme);
-  return <Modal bodyStyle={{...bodyStyle, ...inlineTheme}} className={cx(className, modalCss)} {...restProps} />;
+  return (
+    <Modal bodyStyle={bodyStyle} className={cx(className, modalCss)} modalRender={renderWithTheme} {...restProps} />
+  );
 }

package/src/antd/index.tsx

@@ -1,4 +1,7 @@
 import {StyledInput, StyledTextArea} from "./input";
+import {InputProps} from "antd/lib/input";
 
 export const AntInput = StyledInput;
 export const AntTextArea = StyledTextArea;
+
+export type AntInputProps = InputProps;

package/src/antd/input.tsx

@@ -4,7 +4,6 @@ import "antd/lib/input/style/css";
 import {css} from "@linaria/core";
 import {mobileRootSelector} from "../mobile-styles";
 import {opacity, textStyles, themeVars} from "../design-system";
-
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 

package/src/antd/styles.ts

@@ -1,18 +1,18 @@
 import {css} from "@linaria/core";
-import {border, colors, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
+import {border, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
 
 const inputVariables = {
   default: {
-    "--input-border": themeVars.inputBorderColor,
-    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40}`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity25}`,
-    "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
+    "--input-border": `${themeVars.inputBorderColor} inset`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity50} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.focus}`,
   },
   error: {
-    "--input-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-focus-shadow": `0 0 0 1px ${themeVars.warning}`,
+    "--input-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.warning}`,
   },
 };
 
@@ -30,7 +30,7 @@ export const inputOverrides = {
     paddingLeft: space.s12,
     paddingRight: space.s12,
     border: 0,
-    borderColor: colors.transparent,
+    borderColor: themeVars.transparent,
     transition: `box-shadow ${transition}`,
     boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
@@ -43,13 +43,13 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}) !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {
     color: `${themeVars.textColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
-    borderColor: colors.transparent,
+    borderColor: themeVars.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
     transition: `box-shadow ${transition}`,
     WebkitTextFillColor: "currentColor",
@@ -69,7 +69,7 @@ export const inputStyles = css`
   ${{
     ...textStyles.regular,
     "& .ant-input-group-addon": {
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
       border: "none",
       padding: 0,
       textAlign: "left",
@@ -93,7 +93,7 @@ export const inputStyles = css`
       padding: 0,
       border: "none",
       boxShadow: "none",
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
     },
     "& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
       border: "none !important",
@@ -118,7 +118,7 @@ export const inputStyles = css`
       paddingBottom: space.s8,
     },
     "& .ant-select-disabled .ant-select-selection": {
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
     },
     "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
       inputOverrides.hover,