181 lines
9.5 KiB
CSS
181 lines
9.5 KiB
CSS
/*!Catppuccin Frappé*/
|
|
/*
|
|
* ProxMorph PDM Theme: Catppuccin Frappé
|
|
* Overrides the PWT Material Design tonal color system with Catppuccin Frappé palette
|
|
* Version: 1.0.0
|
|
* Author: ProxMorph / Catppuccin Community Palette
|
|
*
|
|
* ─── Catppuccin Frappé Palette ────────────────────────────────
|
|
* Mauve (accent): #ca9ee6 Blue: #8caaee
|
|
* Green: #a6d189 Red: #e78284
|
|
* Yellow: #e5c890 Pink: #f4b8e4
|
|
* Text: #c6d0f5 Base: #303446
|
|
* Surface0: #414559 Mantle: #292c3c
|
|
* Crust: #232634
|
|
*/
|
|
|
|
/* ===== Tonal Color Overrides ===== */
|
|
:root {
|
|
/* Primary — Catppuccin Frappé Mauve (#ca9ee6) tonal scale */
|
|
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-primary-99: rgb(252, 248, 255) !important;
|
|
--pwt-color-primary-95: rgb(240, 230, 252) !important;
|
|
--pwt-color-primary-90: rgb(228, 210, 248) !important;
|
|
--pwt-color-primary-80: rgb(202, 158, 230) !important;
|
|
--pwt-color-primary-70: rgb(178, 135, 208) !important;
|
|
--pwt-color-primary-60: rgb(152, 112, 185) !important;
|
|
--pwt-color-primary-50: rgb(128, 90, 162) !important;
|
|
--pwt-color-primary-40: rgb(105, 68, 138) !important;
|
|
--pwt-color-primary-30: rgb(82, 48, 115) !important;
|
|
--pwt-color-primary-20: rgb(60, 30, 92) !important;
|
|
--pwt-color-primary-15: rgb(48, 20, 76) !important;
|
|
--pwt-color-primary-10: rgb(36, 12, 60) !important;
|
|
--pwt-color-primary-5: rgb(22, 5, 42) !important;
|
|
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Secondary — Catppuccin Frappé Blue (#8caaee) tonal scale */
|
|
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-secondary-99: rgb(248, 250, 255) !important;
|
|
--pwt-color-secondary-95: rgb(222, 235, 255) !important;
|
|
--pwt-color-secondary-90: rgb(198, 218, 252) !important;
|
|
--pwt-color-secondary-80: rgb(155, 188, 240) !important;
|
|
--pwt-color-secondary-70: rgb(140, 170, 238) !important;
|
|
--pwt-color-secondary-60: rgb(112, 145, 212) !important;
|
|
--pwt-color-secondary-50: rgb(88, 120, 188) !important;
|
|
--pwt-color-secondary-40: rgb(66, 98, 162) !important;
|
|
--pwt-color-secondary-30: rgb(46, 76, 135) !important;
|
|
--pwt-color-secondary-20: rgb(28, 55, 108) !important;
|
|
--pwt-color-secondary-15: rgb(20, 42, 88) !important;
|
|
--pwt-color-secondary-10: rgb(12, 30, 68) !important;
|
|
--pwt-color-secondary-5: rgb(5, 16, 45) !important;
|
|
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Tertiary — Catppuccin Frappé Pink (#f4b8e4) tonal scale */
|
|
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-tertiary-99: rgb(255, 250, 253) !important;
|
|
--pwt-color-tertiary-95: rgb(255, 236, 248) !important;
|
|
--pwt-color-tertiary-90: rgb(252, 218, 240) !important;
|
|
--pwt-color-tertiary-80: rgb(244, 184, 228) !important;
|
|
--pwt-color-tertiary-70: rgb(222, 158, 205) !important;
|
|
--pwt-color-tertiary-60: rgb(198, 132, 182) !important;
|
|
--pwt-color-tertiary-50: rgb(172, 108, 158) !important;
|
|
--pwt-color-tertiary-40: rgb(148, 85, 135) !important;
|
|
--pwt-color-tertiary-30: rgb(122, 62, 110) !important;
|
|
--pwt-color-tertiary-20: rgb(96, 40, 86) !important;
|
|
--pwt-color-tertiary-15: rgb(78, 28, 70) !important;
|
|
--pwt-color-tertiary-10: rgb(60, 16, 54) !important;
|
|
--pwt-color-tertiary-5: rgb(40, 6, 35) !important;
|
|
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Success — Catppuccin Frappé Green (#a6d189) tonal scale */
|
|
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-success-99: rgb(248, 255, 245) !important;
|
|
--pwt-color-success-95: rgb(220, 252, 210) !important;
|
|
--pwt-color-success-90: rgb(192, 240, 178) !important;
|
|
--pwt-color-success-80: rgb(166, 209, 137) !important;
|
|
--pwt-color-success-70: rgb(142, 185, 115) !important;
|
|
--pwt-color-success-60: rgb(118, 162, 92) !important;
|
|
--pwt-color-success-50: rgb(95, 138, 72) !important;
|
|
--pwt-color-success-40: rgb(72, 115, 52) !important;
|
|
--pwt-color-success-30: rgb(52, 92, 35) !important;
|
|
--pwt-color-success-20: rgb(34, 70, 20) !important;
|
|
--pwt-color-success-15: rgb(24, 55, 12) !important;
|
|
--pwt-color-success-10: rgb(15, 42, 5) !important;
|
|
--pwt-color-success-5: rgb(6, 26, 0) !important;
|
|
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Error — Catppuccin Frappé Red (#e78284) tonal scale */
|
|
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-error-99: rgb(255, 248, 248) !important;
|
|
--pwt-color-error-95: rgb(255, 228, 228) !important;
|
|
--pwt-color-error-90: rgb(252, 205, 206) !important;
|
|
--pwt-color-error-80: rgb(242, 168, 170) !important;
|
|
--pwt-color-error-70: rgb(231, 130, 132) !important;
|
|
--pwt-color-error-60: rgb(208, 105, 108) !important;
|
|
--pwt-color-error-50: rgb(185, 82, 85) !important;
|
|
--pwt-color-error-40: rgb(160, 58, 62) !important;
|
|
--pwt-color-error-30: rgb(132, 38, 42) !important;
|
|
--pwt-color-error-20: rgb(105, 18, 22) !important;
|
|
--pwt-color-error-15: rgb(85, 8, 14) !important;
|
|
--pwt-color-error-10: rgb(65, 0, 6) !important;
|
|
--pwt-color-error-5: rgb(42, 0, 2) !important;
|
|
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Warning — Catppuccin Frappé Yellow (#e5c890) tonal scale */
|
|
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-warning-99: rgb(255, 252, 246) !important;
|
|
--pwt-color-warning-95: rgb(252, 242, 218) !important;
|
|
--pwt-color-warning-90: rgb(245, 232, 192) !important;
|
|
--pwt-color-warning-80: rgb(229, 200, 144) !important;
|
|
--pwt-color-warning-70: rgb(210, 180, 120) !important;
|
|
--pwt-color-warning-60: rgb(188, 158, 98) !important;
|
|
--pwt-color-warning-50: rgb(165, 135, 76) !important;
|
|
--pwt-color-warning-40: rgb(140, 112, 55) !important;
|
|
--pwt-color-warning-30: rgb(115, 90, 36) !important;
|
|
--pwt-color-warning-20: rgb(88, 68, 18) !important;
|
|
--pwt-color-warning-15: rgb(70, 54, 8) !important;
|
|
--pwt-color-warning-10: rgb(52, 40, 2) !important;
|
|
--pwt-color-warning-5: rgb(32, 24, 0) !important;
|
|
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Neutral — Catppuccin Frappé Background scale (base #303446) */
|
|
--pwt-color-neutral-100: rgb(198, 208, 245) !important;
|
|
--pwt-color-neutral-99: rgb(192, 202, 238) !important;
|
|
--pwt-color-neutral-95: rgb(180, 190, 222) !important;
|
|
--pwt-color-neutral-90: rgb(162, 172, 202) !important;
|
|
--pwt-color-neutral-80: rgb(140, 148, 178) !important;
|
|
--pwt-color-neutral-70: rgb(118, 126, 155) !important;
|
|
--pwt-color-neutral-60: rgb(98, 105, 132) !important;
|
|
--pwt-color-neutral-50: rgb(80, 86, 110) !important;
|
|
--pwt-color-neutral-40: rgb(65, 69, 89) !important;
|
|
--pwt-color-neutral-30: rgb(48, 52, 70) !important;
|
|
--pwt-color-neutral-20: rgb(35, 38, 52) !important;
|
|
--pwt-color-neutral-15: rgb(30, 32, 44) !important;
|
|
--pwt-color-neutral-10: rgb(24, 26, 36) !important;
|
|
--pwt-color-neutral-5: rgb(16, 17, 25) !important;
|
|
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Neutral Alt — Catppuccin Frappé Overlay tones */
|
|
--pwt-color-neutral-alt-100: rgb(198, 208, 245) !important;
|
|
--pwt-color-neutral-alt-99: rgb(192, 202, 240) !important;
|
|
--pwt-color-neutral-alt-95: rgb(182, 192, 225) !important;
|
|
--pwt-color-neutral-alt-90: rgb(164, 174, 208) !important;
|
|
--pwt-color-neutral-alt-80: rgb(142, 150, 182) !important;
|
|
--pwt-color-neutral-alt-70: rgb(120, 128, 158) !important;
|
|
--pwt-color-neutral-alt-60: rgb(100, 108, 135) !important;
|
|
--pwt-color-neutral-alt-50: rgb(82, 88, 112) !important;
|
|
--pwt-color-neutral-alt-40: rgb(66, 72, 92) !important;
|
|
--pwt-color-neutral-alt-30: rgb(50, 55, 74) !important;
|
|
--pwt-color-neutral-alt-20: rgb(36, 40, 55) !important;
|
|
--pwt-color-neutral-alt-15: rgb(30, 34, 46) !important;
|
|
--pwt-color-neutral-alt-10: rgb(24, 27, 38) !important;
|
|
--pwt-color-neutral-alt-5: rgb(16, 18, 26) !important;
|
|
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
|
}
|
|
--pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
|
|
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
|
|
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
|
|
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
|
|
--pwt-color-background: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
|
|
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
|
|
--pwt-color-shadow: var(--pwt-color-neutral-0) !important;
|
|
background: var(--pwt-color-neutral-10) !important;
|
|
color: var(--pwt-color-neutral-95) !important;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--pwt-color-neutral-10) !important;
|
|
}
|