Skeleton Figma Component Library (v2) theming
Design systems saves design & development time.
Design systems like Skeleton includes already-made building blocks (components) that can
cover 80% of the use cases. If project requires some branding you can theme design system
using your brand colors and typography.
Theming
Skeleton default theme might not fit your brand requirements. But you can custom it.
You should custom it in two places:
Figma customization
In order to custom theme in Figma you should update desing-tokens in Variables section.
Apply branding colors
There are 8 palettes in Skeleton that are applied to all components.
To apply
your branding colors, you should replace the default palette's colors in “1. Primitives”
collection with your own branding colors.
Variants
Variants refer to a set of style properties (examples below).
The "soft" and "ghost" variants require additional adjustments if "1. Primitives"
colors are updated.
Border-radius
There are two types of border-radiuses in Skeleton:
Fonts
To use your fonts you should change all fonts manually in the “Text styles” panel.
Make sure that you unselect everything to see Text styles.
Implementing a New Theme into a Project
To apply a custom theme to your project, you need to provide the developers with a JSON
Theme Source.
It is easy - just replace values in a JSON template with design-token from Variables.
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
export const bohdanTheme: CustomThemeConfig = {
name: 'bohdanTheme',
properties: {
// =~= Theme Properties =~=
'--theme-font-family-base': 'SpaceGrotesk',
'--theme-font-family-heading': 'SpaceGrotesk',
'--theme-font-color-base': '23 23 37',
'--theme-font-color-dark': '255 255 255',
'--theme-rounded-base': '9999px',
'--theme-rounded-container': '8px',
'--theme-border-base': '1px',
// =~= Theme On-X Colors =~=
'--on-primary': '255 255 255',
'--on-secondary': '255 255 255',
'--on-tertiary': '0 0 0',
'--on-success': '0 0 0',
'--on-warning': '0 0 0',
'--on-error': '255 255 255',
'--on-surface': '0 0 0',
// =~= Theme Colors =~=
// primary | #1960d2
'--color-primary-50': '221 231 248', // #dde7f8
'--color-primary-100': '209 223 246', // #d1dff6
'--color-primary-200': '198 215 244', // #c6d7f4
'--color-primary-300': '163 191 237', // #a3bfed
'--color-primary-400': '94 144 224', // #5e90e0
'--color-primary-500': '25 96 210', // #1960d2
'--color-primary-600': '23 86 189', // #1756bd
'--color-primary-700': '19 72 158', // #13489e
'--color-primary-800': '15 58 126', // #0f3a7e
'--color-primary-900': '12 47 103', // #0c2f67
// secondary | #4F46E5
'--color-secondary-50': '229 227 251', // #e5e3fb
'--color-secondary-100': '220 218 250', // #dcdafa
'--color-secondary-200': '211 209 249', // #d3d1f9
'--color-secondary-300': '185 181 245', // #b9b5f5
'--color-secondary-400': '132 126 237', // #847eed
'--color-secondary-500': '79 70 229', // #4F46E5
'--color-secondary-600': '71 63 206', // #473fce
'--color-secondary-700': '59 53 172', // #3b35ac
'--color-secondary-800': '47 42 137', // #2f2a89
'--color-secondary-900': '39 34 112', // #272270
// tertiary | #0EA5E9
'--color-tertiary-50': '219 242 252', // #dbf2fc
'--color-tertiary-100': '207 237 251', // #cfedfb
'--color-tertiary-200': '195 233 250', // #c3e9fa
'--color-tertiary-300': '159 219 246', // #9fdbf6
'--color-tertiary-400': '86 192 240', // #56c0f0
'--color-tertiary-500': '14 165 233', // #0EA5E9
'--color-tertiary-600': '13 149 210', // #0d95d2
'--color-tertiary-700': '11 124 175', // #0b7caf
'--color-tertiary-800': '8 99 140', // #08638c
'--color-tertiary-900': '7 81 114', // #075172
// success | #84cc16
'--color-success-50': '237 247 220', // #edf7dc
'--color-success-100': '230 245 208', // #e6f5d0
'--color-success-200': '224 242 197', // #e0f2c5
'--color-success-300': '206 235 162', // #ceeba2
'--color-success-400': '169 219 92', // #a9db5c
'--color-success-500': '132 204 22', // #84cc16
'--color-success-600': '119 184 20', // #77b814
'--color-success-700': '99 153 17', // #639911
'--color-success-800': '79 122 13', // #4f7a0d
'--color-success-900': '65 100 11', // #41640b
// warning | #EAB308
'--color-warning-50': '252 244 218', // #fcf4da
'--color-warning-100': '251 240 206', // #fbf0ce
'--color-warning-200': '250 236 193', // #faecc1
'--color-warning-300': '247 225 156', // #f7e19c
'--color-warning-400': '240 202 82', // #f0ca52
'--color-warning-500': '234 179 8', // #EAB308
'--color-warning-600': '211 161 7', // #d3a107
'--color-warning-700': '176 134 6', // #b08606
'--color-warning-800': '140 107 5', // #8c6b05
'--color-warning-900': '115 88 4', // #735804
// error | #D41976
'--color-error-50': '249 221 234', // #f9ddea
'--color-error-100': '246 209 228', // #f6d1e4
'--color-error-200': '244 198 221', // #f4c6dd
'--color-error-300': '238 163 200', // #eea3c8
'--color-error-400': '225 94 159', // #e15e9f
'--color-error-500': '212 25 118', // #D41976
'--color-error-600': '191 23 106', // #bf176a
'--color-error-700': '159 19 89', // #9f1359
'--color-error-800': '127 15 71', // #7f0f47
'--color-error-900': '104 12 58', // #680c3a
// surface | #919191
'--color-surface-50': '255 255 255', // #ffffff
'--color-surface-100': '248 248 249', // #F8F8F9
'--color-surface-200': '239 239 240', // #EFEFF0
'--color-surface-300': '230 230 232', // #E6E6E8
'--color-surface-400': '216 216 219', // #D8D8DB
'--color-surface-500': '204 204 210', // #CCCCD2
'--color-surface-600': '190 190 199', // #BEBEC7
'--color-surface-700': '143 143 158', // #8F8F9E
'--color-surface-800': '89 89 105', // #595969
'--color-surface-900': '23 23 37' // #171725
}
};