VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Prefix daisyui

Browse source
This commit is contained in:
joostdecock 2024-12-07 14:30:33 +01:00
parent 0c438f6d73
commit 03f5eb75f6
2 changed files with 49 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

71
sites/orgdocs/src/pages/typography.js
View file

@ -18,7 +18,7 @@ const TypographyPage = ({ page }) => {
description="FreeSewing is an open source Javascript library for parametric sewing patterns"
>
<div className="tailwind-container">
<div className="text-base-content mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4 mx-auto my-8">
<div className="text-base-content mdx max-w-prose text-base-content max-w-prose text-current xl:pl-4 mx-auto my-8">
<h1>Typography</h1>
<p>
This typography page shows an overview of different elements and how they are styled.
@ -40,40 +40,52 @@ const TypographyPage = ({ page }) => {
</p>
<h3>Main button styles</h3>
<div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-neutral">Neutral button</button>
<button className="btn btn-primary">Primary button</button>
<button className="btn btn-secondary">Secondary button</button>
<button className="btn btn-accent">Accent button</button>
<button className="daisy-btn daisy-btn-neutral">Neutral button</button>
<button className="daisy-btn daisy-btn-primary">Primary button</button>
<button className="daisy-btn daisy-btn-secondary">Secondary button</button>
<button className="daisy-btn daisy-btn-accent">Accent button</button>
</div>
<h3>State button styles</h3>
<div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-info">Info button</button>
<button className="btn btn-success">Success button</button>
<button className="btn btn-warning">Warning button</button>
<button className="btn btn-error">Error button</button>
<button className="daisy-btn daisy-btn-info">Info button</button>
<button className="daisy-btn daisy-btn-success">Success button</button>
<button className="daisy-btn daisy-btn-warning">Warning button</button>
<button className="daisy-btn daisy-btn-error">Error button</button>
</div>
<h3>Other button styles</h3>
<div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-ghost">Ghost button</button>
<button className="btn btn-link">Link button</button>
<button className="daisy-btn daisy-btn-ghost">Ghost button</button>
<button className="daisy-btn daisy-btn-link">Link button</button>
</div>
<h3>Outlined button styles</h3>
<div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-outline btn-neutral">Neutral button</button>
<button className="btn btn-outline btn-primary">Primary button</button>
<button className="btn btn-outline btn-secondary">Secondary button</button>
<button className="btn btn-outline btn-accent">Accent button</button>
<button className="daisy-btn daisy-btn-outline daisy-btn-neutral">
Neutral button
</button>
<button className="daisy-btn daisy-btn-outline daisy-btn-primary">
Primary button
</button>
<button className="daisy-btn daisy-btn-outline daisy-btn-secondary">
Secondary button
</button>
<button className="daisy-btn daisy-btn-outline daisy-btn-accent">Accent button</button>
</div>
<h3>Button sizes</h3>
<div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-primary btn-lg">Large</button>
<button className="btn btn-primary">Normal</button>
<button className="btn btn-primary btn-sm">Small</button>
<button className="btn btn-primary btn-xs">Tiny</button>
<button className="btn btn-primary btn-lg btn-wide">Large wide</button>
<button className="btn btn-primary btn-wide">Normal wide</button>
<button className="btn btn-primary btn-sm btn-wide">Small wide</button>
<button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-lg">Large</button>
<button className="daisy-btn daisy-btn-primary">Normal</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-sm">Small</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-xs">Tiny</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-lg daisy-btn-wide">
Large wide
</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-wide">Normal wide</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-sm daisy-btn-wide">
Small wide
</button>
<button className="daisy-btn daisy-btn-primary daisy-btn-xs daisy-bnt-wide">
Tiny wide
</button>
</div>
<h2>Tabs</h2>
<h2>Docusaurus Tabs</h2>
@ -91,6 +103,19 @@ const TypographyPage = ({ page }) => {
<p>This is 4</p>
</TabItem>
</Tabs>
<h2>DaisyUI Tabs</h2>
<p>Do not use these. The tab elements clash with the docusaurus styles.</p>
<div role="tablist" className="daisy-tabs daisy-tabs-bordered">
<a role="tab" className="daisy-tab">
Tab 1
</a>
<a role="tab" className="daisy-tab daisy-tab-active">
Tab 2
</a>
<a role="tab" className="daisy-tab">
Tab 3
</a>
</div>
</div>
</div>
</Layout>

1
sites/orgdocs/tailwind.config.mjs
View file

@ -16,6 +16,7 @@ export default {
themes: [themes],
logs: true,
themeRoot: '*',
prefix: 'daisy-',
},
theme: {
extend: {