From 0c1cf0b756b748e23204b75d92c6c11dd69642ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 28 Mar 2024 12:51:28 +0100 Subject: [PATCH 01/13] =?UTF-8?q?Implement=20Vuetify=20themes=20=E2=80=93?= =?UTF-8?q?=20first=20tryout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/renderer/plugins/vuetify.ts | 82 +++++++++++++++++++++++- frontend/src/components/menu/TopMenu.vue | 16 ++++- frontend/src/locales/de.json | 6 +- frontend/src/locales/en.json | 7 +- 4 files changed, 107 insertions(+), 4 deletions(-) diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index b983d5e55..9fc6dc1b9 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -3,9 +3,81 @@ import '@mdi/font/css/materialdesignicons.css' // eslint-disable-next-line import/no-unassigned-import import 'vuetify/styles' import { I18n, useI18n } from 'vue-i18n' -import { createVuetify } from 'vuetify' +import { createVuetify, ThemeDefinition } from 'vuetify' import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n' +const ocelotStandardLightTheme: ThemeDefinition = { + dark: false, + colors: { + background: 'rgb(255, 255, 255)', + surface: 'rgb(255, 255, 255)', + // primary: rgbToHex(23, 181, 63, '#'), + primary: 'rgb(23, 181, 63)', + // 'primary-darken-1': rgbToHex(25, 122, 49, '#'), + 'primary-darken-1': 'rgb(25, 122, 49)', + secondary: 'rgb(0, 142, 230)', + // 'secondary-darken-1': '#018786', + error: 'rgb(219, 57, 36)', + // info: '#2196F3', + success: 'rgb(23, 181, 63)', + warning: 'rgb(230, 121, 25)', + }, + variables: { + 'border-color': '#000000', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 0.87, + 'medium-emphasis-opacity': 0.6, + 'disabled-opacity': 0.38, + 'idle-opacity': 0.04, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.08, + 'theme-kbd': '#0000FF', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#F5F5F5', + 'theme-on-code': '#000000', + }, +} + +const ocelotStandardDarkTheme: ThemeDefinition = { + dark: true, + colors: { + background: 'rgb(0, 0, 0)', + surface: 'rgb(14, 17, 23)', + // primary: rgbToHex(23, 181, 63, '#'), + primary: 'rgb(23, 181, 63)', + // 'primary-darken-1': rgbToHex(25, 122, 49, '#'), + 'primary-darken-1': 'rgb(25, 122, 49)', + secondary: 'rgb(0, 142, 230)', + // 'secondary-darken-1': '#018786', + error: 'rgb(219, 57, 36)', + // info: '#2196F3', + success: 'rgb(23, 181, 63)', + warning: 'rgb(230, 121, 25)', + }, + variables: { + 'border-color': '#000000', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 0.87, + 'medium-emphasis-opacity': 0.6, + 'disabled-opacity': 0.38, + 'idle-opacity': 0.04, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.08, + 'theme-kbd': '#0000FF', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#F5F5F5', + 'theme-on-code': '#000000', + }, +} + // eslint-disable-next-line @typescript-eslint/no-explicit-any export default (i18n: I18n, NonNullable, string, false>) => createVuetify({ @@ -13,4 +85,12 @@ export default (i18n: I18n, NonNullable, stri adapter: createVueI18nAdapter({ i18n, useI18n }), }, ssr: true, + theme: { + defaultTheme: 'ocelotStandardLightTheme', + // defaultTheme: 'ocelotStandardDarkTheme', + themes: { + ocelotStandardLightTheme, + ocelotStandardDarkTheme, + }, + }, }) diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue index 2789e4104..63dca3d42 100644 --- a/frontend/src/components/menu/TopMenu.vue +++ b/frontend/src/components/menu/TopMenu.vue @@ -9,6 +9,13 @@ {{ $t('menu.app') }} {{ $t('menu.about') }} + + {{ + theme.global.current.value.dark + ? $t('menu.theme.switchToLight') + : $t('menu.theme.switchToDark') + }} + import { ref } from 'vue' -import { useLocale } from 'vuetify' +import { useLocale, useTheme } from 'vuetify' import VikeBtn from '#components/VikeBtn.vue' import LogoAvatar from './LogoAvatar.vue' +const theme = useTheme() +function toggleTheme() { + theme.global.name.value = theme.global.current.value.dark + ? 'ocelotStandardLightTheme' + : 'ocelotStandardDarkTheme' +} + const { current: locale } = useLocale() const isEnabled = ref(locale.value === 'de') const onChange = () => { diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 94e55fc13..987b424e8 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -48,6 +48,10 @@ "menu": { "about": "Über", "app": "Anwendung", - "home": "Daheim" + "home": "Daheim", + "theme": { + "switchToDark": "Dunkel", + "switchToLight": "Hell" + } } } diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index ac930f13d..8b990522e 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -48,6 +48,11 @@ "menu": { "about": "About", "app": "App", - "home": "Home" + "home": "Home", + "theme": { + "switchToDark": "Dark", + "switchToLight": "Light" + } + } } From ebd618070c190cf3ce20b459fcfe25c73297f2c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 28 Mar 2024 12:52:39 +0100 Subject: [PATCH 02/13] Add tryout code to home page --- frontend/src/pages/index/+Page.vue | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/frontend/src/pages/index/+Page.vue b/frontend/src/pages/index/+Page.vue index a614885d8..bebd2217d 100644 --- a/frontend/src/pages/index/+Page.vue +++ b/frontend/src/pages/index/+Page.vue @@ -11,9 +11,22 @@

{{ $t('home.greet1') }}

{{ $t('home.greet2') }}

+ + + + + + + + + From 14acbdda629c6fd0a279eb508c75d02b80e3dd20 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Wed, 17 Apr 2024 16:29:33 +0200 Subject: [PATCH 03/13] Add working example of importing design tokens from tokens.module.scss --- frontend/renderer/plugins/vuetify.ts | 4 +++- frontend/src/assets/sass/tokens.module.scss | 5 +++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/sass/tokens.module.scss diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index 9fc6dc1b9..7ee24bc10 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -6,13 +6,15 @@ import { I18n, useI18n } from 'vue-i18n' import { createVuetify, ThemeDefinition } from 'vuetify' import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n' +import tokens from '#assets/sass/tokens.module.scss' + const ocelotStandardLightTheme: ThemeDefinition = { dark: false, colors: { background: 'rgb(255, 255, 255)', surface: 'rgb(255, 255, 255)', // primary: rgbToHex(23, 181, 63, '#'), - primary: 'rgb(23, 181, 63)', + primary: tokens.primaryColor, // 'primary-darken-1': rgbToHex(25, 122, 49, '#'), 'primary-darken-1': 'rgb(25, 122, 49)', secondary: 'rgb(0, 142, 230)', diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss new file mode 100644 index 000000000..f92d34280 --- /dev/null +++ b/frontend/src/assets/sass/tokens.module.scss @@ -0,0 +1,5 @@ +$primary-color: rgba(20,20,20,10%); + +:export { + primaryColor: $primary-color +} From 0fc148ead6bc3057fe85316cd2c522633dd83960 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 23 Apr 2024 13:39:11 +0200 Subject: [PATCH 04/13] Fix file 'tokens.module.scss' --- frontend/src/assets/sass/tokens.module.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss index f92d34280..e32b1ba65 100644 --- a/frontend/src/assets/sass/tokens.module.scss +++ b/frontend/src/assets/sass/tokens.module.scss @@ -1,5 +1,6 @@ -$primary-color: rgba(20,20,20,10%); +/* stylelint-disable color-function-notation */ +$color-primary: rgb(23, 181, 63); :export { - primaryColor: $primary-color + primaryColor: $color-primary } From b6fa99d46cb7f7194de74604ea8b42c9414ee157 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 23 Apr 2024 14:07:26 +0200 Subject: [PATCH 05/13] Implement basic colors --- frontend/renderer/plugins/vuetify.ts | 63 +-- frontend/src/assets/sass/tokens.module.scss | 465 +++++++++++++++++++- 2 files changed, 474 insertions(+), 54 deletions(-) diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index 7ee24bc10..18439f908 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -11,72 +11,29 @@ import tokens from '#assets/sass/tokens.module.scss' const ocelotStandardLightTheme: ThemeDefinition = { dark: false, colors: { - background: 'rgb(255, 255, 255)', - surface: 'rgb(255, 255, 255)', - // primary: rgbToHex(23, 181, 63, '#'), + background: tokens.backgroundColorBase, + surface: tokens.backgroundColorSoft, primary: tokens.primaryColor, - // 'primary-darken-1': rgbToHex(25, 122, 49, '#'), - 'primary-darken-1': 'rgb(25, 122, 49)', - secondary: 'rgb(0, 142, 230)', - // 'secondary-darken-1': '#018786', - error: 'rgb(219, 57, 36)', - // info: '#2196F3', - success: 'rgb(23, 181, 63)', - warning: 'rgb(230, 121, 25)', + secondary: tokens.colorSecondary, + success: tokens.colorSuccess, + info: tokens.colorInfo, + warning: tokens.colorWarning, + error: tokens.colorError, }, variables: { 'border-color': '#000000', - 'border-opacity': 0.12, - 'high-emphasis-opacity': 0.87, - 'medium-emphasis-opacity': 0.6, - 'disabled-opacity': 0.38, - 'idle-opacity': 0.04, - 'hover-opacity': 0.04, - 'focus-opacity': 0.12, - 'selected-opacity': 0.08, - 'activated-opacity': 0.12, - 'pressed-opacity': 0.12, - 'dragged-opacity': 0.08, - 'theme-kbd': '#0000FF', - 'theme-on-kbd': '#FFFFFF', - 'theme-code': '#F5F5F5', - 'theme-on-code': '#000000', }, } const ocelotStandardDarkTheme: ThemeDefinition = { dark: true, colors: { - background: 'rgb(0, 0, 0)', - surface: 'rgb(14, 17, 23)', - // primary: rgbToHex(23, 181, 63, '#'), - primary: 'rgb(23, 181, 63)', - // 'primary-darken-1': rgbToHex(25, 122, 49, '#'), - 'primary-darken-1': 'rgb(25, 122, 49)', - secondary: 'rgb(0, 142, 230)', - // 'secondary-darken-1': '#018786', - error: 'rgb(219, 57, 36)', - // info: '#2196F3', - success: 'rgb(23, 181, 63)', - warning: 'rgb(230, 121, 25)', + ...ocelotStandardLightTheme.colors, + background: tokens.backgroundColorInverse, + surface: tokens.backgroundColorInverseSoft, }, variables: { 'border-color': '#000000', - 'border-opacity': 0.12, - 'high-emphasis-opacity': 0.87, - 'medium-emphasis-opacity': 0.6, - 'disabled-opacity': 0.38, - 'idle-opacity': 0.04, - 'hover-opacity': 0.04, - 'focus-opacity': 0.12, - 'selected-opacity': 0.08, - 'activated-opacity': 0.12, - 'pressed-opacity': 0.12, - 'dragged-opacity': 0.08, - 'theme-kbd': '#0000FF', - 'theme-on-kbd': '#FFFFFF', - 'theme-code': '#F5F5F5', - 'theme-on-code': '#000000', }, } diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss index e32b1ba65..3aff11f98 100644 --- a/frontend/src/assets/sass/tokens.module.scss +++ b/frontend/src/assets/sass/tokens.module.scss @@ -1,6 +1,469 @@ /* stylelint-disable color-function-notation */ + +/** + * @tokens Color Brand + * @presenter Color + */ + $color-primary: rgb(23, 181, 63); +$color-primary-light: rgb(96, 214, 98); +$color-primary-dark: rgb(25, 122, 49); +$color-primary-active: rgb(25, 194, 67); +$color-primary-inverse: rgb(241, 253, 244); +$color-secondary: rgb(0, 142, 230); +$color-secondary-active: rgb(10, 161, 255); +$color-secondary-inverse: rgb(240, 249, 255); +$color-success: rgb(23, 181, 63); +$color-success-active: rgb(26, 203, 71); +$color-success-inverse: rgb(241, 253, 244); +$color-danger: rgb(219, 57, 36); +$color-danger-light: rgb(242, 97, 65); +$color-danger-dark: rgb(158, 43, 28); +$color-danger-active: rgb(224, 81, 62); +$color-danger-inverse: rgb(253, 243, 242); +$color-warning: rgb(230, 121, 25); +$color-warning-active: rgb(233, 137, 53); +$color-warning-inverse: rgb(253, 247, 241); +$color-yellow: rgb(245, 196, 0); +$color-yellow-active: rgb(255, 206, 10); +$color-yellow-inverse: rgb(255, 252, 240); + +/** + * @tokens Color Neutral + * @presenter Color + */ + +$color-neutral-0: rgb(25, 23, 28); +$color-neutral-10: rgb(40, 37, 45); +$color-neutral-20: rgb(75, 69, 84); +$color-neutral-30: rgb(100, 92, 112); +$color-neutral-40: rgb(112, 103, 126); +$color-neutral-50: rgb(151, 143, 163); +$color-neutral-60: rgb(177, 171, 186); +$color-neutral-70: rgb(203, 199, 209); +$color-neutral-80: rgb(229, 227, 232); +$color-neutral-85: rgb(239, 238, 241); +$color-neutral-90: rgb(245, 244, 246); +$color-neutral-95: rgb(250, 249, 250); +$color-neutral-100: rgb(255, 255, 255); + +/** + * @tokens Color Text + * @presenter Color + */ + +$text-color-base: rgb(75, 69, 84); +$text-color-soft: rgb(112, 103, 126); +$text-color-softer: rgb(177, 171, 186); +$text-color-disabled: rgb(177, 171, 186); +$text-color-inverse: rgb(250, 249, 250); +$text-color-link: rgb(23, 181, 63); +$text-color-link-active: rgb(25, 194, 67); +$text-color-primary: rgb(23, 181, 63); +$text-color-primary-inverse: rgb(241, 253, 244); +$text-color-secondary: rgb(0, 142, 230); +$text-color-secondary-inverse: rgb(240, 249, 255); +$text-color-success: rgb(23, 181, 63); +$text-color-success-inverse: rgb(241, 253, 244); +$text-color-warning: rgb(230, 121, 25); +$text-color-warning-inverse: rgb(253, 247, 241); +$text-color-danger: rgb(219, 57, 36); +$text-color-danger-inverse: rgb(253, 243, 242); + +/** + * @tokens Color Background + * @presenter Color + */ + +$background-color-base: rgb(255, 255, 255); +$background-color-soft: rgb(250, 249, 250); +$background-color-softer: rgb(245, 244, 246); +$background-color-softer-active: rgb(250, 249, 250); +$background-color-softest: rgb(239, 238, 241); +$background-color-softest-active: rgb(245, 244, 246); +$background-color-inverse: rgb(25, 23, 28); +$background-color-inverse-soft: rgb(40, 37, 45); +$background-color-inverse-softer: rgb(75, 69, 84); +$background-color-inverse-softer-active: rgb(100, 92, 112); +$background-color-disabled: rgb(245, 244, 246); +$background-color-primary: rgb(23, 181, 63); +$background-color-primary-active: rgb(25, 194, 67); +$background-color-primary-inverse: rgb(241, 253, 244); +$background-color-secondary: rgb(0, 142, 230); +$background-color-secondary-active: rgb(10, 161, 255); +$background-color-secondary-inverse: rgb(240, 249, 255); +$background-color-third: rgb(126, 82, 204); +$background-color-third-active: rgb(160, 103, 255); +$background-color-third-inverse: rgb(239, 230, 255); +$background-color-success: rgb(23, 181, 63); +$background-color-success-active: rgb(26, 203, 71); +$background-color-success-inverse: rgb(241, 253, 244); +$background-color-warning: rgb(230, 121, 25); +$background-color-warning-active: rgb(233, 137, 53); +$background-color-warning-inverse: rgb(253, 247, 241); +$background-color-danger: rgb(219, 57, 36); +$background-color-danger-active: rgb(224, 81, 62); +$background-color-danger-inverse: rgb(253, 243, 242); + +/** + * @tokens Color Border + * @presenter Color + */ + +$border-color-base: rgb(177, 171, 186); +$border-color-soft: rgb(203, 199, 209); +$border-color-softer: rgb(229, 227, 232); +$border-color-softest: rgb(245, 244, 246); +$border-color-active: rgb(23, 181, 63); +$border-color-primary: rgb(23, 181, 63); +$border-color-success: rgb(23, 181, 63); +$border-color-warning: rgb(230, 121, 25); +$border-color-danger: rgb(219, 57, 36); + +/** + * @tokens Border Size + * @presenter Border + */ + +$border-size-base: 1px; +$border-size-large: 3px; +$border-size-x-large: 6px; + +/** + * @tokens Border Radius + * @presenter BorderRadius + */ + +$border-radius-x-large: 5px; +$border-radius-large: 4px; +$border-radius-base: 4px; +$border-radius-small: 2px; +$border-radius-rounded: 2em; +$border-radius-circle: 50%; + +/** + * @tokens Font Size + * @presenter FontSize + */ + +$font-size-xxxx-large: 3rem; +$font-size-xxx-large: 2.5rem; +$font-size-xx-large: 2rem; +$font-size-x-large: 1.5rem; +$font-size-large: 1.25rem; +$font-size-base: 1rem; +$font-size-body: 15px; +$font-size-small: 0.8rem; +$font-size-x-small: 0.7rem; +$font-size-xx-small: 0.6rem; + +/** + * @tokens Font Space + * @presenter Spacing + */ + +$font-space-xxxx-large: 2em; +$font-space-xxx-large: 1.5em; +$font-space-xx-large: 1.2em; +$font-space-x-large: 1em; +$font-space-large: 0.6em; +$font-space-base: 0.5em; +$font-space-small: 0.4em; +$font-space-x-small: 0.3em; +$font-space-xx-small: 0.2em; +$font-space-xxx-small: 0.1em; + +/** + * @tokens Font Family + * @presenter FontFamily + */ + +$font-family-heading: 'LatoWeb', sans-serif; +$font-family-text: 'LatoWeb', sans-serif; +$font-family-serif: 'Gentium Basic', serif; +$font-family-code: inconsolata, monospace; + +/** + * @tokens Font Weight + * @presenter FontWeight + */ + +$font-weight-regular: normal; +$font-weight-bold: 600; + +/** + * @tokens Line Height + * @presenter LineHeight + */ + +$line-height-large: 1.5rem; +$line-height-base: 1.3rem; +$line-height-small: 1.1rem; +$line-height-smaller: 1.0rem; + +/** + * @tokens Letter Spacing + * @presenter Spacing + */ + +$letter-spacing-x-large: 0.1em; +$letter-spacing-large: 0.05em; +$letter-spacing-base: 0; +$letter-spacing-small: -0.01em; +$letter-spacing-x-small: -0.015em; + +/** + * @tokens Opacity + * @presenter Opacity + */ + +$opacity-base: 1; +$opacity-soft: 0.7; +$opacity-disabled: 0.5; + +/** + * @tokens Space + * @presenter Spacing + */ + +$space-xxx-large: 128px; +$space-xx-large: 64px; +$space-x-large: 48px; +$space-large: 32px; +$space-base: 24px; +$space-small: 16px; +$space-x-small: 8px; +$space-xx-small: 4px; +$space-xxx-small: 2px; +$space-none: 0; + +/** + * @tokens Size Height + * @presenter Spacing + */ + +$size-height-base: 42px; +$size-height-large: 50px; +$size-height-xlarge: 60px; +$size-height-footer: 64px; +$size-height-connections: 315px; +$size-tappable-square: 44px; +$size-ribbon: 6px; + +/** + * @tokens Size Width + * @presenter Spacing + */ + +$size-width-filter-sidebar: 85px; +$size-width-paginate: 200px; +$size-max-width-filter-menu: 1026px; + +/** + * @tokens Size Avatar + * @presenter Spacing + */ + +$size-avatar-small: 34px; +$size-avatar-base: 44px; +$size-avatar-large: 114px; + +/** + * @tokens Size Buttons + * @presenter Spacing + */ + +$size-button-large: 50px; +$size-button-base: 36px; +$size-button-small: 26px; + +/** + * @tokens Size Images + * @presenter Spacing + */ + +$size-image-max-height: 2000px; +$size-image-cropper-max-height: 600px; +$size-image-cropper-min-height: 400px; +$size-image-uploader-min-height: 250px; + +/** + * @tokens Size Icons + * @presenter Spacing + */ + +$size-icon-base: 16px; +$size-icon-large: 60px; + +/** + * @tokens Shadow + * @presenter Shadow + */ + +$box-shadow-x-large: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08); +$box-shadow-large: 0 10px 20px 0 rgba(0, 0, 0, .11), 0 3px 10px 0 rgba(0, 0, 0, .08); +$box-shadow-base: 0px 12px 26px -4px rgba(0, 0, 0, .1); +$box-shadow-small: 0px 8px 18px -2px rgba(0, 0, 0, .1); +$box-shadow-x-small: 0px 0px 3px 0px rgba(0, 0, 0, .1); +$box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5); +$box-shadow-inset: inset 0 0 20px 1px rgba(0, 0, 0, .15); +$box-shadow-small-inset: inset 0 0 0 1px rgba(0, 0, 0, .05); + +/** + * @tokens Effects + */ + +$blur-radius: 22px; + +/** + * @tokens Animation Duration + */ + +$duration-short: 0.08s; +$duration-base: 0.5s; +$duration-long: 0.75s; +$duration-x-long: 1s; +$duration-xx-long: 2s; + +/** + * @tokens Animation Ease + * @presenter Easing + */ + +$ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1); +$ease-out-bounce: cubic-bezier(.87, -.41, .19, 1.44); +$ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53); +$ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22); + +/** + * @tokens Z-Index + */ + +$z-index-modal: 9999; +$z-index-overlay: 9000; +$z-index-dropdown: 8888; +$z-index-page-submenu: 2500; +$z-index-page-header: 2000; +$z-index-page-sidebar: 1500; +$z-index-sticky-float: 150; +$z-index-sticky: 100; +$z-index-post-teaser-link: 5; +$z-index-surface: 1; + +/** + * @tokens Media Query + */ + +$media-query-x-small: ( + min-width: 480px +); +$media-query-small: ( + min-width: 600px +); +$media-query-medium: ( + min-width: 768px +); +$media-query-large: ( + min-width: 1024px +); +$media-query-x-large: ( + min-width: 1200px +); + +/** + * @tokens Background Images + */ + +/** + * @tokens Header Color + */ + +$color-header-background: $color-neutral-100; + +/** + * @tokens Footer Color + */ + +$color-footer-background: $color-neutral-100; +$color-footer-link: $color-primary; + +/** + * @tokens Locale Menu Color + */ + +$color-locale-menu: $text-color-soft; + +/** + * @tokens Donation Bar Color + */ + +$color-donation-bar: $color-primary; +$color-donation-bar-light: $color-primary-light; + +/** + * @tokens Toast Color + */ + +$color-toast-red: $color-danger; +$color-toast-orange: $color-warning; +$color-toast-yellow: $color-yellow; +$color-toast-blue: $color-secondary; +$color-toast-green: $color-success; + +/** + * @tokens Ribbon Color + */ + +$color-ribbon-event: $background-color-third; +$color-ribbon-event-active: $background-color-third-active; +$color-ribbon-article: $background-color-secondary; +$color-ribbon-article-active: $background-color-secondary-active; + +/** + * @tokens Chat Color + */ + +$chat-message-bg-me: $color-primary-light; +$chat-message-color: $text-color-base; +$chat-message-bg-others: $color-neutral-80; +$chat-sidemenu-bg: $color-secondary-active; +$chat-new-message-color: $color-secondary-active; +$chat-message-timestamp: $text-color-soft; +$chat-message-checkmark-seen: $text-color-secondary; +$chat-message-checkmark: $text-color-soft; +$chat-room-color-counter-badge: $text-color-inverse; +$chat-room-background-counter-badge: $color-secondary; :export { - primaryColor: $color-primary + primaryColor: $color-primary; + colorSecondary: $color-secondary; + colorPrimaryActive: $color-primary-active; + colorPrimaryLight: $color-primary-light; + colorSuccess: $color-success; + colorInfo: $color-secondary; + colorWarning: $color-warning; + colorError: $color-danger; + backgroundColorBase: $background-color-base; + backgroundColorSoft: $background-color-soft; + backgroundColorSoftest: $background-color-softest; + backgroundColorPrimary: $background-color-primary; + backgroundColorInverse: $background-color-inverse; + backgroundColorInverseSoft: $background-color-inverse-soft; + borderColorSoft: $border-color-soft; + borderRadiusBase: $border-radius-base; + textColorBase: $text-color-base; + textColorSoft: $text-color-soft; + textColorInverse: $text-color-inverse; + boxShadowBase: $box-shadow-base; + colorNeutral30: $color-neutral-30; + chatMessageColor: $chat-message-color; + chatMessageBgMe: $chat-message-bg-me; + chatMessageBgOthers: $chat-message-bg-others; + chatNewMessageColor: $chat-new-message-color; + chatMessageTimestamp: $chat-message-timestamp; + chatMessageCheckmarkSeen: $chat-message-checkmark-seen; + chatMessageCheckmark: $chat-message-checkmark; + chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge; + chatRoomColorCounterBadge: $chat-room-color-counter-badge; } From 790e5497be6f524dff4aca01e49c102111d5e4ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 23 Apr 2024 14:14:39 +0200 Subject: [PATCH 06/13] Adjust home page --- frontend/src/pages/index/+Page.vue | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/frontend/src/pages/index/+Page.vue b/frontend/src/pages/index/+Page.vue index bebd2217d..c953f2357 100644 --- a/frontend/src/pages/index/+Page.vue +++ b/frontend/src/pages/index/+Page.vue @@ -7,26 +7,13 @@

{{ $t('home.text3') }}


-

{{ $t('home.text4') }}

+

{{ $t('home.text4') }}


{{ $t('home.greet1') }}

{{ $t('home.greet2') }}

- - - - - - - - - From 79e7cff04e50ef320e3be498d0d003e1ba5f2b93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 23 Apr 2024 14:20:10 +0200 Subject: [PATCH 07/13] Rename themes to standard names --- frontend/renderer/plugins/vuetify.ts | 13 ++++++------- frontend/src/components/menu/TopMenu.vue | 5 ++--- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index 18439f908..cc4d0f0cb 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -8,7 +8,7 @@ import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n' import tokens from '#assets/sass/tokens.module.scss' -const ocelotStandardLightTheme: ThemeDefinition = { +const lightTheme: ThemeDefinition = { dark: false, colors: { background: tokens.backgroundColorBase, @@ -25,10 +25,10 @@ const ocelotStandardLightTheme: ThemeDefinition = { }, } -const ocelotStandardDarkTheme: ThemeDefinition = { +const darkTheme: ThemeDefinition = { dark: true, colors: { - ...ocelotStandardLightTheme.colors, + ...lightTheme.colors, background: tokens.backgroundColorInverse, surface: tokens.backgroundColorInverseSoft, }, @@ -45,11 +45,10 @@ export default (i18n: I18n, NonNullable, stri }, ssr: true, theme: { - defaultTheme: 'ocelotStandardLightTheme', - // defaultTheme: 'ocelotStandardDarkTheme', + defaultTheme: 'light', themes: { - ocelotStandardLightTheme, - ocelotStandardDarkTheme, + light: lightTheme, + dark: darkTheme, }, }, }) diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue index 63dca3d42..ed79c0967 100644 --- a/frontend/src/components/menu/TopMenu.vue +++ b/frontend/src/components/menu/TopMenu.vue @@ -1,3 +1,4 @@ +