@vygruppen/spor-react 12.13.4 → 12.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.13.4",
+  "version": "12.14.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.1.0",
+    "@vygruppen/spor-design-tokens": "4.2.0",
     "@vygruppen/spor-icon-react": "4.2.1",
     "@vygruppen/spor-loader": "0.7.0"
   },

package/src/datepicker/DateField.tsx

@@ -63,7 +63,11 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             position="absolute"
             paddingTop="2px"
           >
-            <Label padding="0" fontSize="2xs" {...props.labelProps}>
+            <Label
+              padding="0"
+              fontSize={["mobile.xs", "desktop.xs"]}
+              {...props.labelProps}
+            >
               {props.label} <Field.RequiredIndicator />
             </Label>
           </Box>

package/src/datepicker/StyledField.tsx

@@ -47,6 +47,7 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
         ref={ref}
         aria-invalid={invalid}
         aria-disabled={isDisabled}
+        fontSize={["mobile.md", "desktop.md"]}
       >
         {children}
       </Box>

package/src/datepicker/TimeField.tsx

@@ -5,6 +5,8 @@ import { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
 import { DateSegment, TimeFieldState } from "react-stately";
 
+import { spor } from "@/util";
+
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
 
@@ -24,26 +26,24 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
 
   return (
     <Box>
-      <label
+      <spor.label
         {...labelProps}
         htmlFor={fieldProps.id}
-        style={{
-          marginBottom: 0,
-          fontSize: "mobile.xs",
-          top: 0,
-          cursor: "text",
-          left: "50%",
-          transform: "translateX(-50%)",
-          position: "absolute",
-          paddingTop: "2px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          maxWidth: "80%",
-        }}
+        marginBottom={0}
+        fontSize={["mobile.xs", "desktop.xs"]}
+        top={0}
+        cursor="text"
+        left="50%"
+        transform="translateX(-50%)"
+        position="absolute"
+        paddingTop="2px"
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        maxWidth="80%"
       >
         {props.label}
-      </label>
+      </spor.label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment: DateSegment, index) => (
           <DateTimeSegment key={index} segment={segment} state={state} />

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

@@ -97,11 +97,8 @@ export const dialogSlotRecipe = defineSlotRecipe({
   variants: {
     placement: {
       center: {
-        positioner: {
-          alignItems: "center",
-        },
         content: {
-          marginX: "auto",
+          margin: "auto",
         },
       },
       top: {
@@ -179,7 +176,7 @@ export const dialogSlotRecipe = defineSlotRecipe({
         },
         content: {
           width: "100%",
-          height: "100%",
+          minHeight: "100%",
           "--dialog-margin": "0",
           margin: "0",
         },

package/src/theme/tokens/font-sizes.ts

@@ -12,17 +12,21 @@ export const fontSizes = defineTokens.fontSizes({
   "3xl": { value: tokens.size.font.xxl.desktop },
 
   mobile: {
+    "2xs": { value: tokens.size.font["2xs"].mobile },
     xs: { value: tokens.size.font.xs.mobile },
     sm: { value: tokens.size.font.sm.mobile },
     md: { value: tokens.size.font.md.mobile },
+    "md-lg": { value: tokens.size.font["md-lg"].mobile },
     lg: { value: tokens.size.font.lg.mobile },
     xl: { value: tokens.size.font.xl.mobile },
     xxl: { value: tokens.size.font.xxl.mobile },
   },
   desktop: {
+    "2xs": { value: tokens.size.font["2xs"].desktop },
     xs: { value: tokens.size.font.xs.desktop },
     sm: { value: tokens.size.font.sm.desktop },
     md: { value: tokens.size.font.md.desktop },
+    "md-lg": { value: tokens.size.font["md-lg"].desktop },
     lg: { value: tokens.size.font.lg.desktop },
     xl: { value: tokens.size.font.xl.desktop },
     xxl: { value: tokens.size.font.xxl.desktop },

package/src/theme/tokens/text-styles.ts

@@ -50,6 +50,18 @@ export const textStyles = defineTextStyles({
       lineHeight: tokens.font.style.lg["line-height"],
     },
   },
+  "md-lg": {
+    value: {
+      fontSize: [
+        tokens.font.style["md-lg"]["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style["md-lg"]["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style["md-lg"]["font-family"],
+      lineHeight: tokens.font.style["md-lg"]["line-height"],
+    },
+  },
   md: {
     value: {
       fontSize: [
@@ -86,4 +98,16 @@ export const textStyles = defineTextStyles({
       lineHeight: tokens.font.style.xs["line-height"],
     },
   },
+  "2xs": {
+    value: {
+      fontSize: [
+        tokens.font.style["2xs"]["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style["2xs"]["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style["2xs"]["font-family"],
+      lineHeight: tokens.font.style["2xs"]["line-height"],
+    },
+  },
 });