feat: Add Dark Theme

conceptadev · Oct 18, 2024 · e263b47 · e263b47
1 parent 339a822
commit e263b47
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 24 deletions.
diff --git a/packages/remix/demo/lib/components/select_use_case.dart b/packages/remix/demo/lib/components/select_use_case.dart
@@ -37,22 +37,25 @@ class _SelectDemoState extends State<SelectDemo> {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Select<String>(
-            disabled:
-                context.knobs.boolean(label: 'disabled', initialValue: false),
-            variants: [context.knobs.variant(FortalezaSelectStyle.variants)],
-            value: selectedValue,
-            onChanged: (value) => setState(() => selectedValue = value),
-            button: (spec) => spec(
-              text: selectedValue,
-              trailingIcon: m.Icons.keyboard_arrow_down_rounded,
-            ),
-            items: List.generate(
-              items.length,
-              (index) => SelectMenuItem<String>(
-                value: items[index],
-                child: XSelectMenuItemWidget(
-                  text: items[index],
+          SizedBox(
+            width: 200,
+            child: Select<String>(
+              disabled:
+                  context.knobs.boolean(label: 'disabled', initialValue: false),
+              variants: [context.knobs.variant(FortalezaSelectStyle.variants)],
+              value: selectedValue,
+              onChanged: (value) => setState(() => selectedValue = value),
+              button: (spec) => spec(
+                text: selectedValue,
+                trailingIcon: m.Icons.keyboard_arrow_down_rounded,
+              ),
+              items: List.generate(
+                items.length,
+                (index) => SelectMenuItem<String>(
+                  value: items[index],
+                  child: XSelectMenuItemWidget(
+                    text: items[index],
+                  ),
                 ),
               ),
             ),

diff --git a/packages/remix/lib/src/components/accordion/accordion_style.dart b/packages/remix/lib/src/components/accordion/accordion_style.dart
@@ -12,8 +12,7 @@ class AccordionStyle extends SpecStyle<AccordionSpecUtility> {
     final containerStyle = [
       $.container.chain
         ..clipBehavior.antiAlias()
-        ..border.bottom.color.black()
-        ..border.bottom.color.withOpacity(0.2),
+        ..border.bottom.color.grey.shade400(),
     ];
 
     final contentStyle = [
@@ -70,7 +69,10 @@ class AccordionDarkStyle extends AccordionStyle {
 
     return Style.create([
       super.makeStyle(spec).call(),
-      $.container.border.bottom.color.white(),
+      $.container.border.bottom.color.grey.shade700(),
+      $.header.text.style.color.white(),
+      $.header.trailingIcon.color.white(),
+      $.textContent.style.color.white(),
     ]);
   }
 }
diff --git a/packages/remix/lib/src/components/chip/chip_style.dart b/packages/remix/lib/src/components/chip/chip_style.dart
@@ -40,11 +40,14 @@ class ChipStyle extends SpecStyle<ChipSpecUtility> {
         ..borderRadius(6)
         ..color.white()
         ..border.all.width(1)
-        ..border.color.grey.shade300()
+        ..border.color.grey.shade200()
         ..padding.vertical(8)
         ..padding.horizontal(12),
-      spec.on.disabled($.container.color.grey.shade400()),
-      spec.on.selected($.container.color.grey.shade100()),
+      spec.on.selected($.container.color.grey.shade200()),
+      spec.on.disabled(
+        $.label.style.color.grey.shade800(),
+        spec.on.selected($.container.color.grey.shade300()),
+      ),
     ];
 
     return Style.create([
@@ -55,3 +58,32 @@ class ChipStyle extends SpecStyle<ChipSpecUtility> {
     ]);
   }
 }
+
+class ChipDarkStyle extends ChipStyle {
+  const ChipDarkStyle();
+
+  @override
+  Style makeStyle(SpecConfiguration<ChipSpecUtility> spec) {
+    final $ = spec.utilities;
+
+    final containerStyle = [
+      $.container.chain
+        ..border.all.color.grey.shade900()
+        ..color.black(),
+      spec.on.selected($.container.color.grey.shade900()),
+      spec.on.disabled(
+        $.label.style.color.grey.shade600(),
+        $.container.color.black(),
+        spec.on.selected($.container.color.grey.shade900()),
+      ),
+    ];
+
+    final labelStyle = $.label.chain..style.color.white();
+
+    return Style.create([
+      super.makeStyle(spec).call(),
+      ...containerStyle,
+      labelStyle,
+    ]);
+  }
+}
diff --git a/packages/remix/lib/src/components/chip/chip_theme.dart b/packages/remix/lib/src/components/chip/chip_theme.dart
@@ -51,7 +51,7 @@ class FortalezaChipStyle extends ChipStyle {
         ..padding.horizontal(12),
       (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)),
       spec.on.selected($.container.color.$accent(4)),
-      (spec.on.disabled)(
+      spec.on.disabled(
         $.container.color.$neutral(2),
         $.icon.color.$neutral(8),
       ),

diff --git a/packages/remix/lib/src/components/dialog/dialog_style.dart b/packages/remix/lib/src/components/dialog/dialog_style.dart
@@ -48,3 +48,24 @@ class DialogStyle extends SpecStyle<DialogSpecUtility> {
     );
   }
 }
+
+class DialogDarkStyle extends DialogStyle {
+  const DialogDarkStyle();
+
+  @override
+  Style makeStyle(SpecConfiguration<DialogSpecUtility> spec) {
+    final $ = spec.utilities;
+
+    return Style.create([
+      super.makeStyle(spec).call(),
+      $.container.chain
+        ..color.black()
+        ..border.all.width(1)
+        ..border.color.grey.shade900(),
+      $.title.style.color.white(),
+      $.description.chain
+        ..style.color.white()
+        ..style.color.grey.shade400(),
+    ]);
+  }
+}
diff --git a/packages/remix/lib/src/components/divider/divider_style.dart b/packages/remix/lib/src/components/divider/divider_style.dart
@@ -12,7 +12,7 @@ class DividerStyle extends SpecStyle<DividerSpecUtility> {
 
     final containerStyle = [
       $.container.chain
-        ..color.black12()
+        ..color.grey.shade300()
         ..borderRadius(99),
       horizontal($.container.height(1)),
       vertical($.container.width(1)),
@@ -21,3 +21,17 @@ class DividerStyle extends SpecStyle<DividerSpecUtility> {
     return Style.create([...containerStyle]);
   }
 }
+
+class DividerDarkStyle extends DividerStyle {
+  const DividerDarkStyle();
+
+  @override
+  Style makeStyle(SpecConfiguration<DividerSpecUtility> spec) {
+    final $ = spec.utilities;
+
+    return Style.create([
+      super.makeStyle(spec).call(),
+      $.container.color.grey.shade800(),
+    ]);
+  }
+}
diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart
@@ -63,6 +63,7 @@ class RadioDarkStyle extends RadioStyle {
       super.makeStyle(spec).call(),
       $.container.border.all.color.white(),
       $.indicator.color.white(),
+      $.text.style.color.white(),
       spec.on.disabled(
         $.container.border.all.color.white30(),
         $.indicator.color.white30(),

diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart
@@ -99,6 +99,9 @@ class RemixComponentTheme {
       callout: const CalloutDarkStyle(),
       card: const CardDarkStyle(),
       checkbox: const CheckboxDarkStyle(),
+      dialog: const DialogDarkStyle(),
+      chip: const ChipDarkStyle(),
+      divider: const DividerDarkStyle(),
       iconButton: const IconButtonDarkStyle(),
       progress: const ProgressDarkStyle(),
       radio: const RadioDarkStyle(),