From de023279873280630be7e2e040fb1678b987b912 Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Fri, 6 Dec 2024 09:59:37 +0100 Subject: [PATCH 001/107] feature(global): dark mode --- app/.storybook/preview-head.html | 3 + app/pages/index.vue | 2 +- app/tailwind.config.js | 152 ++++++++++++ css/components/logo.postcss | 1 + .../variables/color-primitives.postcss | 138 +++++++++++ .../variables/color-tokens.postcss | 220 ++++++++++++++++++ css/main.postcss | 3 + css/sections/top-header.postcss | 8 +- 8 files changed, 525 insertions(+), 2 deletions(-) create mode 100644 css/foundations/variables/color-primitives.postcss create mode 100644 css/foundations/variables/color-tokens.postcss diff --git a/app/.storybook/preview-head.html b/app/.storybook/preview-head.html index abc475e9..ae98bfbe 100644 --- a/app/.storybook/preview-head.html +++ b/app/.storybook/preview-head.html @@ -1,2 +1,5 @@ + diff --git a/app/pages/index.vue b/app/pages/index.vue index 77bcb710..8dd40fcd 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -8,7 +8,7 @@
- + diff --git a/app/tailwind.config.js b/app/tailwind.config.js index f7157558..45219579 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -196,6 +196,158 @@ export default { white: '#ffffff', black: '#000000', transparent: 'transparent', + + // New variable based colors + action: { + 'background-cta': 'var(--action-background-cta)', + 'darkmode-hover-red': 'var(--primary-700)', + 'darkmode-main-red': 'var(--primary-600)', + disabled: 'var(--action-disabled)', + focus: 'var(--action-focus)', + 'hover-main': 'var(--action-hover-main)', + 'hover-secondary': 'var(--action-hover-secondary)', + main: 'var(--action-main)', + secondary: 'var(--action-secondary)', + }, + background: { + 'accent-01': 'var(--background-accent-01)', + 'accent-02': 'var(--background-accent-02)', + 'background-modal': 'var(--background-background-modal)', + main: 'var(--background-main)', + }, + elements: { + color: '#ffffff', + 'card-01': 'var(--elements-card-card-01)', + 'card-hover': 'var(--elements-card-hover)', + 'card-shadow': 'var(--elements-card-shadow)', + 'divider-50': 'var(--elements-divider-50)', + 'divider-100': 'var(--elements-divider-100)', + 'divider-200': 'var(--elements-divider-200)', + 'support-50': 'var(--elements-support-50)', + 'support-100': 'var(--elements-support-100)', + 'support-200': 'var(--elements-support-200)', + 'support-300': 'var(--elements-support-300)', + 'support-400': 'var(--elements-support-400)', + 'support-500': 'var(--elements-support-500)', + 'support-600': 'var(--elements-support-600)', + 'support-700': 'var(--elements-support-700)', + 'support-800': 'var(--elements-support-800)', + 'support-900': 'var(--elements-support-900)', + }, + gebaerdensprache: { + accent: 'var(--gebaerdensprache-accent)', + main: 'var(--gebaerdensprache-main)', + text: 'var(--gebaerdensprache-text)', + }, + leichtesprache: { + accent: 'var(--leichtesprache-accent)', + main: 'var(--leichtesprache-main)', + text: 'var(--leichtesprache-text)', + }, + logo: { + 'logo-red': 'var(--logo-logo-red)', + 'logo-white': 'var(--logo-logo-white)', + }, + states: { + 'error-bg': 'var(--states-error-error-bg)', + 'error-text': 'var(--states-error-error-text)', + 'information-bg': 'var(--states-information-information-bg)', + 'information-text': 'var(--states-information-information-text)', + 'neutral-bg': 'var(--states-neutral-neutral-bg)', + 'neutral-text': 'var(--states-neutral-neutral-text)', + 'success-bg': 'var(--states-success-success-bg)', + 'success-text': 'var(--states-success-success-text)', + 'warning-bg': 'var(--states-warning-warning-bg)', + 'warning-text': 'var(--states-warning-warning-text)', + }, + 'text-new': { + contrast: 'var(--text-contrast-text)', + disabled: 'var(--text-disabled-text)', + label: 'var(--text-label-text)', + main: 'var(--text-main-text)', + quote: 'var(--text-quote-text)', + selected: 'var(--text-selected-text)', + }, + 'ui-elements': { + checkbox: { + 'active-background': 'var(--ui-elements-checkbox-active-background)', + checkmark: 'var(--ui-elements-checkbox-checkmark)', + 'disabled-background': + 'var(--ui-elements-checkbox-disabled-background)', + 'disabled-stroke': 'var(--ui-elements-checkbox-disabled-stroke)', + 'disabled-text': 'var(--ui-elements-checkbox-disabled-text)', + 'inactive-background': + 'var(--ui-elements-checkbox-inactive-background)', + 'main-stroke': 'var(--ui-elements-checkbox-main-stroke)', + 'main-text': 'var(--ui-elements-checkbox-main-text)', + }, + close: { + background: 'var(--ui-elements-close-background)', + item: 'var(--ui-elements-close-item)', + }, + indicator: { + active: 'var(--ui-elements-indicator-indicator-active)', + inactive: 'var(--ui-elements-indicator-indicator-inactive)', + }, + inputfield: { + select: { + 'disabled-background': + 'var(--ui-elements-inputfield-select-background-disabled-background)', + 'main-background': + 'var(--ui-elements-inputfield-select-background-main-background)', + 'active-indicator': + 'var(--ui-elements-inputfield-select-indicator-active-indicator)', + 'disabled-indicator': + 'var(--ui-elements-inputfield-select-indicator-disabled-indicator)', + 'disabled-stroke': + 'var(--ui-elements-inputfield-select-stroke-disabled-stroke)', + 'error-stroke': + 'var(--ui-elements-inputfield-select-stroke-error-stroke)', + 'main-stroke': + 'var(--ui-elements-inputfield-select-stroke-main-stroke)', + 'disabled-text': + 'var(--ui-elements-inputfield-select-text-disabled-text)', + 'error-text': + 'var(--ui-elements-inputfield-select-text-error-text)', + 'label-text': + 'var(--ui-elements-inputfield-select-text-label-text)', + 'main-text': 'var(--ui-elements-inputfield-select-text-main-text)', + }, + }, + navigation: { + '01': 'var(--ui-elements-navigation-01)', + '02': 'var(--ui-elements-navigation-02)', + '03': 'var(--ui-elements-navigation-03)', + }, + radiobutton: { + 'active-background': + 'var(--ui-elements-radiobutton-active-background)', + checkmark: 'var(--ui-elements-radiobutton-checkmark)', + 'disabled-background': + 'var(--ui-elements-radiobutton-disabled-background)', + 'disabled-stroke': 'var(--ui-elements-radiobutton-disabled-stroke)', + 'disabled-text': 'var(--ui-elements-radiobutton-disabled-text)', + 'inactive-background': + 'var(--ui-elements-radiobutton-inactive-background)', + 'main-stroke': 'var(--ui-elements-radiobutton-main-stroke)', + 'main-text': 'var(--ui-elements-radiobutton-main-text)', + }, + tag: { + 'background-active': 'var(--ui-elements-tag-background-active)', + 'background-default': 'var(--ui-elements-tag-background-default)', + 'background-disabled-fill': + 'var(--ui-elements-tag-background-disabled-fill)', + 'background-disabled-stroke': + 'var(--ui-elements-tag-background-disabled-stroke)', + 'background-hover': 'var(--ui-elements-tag-background-hover)', + }, + toggle: { + 'active-background': 'var(--ui-elements-toggle-active-background)', + checkmark: 'var(--ui-elements-toggle-checkmark)', + 'inactive-background-2': + 'var(--ui-elements-toggle-inactive-background-2)', + }, + }, }, fontWeight: { normal: 400, diff --git a/css/components/logo.postcss b/css/components/logo.postcss index 590c82e8..cd337fe6 100644 --- a/css/components/logo.postcss +++ b/css/components/logo.postcss @@ -64,6 +64,7 @@ @apply flex-shrink-0 hidden overflow-visible xl:block; @apply w-[174px] h-[50px]; @apply 3xl:w-[244px] 3xl:h-[70px]; + @apply fill-current; } .logo__separator { diff --git a/css/foundations/variables/color-primitives.postcss b/css/foundations/variables/color-primitives.postcss new file mode 100644 index 00000000..c3112010 --- /dev/null +++ b/css/foundations/variables/color-primitives.postcss @@ -0,0 +1,138 @@ +/* Color primitives */ +:root { + --blue-100: #dbeafe; + --blue-200: #bfdbfe; + --blue-300: #93c5fd; + --blue-400: #60a5fa; + --blue-50: #eff6ff; + --blue-500: #3b82f6; + --blue-600: #2563eb; + --blue-700: #1d4ed8; + --blue-800: #1e40af; + --blue-900: #1e3a8a; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-50: #f9fafb; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-650: #1f2937c7; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-850: #111827e5; + --gray-900: #111827; + --green-100: #d1fae5; + --green-200: #a7f3d0; + --green-300: #6ee7b7; + --green-400: #34d399; + --green-50: #ecfdf5; + --green-500: #10b981; + --green-600: #059669; + --green-700: #047857; + --green-800: #065f46; + --green-900: #064e3b; + --indigo-100: #e0e7ff; + --indigo-200: #c7d2fe; + --indigo-300: #a5b4fc; + --indigo-400: #818cf8; + --indigo-50: #eef2ff; + --indigo-500: #6366f1; + --indigo-600: #4f46e5; + --indigo-700: #4338ca; + --indigo-800: #3730a3; + --indigo-900: #312e81; + --orange-100: #ffedd5; + --orange-200: #fed7aa; + --orange-300: #fdba74; + --orange-400: #fb923c; + --orange-50: #fff7ed; + --orange-500: #f97316; + --orange-600: #ea580c; + --orange-700: #c2410c; + --orange-800: #9a3412; + --orange-900: #7c2d12; + --pink-100: #fce7f3; + --pink-200: #fbcfe8; + --pink-300: #f9a8d4; + --pink-400: #f472b6; + --pink-50: #fdf2f8; + --pink-500: #ec4899; + --pink-600: #db2777; + --pink-700: #be185d; + --pink-800: #9d174d; + --pink-900: #831843; + --primary-100: #fae1e2; + --primary-200: #ffccce; + --primary-300: #fa9da1; + --primary-400: #fc656b; + --primary-50: #ffedee; + --primary-500: #e53940; + --primary-600: #d8232a; + --primary-700: #bf1e25; + --primary-800: #99191e; + --primary-900: #801519; + --purble-100: #ede9fe; + --purble-200: #ddd6fe; + --purble-300: #c4b5fd; + --purble-400: #a78bfa; + --purble-50: #f5f3ff; + --purble-500: #8655f6; + --purble-600: #7c3aed; + --purble-700: #6d28d9; + --purble-800: #5b21b6; + --purble-900: #4c1d95; + --red-100: #fae1e2; + --red-200: #ffccce; + --red-300: #fa9da1; + --red-400: #fc656b; + --red-50: #ffedee; + --red-500: #e53940; + --red-600: #d8232a; + --red-700: #bf1e25; + --red-800: #99191e; + --red-900: #801519; + --secondary-100: #e0e4e8; + --secondary-200: #adb4bc; + --secondary-300: #848e99; + --secondary-400: #5c6977; + --secondary-50: #f1f4f7; + --secondary-500: #4a5869; + --secondary-600: #334254; + --secondary-700: #293644; + --secondary-800: #1e2833; + --secondary-900: #151b21; + --standard-black: #000000; + --standard-transparency: #ffffff00; + --standard-white: #ffffff; + --teal-100: #cbfbf8; + --teal-200: #98f6f3; + --teal-300: #5de8ea; + --teal-400: #2bced4; + --teal-50: #f2fdfc; + --teal-500: #14afb8; + --teal-600: #0d8b96; + --teal-700: #0f6b75; + --teal-800: #11575f; + --teal-900: #13474e; + --text-100: #f3f4f6; + --text-200: #e5e7eb; + --text-300: #d1d5db; + --text-400: #9ca3af; + --text-50: #f9fafb; + --text-500: #6b7280; + --text-600: #4b5563; + --text-700: #374151; + --text-800: #1f2937; + --text-900: #111827; + --yellow-100: #fef3c7; + --yellow-200: #fde68a; + --yellow-300: #fcd34d; + --yellow-400: #fbbf24; + --yellow-50: #fffbeb; + --yellow-500: #f59e0b; + --yellow-600: #d97706; + --yellow-700: #b45309; + --yellow-800: #92400e; + --yellow-900: #78350f; +} diff --git a/css/foundations/variables/color-tokens.postcss b/css/foundations/variables/color-tokens.postcss new file mode 100644 index 00000000..c07e15d1 --- /dev/null +++ b/css/foundations/variables/color-tokens.postcss @@ -0,0 +1,220 @@ +html[data-theme='auto'] { + color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + html[data-theme='auto'] { + color-scheme: dark; + } +} + +html[data-theme='light'] { + color-scheme: light; +} + +html[data-theme='dark'] { + color-scheme: dark; +} + +/* Color Tokens */ +@media (prefers-color-scheme: light) { + :root { + --action-background-cta: var(--standard-white); + --action-darkmode-hover-red: var(--primary-700); + --action-darkmode-main-red: var(--primary-600); + --action-disabled: var(--secondary-200); + --action-focus: var(--purble-500); + --action-hover-main: var(--primary-700); + --action-hover-secondary: var(--secondary-500); + --action-main: var(--primary-600); + --action-secondary: var(--secondary-400); + --background-accent-01: var(--secondary-50); + --background-accent-02: var(--secondary-100); + --background-background-modal: var(--gray-650); + --background-main: var(--standard-white); + --elements-color: #ffffff; + --elements-card-card-01: var(--standard-white); + --elements-card-hover: var(--standard-white); + --elements-card-shadow: var(--secondary-300); + --elements-divider-100: var(--secondary-200); + --elements-divider-200: var(--secondary-300); + --elements-divider-50: var(--secondary-100); + --elements-support-100: var(--gray-100); + --elements-support-200: var(--gray-200); + --elements-support-300: var(--gray-300); + --elements-support-400: var(--gray-400); + --elements-support-50: var(--gray-50); + --elements-support-500: var(--gray-500); + --elements-support-600: var(--gray-600); + --elements-support-700: var(--gray-700); + --elements-support-800: var(--gray-800); + --elements-support-900: var(--gray-900); + --gebaerdensprache-accent: var(--indigo-100); + --gebaerdensprache-main: var(--indigo-800); + --gebaerdensprache-text: var(--indigo-800); + --leichtesprache-accent: var(--green-100); + --leichtesprache-main: var(--green-800); + --leichtesprache-text: var(--green-800); + --logo-logo-red: var(--red-600); + --logo-logo-white: var(--standard-white); + --states-error-error-bg: var(--red-50); + --states-error-error-text: var(--primary-600); + --states-information-information-bg: var(--gray-100); + --states-information-information-text: var(--blue-700); + --states-neutral-neutral-bg: var(--gray-100); + --states-neutral-neutral-text: var(--gray-700); + --states-success-success-bg: var(--green-50); + --states-success-success-text: var(--green-700); + --states-warning-warning-bg: var(--orange-50); + --states-warning-warning-text: var(--orange-800); + --text-contrast-text: var(--standard-white); + --text-disabled-text: var(--text-300); + --text-label-text: var(--text-500); + --text-main-text: var(--text-800); + --text-quote-text: var(--secondary-500); + --text-selected-text: var(--blue-100); + --ui-elements-checkbox-active-background: var(--text-700); + --ui-elements-checkbox-checkmark: var(--standard-white); + --ui-elements-checkbox-disabled-background: var(--text-100); + --ui-elements-checkbox-disabled-stroke: var(--text-300); + --ui-elements-checkbox-disabled-text: var(--text-400); + --ui-elements-checkbox-inactive-background: var(--standard-white); + --ui-elements-checkbox-main-stroke: var(--text-500); + --ui-elements-checkbox-main-text: var(--text-800); + --ui-elements-close-background: var(--red-100); + --ui-elements-close-item: var(--red-600); + --ui-elements-indicator-indicator-active: var(--secondary-500); + --ui-elements-indicator-indicator-inactive: var(--secondary-100); + --ui-elements-inputfield-select-background-disabled-background: var(--text-50); + --ui-elements-inputfield-select-background-main-background: var(--standard-white); + --ui-elements-inputfield-select-indicator-active-indicator: var(--gray-500); + --ui-elements-inputfield-select-indicator-disabled-indicator: var(--gray-300); + --ui-elements-inputfield-select-stroke-disabled-stroke: var(--gray-300); + --ui-elements-inputfield-select-stroke-error-stroke: var(--red-600); + --ui-elements-inputfield-select-stroke-main-stroke: var(--gray-500); + --ui-elements-inputfield-select-text-disabled-text: var(--text-400); + --ui-elements-inputfield-select-text-error-text: var(--red-600); + --ui-elements-inputfield-select-text-label-text: var(--text-500); + --ui-elements-inputfield-select-text-main-text: var(--text-800); + --ui-elements-navigation-01: var(--standard-white); + --ui-elements-navigation-02: var(--secondary-50); + --ui-elements-navigation-03: var(--secondary-100); + --ui-elements-radiobutton-active-background: var(--text-700); + --ui-elements-radiobutton-checkmark: var(--standard-white); + --ui-elements-radiobutton-disabled-background: var(--text-100); + --ui-elements-radiobutton-disabled-stroke: var(--text-300); + --ui-elements-radiobutton-disabled-text: var(--text-400); + --ui-elements-radiobutton-inactive-background: var(--standard-white); + --ui-elements-radiobutton-main-stroke: var(--text-500); + --ui-elements-radiobutton-main-text: var(--text-800); + --ui-elements-tag-background-active: var(--gray-800); + --ui-elements-tag-background-default: var(--secondary-100); + --ui-elements-tag-background-disabled-fill: var(--secondary-50); + --ui-elements-tag-background-disabled-stroke: var(--secondary-100); + --ui-elements-tag-background-hover: var(--secondary-200); + --ui-elements-toggle-active-background: var(--secondary-700); + --ui-elements-toggle-checkmark: var(--standard-white); + --ui-elements-toggle-inactive-background-2: var(--text-300); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --action-background-cta: var(--secondary-600); + --action-darkmode-hover-red: var(--primary-500); + --action-darkmode-main-red: var(--primary-400); + --action-disabled: var(--secondary-300); + --action-focus: var(--purble-500); + --action-hover-main: var(--secondary-100); + --action-hover-secondary: var(--secondary-100); + --action-main: var(--standard-white); + --action-secondary: var(--secondary-100); + --background-accent-01: var(--secondary-900); + --background-accent-02: var(--secondary-800); + --background-background-modal: var(--gray-850); + --background-main: var(--secondary-800); + --elements-color: #ffffff; + --elements-card-card-01: var(--secondary-700); + --elements-card-hover: var(--secondary-600); + --elements-card-shadow: var(--secondary-500); + --elements-divider-100: var(--secondary-400); + --elements-divider-200: var(--secondary-300); + --elements-divider-50: var(--secondary-300); + --elements-support-100: var(--gray-100); + --elements-support-200: var(--gray-200); + --elements-support-300: var(--gray-300); + --elements-support-400: var(--gray-400); + --elements-support-50: var(--gray-50); + --elements-support-500: var(--gray-500); + --elements-support-600: var(--gray-600); + --elements-support-700: var(--gray-700); + --elements-support-800: var(--gray-800); + --elements-support-900: var(--gray-900); + --gebaerdensprache-accent: var(--indigo-500); + --gebaerdensprache-main: var(--indigo-500); + --gebaerdensprache-text: var(--standard-white); + --leichtesprache-accent: var(--green-600); + --leichtesprache-main: var(--green-600); + --leichtesprache-text: var(--standard-white); + --logo-logo-red: var(--red-600); + --logo-logo-white: var(--standard-white); + --states-error-error-bg: var(--red-100); + --states-error-error-text: var(--primary-600); + --states-information-information-bg: var(--gray-100); + --states-information-information-text: var(--blue-700); + --states-neutral-neutral-bg: var(--secondary-300); + --states-neutral-neutral-text: var(--standard-white); + --states-success-success-bg: var(--green-50); + --states-success-success-text: var(--green-700); + --states-warning-warning-bg: #fff7ed; + --states-warning-warning-text: var(--orange-800); + --text-contrast-text: var(--elements-support-800); + --text-disabled-text: var(--text-300); + --text-label-text: var(--secondary-100); + --text-main-text: var(--standard-white); + --text-quote-text: var(--standard-white); + --text-selected-text: var(--blue-800); + --ui-elements-checkbox-active-background: var(--text-700); + --ui-elements-checkbox-checkmark: var(--standard-white); + --ui-elements-checkbox-disabled-background: var(--secondary-300); + --ui-elements-checkbox-disabled-stroke: var(--text-400); + --ui-elements-checkbox-disabled-text: var(--secondary-300); + --ui-elements-checkbox-inactive-background: var(--secondary-400); + --ui-elements-checkbox-main-stroke: var(--standard-white); + --ui-elements-checkbox-main-text: var(--standard-white); + --ui-elements-close-background: var(--secondary-600); + --ui-elements-close-item: var(--red-400); + --ui-elements-indicator-indicator-active: var(--standard-white); + --ui-elements-indicator-indicator-inactive: var(--secondary-500); + --ui-elements-inputfield-select-background-disabled-background: var(--secondary-700); + --ui-elements-inputfield-select-background-main-background: var(--secondary-500); + --ui-elements-inputfield-select-indicator-active-indicator: var(--text-300); + --ui-elements-inputfield-select-indicator-disabled-indicator: var(--gray-400); + --ui-elements-inputfield-select-stroke-disabled-stroke: var(--standard-transparency); + --ui-elements-inputfield-select-stroke-error-stroke: var(--red-300); + --ui-elements-inputfield-select-stroke-main-stroke: var(--standard-transparency); + --ui-elements-inputfield-select-text-disabled-text: var(--secondary-300); + --ui-elements-inputfield-select-text-error-text: var(--red-300); + --ui-elements-inputfield-select-text-label-text: var(--standard-white); + --ui-elements-inputfield-select-text-main-text: var(--standard-white); + --ui-elements-navigation-01: var(--secondary-800); + --ui-elements-navigation-02: var(--secondary-700); + --ui-elements-navigation-03: var(--secondary-900); + --ui-elements-radiobutton-active-background: var(--text-700); + --ui-elements-radiobutton-checkmark: var(--standard-white); + --ui-elements-radiobutton-disabled-background: var(--secondary-300); + --ui-elements-radiobutton-disabled-stroke: var(--text-400); + --ui-elements-radiobutton-disabled-text: var(--secondary-300); + --ui-elements-radiobutton-inactive-background: var(--secondary-400); + --ui-elements-radiobutton-main-stroke: var(--standard-white); + --ui-elements-radiobutton-main-text: var(--standard-white); + --ui-elements-tag-background-active: var(--standard-white); + --ui-elements-tag-background-default: var(--secondary-600); + --ui-elements-tag-background-disabled-fill: var(--secondary-900); + --ui-elements-tag-background-disabled-stroke: var(--secondary-800); + --ui-elements-tag-background-hover: var(--secondary-400); + --ui-elements-toggle-active-background: var(--secondary-700); + --ui-elements-toggle-checkmark: var(--standard-white); + --ui-elements-toggle-inactive-background-2: var(--text-300); + } +} diff --git a/css/main.postcss b/css/main.postcss index af6ba17d..9b89fc13 100644 --- a/css/main.postcss +++ b/css/main.postcss @@ -1,6 +1,9 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; +@import './foundations/variables/color-primitives.postcss'; +@import './foundations/variables/color-tokens.postcss'; + @import './skins/default.postcss'; @import './skins/intranet.postcss'; @import './skins/freebrand.postcss'; diff --git a/css/sections/top-header.postcss b/css/sections/top-header.postcss index 0f1a247e..dbae9b0a 100644 --- a/css/sections/top-header.postcss +++ b/css/sections/top-header.postcss @@ -4,10 +4,16 @@ .top-header { @apply py-3 md:py-4 lg:py-6 xl:py-8 3xl:py-10; - @apply bg-white; @apply text-sm 3xl:text-base; @apply border-b; @apply relative; + @apply bg-background-main text-ui-elements-inputfield-select-main-text; +} + +.top-header[data-theme='dark'] { + .top-header { + @apply bg-black text-white; + } } .top-header__mobile-title { From 3c0248ee566d81971b64086df21ff9bea2100ef6 Mon Sep 17 00:00:00 2001 From: gebelj Date: Fri, 6 Dec 2024 11:40:31 +0100 Subject: [PATCH 002/107] Add darkmode select and functionality (only for topHeader atm) --- .../ch/sections/FooterNavigation.vue | 38 ++- app/pages/index.vue | 2 +- css/components/input.postcss | 4 +- css/components/select.postcss | 8 +- .../variables/color-tokens.postcss | 313 ++++++------------ css/sections/footer.postcss | 13 +- 6 files changed, 160 insertions(+), 218 deletions(-) diff --git a/app/components/ch/sections/FooterNavigation.vue b/app/components/ch/sections/FooterNavigation.vue index 96feb6de..7bf07e35 100644 --- a/app/components/ch/sections/FooterNavigation.vue +++ b/app/components/ch/sections/FooterNavigation.vue @@ -3,12 +3,44 @@ + + diff --git a/app/pages/index.vue b/app/pages/index.vue index 8dd40fcd..77bcb710 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -8,7 +8,7 @@
- + diff --git a/css/components/input.postcss b/css/components/input.postcss index f5c1b671..f60e3f0d 100644 --- a/css/components/input.postcss +++ b/css/components/input.postcss @@ -19,7 +19,7 @@ select { } .input--sm { - @apply text--sm leading-5; + @apply text--sm leading-7; } .input--lg { @@ -27,7 +27,7 @@ select { } .input--base { - @apply leading-6 text--base; + @apply leading-7 text--base; } .input--outline { diff --git a/css/components/select.postcss b/css/components/select.postcss index 2f30aba4..e09c1fdb 100644 --- a/css/components/select.postcss +++ b/css/components/select.postcss @@ -4,6 +4,10 @@ & select { @apply pr-20 box-border appearance-none; } + + .input--negative { + @apply border-secondary-500; + } } .select--bare { @@ -47,8 +51,8 @@ select:disabled, .input--negative + & { @apply text-white; - @apply border-secondary-300; - @apply bg-secondary-500; + @apply border-secondary-500; + @apply bg-secondary-600; & svg { @apply fill-current; diff --git a/css/foundations/variables/color-tokens.postcss b/css/foundations/variables/color-tokens.postcss index c07e15d1..3db0210a 100644 --- a/css/foundations/variables/color-tokens.postcss +++ b/css/foundations/variables/color-tokens.postcss @@ -1,220 +1,115 @@ -html[data-theme='auto'] { - color-scheme: dark; -} - -@media (prefers-color-scheme: dark) { - html[data-theme='auto'] { +*[data-theme='auto'] { + @media (prefers-color-scheme: dark) { color-scheme: dark; } + @media (prefers-color-scheme: light) { + color-scheme: light; + } } -html[data-theme='light'] { +*[data-theme='light'] { color-scheme: light; } -html[data-theme='dark'] { +*[data-theme='dark'] { color-scheme: dark; } -/* Color Tokens */ -@media (prefers-color-scheme: light) { - :root { - --action-background-cta: var(--standard-white); - --action-darkmode-hover-red: var(--primary-700); - --action-darkmode-main-red: var(--primary-600); - --action-disabled: var(--secondary-200); - --action-focus: var(--purble-500); - --action-hover-main: var(--primary-700); - --action-hover-secondary: var(--secondary-500); - --action-main: var(--primary-600); - --action-secondary: var(--secondary-400); - --background-accent-01: var(--secondary-50); - --background-accent-02: var(--secondary-100); - --background-background-modal: var(--gray-650); - --background-main: var(--standard-white); - --elements-color: #ffffff; - --elements-card-card-01: var(--standard-white); - --elements-card-hover: var(--standard-white); - --elements-card-shadow: var(--secondary-300); - --elements-divider-100: var(--secondary-200); - --elements-divider-200: var(--secondary-300); - --elements-divider-50: var(--secondary-100); - --elements-support-100: var(--gray-100); - --elements-support-200: var(--gray-200); - --elements-support-300: var(--gray-300); - --elements-support-400: var(--gray-400); - --elements-support-50: var(--gray-50); - --elements-support-500: var(--gray-500); - --elements-support-600: var(--gray-600); - --elements-support-700: var(--gray-700); - --elements-support-800: var(--gray-800); - --elements-support-900: var(--gray-900); - --gebaerdensprache-accent: var(--indigo-100); - --gebaerdensprache-main: var(--indigo-800); - --gebaerdensprache-text: var(--indigo-800); - --leichtesprache-accent: var(--green-100); - --leichtesprache-main: var(--green-800); - --leichtesprache-text: var(--green-800); - --logo-logo-red: var(--red-600); - --logo-logo-white: var(--standard-white); - --states-error-error-bg: var(--red-50); - --states-error-error-text: var(--primary-600); - --states-information-information-bg: var(--gray-100); - --states-information-information-text: var(--blue-700); - --states-neutral-neutral-bg: var(--gray-100); - --states-neutral-neutral-text: var(--gray-700); - --states-success-success-bg: var(--green-50); - --states-success-success-text: var(--green-700); - --states-warning-warning-bg: var(--orange-50); - --states-warning-warning-text: var(--orange-800); - --text-contrast-text: var(--standard-white); - --text-disabled-text: var(--text-300); - --text-label-text: var(--text-500); - --text-main-text: var(--text-800); - --text-quote-text: var(--secondary-500); - --text-selected-text: var(--blue-100); - --ui-elements-checkbox-active-background: var(--text-700); - --ui-elements-checkbox-checkmark: var(--standard-white); - --ui-elements-checkbox-disabled-background: var(--text-100); - --ui-elements-checkbox-disabled-stroke: var(--text-300); - --ui-elements-checkbox-disabled-text: var(--text-400); - --ui-elements-checkbox-inactive-background: var(--standard-white); - --ui-elements-checkbox-main-stroke: var(--text-500); - --ui-elements-checkbox-main-text: var(--text-800); - --ui-elements-close-background: var(--red-100); - --ui-elements-close-item: var(--red-600); - --ui-elements-indicator-indicator-active: var(--secondary-500); - --ui-elements-indicator-indicator-inactive: var(--secondary-100); - --ui-elements-inputfield-select-background-disabled-background: var(--text-50); - --ui-elements-inputfield-select-background-main-background: var(--standard-white); - --ui-elements-inputfield-select-indicator-active-indicator: var(--gray-500); - --ui-elements-inputfield-select-indicator-disabled-indicator: var(--gray-300); - --ui-elements-inputfield-select-stroke-disabled-stroke: var(--gray-300); - --ui-elements-inputfield-select-stroke-error-stroke: var(--red-600); - --ui-elements-inputfield-select-stroke-main-stroke: var(--gray-500); - --ui-elements-inputfield-select-text-disabled-text: var(--text-400); - --ui-elements-inputfield-select-text-error-text: var(--red-600); - --ui-elements-inputfield-select-text-label-text: var(--text-500); - --ui-elements-inputfield-select-text-main-text: var(--text-800); - --ui-elements-navigation-01: var(--standard-white); - --ui-elements-navigation-02: var(--secondary-50); - --ui-elements-navigation-03: var(--secondary-100); - --ui-elements-radiobutton-active-background: var(--text-700); - --ui-elements-radiobutton-checkmark: var(--standard-white); - --ui-elements-radiobutton-disabled-background: var(--text-100); - --ui-elements-radiobutton-disabled-stroke: var(--text-300); - --ui-elements-radiobutton-disabled-text: var(--text-400); - --ui-elements-radiobutton-inactive-background: var(--standard-white); - --ui-elements-radiobutton-main-stroke: var(--text-500); - --ui-elements-radiobutton-main-text: var(--text-800); - --ui-elements-tag-background-active: var(--gray-800); - --ui-elements-tag-background-default: var(--secondary-100); - --ui-elements-tag-background-disabled-fill: var(--secondary-50); - --ui-elements-tag-background-disabled-stroke: var(--secondary-100); - --ui-elements-tag-background-hover: var(--secondary-200); - --ui-elements-toggle-active-background: var(--secondary-700); - --ui-elements-toggle-checkmark: var(--standard-white); - --ui-elements-toggle-inactive-background-2: var(--text-300); - } -} - -@media (prefers-color-scheme: dark) { - :root { - --action-background-cta: var(--secondary-600); - --action-darkmode-hover-red: var(--primary-500); - --action-darkmode-main-red: var(--primary-400); - --action-disabled: var(--secondary-300); - --action-focus: var(--purble-500); - --action-hover-main: var(--secondary-100); - --action-hover-secondary: var(--secondary-100); - --action-main: var(--standard-white); - --action-secondary: var(--secondary-100); - --background-accent-01: var(--secondary-900); - --background-accent-02: var(--secondary-800); - --background-background-modal: var(--gray-850); - --background-main: var(--secondary-800); - --elements-color: #ffffff; - --elements-card-card-01: var(--secondary-700); - --elements-card-hover: var(--secondary-600); - --elements-card-shadow: var(--secondary-500); - --elements-divider-100: var(--secondary-400); - --elements-divider-200: var(--secondary-300); - --elements-divider-50: var(--secondary-300); - --elements-support-100: var(--gray-100); - --elements-support-200: var(--gray-200); - --elements-support-300: var(--gray-300); - --elements-support-400: var(--gray-400); - --elements-support-50: var(--gray-50); - --elements-support-500: var(--gray-500); - --elements-support-600: var(--gray-600); - --elements-support-700: var(--gray-700); - --elements-support-800: var(--gray-800); - --elements-support-900: var(--gray-900); - --gebaerdensprache-accent: var(--indigo-500); - --gebaerdensprache-main: var(--indigo-500); - --gebaerdensprache-text: var(--standard-white); - --leichtesprache-accent: var(--green-600); - --leichtesprache-main: var(--green-600); - --leichtesprache-text: var(--standard-white); - --logo-logo-red: var(--red-600); - --logo-logo-white: var(--standard-white); - --states-error-error-bg: var(--red-100); - --states-error-error-text: var(--primary-600); - --states-information-information-bg: var(--gray-100); - --states-information-information-text: var(--blue-700); - --states-neutral-neutral-bg: var(--secondary-300); - --states-neutral-neutral-text: var(--standard-white); - --states-success-success-bg: var(--green-50); - --states-success-success-text: var(--green-700); - --states-warning-warning-bg: #fff7ed; - --states-warning-warning-text: var(--orange-800); - --text-contrast-text: var(--elements-support-800); - --text-disabled-text: var(--text-300); - --text-label-text: var(--secondary-100); - --text-main-text: var(--standard-white); - --text-quote-text: var(--standard-white); - --text-selected-text: var(--blue-800); - --ui-elements-checkbox-active-background: var(--text-700); - --ui-elements-checkbox-checkmark: var(--standard-white); - --ui-elements-checkbox-disabled-background: var(--secondary-300); - --ui-elements-checkbox-disabled-stroke: var(--text-400); - --ui-elements-checkbox-disabled-text: var(--secondary-300); - --ui-elements-checkbox-inactive-background: var(--secondary-400); - --ui-elements-checkbox-main-stroke: var(--standard-white); - --ui-elements-checkbox-main-text: var(--standard-white); - --ui-elements-close-background: var(--secondary-600); - --ui-elements-close-item: var(--red-400); - --ui-elements-indicator-indicator-active: var(--standard-white); - --ui-elements-indicator-indicator-inactive: var(--secondary-500); - --ui-elements-inputfield-select-background-disabled-background: var(--secondary-700); - --ui-elements-inputfield-select-background-main-background: var(--secondary-500); - --ui-elements-inputfield-select-indicator-active-indicator: var(--text-300); - --ui-elements-inputfield-select-indicator-disabled-indicator: var(--gray-400); - --ui-elements-inputfield-select-stroke-disabled-stroke: var(--standard-transparency); - --ui-elements-inputfield-select-stroke-error-stroke: var(--red-300); - --ui-elements-inputfield-select-stroke-main-stroke: var(--standard-transparency); - --ui-elements-inputfield-select-text-disabled-text: var(--secondary-300); - --ui-elements-inputfield-select-text-error-text: var(--red-300); - --ui-elements-inputfield-select-text-label-text: var(--standard-white); - --ui-elements-inputfield-select-text-main-text: var(--standard-white); - --ui-elements-navigation-01: var(--secondary-800); - --ui-elements-navigation-02: var(--secondary-700); - --ui-elements-navigation-03: var(--secondary-900); - --ui-elements-radiobutton-active-background: var(--text-700); - --ui-elements-radiobutton-checkmark: var(--standard-white); - --ui-elements-radiobutton-disabled-background: var(--secondary-300); - --ui-elements-radiobutton-disabled-stroke: var(--text-400); - --ui-elements-radiobutton-disabled-text: var(--secondary-300); - --ui-elements-radiobutton-inactive-background: var(--secondary-400); - --ui-elements-radiobutton-main-stroke: var(--standard-white); - --ui-elements-radiobutton-main-text: var(--standard-white); - --ui-elements-tag-background-active: var(--standard-white); - --ui-elements-tag-background-default: var(--secondary-600); - --ui-elements-tag-background-disabled-fill: var(--secondary-900); - --ui-elements-tag-background-disabled-stroke: var(--secondary-800); - --ui-elements-tag-background-hover: var(--secondary-400); - --ui-elements-toggle-active-background: var(--secondary-700); - --ui-elements-toggle-checkmark: var(--standard-white); - --ui-elements-toggle-inactive-background-2: var(--text-300); - } +:root { + --action-background-cta: light-dark(var(--standard-white), var(--secondary-600)); + --action-darkmode-hover-red: light-dark(var(--primary-700), var(--primary-500)); + --action-darkmode-main-red: light-dark(var(--primary-600), var(--primary-400)); + --action-disabled: light-dark(var(--secondary-200), var(--secondary-300)); + --action-focus: light-dark(var(--purble-500), var(--purble-500)); + --action-hover-main: light-dark(var(--primary-700), var(--secondary-100)); + --action-hover-secondary: light-dark(var(--secondary-500), var(--secondary-100)); + --action-main: light-dark(var(--primary-600), var(--standard-white)); + --action-secondary: light-dark(var(--secondary-400), var(--secondary-100)); + --background-accent-01: light-dark(var(--secondary-50), var(--secondary-900)); + --background-accent-02: light-dark(var(--secondary-100), var(--secondary-800)); + --background-background-modal: light-dark(var(--gray-650), var(--gray-850)); + --background-main: light-dark(var(--standard-white), var(--secondary-800)); + --elements-color: light-dark(#ffffff, #ffffff); + --elements-card-card-01: light-dark(var(--standard-white), var(--secondary-700)); + --elements-card-hover: light-dark(var(--standard-white), var(--secondary-600)); + --elements-card-shadow: light-dark(var(--secondary-300), var(--secondary-500)); + --elements-divider-100: light-dark(var(--secondary-200), var(--secondary-400)); + --elements-divider-200: light-dark(var(--secondary-300), var(--secondary-300)); + --elements-divider-50: light-dark(var(--secondary-100), var(--secondary-300)); + --elements-support-100: light-dark(var(--gray-100), var(--gray-100)); + --elements-support-200: light-dark(var(--gray-200), var(--gray-200)); + --elements-support-300: light-dark(var(--gray-300), var(--gray-300)); + --elements-support-400: light-dark(var(--gray-400), var(--gray-400)); + --elements-support-50: light-dark(var(--gray-50), var(--gray-50)); + --elements-support-500: light-dark(var(--gray-500), var(--gray-500)); + --elements-support-600: light-dark(var(--gray-600), var(--gray-600)); + --elements-support-700: light-dark(var(--gray-700), var(--gray-700)); + --elements-support-800: light-dark(var(--gray-800), var(--gray-800)); + --elements-support-900: light-dark(var(--gray-900), var(--gray-900)); + --gebaerdensprache-accent: light-dark(var(--indigo-100), var(--indigo-500)); + --gebaerdensprache-main: light-dark(var(--indigo-800), var(--indigo-500)); + --gebaerdensprache-text: light-dark(var(--indigo-800), var(--standard-white)); + --leichtesprache-accent: light-dark(var(--green-100), var(--green-600)); + --leichtesprache-main: light-dark(var(--green-800), var(--green-600)); + --leichtesprache-text: light-dark(var(--green-800), var(--standard-white)); + --logo-logo-red: light-dark(var(--red-600), var(--red-600)); + --logo-logo-white: light-dark(var(--standard-white), var(--standard-white)); + --states-error-error-bg: light-dark(var(--red-50), var(--red-100)); + --states-error-error-text: light-dark(var(--primary-600), var(--primary-600)); + --states-information-information-bg: light-dark(var(--gray-100), var(--gray-100)); + --states-information-information-text: light-dark(var(--blue-700), var(--blue-700)); + --states-neutral-neutral-bg: light-dark(var(--gray-100), var(--secondary-300)); + --states-neutral-neutral-text: light-dark(var(--gray-700), var(--standard-white)); + --states-success-success-bg: light-dark(var(--green-50), var(--green-50)); + --states-success-success-text: light-dark(var(--green-700), var(--green-700)); + --states-warning-warning-bg: light-dark(var(--orange-50), #fff7ed); + --states-warning-warning-text: light-dark(var(--orange-800), var(--orange-800)); + --text-contrast-text: light-dark(var(--standard-white), var(--elements-support-800)); + --text-disabled-text: light-dark(var(--text-300), var(--text-300)); + --text-label-text: light-dark(var(--text-500), var(--secondary-100)); + --text-main-text: light-dark(var(--text-800), var(--standard-white)); + --text-quote-text: light-dark(var(--secondary-500), var(--standard-white)); + --text-selected-text: light-dark(var(--blue-100), var(--blue-800)); + --ui-elements-checkbox-active-background: light-dark(var(--text-700), var(--text-700)); + --ui-elements-checkbox-checkmark: light-dark(var(--standard-white), var(--standard-white)); + --ui-elements-checkbox-disabled-background: light-dark(var(--text-100), var(--secondary-300)); + --ui-elements-checkbox-disabled-stroke: light-dark(var(--text-300), var(--text-400)); + --ui-elements-checkbox-disabled-text: light-dark(var(--text-400), var(--secondary-300)); + --ui-elements-checkbox-inactive-background: light-dark(var(--standard-white), var(--secondary-400)); + --ui-elements-checkbox-main-stroke: light-dark(var(--text-500), var(--standard-white)); + --ui-elements-checkbox-main-text: light-dark(var(--text-800), var(--standard-white)); + --ui-elements-close-background: light-dark(var(--red-100), var(--secondary-600)); + --ui-elements-close-item: light-dark(var(--red-600), var(--red-400)); + --ui-elements-indicator-indicator-active: light-dark(var(--secondary-500), var(--standard-white)); + --ui-elements-indicator-indicator-inactive: light-dark(var(--secondary-100), var(--secondary-500)); + --ui-elements-inputfield-select-background-disabled-background: light-dark(var(--text-50), var(--secondary-700)); + --ui-elements-inputfield-select-background-main-background: light-dark(var(--standard-white), var(--secondary-500)); + --ui-elements-inputfield-select-indicator-active-indicator: light-dark(var(--gray-500), var(--text-300)); + --ui-elements-inputfield-select-indicator-disabled-indicator: light-dark(var(--gray-300), var(--gray-400)); + --ui-elements-inputfield-select-stroke-disabled-stroke: light-dark(var(--gray-300), var(--standard-transparency)); + --ui-elements-inputfield-select-stroke-error-stroke: light-dark(var(--red-600), var(--red-300)); + --ui-elements-inputfield-select-stroke-main-stroke: light-dark(var(--gray-500), var(--standard-transparency)); + --ui-elements-inputfield-select-text-disabled-text: light-dark(var(--text-400), var(--secondary-300)); + --ui-elements-inputfield-select-text-error-text: light-dark(var(--red-600), var(--red-300)); + --ui-elements-inputfield-select-text-label-text: light-dark(var(--text-500), var(--standard-white)); + --ui-elements-inputfield-select-text-main-text: light-dark(var(--text-800), var(--standard-white)); + --ui-elements-navigation-01: light-dark(var(--standard-white), var(--secondary-800)); + --ui-elements-navigation-02: light-dark(var(--secondary-50), var(--secondary-700)); + --ui-elements-navigation-03: light-dark(var(--secondary-100), var(--secondary-900)); + --ui-elements-radiobutton-active-background: light-dark(var(--text-700), var(--text-700)); + --ui-elements-radiobutton-checkmark: light-dark(var(--standard-white), var(--standard-white)); + --ui-elements-radiobutton-disabled-background: light-dark(var(--text-100), var(--text-100)); + --ui-elements-radiobutton-disabled-stroke: light-dark(var(--text-300), var(--text-300)); + --ui-elements-radiobutton-disabled-text: light-dark(var(--text-400), var(--text-400)); + --ui-elements-radiobutton-inactive-background: light-dark(var(--standard-white), var(--secondary-400)); + --ui-elements-radiobutton-main-stroke: light-dark(var(--text-500), var(--standard-white)); + --ui-elements-radiobutton-main-text: light-dark(var(--text-800), var(--standard-white)); + --ui-elements-tag-background-active: light-dark(var(--gray-800), var(--standard-white)); + --ui-elements-tag-background-default: light-dark(var(--secondary-100), var(--secondary-600)); + --ui-elements-tag-background-disabled-fill: light-dark(var(--secondary-50), var(--secondary-900)); + --ui-elements-tag-background-disabled-stroke: light-dark(var(--secondary-100), var(--secondary-800)); + --ui-elements-tag-background-hover: light-dark(var(--secondary-200), var(--secondary-400)); + --ui-elements-toggle-active-background: light-dark(var(--secondary-700), var(--secondary-700)); + --ui-elements-toggle-checkmark: light-dark(var(--standard-white), var(--standard-white)); + --ui-elements-toggle-inactive-background-2: light-dark(var(--text-300), var(--text-300)); } diff --git a/css/sections/footer.postcss b/css/sections/footer.postcss index 519f4510..a764ddd3 100644 --- a/css/sections/footer.postcss +++ b/css/sections/footer.postcss @@ -10,12 +10,23 @@ } .footer-navigation { - @apply flex; + @apply flex flex-row justify-between; + @apply w-full; @apply py-3; @apply space-x-2 sm:space-x-4; + @apply inline-flex items-center; +} + +.footer-navigation-left { + @apply flex flex-row; + @apply space-x-2 sm:space-x-4; @apply text--xs; } +.footer-navigation-right { + @apply w-64; +} + .footer__link { @apply inline-flex items-center; @apply py-2; From d64f52a15a085a3bc6a39a759f3c64453da413e2 Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Thu, 12 Dec 2024 08:31:01 +0100 Subject: [PATCH 003/107] updated variables --- app/tailwind.config.js | 242 +++++++++--------- css/foundations/global.postcss | 18 ++ .../variables/color-primitives.postcss | 117 +++++---- .../variables/color-tokens.postcss | 26 +- 4 files changed, 213 insertions(+), 190 deletions(-) diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 45219579..28ce5835 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -37,6 +37,16 @@ export default { colors: { current: 'currentColor', inherit: 'inherit', + + // Legacy + white: '#ffffff', + black: '#000000', + transparent: 'transparent', + + // New color primitives + 'standard-black': 'var(--standard-black)', + 'standard-transparent': 'var(--standard-transparent)', + 'standard-white': 'var(--standard-white)', primary: { 50: 'var(--color-primary-50)', 100: 'var(--color-primary-100)', @@ -62,144 +72,142 @@ export default { 900: 'var(--color-secondary-900)', }, text: { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 400: '#9ca3af', - 500: '#6b7280', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', + 50: 'var(--text-50)', + 100: 'var(--text-100)', + 200: 'var(--text-200)', + 300: 'var(--text-300)', + 400: 'var(--text-400)', + 500: 'var(--text-500)', + 600: 'var(--text-600)', + 700: 'var(--text-700)', + 800: 'var(--text-800)', + 900: '#111827', // 'var(--text-900)', }, blue: { - 50: '#eff6ff', - 100: '#dbeafe', - 200: '#bfdbfe', - 300: '#93c5fd', - 400: '#60a5fa', - 500: '#3b82f6', - 600: '#2563eb', - 700: '#1d4ed8', - 800: '#1e40af', - 900: '#1e3a8a', + 50: 'var(--blue-50)', + 100: 'var(--blue-100)', + 200: 'var(--blue-200)', + 300: 'var(--blue-300)', + 400: 'var(--blue-400)', + 500: 'var(--blue-500)', + 600: 'var(--blue-600)', + 700: 'var(--blue-700)', + 800: 'var(--blue-800)', + 900: 'var(--blue-900)', + }, + gray: { + 50: 'var(--gray-50)', + 100: 'var(--gray-100)', + 200: 'var(--gray-200)', + 300: 'var(--gray-300)', + 400: 'var(--gray-400)', + 500: 'var(--gray-500)', + 600: 'var(--gray-600)', + 700: 'var(--gray-700)', + 800: 'var(--gray-800)', + 900: 'var(--gray-900)', }, green: { - 50: '#ecfdf5', - 100: '#d1fae5', - 200: '#a7f3d0', - 300: '#6ee7b7', - 400: '#34d399', - 500: '#10b981', - 600: '#059669', - 700: '#047857', - 800: '#065f46', - 900: '#064e3b', + 50: 'var(--green-50)', + 100: 'var(--green-100)', + 200: 'var(--green-200)', + 300: 'var(--green-300)', + 400: 'var(--green-400)', + 500: 'var(--green-500)', + 600: 'var(--green-600)', + 700: 'var(--green-700)', + 800: 'var(--green-800)', + 900: 'var(--green-900)', }, indigo: { - 50: '#eef2ff', - 100: '#e0e7ff', - 200: '#c7d2fe', - 300: '#a5b4fc', - 400: '#818cf8', - 500: '#6366f1', - 600: '#4f46e5', - 700: '#4338ca', - 800: '#3730a3', - 900: '#312e81', + 50: 'var(--indigo-50)', + 100: 'var(--indigo-100)', + 200: 'var(--indigo-200)', + 300: 'var(--indigo-300)', + 400: 'var(--indigo-400)', + 500: 'var(--indigo-500)', + 600: 'var(--indigo-600)', + 700: 'var(--indigo-700)', + 800: 'var(--indigo-800)', + 900: 'var(--indigo-900)', }, orange: { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#f97316', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12', + 50: 'var(--orange-50)', + 100: 'var(--orange-100)', + 200: 'var(--orange-200)', + 300: 'var(--orange-300)', + 400: 'var(--orange-400)', + 500: 'var(--orange-500)', + 600: 'var(--orange-600)', + 700: 'var(--orange-700)', + 800: 'var(--orange-800)', + 900: 'var(--orange-900)', }, pink: { - 50: '#fdf2f8', - 100: '#fce7f3', - 200: '#fbcfe8', - 300: '#f9a8d4', - 400: '#f472b6', - 500: '#ec4899', - 600: '#db2777', - 700: '#be185d', - 800: '#9d174d', - 900: '#831843', + 50: 'var(--pink-50)', + 100: 'var(--pink-100)', + 200: 'var(--pink-200)', + 300: 'var(--pink-300)', + 400: 'var(--pink-400)', + 500: 'var(--pink-500)', + 600: 'var(--pink-600)', + 700: 'var(--pink-700)', + 800: 'var(--pink-800)', + 900: 'var(--pink-900)', }, purple: { - 50: '#f5f3ff', - 100: '#ede9fe', - 200: '#ddd6fe', - 300: '#c4b5fd', - 400: '#a78bfa', - 500: '#8655F6', - 600: '#7c3aed', - 700: '#6d28d9', - 800: '#5b21b6', - 900: '#4c1d95', + 50: 'var(--purple-50)', + 100: 'var(--purple-100)', + 200: 'var(--purple-200)', + 300: 'var(--purple-300)', + 400: 'var(--purple-400)', + 500: 'var(--purple-500)', + 600: 'var(--purple-600)', + 700: 'var(--purple-700)', + 800: 'var(--purple-800)', + 900: 'var(--purple-900)', }, red: { - 50: '#ffedee', - 100: '#fae1e2', - 200: '#ffccce', - 300: '#fa9da1', - 400: '#fc656b', - 500: '#e53940', - 600: '#d8232a', - 700: '#bf1f25', - 800: '#99191e', - 900: '#801519', + 50: 'var(--red-50)', + 100: 'var(--red-100)', + 200: 'var(--red-200)', + 300: 'var(--red-300)', + 400: 'var(--red-400)', + 500: 'var(--red-500)', + 600: 'var(--red-600)', + 700: 'var(--red-700)', + 800: 'var(--red-800)', + 900: 'var(--red-900)', }, teal: { - 50: '#f2fdfc', - 100: '#cbfbf8', - 200: '#98f6f3', - 300: '#5de8ea', - 400: '#2bced4', - 500: '#14afb8', - 600: '#0d8b96', - 700: '#0f6b75', - 800: '#11575f', - 900: '#13474e', + 50: 'var(--teal-50)', + 100: 'var(--teal-100)', + 200: 'var(--teal-200)', + 300: 'var(--teal-300)', + 400: 'var(--teal-400)', + 500: 'var(--teal-500)', + 600: 'var(--teal-600)', + 700: 'var(--teal-700)', + 800: 'var(--teal-800)', + 900: 'var(--teal-900)', }, yellow: { - 50: '#fffbeb', - 100: '#fef3c7', - 200: '#fde68a', - 300: '#fcd34d', - 400: '#fbbf24', - 500: '#f59e0b', - 600: '#d97706', - 700: '#b45309', - 800: '#92400e', - 900: '#78350f', - }, - gray: { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 400: '#9ca3af', - 500: '#6b7280', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', + 50: 'var(--yellow-50)', + 100: 'var(--yellow-100)', + 200: 'var(--yellow-200)', + 300: 'var(--yellow-300)', + 400: 'var(--yellow-400)', + 500: 'var(--yellow-500)', + 600: 'var(--yellow-600)', + 700: 'var(--yellow-700)', + 800: 'var(--yellow-800)', + 900: 'var(--yellow-900)', }, - white: '#ffffff', - black: '#000000', - transparent: 'transparent', - // New variable based colors + // New color tokens action: { - 'background-cta': 'var(--action-background-cta)', + 'background-cta-default': 'var(--action-background-cta-default)', + 'background-cta-disabled': 'var(--action-background-cta-disabled)', 'darkmode-hover-red': 'var(--primary-700)', 'darkmode-main-red': 'var(--primary-600)', disabled: 'var(--action-disabled)', diff --git a/css/foundations/global.postcss b/css/foundations/global.postcss index 38722e11..8f29457e 100644 --- a/css/foundations/global.postcss +++ b/css/foundations/global.postcss @@ -9,6 +9,23 @@ html { @apply font-regular; } +*[data-theme='auto'] { + @media (prefers-color-scheme: dark) { + color-scheme: dark; + } + @media (prefers-color-scheme: light) { + color-scheme: light; + } +} + +*[data-theme='light'] { + color-scheme: light; +} + +*[data-theme='dark'] { + color-scheme: dark; +} + #root, #__nuxt, #__layout, @@ -29,6 +46,7 @@ body { min-height: 100vh; min-height: -webkit-fill-available; @apply transition-transform duration-700; + @apply bg-background-main; } .body--mobile-menu-is-open { diff --git a/css/foundations/variables/color-primitives.postcss b/css/foundations/variables/color-primitives.postcss index c3112010..b6717359 100644 --- a/css/foundations/variables/color-primitives.postcss +++ b/css/foundations/variables/color-primitives.postcss @@ -1,20 +1,58 @@ /* Color primitives */ :root { + --standard-black: #000000; + --standard-transparent: #ffffff00; + --standard-white: #ffffff; + + --primary-50: #ffedee; + --primary-100: #fae1e2; + --primary-200: #ffccce; + --primary-300: #fa9da1; + --primary-400: #fc656b; + --primary-500: #e53940; + --primary-600: #d8232a; + --primary-700: #bf1e25; + --primary-800: #99191e; + --primary-900: #801519; + + --secondary-50: #f1f4f7; + --secondary-100: #e0e4e8; + --secondary-200: #adb4bc; + --secondary-300: #848e99; + --secondary-400: #5c6977; + --secondary-500: #4a5869; + --secondary-600: #334254; + --secondary-700: #293644; + --secondary-800: #1e2833; + --secondary-900: #151b21; + + --text-50: #f9fafb; + --text-100: #f3f4f6; + --text-200: #e5e7eb; + --text-300: #d1d5db; + --text-400: #9ca3af; + --text-500: #6b7280; + --text-600: #4b5563; + --text-700: #374151; + --text-800: #1f2937; + --text-900: #111827; + + --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; - --blue-50: #eff6ff; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --blue-900: #1e3a8a; + + --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; - --gray-50: #f9fafb; --gray-500: #6b7280; --gray-600: #4b5563; --gray-650: #1f2937c7; @@ -22,114 +60,89 @@ --gray-800: #1f2937; --gray-850: #111827e5; --gray-900: #111827; + + --green-50: #ecfdf5; --green-100: #d1fae5; --green-200: #a7f3d0; --green-300: #6ee7b7; --green-400: #34d399; - --green-50: #ecfdf5; --green-500: #10b981; --green-600: #059669; --green-700: #047857; --green-800: #065f46; --green-900: #064e3b; + + --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; - --indigo-50: #eef2ff; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81; + + --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c; - --orange-50: #fff7ed; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12; + + --pink-50: #fdf2f8; --pink-100: #fce7f3; --pink-200: #fbcfe8; --pink-300: #f9a8d4; --pink-400: #f472b6; - --pink-50: #fdf2f8; --pink-500: #ec4899; --pink-600: #db2777; --pink-700: #be185d; --pink-800: #9d174d; --pink-900: #831843; - --primary-100: #fae1e2; - --primary-200: #ffccce; - --primary-300: #fa9da1; - --primary-400: #fc656b; - --primary-50: #ffedee; - --primary-500: #e53940; - --primary-600: #d8232a; - --primary-700: #bf1e25; - --primary-800: #99191e; - --primary-900: #801519; - --purble-100: #ede9fe; - --purble-200: #ddd6fe; - --purble-300: #c4b5fd; - --purble-400: #a78bfa; - --purble-50: #f5f3ff; - --purble-500: #8655f6; - --purble-600: #7c3aed; - --purble-700: #6d28d9; - --purble-800: #5b21b6; - --purble-900: #4c1d95; + + --purple-50: #f5f3ff; + --purple-100: #ede9fe; + --purple-200: #ddd6fe; + --purple-300: #c4b5fd; + --purple-400: #a78bfa; + --purple-500: #8655f6; + --purple-600: #7c3aed; + --purple-700: #6d28d9; + --purple-800: #5b21b6; + --purple-900: #4c1d95; + + --red-50: #ffedee; --red-100: #fae1e2; --red-200: #ffccce; --red-300: #fa9da1; --red-400: #fc656b; - --red-50: #ffedee; --red-500: #e53940; --red-600: #d8232a; --red-700: #bf1e25; --red-800: #99191e; --red-900: #801519; - --secondary-100: #e0e4e8; - --secondary-200: #adb4bc; - --secondary-300: #848e99; - --secondary-400: #5c6977; - --secondary-50: #f1f4f7; - --secondary-500: #4a5869; - --secondary-600: #334254; - --secondary-700: #293644; - --secondary-800: #1e2833; - --secondary-900: #151b21; - --standard-black: #000000; - --standard-transparency: #ffffff00; - --standard-white: #ffffff; + + --teal-50: #f2fdfc; --teal-100: #cbfbf8; --teal-200: #98f6f3; --teal-300: #5de8ea; --teal-400: #2bced4; - --teal-50: #f2fdfc; --teal-500: #14afb8; --teal-600: #0d8b96; --teal-700: #0f6b75; --teal-800: #11575f; --teal-900: #13474e; - --text-100: #f3f4f6; - --text-200: #e5e7eb; - --text-300: #d1d5db; - --text-400: #9ca3af; - --text-50: #f9fafb; - --text-500: #6b7280; - --text-600: #4b5563; - --text-700: #374151; - --text-800: #1f2937; - --text-900: #111827; + + --yellow-50: #fffbeb; --yellow-100: #fef3c7; --yellow-200: #fde68a; --yellow-300: #fcd34d; --yellow-400: #fbbf24; - --yellow-50: #fffbeb; --yellow-500: #f59e0b; --yellow-600: #d97706; --yellow-700: #b45309; diff --git a/css/foundations/variables/color-tokens.postcss b/css/foundations/variables/color-tokens.postcss index 3db0210a..cdd9358e 100644 --- a/css/foundations/variables/color-tokens.postcss +++ b/css/foundations/variables/color-tokens.postcss @@ -1,26 +1,10 @@ -*[data-theme='auto'] { - @media (prefers-color-scheme: dark) { - color-scheme: dark; - } - @media (prefers-color-scheme: light) { - color-scheme: light; - } -} - -*[data-theme='light'] { - color-scheme: light; -} - -*[data-theme='dark'] { - color-scheme: dark; -} - :root { - --action-background-cta: light-dark(var(--standard-white), var(--secondary-600)); + --action-background-cta-default: light-dark(var(--standard-white), var(--secondary-600)); + --action-background-cta-disabled: light-dark(var(--standard-white), var(--standard-transparent)); --action-darkmode-hover-red: light-dark(var(--primary-700), var(--primary-500)); --action-darkmode-main-red: light-dark(var(--primary-600), var(--primary-400)); --action-disabled: light-dark(var(--secondary-200), var(--secondary-300)); - --action-focus: light-dark(var(--purble-500), var(--purble-500)); + --action-focus: light-dark(var(--purple-500), var(--purple-500)); --action-hover-main: light-dark(var(--primary-700), var(--secondary-100)); --action-hover-secondary: light-dark(var(--secondary-500), var(--secondary-100)); --action-main: light-dark(var(--primary-600), var(--standard-white)); @@ -86,9 +70,9 @@ --ui-elements-inputfield-select-background-main-background: light-dark(var(--standard-white), var(--secondary-500)); --ui-elements-inputfield-select-indicator-active-indicator: light-dark(var(--gray-500), var(--text-300)); --ui-elements-inputfield-select-indicator-disabled-indicator: light-dark(var(--gray-300), var(--gray-400)); - --ui-elements-inputfield-select-stroke-disabled-stroke: light-dark(var(--gray-300), var(--standard-transparency)); + --ui-elements-inputfield-select-stroke-disabled-stroke: light-dark(var(--gray-300), var(--standard-transparent)); --ui-elements-inputfield-select-stroke-error-stroke: light-dark(var(--red-600), var(--red-300)); - --ui-elements-inputfield-select-stroke-main-stroke: light-dark(var(--gray-500), var(--standard-transparency)); + --ui-elements-inputfield-select-stroke-main-stroke: light-dark(var(--gray-500), var(--standard-transparent)); --ui-elements-inputfield-select-text-disabled-text: light-dark(var(--text-400), var(--secondary-300)); --ui-elements-inputfield-select-text-error-text: light-dark(var(--red-600), var(--red-300)); --ui-elements-inputfield-select-text-label-text: light-dark(var(--text-500), var(--standard-white)); From d69f667f559d8b4349fedb9170d22577e8bde0d4 Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Thu, 12 Dec 2024 09:34:04 +0100 Subject: [PATCH 004/107] working top header with data-default-theme --- css/foundations/global.postcss | 16 ++++++++++++---- css/sections/top-header.postcss | 6 ------ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/css/foundations/global.postcss b/css/foundations/global.postcss index 8f29457e..b835a912 100644 --- a/css/foundations/global.postcss +++ b/css/foundations/global.postcss @@ -9,20 +9,28 @@ html { @apply font-regular; } -*[data-theme='auto'] { - @media (prefers-color-scheme: dark) { +:root[data-theme='auto'] { + /* @media (prefers-color-scheme: dark) { color-scheme: dark; } @media (prefers-color-scheme: light) { color-scheme: light; + } */ + + *[data-default-theme='light'] { + color-scheme: light; + } + + *[data-default-theme='dark'] { + color-scheme: dark; } } -*[data-theme='light'] { +:root[data-theme='light'] { color-scheme: light; } -*[data-theme='dark'] { +:root[data-theme='dark'] { color-scheme: dark; } diff --git a/css/sections/top-header.postcss b/css/sections/top-header.postcss index dbae9b0a..1b722e6b 100644 --- a/css/sections/top-header.postcss +++ b/css/sections/top-header.postcss @@ -10,12 +10,6 @@ @apply bg-background-main text-ui-elements-inputfield-select-main-text; } -.top-header[data-theme='dark'] { - .top-header { - @apply bg-black text-white; - } -} - .top-header__mobile-title { @apply bg-secondary-100 xs:hidden; @apply text-xs; From 289e3552f7e41a7893593db459a651745f63ee59 Mon Sep 17 00:00:00 2001 From: Florian Dendorfer Date: Thu, 12 Dec 2024 11:45:56 +0100 Subject: [PATCH 005/107] button dark theme --- .../stories/components/Btn.stories.js | 28 ++++++------ app/tailwind.config.js | 1 + css/components/btn.postcss | 44 +++++++------------ 3 files changed, 32 insertions(+), 41 deletions(-) diff --git a/app/components/stories/components/Btn.stories.js b/app/components/stories/components/Btn.stories.js index 4b48cf2c..40a65e19 100644 --- a/app/components/stories/components/Btn.stories.js +++ b/app/components/stories/components/Btn.stories.js @@ -82,21 +82,23 @@ export const ButtonOrLink = { export const ButtonVariations = { render: () => ({ template: ` - +
+ - + - `, + + + +
`, }), } diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 28ce5835..fc9c09d0 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -392,6 +392,7 @@ export default { '2xl': '0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13)', none: '0px 0px 0px 0px rgba(0,0,0,0)', + focus: '0px 0px 0px 3px var(--purple-500)', }, borderRadius: { none: '0', diff --git a/css/components/btn.postcss b/css/components/btn.postcss index cd934dba..f5284eda 100644 --- a/css/components/btn.postcss +++ b/css/components/btn.postcss @@ -13,43 +13,33 @@ } .btn--outline { - @apply text-primary-600 font-normal; - @apply border border-primary-600; - @apply hover:text-primary-700 hover:border-primary-700; - @apply focus:text-primary-600 focus:border-primary-600; - - &:disabled { - @apply text-secondary-300; - @apply border-secondary-200; - } + @apply text-action-main font-normal; + @apply border border-action-main bg-action-background-cta-default; + @apply hover:text-action-hover-main; + @apply focus:shadow-focus; + @apply disabled:text-action-disabled disabled:border-action-disabled disabled:bg-action-background-cta-disabled; } .btn--bare { @apply px-2; - @apply text-secondary-800 font-normal; - @apply hover:text-primary-600; - - &:disabled { - @apply text-secondary-300; - @apply bg-transparent; - } + @apply text-text-new-main bg-standard-transparent font-normal; + @apply hover:text-action-hover-main; + @apply focus:text-action-main; + @apply disabled:text-action-disabled disabled:bg-action-background-cta-disabled; } .btn--link { @apply pr-2 pl-0; - @apply text-primary-600 font-normal; - @apply hover:text-primary-700; + @apply text-text-new-main bg-standard-transparent font-normal; + @apply hover:text-action-hover-main; + @apply focus:text-action-main; + @apply disabled:text-action-disabled disabled:bg-transparent; .btn__icon { @apply w-8; @apply stroke-0 md:stroke-[0.05px] lg:stroke-[0.1px]; @apply fill-current stroke-current; } - - &:disabled { - @apply text-secondary-300; - @apply bg-transparent; - } } .btn--link-negative { @@ -71,11 +61,9 @@ } .btn--filled { - @apply text-white font-bold; - @apply bg-secondary-500; - @apply border border-secondary-500; - @apply hover:text-secondary-100; - @apply focus:text-white; + @apply text-text-new-contrast font-bold bg-action-secondary; + @apply hover:bg-action-hover-secondary; + @apply focus:bg-action-secondary focus:shadow-focus; &:disabled { @apply text-white; From fd5f4b9fd024f8859fb1e102d8415a309d72c97f Mon Sep 17 00:00:00 2001 From: gebelj Date: Thu, 12 Dec 2024 13:01:47 +0100 Subject: [PATCH 006/107] Add darkmode to table (also as prop) --- app/components/ch/demo/Table.vue | 7 +++- .../stories/components/Table.stories.js | 11 +++++ css/components/table.postcss | 40 ++++++++++++++++--- 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/app/components/ch/demo/Table.vue b/app/components/ch/demo/Table.vue index 1e3aeab4..a37076fd 100644 --- a/app/components/ch/demo/Table.vue +++ b/app/components/ch/demo/Table.vue @@ -1,6 +1,6 @@