@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaButton.vue

@@ -1,165 +1,177 @@
-<template>
-  <button
-    :class="buttonClasses"
-    :disabled="disabled || loading"
-    :type="type"
-    :aria-busy="loading"
-    :aria-disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  fullWidth?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: ButtonVariant.PRIMARY,
-  size: ButtonSize.MD,
-  disabled: false,
-  loading: false,
-  fullWidth: false,
-  type: 'button'
-})
-
-// Validação em desenvolvimento
-if (process.env.NODE_ENV === 'development') {
-  const validVariants = Object.values(ButtonVariant)
-  if (!validVariants.includes(props.variant)) {
-    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
-  }
-}
-
-defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const buttonClasses = computed(() => {
-  return [
-    'datametria-button',
-    `datametria-button--${props.variant}`,
-    `datametria-button--${props.size}`,
-    {
-      'datametria-button--full-width': props.fullWidth,
-      'datametria-button--loading': props.loading,
-      'datametria-button--disabled': props.disabled
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.datametria-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  border-radius: var(--dm-radius);
-  transition: var(--dm-transition);
-  cursor: pointer;
-  border: 1px solid transparent;
-  font-family: var(--dm-font-sans, -apple-system, sans-serif);
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.datametria-button--primary {
-  background: var(--dm-primary);
-  color: white;
-}
-
-.datametria-button--primary:hover:not(:disabled) {
-  background: #005ba3;
-}
-
-.datametria-button--primary:focus-visible {
-  outline: none;
-  box-shadow: var(--dm-focus-ring);
-}
-
-.datametria-button--secondary {
-  background: var(--dm-secondary);
-  color: white;
-}
-
-.datametria-button--secondary:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(75, 0, 120, 0.1);
-}
-
-.datametria-button--outline {
-  background: transparent;
-  border-color: var(--dm-primary);
-  color: var(--dm-primary);
-}
-
-.datametria-button--outline:focus-visible {
-  outline: none;
-  box-shadow: var(--dm-focus-ring);
-}
-
-.datametria-button--ghost {
-  background: transparent;
-  color: #0072CE;
-}
-
-.datametria-button--sm {
-  padding: var(--dm-space-2) var(--dm-space-4);
-  font-size: var(--dm-text-sm);
-  min-height: 2rem;
-}
-
-.datametria-button--md {
-  padding: var(--dm-space-3) calc(var(--dm-space-4) * 1.5);
-  font-size: var(--dm-text-base);
-  min-height: 2.5rem;
-}
-
-.datametria-button--lg {
-  padding: var(--dm-space-4) calc(var(--dm-space-4) * 2);
-  font-size: var(--dm-text-lg);
-  min-height: 3rem;
-}
-
-@media (max-width: 640px) {
-  .datametria-button--sm { min-height: 2.25rem; }
-  .datametria-button--md { min-height: 2.75rem; }
-  .datametria-button--lg { min-height: 3.25rem; }
-}
-
-.datametria-button--full-width {
-  width: 100%;
-}
-
-.datametria-button--disabled,
-.datametria-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.spinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  margin-right: 0.5rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-</style>
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :type="type"
+    :aria-busy="loading"
+    :aria-disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: ButtonVariant.PRIMARY,
+  size: ButtonSize.MD,
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  type: 'button'
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = Object.values(ButtonVariant)
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const buttonClasses = computed(() => {
+  return [
+    'datametria-button',
+    `datametria-button--${props.variant}`,
+    `datametria-button--${props.size}`,
+    {
+      'datametria-button--full-width': props.fullWidth,
+      'datametria-button--loading': props.loading,
+      'datametria-button--disabled': props.disabled
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.datametria-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--dm-font-medium, 500);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: var(--dm-transition-base, 200ms);
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: var(--dm-font-sans, -apple-system, sans-serif);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-button--primary {
+  background: var(--dm-primary, #0072CE);
+  color: white;
+}
+
+.datametria-button--primary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.datametria-button--primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-button--secondary {
+  background: var(--dm-secondary, #4B0078);
+  color: white;
+}
+
+.datametria-button--secondary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.datametria-button--secondary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-secondary, #4B0078) 20%, transparent);
+}
+
+.datametria-button--outline {
+  background: transparent;
+  border-color: var(--dm-primary, #0072CE);
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--outline:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+}
+
+.datametria-button--outline:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-button--ghost {
+  background: transparent;
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--ghost:hover:not(:disabled) {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.datametria-button--sm {
+  padding: var(--dm-space-2, 0.5rem) var(--dm-space-4, 1rem);
+  font-size: var(--dm-text-sm, 0.875rem);
+  min-height: 2rem;
+}
+
+.datametria-button--md {
+  padding: var(--dm-space-3, 0.75rem) calc(var(--dm-space-4, 1rem) * 1.5);
+  font-size: var(--dm-text-base, 1rem);
+  min-height: 2.5rem;
+}
+
+.datametria-button--lg {
+  padding: var(--dm-space-4, 1rem) calc(var(--dm-space-4, 1rem) * 2);
+  font-size: var(--dm-text-lg, 1.125rem);
+  min-height: 3rem;
+}
+
+@media (max-width: 640px) {
+  .datametria-button--sm { min-height: 2.25rem; }
+  .datametria-button--md { min-height: 2.75rem; }
+  .datametria-button--lg { min-height: 3.25rem; }
+}
+
+.datametria-button--full-width {
+  width: 100%;
+}
+
+.datametria-button--disabled,
+.datametria-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/components/DatametriaCard.vue

@@ -38,26 +38,26 @@ const cardClasses = computed(() => [
 
 <style scoped>
 .datametria-card {
-  background: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  background: var(--dm-neutral-50, #ffffff);
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  box-shadow: var(--dm-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
   overflow: hidden;
 }
 
 .datametria-card__header {
-  padding: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
 }
 
 .datametria-card__title {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #111827;
+  font-size: var(--dm-font-size-xl, 1.25rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-900, #111827);
 }
 
 .datametria-card__content {
-  padding: 1.5rem;
+  padding: var(--dm-spacing-6, 1.5rem);
 }
 
 .datametria-card--no-padding .datametria-card__content {
@@ -65,8 +65,8 @@ const cardClasses = computed(() => [
 }
 
 .datametria-card__footer {
-  padding: 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-neutral-100, #f9fafb);
 }
 </style>

package/src/components/DatametriaCheckbox.vue

@@ -33,7 +33,7 @@ defineEmits<{
 .datametria-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--dm-spacing-2, 0.5rem);
   cursor: pointer;
   user-select: none;
 }
@@ -48,14 +48,14 @@ defineEmits<{
   position: relative;
   width: 1.25rem;
   height: 1.25rem;
-  border: 2px solid #d1d5db;
-  border-radius: 0.25rem;
+  border: 2px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-sm, 0.25rem);
   transition: all 0.2s;
 }
 
 .datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark {
-  background: #0072CE;
-  border-color: #0072CE;
+  background: var(--dm-primary, #0072CE);
+  border-color: var(--dm-primary, #0072CE);
 }
 
 .datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark::after {
@@ -71,12 +71,12 @@ defineEmits<{
 }
 
 .datametria-checkbox__input:disabled ~ .datametria-checkbox__checkmark {
-  background: #f3f4f6;
+  background: var(--dm-neutral-100, #f3f4f6);
   cursor: not-allowed;
 }
 
 .datametria-checkbox__label {
-  font-size: 0.875rem;
-  color: #374151;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-700, #374151);
 }
 </style>