d6ebbad3c9
Keep color names out of color variables so they can be changed later and still make sense. Name based on primary function.
111 lines
3.6 KiB
SCSS
111 lines
3.6 KiB
SCSS
// Going to create a Gab Specific color stack and gracefully remove the existing stack
|
|
// We know what colors we want to use for everything in the UI
|
|
// The existing color stack is based on propagating color tint variants of a few basic colors
|
|
|
|
////////// GAB SPECIFIC VARIABLE STACK //////////
|
|
|
|
// NOTE - will eventually create a systematic approach of setting color variables to easily change instance themes
|
|
|
|
// STATIC COLORS
|
|
|
|
$gab-brand-default: #21cf7a;
|
|
$gab-alert-red: #cc6643;
|
|
$gab-secondary-text: #999;
|
|
$gab-text-highlight: $gab-brand-default;
|
|
$gab-small-cta-primary: #607CF5;
|
|
|
|
|
|
// THEME COLORS
|
|
|
|
// default theme (dark)
|
|
$gab-background-base: #333;
|
|
$gab-background-container: #222;
|
|
$gab-placeholder-accent: #666;
|
|
|
|
|
|
// light theme
|
|
$gab-background-base-light: #f2f3f6;
|
|
$gab-background-container-light: #fff;
|
|
$gab-default-text-light: #6c6c6c;
|
|
|
|
|
|
|
|
|
|
|
|
// 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;
|
|
// "Gab" button hidden and replaced with floating button on bottom corner
|
|
$nav-breakpoint-3: 450px;
|
|
// Gab Logo hidden - bare minimum navigation for smallest width devices
|
|
$nav-breakpoint-4: 375px;
|
|
|
|
|
|
|
|
|
|
////////// EXISTING VARIABLE STACK (with modifications) //////////
|
|
|
|
// Commonly used web colors
|
|
|
|
// We certainly don't need variables for white and black.
|
|
// you can declare color: white; color: black; or #fff; #000;
|
|
$black: #000000; // Black
|
|
$white: #ffffff; // White
|
|
|
|
|
|
$success-green: #79bd9a !default; // Padua
|
|
$error-red: #df405a !default; // Cerise
|
|
$warning-red: #ff5050 !default; // Sunset Orange
|
|
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
|
|
|
// Values from the classic Gab Social UI
|
|
$classic-base-color: $gab-background-base;
|
|
$classic-primary-color: $gab-background-base;
|
|
$classic-secondary-color: $gab-placeholder-accent;
|
|
$classic-highlight-color: $gab-text-highlight;
|
|
|
|
// Variables for defaults in UI
|
|
$base-shadow-color: $black !default;
|
|
$base-overlay-background: $black !default;
|
|
$base-border-color: $white !default;
|
|
$simple-background-color: $white !default;
|
|
$valid-value-color: $success-green !default;
|
|
$error-value-color: $error-red !default;
|
|
|
|
// Tell UI to use selected colors
|
|
$ui-base-color: $classic-base-color !default; // Darkest
|
|
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
|
$ui-primary-color: $classic-primary-color !default; // Lighter
|
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
|
$ui-highlight-color: $classic-highlight-color !default;
|
|
|
|
// Variables for texts
|
|
$primary-text-color: $white !default;
|
|
$darker-text-color: $gab-secondary-text !default;
|
|
$dark-text-color: $ui-base-lighter-color !default;
|
|
$secondary-text-color: $ui-secondary-color !default;
|
|
$highlight-text-color: $ui-highlight-color !default;
|
|
$action-button-color: $ui-base-lighter-color !default;
|
|
// For texts on inverted backgrounds
|
|
$inverted-text-color: $ui-base-color !default;
|
|
$lighter-text-color: $ui-base-lighter-color !default;
|
|
$light-text-color: $ui-primary-color !default;
|
|
|
|
// Language codes that uses CJK fonts
|
|
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
|
|
|
// Variables for components
|
|
$media-modal-media-max-width: 100%;
|
|
// put margins on top and bottom of image to avoid the screen covered by image.
|
|
$media-modal-media-max-height: 80%;
|
|
|
|
$no-gap-breakpoint: 415px;
|
|
|
|
$font-sans-serif: 'gabsocial-font-sans-serif' !default;
|
|
$font-display: 'gabsocial-font-display' !default;
|
|
$font-monospace: 'gabsocial-font-monospace' !default; |