Change grey shades in arc-green to match the theme more: <img width="661" alt="Screenshot 2023-03-30 at 21 42 34" src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png"> Adjusted grey shade in light theme: <img width="652" alt="image" src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png"> Increase contrast in arc-green, change background to slightly darker shade, change forgeground to slightly brighter colors: <img width="283" alt="Screenshot 2023-03-30 at 22 33 20" src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png"> Increase contrast of grey text in light theme as well by making them darker: <img width="273" alt="Screenshot 2023-03-30 at 22 33 35" src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png"> Add color rule for border multiple select items: <img width="183" alt="Screenshot 2023-03-30 at 22 29 31" src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png"> <img width="181" alt="Screenshot 2023-03-30 at 22 29 46" src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png"> Added color rule for red `*` on required form fields: <img width="97" alt="image" src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">tags/v1.20.0-rc0
@@ -78,7 +78,6 @@ | |||
--color-purple: #a333c8; | |||
--color-pink: #e03997; | |||
--color-brown: #a5673f; | |||
--color-grey: #888888; | |||
--color-black: #1b1c1d; | |||
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */ | |||
--color-red-light: #e45e5e; | |||
@@ -92,9 +91,10 @@ | |||
--color-purple-light: #bb64d8; | |||
--color-pink-light: #e86bb1; | |||
--color-brown-light: #c58b66; | |||
--color-grey-light: #a6a6a6; | |||
--color-black-light: #525558; | |||
/* other colors */ | |||
--color-grey: #707070; | |||
--color-grey-light: #838383; | |||
--color-gold: #a1882b; | |||
--color-white: #ffffff; | |||
--color-diff-removed-word-bg: #fdb8c0; | |||
@@ -2657,6 +2657,10 @@ table th[data-sortt-desc] .svg { | |||
border-radius: 0 0 var(--border-radius) var(--border-radius); | |||
} | |||
.ui.multiple.dropdown > .label { | |||
box-shadow: 0 0 0 1px var(--color-secondary) inset; | |||
} | |||
.text-label { | |||
display: inline-flex !important; | |||
align-items: center !important; |
@@ -94,6 +94,15 @@ textarea:focus, | |||
color: var(--color-text); | |||
} | |||
.ui.form .required.fields:not(.grouped) > .field > label::after, | |||
.ui.form .required.fields.grouped > label::after, | |||
.ui.form .required.field > label::after, | |||
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after, | |||
.ui.form .required.field > .checkbox::after, | |||
.ui.form label.required::after { | |||
color: var(--color-red); | |||
} | |||
.ui.input, | |||
.ui.checkbox input:focus ~ label::after, | |||
.ui.checkbox input:checked ~ label::after, |
@@ -68,8 +68,7 @@ | |||
--color-purple: #b259d0; | |||
--color-pink: #d22e8b; | |||
--color-brown: #a47252; | |||
--color-grey: #9ea2aa; | |||
--color-black: #1e222e; | |||
--color-black: #2e323e; | |||
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */ | |||
--color-red-light: #c23636; | |||
--color-orange-light: #b84f0b; | |||
@@ -82,9 +81,10 @@ | |||
--color-purple-light: #a742c9; | |||
--color-pink-light: #be297d; | |||
--color-brown-light: #94674a; | |||
--color-grey-light: #8d919b; | |||
--color-black-light: #1b1f29; | |||
--color-black-light: #292d38; | |||
/* other colors */ | |||
--color-grey: #505665; | |||
--color-grey-light: #a1a6b7; | |||
--color-gold: #b1983b; | |||
--color-white: #ffffff; | |||
--color-diff-removed-word-bg: #6f3333; | |||
@@ -124,19 +124,19 @@ | |||
--color-orange-badge-hover-bg: #f2711c4d; | |||
--color-git: #f05133; | |||
/* target-based colors */ | |||
--color-body: #383c4a; | |||
--color-body: #373b47; | |||
--color-box-header: #404652; | |||
--color-box-body: #2a2e3a; | |||
--color-box-body-highlight: #353945; | |||
--color-text-dark: #dbe0ea; | |||
--color-text: #bbc0ca; | |||
--color-text-light: #a6aab5; | |||
--color-text-light-1: #979ba6; | |||
--color-text-light-2: #8a8e99; | |||
--color-text-light-3: #707687; | |||
--color-text: #cbd0da; | |||
--color-text-light: #bbbfca; | |||
--color-text-light-1: #aaafb9; | |||
--color-text-light-2: #9a9ea9; | |||
--color-text-light-3: #8a8e99; | |||
--color-footer: #2e323e; | |||
--color-timeline: #4c525e; | |||
--color-input-text: #d5dbe6; | |||
--color-input-text: #dfe3ec; | |||
--color-input-background: #232933; | |||
--color-input-toggle-background: #454a57; | |||
--color-input-border: #454a57; | |||
@@ -159,7 +159,7 @@ | |||
--color-secondary-bg: #2a2e3a; | |||
--color-text-focus: #fff; | |||
--color-expand-button: #3c404d; | |||
--color-placeholder-text: #6a737d; | |||
--color-placeholder-text: #8a8e99; | |||
--color-editor-line-highlight: var(--color-primary-light-5); | |||
--color-project-board-bg: var(--color-secondary-light-2); | |||
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ |