bareframe 0.1.0 → 0.1.1

package/dist/manifest.json

@@ -1,114 +1,77 @@
 {
-  "generatedAt": "2026-02-25T18:07:48.231Z",
-  "componentCount": 110,
+  "generatedAt": "2026-02-25T23:39:08.504Z",
+  "componentCount": 73,
   "components": [
     "accordion",
     "action-list",
-    "alert",
     "anchor",
     "autocomplete",
     "avatar",
-    "badge",
-    "banner",
-    "bar-chart",
     "bottom-navigation",
-    "bottom-sheet",
     "breadcrumb",
     "button",
-    "button-group",
     "calendar",
     "canvas",
     "card",
     "carousel",
     "chart",
     "checkbox",
-    "chip",
     "code-block",
-    "color-picker",
     "combobox",
     "command-palette",
-    "context-menu",
     "countdown",
     "data-grid",
     "date-picker",
     "date-range-picker",
     "dialog",
     "divider",
-    "donut-chart",
     "drawer",
     "dropdown",
+    "edge",
     "empty-state",
     "error-summary",
-    "expanded-panel",
     "fab",
     "file-upload",
     "filter-bar",
-    "footer",
     "form-field",
-    "gantt-chart",
-    "gauge",
-    "graph",
     "grid",
-    "header",
-    "heatmap",
     "hero",
     "icon",
     "image",
     "input",
     "key-value-list",
-    "line-chart",
     "link",
     "list",
-    "list-item",
     "loading-indicator",
     "map",
     "menu",
-    "menu-item",
     "message",
     "metric-card",
     "modal",
-    "multi-select",
     "nav",
-    "notification",
     "number-field",
     "otp-input",
     "pagination",
-    "pie-chart",
-    "popover",
-    "progress-bar",
-    "progress-circle",
+    "progress",
     "quick-actions",
     "radio",
-    "radio-group",
-    "range-slider",
-    "rating",
+    "range",
     "search",
     "segmented-control",
     "select",
-    "sheet",
     "skeleton",
-    "slider",
-    "snackbar",
-    "sparkline",
     "split-button",
     "splitter",
     "stack",
-    "stepper",
-    "switch",
     "tab",
-    "tab-group",
     "table",
     "tag",
     "textarea",
-    "textfield",
     "timeline",
     "toast",
     "toggle",
     "toolbar",
-    "tooltip",
     "tree-view",
-    "treemap",
-    "upload-dropzone",
     "video-player",
     "virtual-list",
     "wizard"

package/dist/themes/aurora.css

@@ -0,0 +1,47 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='aurora'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Avenir Next', 'Segoe UI', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 14px;
+	--bf-theme-space-2: 0.58rem;
+	--bf-theme-space-3: 0.95rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.96;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #7c3aed;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #fdf8ff;
+	--bf-theme-surface-2: #f4f4ff;
+	--bf-theme-text-1: #2d1b44;
+	--bf-theme-text-2: #5c4b7a;
+	--bf-theme-border-1: #d5c9eb;
+
+	--bf-theme-button-primary-bg: #7c3aed;
+	--bf-theme-button-primary-color: #ffffff;
+	--bf-theme-button-primary-border-color: #6d28d9;
+	--bf-theme-button-secondary-bg: #ffffff;
+	--bf-theme-button-secondary-color: #3f2a5f;
+	--bf-theme-button-secondary-border-color: #b9a8dd;
+
+	--bf-theme-accordion-trigger-bg: #f1eaff;
+	--bf-theme-accordion-trigger-hover-bg: #e8ddff;
+	--bf-theme-accordion-trigger-open-bg: #ddd0fb;
+	--bf-theme-accordion-chevron-color: #5b3d93;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.5;
+	--bf-theme-typography-display-size: 2.28rem;
+	--bf-theme-typography-h1-size: 1.88rem;
+	--bf-theme-typography-h2-size: 1.48rem;
+	--bf-theme-typography-h3-size: 1.14rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}

package/dist/themes/dark.css

@@ -1,7 +1,7 @@
+@import './layout.css';
+
 :root,
 [data-bf-theme='dark'] {
-	color-scheme: dark;
-
 	--bf-theme-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
 	--bf-theme-border-width: 1px;
 	--bf-theme-border-style: solid;
@@ -37,6 +37,16 @@
 	--bf-theme-accordion-trigger-color: var(--bf-theme-text-1);
 	--bf-theme-accordion-panel-bg: var(--bf-theme-surface-1);
 	--bf-theme-accordion-chevron-color: var(--bf-theme-text-2);
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.45;
+	--bf-theme-typography-display-size: 2.25rem;
+	--bf-theme-typography-h1-size: 1.75rem;
+	--bf-theme-typography-h2-size: 1.375rem;
+	--bf-theme-typography-h3-size: 1.125rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
 	/* Bareframe component defaults */
 	--bf-theme-wizard-bg: var(--bf-theme-surface-1);
 	--bf-theme-wizard-color: var(--bf-theme-text-1);

package/dist/themes/desert.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='desert'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 10px;
+	--bf-theme-space-2: 0.55rem;
+	--bf-theme-space-3: 0.9rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.95;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #b45309;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #fff8ec;
+	--bf-theme-surface-2: #f8ecd8;
+	--bf-theme-text-1: #4a2d16;
+	--bf-theme-text-2: #80583d;
+	--bf-theme-border-1: #d8b78f;
+
+	--bf-theme-button-primary-bg: #c26b2f;
+	--bf-theme-button-primary-color: #fff7ef;
+	--bf-theme-button-primary-border-color: #9a4f1d;
+	--bf-theme-button-secondary-bg: #fffaf1;
+	--bf-theme-button-secondary-color: #5d3a21;
+	--bf-theme-button-secondary-border-color: #c9a278;
+
+	--bf-theme-accordion-trigger-bg: #f4e0c1;
+	--bf-theme-accordion-trigger-hover-bg: #edd1a7;
+	--bf-theme-accordion-trigger-open-bg: #e3be8a;
+	--bf-theme-accordion-chevron-color: #7c4a22;
+}

package/dist/themes/future.css

@@ -0,0 +1,47 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='future'] {
+	color-scheme: dark;
+
+	--bf-theme-font-family: 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 12px;
+	--bf-theme-space-2: 0.6rem;
+	--bf-theme-space-3: 1rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.97;
+	--bf-theme-active-translate-y: 1px;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #22d3ee;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #070b14;
+	--bf-theme-surface-2: #0d1322;
+	--bf-theme-text-1: #e8f3ff;
+	--bf-theme-text-2: #8aa3c2;
+	--bf-theme-border-1: #26364d;
+
+	--bf-theme-button-primary-bg: #00bcd4;
+	--bf-theme-button-primary-color: #03131a;
+	--bf-theme-button-primary-border-color: #06b6d4;
+	--bf-theme-button-secondary-bg: #0d1322;
+	--bf-theme-button-secondary-color: #d5e6ff;
+	--bf-theme-button-secondary-border-color: #2f4565;
+
+	--bf-theme-accordion-trigger-bg: #0f1a2d;
+	--bf-theme-accordion-trigger-hover-bg: #14233c;
+	--bf-theme-accordion-trigger-open-bg: #1a2c49;
+	--bf-theme-accordion-chevron-color: #8ddfff;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.5;
+	--bf-theme-typography-display-size: 2.3rem;
+	--bf-theme-typography-h1-size: 1.9rem;
+	--bf-theme-typography-h2-size: 1.5rem;
+	--bf-theme-typography-h3-size: 1.15rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}

package/dist/themes/layout.css

@@ -0,0 +1,191 @@
+[row] {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	gap: var(--bf-theme-space-2, 0.55rem);
+}
+
+[row='left'] { justify-content: flex-start; }
+[row='center'] { justify-content: center; }
+[row='right'] { justify-content: flex-end; }
+
+[stack] {
+	display: grid;
+	gap: var(--bf-theme-space-2, 0.55rem);
+}
+
+[stack='xs'] { gap: calc(var(--bf-theme-space-2, 0.55rem) * 0.5); }
+[stack='sm'] { gap: calc(var(--bf-theme-space-2, 0.55rem) * 0.75); }
+[stack='md'] { gap: var(--bf-theme-space-2, 0.55rem); }
+[stack='lg'] { gap: calc(var(--bf-theme-space-2, 0.55rem) * 1.5); }
+[stack='xl'] { gap: calc(var(--bf-theme-space-2, 0.55rem) * 2); }
+
+[stack][inline] {
+	display: inline-grid;
+}
+
+[col] {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	min-width: 0;
+	flex: 1 1 0;
+	gap: var(--bf-theme-space-2, 0.55rem);
+}
+
+[col='top'] { justify-content: flex-start; }
+[col='center'] { justify-content: center; }
+[col='bottom'] { justify-content: flex-end; }
+
+[col='1'] { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
+[col='2'] { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
+[col='3'] { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
+[col='4'] { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
+[col='5'] { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
+[col='6'] { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
+[col='7'] { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
+[col='8'] { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
+[col='9'] { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
+[col='10'] { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
+[col='11'] { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
+[col='12'] { flex: 0 0 100%; max-width: 100%; }
+
+[typography],
+[display],
+[h1],
+[h2],
+[h3],
+[body],
+[caption],
+[label],
+[code] {
+	color: var(--bf-theme-typography-color, var(--bf-theme-text-1, #111827));
+	font-family: var(--bf-theme-font-family, inherit);
+	line-height: var(--bf-theme-typography-line-height, 1.45);
+	letter-spacing: var(--bf-theme-typography-letter-spacing, 0);
+}
+
+[typography='display'],
+[display] {
+	font-size: var(--bf-theme-typography-display-size, 2.25rem);
+	font-weight: var(--bf-theme-typography-display-weight, 700);
+	line-height: 1.2;
+}
+
+[typography='h1'],
+[h1] {
+	font-size: var(--bf-theme-typography-h1-size, 1.75rem);
+	font-weight: var(--bf-theme-typography-h1-weight, 700);
+	line-height: 1.25;
+}
+
+[typography='h2'],
+[h2] {
+	font-size: var(--bf-theme-typography-h2-size, 1.375rem);
+	font-weight: var(--bf-theme-typography-h2-weight, 700);
+	line-height: 1.3;
+}
+
+[typography='h3'],
+[h3] {
+	font-size: var(--bf-theme-typography-h3-size, 1.125rem);
+	font-weight: var(--bf-theme-typography-h3-weight, 600);
+	line-height: 1.35;
+}
+
+[typography='body'],
+[body] {
+	font-size: var(--bf-theme-typography-body-size, 1rem);
+	font-weight: var(--bf-theme-typography-body-weight, 400);
+}
+
+[typography='caption'],
+[caption] {
+	font-size: var(--bf-theme-typography-caption-size, 0.875rem);
+	font-weight: var(--bf-theme-typography-caption-weight, 400);
+	color: var(--bf-theme-text-2, #4b5563);
+}
+
+[typography='label'],
+[label] {
+	font-size: var(--bf-theme-typography-label-size, 0.875rem);
+	font-weight: var(--bf-theme-typography-label-weight, 600);
+}
+
+[typography='code'],
+[code] {
+	font-size: var(--bf-theme-typography-code-size, 0.9rem);
+	font-weight: var(--bf-theme-typography-code-weight, 500);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+	background: var(--bf-theme-surface-2, #f3f4f6);
+	padding: 0.1rem 0.3rem;
+	border-radius: 4px;
+}
+
+[sticky] {
+	position: sticky;
+	z-index: var(--bf-theme-z-sticky, 100);
+}
+
+[fixed] {
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: var(--bf-theme-z-fixed, 200);
+}
+
+[header][sticky],
+[header][fixed] {
+	top: 0;
+	bottom: auto;
+}
+
+[footer][sticky],
+[footer][fixed] {
+	bottom: 0;
+	top: auto;
+}
+
+[table] {
+	display: block;
+	width: 100%;
+	overflow-x: auto;
+	border: 1px solid var(--bf-theme-border-1, #d1d5db);
+	border-radius: var(--bf-theme-radius-md, 8px);
+	background: var(--bf-theme-surface-1, #ffffff);
+}
+
+[table][dense] [th],
+[table][dense] [td] {
+	padding: 0.38rem 0.5rem;
+}
+
+[thead] { display: table-header-group; }
+[tbody] { display: table-row-group; }
+[tr] { display: table-row; }
+
+[th],
+[td] {
+	display: table-cell;
+	padding: 0.52rem 0.7rem;
+	vertical-align: middle;
+	text-align: left;
+	border-bottom: 1px solid var(--bf-theme-border-1, #d1d5db);
+}
+
+[th] {
+	font-weight: 700;
+	color: var(--bf-theme-text-1, #111827);
+	background: var(--bf-theme-surface-2, #f3f4f6);
+}
+
+[tbody] [tr]:nth-child(even) [td] {
+	background: color-mix(in srgb, var(--bf-theme-surface-2, #f3f4f6) 50%, transparent);
+}
+
+[tbody] [tr]:last-child [td] {
+	border-bottom: 0;
+}

package/dist/themes/light.css

@@ -1,3 +1,5 @@
+@import './layout.css';
+
 :root,
 [data-bf-theme='light'] {
 	color-scheme: light;
@@ -37,6 +39,16 @@
 	--bf-theme-accordion-trigger-color: var(--bf-theme-text-1);
 	--bf-theme-accordion-panel-bg: var(--bf-theme-surface-1);
 	--bf-theme-accordion-chevron-color: var(--bf-theme-text-2);
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.45;
+	--bf-theme-typography-display-size: 2.25rem;
+	--bf-theme-typography-h1-size: 1.75rem;
+	--bf-theme-typography-h2-size: 1.375rem;
+	--bf-theme-typography-h3-size: 1.125rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
 	/* Bareframe component defaults */
 	--bf-theme-wizard-bg: var(--bf-theme-surface-1);
 	--bf-theme-wizard-color: var(--bf-theme-text-1);

package/dist/themes/matrix.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='matrix'] {
+	color-scheme: dark;
+
+	--bf-theme-font-family: 'Courier New', 'Lucida Console', monospace;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 4px;
+	--bf-theme-space-2: 0.5rem;
+	--bf-theme-space-3: 0.85rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.98;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #22c55e;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #070c09;
+	--bf-theme-surface-2: #0e1712;
+	--bf-theme-text-1: #90f7b8;
+	--bf-theme-text-2: #56c27f;
+	--bf-theme-border-1: #1f6b3a;
+
+	--bf-theme-button-primary-bg: #2adb72;
+	--bf-theme-button-primary-color: #04120b;
+	--bf-theme-button-primary-border-color: #21b95f;
+	--bf-theme-button-secondary-bg: #0e1712;
+	--bf-theme-button-secondary-color: #90f7b8;
+	--bf-theme-button-secondary-border-color: #1f6b3a;
+
+	--bf-theme-accordion-trigger-bg: #102117;
+	--bf-theme-accordion-trigger-hover-bg: #153121;
+	--bf-theme-accordion-trigger-open-bg: #1b402a;
+	--bf-theme-accordion-chevron-color: #6df2a1;
+}

package/dist/themes/modern.css

@@ -0,0 +1,64 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='modern'] {
+	color-scheme: light dark;
+
+	--bf-theme-font-family: 'Inter', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 14px;
+	--bf-theme-space-2: 0.6rem;
+	--bf-theme-space-3: 1rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.97;
+	--bf-theme-active-translate-y: 1px;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #60a5fa;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #ffffff;
+	--bf-theme-surface-2: #f3f6fb;
+	--bf-theme-text-1: #0b1220;
+	--bf-theme-text-2: #475569;
+	--bf-theme-border-1: #cbd5e1;
+
+	--bf-theme-button-primary-bg: #0ea5e9;
+	--bf-theme-button-primary-color: #f8fafc;
+	--bf-theme-button-primary-border-color: #0284c7;
+	--bf-theme-button-secondary-bg: #ffffff;
+	--bf-theme-button-secondary-color: #0f172a;
+	--bf-theme-button-secondary-border-color: #94a3b8;
+
+	--bf-theme-accordion-trigger-bg: #eef2ff;
+	--bf-theme-accordion-trigger-hover-bg: #e0e7ff;
+	--bf-theme-accordion-trigger-open-bg: #dbeafe;
+	--bf-theme-accordion-chevron-color: #334155;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.5;
+	--bf-theme-typography-display-size: 2.35rem;
+	--bf-theme-typography-h1-size: 1.85rem;
+	--bf-theme-typography-h2-size: 1.45rem;
+	--bf-theme-typography-h3-size: 1.15rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-bf-theme]),
+	[data-bf-theme='modern'] {
+		--bf-theme-surface-1: #0b1220;
+		--bf-theme-surface-2: #111827;
+		--bf-theme-text-1: #e2e8f0;
+		--bf-theme-text-2: #94a3b8;
+		--bf-theme-border-1: #334155;
+		--bf-theme-button-secondary-bg: #0f172a;
+		--bf-theme-button-secondary-color: #cbd5e1;
+		--bf-theme-button-secondary-border-color: #334155;
+		--bf-theme-accordion-trigger-bg: #172033;
+		--bf-theme-accordion-trigger-hover-bg: #1f2b44;
+		--bf-theme-accordion-trigger-open-bg: #1e293b;
+	}
+}

package/dist/themes/nature.css

@@ -0,0 +1,47 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='nature'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Trebuchet MS', 'Gill Sans', Arial, sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 10px;
+	--bf-theme-space-2: 0.55rem;
+	--bf-theme-space-3: 0.9rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.96;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #2f855a;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #f6fbf3;
+	--bf-theme-surface-2: #e9f3e4;
+	--bf-theme-text-1: #1f3a2a;
+	--bf-theme-text-2: #4c6b58;
+	--bf-theme-border-1: #b7d1bf;
+
+	--bf-theme-button-primary-bg: #2f855a;
+	--bf-theme-button-primary-color: #f7fff9;
+	--bf-theme-button-primary-border-color: #276749;
+	--bf-theme-button-secondary-bg: #f6fbf3;
+	--bf-theme-button-secondary-color: #1f3a2a;
+	--bf-theme-button-secondary-border-color: #94b8a0;
+
+	--bf-theme-accordion-trigger-bg: #e6f1e2;
+	--bf-theme-accordion-trigger-hover-bg: #d8e9d3;
+	--bf-theme-accordion-trigger-open-bg: #c9dfc4;
+	--bf-theme-accordion-chevron-color: #2f5d42;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.5;
+	--bf-theme-typography-display-size: 2.2rem;
+	--bf-theme-typography-h1-size: 1.8rem;
+	--bf-theme-typography-h2-size: 1.4rem;
+	--bf-theme-typography-h3-size: 1.12rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}

package/dist/themes/nebula.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='nebula'] {
+	color-scheme: dark;
+
+	--bf-theme-font-family: 'Avenir Next', 'Segoe UI', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 14px;
+	--bf-theme-space-2: 0.58rem;
+	--bf-theme-space-3: 0.95rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.97;
+	--bf-theme-active-translate-y: 1px;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #22d3ee;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #10131f;
+	--bf-theme-surface-2: #171b2d;
+	--bf-theme-text-1: #e5ecff;
+	--bf-theme-text-2: #a8b6de;
+	--bf-theme-border-1: #2f3b63;
+
+	--bf-theme-button-primary-bg: #00c2ff;
+	--bf-theme-button-primary-color: #03131d;
+	--bf-theme-button-primary-border-color: #0ea5e9;
+	--bf-theme-button-secondary-bg: #171b2d;
+	--bf-theme-button-secondary-color: #dbe8ff;
+	--bf-theme-button-secondary-border-color: #41507f;
+
+	--bf-theme-accordion-trigger-bg: #1b2340;
+	--bf-theme-accordion-trigger-hover-bg: #22305a;
+	--bf-theme-accordion-trigger-open-bg: #2a3a6d;
+	--bf-theme-accordion-chevron-color: #88e7ff;
+}