mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Deprecate remaining color-signal-blue

Browse source
This commit is contained in:
Josh Perez 2020-03-19 17:41:47 -07:00 • committed by Scott Nonnenberg
parent 8d6cba1b43
commit d7b64cd986
14 changed files with 117 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

4
sticker-creator/app/stages/MetaStage.scss
View file

@ -63,10 +63,10 @@
composes: cover-frame; composes: cover-frame;
@include light-theme() { @include light-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-dark;
} }
} }

4
sticker-creator/components/StickerFrame.scss
View file

@ -33,11 +33,11 @@ $border-width: 1px;
composes: container; composes: container;
@include light-theme() { @include light-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-dark;
} }
} }

8
sticker-creator/elements/Button.scss
View file

@ -34,12 +34,12 @@
composes: base; composes: base;
@include light-theme() { @include light-theme() {
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
color: $color-white; color: $color-white;
} }
@include dark-theme() { @include dark-theme() {
background-color: $color-signal-blue; background-color: $ultramarine-ui-dark;
color: $color-white; color: $color-white;
} }
} }
@ -68,13 +68,13 @@
@include light-theme() { @include light-theme() {
border: none; border: none;
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
color: $color-white; color: $color-white;
} }
@include dark-theme() { @include dark-theme() {
border: none; border: none;
background-color: $color-signal-blue; background-color: $ultramarine-ui-dark;
color: $color-white; color: $color-white;
} }
} }

8
sticker-creator/elements/ConfirmDialog.scss
View file

@ -86,13 +86,13 @@
@include light-theme() { @include light-theme() {
color: $color-white; color: $color-white;
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
background: $color-signal-blue; background: $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
color: $color-white; color: $color-white;
border-color: $color-signal-blue; border-color: $ultramarine-ui-dark;
background: $color-signal-blue; background: $ultramarine-ui-dark;
} }
} }

4
sticker-creator/elements/DropZone.scss
View file

@ -52,10 +52,10 @@
composes: standalone; composes: standalone;
@include light-theme() { @include light-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
border-color: $color-signal-blue; border-color: $ultramarine-ui-dark;
} }
} }

2
sticker-creator/elements/LabeledCheckbox.scss
View file

@ -38,7 +38,7 @@
.checkbox-checked { .checkbox-checked {
composes: checkbox; composes: checkbox;
border: none; border: none;
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
color: $color-white; color: $color-white;
} }

4
sticker-creator/elements/LabeledInput.scss
View file

@ -45,11 +45,11 @@
padding: 0 11px; padding: 0 11px;
@include light-theme() { @include light-theme() {
border: 2px solid $color-signal-blue; border: 2px solid $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
border: 2px solid $color-signal-blue; border: 2px solid $ultramarine-ui-dark;
} }
} }
} }

2
sticker-creator/elements/MessageBubble.scss
View file

@ -1,7 +1,7 @@
@import '../../stylesheets/variables'; @import '../../stylesheets/variables';
.base { .base {
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
padding: 6px 12px; padding: 6px 12px;
border-radius: 16px; border-radius: 16px;
color: $color-white-alpha-90; color: $color-white-alpha-90;

2
sticker-creator/elements/ProgressBar.scss
View file

@ -18,7 +18,7 @@
.bar { .bar {
height: 4px; height: 4px;
width: 0px; width: 0px;
background: $color-signal-blue; background: $ultramarine-ui-light;
transition: width 100ms ease-out; transition: width 100ms ease-out;
} }

2
sticker-creator/elements/Typography.scss
View file

@ -54,7 +54,7 @@
} }
a { a {
color: $color-signal-blue; color: $ultramarine-ui-light;
text-decoration: none; text-decoration: none;
} }
} }

6
stylesheets/_conversation.scss
View file

@ -233,8 +233,8 @@
border-left-style: none; border-left-style: none;
@include ios-theme { @include ios-theme {
background-color: $color-signal-blue-alpha-25; background-color: $ultramarine-ui-light-alpha-25;
border-left-color: $color-signal-blue; border-left-color: $ultramarine-ui-light;
} }
} }
@ -282,7 +282,7 @@
form.active { form.active {
textarea { textarea {
border: solid 1px $color-signal-blue; border: solid 1px $ultramarine-ui-light;
} }
} }

16
stylesheets/_global.scss
View file

@ -142,7 +142,7 @@ button.grey {
} }
a { a {
color: $color-signal-blue; color: $ultramarine-ui-light;
} }
.file-input { .file-input {
@ -314,7 +314,7 @@ $loading-height: 16px;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: $color-ultramarine-brand-light; background-color: $ultramarine-brand-light;
color: $color-white; color: $color-white;
display: flex; display: flex;
align-items: center; align-items: center;
@ -369,7 +369,7 @@ $loading-height: 16px;
color: $color-black; color: $color-black;
a { a {
color: $color-signal-blue; color: $ultramarine-ui-light;
} }
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
@ -388,7 +388,7 @@ $loading-height: 16px;
input { input {
margin-top: 1em; margin-top: 1em;
font-size: 12pt; font-size: 12pt;
border: 2px solid $color-signal-blue; border: 2px solid $ultramarine-ui-light;
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
width: 20em; width: 20em;
@ -406,7 +406,7 @@ $loading-height: 16px;
display: inline-block; display: inline-block;
&.ready { &.ready {
border: 5px solid $color-signal-blue; border: 5px solid $ultramarine-ui-light;
box-shadow: 2px 2px 4px $color-black-alpha-40; box-shadow: 2px 2px 4px $color-black-alpha-40;
} }
@ -425,7 +425,7 @@ $loading-height: 16px;
.dot { .dot {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 3px solid $color-signal-blue; border: 3px solid $ultramarine-ui-light;
border-radius: 50%; border-radius: 50%;
float: left; float: left;
margin: 0 6px; margin: 0 6px;
@ -593,7 +593,7 @@ $loading-height: 16px;
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
color: $color-white; color: $color-white;
background: $color-signal-blue; background: $ultramarine-ui-light;
box-shadow: 2px 2px 4px $color-black-alpha-40; box-shadow: 2px 2px 4px $color-black-alpha-40;
font-size: 12pt; font-size: 12pt;
@ -615,7 +615,7 @@ $loading-height: 16px;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
margin: 0.5em; margin: 0.5em;
color: $color-signal-blue; color: $ultramarine-ui-light;
} }
.progress { .progress {

150
stylesheets/_modules.scss
View file

@ -25,7 +25,7 @@
} }
&.module-logo-blue { &.module-logo-blue {
background-color: $color-ultramarine-brand-light; background-color: $ultramarine-brand-light;
} }
} }
@ -321,7 +321,7 @@
} }
.module-message:focus .module-message__container { .module-message:focus .module-message__container {
@include keyboard-mode { @include keyboard-mode {
box-shadow: 0 0 0 3px $color-signal-blue; box-shadow: 0 0 0 3px $ultramarine-ui-light;
} }
} }
@ -330,10 +330,10 @@
box-shadow: 0 0 0 5px transparent; box-shadow: 0 0 0 5px transparent;
} }
10% { 10% {
box-shadow: 0 0 0 5px $color-signal-blue; box-shadow: 0 0 0 5px $ultramarine-ui-light;
} }
70% { 70% {
box-shadow: 0 0 0 5px $color-signal-blue; box-shadow: 0 0 0 5px $ultramarine-ui-light;
} }
100% { 100% {
box-shadow: 0 0 0 5px transparent; box-shadow: 0 0 0 5px transparent;
@ -371,11 +371,11 @@
background-color: $color-gray-75; background-color: $color-gray-75;
} }
@include ios-theme { @include ios-theme {
background-color: $color-ultramarine-ui-light; background-color: $ultramarine-ui-light;
color: $color-white; color: $color-white;
} }
@include ios-dark-theme { @include ios-dark-theme {
background-color: $color-ultramarine-ui-light; background-color: $ultramarine-ui-light;
color: $color-gray-05; color: $color-gray-05;
} }
} }
@ -688,7 +688,7 @@
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -848,7 +848,7 @@
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -1336,19 +1336,19 @@
border-bottom-right-radius: 16px; border-bottom-right-radius: 16px;
@include light-theme { @include light-theme {
color: $color-signal-blue; color: $ultramarine-ui-light;
background-color: $color-gray-02; background-color: $color-gray-02;
border: 1px solid $color-black-alpha-20; border: 1px solid $color-black-alpha-20;
} }
@include dark-theme { @include dark-theme {
color: $color-signal-blue; color: $ultramarine-ui-dark;
background-color: $color-gray-75; background-color: $color-gray-75;
border: 1px solid $color-gray-45; border: 1px solid $color-gray-45;
} }
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -1428,7 +1428,7 @@
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
@ -1590,7 +1590,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -1668,12 +1668,12 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
// Note: both of these override all of the specific color classes below // Note: both of these override all of the specific color classes below
@include ios-theme { @include ios-theme {
background-color: $color-signal-blue-alpha-25; background-color: $ultramarine-ui-light-alpha-25;
border-left-color: $color-signal-blue; border-left-color: $ultramarine-ui-light;
} }
@include ios-dark-theme { @include ios-dark-theme {
background-color: $color-conversation-blue-shade; background-color: $color-conversation-blue-shade;
border-left-color: $color-signal-blue; border-left-color: $ultramarine-ui-dark;
} }
} }
@each $color, $value in $conversation-colors-tint { @each $color, $value in $conversation-colors-tint {
@ -1816,7 +1816,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus-within { &:focus-within {
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
} }
} }
} }
@ -1880,25 +1880,25 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
} }
.module-quote__icon-container__icon--file { .module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', $color-signal-blue); @include color-svg('../images/file.svg', $ultramarine-ui-light);
} }
.module-quote__icon-container__icon--image { .module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', $color-signal-blue); @include color-svg('../images/image.svg', $ultramarine-ui-light);
} }
.module-quote__icon-container__icon--microphone { .module-quote__icon-container__icon--microphone {
@include color-svg( @include color-svg(
'../images/icons/v2/mic-outline-24.svg', '../images/icons/v2/mic-outline-24.svg',
$color-signal-blue $ultramarine-ui-light
); );
} }
.module-quote__icon-container__icon--play { .module-quote__icon-container__icon--play {
@include color-svg( @include color-svg(
'../images/icons/v2/play-solid-24.svg', '../images/icons/v2/play-solid-24.svg',
$color-signal-blue $ultramarine-ui-light
); );
} }
.module-quote__icon-container__icon--movie { .module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', $color-signal-blue); @include color-svg('../images/movie.svg', $ultramarine-ui-light);
} }
.module-quote__generic-file { .module-quote__generic-file {
@ -1957,7 +1957,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
background-color: $color-white-alpha-20; background-color: $color-white-alpha-20;
} }
@include ios-theme { @include ios-theme {
background-color: $color-signal-blue-tint-alpha-50; background-color: $ultramarine-ui-light-tint-alpha-50;
} }
@include ios-dark-theme { @include ios-dark-theme {
background-color: $color-white-alpha-40; background-color: $color-white-alpha-40;
@ -1967,7 +1967,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
.module-quote__reference-warning--incoming { .module-quote__reference-warning--incoming {
@include ios-dark-theme { @include ios-dark-theme {
color: $color-gray-15; color: $color-gray-15;
background-color: $color-signal-blue-alpha-50; background-color: $ultramarine-ui-light-alpha-50;
} }
} }
@ -2028,7 +2028,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -2151,7 +2151,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include button-reset; @include button-reset;
border-radius: 4px; border-radius: 4px;
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
display: inline-block; display: inline-block;
padding: 6px; padding: 6px;
margin-top: 20px; margin-top: 20px;
@ -2314,7 +2314,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
padding: 12px; padding: 12px;
border-radius: 4px; border-radius: 4px;
color: $color-signal-blue; color: $ultramarine-ui-light;
@include light-theme { @include light-theme {
background-color: $color-gray-02; background-color: $color-gray-02;
@ -2998,7 +2998,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
} }
.module-media-gallery__tab--active { .module-media-gallery__tab--active {
border-bottom: 2px solid $color-signal-blue; border-bottom: 2px solid $ultramarine-ui-light;
} }
.module-media-gallery__content { .module-media-gallery__content {
@ -3060,7 +3060,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -3107,7 +3107,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -3160,7 +3160,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
width: 24px; width: 24px;
@include color-svg( @include color-svg(
'../images/icons/v2/play-solid-24.svg', '../images/icons/v2/play-solid-24.svg',
$color-signal-blue $ultramarine-ui-light
); );
} }
@ -3213,11 +3213,11 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
padding-left: 12px; padding-left: 12px;
@include light-theme { @include light-theme {
border-left: 4px solid $color-ultramarine-ui-light; border-left: 4px solid $ultramarine-ui-light;
} }
@include dark-theme { @include dark-theme {
border-left: 4px solid $color-ultramarine-ui-dark; border-left: 4px solid $ultramarine-ui-dark;
} }
} }
@ -3256,11 +3256,11 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
color: $color-white; color: $color-white;
@include light-theme { @include light-theme {
background-color: $color-ultramarine-ui-light; background-color: $ultramarine-ui-light;
box-shadow: 0px 0px 0px 1px $color-gray-02; box-shadow: 0px 0px 0px 1px $color-gray-02;
} }
@include dark-theme { @include dark-theme {
background-color: $color-ultramarine-ui-dark; background-color: $ultramarine-ui-dark;
box-shadow: 0px 0px 0px 1px $color-gray-90; box-shadow: 0px 0px 0px 1px $color-gray-90;
} }
} }
@ -3467,7 +3467,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
} }
@ -3683,7 +3683,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
} }
.module-avatar--signal-blue { .module-avatar--signal-blue {
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
} }
@each $color, $value in $conversation-colors { @each $color, $value in $conversation-colors {
@ -3749,7 +3749,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
} }
&:focus { &:focus {
border: solid 1px $color-signal-blue; border: solid 1px $ultramarine-ui-light;
outline: none; outline: none;
} }
} }
@ -3810,7 +3810,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
width: 16px; width: 16px;
border-radius: 8px; border-radius: 8px;
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
} }
.module-main-header__search__in-conversation-pill__avatar { .module-main-header__search__in-conversation-pill__avatar {
height: 16px; height: 16px;
@ -3954,13 +3954,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
right: 1px; right: 1px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 0 3px $color-signal-blue; box-shadow: 0 0 0 3px $ultramarine-ui-light;
} }
} }
button.module-image__border-overlay:focus { button.module-image__border-overlay:focus {
@include keyboard-mode { @include keyboard-mode {
box-shadow: inset 0px 0px 0px 2px $color-signal-blue; box-shadow: inset 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
@ -4036,7 +4036,7 @@ button.module-image__border-overlay:focus {
width: 24px; width: 24px;
@include color-svg( @include color-svg(
'../images/icons/v2/play-solid-24.svg', '../images/icons/v2/play-solid-24.svg',
$color-signal-blue $ultramarine-ui-light
); );
} }
@ -4069,7 +4069,7 @@ button.module-image__border-overlay:focus {
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-signal-blue; outline: 2px solid $ultramarine-ui-light;
} }
} }
} }
@ -4227,7 +4227,7 @@ button.module-image__border-overlay:focus {
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
@include color-svg('../images/icons/v2/x-24.svg', $color-signal-blue); @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light);
} }
} }
} }
@ -4434,7 +4434,7 @@ button.module-image__border-overlay:focus {
color: $color-white-alpha-80; color: $color-white-alpha-80;
} }
&:focus { &:focus {
border: 1px solid $color-signal-blue; border: 1px solid $ultramarine-ui-light;
outline: none; outline: none;
} }
} }
@ -4443,7 +4443,7 @@ button.module-image__border-overlay:focus {
@include button-reset; @include button-reset;
position: absolute; position: absolute;
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
color: $color-white; color: $color-white;
height: 28px; height: 28px;
@ -4479,7 +4479,7 @@ button.module-image__border-overlay:focus {
} }
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: inset 0 0 0 2px $color-signal-blue; box-shadow: inset 0 0 0 2px $ultramarine-ui-light;
} }
} }
@ -4492,7 +4492,7 @@ button.module-image__border-overlay:focus {
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
&:focus { &:focus {
box-shadow: inset 0 0 0 2px $color-signal-blue; box-shadow: inset 0 0 0 2px $ultramarine-ui-light;
} }
} }
} }
@ -4591,7 +4591,7 @@ button.module-image__border-overlay:focus {
} }
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
@include color-svg('../images/icons/v2/x-24.svg', $color-signal-blue); @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light);
} }
} }
@ -4600,7 +4600,7 @@ button.module-image__border-overlay:focus {
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
&:focus { &:focus {
@include color-svg('../images/icons/v2/x-24.svg', $color-signal-blue); @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark);
} }
} }
} }
@ -4979,7 +4979,7 @@ button.module-image__border-overlay:focus {
} }
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
@ -5140,7 +5140,7 @@ button.module-image__border-overlay:focus {
display: block; display: block;
width: 4px; width: 4px;
height: 4px; height: 4px;
background: $color-signal-blue; background: $ultramarine-ui-light;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
@ -5218,7 +5218,7 @@ button.module-image__border-overlay:focus {
&:focus { &:focus {
@include color-svg( @include color-svg(
'../images/icons/v2/chevron-left-24.svg', '../images/icons/v2/chevron-left-24.svg',
$color-signal-blue $ultramarine-ui-light
); );
} }
} }
@ -5233,7 +5233,7 @@ button.module-image__border-overlay:focus {
&:hover { &:hover {
@include color-svg( @include color-svg(
'../images/icons/v2/chevron-left-24.svg', '../images/icons/v2/chevron-left-24.svg',
$color-signal-blue $ultramarine-ui-dark
); );
} }
} }
@ -5630,7 +5630,7 @@ button.module-image__border-overlay:focus {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 7px; border-radius: 7px;
background: $color-signal-blue; background: $ultramarine-ui-light;
} }
} }
} }
@ -5741,11 +5741,11 @@ button.module-image__border-overlay:focus {
&--hint { &--hint {
@include light-theme() { @include light-theme() {
color: $color-signal-blue; color: $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
color: $color-signal-blue; color: $ultramarine-ui-dark;
} }
} }
@ -5868,7 +5868,7 @@ button.module-image__border-overlay:focus {
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 2px $color-signal-blue; box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
} }
} }
@ -5972,11 +5972,11 @@ button.module-image__border-overlay:focus {
&--blue { &--blue {
@include light-theme { @include light-theme {
background: $color-signal-blue; background: $ultramarine-ui-light;
color: $color-white; color: $color-white;
} }
@include dark-theme { @include dark-theme {
background: $color-signal-blue; background: $ultramarine-ui-dark;
color: $color-white; color: $color-white;
} }
} }
@ -6507,13 +6507,13 @@ button.module-image__border-overlay:focus {
&:focus { &:focus {
@include keyboard-mode { @include keyboard-mode {
box-shadow: 0 0 0 3px $color-signal-blue; box-shadow: 0 0 0 3px $ultramarine-ui-light;
} }
} }
&:hover { &:hover {
@include mouse-mode { @include mouse-mode {
box-shadow: 0 0 0 3px $color-signal-blue; box-shadow: 0 0 0 3px $ultramarine-ui-light;
} }
} }
} }
@ -6612,7 +6612,7 @@ button.module-image__border-overlay:focus {
border-color: $color-gray-60; border-color: $color-gray-60;
&:focus { &:focus {
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
} }
&:placeholder { &:placeholder {
@ -6626,7 +6626,7 @@ button.module-image__border-overlay:focus {
color: $color-gray-05; color: $color-gray-05;
&:focus { &:focus {
border-color: $color-signal-blue; border-color: $ultramarine-ui-light;
} }
&:placeholder { &:placeholder {
@ -6977,11 +6977,11 @@ button.module-image__border-overlay:focus {
border-radius: 4px; border-radius: 4px;
@include light-theme { @include light-theme {
color: $color-signal-blue; color: $ultramarine-ui-light;
background-color: $color-gray-02; background-color: $color-gray-02;
} }
@include dark-theme { @include dark-theme {
color: $color-signal-blue; color: $ultramarine-ui-dark;
background-color: $color-gray-75; background-color: $color-gray-75;
} }
} }
@ -7080,11 +7080,11 @@ button.module-image__border-overlay:focus {
&:focus-within { &:focus-within {
@include light-theme() { @include light-theme() {
border: 1px solid $color-signal-blue; border: 1px solid $ultramarine-ui-light;
} }
@include dark-theme() { @include dark-theme() {
border: 1px solid $color-signal-blue; border: 1px solid $ultramarine-ui-light;
} }
} }
} }
@ -7204,7 +7204,10 @@ button.module-image__border-overlay:focus {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
@include color-svg('../images/icons/v2/send-24.svg', $color-signal-blue); @include color-svg(
'../images/icons/v2/send-24.svg',
$ultramarine-ui-light
);
} }
} }
&__input { &__input {
@ -7350,7 +7353,7 @@ button.module-image__border-overlay:focus {
} }
.module-scroll-down__button--new-messages { .module-scroll-down__button--new-messages {
background-color: $color-signal-blue; background-color: $ultramarine-ui-light;
&:hover { &:hover {
background-color: $color-ios-blue-shade; background-color: $color-ios-blue-shade;
@ -7594,10 +7597,13 @@ button.module-image__border-overlay:focus {
@include keyboard-mode { @include keyboard-mode {
&:focus { &:focus {
@include light-theme { @include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-signal-blue); @include color-svg(
'../images/icons/v2/x-24.svg',
$ultramarine-ui-light
);
} }
@include dark-theme { @include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-signal-blue); @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark);
} }
} }
} }

17
stylesheets/_variables.scss
View file

@ -4,8 +4,6 @@ $inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
// -- V3 Colors // -- V3 Colors
$color-signal-blue: #2090ea;
$color-accent-blue: #2c6bed; $color-accent-blue: #2c6bed;
$color-accent-green: #4caf50; $color-accent-green: #4caf50;
$color-accent-red: #f44336; $color-accent-red: #f44336;
@ -35,10 +33,11 @@ $color-black-alpha-20: rgba($color-black, 0.2);
$color-black-alpha-40: rgba($color-black, 0.4); $color-black-alpha-40: rgba($color-black, 0.4);
$color-black-alpha-60: rgba($color-black, 0.6); $color-black-alpha-60: rgba($color-black, 0.6);
$color-ultramarine-brand-light: #3a76f0; $ultramarine-brand-light: #3a76f0;
$color-ultramarine-brand-dark: #1851b4; $ultramarine-brand-dark: #1851b4;
$color-ultramarine-ui-light: #2c6bed; $ultramarine-ui-light: #2c6bed;
$color-ultramarine-ui-dark: #6191f3; $ultramarine-ui-dark: #6191f3;
$color-crimson: #cc163d; $color-crimson: #cc163d;
$color-vermilion: #c73800; $color-vermilion: #c73800;
$color-burlap: #746c53; $color-burlap: #746c53;
@ -178,9 +177,9 @@ $color-white-alpha-40: rgba($color-white, 0.4);
$color-deep-red: #ff261f; $color-deep-red: #ff261f;
// Used in iOS quote composition and reference warnings // Used in iOS quote composition and reference warnings
$color-signal-blue-alpha-25: rgba($color-signal-blue, 0.25); $ultramarine-ui-light-alpha-25: rgba($ultramarine-ui-light, 0.25);
$color-signal-blue-alpha-50: rgba($color-signal-blue, 0.5); $ultramarine-ui-light-alpha-50: rgba($ultramarine-ui-light, 0.5);
$color-signal-blue-tint-alpha-50: rgba($color-ios-blue-tint, 0.5); $ultramarine-ui-light-tint-alpha-50: rgba($color-ios-blue-tint, 0.5);
// -- A few layout variables used cross-file // -- A few layout variables used cross-file