diff --git a/apps/theme/app/color-debugger/ColorFilter/ColorFIlter.module.css b/apps/theme/app/color-debugger/ColorFilter/ColorFIlter.module.css new file mode 100644 index 0000000000..e1e688bd5f --- /dev/null +++ b/apps/theme/app/color-debugger/ColorFilter/ColorFIlter.module.css @@ -0,0 +1,20 @@ +.filter { + margin-top: 16px; + margin-bottom: 24px; +} + +.item { + border: 1px solid var(--ds-color-neutral-border-subtle); + background-color: white; + height: 40px; + text-align: left; + padding: 0 14px; + margin-right: -1px; + font-size: 15px; + cursor: pointer; +} + +.active { + background-color: rgb(82, 82, 82); + color: white; +} diff --git a/apps/theme/app/color-debugger/ColorFilter/ColorFilter.tsx b/apps/theme/app/color-debugger/ColorFilter/ColorFilter.tsx new file mode 100644 index 0000000000..fa112d21de --- /dev/null +++ b/apps/theme/app/color-debugger/ColorFilter/ColorFilter.tsx @@ -0,0 +1,45 @@ +import cl from 'clsx/lite'; +import { useState } from 'react'; +import { ColorScaleNames } from '../utils'; +import classes from './ColorFIlter.module.css'; + +type ColorFilterProps = { + onFilterChange: (name: string) => void; +}; + +export const ColorFilter = ({ onFilterChange }: ColorFilterProps) => { + const [selected, setSelected] = useState('Alle'); + + type ItemProps = { + name: string; + active?: boolean; + }; + + type NameType = keyof typeof ColorScaleNames | 'Alle'; + + const Item = ({ name, active }: ItemProps) => { + return ( + + ); + }; + + return ( +
+
+ + {ColorScaleNames.map((name, index) => ( + + ))} +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ColorGrid/ColorGrid.module.css b/apps/theme/app/color-debugger/ColorGrid/ColorGrid.module.css new file mode 100644 index 0000000000..4e41b82954 --- /dev/null +++ b/apps/theme/app/color-debugger/ColorGrid/ColorGrid.module.css @@ -0,0 +1,61 @@ +.rows { + display: flex; + flex-direction: column; +} + +.row { + display: flex; + margin-bottom: 12px; + margin-left: -8px; + border-radius: 4px; +} + +.item { + flex: 1; + display: flex; +} + +.color { + height: 44px; + width: 100%; + border: 6px solid white; + border-top: none; + border-radius: 4px; +} + +.baseColor { + width: 100%; + height: 38px; + margin-right: -6px; + border-bottom: none; + position: relative; + z-index: 2; + margin-bottom: 8px; +} + +.checkbox { + margin-top: 4px; + margin-bottom: 24px; +} + +.grid { + background-color: white; + border-radius: 4px; + padding: 24px; +} + +.heading { + margin-bottom: 12px; + font-size: 19px; +} + +.tables { + display: flex; + flex-direction: column; + gap: 32px; +} + +.pageHeading { + font-size: 23px; + font-weight: 500; +} diff --git a/apps/theme/app/color-debugger/ColorGrid/ColorGrid.tsx b/apps/theme/app/color-debugger/ColorGrid/ColorGrid.tsx new file mode 100644 index 0000000000..34f0b246e3 --- /dev/null +++ b/apps/theme/app/color-debugger/ColorGrid/ColorGrid.tsx @@ -0,0 +1,142 @@ +import type { ThemeInfo } from '@/packages/cli/dist/src'; +import { Checkbox, Heading } from '@digdir/designsystemet-react'; +import { useState } from 'react'; +import { useDebugStore } from '../debugStore'; +import { generateColorSchemes } from '../logic/theme'; +import { ColorIndexes } from '../utils'; +import classes from './ColorGrid.module.css'; + +type ColorGridProps = { + colors: ThemeInfo[][]; + showBase?: boolean; + colorNumber: number; +}; + +type RowProps = { + rowColors: ThemeInfo[]; +}; + +export const ColorGrid = ({ colors, colorNumber }: ColorGridProps) => { + const [showBase, setShowBase] = useState(false); + const themeSettings = useDebugStore((state) => state.themeSettings); + const luminance = useDebugStore((state) => state.luminance); + const greyScheme = generateColorSchemes('#000000', luminance, themeSettings); + + const Row = ({ rowColors }: RowProps) => { + return ( +
+ {rowColors.map((rowItem, index) => ( +
+ {showBase && ( +
+ )} +
+
+ ))} +
+ ); + }; + + return ( +
+ setShowBase(e.target.checked)} + className={classes.checkbox} + /> +
+ {colors.map((item, index) => ( + + ))} +
+
+ ); +}; + +type ColorTablesProps = { + colorScales: ThemeInfo[][]; +}; + +export const ColorTables = ({ colorScales }: ColorTablesProps) => { + return ( +
+
Color tables
+
+ Background tinted + +
+ +
+ Surface Default + +
+ +
+ Surface tinted + +
+ +
+ Surface hover + +
+ +
+ Surface Active + +
+ +
+ Border Subtle + +
+ +
+ Border Default + +
+ +
+ Border Strong + +
+ +
+ Text Subtle + +
+ +
+ Text Default + +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ColorInfo/ColorInfo.module.css b/apps/theme/app/color-debugger/ColorInfo/ColorInfo.module.css new file mode 100644 index 0000000000..d1798f8d66 --- /dev/null +++ b/apps/theme/app/color-debugger/ColorInfo/ColorInfo.module.css @@ -0,0 +1,47 @@ +.container { + width: 100%; +} + +.heading { + font-size: 20px; + font-weight: 500; + margin-bottom: 8px; +} + +.items { + display: flex; + width: 100%; + gap: 16px; +} + +.item { + position: relative; + width: 100%; +} + +.label { + font-size: 16px; + margin-bottom: 8px; +} + +.result { + border: 1px solid rgb(216, 216, 216); + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 12px; + font-size: 15px; + margin-top: 12px; + border-radius: 4px; +} + +.resultItem { + width: calc(50% - 8px); + display: flex; + flex-direction: column; + gap: 1px; +} + +.resultLabel { + font-weight: 500; +} diff --git a/apps/theme/app/color-debugger/ColorInfo/ColorInfo.tsx b/apps/theme/app/color-debugger/ColorInfo/ColorInfo.tsx new file mode 100644 index 0000000000..7d43f4fb0a --- /dev/null +++ b/apps/theme/app/color-debugger/ColorInfo/ColorInfo.tsx @@ -0,0 +1,86 @@ +import { getLuminanceFromLightness } from '@/packages/cli/dist/src'; +import chroma from 'chroma-js'; +import { useState } from 'react'; +import { useColor } from 'react-color-palette'; +import { ColorInput } from '../ColorInput/ColorInput'; +import classes from './ColorInfo.module.css'; + +export const ColorInfo = () => { + const [colorOne, setColorOne] = useColor('#0062BA'); + const [colorTwo, setColorTwo] = useColor('#FFFFFF'); + const [showPickerOne, setShowPickerOne] = useState(false); + const [showPickerTwo, setShowPickerTwo] = useState(false); + + const getResult = (color: string) => { + const chromaColor = chroma(color); + const luminance = chromaColor.luminance().toFixed(2); + const temperature = chromaColor.temperature(); + const rgb = chromaColor.rgb(); + const oklch = chromaColor.oklch(); + const oklchLightness = oklch[0].toFixed(2); + + getLuminanceFromLightness; + + return ( +
+
+
RGB
+
+ {rgb[0]} {rgb[1]} {rgb[2]} +
+
+
+
Luminance
+
{luminance}
+
+
+
Temperature
+
{temperature}
+
+
+
OKLCH
+
+ {oklch[0].toFixed(2)} {oklch[1].toFixed(2)} {oklch[2].toFixed(2)} +
+
+
+ ); + }; + + return ( +
+
Color info and comparison
+ +
+
+
Color 1
+ { + setShowPickerOne(!showPickerOne); + setShowPickerTwo(false); + }} + showPicker={showPickerOne} + position='top' + /> + {getResult(colorOne.hex)} +
+
+
Color 2
+ { + setShowPickerTwo(!showPickerTwo); + setShowPickerOne(false); + }} + showPicker={showPickerTwo} + position='top' + /> + {getResult(colorTwo.hex)} +
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ColorInput/ColorInput.module.css b/apps/theme/app/color-debugger/ColorInput/ColorInput.module.css new file mode 100644 index 0000000000..3c66bb6aa8 --- /dev/null +++ b/apps/theme/app/color-debugger/ColorInput/ColorInput.module.css @@ -0,0 +1,64 @@ +.colorBtn { + position: absolute; + top: 7px; + right: 7px; + height: 30px; + width: 30px; + border-radius: 4px; + border: 1px solid rgb(158, 158, 158); + cursor: pointer; +} + +.closeBtn { + position: absolute; + top: 8px; + right: 11px; + height: 30px; + width: 30px; + border-radius: 4px; + border: none; + cursor: pointer; + background-color: transparent; +} + +.input { + height: 44px; + border-radius: 4px; + border: 1px solid rgb(158, 158, 158); + width: 100%; + padding-left: 14px; + font-size: 16px; +} + +.item { + position: relative; + width: 100%; +} + +.picker { + position: absolute; + width: 100%; + z-index: 9999999; + transform: scale(0.9); + top: 32px; + right: -17px; +} + +.top { + top: -670%; + right: 0; + transform: scale(0.75); +} + +.hidePicker { + display: none; +} + +.loopBtn { + position: absolute; + top: 9px; + right: 42px; + background-color: transparent; + border: none; + cursor: pointer; +} diff --git a/apps/theme/app/color-debugger/ColorInput/ColorInput.tsx b/apps/theme/app/color-debugger/ColorInput/ColorInput.tsx new file mode 100644 index 0000000000..5dc273d1b3 --- /dev/null +++ b/apps/theme/app/color-debugger/ColorInput/ColorInput.tsx @@ -0,0 +1,75 @@ +import { ArrowsCirclepathIcon, XMarkIcon } from '@navikt/aksel-icons'; +import cl from 'clsx/lite'; +import { useEffect, useState } from 'react'; +import { ColorPicker, ColorService, type IColor } from 'react-color-palette'; +import classes from './ColorInput.module.css'; + +type ColorInputProps = { + color: IColor; + setColor: (color: IColor) => void; + showPicker: boolean; + onColorClicked: () => void; + showReset?: boolean; + position?: 'top' | 'bottom'; +}; + +export const ColorInput = ({ + color, + setColor, + showPicker, + onColorClicked, + showReset = false, + position = 'bottom', +}: ColorInputProps) => { + const [initialColor, setInitialColor] = useState(color); + useEffect(() => { + setInitialColor(color); + }, []); + + return ( +
+ { + setColor(ColorService.convert('hex', e.target.value)); + }} + /> + {showReset && initialColor.hex !== color.hex && ( + + )} + {!showPicker && ( + + )} + {showPicker && ( + + )} +
+ +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ColorScale/ColorScale.module.css b/apps/theme/app/color-debugger/ColorScale/ColorScale.module.css new file mode 100644 index 0000000000..a8c8a0790a --- /dev/null +++ b/apps/theme/app/color-debugger/ColorScale/ColorScale.module.css @@ -0,0 +1,86 @@ +.scale { + display: grid; + grid-template-columns: repeat(16, 1fr); + width: 100%; + gap: 12px; +} + +.group { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-basis: 0; +} + +.group-2 { + grid-column: span 2; +} + +.group-3 { + grid-column: span 3; +} + +.group-4 { + grid-column: span 4; +} +.group-5 { + grid-column: span 5; +} +.items { + display: flex; + gap: 5px; +} + +.item { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-basis: 0; + align-items: center; + margin-right: -1px; +} + +.title { + text-align: center; + border-bottom: 1px solid var(--ds-color-neutral-border-subtle); + padding-bottom: 8px; + margin-bottom: 8px; + font-size: 15px; +} + +.name { + font-size: 14px; + margin-bottom: 12px; +} + +.color { + height: 40px; + width: 100%; + border: 1px solid var(--ds-color-neutral-border-subtle); + border-radius: 2px; +} + +.panel { + background-color: white; + padding: 24px; + border-radius: 8px; + border: 1px solid var(--ds-color-neutral-border-subtle); + width: 100%; +} + +.container { + width: 100%; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.heading { + font-weight: 500; + font-size: 23px; + line-height: 1.3; +} diff --git a/apps/theme/app/color-debugger/ColorScale/ColorScale.tsx b/apps/theme/app/color-debugger/ColorScale/ColorScale.tsx new file mode 100644 index 0000000000..640341bf7c --- /dev/null +++ b/apps/theme/app/color-debugger/ColorScale/ColorScale.tsx @@ -0,0 +1,169 @@ +import type { CssColor } from '@digdir/designsystemet/color'; +import cl from 'clsx/lite'; +import { useEffect, useState } from 'react'; +import { useColor } from 'react-color-palette'; +import { ColorInput } from '../ColorInput/ColorInput'; +import { useDebugStore } from '../debugStore'; +import { generateColorSchemes } from '../logic/theme'; +import classes from './ColorScale.module.css'; + +export const ColorScale = () => { + const luminance = useDebugStore((state) => state.luminance); + const themeSettings = useDebugStore((state) => state.themeSettings); + const [color, setColor] = useColor('#0062BA'); + const [scale, setScale] = useState( + generateColorSchemes(color.hex as CssColor, luminance, themeSettings), + ); + const [showPicker, setShowPicker] = useState(false); + + type ItemProps = { + item: { name: string; hex: string }; + }; + + useEffect(() => { + setScale( + generateColorSchemes(color.hex as CssColor, luminance, themeSettings), + ); + }, [luminance, themeSettings, color]); + + const Item = ({ item }: ItemProps) => { + return ( +
+
{item.name}
+
+
+ ); + }; + + type GroupProps = { + name: string; + items: { name: string; hex: string }[]; + }; + + const Group = ({ name, items }: GroupProps) => { + return ( +
+
{name}
+
+ {items?.map((item, index) => ( + + ))} +
+
+ ); + }; + + return ( +
+
+
Color scale
+
+ { + setShowPicker(!showPicker); + }} + showPicker={showPicker} + /> +
+
+
+ + + + + + + +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.module.css b/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.module.css new file mode 100644 index 0000000000..6b9503c8e2 --- /dev/null +++ b/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.module.css @@ -0,0 +1,70 @@ +.checker { + width: 100%; +} + +.input { + height: 46px; + border-radius: 4px; + border: 1px solid rgb(158, 158, 158); + width: 100%; + padding-left: 14px; + font-size: 16px; +} + +.items { + display: flex; + gap: 16px; + width: 100%; +} + +.item { + position: relative; + width: 50%; +} + +.colorInput { + position: relative; +} + +.colorBtn { + position: absolute; + top: 7px; + right: 7px; + height: 32px; + width: 32px; + border-radius: 4px; + border: 1px solid rgb(158, 158, 158); +} + +.result { + border: 1px solid rgb(158, 158, 158); + border-radius: 4px; + margin-top: 16px; + min-height: 125px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + font-size: 32px; +} + +.picker { + position: absolute; + width: 100%; + z-index: 5; +} + +.hidePicker { + display: none; +} + +.label { + font-size: 16px; + margin-bottom: 8px; +} + +.heading { + font-size: 20px; + font-weight: 500; + margin-bottom: 8px; +} diff --git a/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.tsx b/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.tsx new file mode 100644 index 0000000000..bcd83dca88 --- /dev/null +++ b/apps/theme/app/color-debugger/ContrastChecker/ContrastChecker.tsx @@ -0,0 +1,79 @@ +import { + type CssColor, + getContrastFromHex, +} from '@digdir/designsystemet/color'; +import { useEffect, useState } from 'react'; +import { type IColor, useColor } from 'react-color-palette'; +import { ColorInput } from '../ColorInput/ColorInput'; +import classes from './ContrastChecker.module.css'; + +type ColorInputProps = { + color: IColor; + setColor: (color: IColor) => void; + showPicker: boolean; + onColorClicked: () => void; +}; + +export const ContrastChecker = () => { + const [colorOne, setColorOne] = useColor('#0062BA'); + const [colorTwo, setColorTwo] = useColor('#FFFFFF'); + const [result, setResult] = useState('13.2:1'); + const [showPickerOne, setShowPickerOne] = useState(false); + const [showPickerTwo, setShowPickerTwo] = useState(false); + + const setResults = () => { + setResult( + getContrastFromHex( + colorOne.hex as CssColor, + colorTwo.hex as CssColor, + ).toFixed(1) + ':1', + ); + }; + + useEffect(() => { + setResults(); + }, [colorOne, colorTwo]); + + return ( +
+
Contrast checker
+
+
+
Foreground
+ { + setShowPickerOne(!showPickerOne); + setShowPickerTwo(false); + }} + showPicker={showPickerOne} + position='top' + /> +
+
+
Background
+ { + setShowPickerTwo(!showPickerTwo); + setShowPickerOne(false); + }} + showPicker={showPickerTwo} + position='top' + /> +
+
+
{ + setShowPickerOne(false); + setShowPickerTwo(false); + }} + > + {result} +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/ContrastColors/ContrastColors.module.css b/apps/theme/app/color-debugger/ContrastColors/ContrastColors.module.css new file mode 100644 index 0000000000..71d3e14544 --- /dev/null +++ b/apps/theme/app/color-debugger/ContrastColors/ContrastColors.module.css @@ -0,0 +1,84 @@ +.groupContainer { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.group { + display: flex; + border: 1px solid var(--ds-color-neutral-border-subtle); + margin-bottom: 20px; + border-radius: 4px; + overflow: hidden; + width: calc(33.33% - 14px); +} + +.item { + background-color: white; + width: 100%; +} + +.color { + width: 100%; + height: 72px; + display: flex; + gap: 10px; + padding: 10px; +} + +.circle { + height: 28px; + width: 50%; + border-radius: 4px; +} + +.groupHeading { + font-size: 20px; + font-weight: 500; + margin-bottom: 16px; + margin-top: 18px; +} + +.content { + font-size: 14px; + display: flex; + gap: 8px; + flex-direction: column; + padding: 10px; +} + +.textContent { + display: flex; + width: 100%; + gap: 16px; +} + +.contrastContent { + display: flex; + gap: 16px; +} + +.contrastContent > div { + display: flex; + gap: 6px; + flex-direction: column; +} + +.contrastSection { + display: flex; + gap: 6px; + align-items: center; +} + +.contrastCircle { + height: 14px; + width: 14px; + border-radius: 50%; + border: 1px solid black; + margin-bottom: -1px; +} + +.group .item:nth-child(1) .content, +.group .item:nth-child(2) .content { + border-right: 1px solid rgb(201, 201, 201); +} diff --git a/apps/theme/app/color-debugger/ContrastColors/ContrastColors.tsx b/apps/theme/app/color-debugger/ContrastColors/ContrastColors.tsx new file mode 100644 index 0000000000..a08f1e9522 --- /dev/null +++ b/apps/theme/app/color-debugger/ContrastColors/ContrastColors.tsx @@ -0,0 +1,119 @@ +import { + type CssColor, + type ThemeInfo, + getContrastFromHex, + getLightnessFromHex, +} from '@digdir/designsystemet/color'; +import chroma from 'chroma-js'; +import { useDebugStore } from '../debugStore'; +import { ColorIndexes } from '../utils'; +import classes from './ContrastColors.module.css'; + +export const ContrastColors = () => { + const colorScales = useDebugStore((state) => state.colorScales); + const themeSettings = useDebugStore((state) => state.themeSettings); + const colorHeadings = [ + 'Red', + 'Pure Orange', + 'Light Orange', + 'Yellow', + 'Pale Green', + 'Green', + 'Cyan', + 'Blue', + 'Strong Blue', + 'Purple', + 'Pink', + ]; + + const contrastSection = (color1: CssColor, color2: CssColor) => { + const contrast = getContrastFromHex(color1, color2).toFixed(2); + return ( +
+
+
{contrast}
+
+ ); + }; + + const Item = ({ + color, + scheme, + hideSecondCircle, + }: { color: CssColor; scheme: ThemeInfo; hideSecondCircle?: boolean }) => { + return ( +
+
+
+
+
Li: {getLightnessFromHex(color).toFixed(1)}
+
Lu: {chroma(color).luminance().toFixed(2)}
+
+
+
+
{contrastSection(color, '#ffffff')}
+
{contrastSection(color, '#000000')}
+
+
+ {!hideSecondCircle && ( +
+ {contrastSection( + color, + scheme[themeSettings.general.colorScheme][ + ColorIndexes.baseContrastSubtle + ].hex, + )} +
+ )} +
+
+
+
+ ); + }; + + return ( +
+ {colorScales.map((outerScales, outerKey) => ( +
+
{colorHeadings[outerKey]}
+
+ {outerScales.map((innerScale, key) => ( +
+ + + +
+ ))} +
+
+ ))} +
+ ); +}; diff --git a/apps/theme/app/color-debugger/DoubleInput/DoubleInput.module.css b/apps/theme/app/color-debugger/DoubleInput/DoubleInput.module.css new file mode 100644 index 0000000000..199ab39960 --- /dev/null +++ b/apps/theme/app/color-debugger/DoubleInput/DoubleInput.module.css @@ -0,0 +1,57 @@ +.container { + display: flex; + font-size: 16px; + justify-content: space-between; + align-items: center; +} + +.input { + width: 85px; + height: 32px; + font-size: 16px; + position: relative; +} + +.activeInput input { + border: 1px solid rgb(0, 110, 255); + outline: 1px solid #006eff; + background-color: #eff6ff; +} + +.input input { + border-radius: 4px; + border: 1px solid var(--ds-color-neutral-border-default); + padding: 0 8px; + display: block; + height: 100%; + width: 100%; + font-size: 15px; +} + +.btn { + background-color: transparent; + border: none; + position: absolute; + top: 4px; + right: 6px; + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 50%; +} + +.btn svg { + transform: scale(1.5); +} + +.btn:hover { + background-color: rgb(196, 209, 255); +} + +.inputs { + display: flex; + gap: 12px; +} diff --git a/apps/theme/app/color-debugger/DoubleInput/DoubleInput.tsx b/apps/theme/app/color-debugger/DoubleInput/DoubleInput.tsx new file mode 100644 index 0000000000..5ef21855bb --- /dev/null +++ b/apps/theme/app/color-debugger/DoubleInput/DoubleInput.tsx @@ -0,0 +1,70 @@ +import { ArrowCirclepathIcon } from '@navikt/aksel-icons'; +import cl from 'clsx/lite'; +import { useState } from 'react'; +import classes from './DoubleInput.module.css'; + +type DoubleInputProps = { + label: string; + valueOne: string; + valueTwo?: string; + setValueOne: (value: string) => void; + setValueTwo?: (value: string) => void; +}; + +type InputProps = { + value: string; + setValue: (value: string) => void; +}; + +const Input = ({ value, setValue }: InputProps) => { + const [oldValue, setOldValue] = useState(value); + const [newValue, setNewValue] = useState(value); + + return ( +
+ { + setValue(e.target.value); + setNewValue(e.target.value); + }} + /> + +
+ ); +}; + +export const DoubleInput = ({ + label, + valueOne, + valueTwo, + setValueOne, + setValueTwo, +}: DoubleInputProps) => { + return ( +
+
{label}
+
+ setValueOne(e)} /> + {valueTwo && setValueTwo && ( + setValueTwo(e)} /> + )} +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/FrontPage/FrontPage.module.css b/apps/theme/app/color-debugger/FrontPage/FrontPage.module.css new file mode 100644 index 0000000000..56274e371a --- /dev/null +++ b/apps/theme/app/color-debugger/FrontPage/FrontPage.module.css @@ -0,0 +1,65 @@ +.container { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.panel { + width: calc(50% - 10px); + display: flex; + flex-wrap: wrap; + background-color: white; + padding: 24px; + border-radius: 8px; + border: 1px solid var(--ds-color-neutral-border-subtle); +} + +.contrastTests { + width: 100%; +} + +.contrastTestsItems { + display: flex; + gap: 16px; + flex-wrap: wrap; + width: 100%; +} + +.contrastTestsItem { + background-color: white; + padding: 24px; + border-radius: 8px; + border: 1px solid var(--ds-color-neutral-border-subtle); + position: relative; + width: calc(33% - 8px); + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; +} + +.contrastTestsHeading { + font-size: 23px; + font-weight: 500; + margin-bottom: 16px; + margin-top: 8px; +} + +.sectionCircle { + width: 44px; + height: 44px; + border-radius: 50%; + margin-right: 8px; + background-color: rgb(255, 173, 173); + display: flex; + align-items: center; + justify-content: center; +} + +.passed { + background-color: rgb(158, 233, 177); +} + +.sectionHeading { + font-weight: 500; +} diff --git a/apps/theme/app/color-debugger/FrontPage/FrontPage.tsx b/apps/theme/app/color-debugger/FrontPage/FrontPage.tsx new file mode 100644 index 0000000000..5878dbee68 --- /dev/null +++ b/apps/theme/app/color-debugger/FrontPage/FrontPage.tsx @@ -0,0 +1,278 @@ +import { + type CssColor, + type ThemeInfo, + getContrastFromHex, +} from '@digdir/designsystemet/color'; +import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; +import chroma from 'chroma-js'; +import cl from 'clsx/lite'; +import { useEffect, useState } from 'react'; +import { ColorInfo } from '../ColorInfo/ColorInfo'; +import { ColorScale } from '../ColorScale/ColorScale'; +import { ContrastChecker } from '../ContrastChecker/ContrastChecker'; +import { + type LuminanceType, + type ThemeSettingsType, + useDebugStore, +} from '../debugStore'; +import { generateColorSchemes } from '../logic/theme'; +import { ColorIndexes } from '../utils'; +import classes from './FrontPage.module.css'; + +const generateBaseThemes = ( + luminance: LuminanceType, + themeSettings: ThemeSettingsType, +) => { + const themes = []; + for (let i = 0; i < 100; i++) { + const color = chroma('#0062BA') + .luminance((i + 1) / 100) + .hex() as CssColor; + themes.push(generateColorSchemes(color, luminance, themeSettings)); + } + return themes; +}; + +export const FrontPage = () => { + const luminance = useDebugStore((state) => state.luminance); + const theme = useDebugStore((state) => state.colorScale); + const [baseThemes, setBaseThemes] = useState( + generateBaseThemes(luminance, useDebugStore.getState().themeSettings), + ); + const themeSettings = useDebugStore((state) => state.themeSettings); + + useEffect(() => { + setBaseThemes(generateBaseThemes(luminance, themeSettings)); + }, [themeSettings.base]); + + const testColorContrasts = ( + index1: number, + index2: number, + contrastLimit: number, + mode: 'light' | 'dark', + ) => { + let passed = 0; + for (let i = 0; i < baseThemes.length; i++) { + const theme = baseThemes[i]; + const contrast = getContrastFromHex( + theme[mode][index1].hex, + theme[mode][index2].hex, + ); + if (contrast >= contrastLimit) { + passed++; + } else { + } + } + return passed; + }; + + type ContrastSectionProps = { + title: string; + desc: string; + error: boolean; + }; + + const getTextDefaultTests = (mode: 'light' | 'dark') => { + const tests = [ + ColorIndexes.backgroundDefault, + ColorIndexes.backgroundTinted, + ColorIndexes.surfaceDefault, + ColorIndexes.surfaceTinted, + ColorIndexes.surfaceHover, + ColorIndexes.surfaceActive, + ]; + + return tests.reduce((passed, index) => { + const contrast = getContrastFromHex( + theme[mode][index].hex, + theme[mode][ColorIndexes.textDefault].hex, + ); + return passed + (contrast >= 4.5 ? 1 : 0); + }, 0); + }; + + const getTextSubtleTests = (mode: 'light' | 'dark') => { + const tests = [ + ColorIndexes.backgroundDefault, + ColorIndexes.backgroundTinted, + ColorIndexes.surfaceDefault, + ColorIndexes.surfaceTinted, + ]; + + return tests.reduce((passed, index) => { + const contrast = getContrastFromHex( + theme[mode][index].hex, + theme[mode][ColorIndexes.textSubtle].hex, + ); + return passed + (contrast >= 4.5 ? 1 : 0); + }, 0); + }; + + const getBorderDefaultTests = (mode: 'light' | 'dark') => { + const tests = [ + ColorIndexes.backgroundDefault, + ColorIndexes.backgroundTinted, + ColorIndexes.surfaceDefault, + ColorIndexes.surfaceTinted, + ]; + + return tests.reduce((passed, index) => { + const contrast = getContrastFromHex( + theme[mode][index].hex, + theme[mode][ColorIndexes.borderDefault].hex, + ); + return passed + (contrast >= 3 ? 1 : 0); + }, 0); + }; + + const getBorderStrongTests = (mode: 'light' | 'dark') => { + const tests = [ + ColorIndexes.backgroundDefault, + ColorIndexes.backgroundTinted, + ColorIndexes.surfaceDefault, + ColorIndexes.surfaceTinted, + ]; + + return tests.reduce((passed, index) => { + const contrast = getContrastFromHex( + theme[mode][index].hex, + theme[mode][ColorIndexes.borderStrong].hex, + ); + return passed + (contrast >= 4.5 ? 1 : 0); + }, 0); + }; + + const getContrastDefaultTests = (mode: 'light' | 'dark') => { + let passed = 0; + const test1 = testColorContrasts( + ColorIndexes.baseDefault, + ColorIndexes.baseContrastDefault, + 4.5, + mode, + ); + const test2 = testColorContrasts( + ColorIndexes.baseHover, + ColorIndexes.baseContrastDefault, + 4.5, + mode, + ); + const test3 = testColorContrasts( + ColorIndexes.baseActive, + ColorIndexes.baseContrastDefault, + 4.5, + mode, + ); + passed += test1 + test2 + test3; + + return passed; + }; + + const getContrastSubtleTests = (mode: 'light' | 'dark') => { + let passed = 0; + const test1 = testColorContrasts( + ColorIndexes.baseDefault, + ColorIndexes.baseContrastSubtle, + 4.5, + mode, + ); + passed += test1; + + return passed; + }; + + const ContrastSection = ({ title, desc, error }: ContrastSectionProps) => { + return ( +
+ {error && ( +
+ +
+ )} + {!error && ( +
+ +
+ )} +
+
{title}
+
{desc}
+
+
+ ); + }; + + return ( +
+ + +
+ +
+
+ +
+ +
+
Contrast tests
+
+ + + + + + +
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/Mobile/CategoryIcon.tsx b/apps/theme/app/color-debugger/Mobile/CategoryIcon.tsx new file mode 100644 index 0000000000..ed7fece4f9 --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/CategoryIcon.tsx @@ -0,0 +1,75 @@ +type CategoryIconsProps = { + color: string; + type: 'sword' | 'flask' | 'shield' | 'hex'; +}; + +type IconProps = { + color: string; +}; + +export const CategoryIcon = ({ color, type }: CategoryIconsProps) => { + const Hex = ({ color }: IconProps) => { + return ( + + + + ); + }; + + const Flask = ({ color }: IconProps) => { + return ( + + + + ); + }; + + const Shield = ({ color }: IconProps) => { + return ( + + + + ); + }; + + const Sword = ({ color }: IconProps) => { + return ( + + + + ); + }; + + return ( + <> + {type === 'sword' && } + {type === 'flask' && } + {type === 'shield' && } + {type === 'hex' && } + + ); +}; diff --git a/apps/theme/app/color-debugger/Mobile/FooterIcon.tsx b/apps/theme/app/color-debugger/Mobile/FooterIcon.tsx new file mode 100644 index 0000000000..94468fbe40 --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/FooterIcon.tsx @@ -0,0 +1,95 @@ +type FooterIconProps = { + type: 'house' | 'heart' | 'letter' | 'profile'; + color: string; +}; + +export const FooterIcon = ({ type, color }: FooterIconProps) => { + type IconProps = { + color: string; + }; + + const House = ({ color }: IconProps) => { + return ( + + + + ); + }; + + const Heart = ({ color }: IconProps) => { + return ( + + + + ); + }; + + const Letter = ({ color }: IconProps) => { + return ( + + + + + ); + }; + + const Profile = ({ color }: IconProps) => { + return ( + + + + ); + }; + + return ( + <> + {type === 'house' && } + {type === 'heart' && } + {type === 'letter' && } + {type === 'profile' && } + + ); +}; diff --git a/apps/theme/app/color-debugger/Mobile/Mobile.module.css b/apps/theme/app/color-debugger/Mobile/Mobile.module.css new file mode 100644 index 0000000000..1eff106b7c --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/Mobile.module.css @@ -0,0 +1,239 @@ +.item { + border-radius: 26px; + background-color: grey; + width: 100%; + height: 680px; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; + border: 1px solid rgb(212, 212, 212); +} + +.pageHeading { + font-size: 23px; + font-weight: 500; + margin-bottom: 12px; +} + +.title { + font-size: 20px; + font-weight: 500; + margin-bottom: 0px; +} + +.colorMeta { + display: flex; + align-items: center; + margin-top: 16px; + margin-bottom: 12px; +} + +.colorMetaColor { + height: 24px; + width: 100%; + background-color: red; + border-radius: 4px; +} + +.colorRow { + display: flex; + flex-direction: column; +} + +.row { + display: flex; + gap: 16px; + max-width: 1432px; + width: 100%; + overflow-x: auto; + padding: 6px; + margin-left: -6px; + width: calc(100% + 122px); + margin-bottom: 32px; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 15px; +} + +.logo { + font-size: 14px; + font-weight: 600; +} + +.avatar { + height: 30px; + width: 30px; + border-radius: 50%; +} + +.headerContainer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.link { + font-size: 12px; + color: inherit; + padding-bottom: 12px; +} + +.heading { + font-size: 15px; + font-weight: 500; + padding-bottom: 12px; + line-height: 1.3; +} + +.search { + padding: 0 15px; + margin-top: 22px; +} + +.searchInput { + height: 43px; + width: 100%; + border-radius: 4px; + border: 1px solid #c5c5c5; + padding-left: 42px; + font-size: 14px; +} + +.searchContainer { + position: relative; +} + +.searchIcon { + position: absolute; + top: 9px; + left: 10px; +} + +.searchMic { + position: absolute; + top: 9px; + right: 9px; +} + +.posts { + padding: 0 15px; + margin-top: 20px; +} + +.postsItems { + overflow: hidden; + display: flex; + width: 1200px; + gap: 10px; +} + +.postsItem { + display: flex; + width: 240px; + flex-direction: column; + margin-bottom: 20px; + border-radius: 4px; + overflow: hidden; + background-color: white; +} + +.postsImg { + width: 100%; + height: 170px; +} + +.postsText { + padding: 16px; + display: flex; + flex-direction: column; + gap: 1px; +} + +.postsTitle { + font-size: 13px; + font-weight: 500; +} + +.postsDesc { + font-size: 12px; +} + +.categories { + padding: 0 15px; + margin-top: 24px; +} + +.categoriesItems { + display: flex; + gap: 10px; + overflow: hidden; + width: 500px; +} + +.categoryItem { + display: flex; + align-items: center; + flex-direction: column; +} + +.categoryName { + font-size: 12px; + margin-top: 8px; +} + +.categoryIconContainer { + width: 83px; + height: 46px; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(255, 255, 255); + border-radius: 4px; +} + +.footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 72px; + background-color: white; + box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.06); +} + +.footerItems { + display: flex; + justify-content: space-between; + padding: 0 40px; + align-items: center; + height: 100%; +} + +.footerItem { + position: relative; + margin-top: -6px; +} + +.footerCircle { + height: 6px; + width: 6px; + background-color: red; + position: absolute; + bottom: -4px; + border-radius: 50%; + left: 9px; +} + +.footerBar { + height: 5px; + width: 130px; + background-color: rgb(95, 95, 95); + border-radius: 100px; + position: absolute; + bottom: 8px; + left: calc(50% - 65px); +} diff --git a/apps/theme/app/color-debugger/Mobile/Mobile.tsx b/apps/theme/app/color-debugger/Mobile/Mobile.tsx new file mode 100644 index 0000000000..d7b368afa8 --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/Mobile.tsx @@ -0,0 +1,492 @@ +import { + type ThemeInfo, + generateColorSchemes, +} from '@digdir/designsystemet/color'; +import { + MagnifyingGlassIcon, + MenuHamburgerIcon, + MicrophoneIcon, +} from '@navikt/aksel-icons'; +import cl from 'clsx/lite'; +import { useState } from 'react'; +import { ColorFilter } from '../ColorFilter/ColorFilter'; +import { useDebugStore } from '../debugStore'; +import { ColorIndexes, ColorScaleNames } from '../utils'; +import { CategoryIcon } from './CategoryIcon'; +import { FooterIcon } from './FooterIcon'; +import classes from './Mobile.module.css'; +import { MobileHeader } from './MobileHeader/MobileHeader'; + +type MobileProps = { + colorScales: ThemeInfo[][]; +}; + +export const Mobile = ({ colorScales }: MobileProps) => { + const greyScheme = generateColorSchemes('#000000'); + const [activeColor, setActiveColor] = useState('Alle'); + const themeSettings = useDebugStore((state) => state.themeSettings); + + type ItemProps = { + colorScheme: ThemeInfo; + type: 'A' | 'B' | 'C' | 'D'; + }; + + type CategoryItemProps = { + name: string; + children: React.ReactNode; + activeColor?: string; + showShadow?: boolean; + scale: ThemeInfo; + }; + + type PostItemProps = { + title: string; + desc: string; + img: string; + type: string; + colorScheme: ThemeInfo; + showShadow?: boolean; + }; + + const getCategoryBg = (type: string, colorScheme: ThemeInfo) => { + if (type === 'A' || type === 'B') { + if (type === 'A') { + return greyScheme[themeSettings.general.colorScheme][2].hex; + } + return colorScheme[themeSettings.general.colorScheme][2].hex; + } + return colorScheme[themeSettings.general.colorScheme][3].hex; + }; + + const CategoryItem = ({ + name, + activeColor, + showShadow, + children, + scale, + }: CategoryItemProps) => { + return ( +
+
+ {children} +
+
+ {name} +
+
+ ); + }; + + const PostItem = ({ + title, + desc, + img, + type, + showShadow, + colorScheme, + }: PostItemProps) => { + return ( +
+ +
+
+ {title} +
+
+ {desc} +
+
+
+ ); + }; + + type HeadingProps = { + name: string; + scale: ThemeInfo; + }; + + const Heading = ({ scale, name }: HeadingProps) => { + return ( +
+ {name} +
+ ); + }; + + const Item = ({ colorScheme, type }: ItemProps) => { + return ( +
+ +
+
+ +
+
+ Gamezone +
+ +
+
+ +
+ + + +
+
+ +
+ + +
+ + + + + + + + + + + + +
+
+ +
+ +
+ + +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ ); + }; + + return ( +
+
App design
+ setActiveColor(e)} /> + {colorScales.map((innerScales, index) => ( +
+ {(ColorScaleNames[index] === activeColor || + activeColor === 'Alle') && ( + <> +
{ColorScaleNames[index]}
+
+ {innerScales.map((colorScheme, index2) => ( +
+
+
+
+
+ + + + +
+
+ ))} +
+ + )} +
+ ))} +
+ ); +}; diff --git a/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.module.css b/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.module.css new file mode 100644 index 0000000000..0e6a25aae7 --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.module.css @@ -0,0 +1,14 @@ +.container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 22px; +} + +.time { + transform: scale(1); +} + +.status { + transform: scale(1); +} diff --git a/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.tsx b/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.tsx new file mode 100644 index 0000000000..dbe8767578 --- /dev/null +++ b/apps/theme/app/color-debugger/Mobile/MobileHeader/MobileHeader.tsx @@ -0,0 +1,162 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { useDebugStore } from '../../debugStore'; +import { ColorIndexes } from '../../utils'; +import classes from './MobileHeader.module.css'; + +type MobileHeaderProps = { + scale: ThemeInfo; +}; + +export const MobileHeader = ({ scale }: MobileHeaderProps) => { + const themeSettings = useDebugStore((state) => state.themeSettings); + + const Time = () => { + return ( + + + + ); + }; + + const Status = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); + }; + + return ( +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/RangeBar/RangeBar.module.css b/apps/theme/app/color-debugger/RangeBar/RangeBar.module.css new file mode 100644 index 0000000000..16fadd4fc0 --- /dev/null +++ b/apps/theme/app/color-debugger/RangeBar/RangeBar.module.css @@ -0,0 +1,22 @@ +.bar { + height: 7px; + width: 100%; + background-color: #dbdbdb; + display: flex; + border-radius: 10px; + overflow: hidden; + margin-top: 4px; +} + +.min { + height: 7px; + width: 30%; + background-color: #ff8484; +} + +.range { + height: 7px; + width: 30%; + margin-left: 30%; + background-color: #ff8484; +} diff --git a/apps/theme/app/color-debugger/RangeBar/RangeBar.tsx b/apps/theme/app/color-debugger/RangeBar/RangeBar.tsx new file mode 100644 index 0000000000..d976763a38 --- /dev/null +++ b/apps/theme/app/color-debugger/RangeBar/RangeBar.tsx @@ -0,0 +1,32 @@ +import classes from './RangeBar.module.css'; + +type RangeBarProps = { + min: number; + rangeMin: number; + rangeMax: number; + barActiveColor?: string; +}; + +export const RangeBar = ({ + min, + rangeMin, + rangeMax, + barActiveColor = '#ff8484', +}: RangeBarProps) => { + return ( +
+
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/Scales/Scales.module.css b/apps/theme/app/color-debugger/Scales/Scales.module.css new file mode 100644 index 0000000000..f0271e2e27 --- /dev/null +++ b/apps/theme/app/color-debugger/Scales/Scales.module.css @@ -0,0 +1,29 @@ +.scales { + display: flex; + flex-direction: column; + margin-bottom: 24px; +} + +.scale { + display: flex; + margin-bottom: 12px; + border: 1px solid rgb(206, 206, 206); +} + +.color { + flex: 1; + height: 50px; +} + +.title { + font-size: 21px; + font-weight: 500; + margin-bottom: 12px; + margin-top: 0px; +} + +.heading { + font-size: 23px; + font-weight: 500; + margin-bottom: 12px; +} diff --git a/apps/theme/app/color-debugger/Scales/Scales.tsx b/apps/theme/app/color-debugger/Scales/Scales.tsx new file mode 100644 index 0000000000..ca666f0b9a --- /dev/null +++ b/apps/theme/app/color-debugger/Scales/Scales.tsx @@ -0,0 +1,52 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { useState } from 'react'; +import { ColorFilter } from '../ColorFilter/ColorFilter'; +import { useDebugStore } from '../debugStore'; +import { ColorScaleNames } from '../utils'; +import classes from './Scales.module.css'; + +export const Scales = () => { + const colorScales = useDebugStore((state) => state.colorScales); + const themeSettings = useDebugStore((state) => state.themeSettings); + const [activeColor, setActiveColor] = useState('Alle'); + + type ScaleProps = { + scale: ThemeInfo; + }; + + const Scale = ({ scale }: ScaleProps) => { + return ( +
+ {scale[themeSettings.general.colorScheme].map( + (color: { hex: string }, index: number) => ( +
+ ), + )} +
+ ); + }; + + return ( +
+
Color scales
+ setActiveColor(e)} /> + {colorScales.map((innerScales, index) => ( +
+ {(ColorScaleNames[index] === activeColor || + activeColor === 'Alle') && ( +
+
{ColorScaleNames[index]}
+ {innerScales.map((scale, index) => ( + + ))} +
+ )} +
+ ))} +
+ ); +}; diff --git a/apps/theme/app/color-debugger/Sidebar/Sidebar.module.css b/apps/theme/app/color-debugger/Sidebar/Sidebar.module.css new file mode 100644 index 0000000000..6306568b22 --- /dev/null +++ b/apps/theme/app/color-debugger/Sidebar/Sidebar.module.css @@ -0,0 +1,50 @@ +.sidebar { + background-color: white; + border: 1px solid var(--ds-color-neutral-border-subtle); + z-index: 10; + border-radius: 8px; + position: fixed; + top: 80px; + right: 24px; + bottom: 24px; + width: 410px; + padding: 20px; + display: flex; + gap: 20px; + flex-direction: column; + overflow-y: auto; +} + +.group { + display: flex; + flex-direction: column; + gap: 16px; +} + +.heading { + margin-bottom: 16px; +} + +.select { + display: flex; + font-size: 16px; + align-items: center; + justify-content: space-between; +} + +.select .field { + width: 183px; +} + +.select select { + height: 32px; + padding: 0 8px; + font-size: 14px; +} + +.rangeOutput { + display: flex; + justify-content: space-evenly; + width: 100%; + font-size: 16px; +} diff --git a/apps/theme/app/color-debugger/Sidebar/Sidebar.tsx b/apps/theme/app/color-debugger/Sidebar/Sidebar.tsx new file mode 100644 index 0000000000..62272f1e30 --- /dev/null +++ b/apps/theme/app/color-debugger/Sidebar/Sidebar.tsx @@ -0,0 +1,276 @@ +import { Field, Heading, Select } from '@digdir/designsystemet-react'; + +import { + type ColorNumber, + getColorInfoFromPosition, +} from '@digdir/designsystemet/color'; +import { DoubleInput } from '../DoubleInput/DoubleInput'; +import { RangeBar } from '../RangeBar/RangeBar'; +import { useDebugStore } from '../debugStore'; +import type { InterpolationMode } from '../logic/theme'; +import classes from './Sidebar.module.css'; + +export const Sidebar = () => { + const luminance = useDebugStore((state) => state.luminance); + const themeSettings = useDebugStore((state) => state.themeSettings); + const setThemeSettings = useDebugStore((state) => state.setThemeSettings); + + return ( +
+
+ + General + +
+
+
Color scheme
+
+ + + +
+
+
+
Test mode
+
+ + + +
+
+
+
+
+ + Base colors + + +
+ {}} + /> + { + console.log(e); + setThemeSettings({ + ...themeSettings, + base: { + ...themeSettings.base, + modifier: parseFloat(e), + }, + }); + }} + /> + { + setThemeSettings({ + ...themeSettings, + base: { + ...themeSettings.base, + negativeModeMin: parseFloat(e), + }, + }); + }} + /> + { + setThemeSettings({ + ...themeSettings, + base: { + ...themeSettings.base, + negativeModRangeMin: parseFloat(e), + }, + }); + }} + valueTwo={themeSettings.base.negativeModRangeMax.toString()} + setValueTwo={(e) => { + setThemeSettings({ + ...themeSettings, + base: { + ...themeSettings.base, + negativeModRangeMax: parseFloat(e), + }, + }); + }} + /> + +
+
+
+ + Contrast Subtle + +
+ {}} + /> + { + setThemeSettings({ + ...themeSettings, + contrastSubtle: { + ...themeSettings.contrastSubtle, + customModRangeMin: parseFloat(e), + }, + }); + }} + valueTwo={themeSettings.contrastSubtle.customModRangeMax.toString()} + setValueTwo={(e) => { + setThemeSettings({ + ...themeSettings, + contrastSubtle: { + ...themeSettings.contrastSubtle, + customModRangeMax: parseFloat(e), + }, + }); + }} + /> + { + setThemeSettings({ + ...themeSettings, + contrastSubtle: { + ...themeSettings.contrastSubtle, + customModResult: parseFloat(e), + }, + }); + }} + /> + +
+
+
+ + Interpolation + +
+
Mode
+
+ + + +
+
+
+ +
+ + Luminance values + +
+ {Object.keys(luminance.light).map((key, index) => { + if ( + index === 11 || + index === 12 || + index === 13 || + index === 14 || + index === 15 + ) { + return null; + } + return ( +
+ { + const newLuminance = { ...luminance }; + newLuminance.light[key as keyof typeof luminance.light] = + parseFloat(value); + useDebugStore.setState({ + luminance: newLuminance, + }); + }} + setValueTwo={(value) => { + const newLuminance = { ...luminance }; + newLuminance.dark[key as keyof typeof luminance.light] = + parseFloat(value); + useDebugStore.setState({ + luminance: newLuminance, + }); + }} + /> +
+ ); + })} +
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/TabMenu/TabMenu.module.css b/apps/theme/app/color-debugger/TabMenu/TabMenu.module.css new file mode 100644 index 0000000000..c01a847aab --- /dev/null +++ b/apps/theme/app/color-debugger/TabMenu/TabMenu.module.css @@ -0,0 +1,26 @@ +.menu { + position: fixed; + z-index: 10; + left: 0; + top: 16px; + right: 0; + height: 42px; + background-color: white; + display: flex; + align-items: center; + border-bottom: 1px solid rgb(187, 187, 187); +} + +.item { + height: 42px; + padding: 0 12px; + border: none; + background-color: transparent; + font-size: 15px; + cursor: pointer; +} + +.active { + background-color: rgb(77, 77, 77); + color: white; +} diff --git a/apps/theme/app/color-debugger/TabMenu/TabMenu.tsx b/apps/theme/app/color-debugger/TabMenu/TabMenu.tsx new file mode 100644 index 0000000000..7b13393dbb --- /dev/null +++ b/apps/theme/app/color-debugger/TabMenu/TabMenu.tsx @@ -0,0 +1,32 @@ +import cl from 'clsx/lite'; +import { type PageType, useDebugStore } from '../debugStore'; +import classes from './TabMenu.module.css'; + +export const TabMenu = () => { + const pageType = useDebugStore((state) => state.pageType); + const setPageType = useDebugStore((state) => state.setPageType); + + const pages = { + main: 'Main', + baseContrast: 'Base', + scales: 'Scales', + colorTable: 'Table', + saturation: 'Saturation', + article: 'Surface', + mobile: 'App design', + }; + + return ( +
+ {Object.entries(pages).map(([key, val]) => ( + + ))} +
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.module.css b/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.module.css new file mode 100644 index 0000000000..7bda74a8ce --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.module.css @@ -0,0 +1,26 @@ +.accordion { + border-radius: 6px; + overflow: hidden; +} + +.header { + background-color: red; + padding: 18px 18px 18px 16px; + border-top: 1px solid black; + font-weight: 500; + display: flex; + align-items: center; + gap: 12px; + transition: 0.1s all; + cursor: pointer; +} + +.items .item:first-child .header { + border-top: none !important; +} + +.body { + background-color: blue; + padding: 18px; + font-size: 15px; +} diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.tsx b/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.tsx new file mode 100644 index 0000000000..d459c05035 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/Accordion/Accordion.tsx @@ -0,0 +1,95 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; +import { useState } from 'react'; +import { useDebugStore } from '../../../debugStore'; +import { ColorIndexes } from '../../../utils'; +import classes from './Accordion.module.css'; + +type AccordionProps = { + scale: ThemeInfo; +}; + +export const Accordion = ({ scale }: AccordionProps) => { + type ItemProps = { + state?: 'open' | 'closed'; + }; + + const Item = ({ state = 'closed' }: ItemProps) => { + const [headerState, setHeaderState] = useState<'on' | 'off'>('off'); + const themeSettings = useDebugStore((state) => state.themeSettings); + + const onHeaderEnter = () => { + setHeaderState('on'); + }; + const onHeaderLeave = () => { + setHeaderState('off'); + }; + + return ( +
+
onHeaderEnter()} + onMouseLeave={() => onHeaderLeave()} + className={classes.header} + style={{ + backgroundColor: + scale[themeSettings.general.colorScheme][ + state === 'open' + ? headerState === 'on' + ? ColorIndexes.surfaceActive + : ColorIndexes.surfaceHover + : headerState === 'on' + ? ColorIndexes.surfaceHover + : ColorIndexes.surfaceTinted + ].hex, + borderTop: + '1px solid' + + scale[themeSettings.general.colorScheme][ + ColorIndexes.borderSubtle + ].hex, + color: + scale[themeSettings.general.colorScheme][ColorIndexes.textDefault] + .hex, + }} + > + {state === 'closed' && ( + + )} + {state === 'open' && ( + + )} + Accordion +
+ {state === 'open' && ( +
+ Sleepiness the his soon even bit the immediately my disciplined wish + some she behind least sported time. +
+ )} +
+ ); + }; + + return ( +
+
+ + + + +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.module.css b/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.module.css new file mode 100644 index 0000000000..9653d9560c --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.module.css @@ -0,0 +1,9 @@ +.alert { + padding: 24px; + border-radius: 6px; + display: flex; + align-items: center; + gap: 12px; + font-weight: 500; + font-size: 16px; +} diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.tsx b/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.tsx new file mode 100644 index 0000000000..e454781355 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/Alert/Alert.tsx @@ -0,0 +1,51 @@ +import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'; +import cl from 'clsx/lite'; +import { useDebugStore } from '../../../debugStore'; +import { ColorIndexes } from '../../../utils'; +import classes from './Alert.module.css'; + +type AlertProps = { + type: 'success' | 'warning' | 'info' | 'error'; +}; + +export const Alert = ({ type }: AlertProps) => { + const luminance = useDebugStore((state) => state.luminance); + const themeSettings = useDebugStore((state) => state.themeSettings); + const colorScales = useDebugStore((state) => state.colorScales); + + const getAlertBackground = ( + type: 'success' | 'warning' | 'info' | 'error', + index: number, + ) => { + const colorSchemes = { + success: colorScales[12][0], + info: colorScales[12][3], + error: colorScales[12][1], + warning: colorScales[12][2], + }; + + return colorSchemes[type][themeSettings.general.colorScheme][index].hex; + }; + + return ( +
+ +
+ Alert text +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.module.css b/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.module.css new file mode 100644 index 0000000000..100549e154 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.module.css @@ -0,0 +1,80 @@ +.page { + margin-bottom: 24px; +} + +.pageHeading { + font-size: 23px; + font-weight: 500; + margin-bottom: 12px; +} + +.title { + font-size: 19px; + font-weight: 500; + margin-bottom: 12px; +} + +.innerItems { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.item { + width: calc(50% - 8px); + background-color: white; + border-radius: 4px; + border: 1px solid var(--ds-color-neutral-border-subtle); + display: flex; + flex-direction: column; + align-items: center; +} + +.content { + font-size: 16px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.accordion { + background-color: red; + padding: 32px; + height: 200px; +} + +.top { + height: 56px; + border-bottom: 1px solid var(--ds-color-neutral-border-subtle); + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 16px; +} + +.topRight { + display: flex; + gap: 16px; +} + +.btn { + background-color: rgb(5, 156, 0); + color: white; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; + border: none; + font-weight: 500; +} + +.section { + padding: 40px 0; + width: 100%; +} + +.sectionContent { + width: 525px; + margin: 0 auto; +} diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.tsx b/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.tsx new file mode 100644 index 0000000000..e0a7642200 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/ArticlePage.tsx @@ -0,0 +1,197 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { useState } from 'react'; +import { ColorFilter } from '../../ColorFilter/ColorFilter'; +import { ColorInput } from '../../ColorInput/ColorInput'; +import { useDebugStore } from '../../debugStore'; +import { ColorIndexes, ColorScaleNames } from '../../utils'; +import { Alert } from './Alert/Alert'; +import classes from './ArticlePage.module.css'; +import { File } from './File/File'; + +type ArticleProps = { + scale: ThemeInfo; + index1: number; + index2: number; + // biome-ignore lint/suspicious/noExplicitAny: +}; + +const Article = ({ scale, index1, index2 }: ArticleProps) => { + const [showPicker, setShowPicker] = useState(false); + const statusColors = useDebugStore((state) => state.statusColors); + const setStatusColors = useDebugStore((state) => state.setStatusColors); + const themeSettings = useDebugStore((state) => state.themeSettings); + + const getAlertType = ( + index: number, + ): 'success' | 'warning' | 'info' | 'error' => { + if (index === 0) return 'success'; + if (index === 2) return 'warning'; + if (index === 3) return 'info'; + if (index === 4) return 'error'; + return 'error'; + }; + + return ( +
+
+
+ {ColorScaleNames[index1]} {index2 + 1} +
+
+ + +
+
+
+ {index1 === 12 && ( + <> + + setStatusColors({ + ...statusColors, + [getAlertType(index2)]: color, + }) + } + position='top' + showReset + showPicker={showPicker} + onColorClicked={() => { + setShowPicker(!showPicker); + }} + /> + +
+ Receive also such of sleep inn they of move bed these owner to for + preceding quite practice to again. With the or be to and merit. +
+ + )} +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ ); +}; + +type ArticlePageProps = { + colorScales: ThemeInfo[][]; +}; + +export const ArticlePage = ({ colorScales }: ArticlePageProps) => { + const [activeColor, setActiveColor] = useState('Alle'); + const themeSettings = useDebugStore((state) => state.themeSettings); + + return ( +
+
Article Design
+ setActiveColor(e)} /> +
+ {colorScales.map((innerScale, index1) => ( +
+ {(ColorScaleNames[index1] === activeColor || + activeColor === 'Alle') && ( + <> +
{ColorScaleNames[index1]}
+
+ {innerScale.map((scale, index2) => ( +
+ ))} +
+ + )} +
+ ))} +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.module.css b/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.module.css new file mode 100644 index 0000000000..149f7bfc04 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.module.css @@ -0,0 +1,44 @@ +.file { + height: 120px; + background-color: red; + width: 100%; + border-radius: 6px; + overflow: hidden; + display: flex; +} + +.left { + height: 120px; + width: 120px; + background-color: blue; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.circle { + height: 78px; + width: 78px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.content { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 24px; + gap: 8px; +} + +.title { + font-weight: 500; + font-size: 17px; +} + +.desc { + font-size: 15px; +} diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.tsx b/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.tsx new file mode 100644 index 0000000000..b339243f4f --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/File/File.tsx @@ -0,0 +1,74 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { ComponentFillIcon } from '@navikt/aksel-icons'; +import { useDebugStore } from '../../../debugStore'; +import { ColorIndexes } from '../../../utils'; +import classes from './File.module.css'; + +type FileProps = { + scale: ThemeInfo; +}; + +export const File = ({ scale }: FileProps) => { + const themeSettings = useDebugStore((state) => state.themeSettings); + + return ( +
+
+
+ +
+
+
+
+ Wanted without escape +
+
+ Of picture internet of was of willingly by years +
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.module.css b/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.module.css new file mode 100644 index 0000000000..a1b5b412df --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.module.css @@ -0,0 +1,32 @@ +.status { + width: 100%; +} + +.items { + display: flex; + flex-wrap: wrap; + gap: 16px; + width: 100%; +} + +.item { + width: calc(50% - 8px); + padding: 24px; + background-color: white; + border-radius: 4px; +} + +.test { + height: 40px; + width: 40px; +} + +.input { + margin-bottom: 24px; +} + +.heading { + font-size: 23px; + font-weight: 500; + margin-bottom: 12px; +} diff --git a/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.tsx b/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.tsx new file mode 100644 index 0000000000..afe3ea6836 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/ArticlePage/StatusPage/StatusPage.tsx @@ -0,0 +1,84 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import { useState } from 'react'; +import type { IColor } from 'react-color-palette'; +import { ColorInput } from '../../../ColorInput/ColorInput'; +import { useDebugStore } from '../../../debugStore'; +import { Alert } from '../Alert/Alert'; +import classes from './StatusPage.module.css'; + +type ItemProps = { + scale: ThemeInfo; + type: 'success' | 'warning' | 'info' | 'error'; + color: IColor; + setColor: (color: IColor) => void; +}; + +const Item = ({ scale, type, color, setColor }: ItemProps) => { + const [showPicker, setShowPicker] = useState(false); + + return ( +
+
+ { + setShowPicker(!showPicker); + }} + /> +
+
+ +
+
+ ); +}; + +export const StatusPage = () => { + const luminance = useDebugStore((state) => state.luminance); + const themeSettings = useDebugStore((state) => state.themeSettings); + const colorScales = useDebugStore((state) => state.colorScales); + const statusColors = useDebugStore((state) => state.statusColors); + const setStatusColors = useDebugStore((state) => state.setStatusColors); + + return ( +
+
Status colors
+
+ + setStatusColors({ ...statusColors, success: color }) + } + type='success' + /> + + setStatusColors({ ...statusColors, error: color }) + } + type='error' + /> + + setStatusColors({ ...statusColors, warning: color }) + } + type='warning' + /> + + setStatusColors({ ...statusColors, info: color }) + } + type='info' + /> +
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.module.css b/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.module.css new file mode 100644 index 0000000000..be1422a0bd --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.module.css @@ -0,0 +1,106 @@ +.heading { + font-size: 23px; + font-weight: 500; + margin-bottom: 12px; +} + +.innerItems { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 16px; +} + +.scales { + display: flex; + flex-wrap: wrap; +} + +.colorItem { + width: 181px; +} + +.saturationGroup { + display: flex; + flex-direction: column; + width: 100%; + padding: 20px; + border-radius: 4px; + margin-bottom: 16px; +} + +.itemTitle { + font-size: 23px; + font-weight: 500; + margin-bottom: 16px; +} + +.saturationHeading { + font-size: 21px; + font-weight: 500; + margin-bottom: 12px; +} + +.saturationItems { + display: flex; + flex-wrap: wrap; + gap: 16px; + row-gap: 40px; +} + +.circle { + height: 42px; + width: 42px; + border-radius: 50%; +} + +.metaContainer { + display: flex; + align-items: center; + flex-direction: column; + gap: 8px; + margin-bottom: 12px; +} + +.colorItemInner { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 16px; +} + +.test { + height: 100px; + display: flex; + align-items: center; + justify-content: center; +} + +.btn { + width: 75%; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + height: 40px; +} + +.metaText { + font-size: 16px; +} + +.footer { + display: flex; + margin-top: 16px; + justify-content: space-evenly; + margin-left: -16px; + margin-bottom: -16px; + width: calc(100% + 32px); + padding: 10px 0; +} + +.footerItem { + height: 24px; + width: 24px; + border-radius: 50%; +} diff --git a/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.tsx b/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.tsx new file mode 100644 index 0000000000..3b306943c5 --- /dev/null +++ b/apps/theme/app/color-debugger/_pages/Saturationpage/SaturationPage.tsx @@ -0,0 +1,167 @@ +import type { ThemeInfo } from '@digdir/designsystemet/color'; +import chroma from 'chroma-js'; +import { useDebugStore } from '../../debugStore'; +import { ColorIndexes } from '../../utils'; +import classes from './SaturationPage.module.css'; + +type SaturationPageProps = { + colorScales: { + [key: string]: { + low: ThemeInfo[]; + medium: ThemeInfo[]; + high: ThemeInfo[]; + veryHigh: ThemeInfo[]; + }; + }; +}; + +export const SaturationPage = ({ colorScales }: SaturationPageProps) => { + const themeSettings = useDebugStore((state) => state.themeSettings); + + type ItemProps = { + scale: ThemeInfo; + }; + + const getOKLCH = (hex: string) => { + const [l, c, h] = chroma(hex).oklch(); + return ( + 'L ' + l.toFixed(2) + ' C ' + c.toFixed(2) + ' H ' + h.toFixed(2) + '' + ); + }; + + const ColorItem = ({ scale }: ItemProps) => { + const colorTheme = scale[themeSettings.general.colorScheme]; + const baseDefault = colorTheme[ColorIndexes.baseDefault].hex; + const lightBaseDefault = scale.light[ColorIndexes.baseDefault].hex; + const surfaceTinted = colorTheme[ColorIndexes.surfaceTinted].hex; + const surfaceDefault = colorTheme[ColorIndexes.surfaceDefault].hex; + const backgroundTinted = colorTheme[ColorIndexes.backgroundTinted].hex; + const borderSubtle = colorTheme[ColorIndexes.borderSubtle].hex; + const contrastBaseDefault = + colorTheme[ColorIndexes.baseContrastDefault].hex; + + return ( +
+
+
+
+ {getOKLCH(lightBaseDefault)} +
+
+ +
+
+
+ Button +
+
+
+
+
+
+
+
+
+ ); + }; + + const Group = ({ scales, title }: { scales: ThemeInfo[]; title: string }) => { + if (scales.length === 0) { + return null; + } + + return ( +
+
+ {title} +
+
+ {scales.map((scale) => ( + + ))} +
+
+ ); + }; + + return ( +
+
Saturation adjustments
+
+
+ {Object.entries(colorScales).map(([key, value]) => ( +
+
{key}
+
+ + + +
+
+ ))} +
+
+
+ ); +}; diff --git a/apps/theme/app/color-debugger/debugStore.ts b/apps/theme/app/color-debugger/debugStore.ts new file mode 100644 index 0000000000..1ff8549b23 --- /dev/null +++ b/apps/theme/app/color-debugger/debugStore.ts @@ -0,0 +1,128 @@ +import { + type ThemeInfo, + generateColorSchemes, + luminance, +} from '@digdir/designsystemet/color'; +import { ColorService, type IColor } from 'react-color-palette'; +import { create } from 'zustand'; +import { subscribeWithSelector } from 'zustand/middleware'; +import type { InterpolationMode } from './logic/theme'; + +export type BaseBorderRadius = number; +export type LuminanceType = typeof luminance; +export type ThemeSettingsType = { + general: { + testMode: 'debug' | 'production'; + colorScheme: 'light' | 'dark'; + }; + base: { + modifier: number; + darkOffset: number; + negativeModeMin: number; + negativeModRangeMin: number; + negativeModRangeMax: number; + }; + interpolation: { + mode: InterpolationMode; + }; + contrastSubtle: { + lightnessMod: number; + customModRangeMin: number; + customModRangeMax: number; + customModResult: number; + }; +}; +export type PageType = + | 'main' + | 'saturation' + | 'baseContrast' + | 'scales' + | 'colorTable' + | 'mobile' + | 'dash' + | 'status' + | 'article'; + +type ColorStore = { + themeSettings: ThemeSettingsType; + setThemeSettings: (themeSettings: ThemeSettingsType) => void; + referenceLuminance: LuminanceType; + luminance: LuminanceType; + pageType: PageType; + setPageType: (pageType: PageType) => void; + setLightLuminance: (luminance: LuminanceType) => void; + setDarkLuminance: (luminance: LuminanceType) => void; + colorScales: ThemeInfo[][]; + setColorScales: (colorScales: ThemeInfo[][]) => void; + flatColorScales: { + [key: string]: { + low: ThemeInfo[]; + medium: ThemeInfo[]; + high: ThemeInfo[]; + }; + }; + setFlatColorScales: (flatColorScales: { + [key: string]: { low: ThemeInfo[]; medium: ThemeInfo[]; high: ThemeInfo[] }; + }) => void; + colorScale: ThemeInfo; + setColorScale: (colorScale: ThemeInfo) => void; + statusColors: { + success: IColor; + warning: IColor; + info: IColor; + error: IColor; + }; + setStatusColors: (statusColors: { + success: IColor; + warning: IColor; + info: IColor; + error: IColor; + }) => void; +}; + +export const useDebugStore = create( + subscribeWithSelector((set) => ({ + statusColors: { + success: ColorService.convert('hex', '#068718'), + warning: ColorService.convert('hex', '#ea9b1b'), + info: ColorService.convert('hex', '#0A71C0'), + error: ColorService.convert('hex', '#C01B1B'), + }, + setStatusColors: (statusColors) => set({ statusColors }), + themeSettings: { + general: { + testMode: 'debug', + colorScheme: 'light', + }, + base: { + modifier: 8, + darkOffset: 0, + negativeModeMin: 30, + negativeModRangeMin: 49.5, + negativeModRangeMax: 66, + }, + interpolation: { + mode: 'rgb', + }, + contrastSubtle: { + lightnessMod: 50, + customModRangeMin: 40, + customModRangeMax: 60, + customModResult: 60, + }, + }, + pageType: 'main', + setPageType: (pageType) => set({ pageType }), + setThemeSettings: (themeSettings) => set({ themeSettings }), + luminance: luminance, + referenceLuminance: luminance, + colorScales: [], + colorScale: generateColorSchemes('#008000'), + setColorScales: (colorScales) => set({ colorScales }), + setColorScale: (colorScale) => set({ colorScale }), + setLightLuminance: (luminance) => set({ luminance }), + setDarkLuminance: (luminance) => set({ luminance }), + flatColorScales: {}, + setFlatColorScales: (flatColorScales) => set({ flatColorScales }), + })), +); diff --git a/apps/theme/app/color-debugger/logic/theme.ts b/apps/theme/app/color-debugger/logic/theme.ts new file mode 100644 index 0000000000..7454f52399 --- /dev/null +++ b/apps/theme/app/color-debugger/logic/theme.ts @@ -0,0 +1,255 @@ +import type { CssColor } from '@digdir/designsystemet/color'; + +import type { + ColorInfo, + ColorNumber, + ColorScheme, + GlobalColors, + ThemeInfo, +} from '@digdir/designsystemet/color'; +import { + getColorInfoFromPosition, + getLightnessFromHex, + getLuminanceFromLightness, + getSaturationFromHex, +} from '@digdir/designsystemet/color'; +import chroma from 'chroma-js'; +import type { ThemeSettingsType } from '../debugStore'; + +export const baseColors: Record = { + blue: '#0A71C0', + green: '#068718', + orange: '#B8581D', + purple: '#663299', + red: '#C01B1B', +}; + +export type InterpolationMode = + | 'rgb' + | 'hsl' + | 'hsv' + | 'hsi' + | 'lab' + | 'oklab' + | 'lch' + | 'oklch' + | 'hcl' + | 'lrgb'; + +/** + * Generates a color scale based on a base color and a color mode. + * + * @param color The base color that is used to generate the color scale + * @param colorScheme The color scheme to generate a scale for + */ +export const generateColorScale = ( + color: CssColor, + colorScheme: ColorScheme, + luminance: Record> | undefined, + themeSettings: ThemeSettingsType, +): ColorInfo[] => { + const baseColors = getBaseColors(color, colorScheme, themeSettings); + const luminanceValues = luminance?.[colorScheme]; + + // Create the color scale based on the luminance values. The chroma().luminance function uses RGB interpolation by default. + const outputArray: ColorInfo[] = Object.entries(luminanceValues || {}).map( + ([, value], index) => { + const position = (index + 1) as ColorNumber; + const colorInfo = getColorInfoFromPosition(position); + return { + name: colorInfo.name, + displayName: colorInfo.displayName, + group: colorInfo.group, + hex: chroma( + colorScheme === 'light' + ? baseColors.baseDefault + : getDarkModeBaseRef(color, baseColors.baseDefault), + ) + .luminance(value) + .hex() as CssColor, + position, + }; + }, + ); + + const createSpecialColor = (position: ColorNumber, hexValue: CssColor) => { + const info = getColorInfoFromPosition(position); + return { + name: info.name, + displayName: info.displayName, + group: info.group, + hex: hexValue, + position, + }; + }; + + const specialColors: Omit[] = [ + createSpecialColor(12, baseColors.baseDefault), + createSpecialColor(13, baseColors.baseHover), + createSpecialColor(14, baseColors.baseActive), + createSpecialColor(15, getContrastSubtle(baseColors.baseDefault)), + createSpecialColor(16, getContrastDefault(baseColors.baseDefault)), + ]; + + // Add the special colors to the output array + for (const { hex, position, name, displayName, group } of specialColors) { + outputArray[position - 1] = { + hex, + position, + name, + displayName, + group, + }; + } + + return outputArray; +}; + +/** + * Generates color schemes based on a base color. Light, Dark and Contrast scales are included. + * + * @param color The base color that is used to generate the color schemes + */ +export const generateColorSchemes = ( + color: CssColor, + luminance: Record> | undefined, + themeSettings: ThemeSettingsType, +): ThemeInfo => ({ + light: generateColorScale(color, 'light', luminance, themeSettings), + dark: generateColorScale(color, 'dark', luminance, themeSettings), + contrast: generateColorScale(color, 'contrast', luminance, themeSettings), +}); + +/** + * Returns the base colors for a color and color scheme. + * + * @param color The base color as a hex string + * @param colorScheme The color scheme to generate the base colors for + * @returns + */ +const getBaseColors = ( + color: CssColor, + colorScheme: ColorScheme, + themeSettings: ThemeSettingsType, +) => { + let colorLightness = getLightnessFromHex(color); + const baseModifier = themeSettings.base?.modifier || 8; + const baseNegativeModeMin = themeSettings.base?.negativeModeMin; + const baseNegativeModRangeMin = themeSettings.base?.negativeModRangeMin; + const baseNegativeModRangeMax = themeSettings.base?.negativeModRangeMax; + + if (colorScheme !== 'light') { + colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness; + } + + const modifier = + colorLightness <= baseNegativeModeMin || + (colorLightness >= baseNegativeModRangeMin && + colorLightness <= baseNegativeModRangeMax) + ? -baseModifier + : baseModifier; + const calculateLightness = (base: number, mod: number) => base - mod; + + let baseRefColor = + colorScheme === 'light' + ? color + : (chroma(color) + .luminance(getLuminanceFromLightness(colorLightness)) + .hex() as CssColor); + + // Reduce the saturation of the base color if it is too high in dark mode + if (colorScheme === 'dark') { + const saturation = getSaturationFromHex(baseRefColor); + const lightness = getLightnessFromHex(baseRefColor); + if (saturation >= 70 && lightness >= 45) { + const saturationModifier = 1 * ((saturation - 70) / 30); + baseRefColor = chroma(baseRefColor) + .desaturate(saturationModifier) + .hex() as CssColor; + } + } + + return { + baseDefault: + colorScheme === 'light' + ? color + : (chroma(baseRefColor) + .luminance(getLuminanceFromLightness(colorLightness)) + .hex() as CssColor), + baseHover: chroma(baseRefColor) + .luminance( + getLuminanceFromLightness(calculateLightness(colorLightness, modifier)), + ) + .hex() as CssColor, + baseActive: chroma(baseRefColor) + .luminance( + getLuminanceFromLightness( + calculateLightness(colorLightness, modifier * 2), + ), + ) + .hex() as CssColor, + }; +}; + +/** + * Returns the color to be used to generate the luminance colors for dark mode + * + * @param color The original base color + * @param baseDefault The new base default color + */ +const getDarkModeBaseRef = ( + color: CssColor, + baseDefault: CssColor, +): CssColor => { + const colorLightness = getLightnessFromHex(color); + const colorSaturation = getSaturationFromHex(color); + let targetLightness: number | null = null; + + return baseDefault; + + if (colorLightness <= 30) { + targetLightness = colorSaturation >= 70 ? 30 : 40; + } else if (colorLightness <= 45) { + targetLightness = colorSaturation >= 80 ? 45 : 55; + } else if (colorLightness <= 60) { + targetLightness = colorSaturation >= 80 ? 55 : 65; + } + + if (targetLightness === null) { + return baseDefault; + } + + return chroma(color) + .luminance(getLuminanceFromLightness(targetLightness)) + .hex() as CssColor; +}; + +/** + * Creates the Base Contrast Default color + * + * @param baseColor The base color + */ +export const getContrastDefault = (color: CssColor): CssColor => + chroma.contrast(color, '#ffffff') >= chroma.contrast(color, '#000000') + ? '#ffffff' + : '#000000'; + +/** + * Creates the Base Contrast Subtle color + * + * @param color The base color + */ +export const getContrastSubtle = (color: CssColor): CssColor => { + const contrastWhite = chroma.contrast(color, '#ffffff'); + const contrastBlack = chroma.contrast(color, '#000000'); + const lightness = getLightnessFromHex(color); + const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50; + const targetLightness = + contrastWhite >= contrastBlack + ? lightness + modifier + : lightness - modifier; + + return chroma(color) + .luminance(getLuminanceFromLightness(targetLightness)) + .hex() as CssColor; +}; diff --git a/apps/theme/app/color-debugger/logic/utils.ts b/apps/theme/app/color-debugger/logic/utils.ts new file mode 100644 index 0000000000..8689736b69 --- /dev/null +++ b/apps/theme/app/color-debugger/logic/utils.ts @@ -0,0 +1,48 @@ +export const getFullNameFromShort = (shortName: string): string => { + if (shortName === 'backgroundDefault') { + return 'Background Default'; + } + if (shortName === 'backgroundHover') { + return 'Background Hover'; + } + if (shortName === 'backgroundActive') { + return 'Background Active'; + } + if (shortName === 'backgroundSubtle') { + return 'Background Subtle'; + } + if (shortName === 'surfaceDefault') { + return 'Surface Default'; + } + if (shortName === 'surfaceHover') { + return 'Surface Hover'; + } + if (shortName === 'surfaceActive') { + return 'Surface Active'; + } + if (shortName === 'borderDefault') { + return 'Border Default'; + } + if (shortName === 'borderSubtle') { + return 'Border Subtle'; + } + if (shortName === 'borderStrong') { + return 'Border Strong'; + } + if (shortName === 'baseDefault') { + return 'Base Default'; + } + if (shortName === 'baseHover') { + return 'Base Hover'; + } + if (shortName === 'baseActive') { + return 'Base Active'; + } + if (shortName === 'textDefault') { + return 'Text Default'; + } + if (shortName === 'textSubtle') { + return 'Text Subtle'; + } + return ''; +}; diff --git a/apps/theme/app/color-debugger/page.module.css b/apps/theme/app/color-debugger/page.module.css new file mode 100644 index 0000000000..0c933d9702 --- /dev/null +++ b/apps/theme/app/color-debugger/page.module.css @@ -0,0 +1,42 @@ +.page { + background-color: var(--ds-color-neutral-background-tinted); + z-index: 999999; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + padding-top: 40px; + margin-top: 41px; + font-family: 'Inter', sans-serif; +} + +.page button, +.page input { + font-family: 'Inter', sans-serif; +} + +.content { + position: relative; + padding-left: 28px; + padding-right: 465px; +} + +.heading { + margin-top: 0; + margin-bottom: 18px; +} + +.top { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 16px; + background-color: rgb(255, 190, 116); +} + +.topProd { + background-color: rgb(122, 211, 113); +} diff --git a/apps/theme/app/color-debugger/page.tsx b/apps/theme/app/color-debugger/page.tsx new file mode 100644 index 0000000000..271e367614 --- /dev/null +++ b/apps/theme/app/color-debugger/page.tsx @@ -0,0 +1,234 @@ +'use client'; + +import { Heading } from '@digdir/designsystemet-react'; +import type { CssColor, ThemeInfo } from '@digdir/designsystemet/color'; +import chroma from 'chroma-js'; +import cl from 'clsx/lite'; +import { useEffect } from 'react'; +import { ColorTables } from './ColorGrid/ColorGrid'; +import { ContrastColors } from './ContrastColors/ContrastColors'; +import { FrontPage } from './FrontPage/FrontPage'; +import { Mobile } from './Mobile/Mobile'; +import { Scales } from './Scales/Scales'; +import { Sidebar } from './Sidebar/Sidebar'; +import { TabMenu } from './TabMenu/TabMenu'; +import { ArticlePage } from './_pages/ArticlePage/ArticlePage'; +import { StatusPage } from './_pages/ArticlePage/StatusPage/StatusPage'; +import { SaturationPage } from './_pages/Saturationpage/SaturationPage'; +import { useDebugStore } from './debugStore'; +import { generateColorSchemes } from './logic/theme'; +import classes from './page.module.css'; + +export default function Home() { + const luminance = useDebugStore((state) => state.luminance); + const colorScales = useDebugStore((state) => state.colorScales); + const flatColorScales = useDebugStore((state) => state.flatColorScales); + const setFlatColorScale = useDebugStore((state) => state.setFlatColorScales); + const setColorScales = useDebugStore((state) => state.setColorScales); + const themeSettings = useDebugStore((state) => state.themeSettings); + const statusColors = useDebugStore((state) => state.statusColors); + const setColorScale = useDebugStore((state) => state.setColorScale); + const hues = [0, 22, 37, 55, 76, 124, 177, 208, 235, 278, 308]; + + const steps = [ + { s: 100, l: 100 }, + { s: 100, l: 80 }, + { s: 100, l: 60 }, + { s: 100, l: 40 }, + { s: 100, l: 20 }, + { s: 100, l: 10 }, + { s: 80, l: 100 }, + { s: 80, l: 80 }, + { s: 80, l: 60 }, + { s: 80, l: 40 }, + { s: 80, l: 20 }, + { s: 80, l: 10 }, + { s: 60, l: 100 }, + { s: 60, l: 80 }, + { s: 60, l: 60 }, + { s: 60, l: 40 }, + { s: 60, l: 20 }, + { s: 60, l: 10 }, + { s: 40, l: 100 }, + { s: 40, l: 80 }, + { s: 40, l: 60 }, + { s: 40, l: 40 }, + { s: 40, l: 20 }, + { s: 40, l: 10 }, + { s: 20, l: 100 }, + { s: 20, l: 80 }, + { s: 20, l: 60 }, + { s: 20, l: 40 }, + { s: 20, l: 20 }, + { s: 20, l: 10 }, + ]; + const pageType = useDebugStore((state) => state.pageType); + + useEffect(() => { + const themes: ThemeInfo[][] = []; + const flatThemes = []; + for (let i = 0; i < hues.length; i++) { + const hue = hues[i]; + const innerThemes = []; + for (let j = 0; j < steps.length; j++) { + const step = steps[j]; + const color = chroma( + hue, + step.s / 100, + step.l / 100, + 'hsv', + ).hex() as CssColor; + + const theme = generateColorSchemes(color, luminance, themeSettings); + flatThemes.push(theme); + innerThemes.push(theme); + } + themes.push(innerThemes); + } + themes[11] = []; + themes[11].push( + generateColorSchemes( + chroma(0, 0, 0.23, 'hsv').hex() as CssColor, + luminance, + themeSettings, + ), + ); + for (let i = 0; i < hues.length; i++) { + const hue = hues[i]; + const color = chroma(hue, 0.5, 0.25, 'hsv').hex() as CssColor; + const theme = generateColorSchemes(color, luminance, themeSettings); + themes[11].push(theme); + flatThemes.push(theme); + } + + themes[12] = []; + themes[12].push( + generateColorSchemes( + statusColors.success.hex as CssColor, + luminance, + themeSettings, + ), + ); + themes[12].push( + generateColorSchemes( + statusColors.error.hex as CssColor, + luminance, + themeSettings, + ), + ); + themes[12].push( + generateColorSchemes( + statusColors.warning.hex as CssColor, + luminance, + themeSettings, + ), + ); + themes[12].push( + generateColorSchemes( + statusColors.info.hex as CssColor, + luminance, + themeSettings, + ), + ); + + setColorScales(themes); + setColorScale(themes[0][0]); + + const flatThemesSorted = flatThemes.sort((a, b) => { + const aL = chroma(a.light[11].hex).oklch()[0]; + const bL = chroma(b.light[11].hex).oklch()[0]; + return aL - bL; + }); + + const groups = sortColorsByLightnessAndChroma(flatThemesSorted); + + setFlatColorScale(groups); + }, [ + luminance, + themeSettings.base.modifier, + themeSettings.interpolation.mode, + statusColors, + ]); + + useEffect(() => { + const items = document.getElementsByClassName('content'); + for (let i = 0; i < items.length; i++) { + (items[i] as HTMLElement).style.minHeight = '20svh'; + } + }, []); + + const sortColorsByLightnessAndChroma = (themes: ThemeInfo[]) => { + const groups: { + [key: string]: { + low: ThemeInfo[]; + medium: ThemeInfo[]; + high: ThemeInfo[]; + }; + } = { + veryDarkColors: { low: [], medium: [], high: [] }, + darkColors: { low: [], medium: [], high: [] }, + midColors: { low: [], medium: [], high: [] }, + lightColors: { low: [], medium: [], high: [] }, + veryLightColors: { low: [], medium: [], high: [] }, + }; + + for (const theme of themes) { + const [L, C, H] = chroma(theme.light[11].hex).oklch(); // Convert HEX to OKLCH + + let category: + | 'veryDarkColors' + | 'darkColors' + | 'midColors' + | 'lightColors' + | 'veryLightColors'; + if (L < 0.2) category = 'veryDarkColors'; + else if (L >= 0.2 && L < 0.3) category = 'darkColors'; + else if (L >= 0.3 && L < 0.5) category = 'midColors'; + else if (L >= 0.5 && L < 0.7) category = 'lightColors'; + else category = 'veryLightColors'; + + let chromaLevel: 'low' | 'medium' | 'high'; + if (C < 0.08) chromaLevel = 'low'; + else if (C < 0.17) chromaLevel = 'medium'; + else chromaLevel = 'high'; + + groups[category][chromaLevel].push(theme); + } + + return groups; + }; + + return ( +
+ +
+
+ {pageType === 'main' && } + + {pageType === 'baseContrast' && ( + <> + + Base and contrast colors + + + + )} + + {pageType === 'scales' && } + {pageType === 'colorTable' && } + {pageType === 'mobile' && } + {pageType === 'article' && } + {pageType === 'status' && } + {pageType === 'saturation' && ( + + )} +
+ +
+ ); +} diff --git a/apps/theme/app/color-debugger/utils.ts b/apps/theme/app/color-debugger/utils.ts new file mode 100644 index 0000000000..a3dc2da2b1 --- /dev/null +++ b/apps/theme/app/color-debugger/utils.ts @@ -0,0 +1,34 @@ +export const ColorIndexes = { + backgroundDefault: 0, + backgroundTinted: 1, + surfaceDefault: 2, + surfaceTinted: 3, + surfaceHover: 4, + surfaceActive: 5, + borderSubtle: 6, + borderDefault: 7, + borderStrong: 8, + textSubtle: 9, + textDefault: 10, + baseDefault: 11, + baseHover: 12, + baseActive: 13, + baseContrastSubtle: 14, + baseContrastDefault: 15, +}; + +export const ColorScaleNames = [ + 'Red', + 'Pure Orange', + 'Light Orange', + 'Yellow', + 'Pale Green', + 'Green', + 'Cyan', + 'Blue', + 'Strong Blue', + 'Purple', + 'Pink', + 'Black', + 'Status', +]; diff --git a/apps/theme/public/img/debug/space-man.png b/apps/theme/public/img/debug/space-man.png new file mode 100644 index 0000000000..3c38befaeb Binary files /dev/null and b/apps/theme/public/img/debug/space-man.png differ diff --git a/apps/theme/public/img/debug/space-ship.png b/apps/theme/public/img/debug/space-ship.png new file mode 100644 index 0000000000..91cd8c9e86 Binary files /dev/null and b/apps/theme/public/img/debug/space-ship.png differ diff --git a/packages/cli/src/colors/index.ts b/packages/cli/src/colors/index.ts index da5e925ba7..3ac6cd0577 100644 --- a/packages/cli/src/colors/index.ts +++ b/packages/cli/src/colors/index.ts @@ -1,4 +1,5 @@ export * from './utils.js'; export * from './theme.js'; export * from './types.js'; +export * from './luminance.js'; export * from './colorsMetadata.js'; diff --git a/packages/cli/src/colors/luminance.ts b/packages/cli/src/colors/luminance.ts index 74c11db475..159db0e0dd 100644 --- a/packages/cli/src/colors/luminance.ts +++ b/packages/cli/src/colors/luminance.ts @@ -3,9 +3,9 @@ export const luminance = { backgroundDefault: 1, backgroundTinted: 0.9, surfaceDefault: 1, - surfaceTinted: 0.76, - surfaceHover: 0.64, - surfaceActive: 0.54, + surfaceTinted: 0.81, + surfaceHover: 0.7, + surfaceActive: 0.6, borderSubtle: 0.5, borderDefault: 0.21, borderStrong: 0.12, @@ -18,12 +18,12 @@ export const luminance = { baseContrastSubtle: 1, }, dark: { - backgroundDefault: 0.012, - backgroundTinted: 0.018, - surfaceDefault: 0.024, - surfaceTinted: 0.029, + backgroundDefault: 0.011, + backgroundTinted: 0.017, + surfaceDefault: 0.025, + surfaceTinted: 0.035, surfaceHover: 0.044, - surfaceActive: 0.063, + surfaceActive: 0.057, borderSubtle: 0.082, borderDefault: 0.2, borderStrong: 0.36, @@ -41,7 +41,7 @@ export const luminance = { surfaceDefault: 0.015, surfaceTinted: 0.015, surfaceHover: 0.028, - surfaceActive: 0.044, + surfaceActive: 0.045, borderSubtle: 0.26, borderDefault: 0.4, borderStrong: 0.6, diff --git a/packages/cli/src/colors/theme.ts b/packages/cli/src/colors/theme.ts index 026047b01e..0357e500f9 100644 --- a/packages/cli/src/colors/theme.ts +++ b/packages/cli/src/colors/theme.ts @@ -3,7 +3,12 @@ import type { CssColor } from './types.js'; import chroma from 'chroma-js'; import { luminance } from './luminance.js'; import type { ColorInfo, ColorNumber, ColorScheme, ThemeInfo } from './types.js'; -import { getColorInfoFromPosition, getLightnessFromHex, getLuminanceFromLightness } from './utils.js'; +import { + getColorInfoFromPosition, + getLightnessFromHex, + getLuminanceFromLightness, + getSaturationFromHex, +} from './utils.js'; /** * Generates a color scale based on a base color and a color mode. @@ -15,7 +20,7 @@ export const generateColorScale = (color: CssColor, colorScheme: ColorScheme): C const baseColors = getBaseColors(color, colorScheme); const luminanceValues = luminance[colorScheme]; - // Create the color scale based on the luminance values. The chroma().luminance function uses RGB interpolation by default. + // Create the color scale based on luminance values. The chroma().luminance function uses RGB interpolation by default. const outputArray: ColorInfo[] = Object.entries(luminanceValues).map(([, value], index) => { const position = (index + 1) as ColorNumber; const colorInfo = getColorInfoFromPosition(position); @@ -23,7 +28,9 @@ export const generateColorScale = (color: CssColor, colorScheme: ColorScheme): C name: colorInfo.name, displayName: colorInfo.displayName, group: colorInfo.group, - hex: chroma(color).luminance(value).hex() as CssColor, + hex: chroma(colorScheme === 'light' ? baseColors.baseDefault : getDarkModeRefColor(color, baseColors.baseDefault)) + .luminance(value) + .hex() as CssColor, position, }; }); @@ -87,20 +94,133 @@ const getBaseColors = (color: CssColor, colorScheme: ColorScheme) => { const modifier = colorLightness <= 30 || (colorLightness >= 49 && colorLightness <= 65) ? -8 : 8; const calculateLightness = (base: number, mod: number) => base - mod; + let baseRefColor = + colorScheme === 'light' + ? color + : (chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex() as CssColor); + + // Reduce saturation if it is too high in dark mode + if (colorScheme === 'dark') { + const saturation = getSaturationFromHex(baseRefColor); + const lightness = getLightnessFromHex(baseRefColor); + if (saturation >= 70 && lightness >= 45) { + const saturationModifier = 1.5 * ((saturation - 70) / 30); + baseRefColor = chroma(baseRefColor).desaturate(saturationModifier).hex() as CssColor; + } + } + return { baseDefault: colorScheme === 'light' ? color - : (chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex() as CssColor), - baseHover: chroma(color) + : (chroma(baseRefColor).luminance(getLuminanceFromLightness(colorLightness)).hex() as CssColor), + baseHover: chroma(baseRefColor) .luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))) .hex() as CssColor, - baseActive: chroma(color) + baseActive: chroma(baseRefColor) .luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))) .hex() as CssColor, }; }; +/** + * Returns the reference color used to generate the luminance values for dark mode + * + * @param originalBase The original base color + * @param processedBase The processed base default color + */ +const getDarkModeRefColor = (originalBase: CssColor, processedBase: CssColor) => { + const [L, C, H] = chroma(originalBase).oklch(); + let newC = C; // Start with the original chroma + const upperChroma = 0.21; // The upper limit for chroma reduction + const middleChroma = 0.15; // The middle limit for chroma reduction + const lowerChroma = 0.09; // The lower limit for chroma reduction + + return processedBase; + + // === Very light colors (L > 85) === + if (L > 0.85) { + if (C > upperChroma) { + newC *= 0.5; // Reduce strongly for very saturated colors + } else if (C > middleChroma) { + newC *= 0.7; // Moderate reduction + } else if (C > lowerChroma) { + newC *= 0.9; // Slight reduction + } + } + + // === Light colors (L 70-85) === + else if (L > 0.7) { + if (C > upperChroma) { + newC *= 0.6; + } else if (C > middleChroma) { + newC *= 0.8; + } else if (C > lowerChroma) { + newC *= 0.95; + } + } + + // === Mid-tone colors (L 40-70) === + else if (L > 0.4) { + if (C > upperChroma) { + newC *= 0.7; + } else if (C > middleChroma) { + newC *= 0.7; + } else if (C > lowerChroma) { + newC *= 0.98; + } + } + + // === Dark colors (L 20-40) === + else if (L > 0.2) { + if (C > upperChroma) { + newC *= 0.8; + } else if (C > middleChroma) { + newC *= 0.7; + } else if (C > lowerChroma) { + newC *= 1.0; // Keep low-chroma darks mostly unchanged + } + } + + // === Very dark colors (L < 20) === + else { + if (C > upperChroma) { + newC *= 0.85; + } else if (C > middleChroma) { + newC *= 0.97; + } else if (C > lowerChroma) { + newC *= 1.0; // No change + } + } + + return chroma.oklch(L, newC, H).hex(); +}; + +/** + * Returns the lightness value for a given saturation value + * + * @param saturation + * @param minSat + * @param maxSat + * @param minLight + * @param maxLight + * @returns + */ +const getLightnessInterpol = ( + saturation: number, + minSat: number, + maxSat: number, + minLight: number, + maxLight: number, +) => { + if (saturation >= maxSat) return maxLight; + if (saturation <= minSat) return minLight; + + // Linear interpolation formula + const ratio = (saturation - minSat) / (maxSat - minSat); + return minLight + ratio * (maxLight - minLight); +}; + /** * Creates the Base Contrast Default color * diff --git a/packages/cli/src/colors/utils.ts b/packages/cli/src/colors/utils.ts index 48d425f611..216845440a 100644 --- a/packages/cli/src/colors/utils.ts +++ b/packages/cli/src/colors/utils.ts @@ -171,6 +171,14 @@ export const getLightnessFromHex = (hex: string) => { return conv.hsluv_l; }; +export const getSaturationFromHex = (hex: string) => { + const conv = new Hsluv(); + conv.hex = hex; + conv.hexToHsluv(); + + return conv.hsluv_s; +}; + /** * * This function returns the color number based on the color name. diff --git a/yarn.lock b/yarn.lock index 337d60c2b0..9fddbe842b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -42,19 +42,6 @@ __metadata: languageName: node linkType: hard -"@asamuzakjp/css-color@npm:^2.8.2": - version: 2.8.2 - resolution: "@asamuzakjp/css-color@npm:2.8.2" - dependencies: - "@csstools/css-calc": "npm:^2.1.1" - "@csstools/css-color-parser": "npm:^3.0.7" - "@csstools/css-parser-algorithms": "npm:^3.0.4" - "@csstools/css-tokenizer": "npm:^3.0.3" - lru-cache: "npm:^11.0.2" - checksum: 10/998885b5deae79d26719befe9cc7e6877ae55818226c1da7c3e901107eb9a2d961b8797cc0961372a23e72b8484899a2b7f06879e34ff7f49c1c35e55eb695d3 - languageName: node - linkType: hard - "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" @@ -66,6 +53,23 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/code-frame@npm:7.24.7" + dependencies: + "@babel/highlight": "npm:^7.24.7" + picocolors: "npm:^1.0.0" + checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/compat-data@npm:7.24.7" + checksum: 10/6edc09152ca51a22c33741c441f33f9475598fa59edc53369edb74b49f4ea4bef1281f5b0ed2b9b67fb66faef2da2069e21c4eef83405d8326e524b301f4e7e2 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.26.5": version: 7.26.5 resolution: "@babel/compat-data@npm:7.26.5" @@ -73,7 +77,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0": +"@babel/core@npm:^7.18.9, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0": version: 7.26.0 resolution: "@babel/core@npm:7.26.0" dependencies: @@ -96,6 +100,53 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.21.3": + version: 7.24.7 + resolution: "@babel/core@npm:7.24.7" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.24.7" + "@babel/helper-compilation-targets": "npm:^7.24.7" + "@babel/helper-module-transforms": "npm:^7.24.7" + "@babel/helpers": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/template": "npm:^7.24.7" + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/ef8cc1afa3ccecee6d1f5660c487ccc2a3f25106830ea9040e80ef4b2092e053607ee4ddd03493e4f7ef2f9967a956ca53b830d54c5bee738eeb58cce679dd4a + languageName: node + linkType: hard + +"@babel/generator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/generator@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/c71d24a4b41b19c10d2f2eb819f27d4cf94220e2322f7c8fed8bfbbb115b2bebbdd6dc1f27dac78a175e90604def58d763af87e0fa81ce4ab1582858162cf768 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/generator@npm:7.25.0" + dependencies: + "@babel/types": "npm:^7.25.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/de3ce2ae7aa0c9585260556ca5a81ce2ce6b8269e3260d7bb4e47a74661af715184ca6343e9906c22e4dd3eed5ce39977dfaf6cded4d2d8968fa096c7cf66697 + languageName: node + linkType: hard + "@babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.5": version: 7.26.5 resolution: "@babel/generator@npm:7.26.5" @@ -118,6 +169,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-compilation-targets@npm:7.24.7" + dependencies: + "@babel/compat-data": "npm:^7.24.7" + "@babel/helper-validator-option": "npm:^7.24.7" + browserslist: "npm:^4.22.2" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10/8f8bc89af70a606ccb208513aa25d83e19b88f91b64a33174f7701a9479e67ddbb0a9c89033265070375cd24e690b93380b3a3ea11e4b3a711d742f0f4699ee7 + languageName: node + linkType: hard + "@babel/helper-compilation-targets@npm:^7.25.9": version: 7.26.5 resolution: "@babel/helper-compilation-targets@npm:7.26.5" @@ -148,6 +212,34 @@ __metadata: languageName: node linkType: hard +"@babel/helper-environment-visitor@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-environment-visitor@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6 + languageName: node + linkType: hard + +"@babel/helper-function-name@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-function-name@npm:7.24.7" + dependencies: + "@babel/template": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/2ceb3d9b2b35a0fc4100fc06ed7be3bc38f03ff0bf128ff0edbc0cc7dd842967b1496fc70b5c616c747d7711c2b87e7d025c8888f48740631d6148a9d3614f85 + languageName: node + linkType: hard + +"@babel/helper-hoist-variables@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-hoist-variables@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d + languageName: node + linkType: hard + "@babel/helper-member-expression-to-functions@npm:^7.24.8": version: 7.24.8 resolution: "@babel/helper-member-expression-to-functions@npm:7.24.8" @@ -158,6 +250,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-imports@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770 + languageName: node + linkType: hard + "@babel/helper-module-imports@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-module-imports@npm:7.25.9" @@ -168,6 +270,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-transforms@npm:7.24.7" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-module-imports": "npm:^7.24.7" + "@babel/helper-simple-access": "npm:^7.24.7" + "@babel/helper-split-export-declaration": "npm:^7.24.7" + "@babel/helper-validator-identifier": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/4f2b232bf6d1be8d3a72b084a2a7ac1b0b93ea85717411a11ae1fb6375d4392019e781d8cc155789e649a2caa7eec378dd1404210603d6d4230f042c5feacffb + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.24.8, @babel/helper-module-transforms@npm:^7.26.0": version: 7.26.0 resolution: "@babel/helper-module-transforms@npm:7.26.0" @@ -190,13 +307,20 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.24.8, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.8.0": +"@babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.8.0": version: 7.26.5 resolution: "@babel/helper-plugin-utils@npm:7.26.5" checksum: 10/1cc0fd8514da3bb249bed6c27227696ab5e84289749d7258098701cffc0c599b7f61ec40dd332f8613030564b79899d9826813c96f966330bcfc7145a8377857 languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-plugin-utils@npm:7.24.8" + checksum: 10/adbc9fc1142800a35a5eb0793296924ee8057fe35c61657774208670468a9fbfbb216f2d0bc46c680c5fefa785e5ff917cc1674b10bd75cdf9a6aa3444780630 + languageName: node + linkType: hard + "@babel/helper-replace-supers@npm:^7.25.0": version: 7.25.0 resolution: "@babel/helper-replace-supers@npm:7.25.0" @@ -230,6 +354,36 @@ __metadata: languageName: node linkType: hard +"@babel/helper-split-export-declaration@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-split-export-declaration@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/ff04a3071603c87de0d6ee2540b7291ab36305b329bd047cdbb6cbd7db335a12f9a77af1cf708779f75f13c4d9af46093c00b34432e50b2411872c658d1a2e5e + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.23.4": + version: 7.23.4 + resolution: "@babel/helper-string-parser@npm:7.23.4" + checksum: 10/c352082474a2ee1d2b812bd116a56b2e8b38065df9678a32a535f151ec6f58e54633cc778778374f10544b930703cca6ddf998803888a636afa27e2658068a9c + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-string-parser@npm:7.24.7" + checksum: 10/603d8d962bbe89907aa99a8f19a006759ab7b2464615f20a6a22e3e2e8375af37ddd0e5175c9e622e1c4b2d83607ffb41055a59d0ce34404502af30fde573a5c + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-string-parser@npm:7.24.8" + checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535 + languageName: node + linkType: hard + "@babel/helper-string-parser@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-string-parser@npm:7.25.9" @@ -237,6 +391,20 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.22.20": + version: 7.22.20 + resolution: "@babel/helper-validator-identifier@npm:7.22.20" + checksum: 10/df882d2675101df2d507b95b195ca2f86a3ef28cb711c84f37e79ca23178e13b9f0d8b522774211f51e40168bf5142be4c1c9776a150cddb61a0d5bf3e95750b + languageName: node + linkType: hard + +"@babel/helper-validator-identifier@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-validator-identifier@npm:7.24.7" + checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-validator-identifier@npm:7.25.9" @@ -251,6 +419,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helpers@npm:7.24.7" + dependencies: + "@babel/template": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/f7496f0d7a0b13ea86136ac2053371027125734170328215f8a90eac96fafaaae4e5398c0729bdadf23261c00582a31e14bc70113427653b718220641a917f9d + languageName: node + linkType: hard + "@babel/helpers@npm:^7.26.0": version: 7.26.0 resolution: "@babel/helpers@npm:7.26.0" @@ -261,7 +439,19 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.5": +"@babel/highlight@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/highlight@npm:7.24.7" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.24.7" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1 + languageName: node + linkType: hard + +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.5": version: 7.26.5 resolution: "@babel/parser@npm:7.26.5" dependencies: @@ -272,6 +462,26 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/parser@npm:7.24.7" + bin: + parser: ./bin/babel-parser.js + checksum: 10/ef9ebce60e13db560ccc7af9235d460f6726bb7e23ae2d675098c1fc43d5249067be60d4118889dad33b1d4f85162cf66baf554719e1669f29bb20e71322568e + languageName: node + linkType: hard + +"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.3": + version: 7.25.3 + resolution: "@babel/parser@npm:7.25.3" + dependencies: + "@babel/types": "npm:^7.25.2" + bin: + parser: ./bin/babel-parser.js + checksum: 10/7bd57e89110bdc9cffe0ef2f2286f1cfb9bbb3aa1d9208c287e0bf6a1eb4cfe6ab33958876ebc59aafcbe3e2381c4449240fc7cc2ff32b79bc9db89cd52fc779 + languageName: node + linkType: hard + "@babel/plugin-syntax-flow@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-syntax-flow@npm:7.24.7" @@ -317,13 +527,13 @@ __metadata: linkType: hard "@babel/plugin-syntax-typescript@npm:^7.24.7": - version: 7.25.4 - resolution: "@babel/plugin-syntax-typescript@npm:7.25.4" + version: 7.24.7 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.8" + "@babel/helper-plugin-utils": "npm:^7.24.7" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0771b45a35fd536cd3b3a48e5eda0f53e2d4f4a0ca07377cc247efa39eaf6002ed1c478106aad2650e54aefaebcb4f34f3284c4ae9252695dbd944bf66addfb0 + checksum: 10/2518cc06323f5673c93142935879c112fea0ee836dfa9a9ec744fc972fdeaf22a06fe631c23817562aaaddadf64626a4fbba98c300b3e2c828f48f0f1cca0ce0 languageName: node linkType: hard @@ -490,6 +700,28 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/template@npm:7.24.7" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/5975d404ef51cf379515eb0f80b115981d0b9dff5539e53a47516644abb8c83d7559f5b083eb1d4977b20d8359ebb2f911ccd4f729143f8958fdc465f976d843 + languageName: node + linkType: hard + +"@babel/template@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/template@npm:7.25.0" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/parser": "npm:^7.25.0" + "@babel/types": "npm:^7.25.0" + checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0 + languageName: node + linkType: hard + "@babel/template@npm:^7.25.9": version: 7.25.9 resolution: "@babel/template@npm:7.25.9" @@ -501,7 +733,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.25.0, @babel/traverse@npm:^7.25.9": +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.25.9": version: 7.26.5 resolution: "@babel/traverse@npm:7.26.5" dependencies: @@ -516,7 +748,73 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.4, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.5": +"@babel/traverse@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/traverse@npm:7.24.7" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.24.7" + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-function-name": "npm:^7.24.7" + "@babel/helper-hoist-variables": "npm:^7.24.7" + "@babel/helper-split-export-declaration": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/785cf26383a992740e492efba7016de964cd06c05c9d7146fa1b5ead409e054c444f50b36dc37856884a56e32cf9d3105ddf1543486b6df68300bffb117a245a + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.25.0": + version: 7.25.3 + resolution: "@babel/traverse@npm:7.25.3" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.25.0" + "@babel/parser": "npm:^7.25.3" + "@babel/template": "npm:^7.25.0" + "@babel/types": "npm:^7.25.2" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/fba34f323e17fa83372fc290bc12413a50e2f780a86c7d8b1875c594b6be2857867804de5d52ab10a78a9cae29e1b09ea15d85ad63671ce97d79c40650282bb9 + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.8.3": + version: 7.23.5 + resolution: "@babel/types@npm:7.23.5" + dependencies: + "@babel/helper-string-parser": "npm:^7.23.4" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/a623a4e7f396f1903659099da25bfa059694a49f42820f6b5288347f1646f0b37fb7cc550ba45644e9067149368ef34ccb1bd4a4251ec59b83b3f7765088f363 + languageName: node + linkType: hard + +"@babel/types@npm:^7.21.3, @babel/types@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/types@npm:7.24.7" + dependencies: + "@babel/helper-string-parser": "npm:^7.24.7" + "@babel/helper-validator-identifier": "npm:^7.24.7" + to-fast-properties: "npm:^2.0.0" + checksum: 10/ad3c8c0d6fb4acb0bb74bb5b4bb849b181bf6185677ef9c59c18856c81e43628d0858253cf232f0eca806f02e08eff85a1d3e636a3e94daea737597796b0b430 + languageName: node + linkType: hard + +"@babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/types@npm:7.25.2" + dependencies: + "@babel/helper-string-parser": "npm:^7.24.8" + "@babel/helper-validator-identifier": "npm:^7.24.7" + to-fast-properties: "npm:^2.0.0" + checksum: 10/ccf5399db1dcd6dd87b84a6f7bc8dd241e04a326f4f038c973c26ccb69cd360c8f2276603f584c58fd94da95229313060b27baceb0d9b18a435742d3f616afd1 + languageName: node + linkType: hard + +"@babel/types@npm:^7.25.4, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.5": version: 7.26.5 resolution: "@babel/types@npm:7.26.5" dependencies: @@ -972,52 +1270,6 @@ __metadata: languageName: node linkType: hard -"@csstools/color-helpers@npm:^5.0.1": - version: 5.0.1 - resolution: "@csstools/color-helpers@npm:5.0.1" - checksum: 10/4cb25b34997c9b0e9f401833e27942636494bc3c7fda5c6633026bc3fdfdda1c67be68ea048058bfba449a86ec22332e23b4ec5982452c50b67880c4cb13a660 - languageName: node - linkType: hard - -"@csstools/css-calc@npm:^2.1.1": - version: 2.1.1 - resolution: "@csstools/css-calc@npm:2.1.1" - peerDependencies: - "@csstools/css-parser-algorithms": ^3.0.4 - "@csstools/css-tokenizer": ^3.0.3 - checksum: 10/60e8808c261eeebb15517c0f368672494095bb10e90177dfc492f956fc432760d84b17dc19db739a2e23cac0013f4bcf37bb93947f9741b95b7227eeaced250b - languageName: node - linkType: hard - -"@csstools/css-color-parser@npm:^3.0.7": - version: 3.0.7 - resolution: "@csstools/css-color-parser@npm:3.0.7" - dependencies: - "@csstools/color-helpers": "npm:^5.0.1" - "@csstools/css-calc": "npm:^2.1.1" - peerDependencies: - "@csstools/css-parser-algorithms": ^3.0.4 - "@csstools/css-tokenizer": ^3.0.3 - checksum: 10/efceb60608f3fc2b6da44d5be7720a8b302e784f05c1c12f17a1da4b4b9893b2e20d0ea74ac2c2d6d5ca9b64ee046d05f803c7b78581fd5a3f85e78acfc5d98e - languageName: node - linkType: hard - -"@csstools/css-parser-algorithms@npm:^3.0.4": - version: 3.0.4 - resolution: "@csstools/css-parser-algorithms@npm:3.0.4" - peerDependencies: - "@csstools/css-tokenizer": ^3.0.3 - checksum: 10/dfb6926218d9f8ba25d8b43ea46c03863c819481f8c55e4de4925780eaab9e6bcd6bead1d56b4ef82d09fcd9d69a7db2750fa9db08eece9470fd499dc76d0edb - languageName: node - linkType: hard - -"@csstools/css-tokenizer@npm:^3.0.3": - version: 3.0.3 - resolution: "@csstools/css-tokenizer@npm:3.0.3" - checksum: 10/6baa3160e426e1f177b8f10d54ec7a4a596090f65a05f16d7e9e4da049962a404eabc5f885f4867093702c259cd4080ac92a438326e22dea015201b3e71f5bbb - languageName: node - linkType: hard - "@csstools/selector-resolve-nested@npm:^3.0.0": version: 3.0.0 resolution: "@csstools/selector-resolve-nested@npm:3.0.0" @@ -1176,9 +1428,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/aix-ppc64@npm:0.21.5" +"@esbuild/aix-ppc64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/aix-ppc64@npm:0.20.2" conditions: os=aix & cpu=ppc64 languageName: node linkType: hard @@ -1197,9 +1449,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-arm64@npm:0.21.5" +"@esbuild/android-arm64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/android-arm64@npm:0.20.2" conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -1218,9 +1470,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-arm@npm:0.21.5" +"@esbuild/android-arm@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/android-arm@npm:0.20.2" conditions: os=android & cpu=arm languageName: node linkType: hard @@ -1239,9 +1491,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/android-x64@npm:0.21.5" +"@esbuild/android-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/android-x64@npm:0.20.2" conditions: os=android & cpu=x64 languageName: node linkType: hard @@ -1260,9 +1512,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/darwin-arm64@npm:0.21.5" +"@esbuild/darwin-arm64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/darwin-arm64@npm:0.20.2" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -1281,9 +1533,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/darwin-x64@npm:0.21.5" +"@esbuild/darwin-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/darwin-x64@npm:0.20.2" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -1302,9 +1554,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/freebsd-arm64@npm:0.21.5" +"@esbuild/freebsd-arm64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/freebsd-arm64@npm:0.20.2" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard @@ -1323,9 +1575,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/freebsd-x64@npm:0.21.5" +"@esbuild/freebsd-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/freebsd-x64@npm:0.20.2" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -1344,9 +1596,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-arm64@npm:0.21.5" +"@esbuild/linux-arm64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-arm64@npm:0.20.2" conditions: os=linux & cpu=arm64 languageName: node linkType: hard @@ -1365,9 +1617,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-arm@npm:0.21.5" +"@esbuild/linux-arm@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-arm@npm:0.20.2" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -1386,9 +1638,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-ia32@npm:0.21.5" +"@esbuild/linux-ia32@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-ia32@npm:0.20.2" conditions: os=linux & cpu=ia32 languageName: node linkType: hard @@ -1407,9 +1659,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-loong64@npm:0.21.5" +"@esbuild/linux-loong64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-loong64@npm:0.20.2" conditions: os=linux & cpu=loong64 languageName: node linkType: hard @@ -1428,9 +1680,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-mips64el@npm:0.21.5" +"@esbuild/linux-mips64el@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-mips64el@npm:0.20.2" conditions: os=linux & cpu=mips64el languageName: node linkType: hard @@ -1449,9 +1701,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-ppc64@npm:0.21.5" +"@esbuild/linux-ppc64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-ppc64@npm:0.20.2" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard @@ -1470,9 +1722,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-riscv64@npm:0.21.5" +"@esbuild/linux-riscv64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-riscv64@npm:0.20.2" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard @@ -1491,9 +1743,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-s390x@npm:0.21.5" +"@esbuild/linux-s390x@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-s390x@npm:0.20.2" conditions: os=linux & cpu=s390x languageName: node linkType: hard @@ -1512,9 +1764,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/linux-x64@npm:0.21.5" +"@esbuild/linux-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/linux-x64@npm:0.20.2" conditions: os=linux & cpu=x64 languageName: node linkType: hard @@ -1540,9 +1792,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/netbsd-x64@npm:0.21.5" +"@esbuild/netbsd-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/netbsd-x64@npm:0.20.2" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard @@ -1575,9 +1827,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/openbsd-x64@npm:0.21.5" +"@esbuild/openbsd-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/openbsd-x64@npm:0.20.2" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard @@ -1596,9 +1848,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/sunos-x64@npm:0.21.5" +"@esbuild/sunos-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/sunos-x64@npm:0.20.2" conditions: os=sunos & cpu=x64 languageName: node linkType: hard @@ -1617,9 +1869,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-arm64@npm:0.21.5" +"@esbuild/win32-arm64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/win32-arm64@npm:0.20.2" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -1638,9 +1890,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-ia32@npm:0.21.5" +"@esbuild/win32-ia32@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/win32-ia32@npm:0.20.2" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -1659,9 +1911,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.21.5": - version: 0.21.5 - resolution: "@esbuild/win32-x64@npm:0.21.5" +"@esbuild/win32-x64@npm:0.20.2": + version: 0.20.2 + resolution: "@esbuild/win32-x64@npm:0.20.2" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -1696,7 +1948,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.6.10": +"@floating-ui/dom@npm:^1.0.0": version: 1.6.13 resolution: "@floating-ui/dom@npm:1.6.13" dependencies: @@ -1706,15 +1958,25 @@ __metadata: languageName: node linkType: hard +"@floating-ui/dom@npm:^1.6.10": + version: 1.6.10 + resolution: "@floating-ui/dom@npm:1.6.10" + dependencies: + "@floating-ui/core": "npm:^1.6.0" + "@floating-ui/utils": "npm:^0.2.7" + checksum: 10/c100f5ecb37fc1bea4e551977eae3992f8eba351e6b7f2642e2f84a4abd269406d5a46a14505bc583caf25ddee900a667829244c4eecf1cf60f08c1dabdf3ee9 + languageName: node + linkType: hard + "@floating-ui/react-dom@npm:^2.1.1": - version: 2.1.2 - resolution: "@floating-ui/react-dom@npm:2.1.2" + version: 2.1.1 + resolution: "@floating-ui/react-dom@npm:2.1.1" dependencies: "@floating-ui/dom": "npm:^1.0.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" - checksum: 10/2a67dc8499674e42ff32c7246bded185bb0fdd492150067caf9568569557ac4756a67787421d8604b0f241e5337de10762aee270d9aeef106d078a0ff13596c4 + checksum: 10/cafabfb5dd0b25547863520b3bcf6faee7f087d0c3187a8779910a6838d496bf494f237bf1fe883bbfae1a7fcc399611ae52377b696065d8118bd7c1b9c0d253 languageName: node linkType: hard @@ -1732,13 +1994,20 @@ __metadata: languageName: node linkType: hard -"@floating-ui/utils@npm:^0.2.5, @floating-ui/utils@npm:^0.2.7, @floating-ui/utils@npm:^0.2.9": +"@floating-ui/utils@npm:^0.2.5, @floating-ui/utils@npm:^0.2.9": version: 0.2.9 resolution: "@floating-ui/utils@npm:0.2.9" checksum: 10/0ca786347db3dd8d9034b86d1449fabb96642788e5900cc5f2aee433cd7b243efbcd7a165bead50b004ee3f20a90ddebb6a35296fc41d43cfd361b6f01b69ffb languageName: node linkType: hard +"@floating-ui/utils@npm:^0.2.7": + version: 0.2.7 + resolution: "@floating-ui/utils@npm:0.2.7" + checksum: 10/56b1bb3f73f6ec9aabf9b1fd3dc584e0f2384d319c1a6119050eab102ae6ca8b9b0eed711c2f235ffe035188cbe9727bf36e8dcb54c8bd32176737e4be47efa8 + languageName: node + linkType: hard + "@gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3" @@ -2044,6 +2313,13 @@ __metadata: languageName: node linkType: hard +"@jridgewell/sourcemap-codec@npm:^1.4.15": + version: 1.4.15 + resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" + checksum: 10/89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09 + languageName: node + linkType: hard + "@jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25": version: 0.3.25 resolution: "@jridgewell/trace-mapping@npm:0.3.25" @@ -2471,6 +2747,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm-eabi@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.14.0" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-android-arm-eabi@npm:4.31.0" @@ -2478,6 +2761,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm64@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-android-arm64@npm:4.14.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-android-arm64@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-android-arm64@npm:4.31.0" @@ -2485,6 +2775,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-arm64@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-darwin-arm64@npm:4.14.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-arm64@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-darwin-arm64@npm:4.31.0" @@ -2492,6 +2789,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-x64@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-darwin-x64@npm:4.14.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-x64@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-darwin-x64@npm:4.31.0" @@ -2513,6 +2817,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-gnueabihf@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.14.0" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-gnueabihf@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.31.0" @@ -2527,6 +2838,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-gnu@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.14.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-gnu@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.31.0" @@ -2534,6 +2852,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-musl@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.14.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-musl@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-arm64-musl@npm:4.31.0" @@ -2548,6 +2873,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.0" + conditions: os=linux & cpu=ppc64le & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-powerpc64le-gnu@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.31.0" @@ -2555,6 +2887,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-riscv64-gnu@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.14.0" + conditions: os=linux & cpu=riscv64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-riscv64-gnu@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.31.0" @@ -2562,6 +2901,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-s390x-gnu@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.14.0" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-s390x-gnu@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.31.0" @@ -2569,6 +2915,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-gnu@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.14.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-gnu@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-x64-gnu@npm:4.31.0" @@ -2576,6 +2929,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-musl@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.14.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-musl@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-linux-x64-musl@npm:4.31.0" @@ -2583,6 +2943,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-arm64-msvc@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.14.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-win32-arm64-msvc@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.31.0" @@ -2590,6 +2957,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-ia32-msvc@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.14.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@rollup/rollup-win32-ia32-msvc@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.31.0" @@ -2597,6 +2971,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-x64-msvc@npm:4.14.0": + version: 4.14.0 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.14.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-win32-x64-msvc@npm:4.31.0": version: 4.31.0 resolution: "@rollup/rollup-win32-x64-msvc@npm:4.31.0" @@ -3584,11 +3965,11 @@ __metadata: linkType: hard "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.18.0": - version: 7.20.6 - resolution: "@types/babel__traverse@npm:7.20.6" + version: 7.20.4 + resolution: "@types/babel__traverse@npm:7.20.4" dependencies: "@babel/types": "npm:^7.20.7" - checksum: 10/63d13a3789aa1e783b87a8b03d9fb2c2c90078de7782422feff1631b8c2a25db626e63a63ac5a1465d47359201c73069dacb4b52149d17c568187625da3064ae + checksum: 10/927073e3a2ca4d24b95acf96d9c91d6fd1c44826d440e5f9b486de421857945b679045710ebf886be2af30d13877d86f9fbd15a383f72a2b07da322af1c1a321 languageName: node linkType: hard @@ -3720,7 +4101,21 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:1.0.6, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6": +"@types/estree@npm:*, @types/estree@npm:^1.0.0": + version: 1.0.0 + resolution: "@types/estree@npm:1.0.0" + checksum: 10/9ec366ea3b94db26a45262d7161456c9ee25fd04f3a0da482f6e97dbf90c0c8603053c311391a877027cc4ee648340f988cd04f11287886cdf8bc23366291ef9 + languageName: node + linkType: hard + +"@types/estree@npm:1.0.5": + version: 1.0.5 + resolution: "@types/estree@npm:1.0.5" + checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408 + languageName: node + linkType: hard + +"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.6": version: 1.0.6 resolution: "@types/estree@npm:1.0.6" checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d @@ -4462,7 +4857,16 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.14.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.0.0, acorn@npm:^8.9.0": + version: 8.10.0 + resolution: "acorn@npm:8.10.0" + bin: + acorn: bin/acorn + checksum: 10/522310c20fdc3c271caed3caf0f06c51d61cb42267279566edd1d58e83dbc12eebdafaab666a0f0be1b7ad04af9c6bc2a6f478690a9e6391c3c8b165ada917dd + languageName: node + linkType: hard + +"acorn@npm:^8.14.0": version: 8.14.0 resolution: "acorn@npm:8.14.0" bin: @@ -4471,6 +4875,15 @@ __metadata: languageName: node linkType: hard +"acorn@npm:^8.8.2": + version: 8.12.1 + resolution: "acorn@npm:8.12.1" + bin: + acorn: bin/acorn + checksum: 10/d08c2d122bba32d0861e0aa840b2ee25946c286d5dc5990abca991baf8cdbfbe199b05aacb221b979411a2fea36f83e26b5ac4f6b4e0ce49038c62316c1848f0 + languageName: node + linkType: hard + "agent-base@npm:6, agent-base@npm:^6.0.2": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -4480,7 +4893,16 @@ __metadata: languageName: node linkType: hard -"agent-base@npm:^7.1.0, agent-base@npm:^7.1.2": +"agent-base@npm:^7.0.2": + version: 7.1.0 + resolution: "agent-base@npm:7.1.0" + dependencies: + debug: "npm:^4.3.4" + checksum: 10/f7828f991470a0cc22cb579c86a18cbae83d8a3cbed39992ab34fc7217c4d126017f1c74d0ab66be87f71455318a8ea3e757d6a37881b8d0f2a2c6aa55e5418f + languageName: node + linkType: hard + +"agent-base@npm:^7.1.0": version: 7.1.3 resolution: "agent-base@npm:7.1.3" checksum: 10/3db6d8d4651f2aa1a9e4af35b96ab11a7607af57a24f3bc721a387eaa3b5f674e901f0a648b0caefd48f3fd117c7761b79a3b55854e2aebaa96c3f32cf76af84 @@ -4559,6 +4981,15 @@ __metadata: languageName: node linkType: hard +"ansi-styles@npm:^3.2.1": + version: 3.2.1 + resolution: "ansi-styles@npm:3.2.1" + dependencies: + color-convert: "npm:^1.9.0" + checksum: 10/d85ade01c10e5dd77b6c89f34ed7531da5830d2cb5882c645f330079975b716438cd7ebb81d0d6e6b4f9c577f19ae41ab55f07f19786b02f9dfd9e0377395665 + languageName: node + linkType: hard + "ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0": version: 4.3.0 resolution: "ansi-styles@npm:4.3.0" @@ -4750,13 +5181,20 @@ __metadata: languageName: node linkType: hard -"axe-core@npm:^4.2.0, axe-core@npm:^4.4.2, axe-core@npm:^4.5.1": +"axe-core@npm:^4.2.0, axe-core@npm:^4.4.2": version: 4.10.2 resolution: "axe-core@npm:4.10.2" checksum: 10/a69423b2ff16c15922c4ea7cf9cc5112728a2817bbe0f2cc212248d648885ffd1ba554e3a341dfc289cd9e67fc0d06f333b5c6837c5c38ca6652507381216fc1 languageName: node linkType: hard +"axe-core@npm:^4.5.1": + version: 4.10.0 + resolution: "axe-core@npm:4.10.0" + checksum: 10/6158489a7a704edc98bd30ed56243b8280c5203c60e095a2feb5bff95d9bf2ef10becfe359b1cbc8601338418999c26cf4eee704181dedbcb487f4d63a06d8d5 + languageName: node + linkType: hard + "axe-html-reporter@npm:2.2.3": version: 2.2.3 resolution: "axe-html-reporter@npm:2.2.3" @@ -4872,7 +5310,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0": +"browserslist@npm:^4.0.0, browserslist@npm:^4.24.0": version: 4.24.4 resolution: "browserslist@npm:4.24.4" dependencies: @@ -4886,6 +5324,34 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.22.2": + version: 4.23.0 + resolution: "browserslist@npm:4.23.0" + dependencies: + caniuse-lite: "npm:^1.0.30001587" + electron-to-chromium: "npm:^1.4.668" + node-releases: "npm:^2.0.14" + update-browserslist-db: "npm:^1.0.13" + bin: + browserslist: cli.js + checksum: 10/496c3862df74565dd942b4ae65f502c575cbeba1fa4a3894dad7aa3b16130dc3033bc502d8848147f7b625154a284708253d9598bcdbef5a1e34cf11dc7bad8e + languageName: node + linkType: hard + +"browserslist@npm:^4.23.3": + version: 4.23.3 + resolution: "browserslist@npm:4.23.3" + dependencies: + caniuse-lite: "npm:^1.0.30001646" + electron-to-chromium: "npm:^1.5.4" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.0" + bin: + browserslist: cli.js + checksum: 10/e266d18c6c6c5becf9a1a7aa264477677b9796387972e8fce34854bb33dc1666194dc28389780e5dc6566e68a95e87ece2ce222e1c4ca93c2b75b61dfebd5f1c + languageName: node + linkType: hard + "buffer-from@npm:^1.0.0": version: 1.1.2 resolution: "buffer-from@npm:1.1.2" @@ -5002,6 +5468,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001587": + version: 1.0.30001646 + resolution: "caniuse-lite@npm:1.0.30001646" + checksum: 10/6c66a5677b58988c2ee86905b05705b00be552a3e4f768bd0d9a10098cc4ec471de5b204e2c2ab534f34b5f216c059321a9e5cb1395928cf29ded0a4aae4535f + languageName: node + linkType: hard + "ccount@npm:^2.0.0": version: 2.0.1 resolution: "ccount@npm:2.0.1" @@ -5022,6 +5495,17 @@ __metadata: languageName: node linkType: hard +"chalk@npm:^2.4.2": + version: 2.4.2 + resolution: "chalk@npm:2.4.2" + dependencies: + ansi-styles: "npm:^3.2.1" + escape-string-regexp: "npm:^1.0.5" + supports-color: "npm:^5.3.0" + checksum: 10/3d1d103433166f6bfe82ac75724951b33769675252d8417317363ef9d54699b7c3b2d46671b772b893a8e50c3ece70c4b933c73c01e81bc60ea4df9b55afa303 + languageName: node + linkType: hard + "chalk@npm:^3.0.0": version: 3.0.0 resolution: "chalk@npm:3.0.0" @@ -5042,13 +5526,20 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^5.0.1, chalk@npm:^5.3.0, chalk@npm:^5.4.1": +"chalk@npm:^5.0.1, chalk@npm:^5.4.1": version: 5.4.1 resolution: "chalk@npm:5.4.1" checksum: 10/29df3ffcdf25656fed6e95962e2ef86d14dfe03cd50e7074b06bad9ffbbf6089adbb40f75c00744d843685c8d008adaf3aed31476780312553caf07fa86e5bc7 languageName: node linkType: hard +"chalk@npm:^5.3.0": + version: 5.3.0 + resolution: "chalk@npm:5.3.0" + checksum: 10/6373caaab21bd64c405bfc4bd9672b145647fc9482657b5ea1d549b3b2765054e9d3d928870cdf764fb4aad67555f5061538ff247b8310f110c5c888d92397ea + languageName: node + linkType: hard + "change-case@npm:^5.3.0, change-case@npm:^5.4.4": version: 5.4.4 resolution: "change-case@npm:5.4.4" @@ -5288,6 +5779,15 @@ __metadata: languageName: node linkType: hard +"color-convert@npm:^1.9.0": + version: 1.9.3 + resolution: "color-convert@npm:1.9.3" + dependencies: + color-name: "npm:1.1.3" + checksum: 10/ffa319025045f2973919d155f25e7c00d08836b6b33ea2d205418c59bd63a665d713c52d9737a9e0fe467fb194b40fbef1d849bae80d674568ee220a31ef3d10 + languageName: node + linkType: hard + "color-convert@npm:^2.0.1": version: 2.0.1 resolution: "color-convert@npm:2.0.1" @@ -5297,6 +5797,13 @@ __metadata: languageName: node linkType: hard +"color-name@npm:1.1.3": + version: 1.1.3 + resolution: "color-name@npm:1.1.3" + checksum: 10/09c5d3e33d2105850153b14466501f2bfb30324a2f76568a408763a3b7433b0e50e5b4ab1947868e65cb101bb7cb75029553f2c333b6d4b8138a73fcc133d69d + languageName: node + linkType: hard + "color-name@npm:^1.0.0, color-name@npm:~1.1.4": version: 1.1.4 resolution: "color-name@npm:1.1.4" @@ -5684,12 +6191,11 @@ __metadata: linkType: hard "cssstyle@npm:^4.0.1": - version: 4.2.1 - resolution: "cssstyle@npm:4.2.1" + version: 4.0.1 + resolution: "cssstyle@npm:4.0.1" dependencies: - "@asamuzakjp/css-color": "npm:^2.8.2" - rrweb-cssom: "npm:^0.8.0" - checksum: 10/e287234f2fd4feb1d79217480f48356f398cc11b9d17d39e6624f7dc1bf4b51d1e2c49f12b1a324834b445c17cbbf83ae5d3ba22c89a6b229f86bcebeda746a8 + rrweb-cssom: "npm:^0.6.0" + checksum: 10/180d4e6b406c30811e55a64add32a2111c9c5da4ed2dc67638ddb55c29b877ec1ed71e2e70a34f59c3523dbee35b0d35aa13b963db1ca8cb929d69c7ce81e3b0 languageName: node linkType: hard @@ -5980,13 +6486,20 @@ __metadata: languageName: node linkType: hard -"dom-accessibility-api@npm:^0.5.14, dom-accessibility-api@npm:^0.5.9": +"dom-accessibility-api@npm:^0.5.14": version: 0.5.16 resolution: "dom-accessibility-api@npm:0.5.16" checksum: 10/377b4a7f9eae0a5d72e1068c369c99e0e4ca17fdfd5219f3abd32a73a590749a267475a59d7b03a891f9b673c27429133a818c44b2e47e32fec024b34274e2ca languageName: node linkType: hard +"dom-accessibility-api@npm:^0.5.9": + version: 0.5.14 + resolution: "dom-accessibility-api@npm:0.5.14" + checksum: 10/19d7a7de931fcc7d9d67c270341220c6bda97124c3b1444b2bea6e8c6c3964ee09c339e3e69be5b830e3fcb60258d43e6377039974b69c5cec2f75db0114ac59 + languageName: node + linkType: hard + "dom-accessibility-api@npm:^0.6.3": version: 0.6.3 resolution: "dom-accessibility-api@npm:0.6.3" @@ -6084,6 +6597,20 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.4.668": + version: 1.4.724 + resolution: "electron-to-chromium@npm:1.4.724" + checksum: 10/0ed96404b76c0499ede838ebc9a4c302af179ac3e4b2046f5cb0be956ad587fece20a72eb358f8d3827cba8e16269284e1b2abb981b376bc0d9647af5573b30e + languageName: node + linkType: hard + +"electron-to-chromium@npm:^1.5.4": + version: 1.5.4 + resolution: "electron-to-chromium@npm:1.5.4" + checksum: 10/ce64db25c399d33830e74e58bbc5ab7c06948669e204b6508e98c278ddaead1da1cbb356d15b55eb659f89d4d7bcf00944f08f96e886f1d3d065ba11744c5633 + languageName: node + linkType: hard + "electron-to-chromium@npm:^1.5.73": version: 1.5.84 resolution: "electron-to-chromium@npm:1.5.84" @@ -6134,7 +6661,7 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0": +"entities@npm:^4.2.0, entities@npm:^4.4.0": version: 4.5.0 resolution: "entities@npm:4.5.0" checksum: 10/ede2a35c9bce1aeccd055a1b445d41c75a14a2bb1cd22e242f20cf04d236cdcd7f9c859eb83f76885327bfae0c25bf03303665ee1ce3d47c5927b98b0e3e3d48 @@ -6307,33 +6834,33 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.21.3": - version: 0.21.5 - resolution: "esbuild@npm:0.21.5" - dependencies: - "@esbuild/aix-ppc64": "npm:0.21.5" - "@esbuild/android-arm": "npm:0.21.5" - "@esbuild/android-arm64": "npm:0.21.5" - "@esbuild/android-x64": "npm:0.21.5" - "@esbuild/darwin-arm64": "npm:0.21.5" - "@esbuild/darwin-x64": "npm:0.21.5" - "@esbuild/freebsd-arm64": "npm:0.21.5" - "@esbuild/freebsd-x64": "npm:0.21.5" - "@esbuild/linux-arm": "npm:0.21.5" - "@esbuild/linux-arm64": "npm:0.21.5" - "@esbuild/linux-ia32": "npm:0.21.5" - "@esbuild/linux-loong64": "npm:0.21.5" - "@esbuild/linux-mips64el": "npm:0.21.5" - "@esbuild/linux-ppc64": "npm:0.21.5" - "@esbuild/linux-riscv64": "npm:0.21.5" - "@esbuild/linux-s390x": "npm:0.21.5" - "@esbuild/linux-x64": "npm:0.21.5" - "@esbuild/netbsd-x64": "npm:0.21.5" - "@esbuild/openbsd-x64": "npm:0.21.5" - "@esbuild/sunos-x64": "npm:0.21.5" - "@esbuild/win32-arm64": "npm:0.21.5" - "@esbuild/win32-ia32": "npm:0.21.5" - "@esbuild/win32-x64": "npm:0.21.5" +"esbuild@npm:^0.20.1": + version: 0.20.2 + resolution: "esbuild@npm:0.20.2" + dependencies: + "@esbuild/aix-ppc64": "npm:0.20.2" + "@esbuild/android-arm": "npm:0.20.2" + "@esbuild/android-arm64": "npm:0.20.2" + "@esbuild/android-x64": "npm:0.20.2" + "@esbuild/darwin-arm64": "npm:0.20.2" + "@esbuild/darwin-x64": "npm:0.20.2" + "@esbuild/freebsd-arm64": "npm:0.20.2" + "@esbuild/freebsd-x64": "npm:0.20.2" + "@esbuild/linux-arm": "npm:0.20.2" + "@esbuild/linux-arm64": "npm:0.20.2" + "@esbuild/linux-ia32": "npm:0.20.2" + "@esbuild/linux-loong64": "npm:0.20.2" + "@esbuild/linux-mips64el": "npm:0.20.2" + "@esbuild/linux-ppc64": "npm:0.20.2" + "@esbuild/linux-riscv64": "npm:0.20.2" + "@esbuild/linux-s390x": "npm:0.20.2" + "@esbuild/linux-x64": "npm:0.20.2" + "@esbuild/netbsd-x64": "npm:0.20.2" + "@esbuild/openbsd-x64": "npm:0.20.2" + "@esbuild/sunos-x64": "npm:0.20.2" + "@esbuild/win32-arm64": "npm:0.20.2" + "@esbuild/win32-ia32": "npm:0.20.2" + "@esbuild/win32-x64": "npm:0.20.2" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -6383,7 +6910,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10/d2ff2ca84d30cce8e871517374d6c2290835380dc7cd413b2d49189ed170d45e407be14de2cb4794cf76f75cf89955c4714726ebd3de7444b3046f5cab23ab6b + checksum: 10/663215ab7e599651e00d61b528a63136e1f1d397db8b9c3712540af928c9476d61da95aefa81b7a8dfc7a9fdd7616fcf08395c27be68be8c99953fb461863ce4 languageName: node linkType: hard @@ -6477,6 +7004,20 @@ __metadata: languageName: node linkType: hard +"escalade@npm:^3.1.2": + version: 3.1.2 + resolution: "escalade@npm:3.1.2" + checksum: 10/a1e07fea2f15663c30e40b9193d658397846ffe28ce0a3e4da0d8e485fedfeca228ab846aee101a05015829adf39f9934ff45b2a3fca47bed37a29646bd05cd3 + languageName: node + linkType: hard + +"escape-string-regexp@npm:^1.0.5": + version: 1.0.5 + resolution: "escape-string-regexp@npm:1.0.5" + checksum: 10/6092fda75c63b110c706b6a9bfde8a612ad595b628f0bd2147eea1d3406723020810e591effc7db1da91d80a71a737a313567c5abb3813e8d9c71f4aa595b410 + languageName: node + linkType: hard + "escape-string-regexp@npm:^5.0.0": version: 5.0.0 resolution: "escape-string-regexp@npm:5.0.0" @@ -7051,7 +7592,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.3.10, glob@npm:^10.4.1, glob@npm:^10.4.2": +"glob@npm:^10.3.10, glob@npm:^10.4.2": version: 10.4.5 resolution: "glob@npm:10.4.5" dependencies: @@ -7067,6 +7608,22 @@ __metadata: languageName: node linkType: hard +"glob@npm:^10.4.1": + version: 10.4.2 + resolution: "glob@npm:10.4.2" + dependencies: + foreground-child: "npm:^3.1.0" + jackspeak: "npm:^3.1.2" + minimatch: "npm:^9.0.4" + minipass: "npm:^7.1.2" + package-json-from-dist: "npm:^1.0.0" + path-scurry: "npm:^1.11.1" + bin: + glob: dist/esm/bin.mjs + checksum: 10/e412776b5952a818eba790c830bea161c9a56813fd767d8c4c49f855603b1fb962b3e73f1f627a47298a57d2992b9f0f2fe15cf93e74ecaaa63fb45d63fdd090 + languageName: node + linkType: hard + "glob@npm:^11.0.0": version: 11.0.0 resolution: "glob@npm:11.0.0" @@ -7184,6 +7741,13 @@ __metadata: languageName: node linkType: hard +"has-flag@npm:^3.0.0": + version: 3.0.0 + resolution: "has-flag@npm:3.0.0" + checksum: 10/4a15638b454bf086c8148979aae044dd6e39d63904cd452d970374fa6a87623423da485dfb814e7be882e05c096a7ccf1ebd48e7e7501d0208d8384ff4dea73b + languageName: node + linkType: hard + "has-flag@npm:^4.0.0": version: 4.0.0 resolution: "has-flag@npm:4.0.0" @@ -7473,12 +8037,12 @@ __metadata: linkType: hard "https-proxy-agent@npm:^7.0.5": - version: 7.0.6 - resolution: "https-proxy-agent@npm:7.0.6" + version: 7.0.5 + resolution: "https-proxy-agent@npm:7.0.5" dependencies: - agent-base: "npm:^7.1.2" + agent-base: "npm:^7.0.2" debug: "npm:4" - checksum: 10/784b628cbd55b25542a9d85033bdfd03d4eda630fb8b3c9477959367f3be95dc476ed2ecbb9836c359c7c698027fc7b45723a302324433590f45d6c1706e8c13 + checksum: 10/6679d46159ab3f9a5509ee80c3a3fc83fba3a920a5e18d32176c3327852c3c00ad640c0c4210a8fd70ea3c4a6d3a1b375bf01942516e7df80e2646bdc77658ab languageName: node linkType: hard @@ -7539,13 +8103,20 @@ __metadata: languageName: node linkType: hard -"ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4": +"ignore@npm:^5.1.1": version: 5.3.2 resolution: "ignore@npm:5.3.2" checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98 languageName: node linkType: hard +"ignore@npm:^5.2.0, ignore@npm:^5.2.4": + version: 5.2.4 + resolution: "ignore@npm:5.2.4" + checksum: 10/4f7caf5d2005da21a382d4bd1d2aa741a3bed51de185c8562dd7f899a81a620ac4fd0619b06f7029a38ae79e4e4c134399db3bd0192c703c3ef54bb82df3086c + languageName: node + linkType: hard + "image-size@npm:~0.5.0": version: 0.5.5 resolution: "image-size@npm:0.5.5" @@ -8134,8 +8705,8 @@ __metadata: linkType: hard "jsdom@npm:^24.1.1": - version: 24.1.3 - resolution: "jsdom@npm:24.1.3" + version: 24.1.1 + resolution: "jsdom@npm:24.1.1" dependencies: cssstyle: "npm:^4.0.1" data-urls: "npm:^5.0.0" @@ -8163,7 +8734,16 @@ __metadata: peerDependenciesMeta: canvas: optional: true - checksum: 10/81e01d092a3620a9749e46572c26b21eb1fefc4e593f99e4acf3d4a803dfb091917e7b7096b3e62fab87e1d525a4030b803be1f5dbb5e7e61435d726f82f7457 + checksum: 10/7b6e1ea1f02b75c388f4c833d4da710e252f8a3efc7093ae018b643a414e3f19d4c588e34feb1f484ae1ee70f2501bbcc8ccc9c6377e480706f9b69db22f0579 + languageName: node + linkType: hard + +"jsesc@npm:^2.5.1": + version: 2.5.2 + resolution: "jsesc@npm:2.5.2" + bin: + jsesc: bin/jsesc + checksum: 10/d2096abdcdec56969764b40ffc91d4a23408aa2f351b4d1c13f736f25476643238c43fdbaf38a191c26b1b78fd856d965f5d4d0dde7b89459cd94025190cdf13 languageName: node linkType: hard @@ -8494,7 +9074,7 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^11.0.0, lru-cache@npm:^11.0.2": +"lru-cache@npm:^11.0.0": version: 11.0.2 resolution: "lru-cache@npm:11.0.2" checksum: 10/25fcb66e9d91eaf17227c6abfe526a7bed5903de74f93bfde380eb8a13410c5e8d3f14fe447293f3f322a7493adf6f9f015c6f1df7a235ff24ec30f366e1c058 @@ -8535,7 +9115,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.0, magic-string@npm:^0.30.17, magic-string@npm:^0.30.3": +"magic-string@npm:^0.30.0, magic-string@npm:^0.30.17": version: 0.30.17 resolution: "magic-string@npm:0.30.17" dependencies: @@ -8544,6 +9124,15 @@ __metadata: languageName: node linkType: hard +"magic-string@npm:^0.30.3": + version: 0.30.5 + resolution: "magic-string@npm:0.30.5" + dependencies: + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + checksum: 10/c8a6b25f813215ca9db526f3a407d6dc0bf35429c2b8111d6f1c2cf6cf6afd5e2d9f9cd189416a0e3959e20ecd635f73639f9825c73de1074b29331fe36ace59 + languageName: node + linkType: hard + "magicast@npm:^0.3.5": version: 0.3.5 resolution: "magicast@npm:0.3.5" @@ -9610,7 +10199,7 @@ __metadata: languageName: node linkType: hard -"nanoid@npm:^3.3.6, nanoid@npm:^3.3.8": +"nanoid@npm:^3.3.6, nanoid@npm:^3.3.7, nanoid@npm:^3.3.8": version: 3.3.8 resolution: "nanoid@npm:3.3.8" bin: @@ -9768,6 +10357,20 @@ __metadata: languageName: node linkType: hard +"node-releases@npm:^2.0.14": + version: 2.0.14 + resolution: "node-releases@npm:2.0.14" + checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24 + languageName: node + linkType: hard + +"node-releases@npm:^2.0.18": + version: 2.0.18 + resolution: "node-releases@npm:2.0.18" + checksum: 10/241e5fa9556f1c12bafb83c6c3e94f8cf3d8f2f8f904906ecef6e10bcaa1d59aa61212d4651bec70052015fc54bd3fdcdbe7fc0f638a17e6685aa586c076ec4e + languageName: node + linkType: hard + "node-releases@npm:^2.0.19": version: 2.0.19 resolution: "node-releases@npm:2.0.19" @@ -9860,9 +10463,9 @@ __metadata: linkType: hard "nwsapi@npm:^2.2.12": - version: 2.2.16 - resolution: "nwsapi@npm:2.2.16" - checksum: 10/1e5e086cdd4ca4a45f414d37f49bf0ca81d84ed31c6871ac68f531917d2910845db61f77c6d844430dc90fda202d43fce9603024e74038675de95229eb834dba + version: 2.2.12 + resolution: "nwsapi@npm:2.2.12" + checksum: 10/172119e9ef492467ebfb337f9b5fd12a94d2b519377cde3f6ec2f74a86f6d5c00ef3873539bed7142f908ffca4e35383179be2319d04a563071d146bfa3f1673 languageName: node linkType: hard @@ -10117,11 +10720,11 @@ __metadata: linkType: hard "parse5@npm:^7.1.2": - version: 7.2.1 - resolution: "parse5@npm:7.2.1" + version: 7.1.2 + resolution: "parse5@npm:7.1.2" dependencies: - entities: "npm:^4.5.0" - checksum: 10/fd1a8ad1540d871e1ad6ca9bf5b67e30280886f1ce4a28052c0cb885723aa984d8cb1ec3da998349a6146960c8a84aa87b1a42600eb3b94495c7303476f2f88e + entities: "npm:^4.4.0" + checksum: 10/3c86806bb0fb1e9a999ff3a4c883b1ca243d99f45a619a0898dbf021a95a0189ed955c31b07fe49d342b54e814f33f2c9d7489198e8630dacd5477d413ec5782 languageName: node linkType: hard @@ -10268,13 +10871,27 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": +"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045 languageName: node linkType: hard +"picocolors@npm:^1.0.1": + version: 1.0.1 + resolution: "picocolors@npm:1.0.1" + checksum: 10/fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5 + languageName: node + linkType: hard + +"picocolors@npm:^1.1.0": + version: 1.1.0 + resolution: "picocolors@npm:1.1.0" + checksum: 10/a2ad60d94d185c30f2a140b19c512547713fb89b920d32cc6cf658fa786d63a37ba7b8451872c3d9fc34883971fb6e5878e07a20b60506e0bb2554dce9169ccb + languageName: node + linkType: hard + "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -10876,7 +11493,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.0.0, postcss@npm:^8.4.35, postcss@npm:^8.4.43, postcss@npm:^8.4.49, postcss@npm:^8.5.1": +"postcss@npm:^8.0.0, postcss@npm:^8.4.49, postcss@npm:^8.5.1": version: 8.5.1 resolution: "postcss@npm:8.5.1" dependencies: @@ -10887,6 +11504,28 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.35": + version: 8.4.35 + resolution: "postcss@npm:8.4.35" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.0.2" + checksum: 10/93a7ce50cd6188f5f486a9ca98950ad27c19dfed996c45c414fa242944497e4d084a8760d3537f078630226f2bd3c6ab84b813b488740f4432e7c7039cd73a20 + languageName: node + linkType: hard + +"postcss@npm:^8.4.38": + version: 8.4.38 + resolution: "postcss@npm:8.4.38" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.2.0" + checksum: 10/6e44a7ed835ffa9a2b096e8d3e5dfc6bcf331a25c48aeb862dd54e3aaecadf814fa22be224fd308f87d08adf2299164f88c5fd5ab1c4ef6cbd693ceb295377f4 + languageName: node + linkType: hard + "prettier@npm:^2.7.1, prettier@npm:^2.8.7": version: 2.8.8 resolution: "prettier@npm:2.8.8" @@ -11013,11 +11652,9 @@ __metadata: linkType: hard "psl@npm:^1.1.33": - version: 1.15.0 - resolution: "psl@npm:1.15.0" - dependencies: - punycode: "npm:^2.3.1" - checksum: 10/5e7467eb5196eb7900d156783d12907d445c0122f76c73203ce96b148a6ccf8c5450cc805887ffada38ff92d634afcf33720c24053cb01d5b6598d1c913c5caf + version: 1.9.0 + resolution: "psl@npm:1.9.0" + checksum: 10/d07879d4bfd0ac74796306a8e5a36a93cfb9c4f4e8ee8e63fbb909066c192fe1008cd8f12abd8ba2f62ca28247949a20c8fb32e1d18831d9e71285a1569720f9 languageName: node linkType: hard @@ -11278,13 +11915,13 @@ __metadata: linkType: hard "readable-stream@npm:^3.6.0": - version: 3.6.2 - resolution: "readable-stream@npm:3.6.2" + version: 3.6.0 + resolution: "readable-stream@npm:3.6.0" dependencies: inherits: "npm:^2.0.3" string_decoder: "npm:^1.1.1" util-deprecate: "npm:^1.0.1" - checksum: 10/d9e3e53193adcdb79d8f10f2a1f6989bd4389f5936c6f8b870e77570853561c362bee69feca2bbb7b32368ce96a85504aa4cedf7cf80f36e6a9de30d64244048 + checksum: 10/b80b3e6a7fafb1c79de7db541de357f4a5ee73bd70c21672f5a7c840d27bb27bdb0151e7ba2fd82c4a888df22ce0c501b0d9f3e4dfe51688876701c437d59536 languageName: node linkType: hard @@ -11641,7 +12278,67 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^4.20.0, rollup@npm:^4.23.0, rollup@npm:^4.24.0, rollup@npm:^4.31.0": +"rollup@npm:^4.13.0": + version: 4.14.0 + resolution: "rollup@npm:4.14.0" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.14.0" + "@rollup/rollup-android-arm64": "npm:4.14.0" + "@rollup/rollup-darwin-arm64": "npm:4.14.0" + "@rollup/rollup-darwin-x64": "npm:4.14.0" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.14.0" + "@rollup/rollup-linux-arm64-gnu": "npm:4.14.0" + "@rollup/rollup-linux-arm64-musl": "npm:4.14.0" + "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.14.0" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.14.0" + "@rollup/rollup-linux-s390x-gnu": "npm:4.14.0" + "@rollup/rollup-linux-x64-gnu": "npm:4.14.0" + "@rollup/rollup-linux-x64-musl": "npm:4.14.0" + "@rollup/rollup-win32-arm64-msvc": "npm:4.14.0" + "@rollup/rollup-win32-ia32-msvc": "npm:4.14.0" + "@rollup/rollup-win32-x64-msvc": "npm:4.14.0" + "@types/estree": "npm:1.0.5" + fsevents: "npm:~2.3.2" + dependenciesMeta: + "@rollup/rollup-android-arm-eabi": + optional: true + "@rollup/rollup-android-arm64": + optional: true + "@rollup/rollup-darwin-arm64": + optional: true + "@rollup/rollup-darwin-x64": + optional: true + "@rollup/rollup-linux-arm-gnueabihf": + optional: true + "@rollup/rollup-linux-arm64-gnu": + optional: true + "@rollup/rollup-linux-arm64-musl": + optional: true + "@rollup/rollup-linux-powerpc64le-gnu": + optional: true + "@rollup/rollup-linux-riscv64-gnu": + optional: true + "@rollup/rollup-linux-s390x-gnu": + optional: true + "@rollup/rollup-linux-x64-gnu": + optional: true + "@rollup/rollup-linux-x64-musl": + optional: true + "@rollup/rollup-win32-arm64-msvc": + optional: true + "@rollup/rollup-win32-ia32-msvc": + optional: true + "@rollup/rollup-win32-x64-msvc": + optional: true + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: 10/803b45976dfc73843a48083dc345821860e960aede010b0e765201cc2827fe131b6f29296da3186a48813b83f823cd26b77adcafcf32ba859efb1b62adb8f4e0 + languageName: node + linkType: hard + +"rollup@npm:^4.23.0, rollup@npm:^4.24.0, rollup@npm:^4.31.0": version: 4.31.0 resolution: "rollup@npm:4.31.0" dependencies: @@ -11735,6 +12432,13 @@ __metadata: languageName: unknown linkType: soft +"rrweb-cssom@npm:^0.6.0": + version: 0.6.0 + resolution: "rrweb-cssom@npm:0.6.0" + checksum: 10/5411836a4a78d6b68480767b8312de291f32d5710a278343954a778e5b420eaf13c90d9d2a942acf4718ddf497baa75ce653a314b332a380b6eaae1dee72257e + languageName: node + linkType: hard + "rrweb-cssom@npm:^0.7.1": version: 0.7.1 resolution: "rrweb-cssom@npm:0.7.1" @@ -11742,13 +12446,6 @@ __metadata: languageName: node linkType: hard -"rrweb-cssom@npm:^0.8.0": - version: 0.8.0 - resolution: "rrweb-cssom@npm:0.8.0" - checksum: 10/07521ee36fb6569c17906afad1ac7ff8f099d49ade9249e190693ac36cdf27f88d9acf0cc66978935d5d0a23fca105643d7e9125b9a9d91ed9db9e02d31d7d80 - languageName: node - linkType: hard - "run-parallel@npm:^1.1.9": version: 1.2.0 resolution: "run-parallel@npm:1.2.0" @@ -12121,13 +12818,20 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3 languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.0 + resolution: "source-map-js@npm:1.2.0" + checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5 + languageName: node + linkType: hard + "source-map-support@npm:^0.5.16, source-map-support@npm:~0.5.20": version: 0.5.21 resolution: "source-map-support@npm:0.5.21" @@ -12505,6 +13209,15 @@ __metadata: languageName: node linkType: hard +"supports-color@npm:^5.3.0": + version: 5.5.0 + resolution: "supports-color@npm:5.5.0" + dependencies: + has-flag: "npm:^3.0.0" + checksum: 10/5f505c6fa3c6e05873b43af096ddeb22159831597649881aeb8572d6fe3b81e798cc10840d0c9735e0026b250368851b7f77b65e84f4e4daa820a4f69947f55b + languageName: node + linkType: hard + "supports-color@npm:^7.1.0": version: 7.2.0 resolution: "supports-color@npm:7.2.0" @@ -12793,6 +13506,13 @@ __metadata: languageName: node linkType: hard +"to-fast-properties@npm:^2.0.0": + version: 2.0.0 + resolution: "to-fast-properties@npm:2.0.0" + checksum: 10/be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168 + languageName: node + linkType: hard + "to-regex-range@npm:^5.0.1": version: 5.0.1 resolution: "to-regex-range@npm:5.0.1" @@ -12924,13 +13644,34 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1": +"tslib@npm:^2.0.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 languageName: node linkType: hard +"tslib@npm:^2.0.1, tslib@npm:^2.3.0, tslib@npm:^2.4.0": + version: 2.5.0 + resolution: "tslib@npm:2.5.0" + checksum: 10/ea556fbdf396fe15dbd45e242754e86e7c36e0dce8644404a7c8a81ae1e940744dc639569aeca1ae370a7f804d82872f3fd8564eb23be9adb7618201d0314dac + languageName: node + linkType: hard + +"tslib@npm:^2.0.3": + version: 2.6.3 + resolution: "tslib@npm:2.6.3" + checksum: 10/52109bb681f8133a2e58142f11a50e05476de4f075ca906d13b596ae5f7f12d30c482feb0bff167ae01cfc84c5803e575a307d47938999246f5a49d174fc558c + languageName: node + linkType: hard + +"tslib@npm:^2.1.0": + version: 2.7.0 + resolution: "tslib@npm:2.7.0" + checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6 + languageName: node + linkType: hard + "tsup@npm:^8.3.5": version: 8.3.5 resolution: "tsup@npm:8.3.5" @@ -13228,6 +13969,34 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.0.13": + version: 1.0.13 + resolution: "update-browserslist-db@npm:1.0.13" + dependencies: + escalade: "npm:^3.1.1" + picocolors: "npm:^1.0.0" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10/9074b4ef34d2ed931f27d390aafdd391ee7c45ad83c508e8fed6aaae1eb68f81999a768ed8525c6f88d4001a4fbf1b8c0268f099d0e8e72088ec5945ac796acf + languageName: node + linkType: hard + +"update-browserslist-db@npm:^1.1.0": + version: 1.1.0 + resolution: "update-browserslist-db@npm:1.1.0" + dependencies: + escalade: "npm:^3.1.2" + picocolors: "npm:^1.0.1" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10/d70b9efeaf4601aadb1a4f6456a7a5d9118e0063d995866b8e0c5e0cf559482671dab6ce7b079f9536b06758a344fbd83f974b965211e1c6e8d1958540b0c24c + languageName: node + linkType: hard + "update-browserslist-db@npm:^1.1.1": version: 1.1.2 resolution: "update-browserslist-db@npm:1.1.2" @@ -13467,19 +14236,18 @@ __metadata: linkType: hard "vite@npm:^5.0.11": - version: 5.4.6 - resolution: "vite@npm:5.4.6" + version: 5.2.12 + resolution: "vite@npm:5.2.12" dependencies: - esbuild: "npm:^0.21.3" + esbuild: "npm:^0.20.1" fsevents: "npm:~2.3.3" - postcss: "npm:^8.4.43" - rollup: "npm:^4.20.0" + postcss: "npm:^8.4.38" + rollup: "npm:^4.13.0" peerDependencies: "@types/node": ^18.0.0 || >=20.0.0 less: "*" lightningcss: ^1.21.0 sass: "*" - sass-embedded: "*" stylus: "*" sugarss: "*" terser: ^5.4.0 @@ -13495,8 +14263,6 @@ __metadata: optional: true sass: optional: true - sass-embedded: - optional: true stylus: optional: true sugarss: @@ -13505,7 +14271,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10/8489fa55c48675fc12b64bf7af58b5e2f8a11b2aebc63cb177861bd53dc196d7c496d6918f5a8c48828f51b6fe498166a1a2350334bbfaae10d015a0c71f1c77 + checksum: 10/c27d3efff93016e8171b6a362f605ad5f78e24086292987097ad4a7382ae78d9e0659065976a13bf7b51ba0f593d675579010692097ef36d8a5cc965f3efec4c languageName: node linkType: hard @@ -13821,7 +14587,7 @@ __metadata: languageName: node linkType: hard -"ws@npm:^8.18.0, ws@npm:^8.2.3": +"ws@npm:^8.18.0": version: 8.18.0 resolution: "ws@npm:8.18.0" peerDependencies: @@ -13836,6 +14602,21 @@ __metadata: languageName: node linkType: hard +"ws@npm:^8.2.3": + version: 8.17.1 + resolution: "ws@npm:8.17.1" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ">=5.0.2" + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 10/4264ae92c0b3e59c7e309001e93079b26937aab181835fb7af79f906b22cd33b6196d96556dafb4e985742dd401e99139572242e9847661fdbc96556b9e6902d + languageName: node + linkType: hard + "xml-name-validator@npm:^5.0.0": version: 5.0.0 resolution: "xml-name-validator@npm:5.0.0" @@ -13892,7 +14673,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^2.2.2, yaml@npm:^2.3.4": +"yaml@npm:^2.2.2": version: 2.4.1 resolution: "yaml@npm:2.4.1" bin: @@ -13901,6 +14682,13 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.3.4": + version: 2.3.4 + resolution: "yaml@npm:2.3.4" + checksum: 10/f8207ce43065a22268a2806ea6a0fa3974c6fde92b4b2fa0082357e487bc333e85dc518910007e7ac001b532c7c84bd3eccb6c7757e94182b564028b0008f44b + languageName: node + linkType: hard + "yargs-parser@npm:^20.2.2": version: 20.2.9 resolution: "yargs-parser@npm:20.2.9"