@blukavantui/community 0.0.0-stage → 1.1.0

package/styles/button.css

@@ -0,0 +1,625 @@
+/* BluKavantUi_Community_Core → Button → Style Sheet.
+   Extracted from the published BluUITheme on 2026-10-09.
+   Size selectors are strengthened for later OutSystems phone/tablet Theme rules;
+   Default and Secondary use neutral surfaces matching Chip's palette.
+   Keep the shared --blu-* DESIGN TOKENS in BluUITheme.
+   Includes existing variants, sizes, loading spinner, focus, and preview. */
+
+/* ============================================================
+   BUTTON — BASE
+   ============================================================ */
+
+.blu-button.blu-button {
+    appearance: none;
+    -webkit-appearance: none;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--blu-space-2);
+
+    box-sizing: border-box;
+
+    margin: 0;
+    padding: 0;
+
+    border: 1px solid transparent;
+    border-radius: var(--blu-radius-md);
+
+    font-family: var(--blu-font-family);
+    font-weight: var(--blu-font-weight-semibold);
+    line-height: 1;
+
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    cursor: pointer;
+    user-select: none;
+
+    box-shadow: none;
+
+    transition:
+        background-color var(--blu-transition-fast),
+        border-color var(--blu-transition-fast),
+        color var(--blu-transition-fast),
+        box-shadow var(--blu-transition-fast),
+        transform var(--blu-transition-fast);
+}
+
+
+/* ============================================================
+   BUTTON — COLORS
+   These only define variables.
+   Variant rules below decide how they're displayed.
+   ============================================================ */
+
+
+/* Shared palette. Existing Button variants remain Filled, Outlined, Ghost.
+   Named presets have a soft filled surface; status buttons have solid fills.
+   Default and Secondary keep their neutral button appearance. */
+.blu-button.blu-button--default {
+    --blu-button-color: var(--bluui-color-default-text);
+    --blu-button-hover: var(--bluui-color-default-text);
+    --blu-button-active: var(--bluui-color-default-text);
+    --blu-button-soft: var(--bluui-color-default-soft);
+    --blu-button-soft-active: var(--bluui-color-default-border);
+    --blu-button-fill: var(--bluui-color-default-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-default-text);
+}
+
+.blu-button.blu-button--primary {
+    --blu-button-color: var(--bluui-color-primary-text);
+    --blu-button-hover: var(--bluui-color-primary-text);
+    --blu-button-active: var(--bluui-color-primary-text);
+    --blu-button-soft: var(--bluui-color-primary-soft);
+    --blu-button-soft-active: var(--bluui-color-primary-border);
+    --blu-button-fill: var(--bluui-color-primary-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-primary-contrast);
+}
+
+.blu-button.blu-button--secondary {
+    --blu-button-color: var(--bluui-color-secondary-text);
+    --blu-button-hover: var(--bluui-color-secondary-text);
+    --blu-button-active: var(--bluui-color-secondary-text);
+    --blu-button-soft: var(--bluui-color-secondary-soft);
+    --blu-button-soft-active: var(--bluui-color-secondary-border);
+    --blu-button-fill: var(--bluui-color-secondary-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-secondary-text);
+}
+
+.blu-button.blu-button--success {
+    --blu-button-color: var(--bluui-color-success-text);
+    --blu-button-hover: var(--bluui-color-success-text);
+    --blu-button-active: var(--bluui-color-success-text);
+    --blu-button-soft: var(--bluui-color-success-soft);
+    --blu-button-soft-active: var(--bluui-color-success-border);
+    --blu-button-fill: var(--bluui-color-success-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-success-contrast);
+}
+
+.blu-button.blu-button--processing {
+    --blu-button-color: var(--bluui-color-processing-text);
+    --blu-button-hover: var(--bluui-color-processing-text);
+    --blu-button-active: var(--bluui-color-processing-text);
+    --blu-button-soft: var(--bluui-color-processing-soft);
+    --blu-button-soft-active: var(--bluui-color-processing-border);
+    --blu-button-fill: var(--bluui-color-processing-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-processing-contrast);
+}
+
+.blu-button.blu-button--warning {
+    --blu-button-color: var(--bluui-color-warning-text);
+    --blu-button-hover: var(--bluui-color-warning-text);
+    --blu-button-active: var(--bluui-color-warning-text);
+    --blu-button-soft: var(--bluui-color-warning-soft);
+    --blu-button-soft-active: var(--bluui-color-warning-border);
+    --blu-button-fill: var(--bluui-color-warning-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-warning-contrast);
+}
+
+.blu-button.blu-button--error {
+    --blu-button-color: var(--bluui-color-error-text);
+    --blu-button-hover: var(--bluui-color-error-text);
+    --blu-button-active: var(--bluui-color-error-text);
+    --blu-button-soft: var(--bluui-color-error-soft);
+    --blu-button-soft-active: var(--bluui-color-error-border);
+    --blu-button-fill: var(--bluui-color-error-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-error-contrast);
+}
+
+.blu-button.blu-button--danger {
+    --blu-button-color: var(--bluui-color-danger-text);
+    --blu-button-hover: var(--bluui-color-danger-text);
+    --blu-button-active: var(--bluui-color-danger-text);
+    --blu-button-soft: var(--bluui-color-danger-soft);
+    --blu-button-soft-active: var(--bluui-color-danger-border);
+    --blu-button-fill: var(--bluui-color-danger-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-danger-contrast);
+}
+
+.blu-button.blu-button--magenta {
+    --blu-button-color: var(--bluui-color-magenta-text);
+    --blu-button-hover: var(--bluui-color-magenta-text);
+    --blu-button-active: var(--bluui-color-magenta-text);
+    --blu-button-soft: var(--bluui-color-magenta-soft);
+    --blu-button-soft-active: var(--bluui-color-magenta-border);
+    --blu-button-fill: var(--bluui-color-magenta-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-magenta-text);
+}
+
+.blu-button.blu-button--red {
+    --blu-button-color: var(--bluui-color-red-text);
+    --blu-button-hover: var(--bluui-color-red-text);
+    --blu-button-active: var(--bluui-color-red-text);
+    --blu-button-soft: var(--bluui-color-red-soft);
+    --blu-button-soft-active: var(--bluui-color-red-border);
+    --blu-button-fill: var(--bluui-color-red-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-red-text);
+}
+
+.blu-button.blu-button--volcano {
+    --blu-button-color: var(--bluui-color-volcano-text);
+    --blu-button-hover: var(--bluui-color-volcano-text);
+    --blu-button-active: var(--bluui-color-volcano-text);
+    --blu-button-soft: var(--bluui-color-volcano-soft);
+    --blu-button-soft-active: var(--bluui-color-volcano-border);
+    --blu-button-fill: var(--bluui-color-volcano-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-volcano-text);
+}
+
+.blu-button.blu-button--orange {
+    --blu-button-color: var(--bluui-color-orange-text);
+    --blu-button-hover: var(--bluui-color-orange-text);
+    --blu-button-active: var(--bluui-color-orange-text);
+    --blu-button-soft: var(--bluui-color-orange-soft);
+    --blu-button-soft-active: var(--bluui-color-orange-border);
+    --blu-button-fill: var(--bluui-color-orange-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-orange-text);
+}
+
+.blu-button.blu-button--gold {
+    --blu-button-color: var(--bluui-color-gold-text);
+    --blu-button-hover: var(--bluui-color-gold-text);
+    --blu-button-active: var(--bluui-color-gold-text);
+    --blu-button-soft: var(--bluui-color-gold-soft);
+    --blu-button-soft-active: var(--bluui-color-gold-border);
+    --blu-button-fill: var(--bluui-color-gold-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-gold-text);
+}
+
+.blu-button.blu-button--lime {
+    --blu-button-color: var(--bluui-color-lime-text);
+    --blu-button-hover: var(--bluui-color-lime-text);
+    --blu-button-active: var(--bluui-color-lime-text);
+    --blu-button-soft: var(--bluui-color-lime-soft);
+    --blu-button-soft-active: var(--bluui-color-lime-border);
+    --blu-button-fill: var(--bluui-color-lime-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-lime-text);
+}
+
+.blu-button.blu-button--green {
+    --blu-button-color: var(--bluui-color-green-text);
+    --blu-button-hover: var(--bluui-color-green-text);
+    --blu-button-active: var(--bluui-color-green-text);
+    --blu-button-soft: var(--bluui-color-green-soft);
+    --blu-button-soft-active: var(--bluui-color-green-border);
+    --blu-button-fill: var(--bluui-color-green-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-green-text);
+}
+
+.blu-button.blu-button--cyan {
+    --blu-button-color: var(--bluui-color-cyan-text);
+    --blu-button-hover: var(--bluui-color-cyan-text);
+    --blu-button-active: var(--bluui-color-cyan-text);
+    --blu-button-soft: var(--bluui-color-cyan-soft);
+    --blu-button-soft-active: var(--bluui-color-cyan-border);
+    --blu-button-fill: var(--bluui-color-cyan-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-cyan-text);
+}
+
+.blu-button.blu-button--blue {
+    --blu-button-color: var(--bluui-color-blue-text);
+    --blu-button-hover: var(--bluui-color-blue-text);
+    --blu-button-active: var(--bluui-color-blue-text);
+    --blu-button-soft: var(--bluui-color-blue-soft);
+    --blu-button-soft-active: var(--bluui-color-blue-border);
+    --blu-button-fill: var(--bluui-color-blue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-blue-text);
+}
+
+.blu-button.blu-button--geekblue {
+    --blu-button-color: var(--bluui-color-geekblue-text);
+    --blu-button-hover: var(--bluui-color-geekblue-text);
+    --blu-button-active: var(--bluui-color-geekblue-text);
+    --blu-button-soft: var(--bluui-color-geekblue-soft);
+    --blu-button-soft-active: var(--bluui-color-geekblue-border);
+    --blu-button-fill: var(--bluui-color-geekblue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-geekblue-text);
+}
+
+.blu-button.blu-button--purple {
+    --blu-button-color: var(--bluui-color-purple-text);
+    --blu-button-hover: var(--bluui-color-purple-text);
+    --blu-button-active: var(--bluui-color-purple-text);
+    --blu-button-soft: var(--bluui-color-purple-soft);
+    --blu-button-soft-active: var(--bluui-color-purple-border);
+    --blu-button-fill: var(--bluui-color-purple-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-purple-text);
+}
+
+/* ============================================================
+   BUTTON — FILLED
+   Default/Secondary supply neutral fills. Other colors use their original
+   solid color, hover, and pressed values through the fallbacks below.
+   ============================================================ */
+
+.blu-button.blu-button--filled {
+    background-color: var(--blu-button-fill, var(--blu-button-color));
+    border-color: var(--blu-button-fill-border, var(--blu-button-color));
+    color: var(--blu-button-contrast);
+
+    box-shadow: var(--blu-shadow-xs);
+}
+
+.blu-button.blu-button--filled:hover {
+    background-color: var(--blu-button-fill-hover, var(--blu-button-hover));
+    border-color: var(--blu-button-fill-border-hover, var(--blu-button-hover));
+    color: var(--blu-button-contrast);
+}
+
+.blu-button.blu-button--filled:active {
+    background-color: var(--blu-button-fill-active, var(--blu-button-active));
+    border-color: var(--blu-button-fill-border-active, var(--blu-button-active));
+    color: var(--blu-button-contrast);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — OUTLINED
+   ============================================================ */
+
+.blu-button.blu-button--outlined {
+    background-color: transparent;
+    border-color: var(--blu-button-color);
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--outlined:hover {
+    background-color: var(--blu-button-soft);
+    border-color: var(--blu-button-hover);
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--outlined:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: var(--blu-button-active);
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — GHOST
+   ============================================================ */
+
+.blu-button.blu-button--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--ghost:hover {
+    background-color: var(--blu-button-soft);
+    border-color: transparent;
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--ghost:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: transparent;
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — SIZES (specificity preserves sizes before Theme CSS)
+   ============================================================ */
+
+.blu-button.blu-button.blu-button--small {
+    min-height: 32px;
+
+    padding: 0 12px;
+
+    font-size: var(--blu-font-size-sm);
+}
+
+.blu-button.blu-button.blu-button--medium {
+    min-height: 40px;
+
+    padding: 0 16px;
+
+    font-size: var(--blu-font-size-md);
+}
+
+.blu-button.blu-button.blu-button--large {
+    min-height: 48px;
+
+    padding: 0 20px;
+
+    font-size: var(--blu-font-size-lg);
+}
+
+
+/* ============================================================
+   BUTTON — FULL WIDTH
+   ============================================================ */
+
+.blu-button.blu-button--full {
+    width: 100%;
+}
+
+
+/* ============================================================
+   BUTTON — FOCUS
+   ============================================================ */
+
+.blu-button.blu-button:focus {
+    outline: none;
+}
+
+.blu-button.blu-button:focus-visible {
+    outline: 2px solid var(--bluui-primary, #4f46e5);
+    outline-offset: 3px;
+
+    box-shadow: var(--blu-focus-ring);
+}
+
+
+/* ============================================================
+   BUTTON — DISABLED
+   ============================================================ */
+
+.blu-button.blu-button:disabled,
+.blu-button.blu-button--disabled {
+    opacity: 0.48;
+
+    cursor: not-allowed;
+    pointer-events: none;
+
+    box-shadow: none;
+    transform: none;
+}
+
+
+/* ============================================================
+   BUTTON — LOADING
+   ============================================================ */
+
+.blu-button.blu-button--loading {
+    cursor: wait;
+    pointer-events: none;
+}
+
+/*
+   OutSystems may render the native button as disabled while loading.
+   Don't fade the loading state.
+*/
+
+.blu-button.blu-button--loading:disabled {
+    opacity: 1;
+}
+
+
+/* ============================================================
+   BUTTON — SPINNER
+   ============================================================ */
+
+.blu-button__spinner {
+    display: inline-block;
+
+    width: 16px;
+    height: 16px;
+
+    box-sizing: border-box;
+
+    flex: 0 0 16px;
+
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+
+    opacity: 0.85;
+
+    animation: blu-spin 0.65s linear infinite;
+}
+
+.blu-button--small .blu-button__spinner {
+    width: 14px;
+    height: 14px;
+
+    flex-basis: 14px;
+}
+
+.blu-button--large .blu-button__spinner {
+    width: 18px;
+    height: 18px;
+
+    flex-basis: 18px;
+}
+
+@keyframes blu-spin {
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+/* ============================================================
+   BUTTON — CONTENT
+   ============================================================ */
+
+.blu-button__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 0;
+}
+
+
+/* ============================================================
+   BUTTON — ICON
+   ============================================================ */
+
+.blu-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    flex: 0 0 auto;
+
+    font-size: 1.1em;
+    line-height: 1;
+}
+
+/* ============================================================
+   BUTTON — PREVIEW
+   ============================================================ */
+
+.blu-preview-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 40px;
+    min-width: 90px;
+
+    padding: 0 16px;
+
+    border-radius: 8px;
+
+    background-color: var(--bluui-color-primary-solid, #4f46e5);
+    color: var(--bluui-on-primary, #ffffff);
+
+    font-family:
+        Inter,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    font-size: 14px;
+    font-weight: 600;
+}
+
+/* Respect motion preferences while preserving a static loading indicator. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-button { transition: none !important; }
+  .blu-button .blu-button-spinner, .blu-button .blu-button__spinner { animation: none !important; }
+}