@inera/ids-design 5.3.0 → 5.4.0

package/src/layout/breakpoints.scss

@@ -0,0 +1,13 @@
+$small: 640px;
+$medium: 1024px;
+
+.ids-desktop {
+  @media (max-width: ($medium - 1px)) {
+    display: none !important;
+  }
+}
+.ids-mobile {
+  @media (min-width: $medium) {
+    display: none !important;
+  }
+}

package/src/layout/container.scss

@@ -0,0 +1,15 @@
+.ids-container {
+  max-width: var(--IDS__MAX-WIDTH);
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.ids-container.ids-container--gutterless {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.ids-container.ids-container--fluid {
+  max-width: 100%;
+}

package/src/layout/grid.scss

@@ -0,0 +1,393 @@
+:host,
+.ids .col {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+/* Cols */
+:host([cols="auto"]),
+.ids .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+:host([cols="1"]),
+.ids .col-1 {
+  flex: 0 0 8.3%;
+  max-width: 8.3%;
+}
+:host([cols="2"]),
+.ids .col-2 {
+  flex: 0 0 16%;
+  max-width: 16%;
+}
+:host([cols="3"]),
+.ids .col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+:host([cols="4"]),
+.ids .col-4 {
+  flex: 0 0 33.3%;
+  max-width: 33.3%;
+}
+:host([cols="5"]),
+.ids .col-5 {
+  flex: 0 0 41.6%;
+  max-width: 41.6%;
+}
+:host([cols="6"]),
+.ids .col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+:host([cols="7"]),
+.ids .col-7 {
+  flex: 0 0 58%;
+  max-width: 58.3%;
+}
+:host([cols="8"]),
+.ids .col-8 {
+  flex: 0 0 66.6%;
+  max-width: 66.6%;
+}
+:host([cols="9"]),
+.ids .col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+:host([cols="10"]),
+.ids .col-10 {
+  flex: 0 0 83.3%;
+  max-width: 83.3%;
+}
+:host([cols="11"]),
+.ids .col-11 {
+  flex: 0 0 91.6%;
+  max-width: 91.6%;
+}
+:host([cols="12"]),
+.ids .col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+/* offset */
+:host([offset="none"]) ,
+.ids .col-offset-none {
+  margin-left: 0%;
+}
+:host([offset="1"]),
+.ids .col .offset-1 {
+  margin-left: 8.3%;
+}
+:host([offset="2"]),
+.ids .col .offset-2 {
+  margin-left: 16%;
+}
+:host([offset="3"]),
+.ids .col .offset-3 {
+  margin-left: 25%;
+}
+:host([offset="4"]),
+.ids .col .offset-4 {
+  margin-left: 33.3%;
+}
+:host([offset="5"]),
+.ids .col .offset-5 {
+  margin-left: 41.6%;
+}
+:host([offset="6"]),
+.ids .col .offset-6 {
+  margin-left: 50%;
+}
+:host([offset="7"]),
+.ids .col .offset-7 {
+  margin-left: 58.3%;
+}
+:host([offset="8"]),
+.ids .col .offset-8 {
+  margin-left: 66.6%;
+}
+:host([offset="9"]),
+.ids .col .offset-9 {
+  margin-left: 75%;
+}
+:host([offset="10"]),
+.ids .col .offset-10 {
+  margin-left: 83.3%;
+}
+:host([offset="11"]),
+.ids .col .offset-11 {
+  margin-left: 91.6%;
+}
+:host([offset="12"]),
+.ids .col .offset-12 {
+  margin-left: 100%;
+}
+/* Align self */
+:host([alignself="start"]),
+.ids .col .align-start {
+  align-self: start;
+}
+:host([alignself="center"]),
+.ids .col .align-center {
+  align-self: center;
+}
+:host([alignself="end"]),
+.ids .col .align-end {
+  align-self: end;
+}
+:host([alignself="auto"]),
+.ids .col .align-auto {
+  align-self: auto;
+}
+:host([alignself="baseline"]),
+.ids .col .align-baseline {
+  align-self: baseline;
+}
+:host([alignself="stretch"]),
+.ids .col .align-stretch {
+  align-self: stretch;
+}
+
+@media only screen and (max-width: 1024px) {
+  :host([m="auto"]),
+  .ids .col .m-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  :host([m="1"]),
+  .ids .col .m-1 {
+    flex: 0 0 8.3%;
+    max-width: 8.3%;
+  }
+  :host([m="2"]),
+  .ids .col .m-2 {
+    flex: 0 0 16%;
+    max-width: 16%;
+  }
+  :host([m="3"]),
+  .ids .col .m-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host([m="4"]),
+  .ids .col .m-4 {
+    flex: 0 0 33.3%;
+    max-width: 33.3%;
+  }
+  :host([m="5"]),
+  .ids .col .m-5 {
+    flex: 0 0 41.6%;
+    max-width: 41.6%;
+  }
+  :host([m="6"]),
+  .ids .col .m-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host([m="7"]),
+  .ids .col .m-7 {
+    flex: 0 0 58%;
+    max-width: 58.3%;
+  }
+  :host([m="8"]),
+  .ids .col .m-8 {
+    flex: 0 0 66.6%;
+    max-width: 66.6%;
+  }
+  :host([m="9"]),
+  .ids .col .m-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host([m="10"]),
+  .ids .col .m-10 {
+    flex: 0 0 83.3%;
+    max-width: 83.3%;
+  }
+  :host([m="11"]),
+  .ids .col .m-11 {
+    flex: 0 0 91.6%;
+    max-width: 91.6%;
+  }
+  :host([m="12"]),
+  .ids .col .m-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  /* offset medium */
+  :host([moffset="none"]),
+  .ids .col .m-offset-none {
+    margin-left: 0%;
+  }
+  :host([moffset="1"]),
+  .ids .col .m-offset-1 {
+    margin-left: 8.3%;
+  }
+  :host([moffset="2"]),
+  .ids .col .m-offset-2 {
+    margin-left: 16%;
+  }
+  :host([moffset="3"]),
+  .ids .col .m-offset-3 {
+    margin-left: 25%;
+  }
+  :host([moffset="4"]),
+  .ids .col .m-offset-4 {
+    margin-left: 33.3%;
+  }
+  :host([moffset="5"]),
+  .ids .col .m-offset-5 {
+    margin-left: 41.6%;
+  }
+  :host([moffset="6"]),
+  .ids .col .m-offset-6 {
+    margin-left: 50%;
+  }
+  :host([moffset="7"]),
+  .ids .col .m-offset-7 {
+    margin-left: 58.3%;
+  }
+  :host([moffset="8"]),
+  .ids .col .m-offset-8 {
+    margin-left: 66.6%;
+  }
+  :host([moffset="9"]),
+  .ids .col .m-offset-9 {
+    margin-left: 75%;
+  }
+  :host([moffset="10"]),
+  .ids .col .m-offset-10 {
+    margin-left: 83.3%;
+  }
+  :host([moffset="11"]),
+  .ids .col .m-offset-11 {
+    margin-left: 91.6%;
+  }
+  :host([moffset="12"]),
+  .ids .col .m-offset-12 {
+    margin-left: 100%;
+  }
+}
+@media only screen and (max-width: 640px) {
+  :host([s="auto"]),
+  .ids .col .s-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  :host([s="1"]),
+  .ids .col .s-1 {
+    flex: 0 0 8.3%;
+    max-width: 8.3%;
+  }
+  :host([s="2"]),
+  .ids .col .s-2 {
+    flex: 0 0 16%;
+    max-width: 16%;
+  }
+  :host([s="3"]),
+  .ids .col .s-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host([s="4"]),
+  .ids .col .s-4 {
+    flex: 0 0 33.3%;
+    max-width: 33.3%;
+  }
+  :host([s="5"]),
+  .ids .col .s-5 {
+    flex: 0 0 41.6%;
+    max-width: 41.6%;
+  }
+  :host([s="6"]),
+  .ids .col .s-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host([s="7"]),
+  .ids .col .s-7 {
+    flex: 0 0 58%;
+    max-width: 58.3%;
+  }
+  :host([s="8"]),
+  .ids .col .s-8 {
+    flex: 0 0 66.6%;
+    max-width: 66.6%;
+  }
+  :host([s="9"]),
+  .ids .col .s-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host([s="10"]),
+  .ids .col .s-10 {
+    flex: 0 0 83.3%;
+    max-width: 83.3%;
+  }
+  :host([s="11"]),
+  .ids .col .s-11 {
+    flex: 0 0 91.6%;
+    max-width: 91.6%;
+  }
+  :host([s="12"]),
+  .ids .col .s-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  /* offset small */
+  :host([soffset="none"]),
+  .ids .col .s-offset-none {
+    margin-left: 0%;
+  }
+  :host([soffset="1"]),
+  .ids .col .s-offset-1 {
+    margin-left: 8.3%;
+  }
+  :host([soffset="2"]),
+  .ids .col .s-offset-2 {
+    margin-left: 16%;
+  }
+  :host([soffset="3"]),
+  .ids .col .s-offset-3 {
+    margin-left: 25%;
+  }
+  :host([soffset="4"]),
+  .ids .col .s-offset-4 {
+    margin-left: 33.3%;
+  }
+  :host([soffset="5"]),
+  .ids .col .s-offset-5 {
+    margin-left: 41.6%;
+  }
+  :host([soffset="6"]),
+  .ids .col .s-offset-6 {
+    margin-left: 50%;
+  }
+  :host([soffset="7"]),
+  .ids .col .s-offset-7 {
+    margin-left: 58.3%;
+  }
+  :host([soffset="8"]),
+  .ids .col .s-offset-8 {
+    margin-left: 66.6%;
+  }
+  :host([soffset="9"]),
+  .ids .col .s-offset-9 {
+    margin-left: 75%;
+  }
+  :host([soffset="10"]),
+  .ids .col .s-offset-10 {
+    margin-left: 83.3%;
+  }
+  :host([soffset="11"]),
+  .ids .col .s-offset-11 {
+    margin-left: 91.6%;
+  }
+  :host([soffset="12"]),
+  .ids .col .s-offset-12 {
+    margin-left: 100%;
+  }
+}

package/src/layout/row.scss

@@ -0,0 +1,48 @@
+:host,
+.ids .row {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+}
+
+:host([align="start"]),
+.ids .row .align-start {
+  align-items: start;
+}
+:host([align="center"]),
+.ids .row .align-center {
+  align-items: center;
+}
+:host([align="end"]),
+.ids .row .align-end {
+  align-items: end;
+}
+:host([align="baseline"]),
+.ids .row .align-baseline {
+  align-items: baseline;
+}
+:host([align="stretch"]),
+.ids .row .align-stretch {
+  align-items: stretch
+}
+:host([justify="start"]),
+.ids .row .justify-start {
+  justify-content: flex-start;
+}
+:host([justify="center"]),
+.ids .row .justify-center {
+  justify-content: center;
+}
+:host([justify="end"]),
+.ids .row .justify-end {
+  justify-content: end;
+}
+:host([justify="space-between"]),
+.ids .row .justify-space-between {
+  justify-content: space-between;
+}
+:host([justify="space-around"]),
+.ids .row .justify-space-around {
+  justify-content: space-around;
+}

package/src/themes/1177/1177-tokens.css

@@ -0,0 +1,32 @@
+:root, :host {
+  --IDS-COLOR-PRIMARY-30: #6a0032;
+  --IDS-COLOR-PRIMARY-35: #a00b36;
+  --IDS-COLOR-PRIMARY-40: #c12143;
+  --IDS-COLOR-PRIMARY-90: #faeef0;
+
+  --IDS-COLOR-ACCENT-30: #3b4266;
+  --IDS-COLOR-ACCENT-40: #396291;
+  --IDS-COLOR-ACCENT-90: #C6D2DF;
+  --IDS-COLOR-ACCENT-95: #f1f1f5;
+
+  --IDS-COLOR-SECONDARY-95: #FAF8F6;
+
+  --IDS-COLOR-SUCCESS-30: #395428;
+  --IDS-COLOR-SUCCESS-40: #419002;
+  --IDS-COLOR-SUCCESS-99: #eef8ee;
+
+  --IDS-COLOR-ATTENTION-40: #ffc100;
+  --IDS-COLOR-ATTENTION-95: #fff8e0;
+
+  --IDS-COLOR-NEUTRAL-20: #353535;
+  --IDS-COLOR-NEUTRAL-40: #636466;
+  --IDS-COLOR-NEUTRAL-50: #808285;
+  --IDS-COLOR-NEUTRAL-90: #dadbdc;
+  --IDS-COLOR-NEUTRAL-99: #f1f2f2;
+  --IDS-COLOR-NEUTRAL-100: #fff;
+
+  --IDS-COLOR-ERROR-40: #c12143;
+  --IDS-COLOR-ERROR-99: #faeef0;
+
+  --IDS-COLOR-BACKGROUND-40: #fff;
+}

package/src/themes/1177/1177-typography.scss

@@ -0,0 +1,94 @@
+@use "../reset.scss";
+@use "../../global/global.scss";
+@use "./1177-tokens" as elvaSjuttisjuTokens;
+
+:root {
+  /* Font families */
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+
+  --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+
+  --IDS-HEADING-XL__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+
+  --IDS-HEADING-L__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 700;
+  --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+
+  --IDS-HEADING-M__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 700;
+  --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
+
+  --IDS-HEADING-S__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 700;
+  --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
+
+  --IDS-HEADING-XS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 700;
+  --IDS-HEADING-XS__LETTER-SPACING: 0;
+
+  --IDS-ANCHOR__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ANCHOR__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
+  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
+  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
+  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
+
+  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-BODY__FONT-SIZE: 1rem;
+  --IDS-BODY__LINE-HEIGHT: 1.5rem;
+  --IDS-BODY--DISABLED__COLOR: var(--IDS-COLOR-PRIMARY-35);
+
+  --IDS-PAGE-LIST__COLOR: var(--IDS-COLOR-PRIMARY-35);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
+  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
+
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
+}