diff --git a/packages/remix/demo/lib/components/select_use_case.dart b/packages/remix/demo/lib/components/select_use_case.dart index 94333ac40..428d29b45 100644 --- a/packages/remix/demo/lib/components/select_use_case.dart +++ b/packages/remix/demo/lib/components/select_use_case.dart @@ -37,22 +37,25 @@ class _SelectDemoState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - Select( - disabled: - context.knobs.boolean(label: 'disabled', initialValue: false), - variants: [context.knobs.variant(FortalezaSelectStyle.variants)], - value: selectedValue, - onChanged: (value) => setState(() => selectedValue = value), - button: (spec) => spec( - text: selectedValue, - trailingIcon: m.Icons.keyboard_arrow_down_rounded, - ), - items: List.generate( - items.length, - (index) => SelectMenuItem( - value: items[index], - child: XSelectMenuItemWidget( - text: items[index], + SizedBox( + width: 200, + child: Select( + disabled: + context.knobs.boolean(label: 'disabled', initialValue: false), + variants: [context.knobs.variant(FortalezaSelectStyle.variants)], + value: selectedValue, + onChanged: (value) => setState(() => selectedValue = value), + button: (spec) => spec( + text: selectedValue, + trailingIcon: m.Icons.keyboard_arrow_down_rounded, + ), + items: List.generate( + items.length, + (index) => SelectMenuItem( + value: items[index], + child: XSelectMenuItemWidget( + text: items[index], + ), ), ), ), diff --git a/packages/remix/lib/src/components/accordion/accordion_style.dart b/packages/remix/lib/src/components/accordion/accordion_style.dart index 87362592c..a4f059581 100644 --- a/packages/remix/lib/src/components/accordion/accordion_style.dart +++ b/packages/remix/lib/src/components/accordion/accordion_style.dart @@ -12,8 +12,7 @@ class AccordionStyle extends SpecStyle { final containerStyle = [ $.container.chain ..clipBehavior.antiAlias() - ..border.bottom.color.black() - ..border.bottom.color.withOpacity(0.2), + ..border.bottom.color.grey.shade400(), ]; final contentStyle = [ @@ -70,7 +69,10 @@ class AccordionDarkStyle extends AccordionStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.border.bottom.color.white(), + $.container.border.bottom.color.grey.shade700(), + $.header.text.style.color.white(), + $.header.trailingIcon.color.white(), + $.textContent.style.color.white(), ]); } } diff --git a/packages/remix/lib/src/components/chip/chip_style.dart b/packages/remix/lib/src/components/chip/chip_style.dart index 858a21bcd..2b33f4832 100644 --- a/packages/remix/lib/src/components/chip/chip_style.dart +++ b/packages/remix/lib/src/components/chip/chip_style.dart @@ -40,11 +40,14 @@ class ChipStyle extends SpecStyle { ..borderRadius(6) ..color.white() ..border.all.width(1) - ..border.color.grey.shade300() + ..border.color.grey.shade200() ..padding.vertical(8) ..padding.horizontal(12), - spec.on.disabled($.container.color.grey.shade400()), - spec.on.selected($.container.color.grey.shade100()), + spec.on.selected($.container.color.grey.shade200()), + spec.on.disabled( + $.label.style.color.grey.shade800(), + spec.on.selected($.container.color.grey.shade300()), + ), ]; return Style.create([ @@ -55,3 +58,32 @@ class ChipStyle extends SpecStyle { ]); } } + +class ChipDarkStyle extends ChipStyle { + const ChipDarkStyle(); + + @override + Style makeStyle(SpecConfiguration spec) { + final $ = spec.utilities; + + final containerStyle = [ + $.container.chain + ..border.all.color.grey.shade900() + ..color.black(), + spec.on.selected($.container.color.grey.shade900()), + spec.on.disabled( + $.label.style.color.grey.shade600(), + $.container.color.black(), + spec.on.selected($.container.color.grey.shade900()), + ), + ]; + + final labelStyle = $.label.chain..style.color.white(); + + return Style.create([ + super.makeStyle(spec).call(), + ...containerStyle, + labelStyle, + ]); + } +} diff --git a/packages/remix/lib/src/components/chip/chip_theme.dart b/packages/remix/lib/src/components/chip/chip_theme.dart index 460fd81d4..debd7c299 100644 --- a/packages/remix/lib/src/components/chip/chip_theme.dart +++ b/packages/remix/lib/src/components/chip/chip_theme.dart @@ -51,7 +51,7 @@ class FortalezaChipStyle extends ChipStyle { ..padding.horizontal(12), (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)), spec.on.selected($.container.color.$accent(4)), - (spec.on.disabled)( + spec.on.disabled( $.container.color.$neutral(2), $.icon.color.$neutral(8), ), diff --git a/packages/remix/lib/src/components/dialog/dialog_style.dart b/packages/remix/lib/src/components/dialog/dialog_style.dart index b9a064224..4d93b6543 100644 --- a/packages/remix/lib/src/components/dialog/dialog_style.dart +++ b/packages/remix/lib/src/components/dialog/dialog_style.dart @@ -48,3 +48,24 @@ class DialogStyle extends SpecStyle { ); } } + +class DialogDarkStyle extends DialogStyle { + const DialogDarkStyle(); + + @override + Style makeStyle(SpecConfiguration spec) { + final $ = spec.utilities; + + return Style.create([ + super.makeStyle(spec).call(), + $.container.chain + ..color.black() + ..border.all.width(1) + ..border.color.grey.shade900(), + $.title.style.color.white(), + $.description.chain + ..style.color.white() + ..style.color.grey.shade400(), + ]); + } +} diff --git a/packages/remix/lib/src/components/divider/divider_style.dart b/packages/remix/lib/src/components/divider/divider_style.dart index e724f0e65..58b0c054f 100644 --- a/packages/remix/lib/src/components/divider/divider_style.dart +++ b/packages/remix/lib/src/components/divider/divider_style.dart @@ -12,7 +12,7 @@ class DividerStyle extends SpecStyle { final containerStyle = [ $.container.chain - ..color.black12() + ..color.grey.shade300() ..borderRadius(99), horizontal($.container.height(1)), vertical($.container.width(1)), @@ -21,3 +21,17 @@ class DividerStyle extends SpecStyle { return Style.create([...containerStyle]); } } + +class DividerDarkStyle extends DividerStyle { + const DividerDarkStyle(); + + @override + Style makeStyle(SpecConfiguration spec) { + final $ = spec.utilities; + + return Style.create([ + super.makeStyle(spec).call(), + $.container.color.grey.shade800(), + ]); + } +} diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart index 1c256cdbe..5d9baeee1 100644 --- a/packages/remix/lib/src/components/radio/radio_style.dart +++ b/packages/remix/lib/src/components/radio/radio_style.dart @@ -63,6 +63,7 @@ class RadioDarkStyle extends RadioStyle { super.makeStyle(spec).call(), $.container.border.all.color.white(), $.indicator.color.white(), + $.text.style.color.white(), spec.on.disabled( $.container.border.all.color.white30(), $.indicator.color.white30(), diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart index 65e2647c0..4d32663a8 100644 --- a/packages/remix/lib/src/theme/remix_theme.dart +++ b/packages/remix/lib/src/theme/remix_theme.dart @@ -99,6 +99,9 @@ class RemixComponentTheme { callout: const CalloutDarkStyle(), card: const CardDarkStyle(), checkbox: const CheckboxDarkStyle(), + dialog: const DialogDarkStyle(), + chip: const ChipDarkStyle(), + divider: const DividerDarkStyle(), iconButton: const IconButtonDarkStyle(), progress: const ProgressDarkStyle(), radio: const RadioDarkStyle(),