@siemens/element-theme 48.0.0-next.5 → 48.0.0-next.7

package/src/theme/_theme-element.scss

@@ -2,189 +2,205 @@
 @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:
+  element-body-font-family: "'Arial', sans-serif",
+  element-button-radius: 2px,
+  element-button-focus-width: 6px,
+  element-button-focus-overlay-width: 1px,
+  element-button-focus-overlay-color: rgba(base.$color-white, 0.7),
+  element-input-radius: 2px,
+  element-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'",
-  company-name: "'ExampleOrg'",
-
-  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-4: base.$color-light-sand,
-  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-critical: data.$color-data-orchid-100,
-  base-translucent-1: rgba(base.$color-black, 0.3),
-  base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
+  element-brand-logo-width: 136.221px,
+  element-brand-logo-height: 12px,
+  element-brand-logo-text: "'Element logo'",
+  element-company-name: "'ExampleOrg'",
+
+  element-radius-0: 0,
+  element-radius-1: 2px,
+  element-radius-2: 4px,
+  element-radius-3: 8px,
+
+  element-ui-0: base.$color-interactive-blue-500,
+  element-ui-0-hover: base.$color-teal,
+  element-ui-1: base.$color-deep-blue-900,
+  element-ui-2: base.$color-deep-blue-600,
+  element-ui-3: base.$color-deep-blue-400,
+  element-ui-4: base.$color-deep-blue-100,
+  element-ui-5: base.$color-white,
+  element-ui-6: base.$color-black,
+
+  element-base-0: base.$color-light-sand,
+  element-base-1: base.$color-white,
+  element-base-1-hover: base.$color-light-sand,
+  element-base-1-selected: base.$color-sand,
+  element-base-2: base.$color-white,
+  element-base-3: base.$color-white,
+  element-base-4: base.$color-light-sand,
+  element-base-information: base.$color-blue-100,
+  element-base-success: base.$color-green-100,
+  element-base-caution: base.$color-yellow-100,
+  element-base-warning: base.$color-orange-100,
+  element-base-danger: base.$color-red-100,
+  element-base-critical: data.$color-data-orchid-100,
+  element-base-translucent-1: rgba(base.$color-black, 0.3),
+  element-base-translucent-2: rgba(base.$color-deep-blue-900, 0.88),
   // EXPERIMENTAL: Do not use
-  base-input-experimental: base.$color-experimental-deep-blue-25,
-  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,
-  text-critical: data.$color-data-orchid-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: data.$color-data-orchid-500,
-  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,
+  element-base-input-experimental: base.$color-experimental-deep-blue-25,
+  element-action-primary: base.$color-interactive-blue-500,
+  element-action-primary-hover: base.$color-teal,
+  element-action-primary-text: base.$color-white,
+  element-action-secondary: transparent,
+  element-action-secondary-hover: base.$color-light-bold-green,
+  element-action-secondary-text: base.$color-interactive-blue-500,
+  element-action-secondary-text-hover: base.$color-teal,
+  element-action-secondary-border: base.$color-interactive-blue-500,
+  element-action-secondary-border-hover: base.$color-teal,
+  element-action-secondary-warning: base.$color-orange-900,
+  element-action-secondary-danger: base.$color-red-500,
+  element-action-warning: base.$color-orange-700,
+  element-action-warning-hover: base.$color-orange-900,
+  element-action-warning-text: base.$color-white,
+  element-action-danger: base.$color-red-500,
+  element-action-danger-hover: base.$color-red-700,
+  element-action-danger-text: base.$color-white,
+  element-action-disabled-opacity: 0.5,
+
+  element-text-primary: base.$color-deep-blue-900,
+  element-text-secondary: base.$color-deep-blue-700,
+  element-text-disabled: base.$color-deep-blue-500,
+  element-text-inverse: base.$color-white,
+  element-text-active: base.$color-interactive-blue-500,
+  element-text-information: base.$color-blue-700,
+  element-text-success: base.$color-green-700,
+  element-text-caution: base.$color-yellow-900,
+  element-text-warning: base.$color-orange-900,
+  element-text-danger: base.$color-red-700,
+  element-text-critical: data.$color-data-orchid-700,
+
+  element-status-information: base.$color-blue-500,
+  element-status-information-contrast: base.$color-white,
+  element-status-success: base.$color-green-700,
+  element-status-success-contrast: base.$color-white,
+  element-status-caution: base.$color-yellow-500,
+  element-status-caution-contrast: base.$color-deep-blue-900,
+  element-status-warning: base.$color-orange-700,
+  element-status-warning-contrast: base.$color-white,
+  element-status-danger: base.$color-red-500,
+  element-status-danger-contrast: base.$color-white,
+  element-status-critical: data.$color-data-orchid-500,
+  element-status-critical-contrast: base.$color-white,
+
+  element-focus-default: base.$color-focus,
+
+  element-box-shadow-color-1: rgba(base.$color-black, 0.16),
+  element-box-shadow-color-2: rgba(base.$color-black, 0.08),
+  element-data-1: data.$color-data-petrol,
+  element-data-2: data.$color-data-turquoise-900,
+  element-data-3: data.$color-data-green-700,
+  element-data-4: data.$color-data-turquoise-700,
+  element-data-5: data.$color-data-royal-blue-500,
+  element-data-6: data.$color-data-interactive-coral-900,
+  element-data-7: data.$color-data-purple-700,
+  element-data-8: data.$color-data-purple-900,
+  element-data-9: data.$color-data-orchid-700,
+  element-data-10: data.$color-data-red-700,
+  element-data-11: data.$color-data-plum-900,
+  element-data-12: data.$color-data-plum-500,
+  element-data-13: data.$color-data-royal-blue-700,
+  element-data-14: data.$color-data-orange-900,
+  element-data-15: data.$color-data-yellow-900,
+  element-data-16: data.$color-data-sand-700,
+  element-data-17: data.$color-data-deep-blue-700,
+
+  element-data-green-1: data.$color-data-green-400,
+  element-data-green-2: data.$color-data-green-500,
+  element-data-green-3: data.$color-data-green-700,
+  element-data-green-4: data.$color-data-green-900,
+
+  element-data-turquoise-1: data.$color-data-turquoise-400,
+  element-data-turquoise-2: data.$color-data-turquoise-500,
+  element-data-turquoise-3: data.$color-data-turquoise-700,
+  element-data-turquoise-4: data.$color-data-turquoise-900,
+
+  element-data-interactive-coral-1: data.$color-data-interactive-coral-400,
+  element-data-interactive-coral-2: data.$color-data-interactive-coral-500,
+  element-data-interactive-coral-3: data.$color-data-interactive-coral-700,
+  element-data-interactive-coral-4: data.$color-data-interactive-coral-900,
+
+  element-data-purple-1: data.$color-data-purple-400,
+  element-data-purple-2: data.$color-data-purple-500,
+  element-data-purple-3: data.$color-data-purple-700,
+  element-data-purple-4: data.$color-data-purple-900,
+
+  element-data-plum-1: data.$color-data-plum-400,
+  element-data-plum-2: data.$color-data-plum-500,
+  element-data-plum-3: data.$color-data-plum-700,
+  element-data-plum-4: data.$color-data-plum-900,
+
+  element-data-red-1: data.$color-data-red-400,
+  element-data-red-2: data.$color-data-red-500,
+  element-data-red-3: data.$color-data-red-700,
+  element-data-red-4: data.$color-data-red-900,
+
+  element-data-orange-1: data.$color-data-orange-200,
+  element-data-orange-2: data.$color-data-orange-400,
+  element-data-orange-3: data.$color-data-orange-500,
+  element-data-orange-4: data.$color-data-orange-700,
+
+  element-data-sand-1: data.$color-data-sand-400,
+  element-data-sand-2: data.$color-data-sand-500,
+  element-data-sand-3: data.$color-data-sand-700,
+  element-data-sand-4: data.$color-data-sand-900,
+
+  element-color-passed: base.$color-green-700,
+  element-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(
+  element-color-cooling: data.$color-data-blue-700,
+  element-color-heating: data.$color-data-orange-500,
+  element-color-comfort: data.$color-data-yellow-700,
+  element-color-economy: base.$color-blue-700,
+  element-color-off: base.$color-deep-blue-500,
+  element-color-on: base.$color-green-500,
+  element-color-default: base.$color-deep-blue-700,
+
+  element-color-bad: base.$color-red-500,
+  element-color-poor: base.$color-orange-500,
+  element-color-average: base.$color-yellow-500,
+  element-color-good: data.$color-data-avocado-400,
+  element-color-excellent: data.$color-data-green-500,
+
+  element-range-danger: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-red-500),
+  element-range-warning: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-orange-700),
+  element-range-caution: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-yellow-500),
+  element-range-information: linear-gradient(90deg, base.$color-deep-blue-100, base.$color-blue-500),
+  element-range-success: linear-gradient(
+      90deg,
+      base.$color-deep-blue-100,
+      data.$color-data-green-500
+    ),
+  element-range-temp-heating: linear-gradient(
+      90deg,
+      base.$color-deep-blue-100,
+      data.$color-data-orange-500
+    ),
+  element-range-temp-cooling: linear-gradient(
+      90deg,
+      base.$color-deep-blue-100,
+      data.$color-data-blue-700
+    ),
+  element-range-comfort: linear-gradient(
+      90deg,
+      base.$color-deep-blue-100,
+      data.$color-data-yellow-700
+    ),
+  element-range-temperature: linear-gradient(
       90deg,
       data.$color-data-orange-500,
       base.$color-deep-blue-100,
       data.$color-data-blue-700
     ),
-  range-humidity: linear-gradient(
+  element-range-humidity: linear-gradient(
       90deg,
       data.$color-data-plum-500,
       base.$color-deep-blue-100,
@@ -192,163 +208,163 @@ $theme-element-light: (
     ),
   // cannot use color var due to url encoding of #
   // original icon: element-validation-issue
-  feedback-icon-invalid:
+  element-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:
+  element-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:
+  element-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"),
-  launchpad-app-background: base.$color-blue-300,
-  launchpad-app-color: base.$color-black
+  element-launchpad-app-background: base.$color-blue-300,
+  element-launchpad-app-color: base.$color-black
 );
 
 $theme-element-dark: (
-  button-focus-overlay-color: rgba(base.$color-deep-blue-900, 0.7),
-  brand-logo:
+  element-button-focus-overlay-color: rgba(base.$color-deep-blue-900, 0.7),
+  element-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-4: base.$color-deep-blue-700,
-  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-critical: data.$color-data-orchid-700,
-  base-translucent-1: rgba(base.$color-black, 0.7),
-  base-translucent-2: rgba(base.$color-white, 0.88),
+  element-ui-0: base.$color-interactive-coral,
+  element-ui-0-hover: base.$color-bold-green,
+  element-ui-1: base.$color-white,
+  element-ui-2: base.$color-deep-blue-400,
+  element-ui-3: base.$color-deep-blue-600,
+  element-ui-4: base.$color-deep-blue-700,
+  element-ui-5: base.$color-deep-blue-800,
+  element-ui-6: base.$color-black,
+
+  element-base-0: base.$color-deep-blue-900,
+  element-base-1: base.$color-deep-blue-800,
+  element-base-1-hover: base.$color-dark-grayish-navy,
+  element-base-1-selected: base.$color-grayish-navy,
+  element-base-2: base.$color-deep-blue-900,
+  element-base-3: base.$color-grayish-navy,
+  element-base-4: base.$color-deep-blue-700,
+  element-base-information: base.$color-blue-900,
+  element-base-success: base.$color-green-900,
+  element-base-caution: base.$color-yellow-900,
+  element-base-warning: base.$color-orange-900,
+  element-base-danger: base.$color-red-900,
+  element-base-critical: data.$color-data-orchid-700,
+  element-base-translucent-1: rgba(base.$color-black, 0.7),
+  element-base-translucent-2: rgba(base.$color-white, 0.88),
   // EXPERIMENTAL: Do not use
-  base-input-experimental: base.$color-experimental-deep-blue-850,
-  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,
-  text-critical: data.$color-data-orchid-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: data.$color-data-orchid-500,
-  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,
+  element-base-input-experimental: base.$color-experimental-deep-blue-850,
+  element-action-primary: base.$color-interactive-coral,
+  element-action-primary-hover: base.$color-bold-green,
+  element-action-primary-text: base.$color-deep-blue-900,
+  element-action-secondary: transparent,
+  element-action-secondary-hover: base.$color-dark-bold-green,
+  element-action-secondary-text: base.$color-interactive-coral,
+  element-action-secondary-text-hover: base.$color-bold-green,
+  element-action-secondary-border: base.$color-interactive-coral,
+  element-action-secondary-border-hover: base.$color-bold-green,
+  element-action-secondary-warning: base.$color-orange-500,
+  element-action-secondary-danger: base.$color-red-300,
+  element-action-warning: base.$color-orange-500,
+  element-action-warning-hover: base.$color-orange-700,
+  element-action-warning-text: base.$color-deep-blue-900,
+  element-action-danger: base.$color-red-500,
+  element-action-danger-hover: base.$color-red-700,
+  element-action-danger-text: base.$color-white,
+  element-action-disabled-opacity: 0.5,
+
+  element-text-primary: base.$color-white,
+  element-text-secondary: base.$color-deep-blue-300,
+  element-text-disabled: base.$color-deep-blue-600,
+  element-text-inverse: base.$color-deep-blue-900,
+  element-text-active: base.$color-interactive-coral,
+  element-text-information: base.$color-blue-100,
+  element-text-success: base.$color-green-100,
+  element-text-caution: base.$color-yellow-100,
+  element-text-warning: base.$color-orange-100,
+  element-text-danger: base.$color-red-100,
+  element-text-critical: data.$color-data-orchid-100,
+
+  element-status-information: base.$color-blue-500,
+  element-status-information-contrast: base.$color-white,
+  element-status-success: base.$color-green-500,
+  element-status-success-contrast: base.$color-deep-blue-900,
+  element-status-caution: base.$color-yellow-300,
+  element-status-caution-contrast: base.$color-deep-blue-900,
+  element-status-warning: base.$color-orange-500,
+  element-status-warning-contrast: base.$color-deep-blue-900,
+  element-status-danger: base.$color-red-500,
+  element-status-danger-contrast: base.$color-white,
+  element-status-critical: data.$color-data-orchid-500,
+  element-status-critical-contrast: base.$color-white,
+
+  element-focus-default: base.$color-focus,
+
+  element-box-shadow-color-1: rgba(base.$color-black, 0.4),
+  element-box-shadow-color-2: rgba(base.$color-black, 0.2),
+  element-data-1: data.$color-data-light-petrol,
+  element-data-2: data.$color-data-bold-green,
+  element-data-3: data.$color-data-green-400,
+  element-data-4: data.$color-data-turquoise-100,
+  element-data-5: data.$color-data-royal-blue-400,
+  element-data-6: data.$color-data-interactive-coral-100,
+  element-data-7: data.$color-data-purple-500,
+  element-data-8: data.$color-data-purple-200,
+  element-data-9: data.$color-data-orchid-400,
+  element-data-10: data.$color-data-red-500,
+  element-data-11: data.$color-data-plum-400,
+  element-data-12: data.$color-data-plum-200,
+  element-data-13: data.$color-data-royal-blue-200,
+  element-data-14: data.$color-data-orange-400,
+  element-data-15: data.$color-data-yellow-400,
+  element-data-16: data.$color-data-sand-500,
+  element-data-17: data.$color-data-deep-blue-500,
+
+  element-data-green-1: data.$color-data-green-200,
+  element-data-green-2: data.$color-data-green-400,
+  element-data-green-3: data.$color-data-green-500,
+  element-data-green-4: data.$color-data-green-700,
+
+  element-data-turquoise-1: data.$color-data-turquoise-200,
+  element-data-turquoise-2: data.$color-data-turquoise-400,
+  element-data-turquoise-3: data.$color-data-turquoise-500,
+  element-data-turquoise-4: data.$color-data-turquoise-700,
+
+  element-data-interactive-coral-1: data.$color-data-interactive-coral-200,
+  element-data-interactive-coral-2: data.$color-data-interactive-coral-400,
+  element-data-interactive-coral-3: data.$color-data-interactive-coral-500,
+  element-data-interactive-coral-4: data.$color-data-interactive-coral-700,
+
+  element-data-purple-1: data.$color-data-purple-200,
+  element-data-purple-2: data.$color-data-purple-400,
+  element-data-purple-3: data.$color-data-purple-500,
+  element-data-purple-4: data.$color-data-purple-700,
+
+  element-data-plum-1: data.$color-data-plum-200,
+  element-data-plum-2: data.$color-data-plum-400,
+  element-data-plum-3: data.$color-data-plum-500,
+  element-data-plum-4: data.$color-data-plum-700,
+
+  element-data-red-1: data.$color-data-red-200,
+  element-data-red-2: data.$color-data-red-400,
+  element-data-red-3: data.$color-data-red-500,
+  element-data-red-4: data.$color-data-red-700,
+
+  element-data-orange-1: data.$color-data-orange-200,
+  element-data-orange-2: data.$color-data-orange-400,
+  element-data-orange-3: data.$color-data-orange-500,
+  element-data-orange-4: data.$color-data-orange-700,
+
+  element-data-sand-1: data.$color-data-sand-200,
+  element-data-sand-2: data.$color-data-sand-400,
+  element-data-sand-3: data.$color-data-sand-500,
+  element-data-sand-4: data.$color-data-sand-700,
+
+  element-color-passed: base.$color-green-500,
+  element-color-failed: data.$color-data-plum-500,
 
   // original icon: element-validation-warning
-  feedback-icon-warning:
+  element-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:
+  element-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"),
-  launchpad-app-background: base.$color-blue-300,
-  launchpad-app-color: base.$color-black
+  element-launchpad-app-background: base.$color-blue-300,
+  element-launchpad-app-color: base.$color-black
 );