From 3840e671017985670130de1f97aaa7371760a318 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 2 Apr 2026 16:16:51 +0200 Subject: [PATCH 1/2] chore: update tasty --- package.json | 4 +-- pnpm-lock.yaml | 30 ++++++++----------- src/components/GlobalStyles.tsx | 10 +++---- .../content/ItemBadge/ItemBadge.tsx | 7 ++--- .../content/Layout/Layout.stories.tsx | 4 +-- .../content/Layout/LayoutHeader.tsx | 2 +- src/components/content/Layout/LayoutPanel.tsx | 2 ++ src/components/content/Tag/Tag.stories.tsx | 2 +- src/components/content/Text.tsx | 2 +- .../content/TextItem/TextItem.stories.tsx | 2 +- .../fields/DatePicker/DatePickerSegment.tsx | 2 +- .../fields/NumberInput/StepButton.tsx | 2 +- src/components/fields/RadioGroup/Radio.tsx | 3 +- src/components/layout/ResizablePanel.tsx | 1 + .../LoadingAnimation/LoadingAnimation.tsx | 5 ++++ src/components/status/Spin/Cube.tsx | 1 + src/stories/AdvancedStates.stories.tsx | 2 +- src/stories/CreateComponent.docs.mdx | 2 +- src/stories/Usage.docs.mdx | 2 +- src/tasty-augment.d.ts | 4 +++ src/tokens/typography.ts | 19 ------------ tasty.config.ts | 4 +-- 22 files changed, 49 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 85c120e7d..3266503b6 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@react-types/shared": "^3.32.1", "@tabler/icons-react": "^3.31.0", "@tanstack/react-virtual": "^3.13.12", - "@tenphi/tasty": "0.15.3", + "@tenphi/tasty": "1.1.0", "clipboard-copy": "^4.0.1", "clsx": "^1.1.1", "diff": "^8.0.3", @@ -111,7 +111,7 @@ "@statoscope/cli": "^5.20.1", "@storybook/addon-docs": "^10.2.3", "@storybook/react-vite": "^10.2.3", - "@tenphi/eslint-plugin-tasty": "^0.3.1", + "@tenphi/eslint-plugin-tasty": "^0.6.2", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.7.0", "@testing-library/react": "^16.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index be2896911..9d3f5072d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: ^3.13.12 version: 3.13.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1) '@tenphi/tasty': - specifier: 0.15.3 - version: 0.15.3(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1) + specifier: 1.1.0 + version: 1.1.0(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1) clipboard-copy: specifier: ^4.0.1 version: 4.0.1 @@ -151,8 +151,8 @@ importers: specifier: ^10.2.3 version: 10.2.3(esbuild@0.27.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.59.0)(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.6.3)(vite@8.0.0(@types/node@22.17.2)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.27.3)) '@tenphi/eslint-plugin-tasty': - specifier: ^0.3.1 - version: 0.3.1(@tenphi/tasty@0.15.3(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1))(eslint@9.25.1(jiti@2.6.1))(typescript@5.6.3) + specifier: ^0.6.2 + version: 0.6.2(eslint@9.25.1(jiti@2.6.1))(typescript@5.6.3) '@testing-library/dom': specifier: ^10.4.1 version: 10.4.1 @@ -2867,18 +2867,14 @@ packages: '@tanstack/virtual-core@3.13.12': resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==} - '@tenphi/eslint-plugin-tasty@0.3.1': - resolution: {integrity: sha512-Q/Vc2gg/Sx6fvw3Ucv7hJGi9tNSr/76j8GUcX4mD2Dls7TuQwMEkmyeARZGWtesdlDKNVn9HYqMP/R5HCQybsA==} + '@tenphi/eslint-plugin-tasty@0.6.2': + resolution: {integrity: sha512-GR63b/KobzjwblDP25XMs9qUKU1SmQTMChQybEgR5OMEG2DjMNZz9PRLviFCY8zJQIA8iihXDR5AIdUp334k/w==} engines: {node: '>=20'} peerDependencies: - '@tenphi/tasty': '>=0.1.3' eslint: '>=8.0.0' - peerDependenciesMeta: - '@tenphi/tasty': - optional: true - '@tenphi/tasty@0.15.3': - resolution: {integrity: sha512-sWMsNZYC2f2m7kTpaavX89VA8VqCVCplHeO4R8C60Dtget5oBsNy4OpiLHJNumnKVbR/zf79cpdOY9CSHlQVMw==} + '@tenphi/tasty@1.1.0': + resolution: {integrity: sha512-eJHaDkS7RWlXaUcDicXwJP2Zlj8pWjZQkL18ASffAjZhh2WsvvKi90RRmDQFdvmCZmixfWpUjlIrdEA9HESXjA==} engines: {node: '>=20'} peerDependencies: '@babel/core': ^7.24.0 @@ -10426,17 +10422,16 @@ snapshots: '@tanstack/virtual-core@3.13.12': {} - '@tenphi/eslint-plugin-tasty@0.3.1(@tenphi/tasty@0.15.3(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1))(eslint@9.25.1(jiti@2.6.1))(typescript@5.6.3)': + '@tenphi/eslint-plugin-tasty@0.6.2(eslint@9.25.1(jiti@2.6.1))(typescript@5.6.3)': dependencies: '@typescript-eslint/utils': 8.56.1(eslint@9.25.1(jiti@2.6.1))(typescript@5.6.3) eslint: 9.25.1(jiti@2.6.1) - optionalDependencies: - '@tenphi/tasty': 0.15.3(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1) + jiti: 2.6.1 transitivePeerDependencies: - supports-color - typescript - '@tenphi/tasty@0.15.3(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1)': + '@tenphi/tasty@1.1.0(@babel/core@7.28.5)(@babel/helper-plugin-utils@7.25.7)(@babel/types@7.29.0)(jiti@2.6.1)(react@19.1.1)': dependencies: csstype: 3.1.2 optionalDependencies: @@ -12961,8 +12956,7 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jiti@2.6.1: - optional: true + jiti@2.6.1: {} jora@1.0.0-beta.7: dependencies: diff --git a/src/components/GlobalStyles.tsx b/src/components/GlobalStyles.tsx index 03e12be37..0f40b57a0 100644 --- a/src/components/GlobalStyles.tsx +++ b/src/components/GlobalStyles.tsx @@ -23,7 +23,7 @@ interface GlobalStylesProps { const BODY_STYLES: Styles = { overscrollBehaviorY: 'none', fill: '#white', - fontFamily: 'var(--font)', + fontFamily: 'var(--font-sans)', '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale', margin: 0, @@ -83,7 +83,7 @@ const STATIC_CSS = ` } code { - font-family: var(--monospace-font); + font-family: var(--font-mono); } /* Prism Code */ @@ -91,7 +91,7 @@ const STATIC_CSS = ` pre[class*="language-"] { color: var(--dark-color); background: none; - font-family: var(--monospace-font); + font-family: var(--font-mono); text-align: left; font-weight: normal; font-size: 14px; @@ -276,8 +276,8 @@ export function GlobalStyles(props: GlobalStylesProps) { return ` html { overscroll-behavior-y: none; - --font: ${fontValue}system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; - --monospace-font: ${monospaceFontValue}ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --font-sans: ${fontValue}system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-mono: ${monospaceFontValue}ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } ${STATIC_CSS}`; }, [font, monospaceFont]); diff --git a/src/components/content/ItemBadge/ItemBadge.tsx b/src/components/content/ItemBadge/ItemBadge.tsx index c6e267964..1ea45adae 100644 --- a/src/components/content/ItemBadge/ItemBadge.tsx +++ b/src/components/content/ItemBadge/ItemBadge.tsx @@ -1,4 +1,4 @@ -import { BaseProps, tasty } from '@tenphi/tasty'; +import { BaseProps, mergeStyles, tasty } from '@tenphi/tasty'; import { ComponentProps, forwardRef, @@ -67,14 +67,13 @@ type ItemBadgeVariant = const ItemBadgeElement = tasty({ qa: 'ItemBadge', - styles: { - ...ITEM_ACTION_BASE_STYLES, + styles: mergeStyles(ITEM_ACTION_BASE_STYLES, { cursor: 'default', border: { // extend 'type=primary': '#clear', }, - }, + }), variants: { // Default theme 'default.primary': DEFAULT_PRIMARY_STYLES, diff --git a/src/components/content/Layout/Layout.stories.tsx b/src/components/content/Layout/Layout.stories.tsx index f7b50c2a3..b62a48aab 100644 --- a/src/components/content/Layout/Layout.stories.tsx +++ b/src/components/content/Layout/Layout.stories.tsx @@ -1210,8 +1210,8 @@ export const OverlayPanel: Story = { * The overlay backdrop can be customized using the `overlayStyles` prop. * This example shows a darker overlay with custom fill color. */ -export const OverlayPanelCustomStyles: Story = { - render: function OverlayPanelCustomStylesStory() { +export const OverlayPanelCustomStyling: Story = { + render: function OverlayPanelCustomStylingStory() { const [isPanelOpen, setIsPanelOpen] = useState(true); return ( diff --git a/src/components/content/Layout/LayoutHeader.tsx b/src/components/content/Layout/LayoutHeader.tsx index 46c89f6ba..9fdb13e80 100644 --- a/src/components/content/Layout/LayoutHeader.tsx +++ b/src/components/content/Layout/LayoutHeader.tsx @@ -56,7 +56,7 @@ const HeaderElement = tasty(LayoutContent, { flow: 'row nowrap', placeItems: 'center start', gap: '1bw', - preset: 't3 strong', + preset: 't3 / strong', color: '#dark-02', }, diff --git a/src/components/content/Layout/LayoutPanel.tsx b/src/components/content/Layout/LayoutPanel.tsx index 57b5b01cc..8f21a3ec7 100644 --- a/src/components/content/Layout/LayoutPanel.tsx +++ b/src/components/content/Layout/LayoutPanel.tsx @@ -99,6 +99,7 @@ const PanelElement = tasty({ // Visual styling border: { + '': false, 'side=left': 'right', 'side=right': 'left', 'side=top': 'bottom', @@ -163,6 +164,7 @@ const ResizeHandlerElement = tasty({ // Offscreen transforms only (no centering needed with direct offset positioning) transform: { + '': 'translateX(0)', 'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`, 'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`, 'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`, diff --git a/src/components/content/Tag/Tag.stories.tsx b/src/components/content/Tag/Tag.stories.tsx index 85a0a179a..ee243e4a2 100644 --- a/src/components/content/Tag/Tag.stories.tsx +++ b/src/components/content/Tag/Tag.stories.tsx @@ -228,7 +228,7 @@ export const Sizes: Story = { ), }; -export const CustomStyles: Story = { +export const CustomStyling: Story = { args: { children: 'Custom Tag', styles: { diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx index bbc1577ea..1164ce010 100644 --- a/src/components/content/Text.tsx +++ b/src/components/content/Text.tsx @@ -131,7 +131,7 @@ const StrongText = tasty(Text, { const EmphasisText = tasty(Text, { as: 'em', - preset: 'em', + preset: 'italic', }); const PlaceholderText = tasty(Text, { diff --git a/src/components/content/TextItem/TextItem.stories.tsx b/src/components/content/TextItem/TextItem.stories.tsx index cc4d7e287..02446a794 100644 --- a/src/components/content/TextItem/TextItem.stories.tsx +++ b/src/components/content/TextItem/TextItem.stories.tsx @@ -221,7 +221,7 @@ export const TooltipPlacements: Story = { ), }; -export const WithTextStyles: Story = { +export const WithTextStyling: Story = { render: () => ( Heading style text item diff --git a/src/components/fields/DatePicker/DatePickerSegment.tsx b/src/components/fields/DatePicker/DatePickerSegment.tsx index 557242ef3..78cd423d2 100644 --- a/src/components/fields/DatePicker/DatePickerSegment.tsx +++ b/src/components/fields/DatePicker/DatePickerSegment.tsx @@ -41,7 +41,7 @@ const EditableSegmentElement = tasty({ radius: '.25x', Placeholder: { - opacity: '#disabled-opacity', + opacity: 'var(--disabled-opacity)', }, }, }); diff --git a/src/components/fields/NumberInput/StepButton.tsx b/src/components/fields/NumberInput/StepButton.tsx index ce58bf8d6..bd6c832fe 100644 --- a/src/components/fields/NumberInput/StepButton.tsx +++ b/src/components/fields/NumberInput/StepButton.tsx @@ -15,7 +15,7 @@ const StepButtonElement = tasty(Button, { }, padding: 0, - '$icon-size': '1fs', + '$icon-size': '1em', Icon: { width: 'auto', diff --git a/src/components/fields/RadioGroup/Radio.tsx b/src/components/fields/RadioGroup/Radio.tsx index 448d17c01..f8792d0c6 100644 --- a/src/components/fields/RadioGroup/Radio.tsx +++ b/src/components/fields/RadioGroup/Radio.tsx @@ -31,7 +31,7 @@ const RadioButtonElement = tasty(Item, { as: 'label', styles: { preset: 't3m', - lineHeight: '1fs', + lineHeight: '1em', flexGrow: 1, gridTemplate: '"icon prefix label suffix rightIcon actions" auto / max-content max-content max-content max-content max-content max-content', @@ -87,6 +87,7 @@ const RadioNormalElement = tasty({ disabled: '#dark.04', }, color: { + '': '#clear', checked: '#primary', 'invalid & checked': '#danger-text', 'disabled | !checked': '#clear', diff --git a/src/components/layout/ResizablePanel.tsx b/src/components/layout/ResizablePanel.tsx index 15984f15f..d25d2c96f 100644 --- a/src/components/layout/ResizablePanel.tsx +++ b/src/components/layout/ResizablePanel.tsx @@ -59,6 +59,7 @@ const HandlerElement = tasty({ }, // Transform requires a separate visual size property to respect size boundaries transform: { + '': 'translate(0, 0)', '[data-direction="top"]': 'translate(0, ($size-compensation - $visual-size))', '[data-direction="right"]': diff --git a/src/components/status/LoadingAnimation/LoadingAnimation.tsx b/src/components/status/LoadingAnimation/LoadingAnimation.tsx index f7fd131e0..a68990873 100644 --- a/src/components/status/LoadingAnimation/LoadingAnimation.tsx +++ b/src/components/status/LoadingAnimation/LoadingAnimation.tsx @@ -18,20 +18,25 @@ const CubeElement = tasty({ height: '50%', animationName: { + '': 'none', 'index=0': 'dice0', 'index=1': 'dice1', 'index=2': 'dice2', }, animationDuration: { + '': '0s', 'index=0 | index=1 | index=2': '2s', }, animationIterationCount: { + '': 1, 'index=0 | index=1 | index=2': 'infinite', }, animationTimingFunction: { + '': 'ease', 'index=0 | index=1 | index=2': 'ease', }, zIndex: { + '': 0, 'index=0 | index=1 | index=2': 0, }, diff --git a/src/components/status/Spin/Cube.tsx b/src/components/status/Spin/Cube.tsx index 1040448c1..620c09eb9 100644 --- a/src/components/status/Spin/Cube.tsx +++ b/src/components/status/Spin/Cube.tsx @@ -23,6 +23,7 @@ const CubeElement = tasty({ userSelect: 'none', animationName: { + '': 'none', 'position=top': 'cube-spin-top', 'position=right': 'cube-spin-right', 'position=bottom': 'cube-spin-bottom', diff --git a/src/stories/AdvancedStates.stories.tsx b/src/stories/AdvancedStates.stories.tsx index 7b8e61d2d..d991558c8 100644 --- a/src/stories/AdvancedStates.stories.tsx +++ b/src/stories/AdvancedStates.stories.tsx @@ -736,7 +736,7 @@ export const SupportsQueries: StoryObj = { padding="2x" height={i % 3 === 0 ? '14x' : i % 3 === 1 ? '10x' : '18x'} > - Item {i + 1} + Item {i + 1} ))} diff --git a/src/stories/CreateComponent.docs.mdx b/src/stories/CreateComponent.docs.mdx index bebe6af1b..89c927be2 100644 --- a/src/stories/CreateComponent.docs.mdx +++ b/src/stories/CreateComponent.docs.mdx @@ -180,7 +180,7 @@ const MyElement = tasty({ color: '#purple', }, Label: { - preset: 'default bold', + preset: 'default / bold', }, }, }); diff --git a/src/stories/Usage.docs.mdx b/src/stories/Usage.docs.mdx index 6471da5db..c31b587dd 100644 --- a/src/stories/Usage.docs.mdx +++ b/src/stories/Usage.docs.mdx @@ -133,7 +133,7 @@ Each semantic group provides a base color and variants following the pattern: `# ## Typography Presets -Use via the `preset` style property. Modifiers can be appended with a space: `'t1 strong'`, `'h2 italic'`. +Use via the `preset` style property. Modifiers are appended with a `/` separator: `'t1 / strong'`, `'h2 / italic'`. Modifier-only shorthand like `'bold'` is also supported (equivalent to `'inherit / bold'`). Defined in `src/tokens/typography.ts`. diff --git a/src/tasty-augment.d.ts b/src/tasty-augment.d.ts index a554397a2..6eb0084d9 100644 --- a/src/tasty-augment.d.ts +++ b/src/tasty-augment.d.ts @@ -63,6 +63,10 @@ declare module '@tenphi/tasty' { t3: true; t3m: true; t4: true; + t4m: true; + m1: true; + m2: true; + m3: true; p1: true; p2: true; p3: true; diff --git a/src/tokens/typography.ts b/src/tokens/typography.ts index 4d6a9b73b..ac8953796 100644 --- a/src/tokens/typography.ts +++ b/src/tokens/typography.ts @@ -25,7 +25,6 @@ export interface TypographyPreset { * - `p1`-`p4`: Paragraph styles * - `c1`-`c2`: Caption/uppercase styles * - `tag`: Tag/badge typography - * - `strong`, `em`: Inline semantic styles * - `default`: Base text style */ export const TYPOGRAPHY_PRESETS: Record = { @@ -235,24 +234,6 @@ export const TYPOGRAPHY_PRESETS: Record = { iconSize: '16px', }, - // Inline semantic styles - strong: { - fontSize: 'inherit', - lineHeight: 'inherit', - letterSpacing: 'inherit', - fontFamily: 'inherit', - fontStyle: 'inherit', - fontWeight: 'var(--bold-font-weight, var(--default-bold-font-weight, 600))', - }, - em: { - fontSize: 'inherit', - lineHeight: 'inherit', - letterSpacing: 'inherit', - fontFamily: 'inherit', - fontStyle: 'italic', - fontWeight: 'inherit', - }, - // Default text style (references t3) default: { fontSize: 'var(--t3-font-size)', diff --git a/tasty.config.ts b/tasty.config.ts index ed8508054..e74e6b090 100644 --- a/tasty.config.ts +++ b/tasty.config.ts @@ -159,7 +159,7 @@ export default { * These are defined in src/tokens/typography.ts. * * Note: Preset modifiers (strong, italic, icon, tight) are built-in - * and can be combined with any preset (e.g., 't1 strong', 'h2 italic'). + * and can be combined with any preset using `/` separator (e.g., 't1 / strong', 'h2 / italic'). */ presets: [ // Base text @@ -201,8 +201,6 @@ export default { 'tag', // Inline semantic styles - 'strong', - 'em', 'inline', ], }; From 841ec0b3092bceff8c73f2fa057772561d151bb2 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 2 Apr 2026 16:17:45 +0200 Subject: [PATCH 2/2] chore: add changeset --- .changeset/upgrade-tasty-1-1-0.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .changeset/upgrade-tasty-1-1-0.md diff --git a/.changeset/upgrade-tasty-1-1-0.md b/.changeset/upgrade-tasty-1-1-0.md new file mode 100644 index 000000000..18babe3ee --- /dev/null +++ b/.changeset/upgrade-tasty-1-1-0.md @@ -0,0 +1,12 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Upgrade `@tenphi/tasty` from 0.15.3 to 1.1.0. + +**Breaking changes:** + +- Font CSS custom properties renamed: `--font` → `--font-sans`, `--monospace-font` → `--font-mono` +- Preset modifier syntax now uses `/` separator (e.g., `'t3 / strong'` instead of `'t3 strong'`) +- Removed standalone `strong` and `em` typography presets (use modifiers instead: `'inherit / bold'`, `'inherit / italic'`) +- The `1fs` unit is no longer supported; replaced with `1em`