From 55f719bd860272803d12ab776ae9e88204f58133 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 14 Apr 2024 10:52:35 +0800 Subject: [PATCH 1/4] Add theme data fields and zinc style --- forui/lib/forui.dart | 5 +- forui/lib/src/theme/style/zinc_style.dart | 42 +++++++++++ forui/lib/src/{ => theme}/theme.dart | 5 +- forui/lib/src/theme/theme_data.dart | 86 +++++++++++++++++++++++ forui/lib/src/theme_data.dart | 12 ---- 5 files changed, 134 insertions(+), 16 deletions(-) create mode 100644 forui/lib/src/theme/style/zinc_style.dart rename forui/lib/src/{ => theme}/theme.dart (87%) create mode 100644 forui/lib/src/theme/theme_data.dart delete mode 100644 forui/lib/src/theme_data.dart diff --git a/forui/lib/forui.dart b/forui/lib/forui.dart index 649451484..e70ce397a 100644 --- a/forui/lib/forui.dart +++ b/forui/lib/forui.dart @@ -1,5 +1,6 @@ /// A Flutter package for building beautiful user interfaces. library forui; -export 'src/theme.dart'; -export 'src/theme_data.dart'; +export 'src/theme/theme.dart'; +export 'src/theme/theme_data.dart'; +export 'src/theme/style/zinc_style.dart'; diff --git a/forui/lib/src/theme/style/zinc_style.dart b/forui/lib/src/theme/style/zinc_style.dart new file mode 100644 index 000000000..dfbd19f77 --- /dev/null +++ b/forui/lib/src/theme/style/zinc_style.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; + +import 'package:forui/forui.dart'; + +/// Zinc style of [FThemeData]. +/// +/// The zinc style is based on [shadcn/ui](https://ui.shadcn.com/themes). +extension FZincStyle on Never { + // TODO: Manually verify fields. Currently generated with a LLM. + + /// The light theme of [FZincStyle]. + static FThemeData light = FThemeData( + background: const Color(0xFFFFFFFF), + foreground: const Color(0xFF191919), + primary: const Color(0xFF191F26), + primaryForeground: const Color(0xFFFAFAFA), + secondary: const Color(0xFFE6E6E6), + secondaryForeground: const Color(0xFF191F26), + muted: const Color(0xFFE6E6E6), + mutedForeground: const Color(0xFF757575), + destructive: const Color(0xFFD62828), + destructiveForeground: const Color(0xFFFAFAFA), + border: const Color(0xFF191F26), + borderRadius: BorderRadius.circular(8), + ); + + /// The dark theme of [FZincStyle]. + static FThemeData dark = FThemeData( + background: const Color(0xFF191919), + foreground: const Color(0xFFFAFAFA), + primary: const Color(0xFFFAFAFA), + primaryForeground: const Color(0xFF191F26), + secondary: const Color(0xFF282828), + secondaryForeground: const Color(0xFFFAFAFA), + muted: const Color(0xFF282828), + mutedForeground: const Color(0xFFA6A6A6), + destructive: const Color(0xFF7F1D1D), + destructiveForeground: const Color(0xFFFAFAFA), + border: const Color(0xFF282828), + borderRadius: BorderRadius.circular(8), + ); +} diff --git a/forui/lib/src/theme.dart b/forui/lib/src/theme/theme.dart similarity index 87% rename from forui/lib/src/theme.dart rename to forui/lib/src/theme/theme.dart index 33da4b98e..98baa96e9 100644 --- a/forui/lib/src/theme.dart +++ b/forui/lib/src/theme/theme.dart @@ -1,13 +1,14 @@ import 'package:flutter/material.dart'; -import 'package:forui/src/theme_data.dart'; +import 'package:forui/src/theme/style/zinc_style.dart'; +import 'package:forui/src/theme/theme_data.dart'; /// Represents a ForUI theme. class FTheme extends StatefulWidget { /// Retrieves the theme data. static FThemeData of(BuildContext context) { final theme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>(); - return theme?.data ?? const FThemeData.light(); + return theme?.data ?? FZincStyle.light; } /// The theme data. diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart new file mode 100644 index 000000000..a35b2e939 --- /dev/null +++ b/forui/lib/src/theme/theme_data.dart @@ -0,0 +1,86 @@ +import 'package:flutter/material.dart'; + +/// A class that holds the theme data for the app. +class FThemeData { + /// The background color. + final Color background; + + /// The foreground color. + final Color foreground; + + /// The primary color. + final Color primary; + + /// The primary foreground color. + final Color primaryForeground; + + /// The secondary color. + final Color secondary; + + /// The secondary foreground color. + final Color secondaryForeground; + + /// The muted color. + final Color muted; + + /// The muted foreground color. + final Color mutedForeground; + + /// The destructive color. + final Color destructive; + + /// The destructive foreground color. + final Color destructiveForeground; + + /// The border color. + final Color border; + + /// The border radius. + final BorderRadius borderRadius; + + /// Creates a [FThemeData]. + const FThemeData({ + required this.background, + required this.foreground, + required this.primary, + required this.primaryForeground, + required this.secondary, + required this.secondaryForeground, + required this.muted, + required this.mutedForeground, + required this.destructive, + required this.destructiveForeground, + required this.border, + required this.borderRadius, + }); + + /// Creates a copy of this theme data with the given properties replaced. + FThemeData copyWith({ + Color? background, + Color? foreground, + Color? primary, + Color? primaryForeground, + Color? secondary, + Color? secondaryForeground, + Color? muted, + Color? mutedForeground, + Color? destructive, + Color? destructiveForeground, + Color? border, + BorderRadius? borderRadius, + }) => + FThemeData( + background: background ?? this.background, + foreground: foreground ?? this.foreground, + primary: primary ?? this.primary, + primaryForeground: primaryForeground ?? this.primaryForeground, + secondary: secondary ?? this.secondary, + secondaryForeground: secondaryForeground ?? this.secondaryForeground, + muted: muted ?? this.muted, + mutedForeground: mutedForeground ?? this.mutedForeground, + destructive: destructive ?? this.destructive, + destructiveForeground: destructiveForeground ?? this.destructiveForeground, + border: border ?? this.border, + borderRadius: borderRadius ?? this.borderRadius, + ); +} diff --git a/forui/lib/src/theme_data.dart b/forui/lib/src/theme_data.dart deleted file mode 100644 index 863dac915..000000000 --- a/forui/lib/src/theme_data.dart +++ /dev/null @@ -1,12 +0,0 @@ -/// A class that holds the theme data for the app. -class FThemeData { - - /// Creates a [FThemeData]. - const FThemeData(); - - /// Creates a [FThemeData] with light theme. - const FThemeData.light(); - - /// Creates a [FThemeData] with dark theme. - const FThemeData.dark(); -} From 0340e535afaf83f3fac8275e4b5411dd35245cc0 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 14 Apr 2024 10:56:47 +0800 Subject: [PATCH 2/4] Fix build issue --- samples/lib/main.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/lib/main.dart b/samples/lib/main.dart index b51411891..ac3aa2e70 100644 --- a/samples/lib/main.dart +++ b/samples/lib/main.dart @@ -13,7 +13,7 @@ class Application extends StatelessWidget { @override Widget build(BuildContext context) => FTheme( - data: const FThemeData(), + data: FZincStyle.light, child: Container(), ); } From 585142f94579be26842f8edc8cd379a469015f0a Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 15 Apr 2024 11:58:13 +0800 Subject: [PATCH 3/4] Fix review issues --- forui/lib/src/theme/style/zinc_style.dart | 34 +++++++++++------------ forui/lib/src/theme/theme.dart | 2 +- samples/lib/main.dart | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/forui/lib/src/theme/style/zinc_style.dart b/forui/lib/src/theme/style/zinc_style.dart index dfbd19f77..ac02a0158 100644 --- a/forui/lib/src/theme/style/zinc_style.dart +++ b/forui/lib/src/theme/style/zinc_style.dart @@ -5,38 +5,38 @@ import 'package:forui/forui.dart'; /// Zinc style of [FThemeData]. /// /// The zinc style is based on [shadcn/ui](https://ui.shadcn.com/themes). -extension FZincStyle on Never { +extension FZincThemeData on Never { // TODO: Manually verify fields. Currently generated with a LLM. - /// The light theme of [FZincStyle]. + /// The light theme of [FZincThemeData]. static FThemeData light = FThemeData( background: const Color(0xFFFFFFFF), - foreground: const Color(0xFF191919), - primary: const Color(0xFF191F26), + foreground: const Color(0xFF09090B), + primary: const Color(0xFF18181B), primaryForeground: const Color(0xFFFAFAFA), - secondary: const Color(0xFFE6E6E6), - secondaryForeground: const Color(0xFF191F26), - muted: const Color(0xFFE6E6E6), - mutedForeground: const Color(0xFF757575), - destructive: const Color(0xFFD62828), + secondary: const Color(0xFFF4F4F5), + secondaryForeground: const Color(0xFF18181B), + muted: const Color(0xFFF4F4F5), + mutedForeground: const Color(0xFF71717A), + destructive: const Color(0xFFEF4444), destructiveForeground: const Color(0xFFFAFAFA), - border: const Color(0xFF191F26), + border: const Color(0xFFE4E4E7), borderRadius: BorderRadius.circular(8), ); - /// The dark theme of [FZincStyle]. + /// The dark theme of [FZincThemeData]. static FThemeData dark = FThemeData( - background: const Color(0xFF191919), + background: const Color(0xFF09090B), foreground: const Color(0xFFFAFAFA), primary: const Color(0xFFFAFAFA), - primaryForeground: const Color(0xFF191F26), - secondary: const Color(0xFF282828), + primaryForeground: const Color(0xFF18181B), + secondary: const Color(0xFF27272A), secondaryForeground: const Color(0xFFFAFAFA), - muted: const Color(0xFF282828), - mutedForeground: const Color(0xFFA6A6A6), + muted: const Color(0xFF27272A), + mutedForeground: const Color(0xFFA1A1AA), destructive: const Color(0xFF7F1D1D), destructiveForeground: const Color(0xFFFAFAFA), - border: const Color(0xFF282828), + border: const Color(0xFF27272A), borderRadius: BorderRadius.circular(8), ); } diff --git a/forui/lib/src/theme/theme.dart b/forui/lib/src/theme/theme.dart index 98baa96e9..ed930b70a 100644 --- a/forui/lib/src/theme/theme.dart +++ b/forui/lib/src/theme/theme.dart @@ -8,7 +8,7 @@ class FTheme extends StatefulWidget { /// Retrieves the theme data. static FThemeData of(BuildContext context) { final theme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>(); - return theme?.data ?? FZincStyle.light; + return theme?.data ?? FZincThemeData.light; } /// The theme data. diff --git a/samples/lib/main.dart b/samples/lib/main.dart index ac3aa2e70..6e5df6b1c 100644 --- a/samples/lib/main.dart +++ b/samples/lib/main.dart @@ -13,7 +13,7 @@ class Application extends StatelessWidget { @override Widget build(BuildContext context) => FTheme( - data: FZincStyle.light, + data: FZincThemeData.light, child: Container(), ); } From 5142c6dc96319a8174ffdd77a3c43e0716fa9c09 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 15 Apr 2024 11:58:42 +0800 Subject: [PATCH 4/4] Remove todo comment --- forui/lib/src/theme/style/zinc_style.dart | 2 -- 1 file changed, 2 deletions(-) diff --git a/forui/lib/src/theme/style/zinc_style.dart b/forui/lib/src/theme/style/zinc_style.dart index ac02a0158..34c0b3afc 100644 --- a/forui/lib/src/theme/style/zinc_style.dart +++ b/forui/lib/src/theme/style/zinc_style.dart @@ -6,8 +6,6 @@ import 'package:forui/forui.dart'; /// /// The zinc style is based on [shadcn/ui](https://ui.shadcn.com/themes). extension FZincThemeData on Never { - // TODO: Manually verify fields. Currently generated with a LLM. - /// The light theme of [FZincThemeData]. static FThemeData light = FThemeData( background: const Color(0xFFFFFFFF),