@phcdevworks/spectre-ui/dist/components.css

Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.

@layer components {
  .sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-space-2xs, 0.25rem);
    padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
    border-radius: var(--sp-radius-md, 4px);
    border: 1px solid transparent;
    font-family: var(--sp-font-family-sans, system-ui);
    font-size: var(--sp-font-md-size, 1rem);
    line-height: 1;
    font-weight: var(--sp-font-md-weight, 500);
    transition: background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
      color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
      box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
    cursor: pointer;
    min-height: var(--sp-min-touch-target, 44px);
  }

  .sp-btn-sm {
    padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
    font-size: var(--sp-font-sm-size, 0.875rem);
    line-height: var(--sp-font-sm-line-height, 1.5rem);
  }

  .sp-btn-md {
    padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
    font-size: var(--sp-font-md-size, 1rem);
    line-height: var(--sp-font-md-line-height, 1.75rem);
  }

  .sp-btn-lg {
    padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
    font-size: var(--sp-font-lg-size, 1.25rem);
    line-height: var(--sp-font-lg-line-height, 2rem);
  }

  .sp-btn-primary {
    background-color: var(--sp-button-primary-bg, #8652ff);
    color: var(--sp-button-primary-text, #ffffff);
    box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
  }

  .sp-btn-primary.sp-btn-hover,
  .sp-btn-primary:hover {
    background-color: var(--sp-button-primary-bghover, #6c32e6);
  }

  .sp-btn-primary.sp-btn-active,
  .sp-btn-primary:active {
    background-color: var(--sp-button-primary-bgactive, #5626b4);
  }

  .sp-btn-primary.sp-btn-disabled,
  .sp-btn-primary:disabled {
    background-color: var(--sp-button-primary-bgdisabled, #cbd5f5);
    color: var(--sp-button-primary-textdisabled, #94a3b8);
  }

  .sp-btn-secondary {
    background-color: var(--sp-button-secondary-bg, #ffffff);
    color: var(--sp-button-secondary-text, #8652ff);
    border-color: var(--sp-button-secondary-border, #8652ff);
  }

  .sp-btn-secondary.sp-btn-hover,
  .sp-btn-secondary:hover {
    background-color: var(--sp-button-secondary-bghover, #f1f5f9);
  }

  .sp-btn-secondary.sp-btn-active,
  .sp-btn-secondary:active {
    background-color: var(--sp-button-secondary-bgactive, #e2e8f0);
  }

  .sp-btn-secondary.sp-btn-disabled,
  .sp-btn-secondary:disabled {
    background-color: var(--sp-button-secondary-bgdisabled, #f8fafc);
    color: var(--sp-button-secondary-textdisabled, #94a3b8);
    border-color: var(--sp-button-secondary-borderdisabled, #cbd5f5);
  }

  .sp-btn-ghost {
    background-color: var(--sp-button-ghost-bg, transparent);
    color: var(--sp-button-ghost-text, #8652ff);
  }

  .sp-btn-ghost.sp-btn-hover,
  .sp-btn-ghost:hover {
    background-color: var(--sp-button-ghost-bghover, #f5f0ff);
  }

  .sp-btn-ghost.sp-btn-active,
  .sp-btn-ghost:active {
    background-color: var(--sp-button-ghost-bgactive, #ebe2ff);
  }

  .sp-btn-ghost.sp-btn-disabled,
  .sp-btn-ghost:disabled {
    color: var(--sp-button-ghost-textdisabled, #94a3b8);
    background-color: var(--sp-button-ghost-bgdisabled, transparent);
  }

  .sp-btn-danger {
    background-color: var(--sp-button-danger-bg, #ef4444);
    color: var(--sp-button-danger-text, #ffffff);
  }

  .sp-btn-danger.sp-btn-hover,
  .sp-btn-danger:hover {
    background-color: var(--sp-button-danger-bghover, #dc2626);
  }

  .sp-btn-danger.sp-btn-active,
  .sp-btn-danger:active {
    background-color: var(--sp-button-danger-bgactive, #b91c1c);
  }

  .sp-btn-danger.sp-btn-disabled,
  .sp-btn-danger:disabled {
    background-color: var(--sp-button-danger-bgdisabled, #fecaca);
    color: var(--sp-button-danger-textdisabled, #94a3b8);
  }

  .sp-btn-success {
    background-color: var(--sp-button-success-bg, #22c55e);
    color: var(--sp-button-success-text, #ffffff);
  }

  .sp-btn-success.sp-btn-hover,
  .sp-btn-success:hover {
    background-color: var(--sp-button-success-bghover, #16a34a);
  }

  .sp-btn-success.sp-btn-active,
  .sp-btn-success:active {
    background-color: var(--sp-button-success-bgactive, #15803d);
  }

  .sp-btn-success.sp-btn-disabled,
  .sp-btn-success:disabled {
    background-color: var(--sp-button-success-bgdisabled, #bbf7d0);
    color: var(--sp-button-success-textdisabled, #94a3b8);
  }

  .sp-btn-disabled,
  .sp-btn:disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: var(--sp-opacity-disabled, 0.38);
  }

  .sp-input {
    width: 100%;
    display: block;
    padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
    border-radius: var(--sp-radius-md, 4px);
    border: 1px solid var(--sp-form-default-border, #cbd5f5);
    background-color: var(--sp-form-default-bg, #ffffff);
    color: var(--sp-form-default-text, #0f172a);
    font-family: var(--sp-font-family-sans, system-ui);
    font-size: var(--sp-font-md-size, 1rem);
    line-height: var(--sp-font-md-line-height, 1.75rem);
    transition: border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
      box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
      background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
  }

  .sp-input::placeholder {
    color: var(--sp-form-default-placeholder, #94a3b8);
  }

  .sp-input:focus,
  .sp-input-focus {
    border-color: var(--sp-form-focus-border, #8652ff);
    box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-form-focus-ring, #8652ff);
    outline: none;
  }

  .sp-input-error {
    border-color: var(--sp-form-invalid-border, #ef4444);
    background-color: var(--sp-form-invalid-bg, #fef2f2);
    color: var(--sp-form-invalid-text, #b91c1c);
  }

  .sp-input-success {
    border-color: var(--sp-form-valid-border, #22c55e);
    background-color: var(--sp-form-valid-bg, #f0fdf4);
    color: var(--sp-form-valid-text, #15803d);
  }

  .sp-input-disabled,
  .sp-input:disabled {
    background-color: var(--sp-form-disabled-bg, #f8fafc);
    border-color: var(--sp-form-disabled-border, #e2e8f0);
    color: var(--sp-form-disabled-text, #94a3b8);
    cursor: not-allowed;
  }

  .sp-card {
    background-color: var(--sp-form-default-bg, #ffffff);
    color: var(--sp-form-default-text, #0f172a);
    border-radius: var(--sp-radius-lg, 8px);
    padding: var(--sp-space-lg, 1.5rem);
    box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
    border: 1px solid transparent;
  }

  .sp-card-elevated {
    box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
  }

  .sp-card-flat {
    box-shadow: var(--sp-shadow-none, none);
    border-color: var(--sp-color-neutral-200, #e2e8f0);
  }
}