1.4.0 • Published 1 month ago
@iol-inc/theme-colors v1.4.0
Constants
IOL_COLORS : Object
A collection of color constants for various UI states and themes.
Kind: global constant
Properties
| Name | Type | Description |
|---|---|---|
| confirm50 | string | Lightest shade of confirmation green. |
| confirm100 | string | Light shade of confirmation green. |
| confirm200 | string | Medium-light shade of confirmation green. |
| confirm300 | string | Medium shade of confirmation green. |
| confirm400 | string | Dark shade of confirmation green. |
| error50 | string | Lightest shade of error red. |
| error100 | string | Light shade of error red. |
| error200 | string | Medium-light shade of error red. |
| error300 | string | Medium shade of error red. |
| error400 | string | Dark shade of error red. |
| neutral50 | string | Lightest shade of neutral. |
| neutral100 | string | Very light shade of neutral. |
| neutral200 | string | Light shade of neutral. |
| neutral300 | string | Medium-light shade of neutral. |
| neutral400 | string | Medium shade of neutral. |
| neutral500 | string | Medium-dark shade of neutral. |
| neutral600 | string | Dark shade of neutral. |
| neutral700 | string | Very dark shade of neutral. |
| neutral800 | string | Darker shade of neutral. |
| neutral900 | string | Darkest shade of neutral. |
| primary50 | string | Lightest shade of primary blue. |
| primary100 | string | Light shade of primary blue. |
| primary200 | string | Medium-light shade of primary blue. |
| primary300 | string | Medium shade of primary blue. |
| primary400 | string | Dark shade of primary blue. |
| loader_background | string | Background color for loaders. |
| loader_foreground | string | Foreground color for loaders. |
HS_COLORS : Object
A collection of color constants for Hey Success.
Kind: global constant
Properties
| Name | Type | Description |
|---|---|---|
| container_color | string | Base color for containers. |
| neutral100 | string | Darkest shade of neutral color. |
| neutral200 | string | Dark shade of neutral color. |
| neutral300 | string | Medium shade of neutral color. |
| neutral400 | string | Light shade of neutral color. |
| neutral500 | string | Lightest shade of neutral color. |
| green100 | string | Darkest shade of green. |
| green200 | string | Dark shade of green. |
| green300 | string | Medium shade of green. |
| green400 | string | Light shade of green. |
| yellow100 | string | Darkest shade of yellow. |
| yellow200 | string | Dark shade of yellow. |
| yellow300 | string | Medium shade of yellow. |
| yellow400 | string | Light shade of yellow. |
| blue100 | string | Darkest shade of blue. |
| blue200 | string | Dark shade of blue. |
| blue300 | string | Medium shade of blue. |
| blue400 | string | Light shade of blue. |
| red100 | string | Darkest shade of red. |
| red200 | string | Dark shade of red. |
| red300 | string | Medium shade of red. |
| red400 | string | Light shade of red. |
TAILWIND_COLORS : Object
Defines a comprehensive palette of colors formatted for Tailwind CSS.
This configuration includes standard colors like inherit, current,
and transparent, alongside a detailed spectrum of color shades ranging
from 50 (the lightest) to 950 (the darkest) for customizable color themes.
This palette allows for extensive customization and precise theme control
in web development projects.
Kind: global constant
Properties
| Name | Type | Description |
|---|---|---|
| inherit | string | Inherits the color from the parent element. |
| current | string | Uses the currentColor value. |
| transparent | string | Transparent color. |
| black | string | Hex code for black color. |
| white | string | Hex code for white color. |
| slate | Object | Shades of slate from light to dark. |
| slate.50 | string | #f8fafc |
| slate.100 | string | #f1f5f9 |
| slate.200 | string | #e2e8f0 |
| slate.300 | string | #cbd5e1 |
| slate.400 | string | #94a3b8 |
| slate.500 | string | #64748b |
| slate.600 | string | #475569 |
| slate.700 | string | #334155 |
| slate.800 | string | #1e293b |
| slate.900 | string | #0f172a |
| slate.950 | string | #020617 |
| gray | Object | Shades of gray from light to dark. |
| gray.50 | string | #f9fafb |
| gray.100 | string | #f3f4f6 |
| gray.200 | string | #e5e7eb |
| gray.300 | string | #d1d5db |
| gray.400 | string | #9ca3af |
| gray.500 | string | #6b7280 |
| gray.600 | string | #4b5563 |
| gray.700 | string | #374151 |
| gray.800 | string | #1f2937 |
| gray.900 | string | #111827 |
| gray.950 | string | #030712 |
| zinc | Object | Shades of zinc from light to dark. |
| zinc.50 | string | #fafafa |
| zinc.100 | string | #f4f4f5 |
| zinc.200 | string | #e4e4e7 |
| zinc.300 | string | #d4d4d8 |
| zinc.400 | string | #a1a1aa |
| zinc.500 | string | #71717a |
| zinc.600 | string | #52525b |
| zinc.700 | string | #3f3f46 |
| zinc.800 | string | #27272a |
| zinc.900 | string | #18181b |
| zinc.950 | string | #09090b |
| neutral | Object | Shades of neutral from light to dark. |
| neutral.50 | string | #fafafa |
| neutral.100 | string | #f5f5f5 |
| neutral.200 | string | #e5e5e5 |
| neutral.300 | string | #d4d4d4 |
| neutral.400 | string | #a3a3a3 |
| neutral.500 | string | #737373 |
| neutral.600 | string | #525252 |
| neutral.700 | string | #404040 |
| neutral.800 | string | #262626 |
| neutral.900 | string | #171717 |
| neutral.950 | string | #0a0a0a |
| stone | Object | Shades of stone from light to dark. |
| stone.50 | string | #fafaf9 |
| stone.100 | string | #f5f5f4 |
| stone.200 | string | #e7e5e4 |
| stone.300 | string | #d6d3d1 |
| stone.400 | string | #a8a29e |
| stone.500 | string | #78716c |
| stone.600 | string | #57534e |
| stone.700 | string | #44403c |
| stone.800 | string | #292524 |
| stone.900 | string | #1c1917 |
| stone.950 | string | #0c0a09 |
| red | Object | Shades of red from light to dark. |
| red.50 | string | #fef2f2 |
| red.100 | string | #fee2e2 |
| red.200 | string | #fecaca |
| red.300 | string | #fca5a5 |
| red.400 | string | #f87171 |
| red.500 | string | #ef4444 |
| red.600 | string | #dc2626 |
| red.700 | string | #b91c1c |
| red.800 | string | #991b1b |
| red.900 | string | #7f1d1d |
| red.950 | string | #450a0a |
| orange | Object | Shades of orange from light to dark. |
| orange.50 | string | #fff7ed |
| orange.100 | string | #ffedd5 |
| orange.200 | string | #fed7aa |
| orange.300 | string | #fdba74 |
| orange.400 | string | #fb923c |
| orange.500 | string | #f97316 |
| orange.600 | string | #ea580c |
| orange.700 | string | #c2410c |
| orange.800 | string | #9a3412 |
| orange.900 | string | #7c2d12 |
| orange.950 | string | #431407 |
| amber | Object | Shades of amber from light to dark. |
| amber.50 | string | #fffbeb |
| amber.100 | string | #fef3c7 |
| amber.200 | string | #fde68a |
| amber.300 | string | #fcd34d |
| amber.400 | string | #fbbf24 |
| amber.500 | string | #f59e0b |
| amber.600 | string | #d97706 |
| amber.700 | string | #b45309 |
| amber.800 | string | #92400e |
| amber.900 | string | #78350f |
| amber.950 | string | #451a03 |
| yellow | Object | Shades of yellow from light to dark. |
| yellow.50 | string | #fefce8 |
| yellow.100 | string | #fef9c3 |
| yellow.200 | string | #fef08a |
| yellow.300 | string | #fde047 |
| yellow.400 | string | #facc15 |
| yellow.500 | string | #eab308 |
| yellow.600 | string | #ca8a04 |
| yellow.700 | string | #a16207 |
| yellow.800 | string | #854d0e |
| yellow.900 | string | #713f12 |
| yellow.950 | string | #422006 |
| lime | Object | Shades of lime from light to dark. |
| lime.50 | string | #f7fee7 |
| lime.100 | string | #ecfccb |
| lime.200 | string | #d9f99d |
| lime.300 | string | #bef264 |
| lime.400 | string | #a3e635 |
| lime.500 | string | #84cc16 |
| lime.600 | string | #65a30d |
| lime.700 | string | #4d7c0f |
| lime.800 | string | #3f6212 |
| lime.900 | string | #365314 |
| lime.950 | string | #1a2e05 |
| green | Object | Shades of green from light to dark. |
| green.50 | string | #f0fdf4 |
| green.100 | string | #dcfce7 |
| green.200 | string | #bbf7d0 |
| green.300 | string | #86efac |
| green.400 | string | #4ade80 |
| green.500 | string | #22c55e |
| green.600 | string | #16a34a |
| green.700 | string | #15803d |
| green.800 | string | #166534 |
| green.900 | string | #14532d |
| green.950 | string | #052e16 |
| emerald | Object | Shades of emerald from light to dark. |
| emerald.50 | string | #ecfdf5 |
| emerald.100 | string | #d1fae5 |
| emerald.200 | string | #a7f3d0 |
| emerald.300 | string | #6ee7b7 |
| emerald.400 | string | #34d399 |
| emerald.500 | string | #10b981 |
| emerald.600 | string | #059669 |
| emerald.700 | string | #047857 |
| emerald.800 | string | #065f46 |
| emerald.900 | string | #064e3b |
| emerald.950 | string | #022c22 |
| teal | Object | Shades of teal from light to dark. |
| teal.50 | string | #f0fdfa |
| teal.100 | string | #ccfbf1 |
| teal.200 | string | #99f6e4 |
| teal.300 | string | #5eead4 |
| teal.400 | string | #2dd4bf |
| teal.500 | string | #14b8a6 |
| teal.600 | string | #0d9488 |
| teal.700 | string | #0f766e |
| teal.800 | string | #115e59 |
| teal.900 | string | #134e4a |
| teal.950 | string | #042f2e |
| cyan | Object | Shades of cyan from light to dark. |
| cyan.50 | string | #ecfeff |
| cyan.100 | string | #cffafe |
| cyan.200 | string | #a5f3fc |
| cyan.300 | string | #67e8f9 |
| cyan.400 | string | #22d3ee |
| cyan.500 | string | #06b6d4 |
| cyan.600 | string | #0891b2 |
| cyan.700 | string | #0e7490 |
| cyan.800 | string | #155e75 |
| cyan.900 | string | #164e63 |
| cyan.950 | string | #083344 |
| sky | Object | Shades of sky from light to dark. |
| sky.50 | string | #f0f9ff |
| sky.100 | string | #e0f2fe |
| sky.200 | string | #bae6fd |
| sky.300 | string | #7dd3fc |
| sky.400 | string | #38bdf8 |
| sky.500 | string | #0ea5e9 |
| sky.600 | string | #0284c7 |
| sky.700 | string | #0369a1 |
| sky.800 | string | #075985 |
| sky.900 | string | #0c4a6e |
| sky.950 | string | #082f49 |
| blue | Object | Shades of blue from light to dark. |
| blue.50 | string | #eff6ff |
| blue.100 | string | #dbeafe |
| blue.200 | string | #bfdbfe |
| blue.300 | string | #93c5fd |
| blue.400 | string | #60a5fa |
| blue.500 | string | #3b82f6 |
| blue.600 | string | #2563eb |
| blue.700 | string | #1d4ed8 |
| blue.800 | string | #1e40af |
| blue.900 | string | #1e3a8a |
| blue.950 | string | #172554 |
| indigo | Object | Shades of indigo from light to dark. |
| indigo.50 | string | #eef2ff |
| indigo.100 | string | #e0e7ff |
| indigo.200 | string | #c7d2fe |
| indigo.300 | string | #a5b4fc |
| indigo.400 | string | #818cf8 |
| indigo.500 | string | #6366f1 |
| indigo.600 | string | #4f46e5 |
| indigo.700 | string | #4338ca |
| indigo.800 | string | #3730a3 |
| indigo.900 | string | #312e81 |
| indigo.950 | string | #1e1b4b |
| violet | Object | Shades of violet from light to dark. |
| violet.50 | string | #f5f3ff |
| violet.100 | string | #ede9fe |
| violet.200 | string | #ddd6fe |
| violet.300 | string | #c4b5fd |
| violet.400 | string | #a78bfa |
| violet.500 | string | #8b5cf6 |
| violet.600 | string | #7c3aed |
| violet.700 | string | #6d28d9 |
| violet.800 | string | #5b21b6 |
| violet.900 | string | #4c1d95 |
| violet.950 | string | #2e1065 |
| purple | Object | Shades of purple from light to dark. |
| purple.50 | string | #faf5ff |
| purple.100 | string | #f3e8ff |
| purple.200 | string | #e9d5ff |
| purple.300 | string | #d8b4fe |
| purple.400 | string | #c084fc |
| purple.500 | string | #a855f7 |
| purple.600 | string | #9333ea |
| purple.700 | string | #7e22ce |
| purple.800 | string | #6b21a8 |
| purple.900 | string | #581c87 |
| purple.950 | string | #3b0764 |
| fuchsia | Object | Shades of fuchsia from light to dark. |
| fuchsia.50 | string | #fdf4ff |
| fuchsia.100 | string | #fae8ff |
| fuchsia.200 | string | #f5d0fe |
| fuchsia.300 | string | #f0abfc |
| fuchsia.400 | string | #e879f9 |
| fuchsia.500 | string | #d946ef |
| fuchsia.600 | string | #c026d3 |
| fuchsia.700 | string | #a21caf |
| fuchsia.800 | string | #86198f |
| fuchsia.900 | string | #701a75 |
| fuchsia.950 | string | #4a044e |
| pink | Object | Shades of pink from light to dark. |
| pink.50 | string | #fdf2f8 |
| pink.100 | string | #fce7f3 |
| pink.200 | string | #fbcfe8 |
| pink.300 | string | #f9a8d4 |
| pink.400 | string | #f472b6 |
| pink.500 | string | #ec4899 |
| pink.600 | string | #db2777 |
| pink.700 | string | #be185d |
| pink.800 | string | #9d174d |
| pink.900 | string | #831843 |
| pink.950 | string | #500724 |
| rose | Object | Shades of rose from light to dark. |
| rose.50 | string | #fff1f2 |
| rose.100 | string | #ffe4e6 |
| rose.200 | string | #fecdd3 |
| rose.300 | string | #fda4af |
| rose.400 | string | #fb7185 |
| rose.500 | string | #f43f5e |
| rose.600 | string | #e11d48 |
| rose.700 | string | #be123c |
| rose.800 | string | #9f1239 |
| rose.900 | string | #881337 |
| rose.950 | string | #4c0519 |
ZIGMAFY_COLORS : Object
Defines the color palette for the ZIGMAFY UI theme, including primary, secondary, and various shades for different UI elements like backgrounds, text, and borders. Each color is represented in HEX format and is intended for specific use cases to ensure a cohesive look and feel across the UI.
Kind: global constant
Properties
| Name | Type | Description |
|---|---|---|
| primary_main | string | The main color for primary elements, a deep blue. |
| primary_dark | string | A darker shade of the primary color for hover states and accents. |
| primary_light | string | A lighter shade of the primary color for backgrounds and large areas. |
| primary_contrast | string | The lightest shade, used for primary text or elements on dark backgrounds. |
| secondary_main | string | The main secondary color, a light gray for secondary elements. |
| secondary_dark | string | A darker shade of the secondary color for differentiation and depth. |
| secondary_light | string | A lighter shade of the secondary color for subtle backgrounds. |
| secondary_contrast | string | A contrasting shade for secondary elements on dark backgrounds. |
| slate_primary_50 | string | The lightest slate shade, often used for backgrounds or large areas. |
| slate_primary_100 | string | A very light slate shade for subtle differentiation. |
| slate_primary_200 | string | A light slate shade for backgrounds and UI elements. |
| slate_primary_300 | string | A medium light slate shade for secondary text and borders. |
| slate_primary_400 | string | A medium slate shade for icons and passive elements. |
| slate_primary_500 | string | A standard slate color for text and active elements. |
| slate_primary_600 | string | A medium dark slate shade for emphasis and depth. |
| slate_primary_700 | string | A dark slate shade for strong emphasis and contrast. |
| slate_primary_800 | string | A very dark slate for high contrast elements and text. |
| slate_primary_900 | string | The darkest slate shade, used sparingly for utmost contrast. |
| neutral_50 | string | The lightest neutral, almost white, for backgrounds and UI elements. |
| neutral_100 | string | A very light gray for background and layout. |
| neutral_200 | string | A light neutral gray for UI elements and borders. |
| neutral_300 | string | A mid-light gray for differentiation and layering. |
| neutral_400 | string | A medium gray for placeholder text and inactive elements. |
| neutral_500 | string | A standard gray for neutral text and icons. |
| neutral_600 | string | A medium dark gray for important text and active elements. |
| neutral_700 | string | A dark gray for emphasis and strong contrast. |
| neutral_800 | string | A very dark gray for high contrast elements and text. |
| neutral_900 | string | The darkest gray, used sparingly for utmost contrast and emphasis. |
| gray_secondary_50 | string | The lightest gray secondary, for subtle backgrounds and large areas. |
| gray_secondary_100 | string | A very light gray secondary for layout and differentiation. |
| gray_secondary_200 | string | A light gray secondary for UI elements and borders. |
| gray_secondary_300 | string | A mid-light gray secondary for secondary text and icons. |
| gray_secondary_400 | string | A medium gray secondary for inactive elements and placeholders. |
| gray_secondary_500 | string | A standard gray secondary for text and active UI elements. |
| gray_secondary_600 | string | A medium dark gray secondary for emphasis and depth. |
| gray_secondary_700 | string | A dark gray secondary for strong emphasis and contrast. |
| gray_secondary_800 | string | A very dark gray secondary for high contrast elements and text. |
| gray_secondary_900 | string | The darkest gray secondary, used sparingly for utmost contrast. |
| stone_info_50 | string | The lightest stone shade, often used for informational backgrounds. |
| stone_info_100 | string | A very light stone shade for subtle differentiation in informational elements. |
| stone_info_200 | string | A light stone shade for informational UI elements and borders. |
| stone_info_300 | string | A medium light stone shade for secondary informational text and icons. |
| stone_info_400 | string | A medium stone shade for informational icons and passive elements. |
| stone_info_500 | string | A standard stone color for informational text and active elements. |
| stone_info_600 | string | A medium dark stone shade for emphasis in informational elements. |
| stone_info_700 | string | A dark stone shade for strong emphasis and contrast in informational elements. |
| stone_info_800 | string | A very dark stone for high contrast informational text and elements. |
| stone_info_900 | string | The darkest stone shade, used sparingly for utmost contrast in informational elements. |
| red_error_50 | string | The lightest error red, often used for background highlights of error states. |
| red_error_100 | string | A very light error red for subtle error highlights and backgrounds. |
| red_error_200 | string | A light error red for error backgrounds and UI elements. |
| red_error_300 | string | A medium light error red for error messages and icons. |
| red_error_400 | string | A medium error red for buttons and active error elements. |
| red_error_500 | string | A standard error red for important error texts and critical elements. |
| red_error_600 | string | A medium dark error red for emphasis and strong error indicators. |
| red_error_700 | string | A dark error red for high emphasis and contrast in error states. |
| red_error_800 | string | A very dark error red for utmost contrast in critical error messages. |
| red_error_900 | string | The darkest error red, used sparingly for extreme emphasis in error states. |
| yellow_warning_50 | string | The lightest warning yellow, for background highlights of warning states. |
| yellow_warning_100 | string | A very light warning yellow for subtle warning highlights and backgrounds. |
| yellow_warning_200 | string | A light warning yellow for warning backgrounds and UI elements. |
| yellow_warning_300 | string | A medium light warning yellow for warning messages and icons. |
| yellow_warning_400 | string | A medium warning yellow for buttons and active warning elements. |
| yellow_warning_500 | string | A standard warning yellow for important warning texts and critical elements. |
| yellow_warning_600 | string | A medium dark warning yellow for emphasis and strong warning indicators. |
| yellow_warning_700 | string | A dark warning yellow for high emphasis and contrast in warning states. |
| yellow_warning_800 | string | A very dark warning yellow for utmost contrast in critical warning messages. |
| yellow_warning_900 | string | The darkest warning yellow, used sparingly for extreme emphasis in warning states. |
| green_success_50 | string | The lightest success green, often used for background highlights of success states. |
| green_success_100 | string | A very light success green for subtle success highlights and backgrounds. |
| green_success_200 | string | A light success green for success backgrounds and UI elements. |
| green_success_300 | string | A medium light success green for success messages and icons. |
| green_success_400 | string | A medium success green for buttons and active success elements. |
| green_success_500 | string | A standard success green for important success texts and critical elements. |
| green_success_600 | string | A medium dark success green for emphasis and strong success indicators. |
| green_success_700 | string | A dark success green for high emphasis and contrast in success states. |
| green_success_800 | string | A very dark success green for utmost contrast in critical success messages. |
| green_success_900 | string | The darkest success green, used sparingly for extreme emphasis in success states. |