Changelog
All notable changes to this project will be documented in this file.
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
preflight: true,
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
}),
],
include: ['./src/**/*.{js,jsx,ts,tsx}'],
jsxFramework: '__JS_FRAMEWORK__',
outdir: 'styled-system',
})
import { parkwindPlugin } from '@park-ui/tailwind-plugin'
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [parkwindPlugin],
parkUI: {
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
},
darkMode: ['class'],
}
export default config
All notable changes to this project will be documented in this file.
Card.Description
and Alert.Description
from p
to div
to allow for multiple paragraphs.Icon
and Progress
components.heading
recipe in favor of text
recipe. Please update your code snippets accordingly.This release marks an important milestone for Park UI as we have upgraded to the new major version 2.0 of Ark UI. Please update your dependencies accordingly.
Skeleton
component.enclosed
variant to the Tabs
component.TagsInput
recipe to use the new ItemPreview
part.enclosed
variant of the Tabs
component was rendered slightly too bigCard
component where the content would overflow the card.SegmentControl
that the indicator
was sometimes not rendered correctly.Avatar
were not centered correctly.We are excited to announce that in this release, we have revised several components to feature a closed Component API:
Avatar
Checkbox
Number Input
Pagination
Pin Input
Rating Group
Slider
Switch
For more information on the reasoning behind this change, please refer to the GitHub Issue.
Progress
component (Preview).RatingGroup
in various colors.SegmentControl
.PinInput
component where the input width was incorrect.Select
component where a disabled item incorrectly displayed a hover color.Kbd
component.accent.text
to the list of semantic tokens. This token is used do display text in interactive elements like
buttons and links.colorPalette
prop to the component to change its
visual style. See the example below for more details.<Button colorPalette="red">Danger</Button>
Table
markup where the thead
element was not rendered correctly.Dialog
to show up in the wrong position when the page was scrolled.border.accent
from the list of semantic tokens. Use accent.default
or colorPalette.default
instead.This is one of the biggest releases of Park UI so far. We’ve introduced a new way to configure presets, which will make it easier to customize the theme to your needs. We’ve also replaced the default colors with Radix Colors.
The tailwind config respects now to configure the preset colors:
const { parkwindPlugin } = require('./dist')
module.exports = {
plugins: [parkwindPlugin],
parkUI: {
accentColor: 'amber',
grayColor: 'sand',
borderRadius: '2xl',
},
// ...rest of your config
}