Designtokens
Designtokens representerar de grundläggande byggstenarna som utgör ett designsystems visuella stil. Tokens är oberoende av plattform och kan användas utanför komponentbiblioteket. Använd alltid tokens istället för hårdkodade värden.
npm install @midas-ds/theme
Använd som variabler genom att importera temafilen
import { theme } from '@midas-ds/theme'
const blue = theme.baseColors.blue150; // #143c50
Nedan finner du tabeller över alla värden som finns som tokens i theme
Om du inte vill importera hela theme kan du importera delarna för sig
import { baseColors } from '@midas-ds/theme'
const blue = baseColors.blue150; // #143c50
baseColors
| Name | Value | |
|---|---|---|
| white | #ffffff | |
| black | #000000 | |
| gray10 | #f2f2f2 | |
| gray20 | #e6e6e6 | |
| gray30 | #d9d9d9 | |
| gray40 | #cccccc | |
| gray50 | #bfbfbf | |
| gray60 | #b3b3b3 | |
| gray70 | #a6a6a6 | |
| gray80 | #999999 | |
| gray90 | #8c8c8c | |
| gray100 | #808080 | |
| gray130 | #5d5d5d | |
| gray150 | #1f1f1f | |
| red10 | #f7e9e7 | |
| red20 | #f1d4d1 | |
| red30 | #e9beba | |
| red40 | #e2a8a4 | |
| red50 | #d9918e | |
| red60 | #d37a7a | |
| red70 | #cc6467 | |
| red80 | #c54c56 | |
| red90 | #be3345 | |
| red100 | #b90835 | |
| red130 | #8b1327 | |
| red150 | #641018 | |
| blue10 | #eaf2f6 | |
| blue20 | #d5e5ed | |
| blue30 | #c0d7e4 | |
| blue40 | #abcbdb | |
| blue50 | #94bcd1 | |
| blue60 | #82b0c9 | |
| blue70 | #6ca3c0 | |
| blue80 | #5897b8 | |
| blue90 | #4289ad | |
| blue100 | #2e7ca5 | |
| blue130 | #25607f | |
| blue150 | #143c50 |
buttonColors
| Name | Value | |
|---|---|---|
| outline | #303030 | |
| primaryBackground | #143c50 | |
| primaryText | #303030 | |
| primaryHover | #25607f | |
| primaryFocus | #000000 | |
| primaryActive | #4289ae | |
| secondaryBackground | #5d5d5d | |
| secondaryText | #ffffff | |
| secondaryHover | #303030 | |
| secondaryActive | #303030 |
inputColor
| Name | Value | |
|---|---|---|
| inputText | #1f1f1f |
midasColors
| Name | Value | |
|---|---|---|
| logoPrimary | #b90835 | |
| logoSecondary | #ffffff | |
| textPrimary | #1f1f1f | |
| textSecondary | #ffffff | |
| textTertiary | #b90835 | |
| link | #25607f | |
| linkVisited | #663366 | |
| backgroundPrimary | #ffffff | |
| backgroundSecondary | #f2f2f2 | |
| backgroundFooter1 | #b90835 | |
| backgroundFooter2 | #8b1327 | |
| backgroundInfo | #eaf2f6 | |
| backgroundImportant | #fff8e1 | |
| borderPrimary | #000000 | |
| borderSecondary | #b3b3b3 | |
| borderFocusOuter | #000000 | |
| borderFocusInner | #ffffff | |
| iconPrimary | #000000 | |
| iconInverted | #ffffff |
signalColors
| Name | Value | |
|---|---|---|
| signalGreen10 | #d5f2d9 | |
| signalGreen100 | #008d3c | |
| signalBlue10 | #eaf2f6 | |
| signalBlue100 | #0066cc | |
| signalYellow10 | #fff8e1 | |
| signalYellow100 | #f1c21b | |
| signalRed10 | #ffdfdf | |
| signalRed100 | #e62323 | |
| signalRed130 | #b31b1b | |
| signalRed150 | #801313 |
accessibility
| Name | Value | |
|---|---|---|
| forcedColorsMode | (forced-colors: active) | |
| prefersReducedMotion | (prefers-reduced-motion: reduced) |
borderRadius
| Name | Value | |
|---|---|---|
| sRadius | 0.125rem | |
| mRadius | 0.25rem |
borderWidths
| Name | Value | |
|---|---|---|
| xsWidth | 0.0625rem | |
| sWidth | 0.125rem | |
| mWidth | 0.25rem |
boxShadow
| Name | Value | |
|---|---|---|
| focus | 0 0 0 2px white, 0 0 0 4px black |
breakpoints
| Name | Value | |
|---|---|---|
| smBreakpoint | (max-width: 767px) | |
| mdBreakpoint | (min-width: 768px) | |
| lgBreakpoint | (min-width: 1200px) | |
| xlBreakpoint | (min-width: 1440px) |
font
| Name | Value | |
|---|---|---|
| display | "Inter", sans-serif |
fontSizes
| Name | Value | |
|---|---|---|
| desktopSize | 1rem | |
| mobileSize | 1rem | |
| largeSize | 1.5rem | |
| inputNormalSize | 0.875rem | |
| inputMessageSize | 0.75rem | |
| inputLabelSize | 1rem | |
| inputDescriptionSize | 0.875rem |
fontWeights
| Name | Value | |
|---|---|---|
| lightWeight | 300 | |
| regularWeight | 400 | |
| mediumWeight | 500 | |
| semiBoldWeight | 600 | |
| boldWeight | 700 | |
| blackWeight | 900 |
midasTransitions
| Name | Value | |
|---|---|---|
| slowTransition | 500ms | |
| normalTransition | 300ms | |
| fastTransition | 250ms |