@itcenteratunihelsinki/huds-lib 0.8.90 → 0.9.1

package/dist/collection/components/hy-heading/heading.css

@@ -138,49 +138,90 @@
 }
 h2.hy-heading__introduction,
 h2.hy-heading__landingsection {
-  font-size: 1.75rem;
-  line-height: 32px;
-  font-weight: 700;
-  letter-spacing: -0.7px;
-  text-transform: uppercase;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  h2.hy-heading__introduction,
+  h2.hy-heading__landingsection {
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
+  }
 }
 h1.hy-heading__hero {
-  font-size: 2rem;
-  line-height: 38px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.8px;
-  margin-bottom: 0;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-40);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: -1.2px;
+  font-stretch: var(--ds-fontWidth-normal);
+  line-height: 48px;
+  text-transform: uppercase;
 }
-@media (min-width: 1024px) {
+@media (min-width: 60rem) {
   h1.hy-heading__hero {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
+    font-size: var(--ds-fontSize-56);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 64px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
-@media (min-width: 1601px) {
-  h1.hy-heading__hero {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
-  }
+.hy-heading__container__common h2.hy-heading__introduction,
+.hy-heading__container__common h2.hy-heading__landingsection {
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   .hy-heading__container__common h2.hy-heading__introduction,
   .hy-heading__container__common h2.hy-heading__landingsection {
-    font-size: 2.125rem;
-    line-height: 40px;
-    letter-spacing: -0.85px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
-@media (min-width: 1601px) {
-  .hy-heading__container__common h2.hy-heading__introduction,
-  .hy-heading__container__common h2.hy-heading__landingsection {
-    font-size: 2.625rem;
-    line-height: 48px;
-    letter-spacing: -1.05px;
+.hy-heading__container__common h2.hy-heading__contentsection {
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-24);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .hy-heading__container__common h2.hy-heading__contentsection {
+    font-size: var(--ds-fontSize-32);
+    font-weight: var(--ds-fontWeight-semiboldPlus);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 36px;
+  }
+}
+.hy-heading__container__common h3.hy-heading {
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-semiboldPlus);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .hy-heading__container__common h3.hy-heading {
+    font-size: var(--ds-fontSize-24);
+    line-height: 24px;
   }
 }
 .hy-heading__container__common h2.hy-heading__introduction {
@@ -258,20 +299,23 @@ h1.hy-heading__hero {
     letter-spacing: -1.05px;
   }
 }
-@media (min-width: 30rem) {
-  .hy-heading__container__large h2.hy-heading__introduction,
-  .hy-heading__container__large h2.hy-heading__landingsection {
-    font-size: 2.125rem;
-    line-height: 40px;
-    letter-spacing: -0.85px;
-  }
+.hy-heading__container__large h2.hy-heading__introduction,
+.hy-heading__container__large h2.hy-heading__landingsection {
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
 }
-@media (min-width: 75.0625rem) {
+@media (min-width: 60rem) {
   .hy-heading__container__large h2.hy-heading__introduction,
   .hy-heading__container__large h2.hy-heading__landingsection {
-    font-size: 2.625rem;
-    line-height: 48px;
-    letter-spacing: -1.05px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 @media (min-width: 75.0625rem) {
@@ -313,12 +357,23 @@ h1.hy-heading__hero {
     letter-spacing: -1.3px;
   }
 }
-@media (min-width: 75.0625rem) {
+.hy-heading__container__large h1.hy-heading__frontpage,
+.hy-heading__container__large h1.hy-heading__landing_major {
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
   .hy-heading__container__large h1.hy-heading__frontpage,
   .hy-heading__container__large h1.hy-heading__landing_major {
-    font-size: 3.5rem;
-    line-height: 64px;
-    letter-spacing: -1.4px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 .hy-heading__container__large h2.hy-heading__group_footer_info {
@@ -361,29 +416,20 @@ h1.hy-heading__hero {
   }
 }
 h3.hy-heading__landingsection {
-  font-size: 1.625rem;
-  line-height: 32px;
-  letter-spacing: -0.8px;
-}
-@media (min-width: 30rem) {
-  h3.hy-heading__landingsection {
-    font-size: 2rem;
-    line-height: 32px;
-    letter-spacing: -1px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  h3.hy-heading__landingsection {
-    font-size: 2.5rem;
-    line-height: 48px;
-    letter-spacing: -1.2px;
-  }
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-24);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  text-transform: none;
 }
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   h3.hy-heading__landingsection {
-    font-size: 2.5rem;
-    line-height: 48px;
-    letter-spacing: -1.2px;
+    font-size: var(--ds-fontSize-32);
+    font-weight: var(--ds-fontWeight-semiboldPlus);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 36px;
   }
 }
 h1,
@@ -408,104 +454,96 @@ h6.negative {
   color: var(--grayscale-white);
 }
 h1 {
-  font-size: 2rem;
-  line-height: 38px;
-  letter-spacing: -0.8px;
-  text-transform: uppercase;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
 }
-@media (min-width: 30rem) {
-  h1 {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   h1 {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  .hy-heading__container__large h1 {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 h2 {
-  font-size: 1.625rem;
-  line-height: 32px;
-  font-weight: 700;
-  letter-spacing: -0.52px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-24);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  text-transform: none;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h2 {
-    font-size: 1.875rem;
+    font-size: var(--ds-fontSize-32);
+    font-weight: var(--ds-fontWeight-semiboldPlus);
+    letter-spacing: var(--ds-letterSpacing-tight);
     line-height: 36px;
-    letter-spacing: -0.6px;
-  }
-}
-@media (min-width: 1601px) {
-  .hy-heading__container__common h2 {
-    font-size: 2.125rem;
-    line-height: 40px;
-    letter-spacing: -0.68px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  .hy-heading__container__large h2 {
-    font-size: 2.125rem;
-    line-height: 40px;
-    letter-spacing: -0.68px;
   }
 }
 h3 {
-  font-size: 1.375rem;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-semiboldPlus);
+  letter-spacing: var(--ds-letterSpacing-normal);
   line-height: 28px;
-  letter-spacing: -0.7px;
+  text-transform: none;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h3 {
-    font-size: 1.625rem;
-    line-height: 32px;
-    letter-spacing: -0.8px;
+    font-size: var(--ds-fontSize-24);
+    line-height: 24px;
   }
 }
 h4 {
-  font-size: 1.125rem;
-  line-height: 24px;
-  letter-spacing: -0.56px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 20px;
+  text-transform: none;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h4 {
-    font-size: 1.375rem;
-    line-height: 28px;
-    letter-spacing: -0.69px;
+    font-size: var(--ds-fontSize-20);
+    line-height: 24px;
   }
 }
 h5 {
-  font-size: 1rem;
-  line-height: 20px;
-  letter-spacing: -0.5px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 18px;
+  text-transform: uppercase;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h5 {
-    font-size: 1.125rem;
-    line-height: 24px;
-    letter-spacing: -0.56px;
+    font-size: var(--ds-fontSize-18);
+    line-height: 20px;
   }
 }
 h6 {
-  font-size: 0.875rem;
-  line-height: 16px;
-  letter-spacing: -0.44px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 18px;
+  text-transform: uppercase;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h6 {
-    font-size: 1rem;
+    font-size: var(--ds-fontSize-18);
     line-height: 20px;
-    letter-spacing: -0.5px;
   }
 }

package/dist/collection/components/hy-hero/hy-hero.css

@@ -53,7 +53,7 @@
 }
 .hy-hero--full-image {
   --dark-bg: rgba(0, 0, 0, 0.55);
-  --light-bg: rgba(255, 255, 255, 0.5);
+  --light-bg: rgba(255, 255, 255, 0.95);
   --dark-text: var(--brand-main-nearly-black);
   --light-text: var(--grayscale-white);
   border-bottom: 1px solid var(--grayscale-medium-dark);
@@ -410,39 +410,43 @@ h2.hy-hero__title {
   color: var(--grayscale-black) !important;
 }
 h2.hy-hero__title.hy-heading__hero {
-  font-size: 2.25rem;
-  line-height: 33px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
   letter-spacing: -0.8px;
   margin-bottom: 0;
   text-transform: none;
   text-wrap: balance;
 }
-@media (min-width: 1024px) {
-  h2.hy-hero__title.hy-heading__hero {
-    font-size: 2.25rem;
-    line-height: 40px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   h2.hy-hero__title.hy-heading__hero {
-    font-size: 2.375rem;
-    line-height: 48px;
-    letter-spacing: -1.3px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 .hy-hero__description {
-  font-size: 1rem;
-  line-height: 24px;
-  font-family: var(--main-font-family);
+  color: inherit;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
   margin: 16px 0 0 0;
   padding: 0;
   position: relative;
   text-wrap: pretty;
 }
+@media (min-width: 60rem) {
+  .hy-hero__description {
+    font-size: var(--ds-fontSize-20);
+  }
+}
 @media (min-width: 1601px) {
   .hy-hero__description {
     font-size: 1.0625rem;
@@ -500,29 +504,22 @@ h2.hy-hero__title.hy-heading__hero {
 **/
 .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
 .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
-  font-size: 2rem;
-  line-height: 38px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.8px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
   margin-bottom: 0;
-  text-transform: uppercase;
 }
-@media (min-width: 1024px) {
-  .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
-  .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
   .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 /**
@@ -535,27 +532,22 @@ h2.hy-hero__title.hy-heading__hero {
   }
 }
 .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
-  font-size: 2rem;
-  line-height: 38px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
   letter-spacing: -0.8px;
   margin-bottom: 0;
-  text-transform: uppercase;
-}
-@media (min-width: 1024px) {
-  .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
 }
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 @media (min-width: 75.0625rem) {