feat(brand-theme): remove brand theme from core

siemens · Sep 2, 2022 · a333448 · a333448
1 parent 4b810ef
commit a333448
Show file tree

Hide file tree

Showing 132 changed files with 695 additions and 447 deletions.
diff --git a/ix.code-workspace b/ix.code-workspace
@@ -4,6 +4,10 @@
       "name": "@siemens/ix",
       "path": "./packages/core"
     },
+    {
+      "name": "@siemens/ix-brand-theme",
+      "path": "./packages/ix-brand-theme"
+    },
     {
       "name": "@siemens/ix-react",
       "path": "./packages/react"

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -781,14 +781,14 @@ export declare interface IxMapNavigation extends Components.IxMapNavigation {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['appName', 'hideContextMenu', 'navTitle'],
+  inputs: ['applicationName', 'hideContextMenu', 'navigationTitle'],
   methods: ['openOverlay', 'closeOverlay']
 })
 @Component({
   selector: 'ix-map-navigation',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['appName', 'hideContextMenu', 'navTitle']
+  inputs: ['applicationName', 'hideContextMenu', 'navigationTitle']
 })
 export class IxMapNavigation {
   protected el: HTMLElement;
@@ -871,13 +871,13 @@ export declare interface IxMenuAbout extends Components.IxMenuAbout {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['activeTabLabel', 'applicationDescription', 'applicationName', 'copyrightYears', 'i18nCookieNoticeLabel', 'i18nCorporateLabel', 'i18nDigitalId', 'i18nImprintLabel', 'i18nPrivacyNoticeLabel', 'i18nTermsOfUseLabel', 'imprintLanguage', 'label', 'show']
+  inputs: ['activeTabLabel', 'i18nImprintLabel', 'label', 'show']
 })
 @Component({
   selector: 'ix-menu-about',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['activeTabLabel', 'applicationDescription', 'applicationName', 'copyrightYears', 'i18nCookieNoticeLabel', 'i18nCorporateLabel', 'i18nDigitalId', 'i18nImprintLabel', 'i18nPrivacyNoticeLabel', 'i18nTermsOfUseLabel', 'imprintLanguage', 'label', 'show']
+  inputs: ['activeTabLabel', 'i18nImprintLabel', 'label', 'show']
 })
 export class IxMenuAbout {
   protected el: HTMLElement;

diff --git a/packages/core/.gitignore b/packages/core/.gitignore
@@ -29,3 +29,6 @@ coverage
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+
+/ix-brand-theme
diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js
@@ -21,6 +21,27 @@ function loadResources() {
     'http://127.0.0.1:8080/www/build/siemens-ix.css'
   );
 
+  var ixBrandStyle = document.createElement('link');
+  ixBrandStyle.setAttribute('rel', 'stylesheet');
+  ixBrandStyle.setAttribute(
+    'href',
+    'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.css'
+  );
+
+  var ixBrandEsm = document.createElement('script');
+  ixBrandEsm.setAttribute('type', 'module');
+  ixBrandEsm.setAttribute(
+    'src',
+    'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.esm.js'
+  );
+
+  var ixBrand = document.createElement('script');
+  ixBrand.setAttribute('nomodule', '');
+  ixBrand.setAttribute(
+    'src',
+    'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js'
+  );
+
   var ixIcons = document.createElement('link');
   ixIcons.setAttribute('rel', 'stylesheet');
   ixIcons.setAttribute(
@@ -31,6 +52,9 @@ function loadResources() {
   document.getElementsByTagName('head')[0].appendChild(ixEsm);
   document.getElementsByTagName('head')[0].appendChild(ix);
   document.getElementsByTagName('head')[0].appendChild(ixStyling);
+  document.getElementsByTagName('head')[0].appendChild(ixBrandStyle);
+  document.getElementsByTagName('head')[0].appendChild(ixBrandEsm);
+  document.getElementsByTagName('head')[0].appendChild(ixBrand);
   document.getElementsByTagName('head')[0].appendChild(ixIcons);
 }
 

diff --git a/packages/core/scss/_common-variables.scss b/packages/core/scss/_common-variables.scss
@@ -20,9 +20,6 @@ $small-icon-size: 1rem;
 
 $default-border-radius: 0.25rem;
 
-/* Fonts */
-$font-path: './fonts/';
-
 /* Font sizes */
 $font-size-xs: 0.625rem;
 $font-size-s: 0.75rem;

diff --git a/packages/core/scss/_fonts.scss b/packages/core/scss/_fonts.scss
@@ -3,11 +3,6 @@
  */
 @import './mixins/fonts';
 
-@include font-face('sisan36', italic, $font-weight-bold);
-@include font-face('sisan33', italic, $font-weight-normal);
-@include font-face('sisan06', normal, $font-weight-bold);
-@include font-face('sisan03', normal, $font-weight-normal);
-
 .text-xs {
   @include text-xs;
 }

diff --git a/packages/core/scss/fonts/cui-icons.eot b/packages/core/scss/fonts/cui-icons.eot
diff --git a/packages/core/scss/fonts/cui-icons.ttf b/packages/core/scss/fonts/cui-icons.ttf
diff --git a/packages/core/scss/fonts/cui-icons.woff b/packages/core/scss/fonts/cui-icons.woff
diff --git a/packages/core/scss/ix.scss b/packages/core/scss/ix.scss
@@ -11,8 +11,6 @@
 @import './../src/components/toast/styles/toast-container';
 
 /* Default themes */
-@import './theme/brand-dark';
-@import './theme/brand-light';
 @import './theme/classic-dark';
 @import './theme/classic-light';
 @import './theme/static-colors';
@@ -39,10 +37,13 @@
 
 :root {
   --animate-duration: #{$default-time};
+  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-body:not(.theme-classic-light):not(.theme-classic-dark):not(.theme-brand-light):not(.theme-brand-dark) {
-  @extend .theme-brand-dark;
+body:not([class*='theme-']) {
+  @extend .theme-classic-dark;
 }
 
 body {

diff --git a/packages/core/scss/mixins/_fonts.scss b/packages/core/scss/mixins/_fonts.scss
@@ -2,24 +2,19 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@mixin font-face($file-name, $font-style, $font-weight) {
-  @font-face {
-    font-family: Siemens Sans;
-    src: url($font-path + $file-name + '.eot'), url($font-path + $file-name + '.woff2') format('woff2'), url($font-path + $file-name + '.woff') format('woff'),
-      url($font-path + $file-name + '.ttf') format('truetype');
-    font-style: $font-style;
-    font-weight: $font-weight;
-  }
-}
-
 @mixin font-smoothing {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
 }
 
-@mixin text-format($font-size, $line-height, $font-weight: $font-weight-normal, $color-inverted: false) {
+@mixin text-format(
+  $font-size,
+  $line-height,
+  $font-weight: $font-weight-normal,
+  $color-inverted: false
+) {
   @include font-smoothing();
-  font-family: Siemens Sans, Arial, sans-serif;
+  font-family: Siemens Sans, sans-serif;
   font-size: $font-size;
   font-weight: $font-weight;
   line-height: $line-height;
@@ -32,59 +27,129 @@
 }
 
 @mixin text-default($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-default,
+    $line-height-default,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-default-single($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default-single, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-default,
+    $line-height-default-single,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-default-title($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-default,
+    $line-height-default,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-default-title-single($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default-single, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-default,
+    $line-height-default-single,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-xs($color-inverted: false) {
-  @include text-format($font-size-xs, $line-height-xs, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-xs,
+    $line-height-xs,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-s($color-inverted: false) {
-  @include text-format($font-size-s, $line-height-s, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-s,
+    $line-height-s,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-caption($color-inverted: false) {
-  @include text-format($font-size-caption, $line-height-caption, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-caption,
+    $line-height-caption,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-caption-single($color-inverted: false) {
-  @include text-format($font-size-caption, $line-height-caption-single, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-caption,
+    $line-height-caption-single,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-l($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-l,
+    $line-height-l,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-l-single($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l-single, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-l,
+    $line-height-l-single,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @mixin text-l-title($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-l,
+    $line-height-l,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-l-title-single($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l-single, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-l,
+    $line-height-l-single,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-h2($color-inverted: false) {
-  @include text-format($font-size-xl, $line-height-h2, $font-weight-bold, $color-inverted);
+  @include text-format(
+    $font-size-xl,
+    $line-height-h2,
+    $font-weight-bold,
+    $color-inverted
+  );
 }
 
 @mixin text-xl($color-inverted: false) {
-  @include text-format($font-size-xl, $line-height-xl, $font-weight-normal, $color-inverted);
+  @include text-format(
+    $font-size-xl,
+    $line-height-xl,
+    $font-weight-normal,
+    $color-inverted
+  );
 }
 
 @function automatic-text-color($color, $theshold: 50) {