@midas-ds/theme 3.12.12 → 3.12.13

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 3.12.13 (2026-03-18)
2
+
3
+ ### 🔧 Maintenance
4
+
5
+ - **components,theme:** standardize animation tokens and transitions ([09a2ce6a04](https://github.com/migrationsverket/midas/commit/09a2ce6a04))
6
+
1
7
  ## 3.12.12 (2026-03-16)
2
8
 
3
9
  This was a version bump only for theme to align it with other projects, there were no code changes.
package/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const si = {
1
+ const pi = {
2
2
  base: {
3
3
  10: {
4
4
  key: "{base.10}",
@@ -4830,6 +4830,40 @@ const si = {
4830
4830
  name: "transitionDurationFast",
4831
4831
  attributes: {},
4832
4832
  path: ["transition", "duration", "fast"]
4833
+ },
4834
+ quick: {
4835
+ key: "{transition.duration.quick}",
4836
+ $value: "150ms",
4837
+ $type: "duration",
4838
+ $description: "Kort mikroanimation. 150ms. Används för snabba overlay-rörelser som modaler och select-öppningar som är perceptibelt animerade men ändå snabba.",
4839
+ filePath: "packages/theme/tokens/transitions.json",
4840
+ isSource: !0,
4841
+ original: {
4842
+ $value: "150ms",
4843
+ $type: "duration",
4844
+ $description: "Kort mikroanimation. 150ms. Används för snabba overlay-rörelser som modaler och select-öppningar som är perceptibelt animerade men ändå snabba.",
4845
+ key: "{transition.duration.quick}"
4846
+ },
4847
+ name: "transitionDurationQuick",
4848
+ attributes: {},
4849
+ path: ["transition", "duration", "quick"]
4850
+ },
4851
+ instant: {
4852
+ key: "{transition.duration.instant}",
4853
+ $value: "100ms",
4854
+ $type: "duration",
4855
+ $description: "Omedelbar återkoppling. 100ms. Används för direkta tillståndsförändringar som hover-bakgrunder och färgövergångar — allt längre upplevs som tröghet.",
4856
+ filePath: "packages/theme/tokens/transitions.json",
4857
+ isSource: !0,
4858
+ original: {
4859
+ $value: "100ms",
4860
+ $type: "duration",
4861
+ $description: "Omedelbar återkoppling. 100ms. Används för direkta tillståndsförändringar som hover-bakgrunder och färgövergångar — allt längre upplevs som tröghet.",
4862
+ key: "{transition.duration.instant}"
4863
+ },
4864
+ name: "transitionDurationInstant",
4865
+ attributes: {},
4866
+ path: ["transition", "duration", "instant"]
4833
4867
  }
4834
4868
  },
4835
4869
  timing: {
@@ -4866,6 +4900,23 @@ const si = {
4866
4900
  name: "transitionTimingEaseIn",
4867
4901
  attributes: {},
4868
4902
  path: ["transition", "timing", "easeIn"]
4903
+ },
4904
+ easeInOut: {
4905
+ key: "{transition.timing.easeInOut}",
4906
+ $value: [0.42, 0, 0.58, 1],
4907
+ $type: "cubicBezier",
4908
+ $description: "Accelererar sedan decelererar symmetriskt. Används för element som rör sig mellan två positioner på skärmen.",
4909
+ filePath: "packages/theme/tokens/transitions.json",
4910
+ isSource: !0,
4911
+ original: {
4912
+ $value: [0.42, 0, 0.58, 1],
4913
+ $type: "cubicBezier",
4914
+ $description: "Accelererar sedan decelererar symmetriskt. Används för element som rör sig mellan två positioner på skärmen.",
4915
+ key: "{transition.timing.easeInOut}"
4916
+ },
4917
+ name: "transitionTimingEaseInOut",
4918
+ attributes: {},
4919
+ path: ["transition", "timing", "easeInOut"]
4869
4920
  }
4870
4921
  },
4871
4922
  panel: {
@@ -5713,35 +5764,35 @@ const si = {
5713
5764
  path: ["zIndex", "skipToContent"]
5714
5765
  }
5715
5766
  }
5716
- }, e = "0.125rem", t = "0.188rem", a = "0.25rem", o = "0.375rem", r = "0.5rem", i = "0.625rem", n = "0.75rem", s = "0.875rem", l = "0.938rem", c = "1rem", p = "1.25rem", d = "1.5rem", g = "1.75rem", u = "2rem", y = "2.5rem", k = "2.75rem", h = "3rem", m = "0rem", $ = "0.063rem", b = "480px", f = "768px", v = "1024px", S = "1280px", j = "(max-width: calc(480px - 1px))", x = "(min-width: 480px)", P = "(min-width: 768px)", w = "(min-width: 1024px)", z = "(min-width: 1280px)", B = "light-dark(#143c50, #2e7ca5)", H = "light-dark(#25607f, #25607f)", R = "light-dark(#2e7ca5, #143c50)", I = "transparent", Y = "light-dark(#e6e6e6, #212121)", C = "light-dark(#d9d9d9, #262626)", A = "light-dark(#0000000d, #ffffff21)", G = "light-dark(#d9d9d9, #262626)", F = "light-dark(#e62323, #e62323)", W = "light-dark(#bc1d1d, #bc1d1d)", U = "light-dark(#7d1313, #7d1313)", T = "light-dark(#f2f2f2, #262626)", L = "light-dark(#143c50, #f2f2f2)", D = "light-dark(#0000000d, #ffffff21)", O = "light-dark(#00000033, #ffffff33)", M = "#000", E = "#0d0d0d", K = "#0000000d", X = "#fff", Z = "#e6e6e6", N = "#ffffff21", _ = "#f2f2f2", V = "#e6e6e6", q = "#d9d9d9", J = "#ccc", Q = "#bfbfbf", ee = "#b3b3b3", te = "#a6a6a6", ae = "#999", oe = "#8c8c8c", re = "#808080", ie = "#737373", ne = "#666", se = "#5d5d5d", le = "#525252", ce = "#474747", pe = "#383838", de = "#333", ge = "#262626", ue = "#212121", ye = "#171717", ke = "#eaf2f6", he = "#d5e5ed", me = "#abcbdb", $e = "#94BCD1", be = "#82b0c9", fe = "#6CA3C0", ve = "#5897b8", Se = "#4289ad", je = "#2e7ca5", xe = "#2C7399", Pe = "#29698C", we = "#25607f", ze = "#143c50", Be = "#b46ab4", He = "#954b95", Re = "#b90835", Ie = "oklch(0.66 0.18 45)", Ye = "#eaf2f6", Ce = "#d5e5ed", Ae = "#06c", Ge = "#162b33", Fe = "#112127", We = "#d5f2d9", Ue = "#bae5c5", Te = "#008d3c", Le = "#194B33", De = "#163328", Oe = "#112722", Me = "#fff8e2", Ee = "#fff1cd", Ke = "#ffeab8", Xe = "#ffe3a3", Ze = "#ffdc8b", Ne = "#ffd47b", _e = "#fdcd5d", Ve = "#fbc640", qe = "#fabf1b", Je = "#fab900", Qe = "#daa105", et = "#bd8c1e", tt = "#a17927", at = "#88672a", ot = "#70562b", rt = "#5a4629", it = "#453826", nt = "#322a20", st = "#201c18", lt = "#0f0e0e", ct = "#ffefef", pt = "#ffdfdf", dt = "#fcc8c8", gt = "#f9b0b0", ut = "#f69999", yt = "#f38181", kt = "#ef6a6a", ht = "#EC5252", mt = "#e93b3b", $t = "#e62323", bt = "#d12020", ft = "#bc1d1d", vt = "#a71919", St = "#921616", jt = "#7d1313", xt = "#691010", Pt = "#540d0d", wt = "#3f0a0a", zt = "#2a0606", Bt = "#150303", Ht = "0.125rem", Rt = "0.25rem", It = "0.5rem", Yt = "0.75rem", Ct = "1rem", At = "1.5rem", Gt = "2rem", Ft = "2.5rem", Wt = "3rem", Ut = "0.25rem", Tt = "0.5rem", Lt = "1rem", Dt = "1.5rem", Ot = "2rem", Mt = "0.125rem", Et = "0.188rem", Kt = "0.25rem", Xt = "0.375rem", Zt = "0.5rem", Nt = "0.625rem", _t = "0.75rem", Vt = "0.875rem", qt = "0.938rem", Jt = "1rem", Qt = "1.25rem", ea = "1.5rem", ta = "1.75rem", aa = "2rem", oa = "2.5rem", ra = "2.75rem", ia = "3rem", na = "0rem", sa = "0.063rem", la = "2.5rem", ca = "1rem", pa = "1.25rem", da = "2rem", ga = "2.5rem", ua = "3rem", ya = "light-dark(#fff, #171717)", ka = "light-dark(#e6e6e6, #212121)", ha = "light-dark(#171717, #f2f2f2)", ma = "light-dark(#f2f2f2, #262626)", $a = "light-dark(#e6e6e6, #333)", ba = "light-dark(#d9d9d9, #383838)", fa = "light-dark(#ccc, #474747)", va = "light-dark(#fff, #383838)", Sa = "light-dark(#e6e6e6, #474747)", ja = "light-dark(#d9d9d9, #525252)", xa = "light-dark(#ccc, #5d5d5d)", Pa = "light-dark(#d9d9d9, #383838)", wa = "light-dark(#ccc, #474747)", za = "light-dark(#bfbfbf, #525252)", Ba = "light-dark(#f2f2f2, #262626)", Ha = "light-dark(#e6e6e6, #333)", Ra = "light-dark(#d9d9d9, #383838)", Ia = "light-dark(#b90835, #b90835)", Ya = "light-dark(#171717, #f2f2f2)", Ca = "light-dark(#737373, #8c8c8c)", Aa = "light-dark(#bfbfbf, #525252)", Ga = "light-dark(#143c50, #2e7ca5)", Fa = "light-dark(#bfbfbf, #525252)", Wa = "1px", Ua = "light-dark(#f2f2f2, #262626)", Ta = "light-dark(#e6e6e6, #333)", La = "light-dark(#d9d9d9, #383838)", Da = "light-dark(#fff, #383838)", Oa = "light-dark(#e6e6e6, #474747)", Ma = "light-dark(#d9d9d9, #525252)", Ea = "light-dark(#f2f2f2, #262626)", Ka = "light-dark(#f2f2f2, #262626)", Xa = "light-dark(#d9d9d9, #383838)", Za = "light-dark(#171717, #f2f2f2)", Na = "light-dark(#525252, #a6a6a6)", _a = "light-dark(#143c50, #f2f2f2)", Va = "light-dark(#fff, #171717)", qa = "light-dark(#fff, #fff)", Ja = "light-dark(#bfbfbf, #525252)", Qa = "light-dark(#008d3c, #008d3c)", eo = "light-dark(#06c, #06c)", to = "light-dark(#e62323, #e62323)", ao = "oklch(0.66 0.18 45)", oo = "light-dark(#bfbfbf, #383838)", ro = "light-dark(#29698C, #6CA3C0)", io = "light-dark(#143c50, #94BCD1)", no = "light-dark(#171717, #abcbdb)", so = "light-dark(#954b95, #b46ab4)", lo = "light-dark(#008d3c, #008d3c)", co = "light-dark(#06c, #06c)", po = "oklch(0.66 0.18 45)", go = "light-dark(#e62323, #e62323)", uo = "light-dark(#d5f2d9, #112722)", yo = "light-dark(#bae5c5, #163328)", ko = "light-dark(#eaf2f6, #112127)", ho = "light-dark(#d5e5ed, #162b33)", mo = "light-dark(#fff8e2, #322a20)", $o = "light-dark(#fff1cd, #453826)", bo = "light-dark(#ffdfdf, #3f0a0a)", fo = "light-dark(#fcc8c8, #540d0d)", vo = "light-dark(#d5f2d9, #112722)", So = "light-dark(#008d3c, #008d3c)", jo = "light-dark(#eaf2f6, #112127)", xo = "light-dark(#06c, #06c)", Po = "light-dark(#fff8e2, #322a20)", wo = "oklch(0.66 0.18 45)", zo = "light-dark(#ffdfdf, #3f0a0a)", Bo = "light-dark(#e62323, #e62323)", Ho = "light-dark(#171717, #f2f2f2)", Ro = "light-dark(#525252, #a6a6a6)", Io = "light-dark(#143c50, #f2f2f2)", Yo = "light-dark(#fff, #fff)", Co = "light-dark(#f2f2f2, #171717)", Ao = "light-dark(#bfbfbf, #525252)", Go = "light-dark(#e62323, #EC5252)", Fo = "light-dark(#a6a6a6, #525252)", Wo = "light-dark(#737373, #999)", Uo = "light-dark(#e62323, #e62323)", To = "light-dark(#0000001a, #ffffff1a)", Lo = "light-dark(#143c50, #5897b8)", Do = "light-dark(#143c50, #5897b8)", Oo = "light-dark(#d5e5ed, #143c50)", Mo = "light-dark(#143c50, #5897b8)", Eo = "light-dark(#b90835, #fff)", Ko = "light-dark(#e6e6e6, #212121)", Xo = "light-dark(#f2f2f2, #262626)", Zo = "light-dark(#525252, #a6a6a6)", No = "0.125rem", _o = "0.375rem", Vo = "0.625rem", qo = "0.75rem", Jo = "0.875rem", Qo = "0.938rem", er = "1.25rem", tr = "2.5rem", ar = "3rem", or = "0.25rem", rr = "0.5rem", ir = "1rem", nr = "1.5rem", sr = "2rem", lr = "0.063rem", cr = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", pr = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", dr = "2px", gr = "2px", ur = "inset 0 0 0 2px light-dark(#e62323, #e62323)", yr = "500ms", kr = "300ms", hr = "250ms", mr = [0, 0, 0.58, 1], $r = [0.42, 0, 1, 1], br = {
5767
+ }, e = "0.125rem", t = "0.188rem", a = "0.25rem", o = "0.375rem", r = "0.5rem", i = "0.625rem", n = "0.75rem", s = "0.875rem", l = "0.938rem", c = "1rem", p = "1.25rem", d = "1.5rem", g = "1.75rem", u = "2rem", y = "2.5rem", k = "2.75rem", h = "3rem", m = "0rem", $ = "0.063rem", b = "480px", f = "768px", v = "1024px", S = "1280px", j = "(max-width: calc(480px - 1px))", x = "(min-width: 480px)", P = "(min-width: 768px)", w = "(min-width: 1024px)", z = "(min-width: 1280px)", B = "light-dark(#143c50, #2e7ca5)", H = "light-dark(#25607f, #25607f)", R = "light-dark(#2e7ca5, #143c50)", I = "transparent", Y = "light-dark(#e6e6e6, #212121)", A = "light-dark(#d9d9d9, #262626)", C = "light-dark(#0000000d, #ffffff21)", G = "light-dark(#d9d9d9, #262626)", F = "light-dark(#e62323, #e62323)", W = "light-dark(#bc1d1d, #bc1d1d)", U = "light-dark(#7d1313, #7d1313)", T = "light-dark(#f2f2f2, #262626)", D = "light-dark(#143c50, #f2f2f2)", L = "light-dark(#0000000d, #ffffff21)", O = "light-dark(#00000033, #ffffff33)", E = "#000", M = "#0d0d0d", K = "#0000000d", X = "#fff", Z = "#e6e6e6", q = "#ffffff21", N = "#f2f2f2", _ = "#e6e6e6", Q = "#d9d9d9", V = "#ccc", J = "#bfbfbf", ee = "#b3b3b3", te = "#a6a6a6", ae = "#999", oe = "#8c8c8c", re = "#808080", ie = "#737373", ne = "#666", se = "#5d5d5d", le = "#525252", ce = "#474747", pe = "#383838", de = "#333", ge = "#262626", ue = "#212121", ye = "#171717", ke = "#eaf2f6", he = "#d5e5ed", me = "#abcbdb", $e = "#94BCD1", be = "#82b0c9", fe = "#6CA3C0", ve = "#5897b8", Se = "#4289ad", je = "#2e7ca5", xe = "#2C7399", Pe = "#29698C", we = "#25607f", ze = "#143c50", Be = "#b46ab4", He = "#954b95", Re = "#b90835", Ie = "oklch(0.66 0.18 45)", Ye = "#eaf2f6", Ae = "#d5e5ed", Ce = "#06c", Ge = "#162b33", Fe = "#112127", We = "#d5f2d9", Ue = "#bae5c5", Te = "#008d3c", De = "#194B33", Le = "#163328", Oe = "#112722", Ee = "#fff8e2", Me = "#fff1cd", Ke = "#ffeab8", Xe = "#ffe3a3", Ze = "#ffdc8b", qe = "#ffd47b", Ne = "#fdcd5d", _e = "#fbc640", Qe = "#fabf1b", Ve = "#fab900", Je = "#daa105", et = "#bd8c1e", tt = "#a17927", at = "#88672a", ot = "#70562b", rt = "#5a4629", it = "#453826", nt = "#322a20", st = "#201c18", lt = "#0f0e0e", ct = "#ffefef", pt = "#ffdfdf", dt = "#fcc8c8", gt = "#f9b0b0", ut = "#f69999", yt = "#f38181", kt = "#ef6a6a", ht = "#EC5252", mt = "#e93b3b", $t = "#e62323", bt = "#d12020", ft = "#bc1d1d", vt = "#a71919", St = "#921616", jt = "#7d1313", xt = "#691010", Pt = "#540d0d", wt = "#3f0a0a", zt = "#2a0606", Bt = "#150303", Ht = "0.125rem", Rt = "0.25rem", It = "0.5rem", Yt = "0.75rem", At = "1rem", Ct = "1.5rem", Gt = "2rem", Ft = "2.5rem", Wt = "3rem", Ut = "0.25rem", Tt = "0.5rem", Dt = "1rem", Lt = "1.5rem", Ot = "2rem", Et = "0.125rem", Mt = "0.188rem", Kt = "0.25rem", Xt = "0.375rem", Zt = "0.5rem", qt = "0.625rem", Nt = "0.75rem", _t = "0.875rem", Qt = "0.938rem", Vt = "1rem", Jt = "1.25rem", ea = "1.5rem", ta = "1.75rem", aa = "2rem", oa = "2.5rem", ra = "2.75rem", ia = "3rem", na = "0rem", sa = "0.063rem", la = "2.5rem", ca = "1rem", pa = "1.25rem", da = "2rem", ga = "2.5rem", ua = "3rem", ya = "light-dark(#fff, #171717)", ka = "light-dark(#e6e6e6, #212121)", ha = "light-dark(#171717, #f2f2f2)", ma = "light-dark(#f2f2f2, #262626)", $a = "light-dark(#e6e6e6, #333)", ba = "light-dark(#d9d9d9, #383838)", fa = "light-dark(#ccc, #474747)", va = "light-dark(#fff, #383838)", Sa = "light-dark(#e6e6e6, #474747)", ja = "light-dark(#d9d9d9, #525252)", xa = "light-dark(#ccc, #5d5d5d)", Pa = "light-dark(#d9d9d9, #383838)", wa = "light-dark(#ccc, #474747)", za = "light-dark(#bfbfbf, #525252)", Ba = "light-dark(#f2f2f2, #262626)", Ha = "light-dark(#e6e6e6, #333)", Ra = "light-dark(#d9d9d9, #383838)", Ia = "light-dark(#b90835, #b90835)", Ya = "light-dark(#171717, #f2f2f2)", Aa = "light-dark(#737373, #8c8c8c)", Ca = "light-dark(#bfbfbf, #525252)", Ga = "light-dark(#143c50, #2e7ca5)", Fa = "light-dark(#bfbfbf, #525252)", Wa = "1px", Ua = "light-dark(#f2f2f2, #262626)", Ta = "light-dark(#e6e6e6, #333)", Da = "light-dark(#d9d9d9, #383838)", La = "light-dark(#fff, #383838)", Oa = "light-dark(#e6e6e6, #474747)", Ea = "light-dark(#d9d9d9, #525252)", Ma = "light-dark(#f2f2f2, #262626)", Ka = "light-dark(#f2f2f2, #262626)", Xa = "light-dark(#d9d9d9, #383838)", Za = "light-dark(#171717, #f2f2f2)", qa = "light-dark(#525252, #a6a6a6)", Na = "light-dark(#143c50, #f2f2f2)", _a = "light-dark(#fff, #171717)", Qa = "light-dark(#fff, #fff)", Va = "light-dark(#bfbfbf, #525252)", Ja = "light-dark(#008d3c, #008d3c)", eo = "light-dark(#06c, #06c)", to = "light-dark(#e62323, #e62323)", ao = "oklch(0.66 0.18 45)", oo = "light-dark(#bfbfbf, #383838)", ro = "light-dark(#29698C, #6CA3C0)", io = "light-dark(#143c50, #94BCD1)", no = "light-dark(#171717, #abcbdb)", so = "light-dark(#954b95, #b46ab4)", lo = "light-dark(#008d3c, #008d3c)", co = "light-dark(#06c, #06c)", po = "oklch(0.66 0.18 45)", go = "light-dark(#e62323, #e62323)", uo = "light-dark(#d5f2d9, #112722)", yo = "light-dark(#bae5c5, #163328)", ko = "light-dark(#eaf2f6, #112127)", ho = "light-dark(#d5e5ed, #162b33)", mo = "light-dark(#fff8e2, #322a20)", $o = "light-dark(#fff1cd, #453826)", bo = "light-dark(#ffdfdf, #3f0a0a)", fo = "light-dark(#fcc8c8, #540d0d)", vo = "light-dark(#d5f2d9, #112722)", So = "light-dark(#008d3c, #008d3c)", jo = "light-dark(#eaf2f6, #112127)", xo = "light-dark(#06c, #06c)", Po = "light-dark(#fff8e2, #322a20)", wo = "oklch(0.66 0.18 45)", zo = "light-dark(#ffdfdf, #3f0a0a)", Bo = "light-dark(#e62323, #e62323)", Ho = "light-dark(#171717, #f2f2f2)", Ro = "light-dark(#525252, #a6a6a6)", Io = "light-dark(#143c50, #f2f2f2)", Yo = "light-dark(#fff, #fff)", Ao = "light-dark(#f2f2f2, #171717)", Co = "light-dark(#bfbfbf, #525252)", Go = "light-dark(#e62323, #EC5252)", Fo = "light-dark(#a6a6a6, #525252)", Wo = "light-dark(#737373, #999)", Uo = "light-dark(#e62323, #e62323)", To = "light-dark(#0000001a, #ffffff1a)", Do = "light-dark(#143c50, #5897b8)", Lo = "light-dark(#143c50, #5897b8)", Oo = "light-dark(#d5e5ed, #143c50)", Eo = "light-dark(#143c50, #5897b8)", Mo = "light-dark(#b90835, #fff)", Ko = "light-dark(#e6e6e6, #212121)", Xo = "light-dark(#f2f2f2, #262626)", Zo = "light-dark(#525252, #a6a6a6)", qo = "0.125rem", No = "0.375rem", _o = "0.625rem", Qo = "0.75rem", Vo = "0.875rem", Jo = "0.938rem", er = "1.25rem", tr = "2.5rem", ar = "3rem", or = "0.25rem", rr = "0.5rem", ir = "1rem", nr = "1.5rem", sr = "2rem", lr = "0.063rem", cr = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", pr = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", dr = "2px", gr = "2px", ur = "inset 0 0 0 2px light-dark(#e62323, #e62323)", yr = "500ms", kr = "300ms", hr = "250ms", mr = "150ms", $r = "100ms", br = [0, 0, 0.58, 1], fr = [0.42, 0, 1, 1], vr = [0.42, 0, 0.58, 1], Sr = {
5717
5768
  delay: "0ms",
5718
5769
  duration: "300ms",
5719
5770
  timingFunction: [0, 0, 0.58, 1]
5720
- }, fr = {
5771
+ }, jr = {
5721
5772
  delay: "0ms",
5722
5773
  duration: "300ms",
5723
5774
  timingFunction: [0.42, 0, 1, 1]
5724
- }, vr = "Inter, sans-serif", Sr = "0.75rem", jr = "0.875rem", xr = "1rem", Pr = "1.125rem", wr = "1.25rem", zr = "1.5rem", Br = "1.625rem", Hr = "2rem", Rr = "2.25rem", Ir = "2.625rem", Yr = "1rem", Cr = "1.125rem", Ar = "1.25rem", Gr = "1.375rem", Fr = "1.5rem", Wr = "1.75rem", Ur = "2rem", Tr = "2.25rem", Lr = "2.5rem", Dr = "3rem", Or = 100, Mr = 200, Er = 300, Kr = 400, Xr = 500, Zr = 600, Nr = 700, _r = 800, Vr = 900, qr = {
5775
+ }, xr = "Inter, sans-serif", Pr = "0.75rem", wr = "0.875rem", zr = "1rem", Br = "1.125rem", Hr = "1.25rem", Rr = "1.5rem", Ir = "1.625rem", Yr = "2rem", Ar = "2.25rem", Cr = "2.625rem", Gr = "1rem", Fr = "1.125rem", Wr = "1.25rem", Ur = "1.375rem", Tr = "1.5rem", Dr = "1.75rem", Lr = "2rem", Or = "2.25rem", Er = "2.5rem", Mr = "3rem", Kr = 100, Xr = 200, Zr = 300, qr = 400, Nr = 500, _r = 600, Qr = 700, Vr = 800, Jr = 900, ei = {
5725
5776
  fontFamily: "Inter, sans-serif",
5726
5777
  fontSize: "1rem",
5727
5778
  fontWeight: 400,
5728
5779
  lineHeight: "1.25rem"
5729
- }, Jr = {
5780
+ }, ti = {
5730
5781
  fontFamily: "Inter, sans-serif",
5731
5782
  fontSize: "0.875rem",
5732
5783
  fontWeight: 400,
5733
5784
  lineHeight: "1.125rem"
5734
- }, Qr = {
5785
+ }, ai = {
5735
5786
  fontFamily: "Inter, sans-serif",
5736
5787
  fontSize: "0.875rem",
5737
5788
  fontWeight: 400,
5738
5789
  lineHeight: "1.125rem"
5739
- }, ei = {
5790
+ }, oi = {
5740
5791
  fontFamily: "Inter, sans-serif",
5741
5792
  fontSize: "0.75rem",
5742
5793
  fontWeight: 400,
5743
5794
  lineHeight: "1rem"
5744
- }, ti = 1, ai = 10, oi = 500, ri = 1e3, ii = 1100, ni = 1200, li = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5795
+ }, ri = 1, ii = 10, ni = 500, si = 1e3, li = 1100, ci = 1200, di = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5745
5796
  __proto__: null,
5746
5797
  backgroundBase: ya,
5747
5798
  backgroundHover: ka,
@@ -5768,8 +5819,8 @@ const si = {
5768
5819
  base90: p,
5769
5820
  borderColorDisabled: Fa,
5770
5821
  borderColorPrimary: Ya,
5771
- borderColorSecondary: Ca,
5772
- borderColorSubtle: Aa,
5822
+ borderColorSecondary: Aa,
5823
+ borderColorSubtle: Ca,
5773
5824
  borderColorTertiary: Ga,
5774
5825
  borderWidth: Wa,
5775
5826
  brandPrimary: Ia,
@@ -5785,21 +5836,21 @@ const si = {
5785
5836
  buttonBackgroundPrimaryActive: R,
5786
5837
  buttonBackgroundPrimaryBase: B,
5787
5838
  buttonBackgroundPrimaryHover: H,
5788
- buttonBackgroundSecondaryActive: C,
5839
+ buttonBackgroundSecondaryActive: A,
5789
5840
  buttonBackgroundSecondaryBase: I,
5790
5841
  buttonBackgroundSecondaryHover: Y,
5791
5842
  buttonBackgroundTertiaryActive: G,
5792
- buttonBackgroundTertiaryHover: A,
5793
- buttonBorderSecondary: L,
5843
+ buttonBackgroundTertiaryHover: C,
5844
+ buttonBorderSecondary: D,
5794
5845
  buttonIconActive: O,
5795
- buttonIconHover: D,
5796
- calendarDateBackgroundEndRange: Mo,
5846
+ buttonIconHover: L,
5847
+ calendarDateBackgroundEndRange: Eo,
5797
5848
  calendarDateBackgroundHover: To,
5798
5849
  calendarDateBackgroundInRange: Oo,
5799
- calendarDateBackgroundSelected: Lo,
5800
- calendarDateBackgroundStartRange: Do,
5801
- colorBlackBase: M,
5802
- colorBlackHover: E,
5850
+ calendarDateBackgroundSelected: Do,
5851
+ calendarDateBackgroundStartRange: Lo,
5852
+ colorBlackBase: E,
5853
+ colorBlackHover: M,
5803
5854
  colorBlackOpacity5: K,
5804
5855
  colorBlue10: ke,
5805
5856
  colorBlue100: je,
@@ -5814,7 +5865,7 @@ const si = {
5814
5865
  colorBlue70: fe,
5815
5866
  colorBlue80: ve,
5816
5867
  colorBlue90: Se,
5817
- colorGray10: _,
5868
+ colorGray10: N,
5818
5869
  colorGray100: re,
5819
5870
  colorGray110: ie,
5820
5871
  colorGray120: ne,
@@ -5825,11 +5876,11 @@ const si = {
5825
5876
  colorGray170: de,
5826
5877
  colorGray180: ge,
5827
5878
  colorGray190: ue,
5828
- colorGray20: V,
5879
+ colorGray20: _,
5829
5880
  colorGray200: ye,
5830
- colorGray30: q,
5831
- colorGray40: J,
5832
- colorGray50: Q,
5881
+ colorGray30: Q,
5882
+ colorGray40: V,
5883
+ colorGray50: J,
5833
5884
  colorGray60: ee,
5834
5885
  colorGray70: te,
5835
5886
  colorGray80: ae,
@@ -5839,13 +5890,13 @@ const si = {
5839
5890
  colorPurple80: Be,
5840
5891
  colorRed100: Re,
5841
5892
  colorSignalBlue10: Ye,
5842
- colorSignalBlue100: Ae,
5893
+ colorSignalBlue100: Ce,
5843
5894
  colorSignalBlue170: Ge,
5844
5895
  colorSignalBlue180: Fe,
5845
- colorSignalBlue20: Ce,
5896
+ colorSignalBlue20: Ae,
5846
5897
  colorSignalGreen100: Te,
5847
- colorSignalGreen150: Le,
5848
- colorSignalGreen170: De,
5898
+ colorSignalGreen150: De,
5899
+ colorSignalGreen170: Le,
5849
5900
  colorSignalGreen180: Oe,
5850
5901
  colorSignalGreen20: We,
5851
5902
  colorSignalGreen30: Ue,
@@ -5869,9 +5920,9 @@ const si = {
5869
5920
  colorSignalRed70: kt,
5870
5921
  colorSignalRed80: ht,
5871
5922
  colorSignalRed90: mt,
5872
- colorSignalYellow10: Me,
5873
- colorSignalYellow100: Je,
5874
- colorSignalYellow110: Qe,
5923
+ colorSignalYellow10: Ee,
5924
+ colorSignalYellow100: Ve,
5925
+ colorSignalYellow110: Je,
5875
5926
  colorSignalYellow120: et,
5876
5927
  colorSignalYellow130: tt,
5877
5928
  colorSignalYellow140: at,
@@ -5880,35 +5931,35 @@ const si = {
5880
5931
  colorSignalYellow170: it,
5881
5932
  colorSignalYellow180: nt,
5882
5933
  colorSignalYellow190: st,
5883
- colorSignalYellow20: Ee,
5934
+ colorSignalYellow20: Me,
5884
5935
  colorSignalYellow200: lt,
5885
5936
  colorSignalYellow30: Ke,
5886
5937
  colorSignalYellow40: Xe,
5887
5938
  colorSignalYellow50: Ze,
5888
- colorSignalYellow60: Ne,
5889
- colorSignalYellow70: _e,
5890
- colorSignalYellow80: Ve,
5891
- colorSignalYellow90: qe,
5939
+ colorSignalYellow60: qe,
5940
+ colorSignalYellow70: Ne,
5941
+ colorSignalYellow80: _e,
5942
+ colorSignalYellow90: Qe,
5892
5943
  colorWhiteBase: X,
5893
5944
  colorWhiteHover: Z,
5894
- colorWhiteOpacity13: N,
5895
- field01Active: La,
5945
+ colorWhiteOpacity13: q,
5946
+ field01Active: Da,
5896
5947
  field01Base: Ua,
5897
5948
  field01Hover: Ta,
5898
- field02Active: Ma,
5899
- field02Base: Da,
5949
+ field02Active: Ea,
5950
+ field02Base: La,
5900
5951
  field02Hover: Oa,
5901
- fieldDisabled: Ea,
5902
- iconDisabled: Ja,
5952
+ fieldDisabled: Ma,
5953
+ iconDisabled: Va,
5903
5954
  iconImportant: ao,
5904
5955
  iconInfo: eo,
5905
- iconInverse: Va,
5906
- iconOnColor: qa,
5956
+ iconInverse: _a,
5957
+ iconOnColor: Qa,
5907
5958
  iconPrimary: Za,
5908
5959
  iconReadOnly: oo,
5909
- iconSecondary: Na,
5910
- iconSuccess: Qa,
5911
- iconTertiary: _a,
5960
+ iconSecondary: qa,
5961
+ iconSuccess: Ja,
5962
+ iconTertiary: Na,
5912
5963
  iconWarning: to,
5913
5964
  layer01Base: ma,
5914
5965
  layer01Hover: $a,
@@ -5928,29 +5979,29 @@ const si = {
5928
5979
  linkHover: io,
5929
5980
  linkPressed: no,
5930
5981
  linkVisited: so,
5931
- logoPrimary: Eo,
5982
+ logoPrimary: Mo,
5932
5983
  menuItemBackgroundHover: Ko,
5933
5984
  menuItemBackgroundSelected: Xo,
5934
5985
  menuTextSectionHeader: Zo,
5935
5986
  size00: na,
5936
5987
  size05: sa,
5937
- size10: Mt,
5988
+ size10: Et,
5938
5989
  size100: ea,
5939
5990
  size110: ta,
5940
5991
  size120: aa,
5941
5992
  size130: oa,
5942
5993
  size140: ra,
5943
- size15: Et,
5994
+ size15: Mt,
5944
5995
  size150: ia,
5945
5996
  size20: Kt,
5946
5997
  size30: Xt,
5947
5998
  size40: Zt,
5948
- size50: Nt,
5949
- size60: _t,
5950
- size70: Vt,
5951
- size75: qt,
5952
- size80: Jt,
5953
- size90: Qt,
5999
+ size50: qt,
6000
+ size60: Nt,
6001
+ size70: _t,
6002
+ size75: Qt,
6003
+ size80: Vt,
6004
+ size90: Jt,
5954
6005
  sizeControl: ua,
5955
6006
  sizeControlMd: ga,
5956
6007
  sizeControlSm: la,
@@ -5960,14 +6011,14 @@ const si = {
5960
6011
  skeleton01: Ka,
5961
6012
  skeleton02: Xa,
5962
6013
  space05: lr,
5963
- space10: No,
6014
+ space10: qo,
5964
6015
  space130: tr,
5965
6016
  space150: ar,
5966
- space30: _o,
5967
- space50: Vo,
5968
- space60: qo,
5969
- space70: Jo,
5970
- space75: Qo,
6017
+ space30: No,
6018
+ space50: _o,
6019
+ space60: Qo,
6020
+ space70: Vo,
6021
+ space75: Jo,
5971
6022
  space90: er,
5972
6023
  spaceLarge: nr,
5973
6024
  spaceMedium: ir,
@@ -5978,13 +6029,13 @@ const si = {
5978
6029
  spacing20: Rt,
5979
6030
  spacing30: It,
5980
6031
  spacing40: Yt,
5981
- spacing50: Ct,
5982
- spacing60: At,
6032
+ spacing50: At,
6033
+ spacing60: Ct,
5983
6034
  spacing70: Gt,
5984
6035
  spacing80: Ft,
5985
6036
  spacing90: Wt,
5986
- spacingLarge: Dt,
5987
- spacingMedium: Lt,
6037
+ spacingLarge: Lt,
6038
+ spacingMedium: Dt,
5988
6039
  spacingSmall: Tt,
5989
6040
  spacingXlarge: Ot,
5990
6041
  spacingXsmall: Ut,
@@ -6013,8 +6064,8 @@ const si = {
6013
6064
  tagRedBorderColor: Bo,
6014
6065
  tagYellowBackground: Po,
6015
6066
  tagYellowBorderColor: wo,
6016
- textDisabled: Ao,
6017
- textInverse: Co,
6067
+ textDisabled: Co,
6068
+ textInverse: Ao,
6018
6069
  textOnColor: Yo,
6019
6070
  textPlaceholder: Fo,
6020
6071
  textPrimary: Ho,
@@ -6023,58 +6074,61 @@ const si = {
6023
6074
  textTertiary: Io,
6024
6075
  textWarning: Go,
6025
6076
  transitionDurationFast: hr,
6077
+ transitionDurationInstant: $r,
6026
6078
  transitionDurationNormal: kr,
6079
+ transitionDurationQuick: mr,
6027
6080
  transitionDurationSlow: yr,
6028
- transitionPanelCollapse: br,
6029
- transitionPanelExpand: fr,
6030
- transitionTimingEaseIn: $r,
6031
- transitionTimingEaseOut: mr,
6032
- typographyBody: qr,
6033
- typographyBodySmall: Jr,
6034
- typographyDescription: Qr,
6035
- typographyDescriptionSmall: ei,
6036
- typographyFontFamily: vr,
6037
- typographyFontSize10: Sr,
6038
- typographyFontSize100: Ir,
6039
- typographyFontSize20: jr,
6040
- typographyFontSize30: xr,
6041
- typographyFontSize40: Pr,
6042
- typographyFontSize50: wr,
6043
- typographyFontSize60: zr,
6044
- typographyFontSize70: Br,
6045
- typographyFontSize80: Hr,
6046
- typographyFontSize90: Rr,
6047
- typographyLineHeight10: Yr,
6048
- typographyLineHeight100: Dr,
6049
- typographyLineHeight20: Cr,
6050
- typographyLineHeight30: Ar,
6051
- typographyLineHeight40: Gr,
6052
- typographyLineHeight50: Fr,
6053
- typographyLineHeight60: Wr,
6054
- typographyLineHeight70: Ur,
6055
- typographyLineHeight80: Tr,
6056
- typographyLineHeight90: Lr,
6057
- typographyWeightBlack: Vr,
6058
- typographyWeightBold: Nr,
6059
- typographyWeightExtraBold: _r,
6060
- typographyWeightExtraLight: Mr,
6061
- typographyWeightLight: Er,
6062
- typographyWeightMedium: Xr,
6063
- typographyWeightRegular: Kr,
6064
- typographyWeightSemiBold: Zr,
6065
- typographyWeightThin: Or,
6081
+ transitionPanelCollapse: Sr,
6082
+ transitionPanelExpand: jr,
6083
+ transitionTimingEaseIn: fr,
6084
+ transitionTimingEaseInOut: vr,
6085
+ transitionTimingEaseOut: br,
6086
+ typographyBody: ei,
6087
+ typographyBodySmall: ti,
6088
+ typographyDescription: ai,
6089
+ typographyDescriptionSmall: oi,
6090
+ typographyFontFamily: xr,
6091
+ typographyFontSize10: Pr,
6092
+ typographyFontSize100: Cr,
6093
+ typographyFontSize20: wr,
6094
+ typographyFontSize30: zr,
6095
+ typographyFontSize40: Br,
6096
+ typographyFontSize50: Hr,
6097
+ typographyFontSize60: Rr,
6098
+ typographyFontSize70: Ir,
6099
+ typographyFontSize80: Yr,
6100
+ typographyFontSize90: Ar,
6101
+ typographyLineHeight10: Gr,
6102
+ typographyLineHeight100: Mr,
6103
+ typographyLineHeight20: Fr,
6104
+ typographyLineHeight30: Wr,
6105
+ typographyLineHeight40: Ur,
6106
+ typographyLineHeight50: Tr,
6107
+ typographyLineHeight60: Dr,
6108
+ typographyLineHeight70: Lr,
6109
+ typographyLineHeight80: Or,
6110
+ typographyLineHeight90: Er,
6111
+ typographyWeightBlack: Jr,
6112
+ typographyWeightBold: Qr,
6113
+ typographyWeightExtraBold: Vr,
6114
+ typographyWeightExtraLight: Xr,
6115
+ typographyWeightLight: Zr,
6116
+ typographyWeightMedium: Nr,
6117
+ typographyWeightRegular: qr,
6118
+ typographyWeightSemiBold: _r,
6119
+ typographyWeightThin: Kr,
6066
6120
  windowSizesLg: v,
6067
6121
  windowSizesMd: f,
6068
6122
  windowSizesSm: b,
6069
6123
  windowSizesXl: S,
6070
- zIndexAbove: ai,
6071
- zIndexBase: ti,
6072
- zIndexModal: ri,
6073
- zIndexSidebar: oi,
6074
- zIndexSkipToContent: ni,
6075
- zIndexToast: ii
6124
+ zIndexAbove: ii,
6125
+ zIndexBase: ri,
6126
+ zIndexModal: si,
6127
+ zIndexSidebar: ni,
6128
+ zIndexSkipToContent: ci,
6129
+ zIndexToast: li
6076
6130
  }, Symbol.toStringTag, { value: "Module" }));
6077
6131
  export {
6078
- si as tokenDictionary,
6079
- li as variables
6132
+ pi as tokenDictionary,
6133
+ di as variables
6080
6134
  };
@@ -427,10 +427,13 @@ declare const tokens: {
427
427
  slow: DesignToken;
428
428
  normal: DesignToken;
429
429
  fast: DesignToken;
430
+ quick: DesignToken;
431
+ instant: DesignToken;
430
432
  };
431
433
  timing: {
432
434
  easeOut: DesignToken;
433
435
  easeIn: DesignToken;
436
+ easeInOut: DesignToken;
434
437
  };
435
438
  panel: {
436
439
  collapse: DesignToken;
@@ -466,10 +466,16 @@ export const transitionDurationSlow: string;
466
466
  export const transitionDurationNormal: string;
467
467
  /** Snabb övergång. 250ms. Används för kortlivade övergångar som tooltips och dropdowns — inte hover. */
468
468
  export const transitionDurationFast: string;
469
+ /** Kort mikroanimation. 150ms. Används för snabba overlay-rörelser som modaler och select-öppningar som är perceptibelt animerade men ändå snabba. */
470
+ export const transitionDurationQuick: string;
471
+ /** Omedelbar återkoppling. 100ms. Används för direkta tillståndsförändringar som hover-bakgrunder och färgövergångar — allt längre upplevs som tröghet. */
472
+ export const transitionDurationInstant: string;
469
473
  /** Decelererar mot slutet. Används för element som glider in i vyn. */
470
474
  export const transitionTimingEaseOut: number[];
471
475
  /** Accelererar mot slutet. Används för element som lämnar vyn. */
472
476
  export const transitionTimingEaseIn: number[];
477
+ /** Accelererar sedan decelererar symmetriskt. Används för element som rör sig mellan två positioner på skärmen. */
478
+ export const transitionTimingEaseInOut: number[];
473
479
  /** Komprimerar en panel med easeOut-timing. Används i Accordion och expanderbara ytor. */
474
480
  export const transitionPanelCollapse: {
475
481
  delay: string;
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Theme",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "3.12.12",
17
+ "version": "3.12.13",
18
18
  "main": "./index.mjs",
19
19
  "types": "./index.d.ts",
20
20
  "exports": {
@@ -1 +1 @@
1
- @theme{ --base-10: var(--midas-base-10); --base-15: var(--midas-base-15); --base-20: var(--midas-base-20); --base-30: var(--midas-base-30); --base-40: var(--midas-base-40); --base-50: var(--midas-base-50); --base-60: var(--midas-base-60); --base-70: var(--midas-base-70); --base-75: var(--midas-base-75); --base-80: var(--midas-base-80); --base-90: var(--midas-base-90); --base-100: var(--midas-base-100); --base-110: var(--midas-base-110); --base-120: var(--midas-base-120); --base-130: var(--midas-base-130); --base-140: var(--midas-base-140); --base-150: var(--midas-base-150); --base-00: var(--midas-base-00); --base-05: var(--midas-base-05); --window-sizes-sm: var(--midas-window-sizes-sm); --window-sizes-md: var(--midas-window-sizes-md); --window-sizes-lg: var(--midas-window-sizes-lg); --window-sizes-xl: var(--midas-window-sizes-xl); --breakpoints-xs: var(--midas-breakpoints-xs); --breakpoints-sm: var(--midas-breakpoints-sm); --breakpoints-md: var(--midas-breakpoints-md); --breakpoints-lg: var(--midas-breakpoints-lg); --breakpoints-xl: var(--midas-breakpoints-xl); --button-background-primary-base: var(--midas-button-background-primary-base); --button-background-primary-hover: var(--midas-button-background-primary-hover); --button-background-primary-active: var(--midas-button-background-primary-active); --button-background-secondary-base: var(--midas-button-background-secondary-base); --button-background-secondary-hover: var(--midas-button-background-secondary-hover); --button-background-secondary-active: var(--midas-button-background-secondary-active); --button-background-tertiary-hover: var(--midas-button-background-tertiary-hover); --button-background-tertiary-active: var(--midas-button-background-tertiary-active); --button-background-danger-base: var(--midas-button-background-danger-base); --button-background-danger-hover: var(--midas-button-background-danger-hover); --button-background-danger-active: var(--midas-button-background-danger-active); --button-background-disabled: var(--midas-button-background-disabled); --button-border-secondary: var(--midas-button-border-secondary); --button-icon-hover: var(--midas-button-icon-hover); --button-icon-active: var(--midas-button-icon-active); --color-black-base: var(--midas-color-black-base); --color-black-hover: var(--midas-color-black-hover); --color-black-opacity5: var(--midas-color-black-opacity5); --color-white-base: var(--midas-color-white-base); --color-white-hover: var(--midas-color-white-hover); --color-white-opacity13: var(--midas-color-white-opacity13); --color-gray-10: var(--midas-color-gray-10); --color-gray-20: var(--midas-color-gray-20); --color-gray-30: var(--midas-color-gray-30); --color-gray-40: var(--midas-color-gray-40); --color-gray-50: var(--midas-color-gray-50); --color-gray-60: var(--midas-color-gray-60); --color-gray-70: var(--midas-color-gray-70); --color-gray-80: var(--midas-color-gray-80); --color-gray-90: var(--midas-color-gray-90); --color-gray-100: var(--midas-color-gray-100); --color-gray-110: var(--midas-color-gray-110); --color-gray-120: var(--midas-color-gray-120); --color-gray-130: var(--midas-color-gray-130); --color-gray-140: var(--midas-color-gray-140); --color-gray-150: var(--midas-color-gray-150); --color-gray-160: var(--midas-color-gray-160); --color-gray-170: var(--midas-color-gray-170); --color-gray-180: var(--midas-color-gray-180); --color-gray-190: var(--midas-color-gray-190); --color-gray-200: var(--midas-color-gray-200); --color-blue-10: var(--midas-color-blue-10); --color-blue-20: var(--midas-color-blue-20); --color-blue-40: var(--midas-color-blue-40); --color-blue-50: var(--midas-color-blue-50); --color-blue-60: var(--midas-color-blue-60); --color-blue-70: var(--midas-color-blue-70); --color-blue-80: var(--midas-color-blue-80); --color-blue-90: var(--midas-color-blue-90); --color-blue-100: var(--midas-color-blue-100); --color-blue-110: var(--midas-color-blue-110); --color-blue-120: var(--midas-color-blue-120); --color-blue-130: var(--midas-color-blue-130); --color-blue-150: var(--midas-color-blue-150); --color-purple-80: var(--midas-color-purple-80); --color-purple-110: var(--midas-color-purple-110); --color-red-100: var(--midas-color-red-100); --color-orange-100: var(--midas-color-orange-100); --color-signal-blue-10: var(--midas-color-signal-blue-10); --color-signal-blue-20: var(--midas-color-signal-blue-20); --color-signal-blue-100: var(--midas-color-signal-blue-100); --color-signal-blue-170: var(--midas-color-signal-blue-170); --color-signal-blue-180: var(--midas-color-signal-blue-180); --color-signal-green-20: var(--midas-color-signal-green-20); --color-signal-green-30: var(--midas-color-signal-green-30); --color-signal-green-100: var(--midas-color-signal-green-100); --color-signal-green-150: var(--midas-color-signal-green-150); --color-signal-green-170: var(--midas-color-signal-green-170); --color-signal-green-180: var(--midas-color-signal-green-180); --color-signal-yellow-10: var(--midas-color-signal-yellow-10); --color-signal-yellow-20: var(--midas-color-signal-yellow-20); --color-signal-yellow-30: var(--midas-color-signal-yellow-30); --color-signal-yellow-40: var(--midas-color-signal-yellow-40); --color-signal-yellow-50: var(--midas-color-signal-yellow-50); --color-signal-yellow-60: var(--midas-color-signal-yellow-60); --color-signal-yellow-70: var(--midas-color-signal-yellow-70); --color-signal-yellow-80: var(--midas-color-signal-yellow-80); --color-signal-yellow-90: var(--midas-color-signal-yellow-90); --color-signal-yellow-100: var(--midas-color-signal-yellow-100); --color-signal-yellow-110: var(--midas-color-signal-yellow-110); --color-signal-yellow-120: var(--midas-color-signal-yellow-120); --color-signal-yellow-130: var(--midas-color-signal-yellow-130); --color-signal-yellow-140: var(--midas-color-signal-yellow-140); --color-signal-yellow-150: var(--midas-color-signal-yellow-150); --color-signal-yellow-160: var(--midas-color-signal-yellow-160); --color-signal-yellow-170: var(--midas-color-signal-yellow-170); --color-signal-yellow-180: var(--midas-color-signal-yellow-180); --color-signal-yellow-190: var(--midas-color-signal-yellow-190); --color-signal-yellow-200: var(--midas-color-signal-yellow-200); --color-signal-red-10: var(--midas-color-signal-red-10); --color-signal-red-20: var(--midas-color-signal-red-20); --color-signal-red-30: var(--midas-color-signal-red-30); --color-signal-red-40: var(--midas-color-signal-red-40); --color-signal-red-50: var(--midas-color-signal-red-50); --color-signal-red-60: var(--midas-color-signal-red-60); --color-signal-red-70: var(--midas-color-signal-red-70); --color-signal-red-80: var(--midas-color-signal-red-80); --color-signal-red-90: var(--midas-color-signal-red-90); --color-signal-red-100: var(--midas-color-signal-red-100); --color-signal-red-110: var(--midas-color-signal-red-110); --color-signal-red-120: var(--midas-color-signal-red-120); --color-signal-red-130: var(--midas-color-signal-red-130); --color-signal-red-140: var(--midas-color-signal-red-140); --color-signal-red-150: var(--midas-color-signal-red-150); --color-signal-red-160: var(--midas-color-signal-red-160); --color-signal-red-170: var(--midas-color-signal-red-170); --color-signal-red-180: var(--midas-color-signal-red-180); --color-signal-red-190: var(--midas-color-signal-red-190); --color-signal-red-200: var(--midas-color-signal-red-200); --size-icon: var(--midas-size-icon); --size-icon-sm: var(--midas-size-icon-sm); --size-option: var(--midas-size-option); --size-control-md: var(--midas-size-control-md); --size-control: var(--midas-size-control); --background-base: var(--midas-background-base); --background-hover: var(--midas-background-hover); --background-inverse: var(--midas-background-inverse); --layer-01-base: var(--midas-layer-01-base); --layer-01-hover: var(--midas-layer-01-hover); --layer-01-selected: var(--midas-layer-01-selected); --layer-01-selected-hover: var(--midas-layer-01-selected-hover); --layer-02-base: var(--midas-layer-02-base); --layer-02-hover: var(--midas-layer-02-hover); --layer-02-selected: var(--midas-layer-02-selected); --layer-02-selected-hover: var(--midas-layer-02-selected-hover); --layer-accent-01-base: var(--midas-layer-accent-01-base); --layer-accent-01-hover: var(--midas-layer-accent-01-hover); --layer-accent-01-selected: var(--midas-layer-accent-01-selected); --layer-accent-02-base: var(--midas-layer-accent-02-base); --layer-accent-02-hover: var(--midas-layer-accent-02-hover); --layer-accent-02-selected: var(--midas-layer-accent-02-selected); --brand-primary: var(--midas-brand-primary); --border-color-primary: var(--midas-border-color-primary); --border-color-secondary: var(--midas-border-color-secondary); --border-color-subtle: var(--midas-border-color-subtle); --border-color-tertiary: var(--midas-border-color-tertiary); --border-color-disabled: var(--midas-border-color-disabled); --border-width: var(--midas-border-width); --field-01-base: var(--midas-field-01-base); --field-01-hover: var(--midas-field-01-hover); --field-01-active: var(--midas-field-01-active); --field-02-base: var(--midas-field-02-base); --field-02-hover: var(--midas-field-02-hover); --field-02-active: var(--midas-field-02-active); --field-disabled: var(--midas-field-disabled); --skeleton-01: var(--midas-skeleton-01); --skeleton-02: var(--midas-skeleton-02); --icon-primary: var(--midas-icon-primary); --icon-secondary: var(--midas-icon-secondary); --icon-tertiary: var(--midas-icon-tertiary); --icon-inverse: var(--midas-icon-inverse); --icon-on-color: var(--midas-icon-on-color); --icon-disabled: var(--midas-icon-disabled); --icon-success: var(--midas-icon-success); --icon-info: var(--midas-icon-info); --icon-warning: var(--midas-icon-warning); --icon-important: var(--midas-icon-important); --icon-read-only: var(--midas-icon-read-only); --link-enabled: var(--midas-link-enabled); --link-hover: var(--midas-link-hover); --link-pressed: var(--midas-link-pressed); --link-visited: var(--midas-link-visited); --support-border-success: var(--midas-support-border-success); --support-border-info: var(--midas-support-border-info); --support-border-important: var(--midas-support-border-important); --support-border-warning: var(--midas-support-border-warning); --support-background-success: var(--midas-support-background-success); --support-background-success-hover: var(--midas-support-background-success-hover); --support-background-info: var(--midas-support-background-info); --support-background-info-hover: var(--midas-support-background-info-hover); --support-background-important: var(--midas-support-background-important); --support-background-important-hover: var(--midas-support-background-important-hover); --support-background-warning: var(--midas-support-background-warning); --support-background-warning-hover: var(--midas-support-background-warning-hover); --tag-green-background: var(--midas-tag-green-background); --tag-green-border-color: var(--midas-tag-green-border-color); --tag-blue-background: var(--midas-tag-blue-background); --tag-blue-border-color: var(--midas-tag-blue-border-color); --tag-yellow-background: var(--midas-tag-yellow-background); --tag-yellow-border-color: var(--midas-tag-yellow-border-color); --tag-red-background: var(--midas-tag-red-background); --tag-red-border-color: var(--midas-tag-red-border-color); --text-primary: var(--midas-text-primary); --text-secondary: var(--midas-text-secondary); --text-tertiary: var(--midas-text-tertiary); --text-on-color: var(--midas-text-on-color); --text-inverse: var(--midas-text-inverse); --text-disabled: var(--midas-text-disabled); --text-warning: var(--midas-text-warning); --text-placeholder: var(--midas-text-placeholder); --text-read-only: var(--midas-text-read-only); --badge-background: var(--midas-badge-background); --calendar-date-background-hover: var(--midas-calendar-date-background-hover); --calendar-date-background-selected: var(--midas-calendar-date-background-selected); --calendar-date-background-start-range: var(--midas-calendar-date-background-start-range); --calendar-date-background-in-range: var(--midas-calendar-date-background-in-range); --calendar-date-background-end-range: var(--midas-calendar-date-background-end-range); --logo-primary: var(--midas-logo-primary); --menu-item-background-hover: var(--midas-menu-item-background-hover); --menu-item-background-selected: var(--midas-menu-item-background-selected); --menu-text-section-header: var(--midas-menu-text-section-header); --space-10: var(--midas-space-10); --space-30: var(--midas-space-30); --space-50: var(--midas-space-50); --space-60: var(--midas-space-60); --space-70: var(--midas-space-70); --space-75: var(--midas-space-75); --space-90: var(--midas-space-90); --space-130: var(--midas-space-130); --space-150: var(--midas-space-150); --space-xsmall: var(--midas-space-xsmall); --space-small: var(--midas-space-small); --space-medium: var(--midas-space-medium); --space-large: var(--midas-space-large); --space-xlarge: var(--midas-space-xlarge); --space-05: var(--midas-space-05); --state-focus: var(--midas-state-focus); --state-focus-inset: var(--midas-state-focus-inset); --state-focus-contrast-mode-outline: var(--midas-state-focus-contrast-mode-outline); --state-focus-contrast-mode-offset: var(--midas-state-focus-contrast-mode-offset); --state-invalid: var(--midas-state-invalid); --transition-duration-slow: var(--midas-transition-duration-slow); --transition-duration-normal: var(--midas-transition-duration-normal); --transition-duration-fast: var(--midas-transition-duration-fast); --transition-timing-ease-out: var(--midas-transition-timing-ease-out); --transition-timing-ease-in: var(--midas-transition-timing-ease-in); --transition-panel-collapse: var(--midas-transition-panel-collapse); --transition-panel-expand: var(--midas-transition-panel-expand); --typography-font-family: var(--midas-typography-font-family); --typography-font-size-10: var(--midas-typography-font-size-10); --typography-font-size-20: var(--midas-typography-font-size-20); --typography-font-size-30: var(--midas-typography-font-size-30); --typography-font-size-40: var(--midas-typography-font-size-40); --typography-font-size-50: var(--midas-typography-font-size-50); --typography-font-size-60: var(--midas-typography-font-size-60); --typography-font-size-70: var(--midas-typography-font-size-70); --typography-font-size-80: var(--midas-typography-font-size-80); --typography-font-size-90: var(--midas-typography-font-size-90); --typography-font-size-100: var(--midas-typography-font-size-100); --typography-line-height-10: var(--midas-typography-line-height-10); --typography-line-height-20: var(--midas-typography-line-height-20); --typography-line-height-30: var(--midas-typography-line-height-30); --typography-line-height-40: var(--midas-typography-line-height-40); --typography-line-height-50: var(--midas-typography-line-height-50); --typography-line-height-60: var(--midas-typography-line-height-60); --typography-line-height-70: var(--midas-typography-line-height-70); --typography-line-height-80: var(--midas-typography-line-height-80); --typography-line-height-90: var(--midas-typography-line-height-90); --typography-line-height-100: var(--midas-typography-line-height-100); --typography-weight-thin: var(--midas-typography-weight-thin); --typography-weight-extra-light: var(--midas-typography-weight-extra-light); --typography-weight-light: var(--midas-typography-weight-light); --typography-weight-regular: var(--midas-typography-weight-regular); --typography-weight-medium: var(--midas-typography-weight-medium); --typography-weight-semi-bold: var(--midas-typography-weight-semi-bold); --typography-weight-bold: var(--midas-typography-weight-bold); --typography-weight-extra-bold: var(--midas-typography-weight-extra-bold); --typography-weight-black: var(--midas-typography-weight-black); --typography-body: var(--midas-typography-body); --typography-body-small: var(--midas-typography-body-small); --typography-description: var(--midas-typography-description); --typography-description-small: var(--midas-typography-description-small); --z-index-base: var(--midas-z-index-base); --z-index-above: var(--midas-z-index-above); --z-index-sidebar: var(--midas-z-index-sidebar); --z-index-modal: var(--midas-z-index-modal); --z-index-toast: var(--midas-z-index-toast); --z-index-skip-to-content: var(--midas-z-index-skip-to-content); }
1
+ @theme{ --base-10: var(--midas-base-10); --base-15: var(--midas-base-15); --base-20: var(--midas-base-20); --base-30: var(--midas-base-30); --base-40: var(--midas-base-40); --base-50: var(--midas-base-50); --base-60: var(--midas-base-60); --base-70: var(--midas-base-70); --base-75: var(--midas-base-75); --base-80: var(--midas-base-80); --base-90: var(--midas-base-90); --base-100: var(--midas-base-100); --base-110: var(--midas-base-110); --base-120: var(--midas-base-120); --base-130: var(--midas-base-130); --base-140: var(--midas-base-140); --base-150: var(--midas-base-150); --base-00: var(--midas-base-00); --base-05: var(--midas-base-05); --window-sizes-sm: var(--midas-window-sizes-sm); --window-sizes-md: var(--midas-window-sizes-md); --window-sizes-lg: var(--midas-window-sizes-lg); --window-sizes-xl: var(--midas-window-sizes-xl); --breakpoints-xs: var(--midas-breakpoints-xs); --breakpoints-sm: var(--midas-breakpoints-sm); --breakpoints-md: var(--midas-breakpoints-md); --breakpoints-lg: var(--midas-breakpoints-lg); --breakpoints-xl: var(--midas-breakpoints-xl); --button-background-primary-base: var(--midas-button-background-primary-base); --button-background-primary-hover: var(--midas-button-background-primary-hover); --button-background-primary-active: var(--midas-button-background-primary-active); --button-background-secondary-base: var(--midas-button-background-secondary-base); --button-background-secondary-hover: var(--midas-button-background-secondary-hover); --button-background-secondary-active: var(--midas-button-background-secondary-active); --button-background-tertiary-hover: var(--midas-button-background-tertiary-hover); --button-background-tertiary-active: var(--midas-button-background-tertiary-active); --button-background-danger-base: var(--midas-button-background-danger-base); --button-background-danger-hover: var(--midas-button-background-danger-hover); --button-background-danger-active: var(--midas-button-background-danger-active); --button-background-disabled: var(--midas-button-background-disabled); --button-border-secondary: var(--midas-button-border-secondary); --button-icon-hover: var(--midas-button-icon-hover); --button-icon-active: var(--midas-button-icon-active); --color-black-base: var(--midas-color-black-base); --color-black-hover: var(--midas-color-black-hover); --color-black-opacity5: var(--midas-color-black-opacity5); --color-white-base: var(--midas-color-white-base); --color-white-hover: var(--midas-color-white-hover); --color-white-opacity13: var(--midas-color-white-opacity13); --color-gray-10: var(--midas-color-gray-10); --color-gray-20: var(--midas-color-gray-20); --color-gray-30: var(--midas-color-gray-30); --color-gray-40: var(--midas-color-gray-40); --color-gray-50: var(--midas-color-gray-50); --color-gray-60: var(--midas-color-gray-60); --color-gray-70: var(--midas-color-gray-70); --color-gray-80: var(--midas-color-gray-80); --color-gray-90: var(--midas-color-gray-90); --color-gray-100: var(--midas-color-gray-100); --color-gray-110: var(--midas-color-gray-110); --color-gray-120: var(--midas-color-gray-120); --color-gray-130: var(--midas-color-gray-130); --color-gray-140: var(--midas-color-gray-140); --color-gray-150: var(--midas-color-gray-150); --color-gray-160: var(--midas-color-gray-160); --color-gray-170: var(--midas-color-gray-170); --color-gray-180: var(--midas-color-gray-180); --color-gray-190: var(--midas-color-gray-190); --color-gray-200: var(--midas-color-gray-200); --color-blue-10: var(--midas-color-blue-10); --color-blue-20: var(--midas-color-blue-20); --color-blue-40: var(--midas-color-blue-40); --color-blue-50: var(--midas-color-blue-50); --color-blue-60: var(--midas-color-blue-60); --color-blue-70: var(--midas-color-blue-70); --color-blue-80: var(--midas-color-blue-80); --color-blue-90: var(--midas-color-blue-90); --color-blue-100: var(--midas-color-blue-100); --color-blue-110: var(--midas-color-blue-110); --color-blue-120: var(--midas-color-blue-120); --color-blue-130: var(--midas-color-blue-130); --color-blue-150: var(--midas-color-blue-150); --color-purple-80: var(--midas-color-purple-80); --color-purple-110: var(--midas-color-purple-110); --color-red-100: var(--midas-color-red-100); --color-orange-100: var(--midas-color-orange-100); --color-signal-blue-10: var(--midas-color-signal-blue-10); --color-signal-blue-20: var(--midas-color-signal-blue-20); --color-signal-blue-100: var(--midas-color-signal-blue-100); --color-signal-blue-170: var(--midas-color-signal-blue-170); --color-signal-blue-180: var(--midas-color-signal-blue-180); --color-signal-green-20: var(--midas-color-signal-green-20); --color-signal-green-30: var(--midas-color-signal-green-30); --color-signal-green-100: var(--midas-color-signal-green-100); --color-signal-green-150: var(--midas-color-signal-green-150); --color-signal-green-170: var(--midas-color-signal-green-170); --color-signal-green-180: var(--midas-color-signal-green-180); --color-signal-yellow-10: var(--midas-color-signal-yellow-10); --color-signal-yellow-20: var(--midas-color-signal-yellow-20); --color-signal-yellow-30: var(--midas-color-signal-yellow-30); --color-signal-yellow-40: var(--midas-color-signal-yellow-40); --color-signal-yellow-50: var(--midas-color-signal-yellow-50); --color-signal-yellow-60: var(--midas-color-signal-yellow-60); --color-signal-yellow-70: var(--midas-color-signal-yellow-70); --color-signal-yellow-80: var(--midas-color-signal-yellow-80); --color-signal-yellow-90: var(--midas-color-signal-yellow-90); --color-signal-yellow-100: var(--midas-color-signal-yellow-100); --color-signal-yellow-110: var(--midas-color-signal-yellow-110); --color-signal-yellow-120: var(--midas-color-signal-yellow-120); --color-signal-yellow-130: var(--midas-color-signal-yellow-130); --color-signal-yellow-140: var(--midas-color-signal-yellow-140); --color-signal-yellow-150: var(--midas-color-signal-yellow-150); --color-signal-yellow-160: var(--midas-color-signal-yellow-160); --color-signal-yellow-170: var(--midas-color-signal-yellow-170); --color-signal-yellow-180: var(--midas-color-signal-yellow-180); --color-signal-yellow-190: var(--midas-color-signal-yellow-190); --color-signal-yellow-200: var(--midas-color-signal-yellow-200); --color-signal-red-10: var(--midas-color-signal-red-10); --color-signal-red-20: var(--midas-color-signal-red-20); --color-signal-red-30: var(--midas-color-signal-red-30); --color-signal-red-40: var(--midas-color-signal-red-40); --color-signal-red-50: var(--midas-color-signal-red-50); --color-signal-red-60: var(--midas-color-signal-red-60); --color-signal-red-70: var(--midas-color-signal-red-70); --color-signal-red-80: var(--midas-color-signal-red-80); --color-signal-red-90: var(--midas-color-signal-red-90); --color-signal-red-100: var(--midas-color-signal-red-100); --color-signal-red-110: var(--midas-color-signal-red-110); --color-signal-red-120: var(--midas-color-signal-red-120); --color-signal-red-130: var(--midas-color-signal-red-130); --color-signal-red-140: var(--midas-color-signal-red-140); --color-signal-red-150: var(--midas-color-signal-red-150); --color-signal-red-160: var(--midas-color-signal-red-160); --color-signal-red-170: var(--midas-color-signal-red-170); --color-signal-red-180: var(--midas-color-signal-red-180); --color-signal-red-190: var(--midas-color-signal-red-190); --color-signal-red-200: var(--midas-color-signal-red-200); --size-icon: var(--midas-size-icon); --size-icon-sm: var(--midas-size-icon-sm); --size-option: var(--midas-size-option); --size-control-md: var(--midas-size-control-md); --size-control: var(--midas-size-control); --background-base: var(--midas-background-base); --background-hover: var(--midas-background-hover); --background-inverse: var(--midas-background-inverse); --layer-01-base: var(--midas-layer-01-base); --layer-01-hover: var(--midas-layer-01-hover); --layer-01-selected: var(--midas-layer-01-selected); --layer-01-selected-hover: var(--midas-layer-01-selected-hover); --layer-02-base: var(--midas-layer-02-base); --layer-02-hover: var(--midas-layer-02-hover); --layer-02-selected: var(--midas-layer-02-selected); --layer-02-selected-hover: var(--midas-layer-02-selected-hover); --layer-accent-01-base: var(--midas-layer-accent-01-base); --layer-accent-01-hover: var(--midas-layer-accent-01-hover); --layer-accent-01-selected: var(--midas-layer-accent-01-selected); --layer-accent-02-base: var(--midas-layer-accent-02-base); --layer-accent-02-hover: var(--midas-layer-accent-02-hover); --layer-accent-02-selected: var(--midas-layer-accent-02-selected); --brand-primary: var(--midas-brand-primary); --border-color-primary: var(--midas-border-color-primary); --border-color-secondary: var(--midas-border-color-secondary); --border-color-subtle: var(--midas-border-color-subtle); --border-color-tertiary: var(--midas-border-color-tertiary); --border-color-disabled: var(--midas-border-color-disabled); --border-width: var(--midas-border-width); --field-01-base: var(--midas-field-01-base); --field-01-hover: var(--midas-field-01-hover); --field-01-active: var(--midas-field-01-active); --field-02-base: var(--midas-field-02-base); --field-02-hover: var(--midas-field-02-hover); --field-02-active: var(--midas-field-02-active); --field-disabled: var(--midas-field-disabled); --skeleton-01: var(--midas-skeleton-01); --skeleton-02: var(--midas-skeleton-02); --icon-primary: var(--midas-icon-primary); --icon-secondary: var(--midas-icon-secondary); --icon-tertiary: var(--midas-icon-tertiary); --icon-inverse: var(--midas-icon-inverse); --icon-on-color: var(--midas-icon-on-color); --icon-disabled: var(--midas-icon-disabled); --icon-success: var(--midas-icon-success); --icon-info: var(--midas-icon-info); --icon-warning: var(--midas-icon-warning); --icon-important: var(--midas-icon-important); --icon-read-only: var(--midas-icon-read-only); --link-enabled: var(--midas-link-enabled); --link-hover: var(--midas-link-hover); --link-pressed: var(--midas-link-pressed); --link-visited: var(--midas-link-visited); --support-border-success: var(--midas-support-border-success); --support-border-info: var(--midas-support-border-info); --support-border-important: var(--midas-support-border-important); --support-border-warning: var(--midas-support-border-warning); --support-background-success: var(--midas-support-background-success); --support-background-success-hover: var(--midas-support-background-success-hover); --support-background-info: var(--midas-support-background-info); --support-background-info-hover: var(--midas-support-background-info-hover); --support-background-important: var(--midas-support-background-important); --support-background-important-hover: var(--midas-support-background-important-hover); --support-background-warning: var(--midas-support-background-warning); --support-background-warning-hover: var(--midas-support-background-warning-hover); --tag-green-background: var(--midas-tag-green-background); --tag-green-border-color: var(--midas-tag-green-border-color); --tag-blue-background: var(--midas-tag-blue-background); --tag-blue-border-color: var(--midas-tag-blue-border-color); --tag-yellow-background: var(--midas-tag-yellow-background); --tag-yellow-border-color: var(--midas-tag-yellow-border-color); --tag-red-background: var(--midas-tag-red-background); --tag-red-border-color: var(--midas-tag-red-border-color); --text-primary: var(--midas-text-primary); --text-secondary: var(--midas-text-secondary); --text-tertiary: var(--midas-text-tertiary); --text-on-color: var(--midas-text-on-color); --text-inverse: var(--midas-text-inverse); --text-disabled: var(--midas-text-disabled); --text-warning: var(--midas-text-warning); --text-placeholder: var(--midas-text-placeholder); --text-read-only: var(--midas-text-read-only); --badge-background: var(--midas-badge-background); --calendar-date-background-hover: var(--midas-calendar-date-background-hover); --calendar-date-background-selected: var(--midas-calendar-date-background-selected); --calendar-date-background-start-range: var(--midas-calendar-date-background-start-range); --calendar-date-background-in-range: var(--midas-calendar-date-background-in-range); --calendar-date-background-end-range: var(--midas-calendar-date-background-end-range); --logo-primary: var(--midas-logo-primary); --menu-item-background-hover: var(--midas-menu-item-background-hover); --menu-item-background-selected: var(--midas-menu-item-background-selected); --menu-text-section-header: var(--midas-menu-text-section-header); --space-10: var(--midas-space-10); --space-30: var(--midas-space-30); --space-50: var(--midas-space-50); --space-60: var(--midas-space-60); --space-70: var(--midas-space-70); --space-75: var(--midas-space-75); --space-90: var(--midas-space-90); --space-130: var(--midas-space-130); --space-150: var(--midas-space-150); --space-xsmall: var(--midas-space-xsmall); --space-small: var(--midas-space-small); --space-medium: var(--midas-space-medium); --space-large: var(--midas-space-large); --space-xlarge: var(--midas-space-xlarge); --space-05: var(--midas-space-05); --state-focus: var(--midas-state-focus); --state-focus-inset: var(--midas-state-focus-inset); --state-focus-contrast-mode-outline: var(--midas-state-focus-contrast-mode-outline); --state-focus-contrast-mode-offset: var(--midas-state-focus-contrast-mode-offset); --state-invalid: var(--midas-state-invalid); --transition-duration-slow: var(--midas-transition-duration-slow); --transition-duration-normal: var(--midas-transition-duration-normal); --transition-duration-fast: var(--midas-transition-duration-fast); --transition-duration-quick: var(--midas-transition-duration-quick); --transition-duration-instant: var(--midas-transition-duration-instant); --transition-timing-ease-out: var(--midas-transition-timing-ease-out); --transition-timing-ease-in: var(--midas-transition-timing-ease-in); --transition-timing-ease-in-out: var(--midas-transition-timing-ease-in-out); --transition-panel-collapse: var(--midas-transition-panel-collapse); --transition-panel-expand: var(--midas-transition-panel-expand); --typography-font-family: var(--midas-typography-font-family); --typography-font-size-10: var(--midas-typography-font-size-10); --typography-font-size-20: var(--midas-typography-font-size-20); --typography-font-size-30: var(--midas-typography-font-size-30); --typography-font-size-40: var(--midas-typography-font-size-40); --typography-font-size-50: var(--midas-typography-font-size-50); --typography-font-size-60: var(--midas-typography-font-size-60); --typography-font-size-70: var(--midas-typography-font-size-70); --typography-font-size-80: var(--midas-typography-font-size-80); --typography-font-size-90: var(--midas-typography-font-size-90); --typography-font-size-100: var(--midas-typography-font-size-100); --typography-line-height-10: var(--midas-typography-line-height-10); --typography-line-height-20: var(--midas-typography-line-height-20); --typography-line-height-30: var(--midas-typography-line-height-30); --typography-line-height-40: var(--midas-typography-line-height-40); --typography-line-height-50: var(--midas-typography-line-height-50); --typography-line-height-60: var(--midas-typography-line-height-60); --typography-line-height-70: var(--midas-typography-line-height-70); --typography-line-height-80: var(--midas-typography-line-height-80); --typography-line-height-90: var(--midas-typography-line-height-90); --typography-line-height-100: var(--midas-typography-line-height-100); --typography-weight-thin: var(--midas-typography-weight-thin); --typography-weight-extra-light: var(--midas-typography-weight-extra-light); --typography-weight-light: var(--midas-typography-weight-light); --typography-weight-regular: var(--midas-typography-weight-regular); --typography-weight-medium: var(--midas-typography-weight-medium); --typography-weight-semi-bold: var(--midas-typography-weight-semi-bold); --typography-weight-bold: var(--midas-typography-weight-bold); --typography-weight-extra-bold: var(--midas-typography-weight-extra-bold); --typography-weight-black: var(--midas-typography-weight-black); --typography-body: var(--midas-typography-body); --typography-body-small: var(--midas-typography-body-small); --typography-description: var(--midas-typography-description); --typography-description-small: var(--midas-typography-description-small); --z-index-base: var(--midas-z-index-base); --z-index-above: var(--midas-z-index-above); --z-index-sidebar: var(--midas-z-index-sidebar); --z-index-modal: var(--midas-z-index-modal); --z-index-toast: var(--midas-z-index-toast); --z-index-skip-to-content: var(--midas-z-index-skip-to-content); }
package/variables.css CHANGED
@@ -1 +1 @@
1
- :root{--midas-base-10: .125rem;--midas-base-15: .188rem;--midas-base-20: .25rem;--midas-base-30: .375rem;--midas-base-40: .5rem;--midas-base-50: .625rem;--midas-base-60: .75rem;--midas-base-70: .875rem;--midas-base-75: .938rem;--midas-base-80: 1rem;--midas-base-90: 1.25rem;--midas-base-100: 1.5rem;--midas-base-110: 1.75rem;--midas-base-120: 2rem;--midas-base-130: 2.5rem;--midas-base-140: 2.75rem;--midas-base-150: 3rem;--midas-base-00: 0rem;--midas-base-05: .063rem;--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-background-secondary-base: transparent;--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-orange-100: oklch(.66 .18 45);--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-blue-170: #162b33;--midas-color-signal-blue-180: #112127;--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-green-170: #163328;--midas-color-signal-green-180: #112722;--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-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-sidebar: 500;--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-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-size-10: var(--midas-base-10);--midas-size-15: var(--midas-base-15);--midas-size-20: var(--midas-base-20);--midas-size-30: var(--midas-base-30);--midas-size-40: var(--midas-base-40);--midas-size-50: var(--midas-base-50);--midas-size-60: var(--midas-base-60);--midas-size-70: var(--midas-base-70);--midas-size-75: var(--midas-base-75);--midas-size-80: var(--midas-base-80);--midas-size-90: var(--midas-base-90);--midas-size-100: var(--midas-base-100);--midas-size-110: var(--midas-base-110);--midas-size-120: var(--midas-base-120);--midas-size-130: var(--midas-base-130);--midas-size-140: var(--midas-base-140);--midas-size-150: var(--midas-base-150);--midas-size-00: var(--midas-base-00);--midas-size-05: var(--midas-base-05);--midas-size-icon: var(--midas-base-80);--midas-size-icon-sm: var(--midas-base-90);--midas-size-option: var(--midas-base-120);--midas-size-control-md: var(--midas-base-130);--midas-size-control: var(--midas-base-150);--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-140));--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: var(--midas-color-orange-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: var(--midas-color-orange-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-signal-green-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-signal-green-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-signal-blue-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-signal-yellow-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-signal-red-170));--midas-tag-green-background: light-dark(var(--midas-color-signal-green-20), var(--midas-color-signal-green-180));--midas-tag-green-border-color: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-tag-blue-background: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-tag-blue-border-color: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-tag-yellow-background: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-tag-yellow-border-color: var(--midas-color-orange-100);--midas-tag-red-background: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-tag-red-border-color: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--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-space-10: var(--midas-base-10);--midas-space-30: var(--midas-base-30);--midas-space-50: var(--midas-base-50);--midas-space-60: var(--midas-base-60);--midas-space-70: var(--midas-base-70);--midas-space-75: var(--midas-base-75);--midas-space-90: var(--midas-base-90);--midas-space-130: var(--midas-base-130);--midas-space-150: var(--midas-base-150);--midas-space-xsmall: var(--midas-base-20);--midas-space-small: var(--midas-base-40);--midas-space-medium: var(--midas-base-80);--midas-space-large: var(--midas-base-100);--midas-space-xlarge: var(--midas-base-120);--midas-space-05: var(--midas-base-05);--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;--midas-typography-body: var(--midas-typography-weight-regular) var(--midas-typography-font-size-30)/var(--midas-typography-line-height-30) var(--midas-typography-font-family);--midas-typography-body-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-10)/var(--midas-typography-line-height-10) var(--midas-typography-font-family);--midas-spacing-10: var(--midas-space-10);--midas-spacing-20: var(--midas-space-xsmall);--midas-spacing-30: var(--midas-space-small);--midas-spacing-40: var(--midas-space-60);--midas-spacing-50: var(--midas-space-medium);--midas-spacing-60: var(--midas-space-large);--midas-spacing-70: var(--midas-space-xlarge);--midas-spacing-80: var(--midas-space-130);--midas-spacing-90: var(--midas-space-150);--midas-spacing-xsmall: var(--midas-space-xsmall);--midas-spacing-small: var(--midas-space-small);--midas-spacing-medium: var(--midas-space-medium);--midas-spacing-large: var(--midas-space-large);--midas-spacing-xlarge: var(--midas-space-xlarge);--midas-size-control-sm: var(--midas-size-control-md);--midas-state-invalid: inset 0 0 0 2px var(--midas-support-border-warning)}
1
+ :root{--midas-base-10: .125rem;--midas-base-15: .188rem;--midas-base-20: .25rem;--midas-base-30: .375rem;--midas-base-40: .5rem;--midas-base-50: .625rem;--midas-base-60: .75rem;--midas-base-70: .875rem;--midas-base-75: .938rem;--midas-base-80: 1rem;--midas-base-90: 1.25rem;--midas-base-100: 1.5rem;--midas-base-110: 1.75rem;--midas-base-120: 2rem;--midas-base-130: 2.5rem;--midas-base-140: 2.75rem;--midas-base-150: 3rem;--midas-base-00: 0rem;--midas-base-05: .063rem;--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-background-secondary-base: transparent;--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-orange-100: oklch(.66 .18 45);--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-blue-170: #162b33;--midas-color-signal-blue-180: #112127;--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-green-170: #163328;--midas-color-signal-green-180: #112722;--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-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-duration-quick: .15s;--midas-transition-duration-instant: .1s;--midas-transition-timing-ease-out: cubic-bezier(0, 0, .58, 1);--midas-transition-timing-ease-in: cubic-bezier(.42, 0, 1, 1);--midas-transition-timing-ease-in-out: cubic-bezier(.42, 0, .58, 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-sidebar: 500;--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-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-size-10: var(--midas-base-10);--midas-size-15: var(--midas-base-15);--midas-size-20: var(--midas-base-20);--midas-size-30: var(--midas-base-30);--midas-size-40: var(--midas-base-40);--midas-size-50: var(--midas-base-50);--midas-size-60: var(--midas-base-60);--midas-size-70: var(--midas-base-70);--midas-size-75: var(--midas-base-75);--midas-size-80: var(--midas-base-80);--midas-size-90: var(--midas-base-90);--midas-size-100: var(--midas-base-100);--midas-size-110: var(--midas-base-110);--midas-size-120: var(--midas-base-120);--midas-size-130: var(--midas-base-130);--midas-size-140: var(--midas-base-140);--midas-size-150: var(--midas-base-150);--midas-size-00: var(--midas-base-00);--midas-size-05: var(--midas-base-05);--midas-size-icon: var(--midas-base-80);--midas-size-icon-sm: var(--midas-base-90);--midas-size-option: var(--midas-base-120);--midas-size-control-md: var(--midas-base-130);--midas-size-control: var(--midas-base-150);--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-140));--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: var(--midas-color-orange-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: var(--midas-color-orange-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-signal-green-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-signal-green-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-signal-blue-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-signal-yellow-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-signal-red-170));--midas-tag-green-background: light-dark(var(--midas-color-signal-green-20), var(--midas-color-signal-green-180));--midas-tag-green-border-color: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-tag-blue-background: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-tag-blue-border-color: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-tag-yellow-background: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-tag-yellow-border-color: var(--midas-color-orange-100);--midas-tag-red-background: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-tag-red-border-color: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--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-space-10: var(--midas-base-10);--midas-space-30: var(--midas-base-30);--midas-space-50: var(--midas-base-50);--midas-space-60: var(--midas-base-60);--midas-space-70: var(--midas-base-70);--midas-space-75: var(--midas-base-75);--midas-space-90: var(--midas-base-90);--midas-space-130: var(--midas-base-130);--midas-space-150: var(--midas-base-150);--midas-space-xsmall: var(--midas-base-20);--midas-space-small: var(--midas-base-40);--midas-space-medium: var(--midas-base-80);--midas-space-large: var(--midas-base-100);--midas-space-xlarge: var(--midas-base-120);--midas-space-05: var(--midas-base-05);--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;--midas-typography-body: var(--midas-typography-weight-regular) var(--midas-typography-font-size-30)/var(--midas-typography-line-height-30) var(--midas-typography-font-family);--midas-typography-body-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-10)/var(--midas-typography-line-height-10) var(--midas-typography-font-family);--midas-spacing-10: var(--midas-space-10);--midas-spacing-20: var(--midas-space-xsmall);--midas-spacing-30: var(--midas-space-small);--midas-spacing-40: var(--midas-space-60);--midas-spacing-50: var(--midas-space-medium);--midas-spacing-60: var(--midas-space-large);--midas-spacing-70: var(--midas-space-xlarge);--midas-spacing-80: var(--midas-space-130);--midas-spacing-90: var(--midas-space-150);--midas-spacing-xsmall: var(--midas-space-xsmall);--midas-spacing-small: var(--midas-space-small);--midas-spacing-medium: var(--midas-space-medium);--midas-spacing-large: var(--midas-space-large);--midas-spacing-xlarge: var(--midas-space-xlarge);--midas-size-control-sm: var(--midas-size-control-md);--midas-state-invalid: inset 0 0 0 2px var(--midas-support-border-warning)}