added default color to uui-circle-loader and adjusted uui-button

Author: JesmoDev

packages/uui-button/lib/uui-button.element.ts

@@ -162,6 +162,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
 
       #loader {
         font-size: 1.5em;
+        color: inherit;
       }
 
       /* ANIMATIONS */

packages/uui-loader-circle/lib/uui-loader-circle.element.ts

@@ -21,6 +21,7 @@ export class UUILoaderCircleElement extends LitElement {
         position: relative;
         width: 1em;
         height: 1em;
+        color: var(--uui-color-primary);
       }
 
       #spinner {

packages/uui-loader-circle/lib/uui-loader-circle.story.ts

@@ -22,15 +22,17 @@ export default {
 const Template: Story = props =>
   html`
     <uui-loader-circle
-      style="color: ${props.color}; font-size: ${props.fontSize}"
+      style="${props.color
+        ? 'color: ' + props.color
+        : ''}; font-size: ${props.fontSize}"
       progress=${props.progress}
       ?show-progress=${props.showProgress}></uui-loader-circle>
   `;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
 
-AAAOverview.args = { color: 'black' };
+AAAOverview.args = { color: '' };
 AAAOverview.argTypes = {
   color: { table: { category: 'inline styling' } },
 };