@fibery/ui-kit 2.1.0 → 3.0.0

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

@@ -1,26 +1,29 @@
-import {
-  ControlledDatePickerProps,
-  RelativeDateValue,
-  SingleDatePickerPopoverContentProps,
-  SingleDatePickerProps,
-} from "./types";
-import {FakeDateInputWrapper} from "./fake-date-input";
-import {space, themeVars} from "../design-system";
-import {withPopupControl} from "./with-popup-control";
+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";
+
 import "react-day-picker/dist/style.css";
-import {SingleDatePickerPopupContent} from "./single-date-picker-popup-content";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {forwardRef, useCallback, useRef, useState} from "react";
-import moment, {Moment} from "moment";
-import omit from "lodash/omit";
+import {focusable} from "tabbable";
+
+import {space, themeVars} from "../design-system";
 import {EmptyValue} from "../empty-value";
-import {formatDateInputValue} from "./utils";
 import {Popover} from "../popover";
-import {focusable} from "tabbable";
 import {TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
+import type {$TSFixMe} from "../tsfixme";
+import {FakeDateInputWrapper} from "./fake-date-input";
 import {RelativeDatePicker} from "./relative-date-picker";
-import {$TSFixMe} from "../tsfixme";
+import {SingleDatePickerPopupContent} from "./single-date-picker-popup-content";
+import type {
+  ControlledDatePickerProps,
+  RelativeDateValue,
+  SingleDatePickerPopoverContentProps,
+  SingleDatePickerProps,
+} from "./types";
+import {formatDateInputValue} from "./utils";
+import {withPopupControl} from "./with-popup-control";
 
 const tabItemClassName = css`
   display: flex;

package/src/date-picker/styles.ts

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {inputOverrides} from "../antd/styles";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";

package/src/date-picker/types.ts

@@ -1,7 +1,8 @@
-import {Moment} from "moment";
-import {$TSFixMe} from "../tsfixme";
-import {ReactNode} from "react";
-import {unitOfTime} from "moment";
+import type {Moment} from "moment";
+import type {unitOfTime} from "moment";
+import type {ReactNode} from "react";
+
+import type {$TSFixMe} from "../tsfixme";
 
 export type RelativeDateValue = {isBeforeNow: boolean; unit: unitOfTime.DurationConstructor; amount: number};
 

package/src/date-picker/utils.ts

@@ -1,11 +1,12 @@
-import {datesSeparator, hourMinuteSeparator} from "./constants";
-import moment from "moment";
 import * as chrono from "chrono-node";
+import moment from "moment";
+
 import {
   dateFormat as defaultDateFormat,
   timeFormat as defaultTimeFormat,
   dateTimeFormat as defaultDateTimeFormat,
 } from "../design-system";
+import {datesSeparator, hourMinuteSeparator} from "./constants";
 
 const isMonthBeforeDay = (format: string) => {
   // Hacky way to get rid of ddd specifier, which does not matter for us here

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

@@ -1,7 +1,8 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
 import {useCallback, useEffect, useRef, useState} from "react";
-import {ControlledDatePickerProps} from "./types";
+
+import type {ControlledDatePickerProps} from "./types";
 
 const noOutline = css`
   outline: none;

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

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {RoundToggleButton} from "../toggle-button/round-toggle-button";
 import {ToggleButtonGroup, ToggleButtonGroupItem} from "../toggle-button/toggle-button-group";
 

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

@@ -1,7 +1,9 @@
 import range from "lodash/range";
-import {DaySelect, Props} from "./day-select";
 import moment from "moment";
 
+import type {Props} from "./day-select";
+import {DaySelect} from "./day-select";
+
 const isoWeekDays = range(1, 8).map((day) => {
   return {
     key: String(day),

package/src/day-select/mount-day-select.tsx

@@ -1,4 +1,5 @@
-import {DaySelect, Props} from "./day-select";
+import type {Props} from "./day-select";
+import {DaySelect} from "./day-select";
 
 const days = Array.from({length: 28}).map((_, index) => {
   const value = index + 1;

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

@@ -1,5 +1,7 @@
-import memoize from "lodash/memoize";
-import {DaySelect, Props} from "./day-select";
+import {memoize} from "@fibery/helpers/src/_";
+
+import type {Props} from "./day-select";
+import {DaySelect} from "./day-select";
 
 export enum Days {
   MO = 0,

package/src/delayed.tsx

@@ -1,4 +1,5 @@
-import React, {useEffect, useState} from "react";
+import type React from "react";
+import {useEffect, useState} from "react";
 
 export const defaultLoaderDelay = 1000;
 

package/src/design-system/alpha.ts

@@ -1,5 +1,6 @@
-import {produceColor, setAlpha} from "../color-utils";
-import memoize from "lodash/memoize";
+import {memoize} from "@fibery/helpers/src/_";
+
+import {produceColor} from "../color-utils";
 export const transparent = "rgba(255, 255, 255, 0)";
 
 export const opacity = {
@@ -26,10 +27,12 @@ export const opacity = {
   opacity0: 0,
 } as const;
 
+export type AlphaValue = (typeof opacity)[keyof typeof opacity];
+
 // inspired by https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/alpha-value
 export const alpha = memoize(
-  (color: string, value: (typeof opacity)[keyof typeof opacity]) => {
-    return produceColor(color, (c) => setAlpha(c, value));
+  (color: string, alpha: AlphaValue) => {
+    return produceColor(color, (oklch) => ({...oklch, alpha}));
   },
   (a, b) => a + b
 );

package/src/design-system/animation.ts

@@ -1,5 +1,3 @@
-import mapValues from "lodash/mapValues";
-
 export const tooltipDelay = {
   enter: 500,
   leave: 0,
@@ -13,16 +11,21 @@ export const durations = {
   slower: 400,
 } as const;
 
-const timingFunction = {
-  default: "ease-in-out",
-  decelerate: "cubic-bezier(0.2, 0, 0, 1)",
-} as const;
-
-export const transitionDuration = mapValues(durations, (ms) => `${ms}ms`);
+export const transitionDuration = {
+  faster: "120ms",
+  fast: "150ms",
+  normal: "200ms",
+  slow: "300ms",
+  slower: "400ms",
+};
 
 export const transitions = {
-  ...mapValues(transitionDuration, (ms) => `${ms} ${timingFunction.default}`),
-  decelerate: mapValues(transitionDuration, (ms) => `${ms} ${timingFunction.decelerate}`),
+  faster: "120ms ease-in-out",
+  fast: "150ms ease-in-out",
+  normal: "200ms ease-in-out",
+  slow: "300ms ease-in-out",
+  slowDecelerate: `300ms cubic-bezier(0.2, 0, 0, 1)`,
+  slower: "400ms ease-in-out",
 };
 
 /** @deprecated inline */

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

@@ -0,0 +1,78 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(false).themes[1];
+
+describe("callout.bg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.callout(c).bg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#2E2E2E   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "CMYK Cyan   ": "#115D5D   | hsl( 180  69%  22%) | oklch(0.44 0.07 195 )",
+        "CMYK Magenta": "#5D105D   | hsl( 300  71%  21%) | oklch(0.35 0.14 328 )",
+        "CMYK Yellow ": "#5D5D11   | hsl(  60  69%  22%) | oklch(0.46 0.09 110 )",
+        "Noti green  ": "#525553   | hsl( 140   2%  33%) | oklch(0.45 0.01 157 )",
+        "Noti red    ": "#575251   | hsl(  10   4%  33%) | oklch(0.44 0.01  31 )",
+        "Noti yellow ": "#57544A   | hsl(  46   8%  32%) | oklch(0.45 0.02  93 )",
+        "RGB  Blue   ": "#181888   | hsl( 240  70%  31%) | oklch(0.31 0.18 270 )",
+        "RGB  Green  ": "#105D10   | hsl( 120  71%  21%) | oklch(0.42 0.13 143 )",
+        "RGB  Red    ": "#5D1010   | hsl(   0  71%  21%) | oklch(0.31 0.11  26 )",
+        "White       ": "#5D5D5D   | hsl(none   0%  36%) | oklch(0.48 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#2E2E2E   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#35383B   | hsl( 210   5%  22%) | oklch(0.34 0.01 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#3E4143   | hsl( 204   4%  25%) | oklch(0.37 0.01 237 )",
+        "swatches[ 3] aka Swatch.Red       ": "#4E1E1C   | hsl(   2  47%  21%) | oklch(0.31 0.07  25 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#50222F   | hsl( 343  40%  22%) | oklch(0.32 0.07   4 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#3E2246   | hsl( 287  35%  20%) | oklch(0.31 0.07 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#32284C   | hsl( 257  31%  23%) | oklch(0.31 0.06 295 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#262C48   | hsl( 229  31%  22%) | oklch(0.3  0.05 274 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#223559   | hsl( 219  45%  24%) | oklch(0.33 0.07 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#253F52   | hsl( 205  38%  23%) | oklch(0.36 0.05 241 )",
+        "swatches[10] aka Swatch.Turquoise ": "#2A484F   | hsl( 191  31%  24%) | oklch(0.38 0.04 214 )",
+        "swatches[11] aka Swatch.GreenDark ": "#253D39   | hsl( 170  24%  19%) | oklch(0.34 0.03 183 )",
+        "swatches[12] aka Swatch.Green     ": "#30442C   | hsl( 110  21%  22%) | oklch(0.36 0.05 140 )",
+        "swatches[13] aka Swatch.GreenLight": "#3E4A2D   | hsl(  85  24%  23%) | oklch(0.39 0.05 127 )",
+        "swatches[14] aka Swatch.Yellow    ": "#574226   | hsl(  34  39%  25%) | oklch(0.39 0.05  73 )",
+        "swatches[15] aka Swatch.Orange    ": "#562D20   | hsl(  14  46%  23%) | oklch(0.35 0.06  38 )",
+        "swatches[16] aka Swatch.Brown     ": "#412921   | hsl(  15  33%  19%) | oklch(0.31 0.04  39 )",
+      }
+    `);
+  });
+});
+
+describe("callout.fg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#888888   | hsl(none   0%  53%) | oklch(0.63 0    none)",
+        "CMYK Cyan   ": "#03F3F3   | hsl( 180  98%  48%) | oklch(0.87 0.15 195 )",
+        "CMYK Magenta": "#F301F3   | hsl( 300  99%  48%) | oklch(0.68 0.31 328 )",
+        "CMYK Yellow ": "#F3F303   | hsl(  60  98%  48%) | oklch(0.93 0.2  110 )",
+        "Noti green  ": "#D2DBD5   | hsl( 140  11%  84%) | oklch(0.88 0.01 157 )",
+        "Noti red    ": "#E3D1CD   | hsl(  11  28%  85%) | oklch(0.87 0.02  33 )",
+        "Noti yellow ": "#E3D9B8   | hsl(  46  43%  81%) | oklch(0.88 0.05  93 )",
+        "RGB  Blue   ": "#7777FE   | hsl( 240  99%  73%) | oklch(0.64 0.2  279 )",
+        "RGB  Green  ": "#01F301   | hsl( 120  99%  48%) | oklch(0.84 0.28 142 )",
+        "RGB  Red    ": "#FE3939   | hsl(   0  99%  61%) | oklch(0.65 0.23  27 )",
+        "White       ": "#F3F3F3   | hsl(none   0%  95%) | oklch(0.96 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#878787   | hsl(none   0%  53%) | oklch(0.62 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#7F8891   | hsl( 210   8%  53%) | oklch(0.62 0.02 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#929BA4   | hsl( 210   9%  61%) | oklch(0.69 0.02 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#DE5E59   | hsl(   2  67%  61%) | oklch(0.64 0.16  25 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#D56183   | hsl( 342  58%  61%) | oklch(0.64 0.15   4 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#B668CC   | hsl( 287  50%  60%) | oklch(0.64 0.16 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#907BCC   | hsl( 256  44%  64%) | oklch(0.64 0.12 295 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#7383CB   | hsl( 229  46%  62%) | oklch(0.63 0.11 273 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#5085EB   | hsl( 219  79%  62%) | oklch(0.63 0.16 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#4595D1   | hsl( 206  60%  55%) | oklch(0.65 0.12 244 )",
+        "swatches[10] aka Swatch.Turquoise ": "#55B3C7   | hsl( 191  50%  56%) | oklch(0.72 0.09 214 )",
+        "swatches[11] aka Swatch.GreenDark ": "#459488   | hsl( 171  36%  43%) | oklch(0.61 0.08 182 )",
+        "swatches[12] aka Swatch.Green     ": "#65A55A   | hsl( 111  29%  50%) | oklch(0.66 0.13 141 )",
+        "swatches[13] aka Swatch.GreenLight": "#92B95D   | hsl(  85  40%  55%) | oklch(0.74 0.13 128 )",
+        "swatches[14] aka Swatch.Yellow    ": "#E39F47   | hsl(  34  74%  58%) | oklch(0.75 0.13  70 )",
+        "swatches[15] aka Swatch.Orange    ": "#E06037   | hsl(  15  73%  55%) | oklch(0.64 0.17  38 )",
+        "swatches[16] aka Swatch.Brown     ": "#C47257   | hsl(  15  48%  55%) | oklch(0.64 0.11  39 )",
+      }
+    `);
+  });
+});

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

@@ -0,0 +1,78 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(false).themes[0];
+
+describe("callout.bg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.callout(c).bg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#E6E6E6   | hsl(none   0%  90%) | oklch(0.92 0    none)",
+        "CMYK Cyan   ": "#E3FCFC   | hsl( 180  81%  94%) | oklch(0.97 0.03 197 )",
+        "CMYK Magenta": "#FFE6FF   | hsl( 300 100%  95%) | oklch(0.95 0.04 326 )",
+        "CMYK Yellow ": "#F9F9E0   | hsl(  60  68%  93%) | oklch(0.98 0.03 107 )",
+        "Noti green  ": "#F7F8F8   | hsl( 180   7%  97%) | oklch(0.98 0    197 )",
+        "Noti red    ": "#F9F7F7   | hsl(   0  14%  97%) | oklch(0.98 0     17 )",
+        "Noti yellow ": "#F8F7F4   | hsl(  45  22%  96%) | oklch(0.98 0     91 )",
+        "RGB  Blue   ": "#E5E6FF   | hsl( 238 100%  95%) | oklch(0.93 0.03 284 )",
+        "RGB  Green  ": "#E5FEE5   | hsl( 120  93%  95%) | oklch(0.97 0.04 145 )",
+        "RGB  Red    ": "#FFE6E6   | hsl(   0 100%  95%) | oklch(0.95 0.03  18 )",
+        "White       ": "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#EDEDED   | hsl(none   0%  93%) | oklch(0.95 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#F2F3F4   | hsl( 210   8%  95%) | oklch(0.96 0    248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#F5F6F7   | hsl( 210  11%  96%) | oklch(0.97 0    248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#F9EAE9   | hsl(   4  57%  95%) | oklch(0.95 0.02  22 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FBEBF0   | hsl( 341  67%  95%) | oklch(0.95 0.02 356 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F4EBF6   | hsl( 289  38%  94%) | oklch(0.95 0.02 320 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#EFECF7   | hsl( 256  41%  95%) | oklch(0.95 0.01 299 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#ECEEF7   | hsl( 229  41%  95%) | oklch(0.95 0.01 276 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#EBF2FE   | hsl( 218  90%  96%) | oklch(0.96 0.02 261 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#EDF5FB   | hsl( 206  64%  96%) | oklch(0.97 0.01 240 )",
+        "swatches[10] aka Swatch.Turquoise ": "#EEF8FA   | hsl( 190  55%  96%) | oklch(0.97 0.01 211 )",
+        "swatches[11] aka Swatch.GreenDark ": "#ECF4F3   | hsl( 172  27%  94%) | oklch(0.96 0.01 188 )",
+        "swatches[12] aka Swatch.Green     ": "#F0F7EF   | hsl( 113  33%  95%) | oklch(0.97 0.01 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#F5F9EF   | hsl(  84  45%  96%) | oklch(0.98 0.01 125 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FDF6ED   | hsl(  34  80%  96%) | oklch(0.98 0.01  74 )",
+        "swatches[15] aka Swatch.Orange    ": "#FDEFEB   | hsl(  13  82%  96%) | oklch(0.96 0.02  37 )",
+        "swatches[16] aka Swatch.Brown     ": "#F6EEEB   | hsl(  16  38%  94%) | oklch(0.95 0.01  42 )",
+      }
+    `);
+  });
+});
+
+describe("callout.fg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.callout(c).fg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#0D0D0D   | hsl(none   0%   5%) | oklch(0.16 0    none)",
+        "CMYK Cyan   ": "#00A6A6   | hsl( 180 100%  33%) | oklch(0.66 0.11 195 )",
+        "CMYK Magenta": "#FF0DFF   | hsl( 300 100%  53%) | oklch(0.7  0.32 328 )",
+        "CMYK Yellow ": "#9A9A00   | hsl(  60 100%  30%) | oklch(0.66 0.14 110 )",
+        "Noti green  ": "#7B9D86   | hsl( 139  15%  55%) | oklch(0.66 0.05 155 )",
+        "Noti red    ": "#C58577   | hsl(  11  40%  62%) | oklch(0.68 0.08  33 )",
+        "Noti yellow ": "#B19230   | hsl(  46  57%  44%) | oklch(0.67 0.12  91 )",
+        "RGB  Blue   ": "#0D0DFF   | hsl( 240 100%  53%) | oklch(0.46 0.31 265 )",
+        "RGB  Green  ": "#00AD00   | hsl( 120 100%  34%) | oklch(0.65 0.22 142 )",
+        "RGB  Red    ": "#FF0D0D   | hsl(   0 100%  53%) | oklch(0.63 0.26  29 )",
+        "White       ": "#959595   | hsl(none   0%  58%) | oklch(0.67 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#535353   | hsl(none   0%  33%) | oklch(0.44 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#818A94   | hsl( 212   8%  54%) | oklch(0.63 0.02 251 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#8C96A0   | hsl( 210  10%  59%) | oklch(0.67 0.02 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#C53630   | hsl(   2  61%  48%) | oklch(0.55 0.18  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#D6446E   | hsl( 343  64%  55%) | oklch(0.6  0.18   7 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9642AD   | hsl( 287  45%  47%) | oklch(0.53 0.18 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#684CB4   | hsl( 256  41%  50%) | oklch(0.5  0.16 292 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4A5EB2   | hsl( 228  41%  49%) | oklch(0.51 0.13 271 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#4681F4   | hsl( 220  89%  62%) | oklch(0.62 0.18 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#469BDB   | hsl( 206  67%  57%) | oklch(0.67 0.13 244 )",
+        "swatches[10] aka Swatch.Turquoise ": "#34A1B9   | hsl( 191  56%  46%) | oklch(0.66 0.1  216 )",
+        "swatches[11] aka Swatch.GreenDark ": "#4E9A8F   | hsl( 171  33%  45%) | oklch(0.63 0.08 183 )",
+        "swatches[12] aka Swatch.Green     ": "#60A555   | hsl( 112  32%  49%) | oklch(0.66 0.13 141 )",
+        "swatches[13] aka Swatch.GreenLight": "#78A13F   | hsl(  85  44%  44%) | oklch(0.66 0.14 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#D68114   | hsl(  34  83%  46%) | oklch(0.68 0.15  64 )",
+        "swatches[15] aka Swatch.Orange    ": "#EB683F   | hsl(  14  81%  58%) | oklch(0.67 0.17  38 )",
+        "swatches[16] aka Swatch.Brown     ": "#A95C43   | hsl(  15  43%  46%) | oklch(0.56 0.11  39 )",
+      }
+    `);
+  });
+});

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

@@ -0,0 +1,78 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[1];
+
+describe("callout.bg", () => {
+  test("snapshot", () => {
+    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 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 )",
+        "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 )",
+        "White       ": "#5F5C5B   | hsl(  15   2%  36%) | oklch(0.48 0     39 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#322D2B   | hsl(  17   8%  18%) | oklch(0.3  0.01  43 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#393737   | hsl(   0   2%  22%) | oklch(0.34 0     17 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#424040   | hsl(   0   2%  25%) | oklch(0.37 0     17 )",
+        "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[ 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[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 )",
+      }
+    `);
+  });
+});
+
+describe("callout.fg", () => {
+  test("snapshot", () => {
+    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 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 )",
+        "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 )",
+        "White       ": "#F4F3F3   | hsl(   0   4%  95%) | oklch(0.96 0     17 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#8F8585   | hsl(   0   4%  54%) | oklch(0.63 0.01  17 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#85888B   | hsl( 210   3%  53%) | oklch(0.63 0.01 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#999CA0   | hsl( 214   4%  61%) | oklch(0.69 0.01 255 )",
+        "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[ 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[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 )",
+      }
+    `);
+  });
+});

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

@@ -0,0 +1,78 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[0];
+
+describe("callout.bg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.callout(c).bg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#E5E4E1   | hsl(  45   7%  89%) | oklch(0.92 0     91 )",
+        "CMYK Cyan   ": "#E8F9F5   | hsl( 166  59%  94%) | oklch(0.97 0.02 180 )",
+        "CMYK Magenta": "#FEECFA   | hsl( 313  90%  96%) | oklch(0.96 0.03 333 )",
+        "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 )",
+        "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 )",
+        "White       ": "#F7F5F3   | hsl(  30  20%  96%) | oklch(0.97 0     68 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#EDEBE8   | hsl(  36  12%  92%) | oklch(0.94 0     78 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#F2F1EF   | hsl(  40  10%  94%) | oklch(0.96 0     85 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#F5F4F2   | hsl(  40  13%  95%) | oklch(0.97 0     85 )",
+        "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[ 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[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 )",
+      }
+    `);
+  });
+});
+
+describe("callout.fg", () => {
+  test("snapshot", () => {
+    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 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 )",
+        "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 )",
+        "White       ": "#D47F00   | hsl(  36 100%  42%) | oklch(0.67 0.15  65 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#565050   | hsl(   0   4%  33%) | oklch(0.44 0.01  17 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#878B8F   | hsl( 210   3%  55%) | oklch(0.63 0.01 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#919499   | hsl( 217   4%  58%) | oklch(0.67 0.01 261 )",
+        "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[ 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[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 )",
+      }
+    `);
+  });
+});

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

@@ -1,4 +1,5 @@
-import {themeVars} from "./theme";
+import {common} from "../palettes/common";
+import {themeVars} from "../theming";
 
 export function getLinearGradient(backgroundColors: Array<string>): string {
   const parts = backgroundColors.flatMap((color, index, arr) => [
@@ -8,8 +9,27 @@ export function getLinearGradient(backgroundColors: Array<string>): string {
   return `linear-gradient(to bottom, ${parts.join(", ")})`;
 }
 
+export const enumFgCustomColorPercent = common.enum.fg.swatchAlpha * 100;
+export const enumFgTextColorPercent = 100 - enumFgCustomColorPercent;
+
 export function getEnumTextColor(color: string) {
-  return `color-mix(in srgb, ${color} 40%, ${themeVars.textColor} 60%)`;
+  return `color-mix(in srgb, ${color} ${enumFgCustomColorPercent}%, ${themeVars.textColor} ${enumFgTextColorPercent}%)`;
+}
+
+/** Border on filled background swatches */
+export function getBgSwatchBorderColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.9) calc(c * 1.6) h),
+    oklch(from ${fill} calc(l * 1.5) calc(c * 1.5) h)
+  )`;
+}
+
+/** Opaque fill for palette swatches */
+export function getBgSwatchFillColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.98) calc(c * 1.25) h),
+    oklch(from ${fill} calc(l * 1.25) calc(c * 1.65) h)
+  )`;
 }
 
 function themeVarWithAlpha(themeVar: string, alpha: number) {

package/src/design-system/colors-enum._.template

@@ -0,0 +1,22 @@
+import {enumBgCases, userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const cases = enumBgCases(locateThemeBundle(TBD).themes[TBD]);
+
+describe("enum over default surface = no color coding", () => {
+  test("snapshot", () => {
+    expect(userColorChoices(cases.overDefaultSurface)).toMatchInlineSnapshot();
+  });
+});
+
+describe("enum over painted card surface = color coding (bug#14178 worst case)", () => {
+  test("snapshot", () => {
+    expect(userColorChoices(cases.overColorCoding)).toMatchInlineSnapshot();
+  });
+});
+
+describe("enum over same-color card (extreme experiment)", () => {
+  test("snapshot", () => {
+    expect(userColorChoices(cases.overSameColor)).toMatchInlineSnapshot();
+  });
+});