<commit_before>import styled, { css } from 'styled-components';
import { darken, lighten } from 'polished';

import { resetButton } from 'common/styles/utils';
import { transparent, whiteLight, greyLight, greyDark } from 'common/styles/colors';
import { micro } from 'common/styles/typography';
import { gutter } from 'common/styles/layout';
import { shadowBox } from 'common/styles/shadows';

export const Controls = styled.div`
  ${gutter({ position: 'top', mod: 0.25 })}
  ${gutter({ position: 'horizontal', mod: 0.5 })}
  ${gutter({ position: 'bottom' })}
  display: flex;
  z-index: 2;
  list-style: none;
  justify-content: center;
  background-color: ${transparent};
  width: 100%;
`;

export const ControlButton = styled.button`
  ${resetButton}
  ${micro}
  ${shadowBox}
  ${gutter({ mod: 0.5 })}
  ${gutter({ prop: 'margin', position: 'horizontal', mod: 0.5 })}
  position: relative;
  text-align: center;
  text-transform: uppercase;
  flex: 0 1 300px;
  background-color: ${whiteLight};
  color: ${greyLight};

  &:not(:disabled):hover,
  &:focus {
    color: ${darken(0.1, greyDark)};
    background-color: ${lighten(1, whiteLight)};
  }

  ${({ active }) => active && css`
    color: ${darken(0.1, greyDark)};
    background-color: ${lighten(1, whiteLight)};
  `}

  &:disabled {
    opacity: .7;
    cursor: not-allowed;
  }
`;

export default Controls;
<commit_msg>feat: wrapup button brightness inconsistency<commit_after>import styled, { css } from 'styled-components';
import { darken, lighten } from 'polished';

import { resetButton } from 'common/styles/utils';
import { transparent, whiteLight, grey, greyDark } from 'common/styles/colors';
import { micro } from 'common/styles/typography';
import { gutter } from 'common/styles/layout';
import { shadowBox } from 'common/styles/shadows';

export const Controls = styled.div`
  ${gutter({ position: 'top', mod: 0.25 })}
  ${gutter({ position: 'horizontal', mod: 0.5 })}
  ${gutter({ position: 'bottom' })}
  display: flex;
  z-index: 2;
  list-style: none;
  justify-content: center;
  background-color: ${transparent};
  width: 100%;
`;

export const ControlButton = styled.button`
  ${resetButton}
  ${micro}
  ${shadowBox}
  ${gutter({ mod: 0.5 })}
  ${gutter({ prop: 'margin', position: 'horizontal', mod: 0.5 })}
  position: relative;
  text-align: center;
  text-transform: uppercase;
  flex: 0 1 300px;
  background-color: ${whiteLight};
  color: ${grey};

  &:not(:disabled):hover,
  &:focus {
    color: ${darken(0.1, greyDark)};
    background-color: ${lighten(1, whiteLight)};
  }

  ${({ active }) => active && css`
    color: ${darken(0.1, greyDark)};
    background-color: ${lighten(1, whiteLight)};
  `}

  &:disabled {
    opacity: .7;
    cursor: not-allowed;
  }
`;

export default Controls;

{'fraction_non_alphanumeric': 0.17786561264822134, 'fraction_numerical': 0.017966223499820338, 'mean_word_length': 4.20373831775701, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '2762736', 'n_tokens_mistral': 988, 'n_tokens_neox': 944, 'n_words': 240}