@guardian/threads
Version:
119 lines (95 loc) • 3.8 kB
CSS
:root {
/* Useful non-semantic colors */
--non-semantic-color-neutral-100: hsl(0, 0%, 100%);
--non-semantic-color-neutral-98: hsl(0, 0%, 98%);
--non-semantic-color-neutral-40: hsl(0, 0%, 40%);
--non-semantic-color-neutral-25: hsl(0, 0%, 25%);
--non-semantic-color-neutral-13: hsl(0, 0%, 13%);
--non-semantic-color-neutral-0: hsl(0, 0%, 0%);
--non-semantic-color-coral-50: #efc2c2;
--non-semantic-color-coral-75: #f18aa6;
--non-semantic-color-coral-100: #ec6086;
--non-semantic-color-accessible-red: rgb(214, 100, 30);
--non-semantic-color-accessible-green: rgb(43, 159, 120);
/* Semantic (generally not changed by themes) */
--color-success: var(--non-semantic-color-accessible-green);
--color-error: var(--non-semantic-color-accessible-red);
--color-warning: rgb(255, 209, 66);
--color-highlight: rgb(253, 182, 0);
--color-highlight-text: var(--non-semantic-color-neutral-13);
/* Accent colors, useful for organising lists */
--color-accent-mint: #daffe7;
--color-accent-blue: #90dcff;
--color-accent-pink: #e1c7f5;
--color-accent-purple: #ffabdb;
--color-accent-orange: #ff7f0f;
--color-accent-red: #ff4e36;
}
/* ️✈️ Aero Theme (default)*/
:root,
[data-theme='aero'] {
/* Primary */
--color-primary-dark: rgb(31, 45, 62);
--color-primary: rgb(73, 89, 105);
--color-primary-light: rgb(129, 165, 200);
--color-primary-text: var(--non-semantic-color-neutral-98);
--color-primary-text-active: var(--non-semantic-color-neutral-100);
/* Secondary */
--color-secondary-dark: rgb(216, 216, 216);
--color-secondary: rgb(223, 223, 223);
--color-secondary-light: rgb(239, 239, 239);
--color-secondary-text: var(--non-semantic-color-neutral-13);
--color-secondary-text-active: var(--non-semantic-color-neutral-25);
/* Borders */
--color-border-dark: rgba(0, 0, 0, 0.2);
--color-border: rgba(0, 0, 0, 0.15);
--color-border-light: rgba(0, 0, 0, 0.05);
/* Selected */
--color-selected: var(--color-primary-light);
--color-selected-text: var(--non-semantic-color-neutral-98);
}
/* 🖍 Pastel */
[data-theme='pastel'] {
/* Primary */
--color-primary-dark: rgb(31, 45, 62);
--color-primary: var(--non-semantic-color-coral-50);
--color-primary-light: var(--non-semantic-color-coral-100);
--color-primary-text: var(--non-semantic-color-neutral-13);
--color-primary-text-active: var(--non-semantic-color-neutral-0);
/* Secondary */
--color-secondary-dark: var(--non-semantic-color-neutral-40);
--color-secondary: var(--non-semantic-color-neutral-98);
--color-secondary-light: var(--non-semantic-color-neutral-100);
--color-secondary-text: var(--non-semantic-color-neutral-13);
--color-secondary-text-active: var(--non-semantic-color-neutral-0);
/* Borders */
--color-border-dark: rgba(0, 0, 0, 0.2);
--color-border: rgba(0, 0, 0, 0.15);
--color-border-light: rgba(0, 0, 0, 0.05);
/* Cards and pop overs */
/* Selected */
--color-selected: var(--non-semantic-color-coral-100);
--color-selected-text: var(--non-semantic-color-neutral-98);
}
/* 🦇 Goth */
[data-theme='goth'] {
/* Primary */
--color-primary-dark: #1c1c1c;
--color-primary: #2c2c2c;
--color-primary-light: #303030;
--color-primary-text: var(--non-semantic-color-neutral-98);
--color-primary-text-active: var(--non-semantic-color-neutral-100);
/* Secondary */
--color-secondary-dark: #303030;
--color-secondary: #303030;
--color-secondary-light: #303030;
--color-primary-text: var(--non-semantic-color-neutral-98);
--color-primary-text-active: var(--non-semantic-color-neutral-100);
/* Borders */
--color-border-dark: rgba(0, 0, 0, 0.2);
--color-border: rgba(0, 0, 0, 0.15);
--color-border-light: rgba(0, 0, 0, 0.05);
/* Selected */
--color-selected: var(--color-primary-light);
--color-selected-text: var(--non-semantic-color-neutral-98);
}