@castlabs/ui 7.2.1 → 7.3.0

package/src/styles/abstracts/fontawesome.scss

@@ -81,7 +81,7 @@
   &::after {
     @include cl-fontawesome($codepoint);
 
-    color: $color-ci-clay;
+    color: $color-ci-steel;
     font-weight: 400;
     left: 0.2em;
     position: relative;

package/src/styles/abstracts/form.scss

@@ -29,7 +29,8 @@ $form-spacing-label-input: px(2);
 
   &:disabled,
   &.disabled {
-    background-color: $color-ci-white;
+    background-color: $color-ci-haze;
+    border-color: $color-disabled;
   }
 }
 
@@ -54,11 +55,21 @@ $form-spacing-label-input: px(2);
 }
 
 @mixin cl-form-focus-embed {
-  border-color: $color-ci-berry !important;
+  border-color: $color-focus !important;
   box-shadow: none;
-  box-shadow: 0 0 0 1px $color-ci-berry inset;
-  color: var(--cl-color-text);
+  color: var(--cl-color-text) !important;
   outline: none;
+
+  &::selection {
+    background: $color-focus;
+    color: $color-ci-eggshell;
+  }
+
+  // border-color: $color-ci-berry !important;
+  // box-shadow: none;
+  // box-shadow: 0 0 0 1px $color-ci-berry inset;
+  // color: var(--cl-color-text);
+  // outline: none;
 }
 
 @mixin cl-form-focus {

package/src/styles/layout/color.scss

@@ -19,7 +19,6 @@
   @extend %cl-color-night-outline;
 }
 
-.cl-color-primary,
 .cl-color-red {
   @extend %cl-color-red;
 }
@@ -32,6 +31,10 @@
   @extend %cl-color-sky;
 }
 
+.cl-color-primary {
+  @extend %cl-color-sea;
+}
+
 .cl-color-secondary,
 .cl-color-black,
 .cl-color-text, // legacy name
@@ -117,3 +120,22 @@
 .cl-color-text-none {
   #{'--cl-color-text'}: transparent;
 }
+
+.cl-color-text-brick {
+  #{'--cl-color-text'}: $color-ci-brick;
+}
+
+.cl-color-text-sea {
+  #{'--cl-color-text'}: $color-ci-sea;
+}
+
+.cl-color-text-steel {
+  #{'--cl-color-text'}: $color-ci-steel;
+}
+
+// --- admin/secondary colors -------------------------------------------
+
+//
+// .cl-color-haze {
+//   @extend %cl-color-haze;
+// }

package/src/styles/layout/helper.scss

@@ -16,6 +16,19 @@
   border-radius: $brand-border-radius;
 }
 
+.cl-hidden {
+  visibility: hidden;
+}
+
+.cl-cursor-pointer,
+.cl-cursor-link {
+  cursor: pointer;
+}
+
+.cl-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cl-faded {
   opacity: 0.5;
 }

package/src/styles/layout/section.scss

@@ -71,9 +71,12 @@
 .cl-section-light,
 .cl-section-alternate {
   @extend %section-padding;
+  @extend %cl-color-eggshell-alternate;
 
-  border-bottom: $brand-line-width solid $color-ci-clay;
-  border-top: $brand-line-width solid $color-ci-clay;
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
+  // border-bottom: $brand-line-width solid $color-ci-clay;
+  // border-top: $brand-line-width solid $color-ci-clay;
 }
 
 main {

package/src/styles/ui.scss

@@ -107,15 +107,3 @@ html {
 body {
   font-size: 20px;
 }
-
-.cl-hidden {
-  visibility: hidden;
-}
-
-.cl-cursor-link {
-  cursor: pointer;
-}
-
-.cl-cursor-not-allowed {
-  cursor: not-allowed;
-}

package/dist/assets/DMMono/index.scss

@@ -1,41 +0,0 @@
-$cl-url-prefix: '' !default;
-$cl-url-postfix: '' !default;
-
-@mixin DMMono {
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 300;
-    src: url('#{$cl-url-prefix}DM_Mono_300.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 300;
-    src: url('#{$cl-url-prefix}DM_Mono_300italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 400;
-    src: url('#{$cl-url-prefix}DM_Mono_400.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 400;
-    src: url('#{$cl-url-prefix}DM_Mono_400italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 500;
-    src: url('#{$cl-url-prefix}DM_Mono_500.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 500;
-    src: url('#{$cl-url-prefix}DM_Mono_500italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-}

package/dist/assets/FontAwesome5/LICENSE.txt

@@ -1,34 +0,0 @@
-Font Awesome Free License
--------------------------
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
-packaged as SVG and JS file types.
-
-# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-# Attribution
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
-# Brand Icons
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**