move config file out of src (#648)

deven-org · Jan 15, 2024 · bfd36f0 · bfd36f0
1 parent 3f62ffb
commit bfd36f0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts
@@ -4,7 +4,7 @@ import { componentTokens } from "../../../../foundation/_tokens-generated/__comp
 import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
 
 const { IconButton } = componentTokens.Actions;
-const { Global } = semanticTokens;
+const { Global, Action } = semanticTokens;
 
 export const styleCustom = typeSafeNestedCss`
   .focus-layer {
@@ -70,6 +70,30 @@ export const styleCustom = typeSafeNestedCss`
   }
   
   .loading {
+
+   &.blr-icon-button:hover, &.blr-icon-button:focus{
+      cursor: auto;
+      text-decoration: none;
+      &.cta{
+        background-color: ${Action.CTA.SurfaceFill.Loading}
+      }
+      &.primary{
+        background-color: ${Action.Primary.SurfaceFill.Loading}
+      }
+      &.secondary{
+        background-color: ${Action.Secondary.SurfaceFill.Loading}
+      }
+      &.silent{
+        background-color: ${Action.Silent.SurfaceFill.Loading}
+      }
+      &.destructive{
+        background-color: ${Action.Destructive.SurfaceFill.Loading}
+      }
+      &.encourage{
+        background-color: ${Action.Encourage.SurfaceFill.Loading}
+      }
+    }
+
     & > .icon {
       visibility: hidden;
     }

diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -114,7 +114,7 @@ export class BlrIconButton extends LitElement {
             }
           }}
         >
-          ${this.focused ? html`<span class="focus-layer"></span>` : nothing}
+          ${this.focused && !this.loading ? html`<span class="focus-layer"></span>` : nothing}
           ${this.loading
             ? BlrLoaderRenderFunction({
                 size: loaderSizeVariant,

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
@@ -4,7 +4,7 @@ import { componentTokens } from "../../../../foundation/_tokens-generated/__comp
 import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
 
 const { TextButton } = componentTokens.Actions;
-const { Global } = semanticTokens;
+const { Global, Action } = semanticTokens;
 
 export const styleCustom = typeSafeNestedCss`
   .focus-layer {
@@ -75,6 +75,30 @@ export const styleCustom = typeSafeNestedCss`
     & > .flex-container {
       visibility: hidden;
     }
+
+    &.blr-text-button:hover, &.blr-text-button:focus {
+      cursor: auto;
+    
+      &.cta{
+        background-color: ${Action.CTA.SurfaceFill.Loading}
+      }
+      &.primary{
+        background-color: ${Action.Primary.SurfaceFill.Loading}
+      }
+      &.secondary{
+        background-color: ${Action.Secondary.SurfaceFill.Loading}
+      }
+      &.silent{
+        background-color: ${Action.Silent.SurfaceFill.Loading}
+      }
+      &.destructive{
+        background-color: ${Action.Destructive.SurfaceFill.Loading}
+      }
+      &.encourage{
+        background-color: ${Action.Encourage.SurfaceFill.Loading}
+      }
+
+    }
   }
 
   .block {

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -160,7 +159,7 @@ export class BlrTextButton extends LitElement {
           }}
           id=${this.buttonId || nothing}
         >
-          ${this.focused ? html`<span class="focus-layer"></span>` : nothing}
+          ${this.focused && !this.loading ? html`<span class="focus-layer"></span>` : nothing}
           ${this.loading
             ? html`
                 ${BlrLoaderRenderFunction({