@mdbase-dev/ui 0.1.0-beta.117

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mdbase connect contributors
+
+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,28 @@
+# `@mdbase-dev/ui`
+
+The shared visual foundation of mdbase apps: Editor, Reader, Writer, and any
+app that wants to look like part of the family. Nothing here is required to
+build on mdbase Connect.
+
+```ts
+import "@mdbase-dev/ui/fonts.css";
+import "@mdbase-dev/ui/tokens.css";
+import "@mdbase-dev/ui/brand.css";
+
+import { Wordmark } from "@mdbase-dev/ui/brand";
+import { loadThemePreference, applyThemePreference } from "@mdbase-dev/ui/theme";
+import { mdbaseAppHref, withAppUrls } from "@mdbase-dev/ui/apps";
+
+applyThemePreference(loadThemePreference());
+```
+
+- `tokens.css` defines semantic roles (`--color-canvas`, `--color-text`,
+  `--color-text-soft`, `--color-accent`, ...) for light, dark and system
+  themes. Style components with roles, not palette values. Short aliases such
+  as `--ink` belong to each app.
+- `theme` stores the System, Light or Dark choice as `mdbase:theme`.
+- `brand` draws the Frontmatter mark, each app's inverted mark, and the
+  `mdbase <app>` wordmark. Add `motion.css` to animate the mark.
+- `apps` lists the mdbase apps and builds links that open the current
+  collection in another app. Lab and local builds pass their own URLs to
+  `withAppUrls`.

package/css/brand.css

@@ -0,0 +1,93 @@
+/* The platform mark. `motion.css` animates the same structure when a motion is set. */
+.mdbase-mark {
+  overflow: visible;
+}
+
+.mdbase-mark .mdbase-mark-segment,
+.mdbase-mark .mdbase-mark-row,
+.mdbase-mark .mdbase-mark-fence,
+.mdbase-mark .mdbase-mark-conveyor-track {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.mdbase-mark .mdbase-mark-ink,
+.mdbase-mark .mdbase-mark-conveyor-track {
+  fill: currentColor;
+}
+
+.mdbase-mark .mdbase-mark-accent {
+  fill: var(--color-accent);
+}
+
+.mdbase-mark .mdbase-mark-conveyor-track {
+  opacity: 0;
+  transform-box: view-box;
+  transform-origin: 0 0;
+}
+
+/* An app mark takes its app's colour for the bars; the line stays ink. */
+.mdbase-app-mark {
+  color: var(--color-text);
+  overflow: visible;
+}
+
+.mdbase-app-mark.is-editor { --app: var(--app-editor); }
+.mdbase-app-mark.is-reader { --app: var(--app-reader); }
+.mdbase-app-mark.is-writer { --app: var(--app-writer); }
+
+.mdbase-app-mark-bars {
+  fill: var(--app);
+}
+
+.mdbase-app-mark-line {
+  fill: currentColor;
+}
+
+.wordmark {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.wordmark-mark {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+}
+
+.wordmark-label {
+  min-width: 0;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.65ch;
+  white-space: nowrap;
+  transition:
+    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    display 140ms allow-discrete;
+}
+
+.wordmark strong {
+  display: inline-block;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  transition:
+    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    display 140ms allow-discrete;
+}
+
+@starting-style {
+  .wordmark-label,
+  .wordmark-label strong {
+    opacity: 0;
+    transform: translateX(-3px);
+  }
+}