@adobe/spectrum-css/dist/components/button/colorStops/dark.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Button.focus-ring {
    box-shadow: 0 0 0 1px rgb(20, 115, 230);
  }
.spectrum-Button:active {
    box-shadow: none;
  }
.spectrum-ClearButton {
  background-color: transparent;

  color: rgb(185, 185, 185);
}
.spectrum-ClearButton:hover {
    background-color: transparent;

    color: rgb(255, 255, 255);
  }
.spectrum-ClearButton:active {
    background-color: transparent;

    color: rgb(255, 255, 255);
  }
.spectrum-ClearButton.focus-ring {
    background-color: transparent;

    color: rgb(255, 255, 255);
  }
.spectrum-ClearButton:disabled,
  .spectrum-ClearButton.is-disabled {
    background-color: transparent;

    color: rgb(90, 90, 90);
  }
.spectrum-Button--cta {
  background-color: rgb(20, 115, 230);
  border-color: rgb(20, 115, 230);
  color: rgb(255, 255, 255);
}
.spectrum-Button--cta:hover {
    background-color: rgb(13, 102, 208);
    border-color: rgb(13, 102, 208);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--cta.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--cta:active {
    background-color: rgb(13, 102, 208);
    border-color: rgb(13, 102, 208);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--cta:disabled,
  .spectrum-Button--cta.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-Button--primary {
  background-color: transparent;
  border-color: rgb(227, 227, 227);
  color: rgb(227, 227, 227);
}
.spectrum-Button--primary:hover {
    background-color: rgb(227, 227, 227);
    border-color: rgb(227, 227, 227);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--primary.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--primary:active {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--primary:disabled,
  .spectrum-Button--primary.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-Button--secondary {
  background-color: transparent;
  border-color: rgb(185, 185, 185);
  color: rgb(185, 185, 185);
}
.spectrum-Button--secondary:hover {
    background-color: rgb(185, 185, 185);
    border-color: rgb(185, 185, 185);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--secondary.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--secondary:active {
    background-color: rgb(227, 227, 227);
    border-color: rgb(227, 227, 227);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--secondary:disabled,
  .spectrum-Button--secondary.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-Button--warning {
  background-color: transparent;
  border-color: rgb(247, 109, 116);
  color: rgb(247, 109, 116);
}
.spectrum-Button--warning:hover {
    background-color: rgb(247, 109, 116);
    border-color: rgb(247, 109, 116);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--warning.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--warning:active {
    background-color: rgb(255, 123, 130);
    border-color: rgb(255, 123, 130);
    color: rgb(37, 37, 37);
  }
.spectrum-Button--warning:disabled,
  .spectrum-Button--warning.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-Button--overBackground {
  background-color: transparent;
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
.spectrum-Button--overBackground:hover {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: inherit;
  }
.spectrum-Button--overBackground.focus-ring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: inherit;
    box-shadow: 0 0 0 1px rgb(255, 255, 255);
  }
.spectrum-Button--overBackground:active {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: inherit;
    box-shadow: none;
  }
.spectrum-Button--overBackground:disabled,
  .spectrum-Button--overBackground.is-disabled {
    background-color: rgba(255,255,255,0.1);
    border-color: transparent;
    color: rgba(255,255,255,0.35);
  }
.spectrum-Button--overBackground.spectrum-Button--quiet,
.spectrum-ClearButton--overBackground {
  background-color: transparent;
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.spectrum-Button--overBackground.spectrum-Button--quiet:hover, .spectrum-ClearButton--overBackground:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: transparent;
    color: rgb(255, 255, 255);
  }
.spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, .spectrum-ClearButton--overBackground.focus-ring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: inherit;
    box-shadow: 0 0 0 1px rgb(255, 255, 255);
  }
.spectrum-Button--overBackground.spectrum-Button--quiet:active, .spectrum-ClearButton--overBackground:active {
    background-color: rgba(255,255,255,0.15);
    border-color: transparent;
    color: rgb(255, 255, 255);
    box-shadow: none;
  }
.spectrum-Button--overBackground.spectrum-Button--quiet:disabled,
  .spectrum-Button--overBackground.spectrum-Button--quiet.is-disabled,
  .spectrum-ClearButton--overBackground:disabled,
  .spectrum-ClearButton--overBackground.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.15);
  }
.spectrum-Button--primary.spectrum-Button--quiet {
  background-color: transparent;
  border-color: transparent;
  color: rgb(227, 227, 227);
}
.spectrum-Button--primary.spectrum-Button--quiet:hover {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--primary.spectrum-Button--quiet.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--primary.spectrum-Button--quiet:active {
    background-color: rgb(74, 74, 74);
    border-color: rgb(74, 74, 74);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--primary.spectrum-Button--quiet:disabled,
  .spectrum-Button--primary.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(110, 110, 110);
  }
.spectrum-Button--secondary.spectrum-Button--quiet {
  background-color: transparent;
  border-color: transparent;
  color: rgb(185, 185, 185);
}
.spectrum-Button--secondary.spectrum-Button--quiet:hover {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(227, 227, 227);
  }
.spectrum-Button--secondary.spectrum-Button--quiet.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--secondary.spectrum-Button--quiet:active {
    background-color: rgb(74, 74, 74);
    border-color: rgb(74, 74, 74);
    color: rgb(227, 227, 227);
  }
.spectrum-Button--secondary.spectrum-Button--quiet:disabled,
  .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(110, 110, 110);
  }
.spectrum-ActionButton,
.spectrum-Tool {
  background-color: rgb(47, 47, 47);
  border-color: rgb(74, 74, 74);
  color: rgb(227, 227, 227);
}
.spectrum-ActionButton .spectrum-Icon,
.spectrum-Tool .spectrum-Icon {
    color: rgb(185, 185, 185);
  }
.spectrum-ActionButton .spectrum-ActionButton-hold,
.spectrum-Tool .spectrum-ActionButton-hold {
    color: rgb(185, 185, 185);
  }
.spectrum-ActionButton:hover,
.spectrum-Tool:hover {
    background-color: rgb(37, 37, 37);
    border-color: rgb(90, 90, 90);
    box-shadow: none;
    color: rgb(255, 255, 255);
  }
.spectrum-ActionButton:hover .spectrum-Icon,
.spectrum-Tool:hover .spectrum-Icon {
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton:hover .spectrum-ActionButton-hold,
.spectrum-Tool:hover .spectrum-ActionButton-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton.focus-ring,
.spectrum-Tool.focus-ring {
    background-color: rgb(37, 37, 37);
    border-color: rgb(38, 128, 235);
    box-shadow: 0 0 0 1px rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.spectrum-ActionButton.focus-ring .spectrum-Icon,
.spectrum-Tool.focus-ring .spectrum-Icon {
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold,
.spectrum-Tool.focus-ring .spectrum-ActionButton-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton:active,
.spectrum-Tool:active {
    background-color: rgb(62, 62, 62);
    border-color: rgb(90, 90, 90);
    box-shadow: none;
    color: rgb(255, 255, 255);
  }
.spectrum-ActionButton:active .spectrum-ActionButton-hold,
.spectrum-Tool:active .spectrum-ActionButton-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton:disabled,
.spectrum-ActionButton.is-disabled,
.spectrum-Tool:disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-ActionButton:disabled .spectrum-Icon,
.spectrum-ActionButton.is-disabled .spectrum-Icon,
.spectrum-Tool:disabled .spectrum-Icon {
      color: rgb(90, 90, 90);
    }
.spectrum-ActionButton:disabled .spectrum-ActionButton-hold,
.spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold,
.spectrum-Tool:disabled .spectrum-ActionButton-hold {
      color: rgb(90, 90, 90);
    }
.spectrum-ActionButton.is-selected {
    background-color: rgb(62, 62, 62);
    border-color: rgb(74, 74, 74);
    color: rgb(227, 227, 227);
  }
.spectrum-ActionButton.is-selected .spectrum-Icon {
      color: rgb(185, 185, 185);
    }
.spectrum-ActionButton.is-selected.focus-ring {
      background-color: rgb(62, 62, 62);
      border-color: rgb(38, 128, 235);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon {
        color: rgb(255, 255, 255);
      }
.spectrum-ActionButton.is-selected:hover {
      background-color: rgb(62, 62, 62);
      border-color: rgb(90, 90, 90);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton.is-selected:hover .spectrum-Icon {
        color: rgb(255, 255, 255);
      }
.spectrum-ActionButton.is-selected:active {
      background-color: rgb(62, 62, 62);
      border-color: rgb(90, 90, 90);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton.is-selected:active .spectrum-Icon {
        color: rgb(255, 255, 255);
      }
.spectrum-ActionButton.is-selected:disabled,
    .spectrum-ActionButton.is-selected.is-disabled {
      background-color: rgb(62, 62, 62);
      border-color: rgb(62, 62, 62);
      color: rgb(110, 110, 110);
    }
.spectrum-ActionButton.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon {
        color: rgb(90, 90, 90);
      }
.spectrum-ActionButton--quiet,
.spectrum-Tool {
  background-color: transparent;
  border-color: transparent;
  color: rgb(227, 227, 227);
}
.spectrum-ActionButton--quiet:hover,
.spectrum-Tool:hover {
    background-color: transparent;
    border-color: transparent;
    color: rgb(255, 255, 255);
    box-shadow: none;
  }
.spectrum-ActionButton--quiet.focus-ring,
.spectrum-Tool.focus-ring {
    background-color: transparent;
    box-shadow: 0 0 0 1px rgb(38, 128, 235);
    border-color: rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.spectrum-ActionButton--quiet:active,
.spectrum-Tool:active {
    background-color: rgb(74, 74, 74);
    border-color: rgb(74, 74, 74);
    color: rgb(255, 255, 255);
    box-shadow: none;
  }
.spectrum-ActionButton--quiet:disabled,
.spectrum-ActionButton--quiet.is-disabled,
.spectrum-Tool:disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(110, 110, 110);
  }
.spectrum-ActionButton--quiet.is-selected {
    background-color: rgb(74, 74, 74);
    border-color: rgb(74, 74, 74);
    color: rgb(227, 227, 227);
  }
.spectrum-ActionButton--quiet.is-selected.focus-ring {
      background-color: rgb(74, 74, 74);
      border-color: rgb(38, 128, 235);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton--quiet.is-selected:hover {
      background-color: rgb(74, 74, 74);
      border-color: rgb(74, 74, 74);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton--quiet.is-selected:active {
      background-color: rgb(74, 74, 74);
      border-color: rgb(74, 74, 74);
      color: rgb(255, 255, 255);
    }
.spectrum-ActionButton--quiet.is-selected:disabled,
    .spectrum-ActionButton--quiet.is-selected.is-disabled {
      background-color: rgb(62, 62, 62);
      border-color: rgb(62, 62, 62);
      color: rgb(110, 110, 110);
    }
.spectrum-Button--warning.spectrum-Button--quiet {
  background-color: transparent;
  border-color: transparent;
  color: rgb(247, 109, 116);
}
.spectrum-Button--warning.spectrum-Button--quiet:hover {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(255, 123, 130);
  }
.spectrum-Button--warning.spectrum-Button--quiet.focus-ring {
    background-color: rgb(20, 115, 230);
    border-color: rgb(20, 115, 230);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--warning.spectrum-Button--quiet:active {
    background-color: rgb(74, 74, 74);
    border-color: rgb(74, 74, 74);
    color: rgb(255, 123, 130);
  }
.spectrum-Button--warning.spectrum-Button--quiet:disabled,
  .spectrum-Button--warning.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(110, 110, 110);
  }
.spectrum-LogicButton--and {
  background-color: rgb(55, 142, 240);
  border-color: rgb(55, 142, 240);
  color: rgb(255, 255, 255);
}
.spectrum-LogicButton--and:hover {
    background-color: rgb(90, 169, 250);
    border-color: rgb(90, 169, 250);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--and.focus-ring {
    background-color: rgb(90, 169, 250);
    border-color: rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--and:disabled,
  .spectrum-LogicButton--and.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-LogicButton--or {
  background-color: rgb(226, 73, 157);
  border-color: rgb(226, 73, 157);
  color: rgb(255, 255, 255);
}
.spectrum-LogicButton--or:hover {
    background-color: rgb(245, 107, 183);
    border-color: rgb(245, 107, 183);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--or.focus-ring {
    background-color: rgb(245, 107, 183);
    border-color: rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--or:disabled,
  .spectrum-LogicButton--or.is-disabled {
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-FieldButton {
  color: rgb(227, 227, 227);
  background-color: rgb(47, 47, 47);
  border-color: rgb(74, 74, 74);
}
.spectrum-FieldButton:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(37, 37, 37);
    border-color: rgb(90, 90, 90);
  }
.spectrum-FieldButton.focus-ring,
  .spectrum-FieldButton.is-focused {
    background-color: rgb(37, 37, 37);
    border-color: rgb(38, 128, 235);
    box-shadow: 0 0 0 1px rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.spectrum-FieldButton.focus-ring.is-placeholder, .spectrum-FieldButton.is-focused.is-placeholder {
      color: rgb(255, 255, 255);
    }
.spectrum-FieldButton:active,
  .spectrum-FieldButton.is-selected {
    background-color: rgb(62, 62, 62);
    border-color: rgb(90, 90, 90);
  }
.spectrum-FieldButton:active.focus-ring,
    .spectrum-FieldButton:active.is-focused,
    .spectrum-FieldButton.is-selected.focus-ring,
    .spectrum-FieldButton.is-selected.is-focused {
      box-shadow: none;
    }
.spectrum-FieldButton.is-invalid {
    border-color: rgb(236, 91, 98);
  }
.spectrum-FieldButton.is-invalid:hover {
      border-color: rgb(247, 109, 116);
    }
.spectrum-FieldButton.is-invalid:active,
    .spectrum-FieldButton.is-invalid.is-selected {
      border-color: rgb(247, 109, 116);
    }
.spectrum-FieldButton.is-invalid.focus-ring,
    .spectrum-FieldButton.is-invalid.is-focused {
      border-color: rgb(38, 128, 235);
      box-shadow: 0 0 0 1px rgb(38, 128, 235);
    }
.spectrum-FieldButton:disabled,
  .spectrum-FieldButton.is-disabled {
    background-color: rgb(62, 62, 62);
    color: rgb(110, 110, 110);
  }
.spectrum-FieldButton:disabled.focus-ring, .spectrum-FieldButton.is-disabled.focus-ring {
      box-shadow: none;
    }
.spectrum-FieldButton:disabled .spectrum-Icon, .spectrum-FieldButton.is-disabled .spectrum-Icon {
      color: rgb(90, 90, 90);
    }
.spectrum-FieldButton--quiet {
  color: rgb(227, 227, 227);
  border-color: transparent;
  background-color: transparent;
}
.spectrum-FieldButton--quiet:hover {
    background-color: transparent;
    color: rgb(255, 255, 255);
  }
.spectrum-FieldButton--quiet.focus-ring,
  .spectrum-FieldButton--quiet.is-focused {
    background-color: transparent;
    box-shadow: 0 2px 0 0 rgb(38, 128, 235);
  }
.spectrum-FieldButton--quiet.focus-ring.is-placeholder, .spectrum-FieldButton--quiet.is-focused.is-placeholder {
      color: rgb(255, 255, 255);
    }
.spectrum-FieldButton--quiet:active,
  .spectrum-FieldButton--quiet.is-selected {
    background-color: transparent;
    border-color: transparent;
  }
.spectrum-FieldButton--quiet:active.focus-ring,
    .spectrum-FieldButton--quiet:active.is-focused,
    .spectrum-FieldButton--quiet.is-selected.focus-ring,
    .spectrum-FieldButton--quiet.is-selected.is-focused {
      background-color: transparent;
      box-shadow: 0 2px 0 0 rgb(38, 128, 235);
    }
.spectrum-FieldButton--quiet.is-invalid.focus-ring,
    .spectrum-FieldButton--quiet.is-invalid.is-focused {
      box-shadow: 0 2px 0 0 rgb(38, 128, 235);
    }
.spectrum-FieldButton--quiet:disabled,
  .spectrum-FieldButton--quiet.is-disabled {
    background-color: transparent;
    color: rgb(110, 110, 110);
  }
.spectrum-FieldButton--quiet:disabled.focus-ring, .spectrum-FieldButton--quiet.is-disabled.focus-ring {
      box-shadow: none;
    }
.spectrum-Tool.is-selected .spectrum-Icon {
      color: rgb(55, 142, 240);
    }
.spectrum-Tool.is-selected .spectrum-Tool-hold {
      color: rgb(55, 142, 240);
    }
.spectrum-Tool.is-selected:hover .spectrum-Icon {
        color: rgb(75, 156, 245);
      }
.spectrum-Tool.is-selected:hover .spectrum-Tool-hold {
        color: rgb(75, 156, 245);
      }
.spectrum-Tool.is-selected:active .spectrum-Icon {
        color: rgb(90, 169, 250);
      }
.spectrum-Tool.is-selected:active .spectrum-Tool-hold {
        color: rgb(90, 169, 250);
      }
.spectrum-Tool.is-selected.focus-ring .spectrum-Icon {
        color: rgb(75, 156, 245);
      }
.spectrum-Tool.is-selected.focus-ring .spectrum-Tool-hold {
        color: rgb(75, 156, 245);
      }
.spectrum-Tool.is-selected:disabled,
    .spectrum-Tool.is-selected.is-disabled {
      background-color: transparent;
      border-color: transparent;
    }
.spectrum-Tool.is-selected:disabled .spectrum-Icon, .spectrum-Tool.is-selected.is-disabled .spectrum-Icon {
        color: rgb(90, 90, 90);
      }
.spectrum-Tool.is-selected:disabled .spectrum-Tool-hold, .spectrum-Tool.is-selected.is-disabled .spectrum-Tool-hold {
        color: rgb(90, 90, 90);
      }
.spectrum-Tool .spectrum-Tool-hold {
    color: rgb(185, 185, 185);
  }
.spectrum-Tool:hover .spectrum-Tool-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-Tool:active {
    background-color: transparent;
    border-color: transparent;
  }
.spectrum-Tool:active .spectrum-Tool-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-Tool.focus-ring .spectrum-Tool-hold {
      color: rgb(255, 255, 255);
    }
.spectrum-Tool.is-disabled .spectrum-Tool-hold, .spectrum-Tool:disabled .spectrum-Tool-hold {
      color: rgb(90, 90, 90);
    }