@slite/style/src/variables.css

Slite shared style

/* What to define here: absolute dimensions */
:root {
  /* Font */
  --font-size-smallest: 10px;
  --font-size-smaller: 11px;
  --font-size-small: 12px;
  --font-size-normal: 13px;
  --font-size-large: 14px;
  --font-size-larger: 20px;
  --font-size-largest: 26px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-one: 1;
  --line-height-normal: 1.2em;
  --line-height-large: 1.4em;
  --line-height-larger: 1.6em;
  --line-height-largest: 2em;

  --font-family-system: 'UniversalSans', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-title: 'Garnett', FixEmoji, sans-serif;
  --font-family-monospace: 'Source Code Pro', Inconsolata, Monaco, Consolas,
    'Courier New', Courier, monospace;

  /* radius */
  --radius-smaller: 1px;
  --radius-small: 2px;
  --radius-normal: 4px;
  --radius-large: 6px;
  --radius-larger: 10px;
  --radius-largest: 50px;

  /* opacity */
  --opacity-null: 0;
  --opacity-smaller: 0.2;
  --opacity-small: 0.4;
  --opacity-half: 0.5;
  --opacity-normal: 0.6;
  --opacity-large: 0.8;

  /* z-index */
  --z-index-mega: 9;
  --z-index-huge: 4;
  --z-index-large: 3;
  --z-index-medium: 2;
  --z-index-small: 1;
  --z-index-null: 0;
  --z-index-modal: var(--z-index-mega);
  --z-index-modal-backdrop: var(--z-index-huge);

  /* Box shadows */
  --box-shadow-modals: 0 2px 40px 0 rgba(44, 44, 44, 0.08);
  --box-shadow-smaller: 0px 1px 2px 0px rgba(44, 50, 77, 0.1);
  --box-shadow-small: 0 2px 3px 0 rgba(44, 50, 70, 0.15);
  --box-shadow-right-small: 0px 1px 2px 0px rgba(44, 50, 77, 0.1);
  --box-shadow-bottom-small: 0 1px 2px 0 rgba(44, 44, 44, 0.1);
  --box-shadow-normal: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
  --box-shadow-medium: 0 0 10px 0 rgba(44, 50, 77, 0.07);
  --box-shadow-large: 0 2px 40px 0 rgba(44, 44, 44, 0.2);

  /* Spacing, Legacy, overwritten under .slite-design-system */
  --spacing-smallest: 1px;
  --spacing-smaller: 2px;
  --spacing-small: 5px;
  --spacing-normal: 10px;
  --spacing-medium: 15px;
  --spacing-large: 20px;
  --spacing-larger: 30px;
  --spacing-largest: 40px;
  --spacing-huge: 60px;

  /* Transition */
  --transition: all 0.13s ease-in-out;
  --transition-medium: all 0.4s ease-in-out;

  /* Editor */
  --note-panel-horizontal-width: 70px;
  --note-editor-min-width: 420px;
  --note-editor-max-width: 680px;
  --note-header-height: 70px;

  --note-editor-font-size: 16px;
  --note-editor-font-size-medium: 15px;

  --note-editor-line-height: 1.6em;
  --note-editor-list-item-margin-left: 30px;

  --note-editor-title-font-size: 44px;
  --note-editor-title-line-height: 1.25em;
  --note-editor-header-letter-spacing: -0.015em;

  --note-editor-h1-font-size: 2em;
  --note-editor-h1-line-height: 1.3em;
  --note-editor-h1-margin-after: 4px;
  --note-editor-h1-margin-before: 32px;
  --note-editor-h2-font-size: 1.5em;
  --note-editor-h2-line-height: 1.4em;
  --note-editor-h2-margin-after: 4px;
  --note-editor-h2-margin-before: 20px;
  --note-editor-h3-font-size: 1.2em;
  --note-editor-h3-line-height: 1.7em;
  --note-editor-h3-margin-after: 4px;
  --note-editor-h3-margin-before: 16px;
}

/* What to define here: absolute colors for default (aka: light mode) */
:root,
.dark-mode .force-light-mode,
.dark-mode .color-mode-elevated .force-light-mode,
.dark-mode.color-mode-elevated .force-light-mode {
  /* Colors */
  --transparent: rgba(0, 0, 0, 0);
  --shade-00: hsl(220, 8%, 19%);
  --shade-05: hsl(220, 8%, 27%);
  --shade-10: hsl(217, 8%, 40%);
  --shade-20: hsl(218, 8%, 45%);
  --shade-30: hsl(217, 8%, 70%);
  --shade-40: hsl(220, 9%, 86%);
  --shade-45: hsl(220, 9%, 93%);
  --shade-50: hsl(210, 10%, 95%);
  --shade-100: hsl(240, 20%, 99%);

  --shade-100: #fdfdfd;
  --full-white: #ffffff;

  --blue-10: hsl(216, 82%, 28%);
  --blue-20: hsl(219, 91%, 42%);
  --blue-30: hsl(216, 82%, 49%);
  --blue-40: hsl(216, 81%, 60%);
  --blue-50: hsl(217, 80%, 88%);
  --blue-60: hsl(217, 84%, 95%);
  --blue-70: hsl(217, 87%, 97%);

  --red-00: hsl(0, 63%, 20%);
  --red-10: hsl(0, 73%, 30%);
  --red-20: hsl(0, 83%, 40%);
  --red-30: hsl(0, 70%, 52%);
  --red-40: hsl(0, 75%, 60%);
  --red-50: hsl(0, 84%, 69%);
  --red-60: hsl(0, 84%, 75%);
  --red-70: hsl(0, 84%, 83%);
  --red-80: hsl(0, 94%, 94%);
  --red-100: hsl(0, 87%, 97%);


  --black: #1d1e20;
  --white: #fdfdfd;
  --red: #ff5a6e;
  --yellow: #ffcf59;
  --yellow-dark: #926400;
  --sand: #ffe697;
  --pink: #ffb199;
  --green: #b8e986;

  --saturn-orange: #f67748;
  --moon-dust: #f9efe4;
  --pink-moon: #eebacb;

  --tag-default-background: #f5f5f7;
  --tag-default-color: #72727d;
  --tag-blue-background: #d4f4f7;
  --tag-blue-color: #30767e;
  --tag-green-background: #cffcd6;
  --tag-green-color: #38794e;
  --tag-yellow-background: #fff3c2;
  --tag-yellow-color: #974e00;
  --tag-orange-background: #ffe6cc;
  --tag-orange-color: #974e00;
  --tag-red-background: #ffe6e6;
  --tag-red-color: #ba1b1b;
  --tag-mauve-background: #fee6f2;
  --tag-mauve-color: #b52068;
  --tag-purple-background: #f0e9fc;
  --tag-purple-color: #6b34df;
  --tag-bleu-background: #edf1ff;
  --tag-bleu-color: #3e57e5;
  --tag-grey-background: #dbdbdf;
  --tag-grey-color: #70727e;
}

/* What to define here: relative/functional colors defined from absolute colours, for the default (aka light mode) */
body {
  /* Functional colors */
  --primary: var(--blue-30);
  --primary-light: var(--blue-40);
  --primary-dark: var(--blue-20);
  --primary-darker: var(--blue-10);
  --primary-shade-light: var(--blue-70);
  --primary-shade-dark: var(--blue-60);

  /* Components-ish */
  --tooltip-color: hsl(231, 1%, 100%);
  --tooltip-background-color: hsl(0, 1%, 23%);

  --entity-highlight-color: var(--primary-dark);
  --entity-highlight-background: var(--primary-shade-light);
  --entity-highlight-active-color: var(--primary-darker);
  --entity-highlight-active-background: var(--primary-shade-dark);

  /* Editor colors */
  --note-editor-color: var(--shade-05);
  --note-editor-selection-color: rgba(159, 162, 254, 0.19);
  --code-background: var(--shade-50);
  --code-border-color: var(--shade-40);
}

/* What to define here: absolute colors for dark mode */
.dark-mode {
  --shade-100: hsl(220, 8%, 15%); /* dark mode only color for BG  */
  --shade-50: hsl(220, 8%, 19%); /* same as light mode shade-00  */
  --shade-45: hsl(220, 8%, 27%);
  --shade-40: hsl(217, 8%, 40%);
  --shade-30: hsl(218, 8%, 45%);
  --shade-20: hsl(217, 8%, 70%);
  --shade-10: hsl(220, 9%, 86%);
  --shade-05: hsl(220, 9%, 93%);
  --shade-00: hsl(210, 10%, 95%);

  --white: #f5f6f7;
  --black: #1d1e20;

  --tag-default-background: hsl(231, 6%, 38%);
  --tag-default-color: #ebecee;
  --tag-blue-background: #4aa7cf;
  --tag-blue-color: #e9fafb;
  --tag-green-background: #4ba36b;
  --tag-green-color: #e7feea;
  --tag-yellow-background: #ddb450;
  --tag-yellow-color: #fff9e5;
  --tag-orange-background: #e88954;
  --tag-orange-color: #fcefe8;
  --tag-red-background: #d96060;
  --tag-red-color: #fce9e9;
  --tag-mauve-background: #d85c98;
  --tag-mauve-color: #fbe9f2;
  --tag-purple-background: #805ad2;
  --tag-purple-color: #eee8fd;
  --tag-bleu-background: #687ced;
  --tag-bleu-color: #e5ebff;
  --tag-grey-background: hsl(231, 6%, 38%);
  --tag-grey-color: #dbdbdf;

  --darker-blue-entity-background: #213351;
}

/* What to define here: relative/functional colors defined from absolute colours, for the dark-mode */
body.dark-mode,
body .dark-mode {
  --primary: var(--blue-30);
  --primary-light: var(--blue-50);
  --primary-dark: var(--blue-20);
  --primary-darker: var(--blue-10);
  --primary-shade-light: var(--blue-20);
  --primary-shade-dark: var(--blue-10);

  /* Components-ish */
  --entity-highlight-color: var(--primary-light);
  --entity-highlight-background: var(--darker-blue-entity-background);
  --entity-highlight-active-color: var(--primary-light);
  --entity-highlight-active-background: var(--primary-shade-dark);

  /* Editor colors */
  --note-editor-color: var(--shade-05);
  --note-editor-selection-color: rgba(133, 150, 255, 0.2);
  --code-background: var(--shade-45);
  --code-border-color: var(--shade-40);
}

body .dark-mode .color-mode-elevated,
body .dark-mode.color-mode-elevated,
body.dark-mode .color-mode-elevated,
body.dark-mode.color-mode-elevated {
  --shade-100: hsl(220, 8%, 19%); /* same as dark mode shade 50  */
  --shade-50: hsl(220, 8%, 27%);
  --shade-45: hsl(217, 8%, 40%);
  --shade-40: hsl(218, 8%, 45%);
  --shade-30: hsl(217, 8%, 70%);
  --shade-20: hsl(220, 9%, 86%);
  --shade-10: hsl(220, 9%, 93%);
  --shade-05: hsl(210, 10%, 95%);
  --shade-00: hsl(240, 20%, 99%);
}

.slite-design-system {
  --spacing-smallest: 2px;
  --spacing-smaller: 4px;
  --spacing-small: 8px;
  --spacing-normal: 12px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  --spacing-larger: 32px;
  --spacing-largest: 40px;
  --spacing-huge: 60px;
}