@ilo-org/styles 1.5.0 → 1.6.0

package/scss/components/_profile.scss

@@ -3,40 +3,39 @@
 @import "../animations";
 @import "../mixins";
 
-$row-1-lg: 64px;
-$avatar-size-lg: $row-1-lg;
-
 .ilo--profile {
   $c: &;
 
+  $row-1-lg: #{px-to-rem(64px)};
+  $row-1-sm: #{px-to-rem(48px)};
+
+  --row-1-height: #{$row-1-lg};
+
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-template-rows: minmax($row-1-lg, auto) auto;
+  grid-template-rows: repeat(minmax(var(--row-1-height), auto));
   max-width: px-to-rem(343px);
   width: 100%;
+  row-gap: spacing(5);
+  column-gap: spacing(4);
 
   &--avatar {
     grid-row: 1;
     border-radius: 50%;
+    height: var(--row-1-height);
+    width: var(--row-1-height);
   }
 
   figcaption {
-    box-sizing: border-box;
-    grid-row: 1;
-    grid-column-end: -1;
     display: flex;
     flex-flow: column;
     justify-content: center;
-    align-items: start;
+    grid-row: 1;
+    grid-column-end: -1;
   }
 
   &--figcaption--content {
-    box-sizing: border-box;
     width: 100%;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: start;
     position: relative;
 
     &:after {
@@ -44,20 +43,25 @@ $avatar-size-lg: $row-1-lg;
       position: absolute;
       bottom: -12px;
       width: 100%;
-      border-bottom: 2px solid $color-base-neutrals-lighter;
+      border-bottom: 2px solid var(--ilo-color-gray-light);
+    }
+
+    #{$c}__size__small &::after {
+      content: none;
     }
   }
 
   &--name {
-    font-family: var(--ilo-fonts-display);
+    @include typography("highlight-medium-bold");
   }
 
-  &--role {
-    font-family: var(--ilo-fonts-copy);
+  &--role,
+  &--description {
+    @include typography("body-small");
+    color: var(--ilo-color-gray-accessible);
   }
 
   &--description {
-    font-family: var(--ilo-fonts-copy);
     grid-row: 2;
     grid-column: 1 / -1;
   }
@@ -65,118 +69,74 @@ $avatar-size-lg: $row-1-lg;
   &--link {
     $link: &;
 
-    font-family: var(--ilo-fonts-display);
+    $icon: "[class*='icon']";
+
+    @include typography("highlight-medium");
+    color: var(--ilo-color-dark-blue);
     grid-column: 1 / -1;
 
     a {
+      display: inline-flex;
       text-decoration: none;
-      color: map-get($color, "link", "text", "default");
-      display: inline-block;
-    }
-
-    &--label {
-      display: flex;
       flex-flow: row nowrap;
       align-items: center;
+      gap: spacing(2);
+      @include globaltransition("color");
 
-      &:after {
-        position: relative;
-        bottom: px-to-rem(1px);
-        height: px-to-rem(24px);
-        width: px-to-rem(24px);
-        margin-inline-start: spacing(2);
-        content: "";
-        @include dataurlicon("chevron_right", $color-link-text-default);
-
-        [dir="rtl"] & {
-          @include dataurlicon("chevron_left", $color-link-text-default);
-        }
+      &:hover,
+      &:focus,
+      &:focus-within {
+        color: var(--ilo-color-blue);
       }
     }
 
-    a:hover,
-    a:focus {
-      #{$link}--label {
-        color: map-get($color, "link", "text", "hover");
-        outline: none;
+    #{$icon} {
+      position: relative;
+      bottom: px-to-rem(1px);
 
-        &:after {
-          @include dataurlicon("chevron_right", $color-link-text-hover);
-
-          [dir="rtl"] & {
-            @include dataurlicon("chevron_left", $color-link-text-hover);
-          }
-        }
+      [dir="rtl"] & {
+        transform: rotate(180deg);
       }
     }
-  }
 
-  &__theme {
-    &__dark {
-      color: $color-base-neutrals-lighter;
-
-      #{$c}--link {
-        &--label {
-          &:after {
-            @include dataurlicon("chevron_right", $color-base-neutrals-lighter);
-
-            [dir="rtl"] & {
-              @include dataurlicon(
-                "chevron_left",
-                $color-base-neutrals-lighter
-              );
-            }
-          }
-        }
-
-        a {
-          color: $color-base-neutrals-lighter;
-        }
-
-        a:hover,
-        a:focus {
-          #{$c}--link--label {
-            color: $brand-ilo-turquoise;
-            outline: none;
-
-            &:after {
-              @include dataurlicon("chevron_right", $brand-ilo-turquoise);
-
-              [dir="rtl"] & {
-                @include dataurlicon("chevron_left", $brand-ilo-turquoise);
-              }
-            }
-          }
-        }
-      }
+    &--label {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
     }
   }
 
   &__size {
-    &__large {
-      #{$c}--avatar {
-        width: px-to-rem($avatar-size-lg);
-        height: px-to-rem($avatar-size-lg);
-        margin-inline-end: spacing(4);
-      }
+    &__small {
+      --row-1-height: #{$row-1-sm};
+      column-gap: spacing(3);
 
       #{$c}--name {
-        font-weight: map-get($type, "weights", "label");
-        @include font-styles("body-small");
+        @include typography("highlight-small-bold");
       }
+    }
 
-      #{$c}--role {
-        @include font-styles("body-xs");
-      }
+    &__large {
+      --row-1-height: #{$row-1-lg};
+    }
+  }
+
+  &__theme {
+    &__dark {
+      color: var(--ilo-color-white);
 
-      #{$c}--description {
-        @include font-styles("body-xs");
-        padding-block-start: spacing(5);
+      #{$c}--figcaption--content {
+        &:after {
+          border-color: var(--ilo-color-white);
+        }
       }
 
-      #{$c}--link {
-        @include font-styles("body-small");
-        padding-block-start: spacing(6);
+      #{$c}--name,
+      #{$c}--role,
+      #{$c}--description,
+      #{$c}--link,
+      a {
+        color: var(--ilo-color-white);
       }
     }
   }

package/scss/components/_scorecard.scss

@@ -0,0 +1,177 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__score {
+      --max-width: #{px-to-rem(412px)};
+
+      display: flex;
+      margin-top: 0;
+      position: relative;
+
+      // Content Layout
+      #{$self}--wrap {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      #{$self}--content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding: spacing(6) spacing(6) spacing(8) spacing(6);
+        width: 100%;
+      }
+
+      #{$self}--image--wrapper {
+        height: 0;
+        overflow: hidden;
+        padding-top: 56.25%;
+        width: 100%;
+
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: auto;
+          width: 100%;
+        }
+      }
+
+      .ilo--status {
+        margin-bottom: spacing(6);
+      }
+
+      #{$self}--eyebrow {
+        margin-bottom: spacing(4);
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-5");
+        font-family: var(--ilo-fonts-display);
+        font-weight: 700;
+        margin-bottom: spacing(6);
+      }
+
+      #{$self}--area {
+        &--content {
+          display: flex;
+          flex-flow: column;
+          gap: spacing(2);
+          margin-bottom: spacing(6);
+        }
+
+        &--cta {
+          display: flex;
+          flex-flow: row wrap;
+          gap: spacing(2);
+        }
+      }
+
+      #{$self}--content--item {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: center;
+        gap: spacing(2);
+      }
+
+      &#{$self}__size {
+        // narrow is the default
+
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(754px)};
+
+          @include breakpoint("md") {
+            #{$self}--wrap {
+              flex-direction: row;
+            }
+
+            #{$self}--content {
+              width: 50%;
+            }
+
+            #{$self}--image--wrapper {
+              padding: 0;
+              height: initial;
+              width: 50%;
+            }
+
+            img {
+              object-fit: cover;
+              max-width: initial;
+              height: 100%;
+              width: 100%;
+            }
+
+            #{$self}--date,
+            #{$self}--eyebrow,
+            #{$self}--title {
+              width: 100%;
+            }
+
+            #{$self}--date {
+              align-self: flex-end;
+            }
+          }
+        }
+
+        &__simple {
+          --max-width: #{px-to-rem(754px)};
+
+          #{$self}--content {
+            padding: spacing(3) spacing(4);
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(3, auto);
+            gap: spacing(4);
+            grid-template-areas:
+              "title"
+              "cta"
+              "status"
+              "content";
+
+            @include breakpoint("md") {
+              grid-template-columns: min-content 1fr 1fr;
+              grid-template-areas:
+                "title title cta"
+                "status content content";
+            }
+
+            .ilo--status {
+              grid-area: status;
+            }
+
+            #{$self}--title {
+              grid-area: title;
+              font-size: var(--ilo-font-size-lg);
+              line-height: var(--ilo-line-height-lg);
+              letter-spacing: var(--ilo-letter-spacing-sm);
+            }
+
+            #{$self}--area--content {
+              grid-area: content;
+              flex-flow: row wrap;
+            }
+
+            #{$self}--area--cta {
+              grid-area: cta;
+
+              @include breakpoint("md") {
+                justify-content: flex-end;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_status.scss

@@ -0,0 +1,51 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--status {
+  // Layout
+  box-sizing: border-box;
+  height: px-to-rem(35px);
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 0;
+  padding: spacing(2) spacing(3);
+  width: fit-content;
+
+  // Font styles
+  font-family: var(--ilo-fonts-display);
+  font-size: var(--ilo-font-size-sm);
+  font-weight: var(--ilo-font-weight-medium);
+  line-height: var(--ilo-line-height-xlg);
+  letter-spacing: var(--ilo-letter-spacing-sm);
+
+  // Colors and border
+  color: var(--ilo-color-blue-dark);
+  background-color: var(--ilo-color-green-light);
+  border-radius: px-to-rem(2px);
+  @include globaltransition("color background-color border-color fill");
+
+  &__type {
+    &__active {
+      background-color: var(--ilo-color-green-light);
+    }
+
+    &__info {
+      background-color: var(--ilo-color-blue-lighter);
+    }
+
+    &__alert {
+      background-color: var(--ilo-color-red);
+    }
+
+    &__subtle {
+      background-color: var(--ilo-color-red-light);
+    }
+
+    &__inactive {
+      background-color: var(--ilo-color-gray-light);
+    }
+  }
+}