Color cleanup 8 (#7108)
* $accent-color -> $accent Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $notice-primary-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $notice-primary-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-50pct Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $warning-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-darker Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $orange-warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $warning-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $info-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
GitHub
parent
5ad3261cb2
commit
9abb2f5ff4
111 changed files with 271 additions and 306 deletions
|
|
@ -199,7 +199,7 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -210,19 +210,19 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
}
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent !important;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_Dialog_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -217,19 +217,19 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
}
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent !important;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_Dialog_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,6 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI
|
|||
|
||||
// unified palette
|
||||
// try to use these colors when possible
|
||||
$accent-color: #03b381;
|
||||
$accent-bg-color: rgba(3, 179, 129, 0.16);
|
||||
$notice-primary-color: #ff4b55;
|
||||
$notice-primary-bg-color: rgba(255, 75, 85, 0.16);
|
||||
$header-panel-bg-color: #f3f8fd;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
|
|
@ -35,20 +31,12 @@ $focus-bg-color: #dddddd;
|
|||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: #ffffff;
|
||||
$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb
|
||||
$accent-color-darker: #92caad;
|
||||
$accent-color-alt: #238cf5;
|
||||
$accent-alt: #238cf5;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
$focus-brightness: 105%;
|
||||
|
||||
// warning colours
|
||||
$warning-color: $notice-primary-color; // red
|
||||
$orange-warning-color: #ff8d13; // used for true warnings
|
||||
// background colour for warnings
|
||||
$warning-bg-color: #df2a8b;
|
||||
$info-bg-color: #2a9edf;
|
||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// informational plinth
|
||||
|
|
@ -223,7 +211,7 @@ $collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
|
|||
$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
|
||||
$e2e-unknown-color: #e8bf37;
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
|
@ -318,7 +306,7 @@ $groupFilterPanel-divider-color: $tertiary-content;
|
|||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -332,7 +320,7 @@ $groupFilterPanel-divider-color: $tertiary-content;
|
|||
}
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_small {
|
||||
|
|
@ -344,13 +332,13 @@ $groupFilterPanel-divider-color: $tertiary-content;
|
|||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent !important;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_Dialog_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,10 +37,7 @@ $space-nav: rgba($panel-base, 0.1);
|
|||
|
||||
//
|
||||
// --accent-color
|
||||
$accent-color: var(--accent-color);
|
||||
$accent-bg-color: var(--accent-color-15pct);
|
||||
$username-variant3-color: var(--accent-color);
|
||||
$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
|
||||
//
|
||||
// --timeline-background-color
|
||||
$button-secondary-bg-color: var(--timeline-background-color);
|
||||
|
|
@ -112,13 +109,10 @@ $greyed-fg-color: var(--timeline-text-secondary-color);
|
|||
$info-plinth-fg-color: var(--timeline-text-secondary-color);
|
||||
//
|
||||
// --primary-color
|
||||
$accent-color-alt: var(--primary-color);
|
||||
$accent-alt: var(--primary-color);
|
||||
$input-focused-border-color: var(--primary-color);
|
||||
//
|
||||
// --warning-color
|
||||
$warning-color: var(--warning-color);
|
||||
$notice-primary-color: var(--warning-color);
|
||||
$warning-color: var(--warning-color);
|
||||
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
|
||||
//
|
||||
// --username colors (which use a 0-based index)
|
||||
|
|
|
|||
|
|
@ -18,13 +18,11 @@ $username-variant6-color: #1C7274;
|
|||
$username-variant7-color: #5C56F5;
|
||||
$username-variant8-color: #3E810A;
|
||||
|
||||
$accent-color: $accent;
|
||||
$accent-color-50pct: rgba($accent-color, 0.5);
|
||||
$accent-color-alt: $links;
|
||||
$accent-alt: $links;
|
||||
$input-border-color: $secondary-content;
|
||||
$input-darker-bg-color: $quinary-content;
|
||||
$input-darker-fg-color: $secondary-content;
|
||||
$input-focused-border-color: $accent-color;
|
||||
$input-focused-border-color: $accent;
|
||||
$resend-button-divider-color: $input-darker-bg-color;
|
||||
$icon-button-color: $quaternary-content;
|
||||
$theme-button-bg-color: $quinary-content;
|
||||
|
|
@ -36,30 +34,28 @@ $voice-record-stop-border-color: $quinary-content;
|
|||
$voice-record-icon-color: $tertiary-content;
|
||||
$appearance-tab-border-color: $input-darker-bg-color;
|
||||
$eventbubble-reply-color: $quaternary-content;
|
||||
$notice-primary-color: $alert;
|
||||
$warning-color: $notice-primary-color; // red
|
||||
$roomtopic-color: $secondary-content;
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent !important;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_Dialog_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Draw an outline on buttons with focus
|
||||
.mx_AccessibleButton:focus {
|
||||
outline: 2px solid $accent-color;
|
||||
outline: 2px solid $accent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +74,6 @@ $roomtopic-color: $secondary-content;
|
|||
padding-left: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
|
||||
color: $secondary-content;
|
||||
opacity: 1 !important;
|
||||
|
|
|
|||
|
|
@ -33,10 +33,6 @@ $space-nav: rgba($tertiary-content, 0.15);
|
|||
|
||||
// unified palette
|
||||
// try to use these colors when possible
|
||||
$accent-color: $accent;
|
||||
$accent-bg-color: rgba(3, 179, 129, 0.16);
|
||||
$notice-primary-color: $alert;
|
||||
$notice-primary-bg-color: rgba(255, 75, 85, 0.16);
|
||||
$header-panel-bg-color: #f3f8fd;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
|
|
@ -50,20 +46,12 @@ $focus-bg-color: #dddddd;
|
|||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: $background;
|
||||
$accent-color-50pct: rgba($accent-color, 0.5);
|
||||
$accent-color-darker: #92caad;
|
||||
$accent-color-alt: #238CF5;
|
||||
$accent-alt: #238CF5;
|
||||
|
||||
$selection-fg-color: $background;
|
||||
|
||||
$focus-brightness: 105%;
|
||||
|
||||
// warning colours
|
||||
$warning-color: $notice-primary-color; // red
|
||||
$orange-warning-color: #ff8d13; // used for true warnings
|
||||
// background colour for warnings
|
||||
$warning-bg-color: #DF2A8B;
|
||||
$info-bg-color: #2A9EDF;
|
||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// informational plinth
|
||||
|
|
@ -214,7 +202,7 @@ $collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
|
|||
$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
|
||||
$e2e-unknown-color: #e8bf37;
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
|
@ -276,7 +264,7 @@ $tooltip-timeline-fg-color: $background;
|
|||
|
||||
$breadcrumb-placeholder-bg-color: #e8eef5;
|
||||
|
||||
// These two don't change between themes. They are the $warning-color, but we don't
|
||||
// These two don't change between themes. They are the $alert, but we don't
|
||||
// want custom themes to affect them by accident.
|
||||
$voice-record-stop-symbol-color: #ff5b55;
|
||||
$voice-record-live-circle-color: #ff5b55;
|
||||
|
|
@ -311,7 +299,7 @@ $eventbubble-reply-color: $quaternary-content;
|
|||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -325,7 +313,7 @@ $eventbubble-reply-color: $quaternary-content;
|
|||
}
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_small {
|
||||
|
|
@ -337,13 +325,13 @@ $eventbubble-reply-color: $quaternary-content;
|
|||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent !important;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_Dialog_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue