move config file out of src (#648)

deven-org · Jan 10, 2024 · 6851c19 · 6851c19
1 parent 0c518f2
commit 6851c19
Show file tree

Hide file tree

Showing 4 changed files with 53 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
@@ -106,7 +106,7 @@ export class BlrTextButton extends LitElement {
         this.size.toUpperCase(),
         'Loader',
       ]).toLowerCase() as FormSizesType;
-
+      console.log(loaderSizeVariant);
       const iconSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Action',
@@ -160,7 +160,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({