hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0.2 release

Browse Source
This commit is contained in:
Ronan Berder
2026-07-06 15:21:53 +07:00
parent f49eaa8513
commit 6953a4adbe
15 changed files with 97 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+10
View File
@@ -2,6 +2,16 @@
## Unreleased
## [1.0.2] - 2026-07-06
### Added
- Added `data-size="sm"` support to Alert Dialog for the compact upstream size.
### Changed
- Removed global font smoothing from Basecoat's package CSS so `antialiased` remains an application-level choice.
## [1.0.1] - 2026-06-28
### Added
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "basecoat-css",
"version": "1.0.1",
"version": "1.0.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "basecoat-css",
"version": "1.0.1",
"version": "1.0.2",
"license": "MIT",
"devDependencies": {
"@tailwindcss/cli": "^4.1.17",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat-css",
"version": "1.0.1",
"version": "1.0.2",
"description": "Tailwind CSS for Basecoat components",
"author": {
"name": "hunvreus",
site/astro.config.mjs
+1
View File
@@ -31,6 +31,7 @@ export default defineConfig({
style: 'vega',
css: false,
bodyAttrs: {
class: 'antialiased',
'hx-boost': 'true',
'hx-target': '#content',
'hx-select': '#content',
site/src/docs/components/alert-dialog.mdx
+22 -1
View File
@@ -74,7 +74,7 @@ Alert Dialog uses a native `<dialog class="alert-dialog">` element. Omit the clo
<dd>Trigger button. Basecoat uses the native <code>HTMLDialogElement.showModal()</code> method.</dd>
<dt><code>&lt;dialog class="alert-dialog" id="&#123; DIALOG_ID &#125;"&gt;</code></dt>
<dd>
Native modal dialog. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present.
Native modal dialog. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present. Use <code>data-size="sm"</code> for the compact upstream size.
<dl>
<dt><code>&lt;div&gt;</code></dt>
<dd>
@@ -164,6 +164,27 @@ Use a destructive action button when the alert dialog confirms a destructive ope
</dialog>
</Preview>
### Small
Use `data-size="sm"` for a compact alert dialog. The small size keeps media, title, and description stacked and centers the action buttons in a two-column footer.
<Preview>
<button type="button" onclick="document.getElementById('alert-dialog-small').showModal()" class="btn" data-variant="outline">Invite Members</button>
<dialog id="alert-dialog-small" class="alert-dialog" data-size="sm" aria-labelledby="alert-dialog-small-title" aria-describedby="alert-dialog-small-description">
<div>
<header>
<figure><svg class="lucide lucide-users" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg></figure>
<h2 id="alert-dialog-small-title">Invite team members?</h2>
<p id="alert-dialog-small-description">Send an invitation link to your selected teammates.</p>
</header>
<footer>
<button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
<button class="btn" onclick="this.closest('dialog').close()">Invite</button>
</footer>
</div>
</dialog>
</Preview>
### RTL
Alert Dialog supports document direction. Set `dir="rtl"` on the dialog or a parent element.
src/css/base/base.css
+1 -1
View File
@@ -131,6 +131,6 @@
@apply scroll-smooth;
}
body {
@apply bg-background text-foreground overscroll-none antialiased;
@apply bg-background text-foreground overscroll-none;
}
}
src/css/components/dialog.css
+20
View File
@@ -77,5 +77,25 @@
> * > footer {
@apply flex flex-col-reverse sm:flex-row sm:justify-end;
}
&:is([data-size='sm']) > * > header,
> [data-size='sm'] > header {
@apply sm:place-items-center sm:text-center;
}
&:is([data-size='sm']) > * > header:has(> figure),
> [data-size='sm'] > header:has(> figure) {
@apply sm:grid-rows-[auto_auto_1fr];
}
&:is([data-size='sm']) > * > header:has(> figure) > :is(h2, p),
> [data-size='sm'] > header:has(> figure) > :is(h2, p) {
@apply sm:col-start-auto;
}
&:is([data-size='sm']) > * > footer,
> [data-size='sm'] > footer {
@apply grid grid-cols-2 sm:grid sm:grid-cols-2;
}
}
}
src/css/styles/luma.css
+5
View File
@@ -540,6 +540,11 @@
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
}
src/css/styles/lyra.css
+5
View File
@@ -520,6 +520,11 @@
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-none p-4 ring-1 duration-100 sm:max-w-sm;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
}
src/css/styles/maia.css
+5
View File
@@ -532,6 +532,11 @@
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-xs gap-6 rounded-4xl p-6 ring-1 duration-100 sm:max-w-md;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
}
src/css/styles/mira.css
+5
View File
@@ -536,6 +536,11 @@
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-3 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply max-w-64 sm:max-w-64;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
}
src/css/styles/nova.css
+5
View File
@@ -528,6 +528,11 @@
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
}
src/css/styles/rhea.css
+5
View File
@@ -540,6 +540,11 @@
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-3xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-3xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
}
src/css/styles/sera.css
+5
View File
@@ -544,6 +544,11 @@
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-none p-6 shadow-md ring-1 duration-100 sm:max-w-md;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-none p-6 text-sm shadow-md ring-1 duration-100 sm:max-w-md;
}
src/css/styles/vega.css
+5
View File
@@ -528,6 +528,11 @@
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
}