From 83d51f744e6e6bf9dd9ef890b2840d3eae82970b Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Wed, 14 Feb 2024 22:56:30 +0100 Subject: [PATCH] refactor: update common.css --- priv/static/common.css | 16 +++++++++++++--- priv/static/styles.css | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/priv/static/common.css b/priv/static/common.css index a782ed5..b6f1d12 100644 --- a/priv/static/common.css +++ b/priv/static/common.css @@ -5,7 +5,11 @@ --col-neutral-950: #151515; --col-neutral-900: #1e1e1e; --col-neutral-800: #2f2f2f; - --col-zinc-500: #7e818b; + --col-neutral-100: #f5f5f5; + --col-azure-900: #202431; + --col-azure-800: #292d3e; + --col-azure-600: #51597b; + --col-azure-500: #7e818b; --col-sepia-450: #b1a894; --col-sepia-400: #cac0a9; --col-sepia-300: #e3d8be; @@ -15,8 +19,6 @@ /* Colors */ --col-magenta-800: #584355; --col-magenta-300: #ffaff3; - --col-azure-800: #292d3e; - --col-azure-600: #51597b; --col-cyan-200: #a6f0fc; --col-green-200: #c8ffa7; --col-yellow-300: #ffd596; @@ -25,15 +27,23 @@ /* Semantic colors */ --brand-primary: var(--col-magenta-300); + --brand-primary-dim: var(--col-magenta-800); + --brand-success: var(--col-green-200); + --brand-warning: var(--col-yellow-300); + --brand-error: var(--col-red-400); /* Light theme */ --light-theme-background: var(--col-sepia-050); + --light-theme-background-dim: var(--col-neutral-100); --light-theme-text: var(--col-black); --light-theme-text-secondary: var(--col-neutral-800); + --light-theme-code: var(--col-black); /* Dark theme */ --dark-theme-background: var(--col-azure-800); + --dark-theme-background-dim: var(--col-azure-900); --dark-theme-background-alt: var(--col-neutral-800); --dark-theme-text: var(--col-sepia-300); --dark-theme-text-secondary: var(--col-sepia-450); + --dark-theme-code: var(--col-orange-400); } diff --git a/priv/static/styles.css b/priv/static/styles.css index 74b5caa..634e861 100644 --- a/priv/static/styles.css +++ b/priv/static/styles.css @@ -40,7 +40,7 @@ html.theme-light { html.theme-dark { --color-background: var(--dark-theme-background); --color-link: var(--brand-primary); - --color-link-decoration: var(--col-magenta-800); + --color-link-decoration: var(--brand-primary-dim); --color-link-secondary: var(--dark-theme-text); --color-link-secondary-decoration: var(--dark-theme-text-secondary); --color-header-background: var(--brand-primary);