@revikornmann/muka-ui 0.17.0 → 0.19.0

package/dist/styles/components/Scrollbar.css

@@ -0,0 +1,124 @@
+/* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
+
+.muka-scrollbar {
+  display: flex;
+  flex-shrink: 0;
+  border-left: var(--border-width-regular) solid var(--color-border-default);
+  background-color: var(--color-surface-level3);
+  user-select: none;
+}
+
+.muka-scrollbar--vertical {
+  flex-direction: column;
+  width: var(--size-2xl, 32px);
+  align-self: stretch;
+}
+
+.muka-scrollbar--horizontal {
+  flex-direction: row;
+  height: var(--size-2xl, 32px);
+  width: 100%;
+  border-left: none;
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-scrollbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--size-2xl, 32px);
+  padding: 0;
+  border: none;
+  background-color: var(--button-color-tertiary-background-default, var(--color-surface-level3));
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__button {
+  width: var(--size-2xl, 32px);
+  height: 100%;
+}
+
+.muka-scrollbar__button:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-scrollbar__divider {
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__divider {
+  width: 1px;
+  height: 100%;
+}
+
+.muka-scrollbar__track {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__track {
+  flex-direction: row;
+  min-width: 0;
+  height: 100%;
+}
+
+.muka-scrollbar__thumb {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  /* Figma: scrollbar thumb fill = surface/level3 */
+  background-color: var(--color-surface-level3);
+  cursor: grab;
+  touch-action: none;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__thumb {
+  left: 0;
+  top: 0;
+  width: auto;
+  height: 100%;
+  margin-left: 0;
+  margin-top: 0;
+}
+
+.muka-scrollbar__thumb:active {
+  cursor: grabbing;
+}
+
+.muka-scrollbar__grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 14px;
+}
+
+.muka-scrollbar__grip::before,
+.muka-scrollbar__grip::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-text-subtle-default);
+}
+
+.muka-scrollbar__spacer {
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: var(--color-surface-level2);
+}

package/dist/styles/components/Typography.css

@@ -0,0 +1,89 @@
+.muka-typography-catalog {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  max-width: 52rem;
+  color: var(--color-text-default-default);
+}
+
+.muka-typography-catalog__intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.muka-typography-catalog__heading {
+  margin: 0;
+  font-family: var(--text-heading-md-fontFamily);
+  font-weight: var(--text-heading-md-fontWeight);
+  font-size: var(--text-heading-md-fontSize);
+  line-height: var(--text-heading-md-lineHeight);
+}
+
+.muka-typography-catalog__lede {
+  margin: 0;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-catalog__lede code {
+  font-family: var(--alias-font-mono-family, ui-monospace, monospace);
+  font-size: 0.875em;
+}
+
+.muka-typography-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.muka-typography-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.muka-typography-section__title {
+  margin: 0;
+  font-family: var(--text-heading-sm-fontFamily);
+  font-weight: var(--text-heading-sm-fontWeight);
+  font-size: var(--text-heading-sm-fontSize);
+  line-height: var(--text-heading-sm-lineHeight);
+}
+
+.muka-typography-section__description {
+  margin: 0;
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-section__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.muka-typography-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.muka-typography-specimen__token {
+  font-family: var(--alias-font-mono-family, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-specimen__sample {
+  margin: 0;
+}