@fibery/ui-kit 3.0.0 → 4.1.0

package/src/date-picker/contexts.ts

@@ -1,7 +1,10 @@
-import noop from "lodash/noop";
-import {createContext} from "react";
+import {noop} from "@fibery/helpers/src/_";
+import {createContext, type Dispatch, type SetStateAction} from "react";
 
-export const StartEndFocusContext = createContext({
+export const StartEndFocusContext = createContext<{
+  focusOnStart: boolean;
+  setFocusOnStart: Dispatch<SetStateAction<boolean>>;
+}>({
   focusOnStart: true,
   setFocusOnStart: noop,
 });

package/src/date-picker/date-range-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
-import omit from "lodash/omit";
 import moment from "moment";
 import {forwardRef, useCallback, useRef} from "react";
 import {focusable} from "tabbable";
@@ -8,7 +7,7 @@ import {focusable} from "tabbable";
 import "react-day-picker/dist/style.css";
 import {space} from "../design-system";
 import {EmptyValue} from "../empty-value";
-import {Popover} from "../popover";
+import {Popover, type PopoverContentProps} from "../popover";
 import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
 import {FakeDateInputWrapper} from "./fake-date-input";
 import type {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
@@ -17,13 +16,12 @@ import {withPopupControl} from "./with-popup-control";
 
 export const DateRangePicker = forwardRef<
   {setValue: (value: string) => void},
-  DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps
+  DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps & Pick<PopoverContentProps, "offset">
 >((props, ref) => {
   const {
     title,
     open,
-    onOpen,
-    onClose,
+    onOpenChange,
     children,
     value,
     disabled = false,
@@ -33,6 +31,7 @@ export const DateRangePicker = forwardRef<
     timeFormat,
     dateTimeFormat,
     placeholder,
+    offset = [0, space.s6],
     onKeyDown,
   } = props;
 
@@ -90,7 +89,7 @@ export const DateRangePicker = forwardRef<
 
   return (
     <div>
-      <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
+      <Popover.Root open={open} onOpenChange={onOpenChange}>
         <Popover.Trigger asChild triggerEvent="click">
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
             {pickerValue}
@@ -99,7 +98,7 @@ export const DateRangePicker = forwardRef<
         <Popover.Portal>
           <Popover.Content
             title={title}
-            offset={[0, space.s6]}
+            offset={offset}
             supportMobile
             placement="bottom-start"
             popupContainerClassName={css`
@@ -111,7 +110,7 @@ export const DateRangePicker = forwardRef<
           >
             <DateRangePickerPopupContent
               ref={ref}
-              {...omit(props, ["onChange", "value"])}
+              {...props}
               onChange={onDatesChange}
               value={dateValue}
               onKeyDown={onDatePickerKeyDown}

package/src/date-picker/single-date-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import omit from "lodash/omit";
 import type {Moment} from "moment";
 import moment from "moment";
 
@@ -191,7 +190,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
         {!allowRelativeDate || activeButton === "exact" ? (
           <SingleDatePickerPopupContent
             ref={ref}
-            {...omit(props, ["onChange", "value"])}
+            {...props}
             onChange={onDateChange}
             value={!isRelativeValue && value ? (value as Moment).toDate() : null}
             onKeyDown={onDatePickerKeyDown}
@@ -216,8 +215,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
   const {
     title,
     open,
-    onOpen,
-    onClose,
+    onOpenChange,
     children,
     value,
     disabled = false,
@@ -254,7 +252,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
   }
 
   return (
-    <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger>
         <div ref={fakeWrapperRef} onClick={stopPropagation}>
           {pickerValue}

package/src/date-picker/types.ts

@@ -48,7 +48,7 @@ export type NativeDateRangePickerProps = {
   onChange: (date: [Date | null, Date | null]) => void;
 };
 
-export type ControlledDatePickerProps = {open: boolean; onOpen: () => void; onClose: () => void};
+export type ControlledDatePickerProps = {open: boolean; onOpenChange: (open: boolean) => void};
 
 export type SingleDatePickerPopoverContentProps<IsRelativeDate extends boolean = false> = DatePickerCommonProps &
   MomentSingleDateProps<IsRelativeDate> & {

package/src/date-picker/with-popup-control.tsx

@@ -13,15 +13,9 @@ export const withPopupControl = <P extends object>(Component: React.ComponentTyp
     const [open, setOpen] = useState(false);
     const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
 
-    const onOpen = useCallback(() => {
+    const onOpenChange = useCallback((value: boolean) => {
       timeoutIdRef.current = setTimeout(() => {
-        setOpen(true);
-      }, 0);
-    }, []);
-
-    const onClose = useCallback(() => {
-      timeoutIdRef.current = setTimeout(() => {
-        setOpen(false);
+        setOpen(value);
         // Input needs to fire onBlur before unmounting
       }, 0);
     }, []);
@@ -56,7 +50,7 @@ export const withPopupControl = <P extends object>(Component: React.ComponentTyp
         onMouseDown={stopPropagation}
         onMouseUp={stopPropagation}
       >
-        <Component {...props} open={open} onOpen={onOpen} onClose={onClose} />
+        <Component {...props} open={open} onOpenChange={onOpenChange} />
       </div>
     );
   };

package/src/day-select/iso-week-day-select.tsx

@@ -1,10 +1,10 @@
-import range from "lodash/range";
 import moment from "moment";
 
 import type {Props} from "./day-select";
 import {DaySelect} from "./day-select";
 
-const isoWeekDays = range(1, 8).map((day) => {
+const isoWeekDays = Array.from({length: 7}, (_, i) => {
+  const day = i + 1;
   return {
     key: String(day),
     title: moment().isoWeekday(day).format("dd").charAt(0),

package/src/design-system/colors-callout.warm-dark.test.ts

@@ -8,12 +8,12 @@ describe("callout.bg", () => {
     expect(userColorChoices((c) => theme.fns.callout(c).bg)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#342D29   | hsl(  22  12%  18%) | oklch(0.3  0.01  52 )",
-        "CMYK Cyan   ": "#275A56   | hsl( 175  40%  25%) | oklch(0.43 0.06 188 )",
+        "CMYK Cyan   ": "#255B57   | hsl( 176  42%  25%) | oklch(0.43 0.06 189 )",
         "CMYK Magenta": "#5D2759   | hsl( 304  41%  26%) | oklch(0.37 0.1  330 )",
         "CMYK Yellow ": "#5E5C14   | hsl(  58  65%  22%) | oklch(0.46 0.09 108 )",
         "Noti green  ": "#545450   | hsl(  60   2%  32%) | oklch(0.44 0.01 107 )",
         "Noti red    ": "#57504E   | hsl(  13   5%  32%) | oklch(0.44 0.01  37 )",
-        "Noti yellow ": "#595348   | hsl(  39  11%  32%) | oklch(0.44 0.02  83 )",
+        "Noti yellow ": "#595448   | hsl(  42  11%  32%) | oklch(0.45 0.02  88 )",
         "RGB  Blue   ": "#1E2568   | hsl( 234  55%  26%) | oklch(0.3  0.12 273 )",
         "RGB  Green  ": "#2D5A1C   | hsl( 104  53%  23%) | oklch(0.42 0.1  138 )",
         "RGB  Red    ": "#56211C   | hsl(   5  51%  22%) | oklch(0.33 0.08  28 )",
@@ -24,17 +24,17 @@ describe("callout.bg", () => {
         "swatches[ 3] aka Swatch.Red       ": "#4C1F1D   | hsl(   3  45%  21%) | oklch(0.3  0.07  25 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#502330   | hsl( 343  39%  23%) | oklch(0.32 0.07   3 )",
         "swatches[ 5] aka Swatch.Purple    ": "#402540   | hsl( 300  27%  20%) | oklch(0.31 0.06 327 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#352745   | hsl( 268  28%  21%) | oklch(0.3  0.06 305 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#292C46   | hsl( 234  26%  22%) | oklch(0.3  0.05 278 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#362746   | hsl( 269  28%  21%) | oklch(0.3  0.06 306 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#292C47   | hsl( 234  27%  22%) | oklch(0.3  0.05 278 )",
         "swatches[ 8] aka Swatch.Blue      ": "#2A3651   | hsl( 222  32%  24%) | oklch(0.34 0.05 265 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#2E4052   | hsl( 210  28%  25%) | oklch(0.36 0.04 249 )",
-        "swatches[10] aka Swatch.Turquoise ": "#2C4846   | hsl( 176  24%  23%) | oklch(0.38 0.03 190 )",
-        "swatches[11] aka Swatch.GreenDark ": "#253931   | hsl( 156  21%  18%) | oklch(0.32 0.03 168 )",
-        "swatches[12] aka Swatch.Green     ": "#31422B   | hsl( 104  21%  21%) | oklch(0.36 0.04 138 )",
-        "swatches[13] aka Swatch.GreenLight": "#3F472B   | hsl(  77  25%  22%) | oklch(0.38 0.05 122 )",
-        "swatches[14] aka Swatch.Yellow    ": "#584324   | hsl(  36  42%  24%) | oklch(0.4  0.05  76 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#2B4052   | hsl( 208  31%  25%) | oklch(0.36 0.04 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#284848   | hsl( 180  29%  22%) | oklch(0.38 0.04 196 )",
+        "swatches[11] aka Swatch.GreenDark ": "#213B34   | hsl( 164  28%  18%) | oklch(0.33 0.03 175 )",
+        "swatches[12] aka Swatch.Green     ": "#30422A   | hsl( 105  22%  21%) | oklch(0.36 0.05 138 )",
+        "swatches[13] aka Swatch.GreenLight": "#3E482B   | hsl(  81  25%  23%) | oklch(0.38 0.05 124 )",
+        "swatches[14] aka Swatch.Yellow    ": "#594222   | hsl(  35  45%  24%) | oklch(0.4  0.06  74 )",
         "swatches[15] aka Swatch.Orange    ": "#552E20   | hsl(  16  45%  23%) | oklch(0.35 0.06  40 )",
-        "swatches[16] aka Swatch.Brown     ": "#402921   | hsl(  15  32%  19%) | oklch(0.31 0.04  40 )",
+        "swatches[16] aka Swatch.Brown     ": "#422920   | hsl(  16  35%  19%) | oklch(0.31 0.04  41 )",
       }
     `);
   });
@@ -45,12 +45,12 @@ describe("callout.fg", () => {
     expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#988379   | hsl(  19  13%  54%) | oklch(0.63 0.03  47 )",
-        "CMYK Cyan   ": "#44EFE5   | hsl( 176  84%  60%) | oklch(0.87 0.14 189 )",
+        "CMYK Cyan   ": "#3CF0E8   | hsl( 177  86%  59%) | oklch(0.87 0.14 190 )",
         "CMYK Magenta": "#EF4DEE   | hsl( 300  84%  62%) | oklch(0.7  0.26 328 )",
         "CMYK Yellow ": "#F3F314   | hsl(  60  90%  52%) | oklch(0.93 0.2  110 )",
         "Noti green  ": "#D1D9D3   | hsl( 135  10%  84%) | oklch(0.88 0.01 154 )",
         "Noti red    ": "#DCCDCA   | hsl(  10  20%  83%) | oklch(0.86 0.02  31 )",
-        "Noti yellow ": "#E1D8BA   | hsl(  46  39%  81%) | oklch(0.88 0.04  93 )",
+        "Noti yellow ": "#E2D9B8   | hsl(  47  42%  80%) | oklch(0.88 0.04  95 )",
         "RGB  Blue   ": "#6C7DF0   | hsl( 232  81%  68%) | oklch(0.63 0.17 274 )",
         "RGB  Green  ": "#57ED2F   | hsl( 107  84%  56%) | oklch(0.83 0.25 140 )",
         "RGB  Red    ": "#E05D53   | hsl(   4  69%  60%) | oklch(0.64 0.17  27 )",
@@ -61,17 +61,17 @@ describe("callout.fg", () => {
         "swatches[ 3] aka Swatch.Red       ": "#D76460   | hsl(   2  60%  61%) | oklch(0.64 0.15  24 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#CF6487   | hsl( 340  53%  60%) | oklch(0.64 0.14   1 )",
         "swatches[ 5] aka Swatch.Purple    ": "#B46CC0   | hsl( 291  40%  59%) | oklch(0.64 0.14 322 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#9679C8   | hsl( 262  42%  63%) | oklch(0.64 0.12 300 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#7583C8   | hsl( 230  43%  62%) | oklch(0.63 0.11 274 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#9579C9   | hsl( 261  43%  63%) | oklch(0.63 0.12 299 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#7583CA   | hsl( 230  45%  63%) | oklch(0.63 0.11 274 )",
         "swatches[ 8] aka Swatch.Blue      ": "#5A86DA   | hsl( 219  63%  60%) | oklch(0.63 0.14 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#5A9CD7   | hsl( 208  61%  60%) | oklch(0.67 0.11 247 )",
-        "swatches[10] aka Swatch.Turquoise ": "#54B5B4   | hsl( 179  40%  52%) | oklch(0.72 0.09 194 )",
-        "swatches[11] aka Swatch.GreenDark ": "#44957F   | hsl( 164  37%  43%) | oklch(0.61 0.09 173 )",
-        "swatches[12] aka Swatch.Green     ": "#64A25C   | hsl( 113  28%  50%) | oklch(0.65 0.12 142 )",
-        "swatches[13] aka Swatch.GreenLight": "#8EB25E   | hsl(  86  35%  53%) | oklch(0.72 0.12 128 )",
-        "swatches[14] aka Swatch.Yellow    ": "#DEA446   | hsl(  37  70%  57%) | oklch(0.76 0.13  76 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#4F9BD8   | hsl( 207  64%  58%) | oklch(0.67 0.12 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#46B6BA   | hsl( 182  46%  50%) | oklch(0.71 0.1  198 )",
+        "swatches[11] aka Swatch.GreenDark ": "#369683   | hsl( 168  47%  40%) | oklch(0.61 0.09 177 )",
+        "swatches[12] aka Swatch.Green     ": "#60A359   | hsl( 114  29%  49%) | oklch(0.65 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#8DB45B   | hsl(  86  37%  53%) | oklch(0.72 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#E1A242   | hsl(  36  73%  57%) | oklch(0.76 0.13  74 )",
         "swatches[15] aka Swatch.Orange    ": "#D66741   | hsl(  15  65%  55%) | oklch(0.64 0.15  39 )",
-        "swatches[16] aka Swatch.Brown     ": "#BB765D   | hsl(  16  41%  55%) | oklch(0.63 0.09  41 )",
+        "swatches[16] aka Swatch.Brown     ": "#C17359   | hsl(  15  46%  55%) | oklch(0.63 0.11  39 )",
       }
     `);
   });

package/src/design-system/colors-callout.warm-light.test.ts

@@ -13,7 +13,7 @@ describe("callout.bg", () => {
         "CMYK Yellow ": "#F9F7DD   | hsl(  56  70%  92%) | oklch(0.97 0.03 103 )",
         "Noti green  ": "#F7F6F3   | hsl(  45  20%  96%) | oklch(0.97 0     91 )",
         "Noti red    ": "#F8F5F2   | hsl(  30  30%  96%) | oklch(0.97 0.01  68 )",
-        "Noti yellow ": "#F8F5F0   | hsl(  38  36%  96%) | oklch(0.97 0.01  81 )",
+        "Noti yellow ": "#F8F5EF   | hsl(  40  39%  95%) | oklch(0.97 0.01  85 )",
         "RGB  Blue   ": "#E8E9F8   | hsl( 236  53%  94%) | oklch(0.94 0.02 283 )",
         "RGB  Green  ": "#EBFAE3   | hsl(  99  70%  94%) | oklch(0.97 0.03 134 )",
         "RGB  Red    ": "#FCEAE6   | hsl(  11  79%  95%) | oklch(0.95 0.02  33 )",
@@ -24,14 +24,14 @@ describe("callout.bg", () => {
         "swatches[ 3] aka Swatch.Red       ": "#F8E9E6   | hsl(  10  56%  94%) | oklch(0.95 0.02  31 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#FAEAEC   | hsl( 352  62%  95%) | oklch(0.95 0.02   9 )",
         "swatches[ 5] aka Swatch.Purple    ": "#F5EBF2   | hsl( 318  33%  94%) | oklch(0.95 0.01 336 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#F0EAF1   | hsl( 291  20%  93%) | oklch(0.94 0.01 321 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#ECECF2   | hsl( 240  19%  94%) | oklch(0.94 0.01 286 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#F0EAF2   | hsl( 285  24%  93%) | oklch(0.94 0.01 318 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#ECECF3   | hsl( 240  23%  94%) | oklch(0.95 0.01 286 )",
         "swatches[ 8] aka Swatch.Blue      ": "#EDF1F8   | hsl( 218  44%  95%) | oklch(0.96 0.01 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#EFF4F8   | hsl( 207  39%  95%) | oklch(0.96 0.01 242 )",
-        "swatches[10] aka Swatch.Turquoise ": "#EEF7F4   | hsl( 160  36%  95%) | oklch(0.97 0.01 174 )",
-        "swatches[11] aka Swatch.GreenDark ": "#ECF2ED   | hsl( 130  19%  94%) | oklch(0.96 0.01 151 )",
-        "swatches[12] aka Swatch.Green     ": "#F0F5EB   | hsl(  90  33%  94%) | oklch(0.96 0.01 129 )",
-        "swatches[13] aka Swatch.GreenLight": "#F4F6EB   | hsl(  71  38%  94%) | oklch(0.97 0.01 115 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#EEF4F8   | hsl( 204  42%  95%) | oklch(0.96 0.01 237 )",
+        "swatches[10] aka Swatch.Turquoise ": "#EDF7F5   | hsl( 168  38%  95%) | oklch(0.97 0.01 183 )",
+        "swatches[11] aka Swatch.GreenDark ": "#EBF2EE   | hsl( 146  21%  94%) | oklch(0.95 0.01 161 )",
+        "swatches[12] aka Swatch.Green     ": "#EFF5EA   | hsl(  93  35%  94%) | oklch(0.96 0.02 130 )",
+        "swatches[13] aka Swatch.GreenLight": "#F4F7EB   | hsl(  75  43%  95%) | oklch(0.97 0.02 118 )",
         "swatches[14] aka Swatch.Yellow    ": "#FDF5E8   | hsl(  37  84%  95%) | oklch(0.97 0.02  80 )",
         "swatches[15] aka Swatch.Orange    ": "#FCEEE7   | hsl(  20  78%  95%) | oklch(0.96 0.02  49 )",
         "swatches[16] aka Swatch.Brown     ": "#F5ECE7   | hsl(  21  41%  93%) | oklch(0.95 0.01  51 )",
@@ -45,12 +45,12 @@ describe("callout.fg", () => {
     expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#0D0D0D   | hsl(none   0%   5%) | oklch(0.16 0    none)",
-        "CMYK Cyan   ": "#05A59C   | hsl( 177  94%  33%) | oklch(0.65 0.11 188 )",
+        "CMYK Cyan   ": "#04A59E   | hsl( 177  95%  33%) | oklch(0.65 0.11 189 )",
         "CMYK Magenta": "#F935F8   | hsl( 300  94%  59%) | oklch(0.7  0.29 328 )",
         "CMYK Yellow ": "#989900   | hsl(  60 100%  30%) | oklch(0.66 0.14 110 )",
         "Noti green  ": "#7E9B85   | hsl( 134  13%  55%) | oklch(0.66 0.05 152 )",
         "Noti red    ": "#B68980   | hsl(  10  27%  61%) | oklch(0.67 0.06  31 )",
-        "Noti yellow ": "#AB9139   | hsl(  46  50%  45%) | oklch(0.66 0.11  93 )",
+        "Noti yellow ": "#AD9132   | hsl(  46  55%  44%) | oklch(0.66 0.12  92 )",
         "RGB  Blue   ": "#223BEB   | hsl( 233  83%  53%) | oklch(0.48 0.26 267 )",
         "RGB  Green  ": "#29AA06   | hsl( 107  93%  35%) | oklch(0.64 0.21 141 )",
         "RGB  Red    ": "#E44438   | hsl(   4  76%  56%) | oklch(0.62 0.2   29 )",
@@ -61,17 +61,17 @@ describe("callout.fg", () => {
         "swatches[ 3] aka Swatch.Red       ": "#BE3D39   | hsl(   2  54%  48%) | oklch(0.55 0.17  26 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#CF4C77   | hsl( 340  58%  55%) | oklch(0.6  0.17   3 )",
         "swatches[ 5] aka Swatch.Purple    ": "#9F50AC   | hsl( 292  37%  49%) | oklch(0.56 0.16 322 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#6D4BA7   | hsl( 262  38%  47%) | oklch(0.49 0.14 298 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#4E5FB3   | hsl( 230  40%  50%) | oklch(0.51 0.13 272 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6D4BA9   | hsl( 262  39%  48%) | oklch(0.5  0.15 298 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4C5EB4   | hsl( 230  41%  50%) | oklch(0.51 0.14 272 )",
         "swatches[ 8] aka Swatch.Blue      ": "#5887E2   | hsl( 220  70%  62%) | oklch(0.63 0.15 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#4B99DD   | hsl( 208  68%  58%) | oklch(0.66 0.13 247 )",
-        "swatches[10] aka Swatch.Turquoise ": "#40A2A1   | hsl( 179  43%  44%) | oklch(0.66 0.09 194 )",
-        "swatches[11] aka Swatch.GreenDark ": "#49917D   | hsl( 163  33%  43%) | oklch(0.6  0.08 173 )",
-        "swatches[12] aka Swatch.Green     ": "#61A358   | hsl( 113  30%  49%) | oklch(0.65 0.13 141 )",
-        "swatches[13] aka Swatch.GreenLight": "#799F46   | hsl(  86  39%  45%) | oklch(0.65 0.13 129 )",
-        "swatches[14] aka Swatch.Yellow    ": "#C98619   | hsl(  37  78%  44%) | oklch(0.67 0.14  72 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#4299DF   | hsl( 207  71%  57%) | oklch(0.66 0.13 246 )",
+        "swatches[10] aka Swatch.Turquoise ": "#37A2A6   | hsl( 182  50%  43%) | oklch(0.65 0.1  199 )",
+        "swatches[11] aka Swatch.GreenDark ": "#3D9583   | hsl( 168  42%  41%) | oklch(0.61 0.09 177 )",
+        "swatches[12] aka Swatch.Green     ": "#5DA456   | hsl( 115  31%  49%) | oklch(0.65 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#77A043   | hsl(  86  41%  45%) | oklch(0.66 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#CC8416   | hsl(  36  81%  44%) | oklch(0.67 0.14  70 )",
         "swatches[15] aka Swatch.Orange    ": "#E06D46   | hsl(  15  71%  58%) | oklch(0.66 0.15  39 )",
-        "swatches[16] aka Swatch.Brown     ": "#9D5E48   | hsl(  16  37%  45%) | oklch(0.55 0.09  40 )",
+        "swatches[16] aka Swatch.Brown     ": "#A45C45   | hsl(  15  41%  46%) | oklch(0.55 0.1   38 )",
       }
     `);
   });

package/src/design-system/colors-css.ts

@@ -1,5 +1,5 @@
 import {common} from "../palettes/common";
-import {themeVars} from "../theming";
+import {themeVars} from "../theming.generated";
 
 export function getLinearGradient(backgroundColors: Array<string>): string {
   const parts = backgroundColors.flatMap((color, index, arr) => [

package/src/design-system/colors-enum.dark.warm.test.ts

@@ -12,8 +12,8 @@ describe("enum over default surface = no color coding", () => {
           "fg": "Lc=30;          #867F7C   | hsl(  18   4%  51%) | oklch(0.6  0.01  45 )",
         },
         "CMYK Cyan   ": {
-          "bg": "Lc=14;          #275A56   | hsl( 175  40%  25%) | oklch(0.43 0.06 188 )",
-          "fg": "Lc=66;          #A2E3DC   | hsl( 174  54%  76%) | oklch(0.87 0.07 188 )",
+          "bg": "Lc=14;          #255B57   | hsl( 176  42%  25%) | oklch(0.43 0.06 189 )",
+          "fg": "Lc=66;          #9FE4DD   | hsl( 174  56%  76%) | oklch(0.87 0.07 188 )",
         },
         "CMYK Magenta": {
           "bg": "Lc=7;           #5D2759   | hsl( 304  41%  26%) | oklch(0.37 0.1  330 )",
@@ -32,8 +32,8 @@ describe("enum over default surface = no color coding", () => {
           "fg": "Lc=68;          #E2D5D0   | hsl(  17  24%  85%) | oklch(0.88 0.02  42 )",
         },
         "Noti yellow ": {
-          "bg": "Lc=15;          #5B533F   | hsl(  43  18%  30%) | oklch(0.44 0.03  89 )",
-          "fg": "Lc=68;          #E4DACA   | hsl(  37  33%  84%) | oklch(0.89 0.02  80 )",
+          "bg": "Lc=15;          #5C543F   | hsl(  43  19%  30%) | oklch(0.45 0.03  90 )",
+          "fg": "Lc=68;          #E5DAC9   | hsl(  36  35%  84%) | oklch(0.89 0.03  79 )",
         },
         "RGB  Blue   ": {
           "bg": "Lc=2;           #21285E   | hsl( 233  48%  25%) | oklch(0.3  0.1  274 )",
@@ -77,47 +77,47 @@ describe("enum over default surface = no color coding", () => {
         },
         "swatches[ 6] aka Swatch.Violet    ": {
           "bg": "Lc=2;           #352844   | hsl( 268  26%  21%) | oklch(0.3  0.05 305 )",
-          "fg": "Lc=47;          #AF9ABD   | hsl( 276  21%  67%) | oklch(0.72 0.06 312 )",
+          "fg": "Lc=47;          #AF9ABE   | hsl( 275  22%  67%) | oklch(0.72 0.06 311 )",
         },
         "swatches[ 7] aka Swatch.BlueDark  ": {
-          "bg": "Lc=2;           #292C45   | hsl( 234  25%  22%) | oklch(0.3  0.05 278 )",
-          "fg": "Lc=49;          #A2A2C2   | hsl( 240  21%  70%) | oklch(0.72 0.05 285 )",
+          "bg": "Lc=2;           #292C46   | hsl( 234  26%  22%) | oklch(0.3  0.05 278 )",
+          "fg": "Lc=49;          #A1A2C2   | hsl( 238  21%  70%) | oklch(0.72 0.05 284 )",
         },
         "swatches[ 8] aka Swatch.Blue      ": {
           "bg": "Lc=4;           #2A3651   | hsl( 222  32%  24%) | oklch(0.34 0.05 265 )",
           "fg": "Lc=55;          #A6B3D6   | hsl( 224  37%  75%) | oklch(0.77 0.05 269 )",
         },
         "swatches[ 9] aka Swatch.BlueSky   ": {
-          "bg": "Lc=7;           #2E4052   | hsl( 210  28%  25%) | oklch(0.36 0.04 249 )",
-          "fg": "Lc=58;          #ACC0D6   | hsl( 211  34%  76%) | oklch(0.8  0.04 251 )",
+          "bg": "Lc=7;           #2B4052   | hsl( 208  31%  25%) | oklch(0.36 0.04 245 )",
+          "fg": "Lc=58;          #A7C0D6   | hsl( 208  36%  75%) | oklch(0.8  0.04 245 )",
         },
         "swatches[10] aka Swatch.Turquoise ": {
-          "bg": "Lc=9;           #2C4846   | hsl( 176  24%  23%) | oklch(0.38 0.03 190 )",
-          "fg": "Lc=60;          #A9CBC7   | hsl( 173  25%  73%) | oklch(0.82 0.04 188 )",
+          "bg": "Lc=8;           #284849   | hsl( 182  29%  22%) | oklch(0.38 0.04 198 )",
+          "fg": "Lc=60;          #A3CBCA   | hsl( 179  28%  72%) | oklch(0.81 0.04 194 )",
         },
         "swatches[11] aka Swatch.GreenDark ": {
-          "bg": "Lc=4;           #253931   | hsl( 156  21%  18%) | oklch(0.32 0.03 168 )",
-          "fg": "Lc=54;          #A0B7AB   | hsl( 149  14%  67%) | oklch(0.76 0.03 163 )",
+          "bg": "Lc=4;           #213B34   | hsl( 164  28%  18%) | oklch(0.33 0.03 175 )",
+          "fg": "Lc=54;          #9BB9AE   | hsl( 158  18%  67%) | oklch(0.76 0.04 171 )",
         },
         "swatches[12] aka Swatch.Green     ": {
-          "bg": "Lc=7;           #31422B   | hsl( 104  21%  21%) | oklch(0.36 0.04 138 )",
-          "fg": "Lc=58;          #B0C3A2   | hsl(  95  22%  70%) | oklch(0.79 0.05 132 )",
+          "bg": "Lc=7;           #30422A   | hsl( 105  22%  21%) | oklch(0.36 0.05 138 )",
+          "fg": "Lc=58;          #AEC3A1   | hsl(  97  22%  70%) | oklch(0.79 0.05 133 )",
         },
         "swatches[13] aka Swatch.GreenLight": {
-          "bg": "Lc=9;           #3F472B   | hsl(  77  25%  22%) | oklch(0.38 0.05 122 )",
-          "fg": "Lc=61;          #C2CAA3   | hsl(  72  27%  72%) | oklch(0.82 0.05 117 )",
+          "bg": "Lc=9;           #3E482B   | hsl(  81  25%  23%) | oklch(0.38 0.05 124 )",
+          "fg": "Lc=61;          #C1CAA2   | hsl(  73  27%  71%) | oklch(0.82 0.05 118 )",
         },
         "swatches[14] aka Swatch.Yellow    ": {
-          "bg": "Lc=10;          #584324   | hsl(  36  42%  24%) | oklch(0.4  0.05  76 )",
-          "fg": "Lc=62;          #E3C499   | hsl(  35  57%  75%) | oklch(0.84 0.07  76 )",
+          "bg": "Lc=10;          #594222   | hsl(  35  45%  24%) | oklch(0.4  0.06  74 )",
+          "fg": "Lc=61;          #E4C397   | hsl(  34  59%  74%) | oklch(0.83 0.07  75 )",
         },
         "swatches[15] aka Swatch.Orange    ": {
           "bg": "Lc=5;           #552E20   | hsl(  16  45%  23%) | oklch(0.35 0.06  40 )",
           "fg": "Lc=54;          #DFA894   | hsl(  16  54%  73%) | oklch(0.78 0.07  41 )",
         },
         "swatches[16] aka Swatch.Brown     ": {
-          "bg": "Lc=2;           #402921   | hsl(  15  32%  19%) | oklch(0.31 0.04  40 )",
-          "fg": "Lc=51;          #C3A295   | hsl(  17  28%  67%) | oklch(0.74 0.04  43 )",
+          "bg": "Lc=2;           #422920   | hsl(  16  35%  19%) | oklch(0.31 0.04  41 )",
+          "fg": "Lc=51;          #C6A193   | hsl(  16  31%  68%) | oklch(0.74 0.05  42 )",
         },
       }
     `);
@@ -133,8 +133,8 @@ describe("enum over painted card surface = color coding (bug#14178 worst case)",
           "fg": "Lc=30;          #867F7C   | hsl(  18   4%  51%) | oklch(0.6  0.01  45 )",
         },
         "CMYK Cyan   ": {
-          "bg": "Lc=11;          #275A56   | hsl( 175  40%  25%) | oklch(0.43 0.06 188 )",
-          "fg": "Lc=66;          #A2E3DC   | hsl( 174  54%  76%) | oklch(0.87 0.07 188 )",
+          "bg": "Lc=12;          #255B57   | hsl( 176  42%  25%) | oklch(0.43 0.06 189 )",
+          "fg": "Lc=66;          #9FE4DD   | hsl( 174  56%  76%) | oklch(0.87 0.07 188 )",
         },
         "CMYK Magenta": {
           "bg": "Lc=5;           #5D2759   | hsl( 304  41%  26%) | oklch(0.37 0.1  330 )",
@@ -153,8 +153,8 @@ describe("enum over painted card surface = color coding (bug#14178 worst case)",
           "fg": "Lc=68;          #E2D5D0   | hsl(  17  24%  85%) | oklch(0.88 0.02  42 )",
         },
         "Noti yellow ": {
-          "bg": "Lc=11;          #5B533F   | hsl(  43  18%  30%) | oklch(0.44 0.03  89 )",
-          "fg": "Lc=68;          #E4DACA   | hsl(  37  33%  84%) | oklch(0.89 0.02  80 )",
+          "bg": "Lc=12;          #5C543F   | hsl(  43  19%  30%) | oklch(0.45 0.03  90 )",
+          "fg": "Lc=68;          #E5DAC9   | hsl(  36  35%  84%) | oklch(0.89 0.03  79 )",
         },
         "RGB  Blue   ": {
           "bg": "Lc=2;           #21285E   | hsl( 233  48%  25%) | oklch(0.3  0.1  274 )",
@@ -198,47 +198,47 @@ describe("enum over painted card surface = color coding (bug#14178 worst case)",
         },
         "swatches[ 6] aka Swatch.Violet    ": {
           "bg": "Lc=2;           #382B47   | hsl( 268  25%  22%) | oklch(0.32 0.05 305 )",
-          "fg": "Lc=46;          #AF9ABD   | hsl( 276  21%  67%) | oklch(0.72 0.06 312 )",
+          "fg": "Lc=46;          #AF9ABE   | hsl( 275  22%  67%) | oklch(0.72 0.06 311 )",
         },
         "swatches[ 7] aka Swatch.BlueDark  ": {
-          "bg": "Lc=2;           #2C2F48   | hsl( 234  24%  23%) | oklch(0.31 0.04 278 )",
-          "fg": "Lc=48;          #A2A2C2   | hsl( 240  21%  70%) | oklch(0.72 0.05 285 )",
+          "bg": "Lc=2;           #2C2F49   | hsl( 234  25%  23%) | oklch(0.31 0.05 278 )",
+          "fg": "Lc=48;          #A1A2C2   | hsl( 238  21%  70%) | oklch(0.72 0.05 284 )",
         },
         "swatches[ 8] aka Swatch.Blue      ": {
           "bg": "Lc=3;           #2A3651   | hsl( 222  32%  24%) | oklch(0.34 0.05 265 )",
           "fg": "Lc=55;          #A6B3D6   | hsl( 224  37%  75%) | oklch(0.77 0.05 269 )",
         },
         "swatches[ 9] aka Swatch.BlueSky   ": {
-          "bg": "Lc=5;           #2E4052   | hsl( 210  28%  25%) | oklch(0.36 0.04 249 )",
-          "fg": "Lc=58;          #ACC0D6   | hsl( 211  34%  76%) | oklch(0.8  0.04 251 )",
+          "bg": "Lc=5;           #2B4052   | hsl( 208  31%  25%) | oklch(0.36 0.04 245 )",
+          "fg": "Lc=58;          #A7C0D6   | hsl( 208  36%  75%) | oklch(0.8  0.04 245 )",
         },
         "swatches[10] aka Swatch.Turquoise ": {
-          "bg": "Lc=7;           #2C4846   | hsl( 176  24%  23%) | oklch(0.38 0.03 190 )",
-          "fg": "Lc=60;          #A9CBC7   | hsl( 173  25%  73%) | oklch(0.82 0.04 188 )",
+          "bg": "Lc=7;           #284849   | hsl( 182  29%  22%) | oklch(0.38 0.04 198 )",
+          "fg": "Lc=60;          #A3CBCA   | hsl( 179  28%  72%) | oklch(0.81 0.04 194 )",
         },
         "swatches[11] aka Swatch.GreenDark ": {
-          "bg": "Lc=3;           #253931   | hsl( 156  21%  18%) | oklch(0.32 0.03 168 )",
-          "fg": "Lc=54;          #A0B7AB   | hsl( 149  14%  67%) | oklch(0.76 0.03 163 )",
+          "bg": "Lc=3;           #213B34   | hsl( 164  28%  18%) | oklch(0.33 0.03 175 )",
+          "fg": "Lc=54;          #9BB9AE   | hsl( 158  18%  67%) | oklch(0.76 0.04 171 )",
         },
         "swatches[12] aka Swatch.Green     ": {
-          "bg": "Lc=5;           #31422B   | hsl( 104  21%  21%) | oklch(0.36 0.04 138 )",
-          "fg": "Lc=58;          #B0C3A2   | hsl(  95  22%  70%) | oklch(0.79 0.05 132 )",
+          "bg": "Lc=5;           #30422A   | hsl( 105  22%  21%) | oklch(0.36 0.05 138 )",
+          "fg": "Lc=58;          #AEC3A1   | hsl(  97  22%  70%) | oklch(0.79 0.05 133 )",
         },
         "swatches[13] aka Swatch.GreenLight": {
-          "bg": "Lc=7;           #3F472B   | hsl(  77  25%  22%) | oklch(0.38 0.05 122 )",
-          "fg": "Lc=61;          #C2CAA3   | hsl(  72  27%  72%) | oklch(0.82 0.05 117 )",
+          "bg": "Lc=7;           #3E482B   | hsl(  81  25%  23%) | oklch(0.38 0.05 124 )",
+          "fg": "Lc=61;          #C1CAA2   | hsl(  73  27%  71%) | oklch(0.82 0.05 118 )",
         },
         "swatches[14] aka Swatch.Yellow    ": {
-          "bg": "Lc=8;           #584324   | hsl(  36  42%  24%) | oklch(0.4  0.05  76 )",
-          "fg": "Lc=62;          #E3C499   | hsl(  35  57%  75%) | oklch(0.84 0.07  76 )",
+          "bg": "Lc=8;           #594222   | hsl(  35  45%  24%) | oklch(0.4  0.06  74 )",
+          "fg": "Lc=61;          #E4C397   | hsl(  34  59%  74%) | oklch(0.83 0.07  75 )",
         },
         "swatches[15] aka Swatch.Orange    ": {
           "bg": "Lc=4;           #552E20   | hsl(  16  45%  23%) | oklch(0.35 0.06  40 )",
           "fg": "Lc=54;          #DFA894   | hsl(  16  54%  73%) | oklch(0.78 0.07  41 )",
         },
         "swatches[16] aka Swatch.Brown     ": {
-          "bg": "Lc=2;           #432C24   | hsl(  15  30%  20%) | oklch(0.32 0.04  40 )",
-          "fg": "Lc=50;          #C3A295   | hsl(  17  28%  67%) | oklch(0.74 0.04  43 )",
+          "bg": "Lc=2;           #452B22   | hsl(  15  34%  20%) | oklch(0.32 0.04  40 )",
+          "fg": "Lc=50;          #C6A193   | hsl(  16  31%  68%) | oklch(0.74 0.05  42 )",
         },
       }
     `);
@@ -254,8 +254,8 @@ describe("enum over same-color card (extreme experiment)", () => {
           "fg": "Lc=30;          #867F7C   | hsl(  18   4%  51%) | oklch(0.6  0.01  45 )",
         },
         "CMYK Cyan   ": {
-          "bg": "Lc=73;          #275A56   | hsl( 175  40%  25%) | oklch(0.43 0.06 188 )",
-          "fg": "Lc=66;          #A2E3DC   | hsl( 174  54%  76%) | oklch(0.87 0.07 188 )",
+          "bg": "Lc=72;          #255B57   | hsl( 176  42%  25%) | oklch(0.43 0.06 189 )",
+          "fg": "Lc=66;          #9FE4DD   | hsl( 174  56%  76%) | oklch(0.87 0.07 188 )",
         },
         "CMYK Magenta": {
           "bg": "Lc=38;          #5D2759   | hsl( 304  41%  26%) | oklch(0.37 0.1  330 )",
@@ -274,8 +274,8 @@ describe("enum over same-color card (extreme experiment)", () => {
           "fg": "Lc=68;          #E2D5D0   | hsl(  17  24%  85%) | oklch(0.88 0.02  42 )",
         },
         "Noti yellow ": {
-          "bg": "Lc=70;          #5B533F   | hsl(  43  18%  30%) | oklch(0.44 0.03  89 )",
-          "fg": "Lc=68;          #E4DACA   | hsl(  37  33%  84%) | oklch(0.89 0.02  80 )",
+          "bg": "Lc=70;          #5C543F   | hsl(  43  19%  30%) | oklch(0.45 0.03  90 )",
+          "fg": "Lc=68;          #E5DAC9   | hsl(  36  35%  84%) | oklch(0.89 0.03  79 )",
         },
         "RGB  Blue   ": {
           "bg": "Lc=12;          #21285E   | hsl( 233  48%  25%) | oklch(0.3  0.1  274 )",
@@ -319,47 +319,47 @@ describe("enum over same-color card (extreme experiment)", () => {
         },
         "swatches[ 6] aka Swatch.Violet    ": {
           "bg": "Lc=13;          #382B47   | hsl( 268  25%  22%) | oklch(0.32 0.05 305 )",
-          "fg": "Lc=46;          #AF9ABD   | hsl( 276  21%  67%) | oklch(0.72 0.06 312 )",
+          "fg": "Lc=46;          #AF9ABE   | hsl( 275  22%  67%) | oklch(0.72 0.06 311 )",
         },
         "swatches[ 7] aka Swatch.BlueDark  ": {
-          "bg": "Lc=14;          #2C2F48   | hsl( 234  24%  23%) | oklch(0.31 0.04 278 )",
-          "fg": "Lc=48;          #A2A2C2   | hsl( 240  21%  70%) | oklch(0.72 0.05 285 )",
+          "bg": "Lc=14;          #2C2F49   | hsl( 234  25%  23%) | oklch(0.31 0.05 278 )",
+          "fg": "Lc=48;          #A1A2C2   | hsl( 238  21%  70%) | oklch(0.72 0.05 284 )",
         },
         "swatches[ 8] aka Swatch.Blue      ": {
           "bg": "Lc=28;          #2A3651   | hsl( 222  32%  24%) | oklch(0.34 0.05 265 )",
           "fg": "Lc=55;          #A6B3D6   | hsl( 224  37%  75%) | oklch(0.77 0.05 269 )",
         },
         "swatches[ 9] aka Swatch.BlueSky   ": {
-          "bg": "Lc=37;          #2E4052   | hsl( 210  28%  25%) | oklch(0.36 0.04 249 )",
-          "fg": "Lc=58;          #ACC0D6   | hsl( 211  34%  76%) | oklch(0.8  0.04 251 )",
+          "bg": "Lc=37;          #2B4052   | hsl( 208  31%  25%) | oklch(0.36 0.04 245 )",
+          "fg": "Lc=58;          #A7C0D6   | hsl( 208  36%  75%) | oklch(0.8  0.04 245 )",
         },
         "swatches[10] aka Swatch.Turquoise ": {
-          "bg": "Lc=47;          #2C4846   | hsl( 176  24%  23%) | oklch(0.38 0.03 190 )",
-          "fg": "Lc=60;          #A9CBC7   | hsl( 173  25%  73%) | oklch(0.82 0.04 188 )",
+          "bg": "Lc=47;          #284849   | hsl( 182  29%  22%) | oklch(0.38 0.04 198 )",
+          "fg": "Lc=60;          #A3CBCA   | hsl( 179  28%  72%) | oklch(0.81 0.04 194 )",
         },
         "swatches[11] aka Swatch.GreenDark ": {
-          "bg": "Lc=33;          #253931   | hsl( 156  21%  18%) | oklch(0.32 0.03 168 )",
-          "fg": "Lc=54;          #A0B7AB   | hsl( 149  14%  67%) | oklch(0.76 0.03 163 )",
+          "bg": "Lc=32;          #213B34   | hsl( 164  28%  18%) | oklch(0.33 0.03 175 )",
+          "fg": "Lc=54;          #9BB9AE   | hsl( 158  18%  67%) | oklch(0.76 0.04 171 )",
         },
         "swatches[12] aka Swatch.Green     ": {
-          "bg": "Lc=40;          #31422B   | hsl( 104  21%  21%) | oklch(0.36 0.04 138 )",
-          "fg": "Lc=58;          #B0C3A2   | hsl(  95  22%  70%) | oklch(0.79 0.05 132 )",
+          "bg": "Lc=40;          #30422A   | hsl( 105  22%  21%) | oklch(0.36 0.05 138 )",
+          "fg": "Lc=58;          #AEC3A1   | hsl(  97  22%  70%) | oklch(0.79 0.05 133 )",
         },
         "swatches[13] aka Swatch.GreenLight": {
-          "bg": "Lc=50;          #3F472B   | hsl(  77  25%  22%) | oklch(0.38 0.05 122 )",
-          "fg": "Lc=61;          #C2CAA3   | hsl(  72  27%  72%) | oklch(0.82 0.05 117 )",
+          "bg": "Lc=50;          #3E482B   | hsl(  81  25%  23%) | oklch(0.38 0.05 124 )",
+          "fg": "Lc=61;          #C1CAA2   | hsl(  73  27%  71%) | oklch(0.82 0.05 118 )",
         },
         "swatches[14] aka Swatch.Yellow    ": {
-          "bg": "Lc=50;          #584324   | hsl(  36  42%  24%) | oklch(0.4  0.05  76 )",
-          "fg": "Lc=62;          #E3C499   | hsl(  35  57%  75%) | oklch(0.84 0.07  76 )",
+          "bg": "Lc=51;          #594222   | hsl(  35  45%  24%) | oklch(0.4  0.06  74 )",
+          "fg": "Lc=61;          #E4C397   | hsl(  34  59%  74%) | oklch(0.83 0.07  75 )",
         },
         "swatches[15] aka Swatch.Orange    ": {
           "bg": "Lc=36;          #552E20   | hsl(  16  45%  23%) | oklch(0.35 0.06  40 )",
           "fg": "Lc=54;          #DFA894   | hsl(  16  54%  73%) | oklch(0.78 0.07  41 )",
         },
         "swatches[16] aka Swatch.Brown     ": {
-          "bg": "Lc=21;          #432C24   | hsl(  15  30%  20%) | oklch(0.32 0.04  40 )",
-          "fg": "Lc=50;          #C3A295   | hsl(  17  28%  67%) | oklch(0.74 0.04  43 )",
+          "bg": "Lc=21;          #452B22   | hsl(  15  34%  20%) | oklch(0.32 0.04  40 )",
+          "fg": "Lc=50;          #C6A193   | hsl(  16  31%  68%) | oklch(0.74 0.05  42 )",
         },
       }
     `);