Skip to content

Latest commit

 

History

History
249 lines (247 loc) · 7.58 KB

VARIABLES.org

File metadata and controls

249 lines (247 loc) · 7.58 KB

List of CSS Variables

LoaderSpinner.vue

Common

  • --bg: hsl(90, 90%, 20%);
  • --fg: hsl(223, 10%, 10%);
  • --dur: 1s;

OrgTable.vue

TODO: master tmp hack. Space at the end is not value.

  • --easy-table-header-background-color: var(–bg);
  • --easy-table-header-font-color: var(–fg);
  • --easy-table-body-row-background-color: var(–bg);
  • --easy-table-body-row-font-color: var(–fg);
  • --easy-table-body-row-hover-background-color: var(–bg-alt);
  • --easy-table-footer-background-color: var(–bg-alt);
  • --easy-table-footer-font-color: var(–fg);
  • --easy-table-body-row-hover-font-color: var(–fg);
  • --easy-table-row-border: 1px solid var(–base7);
  • --easy-table-border: 1px solid var(–base7);
  • --easy-table-message-font-color: var(–fg-alt);

buttons.scss

Flat button

  • --btn-flat-size: 34px;
  • --btn-flat-border: 1px solid var(–base5);
  • --btn-flat-border-radius: 6px;
  • --btn-flat-box-shadow: none;

Colors

  • --btn-main-color: var(–base0);

Social networking button

  • --btn-social-size: 24px;
  • --btn-social-background: var(–base4);

checkbox.scss

Common

  • --checkbox-color: var(–base3);

colors.scss

Common

  • --red: #f65866;
  • --orange: #dd9046;
  • --green: #8bcd5b;
  • --teal: #4db5bd;
  • --yellow: #ecbe7b;
  • --blue: #41a7fc;
  • --dark-blue: #1c4a6e;
  • --magenta: #ca9ee6;
  • --violet: #c75ae8;
  • --cyan: #34bfd0;
  • --dark-cyan: #5699af;
  • --white: #f8f9fc;
  • --bg: #22272e;
  • --bg-alt: var(–q-dark);
  • --bg-alt2: var(–q-dark);
  • --fg: #adbac7;
  • --fg-alt: #{$grey-6};
  • --base0: #{$grey-3};
  • --base1: #{$grey-10};
  • --base2: #1d1d1d;
  • --base3: #22272e;
  • --base4: #{$grey-9};
  • --base5: #{$grey-6};
  • --base6: #{$grey-1};
  • --base7: rgba(99, 110, 123, 0.4);
  • --base8: var(–blue);
  • --bg: #fff;
  • --bg-alt: #fff;
  • --bg-alt2: #f8f9fc;
  • --fg: #34495e;
  • --fg-alt: #{$grey-5};
  • --base0: #{$grey-9};
  • --base1: #{$grey-1};
  • --base2: #{$blue-grey-4};
  • --base3: #22272e;
  • --base4: #{$grey-9};
  • --base5: #{$grey-6};
  • --base6: #{$grey-1};
  • --base7: rgba(175, 184, 193, 0.2);
  • --base8: var(–blue);

editor.scss

Fonts

  • --editor-font-family: var(–main-font-family);

flex.scss

Common

  • --flex-gap-md: 16px;
  • --flex-gap-sm: 8px;

org-nodes.scss

Common

  • --inline-code-background: var(–base7);
  • --inline-code-font-color: var(–fg);

scroll.scss

Common

  • --scroll-bar-width: 4px;
  • --scroll-bar-color: var(–base4);

typography.scss

Fonts

  • --headline-margin: 18px 0;
  • --paragraph-font-size: 16px;
  • --main-font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
  • --editor-font-family-main: ‘Menlo’, charter, Georgia, Cambria, ‘Roboto’, Times,
  • --paragraph-font-family: var(–main-font-family);
  • --headline-font-family: ‘Roboto’, ‘-apple-system’, ‘Helvetica Neue’, Helvetica,
  • --code-font-family: monospace, monospace;

Note description

  • --description-font-family: var(–main-font-family);
  • --description-font-size: 16px;
  • --description-font-style: italic;
  • --description-font-color: var(–base-5);
  • --description-padding: 18px 0px;

Code

  • --code-font-size: 14px;

variables.scss

Main colors

  • --headline-font-weight: 500;
  • --font-color-action: var(–blue);

Ul

  • --ul-font-size: 20px;
  • --ul-line-height: 32px;
  • --ul-font-family: charter, Georgia, Cambria, ‘Times New Roman’, Times, serif;

Bars

  • --top-bar-height: 50px;

Markup

  • --content-max-width: 768px;

Modeline config

  • --modeline-height: 48px;
  • --modeline-padding: 0 32px;
  • --modeline-background: var(–base1);

Card

  • --card-background-color: var(–bg);

Shadow

  • --shadow-main: none;

Sidebar

  • --sidebar-width: 56px;
  • --action-pane-opened-width: 320px;

Mobile footer pane

  • --footer-height: 0px;

Public preview

  • --public-preview-image-width: 112px;
  • --public-preview-image-height: 112px;
  • --public-preview-max-height: 156px;

Completion item

  • --completion-item-min-height: 24px;
  • --completion-item-padding: 8px 4px;
  • --completion-item-margin: 0 16px;
  • --completion-item-hover-background: var(–base7);
  • --completion-item-hover-color: inherit;
  • --completion-float-top: 32px;
  • --completion-border-radius: 8px;
  • --completion-width: 80%;
  • --completion-max-width: 768px;
  • --completion-border: none;
  • --completion-box-shadow: none;
  • --completion-input-height: 56px;
  • --completion-container-margin: 0px;

Menu

  • --menu-padding: 8px;

File uploader

  • --file-uploader-border-width: 4px;
  • --file-uploader-border-style: dashed;
  • --file-uploader-border-color: var(–base-3);
  • --file-uploader-bg: var(–bg-alt);
  • --file-uploader-opacity: 0.8;

Note preview link

  • --note-preview-link-max-width: 365px;
  • --note-preview-link-height: 200px;

Action btn

  • --btn-action-shadow: 0 1px 0 rgba(27, 31, 36, 0.04),
  • --btn-action-border: 1px solid;
  • --btn-action-border-color: var(–base5);
  • --btn-action-padding: 6px;
  • --btn-action-radius: 6px;
  • --btn-action-fire-color: var(–green);
  • --btn-action-fire-border-color: var(–green);
  • --btn-action-size: 20px;
  • --btn-action-color: var(–base5);

Mini buffer

  • --mini-buffer-background: var(–bg-alt);
  • --mini-buffer-font-color: var(–fg);
  • --mini-buffer-border-top: 1px solid var(–base4);
  • --mini-buffer-max-height: 460px;

Tags

  • --tag-hover-background: var(–base0);
  • --tag-hover-color: var(–base1);

Toolbar

  • --toolbar-border-top: 0;
  • --toolbar-hover-color: var(–base8);

HeaderBar

  • --headerbar-height: 30px;
  • --headerbar-border-radius: 8px;
  • --headerbar-background-color: var(–bg);
  • --headerbar-color: var(–fg-alt);
  • --headerbar-border: none;

File manager item

  • --file-item-bg-hover: var(–base8);
  • --file-item-color-hover: var(–base6);
  • --file-item-height: 30px;

Icon button

  • --icon-btn-color: var(–fg);
  • --icon-btn-hover-color: var(–base8);

Modal

  • --modal-max-height: 94svh;
  • --modal-max-width: 1024px;
  • --modal-padding: 8px 0;

Box paddings/margins

  • --default-block-padding: 16px;
  • --default-block-margin: 16px;
  • --sm-block-margin: 8px;
  • --default-block-border-radius: 16px;
  • --sm-block-border-radius: 6px;
  • --default-item-radius: 8px;
  • --search-icn-size: 44px;
  • --default-gap: 16px;
  • --small-gap: 8px;
  • --xs-gap: 4px;

Src block

  • --src-block-header-padding-y: 8px;
  • --src-block-footer-padding-y: 8px;
  • --src-block-padding-x: 16px;
  • --src-block-padding-y: 16px;
  • --src-block-margin-y: 16px;

Editor

  • --page-padding: 16px 56px;
  • --editor-line-height: 1.8;
  • --editor-headline-line-height: 1.2;
  • --editor-default-line-height: 28.8px;
  • --org-list-item-bullet-margin-left: 20px;

Device specific feature

  • --device-padding-bottom: 0px;

Graph

  • --graph-node-color: var(–fg-alt);
  • --graph-edge-color: var(–fg-alt);
  • --graph-active-color: var(–red);
  • --completion-border: 1px solid var(–fg-alt);
  • --default-block-padding: 8px;
  • --footer-height: 56px;
  • --page-padding: 14px;
  • --default-gap: 10px;
  • --file-item-height: 46px;
  • --headerbar-height: 46px;
  • --completion-container-margin: 0px;
  • --completion-width: 100%;
  • --completion-border-radius: 0px;
  • --completion-border: none !important;

Border

  • --border-main: 1px solid var(–fg-alt);
  • --device-padding-bottom: 24px;
  • --top-bar-height: 32px;