@castlabs/ui 6.0.2 → 7.0.0

package/src/components/ClWizard/style.scss

@@ -8,8 +8,9 @@
 .cl-wizard-steps {
   $wizard-li-spacing: $spacing-small;
   $wizard-offset-indicator: -1em;
-  $wizard-color-done: $color-ci-blue;
-  $wizard-color-todo: $color-ci-silver;
+  $wizard-color-done: $color-ci-night;
+  $wizard-color-active: $color-ci-red;
+  $wizard-color-todo: $color-ci-night;
 
   display: flex;
   flex-direction: row;
@@ -21,11 +22,11 @@
   }
 
   li {
-    @extend %p-small;
+    @extend %cl-p-small;
 
     color: $color-text;
     display: inline-block;
-    font-weight: 600;
+    font-weight: 700;
     margin: 0 $wizard-li-spacing;
     position: relative;
 
@@ -36,7 +37,7 @@
       background: linear-gradient(90deg, $wizard-color-done 50%, $wizard-color-done 50%);
       content: '';
       display: inline-block;
-      height: $typography-line-width;
+      height: $brand-line-width;
       left: -$wizard-li-spacing;
       position: absolute;
       top: $wizard-offset-indicator;
@@ -58,7 +59,7 @@
     &::after {
       // dot
       background-color: $wizard-color-done;
-      border: $typography-line-width solid $wizard-color-done;
+      border: $brand-line-width solid $wizard-color-done;
       border-radius: 100%;
       content: '';
       display: inline-block;
@@ -70,7 +71,7 @@
     }
 
     &.active {
-      color: $wizard-color-done;
+      color: $wizard-color-active;
 
       &::before {
         background: linear-gradient(90deg, $wizard-color-done 50%, $wizard-color-todo 50%);
@@ -87,7 +88,8 @@
       }
 
       &::after {
-        background-color: $color-ci-white;
+        background-color: $wizard-color-active;
+        border-color: $wizard-color-active;
       }
 
       + *,
@@ -107,7 +109,7 @@
         }
 
         &::after {
-          background-color: $color-ci-white;
+          background-color: $color-ci-eggshell;
           border-color: $wizard-color-todo;
         }
       }
@@ -129,7 +131,7 @@
         height: calc(100% + $spacing-tiny * 2);
         left: -1.3em;
         top: unset;
-        width: $typography-line-width;
+        width: $brand-line-width;
       }
 
       &:first-child::before {
@@ -137,7 +139,7 @@
         height: calc(50% + $spacing-tiny);
         left: -1.3em;
         top: unset;
-        width: $typography-line-width;
+        width: $brand-line-width;
       }
 
       &:last-child::before {
@@ -145,7 +147,7 @@
         height: calc(50% + $spacing-tiny);
         left: -1.3em;
         top: unset;
-        width: $typography-line-width;
+        width: $brand-line-width;
       }
 
       &::after {

package/src/components/form/ClField/style.scss

@@ -8,8 +8,8 @@
 
   [invalid],
   .invalid {
-    border-color: $color-ci-blue;
-    color: $color-ci-blue;
+    border-color: $color-attention;
+    // color: $color-attention;
 
     + * + .invalid-feedback,
     + .invalid-feedback {
@@ -26,13 +26,13 @@
 
   .form-label.disabled,
   .valid-feedback.disabled {
-    color: $color-ci-silver;
+    color: $color-disabled;
   }
 
   textarea[disabled],
   input[disabled],
   select[disabled] {
-    color: $form-color-disabled;
+    color: $color-disabled;
     cursor: not-allowed;
   }
 

package/src/components/form/ClFieldCheck/style.scss

@@ -7,6 +7,8 @@
 
 @import 'bootstrap/scss/forms/form-check';
 
+$form-check-background: $color-ci-eggshell;
+
 .form-check {
   margin-top: $spacing-small;
   padding-left: $spacing-medium;
@@ -15,6 +17,10 @@
     margin-top: $spacing-tiny + $spacing-micro;
   }
 
+  .form-check-label {
+    padding-top: px(1);
+  }
+
   .form-check-input {
     margin-left: -$spacing-medium;
     margin-right: $spacing-micro;
@@ -22,27 +28,24 @@
 
     &[type='checkbox'] {
       border: $form-field-border;
-      border-radius: 0;
+      border-radius: px(4);
 
       &:checked {
-        background-color: $color-ci-dim;
+        background-color: $color-selected;
         border: 0;
       }
 
       &:indeterminate {
-        background-color: transparent;
+        background-color: $color-selected;
         background-image: none;
-        border-color: $color-ci-dim;
-        box-shadow:
-          0 0 0 0.15em $color-white-100 inset,
-          0 0 0 1em $color-ci-dim inset;
+        border-color: $color-selected;
+        box-shadow: 0 0 0 px(2) $form-check-background inset !important;
 
         &:disabled,
         &.disabled {
-          border-color: $color-ci-smoke;
-          box-shadow:
-            0 0 0 0.15em $color-white-100 inset,
-            0 0 0 1em $form-field-border-color inset;
+          background-color: $color-disabled;
+          border-color: $color-disabled;
+          box-shadow: 0 0 0 px(2) $form-check-background inset !important;
         }
       }
     }
@@ -51,38 +54,40 @@
       border: $form-field-border;
 
       &:checked {
-        background-color: $color-ci-dim;
-        border-color: $color-ci-dim;
+        background-color: $color-selected;
+        background-image: none; // remove BS dot
+        border-color: $color-selected;
 
         &.disabled,
         &:disabled {
-          border-color: $color-ci-smoke;
+          border-color: $color-disabled;
         }
       }
     }
 
     &:focus {
-      @include focus-glow-embed($color-ci-dim);
+      @include cl-color-focus-outline($color-selected, 2px);
     }
 
     &.disabled,
     &:disabled {
-      background-color: $color-ci-haze;
+      background-color: $form-check-background;
+      border-color: $color-disabled;
       opacity: 1;
 
       &:checked {
-        background-color: $form-field-border-color;
+        background-color: $color-disabled;
       }
 
       ~ .form-check-label {
-        color: $form-color-disabled;
+        color: $color-disabled;
         opacity: 1;
       }
     }
   }
 
   label {
-    @extend %p-medium; // looks like regular text
+    @extend %cl-p-medium; // looks like regular text
 
     letter-spacing: 0;
     margin-top: 0;
@@ -90,7 +95,7 @@
   }
 
   .form-label + & {
-    margin-top: $spacing-tiny;
+    margin-top: $form-spacing-label-input;
   }
 
   + .form-check {

package/src/components/form/ClFieldFile/style.scss

@@ -8,9 +8,9 @@
 .cl-form {
   [type='file'] {
     @extend %form-field-box;
-    @extend %form-field-typography;
+    @extend %form-field-typography-sans;
 
-    @include form-focus-border($color-ci-silver);
+    @include form-focus;
 
     &.cl-file {
       border: 0;
@@ -22,7 +22,7 @@
     }
 
     &:focus + .cl-file-companion {
-      @include form-focus-border-embed($color-ci-silver);
+      @include form-focus-embed();
     }
 
     &[invalid]:focus + .cl-file-companion,
@@ -31,13 +31,13 @@
     }
 
     .form-label + & {
-      @extend %spacing-micro;
+      margin-top: $form-spacing-label-input;
     }
 
     &[invalid] + .cl-file-companion,
     &.invalid + .cl-file-companion {
-      border-color: $color-ci-blue;
-      color: $color-ci-blue;
+      border-color: $color-attention;
+      color: $color-attention;
 
       + * + .invalid-feedback,
       + .invalid-feedback {
@@ -51,7 +51,7 @@
     }
 
     &[disabled] + .cl-file-companion {
-      color: $form-color-disabled;
+      color: $color-disabled;
       cursor: not-allowed;
     }
   }
@@ -59,13 +59,11 @@
   .cl-file-companion {
     @extend %spacing-micro;
     @extend %form-field-box;
-    @extend %form-field-typography;
+    @extend %form-field-typography-sans;
 
-    @include form-focus-border($color-ci-silver);
+    @include form-focus;
 
-    & {
-      letter-spacing: 0;
-      text-transform: none;
-    }
+    letter-spacing: 0;
+    text-transform: none;
   }
 }

package/src/components/form/ClFieldGroup/style.scss

@@ -19,7 +19,7 @@
     }
 
     > .btn + :not(.btn) {
-      border-left-width: $form-field-border-width !important; // sass-lint:disable-line no-important
+      border-left-width: $brand-line-width !important; // sass-lint:disable-line no-important
     }
 
     > * {
@@ -37,12 +37,12 @@
 
           &:focus,
           &.invalid:focus {
-            box-shadow: -$form-field-border-width 0 0 $color-ci-silver !important; // sass-lint:disable-line no-important
+            box-shadow: -$brand-line-width 0 0 $color-focus !important; // sass-lint:disable-line no-important
           }
         }
 
         &.invalid {
-          box-shadow: -$form-field-border-width 0 0 $color-ci-blue !important; // sass-lint:disable-line no-important
+          box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
         }
       }
     }
@@ -56,10 +56,44 @@
       @extend %form-field-box;
       @extend %form-field-typography-monospace;
 
-      background-color: $color-ci-haze;
+      background-color: $color-ci-clay;
       height: 100%;
       white-space: nowrap;
       width: auto;
     }
+
+    // --- un-round left sides ------------------------------------------------------
+    .input-group-text .form-control {
+      border-bottom-left-radius: $brand-border-radius;
+      border-top-left-radius: $brand-border-radius;
+    }
+
+    .input-group-text + .form-control,
+    .form-control + .form-control,
+    .form-control + p + .form-control,
+    .form-control + p + p + .form-control {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    // --- un-round right sides ------------------------------------------------------
+    .input-group-text:first-child,
+    .form-control:first-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .form-control + .form-control,
+    .form-control + p + .form-control,
+    .form-control + p + p + .form-control {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    > .cl-last-child,
+    > :last-child {
+      border-bottom-right-radius: $brand-border-radius !important;
+      border-top-right-radius: $brand-border-radius !important;
+    }
   }
 }

package/src/components/form/ClFieldInput/style.scss

@@ -11,11 +11,11 @@
     display: inline-block;
 
     .form-label + & {
-      margin-top: $spacing-micro;
+      margin-top: $form-spacing-label-input;
     }
 
     &.cl-field-sans {
-      @extend %form-field-typography;
+      @extend %form-field-typography-sans;
     }
 
     &.cl-field-monospace {
@@ -34,9 +34,9 @@
   [type='time'],
   [type='datetime-local'] {
     @extend %form-field-box;
-    @extend %form-field-typography;
+    @extend %form-field-typography-monospace;
 
-    @include form-focus-border($color-ci-silver);
+    @include form-focus;
 
     &.form-control-plaintext {
       background-color: transparent;
@@ -44,7 +44,7 @@
     }
 
     &.cl-field-sans {
-      @extend %form-field-typography;
+      @extend %form-field-typography-sans;
     }
 
     &.cl-field-monospace {
@@ -52,11 +52,15 @@
     }
 
     &::placeholder {
-      color: $color-ci-smoke;
+      color: $color-ci-clay;
       opacity: 1;
     }
   }
 
+  textarea {
+    border-bottom-right-radius: px(5);
+  }
+
   [type='number'] {
     appearance: textfield;
 
@@ -74,14 +78,14 @@
   }
 
   [type='range'] {
-    $color-bullet: $color-ci-dim;
-    $color-bullet-focus: $color-ci-blue;
+    $color-bullet: $color-ci-night;
+    $color-bullet-focus: $color-ci-berry;
 
     appearance: none;
-    background: $color-ci-smoke;
-    border-radius: $border-ui-radius;
+    background: $color-ci-clay;
+    border-radius: $brand-border-radius;
     height: $spacing-tiny;
-    outline: none;
+    outline: 0;
     position: relative;
     top: px(-2);
     width: 100%;

package/src/components/form/ClFieldSelect/style.scss

@@ -14,13 +14,14 @@
 
   .form-select {
     @extend %form-field-box;
-    @extend %form-field-typography;
+    @extend %form-field-typography-monospace;
 
-    @include form-focus-border($color-ci-silver);
+    @include form-focus;
 
-    & {
-      border-radius: 0;
-      display: block;
+    display: block;
+
+    &.cl-field-sans {
+      @extend %form-field-typography-sans;
     }
 
     &.cl-field-monospace {

package/src/components/form/ClFieldSet/style.scss

@@ -10,7 +10,7 @@
     padding-bottom: $spacing-micro;
 
     legend {
-      @extend %p-form-label;
+      @extend %cl-p-form-label;
     }
 
     &:disabled,
@@ -30,7 +30,7 @@
       textarea,
       select {
         @extend %form-field-box;
-        @extend %form-field-typography;
+        @extend %form-field-typography-sans;
 
         cursor: not-allowed;
       }

package/src/components/form/ClForm/style.scss

@@ -34,16 +34,14 @@
   }
 
   .form-label {
-    @extend %p-form-label;
+    @extend %cl-p-form-label;
 
     .required {
-      color: $color-attention;
-      font-weight: 800;
       margin-left: $spacing-micro;
     }
 
     + * {
-      margin-top: $spacing-micro;
+      margin-top: $form-spacing-label-input;
     }
   }
 
@@ -53,7 +51,7 @@
 
   .valid-feedback,
   .invalid-feedback {
-    @extend %p-small;
+    @extend %cl-p-small;
 
     margin-left: $form-info-indent;
     margin-top: $spacing-micro;
@@ -70,17 +68,17 @@
   }
 
   .invalid-feedback {
-    color: $color-ci-blue;
+    // color: $color-attention;
     display: none;
 
     &::before {
-      color: $color-ci-blue;
+      color: $color-attention;
       content: '\f057';
     }
   }
 
   .valid-feedback.valid-feedback-none {
-    min-height: 1.5em; // line-height of %p-small
+    min-height: 1.5em; // line-height of %cl-p-small
 
     &::before {
       display: none;

package/src/components/modal/ClModal/style.scss

@@ -6,18 +6,23 @@
 // This file adds & customizes bootstrap's modals.
 
 .modal {
+  @extend %cl-color-eggshell;
   @include spacing-before(0);
 
-  & {
-    background-color: $color-black-50a;
-    display: none;
-    height: 100vh;
-    left: 0;
-    padding: 2rem 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $layer-z-modal;
+  background-color: $color-ci-backdrop;
+  display: none;
+  height: 100vh;
+  left: 0;
+  padding: 2rem 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: $layer-z-modal;
+
+  a {
+    @include typography-link(var(--cl-color-link), $color-ci-ash);
+
+    display: inline-block;
   }
 
   &.shown {
@@ -61,25 +66,38 @@
   }
 
   &-content {
-    border-radius: $border-radius;
+    background-color: var(--cl-color-background);
+    border: 0;
+    border-radius: $brand-border-radius;
     box-shadow: 0 0 4rem $color-black-50a;
+    color: var(--cl-color-text);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     max-height: calc(100vh - 4rem);
+    position: relative;
+  }
+
+  &-header,
+  &-body,
+  &-footer {
+    padding: $card-spacing;
+  }
+
+  &-header + &-body,
+  &-header + &-footer,
+  &-body + &-body,
+  &-body + &-footer {
+    border-top: 0;
+    padding-top: 0;
   }
 
   &-header {
-    @extend %h3;
+    @extend %cl-h3;
 
     align-items: center;
-    background-color: $color-ci-blue;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    color: $color-ci-white;
     display: flex;
     justify-content: space-between;
-    padding: $spacing-small * 0.75 $spacing-medium;
 
     h1,
     .cl-h1,
@@ -90,11 +108,18 @@
       color: inherit;
     }
 
-    .modal-help {
-      @include typography-links(rgba($color-ci-white, 0.5), $color-ci-white, 0);
+    .modal-help,
+    .cl-modal-help {
+      @include typography-link(var(--cl-color-text), $color-ci-ash);
+
+      display: inline-block;
+      line-height: 1;
+      position: absolute;
+      right: $card-spacing;
+      top: $spacing-medium;
 
-      & {
-        font-size: 1.5em;
+      > * {
+        margin-left: $spacing-tiny;
       }
     }
   }
@@ -102,11 +127,7 @@
   &-body {
     @include spacing-before(0);
 
-    & {
-      background-color: $color-ci-haze;
-      overflow-y: auto;
-      padding: $spacing-small $spacing-medium;
-    }
+    overflow-y: auto;
 
     > *:first-child {
       margin-top: 0;
@@ -116,15 +137,9 @@
   &-footer {
     @include spacing-before(0);
 
-    & {
-      background-color: $color-ci-haze;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-      flex-direction: row;
-      justify-content: space-between;
-      padding: $spacing-small $spacing-medium $spacing-medium;
-      text-align: center;
-    }
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: center;
 
     @include media-breakpoint-up(sm) {
       // buttons below each other on phones