You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/colors.md
+1-99Lines changed: 1 addition & 99 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,102 +6,4 @@ The color CSS data-type represents a color in the sRGB color space. Colors can b
6
6
7
7
<doc-colors></doc-colors>
8
8
9
-
Just like other colors like `#7A4ACF`, `hsl(120,90%,45%)`, `rgba(120,255,176)`, these named colors can be used anywhere in your styles where a color value is expected.
10
-
11
-
## Color Theming
12
-
13
-
Imba already contains color keywords, but you may also create aliases for color keywords, make your own keywords, or redefine the default keywords to new color values.
14
-
15
-
### Create config file
16
-
17
-
Create an `imbaconfig.json` at the root of your imba project. Right next to your package.json and readme.md files.
18
-
19
-
```json
20
-
{
21
-
"theme": {
22
-
"colors": {
23
-
}
24
-
}
25
-
}
26
-
```
27
-
28
-
> Any changes made to the imbaconfig.json file will require you to restart your localhost server to take effect.
29
-
30
-
### Aliasing colors
31
-
32
-
We can create an alias for the `indigo` color called `primary` in this way.
33
-
34
-
```json
35
-
{
36
-
"theme": {
37
-
"colors": {
38
-
"primary": "indigo"
39
-
}
40
-
}
41
-
}
42
-
```
43
-
44
-
Now we can use `primary` instead of `indigo` to set the indigo color.
45
-
46
-
```imba
47
-
<h1[c:primary4]> "hello world!"
48
-
```
49
-
50
-
We can also override default color keywords. We can make `gray` an alias for `warmer` instead of the default gray colors.
51
-
52
-
```json
53
-
{
54
-
"theme": {
55
-
"colors": {
56
-
"gray": "warmer"
57
-
}
58
-
}
59
-
}
60
-
```
61
-
62
-
### Defining custom colors
63
-
64
-
We can create our own color keywords with specified tint values.
65
-
66
-
```json
67
-
{
68
-
"theme": {
69
-
"colors": {
70
-
"coral": {
71
-
"0": "hsl(40,33%,98%)",
72
-
"1": "hsl(28,61%,94%)",
73
-
"2": "hsl(12,62%,88%)",
74
-
"3": "hsl(10,54%,76%)",
75
-
"4": "hsl(6,56%,65%)",
76
-
"5": "hsl(5,49%,54%)",
77
-
"6": "hsl(4,49%,44%)",
78
-
"7": "hsl(4,50%,34%)",
79
-
"8": "hsl(4,50%,24%)",
80
-
"9": "hsl(6,52%,15%)"
81
-
}
82
-
}
83
-
}
84
-
}
85
-
```
86
-
87
-
We will then be able to use our own color keyword as we would use the default color keywords.
88
-
89
-
```imba
90
-
<h1[c:coral7/70]> "hello world!"
91
-
```
92
-
93
-
Any unspecified tint will be interpolated automatically. So the configuration below will produce a similar result.
94
-
95
-
```json
96
-
{
97
-
"theme": {
98
-
"colors": {
99
-
"coral": {
100
-
"0": "hsl(40,33%,98%)",
101
-
"4": "hsl(6,56%,65%)",
102
-
"9": "hsl(6,52%,15%)"
103
-
}
104
-
}
105
-
}
106
-
}
107
-
```
9
+
Just like other colors like `#7A4ACF`, `hsl(120,90%,45%)`, `rgba(120,255,176)`, these named colors can be used anywhere in your styles where a color value is expected.
Imba supports all regular css properties. For a full reference on all css properties we recommend visiting the MDN docs. There are some custom properties and shorthands added in Imba that are very valuable. There are also a configurable design system (inpsired by Tailwind) built in. Among other things, this features non-standard values for [box-shadow](css), [border-radius](css), [transition-timing-function](css), as well as [color](css) palettes. The custom [hue](css) property is especially useful..
3
+
Imba supports all regular css properties. For a full reference on all css properties we recommend visiting the MDN docs. There are some custom properties and shorthands added in Imba that are very valuable. There are also a configurable design system (inpsired by Tailwind) built in. Among other things, this features non-standard values for [display](css), [box-shadow](css), [border-radius](css), [transition-timing-function](css), as well as [color](css) palettes. The custom [hue](css) property is especially useful..
Copy file name to clipboardExpand all lines: content/reference.md
+37-2Lines changed: 37 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,19 @@ The global `imba` object contains functions, constants and classes that are incl
30
30
31
31
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
32
32
33
-
Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification.
33
+
In addition to the regular display values, Imba defines a bunch of shorthands for common layouts. For flexboxes you
34
+
can quickly declare most flex-layouts using a three-letter alias, where the first letter denotes [v]ertical or [h]orizontal. The second character denotes the vertical aligment, and the third character denotes the horizontal alignment.
0 commit comments