Deprecate remaining color-signal-blue

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

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

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

View file

@ -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;
}
}
}

View file

@ -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;

View file

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

View file

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

View file

@ -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;
}
}

View file

@ -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 {

View file

@ -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);
}
}
}

View file

@ -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