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
GitHub
parent
3bd05172d5
commit
06a7ed4e04
3 changed files with 370 additions and 121 deletions
|
|
@ -79,7 +79,6 @@
|
|||
--color-pink: #e03997;
|
||||
--color-brown: #a5673f;
|
||||
--color-grey: #888888;
|
||||
--color-gold: #a1882b;
|
||||
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
|
||||
--color-red-light: #e45e5e;
|
||||
--color-orange-light: #f59555;
|
||||
|
|
@ -93,8 +92,8 @@
|
|||
--color-pink-light: #e86bb1;
|
||||
--color-brown-light: #c58b66;
|
||||
--color-grey-light: #a6a6a6;
|
||||
--color-gold-light: #cfb34a;
|
||||
/* other colors */
|
||||
--color-gold: #a1882b;
|
||||
--color-black: #1b1c1d;
|
||||
--color-white: #ffffff;
|
||||
--color-diff-removed-word-bg: #fdb8c0;
|
||||
|
|
@ -314,6 +313,299 @@ a.commit-statuses-trigger {
|
|||
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 {
|
||||
background: var(--color-body);
|
||||
border-color: var(--color-secondary);
|
||||
|
|
@ -958,6 +1250,52 @@ a.ui.card:hover,
|
|||
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 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -540,6 +540,7 @@
|
|||
}
|
||||
|
||||
.markup-block-error {
|
||||
border: 1px solid var(--color-error-border) !important;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -56,18 +56,32 @@
|
|||
--color-secondary-alpha-80: #454a57cc;
|
||||
--color-secondary-alpha-90: #454a57e1;
|
||||
/* colors */
|
||||
--color-red: #db2828;
|
||||
--color-orange: #f2711c;
|
||||
--color-yellow: #fbbd08;
|
||||
--color-olive: #b5cc18;
|
||||
--color-green: #21ba45;
|
||||
--color-teal: #00b5ad;
|
||||
--color-blue: #2185d0;
|
||||
--color-violet: #6435c9;
|
||||
--color-purple: #a333c8;
|
||||
--color-pink: #e03997;
|
||||
--color-brown: #a5673f;
|
||||
--color-grey: #767a85;
|
||||
--color-red: #7d3434;
|
||||
--color-orange: #cc580c;
|
||||
--color-yellow: #cc9903;
|
||||
--color-olive: #91a313;
|
||||
--color-green: #87ab63;
|
||||
--color-teal: #00918a;
|
||||
--color-blue: #1a6aa6;
|
||||
--color-violet: #502aa1;
|
||||
--color-purple: #8229a0;
|
||||
--color-pink: #c21e7b;
|
||||
--color-brown: #845232;
|
||||
--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-gold: #a1882b;
|
||||
--color-white: #ffffff;
|
||||
|
|
@ -80,9 +94,9 @@
|
|||
--color-diff-moved-row-border: #bcca6f;
|
||||
--color-diff-added-row-border: #314a37;
|
||||
--color-diff-inactive: #353846;
|
||||
--color-error-border: #a53a37;
|
||||
--color-error-bg: #482c2c;
|
||||
--color-error-text: #ff4433;
|
||||
--color-error-border: #a04141;
|
||||
--color-error-bg: #522;
|
||||
--color-error-text: #f9cbcb;
|
||||
--color-success-border: #458a57;
|
||||
--color-success-bg: #284034;
|
||||
--color-success-text: #6cc664;
|
||||
|
|
@ -145,105 +159,6 @@
|
|||
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 */
|
||||
.emoji[aria-label="check mark"],
|
||||
.emoji[aria-label="currency exchange"],
|
||||
|
|
@ -271,8 +186,3 @@ a.ui.basic.green.label:hover {
|
|||
img[src$="/img/matrix.svg"] {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
.markup-block-error {
|
||||
border: 1px solid rgba(121, 71, 66, .5) !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue