Initial commit — ProxMorph with TheRaiwy Dark cyber theme
This commit is contained in:
TheRaiwy
@@ -0,0 +1,215 @@
|
||||
/*!ProxMorph PDM Base*/
|
||||
/*
|
||||
* ProxMorph PDM Base Styles
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* Shared component-level styling applied whenever ANY ProxMorph PDM theme
|
||||
* is active. Overrides the default PWt shape/corner/shadow tokens to
|
||||
* give rounded corners, better elevation shadows, and polished component
|
||||
* appearance.
|
||||
*
|
||||
* This file does NOT set colors — colors come from theme-specific CSS.
|
||||
*/
|
||||
|
||||
/* ===== Shape & Corner Overrides ===== */
|
||||
:root {
|
||||
/* Global shape tokens — increase roundness */
|
||||
--pwt-shape-corner-none: 0px !important;
|
||||
--pwt-shape-corner-extra-small: 4px !important;
|
||||
--pwt-shape-corner-small: 8px !important;
|
||||
--pwt-shape-corner-medium: 12px !important;
|
||||
--pwt-shape-corner-large: 16px !important;
|
||||
--pwt-shape-corner-extra-large: 24px !important;
|
||||
|
||||
/* Component-specific corner shapes */
|
||||
--pwt-button-corner-shape: 8px !important;
|
||||
--pwt-card-corner-shape: 12px !important;
|
||||
--pwt-dialog-corner-shape: 12px !important;
|
||||
--pwt-input-corner-shape: 8px !important;
|
||||
--pwt-fab-corner-shape: 16px !important;
|
||||
--pwt-progress-corner-shape: 8px !important;
|
||||
--pwt-nav-link-corner-shape: 8px !important;
|
||||
--pwt-nav-pills-corner-shape: 8px !important;
|
||||
--pwt-tooltip-corner-shape: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Panel Styling ===== */
|
||||
.pwt-panel {
|
||||
border-radius: 12px !important;
|
||||
overflow: clip !important; /* clip (not hidden) preserves min-width:auto for correct flex wrapping */
|
||||
}
|
||||
|
||||
.pwt-panel-header {
|
||||
border-radius: 12px 12px 0 0 !important;
|
||||
}
|
||||
|
||||
/* ===== Shadow Enhancements ===== */
|
||||
.pwt-shadow2 {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
/* ===== Dialog Styling ===== */
|
||||
dialog,
|
||||
.pwt-dialog:not(.pwt-dropdown) {
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ===== Button Enhancements ===== */
|
||||
.pwt-button {
|
||||
border-radius: 8px !important;
|
||||
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
|
||||
}
|
||||
|
||||
.pwt-button:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.pwt-button.rounded,
|
||||
.pwt-button.circle {
|
||||
border-radius: 10rem !important;
|
||||
}
|
||||
|
||||
/* Segmented buttons: rounded ends only */
|
||||
.pwt-segmented-button {
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.pwt-segmented-button > .pwt-button {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.pwt-segmented-button > .pwt-button:first-child {
|
||||
border-radius: 8px 0 0 8px !important;
|
||||
}
|
||||
|
||||
.pwt-segmented-button > .pwt-button:last-child {
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
}
|
||||
|
||||
/* FAB */
|
||||
.pwt-fab {
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ===== Input / Form Enhancements ===== */
|
||||
.pwt-input {
|
||||
border-radius: 8px !important;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
|
||||
}
|
||||
|
||||
.pwt-input:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(var(--pwt-color-primary-80), 0.3) !important;
|
||||
}
|
||||
|
||||
.pwt-textarea {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.pwt-input-display {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Card Styling ===== */
|
||||
.pwt-card {
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ===== Navigation ===== */
|
||||
.pwt-nav-link {
|
||||
border-radius: 8px !important;
|
||||
transition: background-color 0.15s ease !important;
|
||||
}
|
||||
|
||||
.pwt-nav-menu {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Datatable Enhancements ===== */
|
||||
.pwt-datatable {
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.pwt-datatable-header {
|
||||
border-radius: 8px 8px 0 0 !important;
|
||||
}
|
||||
|
||||
/* ===== Menu / Dropdown ===== */
|
||||
.pwt-submenu {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.pwt-dropdown {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ===== List / List Tile ===== */
|
||||
.pwt-list {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.pwt-list-tile {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Meter / Progress ===== */
|
||||
.pwt-meter {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Switch ===== */
|
||||
.pwt-switch {
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
/* ===== Tooltips ===== */
|
||||
[class*="pwt-tooltip"] {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== Scrollbar Styling ===== */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px !important;
|
||||
background: rgba(128, 128, 128, 0.4) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(128, 128, 128, 0.6) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo tinting (dark themes) ===== */
|
||||
.pwt-dark-mode img[src*="proxmox_logo"] {
|
||||
filter: brightness(0.9) !important;
|
||||
}
|
||||
|
||||
/* ===== Smooth transitions for theme switching ===== */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-property: background-color, border-color, color, fill, stroke, box-shadow !important;
|
||||
transition-duration: 0.15s !important;
|
||||
transition-timing-function: ease !important;
|
||||
}
|
||||
|
||||
/* Restore tab indicator slide animation (needs left/width/inset transitions) */
|
||||
.pwt-tab-active-indicator {
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
/*!Blue Slate*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Blue Slate
|
||||
* Overrides the PWT Material Design tonal color system with Blue Slate palette
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* ─── Blue Slate Palette ────────────────────────────────────────
|
||||
* Accent: #5294e2 Text: #d3dae3
|
||||
* Base: #2b2e37 Surface: #383c4a
|
||||
* Elevated: #404552
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — Blue Slate (#5294e2) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 252, 255) !important;
|
||||
--pwt-color-primary-95: rgb(222, 240, 255) !important;
|
||||
--pwt-color-primary-90: rgb(195, 225, 252) !important;
|
||||
--pwt-color-primary-80: rgb(140, 192, 238) !important;
|
||||
--pwt-color-primary-70: rgb(82, 148, 226) !important;
|
||||
--pwt-color-primary-60: rgb(60, 125, 205) !important;
|
||||
--pwt-color-primary-50: rgb(42, 105, 182) !important;
|
||||
--pwt-color-primary-40: rgb(28, 85, 158) !important;
|
||||
--pwt-color-primary-30: rgb(16, 68, 132) !important;
|
||||
--pwt-color-primary-20: rgb(6, 50, 105) !important;
|
||||
--pwt-color-primary-15: rgb(2, 40, 85) !important;
|
||||
--pwt-color-primary-10: rgb(0, 28, 65) !important;
|
||||
--pwt-color-primary-5: rgb(0, 16, 42) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Slate (#7c818c) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 250, 252) !important;
|
||||
--pwt-color-secondary-95: rgb(228, 232, 238) !important;
|
||||
--pwt-color-secondary-90: rgb(211, 218, 227) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 186, 198) !important;
|
||||
--pwt-color-secondary-70: rgb(148, 155, 168) !important;
|
||||
--pwt-color-secondary-60: rgb(124, 129, 140) !important;
|
||||
--pwt-color-secondary-50: rgb(100, 105, 118) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 82, 95) !important;
|
||||
--pwt-color-secondary-30: rgb(56, 60, 74) !important;
|
||||
--pwt-color-secondary-20: rgb(43, 46, 55) !important;
|
||||
--pwt-color-secondary-15: rgb(36, 38, 48) !important;
|
||||
--pwt-color-secondary-10: rgb(28, 30, 38) !important;
|
||||
--pwt-color-secondary-5: rgb(18, 18, 25) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Muted Purple (#8c7ec8) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(252, 250, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(235, 228, 255) !important;
|
||||
--pwt-color-tertiary-90: rgb(218, 208, 248) !important;
|
||||
--pwt-color-tertiary-80: rgb(178, 165, 228) !important;
|
||||
--pwt-color-tertiary-70: rgb(140, 126, 200) !important;
|
||||
--pwt-color-tertiary-60: rgb(115, 102, 178) !important;
|
||||
--pwt-color-tertiary-50: rgb(92, 80, 155) !important;
|
||||
--pwt-color-tertiary-40: rgb(72, 60, 132) !important;
|
||||
--pwt-color-tertiary-30: rgb(52, 42, 108) !important;
|
||||
--pwt-color-tertiary-20: rgb(36, 28, 85) !important;
|
||||
--pwt-color-tertiary-15: rgb(28, 20, 70) !important;
|
||||
--pwt-color-tertiary-10: rgb(20, 12, 55) !important;
|
||||
--pwt-color-tertiary-5: rgb(12, 5, 35) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(242, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 212) !important;
|
||||
--pwt-color-success-90: rgb(148, 248, 172) !important;
|
||||
--pwt-color-success-80: rgb(88, 225, 120) !important;
|
||||
--pwt-color-success-70: rgb(50, 195, 85) !important;
|
||||
--pwt-color-success-60: rgb(32, 168, 65) !important;
|
||||
--pwt-color-success-50: rgb(18, 140, 48) !important;
|
||||
--pwt-color-success-40: rgb(6, 115, 35) !important;
|
||||
--pwt-color-success-30: rgb(0, 90, 22) !important;
|
||||
--pwt-color-success-20: rgb(0, 66, 14) !important;
|
||||
--pwt-color-success-15: rgb(0, 50, 8) !important;
|
||||
--pwt-color-success-10: rgb(0, 36, 4) !important;
|
||||
--pwt-color-success-5: rgb(0, 22, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error */
|
||||
--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(255, 200, 200) !important;
|
||||
--pwt-color-error-80: rgb(255, 148, 148) !important;
|
||||
--pwt-color-error-70: rgb(248, 98, 98) !important;
|
||||
--pwt-color-error-60: rgb(225, 65, 65) !important;
|
||||
--pwt-color-error-50: rgb(198, 42, 42) !important;
|
||||
--pwt-color-error-40: rgb(168, 22, 22) !important;
|
||||
--pwt-color-error-30: rgb(138, 8, 8) !important;
|
||||
--pwt-color-error-20: rgb(105, 2, 2) !important;
|
||||
--pwt-color-error-15: rgb(82, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(62, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(40, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 245) !important;
|
||||
--pwt-color-warning-95: rgb(255, 242, 205) !important;
|
||||
--pwt-color-warning-90: rgb(255, 228, 160) !important;
|
||||
--pwt-color-warning-80: rgb(248, 205, 100) !important;
|
||||
--pwt-color-warning-70: rgb(235, 175, 45) !important;
|
||||
--pwt-color-warning-60: rgb(210, 152, 25) !important;
|
||||
--pwt-color-warning-50: rgb(182, 128, 10) !important;
|
||||
--pwt-color-warning-40: rgb(155, 105, 0) !important;
|
||||
--pwt-color-warning-30: rgb(125, 82, 0) !important;
|
||||
--pwt-color-warning-20: rgb(95, 60, 0) !important;
|
||||
--pwt-color-warning-15: rgb(72, 45, 0) !important;
|
||||
--pwt-color-warning-10: rgb(52, 32, 0) !important;
|
||||
--pwt-color-warning-5: rgb(32, 18, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Blue Slate scale */
|
||||
--pwt-color-neutral-100: rgb(211, 218, 227) !important;
|
||||
--pwt-color-neutral-99: rgb(205, 212, 222) !important;
|
||||
--pwt-color-neutral-95: rgb(188, 196, 208) !important;
|
||||
--pwt-color-neutral-90: rgb(168, 176, 190) !important;
|
||||
--pwt-color-neutral-80: rgb(145, 152, 168) !important;
|
||||
--pwt-color-neutral-70: rgb(124, 129, 140) !important;
|
||||
--pwt-color-neutral-60: rgb(100, 105, 118) !important;
|
||||
--pwt-color-neutral-50: rgb(78, 82, 95) !important;
|
||||
--pwt-color-neutral-40: rgb(64, 69, 82) !important;
|
||||
--pwt-color-neutral-30: rgb(56, 60, 74) !important;
|
||||
--pwt-color-neutral-20: rgb(43, 46, 55) !important;
|
||||
--pwt-color-neutral-15: rgb(36, 38, 48) !important;
|
||||
--pwt-color-neutral-10: rgb(28, 30, 38) !important;
|
||||
--pwt-color-neutral-5: rgb(18, 18, 25) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(211, 218, 227) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(208, 215, 225) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(192, 200, 212) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(172, 180, 195) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(148, 155, 172) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(126, 132, 148) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(105, 110, 125) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(82, 88, 102) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(65, 70, 85) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(50, 55, 68) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(38, 42, 52) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(30, 34, 44) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(22, 25, 34) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(14, 15, 22) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
/*!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;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/*!Catppuccin Latte*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Catppuccin Latte (Light)
|
||||
* Overrides the PWT Material Design tonal color system with Catppuccin Latte palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Catppuccin Community Palette
|
||||
*
|
||||
* ─── Catppuccin Latte Palette (Light) ─────────────────────────
|
||||
* Mauve (accent): #8839ef Blue: #1e66f5
|
||||
* Green: #40a02b Red: #d20f39
|
||||
* Yellow: #df8e1d Pink: #ea76cb
|
||||
* Text: #4c4f69 Base: #eff1f5
|
||||
* Surface0: #ccd0da Mantle: #e6e9ef
|
||||
* Crust: #dce0e8
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Catppuccin Latte Mauve (#8839ef) 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, 228, 255) !important;
|
||||
--pwt-color-primary-90: rgb(225, 205, 255) !important;
|
||||
--pwt-color-primary-80: rgb(195, 162, 248) !important;
|
||||
--pwt-color-primary-70: rgb(165, 120, 240) !important;
|
||||
--pwt-color-primary-60: rgb(136, 57, 239) !important;
|
||||
--pwt-color-primary-50: rgb(115, 38, 210) !important;
|
||||
--pwt-color-primary-40: rgb(95, 25, 185) !important;
|
||||
--pwt-color-primary-30: rgb(75, 15, 155) !important;
|
||||
--pwt-color-primary-20: rgb(56, 8, 125) !important;
|
||||
--pwt-color-primary-15: rgb(44, 4, 102) !important;
|
||||
--pwt-color-primary-10: rgb(32, 0, 80) !important;
|
||||
--pwt-color-primary-5: rgb(18, 0, 52) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Catppuccin Latte Blue (#1e66f5) 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(218, 232, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(185, 210, 255) !important;
|
||||
--pwt-color-secondary-80: rgb(130, 175, 252) !important;
|
||||
--pwt-color-secondary-70: rgb(75, 138, 248) !important;
|
||||
--pwt-color-secondary-60: rgb(30, 102, 245) !important;
|
||||
--pwt-color-secondary-50: rgb(18, 82, 218) !important;
|
||||
--pwt-color-secondary-40: rgb(10, 64, 188) !important;
|
||||
--pwt-color-secondary-30: rgb(4, 48, 155) !important;
|
||||
--pwt-color-secondary-20: rgb(0, 34, 122) !important;
|
||||
--pwt-color-secondary-15: rgb(0, 26, 100) !important;
|
||||
--pwt-color-secondary-10: rgb(0, 18, 78) !important;
|
||||
--pwt-color-secondary-5: rgb(0, 10, 50) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Catppuccin Latte Pink (#ea76cb) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 253) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 228, 245) !important;
|
||||
--pwt-color-tertiary-90: rgb(252, 200, 235) !important;
|
||||
--pwt-color-tertiary-80: rgb(245, 155, 215) !important;
|
||||
--pwt-color-tertiary-70: rgb(240, 118, 203) !important;
|
||||
--pwt-color-tertiary-60: rgb(215, 88, 178) !important;
|
||||
--pwt-color-tertiary-50: rgb(188, 62, 152) !important;
|
||||
--pwt-color-tertiary-40: rgb(160, 40, 128) !important;
|
||||
--pwt-color-tertiary-30: rgb(132, 22, 105) !important;
|
||||
--pwt-color-tertiary-20: rgb(102, 8, 80) !important;
|
||||
--pwt-color-tertiary-15: rgb(82, 2, 65) !important;
|
||||
--pwt-color-tertiary-10: rgb(62, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(40, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Catppuccin Latte Green (#40a02b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(248, 255, 246) !important;
|
||||
--pwt-color-success-95: rgb(218, 252, 208) !important;
|
||||
--pwt-color-success-90: rgb(180, 242, 168) !important;
|
||||
--pwt-color-success-80: rgb(120, 215, 105) !important;
|
||||
--pwt-color-success-70: rgb(80, 185, 65) !important;
|
||||
--pwt-color-success-60: rgb(64, 160, 43) !important;
|
||||
--pwt-color-success-50: rgb(48, 138, 28) !important;
|
||||
--pwt-color-success-40: rgb(35, 115, 16) !important;
|
||||
--pwt-color-success-30: rgb(24, 92, 8) !important;
|
||||
--pwt-color-success-20: rgb(14, 70, 2) !important;
|
||||
--pwt-color-success-15: rgb(8, 55, 0) !important;
|
||||
--pwt-color-success-10: rgb(4, 40, 0) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Catppuccin Latte Red (#d20f39) 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, 222, 226) !important;
|
||||
--pwt-color-error-90: rgb(255, 190, 198) !important;
|
||||
--pwt-color-error-80: rgb(242, 135, 148) !important;
|
||||
--pwt-color-error-70: rgb(228, 75, 98) !important;
|
||||
--pwt-color-error-60: rgb(210, 15, 57) !important;
|
||||
--pwt-color-error-50: rgb(185, 8, 45) !important;
|
||||
--pwt-color-error-40: rgb(158, 2, 34) !important;
|
||||
--pwt-color-error-30: rgb(130, 0, 25) !important;
|
||||
--pwt-color-error-20: rgb(100, 0, 16) !important;
|
||||
--pwt-color-error-15: rgb(80, 0, 10) !important;
|
||||
--pwt-color-error-10: rgb(60, 0, 5) !important;
|
||||
--pwt-color-error-5: rgb(38, 0, 2) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Catppuccin Latte Yellow (#df8e1d) 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(255, 240, 210) !important;
|
||||
--pwt-color-warning-90: rgb(252, 225, 170) !important;
|
||||
--pwt-color-warning-80: rgb(242, 190, 105) !important;
|
||||
--pwt-color-warning-70: rgb(230, 158, 52) !important;
|
||||
--pwt-color-warning-60: rgb(223, 142, 29) !important;
|
||||
--pwt-color-warning-50: rgb(195, 120, 15) !important;
|
||||
--pwt-color-warning-40: rgb(165, 98, 6) !important;
|
||||
--pwt-color-warning-30: rgb(135, 78, 0) !important;
|
||||
--pwt-color-warning-20: rgb(105, 58, 0) !important;
|
||||
--pwt-color-warning-15: rgb(85, 45, 0) !important;
|
||||
--pwt-color-warning-10: rgb(62, 32, 0) !important;
|
||||
--pwt-color-warning-5: rgb(38, 18, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Catppuccin Latte Background scale (base #eff1f5) */
|
||||
--pwt-color-neutral-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-99: rgb(250, 251, 254) !important;
|
||||
--pwt-color-neutral-95: rgb(239, 241, 245) !important;
|
||||
--pwt-color-neutral-90: rgb(230, 233, 239) !important;
|
||||
--pwt-color-neutral-80: rgb(220, 224, 232) !important;
|
||||
--pwt-color-neutral-70: rgb(204, 208, 218) !important;
|
||||
--pwt-color-neutral-60: rgb(172, 176, 190) !important;
|
||||
--pwt-color-neutral-50: rgb(140, 143, 161) !important;
|
||||
--pwt-color-neutral-40: rgb(108, 111, 133) !important;
|
||||
--pwt-color-neutral-30: rgb(92, 95, 119) !important;
|
||||
--pwt-color-neutral-20: rgb(76, 79, 105) !important;
|
||||
--pwt-color-neutral-15: rgb(64, 66, 88) !important;
|
||||
--pwt-color-neutral-10: rgb(50, 52, 72) !important;
|
||||
--pwt-color-neutral-5: rgb(35, 36, 52) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Catppuccin Latte Overlay tones */
|
||||
--pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(250, 251, 254) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(242, 244, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(232, 235, 242) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(215, 218, 228) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(188, 192, 204) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(156, 160, 176) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(124, 128, 148) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(96, 100, 120) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(76, 80, 100) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(58, 62, 82) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(46, 48, 68) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(34, 36, 54) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(22, 24, 38) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (light surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
|
||||
--pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
|
||||
--pwt-color-primary: var(--pwt-color-primary-40) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-90) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
|
||||
background: var(--pwt-color-neutral-95) !important;
|
||||
color: var(--pwt-color-neutral-10) !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo — swap to dark variant for light background ===== */
|
||||
img[src*="proxmox_logo_white"] {
|
||||
content: url("/images/proxmox_logo.svg") !important;
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
/*!Catppuccin Macchiato*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Catppuccin Macchiato
|
||||
* Overrides the PWT Material Design tonal color system with Catppuccin Macchiato palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Catppuccin Community Palette
|
||||
*
|
||||
* ─── Catppuccin Macchiato Palette ─────────────────────────────
|
||||
* Mauve (accent): #c6a0f6 Blue: #8aadf4
|
||||
* Green: #a6da95 Red: #ed8796
|
||||
* Yellow: #eed49f Pink: #f5bde6
|
||||
* Text: #cad3f5 Base: #24273a
|
||||
* Surface0: #363a4f Mantle: #1e2030
|
||||
* Crust: #181926
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Catppuccin Macchiato Mauve (#c6a0f6) 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, 228, 254) !important;
|
||||
--pwt-color-primary-90: rgb(225, 208, 250) !important;
|
||||
--pwt-color-primary-80: rgb(198, 160, 246) !important;
|
||||
--pwt-color-primary-70: rgb(175, 138, 225) !important;
|
||||
--pwt-color-primary-60: rgb(150, 114, 200) !important;
|
||||
--pwt-color-primary-50: rgb(126, 92, 178) !important;
|
||||
--pwt-color-primary-40: rgb(102, 70, 152) !important;
|
||||
--pwt-color-primary-30: rgb(80, 48, 128) !important;
|
||||
--pwt-color-primary-20: rgb(58, 30, 102) !important;
|
||||
--pwt-color-primary-15: rgb(46, 20, 85) !important;
|
||||
--pwt-color-primary-10: rgb(35, 12, 68) !important;
|
||||
--pwt-color-primary-5: rgb(22, 5, 46) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Catppuccin Macchiato Blue (#8aadf4) 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, 236, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(198, 220, 254) !important;
|
||||
--pwt-color-secondary-80: rgb(158, 192, 248) !important;
|
||||
--pwt-color-secondary-70: rgb(138, 173, 244) !important;
|
||||
--pwt-color-secondary-60: rgb(112, 148, 218) !important;
|
||||
--pwt-color-secondary-50: rgb(88, 124, 192) !important;
|
||||
--pwt-color-secondary-40: rgb(66, 100, 166) !important;
|
||||
--pwt-color-secondary-30: rgb(46, 78, 138) !important;
|
||||
--pwt-color-secondary-20: rgb(28, 56, 110) !important;
|
||||
--pwt-color-secondary-15: rgb(20, 44, 90) !important;
|
||||
--pwt-color-secondary-10: rgb(12, 32, 70) !important;
|
||||
--pwt-color-secondary-5: rgb(5, 18, 46) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Catppuccin Macchiato Pink (#f5bde6) 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, 215, 242) !important;
|
||||
--pwt-color-tertiary-80: rgb(245, 189, 230) !important;
|
||||
--pwt-color-tertiary-70: rgb(225, 162, 208) !important;
|
||||
--pwt-color-tertiary-60: rgb(200, 136, 184) !important;
|
||||
--pwt-color-tertiary-50: rgb(175, 112, 160) !important;
|
||||
--pwt-color-tertiary-40: rgb(150, 88, 136) !important;
|
||||
--pwt-color-tertiary-30: rgb(124, 64, 112) !important;
|
||||
--pwt-color-tertiary-20: rgb(98, 42, 88) !important;
|
||||
--pwt-color-tertiary-15: rgb(80, 30, 72) !important;
|
||||
--pwt-color-tertiary-10: rgb(62, 18, 56) !important;
|
||||
--pwt-color-tertiary-5: rgb(42, 6, 36) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Catppuccin Macchiato Green (#a6da95) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(248, 255, 246) !important;
|
||||
--pwt-color-success-95: rgb(218, 252, 212) !important;
|
||||
--pwt-color-success-90: rgb(190, 242, 182) !important;
|
||||
--pwt-color-success-80: rgb(166, 218, 149) !important;
|
||||
--pwt-color-success-70: rgb(142, 195, 128) !important;
|
||||
--pwt-color-success-60: rgb(118, 172, 105) !important;
|
||||
--pwt-color-success-50: rgb(95, 148, 82) !important;
|
||||
--pwt-color-success-40: rgb(72, 125, 60) !important;
|
||||
--pwt-color-success-30: rgb(52, 100, 40) !important;
|
||||
--pwt-color-success-20: rgb(34, 76, 22) !important;
|
||||
--pwt-color-success-15: rgb(24, 60, 14) !important;
|
||||
--pwt-color-success-10: rgb(15, 45, 6) !important;
|
||||
--pwt-color-success-5: rgb(6, 28, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Catppuccin Macchiato Red (#ed8796) tonal scale */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 248, 249) !important;
|
||||
--pwt-color-error-95: rgb(255, 228, 232) !important;
|
||||
--pwt-color-error-90: rgb(252, 205, 212) !important;
|
||||
--pwt-color-error-80: rgb(245, 170, 180) !important;
|
||||
--pwt-color-error-70: rgb(237, 135, 150) !important;
|
||||
--pwt-color-error-60: rgb(215, 108, 125) !important;
|
||||
--pwt-color-error-50: rgb(192, 85, 102) !important;
|
||||
--pwt-color-error-40: rgb(168, 62, 78) !important;
|
||||
--pwt-color-error-30: rgb(140, 40, 56) !important;
|
||||
--pwt-color-error-20: rgb(112, 20, 36) !important;
|
||||
--pwt-color-error-15: rgb(92, 10, 25) !important;
|
||||
--pwt-color-error-10: rgb(70, 0, 15) !important;
|
||||
--pwt-color-error-5: rgb(46, 0, 6) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Catppuccin Macchiato Yellow (#eed49f) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 244, 222) !important;
|
||||
--pwt-color-warning-90: rgb(248, 236, 195) !important;
|
||||
--pwt-color-warning-80: rgb(238, 212, 159) !important;
|
||||
--pwt-color-warning-70: rgb(218, 192, 132) !important;
|
||||
--pwt-color-warning-60: rgb(195, 168, 106) !important;
|
||||
--pwt-color-warning-50: rgb(172, 145, 82) !important;
|
||||
--pwt-color-warning-40: rgb(148, 122, 60) !important;
|
||||
--pwt-color-warning-30: rgb(122, 98, 40) !important;
|
||||
--pwt-color-warning-20: rgb(95, 75, 22) !important;
|
||||
--pwt-color-warning-15: rgb(76, 58, 12) !important;
|
||||
--pwt-color-warning-10: rgb(56, 42, 4) !important;
|
||||
--pwt-color-warning-5: rgb(35, 26, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Catppuccin Macchiato Background scale (base #24273a) */
|
||||
--pwt-color-neutral-100: rgb(202, 211, 245) !important;
|
||||
--pwt-color-neutral-99: rgb(195, 204, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(182, 192, 225) !important;
|
||||
--pwt-color-neutral-90: rgb(164, 172, 205) !important;
|
||||
--pwt-color-neutral-80: rgb(142, 150, 180) !important;
|
||||
--pwt-color-neutral-70: rgb(120, 128, 158) !important;
|
||||
--pwt-color-neutral-60: rgb(100, 106, 135) !important;
|
||||
--pwt-color-neutral-50: rgb(82, 88, 112) !important;
|
||||
--pwt-color-neutral-40: rgb(54, 58, 79) !important;
|
||||
--pwt-color-neutral-30: rgb(36, 39, 58) !important;
|
||||
--pwt-color-neutral-20: rgb(30, 32, 48) !important;
|
||||
--pwt-color-neutral-15: rgb(24, 26, 38) !important;
|
||||
--pwt-color-neutral-10: rgb(18, 19, 30) !important;
|
||||
--pwt-color-neutral-5: rgb(12, 12, 20) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Catppuccin Macchiato Overlay tones */
|
||||
--pwt-color-neutral-alt-100: rgb(202, 211, 245) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(196, 206, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(184, 194, 228) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(166, 174, 208) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(144, 152, 184) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(122, 130, 160) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(102, 108, 138) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(84, 90, 115) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(56, 60, 82) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(38, 42, 62) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(30, 34, 50) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(25, 28, 40) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(19, 20, 32) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(12, 13, 22) !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;
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/*!Catppuccin Mocha Teal*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Catppuccin Mocha Teal
|
||||
* Overrides the PWT Material Design tonal color system with Catppuccin Mocha Teal palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Catppuccin Community Palette
|
||||
*
|
||||
* ─── Catppuccin Mocha Teal Palette ────────────────────────────
|
||||
* Teal (accent): #94e2d5 Blue: #89b4fa
|
||||
* Green: #a6e3a1 Red: #f38ba8
|
||||
* Yellow: #f9e2af Pink: #f5c2e7
|
||||
* Text: #cdd6f4 Base: #1e1e2e
|
||||
* Surface0: #313244 Mantle: #181825
|
||||
* Crust: #11111b
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Catppuccin Teal (#94e2d5) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(245, 254, 252) !important;
|
||||
--pwt-color-primary-95: rgb(220, 250, 245) !important;
|
||||
--pwt-color-primary-90: rgb(185, 242, 232) !important;
|
||||
--pwt-color-primary-80: rgb(148, 226, 213) !important;
|
||||
--pwt-color-primary-70: rgb(118, 198, 186) !important;
|
||||
--pwt-color-primary-60: rgb(88, 170, 160) !important;
|
||||
--pwt-color-primary-50: rgb(62, 145, 135) !important;
|
||||
--pwt-color-primary-40: rgb(38, 118, 110) !important;
|
||||
--pwt-color-primary-30: rgb(18, 92, 85) !important;
|
||||
--pwt-color-primary-20: rgb(4, 68, 62) !important;
|
||||
--pwt-color-primary-15: rgb(0, 54, 48) !important;
|
||||
--pwt-color-primary-10: rgb(0, 40, 36) !important;
|
||||
--pwt-color-primary-5: rgb(0, 25, 22) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Catppuccin Blue (#89b4fa) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 251, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(225, 238, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(200, 222, 255) !important;
|
||||
--pwt-color-secondary-80: rgb(160, 195, 250) !important;
|
||||
--pwt-color-secondary-70: rgb(137, 180, 250) !important;
|
||||
--pwt-color-secondary-60: rgb(110, 155, 220) !important;
|
||||
--pwt-color-secondary-50: rgb(88, 130, 195) !important;
|
||||
--pwt-color-secondary-40: rgb(68, 108, 170) !important;
|
||||
--pwt-color-secondary-30: rgb(48, 85, 142) !important;
|
||||
--pwt-color-secondary-20: rgb(32, 62, 112) !important;
|
||||
--pwt-color-secondary-15: rgb(24, 48, 92) !important;
|
||||
--pwt-color-secondary-10: rgb(16, 35, 72) !important;
|
||||
--pwt-color-secondary-5: rgb(8, 20, 48) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Catppuccin Pink (#f5c2e7) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 250, 254) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 238, 248) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 220, 240) !important;
|
||||
--pwt-color-tertiary-80: rgb(245, 194, 231) !important;
|
||||
--pwt-color-tertiary-70: rgb(225, 168, 210) !important;
|
||||
--pwt-color-tertiary-60: rgb(200, 140, 185) !important;
|
||||
--pwt-color-tertiary-50: rgb(175, 115, 162) !important;
|
||||
--pwt-color-tertiary-40: rgb(150, 90, 138) !important;
|
||||
--pwt-color-tertiary-30: rgb(125, 65, 112) !important;
|
||||
--pwt-color-tertiary-20: rgb(98, 42, 88) !important;
|
||||
--pwt-color-tertiary-15: rgb(80, 30, 72) !important;
|
||||
--pwt-color-tertiary-10: rgb(62, 18, 55) !important;
|
||||
--pwt-color-tertiary-5: rgb(42, 8, 38) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Catppuccin Green (#a6e3a1) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(245, 255, 244) !important;
|
||||
--pwt-color-success-95: rgb(215, 255, 212) !important;
|
||||
--pwt-color-success-90: rgb(185, 245, 182) !important;
|
||||
--pwt-color-success-80: rgb(166, 227, 161) !important;
|
||||
--pwt-color-success-70: rgb(140, 200, 136) !important;
|
||||
--pwt-color-success-60: rgb(115, 175, 112) !important;
|
||||
--pwt-color-success-50: rgb(90, 150, 88) !important;
|
||||
--pwt-color-success-40: rgb(68, 125, 65) !important;
|
||||
--pwt-color-success-30: rgb(48, 100, 45) !important;
|
||||
--pwt-color-success-20: rgb(30, 76, 28) !important;
|
||||
--pwt-color-success-15: rgb(20, 60, 18) !important;
|
||||
--pwt-color-success-10: rgb(12, 45, 10) !important;
|
||||
--pwt-color-success-5: rgb(5, 28, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Catppuccin Red (#f38ba8) tonal scale */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 249, 250) !important;
|
||||
--pwt-color-error-95: rgb(255, 232, 238) !important;
|
||||
--pwt-color-error-90: rgb(255, 210, 220) !important;
|
||||
--pwt-color-error-80: rgb(248, 165, 185) !important;
|
||||
--pwt-color-error-70: rgb(243, 139, 168) !important;
|
||||
--pwt-color-error-60: rgb(220, 110, 140) !important;
|
||||
--pwt-color-error-50: rgb(195, 85, 115) !important;
|
||||
--pwt-color-error-40: rgb(170, 60, 90) !important;
|
||||
--pwt-color-error-30: rgb(142, 38, 68) !important;
|
||||
--pwt-color-error-20: rgb(110, 18, 48) !important;
|
||||
--pwt-color-error-15: rgb(90, 8, 35) !important;
|
||||
--pwt-color-error-10: rgb(68, 0, 22) !important;
|
||||
--pwt-color-error-5: rgb(45, 0, 12) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Catppuccin Yellow (#f9e2af) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 253, 248) !important;
|
||||
--pwt-color-warning-95: rgb(255, 248, 225) !important;
|
||||
--pwt-color-warning-90: rgb(252, 240, 195) !important;
|
||||
--pwt-color-warning-80: rgb(249, 226, 175) !important;
|
||||
--pwt-color-warning-70: rgb(225, 200, 145) !important;
|
||||
--pwt-color-warning-60: rgb(200, 178, 118) !important;
|
||||
--pwt-color-warning-50: rgb(175, 155, 92) !important;
|
||||
--pwt-color-warning-40: rgb(148, 130, 68) !important;
|
||||
--pwt-color-warning-30: rgb(120, 105, 45) !important;
|
||||
--pwt-color-warning-20: rgb(92, 80, 25) !important;
|
||||
--pwt-color-warning-15: rgb(72, 62, 15) !important;
|
||||
--pwt-color-warning-10: rgb(52, 45, 5) !important;
|
||||
--pwt-color-warning-5: rgb(32, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Catppuccin Background scale */
|
||||
--pwt-color-neutral-100: rgb(205, 214, 244) !important;
|
||||
--pwt-color-neutral-99: rgb(198, 208, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(186, 194, 222) !important;
|
||||
--pwt-color-neutral-90: rgb(166, 173, 200) !important;
|
||||
--pwt-color-neutral-80: rgb(147, 153, 178) !important;
|
||||
--pwt-color-neutral-70: rgb(127, 132, 156) !important;
|
||||
--pwt-color-neutral-60: rgb(108, 112, 134) !important;
|
||||
--pwt-color-neutral-50: rgb(88, 91, 112) !important;
|
||||
--pwt-color-neutral-40: rgb(69, 71, 90) !important;
|
||||
--pwt-color-neutral-30: rgb(49, 50, 68) !important;
|
||||
--pwt-color-neutral-20: rgb(30, 30, 46) !important;
|
||||
--pwt-color-neutral-15: rgb(24, 24, 37) !important;
|
||||
--pwt-color-neutral-10: rgb(17, 17, 27) !important;
|
||||
--pwt-color-neutral-5: rgb(10, 10, 18) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Catppuccin Overlay tones */
|
||||
--pwt-color-neutral-alt-100: rgb(205, 214, 244) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(200, 210, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(186, 194, 222) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(166, 173, 200) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(147, 153, 178) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(127, 132, 156) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(108, 112, 134) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(88, 91, 112) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(69, 71, 90) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(49, 50, 68) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(30, 30, 46) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(24, 24, 37) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(17, 17, 27) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(10, 10, 18) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/*!Catppuccin Mocha*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Catppuccin Mocha
|
||||
* Overrides the PWT Material Design tonal color system with Catppuccin Mocha palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Catppuccin Community Palette
|
||||
*
|
||||
* ─── Catppuccin Mocha Palette ──────────────────────────────────
|
||||
* Mauve (accent): #cba6f7 Blue: #89b4fa
|
||||
* Green: #a6e3a1 Red: #f38ba8
|
||||
* Yellow: #f9e2af Pink: #f5c2e7
|
||||
* Text: #cdd6f4 Base: #1e1e2e
|
||||
* Surface0: #313244 Mantle: #181825
|
||||
* Crust: #11111b
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Catppuccin Mauve (#cba6f7) 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(242, 232, 255) !important;
|
||||
--pwt-color-primary-90: rgb(230, 215, 255) !important;
|
||||
--pwt-color-primary-80: rgb(203, 166, 247) !important;
|
||||
--pwt-color-primary-70: rgb(178, 140, 225) !important;
|
||||
--pwt-color-primary-60: rgb(152, 115, 200) !important;
|
||||
--pwt-color-primary-50: rgb(128, 92, 178) !important;
|
||||
--pwt-color-primary-40: rgb(105, 70, 155) !important;
|
||||
--pwt-color-primary-30: rgb(82, 50, 130) !important;
|
||||
--pwt-color-primary-20: rgb(60, 32, 105) !important;
|
||||
--pwt-color-primary-15: rgb(48, 22, 88) !important;
|
||||
--pwt-color-primary-10: rgb(38, 14, 72) !important;
|
||||
--pwt-color-primary-5: rgb(24, 6, 50) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Catppuccin Blue (#89b4fa) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 251, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(225, 238, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(200, 222, 255) !important;
|
||||
--pwt-color-secondary-80: rgb(160, 195, 250) !important;
|
||||
--pwt-color-secondary-70: rgb(137, 180, 250) !important;
|
||||
--pwt-color-secondary-60: rgb(110, 155, 220) !important;
|
||||
--pwt-color-secondary-50: rgb(88, 130, 195) !important;
|
||||
--pwt-color-secondary-40: rgb(68, 108, 170) !important;
|
||||
--pwt-color-secondary-30: rgb(48, 85, 142) !important;
|
||||
--pwt-color-secondary-20: rgb(32, 62, 112) !important;
|
||||
--pwt-color-secondary-15: rgb(24, 48, 92) !important;
|
||||
--pwt-color-secondary-10: rgb(16, 35, 72) !important;
|
||||
--pwt-color-secondary-5: rgb(8, 20, 48) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Catppuccin Pink (#f5c2e7) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 250, 254) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 238, 248) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 220, 240) !important;
|
||||
--pwt-color-tertiary-80: rgb(245, 194, 231) !important;
|
||||
--pwt-color-tertiary-70: rgb(225, 168, 210) !important;
|
||||
--pwt-color-tertiary-60: rgb(200, 140, 185) !important;
|
||||
--pwt-color-tertiary-50: rgb(175, 115, 162) !important;
|
||||
--pwt-color-tertiary-40: rgb(150, 90, 138) !important;
|
||||
--pwt-color-tertiary-30: rgb(125, 65, 112) !important;
|
||||
--pwt-color-tertiary-20: rgb(98, 42, 88) !important;
|
||||
--pwt-color-tertiary-15: rgb(80, 30, 72) !important;
|
||||
--pwt-color-tertiary-10: rgb(62, 18, 55) !important;
|
||||
--pwt-color-tertiary-5: rgb(42, 8, 38) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Catppuccin Green (#a6e3a1) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(245, 255, 244) !important;
|
||||
--pwt-color-success-95: rgb(215, 255, 212) !important;
|
||||
--pwt-color-success-90: rgb(185, 245, 182) !important;
|
||||
--pwt-color-success-80: rgb(166, 227, 161) !important;
|
||||
--pwt-color-success-70: rgb(140, 200, 136) !important;
|
||||
--pwt-color-success-60: rgb(115, 175, 112) !important;
|
||||
--pwt-color-success-50: rgb(90, 150, 88) !important;
|
||||
--pwt-color-success-40: rgb(68, 125, 65) !important;
|
||||
--pwt-color-success-30: rgb(48, 100, 45) !important;
|
||||
--pwt-color-success-20: rgb(30, 76, 28) !important;
|
||||
--pwt-color-success-15: rgb(20, 60, 18) !important;
|
||||
--pwt-color-success-10: rgb(12, 45, 10) !important;
|
||||
--pwt-color-success-5: rgb(5, 28, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Catppuccin Red (#f38ba8) tonal scale */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 249, 250) !important;
|
||||
--pwt-color-error-95: rgb(255, 232, 238) !important;
|
||||
--pwt-color-error-90: rgb(255, 210, 220) !important;
|
||||
--pwt-color-error-80: rgb(248, 165, 185) !important;
|
||||
--pwt-color-error-70: rgb(243, 139, 168) !important;
|
||||
--pwt-color-error-60: rgb(220, 110, 140) !important;
|
||||
--pwt-color-error-50: rgb(195, 85, 115) !important;
|
||||
--pwt-color-error-40: rgb(170, 60, 90) !important;
|
||||
--pwt-color-error-30: rgb(142, 38, 68) !important;
|
||||
--pwt-color-error-20: rgb(110, 18, 48) !important;
|
||||
--pwt-color-error-15: rgb(90, 8, 35) !important;
|
||||
--pwt-color-error-10: rgb(68, 0, 22) !important;
|
||||
--pwt-color-error-5: rgb(45, 0, 12) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Catppuccin Yellow (#f9e2af) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 253, 248) !important;
|
||||
--pwt-color-warning-95: rgb(255, 248, 225) !important;
|
||||
--pwt-color-warning-90: rgb(252, 240, 195) !important;
|
||||
--pwt-color-warning-80: rgb(249, 226, 175) !important;
|
||||
--pwt-color-warning-70: rgb(225, 200, 145) !important;
|
||||
--pwt-color-warning-60: rgb(200, 178, 118) !important;
|
||||
--pwt-color-warning-50: rgb(175, 155, 92) !important;
|
||||
--pwt-color-warning-40: rgb(148, 130, 68) !important;
|
||||
--pwt-color-warning-30: rgb(120, 105, 45) !important;
|
||||
--pwt-color-warning-20: rgb(92, 80, 25) !important;
|
||||
--pwt-color-warning-15: rgb(72, 62, 15) !important;
|
||||
--pwt-color-warning-10: rgb(52, 45, 5) !important;
|
||||
--pwt-color-warning-5: rgb(32, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Catppuccin Background scale */
|
||||
--pwt-color-neutral-100: rgb(205, 214, 244) !important;
|
||||
--pwt-color-neutral-99: rgb(198, 208, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(186, 194, 222) !important;
|
||||
--pwt-color-neutral-90: rgb(166, 173, 200) !important;
|
||||
--pwt-color-neutral-80: rgb(147, 153, 178) !important;
|
||||
--pwt-color-neutral-70: rgb(127, 132, 156) !important;
|
||||
--pwt-color-neutral-60: rgb(108, 112, 134) !important;
|
||||
--pwt-color-neutral-50: rgb(88, 91, 112) !important;
|
||||
--pwt-color-neutral-40: rgb(69, 71, 90) !important;
|
||||
--pwt-color-neutral-30: rgb(49, 50, 68) !important;
|
||||
--pwt-color-neutral-20: rgb(30, 30, 46) !important;
|
||||
--pwt-color-neutral-15: rgb(24, 24, 37) !important;
|
||||
--pwt-color-neutral-10: rgb(17, 17, 27) !important;
|
||||
--pwt-color-neutral-5: rgb(10, 10, 18) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Catppuccin Overlay tones */
|
||||
--pwt-color-neutral-alt-100: rgb(205, 214, 244) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(200, 210, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(186, 194, 222) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(166, 173, 200) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(147, 153, 178) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(127, 132, 156) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(108, 112, 134) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(88, 91, 112) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(69, 71, 90) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(49, 50, 68) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(30, 30, 46) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(24, 24, 37) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(17, 17, 27) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(10, 10, 18) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Dracula Cyan*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula Cyan
|
||||
* Overrides the PWT Material Design tonal color system with Dracula Cyan palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* ─── Dracula Cyan Palette ─────────────────────────────────────
|
||||
* Background: #282a36 Accent: #8be9fd (Cyan)
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Cyan (#8be9fd) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(245, 253, 255) !important;
|
||||
--pwt-color-primary-95: rgb(214, 247, 255) !important;
|
||||
--pwt-color-primary-90: rgb(175, 240, 254) !important;
|
||||
--pwt-color-primary-80: rgb(139, 233, 253) !important;
|
||||
--pwt-color-primary-70: rgb(98, 200, 228) !important;
|
||||
--pwt-color-primary-60: rgb(60, 168, 205) !important;
|
||||
--pwt-color-primary-50: rgb(25, 138, 180) !important;
|
||||
--pwt-color-primary-40: rgb(0, 110, 155) !important;
|
||||
--pwt-color-primary-30: rgb(0, 82, 125) !important;
|
||||
--pwt-color-primary-20: rgb(0, 58, 95) !important;
|
||||
--pwt-color-primary-15: rgb(0, 45, 78) !important;
|
||||
--pwt-color-primary-10: rgb(0, 32, 60) !important;
|
||||
--pwt-color-primary-5: rgb(0, 18, 38) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Dracula Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(240, 240, 236) !important;
|
||||
--pwt-color-neutral-95: rgb(220, 222, 218) !important;
|
||||
--pwt-color-neutral-90: rgb(208, 212, 224) !important;
|
||||
--pwt-color-neutral-80: rgb(176, 181, 200) !important;
|
||||
--pwt-color-neutral-70: rgb(146, 152, 184) !important;
|
||||
--pwt-color-neutral-60: rgb(124, 131, 160) !important;
|
||||
--pwt-color-neutral-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-40: rgb(86, 90, 114) !important;
|
||||
--pwt-color-neutral-30: rgb(68, 71, 90) !important;
|
||||
--pwt-color-neutral-20: rgb(40, 42, 54) !important;
|
||||
--pwt-color-neutral-15: rgb(33, 34, 44) !important;
|
||||
--pwt-color-neutral-10: rgb(30, 31, 41) !important;
|
||||
--pwt-color-neutral-5: rgb(22, 23, 30) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Dracula Green*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula Green
|
||||
* Overrides the PWT Material Design tonal color system with Dracula Green palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* ─── Dracula Green Palette ────────────────────────────────────
|
||||
* Background: #1c2820 Accent: #50fa7b (Green)
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-primary-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-primary-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-primary-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-primary-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-primary-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-primary-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-primary-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-primary-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-primary-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-primary-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-primary-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-primary-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
|
||||
/* Neutral — Dracula Green (forest-tinted) Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(238, 242, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(215, 225, 218) !important;
|
||||
--pwt-color-neutral-90: rgb(200, 215, 205) !important;
|
||||
--pwt-color-neutral-80: rgb(165, 185, 175) !important;
|
||||
--pwt-color-neutral-70: rgb(130, 155, 145) !important;
|
||||
--pwt-color-neutral-60: rgb(100, 130, 118) !important;
|
||||
--pwt-color-neutral-50: rgb(75, 105, 92) !important;
|
||||
--pwt-color-neutral-40: rgb(60, 85, 72) !important;
|
||||
--pwt-color-neutral-30: rgb(46, 68, 56) !important;
|
||||
--pwt-color-neutral-20: rgb(28, 40, 32) !important;
|
||||
--pwt-color-neutral-15: rgb(22, 32, 26) !important;
|
||||
--pwt-color-neutral-10: rgb(16, 24, 20) !important;
|
||||
--pwt-color-neutral-5: rgb(10, 15, 12) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Green Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(238, 242, 240) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(218, 228, 222) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(200, 212, 205) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(168, 182, 175) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(135, 152, 145) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(105, 125, 118) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(80, 100, 92) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(62, 82, 72) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(48, 65, 55) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(32, 45, 36) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(25, 36, 28) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(18, 28, 22) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(10, 16, 12) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
/*!Dracula Midnight*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula Midnight
|
||||
* Overrides the PWT Material Design tonal color system with Dracula Midnight palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* ─── Dracula Midnight Palette ─────────────────────────────────
|
||||
* Background: #191a21 Accent: #bd93f9 (Purple)
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Purple (#bd93f9) 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, 255) !important;
|
||||
--pwt-color-primary-90: rgb(225, 210, 255) !important;
|
||||
--pwt-color-primary-80: rgb(189, 147, 249) !important;
|
||||
--pwt-color-primary-70: rgb(163, 120, 230) !important;
|
||||
--pwt-color-primary-60: rgb(137, 95, 210) !important;
|
||||
--pwt-color-primary-50: rgb(112, 72, 190) !important;
|
||||
--pwt-color-primary-40: rgb(88, 52, 168) !important;
|
||||
--pwt-color-primary-30: rgb(65, 35, 140) !important;
|
||||
--pwt-color-primary-20: rgb(46, 20, 110) !important;
|
||||
--pwt-color-primary-15: rgb(36, 12, 90) !important;
|
||||
--pwt-color-primary-10: rgb(28, 5, 72) !important;
|
||||
--pwt-color-primary-5: rgb(18, 2, 48) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
|
||||
/* Neutral — Dracula Midnight (darker) Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(240, 240, 236) !important;
|
||||
--pwt-color-neutral-95: rgb(220, 222, 218) !important;
|
||||
--pwt-color-neutral-90: rgb(208, 212, 224) !important;
|
||||
--pwt-color-neutral-80: rgb(176, 181, 200) !important;
|
||||
--pwt-color-neutral-70: rgb(146, 152, 184) !important;
|
||||
--pwt-color-neutral-60: rgb(124, 131, 160) !important;
|
||||
--pwt-color-neutral-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-40: rgb(76, 80, 102) !important;
|
||||
--pwt-color-neutral-30: rgb(55, 58, 76) !important;
|
||||
--pwt-color-neutral-20: rgb(36, 38, 50) !important;
|
||||
--pwt-color-neutral-15: rgb(28, 30, 40) !important;
|
||||
--pwt-color-neutral-10: rgb(22, 23, 32) !important;
|
||||
--pwt-color-neutral-5: rgb(16, 16, 22) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Midnight Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(72, 82, 120) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(52, 60, 95) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(36, 42, 70) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(28, 32, 55) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(22, 25, 42) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(14, 15, 28) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Dracula Orange*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula Orange
|
||||
* Overrides the PWT Material Design tonal color system with Dracula Orange palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* ─── Dracula Orange Palette ───────────────────────────────────
|
||||
* Background: #26201b Accent: #ffb86c (Orange)
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Orange (#ffb86c) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(255, 252, 248) !important;
|
||||
--pwt-color-primary-95: rgb(255, 240, 222) !important;
|
||||
--pwt-color-primary-90: rgb(255, 225, 185) !important;
|
||||
--pwt-color-primary-80: rgb(255, 184, 108) !important;
|
||||
--pwt-color-primary-70: rgb(230, 158, 82) !important;
|
||||
--pwt-color-primary-60: rgb(205, 132, 58) !important;
|
||||
--pwt-color-primary-50: rgb(180, 108, 38) !important;
|
||||
--pwt-color-primary-40: rgb(152, 86, 22) !important;
|
||||
--pwt-color-primary-30: rgb(122, 65, 10) !important;
|
||||
--pwt-color-primary-20: rgb(90, 46, 2) !important;
|
||||
--pwt-color-primary-15: rgb(72, 36, 0) !important;
|
||||
--pwt-color-primary-10: rgb(55, 26, 0) !important;
|
||||
--pwt-color-primary-5: rgb(35, 15, 0) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
|
||||
/* Neutral — Dracula Orange (warm-tinted) Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(242, 240, 236) !important;
|
||||
--pwt-color-neutral-95: rgb(228, 222, 215) !important;
|
||||
--pwt-color-neutral-90: rgb(212, 205, 198) !important;
|
||||
--pwt-color-neutral-80: rgb(180, 172, 162) !important;
|
||||
--pwt-color-neutral-70: rgb(148, 140, 130) !important;
|
||||
--pwt-color-neutral-60: rgb(120, 112, 102) !important;
|
||||
--pwt-color-neutral-50: rgb(95, 88, 78) !important;
|
||||
--pwt-color-neutral-40: rgb(75, 68, 58) !important;
|
||||
--pwt-color-neutral-30: rgb(58, 52, 44) !important;
|
||||
--pwt-color-neutral-20: rgb(38, 32, 27) !important;
|
||||
--pwt-color-neutral-15: rgb(30, 26, 22) !important;
|
||||
--pwt-color-neutral-10: rgb(22, 20, 17) !important;
|
||||
--pwt-color-neutral-5: rgb(14, 12, 10) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Orange Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 240, 236) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(230, 225, 218) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(215, 208, 200) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(182, 175, 166) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(150, 142, 132) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(122, 115, 105) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(98, 90, 80) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(78, 70, 60) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(60, 54, 45) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(42, 36, 30) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(34, 28, 24) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(25, 22, 18) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(16, 14, 11) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Dracula Pink*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula Pink
|
||||
* Overrides the PWT Material Design tonal color system with Dracula Pink palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* ─── Dracula Pink Palette ─────────────────────────────────────
|
||||
* Background: #282a36 Accent: #ff79c6 (Pink)
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-primary-95: rgb(255, 230, 242) !important;
|
||||
--pwt-color-primary-90: rgb(255, 195, 225) !important;
|
||||
--pwt-color-primary-80: rgb(255, 121, 198) !important;
|
||||
--pwt-color-primary-70: rgb(230, 95, 175) !important;
|
||||
--pwt-color-primary-60: rgb(200, 70, 150) !important;
|
||||
--pwt-color-primary-50: rgb(170, 50, 125) !important;
|
||||
--pwt-color-primary-40: rgb(140, 35, 100) !important;
|
||||
--pwt-color-primary-30: rgb(110, 20, 78) !important;
|
||||
--pwt-color-primary-20: rgb(82, 10, 58) !important;
|
||||
--pwt-color-primary-15: rgb(65, 4, 45) !important;
|
||||
--pwt-color-primary-10: rgb(50, 0, 35) !important;
|
||||
--pwt-color-primary-5: rgb(30, 0, 20) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Dracula Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(240, 240, 236) !important;
|
||||
--pwt-color-neutral-95: rgb(220, 222, 218) !important;
|
||||
--pwt-color-neutral-90: rgb(208, 212, 224) !important;
|
||||
--pwt-color-neutral-80: rgb(176, 181, 200) !important;
|
||||
--pwt-color-neutral-70: rgb(146, 152, 184) !important;
|
||||
--pwt-color-neutral-60: rgb(124, 131, 160) !important;
|
||||
--pwt-color-neutral-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-40: rgb(86, 90, 114) !important;
|
||||
--pwt-color-neutral-30: rgb(68, 71, 90) !important;
|
||||
--pwt-color-neutral-20: rgb(40, 42, 54) !important;
|
||||
--pwt-color-neutral-15: rgb(33, 34, 44) !important;
|
||||
--pwt-color-neutral-10: rgb(30, 31, 41) !important;
|
||||
--pwt-color-neutral-5: rgb(22, 23, 30) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/*!Dracula*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Dracula
|
||||
* Overrides the PWt Material Design tonal color system with Dracula palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Dracula Theme (https://draculatheme.com)
|
||||
*
|
||||
* This file is injected into PDM via index.hbs and overrides the
|
||||
* tonal color values from *-yew-style.css. The WASM dark/light mode
|
||||
* selectors continue to work because they reference these tonal vars.
|
||||
*
|
||||
* ─── Dracula Specification Palette ─────────────────────────────
|
||||
* Background: #282a36 Current Line: #44475a
|
||||
* Foreground: #f8f8f2 Comment: #6272a4
|
||||
* Purple: #bd93f9 Pink: #ff79c6
|
||||
* Cyan: #8be9fd Green: #50fa7b
|
||||
* Orange: #ffb86c Red: #ff5555
|
||||
* Yellow: #f1fa8c
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Dracula Purple (#bd93f9) 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, 255) !important;
|
||||
--pwt-color-primary-90: rgb(225, 210, 255) !important;
|
||||
--pwt-color-primary-80: rgb(189, 147, 249) !important;
|
||||
--pwt-color-primary-70: rgb(163, 120, 230) !important;
|
||||
--pwt-color-primary-60: rgb(137, 95, 210) !important;
|
||||
--pwt-color-primary-50: rgb(112, 72, 190) !important;
|
||||
--pwt-color-primary-40: rgb(88, 52, 168) !important;
|
||||
--pwt-color-primary-30: rgb(65, 35, 140) !important;
|
||||
--pwt-color-primary-20: rgb(46, 20, 110) !important;
|
||||
--pwt-color-primary-15: rgb(36, 12, 90) !important;
|
||||
--pwt-color-primary-10: rgb(28, 5, 72) !important;
|
||||
--pwt-color-primary-5: rgb(18, 2, 48) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Dracula Comment/Overlay (#6272a4) 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(230, 236, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 245) !important;
|
||||
--pwt-color-secondary-80: rgb(178, 196, 230) !important;
|
||||
--pwt-color-secondary-70: rgb(146, 163, 200) !important;
|
||||
--pwt-color-secondary-60: rgb(118, 137, 180) !important;
|
||||
--pwt-color-secondary-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-secondary-40: rgb(78, 94, 140) !important;
|
||||
--pwt-color-secondary-30: rgb(58, 72, 115) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 52, 90) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 42, 75) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 32, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 20, 42) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Dracula Pink (#ff79c6) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 234, 244) !important;
|
||||
--pwt-color-tertiary-90: rgb(255, 210, 232) !important;
|
||||
--pwt-color-tertiary-80: rgb(255, 165, 210) !important;
|
||||
--pwt-color-tertiary-70: rgb(255, 121, 198) !important;
|
||||
--pwt-color-tertiary-60: rgb(230, 95, 175) !important;
|
||||
--pwt-color-tertiary-50: rgb(200, 70, 150) !important;
|
||||
--pwt-color-tertiary-40: rgb(170, 48, 125) !important;
|
||||
--pwt-color-tertiary-30: rgb(140, 28, 100) !important;
|
||||
--pwt-color-tertiary-20: rgb(108, 12, 78) !important;
|
||||
--pwt-color-tertiary-15: rgb(88, 4, 62) !important;
|
||||
--pwt-color-tertiary-10: rgb(68, 0, 48) !important;
|
||||
--pwt-color-tertiary-5: rgb(45, 0, 30) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Dracula Green (#50fa7b) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(240, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(140, 255, 175) !important;
|
||||
--pwt-color-success-80: rgb(80, 250, 123) !important;
|
||||
--pwt-color-success-70: rgb(55, 220, 98) !important;
|
||||
--pwt-color-success-60: rgb(30, 190, 75) !important;
|
||||
--pwt-color-success-50: rgb(10, 160, 55) !important;
|
||||
--pwt-color-success-40: rgb(0, 130, 40) !important;
|
||||
--pwt-color-success-30: rgb(0, 100, 28) !important;
|
||||
--pwt-color-success-20: rgb(0, 72, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 55, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 40, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 25, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Dracula Red (#ff5555) 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, 230, 230) !important;
|
||||
--pwt-color-error-90: rgb(255, 205, 205) !important;
|
||||
--pwt-color-error-80: rgb(255, 150, 150) !important;
|
||||
--pwt-color-error-70: rgb(255, 110, 110) !important;
|
||||
--pwt-color-error-60: rgb(255, 85, 85) !important;
|
||||
--pwt-color-error-50: rgb(230, 60, 60) !important;
|
||||
--pwt-color-error-40: rgb(200, 38, 38) !important;
|
||||
--pwt-color-error-30: rgb(168, 16, 16) !important;
|
||||
--pwt-color-error-20: rgb(120, 10, 10) !important;
|
||||
--pwt-color-error-15: rgb(95, 5, 5) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(48, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Dracula Yellow (#f1fa8c) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 254, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 255, 210) !important;
|
||||
--pwt-color-warning-90: rgb(245, 252, 160) !important;
|
||||
--pwt-color-warning-80: rgb(241, 250, 140) !important;
|
||||
--pwt-color-warning-70: rgb(218, 228, 100) !important;
|
||||
--pwt-color-warning-60: rgb(195, 205, 65) !important;
|
||||
--pwt-color-warning-50: rgb(170, 180, 35) !important;
|
||||
--pwt-color-warning-40: rgb(140, 150, 15) !important;
|
||||
--pwt-color-warning-30: rgb(110, 118, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 85, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 65, 0) !important;
|
||||
--pwt-color-warning-10: rgb(42, 46, 0) !important;
|
||||
--pwt-color-warning-5: rgb(25, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Dracula Background/Surface scale */
|
||||
--pwt-color-neutral-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-99: rgb(240, 240, 236) !important;
|
||||
--pwt-color-neutral-95: rgb(220, 222, 218) !important;
|
||||
--pwt-color-neutral-90: rgb(208, 212, 224) !important;
|
||||
--pwt-color-neutral-80: rgb(176, 181, 200) !important;
|
||||
--pwt-color-neutral-70: rgb(146, 152, 184) !important;
|
||||
--pwt-color-neutral-60: rgb(124, 131, 160) !important;
|
||||
--pwt-color-neutral-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-40: rgb(86, 90, 114) !important;
|
||||
--pwt-color-neutral-30: rgb(68, 71, 90) !important;
|
||||
--pwt-color-neutral-20: rgb(40, 42, 54) !important;
|
||||
--pwt-color-neutral-15: rgb(33, 34, 44) !important;
|
||||
--pwt-color-neutral-10: rgb(30, 31, 41) !important;
|
||||
--pwt-color-neutral-5: rgb(22, 23, 30) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Dracula Comment tones */
|
||||
--pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
/*!GitHub Dark*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: GitHub Dark
|
||||
* Overrides the PWT Material Design tonal color system with GitHub Primer palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / GitHub Primer Design System
|
||||
*
|
||||
* ─── GitHub Primer Dark Palette ────────────────────────────────
|
||||
* Accent Blue: #4493f8 Emphasis: #1f6feb
|
||||
* Success: #3fb950 Danger: #f85149
|
||||
* Attention: #d29922 Text: #f0f6fc
|
||||
* Canvas: #0d1117 Subtle: #161b22
|
||||
* Border: #3d444d
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — GitHub Accent Blue (#4493f8) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(246, 251, 255) !important;
|
||||
--pwt-color-primary-95: rgb(218, 238, 255) !important;
|
||||
--pwt-color-primary-90: rgb(188, 222, 255) !important;
|
||||
--pwt-color-primary-80: rgb(130, 188, 252) !important;
|
||||
--pwt-color-primary-70: rgb(68, 147, 248) !important;
|
||||
--pwt-color-primary-60: rgb(31, 111, 235) !important;
|
||||
--pwt-color-primary-50: rgb(18, 90, 205) !important;
|
||||
--pwt-color-primary-40: rgb(8, 72, 172) !important;
|
||||
--pwt-color-primary-30: rgb(2, 55, 140) !important;
|
||||
--pwt-color-primary-20: rgb(0, 40, 108) !important;
|
||||
--pwt-color-primary-15: rgb(0, 30, 85) !important;
|
||||
--pwt-color-primary-10: rgb(0, 22, 65) !important;
|
||||
--pwt-color-primary-5: rgb(0, 12, 42) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — GitHub Muted tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(250, 252, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(230, 238, 248) !important;
|
||||
--pwt-color-secondary-90: rgb(210, 220, 235) !important;
|
||||
--pwt-color-secondary-80: rgb(175, 190, 210) !important;
|
||||
--pwt-color-secondary-70: rgb(145, 152, 161) !important;
|
||||
--pwt-color-secondary-60: rgb(110, 118, 129) !important;
|
||||
--pwt-color-secondary-50: rgb(88, 95, 105) !important;
|
||||
--pwt-color-secondary-40: rgb(61, 68, 77) !important;
|
||||
--pwt-color-secondary-30: rgb(48, 54, 62) !important;
|
||||
--pwt-color-secondary-20: rgb(22, 27, 34) !important;
|
||||
--pwt-color-secondary-15: rgb(16, 20, 28) !important;
|
||||
--pwt-color-secondary-10: rgb(13, 17, 23) !important;
|
||||
--pwt-color-secondary-5: rgb(6, 8, 14) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — GitHub Purple (#a371f7) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(252, 250, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(238, 228, 255) !important;
|
||||
--pwt-color-tertiary-90: rgb(222, 208, 255) !important;
|
||||
--pwt-color-tertiary-80: rgb(188, 160, 252) !important;
|
||||
--pwt-color-tertiary-70: rgb(163, 113, 247) !important;
|
||||
--pwt-color-tertiary-60: rgb(138, 88, 225) !important;
|
||||
--pwt-color-tertiary-50: rgb(115, 65, 200) !important;
|
||||
--pwt-color-tertiary-40: rgb(92, 45, 175) !important;
|
||||
--pwt-color-tertiary-30: rgb(72, 28, 148) !important;
|
||||
--pwt-color-tertiary-20: rgb(52, 14, 118) !important;
|
||||
--pwt-color-tertiary-15: rgb(42, 8, 98) !important;
|
||||
--pwt-color-tertiary-10: rgb(32, 4, 78) !important;
|
||||
--pwt-color-tertiary-5: rgb(20, 0, 50) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — GitHub Green (#3fb950) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(242, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(205, 255, 215) !important;
|
||||
--pwt-color-success-90: rgb(165, 248, 180) !important;
|
||||
--pwt-color-success-80: rgb(105, 225, 125) !important;
|
||||
--pwt-color-success-70: rgb(63, 185, 80) !important;
|
||||
--pwt-color-success-60: rgb(46, 160, 67) !important;
|
||||
--pwt-color-success-50: rgb(35, 134, 54) !important;
|
||||
--pwt-color-success-40: rgb(22, 110, 40) !important;
|
||||
--pwt-color-success-30: rgb(12, 88, 28) !important;
|
||||
--pwt-color-success-20: rgb(4, 66, 18) !important;
|
||||
--pwt-color-success-15: rgb(0, 52, 12) !important;
|
||||
--pwt-color-success-10: rgb(0, 38, 6) !important;
|
||||
--pwt-color-success-5: rgb(0, 24, 2) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — GitHub Danger Red (#f85149) */
|
||||
--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, 226) !important;
|
||||
--pwt-color-error-90: rgb(255, 200, 198) !important;
|
||||
--pwt-color-error-80: rgb(255, 148, 144) !important;
|
||||
--pwt-color-error-70: rgb(248, 81, 73) !important;
|
||||
--pwt-color-error-60: rgb(218, 54, 51) !important;
|
||||
--pwt-color-error-50: rgb(190, 36, 34) !important;
|
||||
--pwt-color-error-40: rgb(162, 20, 18) !important;
|
||||
--pwt-color-error-30: rgb(132, 8, 6) !important;
|
||||
--pwt-color-error-20: rgb(100, 2, 0) !important;
|
||||
--pwt-color-error-15: rgb(80, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(60, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(38, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — GitHub Attention (#d29922) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 244) !important;
|
||||
--pwt-color-warning-95: rgb(255, 240, 200) !important;
|
||||
--pwt-color-warning-90: rgb(248, 225, 155) !important;
|
||||
--pwt-color-warning-80: rgb(235, 198, 95) !important;
|
||||
--pwt-color-warning-70: rgb(210, 153, 34) !important;
|
||||
--pwt-color-warning-60: rgb(185, 130, 15) !important;
|
||||
--pwt-color-warning-50: rgb(158, 106, 3) !important;
|
||||
--pwt-color-warning-40: rgb(132, 88, 0) !important;
|
||||
--pwt-color-warning-30: rgb(105, 68, 0) !important;
|
||||
--pwt-color-warning-20: rgb(78, 50, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 38, 0) !important;
|
||||
--pwt-color-warning-10: rgb(44, 28, 0) !important;
|
||||
--pwt-color-warning-5: rgb(28, 16, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — GitHub Canvas scale */
|
||||
--pwt-color-neutral-100: rgb(240, 246, 252) !important;
|
||||
--pwt-color-neutral-99: rgb(232, 238, 245) !important;
|
||||
--pwt-color-neutral-95: rgb(210, 218, 228) !important;
|
||||
--pwt-color-neutral-90: rgb(185, 195, 208) !important;
|
||||
--pwt-color-neutral-80: rgb(155, 165, 178) !important;
|
||||
--pwt-color-neutral-70: rgb(125, 135, 148) !important;
|
||||
--pwt-color-neutral-60: rgb(110, 118, 129) !important;
|
||||
--pwt-color-neutral-50: rgb(88, 95, 108) !important;
|
||||
--pwt-color-neutral-40: rgb(61, 68, 77) !important;
|
||||
--pwt-color-neutral-30: rgb(33, 38, 45) !important;
|
||||
--pwt-color-neutral-20: rgb(22, 27, 34) !important;
|
||||
--pwt-color-neutral-15: rgb(13, 17, 23) !important;
|
||||
--pwt-color-neutral-10: rgb(1, 4, 9) !important;
|
||||
--pwt-color-neutral-5: rgb(0, 2, 6) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(240, 246, 252) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(235, 241, 248) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(215, 222, 232) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(192, 200, 212) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(160, 170, 185) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(130, 140, 155) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(102, 112, 128) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(80, 90, 105) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(58, 65, 78) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(38, 44, 55) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(24, 30, 38) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(15, 20, 28) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(8, 12, 18) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(2, 4, 10) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Gruvbox Dark*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Gruvbox Dark
|
||||
* Overrides the PWT Material Design tonal color system with Gruvbox palette
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* ─── Gruvbox Dark Palette ──────────────────────────────────────
|
||||
* Accent Yellow: #fabd2f Orange: #fe8019
|
||||
* Green: #b8bb26 Red: #fb4934
|
||||
* Aqua: #8ec07c Blue: #83a598
|
||||
* Text: #ebdbb2 Base: #282828
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — Gruvbox Yellow (#fabd2f) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(255, 253, 245) !important;
|
||||
--pwt-color-primary-95: rgb(255, 245, 210) !important;
|
||||
--pwt-color-primary-90: rgb(255, 235, 175) !important;
|
||||
--pwt-color-primary-80: rgb(250, 210, 110) !important;
|
||||
--pwt-color-primary-70: rgb(250, 189, 47) !important;
|
||||
--pwt-color-primary-60: rgb(225, 168, 30) !important;
|
||||
--pwt-color-primary-50: rgb(198, 145, 18) !important;
|
||||
--pwt-color-primary-40: rgb(168, 120, 8) !important;
|
||||
--pwt-color-primary-30: rgb(138, 98, 0) !important;
|
||||
--pwt-color-primary-20: rgb(108, 75, 0) !important;
|
||||
--pwt-color-primary-15: rgb(85, 58, 0) !important;
|
||||
--pwt-color-primary-10: rgb(65, 44, 0) !important;
|
||||
--pwt-color-primary-5: rgb(40, 28, 0) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Gruvbox Blue (#83a598) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 254, 252) !important;
|
||||
--pwt-color-secondary-95: rgb(222, 242, 238) !important;
|
||||
--pwt-color-secondary-90: rgb(195, 228, 222) !important;
|
||||
--pwt-color-secondary-80: rgb(158, 200, 192) !important;
|
||||
--pwt-color-secondary-70: rgb(131, 165, 152) !important;
|
||||
--pwt-color-secondary-60: rgb(108, 142, 130) !important;
|
||||
--pwt-color-secondary-50: rgb(85, 118, 108) !important;
|
||||
--pwt-color-secondary-40: rgb(65, 96, 86) !important;
|
||||
--pwt-color-secondary-30: rgb(46, 75, 66) !important;
|
||||
--pwt-color-secondary-20: rgb(30, 55, 48) !important;
|
||||
--pwt-color-secondary-15: rgb(22, 44, 38) !important;
|
||||
--pwt-color-secondary-10: rgb(14, 34, 28) !important;
|
||||
--pwt-color-secondary-5: rgb(6, 20, 16) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Gruvbox Aqua (#8ec07c) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(248, 255, 246) !important;
|
||||
--pwt-color-tertiary-95: rgb(225, 248, 218) !important;
|
||||
--pwt-color-tertiary-90: rgb(200, 238, 192) !important;
|
||||
--pwt-color-tertiary-80: rgb(165, 215, 155) !important;
|
||||
--pwt-color-tertiary-70: rgb(142, 192, 124) !important;
|
||||
--pwt-color-tertiary-60: rgb(118, 168, 102) !important;
|
||||
--pwt-color-tertiary-50: rgb(95, 142, 80) !important;
|
||||
--pwt-color-tertiary-40: rgb(75, 118, 62) !important;
|
||||
--pwt-color-tertiary-30: rgb(55, 95, 42) !important;
|
||||
--pwt-color-tertiary-20: rgb(38, 72, 28) !important;
|
||||
--pwt-color-tertiary-15: rgb(28, 58, 18) !important;
|
||||
--pwt-color-tertiary-10: rgb(20, 44, 12) !important;
|
||||
--pwt-color-tertiary-5: rgb(10, 28, 5) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Gruvbox Green (#b8bb26) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(252, 255, 242) !important;
|
||||
--pwt-color-success-95: rgb(238, 248, 195) !important;
|
||||
--pwt-color-success-90: rgb(218, 235, 130) !important;
|
||||
--pwt-color-success-80: rgb(200, 215, 68) !important;
|
||||
--pwt-color-success-70: rgb(184, 187, 38) !important;
|
||||
--pwt-color-success-60: rgb(160, 165, 25) !important;
|
||||
--pwt-color-success-50: rgb(135, 140, 12) !important;
|
||||
--pwt-color-success-40: rgb(110, 115, 2) !important;
|
||||
--pwt-color-success-30: rgb(88, 92, 0) !important;
|
||||
--pwt-color-success-20: rgb(65, 68, 0) !important;
|
||||
--pwt-color-success-15: rgb(50, 52, 0) !important;
|
||||
--pwt-color-success-10: rgb(38, 40, 0) !important;
|
||||
--pwt-color-success-5: rgb(22, 24, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Gruvbox Red (#fb4934) */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 248, 246) !important;
|
||||
--pwt-color-error-95: rgb(255, 228, 222) !important;
|
||||
--pwt-color-error-90: rgb(255, 200, 192) !important;
|
||||
--pwt-color-error-80: rgb(255, 148, 135) !important;
|
||||
--pwt-color-error-70: rgb(251, 105, 82) !important;
|
||||
--pwt-color-error-60: rgb(251, 73, 52) !important;
|
||||
--pwt-color-error-50: rgb(225, 50, 35) !important;
|
||||
--pwt-color-error-40: rgb(195, 32, 18) !important;
|
||||
--pwt-color-error-30: rgb(165, 14, 4) !important;
|
||||
--pwt-color-error-20: rgb(120, 8, 0) !important;
|
||||
--pwt-color-error-15: rgb(95, 4, 0) !important;
|
||||
--pwt-color-error-10: rgb(72, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(45, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Gruvbox Orange (#fe8019) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 251, 246) !important;
|
||||
--pwt-color-warning-95: rgb(255, 238, 215) !important;
|
||||
--pwt-color-warning-90: rgb(255, 220, 175) !important;
|
||||
--pwt-color-warning-80: rgb(255, 185, 110) !important;
|
||||
--pwt-color-warning-70: rgb(254, 128, 25) !important;
|
||||
--pwt-color-warning-60: rgb(228, 108, 12) !important;
|
||||
--pwt-color-warning-50: rgb(200, 90, 4) !important;
|
||||
--pwt-color-warning-40: rgb(170, 72, 0) !important;
|
||||
--pwt-color-warning-30: rgb(138, 55, 0) !important;
|
||||
--pwt-color-warning-20: rgb(105, 40, 0) !important;
|
||||
--pwt-color-warning-15: rgb(82, 30, 0) !important;
|
||||
--pwt-color-warning-10: rgb(60, 22, 0) !important;
|
||||
--pwt-color-warning-5: rgb(38, 12, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Gruvbox Background scale */
|
||||
--pwt-color-neutral-100: rgb(235, 219, 178) !important;
|
||||
--pwt-color-neutral-99: rgb(228, 212, 172) !important;
|
||||
--pwt-color-neutral-95: rgb(213, 196, 161) !important;
|
||||
--pwt-color-neutral-90: rgb(189, 174, 147) !important;
|
||||
--pwt-color-neutral-80: rgb(168, 153, 132) !important;
|
||||
--pwt-color-neutral-70: rgb(146, 131, 116) !important;
|
||||
--pwt-color-neutral-60: rgb(124, 111, 100) !important;
|
||||
--pwt-color-neutral-50: rgb(102, 92, 84) !important;
|
||||
--pwt-color-neutral-40: rgb(80, 73, 69) !important;
|
||||
--pwt-color-neutral-30: rgb(60, 56, 54) !important;
|
||||
--pwt-color-neutral-20: rgb(40, 40, 40) !important;
|
||||
--pwt-color-neutral-15: rgb(29, 32, 33) !important;
|
||||
--pwt-color-neutral-10: rgb(24, 26, 28) !important;
|
||||
--pwt-color-neutral-5: rgb(16, 16, 18) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(235, 219, 178) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(230, 215, 175) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(215, 200, 165) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(195, 180, 148) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(170, 158, 135) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(148, 135, 118) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(126, 115, 102) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(105, 95, 85) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(83, 76, 70) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(62, 58, 55) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(42, 42, 42) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(32, 34, 35) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(25, 27, 28) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(16, 17, 18) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/*!Gruvbox Light*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Gruvbox Light
|
||||
* Overrides the PWT Material Design tonal color system with Gruvbox Light palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Gruvbox (https://github.com/morhetz/gruvbox)
|
||||
*
|
||||
* ─── Gruvbox Light Palette ────────────────────────────────────
|
||||
* Yellow (accent): #d79921 Aqua: #427b58
|
||||
* Green: #98971a Red: #cc241d
|
||||
* Orange: #d65d0e Purple: #8f3f71
|
||||
* Text (dark): #282828 Background:#fbf1c7
|
||||
* bg1: #ebdbb2 bg2: #d5c4a1
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Gruvbox Yellow (#d79921) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(255, 252, 245) !important;
|
||||
--pwt-color-primary-95: rgb(255, 242, 208) !important;
|
||||
--pwt-color-primary-90: rgb(252, 230, 168) !important;
|
||||
--pwt-color-primary-80: rgb(240, 200, 100) !important;
|
||||
--pwt-color-primary-70: rgb(228, 172, 52) !important;
|
||||
--pwt-color-primary-60: rgb(215, 153, 33) !important;
|
||||
--pwt-color-primary-50: rgb(188, 130, 20) !important;
|
||||
--pwt-color-primary-40: rgb(160, 108, 10) !important;
|
||||
--pwt-color-primary-30: rgb(130, 86, 2) !important;
|
||||
--pwt-color-primary-20: rgb(100, 65, 0) !important;
|
||||
--pwt-color-primary-15: rgb(80, 50, 0) !important;
|
||||
--pwt-color-primary-10: rgb(60, 36, 0) !important;
|
||||
--pwt-color-primary-5: rgb(38, 22, 0) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Gruvbox Aqua (#427b58) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(245, 254, 250) !important;
|
||||
--pwt-color-secondary-95: rgb(210, 245, 228) !important;
|
||||
--pwt-color-secondary-90: rgb(170, 232, 202) !important;
|
||||
--pwt-color-secondary-80: rgb(105, 198, 155) !important;
|
||||
--pwt-color-secondary-70: rgb(72, 165, 118) !important;
|
||||
--pwt-color-secondary-60: rgb(66, 123, 88) !important;
|
||||
--pwt-color-secondary-50: rgb(52, 105, 72) !important;
|
||||
--pwt-color-secondary-40: rgb(38, 85, 56) !important;
|
||||
--pwt-color-secondary-30: rgb(26, 68, 42) !important;
|
||||
--pwt-color-secondary-20: rgb(16, 52, 30) !important;
|
||||
--pwt-color-secondary-15: rgb(10, 42, 22) !important;
|
||||
--pwt-color-secondary-10: rgb(5, 32, 15) !important;
|
||||
--pwt-color-secondary-5: rgb(0, 20, 8) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Gruvbox Purple (#8f3f71) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(248, 225, 240) !important;
|
||||
--pwt-color-tertiary-90: rgb(238, 198, 225) !important;
|
||||
--pwt-color-tertiary-80: rgb(215, 148, 195) !important;
|
||||
--pwt-color-tertiary-70: rgb(185, 105, 162) !important;
|
||||
--pwt-color-tertiary-60: rgb(143, 63, 113) !important;
|
||||
--pwt-color-tertiary-50: rgb(122, 48, 95) !important;
|
||||
--pwt-color-tertiary-40: rgb(100, 35, 78) !important;
|
||||
--pwt-color-tertiary-30: rgb(80, 22, 62) !important;
|
||||
--pwt-color-tertiary-20: rgb(60, 12, 46) !important;
|
||||
--pwt-color-tertiary-15: rgb(48, 6, 36) !important;
|
||||
--pwt-color-tertiary-10: rgb(36, 2, 26) !important;
|
||||
--pwt-color-tertiary-5: rgb(22, 0, 14) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Gruvbox Green (#98971a) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(252, 255, 238) !important;
|
||||
--pwt-color-success-95: rgb(235, 248, 185) !important;
|
||||
--pwt-color-success-90: rgb(215, 238, 135) !important;
|
||||
--pwt-color-success-80: rgb(180, 210, 68) !important;
|
||||
--pwt-color-success-70: rgb(160, 185, 38) !important;
|
||||
--pwt-color-success-60: rgb(152, 151, 26) !important;
|
||||
--pwt-color-success-50: rgb(130, 128, 15) !important;
|
||||
--pwt-color-success-40: rgb(108, 106, 6) !important;
|
||||
--pwt-color-success-30: rgb(86, 84, 0) !important;
|
||||
--pwt-color-success-20: rgb(65, 64, 0) !important;
|
||||
--pwt-color-success-15: rgb(52, 50, 0) !important;
|
||||
--pwt-color-success-10: rgb(38, 36, 0) !important;
|
||||
--pwt-color-success-5: rgb(22, 20, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Gruvbox Red (#cc241d) tonal scale */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 248, 246) !important;
|
||||
--pwt-color-error-95: rgb(255, 220, 216) !important;
|
||||
--pwt-color-error-90: rgb(255, 188, 182) !important;
|
||||
--pwt-color-error-80: rgb(240, 128, 118) !important;
|
||||
--pwt-color-error-70: rgb(225, 72, 62) !important;
|
||||
--pwt-color-error-60: rgb(204, 36, 29) !important;
|
||||
--pwt-color-error-50: rgb(178, 22, 16) !important;
|
||||
--pwt-color-error-40: rgb(150, 12, 8) !important;
|
||||
--pwt-color-error-30: rgb(122, 4, 2) !important;
|
||||
--pwt-color-error-20: rgb(94, 0, 0) !important;
|
||||
--pwt-color-error-15: rgb(75, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(56, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(35, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Gruvbox Orange (#d65d0e) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 250, 245) !important;
|
||||
--pwt-color-warning-95: rgb(255, 230, 205) !important;
|
||||
--pwt-color-warning-90: rgb(252, 205, 160) !important;
|
||||
--pwt-color-warning-80: rgb(240, 155, 80) !important;
|
||||
--pwt-color-warning-70: rgb(228, 118, 32) !important;
|
||||
--pwt-color-warning-60: rgb(214, 93, 14) !important;
|
||||
--pwt-color-warning-50: rgb(188, 76, 5) !important;
|
||||
--pwt-color-warning-40: rgb(160, 60, 0) !important;
|
||||
--pwt-color-warning-30: rgb(130, 46, 0) !important;
|
||||
--pwt-color-warning-20: rgb(100, 32, 0) !important;
|
||||
--pwt-color-warning-15: rgb(80, 24, 0) !important;
|
||||
--pwt-color-warning-10: rgb(58, 16, 0) !important;
|
||||
--pwt-color-warning-5: rgb(36, 8, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Gruvbox Light Background scale (#fbf1c7 base) */
|
||||
--pwt-color-neutral-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-99: rgb(253, 249, 238) !important;
|
||||
--pwt-color-neutral-95: rgb(251, 241, 199) !important;
|
||||
--pwt-color-neutral-90: rgb(235, 219, 178) !important;
|
||||
--pwt-color-neutral-80: rgb(213, 196, 161) !important;
|
||||
--pwt-color-neutral-70: rgb(189, 174, 147) !important;
|
||||
--pwt-color-neutral-60: rgb(168, 153, 132) !important;
|
||||
--pwt-color-neutral-50: rgb(146, 131, 116) !important;
|
||||
--pwt-color-neutral-40: rgb(124, 111, 100) !important;
|
||||
--pwt-color-neutral-30: rgb(102, 92, 84) !important;
|
||||
--pwt-color-neutral-20: rgb(80, 73, 69) !important;
|
||||
--pwt-color-neutral-15: rgb(60, 56, 54) !important;
|
||||
--pwt-color-neutral-10: rgb(40, 40, 40) !important;
|
||||
--pwt-color-neutral-5: rgb(24, 24, 24) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Gruvbox Light fg tones */
|
||||
--pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(252, 248, 235) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(248, 240, 202) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(238, 225, 182) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(218, 202, 165) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(195, 180, 148) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(172, 158, 132) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(150, 136, 118) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(128, 115, 102) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(106, 95, 85) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(84, 76, 70) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(64, 58, 55) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(45, 42, 40) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(28, 26, 25) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (light surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
|
||||
--pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
|
||||
--pwt-color-primary: var(--pwt-color-primary-40) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-90) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
|
||||
background: var(--pwt-color-neutral-95) !important;
|
||||
color: var(--pwt-color-neutral-10) !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo — swap to dark variant for light background ===== */
|
||||
img[src*="proxmox_logo_white"] {
|
||||
content: url("/images/proxmox_logo.svg") !important;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Nord Dark*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Nord Dark
|
||||
* Overrides the PWT Material Design tonal color system with Nord palette
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* ─── Nord Palette ──────────────────────────────────────────────
|
||||
* Frost 1 (accent): #88c0d0 Frost 2: #81a1c1
|
||||
* Aurora Green: #a3be8c Aurora Yellow: #ebcb8b
|
||||
* Aurora Red: #bf616a Aurora Orange: #d08770
|
||||
* Snow Storm: #e5e9f0 Polar Night: #2e3440
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — Nord Frost (#88c0d0) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 254, 255) !important;
|
||||
--pwt-color-primary-95: rgb(225, 245, 252) !important;
|
||||
--pwt-color-primary-90: rgb(200, 232, 242) !important;
|
||||
--pwt-color-primary-80: rgb(160, 210, 225) !important;
|
||||
--pwt-color-primary-70: rgb(136, 192, 208) !important;
|
||||
--pwt-color-primary-60: rgb(110, 168, 185) !important;
|
||||
--pwt-color-primary-50: rgb(88, 142, 160) !important;
|
||||
--pwt-color-primary-40: rgb(65, 118, 135) !important;
|
||||
--pwt-color-primary-30: rgb(45, 95, 112) !important;
|
||||
--pwt-color-primary-20: rgb(28, 72, 88) !important;
|
||||
--pwt-color-primary-15: rgb(18, 58, 72) !important;
|
||||
--pwt-color-primary-10: rgb(10, 44, 56) !important;
|
||||
--pwt-color-primary-5: rgb(4, 28, 38) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Nord Frost 2 (#81a1c1) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 252, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(225, 238, 252) !important;
|
||||
--pwt-color-secondary-90: rgb(200, 222, 240) !important;
|
||||
--pwt-color-secondary-80: rgb(160, 192, 215) !important;
|
||||
--pwt-color-secondary-70: rgb(129, 161, 193) !important;
|
||||
--pwt-color-secondary-60: rgb(105, 138, 170) !important;
|
||||
--pwt-color-secondary-50: rgb(82, 115, 148) !important;
|
||||
--pwt-color-secondary-40: rgb(62, 95, 125) !important;
|
||||
--pwt-color-secondary-30: rgb(44, 75, 102) !important;
|
||||
--pwt-color-secondary-20: rgb(28, 56, 78) !important;
|
||||
--pwt-color-secondary-15: rgb(20, 45, 65) !important;
|
||||
--pwt-color-secondary-10: rgb(12, 35, 52) !important;
|
||||
--pwt-color-secondary-5: rgb(5, 22, 35) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Nord Aurora Purple (#b48ead) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 250, 254) !important;
|
||||
--pwt-color-tertiary-95: rgb(245, 232, 242) !important;
|
||||
--pwt-color-tertiary-90: rgb(232, 212, 228) !important;
|
||||
--pwt-color-tertiary-80: rgb(205, 175, 200) !important;
|
||||
--pwt-color-tertiary-70: rgb(180, 142, 173) !important;
|
||||
--pwt-color-tertiary-60: rgb(155, 118, 148) !important;
|
||||
--pwt-color-tertiary-50: rgb(130, 95, 125) !important;
|
||||
--pwt-color-tertiary-40: rgb(108, 72, 102) !important;
|
||||
--pwt-color-tertiary-30: rgb(85, 52, 80) !important;
|
||||
--pwt-color-tertiary-20: rgb(62, 34, 58) !important;
|
||||
--pwt-color-tertiary-15: rgb(50, 24, 48) !important;
|
||||
--pwt-color-tertiary-10: rgb(38, 16, 36) !important;
|
||||
--pwt-color-tertiary-5: rgb(25, 8, 24) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Nord Aurora Green (#a3be8c) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(248, 255, 245) !important;
|
||||
--pwt-color-success-95: rgb(225, 245, 215) !important;
|
||||
--pwt-color-success-90: rgb(200, 232, 190) !important;
|
||||
--pwt-color-success-80: rgb(175, 210, 160) !important;
|
||||
--pwt-color-success-70: rgb(163, 190, 140) !important;
|
||||
--pwt-color-success-60: rgb(138, 165, 118) !important;
|
||||
--pwt-color-success-50: rgb(115, 140, 95) !important;
|
||||
--pwt-color-success-40: rgb(92, 118, 75) !important;
|
||||
--pwt-color-success-30: rgb(70, 95, 55) !important;
|
||||
--pwt-color-success-20: rgb(50, 72, 38) !important;
|
||||
--pwt-color-success-15: rgb(38, 58, 28) !important;
|
||||
--pwt-color-success-10: rgb(28, 44, 18) !important;
|
||||
--pwt-color-success-5: rgb(16, 28, 10) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Nord Aurora Red (#bf616a) */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 249, 249) !important;
|
||||
--pwt-color-error-95: rgb(255, 228, 230) !important;
|
||||
--pwt-color-error-90: rgb(248, 202, 206) !important;
|
||||
--pwt-color-error-80: rgb(225, 150, 158) !important;
|
||||
--pwt-color-error-70: rgb(205, 115, 125) !important;
|
||||
--pwt-color-error-60: rgb(191, 97, 106) !important;
|
||||
--pwt-color-error-50: rgb(168, 72, 82) !important;
|
||||
--pwt-color-error-40: rgb(142, 50, 60) !important;
|
||||
--pwt-color-error-30: rgb(118, 30, 40) !important;
|
||||
--pwt-color-error-20: rgb(90, 16, 24) !important;
|
||||
--pwt-color-error-15: rgb(72, 8, 16) !important;
|
||||
--pwt-color-error-10: rgb(55, 2, 8) !important;
|
||||
--pwt-color-error-5: rgb(35, 0, 4) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Nord Aurora Yellow (#ebcb8b) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 253, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 245, 222) !important;
|
||||
--pwt-color-warning-90: rgb(248, 235, 195) !important;
|
||||
--pwt-color-warning-80: rgb(240, 218, 160) !important;
|
||||
--pwt-color-warning-70: rgb(235, 203, 139) !important;
|
||||
--pwt-color-warning-60: rgb(210, 178, 112) !important;
|
||||
--pwt-color-warning-50: rgb(185, 155, 88) !important;
|
||||
--pwt-color-warning-40: rgb(158, 130, 65) !important;
|
||||
--pwt-color-warning-30: rgb(130, 105, 42) !important;
|
||||
--pwt-color-warning-20: rgb(100, 80, 22) !important;
|
||||
--pwt-color-warning-15: rgb(78, 62, 12) !important;
|
||||
--pwt-color-warning-10: rgb(58, 45, 4) !important;
|
||||
--pwt-color-warning-5: rgb(35, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Nord Polar Night scale */
|
||||
--pwt-color-neutral-100: rgb(236, 239, 244) !important;
|
||||
--pwt-color-neutral-99: rgb(229, 233, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(216, 222, 233) !important;
|
||||
--pwt-color-neutral-90: rgb(195, 202, 218) !important;
|
||||
--pwt-color-neutral-80: rgb(168, 178, 198) !important;
|
||||
--pwt-color-neutral-70: rgb(140, 152, 175) !important;
|
||||
--pwt-color-neutral-60: rgb(115, 128, 152) !important;
|
||||
--pwt-color-neutral-50: rgb(92, 105, 130) !important;
|
||||
--pwt-color-neutral-40: rgb(76, 86, 106) !important;
|
||||
--pwt-color-neutral-30: rgb(67, 76, 94) !important;
|
||||
--pwt-color-neutral-20: rgb(59, 66, 82) !important;
|
||||
--pwt-color-neutral-15: rgb(52, 58, 72) !important;
|
||||
--pwt-color-neutral-10: rgb(46, 52, 64) !important;
|
||||
--pwt-color-neutral-5: rgb(36, 40, 52) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(236, 239, 244) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(232, 236, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(218, 225, 238) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(200, 208, 225) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(170, 182, 202) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(142, 155, 180) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 130, 158) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(95, 108, 135) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(76, 88, 112) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(60, 70, 92) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(48, 56, 74) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(40, 46, 62) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(32, 38, 50) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(22, 26, 38) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/*!Nord Light*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Nord Light
|
||||
* Overrides the PWT Material Design tonal color system with Nord Light palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Nord (https://www.nordtheme.com)
|
||||
*
|
||||
* ─── Nord Light Palette ───────────────────────────────────────
|
||||
* Frost Blue (accent): #5e81ac Frost Cyan: #88c0d0
|
||||
* Aurora Green: #a3be8c Aurora Red: #bf616a
|
||||
* Aurora Yellow:#ebcb8b Aurora Purple:#b48ead
|
||||
* Text: #2e3440 Background: #eceff4
|
||||
* Snow: #d8dee9 Night: #3b4252
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Nord Frost Blue (#5e81ac) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 251, 255) !important;
|
||||
--pwt-color-primary-95: rgb(220, 235, 252) !important;
|
||||
--pwt-color-primary-90: rgb(188, 215, 245) !important;
|
||||
--pwt-color-primary-80: rgb(138, 180, 225) !important;
|
||||
--pwt-color-primary-70: rgb(110, 155, 200) !important;
|
||||
--pwt-color-primary-60: rgb(94, 129, 172) !important;
|
||||
--pwt-color-primary-50: rgb(76, 108, 148) !important;
|
||||
--pwt-color-primary-40: rgb(60, 88, 125) !important;
|
||||
--pwt-color-primary-30: rgb(45, 68, 100) !important;
|
||||
--pwt-color-primary-20: rgb(32, 50, 78) !important;
|
||||
--pwt-color-primary-15: rgb(24, 38, 62) !important;
|
||||
--pwt-color-primary-10: rgb(16, 28, 48) !important;
|
||||
--pwt-color-primary-5: rgb(8, 15, 30) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Nord Frost Cyan (#88c0d0) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(248, 254, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(218, 245, 250) !important;
|
||||
--pwt-color-secondary-90: rgb(188, 235, 242) !important;
|
||||
--pwt-color-secondary-80: rgb(150, 210, 225) !important;
|
||||
--pwt-color-secondary-70: rgb(136, 192, 208) !important;
|
||||
--pwt-color-secondary-60: rgb(108, 165, 182) !important;
|
||||
--pwt-color-secondary-50: rgb(85, 140, 158) !important;
|
||||
--pwt-color-secondary-40: rgb(64, 115, 132) !important;
|
||||
--pwt-color-secondary-30: rgb(45, 92, 108) !important;
|
||||
--pwt-color-secondary-20: rgb(28, 68, 82) !important;
|
||||
--pwt-color-secondary-15: rgb(20, 54, 66) !important;
|
||||
--pwt-color-secondary-10: rgb(12, 40, 50) !important;
|
||||
--pwt-color-secondary-5: rgb(5, 24, 32) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Nord Aurora Purple (#b48ead) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 250, 254) !important;
|
||||
--pwt-color-tertiary-95: rgb(245, 232, 242) !important;
|
||||
--pwt-color-tertiary-90: rgb(235, 210, 230) !important;
|
||||
--pwt-color-tertiary-80: rgb(210, 172, 202) !important;
|
||||
--pwt-color-tertiary-70: rgb(180, 142, 173) !important;
|
||||
--pwt-color-tertiary-60: rgb(155, 115, 148) !important;
|
||||
--pwt-color-tertiary-50: rgb(132, 92, 125) !important;
|
||||
--pwt-color-tertiary-40: rgb(108, 70, 102) !important;
|
||||
--pwt-color-tertiary-30: rgb(86, 50, 80) !important;
|
||||
--pwt-color-tertiary-20: rgb(64, 32, 58) !important;
|
||||
--pwt-color-tertiary-15: rgb(50, 22, 46) !important;
|
||||
--pwt-color-tertiary-10: rgb(38, 14, 34) !important;
|
||||
--pwt-color-tertiary-5: rgb(22, 5, 20) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Nord Aurora Green (#a3be8c) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(250, 255, 248) !important;
|
||||
--pwt-color-success-95: rgb(228, 248, 218) !important;
|
||||
--pwt-color-success-90: rgb(200, 235, 185) !important;
|
||||
--pwt-color-success-80: rgb(172, 210, 152) !important;
|
||||
--pwt-color-success-70: rgb(163, 190, 140) !important;
|
||||
--pwt-color-success-60: rgb(138, 165, 116) !important;
|
||||
--pwt-color-success-50: rgb(115, 142, 95) !important;
|
||||
--pwt-color-success-40: rgb(92, 118, 74) !important;
|
||||
--pwt-color-success-30: rgb(72, 96, 55) !important;
|
||||
--pwt-color-success-20: rgb(52, 74, 38) !important;
|
||||
--pwt-color-success-15: rgb(40, 58, 28) !important;
|
||||
--pwt-color-success-10: rgb(28, 44, 18) !important;
|
||||
--pwt-color-success-5: rgb(16, 28, 8) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Nord Aurora Red (#bf616a) tonal scale */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 248, 249) !important;
|
||||
--pwt-color-error-95: rgb(255, 225, 228) !important;
|
||||
--pwt-color-error-90: rgb(248, 195, 200) !important;
|
||||
--pwt-color-error-80: rgb(225, 148, 155) !important;
|
||||
--pwt-color-error-70: rgb(191, 97, 106) !important;
|
||||
--pwt-color-error-60: rgb(168, 72, 82) !important;
|
||||
--pwt-color-error-50: rgb(145, 52, 62) !important;
|
||||
--pwt-color-error-40: rgb(120, 35, 44) !important;
|
||||
--pwt-color-error-30: rgb(98, 20, 28) !important;
|
||||
--pwt-color-error-20: rgb(75, 8, 15) !important;
|
||||
--pwt-color-error-15: rgb(60, 2, 8) !important;
|
||||
--pwt-color-error-10: rgb(45, 0, 4) !important;
|
||||
--pwt-color-error-5: rgb(28, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Nord Aurora Yellow (#ebcb8b) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 248) !important;
|
||||
--pwt-color-warning-95: rgb(252, 242, 218) !important;
|
||||
--pwt-color-warning-90: rgb(248, 230, 185) !important;
|
||||
--pwt-color-warning-80: rgb(238, 212, 148) !important;
|
||||
--pwt-color-warning-70: rgb(235, 203, 139) !important;
|
||||
--pwt-color-warning-60: rgb(212, 178, 110) !important;
|
||||
--pwt-color-warning-50: rgb(188, 155, 85) !important;
|
||||
--pwt-color-warning-40: rgb(162, 130, 62) !important;
|
||||
--pwt-color-warning-30: rgb(135, 105, 40) !important;
|
||||
--pwt-color-warning-20: rgb(108, 82, 22) !important;
|
||||
--pwt-color-warning-15: rgb(86, 64, 12) !important;
|
||||
--pwt-color-warning-10: rgb(65, 46, 4) !important;
|
||||
--pwt-color-warning-5: rgb(42, 28, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Nord Snow Storm (polar) scale (#eceff4 base) */
|
||||
--pwt-color-neutral-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-99: rgb(246, 248, 252) !important;
|
||||
--pwt-color-neutral-95: rgb(236, 239, 244) !important;
|
||||
--pwt-color-neutral-90: rgb(229, 233, 240) !important;
|
||||
--pwt-color-neutral-80: rgb(216, 222, 233) !important;
|
||||
--pwt-color-neutral-70: rgb(190, 198, 214) !important;
|
||||
--pwt-color-neutral-60: rgb(165, 174, 195) !important;
|
||||
--pwt-color-neutral-50: rgb(136, 146, 170) !important;
|
||||
--pwt-color-neutral-40: rgb(76, 86, 106) !important;
|
||||
--pwt-color-neutral-30: rgb(67, 76, 94) !important;
|
||||
--pwt-color-neutral-20: rgb(59, 66, 82) !important;
|
||||
--pwt-color-neutral-15: rgb(52, 58, 72) !important;
|
||||
--pwt-color-neutral-10: rgb(46, 52, 64) !important;
|
||||
--pwt-color-neutral-5: rgb(36, 40, 52) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Nord Frost/Snow tones */
|
||||
--pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(248, 250, 254) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(238, 242, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(230, 235, 242) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(218, 224, 235) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(195, 202, 218) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(170, 178, 198) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(142, 152, 175) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(80, 90, 112) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(70, 78, 98) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(60, 68, 85) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(54, 60, 75) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(48, 54, 68) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(38, 42, 55) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (light surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
|
||||
--pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
|
||||
--pwt-color-primary: var(--pwt-color-primary-40) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-90) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
|
||||
background: var(--pwt-color-neutral-95) !important;
|
||||
color: var(--pwt-color-neutral-10) !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo — swap to dark variant for light background ===== */
|
||||
img[src*="proxmox_logo_white"] {
|
||||
content: url("/images/proxmox_logo.svg") !important;
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
/*!Solarized Dark*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Solarized Dark
|
||||
* Overrides the PWT Material Design tonal color system with Solarized palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Ethan Schoonover (Solarized)
|
||||
*
|
||||
* ─── Solarized Palette ─────────────────────────────────────────
|
||||
* Blue: #268bd2 Cyan: #2aa198
|
||||
* Green: #859900 Yellow: #b58900
|
||||
* Red: #dc322f Orange: #cb4b16
|
||||
* Base03: #002b36 Base02: #073642
|
||||
* Base01: #586e75 Base0: #839496
|
||||
* Base1: #93a1a1
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — Solarized Blue (#268bd2) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(246, 252, 255) !important;
|
||||
--pwt-color-primary-95: rgb(218, 240, 255) !important;
|
||||
--pwt-color-primary-90: rgb(188, 225, 248) !important;
|
||||
--pwt-color-primary-80: rgb(130, 195, 235) !important;
|
||||
--pwt-color-primary-70: rgb(75, 165, 222) !important;
|
||||
--pwt-color-primary-60: rgb(38, 139, 210) !important;
|
||||
--pwt-color-primary-50: rgb(25, 115, 185) !important;
|
||||
--pwt-color-primary-40: rgb(12, 95, 160) !important;
|
||||
--pwt-color-primary-30: rgb(4, 75, 132) !important;
|
||||
--pwt-color-primary-20: rgb(0, 55, 105) !important;
|
||||
--pwt-color-primary-15: rgb(0, 44, 85) !important;
|
||||
--pwt-color-primary-10: rgb(0, 32, 65) !important;
|
||||
--pwt-color-primary-5: rgb(0, 18, 42) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Solarized Cyan (#2aa198) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(245, 255, 254) !important;
|
||||
--pwt-color-secondary-95: rgb(215, 248, 245) !important;
|
||||
--pwt-color-secondary-90: rgb(180, 238, 232) !important;
|
||||
--pwt-color-secondary-80: rgb(115, 210, 202) !important;
|
||||
--pwt-color-secondary-70: rgb(65, 185, 175) !important;
|
||||
--pwt-color-secondary-60: rgb(42, 161, 152) !important;
|
||||
--pwt-color-secondary-50: rgb(28, 135, 128) !important;
|
||||
--pwt-color-secondary-40: rgb(15, 110, 105) !important;
|
||||
--pwt-color-secondary-30: rgb(4, 88, 82) !important;
|
||||
--pwt-color-secondary-20: rgb(0, 65, 60) !important;
|
||||
--pwt-color-secondary-15: rgb(0, 52, 48) !important;
|
||||
--pwt-color-secondary-10: rgb(0, 38, 35) !important;
|
||||
--pwt-color-secondary-5: rgb(0, 22, 20) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Solarized Violet (#6c71c4) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(250, 250, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(232, 232, 252) !important;
|
||||
--pwt-color-tertiary-90: rgb(210, 212, 242) !important;
|
||||
--pwt-color-tertiary-80: rgb(168, 172, 228) !important;
|
||||
--pwt-color-tertiary-70: rgb(130, 135, 210) !important;
|
||||
--pwt-color-tertiary-60: rgb(108, 113, 196) !important;
|
||||
--pwt-color-tertiary-50: rgb(85, 90, 172) !important;
|
||||
--pwt-color-tertiary-40: rgb(65, 70, 148) !important;
|
||||
--pwt-color-tertiary-30: rgb(46, 50, 122) !important;
|
||||
--pwt-color-tertiary-20: rgb(30, 34, 98) !important;
|
||||
--pwt-color-tertiary-15: rgb(22, 25, 80) !important;
|
||||
--pwt-color-tertiary-10: rgb(14, 16, 62) !important;
|
||||
--pwt-color-tertiary-5: rgb(6, 8, 40) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Solarized Green (#859900) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(250, 255, 242) !important;
|
||||
--pwt-color-success-95: rgb(228, 248, 195) !important;
|
||||
--pwt-color-success-90: rgb(205, 238, 130) !important;
|
||||
--pwt-color-success-80: rgb(175, 215, 55) !important;
|
||||
--pwt-color-success-70: rgb(155, 190, 15) !important;
|
||||
--pwt-color-success-60: rgb(133, 153, 0) !important;
|
||||
--pwt-color-success-50: rgb(112, 130, 0) !important;
|
||||
--pwt-color-success-40: rgb(90, 108, 0) !important;
|
||||
--pwt-color-success-30: rgb(70, 85, 0) !important;
|
||||
--pwt-color-success-20: rgb(50, 62, 0) !important;
|
||||
--pwt-color-success-15: rgb(38, 48, 0) !important;
|
||||
--pwt-color-success-10: rgb(28, 35, 0) !important;
|
||||
--pwt-color-success-5: rgb(16, 20, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Solarized Red (#dc322f) */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 248, 248) !important;
|
||||
--pwt-color-error-95: rgb(255, 225, 224) !important;
|
||||
--pwt-color-error-90: rgb(255, 198, 197) !important;
|
||||
--pwt-color-error-80: rgb(248, 140, 138) !important;
|
||||
--pwt-color-error-70: rgb(238, 90, 88) !important;
|
||||
--pwt-color-error-60: rgb(220, 50, 47) !important;
|
||||
--pwt-color-error-50: rgb(192, 35, 32) !important;
|
||||
--pwt-color-error-40: rgb(165, 20, 18) !important;
|
||||
--pwt-color-error-30: rgb(135, 8, 6) !important;
|
||||
--pwt-color-error-20: rgb(102, 2, 0) !important;
|
||||
--pwt-color-error-15: rgb(82, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(62, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(40, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Solarized Yellow (#b58900) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 242) !important;
|
||||
--pwt-color-warning-95: rgb(255, 242, 195) !important;
|
||||
--pwt-color-warning-90: rgb(248, 225, 135) !important;
|
||||
--pwt-color-warning-80: rgb(225, 195, 60) !important;
|
||||
--pwt-color-warning-70: rgb(200, 168, 15) !important;
|
||||
--pwt-color-warning-60: rgb(181, 137, 0) !important;
|
||||
--pwt-color-warning-50: rgb(155, 118, 0) !important;
|
||||
--pwt-color-warning-40: rgb(130, 98, 0) !important;
|
||||
--pwt-color-warning-30: rgb(105, 78, 0) !important;
|
||||
--pwt-color-warning-20: rgb(78, 58, 0) !important;
|
||||
--pwt-color-warning-15: rgb(60, 44, 0) !important;
|
||||
--pwt-color-warning-10: rgb(44, 32, 0) !important;
|
||||
--pwt-color-warning-5: rgb(28, 18, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Solarized Base scale */
|
||||
--pwt-color-neutral-100: rgb(253, 246, 227) !important;
|
||||
--pwt-color-neutral-99: rgb(238, 232, 213) !important;
|
||||
--pwt-color-neutral-95: rgb(198, 200, 198) !important;
|
||||
--pwt-color-neutral-90: rgb(147, 161, 161) !important;
|
||||
--pwt-color-neutral-80: rgb(131, 148, 150) !important;
|
||||
--pwt-color-neutral-70: rgb(110, 128, 132) !important;
|
||||
--pwt-color-neutral-60: rgb(88, 110, 117) !important;
|
||||
--pwt-color-neutral-50: rgb(70, 92, 100) !important;
|
||||
--pwt-color-neutral-40: rgb(55, 75, 82) !important;
|
||||
--pwt-color-neutral-30: rgb(42, 60, 68) !important;
|
||||
--pwt-color-neutral-20: rgb(7, 54, 66) !important;
|
||||
--pwt-color-neutral-15: rgb(0, 43, 54) !important;
|
||||
--pwt-color-neutral-10: rgb(0, 34, 44) !important;
|
||||
--pwt-color-neutral-5: rgb(0, 22, 30) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(253, 246, 227) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(240, 235, 218) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(202, 205, 202) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(152, 166, 166) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(135, 152, 155) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(115, 132, 138) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(92, 115, 122) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(74, 95, 104) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(58, 78, 86) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(44, 62, 70) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(12, 50, 60) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(4, 40, 50) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(0, 30, 40) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(0, 18, 26) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/*!Solarized Light*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Solarized Light
|
||||
* Overrides the PWT Material Design tonal color system with Solarized Light palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Ethan Schoonover (https://ethanschoonover.com/solarized)
|
||||
*
|
||||
* ─── Solarized Light Palette ──────────────────────────────────
|
||||
* Blue (accent): #268bd2 Cyan: #2aa198
|
||||
* Green: #859900 Red: #dc322f
|
||||
* Yellow: #b58900 Magenta: #d33682
|
||||
* Text: #657b83 (base00) Background: #fdf6e3 (base3)
|
||||
* base1: #93a1a1 base2: #eee8d5
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — Solarized Blue (#268bd2) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 252, 255) !important;
|
||||
--pwt-color-primary-95: rgb(215, 238, 255) !important;
|
||||
--pwt-color-primary-90: rgb(178, 222, 252) !important;
|
||||
--pwt-color-primary-80: rgb(115, 188, 238) !important;
|
||||
--pwt-color-primary-70: rgb(62, 158, 222) !important;
|
||||
--pwt-color-primary-60: rgb(38, 139, 210) !important;
|
||||
--pwt-color-primary-50: rgb(25, 118, 185) !important;
|
||||
--pwt-color-primary-40: rgb(15, 98, 158) !important;
|
||||
--pwt-color-primary-30: rgb(6, 78, 130) !important;
|
||||
--pwt-color-primary-20: rgb(0, 58, 102) !important;
|
||||
--pwt-color-primary-15: rgb(0, 46, 82) !important;
|
||||
--pwt-color-primary-10: rgb(0, 34, 62) !important;
|
||||
--pwt-color-primary-5: rgb(0, 20, 38) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Solarized Cyan (#2aa198) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(245, 255, 254) !important;
|
||||
--pwt-color-secondary-95: rgb(208, 248, 244) !important;
|
||||
--pwt-color-secondary-90: rgb(168, 238, 232) !important;
|
||||
--pwt-color-secondary-80: rgb(100, 210, 200) !important;
|
||||
--pwt-color-secondary-70: rgb(55, 180, 172) !important;
|
||||
--pwt-color-secondary-60: rgb(42, 161, 152) !important;
|
||||
--pwt-color-secondary-50: rgb(28, 138, 130) !important;
|
||||
--pwt-color-secondary-40: rgb(16, 115, 108) !important;
|
||||
--pwt-color-secondary-30: rgb(6, 92, 86) !important;
|
||||
--pwt-color-secondary-20: rgb(0, 70, 65) !important;
|
||||
--pwt-color-secondary-15: rgb(0, 55, 52) !important;
|
||||
--pwt-color-secondary-10: rgb(0, 42, 38) !important;
|
||||
--pwt-color-secondary-5: rgb(0, 25, 22) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Solarized Magenta (#d33682) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 252) !important;
|
||||
--pwt-color-tertiary-95: rgb(255, 225, 240) !important;
|
||||
--pwt-color-tertiary-90: rgb(252, 198, 222) !important;
|
||||
--pwt-color-tertiary-80: rgb(238, 140, 185) !important;
|
||||
--pwt-color-tertiary-70: rgb(225, 85, 152) !important;
|
||||
--pwt-color-tertiary-60: rgb(211, 54, 130) !important;
|
||||
--pwt-color-tertiary-50: rgb(185, 38, 110) !important;
|
||||
--pwt-color-tertiary-40: rgb(158, 24, 92) !important;
|
||||
--pwt-color-tertiary-30: rgb(128, 12, 72) !important;
|
||||
--pwt-color-tertiary-20: rgb(98, 2, 54) !important;
|
||||
--pwt-color-tertiary-15: rgb(78, 0, 42) !important;
|
||||
--pwt-color-tertiary-10: rgb(58, 0, 30) !important;
|
||||
--pwt-color-tertiary-5: rgb(36, 0, 16) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Solarized Green (#859900) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(252, 255, 240) !important;
|
||||
--pwt-color-success-95: rgb(232, 250, 182) !important;
|
||||
--pwt-color-success-90: rgb(210, 240, 125) !important;
|
||||
--pwt-color-success-80: rgb(170, 210, 40) !important;
|
||||
--pwt-color-success-70: rgb(148, 178, 10) !important;
|
||||
--pwt-color-success-60: rgb(133, 153, 0) !important;
|
||||
--pwt-color-success-50: rgb(112, 130, 0) !important;
|
||||
--pwt-color-success-40: rgb(92, 108, 0) !important;
|
||||
--pwt-color-success-30: rgb(72, 86, 0) !important;
|
||||
--pwt-color-success-20: rgb(54, 66, 0) !important;
|
||||
--pwt-color-success-15: rgb(42, 52, 0) !important;
|
||||
--pwt-color-success-10: rgb(30, 38, 0) !important;
|
||||
--pwt-color-success-5: rgb(18, 22, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Solarized Red (#dc322f) 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, 218, 218) !important;
|
||||
--pwt-color-error-90: rgb(255, 185, 184) !important;
|
||||
--pwt-color-error-80: rgb(245, 120, 118) !important;
|
||||
--pwt-color-error-70: rgb(235, 72, 70) !important;
|
||||
--pwt-color-error-60: rgb(220, 50, 47) !important;
|
||||
--pwt-color-error-50: rgb(192, 35, 32) !important;
|
||||
--pwt-color-error-40: rgb(162, 22, 20) !important;
|
||||
--pwt-color-error-30: rgb(132, 10, 10) !important;
|
||||
--pwt-color-error-20: rgb(102, 2, 2) !important;
|
||||
--pwt-color-error-15: rgb(82, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(60, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(38, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Solarized Yellow (#b58900) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 242) !important;
|
||||
--pwt-color-warning-95: rgb(255, 240, 195) !important;
|
||||
--pwt-color-warning-90: rgb(248, 225, 148) !important;
|
||||
--pwt-color-warning-80: rgb(232, 195, 62) !important;
|
||||
--pwt-color-warning-70: rgb(202, 162, 10) !important;
|
||||
--pwt-color-warning-60: rgb(181, 137, 0) !important;
|
||||
--pwt-color-warning-50: rgb(155, 115, 0) !important;
|
||||
--pwt-color-warning-40: rgb(130, 95, 0) !important;
|
||||
--pwt-color-warning-30: rgb(105, 75, 0) !important;
|
||||
--pwt-color-warning-20: rgb(80, 56, 0) !important;
|
||||
--pwt-color-warning-15: rgb(64, 44, 0) !important;
|
||||
--pwt-color-warning-10: rgb(48, 32, 0) !important;
|
||||
--pwt-color-warning-5: rgb(28, 18, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Solarized Light Background scale (#fdf6e3 base3) */
|
||||
--pwt-color-neutral-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-99: rgb(254, 250, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(253, 246, 227) !important;
|
||||
--pwt-color-neutral-90: rgb(238, 232, 213) !important;
|
||||
--pwt-color-neutral-80: rgb(220, 215, 200) !important;
|
||||
--pwt-color-neutral-70: rgb(195, 192, 180) !important;
|
||||
--pwt-color-neutral-60: rgb(147, 161, 161) !important;
|
||||
--pwt-color-neutral-50: rgb(131, 148, 150) !important;
|
||||
--pwt-color-neutral-40: rgb(101, 123, 131) !important;
|
||||
--pwt-color-neutral-30: rgb(88, 110, 117) !important;
|
||||
--pwt-color-neutral-20: rgb(73, 95, 102) !important;
|
||||
--pwt-color-neutral-15: rgb(56, 76, 82) !important;
|
||||
--pwt-color-neutral-10: rgb(42, 60, 65) !important;
|
||||
--pwt-color-neutral-5: rgb(28, 42, 46) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — Solarized Light content tones */
|
||||
--pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(254, 250, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(252, 248, 232) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(242, 236, 218) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(225, 220, 205) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(200, 196, 185) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(150, 162, 164) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(134, 150, 152) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(105, 126, 134) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(90, 112, 120) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(76, 98, 105) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(60, 80, 86) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(46, 64, 70) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(30, 45, 50) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (light surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
|
||||
--pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
|
||||
--pwt-color-primary: var(--pwt-color-primary-40) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-90) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
|
||||
background: var(--pwt-color-neutral-95) !important;
|
||||
color: var(--pwt-color-neutral-10) !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo — swap to dark variant for light background ===== */
|
||||
img[src*="proxmox_logo_white"] {
|
||||
content: url("/images/proxmox_logo.svg") !important;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
/*!TheRaiwy Dark*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: TheRaiwy Dark
|
||||
* Overrides the PWT Material Design tonal color system with TheRaiwy cyber palette
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* ─── TheRaiwy Cyber Dark Palette ────────────────────────────────
|
||||
* Accent Red: #dc2626 Emphasis: #c62222
|
||||
* Success: #22c55e Danger: #dc2626
|
||||
* Attention: #cc9903 Text: #f0ede8
|
||||
* Canvas: #080808 Surface: #0d0d0d
|
||||
* Border: #2e2e31
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — TheRaiwy Accent Red (#dc2626) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(255, 247, 247) !important;
|
||||
--pwt-color-primary-95: rgb(255, 226, 226) !important;
|
||||
--pwt-color-primary-90: rgb(255, 202, 202) !important;
|
||||
--pwt-color-primary-80: rgb(255, 148, 148) !important;
|
||||
--pwt-color-primary-70: rgb(240, 90, 90) !important;
|
||||
--pwt-color-primary-60: rgb(220, 38, 38) !important;
|
||||
--pwt-color-primary-50: rgb(198, 30, 30) !important;
|
||||
--pwt-color-primary-40: rgb(163, 24, 24) !important;
|
||||
--pwt-color-primary-30: rgb(128, 18, 18) !important;
|
||||
--pwt-color-primary-20: rgb(92, 12, 12) !important;
|
||||
--pwt-color-primary-15: rgb(66, 8, 8) !important;
|
||||
--pwt-color-primary-10: rgb(42, 5, 5) !important;
|
||||
--pwt-color-primary-5: rgb(20, 2, 2) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — TheRaiwy Muted (#6b6966) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(247, 246, 245) !important;
|
||||
--pwt-color-secondary-95: rgb(230, 228, 226) !important;
|
||||
--pwt-color-secondary-90: rgb(212, 210, 207) !important;
|
||||
--pwt-color-secondary-80: rgb(176, 174, 170) !important;
|
||||
--pwt-color-secondary-70: rgb(148, 145, 141) !important;
|
||||
--pwt-color-secondary-60: rgb(120, 118, 114) !important;
|
||||
--pwt-color-secondary-50: rgb(107, 105, 102) !important;
|
||||
--pwt-color-secondary-40: rgb(90, 88, 84) !important;
|
||||
--pwt-color-secondary-30: rgb(72, 70, 67) !important;
|
||||
--pwt-color-secondary-20: rgb(54, 53, 50) !important;
|
||||
--pwt-color-secondary-15: rgb(38, 37, 35) !important;
|
||||
--pwt-color-secondary-10: rgb(22, 21, 20) !important;
|
||||
--pwt-color-secondary-5: rgb(12, 11, 10) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — TheRaiwy Warm Copper (#c08465) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 244) !important;
|
||||
--pwt-color-tertiary-95: rgb(250, 234, 224) !important;
|
||||
--pwt-color-tertiary-90: rgb(240, 218, 204) !important;
|
||||
--pwt-color-tertiary-80: rgb(220, 186, 166) !important;
|
||||
--pwt-color-tertiary-70: rgb(200, 156, 130) !important;
|
||||
--pwt-color-tertiary-60: rgb(182, 128, 96) !important;
|
||||
--pwt-color-tertiary-50: rgb(162, 106, 74) !important;
|
||||
--pwt-color-tertiary-40: rgb(140, 86, 56) !important;
|
||||
--pwt-color-tertiary-30: rgb(116, 66, 40) !important;
|
||||
--pwt-color-tertiary-20: rgb(92, 48, 26) !important;
|
||||
--pwt-color-tertiary-15: rgb(74, 36, 18) !important;
|
||||
--pwt-color-tertiary-10: rgb(56, 24, 10) !important;
|
||||
--pwt-color-tertiary-5: rgb(34, 12, 4) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — TheRaiwy Green (#22c55e) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(242, 255, 246) !important;
|
||||
--pwt-color-success-95: rgb(210, 250, 222) !important;
|
||||
--pwt-color-success-90: rgb(172, 242, 196) !important;
|
||||
--pwt-color-success-80: rgb(114, 225, 150) !important;
|
||||
--pwt-color-success-70: rgb(60, 200, 110) !important;
|
||||
--pwt-color-success-60: rgb(34, 197, 94) !important;
|
||||
--pwt-color-success-50: rgb(22, 163, 74) !important;
|
||||
--pwt-color-success-40: rgb(16, 138, 60) !important;
|
||||
--pwt-color-success-30: rgb(10, 112, 46) !important;
|
||||
--pwt-color-success-20: rgb(6, 86, 34) !important;
|
||||
--pwt-color-success-15: rgb(2, 68, 24) !important;
|
||||
--pwt-color-success-10: rgb(0, 50, 16) !important;
|
||||
--pwt-color-success-5: rgb(0, 30, 8) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — TheRaiwy Red (#dc2626) */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 247, 247) !important;
|
||||
--pwt-color-error-95: rgb(255, 226, 226) !important;
|
||||
--pwt-color-error-90: rgb(255, 202, 202) !important;
|
||||
--pwt-color-error-80: rgb(255, 148, 148) !important;
|
||||
--pwt-color-error-70: rgb(240, 90, 90) !important;
|
||||
--pwt-color-error-60: rgb(220, 38, 38) !important;
|
||||
--pwt-color-error-50: rgb(185, 28, 28) !important;
|
||||
--pwt-color-error-40: rgb(153, 20, 20) !important;
|
||||
--pwt-color-error-30: rgb(120, 12, 12) !important;
|
||||
--pwt-color-error-20: rgb(88, 6, 6) !important;
|
||||
--pwt-color-error-15: rgb(64, 2, 2) !important;
|
||||
--pwt-color-error-10: rgb(44, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(22, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — TheRaiwy Amber (#cc9903) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 242) !important;
|
||||
--pwt-color-warning-95: rgb(255, 244, 206) !important;
|
||||
--pwt-color-warning-90: rgb(252, 232, 166) !important;
|
||||
--pwt-color-warning-80: rgb(240, 210, 106) !important;
|
||||
--pwt-color-warning-70: rgb(220, 180, 50) !important;
|
||||
--pwt-color-warning-60: rgb(204, 153, 3) !important;
|
||||
--pwt-color-warning-50: rgb(176, 130, 2) !important;
|
||||
--pwt-color-warning-40: rgb(148, 108, 0) !important;
|
||||
--pwt-color-warning-30: rgb(118, 84, 0) !important;
|
||||
--pwt-color-warning-20: rgb(90, 62, 0) !important;
|
||||
--pwt-color-warning-15: rgb(68, 46, 0) !important;
|
||||
--pwt-color-warning-10: rgb(48, 32, 0) !important;
|
||||
--pwt-color-warning-5: rgb(26, 16, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — TheRaiwy Dark surface scale */
|
||||
--pwt-color-neutral-100: rgb(240, 237, 232) !important;
|
||||
--pwt-color-neutral-99: rgb(224, 222, 218) !important;
|
||||
--pwt-color-neutral-95: rgb(198, 196, 192) !important;
|
||||
--pwt-color-neutral-90: rgb(170, 168, 165) !important;
|
||||
--pwt-color-neutral-80: rgb(136, 134, 131) !important;
|
||||
--pwt-color-neutral-70: rgb(108, 106, 104) !important;
|
||||
--pwt-color-neutral-60: rgb(90, 88, 86) !important;
|
||||
--pwt-color-neutral-50: rgb(72, 70, 68) !important;
|
||||
--pwt-color-neutral-40: rgb(54, 53, 50) !important;
|
||||
--pwt-color-neutral-30: rgb(46, 46, 49) !important;
|
||||
--pwt-color-neutral-20: rgb(22, 22, 24) !important;
|
||||
--pwt-color-neutral-15: rgb(13, 13, 13) !important;
|
||||
--pwt-color-neutral-10: rgb(8, 8, 8) !important;
|
||||
--pwt-color-neutral-5: rgb(4, 4, 4) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — TheRaiwy subtle variant */
|
||||
--pwt-color-neutral-alt-100: rgb(240, 237, 232) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(226, 224, 220) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(202, 200, 196) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(176, 174, 170) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(142, 140, 136) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(114, 112, 108) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(96, 94, 90) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(78, 76, 72) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(60, 58, 56) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(50, 48, 46) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(30, 28, 26) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(18, 17, 16) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(12, 11, 10) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(6, 6, 6) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-15) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-100) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-100) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-100) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-30) !important;
|
||||
--pwt-color-shadow: var(--pwt-color-neutral-0) !important;
|
||||
background: var(--pwt-color-neutral-10) !important;
|
||||
color: var(--pwt-color-neutral-100) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-10) !important;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*!Tokyo Night*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: Tokyo Night
|
||||
* Overrides the PWT Material Design tonal color system with Tokyo Night palette
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* ─── Tokyo Night Palette ───────────────────────────────────────
|
||||
* Accent Blue: #7aa2f7 Purple: #9d7cd8
|
||||
* Green: #9ece6a Yellow: #e0af68
|
||||
* Red: #f7768e Cyan: #7dcfff
|
||||
* Text: #c0caf5 Base: #1a1b26
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary — Tokyo Night Blue (#7aa2f7) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 252, 255) !important;
|
||||
--pwt-color-primary-95: rgb(225, 238, 255) !important;
|
||||
--pwt-color-primary-90: rgb(200, 222, 255) !important;
|
||||
--pwt-color-primary-80: rgb(155, 192, 252) !important;
|
||||
--pwt-color-primary-70: rgb(122, 162, 247) !important;
|
||||
--pwt-color-primary-60: rgb(98, 140, 225) !important;
|
||||
--pwt-color-primary-50: rgb(78, 118, 200) !important;
|
||||
--pwt-color-primary-40: rgb(58, 96, 175) !important;
|
||||
--pwt-color-primary-30: rgb(40, 75, 148) !important;
|
||||
--pwt-color-primary-20: rgb(25, 55, 118) !important;
|
||||
--pwt-color-primary-15: rgb(18, 44, 98) !important;
|
||||
--pwt-color-primary-10: rgb(10, 32, 78) !important;
|
||||
--pwt-color-primary-5: rgb(4, 18, 50) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — Tokyo Night Purple (#9d7cd8) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(252, 250, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(238, 228, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(222, 210, 250) !important;
|
||||
--pwt-color-secondary-80: rgb(188, 168, 235) !important;
|
||||
--pwt-color-secondary-70: rgb(157, 124, 216) !important;
|
||||
--pwt-color-secondary-60: rgb(132, 102, 192) !important;
|
||||
--pwt-color-secondary-50: rgb(108, 80, 168) !important;
|
||||
--pwt-color-secondary-40: rgb(85, 60, 145) !important;
|
||||
--pwt-color-secondary-30: rgb(65, 42, 120) !important;
|
||||
--pwt-color-secondary-20: rgb(46, 26, 95) !important;
|
||||
--pwt-color-secondary-15: rgb(36, 18, 78) !important;
|
||||
--pwt-color-secondary-10: rgb(28, 12, 62) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 5, 40) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — Tokyo Night Cyan (#7dcfff) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(248, 254, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(222, 248, 255) !important;
|
||||
--pwt-color-tertiary-90: rgb(195, 238, 255) !important;
|
||||
--pwt-color-tertiary-80: rgb(150, 218, 255) !important;
|
||||
--pwt-color-tertiary-70: rgb(125, 207, 255) !important;
|
||||
--pwt-color-tertiary-60: rgb(98, 182, 230) !important;
|
||||
--pwt-color-tertiary-50: rgb(75, 155, 205) !important;
|
||||
--pwt-color-tertiary-40: rgb(55, 130, 178) !important;
|
||||
--pwt-color-tertiary-30: rgb(38, 105, 150) !important;
|
||||
--pwt-color-tertiary-20: rgb(22, 80, 120) !important;
|
||||
--pwt-color-tertiary-15: rgb(14, 65, 100) !important;
|
||||
--pwt-color-tertiary-10: rgb(8, 48, 78) !important;
|
||||
--pwt-color-tertiary-5: rgb(2, 30, 50) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — Tokyo Night Green (#9ece6a) */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(248, 255, 242) !important;
|
||||
--pwt-color-success-95: rgb(225, 248, 200) !important;
|
||||
--pwt-color-success-90: rgb(200, 238, 165) !important;
|
||||
--pwt-color-success-80: rgb(175, 220, 130) !important;
|
||||
--pwt-color-success-70: rgb(158, 206, 106) !important;
|
||||
--pwt-color-success-60: rgb(132, 180, 82) !important;
|
||||
--pwt-color-success-50: rgb(108, 155, 60) !important;
|
||||
--pwt-color-success-40: rgb(86, 130, 42) !important;
|
||||
--pwt-color-success-30: rgb(66, 105, 25) !important;
|
||||
--pwt-color-success-20: rgb(48, 80, 12) !important;
|
||||
--pwt-color-success-15: rgb(36, 62, 5) !important;
|
||||
--pwt-color-success-10: rgb(26, 46, 0) !important;
|
||||
--pwt-color-success-5: rgb(14, 28, 0) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — Tokyo Night Red (#f7768e) */
|
||||
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-error-99: rgb(255, 249, 250) !important;
|
||||
--pwt-color-error-95: rgb(255, 232, 236) !important;
|
||||
--pwt-color-error-90: rgb(255, 210, 218) !important;
|
||||
--pwt-color-error-80: rgb(252, 165, 180) !important;
|
||||
--pwt-color-error-70: rgb(247, 118, 142) !important;
|
||||
--pwt-color-error-60: rgb(225, 92, 118) !important;
|
||||
--pwt-color-error-50: rgb(200, 68, 95) !important;
|
||||
--pwt-color-error-40: rgb(172, 46, 72) !important;
|
||||
--pwt-color-error-30: rgb(145, 26, 52) !important;
|
||||
--pwt-color-error-20: rgb(112, 10, 35) !important;
|
||||
--pwt-color-error-15: rgb(90, 4, 24) !important;
|
||||
--pwt-color-error-10: rgb(68, 0, 14) !important;
|
||||
--pwt-color-error-5: rgb(45, 0, 6) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — Tokyo Night Yellow (#e0af68) */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 246) !important;
|
||||
--pwt-color-warning-95: rgb(255, 242, 215) !important;
|
||||
--pwt-color-warning-90: rgb(248, 228, 180) !important;
|
||||
--pwt-color-warning-80: rgb(238, 200, 138) !important;
|
||||
--pwt-color-warning-70: rgb(224, 175, 104) !important;
|
||||
--pwt-color-warning-60: rgb(200, 152, 80) !important;
|
||||
--pwt-color-warning-50: rgb(175, 130, 58) !important;
|
||||
--pwt-color-warning-40: rgb(150, 108, 38) !important;
|
||||
--pwt-color-warning-30: rgb(122, 85, 20) !important;
|
||||
--pwt-color-warning-20: rgb(95, 65, 8) !important;
|
||||
--pwt-color-warning-15: rgb(75, 50, 2) !important;
|
||||
--pwt-color-warning-10: rgb(55, 36, 0) !important;
|
||||
--pwt-color-warning-5: rgb(35, 22, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — Tokyo Night Background scale */
|
||||
--pwt-color-neutral-100: rgb(192, 202, 245) !important;
|
||||
--pwt-color-neutral-99: rgb(185, 196, 240) !important;
|
||||
--pwt-color-neutral-95: rgb(169, 177, 214) !important;
|
||||
--pwt-color-neutral-90: rgb(148, 160, 198) !important;
|
||||
--pwt-color-neutral-80: rgb(125, 138, 178) !important;
|
||||
--pwt-color-neutral-70: rgb(105, 118, 158) !important;
|
||||
--pwt-color-neutral-60: rgb(86, 98, 138) !important;
|
||||
--pwt-color-neutral-50: rgb(68, 80, 118) !important;
|
||||
--pwt-color-neutral-40: rgb(52, 62, 98) !important;
|
||||
--pwt-color-neutral-30: rgb(36, 40, 59) !important;
|
||||
--pwt-color-neutral-20: rgb(31, 35, 53) !important;
|
||||
--pwt-color-neutral-15: rgb(26, 27, 38) !important;
|
||||
--pwt-color-neutral-10: rgb(22, 22, 30) !important;
|
||||
--pwt-color-neutral-5: rgb(14, 14, 20) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt */
|
||||
--pwt-color-neutral-alt-100: rgb(192, 202, 245) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(188, 198, 242) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(172, 182, 225) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(152, 162, 205) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(128, 140, 182) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(108, 120, 162) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(88, 100, 142) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(70, 82, 122) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(54, 65, 102) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(38, 48, 78) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(28, 34, 56) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(22, 26, 42) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(18, 20, 32) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(12, 12, 22) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/*!UniFi Light*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: UniFi Light
|
||||
* Overrides the PWT Material Design tonal color system with UniFi Light palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Ubiquiti Design System
|
||||
*
|
||||
* ─── UniFi Light Palette ──────────────────────────────────────
|
||||
* Blue (accent): #006FFF Secondary: #00A4E4
|
||||
* Green: #00C853 Red: #F44336
|
||||
* Yellow: #FFB300 Purple: #7B1FA2
|
||||
* Text (dark): #1A1A1A Background:#F5F6FA
|
||||
* Surface: #FFFFFF Border: #E0E0E0
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — UniFi Blue (#006FFF) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(248, 251, 255) !important;
|
||||
--pwt-color-primary-95: rgb(215, 232, 255) !important;
|
||||
--pwt-color-primary-90: rgb(178, 212, 255) !important;
|
||||
--pwt-color-primary-80: rgb(105, 170, 255) !important;
|
||||
--pwt-color-primary-70: rgb(50, 135, 255) !important;
|
||||
--pwt-color-primary-60: rgb(0, 111, 255) !important;
|
||||
--pwt-color-primary-50: rgb(0, 92, 218) !important;
|
||||
--pwt-color-primary-40: rgb(0, 74, 182) !important;
|
||||
--pwt-color-primary-30: rgb(0, 56, 145) !important;
|
||||
--pwt-color-primary-20: rgb(0, 40, 110) !important;
|
||||
--pwt-color-primary-15: rgb(0, 30, 88) !important;
|
||||
--pwt-color-primary-10: rgb(0, 22, 68) !important;
|
||||
--pwt-color-primary-5: rgb(0, 12, 42) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — UniFi Teal (#00A4E4) tonal scale */
|
||||
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-secondary-99: rgb(245, 253, 255) !important;
|
||||
--pwt-color-secondary-95: rgb(210, 245, 255) !important;
|
||||
--pwt-color-secondary-90: rgb(170, 232, 252) !important;
|
||||
--pwt-color-secondary-80: rgb(100, 202, 238) !important;
|
||||
--pwt-color-secondary-70: rgb(40, 178, 232) !important;
|
||||
--pwt-color-secondary-60: rgb(0, 164, 228) !important;
|
||||
--pwt-color-secondary-50: rgb(0, 138, 198) !important;
|
||||
--pwt-color-secondary-40: rgb(0, 112, 165) !important;
|
||||
--pwt-color-secondary-30: rgb(0, 88, 132) !important;
|
||||
--pwt-color-secondary-20: rgb(0, 65, 100) !important;
|
||||
--pwt-color-secondary-15: rgb(0, 50, 80) !important;
|
||||
--pwt-color-secondary-10: rgb(0, 38, 60) !important;
|
||||
--pwt-color-secondary-5: rgb(0, 22, 38) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — UniFi Purple (#7B1FA2) tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(255, 248, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(248, 225, 255) !important;
|
||||
--pwt-color-tertiary-90: rgb(235, 198, 255) !important;
|
||||
--pwt-color-tertiary-80: rgb(208, 148, 242) !important;
|
||||
--pwt-color-tertiary-70: rgb(175, 95, 215) !important;
|
||||
--pwt-color-tertiary-60: rgb(123, 31, 162) !important;
|
||||
--pwt-color-tertiary-50: rgb(105, 20, 140) !important;
|
||||
--pwt-color-tertiary-40: rgb(85, 12, 118) !important;
|
||||
--pwt-color-tertiary-30: rgb(68, 5, 95) !important;
|
||||
--pwt-color-tertiary-20: rgb(50, 0, 72) !important;
|
||||
--pwt-color-tertiary-15: rgb(40, 0, 58) !important;
|
||||
--pwt-color-tertiary-10: rgb(28, 0, 42) !important;
|
||||
--pwt-color-tertiary-5: rgb(16, 0, 25) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — UniFi Green (#00C853) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(245, 255, 248) !important;
|
||||
--pwt-color-success-95: rgb(200, 255, 218) !important;
|
||||
--pwt-color-success-90: rgb(150, 248, 185) !important;
|
||||
--pwt-color-success-80: rgb(80, 228, 138) !important;
|
||||
--pwt-color-success-70: rgb(20, 210, 100) !important;
|
||||
--pwt-color-success-60: rgb(0, 200, 83) !important;
|
||||
--pwt-color-success-50: rgb(0, 172, 68) !important;
|
||||
--pwt-color-success-40: rgb(0, 142, 52) !important;
|
||||
--pwt-color-success-30: rgb(0, 115, 38) !important;
|
||||
--pwt-color-success-20: rgb(0, 88, 26) !important;
|
||||
--pwt-color-success-15: rgb(0, 70, 18) !important;
|
||||
--pwt-color-success-10: rgb(0, 52, 12) !important;
|
||||
--pwt-color-success-5: rgb(0, 32, 5) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — UniFi Red (#F44336) 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, 218, 215) !important;
|
||||
--pwt-color-error-90: rgb(255, 185, 180) !important;
|
||||
--pwt-color-error-80: rgb(252, 128, 118) !important;
|
||||
--pwt-color-error-70: rgb(248, 88, 75) !important;
|
||||
--pwt-color-error-60: rgb(244, 67, 54) !important;
|
||||
--pwt-color-error-50: rgb(215, 48, 38) !important;
|
||||
--pwt-color-error-40: rgb(182, 32, 24) !important;
|
||||
--pwt-color-error-30: rgb(148, 18, 12) !important;
|
||||
--pwt-color-error-20: rgb(115, 6, 2) !important;
|
||||
--pwt-color-error-15: rgb(92, 0, 0) !important;
|
||||
--pwt-color-error-10: rgb(68, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(42, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — UniFi Amber (#FFB300) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 242) !important;
|
||||
--pwt-color-warning-95: rgb(255, 240, 195) !important;
|
||||
--pwt-color-warning-90: rgb(255, 225, 145) !important;
|
||||
--pwt-color-warning-80: rgb(255, 200, 60) !important;
|
||||
--pwt-color-warning-70: rgb(255, 185, 15) !important;
|
||||
--pwt-color-warning-60: rgb(255, 179, 0) !important;
|
||||
--pwt-color-warning-50: rgb(222, 152, 0) !important;
|
||||
--pwt-color-warning-40: rgb(188, 126, 0) !important;
|
||||
--pwt-color-warning-30: rgb(155, 100, 0) !important;
|
||||
--pwt-color-warning-20: rgb(120, 76, 0) !important;
|
||||
--pwt-color-warning-15: rgb(96, 58, 0) !important;
|
||||
--pwt-color-warning-10: rgb(72, 42, 0) !important;
|
||||
--pwt-color-warning-5: rgb(44, 24, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — UniFi Light Background scale (#F5F6FA base) */
|
||||
--pwt-color-neutral-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-99: rgb(250, 250, 252) !important;
|
||||
--pwt-color-neutral-95: rgb(245, 246, 250) !important;
|
||||
--pwt-color-neutral-90: rgb(235, 236, 242) !important;
|
||||
--pwt-color-neutral-80: rgb(224, 224, 230) !important;
|
||||
--pwt-color-neutral-70: rgb(200, 200, 210) !important;
|
||||
--pwt-color-neutral-60: rgb(170, 172, 185) !important;
|
||||
--pwt-color-neutral-50: rgb(140, 142, 158) !important;
|
||||
--pwt-color-neutral-40: rgb(108, 110, 128) !important;
|
||||
--pwt-color-neutral-30: rgb(82, 84, 100) !important;
|
||||
--pwt-color-neutral-20: rgb(58, 60, 75) !important;
|
||||
--pwt-color-neutral-15: rgb(42, 44, 58) !important;
|
||||
--pwt-color-neutral-10: rgb(26, 26, 38) !important;
|
||||
--pwt-color-neutral-5: rgb(16, 16, 24) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — UniFi Light border/surface tones */
|
||||
--pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(250, 251, 254) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(242, 244, 248) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(232, 234, 240) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(218, 220, 228) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(196, 198, 208) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(168, 170, 182) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(138, 140, 155) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(106, 108, 126) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(80, 82, 98) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(56, 58, 72) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(42, 44, 56) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(28, 28, 40) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(16, 16, 26) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (light surfaces) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
--pwt-color-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
|
||||
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
|
||||
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
|
||||
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
|
||||
--pwt-color-background: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
|
||||
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
|
||||
--pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
|
||||
--pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
|
||||
--pwt-color-primary: var(--pwt-color-primary-40) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-90) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
|
||||
background: var(--pwt-color-neutral-95) !important;
|
||||
color: var(--pwt-color-neutral-10) !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
/* ===== Logo — swap to dark variant for light background ===== */
|
||||
img[src*="proxmox_logo_white"] {
|
||||
content: url("/images/proxmox_logo.svg") !important;
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
/*!UniFi*/
|
||||
/*
|
||||
* ProxMorph PDM Theme: UniFi
|
||||
* Overrides the PWT Material Design tonal color system with UniFi palette
|
||||
* Version: 1.0.0
|
||||
* Author: ProxMorph / Ubiquiti Design System
|
||||
*
|
||||
* ─── UniFi Palette ─────────────────────────────────────────────
|
||||
* Accent Blue: #006EFF Blue Hover: #4797FF
|
||||
* Success: #37BE5F Warning: #f5a623
|
||||
* Danger: #f03a3e Text: #DEE0E3
|
||||
* Base: #131416 Surface: #282B2F
|
||||
* Elevated: #34383D
|
||||
*/
|
||||
|
||||
/* ===== Tonal Color Overrides ===== */
|
||||
:root {
|
||||
/* Primary — UniFi Blue (#006EFF) tonal scale */
|
||||
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-primary-99: rgb(245, 250, 255) !important;
|
||||
--pwt-color-primary-95: rgb(220, 238, 255) !important;
|
||||
--pwt-color-primary-90: rgb(190, 222, 255) !important;
|
||||
--pwt-color-primary-80: rgb(130, 190, 255) !important;
|
||||
--pwt-color-primary-70: rgb(71, 151, 255) !important;
|
||||
--pwt-color-primary-60: rgb(0, 110, 255) !important;
|
||||
--pwt-color-primary-50: rgb(0, 90, 210) !important;
|
||||
--pwt-color-primary-40: rgb(0, 72, 170) !important;
|
||||
--pwt-color-primary-30: rgb(0, 55, 135) !important;
|
||||
--pwt-color-primary-20: rgb(0, 40, 100) !important;
|
||||
--pwt-color-primary-15: rgb(0, 30, 80) !important;
|
||||
--pwt-color-primary-10: rgb(0, 22, 62) !important;
|
||||
--pwt-color-primary-5: rgb(0, 12, 40) !important;
|
||||
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Secondary — UniFi Dim Blue 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(228, 235, 248) !important;
|
||||
--pwt-color-secondary-90: rgb(208, 218, 238) !important;
|
||||
--pwt-color-secondary-80: rgb(175, 190, 215) !important;
|
||||
--pwt-color-secondary-70: rgb(145, 162, 192) !important;
|
||||
--pwt-color-secondary-60: rgb(115, 124, 135) !important;
|
||||
--pwt-color-secondary-50: rgb(95, 105, 118) !important;
|
||||
--pwt-color-secondary-40: rgb(75, 85, 98) !important;
|
||||
--pwt-color-secondary-30: rgb(52, 56, 61) !important;
|
||||
--pwt-color-secondary-20: rgb(40, 43, 47) !important;
|
||||
--pwt-color-secondary-15: rgb(32, 35, 38) !important;
|
||||
--pwt-color-secondary-10: rgb(24, 26, 30) !important;
|
||||
--pwt-color-secondary-5: rgb(16, 17, 20) !important;
|
||||
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Tertiary — UniFi Cyan/Teal tonal scale */
|
||||
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-tertiary-99: rgb(248, 254, 255) !important;
|
||||
--pwt-color-tertiary-95: rgb(225, 248, 255) !important;
|
||||
--pwt-color-tertiary-90: rgb(195, 238, 252) !important;
|
||||
--pwt-color-tertiary-80: rgb(140, 215, 240) !important;
|
||||
--pwt-color-tertiary-70: rgb(90, 192, 225) !important;
|
||||
--pwt-color-tertiary-60: rgb(50, 168, 200) !important;
|
||||
--pwt-color-tertiary-50: rgb(20, 142, 175) !important;
|
||||
--pwt-color-tertiary-40: rgb(0, 118, 150) !important;
|
||||
--pwt-color-tertiary-30: rgb(0, 92, 120) !important;
|
||||
--pwt-color-tertiary-20: rgb(0, 68, 92) !important;
|
||||
--pwt-color-tertiary-15: rgb(0, 52, 72) !important;
|
||||
--pwt-color-tertiary-10: rgb(0, 38, 55) !important;
|
||||
--pwt-color-tertiary-5: rgb(0, 22, 35) !important;
|
||||
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Success — UniFi Green (#37BE5F) tonal scale */
|
||||
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-success-99: rgb(242, 255, 246) !important;
|
||||
--pwt-color-success-95: rgb(205, 255, 220) !important;
|
||||
--pwt-color-success-90: rgb(160, 248, 185) !important;
|
||||
--pwt-color-success-80: rgb(100, 220, 135) !important;
|
||||
--pwt-color-success-70: rgb(55, 190, 95) !important;
|
||||
--pwt-color-success-60: rgb(40, 165, 78) !important;
|
||||
--pwt-color-success-50: rgb(25, 140, 60) !important;
|
||||
--pwt-color-success-40: rgb(12, 115, 45) !important;
|
||||
--pwt-color-success-30: rgb(0, 90, 32) !important;
|
||||
--pwt-color-success-20: rgb(0, 66, 20) !important;
|
||||
--pwt-color-success-15: rgb(0, 50, 14) !important;
|
||||
--pwt-color-success-10: rgb(0, 36, 8) !important;
|
||||
--pwt-color-success-5: rgb(0, 22, 4) !important;
|
||||
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Error — UniFi Danger (#f03a3e) 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(255, 200, 202) !important;
|
||||
--pwt-color-error-80: rgb(255, 145, 148) !important;
|
||||
--pwt-color-error-70: rgb(248, 95, 98) !important;
|
||||
--pwt-color-error-60: rgb(240, 58, 62) !important;
|
||||
--pwt-color-error-50: rgb(210, 40, 44) !important;
|
||||
--pwt-color-error-40: rgb(180, 24, 28) !important;
|
||||
--pwt-color-error-30: rgb(148, 10, 14) !important;
|
||||
--pwt-color-error-20: rgb(110, 4, 8) !important;
|
||||
--pwt-color-error-15: rgb(88, 0, 2) !important;
|
||||
--pwt-color-error-10: rgb(65, 0, 0) !important;
|
||||
--pwt-color-error-5: rgb(42, 0, 0) !important;
|
||||
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Warning — UniFi Warning (#f5a623) tonal scale */
|
||||
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
||||
--pwt-color-warning-99: rgb(255, 252, 245) !important;
|
||||
--pwt-color-warning-95: rgb(255, 242, 210) !important;
|
||||
--pwt-color-warning-90: rgb(255, 228, 168) !important;
|
||||
--pwt-color-warning-80: rgb(252, 205, 105) !important;
|
||||
--pwt-color-warning-70: rgb(245, 166, 35) !important;
|
||||
--pwt-color-warning-60: rgb(218, 145, 20) !important;
|
||||
--pwt-color-warning-50: rgb(190, 122, 8) !important;
|
||||
--pwt-color-warning-40: rgb(158, 100, 0) !important;
|
||||
--pwt-color-warning-30: rgb(125, 78, 0) !important;
|
||||
--pwt-color-warning-20: rgb(92, 56, 0) !important;
|
||||
--pwt-color-warning-15: rgb(72, 42, 0) !important;
|
||||
--pwt-color-warning-10: rgb(52, 30, 0) !important;
|
||||
--pwt-color-warning-5: rgb(32, 18, 0) !important;
|
||||
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral — UniFi Dark Background scale */
|
||||
--pwt-color-neutral-100: rgb(249, 250, 250) !important;
|
||||
--pwt-color-neutral-99: rgb(240, 242, 244) !important;
|
||||
--pwt-color-neutral-95: rgb(222, 224, 227) !important;
|
||||
--pwt-color-neutral-90: rgb(200, 205, 210) !important;
|
||||
--pwt-color-neutral-80: rgb(183, 188, 194) !important;
|
||||
--pwt-color-neutral-70: rgb(155, 162, 172) !important;
|
||||
--pwt-color-neutral-60: rgb(115, 124, 135) !important;
|
||||
--pwt-color-neutral-50: rgb(90, 98, 108) !important;
|
||||
--pwt-color-neutral-40: rgb(68, 72, 78) !important;
|
||||
--pwt-color-neutral-30: rgb(52, 56, 61) !important;
|
||||
--pwt-color-neutral-20: rgb(40, 43, 47) !important;
|
||||
--pwt-color-neutral-15: rgb(28, 30, 34) !important;
|
||||
--pwt-color-neutral-10: rgb(19, 20, 22) !important;
|
||||
--pwt-color-neutral-5: rgb(12, 12, 14) !important;
|
||||
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
||||
|
||||
/* Neutral Alt — UniFi Alt tones */
|
||||
--pwt-color-neutral-alt-100: rgb(249, 250, 250) !important;
|
||||
--pwt-color-neutral-alt-99: rgb(242, 245, 248) !important;
|
||||
--pwt-color-neutral-alt-95: rgb(225, 230, 238) !important;
|
||||
--pwt-color-neutral-alt-90: rgb(208, 215, 225) !important;
|
||||
--pwt-color-neutral-alt-80: rgb(178, 188, 200) !important;
|
||||
--pwt-color-neutral-alt-70: rgb(148, 158, 172) !important;
|
||||
--pwt-color-neutral-alt-60: rgb(118, 128, 142) !important;
|
||||
--pwt-color-neutral-alt-50: rgb(92, 102, 115) !important;
|
||||
--pwt-color-neutral-alt-40: rgb(68, 76, 88) !important;
|
||||
--pwt-color-neutral-alt-30: rgb(48, 54, 64) !important;
|
||||
--pwt-color-neutral-alt-20: rgb(35, 40, 48) !important;
|
||||
--pwt-color-neutral-alt-15: rgb(26, 30, 36) !important;
|
||||
--pwt-color-neutral-alt-10: rgb(18, 20, 26) !important;
|
||||
--pwt-color-neutral-alt-5: rgb(10, 12, 16) !important;
|
||||
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* ===== Semantic Color Remapping (darker surfaces to match PVE) ===== */
|
||||
:root.pwt-dark-mode {
|
||||
/* Flat surfaces — panels slightly elevated above background */
|
||||
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
||||
--pwt-color-on-surface: var(--pwt-color-neutral-95) !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;
|
||||
|
||||
/* Vivid primary — match PVE's #006EFF accent */
|
||||
--pwt-color-primary: var(--pwt-color-primary-60) !important;
|
||||
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
||||
--pwt-color-primary-container: var(--pwt-color-primary-30) !important;
|
||||
--pwt-color-on-primary-container: var(--pwt-color-primary-90) !important;
|
||||
|
||||
background: var(--pwt-color-neutral-10) !important;
|
||||
color: var(--pwt-color-neutral-95) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(19, 20, 22) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user