npm - @midas-ds/theme - Versions diffs - 3.1.0 → 3.2.0 - Mend

@midas-ds/theme 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +16 -0
package/index.mjs +176 -140
package/lib/style-dictionary-dist/token-dictionary.d.ts +2 -0
package/lib/style-dictionary-dist/variables.d.ts +6 -2
package/package.json +1 -1
package/variables.css +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,19 @@
+## 3.2.0 (2025-11-07)
+### 🚀 Features
+- **theme:** add read-only colors ([5b6be5ae97](https://github.com/migrationsverket/midas/commit/5b6be5ae97))
+### 🔧 Maintenance
+- **theme:** revert read-only border color token (same as subtle) ([c42f60935b](https://github.com/migrationsverket/midas/commit/c42f60935b))
+## 3.1.1 (2025-10-27)
+### 🩹 Fixes
+- **theme:** add unit to panel transisitions fixing bug with broken animations ([ffcd857c52](https://github.com/migrationsverket/midas/commit/ffcd857c52))
 ## 3.1.0 (2025-10-10)
 ### 🚀 Features

package/index.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-const ar = {
+const ir = {
   windowSizes: {
     sm: {
       key: "{windowSizes.sm}",
@@ -2536,6 +2536,23 @@ const ar = {
       name: "iconImportant",
       attributes: {},
       path: ["icon", "important"]
+    },
+    readOnly: {
+      key: "{icon.readOnly}",
+      $value: "light-dark(#bfbfbf, #383838)",
+      $description: "Ikonfärg för read-only state",
+      filePath: "packages/theme/tokens/object-values.json",
+      isSource: !0,
+      $type: "string",
+      original: {
+        $value: "light-dark({color.gray.50}, {color.gray.160})",
+        $description: "Ikonfärg för read-only state",
+        $type: "string",
+        key: "{icon.readOnly}"
+      },
+      name: "iconReadOnly",
+      attributes: {},
+      path: ["icon", "readOnly"]
     }
   },
   link: {
@@ -2954,6 +2971,23 @@ const ar = {
       name: "textPlaceholder",
       attributes: {},
       path: ["text", "placeholder"]
+    },
+    readOnly: {
+      key: "{text.readOnly}",
+      $value: "light-dark(#737373, #999)",
+      $description: "Textfärg för read-only state",
+      filePath: "packages/theme/tokens/object-values.json",
+      isSource: !0,
+      $type: "string",
+      original: {
+        $value: "light-dark({color.gray.110}, {color.gray.80})",
+        $description: "Textfärg för read-only state",
+        $type: "string",
+        key: "{text.readOnly}"
+      },
+      name: "textReadOnly",
+      attributes: {},
+      path: ["text", "readOnly"]
     }
   },
   badge: {
@@ -3923,7 +3957,7 @@ const ar = {
       collapse: {
         key: "{transition.panel.collapse}",
         $value: {
-          delay: 0,
+          delay: "0ms",
           duration: "300ms",
           timingFunction: [0, 0, 0.58, 1]
         },
@@ -3932,7 +3966,7 @@ const ar = {
         isSource: !0,
         original: {
           $value: {
-            delay: 0,
+            delay: "0ms",
             duration: "{transition.duration.normal}",
             timingFunction: "{transition.timing.easeOut}"
           },
@@ -3946,7 +3980,7 @@ const ar = {
       expand: {
         key: "{transition.panel.expand}",
         $value: {
-          delay: 0,
+          delay: "0ms",
           duration: "300ms",
           timingFunction: [0.42, 0, 1, 1]
         },
@@ -3955,7 +3989,7 @@ const ar = {
         isSource: !0,
         original: {
           $value: {
-            delay: 0,
+            delay: "0ms",
             duration: "{transition.duration.normal}",
             timingFunction: "{transition.timing.easeIn}"
           },
@@ -4565,26 +4599,26 @@ const ar = {
       path: ["zIndex", "skipToContent"]
     }
   }
-}, e = "480px", t = "768px", o = "1024px", a = "1280px", r = "(max-width: calc(480px - 1px))", i = "(min-width: 480px)", n = "(min-width: 768px)", l = "(min-width: 1024px)", s = "(min-width: 1280px)", c = "light-dark(#143c50, #2e7ca5)", g = "light-dark(#25607f, #25607f)", u = "light-dark(#2e7ca5, #143c50)", p = "light-dark(#fff, #171717)", y = "light-dark(#e6e6e6, #212121)", k = "light-dark(#d9d9d9, #262626)", d = "light-dark(#0000000d, #ffffff21)", h = "light-dark(#d9d9d9, #262626)", $ = "light-dark(#e62323, #e62323)", m = "light-dark(#bc1d1d, #bc1d1d)", f = "light-dark(#7d1313, #7d1313)", b = "light-dark(#f2f2f2, #262626)", v = "light-dark(#143c50, #f2f2f2)", S = "light-dark(#0000000d, #ffffff21)", j = "light-dark(#00000033, #ffffff33)", P = "#000", w = "#0d0d0d", z = "#0000000d", B = "#fff", x = "#e6e6e6", H = "#ffffff21", R = "#f2f2f2", Y = "#e6e6e6", I = "#d9d9d9", A = "#ccc", C = "#bfbfbf", G = "#b3b3b3", W = "#a6a6a6", F = "#999", D = "#8c8c8c", T = "#808080", L = "#737373", O = "#666", M = "#5d5d5d", E = "#525252", K = "#474747", X = "#383838", _ = "#333", N = "#262626", V = "#212121", q = "#171717", J = "#eaf2f6", Q = "#d5e5ed", U = "#abcbdb", Z = "#94BCD1", ee = "#82b0c9", te = "#6CA3C0", oe = "#5897b8", ae = "#4289ad", re = "#2e7ca5", ie = "#2C7399", ne = "#29698C", le = "#25607f", se = "#143c50", ce = "#b46ab4", ge = "#954b95", ue = "#b90835", pe = "#eaf2f6", ye = "#d5e5ed", ke = "#06c", de = "#d5f2d9", he = "#bae5c5", $e = "#008d3c", me = "#194B33", fe = "#fff8e2", be = "#fff1cd", ve = "#ffeab8", Se = "#ffe3a3", je = "#ffdc8b", Pe = "#ffd47b", we = "#fdcd5d", ze = "#fbc640", Be = "#fabf1b", xe = "#fab900", He = "#daa105", Re = "#bd8c1e", Ye = "#a17927", Ie = "#88672a", Ae = "#70562b", Ce = "#5a4629", Ge = "#453826", We = "#322a20", Fe = "#201c18", De = "#0f0e0e", Te = "#ffefef", Le = "#ffdfdf", Oe = "#fcc8c8", Me = "#f9b0b0", Ee = "#f69999", Ke = "#f38181", Xe = "#ef6a6a", _e = "#EC5252", Ne = "#e93b3b", Ve = "#e62323", qe = "#d12020", Je = "#bc1d1d", Qe = "#a71919", Ue = "#921616", Ze = "#7d1313", et = "#691010", tt = "#540d0d", ot = "#3f0a0a", at = "#2a0606", rt = "#150303", it = "light-dark(#fff, #171717)", nt = "light-dark(#e6e6e6, #212121)", lt = "light-dark(#171717, #f2f2f2)", st = "light-dark(#f2f2f2, #262626)", ct = "light-dark(#e6e6e6, #333)", gt = "light-dark(#d9d9d9, #383838)", ut = "light-dark(#ccc, #474747)", pt = "light-dark(#fff, #383838)", yt = "light-dark(#e6e6e6, #474747)", kt = "light-dark(#d9d9d9, #525252)", dt = "light-dark(#ccc, #5d5d5d)", ht = "light-dark(#d9d9d9, #383838)", $t = "light-dark(#ccc, #474747)", mt = "light-dark(#bfbfbf, #525252)", ft = "light-dark(#f2f2f2, #262626)", bt = "light-dark(#e6e6e6, #333)", vt = "light-dark(#d9d9d9, #383838)", St = "light-dark(#b90835, #b90835)", jt = "light-dark(#171717, #f2f2f2)", Pt = "light-dark(#737373, #8c8c8c)", wt = "light-dark(#bfbfbf, #383838)", zt = "light-dark(#143c50, #2e7ca5)", Bt = "light-dark(#bfbfbf, #525252)", xt = "1px", Ht = "light-dark(#f2f2f2, #262626)", Rt = "light-dark(#e6e6e6, #333)", Yt = "light-dark(#d9d9d9, #383838)", It = "light-dark(#fff, #383838)", At = "light-dark(#e6e6e6, #474747)", Ct = "light-dark(#d9d9d9, #525252)", Gt = "light-dark(#f2f2f2, #262626)", Wt = "light-dark(#f2f2f2, #262626)", Ft = "light-dark(#d9d9d9, #383838)", Dt = "light-dark(#171717, #f2f2f2)", Tt = "light-dark(#525252, #a6a6a6)", Lt = "light-dark(#143c50, #f2f2f2)", Ot = "light-dark(#fff, #171717)", Mt = "light-dark(#fff, #fff)", Et = "light-dark(#bfbfbf, #525252)", Kt = "light-dark(#008d3c, #008d3c)", Xt = "light-dark(#06c, #06c)", _t = "light-dark(#e62323, #e62323)", Nt = "light-dark(#fab900, #fab900)", Vt = "light-dark(#29698C, #6CA3C0)", qt = "light-dark(#143c50, #94BCD1)", Jt = "light-dark(#171717, #abcbdb)", Qt = "light-dark(#954b95, #b46ab4)", Ut = "light-dark(#008d3c, #008d3c)", Zt = "light-dark(#06c, #06c)", eo = "light-dark(#fab900, #fab900)", to = "light-dark(#e62323, #e62323)", oo = "light-dark(#d5f2d9, #262626)", ao = "light-dark(#bae5c5, #333)", ro = "light-dark(#eaf2f6, #262626)", io = "light-dark(#d5e5ed, #333)", no = "light-dark(#fff8e2, #262626)", lo = "light-dark(#fff1cd, #333)", so = "light-dark(#ffdfdf, #262626)", co = "light-dark(#fcc8c8, #333)", go = "light-dark(#171717, #f2f2f2)", uo = "light-dark(#525252, #a6a6a6)", po = "light-dark(#143c50, #f2f2f2)", yo = "light-dark(#fff, #fff)", ko = "light-dark(#f2f2f2, #171717)", ho = "light-dark(#bfbfbf, #525252)", $o = "light-dark(#e62323, #EC5252)", mo = "light-dark(#a6a6a6, #525252)", fo = "light-dark(#e62323, #e62323)", bo = "light-dark(#0000001a, #ffffff1a)", vo = "light-dark(#143c50, #5897b8)", So = "light-dark(#143c50, #5897b8)", jo = "light-dark(#d5e5ed, #143c50)", Po = "light-dark(#143c50, #5897b8)", wo = "light-dark(#b90835, #fff)", zo = "light-dark(#e6e6e6, #212121)", Bo = "light-dark(#f2f2f2, #262626)", xo = "light-dark(#525252, #a6a6a6)", Ho = "0.125rem", Ro = "0.188rem", Yo = "0.25rem", Io = "0.375rem", Ao = "0.5rem", Co = "0.625rem", Go = "0.75rem", Wo = "0.875rem", Fo = "0.938rem", Do = "1rem", To = "1.25rem", Lo = "1.5rem", Oo = "1.75rem", Mo = "2rem", Eo = "2.5rem", Ko = "2.75rem", Xo = "3rem", _o = "0rem", No = "0.063rem", Vo = "0.125rem", qo = "0.25rem", Jo = "0.5rem", Qo = "0.75rem", Uo = "1rem", Zo = "1.5rem", ea = "2rem", ta = "2.5rem", oa = "3rem", aa = "4rem", ra = "5rem", ia = "6rem", na = "0.25rem", la = "0.5rem", sa = "1rem", ca = "1.5rem", ga = "2rem", ua = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", pa = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", ya = "2px", ka = "2px", da = "500ms", ha = "300ms", $a = "250ms", ma = [0, 0, 0.58, 1], fa = [0.42, 0, 1, 1], ba = {
-  delay: 0,
+}, e = "480px", t = "768px", o = "1024px", a = "1280px", r = "(max-width: calc(480px - 1px))", i = "(min-width: 480px)", n = "(min-width: 768px)", l = "(min-width: 1024px)", s = "(min-width: 1280px)", c = "light-dark(#143c50, #2e7ca5)", g = "light-dark(#25607f, #25607f)", u = "light-dark(#2e7ca5, #143c50)", p = "light-dark(#fff, #171717)", y = "light-dark(#e6e6e6, #212121)", k = "light-dark(#d9d9d9, #262626)", d = "light-dark(#0000000d, #ffffff21)", h = "light-dark(#d9d9d9, #262626)", $ = "light-dark(#e62323, #e62323)", m = "light-dark(#bc1d1d, #bc1d1d)", f = "light-dark(#7d1313, #7d1313)", b = "light-dark(#f2f2f2, #262626)", v = "light-dark(#143c50, #f2f2f2)", S = "light-dark(#0000000d, #ffffff21)", j = "light-dark(#00000033, #ffffff33)", P = "#000", w = "#0d0d0d", z = "#0000000d", x = "#fff", B = "#e6e6e6", H = "#ffffff21", R = "#f2f2f2", Y = "#e6e6e6", I = "#d9d9d9", A = "#ccc", C = "#bfbfbf", G = "#b3b3b3", W = "#a6a6a6", F = "#999", D = "#8c8c8c", T = "#808080", O = "#737373", L = "#666", M = "#5d5d5d", E = "#525252", K = "#474747", X = "#383838", _ = "#333", N = "#262626", V = "#212121", q = "#171717", J = "#eaf2f6", Q = "#d5e5ed", U = "#abcbdb", Z = "#94BCD1", ee = "#82b0c9", te = "#6CA3C0", oe = "#5897b8", ae = "#4289ad", re = "#2e7ca5", ie = "#2C7399", ne = "#29698C", le = "#25607f", se = "#143c50", ce = "#b46ab4", ge = "#954b95", ue = "#b90835", pe = "#eaf2f6", ye = "#d5e5ed", ke = "#06c", de = "#d5f2d9", he = "#bae5c5", $e = "#008d3c", me = "#194B33", fe = "#fff8e2", be = "#fff1cd", ve = "#ffeab8", Se = "#ffe3a3", je = "#ffdc8b", Pe = "#ffd47b", we = "#fdcd5d", ze = "#fbc640", xe = "#fabf1b", Be = "#fab900", He = "#daa105", Re = "#bd8c1e", Ye = "#a17927", Ie = "#88672a", Ae = "#70562b", Ce = "#5a4629", Ge = "#453826", We = "#322a20", Fe = "#201c18", De = "#0f0e0e", Te = "#ffefef", Oe = "#ffdfdf", Le = "#fcc8c8", Me = "#f9b0b0", Ee = "#f69999", Ke = "#f38181", Xe = "#ef6a6a", _e = "#EC5252", Ne = "#e93b3b", Ve = "#e62323", qe = "#d12020", Je = "#bc1d1d", Qe = "#a71919", Ue = "#921616", Ze = "#7d1313", et = "#691010", tt = "#540d0d", ot = "#3f0a0a", at = "#2a0606", rt = "#150303", it = "light-dark(#fff, #171717)", nt = "light-dark(#e6e6e6, #212121)", lt = "light-dark(#171717, #f2f2f2)", st = "light-dark(#f2f2f2, #262626)", ct = "light-dark(#e6e6e6, #333)", gt = "light-dark(#d9d9d9, #383838)", ut = "light-dark(#ccc, #474747)", pt = "light-dark(#fff, #383838)", yt = "light-dark(#e6e6e6, #474747)", kt = "light-dark(#d9d9d9, #525252)", dt = "light-dark(#ccc, #5d5d5d)", ht = "light-dark(#d9d9d9, #383838)", $t = "light-dark(#ccc, #474747)", mt = "light-dark(#bfbfbf, #525252)", ft = "light-dark(#f2f2f2, #262626)", bt = "light-dark(#e6e6e6, #333)", vt = "light-dark(#d9d9d9, #383838)", St = "light-dark(#b90835, #b90835)", jt = "light-dark(#171717, #f2f2f2)", Pt = "light-dark(#737373, #8c8c8c)", wt = "light-dark(#bfbfbf, #383838)", zt = "light-dark(#143c50, #2e7ca5)", xt = "light-dark(#bfbfbf, #525252)", Bt = "1px", Ht = "light-dark(#f2f2f2, #262626)", Rt = "light-dark(#e6e6e6, #333)", Yt = "light-dark(#d9d9d9, #383838)", It = "light-dark(#fff, #383838)", At = "light-dark(#e6e6e6, #474747)", Ct = "light-dark(#d9d9d9, #525252)", Gt = "light-dark(#f2f2f2, #262626)", Wt = "light-dark(#f2f2f2, #262626)", Ft = "light-dark(#d9d9d9, #383838)", Dt = "light-dark(#171717, #f2f2f2)", Tt = "light-dark(#525252, #a6a6a6)", Ot = "light-dark(#143c50, #f2f2f2)", Lt = "light-dark(#fff, #171717)", Mt = "light-dark(#fff, #fff)", Et = "light-dark(#bfbfbf, #525252)", Kt = "light-dark(#008d3c, #008d3c)", Xt = "light-dark(#06c, #06c)", _t = "light-dark(#e62323, #e62323)", Nt = "light-dark(#fab900, #fab900)", Vt = "light-dark(#bfbfbf, #383838)", qt = "light-dark(#29698C, #6CA3C0)", Jt = "light-dark(#143c50, #94BCD1)", Qt = "light-dark(#171717, #abcbdb)", Ut = "light-dark(#954b95, #b46ab4)", Zt = "light-dark(#008d3c, #008d3c)", eo = "light-dark(#06c, #06c)", to = "light-dark(#fab900, #fab900)", oo = "light-dark(#e62323, #e62323)", ao = "light-dark(#d5f2d9, #262626)", ro = "light-dark(#bae5c5, #333)", io = "light-dark(#eaf2f6, #262626)", no = "light-dark(#d5e5ed, #333)", lo = "light-dark(#fff8e2, #262626)", so = "light-dark(#fff1cd, #333)", co = "light-dark(#ffdfdf, #262626)", go = "light-dark(#fcc8c8, #333)", uo = "light-dark(#171717, #f2f2f2)", po = "light-dark(#525252, #a6a6a6)", yo = "light-dark(#143c50, #f2f2f2)", ko = "light-dark(#fff, #fff)", ho = "light-dark(#f2f2f2, #171717)", $o = "light-dark(#bfbfbf, #525252)", mo = "light-dark(#e62323, #EC5252)", fo = "light-dark(#a6a6a6, #525252)", bo = "light-dark(#737373, #999)", vo = "light-dark(#e62323, #e62323)", So = "light-dark(#0000001a, #ffffff1a)", jo = "light-dark(#143c50, #5897b8)", Po = "light-dark(#143c50, #5897b8)", wo = "light-dark(#d5e5ed, #143c50)", zo = "light-dark(#143c50, #5897b8)", xo = "light-dark(#b90835, #fff)", Bo = "light-dark(#e6e6e6, #212121)", Ho = "light-dark(#f2f2f2, #262626)", Ro = "light-dark(#525252, #a6a6a6)", Yo = "0.125rem", Io = "0.188rem", Ao = "0.25rem", Co = "0.375rem", Go = "0.5rem", Wo = "0.625rem", Fo = "0.75rem", Do = "0.875rem", To = "0.938rem", Oo = "1rem", Lo = "1.25rem", Mo = "1.5rem", Eo = "1.75rem", Ko = "2rem", Xo = "2.5rem", _o = "2.75rem", No = "3rem", Vo = "0rem", qo = "0.063rem", Jo = "0.125rem", Qo = "0.25rem", Uo = "0.5rem", Zo = "0.75rem", ea = "1rem", ta = "1.5rem", oa = "2rem", aa = "2.5rem", ra = "3rem", ia = "4rem", na = "5rem", la = "6rem", sa = "0.25rem", ca = "0.5rem", ga = "1rem", ua = "1.5rem", pa = "2rem", ya = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", ka = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", da = "2px", ha = "2px", $a = "500ms", ma = "300ms", fa = "250ms", ba = [0, 0, 0.58, 1], va = [0.42, 0, 1, 1], Sa = {
+  delay: "0ms",
   duration: "300ms",
   timingFunction: [0, 0, 0.58, 1]
-}, va = {
-  delay: 0,
+}, ja = {
+  delay: "0ms",
   duration: "300ms",
   timingFunction: [0.42, 0, 1, 1]
-}, Sa = "Inter, sans-serif", ja = "0.75rem", Pa = "0.875rem", wa = "1rem", za = "1.125rem", Ba = "1.25rem", xa = "1.5rem", Ha = "1.625rem", Ra = "2rem", Ya = "2.25rem", Ia = "2.625rem", Aa = "1rem", Ca = "1.125rem", Ga = "1.25rem", Wa = "1.375rem", Fa = "1.5rem", Da = "1.75rem", Ta = "2rem", La = "2.25rem", Oa = "2.5rem", Ma = "3rem", Ea = 100, Ka = 200, Xa = 300, _a = 400, Na = 500, Va = 600, qa = 700, Ja = 800, Qa = 900, Ua = 1, Za = 10, er = 1e3, tr = 1100, or = 1200, rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Pa = "Inter, sans-serif", wa = "0.75rem", za = "0.875rem", xa = "1rem", Ba = "1.125rem", Ha = "1.25rem", Ra = "1.5rem", Ya = "1.625rem", Ia = "2rem", Aa = "2.25rem", Ca = "2.625rem", Ga = "1rem", Wa = "1.125rem", Fa = "1.25rem", Da = "1.375rem", Ta = "1.5rem", Oa = "1.75rem", La = "2rem", Ma = "2.25rem", Ea = "2.5rem", Ka = "3rem", Xa = 100, _a = 200, Na = 300, Va = 400, qa = 500, Ja = 600, Qa = 700, Ua = 800, Za = 900, er = 1, tr = 10, or = 1e3, ar = 1100, rr = 1200, nr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   backgroundBase: it,
   backgroundHover: nt,
   backgroundInverse: lt,
-  badgeBackground: fo,
-  borderColorDisabled: Bt,
+  badgeBackground: vo,
+  borderColorDisabled: xt,
   borderColorPrimary: jt,
   borderColorSecondary: Pt,
   borderColorSubtle: wt,
   borderColorTertiary: zt,
-  borderWidth: xt,
+  borderWidth: Bt,
   brandPrimary: St,
   breakpointsLg: l,
   breakpointsMd: n,
@@ -4606,11 +4640,11 @@ const ar = {
   buttonBorderSecondary: v,
   buttonIconActive: j,
   buttonIconHover: S,
-  calendarDateBackgroundEndRange: Po,
-  calendarDateBackgroundHover: bo,
-  calendarDateBackgroundInRange: jo,
-  calendarDateBackgroundSelected: vo,
-  calendarDateBackgroundStartRange: So,
+  calendarDateBackgroundEndRange: zo,
+  calendarDateBackgroundHover: So,
+  calendarDateBackgroundInRange: wo,
+  calendarDateBackgroundSelected: jo,
+  calendarDateBackgroundStartRange: Po,
   colorBlackBase: P,
   colorBlackHover: w,
   colorBlackOpacity5: z,
@@ -4629,8 +4663,8 @@ const ar = {
   colorBlue90: ae,
   colorGray10: R,
   colorGray100: T,
-  colorGray110: L,
-  colorGray120: O,
+  colorGray110: O,
+  colorGray120: L,
   colorGray130: M,
   colorGray140: E,
   colorGray150: K,
@@ -4668,9 +4702,9 @@ const ar = {
   colorSignalRed170: tt,
   colorSignalRed180: ot,
   colorSignalRed190: at,
-  colorSignalRed20: Le,
+  colorSignalRed20: Oe,
   colorSignalRed200: rt,
-  colorSignalRed30: Oe,
+  colorSignalRed30: Le,
   colorSignalRed40: Me,
   colorSignalRed50: Ee,
   colorSignalRed60: Ke,
@@ -4678,7 +4712,7 @@ const ar = {
   colorSignalRed80: _e,
   colorSignalRed90: Ne,
   colorSignalYellow10: fe,
-  colorSignalYellow100: xe,
+  colorSignalYellow100: Be,
   colorSignalYellow110: He,
   colorSignalYellow120: Re,
   colorSignalYellow130: Ye,
@@ -4696,9 +4730,9 @@ const ar = {
   colorSignalYellow60: Pe,
   colorSignalYellow70: we,
   colorSignalYellow80: ze,
-  colorSignalYellow90: Be,
-  colorWhiteBase: B,
-  colorWhiteHover: x,
+  colorSignalYellow90: xe,
+  colorWhiteBase: x,
+  colorWhiteHover: B,
   colorWhiteOpacity13: H,
   field01Active: Yt,
   field01Base: Ht,
@@ -4710,12 +4744,13 @@ const ar = {
   iconDisabled: Et,
   iconImportant: Nt,
   iconInfo: Xt,
-  iconInverse: Ot,
+  iconInverse: Lt,
   iconOnColor: Mt,
   iconPrimary: Dt,
+  iconReadOnly: Vt,
   iconSecondary: Tt,
   iconSuccess: Kt,
-  iconTertiary: Lt,
+  iconTertiary: Ot,
   iconWarning: _t,
   layer01Base: st,
   layer01Hover: ct,
@@ -4731,124 +4766,125 @@ const ar = {
   layerAccent02Base: ft,
   layerAccent02Hover: bt,
   layerAccent02Selected: vt,
-  linkEnabled: Vt,
-  linkHover: qt,
-  linkPressed: Jt,
-  linkVisited: Qt,
-  logoPrimary: wo,
-  menuItemBackgroundHover: zo,
-  menuItemBackgroundSelected: Bo,
-  menuTextSectionHeader: xo,
-  size00: _o,
-  size05: No,
-  size10: Ho,
-  size100: Lo,
-  size110: Oo,
-  size120: Mo,
-  size130: Eo,
-  size140: Ko,
-  size15: Ro,
-  size150: Xo,
-  size20: Yo,
-  size30: Io,
-  size40: Ao,
-  size50: Co,
-  size60: Go,
-  size70: Wo,
-  size75: Fo,
-  size80: Do,
-  size90: To,
+  linkEnabled: qt,
+  linkHover: Jt,
+  linkPressed: Qt,
+  linkVisited: Ut,
+  logoPrimary: xo,
+  menuItemBackgroundHover: Bo,
+  menuItemBackgroundSelected: Ho,
+  menuTextSectionHeader: Ro,
+  size00: Vo,
+  size05: qo,
+  size10: Yo,
+  size100: Mo,
+  size110: Eo,
+  size120: Ko,
+  size130: Xo,
+  size140: _o,
+  size15: Io,
+  size150: No,
+  size20: Ao,
+  size30: Co,
+  size40: Go,
+  size50: Wo,
+  size60: Fo,
+  size70: Do,
+  size75: To,
+  size80: Oo,
+  size90: Lo,
   skeleton01: Wt,
   skeleton02: Ft,
-  spacing10: Vo,
-  spacing100: aa,
-  spacing110: ra,
-  spacing120: ia,
-  spacing20: qo,
-  spacing30: Jo,
-  spacing40: Qo,
-  spacing50: Uo,
-  spacing60: Zo,
-  spacing70: ea,
-  spacing80: ta,
-  spacing90: oa,
-  spacingLarge: ca,
-  spacingMedium: sa,
-  spacingSmall: la,
-  spacingXlarge: ga,
-  spacingXsmall: na,
-  stateFocus: ua,
-  stateFocusContrastModeOffset: ka,
-  stateFocusContrastModeOutline: ya,
-  stateFocusInset: pa,
-  supportBackgroundImportant: no,
-  supportBackgroundImportantHover: lo,
-  supportBackgroundInfo: ro,
-  supportBackgroundInfoHover: io,
-  supportBackgroundSuccess: oo,
-  supportBackgroundSuccessHover: ao,
-  supportBackgroundWarning: so,
-  supportBackgroundWarningHover: co,
-  supportBorderImportant: eo,
-  supportBorderInfo: Zt,
-  supportBorderSuccess: Ut,
-  supportBorderWarning: to,
-  textDisabled: ho,
-  textInverse: ko,
-  textOnColor: yo,
-  textPlaceholder: mo,
-  textPrimary: go,
-  textSecondary: uo,
-  textTertiary: po,
-  textWarning: $o,
-  transitionDurationFast: $a,
-  transitionDurationNormal: ha,
-  transitionDurationSlow: da,
-  transitionPanelCollapse: ba,
-  transitionPanelExpand: va,
-  transitionTimingEaseIn: fa,
-  transitionTimingEaseOut: ma,
-  typographyFontFamily: Sa,
-  typographyFontSize10: ja,
-  typographyFontSize100: Ia,
-  typographyFontSize20: Pa,
-  typographyFontSize30: wa,
-  typographyFontSize40: za,
-  typographyFontSize50: Ba,
-  typographyFontSize60: xa,
-  typographyFontSize70: Ha,
-  typographyFontSize80: Ra,
-  typographyFontSize90: Ya,
-  typographyLineHeight10: Aa,
-  typographyLineHeight100: Ma,
-  typographyLineHeight20: Ca,
-  typographyLineHeight30: Ga,
-  typographyLineHeight40: Wa,
-  typographyLineHeight50: Fa,
-  typographyLineHeight60: Da,
-  typographyLineHeight70: Ta,
-  typographyLineHeight80: La,
-  typographyLineHeight90: Oa,
-  typographyWeightBlack: Qa,
-  typographyWeightBold: qa,
-  typographyWeightExtraBold: Ja,
-  typographyWeightExtraLight: Ka,
-  typographyWeightLight: Xa,
-  typographyWeightMedium: Na,
-  typographyWeightRegular: _a,
-  typographyWeightSemiBold: Va,
-  typographyWeightThin: Ea,
+  spacing10: Jo,
+  spacing100: ia,
+  spacing110: na,
+  spacing120: la,
+  spacing20: Qo,
+  spacing30: Uo,
+  spacing40: Zo,
+  spacing50: ea,
+  spacing60: ta,
+  spacing70: oa,
+  spacing80: aa,
+  spacing90: ra,
+  spacingLarge: ua,
+  spacingMedium: ga,
+  spacingSmall: ca,
+  spacingXlarge: pa,
+  spacingXsmall: sa,
+  stateFocus: ya,
+  stateFocusContrastModeOffset: ha,
+  stateFocusContrastModeOutline: da,
+  stateFocusInset: ka,
+  supportBackgroundImportant: lo,
+  supportBackgroundImportantHover: so,
+  supportBackgroundInfo: io,
+  supportBackgroundInfoHover: no,
+  supportBackgroundSuccess: ao,
+  supportBackgroundSuccessHover: ro,
+  supportBackgroundWarning: co,
+  supportBackgroundWarningHover: go,
+  supportBorderImportant: to,
+  supportBorderInfo: eo,
+  supportBorderSuccess: Zt,
+  supportBorderWarning: oo,
+  textDisabled: $o,
+  textInverse: ho,
+  textOnColor: ko,
+  textPlaceholder: fo,
+  textPrimary: uo,
+  textReadOnly: bo,
+  textSecondary: po,
+  textTertiary: yo,
+  textWarning: mo,
+  transitionDurationFast: fa,
+  transitionDurationNormal: ma,
+  transitionDurationSlow: $a,
+  transitionPanelCollapse: Sa,
+  transitionPanelExpand: ja,
+  transitionTimingEaseIn: va,
+  transitionTimingEaseOut: ba,
+  typographyFontFamily: Pa,
+  typographyFontSize10: wa,
+  typographyFontSize100: Ca,
+  typographyFontSize20: za,
+  typographyFontSize30: xa,
+  typographyFontSize40: Ba,
+  typographyFontSize50: Ha,
+  typographyFontSize60: Ra,
+  typographyFontSize70: Ya,
+  typographyFontSize80: Ia,
+  typographyFontSize90: Aa,
+  typographyLineHeight10: Ga,
+  typographyLineHeight100: Ka,
+  typographyLineHeight20: Wa,
+  typographyLineHeight30: Fa,
+  typographyLineHeight40: Da,
+  typographyLineHeight50: Ta,
+  typographyLineHeight60: Oa,
+  typographyLineHeight70: La,
+  typographyLineHeight80: Ma,
+  typographyLineHeight90: Ea,
+  typographyWeightBlack: Za,
+  typographyWeightBold: Qa,
+  typographyWeightExtraBold: Ua,
+  typographyWeightExtraLight: _a,
+  typographyWeightLight: Na,
+  typographyWeightMedium: qa,
+  typographyWeightRegular: Va,
+  typographyWeightSemiBold: Ja,
+  typographyWeightThin: Xa,
   windowSizesLg: o,
   windowSizesMd: t,
   windowSizesSm: e,
   windowSizesXl: a,
-  zIndexAbove: Za,
-  zIndexBase: Ua,
-  zIndexModal: er,
-  zIndexSkipToContent: or,
-  zIndexToast: tr
+  zIndexAbove: tr,
+  zIndexBase: er,
+  zIndexModal: or,
+  zIndexSkipToContent: rr,
+  zIndexToast: ar
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  ar as tokenDictionary,
-  rr as variables
+  ir as tokenDictionary,
+  nr as variables
 };

package/lib/style-dictionary-dist/token-dictionary.d.ts CHANGED Viewed

@@ -242,6 +242,7 @@ declare const tokens: {
     info: DesignToken;
     warning: DesignToken;
     important: DesignToken;
+    readOnly: DesignToken;
   };
   link: {
     enabled: DesignToken;
@@ -276,6 +277,7 @@ declare const tokens: {
     disabled: DesignToken;
     warning: DesignToken;
     placeholder: DesignToken;
+    readOnly: DesignToken;
   };
   badge: {
     background: DesignToken;

package/lib/style-dictionary-dist/variables.d.ts CHANGED Viewed

@@ -220,6 +220,8 @@ export const iconInfo: string;
 export const iconWarning: string;
 /** Ikonfärg för viktig information */
 export const iconImportant: string;
+/** Ikonfärg för read-only state */
+export const iconReadOnly: string;
 /** Primärlänkfärg */
 export const linkEnabled: string;
 /** Hover state för länkar */
@@ -268,6 +270,8 @@ export const textDisabled: string;
 export const textWarning: string;
 /** Textfärg för platshållare */
 export const textPlaceholder: string;
+/** Textfärg för read-only state */
+export const textReadOnly: string;
 export const badgeBackground: string;
 export const calendarDateBackgroundHover: string;
 export const calendarDateBackgroundSelected: string;
@@ -331,12 +335,12 @@ export const transitionDurationFast: string;
 export const transitionTimingEaseOut: number[];
 export const transitionTimingEaseIn: number[];
 export const transitionPanelCollapse: {
-  delay: number;
+  delay: string;
   duration: string;
   timingFunction: number[];
 };
 export const transitionPanelExpand: {
-  delay: number;
+  delay: string;
   duration: string;
   timingFunction: number[];
 };

package/package.json CHANGED Viewed

@@ -14,7 +14,7 @@
   "description": "Midas Theme",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "main": "./index.mjs",
   "types": "./index.d.ts",
   "exports": {

package/variables.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-black-opacity5: rgba(0, 0, 0, .05);--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-white-opacity13: rgba(255, 255, 255, .13);--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0rem;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-state-focus-contrast-mode-outline: 2px;--midas-state-focus-contrast-mode-offset: 2px;--midas-transition-duration-slow: .5s;--midas-transition-duration-normal: .3s;--midas-transition-duration-fast: .25s;--midas-transition-timing-ease-out: cubic-bezier(0, 0, .58, 1);--midas-transition-timing-ease-in: cubic-bezier(.42, 0, 1, 1);--midas-typography-font-family: Inter, sans-serif;--midas-typography-font-size-10: .75rem;--midas-typography-font-size-20: .875rem;--midas-typography-font-size-30: 1rem;--midas-typography-font-size-40: 1.125rem;--midas-typography-font-size-50: 1.25rem;--midas-typography-font-size-60: 1.5rem;--midas-typography-font-size-70: 1.625rem;--midas-typography-font-size-80: 2rem;--midas-typography-font-size-90: 2.25rem;--midas-typography-font-size-100: 2.625rem;--midas-typography-line-height-10: 1rem;--midas-typography-line-height-20: 1.125rem;--midas-typography-line-height-30: 1.25rem;--midas-typography-line-height-40: 1.375rem;--midas-typography-line-height-50: 1.5rem;--midas-typography-line-height-60: 1.75rem;--midas-typography-line-height-70: 2rem;--midas-typography-line-height-80: 2.25rem;--midas-typography-line-height-90: 2.5rem;--midas-typography-line-height-100: 3rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-button-background-tertiary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-danger-base: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-button-background-danger-hover: light-dark(var(--midas-color-signal-red-120), var(--midas-color-signal-red-120));--midas-button-background-danger-active: light-dark(var(--midas-color-signal-red-150), var(--midas-color-signal-red-150));--midas-button-background-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-button-border-secondary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-button-icon-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-gray-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-gray-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-gray-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-gray-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-gray-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-gray-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-gray-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-gray-170));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-badge-background: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-calendar-date-background-selected: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-start-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-in-range: light-dark(var(--midas-color-blue-20), var(--midas-color-blue-150));--midas-calendar-date-background-end-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-logo-primary: light-dark(var(--midas-color-red-100), var(--midas-color-white-base));--midas-menu-item-background-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-190));--midas-menu-item-background-selected: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-menu-text-section-header: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-spacing-xsmall: var(--midas-size-20);--midas-spacing-small: var(--midas-size-40);--midas-spacing-medium: var(--midas-size-80);--midas-spacing-large: var(--midas-size-100);--midas-spacing-xlarge: var(--midas-size-120);--midas-transition-panel-collapse: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out) 0;--midas-transition-panel-expand: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-in) 0}
1	+ :root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-black-opacity5: rgba(0, 0, 0, .05);--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-white-opacity13: rgba(255, 255, 255, .13);--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0rem;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-state-focus-contrast-mode-outline: 2px;--midas-state-focus-contrast-mode-offset: 2px;--midas-transition-duration-slow: .5s;--midas-transition-duration-normal: .3s;--midas-transition-duration-fast: .25s;--midas-transition-timing-ease-out: cubic-bezier(0, 0, .58, 1);--midas-transition-timing-ease-in: cubic-bezier(.42, 0, 1, 1);--midas-typography-font-family: Inter, sans-serif;--midas-typography-font-size-10: .75rem;--midas-typography-font-size-20: .875rem;--midas-typography-font-size-30: 1rem;--midas-typography-font-size-40: 1.125rem;--midas-typography-font-size-50: 1.25rem;--midas-typography-font-size-60: 1.5rem;--midas-typography-font-size-70: 1.625rem;--midas-typography-font-size-80: 2rem;--midas-typography-font-size-90: 2.25rem;--midas-typography-font-size-100: 2.625rem;--midas-typography-line-height-10: 1rem;--midas-typography-line-height-20: 1.125rem;--midas-typography-line-height-30: 1.25rem;--midas-typography-line-height-40: 1.375rem;--midas-typography-line-height-50: 1.5rem;--midas-typography-line-height-60: 1.75rem;--midas-typography-line-height-70: 2rem;--midas-typography-line-height-80: 2.25rem;--midas-typography-line-height-90: 2.5rem;--midas-typography-line-height-100: 3rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-button-background-tertiary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-danger-base: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-button-background-danger-hover: light-dark(var(--midas-color-signal-red-120), var(--midas-color-signal-red-120));--midas-button-background-danger-active: light-dark(var(--midas-color-signal-red-150), var(--midas-color-signal-red-150));--midas-button-background-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-button-border-secondary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-button-icon-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-icon-read-only: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-gray-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-gray-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-gray-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-gray-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-gray-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-gray-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-gray-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-gray-170));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-text-read-only: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-80));--midas-badge-background: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-calendar-date-background-selected: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-start-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-in-range: light-dark(var(--midas-color-blue-20), var(--midas-color-blue-150));--midas-calendar-date-background-end-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-logo-primary: light-dark(var(--midas-color-red-100), var(--midas-color-white-base));--midas-menu-item-background-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-190));--midas-menu-item-background-selected: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-menu-text-section-header: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-spacing-xsmall: var(--midas-size-20);--midas-spacing-small: var(--midas-size-40);--midas-spacing-medium: var(--midas-size-80);--midas-spacing-large: var(--midas-size-100);--midas-spacing-xlarge: var(--midas-size-120);--midas-transition-panel-collapse: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out) 0ms;--midas-transition-panel-expand: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-in) 0ms}