@castlabs/ui 6.0.2 → 7.0.0

package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss

@@ -5,9 +5,16 @@
 
 // This file defines how the stuff inside the sidenav drawer looks like.
 
-$sidenav-background: $color-ci-dim;
-$sidenav-color-text: $color-ci-dusk;
-$sidenav-color-background: $color-ci-haze;
+@use 'sass:color';
+
+$sidenav-background: $color-ci-eggshell;
+$sidenav-color-text: $color-ci-night;
+$sidenav-color-background: $color-ci-eggshell;
+$sidenav-color-separator: rgba(#fff, 0.25);
+
+$sidenav-color-account: $color-ci-night;
+$sidenav-color-organization: #313644; // color.adjust($sidenav-color-account, $lightness: 5%);
+$sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness: 10%);
 
 @mixin cl-nav-fadeout($color) {
   overflow: hidden;
@@ -38,7 +45,7 @@ $sidenav-color-background: $color-ci-haze;
   // --- meta/common -----------------------------------------------------------
 
   .cl-label {
-    @extend %p-tiny;
+    @extend %cl-p-label;
     @extend %cl-grid-flex-centered;
 
     height: 2.5rem;
@@ -59,10 +66,10 @@ $sidenav-color-background: $color-ci-haze;
 
   .cl-nav-user {
     // ------------------------------------------------------------
-    @extend %p-nav;
+    @extend %cl-p-nav;
 
-    $background: $color-ci-dusk;
-    $foreground: $color-ci-white;
+    $background: $sidenav-color-account;
+    $foreground: $color-ci-eggshell;
 
     align-items: center;
     background-color: $background;
@@ -70,38 +77,34 @@ $sidenav-color-background: $color-ci-haze;
     color: $foreground;
     display: flex;
     flex-direction: row;
+    font-weight: 500;
     justify-content: space-between;
+    letter-spacing: 0.025em;
     min-height: $header-nav-height;
     padding: 0 $spacing-small;
 
     a {
-      @include typography-links($foreground, $foreground, 0);
-      @include color-focus-outline($foreground);
+      @include typography-link($foreground, $foreground, 0);
+      @include cl-color-focus-outline($foreground);
 
-      & {
-        padding-bottom: 0;
-      }
+      line-height: 1;
+      padding-bottom: 0;
 
       &:first-of-type {
         // the username
         @include cl-nav-fadeout($background);
 
-        & {
-          margin-right: $spacing-micro;
-          margin-top: -0.25em;
-          width: 100%;
-        }
+        margin-right: $spacing-micro;
+        width: 100%;
 
         &::before {
           // user icon
           @include cl-fontawesome('\f2bd');
 
-          & {
-            color: $color-ci-haze;
-            font-size: px(22);
-            line-height: 1.25;
-            margin-right: $spacing-tiny;
-          }
+          color: $color-ci-haze;
+          font-size: px(22);
+          line-height: 1;
+          margin-right: $spacing-tiny;
         }
       }
     }
@@ -115,31 +118,28 @@ $sidenav-color-background: $color-ci-haze;
   div.cl-nav-organization,
   a.cl-nav-organization,
   details.cl-nav-organization {
-    #{'--element-fg-color'}: $color-ci-white;
-    #{'--element-bg-color'}: $color-ci-dim;
-    background-color: var(--element-bg-color);
-    color: var(--element-fg-color);
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-background'}: $sidenav-color-organization;
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
     display: block;
     overflow: hidden;
     text-decoration: none;
 
     label {
-      @extend %p-tiny;
-
-      color: var(--element-fg-color);
+      @extend %cl-p-label;
     }
 
     .cl-nav-organization-name {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
-      min-height: 42px;
       overflow: hidden;
       white-space: nowrap;
 
       p {
         font-size: px(16);
-        font-weight: 600;
+        font-weight: 500;
         letter-spacing: 0.03125em;
         margin-left: $spacing-medium + $spacing-micro;
         margin-top: 0;
@@ -151,20 +151,19 @@ $sidenav-color-background: $color-ci-haze;
             // globe icon
             @include cl-fontawesome('\f0ac');
 
-            & {
-              display: block;
-              font-size: 22px;
-              left: calc(-24px - $spacing-micro);
-              position: absolute;
-            }
+            display: block;
+            font-size: 22px;
+            left: calc(-24px - $spacing-micro);
+            position: absolute;
+            top: 0.15em;
           }
         }
 
         + p {
           // parent org
-          @extend %p-small;
+          @extend %cl-p-small;
 
-          color: $color-ci-silver;
+          color: $color-ci-clay;
           letter-spacing: 0;
           line-height: 1.4; // avoids cutoff g/y
           margin-top: -2px; // avoids cutoff g/y
@@ -176,26 +175,24 @@ $sidenav-color-background: $color-ci-haze;
   details.cl-nav-organization summary,
   div.cl-nav-organization,
   a.cl-nav-organization {
-    height: $header-headline-height;
-    padding: 0 $spacing-small;
+    min-height: 3.25rem;
+    padding: 0 $spacing-small $spacing-tiny;
     position: relative;
 
     &::after {
       @include cl-fontawesome('\f078'); // chevron-down
 
-      & {
-        align-items: center;
-        background-color: var(--element-bg-color);
-        box-shadow: -8px 0 4px var(--element-bg-color);
-        color: $color-ci-silver;
-        display: flex;
-        height: calc(100% - 4px);
-        justify-content: flex-start;
-        position: absolute;
-        right: 4px;
-        top: 2px;
-        width: calc($spacing-small * 2 - 2px);
-      }
+      align-items: center;
+      background-color: var(--cl-color-background);
+      box-shadow: -8px 0 4px var(--cl-color-background);
+      color: $color-ci-clay;
+      display: flex;
+      height: calc(100% - 4px);
+      justify-content: flex-start;
+      position: absolute;
+      right: 4px;
+      top: 2px;
+      width: calc($spacing-small * 2 - 2px);
     }
 
     &.active {
@@ -206,19 +203,19 @@ $sidenav-color-background: $color-ci-haze;
   }
 
   a.cl-nav-organization {
-    @include color-focus-outline($color-ci-white);
+    @include cl-color-focus-outline($color-ci-eggshell);
   }
 
   details.cl-nav-organization {
     summary {
-      @include color-focus-outline(var(--element-fg-color));
+      @include cl-color-focus-outline(var(--cl-color-text));
     }
 
     &[open] {
       padding-bottom: $spacing-tiny;
 
       summary {
-        border-bottom: 2px solid $color-white-25a;
+        border-bottom: 2px solid $color-ci-clay;
         margin-bottom: $spacing-tiny;
       }
 
@@ -229,22 +226,15 @@ $sidenav-color-background: $color-ci-haze;
 
     .cl-nav-item,
     .cl-dropdown-item {
-      @include color-focus-outline(var(--element-fg-color));
+      @include cl-color-focus-outline(var(--cl-color-text));
 
-      & {
-        background-color: var(--element-bg-color);
-        color: var(--element-fg-color);
-        line-height: 1;
-        padding: $spacing-small;
-      }
+      line-height: 1;
+      padding: $spacing-small;
 
       &.active {
-        #{'--element-fg-color'}: $color-ci-dim;
-        #{'--element-bg-color'}: $color-ci-haze;
-
         &::after {
           // we use a block item, not a border, so content does not jump
-          background-color: $color-ci-silver;
+          background-color: $color-ci-clay;
           content: '';
           display: block;
           height: 100%;
@@ -256,7 +246,7 @@ $sidenav-color-background: $color-ci-haze;
       }
 
       &:hover:not(.active) {
-        background-color: $color-ci-dusk;
+        background-color: $color-ci-night;
       }
     }
 
@@ -267,66 +257,9 @@ $sidenav-color-background: $color-ci-haze;
     }
   }
 
-  .cl-nav-site {
-    // --- red site/product switcher ------------------------------
-    @extend %p-nav;
-
-    $background: $color-ci-red;
-    $foreground: $color-ci-white;
-
-    @include color-focus-outline($foreground);
-
-    & {
-      background-color: $background;
-      color: $foreground;
-      margin-bottom: $spacing-small;
-      margin-top: 0;
-    }
-
-    .dropdown-toggle {
-      border: 0;
-      color: $foreground;
-      font-size: px(18);
-      height: 4rem;
-      text-align: start;
-      width: 100%;
-
-      &:focus {
-        box-shadow: none;
-      }
-    }
-
-    .dropdown-menu {
-      background-color: $color-ci-red;
-      border: 0;
-      border-radius: 0;
-      box-shadow: 0 4px 0 $color-black-25a; // downward
-      width: 100%;
-    }
-
-    li {
-      display: flex;
-      flex-direction: column;
-      height: 4rem;
-      justify-content: center;
-      overflow: hidden;
-    }
-
-    .dropdown-item {
-      @extend %p-nav;
-
-      @include typography-links($color-ci-white, $color-ci-red, 0);
-
-      & {
-        padding: 0.75em $spacing-small;
-        white-space: nowrap;
-      }
-    }
-  }
-
   .cl-nav-label {
     // -----------------------------------------------------------
-    @extend %p-label;
+    @extend %cl-p-tag;
 
     color: inherit !important; // sass-lint:disable-line no-important
     margin-bottom: $spacing-tiny;
@@ -335,23 +268,24 @@ $sidenav-color-background: $color-ci-haze;
 
   .cl-nav-item {
     // ------------------------------------------------------------
-    @extend %p-nav;
+    @extend %cl-p-nav;
 
-    @include typography-links($sidenav-color-text, $sidenav-color-text, 0);
-    @include color-focus-outline($sidenav-color-text);
+    @include typography-link($sidenav-color-text, $sidenav-color-text, 0);
+    @include cl-color-focus-outline($sidenav-color-text);
 
-    & {
-      display: inline-block;
-      line-height: 1.5em;
-      padding: $spacing-tiny $spacing-small;
-      position: relative;
-      width: 100%;
-    }
+    display: inline-block;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+    line-height: 1.5em;
+    padding: $spacing-tiny $spacing-small;
+    position: relative;
+    width: 100%;
 
     .cl-nav-item-info {
-      @extend %p-small;
+      @extend %cl-p-small;
 
-      color: $color-ci-dim;
+      color: $color-ci-ash;
+      letter-spacing: 0.025em;
       line-height: 1.4em;
       margin-top: px(3);
 
@@ -360,30 +294,27 @@ $sidenav-color-background: $color-ci-haze;
       }
     }
 
-    > [class^='cl-badge'] {
+    > .cl-badge {
       position: absolute;
       right: $spacing-small;
-      top: $spacing-tiny + $spacing-micro;
+      top: $spacing-tiny;
     }
 
-    &:hover:not(.active) {
-      background-color: $color-ci-white;
+    &:hover {
+      background-color: var(--cl-color-highlight);
     }
 
     &.active {
-      @include typography-links($color-ci-night, $color-ci-night, 0);
-
-      & {
-        background-color: $color-ci-white;
-        color: $color-ci-red;
-        display: inline-block;
-        padding: $spacing-tiny $spacing-small;
-        position: relative;
-      }
+      @include typography-link($color-ci-red, $color-ci-red, 0);
+
+      // color: $color-ci-red;
+      display: inline-block;
+      padding: $spacing-tiny $spacing-small;
+      position: relative;
 
       &::after {
         // we use a block item, not a border, so content does not jump
-        background-color: $color-ci-silver;
+        background-color: $color-ci-red;
         content: '';
         display: block;
         height: 100%;
@@ -401,40 +332,42 @@ $sidenav-color-background: $color-ci-haze;
     }
   }
 
-  .cl-dropdown-dim,
-  .cl-dropdown-dark {
-    .active {
-      background-color: $color-ci-haze;
-      color: $color-ci-dim;
+  .cl-dropdown {
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-background'}: $sidenav-color-app;
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
 
-      &::after {
-        // we use a block item, not a border, so content does not jump
-        background-color: $color-ci-silver;
-        content: '';
-        display: block;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: $bar-ui-width;
+    summary {
+      border: 0;
+      padding-left: $spacing-small;
+    }
+
+    &[open] {
+      summary {
+        border-bottom: 1px solid $sidenav-color-separator;
       }
     }
-  }
 
-  .cl-dropdown + .cl-nav-item {
-    margin-top: $spacing-small;
+    + .cl-nav-item {
+      margin-top: $spacing-small;
+    }
+
+    + .cl-dropdown-arrow {
+      background-color: $sidenav-color-app;
+    }
   }
 
   .cl-nav-separator {
     // -------------------------------------------------------
-    background-color: $color-ci-smoke;
+    background-color: $color-ci-clay;
     border: 0;
-    height: px(2);
+    height: $brand-line-width;
     margin: $spacing-small 0;
     opacity: 1;
 
     &:not([size]) {
-      height: px(2);
+      height: $brand-line-width;
     }
   }
 }
@@ -444,11 +377,9 @@ $sidenav-color-background: $color-ci-haze;
   span:first-of-type::after {
     @include cl-fontawesome('\f023');
 
-    & {
-      margin-left: $spacing-tiny;
-      opacity: 0.5;
-      top: inherit;
-    }
+    margin-left: $spacing-tiny;
+    opacity: 0.5;
+    top: inherit;
   }
 }
 
@@ -456,6 +387,7 @@ $sidenav-color-background: $color-ci-haze;
   opacity: 0.5;
 
   &:hover {
+    background-color: transparent;
     cursor: not-allowed;
   }
 }

package/src/components/navigation/ClNavSide/ClNavSideMenu/style.scss

@@ -11,29 +11,6 @@
     padding: $spacing-tiny 0;
   }
 
-  &-label {
-    @extend %p-tiny;
-
-    padding: $spacing-small;
-
-    &[data-bs-toggle] {
-      // small triangles for section labels
-      cursor: pointer;
-
-      &::after {
-        content: '\f0d7';
-        display: inline-block;
-        font-family: 'Font Awesome 5 Free';
-        font-weight: 900;
-        margin-left: $spacing-micro;
-      }
-
-      &.collapsed::after {
-        content: '\f0da';
-      }
-    }
-  }
-
   ul {
     list-style: none;
     margin: 0;

package/src/components/navigation/ClNavSide/style.scss

@@ -9,31 +9,25 @@
 $sidenav-width-open: 18rem;
 $sidenav-width-closed: 0;
 $sidenav-z-index: $layer-z-sidenav;
-$sidenav-backdrop: $color-black-40a;
 $sidenav-breakpoint: xl;
 
 .cl-nav-side {
   @include spacing-before(0);
 
-  & {
-    box-shadow: $color-shadow-3d;
-    left: 0;
-    position: fixed;
-    top: 0;
-    z-index: $sidenav-z-index;
-  }
+  box-shadow: 1px 0 0 $color-ci-night;
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: $sidenav-z-index;
 
   .cl-nav-drawer {
     @include spacing-before(0);
 
-    & {
-      background-color: $color-ci-haze;
-      height: 100vh;
-      overflow-x: hidden;
-      position: relative;
-      width: $sidenav-width-closed;
-      z-index: $sidenav-z-index + 1;
-    }
+    height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+    width: $sidenav-width-closed;
+    z-index: $sidenav-z-index + 1;
 
     > div {
       height: 100%;
@@ -55,7 +49,7 @@ $sidenav-breakpoint: xl;
 
     @include media-breakpoint-down($sidenav-breakpoint) {
       ~ nav .cl-nav-backdrop {
-        background-color: $sidenav-backdrop;
+        background-color: $color-ci-backdrop;
         width: 100%; // show on small screens where sidenav overlaps content
       }
     }