@midas-ds/components 7.0.0 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Components",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "7.0.0",
17
+ "version": "7.1.0",
18
18
  "main": "./index.cjs",
19
19
  "module": "./index.js",
20
20
  "types": "./index.d.ts",
package/theme/index.d.ts CHANGED
@@ -194,4 +194,11 @@ export declare const theme: {
194
194
  buttonBorderPrimary: string;
195
195
  logoPrimary: string;
196
196
  };
197
+ zIndex: {
198
+ base: number;
199
+ above: number;
200
+ modal: number;
201
+ toast: number;
202
+ skipToContent: number;
203
+ };
197
204
  };
package/theme/tokens.d.ts CHANGED
@@ -192,3 +192,10 @@ export declare const semantic: {
192
192
  buttonBorderPrimary: string;
193
193
  logoPrimary: string;
194
194
  };
195
+ export declare const zIndex: {
196
+ base: number;
197
+ above: number;
198
+ modal: number;
199
+ toast: number;
200
+ skipToContent: number;
201
+ };
package/theme.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-DzCqA9U7.cjs"),s={...t.tokens};exports.baseColors=t.baseColors;exports.breakpoints=t.breakpoints;exports.semantic=t.semantic;exports.spacing=t.spacing;exports.states=t.states;exports.transitions=t.transitions;exports.typography=t.typography;exports.theme=s;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-CG8BaZyJ.cjs"),e={...t.tokens};exports.baseColors=t.baseColors;exports.breakpoints=t.breakpoints;exports.semantic=t.semantic;exports.spacing=t.spacing;exports.states=t.states;exports.transitions=t.transitions;exports.typography=t.typography;exports.zIndex=t.zIndex;exports.theme=e;
package/theme.js CHANGED
@@ -1,5 +1,5 @@
1
- import { t as s } from "./tokens-DeYazHS9.js";
2
- import { b as r, f as n, s as p, c as i, d as m, e as c, a as b } from "./tokens-DeYazHS9.js";
1
+ import { t as s } from "./tokens-XrriCAqI.js";
2
+ import { b as r, f as n, s as p, c as i, d as m, e as c, a as b, z as f } from "./tokens-XrriCAqI.js";
3
3
  const t = { ...s };
4
4
  export {
5
5
  r as baseColors,
@@ -9,5 +9,6 @@ export {
9
9
  m as states,
10
10
  t as theme,
11
11
  c as transitions,
12
- b as typography
12
+ b as typography,
13
+ f as zIndex
13
14
  };
@@ -1 +1 @@
1
- "use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue20:"#eaf2f6",signalBlue140:"#0066cc",signalGreen20:"#d5f2d9",signalGreen140:"#008d3c",signalRed20:"#ffdfdf",signalRed140:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313",signalYellow20:"#fff8e1",signalYellow140:"#fdb813"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},e={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},g={focus:"0 0 0 2px white, 0 0 0 4px black"},i={slow:"500ms",normal:"300ms",fast:"250ms"},t={sm:"(max-width: 767px)",md:"(min-width: 768px)",lg:"(min-width: 1200px)",xl:"(min-width: 1440px)",forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},l={background01:`light-dark(${r.white}, ${r.gray200})`,backgroundHover01:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse01:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderStrong:`light-dark(${r.gray200}, ${r.gray10})`,borderMedium:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderBrand:`light-dark(${r.blue170}, ${r.blue170})`,borderInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,borderSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,borderInverse:`light-dark(${r.white}, ${r.gray180})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,iconInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,iconWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,notificationBorderSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,notificationBorderInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,notificationBorderImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,notificationBorderWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,notificationBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,notificationBackgroundInfo:`light-dark(${r.signalBlue20}, ${r.gray180})`,notificationBackgroundImportant:`light-dark(${r.signalYellow20}, ${r.gray180})`,notificationBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textBrand:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textSubtle:`light-dark(${r.gray90}, ${r.gray90})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundGhostHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundGhostActive:`light-dark(${r.gray30}, ${r.gray190})`,buttonBorderPrimary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},d=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:l,spacing:e,states:g,transitions:i,typography:a},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=l;exports.spacing=e;exports.states=g;exports.tokens=d;exports.transitions=i;exports.typography=a;
1
+ "use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue20:"#eaf2f6",signalBlue140:"#0066cc",signalGreen20:"#d5f2d9",signalGreen140:"#008d3c",signalRed20:"#ffdfdf",signalRed140:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313",signalYellow20:"#fff8e1",signalYellow140:"#fdb813"},e={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},a={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},g={focus:"0 0 0 2px white, 0 0 0 4px black"},i={slow:"500ms",normal:"300ms",fast:"250ms"},t={sm:"(max-width: 767px)",md:"(min-width: 768px)",lg:"(min-width: 1200px)",xl:"(min-width: 1440px)",forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},l={background01:`light-dark(${r.white}, ${r.gray200})`,backgroundHover01:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse01:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderStrong:`light-dark(${r.gray200}, ${r.gray10})`,borderMedium:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderBrand:`light-dark(${r.blue170}, ${r.blue170})`,borderInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,borderSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,borderInverse:`light-dark(${r.white}, ${r.gray180})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,iconInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,iconWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,notificationBorderSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,notificationBorderInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,notificationBorderImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,notificationBorderWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,notificationBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,notificationBackgroundInfo:`light-dark(${r.signalBlue20}, ${r.gray180})`,notificationBackgroundImportant:`light-dark(${r.signalYellow20}, ${r.gray180})`,notificationBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textBrand:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textSubtle:`light-dark(${r.gray90}, ${r.gray90})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundGhostHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundGhostActive:`light-dark(${r.gray30}, ${r.gray190})`,buttonBorderPrimary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},d={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},n=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:l,spacing:a,states:g,transitions:i,typography:e,zIndex:d},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=l;exports.spacing=a;exports.states=g;exports.tokens=n;exports.transitions=i;exports.typography=e;exports.zIndex=d;
@@ -216,7 +216,13 @@ const r = {
216
216
  buttonBackgroundGhostActive: `light-dark(${r.gray30}, ${r.gray190})`,
217
217
  buttonBorderPrimary: `light-dark(${r.blue170}, ${r.gray10})`,
218
218
  logoPrimary: `light-dark(${r.red100}, ${r.white})`
219
- }, d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
219
+ }, d = {
220
+ base: 1,
221
+ above: 10,
222
+ modal: 1e3,
223
+ toast: 1100,
224
+ skipToContent: 1200
225
+ }, n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
220
226
  __proto__: null,
221
227
  baseColors: r,
222
228
  breakpoints: t,
@@ -224,7 +230,8 @@ const r = {
224
230
  spacing: e,
225
231
  states: g,
226
232
  transitions: i,
227
- typography: a
233
+ typography: a,
234
+ zIndex: d
228
235
  }, Symbol.toStringTag, { value: "Module" }));
229
236
  export {
230
237
  a,
@@ -234,5 +241,6 @@ export {
234
241
  i as e,
235
242
  t as f,
236
243
  l as s,
237
- d as t
244
+ n as t,
245
+ d as z
238
246
  };
@@ -0,0 +1,4 @@
1
+ /**
2
+ * A utility for making visual assertions in Storybook play tests based on the browsers "prefers-colors-scheme" setting
3
+ */
4
+ export declare const lightDark: (light: string, dark: string) => string;