@castlabs/ui 7.3.0 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/src/components/ClAlert/style.scss

@@ -111,6 +111,7 @@
 
       background-color: transparent;
       border: 0;
+      border-radius: $brand-border-radius-minor;
       display: inline-block;
       font-weight: 500;
       line-height: 1;

package/src/components/ClButton/style.scss

@@ -49,14 +49,17 @@
   }
 }
 
+a.btn {
+  text-decoration: none !important;
+}
+
 .cl-btn-quickaction {
   @extend %cl-a-btn;
 
-  @include typography-link($color-text, $color-ci-red, 0);
-  @include cl-color-focus-outline(var(--cl-color-focus), 2px);
+  @include typography-link-invisible;
 
+  background-color: transparent;
   border: 0;
-  border-radius: 0;
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;

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

@@ -53,7 +53,7 @@ $card-spacing-tight: $spacing-small;
   }
 
   a:not(.btn) {
-    @include typography-link(var(--cl-color-link), var(--cl-color-hover));
+    @include typography-link;
 
     display: inline-block;
   }

package/src/components/ClDropdown/style.scss

@@ -94,7 +94,6 @@ $dropdown-line-height: 1.25;
     letter-spacing: 0;
     line-height: 1.4;
     margin-top: 0;
-    opacity: $color-hover-opacity;
   }
 
   &-tiny {
@@ -166,7 +165,7 @@ div.cl-dropdown summary {
 .cl-dropdown-item {
   @extend %cl-p-nav;
 
-  @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+  @include typography-link(var(--cl-color-text), var(--cl-color-text), transparent, transparent);
   @include cl-color-focus-outline;
 
   display: block;
@@ -186,7 +185,6 @@ div.cl-dropdown summary {
     font-weight: 500;
     letter-spacing: 0;
     margin-top: 0;
-    opacity: $color-hover-opacity;
   }
 
   > span,

package/src/components/ClFooter/style.scss

@@ -14,8 +14,7 @@
   padding-top: $spacing-small;
 
   a {
-    @include typography-link(var(--cl-color-text), $color-ci-red, 0);
-    @include cl-color-focus-outline(var(--cl-color-focus), 2px);
+    @include typography-link-invisible;
 
     &:hover {
       text-decoration: underline;

package/src/components/ClIconotron/style.scss

@@ -78,6 +78,6 @@
   }
 
   a {
-    @include typography-link($color-text, rgba($color-text, $color-hover-opacity));
+    @include typography-link;
   }
 }

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

@@ -20,6 +20,7 @@
       margin: 0;
       overflow: hidden;
       padding: 0;
+      position: absolute;
       width: 0;
     }
 
@@ -62,11 +63,12 @@
   .cl-file-companion {
     @extend %spacing-micro;
     @extend %form-field-box;
-    @extend %form-field-typography-sans;
+    @extend %form-field-typography-monospace;
 
     @include cl-form-focus;
 
     letter-spacing: 0;
+    line-height: 1.6;
     text-transform: none;
   }
 }

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

@@ -60,7 +60,7 @@
       @extend %form-field-box;
       @extend %form-field-typography-monospace;
 
-      background-color: $color-ci-clay;
+      background-color: $color-ci-haze;
       height: 100%;
       line-height: inherit;
       white-space: nowrap;

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

@@ -23,7 +23,7 @@
   z-index: $layer-z-modal;
 
   a {
-    @include typography-link(var(--cl-color-link), $color-ci-ash);
+    @include typography-link;
 
     display: inline-block;
   }
@@ -113,7 +113,7 @@
 
     .modal-help,
     .cl-modal-help {
-      @include typography-link(var(--cl-color-text), $color-ci-ash);
+      @include typography-link-invisible;
 
       display: inline-block;
       line-height: 1;

package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss

@@ -84,7 +84,12 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     padding: 0 $spacing-small;
 
     a {
-      @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+      @include typography-link(
+        var(--cl-color-text),
+        var(--cl-color-text),
+        transparent,
+        transparent
+      );
       @include cl-color-focus-outline(var(--cl-color-focus), 0);
 
       line-height: 1;
@@ -265,7 +270,10 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     @extend %cl-p-label;
 
     color: var(--cl-color-accent);
+    font-family: $typography-monospace-font-list;
+    letter-spacing: 0.05em;
     margin: $spacing-medium $spacing-small $spacing-tiny;
+    text-transform: uppercase;
 
     hr + & {
       margin-top: $spacing-tiny;
@@ -276,7 +284,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     // ------------------------------------------------------------
     @extend %cl-p-nav;
 
-    @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+    @include typography-link(var(--cl-color-text), var(--cl-color-text), transparent, transparent);
     @include cl-color-focus-outline;
 
     display: inline-block;
@@ -311,7 +319,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     }
 
     &.active {
-      @include typography-link($color-ci-red, $color-ci-red, 0);
+      @include typography-link($color-ci-red, $color-ci-red, transparent, transparent);
 
       display: inline-block;
       padding: $spacing-tiny $spacing-small;

package/src/components/navigation/ClNavTop/style.scss

@@ -72,6 +72,7 @@ $sidenav-z-index: $layer-z-sidenav;
   .cl-logo {
     align-items: center;
     display: flex;
+    font-size: $header-nav-height * 0.5; // logo scales 2x
 
     span {
       @extend %cl-p-label;
@@ -201,16 +202,10 @@ $navbar-item-spacing: $spacing-medium;
     line-height: 1;
     margin: 0;
     padding: 0.5em 0;
-
-    .cl-asset-logo,
-    .cl-asset-logo-eggshell {
-      height: 2.5 * 1em;
-      width: 2.5 * 2.95em;
-    }
   }
 
   .nav-link {
-    @include typography-link($color-text, $color-ci-night, 0);
+    @include typography-link(var(--cl-color-text), var(--cl-color-text), transparent, transparent);
 
     display: block;
     font-weight: 500;

package/src/components/section/ClSectionHeadline/style.scss

@@ -3,7 +3,7 @@
 .cl-section-dark .cl-headline-help-icon,
 .cl-section-primary .cl-headline-help-icon,
 .cl-section-secondary .cl-headline-help-icon {
-  @include typography-link(rgba($color-ci-white, 0.5), $color-ci-white, 0);
+  @include typography-link-invisible;
 
   font-size: 0.5em;
   line-height: 1;

package/src/components/table/ClTableCel/ID/style.scss

@@ -7,10 +7,9 @@
     @include typography-font(
       $typography-monospace-font-list,
       400,
-      px(15),
+      px(14),
       $table-lineheight * 1.066666667,
-      0.025em,
-      80%
+      0.025em
     );
 
     overflow-wrap: unset;

package/src/components/table/ClTableCel/Links/style.scss

@@ -22,9 +22,9 @@
     right: 0;
     white-space: nowrap;
 
-    a:not(.cl-a-primary) {
-      @extend %cl-a-text;
-    }
+    // a {
+    //   @extend %cl-a-text;
+    // }
 
     :not(:first-child) {
       margin-left: $spacing-tiny;

package/src/components/text/ClCopy/style.scss

@@ -14,14 +14,15 @@
   &::after {
     font-size: 0.75em;
   }
+
+  &:hover,
+  &:hover::after,
+  &:hover * {
+    color: $color-hover;
+    text-decoration-color: $color-hover;
+  }
 }
 
 .cl-copy-text {
-  @extend %cl-a-text;
-
   text-decoration: underline;
 }
-
-.cl-copy-transparent {
-  @extend %cl-a-transparent;
-}

package/src/components/text/ClHashtag/style.scss

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f292');
 
+    line-height: 0.5;
     margin-right: 0.2em;
     top: 0.015em;
   }

package/src/components/text/ClLinkExternal/style.scss

@@ -30,40 +30,45 @@ main a {
 //   @extend %cl-a-secondary;
 // }
 
-.cl-a-text a:not(.btn),
-.cl-a-primary a.cl-a-text:not(.btn),
-.cl-a-secondary a.cl-a-text:not(.btn),
-.cl-a-transparent a.cl-a-text:not(.btn),
-a.cl-a-text:not(.btn) {
-  @extend %cl-a-text;
-}
+// .cl-a-text a:not(.btn),
+// .cl-a-primary a.cl-a-text:not(.btn),
+// .cl-a-secondary a.cl-a-text:not(.btn),
+// .cl-a-transparent a.cl-a-text:not(.btn),
+// a.cl-a-text:not(.btn) {
+//   @extend %cl-a-text;
+// }
 
-.cl-a-transparent a:not(.btn),
-.cl-a-primary a.cl-a-transparent:not(.btn),
-.cl-a-secondary a.cl-a-transparent:not(.btn),
-.cl-a-text a.cl-a-transparent:not(.btn),
-a.cl-a-transparent:not(.btn) {
-  @extend %cl-a-transparent;
-}
+// .cl-a-transparent a:not(.btn),
+// .cl-a-primary a.cl-a-transparent:not(.btn),
+// .cl-a-secondary a.cl-a-transparent:not(.btn),
+// .cl-a-text a.cl-a-transparent:not(.btn),
+// a.cl-a-transparent:not(.btn) {
+//   @extend %cl-a-transparent;
+// }
 
-.cl-a-none a:not(.btn),
-.cl-a-primary a.cl-a-none:not(.btn),
-.cl-a-secondary a.cl-a-none:not(.btn),
-.cl-a-text a.cl-a-none:not(.btn),
-a.cl-a-none:not(.btn) {
-  @extend %cl-a-none;
-}
+// .cl-a-none a:not(.btn),
+// .cl-a-primary a.cl-a-none:not(.btn),
+// .cl-a-secondary a.cl-a-none:not(.btn),
+// .cl-a-text a.cl-a-none:not(.btn),
+// a.cl-a-none:not(.btn) {
+//   @extend %cl-a-none;
+// }
 
 .cl-a-btn {
-  // a link that is more an embedded button
+  // a link that is more an embedded button, e.g. in table actions
   @extend %cl-a-btn;
 }
 
+.cl-a-primary {
+  // primary link among many, usually table actions
+  font-weight: 700;
+}
+
 .cl-a-quickaction {
   @extend %cl-a-btn;
-  @extend %cl-a-transparent;
   @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 
+  background-color: transparent;
   border-radius: 0;
   margin-left: $spacing-tiny;
   text-decoration: none;
@@ -90,7 +95,7 @@ a.cl-a-none:not(.btn) {
 
 .cl-a-lock,
 .cl-span-lock {
-  @include cl-fontawesome-before('\f023', -0.15em, 0.8em, -0.15em);
+  @include cl-fontawesome-before('\f023', $color-ci-steel, -0.15em, 0.8em, -0.15em);
 
   &::before {
     font-weight: 900;
@@ -99,7 +104,7 @@ a.cl-a-none:not(.btn) {
 
 .cl-a-spinner,
 .cl-span-spinner {
-  @include cl-fontawesome-before('\f110', -0.2em, 0.8em, -0.1em);
+  @include cl-fontawesome-before('\f110', $color-ci-steel, -0.2em, 0.8em, -0.1em);
 
   &::before {
     animation: cl-a-spin 2s linear infinite;
@@ -108,44 +113,47 @@ a.cl-a-none:not(.btn) {
   }
 }
 
+span.cl-a-disabled,
+span.cl-span-disabled,
 span.cl-a-lock,
 span.cl-span-lock,
 span.cl-a-spinner,
 span.cl-span-spinner {
   @extend %cl-a; // make it look like a link
 
-  pointer-events: none; // disable hover effects
-  text-decoration: underline;
+  &:hover {
+    cursor: not-allowed;
+  }
 }
 
 .cl-a-pdf {
-  @include cl-fontawesome-before('\f1c1', 0.1em);
+  @include cl-fontawesome-before('\f1c1', $color-ci-steel, 0.1em);
 }
 
 .cl-a-image {
-  @include cl-fontawesome-before('\f1c5', 0.1em);
+  @include cl-fontawesome-before('\f1c5', $color-ci-steel, 0.1em);
 }
 
 .cl-a-video {
-  @include cl-fontawesome-before('\f1c8', 0.1em);
+  @include cl-fontawesome-before('\f1c8', $color-ci-steel, 0.1em);
 }
 
 .cl-a-file {
-  @include cl-fontawesome-before('\f15c', 0.1em);
+  @include cl-fontawesome-before('\f15c', $color-ci-steel, 0.1em);
 }
 
 .cl-a-zip {
-  @include cl-fontawesome-before('\f1c6', 0.1em);
+  @include cl-fontawesome-before('\f1c6', $color-ci-steel, 0.1em);
 }
 
 // --- ::after icons -------------------------------------------------------------
 
 .cl-a-email {
-  @include cl-fontawesome-after('\f0e0', 0.2em, 0.8em);
+  @include cl-fontawesome-after('\f0e0', $color-ci-steel, 0.2em, 0.8em);
 }
 
 .cl-a-external {
-  @include cl-fontawesome-after('\f35d', 0.2em, 0.75em, -0.15em);
+  @include cl-fontawesome-after('\f35d', $color-ci-steel, 0.2em, 0.75em, -0.15em);
 
   &::after {
     font-weight: 900;

package/src/components/text/ClPlan/style.scss

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f005');
 
+    line-height: 0.5;
     margin-right: 0.2em;
     top: -0.04em;
   }

package/src/components/text/ClRole/style.scss

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f02b');
 
+    line-height: 0.5;
     margin-right: $spacing-micro;
     top: 0.05em;
   }

package/src/styles/abstracts/app.scss

@@ -9,6 +9,7 @@
 @use './tools' as *;
 
 $brand-border-radius: px(20);
+$brand-border-radius-minor: px(2.5); // for tiny things like focus borders
 $brand-line-width: 1px;
 $brand-bar-width: px(4);
 

package/src/styles/abstracts/color.scss

@@ -19,9 +19,6 @@ $color-ci-clay: #cfc8c8; // rgba(207, 200, 200, 1);
 $color-ci-ash: #6d5e5e; // rgba(109, 94, 94, 1);
 $color-ci-berry: #6e1c3b; // rgba(110, 28, 59, 1);
 $color-ci-petrol: #096174; // rgba(9, 97, 116, 1);
-$color-ci-black: $color-ci-night;
-$color-ci-white: $color-ci-eggshell;
-$color-ci-sand: #fdf5cf;
 $color-ci-backdrop: rgba($color-ci-night, 0.5);
 
 // secondary palette
@@ -32,34 +29,21 @@ $color-ci-sea: #5d9dd1; // #5D9FC0; // #3F81A2; 5d9dd1
 $color-ci-orchid: #b271bf;
 $color-ci-steel: #a0a0a0;
 $color-ci-haze: #eeece6;
+$color-ci-black: $color-ci-night;
+$color-ci-white: $color-ci-eggshell;
+$color-ci-sand: #fdf5cf;
 
+// aliases
 $color-primary: $color-ci-sea;
 $color-secondary: $color-ci-night;
 
-// legacy color mappings
-// $color-primary: $color-ci-red;
-// $color-secondary: $color-ci-night;
-// $color-ci-blue: $color-ci-sea;
-// $color-ci-dusk: $color-ci-night;
-// $color-ci-dim: $color-ci-ash;
-// $color-ci-cloud: $color-ci-ash;
-// $color-ci-silver: $color-ci-clay;
-// $color-ci-smoke: $color-ci-clay;
-// $color-ci-haze: $color-ci-eggshell;
-// $color-dark: $color-ci-ash;
-
-// additional non-official colors
-// $color-ci-green: #338450;
-// $color-ci-orange: #eca72c; // fec671; //f18f01;
-
-$color-hover-opacity: 0.75;
-
 $color-positive: $color-ci-leaf;
 $color-negative: $color-ci-brick;
 $color-neutral: $color-ci-night;
-
 $color-error: $color-ci-brick; // error color
 $color-focus: $color-ci-sea;
+$color-link: $color-ci-steel; // links/underlines on eggshell background
+$color-hover: $color-ci-red;
 $color-disabled: $color-ci-steel; // $color-ci-clay;
 
 $color-text: $color-ci-night;
@@ -172,12 +156,12 @@ $color-line: $color-ci-clay;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: inherit; // $color-ci-berry;
+  #{'--cl-color-link'}: $color-link;
   #{'--cl-color-active'}: $color-ci-berry;
-  #{'--cl-color-hover'}: $color-ci-red;
+  #{'--cl-color-hover'}: $color-hover;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-disabled-background'}: $color-disabled;
   #{'--cl-color-disabled-border'}: $color-disabled;
@@ -189,10 +173,10 @@ $color-line: $color-ci-clay;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: inherit; // $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-disabled-background'}: transparent;
   #{'--cl-color-disabled-border'}: $color-disabled;
@@ -205,7 +189,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-line'}: $color-ci-eggshell;
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit;
+  #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
@@ -215,7 +199,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-line'}: $color-ci-night;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit;
+  #{'--cl-color-link'}: $color-ci-night;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
@@ -229,10 +213,10 @@ $color-line: $color-ci-clay;
 %cl-color-red-outline {
   #{'--cl-color-border'}: $color-ci-red;
   #{'--cl-color-text'}: $color-ci-red;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-red;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: inherit; // $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-red;
   #{'--cl-color-disabled-background'}: transparent;
   #{'--cl-color-disabled-border'}: $color-disabled;
@@ -257,10 +241,10 @@ $color-line: $color-ci-clay;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-eggshell;
   #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit; // $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
@@ -268,10 +252,10 @@ $color-line: $color-ci-clay;
   #{'--cl-color-background'}: $color-ci-haze;
   #{'--cl-color-border'}: $color-ci-haze;
   #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit; // $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
@@ -359,7 +343,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-line'}: $color-disabled;
   #{'--cl-color-accent'}: $color-disabled;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit; // $color-disabled;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
@@ -370,7 +354,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-line'}: $color-ci-ash;
   #{'--cl-color-accent'}: $color-ci-ash;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit; // $color-ci-ash;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-ash;
 }