@castlabs/ui 7.5.2 → 7.6.1

package/package.json

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

package/src/components/ClDropdown/style.scss

@@ -9,8 +9,7 @@
 @use '../../styles/global' as *;
 
 $dropdown-border: 0.125rem; // a 2px border to add so there is space for the outline
-$dropdown-color-chevron: rgba($color-ci-white, 0.5);
-$dropdown-color-chevron-bright: rgba($color-ci-clay, 0.5);
+$dropdown-color-chevron: $color-ci-clay;
 $dropdown-line-height: 1.25;
 
 .cl-dropdown {
@@ -44,7 +43,7 @@ $dropdown-line-height: 1.25;
       align-items: center;
       background-color: var(--cl-color-background);
       box-shadow: -8px 0 4px var(--cl-color-background);
-      color: $dropdown-color-chevron-bright;
+      color: $dropdown-color-chevron;
       display: flex;
       font-size: px(18);
       height: calc(100% - 8px);

package/src/components/ClPagination/style.scss

@@ -59,6 +59,7 @@
 
       border-radius: $brand-border-radius !important; // overrule BS
       cursor: not-allowed;
+      max-height: 36px;
       min-width: 36px;
       padding: $spacing-tiny;
       pointer-events: none;
@@ -90,3 +91,40 @@
     }
   }
 }
+
+.cl-pagination-autosize {
+  // for use by simple code that can't hide bubbles by itself
+  // will hide all but the first, last and +/-5 bubbles around the .active one
+  .page-item {
+    display: none;
+
+    &:first-of-type,
+    &.active,
+    &.disabled,
+    &:last-of-type {
+      display: list-item;
+    }
+
+    @include media-breakpoint-up(md) {
+      &.active {
+        display: list-item;
+
+        + .page-item,
+        + .page-item + .page-item,
+        + .page-item + .page-item + .page-item,
+        + .page-item + .page-item + .page-item + .page-item,
+        + .page-item + .page-item + .page-item + .page-item + .page-item {
+          display: list-item;
+        }
+      }
+
+      &:has(+ .active),
+      &:has(+ * + .active),
+      &:has(+ * + * + .active),
+      &:has(+ * + * + * + .active),
+      &:has(+ * + * + * + * + .active) {
+        display: list-item;
+      }
+    }
+  }
+}

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

@@ -11,8 +11,11 @@
 $sidenav-color-separator: rgba(#fff, 0.25);
 
 $sidenav-color-account: $color-ci-night;
-$sidenav-color-organization: #313644; // color.adjust($sidenav-color-account, $lightness: 5%);
-$sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness: 10%);
+$sidenav-color-organization: $color-ci-night-2;
+$sidenav-color-app: $color-ci-night-3;
+$sidenav-color: $color-ci-haze;
+$sidenav-color-text: $color-ci-night;
+$sidenav-color-text-minor: $color-ci-ash;
 
 @mixin cl-nav-fadeout($color) {
   overflow: hidden;
@@ -36,8 +39,9 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   // --- drawer ----------------------------------------------------------------
 
   .cl-nav-drawer {
-    #{'--cl-color-background'}: $color-ci-eggshell;
-    #{'--cl-color-text'}: $color-ci-night;
+    #{'--cl-color-background'}: $sidenav-color;
+    #{'--cl-color-text'}: $sidenav-color-text;
+    #{'--cl-color-accent'}: $color-ci-petrol;
     background-color: var(--cl-color-background);
     color: var(--cl-color-text);
   }
@@ -184,7 +188,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   div.cl-nav-organization,
   a.cl-nav-organization {
     min-height: 3.25rem;
-    padding: 0 $spacing-small $spacing-tiny;
+    padding: $spacing-micro $spacing-small $spacing-micro + $spacing-tiny;
     position: relative;
 
     &::after {
@@ -297,10 +301,16 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     position: relative;
     width: 100%;
 
+    @include media-breakpoint-up(md) {
+      // reduce nav item heigt a bit on larger screens
+      padding-bottom: $spacing-tiny - px(1);
+      padding-top: $spacing-tiny - px(1);
+    }
+
     .cl-nav-item-info {
       @extend %cl-p-small;
 
-      color: $color-ci-ash;
+      color: $sidenav-color-text-minor;
       letter-spacing: 0.025em;
       line-height: 1.4;
       margin-top: px(3);
@@ -348,6 +358,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   }
 
   .cl-dropdown {
+    // service drawer
     #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-background'}: $sidenav-color-app;
     #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
@@ -372,11 +383,15 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     + .cl-dropdown-arrow {
       background-color: $sidenav-color-app;
     }
+
+    .cl-subentry {
+      color: $color-ci-clay;
+    }
   }
 
   .cl-nav-separator {
     // -------------------------------------------------------
-    background-color: $color-ci-clay;
+    background-color: $color-ci-steel;
     border: 0;
     height: $brand-line-width;
     margin: $spacing-small 0;

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

@@ -6,6 +6,6 @@
 
   &,
   + .cl-section {
-    margin-top: 0 !important; // do not merge form-sections with other sections
+    margin-top: 0 !important; // don’t merge form-sections with other sections
   }
 }

package/src/styles/abstracts/color.scss

@@ -13,8 +13,11 @@ $color-ci-red: #fa423c; // rgba(250, 66, 60, 1)
 $color-ci-sky: #71c0ff; // rgba(113, 192, 255, 1)
 $color-ci-eggshell: #fbf9f2; // rgba(251, 249, 242, 1);
 $color-ci-night: #262a35; // rgba(38, 42, 53, 1);
-$color-ci-night-2: #2c303c; // rgba(38, 42, 53, 1); // interim color for sidenav
-$color-ci-night-3: #333742; // rgba(38, 42, 53, 1); // interim color for sidenav
+
+$color-ci-night-2: #333947;
+$color-ci-night-3: #3c4253;
+$color-ci-night-4: #454c5f;
+
 $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);

package/src/styles/abstracts/grid.scss

@@ -22,11 +22,11 @@
       padding: math.div($spacing, 2) $spacing-tiny math.div($spacing, 2) $spacing-tiny;
 
       > *:first-child {
-        margin-top: 0; // do not apply top spacing to first element in a cel
+        margin-top: 0; // don’t apply top spacing to first element in a cel
       }
 
       > *:last-child {
-        margin-bottom: 0; // do not apply bottom spacing to last element in a cel
+        margin-bottom: 0; // don’t apply bottom spacing to last element in a cel
       }
     }
   }

package/src/styles/fonts/FontAwesome5/index.scss

@@ -225,7 +225,7 @@ $cl-url-postfix: '' !default;
 }
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
+readers don’t read off random characters that represent icons */
 .fa-500px::before {
   content: '\f26e';
 }

package/src/styles/layout/color.scss

@@ -7,7 +7,7 @@
 
 @use '../global' as *;
 
-// note: order of selectors in this file are important. do not move colors around or
+// note: order of selectors in this file are important. don’t move colors around or
 // .cl-color-* overrides might not work
 
 :root {

package/src/styles/layout/grid.scss

@@ -19,7 +19,7 @@
 
 .container .containe,
 .container-fluid .container {
-  // nested containers should not limit themselves
+  // nested containers shouldn’t limit themselves
   margin-left: 0;
   margin-right: 0;
   max-width: 100%;

package/src/styles/layout/typography.scss

@@ -177,7 +177,7 @@ main {
     overflow-wrap: anywhere;
   }
 
-  b, // <b> defined just for fallback - don't use!
+  b, // <b> defined just for fallback - don’t use!
   strong {
     font-weight: 600;
   }
@@ -250,7 +250,7 @@ hr {
   }
 }
 
-// --- redefine bs utilities we use so we don't need to pull the whole set -----
+// --- redefine bs utilities we use so we don’t need to pull the whole set -----
 
 @each $bp, $px in $grid-breakpoints {
   .text-#{$bp}-start {

package/types/index.d.ts

@@ -3,7 +3,7 @@ import type { App, DefineComponent } from 'vue'
 declare function install (Vue: App): void
 export default install
 
-export function castlabsUi (Vue: App): void
+export function clUi (Vue: App): void
 
 export const ClAlert: DefineComponent
 export const ClBackCancelOk: DefineComponent