Merge pull request #106 from makeswift/hunter/des-1482-remove-colorscheme-in-components

feat: remove colorScheme and refacotred aspectRatio with data attributes

Author: hunterbecton

.changeset/eleven-bobcats-ask.md

@@ -0,0 +1,5 @@
+---
+'commerce-toolkit': minor
+---
+
+Removed colorScheme and refactored aspectRatio with data attributes

src/components/accordion/accordion.tsx

@@ -4,7 +4,6 @@ import * as AccordionPrimitive from '@/components/accordion';
 
 interface BaseAccordionProps {
   className?: string;
-  colorScheme?: 'light' | 'dark';
   items: Array<{
     title: string;
     content: ReactNode;
@@ -49,9 +48,9 @@ export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
  * }
  * ```
  */
-export function Accordion({ className, colorScheme = 'light', items, ...props }: AccordionProps) {
+export function Accordion({ className, items, ...props }: AccordionProps) {
   return (
-    <AccordionPrimitive.Root className={className} colorScheme={colorScheme} {...props}>
+    <AccordionPrimitive.Root className={className} {...props}>
       {items.map(({ content, title, value }) => (
         <AccordionPrimitive.Item key={value} value={value}>
           <AccordionPrimitive.Header>

src/components/accordion/primitives.ts

@@ -5,7 +5,6 @@ export {
 export {
   AccordionRoot as Root,
   type AccordionRootProps as RootProps,
-  useAccordion,
 } from '@/components/accordion/primitives/accordion-root';
 export {
   AccordionContent as Content,

src/components/accordion/primitives/accordion-chevron.tsx

@@ -1,22 +1,14 @@
 import type { ComponentProps } from 'react';
 
-import { useAccordion } from '@/components/accordion';
 import { cn } from '@/lib';
 
 export type AccordionChevronProps = ComponentProps<'svg'>;
 
 export function AccordionChevron({ className, ...props }: AccordionChevronProps) {
-  const { colorScheme } = useAccordion();
-
   return (
     <svg
       className={cn(
-        'mt-1 shrink-0 [&>line]:origin-center [&>line]:transition [&>line]:duration-300 [&>line]:ease-out',
-        {
-          light:
-            'stroke-[var(--accordion-light-title-icon,hsl(var(--contrast-500)))] group-hover:stroke-[var(--accordion-light-title-icon-hover,hsl(var(--foreground)))]',
-          dark: 'stroke-[var(--accordion-dark-title-icon,hsl(var(--contrast-200)))] group-hover:stroke-[var(--accordion-dark-title-icon-hover,hsl(var(--background)))]',
-        }[colorScheme],
+        'mt-1 shrink-0 stroke-[var(--accordion-light-title-icon,hsl(var(--contrast-500)))] group-hover:stroke-[var(--accordion-light-title-icon-hover,hsl(var(--foreground)))] [&>line]:origin-center [&>line]:transition [&>line]:duration-300 [&>line]:ease-out',
         className,
       )}
       data-slot="accordion-chevron"

src/components/accordion/primitives/accordion-content-area.tsx

@@ -1,21 +1,15 @@
 import type { ComponentProps } from 'react';
 
-import { useAccordion } from '@/components/accordion';
 import { cn } from '@/lib';
 
 export type AccordionContentAreaProps = ComponentProps<'div'>;
 
 export function AccordionContentArea({ children, className, ...props }: AccordionContentAreaProps) {
-  const { colorScheme } = useAccordion();
-
   return (
     <div
       className={cn(
-        'py-3 text-base font-light leading-normal [font-family:var(--accordion-content-font-family,var(--font-family-body))]',
-        {
-          light: 'text-[var(--accordion-light-content-text,hsl(var(--foreground)))]',
-          dark: 'text-[var(--accordion-dark-content-text,hsl(var(--background)))]',
-        }[colorScheme],
+        'py-3 text-base font-light leading-normal text-[var(--accordion-light-content-text,hsl(var(--foreground)))] [font-family:var(--accordion-content-font-family,var(--font-family-body))]',
+
         className,
       )}
       data-slot="accordion-content-area"

src/components/accordion/primitives/accordion-item.tsx

@@ -3,22 +3,15 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import type { ComponentProps } from 'react';
 
-import { useAccordion } from '@/components/accordion';
 import { cn } from '@/lib';
 
 export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
 
 export function AccordionItem({ children, className, ...props }: AccordionItemProps) {
-  const { colorScheme } = useAccordion();
-
   return (
     <AccordionPrimitive.Item
       className={cn(
-        'focus:outline-2 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--accordion-focus,hsl(var(--primary)))] has-[:focus-visible]:ring-offset-4',
-        {
-          light: 'ring-offset-[var(--acordion-light-offset,hsl(var(--background)))]',
-          dark: 'ring-offset-[var(--acordion-dark-offset,hsl(var(--foreground)))]',
-        }[colorScheme],
+        'ring-offset-[var(--acordion-light-offset,hsl(var(--background)))] focus:outline-2 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--accordion-focus,hsl(var(--primary)))] has-[:focus-visible]:ring-offset-4',
         className,
       )}
       data-slot="accordion-item"

src/components/accordion/primitives/accordion-root.tsx

@@ -1,49 +1,16 @@
 'use client';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { createContext, use, useMemo } from 'react';
 import type { ComponentProps } from 'react';
 
 import { cn } from '@/lib';
 
-interface AccordionContext {
-  colorScheme: 'light' | 'dark';
-}
-
-export const AccordionContext = createContext<AccordionContext | undefined>(undefined);
-
-export type AccordionRootProps = ComponentProps<typeof AccordionPrimitive.Root> & {
-  colorScheme?: 'light' | 'dark';
-};
-
-export function AccordionRoot({
-  className,
-  colorScheme = 'light',
-  children,
-  ...props
-}: AccordionRootProps) {
-  const contextValues = useMemo(
-    () => ({
-      colorScheme,
-    }),
-    [colorScheme],
-  );
+export type AccordionRootProps = ComponentProps<typeof AccordionPrimitive.Root>;
 
+export function AccordionRoot({ className, children, ...props }: AccordionRootProps) {
   return (
-    <AccordionContext.Provider value={contextValues}>
-      <AccordionPrimitive.Root className={cn(className)} data-slot="accordion-root" {...props}>
-        {children}
-      </AccordionPrimitive.Root>
-    </AccordionContext.Provider>
+    <AccordionPrimitive.Root className={cn(className)} data-slot="accordion-root" {...props}>
+      {children}
+    </AccordionPrimitive.Root>
   );
 }
-
-export function useAccordion() {
-  const context = use(AccordionContext);
-
-  if (context === undefined) {
-    throw new Error('useAccordion must be used within an AccordionRoot');
-  }
-
-  return context;
-}

src/components/accordion/primitives/accordion-title.tsx

@@ -1,22 +1,14 @@
 import type { ComponentProps } from 'react';
 
-import { useAccordion } from '@/components/accordion';
 import { cn } from '@/lib';
 
 export type AccordionTitleProps = ComponentProps<'div'>;
 
 export function AccordionTitle({ children, className, ...props }: AccordionTitleProps) {
-  const { colorScheme } = useAccordion();
-
   return (
     <div
       className={cn(
-        'flex-1 select-none text-sm font-normal uppercase transition-colors duration-300 ease-out [font-family:var(--accordion-title-font-family,var(--font-family-mono))]',
-        {
-          light:
-            'text-[var(--accordion-light-title-text,hsl(var(--contrast-400)))] group-hover:text-[var(--accordion-light-title-text-hover,hsl(var(--foreground)))]',
-          dark: 'text-[var(--accordion-dark-title-text,hsl(var(--contrast-200)))] group-hover:text-[var(--accordion-dark-title-text-hover,hsl(var(--background)))]',
-        }[colorScheme],
+        'flex-1 select-none text-sm font-normal uppercase text-[var(--accordion-light-title-text,hsl(var(--contrast-400)))] transition-colors duration-300 ease-out [font-family:var(--accordion-title-font-family,var(--font-family-mono))] group-hover:text-[var(--accordion-light-title-text-hover,hsl(var(--foreground)))]',
         className,
       )}
       {...props}