Merge pull request #475 from omnifed/474-feat-add-new-gradients

474 feat add new gradients

docs/app/components/Code.tsx

@@ -0,0 +1,32 @@
+import { css } from '@cerberus-design/styled-system/css'
+import type { PropsWithChildren } from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+
+interface CodeProps {
+  showLineNumbers?: boolean
+  language?: string
+}
+
+export function Code(props: PropsWithChildren<CodeProps>) {
+  return (
+    <SyntaxHighlighter
+      className={css({
+        border: '3px solid',
+        borderColor: '#272B3B',
+        rounded: 'xl',
+        '& :is(.linenumber)': {
+          color: '#4b6479',
+          borderInlineEnd: '1px solid',
+          borderInlineEndColor: '#272B3B',
+          marginInlineEnd: '4',
+        },
+      })}
+      language={props.language ?? 'typescript'}
+      showLineNumbers={props.showLineNumbers}
+      style={nightOwl}
+    >
+      {props.children}
+    </SyntaxHighlighter>
+  )
+}

docs/app/components/FeatureHeader.tsx

@@ -106,21 +106,23 @@ export default function FeatureHeader(
               '@/lg': '33%',
             },
             '&:is([data-category=touch-target])': {
-              cerberusGradient: 'purple',
+              cerberusGradient: 'dark-purple',
               color: 'page.surface.300',
+              _lightMode: {
+                cerbGradient: 'light-purple',
+              },
             },
             '&:is([data-category=forms])': {
-              cerberusGradient: 'blue',
+              cerberusGradient: 'light-blue',
               color: 'warning.text.initial',
             },
             '&:is([data-category=menus])': {
               cerberusGradient: 'green',
               color: 'success.text.200',
             },
             '&:is([data-category=utilities])': {
-              gradientFrom: 'action.bg.initial',
-              gradientTo: 'action.border.initial',
-              color: 'page.surface.200',
+              cerberusGradient: 'yellow',
+              color: 'warning.text.initial',
             },
           })}
         >

docs/app/components/ModeToggle.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { css } from '@cerberus-design/styled-system/css'
+import { AnimatingMoonIcon } from './icons/AnimatingMoonIcon'
+import { AnimatingSunIcon } from './icons/AnimatingSunIcon'
+import { Show, useThemeContext } from '@cerberus-design/react'
+import { focusStates } from '@cerberus-design/panda-preset'
+import { useMemo } from 'react'
+
+export function ModeToggle() {
+  const { mode, updateMode } = useThemeContext()
+  const ariaLabel = useMemo(() => {
+    return mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'
+  }, [mode])
+
+  return (
+    <button
+      className={css({
+        rounded: 'sm',
+        _focusVisible: focusStates._focusVisible,
+      })}
+      aria-label={ariaLabel}
+      onClick={updateMode}
+    >
+      <Show when={mode === 'light'} fallback={<AnimatingMoonIcon />}>
+        <AnimatingSunIcon />
+      </Show>
+    </button>
+  )
+}

docs/app/preset/colors/components/AvatarSwatch.tsx

@@ -2,7 +2,7 @@
 
 import { useThemeContext } from '@cerberus-design/react'
 import type { SemanticToken, Sentiment } from '@cerberus-design/panda-preset'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { circle } from '@cerberus/styled-system/patterns'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'

docs/app/preset/colors/[name]/components/color-details.tsx → docs/app/preset/colors/components/color-details.tsx

@@ -13,12 +13,12 @@ import {
   hstack,
   vstack,
 } from '@cerberus/styled-system/patterns'
-import { normalizeTokens, getTokenList } from '../../helpers/normalize'
+import { normalizeTokens, getTokenList } from '../helpers/normalize'
 import { Show, useThemeContext } from '@cerberus-design/react'
-import { Fragment, useEffect, useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 import { css } from '@cerberus/styled-system/css'
 import UsageExample from './usage-example'
-import { usePathname, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 
 function getFigmaProperty(selector: Usage): string {
   switch (selector) {

docs/app/preset/colors/[name]/components/usage-example.tsx → docs/app/preset/colors/components/usage-example.tsx

@@ -1,4 +1,3 @@
-import { zIndex } from '@cerberus-design/panda-preset'
 import {
   Button,
   Field,
@@ -11,7 +10,7 @@ import {
   Tabs,
   Tag,
 } from '@cerberus-design/react'
-import { css, cx } from '@cerberus/styled-system/css'
+import { css } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
 
 const highlightedStyles = {

docs/app/preset/colors/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react'
 import OnThisPage from '../../components/OnThisPage'
 import { PageMainContent, PageSections } from '../../components/PageLayout'
-import ColorDetails from './[name]/components/color-details'
+import ColorDetails from './components/color-details'
 import Colors from './colors.mdx'
 import { FilterablePaletteSection } from './components/FilterablePaletteSection'
 

docs/app/preset/gradients/components/gradient-list.tsx

@@ -0,0 +1,123 @@
+import { cq, hstack, vstack } from '@cerberus/styled-system/patterns'
+import { PAGE, gradientValues } from '@cerberus-design/panda-preset'
+import { css } from '@cerberus/styled-system/css'
+import { LogoFigma } from '@cerberus-design/icons'
+import { Code } from '@/app/components/Code'
+import { PAGE_TEXT_INITIAL } from '@/app/utils/const'
+
+export default function GradientList() {
+  return (
+    <div
+      className={cq({
+        mt: 6,
+      })}
+    >
+      <ul
+        className={hstack({
+          gap: 4,
+          flexWrap: 'wrap',
+        })}
+      >
+        {gradientValues.map((gradient, index) => (
+          <li
+            className={css({
+              flexShrink: 0,
+              w: {
+                '@/sm': 'full',
+                '@/xl': 'calc(50% - 1rem)',
+                '@/4xl': 'calc(33.3333% - 1rem)',
+              },
+            })}
+            key={index}
+          >
+            <div
+              className={css({
+                bgColor: 'page.surface.100',
+                border: '2px solid',
+                borderColor: 'page.border.initial',
+                p: 2,
+                rounded: 'xl',
+              })}
+            >
+              <section
+                data-gradient={gradient}
+                className={css({
+                  h: '15rem',
+                  rounded: 'lg',
+                  '&:is([data-gradient=dark-purple])': {
+                    cerbGradient: 'dark-purple',
+                  },
+                  '&:is([data-gradient=light-purple])': {
+                    cerbGradient: 'light-purple',
+                  },
+                  '&:is([data-gradient=green])': {
+                    cerbGradient: 'green',
+                  },
+                  '&:is([data-gradient=light-blue])': {
+                    cerbGradient: 'light-blue',
+                  },
+                  '&:is([data-gradient=red])': {
+                    cerbGradient: 'red',
+                  },
+                  '&:is([data-gradient=neutral])': {
+                    cerbGradient: 'neutral',
+                  },
+                  '&:is([data-gradient=yellow])': {
+                    cerbGradient: 'yellow',
+                  },
+                  '&:is([data-gradient=light-teal])': {
+                    cerbGradient: 'light-teal',
+                  },
+                  '&:is([data-gradient=teal])': {
+                    cerbGradient: 'teal',
+                  },
+                })}
+              />
+              <footer
+                className={vstack({
+                  alignItems: 'flex-start',
+                  pb: 4,
+                  pxi: '5',
+                  pt: 3,
+                })}
+              >
+                <h2
+                  className={css({
+                    color: PAGE_TEXT_INITIAL,
+                    textStyle: 'h3',
+                    textTransform: 'capitalize',
+                  })}
+                >
+                  {gradient.replace(/-/g, ' ')}
+                </h2>
+                <p
+                  className={hstack({
+                    color: PAGE_TEXT_INITIAL,
+                    gap: 1,
+                  })}
+                >
+                  <span
+                    className={css({
+                      color: 'page.text.100',
+                    })}
+                  >
+                    <LogoFigma />
+                  </span>
+                  Gradient Fills/{gradient}
+                </p>
+                <span
+                  className={css({
+                    color: PAGE_TEXT_INITIAL,
+                    mt: 3,
+                  })}
+                >
+                  <Code>{gradient}</Code>
+                </span>
+              </footer>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

docs/app/preset/gradients/doc.mdx

@@ -0,0 +1,20 @@
+import GradientList from '@/app/preset/gradients/components/gradient-list'
+
+
+# Gradients
+
+Cerberus provides a set of predefined gradients that can be used in both design and development.
+
+## Usage
+
+To apply a gradient in code, just use the `cerbGradient` utility in any of your style objects.
+
+```tsx
+<div className={css({ cerbGradient: 'yellow' })}>
+  This is a yellow gradient
+</div>
+```
+
+## Options
+
+<GradientList />

docs/app/preset/gradients/helpers/normalize.ts

@@ -0,0 +1,85 @@
+import {
+  actionTokens,
+  dangerTokens,
+  infoTokens,
+  pageTokens,
+  secondaryActionTokens,
+  successTokens,
+  warningTokens,
+  type SemanticToken,
+  type Sentiment,
+  type SentimentConfig,
+  type ThemeSelectors,
+} from '@cerberus-design/panda-preset'
+
+export function getTokenList(palette: Sentiment): SentimentConfig[Sentiment] {
+  switch (palette) {
+    case 'page':
+      return pageTokens.page
+    case 'action':
+      return actionTokens.action
+    case 'secondaryAction':
+      return secondaryActionTokens.secondaryAction
+    case 'info':
+      return infoTokens.info
+    case 'success':
+      return successTokens.success
+    case 'warning':
+      return warningTokens.warning
+    case 'danger':
+      return dangerTokens.danger
+    default:
+      throw new Error('Invalid color palette')
+  }
+}
+
+export function normalizeTokens(
+  tokens: SentimentConfig[Sentiment],
+  palette: Sentiment,
+) {
+  const usage = Object.keys(tokens!)
+  return usage.reduce((acc, key) => {
+    const token = tokens![key as keyof typeof tokens]
+    const tokenKeys = Object.keys(token!)
+    const nestedTokenKeys = tokenKeys.filter(
+      (tokenKey) => typeof token![tokenKey as keyof typeof token] === 'object',
+    )
+
+    const nestedTokens = normalizeNestedTokens({
+      nestedTokenKeys,
+      token,
+      key,
+      palette,
+    })
+
+    return { ...acc, ...nestedTokens }
+  }, {})
+}
+
+interface NormalizeNestedTokensProps {
+  nestedTokenKeys: string[]
+  token: SemanticToken
+  key: string
+  palette: Sentiment
+}
+
+export function normalizeNestedTokens(data: NormalizeNestedTokensProps) {
+  const { token, key, palette } = data
+  return data.nestedTokenKeys.reduce((acc, tokenKey) => {
+    const nestedToken = token![tokenKey as keyof typeof token] as ThemeSelectors
+
+    if (nestedToken.hasOwnProperty('value'))
+      return { ...acc, [`${palette}-${key}-${tokenKey}`]: nestedToken }
+
+    const nestedTokenKeys = Object.keys(nestedToken)
+    const normalizedNestedToken = nestedTokenKeys.reduce(
+      (acc, nestedTokenKey) => {
+        const value = nestedToken[nestedTokenKey as keyof typeof nestedToken]
+        const tokenName = `${palette}-${key}-${tokenKey}-${nestedTokenKey}`
+        return { ...acc, [tokenName]: value }
+      },
+      {},
+    )
+    return { ...acc, ...normalizedNestedToken }
+  }, {})
+}