feat(style): add stateLayerPlugin

ui/style/lib/state-layer.ts

@@ -0,0 +1,44 @@
+import plugin from 'tailwindcss/plugin.js';
+// @ts-expect-error Could not find a declaration file for module
+import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette.js';
+
+const stateOpacity = {
+  hover: 0.08,
+  focus: 0.12,
+  pressed: 0.12,
+  dragged: 0.16,
+} as const;
+
+export const stateLayerPlugin = plugin(({matchUtilities, theme}) => {
+  matchUtilities(
+      {
+        state: (value) => {
+          if (typeof value !== 'function') return null;
+          const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+          const colors = {
+            base: makeColor({opacityValue: 1}),
+            hover: makeColor({opacityValue: stateOpacity.hover}),
+            focus: makeColor({opacityValue: stateOpacity.focus}),
+            pressed: makeColor({opacityValue: stateOpacity.pressed}),
+          };
+          return {
+            'color': colors.base,
+            '&:hover': {
+              backgroundImage: `linear-gradient(${colors.hover}, ${colors.hover})`,
+            },
+            '&:active': {
+              backgroundImage: `linear-gradient(${colors.pressed}, ${colors.pressed})`,
+            },
+            '&:focus:not(:hover), &:focus-within:not(:hover)': {
+              'backgroundImage': `linear-gradient(${colors.focus}, ${colors.focus})`,
+            },
+          };
+        },
+      },
+      {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        values: (({DEFAULT: _, ...colors}) => colors)(flattenColorPalette(theme('colors'))),
+        type: 'color',
+      },
+  );
+});

ui/style/lib/tailwind.ts

@@ -3,6 +3,7 @@ import {join, dirname} from 'node:path';
 import {colorTheme} from './colors.js';
 import {elevationPlugin} from './elevation.js';
 import {screenTheme} from './screen.js';
+import {stateLayerPlugin} from './state-layer.js';
 import {typographyTheme} from './typography.js';
 import {zIndexTheme} from './z-index.js';
 
@@ -25,5 +26,6 @@ export const tailwindConfig: Config = {
   },
   plugins: [
     elevationPlugin,
+    stateLayerPlugin,
   ],
 };