@infonomic/uikit 2.0.0 → 2.1.0

package/src/icons/wallet-icon.tsx

@@ -0,0 +1,29 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const WalletIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('wallet-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+      >
+        <path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z"></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+WalletIcon.displayName = 'WalletIcon'

package/src/icons/warning-icon.tsx

@@ -0,0 +1,18 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const WarningIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-warning'], svgClassName)
+
+  return (
+    <IconElement className={cx('warning-icon', className)} {...rest}>
+      <svg className={applied} focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path>
+      </svg>
+    </IconElement>
+  )
+}

package/src/icons/x-icon.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const XIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-gray'], svgClassName)
+
+  return (
+    <IconElement className={cx('x-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+      >
+        <path
+          d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+XIcon.displayName = 'XIcon'

package/src/loaders/ellipses.tsx

@@ -0,0 +1,36 @@
+// https://github.com/JoshK2/react-spinners-css
+import type React from 'react'
+
+import classNames from 'classnames'
+
+import type { LoaderProps } from './types/index.js'
+
+export function LoaderEllipsis({
+  color,
+  size = 80,
+  className,
+  style,
+  ...rest
+}: LoaderProps): React.JSX.Element {
+  const height = size * 0.5
+
+  const circles = [...Array(4)].map((_, index) => (
+    <div
+      // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+      key={index}
+      style={{
+        backgroundColor: color ? color : 'var(--loader-color)',
+      }}
+    />
+  ))
+
+  return (
+    <div
+      className={classNames('lds-ellipsis', className)}
+      style={{ ...style, width: size, height }}
+      {...rest}
+    >
+      {circles}
+    </div>
+  )
+}

package/src/loaders/loaders.stories.tsx

@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import { LoaderEllipsis } from './ellipses.js'
+import { LoaderRing } from './ring.js'
+import { LoaderSpinner } from './spinner.js'
+
+interface LoaderProps {
+  loader: React.JSX.Element
+  label: string
+}
+
+function Loader({ loader, label }: LoaderProps): React.JSX.Element {
+  return (
+    <div className="flex flex-col items-center">
+      {loader}
+      <span className="text-sm text-gray-500">{label}</span>
+    </div>
+  )
+}
+
+const LoaderDemo = (): React.JSX.Element => (
+  <div className="loader-demo grid grid-cols-4 gap-5">
+    <Loader loader={<LoaderRing size={48} />} label="Ring" />
+    <Loader loader={<LoaderEllipsis size={48} />} label="Ellipsis" />
+    <Loader loader={<LoaderSpinner />} label="Spinner" />
+  </div>
+)
+
+export default {
+  title: 'Loaders/All',
+  component: LoaderDemo,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <>
+      <div className="mb-6">
+        <div className="max-w-[700px]">
+          <LoaderDemo />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/loaders/ring.tsx

@@ -0,0 +1,33 @@
+// https://github.com/JoshK2/react-spinners-css
+import type React from 'react'
+
+import classNames from 'classnames'
+
+import type { LoaderProps } from './types/index.js'
+
+export function LoaderRing({ color, size = 60, className, style }: LoaderProps): React.JSX.Element {
+  const circles = [...Array(4)].map((_, index) => {
+    return (
+      <div
+        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+        key={index}
+        style={{
+          borderColor: `${color || 'var(--loader-color)'} transparent transparent transparent`,
+          width: size * 0.8,
+          height: size * 0.8,
+          margin: size * 0.1,
+          borderWidth: size * 0.1,
+        }}
+      />
+    )
+  })
+
+  return (
+    <div
+      className={classNames('lds-ring', className)}
+      style={{ width: size, height: size, ...style }}
+    >
+      {circles}
+    </div>
+  )
+}

package/src/loaders/spinner.tsx

@@ -0,0 +1,28 @@
+// https://github.com/JoshK2/react-spinners-css
+import type React from 'react'
+
+import classNames from 'classnames'
+
+import type { LoaderProps } from './types/index.js'
+
+type SpinnerProps = Omit<LoaderProps, 'size'>
+
+export function LoaderSpinner({ color, className, style }: SpinnerProps): React.JSX.Element {
+  const circles = [...Array(12)].map((_, index) => {
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+      <div key={index}>
+        <div
+          className={classNames('div-after')}
+          style={{ backgroundColor: color ? color : 'var(--loader-color)' }}
+        />
+      </div>
+    )
+  })
+
+  return (
+    <div className={classNames('lds-spinner', className)} style={{ ...style }}>
+      {circles}
+    </div>
+  )
+}

package/src/loaders/types/index.ts

@@ -0,0 +1,6 @@
+export type LoaderProps = {
+  /** hex color */
+  color?: string
+  /** size in pixel */
+  size?: number
+} & React.HTMLAttributes<HTMLDivElement>

package/src/react.ts

@@ -0,0 +1,99 @@
+/**
+ * NOTE: We put a .js ending on imports here to satisfy
+ * TS / dist output
+ */
+export * from './components/@types/shared.js'
+
+export * from './components/accordion/accordion.js'
+export * from './components/animation/fade-in-lift.js'
+export * from './components/avatar/avatar.js'
+export * from './components/button/button.js'
+export * from './components/button/button-group.js'
+export * from './components/button/control-buttons.js'
+export * from './components/button/copy-button.js'
+export * from './components/button/icon-button.js'
+export * from './components/calendar/calendar.js'
+export * from './components/card/card.js'
+export * from './components/container/container.js'
+export * from './components/dropdown/dropdown.js'
+export * from './components/hamburger/hamburger.js'
+export * from './components/input/checkbox.js'
+export * from './components/input/checkbox-group.js'
+export * from './components/input/error-text.js'
+export * from './components/input/errors.js'
+export * from './components/input/help-text.js'
+export * from './components/input/input.js'
+export * from './components/input/input-adornment.js'
+export * from './components/input/label.js'
+export * from './components/input/radio-group.js'
+export * from './components/input/select.js'
+export * from './components/input/text-area.js'
+export * from './components/input/utils.js'
+export * from './components/notifications/alert.js'
+export * from './components/notifications/toast.js'
+export * from './components/pager/pagination.js'
+export * from './components/scroll-area/scroll-area.js'
+export * from './components/scroll-to-top/scroll-to-top.js'
+export * from './components/section/section.js'
+export * from './components/shimmer/shimmer.js'
+export * from './components/table/table.js'
+export * from './components/tabs/tabs.js'
+export * from './components/timeline/timeline.js'
+export * from './components/tooltip/tooltip.js'
+export * from './icons/activity-icon.js'
+export * from './icons/calendar-icon.js'
+export * from './icons/check-icon.js'
+export * from './icons/chevron-down-icon.js'
+export * from './icons/chevron-left-double-icon.js'
+export * from './icons/chevron-left-icon.js'
+export * from './icons/chevron-right-double-icon.js'
+export * from './icons/chevron-right-icon.js'
+export * from './icons/chevrons-up-down.js'
+export * from './icons/close-icon.js'
+export * from './icons/copy-icon.js'
+export * from './icons/danger-icon.js'
+export * from './icons/dashboard-icon.js'
+export * from './icons/delete-icon.js'
+export * from './icons/document-icon.js'
+export * from './icons/download-icon.js'
+export * from './icons/edit-icon.js'
+export * from './icons/ellipsis-icon.js'
+export * from './icons/email-icon.js'
+export * from './icons/external-link-icon.js'
+export * from './icons/github-icon.js'
+export * from './icons/globe-icon.js'
+export * from './icons/google-icon.js'
+export * from './icons/gripper-vertical-icon.js'
+export * from './icons/history-icon.js'
+export * from './icons/home-icon.js'
+export * from './icons/icon-element.js'
+export * from './icons/info-icon.js'
+export * from './icons/infonomic-icon.js'
+export * from './icons/light-icon.js'
+export * from './icons/location-pin-icon.js'
+export * from './icons/moon-icon.js'
+export * from './icons/plus-icon.js'
+export * from './icons/primary-icon.js'
+export * from './icons/refresh-icon.js'
+export * from './icons/return-icon.js'
+export * from './icons/roles-icon.js'
+export * from './icons/search-icon.js'
+export * from './icons/search-menu-icon.js'
+export * from './icons/settings-gear-icon.js'
+export * from './icons/settings-sliders-icon.js'
+export * from './icons/sign-out-icon.js'
+export * from './icons/stopwatch-icon.js'
+export * from './icons/success-icon.js'
+export * from './icons/user-icon.js'
+export * from './icons/users-icon.js'
+export * from './icons/wallet-icon.js'
+export * from './icons/warning-icon.js'
+export * from './icons/x-icon.js'
+
+export * from './loaders/ellipses.js'
+export * from './loaders/ring.js'
+export * from './loaders/spinner.js'
+export * from './widgets/drawer/drawer.js'
+export * from './widgets/drawer/drawer-context.js'
+export * from './widgets/modal/modal.js'
+export * from './widgets/search/search.js'

package/src/styles/base/animations.css

@@ -0,0 +1,143 @@
+@layer infonomic-base {
+
+  @keyframes enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: rotateX(-30deg) scale(0.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+  }
+
+  @keyframes scaleOut {
+    from {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: rotateX(-10deg) scale(0.95);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/src/styles/base/base.css

@@ -0,0 +1,5 @@
+@import "./reset.css";
+@import "./colors.css";
+@import "./vars.css";
+@import "./animations.css";
+@import "./typography.css";

package/src/styles/base/colors.css

@@ -0,0 +1,163 @@
+@layer infonomic-base {
+  :root {
+    /* Theme base color */
+    --theme-base: oklch(43.11% 0.1 317.53);
+
+    --theme-25: oklch(from var(--theme-base) calc(l * 2) c h);
+    --theme-50: oklch(from var(--theme-base) calc(l * 1.75) c h);
+    --theme-100: oklch(from var(--theme-base) calc(l * 1.5) c h);
+    --theme-200: oklch(from var(--theme-base) calc(l * 1.25) c h);
+    --theme-300: oklch(from var(--theme-base) calc(l * 1.1) c h);
+    --theme-400: var(--theme-base);
+    --theme-500: oklch(from var(--theme-base) calc(l * 0.95) c h);
+    --theme-600: oklch(from var(--theme-base) calc(l * 0.9) c h);
+    --theme-700: oklch(from var(--theme-base) calc(l * 0.85) c h);
+    --theme-800: oklch(from var(--theme-base) calc(l * 0.8) c h);
+    --theme-900: oklch(from var(--theme-base) calc(l * 0.75) c h);
+    --theme-950: oklch(from var(--theme-base) calc(l * 0.7) c h);
+
+    /* Primary base */
+    --primary-base: oklch(49.7% 0.189 295.76);
+
+    --primary-25: oklch(from var(--primary-base) calc(l * 2) c h);
+    --primary-50: oklch(from var(--primary-base) calc(l * 1.75) c h);
+    --primary-100: oklch(from var(--primary-base) calc(l * 1.5) c h);
+    --primary-200: oklch(from var(--primary-base) calc(l * 1.25) c h);
+    --primary-300: oklch(from var(--primary-base) calc(l * 1.1) c h);
+    --primary-400: var(--primary-base);
+    --primary-500: oklch(from var(--primary-base) calc(l * 0.95) c h);
+    --primary-600: oklch(from var(--primary-base) calc(l * 0.9) c h);
+    --primary-700: oklch(from var(--primary-base) calc(l * 0.85) c h);
+    --primary-800: oklch(from var(--primary-base) calc(l * 0.8) c h);
+    --primary-900: oklch(from var(--primary-base) calc(l * 0.75) c h);
+    --primary-950: oklch(from var(--primary-base) calc(l * 0.7) c h);
+
+    /* Secondary base */
+    --secondary-base: oklch(0.8461 0.15 82.94);
+
+    --secondary-25: oklch(from var(--secondary-base) calc(l * 2.25) 0.1 h);
+    --secondary-50: oklch(from var(--secondary-base) calc(l * 2) c h);
+    --secondary-100: oklch(from var(--secondary-base) calc(l * 1.75) c h);
+    --secondary-200: oklch(from var(--secondary-base) calc(l * 1.5) c h);
+    --secondary-300: oklch(from var(--secondary-base) calc(l * 1.1) c h);
+    --secondary-400: var(--secondary-base);
+    --secondary-500: oklch(from var(--secondary-base) calc(l * 0.95) c h);
+    --secondary-600: oklch(from var(--secondary-base) calc(l * 0.9) c h);
+    --secondary-700: oklch(from var(--secondary-base) calc(l * 0.85) c h);
+    --secondary-800: oklch(from var(--secondary-base) calc(l * 0.8) c h);
+    --secondary-900: oklch(from var(--secondary-base) calc(l * 0.75) c h);
+    --secondary-950: oklch(from var(--secondary-base) calc(l * 0.7) c h);
+
+    /* Accent base */
+    --accent-base: oklch(0.754 0.1 324.9);
+
+    --accent-25: oklch(from var(--accent-base) 0.985 0.06 h);
+    --accent-50: oklch(from var(--accent-base) 0.975 0.08 h);
+    --accent-100: oklch(from var(--accent-base) 0.9 0.07 h);
+    --accent-200: oklch(from var(--accent-base) 0.85 c h);
+    --accent-300: oklch(from var(--accent-base) 0.8 c h);
+    --accent-400: var(--accent-base);
+    --accent-500: oklch(from var(--accent-base) 0.7 c h);
+    --accent-600: oklch(from var(--accent-base) 0.68 c h);
+    --accent-700: oklch(from var(--accent-base) 0.62 0.1 h);
+    --accent-800: oklch(from var(--accent-base) 0.6 0.1 h);
+    --accent-900: oklch(from var(--accent-base) 0.58 0.1 h);
+    --accent-950: oklch(from var(--accent-base) 0.5 0.11 h);
+
+    /* Gray base */
+    --gray-base: oklch(0.5984 0 0);
+
+    --gray-25: oklch(from var(--gray-base) calc(l * 1.625) c h);
+    --gray-50: oklch(from var(--gray-base) calc(l * 1.575) c h);
+    --gray-100: oklch(from var(--gray-base) calc(l * 1.475) c h);
+    --gray-200: oklch(from var(--gray-base) calc(l * 1.35) c h);
+    --gray-300: oklch(from var(--gray-base) calc(l * 1.175) c h);
+    --gray-400: var(--gray-base);
+    --gray-500: oklch(from var(--gray-base) calc(l * 0.85) c h);
+    --gray-600: oklch(from var(--gray-base) calc(l * 0.725) c h);
+    --gray-700: oklch(from var(--gray-base) calc(l * 0.6126) c h);
+    --gray-800: oklch(from var(--gray-base) calc(l * 0.5) c h);
+    --gray-900: oklch(from var(--gray-base) calc(l * 0.4) c h);
+    --gray-950: oklch(from var(--gray-base) calc(l * 0.3) c h);
+
+    /* Canvas base */
+    --canvas-base: oklch(0.542 0.0037 275.34);
+
+    --canvas-25: oklch(from var(--canvas-base) calc(l * 1.9) c h);
+    --canvas-50: oklch(from var(--canvas-base) calc(l * 1.75) c h);
+    --canvas-100: oklch(from var(--canvas-base) calc(l * 1.6) c h);
+    --canvas-200: oklch(from var(--canvas-base) calc(l * 1.4) c h);
+    --canvas-300: oklch(from var(--canvas-base) calc(l * 1.2) c h);
+    --canvas-400: var(--canvas-base);
+    --canvas-500: oklch(from var(--canvas-base) calc(l * 0.9) c h);
+    --canvas-600: oklch(from var(--canvas-base) calc(l * 0.7) c h);
+    --canvas-700: oklch(from var(--canvas-base) calc(l * 0.5) c h);
+    --canvas-800: oklch(from var(--canvas-base) calc(l * 0.335) c h);
+    --canvas-900: oklch(from var(--canvas-base) calc(l * 0.3) c h);
+    --canvas-950: oklch(from var(--canvas-base) calc(l * 0.225) c h);
+
+    /* Red base */
+    --red-base: oklch(54.27% 0.18 31.76);
+
+    --red-25: oklch(from var(--red-base) calc(l * 2) c h);
+    --red-50: oklch(from var(--red-base) calc(l * 1.75) c h);
+    --red-100: oklch(from var(--red-base) calc(l * 1.5) c h);
+    --red-200: oklch(from var(--red-base) calc(l * 1.25) c h);
+    --red-300: oklch(from var(--red-base) calc(l * 1.1) c h);
+    --red-400: var(--red-base);
+    --red-500: oklch(from var(--red-base) calc(l * 0.95) c h);
+    --red-600: oklch(from var(--red-base) calc(l * 0.9) c h);
+    --red-700: oklch(from var(--red-base) calc(l * 0.85) c h);
+    --red-800: oklch(from var(--red-base) calc(l * 0.8) c h);
+    --red-900: oklch(from var(--red-base) calc(l * 0.75) c h);
+    --red-950: oklch(from var(--red-base) calc(l * 0.7) c h);
+
+    /* Green base */
+    --green-base: oklch(65.26% 0.18 142.58);
+
+    --green-25: oklch(from var(--green-base) calc(l * 2) c h);
+    --green-50: oklch(from var(--green-base) calc(l * 1.75) c h);
+    --green-100: oklch(from var(--green-base) calc(l * 1.5) c h);
+    --green-200: oklch(from var(--green-base) calc(l * 1.25) c h);
+    --green-300: oklch(from var(--green-base) calc(l * 1.1) c h);
+    --green-400: var(--green-base);
+    --green-500: oklch(from var(--green-base) calc(l * 0.95) c h);
+    --green-600: oklch(from var(--green-base) calc(l * 0.9) c h);
+    --green-700: oklch(from var(--green-base) calc(l * 0.85) c h);
+    --green-800: oklch(from var(--green-base) calc(l * 0.8) c h);
+    --green-900: oklch(from var(--green-base) calc(l * 0.75) c h);
+    --green-950: oklch(from var(--green-base) calc(l * 0.7) c h);
+
+    /* Blue base */
+    --blue-base: oklch(53.66% 0.1942 265.89);
+
+    --blue-25: oklch(from var(--blue-base) calc(l * 2) c h);
+    --blue-50: oklch(from var(--blue-base) calc(l * 1.75) c h);
+    --blue-100: oklch(from var(--blue-base) calc(l * 1.5) c h);
+    --blue-200: oklch(from var(--blue-base) calc(l * 1.25) c h);
+    --blue-300: oklch(from var(--blue-base) calc(l * 1.1) c h);
+    --blue-400: var(--blue-base);
+    --blue-500: oklch(from var(--blue-base) calc(l * 0.95) c h);
+    --blue-600: oklch(from var(--blue-base) calc(l * 0.9) c h);
+    --blue-700: oklch(from var(--blue-base) calc(l * 0.85) c h);
+    --blue-800: oklch(from var(--blue-base) calc(l * 0.8) c h);
+    --blue-900: oklch(from var(--blue-base) calc(l * 0.75) c h);
+    --blue-950: oklch(from var(--blue-base) calc(l * 0.7) c h);
+
+    /* Yellow base */
+    --yellow-base: oklch(0.75 0.15 82.94);
+
+    --yellow-25: oklch(from var(--yellow-base) calc(l * 2) c h);
+    --yellow-50: oklch(from var(--yellow-base) calc(l * 1.75) c h);
+    --yellow-100: oklch(from var(--yellow-base) calc(l * 1.5) c h);
+    --yellow-200: oklch(from var(--yellow-base) calc(l * 1.25) c h);
+    --yellow-300: oklch(from var(--yellow-base) calc(l * 1.1) c h);
+    --yellow-400: var(--yellow-base);
+    --yellow-500: oklch(from var(--yellow-base) calc(l * 0.95) c h);
+    --yellow-600: oklch(from var(--yellow-base) calc(l * 0.9) c h);
+    --yellow-700: oklch(from var(--yellow-base) calc(l * 0.85) c h);
+    --yellow-800: oklch(from var(--yellow-base) calc(l * 0.8) c h);
+    --yellow-900: oklch(from var(--yellow-base) calc(l * 0.75) c h);
+    --yellow-950: oklch(from var(--yellow-base) calc(l * 0.7) c h);
+  }
+}