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

set up new workflow and migrate to .forgejo dir (#5)
Some checks failed
Deploy / deploy (push) Failing after 39s
Details

Browse source 
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #5
This commit is contained in:
Benjamin Palko 2026-08-11 20:55:29 -04:00
parent c37955c51b
commit f526f5c0aa
99 changed files with 1866 additions and 1470 deletions
Download patch file Download diff file Expand all files Collapse all files

111
.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
@ -45,8 +47,11 @@ description: MANDATORY color usage rules for daisyUI 5
The default configuration enables `light` and `dark`. Choose specific themes, every theme, or no built-in themes in the daisyUI plugin:
```css
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
@plugin 'daisyui' {
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";
@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 */
@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 */
--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.
@ -120,22 +129,22 @@ People can use https://daisyui.com/theme-generator/ visual tool to create their
Use the built-in theme's name and override only the values that need to change. Other values are inherited:
```css
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
@plugin 'daisyui/theme' {
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 */
}
```