add light mode

This commit is contained in:
Gregor Vostrak
2025-03-28 14:00:19 +01:00
parent 7339b79e35
commit df2fe1da1e
124 changed files with 579 additions and 369 deletions

View File

@@ -4,6 +4,7 @@ import typography from '@tailwindcss/typography';
/** @type {import("tailwindcss").Config} */
export default {
darkMode: 'selector',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
@@ -14,8 +15,8 @@ export default {
theme: {
extend: {
boxShadow: {
'card': '0 4px 7px 0px rgb(0 0 0 / 30%)',
'dropdown': '0 4px 7px 0px rgb(0 0 0 / 40%)',
'card': 'var(--theme-shadow-card)',
'dropdown': 'var(--theme-shadow-dropdown)',
},
containers: {
'2xs': '16rem',
@@ -24,7 +25,7 @@ export default {
sans: ['Outfit', ...defaultTheme.fontFamily.sans],
},
colors: {
'ring': 'rgba(255,255,255,0.5)',
'ring': 'var(--theme-color-ring)',
'primary': 'var(--color-bg-primary)',
'secondary': 'var(--color-bg-secondary)',
'tertiary': 'var(--color-bg-tertiary)',
@@ -40,6 +41,7 @@ export default {
'default-background': 'var(--theme-color-default-background)',
'default-background-separator':
'var(--theme-color-default-background-separator)',
'row-background': 'var(--theme-color-row-background)',
'card-background': 'var(--theme-color-card-background)',
'card-background-active':
'var(--theme-color-card-background-active)',
@@ -48,36 +50,44 @@ export default {
'card-border': 'var(--theme-color-card-border)',
'card-border-active': 'var(--theme-color-card-border-active)',
'muted': 'var(--theme-color-muted-text)',
'icon-default': 'var(--theme-color-icon-default)',
'tab-background': 'var(--theme-color-tab-background)',
'tab-background-active':
'var(--theme-color-tab-background-active)',
'tab-border': 'var(--theme-color-tab-border)',
'icon-default': 'var(--theme-color-icon-default)',
'icon-active': 'var(--theme-color-icon-active)',
'menu-active': 'var(--theme-color-menu-active)',
'input-border': 'var(--theme-color-input-border)',
'input-border-active': 'var(--color-input-border-active)',
'input-background': 'var(--theme-color-input-background)',
'button-secondary-background':
'var(--theme-color-card-background)',
'var(--theme-button-secondary-background)',
'button-secondary-background-hover':
'var(--theme-color-card-background-active)',
'var(--theme-button-secondary-background-active)',
'button-secondary-border': 'var(--theme-color-card-border)',
'row-separator': 'var(--theme-color-row-separator-background)',
'row-heading-background':
'var(--theme-color-row-heading-background)',
'row-heading-border': 'var(--theme-color-row-heading-border)',
'accent': {
'200': 'rgba(var(--color-accent-quaternary), <alpha-value>)',
'300': 'rgba(var(--color-accent-tertiary), <alpha-value>)',
'400': 'rgba(var(--color-accent-secondary), <alpha-value>)',
'500': 'rgba(var(--color-accent-primary), <alpha-value>)',
'600': 'rgba(2, 132, 199, <alpha-value>)',
'700': 'rgba(3, 105, 161, <alpha-value>)',
'800': 'rgba(7, 89, 133, <alpha-value>)',
'900': 'rgba(12, 74, 110, <alpha-value>)',
'950': 'rgba(8, 47, 73, <alpha-value>)',
},
'50': 'rgba(var(--color-accent-50), <alpha-value>)',
'100': 'rgba(var(--color-accent-100), <alpha-value>)',
'200': 'rgba(var(--color-accent-200), <alpha-value>)',
'300': 'rgba(var(--color-accent-300), <alpha-value>)',
'400': 'rgba(var(--color-accent-400), <alpha-value>)',
'500': 'rgba(var(--color-accent-500), <alpha-value>)',
'600': 'rgba(var(--color-accent-600), <alpha-value>)',
'700': 'rgba(var(--color-accent-700), <alpha-value>)',
'800': 'rgba(var(--color-accent-800), <alpha-value>)',
'900': 'rgba(var(--color-accent-900), <alpha-value>)',
'950': 'rgba(var(--color-accent-950), <alpha-value>)', },
'button-primary-background': 'var(--theme-color-button-primary-background)',
'button-primary-background-hover':
'var(--theme-color-button-primary-background-hover)',
'button-primary-border': 'var(--theme-color-button-primary-border)',
'button-primary-text': 'var(--theme-color-button-primary-text)',
'input-select-active':'var(--theme-color-input-select-active)',
'input-select-active-hover':'var(--theme-color-input-select-active-hover)',
},
},
},