@ilo-org/styles 0.0.1

package/scss/components/_footer.scss

@@ -0,0 +1,329 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--footer {
+  &--main {
+    background-color: $color-base-blue-dark;
+    border-bottom: px-to-rem(6px) solid $color-base-red-medium;
+    padding: 0 px-to-rem(32px);
+    position: relative;
+
+    & > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:after {
+      background-color: $color-base-blue-medium;
+      clip-path: polygon(63.75% 0%, 100% 63.75%, 100% 0);
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 0;
+    }
+  }
+
+  &--secondary {
+    background-color: $color-base-neutrals-white;
+    padding: px-to-rem(36px) px-to-rem(16px) 0 px-to-rem(16px);
+  }
+
+  &--headline {
+    color: $color-base-neutrals-white;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("body-small");
+    @include textmargin(
+      "margin-bottom",
+      10px,
+      "body-small",
+      "display",
+      "body-xxs",
+      "display"
+    );
+    @include textmargin("margin-top", 22px, "body-small", "display", 0, 0);
+  }
+
+  &--subhead {
+    color: #bedcfa;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "section");
+    @include font-styles("body-xxs");
+    @include textmargin("margin-bottom", 28px, "body-xxs", "display", 0, 0);
+  }
+
+  .address {
+    margin-bottom: px-to-rem(42px);
+  }
+
+  .address--line {
+    color: $color-base-neutrals-white;
+    @include font-styles("body-xxs");
+    @include textmargin(
+      "margin-bottom",
+      8px,
+      "body-xxs",
+      "display",
+      "body-xxs",
+      "display"
+    );
+  }
+
+  .connect {
+    margin: px-to-rem(55px) 0;
+  }
+
+  .social--headline {
+    color: $color-base-neutrals-white;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
+  }
+
+  .social--links {
+    display: flex;
+    margin-bottom: px-to-rem(45px);
+  }
+
+  .social--links--item {
+    height: px-to-rem(16px);
+    margin-right: px-to-rem(20px);
+    position: relative;
+    width: px-to-rem(16px);
+
+    &:last-of-type {
+      margin-right: none;
+    }
+  }
+
+  .social--links--link {
+    background-repeat: no-repeat;
+    background-size: contain;
+    border: 0;
+    display: inline-block;
+    height: px-to-rem(16px);
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+    text-indent: -999rem;
+    width: px-to-rem(16px);
+
+    &.facebook {
+      @include dataurlicon("facebook", $color-base-neutrals-white);
+    }
+
+    &.instagram {
+      @include dataurlicon("instagram", $color-base-neutrals-white);
+    }
+
+    &.twitter {
+      @include dataurlicon("twitter", $color-base-neutrals-white);
+    }
+
+    &.youtube {
+      @include dataurlicon("youtube", $color-base-neutrals-white);
+    }
+  }
+
+  .legal,
+  .secondarylinks {
+    color: $color-base-neutrals-medium;
+    display: inline;
+    font-family: $fonts-copy;
+    @include font-styles("body-xxs");
+  }
+
+  .secondarylinks--list,
+  .secondarylinks--list--item {
+    display: inline;
+    list-style: none;
+  }
+
+  .secondarylinks--list--item:not(first-child) {
+    &:before {
+      content: " | ";
+    }
+  }
+
+  .secondarylinks--list--item a {
+    color: $color-base-neutrals-medium;
+
+    &:visited {
+      color: map-get($color, "link", "text-footer", "visited");
+    }
+
+    &:hover {
+      color: map-get($color, "link", "text-footer", "hover");
+    }
+
+    &:active {
+      color: map-get($color, "link", "text-footer", "active");
+      outline: none;
+    }
+
+    &:focus {
+      color: map-get($color, "link", "text-footer", "focus");
+      outline: none;
+    }
+  }
+
+  .anchorlink {
+    background: map-get($color, "ux", "readmore", "default", "background");
+    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    color: $color-ux-labels-actionable;
+    display: block;
+    font-family: $fonts-display;
+    height: px-to-rem(map-get($spacing, "ux", "readmore", "default", "height"));
+    margin: px-to-rem(12px) auto 0 auto;
+    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-4)
+      px-to-rem($spacing-padding-2) 0;
+    position: relative;
+    text-align: left;
+    text-decoration: none;
+    @include font-styles("label-medium");
+    width: max-content;
+
+    &:after {
+      background-repeat: no-repeat;
+      content: "";
+      display: inline-block;
+      height: px-to-rem(24px);
+      position: absolute;
+      right: px-to-rem(2px);
+      top: 50%;
+      transform: translateY(-50%) rotateX(180deg);
+      transform-origin: center center;
+      width: px-to-rem(24px);
+      @include dataurlicon("arrow", $color-ux-labels-actionable);
+    }
+
+    &:hover {
+      background: map-get($color, "ux", "readmore", "hover", "background");
+      border-bottom: 0.1071811361rem solid $color-base-blue-medium;
+      color: $color-ux-labels-hover;
+      cursor: pointer;
+      transition: background 150ms linear, border 150ms linear,
+        color 150ms linear;
+
+      &:after {
+        @include dataurlicon("arrow", $color-ux-labels-hover);
+      }
+    }
+  }
+
+  @include breakpoint("medium") {
+    &--main {
+      display: grid;
+      grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+      gap: 0px 64px;
+      grid-template-areas:
+        "site-info address"
+        "site-info links"
+        "site-info connect";
+      align-content: start;
+      align-items: start;
+      padding: px-to-rem(40px) px-to-rem(32px) px-to-rem(40px) px-to-rem(32px);
+    }
+
+    .site--info {
+      grid-area: site-info;
+    }
+
+    .address {
+      grid-area: address;
+    }
+
+    .connect {
+      grid-area: connect;
+      margin-bottom: 0;
+    }
+
+    .links {
+      grid-area: links;
+    }
+
+    &--logo {
+      width: 100%;
+    }
+
+    &--secondary {
+      padding: px-to-rem(18px) px-to-rem(16px);
+      position: relative;
+    }
+
+    .legal,
+    .secondarylinks {
+      display: block;
+      float: left;
+    }
+
+    .secondarylinks {
+      margin-right: px-to-rem(126px);
+    }
+
+    .anchorlink {
+      display: inline-block;
+      margin: 0;
+      position: absolute;
+      right: 16px;
+      top: 0;
+    }
+  }
+
+  @include breakpoint("large") {
+    &--main {
+      display: grid;
+      grid-template-columns: 19.2% 25.1% calc(32.5% + 64px);
+      grid-template-rows: 0.6fr 1.4fr;
+      gap: 0px 64px;
+      grid-template-areas:
+        "site-info address connect"
+        "site-info links connect";
+      padding: px-to-rem(56px) px-to-rem(70px) px-to-rem(64px) px-to-rem(70px);
+    }
+
+    &--logo {
+      width: 100%;
+    }
+
+    .connect {
+      display: grid;
+      grid-template-columns: minmax(0, 40%), 60%;
+      grid-template-rows: repeat(3, minmax(0, 1fr));
+      grid-area: connect;
+      margin: 0 0 0 calc(18.9% + 64px);
+    }
+
+    .social--headline {
+      text-align: left;
+    }
+
+    .ilo--button {
+      align-self: start;
+      justify-self: start;
+    }
+
+    &--secondary {
+      padding: px-to-rem(18px) px-to-rem(70px);
+      position: relative;
+    }
+
+    .secondarylinks {
+      margin-right: px-to-rem(140px);
+    }
+
+    .anchorlink {
+      display: inline-block;
+      margin: 0;
+      position: absolute;
+      right: 70px;
+      top: 0;
+    }
+  }
+}

package/scss/components/_formgroup.scss

@@ -0,0 +1,20 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--formgroup {
+  &--legend {
+    display: block;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("legend");
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-5"),
+      "legend",
+      "display",
+      "label-small",
+      "display"
+    );
+  }
+}

package/scss/components/_heading.scss

@@ -0,0 +1,74 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--h1,
+.ilo--h2,
+.ilo--h3,
+.ilo--h4,
+.ilo--h5,
+.ilo--h6 {
+  color: inherit;
+  font-family: $fonts-display;
+  font-weight: 700;
+
+  &--default {
+    color: $color-font-base;
+  }
+
+  &--actionable {
+    color: $color-base-purple-medium;
+  }
+
+  &--light {
+    color: $color-base-neutrals-white;
+  }
+}
+
+.ilo--h1 {
+  @include font-styles("headline-2");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-1");
+  }
+}
+
+.ilo--h2 {
+  @include font-styles("headline-3");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-2");
+  }
+}
+
+.ilo--h3 {
+  @include font-styles("headline-4");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-3");
+  }
+}
+
+.ilo--h4 {
+  @include font-styles("headline-5");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-4");
+  }
+}
+
+.ilo--h5 {
+  @include font-styles("headline-6");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-5");
+  }
+}
+
+.ilo--h6 {
+  @include font-styles("headline-6");
+
+  @include breakpoint("medium") {
+    @include font-styles("headline-6");
+  }
+}