<commit_before><template>
  <button
    class="flat-button"
    :class="level"
    :title="hint"
    @click.prevent="$emit('click')"
    @mouseover.prevent="$emit('mouseover')"
  >
    <slot />
  </button>
</template>

<script>
export default {
    'name': "FlatButton",
    'props': {
        'level': {
            'type': String,
            'default': 'secondary',
        },
        'hint': {
            'type': String,
            'default': '',
        },
    },
}
</script>

<style lang="scss" scoped>
/* I'm using "tailwind compatible" colours here
   ...and if you can reproduce it using actual Tailwind please feel free */
.flat-button {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: content-box;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    &:disabled, &.disabled {
        opacity: 0.5;
        cursor: auto;
    }
    &.primary {
        background-color: #4299e1; /* tw-bg-blue-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #2b6cb0; /* tw-bg-blue-700 */
        }
    }
    &.secondary {
        background-color: #cbd5e0; /* tw-bg-gray-400 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #718096; /* tw-bg-gray-600 */
            color: #fff; /* tw-text-white */
        }
    }
    &.success {
        background-color: #48bb78; /* tw-bg-green-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #2f855a; /* tw-bg-green-700 */
        }
    }
    &.info {
        /* Cyan would be usual for info, but Tailwind has no such thing */
        background-color: #ed64a6; /* tw-bg-pink-500 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #b83280; /* tw-bg-pink-700 */
        }
    }
    &.warning {
        background-color: #faf089; /* tw-bg-yellow-300 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #ecc94b; /* tw-bg-yellow-500 */
        }
    }
    &.danger {
        background-color: #f56565; /* tw-bg-red-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #c53030; /* tw-bg-red-700 */
        }
    }
}
</style><commit_msg>[SCI-10095] flat-button using Tailwind colour names<commit_after><template>
  <button
    class="flat-button"
    :class="level"
    :title="hint"
    @click.prevent="$emit('click')"
    @mouseover.prevent="$emit('mouseover')"
  >
    <slot />
  </button>
</template>

<script>
export default {
    'name': "FlatButton",
    'props': {
        'level': {
            'type': String,
            'default': 'secondary',
        },
        'hint': {
            'type': String,
            'default': '',
        },
    },
}
</script>

<style lang="scss" scoped>
.flat-button {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: content-box;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    &:disabled, &.disabled {
        opacity: 0.5;
        cursor: auto;
    }
    &.primary {
        @apply tw-bg-blue-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-blue-700;
        }
    }
    &.secondary {
        @apply tw-bg-gray-400 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-gray-600 tw-text-white;
        }
    }
    &.success {
        @apply tw-bg-green-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-green-700;
        }
    }
    &.info {
        /* Cyan would be usual for info, but Tailwind has no such thing */
        @apply tw-bg-pink-500 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-pink-700;
        }
    }
    &.warning {
        @apply tw-bg-yellow-300 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-yellow-500;
        }
    }
    &.danger {
        @apply tw-bg-red-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-red-700
        }
    }
}
</style>
{'fraction_non_alphanumeric': 0.17401960784313725, 'fraction_numerical': 0.03848039215686275, 'mean_word_length': 1.6227506426735219, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, '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': '4545012', 'n_tokens_mistral': 1513, 'n_tokens_neox': 1408, 'n_words': 270}