@revikornmann/muka-ui 0.2.1

package/dist/styles/components/BottomBar.css

@@ -0,0 +1,267 @@
+/* BottomBar Component Styles */
+
+.muka-bottombar {
+  width: 100%;
+  background-color: var(--bottombar-color-background);
+}
+
+/* Push content above the iPhone home indicator. Opt out via disableSafeArea. */
+.muka-bottombar:not(.muka-bottombar--floating):not(.muka-bottombar--no-safe-area) {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Floating variant: ensure margin-bottom is at least the safe-area inset. */
+.muka-bottombar--floating:not(.muka-bottombar--no-safe-area) {
+  padding-bottom: max(var(--bottombar-floating-margin-bottom), env(safe-area-inset-bottom));
+}
+
+/* ─── Divider (non-floating) ──────────────────────────── */
+
+.muka-bottombar__divider {
+  height: var(--border-width-regular);
+  background-color: var(--bottombar-color-border);
+  width: 100%;
+}
+
+/* ─── Content container ───────────────────────────────── */
+
+.muka-bottombar__content {
+  display: flex;
+  align-items: center;
+}
+
+/* ─── Actions variant (horizontal) ───────────────────── */
+
+.muka-bottombar--actions .muka-bottombar__content {
+  flex-direction: row;
+  gap: var(--bottombar-actions-gap);
+  padding: var(--bottombar-actions-padding-t) var(--bottombar-actions-padding-x) var(--bottombar-actions-padding-x);
+}
+
+.muka-bottombar--actions .muka-bottombar__content > * {
+  flex: 1;
+}
+
+/* ─── Actions-vertical variant (stacked) ─────────────── */
+
+.muka-bottombar--actions-vertical .muka-bottombar__content {
+  flex-direction: column;
+  gap: var(--bottombar-actions-gap);
+  padding: var(--bottombar-actions-padding-t) var(--bottombar-actions-padding-x) var(--bottombar-actions-padding-x);
+}
+
+.muka-bottombar--actions-vertical .muka-bottombar__content > * {
+  width: 100%;
+}
+
+/* ─── Size modifiers (actions variants only) ─────────── */
+
+/* ─── Navigation variant ──────────────────────────────── */
+
+.muka-bottombar--navigation .muka-bottombar__content {
+  flex-direction: row;
+}
+
+/* ─── Tab item ────────────────────────────────────────── */
+
+.muka-bottombar__tab {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bottombar-tab-gap);
+  padding: var(--bottombar-tab-padding-y) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--bottombar-color-tab-inactive);
+  transition: color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-bottombar__tab:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-bottombar__tab--active {
+  color: var(--bottombar-color-tab-active);
+}
+
+.muka-bottombar__tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bottombar-tab-icon-size);
+  height: var(--bottombar-tab-icon-size);
+}
+
+.muka-bottombar__tab-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-bottombar__tab-label {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  letter-spacing: var(--text-label-sm-regular-letterSpacing);
+}
+
+/* ─── Floating modifier ───────────────────────────────── */
+
+.muka-bottombar--floating {
+  background: linear-gradient(
+    to bottom,
+    var(--bottombar-floating-backdrop-start),
+    var(--bottombar-floating-backdrop-end)
+  );
+  backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
+  padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
+}
+
+.muka-bottombar--floating .muka-bottombar__content {
+  background-color: var(--bottombar-color-background);
+  border-radius: var(--bottombar-floating-radius);
+  padding: var(--bottombar-floating-padding);
+  box-shadow: var(--bottombar-floating-shadow);
+  max-width: var(--bottombar-floating-max-width);
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Override content padding inside floating per variant */
+.muka-bottombar--floating.muka-bottombar--actions .muka-bottombar__content {
+  padding: var(--bottombar-floating-padding);
+}
+
+.muka-bottombar--floating.muka-bottombar--navigation .muka-bottombar__content {
+  padding: var(--bottombar-navigation-floating-padding);
+}
+
+/* ─── Desktop: Sidebar transformation ─────────────────── */
+
+@media (min-width: 1024px) {
+  .muka-bottombar--desktop-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 240px;
+    height: 100vh;
+    background-color: var(--bottombar-color-background);
+    border-right: var(--border-width-regular) solid var(--bottombar-color-border);
+    z-index: 10;
+  }
+
+  .muka-bottombar--desktop-sidebar .muka-bottombar__divider {
+    display: none;
+  }
+
+  .muka-bottombar--desktop-sidebar .muka-bottombar__content {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--spacing-4) var(--spacing-3);
+    gap: var(--spacing-1);
+  }
+
+  .muka-bottombar--desktop-sidebar .muka-bottombar__tab {
+    flex: 0 0 auto;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: var(--spacing-3);
+    padding: var(--spacing-3);
+    border-radius: var(--border-radius-md);
+  }
+
+  .muka-bottombar--desktop-sidebar .muka-bottombar__tab:hover {
+    background-color: var(--color-surface-level2);
+  }
+
+  .muka-bottombar--desktop-sidebar .muka-bottombar__tab-label {
+    font-family: var(--text-label-md-regular-fontFamily);
+    font-weight: var(--text-label-md-regular-fontWeight);
+    font-size: var(--text-label-md-regular-fontSize);
+    line-height: var(--text-label-md-regular-lineHeight);
+    letter-spacing: var(--text-label-md-regular-letterSpacing);
+  }
+
+  /* When floating and sidebar, remove the floating card styles */
+  .muka-bottombar--desktop-sidebar.muka-bottombar--floating {
+    padding: 0;
+  }
+
+  .muka-bottombar--desktop-sidebar.muka-bottombar--floating .muka-bottombar__content {
+    background-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+/* ─── Desktop: Top Navigation transformation ──────────── */
+
+@media (min-width: 1024px) {
+  .muka-bottombar--desktop-topnav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: auto;
+    background-color: var(--bottombar-color-background);
+    border-bottom: var(--border-width-regular) solid var(--bottombar-color-border);
+    z-index: 10;
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__divider {
+    display: none;
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__content {
+    flex-direction: row;
+    justify-content: center;
+    gap: var(--spacing-1);
+    padding: 0 var(--spacing-4);
+    max-width: var(--container-max-width-large, 1200px);
+    margin: 0 auto;
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__tab {
+    flex: 0 0 auto;
+    flex-direction: row;
+    gap: var(--spacing-2);
+    padding: var(--spacing-3) var(--spacing-4);
+    border-radius: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__tab--active {
+    border-bottom-color: var(--color-action-default);
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__tab:hover {
+    background-color: var(--color-surface-level2);
+  }
+
+  .muka-bottombar--desktop-topnav .muka-bottombar__tab-label {
+    font-family: var(--text-label-md-regular-fontFamily);
+    font-weight: var(--text-label-md-regular-fontWeight);
+    font-size: var(--text-label-md-regular-fontSize);
+    line-height: var(--text-label-md-regular-lineHeight);
+    letter-spacing: var(--text-label-md-regular-letterSpacing);
+  }
+
+  /* When floating and topnav, remove the floating card styles */
+  .muka-bottombar--desktop-topnav.muka-bottombar--floating {
+    padding: 0;
+  }
+
+  .muka-bottombar--desktop-topnav.muka-bottombar--floating .muka-bottombar__content {
+    background-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/dist/styles/components/Breadcrumb.css

@@ -0,0 +1,79 @@
+/* Breadcrumb Component Styles */
+
+.muka-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--spacing-1);
+}
+
+.muka-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-breadcrumb__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-subtle-default);
+}
+
+/* Link styles */
+.muka-breadcrumb__link {
+  color: var(--color-text-subtle-default);
+  text-decoration: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  transition: color 0.15s ease;
+}
+
+.muka-breadcrumb__link:hover {
+  color: var(--color-text-action-default);
+  text-decoration: underline;
+}
+
+/* Current page (last item) */
+.muka-breadcrumb__current {
+  color: var(--color-text-default-default);
+  font-weight: 600;
+}
+
+/* Separator */
+.muka-breadcrumb__separator {
+  color: var(--color-text-subtle-default);
+  user-select: none;
+}
+
+/* Ellipsis */
+.muka-breadcrumb__ellipsis {
+  color: var(--color-text-subtle-default);
+}
+
+/* Size variants */
+.muka-breadcrumb--sm {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
+
+.muka-breadcrumb--md {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+.muka-breadcrumb--lg {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+}

package/dist/styles/components/Button.css

@@ -0,0 +1,270 @@
+/* Button Component Styles - Using Muka Design Tokens */
+
+/* Base button styles */
+.muka-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-brand-family);
+  font-weight: var(--alias-font-brand-weight-semibold);
+  text-decoration: none;
+  
+  /* Interaction */
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  
+  /* Accessibility */
+  outline: none;
+  position: relative;
+}
+
+/* Focus styles for accessibility */
+.muka-button:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Size variants
+   Height is driven by min-height; vertical padding is 0 and the label carries
+   tight (Figma) line-height. Horizontal spacing matches Figma's nested model:
+   the button's padding is the outer container inset, and the label's own
+   padding is the icon-to-text gap (so text-only buttons keep both insets). */
+.muka-button--sm {
+  padding: 0 var(--button-padding-sm-x);
+  border-radius: var(--button-radius-sm);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  min-height: 32px;
+}
+
+.muka-button--sm .muka-button__label {
+  padding: 0 var(--button-gap-sm);
+}
+
+.muka-button--md {
+  padding: 0 var(--button-padding-md-x);
+  border-radius: var(--button-radius-md);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  min-height: 40px;
+}
+
+.muka-button--md .muka-button__label {
+  padding: 0 var(--button-gap-md);
+}
+
+.muka-button--lg {
+  padding: 0 var(--button-padding-lg-x);
+  border-radius: var(--button-radius-lg);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+  min-height: 48px;
+}
+
+.muka-button--lg .muka-button__label {
+  padding: 0 var(--button-gap-lg);
+}
+
+.muka-button--xl {
+  padding: 0 var(--button-padding-xl-x);
+  border-radius: var(--button-radius-xl);
+  font-size: var(--text-label-2xl-semibold-fontSize);
+  line-height: var(--text-label-2xl-semibold-lineHeight);
+  min-height: 64px;
+}
+
+.muka-button--xl .muka-button__label {
+  padding: 0 var(--button-gap-xl);
+}
+
+/* Primary variant - your main CTA button */
+.muka-button--primary {
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  box-shadow: var(--button-color-primary-shadow-default);
+}
+
+.muka-button--primary:hover:not(:disabled) {
+  background-color: var(--button-color-primary-background-hover);
+  color: var(--button-color-primary-foreground-hover);
+  box-shadow: var(--button-color-primary-shadow-hover);
+}
+
+.muka-button--primary:active:not(:disabled),
+.muka-button--primary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-primary-background-pressed);
+  color: var(--button-color-primary-foreground-pressed);
+  box-shadow: var(--button-color-primary-shadow-pressed);
+}
+
+.muka-button--primary:disabled {
+  background-color: var(--button-color-primary-background-disabled);
+  color: var(--button-color-primary-foreground-disabled);
+  box-shadow: var(--button-color-primary-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1; /* Remove opacity since we have proper disabled tokens */
+}
+
+/* Secondary variant - supporting actions, no border, only bottom inner shadow */
+.muka-button--secondary {
+  background-color: var(--button-color-secondary-background-default);
+  color: var(--button-color-secondary-foreground-default);
+  box-shadow: var(--button-color-secondary-shadow-default);
+}
+
+.muka-button--secondary:hover:not(:disabled) {
+  background-color: var(--button-color-secondary-background-hover);
+  color: var(--button-color-secondary-foreground-hover);
+  box-shadow: var(--button-color-secondary-shadow-hover);
+}
+
+.muka-button--secondary:active:not(:disabled),
+.muka-button--secondary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-secondary-background-pressed);
+  color: var(--button-color-secondary-foreground-pressed);
+  box-shadow: var(--button-color-secondary-shadow-pressed);
+}
+
+.muka-button--secondary:disabled {
+  background-color: var(--button-color-secondary-background-disabled);
+  color: var(--button-color-secondary-foreground-disabled);
+  box-shadow: var(--button-color-secondary-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Tertiary variant - tinted background with accent text and border */
+.muka-button--tertiary {
+  background-color: var(--button-color-tertiary-background-default);
+  color: var(--button-color-tertiary-foreground-default);
+  border: 1px solid var(--button-color-tertiary-border-default);
+}
+
+.muka-button--tertiary:hover:not(:disabled) {
+  background-color: var(--button-color-tertiary-background-hover);
+  color: var(--button-color-tertiary-foreground-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-button--tertiary:active:not(:disabled),
+.muka-button--tertiary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-tertiary-background-pressed);
+  color: var(--button-color-tertiary-foreground-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-button--tertiary:disabled {
+  background-color: var(--button-color-tertiary-background-disabled);
+  color: var(--button-color-tertiary-foreground-disabled);
+  border-color: var(--button-color-tertiary-border-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Ghost variant - minimal styling, border appears on hover */
+.muka-button--ghost {
+  background-color: var(--button-color-ghost-background-default);
+  color: var(--button-color-ghost-foreground-default);
+  border: 1px solid var(--button-color-ghost-border-default);
+}
+
+.muka-button--ghost:hover:not(:disabled) {
+  background-color: var(--button-color-ghost-background-hover);
+  color: var(--button-color-ghost-foreground-hover);
+  border-color: var(--button-color-ghost-border-hover);
+}
+
+.muka-button--ghost:active:not(:disabled),
+.muka-button--ghost.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-ghost-background-pressed);
+  color: var(--button-color-ghost-foreground-pressed);
+  border-color: var(--button-color-ghost-border-pressed);
+}
+
+.muka-button--ghost:disabled {
+  background-color: var(--button-color-ghost-background-disabled);
+  color: var(--button-color-ghost-foreground-disabled);
+  border-color: var(--button-color-ghost-border-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* General disabled state - fallback */
+.muka-button:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Full width modifier */
+.muka-button--full-width {
+  width: 100%;
+}
+
+/* Icons - forced to the Figma per-size dimension regardless of the icon passed */
+.muka-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Make the icon content (raw <svg> or a nested Icon span) fill the wrapper.
+   Scoped under .muka-button to outrank Icon.css's own `.muka-icon--{size}`
+   rule, so the button's size wins even when the icon hardcodes its own size. */
+.muka-button .muka-button__icon > *,
+.muka-button .muka-button__icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.muka-button--sm .muka-button__icon {
+  width: var(--button-icon-sm);
+  height: var(--button-icon-sm);
+}
+
+.muka-button--md .muka-button__icon {
+  width: var(--button-icon-md);
+  height: var(--button-icon-md);
+}
+
+.muka-button--lg .muka-button__icon {
+  width: var(--button-icon-lg);
+  height: var(--button-icon-lg);
+}
+
+.muka-button--xl .muka-button__icon {
+  width: var(--button-icon-xl);
+  height: var(--button-icon-xl);
+}
+
+.muka-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Icon-only buttons - square, sized to the button height per size */
+.muka-button--icon-only {
+  padding: 0;
+}
+
+.muka-button--icon-only.muka-button--sm {
+  width: 32px;
+}
+
+.muka-button--icon-only.muka-button--md {
+  width: 40px;
+}
+
+.muka-button--icon-only.muka-button--lg {
+  width: 48px;
+}
+
+.muka-button--icon-only.muka-button--xl {
+  width: 64px;
+}