v0.105.1

Patch Changes

• #978 744e9696 Thanks @tenphi! - Add default theme-based icons to useProgressToast result states, matching the behavior of toast.*() API.

v0.105.0

Minor Changes

• #977 18cb18bd Thanks @tenphi! - Add support for dual-color fill style. When two color tokens are provided (e.g., fill="#primary #secondary"), the first color is applied as background-color and the second as a background-image gradient layer via a registered CSS custom property (--tasty-second-fill-color), enabling smooth CSS transitions. Explicit backgroundImage or background properties override the second color.

• #975 38152302 Thanks @tenphi! - Replaced the toast system with a new implementation:

  • New API: useToast() hook with toast(), toast.success(), toast.danger(), toast.warning(), and toast.note() methods
  • Progress toasts: useProgressToast() hook for loading states that persist while isLoading is true
  • Declarative usage: <Toast> and <Toast.Progress> components for declarative toast rendering
  • Default icons: Each theme now has a predefined icon (can be overridden)
  • Collapse on hover: Toasts collapse when hovering the toast area to reveal content behind
  • Deduplication: Toasts with the same content are deduplicated automatically

  Breaking changes:

  • Removed useToastsApi hook - migrate to useToast
  • Removed attention theme - use warning instead
  • Renamed header prop to title

• #974 402d5618 Thanks @tenphi! - Add support for OKHSL color functions in style parsing and fix CSSWriter.add() method.

v0.104.0

Minor Changes

• #972 c703a035 Thanks @tenphi! - Add warning and note themes to Button, Item, and ItemAction components. These themes are now available for all standard types (primary, secondary, outline, neutral, clear, link, item) in addition to the existing card type support.

• #972 c703a035 Thanks @tenphi! - Add Tabs.Action component for prefix/suffix slot actions with automatic dividers and size inheritance from Tabs context

• #972 c703a035 Thanks @tenphi! - Add tabPickerPosition and scrollArrowsPosition props to Tabs component for controlling where the tab picker and scroll arrows are rendered. Both accept 'prefix' | 'suffix' with 'suffix' as default.

• #972 c703a035 Thanks @tenphi! - Add showScrollArrows prop to Tabs component for left/right navigation arrows that scroll overflowed tabs. Supports true, false, and 'auto' (show only when overflow exists).

• #972 c703a035 Thanks @tenphi! - Remove panel tab type and unify its visual style into the file type. The file type now uses border bottom highlight on selection instead of fill highlight.

v0.103.0

Minor Changes

• #968 b1322fdc Thanks @tenphi! - Added drag-and-drop reordering and inline editing capabilities to Tabs component. Tabs can now be reordered by dragging, and tab titles can be edited inline by double-clicking. Added showTabPicker prop to display a dropdown menu for quick tab navigation when tabs overflow. Added TabType and TabSize type exports. Improved tab indicator positioning and state management. Added disabled state support to Item and ItemButton components.

Patch Changes

• #971 08fa1670 Thanks @tenphi! - Fixed inset, padding, and margin style handlers to correctly assign values to directions in the order they appear. Previously, inset: 'right 1x top 0' would incorrectly map values based on direction position rather than input order. Now values are correctly assigned: first value to first direction, second value to second direction, etc.

v0.102.0

Minor Changes

• #966 3244c5d9 Thanks @tenphi! - Refactor color system to use OKHSL format with unified constants

  What's changed:

  • Converted all color tokens from RGB to OKHSL format for perceptually uniform color manipulation
  • Added color constants (PURPLE_HUE, DANGER_HUE, MAIN_SATURATION, etc.) for consistent color values across themes
  • Moved color conversion utilities (hslToRgb, okhslToRgb) to separate files (hsl-to-rgb.ts, okhsl-to-rgb.ts)
  • Renamed utility files to kebab-case for consistency (filter-base-props.ts, get-display-name.ts, etc.)
  • Removed unused color tokens (#draft, #dark-75, #pink-02, #pink-8, #pink-9)
  • Fixed hardcoded RGB value in FileTabs component to use #border token

  Why:

  OKHSL provides perceptually uniform color space, making it easier to create consistent color variations. Using constants ensures all theme colors maintain consistent saturation and lightness values.

  Technical details:

  • All color tokens now use okhsl() format
  • Color conversion utilities properly handle OKHSL → RGB conversion for CSS variable generation
  • Internal file organization improved with consistent naming conventions

• #966 3244c5d9 Thanks @tenphi! - Add warning theme and rename note theme across components

  What's changed:

  • Added warning theme support to Badge, Tag, and Item components
  • Renamed previous note theme to warning (yellow/amber) across the codebase
  • Added new note theme (violet) for informational content, available for card type items
  • Updated component documentation and stories to reflect new themes
  • Updated notification icons to use warning theme instead of note

  Components affected:

  • Badge: Added warning theme option
  • Tag: Added warning theme option
  • Item: Added warning.card and note.card theme variants
  • NotificationIcon: Changed default/attention from note to warning colors

  Migration:

  • If you were using theme="note" on Badge or Tag components, change to theme="warning" for the same yellow/amber appearance
  • For violet informational cards, use type="card" theme="note" on Item component
  • Notification icons now use warning colors by default (previously note colors)

v0.101.0

Minor Changes

• #964 1a2388be Thanks @tenphi! - Breaking: ItemAction now inherits isDisabled state from parent Item or ItemButton via context. When the parent component is disabled, all nested ItemAction components are automatically disabled.

  To keep an action enabled when the parent is disabled, explicitly set isDisabled={false} on the ItemAction:

  <Item
    isDisabled
    actions={
      <>
        <ItemAction icon={<IconEdit />} tooltip="Disabled with parent" />
        <ItemAction
          icon={<IconTrash />}
          tooltip="Still enabled"
          isDisabled={false}
        />
      </>
    }
  >
    Disabled item with one enabled action
  </Item>

v0.100.0

Minor Changes

• #960 d89a036e Thanks @tenphi! - Add @properties support for defining CSS @property at-rules in tasty styles.

  New features:

  • Define CSS custom properties with @properties in styles using token syntax ($name, #name)
  • Color tokens (#name) auto-set syntax: '<color>' and default initialValue: 'transparent'
  • Double-prefix syntax ($name, ##name) for referencing property names in transitions and animations
  • useProperty() hook and injector.property() now accept token syntax
  • Global properties can be configured via configure({ properties: {...} })

  Example:

  // Global properties (optional)
  configure({
    properties: {
      $rotation: { syntax: "<angle>", initialValue: "0deg" },
    },
  });
  
  // Local properties in styles
  const Component = tasty({
    styles: {
      "@properties": {
        $scale: { syntax: "<number>", initialValue: 1 },
        "#accent": { initialValue: "purple" }, // syntax: '<color>' auto-set
      },
      transform: "rotate($rotation) scale($scale)",
      transition: "$rotation 0.3s, $scale 0.2s", // outputs: --rotation 0.3s, --scale 0.2s
    },
  });

• #960 d89a036e Thanks @tenphi! - Add color token support to fade style property. You can now specify custom transparent and opaque colors for the gradient mask, and use multiple comma-separated groups to apply different colors per direction.

  Add multi-group support to border style property. Multiple comma-separated groups allow cascading border definitions where later groups override earlier ones for conflicting directions (e.g., border="1bw #red, 2bw #blue top").

• #962 09db7bee Thanks @tenphi! - Improve background style handling in Tasty. Add image style for background images. The fill handler now supports all background CSS properties (backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip). Add background and image transition semantic names. Deprecate backgroundColor, backgroundImage, and background styles in favor of fill, image, and separate background properties.

• #960 d89a036e Thanks @tenphi! - Added useKeyframes and useProperty React hooks for declarative CSS @Keyframes and @Property definitions. These hooks follow the same patterns as existing hooks like useStyles and useRawCSS, using useInsertionEffect for proper style injection and cleanup.

• #963 290cfa6c Thanks @tenphi! - Breaking: Changed outline style syntax to use slash separator for offset: outline: '2px solid #red / 4px' instead of the previous space-separated format. Also added outlineOffset as a direct style prop.

• #963 290cfa6c Thanks @tenphi! - Added slash separator support in style parser. Style values can now use / surrounded by whitespace to define parts (e.g., 'ellipsis / 3', '2px solid #red / 4px'). Each part is available via groups[n].parts array for style handlers.

• #960 d89a036e Thanks @tenphi! - Added Tabs component for organizing content into multiple panels with full accessibility support via React Aria. The component supports multiple visual styles (default, panel, radio), tab deletion, inline title editing, lazy rendering with content caching, and proper integration with Layout components for stretching panels to fill remaining space.

• #963 290cfa6c Thanks @tenphi! - Breaking: Enhanced textOverflow style handler with automatic setup for text truncation. Previously, textOverflow: 'ellipsis' only set text-overflow: ellipsis (which doesn't work without overflow: hidden). Now it automatically adds overflow: hidden and white-space: nowrap for single-line ellipsis, making it actually functional.

  New features:

  • textOverflow: 'ellipsis' - single-line truncation with ellipsis (now works correctly)
  • textOverflow: 'ellipsis / 3' - multi-line truncation (3 lines) with -webkit-line-clamp
  • textOverflow: 'clip' - single-line clip with overflow: hidden

  The displayStyle handler now manages display, hide, textOverflow, overflow, and whiteSpace together. User-provided overflow and whiteSpace values take precedence over auto-generated ones from textOverflow.

• #958 22e0adc7 Thanks @tenphi! - ### Added

  • Predefined tokens in configure(): Define reusable tokens ($name for values, #name for colors) that are replaced during style parsing. Unlike component-level tokens prop, predefined tokens are baked into the generated CSS for better performance and consistency.

  configure({
    tokens: {
      $spacing: "2x",
      "$card-padding": "4x",
      "#accent": "#purple",
    },
  });
  
  // Use in styles - tokens are replaced at parse time
  const Card = tasty({
    styles: {
      padding: "$card-padding", // → calc(4 * var(--gap))
      fill: "#accent", // → var(--purple-color)
    },
  });

  • Plugins can now provide predefined tokens via the tokens property in TastyPlugin.

Patch Changes

• #963 290cfa6c Thanks @tenphi! - Aligned babel plugin configuration interface with runtime TastyConfig. The TastyZeroConfig now supports plugins and parserCacheSize options, and uses the shared configure() function internally.

• #963 290cfa6c Thanks @tenphi! - Reorganized internal style chunk definitions. Display-related styles (display, hide, textOverflow, overflow, whiteSpace, scrollbar) are now in a DISPLAY chunk. Layout styles (flow, gap, grid/flex properties) are in a separate LAYOUT chunk.

• #963 290cfa6c Thanks @tenphi! - Consolidated style handlers to reduce redundant handler registrations:

  • widthStyle now handles minWidth, maxWidth directly
  • heightStyle now handles minHeight, maxHeight directly
  • presetStyle now handles all typography props (fontSize, lineHeight, fontWeight, letterSpacing, textTransform, fontStyle, fontFamily, font) with or without preset defined

  Font props support number values: fontSize={14} → font-size: 14px, fontWeight={700} → font-weight: 700.

  The font prop has special handling: font="monospace" → var(--monospace-font), font={true} → var(--font), font="CustomFont" → CustomFont, var(--font). The fontFamily prop is a direct value without fallback.

• #959 ed477654 Thanks @tenphi! - Add custom style handlers API via configure() and plugins. Handlers transform style properties into CSS declarations and replace built-in handlers for the same style name. Export styleHandlers object for delegating to built-in behavior when extending.

• #961 46e84833 Thanks @tenphi! - Fix FilterListBox custom value styles not appearing until hover and leaking to other items after filter is cleared. The issue was caused by ListBox virtualization using index-based keys instead of actual item keys, causing React to incorrectly reuse DOM elements. Added getItemKey to the virtualizer to use actual item keys for proper DOM reconciliation.

  Additionally, when allowsCustomValue is enabled and there are filtered items visible, the custom value option is now visually separated from the filtered results using a section divider. The visibility check for filtered items now also considers previously-added custom values, ensuring the separator is shown when a search term matches an existing custom item.

• [#963](https://github.com/cube-js/cube-ui...

v0.99.3

Patch Changes

• #955 edd8bfc6 Thanks @tenphi! - Fix Dialog component to merge incoming style props instead of overwriting them. Update FilterPicker and Picker to correctly access trigger width using UNSAFE_getDOMNode() and pass it to Dialog overlay via --overlay-min-width CSS custom property. Update Picker overlay width calculation to use max() function for better min-width handling.

v0.99.2

Patch Changes

• #952 ff9ad4cc Thanks @tenphi! - Fix placeholder color styling by removing filter and updating webkit text fill color

v0.99.1

Patch Changes

• #950 e9f9cd31 Thanks @tenphi! - Fixed CJS/ESM interop issue with react-keyed-flatten-children that caused crashes in Vite development mode when showing toast notifications.