@robuust-digital/vue-components 1.2.2 → 1.2.3

package/README.md

@@ -38,14 +38,8 @@ export default {
       // Customize component styles here
       components: (theme) => ({
         button: {
-          primary: {
-            backgroundColor: theme('colors.yellow.500'),
-            color: '#000',
-          },
-          secondary: {
-            backgroundColor: theme('colors.blue.500'),
-            color: '#fff',
-          },
+          '--rvc-button-height': theme('height.9'),
+          // ...
         },
       }),
     },

package/dist/tailwind/base/index.js

@@ -1,3 +1,5 @@
+import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
+
 /**
  * Base styles
  *
@@ -5,15 +7,50 @@
  */
 export default (theme) => ({
   ':root': {
+    // Focus styling
     '--rvc-base-focus-outline-style': 'dashed',
-    '--rvc-base-focus-outline-offset': '0.09375rem', // 1.5px
-    '--rvc-base-focus-outline-width': '0.09375rem', // 1.5px
+    '--rvc-base-focus-outline-offset': '0.0625rem', // 1px
+    '--rvc-base-focus-outline-width': '0.0625rem', // 1px
     '--rvc-base-focus-outline-color': theme('colors.indigo.600'),
 
+    // Base styling
+    '--rvc-base-border-radius': theme('borderRadius.md'),
+    '--rvc-base-transition-duration': theme('transitionDuration.DEFAULT'),
+    '--rvc-base-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    '--rvc-base-loading-animation': theme('animation.spin'),
+    '--rvc-base-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-base-border-style': 'solid',
+    '--rvc-base-border-color': theme('colors.slate.200'),
+    '--rvc-base-border-dark-color': theme('colors.slate.300'),
+    '--rvc-base-box-shadow': 'none',
+
+    // Base Dialog styling
+    '--rvc-dialog-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
+    '--rvc-dialog-padding-x': theme('padding.4'),
+    '--rvc-dialog-padding-y': theme('padding.4'),
+    '--rvc-dialog-header-bg-color': theme('colors.white'),
+    '--rvc-dialog-close-size': theme('width.6'),
+    '--rvc-dialog-close-color': theme('colors.slate.700'),
+    '--rvc-dialog-close-color-hover': theme('colors.slate.900'),
+    '--rvc-dialog-title-color': theme('colors.slate.900'),
+    '--rvc-dialog-title-font-size': theme('fontSize.xl'),
+    '--rvc-dialog-title-font-weight': theme('fontWeight.bold'),
+    '--rvc-dialog-title-font-family': theme('fontFamily.sans'),
+    '--rvc-dialog-content-bg-color': theme('colors.white'),
+    '--rvc-dialog-footer-bg-color': theme('colors.slate.50'),
+    '--rvc-dialog-footer-gap': theme('gap.2'),
+
     ...theme('components.base'),
+
+    [`@media (min-width: ${theme('screens.sm')})`]: {
+      '--rvc-dialog-padding-x': theme('padding.6'),
+      '--rvc-dialog-padding-y': theme('padding.4'),
+      '--rvc-dialog-footer-gap': theme('gap.3'),
+      ...theme('components.base[screen-sm]'),
+    },
   },
 
-  '*:focus, .rvc-focus': {
+  '[class^="rvc-"] *:focus, [class^="rvc-"]:focus, .rvc-focus': {
     outlineStyle: 'var(--rvc-base-focus-outline-style)',
     outlineWidth: 'var(--rvc-base-focus-outline-offset)',
     outlineOffset: 'var(--rvc-base-focus-outline-width)',

package/dist/tailwind/components/accordion.js

@@ -5,9 +5,9 @@
  */
 export default (theme) => ({
   ':root': {
-    '--rvc-accordion-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-accordion-border-style': theme('borderStyle.solid'),
-    '--rvc-accordion-border-color': theme('colors.slate.200'),
+    '--rvc-accordion-border-width': 'var(--rvc-base-border-width)',
+    '--rvc-accordion-border-style': 'var(--rvc-base-border-style)',
+    '--rvc-accordion-border-color': 'var(--rvc-base-border-color)',
     '--rvc-accordion-padding-y': theme('padding.6'),
     '--rvc-accordion-font-weight': theme('fontWeight.normal'),
     '--rvc-accordion-font-size': theme('fontSize.base.0'),

package/dist/tailwind/components/alert.js

@@ -6,17 +6,17 @@
 export default (theme) => ({
   ':root': {
     // Custom properties
+    '--rvc-alert-border-radius': 'var(--rvc-base-border-radius)',
+    '--rvc-alert-transition-duration': 'var(--rvc-base-transition-duration)',
+    '--rvc-alert-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
     '--rvc-alert-padding-x': theme('padding.6'),
     '--rvc-alert-padding-y': theme('padding.6'),
-    '--rvc-alert-border-radius': theme('borderRadius.md'),
     '--rvc-alert-font-size': theme('fontSize.base.0'),
     '--rvc-alert-gap': theme('gap[1.5]'),
     '--rvc-alert-anchor-decoration': 'underline',
     '--rvc-alert-icon-size': theme('width.6'),
     '--rvc-alert-title-font-weight': theme('fontWeight.medium'),
     '--rvc-alert-transition-property': theme('transitionProperty.colors'),
-    '--rvc-alert-transition-duration': theme('transitionDuration.DEFAULT'),
-    '--rvc-alert-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
 
     // Default color variables
     '--rvc-alert-bg-color': theme('colors.blue.50'),

package/dist/tailwind/components/button.js

@@ -15,20 +15,20 @@ export default (theme) => {
   return {
     ':root': {
       // Custom properties
+      '--rvc-button-border-radius': 'var(--rvc-base-border-radius)',
+      '--rvc-button-transition-duration': 'var(--rvc-base-transition-duration)',
+      '--rvc-button-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
+      '--rvc-button-icon-loading-animation': 'var(--rvc-base-loading-animation)',
+      '--rvc-button-border-width': 'var(--rvc-base-border-width)',
+      '--rvc-button-box-shadow': 'var(--rvc-base-box-shadow)',
       '--rvc-button-height': theme('height.9'),
-      '--rvc-button-border-width': theme('borderWidth.DEFAULT'),
       '--rvc-button-padding-x': theme('padding.3'),
       '--rvc-button-gap': theme('gap[1.5]'),
-      '--rvc-button-border-radius': theme('borderRadius.md'),
       '--rvc-button-font-weight': theme('fontWeight.semibold'),
       '--rvc-button-font-size': theme('fontSize.base.0'),
       '--rvc-button-transition-property': theme('transitionProperty.colors'),
-      '--rvc-button-transition-duration': theme('transitionDuration.DEFAULT'),
-      '--rvc-button-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
       '--rvc-button-icon-size': theme('width.5'),
       '--rvc-button-icon-loading-size': theme('width.4'),
-      '--rvc-button-icon-loading-animation': theme('animation.spin'),
-      '--rvc-button-box-shadow': 'none',
 
       // Default color variables
       '--rvc-button-bg-color': '#d9ff00',

package/dist/tailwind/components/checkbox.js

@@ -5,15 +5,15 @@
  */
 export default (theme) => ({
   ':root': {
+    '--rvc-checkbox-input-box-shadow': 'var(--rvc-base-box-shadow)',
+    '--rvc-checkbox-input-border-color': 'var(--rvc-base-border-color)',
     '--rvc-checkbox-gap': theme('gap.2'),
     '--rvc-checkbox-font-size': theme('fontSize.base.0'),
     '--rvc-checkbox-font-weight': theme('fontWeight.medium'),
     '--rvc-checkbox-color': theme('colors.slate.950'),
     '--rvc-checkbox-input-size': theme('width.4'),
-    '--rvc-checkbox-input-box-shadow': theme('boxShadow.sm'),
     '--rvc-checkbox-input-border-radius': theme('borderRadius.DEFAULT'),
     '--rvc-checkbox-input-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-checkbox-input-border-color': theme('colors.slate.200'),
     '--rvc-checkbox-input-checked-bg-color': theme('colors.indigo.600'),
     '--rvc-checkbox-input-checked-border-color': theme('colors.indigo.600'),
     '--rvc-checkbox-input-checked-icon-color': theme('colors.white'),

package/dist/tailwind/components/drawer.js

@@ -1,5 +1,3 @@
-import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
-
 /**
  * Drawer component
  *
@@ -7,22 +5,23 @@ import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
  */
 export default (theme) => ({
   ':root': {
-    '--rvc-drawer-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
-    '--rvc-drawer-padding-x': theme('padding.4'),
-    '--rvc-drawer-padding-y': theme('padding.4'),
-    '--rvc-drawer-border-color': theme('colors.slate.200'),
-    '--rvc-drawer-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-drawer-border-style': 'solid',
-    '--rvc-drawer-header-bg-color': theme('colors.white'),
-    '--rvc-drawer-title-font-size': theme('fontSize.2xl'),
-    '--rvc-drawer-title-font-weight': theme('fontWeight.bold'),
-    '--rvc-drawer-title-color': theme('colors.slate.900'),
-    '--rvc-drawer-close-size': theme('width.6'),
-    '--rvc-drawer-close-color': theme('colors.slate.700'),
-    '--rvc-drawer-close-color-hover': theme('colors.slate.900'),
-    '--rvc-drawer-content-bg-color': theme('colors.white'),
-    '--rvc-drawer-footer-bg-color': theme('colors.slate.50'),
-    '--rvc-drawer-footer-gap': theme('gap.3'),
+    '--rvc-drawer-backdrop-bg-color': 'var(--rvc-dialog-backdrop-bg-color)',
+    '--rvc-drawer-padding-x': 'var(--rvc-dialog-padding-x)',
+    '--rvc-drawer-padding-y': 'var(--rvc-dialog-padding-y)',
+    '--rvc-drawer-border-color': 'var(--rvc-base-border-color)',
+    '--rvc-drawer-border-width': 'var(--rvc-base-border-width)',
+    '--rvc-drawer-border-style': 'var(--rvc-base-border-style)',
+    '--rvc-drawer-header-bg-color': 'var(--rvc-dialog-header-bg-color)',
+    '--rvc-drawer-title-font-size': 'var(--rvc-dialog-title-font-size)',
+    '--rvc-drawer-title-font-weight': 'var(--rvc-dialog-title-font-weight)',
+    '--rvc-drawer-title-font-family': 'var(--rvc-dialog-title-font-family)',
+    '--rvc-drawer-title-color': 'var(--rvc-dialog-title-color)',
+    '--rvc-drawer-close-size': 'var(--rvc-dialog-close-size)',
+    '--rvc-drawer-close-color': 'var(--rvc-dialog-close-color)',
+    '--rvc-drawer-close-color-hover': 'var(--rvc-dialog-close-color-hover)',
+    '--rvc-drawer-content-bg-color': 'var(--rvc-dialog-content-bg-color)',
+    '--rvc-drawer-footer-bg-color': 'var(--rvc-dialog-footer-bg-color)',
+    '--rvc-drawer-footer-gap': 'var(--rvc-dialog-footer-gap)',
     '--rvc-drawer-footer-justify-content': 'space-between',
   },
 
@@ -55,6 +54,7 @@ export default (theme) => ({
       fontSize: 'var(--rvc-drawer-title-font-size)',
       fontWeight: 'var(--rvc-drawer-title-font-weight)',
       color: 'var(--rvc-drawer-title-color)',
+      fontFamily: 'var(--rvc-drawer-title-font-family)',
       ...theme('components.drawer[.rvc-drawer-title]'),
     },
 
@@ -98,8 +98,6 @@ export default (theme) => ({
 
     // Larger screens
     [`@media (min-width: ${theme('screens.sm')})`]: {
-      '--rvc-drawer-padding-x': theme('padding.6'),
-      '--rvc-drawer-padding-y': theme('padding.6'),
       ...theme('components.drawer[screen-sm]'),
     },
   },

package/dist/tailwind/components/lightswitch.js

@@ -5,21 +5,21 @@
  */
 export default (theme) => ({
   ':root': {
+    '--rvc-lightswitch-transition-duration': 'var(--rvc-base-transition-duration)',
+    '--rvc-lightswitch-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
+    '--rvc-lightswitch-toggle-transition-duration': 'var(--rvc-base-transition-duration)',
+    '--rvc-lightswitch-toggle-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
     '--rvc-lightswitch-border-radius': theme('borderRadius.full'),
     '--rvc-lightswitch-height': '1.875rem',
     '--rvc-lightswitch-width': '3.125rem',
     '--rvc-lightswitch-bg-color': theme('colors.slate.200'),
     '--rvc-lightswitch-bg-color-enabled': theme('colors.green.400'),
     '--rvc-lightswitch-transition-property': theme('transitionProperty.colors'),
-    '--rvc-lightswitch-transition-duration': theme('transitionDuration.DEFAULT'),
-    '--rvc-lightswitch-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
     '--rvc-lightswitch-label-offset': '0.5rem',
     '--rvc-lightswitch-toggle-offset': '0.1875rem',
     '--rvc-lightswitch-toggle-size': theme('width.6'),
     '--rvc-lightswitch-toggle-bg-color': theme('colors.white'),
     '--rvc-lightswitch-toggle-transition-property': theme('transitionProperty.transform'),
-    '--rvc-lightswitch-toggle-transition-duration': theme('transitionDuration.DEFAULT'),
-    '--rvc-lightswitch-toggle-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
   },
 
   '.rvc-lightswitch-group': {

package/dist/tailwind/components/modal.js

@@ -1,5 +1,3 @@
-import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
-
 /**
  * Modal component
  *
@@ -7,25 +5,26 @@ import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
  */
 export default (theme) => ({
   ':root': {
-    '--rvc-modal-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
-    '--rvc-modal-border-color': theme('colors.slate.200'),
-    '--rvc-modal-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-modal-border-style': 'solid',
-    '--rvc-modal-border-radius': theme('borderRadius.DEFAULT'),
+    '--rvc-modal-backdrop-bg-color': 'var(--rvc-dialog-backdrop-bg-color)',
+    '--rvc-modal-border-color': 'var(--rvc-base-border-color)',
+    '--rvc-modal-border-width': 'var(--rvc-base-border-width)',
+    '--rvc-modal-border-style': 'var(--rvc-base-border-style)',
+    '--rvc-modal-border-radius': 'var(--rvc-base-border-radius)',
+    '--rvc-modal-padding-x': 'var(--rvc-dialog-padding-x)',
+    '--rvc-modal-padding-y': 'var(--rvc-dialog-padding-y)',
+    '--rvc-modal-header-bg-color': 'var(--rvc-dialog-header-bg-color)',
+    '--rvc-modal-title-font-size': 'var(--rvc-dialog-title-font-size)',
+    '--rvc-modal-title-font-weight': 'var(--rvc-dialog-title-font-weight)',
+    '--rvc-modal-title-font-family': 'var(--rvc-dialog-title-font-family)',
+    '--rvc-modal-title-color': 'var(--rvc-dialog-title-color)',
+    '--rvc-modal-close-size': 'var(--rvc-dialog-close-size)',
+    '--rvc-modal-close-color': 'var(--rvc-dialog-close-color)',
+    '--rvc-modal-close-color-hover': 'var(--rvc-dialog-close-color-hover)',
+    '--rvc-modal-content-bg-color': 'var(--rvc-dialog-content-bg-color)',
+    '--rvc-modal-footer-bg-color': 'var(--rvc-dialog-footer-bg-color)',
+    '--rvc-modal-footer-gap': 'var(--rvc-dialog-footer-gap)',
     '--rvc-modal-box-shadow': theme('boxShadow.xl'),
     '--rvc-modal-margin-y': 0,
-    '--rvc-modal-padding-x': theme('padding.4'),
-    '--rvc-modal-padding-y': theme('padding.4'),
-    '--rvc-modal-header-bg-color': theme('colors.slate.50'),
-    '--rvc-modal-title-font-size': theme('fontSize.xl'),
-    '--rvc-modal-title-font-weight': theme('fontWeight.bold'),
-    '--rvc-modal-title-color': theme('colors.slate.900'),
-    '--rvc-modal-close-size': theme('width.6'),
-    '--rvc-modal-close-color': theme('colors.slate.700'),
-    '--rvc-modal-close-color-hover': theme('colors.slate.900'),
-    '--rvc-modal-content-bg-color': theme('colors.white'),
-    '--rvc-modal-footer-bg-color': theme('colors.white'),
-    '--rvc-modal-footer-gap': theme('gap.2'),
   },
 
   '.rvc-modal': {
@@ -76,6 +75,7 @@ export default (theme) => ({
     '.rvc-modal-title': {
       fontSize: 'var(--rvc-modal-title-font-size)',
       fontWeight: 'var(--rvc-modal-title-font-weight)',
+      fontFamily: 'var(--rvc-modal-title-font-family)',
       color: 'var(--rvc-modal-title-color)',
       ...theme('components.modal[.rvc-modal-title]'),
     },
@@ -126,9 +126,6 @@ export default (theme) => ({
 
     // Larger screens
     [`@media (min-width: ${theme('screens.sm')})`]: {
-      '--rvc-modal-padding-x': theme('padding.6'),
-      '--rvc-modal-padding-y': theme('padding.4'),
-      '--rvc-modal-footer-gap': theme('gap.3'),
       ...theme('components.modal[screen-sm]'),
     },
   },

package/dist/tailwind/components/table.js

@@ -5,10 +5,10 @@
  */
 export default (theme) => ({
   ':root': {
-    '--rvc-table-head-border-color': theme('colors.slate.300'),
-    '--rvc-table-border-color': theme('colors.slate.200'),
-    '--rvc-table-border-style': 'solid',
-    '--rvc-table-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-table-head-border-color': 'var(--rvc-base-border-dark-color)',
+    '--rvc-table-border-color': 'var(--rvc-base-border-color)',
+    '--rvc-table-border-style': 'var(--rvc-base-border-style)',
+    '--rvc-table-border-width': 'var(--rvc-base-border-width)',
     '--rvc-table-head-bg-color': theme('colors.slate.200'),
     '--rvc-table-bg-color': theme('colors.slate.50'),
     '--rvc-table-font-size': '0.875rem',

package/dist/tailwind/components/tooltip.js

@@ -7,15 +7,15 @@ import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
  */
 export default (theme) => ({
   ':root': {
+    '--rvc-tooltip-transition-duration': 'var(--rvc-base-transition-duration)',
+    '--rvc-tooltip-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
+    '--rvc-tooltip-border-radius': 'var(--rvc-base-border-radius)',
     '--rvc-tooltip-color': theme('colors.white'),
     '--rvc-tooltip-transition-property': 'opacity, visibility',
-    '--rvc-tooltip-transition-duration': theme('transitionDuration.DEFAULT'),
-    '--rvc-tooltip-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
     '--rvc-tooltip-text-align': 'left',
     '--rvc-tooltip-padding-x': theme('padding.4'),
     '--rvc-tooltip-padding-y': theme('padding.4'),
     '--rvc-tooltip-width': theme('width.max'),
-    '--rvc-tooltip-border-radius': theme('borderRadius.DEFAULT'),
     '--rvc-tooltip-bg-color': withAlphaValue(theme('colors.neutral.700'), 0.6),
     '--rvc-tooltip-arrow-size': theme('width.3'),
     '--rvc-tooltip-blur-size': theme('blur.sm'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "description": "A modern and customizable component library built with **Vue 3** and **Tailwind CSS**, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.",
   "directories": {