kopia lustrzana https://github.com/wagtail/wagtail
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com> Fixes https://github.com/wagtail/wagtail/issues/9571pull/9865/head
Albina
GitHub
rodzic
4230630ceb
commit
a37c4bab3d
|
|
@ -56,6 +56,7 @@ Changelog
|
|||
* Fix: Add a border around the userbar menu in Windows high-contrast mode so it can be identified (Albina Starykova)
|
||||
* Fix: Make sure browser font resizing applies to the userbar (Albina Starykova)
|
||||
* Fix: Fix check for `delete_url_name` attribute in generic `DeleteView` (Alex Simpson)
|
||||
* Fix: Re-implement design system colors so HSL values exactly match the desired RGB (Albina Starykova)
|
||||
* Docs: Add custom permissions section to permissions documentation page (Dan Hayden)
|
||||
* Docs: Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
|
||||
* Docs: Officially recommend `fnm` over `nvm` in development documentation (LB (Ben) Johnston)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const calcHSLDifference = (refVariable, refValue, value, unit = '') => {
|
|||
}
|
||||
|
||||
// Either add or remove the difference based on whether it’s positive or negative.
|
||||
const diff = ref - val;
|
||||
const diff = (ref * 10 - val * 10) / 10;
|
||||
const operation = `${diff > 0 ? '-' : '+'} ${Math.abs(diff)}${unit}`;
|
||||
|
||||
return `calc(var(${refVariable}) ${operation})`;
|
||||
|
|
@ -50,7 +50,7 @@ const generateColorVariables = (colors) => {
|
|||
// Use the DEFAULT hue as a reference to derive others from, or the darkest if there is no defined default.
|
||||
const darkestHue = Object.keys(hues).sort((a, b) => b - a)[0];
|
||||
const reference = hues.DEFAULT || hues[darkestHue];
|
||||
const [refH, refS, refL] = reference.hsl.match(/\d+/g);
|
||||
const [refH, refS, refL] = reference.hsl.match(/\d+(\.\d+)?/g);
|
||||
const refVar = reference.cssVariable;
|
||||
|
||||
// Generate color variables for all individual color shades, based on the reference.
|
||||
|
|
@ -62,7 +62,7 @@ const generateColorVariables = (colors) => {
|
|||
s: `${shade.cssVariable}-saturation`,
|
||||
l: `${shade.cssVariable}-lightness`,
|
||||
};
|
||||
const [h, s, l] = shade.hsl.match(/\d+/g);
|
||||
const [h, s, l] = shade.hsl.match(/\d+(\.\d+)?/g);
|
||||
const isReferenceShade = reference.hex === shade.hex;
|
||||
|
||||
if (isReferenceShade) {
|
||||
|
|
|
|||
|
|
@ -28,97 +28,97 @@ describe('generateColorVariables', () => {
|
|||
"--w-color-black-lightness": "0%",
|
||||
"--w-color-black-saturation": "0%",
|
||||
"--w-color-critical-100": "hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness))",
|
||||
"--w-color-critical-100-hue": "calc(var(--w-color-critical-200-hue) + 355)",
|
||||
"--w-color-critical-100-lightness": "calc(var(--w-color-critical-200-lightness) + 13%)",
|
||||
"--w-color-critical-100-saturation": "calc(var(--w-color-critical-200-saturation) + 40%)",
|
||||
"--w-color-critical-100-hue": "calc(var(--w-color-critical-200-hue) + 354.9)",
|
||||
"--w-color-critical-100-lightness": "calc(var(--w-color-critical-200-lightness) + 13.2%)",
|
||||
"--w-color-critical-100-saturation": "calc(var(--w-color-critical-200-saturation) + 39.8%)",
|
||||
"--w-color-critical-200": "hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness))",
|
||||
"--w-color-critical-200-hue": "0",
|
||||
"--w-color-critical-200-lightness": "54%",
|
||||
"--w-color-critical-200-saturation": "58%",
|
||||
"--w-color-critical-200-lightness": "53.5%",
|
||||
"--w-color-critical-200-saturation": "57.8%",
|
||||
"--w-color-critical-50": "hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness))",
|
||||
"--w-color-critical-50-hue": "var(--w-color-critical-200-hue)",
|
||||
"--w-color-critical-50-lightness": "calc(var(--w-color-critical-200-lightness) + 41%)",
|
||||
"--w-color-critical-50-saturation": "calc(var(--w-color-critical-200-saturation) + 25%)",
|
||||
"--w-color-critical-50-lightness": "calc(var(--w-color-critical-200-lightness) + 41.8%)",
|
||||
"--w-color-critical-50-saturation": "calc(var(--w-color-critical-200-saturation) + 25.5%)",
|
||||
"--w-color-grey-100": "hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness))",
|
||||
"--w-color-grey-100-hue": "var(--w-color-grey-600-hue)",
|
||||
"--w-color-grey-100-lightness": "calc(var(--w-color-grey-600-lightness) + 73%)",
|
||||
"--w-color-grey-100-lightness": "calc(var(--w-color-grey-600-lightness) + 72.9%)",
|
||||
"--w-color-grey-100-saturation": "var(--w-color-grey-600-saturation)",
|
||||
"--w-color-grey-150": "hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness))",
|
||||
"--w-color-grey-150-hue": "var(--w-color-grey-600-hue)",
|
||||
"--w-color-grey-150-lightness": "calc(var(--w-color-grey-600-lightness) + 63%)",
|
||||
"--w-color-grey-150-lightness": "calc(var(--w-color-grey-600-lightness) + 63.5%)",
|
||||
"--w-color-grey-150-saturation": "var(--w-color-grey-600-saturation)",
|
||||
"--w-color-grey-200": "hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness))",
|
||||
"--w-color-grey-200-hue": "var(--w-color-grey-600-hue)",
|
||||
"--w-color-grey-200-lightness": "calc(var(--w-color-grey-600-lightness) + 42%)",
|
||||
"--w-color-grey-200-lightness": "calc(var(--w-color-grey-600-lightness) + 42.4%)",
|
||||
"--w-color-grey-200-saturation": "var(--w-color-grey-600-saturation)",
|
||||
"--w-color-grey-400": "hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness))",
|
||||
"--w-color-grey-400-hue": "var(--w-color-grey-600-hue)",
|
||||
"--w-color-grey-400-lightness": "calc(var(--w-color-grey-600-lightness) + 21%)",
|
||||
"--w-color-grey-400-lightness": "calc(var(--w-color-grey-600-lightness) + 21.2%)",
|
||||
"--w-color-grey-400-saturation": "var(--w-color-grey-600-saturation)",
|
||||
"--w-color-grey-50": "hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness))",
|
||||
"--w-color-grey-50-hue": "calc(var(--w-color-grey-600-hue) + 240)",
|
||||
"--w-color-grey-50-lightness": "calc(var(--w-color-grey-600-lightness) + 82%)",
|
||||
"--w-color-grey-50-saturation": "calc(var(--w-color-grey-600-saturation) + 12%)",
|
||||
"--w-color-grey-50-saturation": "calc(var(--w-color-grey-600-saturation) + 12.5%)",
|
||||
"--w-color-grey-600": "hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness))",
|
||||
"--w-color-grey-600-hue": "0",
|
||||
"--w-color-grey-600-lightness": "15%",
|
||||
"--w-color-grey-600-lightness": "14.9%",
|
||||
"--w-color-grey-600-saturation": "0%",
|
||||
"--w-color-info-100": "hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness))",
|
||||
"--w-color-info-100-hue": "194",
|
||||
"--w-color-info-100-lightness": "36%",
|
||||
"--w-color-info-100-saturation": "66%",
|
||||
"--w-color-info-100-hue": "193.7",
|
||||
"--w-color-info-100-lightness": "36.3%",
|
||||
"--w-color-info-100-saturation": "66.5%",
|
||||
"--w-color-info-50": "hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness))",
|
||||
"--w-color-info-50-hue": "calc(var(--w-color-info-100-hue) + 2)",
|
||||
"--w-color-info-50-lightness": "calc(var(--w-color-info-100-lightness) + 58%)",
|
||||
"--w-color-info-50-saturation": "calc(var(--w-color-info-100-saturation) + 15%)",
|
||||
"--w-color-info-50-hue": "calc(var(--w-color-info-100-hue) + 2.5)",
|
||||
"--w-color-info-50-lightness": "calc(var(--w-color-info-100-lightness) + 57.4%)",
|
||||
"--w-color-info-50-saturation": "calc(var(--w-color-info-100-saturation) + 14.8%)",
|
||||
"--w-color-positive-100": "hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness))",
|
||||
"--w-color-positive-100-hue": "162",
|
||||
"--w-color-positive-100-lightness": "32%",
|
||||
"--w-color-positive-100-saturation": "66%",
|
||||
"--w-color-positive-100-hue": "162.1",
|
||||
"--w-color-positive-100-lightness": "31.6%",
|
||||
"--w-color-positive-100-saturation": "66.5%",
|
||||
"--w-color-positive-50": "hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness))",
|
||||
"--w-color-positive-50-hue": "calc(var(--w-color-positive-100-hue) + 2)",
|
||||
"--w-color-positive-50-lightness": "calc(var(--w-color-positive-100-lightness) + 61%)",
|
||||
"--w-color-positive-50-saturation": "calc(var(--w-color-positive-100-saturation) + 11%)",
|
||||
"--w-color-positive-50-hue": "calc(var(--w-color-positive-100-hue) + 2.3)",
|
||||
"--w-color-positive-50-lightness": "calc(var(--w-color-positive-100-lightness) + 61.5%)",
|
||||
"--w-color-positive-50-saturation": "calc(var(--w-color-positive-100-saturation) + 10.6%)",
|
||||
"--w-color-primary": "hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness))",
|
||||
"--w-color-primary-200": "hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness))",
|
||||
"--w-color-primary-200-hue": "var(--w-color-primary-hue)",
|
||||
"--w-color-primary-200-lightness": "calc(var(--w-color-primary-lightness) - 5%)",
|
||||
"--w-color-primary-200-saturation": "var(--w-color-primary-saturation)",
|
||||
"--w-color-primary-hue": "254",
|
||||
"--w-color-primary-lightness": "25%",
|
||||
"--w-color-primary-saturation": "50%",
|
||||
"--w-color-primary-200-hue": "calc(var(--w-color-primary-hue) - 0.5)",
|
||||
"--w-color-primary-200-lightness": "calc(var(--w-color-primary-lightness) - 4.1%)",
|
||||
"--w-color-primary-200-saturation": "calc(var(--w-color-primary-saturation) - 0.4%)",
|
||||
"--w-color-primary-hue": "254.3",
|
||||
"--w-color-primary-lightness": "24.5%",
|
||||
"--w-color-primary-saturation": "50.4%",
|
||||
"--w-color-secondary": "hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness))",
|
||||
"--w-color-secondary-100": "hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness))",
|
||||
"--w-color-secondary-100-hue": "var(--w-color-secondary-hue)",
|
||||
"--w-color-secondary-100-hue": "calc(var(--w-color-secondary-hue) - 0.2)",
|
||||
"--w-color-secondary-100-lightness": "calc(var(--w-color-secondary-lightness) + 10%)",
|
||||
"--w-color-secondary-100-saturation": "var(--w-color-secondary-saturation)",
|
||||
"--w-color-secondary-400": "hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness))",
|
||||
"--w-color-secondary-400-hue": "calc(var(--w-color-secondary-hue) + 2)",
|
||||
"--w-color-secondary-400-lightness": "calc(var(--w-color-secondary-lightness) - 7%)",
|
||||
"--w-color-secondary-400-hue": "calc(var(--w-color-secondary-hue) + 1.4)",
|
||||
"--w-color-secondary-400-lightness": "calc(var(--w-color-secondary-lightness) - 6.3%)",
|
||||
"--w-color-secondary-400-saturation": "var(--w-color-secondary-saturation)",
|
||||
"--w-color-secondary-50": "hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness))",
|
||||
"--w-color-secondary-50-hue": "var(--w-color-secondary-hue)",
|
||||
"--w-color-secondary-50-lightness": "calc(var(--w-color-secondary-lightness) + 72%)",
|
||||
"--w-color-secondary-50-saturation": "calc(var(--w-color-secondary-saturation) - 37%)",
|
||||
"--w-color-secondary-50-hue": "calc(var(--w-color-secondary-hue) - 0.5)",
|
||||
"--w-color-secondary-50-lightness": "calc(var(--w-color-secondary-lightness) + 72.2%)",
|
||||
"--w-color-secondary-50-saturation": "calc(var(--w-color-secondary-saturation) - 37.5%)",
|
||||
"--w-color-secondary-600": "hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness))",
|
||||
"--w-color-secondary-600-hue": "calc(var(--w-color-secondary-hue) + 2)",
|
||||
"--w-color-secondary-600-lightness": "calc(var(--w-color-secondary-lightness) - 11%)",
|
||||
"--w-color-secondary-600-hue": "calc(var(--w-color-secondary-hue) + 1.2)",
|
||||
"--w-color-secondary-600-lightness": "calc(var(--w-color-secondary-lightness) - 11.2%)",
|
||||
"--w-color-secondary-600-saturation": "var(--w-color-secondary-saturation)",
|
||||
"--w-color-secondary-75": "hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness))",
|
||||
"--w-color-secondary-75-hue": "calc(var(--w-color-secondary-hue) + 1)",
|
||||
"--w-color-secondary-75-lightness": "calc(var(--w-color-secondary-lightness) + 42%)",
|
||||
"--w-color-secondary-75-hue": "calc(var(--w-color-secondary-hue) + 0.2)",
|
||||
"--w-color-secondary-75-lightness": "calc(var(--w-color-secondary-lightness) + 42.8%)",
|
||||
"--w-color-secondary-75-saturation": "calc(var(--w-color-secondary-saturation) - 47%)",
|
||||
"--w-color-secondary-hue": "180",
|
||||
"--w-color-secondary-lightness": "25%",
|
||||
"--w-color-secondary-hue": "180.5",
|
||||
"--w-color-secondary-lightness": "24.7%",
|
||||
"--w-color-secondary-saturation": "100%",
|
||||
"--w-color-warning-100": "hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness))",
|
||||
"--w-color-warning-100-hue": "40",
|
||||
"--w-color-warning-100-hue": "39.6",
|
||||
"--w-color-warning-100-lightness": "49%",
|
||||
"--w-color-warning-100-saturation": "100%",
|
||||
"--w-color-warning-50": "hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness))",
|
||||
"--w-color-warning-50-hue": "calc(var(--w-color-warning-100-hue) - 3)",
|
||||
"--w-color-warning-50-lightness": "calc(var(--w-color-warning-100-lightness) + 42%)",
|
||||
"--w-color-warning-50-saturation": "calc(var(--w-color-warning-100-saturation) - 21%)",
|
||||
"--w-color-warning-50-hue": "calc(var(--w-color-warning-100-hue) - 2.3)",
|
||||
"--w-color-warning-50-lightness": "calc(var(--w-color-warning-100-lightness) + 41.8%)",
|
||||
"--w-color-warning-50-saturation": "calc(var(--w-color-warning-100-saturation) - 21.3%)",
|
||||
"--w-color-white": "hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness))",
|
||||
"--w-color-white-hue": "0",
|
||||
"--w-color-white-lightness": "100%",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const colors = {
|
|||
grey: {
|
||||
600: {
|
||||
hex: '#262626',
|
||||
hsl: 'hsl(0 0% 15%)',
|
||||
hsl: 'hsl(0 0% 14.9%)',
|
||||
bgUtility: 'w-bg-grey-600',
|
||||
textUtility: 'w-text-grey-600',
|
||||
cssVariable: '--w-color-grey-600',
|
||||
|
|
@ -41,7 +41,7 @@ const colors = {
|
|||
},
|
||||
400: {
|
||||
hex: '#5C5C5C',
|
||||
hsl: 'hsl(0 0% 36%)',
|
||||
hsl: 'hsl(0 0% 36.1%)',
|
||||
bgUtility: 'w-bg-grey-400',
|
||||
textUtility: 'w-text-grey-400',
|
||||
cssVariable: '--w-color-grey-400',
|
||||
|
|
@ -50,7 +50,7 @@ const colors = {
|
|||
},
|
||||
200: {
|
||||
hex: '#929292',
|
||||
hsl: 'hsl(0 0% 57%)',
|
||||
hsl: 'hsl(0 0% 57.3%)',
|
||||
bgUtility: 'w-bg-grey-200',
|
||||
textUtility: 'w-text-grey-200',
|
||||
cssVariable: '--w-color-grey-200',
|
||||
|
|
@ -59,7 +59,7 @@ const colors = {
|
|||
},
|
||||
150: {
|
||||
hex: '#C8C8C8',
|
||||
hsl: 'hsl(0 0% 78%)',
|
||||
hsl: 'hsl(0 0% 78.4%)',
|
||||
bgUtility: 'w-bg-grey-150',
|
||||
textUtility: 'w-text-grey-150',
|
||||
cssVariable: '--w-color-grey-150',
|
||||
|
|
@ -68,7 +68,7 @@ const colors = {
|
|||
},
|
||||
100: {
|
||||
hex: '#E0E0E0',
|
||||
hsl: 'hsl(0 0% 88%)',
|
||||
hsl: 'hsl(0 0% 87.8%)',
|
||||
bgUtility: 'w-bg-grey-100',
|
||||
textUtility: 'w-text-grey-100',
|
||||
cssVariable: '--w-color-grey-100',
|
||||
|
|
@ -77,7 +77,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#F6F6F8',
|
||||
hsl: 'hsl(240 12% 97%)',
|
||||
hsl: 'hsl(240 12.5% 96.9%)',
|
||||
bgUtility: 'w-bg-grey-50',
|
||||
textUtility: 'w-text-grey-50',
|
||||
cssVariable: '--w-color-grey-50',
|
||||
|
|
@ -99,7 +99,7 @@ const colors = {
|
|||
primary: {
|
||||
DEFAULT: {
|
||||
hex: '#2E1F5E',
|
||||
hsl: 'hsl(254 50% 25%)',
|
||||
hsl: 'hsl(254.3 50.4% 24.5%)',
|
||||
bgUtility: 'w-bg-primary',
|
||||
textUtility: 'w-text-primary',
|
||||
cssVariable: '--w-color-primary',
|
||||
|
|
@ -108,7 +108,7 @@ const colors = {
|
|||
},
|
||||
200: {
|
||||
hex: '#261A4E',
|
||||
hsl: 'hsl(254 50% 20%)',
|
||||
hsl: 'hsl(253.8 50% 20.4%)',
|
||||
bgUtility: 'w-bg-primary-200',
|
||||
textUtility: 'w-text-primary-200',
|
||||
cssVariable: '--w-color-primary-200',
|
||||
|
|
@ -120,7 +120,7 @@ const colors = {
|
|||
secondary: {
|
||||
600: {
|
||||
hex: '#004345',
|
||||
hsl: 'hsl(182 100% 14%)',
|
||||
hsl: 'hsl(181.7 100% 13.5%)',
|
||||
bgUtility: 'w-bg-secondary-600',
|
||||
textUtility: 'w-text-secondary-600',
|
||||
cssVariable: '--w-color-secondary-600',
|
||||
|
|
@ -129,7 +129,7 @@ const colors = {
|
|||
},
|
||||
400: {
|
||||
hex: '#005B5E',
|
||||
hsl: 'hsl(182 100% 18%)',
|
||||
hsl: 'hsl(181.9 100% 18.4%)',
|
||||
bgUtility: 'w-bg-secondary-400',
|
||||
textUtility: 'w-text-secondary-400',
|
||||
cssVariable: '--w-color-secondary-400',
|
||||
|
|
@ -138,7 +138,7 @@ const colors = {
|
|||
},
|
||||
DEFAULT: {
|
||||
hex: '#007D7E',
|
||||
hsl: 'hsl(180 100% 25%)',
|
||||
hsl: 'hsl(180.5 100% 24.7%)',
|
||||
bgUtility: 'w-bg-secondary',
|
||||
textUtility: 'w-text-secondary',
|
||||
cssVariable: '--w-color-secondary',
|
||||
|
|
@ -147,7 +147,7 @@ const colors = {
|
|||
},
|
||||
100: {
|
||||
hex: '#00B0B1',
|
||||
hsl: 'hsl(180 100% 35%)',
|
||||
hsl: 'hsl(180.3 100% 34.7%)',
|
||||
bgUtility: 'w-bg-secondary-100',
|
||||
textUtility: 'w-text-secondary-100',
|
||||
cssVariable: '--w-color-secondary-100',
|
||||
|
|
@ -156,7 +156,7 @@ const colors = {
|
|||
},
|
||||
75: {
|
||||
hex: '#80D7D8',
|
||||
hsl: 'hsl(181 53% 67%)',
|
||||
hsl: 'hsl(180.7 53% 67.5%)',
|
||||
bgUtility: 'w-bg-secondary-75',
|
||||
textUtility: 'w-text-secondary-75',
|
||||
cssVariable: '--w-color-secondary-75',
|
||||
|
|
@ -165,7 +165,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#F2FCFC',
|
||||
hsl: 'hsl(180 63% 97%)',
|
||||
hsl: 'hsl(180 62.5% 96.9%)',
|
||||
bgUtility: 'w-bg-secondary-50',
|
||||
textUtility: 'w-text-secondary-50',
|
||||
cssVariable: '--w-color-secondary-50',
|
||||
|
|
@ -176,7 +176,7 @@ const colors = {
|
|||
info: {
|
||||
100: {
|
||||
hex: '#1F7E9A',
|
||||
hsl: 'hsl(194 66% 36%)',
|
||||
hsl: 'hsl(193.7 66.5% 36.3%)',
|
||||
bgUtility: 'w-bg-info-100',
|
||||
textUtility: 'w-text-info-100',
|
||||
cssVariable: '--w-color-info-100',
|
||||
|
|
@ -185,7 +185,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#E2F5FC',
|
||||
hsl: 'hsl(196 81% 94%)',
|
||||
hsl: 'hsl(196.2 81.3% 93.7%)',
|
||||
bgUtility: 'w-bg-info-50',
|
||||
textUtility: 'w-text-info-50',
|
||||
cssVariable: '--w-color-info-50',
|
||||
|
|
@ -196,7 +196,7 @@ const colors = {
|
|||
positive: {
|
||||
100: {
|
||||
hex: '#1B8666',
|
||||
hsl: 'hsl(162 66% 32%)',
|
||||
hsl: 'hsl(162.1 66.5% 31.6%)',
|
||||
bgUtility: 'w-bg-positive-100',
|
||||
textUtility: 'w-text-positive-100',
|
||||
cssVariable: '--w-color-positive-100',
|
||||
|
|
@ -205,7 +205,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#E0FBF4',
|
||||
hsl: 'hsl(164 77% 93%)',
|
||||
hsl: 'hsl(164.4 77.1% 93.1%)',
|
||||
bgUtility: 'w-bg-positive-50',
|
||||
textUtility: 'w-text-positive-50',
|
||||
cssVariable: '--w-color-positive-50',
|
||||
|
|
@ -216,7 +216,7 @@ const colors = {
|
|||
warning: {
|
||||
100: {
|
||||
hex: '#FAA500',
|
||||
hsl: 'hsl(40 100% 49%)',
|
||||
hsl: 'hsl(39.6 100% 49%)',
|
||||
bgUtility: 'w-bg-warning-100',
|
||||
textUtility: 'w-text-warning-100',
|
||||
cssVariable: '--w-color-warning-100',
|
||||
|
|
@ -225,7 +225,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#FAECD5',
|
||||
hsl: 'hsl(37 79% 91%)',
|
||||
hsl: 'hsl(37.3 78.7% 90.8%)',
|
||||
bgUtility: 'w-bg-warning-50',
|
||||
textUtility: 'w-text-warning-50',
|
||||
cssVariable: '--w-color-warning-50',
|
||||
|
|
@ -236,7 +236,7 @@ const colors = {
|
|||
critical: {
|
||||
200: {
|
||||
hex: '#CD4444',
|
||||
hsl: 'hsl(0 58% 54%)',
|
||||
hsl: 'hsl(0 57.8% 53.5%)',
|
||||
bgUtility: 'w-bg-critical-200',
|
||||
textUtility: 'w-text-critical-200',
|
||||
cssVariable: '--w-color-critical-200',
|
||||
|
|
@ -245,7 +245,7 @@ const colors = {
|
|||
},
|
||||
100: {
|
||||
hex: '#FD5765',
|
||||
hsl: 'hsl(355 98% 67%)',
|
||||
hsl: 'hsl(354.9 97.6% 66.7%)',
|
||||
bgUtility: 'w-bg-critical-100',
|
||||
textUtility: 'w-text-critical-100',
|
||||
cssVariable: '--w-color-critical-100',
|
||||
|
|
@ -254,7 +254,7 @@ const colors = {
|
|||
},
|
||||
50: {
|
||||
hex: '#FDE9E9',
|
||||
hsl: 'hsl(0 83% 95%)',
|
||||
hsl: 'hsl(0 83.3% 95.3%)',
|
||||
bgUtility: 'w-bg-critical-50',
|
||||
textUtility: 'w-text-critical-50',
|
||||
cssVariable: '--w-color-critical-50',
|
||||
|
|
|
|||
|
|
@ -88,7 +88,9 @@ export const ColorPalette = () => (
|
|||
const variablesMap = Object.entries(generateColorVariables(colors))
|
||||
.map(([cssVar, val]) => `${cssVar}: ${val};`)
|
||||
.join('');
|
||||
const secondaryHSL = colors.secondary.DEFAULT.hsl.match(/\d+/g) as string[];
|
||||
const secondaryHSL = colors.secondary.DEFAULT.hsl.match(
|
||||
/\d+(\.\d+)?/g,
|
||||
) as string[];
|
||||
// Make sure this contains no empty lines, otherwise Sphinx docs will treat this as paragraphs.
|
||||
const liveEditorCustomisations = `:root {
|
||||
--w-color-primary: ${colors.primary.DEFAULT.hex};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -80,6 +80,7 @@ This feature was developed by Jake Howard.
|
|||
* Add a border around the userbar menu in Windows high-contrast mode so it can be identified (Albina Starykova)
|
||||
* Make sure browser font resizing applies to the userbar (Albina Starykova)
|
||||
* Fix check for `delete_url_name` attribute in generic `DeleteView` (Alex Simpson)
|
||||
* Re-implement design system colors so HSL values exactly match the desired RGB (Albina Starykova)
|
||||
|
||||
### Documentation
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue