banhaten 0.1.0

package/registry/components/expanded/activityFeed.css

@@ -0,0 +1,292 @@
+.ds-activity-feed {
+  --activity-feed-bg-accent-purple-subtle: var(--bh-bg-accent-purple-subtle);
+  --activity-feed-bg-raised: var(--bh-bg-raised);
+  --activity-feed-bg-success: var(--bh-bg-success-default);
+  --activity-feed-border-accent-purple-strong: var(--bh-border-accent-purple-strong);
+  --activity-feed-border-default: var(--bh-border-default);
+  --activity-feed-border-subtle: var(--bh-border-subtle);
+  --activity-feed-content-default: var(--bh-content-default);
+  --activity-feed-content-link: var(--bh-content-link);
+  --activity-feed-content-on-brand: var(--bh-content-on-brand);
+  --activity-feed-content-subtle: var(--bh-content-subtle);
+  --activity-feed-interactive-brand: var(--bh-interactive-brand-default);
+  --activity-feed-interactive-secondary: var(--bh-interactive-secondary-default);
+  --activity-feed-radius-full: var(--bh-radius-full);
+  --activity-feed-radius-sm: var(--bh-radius-sm-4);
+  --activity-feed-control-radius: var(--bh-control-default);
+  --activity-feed-space-xxs: var(--bh-space-xxs-2);
+  --activity-feed-space-xs: var(--bh-space-xs-4);
+  --activity-feed-space-md: var(--bh-space-md-8);
+  --activity-feed-space-lg: var(--bh-space-lg-10);
+  --activity-feed-space-xl: var(--bh-space-xl-12);
+  --activity-feed-shadow-component: var(--shadow-component-default);
+  --activity-feed-shadow-color-button: var(--shadow-button-raised);
+
+  box-sizing: border-box;
+  position: relative;
+  width: var(--bh-activity-feed-compact-width);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: var(--activity-feed-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-activity-feed *,
+.ds-activity-feed *::before,
+.ds-activity-feed *::after {
+  box-sizing: border-box;
+}
+
+.ds-activity-feed button,
+.ds-activity-feed a {
+  font: inherit;
+}
+
+.ds-activity-feed a {
+  text-decoration: none;
+}
+
+.ds-activity-feed--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-activity-feed-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--activity-feed-space-xl);
+  color: var(--activity-feed-content-default);
+}
+
+.ds-activity-feed-item__indicator {
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--activity-feed-space-xxs);
+  padding-top: var(--activity-feed-space-xxs);
+}
+
+.ds-activity-feed-item__avatar {
+  position: relative;
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  flex: 0 0 auto;
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
+  border-radius: var(--activity-feed-radius-full);
+  background: var(--activity-feed-bg-raised);
+}
+
+.ds-activity-feed-item__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ds-activity-feed-item__line {
+  width: var(--bh-space-xxxs-1);
+  min-height: var(--bh-space-xxxs-1);
+  flex: 1 0 0;
+  border-radius: var(--activity-feed-radius-full);
+  background: var(--activity-feed-border-default);
+}
+
+.ds-activity-feed-item__content {
+  min-width: 0;
+  flex: 1 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--activity-feed-space-lg);
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__content {
+  align-items: flex-end;
+}
+
+.ds-activity-feed-item__container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--activity-feed-space-lg);
+}
+
+.ds-activity-feed-item__topline {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-sm-6);
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__topline {
+  justify-content: flex-end;
+}
+
+.ds-activity-feed-item__text {
+  min-width: 0;
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  gap: var(--activity-feed-space-xs);
+  color: var(--activity-feed-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__text {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ds-activity-feed-item__text strong {
+  color: var(--activity-feed-content-default);
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__text strong {
+  font-weight: var(--bh-font-weight-semibold);
+}
+
+.ds-activity-feed-item__support {
+  color: var(--activity-feed-content-subtle);
+}
+
+.ds-activity-feed-item__link {
+  color: var(--activity-feed-content-link);
+}
+
+.ds-activity-feed-item__status {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  flex: 0 0 var(--bh-space-3xl-16);
+  display: inline-grid;
+  place-items: center;
+  padding: var(--bh-space-xxxs-1);
+}
+
+.ds-activity-feed-item__status > span {
+  width: var(--bh-space-sm-6);
+  height: var(--bh-space-sm-6);
+  border-radius: var(--activity-feed-radius-full);
+  background: var(--activity-feed-bg-success);
+}
+
+.ds-activity-feed-item__caption,
+.ds-activity-feed-item__slot {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--activity-feed-radius-sm);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  word-break: break-word;
+}
+
+.ds-activity-feed-item__caption {
+  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-xxs-2));
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
+  background: var(--activity-feed-bg-raised);
+  color: var(--activity-feed-content-default);
+  padding: var(--activity-feed-space-xl);
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__caption {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ds-activity-feed-item__slot {
+  height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) dashed var(--activity-feed-border-accent-purple-strong);
+  background: var(--activity-feed-bg-accent-purple-subtle);
+  color: var(--activity-feed-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-activity-feed-item__timestamp {
+  width: 100%;
+  min-width: 0;
+  color: var(--activity-feed-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-activity-feed-item--rtl .ds-activity-feed-item__timestamp {
+  text-align: right;
+}
+
+.ds-activity-feed-item__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--activity-feed-space-md);
+  padding-top: var(--activity-feed-space-md);
+}
+
+.ds-activity-feed-item__button {
+  position: relative;
+  min-width: 0;
+  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  border: var(--bh-space-xxxs-1) solid transparent;
+  border-radius: var(--activity-feed-control-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--activity-feed-space-xl);
+  box-shadow: var(--shadow-button-raised);
+  cursor: pointer;
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-line-height);
+  white-space: nowrap;
+}
+
+.ds-activity-feed-item__button--primary {
+  border-color: var(--activity-feed-interactive-brand);
+  background: var(--activity-feed-interactive-brand);
+  box-shadow: var(--activity-feed-shadow-color-button);
+  color: var(--activity-feed-content-on-brand);
+}
+
+.ds-activity-feed-item__button--secondary {
+  border-color: var(--activity-feed-border-default);
+  background: var(--activity-feed-interactive-secondary);
+  color: var(--activity-feed-content-default);
+}
+
+.ds-activity-feed-item__button:hover {
+  filter: brightness(var(--bh-activity-feed-completed-brightness));
+}
+
+.ds-activity-feed-item__button:disabled {
+  cursor: not-allowed;
+  opacity: var(--bh-opacity-muted);
+}
+
+.ds-activity-feed-item__button:focus-visible {
+  outline: var(--bh-space-xxs-2) solid var(--activity-feed-content-link);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-activity-feed-item__bottom-space {
+  width: 100%;
+  height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
+  flex: 0 0 auto;
+}

package/registry/components/expanded/banner.css

@@ -0,0 +1,312 @@
+.ds-banner {
+  --banner-bg-brand: var(--bh-bg-brand-default);
+  --banner-bg-brand-soft: var(--bh-bg-brand-soft);
+  --banner-bg-muted: var(--bh-bg-muted);
+  --banner-bg-white: var(--bh-bg-always-white);
+  --banner-border-subtle: var(--bh-border-subtle);
+  --banner-border-input: var(--bh-border-input);
+  --banner-content-default: var(--bh-content-default);
+  --banner-content-muted: var(--bh-content-muted);
+  --banner-content-inverse: var(--bh-content-inverse);
+  --banner-content-link: var(--bh-content-link);
+  --banner-radius-control: var(--bh-control-default);
+  --banner-radius-floating: var(--bh-radius-xl-10);
+  --banner-space-xxs: var(--bh-space-xxs-2);
+  --banner-space-xs: var(--bh-space-xs-4);
+  --banner-space-md: var(--bh-space-md-8);
+  --banner-space-lg: var(--bh-space-lg-10);
+  --banner-space-xl: var(--bh-space-xl-12);
+  --banner-space-3xl: var(--bh-space-3xl-16);
+  --banner-height-slim: var(--bh-space-8xl-48);
+  --banner-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
+  --banner-height-title: calc(var(--bh-space-8xl-48) + var(--bh-space-xs-4));
+  --banner-control-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --banner-input-width: var(--bh-input-width);
+  --banner-shadow-floating: var(--shadow-component-default);
+  --banner-shadow-control: var(--shadow-button-raised);
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--banner-space-3xl);
+  width: 100%;
+  min-height: var(--banner-height-slim);
+  height: 100%;
+  padding: var(--banner-space-xl) var(--banner-space-3xl);
+  border: var(--bh-space-xxxs-1) solid transparent;
+  border-radius: 0;
+  background: var(--banner-bg);
+  color: var(--banner-fg);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-style: normal;
+  font-weight: var(--bh-text-body-md-medium-font-weight);
+  line-height: var(--bh-text-body-md-medium-line-height);
+  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
+}
+
+.ds-banner *,
+.ds-banner *::before,
+.ds-banner *::after {
+  box-sizing: border-box;
+}
+
+.ds-banner--floating {
+  border-radius: var(--banner-radius-floating);
+}
+
+.ds-banner--single-action,
+.ds-banner--input {
+  justify-content: space-between;
+  min-height: var(--banner-height-default);
+}
+
+.ds-banner--single-action-inline {
+  min-height: var(--banner-height-default);
+}
+
+.ds-banner--title-description.ds-banner--slim {
+  min-height: var(--banner-height-title);
+}
+
+.ds-banner--brand {
+  --banner-bg: var(--banner-bg-brand);
+  --banner-fg: var(--banner-content-inverse);
+  --banner-action-bg: var(--banner-bg-white);
+  --banner-action-fg: var(--banner-content-default);
+  --banner-link-fg: var(--banner-content-inverse);
+  --banner-icon-fg: var(--banner-content-inverse);
+}
+
+.ds-banner--grey {
+  --banner-bg: var(--banner-bg-muted);
+  --banner-fg: var(--banner-content-default);
+  --banner-action-bg: var(--banner-bg-white);
+  --banner-action-fg: var(--banner-content-default);
+  --banner-link-fg: var(--banner-content-link);
+  --banner-icon-fg: var(--bh-content-subtle);
+  border-color: var(--banner-border-subtle);
+}
+
+.ds-banner--brand-light {
+  --banner-bg: var(--banner-bg-brand-soft);
+  --banner-fg: var(--banner-content-default);
+  --banner-action-bg: var(--banner-bg-brand);
+  --banner-action-fg: var(--banner-content-inverse);
+  --banner-link-fg: var(--banner-content-link);
+  --banner-icon-fg: var(--banner-content-link);
+}
+
+.ds-banner--floating.ds-banner--brand.ds-banner--single-action,
+.ds-banner--floating.ds-banner--brand.ds-banner--single-action-inline,
+.ds-banner--floating.ds-banner--brand.ds-banner--input,
+.ds-banner--floating.ds-banner--brand.ds-banner--title-description {
+  box-shadow: var(--banner-shadow-floating);
+}
+
+.ds-banner__main,
+.ds-banner__leading,
+.ds-banner__tail,
+.ds-banner__message {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ds-banner__main {
+  justify-content: center;
+  gap: var(--banner-space-xl);
+}
+
+.ds-banner--single-action .ds-banner__main,
+.ds-banner--input .ds-banner__main {
+  justify-content: flex-start;
+}
+
+.ds-banner__leading {
+  gap: var(--banner-space-xl);
+}
+
+.ds-banner__tail {
+  flex: 0 0 auto;
+  gap: var(--banner-space-3xl);
+}
+
+.ds-banner__tail--input {
+  gap: var(--banner-space-md);
+}
+
+.ds-banner__tail--input .ds-banner__close {
+  margin-inline-start: var(--banner-space-md);
+}
+
+.ds-banner__icon-wrap,
+.ds-banner__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--banner-icon-fg);
+}
+
+.ds-banner__icon-wrap,
+.ds-banner__icon {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+}
+
+.ds-banner__icon,
+.ds-banner__close-icon {
+  display: block;
+  fill: currentColor;
+}
+
+.ds-banner__title-only,
+.ds-banner__message,
+.ds-banner__title,
+.ds-banner__separator,
+.ds-banner__description,
+.ds-banner__link,
+.ds-banner__action,
+.ds-banner__input {
+  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-banner__title-only,
+.ds-banner__message {
+  color: var(--banner-fg);
+}
+
+.ds-banner__message {
+  gap: var(--banner-space-xs);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  line-height: var(--bh-text-body-md-medium-line-height);
+}
+
+.ds-banner__title {
+  font-weight: var(--bh-font-weight-semibold);
+}
+
+.ds-banner__separator {
+  font-size: var(--bh-text-body-lg-medium-font-size);
+  font-weight: var(--bh-text-body-lg-medium-font-weight);
+  line-height: var(--bh-text-body-lg-medium-line-height);
+}
+
+.ds-banner__description {
+  font-weight: var(--bh-font-weight-regular);
+}
+
+.ds-banner__link,
+.ds-banner__action,
+.ds-banner__close {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-text-body-md-medium-font-weight);
+  line-height: var(--bh-text-body-md-medium-line-height);
+}
+
+.ds-banner__link {
+  padding: 0;
+  background: transparent;
+  color: var(--banner-link-fg);
+}
+
+.ds-banner--single-action-inline .ds-banner__link,
+.ds-banner__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: var(--banner-control-height);
+  padding: var(--banner-space-md) var(--banner-space-xl);
+  border-radius: var(--banner-radius-control);
+  background: var(--banner-action-bg);
+  color: var(--banner-action-fg);
+  box-shadow: var(--banner-shadow-control);
+}
+
+.ds-banner--single-action-inline .ds-banner__link {
+  padding-inline: var(--banner-space-xl);
+}
+
+.ds-banner__close {
+  width: var(--banner-space-3xl);
+  height: var(--banner-space-3xl);
+  padding: 0;
+  border-radius: var(--bh-radius-full);
+  background: transparent;
+  color: var(--banner-icon-fg);
+  box-shadow: none;
+}
+
+.ds-banner__close-icon {
+  width: var(--banner-space-3xl);
+  height: var(--banner-space-3xl);
+}
+
+.ds-banner--slim > .ds-banner__close,
+.ds-banner--single-action-inline > .ds-banner__close {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: var(--banner-space-3xl);
+  transform: translateY(-50%);
+}
+
+.ds-banner__input {
+  width: var(--banner-input-width);
+  height: var(--banner-control-height);
+  min-width: 0;
+  border: var(--bh-space-xxxs-1) solid var(--banner-border-input);
+  border-radius: var(--banner-radius-control);
+  background: var(--banner-bg-white);
+  color: var(--banner-content-default);
+  padding: 0 var(--banner-space-lg);
+  font-family: inherit;
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-weight: var(--bh-text-body-md-regular-font-weight);
+  line-height: var(--bh-text-body-md-regular-line-height);
+  box-shadow: var(--shadow-input);
+}
+
+.ds-banner__input::placeholder {
+  color: var(--banner-content-muted);
+  opacity: var(--bh-opacity-100);
+}
+
+.ds-banner__link:focus-visible,
+.ds-banner__action:focus-visible,
+.ds-banner__close:focus-visible,
+.ds-banner__input:focus-visible {
+  outline: var(--banner-space-xxs) solid var(--banner-content-link);
+  outline-offset: var(--banner-space-xxs);
+}
+
+.ds-banner--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-banner--rtl.ds-banner--title .ds-banner__title-only {
+  font-size: var(--bh-text-body-2xs-medium-font-size);
+  font-weight: var(--bh-text-body-2xs-medium-font-weight);
+  line-height: var(--bh-text-body-2xs-medium-line-height);
+  text-align: right;
+}
+
+.ds-banner--rtl .ds-banner__description {
+  font-size: var(--bh-text-body-2xs-medium-font-size);
+  font-weight: var(--bh-text-body-2xs-medium-font-weight);
+  line-height: var(--bh-text-body-2xs-medium-line-height);
+}
+
+.ds-banner--rtl .ds-banner__title {
+  text-align: right;
+}