/* This theme is for CSS */
:root {
  --c-white: oklch(1 0 0); /* alt: #fff / white */
  --c-black: oklch(0 0 0); /* alt: #000 / black */
  --c-background: oklch(1 0 0); /* alt: #fff / white */
  --c-foreground: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-card: oklch(1 0 0); /* alt: #fff / white */
  --c-card-foreground: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-popover: oklch(1 0 0); /* alt: #fff / white */
  --c-popover-foreground: oklch(
    0.141 0.005 285.823
  ); /* alt: #09090b / zinc-950 */
  --c-primary: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-primary-foreground: oklch(
    0.97 0.014 254.604
  ); /* alt: #eff6ff / blue-50 */
  --c-secondary: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-secondary-foreground: oklch(
    0.21 0.006 285.885
  ); /* alt: #18181b / zinc-900 */
  --c-muted: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-muted-foreground: oklch(
    0.552 0.016 285.938
  ); /* alt: #71717b  / zinc-500 */
  --c-accent: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-accent-foreground: oklch(
    0.21 0.006 285.885
  ); /* alt: #18181b / zinc-900 */
  --c-destructive: oklch(0.577 0.245 27.325); /* alt: #e7000b / red-600 */
  --c-border: oklch(0.92 0.004 286.32); /* alt: #e4e4e7 / zinc-200 */
  --c-input: oklch(0.92 0.004 286.32); /* alt: #e4e4e7 / zinc-200 */
  --c-ring: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-alert: oklch(0.971 0.013 17.38); /* alt: #fef2f2 / red-50 */
  --c-alert-foreground: oklch(0.637 0.237 25.331); /* alt: #fb2c36 / red-500 */
  --c-info: oklch(0.97 0.014 254.604); /* alt: #eff6ff / blue-50 */
  --c-info-foreground: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-note: oklch(0.987 0.026 102.212); /* alt: #fefce8 / yellow-50 */
  --c-note-foreground: oklch(
    0.795 0.184 86.047
  ); /* alt: #f0b100 / yellow-500 */
  --c-success: oklch(0.982 0.018 155.826); /* alt: #f0fdf4 / green-50 */
  --c-success-foreground: oklch(
    0.723 0.219 149.579
  ); /* alt: #00c950 / green-500 */
}

.dark {
  --c-background: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-card: oklch(0.21 0.006 285.885); /* alt: #18181b / zinc-900 */
  --c-card-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-popover: oklch(0.21 0.006 285.885); /* alt: #18181b / zinc-900 */
  --c-popover-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-primary: oklch(0.546 0.245 262.881); /* alt: #155dfc / blue-600 */
  --c-primary-foreground: oklch(
    0.379 0.146 265.522
  ); /* alt: #1c398e / blue-900 */
  --c-secondary: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-secondary-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-muted: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-muted-foreground: oklch(
    0.705 0.015 286.067
  ); /* alt: #9f9fa9 / zinc-400 */
  --c-accent: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-accent-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-destructive: oklch(0.704 0.191 22.216); /* alt: #ff6467 / red-400 */
  --c-border: oklch(1 0 0 / 10%); /* alt: rgba(255, 255, 255, 0.1) / white/10 */
  --c-input: oklch(1 0 0 / 15%); /* alt: rgba(255, 255, 255, 0.15) / white/15 */
  --c-ring: oklch(0.488 0.243 264.376); /* alt: #1447e6 */
  --c-alert: oklch(0.444 0.177 26.899); /* alt: #9f0712 / red-800 */
  --c-alert-foreground: oklch(0.936 0.032 17.717); /* alt: #ffe2e2 / red-100 */
  --c-info: oklch(0.424 0.199 265.638); /* alt: #035388 / blue-800 */
  --c-info-foreground: oklch(0.932 0.032 255.585); /* alt: #dbeafe / blue-100 */
  --c-note: oklch(0.476 0.114 61.907); /* alt: #894b00 / yellow-800 */
  --c-note-foreground: oklch(
    0.973 0.071 103.193
  ); /* alt: #fef9c2 / yellow-100 */
  --c-success: oklch(0.448 0.119 151.328); /* alt: #016630 / green-800 */
  --c-success-foreground: oklch(
    0.967 0.067 122.328
  ); /* alt: #dcfce7 / green-100 */
}
Select Box with Background Color and Arrow Icon

Other CSS UI parts

Accordions

Balloons

Boxes

Breadcrumbs

Buttons

Checkboxes

Headings and Texts

Icons

Lists

Paginations

Quotations

Read More

Search Forms

Select Boxes

Switches

Tabs

Text Boxes

Tooltips

Stack Layouts

Standard Layout

Headers
