diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss index 42d2c651..3adea7d0 100644 --- a/src/avatars/avatar-stack.scss +++ b/src/avatars/avatar-stack.scss @@ -33,7 +33,7 @@ // stylelint-disable-next-line primer/spacing margin-right: -11px; background-color: var(--color-bg-canvas); - border-right: $border-width $border-style var(--color-border-white); + border-right: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; transition: margin 0.1s ease-in-out; @@ -91,7 +91,7 @@ content: ""; // stylelint-disable-next-line primer/borders border-radius: 2px; - outline: $border-width $border-style var(--color-border-inverse); + outline: $border-width $border-style var(--color-bg-canvas); } &::before { diff --git a/src/box/box.scss b/src/box/box.scss index d6a7ed28..323b6f9b 100644 --- a/src/box/box.scss +++ b/src/box/box.scss @@ -268,7 +268,7 @@ // Box row highlight themes .Box-row--yellow { - background-color: var(--color-bg-warning); + background-color: var(--color-scale-yellow-1); } .Box-row--blue { diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss index 303e18c3..3311aaea 100644 --- a/src/dropdown/dropdown.scss +++ b/src/dropdown/dropdown.scss @@ -19,7 +19,6 @@ // Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which // way the menu should render from the element triggering it. -.dropdown-menu-dark, // TODO: Deprecate .dropdown-menu { position: absolute; top: 100%; @@ -260,3 +259,71 @@ left: 10px; } } + +// Dark dropdowns +// TODO: Deprecate + +.dropdown-menu-dark { + color: $text-white; + // stylelint-disable-next-line primer/colors + background: $gray-800; + border-color: $border-gray-darker; + box-shadow: $box-shadow-large; + + &::before { + border-bottom-color: $border-gray-darker; + } + + &::after { + // stylelint-disable-next-line primer/borders + border-bottom-color: $gray-800; + } + + .dropdown-header { + // stylelint-disable-next-line primer/colors + color: $gray-300; + } + + .dropdown-divider { + border-top-color: $border-gray-darker; + } + + .dropdown-item { + color: inherit; + } + + // Directional classes + + &.dropdown-menu-w { + &::before { + border-color: transparent transparent transparent $border-gray-darker; + } + + &::after { + // stylelint-disable-next-line primer/borders + border-color: transparent transparent transparent $gray-800; + } + } + + &.dropdown-menu-e { + &::before { + border-color: transparent $border-gray-darker transparent transparent; + } + + &::after { + // stylelint-disable-next-line primer/borders + border-color: transparent $gray-800 transparent transparent; + } + } + + &.dropdown-menu-ne { + &::before { + border-color: $border-gray-darker transparent transparent transparent; + } + + &::after { + // stylelint-disable-next-line primer/borders + border-color: $gray-800 transparent transparent transparent; + } + } +} diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 302b24da..c52b537f 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -15,7 +15,6 @@ label { font-weight: $font-weight-bold; } -.input-dark, // TODO: deprecate .form-control, .form-select { // stylelint-disable-next-line primer/spacing @@ -69,9 +68,32 @@ textarea.form-control { &:focus { background-color: var(--color-bg-primary); } } +// Inputs to be used against dark backgrounds. +// TODO: Deprecate +.input-dark { + color: $text-white; + // stylelint-disable-next-line primer/colors + background-color: $white-fade-15; + border-color: transparent; + box-shadow: none; + + &::placeholder { + color: inherit; + opacity: 0.6; // inceases contrast ratio to 4.52 + } + + &.focus, + &:focus { + // stylelint-disable-next-line primer/borders + border-color: $black-fade-30; + // stylelint-disable-next-line primer/box-shadow + box-shadow: var(--color-input-shadow-focus); + } +} + // Custom styling for HTML5 validation bubbles (WebKit only) ::placeholder { - color: var(--color-text-tertiary); + color: var(--color-text-placeholder); opacity: 1; // override opacity in normalize.css } diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index 4c1430b4..a6e4e8f3 100644 --- a/src/forms/form-group.scss +++ b/src/forms/form-group.scss @@ -239,15 +239,14 @@ .error { background-color: var(--color-bg-danger); - border-color: var(--color-border-danger); + border-color: var(--color-scale-red-3); // stylelint-disable-line primer/borders &::after { - // stylelint-disable-next-line primer/borders - border-bottom-color: var(--color-bg-danger); + border-bottom-color: var(--color-bg-danger); // stylelint-disable-line primer/borders } &::before { - border-bottom-color: var(--color-border-danger); + border-bottom-color: var(--color-scale-red-3); // stylelint-disable-line primer/borders } } }