diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss index 2bf1d6430..7098c4f34 100644 --- a/app/styles/_mixins.scss +++ b/app/styles/_mixins.scss @@ -32,34 +32,3 @@ height: $size; background-size: $size $size; } - -@mixin search-input { - @include font-size(16); - @include line-height(19); - outline: 0; - box-sizing: border-box; - width: 100%; - box-shadow: none; - font-family: inherit; - background: var(--background-color); - color: var(--highlight-text-color); - margin: 0; - border-radius: 999px; - border: 0; - padding-left: 15px; - - // Chrome does not like these concatinated together - &::placeholder { color: var(--primary-text-color--faint); } - &:-ms-input-placeholder { color: var(--primary-text-color--faint); } - &::-ms-input-placeholder { color: var(--primary-text-color--faint); } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index ac50e7fa9..3242b455f 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -87,9 +87,9 @@ border-bottom: 1px solid var(--brand-color--med); &__message { + @apply text-gray-900; position: relative; margin-left: 58px; - color: var(--primary-text-color); padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -109,12 +109,12 @@ } .account__joined-at { + @apply text-gray-400; padding-left: 3px; font-size: 14px; display: flex; white-space: nowrap; flex-shrink: 0; - color: var(--primary-text-color--faint); .svg-icon { padding-right: 3px; diff --git a/app/styles/application.scss b/app/styles/application.scss index 6769e1559..9fc16bd13 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -14,7 +14,6 @@ @import 'fonts'; @import 'basics'; @import 'accounts'; -@import 'boost'; @import 'loading'; @import 'ui'; // @import 'introduction'; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 705b240bc..705265996 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -39,9 +39,9 @@ body { } &.error { + @apply text-gray-400; position: absolute; text-align: center; - color: var(--primary-text-color--faint); background: var(--brand-color--med); width: 100%; height: 100%; @@ -83,9 +83,9 @@ noscript { } div { + @apply text-gray-400; font-size: 14px; margin: 30px auto; - color: var(--primary-text-color--faint); max-width: 400px; a { diff --git a/app/styles/boost.scss b/app/styles/boost.scss deleted file mode 100644 index 2e68c718c..000000000 --- a/app/styles/boost.scss +++ /dev/null @@ -1,46 +0,0 @@ -button.icon-button { - i.fa-retweet { - background: hsla(var(--primary-text-color_hsl), 0.4); - mask: url("data:image/svg+xml;utf8,"); - } - - &:hover, - &:active, - &:focus { - i.fa-retweet { - background: hsla(var(--primary-text-color_hsl), 0.6); - transition: background-color 200ms ease-out; - } - } - - &.disabled i.fa-retweet { - background: hsla(var(--primary-text-color_hsl), 0.2); - cursor: default; - } - - &.active i.fa-retweet { - background: var(--highlight-text-color); - } -} - -.no-reduce-motion button.icon-button i.fa-retweet { - mask-position: 0 0; - height: 19px; - transition: mask-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } -} - -.no-reduce-motion button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - mask-position: 0 100%; -} - -.reduce-motion button.icon-button i.fa-retweet { - transition: background-color 100ms ease-in; -} diff --git a/app/styles/components/backups.scss b/app/styles/components/backups.scss index 57f1144f7..728d9375e 100644 --- a/app/styles/components/backups.scss +++ b/app/styles/components/backups.scss @@ -7,7 +7,6 @@ } &--pending { - font-style: italic; - color: var(--primary-text-color--faint); + @apply text-gray-400 italic; } } diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index 2e4546092..63e5e6452 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -25,8 +25,8 @@ } .column-link { + @apply text-gray-900; background: var(--brand-color--med); - color: var(--primary-text-color); display: flex; align-items: center; font-size: 16px; @@ -44,14 +44,13 @@ } &--transparent { - background: transparent; + @apply bg-transparent; color: var(--background-color); &:hover, &:focus, &:active { - background: transparent; - color: var(--primary-text-color); + @apply text-gray-900 bg-transparent; } &.active { @@ -70,13 +69,12 @@ text-decoration: none; .fa { - margin-left: 10px; + @apply ml-2.5; } } &:hover { - color: var(--primary-text-color--faint); - text-decoration: underline; + @apply text-gray-400 underline; } } diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index 429ff7234..30db30695 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -26,9 +26,8 @@ } &__modifiers { - color: var(--primary-text-color); + @apply text-gray-900 text-sm; font-family: inherit; - font-size: 14px; background: var(--background-color); } } @@ -184,7 +183,7 @@ background: var(--brand-color); .icon-button { - color: var(--primary-text-color); + @apply text-gray-900; } } } diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss index 4641c8269..08a1a8a09 100644 --- a/app/styles/components/crypto-donate.scss +++ b/app/styles/components/crypto-donate.scss @@ -1,64 +1,47 @@ .crypto-address { - padding: 20px; - display: flex; - flex-direction: column; + @apply flex flex-col p-5; &__head { - display: flex; - align-items: center; - margin-bottom: 6px; + @apply flex items-center mb-1.5; } &__title { - font-weight: bold; + @apply font-bold; } &__icon { - display: flex; - align-items: flex-start; - justify-content: center; - width: 24px; - margin-right: 10px; + @apply flex items-start justify-center w-6 mr-2.5; img { - width: 100%; + @apply w-full; } } &__actions { - margin-left: auto; - display: flex; + @apply flex ml-auto; a { - color: var(--primary-text-color--faint); - margin-left: 8px; + @apply text-gray-400 ml-2; } .svg-icon { - width: 18px; - height: 18px; + @apply h-4.5 w-4.5; } } &__note { - margin-bottom: 10px; + @apply mb-2.5; } &__qrcode { - margin-bottom: 12px; - padding: 10px; - display: flex; - align-items: center; - justify-content: center; + @apply flex items-center justify-center mb-3 p-2.5; } &__address { - margin-top: auto; + @apply mt-auto; } } -.crypto-donate-modal { - .crypto-address { - padding: 0; - } +.crypto-donate-modal .crypto-address { + @apply p-0; } diff --git a/app/styles/components/inputs.scss b/app/styles/components/inputs.scss index c1960e029..610e83cf8 100644 --- a/app/styles/components/inputs.scss +++ b/app/styles/components/inputs.scss @@ -1,15 +1,15 @@ input[type='text'], textarea { &.standard { + @apply border-gray-400; @include font-size(16); @include line-height(18); - @include input-placeholder(var(--primary-text-color--faint)); + @include input-placeholder(#868393); box-sizing: border-box; padding: 7px 10px; border: 1px solid; border-radius: 4px; color: var(--brand-color); - border-color: var(--primary-text-color--faint); background: var(--foreground-color); &:focus { outline: none; } } diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 0c71a43dd..fa5321fd2 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -50,10 +50,10 @@ } .media-gallery__item-thumbnail { + @apply text-gray-400; cursor: zoom-in; display: block; text-decoration: none; - color: var(--primary-text-color--faint); line-height: 0; position: relative; z-index: 1; diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index d7d4b6931..7ff7ebe48 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -165,8 +165,8 @@ } .error-modal { + @apply text-gray-900; background: var(--background-color); - color: var(--primary-text-color); border-radius: 8px; overflow: hidden; display: flex; @@ -231,35 +231,30 @@ &:hover, &:focus, &:active { - color: var(--primary-text-color--faint); + @apply text-gray-400; background-color: var(--background-color); } &.onboarding-modal__done, &.onboarding-modal__next { - color: var(--primary-text-color); + @apply text-gray-900; &:hover, &:focus, &:active { - color: var(--primary-text-color); + @apply text-gray-900; } } } } .actions-modal { - position: relative; - flex-direction: column; - overflow: hidden; + @apply flex-col relative text-gray-400 overflow-hidden; border-radius: 10px; border: 1px solid var(--background-color); - color: var(--primary-text-color--faint); .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; + @apply block w-full pr-6; } .dropdown-menu__separator { diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss index e2f9be247..cab174bdb 100644 --- a/app/styles/components/search.scss +++ b/app/styles/components/search.scss @@ -13,7 +13,7 @@ } .svg-icon { - @apply right-4 rtl:left-4 rtl:right-auto; + @apply right-4 rtl:left-4 rtl:right-auto text-gray-400; @include font-size(16); cursor: default; display: inline-block; @@ -23,7 +23,6 @@ z-index: 2; width: 18px; height: 18px; - color: var(--primary-text-color--faint); opacity: 0; pointer-events: none; @@ -51,9 +50,9 @@ .column { .search { + @apply border border-solid border-b-gray-900/20; padding: 10px 15px; background-color: var(--foreground-color); - border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2); } .search__icon .svg-icon { diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 1b3a0872b..d1ae4f888 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -17,16 +17,16 @@ &.light { .display-name { strong { - color: var(--primary-text-color); + @apply text-gray-900; } span { - color: var(--primary-text-color--faint); + @apply text-gray-400; } } .status__content { - color: var(--primary-text-color); + @apply text-gray-900; a { color: var(--highlight-text-color); @@ -35,8 +35,7 @@ } &__meta { - font-size: 14px; - color: var(--primary-text-color--faint); + @apply text-gray-400 text-sm; a { color: var(--brand-color); diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 3d57ab746..a0db30c20 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -101,7 +101,7 @@ select { } .hint { - color: var(--primary-text-color--faint); + @apply text-gray-400; a { color: var(--highlight-text-color); @@ -120,8 +120,8 @@ select { } p.hint { + @apply text-gray-400; margin-bottom: 15px; - color: var(--primary-text-color--faint); &.subtle-hint { text-align: center; @@ -151,9 +151,9 @@ select { display: flex; & > label { + @apply text-gray-900; font-family: inherit; font-size: 14px; - color: var(--primary-text-color); font-weight: 500; min-width: 150px; flex: 0 0 auto; @@ -204,10 +204,10 @@ select { } .input.radio_buttons .radio label { + @apply text-gray-900; margin-bottom: 5px; font-family: inherit; font-size: 14px; - color: var(--primary-text-color); display: block; width: auto; } @@ -219,8 +219,7 @@ select { input[type=url], input[type=password], textarea { - color: var(--primary-text-color--faint); - border-color: var(--primary-text-color--faint); + @apply text-gray-400 border-gray-400; } } @@ -234,7 +233,6 @@ select { @apply border border-solid border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white; box-sizing: border-box; font-size: 16px; - color: var(--primary-text-color); display: block; width: 100%; outline: 0; @@ -279,8 +277,7 @@ select { input[type=url][disabled], input[type=password][disabled], textarea[disabled] { - color: var(--primary-text-color--faint); - border-color: var(--primary-text-color--faint); + @apply text-gray-400 border-gray-400; } .input.field_with_errors { @@ -416,9 +413,9 @@ select { .simple_form { .warning { + @apply text-gray-900; box-sizing: border-box; background: rgba($error-value-color, 0.5); - color: var(--primary-text-color); text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3); box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4); border-radius: 4px; @@ -426,13 +423,12 @@ select { margin-bottom: 15px; a { - color: var(--primary-text-color); - text-decoration: underline; + @apply text-gray-900 underline; &:hover, &:focus, &:active { - text-decoration: none; + @apply no-underline; } } diff --git a/app/styles/loading.scss b/app/styles/loading.scss index b6d86a686..5c37eccbf 100644 --- a/app/styles/loading.scss +++ b/app/styles/loading.scss @@ -128,14 +128,7 @@ } .load-more { - display: block; - color: var(--primary-text-color); - background-color: transparent; - border: 0; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; + @apply block w-full m-0 p-4 border-0 box-border text-gray-900 bg-transparent; &:hover, &:focus { @@ -152,10 +145,10 @@ } .regeneration-indicator { + @apply text-gray-900; text-align: center; font-size: 16px; font-weight: 500; - color: var(--primary-text-color); background: var(--accent-color--faint); cursor: default; display: flex; @@ -177,9 +170,7 @@ &__label { strong { - display: block; - margin-bottom: 10px; - color: var(--primary-text-color); + @apply block mb-2.5 text-gray-900; } span { diff --git a/app/styles/themes.scss b/app/styles/themes.scss index 9c0e43fc3..378e7b332 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -29,14 +29,12 @@ body, // Primary variables --brand-color: hsl(var(--brand-color_hsl)); --accent-color: hsl(var(--accent-color_hsl)); - --primary-text-color: var(--gray-900); --background-color: hsl(var(--background-color_hsl)); --foreground-color: hsl(var(--foreground-color_hsl)); // Meta-variables --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l); --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l); - --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l); --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l); --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l); --accent-color_h: calc(var(--brand-color_h) - 15); @@ -52,11 +50,6 @@ body, var(--accent-color_s), calc(var(--accent-color_l) + 3%) ); - --primary-text-color--faint: var(--gray-400); - - // Colors - --gray-900: #08051b; - --gray-400: #868393; } .theme-mode-light { @@ -68,9 +61,6 @@ body, ); // Meta-variables - --primary-text-color_h: 0; - --primary-text-color_s: 0%; - --primary-text-color_l: 0%; --background-color_h: 0; --background-color_s: 0%; --background-color_l: 94.9%; diff --git a/app/styles/ui.scss b/app/styles/ui.scss index 8f791f3fd..f5e46cc05 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -3,7 +3,6 @@ display: inline-flex; align-items: center; padding: 0; - color: var(--primary-text-color); border: 0; background: transparent; cursor: pointer; @@ -46,17 +45,16 @@ } &.inverted { - color: var(--primary-text-color--faint); - opacity: 1; + @apply text-gray-400 opacity-100; &:hover, &:active, &:focus { - color: var(--primary-text-color); + @apply text-gray-900; } &.disabled { - color: var(--primary-text-color--faint); + @apply text-gray-400; } &.active { @@ -69,9 +67,9 @@ } &.overlayed { + @apply text-gray-400; box-sizing: content-box; background: var(--foreground-color); - color: var(--primary-text-color--faint); border-radius: 6px; padding: 2px; opacity: 1; @@ -189,20 +187,13 @@ } .setting-text { - color: var(--primary-text-color--faint); - background: transparent; - border: 0; - border-bottom: 2px solid var(--brand-color); - box-sizing: border-box; - display: block; + @apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent; font-family: inherit; - margin-bottom: 10px; padding: 7px 0; - width: 100%; &:focus, &:active { - color: var(--primary-text-color); + @apply text-gray-900; border-bottom-color: var(--highlight-text-color); } diff --git a/app/styles/variables.scss b/app/styles/variables.scss index 114eaf0e3..a124b1f50 100644 --- a/app/styles/variables.scss +++ b/app/styles/variables.scss @@ -1,56 +1,10 @@ -// Truth Colors -$color-1: #c62828; -$color-1-dark: #8e0000; -$color-1-light: #ff5f52; -$color-2: #e53935; -$color-2-dark: #ab000d; -$color-2-light: #ff6f60; -$color-3: #1a237e; -$color-3-dark: #000051; -$color-3-light: #534bae; -$color-4: #3949ab; -$color-4-dark: #00227b; -$color-4-light: #6f74dd; -$color-5: #37474f; -$color-5-dark: #102027; -$color-5-light: #62727b; -$color-6: #f5f5f5; -$color-6-dark: #c2c2c2; -$color-6-light: #fff; -$color-7: #00e676; -$color-7-dark: #00b248; -$color-7-light: #66ffa6; -$color-8: #ffea00; -$color-8-dark: #c7b800; -$color-8-light: #ffff56; -$color-9: #ffab00; -$color-9-dark: #c67c00; -$color-9-light: #ffdd4b; - -// BREAKPOINT SETS - -// navigation breakpoints - by default show all elements and link names along with icons - -// turns navigation links into icon-only buttons -$nav-breakpoint-1: 850px; -// search field hidden and replaced with search icon link -$nav-breakpoint-2: 650px; -// "Post" button hidden and replaced with floating button on bottom corner -$nav-breakpoint-3: 450px; -// Site Logo hidden - bare minimum navigation for smallest width devices -$nav-breakpoint-4: 375px; - // Commonly used web colors -$success-green: #79bd9a !default; // Padua $error-red: #df405a !default; // Cerise -$warning-red: #ff5050 !default; // Sunset Orange -$gold-star: #ca8f04 !default; // Dark Goldenrod // Variables for defaults in UI $base-shadow-color: #000 !default; $base-overlay-background: #000 !default; -$valid-value-color: $success-green !default; $error-value-color: $error-red !default; // Language codes that uses CJK fonts @@ -68,8 +22,5 @@ $no-gap-breakpoint: 415px; // NOTE: Prefer CSS variables whenever possible. // They're future-proof and more flexible. :root { - --thumb-navigation-base-height: 60px; - --thumb-navigation-height: calc( - var(--thumb-navigation-base-height) + env(safe-area-inset-bottom) - ); + --thumb-navigation-height: calc(60px + env(safe-area-inset-bottom)); }