feat(ui): add premium PluriWave redesign
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
@immutable
|
||||
class PluriWaveMotion extends ThemeExtension<PluriWaveMotion> {
|
||||
const PluriWaveMotion({
|
||||
required this.quick,
|
||||
required this.normal,
|
||||
required this.emphasisCurve,
|
||||
required this.standardCurve,
|
||||
});
|
||||
|
||||
final Duration quick;
|
||||
final Duration normal;
|
||||
final Curve emphasisCurve;
|
||||
final Curve standardCurve;
|
||||
|
||||
static const dark = PluriWaveMotion(
|
||||
quick: Duration(milliseconds: 140),
|
||||
normal: Duration(milliseconds: 240),
|
||||
emphasisCurve: Curves.easeOutCubic,
|
||||
standardCurve: Curves.easeInOut,
|
||||
);
|
||||
|
||||
@override
|
||||
PluriWaveMotion copyWith({
|
||||
Duration? quick,
|
||||
Duration? normal,
|
||||
Curve? emphasisCurve,
|
||||
Curve? standardCurve,
|
||||
}) {
|
||||
return PluriWaveMotion(
|
||||
quick: quick ?? this.quick,
|
||||
normal: normal ?? this.normal,
|
||||
emphasisCurve: emphasisCurve ?? this.emphasisCurve,
|
||||
standardCurve: standardCurve ?? this.standardCurve,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
ThemeExtension<PluriWaveMotion> lerp(covariant ThemeExtension<PluriWaveMotion>? other, double t) {
|
||||
if (other is! PluriWaveMotion) return this;
|
||||
return t < 0.5 ? this : other;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
import 'pluriwave_motion.dart';
|
||||
import 'pluriwave_tokens.dart';
|
||||
|
||||
abstract final class PluriWaveTheme {
|
||||
static ThemeData dark() {
|
||||
const tokens = PluriWaveTokens.dark;
|
||||
final colorScheme = const ColorScheme.dark().copyWith(
|
||||
primary: tokens.electricMagenta,
|
||||
secondary: tokens.warmCoral,
|
||||
surface: const Color(0xFF130B22),
|
||||
surfaceContainerLow: const Color(0xFF1A112C),
|
||||
onSurface: const Color(0xFFF4EEFF),
|
||||
onPrimary: Colors.white,
|
||||
);
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: colorScheme,
|
||||
scaffoldBackgroundColor: tokens.deepViolet,
|
||||
textTheme: GoogleFonts.interTextTheme(ThemeData.dark().textTheme),
|
||||
extensions: const <ThemeExtension<dynamic>>[
|
||||
tokens,
|
||||
PluriWaveMotion.dark,
|
||||
],
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 0,
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(tokens.radiusMd),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
extension PluriWaveThemeContextX on BuildContext {
|
||||
PluriWaveTokens get pluriTokens => Theme.of(this).extension<PluriWaveTokens>() ?? PluriWaveTokens.dark;
|
||||
|
||||
PluriWaveMotion get pluriMotion => Theme.of(this).extension<PluriWaveMotion>() ?? PluriWaveMotion.dark;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import 'dart:ui' show lerpDouble;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
@immutable
|
||||
class PluriWaveTokens extends ThemeExtension<PluriWaveTokens> {
|
||||
const PluriWaveTokens({
|
||||
required this.deepViolet,
|
||||
required this.electricMagenta,
|
||||
required this.warmCoral,
|
||||
required this.glassSurface,
|
||||
required this.glassBorder,
|
||||
required this.glowColor,
|
||||
required this.radiusSm,
|
||||
required this.radiusMd,
|
||||
required this.radiusLg,
|
||||
required this.spacingXs,
|
||||
required this.spacingSm,
|
||||
required this.spacingMd,
|
||||
required this.spacingLg,
|
||||
});
|
||||
|
||||
final Color deepViolet;
|
||||
final Color electricMagenta;
|
||||
final Color warmCoral;
|
||||
final Color glassSurface;
|
||||
final Color glassBorder;
|
||||
final Color glowColor;
|
||||
|
||||
final double radiusSm;
|
||||
final double radiusMd;
|
||||
final double radiusLg;
|
||||
|
||||
final double spacingXs;
|
||||
final double spacingSm;
|
||||
final double spacingMd;
|
||||
final double spacingLg;
|
||||
|
||||
static const dark = PluriWaveTokens(
|
||||
deepViolet: Color(0xFF24123D),
|
||||
electricMagenta: Color(0xFFE228D1),
|
||||
warmCoral: Color(0xFFFF6F61),
|
||||
glassSurface: Color(0x2AFFFFFF),
|
||||
glassBorder: Color(0x40FFFFFF),
|
||||
glowColor: Color(0x66E228D1),
|
||||
radiusSm: 10,
|
||||
radiusMd: 16,
|
||||
radiusLg: 24,
|
||||
spacingXs: 4,
|
||||
spacingSm: 8,
|
||||
spacingMd: 16,
|
||||
spacingLg: 24,
|
||||
);
|
||||
|
||||
@override
|
||||
PluriWaveTokens copyWith({
|
||||
Color? deepViolet,
|
||||
Color? electricMagenta,
|
||||
Color? warmCoral,
|
||||
Color? glassSurface,
|
||||
Color? glassBorder,
|
||||
Color? glowColor,
|
||||
double? radiusSm,
|
||||
double? radiusMd,
|
||||
double? radiusLg,
|
||||
double? spacingXs,
|
||||
double? spacingSm,
|
||||
double? spacingMd,
|
||||
double? spacingLg,
|
||||
}) {
|
||||
return PluriWaveTokens(
|
||||
deepViolet: deepViolet ?? this.deepViolet,
|
||||
electricMagenta: electricMagenta ?? this.electricMagenta,
|
||||
warmCoral: warmCoral ?? this.warmCoral,
|
||||
glassSurface: glassSurface ?? this.glassSurface,
|
||||
glassBorder: glassBorder ?? this.glassBorder,
|
||||
glowColor: glowColor ?? this.glowColor,
|
||||
radiusSm: radiusSm ?? this.radiusSm,
|
||||
radiusMd: radiusMd ?? this.radiusMd,
|
||||
radiusLg: radiusLg ?? this.radiusLg,
|
||||
spacingXs: spacingXs ?? this.spacingXs,
|
||||
spacingSm: spacingSm ?? this.spacingSm,
|
||||
spacingMd: spacingMd ?? this.spacingMd,
|
||||
spacingLg: spacingLg ?? this.spacingLg,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
PluriWaveTokens lerp(covariant ThemeExtension<PluriWaveTokens>? other, double t) {
|
||||
if (other is! PluriWaveTokens) return this;
|
||||
return PluriWaveTokens(
|
||||
deepViolet: Color.lerp(deepViolet, other.deepViolet, t) ?? deepViolet,
|
||||
electricMagenta: Color.lerp(electricMagenta, other.electricMagenta, t) ?? electricMagenta,
|
||||
warmCoral: Color.lerp(warmCoral, other.warmCoral, t) ?? warmCoral,
|
||||
glassSurface: Color.lerp(glassSurface, other.glassSurface, t) ?? glassSurface,
|
||||
glassBorder: Color.lerp(glassBorder, other.glassBorder, t) ?? glassBorder,
|
||||
glowColor: Color.lerp(glowColor, other.glowColor, t) ?? glowColor,
|
||||
radiusSm: lerpDouble(radiusSm, other.radiusSm, t) ?? radiusSm,
|
||||
radiusMd: lerpDouble(radiusMd, other.radiusMd, t) ?? radiusMd,
|
||||
radiusLg: lerpDouble(radiusLg, other.radiusLg, t) ?? radiusLg,
|
||||
spacingXs: lerpDouble(spacingXs, other.spacingXs, t) ?? spacingXs,
|
||||
spacingSm: lerpDouble(spacingSm, other.spacingSm, t) ?? spacingSm,
|
||||
spacingMd: lerpDouble(spacingMd, other.spacingMd, t) ?? spacingMd,
|
||||
spacingLg: lerpDouble(spacingLg, other.spacingLg, t) ?? spacingLg,
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user