use $ouds-button-size-loader token

Orange-OpenSource · Dec 13, 2024 · 49f9a1f · 49f9a1f
1 parent 3294876
commit 49f9a1f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -153,7 +153,7 @@
       mask-image: var(--#{$prefix}loading-indeterminate-icon);
       mask-repeat: no-repeat;
       mask-position: 50% 50%;
-      mask-size: 1.25rem;
+      mask-size: px-to-rem($ouds-button-size-loader);
       animation: loading-indeterminate-rotate 2s linear infinite;
     }
   }
@@ -190,8 +190,7 @@
       mask-image: var(--#{$prefix}loading-indeterminate-icon);
       mask-repeat: no-repeat;
       mask-position: 50% 50%;
-      mask-size: 1.25rem;
-      // TODO
+      mask-size: px-to-rem($ouds-button-size-loader);;
     }
   }
 
@@ -353,8 +352,8 @@
 }
 
 .btn-default-on-colored-bg {
-  --#{$prefix}btn-border-width: #{$ouds-button-border-width-default}; // TODO Default token?
-  --#{$prefix}btn-interaction-border-width: #{$ouds-border-width-none}; // TODO Not default token?
+  --#{$prefix}btn-border-width: #{$ouds-button-border-width-default};
+  --#{$prefix}btn-interaction-border-width: #{$ouds-border-width-none}; // TODO Use token $ouds-button-border-width-default-interaction-mono when available
   @include button-variant(
     $ouds-button-color-bg-default-enabled-mono,
     $ouds-button-color-border-default-enabled-mono,
@@ -401,8 +400,8 @@
 }
 
 .btn-minimal-on-colored-bg {
-  --#{$prefix}btn-border-width: #{$ouds-button-border-width-minimal}; // TODO Minimal token?
-  --#{$prefix}btn-interaction-border-width: #{$ouds-button-border-width-minimal-interaction}; // TODO Minimal token?
+  --#{$prefix}btn-border-width: #{$ouds-button-border-width-minimal};
+  --#{$prefix}btn-interaction-border-width: #{$ouds-button-border-width-minimal-interaction};
   @include button-variant(
     $ouds-button-color-bg-minimal-enabled-mono,
     $ouds-button-color-border-minimal-enabled-mono,

diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss
@@ -104,7 +104,7 @@ $ouds-button-color-content-minimal-loading: var(--#{$prefix}color-action-loading
 $ouds-button-color-content-minimal-pressed: var(--#{$prefix}color-action-pressed) !default;
 $ouds-button-size-icon: $ouds-size-icon-with-label-large-size-xs !default;
 $ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-sm !default;
-// $ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default;
+$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default;
 // $ouds-button-space-column-gap-arrow: $ouds-space-column-gap-shorter !default;
 $ouds-button-space-column-gap-icon: $ouds-space-column-gap-short !default;
 $ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default;