@castlabs/ui 7.16.0 → 7.18.0

package/src/styles/abstracts/typography.scss

@@ -117,6 +117,7 @@ $typography-monospace-line-height: 1.375;
   // button styled as regular link
   @extend %cl-a;
 
+  background-color: transparent;
   background-position: left bottom 0.25em; // depends on underline
   background-repeat: no-repeat;
   background-size: 100% 1px;
@@ -139,6 +140,7 @@ $typography-monospace-line-height: 1.375;
   }
 
   &:hover {
+    background-color: transparent;
     color: var(--cl-color-hover);
     opacity: inherit;
   }
@@ -487,7 +489,7 @@ $typography-responsive-scale: 0.8;
 %cl-p-pre-box {
   @extend %cl-p-pre;
 
-  background-color: $color-ci-haze;
+  background-color: var(--cl-color-background-haze);
   border-radius: $brand-border-radius;
   clip-path: inset(0 round $brand-border-radius);
   font-size: px(15);

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.16.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
@@ -106,13 +107,13 @@ export function clTableSorter (
   initialOrder?: string
 ): any
 export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
-  col: number,
-  order: 'ASC' | 'DESC' | 'NONE',
-  set: (col: number, order: string) => void,
-  get: (col: number) => string,
-  sorted: Type[],
-  sorter: () => any,
-  sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
+  col: number
+  order: 'ASC' | 'DESC' | 'NONE'
+  set: (col: number, order: string) => void
+  get: (col: number) => string
+  sorted: Type[]
+  sorter: () => any
+  sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
 }
 export function clDebounce (callback: any, ms?: number, key?: string): void
 export function clSanitizeId (id: string): string
@@ -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
@@ -283,12 +288,130 @@ type CsNavEntry = {
   badge: string | undefined
 }
 
+type STATE = {
+  UNKNOWN: null,
+  ACTIVE: number
+  PENDING: number
+  DELETED: number
+  SUSPENDED: number
+}
+
 export const CS: {
-  SERVICE: Record<string, string>
-  ROLE: Record<string, string>
-  STATE: Record<string, number | null>
-  LICENSE_STATE: Record<string, number | null>
-  PLAN: Record<string, number | null>
+  SERVICE: {
+    CP: string
+    CP_TAGLINE: string
+    CP_URN: string
+    CS: string
+    CS_TAGLINE: string
+    CS_URN: string
+    DT: string
+    DT_TAGLINE: string
+    DT_URN: string
+    DTO: string
+    DTO_TAGLINE: string
+    DTO_URN: string
+    DTS: string
+    DTS_TAGLINE: string
+    DTS_URN: string
+    PP: string
+    PP_TAGLINE: string
+    PP_URN: string
+    PP_URN_ANDROID: string
+    PP_URN_BROWSER: string
+    PP_URN_GSTREAMER: string
+    PP_URN_IOS: string
+    PP_URN_REACTNATIVE: string
+    PP_URN_WEBRTC: string
+    VTK: string
+    VTK_TAGLINE: string
+    VTK_URN: string
+    WM: string
+    WM_TAGLINE: string
+    WM_URN: string
+  }
+  ROLE: {
+    CS_READONLY: string
+    CS_READONLY_URN: string
+
+    CS_ADMIN: string
+    CS_ADMIN_URN: string
+    CS_BILLING: string
+    CS_BILLING_URN: string
+    CS_REPORTS: string
+    CS_REPORTS_URN: string
+
+    PP_ADMIN: string
+    PP_ADMIN_URN: string
+    PP_USER: string
+    PP_USER_URN: string
+
+    DT_MEMBERS: string
+    DT_MEMBERS_URN: string
+    DT_SUBORGS: string
+    DT_SUBORGS_URN: string
+    DT_CONFIGURATION: string
+    DT_CONFIGURATION_URN: string
+    DT_KEYS_DELETE: string
+    DT_KEYS_DELETE_URN: string
+    DT_KEYS_INGEST: string
+    DT_KEYS_INGEST_URN: string
+    DT_ASSETS: string
+    DT_ASSETS_URN: string
+    DT_DELIVERIES: string
+    DT_DELIVERIES_URN: string
+
+    DTO_DEVICES: string
+    DTO_DEVICES_URN: string
+    DTO_KEYBOX: string
+    DTO_KEYBOX_URN: string
+    DTO_DOWNLOAD: string
+    DTO_DOWNLOAD_URN: string
+    DTO_REPORTS: string
+    DTO_REPORTS_URN: string
+    DTO_CONFIGURATION: string
+    DTO_CONFIGURATION_URN: string
+
+    DTS_MEMBERS: string
+    DTS_MEMBERS_URN: string
+    DTS_SUBORGS: string
+    DTS_SUBORGS_URN: string
+    DTS_CONFIGURATION: string
+    DTS_CONFIGURATION_URN: string
+    DTS_KEYS_DELETE: string
+    DTS_KEYS_DELETE_URN: string
+    DTS_KEYS_INGEST: string
+    DTS_KEYS_INGEST_URN: string
+    DTS_ASSETS: string
+    DTS_ASSETS_URN: string
+    DTS_DELIVERIES: string
+    DTS_DELIVERIES_URN: string
+
+    VTK_ADMIN: string
+    VTK_ADMIN_URN: string
+    VTK_USER: string
+    VTK_USER_URN: string
+
+    CP_USER: string
+    CP_USER_URN: string
+
+    WM_DEMO: string
+    WM_DEMO_URN: string
+    WM_EXTRACTION: string
+    WM_EXTRACTION_URN: string
+  }
+  STATE: STATE
+  LICENSE_STATE: {
+    APPROVAL_REQUIRED: number
+    APPROVAL_DENIED: number
+    APPROVAL_REVOKED: number
+  } & STATE
+  PLAN: {
+    UNKNOWN: null,
+    TRIAL: number
+    STARTER: number
+    ENTERPRISE: number
+    CUSTOM: number
+  }
   APPS: Record<string, CsApp>
 }