From 8f42a3be5568cbbe1e78e4ec44a6eae4e8546e4d Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 12:14:34 -0800 Subject: [PATCH 01/18] refactor: Use component tokens within includes. #7180 --- .../src/assets/styles/_header.scss | 19 +++-- .../src/assets/styles/_sortable.scss | 21 +++-- .../src/assets/styles/_spacing.scss | 26 ------ .../src/assets/styles/global.scss | 2 +- .../src/assets/styles/includes.scss | 80 +++++++++++-------- 5 files changed, 68 insertions(+), 80 deletions(-) delete mode 100644 packages/calcite-components/src/assets/styles/_spacing.scss diff --git a/packages/calcite-components/src/assets/styles/_header.scss b/packages/calcite-components/src/assets/styles/_header.scss index 6b1befbdcc1..72e3204de90 100644 --- a/packages/calcite-components/src/assets/styles/_header.scss +++ b/packages/calcite-components/src/assets/styles/_header.scss @@ -1,17 +1,20 @@ /* Shared styles for header elements */ .header { - @apply text-color-2 - fill-color-2 - m-0 - flex - content-between - items-center; + color: var(--calcite-color-text-2); + fill: var(--calcite-color-text-2); + margin: 0px; + display: flex; + align-content: space-between; + align-items: center; } .heading { - @apply m-0 p-0 font-medium; + margin: 0px; + padding: 0px; + font-weight: var(--calcite-font-weight-medium); } .header .heading { - @apply flex-auto p-2; + flex: 1 1 auto; + padding: var(--calcite-spacing-xxs); } diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss index ae119bc7ea5..43a497bf17d 100644 --- a/packages/calcite-components/src/assets/styles/_sortable.scss +++ b/packages/calcite-components/src/assets/styles/_sortable.scss @@ -9,20 +9,17 @@ .calcite-sortable--ghost::before { content: ""; - @apply box-border - border - border-dashed - border-color-brand - bg-foreground-2 - absolute - top-0 - left-0 - bottom-0 - right-0 - z-default; + box-sizing: border-box; + border-width: var(--calcite-border-width-sm); + border-style: dashed; + border-color: var(--calcite-color-brand); + background-color: var(--calcite-color-foreground-2); + position: absolute; + inset: 0px; + z-index: var(--calcite-z-index); } .calcite-sortable--drag { - @apply shadow-2; + box-shadow: var(--calcite-shadow-2); } } diff --git a/packages/calcite-components/src/assets/styles/_spacing.scss b/packages/calcite-components/src/assets/styles/_spacing.scss deleted file mode 100644 index 2a8682e1ffe..00000000000 --- a/packages/calcite-components/src/assets/styles/_spacing.scss +++ /dev/null @@ -1,26 +0,0 @@ -%component-spacing { - /* Component spacing variables */ - - --calcite-icon-size: 1rem; - - --calcite-spacing-eighth: theme("spacing[0.5]"); - - --calcite-spacing-quarter: theme("spacing.1"); - - --calcite-spacing-half: theme("spacing.2"); - - --calcite-spacing-three-quarters: theme("spacing.3"); - - --calcite-spacing: theme("spacing.4"); - - --calcite-spacing-plus-quarter: theme("spacing.5"); - - --calcite-spacing-plus-half: theme("spacing.6"); - - --calcite-spacing-double: theme("spacing.8"); - - --calcite-menu-min-width: theme("spacing.40"); - - --calcite-header-min-height: theme("spacing.12"); - --calcite-footer-min-height: theme("spacing.12"); -} diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss index 76aef5a9541..59bec040f75 100644 --- a/packages/calcite-components/src/assets/styles/global.scss +++ b/packages/calcite-components/src/assets/styles/global.scss @@ -26,7 +26,7 @@ --calcite-panel-width-multiplier: 1; --calcite-ui-icon-color: currentColor; - @apply font-sans; + font-family: var(--calcite-sans-family); } .calcite-mode-auto { diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index 222c67ae839..c94423f3bc9 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -1,5 +1,5 @@ @import "~@esri/calcite-colors/dist/colors"; -@import "~@esri/calcite-base/dist/_index"; +@import "~@esri/calcite-base/dist/index"; @import "~@esri/calcite-design-tokens/dist/scss/index"; @import "~@esri/calcite-design-tokens/dist/scss/core"; @@ -7,7 +7,6 @@ @import "animation"; @import "focus"; @import "host"; -@import "spacing"; @import "floating-ui"; @import "sortable"; @@ -67,7 +66,7 @@ ::slotted([calcite-hydrated][disabled]), [calcite-hydrated][disabled] { /* prevent opacity stacking */ - @apply opacity-100; + opacity: 1; } } @@ -78,14 +77,16 @@ // used for host-specific styling when the `disabled` mixin cannot be applied on the host (e.g., `display: contents`) %disabled-host-only { - @apply opacity-disabled cursor-default select-none; + opacity: var(--calcite-opacity-disabled); + cursor: default; + user-select: none; @extend %non-interactive-host-contents; } %non-interactive-host-contents { *, ::slotted(*) { - @apply pointer-events-none; + pointer-events: none; } } @@ -99,56 +100,69 @@ @mixin base-component() { :host([hidden]) { - @apply hidden; + display: none; } [hidden] { - @apply hidden; + display: none; } } @mixin xButton() { - :host([scale="s"]) { - .x-button { - inline-size: theme("spacing.4"); - block-size: theme("spacing.4"); - } - } - - :host([scale="m"]) { - .x-button { - inline-size: theme("spacing.6"); - block-size: theme("spacing.6"); - } - } - - :host([scale="l"]) { - .x-button { - inline-size: theme("spacing.8"); - block-size: theme("spacing.8"); - } - } - .x-button { - @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default; - + appearance: none; + align-content: center; + cursor: pointer; + display: flex; + outline-color: transparent; + align-items: center; + justify-content: center; + margin: 0px; + align-self: center; + color: var(--calcite-color-text-3); + transition: + all var(--calcite-animation-timing) ease-in-out 0s, + outline 0s, + outline-offset 0s; + border-width: var(--calcite-border-width-md); border-radius: 50%; border-color: transparent; background-color: var(--calcite-color-foreground-2); &:active, &:hover { - @apply text-color-1; + color: var(--calcite-color-text-1); background-color: var(--calcite-color-foreground-3); } &:active { - @apply border-solid; - border-color: theme("borderColor.color-brand"); + border-style: solid; + border-color: var(--calcite-color-brand); } & calcite-icon { color: inherit; } } + + :host([scale="s"]) { + .x-button { + inline-size: var(--calcite-spacing-sm); + block-size: var(--calcite-spacing-sm); + } + } + + :host([scale="m"]) { + .x-button { + inline-size: var(--calcite-spacing-lg); + block-size: var(--calcite-spacing-lg); + } + } + + :host([scale="l"]) { + .x-button { + inline-size: var(--calcite-spacing-xxl); + block-size: var(--calcite-spacing-xxl); + } + } } From 95d22a9b31c32c27e6d82bd62bc05fd7b676f0bc Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 17:45:20 -0800 Subject: [PATCH 02/18] move xButton --- .../src/assets/styles/includes.scss | 59 ------------------- .../src/components/combobox/combobox.scss | 45 +++++++++++++- 2 files changed, 44 insertions(+), 60 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index c94423f3bc9..0fc0bb1afd9 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -107,62 +107,3 @@ display: none; } } - -@mixin xButton() { - .x-button { - appearance: none; - align-content: center; - cursor: pointer; - display: flex; - outline-color: transparent; - align-items: center; - justify-content: center; - margin: 0px; - align-self: center; - color: var(--calcite-color-text-3); - transition: - all var(--calcite-animation-timing) ease-in-out 0s, - outline 0s, - outline-offset 0s; - border-width: var(--calcite-border-width-md); - border-radius: 50%; - border-color: transparent; - background-color: var(--calcite-color-foreground-2); - - &:active, - &:hover { - color: var(--calcite-color-text-1); - background-color: var(--calcite-color-foreground-3); - } - - &:active { - border-style: solid; - border-color: var(--calcite-color-brand); - } - - & calcite-icon { - color: inherit; - } - } - - :host([scale="s"]) { - .x-button { - inline-size: var(--calcite-spacing-sm); - block-size: var(--calcite-spacing-sm); - } - } - - :host([scale="m"]) { - .x-button { - inline-size: var(--calcite-spacing-lg); - block-size: var(--calcite-spacing-lg); - } - } - - :host([scale="l"]) { - .x-button { - inline-size: var(--calcite-spacing-xxl); - block-size: var(--calcite-spacing-xxl); - } - } -} diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 1978b19a9a4..c9fc76e1c91 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -11,7 +11,50 @@ } @include disabled(); -@include xButton(); + +.x-button { + @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default; + + border-radius: 50%; + border-color: transparent; + background-color: var(--calcite-color-foreground-2); + + &:active, + &:hover { + @apply text-color-1; + background-color: var(--calcite-color-foreground-3); + } + + &:active { + @apply border-solid; + border-color: theme("borderColor.color-brand"); + } + + & calcite-icon { + color: inherit; + } +} + +:host([scale="s"]) { + .x-button { + inline-size: theme("spacing.4"); + block-size: theme("spacing.4"); + } +} + +:host([scale="m"]) { + .x-button { + inline-size: theme("spacing.6"); + block-size: theme("spacing.6"); + } +} + +:host([scale="l"]) { + .x-button { + inline-size: theme("spacing.8"); + block-size: theme("spacing.8"); + } +} :host([scale="s"]) { @apply text-n2; From 182eff442c0ef679bb171777242b73850eb887a9 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 17:47:52 -0800 Subject: [PATCH 03/18] cleanup --- .../src/components/combobox/combobox.scss | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index c9fc76e1c91..73ce3be52d6 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -13,21 +13,34 @@ @include disabled(); .x-button { - @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default; - + appearance: none; + align-content: center; + cursor: pointer; + display: flex; + outline-color: transparent; + align-items: center; + justify-content: center; + margin: 0px; + align-self: center; + color: var(--calcite-color-text-3); + transition: + all var(--calcite-animation-timing) ease-in-out 0s, + outline 0s, + outline-offset 0s; + border-width: var(--calcite-border-width-md); border-radius: 50%; border-color: transparent; background-color: var(--calcite-color-foreground-2); &:active, &:hover { - @apply text-color-1; + color: var(--calcite-color-text-1); background-color: var(--calcite-color-foreground-3); } &:active { - @apply border-solid; - border-color: theme("borderColor.color-brand"); + border-style: solid; + border-color: var(--calcite-color-brand); } & calcite-icon { @@ -37,22 +50,22 @@ :host([scale="s"]) { .x-button { - inline-size: theme("spacing.4"); - block-size: theme("spacing.4"); + inline-size: var(--calcite-spacing-sm); + block-size: var(--calcite-spacing-sm); } } :host([scale="m"]) { .x-button { - inline-size: theme("spacing.6"); - block-size: theme("spacing.6"); + inline-size: var(--calcite-spacing-lg); + block-size: var(--calcite-spacing-lg); } } :host([scale="l"]) { .x-button { - inline-size: theme("spacing.8"); - block-size: theme("spacing.8"); + inline-size: var(--calcite-spacing-xxl); + block-size: var(--calcite-spacing-xxl); } } From b7201ab8afd6aeaf9382476e9678a2a212a5b451 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 17:54:50 -0800 Subject: [PATCH 04/18] cleanup --- .../src/assets/styles/_x-button.scss | 58 +++++++++++++++++++ .../src/assets/styles/includes.scss | 1 + .../src/components/combobox/combobox.scss | 58 +------------------ 3 files changed, 60 insertions(+), 57 deletions(-) create mode 100644 packages/calcite-components/src/assets/styles/_x-button.scss diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss new file mode 100644 index 00000000000..5d36a096ed4 --- /dev/null +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -0,0 +1,58 @@ +@mixin xButton() { + .x-button { + appearance: none; + align-content: center; + cursor: pointer; + display: flex; + outline-color: transparent; + align-items: center; + justify-content: center; + margin: 0px; + align-self: center; + color: var(--calcite-color-text-3); + transition: + all var(--calcite-animation-timing) ease-in-out 0s, + outline 0s, + outline-offset 0s; + border-width: var(--calcite-border-width-md); + border-radius: 50%; + border-color: transparent; + background-color: var(--calcite-color-foreground-2); + + &:active, + &:hover { + color: var(--calcite-color-text-1); + background-color: var(--calcite-color-foreground-3); + } + + &:active { + border-style: solid; + border-color: var(--calcite-color-brand); + } + + & calcite-icon { + color: inherit; + } + } + + :host([scale="s"]) { + .x-button { + inline-size: var(--calcite-spacing-sm); + block-size: var(--calcite-spacing-sm); + } + } + + :host([scale="m"]) { + .x-button { + inline-size: var(--calcite-spacing-lg); + block-size: var(--calcite-spacing-lg); + } + } + + :host([scale="l"]) { + .x-button { + inline-size: var(--calcite-spacing-xxl); + block-size: var(--calcite-spacing-xxl); + } + } +} diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index 0fc0bb1afd9..3bfd3db9613 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -9,6 +9,7 @@ @import "host"; @import "floating-ui"; @import "sortable"; +@import "x-button"; @mixin slotted($selector, $tag, $scope: "") { #{$scope} slot[name="#{$selector}"]::slotted(#{$tag}), diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 73ce3be52d6..1978b19a9a4 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -11,63 +11,7 @@ } @include disabled(); - -.x-button { - appearance: none; - align-content: center; - cursor: pointer; - display: flex; - outline-color: transparent; - align-items: center; - justify-content: center; - margin: 0px; - align-self: center; - color: var(--calcite-color-text-3); - transition: - all var(--calcite-animation-timing) ease-in-out 0s, - outline 0s, - outline-offset 0s; - border-width: var(--calcite-border-width-md); - border-radius: 50%; - border-color: transparent; - background-color: var(--calcite-color-foreground-2); - - &:active, - &:hover { - color: var(--calcite-color-text-1); - background-color: var(--calcite-color-foreground-3); - } - - &:active { - border-style: solid; - border-color: var(--calcite-color-brand); - } - - & calcite-icon { - color: inherit; - } -} - -:host([scale="s"]) { - .x-button { - inline-size: var(--calcite-spacing-sm); - block-size: var(--calcite-spacing-sm); - } -} - -:host([scale="m"]) { - .x-button { - inline-size: var(--calcite-spacing-lg); - block-size: var(--calcite-spacing-lg); - } -} - -:host([scale="l"]) { - .x-button { - inline-size: var(--calcite-spacing-xxl); - block-size: var(--calcite-spacing-xxl); - } -} +@include xButton(); :host([scale="s"]) { @apply text-n2; From afe8991034c8798a30bb8fbf0588a4b8ffba679c Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 17:59:27 -0800 Subject: [PATCH 05/18] convert header to mixin --- .../src/assets/styles/_header.scss | 36 ++++++++++--------- .../src/assets/styles/includes.scss | 1 + .../src/components/block/block.scss | 6 ++-- .../pick-list-group/pick-list-group.scss | 2 +- .../components/tip-manager/tip-manager.scss | 2 +- .../src/components/tip/tip.scss | 6 ++-- 6 files changed, 28 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_header.scss b/packages/calcite-components/src/assets/styles/_header.scss index 72e3204de90..ca4c20a76fb 100644 --- a/packages/calcite-components/src/assets/styles/_header.scss +++ b/packages/calcite-components/src/assets/styles/_header.scss @@ -1,20 +1,22 @@ -/* Shared styles for header elements */ -.header { - color: var(--calcite-color-text-2); - fill: var(--calcite-color-text-2); - margin: 0px; - display: flex; - align-content: space-between; - align-items: center; -} +@mixin header() { + /* Shared styles for header elements */ + .header { + color: var(--calcite-color-text-2); + fill: var(--calcite-color-text-2); + margin: 0px; + display: flex; + align-content: space-between; + align-items: center; + } -.heading { - margin: 0px; - padding: 0px; - font-weight: var(--calcite-font-weight-medium); -} + .heading { + margin: 0px; + padding: 0px; + font-weight: var(--calcite-font-weight-medium); + } -.header .heading { - flex: 1 1 auto; - padding: var(--calcite-spacing-xxs); + .header .heading { + flex: 1 1 auto; + padding: var(--calcite-spacing-xxs); + } } diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index 3bfd3db9613..32f83cc86a7 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -6,6 +6,7 @@ /* mixins & extensions */ @import "animation"; @import "focus"; +@import "header"; @import "host"; @import "floating-ui"; @import "sortable"; diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 4f7e9e890f8..3859ffd19a4 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -1,3 +1,5 @@ +@import "../../assets/styles/animation"; + /** * CSS Custom Properties * @@ -15,9 +17,7 @@ } @include disabled(); - -@import "../../assets/styles/animation"; -@import "../../assets/styles/header"; +@include header(); .header { @apply justify-start p-0; diff --git a/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss b/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss index d28911e31f7..cde0822c470 100644 --- a/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss +++ b/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss @@ -15,7 +15,7 @@ @apply mb-0; } -@import "../../assets/styles/header"; +@include header(); .heading { @apply text-0h text-n1-wrap diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.scss b/packages/calcite-components/src/components/tip-manager/tip-manager.scss index aaeb6652eaa..3b8b98a1ca1 100644 --- a/packages/calcite-components/src/components/tip-manager/tip-manager.scss +++ b/packages/calcite-components/src/components/tip-manager/tip-manager.scss @@ -25,7 +25,7 @@ @apply hidden; } -@import "../../assets/styles/header"; +@include header(); .header { @apply border-color-3 diff --git a/packages/calcite-components/src/components/tip/tip.scss b/packages/calcite-components/src/components/tip/tip.scss index ab43da21c39..a818ae44808 100644 --- a/packages/calcite-components/src/components/tip/tip.scss +++ b/packages/calcite-components/src/components/tip/tip.scss @@ -1,7 +1,5 @@ -@import "../../assets/styles/header"; - /** -* CSS Custom Properties +* CSS Custom Properties * * These properties can be overridden using the component's tag as selector. * @@ -12,6 +10,8 @@ * @prop --calcite-tip-slotted-link-text-color: The text color of the slotted link. */ +@include header(); + :host { @apply text-n1h relative From c91cfb4b9260bf91e5edefab39387b50ab49dc61 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Feb 2024 18:03:53 -0800 Subject: [PATCH 06/18] cleanup. animation --- packages/calcite-components/src/components/block/block.scss | 2 -- packages/calcite-components/src/components/loader/loader.scss | 2 -- .../calcite-components/src/components/progress/progress.scss | 2 -- 3 files changed, 6 deletions(-) diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 3859ffd19a4..dea469763b6 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -1,5 +1,3 @@ -@import "../../assets/styles/animation"; - /** * CSS Custom Properties * diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss index 58da4bcb141..7363729a1ae 100644 --- a/packages/calcite-components/src/components/loader/loader.scss +++ b/packages/calcite-components/src/components/loader/loader.scss @@ -9,8 +9,6 @@ * @prop --calcite-loader-padding : Specifies the padding of the loader. */ -@import "../../assets/styles/animation"; - $stroke-width: 3; $loader-scale: 54; $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss index 7302fbcfde9..dc7133897a3 100644 --- a/packages/calcite-components/src/components/progress/progress.scss +++ b/packages/calcite-components/src/components/progress/progress.scss @@ -1,5 +1,3 @@ -@import "../../assets/styles/animation"; - :host { @apply relative block w-full; } From ac8e948b551ee259428af07d4e05f5e214535f12 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Feb 2024 13:20:02 -0800 Subject: [PATCH 07/18] remove shadow file (unused) --- .../src/assets/styles/_shadow.scss | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 packages/calcite-components/src/assets/styles/_shadow.scss diff --git a/packages/calcite-components/src/assets/styles/_shadow.scss b/packages/calcite-components/src/assets/styles/_shadow.scss deleted file mode 100644 index 1945754888b..00000000000 --- a/packages/calcite-components/src/assets/styles/_shadow.scss +++ /dev/null @@ -1,14 +0,0 @@ -%shadow-vars { - /* - * Component shadow variables - */ - --calcite-shadow-0: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shadow-1: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shadow-1-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.04); - --calcite-shadow-1-press: 0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08); - --calcite-shadow-2: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08); - --calcite-shadow-2-hover: 0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08); - --calcite-shadow-2-press: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16); - --calcite-shadow-border-bottom: 0 1px 0 var(--calcite-color-border-3); - --calcite-shadow-border-active: 0 0 0 1px var(--calcite-color-brand-press); -} From d43a9d0c5d5146c0d99da1631384c6e42d0272e5 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Feb 2024 13:49:57 -0800 Subject: [PATCH 08/18] remove unused vars --- packages/calcite-components/src/assets/styles/global.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss index 59bec040f75..defe4d88463 100644 --- a/packages/calcite-components/src/assets/styles/global.scss +++ b/packages/calcite-components/src/assets/styles/global.scss @@ -21,9 +21,7 @@ -moz-osx-font-smoothing: grayscale; --calcite-popover-z-index: var(--calcite-z-index-popup); --calcite-border-radius: var(--calcite-border-radius-round, 4px); - --calcite-border-radius-base: 0; --calcite-offset-invert-focus: 0; // should be 0 or 1 - --calcite-panel-width-multiplier: 1; --calcite-ui-icon-color: currentColor; font-family: var(--calcite-sans-family); From 03adba2982257dafa171e5c3899688026bb25cbc Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Feb 2024 14:21:12 -0800 Subject: [PATCH 09/18] review fixes --- .../src/assets/styles/_x-button.scss | 17 +++++------------ .../src/assets/styles/includes.scss | 2 +- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 5d36a096ed4..1058827cea6 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -18,6 +18,8 @@ border-radius: 50%; border-color: transparent; background-color: var(--calcite-color-foreground-2); + inline-size: var(--calcite-internal-x-button-size); + block-size: var(--calcite-internal-x-button-size); &:active, &:hover { @@ -36,23 +38,14 @@ } :host([scale="s"]) { - .x-button { - inline-size: var(--calcite-spacing-sm); - block-size: var(--calcite-spacing-sm); - } + --calcite-internal-x-button-size: var(--calcite-spacing-sm); } :host([scale="m"]) { - .x-button { - inline-size: var(--calcite-spacing-lg); - block-size: var(--calcite-spacing-lg); - } + --calcite-internal-x-button-size: var(--calcite-spacing-lg); } :host([scale="l"]) { - .x-button { - inline-size: var(--calcite-spacing-xxl); - block-size: var(--calcite-spacing-xxl); - } + --calcite-internal-x-button-size: var(--calcite-spacing-xxl); } } diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index 32f83cc86a7..1a80329ef94 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -68,7 +68,7 @@ ::slotted([calcite-hydrated][disabled]), [calcite-hydrated][disabled] { /* prevent opacity stacking */ - opacity: 1; + opacity: var(--calcite-opacity-full); } } From 621c2739bc1cf0a4a856909eb028759a4290e50e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Feb 2024 14:34:34 -0800 Subject: [PATCH 10/18] add mixin args --- .../src/assets/styles/_header.scss | 14 ++++++++----- .../src/assets/styles/_x-button.scss | 21 ++++++++++++------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_header.scss b/packages/calcite-components/src/assets/styles/_header.scss index ca4c20a76fb..b4c850361b1 100644 --- a/packages/calcite-components/src/assets/styles/_header.scss +++ b/packages/calcite-components/src/assets/styles/_header.scss @@ -1,8 +1,12 @@ -@mixin header() { +@mixin header( + $textColor: "--calcite-color-text-2", + $fontWeight: "--calcite-font-weight-medium", + $spacing: "--calcite-spacing-xxs" +) { /* Shared styles for header elements */ .header { - color: var(--calcite-color-text-2); - fill: var(--calcite-color-text-2); + color: var(#{$textColor}); + fill: var(#{$textColor}); margin: 0px; display: flex; align-content: space-between; @@ -12,11 +16,11 @@ .heading { margin: 0px; padding: 0px; - font-weight: var(--calcite-font-weight-medium); + font-weight: var(#{$fontWeight}); } .header .heading { flex: 1 1 auto; - padding: var(--calcite-spacing-xxs); + padding: var(#{$spacing}); } } diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 1058827cea6..653665c5970 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -1,4 +1,11 @@ -@mixin xButton() { +@mixin xButton( + $textColor: "--calcite-color-text-3", + $backgroundColor: "--calcite-color-foreground-2", + $hoverTextColor: "--calcite-color-text-1", + $hoverBackgroundColor: "--calcite-color-foreground-3", + $activeBorderColor: "--calcite-color-brand", + $borderWidth: "--calcite-border-width-md" +) { .x-button { appearance: none; align-content: center; @@ -9,27 +16,27 @@ justify-content: center; margin: 0px; align-self: center; - color: var(--calcite-color-text-3); + color: var(#{$textColor}); transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s; - border-width: var(--calcite-border-width-md); + border-width: var(#{$borderWidth}); border-radius: 50%; border-color: transparent; - background-color: var(--calcite-color-foreground-2); + background-color: var(#{$backgroundColor}); inline-size: var(--calcite-internal-x-button-size); block-size: var(--calcite-internal-x-button-size); &:active, &:hover { - color: var(--calcite-color-text-1); - background-color: var(--calcite-color-foreground-3); + color: var(#{$hoverTextColor}); + background-color: var(#{$hoverBackgroundColor}); } &:active { border-style: solid; - border-color: var(--calcite-color-brand); + border-color: var(#{$activeBorderColor}); } & calcite-icon { From 1afc73a3db79e386276fa22117f1e0df1e3de410 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Feb 2024 15:37:35 -0800 Subject: [PATCH 11/18] cleanup --- packages/calcite-components/src/components/block/block.scss | 1 - .../src/components/input-date-picker/input-date-picker.scss | 1 - packages/calcite-components/src/components/select/select.scss | 1 - 3 files changed, 3 deletions(-) diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index dea469763b6..cca80abc9ee 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -8,7 +8,6 @@ :host { @extend %component-host; - @extend %component-spacing; @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0 flex-col border-0 border-b border-solid p-0 duration-150; flex-basis: auto; diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss index ac808f57d25..638cab85d93 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss @@ -1,5 +1,4 @@ :host { - @extend %component-spacing; @include floatingUIElemAnim(".menu-container"); @apply relative inline-block diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss index 89c5131a62d..46c99640372 100644 --- a/packages/calcite-components/src/components/select/select.scss +++ b/packages/calcite-components/src/components/select/select.scss @@ -8,7 +8,6 @@ */ :host { - @extend %component-spacing; @apply flex flex-col; } From fadc1bbf518aa3c54b267a55683dee777686c49e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 22 Feb 2024 13:23:37 -0800 Subject: [PATCH 12/18] fix xbutton --- .../src/assets/styles/_x-button.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 653665c5970..2914575456a 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -25,8 +25,6 @@ border-radius: 50%; border-color: transparent; background-color: var(#{$backgroundColor}); - inline-size: var(--calcite-internal-x-button-size); - block-size: var(--calcite-internal-x-button-size); &:active, &:hover { @@ -45,14 +43,17 @@ } :host([scale="s"]) { - --calcite-internal-x-button-size: var(--calcite-spacing-sm); + inline-size: var(--calcite-spacing-sm); + block-size: var(--calcite-spacing-sm); } :host([scale="m"]) { - --calcite-internal-x-button-size: var(--calcite-spacing-lg); + inline-size: var(--calcite-spacing-lg); + block-size: var(--calcite-spacing-lg); } :host([scale="l"]) { - --calcite-internal-x-button-size: var(--calcite-spacing-xxl); + inline-size: var(--calcite-spacing-xxl); + block-size: var(--calcite-spacing-xxl); } } From bc043644291671fd31bbb4f42609042c0ae68e32 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 22 Feb 2024 13:37:27 -0800 Subject: [PATCH 13/18] fix xbutton --- .../calcite-components/src/assets/styles/_x-button.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 2914575456a..deb9af8bb16 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -42,17 +42,17 @@ } } - :host([scale="s"]) { + :host([scale="s"]) .x-button { inline-size: var(--calcite-spacing-sm); block-size: var(--calcite-spacing-sm); } - :host([scale="m"]) { + :host([scale="m"]) .x-button { inline-size: var(--calcite-spacing-lg); block-size: var(--calcite-spacing-lg); } - :host([scale="l"]) { + :host([scale="l"]) .x-button { inline-size: var(--calcite-spacing-xxl); block-size: var(--calcite-spacing-xxl); } From 118e84986e82323e4444d1230e378198c922eb34 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 22 Feb 2024 14:01:33 -0800 Subject: [PATCH 14/18] fix sizing on x-button --- .../src/assets/styles/_x-button.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index deb9af8bb16..f1d1e4ef7a5 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -43,17 +43,17 @@ } :host([scale="s"]) .x-button { - inline-size: var(--calcite-spacing-sm); - block-size: var(--calcite-spacing-sm); + inline-size: var(--calcite-spacing-lg); + block-size: var(--calcite-spacing-lg); } :host([scale="m"]) .x-button { - inline-size: var(--calcite-spacing-lg); - block-size: var(--calcite-spacing-lg); + inline-size: var(--calcite-size-xxl); + block-size: var(--calcite-size-xxl); } :host([scale="l"]) .x-button { - inline-size: var(--calcite-spacing-xxl); - block-size: var(--calcite-spacing-xxl); + inline-size: var(--calcite-size-xxxl); + block-size: var(--calcite-size-xxxl); } } From ac1967b9a6590e67d0c76a1da2d7a6b2f7eff5fd Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 23 Feb 2024 17:41:12 -0800 Subject: [PATCH 15/18] refactoring --- .../src/assets/styles/_header.scss | 14 +++++--------- .../src/assets/styles/_x-button.scss | 19 ++++++------------- 2 files changed, 11 insertions(+), 22 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_header.scss b/packages/calcite-components/src/assets/styles/_header.scss index b4c850361b1..ba4075d06d8 100644 --- a/packages/calcite-components/src/assets/styles/_header.scss +++ b/packages/calcite-components/src/assets/styles/_header.scss @@ -1,12 +1,8 @@ -@mixin header( - $textColor: "--calcite-color-text-2", - $fontWeight: "--calcite-font-weight-medium", - $spacing: "--calcite-spacing-xxs" -) { +@mixin header($textColor, $fontWeight, $spacing) { /* Shared styles for header elements */ .header { - color: var(#{$textColor}); - fill: var(#{$textColor}); + color: var(#{$textColor}, var(--calcite-color-text-2)); + fill: var(#{$textColor}, var(--calcite-color-text-2)); margin: 0px; display: flex; align-content: space-between; @@ -16,11 +12,11 @@ .heading { margin: 0px; padding: 0px; - font-weight: var(#{$fontWeight}); + font-weight: var(#{$fontWeight}, var(--calcite-font-weight-medium)); } .header .heading { flex: 1 1 auto; - padding: var(#{$spacing}); + padding: var(#{$spacing}, var(--calcite-spacing-xxs)); } } diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index f1d1e4ef7a5..94e48ef976a 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -1,11 +1,4 @@ -@mixin xButton( - $textColor: "--calcite-color-text-3", - $backgroundColor: "--calcite-color-foreground-2", - $hoverTextColor: "--calcite-color-text-1", - $hoverBackgroundColor: "--calcite-color-foreground-3", - $activeBorderColor: "--calcite-color-brand", - $borderWidth: "--calcite-border-width-md" -) { +@mixin xButton($textColor, $backgroundColor, $hoverTextColor, $hoverBackgroundColor, $activeBorderColor, $borderWidth) { .x-button { appearance: none; align-content: center; @@ -16,25 +9,25 @@ justify-content: center; margin: 0px; align-self: center; - color: var(#{$textColor}); + color: var(#{$textColor}, var(--calcite-color-text-3)); transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s; - border-width: var(#{$borderWidth}); + border-width: var(#{$borderWidth}, var(--calcite-border-width-md)); border-radius: 50%; border-color: transparent; - background-color: var(#{$backgroundColor}); + background-color: var(#{$backgroundColor}, var(--calcite-color-foreground-2)); &:active, &:hover { color: var(#{$hoverTextColor}); - background-color: var(#{$hoverBackgroundColor}); + background-color: var(#{$hoverBackgroundColor}, var(--calcite-color-foreground-3)); } &:active { border-style: solid; - border-color: var(#{$activeBorderColor}); + border-color: var(#{$activeBorderColor}, var(--calcite-color-brand)); } & calcite-icon { From 37de05ed4c6b5f171d9a06a32b3fb085fa330953 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 26 Feb 2024 11:06:12 -0800 Subject: [PATCH 16/18] cleanup --- packages/calcite-components/src/assets/styles/global.scss | 2 +- .../src/components/inline-editable/inline-editable.scss | 2 -- packages/calcite-components/src/components/modal/modal.scss | 2 -- .../src/components/pagination/pagination.scss | 2 -- packages/calcite-components/src/components/switch/switch.scss | 2 -- .../calcite-components/src/components/text-area/text-area.scss | 2 -- 6 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss index 6777815d412..c81d719461c 100644 --- a/packages/calcite-components/src/assets/styles/global.scss +++ b/packages/calcite-components/src/assets/styles/global.scss @@ -1,4 +1,4 @@ -@import "~@esri/calcite-base/dist/_index"; +@import "~@esri/calcite-base/dist/index"; @import "~@esri/calcite-design-tokens/dist/scss/index"; @import "~@esri/calcite-design-tokens/dist/scss/core"; diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.scss b/packages/calcite-components/src/components/inline-editable/inline-editable.scss index 86e059cd8a8..ee8e82de397 100755 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.scss +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.scss @@ -1,5 +1,3 @@ -@import "~@esri/calcite-design-tokens/dist/scss/core"; - /** * CSS Custom Properties * diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss index 2df1d60f7db..5fb26a60d67 100644 --- a/packages/calcite-components/src/components/modal/modal.scss +++ b/packages/calcite-components/src/components/modal/modal.scss @@ -1,5 +1,3 @@ -@import "~@esri/calcite-design-tokens/dist/scss/core"; - /** * CSS Custom Properties * diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss index 3b34d4e7e6e..79a8fcb8031 100644 --- a/packages/calcite-components/src/components/pagination/pagination.scss +++ b/packages/calcite-components/src/components/pagination/pagination.scss @@ -1,5 +1,3 @@ -@import "~@esri/calcite-design-tokens/dist/scss/core"; - /** * CSS Custom Properties * diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss index 372a58475d8..cfd0fa77c7d 100644 --- a/packages/calcite-components/src/components/switch/switch.scss +++ b/packages/calcite-components/src/components/switch/switch.scss @@ -11,8 +11,6 @@ * @prop --calcite-switch-shadow: Specifies the shadow of the component. */ -@import "~@esri/calcite-design-tokens/dist/scss/core"; - :host { --calcite-switch-handle-background-color: var(--calcite-color-foreground-1); --calcite-switch-handle-border-color: var(--calcite-color-border-input); diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index dc0fe49e923..c1d2907d005 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -1,5 +1,3 @@ -@import "~@esri/calcite-design-tokens/dist/scss/core"; - /** * CSS Custom Properties * From 1fa7937cb7fc0613574125069701635a7ec519ed Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 28 Feb 2024 09:58:05 -0800 Subject: [PATCH 17/18] fix mixin --- .../calcite-components/src/assets/styles/_header.scss | 6 +++++- .../calcite-components/src/assets/styles/_x-button.scss | 9 ++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_header.scss b/packages/calcite-components/src/assets/styles/_header.scss index ba4075d06d8..6639e20f323 100644 --- a/packages/calcite-components/src/assets/styles/_header.scss +++ b/packages/calcite-components/src/assets/styles/_header.scss @@ -1,4 +1,8 @@ -@mixin header($textColor, $fontWeight, $spacing) { +@mixin header( + $textColor: "--calcite-color-text-2", + $fontWeight: "--calcite-font-weight-medium", + $spacing: "--calcite-spacing-xxs" +) { /* Shared styles for header elements */ .header { color: var(#{$textColor}, var(--calcite-color-text-2)); diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 94e48ef976a..0ee18028747 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -1,4 +1,11 @@ -@mixin xButton($textColor, $backgroundColor, $hoverTextColor, $hoverBackgroundColor, $activeBorderColor, $borderWidth) { +@mixin xButton( + $textColor: "--calcite-color-text-3", + $backgroundColor: "--calcite-color-foreground-2", + $hoverTextColor: "--calcite-color-text-3", + $hoverBackgroundColor: "--calcite-color-foreground-3", + $activeBorderColor: "--calcite-color-brand", + $borderWidth: "--calcite-border-width-md" +) { .x-button { appearance: none; align-content: center; From 6452bfd2314f7e6a5292eeba68af68223f942a3f Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 28 Feb 2024 10:27:48 -0800 Subject: [PATCH 18/18] specify transition --- packages/calcite-components/src/assets/styles/_x-button.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/assets/styles/_x-button.scss b/packages/calcite-components/src/assets/styles/_x-button.scss index 0ee18028747..d17ab1bf819 100644 --- a/packages/calcite-components/src/assets/styles/_x-button.scss +++ b/packages/calcite-components/src/assets/styles/_x-button.scss @@ -18,7 +18,9 @@ align-self: center; color: var(#{$textColor}, var(--calcite-color-text-3)); transition: - all var(--calcite-animation-timing) ease-in-out 0s, + color, + background-color, + border-color var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s; border-width: var(#{$borderWidth}, var(--calcite-border-width-md));