Configuration File
Customize your Vue.js 3 Design System with Inkline's configuration file. Easily adjust colors, typography, spacing, and more.
The @inkline/config package generates a comprehensive set of CSS Variables with sensible defaults. With the inkline.config.ts theme configuration file, you can easily customize various aspects of your Design System.
Default Configuration
The configuration provides sensible, overridable, interdependent defaults that work well in any Design System. Inkline's default Design Tokens are generated using the following configuration:
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
animation: {
duration: '300ms',
timingFunction: 'ease'
},
boxShadow: {
offsetX: '0',
offsetY: '0.5rem',
blurRadius: '1rem',
spreadRadius: '-0.75rem',
color: 'rgba(0, 0, 0, 0.15)'
},
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
'2xl': 1400
},
color: {
red: '#f2413d',
orange: '#f98e5a',
yellow: '#ffda77',
green: '#2fb079',
teal: '#48b4a9',
blue: '#178bb2',
purple: '#8268ae',
pink: '#fc778a',
white: '#ffffff',
light: 'var(--color-gray-100)',
gray: '#8e9fa4',
dark: 'var(--color-gray-800)',
black: '#000000',
primary: '<% theme.color.blue %>',
secondary: '<% theme.color.purple %>',
info: '<% theme.color.teal %>',
success: '<% theme.color.green %>',
warning: '<% theme.color.yellow %>',
danger: '<% theme.color.red %>'
},
margin: '1rem',
padding: '1rem',
border: '1px solid var(--color-gray-200)',
borderRadius: '4px',
scaleRatio: {
minorSecond: 1.067,
majorSecond: 1.125,
minorThird: 1.2,
majorThird: 1.25,
perfectFourth: 1.333,
augmentedFourth: 1.414,
perfectFifth: 1.5,
golden: 1.618,
primary: 'var(--scale-ratio-minor-third)'
},
size: {
multiplier: 1,
percentages: {
'0': '0%',
'25': '25%',
'50': '50%',
'75': '75%',
'100': '100%'
}
},
typography: {
fontFamily: {
primary: {
base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
monospace:
"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
print: "'Georgia', 'Times New Roman', 'Times', serif"
},
secondary: {
base: 'var(--font-family-primary-base)',
monospace: 'var(--font-family-primary-monospace)',
print: 'var(--font-family-primary-print)'
}
},
fontWeight: {
extralight: 200,
light: 300,
normal: 'normal',
semibold: 600,
bold: 'bold',
black: 900,
lighter: 'lighter',
bolder: 'bolder'
},
fontSize: '1rem',
lineHeight: 1.5,
letterSpacing: 0,
color: {
dark: 'var(--color-dark)',
weak: 'var(--color-gray-700)',
weaker: 'var(--color-gray-500)',
weakest: 'var(--color-gray-300)',
light: 'var(--color-light)'
},
contrastColor: {
light: 'var(--color-gray-900)',
dark: 'var(--color-white)'
}
},
elements: {
code: {
color: 'var(--color-red)',
background: 'var(--color-gray-50)'
},
body: {
background: 'var(--color-white)',
color: 'var(--color-gray-900)'
},
grid: {
columns: 12,
gutter: '28px',
xs: {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-xs))',
width: '100%'
},
sm: {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-sm))',
width: 'calc(var(--breakpoint-sm) - var(--grid--sm--gutter))'
},
md: {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-md))',
width: 'calc(var(--breakpoint-md) - var(--grid--md--gutter))'
},
lg: {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-lg))',
width: 'calc(var(--breakpoint-lg) - var(--grid--lg--gutter))'
},
xl: {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-xl))',
width: 'calc(var(--breakpoint-xl) - var(--grid--xl--gutter))'
},
'2xl': {
gutter: 'calc(var(--grid--gutter) * var(--size-multiplier-2xl))',
width: 'calc(var(--breakpoint-2xl) - var(--grid--2xl--gutter))'
}
},
d1: {
fontSize:
'calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5))'
},
d2: {
fontSize:
'calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4))'
},
d3: {
fontSize:
'calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3))'
},
d4: {
fontSize:
'calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2))'
},
d5: {
fontSize:
'calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1))'
},
d6: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-5))'
},
h1: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-5))'
},
h2: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-4))'
},
h3: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-3))'
},
h4: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-2))'
},
h5: {
fontSize: 'calc(var(--font-size) * var(--scale-ratio-pow-1))'
},
h6: {
fontSize: 'var(--font-size)'
}
},
variants: {
borderRadius: {
xs: {
multiply: 'var(--size-multiplier-xs)'
},
sm: {
multiply: 'var(--size-multiplier-sm)'
},
md: {
multiply: 'var(--size-multiplier-md)'
},
lg: {
multiply: 'var(--size-multiplier-lg)'
},
xl: {
multiply: 'var(--size-multiplier-xl)'
}
},
color: {
primary: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
secondary: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
info: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
success: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
warning: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
danger: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
gray: {
'50': {
lightness: 95
},
'100': {
lightness: 90
},
'200': {
lightness: 80
},
'300': {
lightness: 70
},
'400': {
lightness: 60
},
'500': {
lightness: 50
},
'600': {
lightness: 40
},
'700': {
lightness: 30
},
'800': {
lightness: 20
},
'900': {
lightness: 10
},
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
light: {
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
},
dark: {
'shade-150': {
darken: 15
},
'shade-100': {
darken: 10
},
'shade-50': {
darken: 5
},
'tint-50': {
lighten: 5
},
'tint-100': {
lighten: 10
},
'tint-150': {
lighten: 15
}
}
},
margin: {
'2': {
multiply: 2
},
'3': {
multiply: 3
},
'4': {
multiply: 4
},
'5': {
multiply: 5
},
xs: {
multiply: 'var(--size-multiplier-xs)'
},
sm: {
multiply: 'var(--size-multiplier-sm)'
},
md: {
multiply: 'var(--size-multiplier-md)'
},
lg: {
multiply: 'var(--size-multiplier-lg)'
},
xl: {
multiply: 'var(--size-multiplier-xl)'
},
'1-5': {
divide: 5
},
'1-4': {
divide: 4
},
'3-4': {
divide: 4,
multiply: 3
},
'1-3': {
divide: 3
},
'2-3': {
divide: 3,
multiply: 2
},
'1-2': {
divide: 2
}
},
padding: {
'2': {
multiply: 2
},
'3': {
multiply: 3
},
'4': {
multiply: 4
},
'5': {
multiply: 5
},
xs: {
multiply: 'var(--size-multiplier-xs)'
},
sm: {
multiply: 'var(--size-multiplier-sm)'
},
md: {
multiply: 'var(--size-multiplier-md)'
},
lg: {
multiply: 'var(--size-multiplier-lg)'
},
xl: {
multiply: 'var(--size-multiplier-xl)'
},
'1-5': {
divide: 5
},
'1-4': {
divide: 4
},
'3-4': {
divide: 4,
multiply: 3
},
'1-3': {
divide: 3
},
'2-3': {
divide: 3,
multiply: 2
},
'1-2': {
divide: 2
}
},
size: {
multiplier: {
'2xs': {
divide: 'var(--scale-ratio-pow-3)'
},
xs: {
divide: 'var(--scale-ratio-pow-2)'
},
sm: {
divide: 'var(--scale-ratio-pow-1)'
},
md: {},
lg: {
multiply: 'var(--scale-ratio-pow-1)'
},
xl: {
multiply: 'var(--scale-ratio-pow-2)'
},
'2xl': {
multiply: 'var(--scale-ratio-pow-3)'
}
}
},
typography: {
fontSize: {
xs: {
multiply: 'var(--size-multiplier-xs)'
},
sm: {
multiply: 'var(--size-multiplier-sm)'
},
md: {
multiply: 'var(--size-multiplier-md)'
},
lg: {
multiply: 'var(--size-multiplier-lg)'
},
xl: {
multiply: 'var(--size-multiplier-xl)'
}
}
}
}
},
dark: {
border: {
color: 'var(--color-gray-700)'
},
typography: {
color: {
weak: 'var(--color-gray-300)',
weaker: 'var(--color-gray-500)',
weakest: 'var(--color-gray-700)'
}
},
elements: {
code: {
color: 'var(--color-red)',
background: 'var(--color-gray-900)'
},
body: {
background: 'var(--color-dark-shade-50)',
color: 'var(--color-gray-100)'
}
}
}
}
});theme
theme[name]
The config supports multiple themes.
- The
defaulttheme variables will be generated directly in the:rootof your page - Other themes are defined under a
.${themeName}-themeclass, e.g..dark-theme
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
color: {
primary: '#178ab0'
}
},
dark: {
color: {
primary: '#56aecc'
}
}
}
});animation
theme[name].animation
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
animation: {
duration: '300ms',
timingFunction: 'ease'
}
}
}
});border
theme[name].border
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
border: '1px solid #c4cdd0'
}
}
});Border sides can also be specified individually as strings or objects.
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
border: {
top: {
width: '1px',
style: 'solid',
color: '#c4cdd0'
},
right: '1px solid #c4cdd0',
bottom: '1px solid #c4cdd0',
left: '1px solid #c4cdd0'
}
}
}
});borderRadius
theme[name].borderRadius
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
borderRadius: '4px'
}
}
});Border radius corners can also be specified individually, or as an array of values.
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
borderRadius: {
topLeft: '4px',
topRight: '4px',
bottomRight: '4px',
bottomLeft: '4px',
}
}
}
});boxShadow
theme[name].boxShadow
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
boxShadow: {
offsetX: '0',
offsetY: '0.5rem',
blurRadius: '1rem',
spreadRadius: '-0.75rem',
color: 'rgba(0, 0, 0, 0.15)'
}
}
}
});breakpoints
theme[name].breakpoints
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
'2xl': 1400
}
}
}
});color
theme[name].color
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
color: {
gray: '#8e9fa4',
dark: 'var(--color-gray)',
}
}
}
});You can also define colors as HSLA or RGB.
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
color: {
primary: {
h: 86,
s: 175,
l: 205,
a: 1
},
secondary: {
r: 195,
g: 54,
b: 57,
a: 1
},
}
}
}
});margin
theme[name].margin
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
margin: '1rem'
}
}
});Margin sides can also be specified individually, or as an array of values.
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
margin: {
top: '1rem',
right: '1rem',
bottom: '1rem',
left: '1rem'
}
}
}
});padding
theme[name].padding
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
padding: '1rem'
}
}
});Padding sides can also be specified individually, or as an array of values.
inkline.config.ts
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
padding: {
top: '1rem',
right: '1rem',
bottom: '1rem',
left: '1rem'
}
}
}
});scaleRatio
theme[name].scaleRatio
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
scaleRatio: {
minorSecond: 1.067,
majorSecond: 1.125,
minorThird: 1.2,
majorThird: 1.25,
perfectFourth: 1.333,
augmentedFourth: 1.414,
perfectFifth: 1.5,
golden: 1.618,
primary: 'var(--scale-ratio-minor-third)'
}
}
}
});size
theme[name].size
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
size: {
multiplier: 1,
percentages: {
0: '0%',
25: '25%',
50: '50%',
75: '75%',
100: '100%'
}
}
}
}
});typography
theme[name].typography
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
typography: {
fontFamily: {
primary: {
base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
monospace:
"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
print: "'Georgia', 'Times New Roman', 'Times', serif"
},
secondary: {
base: 'var(--font-family-primary-base)',
monospace: 'var(--font-family-primary-monospace)',
print: 'var(--font-family-primary-print)'
}
},
fontWeight: {
extralight: 200,
light: 300,
normal: 'normal',
semibold: 600,
bold: 'bold',
black: 900,
lighter: 'lighter',
bolder: 'bolder'
},
fontSize: '1rem',
lineHeight: 1.5,
letterSpacing: 0,
color: {
dark: 'var(--color-gray-900)',
muted: 'var(--color-gray-600)',
light: 'var(--color-gray-100)'
},
contrastColor: {
light: 'var(--color-gray-900)',
dark: 'var(--color-white)'
}
}
}
}
});elements
theme[name].elements
The elements property provides a way to add generic element-specific variables. Each nested key inside of elements will be concatenated to the variable name using a -- (double dash), unless it's part of a known CSS property (i.e. body.margin.top -> body--margin-top).
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
elements: {
body: {
background: 'var(--color-white)',
color: 'var(--color-gray-900)'
},
grid: {
columns: 12,
gutter: '28px'
}
}
}
}
});variants
theme[name].variants
Variants provide a way to apply modifiers to generate multiple variable versions based on the initial base value.
inkline.config.ts
Output
import { defineConfig } from '@inkline/config';
export default defineConfig({
theme: {
default: {
variants: {
color: {
primary: {
'shade-50': { darken: 5 },
'tint-50': { lighten: 5 }
}
},
margin: {
'1-2': { divide: 2 },
2: { multiply: 2 }
}
}
}
}
});Color type values accept the following variant modifiers:
hueorhsaturationorslightnessorlalphaoralightendarkensaturatedesaturategrayscalefadeopaquerrotate
Number type values accept the following variant modifiers:
multiplydivideaddsubtract