feat: added primary togglegroup buttton styles

src/components/ui/toggle-group/ToggleGroup.vue

@@ -1,29 +1,26 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-unused-properties */
 import { reactiveOmit } from '@vueuse/core'
-import type { VariantProps } from 'cva'
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui'
 import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { provide } from 'vue'
 
-import type { toggleVariants } from '@/components/ui/toggle'
 import { cn } from '@/utils/tailwindUtil'
 
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+import { toggleGroupVariants } from './toggleGroup.variants';
+import type { ToggleGroupVariants } from './toggleGroup.variants';
 
 const props = defineProps<
   ToggleGroupRootProps & {
     class?: HTMLAttributes['class']
     variant?: ToggleGroupVariants['variant']
-    size?: ToggleGroupVariants['size']
   }
 >()
 const emits = defineEmits<ToggleGroupRootEmits>()
 
 provide('toggleGroup', {
-  variant: props.variant,
-  size: props.size
+  variant: props.variant
 })
 
 const delegatedProps = reactiveOmit(props, 'class')
@@ -35,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ToggleGroupRoot
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('flex items-center justify-center gap-1', props.class)"
+    :class="cn(toggleGroupVariants({ variant }), props.class)"
   >
     <slot v-bind="slotProps" />
   </ToggleGroupRoot>

src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -1,28 +1,26 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-unused-properties */
 import { reactiveOmit } from '@vueuse/core'
-import type { VariantProps } from 'cva'
 import type { ToggleGroupItemProps } from 'reka-ui'
 import { ToggleGroupItem, useForwardProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { inject } from 'vue'
 
-import { toggleVariants } from '@/components/ui/toggle'
 import { cn } from '@/utils/tailwindUtil'
 
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+import { toggleGroupItemVariants } from './toggleGroup.variants';
+import type { ToggleGroupVariants } from './toggleGroup.variants';
 
 const props = defineProps<
   ToggleGroupItemProps & {
     class?: HTMLAttributes['class']
     variant?: ToggleGroupVariants['variant']
-    size?: ToggleGroupVariants['size']
   }
 >()
 
 const context = inject<ToggleGroupVariants>('toggleGroup')
 
-const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
+const delegatedProps = reactiveOmit(props, 'class', 'variant')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -33,9 +31,8 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        toggleVariants({
-          variant: context?.variant || variant,
-          size: context?.size || size
+        toggleGroupItemVariants({
+          variant: context?.variant || variant
         }),
         props.class
       )

src/components/ui/toggle-group/toggleGroup.variants.ts

@@ -0,0 +1,47 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const toggleGroupVariants = cva({
+  base: 'flex gap-[var(--primitive-padding-padding-1,4px)] p-[var(--primitive-padding-padding-1,4px)] rounded-[var(--primitive-border-radius-rounded-sm,4px)]',
+  variants: {
+    variant: {
+      primary: 'bg-component-node-widget-background',
+      secondary: 'bg-component-node-widget-background',
+      inverted: 'bg-component-node-widget-background'
+    }
+  },
+  defaultVariants: {
+    variant: 'primary'
+  }
+})
+
+export const toggleGroupItemVariants = cva({
+  base: 'flex-1 inline-flex items-center justify-center border-0 rounded-[var(--primitive-border-radius-rounded-sm,4px)] px-[var(--primitive-padding-padding-2,8px)] py-[var(--primitive-padding-padding-1,4px)] text-xs font-inter font-normal transition-colors cursor-pointer',
+  variants: {
+    variant: {
+      primary: [
+        'data-[state=off]:bg-transparent data-[state=off]:text-muted-foreground',
+        'data-[state=off]:hover:bg-component-node-widget-background-hovered data-[state=off]:hover:text-white',
+        'data-[state=on]:bg-primary-background data-[state=on]:text-white'
+      ],
+      secondary: [
+        'data-[state=off]:bg-secondary-background-selected data-[state=off]:text-base-foreground',
+        'data-[state=off]:hover:bg-component-node-widget-background-hovered data-[state=off]:hover:text-white',
+        'data-[state=on]:bg-component-node-widget-background-selected data-[state=on]:text-base-foreground'
+      ],
+      inverted: [
+        'data-[state=off]:bg-base-background data-[state=off]:text-muted-foreground',
+        'data-[state=off]:hover:bg-secondary-background-hover data-[state=off]:hover:text-white',
+        'data-[state=on]:bg-base-background data-[state=on]:text-base-foreground'
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: 'primary'
+  }
+})
+
+export type ToggleGroupVariants = VariantProps<typeof toggleGroupVariants>
+export type ToggleGroupItemVariants = VariantProps<
+  typeof toggleGroupItemVariants
+>

src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue

@@ -4,22 +4,15 @@
     <ToggleGroup
       v-if="hasLabels"
       type="single"
+      variant="primary"
       :model-value="toggleGroupValue"
-      class="ml-auto gap-0 bg-node-component-surface mb-[-0.5rem]"
+      class="w-full mb-[-0.5rem]"
       @update:model-value="handleToggleGroupChange"
     >
-      <ToggleGroupItem
-        value="off"
-        :aria-label="`${widget.name}: ${labelOff}`"
-        class="rounded-l-md rounded-r-none border-0 bg-node-component-border/10 text-node-component-text data-[state=on]:!bg-white data-[state=on]:!text-black hover:bg-node-component-border/20 cursor-pointer h-7"
-      >
+      <ToggleGroupItem value="off" :aria-label="`${widget.name}: ${labelOff}`">
         {{ labelOff }}
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="on"
-        :aria-label="`${widget.name}: ${labelOn}`"
-        class="rounded-l-none rounded-r-md border-0 bg-node-component-border/10 text-node-component-text data-[state=on]:!bg-white data-[state=on]:!text-black hover:bg-node-component-border/20 cursor-pointer h-7"
-      >
+      <ToggleGroupItem value="on" :aria-label="`${widget.name}: ${labelOn}`">
         {{ labelOn }}
       </ToggleGroupItem>
     </ToggleGroup>