<commit_before><template>
  <custom-element :tag="tag" 
    class="mdc-theme"
    :class="classes">
    <slot />
  </custom-element>
</template>


<script>
import { CustomElement } from '../util'

export const TONE = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  BACKGROUND: 'background',
  PRIMARY_LIGHT: 'primary-light',
  SECONDARY_LIGHT: 'secondary-light',
  SECONDARY_DARK: 'secondary-dark',
  PRIMARY_DARK: 'primary-dark',
};

export const THEME = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  HINT: 'hint',
  ICON: 'icon',
  SECONDARY_LIGHT: 'disabled',
};

export default {
  name: 'mdc-theme',
  components: {
    CustomElement
  },
  props: {
    tag: {type: String, default: 'div' },

    // text style = primary, secondary, hint, icon, disable
    theme: { type: String, default: THEME.PRIMARY },
    // or tone : primary [&dark|&light], secondary[&dark|&light] , backgound,
    // or color : #FFFFFF, rgb, rgba 
    color: String,
    // bg tone = primary [&dark|&light], secondary[&dark|&light] , backgound, 
    // or color : #FFFFFF, rgb, rgba
    background: { type: String, default: TONE.PRIMARY }
  },
  computed: {
    classes () {
      let classes = {}

      // apply backgound
      if (this.background) {
        classes[`mdc-theme--${this.background}-bg`] = true
      }
      if (this.color) {
        classes[`mdc-theme--${this.color}-bg`] = true
      } else {
        classes[`mdc-theme--text-${this.theme}-on${this.background}`] = true
      }

      return classes
    }
  }
}
</script><commit_msg>feat(theme): implement mdc-theme<commit_after><template>
  <custom-element :tag="tag" 
    class="mdc-theme"
    :class="classes">
    <slot />
  </custom-element>
</template>


<script>
import { CustomElement } from '../util'


const THEME_COLORS = [
  'primary',
  'secondary',
  'background',
  'primary-light',
  'secondary-light',
  'secondary-dark',
  'primary-dark'
]

const THEME_STYLES = [
  'text-primary',
  'text-secondary',
  'text-hint',
  'text-icon',
  'text-disabled'
]

export default {
  name: 'mdc-theme',
  components: {
    CustomElement
  },
  props: {
    tag: {type: String, default: 'div' },
    color: String,
    background: String
  },
  computed: {
    classes () {
      let classes = {}

      if (this.color && THEME_COLORS.includes(this.color)) {
          classes[`mdc-theme--${this.color}`] = true
      }

      if (this.background && THEME_COLORS.includes(this.background)) {
        classes[`mdc-theme--${this.background}-bg`] = true

        if (this.color && THEME_STYLES.includes(this.color)) {
          classes[`mdc-theme--${this.color}-on-${this.background}`] = true
        }
      }
      return classes
    }
  }
}
</script>
{'fraction_non_alphanumeric': 0.17317612380250552, 'fraction_numerical': 0.0, 'mean_word_length': 2.797202797202797, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '6620903', 'n_tokens_mistral': 966, 'n_tokens_neox': 954, 'n_words': 184}