@castlabs/ui 6.0.2 → 7.0.0

package/src/components/ClCard/style.variables.scss

@@ -5,22 +5,56 @@
 
 // This file adds & customizes bootstrap's cards.
 
-$card-spacing: px(20);
-$card-color-fg: $color-ci-dim;
-$card-color-bg: $color-ci-haze;
-$card-border-radius: $border-ui-radius;
-$card-border-color: $color-ci-white;
-$card-border-width: 2px;
-$card-spacing: px(20);
+$card-spacing: $spacing-medium;
 $card-spacing-tight: $spacing-small;
 
 %cl-card {
-  @include color-shadow-3d;
-
-  background-color: $card-color-bg;
-  border: 0;
-  color: $card-color-fg;
+  @extend %cl-color-night-outline;
+
+  #{'--cl-color-accent'}: $color-ci-petrol;
+  background-color: transparent;
+  background-position: center;
+  background-size: cover;
+  border: $brand-line-width solid var(--cl-color-border);
+  border-radius: $brand-border-radius;
+  color: var(--cl-color-text);
+  display: flex;
+  flex-direction: column;
   margin-top: $spacing-small;
+  overflow: hidden;
+  position: relative;
+
+  &.cl-color-sky,
+  &.cl-color-eggshell,
+  &.cl-color-clay,
+  &.cl-color-ash,
+  &.cl-color-berry,
+  &.cl-color-petrol,
+  &.cl-color-night,
+  &.cl-color-red,
+  &[style*='background-image'] {
+    border: 0;
+
+    .card-header,
+    .card-body,
+    .card-footer {
+      padding: $card-spacing;
+    }
+  }
+
+  a:not(.btn) {
+    @include typography-link(var(--cl-color-link), var(--cl-color-hover));
+
+    display: inline-block;
+  }
+
+  summary::after {
+    color: var(--cl-color-text) !important;
+  }
+
+  .btn {
+    width: 100%;
+  }
 
   &.cl-card-oversized {
     @include media-breakpoint-up(sm) {
@@ -29,36 +63,34 @@ $card-spacing-tight: $spacing-small;
     }
   }
 
-  .card-header {
-    @extend %h3;
-
-    background-color: $color-secondary;
-    border-color: $card-border-color;
-    border-width: 0;
-    color: $color-ci-white;
-    padding: $spacing-small * 0.75 $card-spacing;
-    position: relative;
+  .card-header,
+  .card-body,
+  .card-footer {
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
+    padding: calc($card-spacing - $brand-line-width);
   }
 
-  &.cl-card-primary .card-header {
-    background-color: $color-primary;
+  form.card-body {
+    margin-top: 0;
   }
 
-  &.cl-card-secondary .card-header {
-    background-color: $color-secondary;
+  summary.card-header {
+    position: relative;
   }
 
-  &.cl-card-dark .card-header {
-    background-color: $color-dark;
+  &[open] > summary.card-header {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  &.cl-card-light .card-header {
-    background-color: $color-ci-haze;
-    color: $color-ci-dim;
+  .card-header {
+    @extend %cl-h3;
   }
 
   .card-body {
-    padding: $card-spacing;
+    flex: 1 1 auto;
 
     > .container {
       margin-top: -$spacing-small;
@@ -66,96 +98,64 @@ $card-spacing-tight: $spacing-small;
   }
 
   .card-footer {
-    background-color: $card-color-bg;
-    border-color: $card-border-color;
-    border-width: $card-border-width;
-    color: $card-color-fg;
-    padding: $card-spacing;
+    line-height: 0.5em;
   }
 
   > .list-group {
-    border-color: $card-border-color;
-    border-width: $card-border-width;
+    border-color: var(--cl-color-border);
+    border-width: $brand-line-width;
   }
 
   .list-group-item {
-    background-color: $card-color-bg;
+    background-color: transparent;
   }
 
   .card-img,
   .card-img-top {
-    border-radius: $card-border-radius;
-  }
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
-  > * {
     + * {
-      border-top: $card-border-width solid $card-border-color;
-    }
-  }
-
-  &.cl-card-border {
-    // bordered cards
-    .card-footer,
-    .card-body {
-      border-bottom: 2px solid transparent;
-      border-left: 2px solid transparent;
-      border-right: 2px solid transparent;
-      border-top: 0;
+      background-color: var(--cl-color-background);
+      border-top-left-radius: $brand-border-radius;
+      border-top-right-radius: $brand-border-radius;
+      margin-top: -$brand-border-radius;
     }
 
-    &.cl-card-primary {
-      .card-footer,
-      .card-body {
-        border-color: $color-primary;
-      }
+    + * > .card-icon-link,
+    + * > .cl-card-info {
+      top: $spacing-small;
     }
+  }
 
-    &.cl-card-secondary {
-      .card-footer,
-      .card-body {
-        border-color: $color-secondary;
-      }
-    }
+  .card-header + .card-body,
+  .card-header + .card-footer,
+  .card-body + .card-body,
+  .card-body + .card-footer {
+    border-top: 0;
+    padding-top: 0;
+  }
 
-    &.cl-card-dark {
-      .card-footer,
-      .card-body {
-        border-color: $color-dark;
-      }
-    }
+  .card-icon-link,
+  .cl-card-info {
+    display: inline-block;
+    line-height: 1;
+    position: absolute;
+    right: $card-spacing;
+    top: $spacing-medium;
 
-    &.cl-card-light {
-      .card-footer,
-      .card-body {
-        border-color: $color-ci-haze;
-      }
+    i {
+      margin-top: 0.1em;
     }
-  }
-
-  .card-icon-link {
-    @include typography-links(inherit, inherit, 0);
 
-    & {
-      margin-top: -0.6em;
-      opacity: 0.5;
-      position: absolute;
-      right: $card-spacing;
-      top: 50%;
+    > * {
+      margin-left: $spacing-tiny;
     }
   }
 
-  &.cl-card-transparent {
-    background-color: transparent;
-    border-color: transparent;
-    box-shadow: none;
-
-    .card-header,
-    .card-body,
-    .card-footer {
-      background-color: transparent;
-      border-color: transparent;
-      color: $color-ci-dim;
-    }
+  &.cl-card-max {
+    height: 100%; // cards in responsive grid colums should have full height
+    margin-top: 0;
   }
 
   + .card {
@@ -163,17 +163,32 @@ $card-spacing-tight: $spacing-small;
   }
 }
 
-%cl-card-tight {
+%cl-tight {
   .card-header {
-    @extend %p-nav;
+    padding: typography-sans-baselineshift($card-spacing-tight * 0.75, px(16)) $card-spacing-tight
+      typography-sans-baselineunshift($card-spacing-tight * 0.75, px(16));
+  }
 
-    color: $color-ci-white;
-    font-size: px(18);
-    padding-bottom: $spacing-small;
-    padding-top: $spacing-small;
+  .card-body {
+    padding-top: $spacing-tiny !important;
   }
 
-  &.cl-card-light .card-header {
-    color: $color-ci-dim;
+  .card-body,
+  .card-footer {
+    padding: $card-spacing-tight;
+  }
+
+  .card-header + .card-body,
+  .card-header + .card-footer,
+  .card-body + .card-body,
+  .card-body + .card-footer {
+    padding-top: 0;
+  }
+
+  .card-header {
+    @extend %cl-h4;
+    @include cl-button-focus-outline(var(--cl-color-text));
+
+    color: var(--cl-color-text);
   }
 }

package/src/components/ClDropdown/style.scss

@@ -4,6 +4,7 @@
 ////
 
 // A custom dropdown / drawer element based on <detail> and <summary>. No JS needed.
+// Only to be used in the sidenav, as for main content we use collapsible cards in v7+.
 
 $dropdown-border: 0.125rem; // a 2px border to add so there is space for the outline
 $dropdown-color-chevron: rgba($color-ci-white, 0.5);
@@ -11,10 +12,6 @@ $dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
 $dropdown-line-height: 1.25em;
 
 .cl-dropdown {
-  #{'--element-fg-color'}: $color-text;
-  #{'--element-bg-color'}: $color-ci-haze;
-  background-color: var(--element-bg-color);
-  color: var(--element-fg-color);
   position: relative;
 
   > * {
@@ -23,43 +20,42 @@ $dropdown-line-height: 1.25em;
   }
 
   summary {
-    @extend %p-nav;
-
-    @include color-focus-outline(var(--element-fg-color));
-
-    & {
-      border: $dropdown-border solid var(--element-bg-color); // border need so that outline is not behind ::after
-      color: var(--element-fg-color);
-      font-size: px(18);
-      list-style: none;
-      margin-left: 0;
-      margin-right: 0;
-      overflow: hidden;
-      padding: $spacing-small - $dropdown-border $spacing-small - $dropdown-border;
-      padding-right: $spacing-small * 3; // for chevron
-      position: relative;
-    }
+    @extend %cl-p-nav;
+
+    @include cl-color-focus-outline(var(--cl-color-text));
+
+    border: $dropdown-border solid var(--cl-color-background); // border need so that outline is not behind ::after
+    color: var(--cl-color-text);
+    font-size: px(18);
+    list-style: none;
+    margin-left: 0;
+    margin-right: 0;
+    overflow: hidden;
+    padding: $spacing-tiny - $dropdown-border $spacing-small - $dropdown-border $spacing-small -
+      $dropdown-border;
+    padding-right: $spacing-small * 3; // for chevron
+    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: $dropdown-color-chevron-bright;
-        display: flex;
-        height: 100%;
-        justify-content: flex-start;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: $spacing-small * 2;
-      }
+      align-items: center;
+      background-color: var(--cl-color-background);
+      box-shadow: -8px 0 4px var(--cl-color-background);
+      color: $dropdown-color-chevron-bright;
+      display: flex;
+      height: 100%;
+      justify-content: flex-start;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: $spacing-small * 2;
     }
 
     > span,
     > div {
+      font-weight: 500;
+      letter-spacing: 0.025em;
       white-space: preserve-breaks;
     }
 
@@ -91,9 +87,10 @@ $dropdown-line-height: 1.25em;
 
   .cl-subentry {
     font-size: px(14);
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: 0;
-    margin-top: px(5);
+    line-height: 1.4em;
+    margin-top: 0;
     opacity: $color-hover-opacity;
   }
 
@@ -161,54 +158,38 @@ div.cl-dropdown summary {
   + .cl-nav-item {
     margin-top: $spacing-small;
   }
-
-  .cl-dropdown-primary + & {
-    background-color: $color-primary;
-  }
-
-  .cl-dropdown-secondary + & {
-    background-color: $color-secondary;
-  }
-
-  .cl-dropdown-dark + & {
-    background-color: $color-dark;
-  }
-
-  .cl-dropdown-dim + & {
-    background-color: $color-ci-dim;
-  }
 }
 
 .cl-dropdown-item {
-  @extend %p-nav;
+  @extend %cl-p-nav;
 
-  @include typography-links(var(--element-fg-color), var(--element-fg-color), 0);
-  @include color-focus-outline(var(--element-fg-color));
+  @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+  @include cl-color-focus-outline(var(--cl-color-text));
 
-  & {
-    display: block;
-    line-height: $dropdown-line-height;
-    margin-left: 0;
-    margin-right: 0;
-    padding: $spacing-tiny + $spacing-micro $spacing-small;
-    position: relative;
-    width: 100%;
-  }
+  display: block;
+  line-height: $dropdown-line-height;
+  margin-left: 0;
+  margin-right: 0;
+  padding: $spacing-tiny + $spacing-micro $spacing-small;
+  position: relative;
+  width: 100%;
 
   &:hover {
-    background-color: $color-ci-white;
+    background-color: $color-ci-red;
   }
 
   .cl-subentry {
     font-size: px(14);
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: 0;
-    margin-top: px(3);
+    margin-top: 0;
     opacity: $color-hover-opacity;
   }
 
   > span,
   > div {
+    font-weight: 500;
+    letter-spacing: 0.025em;
     white-space: preserve-breaks;
   }
 
@@ -218,87 +199,3 @@ div.cl-dropdown summary {
     top: $spacing-tiny + $spacing-micro;
   }
 }
-
-.cl-dropdown-primary {
-  #{'--element-bg-color'}: $color-primary;
-  #{'--element-fg-color'}: $color-ci-white;
-
-  summary::after {
-    color: $dropdown-color-chevron;
-  }
-
-  &[open] summary {
-    border-bottom: 2px solid $color-white-35a;
-  }
-
-  .cl-nav-separator {
-    background-color: $color-white-35a !important; // sass-lint:disable-line no-important
-  }
-
-  .cl-dropdown-item:hover:not(.active) {
-    color: $color-ci-dusk;
-  }
-}
-
-.cl-dropdown-secondary {
-  #{'--element-bg-color'}: $color-secondary;
-  #{'--element-fg-color'}: $color-ci-white;
-
-  summary::after {
-    color: $dropdown-color-chevron;
-  }
-
-  &[open] summary {
-    border-bottom: 2px solid $color-white-35a;
-  }
-
-  .cl-nav-separator {
-    background-color: $color-white-35a !important; // sass-lint:disable-line no-important
-  }
-
-  .cl-dropdown-item:hover:not(.active) {
-    color: $color-ci-dusk;
-  }
-}
-
-.cl-dropdown-dark {
-  #{'--element-bg-color'}: $color-dark;
-  #{'--element-fg-color'}: $color-ci-white;
-
-  summary::after {
-    color: $dropdown-color-chevron;
-  }
-
-  &[open] summary {
-    border-bottom: 2px solid $color-white-25a;
-  }
-
-  .cl-nav-separator {
-    background-color: $color-white-25a !important; // sass-lint:disable-line no-important
-  }
-
-  .cl-dropdown-item:hover:not(.active) {
-    background-color: $color-ci-dusk;
-  }
-}
-
-.cl-dropdown-dim {
-  #{'--element-bg-color'}: $color-ci-dim;
-  #{'--element-fg-color'}: $color-ci-white;
-
-  summary::after {
-    color: $dropdown-color-chevron;
-  }
-
-  &[open] summary {
-    border-bottom: 2px solid $color-white-25a;
-  }
-
-  .cl-nav-separator {
-    background-color: $color-white-25a !important; // sass-lint:disable-line no-important
-  }
-
-  .cl-dropdown-item:hover:not(.active) {
-    background-color: $color-ci-dusk;
-  }
-}

package/src/components/ClDropzone/style.scss

@@ -1,17 +1,17 @@
 .cl-dropzone {
-  border: px(2) dashed $form-field-border-color;
-  border-radius: px(8);
+  border: px(2) dashed $color-ci-clay;
+  border-radius: $brand-border-radius;
   cursor: pointer;
   padding: $spacing-tiny;
   text-align: center;
 
   i {
+    color: $color-ci-berry;
     margin-right: $spacing-tiny;
-    opacity: 0.5;
   }
 
   .cl-dragging & {
-    border-color: $color-ci-blue;
+    border-color: $color-ci-berry;
   }
 }
 

package/src/components/ClFooter/style.scss

@@ -6,115 +6,16 @@
 // This file defines castlabs footers.
 
 .cl-footer {
-  @extend %section-padding;
-  @extend %p-small;
+  @extend %cl-p-small;
 
-  $footer-text-color: $color-ci-smoke;
-
-  background-color: $color-ci-dusk;
-  color: $footer-text-color;
-  margin-top: 0;
-
-  .container,
-  .container-fluid {
-    @extend %container-spacing-medium;
-
-    padding-bottom: 0;
-    padding-top: 0;
-  }
+  padding-bottom: $spacing-small;
+  padding-top: $spacing-small;
 
   a {
-    @include typography-links($footer-text-color, $color-ci-haze, 0);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @extend %p-small;
-
-    color: $color-ci-blue;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
-
-  .cl-btn-outline-text {
-    @include button-outline-variant-cl($footer-text-color, transparent);
-    @include button-focus-outline($footer-text-color);
-  }
-
-  .cl-btn-primary {
-    @include button-variant(
-      $footer-text-color,
-      $footer-text-color,
-      $color-ci-dusk,
-      $footer-text-color,
-      $footer-text-color,
-      $color-ci-dusk,
-      $footer-text-color,
-      $footer-text-color,
-      $color-ci-dusk
-    );
-    @include button-focus-outline($footer-text-color);
-  }
-
-  &.cl-footer-secondary + .cl-footer {
-    $footer-text-color: $color-ci-dim;
-
-    background-color: $color-ci-night;
-    color: $footer-text-color;
-
-    a {
-      @include typography-links($footer-text-color, $color-ci-silver, 0);
-    }
-
-    .cl-btn-outline-text {
-      @include button-outline-variant-cl($footer-text-color, transparent);
-      @include button-focus-outline($footer-text-color);
-    }
-
-    .cl-btn-primary {
-      @include button-variant(
-        $footer-text-color,
-        $footer-text-color,
-        $color-ci-night,
-        $footer-text-color,
-        $footer-text-color,
-        $color-ci-night,
-        $footer-text-color,
-        $footer-text-color,
-        $color-ci-night
-      );
-      @include button-focus-outline($footer-text-color);
-    }
-  }
-
-  &.cl-footer-white,
-  &.cl-footer-secondary + .cl-footer-white {
-    background-color: $color-ci-white;
-    color: $color-ci-dim;
-
-    a {
-      @include typography-links($footer-text-color, $color-ci-silver, 0);
-    }
-
-    .cl-btn-text {
-      @extend %cl-btn-text;
-    }
-
-    .cl-btn-outline-text {
-      @extend %cl-btn-outline-text;
-    }
-
-    .cl-btn-primary {
-      @extend %cl-btn-primary;
-    }
+    @include typography-link(var(--cl-color-text), $color-ci-red, 0);
 
-    .cl-btn-outline-primary {
-      @extend %cl-btn-outline-primary;
+    &:hover {
+      text-decoration: underline;
     }
   }
 }