bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/collapse-transition/collapse-transition.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,11 +127,11 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-collapse-transitioncollapse-transition {
+:where(.bk-collapse-transitioncollapse-transition) {
   transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
 }
-.bk-collapse-transition-leave-active,
-.bk-collapse-transition-enter-active {
+:where(.bk-collapse-transition-leave-active),
+:where(.bk-collapse-transition-enter-active) {
   transition: 0.3s max-height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
 }
 .horizontal-collapse-transition {
@@ -146,77 +146,77 @@
 .fade-in-linear-leave-active {
   opacity: 0;
 }
-.bk-fade-in-linear-enter-active,
-.bk-fade-in-linear-leave-active {
+:where(.bk-fade-in-linear-enter-active),
+:where(.bk-fade-in-linear-leave-active) {
   transition: opacity 200ms linear;
 }
-.bk-fade-in-linear-enter,
-.bk-fade-in-linear-leave,
-.bk-fade-in-linear-leave-active {
+:where(.bk-fade-in-linear-enter),
+:where(.bk-fade-in-linear-leave),
+:where(.bk-fade-in-linear-leave-active) {
   opacity: 0;
 }
-.bk-fade-in-enter-active,
-.bk-fade-in-leave-active {
+:where(.bk-fade-in-enter-active),
+:where(.bk-fade-in-leave-active) {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-fade-in-enter,
-.bk-fade-in-leave-active {
+:where(.bk-fade-in-enter),
+:where(.bk-fade-in-leave-active) {
   opacity: 0;
 }
-.bk-zoom-in-center-enter-active,
-.bk-zoom-in-center-leave-active {
+:where(.bk-zoom-in-center-enter-active),
+:where(.bk-zoom-in-center-leave-active) {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-zoom-in-center-enter,
-.bk-zoom-in-center-leave-active {
+:where(.bk-zoom-in-center-enter),
+:where(.bk-zoom-in-center-leave-active) {
   opacity: 0;
   transform: scaleX(0);
 }
-.bk-zoom-in-top-enter-active,
-.bk-zoom-in-top-leave-active {
+:where(.bk-zoom-in-top-enter-active),
+:where(.bk-zoom-in-top-leave-active) {
   opacity: 1;
   transform: scaleY(1);
   transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
   transform-origin: center top;
 }
-.bk-zoom-in-top-enter,
-.bk-zoom-in-top-leave-active {
+:where(.bk-zoom-in-top-enter),
+:where(.bk-zoom-in-top-leave-active) {
   opacity: 0;
   transform: scaleY(0);
 }
-.bk-zoom-in-bottom-enter-active,
-.bk-zoom-in-bottom-leave-active {
+:where(.bk-zoom-in-bottom-enter-active),
+:where(.bk-zoom-in-bottom-leave-active) {
   opacity: 1;
   transform: scaleY(1);
   transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
   transform-origin: center bottom;
 }
-.bk-zoom-in-bottom-enter,
-.bk-zoom-in-bottom-leave-active {
+:where(.bk-zoom-in-bottom-enter),
+:where(.bk-zoom-in-bottom-leave-active) {
   opacity: 0;
   transform: scaleY(0);
 }
-.bk-zoom-in-left-enter-active,
-.bk-zoom-in-left-leave-active {
+:where(.bk-zoom-in-left-enter-active),
+:where(.bk-zoom-in-left-leave-active) {
   opacity: 1;
   transform: scale(1, 1);
   transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
   transform-origin: top left;
 }
-.bk-zoom-in-left-enter,
-.bk-zoom-in-left-leave-active {
+:where(.bk-zoom-in-left-enter),
+:where(.bk-zoom-in-left-leave-active) {
   opacity: 0;
   transform: scale(0.45, 0.45);
 }
-.bk-list-enter-active,
-.bk-list-leave-active {
+:where(.bk-list-enter-active),
+:where(.bk-list-leave-active) {
   transition: all 1s;
 }
-.bk-list-enter,
+:where(.bk-list-enter),
 .bk-list-leave-active {
   opacity: 0;
   transform: translateY(-30px);
 }
-.bk-opacity-transition {
+:where(.bk-opacity-transition) {
   transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }

package/lib/color-picker/color-picker.css

@@ -1,4 +1,4 @@
-.bk-color-picker {
+:where(.bk-color-picker) {
   position: relative;
   display: inline-flex;
   height: 32px;
@@ -10,77 +10,77 @@
   transition: border 0.2s, box-shadow 0.2s;
   align-content: center;
 }
-.bk-color-picker.bk-color-picker-show-value {
+:where(.bk-color-picker).bk-color-picker-show-value {
   width: 150px;
 }
-.bk-color-picker.bk-color-picker-large {
+:where(.bk-color-picker).bk-color-picker-large {
   height: 36px;
 }
-.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value {
+:where(.bk-color-picker).bk-color-picker-large.bk-color-picker-show-value {
   width: 170px;
 }
-.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
+:where(.bk-color-picker).bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
   width: calc(100% - 62px);
   font-size: 16px;
 }
-.bk-color-picker.bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
+:where(.bk-color-picker).bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
   width: 22px;
   height: 22px;
   font-size: 22px;
 }
-.bk-color-picker.bk-color-picker-small {
+:where(.bk-color-picker).bk-color-picker-small {
   height: 28px;
 }
-.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value {
+:where(.bk-color-picker).bk-color-picker-small.bk-color-picker-show-value {
   width: 132px;
 }
-.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
+:where(.bk-color-picker).bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
   width: calc(100% - 56px);
   font-size: 12px;
 }
-.bk-color-picker.bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
+:where(.bk-color-picker).bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
   width: 16px;
   height: 16px;
   font-size: 16px;
 }
-.bk-color-picker:hover,
-.bk-color-picker:focus {
+:where(.bk-color-picker):hover,
+:where(.bk-color-picker):focus {
   border-color: #3a84ff;
   transition: border 0.2s;
 }
-.bk-color-picker.bk-color-picker-show-dropdown {
+:where(.bk-color-picker).bk-color-picker-show-dropdown {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
   transition: border 0.2s, box-shadow 0.2s;
 }
-.bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
+:where(.bk-color-picker).bk-color-picker-show-dropdown .icon-angle-down {
   transform: rotate(-180deg);
   transition: transform 0.3s;
 }
-.bk-color-picker.bk-color-picker-disabled {
+:where(.bk-color-picker).bk-color-picker-disabled {
   cursor: not-allowed;
   background-color: #e1ecff;
   border-color: #699df4;
 }
-.bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
+:where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-text {
   color: #3a84ff;
 }
-.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
+:where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
   color: #3a84ff;
 }
-.bk-color-picker .bk-color-picker-color {
+:where(.bk-color-picker) .bk-color-picker-color {
   display: flex;
   margin-left: 6px;
   align-items: center;
 }
-.bk-color-picker .bk-color-picker-color .bk-color-picker-color-square {
+:where(.bk-color-picker) .bk-color-picker-color .bk-color-picker-color-square {
   width: 18px;
   height: 18px;
   font-size: 18px;
   color: #3a84ff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
 }
-.bk-color-picker .bk-color-picker-text {
+:where(.bk-color-picker) .bk-color-picker-text {
   display: flex;
   width: calc(100% - 58px);
   margin-left: 6px;
@@ -89,12 +89,12 @@
   color: #63656e;
   align-items: center;
 }
-.bk-color-picker .bk-color-picker-text span {
+:where(.bk-color-picker) .bk-color-picker-text span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-color-picker .bk-color-picker-icon {
+:where(.bk-color-picker) .bk-color-picker-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -102,7 +102,7 @@
   margin-right: 5px;
   transform: rotate(180deg);
 }
-.bk-color-picker .bk-color-picker-icon .icon-angle-down {
+:where(.bk-color-picker) .bk-color-picker-icon .icon-angle-down {
   position: absolute;
   right: 4px;
   display: flex;
@@ -112,22 +112,22 @@
   transition: transform 0.3s;
 }
 /*下拉面板*/
-.bk-color-picker-dropdown {
+:where(.bk-color-picker-dropdown) {
   width: 272px;
 }
-.bk-color-picker-saturation {
+:where(.bk-color-picker-saturation) {
   position: relative;
   height: 180px;
   margin: 0 6px 6px;
 }
-.bk-color-picker-saturation .bk-color-picker-saturation-white {
+:where(.bk-color-picker-saturation) .bk-color-picker-saturation-white {
   background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
 }
-.bk-color-picker-saturation .bk-color-picker-saturation-black {
+:where(.bk-color-picker-saturation) .bk-color-picker-saturation-black {
   background: linear-gradient(0deg, #000, transparent);
 }
-.bk-color-picker-saturation .bk-color-picker-saturation-white,
-.bk-color-picker-saturation .bk-color-picker-saturation-black {
+:where(.bk-color-picker-saturation) .bk-color-picker-saturation-white,
+:where(.bk-color-picker-saturation) .bk-color-picker-saturation-black {
   position: absolute;
   top: 0;
   left: 0;
@@ -135,18 +135,18 @@
   height: 100%;
   cursor: pointer;
 }
-.bk-color-picker-hue {
+:where(.bk-color-picker-hue) {
   position: relative;
   height: 10px;
   margin: 0 6px 6px;
   cursor: pointer;
   background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
 }
-.bk-color-picker-hue .bk-color-picker-hue-pointer {
+:where(.bk-color-picker-hue) .bk-color-picker-hue-pointer {
   position: absolute;
   top: 0;
 }
-.bk-color-picker-hue .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
+:where(.bk-color-picker-hue) .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
   width: 4px;
   height: 8px;
   margin-top: 1px;
@@ -156,26 +156,26 @@
   transform: translateX(-2px);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 }
-.bk-color-picker-input {
+:where(.bk-color-picker-input) {
   display: flex;
   margin: 0 6px 1px;
   font-size: 12px;
   color: #63656e;
   justify-content: space-between;
 }
-.bk-color-picker-input .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
+:where(.bk-color-picker-input) .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
   width: 70px;
 }
-.bk-color-picker-input .bk-color-picker-input-rgba {
+:where(.bk-color-picker-input) .bk-color-picker-input-rgba {
   display: flex;
   width: 160px;
   justify-content: space-between;
 }
-.bk-color-picker-input .bk-color-picker-input-part {
+:where(.bk-color-picker-input) .bk-color-picker-input-part {
   display: flex;
   flex-flow: column;
 }
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value {
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value {
   width: 32px;
   height: 22px;
   padding: 0 4px;
@@ -185,32 +185,32 @@
   outline: none;
   transition: border 0.2s;
 }
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value:focus {
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value:focus {
   border-color: #3a84ff;
   transition: border 0.2s;
 }
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value.error {
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value.error {
   border-color: #3a84ff;
 }
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button {
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button {
   margin: 0;
   appearance: none;
 }
-.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-text {
+:where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-text {
   height: 18px;
   line-height: 18px;
   text-align: center;
 }
-.bk-color-picker-recommend-container {
+:where(.bk-color-picker-recommend-container) {
   padding: 6px;
   border-top: 1px solid #f0f1f5;
 }
-.bk-color-picker-recommend-container .bk-color-picker-recommend {
+:where(.bk-color-picker-recommend-container) .bk-color-picker-recommend {
   display: flex;
   flex-wrap: wrap;
 }
-.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color {
+:where(.bk-color-picker-recommend-container) .bk-color-picker-recommend .bk-color-picker-recommend-color {
   width: 20px;
   height: 20px;
   margin: 3px;
@@ -218,23 +218,23 @@
   border-radius: 3px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
 }
-.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
+:where(.bk-color-picker-recommend-container) .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
   box-shadow: 0 0 3px 2px #3a84ff;
 }
-.bk-color-picker-saturation,
-.bk-color-picker-hue,
-.bk-color-picker-recommend {
+:where(.bk-color-picker-saturation),
+:where(.bk-color-picker-hue),
+:where(.bk-color-picker-recommend) {
   outline: none;
   transition: box-shadow 0.2s;
 }
-.bk-color-picker-saturation:focus,
-.bk-color-picker-hue:focus,
-.bk-color-picker-recommend:focus {
+:where(.bk-color-picker-saturation):focus,
+:where(.bk-color-picker-hue):focus,
+:where(.bk-color-picker-recommend):focus {
   box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
   transition: box-shadow 0.2s;
 }
 /*饱和度和预设值共用样式*/
-.bk-color-picker-pointer {
+:where(.bk-color-picker-pointer) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -242,7 +242,7 @@
   height: 4px;
   cursor: pointer;
 }
-.bk-color-picker-pointer .bk-color-picker-circle {
+:where(.bk-color-picker-pointer) .bk-color-picker-circle {
   position: absolute;
   top: 0;
   left: 0;
@@ -253,10 +253,10 @@
   transform: translate(-2px, -2px);
   box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
 }
-.bk-color-picker-empty {
+:where(.bk-color-picker-empty) {
   position: relative;
 }
-.bk-color-picker-empty::after {
+:where(.bk-color-picker-empty)::after {
   position: absolute;
   top: 1px;
   left: calc(50% - 1px);
@@ -267,7 +267,7 @@
   content: '';
   transform: rotate(45deg);
 }
-.bk-color-dropdown-container {
+:where(.bk-color-dropdown-container) {
   padding: 0px;
   cursor: default;
   transform-origin: center top;

package/lib/color-picker/color-picker.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-color-picker {
+:where(.@{bk-prefix}-color-picker) {
   position: relative;
   display: inline-flex;
   height: 32px;
@@ -9,7 +9,9 @@
   border: 1px solid #dcdee5;
   border-radius: 2px;
   outline: none;
-  transition: border .2s, box-shadow .2s;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
   align-content: center;
 
   &.@{bk-prefix}-color-picker-show-value {
@@ -57,17 +59,19 @@
   &:hover,
   &:focus {
     border-color: #3a84ff;
-    transition: border .2s;
+    transition: border 0.2s;
   }
 
   &.@{bk-prefix}-color-picker-show-dropdown {
     border-color: #3a84ff;
-    box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
-    transition: border .2s, box-shadow .2s;
+    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
+    transition:
+      border 0.2s,
+      box-shadow 0.2s;
 
     .icon-angle-down {
       transform: rotate(-180deg);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
   }
 
@@ -95,7 +99,7 @@
       height: 18px;
       font-size: 18px;
       color: #3a84ff;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -123,7 +127,6 @@
     margin-right: 5px;
     transform: rotate(180deg);
 
-
     .icon-angle-down {
       position: absolute;
       right: 4px;
@@ -131,17 +134,17 @@
       align-items: center;
       font-size: 20px;
       color: #979ba5;
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
   }
 }
 
 /*下拉面板*/
-.@{bk-prefix}-color-picker-dropdown {
+:where(.@{bk-prefix}-color-picker-dropdown) {
   width: 272px;
 }
 
-.@{bk-prefix}-color-picker-saturation {
+:where(.@{bk-prefix}-color-picker-saturation) {
   position: relative;
   height: 180px;
   margin: 0 6px 6px;
@@ -165,7 +168,7 @@
   }
 }
 
-.@{bk-prefix}-color-picker-hue {
+:where(.@{bk-prefix}-color-picker-hue) {
   position: relative;
   height: 10px;
   margin: 0 6px 6px;
@@ -184,12 +187,12 @@
       background: #fff;
       border-radius: 1px;
       transform: translateX(-2px);
-      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
     }
   }
 }
 
-.@{bk-prefix}-color-picker-input {
+:where(.@{bk-prefix}-color-picker-input) {
   display: flex;
   margin: 0 6px 1px;
   font-size: 12px;
@@ -218,11 +221,11 @@
       border: 1px solid #c4c6cc;
       border-radius: 2px;
       outline: none;
-      transition: border .2s;
+      transition: border 0.2s;
 
       &:focus {
-        border-color: #3a84ff;;
-        transition: border .2s;
+        border-color: #3a84ff;
+        transition: border 0.2s;
       }
 
       &.error {
@@ -244,7 +247,7 @@
   }
 }
 
-.@{bk-prefix}-color-picker-recommend-container {
+:where(.@{bk-prefix}-color-picker-recommend-container) {
   padding: 6px;
   border-top: 1px solid #f0f1f5;
 
@@ -258,29 +261,29 @@
       margin: 3px;
       cursor: pointer;
       border-radius: 3px;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
 
       &.@{bk-prefix}-color-picker-recommend-selected-color {
-        box-shadow: 0 0 3px 2px #3a84ff;;
+        box-shadow: 0 0 3px 2px #3a84ff;
       }
     }
   }
 }
 
-.@{bk-prefix}-color-picker-saturation,
-.@{bk-prefix}-color-picker-hue,
-.@{bk-prefix}-color-picker-recommend {
+:where(.@{bk-prefix}-color-picker-saturation),
+:where(.@{bk-prefix}-color-picker-hue),
+:where(.@{bk-prefix}-color-picker-recommend) {
   outline: none;
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(45, 140, 240, .5);
-    transition: box-shadow .2s;
+    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
+    transition: box-shadow 0.2s;
   }
 }
 
 /*饱和度和预设值共用样式*/
-.@{bk-prefix}-color-picker-pointer {
+:where(.@{bk-prefix}-color-picker-pointer) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -297,11 +300,14 @@
     cursor: pointer;
     border-radius: 50%;
     transform: translate(-2px, -2px);
-    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
+    box-shadow:
+      0 0 0 1.5px #fff,
+      inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+      0 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 }
 
-.@{bk-prefix}-color-picker-empty {
+:where(.@{bk-prefix}-color-picker-empty) {
   position: relative;
 
   &::after {
@@ -317,7 +323,7 @@
   }
 }
 
-.@{bk-prefix}-color-dropdown-container {
+:where(.@{bk-prefix}-color-dropdown-container) {
   padding: 0px;
   cursor: default;
   transform-origin: center top;