@fibery/ui-kit 3.0.0 → 4.0.0

package/src/design-system/fns.badge.light.warm.test.ts

@@ -8,7 +8,7 @@ describe("badge.bg", () => {
     expect(userColorChoices((c) => theme.fns.badge(c).bg)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
-        "CMYK Cyan   ": "#00D5CC   | hsl( 177 100%  42%) | oklch(0.79 0.14 189 )",
+        "CMYK Cyan   ": "#00D6CF   | hsl( 178 100%  42%) | oklch(0.79 0.14 191 )",
         "CMYK Magenta": "#DB7FD8   | hsl( 302  56%  68%) | oklch(0.73 0.16 328 )",
         "CMYK Yellow ": "#C5C632   | hsl(  60  60%  49%) | oklch(0.8  0.16 110 )",
         "Noti green  ": "#C0C0C0   | hsl(none   0%  75%) | oklch(0.81 0    none)",
@@ -24,17 +24,17 @@ describe("badge.bg", () => {
         "swatches[ 3] aka Swatch.Red       ": "#B63B35   | hsl(   3  55%  46%) | oklch(0.53 0.16  27 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#C74B71   | hsl( 342  53%  54%) | oklch(0.59 0.16   4 )",
         "swatches[ 5] aka Swatch.Purple    ": "#9949A6   | hsl( 292  39%  47%) | oklch(0.54 0.16 322 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#6542A3   | hsl( 262  42%  45%) | oklch(0.47 0.15 297 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#4557AF   | hsl( 230  43%  48%) | oklch(0.49 0.14 272 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6542A5   | hsl( 261  43%  45%) | oklch(0.47 0.15 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4356B0   | hsl( 230  45%  48%) | oklch(0.49 0.14 271 )",
         "swatches[ 8] aka Swatch.Blue      ": "#4F81E1   | hsl( 219  71%  60%) | oklch(0.62 0.16 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#5DA3E1   | hsl( 208  69%  62%) | oklch(0.7  0.12 247 )",
-        "swatches[10] aka Swatch.Turquoise ": "#57BDBC   | hsl( 179  44%  54%) | oklch(0.74 0.09 194 )",
-        "swatches[11] aka Swatch.GreenDark ": "#3F8B76   | hsl( 163  38%  40%) | oklch(0.58 0.08 173 )",
-        "swatches[12] aka Swatch.Green     ": "#68A960   | hsl( 113  30%  52%) | oklch(0.67 0.12 142 )",
-        "swatches[13] aka Swatch.GreenLight": "#94BA62   | hsl(  86  39%  56%) | oklch(0.74 0.12 128 )",
-        "swatches[14] aka Swatch.Yellow    ": "#E8AB49   | hsl(  37  78%  60%) | oklch(0.78 0.13  76 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#52A2E2   | hsl( 207  71%  60%) | oklch(0.69 0.12 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#48BEC3   | hsl( 182  51%  52%) | oklch(0.74 0.1  199 )",
+        "swatches[11] aka Swatch.GreenDark ": "#33907D   | hsl( 168  48%  38%) | oklch(0.59 0.09 177 )",
+        "swatches[12] aka Swatch.Green     ": "#64AA5D   | hsl( 115  31%  52%) | oklch(0.67 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#93BC5F   | hsl(  86  41%  55%) | oklch(0.74 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#EBA944   | hsl(  36  81%  59%) | oklch(0.78 0.14  74 )",
         "swatches[15] aka Swatch.Orange    ": "#DD663D   | hsl(  15  70%  55%) | oklch(0.65 0.16  39 )",
-        "swatches[16] aka Swatch.Brown     ": "#98563F   | hsl(  16  41%  42%) | oklch(0.52 0.09  40 )",
+        "swatches[16] aka Swatch.Brown     ": "#9F543B   | hsl(  15  46%  43%) | oklch(0.53 0.11  39 )",
       }
     `);
   });
@@ -82,7 +82,7 @@ describe("badge.border", () => {
     expect(userColorChoices((c) => theme.fns.badge(c).border)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
-        "CMYK Cyan   ": "#00D5CC   | hsl( 177 100%  42%) | oklch(0.79 0.14 189 )",
+        "CMYK Cyan   ": "#00D6CF   | hsl( 178 100%  42%) | oklch(0.79 0.14 191 )",
         "CMYK Magenta": "#DB7FD8   | hsl( 302  56%  68%) | oklch(0.73 0.16 328 )",
         "CMYK Yellow ": "#C5C632   | hsl(  60  60%  49%) | oklch(0.8  0.16 110 )",
         "Noti green  ": "#C0C0C0   | hsl(none   0%  75%) | oklch(0.81 0    none)",
@@ -98,17 +98,17 @@ describe("badge.border", () => {
         "swatches[ 3] aka Swatch.Red       ": "#B63B35   | hsl(   3  55%  46%) | oklch(0.53 0.16  27 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#C74B71   | hsl( 342  53%  54%) | oklch(0.59 0.16   4 )",
         "swatches[ 5] aka Swatch.Purple    ": "#9949A6   | hsl( 292  39%  47%) | oklch(0.54 0.16 322 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#6542A3   | hsl( 262  42%  45%) | oklch(0.47 0.15 297 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#4557AF   | hsl( 230  43%  48%) | oklch(0.49 0.14 272 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6542A5   | hsl( 261  43%  45%) | oklch(0.47 0.15 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4356B0   | hsl( 230  45%  48%) | oklch(0.49 0.14 271 )",
         "swatches[ 8] aka Swatch.Blue      ": "#4F81E1   | hsl( 219  71%  60%) | oklch(0.62 0.16 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#5DA3E1   | hsl( 208  69%  62%) | oklch(0.7  0.12 247 )",
-        "swatches[10] aka Swatch.Turquoise ": "#57BDBC   | hsl( 179  44%  54%) | oklch(0.74 0.09 194 )",
-        "swatches[11] aka Swatch.GreenDark ": "#3F8B76   | hsl( 163  38%  40%) | oklch(0.58 0.08 173 )",
-        "swatches[12] aka Swatch.Green     ": "#68A960   | hsl( 113  30%  52%) | oklch(0.67 0.12 142 )",
-        "swatches[13] aka Swatch.GreenLight": "#94BA62   | hsl(  86  39%  56%) | oklch(0.74 0.12 128 )",
-        "swatches[14] aka Swatch.Yellow    ": "#E8AB49   | hsl(  37  78%  60%) | oklch(0.78 0.13  76 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#52A2E2   | hsl( 207  71%  60%) | oklch(0.69 0.12 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#48BEC3   | hsl( 182  51%  52%) | oklch(0.74 0.1  199 )",
+        "swatches[11] aka Swatch.GreenDark ": "#33907D   | hsl( 168  48%  38%) | oklch(0.59 0.09 177 )",
+        "swatches[12] aka Swatch.Green     ": "#64AA5D   | hsl( 115  31%  52%) | oklch(0.67 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#93BC5F   | hsl(  86  41%  55%) | oklch(0.74 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#EBA944   | hsl(  36  81%  59%) | oklch(0.78 0.14  74 )",
         "swatches[15] aka Swatch.Orange    ": "#DD663D   | hsl(  15  70%  55%) | oklch(0.65 0.16  39 )",
-        "swatches[16] aka Swatch.Brown     ": "#98563F   | hsl(  16  41%  42%) | oklch(0.52 0.09  40 )",
+        "swatches[16] aka Swatch.Brown     ": "#9F543B   | hsl(  15  46%  43%) | oklch(0.53 0.11  39 )",
       }
     `);
   });
@@ -119,12 +119,12 @@ describe("badge.borderSelected", () => {
     expect(userColorChoices((c) => theme.fns.badge(c).borderSelected)).toMatchInlineSnapshot(`
       {
         "CMYK Black  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
-        "CMYK Cyan   ": "#66D5CD   | hsl( 176  57%  62%) | oklch(0.81 0.1  189 )",
+        "CMYK Cyan   ": "#62D6D0   | hsl( 177  59%  61%) | oklch(0.81 0.11 191 )",
         "CMYK Magenta": "#D044D0   | hsl( 300  60%  54%) | oklch(0.64 0.23 328 )",
         "CMYK Yellow ": "#DEE042   | hsl(  61  72%  57%) | oklch(0.88 0.17 110 )",
         "Noti green  ": "#C3C3C3   | hsl(none   0%  76%) | oklch(0.82 0    none)",
         "Noti red    ": "#BEBEBE   | hsl(none   0%  75%) | oklch(0.8  0    none)",
-        "Noti yellow ": "#C5C5C2   | hsl(  60   3%  77%) | oklch(0.82 0    106 )",
+        "Noti yellow ": "#C7C6C0   | hsl(  51   6%  77%) | oklch(0.83 0.01  99 )",
         "RGB  Blue   ": "#0D1AB6   | hsl( 235  87%  38%) | oklch(0.37 0.23 266 )",
         "RGB  Green  ": "#55D536   | hsl( 108  65%  52%) | oklch(0.77 0.22 140 )",
         "RGB  Red    ": "#B43227   | hsl(   5  64%  43%) | oklch(0.51 0.17  29 )",
@@ -135,17 +135,17 @@ describe("badge.borderSelected", () => {
         "swatches[ 3] aka Swatch.Red       ": "#8E2A26   | hsl(   2  58%  35%) | oklch(0.44 0.14  27 )",
         "swatches[ 4] aka Swatch.Magenta   ": "#A03959   | hsl( 341  47%  43%) | oklch(0.5  0.14   4 )",
         "swatches[ 5] aka Swatch.Purple    ": "#763980   | hsl( 292  38%  36%) | oklch(0.45 0.13 322 )",
-        "swatches[ 6] aka Swatch.Violet    ": "#493275   | hsl( 261  40%  33%) | oklch(0.38 0.11 297 )",
-        "swatches[ 7] aka Swatch.BlueDark  ": "#34427E   | hsl( 229  42%  35%) | oklch(0.4  0.1  271 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#493277   | hsl( 260  41%  33%) | oklch(0.38 0.11 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#33417F   | hsl( 229  43%  35%) | oklch(0.4  0.11 271 )",
         "swatches[ 8] aka Swatch.Blue      ": "#4468AD   | hsl( 219  44%  47%) | oklch(0.52 0.12 262 )",
-        "swatches[ 9] aka Swatch.BlueSky   ": "#5B86AE   | hsl( 209  34%  52%) | oklch(0.6  0.08 247 )",
-        "swatches[10] aka Swatch.Turquoise ": "#659A99   | hsl( 179  21%  50%) | oklch(0.65 0.06 194 )",
-        "swatches[11] aka Swatch.GreenDark ": "#466A5E   | hsl( 160  20%  35%) | oklch(0.49 0.05 171 )",
-        "swatches[12] aka Swatch.Green     ": "#5E8858   | hsl( 112  21%  44%) | oklch(0.58 0.09 141 )",
-        "swatches[13] aka Swatch.GreenLight": "#809A61   | hsl(  87  23%  49%) | oklch(0.65 0.09 129 )",
-        "swatches[14] aka Swatch.Yellow    ": "#BD9455   | hsl(  36  44%  54%) | oklch(0.69 0.09  77 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#5385AF   | hsl( 207  37%  51%) | oklch(0.6  0.08 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#5B9B9E   | hsl( 183  27%  49%) | oklch(0.65 0.07 200 )",
+        "swatches[11] aka Swatch.GreenDark ": "#416E63   | hsl( 165  26%  34%) | oklch(0.5  0.05 177 )",
+        "swatches[12] aka Swatch.Green     ": "#5A8955   | hsl( 114  23%  44%) | oklch(0.58 0.09 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#7F9C5E   | hsl(  88  25%  49%) | oklch(0.66 0.09 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#C09251   | hsl(  35  47%  54%) | oklch(0.69 0.1   74 )",
         "swatches[15] aka Swatch.Orange    ": "#AF573A   | hsl(  15  50%  46%) | oklch(0.56 0.12  39 )",
-        "swatches[16] aka Swatch.Brown     ": "#6C4639   | hsl(  15  31%  32%) | oklch(0.43 0.06  40 )",
+        "swatches[16] aka Swatch.Brown     ": "#734536   | hsl(  15  36%  33%) | oklch(0.44 0.07  39 )",
       }
     `);
   });

package/src/design-system/fns.deneutralize.test.ts

@@ -0,0 +1,44 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[0];
+
+describe("deneutralize", () => {
+  test("snapshot", () => {
+    // FIXME: black and white are identity
+    // you may notice this in vizydrop, as it's the only UI that leaves user-defined colors non-trimmed
+    // revisit after P3/oklch transition maybe
+    expect(userColorChoices(theme.fns.deneutralize)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "CMYK Cyan   ": "#3EFBF3   | hsl( 177  96%  61%) | oklch(0.9  0.14 191 )",
+        "CMYK Magenta": "#FA50F9   | hsl( 300  94%  65%) | oklch(0.73 0.27 328 )",
+        "CMYK Yellow ": "#FEFF14   | hsl(  60 100%  54%) | oklch(0.97 0.21 110 )",
+        "Noti green  ": "#DBE3DD   | hsl( 135  13%  87%) | oklch(0.91 0.01 154 )",
+        "Noti red    ": "#E6D7D4   | hsl(  10  26%  87%) | oklch(0.89 0.02  31 )",
+        "Noti yellow ": "#EDE3C1   | hsl(  46  55%  84%) | oklch(0.92 0.05  94 )",
+        "RGB  Blue   ": "#1631EA   | hsl( 232  83%  50%) | oklch(0.46 0.27 266 )",
+        "RGB  Green  ": "#5AF830   | hsl( 107  93%  58%) | oklch(0.86 0.26 140 )",
+        "RGB  Red    ": "#E33A2E   | hsl(   4  76%  54%) | oklch(0.6  0.21  29 )",
+        "White       ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#4D4747   | hsl(   0   4%  29%) | oklch(0.4  0.01  17 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#818589   | hsl( 210   3%  52%) | oklch(0.61 0.01 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#A0A3A7   | hsl( 214   4%  64%) | oklch(0.71 0.01 255 )",
+        "swatches[ 3] aka Swatch.Red       ": "#BB332F   | hsl(   2  60%  46%) | oklch(0.53 0.17  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#CD4370   | hsl( 340  58%  53%) | oklch(0.59 0.18   4 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9A47A8   | hsl( 291  41%  47%) | oklch(0.54 0.17 322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6542A5   | hsl( 261  43%  45%) | oklch(0.47 0.15 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4356B0   | hsl( 230  45%  48%) | oklch(0.49 0.14 271 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#4F81E1   | hsl( 219  71%  60%) | oklch(0.62 0.16 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#52A2E2   | hsl( 207  71%  60%) | oklch(0.69 0.12 245 )",
+        "swatches[10] aka Swatch.Turquoise ": "#48BEC3   | hsl( 182  51%  52%) | oklch(0.74 0.1  199 )",
+        "swatches[11] aka Swatch.GreenDark ": "#33907D   | hsl( 168  48%  38%) | oklch(0.59 0.09 177 )",
+        "swatches[12] aka Swatch.Green     ": "#64AA5D   | hsl( 115  31%  52%) | oklch(0.67 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#93BC5F   | hsl(  86  41%  55%) | oklch(0.74 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#EBA944   | hsl(  36  81%  59%) | oklch(0.78 0.14  74 )",
+        "swatches[15] aka Swatch.Orange    ": "#DE653C   | hsl(  15  71%  55%) | oklch(0.65 0.16  39 )",
+        "swatches[16] aka Swatch.Brown     ": "#9F543B   | hsl(  15  46%  43%) | oklch(0.53 0.11  39 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.icon.dark.warm.test.ts

@@ -12,8 +12,8 @@ test("snapshot", () => {
         "fg": "#747474   | hsl(none   0%  45%) | oklch(0.56 0    none)",
       },
       "CMYK Cyan   ": {
-        "bg": "#023F3C   | hsl( 177  94%  13%) | oklch(0.33 0.06 189 )",
-        "fg": "#63F7EE   | hsl( 176  90%  68%) | oklch(0.89 0.13 190 )",
+        "bg": "#003F3C   | hsl( 177 100%  12%) | oklch(0.33 0.06 189 )",
+        "fg": "#5EF8F1   | hsl( 177  92%  67%) | oklch(0.9  0.13 191 )",
       },
       "CMYK Magenta": {
         "bg": "#502A4F   | hsl( 302  31%  24%) | oklch(0.35 0.08 328 )",
@@ -33,7 +33,7 @@ test("snapshot", () => {
       },
       "Noti yellow ": {
         "bg": "#3F3820   | hsl(  46  33%  19%) | oklch(0.34 0.04  94 )",
-        "fg": "#F1E2AD   | hsl(  47  71%  81%) | oklch(0.91 0.07  94 )",
+        "fg": "#F2E3AE   | hsl(  47  72%  82%) | oklch(0.92 0.07  94 )",
       },
       "RGB  Blue   ": {
         "bg": "#253662   | hsl( 223  45%  26%) | oklch(0.34 0.08 266 )",
@@ -76,48 +76,48 @@ test("snapshot", () => {
         "fg": "#A056AC   | hsl( 292  34%  51%) | oklch(0.57 0.15 322 )",
       },
       "swatches[ 6] aka Swatch.Violet    ": {
-        "bg": "#3D3355   | hsl( 258  25%  27%) | oklch(0.35 0.06 297 )",
-        "fg": "#8063BC   | hsl( 260  40%  56%) | oklch(0.57 0.14 297 )",
+        "bg": "#3D3356   | hsl( 257  26%  27%) | oklch(0.35 0.06 296 )",
+        "fg": "#8063BE   | hsl( 259  41%  57%) | oklch(0.57 0.14 296 )",
       },
       "swatches[ 7] aka Swatch.BlueDark  ": {
-        "bg": "#2E3756   | hsl( 227  30%  26%) | oklch(0.34 0.06 271 )",
-        "fg": "#5B6EBF   | hsl( 229  44%  55%) | oklch(0.56 0.13 272 )",
+        "bg": "#2E3757   | hsl( 227  31%  26%) | oklch(0.34 0.06 271 )",
+        "fg": "#5A6EC1   | hsl( 228  45%  55%) | oklch(0.56 0.13 271 )",
       },
       "swatches[ 8] aka Swatch.Blue      ": {
         "bg": "#263859   | hsl( 219  40%  25%) | oklch(0.34 0.06 262 )",
         "fg": "#5582D8   | hsl( 219  63%  59%) | oklch(0.61 0.14 262 )",
       },
       "swatches[ 9] aka Swatch.BlueSky   ": {
-        "bg": "#243A4F   | hsl( 209  37%  23%) | oklch(0.34 0.05 248 )",
-        "fg": "#65A3DA   | hsl( 208  61%  63%) | oklch(0.7  0.1  247 )",
+        "bg": "#213A50   | hsl( 208  42%  22%) | oklch(0.34 0.05 246 )",
+        "fg": "#5CA2DB   | hsl( 207  64%  61%) | oklch(0.69 0.11 245 )",
       },
       "swatches[10] aka Swatch.Turquoise ": {
-        "bg": "#1D3D3D   | hsl( 180  36%  18%) | oklch(0.34 0.04 196 )",
-        "fg": "#63BBBA   | hsl( 179  39%  56%) | oklch(0.74 0.08 194 )",
+        "bg": "#193D3F   | hsl( 183  43%  17%) | oklch(0.33 0.04 200 )",
+        "fg": "#58BCC1   | hsl( 183  46%  55%) | oklch(0.74 0.09 200 )",
       },
       "swatches[11] aka Swatch.GreenDark ": {
-        "bg": "#253D35   | hsl( 160  24%  19%) | oklch(0.34 0.03 171 )",
-        "fg": "#488A76   | hsl( 162  31%  41%) | oklch(0.58 0.08 172 )",
+        "bg": "#213D37   | hsl( 167  30%  18%) | oklch(0.34 0.04 179 )",
+        "fg": "#3F8E7D   | hsl( 167  39%  40%) | oklch(0.59 0.08 177 )",
       },
       "swatches[12] aka Swatch.Green     ": {
-        "bg": "#283E25   | hsl( 113  25%  19%) | oklch(0.34 0.05 142 )",
-        "fg": "#6DA766   | hsl( 114  27%  53%) | oklch(0.67 0.11 142 )",
+        "bg": "#273E24   | hsl( 113  27%  19%) | oklch(0.34 0.05 142 )",
+        "fg": "#6AA864   | hsl( 115  28%  53%) | oklch(0.67 0.12 142 )",
       },
       "swatches[13] aka Swatch.GreenLight": {
-        "bg": "#303C20   | hsl(  86  30%  18%) | oklch(0.34 0.05 128 )",
-        "fg": "#96B96B   | hsl(  87  36%  57%) | oklch(0.74 0.11 129 )",
+        "bg": "#2F3D1F   | hsl(  88  33%  18%) | oklch(0.34 0.05 129 )",
+        "fg": "#96BB68   | hsl(  87  38%  57%) | oklch(0.75 0.12 129 )",
       },
       "swatches[14] aka Swatch.Yellow    ": {
-        "bg": "#483516   | hsl(  37  53%  18%) | oklch(0.34 0.05  78 )",
-        "fg": "#E3AD58   | hsl(  37  71%  62%) | oklch(0.78 0.12  77 )",
+        "bg": "#4A3415   | hsl(  35  56%  19%) | oklch(0.34 0.06  73 )",
+        "fg": "#E6AB55   | hsl(  36  74%  62%) | oklch(0.78 0.12  74 )",
       },
       "swatches[15] aka Swatch.Orange    ": {
         "bg": "#562D1F   | hsl(  15  47%  23%) | oklch(0.35 0.06  39 )",
         "fg": "#D76B47   | hsl(  15  64%  56%) | oklch(0.65 0.15  39 )",
       },
       "swatches[16] aka Swatch.Brown     ": {
-        "bg": "#4B332A   | hsl(  16  28%  23%) | oklch(0.35 0.04  41 )",
-        "fg": "#A0644F   | hsl(  16  34%  47%) | oklch(0.56 0.08  40 )",
+        "bg": "#4D3229   | hsl(  15  31%  23%) | oklch(0.35 0.04  39 )",
+        "fg": "#A6614A   | hsl(  15  38%  47%) | oklch(0.57 0.1   39 )",
       },
     }
   `);

package/src/design-system/fns.icon.light.warm.test.ts

@@ -12,8 +12,8 @@ test("snapshot", () => {
         "fg": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
       },
       "CMYK Cyan   ": {
-        "bg": "#DCF0EE   | hsl( 174  40%  90%) | oklch(0.94 0.02 190 )",
-        "fg": "#00D5CC   | hsl( 177 100%  42%) | oklch(0.79 0.14 189 )",
+        "bg": "#DBF0EE   | hsl( 174  41%  90%) | oklch(0.94 0.02 190 )",
+        "fg": "#00D6CF   | hsl( 178 100%  42%) | oklch(0.79 0.14 191 )",
       },
       "CMYK Magenta": {
         "bg": "#FDE4FB   | hsl( 305  86%  94%) | oklch(0.95 0.04 328 )",
@@ -77,47 +77,47 @@ test("snapshot", () => {
       },
       "swatches[ 6] aka Swatch.Violet    ": {
         "bg": "#EDE9FA   | hsl( 254  63%  95%) | oklch(0.94 0.02 297 )",
-        "fg": "#6542A3   | hsl( 262  42%  45%) | oklch(0.47 0.15 297 )",
+        "fg": "#6542A5   | hsl( 261  43%  45%) | oklch(0.47 0.15 296 )",
       },
       "swatches[ 7] aka Swatch.BlueDark  ": {
         "bg": "#E6EBFB   | hsl( 226  72%  94%) | oklch(0.94 0.02 272 )",
-        "fg": "#4557AF   | hsl( 230  43%  48%) | oklch(0.49 0.14 272 )",
+        "fg": "#4356B0   | hsl( 230  45%  48%) | oklch(0.49 0.14 271 )",
       },
       "swatches[ 8] aka Swatch.Blue      ": {
         "bg": "#E3ECFC   | hsl( 218  81%  94%) | oklch(0.94 0.02 262 )",
         "fg": "#4F81E1   | hsl( 219  71%  60%) | oklch(0.62 0.16 262 )",
       },
       "swatches[ 9] aka Swatch.BlueSky   ": {
-        "bg": "#E3EDF7   | hsl( 210  56%  93%) | oklch(0.94 0.02 248 )",
-        "fg": "#5DA3E1   | hsl( 208  69%  62%) | oklch(0.7  0.12 247 )",
+        "bg": "#E2EDF7   | hsl( 209  57%  93%) | oklch(0.94 0.02 245 )",
+        "fg": "#52A2E2   | hsl( 207  71%  60%) | oklch(0.69 0.12 245 )",
       },
       "swatches[10] aka Swatch.Turquoise ": {
-        "bg": "#E1EEEE   | hsl( 180  28%  91%) | oklch(0.94 0.01 197 )",
-        "fg": "#57BDBC   | hsl( 179  44%  54%) | oklch(0.74 0.09 194 )",
+        "bg": "#E0EFEF   | hsl( 180  32%  91%) | oklch(0.94 0.02 197 )",
+        "fg": "#48BEC3   | hsl( 182  51%  52%) | oklch(0.74 0.1  199 )",
       },
       "swatches[11] aka Swatch.GreenDark ": {
-        "bg": "#E3EEEA   | hsl( 158  24%  91%) | oklch(0.94 0.01 172 )",
-        "fg": "#3F8B76   | hsl( 163  38%  40%) | oklch(0.58 0.08 173 )",
+        "bg": "#E2EEEB   | hsl( 165  26%  91%) | oklch(0.94 0.01 179 )",
+        "fg": "#33907D   | hsl( 168  48%  38%) | oklch(0.59 0.09 177 )",
       },
       "swatches[12] aka Swatch.Green     ": {
-        "bg": "#E4EEE3   | hsl( 115  24%  91%) | oklch(0.94 0.02 143 )",
-        "fg": "#68A960   | hsl( 113  30%  52%) | oklch(0.67 0.12 142 )",
+        "bg": "#E4EFE3   | hsl( 115  27%  91%) | oklch(0.94 0.02 143 )",
+        "fg": "#64AA5D   | hsl( 115  31%  52%) | oklch(0.67 0.13 142 )",
       },
       "swatches[13] aka Swatch.GreenLight": {
-        "bg": "#E7EEE1   | hsl(  92  28%  91%) | oklch(0.94 0.02 130 )",
-        "fg": "#94BA62   | hsl(  86  39%  56%) | oklch(0.74 0.12 128 )",
+        "bg": "#E7EEE0   | hsl(  90  29%  91%) | oklch(0.94 0.02 129 )",
+        "fg": "#93BC5F   | hsl(  86  41%  55%) | oklch(0.74 0.13 129 )",
       },
       "swatches[14] aka Swatch.Yellow    ": {
         "bg": "#F4EADD   | hsl(  34  51%  91%) | oklch(0.94 0.02  75 )",
-        "fg": "#E8AB49   | hsl(  37  78%  60%) | oklch(0.78 0.13  76 )",
+        "fg": "#EBA944   | hsl(  36  81%  59%) | oklch(0.78 0.14  74 )",
       },
       "swatches[15] aka Swatch.Orange    ": {
         "bg": "#FCE7E1   | hsl(  13  82%  94%) | oklch(0.94 0.02  37 )",
         "fg": "#DD663D   | hsl(  15  70%  55%) | oklch(0.65 0.16  39 )",
       },
       "swatches[16] aka Swatch.Brown     ": {
-        "bg": "#F5E9E5   | hsl(  15  44%  93%) | oklch(0.94 0.01  39 )",
-        "fg": "#98563F   | hsl(  16  41%  42%) | oklch(0.52 0.09  40 )",
+        "bg": "#F6E9E4   | hsl(  17  50%  93%) | oklch(0.94 0.02  42 )",
+        "fg": "#9F543B   | hsl(  15  46%  43%) | oklch(0.53 0.11  39 )",
       },
     }
   `);

package/src/design-system/fns.icon.ts

@@ -35,7 +35,7 @@ const PASTEL_C_CEILING = 0.06;
 const PASTEL_L_HIGH = 0.8;
 const PASTEL_L_LOW = 0.25;
 
-function makeIconSide(
+export function makeIconSide(
   surface: string,
   {
     bgLc,
@@ -98,27 +98,35 @@ function makeIconSide(
   };
 }
 
+export const lightIconParams = {
+  bgChromaScale: 0.15,
+  fgChromaScale: 1.0,
+  bgPastelFloor: 0.02,
+  fgPastelFloor: 0.08,
+  bgSaturationCap: 0.05,
+  fgSaturationCap: 0.16,
+};
+
+export const darkIconParams = {
+  bgChromaScale: 0.4,
+  fgChromaScale: 0.9,
+  bgPastelFloor: 0.04,
+  fgPastelFloor: 0.07,
+  bgSaturationCap: 0.08,
+  fgSaturationCap: 0.15,
+};
+
 const makeIconAdapt = (surface: Def) =>
   [
     makeIconSide(surface[0], {
       bgLc: 8,
       fgLc: 33,
-      bgChromaScale: 0.15,
-      fgChromaScale: 1.0,
-      bgPastelFloor: 0.02,
-      fgPastelFloor: 0.08,
-      bgSaturationCap: 0.05,
-      fgSaturationCap: 0.16,
+      ...lightIconParams,
     }),
     makeIconSide(surface[1], {
       bgLc: 5,
       fgLc: 28,
-      bgChromaScale: 0.4,
-      fgChromaScale: 0.9,
-      bgPastelFloor: 0.04,
-      fgPastelFloor: 0.07,
-      bgSaturationCap: 0.08,
-      fgSaturationCap: 0.15,
+      ...darkIconParams,
     }),
   ] satisfies ModeDef<ReturnType<typeof makeIconSide>>;
 

package/src/design-system/fns.ts

@@ -1,12 +1,12 @@
 import {a11yColor} from "../a11y-color";
 import {colorFromLcCompensated, lightnessFromLc} from "../apca";
-import {produceColor, colorFromUnsafe, oklchFrom} from "../color-utils";
+import {colorFromUnsafe, oklchFrom, produceColor} from "../color-utils";
 import {memoizeColor} from "../memoize";
 import {alpha, type AlphaValue} from "./alpha";
 import {getDarkenColor} from "./colors-js";
 import {mapDef} from "./def";
 import {makeEnumFn} from "./fns.enum";
-import {makeIconFn} from "./fns.icon";
+import {darkIconParams, lightIconParams, makeIconFn, makeIconSide} from "./fns.icon";
 import type {Def, EnumDefs, ModeDef} from "./types";
 
 function makeAdaptiveSide(
@@ -31,17 +31,34 @@ export const makeAdapt = (surface: Def, fgContrasts: [light: number, dark: numbe
 
 export function createColorFns(
   deneutralizeFilterDef: ModeDef<(color: string) => string>,
-  defs: {icon: Def; adapt: Def; callout: Def; highlight: Def; enum: EnumDefs; text: Def}
+  defs: {icon: Def; adapt: Def; callout: Def; highlight: Def; enum: EnumDefs}
 ) {
   const adapt = makeAdapt(defs.adapt);
 
   const icon = makeIconFn(deneutralizeFilterDef, defs.adapt);
 
+  const typeLabelFgAdapt = [
+    makeIconSide(defs.adapt[0], {
+      bgLc: 8,
+      fgLc: 65,
+      ...lightIconParams,
+    }),
+    makeIconSide(defs.adapt[1], {
+      bgLc: 5,
+      fgLc: 60,
+      ...darkIconParams,
+    }),
+  ] as const;
+
   return {
     deneutralize: deneutralizeFilterDef,
 
     adapt,
 
+    typeLabelFg: mapDef(deneutralizeFilterDef, (deneutralize, side) =>
+      memoizeColor((neutralColor: string) => typeLabelFgAdapt[side].fg(deneutralize(neutralColor)))
+    ),
+
     badge: mapDef(deneutralizeFilterDef, (deneutralize, side) =>
       memoizeColor(
         (neutralColor: string | null) => {
@@ -64,8 +81,15 @@ export function createColorFns(
 
     enum: makeEnumFn(deneutralizeFilterDef, defs.adapt, defs.enum),
 
+    // TODO pick better name:
+    //   appIcon
+    //   typeIcon
+    //   relationIcon
+    //   userColorChoiceIcon
     icon,
 
+    buttonBg: mapDef(icon, (icon) => (color: string) => icon(color).fg),
+
     callout: mapDef(deneutralizeFilterDef, (deneutralize, side) => {
       const surface = defs.callout[side];
       return memoizeColor((neutralColor: string) => {

package/src/design-system/typography.ts

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 
-import {themeVars} from "../theming";
+import {themeVars} from "../theming.generated";
 import {transition} from "./animation";
 import {border} from "./layout";
 

package/src/design-system.ts

@@ -43,4 +43,4 @@ export {
   sidebarMenuItemHeightVar,
   sidebarMenuIconSizeVar,
   themeVars,
-} from "./theming";
+} from "./theming.generated";

package/src/fibermoji-placeholder.tsx

@@ -130,11 +130,10 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
             position: absolute;
             line-height: 0;
             inset: 0;
-            mix-blend-mode: plus-darker;
-            opacity: 0.4;
+            opacity: 0.6;
           `}
         >
-          <Lock iconSize={size * 0.6} containerSize={size} />
+          <Lock iconSize={size * 0.6} containerSize={size} color={null} />
         </div>
       </div>
     );

package/src/icons/icon.tsx

@@ -3,6 +3,7 @@ import {forwardRef} from "react";
 
 import {border, iconSize as defaultIconSize, themeVars, viewBoxSize} from "../design-system";
 import {useTheme} from "../theme-provider";
+import DatabaseSvg from "./ast/database";
 import {generateIconFromAst} from "./generate-icon-from-ast";
 import type {IconProps} from "./types";
 
@@ -42,7 +43,16 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   ref
 ) {
   const theme = useTheme();
-  const resolvedColor = typeof color === "string" && !colorProcessed ? theme.fns.deneutralize(color) : color;
+  let resolvedColor: string | null | undefined;
+  if (typeof color === "string" && !colorProcessed && !color.startsWith("var(")) {
+    if (icon === DatabaseSvg) {
+      resolvedColor = theme.fns.badge(color).bg;
+    } else {
+      resolvedColor = theme.fns.icon(color).fg;
+    }
+  } else {
+    resolvedColor = color;
+  }
   const iconStyle = {
     [iconColorVar]: resolvedColor,
     [iconContainerSizeVar]: containerSize ? containerSize + "px" : undefined,

package/src/icons/types.ts

@@ -26,7 +26,7 @@ export type IconBaseProps = Omit<SVGProps<SVGSVGElement>, "ref" | "color"> & {
   iconSize?: number;
   /** Pass null to inherit parent's color */
   color?: string | null | undefined;
-  /** Skip auto-deneutralize when the color is already processed for display (e.g. a11y-adjusted) */
+  /** Skip deneutralize&normalize when the color is already processed for display (e.g. a11y-adjusted) */
   colorProcessed?: boolean;
 };
 

package/src/layout-styles.ts

@@ -16,7 +16,7 @@ import {
   sidebarMenuItemHeightVar,
   sidebarMenuIconSizeVar,
   menuItemHeightVar,
-} from "./theming";
+} from "./theming.generated";
 
 export const layoutStyles = css`
   :global() {
@@ -40,5 +40,9 @@ export const layoutStyles = css`
         ${listRowSurfaceFontSizeVar}: ${fontSize.md}px;
       }
     }
+
+    :focus:not(:focus-visible) {
+      outline: none;
+    }
   }
 `;

package/src/link-input/components/ant-text-area-with-custom-read-state.tsx

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import {useCallback, useRef, useState} from "react";
 
 import {AntTextArea} from "../../antd";
+import type {TextAreaRef} from "../../antd/input";
 
 const wrapperStyle = css`
   ${{
@@ -33,7 +34,7 @@ export const AntTextAreaWithCustomReadState = ({
   ...rest
 }: AntTextAreaWithCustomReadStateProps) => {
   const [focus, setFocus] = useState(false);
-  const input = useRef<HTMLTextAreaElement>(null);
+  const input = useRef<TextAreaRef>(null);
 
   const handleFocus = useCallback(
     (e: React.FocusEvent<HTMLTextAreaElement>) => {

package/src/media-query-utils.ts

@@ -7,17 +7,8 @@ export function getMediaQueryList(query: string) {
 }
 
 export function subscribeOnChange(mediaQueryList: MediaQueryList, cb: (evt: MediaQueryListEvent) => void): () => void {
-  // Safari 13 doesn't support addEventListener here
-  if (mediaQueryList.addEventListener) {
-    mediaQueryList.addEventListener("change", cb);
-    return () => {
-      mediaQueryList.removeEventListener("change", cb);
-    };
-  } else if (mediaQueryList.addListener) {
-    mediaQueryList.addListener(cb);
-    return () => {
-      mediaQueryList.removeListener(cb);
-    };
-  }
-  return noop;
+  mediaQueryList.addEventListener("change", cb);
+  return () => {
+    mediaQueryList.removeEventListener("change", cb);
+  };
 }