@midas-ds/theme 2.0.0 → 2.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/{index.js → index.mjs} +246 -294
- package/lib/index.d.ts +3 -3
- package/lib/style-dictionary-dist/{generated-object.d.ts → token-dictionary.d.ts} +0 -3
- package/lib/style-dictionary-dist/{generated-tokens.d.ts → variables.d.ts} +0 -3
- package/package.json +3 -11
- package/variables.css +1 -0
- package/README.md +0 -58
- package/assets/variables.css +0 -1
package/{index.js → index.mjs}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const Br = {
|
|
2
2
|
windowSizes: {
|
|
3
3
|
sm: {
|
|
4
4
|
key: "{windowSizes.sm}",
|
|
@@ -64,12 +64,12 @@ const xr = {
|
|
|
64
64
|
breakpoints: {
|
|
65
65
|
xs: {
|
|
66
66
|
key: "{breakpoints.xs}",
|
|
67
|
-
$value: "
|
|
67
|
+
$value: "(max-width: calc(480px - 1px))",
|
|
68
68
|
filePath: "tokens/breakpoints.json",
|
|
69
69
|
isSource: !0,
|
|
70
70
|
$type: "string",
|
|
71
71
|
original: {
|
|
72
|
-
$value: "
|
|
72
|
+
$value: "(max-width: calc({windowSizes.sm} - 1px))",
|
|
73
73
|
$type: "string",
|
|
74
74
|
key: "{breakpoints.xs}"
|
|
75
75
|
},
|
|
@@ -79,12 +79,12 @@ const xr = {
|
|
|
79
79
|
},
|
|
80
80
|
sm: {
|
|
81
81
|
key: "{breakpoints.sm}",
|
|
82
|
-
$value: "
|
|
82
|
+
$value: "(min-width: 480px)",
|
|
83
83
|
filePath: "tokens/breakpoints.json",
|
|
84
84
|
isSource: !0,
|
|
85
85
|
$type: "string",
|
|
86
86
|
original: {
|
|
87
|
-
$value: "
|
|
87
|
+
$value: "(min-width: {windowSizes.sm})",
|
|
88
88
|
$type: "string",
|
|
89
89
|
key: "{breakpoints.sm}"
|
|
90
90
|
},
|
|
@@ -94,12 +94,12 @@ const xr = {
|
|
|
94
94
|
},
|
|
95
95
|
md: {
|
|
96
96
|
key: "{breakpoints.md}",
|
|
97
|
-
$value: "
|
|
97
|
+
$value: "(min-width: 768px)",
|
|
98
98
|
filePath: "tokens/breakpoints.json",
|
|
99
99
|
isSource: !0,
|
|
100
100
|
$type: "string",
|
|
101
101
|
original: {
|
|
102
|
-
$value: "
|
|
102
|
+
$value: "(min-width: {windowSizes.md})",
|
|
103
103
|
$type: "string",
|
|
104
104
|
key: "{breakpoints.md}"
|
|
105
105
|
},
|
|
@@ -109,12 +109,12 @@ const xr = {
|
|
|
109
109
|
},
|
|
110
110
|
lg: {
|
|
111
111
|
key: "{breakpoints.lg}",
|
|
112
|
-
$value: "
|
|
112
|
+
$value: "(min-width: 1024px)",
|
|
113
113
|
filePath: "tokens/breakpoints.json",
|
|
114
114
|
isSource: !0,
|
|
115
115
|
$type: "string",
|
|
116
116
|
original: {
|
|
117
|
-
$value: "
|
|
117
|
+
$value: "(min-width: {windowSizes.lg})",
|
|
118
118
|
$type: "string",
|
|
119
119
|
key: "{breakpoints.lg}"
|
|
120
120
|
},
|
|
@@ -124,13 +124,13 @@ const xr = {
|
|
|
124
124
|
},
|
|
125
125
|
xl: {
|
|
126
126
|
key: "{breakpoints.xl}",
|
|
127
|
-
$value: "
|
|
127
|
+
$value: "(min-width: 1280px)",
|
|
128
128
|
$comment: "This is the largest breakpoint",
|
|
129
129
|
filePath: "tokens/breakpoints.json",
|
|
130
130
|
isSource: !0,
|
|
131
131
|
$type: "string",
|
|
132
132
|
original: {
|
|
133
|
-
$value: "
|
|
133
|
+
$value: "(min-width: {windowSizes.xl})",
|
|
134
134
|
$comment: "This is the largest breakpoint",
|
|
135
135
|
$type: "string",
|
|
136
136
|
key: "{breakpoints.xl}"
|
|
@@ -138,51 +138,6 @@ const xr = {
|
|
|
138
138
|
name: "breakpointsXl",
|
|
139
139
|
attributes: {},
|
|
140
140
|
path: ["breakpoints", "xl"]
|
|
141
|
-
},
|
|
142
|
-
forcedColorsMode: {
|
|
143
|
-
key: "{breakpoints.forcedColorsMode}",
|
|
144
|
-
$value: "'(forced-colors: active)'",
|
|
145
|
-
filePath: "tokens/breakpoints.json",
|
|
146
|
-
isSource: !0,
|
|
147
|
-
$type: "string",
|
|
148
|
-
original: {
|
|
149
|
-
$value: "'(forced-colors: active)'",
|
|
150
|
-
$type: "string",
|
|
151
|
-
key: "{breakpoints.forcedColorsMode}"
|
|
152
|
-
},
|
|
153
|
-
name: "breakpointsForcedColorsMode",
|
|
154
|
-
attributes: {},
|
|
155
|
-
path: ["breakpoints", "forcedColorsMode"]
|
|
156
|
-
},
|
|
157
|
-
darkMode: {
|
|
158
|
-
key: "{breakpoints.darkMode}",
|
|
159
|
-
$value: "'(prefers-color-scheme: dark)'",
|
|
160
|
-
filePath: "tokens/breakpoints.json",
|
|
161
|
-
isSource: !0,
|
|
162
|
-
$type: "string",
|
|
163
|
-
original: {
|
|
164
|
-
$value: "'(prefers-color-scheme: dark)'",
|
|
165
|
-
$type: "string",
|
|
166
|
-
key: "{breakpoints.darkMode}"
|
|
167
|
-
},
|
|
168
|
-
name: "breakpointsDarkMode",
|
|
169
|
-
attributes: {},
|
|
170
|
-
path: ["breakpoints", "darkMode"]
|
|
171
|
-
},
|
|
172
|
-
prefersReducedMotion: {
|
|
173
|
-
key: "{breakpoints.prefersReducedMotion}",
|
|
174
|
-
$value: "'(prefers-reduced-motion: reduced)'",
|
|
175
|
-
filePath: "tokens/breakpoints.json",
|
|
176
|
-
isSource: !0,
|
|
177
|
-
$type: "string",
|
|
178
|
-
original: {
|
|
179
|
-
$value: "'(prefers-reduced-motion: reduced)'",
|
|
180
|
-
$type: "string",
|
|
181
|
-
key: "{breakpoints.prefersReducedMotion}"
|
|
182
|
-
},
|
|
183
|
-
name: "breakpointsPrefersReducedMotion",
|
|
184
|
-
attributes: {},
|
|
185
|
-
path: ["breakpoints", "prefersReducedMotion"]
|
|
186
141
|
}
|
|
187
142
|
},
|
|
188
143
|
color: {
|
|
@@ -3773,254 +3728,251 @@ const xr = {
|
|
|
3773
3728
|
path: ["zIndex", "skipToContent"]
|
|
3774
3729
|
}
|
|
3775
3730
|
}
|
|
3776
|
-
}, e = "480px", o = "768px", t = "1024px", r = "1280px", a = "
|
|
3731
|
+
}, e = "480px", o = "768px", t = "1024px", r = "1280px", a = "(max-width: calc(480px - 1px))", i = "(min-width: 480px)", n = "(min-width: 768px)", l = "(min-width: 1024px)", s = "(min-width: 1280px)", c = "#000", u = "#0d0d0d", g = "#fff", d = "#e6e6e6", y = "#f2f2f2", p = "#e6e6e6", k = "#d9d9d9", h = "#ccc", b = "#bfbfbf", f = "#b3b3b3", $ = "#a6a6a6", v = "#999", m = "#8c8c8c", S = "#808080", j = "#737373", P = "#666", z = "#5d5d5d", B = "#525252", H = "#474747", w = "#383838", x = "#333", R = "#262626", A = "#212121", I = "#171717", G = "#eaf2f6", W = "#d5e5ed", F = "#abcbdb", C = "#94BCD1", D = "#82b0c9", T = "#6CA3C0", L = "#5897b8", Y = "#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 = "#fff8e1", te = "#FFEBA8", re = "#fdb813", ae = "#ffefef", ie = "#ffdfdf", ne = "#fcc8c8", le = "#f9b0b0", se = "#f69999", ce = "#f38181", ue = "#ef6a6a", ge = "#eb4e4e", de = "#e93b3b", ye = "#e62323", pe = "#d12020", ke = "#bc1d1d", he = "#a71919", be = "#921616", fe = "#7d1313", $e = "#691010", ve = "#540d0d", me = "#3f0a0a", Se = "#2a0606", je = "#150303", Pe = "light-dark(#fff, #171717)", ze = "light-dark(#e6e6e6, #212121)", Be = "light-dark(#171717, #f2f2f2)", He = "light-dark(#f2f2f2, #262626)", we = "light-dark(#e6e6e6, #333)", xe = "light-dark(#d9d9d9, #383838)", Re = "light-dark(#ccc, #474747)", Ae = "light-dark(#fff, #383838)", Ie = "light-dark(#e6e6e6, #474747)", Ge = "light-dark(#d9d9d9, #525252)", We = "light-dark(#ccc, #5d5d5d)", Fe = "light-dark(#d9d9d9, #383838)", Ce = "light-dark(#ccc, #474747)", De = "light-dark(#bfbfbf, #525252)", Te = "light-dark(#f2f2f2, #262626)", Le = "light-dark(#e6e6e6, #333)", Ye = "light-dark(#d9d9d9, #383838)", Ke = "light-dark(#b90835, #b90835)", Ee = "light-dark(#171717, #f2f2f2)", Me = "light-dark(#737373, #8c8c8c)", Oe = "light-dark(#bfbfbf, #383838)", Xe = "light-dark(#143c50, #2e7ca5)", _e = "light-dark(#bfbfbf, #525252)", Ne = "1px", Ve = "light-dark(#f2f2f2, #262626)", qe = "light-dark(#e6e6e6, #333)", Je = "light-dark(#d9d9d9, #383838)", Qe = "light-dark(#fff, #383838)", Ue = "light-dark(#e6e6e6, #474747)", Ze = "light-dark(#d9d9d9, #525252)", eo = "light-dark(#f2f2f2, #262626)", oo = "light-dark(#f2f2f2, #262626)", to = "light-dark(#d9d9d9, #383838)", ro = "light-dark(#171717, #f2f2f2)", ao = "light-dark(#525252, #a6a6a6)", io = "light-dark(#143c50, #f2f2f2)", no = "light-dark(#fff, #171717)", lo = "light-dark(#fff, #fff)", so = "light-dark(#bfbfbf, #525252)", co = "light-dark(#008d3c, #008d3c)", uo = "light-dark(#06c, #06c)", go = "light-dark(#e62323, #e62323)", yo = "light-dark(#fdb813, #fdb813)", po = "light-dark(#29698C, #6CA3C0)", ko = "light-dark(#143c50, #94BCD1)", ho = "light-dark(#171717, #abcbdb)", bo = "light-dark(#954b95, #b46ab4)", fo = "light-dark(#008d3c, #008d3c)", $o = "light-dark(#06c, #06c)", vo = "light-dark(#fdb813, #fdb813)", mo = "light-dark(#e62323, #e62323)", So = "light-dark(#d5f2d9, #262626)", jo = "light-dark(#bae5c5, #333)", Po = "light-dark(#eaf2f6, #262626)", zo = "light-dark(#d5e5ed, #333)", Bo = "light-dark(#fff8e1, #262626)", Ho = "light-dark(#FFEBA8, #333)", wo = "light-dark(#ffdfdf, #262626)", xo = "light-dark(#fcc8c8, #333)", Ro = "light-dark(#171717, #f2f2f2)", Ao = "light-dark(#525252, #a6a6a6)", Io = "light-dark(#143c50, #f2f2f2)", Go = "light-dark(#fff, #fff)", Wo = "light-dark(#f2f2f2, #171717)", Fo = "light-dark(#bfbfbf, #525252)", Co = "light-dark(#e62323, #eb4e4e)", Do = "light-dark(#a6a6a6, #525252)", To = "light-dark(#143c50, #2e7ca5)", Lo = "light-dark(#25607f, #25607f)", Yo = "light-dark(#2e7ca5, #143c50)", Ko = "light-dark(#fff, #171717)", Eo = "light-dark(#e6e6e6, #212121)", Mo = "light-dark(#d9d9d9, #262626)", Oo = "light-dark(#e6e6e6, #212121)", Xo = "light-dark(#d9d9d9, #262626)", _o = "light-dark(#e62323, #e62323)", No = "light-dark(#bc1d1d, #bc1d1d)", Vo = "light-dark(#7d1313, #7d1313)", qo = "light-dark(#f2f2f2, #262626)", Jo = "light-dark(#143c50, #f2f2f2)", Qo = "light-dark(#0000001a, #ffffff1a)", Uo = "light-dark(#00000033, #ffffff33)", Zo = "light-dark(#e62323, #e62323)", et = "light-dark(#0000001a, #ffffff1a)", ot = "light-dark(#143c50, #5897b8)", tt = "light-dark(#143c50, #5897b8)", rt = "light-dark(#d5e5ed, #143c50)", at = "light-dark(#143c50, #5897b8)", it = "light-dark(#b90835, #fff)", nt = "light-dark(#e6e6e6, #212121)", lt = "light-dark(#f2f2f2, #262626)", st = "light-dark(#29698C, #5897b8)", ct = "0.125rem", ut = "0.188rem", gt = "0.25rem", dt = "0.375rem", yt = "0.5rem", pt = "0.625rem", kt = "0.75rem", ht = "0.875rem", bt = "0.938rem", ft = "1rem", $t = "1.25rem", vt = "1.5rem", mt = "1.75rem", St = "2rem", jt = "2.5rem", Pt = "2.75rem", zt = "3rem", Bt = 0, Ht = "0.063rem", wt = "0.125rem", xt = "0.25rem", Rt = "0.5rem", At = "0.75rem", It = "1rem", Gt = "1.5rem", Wt = "2rem", Ft = "2.5rem", Ct = "3rem", Dt = "4rem", Tt = "5rem", Lt = "6rem", Yt = "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)", Kt = "inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)", Et = "500ms", Mt = "300ms", Ot = "250ms", Xt = "Inter, sans-serif", _t = "0.75rem", Nt = "0.875rem", Vt = "1rem", qt = "1.125rem", Jt = "1.25rem", Qt = "1.5rem", Ut = "1.75rem", Zt = "2rem", er = "2.25rem", or = "2.625rem", tr = "1rem", rr = "1.125rem", ar = "1.25rem", ir = "1.375rem", nr = "1.5rem", lr = "1.75rem", sr = "2rem", cr = "2.25rem", ur = "2.5rem", gr = "2.75rem", dr = 100, yr = 200, pr = 300, kr = 400, hr = 500, br = 600, fr = 700, $r = 800, vr = 900, mr = 1, Sr = 10, jr = 1e3, Pr = 1100, zr = 1200, Hr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
3777
3732
|
__proto__: null,
|
|
3778
|
-
backgroundBase:
|
|
3779
|
-
backgroundHover:
|
|
3780
|
-
backgroundInverse:
|
|
3781
|
-
badgeBackground:
|
|
3782
|
-
borderColorDisabled:
|
|
3783
|
-
borderColorPrimary:
|
|
3784
|
-
borderColorSecondary:
|
|
3785
|
-
borderColorSubtle:
|
|
3786
|
-
borderColorTertiary:
|
|
3787
|
-
borderWidth:
|
|
3788
|
-
brandPrimary:
|
|
3789
|
-
breakpointsDarkMode: u,
|
|
3790
|
-
breakpointsForcedColorsMode: c,
|
|
3733
|
+
backgroundBase: Pe,
|
|
3734
|
+
backgroundHover: ze,
|
|
3735
|
+
backgroundInverse: Be,
|
|
3736
|
+
badgeBackground: Zo,
|
|
3737
|
+
borderColorDisabled: _e,
|
|
3738
|
+
borderColorPrimary: Ee,
|
|
3739
|
+
borderColorSecondary: Me,
|
|
3740
|
+
borderColorSubtle: Oe,
|
|
3741
|
+
borderColorTertiary: Xe,
|
|
3742
|
+
borderWidth: Ne,
|
|
3743
|
+
brandPrimary: Ke,
|
|
3791
3744
|
breakpointsLg: l,
|
|
3792
3745
|
breakpointsMd: n,
|
|
3793
|
-
breakpointsPrefersReducedMotion: g,
|
|
3794
3746
|
breakpointsSm: i,
|
|
3795
3747
|
breakpointsXl: s,
|
|
3796
3748
|
breakpointsXs: a,
|
|
3797
|
-
buttonBackgroundDangerActive:
|
|
3798
|
-
buttonBackgroundDangerBase:
|
|
3799
|
-
buttonBackgroundDangerHover:
|
|
3800
|
-
buttonBackgroundDisabled:
|
|
3801
|
-
buttonBackgroundPrimaryActive:
|
|
3802
|
-
buttonBackgroundPrimaryBase:
|
|
3803
|
-
buttonBackgroundPrimaryHover:
|
|
3804
|
-
buttonBackgroundSecondaryActive:
|
|
3805
|
-
buttonBackgroundSecondaryBase:
|
|
3806
|
-
buttonBackgroundSecondaryHover:
|
|
3807
|
-
buttonBackgroundTertiaryActive:
|
|
3808
|
-
buttonBackgroundTertiaryHover:
|
|
3809
|
-
buttonBorderSecondary:
|
|
3810
|
-
buttonIconActive:
|
|
3811
|
-
buttonIconHover:
|
|
3812
|
-
calendarDateBackgroundEndRange:
|
|
3813
|
-
calendarDateBackgroundHover:
|
|
3814
|
-
calendarDateBackgroundInRange:
|
|
3815
|
-
calendarDateBackgroundSelected:
|
|
3816
|
-
calendarDateBackgroundStartRange:
|
|
3817
|
-
colorBlackBase:
|
|
3818
|
-
colorBlackHover:
|
|
3819
|
-
colorBlue10:
|
|
3820
|
-
colorBlue100:
|
|
3821
|
-
colorBlue110:
|
|
3822
|
-
colorBlue120:
|
|
3823
|
-
colorBlue130:
|
|
3824
|
-
colorBlue150:
|
|
3825
|
-
colorBlue20:
|
|
3826
|
-
colorBlue40:
|
|
3827
|
-
colorBlue50:
|
|
3828
|
-
colorBlue60:
|
|
3829
|
-
colorBlue70:
|
|
3830
|
-
colorBlue80:
|
|
3831
|
-
colorBlue90:
|
|
3832
|
-
colorGray10:
|
|
3833
|
-
colorGray100:
|
|
3834
|
-
colorGray110:
|
|
3835
|
-
colorGray120:
|
|
3836
|
-
colorGray130:
|
|
3837
|
-
colorGray140:
|
|
3838
|
-
colorGray150:
|
|
3839
|
-
colorGray160:
|
|
3840
|
-
colorGray170:
|
|
3841
|
-
colorGray180:
|
|
3842
|
-
colorGray190:
|
|
3843
|
-
colorGray20:
|
|
3844
|
-
colorGray200:
|
|
3845
|
-
colorGray30:
|
|
3846
|
-
colorGray40:
|
|
3847
|
-
colorGray50:
|
|
3848
|
-
colorGray60:
|
|
3849
|
-
colorGray70:
|
|
3850
|
-
colorGray80:
|
|
3851
|
-
colorGray90:
|
|
3852
|
-
colorPurple110:
|
|
3853
|
-
colorPurple80:
|
|
3854
|
-
colorRed100:
|
|
3855
|
-
colorSignalBlue10:
|
|
3856
|
-
colorSignalBlue100:
|
|
3857
|
-
colorSignalBlue20:
|
|
3858
|
-
colorSignalGreen100:
|
|
3859
|
-
colorSignalGreen20:
|
|
3860
|
-
colorSignalGreen30:
|
|
3861
|
-
colorSignalRed10:
|
|
3862
|
-
colorSignalRed100:
|
|
3863
|
-
colorSignalRed110:
|
|
3864
|
-
colorSignalRed120:
|
|
3865
|
-
colorSignalRed130:
|
|
3866
|
-
colorSignalRed140:
|
|
3867
|
-
colorSignalRed150:
|
|
3868
|
-
colorSignalRed160:
|
|
3869
|
-
colorSignalRed170:
|
|
3870
|
-
colorSignalRed180:
|
|
3871
|
-
colorSignalRed190:
|
|
3872
|
-
colorSignalRed20:
|
|
3873
|
-
colorSignalRed200:
|
|
3874
|
-
colorSignalRed30:
|
|
3875
|
-
colorSignalRed40:
|
|
3876
|
-
colorSignalRed50:
|
|
3877
|
-
colorSignalRed60:
|
|
3878
|
-
colorSignalRed70:
|
|
3879
|
-
colorSignalRed80:
|
|
3880
|
-
colorSignalRed90:
|
|
3881
|
-
colorSignalYellow10:
|
|
3882
|
-
colorSignalYellow100:
|
|
3883
|
-
colorSignalYellow20:
|
|
3884
|
-
colorWhiteBase:
|
|
3885
|
-
colorWhiteHover:
|
|
3886
|
-
field01Active:
|
|
3887
|
-
field01Base:
|
|
3888
|
-
field01Hover:
|
|
3889
|
-
field02Active:
|
|
3890
|
-
field02Base:
|
|
3891
|
-
field02Hover:
|
|
3892
|
-
fieldDisabled:
|
|
3893
|
-
iconDisabled:
|
|
3894
|
-
iconImportant:
|
|
3895
|
-
iconInfo:
|
|
3896
|
-
iconInverse:
|
|
3897
|
-
iconOnColor:
|
|
3898
|
-
iconPrimary:
|
|
3899
|
-
iconSecondary:
|
|
3900
|
-
iconSuccess:
|
|
3901
|
-
iconTertiary:
|
|
3902
|
-
iconWarning:
|
|
3903
|
-
layer01Base:
|
|
3904
|
-
layer01Hover:
|
|
3905
|
-
layer01Selected:
|
|
3906
|
-
layer01SelectedHover:
|
|
3907
|
-
layer02Base:
|
|
3908
|
-
layer02Hover:
|
|
3909
|
-
layer02Selected:
|
|
3910
|
-
layer02SelectedHover:
|
|
3911
|
-
layerAccent01Base:
|
|
3912
|
-
layerAccent01Hover:
|
|
3913
|
-
layerAccent01Selected:
|
|
3914
|
-
layerAccent02Base:
|
|
3915
|
-
layerAccent02Hover:
|
|
3916
|
-
layerAccent02Selected:
|
|
3917
|
-
linkEnabled:
|
|
3918
|
-
linkHover:
|
|
3919
|
-
linkPressed:
|
|
3920
|
-
linkVisited:
|
|
3921
|
-
logoPrimary:
|
|
3922
|
-
menuItemBackgroundHover:
|
|
3923
|
-
menuItemBackgroundSelected:
|
|
3924
|
-
menuTextSectionHeader:
|
|
3925
|
-
size00:
|
|
3926
|
-
size05:
|
|
3927
|
-
size10:
|
|
3928
|
-
size100:
|
|
3929
|
-
size110:
|
|
3930
|
-
size120:
|
|
3931
|
-
size130:
|
|
3932
|
-
size140:
|
|
3933
|
-
size15:
|
|
3934
|
-
size150:
|
|
3935
|
-
size20:
|
|
3936
|
-
size30:
|
|
3937
|
-
size40:
|
|
3938
|
-
size50:
|
|
3939
|
-
size60:
|
|
3940
|
-
size70:
|
|
3941
|
-
size75:
|
|
3942
|
-
size80:
|
|
3943
|
-
size90:
|
|
3944
|
-
skeleton01:
|
|
3945
|
-
skeleton02:
|
|
3946
|
-
spacing10:
|
|
3947
|
-
spacing100:
|
|
3948
|
-
spacing110:
|
|
3949
|
-
spacing120:
|
|
3950
|
-
spacing20:
|
|
3951
|
-
spacing30:
|
|
3952
|
-
spacing40:
|
|
3953
|
-
spacing50:
|
|
3954
|
-
spacing60:
|
|
3955
|
-
spacing70:
|
|
3956
|
-
spacing80:
|
|
3957
|
-
spacing90:
|
|
3958
|
-
stateFocus:
|
|
3959
|
-
stateFocusInset:
|
|
3960
|
-
supportBackgroundImportant:
|
|
3961
|
-
supportBackgroundImportantHover:
|
|
3962
|
-
supportBackgroundInfo:
|
|
3963
|
-
supportBackgroundInfoHover:
|
|
3964
|
-
supportBackgroundSuccess:
|
|
3965
|
-
supportBackgroundSuccessHover:
|
|
3966
|
-
supportBackgroundWarning:
|
|
3967
|
-
supportBackgroundWarningHover:
|
|
3968
|
-
supportBorderImportant:
|
|
3969
|
-
supportBorderInfo:
|
|
3970
|
-
supportBorderSuccess:
|
|
3971
|
-
supportBorderWarning:
|
|
3972
|
-
textDisabled:
|
|
3973
|
-
textInverse:
|
|
3974
|
-
textOnColor:
|
|
3975
|
-
textPlaceholder:
|
|
3976
|
-
textPrimary:
|
|
3977
|
-
textSecondary:
|
|
3978
|
-
textTertiary:
|
|
3979
|
-
textWarning:
|
|
3980
|
-
transitionsDurationFast:
|
|
3981
|
-
transitionsDurationNormal:
|
|
3982
|
-
transitionsDurationSlow:
|
|
3983
|
-
typographyFontFamily:
|
|
3984
|
-
typographyFontSize10:
|
|
3985
|
-
typographyFontSize100:
|
|
3986
|
-
typographyFontSize20:
|
|
3987
|
-
typographyFontSize30:
|
|
3988
|
-
typographyFontSize40:
|
|
3989
|
-
typographyFontSize50:
|
|
3990
|
-
typographyFontSize60:
|
|
3991
|
-
typographyFontSize70:
|
|
3992
|
-
typographyFontSize80:
|
|
3993
|
-
typographyFontSize90:
|
|
3994
|
-
typographyLineHeight10:
|
|
3995
|
-
typographyLineHeight100:
|
|
3996
|
-
typographyLineHeight20:
|
|
3997
|
-
typographyLineHeight30:
|
|
3998
|
-
typographyLineHeight40:
|
|
3999
|
-
typographyLineHeight50:
|
|
4000
|
-
typographyLineHeight60:
|
|
4001
|
-
typographyLineHeight70:
|
|
4002
|
-
typographyLineHeight80:
|
|
4003
|
-
typographyLineHeight90:
|
|
4004
|
-
typographyWeightBlack:
|
|
4005
|
-
typographyWeightBold:
|
|
4006
|
-
typographyWeightExtraBold:
|
|
4007
|
-
typographyWeightExtraLight:
|
|
4008
|
-
typographyWeightLight:
|
|
4009
|
-
typographyWeightMedium:
|
|
4010
|
-
typographyWeightRegular:
|
|
4011
|
-
typographyWeightSemiBold:
|
|
4012
|
-
typographyWeightThin:
|
|
3749
|
+
buttonBackgroundDangerActive: Vo,
|
|
3750
|
+
buttonBackgroundDangerBase: _o,
|
|
3751
|
+
buttonBackgroundDangerHover: No,
|
|
3752
|
+
buttonBackgroundDisabled: qo,
|
|
3753
|
+
buttonBackgroundPrimaryActive: Yo,
|
|
3754
|
+
buttonBackgroundPrimaryBase: To,
|
|
3755
|
+
buttonBackgroundPrimaryHover: Lo,
|
|
3756
|
+
buttonBackgroundSecondaryActive: Mo,
|
|
3757
|
+
buttonBackgroundSecondaryBase: Ko,
|
|
3758
|
+
buttonBackgroundSecondaryHover: Eo,
|
|
3759
|
+
buttonBackgroundTertiaryActive: Xo,
|
|
3760
|
+
buttonBackgroundTertiaryHover: Oo,
|
|
3761
|
+
buttonBorderSecondary: Jo,
|
|
3762
|
+
buttonIconActive: Uo,
|
|
3763
|
+
buttonIconHover: Qo,
|
|
3764
|
+
calendarDateBackgroundEndRange: at,
|
|
3765
|
+
calendarDateBackgroundHover: et,
|
|
3766
|
+
calendarDateBackgroundInRange: rt,
|
|
3767
|
+
calendarDateBackgroundSelected: ot,
|
|
3768
|
+
calendarDateBackgroundStartRange: tt,
|
|
3769
|
+
colorBlackBase: c,
|
|
3770
|
+
colorBlackHover: u,
|
|
3771
|
+
colorBlue10: G,
|
|
3772
|
+
colorBlue100: K,
|
|
3773
|
+
colorBlue110: E,
|
|
3774
|
+
colorBlue120: M,
|
|
3775
|
+
colorBlue130: O,
|
|
3776
|
+
colorBlue150: X,
|
|
3777
|
+
colorBlue20: W,
|
|
3778
|
+
colorBlue40: F,
|
|
3779
|
+
colorBlue50: C,
|
|
3780
|
+
colorBlue60: D,
|
|
3781
|
+
colorBlue70: T,
|
|
3782
|
+
colorBlue80: L,
|
|
3783
|
+
colorBlue90: Y,
|
|
3784
|
+
colorGray10: y,
|
|
3785
|
+
colorGray100: S,
|
|
3786
|
+
colorGray110: j,
|
|
3787
|
+
colorGray120: P,
|
|
3788
|
+
colorGray130: z,
|
|
3789
|
+
colorGray140: B,
|
|
3790
|
+
colorGray150: H,
|
|
3791
|
+
colorGray160: w,
|
|
3792
|
+
colorGray170: x,
|
|
3793
|
+
colorGray180: R,
|
|
3794
|
+
colorGray190: A,
|
|
3795
|
+
colorGray20: p,
|
|
3796
|
+
colorGray200: I,
|
|
3797
|
+
colorGray30: k,
|
|
3798
|
+
colorGray40: h,
|
|
3799
|
+
colorGray50: b,
|
|
3800
|
+
colorGray60: f,
|
|
3801
|
+
colorGray70: $,
|
|
3802
|
+
colorGray80: v,
|
|
3803
|
+
colorGray90: m,
|
|
3804
|
+
colorPurple110: N,
|
|
3805
|
+
colorPurple80: _,
|
|
3806
|
+
colorRed100: V,
|
|
3807
|
+
colorSignalBlue10: q,
|
|
3808
|
+
colorSignalBlue100: Q,
|
|
3809
|
+
colorSignalBlue20: J,
|
|
3810
|
+
colorSignalGreen100: ee,
|
|
3811
|
+
colorSignalGreen20: U,
|
|
3812
|
+
colorSignalGreen30: Z,
|
|
3813
|
+
colorSignalRed10: ae,
|
|
3814
|
+
colorSignalRed100: ye,
|
|
3815
|
+
colorSignalRed110: pe,
|
|
3816
|
+
colorSignalRed120: ke,
|
|
3817
|
+
colorSignalRed130: he,
|
|
3818
|
+
colorSignalRed140: be,
|
|
3819
|
+
colorSignalRed150: fe,
|
|
3820
|
+
colorSignalRed160: $e,
|
|
3821
|
+
colorSignalRed170: ve,
|
|
3822
|
+
colorSignalRed180: me,
|
|
3823
|
+
colorSignalRed190: Se,
|
|
3824
|
+
colorSignalRed20: ie,
|
|
3825
|
+
colorSignalRed200: je,
|
|
3826
|
+
colorSignalRed30: ne,
|
|
3827
|
+
colorSignalRed40: le,
|
|
3828
|
+
colorSignalRed50: se,
|
|
3829
|
+
colorSignalRed60: ce,
|
|
3830
|
+
colorSignalRed70: ue,
|
|
3831
|
+
colorSignalRed80: ge,
|
|
3832
|
+
colorSignalRed90: de,
|
|
3833
|
+
colorSignalYellow10: oe,
|
|
3834
|
+
colorSignalYellow100: re,
|
|
3835
|
+
colorSignalYellow20: te,
|
|
3836
|
+
colorWhiteBase: g,
|
|
3837
|
+
colorWhiteHover: d,
|
|
3838
|
+
field01Active: Je,
|
|
3839
|
+
field01Base: Ve,
|
|
3840
|
+
field01Hover: qe,
|
|
3841
|
+
field02Active: Ze,
|
|
3842
|
+
field02Base: Qe,
|
|
3843
|
+
field02Hover: Ue,
|
|
3844
|
+
fieldDisabled: eo,
|
|
3845
|
+
iconDisabled: so,
|
|
3846
|
+
iconImportant: yo,
|
|
3847
|
+
iconInfo: uo,
|
|
3848
|
+
iconInverse: no,
|
|
3849
|
+
iconOnColor: lo,
|
|
3850
|
+
iconPrimary: ro,
|
|
3851
|
+
iconSecondary: ao,
|
|
3852
|
+
iconSuccess: co,
|
|
3853
|
+
iconTertiary: io,
|
|
3854
|
+
iconWarning: go,
|
|
3855
|
+
layer01Base: He,
|
|
3856
|
+
layer01Hover: we,
|
|
3857
|
+
layer01Selected: xe,
|
|
3858
|
+
layer01SelectedHover: Re,
|
|
3859
|
+
layer02Base: Ae,
|
|
3860
|
+
layer02Hover: Ie,
|
|
3861
|
+
layer02Selected: Ge,
|
|
3862
|
+
layer02SelectedHover: We,
|
|
3863
|
+
layerAccent01Base: Fe,
|
|
3864
|
+
layerAccent01Hover: Ce,
|
|
3865
|
+
layerAccent01Selected: De,
|
|
3866
|
+
layerAccent02Base: Te,
|
|
3867
|
+
layerAccent02Hover: Le,
|
|
3868
|
+
layerAccent02Selected: Ye,
|
|
3869
|
+
linkEnabled: po,
|
|
3870
|
+
linkHover: ko,
|
|
3871
|
+
linkPressed: ho,
|
|
3872
|
+
linkVisited: bo,
|
|
3873
|
+
logoPrimary: it,
|
|
3874
|
+
menuItemBackgroundHover: nt,
|
|
3875
|
+
menuItemBackgroundSelected: lt,
|
|
3876
|
+
menuTextSectionHeader: st,
|
|
3877
|
+
size00: Bt,
|
|
3878
|
+
size05: Ht,
|
|
3879
|
+
size10: ct,
|
|
3880
|
+
size100: vt,
|
|
3881
|
+
size110: mt,
|
|
3882
|
+
size120: St,
|
|
3883
|
+
size130: jt,
|
|
3884
|
+
size140: Pt,
|
|
3885
|
+
size15: ut,
|
|
3886
|
+
size150: zt,
|
|
3887
|
+
size20: gt,
|
|
3888
|
+
size30: dt,
|
|
3889
|
+
size40: yt,
|
|
3890
|
+
size50: pt,
|
|
3891
|
+
size60: kt,
|
|
3892
|
+
size70: ht,
|
|
3893
|
+
size75: bt,
|
|
3894
|
+
size80: ft,
|
|
3895
|
+
size90: $t,
|
|
3896
|
+
skeleton01: oo,
|
|
3897
|
+
skeleton02: to,
|
|
3898
|
+
spacing10: wt,
|
|
3899
|
+
spacing100: Dt,
|
|
3900
|
+
spacing110: Tt,
|
|
3901
|
+
spacing120: Lt,
|
|
3902
|
+
spacing20: xt,
|
|
3903
|
+
spacing30: Rt,
|
|
3904
|
+
spacing40: At,
|
|
3905
|
+
spacing50: It,
|
|
3906
|
+
spacing60: Gt,
|
|
3907
|
+
spacing70: Wt,
|
|
3908
|
+
spacing80: Ft,
|
|
3909
|
+
spacing90: Ct,
|
|
3910
|
+
stateFocus: Yt,
|
|
3911
|
+
stateFocusInset: Kt,
|
|
3912
|
+
supportBackgroundImportant: Bo,
|
|
3913
|
+
supportBackgroundImportantHover: Ho,
|
|
3914
|
+
supportBackgroundInfo: Po,
|
|
3915
|
+
supportBackgroundInfoHover: zo,
|
|
3916
|
+
supportBackgroundSuccess: So,
|
|
3917
|
+
supportBackgroundSuccessHover: jo,
|
|
3918
|
+
supportBackgroundWarning: wo,
|
|
3919
|
+
supportBackgroundWarningHover: xo,
|
|
3920
|
+
supportBorderImportant: vo,
|
|
3921
|
+
supportBorderInfo: $o,
|
|
3922
|
+
supportBorderSuccess: fo,
|
|
3923
|
+
supportBorderWarning: mo,
|
|
3924
|
+
textDisabled: Fo,
|
|
3925
|
+
textInverse: Wo,
|
|
3926
|
+
textOnColor: Go,
|
|
3927
|
+
textPlaceholder: Do,
|
|
3928
|
+
textPrimary: Ro,
|
|
3929
|
+
textSecondary: Ao,
|
|
3930
|
+
textTertiary: Io,
|
|
3931
|
+
textWarning: Co,
|
|
3932
|
+
transitionsDurationFast: Ot,
|
|
3933
|
+
transitionsDurationNormal: Mt,
|
|
3934
|
+
transitionsDurationSlow: Et,
|
|
3935
|
+
typographyFontFamily: Xt,
|
|
3936
|
+
typographyFontSize10: _t,
|
|
3937
|
+
typographyFontSize100: or,
|
|
3938
|
+
typographyFontSize20: Nt,
|
|
3939
|
+
typographyFontSize30: Vt,
|
|
3940
|
+
typographyFontSize40: qt,
|
|
3941
|
+
typographyFontSize50: Jt,
|
|
3942
|
+
typographyFontSize60: Qt,
|
|
3943
|
+
typographyFontSize70: Ut,
|
|
3944
|
+
typographyFontSize80: Zt,
|
|
3945
|
+
typographyFontSize90: er,
|
|
3946
|
+
typographyLineHeight10: tr,
|
|
3947
|
+
typographyLineHeight100: gr,
|
|
3948
|
+
typographyLineHeight20: rr,
|
|
3949
|
+
typographyLineHeight30: ar,
|
|
3950
|
+
typographyLineHeight40: ir,
|
|
3951
|
+
typographyLineHeight50: nr,
|
|
3952
|
+
typographyLineHeight60: lr,
|
|
3953
|
+
typographyLineHeight70: sr,
|
|
3954
|
+
typographyLineHeight80: cr,
|
|
3955
|
+
typographyLineHeight90: ur,
|
|
3956
|
+
typographyWeightBlack: vr,
|
|
3957
|
+
typographyWeightBold: fr,
|
|
3958
|
+
typographyWeightExtraBold: $r,
|
|
3959
|
+
typographyWeightExtraLight: yr,
|
|
3960
|
+
typographyWeightLight: pr,
|
|
3961
|
+
typographyWeightMedium: hr,
|
|
3962
|
+
typographyWeightRegular: kr,
|
|
3963
|
+
typographyWeightSemiBold: br,
|
|
3964
|
+
typographyWeightThin: dr,
|
|
4013
3965
|
windowSizesLg: t,
|
|
4014
3966
|
windowSizesMd: o,
|
|
4015
3967
|
windowSizesSm: e,
|
|
4016
3968
|
windowSizesXl: r,
|
|
4017
|
-
zIndexAbove:
|
|
4018
|
-
zIndexBase:
|
|
4019
|
-
zIndexModal:
|
|
4020
|
-
zIndexSkipToContent:
|
|
4021
|
-
zIndexToast:
|
|
3969
|
+
zIndexAbove: Sr,
|
|
3970
|
+
zIndexBase: mr,
|
|
3971
|
+
zIndexModal: jr,
|
|
3972
|
+
zIndexSkipToContent: zr,
|
|
3973
|
+
zIndexToast: Pr
|
|
4022
3974
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
4023
3975
|
export {
|
|
4024
|
-
|
|
4025
|
-
|
|
3976
|
+
Br as tokenDictionary,
|
|
3977
|
+
Hr as variables
|
|
4026
3978
|
};
|
package/lib/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import * as variables from './style-dictionary-dist/
|
|
3
|
-
export {
|
|
1
|
+
import { default as tokenDictionary } from './style-dictionary-dist/token-dictionary';
|
|
2
|
+
import * as variables from './style-dictionary-dist/variables';
|
|
3
|
+
export { tokenDictionary, variables };
|
|
@@ -11,9 +11,6 @@ export const breakpointsSm: string;
|
|
|
11
11
|
export const breakpointsMd: string;
|
|
12
12
|
export const breakpointsLg: string;
|
|
13
13
|
export const breakpointsXl: string;
|
|
14
|
-
export const breakpointsForcedColorsMode: string;
|
|
15
|
-
export const breakpointsDarkMode: string;
|
|
16
|
-
export const breakpointsPrefersReducedMotion: string;
|
|
17
14
|
/** Black */
|
|
18
15
|
export const colorBlackBase: string;
|
|
19
16
|
/** Black hover */
|
package/package.json
CHANGED
|
@@ -14,15 +14,7 @@
|
|
|
14
14
|
"description": "Midas Theme",
|
|
15
15
|
"homepage": "https://designsystem.migrationsverket.se/",
|
|
16
16
|
"license": "CC0-1.0",
|
|
17
|
-
"version": "2.0.
|
|
18
|
-
"main": "./index.
|
|
19
|
-
"types": "./index.d.ts"
|
|
20
|
-
"exports": {
|
|
21
|
-
".": {
|
|
22
|
-
"import": "./index.js"
|
|
23
|
-
},
|
|
24
|
-
"./variables.css": {
|
|
25
|
-
"import": "./assets/variables.css"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
17
|
+
"version": "2.0.1",
|
|
18
|
+
"main": "./index.mjs",
|
|
19
|
+
"types": "./index.d.ts"
|
|
28
20
|
}
|
package/variables.css
ADDED
|
@@ -0,0 +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-yellow-10: #fff8e1;--midas-color-signal-yellow-20: #ffeba8;--midas-color-signal-yellow-100: #fdb813;--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: #eb4e4e;--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))}
|
package/README.md
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
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/assets/variables.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-breakpoints-forced-colors-mode: "(forced-colors: active)";--midas-breakpoints-dark-mode: "(prefers-color-scheme: dark)";--midas-breakpoints-prefers-reduced-motion: "(prefers-reduced-motion: reduced)";--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-yellow-10: #fff8e1;--midas-color-signal-yellow-20: #ffeba8;--midas-color-signal-yellow-100: #fdb813;--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: #eb4e4e;--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))}
|