@acorex/styles 19.8.0-next.8 → 19.9.0

package/src/shared/_color-look.scss

@@ -0,0 +1,822 @@
+@use '../variables/colors';
+@use '../mixins/util';
+
+@each $color in colors.$color_names {
+  @each $look in colors.$look_names {
+    @if ($look == 'solid') {
+      .ax-el-#{$color}-#{$look} {
+        // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
+        background-color: rgba(var(--ax-color-#{$color}-500));
+        color: rgba(var(--ax-color-#{$color}-fore));
+        border-color: rgba(var(--ax-color-#{$color}-500));
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              // @apply ax-bg-#{$color}-600;
+              background-color: rgba(var(--ax-color-#{$color}-600));
+            }
+          }
+        }
+
+        &.ax-state-selected {
+          // @apply ax-bg-#{$color}-700;
+          background-color: rgba(var(--ax-color-#{$color}-700));
+        }
+        .ax-ripple {
+          // @apply ax-bg-#{$color}-300/30 #{!important};
+          background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            // @apply ax-border-#{$color}-fore ax-border-b-transparent;
+            border-color: rgba(var(--ax-color-#{$color}-fore));
+            border-bottom-color: transparent;
+          }
+        }
+        &:is(&:focus-visible, &.ax-state-focus) {
+          // @apply ax-outline-#{$color}-500;
+          outline-color: rgba(var(--ax-color-#{$color}-500));
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            // @apply ax-outline-#{$color}-500;
+            outline-color: rgba(var(--ax-color-#{$color}-500));
+          }
+        }
+        &.ax-dropdown-button-marker {
+          border-inline-start-color: rgba(var(--ax-color-#{$color}-600));
+        }
+      }
+    }
+
+    @if ($look == 'outline') {
+      .ax-el-#{$color}-#{$look} {
+        // @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
+        background-color: transparent;
+        color: rgba(var(--ax-color-#{$color}-500));
+        border-color: rgba(var(--ax-color-#{$color}-500));
+        border-width: 1px;
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              // @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
+              color: rgba(var(--ax-color-#{$color}-700));
+              border-color: rgba(var(--ax-color-#{$color}-700));
+            }
+          }
+        }
+        &.ax-state-selected {
+          // @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
+          border-color: rgba(var(--ax-color-#{$color}-500));
+          color: rgba(var(--ax-color-#{$color}-fore));
+          background-color: rgba(var(--ax-color-#{$color}-500));
+        }
+        .ax-ripple {
+          // @apply ax-bg-#{$color}-500/30 #{!important};
+          background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            // @apply ax-border-#{$color}-500 ax-border-b-transparent;
+            border-color: rgba(var(--ax-color-#{$color}-500));
+            border-bottom-color: transparent;
+          }
+        }
+        &:is(&:focus-visible, &.ax-state-focus) {
+          // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
+          outline-offset: -2px;
+          outline-color: rgba(var(--ax-color-#{$color}-500));
+          color: rgba(var(--ax-color-#{$color}-fore-tint));
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
+            outline-offset: -2px;
+            outline-color: rgba(var(--ax-color-#{$color}-500));
+            color: rgba(var(--ax-color-#{$color}-fore-tint));
+          }
+        }
+        &.ax-dropdown-button-marker {
+          border-inline-start-color: rgba(var(--ax-color-#{$color}-500));
+        }
+      }
+    }
+
+    @if ($look == 'blank') {
+      .ax-el-#{$color}-#{$look} {
+        // @apply ax-text-#{$color}-500;
+        color: rgba(var(--ax-color-#{$color}-500));
+
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              // @apply ax-text-#{$color}-fore-tint;
+              background-color: rgba(var(--ax-color-#{$color}-100));
+              color: rgba(var(--ax-color-#{$color}-fore-tint));
+            }
+          }
+        }
+
+        &.ax-state-selected {
+          // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
+          background-color: rgba(var(--ax-color-#{$color}-700));
+          color: rgba(var(--ax-color-#{$color}-fore));
+        }
+        .ax-ripple {
+          // @apply ax-bg-#{$color}-500/30 #{!important};
+          background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            // @apply ax-border-#{$color}-500 ax-border-b-transparent;
+            border-color: rgba(var(--ax-color-#{$color}-500));
+            border-bottom-color: transparent;
+          }
+        }
+        &:is(&:focus-visible, &.ax-state-focus) {
+          // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+          outline-color: rgba(var(--ax-color-#{$color}-300));
+          outline-offset: 0;
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+            outline-color: rgba(var(--ax-color-#{$color}-300));
+            outline-offset: 0;
+          }
+        }
+        &.ax-dropdown-button-marker {
+          border-inline-start-color: transparent;
+        }
+      }
+    }
+
+    @if ($look == 'twotone') {
+      .ax-el-#{$color}-#{$look} {
+        // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
+        background-color: rgba(var(--ax-color-#{$color}-100));
+        color: rgba(var(--ax-color-#{$color}-fore-tint));
+        border-color: rgba(var(--ax-color-#{$color}-100));
+
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              // @apply ax-bg-#{$color}-200;
+              background-color: rgba(var(--ax-color-#{$color}-200));
+            }
+          }
+        }
+
+        &.ax-state-selected {
+          // @apply ax-bg-#{$color}-300;
+          background-color: rgba(var(--ax-color-#{$color}-300));
+        }
+
+        .ax-ripple {
+          // @apply ax-bg-#{$color}-500/30 #{!important};
+          background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+            border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+            border-bottom-color: transparent;
+          }
+        }
+
+        &:is(&:focus-visible, &.ax-state-focus) {
+          // @apply ax-outline-#{$color}-500;
+          outline-color: rgba(var(--ax-color-#{$color}-500));
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            // @apply ax-outline-#{$color}-500;
+            outline-color: rgba(var(--ax-color-#{$color}-500));
+          }
+        }
+        &.ax-dropdown-button-marker {
+          border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
+        }
+      }
+    }
+
+    @if ($look == 'link') {
+      .ax-el-#{$color}-#{$look} {
+        // @apply ax-text-#{$color}-500;
+        color: rgba(var(--ax-color-#{$color}-500));
+
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              // @apply ax-text-#{$color}-fore-tint;
+              color: rgba(var(--ax-color-#{$color}-700));
+            }
+          }
+        }
+
+        &.ax-state-selected {
+          // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
+          background-color: rgba(var(--ax-color-#{$color}-700));
+          color: rgba(var(--ax-color-#{$color}-fore));
+        }
+        .ax-ripple {
+          // @apply ax-bg-#{$color}-500/30 #{!important};
+          background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            // @apply ax-border-#{$color}-500 ax-border-b-transparent;
+            border-color: rgba(var(--ax-color-#{$color}-500));
+            border-bottom-color: transparent;
+          }
+        }
+        &:is(&:focus-visible, &.ax-state-focus) {
+          // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+          outline-color: rgba(var(--ax-color-#{$color}-300));
+          outline-offset: 0;
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+            outline-color: rgba(var(--ax-color-#{$color}-300));
+            outline-offset: 0;
+          }
+        }
+        &.ax-dropdown-button-marker {
+          border-inline-start-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+.ax-el-ghost-solid {
+  // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-input-border));
+  background-color: rgba(var(--ax-color-ghost));
+  color: rgba(var(--ax-color-ghost-fore));
+  &.ax-el-interactive {
+    &:hover {
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        // @apply ax-border-primary-500 ax-text-primary-500;
+        background-color: rgba(var(--ax-color-ghost), 0.9);
+      }
+    }
+    &:active {
+      // @apply ax-border-primary-700 ax-text-primary-700;
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        background-color: rgba(var(--ax-color-ghost), 0.8);
+      }
+    }
+  }
+
+  &.ax-state-selected {
+    background-color: rgba(var(--ax-color-ghost-fore), 0.125);
+    color: rgba(var(--ax-color-ghost-fore));
+    border-style: none;
+  }
+
+  .ax-ripple {
+    // @apply ax-bg-primary-500/30 #{!important};
+    background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
+  }
+  ax-loading-spinner {
+    .ax-loader {
+      // @apply ax-border-ghost-fore ax-border-b-transparent;
+      border-color: rgba(var(--ax-color-ghost-fore));
+      border-bottom-color: transparent;
+    }
+  }
+  &.ax-dropdown-button-marker {
+    border-inline-start-color: rgba(var(--ax-color-input-border));
+  }
+}
+.ax-el-ghost-outline {
+  // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-input-border));
+  background-color: transparent;
+  color: rgba(var(--ax-color-ghost-fore));
+
+  &.ax-el-interactive {
+    &:hover {
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        // @apply ax-border-primary-500 ax-text-primary-500;
+        border-color: rgba(var(--ax-color-ghost-fore), 0.4);
+      }
+      & + .ax-dropdown-button-marker {
+        border-inline-start-color: rgba(var(--ax-color-ghost-fore), 0.4);
+      }
+    }
+  }
+
+  &.ax-state-selected {
+    background-color: rgba(var(--ax-color-ghost-fore), 0.125);
+    color: rgba(var(--ax-color-ghost-fore));
+    border-style: none;
+  }
+  .ax-ripple {
+    // @apply ax-bg-primary-500/30 #{!important};
+    background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
+  }
+  ax-loading-spinner {
+    .ax-loader {
+      // @apply ax-border-ghost-fore ax-border-b-transparent;
+      border-color: rgba(var(--ax-color-ghost-fore));
+      border-bottom-color: transparent;
+    }
+  }
+  &.ax-dropdown-button-marker {
+    border-inline-start-color: rgba(var(--ax-color-input-border));
+  }
+}
+.ax-el-ghost-blank {
+  // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
+  border-style: none;
+  background-color: transparent;
+  color: rgba(var(--ax-color-ghost-fore));
+
+  &.ax-state-selected {
+    background-color: rgba(var(--ax-color-ghost-fore), 0.125);
+    color: rgba(var(--ax-color-ghost-fore));
+    border-style: none;
+  }
+  &.ax-el-interactive {
+    &:hover {
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        // @apply ax-border-primary-700 ax-text-primary-700;
+        background-color: rgba(var(--ax-color-ghost-fore), 0.05);
+        border-color: rgba(var(--ax-color-ghost-fore), 0.05);
+      }
+    }
+    &:active {
+      // @apply ax-border-primary-800 ax-text-primary-800;
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        background-color: rgba(var(--ax-color-ghost-fore), 0.1);
+        border-color: rgba(var(--ax-color-ghost-fore), 0.1);
+        color: rgba(var(--ax-color-ghost-fore));
+      }
+    }
+  }
+
+  .ax-ripple {
+    // @apply ax-bg-primary-500/30 #{!important};
+    background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
+  }
+  ax-loading-spinner {
+    .ax-loader {
+      // @apply ax-border-ghost-fore ax-border-b-transparent;
+      border-color: rgba(var(--ax-color-ghost-fore));
+      border-bottom-color: transparent;
+    }
+  }
+  & > button {
+    &:is(&:focus-visible, &.ax-state-focus) {
+      // @apply ax-outline-primary-500;
+      border-color: rgba(var(--ax-color-ghost-fore), 0.2);
+    }
+  }
+  &.ax-dropdown-button-marker {
+    border-inline-start-color: rgba(var(--ax-color-input-border));
+  }
+}
+.ax-el-ghost-twotone {
+  // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
+  border-color: transparent;
+  background-color: rgba(var(--ax-color-ghost-fore), 0.1);
+  color: rgba(var(--ax-color-ghost-fore));
+
+  &.ax-el-interactive {
+    &:hover {
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
+        background-color: rgba(var(--ax-color-ghost-fore), 0.15);
+      }
+      & + .ax-dropdown-button-marker {
+        background-color: rgba(var(--ax-color-ghost-fore), 0.15);
+      }
+    }
+    &:active {
+      // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
+      &:not(&.ax-state-selected, &.ax-state-disabled) {
+        background-color: rgba(var(--ax-color-ghost-fore), 0.25);
+      }
+    }
+  }
+  &.ax-state-selected {
+    background-color: rgba(var(--ax-color-ghost-fore), 0.25);
+    color: rgba(var(--ax-color-ghost-fore));
+    border-style: none;
+  }
+  .ax-ripple {
+    // @apply ax-bg-primary-500/30 #{!important};
+    background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
+  }
+  ax-loading-spinner {
+    .ax-loader {
+      // @apply ax-border-ghost-fore ax-border-b-transparent;
+      border-color: rgba(var(--ax-color-ghost-fore));
+      border-bottom-color: transparent;
+    }
+  }
+  & > button {
+    &:is(&:focus-visible, &.ax-state-focus) {
+      // @apply ax-outline-primary-500;
+      outline-color: rgba(var(--ax-color-primary-500));
+    }
+  }
+  &.ax-dropdown-button-marker {
+    border-inline-start-color: rgba(var(--ax-color-input-border));
+  }
+}
+.ax-el-ghost-link {
+  // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
+  border-style: none;
+  background-color: transparent;
+  color: rgba(var(--ax-color-ghost-fore), 0.8);
+
+  &.ax-state-selected {
+    // @apply ax-bg-primary-500 ax-text-primary-fore;
+    text-decoration: underline;
+  }
+
+  .ax-ripple {
+    // @apply ax-bg-primary-500/30 #{!important};
+    background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
+  }
+  ax-loading-spinner {
+    .ax-loader {
+      // @apply ax-border-ghost-fore ax-border-b-transparent;
+      border-color: rgba(var(--ax-color-ghost-fore));
+      border-bottom-color: transparent;
+    }
+  }
+  & > button {
+    &:is(&:focus-visible, &.ax-state-focus) {
+      // @apply ax-outline-primary-500;
+      outline-color: rgba(var(--ax-color-primary-500));
+    }
+  }
+  &.ax-dropdown-button-marker {
+    border-inline-start-color: rgba(var(--ax-color-input-border));
+  }
+}
+
+@mixin color-look-dark-mode {
+  @each $color in colors.$color_names {
+    @each $look in colors.$look_names {
+      @if ($look == 'solid') {
+        .ax-el-#{$color}-#{$look} {
+          // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
+          background-color: rgba(var(--ax-color-#{$color}-200));
+          color: rgba(var(--ax-color-#{$color}-fore-tint));
+          border-color: rgba(var(--ax-color-#{$color}-200));
+          &.ax-el-interactive {
+            .ax-action-item-suffix ax-text {
+              color: rgba(var(--ax-color-#{$color}-800));
+            }
+
+            &:hover {
+              &:not(.ax-state-disabled) {
+                // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
+                background-color: rgba(var(--ax-color-#{$color}-300));
+                color: rgba(var(--ax-color-#{$color}-fore-tint));
+              }
+            }
+          }
+
+          &.ax-state-selected {
+            // @apply ax-bg-#{$color}-400;
+            background-color: rgba(var(--ax-color-#{$color}-400));
+          }
+          .ax-ripple {
+            // @apply ax-bg-#{$color}-200/30 #{!important};
+            background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+              border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+              border-bottom-color: transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              outline-color: rgba(var(--ax-color-primary-200));
+            }
+          }
+          &.ax-dropdown-button-marker {
+            border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
+          }
+        }
+      }
+      @if ($look == 'outline') {
+        .ax-el-#{$color}-#{$look} {
+          // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
+
+          border-color: rgba(var(--ax-color-#{$color}-200));
+          color: rgba(var(--ax-color-#{$color}-200));
+
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
+                border-color: rgba(var(--ax-color-#{$color}-300));
+                color: rgba(var(--ax-color-#{$color}-300));
+                background-color: transparent;
+              }
+            }
+          }
+
+          &.ax-state-selected {
+            // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
+            border-color: rgba(var(--ax-color-#{$color}-300));
+            color: rgba(var(--ax-color-#{$color}-300));
+          }
+          .ax-ripple {
+            // @apply ax-bg-#{$color}-500/30 #{!important};
+            border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+              border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+              border-bottom-color: transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
+              border-color: rgba(var(--ax-color-#{$color}-300));
+              color: rgba(var(--ax-color-#{$color}-300));
+            }
+          }
+        }
+      }
+      @if ($look == 'blank') {
+        .ax-el-#{$color}-#{$look} {
+          // @apply ax-text-#{$color}-300 ax-bg-transparent;
+
+          color: rgba(var(--ax-color-#{$color}-300));
+          background-color: transparent;
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                // @apply ax-text-#{$color}-500;
+                background-color: rgba(var(--ax-color-#{$color}-200));
+                color: rgba(var(--ax-color-#{$color}-fore-tint));
+                .ax-action-item-suffix ax-text {
+                  color: rgba(var(--ax-color-#{$color}-800));
+                }
+              }
+            }
+          }
+
+          &.ax-state-selected {
+            // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
+            background-color: rgba(var(--ax-color-#{$color}-500));
+            color: rgba(var(--ax-color-#{$color}-fore));
+          }
+          .ax-ripple {
+            // @apply ax-bg-#{$color}-500/30 #{!important};
+            background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+              border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+              border-bottom-color: transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+            }
+          }
+        }
+      }
+      @if ($look == 'twotone') {
+        .ax-el-#{$color}-#{$look} {
+          .ax-action-item-suffix ax-text {
+            color: rgba(var(--ax-color-#{$color}-800));
+          }
+          // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
+
+          background-color: rgba(var(--ax-color-#{$color}-200));
+          color: rgba(var(--ax-color-#{$color}-fore-tint));
+          border-color: rgba(var(--ax-color-#{$color}-200));
+
+          &.ax-state-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                background-color: rgba(var(--ax-color-#{$color}-300));
+                // @apply ax-bg-#{$color}-300;
+              }
+            }
+          }
+
+          &.ax-state-selected {
+            // @apply ax-bg-#{$color}-400;
+            background-color: rgba(var(--ax-color-#{$color}-400));
+          }
+          .ax-ripple {
+            // @apply ax-bg-#{$color}-500/30 #{!important};
+            background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+              border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+              border-bottom-color: transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              // @apply ax-outline-#{$color}-500;
+            }
+          }
+          &.ax-dropdown-button-marker {
+            border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
+          }
+        }
+      }
+      @if ($look == 'link') {
+        .ax-el-#{$color}-#{$look} {
+          // @apply ax-text-#{$color}-300 ax-bg-transparent;
+
+          color: rgba(var(--ax-color-#{$color}-300));
+          background-color: transparent;
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                // @apply ax-text-#{$color}-500;
+                color: rgba(var(--ax-color-#{$color}-400));
+              }
+            }
+          }
+
+          &.ax-state-selected {
+            // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
+            background-color: rgba(var(--ax-color-#{$color}-500));
+            color: rgba(var(--ax-color-#{$color}-fore));
+          }
+          .ax-ripple {
+            // @apply ax-bg-#{$color}-500/30 #{!important};
+            background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+              border-color: rgba(var(--ax-color-#{$color}-fore-tint));
+              border-bottom-color: transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .ax-el-ghost-solid {
+    border-color: rgba(var(--ax-color-ghost), 0.5);
+    background-color: rgba(var(--ax-color-ghost), 0.5);
+
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-ghost), 0.75);
+          border-color: rgba(var(--ax-color-ghost), 0.75);
+          color: rgba(var(--ax-color-ghost-fore));
+        }
+        & + .ax-dropdown-button-marker {
+          border-color: rgba(var(--ax-color-ghost), 0.75);
+          background-color: rgba(var(--ax-color-ghost), 0.75);
+          color: rgba(var(--ax-color-ghost-fore));
+        }
+      }
+      &:active {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          border-color: rgba(var(--ax-color-ghost));
+          background-color: rgba(var(--ax-color-ghost));
+          color: rgba(var(--ax-color-ghost-fore));
+        }
+      }
+    }
+
+    &.ax-state-selected {
+      border-color: rgba(var(--ax-color-ghost));
+      background-color: rgba(var(--ax-color-ghost));
+      color: rgba(var(--ax-color-ghost-fore));
+    }
+
+    .ax-ripple {
+      background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
+    }
+  }
+  .ax-el-ghost-outline {
+    border-color: rgba(var(--ax-color-ghost-fore), 0.5);
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          border-color: rgba(var(--ax-color-ghost-fore), 0.75);
+        }
+        & + .ax-dropdown-button-marker {
+          border-color: rgba(var(--ax-color-ghost-fore), 0.75);
+        }
+      }
+    }
+
+    &.ax-state-selected {
+      border-color: rgba(var(--ax-color-ghost-fore));
+      background-color: rgba(var(--ax-color-ghost));
+      color: rgba(var(--ax-color-ghost-fore));
+    }
+    .ax-ripple {
+      background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
+    }
+    ax-loading-spinner {
+      .ax-loader {
+        border-color: rgba(var(--ax-color-ghost-fore));
+        border-bottom-color: transparent;
+      }
+    }
+  }
+  .ax-el-ghost-blank {
+    &.ax-state-selected {
+      background-color: rgba(var(--ax-color-ghost));
+      color: rgba(var(--ax-color-ghost-fore));
+    }
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-ghost), 0.5);
+        }
+      }
+      &:active {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-ghost));
+        }
+      }
+    }
+
+    .ax-ripple {
+      background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
+    }
+
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        outline-color: rgba(var(--ax-color-ghost-fore));
+      }
+    }
+  }
+  .ax-el-ghost-twotone {
+    background-color: rgba(var(--ax-color-ghost), 0.3);
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-ghost), 0.5);
+        }
+        & + .ax-dropdown-button-marker {
+          background-color: rgba(var(--ax-color-ghost), 0.5);
+        }
+      }
+      &:active {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-ghost), 0.8);
+        }
+      }
+    }
+    &.ax-state-selected {
+      background-color: rgba(var(--ax-color-ghost), 0.8);
+      color: rgba(var(--ax-color-ghost-fore));
+    }
+    .ax-ripple {
+      background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
+    }
+
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        outline-color: rgba(var(--ax-color-ghost-fore));
+      }
+    }
+  }
+  .ax-el-ghost-link {
+    .ax-ripple {
+      background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
+    }
+
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        outline-color: rgba(var(--ax-color-ghost-fore));
+      }
+    }
+  }
+}
+
+@include util.darkMode() {
+  @include color-look-dark-mode();
+}