@castlabs/ui 6.0.2 → 7.0.0

package/src/components/ClBadge/style.scss

@@ -7,27 +7,25 @@
 
 @import 'style.variables';
 
-.badge, // bs badge class is deprecated
-[class^='cl-badge'],
-[class*=' cl-badge'] {
-  &:not(.cl-badge-derived) {
-    @extend %cl-badge;
+@mixin cl-unlink {
+  text-decoration: none;
+
+  &:hover {
+    color: var(--cl-color-text);
+    text-decoration: underline;
   }
 }
 
-a[class^='cl-badge'],
-a[class*=' cl-badge'] {
-  @include typography-links($badge-color-fg, rgba($badge-color-fg, $color-hover-opacity), 0);
+.badge, // bs badge class is deprecated
+.cl-badge {
+  @extend %cl-badge;
+}
 
-  display: inline-block !important;
+a.badge,
+a.cl-badge {
+  @include cl-unlink;
 }
 
 .cl-badge-derived {
   @extend %cl-badge-derived;
-
-  + .badge, // bs badge class is deprecated
-  + [class^='cl-badge'],
-  + [class*=' cl-badge'] {
-    margin-left: -1.66em;
-  }
 }

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

@@ -4,58 +4,64 @@ $badge-padding: px(4) px(8);
 $badge-min-height: 1.642857143em; // 23px @ 14pt
 $badge-baseline-shift: 0.055555em; // 1px @ 14pt
 
+@mixin cl-badge-small {
+  font-size: px(12);
+  font-weight: 500;
+  padding: px(2) px(7);
+}
+
 %cl-badge {
-  @extend %cl-font-condensed;
+  @extend %cl-p-tag;
 
-  background-color: $badge-color-bg;
-  border-radius: 2rem;
-  color: $badge-color-fg;
+  background-color: var(--cl-color-background);
+  border: $brand-line-width solid var(--cl-color-border);
+  border-radius: $brand-border-radius;
+  color: var(--cl-color-text);
   display: inline-block;
-  font-size: 0.77777778em; // 18px->14px
-  font-weight: 650;
+  letter-spacing: 0;
   line-height: 1em;
-  min-height: $badge-min-height;
-  padding: (0.2857em + $badge-baseline-shift) 0.5714em (0.2857em - $badge-baseline-shift); // 4px 8px @ 14px
+  padding: px(5) px(16);
+  text-transform: uppercase;
   white-space: nowrap;
 
-  &[class*='-text'],
-  &[class*='-dark'] {
-    background-color: $badge-color-bg;
-  }
-
-  &[class*='-light'] {
-    background-color: $color-ci-smoke;
-    color: $color-ci-dim;
+  &:not([class*='cl-color-']) {
+    #{'--cl-color-background'}: $color-ci-clay;
+    #{'--cl-color-border'}: $color-ci-clay;
+    #{'--cl-color-text'}: $color-ci-night;
+    #{'--cl-color-accent'}: $color-ci-night;
   }
 
-  &[class*='-primary'] {
-    background-color: $color-primary;
+  &.cl-badge-sm {
+    @include cl-badge-small;
   }
 
-  &[class*='-secondary'] {
-    background-color: $color-secondary;
+  i {
+    line-height: 0.75em;
+    margin-right: $spacing-micro;
   }
 }
 
 %cl-badge-derived {
-  $badge-color: $color-ci-silver;
+  @extend %cl-badge;
 
-  background-color: transparent;
-  border-radius: 2rem;
-  box-shadow: 0 0 0 2px $badge-color inset;
-  color: $badge-color;
-  display: inline-block;
-  font-size: 0.77777778em; // 18px->14px
-  line-height: 1em;
-  margin-right: 0 !important;
-  min-height: $badge-min-height;
-  padding: (0.2857em + $badge-baseline-shift) 0.5714em (0.2857em - $badge-baseline-shift); // 4px 8px @ 14px
-  white-space: nowrap;
+  content: ' ';
+  padding-left: $spacing-tiny;
+  padding-right: 0;
+  width: 3em;
+
+  + * {
+    margin-left: -1.75em;
+  }
+
+  &.cl-badge-sm + * {
+    margin-left: -2em;
+  }
 
   &::before {
     @include cl-fontawesome('\f064');
 
-    color: $badge-color !important;
+    font-size: 0.95em;
+    line-height: 0.75em;
     position: relative;
     top: 0;
     transform: scale(0.75) scaleY(-1) translate(-0.4em, -0.025em);

package/src/components/ClButton/style.scss

@@ -5,210 +5,59 @@
 
 // This file adds & customizes bootstrap's buttons.
 
-@import 'bootstrap/scss/buttons';
-
-$button-disabled-color: $color-ci-silver;
-
-// custom outline colors for bootstrap buttons
-@mixin button-outline-variant-cl($color, $background) {
-  @include button-variant(
-    // background - border - text
-    $background,
-    $color,
-    $color,
-    $background,
-    $color,
-    $color,
-    $background,
-    $color,
-    $color
-  );
-
-  // our focus (tab'ed) buttons are outline
-  .btn-check:focus + &,
-  &:focus {
-    background-color: $background;
-    border-color: $color;
-    color: $color;
-  }
-
-  // our active (mouse-down) buttons don't look different
-  .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
-  &.active,
-  .show > &.dropdown-toggle {
-    background-color: $background;
-    border-color: $color;
-    color: $color;
-  }
-}
+// @import 'bootstrap/scss/buttons';
 
 .btn {
-  @extend %p-nav;
-
-  @include button-variant(
-    transparent,
-    transparent,
-    $color-text,
-    transparent,
-    transparent,
-    $color-text,
-    transparent,
-    transparent,
-    $color-text
-  );
-  @include button-focus-outline($color-text);
-
-  & {
-    background-image: none;
-    border-width: 2px;
-    font-weight: 600; // repeat as @include overrides
-    line-height: 1em; // repeat as @include overrides
-    min-width: 8em;
-    opacity: 1;
-    overflow: hidden;
-    padding: px(12) px(18);
-    transition: opacity 0.15s;
-    white-space: nowrap;
-  }
+  @extend %cl-p-nav;
+  @include cl-button;
+  @include cl-button-color;
+  @include cl-button-focus-outline(var(--cl-color-text));
 
   &.cl-btn-icon {
-    min-width: 0;
-  }
-
-  &:hover {
-    opacity: $button-hover-opacity;
+    min-width: 2.1em;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   &:disabled,
   &.disabled {
-    background-color: transparent !important; // sass-lint:disable-line no-important
-    border-color: transparent !important; // sass-lint:disable-line no-important
-    color: $button-disabled-color !important; // sass-lint:disable-line no-important
+    background-color: transparent; // sass-lint:disable-line no-important
+    border-color: $color-disabled; // sass-lint:disable-line no-important
+    color: $color-disabled; // sass-lint:disable-line no-important
     cursor: not-allowed;
     opacity: 1 !important; // sass-lint:disable-line no-important
     pointer-events: initial;
   }
 
-  i {
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
   &-xs {
     font-size: 0.5em;
   }
 
   &.btn-sm {
     font-size: px(14);
-    line-height: px(14);
-    min-width: 0;
-    padding: $spacing-tiny $spacing-small;
-
-    .fa {
-      line-height: px(14);
-    }
-  }
-}
-
-%cl-btn-text,
-.cl-btn-text {
-  @include button-variant(
-    $color-ci-silver,
-    $color-ci-silver,
-    $color-ci-white,
-    $color-ci-silver,
-    $color-ci-silver,
-    $color-ci-white,
-    $color-ci-silver,
-    $color-ci-silver,
-    $color-ci-white
-  );
-  @include button-focus-outline($color-ci-silver);
-
-  &:disabled,
-  &.disabled {
-    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
-  }
-}
-
-%cl-btn-primary,
-.cl-btn-primary {
-  @include button-variant(
-    $color-primary,
-    $color-primary,
-    $color-ci-white,
-    $color-primary,
-    $color-primary,
-    $color-ci-white,
-    $color-primary,
-    $color-primary,
-    $color-ci-white
-  );
-  @include button-focus-outline($color-primary);
-
-  &:disabled,
-  &.disabled {
-    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
-  }
-}
-
-%cl-btn-outline-primary,
-.cl-btn-outline-primary {
-  @include button-outline-variant-cl($color-primary, transparent);
-  @include button-focus-outline($color-primary);
-
-  &:disabled,
-  &.disabled {
-    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
-  }
-}
-
-%cl-btn-outline-text,
-.cl-btn-outline-text {
-  @include button-outline-variant-cl($color-text, transparent);
-  @include button-focus-outline($color-text);
-
-  &:disabled,
-  &.disabled {
-    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
-  }
-}
-
-.cl-btn-outline-blue {
-  @include button-outline-variant-cl($color-ci-blue, transparent);
-  @include button-focus-outline($color-ci-blue);
-
-  &:disabled,
-  &.disabled {
-    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+    font-weight: 700; // repeat as @include overrides
+    line-height: 1em; // repeat as @include overrides
+    opacity: 1;
+    overflow: hidden;
+    padding: typography-sans-baselineshift($spacing-tiny, px(14)) $spacing-medium
+      typography-sans-baselineunshift($spacing-tiny, px(14));
   }
 }
 
 .cl-btn-quickaction {
   @extend %cl-a-btn;
 
-  @include typography-links($color-text, $color-text, 0);
+  @include typography-link($color-text, $color-ci-red, 0);
 
-  & {
-    border: 0;
-    line-height: 1;
-    margin-left: $spacing-tiny;
-    min-width: 0;
-    padding: 0;
-  }
+  border: 0;
+  font-weight: 500;
+  line-height: 1;
+  margin-left: $spacing-tiny;
+  min-width: 0;
+  padding: 0;
 
   &:not(:hover) {
-    color: $color-ci-silver;
+    opacity: 0.25;
   }
 }
 
@@ -219,28 +68,21 @@ $button-disabled-color: $color-ci-silver;
 
 .cl-btn-ghost {
   // an accessible, invisible button that can trigger clicks
-  @include button-focus-outline($color-text);
-
-  & {
-    background: transparent;
-    border: 0;
-    color: unset;
-    cursor: pointer;
-    font-size: unset;
-    font-style: unset;
-    font-weight: unset;
-    letter-spacing: unset;
-    margin: 0;
-    min-width: unset;
-    padding: 0;
-    text-transform: unset;
-    width: unset;
-  }
-}
-
-.btn,
-.btn:hover {
-  background-image: none; // remove our link underlines
+  @include cl-button-focus-outline($color-text);
+
+  background: transparent;
+  border: 0;
+  color: unset;
+  cursor: pointer;
+  font-size: unset;
+  font-style: unset;
+  font-weight: unset;
+  letter-spacing: unset;
+  margin: 0;
+  min-width: unset;
+  padding: 0;
+  text-transform: unset;
+  width: unset;
 }
 
 .box {
@@ -253,48 +95,6 @@ $button-disabled-color: $color-ci-silver;
   }
 }
 
-.cl-section-primary {
-  .cl-btn-outline-text {
-    @include button-outline-variant-cl($color-ci-white, transparent);
-    @include button-focus-outline($color-ci-white);
-  }
-
-  .cl-btn-primary {
-    @include button-variant(
-      $color-ci-white,
-      $color-ci-white,
-      $color-primary,
-      $color-ci-white,
-      $color-ci-white,
-      $color-primary,
-      $color-ci-white,
-      $color-ci-white,
-      $color-primary
-    );
-    @include button-focus-outline($color-ci-white);
-  }
-}
-
-.btn.cl-btn-micro {
-  @extend %p-tiny;
-
-  color: inherit;
-  font-size: px(10);
-  letter-spacing: 0.5px;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0 $spacing-micro;
-
-  &.cl-btn-primary,
-  &.cl-btn-text {
-    color: $color-white-100;
-  }
-
-  &.cl-btn-outline-primary {
-    color: $color-primary;
-  }
-}
-
 // --- spinner buttons ---------------------------------------------------------
 
 @keyframes cl-btn-spinner-spin {
@@ -318,20 +118,18 @@ $button-disabled-color: $color-ci-silver;
   &::before {
     @include cl-fontawesome('\f110');
 
-    & {
-      animation: cl-btn-spinner-spin 2s linear infinite;
-      display: block;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 50%;
-    }
+    animation: cl-btn-spinner-spin 2s linear infinite;
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
   }
 }
 
 // --- responsive tweaks -------------------------------------------------------
 
-.btn:not(.cl-btn-micro, .cl-btn-quickaction) {
+.btn:not(.cl-btn-quickaction) {
   @include media-breakpoint-down(sm) {
     width: 100%;
   }

package/src/components/ClCard/style.scss

@@ -5,19 +5,21 @@
 
 // This file adds & customizes bootstrap's cards.
 
-@import 'bootstrap/scss/card';
 @import 'style.variables';
 
 .card {
   @extend %cl-card;
-}
 
-.card.cl-card-max {
-  height: 100%; // cards in responsive grid colums should have full height
-  margin-top: 0;
+  &[class^='col-'] {
+    padding: 0;
+  }
 }
 
 details.card {
+  > * {
+    border: 0 !important;
+  }
+
   // collapsible cards
   summary {
     list-style: none;
@@ -25,22 +27,20 @@ details.card {
     &::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: 100%;
-        justify-content: flex-start;
-        position: absolute;
-        right: $card-spacing;
-        top: 0;
-      }
+      align-items: center;
+      background-color: var(--cl-color-background);
+      box-shadow: -8px 0 4px var(--cl-color-background);
+      color: $color-ci-silver;
+      display: flex;
+      height: 100%;
+      justify-content: flex-start;
+      position: absolute;
+      right: $card-spacing;
+      top: 0;
     }
 
     &:focus {
-      @include color-focus-outline;
+      @include cl-color-focus-outline;
     }
   }
 
@@ -56,6 +56,6 @@ details.card {
   }
 }
 
-.card.cl-card-tight {
-  @extend %cl-card-tight;
+.card.cl-tight {
+  @extend %cl-tight;
 }