feat: improve design of Accordion,Alert,Avatar,Breadcrumb, Button, an…

…d Pagination components

apps/stories/stories/alert.stories.tsx

@@ -105,14 +105,14 @@ export const AlertCorner = () => {
   )
 }
 
-const Variants = ['solid', 'outline', 'soft', 'mixed']
+const Variants = ['shadow', 'solid', 'outline', 'soft', 'mixed']
 
 export const AlertVariant = () => {
   return (
     <div className="l_flow__md">
       {Variants.map((variant) => (
         <Flex key={variant} direction="column" gap="sm">
-          <AlertBase variant={variant} color="danger" />
+          <AlertBase variant={variant} color="warning" />
         </Flex>
       ))}
     </div>

apps/stories/stories/pagination.stories.tsx

@@ -7,7 +7,13 @@ const meta: Meta<typeof Pagination> = {
   title: 'Components/Pagination',
   component: Pagination,
 }
-
+export function PaginationDefault() {
+  return (
+    <div>
+      <Pagination count={10} />
+    </div>
+  )
+}
 export default meta
 export function PaginationColor() {
   return (
@@ -46,13 +52,11 @@ export function PaginationColor() {
 export function PaginationVariant() {
   return (
     <div className="l_flow__md">
-      <Pagination count={10} />
-      <Pagination count={10} color="danger" />
-      <Pagination count={10} color="success" />
-      <Pagination count={10} color="warning" />
       <Pagination count={10} color="primary" />
-      <Pagination count={10} color="secondary" />
-      <Pagination count={10} color="bg" />
+      <Pagination count={10} color="primary" variant="mixed" />
+      <Pagination count={10} color="primary" variant="soft" />
+      <Pagination count={10} color="primary" variant="solid" />
+      <Pagination count={10} color="primary" variant="text" />
     </div>
   )
 }

packages/pillar-core/src/core/accordion/_accordion.css

@@ -67,7 +67,7 @@
   width: 100%;
   text-align: start;
   background-color: transparent;
-  padding: 0.75em 0.5em;
+  padding: 0.5em;
   color: currentColor;
   transform: none;
 

packages/pillar-core/src/core/alert/_alert.css

@@ -8,11 +8,16 @@
     unavailable, these properties take priority. However, if specific props related to
     avatars are provided, they will override these properties.
   */
-  border-radius: var(--alert-rad, 0.25em);
+  border-radius: var(--alert-rad, 0);
   font-size: var(--alert-size, 1rem);
 
-  &.u_solid {
-    border-inline-start: 6px solid var(--opa-8);
+  &.u_solid,
+  &.u_soft {
+    border-inline-start: 3px solid var(--opa-8);
+  }
+
+  &.u_soft {
+    border-inline-color: var(--clr-9);
   }
 }
 
@@ -27,6 +32,7 @@
 */
 
 .a-l_cnt {
+  font-size: 0.925em;
   &[data-inline='true'] {
     gap: var(--s-xs);
   }

packages/pillar-core/src/core/alert/index.tsx

@@ -15,7 +15,7 @@ export const Alert = forwardRef((props, forwardedRef) => {
     size,
     title,
     inline,
-    variant = 'solid',
+    variant = 'soft',
     closable = false,
     corner,
     className,
@@ -51,7 +51,7 @@ export const Alert = forwardRef((props, forwardedRef) => {
     [`u_f-${size}`]: !!size,
   })
 
-  const _title = title && <div className="u_transform__capitalize u_leading__md u_f-medium">{title}</div>
+  const _title = title && <div className="u_t__capitalize u_leading__md u_f-medium">{title}</div>
   const _message = message && <span>{message}</span>
 
   const closeIcon = closable && (

packages/pillar-core/src/core/avatar/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { Children, forwardRef, useState } from 'react'
-import { User } from '@pillar-ui/icons'
+import { Photos } from '@pillar-ui/icons'
 import type { AvatarGroupContextProps, AvatarGroupProps, AvatarProps } from './avatar.type'
 import { classnames, createContext } from '@pillar-ui/utils'
 import { ForwardRefComponent } from '../../types/polymorphic.type'
@@ -66,7 +66,7 @@ export const Avatar = forwardRef((props, forwardRef) => {
     size = ctx?.size,
     corner = ctx?.corner,
     color = ctx?.color ?? 'primary',
-    fallback = ctx?.fallback ?? <User width="max(1.75em, 10px)" />,
+    fallback = ctx?.fallback ?? <Photos strokeWidth="1.5" width="max(1.5em, 10px)" />,
     image = '',
     className,
     title,

packages/pillar-core/src/core/breadcrumb/_breadcrumb.css

@@ -5,6 +5,7 @@
 */
 
 .b-r {
+  font-size: 0;
   & ol {
     margin: 0;
     padding: 0;
@@ -27,15 +28,16 @@
 
 .b-r_lnk {
   min-width: 1.5rem;
-  font-size: 1em;
+  font-size: 0.875em;
   color: var(--clr-11);
   padding: 0;
+  text-transform: capitalize;
   &:hover {
-    text-decoration: underline 2px;
-    color: var(--clr-10);
+    text-decoration: underline 1.2px;
   }
   &[aria-current='page'] {
-    color: var(--bg-11);
+    color: var(--bg-10);
     text-decoration: none;
+    cursor: not-allowed;
   }
 }

packages/pillar-core/src/core/breadcrumb/index.tsx

@@ -17,7 +17,7 @@ const [BreadcrumbProvider, useBreadcrumbContext] = createContext<BreadcrumbConte
 })
 
 export const BreadcrumbItem = forwardRef((props, forwardedRef) => {
-  const { separator: contextSeparator = '>' } = useBreadcrumbContext() ?? {}
+  const { separator: contextSeparator = '/' } = useBreadcrumbContext() ?? {}
   const { as = 'a', children, current, separator = contextSeparator, className, ...rest } = props
   const currentPage: CurrentPage = current ? { 'aria-current': 'page' } : {}
   const classNames = classnames(`b-r_lnk`, { [className!]: !!className })
@@ -45,7 +45,7 @@ BreadcrumbItem.displayName = 'BreadcrumbItem'
 */
 
 export const Breadcrumb = forwardRef((props, ref) => {
-  const { children, separator, size, color = 'primary', className, as: Tag = 'nav', ...rest } = props
+  const { children, separator, size, color = 'bg', className, as: Tag = 'nav', ...rest } = props
   const breadcrumbContext = { separator }
   const classNames = classnames(`u_${color}`, {
     [`u_f-${size}`]: !!size,

packages/pillar-core/src/core/button/index.tsx

@@ -85,7 +85,7 @@ export const IconButton = forwardRef(
     },
     forwardedRef
   ) => {
-    const iconButtonClassName = classnames(`bu-i b_u u_${variant} u_${color} u_center`, {
+    const iconButtonClassName = classnames(`b_u bu-i u_${variant} u_${color} u_center`, {
       [className!]: !!className,
       [`u_f-${size}`]: !!size,
       [`u_rad-${corner}`]: !!corner,

packages/pillar-core/src/core/code/index.tsx

@@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '../../types/polymorphic.type'
 import { classnames } from '@pillar-ui/utils'
 
 export const Code = forwardRef((props, ref) => {
-  const { as: Tag = 'code', color = 'bg', size = 'md', corner, children, transform, className, ...rest } = props
+  const { as: Tag = 'code', color = 'bg', size = 'sm', corner, children, transform, className, ...rest } = props
 
   const classNames = classnames(`c-o u_soft u_${color} `, {
     [`u_f-${size}`]: !!size,

packages/pillar-core/src/core/pagination/_pagination.css

@@ -1,14 +1,17 @@
 .p-a_btn {
-  padding: 0.5rem;
+  padding: 0.25rem;
   aspect-ratio: 1 / 1;
+  min-width: 2em;
   color: var(--clr-12);
-  line-height: 1;
-  overflow: hidden;
+  /* overflow: hidden; */
 
   &[aria-current='page'] {
-    background-color: var(--clr-9);
-    color: white;
     border-color: var(--opa-8);
+    outline: 2.5px solid var(--clr-9);
+    outline-offset: -2px;
+    &.u_solid {
+      outline-color: var(--clr-12);
+    }
   }
 }
 
@@ -27,9 +30,3 @@
   gap: var(--s-sm);
   list-style: none;
 }
-
-@media (forced-colors: active) {
-  .p-a_bu[aria-current='page'] {
-    background-color: Highlight;
-  }
-}

packages/pillar-core/src/core/pagination/index.tsx

@@ -19,7 +19,7 @@ const Item = forwardRef((props, forwardedRef) => {
     children,
     variant = context?.variant ?? 'outline',
     color = context?.color ?? 'bg',
-    size = context?.size ?? 'md',
+    size = context?.size ?? 'sm',
     corner = context?.corner ?? 'sm',
     number,
     className,

packages/pillar-core/src/core/switch/_switch.css

@@ -24,7 +24,7 @@
     width: calc(1.25em - 2px);
     height: calc(1.25em - 4px);
     border-radius: inherit;
-    background-color: var(--bg-2);
+    background-color: var(--bg-1);
     position: absolute;
     inset-inline-start: 0;
     top: 50%;

packages/pillar-core/src/css/utilities/_variants.css

@@ -21,7 +21,7 @@
 }
 
 .u_mixed {
-  border-color: var(--clr-7);
+  border-color: var(--clr-8);
   background-color: var(--clr-3);
 }