@castlabs/ui 7.7.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.7.0",
+  "version": "7.8.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/navigation/ClNavTop/style.scss

@@ -13,12 +13,18 @@ $sidenav-z-index: $layer-z-sidenav;
 .cl-nav-top {
   // first/top line in content area
   @extend %section-padding;
-  @extend %cl-color-night;
 
   @include spacing-before(0);
 
-  background-color: $color-ci-night;
-  color: $color-ci-eggshell;
+  @include cl-colors-ci;
+  @include cl-colors-admin;
+
+  &:not([class*='cl-color-']) {
+    @extend %cl-color-night;
+  }
+
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 
   .row {
     #{'--bs-gutter-x'}: $grid-spacing;
@@ -51,7 +57,7 @@ $sidenav-z-index: $layer-z-sidenav;
   .cl-path {
     @extend %cl-p-label;
 
-    color: $color-ci-eggshell;
+    color: var(--cl-color-text);
     flex-grow: 99;
     letter-spacing: 0;
     margin: 0;

package/src/styles/assets/logo.scss

@@ -43,3 +43,19 @@ a:hover {
     background-image: none;
   }
 }
+
+.cl-nav-top {
+  // pick proper night/eggshell version based on nav background
+  [class*='cl-asset-logo'] {
+    background-image: url('#{$cl-url-prefix}castlabs-logo-eggshell.svg#{$cl-url-postfix}');
+  }
+
+  &.cl-color-eggshell,
+  &.cl-color-haze,
+  &.cl-color-clay,
+  &.cl-color-sky {
+    [class*='cl-asset-logo'] {
+      background-image: url('#{$cl-url-prefix}castlabs-logo.svg#{$cl-url-postfix}');
+    }
+  }
+}

package/src/styles/layout/meta.scss

@@ -0,0 +1,3 @@
+:root {
+  #{'--cl-version'}: 'v7.8.0';
+}

package/src/styles/ui.scss

@@ -17,6 +17,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use 'layout/color';
 @use 'layout/grid';
 @use 'layout/helper';
+@use 'layout/meta';
 @use 'layout/scrollbar';
 @use 'layout/section';
 @use 'layout/spacing';

package/types/index.d.ts

@@ -163,3 +163,26 @@ export const NAV: {
   WM: ClService
   VTK: ClService
 }
+
+// --- utils/const ----------------------------------------------------------------
+
+export const CONST: {
+  COLOR: {
+    ASH: string,
+    BERRY: string,
+    BRICK: string,
+    CLAY: string,
+    EGGSHELL: string,
+    HAZE: string,
+    HONEY: string,
+    LEAF: string,
+    NIGHT: string,
+    ORCHID: string,
+    PETROL: string,
+    RED: string,
+    SAND: string,
+    SEA: string,
+    SKY: string,
+    STEEL: string
+  }
+}