src/scss/constants.scss
// NOTE: convenience constants for the basic palette colors
$primary--over: var(--primary-over);
$primary--under: var(--primary-under);
$accent--over: var(--accent--over);
$accent--under: var(--accent--under);
$content--over: var(--content--over);
$content--under: var(--content--under);
// @debt these should probably be replaced with var(--primary-...) referencing theme colors
$primary--lightest: #a179ff; // replace with var(--primary--under-lighter-15pp) // just an approximation from the available
$primary--light: #9669ff; // replace with var(--primary--under-lighter-10pp) // just an approximation from the available
$primary--live-hover: #8755fb; // replace with var(--primary--under-lighter-5pp) // just an approximation from the available
$primary--darker: #3f247d; // replace with var(--primary--under-darker-20pp) // just an approximation from the available
$primary--over: #f6e652;
// @debt these should probably be replaced with var(...) referencing theme colors
$secondary: #333035;
$secondary--dark: #19181a; // replace with var(--content--under-lighter-10pp);
$secondary--live: #1a1d24;
// @debt these should probably be replaced with var(...) referencing theme colors
$secondary--schedule-event: #3f3d42;
$secondary--schedule-event-hover: #4c494f;
$secondary--schedule-event-users: #ebebeb;
// @debt these should probably be replaced with var(...) referencing theme colors
$announcement-background: rgba(39, 35, 34, 0.9);
$send-msg-online-color: #78b553;
// @debt these should probably be removed or replaced with var(...) references
$saturated-black-alt: #262427;
$lighter-intermediate-grey: #3d3a3f;
$light-grey: #292929;
$light-grey--lightest: #acadb0;
$green: #4bcc4b;
$yellow: #ffe600;
$light-green: #3ce348;
$dark-green: #208a28;
// @deprecated please use var(--content--over-Xa) where X is the opacity e.g. var(--content--over-20a)
@function opaque-white($opacity) {
@return rgba(#{var(--content--over-rgb)}, $opacity);
}
// @deprecated please use var(--content--under-Xa) where X is the opacity e.g. var(--content--over-20a)
@function opaque-black($opacity) {
@return rgba(#{var(--content--under-rgb)}, $opacity);
}
// @debt the colors in these gradients should probably be replaced with var(...) references
$gradient: linear-gradient(
124deg,
#00f6d5 0%,
$accent--under 50%,
#e15ada 100%
);
$danger-gradient: linear-gradient(
124deg,
#e15a5a 0%,
#e30e2f 50%,
#f60053 100%
);
$admin-gradient: linear-gradient(141deg, #5a35ad 0%, #26144f 100%);
$login-rainbox-gradient: linear-gradient(
130.78deg,
#00f6d5 0%,
#6f43ff 45.84%,
#e15ada 93.63%
);
$map-sidebar-width: 20%;
$chat-sidebar-width: 300px;
$chat-sidebar-controller-width: 100px;
$navbar-height: 66px;
$footer-height: 30px;
$reserved-page-height: $navbar-height + $footer-height;
$chat-input-height: 114px;
$announcement-banner-height: 50px;
$announcement-container-width-admin: 600px;
$announcement-container-width: 470px;
$announcement-container-height: 140px;
$announcement-banner-admin-height: 55px;
$video-participant-optimal-width: 260px;
$video-participant-optimal-height: 146px;
$auth-container-max-width: 450px;
$avatarSize: max(4vh, 3vw);
$avatarSizeMin: 25px;
$reactionSize: max(2.5vh, 2vw);
$playa-width-and-height: 2000px;
$playa-venue-size: 40px;
$playa-avatar-size: 48px;
$margin-right--navbar-links: 8px;
$border-radius--xxs: 2px;
$border-radius--xs: 4px;
$border-radius--sm: 8px;
$border-radius--md: 12px;
$border-radius--lg: 16px;
$border-radius--xl: 24px;
$border-radius--max: 50%;
$border-width--none: 0px;
$border-width--slim: 1px;
$border-width--bold: 2px;
$spacing--xs: 4px;
$spacing--sm: 8px;
$spacing--md: 12px;
$spacing--lg: 16px;
$spacing--xl: 24px;
$spacing--xxl: 30px;
$spacing--xxxl: 40px;
$submit-button-diameter: 44px;
$announce-button-width: 136px;
$font-size--xxs: 10px;
$font-size--xs: 11px;
$font-size--sm: 12px;
$font-size--md: 14px;
$font-size--lg: 16px;
$font-size--xl: 20px;
// Not sure this is the best naming for these
$font-size--xxl: 30px;
$font-size--xxxl: 50px;
// Placeholders, until we can find meaningful names for them
$font-weight--300: 300;
$font-weight--400: 400;
$font-weight--500: 500;
$font-weight--600: 600;
$font-weight--700: 700;
$media-breakpoint--sm: 576px; // mobile
$media-breakpoint--md: 768px; // tablet--small
$media-breakpoint--lg: 992px; // tablet--medium
$media-breakpoint--xl: 1200px; // tablet--large
$media-breakpoint--xxl: 1350px; // laptop
$text-shadow--thin: 0 1px 2px rgba(#{var(--content--under-rgb)}, 0.25);
$text-shadow--medium: 0 2px 4px rgba(#{var(--content--under-rgb)}, 0.25);
$text-shadow--thick: 0 2px 4px rgba(#{var(--content--under-rgb)}, 0.5);
$text-shadow--outline: // 4 thin shadows in order: NW, NE, SW, SE
-1px -1px 2px rgba(#{var(--content--under-rgb)}, 0.2),
1px -1px 2px rgba(#{var(--content--under-rgb)}, 0.2),
-1px 1px 2px rgba(#{var(--content--under-rgb)}, 0.2),
1px 1px 2px rgba(#{var(--content--under-rgb)}, 0.2);
// NOTE: line comments prevent tools to do automatic folding of the code into a single line
$drop-shadow--outline: // 4 thin shadows in order: NW, NE, SW, SE
drop-shadow(-1px -1px 2px rgba(#{var(--content--under-rgb)}, 0.2)) //
drop-shadow(1px -1px 2px rgba(#{var(--content--under-rgb)}, 0.2)) //
drop-shadow(-1px 1px 2px rgba(#{var(--content--under-rgb)}, 0.2)) //
drop-shadow(1px 1px 2px rgba(#{var(--content--under-rgb)}, 0.2)); //
$transition-function: cubic-bezier(0.23, 1, 0.32, 1);
$button-width--max-margin: $spacing--md;
$button-width--max-wrap: 300px;
$button-width--max: $button-width--max-wrap - 2 * $button-width--max-margin;
$button-width--normal: 100%;
$image-overlay-padding: 0.3rem;
$image-overlay-backdrop-filter: blur(10px);
$image-input-padding: 2.5em 0;
$image-input-padding--small: 2.5em;
$image-input-upload-button-padding: 0.7em 4.2em;
$image-input-upload-button-padding--small: 0.7em 2em;
$image-input-upload-button-transition: transform 0.2s ease-in-out,
background-color 0.2s ease-in-out;
$image-input-upload-button-background: #462a87;
$image-input-upload-button-background--focus: rgba(55, 90, 127, 0.18);
$admin-ng-sidebar-width--normal: 30vw;
$admin-ng-sidebar-width--min: max(#{$button-width--max-wrap}, 15vw);
$admin-ng-sidebar-width--max: 30vw;
$admin-ng-sidebar-footer-height--max: 4rem;
$admin-ng-showcase-width--normal: calc(
100vw - #{$admin-ng-sidebar-width--normal}
);
$admin-ng-tab-bar-height: calc(2rem + #{$spacing--sm});
$admin-ng-panel-height: calc(
100vh - #{$admin-ng-tab-bar-height} - #{$reserved-page-height}
);
$admin-ia-simple-panel-height: calc(100vh - #{$reserved-page-height});
$admin-ia-dash-template-columns: 5fr minmax(#{$button-width--max-wrap}, 1fr);
$admin-ia-manage-space-template-columns: 5fr
minmax(#{2 * $button-width--max-wrap}, 1fr);
// @debt the following locations are using styled-components, so can't use our helper function yet
// pages/Admin/Room/Modal/PortalModal.styles.ts (z-index: 101)
// components/atoms/Legend/Legend.styles.ts (z-index: 5)
$z-layer-navbar: 30;
$z-layer-live-schedule: 20;
$z-layer-live-schedule-download: 25;
$z-layer-sidebar: 14;
$z-layer-admin-sidebar: $z-layer-sidebar;
$z-layer-footer: $z-layer-admin-sidebar + 100;
$z-layer-announcement-banner: 15;
$z-layer-emergency-content: 15;
$z-layer-art-content: 5;
$z-layer-viewing-window: 5;
$z-layer-space-card-link: 1;
$z-layer-on-top-bg: 1;
$z-layer-jazz-header: $z-layer-on-top-bg;
$z-layer-user-list-label: $z-layer-on-top-bg;
$z-layer-embed-iframe: $z-layer-on-top-bg;
$z-layer-external-message: $z-layer-on-top-bg;
$z-layer-auditorium-iframe: $z-layer-on-top-bg;
$z-layer-jukebox: $z-layer-on-top-bg;
$z-layer-start-table: 0;
$z-layer-mobile-warning: 20;
// @debt hack-fix to hide dropdown under navbar (reason: navbar stacking context)
// a better solution discussed here https://github.com/sparkletown/sparkle/pull/1350#discussion_r622895298
$z-layer-navbar-drawer: -1;
$z-layers: (
// Admin
admin-space-card-info: 1,
admin-navbar: 100,
admin-placement: 10,
admin-venue-header-after: 2,
admin-venue-header: -1,
admin-sidebar: $z-layer-admin-sidebar,
admin-sidebar-content: $z-layer-admin-sidebar + 10,
admin-sidebar-title: $z-layer-admin-sidebar + 20,
admin-sidebar-footer: $z-layer-admin-sidebar + 30,
// JazzBar
jazzbar-participant-profile-icon: 1,
jazzbar-header: $z-layer-jazz-header,
jukebox-content: $z-layer-jukebox,
// Chat
chatbox-chat-container: $z-layer-sidebar,
chat-drawer-container: $z-layer-sidebar,
chatbox-emoji-picker: 2,
chatbox-submit-button: 1,
chatslist-private-container-back-button: 1,
chatmessage-reply-button: 1,
user-search-close-icon: 1,
user-search-input-close-btn: 1,
user-search-results: 380,
chat-poll-text: 0,
chat-poll-text-background: -1,
// Emergency Page
emergency-content: $z-layer-emergency-content,
// Nav
navbar-map-back-button: $z-layer-sidebar,
navbar-schedule-backdrop: $z-layer-live-schedule,
navbar-schedule: $z-layer-live-schedule,
navbar-schedule-download: $z-layer-live-schedule-download,
navbar: $z-layer-navbar,
navbar__schedule-event--hover: 1,
navbar__drawer: $z-layer-navbar-drawer,
// Sidebars + similar
sidebar-slide-btn: -1,
sidebar: $z-layer-sidebar,
left-column: $z-layer-sidebar,
// UserAvatar
global-profile-icon: 1,
user-avatar-status-indicator: 1,
// UserReactions
user-reactions-shout: 2,
user-reactions-emoji: 1,
// UserList
user-list-label: $z-layer-user-list-label,
// Map
map-room--hovered: 7,
map-avatar: 6,
map-room: 5,
map-room--iframe: 4,
map-grid: 3,
map-room--unclickable: 2,
map-background: 1,
// Admin Space Card
space-card-link: $z-layer-space-card-link,
// Legacy
account-profile-picture-preview: 1,
duststorm-container: 100,
duststorm-modal-content: 220,
// Announcement banner
announcement-banner: $z-layer-announcement-banner,
// ArtPiece
art-content: $z-layer-art-content,
// Embeddable
embeddable-iframe: $z-layer-embed-iframe,
// Viewing Window
viewing-window-content: $z-layer-viewing-window,
// Auditorium
auditorium-iframe: $z-layer-auditorium-iframe,
// External Link
external-message: $z-layer-external-message,
// Unsorted
footer: $z-layer-footer,
input-icon: 1,
recipient-chat-breadcrumbs: 1,
loading-page-sparkle: 10,
private-recipient-search-input-dropdown: 1,
venuepage-preview-indication: 1,
map-preview-header: 5,
start-table: $z-layer-start-table,
mobile-warning: $z-layer-mobile-warning
);
@function z($layer) {
@if not map-has-key($z-layers, $layer) {
@error "No layer found for `#{$layer}` in $z-layers map.";
}
@return map-get($z-layers, $layer);
}
@function box-shadow--table($color) {
@return 2px 0px 10px $color;
}
@function box-shadow--input($color) {
@return 0 0 0 2px $color;
}
@function box-shadow--input-autofill($color) {
@return 0 0 0 30px #{$color};
}
@function box-shadow--card($color) {
@return 0 2px 4px $color;
}
@function box-shadow--small($color) {
@return 0 2px 4px 0 $color;
}
@function box-shadow--medium($color) {
@return 0 4px 10px 0 $color;
}
@function box-shadow--large($color) {
@return 0 10px 30px 0 $color;
}
@function font-size--parent($scale: 1) {
@return $scale * 1em;
}
@function font-size--root($scale: 1) {
@return $scale * 1rem;
}
// @debt replace this with `line-clamp` property once it's supported in autoprefixer; see https://github.com/postcss/autoprefixer/issues/1322
@mixin line-clamp($line-count: 1) {
display: -webkit-box;
-webkit-line-clamp: $line-count;
-webkit-box-orient: vertical;
line-clamp: $line-count;
}
@mixin line-clamp-with-overflow($line-count: 1) {
@include line-clamp($line-count);
overflow: hidden;
text-overflow: ellipsis;
}
@mixin square-size($size: 1, $min: null, $max: null) {
height: $size;
width: $size;
min-height: $min;
min-width: $min;
max-height: $max;
max-width: $max;
}
@mixin circle-avatar {
object-fit: cover;
object-position: top;
}
@mixin scrollbar {
// The standard properties
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
scrollbar-color: opaque-white(0.3) $content--under;
scrollbar-width: thin;
// The webkit properties
// @see https: //developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
&::-webkit-scrollbar-corner {
background-color: $content--under;
}
&::-webkit-scrollbar-track {
border-radius: $border-radius--xs;
background-color: $content--under;
}
&::-webkit-scrollbar {
@include square-size($spacing--sm);
background-color: opaque-black(0);
}
&::-webkit-scrollbar-thumb {
border-radius: $border-radius--xs;
background-color: opaque-white(0.3);
}
&::-webkit-scrollbar-thumb:hover {
background-color: opaque-white(0.5);
}
}