@vygruppen/spor-react 9.11.3 → 9.12.0

package/src/theme/components/datepicker.ts

@@ -20,6 +20,7 @@ const parts = anatomy("datepicker").parts(
   "dateCell",
   "inputLabel",
   "dateTimeSegment",
+  "cell",
 );
 
 const $arrowBackground = cssVar("popper-arrow-bg");
@@ -57,6 +58,10 @@ const config = helpers.defineMultiStyleConfig({
         "darkGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white",
       )(props),
+      _focus: {
+        ...brandBackground("hover", props),
+        color: "white",
+      },
     },
     calendarTriggerButton: {
       width: 8,
@@ -98,6 +103,22 @@ const config = helpers.defineMultiStyleConfig({
     weekend: {
       ...accentText("default", props),
     },
+    cell: {
+      '&[aria-selected="true"] + [aria-selected="true"] > button': {
+        "&::before": {
+          content: '""',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          left: "-50%",
+          top: 0,
+          bottom: 0,
+          zIndex: -1,
+          ...brandBackground("default", props),
+        },
+      },
+    },
     dateCell: {
       ...ghostBackground("default", props),
       ...baseText("default", props),

package/src/theme/components/info-select.ts

@@ -32,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
       display: "flex",
       appearance: "none",
       width: "100%",
-      height: "54px",
+      height: 8,
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,

package/src/theme/components/input.ts

@@ -18,7 +18,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionDuration: "fast",
       position: "relative",
       paddingX: 3,
-      height: "54px",
+      height: 8,
       fontSize: "mobile.md",
       ...baseBackground("default", props),
 
@@ -58,7 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         cursor: "text",
       },
       "&:not(:placeholder-shown)": {
-        paddingTop: "16px",
+        paddingTop: "1rem",
         "& + label": {
           transform: "scale(0.825) translateY(-10px)",
         },

package/src/theme/components/pressable-card.ts

@@ -2,7 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
-import { accentBackground } from "../utils/accent-utils";
+import { accentBackground, accentText } from "../utils/accent-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
@@ -39,6 +39,7 @@ const config = defineStyleConfig({
       },
     }),
     accent: (props) => ({
+      ...accentText("default", props),
       ...accentBackground("default", props),
       boxShadow: "sm",
       _hover: {

package/src/theme/components/progress-bar.ts

@@ -17,7 +17,10 @@ const config = helpers.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode("coralGreen", "pine")(props), // TODO: Replace with semantic tokens
+      backgroundColor: mode(
+        "brand.surface.default.dark",
+        "brand.surface.default.light",
+      )(props),
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto",

package/src/theme/components/radio-card.ts

@@ -1,11 +1,8 @@
-import {
-  createMultiStyleConfigHelpers,
-  defineStyleConfig,
-} from "@chakra-ui/react";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { outlineBorder } from "../utils/outline-utils";
 
 const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
@@ -14,7 +11,6 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
     container: {
-      appearance: "none",
       border: "none",
       overflow: "hidden",
       fontSize: "inherit",
@@ -57,6 +53,9 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
+        _focus: {
+          ...outlineBorder("focus", props),
+        },
       },
       checked: {
         _hover: {
@@ -66,12 +65,16 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
+        _focus: {
+          outline: "4px solid",
+          outlineStyle: "double",
+          ...outlineBorder("focus", props),
+          outlineOffset: "-1px",
+        },
       },
     }),
     floating: (props) => ({
       container: {
-        ...baseText("default", props),
-        ...baseBackground("default", props),
         ...floatingBackground("default", props),
         ...floatingBorder("default", props),
         boxShadow: "sm",
@@ -84,17 +87,25 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
+        _focus: {
+          ...outlineBorder("focus", props),
+        },
       },
       checked: {
-        cursor: "normal",
-
         _hover: {
           ...floatingBorder("hover", props),
+          boxShadow: "md",
         },
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
+        _focus: {
+          outline: "4px solid",
+          outlineStyle: "double",
+          ...outlineBorder("focus", props),
+          outlineOffset: "-1px",
+        },
       },
     }),
   },

package/src/theme/components/radio.ts

@@ -2,7 +2,7 @@ import { radioAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground } from "../utils/brand-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -41,7 +41,10 @@ const config = helpers.defineMultiStyleConfig({
         ...baseText("disabled", props),
       },
       _checked: {
-        color: mode("pine", "coralGreen")(props),
+        color: mode(
+          "brand.surface.default.light",
+          "brand.surface.default.dark",
+        )(props),
         borderColor: "currentColor",
         _before: {
           content: `""`,

package/src/theme/components/select.ts

@@ -30,17 +30,17 @@ const config = helpers.defineMultiStyleConfig({
     field: {
       ...Input.baseStyle!(props).field,
       appearance: "none",
-      paddingTop: "16px",
+      paddingTop: "1rem",
       "option, optgroup": {},
     },
     icon: {
-      width: "30px",
-      height: "30px",
+      width: 5,
+      height: 5,
       insetEnd: "0.5rem",
       position: "relative",
       color: "currentColor",
       strokeLinecap: "round",
-      fontSize: "1.125rem",
+      fontSize: "sm",
       _disabled: {
         ...baseText("disabled", props),
       },

package/src/theme/components/static-card.ts

@@ -1,7 +1,6 @@
 import { Theme, defineStyleConfig } from "@chakra-ui/react";
 import { colors } from "../foundations";
 import { focusVisibleStyles } from "../utils/focus-utils";
-import { bg } from "../utils/bg-utils";
 import { floatingBackground } from "../utils/floating-utils";
 import { mode } from "@chakra-ui/theme-tools";
 

package/src/theme/components/tabs.ts

@@ -1,6 +1,6 @@
 import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode, type StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { mode } from "@chakra-ui/theme-tools";
 import { accentBackground, accentText } from "../utils/accent-utils";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { brandBackground, brandText } from "../utils/brand-utils";
@@ -88,7 +88,7 @@ const config = helpers.defineMultiStyleConfig({
   sizes: {
     xs: {
       tablist: {
-        height: "30px",
+        height: 5,
         padding: "2px",
       },
       tab: {
@@ -98,7 +98,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     sm: {
       tablist: {
-        height: "36px",
+        height: 6,
         padding: 0.5,
       },
       tab: {
@@ -107,7 +107,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     md: {
       tablist: {
-        height: "42px",
+        height: 7,
         padding: 0.5,
       },
       tab: {
@@ -117,7 +117,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     lg: {
       tablist: {
-        height: "54px",
+        height: 8,
         padding: "4px",
       },
       tab: {
@@ -133,29 +133,3 @@ const config = helpers.defineMultiStyleConfig({
 });
 
 export default config;
-
-const getTabColorSchemeHoverProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "base":
-      return {
-        ...baseBorder("hover", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("hover", props),
-      };
-  }
-};
-
-const getTabColorSchemeActiveProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "base":
-      return {
-        ...baseBackground("active", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("active", props),
-      };
-  }
-};