Deprecate remaining color-signal-blue
This commit is contained in:
parent
8d6cba1b43
commit
d7b64cd986
14 changed files with 117 additions and 112 deletions
|
@ -63,10 +63,10 @@
|
|||
composes: cover-frame;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -33,11 +33,11 @@ $border-width: 1px;
|
|||
composes: container;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -34,12 +34,12 @@
|
|||
composes: base;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
@ -68,13 +68,13 @@
|
|||
|
||||
@include light-theme() {
|
||||
border: none;
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: none;
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -86,13 +86,13 @@
|
|||
|
||||
@include light-theme() {
|
||||
color: $color-white;
|
||||
border-color: $color-signal-blue;
|
||||
background: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
background: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
border-color: $color-signal-blue;
|
||||
background: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-dark;
|
||||
background: $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -52,10 +52,10 @@
|
|||
composes: standalone;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
.checkbox-checked {
|
||||
composes: checkbox;
|
||||
border: none;
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
|
|
|
@ -45,11 +45,11 @@
|
|||
padding: 0 11px;
|
||||
|
||||
@include light-theme() {
|
||||
border: 2px solid $color-signal-blue;
|
||||
border: 2px solid $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 2px solid $color-signal-blue;
|
||||
border: 2px solid $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../stylesheets/variables';
|
||||
|
||||
.base {
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
color: $color-white-alpha-90;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
.bar {
|
||||
height: 4px;
|
||||
width: 0px;
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-light;
|
||||
|
||||
transition: width 100ms ease-out;
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -233,8 +233,8 @@
|
|||
|
||||
border-left-style: none;
|
||||
@include ios-theme {
|
||||
background-color: $color-signal-blue-alpha-25;
|
||||
border-left-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light-alpha-25;
|
||||
border-left-color: $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -282,7 +282,7 @@
|
|||
|
||||
form.active {
|
||||
textarea {
|
||||
border: solid 1px $color-signal-blue;
|
||||
border: solid 1px $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -142,7 +142,7 @@ button.grey {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
|
@ -314,7 +314,7 @@ $loading-height: 16px;
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: $color-ultramarine-brand-light;
|
||||
background-color: $ultramarine-brand-light;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -369,7 +369,7 @@ $loading-height: 16px;
|
|||
|
||||
color: $color-black;
|
||||
a {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
}
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
|
@ -388,7 +388,7 @@ $loading-height: 16px;
|
|||
input {
|
||||
margin-top: 1em;
|
||||
font-size: 12pt;
|
||||
border: 2px solid $color-signal-blue;
|
||||
border: 2px solid $ultramarine-ui-light;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
width: 20em;
|
||||
|
@ -406,7 +406,7 @@ $loading-height: 16px;
|
|||
display: inline-block;
|
||||
|
||||
&.ready {
|
||||
border: 5px solid $color-signal-blue;
|
||||
border: 5px solid $ultramarine-ui-light;
|
||||
box-shadow: 2px 2px 4px $color-black-alpha-40;
|
||||
}
|
||||
|
||||
|
@ -425,7 +425,7 @@ $loading-height: 16px;
|
|||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 3px solid $color-signal-blue;
|
||||
border: 3px solid $ultramarine-ui-light;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin: 0 6px;
|
||||
|
@ -593,7 +593,7 @@ $loading-height: 16px;
|
|||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
color: $color-white;
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-light;
|
||||
box-shadow: 2px 2px 4px $color-black-alpha-40;
|
||||
|
||||
font-size: 12pt;
|
||||
|
@ -615,7 +615,7 @@ $loading-height: 16px;
|
|||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
margin: 0.5em;
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
&.module-logo-blue {
|
||||
background-color: $color-ultramarine-brand-light;
|
||||
background-color: $ultramarine-brand-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -321,7 +321,7 @@
|
|||
}
|
||||
.module-message:focus .module-message__container {
|
||||
@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;
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0 0 0 5px $color-signal-blue;
|
||||
box-shadow: 0 0 0 5px $ultramarine-ui-light;
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 5px $color-signal-blue;
|
||||
box-shadow: 0 0 0 5px $ultramarine-ui-light;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 5px transparent;
|
||||
|
@ -371,11 +371,11 @@
|
|||
background-color: $color-gray-75;
|
||||
}
|
||||
@include ios-theme {
|
||||
background-color: $color-ultramarine-ui-light;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
}
|
||||
@include ios-dark-theme {
|
||||
background-color: $color-ultramarine-ui-light;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
@ -688,7 +688,7 @@
|
|||
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
&: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;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
background-color: $color-gray-02;
|
||||
border: 1px solid $color-black-alpha-20;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-dark;
|
||||
background-color: $color-gray-75;
|
||||
border: 1px solid $color-gray-45;
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
&: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 {
|
||||
&: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
|
||||
@include ios-theme {
|
||||
background-color: $color-signal-blue-alpha-25;
|
||||
border-left-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light-alpha-25;
|
||||
border-left-color: $ultramarine-ui-light;
|
||||
}
|
||||
@include ios-dark-theme {
|
||||
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 {
|
||||
|
@ -1816,7 +1816,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
@include color-svg('../images/file.svg', $color-signal-blue);
|
||||
@include color-svg('../images/file.svg', $ultramarine-ui-light);
|
||||
}
|
||||
.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 {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/mic-outline-24.svg',
|
||||
$color-signal-blue
|
||||
$ultramarine-ui-light
|
||||
);
|
||||
}
|
||||
.module-quote__icon-container__icon--play {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/play-solid-24.svg',
|
||||
$color-signal-blue
|
||||
$ultramarine-ui-light
|
||||
);
|
||||
}
|
||||
.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 {
|
||||
|
@ -1957,7 +1957,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
background-color: $color-white-alpha-20;
|
||||
}
|
||||
@include ios-theme {
|
||||
background-color: $color-signal-blue-tint-alpha-50;
|
||||
background-color: $ultramarine-ui-light-tint-alpha-50;
|
||||
}
|
||||
@include ios-dark-theme {
|
||||
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 {
|
||||
@include ios-dark-theme {
|
||||
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 {
|
||||
&: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;
|
||||
|
||||
border-radius: 4px;
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
margin-top: 20px;
|
||||
|
@ -2314,7 +2314,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
|
||||
@include light-theme {
|
||||
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 {
|
||||
border-bottom: 2px solid $color-signal-blue;
|
||||
border-bottom: 2px solid $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
.module-media-gallery__content {
|
||||
|
@ -3060,7 +3060,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
&: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;
|
||||
@include color-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;
|
||||
|
||||
@include light-theme {
|
||||
border-left: 4px solid $color-ultramarine-ui-light;
|
||||
border-left: 4px solid $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-ultramarine-ui-light;
|
||||
background-color: $ultramarine-ui-light;
|
||||
box-shadow: 0px 0px 0px 1px $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-ultramarine-ui-dark;
|
||||
background-color: $ultramarine-ui-dark;
|
||||
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 {
|
||||
&: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 {
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@each $color, $value in $conversation-colors {
|
||||
|
@ -3749,7 +3749,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
}
|
||||
|
||||
&:focus {
|
||||
border: solid 1px $color-signal-blue;
|
||||
border: solid 1px $ultramarine-ui-light;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
@ -3810,7 +3810,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
width: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
}
|
||||
.module-main-header__search__in-conversation-pill__avatar {
|
||||
height: 16px;
|
||||
|
@ -3954,13 +3954,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
right: 1px;
|
||||
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 {
|
||||
@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;
|
||||
@include color-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 {
|
||||
&: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 {
|
||||
&: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;
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid $color-signal-blue;
|
||||
border: 1px solid $ultramarine-ui-light;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
@ -4443,7 +4443,7 @@ button.module-image__border-overlay:focus {
|
|||
@include button-reset;
|
||||
|
||||
position: absolute;
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
|
||||
height: 28px;
|
||||
|
@ -4479,7 +4479,7 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
&: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 {
|
||||
&: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 {
|
||||
&: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 {
|
||||
&: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;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-light;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
|
@ -5218,7 +5218,7 @@ button.module-image__border-overlay:focus {
|
|||
&:focus {
|
||||
@include color-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 {
|
||||
@include color-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;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5741,11 +5741,11 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&--hint {
|
||||
@include light-theme() {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -5868,7 +5868,7 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
@include keyboard-mode {
|
||||
&: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 {
|
||||
@include light-theme {
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-light;
|
||||
color: $color-white;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-signal-blue;
|
||||
background: $ultramarine-ui-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
@ -6507,13 +6507,13 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&:focus {
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 3px $color-signal-blue;
|
||||
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@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;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
&:placeholder {
|
||||
|
@ -6626,7 +6626,7 @@ button.module-image__border-overlay:focus {
|
|||
color: $color-gray-05;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-signal-blue;
|
||||
border-color: $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
&:placeholder {
|
||||
|
@ -6977,11 +6977,11 @@ button.module-image__border-overlay:focus {
|
|||
border-radius: 4px;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-light;
|
||||
background-color: $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-signal-blue;
|
||||
color: $ultramarine-ui-dark;
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
}
|
||||
|
@ -7080,11 +7080,11 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&:focus-within {
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-signal-blue;
|
||||
border: 1px solid $ultramarine-ui-light;
|
||||
}
|
||||
|
||||
@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;
|
||||
height: 24px;
|
||||
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 {
|
||||
|
@ -7350,7 +7353,7 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
|
||||
.module-scroll-down__button--new-messages {
|
||||
background-color: $color-signal-blue;
|
||||
background-color: $ultramarine-ui-light;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-ios-blue-shade;
|
||||
|
@ -7594,10 +7597,13 @@ button.module-image__border-overlay:focus {
|
|||
@include keyboard-mode {
|
||||
&:focus {
|
||||
@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 color-svg('../images/icons/v2/x-24.svg', $color-signal-blue);
|
||||
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,8 +4,6 @@ $inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
|
|||
|
||||
// -- V3 Colors
|
||||
|
||||
$color-signal-blue: #2090ea;
|
||||
|
||||
$color-accent-blue: #2c6bed;
|
||||
$color-accent-green: #4caf50;
|
||||
$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-60: rgba($color-black, 0.6);
|
||||
|
||||
$color-ultramarine-brand-light: #3a76f0;
|
||||
$color-ultramarine-brand-dark: #1851b4;
|
||||
$color-ultramarine-ui-light: #2c6bed;
|
||||
$color-ultramarine-ui-dark: #6191f3;
|
||||
$ultramarine-brand-light: #3a76f0;
|
||||
$ultramarine-brand-dark: #1851b4;
|
||||
$ultramarine-ui-light: #2c6bed;
|
||||
$ultramarine-ui-dark: #6191f3;
|
||||
|
||||
$color-crimson: #cc163d;
|
||||
$color-vermilion: #c73800;
|
||||
$color-burlap: #746c53;
|
||||
|
@ -178,9 +177,9 @@ $color-white-alpha-40: rgba($color-white, 0.4);
|
|||
$color-deep-red: #ff261f;
|
||||
|
||||
// Used in iOS quote composition and reference warnings
|
||||
$color-signal-blue-alpha-25: rgba($color-signal-blue, 0.25);
|
||||
$color-signal-blue-alpha-50: rgba($color-signal-blue, 0.5);
|
||||
$color-signal-blue-tint-alpha-50: rgba($color-ios-blue-tint, 0.5);
|
||||
$ultramarine-ui-light-alpha-25: rgba($ultramarine-ui-light, 0.25);
|
||||
$ultramarine-ui-light-alpha-50: rgba($ultramarine-ui-light, 0.5);
|
||||
$ultramarine-ui-light-tint-alpha-50: rgba($color-ios-blue-tint, 0.5);
|
||||
|
||||
// -- A few layout variables used cross-file
|
||||
|
||||
|
|
Loading…
Reference in a new issue