refactor: use new common.css

gleam-lang · Feb 14, 2024 · f0a37bb · f0a37bb
1 parent 1961ddb
commit f0a37bb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/priv/static/common.css b/priv/static/common.css
@@ -1,6 +1,6 @@
 /* This file contains design tokens used in core Gleam projects */
 :root {
-  /* Grays */
+  /* Greys */
   --col-black: #000000;
   --col-neutral-950: #151515;
   --col-neutral-900: #1e1e1e;
@@ -11,6 +11,7 @@
   --col-sepia-300: #e3d8be;
   --col-sepia-100: #fffbe8;
   --col-sepia-050: #fefefc;
+
   /* Colors */
   --col-magenta-800: #584355;
   --col-magenta-300: #ffaff3;
@@ -21,4 +22,18 @@
   --col-yellow-300: #ffd596;
   --col-orange-400: #ff9d35;
   --col-red-400: #ff6262;
+
+  /* Semantic colors */
+  --brand-primary: var(--col-magenta-300);
+
+  /* Light theme */
+  --light-theme-background: var(--col-sepia-050);
+  --light-theme-text: var(--col-black);
+  --light-theme-text-secondary: var(--col-neutral-800);
+
+  /* Dark theme */
+  --dark-theme-background: var(--col-azure-800);
+  --dark-theme-background-alt: var(--col-neutral-800);
+  --dark-theme-text: var(--col-sepia-300);
+  --dark-theme-text-secondary: var(--col-sepia-450);
 }
diff --git a/priv/static/styles.css b/priv/static/styles.css
@@ -23,32 +23,32 @@
 }
 
 html.theme-light {
-  --color-background: var(--col-sepia-050);
-  --color-link: var(--col-black);
-  --color-link-decoration: var(--col-magenta-300);
-  --color-link-secondary: var(--col-neutral-800);
+  --color-background: var(--light-theme-background);
+  --color-link: var(--light-theme-text);
+  --color-link-decoration: var(--brand-primary);
+  --color-link-secondary: var(--light-theme-text-secondary);
   --color-link-secondary-decoration: var(--color-link-decoration);
-  --color-header-background: var(--col-magenta-300);
-  --color-header-input-background: var(--col-sepia-050);
-  --color-header-link: var(--col-black);
-  --color-header-text: var(--col-black);
-  --color-text: var(--col-black);
-  --color-text-secondary: var(--col-neutral-800);
+  --color-header-background: var(--brand-primary);
+  --color-header-input-background: var(--light-theme-background);
+  --color-header-link: var(--light-theme-text);
+  --color-header-text: var(--light-theme-text);
+  --color-text: var(--light-theme-text);
+  --color-text-secondary: var(--light-theme-text-secondary);
   color-scheme: light;
 }
 
 html.theme-dark {
-  --color-background: var(--col-azure-800);
-  --color-link: var(--col-magenta-300);
+  --color-background: var(--dark-theme-background);
+  --color-link: var(--brand-primary);
   --color-link-decoration: var(--col-magenta-800);
-  --color-link-secondary: var(--col-sepia-300);
-  --color-link-secondary-decoration: var(--col-sepia-450);
-  --color-header-background: var(--col-magenta-300);
-  --color-header-input-background: var(--col-sepia-050);
+  --color-link-secondary: var(--dark-theme-text);
+  --color-link-secondary-decoration: var(--dark-theme-text-secondary);
+  --color-header-background: var(--brand-primary);
+  --color-header-input-background: var(--light-theme-background);
   --color-header-link: var(--col-black);
-  --color-header-text: var(--col-azure-800);
-  --color-text: var(--col-sepia-300);
-  --color-text-secondary: var(--col-sepia-450);
+  --color-header-text: var(--dark-theme-background);
+  --color-text: var(--dark-theme-text);
+  --color-text-secondary: var(--dark-theme-text-secondary);
   color-scheme: dark;
 }