forked from rriepe/flamingo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
flamingo.less
86 lines (60 loc) · 4.01 KB
/
flamingo.less
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//// SchemeLESS overrides
@seed-color:#d94e96; // change this to your desired base color
//@l-factor:56%; // used for "L" in HSL color creation, ensures readability
@l-factor:(@luma + (56*3))/4; // used for "L" in HSL color creation, ensures readability
//// Semantic colors
@brand-primary: @color1; // "primary" means nothing, so we use user-supplied @color1 (@seed-color) here
@success-color: #62c462; // a reassuring green
@danger-color: #ee5f5b; // an alarming red
@info-color: #5bc0de; // a non-commital light blue
@warning-color: #f89406; // a slightly less alarming orange
//// Grays
// Flavor bootstrap grays just a tiny bit with @color1
@gray-mix:99%; // how much to mix in the originals
@gray-mix-color:desaturate(@color1,50%); // effectively makes above 99.5%
//// Bootstrap helper colors
// Not really compatible with schemeLESS's relative color design principles
// Included and schemified anyway in case you're using them
@blue: hsl(hue(#049cdb),@sat,@l-factor);
@blueDark: hsl(hue(#0064cd),@sat,@l-factor);
@green: hsl(hue(#46a546),@sat,@l-factor);
@red: hsl(hue(#9d261d),@sat,@l-factor);
@yellow: hsl(hue(#ffc40d),@sat,@l-factor);
@orange: hsl(hue(#f89406),@sat,@l-factor);
@pink: hsl(hue(#c3325f),@sat,@l-factor);
@purple: hsl(hue(#7a43b6),@sat,@l-factor);
//// Links
@linkColor: hsl(hue(@brand-primary),(@sat + 50)/2,@l-factor - 15);
@linkColorHover: darken(@linkColor, 15%);
//// Button color overrides
// @brand-primary (@color1)
@btnPrimaryBackground: hsl(hue(@brand-primary),@sat,@l-factor);
@btnPrimaryBackgroundHighlight: hsl(hue(@brand-primary),@sat,@l-factor - 15);
// @info-color
@btnInfoBackground: hsl(hue(@info-color),@sat,@l-factor);
@btnInfoBackgroundHighlight: hsl(hue(@info-color),@sat,@l-factor - 15);
// @success-color with partially preserved saturation
@btnSuccessBackground: hsl(hue(@success-color),(saturation(@success-color) + @sat)/2,@l-factor);
@btnSuccessBackgroundHighlight: hsl(hue(@success-color),(saturation(@success-color) + @sat)/2,@l-factor - 15);
// @warning-color with partially preserved and bumped up saturation
@btnWarningBackground: hsl(hue(@warning-color),(saturation(@warning-color) + @sat + 16)/2,@l-factor);
@btnWarningBackgroundHighlight: hsl(hue(@warning-color),(saturation(@warning-color) + @sat + 16)/2,@l-factor - 15);
// @danger-color with partially preserved saturation
@btnDangerBackground: hsl(hue(@danger-color),(saturation(@danger-color) + @sat)/2,@l-factor);
@btnDangerBackgroundHighlight: hsl(hue(@danger-color),(saturation(@danger-color) + @sat)/2,@l-factor - 15);
// inverse button with a hint of @color1
@btnInverseBackground: hsl(hue(@color1),6%,@l-factor - 20);
@btnInverseBackgroundHighlight: hsl(hue(@color1),6%,@l-factor - 35);
//// Form states and alerts
@warningText: hsl(hue(@warning-color),(saturation(@warning-color) + @sat)/2,(luma(@warning-color) + 0)/2);
@warningBackground: hsl(hue(@warning-color),@sat + 10,(@l-factor + 120)/2);
@warningBorder: darken(@warningBackground, 3%);
@errorText: hsl(hue(@danger-color),(saturation(@danger-color) + @sat)/2,(luma(@success-color) + 0)/2);
@errorBackground: hsl(hue(@danger-color),@sat,(@l-factor + 120)/2);
@errorBorder: darken(@errorBackground, 3%);
@successText: hsl(hue(@success-color),(saturation(@success-color) + @sat)/2,(luma(@success-color) + 0)/2);
@successBackground: hsl(hue(@success-color),@sat,(luma(@success-color) + 100)/2);
@successBorder: darken(@successBackground, 3%);
@infoText: hsl(hue(@info-color),(saturation(@info-color) + @sat)/2,(luma(@success-color) + 0)/2);
@infoBackground: hsl(hue(@info-color),@sat,(@l-factor + 120)/2);
@infoBorder: darken(@infoBackground, 3%);