`ikun-ui` preset

ikun-ui has built-in a set of unocss-based presets. In the quick start chapter, we use the presets to quickly reference ikun-ui. This page gives a basic introduction to what the ikun-ui presets contain. Can help you customize your own theme presets.

Color

@ikun-ui/preset has the following built-in color variables available for use.

source code

rose

--ikun-rose-50 : #fff1f2

--ikun-rose-100 : #ffe4e6

--ikun-rose-200 : #fecdd3

--ikun-rose-300 : #fda4af

--ikun-rose-400 : #fb7185

--ikun-rose-500 : #f43f5e

--ikun-rose-600 : #e11d48

--ikun-rose-700 : #be123c

--ikun-rose-800 : #9f1239

--ikun-rose-900 : #881337

--ikun-rose-950 : #4c0519

pink

--ikun-pink-50 : #fdf2f8

--ikun-pink-100 : #fce7f3

--ikun-pink-200 : #fbcfe8

--ikun-pink-300 : #f9a8d4

--ikun-pink-400 : #f472b6

--ikun-pink-500 : #ec4899

--ikun-pink-600 : #db2777

--ikun-pink-700 : #be185d

--ikun-pink-800 : #9d174d

--ikun-pink-900 : #831843

--ikun-pink-950 : #500724

fuchsia

--ikun-fuchsia-50 : #fdf4ff

--ikun-fuchsia-100 : #fae8ff

--ikun-fuchsia-200 : #f5d0fe

--ikun-fuchsia-300 : #f0abfc

--ikun-fuchsia-400 : #e879f9

--ikun-fuchsia-500 : #d946ef

--ikun-fuchsia-600 : #c026d3

--ikun-fuchsia-700 : #a21caf

--ikun-fuchsia-800 : #86198f

--ikun-fuchsia-900 : #701a75

--ikun-fuchsia-950 : #4a044e

purple

--ikun-purple-50 : #faf5ff

--ikun-purple-100 : #f3e8ff

--ikun-purple-200 : #e9d5ff

--ikun-purple-300 : #d8b4fe

--ikun-purple-400 : #c084fc

--ikun-purple-500 : #a855f7

--ikun-purple-600 : #9333ea

--ikun-purple-700 : #7e22ce

--ikun-purple-800 : #6b21a8

--ikun-purple-900 : #581c87

--ikun-purple-950 : #3b0764

violet

--ikun-violet-50 : #f5f3ff

--ikun-violet-100 : #ede9fe

--ikun-violet-200 : #ddd6fe

--ikun-violet-300 : #c4b5fd

--ikun-violet-400 : #a78bfa

--ikun-violet-500 : #8b5cf6

--ikun-violet-600 : #7c3aed

--ikun-violet-700 : #6d28d9

--ikun-violet-800 : #5b21b6

--ikun-violet-900 : #4c1d95

--ikun-violet-950 : #2e1065

indigo

--ikun-indigo-50 : #eef2ff

--ikun-indigo-100 : #e0e7ff

--ikun-indigo-200 : #c7d2fe

--ikun-indigo-300 : #a5b4fc

--ikun-indigo-400 : #818cf8

--ikun-indigo-500 : #6366f1

--ikun-indigo-600 : #4f46e5

--ikun-indigo-700 : #4338ca

--ikun-indigo-800 : #3730a3

--ikun-indigo-900 : #312e81

--ikun-indigo-950 : #1e1b4b

blue

--ikun-blue-50 : #eff6ff

--ikun-blue-100 : #dbeafe

--ikun-blue-200 : #bfdbfe

--ikun-blue-300 : #93c5fd

--ikun-blue-400 : #60a5fa

--ikun-blue-500 : #3b82f6

--ikun-blue-600 : #2563eb

--ikun-blue-700 : #1d4ed8

--ikun-blue-800 : #1e40af

--ikun-blue-900 : #1e3a8a

--ikun-blue-950 : #172554

sky

--ikun-sky-50 : #f0f9ff

--ikun-sky-100 : #e0f2fe

--ikun-sky-200 : #bae6fd

--ikun-sky-300 : #7dd3fc

--ikun-sky-400 : #38bdf8

--ikun-sky-500 : #0ea5e9

--ikun-sky-600 : #0284c7

--ikun-sky-700 : #0369a1

--ikun-sky-800 : #075985

--ikun-sky-900 : #0c4a6e

--ikun-sky-950 : #082f49

cyan

--ikun-cyan-50 : #ecfeff

--ikun-cyan-100 : #cffafe

--ikun-cyan-200 : #a5f3fc

--ikun-cyan-300 : #67e8f9

--ikun-cyan-400 : #22d3ee

--ikun-cyan-500 : #06b6d4

--ikun-cyan-600 : #0891b2

--ikun-cyan-700 : #0e7490

--ikun-cyan-800 : #155e75

--ikun-cyan-900 : #164e63

--ikun-cyan-950 : #083344

teal

--ikun-teal-50 : #f0fdfa

--ikun-teal-100 : #ccfbf1

--ikun-teal-200 : #99f6e4

--ikun-teal-300 : #5eead4

--ikun-teal-400 : #2dd4bf

--ikun-teal-500 : #14b8a6

--ikun-teal-600 : #0d9488

--ikun-teal-700 : #0f766e

--ikun-teal-800 : #115e59

--ikun-teal-900 : #134e4a

--ikun-teal-950 : #042f2e

emerald

--ikun-emerald-50 : #ecfdf5

--ikun-emerald-100 : #d1fae5

--ikun-emerald-200 : #a7f3d0

--ikun-emerald-300 : #6ee7b7

--ikun-emerald-400 : #34d399

--ikun-emerald-500 : #10b981

--ikun-emerald-600 : #059669

--ikun-emerald-700 : #047857

--ikun-emerald-800 : #065f46

--ikun-emerald-900 : #064e3b

--ikun-emerald-950 : #022c22

green

--ikun-green-50 : #f0fdf4

--ikun-green-100 : #dcfce7

--ikun-green-200 : #bbf7d0

--ikun-green-300 : #86efac

--ikun-green-400 : #4ade80

--ikun-green-500 : #22c55e

--ikun-green-600 : #16a34a

--ikun-green-700 : #15803d

--ikun-green-800 : #166534

--ikun-green-900 : #14532d

--ikun-green-950 : #052e16

lime

--ikun-lime-50 : #f7fee7

--ikun-lime-100 : #ecfccb

--ikun-lime-200 : #d9f99d

--ikun-lime-300 : #bef264

--ikun-lime-400 : #a3e635

--ikun-lime-500 : #84cc16

--ikun-lime-600 : #65a30d

--ikun-lime-700 : #4d7c0f

--ikun-lime-800 : #3f6212

--ikun-lime-900 : #365314

--ikun-lime-950 : #1a2e05

yellow

--ikun-yellow-50 : #fefce8

--ikun-yellow-100 : #fef9c3

--ikun-yellow-200 : #fef08a

--ikun-yellow-300 : #fde047

--ikun-yellow-400 : #facc15

--ikun-yellow-500 : #eab308

--ikun-yellow-600 : #ca8a04

--ikun-yellow-700 : #a16207

--ikun-yellow-800 : #854d0e

--ikun-yellow-900 : #713f12

--ikun-yellow-950 : #422006

amber

--ikun-amber-50 : #fffbeb

--ikun-amber-100 : #fef3c7

--ikun-amber-200 : #fde68a

--ikun-amber-300 : #fcd34d

--ikun-amber-400 : #fbbf24

--ikun-amber-500 : #f59e0b

--ikun-amber-600 : #d97706

--ikun-amber-700 : #b45309

--ikun-amber-800 : #92400e

--ikun-amber-900 : #78350f

--ikun-amber-950 : #451a03

orange

--ikun-orange-50 : #fff7ed

--ikun-orange-100 : #ffedd5

--ikun-orange-200 : #fed7aa

--ikun-orange-300 : #fdba74

--ikun-orange-400 : #fb923c

--ikun-orange-500 : #f97316

--ikun-orange-600 : #ea580c

--ikun-orange-700 : #c2410c

--ikun-orange-800 : #9a3412

--ikun-orange-900 : #7c2d12

--ikun-orange-950 : #431407

red

--ikun-red-50 : #fef2f2

--ikun-red-100 : #fee2e2

--ikun-red-200 : #fecaca

--ikun-red-300 : #fca5a5

--ikun-red-400 : #f87171

--ikun-red-500 : #ef4444

--ikun-red-600 : #dc2626

--ikun-red-700 : #b91c1c

--ikun-red-800 : #991b1b

--ikun-red-900 : #7f1d1d

--ikun-red-950 : #450a0a

gray

--ikun-gray-50 : #f9fafb

--ikun-gray-100 : #f3f4f6

--ikun-gray-200 : #e5e7eb

--ikun-gray-300 : #d1d5db

--ikun-gray-400 : #9ca3af

--ikun-gray-500 : #6b7280

--ikun-gray-600 : #4b5563

--ikun-gray-700 : #374151

--ikun-gray-800 : #1f2937

--ikun-gray-900 : #111827

--ikun-gray-950 : #030712

slate

--ikun-slate-50 : #f8fafc

--ikun-slate-100 : #f1f5f9

--ikun-slate-200 : #e2e8f0

--ikun-slate-300 : #cbd5e1

--ikun-slate-400 : #94a3b8

--ikun-slate-500 : #64748b

--ikun-slate-600 : #475569

--ikun-slate-700 : #334155

--ikun-slate-800 : #1e293b

--ikun-slate-900 : #0f172a

--ikun-slate-950 : #020617

zinc

--ikun-zinc-50 : #fafafa

--ikun-zinc-100 : #f4f4f5

--ikun-zinc-200 : #e4e4e7

--ikun-zinc-300 : #d4d4d8

--ikun-zinc-400 : #a1a1aa

--ikun-zinc-500 : #71717a

--ikun-zinc-600 : #52525b

--ikun-zinc-700 : #3f3f46

--ikun-zinc-800 : #27272a

--ikun-zinc-900 : #18181b

--ikun-zinc-950 : #09090b

neutral

--ikun-neutral-50 : #fafafa

--ikun-neutral-100 : #f5f5f5

--ikun-neutral-200 : #e5e5e5

--ikun-neutral-300 : #d4d4d4

--ikun-neutral-400 : #a3a3a3

--ikun-neutral-500 : #737373

--ikun-neutral-600 : #525252

--ikun-neutral-700 : #404040

--ikun-neutral-800 : #262626

--ikun-neutral-900 : #171717

--ikun-neutral-950 : #0a0a0a

stone

--ikun-stone-50 : #fafaf9

--ikun-stone-100 : #f5f5f4

--ikun-stone-200 : #e7e5e4

--ikun-stone-300 : #d6d3d1

--ikun-stone-400 : #a8a29e

--ikun-stone-500 : #78716c

--ikun-stone-600 : #57534e

--ikun-stone-700 : #44403c

--ikun-stone-800 : #292524

--ikun-stone-900 : #1c1917

--ikun-stone-950 : #0c0a09

light

--ikun-light-50 : #fdfdfd

--ikun-light-100 : #fcfcfc

--ikun-light-200 : #fafafa

--ikun-light-300 : #f8f9fa

--ikun-light-400 : #f6f6f6

--ikun-light-500 : #f2f2f2

--ikun-light-600 : #f1f3f5

--ikun-light-700 : #e9ecef

--ikun-light-800 : #dee2e6

--ikun-light-900 : #dde1e3

--ikun-light-950 : #d8dcdf

dark

--ikun-dark-50 : #4a4a4a

--ikun-dark-100 : #3c3c3c

--ikun-dark-200 : #323232

--ikun-dark-300 : #2d2d2d

--ikun-dark-400 : #222222

--ikun-dark-500 : #1f1f1f

--ikun-dark-600 : #1c1c1e

--ikun-dark-700 : #1b1b1b

--ikun-dark-800 : #181818

--ikun-dark-900 : #0f0f0f

--ikun-dark-950 : #080808

Theme Color

@ikun-ui/preset Based on color variables, the following colors are used in the default preset.

source code

typescript

const colors = {
	'ikun-white': 'var(--ikun-white)',
	'ikun-black': 'var(--ikun-black)',
	// dork mode
	'ikun-dark': '(--ikun-dark-50)',
	'ikun-dark-100': '(--ikun-dark-100)',
	'ikun-dark-200': '(--ikun-dark-200)',
	'ikun-dark-300': '(--ikun-dark-300)',
	'ikun-dark-400': '(--ikun-dark-400)',
	'ikun-dark-500': '(--ikun-dark-500)',
	'ikun-dark-600': '(--ikun-dark-600)',
	'ikun-dark-700': '(--ikun-dark-700)',
	'ikun-dark-800': '(--ikun-dark-800)',
	'ikun-dark-900': '(--ikun-dark-900)',
	'ikun-dark-950': '(--ikun-dark-950)',
	// disabled color
	'ikun-disabled': 'var(--ikun-zinc-200)',
	// primary color
	'ikun-primary': 'var(--ikun-teal-400)',
	'ikun-primary-100': 'var(--ikun-teal-100)',
	// text default color
	'ikun-error': 'var(--ikun-rose-400)',
	'ikun-error-100': 'var(--ikun-rose-100)',
	// warning color
	'ikun-warning': 'var(--ikun-amber-400)',
	'ikun-warning-100': 'var(--ikun-amber-100)',
	// info color
	'ikun-info': 'var(--ikun-slate-400)',
	'ikun-info-100': 'var(--ikun-slate-100)',
	// success color
	'ikun-success': 'var(--ikun-green-400)',
	'ikun-success-100': 'var(--ikun-green-100)',
	// text default color
	'ikun-tx-base': 'var(--ikun-slate-900)',
	// placeholder or some weakly emphasized text color
	'ikun-tx-gr': 'var(--ikun-slate-400)',
	// border default color
	'ikun-bd-base': 'var(--ikun-zinc-300)'
};

const colors = {
	'ikun-white': 'var(--ikun-white)',
	'ikun-black': 'var(--ikun-black)',
	// dork mode
	'ikun-dark': '(--ikun-dark-50)',
	'ikun-dark-100': '(--ikun-dark-100)',
	'ikun-dark-200': '(--ikun-dark-200)',
	'ikun-dark-300': '(--ikun-dark-300)',
	'ikun-dark-400': '(--ikun-dark-400)',
	'ikun-dark-500': '(--ikun-dark-500)',
	'ikun-dark-600': '(--ikun-dark-600)',
	'ikun-dark-700': '(--ikun-dark-700)',
	'ikun-dark-800': '(--ikun-dark-800)',
	'ikun-dark-900': '(--ikun-dark-900)',
	'ikun-dark-950': '(--ikun-dark-950)',
	// disabled color
	'ikun-disabled': 'var(--ikun-zinc-200)',
	// primary color
	'ikun-primary': 'var(--ikun-teal-400)',
	'ikun-primary-100': 'var(--ikun-teal-100)',
	// text default color
	'ikun-error': 'var(--ikun-rose-400)',
	'ikun-error-100': 'var(--ikun-rose-100)',
	// warning color
	'ikun-warning': 'var(--ikun-amber-400)',
	'ikun-warning-100': 'var(--ikun-amber-100)',
	// info color
	'ikun-info': 'var(--ikun-slate-400)',
	'ikun-info-100': 'var(--ikun-slate-100)',
	// success color
	'ikun-success': 'var(--ikun-green-400)',
	'ikun-success-100': 'var(--ikun-green-100)',
	// text default color
	'ikun-tx-base': 'var(--ikun-slate-900)',
	// placeholder or some weakly emphasized text color
	'ikun-tx-gr': 'var(--ikun-slate-400)',
	// border default color
	'ikun-bd-base': 'var(--ikun-zinc-300)'
};

Shortucts

@ikun-ui/preset For each component, use the shortcuts feature to combine the necessary atomic styles, thus realizing the style of the component.

source code

typescript

export const notificationShortcuts: Record<string, string> = {
	// notification
	'k-notification--base':
		'k-notify-transition fixed z-1001 rounded shadow bg-ikun-white p2 min-w-240px',
	'k-notification--body': 'fbc w-full',
	'k-notification--title': 'fcc text-lg text-ikun-tx-base my-0',
	'k-notification--type--icon': 'mr-2',
	'k-notification--close--icon': 'hover:text-ikun-main',
	'k-notification--content': 'p2 mt-2',
	'k-notification--info': 'text-ikun-info',
	'k-notification--warning': 'text-ikun-warning',
	'k-notification--error': 'text-ikun-error',
	'k-notification--success': 'text-ikun-success',
	'k-notification--icon--info': 'i-carbon-information-filled',
	'k-notification--icon--warning': 'i-carbon-warning-filled',
	'k-notification--icon--error': 'i-carbon-error-filled',
	'k-notification--icon--success': 'i-carbon-checkmark-filled',
	// dark
	'k-notification--base__dark': 'dark:bg-ikun-dark-500 dark:shadow-ikun-main'
};

export const notificationShortcuts: Record<string, string> = {
	// notification
	'k-notification--base':
		'k-notify-transition fixed z-1001 rounded shadow bg-ikun-white p2 min-w-240px',
	'k-notification--body': 'fbc w-full',
	'k-notification--title': 'fcc text-lg text-ikun-tx-base my-0',
	'k-notification--type--icon': 'mr-2',
	'k-notification--close--icon': 'hover:text-ikun-main',
	'k-notification--content': 'p2 mt-2',
	'k-notification--info': 'text-ikun-info',
	'k-notification--warning': 'text-ikun-warning',
	'k-notification--error': 'text-ikun-error',
	'k-notification--success': 'text-ikun-success',
	'k-notification--icon--info': 'i-carbon-information-filled',
	'k-notification--icon--warning': 'i-carbon-warning-filled',
	'k-notification--icon--error': 'i-carbon-error-filled',
	'k-notification--icon--success': 'i-carbon-checkmark-filled',
	// dark
	'k-notification--base__dark': 'dark:bg-ikun-dark-500 dark:shadow-ikun-main'
};

Rules

In addition to using the shortcuts feature to combine component styles, @ikun-ui/preset also customizes some rules, which realize partial animation and shadow of components.

source code

typescript

const inputRules = {
	'k-input-shadow': { 'box-shadow': '0 0 0 2px #ff787542' }
};
const btnRules = {
	'k-btn-shadow--success': { 'box-shadow': '0 0 0 2px rgba(74,222,128,0.5)' },
	'k-btn-shadow--error': { 'box-shadow': '0 0 0 2px rgba(251,113,133,0.5)' },
	'k-btn-shadow--warning': { 'box-shadow': '0 0 0 2px rgba(251,191,36,0.5)' },
	'k-btn-shadow--info': { 'box-shadow': '0 0 0 2px rgba(148,163,184,0.5)' },
	'k-btn-shadow--primary': { 'box-shadow': '0 0 0 2px rgba(45,212,191,0.5)' }
};
const iconRules = {
	'k-icon-transition': { transition: 'all 0.3s linear' }
};

const notifyRules = {
	'k-notify-transition': { transition: 'top 0.3s linear' }
};

const switchRules = {
	'k-switch-transition': { transition: 'right .1s linear' }
};

const inputRules = {
	'k-input-shadow': { 'box-shadow': '0 0 0 2px #ff787542' }
};
const btnRules = {
	'k-btn-shadow--success': { 'box-shadow': '0 0 0 2px rgba(74,222,128,0.5)' },
	'k-btn-shadow--error': { 'box-shadow': '0 0 0 2px rgba(251,113,133,0.5)' },
	'k-btn-shadow--warning': { 'box-shadow': '0 0 0 2px rgba(251,191,36,0.5)' },
	'k-btn-shadow--info': { 'box-shadow': '0 0 0 2px rgba(148,163,184,0.5)' },
	'k-btn-shadow--primary': { 'box-shadow': '0 0 0 2px rgba(45,212,191,0.5)' }
};
const iconRules = {
	'k-icon-transition': { transition: 'all 0.3s linear' }
};

const notifyRules = {
	'k-notify-transition': { transition: 'top 0.3s linear' }
};

const switchRules = {
	'k-switch-transition': { transition: 'right .1s linear' }
};

Animation

In most cases, the animation of ikun-ui components is implemented by svelte's built-in animation system, but at some point (such as click animation), the ikun-ui component library implements some animations through unocss.

source code

typescript

const setAnimation = (mainColor: string) => {
	return {
		keyframes: {
			'ikun-checking': `{
			 		0% { box-shadow: 0 0 0 2px rgba(${mainColor},0.4)}
          60% { box-shadow: 0 0 0 4px rgba(${mainColor},0.2)}
          80% { box-shadow: 0 0 0 6px rgba(${mainColor},0.1)}
          100% { box-shadow: 0 0 0 8px rgba(${mainColor},0.05)}
					}`,
			'ikun-switching': `{
			 	  0% { box-shadow: 0 0 0 2px rgba(${mainColor},0.4)}
          60% { box-shadow: 0 0 0 4px rgba(${mainColor},0.2)}
          80% { box-shadow: 0 0 0 6px rgba(${mainColor},0.1)}
          100% { box-shadow: 0 0 0 8px rgba(${mainColor},0.05)}
			}`
		},
		durations: {
			'ikun-checking': '.3s',
			'ikun-switching': '.3s'
		},
		timingFns: {
			'ikun-checking': 'linear',
			'ikun-switching': 'linear'
		}
	};
};

const setAnimation = (mainColor: string) => {
	return {
		keyframes: {
			'ikun-checking': `{
			 		0% { box-shadow: 0 0 0 2px rgba(${mainColor},0.4)}
          60% { box-shadow: 0 0 0 4px rgba(${mainColor},0.2)}
          80% { box-shadow: 0 0 0 6px rgba(${mainColor},0.1)}
          100% { box-shadow: 0 0 0 8px rgba(${mainColor},0.05)}
					}`,
			'ikun-switching': `{
			 	  0% { box-shadow: 0 0 0 2px rgba(${mainColor},0.4)}
          60% { box-shadow: 0 0 0 4px rgba(${mainColor},0.2)}
          80% { box-shadow: 0 0 0 6px rgba(${mainColor},0.1)}
          100% { box-shadow: 0 0 0 8px rgba(${mainColor},0.05)}
			}`
		},
		durations: {
			'ikun-checking': '.3s',
			'ikun-switching': '.3s'
		},
		timingFns: {
			'ikun-checking': 'linear',
			'ikun-switching': 'linear'
		}
	};
};

ikun-ui preset ​

Color ​

Theme Color ​

Shortucts ​

Rules ​

Animation ​

`ikun-ui` preset

Color

Theme Color

Shortucts

Rules

Animation