From ddee0377f470329293b3cee064834f800706297e Mon Sep 17 00:00:00 2001 From: unknownproperty Date: Sun, 7 Jun 2026 05:31:05 +0300 Subject: [PATCH] feat: update packages for dark theme --- apps/xi.storybook/.storybook/preview.ts | 6 +++ .../.storybook/themeDecorators.tsx | 27 +++++++++--- apps/xi.storybook/src/index.css | 17 +++++++- .../src/stories/Icons.stories.tsx | 43 ++++++++++++++++--- package-lock.json | 34 +++++---------- packages/pkg.badge/Badge.tsx | 2 +- packages/pkg.badge/package.json | 2 +- packages/pkg.calendar/Calendar.tsx | 6 +-- packages/pkg.calendar/package.json | 2 +- packages/pkg.checkbox/Checkbox.tsx | 2 +- packages/pkg.checkbox/package.json | 2 +- packages/pkg.emoji.picker/EmojiCategory.tsx | 12 ++---- packages/pkg.emoji.picker/EmojiPicker.tsx | 25 ++++++----- .../pkg.emoji.picker/hooks/useVisibleRows.ts | 37 ++++++++++++---- packages/pkg.emoji.picker/package.json | 4 +- packages/pkg.icons/Svg.tsx | 13 ++++-- packages/pkg.icons/index.ts | 1 + packages/pkg.icons/package.json | 2 +- packages/pkg.input/Input.tsx | 2 +- packages/pkg.input/package.json | 2 +- .../pkg.modal/components/ModalOverlay.tsx | 2 +- packages/pkg.modal/package.json | 2 +- .../pkg.switcher-animate/SwitcherAnimate.tsx | 9 ++-- packages/pkg.switcher-animate/package.json | 2 +- packages/pkg.tailwind/index.css | 18 ++++++-- packages/pkg.tailwind/package.json | 2 +- 26 files changed, 181 insertions(+), 95 deletions(-) diff --git a/apps/xi.storybook/.storybook/preview.ts b/apps/xi.storybook/.storybook/preview.ts index 551bdedb..440220e9 100644 --- a/apps/xi.storybook/.storybook/preview.ts +++ b/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], }; diff --git a/apps/xi.storybook/.storybook/themeDecorators.tsx b/apps/xi.storybook/.storybook/themeDecorators.tsx index f7e055c9..babb5254 100644 --- a/apps/xi.storybook/.storybook/themeDecorators.tsx +++ b/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 = ( Story, context, ) => { - const theme = context.globals.theme; - updateTheme(theme); - return ; + const theme = context.globals.theme ?? 'light'; + + applyTheme(theme); + + return ( + + + + ); }; diff --git a/apps/xi.storybook/src/index.css b/apps/xi.storybook/src/index.css index 042ad457..4c8fc9f0 100644 --- a/apps/xi.storybook/src/index.css +++ b/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); + } +} diff --git a/apps/xi.storybook/src/stories/Icons.stories.tsx b/apps/xi.storybook/src/stories/Icons.stories.tsx index da01f154..d34ded27 100644 --- a/apps/xi.storybook/src/stories/Icons.stories.tsx +++ b/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; -const iconNames = Object.keys(Icons).filter((key) => key !== 'icons') as Array; - 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 = () => {
{filteredIcons.map((iconName) => { - const Icon = Icons[iconName] as React.ComponentType; + const Icon = Icons[iconName as keyof typeof Icons] as React.ComponentType; return (
- + {String(iconName)}
@@ -58,3 +57,33 @@ const IconsDemo = () => { export const Default: Story = { render: () => , }; + +const themeLabels: Record, string> = { + default: 'default', + muted: 'muted', + strong: 'strong', + brand: 'brand', + destructive: 'destructive', + onBrand: 'onBrand', +}; + +export const Themes: Story = { + render: () => ( +
+ {(Object.keys(themeLabels) as Array>).map((theme) => ( +
+ {themeLabels[theme]} + + + +
+ ))} +
+ onBrand + + + +
+
+ ), +}; diff --git a/package-lock.json b/package-lock.json index 1330d420..4d9cf766 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23873,7 +23873,7 @@ }, "packages/pkg.badge": { "name": "@xipkg/badge", - "version": "2.0.12", + "version": "2.0.13", "license": "MIT", "dependencies": { "@xipkg/utils": "^1.8.0", @@ -24067,7 +24067,7 @@ }, "packages/pkg.calendar": { "name": "@xipkg/calendar", - "version": "2.3.0", + "version": "2.3.1", "license": "MIT", "dependencies": { "@radix-ui/react-slot": "^1.1.2", @@ -24130,7 +24130,7 @@ }, "packages/pkg.checkbox": { "name": "@xipkg/checkbox", - "version": "5.0.0", + "version": "5.0.1", "license": "MIT", "dependencies": { "@radix-ui/react-checkbox": "^1.1.4", @@ -24964,10 +24964,10 @@ }, "packages/pkg.emoji.picker": { "name": "@xipkg/emojipicker", - "version": "1.0.9", + "version": "1.0.10", "license": "MIT", "dependencies": { - "@xipkg/button": "^3.1.7", + "@xipkg/button": "^4.1.0", "@xipkg/dropdown": "^3.0.11", "@xipkg/icons": "^2.5.2", "@xipkg/input": "^2.2.8", @@ -25000,20 +25000,6 @@ "undici-types": "~6.21.0" } }, - "packages/pkg.emoji.picker/node_modules/@xipkg/button": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@xipkg/button/-/button-3.2.0.tgz", - "integrity": "sha512-o6S2V+h7Y/wX0kvxjCbq3/jwc8Tf/SNqZ7dksxbVufStBaSoljEGp66EDqK8EzKhdv9X85/H8SJDWtipqwMsCg==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-slot": "^1.1.2", - "@xipkg/utils": "^1.7.0", - "class-variance-authority": "^0.7.1" - }, - "peerDependencies": { - "react": "^19" - } - }, "packages/pkg.emoji.picker/node_modules/@xipkg/eslint": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/@xipkg/eslint/-/eslint-3.3.0.tgz", @@ -25428,7 +25414,7 @@ }, "packages/pkg.icons": { "name": "@xipkg/icons", - "version": "3.0.15", + "version": "3.0.16", "license": "MIT", "dependencies": { "@xipkg/utils": "^1.8.0", @@ -25488,7 +25474,7 @@ }, "packages/pkg.input": { "name": "@xipkg/input", - "version": "2.2.9", + "version": "2.2.10", "license": "MIT", "dependencies": { "@xipkg/utils": "^1.8.0", @@ -25975,7 +25961,7 @@ }, "packages/pkg.modal": { "name": "@xipkg/modal", - "version": "4.5.0", + "version": "4.5.1", "license": "MIT", "dependencies": { "@radix-ui/react-dialog": "1.1.15", @@ -28078,7 +28064,7 @@ }, "packages/pkg.switcher-animate": { "name": "@xipkg/switcher-animate", - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "dependencies": { "@xipkg/utils": "^1.8.0", @@ -28234,7 +28220,7 @@ }, "packages/pkg.tailwind": { "name": "@xipkg/tailwind", - "version": "0.8.1", + "version": "0.8.2", "license": "MIT", "devDependencies": { "tailwindcss": "^4.0.9" diff --git a/packages/pkg.badge/Badge.tsx b/packages/pkg.badge/Badge.tsx index 3de7b31b..50991f77 100644 --- a/packages/pkg.badge/Badge.tsx +++ b/packages/pkg.badge/Badge.tsx @@ -14,7 +14,7 @@ export const badgeVariants = cva( destructive: 'border-transparent bg-red-20 text-red-100 dark:bg-red-80 dark:text-gray-0', success: 'border-transparent bg-green-20 text-green-100 dark:bg-green-80 dark:text-gray-0', warning: - 'border-transparent bg-yellow-20 text-yellow-100 dark:bg-yellow-80 dark:text-gray-0', + 'border-transparent bg-yellow-20 text-yellow-100 dark:bg-yellow-60 dark:text-gray-0', outline: 'text-gray-100 border-gray-30 dark:text-gray-0 dark:border-gray-70', }, size: { diff --git a/packages/pkg.badge/package.json b/packages/pkg.badge/package.json index f17e5244..626892be 100644 --- a/packages/pkg.badge/package.json +++ b/packages/pkg.badge/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/badge", - "version": "2.0.12", + "version": "2.0.13", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.calendar/Calendar.tsx b/packages/pkg.calendar/Calendar.tsx index 62bfaa24..686f90ec 100644 --- a/packages/pkg.calendar/Calendar.tsx +++ b/packages/pkg.calendar/Calendar.tsx @@ -49,9 +49,9 @@ const rangeBetweenButtonStyles = cn( '[&.xipkg-calendar-range-middle]:[&_button]:!bg-brand-20/50', '[&.xipkg-calendar-range-middle]:[&_button]:!text-gray-100', '[&.xipkg-calendar-range-middle]:[&_button]:!rounded-none', - '[&.xipkg-calendar-range-middle]:[&_button]:hover:!bg-brand-30', - '[&.xipkg-calendar-range-middle]:[&_button]:focus:!bg-brand-30', - 'dark:[&.xipkg-calendar-range-middle]:[&_button]:!bg-brand-10', + '[&.xipkg-calendar-range-middle]:[&_button]:hover:!bg-brand-40', + '[&.xipkg-calendar-range-middle]:[&_button]:focus:!bg-brand-40', + 'dark:[&.xipkg-calendar-range-middle]:[&_button]:!bg-brand-0', 'dark:[&.xipkg-calendar-range-middle]:[&_button]:!text-gray-100', 'dark:[&.xipkg-calendar-range-middle]:[&_button]:hover:!bg-brand-20', 'dark:[&.xipkg-calendar-range-middle]:[&_button]:focus:!bg-brand-20', diff --git a/packages/pkg.calendar/package.json b/packages/pkg.calendar/package.json index 2070364c..d0b7e21e 100644 --- a/packages/pkg.calendar/package.json +++ b/packages/pkg.calendar/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/calendar", - "version": "2.3.0", + "version": "2.3.1", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.checkbox/Checkbox.tsx b/packages/pkg.checkbox/Checkbox.tsx index 2c13a884..8188f847 100644 --- a/packages/pkg.checkbox/Checkbox.tsx +++ b/packages/pkg.checkbox/Checkbox.tsx @@ -32,7 +32,7 @@ const checkboxVariants = cva( ); const labelVariants = cva( - 'inline-flex group focus-visible:ring-2 ring-brand-80 ring-offset-4 text-gray-100 items-center gap-2', + 'inline-flex group focus-visible:ring-2 ring-brand-80 ring-offset-4 ring-offset-bkgd-main text-gray-100 items-center gap-2', { variants: { size: { diff --git a/packages/pkg.checkbox/package.json b/packages/pkg.checkbox/package.json index 03b22416..e443f898 100644 --- a/packages/pkg.checkbox/package.json +++ b/packages/pkg.checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/checkbox", - "version": "5.0.0", + "version": "5.0.1", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.emoji.picker/EmojiCategory.tsx b/packages/pkg.emoji.picker/EmojiCategory.tsx index 4ae34ef6..718e7977 100644 --- a/packages/pkg.emoji.picker/EmojiCategory.tsx +++ b/packages/pkg.emoji.picker/EmojiCategory.tsx @@ -3,7 +3,6 @@ import { Button } from '@xipkg/button'; import { useVisibleRows, useIntersectionObserver } from './hooks'; import { BUFFER_ROWS, ROW_HEIGHT, ROW_SIZE, categoryIntersections } from './constants'; import { CategoryT } from './types'; -import { cn } from '@xipkg/utils'; type EmojiCategoryPropsT = { isIntersectionEnabled?: boolean; @@ -63,8 +62,8 @@ export const EmojiCategory = memo( return (
{category.name_rus && ( -
-
+
+
{category.name_rus}
@@ -86,14 +85,9 @@ export const EmojiCategory = memo( key={emoji.name + emoji.unicode} title={`:${emoji.name}:`} variant="ghost" - className={cn( - 'h-6 w-6 translate-y-4 rounded-[4px] p-1 opacity-0 transition-transform duration-300', - 'animate-fade-in hover:bg-gray-10 dark:hover:bg-gray-90', - )} + className="hover:bg-gray-10 h-6 w-6 rounded-[4px] border-transparent bg-transparent p-1 text-base leading-none hover:border-transparent focus:border-transparent" onClick={() => handleEmojiClick(emoji.unicode)} style={{ - animationDelay: '10ms', - animationFillMode: 'forwards', fontFamily: 'Apple Color Emoji, Twemoji Mozilla, Noto Color Emoji, Android Emoji', }} > diff --git a/packages/pkg.emoji.picker/EmojiPicker.tsx b/packages/pkg.emoji.picker/EmojiPicker.tsx index 4e690018..933fb724 100644 --- a/packages/pkg.emoji.picker/EmojiPicker.tsx +++ b/packages/pkg.emoji.picker/EmojiPicker.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useRef, useMemo, useEffect, useCallback } from 'react'; +import { useState, useRef, useMemo, useCallback } from 'react'; import { Button } from '@xipkg/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@xipkg/dropdown'; import { @@ -115,13 +115,16 @@ export const EmojiPicker = ({ recentEmojis, onEmojiSelect }: EmojiPickerPropsT) return ( -
-
+
{emojiCategoriesIcons.map(({ icon: Icon, name }, index) => { return ( @@ -130,16 +133,18 @@ export const EmojiPicker = ({ recentEmojis, onEmojiSelect }: EmojiPickerPropsT) @@ -151,10 +156,10 @@ export const EmojiPicker = ({ recentEmojis, onEmojiSelect }: EmojiPickerPropsT) })}
-
+
} + before={} placeholder="Поиск" className="border" value={searchQuery} diff --git a/packages/pkg.emoji.picker/hooks/useVisibleRows.ts b/packages/pkg.emoji.picker/hooks/useVisibleRows.ts index 21948b79..a2a9ef40 100644 --- a/packages/pkg.emoji.picker/hooks/useVisibleRows.ts +++ b/packages/pkg.emoji.picker/hooks/useVisibleRows.ts @@ -1,5 +1,12 @@ import { useEffect, useState } from 'react'; +const getOffsetWithinContainer = (container: HTMLElement, element: HTMLElement) => { + const containerRect = container.getBoundingClientRect(); + const elementRect = element.getBoundingClientRect(); + + return elementRect.top - containerRect.top + container.scrollTop; +}; + export const useVisibleRows = ( containerRef: React.RefObject, categoryRef: React.RefObject, @@ -7,14 +14,18 @@ export const useVisibleRows = ( rowHeight: number, bufferRows: number, ) => { - const [visibleRows, setVisibleRows] = useState<[number, number]>([0, 0]); + const [visibleRows, setVisibleRows] = useState<[number, number]>([ + 0, + Math.min(totalRows, bufferRows + 4), + ]); useEffect(() => { const updateVisibleRows = () => { if (!containerRef.current || !categoryRef.current) return; const container = containerRef.current; - const offsetTop = categoryRef.current.offsetTop; + const category = categoryRef.current; + const offsetTop = getOffsetWithinContainer(container, category); const scrollTop = container.scrollTop; const containerHeight = container.clientHeight; @@ -27,19 +38,27 @@ export const useVisibleRows = ( Math.ceil((scrollTop - offsetTop + containerHeight) / rowHeight) + bufferRows, ); + if (visibleEnd <= visibleStart) { + setVisibleRows([0, Math.min(totalRows, bufferRows + 4)]); + return; + } + setVisibleRows([visibleStart, visibleEnd]); }; updateVisibleRows(); - const container = containerRef?.current; - if (container) { - container.addEventListener('scroll', updateVisibleRows); - } + const container = containerRef.current; + if (!container) return; + + container.addEventListener('scroll', updateVisibleRows, { passive: true }); + + const resizeObserver = new ResizeObserver(updateVisibleRows); + resizeObserver.observe(container); + return () => { - if (container) { - container.removeEventListener('scroll', updateVisibleRows); - } + container.removeEventListener('scroll', updateVisibleRows); + resizeObserver.disconnect(); }; }, [containerRef, totalRows, categoryRef, rowHeight, bufferRows]); diff --git a/packages/pkg.emoji.picker/package.json b/packages/pkg.emoji.picker/package.json index f913478d..44779343 100644 --- a/packages/pkg.emoji.picker/package.json +++ b/packages/pkg.emoji.picker/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/emojipicker", - "version": "1.0.9", + "version": "1.0.10", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", @@ -26,7 +26,7 @@ "lint": "eslint \"**/*.ts*\"" }, "dependencies": { - "@xipkg/button": "^3.1.7", + "@xipkg/button": "^4.1.0", "@xipkg/dropdown": "^3.0.11", "@xipkg/icons": "^2.5.2", "@xipkg/input": "^2.2.8", diff --git a/packages/pkg.icons/Svg.tsx b/packages/pkg.icons/Svg.tsx index 0dea4747..b66aa0ed 100644 --- a/packages/pkg.icons/Svg.tsx +++ b/packages/pkg.icons/Svg.tsx @@ -3,12 +3,15 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@xipkg/utils'; -const svgVariants = cva('', { +const svgVariants = cva('shrink-0 fill-current', { variants: { theme: { - default: 'text-gray-80 dark:text-gray-0', - brand: 'text-brand-60 dark:text-brand-40', - destructive: 'text-red-80 dark:text-red-40', + default: 'text-gray-80', + muted: 'text-gray-60', + strong: 'text-gray-100', + brand: 'text-brand-60', + destructive: 'text-red-80', + onBrand: 'text-brand-0', }, size: { default: 'w-6 h-6', @@ -33,3 +36,5 @@ export const Svg = ({ theme, size, className, children, ...rest }: IconProps) => ); }; + +export { svgVariants }; diff --git a/packages/pkg.icons/index.ts b/packages/pkg.icons/index.ts index 709b035d..72a541ce 100644 --- a/packages/pkg.icons/index.ts +++ b/packages/pkg.icons/index.ts @@ -359,3 +359,4 @@ export { }; export type { IconProps } from './Svg'; +export { Svg, svgVariants } from './Svg'; diff --git a/packages/pkg.icons/package.json b/packages/pkg.icons/package.json index 99f001a1..c81ac334 100644 --- a/packages/pkg.icons/package.json +++ b/packages/pkg.icons/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/icons", - "version": "3.0.15", + "version": "3.0.16", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.input/Input.tsx b/packages/pkg.input/Input.tsx index 17954831..fa9e3669 100644 --- a/packages/pkg.input/Input.tsx +++ b/packages/pkg.input/Input.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@xipkg/utils'; export const inputVariants = cva( - 'flex w-full rounded-md border-2 border-gray-30 bg-gray-0 text-gray-80 hover:border-gray-50 active:border-gray-30 focus:border-gray-80 focus-visible:outline-none px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-30 disabled:cursor-not-allowed disabled:bg-gray-10 dark:bg-gray-100 dark:text-gray-0 dark:border-gray-70 dark:hover:border-gray-60 dark:active:border-gray-70 dark:focus:border-gray-40 dark:placeholder:text-gray-60 dark:disabled:bg-gray-90', + 'flex w-full rounded-md border-2 border-gray-30 bg-gray-0 text-gray-80 hover:border-gray-50 active:border-gray-30 focus:border-gray-80 focus-visible:outline-none px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-40 disabled:cursor-not-allowed disabled:bg-gray-10 disabled:text-gray-30', { variants: { variant: { diff --git a/packages/pkg.input/package.json b/packages/pkg.input/package.json index b296cbb4..6f2c19a8 100644 --- a/packages/pkg.input/package.json +++ b/packages/pkg.input/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/input", - "version": "2.2.9", + "version": "2.2.10", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.modal/components/ModalOverlay.tsx b/packages/pkg.modal/components/ModalOverlay.tsx index d9abb4d8..ab28a884 100644 --- a/packages/pkg.modal/components/ModalOverlay.tsx +++ b/packages/pkg.modal/components/ModalOverlay.tsx @@ -9,7 +9,7 @@ export const modalOverlayVariants = cva( variants: { overlayVariant: { default: - 'dark:bg-gray-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-100/40 flex overflow-y-auto py-10 border-b-0', + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-100/40 flex overflow-y-auto py-10 border-b-0', full: 'p-0 max-w-dvw bg-violet-100', }, }, diff --git a/packages/pkg.modal/package.json b/packages/pkg.modal/package.json index 14733a68..66795d58 100644 --- a/packages/pkg.modal/package.json +++ b/packages/pkg.modal/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/modal", - "version": "4.5.0", + "version": "4.5.1", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.switcher-animate/SwitcherAnimate.tsx b/packages/pkg.switcher-animate/SwitcherAnimate.tsx index f7abdbdc..688cfed1 100644 --- a/packages/pkg.switcher-animate/SwitcherAnimate.tsx +++ b/packages/pkg.switcher-animate/SwitcherAnimate.tsx @@ -127,15 +127,14 @@ export function SwitcherAnimate({ const getTabStyles = (isActive: boolean) => cn( 'relative z-10 inline-flex flex-1 items-center justify-center gap-2 rounded-[10px] border-none border-transparent px-4 py-1 text-[16px] font-medium whitespace-nowrap transition-colors', - 'bg-transparent text-gray-90', - 'hover:text-gray-80 data-[state=active]:text-gray-0 data-[state=active]:hover:text-gray-10', + 'bg-transparent text-gray-80', + 'hover:text-gray-90', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-80/50 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_svg]:pointer-events-none [&_svg]:shrink-0', orientation === 'vertical' && 'w-full justify-start', - variant === 'default' && isActive && 'text-gray-0', - variant === 'line' && - (isActive ? 'bg-transparent text-gray-100' : 'text-gray-80'), + variant === 'default' && isActive && 'text-gray-0 hover:text-gray-10', + variant === 'line' && isActive && 'text-gray-100 hover:text-gray-100', ); const getIndicatorStyles = () => diff --git a/packages/pkg.switcher-animate/package.json b/packages/pkg.switcher-animate/package.json index 0e5a548b..99cc78b3 100644 --- a/packages/pkg.switcher-animate/package.json +++ b/packages/pkg.switcher-animate/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/switcher-animate", - "version": "1.0.1", + "version": "1.0.2", "main": "./dist/index.mjs", "module": "./dist/index.mjs", "types": "./dist/index.d.mts", diff --git a/packages/pkg.tailwind/index.css b/packages/pkg.tailwind/index.css index 81901e72..4f4a6f90 100644 --- a/packages/pkg.tailwind/index.css +++ b/packages/pkg.tailwind/index.css @@ -1,3 +1,5 @@ +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); + /* The default border color has changed to `currentColor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still @@ -12,7 +14,7 @@ ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentColor); + border-color: var(--color-gray-20, currentColor); } } @@ -179,6 +181,10 @@ svg { --xi-cyan-40: #214F5F; --xi-cyan-60: #276B82; --xi-cyan-100: #33A4CC; + + /* background */ + --xi-bkgd-main: #21222C; + --xi-bkgd-block: #1F1F1F; } @theme { @@ -255,6 +261,12 @@ svg { --color-brand-80: var(--xi-brand-80); --color-brand-100: var(--xi-brand-100); + /* background */ + --color-bkgd-main: var(--xi-bkgd-main); + --color-bkgd-block: var(--xi-bkgd-block); + --color-background: var(--xi-bkgd-main); + --color-ring: var(--xi-brand-80); + /* moscow */ --color-red-0: var(--xi-red-0); --color-red-20: var(--xi-red-20); @@ -304,8 +316,8 @@ svg { --color-cyan-100: var(--xi-cyan-100); /* Анимации */ - --animation-shake: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; - --animation-fade-in: fade-in 0.3s ease-in-out; + --animate-shake: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; + --animate-fade-in: fade-in 0.3s ease-in-out; } diff --git a/packages/pkg.tailwind/package.json b/packages/pkg.tailwind/package.json index 077af4d6..26031975 100644 --- a/packages/pkg.tailwind/package.json +++ b/packages/pkg.tailwind/package.json @@ -1,6 +1,6 @@ { "name": "@xipkg/tailwind", - "version": "0.8.1", + "version": "0.8.2", "description": "Tailwind config", "main": "./design-system-preset.js", "scripts": {