feat(flat): add new flat variant for use in auro-components

AlaskaAirlines · Jul 3, 2024 · 49a6bcf · 49a6bcf
1 parent 699def3
commit 49a6bcf
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 8 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "csspart"
+  ]
+}
diff --git 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
@@ -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
@@ -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
@@ -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);