@vygruppen/spor-react 8.2.1 → 9.0.0

package/src/theme/utils/border-utils.ts

@@ -1,176 +0,0 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "./box-shadow-utils";
-import { State, Subset } from "./types";
-
-type BorderState = Subset<
-  State,
-  "hover" | "focus" | "disabled" | "selected" | "invalid" | "default"
->;
-
-export function baseBorder(state: BorderState, props: StyleFunctionProps) {
-  switch (state) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "focus": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      };
-    }
-    case "disabled": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("platinum", "whiteAlpha.400")(props),
-        }),
-      };
-    }
-    case "selected":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-        }),
-      };
-    case "invalid": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
-      };
-    }
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-        }),
-      };
-  }
-}
-
-type FloatingBorderState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-export function floatingBorder(
-  state: FloatingBorderState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.300", "white")(props),
-        }),
-      };
-    case "selected":
-    case "focus":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "active":
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.200", "whiteAlpha.400")(props),
-          baseShadow: "sm",
-        }),
-      };
-  }
-}
-
-type AccentBorderState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-export function accentBorder(
-  state: AccentBorderState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "selected":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("primaryGreen", "coralGreen")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "active":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("mint", "darkTeal")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("coralGreen", "greenHaze")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "focus":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("seaMist", "pine")(props),
-          borderWidth: 2,
-        }),
-      };
-  }
-}
-
-type BrandBorderState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-
-export function brandBorder(
-  state: BrandBorderState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "selected":
-    case "active":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "seaMist")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkTeal", "blueGreen")(props),
-          borderWidth: 2,
-        }),
-      };
-    case "focus":
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("pine", "coralGreen")(props),
-          borderWidth: 2,
-        }),
-      };
-  }
-}

package/src/theme/utils/box-shadow-utils.ts

@@ -1,44 +0,0 @@
-import { colors, ColorsType } from "../foundations/colors";
-import { shadows } from "../foundations/shadows";
-
-type GetBoxShadowStringArgs = {
-  baseShadow?: keyof typeof shadows;
-  borderColor?: keyof typeof colors | string;
-  borderWidth?: number;
-  isInset?: boolean;
-};
-/**
- * A utility for creating box shadow strings
- */
-export const getBoxShadowString = (
-  args: GetBoxShadowStringArgs | GetBoxShadowStringArgs[],
-): string => {
-  if (Array.isArray(args)) {
-    return args.map((arg) => getBoxShadowString(arg)).join(", ");
-  }
-
-  const { baseShadow, borderColor, borderWidth = 1, isInset = true } = args;
-  const allShadows: string[] = [];
-
-  if (borderColor) {
-    let color = borderColor;
-    if (borderColor in colors) {
-      color = colors[borderColor as keyof typeof colors] as string;
-    } else {
-      const [subgroup, value] = borderColor.split(".");
-      const subgroupValue = (colors[subgroup as keyof ColorsType] as any)?.[
-        value
-      ];
-      if (subgroupValue) {
-        color = subgroupValue;
-      }
-    }
-    allShadows.push(
-      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color}`,
-    );
-  }
-  if (baseShadow) {
-    allShadows.push(shadows[baseShadow]);
-  }
-  return allShadows.join(", ");
-};

package/src/theme/utils/text-utils.ts

@@ -1,60 +0,0 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { State, Subset } from "./types";
-import { colors } from "../foundations";
-
-type BaseTextState = Subset<State, "default" | "selected" | "disabled">;
-export function baseText(state: BaseTextState, props: StyleFunctionProps) {
-  switch (state) {
-    case "selected":
-      return {
-        color: mode("white", "darkTeal")(props),
-      };
-    case "disabled":
-      return {
-        color: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`,
-        )(props),
-      };
-    default:
-      return {
-        color: mode("darkGrey", "white")(props),
-      };
-  }
-}
-
-type AccentTextState = Subset<State, "default" | "selected">;
-
-export function accentText(state: AccentTextState, props: StyleFunctionProps) {
-  switch (state) {
-    case "selected":
-      return {
-        color: mode("white", "darkTeal")(props),
-      };
-    case "default":
-    default:
-      return {
-        color: mode("darkTeal", "seaMist")(props),
-      };
-  }
-}
-
-type BrandTextState = Subset<State, "hover" | "active" | "default">;
-
-export function brandText(state: BrandTextState, props: StyleFunctionProps) {
-  switch (state) {
-    case "hover":
-      return {
-        color: mode("white", "darkTeal")(props),
-      };
-    case "active":
-      return {
-        color: mode("white", "darkTeal")(props),
-      };
-    case "default":
-    default:
-      return {
-        color: mode("pine", "coralGreen")(props),
-      };
-  }
-}