@castlabs/ui 7.17.0 → 7.18.0

package/src/styles/layout/color.scss

@@ -82,44 +82,6 @@
 
 // -----------------------------------------------------------------------------
 
-// primary/secondary/tertiary button colors
-
-.btn {
-  &.cl-color-primary {
-    @extend %cl-color-sea;
-  }
-
-  &.cl-color-secondary {
-    @extend %cl-color-night;
-  }
-
-  &.cl-color-tertiary {
-    @extend %cl-color-transparent;
-  }
-}
-
-.cl-color-red,
-.cl-color-sky,
-.cl-color-ash,
-.cl-color-petrol,
-.cl-color-berry,
-.cl-color-black,
-.cl-color-text,
-.cl-color-dark,
-.cl-color-night {
-  // on dark backgrounds secondary buttons need to be light
-  .btn.cl-color-secondary {
-    @extend %cl-color-eggshell;
-  }
-
-  // on dark backgrounds secondary buttons need to be outlined
-  .btn.cl-color-tertiary {
-    @extend %cl-color-transparent;
-  }
-}
-
-// -----------------------------------------------------------------------------
-
 a,
 span,
 div {

package/src/styles/layout/grid.scss

@@ -84,7 +84,7 @@ section {
 }
 
 main {
-  background-color: $color-ci-white;
+  background-color: var(--cl-color-background);
   display: table-row;
   height: 100%;
 
@@ -107,12 +107,13 @@ body,
 .cl-app {
   @extend %cl-p-medium;
 
-  background-color: $color-ci-white;
-  color: $color-text;
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
   height: 100%;
 }
 
 .cl-main {
+  background-color: var(--cl-color-background);
   display: table;
   height: 100%;
   table-layout: fixed;

package/src/styles/layout/meta.scss

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

package/src/styles/layout/typography.scss

@@ -293,5 +293,5 @@ hr {
 
 ::selection {
   background: $color-ci-berry;
-  color: $color-ci-white;
+  color: $color-ci-eggshell;
 }

package/src/styles/themes/dark.scss

@@ -0,0 +1,160 @@
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
+
+@use '../global' as *;
+
+@include cl-if-dark-mode {
+  @extend %cl-mode-dark;
+
+  .cl-color-haze,
+  .cl-section-alternate,
+  .card.cl-color-haze {
+    #{'--cl-color-icon'}: $color-ci-steel;
+    #{'--cl-color-code'}: $color-ci-sky;
+    #{'--cl-color-input-background'}: $color-ci-night;
+    #{'--cl-color-input-border'}: $color-ci-clay;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-text-inverted'}: $color-ci-night;
+
+    textarea[disabled],
+    textarea.disabled,
+    input[disabled],
+    input.disabled,
+    select[disabled],
+    select.disabled {
+      &:disabled,
+      &.disabled {
+        #{'--cl-color-input-background'}: $color-ci-haze-dark;
+      }
+    }
+  }
+
+  .cl-nav-top,
+  .cl-nav-account,
+  .cl-nav-account::after {
+    // add haze line below nav
+    box-shadow: 0 -1px 0 $color-ci-night-2 inset;
+  }
+
+  .cl-badge {
+    @extend %cl-mode-dark;
+    @include cl-colors-ci;
+    @include cl-colors-admin;
+
+    #{'--cl-color-background'}: $color-ci-steel;
+    #{'--cl-color-border'}: $color-ci-steel;
+  }
+
+  .card {
+    @extend %cl-mode-dark;
+    @include cl-colors-ci;
+    @include cl-colors-admin;
+
+    #{'--cl-color-background'}: $color-ci-night;
+
+    &.cl-color-faded {
+      @extend %cl-color-faded;
+    }
+
+    &.cl-color-haze {
+      @extend %cl-color-haze;
+
+      &:not([class*='cl-color-text-']) {
+        #{'--cl-color-text'}: $color-ci-eggshell;
+      }
+    }
+
+    &.cl-color-red-outline {
+      @extend %cl-color-red-outline;
+
+      &:not([class*='cl-color-text-']) {
+        #{'--cl-color-text'}: $color-ci-eggshell;
+      }
+    }
+  }
+
+  .cl-form [type='range'] {
+    background: $color-ci-steel;
+  }
+
+  .cl-form [type='checkbox'],
+  .form-check-input[type='checkbox'] {
+    #{--cl-color-input-border}: var(--cl-color-text);
+    background-color: $color-ci-night !important;
+
+    &:checked {
+      background-color: $color-ci-night !important;
+      border: $brand-line-width solid $color-ci-eggshell !important;
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: $color-ci-night-2 !important;
+      border-color: $color-disabled !important;
+    }
+
+    &:indeterminate {
+      background-color: $color-ci-eggshell !important;
+      background-image: none;
+      border: $brand-line-width solid $color-ci-eggshell !important;
+      box-shadow: 0 0 0 px(2) $color-ci-night inset !important;
+
+      &:disabled,
+      &.disabled {
+        background-color: $color-disabled !important;
+        border-color: $color-disabled !important;
+        box-shadow: 0 0 0 px(2) $color-ci-night-2 inset !important;
+      }
+    }
+  }
+
+  .cl-form [type='radio'],
+  .form-check-input[type='radio'] {
+    background-color: $color-ci-night !important;
+
+    &:checked {
+      background-color: $color-ci-eggshell !important;
+      border: $brand-line-width solid $color-ci-eggshell !important;
+
+      &:disabled,
+      &.disabled {
+        background-color: $color-disabled !important;
+        border-color: $color-disabled !important;
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: $color-ci-night-2 !important;
+      border-color: $color-disabled !important;
+    }
+  }
+
+  .form-select {
+    background-image: url('#{$cl-url-prefix}select.dark.svg#{$cl-url-postfix}'), none, none;
+
+    &:disabled,
+    &.disabled {
+      background-image:
+        url('#{$cl-url-prefix}select-disabled.dark.svg#{$cl-url-postfix}'), none, none;
+    }
+  }
+
+  .modal {
+    @extend %cl-mode-dark;
+  }
+
+  .cl-toggle-checkbox {
+    + .cl-badge {
+      &:not([class*=' cl-color-']) {
+        @extend %cl-color-eggshell;
+      }
+    }
+
+    &:disabled + .cl-badge {
+      #{'--cl-color-background'}: $color-disabled;
+      #{'--cl-color-border'}: $color-disabled;
+      #{'--cl-color-text'}: $color-ci-eggshell;
+    }
+  }
+}

package/src/styles/themes/dark.variables.scss

@@ -0,0 +1,33 @@
+@use '../abstracts/color.scss' as *;
+
+%cl-mode-dark {
+  #{'--cl-color-accent'}: $color-ci-sky;
+  #{'--cl-color-active'}: $color-ci-berry;
+  #{'--cl-color-background'}: $color-ci-night;
+  #{'--cl-color-background-haze'}: $color-ci-haze-dark;
+  #{'--cl-color-border'}: $color-ci-eggshell;
+  #{'--cl-color-code'}: $color-ci-sky;
+  #{'--cl-color-disabled-background'}: $color-disabled;
+  #{'--cl-color-disabled-border'}: $color-disabled;
+  #{'--cl-color-disabled-text'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: $color-ci-night-3;
+  #{'--cl-color-hover'}: $color-hover;
+  #{'--cl-color-icon'}: $color-ci-steel;
+  #{'--cl-color-input-background'}: $color-ci-night;
+  #{'--cl-color-input-border'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-link'}: $color-link;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-text-faded'}: $color-ci-steel;
+  #{'--cl-color-text-inverted'}: $color-ci-night;
+  #{'--cl-opacity-active'}: $color-opacity-active;
+}
+
+@mixin cl-if-dark-mode {
+  // detect body class and toggle-checkbox
+  body:has(#cl-mode-dark:checked),
+  .cl-mode-dark {
+    @content;
+  }
+}

package/src/styles/ui.scss

@@ -73,6 +73,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/form/ClForm/style' as *;
 @use '../components/modal/ClModal/style' as *;
 @use '../components/navigation/ClNavSide/ClNavDrawer/style' as *;
+@use '../components/navigation/ClNavSide/ClNavItemDarkMode/style' as *;
 @use '../components/navigation/ClNavSide/ClNavSideMenu/style' as *;
 @use '../components/navigation/ClNavSide/style' as *;
 @use '../components/navigation/ClNavTop/style' as *;
@@ -104,6 +105,11 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/widget/ClCookieBanner/style' as *;
 @use '../components/widget/ClPage/style' as *;
 
+@use 'themes/dark' as * with (
+  $cl-url-prefix: $castlabs-ui-asset-prefix,
+  $cl-url-postfix: $castlabs-ui-asset-postfix
+);
+
 html {
   font-size: 16px; // root font size
 }

package/types/castlabs-ui.module.d.ts

@@ -73,6 +73,10 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   ): Promise<any>
   export function clReloadStore (component: any, forced?: any[], optional?: any[], loading?: boolean): Promise<any>
 
+  // theme utils
+  export function clThemeSetup (): boolean
+  export function clThemeSetDark (dark: boolean): void
+
   // search utils
   export function clMatch (string: string, expression?: string, caseSensitive?: boolean): boolean
 

package/types/index.d.ts

@@ -19,6 +19,7 @@ export const ClModal: DefineComponent
 export const ClModalConfirm: DefineComponent
 export const ClModalForm: DefineComponent
 export const ClModalOk: DefineComponent
+export const ClNavItemDarkMode: DefineComponent
 export const ClNavSide: DefineComponent
 export const ClNavTop: DefineComponent
 export const ClPage: DefineComponent
@@ -131,6 +132,10 @@ export function clReload (
 ): Promise<any>
 export function clReloadStore (component: any, forced?: any[], optional?: any[], loading?: boolean): Promise<any>
 
+// theme utils
+export function clThemeSetup (): boolean
+export function clThemeSetDark (dark: boolean): void
+
 // --- utils/search ------------------------------------------------------------
 
 export function clMatch (string: string, expression?: string, caseSensitive?: boolean): boolean