@vygruppen/spor-react 12.4.3 → 12.4.5

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

@@ -1,49 +0,0 @@
-import { State, Subset } from "./types";
-
-type GhostBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "selected"
->;
-
-/** 👻👻👻👻👻👻👻👻👻👻👻👻👻👻 */
-export function ghostBackground(state: GhostBackgroundState) {
-  switch (state) {
-    case "hover": {
-      return {
-        backgroundColor: "ghost.surface.hover",
-      };
-    }
-    case "active": {
-      return {
-        backgroundColor: "ghost.surface.active",
-      };
-    }
-    case "selected": {
-      return {
-        backgroundColor: "ghost.surface.selected",
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: "transparent",
-      };
-    }
-  }
-}
-
-type GhostTextState = Subset<State, "default" | "selected">;
-
-export function ghostText(state: GhostTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "ghost.text",
-      };
-    }
-    default: {
-      return {
-        color: "ghost.text",
-      };
-    }
-  }
-}

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

@@ -1,117 +0,0 @@
-import { coreBackground, coreBorder, coreText } from "./core-utils";
-import { floatingBackground, floatingBorder } from "./floating-utils";
-import { surface } from "./surface-utils";
-import { InputState } from "./types";
-
-export function inputVariant(state: InputState) {
-  switch (state) {
-    case "base": {
-      return {
-        ...coreBackground("default"),
-        ...coreBorder("default"),
-        _hover: {
-          ...coreBorder("hover"),
-        },
-        _active: {
-          backgroundColor: "core.surface.active",
-          ...coreBorder("default"),
-        },
-        _selected: {
-          ...coreBackground("selected"),
-          ...coreBorder("selected"),
-        },
-      };
-    }
-    case "floating": {
-      return {
-        boxShadow: "sm",
-        ...floatingBackground("default"),
-        ...floatingBorder("default"),
-
-        _hover: {
-          ...floatingBorder("hover"),
-          ...floatingBackground("hover"),
-        },
-        _active: {
-          ...floatingBorder("active"),
-          backgroundColor: "core.surface.active",
-        },
-        _selected: {
-          backgroundColor: "floating.surface.selected",
-          borderColor: "floating.border.selected",
-        },
-      };
-    }
-
-    default: {
-      return {
-        ...coreBackground("default"),
-        ...coreBorder("default"),
-        _hover: {
-          ...coreBorder("hover"),
-        },
-        _active: {
-          backgroundColor: "core.surface.active",
-          ...coreBorder("default"),
-        },
-        _selected: {
-          ...coreBackground("selected"),
-          ...coreBorder("selected"),
-        },
-      };
-    }
-  }
-}
-
-export const inputBaseStyle = () => ({
-  field: {
-    appearance: "none",
-    width: "100%",
-    outline: "none",
-    border: 0,
-    borderRadius: "sm",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    position: "relative",
-    paddingX: 3,
-    height: 8,
-    fontSize: "mobile.md",
-
-    _disabled: {
-      ...surface("disabled"),
-      ...coreBorder("disabled"),
-      pointerEvents: "none",
-    },
-    _invalid: {
-      ...coreBorder("invalid"),
-      _hover: {
-        ...coreBorder("hover"),
-      },
-    },
-    " + label, + div[data-lastpass-icon-root] + label": {
-      fontSize: ["mobile.sm", "desktop.sm"],
-      top: "2px",
-      left: 3,
-      zIndex: 2,
-      position: "absolute",
-      marginY: 2,
-      transition: ".1s ease-out",
-      transformOrigin: "top left",
-      cursor: "text",
-    },
-    "&:not(:placeholder-shown)": {
-      paddingTop: "1rem",
-      "& + label, & + div[data-lastpass-icon-root] + label": {
-        transform: "scale(0.825) translateY(-10px)",
-      },
-    },
-  },
-  element: {
-    height: "100%",
-  },
-  group: {
-    ":has(:disabled)": {
-      ...coreText("disabled"),
-    },
-  },
-});

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

@@ -1,22 +0,0 @@
-import { State, Subset } from "./types";
-
-type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
-export function outlineBorder(state: OutlineBorderState) {
-  switch (state) {
-    case "error": {
-      return {
-        outlineColor: "outline.error",
-      };
-    }
-    case "focus": {
-      return {
-        outlineColor: "outline.focus",
-      };
-    }
-    default: {
-      return {
-        outlineColor: "outline",
-      };
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-/** All the styles you need to hide something visually, while still making it available for screen readers */
-export const srOnly = {
-  border: "0 !important",
-  clip: "rect(1px, 1px, 1px, 1px) !important",
-  clipPath: "inset(50%) !important",
-  height: "1px !important",
-  margin: "-1px !important",
-  overflow: "hidden !important",
-  padding: "0 !important",
-  position: "absolute !important",
-  width: "1px !important",
-  whiteSpace: "nowrap !important",
-};

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

@@ -1,25 +0,0 @@
-type Surface = "default" | "secondary" | "tertiary" | "disabled";
-export const surface = (surface: Surface) => {
-  switch (surface) {
-    case "default": {
-      return {
-        backgroundColor: "surface",
-      };
-    }
-    case "secondary": {
-      return {
-        backgroundColor: "surface.secondary",
-      };
-    }
-    case "tertiary": {
-      return {
-        backgroundColor: "surface.tertiary",
-      };
-    }
-    case "disabled": {
-      return {
-        backgroundColor: "surface.disabled",
-      };
-    }
-  }
-};