108 lines
No EOL
3.8 KiB
Vue
108 lines
No EOL
3.8 KiB
Vue
<template>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// Define color steps (100, 200, ..., 900, 950)
|
|
colorSteps: [100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
|
|
// Store computed colors
|
|
computedColors: {},
|
|
requestedColorNames: [
|
|
'--color-surface-0',
|
|
'--color-surface-1',
|
|
'--color-surface-2',
|
|
'--color-text',
|
|
'--color-accent',
|
|
'--color-accent-hover',
|
|
'--color-border',
|
|
'--color-rosewater',
|
|
'--color-flamingo',
|
|
'--color-pink',
|
|
'--color-mauve',
|
|
'--color-red',
|
|
'--color-maroon',
|
|
'--color-peach',
|
|
'--color-yellow',
|
|
'--color-teal',
|
|
'--color-sky',
|
|
'--color-sapphire',
|
|
'--color-blue',
|
|
'--color-lavender',
|
|
'--color-overlay-0',
|
|
'--color-overlay-1',
|
|
'--color-overlay-2'
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.computeColors();
|
|
},
|
|
methods: {
|
|
// Method to fetch the CSS variable and convert it to HSL, then adjust lightness
|
|
rgbToHsl(r, g, b) {
|
|
r /= 255;
|
|
g /= 255;
|
|
b /= 255;
|
|
|
|
let max = Math.max(r, g, b);
|
|
let min = Math.min(r, g, b);
|
|
let h = 0, s = 0, l = (max + min) / 2;
|
|
|
|
if (max !== min) {
|
|
let d = max - min;
|
|
s = (l > 0.5) ? d / (2 - max - min) : d / (max + min);
|
|
|
|
switch (max) {
|
|
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
|
case g: h = (b - r) / d + 2; break;
|
|
case b: h = (r - g) / d + 4; break;
|
|
}
|
|
|
|
h /= 6;
|
|
}
|
|
|
|
return [h * 360, s * 100, l * 100]; // Return in degrees for hue and percentages for saturation and lightness
|
|
},
|
|
|
|
// Method to compute the color adjustments (lightness + hue)
|
|
computeColors() {
|
|
// Loop through each requested color
|
|
this.requestedColorNames.forEach((name) => {
|
|
this.colorSteps.forEach((step) => {
|
|
// Fetch the RGB color from the root CSS variable
|
|
const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
|
|
if (!color) {
|
|
console.log(`Color ${name} not found`);
|
|
return;
|
|
}
|
|
|
|
// Extract RGB values from the color string (either #rrggbb or rgb(r, g, b))
|
|
let r, g, b;
|
|
if (color.startsWith('rgb')) {
|
|
[r, g, b] = color.match(/\d+/g).map(Number);
|
|
} else if (color.startsWith('#')) {
|
|
r = parseInt(color.slice(1, 3), 16);
|
|
g = parseInt(color.slice(3, 5), 16);
|
|
b = parseInt(color.slice(5, 7), 16);
|
|
}
|
|
|
|
// Convert the RGB values to HSL
|
|
const [hue, saturation, lightness] = this.rgbToHsl(r, g, b);
|
|
|
|
// Adjust the lightness based on the step (100-900 + 950)
|
|
const adjustedLightness = 100 - (step / 10);
|
|
|
|
// Update the computed color for the current step
|
|
this.computedColors[step] = `hsl(${hue}, ${saturation}%, ${adjustedLightness}%)`;
|
|
|
|
// Dynamically update the CSS variable for this color
|
|
document.documentElement.style.setProperty(`${name}-${step}`, this.computedColors[step]);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script> |