@midas-ds/components 12.0.0 → 12.1.1

package/theme/generated-object.d.ts

@@ -0,0 +1,381 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default tokens;
+
+declare interface DesignToken {
+  $value?: any;
+  $type?: string;
+  $description?: string;
+  name?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  [key: string]: any;
+}
+
+declare const tokens: {
+  windowSizes: {
+    sm: DesignToken;
+    md: DesignToken;
+    lg: DesignToken;
+    xl: DesignToken;
+  };
+  breakpoints: {
+    xs: DesignToken;
+    sm: DesignToken;
+    md: DesignToken;
+    lg: DesignToken;
+    xl: DesignToken;
+  };
+  color: {
+    black: {
+      base: DesignToken;
+      hover: DesignToken;
+    };
+    white: {
+      base: DesignToken;
+      hover: DesignToken;
+    };
+    gray: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "30": DesignToken;
+      "40": DesignToken;
+      "50": DesignToken;
+      "60": DesignToken;
+      "70": DesignToken;
+      "80": DesignToken;
+      "90": DesignToken;
+      "100": DesignToken;
+      "110": DesignToken;
+      "120": DesignToken;
+      "130": DesignToken;
+      "140": DesignToken;
+      "150": DesignToken;
+      "160": DesignToken;
+      "170": DesignToken;
+      "180": DesignToken;
+      "190": DesignToken;
+      "200": DesignToken;
+    };
+    blue: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "40": DesignToken;
+      "50": DesignToken;
+      "60": DesignToken;
+      "70": DesignToken;
+      "80": DesignToken;
+      "90": DesignToken;
+      "100": DesignToken;
+      "110": DesignToken;
+      "120": DesignToken;
+      "130": DesignToken;
+      "150": DesignToken;
+    };
+    purple: {
+      "80": DesignToken;
+      "110": DesignToken;
+    };
+    red: {
+      "100": DesignToken;
+    };
+    signalBlue: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "100": DesignToken;
+    };
+    signalGreen: {
+      "20": DesignToken;
+      "30": DesignToken;
+      "100": DesignToken;
+    };
+    signalYellow: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "100": DesignToken;
+    };
+    signalRed: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "30": DesignToken;
+      "40": DesignToken;
+      "50": DesignToken;
+      "60": DesignToken;
+      "70": DesignToken;
+      "80": DesignToken;
+      "90": DesignToken;
+      "100": DesignToken;
+      "110": DesignToken;
+      "120": DesignToken;
+      "130": DesignToken;
+      "140": DesignToken;
+      "150": DesignToken;
+      "160": DesignToken;
+      "170": DesignToken;
+      "180": DesignToken;
+      "190": DesignToken;
+      "200": DesignToken;
+    };
+  };
+  background: {
+    base: DesignToken;
+    hover: DesignToken;
+    inverse: DesignToken;
+  };
+  layer: {
+    "01": {
+      base: DesignToken;
+      hover: DesignToken;
+      selected: DesignToken;
+      selectedHover: DesignToken;
+    };
+    "02": {
+      base: DesignToken;
+      hover: DesignToken;
+      selected: DesignToken;
+      selectedHover: DesignToken;
+    };
+  };
+  layerAccent: {
+    "01": {
+      base: DesignToken;
+      hover: DesignToken;
+      selected: DesignToken;
+    };
+    "02": {
+      base: DesignToken;
+      hover: DesignToken;
+      selected: DesignToken;
+    };
+  };
+  brand: {
+    primary: DesignToken;
+  };
+  border: {
+    color: {
+      primary: DesignToken;
+      secondary: DesignToken;
+      subtle: DesignToken;
+      tertiary: DesignToken;
+      disabled: DesignToken;
+    };
+    width: DesignToken;
+  };
+  field: {
+    "01": {
+      base: DesignToken;
+      hover: DesignToken;
+      active: DesignToken;
+    };
+    "02": {
+      base: DesignToken;
+      hover: DesignToken;
+      active: DesignToken;
+    };
+    disabled: DesignToken;
+  };
+  skeleton: {
+    "01": DesignToken;
+    "02": DesignToken;
+  };
+  icon: {
+    primary: DesignToken;
+    secondary: DesignToken;
+    tertiary: DesignToken;
+    inverse: DesignToken;
+    onColor: DesignToken;
+    disabled: DesignToken;
+    success: DesignToken;
+    info: DesignToken;
+    warning: DesignToken;
+    important: DesignToken;
+  };
+  link: {
+    enabled: DesignToken;
+    hover: DesignToken;
+    pressed: DesignToken;
+    visited: DesignToken;
+  };
+  support: {
+    border: {
+      success: DesignToken;
+      info: DesignToken;
+      important: DesignToken;
+      warning: DesignToken;
+    };
+    background: {
+      success: DesignToken;
+      successHover: DesignToken;
+      info: DesignToken;
+      infoHover: DesignToken;
+      important: DesignToken;
+      importantHover: DesignToken;
+      warning: DesignToken;
+      warningHover: DesignToken;
+    };
+  };
+  text: {
+    primary: DesignToken;
+    secondary: DesignToken;
+    tertiary: DesignToken;
+    onColor: DesignToken;
+    inverse: DesignToken;
+    disabled: DesignToken;
+    warning: DesignToken;
+    placeholder: DesignToken;
+  };
+  button: {
+    background: {
+      primary: {
+        base: DesignToken;
+        hover: DesignToken;
+        active: DesignToken;
+      };
+      secondary: {
+        base: DesignToken;
+        hover: DesignToken;
+        active: DesignToken;
+      };
+      tertiary: {
+        hover: DesignToken;
+        active: DesignToken;
+      };
+      danger: {
+        base: DesignToken;
+        hover: DesignToken;
+        active: DesignToken;
+      };
+      disabled: DesignToken;
+    };
+    border: {
+      secondary: DesignToken;
+    };
+    icon: {
+      hover: DesignToken;
+      active: DesignToken;
+    };
+  };
+  badge: {
+    background: DesignToken;
+  };
+  calendar: {
+    date: {
+      background: {
+        hover: DesignToken;
+        selected: DesignToken;
+        startRange: DesignToken;
+        inRange: DesignToken;
+        endRange: DesignToken;
+      };
+    };
+  };
+  logo: {
+    primary: DesignToken;
+  };
+  menu: {
+    item: {
+      background: {
+        hover: DesignToken;
+        selected: DesignToken;
+      };
+    };
+    text: {
+      sectionHeader: DesignToken;
+    };
+  };
+  size: {
+    "10": DesignToken;
+    "15": DesignToken;
+    "20": DesignToken;
+    "30": DesignToken;
+    "40": DesignToken;
+    "50": DesignToken;
+    "60": DesignToken;
+    "70": DesignToken;
+    "75": DesignToken;
+    "80": DesignToken;
+    "90": DesignToken;
+    "100": DesignToken;
+    "110": DesignToken;
+    "120": DesignToken;
+    "130": DesignToken;
+    "140": DesignToken;
+    "150": DesignToken;
+    "00": DesignToken;
+    "05": DesignToken;
+  };
+  spacing: {
+    "10": DesignToken;
+    "20": DesignToken;
+    "30": DesignToken;
+    "40": DesignToken;
+    "50": DesignToken;
+    "60": DesignToken;
+    "70": DesignToken;
+    "80": DesignToken;
+    "90": DesignToken;
+    "100": DesignToken;
+    "110": DesignToken;
+    "120": DesignToken;
+  };
+  state: {
+    focus: DesignToken;
+    focusInset: DesignToken;
+  };
+  transitions: {
+    duration: {
+      slow: DesignToken;
+      normal: DesignToken;
+      fast: DesignToken;
+    };
+  };
+  typography: {
+    font: {
+      family: DesignToken;
+      size: {
+        "10": DesignToken;
+        "20": DesignToken;
+        "30": DesignToken;
+        "40": DesignToken;
+        "50": DesignToken;
+        "60": DesignToken;
+        "70": DesignToken;
+        "80": DesignToken;
+        "90": DesignToken;
+        "100": DesignToken;
+      };
+    };
+    lineHeight: {
+      "10": DesignToken;
+      "20": DesignToken;
+      "30": DesignToken;
+      "40": DesignToken;
+      "50": DesignToken;
+      "60": DesignToken;
+      "70": DesignToken;
+      "80": DesignToken;
+      "90": DesignToken;
+      "100": DesignToken;
+    };
+    weight: {
+      thin: DesignToken;
+      extraLight: DesignToken;
+      light: DesignToken;
+      regular: DesignToken;
+      medium: DesignToken;
+      semiBold: DesignToken;
+      bold: DesignToken;
+      extraBold: DesignToken;
+      black: DesignToken;
+    };
+  };
+  zIndex: {
+    base: DesignToken;
+    above: DesignToken;
+    modal: DesignToken;
+    toast: DesignToken;
+    skipToContent: DesignToken;
+  };
+};

package/theme/generated-tokens.d.ts

@@ -0,0 +1,331 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const windowSizesSm: string;
+export const windowSizesMd: string;
+export const windowSizesLg: string;
+export const windowSizesXl: string;
+export const breakpointsXs: string;
+export const breakpointsSm: string;
+export const breakpointsMd: string;
+export const breakpointsLg: string;
+export const breakpointsXl: string;
+/** Black */
+export const colorBlackBase: string;
+/** Black hover */
+export const colorBlackHover: string;
+/** White */
+export const colorWhiteBase: string;
+/** White hover */
+export const colorWhiteHover: string;
+export const colorGray10: string;
+export const colorGray20: string;
+export const colorGray30: string;
+export const colorGray40: string;
+export const colorGray50: string;
+export const colorGray60: string;
+export const colorGray70: string;
+export const colorGray80: string;
+export const colorGray90: string;
+export const colorGray100: string;
+export const colorGray110: string;
+export const colorGray120: string;
+export const colorGray130: string;
+export const colorGray140: string;
+export const colorGray150: string;
+export const colorGray160: string;
+export const colorGray170: string;
+export const colorGray180: string;
+export const colorGray190: string;
+export const colorGray200: string;
+export const colorBlue10: string;
+export const colorBlue20: string;
+export const colorBlue40: string;
+export const colorBlue50: string;
+export const colorBlue60: string;
+export const colorBlue70: string;
+export const colorBlue80: string;
+export const colorBlue90: string;
+export const colorBlue100: string;
+export const colorBlue110: string;
+export const colorBlue120: string;
+export const colorBlue130: string;
+export const colorBlue150: string;
+export const colorPurple80: string;
+export const colorPurple110: string;
+export const colorRed100: string;
+export const colorSignalBlue10: string;
+export const colorSignalBlue20: string;
+export const colorSignalBlue100: string;
+export const colorSignalGreen20: string;
+export const colorSignalGreen30: string;
+export const colorSignalGreen100: string;
+export const colorSignalYellow10: string;
+export const colorSignalYellow20: string;
+export const colorSignalYellow100: string;
+export const colorSignalRed10: string;
+export const colorSignalRed20: string;
+export const colorSignalRed30: string;
+export const colorSignalRed40: string;
+export const colorSignalRed50: string;
+export const colorSignalRed60: string;
+export const colorSignalRed70: string;
+export const colorSignalRed80: string;
+export const colorSignalRed90: string;
+export const colorSignalRed100: string;
+export const colorSignalRed110: string;
+export const colorSignalRed120: string;
+export const colorSignalRed130: string;
+export const colorSignalRed140: string;
+export const colorSignalRed150: string;
+export const colorSignalRed160: string;
+export const colorSignalRed170: string;
+export const colorSignalRed180: string;
+export const colorSignalRed190: string;
+export const colorSignalRed200: string;
+/** Standardbakgrund för våra applikationer */
+export const backgroundBase: string;
+/** Hoverfärg för bakgrund */
+export const backgroundHover: string;
+/** Bakgrund eller element i med hög kontrast */
+export const backgroundInverse: string;
+/** Yta som används på background. Sekundär bakgrundsfärg */
+export const layer01Base: string;
+/** Hover state för layer01 */
+export const layer01Hover: string;
+/** Selected state för layer01 */
+export const layer01Selected: string;
+/** Hover state för layerSelected01 */
+export const layer01SelectedHover: string;
+/** Yta som ligger på layer01 */
+export const layer02Base: string;
+/** Hover state för layer02 */
+export const layer02Hover: string;
+/** Selected state för layer02 */
+export const layer02Selected: string;
+/** Hover state för layerSelected02 */
+export const layer02SelectedHover: string;
+/** Accentfärg som används tillsammans med layer01 */
+export const layerAccent01Base: string;
+/** Hover state för layerAccent01 */
+export const layerAccent01Hover: string;
+/** Selected state för layerAccent01 */
+export const layerAccent01Selected: string;
+/** Accentfärg som används tillsammans med layer02 */
+export const layerAccent02Base: string;
+/** Hover state för layerAccent02 */
+export const layerAccent02Hover: string;
+/** Selected state för layerAccent02 */
+export const layerAccent02Selected: string;
+/** Primära röda färgen */
+export const brandPrimary: string;
+/** Kantlinje med hög kontrast, används med field01 */
+export const borderColorPrimary: string;
+/** Kantlinje med medelhög kontrast */
+export const borderColorSecondary: string;
+/** Kantlinje med låg kontrast */
+export const borderColorSubtle: string;
+/** Primärblå kantlinje */
+export const borderColorTertiary: string;
+/** Kantlinje för disabled state */
+export const borderColorDisabled: string;
+export const borderWidth: string;
+/** Standardfärg för fält, som ligger på background */
+export const field01Base: string;
+/** Hover state för field01 */
+export const field01Hover: string;
+/** Active state för field01 */
+export const field01Active: string;
+/** Sekundfärfärg för fält, som ligger på layer01 */
+export const field02Base: string;
+/** Hover state för field02 */
+export const field02Hover: string;
+/** Active state för field02 */
+export const field02Active: string;
+/** Disabled state för fält */
+export const fieldDisabled: string;
+/** Standardfärg för skeleton */
+export const skeleton01: string;
+/** Färg som används när Skeleton ligger på bakgrundsfärgen `layer01` eller `light-dark(#f2f2f2,#262626)` */
+export const skeleton02: string;
+/** Primär ikonfärg */
+export const iconPrimary: string;
+/** Sekundär ikonfärg */
+export const iconSecondary: string;
+export const iconTertiary: string;
+/** Inverterad ikonfärg. Ljus ikon i ljust läge och mörk ikon i mörkt läge */
+export const iconInverse: string;
+/** Ikonfärg på färgade ytor som inte är lager */
+export const iconOnColor: string;
+/** Ikoner som är disabled */
+export const iconDisabled: string;
+/** Ikonfär för success state */
+export const iconSuccess: string;
+/** Ikonfärg för informationsikoner */
+export const iconInfo: string;
+/** Ikonfärg för varningsikoner och invalid state */
+export const iconWarning: string;
+/** Ikonfärg för viktig information */
+export const iconImportant: string;
+/** Primärlänkfärg */
+export const linkEnabled: string;
+/** Hover state för länkar */
+export const linkHover: string;
+/** Active/pressed state för länkar */
+export const linkPressed: string;
+/** Färg för besökta länkar */
+export const linkVisited: string;
+/** Kantlinje för success-notifikationer */
+export const supportBorderSuccess: string;
+/** Kantlinje för notifikationer med information */
+export const supportBorderInfo: string;
+/** Kantlinje för notifikationer med viktig information */
+export const supportBorderImportant: string;
+/** Kantlinje för notifikationer med varningar */
+export const supportBorderWarning: string;
+/** Bakgrund för success-notifikationer */
+export const supportBackgroundSuccess: string;
+/** Hoverbakgrund för success-notifikationer */
+export const supportBackgroundSuccessHover: string;
+/** Bakgrund för notifikationer med information */
+export const supportBackgroundInfo: string;
+/** Hoverbakgrund för notifikationer med information */
+export const supportBackgroundInfoHover: string;
+/** Bakgrund för notifikationer med viktig information */
+export const supportBackgroundImportant: string;
+/** Hoverbakgrund för notifikationer med viktig information */
+export const supportBackgroundImportantHover: string;
+/** Bakgrund för notifikationer med varningar */
+export const supportBackgroundWarning: string;
+/** Hoverbakgrund för notifikationer med varningar */
+export const supportBackgroundWarningHover: string;
+/** Primär textfärg. Rubriker och brödtext. */
+export const textPrimary: string;
+/** Sekundär textfärg */
+export const textSecondary: string;
+/** Textfärg på tertiär knapp */
+export const textTertiary: string;
+/** Textfärg på färgade bakgrunder som inte är lager */
+export const textOnColor: string;
+/** Inverterad textfärg */
+export const textInverse: string;
+/** Textfärg för disabled state */
+export const textDisabled: string;
+/** Textfärg för felmeddelanden */
+export const textWarning: string;
+/** Textfärg för platshållare */
+export const textPlaceholder: string;
+/** Färg på primärknapp */
+export const buttonBackgroundPrimaryBase: string;
+/** Hover state på primärknapp */
+export const buttonBackgroundPrimaryHover: string;
+/** Active state för primärknapp */
+export const buttonBackgroundPrimaryActive: string;
+/** Färg på sekundärknapp */
+export const buttonBackgroundSecondaryBase: string;
+/** Hover state på sekundärknapp */
+export const buttonBackgroundSecondaryHover: string;
+/** Active state för sekundärknapp */
+export const buttonBackgroundSecondaryActive: string;
+/** Hover state för tertiär knapp */
+export const buttonBackgroundTertiaryHover: string;
+/** Active state för tertiär knapp */
+export const buttonBackgroundTertiaryActive: string;
+/** Färg på danger knapp */
+export const buttonBackgroundDangerBase: string;
+/** Hover state för danger knapp */
+export const buttonBackgroundDangerHover: string;
+/** Active state för danger knapp */
+export const buttonBackgroundDangerActive: string;
+/** Disabled state för knappar */
+export const buttonBackgroundDisabled: string;
+/** Kantfärg för sekundärknapp */
+export const buttonBorderSecondary: string;
+export const buttonIconHover: string;
+/** Active state för ikoner */
+export const buttonIconActive: string;
+export const badgeBackground: string;
+export const calendarDateBackgroundHover: string;
+export const calendarDateBackgroundSelected: string;
+export const calendarDateBackgroundStartRange: string;
+export const calendarDateBackgroundInRange: string;
+export const calendarDateBackgroundEndRange: string;
+/** Färg på logotypen */
+export const logoPrimary: string;
+/** Bakgrundsfärg för menu vid hover */
+export const menuItemBackgroundHover: string;
+/** Bakgrundsfärg för aktiv menu */
+export const menuItemBackgroundSelected: string;
+export const menuTextSectionHeader: string;
+export const size10: string;
+export const size15: string;
+export const size20: string;
+export const size30: string;
+export const size40: string;
+export const size50: string;
+export const size60: string;
+export const size70: string;
+export const size75: string;
+export const size80: string;
+export const size90: string;
+export const size100: string;
+export const size110: string;
+export const size120: string;
+export const size130: string;
+export const size140: string;
+export const size150: string;
+export const size00: number;
+export const size05: string;
+export const spacing10: string;
+export const spacing20: string;
+export const spacing30: string;
+export const spacing40: string;
+export const spacing50: string;
+export const spacing60: string;
+export const spacing70: string;
+export const spacing80: string;
+export const spacing90: string;
+export const spacing100: string;
+export const spacing110: string;
+export const spacing120: string;
+export const stateFocus: string;
+export const stateFocusInset: string;
+export const transitionsDurationSlow: string;
+export const transitionsDurationNormal: string;
+export const transitionsDurationFast: string;
+export const typographyFontFamily: string;
+export const typographyFontSize10: string;
+export const typographyFontSize20: string;
+export const typographyFontSize30: string;
+export const typographyFontSize40: string;
+export const typographyFontSize50: string;
+export const typographyFontSize60: string;
+export const typographyFontSize70: string;
+export const typographyFontSize80: string;
+export const typographyFontSize90: string;
+export const typographyFontSize100: string;
+export const typographyLineHeight10: string;
+export const typographyLineHeight20: string;
+export const typographyLineHeight30: string;
+export const typographyLineHeight40: string;
+export const typographyLineHeight50: string;
+export const typographyLineHeight60: string;
+export const typographyLineHeight70: string;
+export const typographyLineHeight80: string;
+export const typographyLineHeight90: string;
+export const typographyLineHeight100: string;
+export const typographyWeightThin: number;
+export const typographyWeightExtraLight: number;
+export const typographyWeightLight: number;
+export const typographyWeightRegular: number;
+export const typographyWeightMedium: number;
+export const typographyWeightSemiBold: number;
+export const typographyWeightBold: number;
+export const typographyWeightExtraBold: number;
+export const typographyWeightBlack: number;
+export const zIndexBase: number;
+export const zIndexAbove: number;
+export const zIndexModal: number;
+export const zIndexToast: number;
+export const zIndexSkipToContent: number;