From ffb2d714baa9a8f8398bcbb4d439c71a1ae4eeb5 Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Thu, 23 Dec 2021 11:00:46 +0100 Subject: [PATCH 01/36] refactor: use semantic tokens in modal (poc) --- .../components/src/components/modal/modal.css | 69 ++-- packages/components/src/global/scale.css | 2 + .../src/global/telekom-design-tokens.all.css | 334 ++++++++++++++++++ .../components/src/html/semantic-tokens.html | 59 ++++ 4 files changed, 433 insertions(+), 31 deletions(-) create mode 100644 packages/components/src/global/telekom-design-tokens.all.css create mode 100644 packages/components/src/html/semantic-tokens.html diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css index 536564e460..eb792fe4ad 100644 --- a/packages/components/src/components/modal/modal.css +++ b/packages/components/src/components/modal/modal.css @@ -10,57 +10,62 @@ */ :host { - --spacing-x: var(--scl-spacing-16); + --spacing-x: var(--telekom-spacing-grouped-md); --background-overlay: var( - --scl-color-background-overlay, + --telekom-color-background-backdrop, rgba(108, 108, 108, 0.7) ); - --max-height-window: calc(100vh - (2 * var(--scl-spacing-80))); - --radius-window: var(--scl-radius-12); - --box-shadow-window: var(--scl-shadow-level-5); + --max-height-window: calc(100vh - (2 * var(--telekom-spacing-unrelated-lg))); + --radius-window: var(--telekom-radius-large); + --box-shadow-window: var(--telekom-elevation-top); + --background-window: var(--telekom-color-background-surface); + --color-window: var(--telekom-color-text-and-icon-standard); /* we're rudimentarily creating a grid here in the following modal--size-*, with 6, 8 and 12 columns + + -spacing-56 !== --telekom-spacing-unrelated-sm */ --size-window-small: calc( - (6 * var(--scl-spacing-56, 3.5rem)) + (5 * var(--scl-spacing-32)) + (6 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (5 * var(--telekom-spacing-related-sm)) ); --size-window-default: calc( - (8 * var(--scl-spacing-56, 3.5rem)) + (7 * var(--scl-spacing-32)) + (8 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (7 * var(--telekom-spacing-related-sm)) ); --size-window-large: calc( - (12 * var(--scl-spacing-56, 3.5rem)) + (11 * var(--scl-spacing-32)) + (12 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (11 * var(--telekom-spacing-related-sm)) ); - --spacing-x-header: var(--scl-spacing-24); - --spacing-y-header: var(--scl-spacing-24); + --spacing-x-header: var(--telekom-spacing-grouped-lg); + --spacing-y-header: var(--telekom-spacing-grouped-lg); - --border-bottom-header-has-scroll: var(--scl-spacing-1) solid - var(--scl-color-grey-20); + --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid + var(--telekom-color-ui-light); /* could also be --telekom-color-ui-subtle ? */ - --font-family-heading: var(--scl-font-family-sans); - --font-size-heading: var(--scl-font-size-20); - --font-weight-heading: var(--scl-font-weight-extrabold); + --font-family-heading: var(--telekom-typography-font-family-sans); + --font-size-heading: var(--telekom-typography-font-size-callout); + --font-weight-heading: var(--telekom-typography-font-weight-extra-bold); - --spacing-close-button: var(--scl-spacing-8); - --radius-close-button: var(--scl-radius-8); - --transition-close-button: all var(--scl-motion-duration-fast) - var(--scl-motion-easing-standard); - --box-shadow-close-button-focus: 0 0 0 var(--scl-spacing-2) - var(--scl-color-focus); - --color-close-button-hover: var(--scl-color-primary-hover); - --color-close-button-active: var(--scl-color-primary-active); + --spacing-close-button: var(--telekom-spacing-inner-lg); + --radius-close-button: var(--telekom-radius-standard); + --transition-close-button: all var(--telekom-motion-duration-transition) + var(--telekom-motion-easing-standard); + --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight) + var(--telekom-color-functional-focus); + --color-close-button: var(--telekom-color-text-and-icon-standard); + --color-close-button-hover: var(--telekom-color-primary-hovered); + --color-close-button-active: var(--telekom-color-primary-pressed); - --spacing-x-body-wrapper: var(--scl-spacing-24); - --spacing-y-body: var(--scl-spacing-24); + --spacing-x-body-wrapper: var(--telekom-spacing-related-sm); + --spacing-y-body: var(--telekom-spacing-related-sm); - --spacing-actions: var(--scl-spacing-24); + --spacing-actions: var(--telekom-spacing-related-sm); - --spacing-x-actions-slotted: var(--scl-spacing-8); - --background-actions-has-scroll: var(--scl-color-background-light); + --spacing-x-actions-slotted: var(--telekom-spacing-inner-lg); + --background-actions-has-scroll: var(--telekom-color-background-surface-subtle); } .modal { @@ -100,7 +105,8 @@ position: relative; overflow-y: auto; flex-direction: column; - background-color: white; + background-color: var(--background-window); + color: var(--color-window); max-height: var(--max-height-window); border-radius: var(--radius-window); box-shadow: var(--box-shadow-window); @@ -125,7 +131,7 @@ @media (max-height: 30em) { .modal__window { - max-height: calc(100vh - var(--scl-spacing-24)); + max-height: calc(100vh - var(--telekom-spacing-related-sm)); } } @@ -176,6 +182,7 @@ border: 0; border-radius: var(--radius-close-button); outline: none; + color: var(--color-close-button); background: transparent; transition: var(--transition-close-button); transform: translate( @@ -205,7 +212,7 @@ } .modal--has-body .modal__body-wrapper { - min-height: var(--scl-spacing-48); + min-height: var(--telekom-spacing-related-lg); } .modal--has-body .modal__body { diff --git a/packages/components/src/global/scale.css b/packages/components/src/global/scale.css index 0050ca7f41..014d7a795d 100644 --- a/packages/components/src/global/scale.css +++ b/packages/components/src/global/scale.css @@ -11,3 +11,5 @@ @import './fonts.css'; @import '~@telekom/scale-design-tokens/dist/design-tokens-telekom.css'; +/* Temporarily loading from local file, this is a POC */ +@import './telekom-design-tokens.all.css'; diff --git a/packages/components/src/global/telekom-design-tokens.all.css b/packages/components/src/global/telekom-design-tokens.all.css new file mode 100644 index 0000000000..9f27781dfe --- /dev/null +++ b/packages/components/src/global/telekom-design-tokens.all.css @@ -0,0 +1,334 @@ +/** + * Do not edit directly + * Generated on Thu, 23 Dec 2021 08:46:24 GMT + */ + +:root, [data-mode="light"] { + --telekom-color-text-and-icon-standard: #141414; /* Default text color with highest contrast. */ + --telekom-color-text-and-icon-additional: #716e71; /* Use in combination with standard text for additional text elements. */ + --telekom-color-text-and-icon-disabled: #b5b3b7; /* Only use for disabled text. */ + --telekom-color-text-and-icon-link-standard: #1154d9; + --telekom-color-text-and-icon-link-hovered: #1045ae; + --telekom-color-text-and-icon-link-visited: #5f5a9b; + --telekom-color-text-and-icon-link-active: #0b255b; + --telekom-color-text-and-icon-primary-standard: #e20074; + --telekom-color-text-and-icon-primary-hovered: #c00063; + --telekom-color-text-and-icon-primary-pressed: #9e0051; + --telekom-color-text-and-icon-inverted-standard: #fcfcfc; /* Standard text color inverted to be used on high contrast colors like UI/Extra Strong */ + --telekom-color-text-and-icon-inverted-additional: #9f9ca0; /* Additional text color inverted to be used on high contrast colors like UI/Extra Strong */ + --telekom-color-text-and-icon-functional-informational: #1045ae; + --telekom-color-text-and-icon-functional-success: #23925a; + --telekom-color-text-and-icon-functional-danger: #c02f4c; + --telekom-color-text-and-icon-functional-warning: #ff7f00; + --telekom-color-text-and-icon-functional-white: #ffffff; /* This text color is white in all modes (light & dark) */ + --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ + --telekom-color-background-canvas: #ffffff; /* Used as the background for your product (app, website, etc.) */ + --telekom-color-background-canvas-subtle: #f0f0f1; /* Used as the background for your product (app, website, etc.) */ + --telekom-color-background-backdrop: rgba(0, 0, 0, 0.5); /* Use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-surface: #ffffff; /* Use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-subtle: #fcfcfc; /* Use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-highlight: #141414; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ + --telekom-color-primary-standard: #e20074; + --telekom-color-primary-hovered: #c00063; + --telekom-color-primary-pressed: #9e0051; + --telekom-color-primary-subtle: #fef2f8; + --telekom-color-ui-subtle: #e3e3e5; + --telekom-color-ui-light: #b5b3b7; + --telekom-color-ui-normal: #888588; + --telekom-color-ui-strong: #5a5759; + --telekom-color-ui-extra-strong: #141414; + --telekom-color-ui-disabled: #e3e3e5; /* Use for disabled interactive elements in combination with the disabled text color */ + --telekom-color-functional-focus: #1154d9; + --telekom-color-functional-success-standard: #3cb176; + --telekom-color-functional-success-hovered: #23925a; + --telekom-color-functional-success-pressed: #177345; + --telekom-color-functional-success-subtle: #f5fffa; + --telekom-color-functional-interaction-standard: #1154d9; + --telekom-color-functional-interaction-hovered: #1045ae; + --telekom-color-functional-interaction-pressed: #0e3584; + --telekom-color-functional-interaction-subtle: #f4f8ff; + --telekom-color-functional-informational-standard: #1154d9; + --telekom-color-functional-informational-hovered: #1045ae; + --telekom-color-functional-informational-pressed: #0e3584; + --telekom-color-functional-informational-subtle: #f4f8ff; + --telekom-color-functional-warning-standard: #ff9124; + --telekom-color-functional-warning-hovered: #ff7f00; + --telekom-color-functional-warning-pressed: #dc6d00; + --telekom-color-functional-warning-subtle: #fff9f2; + --telekom-color-functional-danger-standard: #d64562; + --telekom-color-functional-danger-hovered: #c02f4c; + --telekom-color-functional-danger-pressed: #9a2a3f; + --telekom-color-functional-danger-subtle: #fef6f8; + --telekom-color-additional-clay-0: #f2e4df; + --telekom-color-additional-clay-10: #edd8ce; + --telekom-color-additional-clay-20: #e9cdbe; + --telekom-color-additional-clay-30: #e3c2af; + --telekom-color-additional-clay-40: #deb7a0; + --telekom-color-additional-clay-50: #d9ad92; + --telekom-color-additional-clay-60: #d2a483; + --telekom-color-additional-clay-70: #bb8c6f; + --telekom-color-additional-clay-80: #a3765d; + --telekom-color-additional-clay-90: #87604e; + --telekom-color-additional-clay-100: #6a4d40; + --telekom-color-additional-rose-0: #f6e5eb; + --telekom-color-additional-rose-10: #eed1da; + --telekom-color-additional-rose-20: #e6bcc9; + --telekom-color-additional-rose-30: #dda8b8; + --telekom-color-additional-rose-40: #d495a6; + --telekom-color-additional-rose-50: #cb8293; + --telekom-color-additional-rose-60: #c16f81; + --telekom-color-additional-rose-70: #a5566a; + --telekom-color-additional-rose-80: #864054; + --telekom-color-additional-rose-90: #652b3e; + --telekom-color-additional-rose-100: #511f31; + --telekom-color-additional-lilac-0: #f7eff6; + --telekom-color-additional-lilac-10: #efe3ed; + --telekom-color-additional-lilac-20: #ead9e7; + --telekom-color-additional-lilac-30: #e4cce0; + --telekom-color-additional-lilac-40: #d5b4d5; + --telekom-color-additional-lilac-50: #c59bca; + --telekom-color-additional-lilac-60: #b682bd; + --telekom-color-additional-lilac-70: #9e6ba5; + --telekom-color-additional-lilac-80: #84558a; + --telekom-color-additional-lilac-90: #6a3e71; + --telekom-color-additional-lilac-100: #502857; + --telekom-color-additional-pigeon-0: #e9ecf6; + --telekom-color-additional-pigeon-10: #d7dcef; + --telekom-color-additional-pigeon-20: #c5cce7; + --telekom-color-additional-pigeon-30: #b4bcde; + --telekom-color-additional-pigeon-40: #a3abd6; + --telekom-color-additional-pigeon-50: #929bcd; + --telekom-color-additional-pigeon-60: #828ac4; + --telekom-color-additional-pigeon-70: #6d6eb0; + --telekom-color-additional-pigeon-80: #5f5a9b; + --telekom-color-additional-pigeon-90: #534785; + --telekom-color-additional-pigeon-100: #46366d; + --telekom-color-additional-neptune-0: #deedec; + --telekom-color-additional-neptune-10: #cde5e5; + --telekom-color-additional-neptune-20: #bbdedd; + --telekom-color-additional-neptune-30: #a9d5d5; + --telekom-color-additional-neptune-40: #98cbcd; + --telekom-color-additional-neptune-50: #88c0c4; + --telekom-color-additional-neptune-60: #77b6bb; + --telekom-color-additional-neptune-70: #66a5a8; + --telekom-color-additional-neptune-80: #579292; + --telekom-color-additional-neptune-90: #4a7b7a; + --telekom-color-additional-neptune-100: #3f6160; + --telekom-color-additional-olive-0: #ecf3e7; + --telekom-color-additional-olive-10: #dce8d4; + --telekom-color-additional-olive-20: #ccdec2; + --telekom-color-additional-olive-30: #bbd3af; + --telekom-color-additional-olive-40: #aac89d; + --telekom-color-additional-olive-50: #99bd8b; + --telekom-color-additional-olive-60: #88b179; + --telekom-color-additional-olive-70: #709660; + --telekom-color-additional-olive-80: #597949; + --telekom-color-additional-olive-90: #425b33; + --telekom-color-additional-olive-100: #314724; + --telekom-color-additional-teal-0: #d7f6f4; + --telekom-color-additional-teal-10: #d7f6f4; + --telekom-color-additional-teal-20: #98e4e4; + --telekom-color-additional-teal-30: #79d9db; + --telekom-color-additional-teal-40: #5cccd0; + --telekom-color-additional-teal-50: #3ebdc5; + --telekom-color-additional-teal-60: #22adb9; + --telekom-color-additional-teal-70: #129ca3; + --telekom-color-additional-teal-80: #068788; + --telekom-color-additional-teal-90: #006967; + --telekom-color-additional-teal-100: #005651; + --telekom-color-additional-orange-0: #fffcdf; + --telekom-color-additional-orange-10: #fff4c6; + --telekom-color-additional-orange-20: #ffe9ae; + --telekom-color-additional-orange-30: #ffda97; + --telekom-color-additional-orange-40: #ffc780; + --telekom-color-additional-orange-50: #ffb26a; + --telekom-color-additional-orange-60: #fc9a55; + --telekom-color-additional-orange-70: #df6d3f; + --telekom-color-additional-orange-80: #ae461c; + --telekom-color-additional-orange-90: #973209; + --telekom-color-additional-orange-100: #7d1f09; + --telekom-color-additional-red-0: #ffc5cb; + --telekom-color-additional-red-10: #ffaab6; + --telekom-color-additional-red-20: #fe94a5; + --telekom-color-additional-red-30: #f98093; + --telekom-color-additional-red-40: #f36a80; + --telekom-color-additional-red-50: #ef556e; + --telekom-color-additional-red-60: #ed425b; + --telekom-color-additional-red-70: #d82a48; + --telekom-color-additional-red-80: #c31c3b; + --telekom-color-additional-red-90: #ad0f31; + --telekom-color-additional-red-100: #990024; + --telekom-color-additional-blue-0: #d6f8ff; + --telekom-color-additional-blue-10: #b5ebff; + --telekom-color-additional-blue-20: #95daff; + --telekom-color-additional-blue-30: #77c4ff; + --telekom-color-additional-blue-40: #59aaff; + --telekom-color-additional-blue-50: #3d8cff; + --telekom-color-additional-blue-60: #216bff; + --telekom-color-additional-blue-70: #0d39df; + --telekom-color-additional-blue-80: #000bbf; + --telekom-color-additional-blue-90: #03009f; + --telekom-color-additional-blue-100: #140080; + --telekom-color-additional-green-0: #f0f7e0; + --telekom-color-additional-green-10: #e0efc7; + --telekom-color-additional-green-20: #cfe8af; + --telekom-color-additional-green-30: #bbdf98; + --telekom-color-additional-green-40: #a4d681; + --telekom-color-additional-green-50: #8dcd6a; + --telekom-color-additional-green-60: #73c354; + --telekom-color-additional-green-70: #52b342; + --telekom-color-additional-green-80: #32a032; + --telekom-color-additional-green-90: #248b31; + --telekom-color-additional-green-100: #187431; + --telekom-color-additional-pine-0: #f5fffa; + --telekom-color-additional-pine-10: #daf7e8; + --telekom-color-additional-pine-20: #c0efd8; + --telekom-color-additional-pine-30: #92e0b9; + --telekom-color-additional-pine-40: #6cd09e; + --telekom-color-additional-pine-50: #50c188; + --telekom-color-additional-pine-60: #3cb176; + --telekom-color-additional-pine-70: #2da267; + --telekom-color-additional-pine-80: #23925a; + --telekom-color-additional-pine-90: #1c824f; + --telekom-color-additional-pine-100: #177345; + --telekom-elevation-flat-standard: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ + --telekom-elevation-flat-hover: 0px 2px 8px 0px #0000001a, 0px 1px 2px 0px #0000001a; /* Exclusivly for flat design elements */ + --telekom-elevation-flat-pressed: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ + --telekom-elevation-resting-standard: 0px 2px 8px 0px #0000001a, 0px 1px 2px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-hover: 0px 6px 24px 0px #0000001a, 0px 3px 6px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-pressed: 0px 0px 0px 0px #00000000; /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-raised-standard: 0px 8px 32px 0px #0000001a, 0px 4px 8px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-hover: 0px 16px 64px 0px #0000001a, 0px 8px 16px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-pressed: 0px 4px 16px 0px #0000001a, 0px 2px 4px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-floating-standard: 0px 12px 48px 0px #0000001a, 0px 6px 12px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-hover: 0px 24px 96px 0px #0000001a, 0px 12px 24px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-pressed: 0px 8px 32px 0px #0000001a, 0px 4px 8px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-overlay: 0px 16px 64px 0px #0000001a, 0px 8px 16px 0px #0000001a; /* For fixed elements that overlay the content e.g. sidebars or bottom sheets */ + --telekom-elevation-top: 0px 24px 96px 0px #0000001a, 0px 12px 24px 0px #0000001a; /* Highest level e.g. for dialogs or modals */ + --telekom-elevation-app-bar-top-flat: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ + --telekom-elevation-app-bar-top-raised: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ + --telekom-elevation-app-bar-bottom-flat: 0px -1px 0px 0px #0000001a; /* Use for app navigation and app bars on the bottom */ + --telekom-elevation-app-bar-bottom-raised: 0px -1px 0px 0px #0000001a; /* Use for app navigation and app bars on the bottom */ + --telekom-line-weight-standard: 0.0625rem; /* Used for ui elements like inputs, dividers, etc. */ + --telekom-line-weight-highlight: 0.125rem; /* E.g. use for active menu items. */ + --telekom-line-weight-bold: 0.25rem; + --telekom-motion-duration-instant: 0ms; + --telekom-motion-duration-immediate: 100ms; + --telekom-motion-duration-transition: 200ms; + --telekom-motion-duration-animation: 600ms; + --telekom-motion-duration-animation-deliberate: 800ms; + --telekom-motion-easing-standard: 0.4,0,0.6,1; + --telekom-motion-easing-enter: 0.4,0.6,0.6,1; + --telekom-motion-easing-leave: 0.4,0,1,1; + --telekom-opacity-invisible: 0; + --telekom-opacity-transparent: 0.35; + --telekom-opacity-semi-transparent: 0.5; + --telekom-opacity-translucent: 0.75; + --telekom-opacity-semi-translucent: 0.85; + --telekom-opacity-solid: 1; + --telekom-radius-small: 0.25rem; /* Used for small elements like checkboxes, etc. */ + --telekom-radius-standard: 0.5rem; /* Used for our main ui elements like buttons, etc. */ + --telekom-radius-large: 0.75rem; /* Used mainly for containers like cards or dialogs */ + --telekom-radius-pill: 62.4375rem; /* Used for pill-shaped ui elements */ + --telekom-radius-circle: 50%; /* Used for ui elements like radio buttons or things like avatars */ + --telekom-spacing-none: 0rem; + --telekom-spacing-inner-xs: 0.0625rem; + --telekom-spacing-inner-sm: 0.125rem; + --telekom-spacing-inner-md: 0.25rem; + --telekom-spacing-inner-lg: 0.5rem; + --telekom-spacing-grouped-sm: 0.75rem; + --telekom-spacing-grouped-md: 1rem; + --telekom-spacing-grouped-lg: 1.5rem; + --telekom-spacing-related-sm: 2rem; + --telekom-spacing-related-md: 2.5rem; + --telekom-spacing-related-lg: 3rem; + --telekom-spacing-unrelated-sm: 4rem; + --telekom-spacing-unrelated-md: 4.5rem; + --telekom-spacing-unrelated-lg: 5rem; + --telekom-typography-font-size-footnote: 0.625rem; + --telekom-typography-font-size-small: 0.75rem; + --telekom-typography-font-size-caption: 0.875rem; + --telekom-typography-font-size-body: 1rem; + --telekom-typography-font-size-callout: 1.25rem; + --telekom-typography-font-size-headline-3: 1.5rem; + --telekom-typography-font-size-headline-2: 2rem; + --telekom-typography-font-size-headline-1: 2.625rem; + --telekom-typography-font-size-title-3: 3.375rem; + --telekom-typography-font-size-title-2: 4.25rem; + --telekom-typography-font-size-title-1: 4.75rem; + --telekom-typography-font-family-sans: TeleNeoWeb, sans-serif; + --telekom-typography-font-family-mono: monospace; + --telekom-typography-font-weight-thin: 200; + --telekom-typography-font-weight-regular: 400; + --telekom-typography-font-weight-medium: 500; + --telekom-typography-font-weight-bold: 700; + --telekom-typography-font-weight-extra-bold: 800; + --telekom-typography-line-spacing-extra-tight: 1.15; /* Use for large titles like H1 or H2 */ + --telekom-typography-line-spacing-tight: 1.25; /* Use for large headlines like H3, etc. */ + --telekom-typography-line-spacing-standard: 1.35; /* Use for most text elements like normal copy, etc. */ + --telekom-typography-line-spacing-loose: 1.5; /* Use for multi line text passages with long lines. */ + --telekom-typography-letter-spacing-standard: 0; +} + +/** + * Do not edit directly + * Generated on Thu, 23 Dec 2021 08:46:24 GMT + */ + +[data-mode="dark"] { + --telekom-color-text-and-icon-standard: #fcfcfc; /* Default text color with highest contrast. */ + --telekom-color-text-and-icon-additional: #9f9ca0; /* Use in combination with standard text for additional text elements. */ + --telekom-color-text-and-icon-disabled: #5a5759; /* Only use for disabled text. */ + --telekom-color-text-and-icon-link-standard: #256bf1; + --telekom-color-text-and-icon-link-hovered: #4d87f6; + --telekom-color-text-and-icon-link-visited: #828ac4; + --telekom-color-text-and-icon-link-active: #75a3fa; + --telekom-color-text-and-icon-primary-standard: #e20074; + --telekom-color-text-and-icon-primary-hovered: #c00063; + --telekom-color-text-and-icon-primary-pressed: #9e0051; + --telekom-color-text-and-icon-inverted-standard: #141414; /* Standard text color inverted to be used on high contrast colors like UI/Extra Strong */ + --telekom-color-text-and-icon-inverted-additional: #716e71; /* Additional text color inverted to be used on high contrast colors like UI/Extra Strong */ + --telekom-color-text-and-icon-functional-informational: #256bf1; + --telekom-color-text-and-icon-functional-success: #3cb176; + --telekom-color-text-and-icon-functional-danger: #d64562; + --telekom-color-text-and-icon-functional-warning: #ff9124; + --telekom-color-text-and-icon-functional-white: #ffffff; /* This text color is white in all modes (light & dark) */ + --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ + --telekom-color-background-canvas: #141414; /* Used as the background for your product (app, website, etc.) */ + --telekom-color-background-canvas-subtle: #201f20; /* Used as the background for your product (app, website, etc.) */ + --telekom-color-background-backdrop: rgba(0, 0, 0, 0.7); /* Use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-surface: #2c2a2b; /* Use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-subtle: #373636; /* Use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-highlight: #434142; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ + --telekom-color-primary-standard: #e20074; + --telekom-color-primary-hovered: #c00063; + --telekom-color-primary-pressed: #9e0051; + --telekom-color-primary-subtle: #2d0017; + --telekom-color-ui-subtle: #2c2a2b; + --telekom-color-ui-light: #373636; + --telekom-color-ui-normal: #434142; + --telekom-color-ui-strong: #5a5759; + --telekom-color-ui-extra-strong: #fcfcfc; + --telekom-color-ui-disabled: #2c2a2b; /* Use for disabled interactive elements in combination with the disabled text color */ + --telekom-color-functional-focus: #256bf1; + --telekom-color-functional-success-standard: #177345; + --telekom-color-functional-success-hovered: #23925a; + --telekom-color-functional-success-pressed: #3cb176; + --telekom-color-functional-success-subtle: #002613; + --telekom-color-functional-interaction-standard: #256bf1; + --telekom-color-functional-interaction-hovered: #4d87f6; + --telekom-color-functional-interaction-pressed: #75a3fa; + --telekom-color-functional-interaction-subtle: #071533; + --telekom-color-functional-informational-standard: #256bf1; + --telekom-color-functional-informational-hovered: #4d87f6; + --telekom-color-functional-informational-pressed: #75a3fa; + --telekom-color-functional-informational-subtle: #071533; + --telekom-color-functional-warning-standard: #ff7f00; + --telekom-color-functional-warning-hovered: #ff9124; + --telekom-color-functional-warning-pressed: #ffa348; + --telekom-color-functional-warning-subtle: #4d2600; + --telekom-color-functional-danger-standard: #c02f4c; + --telekom-color-functional-danger-hovered: #d64562; + --telekom-color-functional-danger-pressed: #e16580; + --telekom-color-functional-danger-subtle: #301116; +} diff --git a/packages/components/src/html/semantic-tokens.html b/packages/components/src/html/semantic-tokens.html new file mode 100644 index 0000000000..e133d060a4 --- /dev/null +++ b/packages/components/src/html/semantic-tokens.html @@ -0,0 +1,59 @@ + + + + + + Semantic Tokens Refactor POC + + + + + + + + + + +

We hope you like it!

+ + + + + From 575b250c0bc5f250f5589170a752e63bf96f2abb Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Thu, 23 Dec 2021 11:07:17 +0100 Subject: [PATCH 02/36] style: format --- .../components/src/components/modal/modal.css | 13 +++-- .../src/global/telekom-design-tokens.all.css | 58 +++++++++++++------ .../components/src/html/semantic-tokens.html | 22 +++---- 3 files changed, 60 insertions(+), 33 deletions(-) diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css index eb792fe4ad..7b264d8989 100644 --- a/packages/components/src/components/modal/modal.css +++ b/packages/components/src/components/modal/modal.css @@ -30,13 +30,16 @@ -spacing-56 !== --telekom-spacing-unrelated-sm */ --size-window-small: calc( - (6 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (5 * var(--telekom-spacing-related-sm)) + (6 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + + (5 * var(--telekom-spacing-related-sm)) ); --size-window-default: calc( - (8 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (7 * var(--telekom-spacing-related-sm)) + (8 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + + (7 * var(--telekom-spacing-related-sm)) ); --size-window-large: calc( - (12 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + (11 * var(--telekom-spacing-related-sm)) + (12 * var(--telekom-spacing-unrelated-sm, 3.5rem)) + + (11 * var(--telekom-spacing-related-sm)) ); --spacing-x-header: var(--telekom-spacing-grouped-lg); @@ -65,7 +68,9 @@ --spacing-actions: var(--telekom-spacing-related-sm); --spacing-x-actions-slotted: var(--telekom-spacing-inner-lg); - --background-actions-has-scroll: var(--telekom-color-background-surface-subtle); + --background-actions-has-scroll: var( + --telekom-color-background-surface-subtle + ); } .modal { diff --git a/packages/components/src/global/telekom-design-tokens.all.css b/packages/components/src/global/telekom-design-tokens.all.css index 9f27781dfe..8faa0402a3 100644 --- a/packages/components/src/global/telekom-design-tokens.all.css +++ b/packages/components/src/global/telekom-design-tokens.all.css @@ -3,7 +3,8 @@ * Generated on Thu, 23 Dec 2021 08:46:24 GMT */ -:root, [data-mode="light"] { +:root, +[data-mode='light'] { --telekom-color-text-and-icon-standard: #141414; /* Default text color with highest contrast. */ --telekom-color-text-and-icon-additional: #716e71; /* Use in combination with standard text for additional text elements. */ --telekom-color-text-and-icon-disabled: #b5b3b7; /* Only use for disabled text. */ @@ -24,7 +25,12 @@ --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ --telekom-color-background-canvas: #ffffff; /* Used as the background for your product (app, website, etc.) */ --telekom-color-background-canvas-subtle: #f0f0f1; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-backdrop: rgba(0, 0, 0, 0.5); /* Use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-backdrop: rgba( + 0, + 0, + 0, + 0.5 + ); /* Use to overlay content below dialogs to separate dialog from content below */ --telekom-color-background-surface: #ffffff; /* Use as the background of elements like cards, headers, bottom bars, etc. */ --telekom-color-background-surface-subtle: #fcfcfc; /* Use as the background of elements like cards, headers, bottom bars, etc. */ --telekom-color-background-surface-highlight: #141414; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ @@ -192,19 +198,30 @@ --telekom-color-additional-pine-90: #1c824f; --telekom-color-additional-pine-100: #177345; --telekom-elevation-flat-standard: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ - --telekom-elevation-flat-hover: 0px 2px 8px 0px #0000001a, 0px 1px 2px 0px #0000001a; /* Exclusivly for flat design elements */ + --telekom-elevation-flat-hover: 0px 2px 8px 0px #0000001a, + 0px 1px 2px 0px #0000001a; /* Exclusivly for flat design elements */ --telekom-elevation-flat-pressed: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ - --telekom-elevation-resting-standard: 0px 2px 8px 0px #0000001a, 0px 1px 2px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ - --telekom-elevation-resting-hover: 0px 6px 24px 0px #0000001a, 0px 3px 6px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-standard: 0px 2px 8px 0px #0000001a, + 0px 1px 2px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-hover: 0px 6px 24px 0px #0000001a, + 0px 3px 6px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ --telekom-elevation-resting-pressed: 0px 0px 0px 0px #00000000; /* Default for interactable elements like buttons, etc. */ - --telekom-elevation-raised-standard: 0px 8px 32px 0px #0000001a, 0px 4px 8px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-raised-hover: 0px 16px 64px 0px #0000001a, 0px 8px 16px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-raised-pressed: 0px 4px 16px 0px #0000001a, 0px 2px 4px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-floating-standard: 0px 12px 48px 0px #0000001a, 0px 6px 12px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-floating-hover: 0px 24px 96px 0px #0000001a, 0px 12px 24px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-floating-pressed: 0px 8px 32px 0px #0000001a, 0px 4px 8px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-overlay: 0px 16px 64px 0px #0000001a, 0px 8px 16px 0px #0000001a; /* For fixed elements that overlay the content e.g. sidebars or bottom sheets */ - --telekom-elevation-top: 0px 24px 96px 0px #0000001a, 0px 12px 24px 0px #0000001a; /* Highest level e.g. for dialogs or modals */ + --telekom-elevation-raised-standard: 0px 8px 32px 0px #0000001a, + 0px 4px 8px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-hover: 0px 16px 64px 0px #0000001a, + 0px 8px 16px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-pressed: 0px 4px 16px 0px #0000001a, + 0px 2px 4px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-floating-standard: 0px 12px 48px 0px #0000001a, + 0px 6px 12px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-hover: 0px 24px 96px 0px #0000001a, + 0px 12px 24px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-pressed: 0px 8px 32px 0px #0000001a, + 0px 4px 8px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-overlay: 0px 16px 64px 0px #0000001a, + 0px 8px 16px 0px #0000001a; /* For fixed elements that overlay the content e.g. sidebars or bottom sheets */ + --telekom-elevation-top: 0px 24px 96px 0px #0000001a, + 0px 12px 24px 0px #0000001a; /* Highest level e.g. for dialogs or modals */ --telekom-elevation-app-bar-top-flat: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ --telekom-elevation-app-bar-top-raised: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ --telekom-elevation-app-bar-bottom-flat: 0px -1px 0px 0px #0000001a; /* Use for app navigation and app bars on the bottom */ @@ -217,9 +234,9 @@ --telekom-motion-duration-transition: 200ms; --telekom-motion-duration-animation: 600ms; --telekom-motion-duration-animation-deliberate: 800ms; - --telekom-motion-easing-standard: 0.4,0,0.6,1; - --telekom-motion-easing-enter: 0.4,0.6,0.6,1; - --telekom-motion-easing-leave: 0.4,0,1,1; + --telekom-motion-easing-standard: 0.4, 0, 0.6, 1; + --telekom-motion-easing-enter: 0.4, 0.6, 0.6, 1; + --telekom-motion-easing-leave: 0.4, 0, 1, 1; --telekom-opacity-invisible: 0; --telekom-opacity-transparent: 0.35; --telekom-opacity-semi-transparent: 0.5; @@ -275,7 +292,7 @@ * Generated on Thu, 23 Dec 2021 08:46:24 GMT */ -[data-mode="dark"] { +[data-mode='dark'] { --telekom-color-text-and-icon-standard: #fcfcfc; /* Default text color with highest contrast. */ --telekom-color-text-and-icon-additional: #9f9ca0; /* Use in combination with standard text for additional text elements. */ --telekom-color-text-and-icon-disabled: #5a5759; /* Only use for disabled text. */ @@ -296,7 +313,12 @@ --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ --telekom-color-background-canvas: #141414; /* Used as the background for your product (app, website, etc.) */ --telekom-color-background-canvas-subtle: #201f20; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-backdrop: rgba(0, 0, 0, 0.7); /* Use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-backdrop: rgba( + 0, + 0, + 0, + 0.7 + ); /* Use to overlay content below dialogs to separate dialog from content below */ --telekom-color-background-surface: #2c2a2b; /* Use as the background of elements like cards, headers, bottom bars, etc. */ --telekom-color-background-surface-subtle: #373636; /* Use as the background of elements like cards, headers, bottom bars, etc. */ --telekom-color-background-surface-highlight: #434142; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ diff --git a/packages/components/src/html/semantic-tokens.html b/packages/components/src/html/semantic-tokens.html index e133d060a4..9849c388cf 100644 --- a/packages/components/src/html/semantic-tokens.html +++ b/packages/components/src/html/semantic-tokens.html @@ -38,22 +38,22 @@ From 1c9ccec85ee342c7bfac2922d3be32ba7d2c1ad3 Mon Sep 17 00:00:00 2001 From: Arturo Date: Fri, 21 Jan 2022 18:31:10 +0100 Subject: [PATCH 03/36] refactor: update temporary tokens CSS file with latest --- .../src/global/telekom-design-tokens.all.css | 561 +++++++++--------- 1 file changed, 268 insertions(+), 293 deletions(-) diff --git a/packages/components/src/global/telekom-design-tokens.all.css b/packages/components/src/global/telekom-design-tokens.all.css index 8faa0402a3..733eea7aa0 100644 --- a/packages/components/src/global/telekom-design-tokens.all.css +++ b/packages/components/src/global/telekom-design-tokens.all.css @@ -1,231 +1,202 @@ /** * Do not edit directly - * Generated on Thu, 23 Dec 2021 08:46:24 GMT + * Generated on Fri, 21 Jan 2022 17:29:08 GMT */ -:root, -[data-mode='light'] { - --telekom-color-text-and-icon-standard: #141414; /* Default text color with highest contrast. */ - --telekom-color-text-and-icon-additional: #716e71; /* Use in combination with standard text for additional text elements. */ - --telekom-color-text-and-icon-disabled: #b5b3b7; /* Only use for disabled text. */ - --telekom-color-text-and-icon-link-standard: #1154d9; - --telekom-color-text-and-icon-link-hovered: #1045ae; - --telekom-color-text-and-icon-link-visited: #5f5a9b; - --telekom-color-text-and-icon-link-active: #0b255b; + :root, [data-mode="light"] { + --telekom-color-text-and-icon-standard: #000000; /* default text color with highest contrast. */ + --telekom-color-text-and-icon-additional: hsla(0, 0%, 0%, 0.65); /* use in combination with standard text for additional text elements. */ + --telekom-color-text-and-icon-disabled: hsla(0, 0%, 0%, 0.4); /* only use for disabled text. */ + --telekom-color-text-and-icon-link-standard: #005ac4; + --telekom-color-text-and-icon-link-hovered: #00489d; + --telekom-color-text-and-icon-link-visited: #51417f; + --telekom-color-text-and-icon-link-active: #003778; --telekom-color-text-and-icon-primary-standard: #e20074; --telekom-color-text-and-icon-primary-hovered: #c00063; --telekom-color-text-and-icon-primary-pressed: #9e0051; - --telekom-color-text-and-icon-inverted-standard: #fcfcfc; /* Standard text color inverted to be used on high contrast colors like UI/Extra Strong */ - --telekom-color-text-and-icon-inverted-additional: #9f9ca0; /* Additional text color inverted to be used on high contrast colors like UI/Extra Strong */ - --telekom-color-text-and-icon-functional-informational: #1045ae; - --telekom-color-text-and-icon-functional-success: #23925a; - --telekom-color-text-and-icon-functional-danger: #c02f4c; - --telekom-color-text-and-icon-functional-warning: #ff7f00; - --telekom-color-text-and-icon-functional-white: #ffffff; /* This text color is white in all modes (light & dark) */ - --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ - --telekom-color-background-canvas: #ffffff; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-canvas-subtle: #f0f0f1; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-backdrop: rgba( - 0, - 0, - 0, - 0.5 - ); /* Use to overlay content below dialogs to separate dialog from content below */ - --telekom-color-background-surface: #ffffff; /* Use as the background of elements like cards, headers, bottom bars, etc. */ - --telekom-color-background-surface-subtle: #fcfcfc; /* Use as the background of elements like cards, headers, bottom bars, etc. */ - --telekom-color-background-surface-highlight: #141414; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ + --telekom-color-text-and-icon-inverted-standard: #ffffff; /* standard text color inverted to be used on high contrast colors like ui/extra strong */ + --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 100%, 0.65); /* additional text color inverted to be used on high contrast colors like ui/extra strong */ + --telekom-color-text-and-icon-functional-informational: #005ac4; + --telekom-color-text-and-icon-functional-success: #09572f; + --telekom-color-text-and-icon-functional-danger: #e60021; + --telekom-color-text-and-icon-functional-warning: #bb5313; + --telekom-color-text-and-icon-functional-white: #ffffff; /* this text color is white in all modes (light & dark) */ + --telekom-color-text-and-icon-functional-black: #000000; /* this text color is black in all modes (light & dark) */ + --telekom-color-background-canvas: #ffffff; /* used as the background for your product (app, website, etc.) */ + --telekom-color-background-canvas-subtle: #e7e8e9; /* used as the background for your product (app, website, etc.) */ + --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.5); /* use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-surface: #ffffff; /* use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-subtle: #f0f1f1; /* use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-highlight: #050505; /* use as the background of elements that should stand out highlighted sections, footer, etc. */ --telekom-color-primary-standard: #e20074; --telekom-color-primary-hovered: #c00063; --telekom-color-primary-pressed: #9e0051; - --telekom-color-primary-subtle: #fef2f8; - --telekom-color-ui-subtle: #e3e3e5; - --telekom-color-ui-light: #b5b3b7; - --telekom-color-ui-normal: #888588; - --telekom-color-ui-strong: #5a5759; - --telekom-color-ui-extra-strong: #141414; - --telekom-color-ui-disabled: #e3e3e5; /* Use for disabled interactive elements in combination with the disabled text color */ - --telekom-color-functional-focus: #1154d9; - --telekom-color-functional-success-standard: #3cb176; - --telekom-color-functional-success-hovered: #23925a; - --telekom-color-functional-success-pressed: #177345; - --telekom-color-functional-success-subtle: #f5fffa; - --telekom-color-functional-interaction-standard: #1154d9; - --telekom-color-functional-interaction-hovered: #1045ae; - --telekom-color-functional-interaction-pressed: #0e3584; - --telekom-color-functional-interaction-subtle: #f4f8ff; - --telekom-color-functional-informational-standard: #1154d9; - --telekom-color-functional-informational-hovered: #1045ae; - --telekom-color-functional-informational-pressed: #0e3584; - --telekom-color-functional-informational-subtle: #f4f8ff; - --telekom-color-functional-warning-standard: #ff9124; - --telekom-color-functional-warning-hovered: #ff7f00; - --telekom-color-functional-warning-pressed: #dc6d00; - --telekom-color-functional-warning-subtle: #fff9f2; - --telekom-color-functional-danger-standard: #d64562; - --telekom-color-functional-danger-hovered: #c02f4c; - --telekom-color-functional-danger-pressed: #9a2a3f; - --telekom-color-functional-danger-subtle: #fef6f8; - --telekom-color-additional-clay-0: #f2e4df; - --telekom-color-additional-clay-10: #edd8ce; - --telekom-color-additional-clay-20: #e9cdbe; - --telekom-color-additional-clay-30: #e3c2af; - --telekom-color-additional-clay-40: #deb7a0; - --telekom-color-additional-clay-50: #d9ad92; - --telekom-color-additional-clay-60: #d2a483; - --telekom-color-additional-clay-70: #bb8c6f; - --telekom-color-additional-clay-80: #a3765d; - --telekom-color-additional-clay-90: #87604e; - --telekom-color-additional-clay-100: #6a4d40; - --telekom-color-additional-rose-0: #f6e5eb; - --telekom-color-additional-rose-10: #eed1da; - --telekom-color-additional-rose-20: #e6bcc9; - --telekom-color-additional-rose-30: #dda8b8; - --telekom-color-additional-rose-40: #d495a6; - --telekom-color-additional-rose-50: #cb8293; - --telekom-color-additional-rose-60: #c16f81; - --telekom-color-additional-rose-70: #a5566a; - --telekom-color-additional-rose-80: #864054; - --telekom-color-additional-rose-90: #652b3e; - --telekom-color-additional-rose-100: #511f31; - --telekom-color-additional-lilac-0: #f7eff6; - --telekom-color-additional-lilac-10: #efe3ed; - --telekom-color-additional-lilac-20: #ead9e7; - --telekom-color-additional-lilac-30: #e4cce0; - --telekom-color-additional-lilac-40: #d5b4d5; - --telekom-color-additional-lilac-50: #c59bca; - --telekom-color-additional-lilac-60: #b682bd; - --telekom-color-additional-lilac-70: #9e6ba5; - --telekom-color-additional-lilac-80: #84558a; - --telekom-color-additional-lilac-90: #6a3e71; - --telekom-color-additional-lilac-100: #502857; - --telekom-color-additional-pigeon-0: #e9ecf6; - --telekom-color-additional-pigeon-10: #d7dcef; - --telekom-color-additional-pigeon-20: #c5cce7; - --telekom-color-additional-pigeon-30: #b4bcde; - --telekom-color-additional-pigeon-40: #a3abd6; - --telekom-color-additional-pigeon-50: #929bcd; - --telekom-color-additional-pigeon-60: #828ac4; - --telekom-color-additional-pigeon-70: #6d6eb0; - --telekom-color-additional-pigeon-80: #5f5a9b; - --telekom-color-additional-pigeon-90: #534785; - --telekom-color-additional-pigeon-100: #46366d; - --telekom-color-additional-neptune-0: #deedec; - --telekom-color-additional-neptune-10: #cde5e5; - --telekom-color-additional-neptune-20: #bbdedd; - --telekom-color-additional-neptune-30: #a9d5d5; - --telekom-color-additional-neptune-40: #98cbcd; - --telekom-color-additional-neptune-50: #88c0c4; - --telekom-color-additional-neptune-60: #77b6bb; - --telekom-color-additional-neptune-70: #66a5a8; - --telekom-color-additional-neptune-80: #579292; - --telekom-color-additional-neptune-90: #4a7b7a; - --telekom-color-additional-neptune-100: #3f6160; - --telekom-color-additional-olive-0: #ecf3e7; - --telekom-color-additional-olive-10: #dce8d4; - --telekom-color-additional-olive-20: #ccdec2; - --telekom-color-additional-olive-30: #bbd3af; - --telekom-color-additional-olive-40: #aac89d; - --telekom-color-additional-olive-50: #99bd8b; - --telekom-color-additional-olive-60: #88b179; - --telekom-color-additional-olive-70: #709660; - --telekom-color-additional-olive-80: #597949; - --telekom-color-additional-olive-90: #425b33; - --telekom-color-additional-olive-100: #314724; - --telekom-color-additional-teal-0: #d7f6f4; - --telekom-color-additional-teal-10: #d7f6f4; - --telekom-color-additional-teal-20: #98e4e4; - --telekom-color-additional-teal-30: #79d9db; - --telekom-color-additional-teal-40: #5cccd0; - --telekom-color-additional-teal-50: #3ebdc5; - --telekom-color-additional-teal-60: #22adb9; - --telekom-color-additional-teal-70: #129ca3; - --telekom-color-additional-teal-80: #068788; - --telekom-color-additional-teal-90: #006967; - --telekom-color-additional-teal-100: #005651; - --telekom-color-additional-orange-0: #fffcdf; - --telekom-color-additional-orange-10: #fff4c6; - --telekom-color-additional-orange-20: #ffe9ae; - --telekom-color-additional-orange-30: #ffda97; - --telekom-color-additional-orange-40: #ffc780; - --telekom-color-additional-orange-50: #ffb26a; - --telekom-color-additional-orange-60: #fc9a55; - --telekom-color-additional-orange-70: #df6d3f; - --telekom-color-additional-orange-80: #ae461c; - --telekom-color-additional-orange-90: #973209; - --telekom-color-additional-orange-100: #7d1f09; - --telekom-color-additional-red-0: #ffc5cb; - --telekom-color-additional-red-10: #ffaab6; - --telekom-color-additional-red-20: #fe94a5; - --telekom-color-additional-red-30: #f98093; - --telekom-color-additional-red-40: #f36a80; - --telekom-color-additional-red-50: #ef556e; - --telekom-color-additional-red-60: #ed425b; - --telekom-color-additional-red-70: #d82a48; - --telekom-color-additional-red-80: #c31c3b; - --telekom-color-additional-red-90: #ad0f31; - --telekom-color-additional-red-100: #990024; - --telekom-color-additional-blue-0: #d6f8ff; - --telekom-color-additional-blue-10: #b5ebff; - --telekom-color-additional-blue-20: #95daff; - --telekom-color-additional-blue-30: #77c4ff; - --telekom-color-additional-blue-40: #59aaff; - --telekom-color-additional-blue-50: #3d8cff; - --telekom-color-additional-blue-60: #216bff; - --telekom-color-additional-blue-70: #0d39df; - --telekom-color-additional-blue-80: #000bbf; - --telekom-color-additional-blue-90: #03009f; - --telekom-color-additional-blue-100: #140080; - --telekom-color-additional-green-0: #f0f7e0; - --telekom-color-additional-green-10: #e0efc7; - --telekom-color-additional-green-20: #cfe8af; - --telekom-color-additional-green-30: #bbdf98; - --telekom-color-additional-green-40: #a4d681; - --telekom-color-additional-green-50: #8dcd6a; - --telekom-color-additional-green-60: #73c354; - --telekom-color-additional-green-70: #52b342; - --telekom-color-additional-green-80: #32a032; - --telekom-color-additional-green-90: #248b31; - --telekom-color-additional-green-100: #187431; - --telekom-color-additional-pine-0: #f5fffa; - --telekom-color-additional-pine-10: #daf7e8; - --telekom-color-additional-pine-20: #c0efd8; - --telekom-color-additional-pine-30: #92e0b9; - --telekom-color-additional-pine-40: #6cd09e; - --telekom-color-additional-pine-50: #50c188; - --telekom-color-additional-pine-60: #3cb176; - --telekom-color-additional-pine-70: #2da267; - --telekom-color-additional-pine-80: #23925a; - --telekom-color-additional-pine-90: #1c824f; - --telekom-color-additional-pine-100: #177345; - --telekom-elevation-flat-standard: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ - --telekom-elevation-flat-hover: 0px 2px 8px 0px #0000001a, - 0px 1px 2px 0px #0000001a; /* Exclusivly for flat design elements */ - --telekom-elevation-flat-pressed: 0px 0px 0px 0px #00000000; /* Exclusivly for flat design elements */ - --telekom-elevation-resting-standard: 0px 2px 8px 0px #0000001a, - 0px 1px 2px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ - --telekom-elevation-resting-hover: 0px 6px 24px 0px #0000001a, - 0px 3px 6px 0px #0000001a; /* Default for interactable elements like buttons, etc. */ - --telekom-elevation-resting-pressed: 0px 0px 0px 0px #00000000; /* Default for interactable elements like buttons, etc. */ - --telekom-elevation-raised-standard: 0px 8px 32px 0px #0000001a, - 0px 4px 8px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-raised-hover: 0px 16px 64px 0px #0000001a, - 0px 8px 16px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-raised-pressed: 0px 4px 16px 0px #0000001a, - 0px 2px 4px 0px #0000001a; /* For bigger interactable elements like cards, etc. */ - --telekom-elevation-floating-standard: 0px 12px 48px 0px #0000001a, - 0px 6px 12px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-floating-hover: 0px 24px 96px 0px #0000001a, - 0px 12px 24px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-floating-pressed: 0px 8px 32px 0px #0000001a, - 0px 4px 8px 0px #0000001a; /* For floating elements that mostly stay in a fixed position like a FAB. */ - --telekom-elevation-overlay: 0px 16px 64px 0px #0000001a, - 0px 8px 16px 0px #0000001a; /* For fixed elements that overlay the content e.g. sidebars or bottom sheets */ - --telekom-elevation-top: 0px 24px 96px 0px #0000001a, - 0px 12px 24px 0px #0000001a; /* Highest level e.g. for dialogs or modals */ - --telekom-elevation-app-bar-top-flat: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ - --telekom-elevation-app-bar-top-raised: 0px 1px 0px 0px #0000001a; /* Use for headers, app bar & menus on the top */ - --telekom-elevation-app-bar-bottom-flat: 0px -1px 0px 0px #0000001a; /* Use for app navigation and app bars on the bottom */ - --telekom-elevation-app-bar-bottom-raised: 0px -1px 0px 0px #0000001a; /* Use for app navigation and app bars on the bottom */ + --telekom-color-primary-subtle: #fff0f8; + --telekom-color-ui-subtle: #d3d5d6; + --telekom-color-ui-light: #a3a6aa; + --telekom-color-ui-normal: #707275; + --telekom-color-ui-strong: #4a4b4d; + --telekom-color-ui-extra-strong: #050505; + --telekom-color-ui-disabled: #d3d5d6; /* use for disabled interactive elements in combination with the disabled text color */ + --telekom-color-functional-focus: #006cec; + --telekom-color-functional-success-standard: #0d8347; + --telekom-color-functional-success-hovered: #0b6d3b; + --telekom-color-functional-success-pressed: #09572f; + --telekom-color-functional-success-subtle: #f0fff7; + --telekom-color-functional-interaction-standard: #006cec; + --telekom-color-functional-interaction-hovered: #005ac4; + --telekom-color-functional-interaction-pressed: #00489d; + --telekom-color-functional-interaction-subtle: #f0f7ff; + --telekom-color-functional-informational-standard: #006cec; + --telekom-color-functional-informational-hovered: #005ac4; + --telekom-color-functional-informational-pressed: #00489d; + --telekom-color-functional-informational-subtle: #f0f7ff; + --telekom-color-functional-warning-standard: #bb5313; + --telekom-color-functional-warning-hovered: #9c4410; + --telekom-color-functional-warning-pressed: #7e360c; + --telekom-color-functional-warning-subtle: #fff6f0; + --telekom-color-functional-danger-standard: #e60021; + --telekom-color-functional-danger-hovered: #c1001c; + --telekom-color-functional-danger-pressed: #9c0018; + --telekom-color-functional-danger-subtle: #fff0f2; + --telekom-color-additional-brown-0: #f7efea; + --telekom-color-additional-brown-100: #f3e6dd; + --telekom-color-additional-brown-200: #e8d0bf; + --telekom-color-additional-brown-300: #dab499; + --telekom-color-additional-brown-400: #c99d7d; + --telekom-color-additional-brown-500: #a88369; + --telekom-color-additional-brown-600: #8a6c56; + --telekom-color-additional-brown-700: #725947; + --telekom-color-additional-brown-800: #5b4739; + --telekom-color-additional-brown-900: #45362b; + --telekom-color-additional-brown-tint: #fff6f0; + --telekom-color-additional-brown-shade: #331500; + --telekom-color-additional-pink-0: #f6e3ec; + --telekom-color-additional-pink-100: #f6e3ec; + --telekom-color-additional-pink-200: #efcbdb; + --telekom-color-additional-pink-300: #e5abc5; + --telekom-color-additional-pink-400: #dc8fb2; + --telekom-color-additional-pink-500: #d06998; + --telekom-color-additional-pink-600: #c2417c; + --telekom-color-additional-pink-700: #a13667; + --telekom-color-additional-pink-800: #812c53; + --telekom-color-additional-pink-900: #63213f; + --telekom-color-additional-pink-tint: #fff0f7; + --telekom-color-additional-pink-shade: #330017; + --telekom-color-additional-purple-0: #f6eef7; + --telekom-color-additional-purple-100: #f0e4f2; + --telekom-color-additional-purple-200: #e5cde7; + --telekom-color-additional-purple-300: #d6afd8; + --telekom-color-additional-purple-400: #ca94c9; + --telekom-color-additional-purple-500: #bb71b7; + --telekom-color-additional-purple-600: #ad4da4; + --telekom-color-additional-purple-700: #9c318f; + --telekom-color-additional-purple-800: #7f2671; + --telekom-color-additional-purple-900: #621d54; + --telekom-color-additional-purple-tint: #fff0fd; + --telekom-color-additional-purple-shade: #33002e; + --telekom-color-additional-violet-0: #f2f0f7; + --telekom-color-additional-violet-100: #eae6f2; + --telekom-color-additional-violet-200: #d7d1e7; + --telekom-color-additional-violet-300: #c0b7da; + --telekom-color-additional-violet-400: #ab9fce; + --telekom-color-additional-violet-500: #9182bf; + --telekom-color-additional-violet-600: #7966b0; + --telekom-color-additional-violet-700: #65519f; + --telekom-color-additional-violet-800: #51417f; + --telekom-color-additional-violet-900: #3e3161; + --telekom-color-additional-violet-tint: #f4f0ff; + --telekom-color-additional-violet-shade: #0d0033; + --telekom-color-additional-teal-0: #e2f4f6; + --telekom-color-additional-teal-100: #d0eef1; + --telekom-color-additional-teal-200: #a6dee4; + --telekom-color-additional-teal-300: #6dc9d3; + --telekom-color-additional-teal-400: #37b6c2; + --telekom-color-additional-teal-500: #1c99a5; + --telekom-color-additional-teal-600: #177e88; + --telekom-color-additional-teal-700: #136871; + --telekom-color-additional-teal-800: #0f535a; + --telekom-color-additional-teal-900: #0c3f45; + --telekom-color-additional-teal-tint: #f0feff; + --telekom-color-additional-teal-shade: #002f33; + --telekom-color-additional-olive-0: #ecf3e9; + --telekom-color-additional-olive-100: #e0ecdc; + --telekom-color-additional-olive-200: #c5dbbd; + --telekom-color-additional-olive-300: #a3c596; + --telekom-color-additional-olive-400: #84b274; + --telekom-color-additional-olive-500: #6a965b; + --telekom-color-additional-olive-600: #577b4a; + --telekom-color-additional-olive-700: #48663d; + --telekom-color-additional-olive-800: #3a5231; + --telekom-color-additional-olive-900: #2c3e25; + --telekom-color-additional-olive-tint: #f4fff0; + --telekom-color-additional-olive-shade: #0e3300; + --telekom-color-additional-orange-0: #ffeedd; + --telekom-color-additional-orange-100: #ffe3c9; + --telekom-color-additional-orange-200: #ffc998; + --telekom-color-additional-orange-300: #ffa556; + --telekom-color-additional-orange-400: #ff7f1f; + --telekom-color-additional-orange-500: #e26617; + --telekom-color-additional-orange-600: #bb5313; + --telekom-color-additional-orange-700: #9c4410; + --telekom-color-additional-orange-800: #7e360c; + --telekom-color-additional-orange-900: #60290a; + --telekom-color-additional-orange-tint: #fff6f0; + --telekom-color-additional-orange-shade: #331600; + --telekom-color-additional-red-0: #feedeb; + --telekom-color-additional-red-100: #fee2df; + --telekom-color-additional-red-200: #fec8c2; + --telekom-color-additional-red-300: #fda49d; + --telekom-color-additional-red-400: #fd817a; + --telekom-color-additional-red-500: #fe4543; + --telekom-color-additional-red-600: #e60021; + --telekom-color-additional-red-700: #c1001c; + --telekom-color-additional-red-800: #9c0018; + --telekom-color-additional-red-900: #780214; + --telekom-color-additional-red-tint: #fff0f2; + --telekom-color-additional-red-shade: #330008; + --telekom-color-additional-blue-0: #e7f2ff; + --telekom-color-additional-blue-100: #d8eaff; + --telekom-color-additional-blue-200: #b6d7ff; + --telekom-color-additional-blue-300: #89bfff; + --telekom-color-additional-blue-400: #60a9ff; + --telekom-color-additional-blue-500: #268aff; + --telekom-color-additional-blue-600: #006cec; + --telekom-color-additional-blue-700: #005ac4; + --telekom-color-additional-blue-800: #00489d; + --telekom-color-additional-blue-900: #003778; + --telekom-color-additional-blue-tint: #f0f7ff; + --telekom-color-additional-blue-shade: #001733; + --telekom-color-additional-green-0: #daf8e8; + --telekom-color-additional-green-100: #c2f3da; + --telekom-color-additional-green-200: #87e7b7; + --telekom-color-additional-green-300: #2cd580; + --telekom-color-additional-green-400: #13be68; + --telekom-color-additional-green-500: #109f57; + --telekom-color-additional-green-600: #0d8347; + --telekom-color-additional-green-700: #0b6d3b; + --telekom-color-additional-green-800: #09572f; + --telekom-color-additional-green-900: #074224; + --telekom-color-additional-green-tint: #f0fff7; + --telekom-color-additional-green-shade: #003319; + --telekom-elevation-flat-standard: 0px 0px 0px 0px hsla(0, 0%, 0%, 0.1); /* Exclusivly for flat design elements */ + --telekom-elevation-flat-hover: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1); /* Exclusivly for flat design elements */ + --telekom-elevation-flat-pressed: 0px 0px 0px 0px hsla(0, 0%, 0%, 0.1); /* Exclusivly for flat design elements */ + --telekom-elevation-resting-standard: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1); /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-hover: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1); /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-resting-pressed: 0px 0px 0px 0px hsla(0, 0%, 0%, 0.1); /* Default for interactable elements like buttons, etc. */ + --telekom-elevation-raised-standard: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1); /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-hover: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1); /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-raised-pressed: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1); /* For bigger interactable elements like cards, etc. */ + --telekom-elevation-floating-standard: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1); /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-hover: 0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1); /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-floating-pressed: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1); /* For floating elements that mostly stay in a fixed position like a FAB. */ + --telekom-elevation-overlay: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1); /* For fixed elements that overlay the content e.g. sidebars or bottom sheets */ + --telekom-elevation-top: 0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1); /* Highest level e.g. for dialogs or modals */ + --telekom-elevation-app-bar-top-flat: 0px 1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px 2px 8px 0px hsla(0, 0%, 0%, 0.05); /* Use for headers, app bar & menus on the top */ + --telekom-elevation-app-bar-top-raised: 0px 1px 0px 0px hsla(0, 0%, 0%, 0.1); /* Use for headers, app bar & menus on the top */ + --telekom-elevation-app-bar-bottom-flat: 0px -1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px -2px 8px 0px hsla(0, 0%, 0%, 0.05); /* Use for app navigation and app bars on the bottom */ + --telekom-elevation-app-bar-bottom-raised: 0px -1px 0px 0px hsla(0, 0%, 0%, 0.1); /* Use for app navigation and app bars on the bottom */ --telekom-line-weight-standard: 0.0625rem; /* Used for ui elements like inputs, dividers, etc. */ --telekom-line-weight-highlight: 0.125rem; /* E.g. use for active menu items. */ --telekom-line-weight-bold: 0.25rem; @@ -234,9 +205,9 @@ --telekom-motion-duration-transition: 200ms; --telekom-motion-duration-animation: 600ms; --telekom-motion-duration-animation-deliberate: 800ms; - --telekom-motion-easing-standard: 0.4, 0, 0.6, 1; - --telekom-motion-easing-enter: 0.4, 0.6, 0.6, 1; - --telekom-motion-easing-leave: 0.4, 0, 1, 1; + --telekom-motion-easing-standard: 0.4,0,0.6,1; + --telekom-motion-easing-enter: 0.4,0.6,0.6,1; + --telekom-motion-easing-leave: 0.4,0,1,1; --telekom-opacity-invisible: 0; --telekom-opacity-transparent: 0.35; --telekom-opacity-semi-transparent: 0.5; @@ -248,20 +219,29 @@ --telekom-radius-large: 0.75rem; /* Used mainly for containers like cards or dialogs */ --telekom-radius-pill: 62.4375rem; /* Used for pill-shaped ui elements */ --telekom-radius-circle: 50%; /* Used for ui elements like radio buttons or things like avatars */ - --telekom-spacing-none: 0rem; - --telekom-spacing-inner-xs: 0.0625rem; - --telekom-spacing-inner-sm: 0.125rem; - --telekom-spacing-inner-md: 0.25rem; - --telekom-spacing-inner-lg: 0.5rem; - --telekom-spacing-grouped-sm: 0.75rem; - --telekom-spacing-grouped-md: 1rem; - --telekom-spacing-grouped-lg: 1.5rem; - --telekom-spacing-related-sm: 2rem; - --telekom-spacing-related-md: 2.5rem; - --telekom-spacing-related-lg: 3rem; - --telekom-spacing-unrelated-sm: 4rem; - --telekom-spacing-unrelated-md: 4.5rem; - --telekom-spacing-unrelated-lg: 5rem; + --telekom-spacing-unit-x-0: 0rem; + --telekom-spacing-unit-x-025: 0.0625rem; + --telekom-spacing-unit-x-05: 0.125rem; + --telekom-spacing-unit-x-1: 0.25rem; + --telekom-spacing-unit-x-2: 0.5rem; + --telekom-spacing-unit-x-3: 0.75rem; + --telekom-spacing-unit-x-4: 1rem; + --telekom-spacing-unit-x-5: 1.25rem; + --telekom-spacing-unit-x-6: 1.5rem; + --telekom-spacing-unit-x-7: 1.75rem; + --telekom-spacing-unit-x-8: 2rem; + --telekom-spacing-unit-x-9: 2.25rem; + --telekom-spacing-unit-x-10: 2.5rem; + --telekom-spacing-unit-x-11: 2.75rem; + --telekom-spacing-unit-x-12: 3rem; + --telekom-spacing-unit-x-13: 3.25rem; + --telekom-spacing-unit-x-14: 3.5rem; + --telekom-spacing-unit-x-15: 3.75rem; + --telekom-spacing-unit-x-16: 4rem; + --telekom-spacing-unit-x-17: 4.25rem; + --telekom-spacing-unit-x-18: 4.5rem; + --telekom-spacing-unit-x-19: 4.75rem; + --telekom-spacing-unit-x-20: 5rem; --telekom-typography-font-size-footnote: 0.625rem; --telekom-typography-font-size-small: 0.75rem; --telekom-typography-font-size-caption: 0.875rem; @@ -289,68 +269,63 @@ /** * Do not edit directly - * Generated on Thu, 23 Dec 2021 08:46:24 GMT + * Generated on Fri, 21 Jan 2022 17:29:08 GMT */ -[data-mode='dark'] { - --telekom-color-text-and-icon-standard: #fcfcfc; /* Default text color with highest contrast. */ - --telekom-color-text-and-icon-additional: #9f9ca0; /* Use in combination with standard text for additional text elements. */ - --telekom-color-text-and-icon-disabled: #5a5759; /* Only use for disabled text. */ - --telekom-color-text-and-icon-link-standard: #256bf1; - --telekom-color-text-and-icon-link-hovered: #4d87f6; - --telekom-color-text-and-icon-link-visited: #828ac4; - --telekom-color-text-and-icon-link-active: #75a3fa; +[data-mode="dark"] { + --telekom-color-text-and-icon-standard: #ffffff; /* default text color with highest contrast. */ + --telekom-color-text-and-icon-additional: hsla(0, 0%, 100%, 0.65); /* use in combination with standard text for additional text elements. */ + --telekom-color-text-and-icon-disabled: hsla(0, 0%, 100%, 0.3); /* only use for disabled text. */ + --telekom-color-text-and-icon-link-standard: #60a9ff; + --telekom-color-text-and-icon-link-hovered: #89bfff; + --telekom-color-text-and-icon-link-visited: #ab9fce; + --telekom-color-text-and-icon-link-active: #b6d7ff; --telekom-color-text-and-icon-primary-standard: #e20074; - --telekom-color-text-and-icon-primary-hovered: #c00063; - --telekom-color-text-and-icon-primary-pressed: #9e0051; - --telekom-color-text-and-icon-inverted-standard: #141414; /* Standard text color inverted to be used on high contrast colors like UI/Extra Strong */ - --telekom-color-text-and-icon-inverted-additional: #716e71; /* Additional text color inverted to be used on high contrast colors like UI/Extra Strong */ - --telekom-color-text-and-icon-functional-informational: #256bf1; - --telekom-color-text-and-icon-functional-success: #3cb176; - --telekom-color-text-and-icon-functional-danger: #d64562; - --telekom-color-text-and-icon-functional-warning: #ff9124; - --telekom-color-text-and-icon-functional-white: #ffffff; /* This text color is white in all modes (light & dark) */ - --telekom-color-text-and-icon-functional-black: #000000; /* This text color is black in all modes (light & dark) */ - --telekom-color-background-canvas: #141414; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-canvas-subtle: #201f20; /* Used as the background for your product (app, website, etc.) */ - --telekom-color-background-backdrop: rgba( - 0, - 0, - 0, - 0.7 - ); /* Use to overlay content below dialogs to separate dialog from content below */ - --telekom-color-background-surface: #2c2a2b; /* Use as the background of elements like cards, headers, bottom bars, etc. */ - --telekom-color-background-surface-subtle: #373636; /* Use as the background of elements like cards, headers, bottom bars, etc. */ - --telekom-color-background-surface-highlight: #434142; /* Use as the background of elements that should stand out highlighted sections, footer, etc. */ + --telekom-color-text-and-icon-primary-hovered: #ec59a5; + --telekom-color-text-and-icon-primary-pressed: #f080ba; + --telekom-color-text-and-icon-inverted-standard: #000000; /* standard text color inverted to be used on high contrast colors like ui/extra strong */ + --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 0%, 0.65); /* additional text color inverted to be used on high contrast colors like ui/extra strong */ + --telekom-color-text-and-icon-functional-informational: #268aff; + --telekom-color-text-and-icon-functional-success: #13be68; + --telekom-color-text-and-icon-functional-danger: #fe4543; + --telekom-color-text-and-icon-functional-warning: #e26617; + --telekom-color-text-and-icon-functional-white: #ffffff; /* this text color is white in all modes (light & dark) */ + --telekom-color-text-and-icon-functional-black: #000000; /* this text color is black in all modes (light & dark) */ + --telekom-color-background-canvas: #050505; /* used as the background for your product (app, website, etc.) */ + --telekom-color-background-canvas-subtle: #161617; /* used as the background for your product (app, website, etc.) */ + --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.65); /* use to overlay content below dialogs to separate dialog from content below */ + --telekom-color-background-surface: #272729; /* use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-subtle: #38393b; /* use as the background of elements like cards, headers, bottom bars, etc. */ + --telekom-color-background-surface-highlight: #4a4b4d; /* use as the background of elements that should stand out highlighted sections, footer, etc. */ --telekom-color-primary-standard: #e20074; --telekom-color-primary-hovered: #c00063; --telekom-color-primary-pressed: #9e0051; - --telekom-color-primary-subtle: #2d0017; - --telekom-color-ui-subtle: #2c2a2b; - --telekom-color-ui-light: #373636; - --telekom-color-ui-normal: #434142; - --telekom-color-ui-strong: #5a5759; - --telekom-color-ui-extra-strong: #fcfcfc; - --telekom-color-ui-disabled: #2c2a2b; /* Use for disabled interactive elements in combination with the disabled text color */ - --telekom-color-functional-focus: #256bf1; - --telekom-color-functional-success-standard: #177345; - --telekom-color-functional-success-hovered: #23925a; - --telekom-color-functional-success-pressed: #3cb176; - --telekom-color-functional-success-subtle: #002613; - --telekom-color-functional-interaction-standard: #256bf1; - --telekom-color-functional-interaction-hovered: #4d87f6; - --telekom-color-functional-interaction-pressed: #75a3fa; - --telekom-color-functional-interaction-subtle: #071533; - --telekom-color-functional-informational-standard: #256bf1; - --telekom-color-functional-informational-hovered: #4d87f6; - --telekom-color-functional-informational-pressed: #75a3fa; - --telekom-color-functional-informational-subtle: #071533; - --telekom-color-functional-warning-standard: #ff7f00; - --telekom-color-functional-warning-hovered: #ff9124; - --telekom-color-functional-warning-pressed: #ffa348; - --telekom-color-functional-warning-subtle: #4d2600; - --telekom-color-functional-danger-standard: #c02f4c; - --telekom-color-functional-danger-hovered: #d64562; - --telekom-color-functional-danger-pressed: #e16580; - --telekom-color-functional-danger-subtle: #301116; + --telekom-color-primary-subtle: #33001a; + --telekom-color-ui-subtle: #272729; + --telekom-color-ui-light: #38393b; + --telekom-color-ui-normal: #4a4b4d; + --telekom-color-ui-strong: #5d5f61; + --telekom-color-ui-extra-strong: #f0f1f1; + --telekom-color-ui-disabled: #272729; /* use for disabled interactive elements in combination with the disabled text color */ + --telekom-color-functional-focus: #268aff; + --telekom-color-functional-success-standard: #09572f; + --telekom-color-functional-success-hovered: #0b6d3b; + --telekom-color-functional-success-pressed: #0d8347; + --telekom-color-functional-success-subtle: #003319; + --telekom-color-functional-interaction-standard: #005ac4; + --telekom-color-functional-interaction-hovered: #006cec; + --telekom-color-functional-interaction-pressed: #268aff; + --telekom-color-functional-interaction-subtle: #001733; + --telekom-color-functional-informational-standard: #005ac4; + --telekom-color-functional-informational-hovered: #006cec; + --telekom-color-functional-informational-pressed: #268aff; + --telekom-color-functional-informational-subtle: #001733; + --telekom-color-functional-warning-standard: #e26617; + --telekom-color-functional-warning-hovered: #ff7f1f; + --telekom-color-functional-warning-pressed: #ffa556; + --telekom-color-functional-warning-subtle: #331600; + --telekom-color-functional-danger-standard: #9c0018; + --telekom-color-functional-danger-hovered: #c1001c; + --telekom-color-functional-danger-pressed: #e60021; + --telekom-color-functional-danger-subtle: #330008; } From 3a20bbd4b4cb6f2df3687ee188ad7d78ea48968b Mon Sep 17 00:00:00 2001 From: Arturo Date: Fri, 28 Jan 2022 17:10:33 +0100 Subject: [PATCH 04/36] feat(storybook): add simple dark mode switch, load tokens from npm --- packages/components/package.json | 1 + packages/components/src/global/scale.css | 3 +- packages/components/src/global/whitelabel.css | 2 + .../components/src/html/semantic-tokens.html | 42 +++++++------------ .../.storybook/preview-head.html | 11 ++++- packages/storybook-vue/.storybook/preview.js | 19 +++++++++ yarn.lock | 5 +++ 7 files changed, 54 insertions(+), 29 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 3103bd4ae0..abbe6185b3 100644 --- a/packages/components/package.json +++ b/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.3", "@telekom/scale-design-tokens": "^3.0.0-beta.43", "classnames": "^2.2.6", "stencil-inline-svg": "^1.0.1", diff --git a/packages/components/src/global/scale.css b/packages/components/src/global/scale.css index e18aa0f918..7d28624922 100644 --- a/packages/components/src/global/scale.css +++ b/packages/components/src/global/scale.css @@ -11,6 +11,5 @@ @import './fonts.css'; @import '~@telekom/scale-design-tokens/dist/design-tokens-telekom.css'; -/* Temporarily loading from local file, this is a POC */ -@import './telekom-design-tokens.all.css'; +@import '~@telekom/design-tokens/dist/telekom/css/telekom-design-tokens.all.css'; @import './grid.css'; diff --git a/packages/components/src/global/whitelabel.css b/packages/components/src/global/whitelabel.css index 6fead21134..a40ae6c0f6 100644 --- a/packages/components/src/global/whitelabel.css +++ b/packages/components/src/global/whitelabel.css @@ -10,3 +10,5 @@ */ @import '~@telekom/scale-design-tokens/dist/design-tokens.css'; +@import '~@telekom/design-tokens/dist/css/design-tokens.all.css'; +@import './grid.css'; diff --git a/packages/components/src/html/semantic-tokens.html b/packages/components/src/html/semantic-tokens.html index 9849c388cf..d648cb7201 100644 --- a/packages/components/src/html/semantic-tokens.html +++ b/packages/components/src/html/semantic-tokens.html @@ -16,44 +16,34 @@ } body { - padding: var(--telekom-spacing-related-lg); + padding: var(--telekom-spacing-unit-x4); color: var(--telekom-color-text-and-icon-standard); background: var(--telekom-color-background-canvas); transition: background; transition-duration: var(--telekom-motion-duration-animation); transition-timing-function: var(--telekom-motion-easing-standard); } - - scale-modal > scale-button + scale-button { - margin-left: var(--telekom-spacing-grouped-sm); - } - - - -

We hope you like it!

- +

Hello.

diff --git a/packages/storybook-vue/.storybook/preview-head.html b/packages/storybook-vue/.storybook/preview-head.html index af532f8842..66bf61672b 100644 --- a/packages/storybook-vue/.storybook/preview-head.html +++ b/packages/storybook-vue/.storybook/preview-head.html @@ -3,20 +3,29 @@ diff --git a/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css b/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css index b802164194..7dc880d7ed 100644 --- a/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css +++ b/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css @@ -6,8 +6,8 @@ .addon-usage h5, .addon-usage h6, .addon-usage li { - font-family: "TeleNeoWeb", "TeleNeo", sans-serif !important; - /* color: var(--scl-color-text-standard) !important; */ + font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; + /* color: var(--telekom-color-text-and-icon-standard) !important; */ color: var(--telekom-color-text-and-icon-standard) !important; } @@ -47,9 +47,9 @@ } .addon-usage a { - font-family: "TeleNeoWeb", "TeleNeo", sans-serif !important; + font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; text-decoration: none !important; - /* color: var(--scl-color-text-link) !important; */ + /* color: var(---telekom-color-text-and-icon-link-standard) !important; */ color: var(--telekom-color-text-and-icon-link-standard) !important; } diff --git a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css index d07ed71f4f..d4e95c68cf 100644 --- a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css +++ b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css @@ -6,8 +6,8 @@ h4, h5, h6, li { - font-family: "TeleNeoWeb", "TeleNeo", sans-serif !important; - color: var(--scl-color-text-standard) !important; + font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; + color: var(--telekom-color-text-and-icon-standard) !important; } .sbdocs-h1, @@ -46,11 +46,13 @@ li { } .sbdocs-a { - font-family: "TeleNeoWeb", "TeleNeo", sans-serif !important; - color: var(--scl-color-text-link) !important; + font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; + color: var(--telekom-color-text-and-icon-link-standard) !important; } -.sbdocs-p, .sbdocs-ul, .sbdocs-li { +.sbdocs-p, +.sbdocs-ul, +.sbdocs-li { font-size: 16px !important; line-height: 24px !important; } diff --git a/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx index 029024e1b5..66eb8b73bb 100644 --- a/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx +++ b/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx @@ -105,7 +105,7 @@ export const SlotTemplate = (args, { argTypes }) => ({ :preventOverflow="preventOverflow" > @@ -264,7 +264,9 @@ export const FocusTemplate = (args, { argTypes }) => ({

I'm a HTML-tooltip - with a link + with a link

Hover me From 0c53366664fa9d80ba82de2d920644ceaed82000 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 18 Feb 2022 14:20:03 +0100 Subject: [PATCH 26/36] refactor: remove unused folder --- .../src/components/text-field-v2/readme.md | 55 ------------------- 1 file changed, 55 deletions(-) delete mode 100644 packages/components/src/components/text-field-v2/readme.md diff --git a/packages/components/src/components/text-field-v2/readme.md b/packages/components/src/components/text-field-v2/readme.md deleted file mode 100644 index 678118f2df..0000000000 --- a/packages/components/src/components/text-field-v2/readme.md +++ /dev/null @@ -1,55 +0,0 @@ -# scale-text-field-v2 - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- | -| `counter` | `counter` | (optional) Input counter | `boolean` | `undefined` | -| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `undefined` | -| `helperText` | `helper-text` | (optional) Input helper text | `string` | `''` | -| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads. | `boolean` | `undefined` | -| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | -| `inputprefix` | `inputprefix` | (optional) input prefix | `string` | `undefined` | -| `inputsuffix` | `inputsuffix` | (optional) input prefix | `string` | `undefined` | -| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | -| `label` | `label` | (optional) Input label | `string` | `''` | -| `list` | `list` | (optional) input list | `string` | `undefined` | -| `maxLength` | `max-length` | (optional) Input max length | `number` | `undefined` | -| `minLength` | `min-length` | (optional) Input min length | `number` | `undefined` | -| `name` | `name` | (optional) Input name | `string` | `''` | -| `placeholder` | `placeholder` | (optional) Input placeHolder | `string` | `''` | -| `readonly` | `readonly` | (optional) Input readonly | `boolean` | `undefined` | -| `required` | `required` | (optional) Input required | `boolean` | `undefined` | -| `size` | `size` | (optional) Input size | `string` | `''` | -| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | -| `step` | `step` | (optional) the step attribute specifies the interval between legal numbers in an element. | `string` | `'1'` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `transparent` | `transparent` | (optional) input background transparent | `boolean` | `undefined` | -| `type` | `type` | (optional) Input type | `"date" \| "email" \| "hidden" \| "number" \| "password" \| "tel" \| "text" \| "url"` | `'text'` | -| `value` | `value` | (optional) Input value | `number \| string` | `''` | - - -## Events - -| Event | Description | Type | -| --------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------- | -| `scale-blur` | Emitted when the input loses focus. | `CustomEvent` | -| `scale-change` | Emitted when the value has changed. | `CustomEvent` | -| `scale-focus` | Emitted when the input has focus. | `CustomEvent` | -| `scale-input` | Emitted when a keyboard input occurred. | `CustomEvent` | -| `scale-keydown` | Emitted on keydown. | `CustomEvent` | -| `scaleBlur` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | -| `scaleChange` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | -| `scaleFocus` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | -| `scaleInput` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | -| `scaleKeydown` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* From 717f1b51385f5d021c7108ec794d0476ffd7b8d8 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 18 Feb 2022 15:24:06 +0100 Subject: [PATCH 27/36] refactor: remove & fix some code comments, some more token updates --- .../src/components/checkbox/checkbox.css | 12 ++++-------- .../src/components/collapsible/collapsible.css | 3 +-- .../src/components/date-picker/date-picker.css | 15 +++++---------- .../src/components/dropdown/dropdown.css | 6 ++---- .../components/src/components/input/input.css | 5 +---- packages/components/src/components/link/link.css | 2 -- .../loading-spinner/loading-spinner.css | 2 -- .../menu-flyout-divider/menu-flyout-divider.css | 2 +- .../menu-flyout-item/menu-flyout-item.css | 2 +- .../components/src/components/modal/modal.css | 1 - .../radio-button-group/radio-button-group.css | 1 - .../src/components/radio-button/radio-button.css | 1 - .../sidebar-nav-collapsible.css | 2 -- .../sidebar-nav-item/sidebar-nav-item.css | 2 -- .../src/components/sidebar-nav/sidebar-nav.css | 1 - .../components/src/components/slider/slider.css | 6 ++---- .../components/src/components/table/table.css | 5 ----- packages/components/src/components/tag/tag.css | 13 ++++--------- .../app-navigation-user-menu.css | 3 +-- .../src/components/telekom/logo/logo.css | 2 -- 20 files changed, 22 insertions(+), 64 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css index 7419555645..1f1f586b4c 100644 --- a/packages/components/src/components/checkbox/checkbox.css +++ b/packages/components/src/components/checkbox/checkbox.css @@ -19,17 +19,13 @@ scale-checkbox { --color-text: var(--telekom-color-text-and-icon-standard); --color-error: var(--telekom-color-text-and-icon-functional-danger); --color-disabled: var(--telekom-color-text-and-icon-disabled); - /* FIXME:token-alpha9 unused */ + /* FIXME unused variable */ --color-standard: var(--telekom-color-background-surface); --background-disabled: var(--telekom-color-ui-outlined-fill-disabled); - --color-primary: var(--telekom-color-primary-standard, #e20074); + --color-primary: var(--telekom-color-primary-standard); --color-focus: var(--telekom-color-functional-focus); - /* FIXME:TOKEN-alpha8 not sure if I just remove these css rules - instead of using the same font color for all states. Removing the css rules would probably break - some user defined css - */ - --color-primary-hover: var(--telekom-color-text-and-icon-standard, #f90984); - --color-primary-active: var(--telekom-color-text-and-icon-standard, #cb0068); + --color-primary-hover: var(--telekom-color-text-and-icon-standard); + --color-primary-active: var(--telekom-color-text-and-icon-standard); /*control*/ --width-control: var(--telekom-spacing-unit-x4); diff --git a/packages/components/src/components/collapsible/collapsible.css b/packages/components/src/components/collapsible/collapsible.css index 0442d12047..1e066470e0 100644 --- a/packages/components/src/components/collapsible/collapsible.css +++ b/packages/components/src/components/collapsible/collapsible.css @@ -22,8 +22,7 @@ --spacing-left-button-text: var(--telekom-spacing-unit-x2); --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-button-active: var(--telekom-color-text-and-icon-primary-pressed); - /* FIXME:TOKEN-alpha8 is this correct? no other available color matches sketch */ - --background-button-hover: var(--telekom-color-ui-additional-subtle); + --background-button-hover: var(--telekom-color-ui-ghost-hovered); --border-color-button-focus: var(--telekom-color-functional-focus); /* icon */ diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index 387b5193d7..5f7cbb3dfa 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -18,15 +18,12 @@ duet-date-picker { --duet-font-bold: var(--telekom-typography-font-weight-medium); --duet-color-placeholder: var(--telekom-color-ui-additional-regular); --duet-radius: var(--telekom-radius-standard); - - /* FIXME */ --duet-color-text-active: var( --telekom-color-text-and-icon-white-standard, #ffffff ); - /* FIXME */ - --duet-color-button: var(--telekom-color-background-surface, #ffffff); - --duet-color-surface: var(--telekom-color-background-surface, #ffffff); + --duet-color-button: var(--telekom-color-background-surface); + --duet-color-surface: var(--telekom-color-background-surface); --duet-z-index: 600; --spacing-heading: 0 0 var(--telekom-spacing-unit-x4) 0; @@ -56,7 +53,6 @@ duet-date-picker .duet-date__input:hover { duet-date-picker .duet-date__input:focus { box-shadow: 0 0 0 var(--telekom-line-weight-highlight) var(--telekom-color-functional-focus); - /* FIXME:TOKEN use ui/border (there's no "ui/border/focus" anyway) */ border: var(--telekom-line-weight-standard) solid var(--telekom-color-ui-outlined-border-active); } @@ -83,11 +79,11 @@ duet-date-picker .duet-date__toggle:focus { .duet-date__toggle:active { background-color: var(--telekom-color-ui-outlined-fill-pressed); } -/* FIXME:TOKEN-alpha8 this could just be removed */ + duet-date-picker .duet-date__toggle:hover scale-icon-content-calendar { color: var(--telekom-color-text-and-icon-standard); } -/* FIXME:TOKEN-alpha8 this could just be removed */ + duet-date-picker .duet-date__toggle:active scale-icon-content-calendar { color: var(--telekom-color-text-and-icon-standard); } @@ -258,7 +254,6 @@ duet-date-picker .duet-date__input:focus::placeholder { .scale-date-picker.scale-date-picker--disabled input, .scale-date-picker.scale-date-picker--disabled input:hover { color: var(--telekom-color-text-and-icon-disabled); - /* FIXME */ border-color: var(--telekom-color-ui-outlined-border-disabled); background: var(--telekom-color-ui-outlined-fill-disabled); } @@ -397,7 +392,7 @@ duet-date-picker .duet-date__day.is-today::before { duet-date-picker [aria-selected='true'] .duet-date__day.is-today::before, duet-date-picker .duet-date__day.is-today:hover::before { - /* FIXME:TOKEN-alpha9 not sure what to use here */ + /* FIXME */ background-color: var(--telekom-color-background-surface); } diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css index cb25620012..3fe7f05a44 100644 --- a/packages/components/src/components/dropdown/dropdown.css +++ b/packages/components/src/components/dropdown/dropdown.css @@ -23,7 +23,6 @@ scale-dropdown { var(--telekom-color-ui-outlined-border-standard); --border-error: var(--telekom-spacing-unit-x05) solid var(--telekom-color-functional-danger-standard); - /* FIXME:TOKEN use ui border… */ --border-color-hover: var(--telekom-color-ui-outlined-border-hovered); --border-color-focus: var(--telekom-color-ui-outlined-border-pressed); --border-color-disabled: var(--telekom-color-ui-outlined-border-disabled); @@ -54,9 +53,8 @@ scale-dropdown { /*icon*/ --height-icon: var(--telekom-spacing-unit-x6); --color-icon: var(--telekom-color-text-and-icon-standard); - /* FIXME:TOKEN-alpha8 this could be removed */ - --color-icon-hover: var(--telekom-color-text-and-icon-standard, #f90984); - --color-icon-active: var(--telekom-color-text-and-icon-standard, #cb0068); + --color-icon-hover: var(--telekom-color-text-and-icon-standard); + --color-icon-active: var(--telekom-color-text-and-icon-standard); --transition-icon: var(--transition); /*label*/ diff --git a/packages/components/src/components/input/input.css b/packages/components/src/components/input/input.css index 764a053e7f..23cc7352ad 100644 --- a/packages/components/src/components/input/input.css +++ b/packages/components/src/components/input/input.css @@ -264,7 +264,6 @@ margin-right: var(--telekom-spacing-unit-x2); } .input--type-checkbox input:disabled ~ label { - /* FIXME make sure color is right */ color: var(--telekom-color-ui-disabled); } .input--type-checkbox input:checked:disabled ~ label { @@ -449,9 +448,8 @@ border-radius: var(--telekom-radius-circle); -webkit-appearance: none; background-color: #fff; - /* FIXME:TOKEN needs some sort of black */ border: var(--telekom-line-weight-standard) solid - var(--scl-color-text-standard); + var(--telekom-color-ui-outlined-border-standard); margin: 0 var(--telekom-spacing-unit-x2) 0 0; } .input--type-radio input:focus { @@ -523,7 +521,6 @@ .input--disabled .input__textarea, .input--disabled .input__helper-text { cursor: not-allowed; - /* FIXME:TOKEN what font color to use here, background and border have the same color */ border-color: var(--telekom-color-ui-disabled); color: var(--telekom-color-text-and-icon-disabled); background: var(--telekom-color-ui-disabled); diff --git a/packages/components/src/components/link/link.css b/packages/components/src/components/link/link.css index 57e0bce764..c91194f0af 100644 --- a/packages/components/src/components/link/link.css +++ b/packages/components/src/components/link/link.css @@ -22,8 +22,6 @@ /* initial */ --color: var(--telekom-color-text-and-icon-link-standard); - /* FIXME:TOKEN hardcoded value */ - --color-line-initial: hsl(219, 100%, 87%); --color-line-initial: var(--telekom-color-functional-interaction-subtle); --line-thickness-initial: var(--telekom-line-weight-standard); /* visited */ diff --git a/packages/components/src/components/loading-spinner/loading-spinner.css b/packages/components/src/components/loading-spinner/loading-spinner.css index 1a86629e22..49d8d5f5f0 100644 --- a/packages/components/src/components/loading-spinner/loading-spinner.css +++ b/packages/components/src/components/loading-spinner/loading-spinner.css @@ -11,11 +11,9 @@ --font-weight: var(--telekom-typography-font-weight-bold); --font-size: var(--telekom-typography-font-size-body); - /* FIXME remove primary and white from variable names */ --color-circle-primary: var(--telekom-color-primary-standard); --color-circle-primary-inner: var(--telekom-color-ui-additional-subtle); --color-text-primary: var(--telekom-color-text-and-icon-additional); - /* FIXME:TOKEN what about these 2 circle-? ?*/ --color-circle-white: var(--telekom-color-ui-additional-base); --color-circle-white-inner: var(--telekom-color-ui-additional-regular); --color-text-white: var(--telekom-color-text-and-icon-white-standard); diff --git a/packages/components/src/components/menu-flyout-divider/menu-flyout-divider.css b/packages/components/src/components/menu-flyout-divider/menu-flyout-divider.css index 7744100f60..532d1a782d 100644 --- a/packages/components/src/components/menu-flyout-divider/menu-flyout-divider.css +++ b/packages/components/src/components/menu-flyout-divider/menu-flyout-divider.css @@ -13,7 +13,7 @@ :host { display: block; - /* FIXME renamae to --border-color */ + /* FIXME rename to --border-color */ --color: var(--telekom-color-ui-additional-light); } diff --git a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css index 40ff61e596..8a8b0b4813 100644 --- a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css +++ b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css @@ -49,7 +49,7 @@ .menu-flyout-item:hover:not(.menu-flyout-item--disabled) { color: var(--telekom-color-text-and-icon-primary-hovered); } -/* FIXME:TOKEN-alpha8 this could just be removed */ + :host(:focus) .menu-flyout-item:not(.menu-flyout-item--disabled) { color: var(--telekom-color-text-and-icon-standard); } diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css index 83d781f999..dfb492790f 100644 --- a/packages/components/src/components/modal/modal.css +++ b/packages/components/src/components/modal/modal.css @@ -45,7 +45,6 @@ --spacing-x-header: var(--telekom-spacing-unit-x6); --spacing-y-header: var(--telekom-spacing-unit-x6); - /* FIXME:TOKEN --telekom-color-ui-border-standard is too dark */ --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid var( --telekom-color-ui-general-subtle, diff --git a/packages/components/src/components/radio-button-group/radio-button-group.css b/packages/components/src/components/radio-button-group/radio-button-group.css index 66ac47190d..8eab70896a 100644 --- a/packages/components/src/components/radio-button-group/radio-button-group.css +++ b/packages/components/src/components/radio-button-group/radio-button-group.css @@ -20,7 +20,6 @@ --padding-bottom-error-helper-text: var(--telekom-spacing-unit-x2); --margin-top-error-helper-text: var(--telekom-spacing-unit-x1); --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium); - /* FIXME is this needed? */ --color-error-helper-text-hcm: var( --telekom-color-text-and-icon-white-standard ); diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css index e28e779f71..378eabfd21 100644 --- a/packages/components/src/components/radio-button/radio-button.css +++ b/packages/components/src/components/radio-button/radio-button.css @@ -16,7 +16,6 @@ scale-radio-button { --transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); --color-primary: var(--telekom-color-text-and-icon-primary-standard); - /* FIXME:TOKEN-alpha8 these could be removed */ --color-primary-hover: var(--telekom-color-text-and-icon-standard); --color-primary-active: var(--telekom-color-text-and-icon-standard); --color-focus: var(--telekom-color-functional-focus); diff --git a/packages/components/src/components/sidebar-nav-collapsible/sidebar-nav-collapsible.css b/packages/components/src/components/sidebar-nav-collapsible/sidebar-nav-collapsible.css index b821c4c901..ea126f2dd9 100644 --- a/packages/components/src/components/sidebar-nav-collapsible/sidebar-nav-collapsible.css +++ b/packages/components/src/components/sidebar-nav-collapsible/sidebar-nav-collapsible.css @@ -14,7 +14,6 @@ --border-bottom-color: var(--telekom-color-ui-additional-subtle); --border-left-color-third-nesting: var(--telekom-color-ui-additional-strong); --color-active: var(--telekom-color-text-and-icon-primary-pressed); - /* FIXME this variable is used sometimes for background sometimes for text */ --color-primary: var(--telekom-color-text-and-icon-primary-standard); --background-color-before-active: var(--color-primary); --font-weight-bold: var(--telekom-typography-font-weight-bold); @@ -56,7 +55,6 @@ justify-content: space-between; text-decoration: none; font-family: inherit; - /* FIXME:TOKEN previously --scl-radius-2 no equivalent */ border-radius: var(--telekom-radius-small); } diff --git a/packages/components/src/components/sidebar-nav-item/sidebar-nav-item.css b/packages/components/src/components/sidebar-nav-item/sidebar-nav-item.css index 0a284b41e2..daf11f214d 100644 --- a/packages/components/src/components/sidebar-nav-item/sidebar-nav-item.css +++ b/packages/components/src/components/sidebar-nav-item/sidebar-nav-item.css @@ -13,7 +13,6 @@ --border-bottom-color: var(--telekom-color-ui-additional-subtle); --border-left-color-third-nesting: var(--telekom-color-ui-additional-strong); --color-active: var(--telekom-color-text-and-icon-primary-pressed); - /* FIXME this variable is used sometimes for background sometimes for text */ --color-primary: var(--telekom-color-text-and-icon-primary-standard); --background-color-before-active: var(--color-primary); --font-weight-bold: var(--telekom-typography-font-weight-bold); @@ -65,7 +64,6 @@ padding-right: 1rem; padding-bottom: 1rem; padding-left: var(--spacing-indent); - /* FIXME:TOKEN previously --scl-radius-2 no equivalent / use scoped variable? */ border-radius: var(--telekom-radius-small); text-decoration: none; outline: none; diff --git a/packages/components/src/components/sidebar-nav/sidebar-nav.css b/packages/components/src/components/sidebar-nav/sidebar-nav.css index 64a47ddc6c..eab64ebbfe 100644 --- a/packages/components/src/components/sidebar-nav/sidebar-nav.css +++ b/packages/components/src/components/sidebar-nav/sidebar-nav.css @@ -22,7 +22,6 @@ var(--telekom-color-functional-focus); --color-toggle-button: var(--telekom-color-ui-additional-regular); --border-y-toggle-button: 1px solid var(--telekom-color-ui-additional-subtle); - /* FIXME:TOKEN used to be --scl-radius-2, doesn't have an equivalent */ --radius-toggle-button: var(--telekom-radius-small); } diff --git a/packages/components/src/components/slider/slider.css b/packages/components/src/components/slider/slider.css index bca9730b42..d1aba2adf9 100644 --- a/packages/components/src/components/slider/slider.css +++ b/packages/components/src/components/slider/slider.css @@ -55,8 +55,7 @@ position: absolute; border-radius: 100px; background-color: var(--background-bar); - /* FIXME:TOKEN-alpha-8 needs a z-index */ - z-index: var(--scla-z-index-10); + z-index: var(--scl-z-index-10); } .slider .slider__thumb-wrapper { @@ -136,8 +135,7 @@ .slider--disabled .slider__bar { background-color: var(--background-bar-disabled); - /* FIXME:TOKEN-alpha-8 needs a z-index */ - z-index: var(--scla-z-index-10); + z-index: var(--scl-z-index-10); } .slider--disabled .slider__track { diff --git a/packages/components/src/components/table/table.css b/packages/components/src/components/table/table.css index 98c1982248..b108c403af 100644 --- a/packages/components/src/components/table/table.css +++ b/packages/components/src/components/table/table.css @@ -11,7 +11,6 @@ scale-table { --radius: var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0; - /* FIXME (used for head background) */ --background: var(--telekom-color-ui-additional-subtle); --color: var(--telekom-color-text-and-icon-standard); --color-hover: var(--telekom-color-text-and-icon-primary-hovered); @@ -24,20 +23,16 @@ scale-table { --border-bottom-tbody-td: var(--telekom-spacing-unit-x025) solid var(--telekom-color-ui-additional-light); --background-tbody: var(--telekom-color-ui-additional-base); - - /* FIXME:TOKEN */ --background-tbody-tr-hover: var(--telekom-color-ui-additional-subtle); --background-tfoot: var(--telekom-color-ui-additional-base); --border-bottom-tfoot-td: var(--telekom-spacing-unit-x025) solid var(--telekom-color-ui-additional-extra-strong); --spacing-th-sortable: 0 var(--telekom-spacing-unit-x2) 0 0; - /* FIXME:TOKEN */ --background-th-sortable-hover: var(--telekom-color-ui-additional-subtle); --background-th-sortable-active: var(--telekom-color-ui-additional-light); --box-shadow-th-sortable-focus: inset 0 0 0 var(--telekom-spacing-unit-x05) var(--telekom-color-functional-focus); - /* FIXME:TOKEN */ --background-tr-striped: var(--telekom-color-ui-additional-subtle); --padding: var(--telekom-spacing-unit-x0) var(--telekom-spacing-unit-x2); } diff --git a/packages/components/src/components/tag/tag.css b/packages/components/src/components/tag/tag.css index f63c26b574..12aea677bf 100644 --- a/packages/components/src/components/tag/tag.css +++ b/packages/components/src/components/tag/tag.css @@ -20,11 +20,10 @@ var(--telekom-color-functional-focus); --icon-color: var(--color); - /* FIXME:TOKEN-alpha8 there is no difference between standard and hover style */ --icon-color-hover: var(--color); --background-secondary: var(--telekom-color-additional-teal-600); - --background-secondary-hover: var(--telekom-color-additional-teal-700); - --background-secondary-active: var(--telekom-color-additional-teal-900); + --background-secondary-hover: var(--telekom-color-ui-ghost-hovered); + --background-secondary-active: var(--telekom-color-ui-ghost-pressed); --background-disabled: var(--telekom-color-ui-disabled); --color-disabled: var(--telekom-color-text-and-icon-disabled); @@ -34,20 +33,16 @@ --border-button-dismissable-focus: 1px solid var(--telekom-color-ui-outlined-border-standard); --box-shadow-button-dismissable-focus: var(--box-shadow-focus); - /* FIXME:TOKEN-alpha8 couldn't find colors to match the sketch file - (hover vs active should be slightly different, - but pressed should be different than bg) */ --background-button-dismissable-hover: var( - --telekom-color-ui-additional-strong + --telekom-color-ui-ghost-hovered-inverted ); --background-button-dismissable-active: var( - --telekom-color-ui-additional-extra-strong + --telekom-color-ui-ghost-pressed-inverted ); --height-button-dismissable-small: 20px; --spacing-small: 0 var(--telekom-spacing-unit-x2); --font-size-small: var(--telekom-typography-font-size-small); - /* FIXME previously --scl-font-line-height-160 */ --line-height-small: var(--telekom-typography-line-spacing-loose); } diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css index cad0da2d13..900d6fec26 100644 --- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css +++ b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css @@ -60,8 +60,7 @@ line-height: var(--scl-font-variant-heading-6-line-height); font-weight: var(--scl-font-variant-heading-6-weight); padding: var(--telekom-spacing-unit-x2) var(--telekom-spacing-unit-x4); - /* FIXME */ - border-radius: 0.125rem; + border-radius: calc(var(--telekom-radius-small) / 2); color: var(--telekom-color-text-and-icon-standard); text-decoration: none; } diff --git a/packages/components/src/components/telekom/logo/logo.css b/packages/components/src/components/telekom/logo/logo.css index bd9627fd53..15e62322d9 100644 --- a/packages/components/src/components/telekom/logo/logo.css +++ b/packages/components/src/components/telekom/logo/logo.css @@ -21,12 +21,10 @@ } .logo--variant-magenta { - /* FIXME:TOKEN */ background-color: var(--telekom-color-background-surface); } .logo--variant-white { - /* FIXME:TOKEN */ background-color: var(--telekom-color-primary-standard); } From 524b1948c42bf83497fc8ae28eb5fb844a206ed4 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 18 Feb 2022 15:37:26 +0100 Subject: [PATCH 28/36] refactor: update table --- packages/components/src/components/table/table.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/table/table.css b/packages/components/src/components/table/table.css index b108c403af..4cdd663c15 100644 --- a/packages/components/src/components/table/table.css +++ b/packages/components/src/components/table/table.css @@ -11,7 +11,7 @@ scale-table { --radius: var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0; - --background: var(--telekom-color-ui-additional-subtle); + --background: var(--telekom-color-ui-outlined-fill-standard); --color: var(--telekom-color-text-and-icon-standard); --color-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-active: var(--telekom-color-text-and-icon-primary-pressed); @@ -22,9 +22,9 @@ scale-table { var(--telekom-spacing-unit-x2); --border-bottom-tbody-td: var(--telekom-spacing-unit-x025) solid var(--telekom-color-ui-additional-light); - --background-tbody: var(--telekom-color-ui-additional-base); - --background-tbody-tr-hover: var(--telekom-color-ui-additional-subtle); - --background-tfoot: var(--telekom-color-ui-additional-base); + --background-tbody: var(--telekom-color-ui-outlined-fill-standard); + --background-tbody-tr-hover: var(--telekom-color-ui-ghost-hovered); + --background-tfoot: var(--telekom-color-ui-outlined-fill-standard); --border-bottom-tfoot-td: var(--telekom-spacing-unit-x025) solid var(--telekom-color-ui-additional-extra-strong); @@ -55,6 +55,7 @@ scale-table { line-height: 32px; /* TODO: revise, this is weird */ color: var(--color); font-size: var(--font-size); + background: var(--telekom-color-background-surface-subtle); } .table td { padding: var(--padding); From 960e114477bcbf04d5f1d568624cf5dee5726f6e Mon Sep 17 00:00:00 2001 From: Maomao Date: Mon, 21 Feb 2022 15:20:46 +0200 Subject: [PATCH 29/36] fix: text-field, textarea, date-picker, dropdown border error color (#885) Co-authored-by: Maomao Meyer-Zhang --- .../src/components/date-picker/date-picker.css | 10 +++++----- .../components/src/components/dropdown/dropdown.css | 8 ++++---- packages/components/src/components/link/link.css | 3 ++- packages/components/src/components/tag/tag.css | 8 ++++++++ .../src/components/text-field/text-field.css | 10 +++++++++- .../components/src/components/textarea/textarea.css | 10 +++++++++- 6 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index 5f7cbb3dfa..87252117d9 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -177,15 +177,15 @@ duet-date-picker .duet-date__input:focus::placeholder { .scale-date-picker--status-error duet-date-picker .duet-date__input { border: var(--telekom-spacing-unit-x05) solid - var(--telekom-color-text-and-icon-functional-danger); + var(--telekom-color-functional-danger-standard); } .scale-date-picker--status-error duet-date-picker .duet-date__input:hover { border: var(--telekom-spacing-unit-x05) solid - var(--telekom-color-functional-danger-hovered); + var(--telekom-color-functional-danger-standard); } .scale-date-picker--status-error duet-date-picker .duet-date__input:focus { border: var(--telekom-spacing-unit-x05) solid - var(--telekom-color-functional-danger-pressed); + var(--telekom-color-functional-danger-standard); box-shadow: 0 0 0 var(--telekom-spacing-unit-x05) var(--telekom-color-functional-focus); } @@ -208,7 +208,7 @@ duet-date-picker .duet-date__input:focus::placeholder { .scale-date-picker--size-small .date-picker__label { top: 0; left: 0; - color: var(--telekom-color-text-and-icon-standard); + color: var(--telekom-color-text-and-icon-additional); display: flex; z-index: 10; position: absolute; @@ -229,7 +229,7 @@ duet-date-picker .duet-date__input:focus::placeholder { } .scale-date-picker--size-small.scale-date-picker--focus .date-picker__label, .scale-date-picker--size-small.animated .date-picker__label { - color: var(--telekom-color-text-and-icon-standard); + color: var(--telekom-color-text-and-icon-additional); transform: translate( var(--telekom-spacing-unit-x3), var(--telekom-spacing-unit-x1) diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css index 3fe7f05a44..4814102003 100644 --- a/packages/components/src/components/dropdown/dropdown.css +++ b/packages/components/src/components/dropdown/dropdown.css @@ -24,7 +24,7 @@ scale-dropdown { --border-error: var(--telekom-spacing-unit-x05) solid var(--telekom-color-functional-danger-standard); --border-color-hover: var(--telekom-color-ui-outlined-border-hovered); - --border-color-focus: var(--telekom-color-ui-outlined-border-pressed); + --border-color-focus: var(--telekom-color-ui-outlined-border-hovered); --border-color-disabled: var(--telekom-color-ui-outlined-border-disabled); --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) var(--telekom-color-functional-focus); @@ -58,7 +58,7 @@ scale-dropdown { --transition-icon: var(--transition); /*label*/ - --color-label: var(--telekom-color-text-and-icon-standard); + --color-label: var(--telekom-color-text-and-icon-additional); --z-index-label: var(--scl-z-index-10); --transition-label: var(--transition); --font-size-label: var(--telekom-typography-font-size-body); @@ -137,7 +137,7 @@ scale-dropdown { } .dropdown:not(.dropdown--disabled).dropdown--status-error .input__dropdown:hover { - border-color: red; + border-color: var(--telekom-color-functional-danger-hovered); background-color: var(--telekom-color-ui-outlined-fill-hovered); } @@ -147,7 +147,7 @@ scale-dropdown { } .dropdown:not(.dropdown--disabled).dropdown--status-error .input__dropdown:focus { - border-color: red; + border-color: var(--telekom-color-functional-danger-hovered); } .dropdown:not(.dropdown--disabled) .input__dropdown:focus { box-shadow: var(--box-shadow-focus); diff --git a/packages/components/src/components/link/link.css b/packages/components/src/components/link/link.css index c91194f0af..c55bdea45a 100644 --- a/packages/components/src/components/link/link.css +++ b/packages/components/src/components/link/link.css @@ -50,7 +50,7 @@ display: inline; margin-bottom: calc(var(--line-offset) + var(--line-thickness-initial)); --anchor-color: var(--color); - --line-color: var(--telekom-color-functional-interaction-subtle); + --line-color: var(--color); --line-thickness: var(--line-thickness-initial); } @@ -68,6 +68,7 @@ --line-thickness, var(--line-thickness-initial) ); + /*FIXME:TOKEN color decoration should have 0.75 opacity*/ text-decoration-color: var(--line-color); transition: text-decoration var(--telekom-motion-duration-transition); } diff --git a/packages/components/src/components/tag/tag.css b/packages/components/src/components/tag/tag.css index 12aea677bf..016dfaf107 100644 --- a/packages/components/src/components/tag/tag.css +++ b/packages/components/src/components/tag/tag.css @@ -21,6 +21,7 @@ --icon-color: var(--color); --icon-color-hover: var(--color); + --color-secondary: var(--telekom-color-text-and-icon-white-standard); --background-secondary: var(--telekom-color-additional-teal-600); --background-secondary-hover: var(--telekom-color-ui-ghost-hovered); --background-secondary-active: var(--telekom-color-ui-ghost-pressed); @@ -68,6 +69,7 @@ .tag--variant-secondary { background: var(--background-secondary); + color: var(--color-secondary); } .tag scale-icon-action-close { @@ -78,6 +80,11 @@ .tag:not(.tag--disabled) scale-icon-action-close:hover { color: var(--icon-color-hover); } +.tag--variant-secondary scale-icon-action-close, +.tag--variant-secondary:not(.tag--disabled) scale-icon-action-close:hover { + color: var(--color-secondary); +} + .tag--dismissable { padding-right: 0; } @@ -122,6 +129,7 @@ .tag--variant-secondary.tag--dismissable { background: var(--background-secondary); + color: var(--color-secondary); } .tag--variant-secondary.tag--disabled { diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css index e500f73b0f..094a43ac4f 100644 --- a/packages/components/src/components/text-field/text-field.css +++ b/packages/components/src/components/text-field/text-field.css @@ -18,7 +18,7 @@ scale-text-field { --border-error: var(--telekom-spacing-unit-x05) solid var(--telekom-color-functional-danger-standard); --border-color-hover: var(--telekom-color-ui-outlined-border-hovered); - --border-color-focus: var(--telekom-color-ui-outlined-border-pressed); + --border-color-focus: var(--telekom-color-ui-outlined-border-hovered); --border-color-disabled: var(--telekom-color-ui-outlined-border-disabled); --background-color-hover: var(--telekom-color-ui-outlined-fill-hovered); --background-color-disabled: var(--telekom-color-ui-outlined-fill-disabled); @@ -175,6 +175,14 @@ scale-text-field { .text-field--status-error .text-field__control { border: var(--border-error); } + +.text-field--status-error:not(.text-field--disabled):not(.text-field--readonly) + .text-field__control:hover, +.text-field--status-error:not(.text-field--disabled):not(.text-field--readonly) + .text-field__control:focus { + border-color: var(--telekom-color-functional-danger-hovered); +} + .text-field--status-error .text-field__helper-text { color: var(--color-helper-text-error); } diff --git a/packages/components/src/components/textarea/textarea.css b/packages/components/src/components/textarea/textarea.css index abaf2fdab3..d5816f6e13 100644 --- a/packages/components/src/components/textarea/textarea.css +++ b/packages/components/src/components/textarea/textarea.css @@ -18,7 +18,7 @@ scale-textarea { --border-error: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-danger-standard); --border-color-hover: var(--telekom-color-ui-outlined-border-hovered); - --border-color-focus: var(--telekom-color-ui-outlined-border-pressed); + --border-color-focus: var(--telekom-color-ui-outlined-border-hovered); --border-color-disabled: var(--telekom-color-ui-outlined-border-disabled); --background-color-hover: var(--telekom-color-ui-outlined-fill-hovered); --background-color-disabled: var(--telekom-color-ui-outlined-fill-disabled); @@ -182,6 +182,14 @@ scale-textarea { .textarea--status-error .textarea__wrapper { border: var(--border-error); } + +.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly) + .textarea__wrapper:hover, +.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus + .textarea__wrapper { + border-color: var(--telekom-color-functional-danger-hovered); +} + .textarea--status-error .textarea__helper-text { color: var(--color-helper-text-error); } From c1f77a416b3ffed9a5e68c00fdb349f67affe001 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Mon, 21 Feb 2022 14:20:58 +0100 Subject: [PATCH 30/36] Refactor/semantic tokens fix fw (#884) * fix: fix refactored slider z-index * fix: fix refactored rating star styles * fix: use correct design token for logo * fix: update secondary button border color * fix: fix checkbox styles * fix: remove commented code --- packages/components/src/components/button/button.css | 7 +++++++ packages/components/src/components/checkbox/checkbox.css | 6 +++--- .../src/components/rating-stars/rating-stars.css | 3 ++- packages/components/src/components/slider/slider.css | 2 +- packages/components/src/components/telekom/logo/logo.css | 2 +- 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/button/button.css b/packages/components/src/components/button/button.css index 06b5a2aab1..d449f214a0 100644 --- a/packages/components/src/components/button/button.css +++ b/packages/components/src/components/button/button.css @@ -53,6 +53,10 @@ --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); @@ -159,14 +163,17 @@ 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); diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css index 1f1f586b4c..8263d8ff7e 100644 --- a/packages/components/src/components/checkbox/checkbox.css +++ b/packages/components/src/components/checkbox/checkbox.css @@ -147,7 +147,7 @@ scale-checkbox.indeterminate [part='checkbox'] { scale-checkbox.checked [part='checkbox'] /* :host([indeterminate]) [part='checkbox'], */ { background: var(--telekom-color-primary-standard); - border-color: var(--telekom-color-ui-outlined-border-standard); + border-color: var(--telekom-color-primary-standard); color: var(--color-icon-checked-active); } @@ -196,7 +196,7 @@ scale-checkbox.checked [part='container']:hover [part='checkbox'], /* :host([indeterminate]) [part='container']:hover [part='checkbox'], */ scale-checkbox.indeterminate [part='container']:hover [part='checkbox'] { background: var(--telekom-color-primary-hovered); - border-color: var(--color-primary-hover); + border-color: var(--telekom-color-primary-hovered); } /* active states */ @@ -212,7 +212,7 @@ scale-checkbox.checked [part='container']:active [part='checkbox'], /* :host([indeterminate]) [part='container']:active [part='checkbox'], */ scale-checkbox.indeterminate [part='container']:active [part='checkbox'] { background: var(--telekom-color-primary-pressed); - border-color: var(--color-primary-active); + border-color: var(--telekom-color-primary-pressed); } /* error states */ diff --git a/packages/components/src/components/rating-stars/rating-stars.css b/packages/components/src/components/rating-stars/rating-stars.css index e68d81707e..46647aeb51 100644 --- a/packages/components/src/components/rating-stars/rating-stars.css +++ b/packages/components/src/components/rating-stars/rating-stars.css @@ -177,7 +177,8 @@ input[type='range']::-webkit-slider-thumb { } [part='star']:hover ~ [part='star'] [part='placeholder-star'] { - --stars-placeholder-color: var(--stars-placeholder-revert-color); + /* --stars-placeholder-color: var(--stars-placeholder-revert-color); */ + --stars-placeholder-color: var(--telekom-color-text-and-icon-standard); } } diff --git a/packages/components/src/components/slider/slider.css b/packages/components/src/components/slider/slider.css index d1aba2adf9..74bd7e3d6d 100644 --- a/packages/components/src/components/slider/slider.css +++ b/packages/components/src/components/slider/slider.css @@ -62,7 +62,7 @@ width: 32px; height: 32px; display: flex; - z-index: 1; + z-index: var(--scl-z-index-20); position: absolute; text-align: center; align-items: center; diff --git a/packages/components/src/components/telekom/logo/logo.css b/packages/components/src/components/telekom/logo/logo.css index 15e62322d9..d9bfb5bc15 100644 --- a/packages/components/src/components/telekom/logo/logo.css +++ b/packages/components/src/components/telekom/logo/logo.css @@ -21,7 +21,7 @@ } .logo--variant-magenta { - background-color: var(--telekom-color-background-surface); + background-color: var(--telekom-color-background-canvas); } .logo--variant-white { From 1b3da259e08946ac873d16546816aeb3432c1903 Mon Sep 17 00:00:00 2001 From: Daniel Beck Date: Tue, 22 Feb 2022 09:07:22 +0100 Subject: [PATCH 31/36] docs(colors): better color mode switch (#886) --- .../color-mode-switch-addon/register.js | 11 +- .../fonts/scale-fonts-storybook-usage.css | 6 +- .../public/fonts/scale-fonts-storybook.css | 4 +- .../BrandHeader.stories.mdx | 240 ++++++++++-------- .../3_components/footer/Footer.stories.mdx | 30 ++- 5 files changed, 168 insertions(+), 123 deletions(-) diff --git a/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js b/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js index fced69d92b..3c87fd3bb4 100644 --- a/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js +++ b/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js @@ -20,9 +20,14 @@ const inactiveBtnClassName = 'css-am1h1h'; const separatorClassName = 'css-14kbt3m'; function switchMode(mode) { - document.querySelector( - '#storybook-preview-iframe' - ).contentWindow.document.body.dataset.mode = mode; + try { + const previewIframe = document.querySelector('#storybook-preview-iframe'); + previewIframe.contentWindow.document.body.dataset.mode = mode; + + Array.from( + previewIframe.contentWindow.document.querySelectorAll('iframe') + ).forEach((x) => (x.contentWindow.document.body.dataset.mode = mode)); + } catch (e) {} } // utility to create new links diff --git a/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css b/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css index 7dc880d7ed..3ab53f68cd 100644 --- a/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css +++ b/packages/storybook-vue/public/fonts/scale-fonts-storybook-usage.css @@ -7,8 +7,7 @@ .addon-usage h6, .addon-usage li { font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; - /* color: var(--telekom-color-text-and-icon-standard) !important; */ - color: var(--telekom-color-text-and-icon-standard) !important; + color: black !important; } .addon-usage h1, @@ -49,8 +48,7 @@ .addon-usage a { font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; text-decoration: none !important; - /* color: var(---telekom-color-text-and-icon-link-standard) !important; */ - color: var(--telekom-color-text-and-icon-link-standard) !important; + color: #005ac4 !important; } .addon-usage p, diff --git a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css index d4e95c68cf..8c97fbf321 100644 --- a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css +++ b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css @@ -7,7 +7,7 @@ h5, h6, li { font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; - color: var(--telekom-color-text-and-icon-standard) !important; + color: black; } .sbdocs-h1, @@ -47,7 +47,7 @@ li { .sbdocs-a { font-family: 'TeleNeoWeb', 'TeleNeo', sans-serif !important; - color: var(--telekom-color-text-and-icon-link-standard) !important; + color: #005ac4 !important; } .sbdocs-p, diff --git a/packages/storybook-vue/stories/3_components/brand-header-navigation/BrandHeader.stories.mdx b/packages/storybook-vue/stories/3_components/brand-header-navigation/BrandHeader.stories.mdx index effca452ad..7dad1b5950 100644 --- a/packages/storybook-vue/stories/3_components/brand-header-navigation/BrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/3_components/brand-header-navigation/BrandHeader.stories.mdx @@ -10,9 +10,16 @@ import { iconNavigation, addonNavigation, sectorNavigation, - userNavigation + userNavigation, } from './fixtures'; import AppShell from './AppShell.vue'; +const setColorMode = () => { + try { + document.body.dataset.mode = JSON.parse( + window.localStorage.getItem('persistedColorMode') + ); + } catch (e) {} +}; - {() => ({ - components: { AppShell }, - props: AppShell.props, - template: ` + {() => ( + setColorMode(), + { + components: { AppShell }, + props: AppShell.props, + template: `
`, - })} + } + )} ```html - +
Scroll to test header behavior
@@ -169,6 +175,7 @@ import AppShell from './AppShell.vue'; ``` ## Using scale-app-shell over scale-header + Using scale-app-shell provides the page with the common region `content`, which helps you fulfill accessibility requirements. The scale-app-shell component includes both the Header and optionally the Footer component. However, there is a story demonstrating the standalone mode of the Header for special cases. ## Dropdown Navigation Beta @@ -193,28 +200,30 @@ You can find code examples where the Flyout Menu Beta component is implemented i activeSectorId: 'Personal38', }} > - {() => ({ - components: { AppShell }, - props: AppShell.props, - methods: { - handleOpen: function () { - // Deprecated - this.$refs.header.isMegaMenuVisible = true; - // Deprecated - this.$refs.navMainWithMegaMenu.isMegaMenuVisible = true; - this.$refs.header.megaMenuVisible = true; - this.$refs.navMainWithMegaMenu.megaMenuVisible = true; - }, - handleClose: function () { - // Deprecated - this.$refs.header.isMegaMenuVisible = false; - // Deprecated - this.$refs.navMainWithMegaMenu.isMegaMenuVisible = false; - this.$refs.header.megaMenuVisible = false; - this.$refs.navMainWithMegaMenu.megaMenuVisible = false; + {() => ( + setColorMode(), + { + components: { AppShell }, + props: AppShell.props, + methods: { + handleOpen: function () { + // Deprecated + this.$refs.header.isMegaMenuVisible = true; + // Deprecated + this.$refs.navMainWithMegaMenu.isMegaMenuVisible = true; + this.$refs.header.megaMenuVisible = true; + this.$refs.navMainWithMegaMenu.megaMenuVisible = true; + }, + handleClose: function () { + // Deprecated + this.$refs.header.isMegaMenuVisible = false; + // Deprecated + this.$refs.navMainWithMegaMenu.isMegaMenuVisible = false; + this.$refs.header.megaMenuVisible = false; + this.$refs.navMainWithMegaMenu.megaMenuVisible = false; + }, }, - }, - template: ` + template: `
`, - })} + } + )} @@ -276,10 +286,18 @@ You can find code examples where the Flyout Menu Beta component is implemented i