@usgb/forms 0.1.0 → 1.0.0

package/dist/usgb-forms.css

@@ -0,0 +1,574 @@
+/* Ported PWA form design tokens — used subset from magento-frontend
+   styles/variables.css. Hosts override semantic --usgb-* vars or classes
+   on .usgb-form (see README). */
+
+.usgb-form {
+    --usgb-primary: #ffffff;
+    --usgb-secondary: #000000;
+    --usgb-text-base: #001f3d;
+    --usgb-grey-1: #4d4d4d;
+    --usgb-grey-2: #7d7d7d;
+    --usgb-grey-3: #aba9a9;
+    --usgb-grey-4: #d9d9d9;
+    --usgb-grey-6: #f2f2f2;
+    --usgb-grey-9: #828282;
+    /* Figma calls this "Gray 4"; renamed to avoid colliding with
+       "Greyscale/Grey 4" (--usgb-grey-4), which is a different value. */
+    --usgb-disabled: #bdbdbd;
+    --usgb-gold-1: #6d4b0f;
+    --usgb-gold-2: #f4e08e;
+    --usgb-alert-danger: #e61b1b;
+    --usgb-blue-1: #001f3d;
+    --usgb-hover: #5caad6;
+    --usgb-sidebar-field-text: #333333;
+    --usgb-sidebar-link: #275582;
+    --usgb-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont,
+        'Helvetica Neue', Helvetica, sans-serif;
+    --usgb-font-secondary: 'Kameron', Georgia, 'Times New Roman', serif;
+    --usgb-outline-focused: 2px solid var(--usgb-gold-1);
+
+    --usgb-form-surface: transparent;
+    --usgb-form-content: var(--usgb-text-base);
+    --usgb-form-muted: var(--usgb-grey-1);
+    --usgb-field-label: var(--usgb-grey-1);
+    --usgb-field-background: var(--usgb-primary);
+    --usgb-field-border: var(--usgb-secondary);
+    --usgb-field-text: var(--usgb-secondary);
+    --usgb-field-placeholder: var(--usgb-grey-3);
+    --usgb-link: var(--usgb-blue-1);
+    --usgb-link-hover: var(--usgb-hover);
+    --usgb-checkbox-background: var(--usgb-primary);
+    --usgb-checkbox-border: var(--usgb-secondary);
+    --usgb-checkbox-mark: var(--usgb-gold-1);
+    --usgb-button-background: var(--usgb-blue-1);
+    --usgb-button-text: var(--usgb-primary);
+    --usgb-button-hover-background: var(--usgb-hover);
+    --usgb-button-disabled-background: var(--usgb-disabled);
+    --usgb-button-disabled-text: var(--usgb-primary);
+    --usgb-newsletter-underline: var(--usgb-blue-1);
+
+    --usgb-group-gap: 1.5rem;
+    --usgb-grid-gap: 1rem;
+    --usgb-grid-margin-bottom: 0;
+    --usgb-heading-font-size: 1.75rem;
+    --usgb-heading-font-weight: 700;
+    --usgb-heading-line-height: 1.2;
+    --usgb-heading-letter-spacing: 0;
+    --usgb-heading-transform: none;
+    --usgb-heading-margin: 0 0 0.75rem;
+    --usgb-body-font-size: 0.875rem;
+    --usgb-body-line-height: 1.5rem;
+    --usgb-body-margin: 0 0 1.25rem;
+    --usgb-label-margin-bottom: 0.375rem;
+    --usgb-label-font-size: 0.75rem;
+    --usgb-label-font-weight: 700;
+    --usgb-label-letter-spacing: 0.5px;
+    --usgb-label-line-height: 0.875rem;
+    --usgb-label-transform: uppercase;
+    --usgb-field-padding: 0.875rem 0.9375rem;
+    --usgb-field-font-size: 0.75rem;
+    --usgb-field-font-weight: 500;
+    --usgb-field-line-height: 1.125rem;
+    --usgb-field-letter-spacing: -0.25px;
+    --usgb-field-margin-bottom: 0.375rem;
+    --usgb-field-radius: 0;
+    --usgb-field-min-height: auto;
+    --usgb-field-transform: none;
+    --usgb-placeholder-transform: none;
+    --usgb-error-font-size: 0.75rem;
+    --usgb-error-line-height: 1.125rem;
+    --usgb-error-margin-top: 0;
+    --usgb-consent-gap: 0;
+    --usgb-consent-margin-bottom: 0.75rem;
+    --usgb-checkbox-size: 1.25rem;
+    --usgb-checkbox-margin: 0.125rem 0.625rem 0 0;
+    --usgb-consent-font-size: 0.875rem;
+    --usgb-consent-font-weight: 400;
+    --usgb-consent-line-height: 1.5rem;
+    --usgb-consent-color: var(--usgb-form-content);
+    --usgb-consent-transform: none;
+    --usgb-button-padding: 0.625rem 1.875rem;
+    --usgb-button-min-height: 2.1875rem;
+    --usgb-button-radius: 3.125rem;
+    --usgb-button-font-size: 0.75rem;
+    --usgb-button-font-weight: 700;
+    --usgb-button-line-height: 0.875rem;
+    --usgb-button-letter-spacing: 0.5px;
+    --usgb-button-width: 100%;
+
+    box-sizing: border-box;
+    font-family: var(--usgb-font-primary);
+    color: var(--usgb-form-content);
+    background: var(--usgb-form-surface);
+    width: 100%;
+
+    /* Hosts drop this form into sidebars and multi-column blocks, so its own
+       width — not the viewport's — decides how many fields fit per row. */
+    container: usgb-form / inline-size;
+}
+
+.usgb-form *,
+.usgb-form *::before,
+.usgb-form *::after {
+    box-sizing: border-box;
+}
+
+/* Layout */
+
+.usgb-form .usgb-form-group {
+    margin-bottom: var(--usgb-group-gap);
+}
+
+.usgb-form .usgb-form-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--usgb-grid-gap);
+    margin-bottom: var(--usgb-grid-margin-bottom);
+}
+
+/* Name row only — do not stack form-group margin on top of grid gap. */
+.usgb-form .usgb-form-grid > .usgb-form-group {
+    margin-bottom: 0;
+}
+
+@container usgb-form (min-width: 20rem) {
+    .usgb-form[data-variant~='two-column'] .usgb-form-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* Safari < 16 / Firefox < 110 have no container queries; fall back to the
+   viewport so those browsers still get a two-up name row on desktop. */
+@supports not (container-type: inline-size) {
+    @media (min-width: 768px) {
+        .usgb-form[data-variant~='two-column'] .usgb-form-grid {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+}
+
+/* Heading, body, status */
+
+.usgb-form .usgb-form-heading {
+    font-family: var(--usgb-font-secondary);
+    font-size: var(--usgb-heading-font-size);
+    font-weight: var(--usgb-heading-font-weight);
+    line-height: var(--usgb-heading-line-height);
+    letter-spacing: var(--usgb-heading-letter-spacing);
+    text-transform: var(--usgb-heading-transform);
+    margin: var(--usgb-heading-margin);
+    color: var(--usgb-form-content);
+}
+
+.usgb-form .usgb-form-body {
+    font-size: var(--usgb-body-font-size);
+    line-height: var(--usgb-body-line-height);
+    margin: var(--usgb-body-margin);
+    color: var(--usgb-form-muted);
+}
+
+.usgb-form .usgb-form-status {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+}
+
+.usgb-form .usgb-form-status-success {
+    color: var(--usgb-form-content);
+}
+
+.usgb-form .usgb-form-status-error {
+    color: var(--usgb-alert-danger);
+}
+
+/* Field label */
+
+.usgb-form .usgb-field-label {
+    display: block;
+    margin-bottom: var(--usgb-label-margin-bottom);
+    color: var(--usgb-field-label);
+    font-size: var(--usgb-label-font-size);
+    letter-spacing: var(--usgb-label-letter-spacing);
+    line-height: var(--usgb-label-line-height);
+    font-weight: var(--usgb-label-font-weight);
+    text-transform: var(--usgb-label-transform);
+}
+
+.usgb-form .usgb-field-label-asterisk {
+    margin-left: 0.125rem;
+    color: var(--usgb-alert-danger);
+}
+
+/* Dense: no visible field labels; labels stay in the a11y tree via sr-only. */
+.usgb-form .usgb-field-label--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Text inputs */
+
+.usgb-form .usgb-field-control {
+    appearance: none;
+    width: 100%;
+    border: 1px solid var(--usgb-field-border);
+    background: var(--usgb-field-background);
+    color: var(--usgb-field-text);
+    padding: var(--usgb-field-padding);
+    font-family: inherit;
+    font-weight: var(--usgb-field-font-weight);
+    font-size: var(--usgb-field-font-size);
+    line-height: var(--usgb-field-line-height);
+    letter-spacing: var(--usgb-field-letter-spacing);
+    margin-bottom: var(--usgb-field-margin-bottom);
+    border-radius: var(--usgb-field-radius);
+    min-height: var(--usgb-field-min-height);
+    text-transform: var(--usgb-field-transform);
+}
+
+@media (pointer: coarse) {
+    .usgb-form .usgb-field-control {
+        font-size: max(1rem, var(--usgb-field-font-size));
+    }
+}
+
+.usgb-form .usgb-field-control::placeholder {
+    color: var(--usgb-field-placeholder);
+    text-transform: var(--usgb-placeholder-transform);
+}
+
+/* Inset shadow rather than a wider border, so thickening the focus ring to
+   the designed 2px does not shift the field by a pixel. */
+.usgb-form .usgb-field-control:focus {
+    border-color: var(--usgb-gold-1);
+    box-shadow: inset 0 0 0 1px var(--usgb-gold-1);
+    outline: none;
+}
+
+.usgb-form .usgb-field-control.usgb-field-invalid {
+    border-color: var(--usgb-alert-danger);
+    box-shadow: none;
+    outline: none;
+}
+
+.usgb-form .usgb-field-control:disabled {
+    outline: none;
+    border-color: var(--usgb-grey-9);
+}
+
+/* Errors */
+
+.usgb-form .usgb-field-error {
+    color: var(--usgb-form-muted);
+    font-size: var(--usgb-error-font-size);
+    font-weight: 500;
+    line-height: var(--usgb-error-line-height);
+    letter-spacing: -0.015625rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-top: var(--usgb-error-margin-top);
+}
+
+.usgb-form .usgb-field-error-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    min-width: 0.75rem;
+    flex-shrink: 0;
+    color: var(--usgb-alert-danger);
+}
+
+/* Consent checkboxes and clickwrap notices */
+
+.usgb-form .usgb-consent-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--usgb-consent-gap);
+    margin-bottom: var(--usgb-consent-margin-bottom);
+}
+
+.usgb-form .usgb-form-checkbox-wrap {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin: var(--usgb-checkbox-margin);
+}
+
+.usgb-form .usgb-form-checkbox {
+    min-width: var(--usgb-checkbox-size);
+    height: var(--usgb-checkbox-size);
+    width: var(--usgb-checkbox-size);
+    appearance: none;
+    border: 1px solid var(--usgb-checkbox-border);
+    background-color: var(--usgb-checkbox-background);
+    border-radius: 0;
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.usgb-form .usgb-form-checkbox-mark {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 0.625rem;
+    height: 0.4375rem;
+    color: var(--usgb-checkbox-mark);
+    pointer-events: none;
+    opacity: 0;
+}
+
+.usgb-form .usgb-form-checkbox:checked + .usgb-form-checkbox-mark {
+    opacity: 1;
+}
+
+.usgb-form .usgb-consent-copy {
+    font-size: var(--usgb-consent-font-size);
+    font-weight: var(--usgb-consent-font-weight);
+    line-height: var(--usgb-consent-line-height);
+    color: var(--usgb-consent-color);
+    text-transform: var(--usgb-consent-transform);
+}
+
+.usgb-form .usgb-consent-notice {
+    margin: 0 0 var(--usgb-consent-margin-bottom);
+}
+
+.usgb-form .usgb-consent-copy a {
+    color: var(--usgb-link);
+    text-decoration: underline;
+}
+
+.usgb-form .usgb-consent-copy a:hover {
+    color: var(--usgb-link-hover);
+}
+
+/* Primary button (ported from pylot-ui Button primary) */
+
+.usgb-form .usgb-btn {
+    cursor: pointer;
+    display: inline-flex;
+    padding: var(--usgb-button-padding);
+    min-height: var(--usgb-button-min-height);
+    border-radius: var(--usgb-button-radius);
+    line-height: var(--usgb-button-line-height);
+    transition: background-color 150ms ease-in-out, color 150ms ease-in-out,
+        border-color 150ms ease-in-out;
+    font-weight: var(--usgb-button-font-weight);
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    text-transform: uppercase;
+    letter-spacing: var(--usgb-button-letter-spacing);
+    border: 1px solid transparent;
+    font-family: inherit;
+    font-size: var(--usgb-button-font-size);
+    width: var(--usgb-button-width);
+}
+
+.usgb-form .usgb-btn-primary {
+    background: var(--usgb-button-background);
+    color: var(--usgb-button-text);
+    border-color: var(--usgb-button-background);
+}
+
+.usgb-form .usgb-btn-primary:hover:not(:disabled) {
+    background: var(--usgb-button-hover-background);
+    color: var(--usgb-button-text);
+    border-color: var(--usgb-button-hover-background);
+}
+
+.usgb-form .usgb-btn:focus {
+    outline: none;
+}
+
+.usgb-form .usgb-btn:focus-visible {
+    outline: var(--usgb-outline-focused);
+}
+
+.usgb-form .usgb-btn:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.usgb-form .usgb-btn-primary:disabled {
+    background: var(--usgb-button-disabled-background);
+    color: var(--usgb-button-disabled-text);
+    border-color: var(--usgb-button-disabled-background);
+}
+
+/* Appearances */
+
+.usgb-form[data-appearance='navy'] {
+    --usgb-form-surface: var(--usgb-blue-1);
+    --usgb-form-content: var(--usgb-primary);
+    --usgb-form-muted: var(--usgb-primary);
+    --usgb-field-label: var(--usgb-primary);
+    --usgb-field-border: var(--usgb-grey-3);
+    --usgb-link: var(--usgb-primary);
+    --usgb-link-hover: var(--usgb-primary);
+    --usgb-checkbox-border: var(--usgb-grey-4);
+    --usgb-button-background: var(--usgb-gold-2);
+    --usgb-button-text: var(--usgb-blue-1);
+    --usgb-button-hover-background: var(--usgb-primary);
+    --usgb-button-disabled-background: var(--usgb-grey-2);
+    --usgb-button-disabled-text: var(--usgb-grey-6);
+    --usgb-newsletter-underline: var(--usgb-primary);
+
+    padding: 2rem;
+    border-radius: 0.75rem;
+}
+
+/* Variants */
+
+.usgb-form[data-variant~='dense'] {
+    --usgb-group-gap: 1.25rem;
+    --usgb-grid-gap: 1rem;
+    --usgb-grid-margin-bottom: 1.25rem;
+}
+
+/* Compact blog/sidebar kit — match live HubSpot density, design-sheet tokens. */
+.usgb-form[data-variant~='sidebar'] {
+    --usgb-field-text: var(--usgb-sidebar-field-text);
+    --usgb-group-gap: 0.625rem;
+    --usgb-grid-gap: 0.625rem;
+    --usgb-grid-margin-bottom: 0.625rem;
+    --usgb-heading-font-size: 1.25rem;
+    --usgb-heading-line-height: 1.25;
+    --usgb-heading-margin: 0 0 0.5rem;
+    --usgb-body-font-size: 0.75rem;
+    --usgb-body-line-height: 1.25rem;
+    --usgb-body-margin: 0 0 0.625rem;
+    --usgb-field-min-height: 1.875rem;
+    --usgb-field-padding: 0.25rem 0.9375rem;
+    --usgb-field-font-size: 0.8125rem;
+    --usgb-field-font-weight: 400;
+    --usgb-field-line-height: 1.25rem;
+    --usgb-field-letter-spacing: 0;
+    --usgb-field-margin-bottom: 0;
+    --usgb-error-font-size: 0.6875rem;
+    --usgb-error-line-height: 1rem;
+    --usgb-error-margin-top: 0.125rem;
+    --usgb-consent-gap: 0.5rem;
+    --usgb-consent-margin-bottom: 0.125rem;
+    --usgb-checkbox-size: 1.125rem;
+    --usgb-checkbox-margin: 0.125rem 0 0;
+    --usgb-consent-font-size: 0.6875rem;
+    --usgb-consent-line-height: 1.4;
+    --usgb-consent-color: var(--usgb-grey-1);
+}
+
+.usgb-form[data-variant~='sidebar'][data-appearance='light'] {
+    --usgb-field-border: var(--usgb-grey-4);
+    --usgb-link: var(--usgb-sidebar-link);
+}
+
+.usgb-form[data-variant~='sidebar'][data-appearance='navy'] {
+    --usgb-consent-color: var(--usgb-form-muted);
+}
+
+.usgb-form[data-variant~='sidebar'] .usgb-consent-copy {
+    flex: 1;
+    min-width: 0;
+}
+
+.usgb-form[data-variant~='large'] {
+    --usgb-group-gap: 1.25rem;
+    --usgb-grid-gap: 1.25rem;
+    --usgb-grid-margin-bottom: 1.25rem;
+    --usgb-heading-font-size: 2rem;
+    --usgb-heading-font-weight: 700;
+    --usgb-heading-line-height: 3rem;
+    --usgb-heading-letter-spacing: -0.03125rem;
+    --usgb-heading-transform: uppercase;
+    --usgb-label-margin-bottom: 0.125rem;
+    --usgb-label-font-size: 1rem;
+    --usgb-label-font-weight: 400;
+    --usgb-label-letter-spacing: 0;
+    --usgb-label-line-height: 1.32;
+    --usgb-label-transform: none;
+    --usgb-field-padding: 1rem 1.25rem;
+    --usgb-field-font-size: 1rem;
+    --usgb-field-font-weight: 400;
+    --usgb-field-line-height: 1.32;
+    --usgb-field-letter-spacing: 0;
+    --usgb-field-radius: 0.25rem;
+    --usgb-consent-gap: 0.5rem;
+    --usgb-checkbox-size: 1.5rem;
+    --usgb-checkbox-margin: 0;
+    --usgb-consent-font-size: 1.125rem;
+    --usgb-consent-line-height: 1.75rem;
+    --usgb-button-min-height: 3.4375rem;
+    --usgb-button-font-size: 1rem;
+}
+
+/* Newsletter kind: underline email + side CTA */
+
+.usgb-form[data-kind='newsletter'] {
+    --usgb-heading-font-size: 1.5rem;
+    --usgb-heading-font-weight: 700;
+    --usgb-heading-line-height: 1.2;
+    --usgb-heading-margin: 0 0 0.625rem;
+    --usgb-heading-transform: none;
+    --usgb-body-margin: 0 0 1.25rem;
+    --usgb-error-margin-top: 0.5rem;
+}
+
+.usgb-form[data-kind='newsletter'] .usgb-form-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.usgb-form[data-kind='newsletter'] .usgb-form-inline .usgb-form-group {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-bottom: 0;
+}
+
+.usgb-form[data-kind='newsletter'] .usgb-form-inline .usgb-field-control {
+    border: 0;
+    border-bottom: 1px solid var(--usgb-newsletter-underline);
+    background: transparent;
+    color: var(--usgb-form-content);
+    border-radius: 0;
+    padding: 0.375rem 0;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+.usgb-form[data-kind='newsletter']
+    .usgb-form-inline
+    .usgb-field-control::placeholder {
+    color: var(--usgb-grey-9);
+    text-transform: none;
+}
+
+.usgb-form[data-kind='newsletter'] .usgb-form-inline .usgb-field-control:focus {
+    border-color: var(--usgb-gold-1);
+    box-shadow: none;
+    outline: none;
+}
+
+.usgb-form[data-kind='newsletter']
+    .usgb-form-inline
+    .usgb-field-control.usgb-field-invalid {
+    border-color: var(--usgb-alert-danger);
+    box-shadow: none;
+}
+
+.usgb-form[data-kind='newsletter'] .usgb-form-inline .usgb-btn {
+    width: auto;
+    flex: 0 0 auto;
+    min-height: 1.8125rem;
+    padding: 0 1.5625rem;
+    font-size: 0.875rem;
+    line-height: 1.8125rem;
+}