keith/Playwright-A11y-Dashboard
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Add DaisyUI library

Browse Source
This commit is contained in:
Keith Solomon
2025-05-24 16:04:13 -05:00
parent 53c74913be
commit fc6793df06
4 changed files with 279 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
package-lock.json generated
View File

@@ -18,7 +18,8 @@
"devDependencies": { "devDependencies": {
"@tailwindcss/cli": "^4.1.7", "@tailwindcss/cli": "^4.1.7",
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.16",
"concurrently": "^9.1.2", "concurrently": "^8.2.0",
"daisyui": "^5.0.37",
"tailwindcss": "^4.1.7" "tailwindcss": "^4.1.7"
} }
}, },
@@ -36,6 +37,16 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@babel/runtime": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
"integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@isaacs/fs-minipass": { "node_modules/@isaacs/fs-minipass": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -900,16 +911,18 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/concurrently": { "node_modules/concurrently": {
"version": "9.1.2", "version": "8.2.2",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
"integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==", "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"chalk": "^4.1.2", "chalk": "^4.1.2",
"date-fns": "^2.30.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"rxjs": "^7.8.1", "rxjs": "^7.8.1",
"shell-quote": "^1.8.1", "shell-quote": "^1.8.1",
"spawn-command": "0.0.2",
"supports-color": "^8.1.1", "supports-color": "^8.1.1",
"tree-kill": "^1.2.2", "tree-kill": "^1.2.2",
"yargs": "^17.7.2" "yargs": "^17.7.2"
@@ -919,7 +932,7 @@
"concurrently": "dist/bin/concurrently.js" "concurrently": "dist/bin/concurrently.js"
}, },
"engines": { "engines": {
"node": ">=18" "node": "^14.13.0 || >=16.0.0"
}, },
"funding": { "funding": {
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1" "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
@@ -995,6 +1008,33 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/daisyui": {
"version": "5.0.37",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.37.tgz",
"integrity": "sha512-PLc+MhWAqTwolygEGPDi+ac+OsFqIt9nZylTIiyVlEx8loYL7Pt7hNWb8cp5pQQ9dhjYnda1ERiuM6OsJmvPGw==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/saadeghi/daisyui?sponsor=1"
}
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2008,6 +2048,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/spawn-command": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
"integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
"dev": true
},
"node_modules/statuses": { "node_modules/statuses": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",

5
package.json
View File

@@ -19,7 +19,8 @@
"devDependencies": { "devDependencies": {
"@tailwindcss/cli": "^4.1.7", "@tailwindcss/cli": "^4.1.7",
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.16",
"tailwindcss": "^4.1.7", "concurrently": "^8.2.0",
"concurrently": "^8.2.0" "daisyui": "^5.0.37",
"tailwindcss": "^4.1.7"
} }
} }

337
public/stylesheets/style.css
View File

@@ -1,30 +1,21 @@
/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */ /*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities; @layer theme, base, components, utilities;
@layer theme { @layer theme {
:root, :host { :root, :host {
--font-sans: "Raleway", sans-serif; --font-sans: "Raleway", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace; "Courier New", monospace;
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-900: oklch(20.8% 0.042 265.755);
--color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-black: oklch(0% 0 0); --color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0);
--spacing: 0.25rem;
--text-xs: 0.75rem; --text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75); --text-xs--line-height: calc(1 / 0.75);
--text-base: 1rem; --text-base: 1rem;
--text-base--line-height: calc(1.5 / 1); --text-base--line-height: calc(1.5 / 1);
--radius-sm: 0.25rem; --radius-sm: 0.25rem;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans); --default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono); --default-mono-font-family: var(--font-mono);
--color-primary: oklch(0.57 0.203362 257.1706); --color-primary: oklch(0.57 0.203362 257.1706);
--color-secondary: oklch(0.56 0.0176 257.23);
--color-bodylinks: oklch(0.48 0.0789 211.58); --color-bodylinks: oklch(0.48 0.0789 211.58);
--color-warning: oklch(84.42% 0.1722 84.93); --color-warning: oklch(84.42% 0.1722 84.93);
--h1: calc(var(--text-base) * 2.25); --h1: calc(var(--text-base) * 2.25);
@@ -180,106 +171,7 @@
display: none !important; display: none !important;
} }
} }
@layer utilities { @layer utilities;
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.mx-auto {
margin-inline: auto;
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.flex {
display: flex;
}
.table {
display: table;
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.min-h-\[70dvh\] {
min-height: 70dvh;
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.space-x-4 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-800 {
background-color: var(--color-gray-800);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.text-center {
text-align: center;
}
.text-blue-400 {
color: var(--color-blue-400);
}
.text-bodylinks {
color: var(--color-bodylinks);
}
.text-gray-800 {
color: var(--color-gray-800);
}
.text-white {
color: var(--color-white);
}
.hover\:text-gray-400 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-400);
}
}
}
}
body { body {
background-color: var(--color-slate-900); background-color: var(--color-slate-900);
font-family: var(--font-sans); font-family: var(--font-sans);
@@ -388,15 +280,226 @@ hr {
margin: 1rem 0; margin: 1rem 0;
width: 100%; width: 100%;
} }
@property --tw-space-x-reverse { @layer base {
syntax: "*"; :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
inherits: false; color-scheme: light;
initial-value: 0; --color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
} }
@layer properties { @layer base {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { @media (prefers-color-scheme: dark) {
*, ::before, ::after, ::backdrop { :root {
--tw-space-x-reverse: 0; color-scheme: dark;
--color-base-100: oklch(25.33% 0.016 252.42);
--color-base-200: oklch(23.26% 0.014 253.1);
--color-base-300: oklch(21.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
} }
} }
} }
@layer base {
:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
color-scheme: dark;
--color-base-100: oklch(25.33% 0.016 252.42);
--color-base-200: oklch(23.26% 0.014 253.1);
--color-base-300: oklch(21.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
}
@layer base {
@property --radialprogress {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
}
@layer base {
:root {
scrollbar-color: currentColor #0000;
@supports (color: color-mix(in lab, red, red)) {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
}
}
}
@layer base {
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
}
.chat {
--mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
}
}
@layer base {
:root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
overflow: hidden;
}
}
@layer base {
:where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
scrollbar-gutter: stable;
background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
--root-bg: var(--color-base-100);
@supports (color: color-mix(in lab, red, red)) {
--root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
}
}
:where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) {
scrollbar-gutter: stable;
}
}
@layer base {
:root, [data-theme] {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content);
}
}
@keyframes radio {
0% {
padding: 5px;
}
50% {
padding: 3px;
}
}
@keyframes skeleton {
0% {
background-position: 150%;
}
100% {
background-position: -50%;
}
}
@keyframes progress {
50% {
background-position-x: -115%;
}
}
@keyframes toast {
0% {
scale: 0.9;
opacity: 0;
}
100% {
scale: 1;
opacity: 1;
}
}
@keyframes dropdown {
0% {
opacity: 0;
}
}
@keyframes rating {
0%, 40% {
scale: 1.1;
filter: brightness(1.05) contrast(1.05);
}
}

6
styles/base.css
View File

@@ -1,5 +1,9 @@
@import 'tailwindcss'; @import 'tailwindcss' source(none);
@source "./views/*.{html,js,ejs}";
@source "./styles/*.css";
@import './colors.css'; @import './colors.css';
@import './typography.css'; @import './typography.css';
@plugin "daisyui";
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";