baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

format project

Browse source
This commit is contained in:
Benjamin Palko 2026-08-11 16:25:07 -04:00
parent 7651afaa0b
commit a6d4064af8
83 changed files with 942 additions and 536 deletions
Download patch file Download diff file Expand all files Collapse all files

103
.opencode/skills/daisyui/colors/SKILL.md
View file

@ -6,6 +6,7 @@ description: MANDATORY color usage rules for daisyUI 5
## daisyUI 5 colors
### daisyUI color names
- `primary`: Primary brand color, The main color of your brand
- `primary-content`: Foreground content color to use on primary color
- `secondary`: Secondary brand color, The optional, secondary color of your brand
@ -28,6 +29,7 @@ description: MANDATORY color usage rules for daisyUI 5
- `error-content`: Foreground content color to use on error color
### daisyUI color rules
1. daisyUI adds semantic color names to Tailwind CSS colors
2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. For example, `bg-primary` will use the primary color for the background
3. daisyUI color names include variables as value so they can change based on the theme
@ -46,7 +48,10 @@ The default configuration enables `light` and `dark`. Choose specific themes, ev
```css
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
themes:
light --default,
dark --prefersdark,
cupcake;
}
```
@ -56,59 +61,63 @@ The default configuration enables `light` and `dark`. Choose specific themes, ev
```html
<html data-theme="dark">
<section data-theme="light">
<div data-theme="retro">Nested theme</div>
</section>
<section data-theme="light">
<div data-theme="retro">Nested theme</div>
</section>
</html>
```
### daisyUI custom theme with custom colors
A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
```css
@import "tailwindcss";
@import 'tailwindcss';
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
name: 'mytheme';
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
/* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
/* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
--size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
--size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
--border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
--border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
--depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
--noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
--depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
--noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
}
```
#### Rules
- All CSS variables above are required
- Colors can be OKLCH or hex or other formats
- If you're generating a custom theme, do not include the comments from the example above. Just provide the code.
@ -121,21 +130,21 @@ Use the built-in theme's name and override only the values that need to change.
```css
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
name: 'light';
default: true;
--color-primary: blue;
--color-secondary: teal;
}
```
For a custom CDN theme, define the same variables under a selector that matches the chosen `data-theme` and checked theme controller:
```css
:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
color-scheme: light;
--color-primary: oklch(55% 0.3 240);
/* define the remaining custom-theme variables */
:root:has(input.theme-controller[value='mytheme']:checked),
[data-theme='mytheme'] {
color-scheme: light;
--color-primary: oklch(55% 0.3 240);
/* define the remaining custom-theme variables */
}
```