- This is our color palette. The ample variety in each color allows us to
- create smooth visuals.
+const ColorsLayout = ({ color }: { color: string }) => (
+ <>
+ {[25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((shade) => {
+ const bgColor = `bg-${color}-${shade}`
+ const textColor = `text-${color}-${shade}`
+
+ // For making the text visible over differect lightnesses.
+ const buttonClasses =
+ shade > 500
+ ? `text-white border-white/10`
+ : 'text-black border-black/10'
+
+ return (
+
+ )
+ })}
+
+)
+const BaseLayout = () => (
+ <>
+ {['black', 'white'].map((shade) => {
+ const bgColor = `bg-${shade}`
+ const textColor = `text-${shade}`
+
+ // For making the text visible over differect lightnesses.
+ const buttonClasses = `${
+ shade === 'black'
+ ? 'text-white border-white/10'
+ : 'text-black border-black/10'
+ }`
+
+ return (
+
+ )
+ })}
+
+)
+
+const ColorBoxLayout = ({
+ children,
+ heading,
+}: {
+ children: Children
+ heading: string
+}) => (
+
+)
+
+const Notification = () => {
+ const { selected } = useContext(ColorContext)
+ return selected ? (
+
+ The colors are designed to range from almost white to almost black. This
+ ample variety in each color allows us to create smooth visuals.
-
+
Hover over the colors and click on T{' '}
or bg to copy the corresponding
classes.
-
-
-
-
-
-
-
-
+
)
+const Colors = () => {
+ const [selected, setSelected] = useCopyToClipboard()
+ const value = useMemo(
+ () => ({
+ selected,
+ setSelected,
+ }),
+ [selected, setSelected]
+ )
+
+ return (
+
+
+
+
+
+
+
+ {['primary', 'gray', 'red', 'green', 'yellow'].map((color) => (
+
+
+
+ ))}
+
+
+
+
+ )
+}
+
+// For purgecss.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const colors = [
+ {
+ primary: [
+ 'bg-primary-25',
+ 'bg-primary-50',
+ 'bg-primary-100',
+ 'bg-primary-200',
+ 'bg-primary-300',
+ 'bg-primary-400',
+ 'bg-primary-500',
+ 'bg-primary-600',
+ 'bg-primary-700',
+ 'bg-primary-800',
+ 'bg-primary-900',
+ ],
+ gray: [
+ 'bg-gray-25',
+ 'bg-gray-50',
+ 'bg-gray-100',
+ 'bg-gray-200',
+ 'bg-gray-300',
+ 'bg-gray-400',
+ 'bg-gray-500',
+ 'bg-gray-600',
+ 'bg-gray-700',
+ 'bg-gray-800',
+ 'bg-gray-900',
+ ],
+ red: [
+ 'bg-red-25',
+ 'bg-red-50',
+ 'bg-red-100',
+ 'bg-red-200',
+ 'bg-red-300',
+ 'bg-red-400',
+ 'bg-red-500',
+ 'bg-red-600',
+ 'bg-red-700',
+ 'bg-red-800',
+ 'bg-red-900',
+ ],
+ green: [
+ 'bg-green-25',
+ 'bg-green-50',
+ 'bg-green-100',
+ 'bg-green-200',
+ 'bg-green-300',
+ 'bg-green-400',
+ 'bg-green-500',
+ 'bg-green-600',
+ 'bg-green-700',
+ 'bg-green-800',
+ 'bg-green-900',
+ ],
+ yellow: [
+ 'bg-yellow-25',
+ 'bg-yellow-50',
+ 'bg-yellow-100',
+ 'bg-yellow-200',
+ 'bg-yellow-300',
+ 'bg-yellow-400',
+ 'bg-yellow-500',
+ 'bg-yellow-600',
+ 'bg-yellow-700',
+ 'bg-yellow-800',
+ 'bg-yellow-900',
+ ],
+ },
+]
+
export default Colors
diff --git a/src/components/_foundations/FlexboxGrid/FlexboxGrid.stories.tsx b/src/components/_foundations/FlexboxGrid/FlexboxGrid.stories.tsx
index 339978b..ddf6d41 100644
--- a/src/components/_foundations/FlexboxGrid/FlexboxGrid.stories.tsx
+++ b/src/components/_foundations/FlexboxGrid/FlexboxGrid.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
import FlexboxGrid from './FlexboxGrid'
export default {
- title: '_foundations/5. FlexboxGrid',
+ title: '_foundations/FlexboxGrid',
component: FlexboxGrid,
} as ComponentMeta
diff --git a/src/components/_foundations/Shadows/Shadows.stories.tsx b/src/components/_foundations/Shadows/Shadows.stories.tsx
index 3e8adca..bf5e5fa 100644
--- a/src/components/_foundations/Shadows/Shadows.stories.tsx
+++ b/src/components/_foundations/Shadows/Shadows.stories.tsx
@@ -3,12 +3,114 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
import Shadows from './Shadows'
export default {
- title: '_foundations/4. Shadows',
+ title: '_foundations/Shadows',
component: Shadows,
} as ComponentMeta
-const Template: ComponentStory = () =>
+const Layout = ({
+ children,
+ heading,
+ description,
+}: {
+ children: React.ReactNode
+ heading: string
+ description?: string
+}) => (
+
+
+
+
{heading}
+
{description}
+
{children}
+
+
+
+ {shadow}
+
+ ))}
+
+)
+const ColoredTemplate: ComponentStory = () => (
+
+
+ {[
+ ' shadow-black/20',
+ ' shadow-primary-500/20',
+ ' shadow-gray-500/20',
+ ' shadow-red-500/20',
+ ' shadow-green-500/20',
+ ' shadow-yellow-500/20',
+ ].map((shadow) => (
+
+ {shadow}
+
+ ))}
+
+
+ {[
+ 'border border-black shadow-black/20',
+ 'border border-primary-500 shadow-primary-500/20',
+ 'border border-gray-500 shadow-gray-500/20',
+ 'border border-red-500 shadow-red-500/20',
+ 'border border-green-500 shadow-green-500/20',
+ 'border border-yellow-500 shadow-yellow-500/20',
+ ].map((shadow) => (
+
+ {shadow}
+
+ ))}
+
+
+ {[
+ 'shadow-black',
+ 'shadow-primary-500',
+ 'shadow-gray-500',
+ 'shadow-red-500',
+ 'shadow-green-500',
+ 'shadow-yellow-500',
+ ].map((shadow) => (
+
+ {shadow}
+
+ ))}
+
+
-
-
-
Shadows
-
- shadow-none
-
-
-
- {[
- { title: 'shadow-inner', bgColor: 'bg-gray-900' },
- { title: 'shadow-sm', bgColor: 'bg-gray-700' },
- { title: 'shadow-md', bgColor: 'bg-gray-600' },
- { title: 'shadow-lg', bgColor: 'bg-gray-500' },
- { title: 'shadow-xl', bgColor: 'bg-gray-400' },
- { title: 'shadow-2xl', bgColor: 'bg-gray-300' },
- ].map(({ title, bgColor }) => (
-
- {title}
-
- ))}
-
-
-
-
{size.split('-')[1]}
-
+
{text}