@fibery/ui-kit 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +14 -8
  3. package/src/actions-menu/actions-menu-item.tsx +1 -0
  4. package/src/actions-menu/actions-menu.tsx +1 -3
  5. package/src/antd/ant-modal.tsx +156 -7
  6. package/src/antd/ant-upload.tsx +285 -27
  7. package/src/antd/auto-complete.tsx +145 -0
  8. package/src/antd/auto-width-transparent-textarea.tsx +9 -2
  9. package/src/antd/global-overrides.ts +352 -0
  10. package/src/antd/index.tsx +3 -2
  11. package/src/antd/input-number.tsx +97 -11
  12. package/src/antd/input.tsx +127 -8
  13. package/src/antd/styles.ts +90 -32
  14. package/src/antd/tabs.tsx +139 -27
  15. package/src/avatar.tsx +2 -56
  16. package/src/color-adjuster.ts +24 -1
  17. package/src/count-badge.tsx +10 -1
  18. package/src/date-picker/date-range-picker.tsx +6 -6
  19. package/src/date-picker/single-date-picker.tsx +2 -3
  20. package/src/date-picker/types.ts +1 -1
  21. package/src/date-picker/with-popup-control.tsx +3 -9
  22. package/src/design-system/colors-callout.warm-dark.test.ts +22 -22
  23. package/src/design-system/colors-callout.warm-light.test.ts +19 -19
  24. package/src/design-system/colors-css.ts +1 -1
  25. package/src/design-system/colors-enum.dark.warm.test.ts +63 -63
  26. package/src/design-system/colors-enum.light.warm.test.ts +54 -54
  27. package/src/design-system/colors-highlight.warm-dark.test.ts +21 -21
  28. package/src/design-system/colors-highlight.warm-light.test.ts +21 -21
  29. package/src/design-system/colors.ts +1 -1
  30. package/src/design-system/fns.badge.dark.warm.test.ts +34 -34
  31. package/src/design-system/fns.badge.light.warm.test.ts +31 -31
  32. package/src/design-system/fns.deneutralize.test.ts +44 -0
  33. package/src/design-system/fns.icon.dark.warm.test.ts +21 -21
  34. package/src/design-system/fns.icon.light.warm.test.ts +17 -17
  35. package/src/design-system/fns.icon.ts +21 -13
  36. package/src/design-system/fns.ts +27 -3
  37. package/src/design-system/typography.ts +1 -1
  38. package/src/design-system.ts +1 -1
  39. package/src/fibermoji-placeholder.tsx +2 -3
  40. package/src/icons/icon.tsx +11 -1
  41. package/src/icons/types.ts +1 -1
  42. package/src/layout-styles.ts +5 -1
  43. package/src/link-input/components/ant-text-area-with-custom-read-state.tsx +2 -1
  44. package/src/media-query-utils.ts +4 -13
  45. package/src/palettes/inspect.defs.colors.warm-arch.test.ts +137 -137
  46. package/src/palettes/inspect.defs.colors.warm-user.test.ts +137 -137
  47. package/src/palettes/warm.ts +2 -0
  48. package/src/root-theme-provider.test.tsx +1 -1
  49. package/src/select/index.tsx +3 -3
  50. package/src/select/select-in-popover.tsx +34 -51
  51. package/src/select/select.tsx +2 -2
  52. package/src/theme-provider.test.tsx +1 -1
  53. package/src/theme-provider.tsx +3 -9
  54. package/src/theme-snapshots.test.ts +9 -13
  55. package/src/{theming/build.ts → theming.build.ts} +6 -9
  56. package/src/{theming/theming-fibery.snapshot.css → theming.generated.css} +52 -52
  57. package/src/{theming/theming-fibery.snapshot.ts → theming.generated.ts} +52 -52
  58. package/src/{themed-ink.tsx → type-label.tsx} +2 -5
  59. package/src/antd/auto-complete.d.ts +0 -2
  60. package/src/antd/auto-complete.ts +0 -37
  61. package/src/antd/tabs.d.ts +0 -5
  62. package/src/theming/index.ts +0 -20
  63. package/src/theming/theming-vzdbery.snapshot.css +0 -2001
  64. package/src/theming/theming-vzdbery.snapshot.ts +0 -2519
package/src/date-picker/date-range-picker.tsx CHANGED
@@ -8,7 +8,7 @@ import {focusable} from "tabbable";
8
8
  import "react-day-picker/dist/style.css";
9
9
  import {space} from "../design-system";
10
10
  import {EmptyValue} from "../empty-value";
11
- import {Popover} from "../popover";
11
+ import {Popover, type PopoverContentProps} from "../popover";
12
12
  import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
13
13
  import {FakeDateInputWrapper} from "./fake-date-input";
14
14
  import type {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
@@ -17,13 +17,12 @@ import {withPopupControl} from "./with-popup-control";
17
17
 
18
18
  export const DateRangePicker = forwardRef<
19
19
  {setValue: (value: string) => void},
20
- DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps
20
+ DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps & Pick<PopoverContentProps, "offset">
21
21
  >((props, ref) => {
22
22
  const {
23
23
  title,
24
24
  open,
25
- onOpen,
26
- onClose,
25
+ onOpenChange,
27
26
  children,
28
27
  value,
29
28
  disabled = false,
@@ -33,6 +32,7 @@ export const DateRangePicker = forwardRef<
33
32
  timeFormat,
34
33
  dateTimeFormat,
35
34
  placeholder,
35
+ offset = [0, space.s6],
36
36
  onKeyDown,
37
37
  } = props;
38
38
 
@@ -90,7 +90,7 @@ export const DateRangePicker = forwardRef<
90
90
 
91
91
  return (
92
92
  <div>
93
- <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
93
+ <Popover.Root open={open} onOpenChange={onOpenChange}>
94
94
  <Popover.Trigger asChild triggerEvent="click">
95
95
  <div ref={fakeWrapperRef} onClick={stopPropagation}>
96
96
  {pickerValue}
@@ -99,7 +99,7 @@ export const DateRangePicker = forwardRef<
99
99
  <Popover.Portal>
100
100
  <Popover.Content
101
101
  title={title}
102
- offset={[0, space.s6]}
102
+ offset={offset}
103
103
  supportMobile
104
104
  placement="bottom-start"
105
105
  popupContainerClassName={css`
package/src/date-picker/single-date-picker.tsx CHANGED
@@ -216,8 +216,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
216
216
  const {
217
217
  title,
218
218
  open,
219
- onOpen,
220
- onClose,
219
+ onOpenChange,
221
220
  children,
222
221
  value,
223
222
  disabled = false,
@@ -254,7 +253,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
254
253
  }
255
254
 
256
255
  return (
257
- <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
256
+ <Popover.Root open={open} onOpenChange={onOpenChange}>
258
257
  <Popover.Trigger>
259
258
  <div ref={fakeWrapperRef} onClick={stopPropagation}>
260
259
  {pickerValue}
package/src/date-picker/types.ts CHANGED
@@ -48,7 +48,7 @@ export type NativeDateRangePickerProps = {
48
48
  onChange: (date: [Date | null, Date | null]) => void;
49
49
  };
50
50
 
51
- export type ControlledDatePickerProps = {open: boolean; onOpen: () => void; onClose: () => void};
51
+ export type ControlledDatePickerProps = {open: boolean; onOpenChange: (open: boolean) => void};
52
52
 
53
53
  export type SingleDatePickerPopoverContentProps<IsRelativeDate extends boolean = false> = DatePickerCommonProps &
54
54
  MomentSingleDateProps<IsRelativeDate> & {
package/src/date-picker/with-popup-control.tsx CHANGED
@@ -13,15 +13,9 @@ export const withPopupControl = <P extends object>(Component: React.ComponentTyp
13
13
  const [open, setOpen] = useState(false);
14
14
  const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
15
15
 
16
- const onOpen = useCallback(() => {
16
+ const onOpenChange = useCallback((value: boolean) => {
17
17
  timeoutIdRef.current = setTimeout(() => {
18
- setOpen(true);
19
- }, 0);
20
- }, []);
21
-
22
- const onClose = useCallback(() => {
23
- timeoutIdRef.current = setTimeout(() => {
24
- setOpen(false);
18
+ setOpen(value);
25
19
  // Input needs to fire onBlur before unmounting
26
20
  }, 0);
27
21
  }, []);
@@ -56,7 +50,7 @@ export const withPopupControl = <P extends object>(Component: React.ComponentTyp
56
50
  onMouseDown={stopPropagation}
57
51
  onMouseUp={stopPropagation}
58
52
  >
59
- <Component {...props} open={open} onOpen={onOpen} onClose={onClose} />
53
+ <Component {...props} open={open} onOpenChange={onOpenChange} />
60
54
  </div>
61
55
  );
62
56
  };
package/src/design-system/colors-callout.warm-dark.test.ts CHANGED
@@ -8,12 +8,12 @@ describe("callout.bg", () => {
8
8
  expect(userColorChoices((c) => theme.fns.callout(c).bg)).toMatchInlineSnapshot(`
9
9
  {
10
10
  "CMYK Black ": "#342D29 | hsl( 22 12% 18%) | oklch(0.3 0.01 52 )",
11
- "CMYK Cyan ": "#275A56 | hsl( 175 40% 25%) | oklch(0.43 0.06 188 )",
11
+ "CMYK Cyan ": "#255B57 | hsl( 176 42% 25%) | oklch(0.43 0.06 189 )",
12
12
  "CMYK Magenta": "#5D2759 | hsl( 304 41% 26%) | oklch(0.37 0.1 330 )",
13
13
  "CMYK Yellow ": "#5E5C14 | hsl( 58 65% 22%) | oklch(0.46 0.09 108 )",
14
14
  "Noti green ": "#545450 | hsl( 60 2% 32%) | oklch(0.44 0.01 107 )",
15
15
  "Noti red ": "#57504E | hsl( 13 5% 32%) | oklch(0.44 0.01 37 )",
16
- "Noti yellow ": "#595348 | hsl( 39 11% 32%) | oklch(0.44 0.02 83 )",
16
+ "Noti yellow ": "#595448 | hsl( 42 11% 32%) | oklch(0.45 0.02 88 )",
17
17
  "RGB Blue ": "#1E2568 | hsl( 234 55% 26%) | oklch(0.3 0.12 273 )",
18
18
  "RGB Green ": "#2D5A1C | hsl( 104 53% 23%) | oklch(0.42 0.1 138 )",
19
19
  "RGB Red ": "#56211C | hsl( 5 51% 22%) | oklch(0.33 0.08 28 )",
@@ -24,17 +24,17 @@ describe("callout.bg", () => {
24
24
  "swatches[ 3] aka Swatch.Red ": "#4C1F1D | hsl( 3 45% 21%) | oklch(0.3 0.07 25 )",
25
25
  "swatches[ 4] aka Swatch.Magenta ": "#502330 | hsl( 343 39% 23%) | oklch(0.32 0.07 3 )",
26
26
  "swatches[ 5] aka Swatch.Purple ": "#402540 | hsl( 300 27% 20%) | oklch(0.31 0.06 327 )",
27
- "swatches[ 6] aka Swatch.Violet ": "#352745 | hsl( 268 28% 21%) | oklch(0.3 0.06 305 )",
28
- "swatches[ 7] aka Swatch.BlueDark ": "#292C46 | hsl( 234 26% 22%) | oklch(0.3 0.05 278 )",
27
+ "swatches[ 6] aka Swatch.Violet ": "#362746 | hsl( 269 28% 21%) | oklch(0.3 0.06 306 )",
28
+ "swatches[ 7] aka Swatch.BlueDark ": "#292C47 | hsl( 234 27% 22%) | oklch(0.3 0.05 278 )",
29
29
  "swatches[ 8] aka Swatch.Blue ": "#2A3651 | hsl( 222 32% 24%) | oklch(0.34 0.05 265 )",
30
- "swatches[ 9] aka Swatch.BlueSky ": "#2E4052 | hsl( 210 28% 25%) | oklch(0.36 0.04 249 )",
31
- "swatches[10] aka Swatch.Turquoise ": "#2C4846 | hsl( 176 24% 23%) | oklch(0.38 0.03 190 )",
32
- "swatches[11] aka Swatch.GreenDark ": "#253931 | hsl( 156 21% 18%) | oklch(0.32 0.03 168 )",
33
- "swatches[12] aka Swatch.Green ": "#31422B | hsl( 104 21% 21%) | oklch(0.36 0.04 138 )",
34
- "swatches[13] aka Swatch.GreenLight": "#3F472B | hsl( 77 25% 22%) | oklch(0.38 0.05 122 )",
35
- "swatches[14] aka Swatch.Yellow ": "#584324 | hsl( 36 42% 24%) | oklch(0.4 0.05 76 )",
30
+ "swatches[ 9] aka Swatch.BlueSky ": "#2B4052 | hsl( 208 31% 25%) | oklch(0.36 0.04 245 )",
31
+ "swatches[10] aka Swatch.Turquoise ": "#284848 | hsl( 180 29% 22%) | oklch(0.38 0.04 196 )",
32
+ "swatches[11] aka Swatch.GreenDark ": "#213B34 | hsl( 164 28% 18%) | oklch(0.33 0.03 175 )",
33
+ "swatches[12] aka Swatch.Green ": "#30422A | hsl( 105 22% 21%) | oklch(0.36 0.05 138 )",
34
+ "swatches[13] aka Swatch.GreenLight": "#3E482B | hsl( 81 25% 23%) | oklch(0.38 0.05 124 )",
35
+ "swatches[14] aka Swatch.Yellow ": "#594222 | hsl( 35 45% 24%) | oklch(0.4 0.06 74 )",
36
36
  "swatches[15] aka Swatch.Orange ": "#552E20 | hsl( 16 45% 23%) | oklch(0.35 0.06 40 )",
37
- "swatches[16] aka Swatch.Brown ": "#402921 | hsl( 15 32% 19%) | oklch(0.31 0.04 40 )",
37
+ "swatches[16] aka Swatch.Brown ": "#422920 | hsl( 16 35% 19%) | oklch(0.31 0.04 41 )",
38
38
  }
39
39
  `);
40
40
  });
@@ -45,12 +45,12 @@ describe("callout.fg", () => {
45
45
  expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
46
46
  {
47
47
  "CMYK Black ": "#988379 | hsl( 19 13% 54%) | oklch(0.63 0.03 47 )",
48
- "CMYK Cyan ": "#44EFE5 | hsl( 176 84% 60%) | oklch(0.87 0.14 189 )",
48
+ "CMYK Cyan ": "#3CF0E8 | hsl( 177 86% 59%) | oklch(0.87 0.14 190 )",
49
49
  "CMYK Magenta": "#EF4DEE | hsl( 300 84% 62%) | oklch(0.7 0.26 328 )",
50
50
  "CMYK Yellow ": "#F3F314 | hsl( 60 90% 52%) | oklch(0.93 0.2 110 )",
51
51
  "Noti green ": "#D1D9D3 | hsl( 135 10% 84%) | oklch(0.88 0.01 154 )",
52
52
  "Noti red ": "#DCCDCA | hsl( 10 20% 83%) | oklch(0.86 0.02 31 )",
53
- "Noti yellow ": "#E1D8BA | hsl( 46 39% 81%) | oklch(0.88 0.04 93 )",
53
+ "Noti yellow ": "#E2D9B8 | hsl( 47 42% 80%) | oklch(0.88 0.04 95 )",
54
54
  "RGB Blue ": "#6C7DF0 | hsl( 232 81% 68%) | oklch(0.63 0.17 274 )",
55
55
  "RGB Green ": "#57ED2F | hsl( 107 84% 56%) | oklch(0.83 0.25 140 )",
56
56
  "RGB Red ": "#E05D53 | hsl( 4 69% 60%) | oklch(0.64 0.17 27 )",
@@ -61,17 +61,17 @@ describe("callout.fg", () => {
61
61
  "swatches[ 3] aka Swatch.Red ": "#D76460 | hsl( 2 60% 61%) | oklch(0.64 0.15 24 )",
62
62
  "swatches[ 4] aka Swatch.Magenta ": "#CF6487 | hsl( 340 53% 60%) | oklch(0.64 0.14 1 )",
63
63
  "swatches[ 5] aka Swatch.Purple ": "#B46CC0 | hsl( 291 40% 59%) | oklch(0.64 0.14 322 )",
64
- "swatches[ 6] aka Swatch.Violet ": "#9679C8 | hsl( 262 42% 63%) | oklch(0.64 0.12 300 )",
65
- "swatches[ 7] aka Swatch.BlueDark ": "#7583C8 | hsl( 230 43% 62%) | oklch(0.63 0.11 274 )",
64
+ "swatches[ 6] aka Swatch.Violet ": "#9579C9 | hsl( 261 43% 63%) | oklch(0.63 0.12 299 )",
65
+ "swatches[ 7] aka Swatch.BlueDark ": "#7583CA | hsl( 230 45% 63%) | oklch(0.63 0.11 274 )",
66
66
  "swatches[ 8] aka Swatch.Blue ": "#5A86DA | hsl( 219 63% 60%) | oklch(0.63 0.14 262 )",
67
- "swatches[ 9] aka Swatch.BlueSky ": "#5A9CD7 | hsl( 208 61% 60%) | oklch(0.67 0.11 247 )",
68
- "swatches[10] aka Swatch.Turquoise ": "#54B5B4 | hsl( 179 40% 52%) | oklch(0.72 0.09 194 )",
69
- "swatches[11] aka Swatch.GreenDark ": "#44957F | hsl( 164 37% 43%) | oklch(0.61 0.09 173 )",
70
- "swatches[12] aka Swatch.Green ": "#64A25C | hsl( 113 28% 50%) | oklch(0.65 0.12 142 )",
71
- "swatches[13] aka Swatch.GreenLight": "#8EB25E | hsl( 86 35% 53%) | oklch(0.72 0.12 128 )",
72
- "swatches[14] aka Swatch.Yellow ": "#DEA446 | hsl( 37 70% 57%) | oklch(0.76 0.13 76 )",
67
+ "swatches[ 9] aka Swatch.BlueSky ": "#4F9BD8 | hsl( 207 64% 58%) | oklch(0.67 0.12 245 )",
68
+ "swatches[10] aka Swatch.Turquoise ": "#46B6BA | hsl( 182 46% 50%) | oklch(0.71 0.1 198 )",
69
+ "swatches[11] aka Swatch.GreenDark ": "#369683 | hsl( 168 47% 40%) | oklch(0.61 0.09 177 )",
70
+ "swatches[12] aka Swatch.Green ": "#60A359 | hsl( 114 29% 49%) | oklch(0.65 0.13 142 )",
71
+ "swatches[13] aka Swatch.GreenLight": "#8DB45B | hsl( 86 37% 53%) | oklch(0.72 0.13 129 )",
72
+ "swatches[14] aka Swatch.Yellow ": "#E1A242 | hsl( 36 73% 57%) | oklch(0.76 0.13 74 )",
73
73
  "swatches[15] aka Swatch.Orange ": "#D66741 | hsl( 15 65% 55%) | oklch(0.64 0.15 39 )",
74
- "swatches[16] aka Swatch.Brown ": "#BB765D | hsl( 16 41% 55%) | oklch(0.63 0.09 41 )",
74
+ "swatches[16] aka Swatch.Brown ": "#C17359 | hsl( 15 46% 55%) | oklch(0.63 0.11 39 )",
75
75
  }
76
76
  `);
77
77
  });
package/src/design-system/colors-callout.warm-light.test.ts CHANGED
@@ -13,7 +13,7 @@ describe("callout.bg", () => {
13
13
  "CMYK Yellow ": "#F9F7DD | hsl( 56 70% 92%) | oklch(0.97 0.03 103 )",
14
14
  "Noti green ": "#F7F6F3 | hsl( 45 20% 96%) | oklch(0.97 0 91 )",
15
15
  "Noti red ": "#F8F5F2 | hsl( 30 30% 96%) | oklch(0.97 0.01 68 )",
16
- "Noti yellow ": "#F8F5F0 | hsl( 38 36% 96%) | oklch(0.97 0.01 81 )",
16
+ "Noti yellow ": "#F8F5EF | hsl( 40 39% 95%) | oklch(0.97 0.01 85 )",
17
17
  "RGB Blue ": "#E8E9F8 | hsl( 236 53% 94%) | oklch(0.94 0.02 283 )",
18
18
  "RGB Green ": "#EBFAE3 | hsl( 99 70% 94%) | oklch(0.97 0.03 134 )",
19
19
  "RGB Red ": "#FCEAE6 | hsl( 11 79% 95%) | oklch(0.95 0.02 33 )",
@@ -24,14 +24,14 @@ describe("callout.bg", () => {
24
24
  "swatches[ 3] aka Swatch.Red ": "#F8E9E6 | hsl( 10 56% 94%) | oklch(0.95 0.02 31 )",
25
25
  "swatches[ 4] aka Swatch.Magenta ": "#FAEAEC | hsl( 352 62% 95%) | oklch(0.95 0.02 9 )",
26
26
  "swatches[ 5] aka Swatch.Purple ": "#F5EBF2 | hsl( 318 33% 94%) | oklch(0.95 0.01 336 )",
27
- "swatches[ 6] aka Swatch.Violet ": "#F0EAF1 | hsl( 291 20% 93%) | oklch(0.94 0.01 321 )",
28
- "swatches[ 7] aka Swatch.BlueDark ": "#ECECF2 | hsl( 240 19% 94%) | oklch(0.94 0.01 286 )",
27
+ "swatches[ 6] aka Swatch.Violet ": "#F0EAF2 | hsl( 285 24% 93%) | oklch(0.94 0.01 318 )",
28
+ "swatches[ 7] aka Swatch.BlueDark ": "#ECECF3 | hsl( 240 23% 94%) | oklch(0.95 0.01 286 )",
29
29
  "swatches[ 8] aka Swatch.Blue ": "#EDF1F8 | hsl( 218 44% 95%) | oklch(0.96 0.01 262 )",
30
- "swatches[ 9] aka Swatch.BlueSky ": "#EFF4F8 | hsl( 207 39% 95%) | oklch(0.96 0.01 242 )",
31
- "swatches[10] aka Swatch.Turquoise ": "#EEF7F4 | hsl( 160 36% 95%) | oklch(0.97 0.01 174 )",
32
- "swatches[11] aka Swatch.GreenDark ": "#ECF2ED | hsl( 130 19% 94%) | oklch(0.96 0.01 151 )",
33
- "swatches[12] aka Swatch.Green ": "#F0F5EB | hsl( 90 33% 94%) | oklch(0.96 0.01 129 )",
34
- "swatches[13] aka Swatch.GreenLight": "#F4F6EB | hsl( 71 38% 94%) | oklch(0.97 0.01 115 )",
30
+ "swatches[ 9] aka Swatch.BlueSky ": "#EEF4F8 | hsl( 204 42% 95%) | oklch(0.96 0.01 237 )",
31
+ "swatches[10] aka Swatch.Turquoise ": "#EDF7F5 | hsl( 168 38% 95%) | oklch(0.97 0.01 183 )",
32
+ "swatches[11] aka Swatch.GreenDark ": "#EBF2EE | hsl( 146 21% 94%) | oklch(0.95 0.01 161 )",
33
+ "swatches[12] aka Swatch.Green ": "#EFF5EA | hsl( 93 35% 94%) | oklch(0.96 0.02 130 )",
34
+ "swatches[13] aka Swatch.GreenLight": "#F4F7EB | hsl( 75 43% 95%) | oklch(0.97 0.02 118 )",
35
35
  "swatches[14] aka Swatch.Yellow ": "#FDF5E8 | hsl( 37 84% 95%) | oklch(0.97 0.02 80 )",
36
36
  "swatches[15] aka Swatch.Orange ": "#FCEEE7 | hsl( 20 78% 95%) | oklch(0.96 0.02 49 )",
37
37
  "swatches[16] aka Swatch.Brown ": "#F5ECE7 | hsl( 21 41% 93%) | oklch(0.95 0.01 51 )",
@@ -45,12 +45,12 @@ describe("callout.fg", () => {
45
45
  expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
46
46
  {
47
47
  "CMYK Black ": "#0D0D0D | hsl(none 0% 5%) | oklch(0.16 0 none)",
48
- "CMYK Cyan ": "#05A59C | hsl( 177 94% 33%) | oklch(0.65 0.11 188 )",
48
+ "CMYK Cyan ": "#04A59E | hsl( 177 95% 33%) | oklch(0.65 0.11 189 )",
49
49
  "CMYK Magenta": "#F935F8 | hsl( 300 94% 59%) | oklch(0.7 0.29 328 )",
50
50
  "CMYK Yellow ": "#989900 | hsl( 60 100% 30%) | oklch(0.66 0.14 110 )",
51
51
  "Noti green ": "#7E9B85 | hsl( 134 13% 55%) | oklch(0.66 0.05 152 )",
52
52
  "Noti red ": "#B68980 | hsl( 10 27% 61%) | oklch(0.67 0.06 31 )",
53
- "Noti yellow ": "#AB9139 | hsl( 46 50% 45%) | oklch(0.66 0.11 93 )",
53
+ "Noti yellow ": "#AD9132 | hsl( 46 55% 44%) | oklch(0.66 0.12 92 )",
54
54
  "RGB Blue ": "#223BEB | hsl( 233 83% 53%) | oklch(0.48 0.26 267 )",
55
55
  "RGB Green ": "#29AA06 | hsl( 107 93% 35%) | oklch(0.64 0.21 141 )",
56
56
  "RGB Red ": "#E44438 | hsl( 4 76% 56%) | oklch(0.62 0.2 29 )",
@@ -61,17 +61,17 @@ describe("callout.fg", () => {
61
61
  "swatches[ 3] aka Swatch.Red ": "#BE3D39 | hsl( 2 54% 48%) | oklch(0.55 0.17 26 )",
62
62
  "swatches[ 4] aka Swatch.Magenta ": "#CF4C77 | hsl( 340 58% 55%) | oklch(0.6 0.17 3 )",
63
63
  "swatches[ 5] aka Swatch.Purple ": "#9F50AC | hsl( 292 37% 49%) | oklch(0.56 0.16 322 )",
64
- "swatches[ 6] aka Swatch.Violet ": "#6D4BA7 | hsl( 262 38% 47%) | oklch(0.49 0.14 298 )",
65
- "swatches[ 7] aka Swatch.BlueDark ": "#4E5FB3 | hsl( 230 40% 50%) | oklch(0.51 0.13 272 )",
64
+ "swatches[ 6] aka Swatch.Violet ": "#6D4BA9 | hsl( 262 39% 48%) | oklch(0.5 0.15 298 )",
65
+ "swatches[ 7] aka Swatch.BlueDark ": "#4C5EB4 | hsl( 230 41% 50%) | oklch(0.51 0.14 272 )",
66
66
  "swatches[ 8] aka Swatch.Blue ": "#5887E2 | hsl( 220 70% 62%) | oklch(0.63 0.15 262 )",
67
- "swatches[ 9] aka Swatch.BlueSky ": "#4B99DD | hsl( 208 68% 58%) | oklch(0.66 0.13 247 )",
68
- "swatches[10] aka Swatch.Turquoise ": "#40A2A1 | hsl( 179 43% 44%) | oklch(0.66 0.09 194 )",
69
- "swatches[11] aka Swatch.GreenDark ": "#49917D | hsl( 163 33% 43%) | oklch(0.6 0.08 173 )",
70
- "swatches[12] aka Swatch.Green ": "#61A358 | hsl( 113 30% 49%) | oklch(0.65 0.13 141 )",
71
- "swatches[13] aka Swatch.GreenLight": "#799F46 | hsl( 86 39% 45%) | oklch(0.65 0.13 129 )",
72
- "swatches[14] aka Swatch.Yellow ": "#C98619 | hsl( 37 78% 44%) | oklch(0.67 0.14 72 )",
67
+ "swatches[ 9] aka Swatch.BlueSky ": "#4299DF | hsl( 207 71% 57%) | oklch(0.66 0.13 246 )",
68
+ "swatches[10] aka Swatch.Turquoise ": "#37A2A6 | hsl( 182 50% 43%) | oklch(0.65 0.1 199 )",
69
+ "swatches[11] aka Swatch.GreenDark ": "#3D9583 | hsl( 168 42% 41%) | oklch(0.61 0.09 177 )",
70
+ "swatches[12] aka Swatch.Green ": "#5DA456 | hsl( 115 31% 49%) | oklch(0.65 0.13 142 )",
71
+ "swatches[13] aka Swatch.GreenLight": "#77A043 | hsl( 86 41% 45%) | oklch(0.66 0.13 129 )",
72
+ "swatches[14] aka Swatch.Yellow ": "#CC8416 | hsl( 36 81% 44%) | oklch(0.67 0.14 70 )",
73
73
  "swatches[15] aka Swatch.Orange ": "#E06D46 | hsl( 15 71% 58%) | oklch(0.66 0.15 39 )",
74
- "swatches[16] aka Swatch.Brown ": "#9D5E48 | hsl( 16 37% 45%) | oklch(0.55 0.09 40 )",
74
+ "swatches[16] aka Swatch.Brown ": "#A45C45 | hsl( 15 41% 46%) | oklch(0.55 0.1 38 )",
75
75
  }
76
76
  `);
77
77
  });
package/src/design-system/colors-css.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import {common} from "../palettes/common";
2
- import {themeVars} from "../theming";
2
+ import {themeVars} from "../theming.generated";
3
3
 
4
4
  export function getLinearGradient(backgroundColors: Array<string>): string {
5
5
  const parts = backgroundColors.flatMap((color, index, arr) => [
package/src/design-system/colors-enum.dark.warm.test.ts CHANGED
@@ -12,8 +12,8 @@ describe("enum over default surface = no color coding", () => {
12
12
  "fg": "Lc=30; #867F7C | hsl( 18 4% 51%) | oklch(0.6 0.01 45 )",
13
13
  },
14
14
  "CMYK Cyan ": {
15
- "bg": "Lc=14; #275A56 | hsl( 175 40% 25%) | oklch(0.43 0.06 188 )",
16
- "fg": "Lc=66; #A2E3DC | hsl( 174 54% 76%) | oklch(0.87 0.07 188 )",
15
+ "bg": "Lc=14; #255B57 | hsl( 176 42% 25%) | oklch(0.43 0.06 189 )",
16
+ "fg": "Lc=66; #9FE4DD | hsl( 174 56% 76%) | oklch(0.87 0.07 188 )",
17
17
  },
18
18
  "CMYK Magenta": {
19
19
  "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", () => {
32
32
  "fg": "Lc=68; #E2D5D0 | hsl( 17 24% 85%) | oklch(0.88 0.02 42 )",
33
33
  },
34
34
  "Noti yellow ": {
35
- "bg": "Lc=15; #5B533F | hsl( 43 18% 30%) | oklch(0.44 0.03 89 )",
36
- "fg": "Lc=68; #E4DACA | hsl( 37 33% 84%) | oklch(0.89 0.02 80 )",
35
+ "bg": "Lc=15; #5C543F | hsl( 43 19% 30%) | oklch(0.45 0.03 90 )",
36
+ "fg": "Lc=68; #E5DAC9 | hsl( 36 35% 84%) | oklch(0.89 0.03 79 )",
37
37
  },
38
38
  "RGB Blue ": {
39
39
  "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", () => {
77
77
  },
78
78
  "swatches[ 6] aka Swatch.Violet ": {
79
79
  "bg": "Lc=2; #352844 | hsl( 268 26% 21%) | oklch(0.3 0.05 305 )",
80
- "fg": "Lc=47; #AF9ABD | hsl( 276 21% 67%) | oklch(0.72 0.06 312 )",
80
+ "fg": "Lc=47; #AF9ABE | hsl( 275 22% 67%) | oklch(0.72 0.06 311 )",
81
81
  },
82
82
  "swatches[ 7] aka Swatch.BlueDark ": {
83
- "bg": "Lc=2; #292C45 | hsl( 234 25% 22%) | oklch(0.3 0.05 278 )",
84
- "fg": "Lc=49; #A2A2C2 | hsl( 240 21% 70%) | oklch(0.72 0.05 285 )",
83
+ "bg": "Lc=2; #292C46 | hsl( 234 26% 22%) | oklch(0.3 0.05 278 )",
84
+ "fg": "Lc=49; #A1A2C2 | hsl( 238 21% 70%) | oklch(0.72 0.05 284 )",
85
85
  },
86
86
  "swatches[ 8] aka Swatch.Blue ": {
87
87
  "bg": "Lc=4; #2A3651 | hsl( 222 32% 24%) | oklch(0.34 0.05 265 )",
88
88
  "fg": "Lc=55; #A6B3D6 | hsl( 224 37% 75%) | oklch(0.77 0.05 269 )",
89
89
  },
90
90
  "swatches[ 9] aka Swatch.BlueSky ": {
91
- "bg": "Lc=7; #2E4052 | hsl( 210 28% 25%) | oklch(0.36 0.04 249 )",
92
- "fg": "Lc=58; #ACC0D6 | hsl( 211 34% 76%) | oklch(0.8 0.04 251 )",
91
+ "bg": "Lc=7; #2B4052 | hsl( 208 31% 25%) | oklch(0.36 0.04 245 )",
92
+ "fg": "Lc=58; #A7C0D6 | hsl( 208 36% 75%) | oklch(0.8 0.04 245 )",
93
93
  },
94
94
  "swatches[10] aka Swatch.Turquoise ": {
95
- "bg": "Lc=9; #2C4846 | hsl( 176 24% 23%) | oklch(0.38 0.03 190 )",
96
- "fg": "Lc=60; #A9CBC7 | hsl( 173 25% 73%) | oklch(0.82 0.04 188 )",
95
+ "bg": "Lc=8; #284849 | hsl( 182 29% 22%) | oklch(0.38 0.04 198 )",
96
+ "fg": "Lc=60; #A3CBCA | hsl( 179 28% 72%) | oklch(0.81 0.04 194 )",
97
97
  },
98
98
  "swatches[11] aka Swatch.GreenDark ": {
99
- "bg": "Lc=4; #253931 | hsl( 156 21% 18%) | oklch(0.32 0.03 168 )",
100
- "fg": "Lc=54; #A0B7AB | hsl( 149 14% 67%) | oklch(0.76 0.03 163 )",
99
+ "bg": "Lc=4; #213B34 | hsl( 164 28% 18%) | oklch(0.33 0.03 175 )",
100
+ "fg": "Lc=54; #9BB9AE | hsl( 158 18% 67%) | oklch(0.76 0.04 171 )",
101
101
  },
102
102
  "swatches[12] aka Swatch.Green ": {
103
- "bg": "Lc=7; #31422B | hsl( 104 21% 21%) | oklch(0.36 0.04 138 )",
104
- "fg": "Lc=58; #B0C3A2 | hsl( 95 22% 70%) | oklch(0.79 0.05 132 )",
103
+ "bg": "Lc=7; #30422A | hsl( 105 22% 21%) | oklch(0.36 0.05 138 )",
104
+ "fg": "Lc=58; #AEC3A1 | hsl( 97 22% 70%) | oklch(0.79 0.05 133 )",
105
105
  },
106
106
  "swatches[13] aka Swatch.GreenLight": {
107
- "bg": "Lc=9; #3F472B | hsl( 77 25% 22%) | oklch(0.38 0.05 122 )",
108
- "fg": "Lc=61; #C2CAA3 | hsl( 72 27% 72%) | oklch(0.82 0.05 117 )",
107
+ "bg": "Lc=9; #3E482B | hsl( 81 25% 23%) | oklch(0.38 0.05 124 )",
108
+ "fg": "Lc=61; #C1CAA2 | hsl( 73 27% 71%) | oklch(0.82 0.05 118 )",
109
109
  },
110
110
  "swatches[14] aka Swatch.Yellow ": {
111
- "bg": "Lc=10; #584324 | hsl( 36 42% 24%) | oklch(0.4 0.05 76 )",
112
- "fg": "Lc=62; #E3C499 | hsl( 35 57% 75%) | oklch(0.84 0.07 76 )",
111
+ "bg": "Lc=10; #594222 | hsl( 35 45% 24%) | oklch(0.4 0.06 74 )",
112
+ "fg": "Lc=61; #E4C397 | hsl( 34 59% 74%) | oklch(0.83 0.07 75 )",
113
113
  },
114
114
  "swatches[15] aka Swatch.Orange ": {
115
115
  "bg": "Lc=5; #552E20 | hsl( 16 45% 23%) | oklch(0.35 0.06 40 )",
116
116
  "fg": "Lc=54; #DFA894 | hsl( 16 54% 73%) | oklch(0.78 0.07 41 )",
117
117
  },
118
118
  "swatches[16] aka Swatch.Brown ": {
119
- "bg": "Lc=2; #402921 | hsl( 15 32% 19%) | oklch(0.31 0.04 40 )",
120
- "fg": "Lc=51; #C3A295 | hsl( 17 28% 67%) | oklch(0.74 0.04 43 )",
119
+ "bg": "Lc=2; #422920 | hsl( 16 35% 19%) | oklch(0.31 0.04 41 )",
120
+ "fg": "Lc=51; #C6A193 | hsl( 16 31% 68%) | oklch(0.74 0.05 42 )",
121
121
  },
122
122
  }
123
123
  `);
@@ -133,8 +133,8 @@ describe("enum over painted card surface = color coding (bug#14178 worst case)",
133
133
  "fg": "Lc=30; #867F7C | hsl( 18 4% 51%) | oklch(0.6 0.01 45 )",
134
134
  },
135
135
  "CMYK Cyan ": {
136
- "bg": "Lc=11; #275A56 | hsl( 175 40% 25%) | oklch(0.43 0.06 188 )",
137
- "fg": "Lc=66; #A2E3DC | hsl( 174 54% 76%) | oklch(0.87 0.07 188 )",
136
+ "bg": "Lc=12; #255B57 | hsl( 176 42% 25%) | oklch(0.43 0.06 189 )",
137
+ "fg": "Lc=66; #9FE4DD | hsl( 174 56% 76%) | oklch(0.87 0.07 188 )",
138
138
  },
139
139
  "CMYK Magenta": {
140
140
  "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)",
153
153
  "fg": "Lc=68; #E2D5D0 | hsl( 17 24% 85%) | oklch(0.88 0.02 42 )",
154
154
  },
155
155
  "Noti yellow ": {
156
- "bg": "Lc=11; #5B533F | hsl( 43 18% 30%) | oklch(0.44 0.03 89 )",
157
- "fg": "Lc=68; #E4DACA | hsl( 37 33% 84%) | oklch(0.89 0.02 80 )",
156
+ "bg": "Lc=12; #5C543F | hsl( 43 19% 30%) | oklch(0.45 0.03 90 )",
157
+ "fg": "Lc=68; #E5DAC9 | hsl( 36 35% 84%) | oklch(0.89 0.03 79 )",
158
158
  },
159
159
  "RGB Blue ": {
160
160
  "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)",
198
198
  },
199
199
  "swatches[ 6] aka Swatch.Violet ": {
200
200
  "bg": "Lc=2; #382B47 | hsl( 268 25% 22%) | oklch(0.32 0.05 305 )",
201
- "fg": "Lc=46; #AF9ABD | hsl( 276 21% 67%) | oklch(0.72 0.06 312 )",
201
+ "fg": "Lc=46; #AF9ABE | hsl( 275 22% 67%) | oklch(0.72 0.06 311 )",
202
202
  },
203
203
  "swatches[ 7] aka Swatch.BlueDark ": {
204
- "bg": "Lc=2; #2C2F48 | hsl( 234 24% 23%) | oklch(0.31 0.04 278 )",
205
- "fg": "Lc=48; #A2A2C2 | hsl( 240 21% 70%) | oklch(0.72 0.05 285 )",
204
+ "bg": "Lc=2; #2C2F49 | hsl( 234 25% 23%) | oklch(0.31 0.05 278 )",
205
+ "fg": "Lc=48; #A1A2C2 | hsl( 238 21% 70%) | oklch(0.72 0.05 284 )",
206
206
  },
207
207
  "swatches[ 8] aka Swatch.Blue ": {
208
208
  "bg": "Lc=3; #2A3651 | hsl( 222 32% 24%) | oklch(0.34 0.05 265 )",
209
209
  "fg": "Lc=55; #A6B3D6 | hsl( 224 37% 75%) | oklch(0.77 0.05 269 )",
210
210
  },
211
211
  "swatches[ 9] aka Swatch.BlueSky ": {
212
- "bg": "Lc=5; #2E4052 | hsl( 210 28% 25%) | oklch(0.36 0.04 249 )",
213
- "fg": "Lc=58; #ACC0D6 | hsl( 211 34% 76%) | oklch(0.8 0.04 251 )",
212
+ "bg": "Lc=5; #2B4052 | hsl( 208 31% 25%) | oklch(0.36 0.04 245 )",
213
+ "fg": "Lc=58; #A7C0D6 | hsl( 208 36% 75%) | oklch(0.8 0.04 245 )",
214
214
  },
215
215
  "swatches[10] aka Swatch.Turquoise ": {
216
- "bg": "Lc=7; #2C4846 | hsl( 176 24% 23%) | oklch(0.38 0.03 190 )",
217
- "fg": "Lc=60; #A9CBC7 | hsl( 173 25% 73%) | oklch(0.82 0.04 188 )",
216
+ "bg": "Lc=7; #284849 | hsl( 182 29% 22%) | oklch(0.38 0.04 198 )",
217
+ "fg": "Lc=60; #A3CBCA | hsl( 179 28% 72%) | oklch(0.81 0.04 194 )",
218
218
  },
219
219
  "swatches[11] aka Swatch.GreenDark ": {
220
- "bg": "Lc=3; #253931 | hsl( 156 21% 18%) | oklch(0.32 0.03 168 )",
221
- "fg": "Lc=54; #A0B7AB | hsl( 149 14% 67%) | oklch(0.76 0.03 163 )",
220
+ "bg": "Lc=3; #213B34 | hsl( 164 28% 18%) | oklch(0.33 0.03 175 )",
221
+ "fg": "Lc=54; #9BB9AE | hsl( 158 18% 67%) | oklch(0.76 0.04 171 )",
222
222
  },
223
223
  "swatches[12] aka Swatch.Green ": {
224
- "bg": "Lc=5; #31422B | hsl( 104 21% 21%) | oklch(0.36 0.04 138 )",
225
- "fg": "Lc=58; #B0C3A2 | hsl( 95 22% 70%) | oklch(0.79 0.05 132 )",
224
+ "bg": "Lc=5; #30422A | hsl( 105 22% 21%) | oklch(0.36 0.05 138 )",
225
+ "fg": "Lc=58; #AEC3A1 | hsl( 97 22% 70%) | oklch(0.79 0.05 133 )",
226
226
  },
227
227
  "swatches[13] aka Swatch.GreenLight": {
228
- "bg": "Lc=7; #3F472B | hsl( 77 25% 22%) | oklch(0.38 0.05 122 )",
229
- "fg": "Lc=61; #C2CAA3 | hsl( 72 27% 72%) | oklch(0.82 0.05 117 )",
228
+ "bg": "Lc=7; #3E482B | hsl( 81 25% 23%) | oklch(0.38 0.05 124 )",
229
+ "fg": "Lc=61; #C1CAA2 | hsl( 73 27% 71%) | oklch(0.82 0.05 118 )",
230
230
  },
231
231
  "swatches[14] aka Swatch.Yellow ": {
232
- "bg": "Lc=8; #584324 | hsl( 36 42% 24%) | oklch(0.4 0.05 76 )",
233
- "fg": "Lc=62; #E3C499 | hsl( 35 57% 75%) | oklch(0.84 0.07 76 )",
232
+ "bg": "Lc=8; #594222 | hsl( 35 45% 24%) | oklch(0.4 0.06 74 )",
233
+ "fg": "Lc=61; #E4C397 | hsl( 34 59% 74%) | oklch(0.83 0.07 75 )",
234
234
  },
235
235
  "swatches[15] aka Swatch.Orange ": {
236
236
  "bg": "Lc=4; #552E20 | hsl( 16 45% 23%) | oklch(0.35 0.06 40 )",
237
237
  "fg": "Lc=54; #DFA894 | hsl( 16 54% 73%) | oklch(0.78 0.07 41 )",
238
238
  },
239
239
  "swatches[16] aka Swatch.Brown ": {
240
- "bg": "Lc=2; #432C24 | hsl( 15 30% 20%) | oklch(0.32 0.04 40 )",
241
- "fg": "Lc=50; #C3A295 | hsl( 17 28% 67%) | oklch(0.74 0.04 43 )",
240
+ "bg": "Lc=2; #452B22 | hsl( 15 34% 20%) | oklch(0.32 0.04 40 )",
241
+ "fg": "Lc=50; #C6A193 | hsl( 16 31% 68%) | oklch(0.74 0.05 42 )",
242
242
  },
243
243
  }
244
244
  `);
@@ -254,8 +254,8 @@ describe("enum over same-color card (extreme experiment)", () => {
254
254
  "fg": "Lc=30; #867F7C | hsl( 18 4% 51%) | oklch(0.6 0.01 45 )",
255
255
  },
256
256
  "CMYK Cyan ": {
257
- "bg": "Lc=73; #275A56 | hsl( 175 40% 25%) | oklch(0.43 0.06 188 )",
258
- "fg": "Lc=66; #A2E3DC | hsl( 174 54% 76%) | oklch(0.87 0.07 188 )",
257
+ "bg": "Lc=72; #255B57 | hsl( 176 42% 25%) | oklch(0.43 0.06 189 )",
258
+ "fg": "Lc=66; #9FE4DD | hsl( 174 56% 76%) | oklch(0.87 0.07 188 )",
259
259
  },
260
260
  "CMYK Magenta": {
261
261
  "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)", () => {
274
274
  "fg": "Lc=68; #E2D5D0 | hsl( 17 24% 85%) | oklch(0.88 0.02 42 )",
275
275
  },
276
276
  "Noti yellow ": {
277
- "bg": "Lc=70; #5B533F | hsl( 43 18% 30%) | oklch(0.44 0.03 89 )",
278
- "fg": "Lc=68; #E4DACA | hsl( 37 33% 84%) | oklch(0.89 0.02 80 )",
277
+ "bg": "Lc=70; #5C543F | hsl( 43 19% 30%) | oklch(0.45 0.03 90 )",
278
+ "fg": "Lc=68; #E5DAC9 | hsl( 36 35% 84%) | oklch(0.89 0.03 79 )",
279
279
  },
280
280
  "RGB Blue ": {
281
281
  "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)", () => {
319
319
  },
320
320
  "swatches[ 6] aka Swatch.Violet ": {
321
321
  "bg": "Lc=13; #382B47 | hsl( 268 25% 22%) | oklch(0.32 0.05 305 )",
322
- "fg": "Lc=46; #AF9ABD | hsl( 276 21% 67%) | oklch(0.72 0.06 312 )",
322
+ "fg": "Lc=46; #AF9ABE | hsl( 275 22% 67%) | oklch(0.72 0.06 311 )",
323
323
  },
324
324
  "swatches[ 7] aka Swatch.BlueDark ": {
325
- "bg": "Lc=14; #2C2F48 | hsl( 234 24% 23%) | oklch(0.31 0.04 278 )",
326
- "fg": "Lc=48; #A2A2C2 | hsl( 240 21% 70%) | oklch(0.72 0.05 285 )",
325
+ "bg": "Lc=14; #2C2F49 | hsl( 234 25% 23%) | oklch(0.31 0.05 278 )",
326
+ "fg": "Lc=48; #A1A2C2 | hsl( 238 21% 70%) | oklch(0.72 0.05 284 )",
327
327
  },
328
328
  "swatches[ 8] aka Swatch.Blue ": {
329
329
  "bg": "Lc=28; #2A3651 | hsl( 222 32% 24%) | oklch(0.34 0.05 265 )",
330
330
  "fg": "Lc=55; #A6B3D6 | hsl( 224 37% 75%) | oklch(0.77 0.05 269 )",
331
331
  },
332
332
  "swatches[ 9] aka Swatch.BlueSky ": {
333
- "bg": "Lc=37; #2E4052 | hsl( 210 28% 25%) | oklch(0.36 0.04 249 )",
334
- "fg": "Lc=58; #ACC0D6 | hsl( 211 34% 76%) | oklch(0.8 0.04 251 )",
333
+ "bg": "Lc=37; #2B4052 | hsl( 208 31% 25%) | oklch(0.36 0.04 245 )",
334
+ "fg": "Lc=58; #A7C0D6 | hsl( 208 36% 75%) | oklch(0.8 0.04 245 )",
335
335
  },
336
336
  "swatches[10] aka Swatch.Turquoise ": {
337
- "bg": "Lc=47; #2C4846 | hsl( 176 24% 23%) | oklch(0.38 0.03 190 )",
338
- "fg": "Lc=60; #A9CBC7 | hsl( 173 25% 73%) | oklch(0.82 0.04 188 )",
337
+ "bg": "Lc=47; #284849 | hsl( 182 29% 22%) | oklch(0.38 0.04 198 )",
338
+ "fg": "Lc=60; #A3CBCA | hsl( 179 28% 72%) | oklch(0.81 0.04 194 )",
339
339
  },
340
340
  "swatches[11] aka Swatch.GreenDark ": {
341
- "bg": "Lc=33; #253931 | hsl( 156 21% 18%) | oklch(0.32 0.03 168 )",
342
- "fg": "Lc=54; #A0B7AB | hsl( 149 14% 67%) | oklch(0.76 0.03 163 )",
341
+ "bg": "Lc=32; #213B34 | hsl( 164 28% 18%) | oklch(0.33 0.03 175 )",
342
+ "fg": "Lc=54; #9BB9AE | hsl( 158 18% 67%) | oklch(0.76 0.04 171 )",
343
343
  },
344
344
  "swatches[12] aka Swatch.Green ": {
345
- "bg": "Lc=40; #31422B | hsl( 104 21% 21%) | oklch(0.36 0.04 138 )",
346
- "fg": "Lc=58; #B0C3A2 | hsl( 95 22% 70%) | oklch(0.79 0.05 132 )",
345
+ "bg": "Lc=40; #30422A | hsl( 105 22% 21%) | oklch(0.36 0.05 138 )",
346
+ "fg": "Lc=58; #AEC3A1 | hsl( 97 22% 70%) | oklch(0.79 0.05 133 )",
347
347
  },
348
348
  "swatches[13] aka Swatch.GreenLight": {
349
- "bg": "Lc=50; #3F472B | hsl( 77 25% 22%) | oklch(0.38 0.05 122 )",
350
- "fg": "Lc=61; #C2CAA3 | hsl( 72 27% 72%) | oklch(0.82 0.05 117 )",
349
+ "bg": "Lc=50; #3E482B | hsl( 81 25% 23%) | oklch(0.38 0.05 124 )",
350
+ "fg": "Lc=61; #C1CAA2 | hsl( 73 27% 71%) | oklch(0.82 0.05 118 )",
351
351
  },
352
352
  "swatches[14] aka Swatch.Yellow ": {
353
- "bg": "Lc=50; #584324 | hsl( 36 42% 24%) | oklch(0.4 0.05 76 )",
354
- "fg": "Lc=62; #E3C499 | hsl( 35 57% 75%) | oklch(0.84 0.07 76 )",
353
+ "bg": "Lc=51; #594222 | hsl( 35 45% 24%) | oklch(0.4 0.06 74 )",
354
+ "fg": "Lc=61; #E4C397 | hsl( 34 59% 74%) | oklch(0.83 0.07 75 )",
355
355
  },
356
356
  "swatches[15] aka Swatch.Orange ": {
357
357
  "bg": "Lc=36; #552E20 | hsl( 16 45% 23%) | oklch(0.35 0.06 40 )",
358
358
  "fg": "Lc=54; #DFA894 | hsl( 16 54% 73%) | oklch(0.78 0.07 41 )",
359
359
  },
360
360
  "swatches[16] aka Swatch.Brown ": {
361
- "bg": "Lc=21; #432C24 | hsl( 15 30% 20%) | oklch(0.32 0.04 40 )",
362
- "fg": "Lc=50; #C3A295 | hsl( 17 28% 67%) | oklch(0.74 0.04 43 )",
361
+ "bg": "Lc=21; #452B22 | hsl( 15 34% 20%) | oklch(0.32 0.04 40 )",
362
+ "fg": "Lc=50; #C6A193 | hsl( 16 31% 68%) | oklch(0.74 0.05 42 )",
363
363
  },
364
364
  }
365
365
  `);