@porscheinformatik/clr-addons 12.1.0 → 12.2.0

package/src/themes/phs/css.overrides.scss

@@ -0,0 +1,148 @@
+:root[cds-theme~='phs'] {
+  .header .header-nav .nav-link.active {
+    background: var(--clr-global-selection-color);
+  }
+
+  header,
+  .header {
+    .header-actions {
+      > .dropdown > .nav-icon > clr-icon {
+        color: var(--turquoise-darkest);
+      }
+
+      .nav-icon > clr-icon {
+        color: var(--turquoise-darkest);
+      }
+    }
+
+    .settings .nav-icon > clr-icon {
+      color: var(--turquoise-darkest);
+    }
+
+    .branding {
+      min-width: 4rem;
+    }
+  }
+
+  .card {
+    &.selectable:hover::after,
+    &.card-active::after {
+      top: 0;
+    }
+  }
+
+  .card-img {
+    &:first-child > img {
+      border-radius: var(--clr-card-border-radius) var(--clr-card-border-radius) 0 0;
+    }
+
+    &:last-child > img {
+      border-radius: 0 0 var(--clr-card-border-radius) var(--clr-card-border-radius);
+    }
+  }
+
+  .card.card-img,
+  .card > .card-img:first-child:last-child {
+    & > img {
+      border-radius: var(--clr-card-border-radius);
+    }
+  }
+
+  .datagrid .datagrid-table .datagrid-column {
+    .datagrid-filter-toggle {
+      &:hover,
+      &.datagrid-filter-open {
+        cds-icon {
+          --color: var(--turquoise);
+        }
+      }
+    }
+
+    .datagrid-column-title .sort-icon {
+      --color: var(--turquoise);
+    }
+  }
+
+  .datagrid-footer .column-switch-wrapper .column-toggle--action:hover cds-icon {
+    --color: var(--turquoise);
+  }
+
+  .spinner:not(.spinner-check) {
+    background: generateSpinnerIcon($black, $turquoise);
+
+    &.spinner-inverse {
+      background: generateSpinnerIcon($white, $turquoise);
+    }
+  }
+
+  clr-tooltip clr-icon {
+    color: var(--turquoise);
+  }
+
+  clr-icon {
+    &.is-green,
+    &.is-success {
+      fill: var(--clr-icon-color-success);
+    }
+
+    &.is-danger {
+      fill: var(--clr-icon-color-danger);
+    }
+
+    &.is-red,
+    &.is-error {
+      fill: var(--clr-icon-color-error);
+    }
+
+    &.is-warning {
+      fill: var(--clr-icon-color-warning);
+    }
+
+    &.is-blue,
+    &.is-info {
+      fill: var(--clr-icon-color-info);
+    }
+
+    &.is-highlight {
+      fill: var(--clr-icon-color-highlight);
+    }
+  }
+
+  // Bootstrap text color overrides
+  .text-primary {
+    color: var(--clr-text-color-primary) !important;
+  }
+
+  .text-success {
+    color: var(--clr-text-color-success) !important;
+  }
+
+  .text-info {
+    color: var(--clr-text-color-info) !important;
+  }
+
+  .text-warning {
+    color: var(--clr-text-color-warning) !important;
+  }
+
+  .text-danger {
+    color: var(--clr-text-color-danger) !important;
+  }
+
+  .header .header-actions > .dropdown .dropdown-toggle.nav-icon,
+  .dropdown .dropdown-toggle {
+    clr-icon[shape^='caret'] {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 0.5rem;
+      width: 0.5rem;
+      right: 0.6rem;
+    }
+  }
+
+  .clr-combobox-wrapper,
+  .clr-combobox-input {
+    width: 100%;
+  }
+}

package/src/themes/phs/phs-theme.scss

@@ -0,0 +1,13 @@
+@import './variables.color';
+
+// Component variables
+@import '../../components.variables.clr-addons';
+
+// Clarity Addons Component
+@import '../../components.clr-addons';
+
+// Custom theme
+@import './theme.clarity';
+
+// Custom CSS overrides
+@import './css.overrides';

package/src/themes/phs/theme.clarity.scss

@@ -0,0 +1,262 @@
+// Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+// This software is released under MIT license.
+// The full license information can be found in LICENSE in the root directory of this project.
+
+:root[cds-theme~='phs'] {
+  // Global
+  --clr-global-selection-color: var(--turquoise-light);
+  --clr-responsive-nav-trigger-bg-color: var(--black);
+
+  // Default button colors
+  --clr-btn-border-radius: 0.25rem;
+  --clr-btn-default-color: var(--turquoise); // border-color, color, checked-background-color
+  --clr-btn-default-border-color: var(--turquoise);
+  --clr-btn-default-hover-bg-color: var(--turquoise-light); // hover-background-color
+  --clr-btn-default-hover-color: var(--turquoise-darkest); // hover-color
+  --clr-btn-default-box-shadow-color: var(--turquoise-darkest);
+  --clr-btn-default-checked-bg-color: var(--turquoise);
+
+  // Default outline button
+  --clr-btn-default-outline-color: var(--turquoise); // border-color, color, checked-background-color
+  --clr-btn-default-outline-border-color: var(--turquoise);
+  --clr-btn-default-outline-hover-bg-color: var(--turquoise-lighter); // hover-background-color
+  --clr-btn-default-outline-hover-color: var(--turquoise-darkest); // hover-color
+  --clr-btn-default-outline-box-shadow-color: var(--turquoise-darkest);
+
+  // Primary button
+  --clr-btn-primary-bg-color: var(--turquoise); // background-color, disabled-background-color
+  --clr-btn-primary-border-color: var(--turquoise); // border-color
+  --clr-btn-primary-hover-bg-color: var(--turquoise-darkest); // hover-background-color
+  --clr-btn-primary-box-shadow-color: var(--turquoise);
+
+  // Success button
+  --clr-btn-success-bg-color: var(--green);
+  --clr-btn-success-hover-bg-color: var(--green-dark);
+  --clr-btn-success-box-shadow-color: var(--green);
+  --clr-btn-success-checked-bg-color: var(--clr-btn-success-hover-bg-color);
+
+  // Success button outline
+  --clr-btn-success-outline-color: var(--green);
+  --clr-btn-success-outline-hover-bg-color: var(--green-lighter);
+  --clr-btn-success-outline-border-color: var(--green);
+  --clr-btn-success-outline-hover-color: var(--green-dark);
+  --clr-btn-success-outline-box-shadow-color: var(--green-dark);
+
+  // Danger button
+  --clr-btn-danger-hover-bg-color: var(--red-dark);
+
+  // Danger button outline
+  --clr-btn-danger-outline-hover-bg-color: var(--red-lighter);
+
+  // Link button colors
+  --clr-btn-link-color: var(--turquoise); // color
+  --clr-btn-link-hover-color: var(--turquoise-darkest); // hover-color
+
+  // Alert
+  --clr-alert-success-bg-color: var(--green-light);
+  --clr-alert-success-border-color: var(--green-light-mid);
+  --clr-alert-success-icon-color: var(--green-turquiose);
+
+  --clr-alert-info-bg-color: var(--blue-light);
+  --clr-alert-info-border-color: var(--blue-mid);
+  --clr-alert-info-icon-color: var(--turquoise);
+
+  --clr-alert-warning-border-color: var(--yellow-light);
+
+  --clr-alert-danger-bg-color: var(--red-light);
+  --clr-alert-danger-icon-color: var(--red-darker);
+
+  --clr-app-alert-success-bg-color: var(--green-light-mid);
+  --clr-app-alert-info-bg-color: var(--blue-dark);
+  --clr-app-alert-warning-bg-color: var(--orange-dark);
+  --clr-app-alert-danger-bg-color: var(--red-darker);
+
+  // Badge
+  --clr-badge-info-bg-color: var(--turquoise);
+  --clr-badge-success-bg-color: var(--green);
+  --clr-badge-warning-bg-color: var(--yellow-light);
+  --clr-badge-danger-bg-color: var(--red-darker);
+  --clr-badge-orange-bg-color: var(--orange-dark);
+  --clr-badge-light-blue-bg-color: var(--blue-mid);
+
+  // Card
+  --clr-card-border-radius: 0.25rem;
+  --clr-card-active-border-color: var(--turquoise);
+  --clr-card-clickable-box-shadow-color: var(--turquoise);
+  --clr-card-clickable-border-color: var(--turquoise);
+
+  // Checkbox
+  --clr-forms-checkbox-background-color: var(--turquoise); // checked-background-color
+  --clr-forms-checkbox-checked-shadow: inset 0 0 0 0.25rem var(--clr-forms-checkbox-background-color);
+  --clr-forms-checkbox-indeterminate-border-color: var(--turquoise);
+
+  // Datagrid
+  --clr-datagrid-row-hover: var(--clr-global-selection-color);
+  --clr-datagrid-action-popover-hover-color: var(--clr-global-selection-color);
+  --clr-datagrid-detail-caret-icon-open-bg-color: var(--turquoise);
+
+  // Datepicker
+  --clr-datepicker-trigger-color: var(--turquoise);
+  --clr-datepicker-trigger-hover-color: var(--turquoise-darkest);
+  --clr-calendar-btn-color: var(--turquoise);
+  --clr-calendar-active-cell-background-color: var(--clr-global-selection-color);
+  --clr-calendar-btn-hover-focus-color: var(--clr-global-selection-color);
+  --clr-calendar-active-focus-cell-background-color: var(--clr-global-selection-color);
+
+  // Dropdown
+  --clr-dropdown-selection-color: var(--clr-global-selection-color);
+
+  // Forms
+  --clr-forms-focused-color: var(--turquoise);
+  --clr-forms-input-invalid-color: var(--red-darker);
+
+  // Input
+  --clr-input-border-color: var(--turquoise);
+
+  // Header
+  --clr-header-font-color: var(--black);
+  --clr-header-title-color: var(--black);
+  --clr-header-bg-color: var(--white);
+  --clr-header-2-bg-color: var(--white);
+  --clr-header-3-bg-color: var(--white);
+  --clr-header-4-bg-color: var(--white);
+  --clr-header-5-bg-color: var(--white);
+  --clr-header-6-bg-color: var(--white);
+  --clr-header-7-bg-color: var(--white);
+
+  // Icons
+  --clr-icon-color-success: var(--green);
+  --clr-icon-color-danger: var(--red-darker);
+  --clr-icon-color-warning: var(--yellow-light);
+  --clr-icon-color-error: var(--red-darker);
+  --clr-icon-color-info: var(--turquoise);
+  --clr-icon-color-highlight: var(--turquoise);
+
+  // Label
+  --clr-label-info-font-color: var(--turquoise);
+  --clr-label-info-border-color: var(--turquoise);
+
+  --clr-label-success-bg-color: var(--green-light);
+  --clr-label-success-font-color: var(--green-darkest);
+  --clr-label-success-border-color: var(--green-light-mid);
+
+  --clr-label-warning-border-color: var(--yellow-light);
+
+  --clr-label-danger-bg-color: var(--red-light);
+
+  --clr-label-orange-bg-color: var(--orange-dark);
+  --clr-label-light-blue-bg-color: var(--blue-mid);
+
+  // Links
+  --clr-link-active-color: var(--turquoise);
+  --clr-link-color: var(--turquoise);
+  --clr-link-hover-color: var(--turquoise);
+  --clr-link-visited-color: var(--turquoise-darkest);
+
+  // Notification
+  --clr-notification-progress-info-bar-color: var(--blue-darker);
+
+  // Progress bar
+  --clr-progress-default-color: var(--turquoise);
+  --clr-progress-alt-color-1: var(--green-mid);
+  --clr-progress-alt-color-2: var(--red-darkest);
+  --clr-progress-alt-color-3: var(--orange-darker);
+
+  // Radiobutton
+  --clr-forms-radio-selected-shadow: var(--clr-forms-checkbox-checked-shadow); // selected-background-color
+
+  // Sidenav
+  --clr-sidenav-link-hover-color: var(--clr-global-selection-color);
+
+  // Signposts
+  --clr-signpost-action-hover-color: var(--turquoise);
+
+  // Stack View
+  --clr-stack-view-stack-block-expanded-bg-color: var(--turquoise-light);
+  --clr-stack-view-stack-block-expandable-hover: var(--clr-global-selection-color);
+
+  // Subnav
+  --clr-nav-active-box-shadow-color: var(--turquoise);
+
+  // Text
+  --clr-text-color-primary: var(--turquoise);
+  --clr-text-color-success: var(--green);
+  --clr-text-color-info: var(--turquoise);
+  --clr-text-color-warning: var(--yellow-light);
+  --clr-text-color-danger: var(--red-darker);
+
+  // Toggle
+  --clr-toggle-bg-color-on: var(--turquoise);
+
+  // Tree View
+  --clr-tree-link-hover-color: var(--clr-global-selection-color);
+  --clr-tree-link-selection-color: var(--clr-global-selection-color);
+
+  // Wizard
+  --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color);
+
+  // *************************
+  // CDS variables
+  // *************************
+  --cds-global-typography-font-family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
+  --cds-alias-object-interaction-background-selected: var(--turquoise-light);
+
+  --cds-alias-status-danger-shade: var(--red-darker);
+  --cds-alias-status-danger-tint: var(--red-light);
+  --cds-alias-status-warning-shade: var(--yellow-light);
+  --cds-alias-status-warning: var(--yellow-light);
+  --cds-alias-status-info-shade: var(--turquoise);
+  --cds-alias-status-info-tint: var(--blue-light);
+  --cds-alias-status-info: var(--turquoise);
+  --cds-alias-status-success-shade: var(--green);
+  --cds-alias-status-success-tint: var(--green-light);
+  --cds-alias-status-success: var(--green);
+
+  cds-alert-group {
+    &[status='info'] {
+      --cds-alias-status-info: var(--blue-mid);
+    }
+    &[status='success'] {
+      --cds-alias-status-success: var(--green-light-mid);
+    }
+    &[type='banner'] {
+      &[status='info'] {
+        --cds-alias-status-info: var(--blue-dark);
+      }
+
+      &[status='warning'] {
+        --cds-alias-status-warning: var(--orange-dark);
+        cds-alert {
+          --color: var(--white);
+        }
+      }
+    }
+  }
+
+  cds-badge {
+    &[color='light-blue'] {
+      --background: var(--blue-mid);
+    }
+    &[color='orange'] {
+      --background: var(--orange-dark);
+      --color: var(--white);
+    }
+  }
+
+  cds-tag {
+    &[color='light-blue'] {
+      --border-color: var(--blue-mid);
+    }
+    &[color='orange'] {
+      --border-color: var(--orange-dark);
+    }
+  }
+
+  cds-textarea textarea {
+    outline-color: var(--turquoise);
+  }
+
+  cds-toggle {
+    --cds-alias-status-success: var(--turquoise);
+  }
+}

package/src/themes/phs/variables.color.scss

@@ -0,0 +1,41 @@
+$clr-color-hue: 183.2;
+
+$turquoise: #14a1a9;
+$white: #fff;
+$black: #000;
+
+:root[cds-theme~='phs'] {
+  --blue-light: #e6f3f8;
+  --blue-mid: #85c3df;
+  --blue-dark: #0d88c0;
+  --blue-darker: #0c75a6;
+
+  --turquoise: #{$turquoise};
+  --turquoise-lighter: #e8f3f3;
+  --turquoise-light: #e7f5f6;
+  --turquoise-darkest: #19888d;
+
+  --green-turquiose: #1f9c70;
+  --green-lighter: #e8f2e9;
+  --green-light: #b7e8d7;
+  --green-light-mid: #29cf95;
+  --green-mid: #24b582;
+  --green: #14a91e;
+  --green-dark: #208427;
+  --green-darkest: #266900;
+
+  --red-lighter: #f7eae7;
+  --red-light: #ffdddb;
+  --red-dark: #b12d12;
+  --red-darker: #c11810;
+  --red-darkest: #a8150d;
+
+  --orange-dark: #d25617;
+  --orange-darker: #b84b14;
+  --orange-light: #ffae42;
+
+  --yellow-light: #efd603;
+
+  --black: #{$black};
+  --white: #{$white};
+}