Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): update pandacss to ^0.51.1 #60

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 14, 2024

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@pandacss/dev (source) ^0.34.3 -> ^0.51.1 age adoption passing confidence
@pandacss/node (source) ^0.34.3 -> ^0.51.1 age adoption passing confidence

Release Notes

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

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
chakra-ui/panda (@​pandacss/node)

v0.51.1

Compare Source

Patch Changes

v0.51.0

Compare Source

Minor Changes
  • d68ad1f: [BREAKING]: Fix issue where Next.js build might fail intermittently due to version mismatch between
    internal ts-morph and userland typescript.

    The current version of TS supported is 5.6.2

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.

@renovate renovate bot force-pushed the renovate/pandacss branch from 15f4fd8 to 8df9acd Compare March 19, 2024 22:59
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.35.0 chore(deps): update pandacss to ^0.36.0 Mar 19, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch 2 times, most recently from 8f92a83 to e22584e Compare March 23, 2024 16:33
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.36.0 chore(deps): update pandacss to ^0.36.1 Mar 23, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from e22584e to 998c3ae Compare April 1, 2024 22:31
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.36.1 chore(deps): update pandacss to ^0.37.0 Apr 1, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 998c3ae to 9042f5c Compare April 3, 2024 00:20
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.37.0 chore(deps): update pandacss to ^0.37.1 Apr 3, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 9042f5c to d5219fa Compare April 5, 2024 22:13
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.37.1 chore(deps): update pandacss to ^0.37.2 Apr 5, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from d5219fa to 13beb43 Compare April 29, 2024 18:36
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.37.2 chore(deps): update pandacss Apr 29, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 13beb43 to 22a1e00 Compare April 29, 2024 22:09
@renovate renovate bot changed the title chore(deps): update pandacss chore(deps): update pandacss to ^0.38.0 Apr 29, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 22a1e00 to c06195d Compare May 3, 2024 19:46
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.38.0 chore(deps): update pandacss to ^0.39.0 May 3, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from c06195d to 7f09f35 Compare May 8, 2024 04:20
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.39.0 chore(deps): update pandacss to ^0.39.1 May 8, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 7f09f35 to ed5bdfe Compare May 11, 2024 12:01
@renovate renovate bot force-pushed the renovate/pandacss branch from ed5bdfe to 98cdadd Compare May 25, 2024 07:15
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.39.1 chore(deps): update pandacss to ^0.39.2 May 25, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 98cdadd to ad8cb31 Compare May 29, 2024 16:39
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.39.2 chore(deps): update pandacss to ^0.40.0 May 29, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from ad8cb31 to c6130fc Compare May 31, 2024 17:22
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.40.0 chore(deps): update pandacss to ^0.40.1 May 31, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from c6130fc to 0c9e0e3 Compare June 16, 2024 21:32
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.40.1 chore(deps): update pandacss to ^0.41.0 Jun 16, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 0c9e0e3 to 9518b73 Compare July 8, 2024 22:39
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.41.0 chore(deps): update pandacss to ^0.42.0 Jul 8, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 1457563 to f74bab8 Compare August 29, 2024 08:29
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.45.1 chore(deps): update pandacss Aug 29, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from f74bab8 to 26c9fb3 Compare August 29, 2024 10:49
@renovate renovate bot changed the title chore(deps): update pandacss chore(deps): update pandacss to ^0.45.2 Aug 29, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 26c9fb3 to e634a91 Compare August 29, 2024 13:33
@renovate renovate bot force-pushed the renovate/pandacss branch from e634a91 to 0c287f7 Compare September 9, 2024 18:23
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.45.2 chore(deps): update pandacss Sep 9, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 0c287f7 to 248d264 Compare September 9, 2024 23:06
@renovate renovate bot changed the title chore(deps): update pandacss chore(deps): update pandacss to ^0.46.0 Sep 9, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 248d264 to c2c0c35 Compare September 22, 2024 23:17
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.46.0 chore(deps): update pandacss to ^0.46.1 Sep 22, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from c2c0c35 to c7c21b2 Compare October 19, 2024 03:20
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.46.1 chore(deps): update pandacss to ^0.47.0 Oct 19, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from c7c21b2 to 56b3c66 Compare November 6, 2024 11:16
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.47.0 chore(deps): update pandacss to ^0.47.1 Nov 6, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 56b3c66 to aed45e7 Compare November 14, 2024 04:44
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.47.1 chore(deps): update pandacss to ^0.48.0 Nov 14, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from aed45e7 to f93560b Compare December 7, 2024 19:43
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.48.0 chore(deps): update pandacss to ^0.48.1 Dec 7, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from f93560b to b934b9a Compare December 8, 2024 23:45
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.48.1 chore(deps): update pandacss to ^0.49.0 Dec 8, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from b934b9a to f38ad3a Compare December 27, 2024 20:18
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.49.0 chore(deps): update pandacss to ^0.50.0 Dec 27, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from f38ad3a to d10b78d Compare December 31, 2024 17:29
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.50.0 chore(deps): update pandacss Dec 31, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from d10b78d to 471236b Compare December 31, 2024 18:14
@renovate renovate bot changed the title chore(deps): update pandacss chore(deps): update pandacss to ^0.51.0 Dec 31, 2024
@renovate renovate bot force-pushed the renovate/pandacss branch from 471236b to bdfb7c5 Compare January 1, 2025 18:05
@renovate renovate bot changed the title chore(deps): update pandacss to ^0.51.0 chore(deps): update pandacss to ^0.51.1 Jan 1, 2025
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.

0 participants