@vygruppen/spor-react 9.11.2 → 9.11.4

package/src/theme/components/button.ts

@@ -93,26 +93,26 @@ const config = defineStyleConfig({
     lg: {
       minHeight: 8,
       minWidth: 8,
-      fontSize: "18px",
+      fontSize: "sm",
       fontWeight: "bold",
     },
     md: {
       minHeight: 7,
       minWidth: 7,
-      fontSize: "18px",
+      fontSize: "sm",
       fontWeight: "bold",
     },
     sm: {
       minHeight: 6,
       minWidth: 6,
-      fontSize: "16px",
+      fontSize: "xs",
       fontWeight: "normal",
     },
     xs: {
       minHeight: 5,
       minWidth: 5,
       paddingY: 0.5,
-      fontSize: "16px",
+      fontSize: "xs",
       fontWeight: "normal",
     },
   },

package/src/theme/components/choice-chip.ts

@@ -15,9 +15,10 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       display: "inline-flex",
       alignItems: "center",
-      fontSize: "16px",
+      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
+      borderRadius: "xl",
       transitionDuration: "fast",
       _checked: {
         outlineColor: "transparent",
@@ -117,42 +118,38 @@ const config = helpers.defineMultiStyleConfig({
   sizes: {
     xs: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "9px",
+          borderRadius: "0.563rem",
         },
-        height: "30px",
+        height: 5,
         paddingX: 1.5,
       },
     },
     sm: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "12px",
+          borderRadius: "sm",
         },
-        height: "36px",
+        height: 6,
         paddingX: 2,
       },
     },
     md: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "12px",
+          borderRadius: "sm",
         },
-        height: "42px",
+        height: 7,
         paddingX: 2,
       },
     },
     lg: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "18px",
+          borderRadius: "md",
         },
-        height: "54px",
-        px: 3,
+        height: 8,
+        paddingX: 3,
       },
     },
   },

package/src/theme/components/close-button.ts

@@ -1,6 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { cssVar, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
 
 const $size = cssVar("close-button-size");
 
@@ -16,27 +17,27 @@ const config = defineStyleConfig({
     fontWeight: "normal",
     ...focusVisibleStyles(props),
     _hover: {
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      ...ghostBackground("hover", props),
       _disabled: {
         color: "dimGrey",
       },
     },
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      ...ghostBackground("active", props),
     },
   }),
   sizes: {
     lg: {
       [$size.variable]: "40px",
-      fontSize: "16px",
+      fontSize: "xs",
     },
     md: {
       [$size.variable]: "32px",
-      fontSize: "12px",
+      fontSize: "0.75rem",
     },
     sm: {
       [$size.variable]: "24px",
-      fontSize: "10px",
+      fontSize: "0.625rem",
     },
   },
   defaultProps: {

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.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),
-      };
-  }
-};