mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-08-19 03:07:50 -04:00
ui cleanup
This commit is contained in:
Christien Rioux
parent
b7f7258c70
commit
1f99279cd2
23 changed files with 358 additions and 218 deletions
|
|
@ -270,7 +270,7 @@ RadixColor _radixColorSteps(
|
|||
}
|
||||
|
||||
extension ToScaleColor on RadixColor {
|
||||
ScaleColor toScale() => ScaleColor(
|
||||
ScaleColor toScale(RadixScaleExtra scaleExtra) => ScaleColor(
|
||||
appBackground: step1,
|
||||
subtleBackground: step2,
|
||||
elementBackground: step3,
|
||||
|
|
@ -282,33 +282,53 @@ extension ToScaleColor on RadixColor {
|
|||
background: step9,
|
||||
hoverBackground: step10,
|
||||
subtleText: step11,
|
||||
text: step12,
|
||||
appText: step12,
|
||||
foregroundText: scaleExtra.foregroundText,
|
||||
);
|
||||
}
|
||||
|
||||
class RadixScheme {
|
||||
RadixScheme(
|
||||
{required this.primaryScale,
|
||||
required this.primaryAlphaScale,
|
||||
required this.secondaryScale,
|
||||
required this.tertiaryScale,
|
||||
required this.grayScale,
|
||||
required this.errorScale});
|
||||
class RadixScaleExtra {
|
||||
RadixScaleExtra({required this.foregroundText});
|
||||
|
||||
RadixColor primaryScale;
|
||||
RadixColor primaryAlphaScale;
|
||||
RadixColor secondaryScale;
|
||||
RadixColor tertiaryScale;
|
||||
RadixColor grayScale;
|
||||
RadixColor errorScale;
|
||||
final Color foregroundText;
|
||||
}
|
||||
|
||||
class RadixScheme {
|
||||
const RadixScheme({
|
||||
required this.primaryScale,
|
||||
required this.primaryExtra,
|
||||
required this.primaryAlphaScale,
|
||||
required this.primaryAlphaExtra,
|
||||
required this.secondaryScale,
|
||||
required this.secondaryExtra,
|
||||
required this.tertiaryScale,
|
||||
required this.tertiaryExtra,
|
||||
required this.grayScale,
|
||||
required this.grayExtra,
|
||||
required this.errorScale,
|
||||
required this.errorExtra,
|
||||
});
|
||||
|
||||
final RadixColor primaryScale;
|
||||
final RadixScaleExtra primaryExtra;
|
||||
final RadixColor primaryAlphaScale;
|
||||
final RadixScaleExtra primaryAlphaExtra;
|
||||
final RadixColor secondaryScale;
|
||||
final RadixScaleExtra secondaryExtra;
|
||||
final RadixColor tertiaryScale;
|
||||
final RadixScaleExtra tertiaryExtra;
|
||||
final RadixColor grayScale;
|
||||
final RadixScaleExtra grayExtra;
|
||||
final RadixColor errorScale;
|
||||
final RadixScaleExtra errorExtra;
|
||||
|
||||
ScaleScheme toScale() => ScaleScheme(
|
||||
primaryScale: primaryScale.toScale(),
|
||||
primaryAlphaScale: primaryAlphaScale.toScale(),
|
||||
secondaryScale: secondaryScale.toScale(),
|
||||
tertiaryScale: tertiaryScale.toScale(),
|
||||
grayScale: grayScale.toScale(),
|
||||
errorScale: errorScale.toScale(),
|
||||
primaryScale: primaryScale.toScale(primaryExtra),
|
||||
primaryAlphaScale: primaryAlphaScale.toScale(primaryAlphaExtra),
|
||||
secondaryScale: secondaryScale.toScale(secondaryExtra),
|
||||
tertiaryScale: tertiaryScale.toScale(tertiaryExtra),
|
||||
grayScale: grayScale.toScale(grayExtra),
|
||||
errorScale: errorScale.toScale(errorExtra),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -318,231 +338,316 @@ RadixScheme _radixScheme(Brightness brightness, RadixThemeColor themeColor) {
|
|||
// tomato + red + violet
|
||||
case RadixThemeColor.scarlet:
|
||||
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));
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.tomato),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.yellow),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
);
|
||||
|
||||
// crimson + purple + pink
|
||||
case RadixThemeColor.babydoll:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.crimson),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale:
|
||||
_radixGraySteps(brightness, false, _RadixBaseColor.crimson),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange));
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
// pink + cyan + plum
|
||||
case RadixThemeColor.vapor:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.pink),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.cyan),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.plum),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.pink),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
// yellow + amber + orange
|
||||
case RadixThemeColor.gold:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.yellow),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.yellow),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
// grass + orange + brown
|
||||
case RadixThemeColor.garden:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.grass),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.grass),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.grass),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
// green + brown + amber
|
||||
case RadixThemeColor.forest:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.green),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.green),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.green),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
|
||||
// sky + teal + violet
|
||||
case RadixThemeColor.arctic:
|
||||
radixScheme = RadixScheme(
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.sky),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.sky),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.sky),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
|
||||
// blue + indigo + mint
|
||||
case RadixThemeColor.lapis:
|
||||
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));
|
||||
primaryScale: _radixColorSteps(brightness, false, _RadixBaseColor.blue),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.blue),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.mint),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.blue),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
);
|
||||
// violet + purple + indigo
|
||||
case RadixThemeColor.eggplant:
|
||||
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));
|
||||
primaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.violet),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.violet),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
);
|
||||
// lime + yellow + orange
|
||||
case RadixThemeColor.lime:
|
||||
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));
|
||||
primaryScale: _radixColorSteps(brightness, false, _RadixBaseColor.lime),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.lime),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.black),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.lime),
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
);
|
||||
// mauve + slate + sage
|
||||
case RadixThemeColor.grim:
|
||||
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));
|
||||
primaryScale:
|
||||
_radixGraySteps(brightness, false, _RadixBaseColor.tomato),
|
||||
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
primaryAlphaScale:
|
||||
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
|
||||
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
secondaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
|
||||
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
tertiaryScale:
|
||||
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
|
||||
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
grayScale: brightness == Brightness.dark
|
||||
? RadixColors.dark.gray
|
||||
: RadixColors.gray,
|
||||
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
|
||||
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
|
||||
);
|
||||
}
|
||||
return radixScheme;
|
||||
}
|
||||
|
||||
ColorScheme _radixColorScheme(Brightness brightness, RadixScheme radix) =>
|
||||
ColorScheme _scaleToColorScheme(Brightness brightness, ScaleScheme scale) =>
|
||||
ColorScheme(
|
||||
brightness: brightness,
|
||||
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,
|
||||
primary: scale.primaryScale.background, // reviewed
|
||||
onPrimary: scale.primaryScale.foregroundText, // reviewed
|
||||
primaryContainer:
|
||||
Colors.red, // scale.primaryScale.hoverElementBackground,
|
||||
onPrimaryContainer: Colors.green, //scale.primaryScale.subtleText,
|
||||
secondary: scale.secondaryScale.background,
|
||||
onSecondary: scale.secondaryScale.appText,
|
||||
secondaryContainer: scale.secondaryScale.hoverElementBackground,
|
||||
onSecondaryContainer: scale.secondaryScale.subtleText,
|
||||
tertiary: scale.tertiaryScale.background,
|
||||
onTertiary: scale.tertiaryScale.appText,
|
||||
tertiaryContainer: scale.tertiaryScale.hoverElementBackground,
|
||||
onTertiaryContainer: scale.tertiaryScale.subtleText,
|
||||
error: scale.errorScale.background,
|
||||
onError: scale.errorScale.appText,
|
||||
errorContainer: scale.errorScale.hoverElementBackground,
|
||||
onErrorContainer: scale.errorScale.subtleText,
|
||||
background: scale.grayScale.appBackground, // reviewed
|
||||
onBackground: scale.grayScale.appText, // reviewed
|
||||
surface: scale.primaryScale.activeElementBackground, // reviewed
|
||||
onSurface: scale.primaryScale.subtleText, // reviewed
|
||||
surfaceVariant: scale.primaryScale.elementBackground,
|
||||
onSurfaceVariant: scale.primaryScale.subtleText, // ?? reviewed a little
|
||||
outline: scale.primaryScale.border,
|
||||
outlineVariant: scale.primaryScale.subtleBorder,
|
||||
shadow: RadixColors.dark.gray.step1,
|
||||
scrim: radix.primaryScale.step9,
|
||||
inverseSurface: radix.primaryScale.step11,
|
||||
onInverseSurface: radix.primaryScale.step2,
|
||||
inversePrimary: radix.primaryScale.step10,
|
||||
surfaceTint: radix.primaryAlphaScale.step4,
|
||||
scrim: scale.primaryScale.background,
|
||||
inverseSurface: scale.primaryScale.subtleText,
|
||||
onInverseSurface: scale.primaryScale.subtleBackground,
|
||||
inversePrimary: scale.primaryScale.hoverBackground,
|
||||
surfaceTint: scale.primaryAlphaScale.hoverElementBackground,
|
||||
);
|
||||
|
||||
ChatTheme makeChatTheme(ScaleScheme scale, TextTheme textTheme) =>
|
||||
DefaultChatTheme(
|
||||
primaryColor: scale.primaryScale.background,
|
||||
secondaryColor: scale.secondaryScale.background,
|
||||
backgroundColor: scale.grayScale.subtleBackground,
|
||||
inputBackgroundColor: Colors.blue,
|
||||
inputBorderRadius: BorderRadius.zero,
|
||||
inputTextDecoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: scale.primaryScale.elementBackground,
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.fromLTRB(8, 12, 8, 12),
|
||||
border: const OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.all(Radius.circular(16))),
|
||||
),
|
||||
inputContainerDecoration: BoxDecoration(color: scale.primaryScale.border),
|
||||
inputPadding: const EdgeInsets.all(9),
|
||||
inputTextColor: scale.primaryScale.text,
|
||||
attachmentButtonIcon: const Icon(Icons.attach_file),
|
||||
receivedMessageBodyTextStyle: const TextStyle(
|
||||
color: neutral0,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1.5,
|
||||
),
|
||||
);
|
||||
primaryColor: scale.primaryScale.background,
|
||||
secondaryColor: scale.secondaryScale.background,
|
||||
backgroundColor: scale.grayScale.appBackground,
|
||||
inputBackgroundColor: Colors.blue,
|
||||
inputBorderRadius: BorderRadius.zero,
|
||||
inputTextDecoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: scale.primaryScale.elementBackground,
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.fromLTRB(8, 12, 8, 12),
|
||||
border: const OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.all(Radius.circular(16))),
|
||||
),
|
||||
inputContainerDecoration:
|
||||
BoxDecoration(color: scale.primaryScale.border),
|
||||
inputPadding: const EdgeInsets.all(9),
|
||||
inputTextColor: scale.primaryScale.appText,
|
||||
attachmentButtonIcon: const Icon(Icons.attach_file),
|
||||
sentMessageBodyTextStyle: TextStyle(
|
||||
color: scale.primaryScale.foregroundText,
|
||||
decorationColor: Colors.red,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1.5,
|
||||
),
|
||||
sentEmojiMessageTextStyle: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 64,
|
||||
),
|
||||
receivedMessageBodyTextStyle: TextStyle(
|
||||
color: scale.primaryScale.foregroundText,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1.5,
|
||||
),
|
||||
receivedEmojiMessageTextStyle: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 64,
|
||||
));
|
||||
|
||||
ThemeData radixGenerator(Brightness brightness, RadixThemeColor themeColor) {
|
||||
final textTheme = (brightness == Brightness.light)
|
||||
? Typography.blackCupertino
|
||||
: Typography.whiteCupertino;
|
||||
final radix = _radixScheme(brightness, themeColor);
|
||||
final colorScheme = _radixColorScheme(brightness, radix);
|
||||
final scaleScheme = radix.toScale();
|
||||
final colorScheme = _scaleToColorScheme(brightness, scaleScheme);
|
||||
|
||||
final themeData = ThemeData.from(
|
||||
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ class ScaleColor {
|
|||
required this.background,
|
||||
required this.hoverBackground,
|
||||
required this.subtleText,
|
||||
required this.text,
|
||||
required this.appText,
|
||||
required this.foregroundText,
|
||||
});
|
||||
|
||||
Color appBackground;
|
||||
|
|
@ -27,21 +28,24 @@ class ScaleColor {
|
|||
Color background;
|
||||
Color hoverBackground;
|
||||
Color subtleText;
|
||||
Color text;
|
||||
Color appText;
|
||||
Color foregroundText;
|
||||
|
||||
ScaleColor copyWith(
|
||||
{Color? appBackground,
|
||||
Color? subtleBackground,
|
||||
Color? elementBackground,
|
||||
Color? hoverElementBackground,
|
||||
Color? activeElementBackground,
|
||||
Color? subtleBorder,
|
||||
Color? border,
|
||||
Color? hoverBorder,
|
||||
Color? background,
|
||||
Color? hoverBackground,
|
||||
Color? subtleText,
|
||||
Color? text}) =>
|
||||
ScaleColor copyWith({
|
||||
Color? appBackground,
|
||||
Color? subtleBackground,
|
||||
Color? elementBackground,
|
||||
Color? hoverElementBackground,
|
||||
Color? activeElementBackground,
|
||||
Color? subtleBorder,
|
||||
Color? border,
|
||||
Color? hoverBorder,
|
||||
Color? background,
|
||||
Color? hoverBackground,
|
||||
Color? subtleText,
|
||||
Color? appText,
|
||||
Color? foregroundText,
|
||||
}) =>
|
||||
ScaleColor(
|
||||
appBackground: appBackground ?? this.appBackground,
|
||||
subtleBackground: subtleBackground ?? this.subtleBackground,
|
||||
|
|
@ -56,7 +60,8 @@ class ScaleColor {
|
|||
background: background ?? this.background,
|
||||
hoverBackground: hoverBackground ?? this.hoverBackground,
|
||||
subtleText: subtleText ?? this.subtleText,
|
||||
text: text ?? this.text,
|
||||
appText: appText ?? this.appText,
|
||||
foregroundText: foregroundText ?? this.foregroundText,
|
||||
);
|
||||
|
||||
// ignore: prefer_constructors_over_static_methods
|
||||
|
|
@ -86,6 +91,8 @@ class ScaleColor {
|
|||
const Color(0x00000000),
|
||||
subtleText: Color.lerp(a.subtleText, b.subtleText, t) ??
|
||||
const Color(0x00000000),
|
||||
text: Color.lerp(a.text, b.text, t) ?? const Color(0x00000000),
|
||||
appText: Color.lerp(a.appText, b.appText, t) ?? const Color(0x00000000),
|
||||
foregroundText: Color.lerp(a.foregroundText, b.foregroundText, t) ??
|
||||
const Color(0x00000000),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue