<commit_before>library liquid_material.radio_button;

import 'dart:html' as html;
import 'package:liquid/liquid.dart';
import 'package:liquid/vdom.dart' as v;
import 'package:vcss/vcss.dart' as css;
import 'button.dart';
import '../layout.dart';
import '../style.dart';

class RadioButtonStyleSheet extends css.StyleSheet {
  static const size = const css.Size.px(48);
  static const radioSize = const css.Size.px(16);

  build() => [
      css.rule('.RadioButton', [
        css.width(size),
        css.height(size),
        css.padding(Layout.gridSize * 2)
      ]),

      css.rule('.RadioButton_off', [
        css.position('absolute'),
        css.top(0),
        css.left(0),
        css.width(radioSize),
        css.height(radioSize),
        css.border('2px solid #5a5a5a'),
        css.borderRadius('50%')
      ]),

      css.rule('.RadioButton_on', [
        css.position('absolute'),
        css.top(0),
        css.left(0),
        css.width(radioSize),
        css.height(radioSize),
        css.background('#0f9d58'),
        css.borderRadius('50%'),
        css.transform('scale(0)'),
        css.transition('transform 0.28s $swiftEaseInOut'),

        css.rule('.RadioButton.checked &', [
          css.transform('scale(1.125)')
        ])
      ])
    ];
}

final radioButton = v.componentFactory(RadioButton);
class RadioButton extends InkButton {
  static final css = new RadioButtonStyleSheet();

  @property()
  bool checked;

  @property(immutable: true)
  bool toggles;

  RadioButton({this.checked: false, this.toggles: true, bool disabled: false})
    : super(disabled: disabled);

  void create() {
    super.create();
    element.classes
      ..add('RadioButton')
      ..add('circle');


    final offElement = new html.DivElement()
      ..classes.add('RadioButton_off');

    final onElement = new html.DivElement()
      ..classes.add('RadioButton_on');

    content
      ..append(offElement)
      ..append(onElement);
  }

  void init() {
    super.init();
    element.onClick.listen(_handleClick);
  }

  void _handleClick(html.MouseEvent e) {
    if (disabled) {
      return;
    }
    handleClick(e);
  }

  void handleClick(html.MouseEvent e) {
    toggle();
  }

  void toggle() {
    checked = !checked;
    invalidate();
  }

  v.VRootDecorator<html.DivElement> build() =>
      super.build().decorate(
        v.root(classes: checked ? const ['checked'] : null)
      );
}
<commit_msg>Fix colors for RadioButton<commit_after>library liquid_material.radio_button;

import 'dart:html' as html;
import 'package:liquid/liquid.dart';
import 'package:liquid/vdom.dart' as v;
import 'package:vcss/vcss.dart' as css;
import 'button.dart';
import '../layout.dart';
import '../style.dart';
import '../colors.dart';

class RadioButtonStyleSheet extends css.StyleSheet {
  static const size = const css.Size.px(48);
  static const radioSize = const css.Size.px(16);
  static final color = paletteGreen.colors[Palette.P700];

  build() => [
      css.rule('.RadioButton', [
        css.width(size),
        css.height(size),
        css.padding(Layout.gridSize * 2),
        css.color(color),

        css.rule('&.checked', [
          css.color(black),
        ])
      ]),

      css.rule('.RadioButton_off', [
        css.position('absolute'),
        css.top(0),
        css.left(0),
        css.width(radioSize),
        css.height(radioSize),
        css.border('2px solid #5a5a5a'),
        css.borderRadius('50%')
      ]),

      css.rule('.RadioButton_on', [
        css.position('absolute'),
        css.top(0),
        css.left(0),
        css.width(radioSize),
        css.height(radioSize),
        css.background(color),
        css.borderRadius('50%'),
        css.transform('scale(0)'),
        css.transition('transform 0.28s $swiftEaseInOut'),

        css.rule('.RadioButton.checked &', [
          css.transform('scale(1.125)')
        ])
      ])
    ];
}

final radioButton = v.componentFactory(RadioButton);
class RadioButton extends InkButton {
  static final css = new RadioButtonStyleSheet();

  @property()
  bool checked;

  @property(immutable: true)
  bool toggles;

  RadioButton({this.checked: false, this.toggles: true, bool disabled: false})
    : super(disabled: disabled);

  void create() {
    super.create();
    element.classes
      ..add('RadioButton')
      ..add('circle');


    final offElement = new html.DivElement()
      ..classes.add('RadioButton_off');

    final onElement = new html.DivElement()
      ..classes.add('RadioButton_on');

    content
      ..append(offElement)
      ..append(onElement);
  }

  void init() {
    super.init();
    element.onClick.listen(_handleClick);
  }

  void _handleClick(html.MouseEvent e) {
    if (disabled) {
      return;
    }
    handleClick(e);
  }

  void handleClick(html.MouseEvent e) {
    toggle();
  }

  void toggle() {
    checked = !checked;
    invalidate();
  }

  v.VRootDecorator<html.DivElement> build() =>
      super.build().decorate(
        v.root(classes: checked ? const ['checked'] : null)
      );
}

{'fraction_non_alphanumeric': 0.15410484668644905, 'fraction_numerical': 0.011275964391691394, 'mean_word_length': 2.645277577505407, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2341386', 'n_tokens_mistral': 1667, 'n_tokens_neox': 1595, 'n_words': 294}