Merge pull request #231 from omnifed/222-feature-update-semantic-toke…

…ns-to-ref-figma-tokens 222 feature update semantic tokens to ref figma tokens
omnifed · Jul 5, 2024 · af3a77f · af3a77f
2 parents 6c85a51 + d7349cd
commit af3a77f
Show file tree

Hide file tree

Showing 29 changed files with 2,509 additions and 932 deletions.
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.200',
+          bgColor: 'neutral.surface.100',
           border: '3px solid',
           borderColor: 'info.border.initial',
           borderRadius: 'xl',

diff --git a/docs/app/preset/colors/components/ColorSwatch.tsx b/docs/app/preset/colors/components/ColorSwatch.tsx
@@ -34,49 +34,45 @@ const paletteTextStyles = css({
   _infoPalette: {
     color: 'info.text.initial !important',
     '&[data-has-white="true"]': {
-      color: 'info.surface.initial !important',
+      color: 'info.surface.100 !important',
     },
   },
   _successPalette: {
     color: 'success.text.initial !important',
     '&[data-has-white="true"]': {
       color: 'success.text.inverse !important',
     },
-    '&[data-mode="light"]': {
-      color: 'success.surface.initial !important',
-      '&[data-has-white="false"]': {
-        color: 'success.text.initial !important',
-      },
-    },
   },
   _warningPalette: {
     color: 'warning.text.initial !important',
     '&[data-has-white="true"]': {
-      color: 'warning.surface.initial !important',
+      color: 'white !important',
+    },
+    _darkMode: {
+      color: 'white !important',
+      '&[data-has-white="true"]': {
+        color: 'warning.text.initial !important',
+      },
     },
   },
   _dangerPalette: {
-    color: 'danger.text.inverse !important',
+    color: 'danger.text.initial !important',
     '&[data-has-white="true"]': {
-      color: 'danger.text.initial !important',
-    },
-    '&[data-mode="light"]': {
-      color: 'danger.surface.initial !important',
-      '&[data-has-white="false"]': {
-        color: 'danger.text.initial !important',
-      },
+      color: 'danger.text.inverse !important',
     },
   },
 })
 
 const linkStyles = css({
   _neutralPalette: {
-    border: '2px solid',
-    borderColor: 'neutral.border.initial',
+    shadow: 'lg',
+    _darkMode: {
+      border: '2px solid',
+      borderColor: 'neutral.border.initial',
+    },
   },
   _actionPalette: {
-    border: '2px solid',
-    borderColor: 'action.border.initial',
+    shadow: 'lg',
   },
 })
 

diff --git a/docs/app/react/tags/components/tag-preview.tsx b/docs/app/react/tags/components/tag-preview.tsx
@@ -95,7 +95,7 @@ export function CustomTagPreview() {
 type TagTypes = 'pill' | 'rounded' | 'outline' | 'filled' | 'closable'
 interface MatchTagProps {
   kind: TagTypes
-  palette?: TagProps['palette']
+  palette?: TagProps['palette'] | 'gradient'
 }
 
 function MatchTagPreview(props: MatchTagProps) {
@@ -170,10 +170,16 @@ function MatchTagPalettePreview(props: MatchTagProps) {
           Neutral
         </Tag>
       )
-    case 'action':
+    case 'gradient':
       return (
-        <Tag palette="action" shape="rounded">
-          Action
+        <Tag
+          palette="neutral"
+          shape="rounded"
+          className={css({
+            cerbGradient: 'blue',
+          })}
+        >
+          Gradient
         </Tag>
       )
     case 'info':
@@ -218,12 +224,12 @@ export function OverviewPaletteTagPreview() {
   ]
   const palettes = [
     'neutral',
-    'action',
+    'gradient',
     'info',
     'success',
     'warning',
     'danger',
-  ] as Sentiment[]
+  ] as MatchTagProps['palette'][]
 
   return (
     <>

diff --git a/docs/app/react/tags/overview.mdx b/docs/app/react/tags/overview.mdx
@@ -14,7 +14,7 @@ import {
 <OverviewList rules={[
   'Use tags to show options for a specific context',
   'Five types: filled, outline, rounded, pill, or closable',
-  'Use any palette or gradient style',
+  'Use any non-actionable palette or gradient style',
 ]} />
 
 ## Example

diff --git a/packages/panda-preset/src/globalCss.ts b/packages/panda-preset/src/globalCss.ts
@@ -8,7 +8,7 @@ const tooltipStyles = {
     },
     _after: {
       borderColor:
-        'var(--cerberus-colors-neutral-surface-100) transparent transparent transparent',
+        'var(--cerberus-colors-neutral-surface-inverse) transparent transparent transparent',
       left: '50%',
       top: '0',
       transform: 'translateY(-120%)',
@@ -21,7 +21,7 @@ const tooltipStyles = {
     },
     _after: {
       borderColor:
-        'transparent transparent var(--cerberus-colors-neutral-surface-100) transparent ',
+        'transparent transparent var(--cerberus-colors-neutral-surface-inverse) transparent ',
       bottom: '0',
       left: '50%',
       transform: 'translateY(120%)',
@@ -35,7 +35,7 @@ const tooltipStyles = {
     },
     _after: {
       borderColor:
-        'transparent transparent transparent var(--cerberus-colors-neutral-surface-100)',
+        'transparent transparent transparent var(--cerberus-colors-neutral-surface-inverse)',
       left: '0',
       top: '0',
       transform: 'translate3d(-45%, 176%, 0)',
@@ -49,16 +49,16 @@ const tooltipStyles = {
     },
     _after: {
       borderColor:
-        'transparent var(--cerberus-colors-neutral-surface-100) transparent transparent ',
+        'transparent var(--cerberus-colors-neutral-surface-inverse) transparent transparent ',
       right: '0',
       top: '0',
       transform: 'translate3d(95%, 176%, 0)',
     },
   },
   // bubble
   _before: {
-    backgroundColor: 'var(--cerberus-colors-neutral-surface-100)',
-    color: 'var(--cerberus-colors-neutral-text-initial)',
+    backgroundColor: 'var(--cerberus-colors-neutral-surface-inverse)',
+    color: 'var(--cerberus-colors-neutral-text-inverse)',
     content: 'attr(aria-label)',
     fontWeight: 400,
     maxH: '6rem',

diff --git a/packages/panda-preset/src/recipes/shared/palettes.ts b/packages/panda-preset/src/recipes/shared/palettes.ts
@@ -37,3 +37,11 @@ export const allPalettes = {
   warning,
   danger,
 }
+
+export const nonActionPalettes = {
+  neutral,
+  info,
+  success,
+  warning,
+  danger,
+}
diff --git a/packages/panda-preset/src/recipes/shared/tag.base.ts b/packages/panda-preset/src/recipes/shared/tag.base.ts
@@ -1,4 +1,4 @@
-import { allPalettes } from './palettes'
+import { nonActionPalettes } from './palettes'
 
 export const tagBase = {
   alignItems: 'center',
@@ -12,7 +12,7 @@ export const tagBase = {
 }
 
 export const filledUsage = {
-  bgColor: 'colorPalette.bg.initial',
+  bgColor: 'colorPalette.surface.200',
 }
 
-export const tagPalettes = allPalettes
+export const tagPalettes = nonActionPalettes
diff --git a/packages/panda-preset/src/recipes/tag.ts b/packages/panda-preset/src/recipes/tag.ts
@@ -50,7 +50,7 @@ export const tag: RecipeConfig<RecipeVariantRecord> = defineRecipe({
   },
 
   defaultVariants: {
-    palette: 'action',
+    palette: 'neutral',
     usage: 'filled',
     shape: 'pill',
   },