feat(core/theme): adjust theme colors (#337)

packages/aggrid/scss/ix-aggrid.scss

@@ -19,14 +19,14 @@
   --ag-selected-row-background-color: var(--theme-table-data-row--background--selected);
 
   --ag-range-selection-background-color: var(--theme-table-data-row--background--selected);
-  --ag-range-selection-border-color: var(--theme-color-input--focus);
+  --ag-range-selection-border-color: var(--theme-input--border-color--focus);
   --ag-header-column-resize-handle-color: var(--theme-table-header-splitter--background);
   --ag-header-column-resize-handle-height: 100%;
   --ag-header-column-resize-handle-width: 1px;
 
   --ag-input-focus-box-shadow: none;
-  --ag-input-focus-border-color: var(--theme-color-input--focus);
-  --ag-checkbox-checked-color: var(--theme-color-input--focus);
+  --ag-input-focus-border-color: var(--theme-input--border-color--focus);
+  --ag-checkbox-checked-color: var(--theme-input--border-color--focus);
   --ag-control-panel-background-color: var(--theme-color-1);
 
   .ag-input-wrapper {

packages/core/scss/components/_buttons.scss

@@ -65,7 +65,7 @@ $button-categories: (primary, secondary);
     }
 
     @include focus-visible {
-      outline: 1px solid var(--focus--border-color);
+      outline: 1px solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-btn--focus--outline-offset);
     }
 

packages/core/scss/components/_checkboxes.scss

@@ -53,14 +53,14 @@
 
   [type='checkbox'] + label:focus-visible {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
   [type='checkbox']:focus-visible + label {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }

packages/core/scss/components/_forms.scss

@@ -44,7 +44,7 @@
     border-color: var(--theme-input--border-color--focus);
     outline-offset: var(--theme-input--focus--outline-offset);
     box-shadow: var(--theme-input--box-shadow);
-    outline: 1px solid var(--focus--border-color);
+    outline: 1px solid var(--theme-color-focus-bdr);
   }
 }
 

packages/core/scss/components/_radiobuttons.scss

@@ -57,14 +57,14 @@
 
   [type='radio'] + label:focus-visible {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }
 
   [type='radio']:focus-visible + label {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }

packages/core/scss/components/_shadows.scss

@@ -6,30 +6,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+:root {
+  body {
+    --theme-box-shadow-lvl-1: var(--theme-shadow-1);
+    --theme-box-shadow-lvl-2: var(--theme-shadow-2);
+    --theme-box-shadow-lvl-3: var(--theme-shadow-3);
+    --theme-box-shadow-lvl-4: var(--theme-shadow-4);
 
-@import './../theme/define-theme-variable';
+    --theme-box-shadow-level-1: var(--theme-shadow-1);
+    --theme-box-shadow-level-2: var(--theme-shadow-2);
+    --theme-box-shadow-level-3: var(--theme-shadow-3);
+    --theme-box-shadow-level-4: var(--theme-shadow-4);
 
-@mixin shadows {
-  $box-shadow-lvl-1: 0 1px 4px 0 var(--theme-color-shadow-1),
-    0 0 4px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-2: 0 2px 6px 0 var(--theme-color-shadow-1),
-    0 0 8px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-3: 0 4px 8px 0 var(--theme-color-shadow-1),
-    0 0 16px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-4: 0 8px 16px 0 var(--theme-color-shadow-1),
-    0 0 32px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-5: 0 16px 32px 0 var(--theme-color-shadow-1),
-    0 0 64px 0 var(--theme-color-shadow-2);
-
-  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-lvl-1);
-  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-lvl-2);
-  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-lvl-3);
-  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-lvl-4);
-  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-lvl-5);
-
-  @include define-theme-variable('box-shadow-level-1', $box-shadow-lvl-1);
-  @include define-theme-variable('box-shadow-level-2', $box-shadow-lvl-2);
-  @include define-theme-variable('box-shadow-level-3', $box-shadow-lvl-3);
-  @include define-theme-variable('box-shadow-level-4', $box-shadow-lvl-4);
-  @include define-theme-variable('box-shadow-level-5', $box-shadow-lvl-5);
+    --theme-box-shadow-insert: var(--theme-inset-shadow-1);
+  }
 }

packages/core/scss/ix.scss

@@ -15,10 +15,9 @@
 /* Import global stylings for Web Components */
 @import './../src/components/toast/styles/toast-container';
 
-/* Default themes */
+/* Default Theme */
 @import './theme/classic-dark';
 @import './theme/classic-light';
-@import './theme/static-colors';
 
 /* Common */
 @import './common-variables';

packages/core/scss/theme/classic-dark/_border.scss

@@ -0,0 +1,35 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-primary-bdr-1: 0.0625rem solid var(--theme-color-primary);
+      --theme-primary-bdr-2: 0.125rem solid var(--theme-color-primary);
+      --theme-dynamic-bdr-1: 0.0625rem solid var(--theme-color-dynamic);
+      --theme-dynamic-bdr-2: 0.125rem solid var(--theme-color-dynamic);
+      --theme-contrast-bdr-1: 0.0625rem solid var(--theme-color-contrast-bdr);
+      --theme-contrast-bdr-2: 0.125rem solid var(--theme-color-contrast-bdr);
+      --theme-std-bdr-1: 0.0625rem solid var(--theme-color-std-bdr);
+      --theme-std-bdr-2: 0.125rem solid var(--theme-color-std-bdr);
+      --theme-soft-bdr-1: 0.0625rem solid var(--theme-color-soft-bdr);
+      --theme-soft-bdr-2: 0.125rem solid var(--theme-color-soft-bdr);
+      --theme-soft-dashed-bdr-1: 0.0625rem dashed var(--theme-color-soft-bdr);
+      --theme-soft-dashed-bdr-2: 0.125rem dashed var(--theme-color-soft-bdr);
+      --theme-weak-bdr-1: 0.0625rem solid var(--theme-color-weak-bdr);
+      --theme-weak-bdr-2: 0.125rem solid var(--theme-color-weak-bdr);
+      --theme-x-weak-bdr-1: 0.0625rem solid var(--theme-color-x-weak-bdr);
+      --theme-x-weak-bdr-2: 0.125rem solid var(--theme-color-x-weak-bdr);
+      --theme-alarm-bdr-1: 0.0625rem solid var(--theme-color-alarm);
+      --theme-alarm-bdr-2: 0.125rem solid var(--theme-color-alarm);
+      --theme-critical-bdr-1: 0.0625rem solid var(--theme-color-critical);
+      --theme-critical-bdr-2: 0.125rem solid var(--theme-color-critical);
+      --theme-warning-bdr-1: 0.0625rem solid var(--theme-color-warning);
+      --theme-warning-bdr-2: 0.125rem solid var(--theme-color-warning);
+      --theme-success-bdr-1: 0.0625rem solid var(--theme-color-success);
+      --theme-success-bdr-2: 0.125rem solid var(--theme-color-success);
+      --theme-info-bdr-1: 0.0625rem solid var(--theme-color-info);
+      --theme-info-bdr-2: 0.125rem solid var(--theme-color-info);
+      --theme-neutral-bdr-1: 0.0625rem solid var(--theme-color-neutral);
+      --theme-neutral-bdr-2: 0.125rem solid var(--theme-color-neutral);
+  }
+}

packages/core/scss/theme/classic-dark/_borderRadius.scss

@@ -0,0 +1,24 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-default-border-radius: 0.25rem;
+      --theme-small-border-radius: 0.125rem;
+      --theme-min-border-radius: 0rem;
+      --theme-btn--border-radius: var(--theme-default-border-radius);
+      --theme-blind--border-radius: var(--theme-default-border-radius);
+      --theme-breadcrumb--border-radius: var(--theme-default-border-radius);
+      --theme-group--border-radius: var(--theme-default-border-radius);
+      --theme-group--border-radius--focus: var(--theme-min-border-radius);
+      --theme-kpi--border-radius: var(--theme-default-border-radius);
+      --theme-input--border-radius: var(--theme-default-border-radius);
+      --theme-menu--border-radius: var(--theme-default-border-radius);
+      --theme-message-bar--border-radius: var(--theme-default-border-radius);
+      --theme-tile--border-radius: var(--theme-default-border-radius);
+      --theme-toast--border-radus: var(--theme-default-border-radius);
+      --theme-flip-tile--border-radius: var(--theme-default-border-radius);
+      --theme-upload--border-radius: var(--theme-default-border-radius);
+      --theme-workflow--border-radius: var(--theme-default-border-radius);
+  }
+}

packages/core/scss/theme/classic-dark/_borderWidth.scss

@@ -0,0 +1,18 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-btn--border-thickness: 0.125rem;
+      --theme-app-header--border-width: 0.0625rem;
+      --theme-blind--border-thickness: 0.0625rem;
+      --theme-checkbox--border-thickness: 0.125rem;
+      --theme-focus--border-thickness: 0.0625rem;
+      --theme-radiobtn--border-thickness: 0.125rem;
+      --theme-input--border-thickness: 0.0625rem;
+      --theme-menu--border-thickness: 0rem;
+      --theme-message-bar--border-thickness: 0.125rem;
+      --theme-modal--border-thickness: 0.0625rem;
+      --theme-toast--border-thickness: 0rem;
+  }
+}

packages/core/scss/theme/classic-dark/_boxShadow.scss

@@ -0,0 +1,19 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-shadow-1: 0px 2px 2px var(--theme-color-shadow-2), 0px 1px 1px var(--theme-color-shadow-1);
+      --theme-shadow-2: -4px 0px 8px var(--theme-color-shadow-2), 4px 0px 8px var(--theme-color-shadow-2), 0px 0px 16px var(--theme-color-shadow-1);
+      --theme-shadow-3: 0px 2px 6px var(--theme-color-shadow-2), 0px 0px 8px var(--theme-color-shadow-1);
+      --theme-shadow-4: 0px 0px 2px var(--theme-color-shadow-1), 0px 4px 8px var(--theme-color-shadow-1), 0px 12px 18px var(--theme-color-shadow-1);
+      --theme-inset-shadow-1: insert 0px 2px 4px var(--theme-color-shadow-3);
+      --theme-input--box-shadow: none;
+      --theme-menu--box-shadow: var(--theme-shadow-4);
+      --theme-navigation--box-shadow: var(--theme-shadow-2);
+      --theme-modal--box-shadow: var(--theme-shadow-4);
+      --theme-switch-thumb--box-shadow: none;
+      --theme-tile--box-shadow: var(--theme-shadow-3);
+      --theme-toast--box-shadow: var(--theme-shadow-4);
+  }
+}