diff --git a/fonts/Loor.ttf b/fonts/Loor.ttf new file mode 100644 index 000000000..4d115a502 Binary files /dev/null and b/fonts/Loor.ttf differ diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index dc6b3c7b9..1c463ba54 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1,148 +1,3 @@ -// Fonts changed to 'Public Sans' and Space Mono' as per req. Chad. -$session-font-default: 'Public Sans'; -$session-font-mono: 'SpaceMono'; - -@font-face { - font-family: $session-font-mono; - src: url('../fonts/SpaceMono-Regular.ttf') format('truetype'); -} - -@font-face { - font-family: $session-font-mono; - src: url('../fonts/SpaceMono-Bold.ttf') format('truetype'); - font-weight: bold; -} - -@font-face { - font-family: $session-font-mono; - src: url('../fonts/SpaceMono-Italic.ttf') format('truetype'); - font-style: italic; -} - -@font-face { - font-family: $session-font-mono; - src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; -} - -// Public Sans is an open replacement for 'SF Pro Text' -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-Regular.woff') format('woff'); -} -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-Italic.woff') format('woff'); - font-style: italic; -} -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-Bold.woff') format('woff'); - font-weight: bold; -} -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-BoldItalic.woff') format('woff'); - font-weight: bold; - font-style: italic; -} -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-Light.woff') format('woff'); - font-weight: lighter; -} -@font-face { - font-family: $session-font-default; - src: url('../fonts/PublicSans-LightItalic.woff') format('woff'); - font-weight: lighter; - font-style: italic; -} - -@keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@import 'node_modules/emoji-mart/css/emoji-mart.css'; - -// Session Colors -$session-color-green: #00f782; -$session-color-green-alt-1: #00f480; -$session-color-green-alt-2: #00fd73; -$session-color-green-alt-3: #00f782; - -$session-shade-1: #0c0c0c; -$session-shade-1-alt: #0f1011; -$session-shade-2: #161616; -$session-shade-3: #191818; -$session-shade-4: #1b1b1b; -$session-shade-5: #222325; -$session-shade-6: #232323; -$session-shade-6-alt: #2c2c2c; -$session-shade-7: #2e2e2e; -$session-shade-8: #2f2f2f; -$session-shade-9: #313131; -$session-shade-10: #3e3e3e; -$session-shade-11: #3f3f3f; -$session-shade-12: #3f4146; -$session-shade-13: #474646; -$session-shade-14: #535865; -$session-shade-15: #5b6c72; -$session-shade-16: #979797; -$session-shade-17: #a0a0a0; -$session-shade-18: #141414; - -$session-opaque-dark-1: rgba(0, 0, 0, 0.25); -$session-opaque-dark-2: rgba(0, 0, 0, 0.37); -$session-opaque-dark-3: rgba(0, 0, 0, 0.5); - -$session-color-white: #fff; -$session-color-dark-grey: #353535; -$session-color-black: #000; -$session-color-danger: #ff453a; -$session-color-danger-alt: #ff4538; -$session-color-primary: $session-shade-13; -$session-color-secondary: $session-shade-6; -$session-background-overlay: #212121; -$session-background: #121212; - -$session-color-info: $session-shade-11; -$session-color-success: #35d388; -$session-color-error: #edd422; -$session-color-warning: $session-shade-17; -$session-color-warning-alt: #ff9d00; - -$session-color-light-grey: #a0a0a0; - -$session-shadow-opacity: 0.15; -$session-overlay-opacity: 0.3; - -$session-margin-xs: 5px; -$session-margin-sm: 10px; -$session-margin-md: 15px; -$session-margin-lg: 20px; - -$session-font-xs: 11px; -$session-font-sm: 13px; -$session-font-md: 15px; -$session-font-lg: 18px; -$session-font-xl: 24px; - -$session-font-h1: 30px; -$session-font-h2: 24px; -$session-font-h3: 20px; -$session-font-h4: 16px; - -$session-search-input-height: 34px; -$main-view-header-height: 63px; -$session-left-pane-width: 300px; -$session-left-pane-sections-container-width: 80px; - div.spacer-sm { height: $session-margin-sm; } @@ -153,15 +8,6 @@ div.spacer-lg { height: $session-margin-lg; } -@mixin session-filter-color-green { - filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(2367%) - hue-rotate(101deg) brightness(107%) contrast(101%); -} - -@mixin session-color-subtle($color) { - color: rgba($color, 0.6); -} - // Blur for modals .loki-dialog ~ .index.inbox { filter: blur(2px); @@ -189,41 +35,6 @@ textarea { caret-color: $session-color-green !important; } -@mixin text-highlight($color) { - background-color: $color; - padding: $session-margin-xs $session-margin-sm; - border-radius: 3px; - display: inline-block; -} - -@mixin session-dark-background { - background-color: $session-background; -} -@mixin session-dark-background-lighter { - background-color: $session-background-overlay; -} -@mixin session-dark-background-hover { - background-color: $session-shade-7; -} - -$session-transition-duration: 0.25s; -$session-fadein-duration: 0.1s; - -$session-icon-size-sm: 15px; -$session-icon-size-md: 20px; -$session-icon-size-lg: 30px; - -$session-modal-size-sm: 220px; -$session-modal-size-md: 400px; -$session-modal-size-lg: 650px; - -$session-conversation-header-height: 60px; - -@mixin fontDefaultBold { - font-weight: bold; - font-family: $session-font-default; -} - * { user-select: none; @@ -238,21 +49,6 @@ $session-conversation-header-height: 60px; } } -$session-gradient-green: linear-gradient( - 270deg, - rgba($session-color-green-alt-1, 1), - rgba($session-color-green-alt-1, 0.6) -); -$session-gradient-black: linear-gradient( - 90deg, - rgba($session-shade-3, 1), - rgba($session-shade-4, 0.6) -); - -$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); - -$session_message-container-border-radius: 5px; - .shadowed { opacity: $session-shadow-opacity; } @@ -401,7 +197,7 @@ $session_message-container-border-radius: 5px; line-height: 40px; padding: 0px $session-margin-lg; font-size: $session-font-md; - font-family: $session-font-default; + font-family: $session-font-accent; border-radius: 500px; &:not(.disabled):hover { @@ -504,7 +300,7 @@ $session_message-container-border-radius: 5px; display: flex; align-items: center; justify-content: center; - font-family: $session-font-default; + font-family: $session-font-accent; border-radius: 50%; font-weight: 700; background: $session-color-danger; @@ -554,7 +350,7 @@ $session-element-border-green: 4px solid $session-color-green; .module-conversation-header__title-flex, .module-conversation-header__title { - font-family: $session-font-default; + font-family: $session-font-accent; font-weight: bold; width: 100%; display: flex; @@ -750,7 +546,7 @@ label { padding: $session-margin-lg; - font-family: $session-font-default; + font-family: $session-font-accent; text-align: center; line-height: 18px; font-size: $session-font-md; @@ -788,7 +584,7 @@ label { &__body { padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg; - font-family: $session-font-default; + font-family: $session-font-accent; line-height: $session-font-md; font-size: $session-font-sm; @@ -933,7 +729,7 @@ label { background-color: $session-shade-4; color: $session-color-white; - font-family: $session-font-default; + font-family: $session-font-accent; font-size: $session-font-sm; line-height: $session-icon-size-sm; font-weight: 700; @@ -1664,7 +1460,7 @@ input { } &__info { - font-family: $session-font-default; + font-family: $session-font-accent; margin-bottom: 2 * $session-margin-lg; &--title { diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss new file mode 100644 index 000000000..03b437fa0 --- /dev/null +++ b/stylesheets/_session_constants.scss @@ -0,0 +1,229 @@ +// ////////////////////////////////////////////// +// /////////////////// Fonts //////////////////// +// ////////////////////////////////////////////// + +$session-font-default: 'Public Sans'; +$session-font-accent: 'Loor'; +$session-font-mono: 'SpaceMono'; + +@font-face { + font-family: $session-font-mono; + src: url('../fonts/SpaceMono-Regular.ttf') format('truetype'); +} +@font-face { + font-family: $session-font-mono; + src: url('../fonts/SpaceMono-Bold.ttf') format('truetype'); + font-weight: bold; +} +@font-face { + font-family: $session-font-mono; + src: url('../fonts/SpaceMono-Italic.ttf') format('truetype'); + font-style: italic; +} +@font-face { + font-family: $session-font-mono; + src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} + +// Public Sans is an open replacement for 'SF Pro Text' +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-Regular.woff') format('woff'); +} +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-Italic.woff') format('woff'); + font-style: italic; +} +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-Bold.woff') format('woff'); + font-weight: bold; +} +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-Light.woff') format('woff'); + font-weight: lighter; +} +@font-face { + font-family: $session-font-default; + src: url('../fonts/PublicSans-LightItalic.woff') format('woff'); + font-weight: lighter; + font-style: italic; +} + +// Accented font +@font-face { + font-family: $session-font-accent; + src: url('../fonts/Loor.ttf') format('truetype'); + line-height: 1.4rem; +} + +// ////////////////////////////////////////////// +// ////////////////// Colors //////////////////// +// ////////////////////////////////////////////// + +// Brand +$session-color-green: #00f782; +$session-color-green-alt-1: #00f480; +$session-color-green-alt-2: #00fd73; +$session-color-green-alt-3: #00f782; + +// Shades +$session-shade-1: #0c0c0c; +$session-shade-2: #161616; +$session-shade-3: #191818; +$session-shade-4: #1b1b1b; +$session-shade-5: #222325; +$session-shade-6: #232323; +$session-shade-7: #2e2e2e; +$session-shade-8: #2f2f2f; +$session-shade-9: #313131; +$session-shade-10: #3e3e3e; +$session-shade-11: #3f3f3f; +$session-shade-12: #3f4146; +$session-shade-13: #474646; +$session-shade-14: #535865; +$session-shade-15: #5b6c72; +$session-shade-16: #979797; +$session-shade-17: #a0a0a0; +$session-shade-18: #141414; + +$session-opaque-dark-1: rgba(0, 0, 0, 0.25); +$session-opaque-dark-2: rgba(0, 0, 0, 0.37); +$session-opaque-dark-3: rgba(0, 0, 0, 0.5); + +$session-color-white: #fff; +$session-color-light-grey: #a0a0a0; +$session-color-dark-grey: #353535; +$session-color-black: #000; + +$session-background-overlay: #212121; +$session-background: #121212; + +// Semantic Colors +$session-color-info: $session-shade-11; +$session-color-success: #35d388; +$session-color-error: #edd422; +$session-color-warning: $session-shade-17; +$session-color-warning-alt: #ff9d00; +$session-color-danger: #ff453a; +$session-color-primary: $session-shade-13; +$session-color-secondary: $session-shade-6; + +// Opacity and Shadow +$session-shadow-opacity: 0.15; +$session-overlay-opacity: 0.3; +$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); + +// ////////////////////////////////////////////// +// /////////////////// Text ///////////////////// +// ////////////////////////////////////////////// + +// Sizing +$session-font-xs: 11px; +$session-font-sm: 13px; +$session-font-md: 15px; +$session-font-lg: 18px; +$session-font-xl: 24px; + +$session-font-h1: 30px; +$session-font-h2: 24px; +$session-font-h3: 20px; +$session-font-h4: 16px; + +// Mixins +@mixin fontAccentBold { + font-weight: bold; + font-family: $session-font-accent; +} + +@mixin text-highlight($color) { + background-color: $color; + padding: $session-margin-xs $session-margin-sm; + border-radius: 3px; + display: inline-block; +} + +@mixin session-color-subtle($color) { + color: rgba($color, 0.6); +} + +// ////////////////////////////////////////////// +// ////////////////// Sizing //////////////////// +// ////////////////////////////////////////////// + +// Default Components +$session-search-input-height: 34px; +$main-view-header-height: 63px; +$session-conversation-header-height: 60px; +$session-left-pane-width: 300px; +$session-left-pane-sections-container-width: 80px; + +// Various Components +$session-icon-size-sm: 15px; +$session-icon-size-md: 20px; +$session-icon-size-lg: 30px; + +$session-modal-size-sm: 220px; +$session-modal-size-md: 400px; +$session-modal-size-lg: 650px; + +$session_message-container-border-radius: 5px; + +// Spacing +$session-margin-xs: 5px; +$session-margin-sm: 10px; +$session-margin-md: 15px; +$session-margin-lg: 20px; + +// Animations +$session-transition-duration: 0.25s; +$session-fadein-duration: 0.1s; + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +// ////////////////////////////////////////////// +// ///////////////// Various //////////////////// +// ////////////////////////////////////////////// + +// Backgrounds +@mixin session-dark-background { + background-color: $session-background; +} +@mixin session-dark-background-lighter { + background-color: $session-background-overlay; +} +@mixin session-dark-background-hover { + background-color: $session-shade-7; +} +@mixin session-filter-color-green { + filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(2367%) + hue-rotate(101deg) brightness(107%) contrast(101%); +} + +$session-gradient-green: linear-gradient( + 270deg, + rgba($session-color-green-alt-1, 1), + rgba($session-color-green-alt-1, 0.6) +); +$session-gradient-black: linear-gradient( + 90deg, + rgba($session-shade-3, 1), + rgba($session-shade-4, 0.6) +); diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 4e9c4a7c7..fca8c1d42 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -112,7 +112,7 @@ $session-compose-margin: 20px; &__user__profile { &-number, &-name { - @include fontDefaultBold(); + @include fontAccentBold(); font-size: 15px; @at-root .light-theme #{&} { @@ -193,7 +193,7 @@ $session-compose-margin: 20px; .session-button { margin-left: auto; - @include fontDefaultBold(); + @include fontAccentBold(); } &-buttons { diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 83a6ac984..b5f618bfa 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -17,7 +17,7 @@ &-text { color: $session-color-white; - font-family: $session-font-default; + font-family: $session-font-accent; .title { font-size: 100px; @@ -87,7 +87,7 @@ } &__tab { - @include fontDefaultBold(); + @include fontAccentBold(); width: 100%; padding-bottom: 10px; background-color: transparent; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 7921fadfe..ef91ccab8 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -103,7 +103,7 @@ } @mixin session-h-title { - @include fontDefaultBold(); + @include fontAccentBold(); } h1 { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 6ff2f4e76..36cf6d68a 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -297,12 +297,11 @@ body.dark-theme { } } - /* why can't I access $session-color values here? */ .expiredAlert { - background: #28f587; + background: $session-color-green; color: black; /* biggest we can make the font without wrapping the current text at minimum app width */ - font-family: 'Wasa'; + font-family: $session-font-accent; font-size: 20px; height: 60px; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 27ea3fa8a..14d3b07b5 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -1,4 +1,5 @@ // Global Settings, Variables, and Mixins +@import 'session_constants'; @import 'variables'; @import 'mixins'; @import 'global'; diff --git a/yarn.lock b/yarn.lock index d1bd3502f..395b7d35d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4900,6 +4900,13 @@ in-publish@^2.0.0: resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c" integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ== +indent-string@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" + integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA= + dependencies: + repeating "^2.0.0" + indexes-of@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" @@ -5508,7 +5515,7 @@ js-base64@^2.1.8, js-base64@^2.1.9: resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209" integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ== -"js-tokens@^3.0.0 || ^4.0.0": +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -5518,7 +5525,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@^3.13.1, js-yaml@^3.2.7, js-yaml@^3.7.0, js-yaml@^3.9.1: +js-yaml@^3.13.1, js-yaml@^3.2.7, js-yaml@^3.9.1: version "3.13.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== @@ -9280,6 +9287,11 @@ slice-ansi@1.0.0: dependencies: is-fullwidth-code-point "^2.0.0" +slide@^1.1.5: + version "1.1.6" + resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707" + integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc= + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -9737,6 +9749,13 @@ strip-eof@^1.0.0: resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8= +strip-indent@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2" + integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI= + dependencies: + get-stdin "^4.0.1" + strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"