183 lines
9.4 KiB
CSS
183 lines
9.4 KiB
CSS
/*!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;
|
|
}
|