@channel.io/bezier-react 3.6.4 → 3.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.4.1",
+    "@channel.io/bezier-tokens": "0.5.0",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.2.2",

package/src/stories/color.mdx

@@ -0,0 +1,259 @@
+import { Meta } from '@storybook/blocks'
+import { tokens } from '@channel.io/bezier-tokens/beta'
+import { useState } from 'react'
+
+import globalColor from '../../../bezier-tokens/src/beta/global/color.json'
+import lightThemeColor from '../../../bezier-tokens/src/beta/semantic/light-theme/color.json'
+import darkThemeColor from '../../../bezier-tokens/src/beta/semantic/dark-theme/color.json'
+
+import {
+  LightThemeProvider,
+  DarkThemeProvider,
+} from '~/src/components/ThemeProvider'
+import { HStack, VStack } from '~/src/components/Stack'
+
+<Meta title="foundation/Color" />
+
+export const formatTitle = (title) =>
+  title
+    .split('-')
+    .map((word) => (word ? word[0].toUpperCase() + word.slice(1) : word))
+    .join(' ')
+
+export const isTokenLeaf = (value) =>
+  Boolean(value && typeof value.value === 'string')
+
+export const normalizeTokenName = (name) =>
+  name.endsWith('-normal') ? name.slice(0, -'-normal'.length) : name
+
+export const getTokenName = (path) =>
+  normalizeTokenName(`color-${path.join('-')}`)
+
+export const sortNumericLeafEntries = (entries) => {
+  const allNumericKeys = entries.every(([key]) => /^\d+$/.test(key))
+
+  if (!allNumericKeys) {
+    return entries
+  }
+
+  return [...entries].sort((a, b) => Number(a[0]) - Number(b[0]))
+}
+
+export const ColorSwatch = ({ name, value, reference }) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const cssVar = `--${name}`
+  const color = isHovered
+    ? `var(${cssVar}-hovered, var(${cssVar}))`
+    : `var(${cssVar})`
+  const displayValue = reference || value
+  const isReferenced = Boolean(reference)
+
+  return (
+    <VStack spacing={6} style={{ width: 160 }}>
+      <div
+        style={{
+          width: '100%',
+          height: 24,
+          borderRadius: 6,
+          backgroundColor: color,
+          border: '1px solid var(--color-border-neutral, #e5e5e5)',
+        }}
+        onMouseEnter={() => {
+          setIsHovered(true)
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false)
+        }}
+      />
+      <div style={{ fontSize: 11, color: 'var(--color-text-neutral, #1a1a1a)' }}>
+        {name}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          fontSize: 10,
+          color: 'var(--color-text-neutral-light, #666)',
+        }}
+      >
+        {isReferenced ? 'var' : ''}
+        <span
+          style={{
+            display: 'inline-flex',
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            padding: '1px 2px',
+            backgroundColor: 'var(--color-fill-neutral-light, #f2f2f2)',
+            borderRadius: 3,
+            border: '1px solid var(--color-border-neutral, #e5e5e5)',
+          }}
+        >
+          {displayValue}
+        </span>
+      </div>
+    </VStack>
+  )
+}
+
+export const TokenGroup = ({
+  title,
+  data,
+  path,
+  source,
+  depth,
+  columns,
+}) => {
+  const entries = Object.entries(data)
+  const leafEntries = sortNumericLeafEntries(
+    entries.filter(([, value]) => isTokenLeaf(value))
+  )
+  const groupEntries = entries.filter(([, value]) => !isTokenLeaf(value))
+  const headingSize = depth === 0 ? 20 : depth === 1 ? 16 : 14
+
+  return (
+    <VStack spacing={10} style={{ marginTop: depth === 0 ? 8 : 16 }}>
+      <div
+        style={{
+          fontSize: headingSize,
+          fontWeight: 600,
+          color: 'var(--color-text-neutral, #1a1a1a)',
+        }}
+      >
+        {formatTitle(title)}
+      </div>
+      {leafEntries.length > 0 && (
+        <div
+          style={
+            columns
+              ? {
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                  gap: 12,
+                }
+              : { display: 'flex', flexWrap: 'wrap', gap: 12 }
+          }
+        >
+          {leafEntries.map(([key, value]) => {
+            const tokenName = getTokenName([...path, key])
+            const token =
+              source[tokenName] ||
+              source[`${tokenName}-normal`] ||
+              {}
+
+            return (
+              <ColorSwatch
+                key={tokenName}
+                name={tokenName}
+                value={token.value || value.value}
+                reference={token.ref}
+              />
+            )
+          })}
+        </div>
+      )}
+      {groupEntries.map(([key, value]) => (
+        <TokenGroup
+          key={key}
+          title={key}
+          data={value}
+          path={[...path, key]}
+          source={source}
+          depth={depth + 1}
+          columns={columns}
+        />
+      ))}
+    </VStack>
+  )
+}
+
+export const GlobalSection = () => (
+  <VStack spacing={16}>
+    <div style={{ fontSize: 24, fontWeight: 700 }}>Global</div>
+    {Object.entries(globalColor.color).map(([key, value]) => (
+      <TokenGroup
+        key={key}
+        title={key}
+        data={value}
+        path={[key]}
+        source={tokens.global.color}
+        depth={0}
+        columns={6}
+      />
+    ))}
+  </VStack>
+)
+
+export const SemanticSection = ({
+  title,
+  colorData,
+  source,
+  titleColor,
+  columns,
+}) => (
+  <VStack spacing={16} style={{ flex: 1 }}>
+    <div
+      style={{
+        fontSize: 24,
+        fontWeight: 700,
+        color: titleColor || 'var(--color-text-neutral, #1a1a1a)',
+      }}
+    >
+      {title}
+    </div>
+    {Object.entries(colorData.color).map(([key, value]) => (
+      <TokenGroup
+        key={key}
+        title={key}
+        data={value}
+        path={[key]}
+        source={source}
+        depth={0}
+        columns={columns}
+      />
+    ))}
+  </VStack>
+)
+
+export const Primary = () => (
+  <VStack spacing={32}>
+    <GlobalSection />
+
+    <HStack spacing={40} align="flex-start">
+      <LightThemeProvider>
+        <div style={{ flex: 1, padding: 16 }}>
+          <SemanticSection
+            title="Light"
+            colorData={lightThemeColor}
+            source={tokens.lightTheme.color}
+            columns={1}
+          />
+        </div>
+      </LightThemeProvider>
+
+      <DarkThemeProvider>
+        <div
+          style={{
+            flex: 1,
+            padding: 16,
+            backgroundColor: 'var(--color-surface, #1d1d20)',
+            borderRadius: 12,
+          }}
+        >
+          <SemanticSection
+            title="Dark"
+            titleColor="var(--color-text-neutral, #ffffcc)"
+            colorData={darkThemeColor}
+            source={tokens.darkTheme.color}
+            columns={1}
+          />
+        </div>
+      </DarkThemeProvider>
+    </HStack>
+  </VStack>
+)
+
+# Color
+
+<Primary />
+