feat: update packages for dark theme

apps/xi.storybook/.storybook/preview.ts

@@ -20,6 +20,9 @@ export const globalTypes: Preview['globalTypes'] = {
 };
 
 const preview: Preview = {
+  initialGlobals: {
+    theme: 'light',
+  },
   parameters: {
     controls: {
       matchers: {
@@ -30,6 +33,9 @@ const preview: Preview = {
     themes: {
       disable: true,
     },
+    backgrounds: {
+      disable: true,
+    },
   },
   decorators: [themeDecorator],
 };

apps/xi.storybook/.storybook/themeDecorators.tsx

@@ -1,18 +1,33 @@
 import { ReactRenderer } from '@storybook/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DecoratorFunction } from 'storybook/internal/types';
 
-const updateTheme = (theme: string) => {
+const applyTheme = (theme: string) => {
   const htmlElement = document.documentElement;
+
   htmlElement.setAttribute('data-theme', theme);
-  htmlElement.style.colorScheme = theme;
+  htmlElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
+};
+
+const ThemeSync = ({ theme, children }: { theme: string; children: React.ReactNode }) => {
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  return <>{children}</>;
 };
 
 export const themeDecorator: DecoratorFunction<ReactRenderer, { [x: string]: unknown }> = (
   Story,
   context,
 ) => {
-  const theme = context.globals.theme;
-  updateTheme(theme);
-  return <Story />;
+  const theme = context.globals.theme ?? 'light';
+
+  applyTheme(theme);
+
+  return (
+    <ThemeSync theme={theme}>
+      <Story />
+    </ThemeSync>
+  );
 };

apps/xi.storybook/src/index.css

@@ -10,4 +10,19 @@
 @source "../../../node_modules";
 @source "../../../packages";
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+/* Единый фон превью — без content-sized подложки у декоратора */
+@layer base {
+  html,
+  body,
+  #storybook-root,
+  #storybook-docs,
+  .sb-show-main,
+  .sb-main-centered,
+  .sb-main-padded,
+  .sb-main-fullscreen,
+  .docs-story,
+  .innerZoomElementWrapper {
+    background-color: var(--xi-bkgd-main);
+    color: var(--xi-gray-100);
+  }
+}

apps/xi.storybook/src/stories/Icons.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import * as Icons from '@xipkg/icons';
+import { icons } from '@xipkg/icons';
 import { useState } from 'react';
 import { Input } from '@xipkg/input';
 import type { IconProps } from '@xipkg/icons';
@@ -16,13 +17,11 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const iconNames = Object.keys(Icons).filter((key) => key !== 'icons') as Array<keyof typeof Icons>;
-
 const IconsDemo = () => {
   const [searchQuery, setSearchQuery] = useState('');
 
-  const filteredIcons = iconNames.filter((iconName) =>
-    String(iconName).toLowerCase().includes(searchQuery.toLowerCase()),
+  const filteredIcons = icons.filter((iconName) =>
+    iconName.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
   return (
@@ -37,14 +36,14 @@ const IconsDemo = () => {
       </div>
       <div className="grid grid-cols-6 gap-4">
         {filteredIcons.map((iconName) => {
-          const Icon = Icons[iconName] as React.ComponentType<IconProps>;
+          const Icon = Icons[iconName as keyof typeof Icons] as React.ComponentType<IconProps>;
           return (
             <div
               key={String(iconName)}
-              className="hover:bg-gray-10 dark:hover:bg-gray-90 flex flex-col items-center justify-center rounded-lg border p-4"
+              className="hover:bg-gray-10 flex flex-col items-center justify-center rounded-lg border border-gray-20 p-4"
             >
               <Icon className="mb-2 h-6 w-6" />
-              <span className="text-gray-60 dark:text-gray-40 text-center text-xs">
+              <span className="text-gray-60 text-center text-xs">
                 {String(iconName)}
               </span>
             </div>
@@ -58,3 +57,33 @@ const IconsDemo = () => {
 export const Default: Story = {
   render: () => <IconsDemo />,
 };
+
+const themeLabels: Record<NonNullable<IconProps['theme']>, string> = {
+  default: 'default',
+  muted: 'muted',
+  strong: 'strong',
+  brand: 'brand',
+  destructive: 'destructive',
+  onBrand: 'onBrand',
+};
+
+export const Themes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {(Object.keys(themeLabels) as Array<NonNullable<IconProps['theme']>>).map((theme) => (
+        <div key={theme} className="flex items-center gap-4">
+          <span className="text-gray-60 w-24 text-sm">{themeLabels[theme]}</span>
+          <Icons.Home theme={theme} />
+          <Icons.Search theme={theme} />
+          <Icons.Settings theme={theme} />
+        </div>
+      ))}
+      <div className="bg-brand-80 flex items-center gap-4 rounded-lg p-4">
+        <span className="text-brand-0 w-24 text-sm">onBrand</span>
+        <Icons.Home theme="onBrand" />
+        <Icons.Search theme="onBrand" />
+        <Icons.Settings theme="onBrand" />
+      </div>
+    </div>
+  ),
+};