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..34c0b3afc --- /dev/null +++ b/forui/lib/src/theme/style/zinc_style.dart @@ -0,0 +1,40 @@ +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 FZincThemeData on Never { + /// The light theme of [FZincThemeData]. + static FThemeData light = FThemeData( + background: const Color(0xFFFFFFFF), + foreground: const Color(0xFF09090B), + primary: const Color(0xFF18181B), + primaryForeground: const Color(0xFFFAFAFA), + 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(0xFFE4E4E7), + borderRadius: BorderRadius.circular(8), + ); + + /// The dark theme of [FZincThemeData]. + static FThemeData dark = FThemeData( + background: const Color(0xFF09090B), + foreground: const Color(0xFFFAFAFA), + primary: const Color(0xFFFAFAFA), + primaryForeground: const Color(0xFF18181B), + secondary: const Color(0xFF27272A), + secondaryForeground: const Color(0xFFFAFAFA), + muted: const Color(0xFF27272A), + mutedForeground: const Color(0xFFA1A1AA), + destructive: const Color(0xFF7F1D1D), + destructiveForeground: const Color(0xFFFAFAFA), + border: const Color(0xFF27272A), + 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..ed930b70a 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 ?? FZincThemeData.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(); -} diff --git a/samples/lib/main.dart b/samples/lib/main.dart index b51411891..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: const FThemeData(), + data: FZincThemeData.light, child: Container(), ); }