@vygruppen/spor-react 13.5.0 → 13.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.5.0",
+  "version": "13.7.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.6",
-    "@vygruppen/spor-icon-react": "5.0.2",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-design-tokens": "5.1.1",
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "5.0.2"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/Autocomplete.tsx

@@ -50,6 +50,7 @@ export function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }: Props) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -114,6 +115,7 @@ export function Autocomplete({
               if (openOnFocus && filteredChildren.length > 0)
                 combobox.setOpen(true);
             }}
+            size={size}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>

package/src/link/TextLink.tsx

@@ -7,6 +7,7 @@ import {
 import {
   LinkOutOutline18Icon,
   LinkOutOutline24Icon,
+  LinkOutOutline30Icon,
 } from "@vygruppen/spor-icon-react";
 import React, {
   cloneElement,
@@ -39,17 +40,32 @@ const ExternalIcon = ({
 }: {
   label: string;
   size: LinkProps["size"];
-}) => (
-  <>
-    {size === "lg" || size === "md" ? (
-      <LinkOutOutline24Icon aria-hidden display="inline" />
-    ) : (
-      <LinkOutOutline18Icon aria-hidden display="inline" />
-    )}
-    {/* Visually hidden text for screen readers */}
-    <VisuallyHidden>{label}</VisuallyHidden>
-  </>
-);
+}) => {
+  const getIcon = () => {
+    switch (size) {
+      case "lg": {
+        return <LinkOutOutline30Icon aria-hidden display="inline" />;
+      }
+      case "md": {
+        return <LinkOutOutline24Icon aria-hidden display="inline" />;
+      }
+      case "sm": {
+        return <LinkOutOutline18Icon aria-hidden display="inline" />;
+      }
+      default: {
+        return <LinkOutOutline24Icon aria-hidden display="inline" />;
+      }
+    }
+  };
+  return (
+    <span style={{ whiteSpace: "nowrap" }}>
+      {"\u2060"}
+      {getIcon()}
+      {/* Visually hidden text for screen readers */}
+      <VisuallyHidden>{label}</VisuallyHidden>
+    </span>
+  );
+};
 
 export const TextLink = ({
   ref,

package/src/theme/brand.ts

@@ -1,6 +1,11 @@
 export enum Brand {
   VyDigital = "VyDigital",
+  /**
+   * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+   * future major version. Use {@link Brand.VyTeknologi} instead.
+   */
   VyUtvikling = "VyUtvikling",
+  VyTeknologi = "VyTeknologi",
   CargoNet = "CargoNet",
 }
 

package/src/theme/index.ts

@@ -48,6 +48,10 @@ export const themes = {
     defaultBaseConfig,
     generateTheme(Brand.VyUtvikling),
   ),
+  [Brand.VyTeknologi]: createSystem(
+    defaultBaseConfig,
+    generateTheme(Brand.VyTeknologi),
+  ),
 };
 
 export const system = themes[Brand.VyDigital];

package/src/theme/recipes/input.ts

@@ -56,6 +56,10 @@ export const inputRecipe = defineRecipe({
           outline: "2px solid",
           outlineColor: "outline.focus",
         },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)",
+        },
       },
       floating: {
         boxShadow: "sm",
@@ -72,11 +76,14 @@ export const inputRecipe = defineRecipe({
           outlineColor: "outline.neutral",
           backgroundColor: "surface.floating.active",
         },
-
         focus: {
           outline: "1px solid",
           outlineColor: "outline.focus",
         },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)",
+        },
       },
     },
     size: {

package/src/theme/recipes/separator.ts

@@ -12,13 +12,14 @@ export const separatorRecipe = defineRecipe({
         borderStyle: "solid",
       },
       dashed: {
+        "--dash-color": "var(--spor-colors-outline)",
         borderImageSlice: 1,
         borderImageSource: `repeating-linear-gradient(
             var(--gradient-direction),
-            var(--spor-colors-outline-disabled) 0,
-            var(--spor-colors-outline-disabled) var(--dash-size),
+            var(--dash-color) 0,
+            var(--dash-color) var(--dash-size),
             transparent var(--dash-size),
-            transparent calc(var(--dash-size) + var(--dash-gap))
+            transparent calc(var(--dash-size) + var(--dash-gap))         
           )`,
       },
     },

package/src/theme/semantic-tokens/colors.ts

@@ -3,7 +3,12 @@ import tokens from "@vygruppen/spor-design-tokens/raw-tokens";
 
 export enum Brand {
   VyDigital = "VyDigital",
+  /**
+   * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+   * future major version. Use {@link Brand.VyTeknologi} instead.
+   */
   VyUtvikling = "VyUtvikling",
+  VyTeknologi = "VyTeknologi",
   CargoNet = "CargoNet",
 }
 
@@ -11,10 +16,18 @@ export const vyDigitalColors = defineSemanticTokens.colors({
   ...tokens.color["vy-digital"].color.vyDigital,
 });
 
+/**
+ * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+ * future major version. Use {@link vyTeknologiColors} instead.
+ */
 export const vyUtviklingColors = defineSemanticTokens.colors({
   ...tokens.color["vy-utvikling"].color.vyUtvikling,
 });
 
+export const vyTeknologiColors = defineSemanticTokens.colors({
+  ...tokens.color["vy-teknologi"].color.vyTeknologi,
+});
+
 export const cargonetColors = defineSemanticTokens.colors({
   ...tokens.color["cargonet"].color.cargonet,
 });

package/src/theme/semantic-tokens/index.ts

@@ -1,5 +1,10 @@
 import { Brand } from "../brand";
-import { cargonetColors, vyDigitalColors, vyUtviklingColors } from "./colors";
+import {
+  cargonetColors,
+  vyDigitalColors,
+  vyTeknologiColors,
+  vyUtviklingColors,
+} from "./colors";
 import { radii } from "./radii";
 import { shadows } from "./shadows";
 
@@ -13,6 +18,10 @@ export const semanticTokens = {
     ...baseSemanticTokens,
     colors: vyUtviklingColors,
   },
+  [Brand.VyTeknologi]: {
+    ...baseSemanticTokens,
+    colors: vyTeknologiColors,
+  },
   [Brand.CargoNet]: {
     ...baseSemanticTokens,
     colors: cargonetColors,

package/src/theme/slot-recipes/input-chip.ts

@@ -76,7 +76,7 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs",
         },
@@ -85,17 +85,16 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.sm",
           paddingX: "2",
-          paddingY: "0.5",
+          height: 6,
           fontWeight: "bold",
           borderRadius: "9px",
         },
       },
       md: {
         root: {
-          padding: 5,
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "1",
+          height: 7,
           fontWeight: "bold",
           borderRadius: "sm",
         },
@@ -104,7 +103,7 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md",
         },

package/src/theme/slot-recipes/toast.ts

@@ -16,6 +16,7 @@ export const toastSlotRecipe = defineSlotRecipe({
       translate: "var(--x) var(--y)",
       opacity: "var(--opacity)",
       willChange: "translate, opacity, scale",
+      outline: "1px solid",
 
       borderRadius: "sm",
       transition:
@@ -25,18 +26,54 @@ export const toastSlotRecipe = defineSlotRecipe({
         transition: "translate 400ms, scale 400ms, opacity 200ms",
         transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)",
       },
-      boxShadow: "xl",
+      boxShadow: "sm",
 
       color: "text",
       "&[data-type=success]": {
         backgroundColor: "surface.success",
+        outlineColor: "outline.success",
       },
       "&[data-type=error]": {
         backgroundColor: "surface.critical",
+        outlineColor: "outline.critical",
       },
 
       "&[data-type=info]": {
         backgroundColor: "surface.info",
+        outlineColor: "outline.info",
+      },
+      "&[data-inverted][data-type=success]": {
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
+        "& path:first-of-type": {
+          fill: { _light: "mint", _dark: "jungle" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkTeal", _dark: "seaMist" },
+        },
+      },
+      "&[data-inverted][data-type=error]": {
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
+        "& path:first-of-type": {
+          fill: { _light: "pink", _dark: "maroon" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "burgundy", _dark: "lightRed" },
+        },
+      },
+      "&[data-inverted][data-type=info]": {
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
+        "& path:first-of-type": {
+          fill: { _light: "icyBlue", _dark: "navy" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkBlue", _dark: "lightBlue" },
+        },
       },
     },
 

package/src/toast/toast.tsx

@@ -31,6 +31,7 @@ type ToastProps = {
   id?: string;
   action?: ToastAction;
   closable?: boolean;
+  inverted?: boolean;
 } & Pick<BoxProps, "width">;
 
 export const createToast = ({
@@ -41,6 +42,7 @@ export const createToast = ({
   width = "sm",
   action,
   closable = false,
+  inverted = false,
 }: ToastProps) =>
   toaster.create({
     description: text,
@@ -48,7 +50,7 @@ export const createToast = ({
     id: id ?? crypto.randomUUID(),
     duration,
     action,
-    meta: { width },
+    meta: { width, inverted },
     closable: closable,
   });
 
@@ -59,9 +61,7 @@ export const Toaster = () => {
         {(toast) => (
           <Toast.Root
             width={{ md: toast.meta?.width }}
-            border="sm"
-            borderColor={`outline.${toast.type}`}
-            boxShadow="sm"
+            data-inverted={toast.meta?.inverted ? "" : undefined}
             role="alert"
           >
             <AlertIcon variant={toast.type as Variant} />
@@ -69,8 +69,12 @@ export const Toaster = () => {
               <Toast.Description>{toast.description}</Toast.Description>
             </Stack>
             {toast.action && (
-              <Toast.ActionTrigger onClick={toast.action.onClick}>
-                <Button variant="ghost" size="xs">
+              <Toast.ActionTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  onClick={toast.action.onClick}
+                >
                   {toast.action.label}
                 </Button>
               </Toast.ActionTrigger>