@wishbone-media/spark 0.49.1 → 0.50.0

package/dist/index.css

@@ -1 +1 @@
-.spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-18795b8f]{@apply relative flex items-center;}.spark-table-filter-select[data-v-79c78a5b],.spark-table-filter-buttons[data-v-0eb19c63]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-0eb19c63]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-6df5499a]{@apply flex items-center;}
+.spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-18795b8f]{@apply relative flex items-center;}.spark-table-filter-select[data-v-79c78a5b],.spark-table-filter-buttons[data-v-23f7a7cc]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-23f7a7cc]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-6df5499a]{@apply flex items-center;}

package/dist/index.js

@@ -2682,6 +2682,9 @@ const tt = new yc(), Yp = {
         case "info":
           l += " bg-cyan-600 hover:bg-cyan-500 text-white";
           break;
+        case "gray":
+          l += " bg-gray-500 hover:bg-gray-400 text-white";
+          break;
         default:
           l += ` bg-${t.variant}-600 hover:bg-${t.variant}-500 text-white`;
       }
@@ -7046,7 +7049,7 @@ const It = new ku(), Eu = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
       return m.push(y), p ? m.push("border-primary-600 text-primary-600") : b ? m.push("border-transparent text-gray-400") : m.push("border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"), m;
     }
     function f(p, b) {
-      const m = ["font-medium text-sm py-1"];
+      const m = ["font-medium text-[15px]/[20px] py-2"];
       return p ? m.push("text-primary-600") : b ? m.push("text-gray-400") : m.push("text-gray-600 hover:text-gray-900"), m;
     }
     function h(p) {
@@ -7080,7 +7083,7 @@ const It = new ku(), Eu = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
           (E(!0), P(ze, null, rt(r.value, (m) => (E(), Oe(gt, {
             key: m.id,
             size: "xl",
-            variant: s(m) ? "primary" : "secondary",
+            variant: s(m) ? "gray" : "secondary",
             disabled: c(m),
             onClick: (y) => l(m)
           }, {
@@ -7114,7 +7117,7 @@ const It = new ku(), Eu = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
         m.icon && !(s(m) && n.layout === "vertical") ? (E(), Oe(oe(Gn), {
           key: 1,
           icon: oe(Fe)[m.icon],
-          class: Le(["mr-2", d.value])
+          class: Le(["text-gray-400 mr-2", d.value])
         }, null, 8, ["icon", "class"])) : ye("", !0),
         T("span", null, we(m.label), 1),
         m.badge != null ? (E(), P("span", {
@@ -7908,7 +7911,7 @@ const Wu = (e) => {
             key: u.value,
             size: "xl",
             "button-class": "px-3.5",
-            variant: a(u.value) ? "primary" : "secondary",
+            variant: a(u.value) ? "gray" : "secondary",
             onClick: (d) => s(u.value)
           }, {
             default: Se(() => [
@@ -7921,7 +7924,7 @@ const Wu = (e) => {
       })
     ]));
   }
-}, _d = /* @__PURE__ */ ln(Td, [["__scopeId", "data-v-0eb19c63"]]), $d = { class: "spark-table-date-picker" }, Ld = {
+}, _d = /* @__PURE__ */ ln(Td, [["__scopeId", "data-v-23f7a7cc"]]), $d = { class: "spark-table-date-picker" }, Ld = {
   __name: "SparkTableDatePicker",
   props: {
     /** SparkTable instance object */

package/formkit.theme.mjs

@@ -2706,9 +2706,9 @@ const classes = {
     'dark:disabled:text-primary-500': true,
     'dark:text-primary-500': true,
     'aria-[pressed=false]:text-gray-900': true,
-    'aria-[pressed=true]:bg-primary-600': true,
+    'aria-[pressed=true]:bg-gray-500': true,
     'aria-[pressed=true]:text-white': true,
-    'dark:aria-[pressed=true]:bg-primary-600': true,
+    'dark:aria-[pressed=true]:bg-gray-500': true,
     'dark:aria-[pressed=true]:text-white': true,
     'group-[&]/option:!rounded-none': true,
     'group-data-[vertical=false]/options:group-first/option:!rounded-md': true,
@@ -2726,19 +2726,19 @@ const classes = {
     'group-data-[vertical=false]/options:group-[&]/option:!border-r-0': true,
     'group-data-[vertical=false]/options:group-last/option:!border-r': true,
     'group-data-[vertical=false]/options:group-[&]/option:aria-[pressed=true]:border-x-primary-500': true,
-    'group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-primary-600': true,
-    'group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-primary-600': true,
-    'dark:group-data-[vertical=false]/options:group-[&]/option:aria-[pressed=true]:border-x-primary-600': true,
-    'dark:group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-primary-600': true,
-    'dark:group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-primary-600': true,
+    'group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-gray-500': true,
+    'group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-gray-500': true,
+    'dark:group-data-[vertical=false]/options:group-[&]/option:aria-[pressed=true]:border-x-gray-500': true,
+    'dark:group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-gray-500': true,
+    'dark:group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-gray-500': true,
     'group-data-[vertical=true]/options:group-[&]/option:!border-b-0': true,
     'group-data-[vertical=true]/options:group-last/option:!border-b': true,
     'group-data-[vertical=true]/options:group-[&]/option:aria-[pressed=true]:border-y-primary-500': true,
-    'group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-primary-600': true,
-    'group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-primary-600': true,
-    'dark:group-data-[vertical=true]/options:group-[&]/option:aria-[pressed=true]:border-y-primary-600': true,
-    'dark:group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-primary-600': true,
-    'dark:group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-primary-600': true,
+    'group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-gray-500': true,
+    'group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-gray-500': true,
+    'dark:group-data-[vertical=true]/options:group-[&]/option:aria-[pressed=true]:border-y-gray-500': true,
+    'dark:group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-gray-500': true,
+    'dark:group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-gray-500': true,
   },
   transferlist__outer: {
     group: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkButton.vue

@@ -152,6 +152,9 @@ const computedButtonClass = computed(() => {
     case 'info':
       classes += ' bg-cyan-600 hover:bg-cyan-500 text-white'
       break
+    case 'gray':
+      classes += ' bg-gray-500 hover:bg-gray-400 text-white'
+      break
 
     default:
       classes += ` bg-${props.variant}-600 hover:bg-${props.variant}-500 text-white`

package/src/components/SparkSubNav.vue

@@ -16,7 +16,7 @@
         v-for="item in computedItems"
         :key="item.id"
         size="xl"
-        :variant="isItemActive(item) ? 'primary' : 'secondary'"
+        :variant="isItemActive(item) ? 'gray' : 'secondary'"
         :disabled="isItemDisabled(item)"
         @click="handleNavigate(item)"
       >
@@ -47,7 +47,7 @@
         <FontAwesomeIcon
           v-if="item.icon && !(isItemActive(item) && props.layout === 'vertical')"
           :icon="Icons[item.icon]"
-          class="mr-2"
+          class="text-gray-400 mr-2"
           :class="iconClasses"
         />
         <span>{{ item.label }}</span>
@@ -227,7 +227,7 @@ function getTabsClasses(isActive, isDisabled) {
 
 // Vertical layout (simplified with checkmark)
 function getVerticalClasses(isActive, isDisabled) {
-  const classes = ['font-medium text-sm py-1']
+  const classes = ['font-medium text-[15px]/[20px] py-2']
 
   if (isActive) {
     classes.push('text-primary-600')

package/src/components/plugins/SparkTableFilterButtons.vue

@@ -7,7 +7,7 @@
         :key="option.value"
         size="xl"
         button-class="px-3.5"
-        :variant="isSelected(option.value) ? 'primary' : 'secondary'"
+        :variant="isSelected(option.value) ? 'gray' : 'secondary'"
         @click="handleSelect(option.value)"
       >
         {{ option.label }}