Initial commit — ProxMorph with TheRaiwy Dark cyber theme
This commit is contained in:
TheRaiwy
File diff suppressed because one or more lines are too long
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* ProxMorph GitHub Dark — Checkbox/Radio Init Patch
|
||||
*
|
||||
* Problem: ExtJS pre-selects checkboxes/radios by setting background-position
|
||||
* to "0px -15px" (sprite selected state) WITHOUT adding the .x-form-cb-checked
|
||||
* class to the .x-form-item ancestor. Our CSS relies on that class.
|
||||
*
|
||||
* Fix: Scan all .x-form-cb spans, detect the -15px sprite offset, and add
|
||||
* .x-form-cb-checked to the nearest .x-form-item ancestor so our CSS rules fire.
|
||||
*
|
||||
* Runs on load + via MutationObserver whenever new dialogs are added to the DOM.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function isGithubDarkActive() {
|
||||
return !!document.querySelector('link[href*="theme-github-dark.css"]');
|
||||
}
|
||||
|
||||
function fixInitialCbState() {
|
||||
if (!isGithubDarkActive()) return;
|
||||
|
||||
document.querySelectorAll('.x-form-cb').forEach(function (span) {
|
||||
var bgPos = window.getComputedStyle(span).backgroundPosition;
|
||||
if (bgPos && bgPos.indexOf('-15px') !== -1) {
|
||||
var fieldItem = span.closest('.x-form-item');
|
||||
if (fieldItem && !fieldItem.classList.contains('x-form-cb-checked')) {
|
||||
fieldItem.classList.add('x-form-cb-checked');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run once after the page is fully loaded
|
||||
if (document.readyState === 'complete') {
|
||||
setTimeout(fixInitialCbState, 100);
|
||||
} else {
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(fixInitialCbState, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Re-run whenever new nodes are added (dialog opens, panel navigation, etc.)
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
var hasNew = false;
|
||||
for (var i = 0; i < mutations.length; i++) {
|
||||
if (mutations[i].addedNodes.length) {
|
||||
hasNew = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (hasNew) {
|
||||
setTimeout(fixInitialCbState, 50);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,296 @@
|
||||
/*
|
||||
* ProxMorph PDM Theme Selector Patch
|
||||
* Version: 1.0.0
|
||||
*
|
||||
* Injects ProxMorph theme options into PDM's native Theme dialog dropdown.
|
||||
* Uses MutationObserver to detect when the dialog opens and adds custom
|
||||
* theme entries alongside the built-in Desktop/Crisp options.
|
||||
*
|
||||
* Theme guard: only runs if proxmorph-theme CSS links are present.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
if (!document.querySelector('link.proxmorph-theme')) return;
|
||||
|
||||
var themeLinks = document.querySelectorAll('link.proxmorph-theme');
|
||||
var themes = [];
|
||||
for (var i = 0; i < themeLinks.length; i++) {
|
||||
var href = themeLinks[i].getAttribute('href');
|
||||
var filename = href.split('/').pop();
|
||||
var name = filename.replace('theme-', '').replace('.css', '')
|
||||
.split('-').map(function(w) { return w.charAt(0).toUpperCase() + w.slice(1); }).join(' ');
|
||||
themes.push({ filename: filename, display: 'PM: ' + name, link: themeLinks[i] });
|
||||
}
|
||||
|
||||
function activateTheme(filename) {
|
||||
for (var i = 0; i < themeLinks.length; i++) {
|
||||
themeLinks[i].setAttribute('disabled', '');
|
||||
}
|
||||
if (filename) {
|
||||
localStorage.setItem('proxmorph-theme', filename);
|
||||
var base = document.querySelector('link.proxmorph-base');
|
||||
if (base) base.removeAttribute('disabled');
|
||||
for (var j = 0; j < themeLinks.length; j++) {
|
||||
if (themeLinks[j].href.indexOf(filename) !== -1) {
|
||||
themeLinks[j].removeAttribute('disabled');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
localStorage.removeItem('proxmorph-theme');
|
||||
var base = document.querySelector('link.proxmorph-base');
|
||||
if (base) base.setAttribute('disabled', '');
|
||||
}
|
||||
}
|
||||
|
||||
function deactivateProxmorph() {
|
||||
for (var i = 0; i < themeLinks.length; i++) {
|
||||
themeLinks[i].setAttribute('disabled', '');
|
||||
}
|
||||
var base = document.querySelector('link.proxmorph-base');
|
||||
if (base) base.setAttribute('disabled', '');
|
||||
localStorage.removeItem('proxmorph-theme');
|
||||
}
|
||||
|
||||
var patched = false;
|
||||
|
||||
function setupObserver() {
|
||||
var observer = new MutationObserver(function() {
|
||||
if (patched) return;
|
||||
tryInject();
|
||||
});
|
||||
observer.observe(document.documentElement, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', setupObserver);
|
||||
} else {
|
||||
setupObserver();
|
||||
}
|
||||
|
||||
function tryInject() {
|
||||
var dialog = document.querySelector('dialog');
|
||||
if (!dialog) { patched = false; return; }
|
||||
|
||||
var combo = dialog.querySelector('[aria-label="Select Theme"]');
|
||||
if (!combo) return;
|
||||
|
||||
/* Early combo fix: override value as soon as dialog appears, before dropdown is expanded */
|
||||
var currentThemeEarly = localStorage.getItem('proxmorph-theme');
|
||||
if (currentThemeEarly && combo.tagName === 'INPUT' && !combo.__proxmorphPatched) {
|
||||
for (var ei = 0; ei < themes.length; ei++) {
|
||||
if (themes[ei].filename === currentThemeEarly) {
|
||||
var origDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
origDesc.set.call(combo, themes[ei].display);
|
||||
Object.defineProperty(combo, 'value', {
|
||||
get: function() { return origDesc.get.call(this); },
|
||||
set: function(v) {
|
||||
var active = localStorage.getItem('proxmorph-theme');
|
||||
if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
|
||||
return;
|
||||
}
|
||||
origDesc.set.call(this, v);
|
||||
},
|
||||
configurable: true
|
||||
});
|
||||
combo.__proxmorphPatched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tables = dialog.querySelectorAll('.pwt-datatable-content');
|
||||
var themeTable = null;
|
||||
|
||||
for (var t = 0; t < tables.length; t++) {
|
||||
var rows = tables[t].querySelectorAll('tr[role="row"]');
|
||||
for (var r = 0; r < rows.length; r++) {
|
||||
var cellText = rows[r].textContent.trim();
|
||||
if (cellText === 'Desktop' || cellText === 'Crisp' || cellText === 'Material') {
|
||||
themeTable = tables[t];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (themeTable) break;
|
||||
}
|
||||
|
||||
if (!themeTable) return;
|
||||
if (themeTable.querySelector('[data-proxmorph-theme]')) { patched = true; return; }
|
||||
|
||||
var nativeRows = themeTable.querySelectorAll('tr[role="row"]');
|
||||
var existingCount = nativeRows.length;
|
||||
|
||||
var idPrefix = 'ProxMorph';
|
||||
if (nativeRows.length > 0 && nativeRows[0].id) {
|
||||
idPrefix = nativeRows[0].id.split('-item-')[0];
|
||||
}
|
||||
|
||||
var sepRow = document.createElement('tr');
|
||||
sepRow.setAttribute('role', 'none');
|
||||
sepRow.className = 'proxmorph-separator';
|
||||
var sepTd = document.createElement('td');
|
||||
sepTd.setAttribute('role', 'none');
|
||||
sepTd.setAttribute('colspan', '2');
|
||||
sepTd.style.cssText = 'padding:4px 0;border-top:1px solid var(--pwt-color-neutral-40,#555);';
|
||||
var sepDiv = document.createElement('div');
|
||||
sepDiv.style.cssText = 'font-size:11px;color:var(--pwt-color-neutral-60,#999);padding:2px 8px;';
|
||||
sepDiv.textContent = 'ProxMorph Themes';
|
||||
sepTd.appendChild(sepDiv);
|
||||
sepRow.appendChild(sepTd);
|
||||
themeTable.appendChild(sepRow);
|
||||
|
||||
var currentTheme = localStorage.getItem('proxmorph-theme');
|
||||
|
||||
for (var i = 0; i < themes.length; i++) {
|
||||
var theme = themes[i];
|
||||
var rowIndex = existingCount + i + 1;
|
||||
var isSelected = currentTheme === theme.filename;
|
||||
|
||||
var row = document.createElement('tr');
|
||||
row.setAttribute('role', 'row');
|
||||
row.setAttribute('aria-rowindex', String(rowIndex));
|
||||
row.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
||||
row.id = idPrefix + '-item-PM-' + theme.filename;
|
||||
row.className = isSelected ? 'row-cursor selected' : '';
|
||||
row.setAttribute('data-proxmorph-theme', theme.filename);
|
||||
|
||||
var td = document.createElement('td');
|
||||
td.setAttribute('role', 'gridcell');
|
||||
td.setAttribute('data-column-num', '0');
|
||||
td.setAttribute('tabindex', '-1');
|
||||
td.className = 'pwt-datatable-cell pwt-pointer' + (isSelected ? ' cell-cursor' : '');
|
||||
td.style.cssText = 'vertical-align:baseline;text-align:start;';
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('role', 'none');
|
||||
div.textContent = theme.display;
|
||||
td.appendChild(div);
|
||||
|
||||
var td2 = document.createElement('td');
|
||||
td2.setAttribute('role', 'none');
|
||||
td2.style.cssText = 'vertical-align:top;height:22px;';
|
||||
|
||||
row.appendChild(td);
|
||||
row.appendChild(td2);
|
||||
themeTable.appendChild(row);
|
||||
|
||||
(function(themeObj, rowEl) {
|
||||
rowEl.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
var allRows = themeTable.querySelectorAll('tr[role="row"]');
|
||||
for (var k = 0; k < allRows.length; k++) {
|
||||
allRows[k].className = '';
|
||||
allRows[k].setAttribute('aria-selected', 'false');
|
||||
var cells = allRows[k].querySelectorAll('.pwt-datatable-cell');
|
||||
for (var c = 0; c < cells.length; c++) {
|
||||
cells[c].classList.remove('cell-cursor');
|
||||
}
|
||||
}
|
||||
rowEl.className = 'row-cursor selected';
|
||||
rowEl.setAttribute('aria-selected', 'true');
|
||||
var myCell = rowEl.querySelector('.pwt-datatable-cell');
|
||||
if (myCell) myCell.classList.add('cell-cursor');
|
||||
|
||||
activateTheme(themeObj.filename);
|
||||
|
||||
var combo = dialog.querySelector('[aria-label="Select Theme"]');
|
||||
if (combo) {
|
||||
if (combo.tagName === 'INPUT') {
|
||||
/* Remove override temporarily to set the new value */
|
||||
var origDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
delete combo.value;
|
||||
origDesc.set.call(combo, themeObj.display);
|
||||
/* Re-install override to block PWT resets */
|
||||
Object.defineProperty(combo, 'value', {
|
||||
get: function() { return origDesc.get.call(this); },
|
||||
set: function(v) {
|
||||
var active = localStorage.getItem('proxmorph-theme');
|
||||
if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
|
||||
return;
|
||||
}
|
||||
origDesc.set.call(this, v);
|
||||
},
|
||||
configurable: true
|
||||
});
|
||||
} else {
|
||||
var valueSpan = combo.querySelector('.pwt-text-truncate') || combo;
|
||||
if (valueSpan) valueSpan.textContent = themeObj.display;
|
||||
}
|
||||
}
|
||||
});
|
||||
})(theme, row);
|
||||
}
|
||||
|
||||
/* If a ProxMorph theme is active, deselect native rows and update combo */
|
||||
if (currentTheme) {
|
||||
for (var d = 0; d < nativeRows.length; d++) {
|
||||
nativeRows[d].className = '';
|
||||
nativeRows[d].setAttribute('aria-selected', 'false');
|
||||
var dCells = nativeRows[d].querySelectorAll('.pwt-datatable-cell');
|
||||
for (var dc = 0; dc < dCells.length; dc++) {
|
||||
dCells[dc].classList.remove('cell-cursor');
|
||||
}
|
||||
}
|
||||
/* Update combo display text to active PM theme name */
|
||||
var activeCombo = dialog.querySelector('[aria-label="Select Theme"]');
|
||||
if (activeCombo) {
|
||||
for (var at = 0; at < themes.length; at++) {
|
||||
if (themes[at].filename === currentTheme) {
|
||||
if (activeCombo.tagName === 'INPUT') {
|
||||
activeCombo.value = themes[at].display;
|
||||
/* Override value setter to prevent PWT from resetting to native theme name */
|
||||
var pmDisplay = themes[at].display;
|
||||
var origDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
Object.defineProperty(activeCombo, 'value', {
|
||||
get: function() { return origDescriptor.get.call(this); },
|
||||
set: function(v) {
|
||||
var active = localStorage.getItem('proxmorph-theme');
|
||||
if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
|
||||
return;
|
||||
}
|
||||
origDescriptor.set.call(this, v);
|
||||
},
|
||||
configurable: true
|
||||
});
|
||||
} else {
|
||||
var valSpan = activeCombo.querySelector('.pwt-text-truncate') || activeCombo;
|
||||
if (valSpan) valSpan.textContent = themes[at].display;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var nr = 0; nr < nativeRows.length; nr++) {
|
||||
(function(nativeRow) {
|
||||
nativeRow.addEventListener('click', function() {
|
||||
deactivateProxmorph();
|
||||
/* Remove value override so PWT can set native theme name */
|
||||
var cmb = dialog.querySelector('[aria-label="Select Theme"]');
|
||||
if (cmb && cmb.tagName === 'INPUT') {
|
||||
delete cmb.value;
|
||||
}
|
||||
var pmRows = themeTable.querySelectorAll('[data-proxmorph-theme]');
|
||||
for (var p = 0; p < pmRows.length; p++) {
|
||||
pmRows[p].className = '';
|
||||
pmRows[p].setAttribute('aria-selected', 'false');
|
||||
var cells = pmRows[p].querySelectorAll('.pwt-datatable-cell');
|
||||
for (var c = 0; c < cells.length; c++) {
|
||||
cells[c].classList.remove('cell-cursor');
|
||||
}
|
||||
}
|
||||
});
|
||||
})(nativeRows[nr]);
|
||||
}
|
||||
|
||||
patched = true;
|
||||
|
||||
var closeCheck = setInterval(function() {
|
||||
if (!document.contains(themeTable)) {
|
||||
patched = false;
|
||||
clearInterval(closeCheck);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,468 @@
|
||||
/**
|
||||
* ProxMorph Hardware Sensors
|
||||
* Adds hardware sensor monitoring to the Proxmox VE node status panel.
|
||||
* Displays CPU, NVMe, HDD temperatures, fan speeds, and UPS status
|
||||
* in a compact single-row layout.
|
||||
*
|
||||
* Requires:
|
||||
* - lm-sensors installed on the Proxmox host
|
||||
* - Nodes.pm patched to expose sensor data via API
|
||||
* - Enabled via ProxMorph installer (--sensors flag)
|
||||
*
|
||||
* Data flow:
|
||||
* 1. Nodes.pm runs `sensors -j` and exposes sensorsOutput in API
|
||||
* 2. PVE.node.StatusView fetches /api2/json/nodes/{node}/status
|
||||
* 3. Our override injects a single "Sensors" item reading that field
|
||||
* 4. Combined renderer parses JSON and produces compact themed HTML
|
||||
*
|
||||
* Supports:
|
||||
* - Intel (coretemp-isa-*) and AMD (k10temp-pci-*) CPU temperatures
|
||||
* - NVMe drive temperatures (nvme-pci-*)
|
||||
* - HDD/SATA drive temperatures (drivetemp-scsi-*)
|
||||
* - Fan speeds (recursive detection of fan*_input keys)
|
||||
* - UPS status via NUT (upsc) — optional, shown inline when present
|
||||
*
|
||||
* Version: 1.2.0
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// ─── Configuration ─────────────────────────────────────────────
|
||||
var SENSOR_UNIT = 'C'; // 'C' or 'F'
|
||||
|
||||
// ─── Sensor Filter (populated from API on store load) ──────────
|
||||
// null = no filter (show all), otherwise object with chip:label keys
|
||||
var activeSensorFilter = null;
|
||||
|
||||
function isSensorAllowed(chipKey, label) {
|
||||
if (!activeSensorFilter) return true;
|
||||
return activeSensorFilter[chipKey + ':' + label] === true;
|
||||
}
|
||||
|
||||
function parseSensorFilter(raw) {
|
||||
if (!raw || typeof raw !== 'string' || raw.trim() === '') return null;
|
||||
var filter = {};
|
||||
raw.split('\n').forEach(function (line) {
|
||||
line = line.trim();
|
||||
if (line !== '') filter[line] = true;
|
||||
});
|
||||
return Object.keys(filter).length > 0 ? filter : null;
|
||||
}
|
||||
|
||||
// ─── CSS Variable Reader ───────────────────────────────────────
|
||||
function getThemeColors() {
|
||||
var cs = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
text: cs.getPropertyValue('--pm-text').trim() || '#e5e7eb',
|
||||
textDim: cs.getPropertyValue('--pm-text-dim').trim() || '#9ca3af',
|
||||
warning: cs.getPropertyValue('--pm-warning').trim() || '#f5a623',
|
||||
error: cs.getPropertyValue('--pm-error').trim() || '#f03a3e',
|
||||
success: cs.getPropertyValue('--pm-success').trim() || '#37be5f',
|
||||
accent: cs.getPropertyValue('--pm-accent').trim() || '#006eff'
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Temperature Helpers ───────────────────────────────────────
|
||||
function formatTemp(celsius) {
|
||||
if (celsius === null || celsius === undefined || isNaN(celsius)) return '—';
|
||||
var val = SENSOR_UNIT === 'F' ? (celsius * 9 / 5) + 32 : celsius;
|
||||
return Ext.util.Format.number(val, '0.#') + '°' + SENSOR_UNIT;
|
||||
}
|
||||
|
||||
function tempColor(temp, max, crit, colors) {
|
||||
if (crit !== null && temp >= crit) return colors.error;
|
||||
if (max !== null && temp >= max) return colors.warning;
|
||||
return colors.text;
|
||||
}
|
||||
|
||||
// ─── JSON Parser ───────────────────────────────────────────────
|
||||
function parseSensorsJSON(raw) {
|
||||
if (!raw || typeof raw !== 'string') return null;
|
||||
try {
|
||||
var cleaned = raw
|
||||
.replace(/,(\s*[}\]])/g, '$1')
|
||||
.replace(/\bNaN\b/g, 'null')
|
||||
.replace(/\bERROR\b[^\n]*/g, '');
|
||||
return JSON.parse(cleaned);
|
||||
} catch (e) {
|
||||
console.warn('[ProxMorph Sensors] JSON parse error:', e.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Inline HTML Helpers ───────────────────────────────────────
|
||||
function tag(text, color, bold) {
|
||||
var s = 'color:' + color + ';';
|
||||
if (bold) s += 'font-weight:600;';
|
||||
return '<span style="' + s + '">' + text + '</span>';
|
||||
}
|
||||
|
||||
function sep(colors) {
|
||||
return '<span style="color:' + colors.textDim + ';opacity:0.4;margin:0 6px;">|</span>';
|
||||
}
|
||||
|
||||
// ─── Combined Sensors Renderer ─────────────────────────────────
|
||||
// Produces a compact single-line output: CPU | NVMe | Fan
|
||||
// Only sections with data are shown — no "No X detected" clutter.
|
||||
function renderSensors(value, record) {
|
||||
// Read filter from the StatusView's store (resolves timing issue where
|
||||
// our store.on('load') fires after ExtJS already called this renderer)
|
||||
try {
|
||||
var store = (record && record.store) ? record.store : null;
|
||||
if (!store) {
|
||||
var widget = Ext.ComponentQuery.query('#sensors')[0];
|
||||
if (widget && widget.ownerCt && widget.ownerCt.getStore) {
|
||||
store = widget.ownerCt.getStore();
|
||||
}
|
||||
}
|
||||
if (store) {
|
||||
var filterRec = store.findRecord('key', 'sensorsFilter');
|
||||
activeSensorFilter = filterRec ? parseSensorFilter(filterRec.get('value')) : null;
|
||||
}
|
||||
} catch (e) { /* filter stays as-is */ }
|
||||
|
||||
var data = parseSensorsJSON(value);
|
||||
var colors = getThemeColors();
|
||||
if (!data) return tag('N/A', colors.textDim);
|
||||
|
||||
var sections = [];
|
||||
|
||||
// ── CPU Temperature ─────────────────────────────────────
|
||||
var cpuChips = Object.keys(data).filter(function (k) {
|
||||
return k.indexOf('coretemp-isa-') === 0 ||
|
||||
k.indexOf('k10temp-pci-') === 0;
|
||||
});
|
||||
|
||||
cpuChips.forEach(function (chipKey) {
|
||||
var chip = data[chipKey];
|
||||
var pkgTemp = null, pkgMax = null, pkgCrit = null;
|
||||
var coreTemps = [];
|
||||
|
||||
Object.keys(chip).forEach(function (label) {
|
||||
if (label === 'Adapter') return;
|
||||
if (!isSensorAllowed(chipKey, label)) return;
|
||||
var sensor = chip[label];
|
||||
if (!sensor || typeof sensor !== 'object') return;
|
||||
|
||||
var inputKey = null, maxKey = null, critKey = null;
|
||||
Object.keys(sensor).forEach(function (k) {
|
||||
if (/^temp\d+_input$/.test(k)) inputKey = k;
|
||||
else if (/^temp\d+_max$/.test(k)) maxKey = k;
|
||||
else if (/^temp\d+_crit$/.test(k)) critKey = k;
|
||||
});
|
||||
if (!inputKey) return;
|
||||
|
||||
var temp = sensor[inputKey];
|
||||
if (temp === null || temp === undefined) return;
|
||||
|
||||
if (/Package|Tctl|Tdie/i.test(label)) {
|
||||
pkgTemp = temp;
|
||||
pkgMax = maxKey ? sensor[maxKey] : null;
|
||||
pkgCrit = critKey ? sensor[critKey] : null;
|
||||
} else {
|
||||
coreTemps.push({
|
||||
label: label,
|
||||
temp: temp,
|
||||
max: maxKey ? sensor[maxKey] : null,
|
||||
crit: critKey ? sensor[critKey] : null
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (pkgTemp !== null) {
|
||||
var color = tempColor(pkgTemp, pkgMax, pkgCrit, colors);
|
||||
var txt = 'CPU: ' + formatTemp(pkgTemp);
|
||||
if (coreTemps.length > 0) txt += ' (' + coreTemps.length + ' cores)';
|
||||
sections.push(tag(txt, color));
|
||||
} else if (coreTemps.length > 0) {
|
||||
if (activeSensorFilter) {
|
||||
// Filter active: show each selected core individually
|
||||
coreTemps.forEach(function (core) {
|
||||
var color = tempColor(core.temp, core.max, core.crit, colors);
|
||||
sections.push(tag(core.label + ': ' + formatTemp(core.temp), color));
|
||||
});
|
||||
} else {
|
||||
var maxT = Math.max.apply(null, coreTemps.map(function (c) { return c.temp; }));
|
||||
var color = tempColor(maxT, 80, 95, colors);
|
||||
sections.push(tag('CPU: ' + formatTemp(maxT) + ' peak (' + coreTemps.length + ' cores)', color));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ── NVMe Temperature (composite only) ───────────────────
|
||||
var nvmeKeys = Object.keys(data).filter(function (k) {
|
||||
return k.indexOf('nvme-pci-') === 0;
|
||||
});
|
||||
nvmeKeys.forEach(function (chipKey, idx) {
|
||||
var chip = data[chipKey];
|
||||
var compositeTemp = null, compMax = null, compCrit = null;
|
||||
|
||||
Object.keys(chip).forEach(function (label) {
|
||||
if (label !== 'Composite') return;
|
||||
if (!isSensorAllowed(chipKey, label)) return;
|
||||
var sensor = chip[label];
|
||||
if (!sensor || typeof sensor !== 'object') return;
|
||||
|
||||
Object.keys(sensor).forEach(function (k) {
|
||||
if (/^temp\d+_input$/.test(k) && compositeTemp === null) {
|
||||
compositeTemp = sensor[k];
|
||||
}
|
||||
if (/^temp\d+_max$/.test(k)) {
|
||||
var m = sensor[k];
|
||||
if (m !== null && m < 200) compMax = m;
|
||||
}
|
||||
if (/^temp\d+_crit$/.test(k)) compCrit = sensor[k];
|
||||
});
|
||||
});
|
||||
|
||||
if (compositeTemp !== null) {
|
||||
var color = tempColor(compositeTemp, compMax || 70, compCrit || 80, colors);
|
||||
var lbl = nvmeKeys.length > 1 ? 'NVMe' + idx : 'NVMe';
|
||||
sections.push(tag(lbl + ': ' + formatTemp(compositeTemp), color));
|
||||
}
|
||||
});
|
||||
|
||||
// ── SATA/HDD Temperature ────────────────────────────────
|
||||
var hddKeys = Object.keys(data).filter(function (k) {
|
||||
return k.indexOf('drivetemp-scsi-') === 0;
|
||||
});
|
||||
hddKeys.forEach(function (chipKey, idx) {
|
||||
var chip = data[chipKey];
|
||||
Object.keys(chip).forEach(function (label) {
|
||||
if (label === 'Adapter') return;
|
||||
if (!isSensorAllowed(chipKey, label)) return;
|
||||
var sensor = chip[label];
|
||||
if (!sensor || typeof sensor !== 'object') return;
|
||||
|
||||
var inputKey = null;
|
||||
Object.keys(sensor).forEach(function (k) {
|
||||
if (/^temp\d+_input$/.test(k)) inputKey = k;
|
||||
});
|
||||
if (!inputKey) return;
|
||||
|
||||
var temp = sensor[inputKey];
|
||||
if (temp !== null && temp !== undefined) {
|
||||
var color = tempColor(temp, 45, 55, colors);
|
||||
var lbl = hddKeys.length > 1 ? 'HDD' + idx : 'HDD';
|
||||
sections.push(tag(lbl + ': ' + formatTemp(temp), color));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── Fan Speeds ──────────────────────────────────────────
|
||||
var fans = [];
|
||||
function findFans(obj, parentLabel, chipKey) {
|
||||
if (!obj || typeof obj !== 'object') return;
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
if (/^fan\d+_input$/.test(key)) {
|
||||
var label = parentLabel || key.replace('_input', '');
|
||||
if (isSensorAllowed(chipKey, label)) {
|
||||
fans.push({
|
||||
label: label,
|
||||
rpm: obj[key]
|
||||
});
|
||||
}
|
||||
} else if (typeof obj[key] === 'object' && key !== 'Adapter') {
|
||||
findFans(obj[key], key, chipKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
Object.keys(data).forEach(function (chipKey) {
|
||||
findFans(data[chipKey], '', chipKey);
|
||||
});
|
||||
|
||||
if (fans.length > 0) {
|
||||
fans.forEach(function (fan) {
|
||||
var rpm = fan.rpm || 0;
|
||||
var color = rpm === 0 ? colors.warning : colors.text;
|
||||
sections.push(tag(fan.label + ': ' + rpm + ' RPM', color));
|
||||
});
|
||||
}
|
||||
|
||||
// ── Join all sections ───────────────────────────────────
|
||||
if (sections.length === 0) return tag('No sensors detected', colors.textDim);
|
||||
return sections.join(sep(colors));
|
||||
}
|
||||
|
||||
// ─── UPS Renderer (compact inline) ─────────────────────────────
|
||||
function renderUps(value) {
|
||||
var colors = getThemeColors();
|
||||
if (!value || typeof value !== 'string' || value.trim() === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
var fields = {};
|
||||
value.split('\n').forEach(function (line) {
|
||||
var idx = line.indexOf(':');
|
||||
if (idx > 0) {
|
||||
fields[line.substring(0, idx).trim()] = line.substring(idx + 1).trim();
|
||||
}
|
||||
});
|
||||
if (Object.keys(fields).length === 0) return '';
|
||||
|
||||
var parts = [];
|
||||
|
||||
// Status
|
||||
var status = fields['ups.status'] || '';
|
||||
var sColor = colors.success, sText = 'Online';
|
||||
if (status.indexOf('OB') !== -1) { sColor = colors.error; sText = 'On Battery'; }
|
||||
else if (status.indexOf('LB') !== -1) { sColor = colors.error; sText = 'Low Battery'; }
|
||||
else if (status.indexOf('CHRG') !== -1) { sColor = colors.warning; sText = 'Charging'; }
|
||||
else if (status.indexOf('OL') === -1 && status) { sColor = colors.warning; sText = status; }
|
||||
parts.push(tag(sText, sColor, true));
|
||||
|
||||
// Battery
|
||||
var charge = parseFloat(fields['battery.charge']);
|
||||
if (!isNaN(charge)) {
|
||||
var cColor = charge < 20 ? colors.error : charge < 50 ? colors.warning : colors.success;
|
||||
parts.push(tag(charge + '%', cColor));
|
||||
}
|
||||
|
||||
// Load
|
||||
var load = parseFloat(fields['ups.load']);
|
||||
if (!isNaN(load)) {
|
||||
var lColor = load > 80 ? colors.error : load > 60 ? colors.warning : colors.text;
|
||||
parts.push(tag('Load ' + load + '%', lColor));
|
||||
}
|
||||
|
||||
// Runtime
|
||||
var runtime = parseFloat(fields['battery.runtime']);
|
||||
if (!isNaN(runtime)) {
|
||||
var mins = Math.floor(runtime / 60);
|
||||
var secs = Math.floor(runtime % 60);
|
||||
var rText = mins > 0 ? mins + 'm' : secs + 's';
|
||||
parts.push(tag(rText, mins < 5 ? colors.warning : colors.textDim));
|
||||
}
|
||||
|
||||
return parts.join(sep(colors));
|
||||
}
|
||||
|
||||
// ─── StatusView Override ───────────────────────────────────────
|
||||
function applyOverride() {
|
||||
if (typeof Ext === 'undefined' || !Ext.ClassManager) {
|
||||
setTimeout(applyOverride, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
var cls = Ext.ClassManager.get('PVE.node.StatusView');
|
||||
if (!cls) {
|
||||
setTimeout(applyOverride, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
var origInitComponent = cls.prototype.initComponent;
|
||||
|
||||
cls.prototype.initComponent = function () {
|
||||
// Single compact sensor row — CPU + Storage + Fan inline
|
||||
var sensorItems = [
|
||||
{
|
||||
itemId: 'sensors',
|
||||
colspan: 2,
|
||||
printBar: false,
|
||||
title: gettext('Sensors'),
|
||||
textField: 'sensorsOutput',
|
||||
renderer: renderSensors
|
||||
}
|
||||
];
|
||||
|
||||
// Inject after 'cpus'
|
||||
if (Ext.isArray(this.items)) {
|
||||
var insertIdx = -1;
|
||||
for (var i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].itemId === 'cpus') {
|
||||
insertIdx = i + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (insertIdx >= 0) {
|
||||
Ext.Array.insert(this.items, insertIdx, sensorItems);
|
||||
} else {
|
||||
this.items = this.items.concat(sensorItems);
|
||||
}
|
||||
}
|
||||
|
||||
// Call original initComponent
|
||||
if (origInitComponent) {
|
||||
origInitComponent.apply(this, arguments);
|
||||
}
|
||||
|
||||
// After render: conditionally add UPS row if data exists,
|
||||
// then trigger layout recalculation so the panel expands.
|
||||
var me = this;
|
||||
me.on('afterrender', function () {
|
||||
var store = me.getStore ? me.getStore() : null;
|
||||
if (!store) return;
|
||||
|
||||
store.on('load', function (s, records) {
|
||||
if (!records || !records.length) return;
|
||||
|
||||
// Update sensor filter from API data
|
||||
var filterRec = s.findRecord('key', 'sensorsFilter');
|
||||
activeSensorFilter = filterRec ? parseSensorFilter(filterRec.get('value')) : null;
|
||||
|
||||
// Hide sensor row entirely when API doesn't include sensorsOutput
|
||||
var sensorWidget = me.down('#sensors');
|
||||
if (sensorWidget) {
|
||||
var sensorsRec = s.findRecord('key', 'sensorsOutput');
|
||||
var hasSensorData = sensorsRec !== null;
|
||||
sensorWidget.setVisible(hasSensorData);
|
||||
|
||||
// Force re-render with filter applied (our handler fires
|
||||
// after StatusView's internal renderer, need to update)
|
||||
if (hasSensorData && sensorWidget.setText) {
|
||||
sensorWidget.setText(renderSensors(sensorsRec.get('value')));
|
||||
}
|
||||
}
|
||||
|
||||
// Check for UPS data in the store
|
||||
var upsRec = s.findRecord('key', 'upsData');
|
||||
var upsData = upsRec ? upsRec.get('value') : null;
|
||||
|
||||
// Only inject UPS item once, and only if there is data
|
||||
if (upsData && upsData.trim() !== '' && !me.down('#upsStatus')) {
|
||||
me.add({
|
||||
xtype: 'pmxInfoWidget',
|
||||
itemId: 'upsStatus',
|
||||
colspan: 2,
|
||||
printBar: false,
|
||||
title: gettext('UPS'),
|
||||
iconCls: 'fa fa-fw fa-battery-half',
|
||||
textField: 'upsData',
|
||||
renderer: renderUps
|
||||
});
|
||||
me.updateLayout();
|
||||
}
|
||||
|
||||
// Recalculate layout to accommodate sensor row
|
||||
Ext.defer(function () {
|
||||
me.updateLayout();
|
||||
var parent = me.ownerCt;
|
||||
if (parent && parent.updateLayout) {
|
||||
parent.updateLayout();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
console.log('[ProxMorph] Sensor widget initialized (v1.1.0)');
|
||||
}
|
||||
|
||||
// ─── Init ──────────────────────────────────────────────────────
|
||||
function init() {
|
||||
try {
|
||||
applyOverride();
|
||||
window.ProxMorphSensors = { version: '1.1.0' };
|
||||
} catch (e) {
|
||||
console.error('[ProxMorph Sensors] Init error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||
init();
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* ProxMorph Chart Patcher
|
||||
* Applies custom colors to Proxmox RRD charts
|
||||
*
|
||||
* Features:
|
||||
* - Custom UniFi color palette for chart lines/areas
|
||||
* - Special handling for Network Traffic (blue/green layering)
|
||||
* - Subtle white border on hover dots for visibility
|
||||
*
|
||||
* Color Palette:
|
||||
* Primary: #30AD55 (UniFi green)
|
||||
* Secondary: #006EFF (UniFi blue)
|
||||
* Tertiary: #5DC0E0 (Cyan/teal)
|
||||
* Warning: #D08D1E (Amber/orange)
|
||||
* Critical: #CC3135 (Red)
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const PROXMORPH_CHART_COLORS = [
|
||||
'#30AD55', // UniFi green (PRIMARY)
|
||||
'#006EFF', // UniFi blue (SECONDARY)
|
||||
'#5DC0E0', // UniFi cyan/teal
|
||||
'#D08D1E', // UniFi amber/orange
|
||||
'#CC3135', // UniFi red
|
||||
'#4797FF', // UniFi light blue
|
||||
];
|
||||
|
||||
/**
|
||||
* Apply custom colors to a single chart
|
||||
*/
|
||||
function patchChart(chart) {
|
||||
if (!chart || !chart.getSeries) return;
|
||||
|
||||
try {
|
||||
const series = chart.getSeries();
|
||||
if (!series || series.length === 0) return;
|
||||
|
||||
// Special handling for Network Traffic chart to avoid color blending
|
||||
if (chart.title === 'Network Traffic') {
|
||||
// Swap colors: Blue (bottom layer), Green (top layer)
|
||||
chart.setColors(['#006EFF', '#30AD55']);
|
||||
series.forEach((s, idx) => {
|
||||
if (idx === 0) {
|
||||
// Incoming - Blue area (bottom)
|
||||
s.setStyle({
|
||||
fillStyle: 'rgba(0, 110, 255, 0.7)',
|
||||
strokeStyle: '#006EFF',
|
||||
lineWidth: 2
|
||||
});
|
||||
} else if (idx === 1) {
|
||||
// Outgoing - Green area (top)
|
||||
s.setStyle({
|
||||
fillStyle: 'rgba(48, 173, 85, 0.8)',
|
||||
strokeStyle: '#30AD55',
|
||||
lineWidth: 2
|
||||
});
|
||||
}
|
||||
// Add subtle white border to hover dots
|
||||
s.setHighlight({
|
||||
opacity: 1,
|
||||
scaling: 1.5,
|
||||
strokeStyle: '#FFFFFF',
|
||||
lineWidth: 1
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Standard color application for all other charts
|
||||
chart.setColors(PROXMORPH_CHART_COLORS);
|
||||
series.forEach((s, idx) => {
|
||||
const color = PROXMORPH_CHART_COLORS[idx % PROXMORPH_CHART_COLORS.length];
|
||||
s.setStyle({
|
||||
fillStyle: color,
|
||||
strokeStyle: color
|
||||
});
|
||||
// Add subtle white border to hover dots
|
||||
s.setHighlight({
|
||||
opacity: 1,
|
||||
scaling: 1.5,
|
||||
strokeStyle: '#FFFFFF',
|
||||
lineWidth: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
chart.redraw();
|
||||
} catch (e) {
|
||||
console.warn('[ProxMorph] Chart patch error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if UniFi theme is active
|
||||
*/
|
||||
function isUnifiThemeActive() {
|
||||
// Check for the presence of the UniFi theme stylesheet
|
||||
return !!document.querySelector('link[href*="theme-unifi.css"]');
|
||||
}
|
||||
|
||||
/**
|
||||
* Find and patch all RRD charts on the page
|
||||
*/
|
||||
function patchAllCharts() {
|
||||
// Only patch if UniFi theme is active
|
||||
if (!isUnifiThemeActive()) return;
|
||||
|
||||
if (typeof Ext === 'undefined' || !Ext.ComponentQuery) return;
|
||||
|
||||
const charts = Ext.ComponentQuery.query('proxmoxRRDChart');
|
||||
if (charts && charts.length > 0) {
|
||||
charts.forEach(patchChart);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the chart patcher with delayed start and periodic refresh
|
||||
*/
|
||||
function init() {
|
||||
// Initial patch after page load
|
||||
if (document.readyState === 'complete') {
|
||||
setTimeout(patchAllCharts, 500);
|
||||
} else {
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(patchAllCharts, 500);
|
||||
});
|
||||
}
|
||||
|
||||
// Periodic re-patch to catch dynamically loaded charts
|
||||
// Charts can be reloaded when switching views or refreshing data
|
||||
setInterval(patchAllCharts, 2000);
|
||||
|
||||
console.log('[ProxMorph] Chart patcher initialized');
|
||||
}
|
||||
|
||||
// Start initialization
|
||||
init();
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* ProxMorph Chart Patcher (UniFi Light)
|
||||
* Applies custom colors to Proxmox RRD charts for light theme
|
||||
*
|
||||
* Features:
|
||||
* - Custom UniFi color palette for chart lines/areas
|
||||
* - Special handling for Network Traffic (blue/green layering)
|
||||
* - Dark border on hover dots for visibility on light backgrounds
|
||||
*
|
||||
* Color Palette (same as dark - UniFi uses identical colors):
|
||||
* Primary: #3ACC65 (UniFi green)
|
||||
* Secondary: #006FFF (UniFi blue)
|
||||
* Tertiary: #5DC0E0 (Cyan/teal)
|
||||
* Warning: #F6B94F (Amber/orange)
|
||||
* Critical: #F36165 (Red)
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const PROXMORPH_CHART_COLORS = [
|
||||
'#3ACC65', // UniFi green (PRIMARY)
|
||||
'#006FFF', // UniFi blue (SECONDARY)
|
||||
'#5DC0E0', // UniFi cyan/teal
|
||||
'#F6B94F', // UniFi amber/orange
|
||||
'#F36165', // UniFi red
|
||||
'#4797FF', // UniFi light blue
|
||||
];
|
||||
|
||||
// Hover dot stroke color - dark for visibility on light backgrounds
|
||||
const HOVER_STROKE_COLOR = '#1A1C21';
|
||||
|
||||
/**
|
||||
* Apply custom colors to a single chart
|
||||
*/
|
||||
function patchChart(chart) {
|
||||
if (!chart || !chart.getSeries) return;
|
||||
|
||||
try {
|
||||
const series = chart.getSeries();
|
||||
if (!series || series.length === 0) return;
|
||||
|
||||
// Special handling for Network Traffic chart to avoid color blending
|
||||
if (chart.title === 'Network Traffic') {
|
||||
// Swap colors: Blue (bottom layer), Green (top layer)
|
||||
chart.setColors(['#006FFF', '#3ACC65']);
|
||||
series.forEach((s, idx) => {
|
||||
if (idx === 0) {
|
||||
// Incoming - Blue area (bottom)
|
||||
// Slightly lower opacity for light backgrounds
|
||||
s.setStyle({
|
||||
fillStyle: 'rgba(0, 111, 255, 0.4)',
|
||||
strokeStyle: '#006FFF',
|
||||
lineWidth: 2
|
||||
});
|
||||
} else if (idx === 1) {
|
||||
// Outgoing - Green area (top)
|
||||
s.setStyle({
|
||||
fillStyle: 'rgba(58, 204, 101, 0.5)',
|
||||
strokeStyle: '#3ACC65',
|
||||
lineWidth: 2
|
||||
});
|
||||
}
|
||||
// Add dark border to hover dots for visibility on light background
|
||||
s.setHighlight({
|
||||
opacity: 1,
|
||||
scaling: 1.5,
|
||||
strokeStyle: HOVER_STROKE_COLOR,
|
||||
lineWidth: 1
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Standard color application for all other charts
|
||||
chart.setColors(PROXMORPH_CHART_COLORS);
|
||||
series.forEach((s, idx) => {
|
||||
const color = PROXMORPH_CHART_COLORS[idx % PROXMORPH_CHART_COLORS.length];
|
||||
s.setStyle({
|
||||
fillStyle: color,
|
||||
strokeStyle: color
|
||||
});
|
||||
// Add dark border to hover dots for visibility on light background
|
||||
s.setHighlight({
|
||||
opacity: 1,
|
||||
scaling: 1.5,
|
||||
strokeStyle: HOVER_STROKE_COLOR,
|
||||
lineWidth: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
chart.redraw();
|
||||
} catch (e) {
|
||||
console.warn('[ProxMorph] Chart patch error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if UniFi Light theme is active
|
||||
*/
|
||||
function isUnifiLightThemeActive() {
|
||||
// Check for the presence of the UniFi Light theme stylesheet
|
||||
return !!document.querySelector('link[href*="theme-unifi-light.css"]');
|
||||
}
|
||||
|
||||
/**
|
||||
* Find and patch all RRD charts on the page
|
||||
*/
|
||||
function patchAllCharts() {
|
||||
// Only patch if UniFi Light theme is active
|
||||
if (!isUnifiLightThemeActive()) return;
|
||||
|
||||
if (typeof Ext === 'undefined' || !Ext.ComponentQuery) return;
|
||||
|
||||
const charts = Ext.ComponentQuery.query('proxmoxRRDChart');
|
||||
if (charts && charts.length > 0) {
|
||||
charts.forEach(patchChart);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the chart patcher with delayed start and periodic refresh
|
||||
*/
|
||||
function init() {
|
||||
// Initial patch after page load
|
||||
if (document.readyState === 'complete') {
|
||||
setTimeout(patchAllCharts, 500);
|
||||
} else {
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(patchAllCharts, 500);
|
||||
});
|
||||
}
|
||||
|
||||
// Periodic re-patch to catch dynamically loaded charts
|
||||
// Charts can be reloaded when switching views or refreshing data
|
||||
setInterval(patchAllCharts, 2000);
|
||||
|
||||
console.log('[ProxMorph] UniFi Light chart patcher initialized');
|
||||
}
|
||||
|
||||
// Start initialization
|
||||
init();
|
||||
|
||||
})();
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user