refactor: use new semantic tokens

packages/components/package.json

@@ -70,6 +70,7 @@
     "@popperjs/core": "2.6.0",
     "@proyecto26/animatable-component": "^1.1.8",
     "@stencil/core": "^2.7.1",
+    "@telekom/design-tokens": "^1.0.0-alpha.8",
     "@telekom/scale-design-tokens": "^3.0.0-beta.48",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1",

packages/components/src/components/breadcrumb/breadcrumb.css

@@ -10,22 +10,23 @@
  */
 
 :host {
-  --spacing-left: calc(-1 * var(--scl-spacing-8));
+  --spacing-left: calc(-1 * var(--telekom-spacing-unit-x2));
 
-  --font-size-list-item: var(--scl-font-size-14);
+  --font-size-list-item: var(--telekom-typography-font-size-caption);
 
-  --color-separator: var(--scl-color-grey-60);
+  --color-separator: var(--telekom-color-ui-additional-regular);
 
-  --spacing-y-item: var(--scl-spacing-4);
-  --spacing-x-item: var(--scl-spacing-8);
+  --spacing-y-item: var(--telekom-spacing-unit-x1);
+  --spacing-x-item: var(--telekom-spacing-unit-x2);
 
-  --color-link: var(--scl-color-grey-60);
-  --radius-link: var(--scl-radius-8);
-  --color-link-hover: var(--scl-color-primary-hover);
-  --color-link-active: var(--scl-color-primary-active);
-  --box-shadow-link-focus: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
+  --color-link: var(--telekom-color-text-and-icon-additional);
+  --radius-link: var(--telekom-radius-standard);
+  --color-link-hover: var(--telekom-color-text-and-icon-primary-hovered);
+  --color-link-active: var(--telekom-color-text-and-icon-primary-pressed);
+  --box-shadow-link-focus: 0 0 0 var(--telekom-line-weight-highlight)
+    var(--telekom-color-functional-focus);
 
-  --color-current: var(--scl-color-text-standard);
+  --color-current: var(--telekom-color-text-and-icon-standard);
 }
 
 .breadcrumb {

packages/components/src/components/button/button.css

@@ -11,50 +11,63 @@
 
 :host {
   --width: auto;
-  --spacing-x: var(--scl-spacing-24);
-  --spacing-x-icon-only: var(--scl-spacing-8);
-  --min-height: var(--scl-spacing-40);
-  --radius: var(--scl-radius-8);
-  --transition: all var(--scl-motion-duration-fast)
-    var(--scl-motion-easing-standard);
-  --box-shadow-focus: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
-  --font-weight: var(--scl-font-weight-bold);
-  --font-size: var(--scl-font-size-16);
-  --line-height: var(--scl-font-line-height-150);
-  --spacing-icon-x: var(--scl-spacing-8);
+  --spacing-x: var(--telekom-spacing-unit-x6);
+  --spacing-x-icon-only: var(--telekom-spacing-unit-x2);
+  --min-height: var(--telekom-spacing-unit-x10);
+  --radius: var(--telekom-radius-standard);
+  --transition: all var(--telekom-motion-duration-transition)
+    cubic-bezier(var(--telekom-motion-easing-standard));
+  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
+    var(--telekom-color-functional-focus);
+  --font-weight: var(--telekom-typography-font-weight-bold);
+  --font-size: var(--telekom-typography-font-size-body);
+  --line-height: var(--telekom-typography-line-spacing-standard);
+  --spacing-icon-x: var(--telekom-spacing-unit-x2);
   --vertical-align: middle;
 
   /* size: small */
-  --font-size-small: var(--scl-font-size-12);
-  --line-height-small: var(--scl-font-line-height-133);
-  --min-height-small: var(--scl-spacing-32);
+  --font-size-small: var(--telekom-typography-font-size-small);
+  --line-height-small: var(--telekom-typography-line-spacing-standard);
+  --min-height-small: var(--telekom-spacing-unit-x8);
 
   /* variant: primary */
   --radius-primary: var(--radius);
-  --background-primary: var(--scl-color-primary);
-  --background-primary-hover: var(--scl-color-primary-hover);
-  --background-primary-active: var(--scl-color-primary-active);
-  --background-primary-disabled: var(--scl-color-background-disabled);
-  --color-primary: var(--scl-color-white);
-  --color-primary-disabled: var(--scl-color-grey-40);
+  --background-primary: var(--telekom-color-primary-standard);
+  --background-primary-hover: var(--telekom-color-primary-hovered);
+  --background-primary-active: var(--telekom-color-primary-pressed);
+  --background-primary-disabled: var(--telekom-color-ui-solid-disabled);
+  --color-primary: var(--telekom-color-text-and-icon-white-standard);
+  --color-primary-disabled: var(--telekom-color-text-and-icon-disabled);
 
   /* variant: secondary */
   --radius-secondary: var(--radius);
-  --border-width-secondary: var(--scl-spacing-1);
+  --border-width-secondary: var(--telekom-spacing-unit-x025);
   --background-secondary: transparent;
-  --color-secondary: var(--scl-color-text-standard);
-  --color-secondary-hover: var(--scl-color-primary-hover);
-  --color-secondary-active: var(--scl-color-primary-active);
-  --color-secondary-disabled: var(--scl-color-background-disabled);
+  --color-secondary: var(--telekom-color-text-and-icon-standard);
+  --color-secondary-hover: var(--telekom-color-text-and-icon-standard);
+  --color-secondary-active: var(--telekom-color-text-and-icon-standard);
+  --color-secondary-disabled: var(--telekom-color-text-and-icon-disabled);
+  --background-secondary: var(--telekom-color-ui-outlined-fill-standard);
+  --background-secondary-hover: var(--telekom-color-ui-outlined-fill-hovered);
+  --background-secondary-active: var(--telekom-color-ui-outlined-fill-pressed);
+  --background-secondary-disabled: var(
+    --telekom-color-ui-outlined-fill-disabled
+  );
+  --border-secondary: var(--telekom-color-ui-outlined-border-standard);
+  --border-secondary-hover: var(--telekom-color-ui-outlined-border-hovered);
+  --border-secondary-active: var(--telekom-color-ui-outlined-border-pressed);
+  --border-secondary-focus: var(--telekom-color-functional-focus);
 
   /* variant: ghost */
   --radius-ghost: var(--radius);
-  --border-width-ghost: var(--scl-spacing-1);
-  --spacing-x-ghost: var(--scl-spacing-8);
-  --color-ghost: var(--scl-color-primary);
-  --color-ghost-hover: var(--scl-color-primary-hover);
-  --color-ghost-active: var(--scl-color-primary-active);
-  --color-ghost-disabled: var(--scl-color-text-disabled);
+  --border-width-ghost: var(--telekom-spacing-unit-x025);
+  --spacing-x-ghost: var(--telekom-spacing-unit-x2);
+  --color-ghost: var(--telekom-color-text-and-icon-primary-standard);
+  --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered);
+  --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed);
+  --color-ghost-disabled: var(--telekom-color-text-and-icon-disabled);
+  --background-ghost-hover: var(--telekom-color-ui-ghost-hovered);
+  --background-ghost-active: var(--telekom-color-ui-ghost-pressed);
 }
 
 .button {
@@ -98,7 +111,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  border: var(--scl-spacing-1) solid transparent;
+  border: var(--telekom-spacing-unit-x025) solid transparent;
   height: 100%;
   content: '';
   display: block;
@@ -149,15 +162,22 @@
   border-radius: var(--radius-secondary);
   border: var(--border-width-secondary) solid currentColor;
   color: var(--color-secondary);
+  background-color: var(--background-secondary);
+  border-color: var(--border-secondary);
 }
 .button--variant-secondary:not(.button--disabled):hover {
   color: var(--color-secondary-hover);
+  background-color: var(--background-secondary-hover);
+  border-color: var(--border-secondary-hover);
 }
 .button--variant-secondary:not(.button--disabled):active {
   color: var(--color-secondary-active);
+  background-color: var(--background-secondary-active);
+  border-color: var(--border-secondary-active);
 }
 .button--disabled.button--variant-secondary {
   color: var(--color-secondary-disabled);
+  background-color: var(--background-secondary-disabled);
 }
 
 .button--variant-ghost {
@@ -171,9 +191,11 @@
 }
 .button--variant-ghost:not(.button--disabled):hover {
   color: var(--color-ghost-hover);
+  background-color: var(--background-ghost-hover);
 }
 .button--variant-ghost:not(.button--disabled):active {
   color: var(--color-ghost-active);
+  background-color: var(--background-ghost-active);
 }
 .button--disabled.button--variant-ghost {
   color: var(--color-ghost-disabled);

packages/components/src/components/callout/callout.css

@@ -1,19 +1,22 @@
 :host {
-  --inner-width-small: var(--scl-spacing-80);
-  --inner-height-small: var(--scl-spacing-80);
+  --inner-width-small: var(--telekom-spacing-unit-x20);
+  --inner-height-small: var(--telekom-spacing-unit-x20);
   --inner-width-large: 126.5px;
   --inner-height-large: 96px;
   --width-small: 120px;
   --height-small: 120px;
   --height-large: 160px;
   --width-large: 160px;
-  --color-blue: var(--scl-color-blue-60);
-  --color-white: var(--scl-color-white);
-  --color-black: var(--scl-color-grey-90);
-  --color-primary: var(--scl-color-primary);
-  --font-family: var(--scl-font-family-sans);
-  --font-size: calc(var(--scl-font-size-20) * 3);
-  --font-size-prefix: var(--scl-font-size-20);
+  /* FIXME variables shouldn't have color names */
+  --color-blue: var(--telekom-color-additional-blue-600);
+  /* FIXME variables are used sometimes as background and sometimes as font color */
+  --color-white: var(--telekom-color-background-surface);
+  --color-black: var(--telekom-color-text-and-icon-functional-black);
+  --color-primary: var(--telekom-color-primary-standard);
+  --font-family: var(--telekom-typography-font-family-sans);
+  /* FIXME is this calc necessary? */
+  --font-size: calc(var(--telekom-typography-font-size-callout) * 3);
+  --font-size-prefix: var(--telekom-typography-font-size-callout);
 }
 
 .callout {

packages/components/src/components/card/card.css

@@ -10,16 +10,17 @@
  */
 
 :host {
-  --background: var(--scl-color-background-standard);
-  --transition: all var(--scl-motion-duration-fast)
-    var(--scl-motion-easing-standard);
-  --radius: var(--scl-radius-12);
-  --box-shadow: var(--scl-shadow-level-1);
-  --box-shadow-hover: var(--scl-shadow-level-1-hover);
-  --box-shadow-focus: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
-  --box-shadow-active: var(--scl-shadow-level-1-active);
+  --background: var(--telekom-color-background-surface);
+  --transition: all var(--telekom-motion-duration-transition)
+    cubic-bezier(var(--telekom-motion-easing-standard));
+  --radius: var(--telekom-radius-large);
+  --box-shadow: var(--telekom-shadow-raised-standard);
+  --box-shadow-hover: var(--telekom-shadow-raised-hover);
+  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
+    var(--telekom-color-functional-focus);
+  --box-shadow-active: var(--telekom-shadow-raised-pressed);
 
-  --spacing-body: var(--scl-spacing-24);
+  --spacing-body: var(--telekom-spacing-unit-x6);
 
   --spacing-body-slotted: 0;
   --spacing-body-slotted-interactive: 0;
@@ -60,7 +61,7 @@
 }
 
 .card--interactive:focus {
-  box-shadow: var(--scl-shadow-level-1-hover), var(--box-shadow-focus);
+  box-shadow: var(--telekom-shadow-raised-hover), var(--box-shadow-focus);
 }
 
 .card--interactive:active {

packages/components/src/components/chart-stack-card/chart-stack-card.css

@@ -10,60 +10,60 @@
  */
 
 :host {
-  --scl-chart-stack-card-color: var(--scl-color-blue-60);
+  --scl-chart-stack-card-color: var(--telekom-color-blue-600);
 }
 .chart-stack-card {
   color: var(--color-text);
-  --scl-chart-stack-card-color: var(--scl-color-blue-60);
+  --scl-chart-stack-card-color: var(--telekom-color-blue-600);
 }
 .chart-stack-card .header {
-  height: var(--scl-spacing-24);
-  font-size: var(--scl-font-size-24);
-  font-weight: var(--scl-font-weight-extrabold);
-  line-height: var(--scl-font-line-height-114);
-  margin-bottom: var(--scl-spacing-24);
+  height: var(--telekom-spacing-unit-x6);
+  font-size: var(--telekom-typography-font-size-headline-3);
+  font-weight: var(--telekom-typography-font-weight-extra-bold);
+  line-height: var(--telekom-typography-line-spacing-tight);
+  margin-bottom: var(--telekom-spacing-unit-x6);
 }
 
 .chart-stack-card .bar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--scl-spacing-16);
+  margin-bottom: var(--telekom-spacing-unit-x4);
 }
 
 .chart-stack-card .bar__item {
   background-color: var(--scl-chart-stack-card-color);
-  height: var(--scl-spacing-32);
+  height: var(--telekom-spacing-unit-x8);
   flex: 1;
 }
 
 .chart-stack-card .bar__item:first-of-type {
-  border-top-left-radius: var(--scl-radius-4);
-  border-bottom-left-radius: var(--scl-radius-4);
+  border-top-left-radius: var(--telekom-radius-small);
+  border-bottom-left-radius: var(--telekom-radius-small);
 }
 
 .chart-stack-card .bar__item:last-of-type {
-  border-top-right-radius: var(--scl-radius-4);
-  border-bottom-right-radius: var(--scl-radius-4);
+  border-top-right-radius: var(--telekom-radius-small);
+  border-bottom-right-radius: var(--telekom-radius-small);
 }
 
 .chart-stack-card .legend {
   display: flex;
   flex-direction: column;
-  height: calc(var(--scl-spacing-16) * 10);
+  height: calc(var(--telekom-spacing-unit-x4) * 10);
 }
 .chart-stack-card .spacer {
-  padding: 0 var(--scl-spacing-8);
+  padding: 0 var(--telekom-spacing-unit-x2);
 }
 .chart-stack-card .legend .legend__row__item {
   display: flex;
-  line-height: var(--scl-font-line-height-133);
+  line-height: var(--telekom-typography-line-spacing-standard);
 }
 .chart-stack-card .legend .legend__row {
   display: flex;
   justify-content: space-between;
 }
 .chart-stack-card .legend .legend__row:last-child {
-  padding-bottom: var(--scl-spacing-32);
+  padding-bottom: var(--telekom-spacing-unit-x8);
 }
 
 .chart-stack-card .legend .legend__item {
@@ -72,11 +72,11 @@
   background-color: var(--scl-chart-stack-card-color);
   border-radius: 100%;
   align-self: center;
-  margin-right: var(--scl-spacing-4);
+  margin-right: var(--telekom-spacing-unit-x1);
 }
 
 .chart-stack-card .legend .legend__label {
   font-weight: var(--type-weight-bold);
-  font-size: var(--scl-spacing-16);
+  font-size: var(--telekom-spacing-unit-x4);
   line-height: 200%;
 }

packages/components/src/components/checkbox-group/checkbox-group.css

@@ -1,13 +1,13 @@
 :host,
 .checkbox-group {
   /* checkbox-group container */
-  --spacing-left-container: var(--scl-spacing-24);
+  --spacing-left-container: var(--telekom-spacing-unit-x6);
 
   /* checkbox-group checkbox */
-  --spacing-left-checkbox: var(--scl-spacing-8);
+  --spacing-left-checkbox: var(--telekom-spacing-unit-x2);
 
   /* slotted item */
-  --spacing-top-slotted-item: var(--scl-spacing-4);
+  --spacing-top-slotted-item: var(--telekom-spacing-unit-x1);
 }
 
 .checkbox-group {