IceCom.vue

<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import buttonClass from './buttonClass'

defineOptions({
  name: 'IceCom',
})
// const props = withDefaults(defineProps(), {})
const attrs = useAttrs()
const className = computed(() => {
  // @ts-ignore
  return buttonClass(attrs)
})
</script>

<template>
  <button :class="className">
    <slot>postcss-cva</slot>
  </button>
</template>

<style scoped>
/* @meta path="./buttonClass" */
.btn {
  /* @b */
  font-size: 50px;
  padding: 72px 120px;
  border-radius: 20px;
  background: #e5e7eb;
}
.btn-primary {
  /* @v type="primary" */
  background: blue;
  color: white;
}
.btn-secondary {
  /* @v type="secondary" */
  background: yellow;
}
.btn-third {
  /* @v type="third" */
  background: red;
}
.btn-disabled {
  /* @v disabled="true" */
  cursor: not-allowed;
  opacity: 0.15;
}

.btn-lg {
  /* @v size="lg" */
  font-size: 60px;
  padding: 90px 150px;
  border-radius: 30px;
}
.btn-md {
  /* @v size="md" */
  font-size: 50px;
  padding: 72px 120px;
  border-radius: 20px;
}
.btn-sm {
  /* @v size="sm" */
  font-size: 40px;
  padding: 60px 100px;
  border-radius: 16px;
}
.btn-xs {
  /* @v size="xs" */
  font-size: 30px;
  padding: 50px 80px;
  border-radius: 12px;
}
</style>