@itcenteratunihelsinki/huds-lib 0.8.89 → 0.9.0

package/dist/collection/components/hy-event-item/hy-event-item.css

@@ -10,7 +10,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--grayscale-light);
   padding: 13px 16px;
   position: relative;
   text-decoration: none;
@@ -286,8 +286,8 @@
 }
 @media (min-width: 48rem) {
   .hy-events__item--grid.is-long:hover .hy-events__item--container, .hy-events__item--grid.is-long:focus .hy-events__item--container {
-    background-color: white;
-    border: 1px solid #d8d8d8;
+    background-color: var(--grayscale-white);
+    border: 1px solid var(--grayscale-light);
     padding: 16px 16px;
     position: absolute;
     top: 0;
@@ -309,7 +309,7 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  background: #d7d7d7;
+  background: var(--grayscale-light);
   border-radius: 50%;
   position: absolute;
   top: 16px;

package/dist/collection/components/hy-general-list-item/hy-general-list-item.css

@@ -138,7 +138,7 @@
   width: 100%;
 }
 .hy-general-list-item__image {
-  background-color: #ececec;
+  background-color: var(--grayscale-light);
   width: 100%;
   height: 100%;
 }
@@ -209,54 +209,72 @@
   }
 }
 .hy-general-list-item__title {
-  font-size: 1.125rem;
-  line-height: 22px;
-  font-weight: 700;
-  color: var(--brand-main-nearly-black);
-  letter-spacing: -0.45px;
+  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;
   margin-bottom: 8px;
   margin-top: 0;
   text-wrap: balance;
 }
-@media (min-width: 1601px) {
+@media (min-width: 60rem) {
   .hy-general-list-item__title {
-    font-size: 1.25rem;
+    font-size: var(--ds-fontSize-24);
     line-height: 24px;
-    letter-spacing: -0.5px;
   }
 }
 @media (min-width: 75.0625rem) {
   .hy-general-list-item__title__large {
-    font-size: 1.25rem;
+    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: 75.0625rem) and (min-width: 60rem) {
+  .hy-general-list-item__title__large {
+    font-size: var(--ds-fontSize-24);
     line-height: 24px;
-    letter-spacing: -0.5px;
   }
 }
 .hy-general-list-item__description {
-  font-size: 0.9375rem;
-  line-height: 20px;
-  color: var(--grayscale-dark);
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
   display: none;
-  letter-spacing: -0.09px;
   margin: 0;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   .hy-general-list-item__description {
-    font-size: 0.875rem;
-    line-height: 18px;
-    display: block;
-    letter-spacing: -0.08px;
+    font-size: var(--ds-fontSize-16);
   }
 }
-@media (min-width: 1601px) {
+@media (min-width: 30rem) {
   .hy-general-list-item__description {
-    font-size: 0.875rem;
-    line-height: 20px;
+    display: block;
   }
 }
 @media (min-width: 75.0625rem) {
   .hy-general-list-item__description__large {
-    font-size: 0.875rem;
-    line-height: 20px;
+    color: var(--ds-palette-black-95);
+    font-family: var(--ds-fontFamily-body);
+    font-size: var(--ds-fontSize-14);
+    font-weight: var(--ds-fontWeight-regular);
+    letter-spacing: var(--ds-letterSpacing-wide);
+    line-height: var(--ds-lineHeight-large);
+  }
+}
+@media (min-width: 75.0625rem) and (min-width: 60rem) {
+  .hy-general-list-item__description__large {
+    font-size: var(--ds-fontSize-16);
   }
 }

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

@@ -138,49 +138,58 @@
 }
 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;
-}
-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-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: 1024px) {
-  h1.hy-heading__hero {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
+@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);
   }
 }
-@media (min-width: 1601px) {
+h1.hy-heading__hero {
+  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: 60rem) {
   h1.hy-heading__hero {
-    font-size: 3.25rem;
-    line-height: 60px;
-    letter-spacing: -1.3px;
+    font-size: var(--ds-fontSize-56);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 64px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
-@media (min-width: 30rem) {
-  .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;
-  }
+.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: 1601px) {
+@media (min-width: 60rem) {
   .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;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 .hy-heading__container__common h2.hy-heading__introduction {
@@ -258,20 +267,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 +325,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 +384,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,105 +422,100 @@ h6.negative {
   color: var(--grayscale-white);
 }
 h1 {
-  font-size: 2rem;
-  line-height: 38px;
-  letter-spacing: -0.8px;
+  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: 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-56);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 64px;
+    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-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) {
   h2 {
-    font-size: 1.875rem;
-    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;
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
 h3 {
-  font-size: 1.375rem;
+  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;
-  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-32);
+    font-weight: var(--ds-fontWeight-semiboldPlus);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 36px;
   }
 }
 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-20);
+  font-weight: var(--ds-fontWeight-semiboldPlus);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  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-24);
+    line-height: 24px;
   }
 }
 h5 {
-  font-size: 1rem;
+  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;
-  letter-spacing: -0.5px;
+  text-transform: none;
 }
-@media (min-width: 30rem) {
+@media (min-width: 60rem) {
   h5 {
-    font-size: 1.125rem;
+    font-size: var(--ds-fontSize-20);
     line-height: 24px;
-    letter-spacing: -0.56px;
   }
 }
 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;
   }
 }
 h1 {