@vygruppen/spor-react 13.1.0 → 13.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.1.0",
+  "version": "13.1.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,9 +47,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.0",
-    "@vygruppen/spor-icon-react": "5.0.0",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-design-tokens": "5.0.1",
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "5.0.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/Menu.tsx

@@ -74,7 +74,8 @@ export const MenuContent = ({
 
 export type MenuTriggerProps = {
   icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+  withChevron?: boolean;
+} & Omit<ButtonProps, "rightIcon" | "leftIcon"> & {
     ref?: Ref<HTMLButtonElement>;
   };
 
@@ -83,6 +84,7 @@ export const MenuTrigger = ({
   size,
   children,
   ref,
+  withChevron = true,
   ...props
 }: MenuTriggerProps) => {
   const { variant } = useMenuContext();
@@ -104,10 +106,12 @@ export const MenuTrigger = ({
         size={size}
         {...props}
         rightIcon={
-          <ChevronIcon
-            transform={open ? "rotate(180deg)" : undefined}
-            transition="transform 0.3s"
-          />
+          withChevron && (
+            <ChevronIcon
+              transform={open ? "rotate(180deg)" : undefined}
+              transition="transform 0.3s"
+            />
+          )
         }
       >
         {children}

package/src/input/PasswordInput.tsx

@@ -16,8 +16,7 @@ export interface PasswordVisibilityProps {
 }
 
 export interface PasswordInputProps
-  extends InputProps,
-    PasswordVisibilityProps {
+  extends InputProps, PasswordVisibilityProps {
   rootProps?: InputProps;
 }
 

package/src/theme/recipes/badge.ts

@@ -25,7 +25,7 @@ export const badgeRecipie = defineRecipe({
         },
       },
       green: {
-        backgroundColor: "surface.subtle",
+        backgroundColor: "surface.success",
         color: "text.success",
         "& svg": {
           color: "icon.success",
@@ -108,10 +108,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: "badge.blue.surface.inverted",
-        color: "badge.blue.text.inverted",
+        backgroundColor: {
+          _light: "darkBlue",
+          _dark: "lightBlue",
+        },
+        color: {
+          _light: "icyBlue",
+          _dark: "royal",
+        },
         "& svg": {
-          color: "badge.blue.icon.inverted",
+          color: {
+            _light: "royal",
+            _dark: "icyBlue",
+          },
         },
       },
     },
@@ -119,10 +128,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: "badge.green.surface.inverted",
-        color: "badge.green.text.inverted",
+        backgroundColor: {
+          _light: "darkTeal",
+          _dark: "seaMist",
+        },
+        color: {
+          _light: "mint",
+          _dark: "jungle",
+        },
         "& svg": {
-          color: "badge.green.icon.inverted",
+          color: {
+            _light: "mint",
+            _dark: "jungle",
+          },
         },
       },
     },
@@ -130,10 +148,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: "badge.grey.surface.inverted",
-        color: "badge.grey.text.inverted",
+        backgroundColor: {
+          _light: "carbon",
+          _dark: "platinum",
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey",
+        },
         "& svg": {
-          color: "badge.grey.icon.inverted",
+          color: {
+            _light: "white",
+            _dark: "darkGrey",
+          },
         },
       },
     },
@@ -142,10 +169,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: "badge.cream.surface.inverted",
-        color: "badge.cream.text.inverted",
+        backgroundColor: {
+          _light: "coffee",
+          _dark: "blonde",
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee",
+        },
         "& svg": {
-          color: "badge.cream.icon.inverted",
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee",
+          },
         },
       },
     },
@@ -153,10 +189,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: "badge.yellow.surface.inverted",
-        color: "badge.yellow.text.inverted",
+        backgroundColor: {
+          _light: "bronze",
+          _dark: "banana",
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee",
+        },
         "& svg": {
-          color: "badge.yellow.icon.inverted",
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee",
+          },
         },
       },
     },
@@ -164,10 +209,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: "badge.orange.surface.inverted",
-        color: "badge.orange.text.inverted",
+        backgroundColor: {
+          _light: "wood",
+          _dark: "champagne",
+        },
+        color: {
+          _light: "bisque",
+          _dark: "wood",
+        },
         "& svg": {
-          color: "badge.orange.icon.inverted",
+          color: {
+            _light: "bisque",
+            _dark: "wood",
+          },
         },
       },
     },
@@ -175,10 +229,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: "badge.red.surface.inverted",
-        color: "badge.red.text.inverted",
+        backgroundColor: {
+          _light: "burgundy",
+          _dark: "lightRed",
+        },
+        color: {
+          _light: "pink",
+          _dark: "maroon",
+        },
         "& svg": {
-          color: "badge.red.icon.inverted",
+          color: {
+            _light: "pink",
+            _dark: "maroon",
+          },
         },
       },
     },
@@ -187,10 +250,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: "badge.surface.inverted",
-        color: "badge.text.inverted",
+        backgroundColor: {
+          _light: "ink",
+          _dark: "white",
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey",
+        },
         "& svg": {
-          color: "badge.icon.inverted",
+          color: {
+            _light: "white",
+            _dark: "darkGrey",
+          },
         },
       },
     },

package/src/toast/toast.tsx

@@ -45,7 +45,13 @@ export const Toaster = () => {
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
         {(toast) => (
-          <Toast.Root width={{ md: toast.meta?.width }} role="alert">
+          <Toast.Root
+            width={{ md: toast.meta?.width }}
+            border="sm"
+            borderColor={`outline.${toast.type}`}
+            boxShadow="sm"
+            role="alert"
+          >
             <AlertIcon variant={toast.type as Variant} />
             <Stack gap="1" flex="1" maxWidth="100%">
               <Toast.Description>{toast.description}</Toast.Description>