Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@pandacss/types

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pandacss/types - npm Package Versions

segunadebayo
published 0.49.0 •

Changelog

Source

[0.49.0] - 2024-12-08

Add support for animation styles. Animation styles focus solely on animations, allowing you to orchestrate animation properties.

Pairing animation styles with text styles and layer styles can make your styles a lot cleaner.

Here's an example of this:

import { defineAnimationStyles } from '@pandacss/dev'

export const animationStyles = defineAnimationStyles({
  'slide-fade-in': {
    value: {
      transformOrigin: 'var(--transform-origin)',
      animationDuration: 'fast',
      '&[data-placement^=top]': {
        animationName: 'slide-from-top, fade-in',
      },
      '&[data-placement^=bottom]': {
        animationName: 'slide-from-bottom, fade-in',
      },
      '&[data-placement^=left]': {
        animationName: 'slide-from-left, fade-in',
      },
      '&[data-placement^=right]': {
        animationName: 'slide-from-right, fade-in',
      },
    },
  },
})

With that defined, I can use it in my recipe or css like so:

export const popoverSlotRecipe = defineSlotRecipe({
  slots: anatomy.keys(),
  base: {
    content: {
      _open: {
        animationStyle: 'scale-fade-in',
      },
      _closed: {
        animationStyle: 'scale-fade-out',
      },
    },
  },
})

This feature will drive consumers to lean in towards CSS for animations rather than JS. Composing animation names is a powerful feature we should encourage consumers to use.

Added

segunadebayo
published 0.48.1 •

Changelog

Source

[0.48.1] - 2024-12-07

Fixed

  • Fix issue where staticCss artifacts were not included in the build info json.
  • Fix issue where scrollbarGutter property incorrectly referenced spacing tokens. The only valid values are auto, stable, and both-edges.
segunadebayo
published 0.0.0-dev-20241207111535 •

segunadebayo
published 0.0.0-dev-20241206205627 •

segunadebayo
published 0.48.0 •

Changelog

Source

[0.48.0] - 2024-11-13

Fixed

Fix multi-theme issue where calling the getTheme function throws a Vite error due to invalid dynamic import format.

import { getTheme } from 'styled-system/themes'

getTheme('default')
// -> The above dynamic import cannot be analyzed by Vite.

Changed

[Breaking] Remove default utility values for gridTemplateColumns, gridTemplateRows, gridColumn and gridRow to prevent interference with native css values.

For example 1 or 2 is a valid native value for gridColumn or gridRow, and should not be overridden by the utility.

Find the previous default values below, you can add them back to your config if you need them.

const utilities = {
  gridTemplateColumns: {
    className: 'grid-tc',
    group: 'Grid Layout',
    values: {
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
      '7': 'repeat(7, minmax(0, 1fr))',
      '8': 'repeat(8, minmax(0, 1fr))',
      '9': 'repeat(9, minmax(0, 1fr))',
      '10': 'repeat(10, minmax(0, 1fr))',
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },
  },
  gridTemplateRows: {
    className: 'grid-tr',
    group: 'Grid Layout',
    values: {
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
      '7': 'repeat(7, minmax(0, 1fr))',
      '8': 'repeat(8, minmax(0, 1fr))',
      '9': 'repeat(9, minmax(0, 1fr))',
      '10': 'repeat(10, minmax(0, 1fr))',
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },
  },
  gridColumn: {
    className: 'grid-c',
    group: 'Grid Layout',
    values: {
      full: '1 / -1',
      '1': 'span 1 / span 1',
      '2': 'span 2 / span 2',
      '3': 'span 3 / span 3',
      '4': 'span 4 / span 4',
      '5': 'span 5 / span 5',
      '6': 'span 6 / span 6',
      '7': 'span 7 / span 7',
      '8': 'span 8 / span 8',
      '9': 'span 9 / span 9',
      '10': 'span 10 / span 10',
      '11': 'span 11 / span 11',
      '12': 'span 12 / span 12',
    },
  },
  gridRow: {
    className: 'grid-r',
    group: 'Grid Layout',
    values: {
      full: '1 / -1',
      '1': 'span 1 / span 1',
      '2': 'span 2 / span 2',
      '3': 'span 3 / span 3',
      '4': 'span 4 / span 4',
      '5': 'span 5 / span 5',
      '6': 'span 6 / span 6',
      '7': 'span 7 / span 7',
      '8': 'span 8 / span 8',
      '9': 'span 9 / span 9',
      '10': 'span 10 / span 10',
      '11': 'span 11 / span 11',
      '12': 'span 12 / span 12',
    },
  },
}
segunadebayo
published 0.0.0-dev-20241113153642 •

segunadebayo
published 0.0.0-dev-20241113144739 •

segunadebayo
published 0.0.0-dev-20241113133153 •

segunadebayo
published 0.0.0-dev-20241113132647 •

segunadebayo
published 0.0.0-dev-20241113131118 •