@bubble-design-system/ui 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +5 -5
  2. package/dist/styles.css +3 -7
  3. package/dist/tokens.css +3 -7
  4. package/package.json +8 -8
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  > Bubble — a **neutral, composable, token-driven UI foundation** built on [Base UI](https://base-ui.com/), shipped as a single plain CSS file.
4
4
 
5
- Bubble's signature is the **soft tone with a teal brand**: a soft-gray page (`#ECEDEF`) on which **white pill-shaped surfaces float** via layered shadows + an inset white top-highlight, accented by teal (`#00CEC8`) and a pink→magenta→violet **gradient blob** mark. The canonical identity is `tone=soft · brand=teal · gray=slate · radius=default · density=default · font=geist · light`.
5
+ Bubble's signature is the **soft tone with a teal brand**: a soft-gray page (`#ECEDEF`) on which **white pill-shaped surfaces float** via layered shadows + an inset white top-highlight, accented by teal (`#00CEC8`) and a pink→magenta→violet **gradient blob** mark. The canonical identity is `tone=soft · brand=teal · gray=slate · radius=default · density=default · font=roboto · light`.
6
6
 
7
7
  Every visual decision — tone, color, brand, gray family, radius, density, typography, motion — is driven by CSS custom properties. Toggle a single `data-*` attribute on `<html>` and the whole app re-skins live, with no rebuild.
8
8
 
@@ -14,12 +14,12 @@ Every visual decision — tone, color, brand, gray family, radius, density, typo
14
14
  data-gray="slate"
15
15
  data-radius="default"
16
16
  data-density="default"
17
- data-font="geist"
17
+ data-font="roboto"
18
18
  >
19
19
  ```
20
20
 
21
21
  - **21 components** — Button, Input, Textarea, Checkbox, Radio, Switch, Select, Badge, Avatar, Divider, Modal, Toast, Tooltip, Tabs, Alert, DropdownMenu, Skeleton, Card, StatusPill, Segmented (plus Container + Grid layout primitives). Each wraps an [`@base-ui/react`](https://base-ui.com/) primitive where one exists — accessible by construction, styled with a single shipped stylesheet.
22
- - **A 3-layer, multi-theme token system** spanning color (light/dark · 3 gray families · 6 brand palettes including teal), **3 tones** (vivid · pastel · soft — soft is the signature look), radius (4 scales), density (3 scales), typography (3 font pairs), layered shadows, and motion.
22
+ - **A 3-layer, multi-theme token system** spanning color (light/dark · 3 gray families · 6 brand palettes including teal), **3 tones** (vivid · pastel · soft — soft is the signature look), radius (4 scales), density (3 scales), typography (2 font pairs), layered shadows, and motion.
23
23
  - **Live theme switching** via seven `data-*` attributes on any ancestor. Every CSS rule reads `var(--…)` at use-site, so swapping `data-tone="vivid"` for `data-tone="soft"` reflows the UI without re-rendering or rebuilding.
24
24
  - **No build dependency in consumer apps.** One CSS import. No PostCSS, no Tailwind, no preprocessor required.
25
25
  - **Dual ESM + CJS** with per-format `.d.ts` / `.d.cts`. `sideEffects` is scoped to the CSS so unused components tree-shake.
@@ -131,7 +131,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
131
131
  data-gray="slate"
132
132
  data-radius="default"
133
133
  data-density="default"
134
- data-font="geist"
134
+ data-font="roboto"
135
135
  >
136
136
  <body>{children}</body>
137
137
  </html>
@@ -177,7 +177,7 @@ Seven `data-*` attributes on any ancestor element (typically `<html>` or `<body>
177
177
  | `data-brand` | `blue` · `violet` · `emerald` · `orange` · `mono` · `teal` | `teal` | The brand palette (`--brand-50` through `--brand-950`). |
178
178
  | `data-radius` | `default` · `sharp` · `soft` · `pill` | `default` | The corner radius scale (`--radius-xs` through `--radius-2xl`). |
179
179
  | `data-density` | `default` · `compact` · `comfortable` | `default` | Control heights and padding (`--control-h-*`, `--control-px-*`). |
180
- | `data-font` | `geist` · `plex` · `system` | `geist` | The font pair (`--font-sans` / `--font-mono`). |
180
+ | `data-font` | `roboto` · `system` | `roboto` | The font pair (`--font-sans` / `--font-mono`). |
181
181
 
182
182
  Toggle them with any approach you like — `setAttribute`, React state, a media-query listener, a server cookie:
183
183
 
package/dist/styles.css CHANGED
@@ -604,13 +604,9 @@
604
604
 
605
605
  /* font pairs — selected via [data-font] */
606
606
  :root,
607
- [data-font="geist"] {
608
- --font-sans: 'Geist', 'Anuphan', ui-sans-serif, system-ui, -apple-system, sans-serif;
609
- --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
610
- }
611
- [data-font="plex"] {
612
- --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Thai Looped', ui-sans-serif, system-ui, sans-serif;
613
- --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
607
+ [data-font="roboto"] {
608
+ --font-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
609
+ --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
614
610
  }
615
611
  [data-font="system"] {
616
612
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
package/dist/tokens.css CHANGED
@@ -603,13 +603,9 @@
603
603
 
604
604
  /* font pairs — selected via [data-font] */
605
605
  :root,
606
- [data-font="geist"] {
607
- --font-sans: 'Geist', 'Anuphan', ui-sans-serif, system-ui, -apple-system, sans-serif;
608
- --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
609
- }
610
- [data-font="plex"] {
611
- --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Thai Looped', ui-sans-serif, system-ui, sans-serif;
612
- --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
606
+ [data-font="roboto"] {
607
+ --font-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
608
+ --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
613
609
  }
614
610
  [data-font="system"] {
615
611
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bubble-design-system/ui",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Bubble Design System — soft + teal floating-pill UI on Base UI, with token-driven theming and a single shipped stylesheet (no Tailwind required).",
5
5
  "keywords": [
6
6
  "react",
@@ -52,12 +52,6 @@
52
52
  "./dist/styles.css",
53
53
  "./dist/tokens.css"
54
54
  ],
55
- "scripts": {
56
- "build": "tsup && node scripts/build-css.mjs && mkdir -p dist/assets && cp src/assets/*.svg dist/assets/",
57
- "dev": "tsup --watch",
58
- "typecheck": "tsc --noEmit",
59
- "clean": "rm -rf dist"
60
- },
61
55
  "peerDependencies": {
62
56
  "react": ">=18.2",
63
57
  "react-dom": ">=18.2",
@@ -77,5 +71,11 @@
77
71
  },
78
72
  "publishConfig": {
79
73
  "access": "public"
74
+ },
75
+ "scripts": {
76
+ "build": "tsup && node scripts/build-css.mjs && mkdir -p dist/assets && cp src/assets/*.svg dist/assets/",
77
+ "dev": "tsup --watch",
78
+ "typecheck": "tsc --noEmit",
79
+ "clean": "rm -rf dist"
80
80
  }
81
- }
81
+ }