diff --git a/sticker-creator/app/stages/MetaStage.scss b/sticker-creator/app/stages/MetaStage.scss index ad75b958107..1ad7f49205e 100644 --- a/sticker-creator/app/stages/MetaStage.scss +++ b/sticker-creator/app/stages/MetaStage.scss @@ -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; } } diff --git a/sticker-creator/components/StickerFrame.scss b/sticker-creator/components/StickerFrame.scss index 4a33feb3b19..6dae4ef0d5c 100644 --- a/sticker-creator/components/StickerFrame.scss +++ b/sticker-creator/components/StickerFrame.scss @@ -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; } } diff --git a/sticker-creator/elements/Button.scss b/sticker-creator/elements/Button.scss index 499e4fd7004..1c75e0d5025 100644 --- a/sticker-creator/elements/Button.scss +++ b/sticker-creator/elements/Button.scss @@ -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; } } diff --git a/sticker-creator/elements/ConfirmDialog.scss b/sticker-creator/elements/ConfirmDialog.scss index 5f3147936db..c1262585d26 100644 --- a/sticker-creator/elements/ConfirmDialog.scss +++ b/sticker-creator/elements/ConfirmDialog.scss @@ -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; } } diff --git a/sticker-creator/elements/DropZone.scss b/sticker-creator/elements/DropZone.scss index b1ef44ee271..3a8a2db4ea5 100644 --- a/sticker-creator/elements/DropZone.scss +++ b/sticker-creator/elements/DropZone.scss @@ -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; } } diff --git a/sticker-creator/elements/LabeledCheckbox.scss b/sticker-creator/elements/LabeledCheckbox.scss index 100e7c5ce7f..a44357b4830 100644 --- a/sticker-creator/elements/LabeledCheckbox.scss +++ b/sticker-creator/elements/LabeledCheckbox.scss @@ -38,7 +38,7 @@ .checkbox-checked { composes: checkbox; border: none; - background-color: $color-signal-blue; + background-color: $ultramarine-ui-light; color: $color-white; } diff --git a/sticker-creator/elements/LabeledInput.scss b/sticker-creator/elements/LabeledInput.scss index c0b6e1a89d5..b84df81f69a 100644 --- a/sticker-creator/elements/LabeledInput.scss +++ b/sticker-creator/elements/LabeledInput.scss @@ -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; } } } diff --git a/sticker-creator/elements/MessageBubble.scss b/sticker-creator/elements/MessageBubble.scss index 75b374d4421..06e80b7a734 100644 --- a/sticker-creator/elements/MessageBubble.scss +++ b/sticker-creator/elements/MessageBubble.scss @@ -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; diff --git a/sticker-creator/elements/ProgressBar.scss b/sticker-creator/elements/ProgressBar.scss index a04b6b94546..d4770754d27 100644 --- a/sticker-creator/elements/ProgressBar.scss +++ b/sticker-creator/elements/ProgressBar.scss @@ -18,7 +18,7 @@ .bar { height: 4px; width: 0px; - background: $color-signal-blue; + background: $ultramarine-ui-light; transition: width 100ms ease-out; } diff --git a/sticker-creator/elements/Typography.scss b/sticker-creator/elements/Typography.scss index 0814d03b14b..0bbf935dfbe 100644 --- a/sticker-creator/elements/Typography.scss +++ b/sticker-creator/elements/Typography.scss @@ -54,7 +54,7 @@ } a { - color: $color-signal-blue; + color: $ultramarine-ui-light; text-decoration: none; } } diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 79a3850afa5..5b622da3528 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -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; } } diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 0ed9be47144..2ca65f2d1c7 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -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 { diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 1e975bb15fb..aa9475ba40a 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -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); } } } diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index ed89586ed70..1d7751b9481 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -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