offich · offich · Feb 28, 2025 · Feb 28, 2025
diff --git a/lib/shirley.dart b/lib/shirley.dart
@@ -7,6 +7,7 @@ import 'package:shirley/src/model/button_field.dart';
 import 'package:shirley/src/ui/components/dynamic_widget.dart';
 import 'package:shirley/src/ui/components/field_setting_container.dart';
 import 'package:shirley/src/ui/components/preview_container.dart';
+import 'package:shirley/src/ui/style/color.dart';
 import 'package:syntax_highlight/syntax_highlight.dart';
 
 class ShirleyDevToolsExtension extends HookWidget {
@@ -43,9 +44,6 @@ class Shirley extends HookWidget {
     final code = useState('');
     final jsonString = useState('');
 
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-    const secondaryColor = Color.fromRGBO(245, 88, 123, 1);
-
     final buttonField = useState(ButtonField(
       text: '1.Normal Button',
       textStyle: TextStyle(
@@ -57,8 +55,8 @@ class Shirley extends HookWidget {
       width: 120,
       buttonStyle: ElevatedButton.styleFrom(
         padding: const EdgeInsets.all(4),
-        backgroundColor: secondaryColor,
-        side: BorderSide(color: primaryColor, width: 4),
+        backgroundColor: ShirleyColor.secondaryColor,
+        side: BorderSide(color: ShirleyColor.primaryColor, width: 4),
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
       ),
     ));

diff --git a/lib/src/ui/components/field_setting/color_picker_block.dart b/lib/src/ui/components/field_setting/color_picker_block.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shirley/src/ui/components/dialog/color_picker_dialog.dart';
+import 'package:shirley/src/ui/style/color.dart';
 
 class ColorPickerBlock extends StatelessWidget {
   const ColorPickerBlock({
@@ -15,8 +16,6 @@ class ColorPickerBlock extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-
     return GestureDetector(
       onTap: () async {
         await showColorPickerDialog(
@@ -33,7 +32,7 @@ class ColorPickerBlock extends StatelessWidget {
           Container(
             decoration: BoxDecoration(
               color: pickerColor,
-              border: Border.all(width: 2.0, color: primaryColor),
+              border: Border.all(width: 2.0, color: ShirleyColor.primaryColor),
               borderRadius: BorderRadius.circular(4),
             ),
             height: 36,

diff --git a/lib/src/ui/components/field_setting/field_text_input.dart b/lib/src/ui/components/field_setting/field_text_input.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:shirley/src/ui/style/color.dart';
 
 class FieldTextInput extends HookWidget {
   const FieldTextInput({
@@ -27,26 +28,26 @@ class FieldTextInput extends HookWidget {
       return;
     }, [value]);
 
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       spacing: 4.0,
       children: [
         Text(title, style: TextStyle(fontSize: 14)),
         TextField(
-          cursorColor: primaryColor,
+          cursorColor: ShirleyColor.primaryColor,
           decoration: InputDecoration(
             isDense: true,
             hintText: placeholder,
             hintStyle: TextStyle(
               color: Colors.white.withValues(alpha: 0.3),
             ),
             enabledBorder: OutlineInputBorder(
-              borderSide: BorderSide(color: primaryColor, width: 2.0),
+              borderSide:
+                  BorderSide(color: ShirleyColor.primaryColor, width: 2.0),
             ),
             focusedBorder: OutlineInputBorder(
-              borderSide: BorderSide(color: primaryColor, width: 2.0),
+              borderSide:
+                  BorderSide(color: ShirleyColor.primaryColor, width: 2.0),
             ),
           ),
           controller: controller,

diff --git a/lib/src/ui/components/field_setting/text_setting_view.dart b/lib/src/ui/components/field_setting/text_setting_view.dart
@@ -3,6 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:shirley/src/model/button_field.dart';
 import 'package:shirley/src/ui/components/field_setting/color_picker_block.dart';
 import 'package:shirley/src/ui/components/field_setting/field_text_input.dart';
+import 'package:shirley/src/ui/style/color.dart';
 
 class TextSettingView extends HookWidget {
   const TextSettingView({
@@ -18,8 +19,6 @@ class TextSettingView extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-
     return SingleChildScrollView(
       padding: const EdgeInsets.only(top: 4.0, bottom: 8.0),
       child: Column(
@@ -74,7 +73,7 @@ class TextSettingView extends HookWidget {
                     Text('Font Weight', style: TextStyle(fontSize: 14)),
                     Container(
                       decoration: BoxDecoration(
-                        border: Border.all(color: primaryColor),
+                        border: Border.all(color: ShirleyColor.primaryColor),
                       ),
                       child: DropdownButton<FontWeight>(
                         isDense: true,

diff --git a/lib/src/ui/components/field_setting_container.dart b/lib/src/ui/components/field_setting_container.dart
@@ -4,6 +4,7 @@ import 'package:shirley/src/model/button_field.dart';
 import 'package:shirley/src/ui/components/field_setting/body_setting_view.dart';
 import 'package:shirley/src/ui/components/field_setting/quick_setting_view.dart';
 import 'package:shirley/src/ui/components/field_setting/text_setting_view.dart';
+import 'package:shirley/src/ui/style/color.dart';
 
 class FieldSettingContainer extends HookWidget {
   const FieldSettingContainer({
@@ -25,8 +26,6 @@ class FieldSettingContainer extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-
     return DefaultTabController(
       length: 3,
       child: Column(
@@ -35,12 +34,12 @@ class FieldSettingContainer extends HookWidget {
           TabBar(
             tabAlignment: TabAlignment.fill,
             indicatorSize: TabBarIndicatorSize.tab,
-            indicatorColor: primaryColor,
+            indicatorColor: ShirleyColor.primaryColor,
             labelStyle: TextStyle(fontSize: 16),
             splashBorderRadius:
                 const BorderRadius.vertical(top: Radius.circular(4)),
             overlayColor: WidgetStateProperty.all(
-              primaryColor.withAlpha((255.0 * 0.1).round()),
+              ShirleyColor.primaryColor.withAlpha((255.0 * 0.1).round()),
             ),
             tabs: [
               Tab(child: Text('Quick Settings')),
@@ -53,7 +52,7 @@ class FieldSettingContainer extends HookWidget {
             child: Container(
               padding: const EdgeInsets.all(16),
               decoration: BoxDecoration(
-                border: Border.all(color: primaryColor, width: 2),
+                border: Border.all(color: ShirleyColor.primaryColor, width: 2),
                 borderRadius: BorderRadius.circular(4.0),
               ),
               child: TabBarView(

diff --git a/lib/src/ui/components/preview/preview_code_view.dart b/lib/src/ui/components/preview/preview_code_view.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:shirley/src/ui/components/shirley_snack_bar.dart';
+import 'package:shirley/src/ui/style/color.dart';
 import 'package:syntax_highlight/syntax_highlight.dart';
 
 class PreviewCodeView extends HookWidget {
@@ -38,9 +39,6 @@ class PreviewCodeView extends HookWidget {
 
     final copying = useState(false);
 
-    const secondaryColor = Color.fromRGBO(245, 88, 123, 1);
-    const fourthlyColor = Color.fromRGBO(255, 245, 145, 1);
-
     return Stack(
       children: [
         Padding(
@@ -58,8 +56,8 @@ class PreviewCodeView extends HookWidget {
             height: 28,
             child: IconButton(
               style: IconButton.styleFrom(
-                foregroundColor: fourthlyColor,
-                backgroundColor: secondaryColor,
+                foregroundColor: ShirleyColor.fourthlyColor,
+                backgroundColor: ShirleyColor.secondaryColor,
               ),
               padding: EdgeInsets.all(0.0),
               icon: Icon(

diff --git a/lib/src/ui/components/preview_container.dart b/lib/src/ui/components/preview_container.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:shirley/src/ui/components/preview/preview_code_view.dart';
 import 'package:shirley/src/ui/components/preview/preview_widget_view.dart';
+import 'package:shirley/src/ui/style/color.dart';
 import 'package:syntax_highlight/syntax_highlight.dart';
 
 class PreviewContainer extends HookWidget {
@@ -18,8 +19,6 @@ class PreviewContainer extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    const primaryColor = Color.fromRGBO(228, 23, 73, 1);
-
     return DefaultTabController(
       length: 2,
       child: Column(
@@ -28,12 +27,12 @@ class PreviewContainer extends HookWidget {
           TabBar(
             tabAlignment: TabAlignment.fill,
             indicatorSize: TabBarIndicatorSize.tab,
-            indicatorColor: primaryColor,
+            indicatorColor: ShirleyColor.primaryColor,
             labelStyle: TextStyle(fontSize: 16),
             splashBorderRadius:
                 const BorderRadius.vertical(top: Radius.circular(4)),
             overlayColor: WidgetStateProperty.all(
-              primaryColor.withAlpha((255.0 * 0.1).round()),
+              ShirleyColor.primaryColor.withAlpha((255.0 * 0.1).round()),
             ),
             tabs: [
               Tab(child: Text('Preview')),
@@ -43,7 +42,7 @@ class PreviewContainer extends HookWidget {
           Expanded(
             child: Container(
               decoration: BoxDecoration(
-                border: Border.all(color: primaryColor, width: 2),
+                border: Border.all(color: ShirleyColor.primaryColor, width: 2),
                 borderRadius: BorderRadius.circular(4.0),
               ),
               child: TabBarView(

diff --git a/lib/src/ui/style/color.dart b/lib/src/ui/style/color.dart
@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+class ShirleyColor {
+  static const Color primaryColor = Color.fromRGBO(228, 23, 73, 1);
+  static const Color secondaryColor = Color.fromRGBO(245, 88, 123, 1);
+  static const Color fourthlyColor = Color.fromRGBO(255, 245, 145, 1);
+
+  static Color errorColor = Colors.red[300]!;
+}