@ilo-org/styles 0.0.1

package/scss/components/_searchfield.scss

@@ -0,0 +1,66 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--searchfield {
+  display: flex;
+
+  &--button {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "inputbutton",
+      "default",
+      "background"
+    );
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: $spacing-padding-3 $spacing-padding-3;
+    @include bordervalues("inputbutton", "formelements");
+    height: $spacing-padding-6;
+    width: $spacing-padding-6;
+    text-indent: -9999px;
+    @include dataurlicon(
+      "search",
+      $color-formelements-inputbutton-default-color
+    );
+
+    &:hover {
+      background-color: map-get(
+        $color,
+        "formelements",
+        "inputbutton",
+        "hover",
+        "background"
+      );
+      cursor: pointer;
+      @include dataurlicon(
+        "search",
+        $color-formelements-inputbutton-hover-color
+      );
+    }
+
+    &:active {
+      background-color: map-get(
+        $color,
+        "formelements",
+        "inputbutton",
+        "active",
+        "background"
+      );
+      @include dataurlicon(
+        "search",
+        $color-formelements-inputbutton-active-color
+      );
+    }
+
+    .haslabel & {
+      margin-top: px-to-rem(28px);
+    }
+
+    &:disabled {
+      opacity: 45%;
+      pointer-events: none;
+    }
+  }
+}

package/scss/components/_table.scss

@@ -0,0 +1,177 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--table {
+  background-color: $color-ux-table-background;
+  padding: $spacing-ux-table-padding-top $spacing-ux-table-padding-right
+    $spacing-ux-table-padding-bottom $spacing-ux-table-padding-left;
+  position: relative;
+
+  &--header {
+    background-color: $color-ux-table-content-background;
+    padding: $spacing-ux-table-content-padding-top
+      $spacing-ux-table-content-padding-right
+      $spacing-ux-table-content-padding-bottom
+      $spacing-ux-table-content-padding-left;
+  }
+
+  &--wrapper {
+    max-height: 380px;
+    overflow: scroll;
+    position: relative;
+    width: 100%;
+  }
+
+  &--content {
+    width: 100%;
+  }
+
+  &--head {
+    background-color: $color-ux-table-content-background;
+    border-top: px-to-rem(2px) solid $color-base-neutrals-lighter;
+    border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
+    box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
+      0px 4px 8px rgba(30, 45, 190, 0.054),
+      0px 10px 20px rgba(30, 45, 190, 0.08),
+      0px -4px 16px rgba(30, 45, 190, 0.054);
+    left: 0;
+    height: auto;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    &--cell {
+      background-color: $color-ux-table-content-background;
+      border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;
+      font-family: $fonts-display;
+      font-weight: 700;
+      @include font-styles("body-xs");
+      padding: $spacing-ux-table-head-padding-top
+        $spacing-ux-table-head-padding-right
+        $spacing-ux-table-head-padding-bottom
+        $spacing-ux-table-head-padding-left;
+      pointer-events: none;
+      text-align: left;
+
+      &:first-of-type {
+        border-left: none;
+      }
+
+      &.sortable {
+        pointer-events: auto;
+        position: relative;
+
+        &:after {
+          background-color: $color-base-neutrals-lighter;
+          background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-actionable)}");
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: 75%;
+          content: "";
+          display: block;
+          height: px-to-rem($spacing-padding-3);
+          position: absolute;
+          right: px-to-rem(9px);
+          width: px-to-rem($spacing-padding-3);
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        &:hover {
+          background-color: $color-ux-table-selected-background;
+          cursor: pointer;
+        }
+
+        &[aria-sort="descending"] {
+          &:after {
+            transform-origin: center center;
+            transform: translateY(-50%) rotate(180deg);
+          }
+        }
+      }
+    }
+  }
+
+  &--body {
+    background-color: $color-ux-table-cell-background;
+
+    &--row.selected {
+      background-color: $color-ux-table-hover-background;
+    }
+
+    &--cell {
+      border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
+      font-family: $fonts-copy;
+      font-weight: 400;
+      @include font-styles("body-xs");
+      outline: 0;
+      padding: $spacing-ux-table-cell-padding-top
+        $spacing-ux-table-cell-padding-right
+        $spacing-ux-table-cell-padding-bottom
+        $spacing-ux-table-cell-padding-left;
+      position: relative;
+
+      &:first-of-type {
+        border-left: none;
+      }
+
+      &.numeric {
+        text-align: right;
+      }
+
+      &.selected {
+        background-color: $color-ux-table-selected-background;
+        border-bottom: 2px solid $color-ux-labels-hover;
+        color: $color-ux-labels-hover;
+      }
+
+      &.column--selected {
+        background-color: $color-ux-table-hover-background;
+      }
+
+      a {
+        @include linkstyles();
+      }
+    }
+  }
+
+  &--headline {
+    font-family: $fonts-display;
+    font-weight: 700;
+    margin-bottom: px-to-rem(7px);
+    @include font-styles("headline-6");
+  }
+
+  &--description {
+    font-family: $fonts-copy;
+    font-weight: 400;
+    @include font-styles("body-xxs");
+
+    a {
+      @include linkstyles();
+    }
+  }
+
+  &--zebra {
+    .ilo--table--body--row:nth-child(odd) {
+      background-color: $color-ux-table-zebra-background;
+
+      &:hover,
+      &:focus {
+        background-color: $color-ux-table-hover-background;
+      }
+
+      .ilo--table--body--cell {
+        border-left: px-to-rem(1px) solid $color-base-neutrals-white;
+
+        &:hover,
+        &:focus,
+        &.selected {
+          background-color: $color-ux-table-selected-background;
+        }
+      }
+    }
+  }
+}

package/scss/components/_tableofcontents.scss

@@ -0,0 +1,98 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--table-of-contents {
+  background-color: $color-ux-tableofcontents-items-default-background;
+  min-width: 343px;
+  padding: 0;
+
+  &--list,
+  &--list--item {
+    width: 100%;
+  }
+
+  &--link {
+    background-color: transparent;
+    background-position: calc(100% - 11px) center;
+    background-repeat: no-repeat;
+    background-size: px-to-rem(24px) px-to-rem(24px);
+    border-bottom: $color-ux-tableofcontents-items-default-border
+      $spacing-ux-tableofcontents-items-border-bottom solid;
+    color: $color-ux-labels-actionable;
+    display: block;
+    font-family: $fonts-display;
+    font-weight: 500;
+    margin: 0 $spacing-ux-tableofcontents-padding-right 0
+      $spacing-ux-tableofcontents-padding-left;
+    padding: $spacing-ux-tableofcontents-items-padding-top
+      $spacing-ux-tableofcontents-items-padding-right
+      $spacing-ux-tableofcontents-items-padding-bottom
+      $spacing-ux-tableofcontents-items-padding-left;
+    text-decoration: none;
+    width: calc(
+      100% - $spacing-ux-tableofcontents-padding-right -
+        $spacing-ux-tableofcontents-padding-left
+    );
+    @include dataurlicon("stemarrow", $color-ux-labels-actionable);
+    @include font-styles("label-medium");
+
+    &:hover,
+    &:focus {
+      background-color: $color-ux-tableofcontents-items-hover-background;
+      border-bottom: $color-ux-tableofcontents-items-hover-border
+        $spacing-ux-tableofcontents-items-border-bottom solid;
+      background-position: calc(100% - 19px) center;
+      color: $color-ux-labels-hover;
+      margin: 0;
+      outline: none;
+      padding: $spacing-ux-tableofcontents-items-padding-top
+        calc(
+          $spacing-ux-tableofcontents-items-padding-right +
+            $spacing-ux-tableofcontents-padding-right
+        )
+        $spacing-ux-tableofcontents-items-padding-bottom
+        calc(
+          $spacing-ux-tableofcontents-items-padding-left +
+            $spacing-ux-tableofcontents-padding-left
+        );
+      width: 100%;
+      @include dataurlicon("stemarrow", $color-ux-labels-hover);
+    }
+
+    &:active {
+      background-color: $color-ux-tableofcontents-items-active-background;
+      border-bottom: $color-ux-tableofcontents-items-active-border
+        $spacing-ux-tableofcontents-items-border-bottom solid;
+      color: $color-ux-tableofcontents-items-active-color;
+      margin: 0;
+      outline: none;
+      padding: $spacing-ux-tableofcontents-items-padding-top
+        calc(
+          $spacing-ux-tableofcontents-items-padding-right +
+            $spacing-ux-tableofcontents-padding-right
+        )
+        $spacing-ux-tableofcontents-items-padding-bottom
+        calc(
+          $spacing-ux-tableofcontents-items-padding-left +
+            $spacing-ux-tableofcontents-padding-left
+        );
+      width: 100%;
+      @include dataurlicon(
+        "stemarrow",
+        $color-ux-tableofcontents-items-active-icon
+      );
+    }
+  }
+
+  &--list--item:last-of-type {
+    .ilo--table-of-contents--link {
+      border-bottom: none;
+
+      &:hover {
+        border-bottom: $color-ux-tableofcontents-items-hover-border
+          $spacing-ux-tableofcontents-items-border-bottom solid;
+      }
+    }
+  }
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,194 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+/*
+Note that the styles for this component rely on CSS container queries, which currently require a polyfill. Your site template should load the polyfill in the <head> using the method described here: https://github.com/GoogleChromeLabs/container-query-polyfil
+*/
+
+.ilo--tabs {
+  &:not(.tabs--js) {
+    .ilo--tabs--selection {
+      margin-bottom: px-to-rem(24px);
+
+      &--button {
+        background: map-get($color, "link", "background", "default");
+        border-bottom: $widths-border-sm solid
+          map-get($color, "link", "underline", "default");
+        color: map-get($color, "link", "text", "default");
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        text-decoration: none;
+
+        &:visited {
+          background: map-get($color, "link", "background", "visited");
+          border-bottom: $widths-border-sm solid
+            map-get($color, "link", "underline", "visited");
+          color: map-get($color, "link", "text", "visited");
+        }
+
+        &:hover {
+          background: map-get($color, "link", "background", "hover");
+          border-bottom: $widths-border-med solid
+            map-get($color, "link", "underline", "hover");
+          color: map-get($color, "link", "text", "hover");
+          text-decoration: none;
+        }
+
+        &:active {
+          background: map-get($color, "link", "background", "active");
+          border-bottom: $widths-border-med solid
+            map-get($color, "link", "underline", "active");
+          color: map-get($color, "link", "text", "active");
+          outline: none;
+        }
+
+        &:focus {
+          background: map-get($color, "link", "background", "focus");
+          border-bottom: $widths-border-lg solid
+            map-get($color, "link", "underline", "focus");
+          color: map-get($color, "link", "text", "focus");
+          outline: none;
+        }
+      }
+    }
+  }
+
+  &.tabs--js {
+    .ilo--tabs--selection {
+      --tabscount: 1;
+      display: block;
+
+      &--button {
+        align-items: center;
+        background-color: $color-base-neutrals-lighter;
+        border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;
+        color: $color-ux-labels-actionable;
+        font-family: $fonts-display;
+        font-weight: 600;
+        display: flex;
+        height: px-to-rem(60px);
+        justify-content: flex-start;
+        padding-left: $spacing-padding-1;
+        padding-right: $spacing-padding-3;
+        text-decoration: none;
+        @include font-styles("label-medium");
+
+        &[aria-selected="true"] {
+          background-color: $color-base-neutrals-white;
+          border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
+        }
+
+        &.icon {
+          .ilo--icon {
+            height: px-to-rem($spacing-padding-2);
+            margin-right: px-to-rem(5px);
+            order: 1;
+            width: px-to-rem($spacing-padding-2);
+          }
+
+          .ilo--tabs--selection--label {
+            order: 2;
+          }
+        }
+
+        &:hover,
+        &:focus,
+        &[aria-selected="true"]:hover,
+        &[aria-selected="true"]:focus {
+          background-color: $color-base-blue-light;
+          color: $color-base-blue-medium;
+          outline: none;
+
+          &.has--tooltip {
+            .ilo--tooltip--wrapper {
+              @include dataurlicon("info", $color-base-blue-medium);
+            }
+          }
+        }
+      }
+
+      &--label {
+        max-width: 50ch;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &--item {
+        display: block;
+        width: 100%;
+
+        &:last-of-type {
+          .ilo--tabs--selection--button {
+            border-bottom: none;
+            border-right: none;
+          }
+        }
+      }
+    }
+
+    .ilo--tabs--content {
+      padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-3)
+        px-to-rem($spacing-padding-7) px-to-rem($spacing-padding-3);
+
+      [aria-expanded="false"] {
+        display: none;
+      }
+
+      [aria-expanded="true"] {
+        display: block;
+      }
+    }
+
+    @include breakpoint("medium") {
+      .ilo--tabs--content {
+        padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-8)
+          px-to-rem($spacing-padding-8) px-to-rem($spacing-padding-8);
+      }
+
+      .ilo--tabs--selection {
+        display: flex;
+        max-width: 100%;
+        overflow-x: scroll;
+        overflow-y: hidden;
+
+        &--button {
+          border-bottom: none;
+          border-right: px-to-rem(5px) solid $color-base-neutrals-white;
+        }
+
+        &--item {
+          width: min(calc(var(--tabscount) / 1 * 100%), 25%);
+        }
+      }
+    }
+
+    @include breakpoint("large") {
+      .ilo--tabs--selection {
+        &--item {
+          width: min(calc(var(--tabscount) / 1 * 100%), 100%);
+        }
+      }
+    }
+  }
+
+  /* [aria-expanded="true"] {
+    display: none;
+  }
+
+  [aria-expanded="false"] {
+
+  }
+
+  [aria-expanded="false"] {
+    display: none;
+  }
+
+  @container (min-width: 700px) {
+    [aria-expanded="true"] {
+      display: block;
+    }
+  } */
+}

package/scss/components/_tag.scss

@@ -0,0 +1,103 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../mixins" as *;
+
+.ilo--tag-set {
+  list-style: none;
+
+  &__item {
+    display: inline-block;
+    margin: map-get($spacing, "horizontal-rule");
+  }
+}
+
+.ilo--tag {
+  @include font-styles("nav-md-sm");
+
+  background: map-get($color, "tag", "background", "default");
+  border: none;
+  color: map-get($color, "tag", "text", "default");
+  display: inline-block;
+  font-family: map-get($fonts, "display");
+  font-size: inherit;
+  font-weight: 500;
+  line-height: inherit;
+  padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"));
+  text-decoration: none;
+  $self: &;
+
+  &--active {
+    background: map-get($color, "tag", "background", "active");
+    color: map-get($color, "tag", "text", "active");
+    outline: none;
+  }
+
+  &--anchor {
+    cursor: unset;
+
+    &.ilo--tag--active {
+      background: map-get($color, "tag", "background", "active");
+      color: map-get($color, "tag", "text", "active");
+      cursor: pointer;
+      outline: none;
+
+      &:hover {
+        background: map-get($color, "tag", "background", "hover");
+        color: map-get($color, "tag", "text", "hover");
+        text-decoration: none;
+      }
+
+      &:focus {
+        background: map-get($color, "tag", "background", "focus");
+        color: map-get($color, "tag", "text", "focus");
+        outline: none;
+      }
+    }
+  }
+
+  &--button {
+    @include font-styles("label-small");
+
+    cursor: pointer;
+    display: none;
+    opacity: 0;
+    padding-right: 36px;
+    position: relative;
+    visibility: hidden;
+
+    &.ilo--tag--active {
+      background: map-get($color, "tag", "background", "active");
+      color: map-get($color, "tag", "text", "active");
+      display: block;
+      opacity: 1;
+      outline: none;
+      visibility: visible;
+    }
+
+    &:hover {
+      background: map-get($color, "tag", "background", "hover");
+      color: map-get($color, "tag", "text", "hover");
+      text-decoration: none;
+    }
+
+    &:focus {
+      background: map-get($color, "tag", "background", "focus");
+      color: map-get($color, "tag", "text", "focus");
+      outline: none;
+    }
+
+    &.icon__position--right {
+      .ilo--icon {
+        @include dataurlicon("close", map-get($color, "tag", "text", "active"));
+
+        height: 100%;
+        max-height: 28px;
+        max-width: 28px;
+        position: absolute;
+        right: 5px;
+        top: 6px;
+        width: 100%;
+      }
+    }
+  }
+}