@pandacss/studio 0.0.0-dev-20230613163214

package/src/components/color-constrast.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react'
+import { HStack, Stack, VStack, panda } from '../../styled-system/jsx'
+import { getContrastPairs, getContrastRatio } from '../lib/color'
+import context from '../lib/panda.context'
+import { ErrorIcon, SuccessIcon } from './icons'
+import { TokenContent } from './token-content'
+import { TokenGroup } from './token-group'
+
+function TestScore(props: { score: { WCAG_AA: boolean; WCAG_AAA: boolean }; size: 'regular' | 'large' }) {
+  const { score, size } = props
+  return (
+    <>
+      <HStack justify="space-between" fontWeight="medium">
+        <HStack gap="2">
+          <span>{score.WCAG_AA ? <SuccessIcon /> : <ErrorIcon />}</span>
+          <span>AA</span>
+        </HStack>
+        <span>{size === 'regular' ? '4.5:1' : '3:1'}</span>
+      </HStack>
+      <HStack justify="space-between" fontWeight="medium">
+        <HStack gap="2">
+          <span>{score.WCAG_AAA ? <SuccessIcon /> : <ErrorIcon />}</span>
+          <span>AAA</span>
+        </HStack>
+        <span>{size === 'regular' ? '7:1' : '4.5:1'}</span>
+      </HStack>
+    </>
+  )
+}
+
+export function ColorContrastChecker() {
+  const colorsMap = context.getCategory('colors')
+  const values = Array.from(colorsMap.values())
+
+  const colors = values
+    .filter((color) => !color.isConditional && !color.extensions.isVirtual)
+    .map((color) => ({
+      label: color.extensions.prop,
+      value: color.value,
+    }))
+
+  const [foreground, setForeGround] = useState('#000000')
+  const [background, setBackground] = useState('#ffffff')
+
+  const activeForeground = (colors.find((col) => col.label === foreground)?.value || foreground) as string
+  const activeBackground = (colors.find((col) => col.label === background)?.value || background) as string
+
+  const wcag = getContrastPairs(activeForeground, activeBackground)
+  const constrastRatio = getContrastRatio(activeForeground, activeBackground)
+
+  return (
+    <TokenGroup>
+      <TokenContent>
+        <HStack gap="3" p="2">
+          <panda.div
+            display="flex"
+            flexDirection="column"
+            borderWidth="1px"
+            borderColor="card"
+            flex="1"
+            pt="16"
+            style={{ background: activeForeground }}
+          >
+            <select value={foreground} onChange={(e: any) => setForeGround(e.currentTarget.value)}>
+              {colors.map((color) => (
+                <option key={color.label} value={color.label}>
+                  {color.label}
+                </option>
+              ))}
+            </select>
+          </panda.div>
+          <panda.div
+            display="flex"
+            flexDirection="column"
+            borderWidth="1px"
+            borderColor="card"
+            flex="1"
+            pt="16"
+            style={{ background: activeBackground }}
+          >
+            <select value={background} onChange={(e: any) => setBackground(e.currentTarget.value)}>
+              {colors.map((color) => (
+                <option key={color.label} value={color.label}>
+                  {color.label}
+                </option>
+              ))}
+            </select>
+          </panda.div>
+        </HStack>
+
+        <HStack
+          justify="center"
+          fontWeight="semibold"
+          fontSize="2xl"
+          p="2"
+          outline="none"
+          borderWidth="1px"
+          borderColor="card"
+          suppressContentEditableWarning
+          contentEditable
+          style={{ background: activeBackground, color: activeForeground }}
+        >
+          example text showing contrast
+        </HStack>
+
+        <div>
+          <VStack textAlign="center" gap="2.5">
+            <panda.span fontWeight="bold" fontSize="4xl">
+              {constrastRatio ? `${constrastRatio?.toFixed(2).replace(/[.,]00$/, '')}:1` : ':'}
+            </panda.span>
+            <panda.span fontWeight="semibold" opacity="0.5">
+              Contrast ratio
+            </panda.span>
+          </VStack>
+          {wcag && (
+            <panda.div display="flex" gap="5" marginTop="10">
+              <Stack flex="1" gap="4">
+                <panda.span fontWeight="semibold">Normal Text</panda.span>
+                <TestScore score={wcag[0]} size="regular" />
+              </Stack>
+              <Stack flex="1" gap="4">
+                <panda.span fontWeight="semibold">Large Text</panda.span>
+                <TestScore score={wcag[1]} size="large" />
+              </Stack>
+            </panda.div>
+          )}
+        </div>
+      </TokenContent>
+    </TokenGroup>
+  )
+}

package/src/components/color-item.tsx

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react'
+import { panda } from '../../styled-system/jsx'
+import type { JsxStyleProps } from '../../styled-system/types'
+import { tokenDictionary } from '../lib/analysis-data'
+import { getReportItemFromTokenName, getUtilityLink } from '../lib/get-report-item'
+import { ColorWrapper } from './color-wrapper'
+
+export const ColorItem = ({
+  tokenName,
+  children,
+  ...props
+}: PropsWithChildren<{ tokenName: string } & JsxStyleProps>) => {
+  const token = tokenDictionary.getByName('colors.' + tokenName)
+  const value = token?.value ?? tokenName
+  const reportItem = getReportItemFromTokenName(tokenName)
+
+  if (!reportItem) return null
+
+  return (
+    <panda.a href={getUtilityLink({ value: reportItem.value })} key={tokenName} {...props}>
+      <ColorWrapper
+        w="auto"
+        minW="80px"
+        h="40px"
+        mb="2"
+        style={{ background: value, border: '1px solid rgba(0,0,0,0.1)' }}
+      />
+      {children}
+
+      {tokenName !== value && (
+        <panda.div opacity={0.1}>
+          <panda.span>{value}</panda.span>
+        </panda.div>
+      )}
+    </panda.a>
+  )
+}

package/src/components/color-wrapper.tsx

@@ -0,0 +1,25 @@
+import { type HTMLPandaProps, panda } from '../../styled-system/jsx'
+
+export function ColorWrapper(props: HTMLPandaProps<'div'>) {
+  return (
+    <panda.div
+      width="full"
+      height="10"
+      borderRadius="sm"
+      position="relative"
+      overflow="hidden"
+      shadow="inset"
+      _before={{
+        content: "''",
+        position: 'absolute',
+        borderRadius: 'sm',
+        width: '100%',
+        height: '100%',
+        backgroundSize: '24px',
+        zIndex: '-1',
+        backgroundImage: 'check',
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/colors.tsx

@@ -0,0 +1,96 @@
+import { Grid, HStack, Stack, panda } from '../../styled-system/jsx'
+import { ColorWrapper } from '../components/color-wrapper'
+import { TokenContent } from '../components/token-content'
+import { TokenGroup } from '../components/token-group'
+import { useColorDocs } from '../lib/use-color-docs'
+import { Input } from './input'
+import { SemanticColorDisplay } from './semantic-color'
+
+const UNCATEGORIZED_ID = 'uncategorized' as const
+
+export function Colors() {
+  const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } =
+    useColorDocs()
+
+  const renderSemanticTokens = () => {
+    return semanticTokens.map(([name, colors], i) => {
+      return (
+        <Stack gap="1" key={i} width="full">
+          <HStack gap="1">
+            <SemanticColorDisplay
+              value={colors[colors.extensions.condition].value}
+              condition={colors.extensions.condition}
+            />
+            <SemanticColorDisplay value={colors.base.value} condition="base" />
+          </HStack>
+
+          <panda.span fontWeight="medium">{name}</panda.span>
+        </Stack>
+      )
+    })
+  }
+  const renderColors = (values: any[]) => {
+    return values?.map((color, i) => {
+      return (
+        <Stack gap="1" key={i}>
+          <ColorWrapper style={{ background: color.value }} />
+          <Stack mt="2" gap="0.5">
+            <panda.div fontWeight="medium">{color.extensions.prop}</panda.div>
+            <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
+              {color.value}
+            </panda.div>
+          </Stack>
+        </Stack>
+      )
+    })
+  }
+
+  return (
+    <TokenGroup>
+      <panda.div mb="3.5" position="sticky" top="0" zIndex="1">
+        <Input
+          value={filterQuery}
+          onChange={(e) => setFilterQuery(e.target.value)}
+          placeholder="Filter tokens by text, property or value"
+        />
+      </panda.div>
+      <TokenContent>
+        <Stack gap="10">
+          {!!categorizedColors.length &&
+            categorizedColors.map(([category, colors]) => (
+              <div key={category}>
+                <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
+                  {category}
+                </panda.span>
+
+                <Grid gap="4" minChildWidth="13rem" my="5" mx="0" key={category}>
+                  {renderColors(colors)}
+                </Grid>
+              </div>
+            ))}
+          {!!uncategorizedColors?.length && (
+            <div>
+              <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
+                {UNCATEGORIZED_ID}
+              </panda.span>
+              <Grid gap="4" minChildWidth="13rem" my="5" mx="0">
+                {renderColors(uncategorizedColors)}
+              </Grid>
+            </div>
+          )}
+          {!!semanticTokens.length && (
+            <div>
+              <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
+                Semantic tokens
+              </panda.span>
+              <Grid gap="4" minChildWidth="13rem" my="5" mx="0">
+                {renderSemanticTokens()}
+              </Grid>
+            </div>
+          )}
+          {!hasResults && <div>No result found! 🐼</div>}
+        </Stack>
+      </TokenContent>
+    </TokenGroup>
+  )
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,19 @@
+import { panda, Stack } from '../../styled-system/jsx'
+
+type EmptyStateProps = {
+  title: string
+  children: React.ReactNode
+  icon: React.ReactElement
+}
+
+export function EmptyState({ title, children, icon }: EmptyStateProps) {
+  return (
+    <Stack align="center" gap="5" justify="center" height="full" minHeight="40vh">
+      <panda.span fontSize="5xl">{icon}</panda.span>
+      <Stack opacity="0.8" align="center">
+        <panda.span fontWeight="semibold">{title}</panda.span>
+        <p>{children}</p>
+      </Stack>
+    </Stack>
+  )
+}

package/src/components/font-family.tsx

@@ -0,0 +1,55 @@
+import { Flex, HStack, Square, Stack, panda } from '../../styled-system/jsx'
+import context from '../lib/panda.context'
+
+const fonts = context.getCategory('fonts')
+
+const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
+const symbols = Array.from({ length: 10 }, (_, i) => String.fromCharCode(48 + i))
+const specials = ['@', '#', '$', '%', '&', '!', '?', '+', '-']
+
+export const FontFamily = () => {
+  const values = Array.from(fonts.values())
+  return (
+    <Stack gap="10">
+      {values.map((font) => (
+        <Stack key={font.name} gap="8">
+          <HStack gap="10" style={{ fontFamily: font.value }}>
+            <panda.p fontSize="100px" fontWeight="bold" lineHeight="1">
+              Ag
+            </panda.p>
+
+            <Flex wrap="wrap" fontSize="24px" mt="8">
+              {letters.map((letter) => (
+                <Square textTransform="uppercase" size="8" key={letter}>
+                  {letter}
+                </Square>
+              ))}
+              {letters.map((letter) => (
+                <Square textTransform="lowercase" size="8" key={letter}>
+                  {letter}
+                </Square>
+              ))}
+              {symbols.map((sym) => (
+                <Square textTransform="lowercase" size="8" key={sym}>
+                  {sym}
+                </Square>
+              ))}
+              {specials.map((sym) => (
+                <Square textTransform="lowercase" size="8" key={sym}>
+                  {sym}
+                </Square>
+              ))}
+            </Flex>
+          </HStack>
+
+          <Stack>
+            <panda.span fontWeight="semibold">{font.extensions.prop}</panda.span>
+            <panda.span fontFamily={font.value} opacity="0.7">
+              {font.value}
+            </panda.span>
+          </Stack>
+        </Stack>
+      ))}
+    </Stack>
+  )
+}

package/src/components/font-tokens.tsx

@@ -0,0 +1,69 @@
+import { Fragment, useState } from 'react'
+import { HStack, panda, Stack } from '../../styled-system/jsx'
+import { TokenContent } from '../components/token-content'
+import { TokenGroup } from '../components/token-group'
+import { Input, Textarea } from './input'
+
+type FontTokensProps = {
+  text?: string
+  largeText?: boolean
+  token: string
+  fontTokens: Map<string, any>
+  css?: any
+}
+
+export function FontTokens(props: FontTokensProps) {
+  const { text: textProp = 'Hello World', largeText = false, token, fontTokens } = props
+  const [text, setText] = useState(textProp)
+
+  const values = Array.from(fontTokens.values())
+
+  return (
+    <TokenGroup>
+      <panda.div mb="3.5" position="sticky" top="0" zIndex={1}>
+        {largeText ? (
+          <Textarea
+            resize="vertical"
+            onChange={(event) => {
+              setText(event.currentTarget.value)
+            }}
+            rows={5}
+            value={text}
+            placeholder="Preview Text"
+          />
+        ) : (
+          <Input
+            value={text}
+            onChange={(event) => {
+              setText(event.currentTarget.value)
+            }}
+            placeholder="Preview Text"
+          />
+        )}
+      </panda.div>
+
+      <TokenContent>
+        {values.map((fontToken) => (
+          <Fragment key={fontToken.extensions.prop}>
+            <Stack gap="3.5">
+              <HStack gap="1">
+                <panda.span fontWeight="medium">{fontToken.extensions.prop}</panda.span>
+                <panda.span opacity="0.4">({fontToken.value})</panda.span>
+              </HStack>
+              <panda.span
+                fontSize="4xl"
+                lineHeight="normal"
+                className="render"
+                style={{
+                  [token]: fontToken.value,
+                }}
+              >
+                {text}
+              </panda.span>
+            </Stack>
+          </Fragment>
+        ))}
+      </TokenContent>
+    </TokenGroup>
+  )
+}

package/src/components/head.astro

@@ -0,0 +1,35 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="theme-color" content="hsl(256, 44%, 15%)" media="(prefers-color-scheme: dark)" />
+<meta name="theme-color" content="hsl(273, 37%, 93%)" media="(prefers-color-scheme: light)" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<script is:inline>
+const root = document.documentElement
+const storageKey = 'panda:studio:theme'
+
+const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem(storageKey)) {
+        return localStorage.getItem(storageKey)
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark'
+    }
+    return 'light'
+})()
+
+const isDark = theme === 'dark'
+root.classList[isDark ? 'add' : 'remove']('dark')
+root.classList[isDark ? 'remove' : 'add']('light')
+
+if (typeof localStorage !== 'undefined') {
+    // Watch the document element and persist user preference when it changes.
+    const observer = new MutationObserver(() => {
+        const isDark = root.classList.contains('dark')
+        localStorage.setItem(storageKey, isDark ? 'dark' : 'light')
+    })
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
+}
+</script>

package/src/components/icons.tsx

@@ -0,0 +1,207 @@
+export function ErrorIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="red">
+      <rect width="13.9361" height="2.9863" transform="matrix(0.704896 0.709311 -0.704896 0.709311 4.10498 2)"></rect>
+      <rect width="2.9863" height="13.9361" transform="matrix(0.704896 0.709311 -0.704896 0.709311 11.8938 2)"></rect>
+    </svg>
+  )
+}
+
+export function SuccessIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="green" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        width="7.4659"
+        height="3.26633"
+        transform="matrix(0.69978 0.714359 -0.69978 0.714359 2.28577 6.99997)"
+      ></rect>
+      <rect width="3.26633" height="14.9318" transform="matrix(0.69978 0.714359 -0.69978 0.714359 13.7142 2)"></rect>
+    </svg>
+  )
+}
+
+export function ColorIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14 16C14 17.77 13.23 19.37 12 20.46C10.9053 21.4541 9.47871 22.0033 8 22C4.69 22 2 19.31 2 16C2 13.24 3.88 10.9 6.42 10.21C6.76425 11.0756 7.30469 11.8494 7.9988 12.4706C8.6929 13.0918 9.52171 13.5435 10.42 13.79C10.92 13.93 11.45 14 12 14C12.55 14 13.08 13.93 13.58 13.79C13.85 14.47 14 15.22 14 16Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18 8C18.0016 9.3166 17.5695 10.5971 16.7706 11.6436C15.9717 12.6901 14.8504 13.4444 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C9.14956 13.4444 8.02827 12.6901 7.22937 11.6436C6.43047 10.5971 5.99843 9.3166 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 16C22 19.31 19.31 22 16 22C14.5213 22.0033 13.0947 21.4541 12 20.46C13.23 19.37 14 17.77 14 16C14 15.22 13.85 14.47 13.58 13.79C15.41 13.29 16.89 11.95 17.58 10.21C20.12 10.9 22 13.24 22 16Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function TextStylesIcon() {
+  return (
+    <svg width="48" height="1em" viewBox="0 0 48 30">
+      <path
+        d="M0 29.16H4.56L6.96 22.36H19.88L22.28 29.16H26.84L16.48 0H10.36L0 29.16ZM8 18.96L11.28 9.96L13.32 4H13.56L15.6 9.96L18.8 18.96H8Z"
+        fill="currentColor"
+      />
+      <path
+        d="M35.7959 29.52C39.3559 29.52 41.9959 27.68 42.9959 24.96H43.2359V29.16H47.3559V8H43.3959L43.2359 12.16H42.9959C41.9959 9.44 39.3559 7.64 35.7959 7.64C30.6359 7.64 27.1559 11.48 27.1559 18.56C27.1559 25.64 30.6359 29.52 35.7959 29.52ZM37.2359 26.12C33.7159 26.12 31.3959 23.52 31.3959 18.56C31.3959 13.56 33.7159 11 37.2359 11C41.1559 11 43.1959 14.12 43.1959 17.36V19.76C43.1959 23.04 41.1559 26.12 37.2359 26.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function LayerStylesIcon() {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24">
+      <title>paint-brush</title>
+      <g
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeWidth="2"
+        fill="none"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+      >
+        <polyline
+          points="15.021,18.879 22.092,11.808 19.971,9.686 17.142,9.686 17.142,6.858 12.192,1.908 5.121,8.979 "
+          strokeLinecap="butt"
+          stroke="currentColor"
+        />
+        <path d="M4.414,9.686 c-1.202,1.202-1.202,3.041,0,4.243l1.414,1.414l-4.172,4.172c-0.707,0.707-0.849,1.838-0.283,2.687 c0.778,1.061,2.192,1.061,3.041,0.212l4.243-4.243l1.414,1.414c1.202,1.202,3.041,1.202,4.243,0l0.707-0.707L5.121,8.979 L4.414,9.686z"></path>
+      </g>
+    </svg>
+  )
+}
+
+export function TypographyIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.67 7.17V5.35C2.67 4.2 3.6 3.28 4.74 3.28H19.26C20.41 3.28 21.33 4.21 21.33 5.35V7.17M12 20.72V4.11M8.06 20.72H15.94"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function SpacingIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3 22H21M3 2H21M12 6V18M14.83 7.72L12 4.89L9.17 7.72M14.83 15.89L12 18.72L9.17 15.89"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export function FontWeightIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.88 4.5C4.88 3.4 5.78 2.5 6.88 2.5H12C14.62 2.5 16.75 4.63 16.75 7.25C16.75 9.87 14.62 12 12 12H4.88V4.5ZM4.88 12H14.38C17 12 19.13 14.13 19.13 16.75C19.13 19.37 17 21.5 14.38 21.5H6.88C5.78 21.5 4.88 20.6 4.88 19.5V12V12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export function SizesIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.47 6H16.47M11.47 18H15.47M11.47 13.95L16.47 14M11.47 10H14.47M8.44 7H2.53M21.47 19V5C21.47 3 20.47 2 18.47 2H14.47C12.47 2 11.47 3 11.47 5V19C11.47 21 12.47 22 14.47 22H18.47C20.47 22 21.47 21 21.47 19ZM5.49 2C3.86 2 2.53 3.33 2.53 4.95V17.91C2.53 18.36 2.72 19.04 2.95 19.43L3.77 20.79C4.71 22.36 6.26 22.36 7.2 20.79L8.02 19.43C8.25 19.04 8.44 18.36 8.44 17.91V4.95C8.44 3.33 7.11 2 5.49 2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export function LetterSpacingIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 10.74V13.94M12 9V15.68M17 10.74V13.94M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export function FontSizesIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1.99001 5.93001V4.42001C1.99001 3.40001 2.82001 2.57001 3.84001 2.57001H16.76C17.78 2.57001 18.61 3.40001 18.61 4.42001V5.93001M10.3 18.1V3.32001M6.90001 18.1H12.48M13.68 10.34H20.69C21.42 10.34 22.01 10.93 22.01 11.66V12.46M16.08 21.43V10.87M13.94 21.43H18.22"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export function LineHeightIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 6.25V8.25M10 6.25V8.25M6 16V18M10 16V18M14 7.25H18M14 17H18M2 12H22M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export function ColorContrastIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 4.5V18C10 19.08 9.56 20.07 8.86 20.79L8.82 20.83C8.73 20.92 8.63 21.01 8.54 21.08C8.24 21.34 7.9 21.54 7.55 21.68C7.44 21.73 7.33 21.77 7.22 21.81C6.83 21.94 6.41 22 6 22C5.73 22 5.46 21.97 5.2 21.92C5.07 21.89 4.94 21.86 4.81 21.82C4.65 21.77 4.5 21.72 4.35 21.65C4.35 21.64 4.35 21.64 4.34 21.65C4.06 21.51 3.79 21.35 3.54 21.16L3.53 21.15C3.4 21.05 3.28 20.95 3.17 20.83C3.06 20.71 2.95 20.59 2.84 20.46C2.65 20.21 2.49 19.94 2.35 19.66C2.36 19.65 2.36 19.65 2.35 19.65C2.35 19.65 2.35 19.64 2.34 19.63C2.28 19.49 2.23 19.34 2.18 19.19C2.14199 19.0612 2.10863 18.9312 2.08 18.8C2.03 18.54 2 18.27 2 18V4.5C2 3 3 2 4.5 2H7.5C9 2 10 3 10 4.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 16.5V19.5C22 21 21 22 19.5 22H6C6.41 22 6.83 21.94 7.22 21.81C7.33 21.77 7.44 21.73 7.55 21.68C7.9 21.54 8.24 21.34 8.54 21.08C8.63 21.01 8.73 20.92 8.82 20.83L8.86 20.79L15.66 14H19.5C21 14 22 15 22 16.5V16.5ZM4.81 21.82C4.21 21.64 3.64 21.31 3.17 20.83C2.69 20.36 2.36 19.79 2.18 19.19C2.37413 19.8078 2.71464 20.3695 3.17254 20.8275C3.63045 21.2854 4.1922 21.6259 4.81 21.82V21.82Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.37 11.29L15.66 14L8.86 20.79C9.56 20.07 10 19.08 10 18V8.34001L12.71 5.63001C13.77 4.57001 15.19 4.57001 16.25 5.63001L18.37 7.75001C19.43 8.81001 19.43 10.23 18.37 11.29ZM6 19C6.26522 19 6.51957 18.8947 6.70711 18.7071C6.89464 18.5196 7 18.2652 7 18C7 17.7348 6.89464 17.4804 6.70711 17.2929C6.51957 17.1054 6.26522 17 6 17C5.73478 17 5.48043 17.1054 5.29289 17.2929C5.10536 17.4804 5 17.7348 5 18C5 18.2652 5.10536 18.5196 5.29289 18.7071C5.48043 18.8947 5.73478 19 6 19Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}