fix: oklch color channel

Signed-off-by: Innei <i@innei.in>

src/components/common/404.tsx

@@ -296,7 +296,7 @@ const $404SVG: Component = ({ className }) => {
  d="M273.813 410.969s-54.527 39.501-115.34 38.218c-2.28-.048-4.926-.241-7.841-.548-68.038-7.178-134.288-43.963-167.33-103.87-.908-1.646-1.793-3.3-2.654-4.964-18.395-35.511-37.259-83.385-32.075-118.817"
  />
  <path
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
@@ -305,7 +305,7 @@ const $404SVG: Component = ({ className }) => {
  d="m338.164 454.689-64.726-17.353c-11.086-2.972-17.664-14.369-14.692-25.455l15.694-58.537c3.889-14.504 18.799-23.11 33.303-19.221l52.349 14.035c14.504 3.889 23.11 18.799 19.221 33.303l-15.694 58.537c-2.972 11.085-14.368 17.663-25.455 14.691z"
  />
  <g
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
@@ -316,7 +316,7 @@ const $404SVG: Component = ({ className }) => {
  <circle cx={323.666} cy={235.617} r={6.375} />
  </g>
  <g
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
@@ -327,7 +327,7 @@ const $404SVG: Component = ({ className }) => {
  <path d="M388.762 434.677c5.234-3.039 7.731-8.966 6.678-14.594a15.804 15.804 0 0 1 5.837 5.793c4.411 7.596 1.829 17.33-5.767 21.741-7.596 4.411-17.33 1.829-21.741-5.767-1.754-3.021-2.817-5.818-2.484-9.046 4.34 4.551 11.802 5.169 17.477 1.873z" />
  </g>
  <g
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
@@ -345,7 +345,7 @@ const $404SVG: Component = ({ className }) => {
  strokeWidth={3}
  >
  <path
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  d="M353.351 365.387a58.685 58.685 0 0 1-24.48-1.278 58.678 58.678 0 0 1-21.836-11.14c-17.004 4.207-31.269 17.289-36.128 35.411l-1.374 5.123c-7.112 26.525 8.617 53.791 35.13 60.899h0c26.513 7.108 53.771-8.632 60.883-35.158l1.374-5.123c4.858-18.122-.949-36.585-13.569-48.734z"
  />
  <path
@@ -361,20 +361,20 @@ const $404SVG: Component = ({ className }) => {
  strokeWidth={3}
  >
  <path
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  d="m312.957 456.734-14.315 53.395c-1.896 7.07 2.299 14.338 9.37 16.234h0c7.07 1.896 14.338-2.299 16.234-9.37l17.838-66.534c-8.633 5.427-18.558 6.928-29.127 6.275z"
  />
  <path fill="none" d="m304.883 486.849 25.604 6.864" />
  <path
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  d="M296.315 452.273 282 505.667c-1.896 7.07-9.164 11.265-16.234 9.37h0c-7.07-1.896-11.265-9.164-9.37-16.234l17.838-66.534c4.759 9.017 12.602 15.281 22.081 20.004z"
  />
  <path fill="none" d="m262.638 475.522 25.603 6.865" />
  </g>
  <ellipse
  cx={341.295}
  cy={315.211}
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"
@@ -398,7 +398,7 @@ const $404SVG: Component = ({ className }) => {
  transform="rotate(.997 279.669 262.457)"
  />
  <path
- fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+ fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
  stroke="currentColor"
  strokeLinecap="round"
  strokeLinejoin="round"

src/components/layout/header/internal/HeaderContent.tsx

@@ -109,7 +109,7 @@ const ForDesktop: Component<{
  'rounded-full bg-gradient-to-b from-zinc-50/70 to-white/90',
  'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
  'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
- 'group [--spotlight-color:hsl(var(--a)_/_0.05)]',
+ 'group [--spotlight-color:oklch(var(--a)_/_0.12)]',
  'duration-200',
  shouldHideNavBg && '!bg-none !shadow-none !ring-transparent',
  className,

src/components/ui/banner/Banner.tsx

@@ -18,24 +18,24 @@ const IconMap = {
 
 const bgColorMap = {
  warning: 'bg-amber-50 dark:bg-amber-300',
- info: 'bg-always-blue-50 dark:bg-always-blue-300',
- success: 'bg-always-green-50 dark:bg-always-green-300',
- error: 'bg-always-red-50 dark:bg-always-red-300',
+ info: 'bg-blue-50 dark:bg-blue-300',
+ success: 'bg-green-50 dark:bg-green-300',
+ error: 'bg-red-50 dark:bg-red-300',
 }
 
 const borderColorMap = {
  warning: 'border-amber-300',
- info: 'border-always-blue-300',
+ info: 'border-blue-300',
 
- success: 'border-always-green-300',
- error: 'border-always-red-300',
+ success: 'border-green-300',
+ error: 'border-red-300',
 }
 
 const iconColorMap = {
  warning: 'text-amber-500',
- info: 'text-always-blue-500',
- success: 'text-always-green-500',
- error: 'text-always-red-500',
+ info: 'text-blue-500',
+ success: 'text-green-500',
+ error: 'text-red-500',
 }
 
 export const Banner: FC<{
@@ -51,7 +51,7 @@ export const Banner: FC<{
  return (
  <div
  className={clsx(
- 'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 dark:bg-opacity-10 dark:text-[#c4c4c4] md:flex md:flex-row',
+ 'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 md:flex md:flex-row dark:bg-opacity-10 dark:text-[#c4c4c4]',
  bgColorMap[props.type] || bgColorMap.info,
  borderColorMap[props.type] || borderColorMap.info,
  placement == 'center' ? 'justify-center' : 'justify-start',

src/components/ui/collapse/Collapse.tsx

@@ -33,9 +33,9 @@ export const Collapse: Component<{
 
  if (withBackground) {
  // @ts-expect-error
- v.open.background = `hsl(var(--a) / 10%)`
+ v.open.background = `oklch(var(--a) / 10%)`
  // @ts-expect-error
- v.collapsed.background = `hsl(var(--a) / 0%)`
+ v.collapsed.background = `oklch(var(--a) / 0%)`
  }
 
  return v

src/components/ui/divider/Divider.tsx

@@ -10,7 +10,7 @@ export const Divider: FC<
  return (
  <hr
  className={clsxm(
- 'my-4 h-[0.5px] border-0 bg-always-black !bg-opacity-30 dark:bg-always-white',
+ 'my-4 h-[0.5px] border-0 bg-black !bg-opacity-30 dark:bg-white',
  className,
  )}
  {...rest}
@@ -25,7 +25,7 @@ export const DividerVertical: FC<
  return (
  <span
  className={clsxm(
- 'mx-4 inline-block h-full w-[0.5px] select-none bg-always-black !bg-opacity-30 text-transparent dark:bg-always-white',
+ 'mx-4 inline-block h-full w-[0.5px] select-none bg-black !bg-opacity-30 text-transparent dark:bg-white',
  className,
  )}
  {...rest}

src/components/ui/input/TextArea.tsx

@@ -34,7 +34,7 @@ export const TextArea = forwardRef<
  const inputProps = useInputComposition(props)
  return (
  <div
- className="group relative h-full [--spotlight-color:hsl(var(--a)_/_0.05)]"
+ className="group relative h-full [--spotlight-color:oklch(var(--a)_/_0.12)]"
  onMouseMove={handleMouseMove}
  >
  {!isMobile && (

src/components/ui/markdown/markdown.module.css

@@ -12,7 +12,7 @@
  text-decoration: none;
  border-radius: 3px;
 
- @apply bg-current text-stone-700 dark:text-neutral-500 print:!bg-transparent print:line-through;
+ @apply bg-current text-stone-700 print:!bg-transparent print:line-through dark:text-neutral-500;
 
  &:hover {
  background: transparent;
@@ -110,9 +110,9 @@
  }
 
  mark {
- --lightness: 80%;
+ --lightness: 0.3;
  --highlighted: 1;
- --highlight: hsl(var(--inc) / var(--lightness));
+ --highlight: oklch(var(--a) / var(--lightness));
  background: transparent;
  }
 
@@ -126,7 +126,7 @@
  }
 
  [data-theme='dark'] mark {
- --lightness: 35%;
+ --lightness: 0.35;
  }
 
  mark span {

src/components/ui/markdown/parsers/alert.tsx

@@ -11,13 +11,13 @@ import {
 import { Markdown } from '../Markdown'
 
 const textColorMap = {
- NOTE: 'text-always-blue-500 dark:text-always-blue-400',
+ NOTE: 'text-blue-500 dark:text-blue-400',
  IMPORTANT: 'text-accent',
  WARNING: 'text-amber-500 dark:text-amber-400',
 } as any
 
 const borderColorMap = {
- NOTE: 'border-always-blue-500 dark:border-always-blue-400',
+ NOTE: 'border-blue-500 dark:border-blue-400',
  IMPORTANT: 'border-accent',
  WARNING: 'border-amber-500 dark:border-amber-400',
 } as any

src/components/ui/markdown/parsers/mark.tsx

@@ -15,7 +15,7 @@ export const MarkRule: MarkdownToJSX.Rule = {
  return (
  <mark
  key={state?.key}
- className="rounded-md bg-always-yellow-400 bg-opacity-80 px-1 text-black"
+ className="rounded-md bg-yellow-400 bg-opacity-80 px-1 text-black"
  >
  <span>{output(node.content, state!)}</span>
  </mark>

src/styles/variables.css

@@ -26,7 +26,7 @@ html {
 
 ::selection {
  background-color: var(--theme-color) !important;
- color: theme(colors.always.white) !important;
+ color: theme(colors.white) !important;
  text-shadow: none;
 }
 

tailwind.config.ts

@@ -1,6 +1,5 @@
 import daisyui from 'daisyui'
 import { withTV } from 'tailwind-variants/transformer'
-import twColors from 'tailwindcss/colors'
 import type { Config } from 'tailwindcss'
 import type { PluginAPI } from 'tailwindcss/types/config'
 
@@ -223,7 +222,6 @@ const twConfig: Config = {
 
  colors: {
  uk: UIKitColors,
- always: { ...twColors },
 
  themed: {
  bg_opacity: 'var(--bg-opacity)',