opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

prettier config

This commit is contained in:
Pouya Saadeghi 2023-04-21 07:48:32 +03:00
parent d4d790923c
commit cf82440abf
37 changed files with 621 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -53,7 +53,10 @@ module.exports = {
Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.
```html
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.51.5/dist/full.css" rel="stylesheet" type="text/css" />
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.51.5/dist/full.css"
rel="stylesheet"
type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
```

2
package.json
View File

@ -109,4 +109,4 @@
"peerDependencies": {
"postcss": "^8"
}
}
}

7
src/.prettierignore
View File

@ -1,5 +1,6 @@
**/docs/.svelte-kit
**/docs/build
**/docs/node_modules
**/CHANGELOG.md
**/dist
**/node_modules
CHANGELOG.md
**/dist
**/experiments/compare/**/*.css

34
src/components/styled/checkbox.css
View File

@ -11,12 +11,30 @@
&[aria-checked="true"] {
@apply bg-base-content bg-no-repeat;
animation: checkmark var(--animation-input, 0.2s) ease-in-out;
background-image: linear-gradient(-45deg, transparent 65%, lch(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, lch(var(--chkbg)) 75.99%), linear-gradient(-45deg, lch(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, lch(var(--chkbg)) 30%, lch(var(--chkfg)) 30.99%, lch(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, lch(var(--chkfg)) 50%, lch(var(--chkbg)) 50.99%);
background-image: linear-gradient(-45deg, transparent 65%, lch(var(--chkbg)) 65.99%),
linear-gradient(45deg, transparent 75%, lch(var(--chkbg)) 75.99%),
linear-gradient(-45deg, lch(var(--chkbg)) 40%, transparent 40.99%),
linear-gradient(
45deg,
lch(var(--chkbg)) 30%,
lch(var(--chkfg)) 30.99%,
lch(var(--chkfg)) 40%,
transparent 40.99%
),
linear-gradient(-45deg, lch(var(--chkfg)) 50%, lch(var(--chkbg)) 50.99%);
}
&:indeterminate {
@apply bg-base-content bg-no-repeat;
animation: checkmark var(--animation-input, 0.2s) ease-in-out;
background-image: linear-gradient(90deg, transparent 80%, lch(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, lch(var(--chkbg)) 80%), linear-gradient(0deg, lch(var(--chkbg)) 43%, lch(var(--chkfg)) 43%, lch(var(--chkfg)) 57%, lch(var(--chkbg)) 57%);
background-image: linear-gradient(90deg, transparent 80%, lch(var(--chkbg)) 80%),
linear-gradient(-90deg, transparent 80%, lch(var(--chkbg)) 80%),
linear-gradient(
0deg,
lch(var(--chkbg)) 43%,
lch(var(--chkfg)) 43%,
lch(var(--chkfg)) 57%,
lch(var(--chkbg)) 57%
);
}
&-primary {
--chkbg: var(--p);
@ -136,7 +154,17 @@
&:checked,
&[checked="true"],
&[aria-checked="true"] {
background-image: linear-gradient(45deg, transparent 65%, lch(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, lch(var(--chkbg)) 75.99%), linear-gradient(45deg, lch(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, lch(var(--chkbg)) 30%, lch(var(--chkfg)) 30.99%, lch(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, lch(var(--chkfg)) 50%, lch(var(--chkbg)) 50.99%);
background-image: linear-gradient(45deg, transparent 65%, lch(var(--chkbg)) 65.99%),
linear-gradient(-45deg, transparent 75%, lch(var(--chkbg)) 75.99%),
linear-gradient(45deg, lch(var(--chkbg)) 40%, transparent 40.99%),
linear-gradient(
-45deg,
lch(var(--chkbg)) 30%,
lch(var(--chkfg)) 30.99%,
lch(var(--chkfg)) 40%,
transparent 40.99%
),
linear-gradient(45deg, lch(var(--chkfg)) 50%, lch(var(--chkbg)) 50.99%);
}
}
}

5
src/components/styled/collapse.css
View File

@ -86,7 +86,10 @@ details.collapse summary {
[dir="rtl"] .collapse[open].collapse-arrow .collapse-title:after,
[dir="rtl"] .collapse-open.collapse-arrow .collapse-title:after,
[dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
[dir="rtl"] .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
[dir="rtl"]
.collapse-arrow:not(.collapse-close)
input[type="checkbox"]:checked
~ .collapse-title:after {
--tw-rotate: 135deg;
}
.collapse[open].collapse-plus .collapse-title:after,

6
src/components/styled/range.css
View File

@ -27,7 +27,8 @@
transform: translateY(-50%);
--filler-size: 100rem;
--filler-offset: 0.6rem;
box-shadow: 0 0 0 3px lch(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
box-shadow: 0 0 0 3px lch(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
&::-moz-range-thumb {
background-color: lch(var(--b1));
@ -36,7 +37,8 @@
color: lch(var(--range-shdw));
--filler-size: 100rem;
--filler-offset: 0.5rem;
box-shadow: 0 0 0 3px lch(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
box-shadow: 0 0 0 3px lch(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
&-primary {
--range-shdw: var(--p);

3
src/components/styled/select.css
View File

@ -3,7 +3,8 @@
&-bordered {
@apply border-opacity-20;
}
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;

11
src/components/styled/tab.css
View File

@ -62,7 +62,13 @@
height: var(--tab-radius, 0.5rem);
bottom: 0;
--tab-grad: calc(68% - var(--tab-border, 1px));
--tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.3px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px));
--tab-corner-bg: radial-gradient(
circle at var(--circle-pos),
transparent var(--tab-grad),
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
);
}
&:before {
left: calc(var(--tab-radius, 0.5rem) * -1);
@ -92,7 +98,8 @@
}
}
}
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]) + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
&:before {
background: none;
}

12
src/components/styled/toggle.css
View File

@ -5,7 +5,8 @@
--togglehandleborder: 0 0;
@apply h-6 w-12 cursor-pointer appearance-none border border-base-content border-opacity-20 bg-base-content bg-opacity-50 duration-300 ease-in-out rounded-badge;
transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder);
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset,
var(--togglehandleborder);
[dir="rtl"] & {
--handleoffsetcalculator: calc(var(--handleoffset) * 1);
}
@ -24,9 +25,11 @@
}
&:indeterminate {
@apply border-opacity-100 bg-opacity-100;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
[dir="rtl"] & {
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
}
}
&-primary {
@ -108,7 +111,8 @@
}
&:disabled {
@apply cursor-not-allowed bg-transparent border-base-content opacity-30;
--togglehandleborder: 0 0 0 3px lch(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px lch(var(--bc)) inset;
--togglehandleborder: 0 0 0 3px lch(var(--bc)) inset,
var(--handleoffsetcalculator) 0 0 3px lch(var(--bc)) inset;
}
}

16
src/components/unstyled/radial-progress.css
View File

@ -19,9 +19,19 @@
}
.radial-progress:before {
@apply inset-0;
background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness)
var(--thickness) no-repeat,
conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
-webkit-mask: radial-gradient(
farthest-side,
#0000 calc(99% - var(--thickness)),
#000 calc(100% - var(--thickness))
);
mask: radial-gradient(
farthest-side,
#0000 calc(99% - var(--thickness)),
#000 calc(100% - var(--thickness))
);
}
.radial-progress:after {
inset: calc(50% - var(--thickness) / 2);

7
src/docs/postcss.config.cjs
View File

@ -1,3 +1,8 @@
module.exports = {
plugins: [process.env.NODE_ENV === "production" ? null : require("postcss-import"), require("tailwindcss/nesting"), require("tailwindcss"), require("autoprefixer")],
plugins: [
process.env.NODE_ENV === "production" ? null : require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
],
}

4
src/docs/src/lib/i18n.js
View File

@ -28,7 +28,9 @@ function translate(currentLang, key, vars, returnFallback) {
} else if (returnFallback === false) {
return key
} else {
console.warn(`"${currentLang}.${key}" translation not found. Showing "${defaultLang}.${key}" instead.`)
console.warn(
`"${currentLang}.${key}" translation not found. Showing "${defaultLang}.${key}" instead.`
)
return translations[`${path}/${defaultLang}.json`].default[key]
}
}

11
src/docs/src/routes/docs/layout-and-typography/+page.svelte.md
View File

@ -71,8 +71,15 @@ It adds a new `prose` class that you can slap on any block of vanilla HTML conte
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.</p>
<p>But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country.</p>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
<!-- ... -->
</article>
```

50
src/docs/src/routes/docs/themes/+page.svelte.md vendored
View File

@ -30,7 +30,37 @@ published: true
module.exports = {
//...
daisyui: {
themes: ["light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
],
},
}
```
@ -120,10 +150,10 @@ module.exports = {
themes: [
{
mytheme: {
primary: "#a991f7",
secondary: "#f6d860",
accent: "#37cdbe",
neutral: "#3d4451",
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
},
},
@ -145,10 +175,10 @@ module.exports = {
themes: [
{
mytheme: {
primary: "#a991f7",
secondary: "#f6d860",
accent: "#37cdbe",
neutral: "#3d4451",
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
"--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
@ -192,7 +222,7 @@ module.exports = {
{
light: {
...require("daisyui/src/themeing/themes")["[data-theme=light]"],
primary: "blue",
"primary": "blue",
"primary-focus": "mediumblue",
},
},

5
src/docs/src/routes/docs/use/+page.svelte.md
View File

@ -12,7 +12,10 @@ published: true
1. <Translate text="So instead of making a button using only utility classes" />:
```html
<button class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">Button</button>
<button
class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">
Button
</button>
```
<button class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-gray-800 rounded-md cursor-pointer hover:bg-gray-900">Button</button>

4
src/docs/svelte.config.js
View File

@ -14,7 +14,9 @@ const rehypePlugins = [
type: "element",
tagName: "span",
properties: {
className: ["mr-1 opacity-20 hover:opacity-60 text-base font-bold inline-block align-middle relative -mt-1"],
className: [
"mr-1 opacity-20 hover:opacity-60 text-base font-bold inline-block align-middle relative -mt-1",
],
},
children: [
{

23
src/docs/tailwind.config.cjs
View File

@ -1,6 +1,17 @@
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts,svx,md,json}"],
safelist: ["mr-1", "opacity-20", "hover:opacity-60", "text-base", "font-bold", "inline-block", "align-middle", "relative", "-mt-1", "[&_svg]:visible"],
safelist: [
"mr-1",
"opacity-20",
"hover:opacity-60",
"text-base",
"font-bold",
"inline-block",
"align-middle",
"relative",
"-mt-1",
"[&_svg]:visible",
],
theme: {
extend: {
colors: require("../theming"),
@ -12,6 +23,12 @@ module.exports = {
daisyui: {
logs: false,
},
plugins: [require("@tailwindcss/typography"), process.env.NODE_ENV === "production" ? require("daisyui") : []],
presets: [process.env.NODE_ENV === "production" ? [] : require("../components/tailwind.config.js"), "node_modules/tailwindcss/stubs/defaultConfig.stub.js"],
plugins: [
require("@tailwindcss/typography"),
process.env.NODE_ENV === "production" ? require("daisyui") : [],
],
presets: [
process.env.NODE_ENV === "production" ? [] : require("../components/tailwind.config.js"),
"node_modules/tailwindcss/stubs/defaultConfig.stub.js",
],
}

24
src/experiments/compare/login-form/bootstrap/index.html
View File

@ -12,19 +12,35 @@
<body>
<main>
<button class="btn theme-switch" data-toggle-theme="dark" data-act-class="ACTIVECLASS">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path
d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" />
</svg>
</button>
<form class="form-signin">
<img class="mb-4 logo" src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57" />
<img
class="mb-4 logo"
src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg"
alt=""
width="72"
height="57" />
<h1 class="h3 mb-3 text-center">Please sign in</h1>
<div class="form-group mb-3">
<label class="mb-1" for="email-input">Email</label>
<input type="email-input" class="form-control form-control-lg fs-6" id="email" placeholder="email" />
<input
type="email-input"
class="form-control form-control-lg fs-6"
id="email"
placeholder="email" />
</div>
<div class="form-group mb-3">
<label class="mb-1" for="password-input">Password</label>
<input type="password-input" class="form-control form-control-lg fs-6" id="password" placeholder="password" />
<input
type="password-input"
class="form-control form-control-lg fs-6"
id="password"
placeholder="password" />
</div>
<div class="checkbox mt-4 mb-3">
<div class="form-check form-switch">

28
src/experiments/compare/login-form/daisyui/index.html
View File

@ -9,12 +9,28 @@
</head>
<body class="grid place-content-center min-h-screen">
<button class="d-btn d-btn-square d-btn-ghost top-2 right-2 absolute" data-toggle-theme="dark" data-act-class="ACTIVECLASS">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
<button
class="d-btn d-btn-square d-btn-ghost top-2 right-2 absolute"
data-toggle-theme="dark"
data-act-class="ACTIVECLASS">
<svg
class="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24">
<path
d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" />
</svg>
</button>
<main class="w-72 text-center">
<img src="https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg" alt="" width="120" height="57" class="mx-auto mb-4" />
<img
src="https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg"
alt=""
width="120"
height="57"
class="mx-auto mb-4" />
<div class="mb-3 text-2xl font-semibold">Please sign in</div>
<div class="d-form-control mb-2">
<label class="d-label" for="email-input">
@ -26,7 +42,11 @@
<label class="d-label" for="password-input">
<span class="d-label-text">Password</span>
</label>
<input id="password-input" type="text" placeholder="password" class="d-input d-input-bordered" />
<input
id="password-input"
type="text"
placeholder="password"
class="d-input d-input-bordered" />
</div>
<div class="d-form-control mb-2">
<div class="d-label justify-start gap-3">

45
src/experiments/compare/login-form/tailwind/index.html
View File

@ -9,36 +9,65 @@
</head>
<body class="dark:bg-gray-800 dark:text-gray-300 grid place-content-center min-h-screen">
<button class="w-12 h-12 px-4 py-3 uppercase transition duration-200 ease-in-out rounded-md cursor-pointer hover:bg-black/5 top-2 right-2 absolute" onclick="toggleDarkmode()">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
<button
class="w-12 h-12 px-4 py-3 uppercase transition duration-200 ease-in-out rounded-md cursor-pointer hover:bg-black/5 top-2 right-2 absolute"
onclick="toggleDarkmode()">
<svg
class="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24">
<path
d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" />
</svg>
</button>
<main class="w-72 text-center">
<img src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/.github/logo-light.svg" alt="" width="260" class="mx-auto mb-4" />
<img
src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/.github/logo-light.svg"
alt=""
width="260"
class="mx-auto mb-4" />
<div class="mb-4 text-2xl font-semibold">Please sign in</div>
<div class="mb-4">
<label class="label" for="email-input">
<span class="text-sm block text-left mb-2 px-1">Email</span>
</label>
<input id="email-input" type="text" placeholder="email" class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
<input
id="email-input"
type="text"
placeholder="email"
class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
</div>
<div class="mb-4">
<label class="label" for="password-input">
<span class="text-sm block text-left mb-2 px-1">Password</span>
</label>
<input id="password-input" type="text" placeholder="password" class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
<input
id="password-input"
type="text"
placeholder="password"
class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
</div>
<div class="flex gap-3 mb-3">
<div class="relative">
<input id="rememberme" type="checkbox" class="peer appearance-none cursor-pointer border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-full checked:border-gray-900 dark:checked:border-gray-400 w-8 h-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-900 dark:focus-visible:outline-gray-400 focus-visible:outline-offset-2" />
<span class="peer-checked:left-4 peer-checked:bg-gray-900 dark:peer-checked:bg-gray-400 transition-all duration-200 pointer-events-none w-3 h-3 block absolute top-1 left-1 rounded-full bg-gray-300 dark:bg-gray-700"></span>
<input
id="rememberme"
type="checkbox"
class="peer appearance-none cursor-pointer border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-full checked:border-gray-900 dark:checked:border-gray-400 w-8 h-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-900 dark:focus-visible:outline-gray-400 focus-visible:outline-offset-2" />
<span
class="peer-checked:left-4 peer-checked:bg-gray-900 dark:peer-checked:bg-gray-400 transition-all duration-200 pointer-events-none w-3 h-3 block absolute top-1 left-1 rounded-full bg-gray-300 dark:bg-gray-700"></span>
</div>
<label for="rememberme" class="text-sm">Remember me</label>
</div>
<div class="mb-2">
<input type="button" value="Sign in" class="w-full h-12 px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-600 rounded-md cursor-pointer hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2" />
<input
type="button"
value="Sign in"
class="w-full h-12 px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-600 rounded-md cursor-pointer hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2" />
</div>
<p class="mt-5 text-gray-400">&copy; 2017–2021</p>
</main>

5
src/experiments/compare/login-form/tailwind/theme-change.js
View File

@ -1,4 +1,7 @@
if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark")
localStorage.setItem("theme", "dark")
} else {

17
src/full/tailwind.config.js
View File

@ -6,7 +6,22 @@ module.exports = {
theme: {
colors: require("../theming"),
},
corePlugins: ["animation", "backgroundColor", "backgroundImage", "borderColor", "divideColor", "gradientColorStops", "placeholderColor", "preflight", "ringColor", "ringOffsetColor", "ringOffsetWidth", "ringWidth", "textColor", "transitionProperty"],
corePlugins: [
"animation",
"backgroundColor",
"backgroundImage",
"borderColor",
"divideColor",
"gradientColorStops",
"placeholderColor",
"preflight",
"ringColor",
"ringOffsetColor",
"ringOffsetWidth",
"ringWidth",
"textColor",
"transitionProperty",
],
plugins: [
plugin(function ({ addBase, addUtilities, addComponents }) {
addBase(require("../../dist/base"))

14
src/index.js
View File

@ -24,7 +24,12 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config, postcss })
}
if (logs) {
console.log()
console.log("\x1b[35m%s\x1b[0m", "🌼 daisyUI components " + daisyuiInfo.version, "\x1b[0m", daisyuiInfo.homepage)
console.log(
"\x1b[35m%s\x1b[0m",
"🌼 daisyUI components " + daisyuiInfo.version,
"\x1b[0m",
daisyuiInfo.homepage
)
console.group()
}
@ -93,7 +98,12 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config, postcss })
daisyuiIncludedItems.push("utilities")
}
if (logs) {
console.log("\x1b[32m%s\x1b[0m", "✔︎ Including:", "\x1b[0m", "" + daisyuiIncludedItems.join(", "))
console.log(
"\x1b[32m%s\x1b[0m",
"✔︎ Including:",
"\x1b[0m",
"" + daisyuiIncludedItems.join(", ")
)
console.log("\x1b[32m%s\x1b[0m", "❤︎ Support daisyUI: ", daisyuiInfo.funding.url, "\x1b[0m")
console.log()
console.groupEnd()

3
src/lib/addPrefix.js
View File

@ -6,7 +6,8 @@ function itMatchesOne(arr, term) {
function parseAttrSelector(node) {
const { content } = node
const regex = /(^class|^id)([*^?~|$=]*)+(?:("\s*)([^"\\]*?(?:\\.[^"\\]*)*?)(\s*")|('\s*)([^'\\]*?(?:\\.[^'\\]*)*?)(\s*'))/i
const regex =
/(^class|^id)([*^?~|$=]*)+(?:("\s*)([^"\\]*?(?:\\.[^"\\]*)*?)(\s*")|('\s*)([^'\\]*?(?:\\.[^'\\]*)*?)(\s*'))/i
const [type, operator, head, classes, foot] = content.split(regex).filter((part) => part)

3
src/lib/responsiveRegex.js
View File

@ -20,7 +20,8 @@ module.exports = [
},
{
// color utilities for daisyUI colors
pattern: /(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|accent|neutral)(-focus|-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)/,
pattern:
/(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|accent|neutral)(-focus|-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)/,
variants: [
// "first",
// "last",

6
src/prettier.config.js
View File

@ -3,7 +3,11 @@ module.exports = {
useTabs: false,
tabWidth: 2,
singleQuote: false,
printWidth: 99999,
printWidth: 100,
htmlWhitespaceSensitivity: "ignore",
trailingComma: "es5",
bracketSameLine: true,
quoteProps: "consistent",
bracketSpacing: true,
endOfLine: "lf",
}

50
src/tests/a11y.test.js
View File

@ -1,7 +1,14 @@
import { describe, expect, test } from "vitest"
import * as colorFunctions from "../theming/functions"
import * as themes from "../theming/themes"
import { trimThemeName, trimCssVariable, lchValuesToHex, ContrastRatioWarningThreshold, ContrastRatioErrorThreshold, isColorContrastOkay } from "./utils"
import {
trimThemeName,
trimCssVariable,
lchValuesToHex,
ContrastRatioWarningThreshold,
ContrastRatioErrorThreshold,
isColorContrastOkay,
} from "./utils"
describe.each(
// each theme
@ -26,14 +33,45 @@ describe.each(
["--wac", "--wa"],
["--erc", "--er"],
])(`${trimThemeName(themeKey)} color pairs`, (pair1, pair2) => {
if (isColorContrastOkay(lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]), lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]), ContrastRatioWarningThreshold) === false && isColorContrastOkay(lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]), lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]), ContrastRatioErrorThreshold) === true) {
console.log(`🟡 ${trimCssVariable(pair1)} + ${trimCssVariable(pair2)} contrast ratio on ${trimThemeName(themeKey)} theme is less than ${ContrastRatioWarningThreshold}:1`)
if (
isColorContrastOkay(
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]),
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]),
ContrastRatioWarningThreshold
) === false &&
isColorContrastOkay(
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]),
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]),
ContrastRatioErrorThreshold
) === true
) {
console.log(
`🟡 ${trimCssVariable(pair1)} + ${trimCssVariable(pair2)} contrast ratio on ${trimThemeName(
themeKey
)} theme is less than ${ContrastRatioWarningThreshold}:1`
)
}
if (isColorContrastOkay(lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]), lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]), ContrastRatioErrorThreshold) === false) {
console.log(`🔴 ${trimCssVariable(pair1)} + ${trimCssVariable(pair2)} contrast ratio on ${trimThemeName(themeKey)} theme is less than ${ContrastRatioErrorThreshold}:1`)
if (
isColorContrastOkay(
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]),
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]),
ContrastRatioErrorThreshold
) === false
) {
console.log(
`🔴 ${trimCssVariable(pair1)} + ${trimCssVariable(pair2)} contrast ratio on ${trimThemeName(
themeKey
)} theme is less than ${ContrastRatioErrorThreshold}:1`
)
}
expect(isColorContrastOkay(lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]), lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]), ContrastRatioErrorThreshold)).toBe(true)
expect(
isColorContrastOkay(
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair1]),
lchValuesToHex(colorFunctions.convertToLch(themes[themeKey])[pair2]),
ContrastRatioErrorThreshold
)
).toBe(true)
})
})

8
src/tests/colors.test.js
View File

@ -6,6 +6,10 @@ test("Foreground color generator function", () => {
expect(colorFunctions.generateForegroundColorFrom("lch(0% 0 0)")).toBe("80 0 0")
expect(colorFunctions.generateForegroundColorFrom("lch(100% 0 0)", 1)).toBe("0 0 0")
expect(colorFunctions.generateForegroundColorFrom("lch(0% 0 0)", 1)).toBe("100 0 0")
expect(colorFunctions.generateForegroundColorFrom("lch(60.83% 53.53 259.57)")).toBe("92.17 10.71 259.57")
expect(colorFunctions.generateForegroundColorFrom("lch(45.82% 76.92 31.84)")).toBe("89.16 15.38 31.84")
expect(colorFunctions.generateForegroundColorFrom("lch(60.83% 53.53 259.57)")).toBe(
"92.17 10.71 259.57"
)
expect(colorFunctions.generateForegroundColorFrom("lch(45.82% 76.92 31.84)")).toBe(
"89.16 15.38 31.84"
)
})

13
src/tests/themes.test.js
View File

@ -28,7 +28,18 @@ describe.each(
)("All themes have all required CSS variables", (themeKey) => {
test.each(
// each variable
["--rounded-box", "--rounded-btn", "--rounded-badge", "--animation-btn", "--animation-input", "--btn-text-case", "--btn-focus-scale", "--border-btn", "--tab-border", "--tab-radius"]
[
"--rounded-box",
"--rounded-btn",
"--rounded-badge",
"--animation-btn",
"--animation-input",
"--btn-text-case",
"--btn-focus-scale",
"--border-btn",
"--tab-border",
"--tab-radius",
]
)(`${trimThemeName(themeKey)} has CSS variables`, (variableName) => {
expect(colorFunctions.convertToLch(themes[themeKey])).toHaveProperty(variableName)
})

6
src/tests/utils.js
View File

@ -31,7 +31,11 @@ function changeLchValuesToObject(input) {
}
export const lchValuesToHex = (input) => {
return colord(`lch(${changeLchValuesToObject(input).l}% ${changeLchValuesToObject(input).c} ${changeLchValuesToObject(input).h})`).toHex()
return colord(
`lch(${changeLchValuesToObject(input).l}% ${changeLchValuesToObject(input).c} ${
changeLchValuesToObject(input).h
})`
).toHex()
}
export const trimCssVariable = (input) => {

6
src/themes/postcss.config.js
View File

@ -1,3 +1,7 @@
module.exports = {
plugins: [require("postcss-import"), require("tailwindcss/nesting"), require("tailwindcss")("./src/themes/tailwind.config.js")],
plugins: [
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss")("./src/themes/tailwind.config.js"),
],
}

16
src/theming/colorNames.js
View File

@ -1,17 +1,17 @@
module.exports = {
primary: "--p",
"primary": "--p",
"primary-focus": "--pf",
"primary-content": "--pc",
secondary: "--s",
"secondary": "--s",
"secondary-focus": "--sf",
"secondary-content": "--sc",
accent: "--a",
"accent": "--a",
"accent-focus": "--af",
"accent-content": "--ac",
neutral: "--n",
"neutral": "--n",
"neutral-focus": "--nf",
"neutral-content": "--nc",
@ -20,15 +20,15 @@ module.exports = {
"base-300": "--b3",
"base-content": "--bc",
info: "--in",
"info": "--in",
"info-content": "--inc",
success: "--su",
"success": "--su",
"success-content": "--suc",
warning: "--wa",
"warning": "--wa",
"warning-content": "--wac",
error: "--er",
"error": "--er",
"error-content": "--erc",
}

14
src/theming/functions.js
View File

@ -168,7 +168,8 @@ module.exports = {
config("daisyui.themes").forEach((item) => {
if (typeof item === "object" && item !== null) {
Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
includedThemesObj["[data-theme=" + customThemeName + "]"] = this.convertToLch(customThemevalue)
includedThemesObj["[data-theme=" + customThemeName + "]"] =
this.convertToLch(customThemevalue)
})
}
})
@ -201,7 +202,10 @@ module.exports = {
} else if (index === 1) {
// auto dark
if (config("daisyui.darkTheme")) {
if (themeOrder[0] !== config("daisyui.darkTheme") && themeOrder.includes(config("daisyui.darkTheme"))) {
if (
themeOrder[0] !== config("daisyui.darkTheme") &&
themeOrder.includes(config("daisyui.darkTheme"))
) {
addBase({
["@media (prefers-color-scheme: dark)"]: {
[":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
@ -221,11 +225,13 @@ module.exports = {
}
// theme 0 with name
addBase({
["[data-theme=" + themeOrder[0] + "]"]: includedThemesObj["[data-theme=" + themeOrder[0] + "]"],
["[data-theme=" + themeOrder[0] + "]"]:
includedThemesObj["[data-theme=" + themeOrder[0] + "]"],
})
// theme 1 with name
addBase({
["[data-theme=" + themeOrder[1] + "]"]: includedThemesObj["[data-theme=" + themeOrder[1] + "]"],
["[data-theme=" + themeOrder[1] + "]"]:
includedThemesObj["[data-theme=" + themeOrder[1] + "]"],
})
} else {
addBase({

20
src/theming/index.js
View File

@ -12,22 +12,22 @@ function withOpacityValue(variable, fallbackColor) {
}
let colorObject = {
transparent: "transparent",
current: "currentColor",
"transparent": "transparent",
"current": "currentColor",
primary: withOpacityValue("--p"),
"primary": withOpacityValue("--p"),
"primary-focus": withOpacityValue("--pf", "--p"),
"primary-content": withOpacityValue("--pc"),
secondary: withOpacityValue("--s"),
"secondary": withOpacityValue("--s"),
"secondary-focus": withOpacityValue("--sf", "--s"),
"secondary-content": withOpacityValue("--sc"),
accent: withOpacityValue("--a"),
"accent": withOpacityValue("--a"),
"accent-focus": withOpacityValue("--af", "--a"),
"accent-content": withOpacityValue("--ac"),
neutral: withOpacityValue("--n"),
"neutral": withOpacityValue("--n"),
"neutral-focus": withOpacityValue("--nf", "--n"),
"neutral-content": withOpacityValue("--nc"),
@ -36,16 +36,16 @@ let colorObject = {
"base-300": withOpacityValue("--b3", "--b2"),
"base-content": withOpacityValue("--bc"),
info: withOpacityValue("--in"),
"info": withOpacityValue("--in"),
"info-content": withOpacityValue("--inc", "--nc"),
success: withOpacityValue("--su"),
"success": withOpacityValue("--su"),
"success-content": withOpacityValue("--suc", "--nc"),
warning: withOpacityValue("--wa"),
"warning": withOpacityValue("--wa"),
"warning-content": withOpacityValue("--wac", "--nc"),
error: withOpacityValue("--er"),
"error": withOpacityValue("--er"),
"error-content": withOpacityValue("--erc", "--nc"),
}

32
src/theming/themeDefaults.js
View File

@ -1,5 +1,35 @@
module.exports = {
themeOrder: ["light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
themeOrder: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
],
variables: {
"--rounded-box": "1rem",
"--rounded-btn": "0.5rem",

381
src/theming/themes.js
View File

@ -1,31 +1,31 @@
module.exports = {
"[data-theme=aqua]": {
"color-scheme": "dark",
primary: "#09ecf3",
"primary": "#09ecf3",
"primary-content": "#005355",
secondary: "#966fb3",
accent: "#ffe999",
neutral: "#3b8ac4",
"secondary": "#966fb3",
"accent": "#ffe999",
"neutral": "#3b8ac4",
"base-100": "#345da7",
info: "#2563eb",
success: "#16a34a",
warning: "#d97706",
error: "#dc2626",
"info": "#2563eb",
"success": "#16a34a",
"warning": "#d97706",
"error": "#dc2626",
},
"[data-theme=black]": {
"color-scheme": "dark",
primary: "#343232",
secondary: "#343232",
accent: "#343232",
"primary": "#343232",
"secondary": "#343232",
"accent": "#343232",
"base-100": "#000000",
"base-200": "#0D0D0D",
"base-300": "#1A1919",
neutral: "#272626",
"neutral": "#272626",
"neutral-focus": "#343232",
info: "#0000ff",
success: "#008000",
warning: "#ffff00",
error: "#ff0000",
"info": "#0000ff",
"success": "#008000",
"warning": "#ffff00",
"error": "#ff0000",
"--rounded-box": "0",
"--rounded-btn": "0",
"--rounded-badge": "0",
@ -37,32 +37,32 @@ module.exports = {
},
"[data-theme=bumblebee]": {
"color-scheme": "light",
primary: "#e0a82e",
"primary": "#e0a82e",
"primary-content": "#181830",
secondary: "#f9d72f",
"secondary": "#f9d72f",
"secondary-content": "#181830",
accent: "#181830",
neutral: "#181830",
"accent": "#181830",
"neutral": "#181830",
"base-100": "#ffffff",
},
"[data-theme=cmyk]": {
"color-scheme": "light",
primary: "#45AEEE",
secondary: "#E8488A",
accent: "#FFF232",
neutral: "#1a1a1a",
"primary": "#45AEEE",
"secondary": "#E8488A",
"accent": "#FFF232",
"neutral": "#1a1a1a",
"base-100": "#ffffff",
info: "#4AA8C0",
success: "#823290",
warning: "#EE8133",
error: "#E93F33",
"info": "#4AA8C0",
"success": "#823290",
"warning": "#EE8133",
"error": "#E93F33",
},
"[data-theme=corporate]": {
"color-scheme": "light",
primary: "#4b6bfb",
secondary: "#7b92b2",
accent: "#67cba0",
neutral: "#181a2a",
"primary": "#4b6bfb",
"secondary": "#7b92b2",
"accent": "#67cba0",
"neutral": "#181a2a",
"neutral-content": "#edf2f7",
"base-100": "#ffffff",
"base-content": "#181a2a",
@ -75,10 +75,10 @@ module.exports = {
},
"[data-theme=cupcake]": {
"color-scheme": "light",
primary: "#65c3c8",
secondary: "#ef9fbc",
accent: "#eeaf3a",
neutral: "#291334",
"primary": "#65c3c8",
"secondary": "#ef9fbc",
"accent": "#eeaf3a",
"neutral": "#291334",
"base-100": "#faf7f5",
"base-200": "#efeae6",
"base-300": "#e7e2df",
@ -89,11 +89,12 @@ module.exports = {
},
"[data-theme=cyberpunk]": {
"color-scheme": "light",
fontFamily: "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
primary: "#ff7598",
secondary: "#75d1f0",
accent: "#c07eec",
neutral: "#423f00",
"fontFamily":
"ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
"primary": "#ff7598",
"secondary": "#75d1f0",
"accent": "#c07eec",
"neutral": "#423f00",
"neutral-content": "#ffee00",
"base-100": "#ffee00",
"--rounded-box": "0",
@ -103,13 +104,13 @@ module.exports = {
},
"[data-theme=dark]": {
"color-scheme": "dark",
primary: "#661AE6",
"primary": "#661AE6",
"primary-content": "#ffffff",
secondary: "#D926AA",
"secondary": "#D926AA",
"secondary-content": "#ffffff",
accent: "#1FB2A5",
"accent": "#1FB2A5",
"accent-content": "#ffffff",
neutral: "#191D24",
"neutral": "#191D24",
"neutral-focus": "#111318",
"neutral-content": "#A6ADBB",
"base-100": "#2A303C",
@ -119,26 +120,26 @@ module.exports = {
},
"[data-theme=dracula]": {
"color-scheme": "dark",
primary: "#ff79c6",
secondary: "#bd93f9",
accent: "#ffb86c",
neutral: "#414558",
"primary": "#ff79c6",
"secondary": "#bd93f9",
"accent": "#ffb86c",
"neutral": "#414558",
"base-100": "#282a36",
"base-content": "#f8f8f2",
info: "#8be9fd",
success: "#50fa7b",
warning: "#f1fa8c",
error: "#ff5555",
"info": "#8be9fd",
"success": "#50fa7b",
"warning": "#f1fa8c",
"error": "#ff5555",
},
"[data-theme=emerald]": {
"color-scheme": "light",
primary: "#66cc8a",
"primary": "#66cc8a",
"primary-content": "#223D30",
secondary: "#377cfb",
"secondary": "#377cfb",
"secondary-content": "#f9fafb",
accent: "#ea5234",
"accent": "#ea5234",
"accent-content": "#f9fafb",
neutral: "#333c4d",
"neutral": "#333c4d",
"neutral-content": "#f9fafb",
"base-100": "#ffffff",
"base-content": "#333c4d",
@ -148,57 +149,57 @@ module.exports = {
},
"[data-theme=fantasy]": {
"color-scheme": "light",
primary: "#6e0b75",
secondary: "#007ebd",
accent: "#f8860d",
neutral: "#1f2937",
"primary": "#6e0b75",
"secondary": "#007ebd",
"accent": "#f8860d",
"neutral": "#1f2937",
"base-100": "#ffffff",
"base-content": "#1f2937",
},
"[data-theme=forest]": {
"color-scheme": "dark",
primary: "#1eb854",
"primary": "#1eb854",
"primary-content": "#c2ffd7",
secondary: "#1fd65f",
accent: "#d99330",
neutral: "#110e0e",
"secondary": "#1fd65f",
"accent": "#d99330",
"neutral": "#110e0e",
"base-100": "#171212",
"--rounded-btn": "1.9rem",
},
"[data-theme=garden]": {
"color-scheme": "light",
primary: "#5c7f67",
secondary: "#ecf4e7",
"primary": "#5c7f67",
"secondary": "#ecf4e7",
"secondary-content": "#24331a",
accent: "#fae5e5",
"accent": "#fae5e5",
"accent-content": "#322020",
neutral: "#5d5656",
"neutral": "#5d5656",
"neutral-content": "#e9e7e7",
"base-100": "#e9e7e7",
"base-content": "#100f0f",
},
"[data-theme=halloween]": {
"color-scheme": "dark",
primary: "#f28c18",
"primary": "#f28c18",
"primary-content": "#131616",
secondary: "#6d3a9c",
accent: "#51a800",
neutral: "#1b1d1d",
"secondary": "#6d3a9c",
"accent": "#51a800",
"neutral": "#1b1d1d",
"base-100": "#212121",
info: "#2563eb",
success: "#16a34a",
warning: "#d97706",
error: "#dc2626",
"info": "#2563eb",
"success": "#16a34a",
"warning": "#d97706",
"error": "#dc2626",
},
"[data-theme=light]": {
"color-scheme": "light",
primary: "lch(34.71% 131.47 304.17)",
"primary": "lch(34.71% 131.47 304.17)",
"primary-content": "#ffffff",
secondary: "lch(60% 106.33 340.62)",
"secondary": "lch(60% 106.33 340.62)",
"secondary-content": "#ffffff",
accent: "lch(84.71% 69.6 185.79)",
"accent": "lch(84.71% 69.6 185.79)",
"accent-content": "#163835",
neutral: "#3d4451",
"neutral": "#3d4451",
"neutral-content": "#ffffff",
"base-100": "#ffffff",
"base-200": "#F2F2F2",
@ -207,25 +208,25 @@ module.exports = {
},
"[data-theme=lofi]": {
"color-scheme": "light",
primary: "#0D0D0D",
"primary": "#0D0D0D",
"primary-content": "#ffffff",
secondary: "#1A1919",
"secondary": "#1A1919",
"secondary-content": "#ffffff",
accent: "#262626",
"accent": "#262626",
"accent-content": "#ffffff",
neutral: "#000000",
"neutral": "#000000",
"neutral-content": "#ffffff",
"base-100": "#ffffff",
"base-200": "#F2F2F2",
"base-300": "#E6E5E5",
"base-content": "#000000",
info: "#0070F3",
"info": "#0070F3",
"info-content": "#ffffff",
success: "#21CC51",
"success": "#21CC51",
"success-content": "#ffffff",
warning: "#FF6154",
"warning": "#FF6154",
"warning-content": "#ffffff",
error: "#DE1C8D",
"error": "#DE1C8D",
"error-content": "#ffffff",
"--rounded-box": "0.25rem",
"--rounded-btn": "0.125rem",
@ -237,26 +238,26 @@ module.exports = {
},
"[data-theme=luxury]": {
"color-scheme": "dark",
primary: "#ffffff",
secondary: "#152747",
accent: "#513448",
neutral: "#171618",
"primary": "#ffffff",
"secondary": "#152747",
"accent": "#513448",
"neutral": "#171618",
"neutral-content": "#dca54c",
"base-100": "#09090b",
"base-200": "#171618",
"base-300": "#2e2d2f",
"base-content": "#dca54c",
info: "#66c6ff",
success: "#87d039",
warning: "#e2d562",
error: "#ff6f6f",
"info": "#66c6ff",
"success": "#87d039",
"warning": "#e2d562",
"error": "#ff6f6f",
},
"[data-theme=pastel]": {
"color-scheme": "light",
primary: "#d1c1d7",
secondary: "#f6cbd1",
accent: "#b4e9d6",
neutral: "#70acc7",
"primary": "#d1c1d7",
"secondary": "#f6cbd1",
"accent": "#b4e9d6",
"neutral": "#70acc7",
"base-100": "#ffffff",
"base-200": "#f9fafb",
"base-300": "#d1d5db",
@ -264,73 +265,73 @@ module.exports = {
},
"[data-theme=retro]": {
"color-scheme": "light",
primary: "#ef9995",
"primary": "#ef9995",
"primary-content": "#282425",
secondary: "#a4cbb4",
"secondary": "#a4cbb4",
"secondary-content": "#282425",
accent: "#ebdc99",
"accent": "#ebdc99",
"accent-content": "#282425",
neutral: "#7d7259",
"neutral": "#7d7259",
"neutral-content": "#e4d8b4",
"base-100": "#e4d8b4",
"base-200": "#d2c59d",
"base-300": "#c6b386",
"base-content": "#282425",
info: "#2563eb",
success: "#16a34a",
warning: "#d97706",
error: "#dc2626",
"info": "#2563eb",
"success": "#16a34a",
"warning": "#d97706",
"error": "#dc2626",
"--rounded-box": "0.4rem",
"--rounded-btn": "0.4rem",
"--rounded-badge": "0.4rem",
},
"[data-theme=synthwave]": {
"color-scheme": "dark",
primary: "#e779c1",
secondary: "#58c7f3",
accent: "#f3cc30",
neutral: "#20134e",
"primary": "#e779c1",
"secondary": "#58c7f3",
"accent": "#f3cc30",
"neutral": "#20134e",
"neutral-content": "#f9f7fd",
"base-100": "#2d1b69",
"base-content": "#f9f7fd",
info: "#53c0f3",
"info": "#53c0f3",
"info-content": "#201047",
success: "#71ead2",
"success": "#71ead2",
"success-content": "#201047",
warning: "#f3cc30",
"warning": "#f3cc30",
"warning-content": "#201047",
error: "#e24056",
"error": "#e24056",
"error-content": "#f9f7fd",
},
"[data-theme=valentine]": {
"color-scheme": "light",
primary: "#e96d7b",
secondary: "#a991f7",
accent: "#88dbdd",
neutral: "#af4670",
"primary": "#e96d7b",
"secondary": "#a991f7",
"accent": "#88dbdd",
"neutral": "#af4670",
"neutral-content": "#f0d6e8",
"base-100": "#f0d6e8",
"base-content": "#632c3b",
info: "#2563eb",
success: "#16a34a",
warning: "#d97706",
error: "#dc2626",
"info": "#2563eb",
"success": "#16a34a",
"warning": "#d97706",
"error": "#dc2626",
"--rounded-btn": "1.9rem",
},
"[data-theme=wireframe]": {
"color-scheme": "light",
fontFamily: 'Chalkboard,comic sans ms,"sanssecondaryerif"',
primary: "#b8b8b8",
secondary: "#b8b8b8",
accent: "#b8b8b8",
neutral: "#ebebeb",
"fontFamily": 'Chalkboard,comic sans ms,"sanssecondaryerif"',
"primary": "#b8b8b8",
"secondary": "#b8b8b8",
"accent": "#b8b8b8",
"neutral": "#ebebeb",
"base-100": "#ffffff",
"base-200": "#eeeeee",
"base-300": "#dddddd",
info: "#0000ff",
success: "#008000",
warning: "#a6a659",
error: "#ff0000",
"info": "#0000ff",
"success": "#008000",
"warning": "#a6a659",
"error": "#ff0000",
"--rounded-box": "0.2rem",
"--rounded-btn": "0.2rem",
"--rounded-badge": "0.2rem",
@ -338,97 +339,97 @@ module.exports = {
},
"[data-theme=autumn]": {
"color-scheme": "light",
primary: "#8C0327",
secondary: "#D85251",
accent: "#D59B6A",
neutral: "#826A5C",
"primary": "#8C0327",
"secondary": "#D85251",
"accent": "#D59B6A",
"neutral": "#826A5C",
"base-100": "#f1f1f1",
info: "#42ADBB",
success: "#499380",
warning: "#E97F14",
error: "#DF1A2F",
"info": "#42ADBB",
"success": "#499380",
"warning": "#E97F14",
"error": "#DF1A2F",
},
"[data-theme=business]": {
"color-scheme": "dark",
primary: "#1C4E80",
secondary: "#7C909A",
accent: "#EA6947",
neutral: "#23282E",
"primary": "#1C4E80",
"secondary": "#7C909A",
"accent": "#EA6947",
"neutral": "#23282E",
"base-100": "#202020",
info: "#0091D5",
success: "#6BB187",
warning: "#DBAE59",
error: "#AC3E31",
"info": "#0091D5",
"success": "#6BB187",
"warning": "#DBAE59",
"error": "#AC3E31",
"--rounded-box": "0.25rem",
"--rounded-btn": ".125rem",
"--rounded-badge": ".125rem",
},
"[data-theme=acid]": {
"color-scheme": "light",
primary: "#FF00F4",
secondary: "#FF7400",
accent: "#CBFD03",
neutral: "#191A3F",
"primary": "#FF00F4",
"secondary": "#FF7400",
"accent": "#CBFD03",
"neutral": "#191A3F",
"base-100": "#fafafa",
info: "#3194F6",
success: "#5FC992",
warning: "#F7DE2D",
error: "#E60300",
"info": "#3194F6",
"success": "#5FC992",
"warning": "#F7DE2D",
"error": "#E60300",
"--rounded-box": "1.25rem",
"--rounded-btn": "1rem",
"--rounded-badge": "1rem",
},
"[data-theme=lemonade]": {
"color-scheme": "light",
primary: "#519903",
secondary: "#E9E92E",
accent: "#F7F9CA",
neutral: "#191A3F",
"primary": "#519903",
"secondary": "#E9E92E",
"accent": "#F7F9CA",
"neutral": "#191A3F",
"base-100": "#ffffff",
info: "#C8E1E7",
success: "#DEF29F",
warning: "#F7E589",
error: "#F2B6B5",
"info": "#C8E1E7",
"success": "#DEF29F",
"warning": "#F7E589",
"error": "#F2B6B5",
},
"[data-theme=night]": {
"color-scheme": "dark",
primary: "#38bdf8",
secondary: "#818CF8",
accent: "#F471B5",
neutral: "#1E293B",
"primary": "#38bdf8",
"secondary": "#818CF8",
"accent": "#F471B5",
"neutral": "#1E293B",
"neutral-focus": "#273449",
"base-100": "#0F172A",
info: "#0CA5E9",
success: "#2DD4BF",
warning: "#F4BF50",
error: "#FB7085",
"info": "#0CA5E9",
"success": "#2DD4BF",
"warning": "#F4BF50",
"error": "#FB7085",
},
"[data-theme=coffee]": {
"color-scheme": "dark",
primary: "#DB924B",
secondary: "#263E3F",
accent: "#10576D",
neutral: "#120C12",
"primary": "#DB924B",
"secondary": "#263E3F",
"accent": "#10576D",
"neutral": "#120C12",
"base-100": "#20161F",
"base-content": "#756E63",
info: "#8DCAC1",
success: "#9DB787",
warning: "#FFD25F",
error: "#FC9581",
"info": "#8DCAC1",
"success": "#9DB787",
"warning": "#FFD25F",
"error": "#FC9581",
},
"[data-theme=winter]": {
"color-scheme": "light",
primary: "#047AFF",
secondary: "#463AA2",
accent: "#C148AC",
neutral: "#021431",
"primary": "#047AFF",
"secondary": "#463AA2",
"accent": "#C148AC",
"neutral": "#021431",
"base-100": "#ffffff",
"base-200": "#F2F7FF",
"base-300": "#E3E9F4",
"base-content": "#394E6A",
info: "#93E7FB",
success: "#81CFD1",
warning: "#EFD7BB",
error: "#E58B8B",
"info": "#93E7FB",
"success": "#81CFD1",
"warning": "#EFD7BB",
"error": "#E58B8B",
},
}

14
src/utilities/global/glass.css
View File

@ -5,8 +5,18 @@
border: none;
backdrop-filter: blur(var(--glass-blur, 40px));
background-color: transparent;
background-image: linear-gradient(135deg, rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, rgb(0 0 0 / 0%) 100%), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, rgb(0 0 0 / 0%) 25%);
box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgb(0 0 0 / 5%);
background-image: linear-gradient(
135deg,
rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
rgb(0 0 0 / 0%) 100%
),
linear-gradient(
var(--glass-reflex-degree, 100deg),
rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
rgb(0 0 0 / 0%) 25%
);
box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset,
0 0 0 2px rgb(0 0 0 / 5%);
text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
}
}