Consolidate remaining colors into variables (#21582)

Remove remaining non-color variables in arc-green, so the theme is now
100% defined from variables (excluding inverts). Adjusted red/green to
match previous overwritten colors.

`--color-gold-light` is removed, it was unused and is not part of
fomantic colors.

<img width="772" alt="Screen Shot 2022-10-24 at 20 22 25"
src="https://user-images.githubusercontent.com/115237/197599339-1d1bf6e3-aa90-4f38-9753-24effd4b178d.png">
<img width="275" alt="Screen Shot 2022-10-24 at 20 25 52"
src="https://user-images.githubusercontent.com/115237/197599344-79c1d3ac-c709-4e30-a60b-4738af672c12.png">
<img width="446" alt="Screen Shot 2022-10-24 at 20 26 46"
src="https://user-images.githubusercontent.com/115237/197599346-f2ef6449-7efd-4f81-bbb6-e7bee4528f50.png">

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2022-10-25 06:08:54 +02:00 committed by GitHub
parent 3bd05172d5
commit 06a7ed4e04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 370 additions and 121 deletions

View file

@ -79,7 +79,6 @@
--color-pink: #e03997; --color-pink: #e03997;
--color-brown: #a5673f; --color-brown: #a5673f;
--color-grey: #888888; --color-grey: #888888;
--color-gold: #a1882b;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */ /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e; --color-red-light: #e45e5e;
--color-orange-light: #f59555; --color-orange-light: #f59555;
@ -93,8 +92,8 @@
--color-pink-light: #e86bb1; --color-pink-light: #e86bb1;
--color-brown-light: #c58b66; --color-brown-light: #c58b66;
--color-grey-light: #a6a6a6; --color-grey-light: #a6a6a6;
--color-gold-light: #cfb34a;
/* other colors */ /* other colors */
--color-gold: #a1882b;
--color-black: #1b1c1d; --color-black: #1b1c1d;
--color-white: #ffffff; --color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0; --color-diff-removed-word-bg: #fdb8c0;
@ -314,6 +313,299 @@ a.commit-statuses-trigger {
text-decoration: none !important; text-decoration: none !important;
} }
.ui.red.labels .label,
.ui.ui.ui.red.label,
.ui.red.button,
.ui.red.buttons .button {
background: var(--color-red);
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
background: var(--color-red-light);
}
.ui.basic.red.buttons .button,
.ui.basic.red.button {
color: var(--color-red);
border-color: var(--color-red);
}
.ui.basic.red.buttons .button:hover,
.ui.basic.red.button:hover {
color: var(--color-red-light);
border-color: var(--color-red-light);
}
.ui.orange.labels .label,
.ui.ui.ui.orange.label,
.ui.orange.button,
.ui.orange.buttons .button {
background: var(--color-orange);
}
.ui.orange.button:hover,
.ui.orange.buttons .button:hover {
background: var(--color-orange-light);
}
.ui.basic.orange.buttons .button,
.ui.basic.orange.button {
color: var(--color-orange);
border-color: var(--color-orange);
}
.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
color: var(--color-orange-light);
border-color: var(--color-orange-light);
}
.ui.yellow.labels .label,
.ui.ui.ui.yellow.label,
.ui.yellow.button,
.ui.yellow.buttons .button {
background: var(--color-yellow);
}
.ui.yellow.button:hover,
.ui.yellow.buttons .button:hover {
background: var(--color-yellow-light);
}
.ui.basic.yellow.buttons .button,
.ui.basic.yellow.button {
color: var(--color-yellow);
border-color: var(--color-yellow);
}
.ui.basic.yellow.buttons .button:hover,
.ui.basic.yellow.button:hover {
color: var(--color-yellow-light);
border-color: var(--color-yellow-light);
}
.ui.olive.labels .label,
.ui.ui.ui.olive.label,
.ui.olive.button,
.ui.olive.buttons .button {
background: var(--color-olive);
}
.ui.olive.button:hover,
.ui.olive.buttons .button:hover {
background: var(--color-olive-light);
}
.ui.basic.olive.buttons .button,
.ui.basic.olive.button {
color: var(--color-olive);
border-color: var(--color-olive);
}
.ui.basic.olive.buttons .button:hover,
.ui.basic.olive.button:hover {
color: var(--color-olive-light);
border-color: var(--color-olive-light);
}
.ui.green.labels .label,
.ui.ui.ui.green.label,
.ui.green.button,
.ui.green.buttons .button {
background: var(--color-green);
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
background: var(--color-green-light);
}
.ui.basic.green.buttons .button,
.ui.basic.green.button {
color: var(--color-green);
border-color: var(--color-green);
}
.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
color: var(--color-green-light);
border-color: var(--color-green-light);
}
.ui.teal.labels .label,
.ui.ui.ui.teal.label,
.ui.teal.button,
.ui.teal.buttons .button {
background: var(--color-teal);
}
.ui.teal.button:hover,
.ui.teal.buttons .button:hover {
background: var(--color-teal-light);
}
.ui.basic.teal.buttons .button,
.ui.basic.teal.button {
color: var(--color-teal);
border-color: var(--color-teal);
}
.ui.basic.teal.buttons .button:hover,
.ui.basic.teal.button:hover {
color: var(--color-teal-light);
border-color: var(--color-teal-light);
}
.ui.blue.labels .label,
.ui.ui.ui.blue.label,
.ui.blue.button,
.ui.blue.buttons .button {
background: var(--color-blue);
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover {
background: var(--color-blue-light);
}
.ui.basic.blue.buttons .button,
.ui.basic.blue.button {
color: var(--color-blue);
border-color: var(--color-blue);
}
.ui.basic.blue.buttons .button:hover,
.ui.basic.blue.button:hover {
color: var(--color-blue-light);
border-color: var(--color-blue-light);
}
.ui.violet.labels .label,
.ui.ui.ui.violet.label,
.ui.violet.button,
.ui.violet.buttons .button {
background: var(--color-violet);
}
.ui.violet.button:hover,
.ui.violet.buttons .button:hover {
background: var(--color-violet-light);
}
.ui.basic.violet.buttons .button,
.ui.basic.violet.button {
color: var(--color-violet);
border-color: var(--color-violet);
}
.ui.basic.violet.buttons .button:hover,
.ui.basic.violet.button:hover {
color: var(--color-violet-light);
border-color: var(--color-violet-light);
}
.ui.purple.labels .label,
.ui.ui.ui.purple.label,
.ui.purple.button,
.ui.purple.buttons .button {
background: var(--color-purple);
}
.ui.purple.button:hover,
.ui.purple.buttons .button:hover {
background: var(--color-purple-light);
}
.ui.basic.purple.buttons .button,
.ui.basic.purple.button {
color: var(--color-purple);
border-color: var(--color-purple);
}
.ui.basic.purple.buttons .button:hover,
.ui.basic.purple.button:hover {
color: var(--color-purple-light);
border-color: var(--color-purple-light);
}
.ui.pink.labels .label,
.ui.ui.ui.pink.label,
.ui.pink.button,
.ui.pink.buttons .button {
background: var(--color-pink);
}
.ui.pink.button:hover,
.ui.pink.buttons .button:hover {
background: var(--color-pink-light);
}
.ui.basic.pink.buttons .button,
.ui.basic.pink.button {
color: var(--color-pink);
border-color: var(--color-pink);
}
.ui.basic.pink.buttons .button:hover,
.ui.basic.pink.button:hover {
color: var(--color-pink-light);
border-color: var(--color-pink-light);
}
.ui.brown.labels .label,
.ui.ui.ui.brown.label,
.ui.brown.button,
.ui.brown.buttons .button {
background: var(--color-brown);
}
.ui.brown.button:hover,
.ui.brown.buttons .button:hover {
background: var(--color-brown-light);
}
.ui.basic.brown.buttons .button,
.ui.basic.brown.button {
color: var(--color-brown);
border-color: var(--color-brown);
}
.ui.basic.brown.buttons .button:hover,
.ui.basic.brown.button:hover {
color: var(--color-brown-light);
border-color: var(--color-brown-light);
}
.ui.grey.labels .label,
.ui.ui.ui.grey.label,
.ui.grey.button,
.ui.grey.buttons .button {
background: var(--color-grey);
}
.ui.grey.button:hover,
.ui.grey.buttons .button:hover {
background: var(--color-grey-light);
}
.ui.basic.grey.buttons .button,
.ui.basic.grey.button {
color: var(--color-grey);
border-color: var(--color-grey);
}
.ui.basic.grey.buttons .button:hover,
.ui.basic.grey.button:hover {
color: var(--color-grey-light);
border-color: var(--color-grey-light);
}
.ui.black.labels .label,
.ui.ui.ui.black.label,
.ui.black.button,
.ui.black.buttons .button {
background: var(--color-black);
}
.ui.black.button:hover,
.ui.black.buttons .button:hover {
background: var(--color-black-light);
}
.ui.basic.black.buttons .button,
.ui.basic.black.button {
color: var(--color-black);
border-color: var(--color-black);
}
.ui.basic.black.buttons .button:hover,
.ui.basic.black.button:hover {
color: var(--color-black-light);
border-color: var(--color-black-light);
}
.ui.negative.buttons .button,
.ui.negative.button {
background: var(--color-red);
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover {
background: var(--color-red-light);
}
.ui.positive.buttons .button,
.ui.positive.button {
background: var(--color-green);
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover {
background: var(--color-green-light);
}
.ui.search > .results { .ui.search > .results {
background: var(--color-body); background: var(--color-body);
border-color: var(--color-secondary); border-color: var(--color-secondary);
@ -958,6 +1250,52 @@ a.ui.card:hover,
opacity: .35; opacity: .35;
} }
.ui.form .fields.error .field textarea,
.ui.form .fields.error .field select,
.ui.form .fields.error .field input:not([type]),
.ui.form .fields.error .field input[type="date"],
.ui.form .fields.error .field input[type="datetime-local"],
.ui.form .fields.error .field input[type="email"],
.ui.form .fields.error .field input[type="number"],
.ui.form .fields.error .field input[type="password"],
.ui.form .fields.error .field input[type="search"],
.ui.form .fields.error .field input[type="tel"],
.ui.form .fields.error .field input[type="time"],
.ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="file"],
.ui.form .fields.error .field input[type="url"],
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input:not([type]),
.ui.form .field.error input[type="date"],
.ui.form .field.error input[type="datetime-local"],
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="file"],
.ui.form .field.error input[type="url"],
.ui.form .field.error select:focus,
.ui.form .field.error input:not([type]):focus,
.ui.form .field.error input[type="date"]:focus,
.ui.form .field.error input[type="datetime-local"]:focus,
.ui.form .field.error input[type="email"]:focus,
.ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="password"]:focus,
.ui.form .field.error input[type="search"]:focus,
.ui.form .field.error input[type="tel"]:focus,
.ui.form .field.error input[type="time"]:focus,
.ui.form .field.error input[type="text"]:focus,
.ui.form .field.error input[type="file"]:focus,
.ui.form .field.error input[type="url"]:focus {
background-color: var(--color-error-bg);
border: 1px solid var(--color-error-border);
color: var(--color-error-text);
}
.ui.loading.loading.input > i.icon svg { .ui.loading.loading.input > i.icon svg {
visibility: hidden; visibility: hidden;
} }

View file

@ -540,6 +540,7 @@
} }
.markup-block-error { .markup-block-error {
border: 1px solid var(--color-error-border) !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;

View file

@ -56,18 +56,32 @@
--color-secondary-alpha-80: #454a57cc; --color-secondary-alpha-80: #454a57cc;
--color-secondary-alpha-90: #454a57e1; --color-secondary-alpha-90: #454a57e1;
/* colors */ /* colors */
--color-red: #db2828; --color-red: #7d3434;
--color-orange: #f2711c; --color-orange: #cc580c;
--color-yellow: #fbbd08; --color-yellow: #cc9903;
--color-olive: #b5cc18; --color-olive: #91a313;
--color-green: #21ba45; --color-green: #87ab63;
--color-teal: #00b5ad; --color-teal: #00918a;
--color-blue: #2185d0; --color-blue: #1a6aa6;
--color-violet: #6435c9; --color-violet: #502aa1;
--color-purple: #a333c8; --color-purple: #8229a0;
--color-pink: #e03997; --color-pink: #c21e7b;
--color-brown: #a5673f; --color-brown: #845232;
--color-grey: #767a85; --color-grey: #5e626a;
/* light variants */
--color-red-light: #984646;
--color-orange-light: #e6630d;
--color-yellow-light: #e5ac04;
--color-olive-light: #a3b816;
--color-green-light: #9fbc82;
--color-teal-light: #00a39c;
--color-blue-light: #1e78bb;
--color-violet-light: #5a30b5;
--color-purple-light: #932eb4;
--color-pink-light: #db228a;
--color-brown-light: #955d39;
--color-grey-light: #6a6e78;
/* other colors */
--color-black: #1e222e; --color-black: #1e222e;
--color-gold: #a1882b; --color-gold: #a1882b;
--color-white: #ffffff; --color-white: #ffffff;
@ -80,9 +94,9 @@
--color-diff-moved-row-border: #bcca6f; --color-diff-moved-row-border: #bcca6f;
--color-diff-added-row-border: #314a37; --color-diff-added-row-border: #314a37;
--color-diff-inactive: #353846; --color-diff-inactive: #353846;
--color-error-border: #a53a37; --color-error-border: #a04141;
--color-error-bg: #482c2c; --color-error-bg: #522;
--color-error-text: #ff4433; --color-error-text: #f9cbcb;
--color-success-border: #458a57; --color-success-border: #458a57;
--color-success-bg: #284034; --color-success-bg: #284034;
--color-success-text: #6cc664; --color-success-text: #6cc664;
@ -145,105 +159,6 @@
filter: invert(.8); filter: invert(.8);
} }
.ui.red.label,
.ui.red.labels .label {
background-color: #7d3434 !important;
border-color: #8a2121 !important;
}
.ui.yellow.label,
.ui.yellow.labels .label {
border-color: #664d02 !important;
background-color: #936e00 !important;
}
.ui.green.label,
.ui.green.labels .label,
.ui.basic.green.label {
background-color: #2d693b !important;
border-color: #2d693b !important;
}
.ui.green.labels a.label:hover,
.ui.basic.green.labels a.label:hover,
a.ui.ui.ui.green.label:hover,
a.ui.basic.green.label:hover {
background-color: #3d794b !important;
border-color: #3d794b !important;
color: #fff !important;
}
.ui.form .fields.error .field textarea,
.ui.form .fields.error .field select,
.ui.form .fields.error .field input:not([type]),
.ui.form .fields.error .field input[type="date"],
.ui.form .fields.error .field input[type="datetime-local"],
.ui.form .fields.error .field input[type="email"],
.ui.form .fields.error .field input[type="number"],
.ui.form .fields.error .field input[type="password"],
.ui.form .fields.error .field input[type="search"],
.ui.form .fields.error .field input[type="tel"],
.ui.form .fields.error .field input[type="time"],
.ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="file"],
.ui.form .fields.error .field input[type="url"],
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input:not([type]),
.ui.form .field.error input[type="date"],
.ui.form .field.error input[type="datetime-local"],
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="file"],
.ui.form .field.error input[type="url"] {
background-color: #522;
border: 1px solid #7d3434;
color: #f9cbcb;
}
.ui.form .field.error select:focus,
.ui.form .field.error input:not([type]):focus,
.ui.form .field.error input[type="date"]:focus,
.ui.form .field.error input[type="datetime-local"]:focus,
.ui.form .field.error input[type="email"]:focus,
.ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="password"]:focus,
.ui.form .field.error input[type="search"]:focus,
.ui.form .field.error input[type="tel"]:focus,
.ui.form .field.error input[type="time"]:focus,
.ui.form .field.error input[type="text"]:focus,
.ui.form .field.error input[type="file"]:focus,
.ui.form .field.error input[type="url"]:focus {
background-color: #522;
border: 1px solid #a04141;
color: #f9cbcb;
}
.ui.green.button,
.ui.green.buttons .button {
background-color: #87ab63;
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
background-color: #a0cc75;
}
.ui.red.button,
.ui.red.buttons .button {
background-color: #7d3434;
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
background-color: #984646;
}
/* invert emojis that are hard to read otherwise */ /* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"], .emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"], .emoji[aria-label="currency exchange"],
@ -271,8 +186,3 @@ a.ui.basic.green.label:hover {
img[src$="/img/matrix.svg"] { img[src$="/img/matrix.svg"] {
filter: invert(80%); filter: invert(80%);
} }
.markup-block-error {
border: 1px solid rgba(121, 71, 66, .5) !important;
border-bottom: none !important;
}