@ibis-design/css 0.9.0 → 1.0.0-alpha.0

package/dist/components/navShell.css

@@ -0,0 +1,314 @@
+/* Navigation shell layout — import via @ibis-design/css/components/navShell.css */
+
+/* NavDrawer */
+
+.ib-nav-drawer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 360px;
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-4) var(--spacing-3);
+  background-color: var(--color-surface-default);
+  border-right: var(--border-width-thin) solid var(--border-color-subtle);
+  border-bottom-right-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-nav);
+  box-sizing: border-box;
+}
+
+.ib-nav-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+}
+
+.ib-nav-drawer__logo {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ib-nav-drawer__logo-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-full);
+  background: var(--gradient-brand-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
+}
+
+.ib-nav-drawer-logo-image {
+  height: 48px;
+  width: auto;
+  object-fit: contain;
+}
+
+.ib-nav-drawer__toggle {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-start;
+}
+
+.ib-nav-drawer__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ib-nav-drawer__section-label {
+  margin: 0 0 var(--spacing-2);
+  padding: 0 var(--spacing-2);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+}
+
+.ib-nav-drawer__body {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--spacing-2);
+}
+
+.ib-nav-drawer__footer {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--spacing-1);
+  border-top: var(--border-width-thin) solid var(--border-color-subtle);
+  padding-top: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.ib-nav-drawer__footer-label {
+  margin: 0;
+  padding: 0 var(--spacing-2);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+}
+
+.ib-nav-drawer__footer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.ib-nav-drawer__meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-2) 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
+/* NavRail */
+
+.ib-nav-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 72px;
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-4) 0;
+  background-color: var(--color-surface-default);
+  border-right: var(--border-width-thin) solid var(--border-color-subtle);
+  border-bottom-right-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-nav);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ib-nav-rail__header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  margin-bottom: var(--spacing-4);
+  overflow: visible;
+}
+
+.ib-nav-rail__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.ib-nav-rail__logo-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-full);
+  background: var(--gradient-brand-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
+}
+
+.ib-nav-rail-logo-image {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.ib-nav-rail__toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: var(--z-index-overlay);
+}
+
+.ib-nav-rail__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-2);
+  box-sizing: border-box;
+}
+
+.ib-nav-rail__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  gap: var(--spacing-1);
+  margin-top: auto;
+  padding: var(--spacing-2) var(--spacing-2) 0;
+  box-sizing: border-box;
+  border-top: var(--border-width-thin) solid var(--border-color-subtle);
+}
+
+/* NavBottom */
+
+.ib-nav-bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-around;
+  position: fixed;
+  bottom: 0;
+  inset-inline: 0;
+  z-index: var(--z-index-sticky);
+  padding: var(--spacing-2) var(--spacing-4);
+  padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom, 0px));
+  gap: var(--spacing-1);
+  background-color: var(--color-surface-default);
+  border-top: var(--border-width-thin) solid var(--border-color-default);
+  box-shadow: var(--shadow-elevation-md);
+  box-sizing: border-box;
+}
+
+/* Toggle Button */
+
+.ib-nav-shell-toggle {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-1);
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  outline: none;
+  transition:
+    background-color var(--transition-duration-fast) var(--transition-timing-default),
+    color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ib-nav-shell-toggle:hover {
+  background-color: var(--color-interactive-neutral-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ib-nav-shell-toggle svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  overflow: visible;
+}
+
+.ib-nav-shell-toggle svg path {
+  stroke: currentColor;
+}
+
+/* Icon Animations */
+
+.ib-nav-rail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-rail-icon--selected {
+  transform: scale(1.15);
+}
+
+.ib-nav-drawer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-drawer-icon--selected {
+  transform: scale(1.15);
+}
+
+.ib-nav-bottom-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-bottom-icon--selected {
+  transform: scale(1.15);
+}
+
+/* Sign Out Button */
+
+.ib-nav-signout:not(:disabled):hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-status-error) calc(var(--opacity-5) * 100%),
+    transparent
+  );
+}

package/dist/components/topBar.css

@@ -0,0 +1,52 @@
+/* Top bar — import via @ibis-design/css/components/topBar.css */
+
+.ib-top-bar {
+  position: relative;
+  width: 100%;
+  height: 96px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-surface-default);
+  border-bottom: var(--border-width-thin) solid var(--border-color-subtle);
+  box-shadow: 0 1px 8px 0 var(--shadow-color-black-soft);
+  z-index: var(--z-index-sticky);
+  box-sizing: border-box;
+  padding: 0 var(--spacing-6);
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+
+.ib-top-bar__left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-3);
+  flex-shrink: 0;
+}
+
+.ib-top-bar__title {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-heading-h4);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ib-top-bar__right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-3);
+  flex-shrink: 0;
+}
+
+.ib-top-bar__search {
+  width: 200px;
+}
+
+.ib-top-bar__search .ibis-input {
+  max-width: 100%;
+  width: 100%;
+}

package/dist/design-tokens.css

@@ -1,8 +1,6 @@
 /**
  * Do not edit directly. Generated by @ibis-design/css build.
- * Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>,
- * or use setTheme() from @ibis-design/css/theme.
- * :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
+ * Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>, or use setTheme() from @ibis-design/css/theme. :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
  */
 
 /**
@@ -130,6 +128,7 @@
   --shadow-focus-default: 0 0 0 4px var(--shadow-color-black-soft);
   --shadow-focus-primary: 0 0 0 4px var(--shadow-color-brand-soft);
   --shadow-focus-error: 0 0 0 4px var(--shadow-color-black-medium);
+  --shadow-nav: 0 0 8px 0 var(--shadow-color-black-soft);
 }
 
 /**
@@ -189,7 +188,7 @@
   --font-size-heading-h1: 4.188rem;
   --font-size-heading-h2: 3.188rem;
   --font-size-heading-h3: 2.375rem;
-  --font-size-heading-h4: 1.75rem;
+  --font-size-heading-h4: 1.750rem;
   --font-size-heading-h5: 1.312rem;
   --border-radius-none: 0;
   --border-radius-xs: 0.25rem;
@@ -306,7 +305,7 @@
   --font-size-heading-h1: 4.188rem;
   --font-size-heading-h2: 3.188rem;
   --font-size-heading-h3: 2.375rem;
-  --font-size-heading-h4: 1.75rem;
+  --font-size-heading-h4: 1.750rem;
   --font-size-heading-h5: 1.312rem;
   --border-radius-none: 0;
   --border-radius-xs: 0.25rem;

package/dist/tailwind.theme.js

@@ -218,7 +218,8 @@ module.exports = {
           default: "var(--shadow-focus-default)",
           primary: "var(--shadow-focus-primary)",
           error: "var(--shadow-focus-error)"
-        }
+        },
+        nav: "var(--shadow-nav)"
       },
       color: {
         primary: {

package/package.json

@@ -1,33 +1,34 @@
-{
-  "name": "@ibis-design/css",
-  "version": "0.9.0",
-  "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
-  "type": "module",
-  "exports": {
-    ".": "./dist/design-tokens.css",
-    "./design-tokens.css": "./dist/design-tokens.css",
-    "./tailwind.preset": "./dist/tailwind.preset.js",
-    "./preset": "./dist/tailwind.preset.js",
-    "./ibis-design.css": "./dist/design-tokens.css",
-    "./alchemy-design.css": "./dist/design-tokens.css",
-    "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
-    "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
-    "./components/*": "./dist/components/*",
-    "./tailwind.theme": "./dist/tailwind.theme.js",
-    "./theme": "./src/lib/set-theme.ts"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "scripts": {
-    "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
-    "validate": "tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "sd-tailwindcss-transformer": "^2.2.1",
-    "style-dictionary": "^5.4.1",
-    "tsx": "^4.22.3"
-  }
-}
+{
+  "name": "@ibis-design/css",
+  "version": "1.0.0-alpha.0",
+  "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
+  "type": "module",
+  "exports": {
+    ".": "./dist/design-tokens.css",
+    "./design-tokens.css": "./dist/design-tokens.css",
+    "./bootstrap-overrides.css": "./dist/bootstrap-overrides.css",
+    "./tailwind.preset": "./dist/tailwind.preset.js",
+    "./preset": "./dist/tailwind.preset.js",
+    "./ibis-design.css": "./dist/design-tokens.css",
+    "./alchemy-design.css": "./dist/design-tokens.css",
+    "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
+    "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
+    "./components/*": "./dist/components/*",
+    "./tailwind.theme": "./dist/tailwind.theme.js",
+    "./theme": "./src/lib/set-theme.ts"
+  },
+  "files": [
+    "dist",
+    "src/lib"
+  ],
+  "scripts": {
+    "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-bootstrap-themes.ts && tsx src/scripts/validate-component-tokens.ts",
+    "validate": "tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-bootstrap-themes.ts && tsx src/scripts/validate-component-tokens.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "sd-tailwindcss-transformer": "^2.2.1",
+    "style-dictionary": "^5.4.3",
+    "tsx": "^4.22.4"
+  }
+}

package/src/lib/assemble-bootstrap-overrides.ts

@@ -0,0 +1,23 @@
+import { BOOTSTRAP_VAR_MAP } from "../config/bootstrap-map.ts";
+import { THEMES } from "./themes.ts";
+
+/**
+ * Builds Bootstrap 5.3 override CSS that maps `--bs-*` vars to IBIS semantic tokens.
+ */
+export const assembleBootstrapOverridesStylesheet = (): string => {
+  const blocks = THEMES.map((theme) => {
+    const lines = BOOTSTRAP_VAR_MAP.map(
+      ({ ibisVar, bootstrapVar }) => `  ${bootstrapVar}: var(${ibisVar});`,
+    );
+    return `${theme.cssSelector} {\n${lines.join("\n")}\n}`;
+  });
+
+  return `/**
+ * Do not edit directly. Generated by @ibis-design/css build.
+ * Load after Bootstrap CSS and @ibis-design/css design tokens.
+ * IBIS theme selectors set --bs-* vars from semantic --color-* / --font-* tokens.
+ */
+
+${blocks.join("\n\n")}
+`;
+};

package/src/lib/assemble-design-tokens.ts

@@ -1,8 +1,12 @@
 /**
  * @param blocks - Formatted CSS blocks from Style Dictionary (one per global/theme layer).
- * @returns Full design-tokens stylesheet with header comment.
+ * @param description - Optional header description line.
+ * @returns Full stylesheet with header comment.
  */
-export const assembleDesignTokensStylesheet = (blocks: string[]): string => {
+export const assembleDesignTokensStylesheet = (
+  blocks: string[],
+  description = "Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>, or use setTheme() from @ibis-design/css/theme. :root holds global tokens; :root + [data-brand=\"ib\"][data-color-mode=\"light\"] is the default theme overlay.",
+): string => {
   const body = blocks
     .map((block) => block.trim())
     .filter(Boolean)
@@ -10,9 +14,7 @@ export const assembleDesignTokensStylesheet = (blocks: string[]): string => {
 
   return `/**
  * Do not edit directly. Generated by @ibis-design/css build.
- * Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>,
- * or use setTheme() from @ibis-design/css/theme.
- * :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
+ * ${description}
  */
 
 ${body}

package/src/lib/set-theme.ts

@@ -21,6 +21,8 @@ export {
 export type ThemeOptions = {
   brand?: BrandId;
   colorMode?: ColorModeId;
+  /** When true, also sets `data-bs-theme` on `<html>` for Bootstrap 5.3 components. */
+  syncBootstrapTheme?: boolean;
 };
 
 const isBrandId = (value: string): value is BrandId => value === "ib" || value === "alc";
@@ -44,6 +46,10 @@ export const setTheme = (options: ThemeOptions = {}): ThemeId => {
     root.dataset.brand = brand;
     root.dataset.colorMode = colorMode;
     delete root.dataset.theme;
+
+    if (options.syncBootstrapTheme) {
+      root.dataset.bsTheme = colorMode;
+    }
   }
 
   return toThemeId(brand, colorMode);