currentcolorを適用

uzabase · Oct 30, 2024 · 89dbf83 · 89dbf83
1 parent 441b1b3
commit 89dbf83
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 33 deletions.
diff --git a/dist/components/button/button.css b/dist/components/button/button.css
@@ -1,5 +1,4 @@
 :host {
-  --icon-color: var(--color-semantic-text-button-outline-default);
   --padding-inline: 16px;
 
   display: inline-block;
@@ -37,21 +36,18 @@
 }
 
 .type__default.appearance__outline:hover:not(:disabled) {
-  --icon-color: var(--color-semantic-text-button-outline-hover);
 
   border-color: var(--color-semantic-border-button-outline-hover);
   color: var(--color-semantic-text-button-outline-hover);
 }
 
 .type__default.appearance__outline:focus-visible:not(:is(:disabled, .isSelected)) {
-  --icon-color: var(--color-semantic-text-button-outline-focus);
 
   border-color: var(--color-semantic-border-button-outline-focus);
   color: var(--color-semantic-text-button-outline-focus);
 }
 
 .type__default.appearance__fill {
-  --icon-color: var(--color-semantic-text-button-fill-default);
 
   border-color: var(--color-semantic-border-button-fill-default);
   background-color: var(--color-semantic-surface-button-fill-default);
@@ -84,44 +80,38 @@
 }
 
 .type__default.isSelected {
-  --icon-color: var(--color-semantic-text-button-selected);
 
   border-color: var(--color-semantic-border-button-selected);
   background-color: var(--color-semantic-surface-button-selected);
   color: var(--color-semantic-text-button-selected);
 }
 
 .type__default.isSelected:hover:not(:disabled) {
-  --icon-color: var(--color-semantic-text-button-selected);
 
   border-color: var(--color-semantic-border-button-selected-hover);
   background-color: var(--color-semantic-surface-button-selected-hover);
   color: var(--color-semantic-text-button-selected);
 }
 
 .type__destructive.appearance__outline {
-  --icon-color: var(--color-semantic-text-button-outline-destructive-default);
 
   border-color: var(--color-semantic-border-button-outline-destructive-default);
   color: var(--color-semantic-text-button-outline-destructive-default);
 }
 
 .type__destructive.appearance__outline:hover:not(:disabled) {
-  --icon-color: var(--color-semantic-text-button-outline-destructive-hover);
 
   border-color: var(--color-semantic-border-button-outline-destructive-hover);
   color: var(--color-semantic-text-button-outline-destructive-hover);
 }
 
 .type__destructive.appearance__outline:focus-visible:not(:disabled) {
-  --icon-color: var(--color-semantic-text-button-outline-destructive-focus);
 
   border-color: var(--color-semantic-border-button-outline-destructive-focus);
   color: var(--color-semantic-text-button-outline-destructive-focus);
 }
 
 .type__destructive.appearance__fill {
-  --icon-color: var(--color-semantic-text-button-fill-destructive-default);
 
   border-color: var(--color-semantic-border-button-fill-destructive-default);
   background-color: var(
@@ -141,7 +131,6 @@
 }
 
 .type__destructive.appearance__text {
-  --icon-color: var(--color-semantic-text-button-text-destructive-default);
 
   border-color: transparent;
   background-color: transparent;
@@ -160,7 +149,6 @@
 
 /* disabledとisLoadingにおいては、上記の詳細度と同等とするために:isを不可している */
 :is(.type__default, .type__destructive):disabled {
-  --icon-color: var(--color-semantic-text-button-disabled);
 
   border-color: var(--color-semantic-border-button-disabled);
   background-color: var(--color-semantic-surface-button-disabled);

diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -8,7 +8,7 @@
 
 .icon {
   display: inline-block;
-  fill: var(--icon-color, var(--color-primitive-neutral-100));
+  fill: currentcolor;
 }
 
 .size__small {
@@ -19,4 +19,4 @@
 .size__medium {
   width: 24px;
   height: 24px;
-}
+}
diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css
@@ -1,5 +1,4 @@
 :host {
-  --icon-color: var(--color-semantic-text-button-outline-default);
   --padding-inline: 16px;
 
   display: inline-block;
@@ -35,16 +34,12 @@
     background-color: var(--color-semantic-surface-regular-2);
     color: var(--color-semantic-text-disabled);
     cursor: not-allowed;
-    --icon-color: var(--color-semantic-text-disabled);
   }
 
   &.-selected{
     border: 1px solid var(--color-semantic-border-selected);
     background-color: var(--color-semantic-surface-selected);
     color: var(--color-semantic-text-inverse);
-
-    --icon-color: var(--color-semantic-text-button-selected);
-
     font-weight: bold;
 
     &:hover{
@@ -55,9 +50,6 @@
     &:disabled{
       border: 1px solid var(--color-semantic-border-regular);
       background-color: var(--color-semantic-surface-regular-2);
-
-      --icon-color: var(--color-semantic-text-disabled);
-
       color: var(--color-semantic-text-disabled);
       cursor: not-allowed;
       font-weight: normal;
@@ -87,22 +79,14 @@
         background-color: var(--color-semantic-surface-regular-2);
         color: var(--color-semantic-text-disabled);
         cursor: not-allowed;
-        --icon-color: var(--color-semantic-text-disabled);
-      }
-      &:disabled{
-        border: 1px solid var(--color-semantic-border-regular);
-        background-color: var(--color-semantic-surface-regular-2);
-        color: var(--color-semantic-text-disabled);
-        cursor: not-allowed;
-        --icon-color: var(--color-semantic-text-disabled);
       }
     }
+
     &:disabled{
       border: 1px solid var(--color-semantic-border-regular);
       background-color: var(--color-semantic-surface-regular-2);
       color: var(--color-semantic-text-disabled);
       cursor: not-allowed;
-      --icon-color: var(--color-semantic-text-disabled);
     }
   }
 
@@ -113,28 +97,30 @@
     &:hover{
       background-color: var(--color-semantic-surface-regular-3);
     }
+
     &.-selected {
       border: 1px solid var(--color-semantic-border-selected);
       background-color: var(--color-semantic-surface-selected);
       color: var(--color-semantic-text-inverse);
+
       &:hover {
         border: 1px solid var(--color-semantic-surface-selected-hover);
         background-color: var(--color-semantic-surface-selected-hover);
       }
+
       &:disabled{
         border: 1px solid var(--color-semantic-border-regular);
         background-color: var(--color-semantic-surface-regular-2);
         color: var(--color-semantic-text-disabled);
         cursor: not-allowed;
-        --icon-color: var(--color-semantic-text-disabled);
       }
     }
+
     &:disabled{
       border: 1px solid var(--color-semantic-border-regular);
       background-color: var(--color-semantic-surface-regular-2);
       color: var(--color-semantic-text-disabled);
       cursor: not-allowed;
-      --icon-color: var(--color-semantic-text-disabled);
     }
   }