Skip to content

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Jan 2, 2024

This PR contains the following updates:

Package Change Age Confidence
@pandacss/dev (source) ^0.23.0 -> ^0.54.0 age confidence
@pandacss/types (source) ^0.23.0 -> ^0.54.0 age confidence

Release Notes

chakra-ui/panda (@​pandacss/dev)

v0.54.0

Compare Source

Patch Changes

v0.53.7

Compare Source

Patch Changes

v0.53.6

Compare Source

Patch Changes

v0.53.5

Compare Source

Patch Changes

v0.53.4

Compare Source

Patch Changes

v0.53.3

Compare Source

Patch Changes

v0.53.2

Compare Source

Patch Changes

v0.53.1

Compare Source

Patch Changes

v0.53.0

Compare Source

Patch Changes

v0.52.0

Compare Source

Patch Changes

v0.51.1

Compare Source

Patch Changes
  • 9c1327e: Redesigned the recipe report to be more readable and easier to understand. We simplified the JSX and
    Function columns to be more concise.

    BEFORE

    ╔════════════════════════╤══════════════════════╤═════════╤═══════╤════════════╤═══════════════════╤══════════╗
    ║ Recipe                 │ Variant Combinations │ Usage % │ JSX % │ Function % │ Most Used         │ Found in ║
    ╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
    ║ someRecipe (1 variant) │ 1 / 1                │ 100%    │ 100%  │ 0%         │ size.small        │ 1 file   ║
    ╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
    ║ button (4 variants)    │ 7 / 9                │ 77.78%  │ 63%   │ 38%        │ size.md, size.sm, │ 2 files  ║
    ║                        │                      │         │       │            │ state.focused,    │          ║
    ║                        │                      │         │       │            │ variant.danger,   │          ║
    ║                        │                      │         │       │            │ variant.primary   │          ║
    ╚════════════════════════╧══════════════════════╧═════════╧═══════╧════════════╧═══════════════════╧══════════╝

    AFTER

    ╔════════════════════════╤════════════════╤═══════════════════╤═══════════════════╤══════════╤═══════════╗
    ║ Recipe                 │ Variant values │ Usage %           │ Most used         │ Found in │ Used as   ║
    ╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
    ║ someRecipe (1 variant) │ 1 value        │ 100% (1 value)    │ size.small        │ 1 file   │ jsx: 100% ║
    ║                        │                │                   │                   │          │ fn: 0%    ║
    ╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
    ║ button (4 variants)    │ 9 values       │ 77.78% (7 values) │ size.md, size.sm, │ 2 files  │ jsx: 63%  ║
    ║                        │                │                   │ state.focused,    │          │ fn: 38%   ║
    ║                        │                │                   │ variant.danger,   │          │           ║
    ║                        │                │                   │ variant.primary   │          │           ║
    ╚════════════════════════╧════════════════╧═══════════════════╧═══════════════════╧══════════╧═══════════╝

v0.51.0

Compare Source

Patch Changes

v0.50.0

Compare Source

Minor Changes
  • fea78c7: Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how
    your design system is used and answers the following questions:

    • What tokens are most used?
    • What recipe variants are most used?
    • How many hardcoded values vs tokens do we have?
    panda analyze --scope=<token|recipe>

    Still work in progress but we're excited to get your feedback!

Patch Changes

v0.49.0

Compare Source

Minor Changes
  • 97a0e4d: 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 '@&#8203;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.

Patch Changes

v0.48.1

Compare Source

Patch Changes

v0.48.0

Compare Source

Patch Changes

v0.47.1

Compare Source

Patch Changes

v0.47.0

Compare Source

Patch Changes

v0.46.1

Compare Source

Patch Changes

v0.46.0

Compare Source

Patch Changes

v0.45.2

Compare Source

Patch Changes

v0.45.1

Compare Source

Patch Changes

v0.45.0

Compare Source

Patch Changes

v0.44.0

Compare Source

Patch Changes

v0.43.0

Compare Source

Patch Changes

v0.42.0

Compare Source

Patch Changes

v0.41.0

Compare Source

Patch Changes

v0.40.1

Compare Source

Patch Changes

v0.40.0

Compare Source

Minor Changes
  • 5dcdae4: Improve monorepo setup DX by exposing some cli flags
panda init
  • Added new flag --no-codegen to skip codegen during initialization
  • Added new flag --outdir to specify the output directory for generated files
panda emit-pkg
  • Added new --base flag to specify the base directory for the entrypoints in the generated package.json#exports
    field
Patch Changes

v0.39.2

Compare Source

Patch Changes

v0.39.1

Compare Source

Patch Changes

v0.39.0

Compare Source

Patch Changes

v0.38.0

Compare Source

Patch Changes

v0.37.2

Compare Source

Patch Changes

v0.37.1

Compare Source

Patch Changes

v0.37.0

Compare Source

Patch Changes

v0.36.1

Compare Source

Patch Changes

v0.36.0

Compare Source

Minor Changes
  • 2691f16: Add config.themes to easily define and apply a theme on multiple tokens at once, using data attributes and
    CSS variables.

    Can pre-generate multiple themes with token overrides as static CSS, but also dynamically import and inject a theme
    stylesheet at runtime (browser or server).

    Example:

    // panda.config.ts
    import { defineConfig } from '@&#8203;pandacss/dev'
    
    export default defineConfig({
      // ...
      // main theme
      theme: {
        extend: {
          tokens: {
            colors: {
              text: { value: 'blue' },
            },
          },
          semanticTokens: {
            colors: {
              body: {
                value: {
                  base: '{colors.blue.600}',
                  _osDark: '{colors.blue.400}',
                },
              },
            },
          },
        },
      },
      // alternative theme variants
      themes: {
        primary: {
          tokens: {
            colors: {
              text: { value: 'red' },
            },
          },
          semanticTokens: {
            colors: {
              muted: { value: '{colors.red.200}' },
              body: {
                value: {
                  base: '{colors.red.600}',
                  _osDark: '{colors.red.400}',
                },
              },
            },
          },
        },
        secondary: {
          tokens: {
            colors: {
              text: { value: 'blue' },
            },
          },
          semanticTokens: {
            colors: {
              muted: { value: '{colors.blue.200}' },
              body: {
                value: {
                  base: '{colors.blue.600}',
                  _osDark: '{colors.blue.400}',
                },
              },
            },
          },
        },
      },
    })
Pregenerating themes

By default, no additional theme variant is generated, you need to specify the specific themes you want to generate in
staticCss.themes to include them in the CSS output.

// panda.config.ts
import { defineConfig } from '@&#8203;pandacss/dev'

export default defineConfig({
  // ...
  staticCss: {
    themes: ['primary', 'secondary'],
  },
})

This will generate the following CSS:

@&#8203;layer tokens {
  :where(:root, :host) {
    --colors-text: blue;
    --colors-body: var(--colors-blue-600);
  }

  [data-panda-theme='primary'] {
    --colors-text: red;
    --colors-muted: var(--colors-red-200);
    --colors-body: var(--colors-red-600);
  }

  @&#8203;media (prefers-color-scheme: dark) {
    :where(:root, :host) {
      --colors-body: var(--colors-blue-400);
    }

    [data-panda-theme='primary'] {
      --colors-body: var(--colors-red-400);
    }
  }
}

An alternative way of applying a theme is by using the new styled-system/themes entrypoint where you can import the
themes CSS variables and use them in your app.

ℹ️ The styled-system/themes will always contain every themes (tree-shaken if not used), staticCss.themes only
applies to the CSS output.

Each theme has a corresponding JSON file with a similar structure:

{
  "name": "primary",
  "id": "panda-themes-primary",
  "dataAttr": "primary",
  "css": "[data-panda-theme=primary] { ... }"
}

ℹ️ Note that for semantic tokens, you need to use inject the theme styles, see below

Dynamically import a theme using its name:

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

const theme = await getTheme('red')
//    ^? {
//     name: "red";
//     id: string;
//     css: string;
// }

Inject the theme styles into the DOM:

import { injectTheme } from '../styled-system/themes'

const theme = await getTheme('red')
injectTheme(document.documentElement, theme) // this returns the injected style element

SSR example with NextJS:

// app/layout.tsx
import { Inter } from 'next/font/google'
import { cookies } from 'next/headers'
import { ThemeName, getTheme } from '../../styled-system/themes'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const store = cookies()
  const themeName = store.get('theme')?.value as ThemeName
  const theme = themeName && (await getTheme(themeName))

  return (
    <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
      {themeName && (
        <head>
          <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
        </head>
      )}
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
import { getTheme, injectTheme } from '../../styled-system/themes'

export default function Home() {
  return (
    <>
      <button
        onClick={async () => {
          const current = document.documentElement.dataset.pandaTheme
          const next = current === 'primary' ? 'secondary' : 'primary'
          const theme = await getTheme(next)
          setCookie('theme', next, 7)
          injectTheme(document.documentElement, theme)
        }}
      >
        swap theme
      </button>
    </>
  )
}

// Set a Cookie
function setCookie(cName: string, cValue: any, expDays: number) {
  let date = new Date()
  date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
  const expires = 'expires=' + date.toUTCString()
  document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
}

Finally, you can create a theme contract to ensure that all themes have the same structure:

import { defineThemeContract } from '@&#8203;pandacss/dev'

const defineTheme = defineThemeContract({
  tokens: {
    colors: {
      red: { value: '' }, // theme implementations must have a red color
    },
  },
})

defineTheme({
  selector: '.theme-secondary',
  tokens: {
    colors: {
      // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
      //
      // fixed with
      // red: { value: 'red' },
    },
  },
})
Patch Changes

v0.35.0

Compare Source

Patch Changes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.


  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@changeset-bot
Copy link

changeset-bot bot commented Jan 2, 2024

⚠️ No Changeset found

Latest commit: 94ee7ee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 2e4bd42 to f078f5d Compare January 6, 2024 11:32
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.24.0 chore(deps): update panda-css monorepo to ^0.25.0 Jan 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from f078f5d to 311a828 Compare January 9, 2024 10:18
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.25.0 chore(deps): update panda-css monorepo to ^0.26.0 Jan 9, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 311a828 to fe7c336 Compare January 15, 2024 01:07
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.26.0 chore(deps): update panda-css monorepo to ^0.27.0 Jan 15, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from fe7c336 to cfa9ef4 Compare January 24, 2024 19:40
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.27.0 chore(deps): update panda-css monorepo to ^0.28.0 Jan 24, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from cfa9ef4 to 08002a4 Compare January 29, 2024 21:45
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.28.0 chore(deps): update panda-css monorepo to ^0.29.0 Jan 29, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 08002a4 to 35f4c87 Compare February 5, 2024 21:46
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.29.0 chore(deps): update panda-css monorepo to ^0.30.0 Feb 5, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 35f4c87 to 921a827 Compare February 14, 2024 00:11
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.30.0 chore(deps): update panda-css monorepo to ^0.31.0 Feb 14, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 921a827 to 36e8270 Compare February 20, 2024 00:42
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.31.0 chore(deps): update panda-css monorepo to ^0.32.0 Feb 20, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 36e8270 to cf6378b Compare February 28, 2024 01:54
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.32.0 chore(deps): update panda-css monorepo to ^0.33.0 Feb 28, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from cf6378b to 3e7e691 Compare March 6, 2024 23:38
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.33.0 chore(deps): update panda-css monorepo to ^0.34.0 Mar 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 3e7e691 to b489de9 Compare March 14, 2024 18:04
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.34.0 chore(deps): update panda-css monorepo to ^0.35.0 Mar 14, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from b489de9 to 7772ad1 Compare March 19, 2024 22:02
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.35.0 chore(deps): update panda-css monorepo Mar 19, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 7772ad1 to eec3fb8 Compare March 20, 2024 02:15
@renovate renovate bot changed the title chore(deps): update panda-css monorepo chore(deps): update panda-css monorepo to ^0.36.0 Mar 20, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from eec3fb8 to 82c137a Compare April 1, 2024 21:20
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.36.0 chore(deps): update panda-css monorepo Apr 1, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 82c137a to f14773f Compare April 2, 2024 02:18
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.40.0 chore(deps): update panda-css monorepo to ^0.41.0 Jun 16, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 63dcb9a to b71a8a1 Compare July 8, 2024 19:28
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.41.0 chore(deps): update panda-css monorepo to ^0.42.0 Jul 8, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from b71a8a1 to 14b131c Compare July 20, 2024 00:30
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.42.0 chore(deps): update panda-css monorepo to ^0.43.0 Jul 20, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 14b131c to 81c056b Compare July 22, 2024 17:06
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.43.0 chore(deps): update panda-css monorepo to ^0.44.0 Jul 22, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 81c056b to cc434d0 Compare August 6, 2024 21:07
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.44.0 chore(deps): update panda-css monorepo to ^0.45.0 Aug 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from cc434d0 to 6ecbea4 Compare September 9, 2024 19:41
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.45.0 chore(deps): update panda-css monorepo to ^0.46.0 Sep 9, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 6ecbea4 to ca6939b Compare October 19, 2024 04:15
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.46.0 chore(deps): update panda-css monorepo to ^0.47.0 Oct 19, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from ca6939b to 941315f Compare November 14, 2024 03:24
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.47.0 chore(deps): update panda-css monorepo to ^0.48.0 Nov 14, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 941315f to 15e29f2 Compare December 8, 2024 23:18
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.48.0 chore(deps): update panda-css monorepo to ^0.49.0 Dec 8, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 15e29f2 to df3c64b Compare December 27, 2024 21:33
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.49.0 chore(deps): update panda-css monorepo to ^0.50.0 Dec 27, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from df3c64b to 0d5da05 Compare December 31, 2024 19:47
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.50.0 chore(deps): update panda-css monorepo to ^0.51.0 Dec 31, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 0d5da05 to 62e3c4e Compare February 1, 2025 22:23
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.51.0 chore(deps): update panda-css monorepo to ^0.52.0 Feb 1, 2025
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 62e3c4e to 93144fd Compare February 10, 2025 05:47
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.52.0 chore(deps): update panda-css monorepo to ^0.53.0 Feb 10, 2025
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 93144fd to 19a116b Compare June 15, 2025 11:52
@renovate renovate bot changed the title chore(deps): update panda-css monorepo to ^0.53.0 chore(deps): update panda-css monorepo to ^0.54.0 Jun 15, 2025
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 19a116b to 64ee8e1 Compare October 21, 2025 11:36
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 64ee8e1 to 94ee7ee Compare November 10, 2025 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant