@ilo-org/styles 0.0.1

package/scss/components/_button.scss

@@ -0,0 +1,272 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--button {
+  display: inline-block;
+  font-family: $fonts-display;
+  font-weight: map-get($type, "weights", "label");
+  padding: 0;
+  @include borderradius("button");
+
+  .link__label,
+  .button__label {
+    display: inline-block;
+  }
+
+  &.icon {
+    position: relative;
+
+    .ilo--icon {
+      height: 100%;
+      max-height: calc($spacing-icons-icon-height-lg * 2);
+      max-width: calc($spacing-icons-icon-height-lg * 2);
+      position: absolute;
+      width: 100%;
+    }
+
+    &.icon__position--left {
+      .link__label,
+      .button__label {
+        padding-left: $spacing-boxpadding-button-icon-large-left;
+      }
+
+      .ilo--icon {
+        left: calc($spacing-icons-icon-padding-lg - 9px);
+        top: calc($spacing-boxpadding-button-icon-large-top - 3px);
+      }
+    }
+
+    &.icon__position--right {
+      .link__label,
+      .button__label {
+        padding-right: $spacing-boxpadding-button-icon-large-right;
+      }
+
+      .ilo--icon {
+        right: calc($spacing-icons-icon-padding-lg - 9px);
+        top: calc($spacing-boxpadding-button-icon-large-top - 3px);
+      }
+    }
+
+    &--only {
+      height: px-to-rem($spacing-padding-3);
+      width: px-to-rem($spacing-padding-3);
+
+      .ilo--icon {
+        left: 0;
+        top: 0;
+      }
+
+      .button__label {
+        @include isVisuallyHidden();
+      }
+    }
+  }
+
+  &--large {
+    .link__label,
+    .button__label {
+      @include boxpadding("button", "large");
+      @include font-styles("button-large");
+    }
+  }
+
+  &--medium {
+    .link__label,
+    .button__label {
+      @include boxpadding("button", "medium");
+      @include font-styles("button-medium");
+    }
+
+    &.icon {
+      .ilo--icon {
+        max-height: calc($spacing-icons-icon-height-m * 2);
+        max-width: calc($spacing-icons-icon-height-m * 2);
+        position: absolute;
+      }
+
+      &.icon__position--left {
+        .link__label,
+        .button__label {
+          padding-left: $spacing-boxpadding-button-icon-medium-left;
+        }
+
+        .ilo--icon {
+          left: calc($spacing-icons-icon-padding-m - 9px);
+          top: calc($spacing-boxpadding-button-icon-medium-top - 6px);
+        }
+      }
+
+      &.icon__position--right {
+        .link__label,
+        .button__label {
+          padding-right: $spacing-boxpadding-button-icon-medium-right;
+        }
+
+        .ilo--icon {
+          right: calc($spacing-icons-icon-padding-m - 9px);
+          top: calc($spacing-boxpadding-button-icon-medium-top - 6px);
+        }
+      }
+    }
+  }
+
+  &--small {
+    .link__label,
+    .button__label {
+      @include boxpadding("button", "small");
+      @include font-styles("button-small");
+    }
+
+    &.icon {
+      .ilo--icon {
+        max-height: calc($spacing-icons-icon-height-sm * 2);
+        max-width: calc($spacing-icons-icon-height-sm * 2);
+        position: absolute;
+      }
+
+      &.icon__position--left {
+        .link__label,
+        .button__label {
+          padding-left: $spacing-boxpadding-button-icon-small-left;
+        }
+
+        .ilo--icon {
+          left: calc($spacing-icons-icon-padding-sm - 9px);
+          top: calc($spacing-boxpadding-button-icon-small-top - 4px);
+        }
+      }
+
+      &.icon__position--right {
+        .link__label,
+        .button__label {
+          padding-right: $spacing-boxpadding-button-icon-small-right;
+        }
+
+        .ilo--icon {
+          right: calc($spacing-icons-icon-padding-sm - 9px);
+          top: calc($spacing-boxpadding-button-icon-small-top - 4px);
+        }
+      }
+    }
+  }
+
+  &--primary {
+    background-color: map-get($color, "ux", "background", "attention");
+    border: map-get($borders, "base")
+      map-get($color, "ux", "borders", "attention") solid;
+    color: map-get($color, "ux", "labels", "actionable");
+  }
+
+  &:focus {
+    background-color: map-get($color, "ux", "background", "focus");
+    border: map-get($borders, "base") map-get($color, "ux", "borders", "focus")
+      solid;
+    box-shadow: 4px 4px 0 1px map-get($color, "ux", "borders", "focus") inset,
+      -4px -4px 0 1px map-get($color, "ux", "borders", "focus") inset;
+    color: map-get($color, "ux", "labels", "focus");
+    outline: none;
+
+    &.ilo--button--small {
+      box-shadow: 3px 3px 0 1px map-get($color, "ux", "borders", "focus") inset,
+        -3px -3px 0 1px map-get($color, "ux", "borders", "focus") inset;
+    }
+  }
+
+  &:hover {
+    background-color: map-get($color, "ux", "background", "hover");
+    border: map-get($borders, "base") map-get($color, "ux", "borders", "hover")
+      solid;
+    box-shadow: none;
+    color: map-get($color, "ux", "labels", "hover");
+    cursor: pointer;
+
+    &.ilo--button--small {
+      box-shadow: none;
+    }
+  }
+
+  &:active {
+    background-color: map-get($color, "ux", "background", "active");
+    border: map-get($borders, "base") map-get($color, "ux", "borders", "active")
+      solid;
+    box-shadow: none;
+    color: map-get($color, "ux", "labels", "active");
+
+    &.ilo--button--small {
+      box-shadow: none;
+    }
+  }
+
+  &:disabled {
+    opacity: map-get($opacity, "disabled");
+    pointer-events: none;
+  }
+
+  &--secondary {
+    background-color: map-get($color, "ux", "background", "default");
+    border: map-get($borders, "small")
+      map-get($color, "ux", "borders", "default") solid;
+    color: map-get($color, "ux", "labels", "actionable");
+
+    &:hover {
+      background-color: map-get($color, "ux", "background", "hover");
+      border: map-get($borders, "small")
+        map-get($color, "ux", "borders", "hover") solid;
+    }
+
+    &:active {
+      background-color: map-get($color, "ux", "background", "active");
+      border: map-get($borders, "base")
+        map-get($color, "ux", "borders", "active") solid;
+      box-shadow: none;
+      color: map-get($color, "ux", "labels", "active");
+
+      &.ilo--button--small {
+        box-shadow: none;
+      }
+    }
+  }
+
+  &--tertiary {
+    background-color: map-get($color, "ux", "background", "highlight");
+    border: map-get($borders, "base")
+      map-get($color, "ux", "background", "highlight") solid;
+    color: map-get($color, "ux", "labels", "actionable");
+  }
+
+  &--alert {
+    background-color: map-get($color, "ux", "background", "alert");
+    border: map-get($borders, "small") map-get($color, "ux", "borders", "alert")
+      solid;
+    color: map-get($color, "ux", "labels", "alert");
+
+    &:hover {
+      background-color: map-get($color, "ux", "background", "hover");
+      border: map-get($borders, "small")
+        map-get($color, "ux", "borders", "hover") solid;
+      color: map-get($color, "ux", "labels", "hover");
+    }
+
+    &:focus {
+      background-color: map-get($color, "ux", "background", "focus");
+      border: map-get($borders, "base")
+        map-get($color, "ux", "borders", "focus") solid;
+      color: map-get($color, "ux", "labels", "focus");
+      outline: none;
+    }
+
+    &:active {
+      background-color: map-get($color, "ux", "background", "active");
+      border: map-get($borders, "base")
+        map-get($color, "ux", "borders", "active") solid;
+      box-shadow: none;
+      color: map-get($color, "ux", "labels", "active");
+
+      &.ilo--button--small {
+        box-shadow: none;
+      }
+    }
+  }
+}

package/scss/components/_callout.scss

@@ -0,0 +1,151 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--callout {
+  display: flex;
+  transition: max-height 0.2s ease-in-out;
+  $self: &;
+
+  &--collapse:not(.ilo--callout--open) {
+    max-height: 68px;
+    overflow: hidden;
+  }
+
+  &--open {
+    max-height: 300px;
+    overflow: hidden;
+
+    #{$self}--toggle--icon {
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
+
+  &--sidebar {
+    padding: px-to-rem($spacing-padding-3 + 2) px-to-rem(12px);
+    width: px-to-rem(40px);
+  }
+
+  &--content {
+    padding: px-to-rem($spacing-padding-3 + 2) px-to-rem($spacing-padding-3 - 2)
+      px-to-rem($spacing-padding-3);
+    width: 100%;
+  }
+
+  &--copy {
+    @include font-styles("body-xs");
+
+    &:not(:last-child) {
+      margin-bottom: px-to-rem($spacing-padding-3);
+    }
+  }
+
+  &--header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 px-to-rem(24px);
+  }
+
+  &--headline {
+    @include font-styles("nav-bold-b");
+
+    font-family: $fonts-display;
+    font-weight: 700;
+  }
+
+  &--toggle {
+    @include font-styles("nav-bold-b");
+
+    background: none;
+    border: none;
+    color: $brand-ilo-dark-blue;
+    cursor: pointer;
+    font-family: $fonts-display;
+    font-weight: 500;
+    padding-right: 36px;
+    position: relative;
+
+    &--icon {
+      @include dataurlicon("arrow", $brand-ilo-dark-blue);
+
+      background-position: right;
+      background-repeat: no-repeat;
+      display: inline-block;
+      height: 24px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%) rotate(0);
+      transition: transform 0.2s ease-in-out;
+      width: 23px;
+    }
+  }
+
+  &--footer {
+    padding: px-to-rem(24px) 0 0 0;
+  }
+
+  .icon {
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: block;
+    height: 16px;
+    width: 16px;
+
+    &--error {
+      background-color: $color-ux-notification-type-error;
+
+      @include dataurlicon("error", $color-ux-notification-icon);
+    }
+
+    &--info {
+      background-color: $color-ux-notification-type-info;
+
+      @include dataurlicon("info", $color-ux-notification-icon);
+    }
+
+    &--success {
+      background-color: $color-ux-notification-type-success;
+
+      @include dataurlicon("success", $color-ux-notification-icon);
+    }
+
+    &--warning {
+      background-color: $color-ux-notification-type-warning;
+
+      @include dataurlicon("warning", $color-ux-notification-icon);
+    }
+  }
+
+  &--error {
+    background: $brand-ilo-ramp-red;
+
+    #{$self}--sidebar {
+      background: $brand-ilo-red;
+    }
+  }
+
+  &--info {
+    background: $brand-ilo-ramp-blue;
+
+    #{$self}--sidebar {
+      background: $brand-ilo-blue;
+    }
+  }
+
+  &--success {
+    background: $brand-ilo-ramp-green;
+
+    #{$self}--sidebar {
+      background: $brand-ilo-green;
+    }
+  }
+
+  &--warning {
+    background: $brand-ilo-ramp-yellow;
+
+    #{$self}--sidebar {
+      background: $brand-ilo-yellow;
+    }
+  }
+}