@porscheinformatik/clr-addons 12.0.1 → 12.1.0

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

@@ -1,148 +0,0 @@
-: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

@@ -1,13 +0,0 @@
-@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

@@ -1,262 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-$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};
-}