app/config/theme.ts

interface Theme {
  dark: boolean
  colors: {
    /**
     * @see Cf. doc/colors.md pour le rôle de chaque couleur
     */
    // Global
    background: string
    'on-background': string
    surface: string
    'on-surface': string
    primary: string
    'on-primary': string
    'primary-alt': string
    'on-primary-alt': string
    secondary: string
    'on-secondary': string
    'secondary-alt': string
    'on-secondary-alt': string
    'neutral-strong': string
    'on-neutral-strong': string
    neutral: string
    'on-neutral': string
    'on-neutral--clickable': string
    'neutral-soft': string
    'on-neutral-soft': string
    'neutral-very-soft': string
    'on-neutral-very-soft': string
    danger: string
    'on-danger': string
    success: string
    'on-success': string
    warning: string
    'on-warning': string
    info: string
    'on-info': string

    // Special cases
    // TODO: voir ceux dont on peut se passer
    'x-create-btn': string
    'on-x-create-btn': string
  }
}

export const lightTheme: Theme = {
  dark: false,
  colors: {
    background: '#ecf0f5',
    'on-background': '#000000',

    surface: '#ffffff',
    'on-surface': '#000000',

    primary: '#00ad8e',
    'on-primary': '#ffffff',

    'primary-alt': '#a9e0d6',
    'on-primary-alt': '#777777',

    secondary: '#324150',
    'on-secondary': '#f5f5f5',

    'secondary-alt': '#2a3745',
    'on-secondary-alt': '#ffffff',

    'neutral-strong': '#777777',
    'on-neutral-strong': '#ecf0f5',

    neutral: '#e6e6e6',
    'on-neutral': '#666666',
    'on-neutral--clickable': '#00997d',

    'neutral-soft': '#f2f2f2',
    'on-neutral-soft': '#333333',

    'neutral-very-soft': '#ffffff',
    'on-neutral-very-soft': '#333333',

    // Content
    danger: '#f56954',
    'on-danger': '#ffffff',

    success: '#00a65a',
    'on-success': '#ffffff',

    warning: '#f39c12',
    'on-warning': '#ffffff',

    info: '#3c8dbc',
    'on-info': '#ffffff',

    'x-create-btn': '#f39c12',
    'on-x-create-btn': '#ffffff',
  },
}

export const darkTheme: Theme = {
  dark: true,
  colors: {
    background: '#1a1a1a',
    'on-background': '#ffffff',

    surface: '#262626',
    'on-surface': '#ffffff',

    primary: '#00ad8e',
    'on-primary': '#ffffff',

    'primary-alt': '#a9e0d6',
    'on-primary-alt': '#777777',

    secondary: '#324150',
    'on-secondary': '#f5f5f5',

    'secondary-alt': '#2c3a48',
    'on-secondary-alt': '#ffffff',

    'neutral-strong': '#595959',
    'on-neutral-strong': '#ecf0f5',

    neutral: '#324150',
    'on-neutral': '#cccccc',
    'on-neutral--clickable': '#a9e0d6',

    'neutral-soft': '#090c11',
    'on-neutral-soft': '#cccccc',

    'neutral-very-soft': '#333333',
    'on-neutral-very-soft': '#ecf0f5',

    // Content
    danger: '#f56954',
    'on-danger': '#ffffff',

    success: '#00a65a',
    'on-success': '#ffffff',

    warning: '#f39c12',
    'on-warning': '#ffffff',

    info: '#3c8dbc',
    'on-info': '#ffffff',

    'x-create-btn': '#f39c12',
    'on-x-create-btn': '#ffffff',
  },
}