feat(demo): improve support for dark color scheme

Author: homj

apps/demo/src/app/app.component.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     height: 100dvh;
-    background-color: var(--gray-0);
+    background-color: var(--surface-1);
 
     h1 {
         margin: 2rem;
@@ -49,7 +49,7 @@
         }
 
         .card {
-            background-color: white;
+            background-color: var(--surface-2);
             border: var(--border-size-1) solid var(--surface-3);
             border-radius: var(--radius-conditional-3);
         }

apps/demo/src/app/components/button/button.component.scss

@@ -1,6 +1,6 @@
 .c-button {
-    --tint: black;
-    --contrast: white;
+    --tint: var(--surface-inverted-1);
+    --contrast: var(--text-inverted-1);
 
     align-items: center;
     border-radius: var(--radius-2);
@@ -22,7 +22,7 @@
     }
 
     &[type='submit'] {
-        --tint: var(--indigo-7);
+        --tint: var(--brand);
     }
 
     &:hover {
@@ -63,7 +63,7 @@
     }
 
     &.c-button--outline {
-        border: var(--border-size-1) solid var(--surface-3);
+        border: var(--border-size-1) solid var(--surface-4);
     }
 
     &.c-button--loading {

apps/demo/src/app/components/button/button.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Output, ViewEncapsulation } from '@angular/core';
 import { bindAttribute, useAttribute, useBooleanAttribute } from '@bynary/angular-composables/attribute';
 import { provideBaseClass, useModifier, useModifierGroup } from '@bynary/angular-composables/class';
 import { useActivate } from '@bynary/angular-composables/observer';
@@ -18,16 +18,12 @@ import { useActivate } from '@bynary/angular-composables/observer';
 })
 export class ButtonComponent {
 
-    readonly element = inject(ElementRef).nativeElement as HTMLElement;
-
-    readonly role = useAttribute('role', { defaultValue: 'button' });
     readonly type = useAttribute('type', { defaultValue: 'button' });
     readonly disabled = useBooleanAttribute('disabled');
 
     readonly loading = useModifier('loading', { applyInitially: false });
 
     readonly appearance = useModifierGroup('solid');
-    readonly color = useModifierGroup(undefined, { prefix: 'color' });
 
     @Output()
     readonly active = useActivate({ click: true, keydown: [ 'Enter' ] });

apps/demo/src/styles.scss

@@ -1,4 +1,70 @@
 /* You can add global styles to this file, and also import other style files */
-@import "open-props/style";
-@import "open-props/normalize.min.css";
-@import "open-props/media.min.css";
+@import 'open-props/style';
+@import 'open-props/normalize.min.css';
+@import 'open-props/media.min.css';
+
+html {
+    --brand-light: var(--indigo-6);
+
+    --text-1-light: var(--gray-8);
+    --text-2-light: var(--gray-7);
+
+    --surface-1-light: var(--gray-0);
+    --surface-2-light: var(--gray-1);
+    --surface-3-light: var(--gray-2);
+    --surface-4-light: var(--gray-3);
+}
+
+html {
+    --brand-dark: var(--indigo-4);
+
+    --text-1-dark: var(--gray-1);
+    --text-2-dark: var(--gray-3);
+
+    --surface-1-dark: var(--gray-12);
+    --surface-2-dark: var(--gray-11);
+    --surface-3-dark: var(--gray-10);
+    --surface-4-dark: var(--gray-9);
+}
+
+:root {
+    --brand: var(--brand-light);
+
+    --text-1: var(--text-1-light);
+    --text-2: var(--text-2-light);
+
+    --text-inverted-1: var(--text-1-dark);
+    --text-inverted-2: var(--text-2-dark);
+
+    --surface-1: var(--surface-1-light);
+    --surface-2: var(--surface-2-light);
+    --surface-3: var(--surface-3-light);
+    --surface-4: var(--surface-4-light);
+
+    --surface-inverted-1: var(--surface-1-dark);
+    --surface-inverted-2: var(--surface-2-dark);
+    --surface-inverted-3: var(--surface-3-dark);
+    --surface-inverted-4: var(--surface-4-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --brand: var(--brand-dark);
+
+        --text-1: var(--text-1-dark);
+        --text-2: var(--text-2-dark);
+
+        --text-inverted-1: var(--text-1-light);
+        --text-inverted-2: var(--text-2-light);
+
+        --surface-1: var(--surface-1-dark);
+        --surface-2: var(--surface-2-dark);
+        --surface-3: var(--surface-3-dark);
+        --surface-4: var(--surface-4-dark);
+
+        --surface-inverted-1: var(--surface-1-light);
+        --surface-inverted-2: var(--surface-2-light);
+        --surface-inverted-3: var(--surface-3-light);
+        --surface-inverted-4: var(--surface-4-light);
+    }
+}