From e3ff9f2f4bb5a728b2a2538d74be6b3fe85f7925 Mon Sep 17 00:00:00 2001
From: Lee Moody <notlee@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:42:29 +0000
Subject: [PATCH] fix: Add missing tokens for the whitelabel inverse button
 (#1884)

---
 .../whitelabel/components/o3-button.json      | 170 +++++++++++++++++-
 .../whitelabel/o3-button/_variables.css       |  36 ++++
 2 files changed, 205 insertions(+), 1 deletion(-)

diff --git a/apps/dictionary/tokens/whitelabel/components/o3-button.json b/apps/dictionary/tokens/whitelabel/components/o3-button.json
index a305a6637d..780f26a4a8 100644
--- a/apps/dictionary/tokens/whitelabel/components/o3-button.json
+++ b/apps/dictionary/tokens/whitelabel/components/o3-button.json
@@ -57,6 +57,62 @@
               "type": "color"
             }
           }
+        },
+        "inverse": {
+          "color": {
+            "value": "#262a33",
+            "type": "color"
+          },
+          "background": {
+            "value": "#ffffff",
+            "type": "color"
+          },
+          "border": {
+            "value": "#ffffff00",
+            "type": "color"
+          },
+          "hover": {
+            "background": {
+              "value": "#c9cacc",
+              "type": "color"
+            },
+            "color": {
+              "value": "#262a33",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background": {
+              "value": "#c9cacc",
+              "type": "color"
+            },
+            "color": {
+              "value": "#262a33",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background": {
+              "value": "#9d9fa3",
+              "type": "color"
+            },
+            "color": {
+              "value": "#262a33",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          }
         }
       },
       "secondary": {
@@ -115,6 +171,62 @@
               "type": "color"
             }
           }
+        },
+        "inverse": {
+          "color": {
+            "value": "#ffffff",
+            "type": "color"
+          },
+          "background": {
+            "value": "#ffffff00",
+            "type": "color"
+          },
+          "border": {
+            "value": "#ffffff",
+            "type": "color"
+          },
+          "hover": {
+            "background": {
+              "value": "rgba(255, 255, 255, 0.15)",
+              "type": "color"
+            },
+            "color": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background": {
+              "value": "rgba(255, 255, 255, 0.15)",
+              "type": "color"
+            },
+            "color": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "color": {
+              "value": "#000000",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff",
+              "type": "color"
+            }
+          }
         }
       },
       "ghost": {
@@ -173,8 +285,64 @@
               "type": "color"
             }
           }
+        },
+        "inverse": {
+          "color": {
+            "value": "#ffffff",
+            "type": "color"
+          },
+          "background": {
+            "value": "#ffffff00",
+            "type": "color"
+          },
+          "border": {
+            "value": "#ffffff00",
+            "type": "color"
+          },
+          "hover": {
+            "background": {
+              "value": "rgba(255, 255, 255, 0.15)",
+              "type": "color"
+            },
+            "color": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background": {
+              "value": "rgba(255, 255, 255, 0.15)",
+              "type": "color"
+            },
+            "color": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background": {
+              "value": "#ffffff",
+              "type": "color"
+            },
+            "color": {
+              "value": "#000000",
+              "type": "color"
+            },
+            "border": {
+              "value": "#ffffff00",
+              "type": "color"
+            }
+          }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components/o3-button/src/css/tokens/whitelabel/o3-button/_variables.css b/components/o3-button/src/css/tokens/whitelabel/o3-button/_variables.css
index a1508ecfc2..2c2a3d5718 100644
--- a/components/o3-button/src/css/tokens/whitelabel/o3-button/_variables.css
+++ b/components/o3-button/src/css/tokens/whitelabel/o3-button/_variables.css
@@ -4,6 +4,18 @@
 
 
 [data-o3-brand="whitelabel"] .o3-button {
+  --_o3-button-ghost-inverse-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-active-color: #000000;
+  --_o3-button-ghost-inverse-active-background: #ffffff;
+  --_o3-button-ghost-inverse-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-focus-color: #ffffff;
+  --_o3-button-ghost-inverse-focus-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-ghost-inverse-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-hover-color: #ffffff;
+  --_o3-button-ghost-inverse-hover-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-ghost-inverse-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-background: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-color: #ffffff;
   --_o3-button-ghost-standard-active-active: rgba(255, 255, 255, 0);
   --_o3-button-ghost-standard-active-color: #ffffff;
   --_o3-button-ghost-standard-active-background: #000000;
@@ -16,6 +28,18 @@
   --_o3-button-ghost-standard-border: rgba(255, 255, 255, 0);
   --_o3-button-ghost-standard-background: rgba(255, 255, 255, 0);
   --_o3-button-ghost-standard-color: #000000;
+  --_o3-button-secondary-inverse-active-border: #ffffff;
+  --_o3-button-secondary-inverse-active-color: #000000;
+  --_o3-button-secondary-inverse-active-background: #ffffff;
+  --_o3-button-secondary-inverse-focus-border: #ffffff;
+  --_o3-button-secondary-inverse-focus-color: #ffffff;
+  --_o3-button-secondary-inverse-focus-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-secondary-inverse-hover-border: #ffffff;
+  --_o3-button-secondary-inverse-hover-color: #ffffff;
+  --_o3-button-secondary-inverse-hover-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-secondary-inverse-border: #ffffff;
+  --_o3-button-secondary-inverse-background: rgba(255, 255, 255, 0);
+  --_o3-button-secondary-inverse-color: #ffffff;
   --_o3-button-secondary-standard-active-border: #000000;
   --_o3-button-secondary-standard-active-color: #ffffff;
   --_o3-button-secondary-standard-active-background: #000000;
@@ -28,6 +52,18 @@
   --_o3-button-secondary-standard-border: #000000;
   --_o3-button-secondary-standard-background: rgba(255, 255, 255, 0);
   --_o3-button-secondary-standard-color: #000000;
+  --_o3-button-primary-inverse-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-active-color: #262a33;
+  --_o3-button-primary-inverse-active-background: #9d9fa3;
+  --_o3-button-primary-inverse-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-focus-color: #262a33;
+  --_o3-button-primary-inverse-focus-background: #c9cacc;
+  --_o3-button-primary-inverse-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-hover-color: #262a33;
+  --_o3-button-primary-inverse-hover-background: #c9cacc;
+  --_o3-button-primary-inverse-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-background: #ffffff;
+  --_o3-button-primary-inverse-color: #262a33;
   --_o3-button-primary-standard-active-border: rgba(255, 255, 255, 0);
   --_o3-button-primary-standard-active-color: #ffffff;
   --_o3-button-primary-standard-active-background: #595959;