Configuration
Fluid config file
To start configuring Fluid to your liking, you will need to create a fluid.config.js, or alternatively a fluid.config.mjs file in your project's top-level directory. Within this file you must have a single export, an object with your configuration options. Optionally you can annotate your export with type definitions to have autocomplete suggestions when writing your configuration.
1
2
/** @type {import('@infinityfx/fluid').FluidConfig} */
module.exports = {}
Configure working directories
Fluid will include the necessary styles based on the components you are using in your project. Fluid will look for these components within your project. Which files Fluid will check can be configured using the paths option. Here you can specify an array of glob patterns. Below is the default configuration when the paths option is omitted.
1
2
3
4
5
6
7
8
module.exports = {
paths: [
'./src/**/*.{jsx,tsx}',
'./app/**/*.{jsx,tsx}',
'./pages/**/*.{jsx,tsx}',
'./components/**/*.{jsx,tsx}'
],
}
Theming
Fluid supports customizing color palettes, spacings, radii, fonts and breakpoints. These can all be configured using the theme option. The example below is the default theme fluid comes with, which has all options specified.
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
module.exports = {
theme: {
palettes: {
light: {
primary: ['#22e39f', '#45e6ad', '#60f0bd', '#8cf5d0', '#baf7e2', '#dcfcf1'],
accent: ['#1dddf2'],
grey: ['#e6e6e6', '#cccccc', '#b3b3b3', '#999999', '#808080', '#666666', '#4d4d4d', '#333333', '#191919'],
heading: ['#000'],
text: ['#000', '#fff'],
bg: ['#fff'],
fg: ['#f5fafa', '#e6f0f0'],
error: ['#ff1f1f', '#ff5454', '#ff8c8c', '#ffbdbd']
},
dark: {
primary: ['#1dddf2', '#1ac4d6', '#15a1b0', '#0e838f', '#064f57', '#043136'],
accent: ['#22e39f'],
grey: ['#191919', '#333333', '#4d4d4d', '#666666', '#808080', '#999999', '#b3b3b3', '#cccccc', '#e6e6e6'],
heading: ['fff'],
text: ['#fff', '#000'],
bg: ['#000'],
fg: ['#161717', '#292b2b'],
error: ['#ff1f1f', '#b32727', '#822f2f', '#632c2c']
}
},
defaultColorScheme: 'light',
spacing: {
xxs: '.2rem',
xsm: '.4rem',
sml: '.7rem',
med: '1rem',
lrg: '2rem',
xlg: '4rem',
xxl: '8rem'
},
radius: {
xsm: '3px',
sml: '4px',
med: '8px',
lrg: '12px',
xlg: '16px'
},
font: {
family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue"',
size: {
xxs: '.7rem',
xsm: '.825rem',
sml: '1rem',
med: '1.2rem',
lrg: '1.7rem',
xlg: '2.5rem',
xxl: '4rem'
}
},
breakpoints: {
mob: 480,
tab: 768,
lap: 1024,
dsk: 1280
}
}
}
By default fluid ships with 2 color palettes, light and dark. However, you are free to add any additional color palettes, using a custom name. Keep in mind that you will have to specify all color entries to avoid any missing colors when using your color palette. When customizing your color palettes you can make use of the mixColors utility function Fluid comes with to generate a range of colors.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { mixColors } = require('@infinityfx/fluid/utils');
module.exports = {
theme: {
palettes: {
myPaletteName: {
primary: ['#22e39f', '#45e6ad', '#60f0bd', '#8cf5d0', '#baf7e2', '#dcfcf1'],
/* The mixColors call below generates the same results as the array above */
myColorName: mixColors('#22e39f', '#ffffff', 6),
...
}
}
}
}
Custom icons
Fluid allows you to customize the icons use in various components using icons from NPM-based icon libraries, such as react-icons. You can import the icons you want directly from your config file and these will get bundled automatically during compilation. The configuration below shows all icons that can be customized, as well as the default icon that is used.
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
const { LuArrowDownWideNarrow, LuArrowUpDown, LuArrowUpNarrowWide, LuCheck, LuChevronDown, LuChevronFirst, LuChevronLast, LuChevronLeft, LuChevronRight, LuChevronUp, LuChevronsUpDown, LuCopy, LuEye, LuEyeOff, LuFileUp, LuMinus, LuMoon, LuMoreVertical, LuPanelLeftClose, LuPanelLeftOpen, LuPlus, LuSearch, LuSun, LuX } = require('react-icons/lu');
module.exports = {
icons: {
add: LuPlus,
check: LuCheck,
close: LuX,
collapseUp: LuChevronUp,
collapseSidebar: LuPanelLeftClose,
copy: LuCopy,
dark: LuMoon,
down: LuChevronDown,
expand: LuChevronsUpDown,
expandDown: LuChevronDown,
expandSidebar: LuPanelLeftOpen,
first: LuChevronFirst,
hide: LuEyeOff,
last: LuChevronLast,
left: LuChevronLeft,
light: LuSun,
more: LuMoreVertical,
search: LuSearch,
show: LuEye,
sort: LuArrowUpDown,
sortAscend: LuArrowUpNarrowWide,
sortDescend: LuArrowDownWideNarrow,
up: LuChevronUp,
upload: LuFileUp,
remove: LuMinus,
right: LuChevronRight
}
}