refactor: update common.css

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);
 }

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);