chore: update tasty (#1107)

tenphi · web-flow · commit c5357a7f5265 · 2026-04-02T16:28:58.000+02:00
diff --git a/.changeset/upgrade-tasty-1-1-0.md 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`
diff --git 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
diff --git 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,15 +83,15 @@ const STATIC_CSS = `
   }
 
   code {
-    font-family: var(--monospace-font);
+    font-family: var(--font-mono);
   }
 
   /* Prism Code */
   code[class*="language-"],
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -221,7 +221,7 @@ export const TooltipPlacements: Story = {
   ),
 };
 
-export const WithTextStyles: Story = {
+export const WithTextStyling: Story = {
   render: () => (
     <Space flow="column" gap="2x">
       <TextItem preset="h3">Heading style text item</TextItem>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -736,7 +736,7 @@ export const SupportsQueries: StoryObj = {
             padding="2x"
             height={i % 3 === 0 ? '14x' : i % 3 === 1 ? '10x' : '18x'}
           >
-            <Text preset="t3 strong">Item {i + 1}</Text>
+            <Text preset="t3 / strong">Item {i + 1}</Text>
           </Block>
         ))}
       </SupportsQueryBox>
diff --git 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
@@ -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
@@ -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
@@ -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<string, TypographyPreset> = {
@@ -235,24 +234,6 @@ export const TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {
     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
@@ -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',
   ],
 };
