fix and clean up component CSS props

Esri · Jul 16, 2024 · 2c94740 · 2c94740
1 parent 503730e
commit 2c94740
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 25 deletions.
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -2511,18 +2511,6 @@ describe("calcite-color-picker", () => {
             targetProp: "--calcite-color-picker-hex-input-background-color",
           },
         ],
-        "--calcite-color-picker-input-background-color-hover": [
-          {
-            shadowSelector: `.${CSS.channel}`,
-            targetProp: "--calcite-input-background-color",
-            state: "hover",
-          },
-          {
-            shadowSelector: `.${CSS.hexInput}`,
-            targetProp: "--calcite-color-picker-hex-input-background-color",
-            state: "hover",
-          },
-        ],
         "--calcite-color-picker-input-border-color": [
           {
             shadowSelector: `.${CSS.channel}`,
@@ -2589,18 +2577,10 @@ describe("calcite-color-picker", () => {
           shadowSelector: `.${CSS.colorModes}`,
           targetProp: "--calcite-tab-nav-indicator-color",
         },
-        "--calcite-color-picker-tab-title-background-color": {
-          shadowSelector: `.${CSS.colorMode}`,
-          targetProp: "--calcite-tab-title-background-color",
-        },
         "--calcite-color-picker-tab-title-text-color": {
           shadowSelector: `.${CSS.colorMode}`,
           targetProp: "--calcite-tab-title-text-color",
         },
-        "--calcite-color-picker-tabs-background-color": {
-          shadowSelector: `.${CSS.colorModeContainer}`,
-          targetProp: "--calcite-tabs-background-color",
-        },
         "--calcite-color-picker-tabs-border-color": {
           shadowSelector: `.${CSS.colorModeContainer}`,
           targetProp: "--calcite-tabs-border-color",

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -16,7 +16,6 @@
  * @prop --calcite-color-picker-button-text-color-hover: defines the text color of the button when in a hover state in the component.
  * @prop --calcite-color-picker-button-text-color: defines the text color of the button in the component.
  * @prop --calcite-color-picker-input-background-color: defines the background color of the input in the component.
- * @prop --calcite-color-picker-input-background-color-hover: defines the background color of the input when in a hover state in the component.
  * @prop --calcite-color-picker-input-border-color: defines the border color of the input in the component.
  * @prop --calcite-color-picker-input-corner-radius: defines the corner radius of the input in the component.
  * @prop --calcite-color-picker-input-prefix-background-color: defines the background color of the prefix sub-component.
@@ -25,9 +24,7 @@
  * @prop --calcite-color-picker-input-suffix-text-color: defines the text color of the suffix sub-component.
  * @prop --calcite-color-picker-input-text-color: defines the text color of the input in the component.
  * @prop --calcite-color-picker-tab-nav-indicator-color: Specifies the color of the active tab indicator.
- * @prop --calcite-color-picker-tab-title-background-color: Specifies the background color of the sub-component.
  * @prop --calcite-color-picker-tab-title-text-color: Specifies the text color of the sub-component.
- * @prop --calcite-color-picker-tabs-background-color: The background color of the sub-component.
  * @prop --calcite-color-picker-tabs-border-color: The border color of the sub-component.
  * @prop --calcite-color-picker-text-color: Specifies the background color of the component.
  */
@@ -234,7 +231,7 @@ calcite-button {
   --calcite-button-corner-radius: var(--calcite-color-picker-button-corner-radius);
   --calcite-button-text-color: var(--calcite-color-picker-button-text-color);
   --calcite-button-background-color: var(--calcite-color-picker-button-background-color);
-  --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-hover);
+  --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color);
 
   &:hover {
     --calcite-button-text-color: var(--calcite-color-picker-button-text-color-hover);

diff --git a/packages/calcite-components/src/components/input/common/_mixins.scss b/packages/calcite-components/src/components/input/common/_mixins.scss
@@ -163,7 +163,7 @@
     }
     .suffix {
       @apply order-5;
-      color: var(--calcite-input-prefix-text-color, var(--calcite-color-text-2));
+      color: var(--calcite-input-suffix-text-color, var(--calcite-color-text-2));
       background-color: var(--calcite-input-suffix-background-color, var(--calcite-color-background));
       border-inline-start-width: var(--calcite-border-width-none);
     }