mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-07-23 14:40:58 -04:00
chat and theme work
This commit is contained in:
Christien Rioux
parent
ca6b00e021
commit
96e3251b3b
29 changed files with 729 additions and 389 deletions
|
|
@ -1,6 +1,9 @@
|
|||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:radix_colors/radix_colors.dart';
|
||||
|
||||
import 'theme_service.dart';
|
||||
|
||||
enum RadixThemeColor {
|
||||
scarlet, // tomato + red + violet
|
||||
babydoll, // crimson + purple + pink
|
||||
|
|
@ -265,174 +268,247 @@ RadixColor _radixColorSteps(
|
|||
}
|
||||
}
|
||||
|
||||
ColorScheme _radixColorScheme(
|
||||
// ignore: prefer_expression_function_bodies
|
||||
Brightness brightness,
|
||||
RadixThemeColor themeColor) {
|
||||
late RadixColor primaryScale;
|
||||
late RadixColor primaryAlphaScale;
|
||||
late RadixColor secondaryScale;
|
||||
late RadixColor tertiaryScale;
|
||||
late RadixColor grayScale;
|
||||
late RadixColor errorScale;
|
||||
extension ToScaleColor on RadixColor {
|
||||
ScaleColor toScale() => ScaleColor(
|
||||
appBackground: step1,
|
||||
subtleBackground: step2,
|
||||
elementBackground: step3,
|
||||
hoverElementBackground: step4,
|
||||
activedElementBackground: step5,
|
||||
subtleBorder: step6,
|
||||
border: step7,
|
||||
hoverBorder: step8,
|
||||
background: step9,
|
||||
hoverBackground: step10,
|
||||
subtleText: step11,
|
||||
text: step12,
|
||||
);
|
||||
}
|
||||
|
||||
class RadixScheme {
|
||||
RadixScheme(
|
||||
{required this.primaryScale,
|
||||
required this.primaryAlphaScale,
|
||||
required this.secondaryScale,
|
||||
required this.tertiaryScale,
|
||||
required this.grayScale,
|
||||
required this.errorScale});
|
||||
|
||||
RadixColor primaryScale;
|
||||
RadixColor primaryAlphaScale;
|
||||
RadixColor secondaryScale;
|
||||
RadixColor tertiaryScale;
|
||||
RadixColor grayScale;
|
||||
RadixColor errorScale;
|
||||
|
||||
ScaleScheme toScale() => ScaleScheme(
|
||||
primaryScale: primaryScale.toScale(),
|
||||
primaryAlphaScale: primaryAlphaScale.toScale(),
|
||||
secondaryScale: secondaryScale.toScale(),
|
||||
tertiaryScale: tertiaryScale.toScale(),
|
||||
grayScale: grayScale.toScale(),
|
||||
errorScale: errorScale.toScale(),
|
||||
);
|
||||
}
|
||||
|
||||
RadixScheme _radixScheme(Brightness brightness, RadixThemeColor themeColor) {
|
||||
late RadixScheme radixScheme;
|
||||
switch (themeColor) {
|
||||
// tomato + red + violet
|
||||
case RadixThemeColor.scarlet:
|
||||
primaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato);
|
||||
secondaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.tomato);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.yellow);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.tomato),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow));
|
||||
|
||||
// crimson + purple + pink
|
||||
case RadixThemeColor.babydoll:
|
||||
primaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.crimson);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple);
|
||||
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.pink);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.crimson);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.orange);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.crimson),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
|
||||
grayScale:
|
||||
_radixGraySteps(brightness, false, _RadixBaseColor.crimson),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange));
|
||||
// pink + cyan + plum
|
||||
case RadixThemeColor.vapor:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.pink);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.pink);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.cyan);
|
||||
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.plum);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.pink);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.pink),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.cyan),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.plum),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.pink),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
// yellow + amber + orange
|
||||
case RadixThemeColor.gold:
|
||||
primaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.yellow);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.yellow);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.yellow),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.yellow),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
// grass + orange + brown
|
||||
case RadixThemeColor.garden:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.grass);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.grass);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.grass);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.tomato);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.grass),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.grass),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.grass),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
|
||||
// green + brown + amber
|
||||
case RadixThemeColor.forest:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.green);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.green);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.green);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.tomato);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.green),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.green),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.green),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
|
||||
// sky + teal + violet
|
||||
case RadixThemeColor.arctic:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.sky);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.sky);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.teal);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.sky);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.sky),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.sky),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.sky),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
|
||||
// blue + indigo + mint
|
||||
case RadixThemeColor.lapis:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.blue);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.blue);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
|
||||
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.mint);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.blue);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.blue),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.blue),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.mint),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.blue),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
|
||||
// violet + purple + indigo
|
||||
case RadixThemeColor.eggplant:
|
||||
primaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.violet);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.violet);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.violet),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.violet),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
|
||||
// lime + yellow + orange
|
||||
case RadixThemeColor.lime:
|
||||
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.lime);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.lime);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow);
|
||||
tertiaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
|
||||
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.lime);
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.lime),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.lime),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.lime),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
// mauve + slate + sage
|
||||
case RadixThemeColor.grim:
|
||||
primaryScale = _radixGraySteps(brightness, false, _RadixBaseColor.tomato);
|
||||
primaryAlphaScale =
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato);
|
||||
secondaryScale =
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
|
||||
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.teal);
|
||||
grayScale = brightness == Brightness.dark
|
||||
? RadixColors.dark.gray
|
||||
: RadixColors.gray;
|
||||
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixGraySteps(brightness, false, _RadixBaseColor.tomato),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
|
||||
grayScale: brightness == Brightness.dark
|
||||
? RadixColors.dark.gray
|
||||
: RadixColors.gray,
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
}
|
||||
return radixScheme;
|
||||
}
|
||||
|
||||
return ColorScheme(
|
||||
ExtendedColorScheme _radixColorScheme(
|
||||
Brightness brightness, RadixThemeColor themeColor) {
|
||||
final radix = _radixScheme(brightness, themeColor);
|
||||
|
||||
return ExtendedColorScheme(
|
||||
scaleScheme: radix.toScale(),
|
||||
brightness: brightness,
|
||||
primary: primaryScale.step9,
|
||||
onPrimary: primaryScale.step12,
|
||||
primaryContainer: primaryScale.step3,
|
||||
onPrimaryContainer: primaryScale.step11,
|
||||
secondary: secondaryScale.step9,
|
||||
onSecondary: secondaryScale.step12,
|
||||
secondaryContainer: secondaryScale.step3,
|
||||
onSecondaryContainer: secondaryScale.step11,
|
||||
tertiary: tertiaryScale.step9,
|
||||
onTertiary: tertiaryScale.step12,
|
||||
tertiaryContainer: tertiaryScale.step3,
|
||||
onTertiaryContainer: tertiaryScale.step11,
|
||||
error: errorScale.step9,
|
||||
onError: errorScale.step12,
|
||||
errorContainer: errorScale.step3,
|
||||
onErrorContainer: errorScale.step11,
|
||||
background: primaryScale.step1, //gray scale?
|
||||
onBackground: primaryScale.step12,
|
||||
surface: primaryScale.step2, //gray scale?
|
||||
onSurface: primaryScale.step11,
|
||||
surfaceVariant: primaryScale.step3, //gray scale?
|
||||
onSurfaceVariant: primaryScale.step11,
|
||||
outline: primaryScale.step7,
|
||||
outlineVariant: primaryScale.step6,
|
||||
primary: radix.primaryScale.step9,
|
||||
onPrimary: radix.primaryScale.step12,
|
||||
primaryContainer: radix.primaryScale.step4,
|
||||
onPrimaryContainer: radix.primaryScale.step11,
|
||||
secondary: radix.secondaryScale.step9,
|
||||
onSecondary: radix.secondaryScale.step12,
|
||||
secondaryContainer: radix.secondaryScale.step3,
|
||||
onSecondaryContainer: radix.secondaryScale.step11,
|
||||
tertiary: radix.tertiaryScale.step9,
|
||||
onTertiary: radix.tertiaryScale.step12,
|
||||
tertiaryContainer: radix.tertiaryScale.step3,
|
||||
onTertiaryContainer: radix.tertiaryScale.step11,
|
||||
error: radix.errorScale.step9,
|
||||
onError: radix.errorScale.step12,
|
||||
errorContainer: radix.errorScale.step3,
|
||||
onErrorContainer: radix.errorScale.step11,
|
||||
background: radix.grayScale.step1,
|
||||
onBackground: radix.grayScale.step11,
|
||||
surface: radix.primaryScale.step1,
|
||||
onSurface: radix.primaryScale.step12,
|
||||
surfaceVariant: radix.secondaryScale.step2,
|
||||
onSurfaceVariant: radix.secondaryScale.step11,
|
||||
outline: radix.primaryScale.step7,
|
||||
outlineVariant: radix.primaryScale.step6,
|
||||
shadow: RadixColors.dark.gray.step1,
|
||||
scrim: primaryScale.step4,
|
||||
inverseSurface: primaryScale.step11,
|
||||
onInverseSurface: primaryScale.step2,
|
||||
inversePrimary: primaryScale.step10,
|
||||
surfaceTint: primaryAlphaScale.step9,
|
||||
scrim: radix.primaryScale.step9,
|
||||
inverseSurface: radix.primaryScale.step11,
|
||||
onInverseSurface: radix.primaryScale.step2,
|
||||
inversePrimary: radix.primaryScale.step10,
|
||||
surfaceTint: radix.primaryAlphaScale.step4,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue