From 49a6bcf73565c6290282facd5acdb45739fcca1e Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Tue, 2 Jul 2024 12:20:01 -0700
Subject: [PATCH] feat(flat): add new flat variant for use in auro-components

---
 .vscode/settings.json  |  5 +++
 docs/partials/index.md |  2 +-
 src/colors.scss        | 76 +++++++++++++++++++++++++++++++++++++++---
 src/style.scss         | 11 ++++++
 src/tokens.scss        |  6 ++--
 5 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..db29bd6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "csspart"
+  ]
+}
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 5524b19..8e72d78 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -38,7 +38,7 @@ In cases were the action of the button would not fit the criteria above, it is m
 
 These examples illustrate the core button types and a `disabled` state on dark backgrounds using the `onDark` attribute.
 
-<div class="exampleWrapper">
+<div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
diff --git a/src/colors.scss b/src/colors.scss
index a7f7b9f..46a958d 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -92,8 +92,8 @@ auro-loader {
     }
 
     /**
-    * SECONDARY VARIANT STYLES
-    */
+     * SECONDARY VARIANT STYLES
+     */
     &[variant='secondary'] {
       --ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #{$ds-color-container-ui-secondary-default-default});
       --ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #{$ds-color-container-ui-secondary-default-default});
@@ -139,8 +139,8 @@ auro-loader {
     }
 
     /**
-    * TERTIARY VARIANT STYLES
-    */
+     * TERTIARY VARIANT STYLES
+     */
     &[variant='tertiary'] {
       --ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, #{$ds-color-container-ui-tertiary-default-default});
       --ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, #{$ds-color-container-ui-tertiary-default-default});
@@ -185,6 +185,42 @@ auro-loader {
         }
       }
     }
+
+    /**
+     * FLAT VARIANT STYLES
+     */
+    &[variant='flat'] {
+      color: var(--ds-color-icon-ui-default-default);
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {
+          color: var(--ds-color-icon-ui-hover-default);
+          background-color: transparent;
+          background-image: none;
+          border-color: transparent;
+        }
+      }
+
+      &:disabled {
+        color: var(--ds-color-icon-ui-disabled-default);
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+
+        @media (hover: hover) {
+          &:hover {
+            color: var(--ds-color-icon-ui-disabled-default);
+            background-color: transparent;
+            background-image: none;
+            border-color: transparent;
+          }
+        }
+      }
+    }
   }
 
   &[ondark] {
@@ -331,5 +367,37 @@ auro-loader {
         }
       }
     }
+
+    &[variant='flat'] {
+      color: var(--ds-color-icon-ui-default-default);
+      background-color: transparent;
+      border-color: transparent;
+
+      @media (hover: hover) {
+        &:active,
+        &:hover {
+          color: var(--ds-color-icon-ui-hover-default);
+          background-color: transparent;
+          background-image: none;
+          border-color: transparent;
+        }
+      }
+
+      &:disabled {
+        color: var(--ds-color-icon-ui-disabled-default);
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+
+        @media (hover: hover) {
+          &:hover {
+            color: var(--ds-color-icon-ui-disabled-default);
+            background-color: transparent;
+            background-image: none;
+            border-color: transparent;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/style.scss b/src/style.scss
index 5326d00..2b514ce 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -163,6 +163,17 @@ slot {
     }
   }
 
+  &[variant='flat'] {
+    height: unset;
+    width: unset;
+    min-height: unset;
+    max-height: unset;
+    border: 0;
+    border-radius: unset;
+    gap: unset;
+    padding: unset;
+  }
+
   &[ondark] {
     &:disabled {
       cursor: not-allowed;
diff --git a/src/tokens.scss b/src/tokens.scss
index 9cb655c..3ab9ce3 100644
--- a/src/tokens.scss
+++ b/src/tokens.scss
@@ -1,8 +1,8 @@
 :host {
+  --ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
+  --ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
+  --ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
   --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-  --ds-auro-button-container-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-  --ds-auro-button-container-image: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-  --ds-auro-button-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
 
   // THE BELOW TOKEN SEEMS WRONG - WAITING FOR RESPONSE FROM JUNE
   --ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, $ds-color-border-emphasis-inverse);