@refineui/react 0.0.2 → 0.0.4

package/dist/spec/token-trace-v2.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-08T17:24:33.827Z",
+  "generatedAt": "2026-09-17T18:54:09.612Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {
@@ -1267,14 +1267,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -1293,18 +1293,33 @@
         }
       }
     },
+    "tooltip.default.border": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "borderDefault",
+        "light": {
+          "foundation": "neutral300",
+          "value": "#DBDBDB"
+        },
+        "dark": {
+          "foundation": "neutral650",
+          "value": "#5B5B5B"
+        }
+      }
+    },
     "popover.default.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -2410,14 +2425,89 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "foregroundBrand",
+        "semantic": "foregroundSecondary",
         "light": {
-          "foundation": "primaryBlack",
-          "value": "#212121"
+          "foundation": "neutral600",
+          "value": "#6C6C6C"
         },
         "dark": {
-          "foundation": "primaryGray",
-          "value": "#D4D4D4"
+          "foundation": "neutral350",
+          "value": "#D8D8D8"
+        }
+      }
+    },
+    "alert.description.info": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundInfo",
+        "light": {
+          "foundation": "blue700",
+          "value": "#3E68FF"
+        },
+        "dark": {
+          "foundation": "blue200",
+          "value": "#C3D0FF"
+        }
+      }
+    },
+    "alert.description.success": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundSuccess",
+        "light": {
+          "foundation": "green700",
+          "value": "#1D8822"
+        },
+        "dark": {
+          "foundation": "green200",
+          "value": "#5BEE62"
+        }
+      }
+    },
+    "alert.description.warning": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundWarning",
+        "light": {
+          "foundation": "yellow700",
+          "value": "#967000"
+        },
+        "dark": {
+          "foundation": "yellow200",
+          "value": "#FFCB2F"
+        }
+      }
+    },
+    "alert.description.danger": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundError",
+        "light": {
+          "foundation": "red700",
+          "value": "#D93A3A"
+        },
+        "dark": {
+          "foundation": "red200",
+          "value": "#FFC3C3"
+        }
+      }
+    },
+    "alert.description.custom": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundDiscovery",
+        "light": {
+          "foundation": "purple700",
+          "value": "#9E3FFF"
+        },
+        "dark": {
+          "foundation": "purple200",
+          "value": "#E3C7FF"
         }
       }
     },
@@ -2436,6 +2526,81 @@
         }
       }
     },
+    "alert.accent.info": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundInfo",
+        "light": {
+          "foundation": "blue700",
+          "value": "#3E68FF"
+        },
+        "dark": {
+          "foundation": "blue200",
+          "value": "#C3D0FF"
+        }
+      }
+    },
+    "alert.accent.success": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundSuccess",
+        "light": {
+          "foundation": "green700",
+          "value": "#1D8822"
+        },
+        "dark": {
+          "foundation": "green200",
+          "value": "#5BEE62"
+        }
+      }
+    },
+    "alert.accent.warning": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundWarning",
+        "light": {
+          "foundation": "yellow700",
+          "value": "#967000"
+        },
+        "dark": {
+          "foundation": "yellow200",
+          "value": "#FFCB2F"
+        }
+      }
+    },
+    "alert.accent.danger": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundError",
+        "light": {
+          "foundation": "red700",
+          "value": "#D93A3A"
+        },
+        "dark": {
+          "foundation": "red200",
+          "value": "#FFC3C3"
+        }
+      }
+    },
+    "alert.accent.custom": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundDiscovery",
+        "light": {
+          "foundation": "purple700",
+          "value": "#9E3FFF"
+        },
+        "dark": {
+          "foundation": "purple200",
+          "value": "#E3C7FF"
+        }
+      }
+    },
     "badge.default.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -2556,6 +2721,36 @@
         }
       }
     },
+    "badge.warning.background": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "backgroundWarning",
+        "light": {
+          "foundation": "yellow300",
+          "value": "#F1B500"
+        },
+        "dark": {
+          "foundation": "yellow300",
+          "value": "#F1B500"
+        }
+      }
+    },
+    "badge.warning.foreground": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundOnWarning",
+        "light": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        },
+        "dark": {
+          "foundation": "neutralBlack",
+          "value": "#000000"
+        }
+      }
+    },
     "badge.danger.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -3115,14 +3310,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -3565,14 +3760,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -3591,6 +3786,21 @@
         }
       }
     },
+    "toast.border": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "borderDefault",
+        "light": {
+          "foundation": "neutral300",
+          "value": "#DBDBDB"
+        },
+        "dark": {
+          "foundation": "neutral650",
+          "value": "#5B5B5B"
+        }
+      }
+    },
     "toast.accent.default": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -4120,14 +4330,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurface",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral800",
-          "value": "#2A2A2A"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -4150,14 +4360,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurface",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral800",
-          "value": "#2A2A2A"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -5016,6 +5226,36 @@
         }
       }
     },
+    "divider.label": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundPrimary",
+        "light": {
+          "foundation": "primaryBlack",
+          "value": "#212121"
+        },
+        "dark": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        }
+      }
+    },
+    "divider.icon": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundPrimary",
+        "light": {
+          "foundation": "primaryBlack",
+          "value": "#212121"
+        },
+        "dark": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        }
+      }
+    },
     "avatar.overflow.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "RefineUI React components — Pelagornis RefineUI Web Kit",
   "type": "module",
   "license": "MIT",

package/refineui.css

@@ -322,11 +322,18 @@
   transition: none;
   display: block;
 }
-[data-refineui="segmented-control-indicator"][data-ready="true"] {
+/* Animate only after first layout (`data-animate`) so mount does not slide from 0. */
+[data-refineui="segmented-control-indicator"][data-animate="true"] {
+  /* Selection slide: medium + emphasized for a springier thumb move. */
   transition:
     transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
     width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
 }
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="segmented-control-indicator"][data-animate="true"] {
+    transition: none;
+  }
+}
 
 [data-refineui="segmented-control"] [data-refineui="segmented-control-item"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
   color: var(--refineui-color-alias-foreground-primary);
@@ -350,11 +357,17 @@
   transition: none;
   display: block;
 }
-[data-refineui="tabs-indicator"][data-ready="true"] {
+/* Animate only after first layout (`data-animate`) — same contract as Segmented Control. */
+[data-refineui="tabs-indicator"][data-animate="true"] {
   transition:
     transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
     width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
 }
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="tabs-indicator"][data-animate="true"] {
+    transition: none;
+  }
+}
 [data-refineui="tab"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
   color: var(--refineui-color-alias-foreground-primary-hover);
 }
@@ -1016,14 +1029,10 @@
   width: fit-content;
   max-width: 100%;
   box-sizing: border-box;
-  background-color: color-mix(
-    in srgb,
-    var(--refineui-color-alias-surface-popover) 82%,
-    transparent
-  );
-  backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
-  -webkit-backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
-  box-shadow: var(--refineui-elevation-8);
+  /* Semantic: backgroundPrimary + borderDefault (Menu / Select panel). */
+  background-color: var(--refineui-color-alias-background-primary);
+  border-color: var(--refineui-color-alias-border-default);
+  box-shadow: var(--refineui-elevation-toast);
   touch-action: none;
   cursor: grab;
   transform: translate3d(var(--refineui-toast-swipe-x), var(--refineui-toast-swipe-y), 0);
@@ -1051,12 +1060,6 @@
 }
 
 @media (prefers-reduced-transparency: reduce) {
-  [data-refineui="toast"] {
-    background-color: var(--refineui-color-alias-surface-popover);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
-
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
     backdrop-filter: none;