DS Solaris
Solaris Colors
This is a work in progress.
You should absolutely improve it if you have the necessary information.
Color stacks
Color
Color stack
Gray
$gray-900
$gray-800
$gray-700
$gray-600
$gray-500
$gray-400
$gray-300
$gray-200
$gray-100
Red
$red-900
$red-800
$red-700
$red-600
$red-500
$red-400
$red-300
$red-200
$red-100
Orange
$orange-900
$orange-800
$orange-700
$orange-600
$orange-500
$orange-400
$orange-300
$orange-200
$orange-100
Yellow
$yellow-900
$yellow-800
$yellow-700
$yellow-600
$yellow-500
$yellow-400
$yellow-300
$yellow-200
$yellow-100
Green
$green-900
$green-800
$green-700
$green-600
$green-500
$green-400
$green-300
$green-200
$green-100
Blue
$blue-900
$blue-800
$blue-700
$blue-600
$blue-500
$blue-400
$blue-300
$blue-200
$blue-100
Pink
$pink-900
$pink-800
$pink-700
$pink-600
$pink-500
$pink-400
$pink-300
$pink-200
$pink-100
Common variables
Brand
$brand_content: $blue-500;
$brand_border-action: $yellow-500;
$primary-brand: $yellow-500;
$secondary-brand: $blue-500;
$error-dark: $red-700;
$error: $red-500;
$error-light: $red-100;
$warning-dark: $orange-700;
$warning: $orange-500;
$warning-light: $orange-400;
$success-dark: $green-700;
$success: $green-500;
$success-light: $green-100;
Range Datepicker
Variant
Label inside
Label outside
Default
Label
Ceci est un message à caractère informatif.
Ceci est un message à caractère informatif.
Label
Ceci est un message à caractère informatif.
C'était vraiment très intéressant.
Error
Label
Le champ est requis.
Label
Le champ est requis.
Warning
Label
Le champ est requis.
Label
Le champ est requis.
Disabeld
Read-only
Label
Ceci est un message à caractère informatif.
Lun
Mar
Mer
Jeu
Ven
Sam
Dim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Lun
Mar
Mer
Jeu
Ven
Sam
Dim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Selects
There is no placeholder because each projects have to integrate it dynamically (he's present in the code)
Textarea
Your label
Your label
Typeahead
TypeAhead
Le champ est requis
TypeAhead
This is an info message
Other components
Notifications AlertBox
Default
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Closable
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Collapsible Closed
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Collapsible open
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
fringilla
sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
sollicitudin.
Popover
Tiles
Selectable Single
Horizontal
Default
Label badge
Price
Selected
Label badge
Price
Disabled
Label badge
Price
Vertical
Default
Label badge
Price
Selected
Label badge
Price
Disabled
Label badge
Price
