@pokle/basecoat 0.3.10-beta2.pokle

package/.eleventy.js

@@ -0,0 +1,47 @@
+import eleventyLucideicons from "@grimlink/eleventy-plugin-lucide-icons";
+import prettier from "prettier";
+import Nunjucks from "nunjucks";
+import fs from "fs";
+import path from "path";
+
+export default async function(eleventyConfig) {
+  eleventyConfig.addWatchTarget("src/nunjucks/");
+  eleventyConfig.setInputDirectory("./docs/src");
+  eleventyConfig.addPassthroughCopy({"docs/src/assets": "assets"});
+  eleventyConfig.addPassthroughCopy({ "src/js": "assets/js" });
+  eleventyConfig.addPassthroughCopy({ "docs/src/llms.txt": "llms.txt" });
+  eleventyConfig.addPlugin(eleventyLucideicons);
+  eleventyConfig.addShortcode("fetchCode", function(filePath) {
+    const absolutePath = path.resolve(process.cwd(), filePath);
+    try {
+      return fs.readFileSync(absolutePath, 'utf8');
+    } catch (error) {
+      console.error(`[Eleventy FetchCode Error] Failed to read: ${absolutePath}`, error);
+      return `<!-- Error fetching code for ${filePath} -->`;
+    }
+  });
+
+  eleventyConfig.addNunjucksAsyncFilter("prettyHtml", async (code, callback) => {
+    try {
+      const formattedCode = await prettier.format(code, {
+        parser: "html",
+        printWidth: 1000,
+        singleAttributePerLine: false,
+        bracketSameLine: true,
+        htmlWhitespaceSensitivity: "ignore"
+      });
+      callback(null, formattedCode);
+    } catch (err) {
+      console.error("Error formatting HTML with Prettier:", err);
+      callback(err, code);
+    }
+  });
+  let nunjucksEnvironment = new Nunjucks.Environment(
+    new Nunjucks.FileSystemLoader([
+      "src/nunjucks",
+      "docs/src/_includes"
+    ]),
+    { autoescape: true }
+  );
+  eleventyConfig.setLibrary("njk", nunjucksEnvironment); 
+}

package/.gitattributes

@@ -0,0 +1 @@
+docs/src/assets/styles.css merge=theirs

package/.gitignore

@@ -0,0 +1,12 @@
+.*
+!.gitignore
+!.gitattributes
+!.eleventy.js
+
+_site/
+node_modules/
+packages/cli/dist/
+packages/css/dist/
+
+# Logs
+npm-debug.log*

package/AGENTS.md

@@ -0,0 +1,112 @@
+# Basecoat – Agent Guide
+
+## What is Basecoat?
+
+Basecoat is a vanilla JavaScript/HTML/CSS port of shadcn/ui components. It reuses shadcn/ui's design patterns and Tailwind CSS classes while maintaining semantic HTML, native browser elements, and full accessibility (ARIA attributes, proper hierarchies, keyboard navigation). The goal is to provide shadcn-quality components without React dependencies.
+
+## Quickstart
+
+- Install deps: `npm i`
+- Dev docs server: `npm run docs:dev`
+- Build CSS/JS: `npm run build`
+- Build static docs: `npm run docs:build`
+
+## What to edit (and what not)
+
+- Edit sources only:
+  - `src/css/basecoat.css` – All component CSS classes (Tailwind + custom)
+  - `src/js/*.js` – Individual component JS files (kebab-case, ESM) + `basecoat.js` (component registry)
+  - `src/nunjucks/*.njk` and `src/jinja/*.html.jinja` – Component template macros
+  - `docs/src/components/*.njk` – Component documentation pages with examples
+  - `docs/src/_includes/` – Layout templates, partials, and navigation
+- Do not edit build outputs:
+  - `packages/*/dist` – built CSS/JS bundles
+  - `_site/` – generated docs site
+
+## Project layout
+
+- Workspaces: root npm workspace with publishable packages in `packages/*`.
+- Packages:
+  - `packages/css` – built CSS and JS bundles under `dist/`.
+  - `packages/cli` – CLI; distributed assets live under `dist/`.
+- Docs site: `docs/src` (Eleventy); output goes to `_site/`.
+
+## Conventions
+
+- ESM everywhere (`import`/`export`).
+- Prettier defaults (2 spaces; single quotes per file preference).
+- Filenames for assets: kebab-case (e.g., `dropdown-menu.js`, `basecoat.cdn.css`).
+- JS naming: `camelCase` for vars/functions; `PascalCase` for DOM classes and exported component names when applicable.
+
+## Design Principles
+
+- **Minimal code**: Prefer native HTML elements and browser behavior over JavaScript abstractions
+- **Accessibility-first**: Semantic HTML, proper ARIA attributes, keyboard navigation
+- **CSS patterns**:
+  - Use `border` for lines/separators (not `background` on `<hr>`)
+  - Use `:is()` and `:has()` for compact selectors
+  - Use `isolation: isolate` to contain z-index stacking contexts
+  - Use `data-*` attributes for styling states, `aria-*` for accessibility semantics
+- **Component patterns**:
+  - Dialog variants use wrapper classes (e.g., `.command-dialog` wraps `.command`)
+  - JavaScript components register with `window.basecoat.register()`
+  - Emit custom events for user actions (e.g., `command:select`)
+  - Filter disabled options (`aria-disabled="true"`) from all interactions
+- **When NOT to create a component**:
+  - If it's just composition of existing elements (users can do it with standard HTML/Tailwind)
+  - If behavior is fully native (e.g., fieldset, legend)
+
+## Adding new components
+
+Before creating a component, ask:
+1. Does shadcn/ui have it? → Port it
+2. Is it pure composition? → Document pattern, no component
+3. Does it need JS behavior? → Create component
+4. Is it just CSS? → Add to basecoat.css, document usage
+
+Examples:
+- Field/Fieldset: CSS-only patterns (no JS component)
+- Empty/Item/Input Group: Pure composition (docs only)
+- Command/Select: JS behavior required (full component)
+
+## Common tasks
+
+- Update a component's CSS/JS: Edit `src/css/basecoat.css` and/or `src/js/*.js`.
+- Update a component template: Edit `src/nunjucks/*.njk` and/or `src/jinja/*.html.jinja`.
+- Add a new component: Create JS, CSS, templates, and docs page under `docs/src/components/*.njk`.
+- Update navigation: Edit files in `docs/src/_includes/partials/`.
+
+## Testing
+
+No automated testing configured. User validates manually via the docs site (`npm run docs:dev`).
+
+## Commits and PRs
+
+- Commits: concise, imperative (≤72 chars), optional scope.
+  - Example: `select: prevent change event on init`.
+- PRs: include description, linked issues (e.g., `Closes #123`), and before/after screenshots or code snippets for visual/behavioral changes.
+- Keep PRs focused; update docs examples when components or APIs change.
+
+## Environment and tooling
+
+- Node 18+ recommended.
+- Eleventy config: `.eleventy.js`.
+- Tailwind via `@tailwindcss/cli` v4.
+- Build uses Tailwind CLI and `terser`; both are provided via devDependencies.
+
+## Git workflow
+
+- `.gitattributes` configures merge strategies for generated files
+- `docs/src/assets/styles.css` auto-resolves to incoming changes (regenerated by Tailwind)
+- Always run `npm run build` before publishing packages
+
+## Publishing packages
+
+1. Bump version in root `package.json`
+2. Run `npm run build` to generate dist files
+3. Run `npm publish --workspaces` to publish both packages
+
+## Package references
+
+- `packages/css` usage and details: see `packages/css/README.md`.
+- `packages/cli` usage and details: see `packages/cli/README.md`.

package/CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing to Basecoat
+
+- Support development by sponsoring the author: https://github.com/sponsors/hunvreus
+- Submit pull requests (PRs) against the `development` branch, not `main`.
+- For branches, we have:
+  - `main` is our production and default branch. This is what we deploy to https://basecoatui.com and publish to https://www.npmjs.com/package/basecoat-css and https://www.npmjs.com/package/basecoat-cli.
+  - `development` is for staging. We will deploy it soon at https://dev.basecoatui.com.
+  - New features are worked in `feature/name-of-the-feature` branches.
+  - Issues are addressed in `issue/123-main-isse` branches.
+  - When ready, we PR against `development`, test it and then finally merge to `main`.
+- Keep changes focused: one feature or fix per PR.
+- Test locally before submitting.
+- Follow existing code style.
+
+Thanks for helping!

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ronan Berder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# Basecoat
+
+A collection of modern UI components built with Tailwind CSS that works with any web stack. Basecoat brings the magic of [shadcn/ui](https://ui.shadcn.com) to traditional web applications, no React required.
+
+![screenshot](docs/src/assets/images/screenshot.png)
+
+## Features
+
+- **Lightweight**: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.
+- **Easy to use**: add classes like `btn` or `input` and you're done.
+- **Framework-agnostic**: works with any backend or frontend stack.
+- **Accessible**: components follow accessibility best practices.
+- **Dark mode ready**: respects your Tailwind config.
+- **Extendable**: tweak styles with Tailwind or CSS variables.
+- **Themable**: fully compatible with shadcn/ui themes.
+- **Readable**: no class soup, just clean markup.
+- **Free and open source**: MIT licensed.
+
+## Documentation
+
+Visit [basecoatui.com](https://basecoatui.com).
+
+## Installation
+
+Visit [basecoatui.com/installation](https://basecoatui.com/installation)
+
+## License
+
+[MIT](/LICENSE.md)

package/ROADMAP.md

@@ -0,0 +1,20 @@
+## Now
+
+- [ ] Add Drawer component
+- [ ] Make utility components (e.g., Item) into proper components (i.e., .item)
+- [ ] Split CSS into components
+
+## Next
+
+- [ ] Make Command load dynamic items (e.g. search results from remote endpoint)
+- [ ] Make Combobox load dynamic items (e.g. search results from remote endpoint)
+- [ ] Add Toggle component
+- [ ] Add Carousel component
+- [ ] Add Sheet component
+- [ ] Add Separator component
+- [ ] Adding Menubar component
+
+## Later
+
+- [ ] Add Calendar component (https://flatpickr.js.org/)
+- [ ] Finish Chart component (https://www.chartjs.org/)

package/docs/css/custom.css

@@ -0,0 +1,92 @@
+/* HTMX */
+.htmx-indicator {
+  @apply invisible opacity-0 transition-discrete transition-all;
+}
+.htmx-indicator:not(.htmx-request) {
+  @apply hidden;
+}
+.htmx-request,
+.htmx-request.htmx-indicator {
+  @apply visible opacity-100;
+}
+
+.content {
+  > h2 {
+    @apply mt-12 lg:mt-20 mb-6 scroll-m-22 text-2xl font-semibold tracking-tight first:mt-0;
+  }
+  > h3 {
+    @apply mt-8 mb-6 scroll-m-22 text-xl font-semibold tracking-tight;
+  }
+  > h4 {
+    @apply my-6 scroll-m-22 font-semibold tracking-tight;
+  }
+  .prose {
+    @apply my-6;
+
+    a {
+      @apply font-medium underline underline-offset-4;
+    }
+    code:not(pre > code) {
+      @apply relative rounded-md bg-muted/50 px-[0.3rem] py-[0.2rem] font-mono text-sm;
+    }
+    blockquote {
+      @apply border-l-4 border-border pl-4;
+    }
+    ol {
+      @apply list-decimal ml-6;
+    }
+    ul {
+      @apply list-disc ml-6;
+    }
+    ol,
+    ul {
+      li {
+        @apply mt-2;
+      }
+    }
+    dl {
+      @apply border-b pb-3 my-6;
+      dt {
+        @apply border-t pt-3 mt-3 first:mt-0;
+      }
+      dd {
+        @apply mt-2 space-y-2;
+      }
+      dl {
+        @apply mt-4 border-b-0 pb-0 pl-8 my-0;
+      }
+    }
+    b,
+    strong {
+      @apply font-semibold;
+    }
+    > p,
+    > blockquote,
+    > ul,
+    > ol,
+    > dl,
+    > table,
+    > pre,
+    > p {
+      @apply my-6;
+    }
+    > *:first-child {
+      @apply !mt-0;
+    }
+    > *:last-child {
+      @apply !mb-0;
+    }
+  }
+  .step {
+    counter-increment: step;
+
+    &:before {
+      @apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+      @apply md:ml-[-50px] md:mt-[-4px];
+      content: counter(step);
+    }
+    > h3 {
+      @apply max-md:ml-10 min-h-8 flex items-center;
+    }
+  }
+}

package/docs/css/highlight.css

@@ -0,0 +1,151 @@
+/* 
+  Custom Highlight.js theme with CSS variables 
+  derived from github.min.css and github-dark.min.css
+*/
+
+:root {
+  /* Base */
+  --hljs-bg: #fff;
+  --hljs-color: #24292e;
+
+  /* Tokens */
+  --hljs-keyword: #d73a49;
+  --hljs-title: #6f42c1;
+  --hljs-literal: #005cc5;
+  --hljs-string: #032f62;
+  --hljs-symbol: #e36209;
+  --hljs-comment: #6a737d;
+  --hljs-tag: #22863a;
+  --hljs-section: #005cc5;
+  --hljs-bullet: #735c0f;
+
+  /* Diffs */
+  --hljs-addition-color: #22863a;
+  --hljs-addition-bg: #f0fff4;
+  --hljs-deletion-color: #b31d28;
+  --hljs-deletion-bg: #ffeef0;
+}
+
+html.dark {
+  /* Base */
+  --hljs-bg: #0d1117;
+  --hljs-color: #c9d1d9;
+
+  /* Tokens */
+  --hljs-keyword: #ff7b72;
+  --hljs-title: #d2a8ff;
+  --hljs-literal: #79c0ff;
+  --hljs-string: #a5d6ff;
+  --hljs-symbol: #ffa657;
+  --hljs-comment: #8b949e;
+  --hljs-tag: #7ee787;
+  --hljs-section: #1f6feb;
+  --hljs-bullet: #f2cc60;
+
+  /* Diffs */
+  --hljs-addition-color: #aff5b4;
+  --hljs-addition-bg: #033a16;
+  --hljs-deletion-color: #ffdcd7;
+  --hljs-deletion-bg: #67060c;
+}
+
+/* --- Base --- */
+pre code.hljs{
+    display:block;
+    overflow-x:auto;
+    padding:1em
+}
+code.hljs{
+    padding:3px 5px
+}
+
+/* --- Mapped styles --- */
+.hljs {
+  color: var(--hljs-color);
+  background: var(--hljs-bg);
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--hljs-keyword);
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--hljs-title);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: var(--hljs-literal);
+}
+
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: var(--hljs-string);
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--hljs-symbol);
+}
+
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: var(--hljs-comment);
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: var(--hljs-tag);
+}
+
+.hljs-subst {
+  color: var(--hljs-color);
+}
+
+.hljs-section {
+  color: var(--hljs-section);
+  font-weight: 700;
+}
+
+.hljs-bullet {
+  color: var(--hljs-bullet);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 700;
+}
+
+.hljs-addition {
+  color: var(--hljs-addition-color);
+  background-color: var(--hljs-addition-bg);
+}
+
+.hljs-deletion {
+  color: var(--hljs-deletion-color);
+  background-color: var(--hljs-deletion-bg);
+} 

package/docs/css/styles.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "../../src/css/basecoat.css";
+@import "./custom.css";
+@import "./highlight.css";
+
+@import "./themes/claude.css";
+@import "./themes/doom-64.css";
+@import "./themes/supabase.css";

package/docs/css/themes/claude.css

@@ -0,0 +1,95 @@
+.theme-claude {
+  &:root {
+    --background: oklch(0.98 0.01 95.10);
+    --foreground: oklch(0.34 0.03 95.72);
+    --card: oklch(0.98 0.01 95.10);
+    --card-foreground: oklch(0.19 0.00 106.59);
+    --popover: oklch(1.00 0 0);
+    --popover-foreground: oklch(0.27 0.02 98.94);
+    --primary: oklch(0.62 0.14 39.04);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.92 0.01 92.99);
+    --secondary-foreground: oklch(0.43 0.02 98.60);
+    --muted: oklch(0.93 0.02 90.24);
+    --muted-foreground: oklch(0.61 0.01 97.42);
+    --accent: oklch(0.92 0.01 92.99);
+    --accent-foreground: oklch(0.27 0.02 98.94);
+    --destructive: oklch(0.19 0.00 106.59);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.88 0.01 97.36);
+    --input: oklch(0.76 0.02 98.35);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.88 0.03 93.13);
+    --chart-4: oklch(0.88 0.04 298.18);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.97 0.01 98.88);
+    --sidebar-foreground: oklch(0.36 0.01 106.65);
+    --sidebar-primary: oklch(0.62 0.14 39.04);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.92 0.01 92.99);
+    --sidebar-accent-foreground: oklch(0.33 0 0);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
+
+  &.dark {
+    --background: oklch(0.27 0.00 106.64);
+    --foreground: oklch(0.81 0.01 93.01);
+    --card: oklch(0.27 0.00 106.64);
+    --card-foreground: oklch(0.98 0.01 95.10);
+    --popover: oklch(0.31 0.00 106.60);
+    --popover-foreground: oklch(0.92 0.00 106.48);
+    --primary: oklch(0.67 0.13 38.76);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.98 0.01 95.10);
+    --secondary-foreground: oklch(0.31 0.00 106.60);
+    --muted: oklch(0.22 0.00 106.71);
+    --muted-foreground: oklch(0.77 0.02 99.07);
+    --accent: oklch(0.21 0.01 95.42);
+    --accent-foreground: oklch(0.97 0.01 98.88);
+    --destructive: oklch(0.64 0.21 25.33);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.36 0.01 106.89);
+    --input: oklch(0.43 0.01 100.22);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.21 0.01 95.42);
+    --chart-4: oklch(0.31 0.05 289.32);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.24 0.00 67.71);
+    --sidebar-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-primary: oklch(0.33 0 0);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.17 0.00 106.62);
+    --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
+}