@ilo-org/styles 0.0.1

package/scss/_reset.scss

@@ -0,0 +1,166 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// http://meyerweb.com/eric/tools/css/reset/
+/// v2.0 | 20110126
+/// License: none (public domain)
+/// Start vendor reset
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+  // stylelint-disable-next-line declaration-block-no-duplicate-properties
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/// End vendor reset
+
+html {
+  box-sizing: border-box;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/// Makes SVGs accessible in high contrast mode
+/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345
+@media screen and (-ms-high-contrast: active) {
+  svg {
+    fill: ButtonText;
+  }
+}

package/scss/_tokens.scss

@@ -0,0 +1,5 @@
+//*------------------------------------*\
+//    $TOKENS
+//*------------------------------------*/
+@forward "@ilo-org/themes/build/scss/tokens";
+@forward "@ilo-org/icons/build/scss/icons";

package/scss/_typography.scss

@@ -0,0 +1,72 @@
+// Adapted from Carbon Library
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Load the theme vars and fonts
+@use "@ilo-org/themes/build/scss/tokens" as *;
+@forward "@ilo-org/fonts/index";
+
+html,
+body {
+  color: $color-font-base;
+  font: #{$type-base-size}/#{$type-base-line-height} $fonts-copy;
+  letter-spacing: $type-base-letter-spacing;
+  -webkit-font-smoothing: antialiased;
+}
+
+/// Font family fallbacks for: Overpass, Noto Sans
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-families: (
+  "display": unquote("#{$fonts-display}, sans-serif"),
+  "copy": unquote("#{$fonts-copy}, sans-serif"),
+) !default;
+
+/// Get the font-family for a font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function font-family($name) {
+  @return map-get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin font-family($name) {
+  font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-weights: (
+  "light": 300,
+  "regular": 400,
+  "semibold": 600,
+  "bold": 700,
+  "extrabold": 800,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function font-weight($weight) {
+  @return map-get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
+}

package/scss/components/_accordion.scss

@@ -0,0 +1,102 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--accordion {
+  $transition-timing: 0.15s;
+
+  &--button {
+    align-items: center;
+    background-color: $color-ux-background-default;
+    background-position: calc(100% - px-to-rem(6px)) center;
+    background-repeat: no-repeat;
+    background-size: px-to-rem(24px) px-to-rem(24px);
+    border: none;
+    border-top: 2px solid map-get($color, "accordion", "border");
+    color: $color-ux-labels-actionable;
+    display: flex;
+    fill: $color-ux-labels-actionable;
+    flex-direction: row;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "section");
+    @include font-styles("label-medium");
+    justify-content: space-between;
+    margin: 0;
+    padding: px-to-rem(calc($spacing-ui-padding-lg - 4px)) px-to-rem(36px)
+      px-to-rem(calc($spacing-ui-padding-lg - 4px)) 0;
+    text-align: left;
+    transition: border $transition-timing ease-out,
+      background $transition-timing ease-out, color $transition-timing ease-out;
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: $color-ux-background-hover;
+      border-top-color: $color-ux-borders-hover;
+      color: $color-ux-labels-hover;
+      cursor: pointer;
+      fill: $color-ux-labels-hover;
+
+      &[aria-expanded="true"] {
+        @include dataurlicon("minus", $color-ux-labels-hover);
+      }
+
+      &[aria-expanded="false"] {
+        @include dataurlicon("add", $color-ux-labels-hover);
+      }
+    }
+
+    @include breakpoint("large") {
+      @include font-styles("label-large");
+      padding: px-to-rem(calc($spacing-ui-padding-xl - 11px)) px-to-rem(36px)
+        px-to-rem(calc($spacing-ui-padding-xl - 11px)) 0;
+    }
+
+    &[aria-expanded="true"] {
+      @include dataurlicon("minus", $color-ux-labels-actionable);
+    }
+
+    &[aria-expanded="false"] {
+      @include dataurlicon("add", $color-ux-labels-actionable);
+    }
+  }
+
+  &--panel {
+    --height: auto;
+    color: $color-ux-labels-default;
+    font-family: $fonts-copy;
+    height: 0px;
+    overflow: hidden;
+    transition: height 0.5s ease-out, padding 0.5s ease-out;
+
+    .ilo--accordion--innerpanel {
+      padding-bottom: px-to-rem($spacing-ui-padding-xxl);
+      padding-top: px-to-rem(8px);
+    }
+
+    @include font-styles("label-medium");
+
+    &--open {
+      height: var(--height);
+      transition: height 0.5s ease-out, padding 0.5s ease-out;
+    }
+
+    &.collapsing,
+    &.expanding {
+      height: 0;
+      position: relative;
+      overflow: hidden;
+      visibility: visible;
+      -webkit-transition-property: height, padding, visibility;
+      transition-property: height, padding, visibility;
+      transition-duration: attr(data-transition);
+      -webkit-transition-duration: attr(data-transition);
+      transition-timing-function: ease;
+      -webkit-transition-timing-function: ease;
+    }
+
+    @include breakpoint("large") {
+      @include font-styles("label-large");
+    }
+  }
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,258 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--breadcrumb {
+  position: relative;
+  z-index: 10;
+
+  &--items {
+    align-items: center;
+    background-color: $color-base-neutrals-white;
+    display: inline-flex;
+    justify-content: flex-start;
+    padding: px-to-rem(11px) 0 px-to-rem(11px) px-to-rem($spacing-padding-1-5);
+    position: relative;
+
+    &.context--menu {
+      padding: 0;
+    }
+  }
+
+  &--link {
+    align-items: center;
+    background-position: right 52%;
+    background-repeat: no-repeat;
+    color: map-get($color, "link", "text", "default");
+    display: inline-flex;
+    height: px-to-rem($spacing-padding-2);
+    padding: 0 px-to-rem($spacing-padding-3) 0 px-to-rem(10px);
+    text-decoration: none;
+    @include dataurlicon("breadcrumbdivider", $color-link-text-default);
+
+    &--label {
+      font-family: $fonts-copy;
+      font-weight: 400;
+      @include font-styles("body-xxs");
+    }
+
+    &:hover,
+    &:focus {
+      color: map-get($color, "link", "text", "hover");
+      text-decoration: underline;
+      @include dataurlicon("breadcrumbdivider", $color-link-text-hover);
+    }
+  }
+
+  &--item {
+    align-items: center;
+    display: flex;
+    height: px-to-rem($spacing-padding-2);
+
+    &.home {
+      align-items: center;
+      display: flex;
+      position: relative;
+      width: px-to-rem($spacing-padding-4);
+
+      .ilo--breadcrumb--link {
+        padding-left: 0;
+        width: px-to-rem(38px);
+
+        &--label {
+          @include isVisuallyHidden();
+        }
+
+        &:before {
+          background-position: center center;
+          background-repeat: no-repeat;
+          content: "";
+          display: block;
+          height: px-to-rem($spacing-padding-2);
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: px-to-rem($spacing-padding-2);
+          @include dataurlicon("home", $color-link-text-default);
+        }
+      }
+
+      &:hover,
+      &:focus {
+        .ilo--breadcrumb--link {
+          &:before {
+            @include dataurlicon("home", $color-link-text-hover);
+          }
+        }
+      }
+    }
+
+    &.final {
+      .ilo--breadcrumb--link {
+        background-image: none;
+      }
+    }
+  }
+
+  .ilo--breadcrumb--item--context {
+    align-items: flex-start;
+    display: flex;
+    height: px-to-rem($spacing-padding-2);
+  }
+
+  &.contextmenu {
+    .ilo--breadcrumb--item--context {
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: 16px 4px;
+      position: relative;
+      width: px-to-rem(42px);
+      @include dataurlicon("elipsis", $color-link-text-default);
+
+      &:after {
+        background-position: center center;
+        background-repeat: no-repeat;
+        content: "";
+        display: block;
+        height: px-to-rem($spacing-padding-2);
+        right: -7px;
+        position: absolute;
+        top: 0;
+        width: px-to-rem($spacing-padding-2);
+        @include dataurlicon("breadcrumbdivider", $color-link-text-default);
+      }
+
+      .context--menu {
+        border-radius: px-to-rem(2px);
+        background-color: $color-ux-background-highlight;
+        display: inline-block;
+        left: px-to-rem(-40px);
+        opacity: 0;
+        position: absolute;
+        top: calc(100% + 20px);
+        transition: opacity 0.75s linear;
+        transition-delay: 0.5s;
+        width: px-to-rem(120px);
+        z-index: 10;
+
+        &:before {
+          background-position: top center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          @include dataurlicon(
+            "halfsquaretriangle",
+            $color-ux-background-highlight
+          );
+          content: "";
+          height: px-to-rem($spacing-padding-1-5);
+          position: absolute;
+          left: 50%;
+          top: -#{px-to-rem(6px)};
+          transform: translateX(-50%) rotate(135deg);
+          width: px-to-rem($spacing-padding-1-5);
+        }
+
+        .ilo--breadcrumb--item {
+          display: inline-block;
+          height: auto;
+          padding: 0 px-to-rem($spacing-padding-1);
+          position: relative;
+          width: 100%;
+
+          &:last-of-type a {
+            border-bottom: none;
+          }
+
+          &:hover,
+          &:focus {
+            background-color: $color-base-blue-light;
+            text-decoration: none;
+
+            .ilo--breadcrumb--link {
+              text-decoration: none;
+            }
+          }
+
+          &.endsection {
+            border-bottom: px-to-rem($borders-base) solid
+              $color-base-neutrals-white;
+
+            .ilo--context-menu--link {
+              border-bottom: none;
+            }
+          }
+        }
+
+        .ilo--breadcrumb--link {
+          background: none;
+          border-bottom: px-to-rem($borders-base) solid
+            $color-base-neutrals-white;
+          color: map-get($color, "link", "text", "default");
+          display: inline-block;
+          font-family: $fonts-copy;
+          font-weight: map-get($type, "weights", "section");
+          height: auto;
+          padding: px-to-rem($spacing-padding-2) 0;
+          text-decoration: none;
+          width: 100%;
+          @include font-styles("body-xxs");
+
+          &:visited {
+            color: map-get($color, "link", "text", "default");
+          }
+
+          &:active {
+            color: map-get($color, "link", "text", "active");
+            outline: none;
+          }
+
+          &:hover,
+          &:focus {
+            color: map-get($color, "link", "text", "hover");
+            outline: none;
+            text-decoration: underline;
+            text-decoration-thickness: px-to-rem($borders-base);
+          }
+        }
+      }
+
+      &:hover,
+      &:focus {
+        .context--menu {
+          opacity: 1;
+          transition: opacity 1.5s ease-out;
+        }
+      }
+    }
+  }
+
+  @include breakpoint("medium") {
+    &--items {
+      &:after {
+        background: linear-gradient(
+          to bottom right,
+          white 50%,
+          transparent 50%
+        );
+        content: "";
+        display: inline-block;
+        height: 39px;
+        position: absolute;
+        right: -39px;
+        top: 0;
+        width: 39px;
+      }
+
+      &.context--menu {
+        &:after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  &.storybook {
+    background-color: $brand-ilo-grey-ui;
+    height: 100vh;
+  }
+}