mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 08:12:17 +01:00
126 lines
5.7 KiB
JavaScript
126 lines
5.7 KiB
JavaScript
/**
|
|
* Shared Tailwind theme configuration for solidtime
|
|
* This configuration is used by both the main solidtime app and the desktop app
|
|
*
|
|
* Note: fontFamily is intentionally omitted here as it differs between apps:
|
|
* - Main app uses 'Inter'
|
|
* - Desktop app uses 'Outfit'
|
|
* Each app should override the fontFamily in their own config.
|
|
*/
|
|
export const solidtimeTheme = {
|
|
boxShadow: {
|
|
card: 'var(--theme-shadow-card)',
|
|
dropdown: 'var(--theme-shadow-dropdown)',
|
|
},
|
|
containers: {
|
|
'2xs': '16rem',
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.625rem', { lineHeight: '0.75rem' }],
|
|
xs: ['0.75rem', { lineHeight: '1rem' }],
|
|
sm: ['0.8125rem', { lineHeight: '1.125rem' }],
|
|
base: ['0.9375rem', { lineHeight: '1.375rem' }],
|
|
lg: ['1.125rem', { lineHeight: '1.5rem' }],
|
|
xl: ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
},
|
|
colors: {
|
|
ring: 'var(--ring)',
|
|
primary: {
|
|
DEFAULT: 'var(--primary)',
|
|
foreground: 'var(--primary-foreground)',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'var(--secondary)',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
tertiary: 'var(--color-bg-tertiary)',
|
|
quaternary: 'var(--color-bg-quaternary)',
|
|
background: 'var(--background)',
|
|
'text-primary': 'var(--color-text-primary)',
|
|
'text-secondary': 'var(--color-text-secondary)',
|
|
'text-tertiary': 'var(--color-text-tertiary)',
|
|
'text-quaternary': 'var(--color-text-quaternary)',
|
|
'border-primary': 'var(--color-border-primary)',
|
|
'border-secondary': 'var(--color-border-secondary)',
|
|
'border-tertiary': 'var(--color-border-tertiary)',
|
|
'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)',
|
|
'card-background-separator': 'var(--theme-color-card-background-separator)',
|
|
'card-border': 'var(--theme-color-card-border)',
|
|
'card-border-active': 'var(--theme-color-card-border-active)',
|
|
muted: {
|
|
DEFAULT: 'var(--muted)',
|
|
foreground: 'var(--muted-foreground)',
|
|
},
|
|
'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-button-secondary-background)',
|
|
'button-secondary-background-hover': '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: {
|
|
'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>)',
|
|
DEFAULT: 'var(--accent)',
|
|
foreground: 'var(--accent-foreground)',
|
|
},
|
|
'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)',
|
|
foreground: 'var(--foreground)',
|
|
card: {
|
|
DEFAULT: 'var(--card))',
|
|
foreground: 'var(--card-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'var(--popover)',
|
|
foreground: 'var(--popover-foreground)',
|
|
border: 'var(--popover-border)',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'var(--destructive-foreground)',
|
|
},
|
|
border: 'var(--border)',
|
|
input: 'var(--input)',
|
|
chart: {
|
|
'1': 'hsl(var(--chart-1))',
|
|
'2': 'hsl(var(--chart-2))',
|
|
'3': 'hsl(var(--chart-3))',
|
|
'4': 'hsl(var(--chart-4))',
|
|
'5': 'hsl(var(--chart-5))',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
};
|