jcoffey-dev
81adcf107b
The coffeylabs theme brings coffeylabs.org's palette, type and blueprint grid to Mastodon. It loads the stock stylesheet and then overrides Mastodon's color tokens for both color schemes, adds Bricolage Grotesque and JetBrains Mono (OFL, served from the instance), and replaces the navigation wordmark. The default theme stays available to users. Small upstream changes, each with a modification notice: themes.yml registers the theme, themes.rb sets the dark browser-bar color, and the Dockerfile takes SOURCE_BASE_URL and SOURCE_TAG so "View source code" points at this repository, as the AGPL expects. Upstream's GitHub workflows are removed. .gitea/workflows/ci.yml builds the image on every change and publishes it, with a release, from tags named v<upstream>-coffeylabs.<n>. COFFEYLABS.md lists every change.
90 lines
2.6 KiB
SCSS
90 lines
2.6 KiB
SCSS
// coffeylabs.org palette. Mastodon builds its scheme tokens from the grey
|
|
// and indigo scales, so those become Coffey Labs' blue-slate and blue; the
|
|
// semantic tokens that need an exact coffeylabs.org value are set after.
|
|
|
|
html {
|
|
// Blue-slate, from the ground (#0C1017) up to the light ground (#EEF2F7)
|
|
--color-grey-50: #eef2f7;
|
|
--color-grey-100: #dce6f2;
|
|
--color-grey-200: #c3d0df;
|
|
--color-grey-300: #a7b8cc;
|
|
--color-grey-400: #8fa3bc;
|
|
--color-grey-500: #6b7c92;
|
|
--color-grey-600: #46586e;
|
|
--color-grey-700: #2f3d52;
|
|
--color-grey-800: #222d3c;
|
|
--color-grey-900: #131923;
|
|
--color-grey-950: #0c1017;
|
|
|
|
// Blue accent, #4EA8FF on dark and #1668C7 on light
|
|
--color-indigo-50: #eef6ff;
|
|
--color-indigo-100: #dceeff;
|
|
--color-indigo-200: #b9dcff;
|
|
--color-indigo-300: #7dc0ff;
|
|
--color-indigo-400: #4ea8ff;
|
|
--color-indigo-500: #2f8fef;
|
|
--color-indigo-600: #1668c7;
|
|
--color-indigo-700: #0f54a5;
|
|
--color-indigo-800: #0e4380;
|
|
--color-indigo-900: #0f3360;
|
|
--color-indigo-950: #0b1f3a;
|
|
|
|
// Status colors from coffeylabs.org: live green, warm orange
|
|
--color-green-400: #3ddc97;
|
|
--color-green-600: #0e8a5a;
|
|
--color-yellow-400: #ff8a00;
|
|
--color-yellow-700: #c75a00;
|
|
|
|
--cl-grid-line: rgb(78 168 255 / 6%);
|
|
--cl-glow: rgb(78 168 255 / 20%);
|
|
}
|
|
|
|
[data-color-scheme='dark'],
|
|
html:not([data-color-scheme]) {
|
|
--color-text-primary: #dce6f2;
|
|
--color-text-secondary: #8fa3bc;
|
|
--color-text-tertiary: #5f7288;
|
|
--color-text-brand: #4ea8ff;
|
|
|
|
--color-bg-primary: #0c1017;
|
|
--color-bg-secondary: #131923;
|
|
--color-bg-tertiary: #18202c;
|
|
|
|
// Accent buttons are bright blue with dark ink, as on coffeylabs.org
|
|
--color-bg-brand-base: #4ea8ff;
|
|
--color-bg-brand-base-hover: #7dc0ff;
|
|
--color-text-on-brand-base: #06101c;
|
|
--color-bg-brand-soft: #12304f;
|
|
--color-bg-brand-softest: #0f1d2e;
|
|
--color-border-brand-soft: #1f4b78;
|
|
|
|
--color-border-primary: #222d3c;
|
|
|
|
--dropdown-shadow:
|
|
0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px -12px rgb(0 0 0 / 60%);
|
|
}
|
|
|
|
[data-color-scheme='light'] {
|
|
--color-text-primary: #0f1822;
|
|
--color-text-secondary: #46586e;
|
|
--color-text-tertiary: #6b7c92;
|
|
--color-text-brand: #1668c7;
|
|
|
|
--color-bg-primary: #fff;
|
|
--color-bg-secondary: #eef2f7;
|
|
--color-bg-tertiary: #e9eff6;
|
|
|
|
--color-bg-brand-base: #1668c7;
|
|
--color-bg-brand-base-hover: #0f54a5;
|
|
--color-text-on-brand-base: #fff;
|
|
--color-bg-brand-soft: #dceeff;
|
|
--color-bg-brand-softest: #eef6ff;
|
|
|
|
--color-border-primary: #d6dfea;
|
|
|
|
--dropdown-shadow:
|
|
0 1px 2px rgb(15 24 34 / 5%), 0 8px 24px -12px rgb(15 24 34 / 14%);
|
|
--cl-grid-line: rgb(22 104 199 / 7%);
|
|
--cl-glow: rgb(22 104 199 / 14%);
|
|
}
|