Improve theme and add ci

.github/workflows/ci.yaml

@@ -0,0 +1,78 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  FLUTTER_VERSION: 3.16.5
+
+jobs:
+  analyze:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: flutter pub get
+      - run: flutter analyze
+
+  format:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: dart format --set-exit-if-changed .
+
+  linux:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: sudo apt update
+      - run: sudo apt install -y clang cmake curl libgtk-3-dev ninja-build pkg-config unzip
+        env:
+          DEBIAN_FRONTEND: noninteractive
+      - run: flutter pub get
+      - run: flutter build linux -v
+        working-directory: example
+
+  pub:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: flutter pub get
+      - run: flutter pub publish --dry-run
+
+  test:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: flutter test
+
+  web:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - run: flutter pub get
+      - run: flutter build web -v
+        working-directory: example

.github/workflows/publish.yaml

@@ -0,0 +1,25 @@
+name: Publish to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  FLUTTER_VERSION: 3.16.9
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: subosito/flutter-action@v1
+        with:
+          channel: 'stable'
+          flutter-version: ${{env.FLUTTER_VERSION}}
+      - uses: bluefireteam/flutter-gh-pages@v7
+        with:
+          workingDir: example
+          baseHref: /yaru.dart/
+          webRenderer: canvaskit
+          customArgs: --no-tree-shake-icons

example/lib/home.dart

@@ -1,2 +1 @@
-export 'src/home/color_disk.dart';
 export 'src/home/home_page.dart';

example/lib/src/colors/colors_view.dart

@@ -103,7 +103,7 @@ class ColorsView extends StatelessWidget {
             Text(
               colorName,
               style: TextStyle(
-                color: foregroundColor ?? foregroundColor?.contrastColor,
+                color: backgroundColor.contrastColor,
                 fontSize: 9,
               ),
             ),
@@ -113,7 +113,7 @@ class ColorsView extends StatelessWidget {
                   .replaceAll('Color(0x', '#')
                   .replaceAll(')', ''),
               style: TextStyle(
-                color: foregroundColor ?? backgroundColor.contrastColor,
+                color: backgroundColor.contrastColor,
                 fontSize: 7,
               ),
             ),
@@ -191,7 +191,10 @@ Map<String, (Color, Color?)> _getBaseColors(ThemeData theme) {
 Map<String, (Color, Color?)> getPrimaryColors(ThemeData theme) {
   return Map.fromEntries(
     Colors.accents.map(
-      (e) => MapEntry(e.toString(), (e, theme.colorScheme.onPrimary)),
+      (e) => MapEntry(
+        '#${e.value.toHex().toString()}',
+        (e, theme.colorScheme.onPrimary),
+      ),
     ),
   );
 }

example/lib/src/controls/chips.dart

@@ -13,7 +13,6 @@ class Chips extends StatelessWidget {
       children: [
         const Chip(label: Text('Chip')),
         Chip(
-          deleteIcon: const Icon(Icons.close),
           label: const Text('Deletable Chip'),
           onDeleted: () {},
         ),

example/lib/src/home/home_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:phoenix_theme/phoenix_theme.dart';
 
 import '../../colors.dart';
 import '../../containers.dart';
@@ -68,85 +69,7 @@ class HomePageState extends State<HomePage> {
         },
         items: _items,
       ),
-      appBar: AppBar(
-        backgroundColor: Colors.transparent,
-        leading: Center(
-          child: IconButton(
-            onPressed: () => themePageScaffoldKey.currentState?.openDrawer(),
-            icon: const Icon(Icons.menu),
-          ),
-        ),
-        title: const Text('Phoenix Theme'),
-        actions: [
-          IconButton(
-            onPressed: () => showSnack(context),
-            icon: const Icon(Icons.add),
-          ),
-          ValueListenableBuilder(
-            valueListenable: themeModeNotifier,
-            builder: (context, themeMode, widget) {
-              return PopupMenuButton<ThemeMode>(
-                onSelected: (v) => themeModeNotifier.value = v,
-                itemBuilder: (c) => ThemeMode.values
-                    .map(
-                      (e) => PopupMenuItem<ThemeMode>(
-                        value: e,
-                        child: Icon(
-                          [
-                            Icons.lightbulb,
-                            Icons.light_mode,
-                            Icons.dark_mode,
-                          ].elementAt(ThemeMode.values.indexOf(e)),
-                        ),
-                      ),
-                    )
-                    .toList(),
-                icon: Icon(
-                  [
-                    Icons.lightbulb,
-                    Icons.light_mode,
-                    Icons.dark_mode,
-                  ].elementAt(ThemeMode.values.indexOf(themeMode)),
-                ),
-              );
-            },
-          ),
-          ValueListenableBuilder(
-            valueListenable: colorNotifier,
-            builder: (context, color, widget) {
-              return PopupMenuButton<Color>(
-                onSelected: (v) => colorNotifier.value = v,
-                itemBuilder: (c) => Colors.accents
-                    .map(
-                      (e) => PopupMenuItem<Color>(
-                        value: e,
-                        child: Container(
-                          height: 30,
-                          width: 30,
-                          decoration: BoxDecoration(
-                            shape: BoxShape.circle,
-                            color: e,
-                          ),
-                        ),
-                      ),
-                    )
-                    .toList(),
-                icon: Container(
-                  height: 30,
-                  width: 30,
-                  decoration: BoxDecoration(
-                    shape: BoxShape.circle,
-                    color: color,
-                  ),
-                ),
-              );
-            },
-          ),
-          const SizedBox(
-            width: 10,
-          ),
-        ],
-      ),
+      appBar: const _AppBar(),
       body: LayoutBuilder(
         builder: (context, constraints) {
           if (constraints.maxWidth > 800) {
@@ -208,6 +131,107 @@ class HomePageState extends State<HomePage> {
   }
 }
 
+class _AppBar extends StatelessWidget implements PreferredSizeWidget {
+  const _AppBar();
+
+  @override
+  Widget build(BuildContext context) {
+    final show = context.mq.size.width > 800;
+    return Row(
+      children: [
+        if (show) SizedBox(width: 80, child: AppBar()),
+        if (show)
+          const SizedBox(
+            height: kToolbarHeight,
+            child: VerticalDivider(),
+          ),
+        Expanded(
+          child: AppBar(
+            automaticallyImplyLeading: false,
+            title: const Text('Phoenix Theme'),
+            actions: [
+              IconButton(
+                onPressed: () => showSnack(context),
+                icon: const Icon(Icons.add),
+              ),
+              ValueListenableBuilder(
+                valueListenable: themeModeNotifier,
+                builder: (context, themeMode, widget) {
+                  return IconButton(
+                    tooltip: '',
+                    onPressed: () {
+                      themeModeNotifier.value = themeMode == ThemeMode.dark
+                          ? ThemeMode.system
+                          : ThemeMode.values.elementAt(
+                              ThemeMode.values.indexOf(themeMode) + 1,
+                            );
+                    },
+                    icon: Icon(
+                      [
+                        Icons.theater_comedy_rounded,
+                        Icons.light_mode,
+                        Icons.dark_mode,
+                      ].elementAt(ThemeMode.values.indexOf(themeMode)),
+                    ),
+                  );
+                },
+              ),
+              ValueListenableBuilder(
+                valueListenable: colorNotifier,
+                builder: (context, color, widget) {
+                  return PopupMenuButton<Color>(
+                    onSelected: (v) => colorNotifier.value = v,
+                    itemBuilder: (c) => Colors.accents
+                        .map(
+                          (e) => PopupMenuItem<Color>(
+                            value: e,
+                            child: Container(
+                              height: 25,
+                              width: 25,
+                              decoration: BoxDecoration(
+                                shape: BoxShape.circle,
+                                color: e,
+                                border: Border.all(
+                                  color: e.scale(
+                                    lightness:
+                                        context.theme.isLight ? -0.5 : 0.5,
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                        )
+                        .toList(),
+                    icon: Container(
+                      height: 25,
+                      width: 25,
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                          color: color.scale(
+                            lightness: context.theme.isLight ? -0.5 : 0.5,
+                          ),
+                        ),
+                        shape: BoxShape.circle,
+                        color: color,
+                      ),
+                    ),
+                  );
+                },
+              ),
+              const SizedBox(
+                width: 10,
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size(0, kToolbarHeight);
+}
+
 class _Drawer extends StatelessWidget {
   const _Drawer({
     required this.items,