2022-12-09 18:59:31 -05:00
|
|
|
// Veilid Colors
|
|
|
|
// -------------
|
|
|
|
//
|
|
|
|
// Base is origin color as annotated
|
|
|
|
//
|
|
|
|
// Shades from material color tool at:
|
|
|
|
// https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
|
|
|
|
//
|
|
|
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
2022-12-10 17:07:52 -05:00
|
|
|
/////////////////////////////////////////////////////////
|
|
|
|
// Colors
|
|
|
|
|
2022-12-09 18:59:31 -05:00
|
|
|
const Map<int, Color> primaryColorSwatch = {
|
|
|
|
50: Color(0xffe9e9f3),
|
|
|
|
100: Color(0xffc7c8e2),
|
|
|
|
200: Color(0xffa2a5ce),
|
|
|
|
300: Color(0xff7f82ba),
|
|
|
|
400: Color(0xff6667ab), // Base (6667ab)
|
|
|
|
500: Color(0xff4f4d9d),
|
|
|
|
600: Color(0xff484594),
|
|
|
|
700: Color(0xff403b88),
|
|
|
|
800: Color(0xff39327c),
|
|
|
|
900: Color(0xff2b2068),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPrimaryColor =
|
|
|
|
MaterialColor(0xff6667ab, primaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> primaryComplementaryColorSwatch = {
|
|
|
|
50: Color(0xfffafdee),
|
|
|
|
100: Color(0xfff4f9d3),
|
|
|
|
200: Color(0xffedf6b8),
|
|
|
|
300: Color(0xffe7f29f),
|
|
|
|
400: Color(0xffe2ed8d),
|
|
|
|
500: Color(0xffdde97d),
|
|
|
|
600: Color(0xffd0d776),
|
|
|
|
700: Color(0xffbdc16d),
|
|
|
|
800: Color(0xffabaa66), // Base (#abaa66)
|
|
|
|
900: Color(0xff8b845c),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPrimaryComplementaryColor =
|
|
|
|
MaterialColor(0xffabaa66, primaryComplementaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> primaryTriadicColorASwatch = {
|
|
|
|
50: Color(0xfff0e4f0),
|
|
|
|
100: Color(0xffdabcdb),
|
|
|
|
200: Color(0xffc290c3),
|
|
|
|
300: Color(0xffaa66ab), // Base (#aa66ab)
|
|
|
|
400: Color(0xff98489a),
|
|
|
|
500: Color(0xff892a8c),
|
|
|
|
600: Color(0xff7d2786),
|
|
|
|
700: Color(0xff6d217e),
|
|
|
|
800: Color(0xff5e1b76),
|
|
|
|
900: Color(0xff441168),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPrimaryTriadicColorA =
|
|
|
|
MaterialColor(0xffaa66ab, primaryTriadicColorASwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> primaryTriadicColorBSwatch = {
|
|
|
|
50: Color(0xffffe3dc),
|
|
|
|
100: Color(0xfff7c4c2),
|
|
|
|
200: Color(0xffdba2a2),
|
|
|
|
300: Color(0xffc08180),
|
|
|
|
400: Color(0xffab6667), // Base (#ab6667)
|
|
|
|
500: Color(0xff964c4f),
|
|
|
|
600: Color(0xff894347),
|
|
|
|
700: Color(0xff78373d),
|
|
|
|
800: Color(0xff672b35),
|
|
|
|
900: Color(0xff551e2a),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPrimaryTriadicColorB =
|
|
|
|
MaterialColor(0xffab6667, primaryTriadicColorBSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> secondaryColorSwatch = {
|
|
|
|
50: Color(0xffe3e8f7),
|
|
|
|
100: Color(0xffb8c6eb),
|
|
|
|
200: Color(0xff87a1dd), // Base (#87a1dd)
|
|
|
|
300: Color(0xff527dce),
|
|
|
|
400: Color(0xff1a61c1),
|
|
|
|
500: Color(0xff0048b5),
|
|
|
|
600: Color(0xff0040ab),
|
|
|
|
700: Color(0xff0037a0),
|
|
|
|
800: Color(0xff002e94),
|
|
|
|
900: Color(0xff001d7f),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialSecondaryColor =
|
|
|
|
MaterialColor(0xff87a1dd, secondaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> secondaryComplementaryColorSwatch = {
|
|
|
|
50: Color(0xfff6f1e2),
|
|
|
|
100: Color(0xffeadbb6),
|
|
|
|
200: Color(0xffddc387), // Base (#ddc387)
|
|
|
|
300: Color(0xffd2ac55),
|
|
|
|
400: Color(0xffcd9c2d),
|
|
|
|
500: Color(0xffc88c05),
|
|
|
|
600: Color(0xffc58200),
|
|
|
|
700: Color(0xffbf7400),
|
|
|
|
800: Color(0xffb96700),
|
|
|
|
900: Color(0xffb15000),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialSecondaryComplementaryColor =
|
|
|
|
MaterialColor(0xffddc387, secondaryComplementaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> backgroundColorSwatch = {
|
|
|
|
50: Color(0xffe3e5eb),
|
|
|
|
100: Color(0xffb9bdce),
|
|
|
|
200: Color(0xff8c93ac),
|
|
|
|
300: Color(0xff626a8c),
|
|
|
|
400: Color(0xff454d76),
|
|
|
|
500: Color(0xff273263),
|
|
|
|
600: Color(0xff222c5b),
|
|
|
|
700: Color(0xff1a2451),
|
|
|
|
800: Color(0xff131c45),
|
|
|
|
900: Color(0xff0b0b2f), // Base (#0b0b2f)
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialBackgroundColor =
|
|
|
|
MaterialColor(0xff0b0b2f, backgroundColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> backgroundComplementaryColorSwatch = {
|
|
|
|
50: Color(0xfffffed2),
|
|
|
|
100: Color(0xfffdf9cd),
|
|
|
|
200: Color(0xfff8f5c8),
|
|
|
|
300: Color(0xfff3efc3),
|
|
|
|
400: Color(0xffd1cea3),
|
|
|
|
500: Color(0xffb4b187),
|
|
|
|
600: Color(0xff89865e),
|
|
|
|
700: Color(0xff73714a),
|
|
|
|
800: Color(0xff53512c),
|
|
|
|
900: Color(0xff2f2f0b), // Base (#2f2f0b)
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialBackgroundComplementaryColor =
|
|
|
|
MaterialColor(0xff2f2f0b, backgroundComplementaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> desaturatedColorSwatch = {
|
|
|
|
50: Color(0xfff7fbff),
|
|
|
|
100: Color(0xfff2f6ff),
|
|
|
|
200: Color(0xffedf1fd),
|
|
|
|
300: Color(0xffe3e7f2),
|
|
|
|
400: Color(0xffc1c5d0), // Base (#c1c5d0)
|
|
|
|
500: Color(0xffa3a7b2),
|
|
|
|
600: Color(0xff797d87),
|
|
|
|
700: Color(0xff656973),
|
|
|
|
800: Color(0xff464952),
|
|
|
|
900: Color(0xff242830),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialDesaturatedColor =
|
|
|
|
MaterialColor(0xffc1c5d0, desaturatedColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> desaturatedComplementaryColorSwatch = {
|
|
|
|
50: Color(0xffecebe5),
|
|
|
|
100: Color(0xffd0ccc1), // Base (#d0ccc1)
|
|
|
|
200: Color(0xffb0aa9a),
|
|
|
|
300: Color(0xff908972),
|
|
|
|
400: Color(0xff796f54),
|
|
|
|
500: Color(0xff615837),
|
|
|
|
600: Color(0xff584e31),
|
|
|
|
700: Color(0xff4a4128),
|
|
|
|
800: Color(0xff3e341f),
|
|
|
|
900: Color(0xff312715),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialDesaturatedComplementaryColor =
|
|
|
|
MaterialColor(0xffd0ccc1, desaturatedComplementaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> auxiliaryColorSwatch = {
|
|
|
|
50: Color(0xffe7e4da), // Base (#e7e4da)
|
|
|
|
100: Color(0xffc2bbac),
|
|
|
|
200: Color(0xff988e7b),
|
|
|
|
300: Color(0xff6f634c),
|
|
|
|
400: Color(0xff53472b),
|
|
|
|
500: Color(0xff372c0a),
|
|
|
|
600: Color(0xff302403),
|
|
|
|
700: Color(0xff261a00),
|
|
|
|
800: Color(0xff1e0c00),
|
|
|
|
900: Color(0xff160000),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialAuxiliaryColor =
|
|
|
|
MaterialColor(0xffe7e4da, auxiliaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> auxiliaryComplementaryColorSwatch = {
|
|
|
|
50: Color(0xffdadde7), // Base (#dadde7)
|
|
|
|
100: Color(0xffa2abc6),
|
|
|
|
200: Color(0xff6575a2),
|
|
|
|
300: Color(0xff224580),
|
|
|
|
400: Color(0xff00266c),
|
|
|
|
500: Color(0xff000357),
|
|
|
|
600: Color(0xff000051),
|
|
|
|
700: Color(0xff000051),
|
|
|
|
800: Color(0xff000050),
|
|
|
|
900: Color(0xff00004f),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialAuxiliaryComplementaryColor =
|
|
|
|
MaterialColor(0xffdadde7, auxiliaryComplementaryColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> popColorSwatch = {
|
|
|
|
50: Color(0xfffee5f5),
|
|
|
|
100: Color(0xfffbbde7),
|
|
|
|
200: Color(0xfff88fd9),
|
|
|
|
300: Color(0xfff259c9), // Base (#f259c9)
|
|
|
|
400: Color(0xffec15bd),
|
|
|
|
500: Color(0xffe100b0),
|
|
|
|
600: Color(0xffd200ac),
|
|
|
|
700: Color(0xffbe00a7),
|
|
|
|
800: Color(0xffad00a1),
|
|
|
|
900: Color(0xff8e0097),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPopColor =
|
|
|
|
MaterialColor(0xfff259c9, popColorSwatch);
|
|
|
|
|
|
|
|
const Map<int, Color> popComplentaryColorSwatch = {
|
|
|
|
50: Color(0xffe6fdea),
|
|
|
|
100: Color(0xffc2f9cb),
|
|
|
|
200: Color(0xff96f6a9),
|
|
|
|
300: Color(0xff59f282), // Base (#59f282)
|
|
|
|
400: Color(0xff00ec60),
|
|
|
|
500: Color(0xff00e446),
|
|
|
|
600: Color(0xff00d33b),
|
|
|
|
700: Color(0xff00bf2d),
|
|
|
|
800: Color(0xff00ad21),
|
|
|
|
900: Color(0xff008b05),
|
|
|
|
};
|
|
|
|
|
|
|
|
const MaterialColor materialPopComplementaryColor =
|
|
|
|
MaterialColor(0xff59f282, popComplentaryColorSwatch);
|
2022-12-10 12:11:46 -05:00
|
|
|
|
2022-12-10 17:07:52 -05:00
|
|
|
/////////////////////////////////////////////////////////
|
|
|
|
// Spacing
|
|
|
|
|
|
|
|
const kDefaultSpacingFactor = 4.0;
|
|
|
|
|
2024-05-02 14:15:42 -04:00
|
|
|
const kDefaultMonoTerminalFontFamily = 'Fira Code';
|
2022-12-10 17:07:52 -05:00
|
|
|
const kDefaultMonoTerminalFontHeight = 1.2;
|
|
|
|
const kDefaultMonoTerminalFontSize = 12.0;
|
|
|
|
|
2024-05-02 14:15:42 -04:00
|
|
|
double spacingFactor(double multiplier) => multiplier * kDefaultSpacingFactor;
|
2022-12-10 17:07:52 -05:00
|
|
|
|
2024-05-02 14:15:42 -04:00
|
|
|
Padding pad(Widget child) =>
|
|
|
|
Padding(padding: const EdgeInsets.all(kDefaultSpacingFactor), child: child);
|
2022-12-10 17:07:52 -05:00
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////
|
|
|
|
// Theme
|
|
|
|
|
2022-12-14 16:50:33 -05:00
|
|
|
InputDecoration newInputDecoration(
|
2024-05-02 14:15:42 -04:00
|
|
|
String labelText, String? errorText, bool enabled) =>
|
|
|
|
InputDecoration(
|
|
|
|
labelText: labelText,
|
|
|
|
errorText: errorText,
|
|
|
|
filled: !enabled,
|
|
|
|
fillColor: materialPrimaryColor.shade300.withOpacity(0.1));
|
|
|
|
|
|
|
|
InputDecorationTheme newInputDecorationTheme() => InputDecorationTheme(
|
|
|
|
border: OutlineInputBorder(
|
|
|
|
borderSide: BorderSide(color: materialPrimaryColor.shade300)),
|
|
|
|
disabledBorder: OutlineInputBorder(
|
|
|
|
borderSide: BorderSide(color: materialPrimaryColor.shade600)),
|
|
|
|
focusedBorder: OutlineInputBorder(
|
|
|
|
borderSide: BorderSide(color: materialPrimaryColor.shade900)),
|
|
|
|
errorBorder: OutlineInputBorder(
|
|
|
|
borderSide: BorderSide(color: materialPopColor.shade800)),
|
|
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
|
|
borderSide: BorderSide(color: materialPopColor.shade600)),
|
|
|
|
errorStyle: TextStyle(
|
|
|
|
color: materialPopColor.shade600,
|
|
|
|
letterSpacing: 1.1,
|
|
|
|
),
|
|
|
|
floatingLabelStyle: TextStyle(
|
|
|
|
color: materialPrimaryColor.shade900,
|
|
|
|
letterSpacing: 1.1,
|
|
|
|
));
|
|
|
|
|
|
|
|
ThemeData newVeilidTheme() => ThemeData(
|
|
|
|
primarySwatch: materialPrimaryColor,
|
|
|
|
secondaryHeaderColor: materialSecondaryColor,
|
|
|
|
visualDensity: VisualDensity.adaptivePlatformDensity,
|
|
|
|
inputDecorationTheme: newInputDecorationTheme(),
|
|
|
|
);
|