[FigmaComponents] Define base colors and effects

lib/ente_theme_data.dart

@@ -2,6 +2,8 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
+import 'package:photos/theme/colors.dart';
+import 'package:photos/theme/effects.dart';
 
 final lightThemeData = ThemeData(
   fontFamily: 'Inter',
@@ -364,28 +366,11 @@ extension CustomColorScheme on ColorScheme {
       ? Colors.black.withOpacity(0.32)
       : Colors.black.withOpacity(0.64);
 
-  Color get fillFaint => brightness == Brightness.light
-      ? Colors.white.withOpacity(0.04)
-      : Colors.black.withOpacity(0.12);
-  Color get warning500 => const Color.fromRGBO(255, 101, 101, 1);
-
-  List<BoxShadow> get shadowMenu => brightness == Brightness.light
-      ? [
-          BoxShadow(blurRadius: 6, color: Colors.white.withOpacity(0.16)),
-          BoxShadow(
-            blurRadius: 6,
-            color: Colors.white.withOpacity(0.12),
-            offset: const Offset(0, 3),
-          ),
-        ]
-      : [
-          BoxShadow(blurRadius: 6, color: Colors.black.withOpacity(0.50)),
-          BoxShadow(
-            blurRadius: 6,
-            color: Colors.black.withOpacity(0.25),
-            offset: const Offset(0, 3),
-          ),
-        ];
+  Color get fillFaint =>
+      brightness == Brightness.light ? fillFaintLight : fillFaintDark;
+
+  List<BoxShadow> get shadowMenu =>
+      brightness == Brightness.light ? shadowMenuLight : shadowMenuDark;
 }
 
 OutlinedButtonThemeData buildOutlinedButtonThemeData({

lib/theme/colors.dart

@@ -0,0 +1,59 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+// Background Colors
+const Color backgroundBaseLight = Color.fromRGBO(255, 255, 255, 1);
+const Color backgroundElevatedLight = Color.fromRGBO(255, 255, 255, 1);
+const Color backgroundElevated2Light = Color.fromRGBO(251, 251, 251, 1);
+
+const Color backgroundBaseDark = Color.fromRGBO(0, 0, 0, 1);
+const Color backgroundElevatedDark = Color.fromRGBO(27, 27, 27, 1);
+const Color backgroundElevated2Dark = Color.fromRGBO(37, 37, 37, 1);
+
+// Backdrop Colors
+const Color backdropBaseLight = Color.fromRGBO(255, 255, 255, 0.75);
+const Color backdropBaseMuteLight = Color.fromRGBO(255, 255, 255, 0.30);
+
+const Color backdropBaseDark = Color.fromRGBO(0, 0, 0, 0.65);
+const Color backdropBaseMuteDark = Color.fromRGBO(0, 0, 0, 0.20);
+
+// Text Colors
+const Color textBaseLight = Color.fromRGBO(0, 0, 0, 1);
+const Color textMutedLight = Color.fromRGBO(0, 0, 0, 0.6);
+const Color textFaintLight = Color.fromRGBO(0, 0, 0, 0.5);
+
+const Color textBaseDark = Color.fromRGBO(255, 255, 255, 1);
+const Color textMutedDark = Color.fromRGBO(255, 255, 255, 0.7);
+const Color textFaintDark = Color.fromRGBO(255, 255, 255, 0.5);
+
+// Fill Colors
+const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
+const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
+const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+
+const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
+const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
+const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
+
+// Stroke Colors
+const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);
+const Color strokeMutedLight = Color.fromRGBO(0, 0, 0, 0.24);
+const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+
+const Color strokeBaseDark = Color.fromRGBO(255, 255, 255, 1);
+const Color strokeMutedDark = Color.fromRGBO(255, 255, 255, 0.24);
+const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
+
+// Fixed Colors
+
+const Color primary700 = Color.fromRGBO(0, 179, 60, 1);
+const Color primary500 = Color.fromRGBO(29, 185, 84, 1);
+const Color primary400 = Color.fromRGBO(38, 203, 95, 1);
+const Color primary300 = Color.fromRGBO(1, 222, 77, 1);
+
+const Color warning700 = Color.fromRGBO(234, 63, 63, 1);
+const Color warning500 = Color.fromRGBO(255, 101, 101, 1);
+const Color warning400 = Color.fromRGBO(255, 111, 111, 1);
+
+const Color caution500 = Color.fromRGBO(255, 194, 71, 1);

lib/theme/effects.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+List<BoxShadow> shadowFloatLight = const [
+  BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),
+];
+
+List<BoxShadow> shadowMenuLight = const [
+  BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)),
+  BoxShadow(
+    blurRadius: 6,
+    color: Color.fromRGBO(0, 0, 0, 0.12),
+    offset: Offset(0, 3),
+  ),
+];
+
+List<BoxShadow> shadowButtonLight = const [
+  BoxShadow(
+    blurRadius: 4,
+    color: Color.fromRGBO(0, 0, 0, 0.25),
+    offset: Offset(0, 4),
+  ),
+];
+
+List<BoxShadow> shadowFloatDark = const [
+  BoxShadow(
+    blurRadius: 12,
+    color: Color.fromRGBO(0, 0, 0, 0.75),
+    offset: Offset(0, 2),
+  ),
+];
+
+List<BoxShadow> shadowMenuDark = const [
+  BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.50)),
+  BoxShadow(
+    blurRadius: 6,
+    color: Color.fromRGBO(0, 0, 0, 0.25),
+    offset: Offset(0, 3),
+  ),
+];
+
+List<BoxShadow> shadowButtonDark = const [
+  BoxShadow(
+    blurRadius: 4,
+    color: Color.fromRGBO(0, 0, 0, 0.75),
+    offset: Offset(0, 4),
+  ),
+];
+
+const blurBase = 96;
+const blurMuted = 48;
+const blurFaint = 24;

lib/ui/components/notification_warning_widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
+import 'package:photos/theme/colors.dart';
 
 class NotificationWarningWidget extends StatelessWidget {
   final IconData warningIcon;
@@ -28,7 +29,7 @@ class NotificationWarningWidget extends StatelessWidget {
                 Radius.circular(8),
               ),
               boxShadow: Theme.of(context).colorScheme.shadowMenu,
-              color: Theme.of(context).colorScheme.warning500,
+              color: warning500,
             ),
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),