@adobe/spectrum-css/dist/components/button/colorStops/lightest.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(116, 116, 116);
}
.spectrum-ClearButton:hover {
    background-color: transparent;

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

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

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

    color: rgb(211, 211, 211);
  }
.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(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-Button--primary {
  background-color: transparent;
  border-color: rgb(80, 80, 80);
  color: rgb(80, 80, 80);
}
.spectrum-Button--primary:hover {
    background-color: rgb(80, 80, 80);
    border-color: rgb(80, 80, 80);
    color: rgb(255, 255, 255);
  }
.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(50, 50, 50);
    border-color: rgb(50, 50, 50);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--primary:disabled,
  .spectrum-Button--primary.is-disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-Button--secondary {
  background-color: transparent;
  border-color: rgb(116, 116, 116);
  color: rgb(116, 116, 116);
}
.spectrum-Button--secondary:hover {
    background-color: rgb(116, 116, 116);
    border-color: rgb(116, 116, 116);
    color: rgb(255, 255, 255);
  }
.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(80, 80, 80);
    border-color: rgb(80, 80, 80);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--secondary:disabled,
  .spectrum-Button--secondary.is-disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-Button--warning {
  background-color: transparent;
  border-color: rgb(215, 55, 63);
  color: rgb(215, 55, 63);
}
.spectrum-Button--warning:hover {
    background-color: rgb(215, 55, 63);
    border-color: rgb(215, 55, 63);
    color: rgb(255, 255, 255);
  }
.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(201, 37, 45);
    border-color: rgb(201, 37, 45);
    color: rgb(255, 255, 255);
  }
.spectrum-Button--warning:disabled,
  .spectrum-Button--warning.is-disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.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(80, 80, 80);
}
.spectrum-Button--primary.spectrum-Button--quiet:hover {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(50, 50, 50);
  }
.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(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(50, 50, 50);
  }
.spectrum-Button--primary.spectrum-Button--quiet:disabled,
  .spectrum-Button--primary.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(188, 188, 188);
  }
.spectrum-Button--secondary.spectrum-Button--quiet {
  background-color: transparent;
  border-color: transparent;
  color: rgb(116, 116, 116);
}
.spectrum-Button--secondary.spectrum-Button--quiet:hover {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(80, 80, 80);
  }
.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(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(80, 80, 80);
  }
.spectrum-Button--secondary.spectrum-Button--quiet:disabled,
  .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(188, 188, 188);
  }
.spectrum-ActionButton,
.spectrum-Tool {
  background-color: rgb(255, 255, 255);
  border-color: rgb(234, 234, 234);
  color: rgb(80, 80, 80);
}
.spectrum-ActionButton .spectrum-Icon,
.spectrum-Tool .spectrum-Icon {
    color: rgb(116, 116, 116);
  }
.spectrum-ActionButton .spectrum-ActionButton-hold,
.spectrum-Tool .spectrum-ActionButton-hold {
    color: rgb(116, 116, 116);
  }
.spectrum-ActionButton:hover,
.spectrum-Tool:hover {
    background-color: rgb(255, 255, 255);
    border-color: rgb(211, 211, 211);
    box-shadow: none;
    color: rgb(50, 50, 50);
  }
.spectrum-ActionButton:hover .spectrum-Icon,
.spectrum-Tool:hover .spectrum-Icon {
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton:hover .spectrum-ActionButton-hold,
.spectrum-Tool:hover .spectrum-ActionButton-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton.focus-ring,
.spectrum-Tool.focus-ring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(55, 142, 240);
    box-shadow: 0 0 0 1px rgb(55, 142, 240);
    color: rgb(50, 50, 50);
  }
.spectrum-ActionButton.focus-ring .spectrum-Icon,
.spectrum-Tool.focus-ring .spectrum-Icon {
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold,
.spectrum-Tool.focus-ring .spectrum-ActionButton-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton:active,
.spectrum-Tool:active {
    background-color: rgb(244, 244, 244);
    border-color: rgb(211, 211, 211);
    box-shadow: none;
    color: rgb(50, 50, 50);
  }
.spectrum-ActionButton:active .spectrum-ActionButton-hold,
.spectrum-Tool:active .spectrum-ActionButton-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton:disabled,
.spectrum-ActionButton.is-disabled,
.spectrum-Tool:disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-ActionButton:disabled .spectrum-Icon,
.spectrum-ActionButton.is-disabled .spectrum-Icon,
.spectrum-Tool:disabled .spectrum-Icon {
      color: rgb(211, 211, 211);
    }
.spectrum-ActionButton:disabled .spectrum-ActionButton-hold,
.spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold,
.spectrum-Tool:disabled .spectrum-ActionButton-hold {
      color: rgb(211, 211, 211);
    }
.spectrum-ActionButton.is-selected {
    background-color: rgb(244, 244, 244);
    border-color: rgb(234, 234, 234);
    color: rgb(80, 80, 80);
  }
.spectrum-ActionButton.is-selected .spectrum-Icon {
      color: rgb(116, 116, 116);
    }
.spectrum-ActionButton.is-selected.focus-ring {
      background-color: rgb(244, 244, 244);
      border-color: rgb(55, 142, 240);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon {
        color: rgb(50, 50, 50);
      }
.spectrum-ActionButton.is-selected:hover {
      background-color: rgb(244, 244, 244);
      border-color: rgb(211, 211, 211);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton.is-selected:hover .spectrum-Icon {
        color: rgb(50, 50, 50);
      }
.spectrum-ActionButton.is-selected:active {
      background-color: rgb(244, 244, 244);
      border-color: rgb(211, 211, 211);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton.is-selected:active .spectrum-Icon {
        color: rgb(50, 50, 50);
      }
.spectrum-ActionButton.is-selected:disabled,
    .spectrum-ActionButton.is-selected.is-disabled {
      background-color: rgb(244, 244, 244);
      border-color: rgb(244, 244, 244);
      color: rgb(188, 188, 188);
    }
.spectrum-ActionButton.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon {
        color: rgb(211, 211, 211);
      }
.spectrum-ActionButton--quiet,
.spectrum-Tool {
  background-color: transparent;
  border-color: transparent;
  color: rgb(80, 80, 80);
}
.spectrum-ActionButton--quiet:hover,
.spectrum-Tool:hover {
    background-color: transparent;
    border-color: transparent;
    color: rgb(50, 50, 50);
    box-shadow: none;
  }
.spectrum-ActionButton--quiet.focus-ring,
.spectrum-Tool.focus-ring {
    background-color: transparent;
    box-shadow: 0 0 0 1px rgb(55, 142, 240);
    border-color: rgb(55, 142, 240);
    color: rgb(50, 50, 50);
  }
.spectrum-ActionButton--quiet:active,
.spectrum-Tool:active {
    background-color: rgb(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(50, 50, 50);
    box-shadow: none;
  }
.spectrum-ActionButton--quiet:disabled,
.spectrum-ActionButton--quiet.is-disabled,
.spectrum-Tool:disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(188, 188, 188);
  }
.spectrum-ActionButton--quiet.is-selected {
    background-color: rgb(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(80, 80, 80);
  }
.spectrum-ActionButton--quiet.is-selected.focus-ring {
      background-color: rgb(234, 234, 234);
      border-color: rgb(55, 142, 240);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton--quiet.is-selected:hover {
      background-color: rgb(234, 234, 234);
      border-color: rgb(234, 234, 234);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton--quiet.is-selected:active {
      background-color: rgb(234, 234, 234);
      border-color: rgb(234, 234, 234);
      color: rgb(50, 50, 50);
    }
.spectrum-ActionButton--quiet.is-selected:disabled,
    .spectrum-ActionButton--quiet.is-selected.is-disabled {
      background-color: rgb(244, 244, 244);
      border-color: rgb(244, 244, 244);
      color: rgb(188, 188, 188);
    }
.spectrum-Button--warning.spectrum-Button--quiet {
  background-color: transparent;
  border-color: transparent;
  color: rgb(215, 55, 63);
}
.spectrum-Button--warning.spectrum-Button--quiet:hover {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(201, 37, 45);
  }
.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(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(201, 37, 45);
  }
.spectrum-Button--warning.spectrum-Button--quiet:disabled,
  .spectrum-Button--warning.spectrum-Button--quiet.is-disabled {
    background-color: transparent;
    border-color: transparent;
    color: rgb(188, 188, 188);
  }
.spectrum-LogicButton--and {
  background-color: rgb(38, 128, 235);
  border-color: rgb(38, 128, 235);
  color: rgb(255, 255, 255);
}
.spectrum-LogicButton--and:hover {
    background-color: rgb(13, 102, 208);
    border-color: rgb(13, 102, 208);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--and.focus-ring {
    background-color: rgb(13, 102, 208);
    border-color: rgb(55, 142, 240);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--and:disabled,
  .spectrum-LogicButton--and.is-disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-LogicButton--or {
  background-color: rgb(216, 55, 144);
  border-color: rgb(216, 55, 144);
  color: rgb(255, 255, 255);
}
.spectrum-LogicButton--or:hover {
    background-color: rgb(188, 28, 116);
    border-color: rgb(188, 28, 116);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--or.focus-ring {
    background-color: rgb(188, 28, 116);
    border-color: rgb(55, 142, 240);
    color: rgb(255, 255, 255);
  }
.spectrum-LogicButton--or:disabled,
  .spectrum-LogicButton--or.is-disabled {
    background-color: rgb(244, 244, 244);
    border-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.spectrum-FieldButton {
  color: rgb(80, 80, 80);
  background-color: rgb(255, 255, 255);
  border-color: rgb(234, 234, 234);
}
.spectrum-FieldButton:hover {
    color: rgb(50, 50, 50);
    background-color: rgb(255, 255, 255);
    border-color: rgb(211, 211, 211);
  }
.spectrum-FieldButton.focus-ring,
  .spectrum-FieldButton.is-focused {
    background-color: rgb(255, 255, 255);
    border-color: rgb(55, 142, 240);
    box-shadow: 0 0 0 1px rgb(55, 142, 240);
    color: rgb(50, 50, 50);
  }
.spectrum-FieldButton.focus-ring.is-placeholder, .spectrum-FieldButton.is-focused.is-placeholder {
      color: rgb(50, 50, 50);
    }
.spectrum-FieldButton:active,
  .spectrum-FieldButton.is-selected {
    background-color: rgb(244, 244, 244);
    border-color: rgb(211, 211, 211);
  }
.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(227, 72, 80);
  }
.spectrum-FieldButton.is-invalid:hover {
      border-color: rgb(215, 55, 63);
    }
.spectrum-FieldButton.is-invalid:active,
    .spectrum-FieldButton.is-invalid.is-selected {
      border-color: rgb(215, 55, 63);
    }
.spectrum-FieldButton.is-invalid.focus-ring,
    .spectrum-FieldButton.is-invalid.is-focused {
      border-color: rgb(55, 142, 240);
      box-shadow: 0 0 0 1px rgb(55, 142, 240);
    }
.spectrum-FieldButton:disabled,
  .spectrum-FieldButton.is-disabled {
    background-color: rgb(244, 244, 244);
    color: rgb(188, 188, 188);
  }
.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(211, 211, 211);
    }
.spectrum-FieldButton--quiet {
  color: rgb(80, 80, 80);
  border-color: transparent;
  background-color: transparent;
}
.spectrum-FieldButton--quiet:hover {
    background-color: transparent;
    color: rgb(50, 50, 50);
  }
.spectrum-FieldButton--quiet.focus-ring,
  .spectrum-FieldButton--quiet.is-focused {
    background-color: transparent;
    box-shadow: 0 2px 0 0 rgb(55, 142, 240);
  }
.spectrum-FieldButton--quiet.focus-ring.is-placeholder, .spectrum-FieldButton--quiet.is-focused.is-placeholder {
      color: rgb(50, 50, 50);
    }
.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(55, 142, 240);
    }
.spectrum-FieldButton--quiet.is-invalid.focus-ring,
    .spectrum-FieldButton--quiet.is-invalid.is-focused {
      box-shadow: 0 2px 0 0 rgb(55, 142, 240);
    }
.spectrum-FieldButton--quiet:disabled,
  .spectrum-FieldButton--quiet.is-disabled {
    background-color: transparent;
    color: rgb(188, 188, 188);
  }
.spectrum-FieldButton--quiet:disabled.focus-ring, .spectrum-FieldButton--quiet.is-disabled.focus-ring {
      box-shadow: none;
    }
.spectrum-Tool.is-selected .spectrum-Icon {
      color: rgb(38, 128, 235);
    }
.spectrum-Tool.is-selected .spectrum-Tool-hold {
      color: rgb(38, 128, 235);
    }
.spectrum-Tool.is-selected:hover .spectrum-Icon {
        color: rgb(20, 115, 230);
      }
.spectrum-Tool.is-selected:hover .spectrum-Tool-hold {
        color: rgb(20, 115, 230);
      }
.spectrum-Tool.is-selected:active .spectrum-Icon {
        color: rgb(13, 102, 208);
      }
.spectrum-Tool.is-selected:active .spectrum-Tool-hold {
        color: rgb(13, 102, 208);
      }
.spectrum-Tool.is-selected.focus-ring .spectrum-Icon {
        color: rgb(20, 115, 230);
      }
.spectrum-Tool.is-selected.focus-ring .spectrum-Tool-hold {
        color: rgb(20, 115, 230);
      }
.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(211, 211, 211);
      }
.spectrum-Tool.is-selected:disabled .spectrum-Tool-hold, .spectrum-Tool.is-selected.is-disabled .spectrum-Tool-hold {
        color: rgb(211, 211, 211);
      }
.spectrum-Tool .spectrum-Tool-hold {
    color: rgb(116, 116, 116);
  }
.spectrum-Tool:hover .spectrum-Tool-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-Tool:active {
    background-color: transparent;
    border-color: transparent;
  }
.spectrum-Tool:active .spectrum-Tool-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-Tool.focus-ring .spectrum-Tool-hold {
      color: rgb(50, 50, 50);
    }
.spectrum-Tool.is-disabled .spectrum-Tool-hold, .spectrum-Tool:disabled .spectrum-Tool-hold {
      color: rgb(211, 211, 211);
    }