fix: update hover effect and add new semantic color utilities

apps/storybook/src/stories/core/PricingCard.stories.js

@@ -7,6 +7,20 @@ const defaultFeatures = [
   { icon: 'pi-check', label: '24/7 support' }
 ]
 
+const renderWithButtonSlot = (slotContent) => (args) => ({
+  components: { PricingCard },
+  setup() {
+    return { args }
+  },
+  template: `
+    <PricingCard v-bind="args">
+      <template #button>
+        ${slotContent}
+      </template>
+    </PricingCard>
+  `
+})
+
 export default {
   title: 'Core/PricingCard',
   component: PricingCard,
@@ -53,23 +67,6 @@ export default {
       control: 'text',
       description: 'Custom text replacing numeric price'
     },
-    buttonLabel: {
-      control: 'text',
-      description: 'Call-to-action label'
-    },
-    buttonLink: {
-      control: 'text',
-      description: 'CTA destination URL'
-    },
-    buttonTarget: {
-      control: 'select',
-      options: ['_self', '_blank'],
-      description: 'CTA target behavior'
-    },
-    buttonHidden: {
-      control: 'boolean',
-      description: 'Hides the CTA area'
-    },
     orientation: {
       control: 'select',
       options: ['vertical', 'horizontal'],
@@ -89,57 +86,56 @@ export const Default = {
     annualPrice: '$39',
     currentPeriod: 'monthly',
     priceLabel: 'start at',
-    buttonLabel: 'Get Started',
-    buttonLink: '#',
-    buttonTarget: '_self',
     customPrice: '',
-    buttonHidden: false,
     orientation: 'vertical'
-  }
+  },
+  render: renderWithButtonSlot(`
+    <a
+      href="#"
+      class="w-full justify-center inline-flex px-4 py-2 rounded-md bg-primary text-white hover:bg-primaryHover transition-colors"
+    >
+      Get Started
+    </a>
+  `)
 }
 
 export const Popular = {
   args: {
     ...Default.args,
     popular: true,
     title: 'Business'
-  }
+  },
+  render: Default.render
 }
 
 export const AnnualBilling = {
   args: {
     ...Default.args,
     currentPeriod: 'annual'
-  }
+  },
+  render: Default.render
 }
 
 export const CustomPrice = {
   args: {
     ...Default.args,
     title: 'Enterprise',
-    customPrice: 'Contact us',
-    buttonLabel: 'Talk to Sales'
-  }
-}
-
-export const WithoutButton = {
-  args: {
-    ...Default.args,
-    buttonHidden: true
-  }
+    customPrice: 'Contact us'
+  },
+  render: renderWithButtonSlot(`
+    <a
+      href="#"
+      class="w-full justify-center inline-flex px-4 py-2 rounded-md border border-default text-default hover:bg-surface transition-colors"
+    >
+      Talk to Sales
+    </a>
+  `)
 }
 
 export const Horizontal = {
   args: {
     ...Default.args,
     orientation: 'horizontal'
-  }
-}
-
-export const HorizontalWithoutButton = {
-  args: {
-    ...Default.args,
-    buttonHidden: true,
-    orientation: 'horizontal'
-  }
+  },
+  render: Default.render
 }

packages/theme/src/tailwind/semantic-colors-plugin.js

@@ -62,6 +62,7 @@ export const semanticColors = () => {
       '.bg-backdrop': { 'background-color': 'var(--background-backdrop)' },
       '.bg-primary': { 'background-color': 'var(--background-primary)' },
       '.bg-primaryHover': { 'background-color': 'var(--background-primaryHover)' },
+      '.bg-primary-mask': { 'background-color': 'var(--background-primaryMask)' },
     };
 
     const borderColors = {

packages/theme/src/tokens/primitives/colors.js

@@ -127,6 +127,16 @@ export const primitives = {
     '900': '#7F1D1D',
     '950': '#450A0A',
     },
+  alpha: {
+    neutral: {
+      '25': '#00000040',
+    },
+  brand: {
+      primary: {
+        '65': '#FE601F29',
+      },
+    },
+  },
 };
 
 export default {

packages/webkit/src/components/box-grid-selection/box-grid-selection.vue

@@ -1,3 +1,29 @@
+<script setup>
+  defineOptions({
+    name: 'BoxGridSelection'
+  })
+
+  defineProps({
+    modelValue: {
+      type: [String, Number],
+      default: null
+    },
+    items: {
+      type: Array,
+      required: true,
+      validator: (items) => {
+        return items.every((item) => 'value' in item && 'label' in item)
+      }
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const handleSelect = (value) => {
+    emit('update:modelValue', value)
+  }
+</script>
+
 <template>
   <div
     class="box-grid-selection flex flex-wrap items-center gap-2"
@@ -10,7 +36,7 @@
       :class="
         modelValue === item.value
           ? 'border-2 border-primary bg-primary-mask'
-          : 'border-subtle bg-surface hover:bg-surface-overlay cursor-pointer'
+          : 'border-subtle bg-surface hover:bg-surfaceRaised cursor-pointer'
       "
       role="radio"
       :aria-checked="String(modelValue === item.value)"
@@ -51,32 +77,6 @@
   </div>
 </template>
 
-<script setup>
-  defineOptions({
-    name: 'BoxGridSelection'
-  })
-
-  defineProps({
-    modelValue: {
-      type: [String, Number],
-      default: null
-    },
-    items: {
-      type: Array,
-      required: true,
-      validator: (items) => {
-        return items.every((item) => 'value' in item && 'label' in item)
-      }
-    }
-  })
-
-  const emit = defineEmits(['update:modelValue'])
-
-  const handleSelect = (value) => {
-    emit('update:modelValue', value)
-  }
-</script>
-
 <style scoped>
   .box-item {
     transition:

packages/webkit/src/components/pricing-card/pricing-card.vue

@@ -1,8 +1,6 @@
 <script setup>
   import { computed } from 'vue'
 
-  import Button from '../site/button/button.vue'
-
   defineOptions({ name: 'PricingCard' })
 
   const props = defineProps({
@@ -155,14 +153,7 @@
       v-if="!buttonHidden"
       class="pb-4 hidden md:flex"
     >
-      <Button
-        :icon="'pi pi-chevron-right'"
-        :label="buttonLabel"
-        :type="'primary'"
-        :href="buttonLink"
-        :target="buttonTarget"
-        size="small"
-      />
+      <slot name="button" />
     </div>
   </div>
 </template>

packages/webkit/src/core/card/card-box/card-box.vue

@@ -35,7 +35,7 @@
 
     <div
       v-if="hasFooterSlot"
-      class="border-t border-default bg-[var(--table-header-cell-bg)] h-11 flex items-center justify-center px-4 rounded-b-md"
+      class="border-t border-default bg-[var(--table-header-cell-bg)] flex items-center justify-center px-4 py-3 rounded-b-md"
     >
       <slot name="footer" />
     </div>