Skip to content

Instantly share code, notes, and snippets.

@lushiyun

lushiyun/global-custom-properties.css

Last active December 15, 2022 15:21
Show Gist options
  • Save lushiyun/ce4900ffcb27b99d020b1e2295309e0a to your computer and use it in GitHub Desktop.
Save lushiyun/ce4900ffcb27b99d020b1e2295309e0a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lushiyun revised this gist Dec 15, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions global-custom-properties.css
    View file
    Original file line number Diff line number Diff line change
    @@ -149,4 +149,6 @@
    --wv-green: #0cce6b;
    --wv-orange: #ffa400;
    --wv-red: #ff4e42;

    --transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
  2. lushiyun created this gist Dec 15, 2022.
    152 changes: 152 additions & 0 deletions global-custom-properties.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,152 @@
    :root {
    font-size: 16px;

    --space: 4px;
    --space-2x: 8px;
    --space-4x: 16px;
    --space-8x: 32px;
    --space-16x: 64px;
    --space-24x: 96px;
    --space-32x: 128px;
    --space-48x: 192px;
    --space-64x: 256px;

    --space-small: 32px;
    --space-medium: 40px;
    --space-large: 48px;

    --space-gap: 24px;
    --space-gap-half: 12px;
    --space-gap-quarter: var(--space-2x);

    --gap: var(--space-gap);
    --gap-half: var(--space-gap-half);
    --gap-quarter: var(--space-gap-quarter);
    --gap-double: var(--space-large);
    --gap-section: var(--space-small);

    --space-negative: -4px;
    --space-2x-negative: -8px;
    --space-4x-negative: -16px;
    --space-8x-negative: -32px;
    --space-16x-negative: -64px;
    --space-24x-negative: -96px;
    --space-32x-negative: -128px;
    --space-48x-negative: -192px;
    --space-64x-negative: -256px;

    --space-small-negative: -32px;
    --space-medium-negative: -40px;
    --space-large-negative: -48px;

    --space-gap-negative: -24px;
    --space-gap-half-negative: -12px;
    --space-gap-quarter-negative: var(--space-2x-negative);

    --gap-negative: var(--space-gap-negative);
    --gap-half-negative: var(--space-gap-half-negative);
    --gap-quarter-negative: var(--space-gap-quarter-negative);
    --gap-double-negative: var(--space-large-negative);

    --page-margin: var(--space-gap);
    --page-width: 1200px;
    --page-width-with-margin: calc(
    var(--page-width) + calc(2 * var(--page-margin))
    );

    --radius-small: 5px;
    --radius-large: 8px;
    --text-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.8), #000);
    --font-sans: -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;

    --form-large-font: 1rem;
    --form-large-line-height: 1.5rem;
    --form-large-height: var(--space-large);

    --form-small-font: 0.875rem;
    --form-small-line-height: 0.875rem;
    --form-small-height: var(--space-small);

    --form-font: 0.875rem;
    --form-line-height: 1.25rem;
    --form-height: var(--space-medium);

    --inset-border: 1px solid rgba(0, 0, 0, 0.1);
    }

    :root {
    --success-lighter: #d3e5ff;
    --success-light: #3291ff;
    --success: #0070f3;
    --success-dark: #0761d1;

    --error-lighter: #f7d4d6;
    --error-light: #ff1a1a;
    --error: #e00;
    --error-dark: #c50000;

    --warning-lighter: #ffefcf;
    --warning-light: #f7b955;
    --warning: #f5a623;
    --warning-dark: #ab570a;

    --violet-lighter: #d8ccf1;
    --violet-light: #8a63d2;
    --violet: #7928ca;
    --violet-dark: #4c2889;
    --violet-background: #fff;
    --violet-background-secondary: #291c3a;
    --violet-background-tertiary: #eae5f4;

    --background-rgb: 255, 255, 255;
    --foreground-rgb: 0, 0, 0;

    --cyan-lighter: #aaffec;
    --cyan-light: #79ffe1;
    --cyan: #50e3c2;
    --cyan-dark: #29bc9b;

    --highlight-purple: #f81ce5;
    --highlight-magenta: #eb367f;
    --highlight-pink: #ff0080;
    --highlight-yellow: #fff500;

    --foreground: #000;
    --background: #fff;

    --selection: var(--cyan-light);
    --selection-text-color: var(--foreground);
    --accents-1: #fafafa;
    --accents-2: #eaeaea;
    --accents-3: #999;
    --accents-4: #888;
    --accents-5: #666;
    --accents-6: #444;
    --accents-7: #333;
    --accents-8: #111;

    --link-color: var(--success);
    --code: var(--foreground);
    --secondary-lighter: var(--accents-2);
    --secondary-light: var(--accents-3);
    --secondary: var(--accents-5);
    --secondary-dark: var(--accents-7);

    --dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02);
    --dropdown-triangle-stroke: #fff;
    --shadow-smallest: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-extra-small: 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);

    --wv-green: #0cce6b;
    --wv-orange: #ffa400;
    --wv-red: #ff4e42;
    }