Skip to content

Instantly share code, notes, and snippets.

@peilingjiang
Last active July 19, 2024 18:04
Show Gist options
  • Save peilingjiang/5a1b46150cb48ad5c3ddbcb8dde38297 to your computer and use it in GitHub Desktop.
Save peilingjiang/5a1b46150cb48ad5c3ddbcb8dde38297 to your computer and use it in GitHub Desktop.
Global variables of colors, sizes, and more for a front-end project
/* version 20240719 */
// turns rem to px
@function px($rem) {
@return calc($rem / 16);
}
/* ---------------------------------- color --------------------------------- */
$black: #0e0e0e;
$dark: #333;
$grey-dark: #666;
$grey: #999;
$grey-light: #bbb;
$grey-lighter: #d0d0d0;
$light: #ececec;
$off-white: #f7f7f7;
$white: #fff;
$red: #d24545;
$orange: #ee6e0e;
$yellow: #ffb84c;
$pink: #ff06b7;
$purple: #57068c;
$blue: #008be8;
$cine: #00aeaa;
$green: #13a600;
// weird colors
$shadow-cold: #88a5bf;
// opacity
$opacity: 0.9;
$opacity-h: 0.75;
$opacity-xh: 0.5;
$opacity-xxh: 0.2;
$opacity-xxx-h: 0.05;
// blur
$blur-s: px(2rem);
$blur: px(3rem);
$blur-h: px(5rem);
$blur-xh: px(9rem);
/* --------------------------------- layout --------------------------------- */
$padding-xxx-s: 0.125rem;
$padding-xxs: 0.25rem;
$padding-xs: 0.5rem;
$padding-s: 0.75rem;
$padding: 1rem;
$padding-l: 2rem;
$padding-xl: 3rem;
$padding-xxl: 4rem;
$padding-xxx-l: 5rem;
$rad-xs: 0.125rem;
$rad-s: 0.25rem;
$rad: 0.375rem;
$rad-l: 0.5rem;
$rad-xl: 1rem;
/* --------------------------------- motion --------------------------------- */
$trans-f: 100ms;
$trans: 300ms;
$trans-s: 700ms;
$trans-xs: 1200ms;
$trans-xxs: 3000ms;
/* ---------------------------------- font ---------------------------------- */
$fs-xxs: 0.5rem;
$fs-xs: 0.625rem;
$fs-s: 0.75rem;
$fs: 1rem;
$fs-l: 1.25rem;
$fs-xl: 2rem;
$fs-xxl: 3rem;
$fw-light: 300;
$fw: 400;
$fw-mid: 500;
$fw-bold: 700;
// line-height
$lh-s: 1.3;
$lh: 1.5;
$lh-l: 2;
/* -------------------------------------------------------------------------- */
:root {
--black: #{$black};
--dark: #{$dark};
--grey-dark: #{$grey-dark};
--grey: #{$grey};
--grey-light: #{$grey-light};
--grey-lighter: #{$grey-lighter};
--light: #{$light};
--off-white: #{$off-white};
--white: #{$white};
--yellow: #{$yellow};
--orange: #{$orange};
--pink: #{$pink};
--blue: #{$blue};
--red: #{$red};
--cine: #{$cine};
--green: #{$green};
--purple: #{$purple};
--shadow-cold: #{$shadow-cold};
--opacity: #{$opacity};
--opacity-h: #{$opacity-h};
--opacity-xh: #{$opacity-xh};
--opacity-xxh: #{$opacity-xxh};
--opacity-xxx-h: #{$opacity-xxx-h};
--blur-s: #{$blur-s};
--blur: #{$blur};
--blur-h: #{$blur-h};
--blur-xh: #{$blur-xh};
--padding-xxx-s: #{$padding-xxx-s};
--padding-xxs: #{$padding-xxs};
--padding-xs: #{$padding-xs};
--padding-s: #{$padding-s};
--padding: #{$padding};
--padding-l: #{$padding-l};
--padding-xl: #{$padding-xl};
--padding-xxl: #{$padding-xxl};
--padding-xxx-l: #{$padding-xxx-l};
--rad-xs: #{$rad-xs};
--rad-s: #{$rad-s};
--rad: #{$rad};
--rad-l: #{$rad-l};
--rad-xl: #{$rad-xl};
--trans-f: #{$trans-f};
--trans: #{$trans};
--trans-s: #{$trans-s};
--trans-xs: #{$trans-xs};
--trans-xxs: #{$trans-xxs};
--fs-xxs: #{$fs-xxs};
--fs-xs: #{$fs-xs};
--fs-s: #{$fs-s};
--fs: #{$fs};
--fs-l: #{$fs-l};
--fs-xl: #{$fs-xl};
--fs-xxl: #{$fs-xxl};
--fw-light: #{$fw-light};
--fw: #{$fw};
--fw-mid: #{$fw-mid};
--fw-bold: #{$fw-bold};
--lh-s: #{$lh-s};
--lh: #{$lh};
--lh-l: #{$lh-l};
}
/* -------------------------------------------------------------------------- */
// textures
@mixin glass($color: $white, $opacity: $opacity-xh) {
background-color: rgba($color, $opacity);
backdrop-filter: blur($blur-xh);
}
@mixin glass-outline($color: $grey-lighter, $width: px(1rem)) {
outline: $width solid $color;
}
@mixin glass-outline-h {
@include glass-outline($grey, px(2rem));
}
// shadows
$shadow:
rgba($shadow-cold, $opacity-xh) 0 px(2rem) px(12rem) px(2rem),
rgba($white, $opacity-h) 0 0 px(8rem) px(4rem);
$shadow-h:
rgba($shadow-cold, $opacity-h) 0 px(2rem) px(16rem) px(2rem),
rgba($white, $opacity-h) 0 0 px(12rem) px(4rem);
// layout
@mixin no-padding {
padding: 0;
margin: 0;
}
@mixin front {
z-index: 999999 !important;
}
// interaction
.no-pointer-events {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment