Improve semantic consistency with dedicated surface and border tokens

Copilot · michaelschoenbaechler · Copilot · commit 03979dd71881 · 2025-10-28T12:30:25.000Z
Co-authored-by: michaelschoenbaechler &lt;49410646+michaelschoenbaechler@users.noreply.github.com&gt;
diff --git a/src/app/business/components/business-card/business-card.component.scss b/src/app/business/components/business-card/business-card.component.scss
@@ -9,7 +9,7 @@
 
 .business-label {
   border-radius: var(--ion-border-radius-lg);
-  border: 1px solid var(--ion-color-border);
+  border: var(--ion-border-width-thin) solid var(--ion-color-border);
   color: var(--ion-color-text-secondary);
   padding: var(--ion-padding-xs) var(--ion-padding-sm);
   font-size: var(--ion-font-size-sm);
diff --git a/src/app/council-member/components/council-member-card/council-member-card.component.scss b/src/app/council-member/components/council-member-card/council-member-card.component.scss
@@ -2,7 +2,7 @@
   border-radius: var(--ion-border-radius-sm);
   box-shadow: var(--ion-box-shadow-lg);
   overflow: hidden;
-  background: var(--ion-color-secondary);
+  background: var(--ion-color-surface);
   margin: 0 0 var(--ion-padding-sm) 0;
 }
 
@@ -37,5 +37,5 @@
   width: 2rem; /* adjust as per your needs */
   height: 2rem; /* adjust as per your needs */
   margin-right: var(--ion-padding-md);
-  border: var(--ion-color-border) 1px solid;
+  border: var(--ion-border-width-thin) solid var(--ion-color-border);
 }
diff --git a/src/app/shared/components/text-card/text-card.component.scss b/src/app/shared/components/text-card/text-card.component.scss
@@ -2,7 +2,7 @@
   border-radius: var(--ion-border-radius-sm);
   box-shadow: var(--ion-box-shadow-lg);
   overflow: hidden;
-  background: var(--ion-color-secondary);
+  background: var(--ion-color-surface);
   margin: 0 0 var(--ion-padding-sm) 0;
 }
 
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
@@ -113,6 +113,11 @@
   --ion-color-text-tertiary: var(--ion-color-medium);
   --ion-color-border: #e0e0e0;
   --ion-color-border-light: #f0f0f0;
+  --ion-color-surface: #ffffff; /* Card and surface backgrounds */
+
+  /* Border width tokens */
+  --ion-border-width-thin: 1px;
+  --ion-border-width-medium: 2px;
 }
 
 /*
@@ -157,5 +162,6 @@
     --ion-color-text-tertiary: var(--ion-color-medium);
     --ion-color-border: #404040;
     --ion-color-border-light: #2a2a2a;
+    --ion-color-surface: #1e1e1e; /* Card and surface backgrounds in dark mode */
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`border-radius: var(--ion-border-radius-sm);`
`3`	`3`	`box-shadow: var(--ion-box-shadow-lg);`
`4`	`4`	`overflow: hidden;`
`5`		`- background: var(--ion-color-secondary);`
	`5`	`+ background: var(--ion-color-surface);`
`6`	`6`	`margin: 0 0 var(--ion-padding-sm) 0;`
`7`	`7`	`}`
`8`	`8`
`@@ -37,5 +37,5 @@`
`37`	`37`	`width: 2rem; /* adjust as per your needs */`
`38`	`38`	`height: 2rem; /* adjust as per your needs */`
`39`	`39`	`margin-right: var(--ion-padding-md);`
`40`		`- border: var(--ion-color-border) 1px solid;`
	`40`	`+ border: var(--ion-border-width-thin) solid var(--ion-color-border);`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -113,6 +113,11 @@`
`113`	`113`	`--ion-color-text-tertiary: var(--ion-color-medium);`
`114`	`114`	`--ion-color-border: #e0e0e0;`
`115`	`115`	`--ion-color-border-light: #f0f0f0;`
	`116`	`+ --ion-color-surface: #ffffff; /* Card and surface backgrounds */`
	`117`	`+`
	`118`	`+ /* Border width tokens */`
	`119`	`+ --ion-border-width-thin: 1px;`
	`120`	`+ --ion-border-width-medium: 2px;`
`116`	`121`	`}`
`117`	`122`
`118`	`123`	`/*`
`@@ -157,5 +162,6 @@`
`157`	`162`	`--ion-color-text-tertiary: var(--ion-color-medium);`
`158`	`163`	`--ion-color-border: #404040;`
`159`	`164`	`--ion-color-border-light: #2a2a2a;`
	`165`	`+ --ion-color-surface: #1e1e1e; /* Card and surface backgrounds in dark mode */`
`160`	`166`	`}`
`161`	`167`	`}`