@acorex/styles 19.10.0-next.1 → 19.10.0-next.11

package/src/shared/_color-look.scss

@@ -1,822 +0,0 @@
-@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();
-}