Colors Usage
Within Shimoku you can use the different style tokens for components such as charts or html. This allows consistency to be maintained and makes it easy for Theme changes to be uncomplicated.
From the theming json you can change the hexes to adapt them to your color palette.
DO NOT MODIFY the Variable name
Use the variable name within your graphics or html for consistency.
To easily modify the styles change the HEX color of the variable. Check that the affected components are displayed correctly as you want.
For ease of use an enumerator can be used where all these names are already defined, you can import it from the library like this:
Main palette
Color primary
#002FD8
var(--color-primary)
Color primary light
#B8C7F9
var(--color-primary-light)
Color primary dark
#0315B9
var(--color-primary-dark)
Color secondary
#29D86F
var(--color-secondary)
Color secondary light
#C7F0D8
var(--color-secondary-light)
Color secondary dark
#09B85A
var(--color-secondary-dark)
Color success
#2e7d32
var(--color-success)
Color success light
#4caf50
var(--color-success-light)
Color warning
#ed6c02
var(--color-warning)
Color warning light
#ff9800
var(--color-warning-light)
Color error
#d32f2f
var(--color-error)
Color error light
#ef5350
var(--color-error-light)
Color status error
#F76868
var(--color-status-error)
Color white
#FFFFFF
var(--color-white)
Color black
#202A36
var(--color-black)
Color base icon
#202A36
var(--color-base-icon)
Color background-default
#FFFFFF
var(--background-default)
Color Background paper
#FFFFFF
var(--background-paper)
Complementary & Chart series colors
Complementary red
#EE3A4F
var(--complementary-red)
Complementary red light
#F86C7D
var(--complementary-red-light)
Complementary green
#2ED020
var(--complementary-green)
Complementary yellow
#F3B922
var(--complementary-yellow)
Complementary orange
#ED5627
var(--complementary-orange)
Complementary aqua
#20C69E
var(--complementary-aqua)
Complementary violet
#7208B4
var(--complementary-violet)
Chart C1
#4C72F9
var(--chart-C1)
Chart C2
#74D890
var(--chart-C2)
Chart C3
#F2BB67
var(--chart-C3)
Chart C4
#F78A68
var(--chart-C4)
Chart C5
#C6E2E9
var(--chart-C5)
Chart C6
#9BA4F5
var(--chart-C6)
Chart C7
#EAB8CD
var(--chart-C7)
Chart C8
#D28AC7
var(--chart-C8)
Chart C9
#B6AFD0
var(--chart-C9)
Chart C10
#4C5AA4
var(--chart-C10)
Grey
Grey50
#fafafa
var(--color-grey-50)
Grey100
#FAFAFB
var(--color-grey-100)
Grey200
#F1F1F5
var(--color-grey-200)
Grey300
#E2E2EA
var(--color-grey-300)
Grey400
#D5D5DC
var(--color-grey-400)
Grey500
#AEAEAE
var(--color-grey-500)
Grey600
#92929D
var(--color-grey-600)
Grey700
#696974
var(--color-grey-700)
Grey800
#44444F
var(--color-grey-800)
Last updated