Skip to content

Commit

Permalink
Change all uses of color SNBlue30 to SNBlue20 (#2872)
Browse files Browse the repository at this point in the history 
As a starting point to update the way we specify and use colors throughout the app in CSS this starts by reducing the number we use.

This is a list of the replacements this does.

    $studio-wordpress-blue-30 -> $studio-wordpress-blue-20
    $studio-gray-60 -> $studio-gray-50
    $studio-red-40 -> $studio-red-50
    red -> $studio-red-50
    $studio-blue-30 -> $studio-simplenote-blue-20
    $studio-red-60 -> $studio-red-50
    $studio-orange-30 -> $studio-orange-20
    $studio-gray-40 -> $studio-gray-50
  • Loading branch information
@sandymcfadden
sandymcfadden authored May 1, 2021
1 parent af85499 commit 70b123e
Show file tree
Hide file tree
Showing 15 changed files with 41 additions and 47 deletions.
7 changes: 2 additions & 5 deletions lib/alternate-login-prompt/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
display: flex;
justify-content: center;
align-items: center;
background: rgba($studio-gray-20, 0.75);
background: rgba($studio-black, 0.3);
}

.alternate-login__dismiss {
Expand Down Expand Up @@ -72,10 +72,7 @@
}

.theme-dark {
.alternate-login__overlay {
background: rgba($studio-gray-100, 0.75);
}
.alternate-login__button-row .button-borderless {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}
22 changes: 11 additions & 11 deletions lib/auth/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

.login.is-electron {
input.validate:invalid {
box-shadow: 0 0 1.5px 1px red;
box-shadow: 0 0 1.5px 1px $studio-red-50;
}

input.validate:invalid:focus {
outline-color: red;
outline-color: $studio-red-50;
}
}

Expand Down Expand Up @@ -39,7 +39,7 @@
text-align: center;
width: 90%;
.is-error {
color: $studio-red-60;
color: $studio-red-50;
}
}

Expand Down Expand Up @@ -94,14 +94,14 @@
}

a.login__forgot {
color: $studio-gray-60;
color: $studio-gray-50;
text-decoration: none;
}

.login__forgot,
.login__signup,
.terms {
color: $studio-gray-60;
color: $studio-gray-50;
display: block;
font-size: 14px;
margin: 16px auto;
Expand All @@ -120,7 +120,7 @@

.or {
background: $studio-white;
color: $studio-gray-60;
color: $studio-gray-50;
display: block;
font-size: 15px;
font-style: italic;
Expand Down Expand Up @@ -194,7 +194,7 @@
.login__signup a,
.login__auth-message a,
.terms a {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}

.login__auth-message.is-error {
Expand All @@ -213,21 +213,21 @@
color: $studio-gray-30;
}
input {
border-color: $studio-gray-60;
border-color: $studio-gray-50;

&:disabled {
color: $studio-gray-50;
border-color: $studio-gray-70;
}

&:read-only {
border-color: $studio-gray-60;
border-color: $studio-gray-50;
background-color: rgba(255, 255, 255, 0.07);
}

&:focus {
border-color: $studio-simplenote-blue-30;
box-shadow: 0 0 0 1px $studio-simplenote-blue-30;
border-color: $studio-simplenote-blue-20;
box-shadow: 0 0 0 1px $studio-simplenote-blue-20;
}
}
}
4 changes: 2 additions & 2 deletions lib/components/tab-panels/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
}

.theme-dark .tab-panels__tab-list li.is-active {
color: $studio-simplenote-blue-30;
border-bottom-color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
border-bottom-color: $studio-simplenote-blue-20;
}

.tab-panels__panel {
Expand Down
2 changes: 1 addition & 1 deletion lib/dialogs/import/dropzone/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
.importer-dropzone {
.drop-instructions {
span {
color: $studio-blue-30;
color: $studio-simplenote-blue-20;
}
}
&.is-accepted {
Expand Down
2 changes: 1 addition & 1 deletion lib/dialogs/import/source-importer/executor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

.source-importer-executor__error {
margin-bottom: 0.75em;
color: $studio-red-40;
color: $studio-red-50;
line-height: 1.3;
}

Expand Down
4 changes: 2 additions & 2 deletions lib/dialogs/unsynchronized/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
}

.icon-attention {
color: $studio-orange-30;
color: $studio-orange-20;
height: 25px;
width: 19px;
}
Expand Down Expand Up @@ -88,6 +88,6 @@
}

.export-unsynchronized {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}
7 changes: 2 additions & 5 deletions lib/email-verification/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
display: flex;
justify-content: center;
align-items: center;
background: rgba($studio-gray-20, 0.75);
background: rgba($studio-black, 0.3);
}

.email-verification__dismiss {
Expand Down Expand Up @@ -78,10 +78,7 @@
}

.theme-dark {
.email-verification__overlay {
background: rgba($studio-gray-100, 0.75);
}
.email-verification__button-row .button-borderless {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}
2 changes: 1 addition & 1 deletion lib/error-boundary/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,6 @@
}

.error-message__footnote {
color: $studio-gray-60;
color: $studio-gray-50;
font-size: 14px;
}
2 changes: 1 addition & 1 deletion lib/note-content-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,7 +578,7 @@ class NoteContentEditor extends Component<Props> {
colors: {
'editor.foreground': '#ffffff',
'editor.background': '#1d2327', // $studio-gray-90
'editor.selectionBackground': '#50575e', // $studio-gray-60
'editor.selectionBackground': '#646970', // $studio-gray-50
'scrollbarSlider.activeBackground': '#646970', // $studio-gray-50
'scrollbarSlider.background': '#2c3338', // $studio-gray-80
'scrollbarSlider.hoverBackground': '#1d2327', // $studio-gray-90
Expand Down
2 changes: 1 addition & 1 deletion lib/note-detail/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
border: 0;
line-height: 1.5em;
font-size: 16px;
color: $studio-gray-60;
color: $studio-gray-50;
background: $studio-white;
resize: none;
-webkit-tap-highlight-color: transparent;
Expand Down
4 changes: 2 additions & 2 deletions lib/note-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,12 @@
}

button {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}

.note-list .search-match {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}

Expand Down
2 changes: 1 addition & 1 deletion lib/tag-input/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,5 @@
}

.tag-input__suggestion {
color: $studio-gray-40;
color: $studio-gray-50;
}
6 changes: 3 additions & 3 deletions lib/tag-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,21 +118,21 @@ input.tag-list-input {
color: $studio-gray-50;
}
&.button-trash {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}

.tag-list-item {
&:hover {
background-color: $studio-gray-60;
background-color: $studio-gray-80;
}
}
}

.theme-light {
.icon-button {
&.button-trash {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
&.button-reorder {
color: $studio-gray-10;
Expand Down
8 changes: 4 additions & 4 deletions scss/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@ button {

// Danger buttons
.button-danger {
color: $studio-red-40;
border-color: $studio-red-40;
color: $studio-red-50;
border-color: $studio-red-50;

&:active {
background: $studio-red-40;
background: $studio-red-50;
color: $studio-white;
}
}
Expand All @@ -86,7 +86,7 @@ button {

.button-borderless.button-danger {
&:active {
color: darken($studio-red-40, 20%);
color: darken($studio-red-50, 20%);
}
}

Expand Down
14 changes: 7 additions & 7 deletions scss/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ span[dir='ltr'] {

.theme-light {
background-color: $studio-white;
color: $studio-gray-60;
color: $studio-gray-50;

.theme-color-bg {
background-color: $studio-white;
Expand Down Expand Up @@ -181,7 +181,7 @@ span[dir='ltr'] {

::-webkit-scrollbar-thumb {
background-color: $studio-gray-80;
border-color: $studio-gray-60;
border-color: $studio-gray-50;
}
::-webkit-scrollbar-thumb:hover {
background-color: $studio-gray-90;
Expand All @@ -191,12 +191,12 @@ span[dir='ltr'] {
}

.button-borderless {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;

&[disabled],
&:disabled {
svg[class^='icon-'] {
fill: $studio-gray-60;
fill: $studio-gray-50;
}
}
}
Expand Down Expand Up @@ -293,7 +293,7 @@ span[dir='ltr'] {

.note-list-item-pinned:not(.note-list-item-selected) {
.note-list-item-pinner {
color: $studio-simplenote-blue-30;
color: $studio-simplenote-blue-20;
}
}

Expand Down Expand Up @@ -328,7 +328,7 @@ span[dir='ltr'] {
table {
th,
td {
border-color: $studio-gray-60;
border-color: $studio-gray-50;
}
tr:nth-child(2n) {
background-color: $studio-gray-80;
Expand All @@ -342,7 +342,7 @@ span[dir='ltr'] {
background-color: $studio-gray-90;

button svg {
fill: $studio-simplenote-blue-30;
fill: $studio-simplenote-blue-20;
}
}
}

0 comments on commit 70b123e

Please sign in to comment.