wangdicoder · wangdicoder · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/.changeset/fix-react-component-demos.md b/.changeset/fix-react-component-demos.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Fix React component behavior and update demos to follow theme tokens.
diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
@@ -156,6 +156,12 @@ const ThemeStudioPage = (): React.ReactElement => {
             <Select
               className="theme-studio__select"
               value={draft.presetId}
+              showSearch
+              filterOption={(inputValue, option) => {
+                const query = inputValue.toLowerCase();
+                const label = typeof option.label === 'string' ? option.label : '';
+                return label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
+              }}
               onChange={(value) => handlePresetChange(value)}
             >
               {THEME_EDITOR_PRESETS.map((preset) => (

diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
@@ -130,6 +130,9 @@ const subscriptionsChartConfig: ChartConfig = {
   },
 };
 
+const currYear = new Date().getFullYear()
+const currMonth = new Date().getMonth()
+
 function MetricsStrip({
   items = [
     ['Total Revenue', '$15,231.89', '+20.1% from last month'],
@@ -386,7 +389,7 @@ function CardsPreview(): React.ReactElement {
         <div className="theme-studio__cards-bottom-pair">
           <Card className="theme-studio__cards-panel theme-studio__cards-panel_calendar">
             <Card.Content>
-              <Calendar value={new Date(2025, 5, 6)} fullscreen={false} />
+              <Calendar selectionMode="range" defaultRangeValue={[new Date(currYear, currMonth, 5), new Date(currYear, currMonth, 15)]} fullscreen={false} />
             </Card.Content>
           </Card>
 

diff --git a/apps/docs/src/containers/theme-studio/runtime-presets.ts b/apps/docs/src/containers/theme-studio/runtime-presets.ts
@@ -18,7 +18,14 @@ function buildPresetDescription(source: TweakcnRuntimePresetSource): string {
     : 'Imported from tweakcn runtime preset.';
 }
 
-function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFields> {
+function readRuntimeStyle(styles: RuntimeStyles, key: string, fallbackStyles?: RuntimeStyles): string | undefined {
+  return styles[key] ?? fallbackStyles?.[key];
+}
+
+function mapRuntimeStylesToFields(
+  styles: RuntimeStyles,
+  typographyFallbackStyles?: RuntimeStyles,
+): Partial<ThemeEditorFields> {
   const radius = styles.radius ?? DEFAULT_FIELDS.radius;
   const ring = styles.ring ?? styles.primary ?? DEFAULT_FIELDS.ring;
   const statusPalette = deriveStatusPalette(styles);
@@ -62,9 +69,9 @@ function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFie
     sidebarAccentForeground: styles['sidebar-accent-foreground'] ?? DEFAULT_FIELDS.sidebarAccentForeground,
     sidebarBorder: styles['sidebar-border'] ?? DEFAULT_FIELDS.sidebarBorder,
     sidebarRing: styles['sidebar-ring'] ?? DEFAULT_FIELDS.sidebarRing,
-    fontSans: styles['font-sans'] ?? DEFAULT_FIELDS.fontSans,
-    fontMono: styles['font-mono'] ?? DEFAULT_FIELDS.fontMono,
-    letterSpacing: styles['letter-spacing'] ?? DEFAULT_FIELDS.letterSpacing,
+    fontSans: readRuntimeStyle(styles, 'font-sans', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontSans,
+    fontMono: readRuntimeStyle(styles, 'font-mono', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontMono,
+    letterSpacing: readRuntimeStyle(styles, 'letter-spacing', typographyFallbackStyles) ?? DEFAULT_FIELDS.letterSpacing,
     radius,
     shadowCard: buildShadow(styles),
     shadowFocus: `0 0 0 3px ${toRgba(ring, 0.24)}`,
@@ -78,7 +85,7 @@ function buildPresetFromRuntimeSource(source: TweakcnRuntimePresetSource): Theme
   const lightStyles = source.styles.light;
   const darkStyles = source.styles.dark;
   const lightFields = mapRuntimeStylesToFields(lightStyles);
-  const darkFields = mapRuntimeStylesToFields(darkStyles);
+  const darkFields = mapRuntimeStylesToFields(darkStyles, lightStyles);
 
   return {
     id: source.id,

diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -92,7 +92,7 @@
 }
 
 .theme-studio__topbar-actions .theme-studio__select {
-  min-width: 180px;
+  width: 220px;
 }
 
 .theme-studio__eyebrow {

diff --git a/packages/react/src/flex/demo/Align.tsx b/packages/react/src/flex/demo/Align.tsx
@@ -12,7 +12,7 @@ export default function AlignDemo() {
     width: '100%',
     height: 120,
     borderRadius: 6,
-    border: '1px solid #6e41bf',
+    border: '1px solid var(--ty-color-primary)',
   };
 
   return (
@@ -29,4 +29,4 @@ export default function AlignDemo() {
       </Flex>
     </Flex>
   );
-}
+}
diff --git a/packages/react/src/flex/demo/Basic.tsx b/packages/react/src/flex/demo/Basic.tsx
@@ -18,9 +18,17 @@ export default function BasicDemo() {
       </Radio.Group>
       <Flex vertical={vertical}>
         {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} style={{ ...baseStyle, backgroundColor: i % 2 ? '#6e41bf' : 'rgba(110, 65, 191, 0.75)' }} />
+          <div
+            key={i}
+            style={{
+              ...baseStyle,
+              backgroundColor: i % 2
+                ? 'var(--ty-color-primary)'
+                : 'color-mix(in srgb, var(--ty-color-primary) 75%, transparent)',
+            }}
+          />
         ))}
       </Flex>
     </Flex>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/Alignment.tsx b/packages/react/src/grid/demo/Alignment.tsx
@@ -34,11 +34,11 @@ export default function AlignmentDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -68,4 +68,4 @@ export default function AlignmentDemo() {
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/AlignmentGrid.tsx b/packages/react/src/grid/demo/AlignmentGrid.tsx
@@ -13,7 +13,7 @@ export default function AlignmentGridDemo() {
         padding: 16,
         border: '1px dashed var(--ty-color-border)',
         borderRadius: 12,
-        background: 'linear-gradient(180deg, rgba(110,65,191,0.06), rgba(110,65,191,0.01))',
+        background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 6%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 45%, transparent))',
       }}
     >
       <Button btnType="primary">Primary</Button>

diff --git a/packages/react/src/grid/demo/Basic.tsx b/packages/react/src/grid/demo/Basic.tsx
@@ -13,11 +13,11 @@ export default function BasicDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -42,4 +42,4 @@ export default function BasicDemo() {
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/DashboardShell.tsx b/packages/react/src/grid/demo/DashboardShell.tsx
@@ -12,7 +12,7 @@ const shellCardStyle: React.CSSProperties = {
 const metricStyle: React.CSSProperties = {
   ...shellCardStyle,
   minHeight: 144,
-  background: 'linear-gradient(180deg, rgba(110,65,191,0.1), rgba(110,65,191,0.02))',
+  background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 10%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
 };
 
 const sectionLabelStyle: React.CSSProperties = {
@@ -108,12 +108,12 @@ export default function DashboardShellDemo() {
             <Text type="secondary">Last 7 days</Text>
           </div>
           <Grid columns={6} gap={8} align="end" style={{ minHeight: 84 }}>
-            <div style={{ height: 42, borderRadius: 8, background: 'rgba(110,65,191,0.18)' }} />
-            <div style={{ height: 68, borderRadius: 8, background: 'rgba(110,65,191,0.24)' }} />
-            <div style={{ height: 54, borderRadius: 8, background: 'rgba(110,65,191,0.2)' }} />
-            <div style={{ height: 88, borderRadius: 8, background: 'rgba(110,65,191,0.28)' }} />
-            <div style={{ height: 60, borderRadius: 8, background: 'rgba(110,65,191,0.22)' }} />
-            <div style={{ height: 76, borderRadius: 8, background: 'rgba(110,65,191,0.26)' }} />
+            <div style={{ height: 42, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 18%, transparent)' }} />
+            <div style={{ height: 68, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 24%, transparent)' }} />
+            <div style={{ height: 54, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 20%, transparent)' }} />
+            <div style={{ height: 88, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 28%, transparent)' }} />
+            <div style={{ height: 60, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 22%, transparent)' }} />
+            <div style={{ height: 76, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 26%, transparent)' }} />
           </Grid>
           <Text type="secondary">Wide content region spanning two columns on desktop.</Text>
         </Card>

diff --git a/packages/react/src/grid/demo/ExplicitColumns.tsx b/packages/react/src/grid/demo/ExplicitColumns.tsx
@@ -7,7 +7,7 @@ const panelStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'linear-gradient(180deg, rgba(110,65,191,0.12), rgba(110,65,191,0.02))',
+  background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 12%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
 };
 
 export default function ExplicitColumnsDemo() {

diff --git a/packages/react/src/grid/demo/Gutter.tsx b/packages/react/src/grid/demo/Gutter.tsx
@@ -9,11 +9,11 @@ export default function GutterDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   const [gutter, setGutter] = React.useState(8);
@@ -46,4 +46,4 @@ export default function GutterDemo() {
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/Offset.tsx b/packages/react/src/grid/demo/Offset.tsx
@@ -13,11 +13,11 @@ export default function OffsetDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -35,4 +35,4 @@ export default function OffsetDemo() {
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/Order.tsx b/packages/react/src/grid/demo/Order.tsx
@@ -9,11 +9,11 @@ export default function OrderDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -26,4 +26,4 @@ export default function OrderDemo() {
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/grid/demo/Responsive.tsx b/packages/react/src/grid/demo/Responsive.tsx
@@ -15,18 +15,18 @@ export default function ResponsiveDemo() {
     <>
       <Row gutter={[16, 16]}>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 90%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 70%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 90%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 70%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
       </Row>
     </>
   );
-}
+}
diff --git a/packages/react/src/layout/demo/Basic.tsx b/packages/react/src/layout/demo/Basic.tsx
@@ -7,29 +7,29 @@ export default function BasicDemo() {
   };
 
   const headerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     textAlign: 'center',
     height: '64px',
     lineHeight: '64px',
   };
 
   const footerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     textAlign: 'center',
   };
 
   const contentStyle = {
-    background: 'rgba(110, 65, 191, 0.98)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
     color: '#fff',
     minHeight: '120px',
     lineHeight: '120px',
     textAlign: 'center',
   };
 
   const sidebarStyle = {
-    background: 'rgba(110, 65, 191, 0.84)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
     color: '#fff',
     textAlign: 'center',
     paddingTop: '30px',
@@ -73,4 +73,4 @@ export default function BasicDemo() {
       </Layout>
     </div>
   );
-}
+}
diff --git a/packages/react/src/layout/demo/Sidebar.tsx b/packages/react/src/layout/demo/Sidebar.tsx
@@ -6,21 +6,21 @@ export default function SidebarDemo() {
   const [collapsed, setCollapsed] = React.useState(false);
 
   const sidebarStyle = {
-    background: 'rgba(110, 65, 191, 0.84)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
     color: '#fff',
     textAlign: 'center',
   };
 
   const headerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     height: '64px',
     lineHeight: '64px',
     textAlign: 'center',
   };
 
   const contentStyle = {
-    background: 'rgba(110, 65, 191, 0.98)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
     color: '#fff',
     minHeight: '200px',
     lineHeight: '200px',
@@ -47,4 +47,4 @@ export default function SidebarDemo() {
       </Layout>
     </Layout>
   );
-}
+}
diff --git a/packages/react/src/pop-confirm/demo/Basic.tsx b/packages/react/src/pop-confirm/demo/Basic.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { PopConfirm, Message } from '@tiny-design/react';
+import { PopConfirm, Message, Button } from '@tiny-design/react';
 
 export default function BasicDemo() {
   return (
     <PopConfirm
       title="Are you sure to delete this?"
       onConfirm={() => Message.info('You clicked Yes')}
     >
-      <a href="#" style={{ color: '#6E41BF' }}>
+      <Button btnType="link">
         Delete
-      </a>
+      </Button>
     </PopConfirm>
   );
 }