@fibery/ui-kit 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 4.2.0
+
+### Minor Changes
+
+- eef68ad: Sync dark theme color tokens correction
+
 ## 4.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -39,7 +39,6 @@
     "node-types-local": "npm:@types/node@^24",
     "photoswipe": "5.4.4",
     "popper-max-size-modifier": "0.2.0",
-    "prop-types": "15.7.2",
     "rc-dialog": "9.0.4",
     "rc-input": "0.1.4",
     "rc-input-number": "8.5.0",
@@ -74,11 +73,10 @@
     "@types/culori": "4.0.1",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
-    "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
     "@types/react-color": "2.13.5",
     "@types/react-dom": "18.3.1",
-    "@typescript/native-preview": "beta",
+    "@typescript/native-preview": "7.0.0-dev.20260604.1",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "13.0.6",
@@ -86,7 +84,7 @@
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "6.0.1-rc",
+    "typescript": "6.0.3",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.2"
   },

package/src/antd/ant-upload.tsx

@@ -64,7 +64,7 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload": {
+    ":where(&) .ant-upload": {
       boxSizing: "border-box",
       margin: 0,
       padding: 0,
@@ -73,30 +73,30 @@ export const antUploadStyle = css`
       listStyle: "none",
       outline: "none",
     },
-    "& .ant-upload p": {
+    ":where(&) .ant-upload p": {
       margin: 0,
     },
-    "& .ant-upload-btn": {
+    ":where(&) .ant-upload-btn": {
       display: "block",
       width: "100%",
       outline: "none",
     },
-    "& .ant-upload input[type='file']": {
+    ":where(&) .ant-upload input[type='file']": {
       cursor: "pointer",
     },
-    "& .ant-upload.ant-upload-disabled": {
+    ":where(&) .ant-upload.ant-upload-disabled": {
       color: themeVars.disabledTextColor,
       cursor: "not-allowed",
     },
-    "& .ant-upload.ant-upload-disabled input[type='file']": {
+    ":where(&) .ant-upload.ant-upload-disabled input[type='file']": {
       cursor: "not-allowed",
     },
-    "& .ant-upload-select": {
+    ":where(&) .ant-upload-select": {
       display: "inline-flex",
       alignItems: "stretch",
       maxWidth: "100%",
     },
-    "& .ant-upload-select > .ant-upload": {
+    ":where(&) .ant-upload-select > .ant-upload": {
       display: "inline-flex",
       alignItems: "center",
       outline: "none",
@@ -139,23 +139,23 @@ export const antUploadStyle = css`
         transition: "none",
       },
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-btn": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-btn": {
       display: "table",
       height: "100%",
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-drag-container": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-drag-container": {
       display: "table-cell",
       verticalAlign: "middle",
     },
-    "& .ant-upload-picture-card-wrapper": {
+    ":where(&) .ant-upload-picture-card-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-upload-picture-card-wrapper::before": {
+    ":where(&) .ant-upload-picture-card-wrapper::before": {
       display: "table",
       content: "''",
     },
-    "& .ant-upload-picture-card-wrapper::after": {
+    ":where(&) .ant-upload-picture-card-wrapper::after": {
       display: "table",
       clear: "both",
       content: "''",

package/src/antd/auto-complete.tsx

@@ -13,14 +13,14 @@ import {wrapWithPopupContainer} from "./utils";
 const autoCompleteStyles = css`
   ${{
     position: "relative",
-    "& .ant-select": {
+    ":where(&) .ant-select": {
       ...textStyles.regular,
       boxSizing: "border-box",
       display: "inline-block",
       width: "100%",
       cursor: "text",
     },
-    "& .ant-select-selector": {
+    ":where(&) .ant-select-selector": {
       boxSizing: "border-box",
       display: "flex",
       alignItems: "center",
@@ -29,7 +29,7 @@ const autoCompleteStyles = css`
       position: "relative",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-select-selection-search": {
+    ":where(&) .ant-select-selection-search": {
       flex: 1,
       minWidth: 0,
     },
@@ -45,7 +45,7 @@ const autoCompleteStyles = css`
       appearance: "none",
       ...textStyles.regular,
     },
-    "& .ant-select-dropdown": {
+    ":where(&) .ant-select-dropdown": {
       boxSizing: "border-box",
       position: "absolute",
       zIndex: 1050,
@@ -55,16 +55,16 @@ const autoCompleteStyles = css`
       paddingTop: space.s8,
       paddingBottom: space.s8,
     },
-    "& .ant-select-dropdown-hidden": {
+    ":where(&) .ant-select-dropdown-hidden": {
       display: "none",
     },
-    "& .ant-select-item-empty": {
+    ":where(&) .ant-select-item-empty": {
       minHeight: 32,
       padding: "5px 12px",
       lineHeight: "22px",
       color: themeVars.colorTextListItemGeneralDisabled,
     },
-    "& .ant-select-item": {
+    ":where(&) .ant-select-item": {
       ...textStyles.regular,
       color: themeVars.textColor,
       minHeight: 32,
@@ -75,16 +75,16 @@ const autoCompleteStyles = css`
       cursor: "pointer",
       transition: `background-color ${transitions.slow}`,
     },
-    "& .ant-select-item-option-content": {
+    ":where(&) .ant-select-item-option-content": {
       flex: 1,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
     },
-    "& .ant-select-item-option-state": {
+    ":where(&) .ant-select-item-option-state": {
       display: "none",
     },
-    "& .ant-select-item-option": {
+    ":where(&) .ant-select-item-option": {
       display: "flex",
       alignItems: "center",
       "&:hover": {

package/src/antd/input-number.tsx

@@ -23,64 +23,97 @@ const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(fu
 
 const inputNumberStyles = css`
   ${{
-    "& .ant-input-number": {
+    ":where(&) .ant-input-number": {
       boxSizing: "border-box",
       position: "relative",
       display: "inline-flex",
       alignItems: "stretch",
       width: "90px",
+    },
+    "& .ant-input-number": {
       height: "auto",
       border: "none",
       ...textStyles.regular,
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-number-input-wrap": {
+    ":where(&) .ant-input-number-input-wrap": {
       flex: 1,
       minWidth: 0,
     },
-    "& .ant-input-number-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-number-input": {
       boxSizing: "border-box",
       width: "100%",
       height: "100%",
       appearance: "textfield",
     },
-    "& .ant-input-number-input:placeholder-shown": {
-      textOverflow: "ellipsis",
+    "& .ant-input-number-input": {
+      ...inputOverrides.main,
     },
-    "& .ant-input-number-input::-webkit-inner-spin-button, & .ant-input-number-input::-webkit-outer-spin-button": {
-      margin: 0,
-      appearance: "none",
+    ":where(&) .ant-input-number-input:placeholder-shown": {
+      textOverflow: "ellipsis",
     },
-    "& .ant-input-number-handler-wrap": {
+    ":where(&) .ant-input-number-input::-webkit-inner-spin-button, :where(&) .ant-input-number-input::-webkit-outer-spin-button":
+      {
+        margin: 0,
+        appearance: "none",
+      },
+    ":where(&) .ant-input-number-handler-wrap": {
       position: "absolute",
-      top: 1,
-      bottom: 1,
-      right: 1,
       width: 22,
-      backgroundColor: themeVars.transparent,
-      background: themeVars.transparent,
-      // antd hid the stepper arrows until hover/focus; reproduce that (dropped with the vendored CSS)
       opacity: 0,
       transition: `opacity ${transitionDuration.normal} linear ${transitionDuration.faster}`,
     },
-    "& .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
+    ":where(&) .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
       height: "40%",
     },
-    "& .ant-input-number:hover .ant-input-number-handler-wrap, & .ant-input-number-focused .ant-input-number-handler-wrap":
+    ":where(&) .ant-input-number:hover .ant-input-number-handler-wrap, :where(&) .ant-input-number-focused .ant-input-number-handler-wrap":
       {
         opacity: 1,
       },
-    "& .ant-input-number-focused": {boxShadow: "none"},
-    "& .ant-input-number-handler-up, & .ant-input-number-handler-down": {
+    ":where(&) .ant-input-number-handler-up, :where(&) .ant-input-number-handler-down": {
       cursor: "pointer",
     },
-    "& .ant-input-number-handler-up:hover, & .ant-input-number-handler-down:hover": {
+    ":where(&) .ant-input-number-handler-up:hover, :where(&) .ant-input-number-handler-down:hover": {
       height: "60% !important",
     },
-    "& .ant-input-number-handler-up-disabled, & .ant-input-number-handler-down-disabled": {
+    ":where(&) .ant-input-number-handler-up-disabled, :where(&) .ant-input-number-handler-down-disabled": {
       cursor: "not-allowed",
     },
+    ":where(&) .ant-input-number-handler-up-inner, :where(&) .ant-input-number-handler-down-inner": {
+      position: "absolute",
+      right: 4,
+      width: 12,
+      height: 12,
+      lineHeight: "12px",
+      transition: `all ${transitionDuration.faster} linear`,
+      userSelect: "none",
+    },
+    ":where(&) .ant-input-number-handler-up-inner": {
+      top: "50%",
+      marginTop: -5,
+    },
+    ":where(&) .ant-input-number-handler-down-inner": {
+      top: "50%",
+      transform: "translateY(-50%)",
+    },
+    ":where(&) .ant-input-number-handler": {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      height: "50%",
+      overflow: "hidden",
+      lineHeight: 0,
+      textAlign: "center",
+      transition: `all ${transitionDuration.faster} linear`,
+    },
+    "& .ant-input-number-handler-wrap": {
+      top: 1,
+      bottom: 1,
+      right: 1,
+      backgroundColor: themeVars.transparent,
+      background: themeVars.transparent,
+    },
+    "& .ant-input-number-focused": {boxShadow: "none"},
     "& .ant-input-number-handler-up-disabled .ant-input-number-handler-up-inner, & .ant-input-number-handler-down-disabled .ant-input-number-handler-down-inner":
       {
         color: themeVars.disabledTextColor,
@@ -101,33 +134,10 @@ const inputNumberStyles = css`
       },
     "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
       color: themeVars.iconColor,
-      position: "absolute",
-      right: 4,
-      width: 12,
-      height: 12,
-      lineHeight: "12px",
-      transition: `all ${transitionDuration.faster} linear`,
-      userSelect: "none",
-    },
-    "& .ant-input-number-handler-up-inner": {
-      top: "50%",
-      marginTop: -5,
-    },
-    "& .ant-input-number-handler-down-inner": {
-      top: "50%",
-      transform: "translateY(-50%)",
     },
     "& .ant-input-number-handler": {
-      position: "relative",
-      display: "block",
-      width: "100%",
-      height: "50%",
-      overflow: "hidden",
       color: themeVars.iconColor,
-      lineHeight: 0,
-      textAlign: "center",
       borderLeft: themeVars.borderSolidSeparator,
-      transition: `all ${transitionDuration.faster} linear`,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },

package/src/antd/styles.ts

@@ -5,7 +5,7 @@ import {border, layout, shadows, space, textStyles, themeVars, transitions} from
 const inputVariables = {
   default: {
     "--input-border": `${themeVars.inputBorderColor} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.colorAccentStrokeHover} inset`,
+    "--input-hover-border": `${themeVars.inputBorderHoverColor} inset`,
     "--input-focus-border": `0 0 0 1px ${themeVars.colorAccentStrokeFocus} inset`,
     "--input-focus-shadow": `0 0 0 2px ${themeVars.colorAccentStroke}`,
   },
@@ -40,7 +40,7 @@ export const inputOverrides = {
     },
   },
   hover: {
-    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
+    boxShadow: `var(--input-hover-border, ${themeVars.inputBorderHoverColor}) !important`,
     transition: `box-shadow ${transitions.faster}`,
   },
   focus: {
@@ -69,10 +69,12 @@ export const inputStyles = css`
   }
   ${{
     ...textStyles.regular,
-    "& .ant-input, & .ant-input-affix-wrapper, & .ant-input-group-wrapper, & .ant-input-wrapper": {
+    ":where(&) .ant-input, :where(&) .ant-input-affix-wrapper, :where(&) .ant-input-group-wrapper, :where(&) .ant-input-wrapper":
+      {
+        boxSizing: "border-box",
+      },
+    ":where(&) .ant-input-affix-wrapper": {
       boxSizing: "border-box",
-    },
-    "& .ant-input-affix-wrapper": {
       display: "inline-flex",
       alignItems: "center",
       width: "100%",
@@ -83,40 +85,40 @@ export const inputStyles = css`
       boxShadow: "none",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-affix-wrapper > input.ant-input": {
+    ":where(&) .ant-input-affix-wrapper > input.ant-input": {
       minWidth: 0,
       flex: 1,
       padding: "0 12px",
       border: "inherit",
       outline: "inherit",
     },
-    "& .ant-input-prefix, & .ant-input-suffix": {
+    ":where(&) .ant-input-prefix, :where(&) .ant-input-suffix": {
       display: "flex",
       flex: "none",
       alignItems: "center",
     },
     // antd source: spacing between adjacent icons when prefix/suffix holds multiple nodes.
-    "& .ant-input-prefix > *:not(:last-child), & .ant-input-suffix > *:not(:last-child)": {
+    ":where(&) .ant-input-prefix > *:not(:last-child), :where(&) .ant-input-suffix > *:not(:last-child)": {
       marginRight: space.s8,
     },
-    "& .ant-input-suffix": {
+    ":where(&) .ant-input-suffix": {
       marginLeft: space.s6,
     },
-    "& .ant-input-clear-icon": {
+    ":where(&) .ant-input-clear-icon": {
       display: "inline-flex",
       alignItems: "center",
       color: themeVars.iconColor,
       cursor: "pointer",
       lineHeight: 1,
     },
-    "& .ant-input-clear-icon-hidden": {
+    ":where(&) .ant-input-clear-icon-hidden": {
       visibility: "hidden",
     },
-    "& .ant-input-group-wrapper": {
+    ":where(&) .ant-input-group-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-input-wrapper.ant-input-group": {
+    ":where(&) .ant-input-wrapper.ant-input-group": {
       display: "inline-flex",
       width: "100%",
       alignItems: "stretch",
@@ -130,9 +132,8 @@ export const inputStyles = css`
       "&:hover": inputOverrides.hover,
       "&:focus": inputOverrides.focus,
     },
-    "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
-    "& .ant-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
+    ":where(&) .ant-input": {
       // antd source: .ant-input { width: 100%; min-width: 0 } — without it, bare <AntInput>
       // doesn't fill its container and can't shrink inside a flex parent. AutoComplete's
       // .ant-select-selection-search .ant-input rule (two-class selector) beats this on
@@ -140,8 +141,11 @@ export const inputStyles = css`
       width: "100%",
       minWidth: 0,
     },
+    "& .ant-input": {
+      ...inputOverrides.main,
+    },
     // antd source: long placeholders get ellipsis instead of wrap-clip.
-    "& .ant-input:placeholder-shown": {
+    ":where(&) .ant-input:placeholder-shown": {
       textOverflow: "ellipsis",
     },
     // bordered={false} → wrap with `ant-input-borderless` class; strip the box-shadow ring + bg.
@@ -155,7 +159,7 @@ export const inputStyles = css`
     // antd source: inner input inside affix-wrapper must not paint its own focus ring —
     // the wrapper owns the visual focus state. Without this prefix/suffix usage shows a
     // double ring.
-    "& .ant-input-affix-wrapper > .ant-input:focus": {
+    ":where(&) .ant-input-affix-wrapper > .ant-input:focus": {
       boxShadow: "none !important",
     },
     "& .ant-input-status-error": inputVariables.error,
@@ -170,13 +174,15 @@ export const inputStyles = css`
     "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
       borderColor: "transparent",
     },
-    // antd source: textarea defaults — min-height anchors empty <AntTextArea> to a sane
-    // height, max-width prevents user-resize from blowing out the container, and
-    // vertical-align: bottom matches the baseline of a single-line <input> next to it.
+    // Textarea padding must beat inputOverrides.main's zero vertical padding so rc-textarea
+    // autosize measures the same row height as the rendered control.
     "& textarea.ant-input": {
       paddingTop: space.s8,
       paddingBottom: space.s8,
-      minHeight: layout.inputHeight,
+    },
+    // antd source: textarea defaults — max-width prevents user-resize from blowing out the
+    // container, and vertical-align: bottom matches the baseline of a single-line <input> next to it.
+    ":where(&) textarea.ant-input": {
       maxWidth: "100%",
       verticalAlign: "bottom",
     },

package/src/antd/tabs.tsx

@@ -16,16 +16,16 @@ const PrefixedTabs = forwardRef<HTMLDivElement, TabsPropsAny>(function PrefixedT
 export const tabsStyles = css`
   ${{
     width: "100%",
-    "& .ant-tabs": {
+    ":where(&) .ant-tabs": {
       boxSizing: "border-box",
       display: "flex",
       overflow: "visible",
       width: "100%",
     },
-    "& .ant-tabs-top, & .ant-tabs-bottom": {
+    ":where(&) .ant-tabs-top, :where(&) .ant-tabs-bottom": {
       flexDirection: "column",
     },
-    "& .ant-tabs-nav": {
+    ":where(&) .ant-tabs-nav": {
       display: "flex",
       flex: "none",
       alignItems: "center",
@@ -41,7 +41,7 @@ export const tabsStyles = css`
         content: "''",
       },
     },
-    "& .ant-tabs-nav-wrap": {
+    ":where(&) .ant-tabs-nav-wrap": {
       display: "flex",
       flex: "auto",
       overflow: "hidden",
@@ -53,7 +53,7 @@ export const tabsStyles = css`
       marginLeft: space.s12,
       marginRight: space.s12,
     },
-    "& .ant-tabs-nav-wrap::before, & .ant-tabs-nav-wrap::after": {
+    ":where(&) .ant-tabs-nav-wrap::before, :where(&) .ant-tabs-nav-wrap::after": {
       position: "absolute",
       zIndex: 1,
       opacity: 0,
@@ -61,27 +61,27 @@ export const tabsStyles = css`
       content: "''",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-list": {
+    ":where(&) .ant-tabs-nav-list": {
       position: "relative",
       display: "flex",
       transition: `transform ${transitions.normal}`,
     },
-    "& .ant-tabs-nav-operations": {
+    ":where(&) .ant-tabs-nav-operations": {
       display: "flex",
       alignSelf: "stretch",
     },
-    "& .ant-tabs-nav-operations-hidden": {
+    ":where(&) .ant-tabs-nav-operations-hidden": {
       position: "absolute",
       visibility: "hidden",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-more": {
+    ":where(&) .ant-tabs-nav-more": {
       position: "relative",
       padding: `${space.s8}px ${space.s16}px`,
       backgroundColor: themeVars.transparent,
       border: 0,
     },
-    "& .ant-tabs-nav-more::after": {
+    ":where(&) .ant-tabs-nav-more::after": {
       position: "absolute",
       right: 0,
       bottom: 0,
@@ -90,13 +90,13 @@ export const tabsStyles = css`
       transform: "translateY(100%)",
       content: "''",
     },
-    "& .ant-tabs-extra-content": {
+    ":where(&) .ant-tabs-extra-content": {
       flex: "none",
     },
-    "& .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
+    ":where(&) .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
       justifyContent: "center",
     },
-    "& .ant-tabs-ink-bar": {
+    ":where(&) .ant-tabs-ink-bar": {
       position: "absolute",
       bottom: 0,
       backgroundColor: themeVars.colorAccent,
@@ -104,12 +104,12 @@ export const tabsStyles = css`
       pointerEvents: "none",
       transition: `left ${transitions.faster}, right ${transitions.faster}, width ${transitions.faster}`,
     },
-    "& .ant-tabs-tab, & .ant-tabs-tab:hover, & .ant-tabs-tab-btn:active, & .ant-tabs-tabpane, & .ant-tabs-tab-active .ant-tabs-tab-btn":
+    ":where(&) .ant-tabs-tab, :where(&) .ant-tabs-tab:hover, :where(&) .ant-tabs-tab-btn:active, :where(&) .ant-tabs-tabpane, :where(&) .ant-tabs-tab-active .ant-tabs-tab-btn":
       {
         ...textStyles.regular,
         textShadow: "none",
       },
-    "& .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab": {
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
@@ -118,53 +118,53 @@ export const tabsStyles = css`
       cursor: "pointer",
       outline: "none",
     },
-    "& .ant-tabs-tab + .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab + .ant-tabs-tab": {
       margin: `0 ${space.s8}px 0 0`,
     },
-    "& .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-btn": {
       outline: "none",
       transition: `all ${transitions.slow}`,
     },
-    "& .ant-tabs-tab-active .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-active .ant-tabs-tab-btn": {
       color: themeVars.colorAccent,
     },
-    "& .ant-tabs-content-holder": {
+    ":where(&) .ant-tabs-content-holder": {
       flex: "auto",
       minWidth: 0,
       minHeight: 0,
     },
-    "& .ant-tabs-content": {
+    ":where(&) .ant-tabs-content": {
       position: "relative",
       display: "flex",
       width: "100%",
     },
-    "& .ant-tabs-tabpane": {
+    ":where(&) .ant-tabs-tabpane": {
       flex: "none",
       width: "100%",
       outline: "none",
     },
-    "& .ant-tabs-tabpane-hidden": {
+    ":where(&) .ant-tabs-tabpane-hidden": {
       display: "none",
     },
-    "& .ant-tabs-switch-appear, & .ant-tabs-switch-enter": {
+    ":where(&) .ant-tabs-switch-appear, :where(&) .ant-tabs-switch-enter": {
       transition: "none",
     },
-    "& .ant-tabs-switch-appear-start, & .ant-tabs-switch-enter-start": {
+    ":where(&) .ant-tabs-switch-appear-start, :where(&) .ant-tabs-switch-enter-start": {
       opacity: 0,
     },
-    "& .ant-tabs-switch-appear-active, & .ant-tabs-switch-enter-active": {
+    ":where(&) .ant-tabs-switch-appear-active, :where(&) .ant-tabs-switch-enter-active": {
       opacity: 1,
       transition: `opacity ${transitions.slow}`,
     },
-    "& .ant-tabs-switch-leave": {
+    ":where(&) .ant-tabs-switch-leave": {
       position: "absolute",
       inset: 0,
       transition: "none",
     },
-    "& .ant-tabs-switch-leave-start": {
+    ":where(&) .ant-tabs-switch-leave-start": {
       opacity: 1,
     },
-    "& .ant-tabs-switch-leave-active": {
+    ":where(&) .ant-tabs-switch-leave-active": {
       opacity: 0,
       transition: `opacity ${transitions.slow}`,
     },

package/src/color-filter.ts

@@ -65,7 +65,7 @@ export function makeColorFilter(spec: ColorFilterSpec | undefined): ColorFilter
     if (!color) {
       return color;
     }
-    // oxlint-disable-next-line no-param-reassign
+    // eslint-disable-next-line no-param-reassign
     color = spec.swatches?.[color.toUpperCase()] ?? color;
 
     const parsed = oklchFrom(color);