LooposUi Colors Documentation

The LooposUi::Colors module manages color selections for various applications in the Loopos UI. The colors are stored in a colors.json file and are categorized by app types, such as "core", "handling", "hubs", etc., and general colors used across all apps.

Usage

To retrieve a color, use the find method, providing the color identifier and an optional app type:

LooposUi::Colors.find("core-800-primary")
LooposUi::Colors.find("general-danger-900-hover")

If no app type is provided, LooposUi.config.app_type is used by default.

Color Configuration

The color configurations are stored in a colors.json file. Each color is organized by app name and can include various properties like opacity5, 900-hover, and 800-primary.

Color Categories

App Colors

Colors are divided by app names and include variations for each, like primary, hover, and various opacities. Here are the main categories for app-specific colors:

• Core
• Handling
• Hubs
• Impact
• Manager
• Submission
• Validation

General Colors

These colors are not app-specific and can be used globally. The general colors include categories such as:

• Danger
• Global
• Gray
• Informative
• Notice
• Success

Color Preview

Each color is represented below with its hex value and a color preview for quick reference.

App Colors

Core Colors

Color Key	Hex Code	Preview
opacity5	#b53c000d
900-hover	#933100
800-primary	#b53c00
400	#e9c5b3
300	#f8ece6
200	#fbf5f2
100	#fdfbfa

Handling Colors

Color Key	Hex Code	Preview
100	#fafafc
200	#edecf3
300	#e8e6f2
400	#bab3d8
800-primary	#331d8b
900-hover	#19007d
opacity5	#19007d0d

Hubs Colors

Color Key	Hex Code	Preview
100	#fafcff
200	#f2f7ff
300	#e6f0ff
400	#cce1ff
800-primary	#0b6ef9
900-hover	#005ee3
opacity5	#0b6ef90d

Impact Colors

Color Key	Hex Code	Preview
100	#f7fcfa
200	#eef5f2
300	#e6f0ec
400	#a6d0c0
800-primary	#40a77f
900-hover	#2d765a
opacity5	#40a77f0d

Manager Colors

Color Key	Hex Code	Preview
100	#fafcfc
200	#f2f7f6
300	#e6f0ef
400	#b3d0cc
800-primary	#006053
900-hover	#00473d
opacity5	#0060530d

Submission Colors

Color Key	Hex Code	Preview
100	#fffdfa
200	#fdf3e6
300	#fae7cc
400	#f9dcb3
800-primary	#e88600
900-hover	#b66900
opacity5	#e886000d

Validation Colors

Color Key	Hex Code	Preview
100	#fafffc
200	#eefff5
300	#e6fff0
400	#ccffe0
800-primary	#1c7e43
900-hover	#006127
opacity5	#1c7e430d

General Colors

Danger Colors

Color Key	Hex Code	Preview
200	#fcf3f3
300	#fae8e9
400	#f9b3b7
800	#c81720
900-hover	#ae171e

Global Colors

Color Key	Hex Code	Preview
black	#212529
black-opacity25	#21252940
white	#ffffff
white-opacity45	#ffffff73

Gray Colors

Color Key	Hex Code	Preview
900	#495057
700	#78818A
500	#C4CAD0
300	#DEE2E6
200	#ECEFF2
100	#F8F9FA

Informative Colors

Color Key	Hex Code	Preview
200	#f2f7fd
300	#e6f1fd
400	#b3d6f9
800	#0172e4

Notice Colors

Color Key	Hex Code	Preview
200	#ffffff
300	#fcf3e9
400	#f9d8b3
800	#df8620

Success Colors

Color Key	Hex Code	Preview
200	#f3f9f5
300	#e9f4ed
400	#b3f9ca
800	#1a883f
900-hover	#0c652a