diff --git a/package.json b/package.json index 63289ebfb..604bbd6ae 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "ts-jest": "29.1.2", "tsc-alias": "1.8.8", "typescript": "5.3.3", - "vanilla-framework": "4.6.0", + "vanilla-framework": "4.9.0", "wait-on": "7.2.0", "webpack": "5.89.0" }, diff --git a/src/components/Icon/Icon.stories.scss b/src/components/Icon/Icon.stories.scss index 53e588489..106b10553 100644 --- a/src/components/Icon/Icon.stories.scss +++ b/src/components/Icon/Icon.stories.scss @@ -1,7 +1,4 @@ -@import "~vanilla-framework/scss/settings"; -@import "~vanilla-framework/scss/base_placeholders"; -@import "~vanilla-framework/scss/base_icon-definitions"; -@import "~vanilla-framework/scss/patterns_icons"; +@import "vanilla-framework"; @include vf-b-placeholders; @include vf-p-icons-common; diff --git a/src/components/MultiSelect/MultiSelect.scss b/src/components/MultiSelect/MultiSelect.scss index fbb220267..a7551aec8 100644 --- a/src/components/MultiSelect/MultiSelect.scss +++ b/src/components/MultiSelect/MultiSelect.scss @@ -1,11 +1,15 @@ @use "sass:map"; @import "vanilla-framework"; -@include vf-base; -@include vf-p-lists; +@include vf-b-placeholders; // Vanilla base placeholders to extend from $dropdown-max-height: 20rem; .multi-select { + // Scope Vanilla form includes to multi select component only + // to avoid overriding any Vanilla base styles + // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030 + @include vf-b-forms; + position: relative; } @@ -37,12 +41,12 @@ $dropdown-max-height: 20rem; } .multi-select__dropdown { - @extend %vf-bg--x-light; - @extend %vf-has-box-shadow; + background-color: $colors--theme--background-default; + box-shadow: $box-shadow; + color: $colors--theme--text-default; left: 0; max-height: $dropdown-max-height; overflow: auto; - padding-top: $spv--small; position: absolute; right: 0; @@ -59,14 +63,15 @@ $dropdown-max-height: 20rem; } .multi-select__dropdown-list { - @extend %vf-list; - + list-style: none; margin-bottom: $sph--x-small; + margin-left: 0; + padding-left: 0; } .multi-select__footer { - background: white; - border-top: 1px solid $color-mid-light; + background: $colors--theme--background-default; + border-top: 1px solid $colors--theme--border-default; bottom: 0; display: flex; flex-wrap: wrap; @@ -97,12 +102,6 @@ $dropdown-max-height: 20rem; } } -.multi-select__dropdown-item-description { - @extend %small-text; - - color: $color-mid-dark; -} - .multi-select__dropdown-button { border: 0; margin-bottom: 0; @@ -113,7 +112,7 @@ $dropdown-max-height: 20rem; } .multi-select__selected-list { - background-color: $colors--light-theme--background-inputs; + background-color: $colors--theme--background-inputs; border-bottom: 0; margin: 0; overflow: hidden; @@ -142,12 +141,12 @@ $dropdown-max-height: 20rem; transform: translateY(-50%) rotate(-180deg); @extend %icon; - @include vf-icon-chevron($color-mid-dark); + @include vf-icon-chevron-themed; @include vf-transition($property: transform, $duration: fast); } &[aria-expanded="true"] { - background-color: $colors--light-theme--background-hover; + background-color: $colors--theme--background-hover; } &[aria-expanded="false"] { diff --git a/yarn.lock b/yarn.lock index ea70496c0..5f20fbb95 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14500,10 +14500,10 @@ validate-npm-package-name@^5.0.0: dependencies: builtins "^5.0.0" -vanilla-framework@4.6.0: - version "4.6.0" - resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.6.0.tgz#61b93a2197eed0d869f85e1014dd9e67bacc355e" - integrity sha512-pRjJknqsL4CLA+ovLMlg7MhVh9nIcu7Ev81Z62gh3hAzUDIiZOUI2W9+B16XWv4QFmFxEOgQcfVi2cezLun9SQ== +vanilla-framework@4.9.0: + version "4.9.0" + resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.9.0.tgz#7566b42a22c2394ea1d7ea843d24ec305446cb3e" + integrity sha512-iTmvqWlsX0ic69VZ1sR9NPQtYRR9+iM679HZCl7SDQhMQSsEeJEQ6Ejjen3JN5a7YxiYmeIhxaLlmC4rExRT1w== vary@~1.1.2: version "1.1.2"