yaak-mountain-loop/plugins/themes-yaak/src/themes/catppuccin.ts

import type { Theme } from '@yaakapp/api';

export const catppuccinFrappe: Theme = {
  id: 'catppuccin-frappe',
  label: 'Catppuccin Frappé',
  dark: true,
  base: {
    surface: 'hsl(231,19%,20%)',
    text: 'hsl(227,70%,87%)',
    textSubtle: 'hsl(228,29%,73%)',
    textSubtlest: 'hsl(227,17%,58%)',
    primary: 'hsl(277,59%,76%)',
    secondary: 'hsl(228,39%,80%)',
    info: 'hsl(222,74%,74%)',
    success: 'hsl(96,44%,68%)',
    notice: 'hsl(40,62%,73%)',
    warning: 'hsl(20,79%,70%)',
    danger: 'hsl(359,68%,71%)',
  },
  components: {
    dialog: {
      surface: 'hsl(240,21%,12%)',
    },
    sidebar: {
      surface: 'hsl(229,19%,23%)',
      border: 'hsl(229,19%,27%)',
    },
    appHeader: {
      surface: 'hsl(229,20%,17%)',
      border: 'hsl(229,20%,25%)',
    },
    responsePane: {
      surface: 'hsl(229,19%,23%)',
      border: 'hsl(229,19%,27%)',
    },
    button: {
      primary: 'hsl(277,59%,68%)',
      secondary: 'hsl(228,39%,72%)',
      info: 'hsl(222,74%,67%)',
      success: 'hsl(96,44%,61%)',
      notice: 'hsl(40,62%,66%)',
      warning: 'hsl(20,79%,63%)',
      danger: 'hsl(359,68%,64%)',
    },
  },
};

export const catppuccinMacchiato: Theme = {
  id: 'catppuccin-macchiato',
  label: 'Catppuccin Macchiato',
  dark: true,
  base: {
    surface: 'hsl(233,23%,15%)',
    text: 'hsl(227,68%,88%)',
    textSubtle: 'hsl(227,27%,72%)',
    textSubtlest: 'hsl(228,15%,57%)',
    primary: 'hsl(267,83%,80%)',
    secondary: 'hsl(228,39%,80%)',
    info: 'hsl(220,83%,75%)',
    success: 'hsl(105,48%,72%)',
    notice: 'hsl(40,70%,78%)',
    warning: 'hsl(21,86%,73%)',
    danger: 'hsl(351,74%,73%)',
  },
  components: {
    dialog: {
      surface: 'hsl(240,21%,12%)',
    },
    sidebar: {
      surface: 'hsl(232,23%,18%)',
      border: 'hsl(231,23%,22%)',
    },
    appHeader: {
      surface: 'hsl(236,23%,12%)',
      border: 'hsl(236,23%,21%)',
    },
    responsePane: {
      surface: 'hsl(232,23%,18%)',
      border: 'hsl(231,23%,22%)',
    },
    button: {
      primary: 'hsl(267,82%,72%)',
      secondary: 'hsl(228,39%,72%)',
      info: 'hsl(220,83%,68%)',
      success: 'hsl(105,48%,65%)',
      notice: 'hsl(40,70%,70%)',
      warning: 'hsl(21,86%,66%)',
      danger: 'hsl(351,74%,66%)',
    },
  },
};

export const catppuccinMocha: Theme = {
  id: 'catppuccin-mocha',
  label: 'Catppuccin Mocha',
  dark: true,
  base: {
    surface: 'hsl(240,21%,12%)',
    text: 'hsl(226,64%,88%)',
    textSubtle: 'hsl(228,24%,72%)',
    textSubtlest: 'hsl(230,13%,55%)',
    primary: 'hsl(267,83%,80%)',
    secondary: 'hsl(227,35%,80%)',
    info: 'hsl(217,92%,76%)',
    success: 'hsl(115,54%,76%)',
    notice: 'hsl(41,86%,83%)',
    warning: 'hsl(23,92%,75%)',
    danger: 'hsl(343,81%,75%)',
  },
  components: {
    dialog: {
      surface: 'hsl(240,21%,12%)',
    },
    sidebar: {
      surface: 'hsl(240,21%,15%)',
      border: 'hsl(240,21%,19%)',
    },
    appHeader: {
      surface: 'hsl(240,23%,9%)',
      border: 'hsl(240,22%,18%)',
    },
    responsePane: {
      surface: 'hsl(240,21%,15%)',
      border: 'hsl(240,21%,19%)',
    },
    button: {
      primary: 'hsl(267,67%,65%)',
      secondary: 'hsl(227,28%,64%)',
      info: 'hsl(217,74%,61%)',
      success: 'hsl(115,43%,61%)',
      notice: 'hsl(41,69%,66%)',
      warning: 'hsl(23,74%,60%)',
      danger: 'hsl(343,65%,60%)',
    },
  },
};

export const catppuccinLatte: Theme = {
  id: 'catppuccin-latte',
  label: 'Catppuccin Latte',
  dark: false,
  base: {
    surface: 'hsl(220,23%,95%)',
    text: 'hsl(234,16%,35%)',
    textSubtle: 'hsl(233,10%,47%)',
    textSubtlest: 'hsl(231,10%,59%)',
    primary: 'hsl(266,85%,58%)',
    secondary: 'hsl(233,10%,47%)',
    info: 'hsl(231,97%,72%)',
    success: 'hsl(183,74%,35%)',
    notice: 'hsl(35,77%,49%)',
    warning: 'hsl(22,99%,52%)',
    danger: 'hsl(355,76%,59%)',
  },
  components: {
    sidebar: {
      surface: 'hsl(220,22%,92%)',
      border: 'hsl(220,22%,87%)',
    },
    appHeader: {
      surface: 'hsl(220,21%,89%)',
      border: 'hsl(220,22%,87%)',
    },
  },
};