mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
726dc73e2a
- General infrastructure to support palette tweaking - Hue shifts per color scale (UI, permalinks, dynamic code snippets) - Scale overall chroma up/down (UI, permalinks, dynamic code snippets) - Update contrast ratio tables (styling for contrast up/down/fail could use improvement, but it's a starting point) - Make sure it works with Turbo (i.e. things don't break when we navigate to another page)
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
/**
|
|
* Data related to theme remixing and palette tweaking
|
|
* Must work in both browser and Node.js
|
|
*/
|
|
export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
|
|
|
|
export const urls = {
|
|
theme: id => `styles/themes/${id}.css`,
|
|
colors: id => `styles/themes/${id}/color.css`,
|
|
palette: id => `styles/color/${id}.css`,
|
|
brand: id => `styles/brand/${id}.css`,
|
|
typography: id => `styles/themes/${id}/typography.css`,
|
|
};
|
|
|
|
export const selectors = {
|
|
palette: id =>
|
|
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
|
|
};
|
|
|
|
export const hueRanges = {
|
|
red: { min: 5, max: 35 }, // 30
|
|
orange: { min: 35, max: 60 }, // 25
|
|
yellow: { min: 60, max: 112 }, // 45
|
|
green: { min: 112, max: 170 }, // 55
|
|
cyan: { min: 170, max: 220 }, // 50
|
|
blue: { min: 220, max: 265 }, // 45
|
|
indigo: { min: 265, max: 290 }, // 25
|
|
purple: { min: 290, max: 320 }, // 30
|
|
pink: { min: 320, max: 365 }, // 45
|
|
};
|
|
|
|
export const hues = Object.keys(hueRanges);
|
|
|
|
export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
|