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 dependency @pandacss/dev to ^0.46.0 #22

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

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Dec 19, 2023

This PR contains the following updates:

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

Release Notes

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

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 '@​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 '@​pandacss/dev'

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

This will generate the following CSS:

@​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);
  }

  @​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

v0.34.3

Compare Source

Patch Changes

v0.34.2

Compare Source

Patch Changes

v0.34.1

Compare Source

Patch Changes

v0.34.0

Compare Source

Patch Changes

v0.33.0

Compare Source

Patch Changes

v0.32.1

Compare Source

Patch Changes

v0.32.0

Compare Source

Patch Changes

v0.31.0

Compare Source

Minor Changes
  • a17fe38: - Add a config.polyfill option that will polyfill the CSS @​layer at-rules using a
    postcss plugin
    • And --polyfill flag to panda and panda cssgen commands
Patch Changes

v0.30.2

Compare Source

Patch Changes

v0.30.1

Compare Source

Patch Changes

v0.30.0

Compare Source

Patch Changes

v0.29.1

Compare Source

Patch Changes

[v0.29.0](https://re


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 this update 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/panda-css-monorepo branch from d099e26 to 484a3b9 Compare December 22, 2023 21:27
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.22.0 chore(deps): update dependency @pandacss/dev to ^0.23.0 Dec 22, 2023
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 484a3b9 to 23f9d5d Compare January 2, 2024 13:52
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.23.0 chore(deps): update dependency @pandacss/dev to ^0.24.0 Jan 2, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 23f9d5d to 45a4b7b Compare January 6, 2024 13:10
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.24.0 chore(deps): update dependency @pandacss/dev to ^0.25.0 Jan 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 45a4b7b to 8018873 Compare January 9, 2024 16:50
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.25.0 chore(deps): update dependency @pandacss/dev to ^0.26.0 Jan 9, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 8018873 to c6da446 Compare January 15, 2024 00:20
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.26.0 chore(deps): update dependency @pandacss/dev to ^0.27.0 Jan 15, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from c6da446 to 5425bd2 Compare January 24, 2024 17:28
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.27.0 chore(deps): update dependency @pandacss/dev to ^0.28.0 Jan 24, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 5425bd2 to 84e3803 Compare January 30, 2024 00:38
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.28.0 chore(deps): update dependency @pandacss/dev to ^0.29.0 Jan 30, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 84e3803 to 3a02da2 Compare February 5, 2024 21:43
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.29.0 chore(deps): update dependency @pandacss/dev to ^0.30.0 Feb 5, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 3a02da2 to 115e36e Compare February 14, 2024 01:33
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.30.0 chore(deps): update dependency @pandacss/dev to ^0.31.0 Feb 14, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 115e36e to 88472e4 Compare February 20, 2024 01:30
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.31.0 chore(deps): update dependency @pandacss/dev to ^0.32.0 Feb 20, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 88472e4 to dc4020a Compare February 28, 2024 00:23
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.32.0 chore(deps): update dependency @pandacss/dev to ^0.33.0 Feb 28, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from dc4020a to 008be39 Compare March 6, 2024 19:45
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.33.0 chore(deps): update dependency @pandacss/dev to ^0.34.0 Mar 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 008be39 to 6658424 Compare March 14, 2024 20:12
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.34.0 chore(deps): update dependency @pandacss/dev to ^0.35.0 Mar 14, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 6658424 to d98c911 Compare March 19, 2024 22:41
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.35.0 chore(deps): update dependency @pandacss/dev to ^0.36.0 Mar 19, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from d98c911 to 487fdc5 Compare April 1, 2024 22:35
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.36.0 chore(deps): update dependency @pandacss/dev to ^0.37.0 Apr 1, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 487fdc5 to 84459e4 Compare April 29, 2024 19:14
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.37.0 chore(deps): update dependency @pandacss/dev to ^0.38.0 Apr 29, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 84459e4 to 9e86759 Compare May 3, 2024 19:11
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.38.0 chore(deps): update dependency @pandacss/dev to ^0.39.0 May 3, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 9e86759 to 9eb727f Compare May 29, 2024 18:45
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.39.0 chore(deps): update dependency @pandacss/dev to ^0.40.0 May 29, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 9eb727f to c14c15c Compare June 16, 2024 21:23
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.40.0 chore(deps): update dependency @pandacss/dev to ^0.41.0 Jun 16, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from c14c15c to 00a0930 Compare July 8, 2024 20:22
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.41.0 chore(deps): update dependency @pandacss/dev to ^0.42.0 Jul 8, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 00a0930 to 8e671cb Compare July 20, 2024 00:17
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.42.0 chore(deps): update dependency @pandacss/dev to ^0.43.0 Jul 20, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 8e671cb to 48c8574 Compare July 22, 2024 15:17
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.43.0 chore(deps): update dependency @pandacss/dev to ^0.44.0 Jul 22, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 48c8574 to 4425953 Compare August 6, 2024 20:09
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.44.0 chore(deps): update dependency @pandacss/dev to ^0.45.0 Aug 6, 2024
@renovate renovate bot force-pushed the renovate/panda-css-monorepo branch from 4425953 to fc12b47 Compare September 9, 2024 19:16
@renovate renovate bot changed the title chore(deps): update dependency @pandacss/dev to ^0.45.0 chore(deps): update dependency @pandacss/dev to ^0.46.0 Sep 9, 2024
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