@ibis-design/css 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/components/toaster.css

@@ -1,4 +1,4 @@
-.ibis-toaster {
+.ib-toaster {
   font-family: var(--font-family-sans);
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@
   margin-bottom: var(--spacing-1);
 }
 
-.ibis-toaster__icon {
+.ib-toaster__icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,29 +23,29 @@
   color: var(--color-text-on-primary);
 }
 
-.ibis-toaster__icon :global(svg) {
+.ib-toaster__icon :global(svg) {
   width: 100%;
   height: 100%;
 }
 
-.ibis-toaster__content {
+.ib-toaster__content {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-.ibis-toaster__title {
+.ib-toaster__title {
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-sm);
 }
 
-.ibis-toaster__message {
+.ib-toaster__message {
   font-size: var(--font-size-body-sm);
   color: var(--color-text-on-primary);
 }
 
-.ibis-toaster__close {
+.ib-toaster__close {
   background: transparent;
   border: none;
   cursor: pointer;
@@ -55,65 +55,65 @@
   flex-shrink: 0;
 }
 
-.ibis-toaster--success {
+.ib-toaster--success {
   border-color: var(--color-status-success);
   background-color: var(--color-status-success);
 }
 
-.ibis-toaster--success .ibis-toaster__title {
+.ib-toaster--success .ib-toaster__title {
   color: var(--color-text-on-primary);
 }
 
-.ibis-toaster--error {
+.ib-toaster--error {
   border-color: var(--color-status-error);
   background-color: var(--color-status-error);
 }
 
-.ibis-toaster--error .ibis-toaster__title {
+.ib-toaster--error .ib-toaster__title {
   color: var(--color-text-on-primary);
 }
 
-.ibis-toaster--accent {
+.ib-toaster--accent {
   border-color: var(--color-toaster-accent);
   background-color: var(--color-toaster-accent);
 }
 
-.ibis-toaster--accent .ibis-toaster__title {
+.ib-toaster--accent .ib-toaster__title {
   color: var(--color-text-on-primary);
 }
 
-.ibis-toaster--default {
+.ib-toaster--default {
   border-color: var(--color-surface-muted);
   background-color: var(--color-surface-muted);
 }
 
-.ibis-toaster--default .ibis-toaster__title {
+.ib-toaster--default .ib-toaster__title {
   color: var(--color-text-on-muted);
 }
 
-.ibis-toaster--default .ibis-toaster__message {
+.ib-toaster--default .ib-toaster__message {
   color: var(--color-text-on-muted);
 }
 
-.ibis-toaster--default .ibis-toaster__icon {
+.ib-toaster--default .ib-toaster__icon {
   color: var(--color-text-on-muted);
 }
 
-.ibis-toaster--default .ibis-toaster__close {
+.ib-toaster--default .ib-toaster__close {
   color: var(--color-text-on-muted);
   border-color: var(--color-surface-default);
 }
 
-.ibis-toaster__loader {
+.ib-toaster__loader {
   width: 1em;
   height: 1em;
   border: var(--border-width-default) solid var(--border-color-focus);
   border-top-color: var(--color-interactive-primary-indicator);
   border-radius: 50%;
-  animation: ibis-toaster-spin 0.8s linear infinite;
+  animation: ib-toaster-spin 0.8s linear infinite;
 }
 
-@keyframes ibis-toaster-spin {
+@keyframes ib-toaster-spin {
   from {
     transform: rotate(0deg);
   }

package/dist/components/topBar.css

@@ -8,8 +8,8 @@
   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);
+  background-color: transparent;
+  border-bottom: none;
   box-sizing: border-box;
   padding: 0 var(--spacing-6);
   gap: var(--spacing-4);
@@ -44,7 +44,7 @@
   width: 200px;
 }
 
-.ib-top-bar__search .ibis-input {
+.ib-top-bar__search .ib-input {
   max-width: 100%;
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibis-design/css",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
   "type": "module",
   "exports": {
@@ -30,8 +30,5 @@
     "sd-tailwindcss-transformer": "^2.2.1",
     "style-dictionary": "^5.4.4",
     "tsx": "^4.22.4"
-  },
-  "dependencies": {
-    "@ibis-design/css": "^1.0.0-alpha.3"
   }
 }

package/src/lib/set-theme.ts

@@ -25,11 +25,21 @@ export type ThemeOptions = {
   syncBootstrapTheme?: boolean;
 };
 
+export type ThemeState = {
+  brand: BrandId;
+  colorMode: ColorModeId;
+  themeId: ThemeId;
+};
+
 const isBrandId = (value: string): value is BrandId => value === "ib" || value === "alc";
 
 const isColorModeId = (value: string): value is ColorModeId =>
   value === "light" || value === "dark";
 
+/** `<html>` when `document` exists (SSR-safe). */
+const getHtmlRoot = (): HTMLElement | undefined =>
+  typeof document === "undefined" ? undefined : document.documentElement;
+
 /**
  * Applies brand and color mode to `document.documentElement` for CSS token switching.
  *
@@ -41,8 +51,8 @@ export const setTheme = (options: ThemeOptions = {}): ThemeId => {
   const brand = options.brand ?? DEFAULT_BRAND;
   const colorMode = options.colorMode ?? DEFAULT_COLOR_MODE;
 
-  if (typeof document !== "undefined") {
-    const root = document.documentElement;
+  const root = getHtmlRoot();
+  if (root) {
     root.dataset.brand = brand;
     root.dataset.colorMode = colorMode;
     delete root.dataset.theme;
@@ -60,8 +70,9 @@ export const setTheme = (options: ThemeOptions = {}): ThemeId => {
  *
  * @returns Current brand and color mode, or defaults when not in a browser
  */
-export const getTheme = (): { brand: BrandId; colorMode: ColorModeId; themeId: ThemeId } => {
-  if (typeof document === "undefined") {
+export const getTheme = (): ThemeState => {
+  const root = getHtmlRoot();
+  if (!root) {
     return {
       brand: DEFAULT_BRAND,
       colorMode: DEFAULT_COLOR_MODE,
@@ -69,11 +80,29 @@ export const getTheme = (): { brand: BrandId; colorMode: ColorModeId; themeId: T
     };
   }
 
-  const brandRaw = document.documentElement.dataset.brand;
-  const modeRaw = document.documentElement.dataset.colorMode;
+  const brandRaw = root.dataset.brand;
+  const modeRaw = root.dataset.colorMode;
 
   const brand = brandRaw && isBrandId(brandRaw) ? brandRaw : DEFAULT_BRAND;
   const colorMode = modeRaw && isColorModeId(modeRaw) ? modeRaw : DEFAULT_COLOR_MODE;
 
   return { brand, colorMode, themeId: toThemeId(brand, colorMode) };
 };
+
+/**
+ * Toggles `data-color-mode` between light and dark while preserving the active brand.
+ * When `data-bs-theme` is already present on `<html>`, it is updated to match.
+ *
+ * @returns Active brand, color mode, and composite theme id after the toggle
+ * @example
+ * const { colorMode } = toggleDark();
+ */
+export const toggleDark = (): ThemeState => {
+  const { brand, colorMode } = getTheme();
+  const nextColorMode: ColorModeId = colorMode === "dark" ? "light" : "dark";
+  const syncBootstrapTheme = getHtmlRoot()?.hasAttribute("data-bs-theme") ?? false;
+
+  setTheme({ brand, colorMode: nextColorMode, syncBootstrapTheme });
+
+  return { brand, colorMode: nextColorMode, themeId: toThemeId(brand, nextColorMode) };
+};