@siemens/element-theme 47.0.0

package/src/theme/_data-colors.scss

@@ -0,0 +1,105 @@
+// Additional color palette defined by the theme, must solely be used for data visualization
+// stylelint-disable color-no-hex
+
+// Siemens data colors
+$color-data-light-petrol: #6c7be3;
+$color-data-petrol: #5a5daa;
+$color-data-bold-green: #7c8cff;
+
+$color-data-deep-blue-100: #e7e7e7;
+$color-data-deep-blue-200: #d2d2d2;
+$color-data-deep-blue-400: #a8a8a8;
+$color-data-deep-blue-500: #979797;
+$color-data-deep-blue-700: #676666;
+$color-data-deep-blue-900: #484848;
+
+$color-data-turquoise-100: #7adfd3;
+$color-data-turquoise-200: #40c8b9;
+$color-data-turquoise-400: #00b195;
+$color-data-turquoise-500: #009e84;
+$color-data-turquoise-700: #166a5e;
+$color-data-turquoise-900: #003f36;
+
+$color-data-sand-100: #f3f0ea;
+$color-data-sand-200: #e3dfd4;
+$color-data-sand-400: #c9c2b2;
+$color-data-sand-500: #aaaa96;
+$color-data-sand-700: #b2aa91;
+$color-data-sand-900: #80715b;
+
+$color-data-royal-blue-100: #b2e0ff;
+$color-data-royal-blue-200: #97c7ff;
+$color-data-royal-blue-400: #6895f6;
+$color-data-royal-blue-500: #3664c6;
+$color-data-royal-blue-700: #00237a;
+$color-data-royal-blue-900: #00004a;
+
+$color-data-blue-100: #ccf2f8;
+$color-data-blue-200: #80dfed;
+$color-data-blue-400: #4dd1e7;
+$color-data-blue-500: #00bedc;
+$color-data-blue-700: #0087be;
+$color-data-blue-900: #00557c;
+
+$color-data-interactive-coral-100: #d0f4f6;
+$color-data-interactive-coral-200: #6ddceb;
+$color-data-interactive-coral-400: #00bcd4;
+$color-data-interactive-coral-500: #0097a7;
+$color-data-interactive-coral-700: #006978;
+$color-data-interactive-coral-900: #003640;
+
+$color-data-plum-100: #ffbeda;
+$color-data-plum-200: #ff98c4;
+$color-data-plum-400: #e5659b;
+$color-data-plum-500: #c04774;
+$color-data-plum-700: #9f1853;
+$color-data-plum-900: #4f153d;
+
+$color-data-purple-100: #d2cbff;
+$color-data-purple-200: #bfb0f3;
+$color-data-purple-400: #a68dff;
+$color-data-purple-500: #805cff;
+$color-data-purple-700: #7353e5;
+$color-data-purple-900: #553ba3;
+
+$color-data-orchid-100: #edd6f2;
+$color-data-orchid-200: #d399dd;
+$color-data-orchid-400: #b95cc9;
+$color-data-orchid-500: #a733bc;
+$color-data-orchid-700: #740089;
+$color-data-orchid-900: #52245c;
+
+$color-data-orange-100: #ffdeb2;
+$color-data-orange-200: #ffbc66;
+$color-data-orange-400: #ff9000;
+$color-data-orange-500: #e57700;
+$color-data-orange-700: #be5925;
+$color-data-orange-900: #801100;
+
+$color-data-yellow-100: #fff7d6;
+$color-data-yellow-200: #ffe784;
+$color-data-yellow-400: #ffd732;
+$color-data-yellow-500: #e5bd19;
+$color-data-yellow-700: #b28a00;
+$color-data-yellow-900: #805800;
+
+$color-data-red-100: #fcccd7;
+$color-data-red-200: #ffa8b3;
+$color-data-red-400: #ff6779;
+$color-data-red-500: #ff2640;
+$color-data-red-700: #d72339;
+$color-data-red-900: #900;
+
+$color-data-green-100: #ccf7de;
+$color-data-green-200: #80ebac;
+$color-data-green-400: #01d65a;
+$color-data-green-500: #00a327;
+$color-data-green-700: #00890e;
+$color-data-green-900: #005700;
+
+$color-data-avocado-100: #f3f9e0;
+$color-data-avocado-200: #d1e98a;
+$color-data-avocado-400: #9ec625;
+$color-data-avocado-500: #637d17;
+$color-data-avocado-700: #435410;
+$color-data-avocado-900: #2e3a0a;

package/src/theme/_theme-element.scss

@@ -0,0 +1,339 @@
+@use './base-colors' as base;
+@use './data-colors' as data;
+
+$theme-element-light: (
+  body-font-family: "'Arial', sans-serif",
+  button-radius: 2px,
+  button-focus-width: 6px,
+  button-focus-overlay-width: 1px,
+  button-focus-overlay-color: rgba(base.$color-white, 0.7),
+  input-radius: 2px,
+  brand-logo:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136.221 12'%3E%3Cg id='Gruppe_4763' data-name='Gruppe 4763' transform='translate(-85 -28)'%3E%3Cg id='Polygon_3' data-name='Polygon 3' transform='translate(111 28)' fill='none'%3E%3Cpath d='M7,0l7,12H0Z' stroke='none'/%3E%3Cpath d='M 7 3.969271659851074 L 3.482074737548828 10 L 10.51792526245117 10 L 7 3.969271659851074 M 7 9.5367431640625e-07 L 14 12 L 0 12 L 7 9.5367431640625e-07 Z' stroke='none' fill='%23000'/%3E%3C/g%3E%3Cg id='Ellipse_14' data-name='Ellipse 14' transform='translate(99 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='6' stroke='none'/%3E%3Ccircle cx='6' cy='6' r='5' fill='none'/%3E%3C/g%3E%3Cg id='Rechteck_1111' data-name='Rechteck 1111' transform='translate(85 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect width='12' height='12' stroke='none'/%3E%3Crect x='1' y='1' width='10' height='10' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_4060' data-name='Pfad 4060' d='M4.289,14.938V10.177L-.137,3.347H2.89L4.8,6.415q.376.605.859,1.513.458-.875.867-1.538l1.9-3.043h2.855L6.9,10.177v4.761Zm12.54-11.8a5.162,5.162,0,0,1,4.188,1.734,6.4,6.4,0,0,1,1.4,4.27,6.2,6.2,0,0,1-1.652,4.54,5.249,5.249,0,0,1-3.935,1.456,5.162,5.162,0,0,1-4.188-1.734,6.5,6.5,0,0,1-1.4-4.335A6.126,6.126,0,0,1,12.894,4.59,5.283,5.283,0,0,1,16.829,3.143ZM16.82,5.188a2.46,2.46,0,0,0-2.184,1.178,4.906,4.906,0,0,0-.7,2.732,4.78,4.78,0,0,0,.826,2.994,2.617,2.617,0,0,0,4.254-.18,4.922,4.922,0,0,0,.7-2.765,4.706,4.706,0,0,0-.826-2.953A2.484,2.484,0,0,0,16.82,5.188Zm7.64-1.84H27.07v6.732a4.482,4.482,0,0,0,.368,2.249,1.662,1.662,0,0,0,.728.56,2.652,2.652,0,0,0,1.063.209,2.744,2.744,0,0,0,1.194-.249,1.6,1.6,0,0,0,.753-.675,5.051,5.051,0,0,0,.286-2.094V3.347H33.99V9.768a15.378,15.378,0,0,1-.139,2.593q-.6,2.781-4.63,2.781-3.125,0-4.18-1.669a3.279,3.279,0,0,1-.466-1.28,17.763,17.763,0,0,1-.115-2.425ZM36.64,14.938V3.347h4.188a8.256,8.256,0,0,1,1.763.151,3.086,3.086,0,0,1,1.141.495,2.874,2.874,0,0,1,1.145,2.47,3.085,3.085,0,0,1-.56,1.881,2.812,2.812,0,0,1-1.6,1.039,1.748,1.748,0,0,1,.773.6,11.953,11.953,0,0,1,.863,1.689l1.464,3.264H43.029L42.1,12.721A8.465,8.465,0,0,0,41.09,10.8a1.551,1.551,0,0,0-1.235-.54H39.25v4.679ZM39.184,8.3h.908a3.137,3.137,0,0,0,1.481-.27,1.328,1.328,0,0,0,.7-1.26,1.294,1.294,0,0,0-.5-1.137,3.09,3.09,0,0,0-1.677-.327h-.908Zm12.434,6.634V3.347h1.342V13.834h5.022v1.1ZM63.626,3.183a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,63.618,15.1a4.5,4.5,0,0,1-3.8-1.775A6.815,6.815,0,0,1,58.5,9.081a7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,63.626,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,66.252,5.5,3.237,3.237,0,0,0,63.626,4.288Zm15.9,4.671v5.481a10.2,10.2,0,0,1-1.734.479A9.6,9.6,0,0,1,76,15.1a5.161,5.161,0,0,1-3.8-1.456,5.848,5.848,0,0,1-1.636-4.352,6.279,6.279,0,0,1,1.644-4.556,5.1,5.1,0,0,1,3.845-1.554A8.072,8.072,0,0,1,79.446,4l-.393,1.072a6.617,6.617,0,0,0-3.043-.785,3.483,3.483,0,0,0-3.018,1.481,5.926,5.926,0,0,0-1.006,3.509,4.879,4.879,0,0,0,1.374,3.7A3.852,3.852,0,0,0,76.133,14a6.167,6.167,0,0,0,2.053-.368V10.063H75.9v-1.1Zm7.436-5.775a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,86.955,15.1a4.5,4.5,0,0,1-3.8-1.775,6.815,6.815,0,0,1-1.317-4.245,7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,86.963,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,89.589,5.5,3.237,3.237,0,0,0,86.963,4.288Z' transform='translate(129.137 24.857)' fill='%23000'/%3E%3C/g%3E%3C/svg%3E%0A"),
+  brand-logo-width: 136.221px,
+  brand-logo-height: 12px,
+  brand-logo-text: "'Element logo'",
+
+  radius-0: 0,
+  radius-1: 2px,
+  radius-2: 4px,
+  radius-3: 8px,
+
+  ui-0: base.$color-interactive-blue-500,
+  ui-0-hover: base.$color-teal,
+  ui-1: base.$color-deep-blue-900,
+  ui-2: base.$color-deep-blue-600,
+  ui-3: base.$color-deep-blue-400,
+  ui-4: base.$color-deep-blue-100,
+  ui-5: base.$color-white,
+  ui-6: base.$color-black,
+
+  base-0: base.$color-light-sand,
+  base-1: base.$color-white,
+  base-1-hover: base.$color-light-sand,
+  base-1-selected: base.$color-sand,
+  base-2: base.$color-white,
+  base-3: base.$color-white,
+  base-information: base.$color-blue-100,
+  base-success: base.$color-green-100,
+  base-caution: base.$color-yellow-100,
+  base-warning: base.$color-orange-100,
+  base-danger: base.$color-red-100,
+  base-translucent-1: rgba(base.$color-black, 0.3),
+  base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
+  action-primary: base.$color-interactive-blue-500,
+  action-primary-hover: base.$color-teal,
+  action-primary-text: base.$color-white,
+  action-secondary: transparent,
+  action-secondary-hover: base.$color-light-bold-green,
+  action-secondary-text: base.$color-interactive-blue-500,
+  action-secondary-text-hover: base.$color-teal,
+  action-secondary-border: base.$color-interactive-blue-500,
+  action-secondary-border-hover: base.$color-teal,
+  action-secondary-warning: base.$color-orange-900,
+  action-secondary-danger: base.$color-red-500,
+  action-warning: base.$color-orange-700,
+  action-warning-hover: base.$color-orange-900,
+  action-warning-text: base.$color-white,
+  action-danger: base.$color-red-500,
+  action-danger-hover: base.$color-red-700,
+  action-danger-text: base.$color-white,
+  action-disabled-opacity: 0.5,
+
+  text-primary: base.$color-deep-blue-900,
+  text-secondary: base.$color-deep-blue-700,
+  text-disabled: base.$color-deep-blue-500,
+  text-inverse: base.$color-white,
+  text-active: base.$color-interactive-blue-500,
+  text-information: base.$color-blue-700,
+  text-success: base.$color-green-700,
+  text-caution: base.$color-yellow-900,
+  text-warning: base.$color-orange-900,
+  text-danger: base.$color-red-700,
+
+  status-information: base.$color-blue-500,
+  status-information-contrast: base.$color-white,
+  status-success: base.$color-green-700,
+  status-success-contrast: base.$color-white,
+  status-caution: base.$color-yellow-500,
+  status-caution-contrast: base.$color-deep-blue-900,
+  status-warning: base.$color-orange-700,
+  status-warning-contrast: base.$color-white,
+  status-danger: base.$color-red-500,
+  status-danger-contrast: base.$color-white,
+  status-critical: base.$color-red-900,
+  status-critical-contrast: base.$color-white,
+
+  focus-default: base.$color-focus,
+
+  box-shadow-color-1: rgba(base.$color-black, 0.16),
+  box-shadow-color-2: rgba(base.$color-black, 0.08),
+  data-1: data.$color-data-petrol,
+  data-2: data.$color-data-turquoise-900,
+  data-3: data.$color-data-green-700,
+  data-4: data.$color-data-turquoise-700,
+  data-5: data.$color-data-royal-blue-500,
+  data-6: data.$color-data-interactive-coral-900,
+  data-7: data.$color-data-purple-700,
+  data-8: data.$color-data-purple-900,
+  data-9: data.$color-data-orchid-700,
+  data-10: data.$color-data-red-700,
+  data-11: data.$color-data-plum-900,
+  data-12: data.$color-data-plum-500,
+  data-13: data.$color-data-royal-blue-700,
+  data-14: data.$color-data-orange-900,
+  data-15: data.$color-data-yellow-900,
+  data-16: data.$color-data-sand-700,
+  data-17: data.$color-data-deep-blue-700,
+
+  data-green-1: data.$color-data-green-400,
+  data-green-2: data.$color-data-green-500,
+  data-green-3: data.$color-data-green-700,
+  data-green-4: data.$color-data-green-900,
+
+  data-turquoise-1: data.$color-data-turquoise-400,
+  data-turquoise-2: data.$color-data-turquoise-500,
+  data-turquoise-3: data.$color-data-turquoise-700,
+  data-turquoise-4: data.$color-data-turquoise-900,
+
+  data-interactive-coral-1: data.$color-data-interactive-coral-400,
+  data-interactive-coral-2: data.$color-data-interactive-coral-500,
+  data-interactive-coral-3: data.$color-data-interactive-coral-700,
+  data-interactive-coral-4: data.$color-data-interactive-coral-900,
+
+  data-purple-1: data.$color-data-purple-400,
+  data-purple-2: data.$color-data-purple-500,
+  data-purple-3: data.$color-data-purple-700,
+  data-purple-4: data.$color-data-purple-900,
+
+  data-plum-1: data.$color-data-plum-400,
+  data-plum-2: data.$color-data-plum-500,
+  data-plum-3: data.$color-data-plum-700,
+  data-plum-4: data.$color-data-plum-900,
+
+  data-red-1: data.$color-data-red-400,
+  data-red-2: data.$color-data-red-500,
+  data-red-3: data.$color-data-red-700,
+  data-red-4: data.$color-data-red-900,
+
+  data-orange-1: data.$color-data-orange-200,
+  data-orange-2: data.$color-data-orange-400,
+  data-orange-3: data.$color-data-orange-500,
+  data-orange-4: data.$color-data-orange-700,
+
+  data-sand-1: data.$color-data-sand-400,
+  data-sand-2: data.$color-data-sand-500,
+  data-sand-3: data.$color-data-sand-700,
+  data-sand-4: data.$color-data-sand-900,
+
+  color-passed: base.$color-green-700,
+  color-failed: data.$color-data-plum-700,
+
+  // additional semantic colors, used in light and dark
+  color-cooling: data.$color-data-blue-700,
+  color-heating: data.$color-data-orange-500,
+  color-comfort: data.$color-data-yellow-700,
+  color-economy: base.$color-blue-700,
+  color-off: base.$color-deep-blue-500,
+  color-on: base.$color-green-500,
+  color-default: base.$color-deep-blue-700,
+
+  color-bad: base.$color-red-500,
+  color-poor: base.$color-orange-500,
+  color-average: base.$color-yellow-500,
+  color-good: data.$color-data-avocado-400,
+  color-excellent: data.$color-data-green-500,
+
+  range-danger: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-red-500),
+  range-warning: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-orange-700),
+  range-caution: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-yellow-500),
+  range-information: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-blue-500),
+  range-success: linear-gradient(90deg, base.$color-deep-blue-100, data.$color-data-green-500),
+  range-temp-heating: linear-gradient(90deg, base.$color-deep-blue-100, data.$color-data-orange-500),
+  range-temp-cooling: linear-gradient(90deg, base.$color-deep-blue-100, data.$color-data-blue-700),
+  range-comfort: linear-gradient(90deg, base.$color-deep-blue-100, data.$color-data-yellow-700),
+  range-temperature: linear-gradient(
+      90deg,
+      data.$color-data-orange-500,
+      base.$color-deep-blue-100,
+      data.$color-data-blue-700
+    ),
+  range-humidity: linear-gradient(
+      90deg,
+      data.$color-data-plum-500,
+      base.$color-deep-blue-100,
+      data.$color-data-royal-blue-500
+    ),
+  // cannot use color var due to url encoding of #
+  // original icon: element-validation-issue
+  feedback-icon-invalid:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d72339' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3Cpath d='M256 279.12c-11.05 0-20-8.95-20-20v-89.8c0-11.05 8.95-20 20-20s20 8.95 20 20v89.8c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/%3E%3C/svg%3E%0A"),
+  // original icon: element-validation-warning
+  feedback-icon-warning:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c75300' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M256 279.12c-11.05 0-20-8.95-20-20v-79.14c0-11.05 8.95-20 20-20s20 8.95 20 20v79.14c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/%3E%3Cpath d='M441.77 338.25c-.03-.06-.06-.11-.1-.17L295.72 94.42c-13.28-21.9-41.91-28.91-63.81-15.63a46.637 46.637 0 0 0-15.63 15.63l-.03.06-145.92 243.6c-.03.05-.07.11-.1.17-12.81 22.18-5.18 50.65 17 63.46 6.9 3.98 14.75 6.13 22.72 6.22H402.05c12.41-.14 24.02-5.1 32.7-13.97 8.68-8.87 13.38-20.59 13.24-33a46.602 46.602 0 0 0-6.22-22.72Zm-32.76 30.54c-1.96 2.01-4.48 3.09-7.28 3.14H110.26c-1.77-.03-3.51-.52-5.03-1.4-2.44-1.41-4.12-3.61-4.85-6.36-.72-2.7-.4-5.39.95-7.79L247.1 113.02c.86-1.4 2.06-2.59 3.47-3.44 1.63-.99 3.47-1.51 5.35-1.51 3.79 0 7.08 1.83 9.02 5.02l145.74 243.3c.84 1.51 1.3 3.22 1.32 4.97.03 2.83-1 5.4-2.98 7.43Z'/%3E%3C/svg%3E"),
+  // original icon: element-validation-success
+  feedback-icon-valid:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E")
+);
+
+$theme-element-dark: (
+  button-focus-overlay-color: rgba(base.$color-deep-blue-900, 0.7),
+  brand-logo:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136.221 12'%3E%3Cg id='Gruppe_4763' data-name='Gruppe 4763' transform='translate(-85 -28)'%3E%3Cg id='Polygon_3' data-name='Polygon 3' transform='translate(111 28)' fill='none'%3E%3Cpath d='M7,0l7,12H0Z' stroke='none'/%3E%3Cpath d='M 7 3.969271659851074 L 3.482074737548828 10 L 10.51792526245117 10 L 7 3.969271659851074 M 7 9.5367431640625e-07 L 14 12 L 0 12 L 7 9.5367431640625e-07 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3Cg id='Ellipse_14' data-name='Ellipse 14' transform='translate(99 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='6' stroke='none'/%3E%3Ccircle cx='6' cy='6' r='5' fill='none'/%3E%3C/g%3E%3Cg id='Rechteck_1111' data-name='Rechteck 1111' transform='translate(85 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect width='12' height='12' stroke='none'/%3E%3Crect x='1' y='1' width='10' height='10' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_4060' data-name='Pfad 4060' d='M4.289,14.938V10.177L-.137,3.347H2.89L4.8,6.415q.376.605.859,1.513.458-.875.867-1.538l1.9-3.043h2.855L6.9,10.177v4.761Zm12.54-11.8a5.162,5.162,0,0,1,4.188,1.734,6.4,6.4,0,0,1,1.4,4.27,6.2,6.2,0,0,1-1.652,4.54,5.249,5.249,0,0,1-3.935,1.456,5.162,5.162,0,0,1-4.188-1.734,6.5,6.5,0,0,1-1.4-4.335A6.126,6.126,0,0,1,12.894,4.59,5.283,5.283,0,0,1,16.829,3.143ZM16.82,5.188a2.46,2.46,0,0,0-2.184,1.178,4.906,4.906,0,0,0-.7,2.732,4.78,4.78,0,0,0,.826,2.994,2.617,2.617,0,0,0,4.254-.18,4.922,4.922,0,0,0,.7-2.765,4.706,4.706,0,0,0-.826-2.953A2.484,2.484,0,0,0,16.82,5.188Zm7.64-1.84H27.07v6.732a4.482,4.482,0,0,0,.368,2.249,1.662,1.662,0,0,0,.728.56,2.652,2.652,0,0,0,1.063.209,2.744,2.744,0,0,0,1.194-.249,1.6,1.6,0,0,0,.753-.675,5.051,5.051,0,0,0,.286-2.094V3.347H33.99V9.768a15.378,15.378,0,0,1-.139,2.593q-.6,2.781-4.63,2.781-3.125,0-4.18-1.669a3.279,3.279,0,0,1-.466-1.28,17.763,17.763,0,0,1-.115-2.425ZM36.64,14.938V3.347h4.188a8.256,8.256,0,0,1,1.763.151,3.086,3.086,0,0,1,1.141.495,2.874,2.874,0,0,1,1.145,2.47,3.085,3.085,0,0,1-.56,1.881,2.812,2.812,0,0,1-1.6,1.039,1.748,1.748,0,0,1,.773.6,11.953,11.953,0,0,1,.863,1.689l1.464,3.264H43.029L42.1,12.721A8.465,8.465,0,0,0,41.09,10.8a1.551,1.551,0,0,0-1.235-.54H39.25v4.679ZM39.184,8.3h.908a3.137,3.137,0,0,0,1.481-.27,1.328,1.328,0,0,0,.7-1.26,1.294,1.294,0,0,0-.5-1.137,3.09,3.09,0,0,0-1.677-.327h-.908Zm12.434,6.634V3.347h1.342V13.834h5.022v1.1ZM63.626,3.183a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,63.618,15.1a4.5,4.5,0,0,1-3.8-1.775A6.815,6.815,0,0,1,58.5,9.081a7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,63.626,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,66.252,5.5,3.237,3.237,0,0,0,63.626,4.288Zm15.9,4.671v5.481a10.2,10.2,0,0,1-1.734.479A9.6,9.6,0,0,1,76,15.1a5.161,5.161,0,0,1-3.8-1.456,5.848,5.848,0,0,1-1.636-4.352,6.279,6.279,0,0,1,1.644-4.556,5.1,5.1,0,0,1,3.845-1.554A8.072,8.072,0,0,1,79.446,4l-.393,1.072a6.617,6.617,0,0,0-3.043-.785,3.483,3.483,0,0,0-3.018,1.481,5.926,5.926,0,0,0-1.006,3.509,4.879,4.879,0,0,0,1.374,3.7A3.852,3.852,0,0,0,76.133,14a6.167,6.167,0,0,0,2.053-.368V10.063H75.9v-1.1Zm7.436-5.775a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,86.955,15.1a4.5,4.5,0,0,1-3.8-1.775,6.815,6.815,0,0,1-1.317-4.245,7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,86.963,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,89.589,5.5,3.237,3.237,0,0,0,86.963,4.288Z' transform='translate(129.137 24.857)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"),
+  ui-0: base.$color-interactive-coral,
+  ui-0-hover: base.$color-bold-green,
+  ui-1: base.$color-white,
+  ui-2: base.$color-deep-blue-400,
+  ui-3: base.$color-deep-blue-600,
+  ui-4: base.$color-deep-blue-700,
+  ui-5: base.$color-deep-blue-800,
+  ui-6: base.$color-black,
+
+  base-0: base.$color-deep-blue-900,
+  base-1: base.$color-deep-blue-800,
+  base-1-hover: base.$color-dark-grayish-navy,
+  base-1-selected: base.$color-grayish-navy,
+  base-2: base.$color-deep-blue-900,
+  base-3: base.$color-grayish-navy,
+  base-information: base.$color-blue-900,
+  base-success: base.$color-green-900,
+  base-caution: base.$color-yellow-900,
+  base-warning: base.$color-orange-900,
+  base-danger: base.$color-red-900,
+  base-translucent-1: rgba(base.$color-black, 0.7),
+  base-translucent-2: rgba(base.$color-white, 0.88),
+  action-primary: base.$color-interactive-coral,
+  action-primary-hover: base.$color-bold-green,
+  action-primary-text: base.$color-deep-blue-900,
+  action-secondary: transparent,
+  action-secondary-hover: base.$color-dark-bold-green,
+  action-secondary-text: base.$color-interactive-coral,
+  action-secondary-text-hover: base.$color-bold-green,
+  action-secondary-border: base.$color-interactive-coral,
+  action-secondary-border-hover: base.$color-bold-green,
+  action-secondary-warning: base.$color-orange-500,
+  action-secondary-danger: base.$color-red-300,
+  action-warning: base.$color-orange-500,
+  action-warning-hover: base.$color-orange-700,
+  action-warning-text: base.$color-deep-blue-900,
+  action-danger: base.$color-red-500,
+  action-danger-hover: base.$color-red-700,
+  action-danger-text: base.$color-white,
+  action-disabled-opacity: 0.5,
+
+  text-primary: base.$color-white,
+  text-secondary: base.$color-deep-blue-300,
+  text-disabled: base.$color-deep-blue-600,
+  text-inverse: base.$color-deep-blue-900,
+  text-active: base.$color-interactive-coral,
+  text-information: base.$color-blue-100,
+  text-success: base.$color-green-100,
+  text-caution: base.$color-yellow-100,
+  text-warning: base.$color-orange-100,
+  text-danger: base.$color-red-100,
+
+  status-information: base.$color-blue-500,
+  status-information-contrast: base.$color-white,
+  status-success: base.$color-green-500,
+  status-success-contrast: base.$color-deep-blue-900,
+  status-caution: base.$color-yellow-300,
+  status-caution-contrast: base.$color-deep-blue-900,
+  status-warning: base.$color-orange-500,
+  status-warning-contrast: base.$color-deep-blue-900,
+  status-danger: base.$color-red-500,
+  status-danger-contrast: base.$color-white,
+  status-critical: base.$color-red-700,
+  status-critical-contrast: base.$color-white,
+
+  focus-default: base.$color-focus,
+
+  box-shadow-color-1: rgba(base.$color-black, 0.4),
+  box-shadow-color-2: rgba(base.$color-black, 0.2),
+  data-1: data.$color-data-light-petrol,
+  data-2: data.$color-data-bold-green,
+  data-3: data.$color-data-green-400,
+  data-4: data.$color-data-turquoise-100,
+  data-5: data.$color-data-royal-blue-400,
+  data-6: data.$color-data-interactive-coral-100,
+  data-7: data.$color-data-purple-500,
+  data-8: data.$color-data-purple-200,
+  data-9: data.$color-data-orchid-400,
+  data-10: data.$color-data-red-500,
+  data-11: data.$color-data-plum-400,
+  data-12: data.$color-data-plum-200,
+  data-13: data.$color-data-royal-blue-200,
+  data-14: data.$color-data-orange-400,
+  data-15: data.$color-data-yellow-400,
+  data-16: data.$color-data-sand-500,
+  data-17: data.$color-data-deep-blue-500,
+
+  data-green-1: data.$color-data-green-200,
+  data-green-2: data.$color-data-green-400,
+  data-green-3: data.$color-data-green-500,
+  data-green-4: data.$color-data-green-700,
+
+  data-turquoise-1: data.$color-data-turquoise-200,
+  data-turquoise-2: data.$color-data-turquoise-400,
+  data-turquoise-3: data.$color-data-turquoise-500,
+  data-turquoise-4: data.$color-data-turquoise-700,
+
+  data-interactive-coral-1: data.$color-data-interactive-coral-200,
+  data-interactive-coral-2: data.$color-data-interactive-coral-400,
+  data-interactive-coral-3: data.$color-data-interactive-coral-500,
+  data-interactive-coral-4: data.$color-data-interactive-coral-700,
+
+  data-purple-1: data.$color-data-purple-200,
+  data-purple-2: data.$color-data-purple-400,
+  data-purple-3: data.$color-data-purple-500,
+  data-purple-4: data.$color-data-purple-700,
+
+  data-plum-1: data.$color-data-plum-200,
+  data-plum-2: data.$color-data-plum-400,
+  data-plum-3: data.$color-data-plum-500,
+  data-plum-4: data.$color-data-plum-700,
+
+  data-red-1: data.$color-data-red-200,
+  data-red-2: data.$color-data-red-400,
+  data-red-3: data.$color-data-red-500,
+  data-red-4: data.$color-data-red-700,
+
+  data-orange-1: data.$color-data-orange-200,
+  data-orange-2: data.$color-data-orange-400,
+  data-orange-3: data.$color-data-orange-500,
+  data-orange-4: data.$color-data-orange-700,
+
+  data-sand-1: data.$color-data-sand-200,
+  data-sand-2: data.$color-data-sand-400,
+  data-sand-3: data.$color-data-sand-500,
+  data-sand-4: data.$color-data-sand-700,
+
+  color-passed: base.$color-green-500,
+  color-failed: data.$color-data-plum-500,
+
+  // original icon: element-validation-warning
+  feedback-icon-warning:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9000' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M256 279.12c-11.05 0-20-8.95-20-20v-79.14c0-11.05 8.95-20 20-20s20 8.95 20 20v79.14c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/%3E%3Cpath d='M441.77 338.25c-.03-.06-.06-.11-.1-.17L295.72 94.42c-13.28-21.9-41.91-28.91-63.81-15.63a46.637 46.637 0 0 0-15.63 15.63l-.03.06-145.92 243.6c-.03.05-.07.11-.1.17-12.81 22.18-5.18 50.65 17 63.46 6.9 3.98 14.75 6.13 22.72 6.22H402.05c12.41-.14 24.02-5.1 32.7-13.97 8.68-8.87 13.38-20.59 13.24-33a46.602 46.602 0 0 0-6.22-22.72Zm-32.76 30.54c-1.96 2.01-4.48 3.09-7.28 3.14H110.26c-1.77-.03-3.51-.52-5.03-1.4-2.44-1.41-4.12-3.61-4.85-6.36-.72-2.7-.4-5.39.95-7.79L247.1 113.02c.86-1.4 2.06-2.59 3.47-3.44 1.63-.99 3.47-1.51 5.35-1.51 3.79 0 7.08 1.83 9.02 5.02l145.74 243.3c.84 1.51 1.3 3.22 1.32 4.97.03 2.83-1 5.4-2.98 7.43Z'/%3E%3C/svg%3E"),
+  // original icon: element-validation-success
+  feedback-icon-valid:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E")
+);

package/src/theme.scss

@@ -0,0 +1,49 @@
+$element-theme-default: null !default;
+$element-themes: null !default;
+
+$_theme-default: 'element';
+$_themes: () !default;
+
+// Load Bootstrap
+@use 'styles/bootstrap';
+
+// Component extensions
+@use 'styles/components/application-header';
+@use 'styles/components/container-grid';
+@use 'styles/components/datatable';
+@use 'styles/components/electron-titlebar';
+@use 'styles/components/elevation';
+@use 'styles/components/focus';
+@use 'styles/components/icons';
+@use 'styles/components/layout';
+@use 'styles/components/links';
+@use 'styles/components/pills';
+@use 'styles/components/scrollbar';
+@use 'styles/components/skeleton';
+@use 'styles/components/switch';
+@use 'styles/components/system-banner';
+@use 'styles/components/widgets';
+@use 'styles/components/drag_drop';
+
+// accessibility extensions
+@use 'styles/accessibility';
+
+// theming
+@use 'styles/themes';
+@use 'theme/theme-element';
+
+@include themes.configure($element-theme-default, $element-themes);
+@include themes.make-theme(theme-element.$theme-element-light, 'element');
+@include themes.make-theme(theme-element.$theme-element-dark, 'element', true);
+
+html,
+body {
+  block-size: 100%;
+}
+
+// Define what 1rem actually means. Everything here assumes 16px.
+// When the whole thing is properly done, carefully mixing (r)em and px values,
+// this can be removed to allow the user's setting.
+html {
+  font-size: 16px;
+}