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 1398a5e51..52caffb26 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1,143 +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; - } -} - -// 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-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-dark-grey: #353535; -$session-color-black: #000; -$session-color-danger: #ff453a; -$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; } @@ -148,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); @@ -184,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; @@ -233,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; } @@ -494,7 +295,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; @@ -544,7 +345,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; @@ -765,7 +566,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; @@ -803,7 +604,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; @@ -1712,7 +1513,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..d483bc8bd --- /dev/null +++ b/stylesheets/_session_constants.scss @@ -0,0 +1,228 @@ +// ////////////////////////////////////////////// +// /////////////////// 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'); +} + +// ////////////////////////////////////////////// +// ////////////////// 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/_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 4961f65a3..0a4d87bf0 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';