useful sass/scss variable

_yek-sass-variables.scss

/* variables
-------------------*/
$yek-v-space: 4px;
$yek-v-space-2x: 8px;
$yek-v-space-4x: 16px;
$yek-v-space-8x: 32px;
$yek-v-space-16x: 64px;
$yek-v-space-32x: 128px;
$yek-v-space-small: 32px;
$yek-v-space-medium: 40px;
$yek-v-space-large: 48px;
$yek-v-space-gap: 24px;
$yek-v-space-gap-half: 12px;
$yek-v-space-gap-quarter: $yek-v-space-2x;
$yek-v-gap: $yek-v-space-gap;
$yek-v-gap-half: $yek-v-space-gap-half;
$yek-v-gap-quarter: $yek-v-space-gap-quarter;
$yek-v-gap-double: $yek-v-space-large;
$yek-v-space-negative: -4px;
$yek-v-space-2x-negative: -8px;
$yek-v-space-4x-negative: -16px;
$yek-v-space-8x-negative: -32px;
$yek-v-space-16x-negative: -64px;
$yek-v-space-32x-negative: -128px;
$yek-v-space-small-negative: -32px;
$yek-v-space-medium-negative: -40px;
$yek-v-space-large-negative: -48px;
$yek-v-space-gap-negative: -24px;
$yek-v-space-gap-half-negative: -12px;
$yek-v-space-gap-quarter-negative: $yek-v-space-2x-negative;
$yek-v-gap-negative: $yek-v-space-gap-negative;
$yek-v-gap-half-negative: $yek-v-space-gap-half-negative;
$yek-v-gap-quarter-negative: $yek-v-space-gap-quarter-negative;
$yek-v-gap-double-negative: $yek-v-space-large-negative;
$yek-v-page-margin: $yek-v-space-gap;
$yek-v-page-width: 1000px;
$yek-v-page-width-with-margin: 1048px;
$yek-v-radius: 5px;
$yek-v-marketing-radius: 8px;
$font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
$font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
$header-height: 64px;
$header-border-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
$header-background: rgba(255, 255, 255, 0.8);
$yek-v-form-large-font: 1rem;
$yek-v-form-large-line-height: 1.5rem;
$yek-v-form-large-height: $yek-v-space-large;
$yek-v-form-small-font: 0.875rem;
$yek-v-form-small-line-height: 0.875rem;
$yek-v-form-small-height: $yek-v-space-small;
$yek-v-form-font: 0.875rem;
$yek-v-form-line-height: 1.25rem;
$yek-v-form-height: $yek-v-space-medium;
$yek-v-success-lighter: #d3e5ff;
$yek-v-success-light: #3291ff;
$yek-v-success: #0070f3;
$yek-v-success-dark: #0761d1;
$yek-v-error-lighter: #f7d4d6;
$yek-v-error-light: #ff1a1a;
$yek-v-error: #ee0000;
$yek-v-error-dark: #c50000;
$yek-v-warning-lighter: #ffefcf;
$yek-v-warning-light: #f7b955;
$yek-v-warning: #f5a623;
$yek-v-warning-dark: #ab570a;
$yek-v-violet-lighter: #e3d7fc;
$yek-v-violet-light: #8a63d2;
$yek-v-violet: #7928ca;
$yek-v-violet-dark: #4c2889;
$yek-v-cyan-lighter: #aaffec;
$yek-v-cyan-light: #79ffe1;
$yek-v-cyan: #50e3c2;
$yek-v-cyan-dark: #29bc9b;
$yek-v-highlight-purple: #f81ce5;
$yek-v-highlight-magenta: #eb367f;
$yek-v-highlight-pink: #ff0080;
$yek-v-foreground: #000;
$yek-v-background: #fff;
$yek-v-selection: $yek-v-cyan-light;
$accents-1: #fafafa;
$accents-2: #eaeaea;
$accents-3: #999999;
$accents-4: #888888;
$accents-5: #666666;
$accents-6: #444444;
$accents-7: #333333;
$accents-8: #111111;
$yek-v-link-color: $yek-v-success;
$yek-v-marketing-gray: #fafbfc;
$yek-v-code: $yek-v-highlight-purple;
$yek-v-secondary-lighter: $accents-2;
$yek-v-secondary-light: $accents-3;
$yek-v-secondary: $accents-5;
$yek-v-secondary-dark: $accents-7;
$dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02);
$dropdown-triangle-stroke: #fff;
$scroller-start: rgba(255, 255, 255, 1);
$scroller-end: rgba(255, 255, 255, 0);
$shadow-smallest: 0px 4px 8px rgba(0, 0, 0, 0.12);
$shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
$shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
$shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12);
$shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
$shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
$portal-opacity: 0.25;

yek-sass-variables.md

useful sass/scss anything

only varaibles avaialbe at moment

based on NextJS