From 26879b6a70fe9a0c3e657a629b0a6ac21bae0027 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 7 Mar 2024 11:31:34 -0800 Subject: [PATCH 1/2] fix(loader): update component token names --- .../src/components/loader/loader.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss index 1d082889f1a..34f1755d839 100644 --- a/packages/calcite-components/src/components/loader/loader.scss +++ b/packages/calcite-components/src/components/loader/loader.scss @@ -3,10 +3,10 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-loader-color-one-third: defines the color of a loader. Applies to --calcite-loader-color between 33% - 66% of the animation. - * @prop --calcite-loader-color-start: defines the starting color of a loader. Applies to --calcite-loader-color between 0% - 33% of the animation. - * @prop --calcite-loader-color-two-thirds: defines the color of a loader. Applies to --calcite-loader-color between 66% - 99% of the animation. * @prop --calcite-loader-bar-width: [Deprecated] defines the width of the loader animation. + * @prop --calcite-loader-color-end: defines the color of a loader. Applies to --calcite-loader-color between 66% - 99% of the animation. + * @prop --calcite-loader-color-middle: defines the color of a loader. Applies to --calcite-loader-color between 33% - 66% of the animation. + * @prop --calcite-loader-color-start: defines the starting color of a loader. Applies to --calcite-loader-color between 0% - 33% of the animation. * @prop --calcite-loader-font-size: [Deprecated] Specifies the font size of the loading percentage when type is `"determinate"`. * @prop --calcite-loader-padding: [Deprecated] Specifies the padding of the loader. * @prop --calcite-loader-size-inline: [Deprecated] The width and height of an inline loader. @@ -225,10 +225,16 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; --calcite-internal-loader-bar-color: var(--calcite-loader-color-start, var(--calcite-color-brand)); } 33% { - --calcite-internal-loader-bar-color: var(--calcite-loader-color-one-third, var(--calcite-color-brand-press)); + --calcite-internal-loader-bar-color: var( + --calcite-loader-color-middle, + var(--calcite-loader-color-start, var(--calcite-color-brand-press)) + ); } 66% { - --calcite-internal-loader-bar-color: var(--calcite-loader-color-two-thirds, var(--calcite-color-brand-hover)); + --calcite-internal-loader-bar-color: var( + --calcite-loader-color-end, + var(--calcite-loader-color-middle, var(--calcite-loader-color-start, var(--calcite-color-brand-hover))) + ); } 100% { --calcite-internal-loader-bar-color: var(--calcite-loader-color-start, var(--calcite-color-brand)); From c3971f9714bc9735ba7be284135ec59dcc60185f Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 8 Mar 2024 16:31:57 -0800 Subject: [PATCH 2/2] fix(action, block, card, scrim): rename loader sub-component tokens --- packages/calcite-components/src/components/action/action.scss | 4 ++-- packages/calcite-components/src/components/block/block.scss | 4 ++-- packages/calcite-components/src/components/card/card.scss | 4 ++-- packages/calcite-components/src/components/scrim/scrim.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 33614dc6562..27b1676c106 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -241,9 +241,9 @@ button { } calcite-loader { - --calcite-loader-color-one-third: var(--calcite-action-loader-color-one-third); + --calcite-loader-color-middle: var(--calcite-action-loader-color-one-third); --calcite-loader-color-start: var(--calcite-action-loader-color-start); - --calcite-loader-color-two-thirds: var(--calcite-action-loader-color-two-thirds); + --calcite-loader-color-end: var(--calcite-action-loader-color-two-thirds); } @include base-component(); diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 0c0aa51de79..6409f9835ce 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -205,9 +205,9 @@ calcite-icon { } calcite-loader { - --calcite-loader-color-one-third: var(--calcite-block-loader-color-one-third); + --calcite-loader-color-middle: var(--calcite-block-loader-color-one-third); --calcite-loader-color-start: var(--calcite-block-loader-color-start); - --calcite-loader-color-two-thirds: var(--calcite-block-loader-color-two-thirds); + --calcite-loader-color-end: var(--calcite-block-loader-color-two-thirds); } calcite-scrim { diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index 9389b3f92d7..51e0134aa13 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -217,9 +217,9 @@ slot[name="footer-end"]::slotted(*) { } calcite-loader { - --calcite-loader-color-one-third: var(--calcite-card-loader-color-one-third); + --calcite-loader-color-middle: var(--calcite-card-loader-color-one-third); --calcite-loader-color-start: var(--calcite-card-loader-color-start); - --calcite-loader-color-two-thirds: var(--calcite-card-loader-color-two-thirds); + --calcite-loader-color-end: var(--calcite-card-loader-color-two-thirds); } @include base-component(); diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss index a92e8c42bc9..0eb0e2d7244 100644 --- a/packages/calcite-components/src/components/scrim/scrim.scss +++ b/packages/calcite-components/src/components/scrim/scrim.scss @@ -52,9 +52,9 @@ } calcite-loader { - --calcite-loader-color-one-third: var(--calcite-scrim-loader-color-one-third); + --calcite-loader-color-middle: var(--calcite-scrim-loader-color-one-third); --calcite-loader-color-start: var(--calcite-scrim-loader-color-start); - --calcite-loader-color-two-thirds: var(--calcite-scrim-loader-color-two-thirds); + --calcite-loader-color-end: var(--calcite-scrim-loader-color-two-thirds); } @include base-component();