refactor: make the props and css correct by getting them from the var…

…iables
HamzaAmar · Nov 13, 2024 · fcc2015 · fcc2015
1 parent 6973b2c
commit fcc2015
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 28 deletions.
diff --git a/packages/pillar-core/src/core/accordion/accordion.type.ts b/packages/pillar-core/src/core/accordion/accordion.type.ts
@@ -2,7 +2,7 @@ import type { ReactElement, Dispatch, SetStateAction } from 'react'
 import { Color, Corner, Size, Variant } from '../../types'
 
 export interface AccordionProps {
-  type?: 'single' | 'multiple'
+  multiple?: boolean
   collapsible?: boolean
   color?: Color
   variant?: Variant

diff --git a/packages/pillar-core/src/core/accordion/index.tsx b/packages/pillar-core/src/core/accordion/index.tsx
@@ -26,8 +26,8 @@ import type {
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
-function useAccordion({ type, collapsible }: AccordionProps) {
-  const [active, setActive] = useState<Value | Value[]>(type === 'multiple' ? [] : -1)
+function useAccordion({ multiple, collapsible }: AccordionProps) {
+  const [active, setActive] = useState<Value | Value[]>(multiple ? [] : -1)
   const isOpen = (value: Value) => (Array.isArray(active) ? active.includes(value) : active === value)
 
   function toggleAccordion(currentIndex: Value) {
@@ -61,21 +61,10 @@ const [AccordionProvider, useAccordionContext] = context<AccordionContextProps>(
 
 export const Accordion = forwardRef(
   (
-    {
-      children,
-      type = 'single',
-      collapsible,
-      color = 'B',
-      variant,
-      size = '5',
-      corner = '0',
-      separate,
-      className,
-      ...rest
-    },
+    { children, multiple, collapsible, color = 'B', variant, size = '5', corner = '0', separate, className, ...rest },
     forwardedRef
   ) => {
-    const state = useAccordion({ type, collapsible })
+    const state = useAccordion({ multiple, collapsible })
 
     const classNames = cx(`ac-`, {
       [`C-${color}`]: color,

diff --git a/packages/pillar-core/src/core/alert/_alert.css b/packages/pillar-core/src/core/alert/_alert.css
@@ -3,7 +3,7 @@
   border: 1px solid transparent;
   /* Default Value set by the Client */
   border-radius: var(--al-rad, 0);
-  font-size: var(--al-size, 1rem);
+  font-size: var(--al-size, var(--F5));
 }
 
 .al-C {

diff --git a/packages/pillar-core/src/core/avatar/_avatar.css b/packages/pillar-core/src/core/avatar/_avatar.css
@@ -8,10 +8,12 @@
     linear-gradient(var(--av-b), var(--av-b)) content-box,
     linear-gradient(var(--B1), var(--B1)) padding-box;
   min-width: var(--eq-s);
+  /* aspect-ratio: 1; */
+  max-height: var(--eq-s);
 
   /* Default Value set by the Client */
   border-radius: var(--avatar-rad, 10em);
-  font-size: var(--avatar-size, 1rem);
+  font-size: var(--avatar-size, var(--F5));
 
   & > * {
     border-radius: inherit;

diff --git a/packages/pillar-core/src/core/blockquote/_blockquote.css b/packages/pillar-core/src/core/blockquote/_blockquote.css
@@ -12,7 +12,7 @@
     avatars are provided, they will override these properties.
   */
   border-radius: var(--blockquote-rad, 0.25em);
-  font-size: var(--blockquote-size, 1rem);
+  font-size: var(--blockquote-size, var(--F5));
 
   & cite {
     display: block;

diff --git a/packages/pillar-core/src/core/button/_button.css b/packages/pillar-core/src/core/button/_button.css
@@ -40,7 +40,7 @@
     avatars are provided, they will override these properties.
   */
   border-radius: var(--bu-rad, 0.25em);
-  font-size: var(--bu-size, 0.875rem);
+  font-size: var(--bu-size, var(--F4));
   text-transform: var(--bu-transform, capitalize);
 }
 

diff --git a/packages/pillar-core/src/core/button/button.type.ts b/packages/pillar-core/src/core/button/button.type.ts
@@ -5,7 +5,7 @@ import type { Color, Size, Corner, Variant, Direction, Transform, CornerHand } f
 type Position = 'start' | 'end'
 type State = 'idle' | 'loading'
 
-type ButtonVariant = Variant | 'link' | 'shadow'
+type ButtonVariant = Variant | 'link'
 
 interface BaseButton {
   color?: Color

diff --git a/packages/pillar-core/src/core/checkbox/_checkbox.css b/packages/pillar-core/src/core/checkbox/_checkbox.css
@@ -8,7 +8,7 @@
   color: var(--text-8);
   display: flex;
   gap: var(--S3);
-  align-items: center;
+  align-items: start;
 
   /* Default Value by The Client */
   font-size: var(--checkbox-size, 1rem);

diff --git a/packages/pillar-core/src/core/chips/_chips.css b/packages/pillar-core/src/core/chips/_chips.css
@@ -1,14 +1,14 @@
 .ci- {
   max-width: 35ch;
-  padding: 0.125em 0.25em;
+  padding: 0.125em;
 
   /*
     These properties serve as fallbacks. If the corresponding utility functions are
     unavailable, these properties take priority. However, if specific props related to
     avatars are provided, they will override these properties.
   */
   border-radius: var(--chip-rad, 0.25em);
-  font-size: var(--chip-size, 0.875rem);
+  font-size: var(--chip-size, var(--F3));
   text-transform: var(--chip-transform, capitalize);
 }
 

diff --git a/packages/pillar-core/src/core/code/_code.css b/packages/pillar-core/src/core/code/_code.css
@@ -9,6 +9,6 @@
     Code are provided, they will override these properties.
   */
   border-radius: var(--code-rad, 0.125em);
-  font-size: var(--code-size, 0.85rem);
+  font-size: var(--code-size, var(--F4));
   text-transform: var(--code-transform, capitalize);
 }
diff --git a/packages/pillar-core/src/core/pagination/index.tsx b/packages/pillar-core/src/core/pagination/index.tsx
@@ -18,7 +18,7 @@ const Item = forwardRef((props, forwardedRef) => {
   const {
     active = 1,
     children,
-    variant = context?.variant ?? 'outline',
+    variant = context?.variant ?? 'soft',
     color = context?.color ?? 'b',
     size = context?.size ?? '4',
     corner = context?.corner ?? '2',

diff --git a/packages/pillar-core/src/core/spinner/_spinner.css b/packages/pillar-core/src/core/spinner/_spinner.css
@@ -9,7 +9,7 @@
     unavailable, these properties take priority. However, if specific props related to
     avatars are provided, they will override these properties.
   */
-  font-size: var(--spinner-size, 1em);
+  font-size: var(--spinner-size, var(--F5));
 
   /* &:is(::before, ::after) { */
   &::before,

diff --git a/packages/pillar-core/src/types/index.ts b/packages/pillar-core/src/types/index.ts
@@ -42,7 +42,7 @@ type Corner = '0' | SharedSize | 'circle' | 'full'
  * @typedef {Corner} Corner
  */
 
-type Variant = 'solid' | 'outline' | 'soft' | 'text' | 'mixed' | undefined
+type Variant = 'shadow' | 'solid' | 'outline' | 'soft' | 'text' | 'mixed' | undefined
 
 /**
  * Represents the color of a component.