currentcolor revert

uzabase · Nov 8, 2024 · f109341 · f109341
1 parent a287d95
commit f109341
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 7 deletions.
diff --git a/dist/components/button/button.css b/dist/components/button/button.css
@@ -0,0 +1,241 @@
+:host {
+  --icon-color: var(--color-semantic-text-button-outline-default);
+  --padding-inline: 16px;
+
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 4px;
+  color: var(--color-semantic-text-button-outline-default);
+  border-radius: 5px;
+  border: 1px solid transparent;
+  background-color: transparent;
+  min-height: 28px;
+  max-width: calc(100% - var(--padding-inline)*2);
+  padding-inline: var(--padding-inline);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.base__text {
+  min-width: 0;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+  overflow-wrap : break-word;
+}
+
+.type__default.appearance__outline {
+  border-color: var(--color-semantic-border-button-outline-default);
+}
+
+.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);
+  color: var(--color-semantic-text-button-fill-default);
+}
+
+.type__default.appearance__fill:hover:not(:disabled) {
+  border-color: var(--color-semantic-border-button-fill-hover);
+  background-color: var(--color-semantic-surface-button-fill-hover);
+}
+
+.type__default.appearance__fill:focus-visible:not(:is(:disabled, .isSelected)) {
+  border-color: var(--color-semantic-border-button-fill-focus);
+  background-color: var(--color-semantic-surface-button-fill-focus);
+}
+
+.type__default.appearance__text {
+  border-color: var(--color-semantic-border-button-text-default);
+  background-color: var(--color-semantic-surface-button-text-default);
+}
+
+.type__default.appearance__text:hover:not(:disabled) {
+  border-color: var(--color-semantic-border-button-text-hover);
+  background-color: var(--color-semantic-surface-button-text-hover);
+}
+
+.type__default.appearance__text:focus-visible:not(:is(:disabled, .isSelected)) {
+  border-color: var(--color-semantic-border-button-text-focus);
+  background-color: var(--color-semantic-surface-button-text-focus);
+}
+
+.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(
+    --color-semantic-surface-button-fill-destructive-default
+  );
+  color: var(--color-semantic-text-button-fill-destructive-default);
+}
+
+.type__destructive.appearance__fill:hover:not(:disabled) {
+  border-color: var(--color-semantic-border-button-fill-destructive-hover);
+  background-color: var(--color-semantic-surface-button-fill-destructive-hover);
+}
+
+.type__destructive.appearance__fill:focus-visible:not(:disabled) {
+  border-color: var(--color-semantic-border-button-fill-destructive-focus);
+  background-color: var(--color-semantic-surface-button-fill-destructive-focus);
+}
+
+.type__destructive.appearance__text {
+  --icon-color: var(--color-semantic-text-button-text-destructive-default);
+
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-semantic-text-button-text-destructive-default);
+}
+
+.type__destructive.appearance__text:hover:not(:disabled) {
+  border-color: var(--color-semantic-border-button-text-destructive-hover);
+  background-color: var(--color-semantic-surface-button-text-destructive-hover);
+}
+
+.type__destructive.appearance__text:focus-visible:not(:disabled) {
+  border-color: var(--color-semantic-border-button-text-destructive-focus);
+  background-color: var(--color-semantic-surface-button-text-destructive-focus);
+}
+
+/* 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);
+  color: var(--color-semantic-text-button-disabled);
+  cursor: not-allowed;
+}
+
+:is(.type__default, .type__destructive).isLoading {
+  border-color: var(--color-semantic-border-button-loading);
+  background-color: var(--color-semantic-surface-button-loading);
+}
+
+:is(.type__default, .type__destructive).isLoading::before {
+  content: "";
+  display: block;
+  background: transparent url("data:image/png;base64,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") no-repeat 50% 50%;
+  background-size: 16px 16px;
+  animation: 1s linear infinite loading;
+  transform-origin: center center;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 5px;
+}
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+:is(.type__default, .type__destructive).isLoading:hover {
+  cursor: not-allowed;
+  border-color: var(--color-semantic-border-button-loading);
+}
+
+:is(.type__default, .type__destructive).isLoading .base__text {
+  visibility: hidden;
+}
+
+:is(.type__default, .type__destructive).isLoading .base__icon {
+  visibility: hidden;
+}
+
+.type__default.size__large {
+  --padding-inline: 24px;
+
+  column-gap: 8px;
+  min-height: 32px;
+  font-size: 12px;
+}
+
+.type__default.size__xLarge {
+  --padding-inline: 40px;
+
+  column-gap: 8px;
+  min-height: 40px;
+  font-size: 12px;
+}
+
+.size__width80 {
+  --padding-inline: 4px;
+
+  width: 80px;
+}
+
+.size__width160 {
+  --padding-inline: 4px;
+
+  width: 160px;
+}
diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -8,7 +8,7 @@
 
 .icon {
   display: inline-block;
-  fill: currentcolor;
+  fill: var(--icon-color, var(--color-primitive-neutral-100));
 }
 
 .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,4 +1,5 @@
 :host {
+  --icon-color: var(--color-semantic-text-button-outline-default);
   --padding-inline: 16px;
 
   display: inline-block;
@@ -34,12 +35,16 @@
     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{
@@ -50,6 +55,9 @@
     &: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;
@@ -79,14 +87,22 @@
         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);
     }
   }
 
@@ -97,30 +113,28 @@
     &: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);
     }
   }