Merge pull request #333 from omnifed/309-feature-update-neutral-palet…

…te-to-page 309 feature update neutral palette to page
omnifed · Aug 1, 2024 · 71bb4fd · 71bb4fd
2 parents 0345599 + 96ca616
commit 71bb4fd
Show file tree

Hide file tree

Showing 69 changed files with 549 additions and 555 deletions.
diff --git a/docs/app/components/ApiLinks.tsx b/docs/app/components/ApiLinks.tsx
@@ -18,7 +18,7 @@ const apiLinkStyles = css({
   transition: 'all 200ms ease-in-out',
   _hover: {
     bgColor: 'action.navigation.hover',
-    color: 'neutral.text.inverse !important',
+    color: 'page.text.inverse !important',
     textStyle: 'link',
   },
 })

diff --git a/docs/app/components/CategoryList.tsx b/docs/app/components/CategoryList.tsx
@@ -19,7 +19,7 @@ function CategoryCard(props: CategoryCardProps) {
       <Link
         href={item!.route!}
         className={vstack({
-          bgColor: 'neutral.surface.100',
+          bgColor: 'page.surface.100',
           display: 'block',
           h: '15rem',
           overflow: 'hidden',
@@ -76,7 +76,7 @@ function CategoryCard(props: CategoryCardProps) {
         >
           <p
             className={css({
-              color: 'neutral.text.initial !important',
+              color: 'page.text.initial !important',
               textStyle: 'body-xl !important',
             })}
           >
@@ -99,7 +99,7 @@ export default function CategoryList(props: CategoryListProps) {
       <header>
         <p
           className={css({
-            color: 'neutral.text.initial !important',
+            color: 'page.text.initial !important',
             pb: '2 !important',
             textStyle: 'h2 !important',
           })}

diff --git a/docs/app/components/CodePreview.tsx b/docs/app/components/CodePreview.tsx
@@ -70,7 +70,7 @@ export function PreviewLayout(props: PropsWithChildren<PreviewLayoutProps>) {
       </header>
       <section
         className={vstack({
-          bgColor: 'neutral.surface.100',
+          bgColor: 'page.surface.100',
           border: '3px solid',
           borderColor: 'info.border.initial',
           borderRadius: 'xl',
@@ -83,7 +83,7 @@ export function PreviewLayout(props: PropsWithChildren<PreviewLayoutProps>) {
       >
         <span
           className={css({
-            bgColor: 'neutral.surface.initial',
+            bgColor: 'page.surface.initial',
             pxi: '2',
             rounded: 'md',
             position: 'absolute',

diff --git a/docs/app/components/FeatureHeader.tsx b/docs/app/components/FeatureHeader.tsx
@@ -39,7 +39,7 @@ export default function FeatureHeader(
         <section
           className={vstack({
             alignItems: 'flex-start',
-            bgColor: 'neutral.surface.100',
+            bgColor: 'page.surface.100',
             h: 'full',
             justify: 'center',
             pxi: {
@@ -104,7 +104,7 @@ export default function FeatureHeader(
             },
             '&:is([data-category=touch-target])': {
               cerberusGradient: 'purple',
-              color: 'neutral.surface.300',
+              color: 'page.surface.300',
             },
             '&:is([data-category=forms])': {
               cerberusGradient: 'blue',
@@ -117,7 +117,7 @@ export default function FeatureHeader(
             '&:is([data-category=utilities])': {
               gradientFrom: 'action.bg.initial',
               gradientTo: 'action.border.initial',
-              color: 'neutral.surface.200',
+              color: 'page.surface.200',
             },
           })}
         >

diff --git a/docs/app/components/MatchSideNavItem.tsx b/docs/app/components/MatchSideNavItem.tsx
@@ -17,7 +17,7 @@ export default function MatchSideNavItem(props: HeadingItem | LinkItem) {
       return (
         <p
           className={css({
-            color: 'neutral.text.100',
+            color: 'page.text.100',
             textStyle: 'h6',
             textTransform: 'uppercase',
           })}
@@ -76,7 +76,7 @@ export default function MatchSideNavItem(props: HeadingItem | LinkItem) {
                   bgGradient: 'to-r',
                   gradientFrom: 'warning.border.initial',
                   gradientTo: 'info.border.initial',
-                  color: 'neutral.surface.initial',
+                  color: 'page.surface.initial',
                   display: 'inline-block',
                   fontWeight: '600',
                   lineHeight: 'initial',

diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx
@@ -31,7 +31,7 @@ const navLogoContent = (
         rounded: 'sm',
         textStyle: 'body-xl',
         _active: {
-          color: 'neutral.text.initial',
+          color: 'page.text.initial',
         },
         _focusVisible: focusStates._focusVisible,
       })}
@@ -115,11 +115,11 @@ export function Nav() {
         <ul
           className={hstack({
             border: '1px solid',
-            borderColor: 'neutral.border.initial',
+            borderColor: 'page.border.initial',
             gap: '0',
             w: 'full',
             '& li:nth-child(2)': {
-              borderColor: 'neutral.border.initial',
+              borderColor: 'page.border.initial',
               borderLeft: '1px solid',
               borderRight: '1px solid',
               md: {
@@ -214,7 +214,7 @@ export function Nav() {
           <li>
             <p
               className={css({
-                color: 'neutral.text.100',
+                color: 'page.text.100',
                 h: '1.5rem',
                 pt: '1px',
                 textStyle: 'body-xs',

diff --git a/docs/app/components/OnThisPage.tsx b/docs/app/components/OnThisPage.tsx
@@ -51,14 +51,14 @@ export default function OnThisPage() {
     <div
       className={css({
         borderLeft: '1px solid',
-        borderColor: 'neutral.border.initial',
+        borderColor: 'page.border.initial',
         h: 'fit-content',
         paddingInlineStart: '6',
       })}
     >
       <p
         className={css({
-          color: 'neutral.text.100',
+          color: 'page.text.100',
           textStyle: 'h6',
           mb: '4',
         })}

diff --git a/docs/app/components/OverviewList.tsx b/docs/app/components/OverviewList.tsx
@@ -24,7 +24,7 @@ export default function OverviewList(props: OverviewListProps) {
         <Show when={Boolean(props.intro)}>
           <li
             className={css({
-              color: 'neutral.text.100',
+              color: 'page.text.100',
               pb: '4',
               textStyle: 'body-xl',
             })}

diff --git a/docs/app/components/PageTabs.tsx b/docs/app/components/PageTabs.tsx
@@ -24,7 +24,7 @@ export default function PageTabs(props: TabProps) {
         description={props.description}
         className={css({
           borderBottom: 'none',
-          bgColor: 'neutral.surface.100',
+          bgColor: 'page.surface.100',
           justifyContent: 'space-evenly',
           mb: '8',
           overflowX: 'auto',
@@ -73,7 +73,7 @@ export function OverviewPageTabs(props: OverviewPageTabsProps) {
         description={props.description}
         className={css({
           borderBottom: 'none',
-          bgColor: 'neutral.surface.100',
+          bgColor: 'page.surface.100',
           justifyContent: 'space-evenly',
           mb: '8',
           overflowX: 'auto',
@@ -156,7 +156,7 @@ const tabOverrideStyles = css({
   },
   _hover: {
     bgColor: 'action.navigation.hover',
-    color: 'neutral.surface.initial',
+    color: 'page.surface.initial',
   },
   _selected: {
     bgGradient: 'to-bl',

diff --git a/docs/app/components/PaletteSwatch.tsx b/docs/app/components/PaletteSwatch.tsx
@@ -13,10 +13,10 @@ export function PaletteAvatar(props: PropsWithChildren<PaletteAvatar>) {
         data-palette={props.palette}
         className={circle({
           border: '1px solid',
-          borderColor: 'neutral.border.initial',
+          borderColor: 'page.border.initial',
           size: '4',
-          _neutralPalette: {
-            bgColor: 'neutral.surface.initial',
+          _pagePalette: {
+            bgColor: 'page.surface.initial',
           },
           _actionPalette: {
             bgColor: 'action.bg.initial',

diff --git a/docs/app/components/SideNav.tsx b/docs/app/components/SideNav.tsx
@@ -31,7 +31,7 @@ export default memo(function SideNav(props: PropsWithChildren<SideNavProps>) {
     <div
       className={css({
         paddingInlineStart: '6',
-        borderColor: 'neutral.border.100',
+        borderColor: 'page.border.100',
         borderRight: '1px solid',
       })}
     >

diff --git a/docs/app/icons/[name]/components/IconDetails.tsx b/docs/app/icons/[name]/components/IconDetails.tsx
@@ -24,7 +24,7 @@ export default function IconDetails(props: IconDetailsProps) {
           columns: 12,
           lg: {
             borderBottom: '1px solid',
-            borderColor: 'neutral.border.initial',
+            borderColor: 'page.border.initial',
             mb: '8',
             pb: '8',
           },
@@ -43,7 +43,7 @@ export default function IconDetails(props: IconDetailsProps) {
           <div
             className={vstack({
               justify: 'center',
-              bgColor: 'neutral.surface.200',
+              bgColor: 'page.surface.200',
               h: PREVIEW_SIZE,
               rounded: 'md',
             })}
@@ -72,7 +72,7 @@ export default function IconDetails(props: IconDetailsProps) {
             {sizes.map((size) => (
               <li
                 className={vstack({
-                  bgColor: 'neutral.surface.200',
+                  bgColor: 'page.surface.200',
                   h: `calc(${PREVIEW_SIZE} / 4)`,
                   justify: 'center',
                   rounded: 'md',

diff --git a/docs/app/icons/all/components/icons-list.tsx b/docs/app/icons/all/components/icons-list.tsx
@@ -47,15 +47,15 @@ export default function IconsList(props: IconsListProps) {
           <Link
             className={vstack({
               display: 'flex !important',
-              bgColor: 'neutral.surface.200',
+              bgColor: 'page.surface.200',
               h: 'full',
               justify: 'center !important',
               w: 'full',
               rounded: 'md',
               transition: 'background-color, color 250ms ease-in-out',
               _hover: {
                 bgColor: 'action.navigation.initial',
-                color: 'neutral.surface.100 !important',
+                color: 'page.surface.100 !important',
               },
             })}
             href={`/icons/${name}`}

diff --git a/docs/app/icons/all/components/searchable-icons.tsx b/docs/app/icons/all/components/searchable-icons.tsx
@@ -21,7 +21,7 @@ export default function SearchableIcons() {
     >
       <div
         className={css({
-          bgColor: 'neutral.surface.initial',
+          bgColor: 'page.surface.initial',
           position: 'sticky',
           py: '2',
           top: '-1.75rem',
@@ -30,7 +30,7 @@ export default function SearchableIcons() {
             bottom: '-1.8rem',
             bgGradient: 'to-b',
             content: '""',
-            gradientFrom: 'neutral.surface.initial',
+            gradientFrom: 'page.surface.initial',
             gradientTo: 'transparent',
             h: '8',
             left: '0',
@@ -46,7 +46,7 @@ export default function SearchableIcons() {
           <input
             className={css({
               border: '1px solid',
-              borderColor: 'neutral.border.initial',
+              borderColor: 'page.border.initial',
               borderRadius: 'full',
               p: '4',
               w: 'full',

diff --git a/docs/app/preset/animation/components/animation-preview.tsx b/docs/app/preset/animation/components/animation-preview.tsx
@@ -35,7 +35,7 @@ export function PulsePreview() {
     <div
       className={square({
         animation: 'pulse 2s infinite',
-        bgColor: 'neutral.surface.300',
+        bgColor: 'page.surface.300',
         rounded: 'md',
         size: '10rem',
       })}

diff --git a/docs/app/preset/animation/doc.mdx b/docs/app/preset/animation/doc.mdx
@@ -61,7 +61,7 @@ function PulsePreview() {
     <div
       className={square({
         animation: 'pulse 2s infinite',
-        bgColor: 'neutral.surface.300',
+        bgColor: 'page.surface.300',
         rounded: 'md',
         size: '10rem',
       })}