Catppuccin Mocha theme for Skeleton UI

catppuccin_mocha.postcss

/*
  https://www.skeleton.dev
  https://github.com/catppuccin/catppuccin
*/
:root {
  /* =~= Theme Properties =~= */
  --theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --theme-font-color-base: var(--color-surface-980);
  --theme-font-color-dark: var(--color-surface-50);
  --theme-rounded-base: 8px;
  --theme-rounded-container: 12px;
  --theme-border-base: 0px;
  /* =~= Theme On-X Colors =~= */
  --on-primary: var(--color-surface-980);
  --on-secondary: var(--color-surface-980);
  --on-tertiary: var(--color-surface-980);
  --on-success: var(--color-surface-980);
  --on-warning: var(--color-surface-980);
  --on-error: var(--color-surface-980);
  --on-surface: var(--color-surface-50);
  /* =~= Theme Colors  =~= */
  /* primary | #cba6f7 | mauve */
  --color-primary-50: 247 242 254; /* ⬅ #f7f2fe */
  --color-primary-100: 245 237 253; /* ⬅ #f5edfd */
  --color-primary-200: 242 233 253; /* ⬅ #f2e9fd */
  --color-primary-300: 234 219 252; /* ⬅ #eadbfc */
  --color-primary-400: 219 193 249; /* ⬅ #dbc1f9 */
  --color-primary-500: 203 166 247; /* ⬅ #cba6f7 */
  --color-primary-600: 183 149 222; /* ⬅ #b795de */
  --color-primary-700: 152 125 185; /* ⬅ #987db9 */
  --color-primary-800: 122 100 148; /* ⬅ #7a6494 */
  --color-primary-900: 99 81 121; /* ⬅ #635179 */
  /* secondary | #94e2d5 | teal */
  --color-secondary-50: 239 251 249; /* ⬅ #effbf9 */
  --color-secondary-100: 234 249 247; /* ⬅ #eaf9f7 */
  --color-secondary-200: 228 248 245; /* ⬅ #e4f8f5 */
  --color-secondary-300: 212 243 238; /* ⬅ #d4f3ee */
  --color-secondary-400: 180 235 226; /* ⬅ #b4ebe2 */
  --color-secondary-500: 148 226 213; /* ⬅ #94e2d5 */
  --color-secondary-600: 133 203 192; /* ⬅ #85cbc0 */
  --color-secondary-700: 111 170 160; /* ⬅ #6faaa0 */
  --color-secondary-800: 89 136 128; /* ⬅ #598880 */
  --color-secondary-900: 73 111 104; /* ⬅ #496f68 */
  /* tertiary | #89b4fa | blue */
  --color-tertiary-50: 237 244 254; /* ⬅ #edf4fe */
  --color-tertiary-100: 231 240 254; /* ⬅ #e7f0fe */
  --color-tertiary-200: 226 236 254; /* ⬅ #e2ecfe */
  --color-tertiary-300: 208 225 253; /* ⬅ #d0e1fd */
  --color-tertiary-400: 172 203 252; /* ⬅ #accbfc */
  --color-tertiary-500: 137 180 250; /* ⬅ #89b4fa */
  --color-tertiary-600: 123 162 225; /* ⬅ #7ba2e1 */
  --color-tertiary-700: 103 135 188; /* ⬅ #6787bc */
  --color-tertiary-800: 82 108 150; /* ⬅ #526c96 */
  --color-tertiary-900: 67 88 123; /* ⬅ #43587b */
  /* success | #a6e3a1 | green */
  --color-success-50: 242 251 241; /* ⬅ #f2fbf1 */
  --color-success-100: 237 249 236; /* ⬅ #edf9ec */
  --color-success-200: 233 248 232; /* ⬅ #e9f8e8 */
  --color-success-300: 219 244 217; /* ⬅ #dbf4d9 */
  --color-success-400: 193 235 189; /* ⬅ #c1ebbd */
  --color-success-500: 166 227 161; /* ⬅ #a6e3a1 */
  --color-success-600: 149 204 145; /* ⬅ #95cc91 */
  --color-success-700: 125 170 121; /* ⬅ #7daa79 */
  --color-success-800: 100 136 97; /* ⬅ #648861 */
  --color-success-900: 81 111 79; /* ⬅ #516f4f */
  /* warning | #fab387 | peach */
  --color-warning-50: 254 244 237; /* ⬅ #fef4ed */
  --color-warning-100: 254 240 231; /* ⬅ #fef0e7 */
  --color-warning-200: 254 236 225; /* ⬅ #feece1 */
  --color-warning-300: 253 225 207; /* ⬅ #fde1cf */
  --color-warning-400: 252 202 171; /* ⬅ #fccaab */
  --color-warning-500: 250 179 135; /* ⬅ #fab387 */
  --color-warning-600: 225 161 122; /* ⬅ #e1a17a */
  --color-warning-700: 188 134 101; /* ⬅ #bc8665 */
  --color-warning-800: 150 107 81; /* ⬅ #966b51 */
  --color-warning-900: 123 88 66; /* ⬅ #7b5842 */
  /* error | #f38ba8 | red */
  --color-error-50: 253 238 242; /* ⬅ #fdeef2 */
  --color-error-100: 253 232 238; /* ⬅ #fde8ee */
  --color-error-200: 252 226 233; /* ⬅ #fce2e9 */
  --color-error-300: 250 209 220; /* ⬅ #fad1dc */
  --color-error-400: 247 174 194; /* ⬅ #f7aec2 */
  --color-error-500: 243 139 168; /* ⬅ #f38ba8 */
  --color-error-600: 219 125 151; /* ⬅ #db7d97 */
  --color-error-700: 182 104 126; /* ⬅ #b6687e */
  --color-error-800: 146 83 101; /* ⬅ #925365 */
  --color-error-900: 119 68 82; /* ⬅ #774452 */
  /* surface | various */
  --color-surface-50: 205 214 244; /* ⬅ #cdd6f4 | text */
  --color-surface-100: 186 194 222; /* ⬅ #bac2de | subtext1 */
  --color-surface-200: 166 173 200; /* ⬅ #a6adc8 | subtext0 */
  --color-surface-300: 147 153 178; /* ⬅ #9399b2 | overlay2 */
  --color-surface-400: 127 132 156; /* ⬅ #7f849c | overlay1 */
  --color-surface-500: 108 112 134; /* ⬅ #6c7086 | overlay0 */
  --color-surface-600: 88 91 112; /* ⬅ #585b70 | surface2 */
  --color-surface-700: 69 71 90; /* ⬅ #45475a | surface1 */
  --color-surface-800: 49 50 68; /* ⬅ #313244 | surface0 */
  --color-surface-900: 30 30 46; /* ⬅ #1e1e2e | base */
  --color-surface-950: 24, 24, 37; /* ⬅ #181825 | mantle */
  --color-surface-980: 17, 17, 27; /* ⬅ #11111b | crust */
}