@altinn/altinn-components 0.24.6 → 0.24.8

package/dist/tokens/style.json

@@ -4,70 +4,70 @@
       "2xl": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.11}",
+          "fontSize": "{font-size.10}",
           "letterSpacing": "{letter-spacing.1}"
         }
       },
       "xl": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.10}",
+          "fontSize": "{font-size.9}",
           "letterSpacing": "{letter-spacing.1}"
         }
       },
       "lg": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.9}",
+          "fontSize": "{font-size.8}",
           "letterSpacing": "{letter-spacing.2}"
         }
       },
       "md": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.8}",
+          "fontSize": "{font-size.7}",
           "letterSpacing": "{letter-spacing.3}"
         }
       },
       "sm": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.7}",
+          "fontSize": "{font-size.6}",
           "letterSpacing": "{letter-spacing.5}"
         }
       },
       "xs": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.6}",
+          "fontSize": "{font-size.5}",
           "letterSpacing": "{letter-spacing.6}"
         }
       },
       "2xs": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.medium}",
           "lineHeight": "{line-height.sm}",
-          "fontSize": "{font-size.5}",
+          "fontSize": "{font-size.4}",
           "letterSpacing": "{letter-spacing.6}"
         }
       }
@@ -76,50 +76,50 @@
       "xl": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": "{line-height.md}",
-          "fontSize": "{font-size.7}",
+          "fontSize": "{font-size.6}",
           "letterSpacing": "{letter-spacing.8}"
         }
       },
       "lg": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": "{line-height.md}",
-          "fontSize": "{font-size.6}",
+          "fontSize": "{font-size.5}",
           "letterSpacing": "{letter-spacing.8}"
         }
       },
       "md": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": "{line-height.md}",
-          "fontSize": "{font-size.5}",
+          "fontSize": "{font-size.4}",
           "letterSpacing": "{letter-spacing.8}"
         }
       },
       "sm": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": "{line-height.md}",
-          "fontSize": "{font-size.4}",
+          "fontSize": "{font-size.3}",
           "letterSpacing": "{letter-spacing.7}"
         }
       },
       "xs": {
         "$type": "typography",
         "$value": {
-          "fontFamily": "{font.family}",
+          "fontFamily": "{font-family}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": "{line-height.md}",
-          "fontSize": "{font-size.3}",
+          "fontSize": "{font-size.2}",
           "letterSpacing": "{letter-spacing.6}"
         }
       },
@@ -127,50 +127,50 @@
         "xl": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.sm}",
-            "fontSize": "{font-size.7}",
+            "fontSize": "{font-size.6}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "lg": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.sm}",
-            "fontSize": "{font-size.6}",
+            "fontSize": "{font-size.5}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "md": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.sm}",
-            "fontSize": "{font-size.5}",
+            "fontSize": "{font-size.4}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "sm": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.sm}",
-            "fontSize": "{font-size.4}",
+            "fontSize": "{font-size.3}",
             "letterSpacing": "{letter-spacing.7}"
           }
         },
         "xs": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.sm}",
-            "fontSize": "{font-size.3}",
+            "fontSize": "{font-size.2}",
             "letterSpacing": "{letter-spacing.6}"
           }
         }
@@ -179,278 +179,200 @@
         "xl": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.lg}",
-            "fontSize": "{font-size.7}",
+            "fontSize": "{font-size.6}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "lg": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.lg}",
-            "fontSize": "{font-size.6}",
+            "fontSize": "{font-size.5}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "md": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.lg}",
-            "fontSize": "{font-size.5}",
+            "fontSize": "{font-size.4}",
             "letterSpacing": "{letter-spacing.8}"
           }
         },
         "sm": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.lg}",
-            "fontSize": "{font-size.4}",
+            "fontSize": "{font-size.3}",
             "letterSpacing": "{letter-spacing.7}"
           }
         },
         "xs": {
           "$type": "typography",
           "$value": {
-            "fontFamily": "{font.family}",
+            "fontFamily": "{font-family}",
             "fontWeight": "{font-weight.regular}",
             "lineHeight": "{line-height.lg}",
-            "fontSize": "{font-size.3}",
+            "fontSize": "{font-size.2}",
             "letterSpacing": "{letter-spacing.6}"
           }
         }
       }
     }
   },
-  "disabled": {
-    "opacity": {
+  "opacity": {
+    "disabled": {
       "$type": "opacity",
       "$value": "{opacity.30}"
     }
   },
-  "border-radius": {
-    "sm": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.1}"
-    },
-    "md": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.2}"
-    },
-    "lg": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.3}"
-    },
+  "border-width": {
     "default": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.4}"
+      "$type": "borderWidth",
+      "$value": "{border-width.1}"
     },
-    "full": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.5}"
+    "focus": {
+      "$type": "borderWidth",
+      "$value": "{border-width.3}"
     }
   },
-  "spacing": {
-    "0": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*0"
-    },
-    "1": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*1"
-    },
-    "2": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*2"
-    },
-    "3": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*3"
-    },
-    "4": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*4"
-    },
-    "5": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*5"
-    },
-    "6": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*6"
-    },
-    "7": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*7"
-    },
-    "8": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*8"
-    },
-    "9": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*9"
-    },
-    "10": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*10"
+  "shadow": {
+    "xs": {
+      "$type": "boxShadow",
+      "$value": "{shadow.100}"
     },
-    "11": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*11"
+    "sm": {
+      "$type": "boxShadow",
+      "$value": "{shadow.200}"
     },
-    "12": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*12"
+    "md": {
+      "$type": "boxShadow",
+      "$value": "{shadow.300}"
     },
-    "13": {
-      "$type": "dimension",
-      "$value": "{spacing.scale}*13"
+    "lg": {
+      "$type": "boxShadow",
+      "$value": "{shadow.400}"
     },
-    "14": {
+    "xl": {
+      "$type": "boxShadow",
+      "$value": "{shadow.500}"
+    }
+  },
+  "border-radius": {
+    "sm": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*14"
+      "$value": "{border-radius.1}"
     },
-    "15": {
+    "md": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*15"
+      "$value": "{border-radius.2}"
     },
-    "18": {
+    "lg": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*18"
+      "$value": "{border-radius.3}"
     },
-    "22": {
+    "xl": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*22"
+      "$value": "{border-radius.4}"
     },
-    "26": {
+    "default": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*26"
+      "$value": "{border-radius.5}"
     },
-    "30": {
+    "full": {
       "$type": "dimension",
-      "$value": "{spacing.scale}*30"
+      "$value": "{border-radius.6}"
     }
   },
-  "sizing": {
+  "size": {
     "0": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*0"
+      "$value": "{_size.0}"
     },
     "1": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*1"
+      "$value": "{_size.1}"
     },
     "2": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*2"
+      "$value": "{_size.2}"
     },
     "3": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*3"
+      "$value": "{_size.3}"
     },
     "4": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*4"
+      "$value": "{_size.4}"
     },
     "5": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*5"
+      "$value": "{_size.5}"
     },
     "6": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*6"
+      "$value": "{_size.6}"
     },
     "7": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*7"
+      "$value": "{_size.7}"
     },
     "8": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*8"
+      "$value": "{_size.8}"
     },
     "9": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*9"
+      "$value": "{_size.9}"
     },
     "10": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*10"
+      "$value": "{_size.10}"
     },
     "11": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*11"
+      "$value": "{_size.11}"
     },
     "12": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*12"
+      "$value": "{_size.12}"
     },
     "13": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*13"
+      "$value": "{_size.13}"
     },
     "14": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*14"
+      "$value": "{_size.14}"
     },
     "15": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*15"
+      "$value": "{_size.15}"
     },
     "18": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*18"
+      "$value": "{_size.18}"
     },
     "22": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*22"
+      "$value": "{_size.22}"
     },
     "26": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*26"
+      "$value": "{_size.26}"
     },
     "30": {
       "$type": "dimension",
-      "$value": "{sizing.scale}*30"
-    }
-  },
-  "border-width": {
-    "default": {
-      "$type": "borderWidth",
-      "$value": "{border-width.1}"
-    },
-    "highlight": {
-      "$type": "borderWidth",
-      "$value": "{border-width.2}"
-    }
-  },
-  "shadow": {
-    "xs": {
-      "$type": "boxShadow",
-      "$value": "{shadow.100}"
-    },
-    "sm": {
-      "$type": "boxShadow",
-      "$value": "{shadow.200}"
-    },
-    "md": {
-      "$type": "boxShadow",
-      "$value": "{shadow.300}"
-    },
-    "lg": {
-      "$type": "boxShadow",
-      "$value": "{shadow.400}"
-    },
-    "xl": {
-      "$type": "boxShadow",
-      "$value": "{shadow.500}"
+      "$value": "{_size.30}"
     }
   }
 }

package/dist/tokens/success.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="success"],
+  [data-color-scheme][data-color="success"] {
+    --ds-color-background-default: var(--ds-color-success-background-default);
+    --ds-color-background-tinted: var(--ds-color-success-background-tinted);
+    --ds-color-surface-default: var(--ds-color-success-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
+    --ds-color-surface-hover: var(--ds-color-success-surface-hover);
+    --ds-color-surface-active: var(--ds-color-success-surface-active);
+    --ds-color-border-subtle: var(--ds-color-success-border-subtle);
+    --ds-color-border-default: var(--ds-color-success-border-default);
+    --ds-color-border-strong: var(--ds-color-success-border-strong);
+    --ds-color-text-subtle: var(--ds-color-success-text-subtle);
+    --ds-color-text-default: var(--ds-color-success-text-default);
+    --ds-color-base-default: var(--ds-color-success-base-default);
+    --ds-color-base-hover: var(--ds-color-success-base-hover);
+    --ds-color-base-active: var(--ds-color-success-base-active);
+    --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
+  }
+}

package/dist/tokens/support-color/alert.json

@@ -5,14 +5,18 @@
         "$type": "color",
         "$value": "{color.alert.background-default}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
-        "$value": "{color.alert.background-subtle}"
+        "$value": "{color.alert.background-tinted}"
       },
       "surface-default": {
         "$type": "color",
         "$value": "{color.alert.surface-default}"
       },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{color.alert.surface-tinted}"
+      },
       "surface-hover": {
         "$type": "color",
         "$value": "{color.alert.surface-hover}"
@@ -33,6 +37,14 @@
         "$type": "color",
         "$value": "{color.alert.border-strong}"
       },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{color.alert.text-subtle}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{color.alert.text-default}"
+      },
       "base-default": {
         "$type": "color",
         "$value": "{color.alert.base-default}"
@@ -45,21 +57,13 @@
         "$type": "color",
         "$value": "{color.alert.base-active}"
       },
-      "text-subtle": {
-        "$type": "color",
-        "$value": "{color.alert.text-subtle}"
-      },
-      "text-default": {
-        "$type": "color",
-        "$value": "{color.alert.text-default}"
-      },
-      "contrast-default": {
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{color.alert.contrast-default}"
+        "$value": "{color.alert.base-contrast-subtle}"
       },
-      "contrast-subtle": {
+      "base-contrast-default": {
         "$type": "color",
-        "$value": "{color.alert.contrast-subtle}"
+        "$value": "{color.alert.base-contrast-default}"
       }
     }
   }