From 74f8529f82dd654cec28ed97d7d2615fb598d64d Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 28 Jan 2024 15:47:56 -0800 Subject: [PATCH 1/6] feat(progress): add component tokens --- .../src/components/progress/progress.scss | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index 7302fbcfde9..93801e2a82b 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -1,35 +1,50 @@ @import "../../assets/styles/animation"; +/** +* CSS Custom Properties +* +* These properties can be overridden using the component's tag as selector. +* +* @prop --calcite-progress-background-color: The background color of the component. +* @prop --calcite-progress-font-size: The font size of the component. +* @prop --calcite-progress-font-color: The font color of the component. +*/ + :host { - @apply relative block w-full; + @apply relative block; + inline-size: var(--calcite-container-size-content-fluid); } .track, .bar { @apply absolute top-0; + block-size: 2px; } .track { - @apply z-default w-full overflow-hidden; - background: theme("borderColor.color.3"); + @apply overflow-hidden; + + inline-size: var(--calcite-container-size-content-fluid); + z-index: var(--calcite-z-index); + --calcite-progress-background-color: var(--calcite-color-border-3); } .bar { - @apply bg-brand z-default; + --calcite-progress-background-color: var(--calcite-color-brand); } @media (forced-colors: active) { .track { - background-color: highlightText; + --calcite-progress-background-color: highlightText; } .bar { - background-color: linkText; + --calcite-progress-background-color: linkText; } } .indeterminate { - @apply w-1/5; + --calcite-container-size-content-fluid: 20%; animation: looping-progress-bar-ani scaleDuration(--calcite-internal-animation-timing-medium, 11) linear infinite; &.calcite--rtl { animation-name: looping-progress-bar-ani-rtl; @@ -41,8 +56,9 @@ } .text { - @apply text-n2h px-0 pt-4 pb-0 text-center font-medium; - color: var(--calcite-color-text-2); + @apply px-0 pt-4 pb-0 text-center font-medium; + --calcite-progress-font-size: theme("fontSize.n2h"); + --calcite-progress-font-color: var(--calcite-color-text-2); } @keyframes looping-progress-bar-ani { From 4b36f8396a67ec3164219c07300ad023696896f7 Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 28 Jan 2024 16:28:10 -0800 Subject: [PATCH 2/6] cleanup --- .../src/components/progress/progress.scss | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index 93801e2a82b..a04f0a8dfaa 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -7,33 +7,30 @@ * * @prop --calcite-progress-background-color: The background color of the component. * @prop --calcite-progress-font-size: The font size of the component. -* @prop --calcite-progress-font-color: The font color of the component. +* @prop --calcite-progress-color: The font color of the component. */ :host { @apply relative block; inline-size: var(--calcite-container-size-content-fluid); + --calcite-progress-background-color: var(--calcite-color-brand); } .track, .bar { @apply absolute top-0; - block-size: 2px; + block-size: --calcite-size-xxxs; + z-index: var(--calcite-z-index); } .track { @apply overflow-hidden; inline-size: var(--calcite-container-size-content-fluid); - z-index: var(--calcite-z-index); --calcite-progress-background-color: var(--calcite-color-border-3); } -.bar { - --calcite-progress-background-color: var(--calcite-color-brand); -} - @media (forced-colors: active) { .track { --calcite-progress-background-color: highlightText; @@ -58,7 +55,7 @@ .text { @apply px-0 pt-4 pb-0 text-center font-medium; --calcite-progress-font-size: theme("fontSize.n2h"); - --calcite-progress-font-color: var(--calcite-color-text-2); + --calcite-progress-color: var(--calcite-color-text-2); } @keyframes looping-progress-bar-ani { From bf1eecf1fce47bb2679e690c11a4a4ee22462388 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 29 Jan 2024 10:58:41 -0800 Subject: [PATCH 3/6] label inline and block padding --- .../src/components/progress/progress.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index a04f0a8dfaa..c46ca37c90f 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -6,8 +6,12 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-progress-background-color: The background color of the component. -* @prop --calcite-progress-font-size: The font size of the component. * @prop --calcite-progress-color: The font color of the component. +* @prop --calcite-progress-font-size: The font size of the component. +* +* @prop —-calcite-progress-label-inline-padding: Component label inline padding +* @prop —-calcite-progress-label-block-end-padding: Component label block-end padding. +* @prop —-calcite-progress-label-block-start-padding: Component label block-start padding. */ :host { @@ -53,9 +57,12 @@ } .text { - @apply px-0 pt-4 pb-0 text-center font-medium; + @apply text-center font-medium; --calcite-progress-font-size: theme("fontSize.n2h"); --calcite-progress-color: var(--calcite-color-text-2); + --calcite-progress-label-inline-padding: 0; + --calcite-progress-label-block-start-padding: 4; + --calcite-progress-label-block-end-padding: 0; } @keyframes looping-progress-bar-ani { From 6d5481109317fdedb89227827c05ca96654c56b7 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 13 Feb 2024 16:16:36 -0800 Subject: [PATCH 4/6] feat(progress): update component tokens --- .../src/components/progress/progress.scss | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index c46ca37c90f..a6fe2099322 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -5,47 +5,52 @@ * * These properties can be overridden using the component's tag as selector. * -* @prop --calcite-progress-background-color: The background color of the component. -* @prop --calcite-progress-color: The font color of the component. -* @prop --calcite-progress-font-size: The font size of the component. -* -* @prop —-calcite-progress-label-inline-padding: Component label inline padding -* @prop —-calcite-progress-label-block-end-padding: Component label block-end padding. -* @prop —-calcite-progress-label-block-start-padding: Component label block-start padding. +* @prop --calcite-progress-background-color: defines the background color of the component. +* @prop --calcite-progress-bar-background-color: defines the background color of the progress bar. +* @prop --calcite-progress-text-color: defines the text color of the component. +* @prop --calcite-progress-z-index: defines the z-index of the component. */ :host { + --calcite-progress-background-color: var(--calcite-color-border-3); + --calcite-progress-bar-background-color: var(--calcite-color-brand); + --calcite-progress-text-color: var(--calcite-color-text-2); + --calcite-progress-z-index: var(--calcite-z-index); + @apply relative block; inline-size: var(--calcite-container-size-content-fluid); - --calcite-progress-background-color: var(--calcite-color-brand); } .track, .bar { @apply absolute top-0; - block-size: --calcite-size-xxxs; - z-index: var(--calcite-z-index); + block-size: var(--calcite-size-xxxs); + z-index: var(--calcite-progress-z-index); } .track { @apply overflow-hidden; - inline-size: var(--calcite-container-size-content-fluid); - --calcite-progress-background-color: var(--calcite-color-border-3); + background-color: var(--calcite-progress-background-color); +} + +.bar { + background-color: var(--calcite-progress-bar-background-color); } @media (forced-colors: active) { .track { - --calcite-progress-background-color: highlightText; + background-color: highlightText; } .bar { - --calcite-progress-background-color: linkText; + background-color: linkText; } } .indeterminate { - --calcite-container-size-content-fluid: 20%; + @apply w-1/5; + animation: looping-progress-bar-ani scaleDuration(--calcite-internal-animation-timing-medium, 11) linear infinite; &.calcite--rtl { animation-name: looping-progress-bar-ani-rtl; @@ -57,12 +62,10 @@ } .text { - @apply text-center font-medium; - --calcite-progress-font-size: theme("fontSize.n2h"); - --calcite-progress-color: var(--calcite-color-text-2); - --calcite-progress-label-inline-padding: 0; - --calcite-progress-label-block-start-padding: 4; - --calcite-progress-label-block-end-padding: 0; + @apply text-n2h px-0 pt-4 pb-0 text-center font-medium; + + font-size: theme("fontSize.n2h"); + color: var(--calcite-progress-text-color); } @keyframes looping-progress-bar-ani { From 628a3eaff0ffd34dda05e34b99367148a3c7e3c9 Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 17 Feb 2024 16:02:03 -0800 Subject: [PATCH 5/6] refactor and cleanup --- .../src/components/progress/progress.scss | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index a6fe2099322..a1ec67432e1 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -5,17 +5,15 @@ * * These properties can be overridden using the component's tag as selector. * -* @prop --calcite-progress-background-color: defines the background color of the component. -* @prop --calcite-progress-bar-background-color: defines the background color of the progress bar. -* @prop --calcite-progress-text-color: defines the text color of the component. -* @prop --calcite-progress-z-index: defines the z-index of the component. +* @prop --calcite-progress-background-color: Defines the background color of the component. +* @prop --calcite-progress-fill-color: Defines the background color of the progress bar. +* @prop --calcite-progress-color: Defines the text color of the component. */ :host { --calcite-progress-background-color: var(--calcite-color-border-3); - --calcite-progress-bar-background-color: var(--calcite-color-brand); - --calcite-progress-text-color: var(--calcite-color-text-2); - --calcite-progress-z-index: var(--calcite-z-index); + --calcite-progress-fill-color: var(--calcite-color-brand); + --calcite-progress-color: var(--calcite-color-text-2); @apply relative block; inline-size: var(--calcite-container-size-content-fluid); @@ -23,20 +21,20 @@ .track, .bar { - @apply absolute top-0; + @apply absolute top-0 z-default; block-size: var(--calcite-size-xxxs); - z-index: var(--calcite-progress-z-index); } .track { @apply overflow-hidden; + inline-size: var(--calcite-container-size-content-fluid); background-color: var(--calcite-progress-background-color); } .bar { - background-color: var(--calcite-progress-bar-background-color); + background-color: var(--calcite-progress-fill-color); } @media (forced-colors: active) { @@ -65,7 +63,7 @@ @apply text-n2h px-0 pt-4 pb-0 text-center font-medium; font-size: theme("fontSize.n2h"); - color: var(--calcite-progress-text-color); + color: var(--calcite-progress-color); } @keyframes looping-progress-bar-ani { From a6da63a3ff89ca0bfeb026b97eadb20e1c2b5d24 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 21 Feb 2024 09:38:45 -0800 Subject: [PATCH 6/6] typo text-color --- .../src/components/progress/progress.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index a1ec67432e1..f88cc3ff694 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -7,13 +7,13 @@ * * @prop --calcite-progress-background-color: Defines the background color of the component. * @prop --calcite-progress-fill-color: Defines the background color of the progress bar. -* @prop --calcite-progress-color: Defines the text color of the component. +* @prop --calcite-progress-text-color: Defines the text color of the component. */ :host { --calcite-progress-background-color: var(--calcite-color-border-3); --calcite-progress-fill-color: var(--calcite-color-brand); - --calcite-progress-color: var(--calcite-color-text-2); + --calcite-progress-text-color: var(--calcite-color-text-2); @apply relative block; inline-size: var(--calcite-container-size-content-fluid); @@ -63,7 +63,7 @@ @apply text-n2h px-0 pt-4 pb-0 text-center font-medium; font-size: theme("fontSize.n2h"); - color: var(--calcite-progress-color); + color: var(--calcite-progress-text-color); } @keyframes looping-progress-bar-ani {