Campus Design System

Appearance

Campus Design System (CDS) Tokens Documentatie ​

Introductie ​

De Campus Design System (CDS) tokens zijn een verzameling ontwerpvariabelen die zorgen voor consistentie in je applicaties. Als onderdeel van het Campus Experience System (CXS) vormen deze tokens de basis van een uniforme ontwerptaal. Ze zijn toegankelijk via het @diekeure/cds-tokens pakket en kunnen worden gebruikt in zowel SCSS als CSS.

Hoe tokens te gebruiken ​

In SCSS ​

Om tokens in SCSS te gebruiken, importeer je het pakket en gebruik je de get functie:

scss
@use '@diekeure/cds-tokens' as cds;

:host {
  animation-duration: cds.get('cds.sys.motion.duration.short-3');
  color: rgb(cds.get('cds.sys.color.primary'));
  padding: cds.get('cds.sys.spacing.m');
}

In CSS ​

Om tokens in CSS te gebruiken, gebruik je de custom property (CSS variabele) syntax:

css
.element {
  animation-duration: var(--cds-sys-motion-duration-short-3);
  color: rgb(var(--cds-sys-color-primary));
  padding: var(--cds-sys-spacing-m);
}

Token Structuur ​

Tokens volgen een gestructureerde naamgevingsconventie die hun doel en gebruik verduidelijkt. Voor een gedetailleerde uitleg over de opbouw van tokens, zie onze Design Tokens documentatie.

Referentie vs Systeem Tokens ​

Er zijn twee hoofdtypen tokens:

  1. Referentie Tokens (cds.ref.*): Dit zijn basiswaarden waarnaar andere tokens verwijzen. Ze kunnen niet direct in componenten worden gebruikt en dienen alleen als basis voor systeemtokens.

  2. Systeem Tokens (cds.sys.*): Dit zijn de tokens die je in je componenten moet gebruiken. Ze bieden semantische betekenis en zorgen voor consistentie in je applicatie.

Kleur tokens ​

TokenFallbackVoorbeeld
cds.sys.color.brandcds.ref.palette.primary.70
cds.sys.color.backgroundcds.ref.palette.neutral.98
cds.sys.color.on-backgroundcds.ref.palette.neutral.10
cds.sys.color.surfacecds.ref.palette.neutral.100
cds.sys.color.on-surfacecds.ref.palette.neutral.10
cds.sys.color.on-surface-variantcds.ref.palette.neutral-variant.40
cds.sys.color.surface-variantcds.ref.palette.neutral-variant.90
cds.sys.color.surface-container-lowestcds.ref.palette.neutral.98
cds.sys.color.surface-container-lowcds.ref.palette.neutral.96
cds.sys.color.surface-containercds.ref.palette.neutral.94
cds.sys.color.surface-container-highcds.ref.palette.neutral.92
cds.sys.color.surface-container-highestcds.ref.palette.neutral.90
cds.sys.color.surface-inversecds.ref.palette.neutral.20
cds.sys.color.on-surface-inversecds.ref.palette.neutral.95
cds.sys.color.primarycds.ref.palette.primary.40
cds.sys.color.on-primarycds.ref.palette.primary.100
cds.sys.color.primary-containercds.ref.palette.primary.90
cds.sys.color.on-primary-containercds.ref.palette.primary.30
cds.sys.color.primary-fixedcds.ref.palette.primary.90
cds.sys.color.on-primary-fixedcds.ref.palette.primary.10
cds.sys.color.primary-fixed-dimcds.ref.palette.primary.80
cds.sys.color.on-primary-fixed-variantcds.ref.palette.primary.30
cds.sys.color.primary-inversecds.ref.palette.primary.80
cds.sys.color.secondarycds.ref.palette.secondary.40
cds.sys.color.on-secondarycds.ref.palette.secondary.100
cds.sys.color.secondary-containercds.ref.palette.secondary.90
cds.sys.color.on-secondary-containercds.ref.palette.secondary.30
cds.sys.color.secondary-fixedcds.ref.palette.secondary.90
cds.sys.color.on-secondary-fixedcds.ref.palette.secondary.10
cds.sys.color.secondary-fixed-dimcds.ref.palette.secondary.80
cds.sys.color.on-secondary-fixed-variantcds.ref.palette.secondary.30
cds.sys.color.tertiarycds.ref.palette.tertiary.40
cds.sys.color.on-tertiarycds.ref.palette.tertiary.100
cds.sys.color.tertiary-containercds.ref.palette.tertiary.90
cds.sys.color.on-tertiary-containercds.ref.palette.tertiary.30
cds.sys.color.tertiary-fixedcds.ref.palette.tertiary.90
cds.sys.color.on-tertiary-fixedcds.ref.palette.tertiary.10
cds.sys.color.tertiary-fixed-dimcds.ref.palette.tertiary.80
cds.sys.color.on-tertiary-fixed-variantcds.ref.palette.tertiary.30
cds.sys.color.errorcds.ref.palette.error.40
cds.sys.color.on-errorcds.ref.palette.error.100
cds.sys.color.error-containercds.ref.palette.error.90
cds.sys.color.on-error-containercds.ref.palette.error.30
cds.sys.color.warncds.ref.palette.warn.40
cds.sys.color.on-warncds.ref.palette.warn.100
cds.sys.color.warn-containercds.ref.palette.warn.90
cds.sys.color.on-warn-containercds.ref.palette.warn.30
cds.sys.color.successcds.ref.palette.success.40
cds.sys.color.on-successcds.ref.palette.success.100
cds.sys.color.success-containercds.ref.palette.success.90
cds.sys.color.on-success-containercds.ref.palette.success.30
cds.sys.color.highlightcds.ref.palette.highlight.40
cds.sys.color.on-highlightcds.ref.palette.highlight.100
cds.sys.color.highlight-containercds.ref.palette.highlight.90
cds.sys.color.on-highlight-containercds.ref.palette.highlight.30
cds.sys.color.aicds.ref.palette.ai.40
cds.sys.color.on-aicds.ref.palette.ai.100
cds.sys.color.ai-containercds.ref.palette.ai.90
cds.sys.color.on-ai-containercds.ref.palette.ai.30
cds.sys.color.strokecds.ref.palette.neutral-variant.50
cds.sys.color.stroke-variantcds.ref.palette.neutral-variant.80
cds.sys.color.scrimcds.ref.palette.neutral.0
cds.sys.color.shadowcds.ref.palette.neutral.0
cds.sys.color.glasscds.ref.palette.neutral.100
cds.sys.color.ai-aura-startcds.ref.palette.ai.100
cds.sys.color.ai-aura-endcds.ref.palette.ai.92
cds.sys.color.ai-stroke-startcds.ref.palette.ai.70
cds.sys.color.ai-stroke-endcds.ref.palette.ai.50
cds.sys.color.ai-shadowcds.ref.palette.ai.50

Spacing Tokens ​

TokenFallback
cds.sys.spacing.3xsclamp(0,2rem, 0,19rem + 0,07vw, 0,25rem)
cds.sys.spacing.2xsclamp(0,41rem, 0,38rem + 0,13vw, 0,5rem)
cds.sys.spacing.xsclamp(0,61rem, 0,57rem + 0,2vw, 0,75rem)
cds.sys.spacing.sclamp(0,81rem, 0,76rem + 0,27vw, 1rem)
cds.sys.spacing.mclamp(1,22rem, 1,14rem + 0,4vw, 1,5rem)
cds.sys.spacing.lclamp(1,63rem, 1,52rem + 0,53vw, 2rem)
cds.sys.spacing.xlclamp(2,44rem, 2,28rem + 0,8vw, 3rem)
cds.sys.spacing.2xlclamp(3,25rem, 3,04rem + 1,07vw, 4rem)
cds.sys.spacing.3xlclamp(4,88rem, 4,56rem + 1,6vw, 6rem)
cds.sys.spacing.none0

Shape Tokens (border-radius) ​

TokenFallback
cds.sys.shape.none0px
cds.sys.shape.3xs1px
cds.sys.shape.2xs2px
cds.sys.shape.xs4px
cds.sys.shape.s8px
cds.sys.shape.m12px
cds.sys.shape.l16px
cds.sys.shape.xl28px
cds.sys.shape.full9999px

Motion Tokens ​

TokenFallback
cds.sys.motion.duration.short-150ms
cds.sys.motion.duration.short-2100ms
cds.sys.motion.duration.short-3150ms
cds.sys.motion.duration.short-4200ms
cds.sys.motion.duration.medium-1250ms
cds.sys.motion.duration.medium-2300ms
cds.sys.motion.duration.medium-3350ms
cds.sys.motion.duration.medium-4400ms
cds.sys.motion.duration.long-1450ms
cds.sys.motion.duration.long-2500ms
cds.sys.motion.duration.long-3550ms
cds.sys.motion.duration.long-4600ms
cds.sys.motion.duration.extra-long-1700ms
cds.sys.motion.duration.extra-long-2800ms
cds.sys.motion.duration.extra-long-3900ms
cds.sys.motion.duration.extra-long-41000ms
cds.sys.motion.duration.default350ms
cds.sys.motion.ease.linearcubic-bezier(0, 0, 1, 1)
cds.sys.motion.ease.standardcubic-bezier(0.2, 0, 0, 1)
cds.sys.motion.ease.standard-acceleratecubic-bezier(0.3, 0, 0, 1)
cds.sys.motion.ease.standard-deceleratecubic-bezier(0, 0, 0, 1)
cds.sys.motion.ease.emphasizedcubic-bezier(0.2, 0, 0, 1)
cds.sys.motion.ease.emphasized-acceleratecubic-bezier(0.3, 0, 0.8, 0.15)
cds.sys.motion.ease.emphasized-deceleratecubic-bezier(0.05, 0.7, 0.1, 1)

Elevation Tokens ​

TokenFallback
cds.sys.elevation.level.10px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 1px 1px rgba(0, 0, 0, 0.15)
cds.sys.elevation.level.20px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)
cds.sys.elevation.level.30px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)
cds.sys.elevation.level.40px 1px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)
cds.sys.elevation.level.50px 1px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)
cds.sys.elevation.ai.level.10px 1px 2px rgba(38, 124, 188, 0.3), 0px 1px 1px 1px rgba(38, 124, 188, 0.15)
cds.sys.elevation.ai.level.20px 1px 2px rgba(38, 124, 188, 0.3), 0px 2px 6px 2px rgba(38, 124, 188, 0.15)
cds.sys.elevation.ai.level.30px 1px 3px rgba(38, 124, 188, 0.3), 0px 4px 8px 3px rgba(38, 124, 188, 0.15)
cds.sys.elevation.ai.level.40px 1px 3px rgba(38, 124, 188, 0.3), 0px 6px 10px 4px rgba(38, 124, 188, 0.15)
cds.sys.elevation.ai.level.50px 1px 4px rgba(38, 124, 188, 0.3), 0px 8px 12px 6px rgba(38, 124, 188, 0.15)

Dimension Tokens ​

TokenFallback
cds.sys.dimension.base.3xs192px
cds.sys.dimension.base.2xs256px
cds.sys.dimension.base.xs320px
cds.sys.dimension.base.s384px
cds.sys.dimension.base.m448px
cds.sys.dimension.base.l512px
cds.sys.dimension.base.xl576px
cds.sys.dimension.base.2xl672px
cds.sys.dimension.base.3xl768px
cds.sys.dimension.base.4xl896px
cds.sys.dimension.base.5xl1024px
cds.sys.dimension.base.6xl1152px
cds.sys.dimension.base.7xl1280px
cds.sys.dimension.container.max896px
cds.sys.dimension.icon.2xs12px
cds.sys.dimension.icon.xs16px
cds.sys.dimension.icon.s20px
cds.sys.dimension.icon.m24px
cds.sys.dimension.icon.l32px
cds.sys.dimension.icon.xl40px
cds.sys.dimension.icon.2xl48px
cds.sys.dimension.icon.3xl64px
cds.sys.dimension.icon.4xl96px
cds.sys.dimension.column.xs32px
cds.sys.dimension.column.s48px
cds.sys.dimension.column.m64px
cds.sys.dimension.column.l96px
cds.sys.dimension.column.xl128px
cds.sys.dimension.column.2xl160px
cds.sys.dimension.column.3xl192px
cds.sys.dimension.column.4xl256px
cds.sys.dimension.column.5xl320px
cds.sys.dimension.column.6xl384px
cds.sys.dimension.column.7xl448px
cds.sys.dimension.row.xs32px
cds.sys.dimension.row.s48px
cds.sys.dimension.row.m56px
cds.sys.dimension.row.l64px
cds.sys.dimension.row.xl72px
cds.sys.dimension.row.2xl80px
cds.sys.dimension.row.3xl96px
cds.sys.dimension.touch.target48px
cds.sys.dimension.touch.content40px
cds.sys.dimension.touch.content-min32px

Opacity Tokens ​

TokenFallback
cds.sys.opacity.full1
cds.sys.opacity.high0,87
cds.sys.opacity.medium0,6
cds.sys.opacity.low0,38
cds.sys.opacity.disabled0,38
cds.sys.opacity.hover0,04
cds.sys.opacity.focus0,08
cds.sys.opacity.press0,12
cds.sys.opacity.drag0,16
cds.sys.opacity.none0

Filter Tokens ​

TokenFallback
cds.sys.filter.blur.none0px
cds.sys.filter.blur.3xs1px
cds.sys.filter.blur.2xs2px
cds.sys.filter.blur.xs4px
cds.sys.filter.blur.s8px
cds.sys.filter.blur.m12px
cds.sys.filter.blur.l16px
cds.sys.filter.blur.xl24px
cds.sys.filter.blur.2xl32px
cds.sys.filter.blur.3xl64px

Typografie Tokens ​

💡 Tip

Om snel typografie toe te passen, kan je gebruik maken van de font mixin van cds. Bv om een label large toe te passen op een css-class, gebruik je de mixin font met de parameter label-large.

sass
@use '@diekeure/cds-tokens' as cds;

.label {
  @include cds.font('label.large');
}

Dit resulteert in css:

css
.label {
  font-family: var(--cds-sys-typescale-label-large-brand, 'Open Sans');
  font-size: var(--cds-sys-typescale-label-large-font-size, clamp(0.61rem, 0.57rem + 0.2vw, 0.75rem));
  line-height: var(--cds-sys-typescale-label-large-line-height, clamp(0.81rem, 0.76rem + 0.27vw, 1rem));
  font-weight: var(--cds-sys-typescale-label-large-font-weight, 500);
  font-style: var(--cds-sys-typescale-label-large-font-style, normal);
  letter-spacing: var(--cds-sys-typescale-label-large-tracking, 0.000625);
}
TokenFallback
cds.sys.typescale.display.large.font-sizeclamp(2.44rem, 2.28rem + 0.8vw, 3rem)
cds.sys.typescale.display.large.line-heightclamp(3.25rem, 3.04rem + 1.07vw, 4rem)
cds.sys.typescale.display.large.tracking-0.01625
cds.sys.typescale.display.large.brandAsap
cds.sys.typescale.display.large.weight600
cds.sys.typescale.display.medium.font-sizeclamp(1.63rem, 1.52rem + 0.53vw, 2rem)
cds.sys.typescale.display.medium.line-heightclamp(2.64rem, 2.47rem + 0.87vw, 3.25rem)
cds.sys.typescale.display.medium.tracking0
cds.sys.typescale.display.medium.brandAsap
cds.sys.typescale.display.medium.weight600
cds.sys.typescale.display.small.font-sizeclamp(1.42rem, 1.33rem + 0.47vw, 1.75rem)
cds.sys.typescale.display.small.line-heightclamp(2.18rem, 2.03rem + 0.73vw, 2.69rem)
cds.sys.typescale.display.small.tracking0
cds.sys.typescale.display.small.brandAsap
cds.sys.typescale.display.small.weight600
cds.sys.typescale.headline.large.font-sizeclamp(1.22rem, 1.14rem + 0.4vw, 1.5rem)
cds.sys.typescale.headline.large.line-heightclamp(2.03rem, 1.9rem + 0.67vw, 2.5rem)
cds.sys.typescale.headline.large.tracking0
cds.sys.typescale.headline.large.brandAsap
cds.sys.typescale.headline.large.weight600
cds.sys.typescale.headline.medium.font-sizeclamp(1.12rem, 1.05rem + 0.37vw, 1.38rem)
cds.sys.typescale.headline.medium.line-heightclamp(1.83rem, 1.71rem + 0.6vw, 2.25rem)
cds.sys.typescale.headline.medium.tracking0
cds.sys.typescale.headline.medium.brandAsap
cds.sys.typescale.headline.medium.weight600
cds.sys.typescale.headline.small.font-sizeclamp(1.02rem, 0.95rem + 0.33vw, 1.25rem)
cds.sys.typescale.headline.small.line-heightclamp(1.63rem, 1.52rem + 0.53vw, 2rem)
cds.sys.typescale.headline.small.tracking0
cds.sys.typescale.headline.small.brandAsap
cds.sys.typescale.headline.small.weight600
cds.sys.typescale.title.large.font-sizeclamp(0.91rem, 0.85rem + 0.31vw, 1.13rem)
cds.sys.typescale.title.large.line-heightclamp(1.42rem, 1.33rem + 0.47vw, 1.75rem)
cds.sys.typescale.title.large.tracking0
cds.sys.typescale.title.large.brandAsap
cds.sys.typescale.title.large.weight600
cds.sys.typescale.title.medium.font-sizeclamp(0.81rem, 0.76rem + 0.27vw, 1rem)
cds.sys.typescale.title.medium.line-heightclamp(1.22rem, 1.14rem + 0.4vw, 1.5rem)
cds.sys.typescale.title.medium.tracking0
cds.sys.typescale.title.medium.brandAsap
cds.sys.typescale.title.medium.weight600
cds.sys.typescale.title.small.font-sizeclamp(0.71rem, 0.66rem + 0.24vw, 0.88rem)
cds.sys.typescale.title.small.line-heightclamp(1.02rem, 0.95rem + 0.33vw, 1.25rem)
cds.sys.typescale.title.small.tracking0
cds.sys.typescale.title.small.brandAsap
cds.sys.typescale.title.small.weight600
cds.sys.typescale.body.large.font-sizeclamp(0.81rem, 0.76rem + 0.27vw, 1rem)
cds.sys.typescale.body.large.line-heightclamp(1.22rem, 1.14rem + 0.4vw, 1.5rem)
cds.sys.typescale.body.large.tracking0.03125
cds.sys.typescale.body.large.brandOpen Sans
cds.sys.typescale.body.large.weight400
cds.sys.typescale.body.medium.font-sizeclamp(0.71rem, 0.66rem + 0.24vw, 0.88rem)
cds.sys.typescale.body.medium.line-heightclamp(1.02rem, 0.95rem + 0.33vw, 1.25rem)
cds.sys.typescale.body.medium.tracking0.015625
cds.sys.typescale.body.medium.brandOpen Sans
cds.sys.typescale.body.medium.weight400
cds.sys.typescale.body.small.font-sizeclamp(0.61rem, 0.57rem + 0.2vw, 0.75rem)
cds.sys.typescale.body.small.line-heightclamp(0.81rem, 0.76rem + 0.27vw, 1rem)
cds.sys.typescale.body.small.tracking0.025
cds.sys.typescale.body.small.brandOpen Sans
cds.sys.typescale.body.small.weight400
cds.sys.typescale.label.large.font-sizeclamp(0.61rem, 0.57rem + 0.2vw, 0.75rem)
cds.sys.typescale.label.large.line-heightclamp(0.81rem, 0.76rem + 0.27vw, 1rem)
cds.sys.typescale.label.large.tracking0.000625
cds.sys.typescale.label.large.brandOpen Sans
cds.sys.typescale.label.large.weight500
cds.sys.typescale.label.medium.font-sizeclamp(0.51rem, 0.48rem + 0.17vw, 0.63rem)
cds.sys.typescale.label.medium.line-heightclamp(0.71rem, 0.66rem + 0.24vw, 0.88rem)
cds.sys.typescale.label.medium.tracking0.03125
cds.sys.typescale.label.medium.brandOpen Sans
cds.sys.typescale.label.medium.weight500
cds.sys.typescale.label.small.font-sizeclamp(0.46rem, 0.43rem + 0.14vw, 0.56rem)
cds.sys.typescale.label.small.line-heightclamp(0.61rem, 0.57rem + 0.2vw, 0.75rem)
cds.sys.typescale.label.small.tracking0.03125
cds.sys.typescale.label.small.brandOpen Sans
cds.sys.typescale.label.small.weight500
cds.sys.typescale.label.overline.font-sizeclamp(0.51rem, 0.48rem + 0.17vw, 0.63rem)
cds.sys.typescale.label.overline.line-heightclamp(0.71rem, 0.66rem + 0.24vw, 0.88rem)
cds.sys.typescale.label.overline.tracking0.2
cds.sys.typescale.label.overline.brandOpen Sans
cds.sys.typescale.label.overline.weight200

Referentie Typografie Tokens ​

TokenFallback
cds.ref.typeface.brandAsap
cds.ref.typeface.plainOpen Sans
cds.ref.typeface.weight.thin100
cds.ref.typeface.weight.extra-light200
cds.ref.typeface.weight.light300
cds.ref.typeface.weight.regular400
cds.ref.typeface.weight.medium500
cds.ref.typeface.weight.semi-bold600
cds.ref.typeface.weight.bold700
cds.ref.typeface.weight.extra-bold800
cds.ref.typeface.weight.black900

Referentie Palette Tokens ​

INFO

Elk palette token heeft een tonal waarde die een kleurcode bevat. Deze tonal waarde bepaalt de luminantie van de kleur.
Elk palette token heeft als structuur: cds.sys.palette.[category].[tonal].
De [category] is telkens de naam van de kolom in de tabel hieronder.

tonalprimaryneutralneutral-variantsecondarytertiaryerrorsuccesswarninghighlightaistage.reviewstage.queue
00, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
0, 0, 0
4-18, 13, 12
---------11, 15, 15
544, 1, 0
--32, 11, 7
24, 16, 0
45, 0, 1
0, 21, 2
31, 12, 0
23, 16, 0
0, 18, 35
0, 18, 34
-
6-24, 18, 17
---------16, 20, 21
856, 1, 0
--40, 17, 13
32, 22, 0
57, 0, 1
0, 29, 4
41, 17, 0
31, 23, 0
0, 25, 45
0, 25, 44
-
1064, 2, 0
32, 26, 25
37, 25, 22
44, 21, 17
37, 26, 0
65, 0, 2
0, 34, 5
47, 21, 0
36, 26, 0
0, 29, 51
0, 29, 50
25, 28, 29
12-37, 30, 29
---------29, 32, 33
1375, 3, 0
--51, 27, 23
44, 32, 0
77, 0, 2
0, 40, 6
56, 26, 0
43, 32, 0
0, 35, 61
0, 36, 60
-
1787, 12, 4
47, 40, 39
-61, 35, 31
54, 40, 0
92, 0, 4
0, 50, 10
68, 33, 0
53, 40, 0
0, 44, 74
0, 44, 73
39, 43, 43
2096, 19, 9
54, 47, 45
59, 45, 43
68, 42, 37
61, 46, 4
105, 0, 5
0, 57, 12
78, 38, 0
61, 47, 0
0, 51, 84
0, 51, 83
46, 49, 50
22-59, 51, 50
---------50, 53, 54
23106, 26, 15
--76, 48, 43
69, 53, 10
117, 0, 6
0, 65, 15
87, 43, 0
68, 53, 0
0, 58, 94
0, 58, 93
-
30127, 41, 28
77, 69, 67
83, 67, 64
93, 63, 58
86, 69, 25
147, 0, 10
0, 83, 22
111, 56, 0
87, 68, 0
0, 74, 119
0, 74, 117
68, 71, 72
31130, 44, 30
--96, 66, 60
88, 71, 27
152, 0, 10
0, 86, 23
114, 58, 0
90, 71, 0
0, 76, 123
0, 77, 121
-
40159, 64, 49
101, 92, 91
108, 91, 88
119, 86, 81
111, 92, 46
186, 26, 26
0, 110, 32
146, 76, 0
116, 91, 0
0, 99, 157
0, 99, 154
92, 95, 95
50190, 88, 71
127, 117, 115
133, 115, 112
146, 111, 104
137, 117, 68
222, 55, 48
33, 137, 51
182, 97, 0
145, 116, 0
38, 124, 188
32, 124, 187
116, 120, 120
55--147, 128, 124
---------
60222, 113, 94
153, 142, 140
160, 140, 137
174, 136, 129
165, 142, 91
255, 84, 73
65, 164, 74
220, 118, 0
176, 140, 0
73, 150, 215
69, 151, 214
142, 145, 146
67--179, 159, 155
---------
70255, 138, 118
180, 169, 167
188, 167, 163
202, 162, 155
192, 169, 115
255, 137, 125
93, 192, 98
255, 142, 30
208, 166, 0
102, 177, 244
99, 177, 243
169, 172, 172
80255, 180, 167
208, 196, 194
216, 194, 190
231, 189, 181
221, 196, 140
255, 180, 171
120, 220, 122
255, 183, 127
239, 193, 28
152, 203, 255
150, 204, 255
196, 199, 199
82255, 188, 176
-222, 199, 195
237, 194, 187
227, 201, 145
255, 188, 179
126, 226, 127
255, 191, 142
245, 199, 36
164, 208, 255
161, 209, 255
-
90255, 218, 212
237, 224, 221
245, 221, 217
255, 218, 212
250, 224, 166
255, 218, 214
148, 249, 148
255, 220, 196
255, 224, 137
207, 229, 255
206, 229, 255
225, 227, 227
92255, 226, 221
243, 229, 227
-255, 226, 221
255, 230, 175
255, 226, 222
154, 255, 153
255, 227, 208
255, 230, 165
217, 234, 255
216, 234, 255
230, 232, 233
94-248, 235, 233
---------236, 238, 239
95255, 237, 234
251, 238, 235
-255, 237, 234
255, 239, 209
255, 237, 234
200, 255, 193
255, 237, 227
255, 239, 204
232, 241, 255
232, 242, 255
239, 241, 241
96-254, 241, 238
---------242, 244, 244
98255, 248, 246
255, 248, 246
-255, 248, 246
255, 248, 241
255, 248, 247
236, 255, 229
255, 248, 245
255, 248, 240
247, 249, 255
247, 249, 255
248, 250, 250
99255, 251, 255
255, 251, 255
255, 251, 255
255, 251, 255
253, 252, 252
255, 251, 255
246, 255, 240
255, 251, 255
255, 251, 255
252, 252, 255
252, 252, 255
250, 253, 253
100255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255
255, 255, 255

Best Practices ​

  1. Gebruik Systeem Tokens: Gebruik altijd cds.sys.* tokens in je componenten, niet referentietokens.

  2. Semantisch Gebruik: Kies tokens op basis van hun semantische betekenis, niet alleen op hun visuele verschijning.

  3. Responsief Ontwerp: Veel tokens gebruiken clamp() voor responsieve schaling - maak gebruik van deze ingebouwde responsiviteit.

  4. Kleurgebruik: Bij het gebruik van kleurtokens moet je onthouden dat ze worden geleverd als RGB-waarden en moeten worden gebruikt met de rgb() functie.

  5. Consistentie: Gebruik het tokensysteem consequent om een uniforme ontwerptaal in je applicatie te behouden.

  6. Vermijd Referentie Tokens: Onthoud dat cds.ref.* tokens niet kunnen worden gebruikt in componenten en alleen dienen als referentiewaarden voor andere tokens.

Voorbeeld Gebruik ​

Button Component ​

scss
@use '@diekeure/cds-tokens' as cds;

.button {
  @include cds.font('label.large');

  background-color: rgb(cds.get('cds.sys.color.primary'));
  color: rgb(cds.get('cds.sys.color.on-primary'));
  padding: cds.get('cds.sys.spacing.xs') cds.get('cds.sys.spacing.m');
  border-radius: cds.get('cds.sys.shape.s');

  transition: background-color cds.get('cds.sys.motion.duration.short-3') cds.get('cds.sys.motion.ease.standard');

  &:hover {
    background-color: rgba(cds.get('cds.sys.color.primary'), cds.get('cds.sys.opacity.hover'));
  }

  &:disabled {
    opacity: cds.get('cds.sys.opacity.disabled');
  }
}