@castlabs/ui 6.0.2 → 7.0.0

package/src/components/ClIconotron/style.scss

@@ -55,7 +55,7 @@
 
 .cl-footer .cl-container-iconotron,
 .cl-container-iconotron {
-  @extend %p-medium;
+  @extend %cl-p-medium;
   // @extend %spacing-small;
 
   h1,
@@ -65,7 +65,7 @@
   h5,
   h6 {
     @extend %spacing-medium;
-    @extend %h3;
+    @extend %cl-h3;
 
     letter-spacing: normal;
     text-transform: none;
@@ -76,11 +76,6 @@
   }
 
   a {
-    @include typography-links(
-      $color-text,
-      rgba($color-text, $color-hover-opacity),
-      2px,
-      $color-ci-red
-    );
+    @include typography-link($color-text, rgba($color-text, $color-hover-opacity));
   }
 }

package/src/components/ClList/style.scss

@@ -42,17 +42,17 @@ main {
     > li {
       display: inline;
 
-      &:not(:first-of-type) {
-        margin-left: 3em;
+      &:not(:last-of-type) {
+        margin-right: $spacing-large * 2;
       }
     }
   }
 
   &-alert {
-    @extend %p-medium;
+    @extend %cl-p-medium;
     @extend %spacing-small;
 
-    $alert-indent: 1.333em; // ~ $spacing-medium on %p-medium;
+    $alert-indent: 1.333em; // ~ $spacing-medium on %cl-p-medium;
 
     font-size: 0.8888em; // 18px -> 16px
     margin-left: $alert-indent;
@@ -72,15 +72,12 @@ main {
       &::before {
         @include cl-fontawesome('\f0ad'); // wrench
 
-        & {
-          color: $color-ci-silver;
-          display: inline-block;
-          margin-left: -$alert-indent;
-          position: absolute;
-          text-align: center;
-          top: 0.175em;
-          width: 1em;
-        }
+        display: inline-block;
+        margin-left: -$alert-indent;
+        position: absolute;
+        text-align: center;
+        top: 0.175em;
+        width: 1em;
       }
     }
   }

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

@@ -5,26 +5,26 @@
 
 // This file define our (bullet) lists. They use fontawesome icons as bullets.
 
-$list-indent: $spacing-small * 2.5;
+$list-indent: $spacing-large;
 
 %cl-list {
+  @include cl-accent;
+
   position: relative;
 
   li {
     list-style-type: none;
+    margin-top: $spacing-small;
 
     &::before {
       @include cl-fontawesome('\f054'); // chevron
 
-      & {
-        color: $color-ci-silver;
-        margin-left: -$list-indent;
-        position: absolute;
-        text-align: center;
-        top: inherit;
-        transform: translateY(0.2em);
-        width: $list-indent;
-      }
+      color: var(--cl-color-accent);
+      margin-left: -$list-indent;
+      margin-top: 0.175em;
+      position: absolute;
+      text-align: center;
+      width: $list-indent;
     }
 
     > ul {
@@ -32,7 +32,7 @@ $list-indent: $spacing-small * 2.5;
     }
   }
 
-  &-none {
+  &.cl-list-none {
     margin-left: 0;
 
     li {
@@ -40,46 +40,51 @@ $list-indent: $spacing-small * 2.5;
     }
   }
 
-  &-none li::before,
+  &.cl-list-none li::before,
   li.cl-list-none::before {
     display: none;
   }
 
-  &-check li::before,
+  &.cl-list-check li::before,
   li.cl-list-check::before {
     content: '\f00c';
   }
 
-  &-x li::before,
+  &.cl-list-x li::before,
   li.cl-list-x::before {
     content: '\f00d';
   }
 
-  &-plus li::before,
+  &.cl-list-plus li::before,
   li.cl-list-plus::before {
     content: '\f067';
   }
 
-  &-minus li::before,
+  &.cl-list-minus li::before,
   li.cl-list-minus::before {
     content: '\f068';
   }
 
-  &-lock li::before,
+  &.cl-list-lock li::before,
   li.cl-list-lock::before {
     content: '\f023';
   }
 
-  &-bulb li::before,
+  &.cl-list-bulb li::before,
   li.cl-list-bulb::before {
     content: '\f0eb';
   }
 
-  &-spinner li::before,
+  &.cl-list-circle li::before,
+  li.cl-list-circle::before {
+    content: '\f111';
+    transform: scale(0.85);
+  }
+
+  &.cl-list-spinner li::before,
   li.cl-list-spinner::before {
     animation: cl-spin 2s linear infinite;
     content: '\f110';
-    margin-top: $spacing-micro;
   }
 }
 
@@ -89,7 +94,7 @@ $list-dt-width: 14rem;
 
 %cl-dl {
   dt {
-    @extend %p-form-label;
+    @extend %cl-p-form-label;
 
     display: block;
   }
@@ -122,7 +127,7 @@ $list-dt-width: 14rem;
     }
   }
 
-  &.cl-dl-tight {
+  &.cl-tight {
     @include media-breakpoint-up(md) {
       dt {
         margin-top: $spacing-tiny;

package/src/components/ClPagination/style.scss

@@ -7,117 +7,80 @@
 
 @import 'bootstrap/scss/pagination';
 
-$pagination-color-bg: $color-ci-cloud;
-$pagination-color-text: $color-ci-dim;
-$pagination-color-disabled: rgba($pagination-color-text, $button-disabled-opacity);
-$pagination-color-hover: rgba($pagination-color-text, $button-hover-opacity);
-
 .pagination {
-  @extend %p-nav;
+  @extend %cl-p-nav;
+  @extend %cl-color-night-outline;
 
-  font-size: px(14);
+  font-family: $typography-monospace-font-list;
+  justify-content: center;
   margin: 0;
+  padding: 0;
 
   li {
     list-style: none;
     margin: 0;
+    padding: 0;
   }
 
-  a,
-  a.disabled,
-  button,
-  button.disabled {
-    @include typography-links($pagination-color-text, $pagination-color-text, 0);
-
-    & {
-      border-color: $pagination-color-bg;
-      border-width: 2px;
-      font-weight: 600;
-      padding: $spacing-tiny $spacing-small;
-    }
-  }
-
-  a:hover,
-  a.disabled:hover,
-  button:hover,
-  button.disabled:hover {
-    background-color: transparent;
-    background-image: none;
-    border-color: $pagination-color-bg;
-    color: $pagination-color-hover;
-  }
-
-  a:focus,
-  button:focus {
-    background-color: inherit;
-    box-shadow: none;
-    color: inherit;
+  .page-link {
+    @include cl-button;
+    @include cl-button-color;
+    @include cl-button-focus-outline(var(--cl-color-text));
+
+    border-radius: $brand-border-radius !important; // overrule BS
+    font-size: px(14);
+    font-weight: 500;
+    line-height: px(18);
+    min-width: 36px;
+    padding: $spacing-tiny;
   }
 
   .page-item {
-    &:last-of-type a,
-    &:last-of-type button {
-      border-bottom-right-radius: px(3);
-      border-top-right-radius: px(3);
+    + .page-item {
+      margin-left: $spacing-small;
     }
 
-    &:first-of-type a,
-    &:first-of-type button {
-      border-bottom-left-radius: px(3);
-      border-top-left-radius: px(3);
-    }
+    &.active {
+      @extend %cl-color-red;
 
-    + .page-item a,
-    + .page-item button {
-      border-left: 0;
+      pointer-events: none;
     }
 
-    &.active .page-link {
-      background-color: $pagination-color-bg;
-      border-color: $pagination-color-bg;
-      color: $color-ci-white;
-    }
+    &.disabled {
+      @include cl-button;
+      @include cl-button-color;
+      @extend %cl-color-disabled;
 
-    &.disabled .page-link {
-      background-color: transparent;
-      border-color: $pagination-color-bg;
-      color: $pagination-color-disabled;
+      border-radius: $brand-border-radius !important; // overrule BS
       cursor: not-allowed;
+      min-width: 36px;
+      padding: $spacing-tiny;
+      pointer-events: none;
     }
+  }
 
-    &:not(:first-child) .page-link {
-      margin-left: 0; // disable bootstrap overlap
-    }
+  @include media-breakpoint-down(md) {
+    // show less bubbles on smaller devices
+    .page-item {
+      display: none;
 
-    &.disabled {
-      border-bottom: 2px solid $pagination-color-disabled;
-      border-top: 2px solid $pagination-color-disabled;
-      color: $pagination-color-disabled;
-      padding: $spacing-tiny $spacing-small;
-
-      &:first-child {
-        border-bottom-left-radius: px(3);
-        border-left: 2px solid $pagination-color-disabled;
-        border-top-left-radius: px(3);
+      &:first-of-type,
+      &:has(+ .active),
+      &.active,
+      &:last-of-type {
+        display: list-item;
       }
+    }
 
-      &:last-child {
-        border-bottom-right-radius: px(3);
-        border-right: 2px solid $pagination-color-disabled;
-        border-top-right-radius: px(3);
-      }
+    .active + .page-item {
+      display: list-item;
+    }
 
-      + .page-item {
-        border-left: 2px solid $pagination-color-bg;
+    @include media-breakpoint-down(sm) {
+      .page-item:has(+ .active):not(:first-of-type),
+      .active + .page-item:not(:last-of-type) {
+        display: none;
       }
     }
   }
-
-  .text-center > & {
-    justify-content: center;
-  }
-
-  .text-end > & {
-    justify-content: flex-end;
-  }
 }

package/src/components/ClProgress/style.scss

@@ -8,33 +8,18 @@
 @import 'bootstrap/scss/progress';
 
 .progress {
-  background-color: $color-ci-smoke;
-  border-radius: $border-ui-radius;
-  height: px(16);
+  @extend %cl-color-sky;
+
+  background-color: $color-ci-clay;
+  border-radius: $brand-border-radius;
+  height: px(24);
   margin-top: $spacing-small;
 
   .progress-bar {
-    @extend %p-tiny;
-
-    background-color: $color-secondary;
-    color: $color-ci-white;
-
-    &.bg-primary {
-      background-color: $color-primary;
-    }
+    @extend %cl-p-label;
 
-    // &.bg-success,
-    // &.bg-danger,
-    // &.bg-warning,
-    // &.bg-info,
-    // &.bg-light,
-    &.bg-secondary {
-      background-color: $color-secondary;
-    }
-
-    &.bg-dark {
-      background-color: $color-ci-cloud;
-    }
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
   }
 
   .progress-bar-striped {

package/src/components/ClSpinner/style.scss

@@ -1,5 +1,5 @@
 .cl-spinner {
-  @extend %p-medium;
+  @extend %cl-p-medium;
   @extend %spacing-small;
 
   animation-duration: 1s;

package/src/components/ClTabs/style.scss

@@ -16,23 +16,23 @@
     text-align: center;
 
     li {
-      border-bottom: px(2) solid $color-line;
+      border-bottom: $brand-line-width solid $color-line;
       display: inline-block;
       flex-grow: 1;
-      margin: 0 px(2);
+      margin: 0 $spacing-micro;
 
       &.active {
-        border-color: $color-ci-blue;
-        color: $color-ci-blue;
+        border-color: $color-selected;
+        color: $color-selected;
 
         > * {
-          color: $color-ci-blue;
+          color: $color-selected;
         }
       }
     }
 
     label {
-      @extend %p-form-label;
+      @extend %cl-p-form-label;
 
       cursor: pointer;
       margin: 0 $spacing-micro;
@@ -45,7 +45,7 @@
       }
 
       @include media-breakpoint-down(sm) {
-        @include typography-font($typography-font-list-sans, 600, px(12), 1.2em, 0.025em);
+        @include typography-font($typography-sans-font-list, 600, px(12), 1.2em, 0.025em);
 
         display: flex;
         flex-direction: column-reverse;
@@ -75,10 +75,10 @@
   @for $i from 1 through 16 {
     .cl-tab-#{$i}:checked ~ ul {
       .cl-tab-#{$i} {
-        border-color: $color-ci-blue;
+        border-color: $color-selected;
 
         > * {
-          color: $color-ci-blue;
+          color: $color-selected;
         }
       }
     }

package/src/components/ClToggle/style.scss

@@ -5,21 +5,26 @@
 
 // This file defines castlabs toggle/checkboxes.
 
-$toggle-color-regular: $color-dark;
-
 .cl-toggle-checkbox {
+  @include cl-button-focus-outline(var(--cl-color-text));
+
   // hide checkbox but keep it tab-able
   display: inline-block;
   opacity: 0;
   position: absolute;
 
-  + .badge {
+  + .cl-badge {
     cursor: pointer;
-    padding-right: $spacing-tiny + $spacing-micro;
+    padding-left: 0.65em;
+    padding-right: 0.75em;
     text-transform: none;
+
+    &:not([class*='cl-color-']) {
+      @extend %cl-color-night;
+    }
   }
 
-  &:checked + .badge {
+  &:checked + .cl-badge {
     i:nth-of-type(1) {
       display: inline-block;
     }
@@ -29,10 +34,9 @@ $toggle-color-regular: $color-dark;
     }
   }
 
-  &:not(:checked) + .badge {
-    background-color: $color-ci-white;
-    box-shadow: 0 0 0 2px inset $toggle-color-regular;
-    color: $toggle-color-regular;
+  &:not(:checked) + .cl-badge {
+    background-color: transparent;
+    color: var(--cl-color-background);
 
     i:nth-of-type(1) {
       display: none;
@@ -41,57 +45,12 @@ $toggle-color-regular: $color-dark;
     i:nth-of-type(2) {
       display: inline-block;
     }
-
-    &.cl-badge-primary {
-      box-shadow: 0 0 0 2px inset $color-primary;
-      color: $color-primary;
-    }
-
-    &.cl-badge-secondary {
-      box-shadow: 0 0 0 2px inset $color-secondary;
-      color: $color-secondary;
-    }
-  }
-
-  &:disabled:not(:checked) + .badge {
-    background-color: $color-ci-white;
-    box-shadow: 0 0 0 2px inset $color-ci-silver;
-    color: $color-ci-silver;
-  }
-
-  &:disabled:checked + .badge {
-    background-color: $color-ci-silver;
-    color: $color-ci-white;
-  }
-
-  &:focus + .badge {
-    box-shadow: 0 0 0 $btn-focus-width rgba($toggle-color-regular, 0.5); // sass-lint:disable-line no-color-literals
-    outline: 0;
-
-    &.cl-badge-primary {
-      box-shadow: 0 0 0 $btn-focus-width rgba($color-primary, 0.5); // sass-lint:disable-line no-color-literals
-    }
-
-    &.cl-badge-secondary {
-      box-shadow: 0 0 0 $btn-focus-width rgba($color-secondary, 0.5); // sass-lint:disable-line no-color-literals
-    }
   }
 
-  &:focus:not(:checked) + .badge {
-    box-shadow:
-      0 0 0 2px inset $toggle-color-regular,
-      0 0 0 $btn-focus-width rgba($toggle-color-regular, 0.5); // sass-lint:disable-line no-color-literals
-
-    &.cl-badge-primary {
-      box-shadow:
-        0 0 0 2px inset $color-primary,
-        0 0 0 $btn-focus-width rgba($color-primary, 0.5); // sass-lint:disable-line no-color-literals
-    }
-
-    &.cl-badge-secondary {
-      box-shadow:
-        0 0 0 2px inset $color-secondary,
-        0 0 0 $btn-focus-width rgba($color-secondary, 0.5); // sass-lint:disable-line no-color-literals
-    }
+  &:disabled + .cl-badge {
+    #{'--cl-color-background'}: $color-disabled;
+    #{'--cl-color-border'}: $color-disabled;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    cursor: not-allowed;
   }
 }

package/src/components/ClTooltip/style.scss

@@ -8,39 +8,24 @@
 @import 'bootstrap/scss/tooltip';
 
 .cl-tooltip {
-  #{'--bs-tooltip-bg'}: $color-secondary;
-  filter: drop-shadow($color-shadow-3d);
+  #{'--bs-tooltip-bg'}: var(--cl-color-background);
+  #{'--bs-tooltip-color'}: var(--cl-color-text);
+  #{'--cl-color-background'}: $color-ci-clay;
+  #{'--cl-color-text'}: $color-ci-night;
   opacity: 1 !important; // sass-lint:disable-line no-important
   z-index: $layer-z-modal + 1;
 
   .tooltip-inner {
     // Bootstrap class
-    color: $color-ci-white;
+    border-radius: $brand-border-radius;
+    color: var(--cl-color-text);
     max-width: none !important; // sass-lint:disable-line no-important
+    padding-left: $spacing-tiny;
+    padding-right: $spacing-tiny;
     text-align: center;
 
     code {
-      color: $color-ci-white;
-    }
-  }
-
-  &.cl-tooltip-primary {
-    #{'--bs-tooltip-bg'}: $color-primary;
-  }
-
-  &.cl-tooltip-secondary {
-    #{'--bs-tooltip-bg'}: $color-secondary;
-  }
-
-  &.cl-tooltip-dark {
-    #{'--bs-tooltip-bg'}: $color-dark;
-  }
-
-  &.cl-tooltip-light {
-    #{'--bs-tooltip-bg'}: $color-ci-haze;
-
-    .tooltip-inner {
-      color: $color-ci-dim;
+      color: var(--cl-color-text);
     }
   }
 }