rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-30 16:14:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add chart colors to theme customizer (#4237)

Browse Source 
# Description

This PR adds support for customizing graphics themes in the `ThemeCustomizer` component. Users can now select and copy chart colors (`chart-1`, `chart-2`, `chart-3`, `chart-4`, `chart-5`) along with other themes.

## Changes Implemented

1. **Themes Update**: Added chart themes (`chart-1`, `chart-2`, `chart-3`, `chart-4`, `chart-5`) to the chart file. themes configuration (`themes.ts`).
2. **Modification of the `ThemeCustomizer` Component**: The new graphics themes were integrated into the component so that they can be selected and copied.
3. **CSS Tweak**: Updated the functions that generate CSS code to include the new graphics themes.

## How to Test

1. Run the project locally.
2. Navigate to the `ThemeCustomizer` component.
3. Verify that the new graphics themes are available for selection.
4. Test the functionality of copying the CSS code and making sure it includes the graphics colors.

## References

- Added support for graphics themes based on defaults provided by Shadcn.
This commit is contained in:
Mariano Álvarez
2024-07-10 14:56:38 +02:00
committed by GitHub
parent 36a9c1bb71
commit 03b1d783c4
2 changed files with 160 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/www/components/theme-customizer.tsx
View File

@@ -510,6 +510,21 @@ function CustomizerCode() {
<span className="line text-white">
&nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
</span>
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
(prefix) => (
<>
<span className="line text-white">
&nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
{
activeTheme?.cssVars.light[
prefix as keyof typeof activeTheme.cssVars.light
]
}
;
</span>
</>
)
)}
<span className="line text-white">&nbsp;&nbsp;&#125;</span>
<span className="line text-white">&nbsp;</span>
<span className="line text-white">&nbsp;&nbsp;.dark &#123;</span>
@@ -563,6 +578,21 @@ function CustomizerCode() {
&nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
{activeTheme?.cssVars.dark["ring"]};
</span>
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
(prefix) => (
<>
<span className="line text-white">
&nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
{
activeTheme?.cssVars.dark[
prefix as keyof typeof activeTheme.cssVars.dark
]
}
;
</span>
</>
)
)}
<span className="line text-white">&nbsp;&nbsp;&#125;</span>
<span className="line text-white">&#125;</span>
</code>
@@ -606,6 +636,11 @@ const BASE_STYLES_WITH_VARIABLES = `
--input: <%- colors.light["input"] %>;
--ring: <%- colors.light["ring"] %>;
--radius: <%- radius %>rem;
--chart-1: <%- colors.light["chart1"] %>;
--chart-2: <%- colors.light["chart2"] %>;
--chart-3: <%- colors.light["chart3"] %>;
--chart-4: <%- colors.light["chart4"] %>;
--chart-5: <%- colors.light["chart5"] %>;
}
.dark {
@@ -628,6 +663,11 @@ const BASE_STYLES_WITH_VARIABLES = `
--border: <%- colors.dark["border"] %>;
--input: <%- colors.dark["input"] %>;
--ring: <%- colors.dark["ring"] %>;
--chart-1: <%- colors.dark["chart1"] %>;
--chart-2: <%- colors.dark["chart2"] %>;
--chart-3: <%- colors.dark["chart3"] %>;
--chart-4: <%- colors.dark["chart4"] %>;
--chart-5: <%- colors.dark["chart5"] %>;
}
}
`

120
apps/www/registry/themes.ts
View File

@@ -28,6 +28,11 @@ export const themes = [
input: "240 5.9% 90%",
ring: "240 5.9% 10%",
radius: "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "240 10% 3.9%",
@@ -49,6 +54,11 @@ export const themes = [
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "240 4.9% 83.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -81,6 +91,11 @@ export const themes = [
input: "214.3 31.8% 91.4%",
ring: "222.2 84% 4.9%",
radius: "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "222.2 84% 4.9%",
@@ -102,6 +117,11 @@ export const themes = [
border: "217.2 32.6% 17.5%",
input: "217.2 32.6% 17.5%",
ring: "212.7 26.8% 83.9",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -134,6 +154,11 @@ export const themes = [
input: "20 5.9% 90%",
ring: "20 14.3% 4.1%",
radius: "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "20 14.3% 4.1%",
@@ -155,6 +180,11 @@ export const themes = [
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "24 5.7% 82.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -187,6 +217,11 @@ export const themes = [
input: "220 13% 91%",
ring: "224 71.4% 4.1%",
radius: "0.35rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "224 71.4% 4.1%",
@@ -208,6 +243,11 @@ export const themes = [
border: "215 27.9% 16.9%",
input: "215 27.9% 16.9%",
ring: "216 12.2% 83.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -239,6 +279,11 @@ export const themes = [
border: "0 0% 89.8%",
input: "0 0% 89.8%",
ring: "0 0% 3.9%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "0 0% 3.9%",
@@ -260,6 +305,11 @@ export const themes = [
border: "0 0% 14.9%",
input: "0 0% 14.9%",
ring: "0 0% 83.1%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -292,6 +342,11 @@ export const themes = [
input: "0 0% 89.8%",
ring: "0 72.2% 50.6%",
radius: "0.4rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "0 0% 3.9%",
@@ -313,6 +368,11 @@ export const themes = [
border: "0 0% 14.9%",
input: "0 0% 14.9%",
ring: "0 72.2% 50.6%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -345,6 +405,11 @@ export const themes = [
input: "240 5.9% 90%",
ring: "346.8 77.2% 49.8%",
radius: "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "20 14.3% 4.1%",
@@ -366,6 +431,11 @@ export const themes = [
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "346.8 77.2% 49.8%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -398,6 +468,11 @@ export const themes = [
input: "20 5.9% 90%",
ring: "24.6 95% 53.1%",
radius: "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "20 14.3% 4.1%",
@@ -419,6 +494,11 @@ export const themes = [
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "20.5 90.2% 48.2%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -450,6 +530,11 @@ export const themes = [
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "142.1 76.2% 36.3%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "20 14.3% 4.1%",
@@ -471,6 +556,11 @@ export const themes = [
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "142.4 71.8% 29.2%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -502,6 +592,11 @@ export const themes = [
border: "214.3 31.8% 91.4%",
input: "214.3 31.8% 91.4%",
ring: "221.2 83.2% 53.3%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "222.2 84% 4.9%",
@@ -523,6 +618,11 @@ export const themes = [
border: "217.2 32.6% 17.5%",
input: "217.2 32.6% 17.5%",
ring: "224.3 76.3% 48%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -555,6 +655,11 @@ export const themes = [
input: "20 5.9% 90%",
ring: "20 14.3% 4.1%",
radius: "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "20 14.3% 4.1%",
@@ -576,6 +681,11 @@ export const themes = [
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "35.5 91.7% 32.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},
@@ -607,6 +717,11 @@ export const themes = [
border: "220 13% 91%",
input: "220 13% 91%",
ring: "262.1 83.3% 57.8%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
dark: {
background: "224 71.4% 4.1%",
@@ -628,6 +743,11 @@ export const themes = [
border: "215 27.9% 16.9%",
input: "215 27.9% 16.9%",
ring: "263.4 70% 50.4%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
},
},
},