From 22e217a16c84376236caba89d34499a552142c1b Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Sun, 17 May 2026 02:37:02 -0400
Subject: [PATCH] feat(portal): gradient button system
 (primary/secondary/ghost/danger/mint)

Five button variants under .o_fp_btn_* classes that don't fight
Bootstrap. Primary uses the brand teal gradient with mint-tinted
shadow; danger uses the red gradient. Focus/hover/active states
included.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../static/src/scss/fp_portal_buttons.scss    | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_buttons.scss

diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_buttons.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_buttons.scss
new file mode 100644
index 00000000..c892c4af
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_buttons.scss
@@ -0,0 +1,88 @@
+// ============================================================================
+// Fusion Plating — Portal · Button system
+// Gradient primary CTA, soft secondary, ghost tertiary, gradient danger.
+// All states use class hooks under .o_fp_btn_* so they don't fight Bootstrap.
+// ============================================================================
+
+.o_fp_btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: $fp-space-2;
+    padding: .55rem 1.1rem;
+    border-radius: $fp-radius-button;
+    font-family: $fp-font;
+    font-size: .85rem;
+    font-weight: 600;
+    line-height: 1.1;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    transition: transform .08s ease, box-shadow .15s ease;
+    user-select: none;
+
+    &:focus-visible {
+        outline: 2px solid $fp-teal;
+        outline-offset: 2px;
+    }
+    &:active { transform: translateY(1px); }
+    &:disabled,
+    &.disabled {
+        opacity: .55;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+// PRIMARY — gradient teal CTA
+.o_fp_btn_primary {
+    @extend .o_fp_btn;
+    background: $fp-gradient-primary;
+    color: #fff;
+    box-shadow: $fp-shadow-button;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
+    &:hover { box-shadow: $fp-shadow-button-hover; color: #fff; }
+}
+
+// SECONDARY — outlined, very subtle gradient
+.o_fp_btn_secondary {
+    @extend .o_fp_btn;
+    background: $fp-gradient-secondary;
+    color: $fp-teal;
+    border: 1px solid $fp-card-border-dark;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
+    &:hover { background: $fp-section-bg; color: $fp-teal-dark; }
+}
+
+// GHOST — text-only with subtle hover
+.o_fp_btn_ghost {
+    @extend .o_fp_btn;
+    background: transparent;
+    color: $fp-teal;
+    font-weight: 500;
+    padding: .45rem .85rem;
+    &:hover { background: rgba(46, 175, 147, .08); color: $fp-teal-dark; }
+}
+
+// DANGER — gradient red
+.o_fp_btn_danger {
+    @extend .o_fp_btn;
+    background: $fp-gradient-danger;
+    color: #fff;
+    box-shadow: $fp-shadow-danger;
+    &:hover { color: #fff; }
+}
+
+// MINT-PILL — soft branded "view all" affordance
+.o_fp_btn_mint {
+    @extend .o_fp_btn;
+    background: $fp-gradient-mint;
+    color: $fp-teal;
+    border: 1px solid $fp-aqua;
+    font-weight: 600;
+    &:hover { color: $fp-teal-dark; }
+}
+
+// Size modifiers
+.o_fp_btn_sm { padding: .35rem .75rem; font-size: .76rem; }
+.o_fp_btn_lg { padding: .75rem 1.4rem; font-size: .95rem; }