oui-kit/stylus/theme.styl

> *...c'est un "kit" pour Vue.js :)*

:root {
  /* Neutral colors */
  --n0-50: #f5f6f6;
  --n0-100: #e6e7e7;
  --n0-200: #d0d1d1;
  --n0-300: #aeb0b2;
  --n0-400: #7d8082;
  --n0-500: #6b6e6f;
  --n0-600: #5b5d5f;
  --n0-700: #4e4f50;
  --n0-800: #444546;
  --n0-900: #3c3d3d;
  --n0-950: #252527; /* Brand / primary colors */
  --p1-50: #f3f7fc;
  --p1-100: #e7eff7;
  --p1-200: #c9dbee;
  --p1-300: #9abedf;
  --p1-400: #639ccd;
  --p1-500: #4385be;
  --p1-600: #2e659b;
  --p1-700: #27527d;
  --p1-800: #234569;
  --p1-900: #223c58;
  --p1-950: #17273a;
}

/* Common text and panel colors */
:root {
  --fg: #0a0a0a; // var(--n0-950, black);
  --bg: white; // var(--n0-50, white);
  --p1-fg: var(--p1-600);
  --p1-bg: var(--p1-100);
  --s2-fg: var(--n0-600);
  --s2-bg: var(--n0-50);
  --t3-fg: var(--n0-400);
  --t3-bg: var(--n0-100);
}

/* Dark mode via class, because user might want to choose */
.dark {
  --fg: var(--n0-50, white);
  --bg: var(--n0-950, black);
  --p1-fg: var(--p1-400);
  --p1-bg: var(--p1-900);
  --s2-fg: var(--n0-300);
  --s2-bg: var(--n0-800);
  --t3-fg: var(--n0-500);
  --t3-bg: var(--n0-700);
}

:root {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
  --font-mono: "JetBrains Mono", Menlo, SFMono-Regular, Consolas, "Roboto Mono", "Source Code Pro", monospace;
  --font: var(--font-sans);
}

:root {
  // 
  // general
  // 
  // --text-color: var(--n0-800);
  --background-color: #fefefe;
  --link-color: var(--p1-dark-color);
  --link-hover-color: var(--p1-darker-color);
  // --secondary-color: var(--n0-900);
  // --secondary-background: var(--n0-100);
  // --tertiary-color: var(--n0-800);
  // --tertiary-background: var(--n0-200);
  // 
  // controls, ui
  // 
  --control-color: var(--p1-500);
  --control-inner: white;
  --control-hover: var(--p1-600);
  --control-active: var(--p1-700);
  --input-color: var(--fg);
  --input-background: var(--bg);
  --input-border: var(--n0-200);
  --input-border-hover: var(--p1-300);
  --input-focus-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --input-focus-border: rgba(66, 153, 225, 1);
  --input-radius: px(4);
  // 
  // 
  --panel-bg: var(--n0-100);
  --panel-bg-hover: var(--p1-100);
  // 
  --tag-fg: var(--n0-50);
  --tag-bg: var(--n0-500);
  --tag-bg-hover: var(--n0-900);
}

:root {
  --button-fg: white;
  --button-bg: var(--p1-500);
  --button-bg-hover: var(--p1-600);
  --button-bg-active: var(--p1-700);
  --input-fg: var(--fg);
  --input-bg: var(--s2-bg);
  --input-border: var(--n0-200);
  --input-border-hover: var(--p1-300);
  --input-border-focus: rgba(66, 153, 225, 1);
  --input-shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --input-radius: 4px;
}

.dark {
  --button-fg: white;
  --button-bg: var(--p1-500);
  --button-bg-hover: var(--p1-600);
  --button-bg-active: var(--p1-700);
  --input-fg: var(--fg);
  --input-bg: var(--s2-bg);
  --input-border: var(--n0-500);
  --input-border-hover: var(--p1-500);
  --input-border-focus: rgba(66, 153, 225, 0.9);
  --input-shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --input-radius: 4px;
}

/* Text */
:root {
  --link-fg: var(--p1-700);
  --link-fg-hover: var(--p1-800);
  --link-fg-active: var(--p1-900);
  --mark-bg: #FFFF00;
}

.dark {
  --link-fg: var(--p1-300);
  --link-fg-hover: var(--p1-400);
  --link-fg-active: var(--p1-500);
  --mark-fg: var(--n0-950);
  --mark-bg: #FFFF00;
}