Compiling CSS for site

.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [hunvreus]

docs/css/styles.css

@@ -5,140 +5,4 @@
 
 @import "./themes/claude.css";
 @import "./themes/doom-64.css";
-@import "./themes/supabase.css";
-
-
-/* @theme inline {
-    --breakpoint-3xl: 1600px;
-    --breakpoint-4xl: 2000px;
-    --font-sans: var(--font-sans);
-    --font-mono: var(--font-mono);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-surface: var(--surface);
-    --color-surface-foreground: var(--surface-foreground);
-    --color-code: var(--code);
-    --color-code-foreground: var(--code-foreground);
-    --color-code-highlight: var(--code-highlight);
-    --color-code-number: var(--code-number);
-    --color-selection: var(--selection);
-    --color-selection-foreground: var(--selection-foreground);
-  }
-  
-  :root {
-    --radius: 0.625rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-    --surface: oklch(0.98 0 0);
-    --surface-foreground: var(--foreground);
-    --code: var(--surface);
-    --code-foreground: var(--surface-foreground);
-    --code-highlight: oklch(0.96 0 0);
-    --code-number: oklch(0.56 0 0);
-    --selection: oklch(0.145 0 0);
-    --selection-foreground: oklch(1 0 0);
-  }
-  
-  .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.269 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.439 0 0);
-    --surface: oklch(0.2 0 0);
-    --surface-foreground: oklch(0.708 0 0);
-    --code: var(--surface);
-    --code-foreground: var(--surface-foreground);
-    --code-highlight: oklch(0.27 0 0);
-    --code-number: oklch(0.72 0 0);
-    --selection: oklch(0.922 0 0);
-    --selection-foreground: oklch(0.205 0 0);
-  } */
+@import "./themes/supabase.css";

docs/src/_includes/partials/sidebar.njk

@@ -136,4 +136,4 @@
   footer=footer,
   content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
   menu=menu
-) }}
+) }}

docs/src/assets/styles.css

@@ -19,11 +19,9 @@
     --color-green-900: oklch(39.3% 0.095 152.535);
     --color-green-950: oklch(26.6% 0.065 152.934);
     --color-blue-50: oklch(97% 0.014 254.604);
-    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-blue-950: oklch(28.2% 0.091 267.935);
     --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -260,9 +258,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -528,12 +523,6 @@
   .max-h-\[200px\] {
     max-height: 200px;
   }
-  .max-h-\[260px\] {
-    max-height: 260px;
-  }
-  .max-h-\[320px\] {
-    max-height: 320px;
-  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
@@ -594,9 +583,6 @@
   .w-\[200px\] {
     width: 200px;
   }
-  .w-\[260px\] {
-    width: 260px;
-  }
   .w-\[271px\] {
     width: 271px;
   }
@@ -624,15 +610,9 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
-  .max-w-\[320px\] {
-    max-width: 320px;
-  }
   .max-w-\[450px\] {
     max-width: 450px;
   }
-  .max-w-\[720px\] {
-    max-width: 720px;
-  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -669,9 +649,6 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
-  .min-w-\[260px\] {
-    min-width: 260px;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -1319,10 +1296,6 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3725,7 +3698,7 @@
   }
 }
 @layer components {
-  :is(.form, .field) input[type='text'], :is(.form, .field) input[type='email'], :is(.form, .field) input[type='password'], :is(.form, .field) input[type='number'], :is(.form, .field) input[type='file'], :is(.form, .field) input[type='tel'], :is(.form, .field) input[type='url'], :is(.form, .field) input[type='search'], :is(.form, .field) input[type='date'], :is(.form, .field) input[type='datetime-local'], :is(.form, .field) input[type='month'], :is(.form, .field) input[type='week'], :is(.form, .field) input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='file'], .input[type='tel'], .input[type='url'], .input[type='search'], .input[type='date'], .input[type='datetime-local'], .input[type='month'], .input[type='week'], .input[type='time'] {
+  :is(.form, .field) input[type='text']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)), :is(.form, .field) input[type='email'], :is(.form, .field) input[type='password'], :is(.form, .field) input[type='number'], :is(.form, .field) input[type='file'], :is(.form, .field) input[type='tel'], :is(.form, .field) input[type='url'], :is(.form, .field) input[type='search']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)), :is(.form, .field) input[type='date'], :is(.form, .field) input[type='datetime-local'], :is(.form, .field) input[type='month'], :is(.form, .field) input[type='week'], :is(.form, .field) input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='file'], .input[type='tel'], .input[type='url'], .input[type='search'], .input[type='date'], .input[type='datetime-local'], .input[type='month'], .input[type='week'], .input[type='time'] {
     display: flex;
     height: calc(var(--spacing) * 9);
     width: 100%;

docs/src/components/button-group.njk

@@ -76,7 +76,7 @@ toc:
         Trash
       </div>
     {% endcall %}
-</div>
+  </div>
 {% endset %}
 
 {{ code_preview("button-group-default", code_default | prettyHtml) }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",

packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",

src/css/basecoat.css

@@ -742,14 +742,14 @@
 
 /* Input */
 @layer components {
-  :is(.form, .field) input[type='text'],
+  :is(.form, .field) input[type='text']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)),
   :is(.form, .field) input[type='email'],
   :is(.form, .field) input[type='password'],
   :is(.form, .field) input[type='number'],
   :is(.form, .field) input[type='file'],
   :is(.form, .field) input[type='tel'],
   :is(.form, .field) input[type='url'],
-  :is(.form, .field) input[type='search'],
+  :is(.form, .field) input[type='search']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)),
   :is(.form, .field) input[type='date'],
   :is(.form, .field) input[type='datetime-local'],
   :is(.form, .field) input[type='month'],
@@ -1299,4 +1299,4 @@
       }
     }
   }
-}
+}

src/jinja/command.html.jinja

@@ -164,7 +164,7 @@
         {% endif %}
       >
         <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
-        {{ render_command_items(item.items, item_id) if item.items }}
+        {{ render_command_items(item['items'], item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
@@ -183,7 +183,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          {{ item.content | safe if item.content else (item.label | safe) }}
+          {{ item.label | safe }}
         </a>
       {% else %}
         <div
@@ -198,7 +198,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          {{ item.content | safe if item.content else (item.label | safe) }}
+          {{ item.label | safe }}
         </div>
       {% endif %}
     {% endif %}

src/jinja/dropdown-menu.html.jinja

@@ -86,7 +86,7 @@
         {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_dropdown_items(item.items, item_id) if item.items }}
+        {{ render_dropdown_items(item['items'], item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
@@ -102,6 +102,7 @@
             {% endfor %}
           {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </a>
       {% else %}
@@ -114,9 +115,10 @@
             {% endfor %}
           {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </div>
       {% endif %}
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

src/jinja/select.html.jinja

@@ -33,7 +33,7 @@
 {% if items %}
   {% for item in items %}
     {% if item.type == "group" %}
-      {% for sub_item in item.items %}
+      {% for sub_item in item['items'] %}
         {% if not first_option.item %}
           {% set first_option.item = sub_item %}
         {% endif %}
@@ -153,7 +153,7 @@
         {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_select_items(item.items, selected, item_id) if item.items }}
+        {{ render_select_items(item['items'], selected, item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
@@ -173,4 +173,4 @@
       </div>
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

src/nunjucks/command.njk

@@ -183,7 +183,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          {{ item.content | safe if item.content else (item.label | safe) }}
+          {{ item.label | safe }}
         </a>
       {% else %}
         <div
@@ -198,7 +198,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          {{ item.content | safe if item.content else (item.label | safe) }}
+          {{ item.label | safe }}
         </div>
       {% endif %}
     {% endif %}

src/nunjucks/dropdown-menu.njk

@@ -102,6 +102,7 @@
             {% endfor %}
           {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </a>
       {% else %}
@@ -114,9 +115,10 @@
             {% endfor %}
           {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </div>
       {% endif %}
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}