prettier

2023-04-21 06:31:27 +03:00 · 2023-04-21 06:31:27 +03:00 · 57c915fbbc
parent ddf1766c4b
commit 57c915fbbc
57 changed files with 2205 additions and 458 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -44,7 +44,7 @@ daisyUI welcomes contributions from anyone willing to help 🤝
   ```js
   module.exports = {
     plugins: [require("/path/to/dist/directory")],
-   };
+   }
   ```

 ### To run the [documentation site](https://daisyui.com/) on local:
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@ -11,7 +11,7 @@ body:
    attributes:
      label: What version of daisyUI are you using?
      description: You can see the daisyUI version number on your `package.json` file.
-      placeholder: 'example: v2.47.0'
+      placeholder: "example: v2.47.0"
    validations:
      required: false
  - type: textarea
@ -37,6 +37,6 @@ body:
    attributes:
      label: Reproduction URL (optional)
      description: Provide a link to a [Tailwind Play](https://daisyui.com/tailwindplay/) page or a public GitHub repo so we can reproduce the issue.
-      placeholder: 'https://'
+      placeholder: "https://"
    validations:
      required: false
--- a/.github/ISSUE_TEMPLATE/documentation-issue.yml
+++ b/.github/ISSUE_TEMPLATE/documentation-issue.yml
@ -10,7 +10,7 @@ body:
    id: page
    attributes:
      label: On which page do you see this issue?
-      placeholder: 'example: https://daisyui.com/'
+      placeholder: "example: https://daisyui.com/"
    validations:
      required: false
  - type: textarea
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@ -99,4 +99,3 @@ jobs:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./src/docs/build
          cname: ${{ secrets.CNAME }}
-
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 [![][logo-url]][docs-url]

-**The most popular, free and open-source Tailwind CSS component library**  
+**The most popular, free and open-source Tailwind CSS component library**

 [ [See all components](https://daisyui.com/components/) ]

@ -21,7 +21,6 @@
 - [See all components →](https://daisyui.com/components/)
 - [How to use →](https://daisyui.com/docs/install/)

-
 ## 🌼 Features

 - A plugin for Tailwind CSS
@ -30,20 +29,18 @@
 - Customizable and themeable
 - Pure CSS. Works on all frameworks

-
 ## 📀 Install now!

 ```bash
 npm i daisyui
 ```

-Then add daisyUI to your `tailwind.config.js`:  
-
+Then add daisyUI to your `tailwind.config.js`:

 ```js
 module.exports = {
  plugins: [require("daisyui")],
-};
+}
 ```

 [ [Read more →][docs-url-install] ]
@ -62,24 +59,21 @@ Loading CSS files from CDN is not recommended for production. It's better to ins

 </details>

-
 ## 🚀 Use

 [[See all components →](https://daisyui.com/components/)]

-
 ## 📘 Documents + Examples

 See the official site: [ [daisyui.com →](https://daisyui.com/)]

-
 ## 🤝 Support daisyUI

-|   |   |
-|---|---|
-| **Premium Sponsors** <br /> Support this project by becoming a premium sponsor. <br /> [[Become a sponsor](https://opencollective.com/daisyui)] | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/tiers/premium-sponsor.svg?button=false&width=500&avatarHeight=120"></a> |
-| **Backers** <br /> Thank you to all our backers! <br /> [[Become a backer](https://opencollective.com/daisyui)] | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/backers.svg?button=false&width=500&avatarHeight=46"><img src="https://opencollective.com/daisyui/organizations.svg?button=false&width=500&avatarHeight=46"></a> |
-| **Contributors** <br /> This project exists thanks to all the people who contribute. <br /> [[Contribute](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md)] | <a href="https://github.com/saadeghi/daisyui/graphs/contributors" target="_blank"><img src="https://contrib.rocks/image?repo=saadeghi/daisyui&columns=13" width="500"></a> |
+|                                                                                                                                                                                     |                                                                                                                                                                                                                                                                           |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Premium Sponsors** <br /> Support this project by becoming a premium sponsor. <br /> [[Become a sponsor](https://opencollective.com/daisyui)]                                     | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/tiers/premium-sponsor.svg?button=false&width=500&avatarHeight=120"></a>                                                                                         |
+| **Backers** <br /> Thank you to all our backers! <br /> [[Become a backer](https://opencollective.com/daisyui)]                                                                     | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/backers.svg?button=false&width=500&avatarHeight=46"><img src="https://opencollective.com/daisyui/organizations.svg?button=false&width=500&avatarHeight=46"></a> |
+| **Contributors** <br /> This project exists thanks to all the people who contribute. <br /> [[Contribute](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md)] | <a href="https://github.com/saadeghi/daisyui/graphs/contributors" target="_blank"><img src="https://contrib.rocks/image?repo=saadeghi/daisyui&columns=13" width="500"></a>                                                                                                |

 Tweet about daisyUI: [![][tweet]][tweet-url]

@ -91,12 +85,14 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
 </summary>

 - Actions
+
  - [x] Button
  - [x] Dropdown
  - [x] Modal
  - [x] Swap

 - Data display
+
  - [x] Alert
  - [x] Avatar
  - [x] Badge
@ -131,8 +127,8 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
  - [x] Textarea
  - [x] Toggle
  - [ ] Upload
-  
 - Layout
+
  - [x] Artboard
  - [x] Button group
  - [x] Divider
@ -145,6 +141,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
  - [x] Stack

 - Navigation
+
  - [x] Bottom Navigation
  - [x] Breadcrumbs
  - [x] Link
@ -160,10 +157,8 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
  - [x] Phone
  - [x] Window

-
 </details>

-
 ## 📰 Featured on:

 <details>
--- a/src/base/postcss.config.js
+++ b/src/base/postcss.config.js
@ -6,4 +6,4 @@ module.exports = {
    }),
    require("autoprefixer"),
  ],
-};
+}
--- a/src/components/postcss.config.js
+++ b/src/components/postcss.config.js
@ -7,4 +7,4 @@ module.exports = {
    require("tailwindcss")("./src/components/tailwind.config.js"),
    require("autoprefixer"),
  ],
-};
+}
--- a/src/components/styled/bottom-navigation.css
+++ b/src/components/styled/bottom-navigation.css
@ -1,6 +1,6 @@
 .btm-nav {
  @apply h-16 bg-base-100 text-current;
-  &>* {
+  & > * {
    @apply border-current;

    &:not(.active) {
@ -23,7 +23,4 @@
      @apply text-base;
    }
  }
-
 }
-
-
--- a/src/components/styled/breadcrumbs.css
+++ b/src/components/styled/breadcrumbs.css
@ -1,6 +1,7 @@
 .breadcrumbs {
  @apply py-2;
-  & > ul,& > ol {
+  & > ul,
+  & > ol {
    & > li {
      & > a {
        &:focus {
--- a/src/components/styled/checkbox.css
+++ b/src/components/styled/checkbox.css
@ -66,7 +66,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-success bg-success text-success-content;
    }
  }
@ -79,7 +79,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-warning bg-warning text-warning-content;
    }
  }
@ -92,7 +92,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-info bg-info text-info-content;
    }
  }
@ -105,7 +105,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-error bg-error text-error-content;
    }
  }
--- a/src/components/styled/progress.css
+++ b/src/components/styled/progress.css
@ -89,4 +89,4 @@
  50% {
    left: 107%;
  }
-}
+}
--- a/src/components/styled/radio.css
+++ b/src/components/styled/radio.css
@ -7,7 +7,7 @@
    outline-offset: 2px;
  }
  &:checked,
-  &[aria-checked=true] {
+  &[aria-checked="true"] {
    @apply bg-base-content;
    animation: radiomark var(--animation-input, 0.2s) ease-in-out;
    box-shadow: 0 0 0 4px lch(var(--b1)) inset, 0 0 0 4px lch(var(--b1)) inset;
@ -19,7 +19,7 @@
      outline: 2px solid lch(var(--p));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-primary bg-primary text-primary-content;
    }
  }
@ -30,7 +30,7 @@
      outline: 2px solid lch(var(--s));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-secondary bg-secondary text-secondary-content;
    }
  }
@ -41,7 +41,7 @@
      outline: 2px solid lch(var(--a));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-accent bg-accent text-accent-content;
    }
  }
@ -52,7 +52,7 @@
      outline: 2px solid lch(var(--su));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-success bg-success text-success-content;
    }
  }
@ -63,7 +63,7 @@
      outline: 2px solid lch(var(--wa));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-warning bg-warning text-warning-content;
    }
  }
@ -74,7 +74,7 @@
      outline: 2px solid lch(var(--in));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-info bg-info text-info-content;
    }
  }
@ -85,7 +85,7 @@
      outline: 2px solid lch(var(--er));
    }
    &:checked,
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-error bg-error text-error-content;
    }
  }
--- a/src/components/styled/rating.css
+++ b/src/components/styled/rating.css
@ -11,7 +11,7 @@
    @apply w-2 bg-transparent;
  }
  input:checked ~ input,
-  input[aria-checked=true] ~ input {
+  input[aria-checked="true"] ~ input {
    @apply bg-opacity-20;
  }
  input:focus-visible {
--- a/src/components/styled/toast.css
+++ b/src/components/styled/toast.css
@ -1,6 +1,6 @@
 .toast {
  @apply gap-2 p-4;
-  &>*{
+  & > * {
    animation: toast-pop 0.25s ease-out;
  }
 }
--- a/src/components/styled/toggle.css
+++ b/src/components/styled/toggle.css
@ -15,7 +15,7 @@
  }
  &:checked,
  &[checked="true"],
-  &[aria-checked=true] {
+  &[aria-checked="true"] {
    --handleoffsetcalculator: var(--handleoffset);
    @apply border-opacity-100 bg-opacity-100;
    [dir="rtl"] & {
@ -35,7 +35,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-primary;
      @apply border-primary border-opacity-10 bg-primary text-primary-content;
    }
@ -46,7 +46,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-secondary;
      @apply border-secondary border-opacity-10 bg-secondary text-secondary-content;
    }
@ -57,7 +57,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-accent;
      @apply border-accent border-opacity-10 bg-accent text-accent-content;
    }
@ -68,7 +68,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-success;
      @apply border-success border-opacity-10 bg-success text-success-content;
    }
@ -79,7 +79,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-warning;
      @apply border-warning border-opacity-10 bg-warning text-warning-content;
    }
@ -90,7 +90,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-info;
      @apply border-info border-opacity-10 bg-info text-info-content;
    }
@ -101,7 +101,7 @@
    }
    &:checked,
    &[checked="true"],
-    &[aria-checked=true] {
+    &[aria-checked="true"] {
      @apply border-error;
      @apply border-error border-opacity-10 bg-error text-error-content;
    }
--- a/src/components/styled/typography.css
+++ b/src/components/styled/typography.css
@ -1,37 +1,37 @@
-:root .prose{
-  --tw-prose-body: lch(var(--bc)/.8);
+:root .prose {
+  --tw-prose-body: lch(var(--bc) / 0.8);
  --tw-prose-headings: lch(var(--bc));
  --tw-prose-lead: lch(var(--bc));
  --tw-prose-links: lch(var(--bc));
  --tw-prose-bold: lch(var(--bc));
  --tw-prose-counters: lch(var(--bc));
-  --tw-prose-bullets: lch(var(--bc)/.5);
-  --tw-prose-hr: lch(var(--bc)/.2);
+  --tw-prose-bullets: lch(var(--bc) / 0.5);
+  --tw-prose-hr: lch(var(--bc) / 0.2);
  --tw-prose-quotes: lch(var(--bc));
-  --tw-prose-quote-borders: lch(var(--bc)/.2);
-  --tw-prose-captions: lch(var(--bc)/.5);
+  --tw-prose-quote-borders: lch(var(--bc) / 0.2);
+  --tw-prose-captions: lch(var(--bc) / 0.5);
  --tw-prose-code: lch(var(--bc));
  --tw-prose-pre-code: lch(var(--nc));
  --tw-prose-pre-bg: lch(var(--n));
-  --tw-prose-th-borders: lch(var(--bc)/.5);
-  --tw-prose-td-borders: lch(var(--bc)/.2);
+  --tw-prose-th-borders: lch(var(--bc) / 0.5);
+  --tw-prose-td-borders: lch(var(--bc) / 0.2);
 }
-.prose{
-  & :where(code):not(:where([class~="not-prose"] *)){
+.prose {
+  & :where(code):not(:where([class~="not-prose"] *)) {
    padding: 2px 8px;
    border-radius: var(--rounded-badge);
  }
-  & code:after, 
-  & code:before{
+  & code:after,
+  & code:before {
    content: none;
  }
-  pre{
-    code{
+  pre {
+    code {
      border-radius: 0;
      padding: 0;
    }
  }
-  & :where(tbody tr, thead):not(:where([class~="not-prose"] *)){
+  & :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
    border-bottom-color: lch(var(--bc) / 20%);
  }
 }
--- a/src/components/tailwind.config.js
+++ b/src/components/tailwind.config.js
@ -1,25 +1,23 @@
-const plugin = require("tailwindcss/plugin");
-const responsiveRegex = require("../lib/responsiveRegex");
+const plugin = require("tailwindcss/plugin")
+const responsiveRegex = require("../lib/responsiveRegex")
 module.exports = {
-  content: [
-    { raw: '' },
-  ],
+  content: [{ raw: "" }],
  safelist: responsiveRegex,
  theme: {
    colors: require("../theming"),
  },
  plugins: [
    plugin(function ({ addBase, addUtilities }) {
-      addBase(require("../../dist/base"));
+      addBase(require("../../dist/base"))
      addUtilities(require("../../dist/utilities"), {
        variants: ["responsive"],
-      });
+      })
      addUtilities(require("../../dist/utilities-unstyled"), {
        variants: ["responsive"],
-      });
+      })
      addUtilities(require("../../dist/utilities-styled"), {
        variants: ["responsive"],
-      });
+      })
    }),
  ],
-};
+}
--- a/src/components/unstyled/bottom-navigation.css
+++ b/src/components/unstyled/bottom-navigation.css
@ -1,7 +1,7 @@
 .btm-nav {
  @apply flex flex-row items-center justify-around fixed bottom-0 left-0 right-0 w-full;
  padding-bottom: env(safe-area-inset-bottom);
-  &>* {
+  & > * {
    @apply flex items-center justify-center flex-col basis-full h-full cursor-pointer relative gap-1;
  }
 }
--- a/src/components/unstyled/breadcrumbs.css
+++ b/src/components/unstyled/breadcrumbs.css
@ -1,6 +1,7 @@
 .breadcrumbs {
  @apply max-w-full overflow-x-auto;
-  & > ul,& > ol {
+  & > ul,
+  & > ol {
    @apply flex items-center whitespace-nowrap;
    min-height: min-content;
    & > li {
--- a/src/docs/postcss.config.cjs
+++ b/src/docs/postcss.config.cjs
@ -1,8 +1,3 @@
 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")],
+}
--- a/src/docs/src/app.html
+++ b/src/docs/src/app.html
@ -6,8 +6,6 @@
    %sveltekit.head%
  </head>
  <body>
-    <div>
-      %sveltekit.body%
-    </div>
+    <div>%sveltekit.body%</div>
  </body>
 </html>
--- a/src/docs/src/translation/jp.json
+++ b/src/docs/src/translation/jp.json
@ -113,7 +113,7 @@
  "Toast": "Toast トースト",
  "Navigation": "ナビゲーション",
  "Breadcrumbs": "Breadcrumbs ブレッドクラム",
-  "Bottom navigation":"Bottom navigation ボトムナビゲーション",
+  "Bottom navigation": "Bottom navigation ボトムナビゲーション",
  "Link": "Link リンク",
  "Menu": "Menu メニュー",
  "Navbar": "Navbar ナビバー",
@ -251,7 +251,7 @@
  "Artboard provides fixed size container to display a demo content on mobile size.": "アートボードは、モバイルサイズでデモコンテンツを表示するための固定サイズのコンテナを提供します。",
  "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "アバターは、インターフェースに個人または企業のサムネイル表現を表示するために使用されます。",
  "Badges are used to inform the user of the status of specific data.": "バッジは、特定のデータのステータスをユーザーに通知するために使用されます。",
-  "Bottom navigation bar allows navigation between primary screens.":"ボトムナビゲーションで主要なスクリーン間の移動が可能になります。",
+  "Bottom navigation bar allows navigation between primary screens.": "ボトムナビゲーションで主要なスクリーン間の移動が可能になります。",
  "Breadcrumbs helps users to navigate through the website.": "ブレッドクラムは、ユーザーがWebサイトをナビゲートするのに役立ちます。",
  "Button group shows buttons next to each other.": "ボタングループには、ボタンが隣り合って表示されます。",
  "Buttons allow the user to take actions or make choices.": "ボタンを使用すると、ユーザーはアクションを実行したり、選択したりできます。",
@ -294,7 +294,7 @@
  "Table can be used to show a list of data in a table format.": "表を使用して、データのリストを表形式で表示できます。",
  "Textarea allows users to enter text in multiple lines.": "Textareaを使用すると、ユーザーは複数行にテキストを入力できます。",
  "Toggle is a checkbox that is styled to look like a switch button.": "トグルは、スイッチボタンのように見えるようにスタイル設定されたチェックボックスです。",
-  "Toast is a wrapper to stack elements, positioned on the corner of page.":"Toastは要素を重ねるためのラッパーで、ページの隅に配置されます。",
+  "Toast is a wrapper to stack elements, positioned on the corner of page.": "Toastは要素を重ねるためのラッパーで、ページの隅に配置されます。",
  "Tooltip can be used to show a message when hovering over an element.": "ツールチップを使用して、要素にカーソルを合わせたときにメッセージを表示できます。",
  "Code mockup": "コードモックアップ",
  "Phone mockup": "スマホのモックアップ",
--- a/src/docs/tailwind.config.cjs
+++ b/src/docs/tailwind.config.cjs
@ -1,36 +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',
-  ],
+  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"],
  theme: {
    extend: {
-      colors: require('../theming'),
+      colors: require("../theming"),
      fontFamily: {
-        'title': ['Montserrat', 'sans-serif'],
-      }
-    }
+        title: ["Montserrat", "sans-serif"],
+      },
+    },
  },
  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"],
+}
--- a/src/experiments/compare/login-form/bootstrap/bootstrap.min.css
+++ b/src/experiments/compare/login-form/bootstrap/bootstrap.min.css
--- a/src/experiments/compare/login-form/bootstrap/package.json
+++ b/src/experiments/compare/login-form/bootstrap/package.json
@ -7,4 +7,4 @@
    "bootstrap": "^5.1.3",
    "purgecss": "^4.1.3"
  }
-}
+}
--- a/src/experiments/compare/login-form/bootstrap/purgecss.config.js
+++ b/src/experiments/compare/login-form/bootstrap/purgecss.config.js
@ -1,5 +1,5 @@
 module.exports = {
-  content: ['index.html'],
-  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
-  output: './',
-}
+  content: ["index.html"],
+  css: ["node_modules/bootstrap/dist/css/bootstrap.min.css"],
+  output: "./",
+}
--- a/src/experiments/compare/login-form/daisyui/output.css
+++ b/src/experiments/compare/login-form/daisyui/output.css
--- a/src/experiments/compare/login-form/daisyui/tailwind.config.js
+++ b/src/experiments/compare/login-form/daisyui/tailwind.config.js
@ -1,13 +1,8 @@
 module.exports = {
-  content: ['./*.html'],
+  content: ["./*.html"],
  daisyui: {
-    themes: [
-      'light',
-      'dark',
-    ],
-    prefix: 'd-',
+    themes: ["light", "dark"],
+    prefix: "d-",
  },
-  plugins: [
-    require('daisyui'),
-  ],
+  plugins: [require("daisyui")],
 }
--- a/src/experiments/compare/login-form/tailwind/output.css
+++ b/src/experiments/compare/login-form/tailwind/output.css
--- a/src/experiments/compare/login-form/tailwind/package.json
+++ b/src/experiments/compare/login-form/tailwind/package.json
@ -6,4 +6,4 @@
  "dependencies": {
    "tailwindcss": "^3.0.23"
  }
-}
+}
--- a/src/experiments/compare/login-form/tailwind/tailwind.config.js
+++ b/src/experiments/compare/login-form/tailwind/tailwind.config.js
@ -1,4 +1,4 @@
 module.exports = {
-  content: ['./*.html'],
-  darkMode: 'class',
+  content: ["./*.html"],
+  darkMode: "class",
 }
--- a/src/experiments/compare/login-form/tailwind/theme-change.js
+++ b/src/experiments/compare/login-form/tailwind/theme-change.js
@ -1,16 +1,16 @@
 if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-  document.documentElement.classList.add("dark");
-  localStorage.setItem("theme", "dark");
+  document.documentElement.classList.add("dark")
+  localStorage.setItem("theme", "dark")
 } else {
-  document.documentElement.classList.remove("dark");
-  localStorage.removeItem("theme");
+  document.documentElement.classList.remove("dark")
+  localStorage.removeItem("theme")
 }
 function toggleDarkmode() {
  if (localStorage.getItem("theme") === null) {
-    localStorage.setItem("theme", "dark");
-    document.documentElement.classList.add("dark");
+    localStorage.setItem("theme", "dark")
+    document.documentElement.classList.add("dark")
  } else {
-    localStorage.removeItem("theme");
-    document.documentElement.classList.remove("dark");
+    localStorage.removeItem("theme")
+    document.documentElement.classList.remove("dark")
  }
-}
+}
--- a/src/experiments/playground/package.json
+++ b/src/experiments/playground/package.json
@ -15,4 +15,4 @@
    "tailwindcss": "3.3.1",
    "tailwindcss-flip": "1.0.0"
  }
-}
+}
--- a/src/experiments/playground/postcss.config.js
+++ b/src/experiments/playground/postcss.config.js
@ -1,6 +1,5 @@
-
 module.exports = {
  plugins: {
    tailwindcss: {},
  },
-};
+}
--- a/src/experiments/playground/src/env.d.ts
+++ b/src/experiments/playground/src/env.d.ts
@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />
--- a/src/full/postcss.config.js
+++ b/src/full/postcss.config.js
@ -7,4 +7,4 @@ module.exports = {
    require("tailwindcss")("./src/full/tailwind.config.js"),
    // require("autoprefixer"),
  ],
-};
+}
--- a/src/full/tailwind.config.js
+++ b/src/full/tailwind.config.js
@ -1,49 +1,25 @@
-const plugin = require("tailwindcss/plugin");
-const responsiveRegex = require("../lib/responsiveRegex");
+const plugin = require("tailwindcss/plugin")
+const responsiveRegex = require("../lib/responsiveRegex")
 module.exports = {
-  content: [
-    { raw: '' },
-  ],
+  content: [{ raw: "" }],
  safelist: responsiveRegex,
  theme: {
    colors: require("../theming"),
  },
-  corePlugins: [
-    "animation",
-    "backgroundColor",
-    "backgroundImage",
-    "backgroundOpacity",
-    "backdropOpacity",
-    "borderColor",
-    "borderOpacity",
-    "divideColor",
-    "divideOpacity",
-    "gradientColorStops",
-    "opacity",
-    "placeholderColor",
-    "preflight",
-    "ringColor",
-    "ringOffsetColor",
-    "ringOffsetWidth",
-    "ringOpacity",
-    "ringWidth",
-    "textColor",
-    "textOpacity",
-    "transitionProperty",
-  ],
+  corePlugins: ["animation", "backgroundColor", "backgroundImage", "backgroundOpacity", "backdropOpacity", "borderColor", "borderOpacity", "divideColor", "divideOpacity", "gradientColorStops", "opacity", "placeholderColor", "preflight", "ringColor", "ringOffsetColor", "ringOffsetWidth", "ringOpacity", "ringWidth", "textColor", "textOpacity", "transitionProperty"],
  plugins: [
    plugin(function ({ addBase, addUtilities, addComponents }) {
-      addBase(require("../../dist/base"));
-      addComponents(require("../../dist/styled"));
+      addBase(require("../../dist/base"))
+      addComponents(require("../../dist/styled"))
      addUtilities(require("../../dist/utilities"), {
        variants: ["responsive"],
-      });
+      })
      addUtilities(require("../../dist/utilities-unstyled"), {
        variants: ["responsive"],
-      });
+      })
      addUtilities(require("../../dist/utilities-styled"), {
        variants: ["responsive"],
-      });
+      })
    }),
  ],
-};
+}
--- a/src/index.js
+++ b/src/index.js
@ -1,70 +1,56 @@
-const tailwindColors = require('tailwindcss/colors')
+const tailwindColors = require("tailwindcss/colors")

 const postcssJs = require("postcss-js")
-const postcssPrefix = require('./lib/addPrefix')
+const postcssPrefix = require("./lib/addPrefix")

-const daisyuiInfo = require("../package.json");
-const colors = require("./theming/index");
-const utilities = require("../dist/utilities");
-const base = require("../dist/base");
-const unstyled = require("../dist/unstyled");
-const unstyledRtl = require("../dist/unstyled.rtl");
-const styled = require("../dist/styled");
-const styledRtl = require("../dist/styled.rtl");
-const utilitiesUnstyled = require("../dist/utilities-unstyled");
-const utilitiesStyled = require("../dist/utilities-styled");
-const themes = require("./theming/themes");
-const colorFunctions = require("./theming/functions");
+const daisyuiInfo = require("../package.json")
+const colors = require("./theming/index")
+const utilities = require("../dist/utilities")
+const base = require("../dist/base")
+const unstyled = require("../dist/unstyled")
+const unstyledRtl = require("../dist/unstyled.rtl")
+const styled = require("../dist/styled")
+const styledRtl = require("../dist/styled.rtl")
+const utilitiesUnstyled = require("../dist/utilities-unstyled")
+const utilitiesStyled = require("../dist/utilities-styled")
+const themes = require("./theming/themes")
+const colorFunctions = require("./theming/functions")

 const mainFunction = ({ addBase, addComponents, addUtilities, config, postcss }) => {
-  let daisyuiIncludedItems = [];
-  let logs = false;
+  let daisyuiIncludedItems = []
+  let logs = false
  if (config("daisyui.logs") != false) {
-    logs = true;
+    logs = true
  }
  if (logs) {
-    console.log();
-    console.log(
-      "\x1b[35m%s\x1b[0m",
-      "🌼 daisyUI components " + daisyuiInfo.version,
-      "\x1b[0m",
-      daisyuiInfo.homepage
-    );
-    console.group();
+    console.log()
+    console.log("\x1b[35m%s\x1b[0m", "🌼 daisyUI components " + daisyuiInfo.version, "\x1b[0m", daisyuiInfo.homepage)
+    console.group()
  }

  // inject @base style
  if (config("daisyui.base") != false) {
-    addBase(base);
-    daisyuiIncludedItems.push("base");
+    addBase(base)
+    daisyuiIncludedItems.push("base")
  }

  // inject components
  // because rollupjs doesn't supprt dynamic require
-  let file = styled;
+  let file = styled
  if (config("daisyui.styled") == false && config("daisyui.rtl") != true) {
-    daisyuiIncludedItems.push("unstyled components");
-    file = unstyled;
-  } else if (
-    config("daisyui.styled") == false &&
-    config("daisyui.rtl") == true
-  ) {
-    daisyuiIncludedItems.push("unstyled components");
-    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL");
-    file = unstyledRtl;
-  } else if (
-    config("daisyui.styled") != false &&
-    config("daisyui.rtl") != true
-  ) {
-    daisyuiIncludedItems.push("components");
-    file = styled;
-  } else if (
-    config("daisyui.styled") !== false &&
-    config("daisyui.rtl") == true
-  ) {
-    daisyuiIncludedItems.push("components");
-    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL");
-    file = styledRtl;
+    daisyuiIncludedItems.push("unstyled components")
+    file = unstyled
+  } else if (config("daisyui.styled") == false && config("daisyui.rtl") == true) {
+    daisyuiIncludedItems.push("unstyled components")
+    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL")
+    file = unstyledRtl
+  } else if (config("daisyui.styled") != false && config("daisyui.rtl") != true) {
+    daisyuiIncludedItems.push("components")
+    file = styled
+  } else if (config("daisyui.styled") !== false && config("daisyui.rtl") == true) {
+    daisyuiIncludedItems.push("components")
+    console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL")
+    file = styledRtl
  }

  // add prefix to class names if specified
@ -77,54 +63,45 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config, postcss })
      logs && console.error(`Error occurred and prevent applying the "prefix" option:`, error)
    }
  }
-  const shouldApplyPrefix = prefix && postcssJsProcess;
+  const shouldApplyPrefix = prefix && postcssJsProcess
  if (shouldApplyPrefix) {
    file = postcssJsProcess(file)
  }

-  addComponents(file);
+  addComponents(file)

  const themeInjector = colorFunctions.injectThemes(addBase, config, themes)
-  themeInjector;
+  themeInjector

-  daisyuiIncludedItems.push(themeInjector.themeOrder.length + " themes");
+  daisyuiIncludedItems.push(themeInjector.themeOrder.length + " themes")

  // inject @utilities style needed by components
  if (config("daisyui.utils") != false) {
-    addComponents(utilities, { variants: ["responsive"] });
+    addComponents(utilities, { variants: ["responsive"] })

    let toAdd = utilitiesUnstyled // shadow clone here to avoid mutate the original
    if (shouldApplyPrefix) {
-      toAdd = postcssJsProcess(toAdd);
+      toAdd = postcssJsProcess(toAdd)
    }
-    addComponents(toAdd, { variants: ["responsive"] });
+    addComponents(toAdd, { variants: ["responsive"] })

    toAdd = utilitiesStyled
    if (shouldApplyPrefix) {
-      toAdd = postcssJsProcess(toAdd);
+      toAdd = postcssJsProcess(toAdd)
    }
-    addComponents(toAdd, { variants: ["responsive"] });
-    daisyuiIncludedItems.push("utilities");
+    addComponents(toAdd, { variants: ["responsive"] })
+    daisyuiIncludedItems.push("utilities")
  }
  if (logs) {
-    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();
+    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()
  }
-};
+}

 module.exports = require("tailwindcss/plugin")(mainFunction, {
-  theme: { 
+  theme: {
    extend: {
      colors: {
        ...colors,
@ -139,7 +116,7 @@ module.exports = require("tailwindcss/plugin")(mainFunction, {
        "neutral-700": tailwindColors.neutral[700],
        "neutral-800": tailwindColors.neutral[800],
        "neutral-900": tailwindColors.neutral[900],
-      }
-    }
+      },
+    },
  },
-});
+})
--- a/src/lib/responsiveRegex.js
+++ b/src/lib/responsiveRegex.js
@ -11,22 +11,12 @@ module.exports = [
  {
    // responsive utilites for daisyUI responsive modifiers
    pattern: /.(sm|md|lg|xl)/,
-    variants: [
-      "sm",
-      "md",
-      "lg",
-      "xl",
-    ]
+    variants: ["sm", "md", "lg", "xl"],
  },
  {
    // responsive utilites for daisyUI components
    pattern: /(modal-middle|card-side|stats)/,
-    variants: [
-      "sm",
-      "md",
-      "lg",
-      "xl",
-    ]
+    variants: ["sm", "md", "lg", "xl"],
  },
  {
    // color utilities for daisyUI colors
@ -50,4 +40,4 @@ module.exports = [
      // "disabled",
    ],
  },
-];
+]
--- a/src/tests/a11y.test.js
+++ b/src/tests/a11y.test.js
@ -1,79 +1,39 @@
-import { describe, expect, test } from 'vitest'
-import * as colorFunctions from '../theming/functions'
+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
  Object.keys(themes).filter((themeKey) => {
-    return themeKey !== "default";
+    return themeKey !== "default"
  })
-)('Check contrast of color pairs on all themes', (themeKey) => {
-
-  test.each(
-    [
-      ["--pc", "--p"],
-      ["--pc", "--pf"],
-      ["--sc", "--s"],
-      ["--sc", "--sf"],
-      ["--ac", "--a"],
-      ["--ac", "--af"],
-      ["--nc", "--n"],
-      ["--nc", "--nf"],
-      ["--bc", "--b1"],
-      ["--bc", "--b2"],
-      ["--bc", "--b3"],
-      ["--inc", "--in"],
-      ["--suc", "--su"],
-      ["--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
-    ) {
+)("Check contrast of color pairs on all themes", (themeKey) => {
+  test.each([
+    ["--pc", "--p"],
+    ["--pc", "--pf"],
+    ["--sc", "--s"],
+    ["--sc", "--sf"],
+    ["--ac", "--a"],
+    ["--ac", "--af"],
+    ["--nc", "--n"],
+    ["--nc", "--nf"],
+    ["--bc", "--b1"],
+    ["--bc", "--b2"],
+    ["--bc", "--b3"],
+    ["--inc", "--in"],
+    ["--suc", "--su"],
+    ["--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]),
-        ContrastRatioErrorThreshold
-      ) === false
-    ) {
+    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)
  })
-
-
 })
--- a/src/tests/colors.test.js
+++ b/src/tests/colors.test.js
@ -1,7 +1,7 @@
-import { expect, test } from 'vitest'
-import * as colorFunctions from '../theming/functions'
+import { expect, test } from "vitest"
+import * as colorFunctions from "../theming/functions"

-test('Foreground color generator function', () => {
+test("Foreground color generator function", () => {
  expect(colorFunctions.generateForegroundColorFrom("lch(100% 0 0)")).toBe("20 0 0")
  expect(colorFunctions.generateForegroundColorFrom("lch(0% 0 0)")).toBe("80 0 0")
  expect(colorFunctions.generateForegroundColorFrom("lch(100% 0 0)", 1)).toBe("0 0 0")
--- a/src/tests/themes.test.js
+++ b/src/tests/themes.test.js
@ -1,5 +1,5 @@
-import { describe, expect, test } from 'vitest'
-import * as colorFunctions from '../theming/functions'
+import { describe, expect, test } from "vitest"
+import * as colorFunctions from "../theming/functions"
 import * as themes from "../theming/themes"
 import * as colorNames from "../theming/colorNames"
 import { trimThemeName } from "./utils"
@ -7,44 +7,29 @@ import { trimThemeName } from "./utils"
 describe.each(
  // each theme
  Object.keys(themes).filter((themeKey) => {
-    return themeKey !== "default";
+    return themeKey !== "default"
  })
-)('All themes have all colors', (themeKey) => {
-
+)("All themes have all colors", (themeKey) => {
  test.each(
    // each color
    Object.keys(colorNames).filter((colorName) => {
-      return colorName !== "default";
+      return colorName !== "default"
    })
  )(`${trimThemeName(themeKey)} has colors`, (colorName) => {
    expect(colorFunctions.convertToLch(themes[themeKey])).toHaveProperty(colorNames[colorName])
  })
-
 })

 describe.each(
  // each theme
  Object.keys(themes).filter((themeKey) => {
-    return themeKey !== "default";
+    return themeKey !== "default"
  })
-)('All themes have all required CSS variables', (themeKey) => {
-
+)("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)
  })
-
-})
+})
--- a/src/tests/utils.js
+++ b/src/tests/utils.js
@ -1,19 +1,19 @@
-import { colord, extend } from "colord";
-import mixPlugin from "colord/plugins/mix";
-import namesPlugin from "colord/plugins/names";
-import lchPlugin from "colord/plugins/lch";
-import hwbPlugin from "colord/plugins/hwb";
-import labPlugin from "colord/plugins/lab";
-import xyzPlugin from "colord/plugins/xyz";
+import { colord, extend } from "colord"
+import mixPlugin from "colord/plugins/mix"
+import namesPlugin from "colord/plugins/names"
+import lchPlugin from "colord/plugins/lch"
+import hwbPlugin from "colord/plugins/hwb"
+import labPlugin from "colord/plugins/lab"
+import xyzPlugin from "colord/plugins/xyz"
 extend([mixPlugin, namesPlugin, lchPlugin, hwbPlugin, labPlugin, xyzPlugin])

-import ColorContrastChecker from 'color-contrast-checker'
+import ColorContrastChecker from "color-contrast-checker"

-// WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 
-// for normal text and 3:1 for large text. WCAG 2.1 requires a 
-// contrast ratio of at least 3:1 for graphics and user interface 
-// components (such as form input borders). WCAG Level AAA requires 
-// a contrast ratio of at least 7:1 for normal text and 4.5:1 for 
+// WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1
+// for normal text and 3:1 for large text. WCAG 2.1 requires a
+// contrast ratio of at least 3:1 for graphics and user interface
+// components (such as form input borders). WCAG Level AAA requires
+// a contrast ratio of at least 7:1 for normal text and 4.5:1 for
 // large text.

 export const ContrastRatioWarningThreshold = 3
@ -27,8 +27,8 @@ export const isColorContrastOkay = (input1, input2, ratio) => {
 }

 function changeLchValuesToObject(input) {
-  const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat);
-  return { l, c, h, a:1 };
+  const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
+  return { l, c, h, a: 1 }
 }

 export const lchValuesToHex = (input) => {
@ -37,9 +37,9 @@ export const lchValuesToHex = (input) => {
 }

 export const trimCssVariable = (input) => {
-  return input.replace('--', '')
+  return input.replace("--", "")
 }

 export const trimThemeName = (input) => {
-  return input.replace('[data-theme=', '').replace(']', '')
-}
+  return input.replace("[data-theme=", "").replace("]", "")
+}
--- a/src/themes/postcss.config.js
+++ b/src/themes/postcss.config.js
@ -6,4 +6,4 @@ module.exports = {
    }),
    require("tailwindcss")("./src/themes/tailwind.config.js"),
  ],
-};
+}
--- a/src/themes/tailwind.config.js
+++ b/src/themes/tailwind.config.js
@ -1,7 +1,5 @@
 module.exports = {
-  content: [
-    { raw: '' },
-  ],
+  content: [{ raw: "" }],
  corePlugins: {
    preflight: false,
  },
@ -9,4 +7,4 @@ module.exports = {
    base: false,
  },
  plugins: [require("../index")],
-};
+}
--- a/src/theming/colorNames.js
+++ b/src/theming/colorNames.js
@ -31,4 +31,4 @@ module.exports = {

  error: "--er",
  "error-content": "--erc",
-};
+}
--- a/src/theming/functions.js
+++ b/src/theming/functions.js
@ -12,30 +12,29 @@ const xyzPlugin = require("colord/plugins/xyz")
 extend([mixPlugin, namesPlugin, lchPlugin, hwbPlugin, labPlugin, xyzPlugin])

 module.exports = {
-
  changeLchValuesToObject: function (input) {
-    const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat);
-    return { l, c, h, a:1 };
+    const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
+    return { l, c, h, a: 1 }
  },

  turnLchValuesToString: function (input) {
-    const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat);
-    return `${l} ${c} ${h}`;
+    const [l, c, h] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
+    return `${l} ${c} ${h}`
  },

  generateForegroundColorFrom: function (input, percentage = 0.8) {
-    const str = colord(input).mix( colord(input).isDark() ? "white" : "black" , percentage).toLchString()
+    const str = colord(input)
+      .mix(colord(input).isDark() ? "white" : "black", percentage)
+      .toLchString()
    return this.turnLchValuesToString(str)
  },

-  generateDarkenColorFrom: function (input, percentage =  0.07) {
+  generateDarkenColorFrom: function (input, percentage = 0.07) {
    const str = colord(input).darken(percentage).toLchString()
    return this.turnLchValuesToString(str)
  },

-
  convertToLch: function (input) {
-
    if (typeof input !== "object" || input === null) {
      return input
    }
@ -47,9 +46,9 @@ module.exports = {
        resultObj[rule] = value
      } else {
        let arr
-        if(getFormat(value) === 'lch') {
+        if (getFormat(value) === "lch") {
          arr = this.changeLchValuesToObject(value)
-        }else{
+        } else {
          arr = colord(value).toLch()
        }
        resultObj[colorNames[rule]] = arr.l + " " + arr.c + " " + arr.h
@ -85,7 +84,7 @@ module.exports = {
      }

      // auto generate state colors
-      
+
      if (!Object.hasOwn(input, "info")) {
        resultObj["--in"] = "72.22% 45.12 240.2"
      }
@ -145,13 +144,12 @@ module.exports = {
      }

      // add css variables if not exist
-      Object.entries(themeDefaults.variables).forEach(item => {
-        const [variable, value] = item;
+      Object.entries(themeDefaults.variables).forEach((item) => {
+        const [variable, value] = item
        if (!Object.hasOwn(input, variable)) {
          resultObj[variable] = value
        }
-      });
-
+      })
    })

    return resultObj
--- a/src/theming/index.js
+++ b/src/theming/index.js
@ -1,14 +1,14 @@
 function withOpacityValue(variable, fallbackColor) {
  return ({ opacityValue }) => {
-    let fallbackColorValue = "";
+    let fallbackColorValue = ""
    if (fallbackColor) {
-      fallbackColorValue = `, var(${fallbackColor})`;
+      fallbackColorValue = `, var(${fallbackColor})`
    }
    if (opacityValue === undefined) {
-      return `lch(var(${variable}${fallbackColorValue}))`;
+      return `lch(var(${variable}${fallbackColorValue}))`
    }
-    return `lch(var(${variable}${fallbackColorValue}) / ${opacityValue})`;
-  };
+    return `lch(var(${variable}${fallbackColorValue}) / ${opacityValue})`
+  }
 }

 let colorObject = {
@ -47,6 +47,6 @@ let colorObject = {

  error: withOpacityValue("--er"),
  "error-content": withOpacityValue("--erc", "--nc"),
-};
+}

-module.exports = colorObject;
+module.exports = colorObject
--- a/src/utilities/global/glass.css
+++ b/src/utilities/global/glass.css
@ -5,19 +5,8 @@
    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%));
  }
 }
--- a/src/utilities/global/postcss.config.js
+++ b/src/utilities/global/postcss.config.js
@ -6,4 +6,4 @@ module.exports = {
    }),
    require("autoprefixer"),
  ],
-};
+}
--- a/src/utilities/styled/postcss.config.js
+++ b/src/utilities/styled/postcss.config.js
@ -7,4 +7,4 @@ module.exports = {
    require("tailwindcss")("./src/utilities/styled/tailwind.config.js"),
    require("autoprefixer"),
  ],
-};
+}
--- a/src/utilities/styled/tailwind.config.js
+++ b/src/utilities/styled/tailwind.config.js
@ -1,19 +1,17 @@
-const plugin = require("tailwindcss/plugin");
-const responsiveRegex = require("../../lib/responsiveRegex");
+const plugin = require("tailwindcss/plugin")
+const responsiveRegex = require("../../lib/responsiveRegex")
 module.exports = {
-  content: [
-    { raw: '' },
-  ],
+  content: [{ raw: "" }],
  safelist: responsiveRegex,
  theme: {
    colors: require("../../theming"),
  },
  plugins: [
    plugin(function ({ addBase, addUtilities }) {
-      addBase(require("../../../dist/base"));
+      addBase(require("../../../dist/base"))
      addUtilities(require("../../../dist/utilities"), {
        variants: ["responsive"],
-      });
+      })
    }),
  ],
-};
+}
--- a/src/utilities/unstyled/bottom-navigation.css
+++ b/src/utilities/unstyled/bottom-navigation.css
@ -1,7 +1,7 @@
 .btm-nav {
  &-xs {
    @apply h-10;
-    &>*:where(.active) {
+    & > *:where(.active) {
      @apply border-t-[1px];
    }
    .btm-nav-label {
@ -10,7 +10,7 @@
  }
  &-sm {
    @apply h-12;
-    &>*:where(.active) {
+    & > *:where(.active) {
      @apply border-t-2;
    }
    .btm-nav-label {
@ -19,7 +19,7 @@
  }
  &-md {
    @apply h-16;
-    &>*:where(.active) {
+    & > *:where(.active) {
      @apply border-t-2;
    }
    .btm-nav-label {
@ -28,7 +28,7 @@
  }
  &-lg {
    @apply h-20;
-    &>*:where(.active) {
+    & > *:where(.active) {
      @apply border-t-4;
    }
    .btm-nav-label {
--- a/src/utilities/unstyled/indicator.css
+++ b/src/utilities/unstyled/indicator.css
@ -21,4 +21,3 @@
    @apply top-0 bottom-auto -translate-y-1/2;
  }
 }
-
--- a/src/utilities/unstyled/postcss.config.js
+++ b/src/utilities/unstyled/postcss.config.js
@ -7,4 +7,4 @@ module.exports = {
    require("tailwindcss")("./src/utilities/unstyled/tailwind.config.js"),
    require("autoprefixer"),
  ],
-};
+}
--- a/src/utilities/unstyled/tailwind.config.js
+++ b/src/utilities/unstyled/tailwind.config.js
@ -1,19 +1,17 @@
-const plugin = require("tailwindcss/plugin");
-const responsiveRegex = require("../../lib/responsiveRegex");
+const plugin = require("tailwindcss/plugin")
+const responsiveRegex = require("../../lib/responsiveRegex")
 module.exports = {
-  content: [
-    { raw: '' },
-  ],
+  content: [{ raw: "" }],
  safelist: responsiveRegex,
  theme: {
    colors: require("../../theming"),
  },
  plugins: [
    plugin(function ({ addBase, addUtilities }) {
-      addBase(require("../../../dist/base"));
+      addBase(require("../../../dist/base"))
      addUtilities(require("../../../dist/utilities"), {
        variants: ["responsive"],
-      });
+      })
    }),
  ],
-};
+}
--- a/src/utilities/unstyled/toast.css
+++ b/src/utilities/unstyled/toast.css
@ -19,4 +19,3 @@
 .toast:where(.toast-top) {
  @apply top-0 bottom-auto translate-y-0;
 }
-