@byline/ui 0.9.3 → 0.10.1

package/src/icons/edit-icon.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EditIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('edit-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+        <path d="M16 5l3 3" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EditIcon.displayName = 'EditIcon'

package/src/icons/ellipsis-icon.tsx

@@ -0,0 +1,36 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EllipsisIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('ellipsis-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+      >
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="19" cy="12" r="1" />
+        <circle cx="5" cy="12" r="1" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EllipsisIcon.displayName = 'EllipsisIcon'

package/src/icons/email-icon.tsx

@@ -0,0 +1,31 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EmailIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('email-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.5}
+      >
+        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
+        <path d="M3 7l9 6l9 -6"></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+EmailIcon.displayName = 'UserIcon'

package/src/icons/external-link-icon.tsx

@@ -0,0 +1,37 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ExternalLinkIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('external-link-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth="0"
+      >
+        <path
+          d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon'

package/src/icons/eye-closed-icon.tsx

@@ -0,0 +1,39 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EyeClosedIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('eye-closed-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m15 18-.722-3.25" />
+        <path d="M2 8a10.645 10.645 0 0 0 20 0" />
+        <path d="m20 15-1.726-2.05" />
+        <path d="m4 15 1.726-2.05" />
+        <path d="m9 18 .722-3.25" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EyeClosedIcon.displayName = 'EyeClosedIcon'

package/src/icons/eye-open-icon.tsx

@@ -0,0 +1,31 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EyeOpenIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('eye-open-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EyeOpenIcon.displayName = 'EyeOpenIcon'

package/src/icons/github-icon.tsx

@@ -0,0 +1,28 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const GithubIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('github-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className={applied}
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.75}
+      >
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GithubIcon.displayName = 'GithubIcon'

package/src/icons/globe-icon.tsx

@@ -0,0 +1,48 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const GlobeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], styles['stroke-none'], svgClassName)
+
+  return (
+    <IconElement className={cx('globe-icon flex items-center justify-center', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 15 15"
+      >
+        <path
+          d="M7.49996 1.80002C4.35194 1.80002 1.79996 4.352 1.79996 7.50002C1.79996 10.648 4.35194 13.2 7.49996 13.2C10.648 13.2 13.2 10.648 13.2 7.50002C13.2 4.352 10.648 1.80002 7.49996 1.80002ZM0.899963 7.50002C0.899963 3.85494 3.85488 0.900024 7.49996 0.900024C11.145 0.900024 14.1 3.85494 14.1 7.50002C14.1 11.1451 11.145 14.1 7.49996 14.1C3.85488 14.1 0.899963 11.1451 0.899963 7.50002Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M13.4999 7.89998H1.49994V7.09998H13.4999V7.89998Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M7.09991 13.5V1.5H7.89991V13.5H7.09991zM10.375 7.49998C10.375 5.32724 9.59364 3.17778 8.06183 1.75656L8.53793 1.24341C10.2396 2.82218 11.075 5.17273 11.075 7.49998 11.075 9.82724 10.2396 12.1778 8.53793 13.7566L8.06183 13.2434C9.59364 11.8222 10.375 9.67273 10.375 7.49998zM3.99969 7.5C3.99969 5.17611 4.80786 2.82678 6.45768 1.24719L6.94177 1.75281C5.4582 3.17323 4.69969 5.32389 4.69969 7.5 4.6997 9.67611 5.45822 11.8268 6.94179 13.2472L6.45769 13.7528C4.80788 12.1732 3.9997 9.8239 3.99969 7.5z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M7.49996 3.95801C9.66928 3.95801 11.8753 4.35915 13.3706 5.19448 13.5394 5.28875 13.5998 5.50197 13.5055 5.67073 13.4113 5.83948 13.198 5.89987 13.0293 5.8056 11.6794 5.05155 9.60799 4.65801 7.49996 4.65801 5.39192 4.65801 3.32052 5.05155 1.97064 5.8056 1.80188 5.89987 1.58866 5.83948 1.49439 5.67073 1.40013 5.50197 1.46051 5.28875 1.62927 5.19448 3.12466 4.35915 5.33063 3.95801 7.49996 3.95801zM7.49996 10.85C9.66928 10.85 11.8753 10.4488 13.3706 9.6135 13.5394 9.51924 13.5998 9.30601 13.5055 9.13726 13.4113 8.9685 13.198 8.90812 13.0293 9.00238 11.6794 9.75643 9.60799 10.15 7.49996 10.15 5.39192 10.15 3.32052 9.75643 1.97064 9.00239 1.80188 8.90812 1.58866 8.9685 1.49439 9.13726 1.40013 9.30601 1.46051 9.51924 1.62927 9.6135 3.12466 10.4488 5.33063 10.85 7.49996 10.85z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+GlobeIcon.displayName = 'GlobeIcon'

package/src/icons/google-icon.tsx

@@ -0,0 +1,43 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import type { IconProps } from './types/icon.js'
+
+export const GoogleIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = svgClassName
+
+  return (
+    <IconElement className={cx('google-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className={applied}
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.75}
+      >
+        <path
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+          fill="#4285F4"
+        />
+        <path
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+          fill="#34A853"
+        />
+        <path
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+          fill="#EA4335"
+        />
+        <path d="M1 1h22v22H1z" fill="none" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GoogleIcon.displayName = 'GoogleIcon'

package/src/icons/gripper-vertical-icon.tsx

@@ -0,0 +1,41 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const GripperVerticalIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('gripper-vertical-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GripperVerticalIcon.displayName = 'GripperVerticalIcon'

package/src/icons/history-icon.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const HistoryIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('history-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+        <path d="M3 3v5h5" />
+        <path d="M12 7v5l4 2" />
+      </svg>
+    </IconElement>
+  )
+}
+
+HistoryIcon.displayName = 'HistoryIcon'

package/src/icons/home-icon.tsx

@@ -0,0 +1,32 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const HomeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('home-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        viewBox="0 0 24 24"
+        strokeWidth={1.75}
+      >
+        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>{' '}
+        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>{' '}
+        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>{' '}
+      </svg>
+    </IconElement>
+  )
+}
+
+HomeIcon.displayName = 'HomeIcon'

package/src/icons/icon-element.tsx

@@ -0,0 +1,31 @@
+import type React from 'react'
+import type { ReactNode } from 'react'
+
+import cx from 'classnames'
+
+import styles from './icons.module.css'
+
+export interface IconElementProps extends React.ComponentProps<'div'> {
+  width?: string
+  height?: string
+  menuItem?: boolean
+  children: ReactNode
+  className?: string
+}
+
+export const IconElement = (props: IconElementProps): React.JSX.Element => {
+  const { className, children, width, height, menuItem = false, ...rest } = props
+  return (
+    <div
+      style={{
+        width,
+        height,
+        marginRight: menuItem != null && menuItem ? '1.2rem' : '0',
+      }}
+      className={cx(styles['element-root'], className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}

package/src/icons/icon-sprite.tsx

@@ -0,0 +1,18 @@
+import type React from 'react'
+
+// keep a list of the icon ids we put in the symbol
+const _icons = ['icon-1', 'icon-2']
+
+export interface IconSpriteProps {
+  id: string
+}
+
+// then define an Icon component that references the
+export function IconSprite({ id, ...props }: IconSpriteProps): React.JSX.Element {
+  return (
+    <svg {...props}>
+      <title>Sprites</title>
+      <use href={`/sprite.svg#${id}`} />
+    </svg>
+  )
+}

package/src/icons/icons.module.css

@@ -0,0 +1,165 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .element-root {
+    width: 1.375rem;
+    height: 1.375rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .element-root svg {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .stroke-none {
+    stroke: none;
+  }
+
+  .stroke-current {
+    stroke: currentColor;
+  }
+
+  .stroke-gray {
+    stroke: var(--gray-800);
+  }
+
+  .stroke-contrast {
+    stroke: var(--gray-950);
+  }
+
+  .stroke-primary {
+    stroke: var(--primary-500);
+  }
+
+  .stroke-secondary {
+    stroke: var(--secondary-500);
+  }
+
+  .stroke-success {
+    stroke: var(--green-500);
+  }
+
+  .stroke-info {
+    stroke: var(--blue-500);
+  }
+
+  .stroke-warning {
+    stroke: var(--yellow-500);
+  }
+
+  .stroke-danger {
+    stroke: var(--red-500);
+  }
+
+  .fill-none {
+    fill: none;
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .fill-contrast {
+    fill: black;
+  }
+
+  .fill-gray {
+    stroke: var(--gray-700);
+  }
+
+  .fill-primary {
+    fill: var(--primary-500);
+  }
+
+  .fill-secondary {
+    fill: var(--secondary-500);
+  }
+
+  .fill-success {
+    fill: var(--green-500);
+  }
+
+  .fill-info {
+    fill: var(--blue-500);
+  }
+
+  .fill-warning {
+    fill: var(--yellow-500);
+  }
+
+  .fill-danger {
+    fill: var(--red-500);
+  }
+
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .stroke-gray {
+      stroke: var(--gray-300);
+    }
+
+    .stroke-contrast {
+      stroke: var(--gray-100);
+    }
+
+    .stroke-primary {
+      stroke: var(--primary-400);
+    }
+
+    .stroke-secondary {
+      stroke: var(--secondary-400);
+    }
+
+    .stroke-success {
+      stroke: var(--green-400);
+    }
+
+    .stroke-info {
+      stroke: var(--blue-400);
+    }
+
+    .stroke-warning {
+      stroke: var(--yellow-400);
+    }
+
+    .stroke-danger {
+      stroke: var(--red-400);
+    }
+
+    .fill-contrast {
+      fill: white;
+    }
+
+    .fill-gray {
+      stroke: var(--gray-300);
+    }
+
+    .fill-primary {
+      fill: var(--primary-400);
+    }
+
+    .fill-secondary {
+      fill: var(--secondary-400);
+    }
+
+    .fill-success {
+      fill: var(--green-400);
+    }
+
+    .fill-info {
+      fill: var(--blue-400);
+    }
+
+    .fill-warning {
+      fill: var(--yellow-400);
+    }
+
+    .fill-danger {
+      fill: var(--red-400);
+    }
+  }
+}