@midas-ds/theme 3.0.0 โ 3.0.1
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 +47 -0
- package/README.md +58 -0
- package/index.mjs +13 -13
- package/package.json +1 -1
- package/variables.css +1 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
## 3.0.1 (2025-09-26)
|
|
2
|
+
|
|
3
|
+
### ๐ฉน Fixes
|
|
4
|
+
|
|
5
|
+
- **list-box:** change list-box section heading color ([361cacaf63](https://github.com/migrationsverket/midas/commit/361cacaf63))
|
|
6
|
+
- **theme:** add README and CHANGELOG to build ([da935487e7](https://github.com/migrationsverket/midas/commit/da935487e7))
|
|
7
|
+
|
|
8
|
+
### ๐งช Tests updated
|
|
9
|
+
|
|
10
|
+
- **integration:** setup verdaccio ([2ad7589f12](https://github.com/migrationsverket/midas/commit/2ad7589f12))
|
|
11
|
+
|
|
12
|
+
# 3.0.0 (2025-09-23)
|
|
13
|
+
|
|
14
|
+
### ๐ Features
|
|
15
|
+
|
|
16
|
+
- **theme:** update signal colors ([#194](https://github.com/migrationsverket/midas/issues/194))
|
|
17
|
+
- โ ๏ธ **components-theme:** add new default css export ([60df9c5b0c](https://github.com/migrationsverket/midas/commit/60df9c5b0c))
|
|
18
|
+
|
|
19
|
+
### ๐ญ Refactoring
|
|
20
|
+
|
|
21
|
+
- **theme:** refactor style dictionary build script to nx executor ([08676187cf](https://github.com/migrationsverket/midas/commit/08676187cf))
|
|
22
|
+
- remove theme from components project completely, rely on theme package ([5616f8ecc2](https://github.com/migrationsverket/midas/commit/5616f8ecc2))
|
|
23
|
+
|
|
24
|
+
### ๐ง Maintenance
|
|
25
|
+
|
|
26
|
+
- split global.css into fonts.css and color-scheme.css ([4597020286](https://github.com/migrationsverket/midas/commit/4597020286))
|
|
27
|
+
- fix errors in playground app, disable for future builds ([787e74f234](https://github.com/migrationsverket/midas/commit/787e74f234))
|
|
28
|
+
- **theme:** add auto generated files in unformatted shape ([d8e2aa989f](https://github.com/migrationsverket/midas/commit/d8e2aa989f))
|
|
29
|
+
- **theme:** add explicit exports for css type help ([444b3a6e3b](https://github.com/migrationsverket/midas/commit/444b3a6e3b))
|
|
30
|
+
- temporary fix on named module imports in preview.tsx ([4ef7584195](https://github.com/migrationsverket/midas/commit/4ef7584195))
|
|
31
|
+
- buildable docs version ([b25c77fdf3](https://github.com/migrationsverket/midas/commit/b25c77fdf3))
|
|
32
|
+
|
|
33
|
+
### โ ๏ธ Breaking Changes
|
|
34
|
+
|
|
35
|
+
- **components-theme:** Default styles are now accessible from `import '@midas-ds/components/default.css'` or via the `@midas-ds/theme` package.
|
|
36
|
+
|
|
37
|
+
## 2.0.1 (2025-09-12)
|
|
38
|
+
|
|
39
|
+
### ๐ง Maintenance
|
|
40
|
+
|
|
41
|
+
- **theme:** rename style dictionary artifacts ([6aef7a733f](https://github.com/migrationsverket/midas/commit/6aef7a733f))
|
|
42
|
+
- **theme:** remove 'generated' ([81eb8978a9](https://github.com/migrationsverket/midas/commit/81eb8978a9))
|
|
43
|
+
- **theme:** edit config ([8db8ba0b0a](https://github.com/migrationsverket/midas/commit/8db8ba0b0a))
|
|
44
|
+
- **theme:** streamline build config ([ca07684b88](https://github.com/migrationsverket/midas/commit/ca07684b88))
|
|
45
|
+
- **theme:** sync tokens with components lib ([30c3df9190](https://github.com/migrationsverket/midas/commit/30c3df9190))
|
|
46
|
+
- clean up workflows ([6068c40031](https://github.com/migrationsverket/midas/commit/6068c40031))
|
|
47
|
+
- **theme:** update package.json with meta data ([11fd386c38](https://github.com/migrationsverket/midas/commit/11fd386c38))
|
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @midas-ds/theme
|
|
2
|
+
|
|
3
|
+
This package contains the design tokens for the Midas Design System, managed by [Style Dictionary](https://style-dictionary.com/).
|
|
4
|
+
It automatically generates theme assets, such as CSS variables and JavaScript modules, from a common set of token definitions.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
To install the theme package, run the following command in your project root:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @midas-ds/theme
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
The theme provides assets for both CSS and JavaScript environments.
|
|
17
|
+
|
|
18
|
+
### CSS
|
|
19
|
+
|
|
20
|
+
Import the `variables.css` file into your project's main entry point or global stylesheet. This will make all the design tokens available as CSS Custom Properties.
|
|
21
|
+
|
|
22
|
+
The CSS variables are prefixed with `midas`.
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
/* Example: In your main stylesheet */
|
|
26
|
+
@import '@midas-ds/theme/variables.css';
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
background-color: var(--midas-color-background-default);
|
|
30
|
+
font-family: var(--midas-typography-font-family);
|
|
31
|
+
font-size: var(--midas-font-size-base);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### JavaScript / TypeScript
|
|
36
|
+
|
|
37
|
+
You can import the tokens directly into your JavaScript or TypeScript files to use them in your component logic or styled-components.
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
// Example: Using tokens in a JavaScript file
|
|
41
|
+
import { variables } from '@midas-ds/theme';
|
|
42
|
+
|
|
43
|
+
const customStyle = {
|
|
44
|
+
backgroundColor: variables.color.background.default,
|
|
45
|
+
padding: variables.spacing.base,
|
|
46
|
+
};
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Contributing
|
|
50
|
+
|
|
51
|
+
The source of truth for all design tokens is located in the `tokens/` directory, organized into JSON files by category (e.g., `colors.json`, `spacing.json`).
|
|
52
|
+
|
|
53
|
+
To make changes to the theme:
|
|
54
|
+
|
|
55
|
+
1. Modify the desired token values in the JSON files under the `tokens/` directory.
|
|
56
|
+
2. Run the build script `sd.build.mjs` to regenerate the theme assets. This will update the files in the `src/lib/style-dictionary-dist/` directory.
|
|
57
|
+
|
|
58
|
+
This process ensures that all theme assets are kept in sync with the master token definitions.
|
package/index.mjs
CHANGED
|
@@ -2898,11 +2898,11 @@ const Oa = {
|
|
|
2898
2898
|
text: {
|
|
2899
2899
|
sectionHeader: {
|
|
2900
2900
|
key: "{menu.text.sectionHeader}",
|
|
2901
|
-
$value: "light-dark(#
|
|
2901
|
+
$value: "light-dark(#525252, #a6a6a6)",
|
|
2902
2902
|
filePath: "packages/theme/tokens/object-values.json",
|
|
2903
2903
|
isSource: !0,
|
|
2904
2904
|
original: {
|
|
2905
|
-
$value: "light-dark({color.
|
|
2905
|
+
$value: "light-dark({color.gray.140}, {color.gray.70})",
|
|
2906
2906
|
key: "{menu.text.sectionHeader}"
|
|
2907
2907
|
},
|
|
2908
2908
|
name: "menuTextSectionHeader",
|
|
@@ -3998,7 +3998,7 @@ const Oa = {
|
|
|
3998
3998
|
path: ["zIndex", "skipToContent"]
|
|
3999
3999
|
}
|
|
4000
4000
|
}
|
|
4001
|
-
}, e = "480px", o = "768px", t = "1024px", a = "1280px", r = "(max-width: calc(480px - 1px))", i = "(min-width: 480px)", l = "(min-width: 768px)", n = "(min-width: 1024px)", s = "(min-width: 1280px)", c = "#000", g = "#0d0d0d", u = "#fff", p = "#e6e6e6", k = "#f2f2f2", d = "#e6e6e6", y = "#d9d9d9", h = "#ccc", f = "#bfbfbf",
|
|
4001
|
+
}, e = "480px", o = "768px", t = "1024px", a = "1280px", r = "(max-width: calc(480px - 1px))", i = "(min-width: 480px)", l = "(min-width: 768px)", n = "(min-width: 1024px)", s = "(min-width: 1280px)", c = "#000", g = "#0d0d0d", u = "#fff", p = "#e6e6e6", k = "#f2f2f2", d = "#e6e6e6", y = "#d9d9d9", h = "#ccc", f = "#bfbfbf", m = "#b3b3b3", b = "#a6a6a6", $ = "#999", v = "#8c8c8c", S = "#808080", j = "#737373", P = "#666", w = "#5d5d5d", z = "#525252", B = "#474747", H = "#383838", x = "#333", R = "#262626", Y = "#212121", I = "#171717", A = "#eaf2f6", G = "#d5e5ed", C = "#abcbdb", W = "#94BCD1", F = "#82b0c9", D = "#6CA3C0", T = "#5897b8", L = "#4289ad", K = "#2e7ca5", E = "#2C7399", M = "#29698C", O = "#25607f", X = "#143c50", _ = "#b46ab4", N = "#954b95", V = "#b90835", q = "#eaf2f6", J = "#d5e5ed", Q = "#06c", U = "#d5f2d9", Z = "#bae5c5", ee = "#008d3c", oe = "#194B33", te = "#fff8e2", ae = "#fff1cd", re = "#ffeab8", ie = "#ffe3a3", le = "#ffdc8b", ne = "#ffd47b", se = "#fdcd5d", ce = "#fbc640", ge = "#fabf1b", ue = "#fab900", pe = "#daa105", ke = "#bd8c1e", de = "#a17927", ye = "#88672a", he = "#70562b", fe = "#5a4629", me = "#453826", be = "#322a20", $e = "#201c18", ve = "#0f0e0e", Se = "#ffefef", je = "#ffdfdf", Pe = "#fcc8c8", we = "#f9b0b0", ze = "#f69999", Be = "#f38181", He = "#ef6a6a", xe = "#EC5252", Re = "#e93b3b", Ye = "#e62323", Ie = "#d12020", Ae = "#bc1d1d", Ge = "#a71919", Ce = "#921616", We = "#7d1313", Fe = "#691010", De = "#540d0d", Te = "#3f0a0a", Le = "#2a0606", Ke = "#150303", Ee = "light-dark(#fff, #171717)", Me = "light-dark(#e6e6e6, #212121)", Oe = "light-dark(#171717, #f2f2f2)", Xe = "light-dark(#f2f2f2, #262626)", _e = "light-dark(#e6e6e6, #333)", Ne = "light-dark(#d9d9d9, #383838)", Ve = "light-dark(#ccc, #474747)", qe = "light-dark(#fff, #383838)", Je = "light-dark(#e6e6e6, #474747)", Qe = "light-dark(#d9d9d9, #525252)", Ue = "light-dark(#ccc, #5d5d5d)", Ze = "light-dark(#d9d9d9, #383838)", eo = "light-dark(#ccc, #474747)", oo = "light-dark(#bfbfbf, #525252)", to = "light-dark(#f2f2f2, #262626)", ao = "light-dark(#e6e6e6, #333)", ro = "light-dark(#d9d9d9, #383838)", io = "light-dark(#b90835, #b90835)", lo = "light-dark(#171717, #f2f2f2)", no = "light-dark(#737373, #8c8c8c)", so = "light-dark(#bfbfbf, #383838)", co = "light-dark(#143c50, #2e7ca5)", go = "light-dark(#bfbfbf, #525252)", uo = "1px", po = "light-dark(#f2f2f2, #262626)", ko = "light-dark(#e6e6e6, #333)", yo = "light-dark(#d9d9d9, #383838)", ho = "light-dark(#fff, #383838)", fo = "light-dark(#e6e6e6, #474747)", mo = "light-dark(#d9d9d9, #525252)", bo = "light-dark(#f2f2f2, #262626)", $o = "light-dark(#f2f2f2, #262626)", vo = "light-dark(#d9d9d9, #383838)", So = "light-dark(#171717, #f2f2f2)", jo = "light-dark(#525252, #a6a6a6)", Po = "light-dark(#143c50, #f2f2f2)", wo = "light-dark(#fff, #171717)", zo = "light-dark(#fff, #fff)", Bo = "light-dark(#bfbfbf, #525252)", Ho = "light-dark(#008d3c, #008d3c)", xo = "light-dark(#06c, #06c)", Ro = "light-dark(#e62323, #e62323)", Yo = "light-dark(#fab900, #fab900)", Io = "light-dark(#29698C, #6CA3C0)", Ao = "light-dark(#143c50, #94BCD1)", Go = "light-dark(#171717, #abcbdb)", Co = "light-dark(#954b95, #b46ab4)", Wo = "light-dark(#008d3c, #008d3c)", Fo = "light-dark(#06c, #06c)", Do = "light-dark(#fab900, #fab900)", To = "light-dark(#e62323, #e62323)", Lo = "light-dark(#d5f2d9, #262626)", Ko = "light-dark(#bae5c5, #333)", Eo = "light-dark(#eaf2f6, #262626)", Mo = "light-dark(#d5e5ed, #333)", Oo = "light-dark(#fff8e2, #262626)", Xo = "light-dark(#fff1cd, #333)", _o = "light-dark(#ffdfdf, #262626)", No = "light-dark(#fcc8c8, #333)", Vo = "light-dark(#171717, #f2f2f2)", qo = "light-dark(#525252, #a6a6a6)", Jo = "light-dark(#143c50, #f2f2f2)", Qo = "light-dark(#fff, #fff)", Uo = "light-dark(#f2f2f2, #171717)", Zo = "light-dark(#bfbfbf, #525252)", et = "light-dark(#e62323, #EC5252)", ot = "light-dark(#a6a6a6, #525252)", tt = "light-dark(#143c50, #2e7ca5)", at = "light-dark(#25607f, #25607f)", rt = "light-dark(#2e7ca5, #143c50)", it = "light-dark(#fff, #171717)", lt = "light-dark(#e6e6e6, #212121)", nt = "light-dark(#d9d9d9, #262626)", st = "light-dark(#e6e6e6, #212121)", ct = "light-dark(#d9d9d9, #262626)", gt = "light-dark(#e62323, #e62323)", ut = "light-dark(#bc1d1d, #bc1d1d)", pt = "light-dark(#7d1313, #7d1313)", kt = "light-dark(#f2f2f2, #262626)", dt = "light-dark(#143c50, #f2f2f2)", yt = "light-dark(#0000001a, #ffffff1a)", ht = "light-dark(#00000033, #ffffff33)", ft = "light-dark(#e62323, #e62323)", mt = "light-dark(#0000001a, #ffffff1a)", bt = "light-dark(#143c50, #5897b8)", $t = "light-dark(#143c50, #5897b8)", vt = "light-dark(#d5e5ed, #143c50)", St = "light-dark(#143c50, #5897b8)", jt = "light-dark(#b90835, #fff)", Pt = "light-dark(#e6e6e6, #212121)", wt = "light-dark(#f2f2f2, #262626)", zt = "light-dark(#525252, #a6a6a6)", Bt = "0.125rem", Ht = "0.188rem", xt = "0.25rem", Rt = "0.375rem", Yt = "0.5rem", It = "0.625rem", At = "0.75rem", Gt = "0.875rem", Ct = "0.938rem", Wt = "1rem", Ft = "1.25rem", Dt = "1.5rem", Tt = "1.75rem", Lt = "2rem", Kt = "2.5rem", Et = "2.75rem", Mt = "3rem", Ot = 0, Xt = "0.063rem", _t = "0.125rem", Nt = "0.25rem", Vt = "0.5rem", qt = "0.75rem", Jt = "1rem", Qt = "1.5rem", Ut = "2rem", Zt = "2.5rem", ea = "3rem", oa = "4rem", ta = "5rem", aa = "6rem", ra = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", ia = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", la = "500ms", na = "300ms", sa = "250ms", ca = "Inter, sans-serif", ga = "0.75rem", ua = "0.875rem", pa = "1rem", ka = "1.125rem", da = "1.25rem", ya = "1.5rem", ha = "1.75rem", fa = "2rem", ma = "2.25rem", ba = "2.625rem", $a = "1rem", va = "1.125rem", Sa = "1.25rem", ja = "1.375rem", Pa = "1.5rem", wa = "1.75rem", za = "2rem", Ba = "2.25rem", Ha = "2.5rem", xa = "2.75rem", Ra = 100, Ya = 200, Ia = 300, Aa = 400, Ga = 500, Ca = 600, Wa = 700, Fa = 800, Da = 900, Ta = 1, La = 10, Ka = 1e3, Ea = 1100, Ma = 1200, Xa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
4002
4002
|
__proto__: null,
|
|
4003
4003
|
backgroundBase: Ee,
|
|
4004
4004
|
backgroundHover: Me,
|
|
@@ -4032,9 +4032,9 @@ const Oa = {
|
|
|
4032
4032
|
buttonIconActive: ht,
|
|
4033
4033
|
buttonIconHover: yt,
|
|
4034
4034
|
calendarDateBackgroundEndRange: St,
|
|
4035
|
-
calendarDateBackgroundHover:
|
|
4035
|
+
calendarDateBackgroundHover: mt,
|
|
4036
4036
|
calendarDateBackgroundInRange: vt,
|
|
4037
|
-
calendarDateBackgroundSelected:
|
|
4037
|
+
calendarDateBackgroundSelected: bt,
|
|
4038
4038
|
calendarDateBackgroundStartRange: $t,
|
|
4039
4039
|
colorBlackBase: c,
|
|
4040
4040
|
colorBlackHover: g,
|
|
@@ -4067,8 +4067,8 @@ const Oa = {
|
|
|
4067
4067
|
colorGray30: y,
|
|
4068
4068
|
colorGray40: h,
|
|
4069
4069
|
colorGray50: f,
|
|
4070
|
-
colorGray60:
|
|
4071
|
-
colorGray70:
|
|
4070
|
+
colorGray60: m,
|
|
4071
|
+
colorGray70: b,
|
|
4072
4072
|
colorGray80: $,
|
|
4073
4073
|
colorGray90: v,
|
|
4074
4074
|
colorPurple110: N,
|
|
@@ -4109,8 +4109,8 @@ const Oa = {
|
|
|
4109
4109
|
colorSignalYellow140: ye,
|
|
4110
4110
|
colorSignalYellow150: he,
|
|
4111
4111
|
colorSignalYellow160: fe,
|
|
4112
|
-
colorSignalYellow170:
|
|
4113
|
-
colorSignalYellow180:
|
|
4112
|
+
colorSignalYellow170: me,
|
|
4113
|
+
colorSignalYellow180: be,
|
|
4114
4114
|
colorSignalYellow190: $e,
|
|
4115
4115
|
colorSignalYellow20: ae,
|
|
4116
4116
|
colorSignalYellow200: ve,
|
|
@@ -4126,10 +4126,10 @@ const Oa = {
|
|
|
4126
4126
|
field01Active: yo,
|
|
4127
4127
|
field01Base: po,
|
|
4128
4128
|
field01Hover: ko,
|
|
4129
|
-
field02Active:
|
|
4129
|
+
field02Active: mo,
|
|
4130
4130
|
field02Base: ho,
|
|
4131
4131
|
field02Hover: fo,
|
|
4132
|
-
fieldDisabled:
|
|
4132
|
+
fieldDisabled: bo,
|
|
4133
4133
|
iconDisabled: Bo,
|
|
4134
4134
|
iconImportant: Yo,
|
|
4135
4135
|
iconInfo: xo,
|
|
@@ -4222,7 +4222,7 @@ const Oa = {
|
|
|
4222
4222
|
transitionsDurationSlow: la,
|
|
4223
4223
|
typographyFontFamily: ca,
|
|
4224
4224
|
typographyFontSize10: ga,
|
|
4225
|
-
typographyFontSize100:
|
|
4225
|
+
typographyFontSize100: ba,
|
|
4226
4226
|
typographyFontSize20: ua,
|
|
4227
4227
|
typographyFontSize30: pa,
|
|
4228
4228
|
typographyFontSize40: ka,
|
|
@@ -4230,7 +4230,7 @@ const Oa = {
|
|
|
4230
4230
|
typographyFontSize60: ya,
|
|
4231
4231
|
typographyFontSize70: ha,
|
|
4232
4232
|
typographyFontSize80: fa,
|
|
4233
|
-
typographyFontSize90:
|
|
4233
|
+
typographyFontSize90: ma,
|
|
4234
4234
|
typographyLineHeight10: $a,
|
|
4235
4235
|
typographyLineHeight100: xa,
|
|
4236
4236
|
typographyLineHeight20: va,
|
package/package.json
CHANGED
package/variables.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-button-icon-hover: light-dark(#0000001a, #ffffff1a);--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-transitions-duration-slow: .5s;--midas-transitions-duration-normal: .3s;--midas-transitions-duration-fast: .25s;--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.75rem;--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: 2.75rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-gray-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-gray-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-gray-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-gray-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-gray-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-gray-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-gray-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-gray-170));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--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-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-blue-120), var(--midas-color-blue-80))}
|
|
1
|
+
:root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-button-icon-hover: light-dark(#0000001a, #ffffff1a);--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-transitions-duration-slow: .5s;--midas-transitions-duration-normal: .3s;--midas-transitions-duration-fast: .25s;--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.75rem;--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: 2.75rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: light-dark(var(--midas-color-signal-yellow-100), var(--midas-color-signal-yellow-100));--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-gray-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-gray-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-gray-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-gray-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-gray-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-gray-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-gray-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-gray-170));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--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-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))}
|