feat(progress-spinner): added contrast, contrast-fade colors support (#DS-4583)

packages/components-dev/progress-spinner/module.ts

@@ -2,14 +2,31 @@ import { ChangeDetectionStrategy, Component, OnDestroy, ViewEncapsulation } from
 import { FormsModule } from '@angular/forms';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqProgressSpinnerModule, ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
+import {
+    ProgressSpinnerIndeterminateExample,
+    ProgressSpinnerOverviewExample
+} from 'packages/docs-examples/components/progress-spinner';
+import { DevThemeToggle } from '../theme-toggle';
 
 const INTERVAL: number = 300;
 const STEP: number = 4;
 const MAX_PERCENT: number = 100;
 
+@Component({
+    selector: 'dev-docs-examples',
+    imports: [ProgressSpinnerIndeterminateExample, ProgressSpinnerOverviewExample],
+    template: `
+        <progress-spinner-overview-example />
+        <hr />
+        <progress-spinner-indeterminate-example />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevDocsExamples {}
+
 @Component({
     selector: 'dev-app',
-    imports: [KbqProgressSpinnerModule, FormsModule],
+    imports: [KbqProgressSpinnerModule, FormsModule, DevDocsExamples, DevThemeToggle],
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],
     encapsulation: ViewEncapsulation.None,

packages/components-dev/progress-spinner/template.html

@@ -1,3 +1,11 @@
+<dev-theme-toggle />
+
+<hr />
+
+<dev-docs-examples />
+
+<hr />
+
 <h1>Progress Spinner</h1>
 <div>
     Mode:

packages/components/progress-spinner/_progress-spinner-theme.scss

@@ -1,9 +1,19 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
+        --stroke: var(--kbq-progress-spinner-circle-background);
+
         .kbq-progress-spinner__circle {
-            stroke: var(--kbq-progress-spinner-circle-background);
+            stroke: var(--stroke);
+        }
+
+        &.kbq-contrast {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-background);
+        }
+
+        &.kbq-contrast-fade {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-fade-background);
         }
     }
 
@@ -18,10 +28,10 @@
 
 @mixin kbq-progress-spinner-typography() {
     .kbq-progress-spinner-text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-progress-spinner-caption {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

packages/components/progress-spinner/e2e.ts

@@ -11,6 +11,18 @@ import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
             <div kbq-progress-spinner-caption>Caption</div>
         </kbq-progress-spinner>
 
+        <kbq-progress-spinner mode="determinate" color="contrast" [value]="44" />
+        <kbq-progress-spinner mode="determinate" color="contrast" [value]="44">
+            <div kbq-progress-spinner-text>Text</div>
+            <div kbq-progress-spinner-caption>Caption</div>
+        </kbq-progress-spinner>
+
+        <kbq-progress-spinner mode="determinate" color="contrast-fade" [value]="44" />
+        <kbq-progress-spinner mode="determinate" color="contrast-fade" [value]="44">
+            <div kbq-progress-spinner-text>Text</div>
+            <div kbq-progress-spinner-caption>Caption</div>
+        </kbq-progress-spinner>
+
         <kbq-progress-spinner mode="indeterminate" [value]="44" />
         <kbq-progress-spinner mode="indeterminate" [value]="44">
             <div kbq-progress-spinner-text>Text</div>

packages/components/progress-spinner/progress-spinner-tokens.scss

@@ -9,6 +9,8 @@
     --kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-progress-spinner-circle-background: var(--kbq-icon-theme);
+    --kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);
+    --kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);
     --kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);
     --kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary);
 }

packages/components/progress-spinner/progress-spinner.component.ts

@@ -76,5 +76,6 @@ export class KbqProgressSpinner extends KbqColorDirective {
         super();
 
         this.color = KbqComponentColors.Theme;
+        this.setDefaultColor(KbqComponentColors.Theme);
     }
 }

packages/docs-examples/components/progress-spinner/progress-spinner-indeterminate/progress-spinner-indeterminate-example.ts

@@ -1,26 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 
 /**
  * @title Progress spinner indeterminate
  */
 @Component({
     selector: 'progress-spinner-indeterminate-example',
-    imports: [
-        KbqProgressSpinnerModule
-    ],
+    imports: [KbqProgressSpinnerModule],
     template: `
-        <div class="layout-row">
-            <kbq-progress-spinner class="layout-margin-right-s" [mode]="'indeterminate'" />
-        </div>
-
-        <div class="layout-row">
-            <kbq-progress-spinner class="layout-margin-right-s" [mode]="'indeterminate'" [size]="'big'" />
-        </div>
+        <kbq-progress-spinner class="layout-margin-right-s" size="big" mode="indeterminate" />
+        <kbq-progress-spinner class="layout-margin-right-s" size="big" color="contrast" mode="indeterminate" />
+        <kbq-progress-spinner size="big" color="contrast-fade" mode="indeterminate" />
     `,
+    host: {
+        class: 'layout-margin-5xl layout-align-center-center layout-row'
+    },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProgressSpinnerIndeterminateExample {
-    themePalette = ThemePalette;
-}
+export class ProgressSpinnerIndeterminateExample {}