|
| 1 | +//// Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 |
| 2 | +$accent: #268075; |
| 3 | +$alert: #D62C25; |
| 4 | +$notice-primary-color: #D61C25; |
| 5 | +$links: #0A6ECA; |
| 6 | +$secondary-content: #5E6266; |
| 7 | +$tertiary-content: #5E6266; // Same as secondary |
| 8 | +$quaternary-content: #5E6266; // Same as secondary |
| 9 | + |
| 10 | +$username-variant1-color: #0A6ECA; |
| 11 | +$username-variant2-color: #AC3BA8; |
| 12 | +$username-variant3-color: #078662; |
| 13 | +$username-variant4-color: #CC1449; |
| 14 | +$username-variant5-color: #BE4C00; |
| 15 | +$username-variant6-color: #1C7274; |
| 16 | +$username-variant7-color: #5C56F5; |
| 17 | +$username-variant8-color: #3E810A; |
| 18 | + |
| 19 | +$accent-color: $accent; |
| 20 | +$accent-color-50pct: rgba($accent-color, 0.5); |
| 21 | +$input-darker-bg-color: $quinary-content; |
| 22 | +$input-lighter-fg-color: $input-darker-fg-color; |
| 23 | +$input-valid-border-color: $accent-color; |
| 24 | +$button-bg-color: $accent-color; |
| 25 | +$resend-button-divider-color: $input-darker-bg-color; |
| 26 | +$icon-button-color: $quaternary-content; |
| 27 | +$theme-button-bg-color: $quinary-content; |
| 28 | +$presence-online: $accent-color; |
| 29 | +$presence-offline: $quinary-content; |
| 30 | +$pinned-color: $tertiary-content; |
| 31 | +$tab-label-active-bg-color: $accent-color; |
| 32 | +$button-primary-bg-color: $accent-color; |
| 33 | +$button-secondary-bg-color: $accent-fg-color; |
| 34 | +$button-link-fg-color: $accent-color; |
| 35 | +$togglesw-on-color: $accent-color; |
| 36 | +$slider-selection-color: $accent-color; |
| 37 | +$progressbar-fg-color: $accent-color; |
| 38 | +$message-action-bar-fg-color: $primary-content; |
| 39 | +$reaction-row-button-selected-border-color: $accent-color; |
| 40 | +$voice-record-stop-border-color: $quinary-content; |
| 41 | +$voice-record-icon-color: $tertiary-content; |
| 42 | +$appearance-tab-border-color: $input-darker-bg-color; |
| 43 | +$eventbubble-reply-color: $quaternary-content; |
| 44 | +$warning-color: $notice-primary-color; // red |
| 45 | +$pinned-unread-color: $notice-primary-color; |
| 46 | +$button-danger-bg-color: $notice-primary-color; |
| 47 | +$mention-user-pill-bg-color: $warning-color; |
| 48 | +$input-invalid-border-color: $warning-color; |
| 49 | +$event-highlight-fg-color: $warning-color; |
| 50 | + |
| 51 | +@define-mixin mx_DialogButton_danger { |
| 52 | + background-color: $accent-color; |
| 53 | +} |
| 54 | + |
| 55 | +@define-mixin mx_DialogButton_secondary { |
| 56 | + // flip colours for the secondary ones |
| 57 | + font-weight: 600; |
| 58 | + border: 1px solid $accent-color !important; |
| 59 | + color: $accent-color; |
| 60 | + background-color: $button-secondary-bg-color; |
| 61 | +} |
| 62 | + |
| 63 | +@define-mixin mx_Dialog_link { |
| 64 | + color: $accent-color; |
| 65 | + text-decoration: none; |
| 66 | +} |
0 commit comments