@tappify/extension-sdk 2.1.0-beta.2 → 2.1.0

package/dist/ui/styles.css

@@ -1,740 +0,0 @@
-.tap-root {
-  --tappify-bg-paper: var(--bg-paper, #fdfdfd);
-  --tappify-bg-canvas: var(--bg-canvas, #f2f3ee);
-  --tappify-bg-light-gray: var(--bg-light-gray, #edf1f5);
-  --tappify-fg-primary: var(--fg-primary, #121212);
-  --tappify-fg-sub: var(--fg-sub, rgb(18 18 18 / 70%));
-  --tappify-divider: var(--divider, #d5d7da);
-  --tappify-lime: var(--lime, #b4d773);
-  --tappify-deep-green: var(--deep-green, #234e20);
-  --tappify-inverse: var(--inverse, #181920);
-  --tappify-fg-disabled: var(--fg-disabled, #6f757d);
-  --tappify-danger: var(--danger, #b42318);
-  --tappify-on-accent: var(--on-accent, #ffffff);
-  --tappify-space-4: 4px;
-  --tappify-space-8: 8px;
-  --tappify-space-12: 12px;
-  --tappify-space-16: 16px;
-  --tappify-space-24: 24px;
-  --tappify-space-32: 32px;
-  --tappify-space-40: 40px;
-  --tappify-radius-control: 8px;
-  --tappify-radius-card: 14px;
-  --tappify-radius-panel: 18px;
-  --tappify-control-height: 36px;
-
-  color: var(--tappify-fg-primary);
-  font-family: var(
-    --font-one-ui,
-    'Inter Variable',
-    'Inter',
-    system-ui,
-    sans-serif
-  );
-  font-size: 14px;
-  line-height: 1.45;
-  container-name: tap-mount;
-  container-type: inline-size;
-}
-
-.tap-root *,
-.tap-root *::before,
-.tap-root *::after {
-  box-sizing: border-box;
-}
-
-.tap-stack,
-.tap-inline {
-  display: flex;
-  min-width: 0;
-}
-
-.tap-stack {
-  flex-direction: column;
-}
-
-.tap-inline {
-  flex-direction: row;
-}
-
-[data-gap='4'] {
-  gap: var(--tappify-space-4);
-}
-
-[data-gap='8'] {
-  gap: var(--tappify-space-8);
-}
-
-[data-gap='12'] {
-  gap: var(--tappify-space-12);
-}
-
-[data-gap='16'] {
-  gap: var(--tappify-space-16);
-}
-
-[data-gap='24'] {
-  gap: var(--tappify-space-24);
-}
-
-[data-gap='32'] {
-  gap: var(--tappify-space-32);
-}
-
-[data-gap='40'] {
-  gap: var(--tappify-space-40);
-}
-
-[data-align='start'] {
-  align-items: flex-start;
-}
-
-[data-align='center'] {
-  align-items: center;
-}
-
-[data-align='end'] {
-  align-items: flex-end;
-}
-
-[data-align='stretch'] {
-  align-items: stretch;
-}
-
-[data-justify='start'] {
-  justify-content: flex-start;
-}
-
-[data-justify='center'] {
-  justify-content: center;
-}
-
-[data-justify='end'] {
-  justify-content: flex-end;
-}
-
-[data-justify='between'] {
-  justify-content: space-between;
-}
-
-.tap-button {
-  min-height: var(--tappify-control-height);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 1px solid transparent;
-  border-radius: var(--tappify-radius-control);
-  padding: 0 var(--tappify-space-12);
-  font: inherit;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease,
-    opacity 120ms ease;
-}
-
-.tap-button:focus-visible {
-  outline: 2px solid var(--tappify-deep-green);
-  outline-offset: 2px;
-}
-
-.tap-button:hover:not(:disabled) {
-  opacity: 0.88;
-}
-
-.tap-button:active:not(:disabled) {
-  opacity: 0.74;
-}
-
-.tap-button[data-variant='primary'] {
-  color: var(--tappify-deep-green);
-  background: var(--tappify-lime);
-}
-
-.tap-button[data-variant='secondary'] {
-  color: var(--tappify-fg-primary);
-  background: var(--tappify-bg-paper);
-  border-color: var(--tappify-divider);
-}
-
-.tap-button[data-variant='tertiary'] {
-  color: var(--tappify-deep-green);
-  background: transparent;
-}
-
-.tap-button[data-variant='inverse'] {
-  color: var(--tappify-bg-paper);
-  background: var(--tappify-inverse);
-}
-
-.tap-button[data-variant='destructive'] {
-  color: var(--tappify-on-accent);
-  background: var(--tappify-danger);
-}
-
-.tap-button:disabled {
-  color: var(--tappify-fg-disabled);
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-
-.tap-button[data-variant='primary']:disabled,
-.tap-button[data-variant='secondary']:disabled,
-.tap-button[data-variant='inverse']:disabled,
-.tap-button[data-variant='destructive']:disabled {
-  background: var(--tappify-bg-light-gray);
-}
-
-.tap-button[data-variant='tertiary']:disabled {
-  background: transparent;
-}
-
-.tap-button[data-size='compact'],
-.tap-button[data-size='sm'] {
-  min-height: 32px;
-  padding-inline: var(--tappify-space-12);
-  font-size: 13px;
-}
-
-.tap-button[data-size='xs'] {
-  min-height: 28px;
-  padding-inline: var(--tappify-space-8);
-  font-size: 12px;
-}
-
-.tap-button[data-size='lg'] {
-  min-height: 44px;
-  padding-inline: var(--tappify-space-24);
-}
-
-.tap-button[data-size^='icon'] {
-  width: var(--tappify-control-height);
-  padding: 0;
-}
-
-.tap-button[data-size='icon-xs'] {
-  width: 28px;
-  min-height: 28px;
-}
-
-.tap-button[data-size='icon-sm'] {
-  width: 32px;
-  min-height: 32px;
-}
-
-.tap-button[data-size='icon-lg'] {
-  width: 44px;
-  min-height: 44px;
-}
-
-.tap-button__spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid currentcolor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: tappify-spin 700ms linear infinite;
-}
-
-@keyframes tappify-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.tap-ui-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tappify-space-16);
-  min-width: 0;
-  padding: var(--tappify-space-24);
-  background: var(--tappify-bg-paper);
-  border-radius: var(--tappify-radius-card);
-}
-
-.tap-ui-card[data-size='sm'] {
-  gap: var(--tappify-space-12);
-  padding: var(--tappify-space-16);
-}
-
-.tap-card__header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--tappify-space-4) var(--tappify-space-16);
-  align-items: start;
-}
-
-.tap-card__title {
-  font-size: 16px;
-  font-weight: 650;
-  line-height: 1.3;
-}
-
-.tap-card__description {
-  color: var(--tappify-fg-sub);
-  grid-column: 1;
-}
-
-.tap-card__action {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-}
-
-.tap-card__content,
-.tap-card__footer {
-  min-width: 0;
-}
-
-.tap-card__footer {
-  color: var(--tappify-fg-sub);
-}
-
-.tap-ui-page-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--tappify-space-24);
-}
-
-.tap-page-header__copy {
-  min-width: 0;
-}
-
-.tap-page-header__title {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 650;
-  line-height: 1.2;
-}
-
-.tap-page-header__description {
-  margin-top: var(--tappify-space-8);
-  color: var(--tappify-fg-sub);
-}
-
-.tap-page-header__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--tappify-space-8);
-  flex: 0 0 auto;
-}
-
-@container tap-mount (max-width: 520px) {
-  .tap-ui-page-header {
-    flex-direction: column;
-  }
-
-  .tap-page-header__actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tap-button,
-  .tap-button__spinner {
-    transition: none;
-    animation: none;
-  }
-}
-
-.tap-ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tappify-space-8);
-  min-width: 0;
-}
-
-.tap-field__label {
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.tap-field__description,
-.tap-field__error {
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.tap-field__description {
-  color: var(--tappify-fg-sub);
-}
-
-.tap-field__error {
-  color: var(--tappify-danger);
-}
-
-.tap-ui-control {
-  width: 100%;
-  min-width: 0;
-  min-height: 49px;
-  padding: 0 var(--tappify-space-12);
-  color: var(--tappify-fg-primary);
-  background: var(--tappify-bg-paper);
-  border: 1px solid var(--tappify-divider);
-  border-radius: var(--tappify-radius-control);
-  font: inherit;
-  outline: none;
-  transition:
-    border-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.tap-textarea {
-  min-height: 112px;
-  padding-block: var(--tappify-space-12);
-  resize: vertical;
-}
-
-.tap-ui-control:focus-visible,
-.tap-checkbox:focus-visible {
-  border-color: var(--tappify-deep-green);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tappify-lime) 55%, transparent);
-}
-
-.tap-ui-control:disabled,
-.tap-checkbox:disabled {
-  color: var(--tappify-fg-sub);
-  background: var(--tappify-bg-light-gray);
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.tap-ui-control[aria-invalid='true'],
-.tap-checkbox[aria-invalid='true'] {
-  border-color: var(--tappify-danger);
-}
-
-.tap-checkbox {
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  display: inline-grid;
-  place-content: center;
-  flex: 0 0 auto;
-  background: var(--tappify-bg-paper);
-  border: 1px solid var(--tappify-divider);
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.tap-checkbox::before {
-  width: 9px;
-  height: 5px;
-  content: '';
-  border: solid var(--tappify-on-accent);
-  border-width: 0 0 2px 2px;
-  transform: rotate(-45deg) scale(0);
-}
-
-.tap-checkbox[data-state='checked'],
-.tap-checkbox[data-state='indeterminate'] {
-  background: var(--tappify-deep-green);
-  border-color: var(--tappify-deep-green);
-}
-
-.tap-checkbox[data-state='checked']::before {
-  transform: rotate(-45deg) scale(1);
-}
-
-.tap-checkbox[data-state='indeterminate']::before {
-  height: 0;
-  border-width: 0 0 2px;
-  transform: rotate(0) scale(1);
-}
-
-.tap-schema-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tappify-space-24);
-}
-
-.tap-checkbox-row {
-  display: flex;
-  align-items: center;
-  gap: var(--tappify-space-8);
-  cursor: pointer;
-}
-
-.tap-ui-field--checkbox > .tap-field__description,
-.tap-ui-field--checkbox > .tap-field__error {
-  margin-inline-start: 26px;
-}
-
-.tap-schema-form__actions {
-  flex-wrap: wrap;
-}
-
-@container tap-mount (max-width: 420px) {
-  .tap-schema-form__actions {
-    align-items: stretch;
-    flex-direction: column-reverse;
-  }
-}
-
-.tap-ui-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-  padding: var(--tappify-space-24);
-  background: rgb(18 18 18 / 58%);
-  backdrop-filter: blur(2px);
-  animation: tappify-fade-in 140ms ease-out;
-}
-
-.tap-ui-dialog {
-  width: min(100%, 520px);
-  max-height: min(88vh, 860px);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  color: var(--tappify-fg-primary);
-  background: var(--tappify-bg-paper);
-  border: 1px solid var(--tappify-divider);
-  border-radius: var(--tappify-radius-panel);
-  box-shadow: 0 24px 80px rgb(18 18 18 / 24%);
-  animation: tappify-dialog-in 160ms ease-out;
-}
-
-.tap-ui-dialog[data-surface='canvas'] {
-  background: var(--tappify-bg-canvas);
-}
-
-.tap-ui-dialog[data-size='compact'] {
-  width: min(100%, 360px);
-}
-
-.tap-ui-dialog[data-size='medium'],
-.tap-ui-dialog[data-size='confirmation'] {
-  width: min(100%, 440px);
-}
-
-.tap-ui-dialog[data-size='large'] {
-  width: min(100%, 680px);
-}
-
-.tap-ui-dialog[data-size='wide'] {
-  width: min(100%, 880px);
-}
-
-.tap-dialog__header,
-.tap-dialog__body,
-.tap-dialog__footer {
-  padding-inline: var(--tappify-space-24);
-}
-
-.tap-dialog__header {
-  position: relative;
-  padding-block: var(--tappify-space-24) var(--tappify-space-16);
-}
-
-.tap-dialog__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 650;
-  line-height: 1.25;
-}
-
-.tap-dialog__description {
-  margin-top: var(--tappify-space-8);
-  color: var(--tappify-fg-sub);
-}
-
-.tap-dialog__body {
-  min-height: 0;
-  padding-block: var(--tappify-space-16) var(--tappify-space-24);
-  overflow: auto;
-}
-
-.tap-dialog__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--tappify-space-8);
-  padding-block: var(--tappify-space-16) var(--tappify-space-24);
-  border-top: 1px solid var(--tappify-divider);
-}
-
-@keyframes tappify-fade-in {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes tappify-dialog-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.985);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tap-ui-dialog-overlay,
-  .tap-ui-dialog {
-    animation: none;
-  }
-}
-
-@media (max-width: 560px) {
-  .tap-ui-dialog-overlay {
-    padding: var(--tappify-space-12);
-  }
-
-  .tap-ui-dialog {
-    max-height: calc(100vh - 24px);
-  }
-
-  .tap-dialog__footer {
-    align-items: stretch;
-    flex-direction: column-reverse;
-  }
-}
-
-.tap-ui-table-container {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.tap-ui-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.tap-table__row {
-  border-bottom: 1px solid var(--tappify-divider);
-}
-
-.tap-table__row[data-variant='header'] {
-  height: 44px;
-}
-
-.tap-table__row[data-variant='body'] {
-  height: 48px;
-}
-
-.tap-table__head,
-.tap-table__cell {
-  padding: var(--tappify-space-8) var(--tappify-space-12);
-  text-align: start;
-  white-space: nowrap;
-}
-
-.tap-table__head {
-  color: var(--tappify-fg-sub);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.tap-table__cell {
-  font-size: 14px;
-}
-
-.tap-metric {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--tappify-space-4) var(--tappify-space-12);
-}
-
-.tap-metric__label,
-.tap-metric__description {
-  color: var(--tappify-fg-sub);
-}
-
-.tap-metric__label {
-  grid-column: 1 / -1;
-  font-size: 14px;
-}
-
-.tap-metric__value {
-  font-size: 28px;
-  font-weight: 650;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.15;
-}
-
-.tap-metric__delta {
-  align-self: end;
-  padding-bottom: 2px;
-  color: var(--tappify-fg-sub);
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-}
-
-.tap-metric__delta[data-direction='up'] {
-  color: var(--tappify-deep-green);
-}
-
-.tap-metric__delta[data-direction='down'] {
-  color: var(--tappify-danger);
-}
-
-.tap-metric__description {
-  grid-column: 1 / -1;
-  font-size: 13px;
-}
-
-.tap-ui-skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tappify-space-8);
-}
-
-.tap-skeleton__line {
-  display: block;
-  width: 100%;
-  height: 12px;
-  border-radius: 999px;
-  background: linear-gradient(
-    90deg,
-    var(--tappify-bg-light-gray) 25%,
-    var(--tappify-bg-paper) 50%,
-    var(--tappify-bg-light-gray) 75%
-  );
-  background-size: 200% 100%;
-  animation: tappify-skeleton 1.4s ease-in-out infinite;
-}
-
-@keyframes tappify-skeleton {
-  to {
-    background-position: -200% 0;
-  }
-}
-
-.tap-ui-state {
-  align-items: center;
-  justify-content: center;
-  min-height: 180px;
-  padding: var(--tappify-space-32) var(--tappify-space-24);
-  text-align: center;
-  color: var(--tappify-fg-sub);
-}
-
-.tap-state__title {
-  color: var(--tappify-fg-primary);
-  font-size: 18px;
-  font-weight: 650;
-}
-
-.tap-ui-state--error .tap-state__title,
-.tap-state__code {
-  color: var(--tappify-danger);
-}
-
-.tap-state__code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tap-skeleton__line {
-    animation: none;
-  }
-}