Merge pull request #342 from SolidOS/profileEditA11y

updated css var

Author: bourgeoa

src/index.ts

@@ -84,13 +84,6 @@ window.onpopstate = function (_event: any) {
   )
 }
 
-// It's not clear where this function is used, so unfortunately we cannot remove it:
-function dump (msg: string[]) {
-  console.log(msg.slice(0, -1))
-}
-
-global.dump = dump
-
 export {
   versionInfo
 }

src/styles/themes/dark.css

@@ -25,6 +25,7 @@ html[data-theme="dark"] {
   --color-border-darker: #333;
   --color-border-light: #666;
   --color-border-pale: #555;
+  --color-border-accent: #9999dd;
 
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -133,16 +134,23 @@ html[data-theme="dark"] {
   /* Spacing and Sizing */
   --spacing-tiny: 0.05em;
   --spacing-small: 0.1em;
+  --spacing-xxxs: 0.2em;
+  --spacing-xxs: 0.3em;
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75em;
+  --spacing-btn: 0.7em;
   --spacing-base: 0.5em;
   --spacing-md: 1em;
   --spacing-lg: 1.5em;
   --spacing-xl: 2em;
   --spacing-2xl: 3em;
+  --border-width-xthin: 0.05em;
+  --border-width-sm: 0.1em;
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-bold: 5px;
+  --border-radius-xs: 0.1em;
+  --border-radius-sm: 0.2em;
   --border-radius-base: 0.5em;
   --border-radius-lg: 0.75em;
   --border-radius-full: 1em;
@@ -165,6 +173,12 @@ html[data-theme="dark"] {
   /* Shadows */
   --box-shadow: 0 2px 8px rgba(0,0,0,0.3);
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
+  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
+  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
+  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
+  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.4);
 
   /* Accessibility */
   --min-touch-target: 44px;
@@ -178,15 +192,18 @@ html[data-theme="dark"] {
 
   /* Overlay and Modal */
   --overlay-bg: rgba(0, 0, 0, 0.7);
+  --overlay-bg-muted: rgba(0, 0, 0, 0.5);
   --z-index-modal: 9999;
   --z-index-skip-links: 1000;
 
   /* Opacity */
   --opacity-disabled: 0.6;
+  --opacity-input-disabled: 0.75;
 
   /* Layout Values */
   --max-width-readable: 65ch;
   --max-width-readable-wide: 70ch;
+  --grid-min-column: 30em;
 
   /* Outline Offsets */
   --outline-offset-sm: 2px;

src/styles/themes/light.css

@@ -6,6 +6,8 @@
 :root {
   /* Background and Text */
   --color-background: white;
+  --color-background-row-default: white;
+  --color-background-row-alternate: #f0f0f0;
   --color-text: #1A1A1A;
   --color-text-secondary: #666;
   --color-text-light: #aaa;
@@ -25,6 +27,7 @@
   --color-border-darker: #444;
   --color-border-light: #aaa;
   --color-border-pale: #eee;
+  --color-border-accent: #88c;
 
   /* Status Colors */
   --color-selected-bg: #8F3;
@@ -134,20 +137,34 @@
   /* Spacing and Sizing */
   --spacing-tiny: 0.05em;
   --spacing-small: 0.1em;
+  --spacing-xxxs: 0.2em;
+  --spacing-xxs: 0.3em;
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75em;
+  --spacing-btn: 0.7em;
   --spacing-base: 0.5em;
   --spacing-md: 1em;
   --spacing-lg: 1.5em;
   --spacing-xl: 2em;
   --spacing-2xl: 3em;
+  --border-width-xthin: 0.05em;
+  --border-width-sm: 0.1em;
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-bold: 5px;
+  --border-radius-xs: 0.1em;
+  --border-radius-sm: 0.2em;
   --border-radius-base: 0.5em;
   --border-radius-lg: 0.75em;
   --border-radius-full: 1em;
 
+  /* icons */
+  --icon-xxs: 1em;
+  --icon-xs: 1.5em;
+  --icon-sm: 1.8em;
+  --icon-base: 2em;
+  --icon-xl: 3.1em;
+
   /* Primary/Accent Colors */
   --color-primary: #7C4DFF;
   --color-primary-alpha: rgba(124, 77, 255, 0.25);
@@ -166,6 +183,12 @@
   /* Shadows */
   --box-shadow: 0 2px 8px rgba(124,77,255,0.08);
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
+  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
+  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
+  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
+  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
+  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
 
   /* Accessibility */
   --min-touch-target: 44px;
@@ -179,15 +202,18 @@
 
   /* Overlay and Modal */
   --overlay-bg: rgba(0, 0, 0, 0.5);
+  --overlay-bg-muted: rgba(0, 0, 0, 0.3);
   --z-index-modal: 9999;
   --z-index-skip-links: 1000;
 
   /* Opacity */
   --opacity-disabled: 0.6;
+  --opacity-input-disabled: 0.75;
 
   /* Layout Values */
   --max-width-readable: 65ch;
   --max-width-readable-wide: 70ch;
+  --grid-min-column: 30em;
 
   /* Outline Offsets */
   --outline-offset-sm: 2px;