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.41.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

Mend Renovate

This PR contains the following updates:

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

Release Notes

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

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

Compare Source

Minor Changes
  • a2fb5cc: - Add support for explicitly specifying config related files that should trigger a context reload on change.

    We automatically track the config file and (transitive) files imported by the config file as much as possible, but
    sometimes we might miss some. You can use this option as a workaround for those edge cases.

    Set the dependencies option in panda.config.ts to a glob or list of files.

    export default defineConfig({
      // ...
      dependencies: ['path/to/files/**.ts'],
    })
    • Invoke config:change hook in more situations (when the --watch flag is passed to panda codegen,
      panda cssgen, panda ship)

    • Watch for more config options paths changes, so that the related artifacts will be regenerated a bit more reliably
      (ex: updating the config.hooks will now trigger a full regeneration of styled-system)

Patch Changes

v0.28.0

Compare Source

Minor Changes
  • f58f6df: Refactor config.hooks to be much more powerful, you can now:

    • Tweak the config after it has been resolved (after presets are loaded and merged), this could be used to dynamically
      load all recipes from a folder
    • Transform a source file's content before parsing it, this could be used to transform the file content to a
      tsx-friendly syntax so that Panda's parser can parse it.
    • Implement your own parser logic and add the extracted results to the classic Panda pipeline, this could be used to
      parse style usage from any template language
    • Tweak the CSS content for any @layer or even right before it's written to disk (if using the CLI) or injected
      through the postcss plugin, allowing all kinds of customizations like removing the unused CSS variables, etc.
    • React to any config change or after the codegen step (your outdir, the styled-system folder) have been generated

    See the list of available config.hooks here:

    export interface PandaHooks {
      /**
       * Called when the config is resolved, after all the presets are loaded and merged.
       * This is the first hook called, you can use it to tweak the config before the context is created.
       */
      'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
      /**
       * Called when the Panda context has been created and the API is ready to be used.
       */
      'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
      /**
       * Called when the config file or one of its dependencies (imports) has changed.
       */
      'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
      /**
       * Called after reading the file content but before parsing it.
       * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
       * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
       */
      'parser:before': (args: { filePath: string; content: string }) => string | void
      /**
       * Called after the file styles are extracted and processed into the resulting ParserResult object.
       * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
       */
      'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
      /**
       * Called after the codegen is completed
       */
      'codegen:done': () => MaybeAsyncReturn
      /**
       * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
       * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
       * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
       */
      'cssgen:done': (args: {
        artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
        content: string
      }) => string | void
    }
Patch Changes

v0.27.3

Compare Source

Patch Changes

v0.27.2

Compare Source

Patch Changes

v0.27.1

Compare Source

Patch Changes

v0.27.0

Compare Source

Minor Changes
  • 8430490: Improve performance, mostly for the CSS generation by removing a lot of postcss usage (and plugins).

v0.26.2

Compare Source

Patch Changes

v0.26.1

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 this update again.


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

This PR has been generated by Mend Renovate. View repository job log here.

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

None yet

0 participants