light / neutral
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
Référence vivante du skin
Cette page est compilée depuis le même skin déclaré, les mêmes contrats et manifestes que le site.
Provenance de la compilation
Ces valeurs identifient exactement l'état déclaré représenté par cette page.
- Version du schéma
- 2
- Empreinte de marque
-
3d2cda447b6ac2aa2f26c3279cc49165d0563a5a707f62f7e333b3eec2611e7a - Complétude de la marque
- complete
- Lacunes de marque
- 2
- Dernière revue par
- agent
- Date de revue
- 2026-07-30
Entrées d'identité
Les entrées de marque et de comportement gardent leur provenance pour rendre visibles les décisions acceptées et calculées.
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
identity.color.accentHue
|
272
|
declared |
|
identity.color.contrast
|
normal
|
declared |
|
identity.color.hue
|
242
|
declared |
|
identity.color.neutralTint
|
0.05
|
declared |
|
identity.elevation.style
|
flat
|
declared |
|
identity.motion.energy
|
calm
|
declared |
|
identity.shape.roundness
|
0.42
|
declared |
|
identity.space.density
|
comfortable
|
declared |
|
identity.stage.default
|
light
|
declared |
|
identity.type.baseSize.max
|
1.125rem
|
declared |
|
identity.type.baseSize.min
|
1rem
|
declared |
|
identity.type.primaryFamily.fallbackStack
|
neo-grotesque
|
declared |
|
identity.type.primaryFamily.family
|
system-ui
|
declared |
|
identity.type.primaryFamily.variable
|
false
|
declared |
|
identity.type.primaryFamily.weights
|
[400,500,700]
|
declared |
|
identity.type.ratio.max
|
1.333
|
declared |
|
identity.type.ratio.min
|
1.2
|
declared |
|
identity.type.secondaryFamily.fallbackStack
|
neo-grotesque
|
declared |
|
identity.type.secondaryFamily.family
|
system-ui
|
declared |
|
identity.type.secondaryFamily.variable
|
false
|
declared |
|
identity.type.secondaryFamily.weights
|
[400,500,650]
|
declared |
|
identity.type.tertiaryFamily.fallbackStack
|
monospace-code
|
declared |
|
identity.type.tertiaryFamily.family
|
ui-monospace
|
declared |
|
identity.type.tertiaryFamily.variable
|
false
|
declared |
|
identity.type.tertiaryFamily.weights
|
[400]
|
declared |
|
Gammes de couleurs
Chaque niveau déclaré des deux modes et des quatre familles de couleurs figure ci-dessous.
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.dark.accent.1
|
oklch(0.150000 0.001891 272.000)
|
computed |
|
ramps.dark.accent.2
|
oklch(0.194444 0.002080 272.364)
|
computed |
|
ramps.dark.accent.3
|
oklch(0.238889 0.002297 272.727)
|
computed |
|
ramps.dark.accent.4
|
oklch(0.305556 0.001702 273.091)
|
computed |
|
ramps.dark.accent.5
|
oklch(0.350000 0.000770 273.455)
|
computed |
|
ramps.dark.accent.6
|
oklch(0.450000 0.015875 273.818)
|
computed |
|
ramps.dark.accent.7
|
oklch(0.550000 0.038478 274.182)
|
computed |
|
ramps.dark.accent.8
|
oklch(0.650000 0.071877 274.545)
|
computed |
|
ramps.dark.accent.9
|
oklch(0.720000 0.126325 274.909)
|
computed |
|
ramps.dark.accent.10
|
oklch(0.780000 0.111000 275.273)
|
computed |
|
ramps.dark.accent.11
|
oklch(0.870000 0.063000 275.636)
|
computed |
|
ramps.dark.accent.12
|
oklch(0.940000 0.022049 276.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.dark.brand.1
|
oklch(0.150000 0.002463 242.000)
|
computed |
|
ramps.dark.brand.2
|
oklch(0.194444 0.002781 241.636)
|
computed |
|
ramps.dark.brand.3
|
oklch(0.238889 0.003020 241.273)
|
computed |
|
ramps.dark.brand.4
|
oklch(0.305556 0.002225 240.909)
|
computed |
|
ramps.dark.brand.5
|
oklch(0.350000 0.001208 240.545)
|
computed |
|
ramps.dark.brand.6
|
oklch(0.450000 0.021060 240.182)
|
computed |
|
ramps.dark.brand.7
|
oklch(0.550000 0.050864 239.818)
|
computed |
|
ramps.dark.brand.8
|
oklch(0.650000 0.095370 239.455)
|
computed |
|
ramps.dark.brand.9
|
oklch(0.720000 0.116033 239.091)
|
computed |
|
ramps.dark.brand.10
|
oklch(0.780000 0.087978 238.727)
|
computed |
|
ramps.dark.brand.11
|
oklch(0.870000 0.037766 238.364)
|
computed |
|
ramps.dark.brand.12
|
oklch(0.940000 0.008964 238.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.dark.neutral.1
|
oklch(0.150000 0.000834 257.000)
|
computed |
|
ramps.dark.neutral.2
|
oklch(0.194444 0.000813 257.182)
|
computed |
|
ramps.dark.neutral.3
|
oklch(0.238889 0.000688 257.364)
|
computed |
|
ramps.dark.neutral.4
|
oklch(0.305556 0.000403 257.545)
|
computed |
|
ramps.dark.neutral.5
|
oklch(0.350000 0.000143 257.727)
|
computed |
|
ramps.dark.neutral.6
|
oklch(0.450000 0.002325 257.909)
|
computed |
|
ramps.dark.neutral.7
|
oklch(0.550000 0.004402 258.091)
|
computed |
|
ramps.dark.neutral.8
|
oklch(0.650000 0.006415 258.273)
|
computed |
|
ramps.dark.neutral.9
|
oklch(0.720000 0.008381 258.455)
|
computed |
|
ramps.dark.neutral.10
|
oklch(0.780000 0.008433 258.636)
|
computed |
|
ramps.dark.neutral.11
|
oklch(0.870000 0.005416 258.818)
|
computed |
|
ramps.dark.neutral.12
|
oklch(0.940000 0.002503 259.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.dark.tint.1
|
oklch(0.150000 0.001070 251.872)
|
computed |
|
ramps.dark.tint.2
|
oklch(0.194444 0.001099 251.343)
|
computed |
|
ramps.dark.tint.3
|
oklch(0.238889 0.001028 250.350)
|
computed |
|
ramps.dark.tint.4
|
oklch(0.305556 0.000669 249.334)
|
computed |
|
ramps.dark.tint.5
|
oklch(0.350000 0.000299 247.426)
|
computed |
|
ramps.dark.tint.6
|
oklch(0.450000 0.005077 246.988)
|
computed |
|
ramps.dark.tint.7
|
oklch(0.550000 0.011244 245.807)
|
computed |
|
ramps.dark.tint.8
|
oklch(0.650000 0.019546 244.618)
|
computed |
|
ramps.dark.tint.9
|
oklch(0.720000 0.024241 244.683)
|
computed |
|
ramps.dark.tint.10
|
oklch(0.780000 0.020085 245.707)
|
computed |
|
ramps.dark.tint.11
|
oklch(0.870000 0.010107 247.523)
|
computed |
|
ramps.dark.tint.12
|
oklch(0.940000 0.003417 250.894)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.light.accent.1
|
oklch(0.940000 0.002225 272.000)
|
computed |
|
ramps.light.accent.2
|
oklch(0.951111 0.002447 272.364)
|
computed |
|
ramps.light.accent.3
|
oklch(0.962222 0.002702 272.727)
|
computed |
|
ramps.light.accent.4
|
oklch(0.978889 0.002002 273.091)
|
computed |
|
ramps.light.accent.5
|
oklch(0.990000 0.000906 273.455)
|
computed |
|
ramps.light.accent.6
|
oklch(0.900000 0.018676 273.818)
|
computed |
|
ramps.light.accent.7
|
oklch(0.820000 0.045268 274.182)
|
computed |
|
ramps.light.accent.8
|
oklch(0.740000 0.084561 274.545)
|
computed |
|
ramps.light.accent.9
|
oklch(0.650000 0.148618 274.909)
|
computed |
|
ramps.light.accent.10
|
oklch(0.550000 0.178818 275.273)
|
computed |
|
ramps.light.accent.11
|
oklch(0.400000 0.107291 275.636)
|
computed |
|
ramps.light.accent.12
|
oklch(0.220000 0.025940 276.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.light.brand.1
|
oklch(0.940000 0.002898 242.000)
|
computed |
|
ramps.light.brand.2
|
oklch(0.951111 0.003272 241.636)
|
computed |
|
ramps.light.brand.3
|
oklch(0.962222 0.003553 241.273)
|
computed |
|
ramps.light.brand.4
|
oklch(0.978889 0.002618 240.909)
|
computed |
|
ramps.light.brand.5
|
oklch(0.990000 0.001421 240.545)
|
computed |
|
ramps.light.brand.6
|
oklch(0.900000 0.024777 240.182)
|
computed |
|
ramps.light.brand.7
|
oklch(0.820000 0.059840 239.818)
|
computed |
|
ramps.light.brand.8
|
oklch(0.740000 0.112200 239.455)
|
computed |
|
ramps.light.brand.9
|
oklch(0.650000 0.136510 239.091)
|
computed |
|
ramps.light.brand.10
|
oklch(0.550000 0.103504 238.727)
|
computed |
|
ramps.light.brand.11
|
oklch(0.400000 0.044431 238.364)
|
computed |
|
ramps.light.brand.12
|
oklch(0.220000 0.010546 238.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.light.neutral.1
|
oklch(0.940000 0.000981 257.000)
|
computed |
|
ramps.light.neutral.2
|
oklch(0.951111 0.000957 257.182)
|
computed |
|
ramps.light.neutral.3
|
oklch(0.962222 0.000810 257.364)
|
computed |
|
ramps.light.neutral.4
|
oklch(0.978889 0.000474 257.545)
|
computed |
|
ramps.light.neutral.5
|
oklch(0.990000 0.000168 257.727)
|
computed |
|
ramps.light.neutral.6
|
oklch(0.900000 0.002735 257.909)
|
computed |
|
ramps.light.neutral.7
|
oklch(0.820000 0.005179 258.091)
|
computed |
|
ramps.light.neutral.8
|
oklch(0.740000 0.007547 258.273)
|
computed |
|
ramps.light.neutral.9
|
oklch(0.650000 0.009860 258.455)
|
computed |
|
ramps.light.neutral.10
|
oklch(0.550000 0.009921 258.636)
|
computed |
|
ramps.light.neutral.11
|
oklch(0.400000 0.006372 258.818)
|
computed |
|
ramps.light.neutral.12
|
oklch(0.220000 0.002945 259.000)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
ramps.light.tint.1
|
oklch(0.940000 0.001259 251.872)
|
computed |
|
ramps.light.tint.2
|
oklch(0.951111 0.001293 251.343)
|
computed |
|
ramps.light.tint.3
|
oklch(0.962222 0.001210 250.350)
|
computed |
|
ramps.light.tint.4
|
oklch(0.978889 0.000787 249.334)
|
computed |
|
ramps.light.tint.5
|
oklch(0.990000 0.000352 247.426)
|
computed |
|
ramps.light.tint.6
|
oklch(0.900000 0.005973 246.988)
|
computed |
|
ramps.light.tint.7
|
oklch(0.820000 0.013228 245.807)
|
computed |
|
ramps.light.tint.8
|
oklch(0.740000 0.022995 244.618)
|
computed |
|
ramps.light.tint.9
|
oklch(0.650000 0.028519 244.683)
|
computed |
|
ramps.light.tint.10
|
oklch(0.550000 0.023630 245.707)
|
computed |
|
ramps.light.tint.11
|
oklch(0.400000 0.011891 247.523)
|
computed |
|
ramps.light.tint.12
|
oklch(0.220000 0.004020 250.894)
|
computed |
|
Échelles de design
Typographie, espacement, bordure, rayon, élévation et mouvement sont projetés directement depuis le skin.
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.border.styles.default
|
solid
|
manual |
|
scales.border.widths.blockquote
|
0.25rem
|
manual |
|
scales.border.widths.default
|
0.0625rem
|
manual |
|
scales.border.widths.focus
|
0.1875rem
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.elevation.levels.1
|
none
|
computed |
|
scales.elevation.levels.2
|
none
|
computed |
|
scales.elevation.levels.3
|
none
|
computed |
|
scales.elevation.shadowColor
|
oklch(0.2 0.04 242)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.motion.durations.base
|
216ms
|
computed |
|
scales.motion.durations.fast
|
144ms
|
computed |
|
scales.motion.durations.reduced
|
0ms
|
computed |
|
scales.motion.durations.slow
|
336ms
|
computed |
|
scales.motion.easings.entrance
|
cubic-bezier(0, 0, 0, 1)
|
computed |
|
scales.motion.easings.exit
|
cubic-bezier(0.3, 0, 1, 1)
|
computed |
|
scales.motion.easings.standard
|
cubic-bezier(0.2, 0, 0, 1)
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.radius.steps.default
|
0.375rem
|
computed |
|
scales.radius.steps.large
|
1.25rem
|
computed |
|
scales.radius.steps.pill
|
999px
|
manual |
|
scales.radius.steps.small
|
0.375rem
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.space.density
|
1
|
computed |
|
scales.space.steps.2xl
|
3.375rem
|
computed |
|
scales.space.steps.2xs
|
0.25rem
|
computed |
|
scales.space.steps.3xl
|
5.0625rem
|
computed |
|
scales.space.steps.lg
|
1.5rem
|
computed |
|
scales.space.steps.md
|
1rem
|
computed |
|
scales.space.steps.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
|
scales.space.steps.sm
|
0.75rem
|
computed |
|
scales.space.steps.xl
|
2.25rem
|
computed |
|
scales.space.steps.xs
|
0.5rem
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
scales.type.baseSize.max
|
1.125rem
|
computed |
|
scales.type.baseSize.min
|
1rem
|
computed |
|
scales.type.ratio.max
|
1.333
|
computed |
|
scales.type.ratio.min
|
1.2
|
computed |
|
scales.type.steps.base
|
clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)
|
computed |
|
scales.type.steps.h1
|
clamp(2.0736rem, 1.4951rem + 2.5711vw, 3.552rem)
|
computed |
|
scales.type.steps.h2
|
clamp(1.5774rem, 1.2915rem + 1.2706vw, 2.308rem)
|
computed |
|
scales.type.steps.h3
|
clamp(1.3145rem, 1.1514rem + 0.725vw, 1.7314rem)
|
computed |
|
scales.type.steps.h4
|
clamp(1.2rem, 1.0828rem + 0.521vw, 1.4996rem)
|
computed |
|
scales.type.steps.lead
|
clamp(1.2rem, 1.0828rem + 0.521vw, 1.4996rem)
|
computed |
|
scales.type.steps.sm
|
clamp(0.9554rem, 0.9196rem + 0.1593vw, 1.047rem)
|
computed |
|
Coordonnées de surface
Chaque mode, profondeur, fond et rôle sémantique de surface possède une ligne de référence.
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
surfaces.dark.base.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.bold.background
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.base.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.base.bold.backgroundStrong
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.base.bold.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.base.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.branded.background
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.base.branded.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.base.branded.backgroundStrong
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.base.branded.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.neutral.background
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.backgroundMuted
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.neutral.backgroundStrong
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.base.neutral.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.tinted.background
|
oklch(0.150000 0.001070 251.872)
|
computed |
ramps.dark.tint.1
|
surfaces.dark.base.tinted.backgroundMuted
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.base.tinted.backgroundStrong
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.base.tinted.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.high.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.high.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.high.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.high.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.branded.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.high.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.high.branded.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.high.branded.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.neutral.background
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.neutral.backgroundMuted
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.neutral.backgroundStrong
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.high.neutral.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.tinted.background
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.high.tinted.backgroundMuted
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.high.tinted.backgroundStrong
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.high.tinted.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.highest.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.highest.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.highest.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.highest.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.branded.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.highest.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.highest.branded.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.highest.branded.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.neutral.background
|
oklch(0.350000 0.000143 257.727)
|
computed |
ramps.dark.neutral.5
|
surfaces.dark.highest.neutral.backgroundMuted
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.neutral.backgroundStrong
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.highest.neutral.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.tinted.background
|
oklch(0.350000 0.000299 247.426)
|
computed |
ramps.dark.tint.5
|
surfaces.dark.highest.tinted.backgroundMuted
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.highest.tinted.backgroundStrong
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.highest.tinted.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.bold.background
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.low.bold.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.low.bold.backgroundStrong
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.low.bold.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.low.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.low.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.branded.background
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.low.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.low.branded.backgroundStrong
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.low.branded.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.low.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.neutral.background
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.low.neutral.backgroundMuted
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.low.neutral.backgroundStrong
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.low.neutral.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.tinted.background
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.low.tinted.backgroundMuted
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.low.tinted.backgroundStrong
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.low.tinted.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.mid.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.mid.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.mid.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.mid.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.mid.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.branded.background
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.mid.branded.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.mid.branded.backgroundStrong
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.mid.branded.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.mid.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.neutral.background
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.mid.neutral.backgroundMuted
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.mid.neutral.backgroundStrong
|
oklch(0.350000 0.000143 257.727)
|
computed |
ramps.dark.neutral.5
|
surfaces.dark.mid.neutral.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.mid.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.tinted.background
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.mid.tinted.backgroundMuted
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.mid.tinted.backgroundStrong
|
oklch(0.350000 0.000299 247.426)
|
computed |
ramps.dark.tint.5
|
surfaces.dark.mid.tinted.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.mid.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.light.base.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.bold.background
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.base.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.base.bold.backgroundStrong
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.base.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.base.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.bold.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.bold.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.bold.interactive
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.bold.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.branded.background
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.base.branded.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.base.branded.backgroundStrong
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.base.branded.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.base.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.neutral.background
|
oklch(0.940000 0.000981 257.000)
|
computed |
ramps.light.neutral.1
|
surfaces.light.base.neutral.backgroundMuted
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.neutral.backgroundStrong
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.base.neutral.border
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.tinted.background
|
oklch(0.940000 0.001259 251.872)
|
computed |
ramps.light.tint.1
|
surfaces.light.base.tinted.backgroundMuted
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.base.tinted.backgroundStrong
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.base.tinted.border
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.high.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.high.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.high.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.branded.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.high.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.high.branded.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.high.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.branded.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.branded.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.branded.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.branded.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.neutral.background
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.neutral.backgroundMuted
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.high.neutral.backgroundStrong
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.high.neutral.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.tinted.background
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.high.tinted.backgroundMuted
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.high.tinted.backgroundStrong
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.high.tinted.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.highest.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.highest.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.highest.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.branded.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.highest.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.highest.branded.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.highest.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.branded.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.branded.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.branded.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.branded.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.neutral.background
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.neutral.backgroundMuted
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.neutral.backgroundStrong
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.highest.neutral.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.neutral.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.neutral.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.neutral.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.neutral.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.tinted.background
|
oklch(0.990000 0.000352 247.426)
|
computed |
ramps.light.tint.5
|
surfaces.light.highest.tinted.backgroundMuted
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.highest.tinted.backgroundStrong
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.highest.tinted.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.tinted.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.tinted.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.tinted.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.tinted.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.bold.background
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.low.bold.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.low.bold.backgroundStrong
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.low.bold.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.bold.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.bold.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.bold.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.branded.background
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.low.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.low.branded.backgroundStrong
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.low.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.low.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.neutral.background
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.low.neutral.backgroundMuted
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.neutral.backgroundStrong
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.low.neutral.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.tinted.background
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.low.tinted.backgroundMuted
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.low.tinted.backgroundStrong
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.low.tinted.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.mid.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.mid.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.mid.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.mid.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.mid.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.branded.background
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.mid.branded.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.mid.branded.backgroundStrong
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.mid.branded.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.neutral.background
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.mid.neutral.backgroundMuted
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.neutral.backgroundStrong
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.tinted.background
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.mid.tinted.backgroundMuted
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.mid.tinted.backgroundStrong
|
oklch(0.990000 0.000352 247.426)
|
computed |
ramps.light.tint.5
|
surfaces.light.mid.tinted.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
Rôles sémantiques
Les rôles typographiques, d'espacement et de retour relient le sens aux sorties réutilisables.
Rôles typographiques
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
typeRoles.body.family
|
secondary
|
computed |
|
typeRoles.body.lineHeight
|
1.6
|
computed |
|
typeRoles.body.step
|
base
|
computed |
|
typeRoles.body.weight
|
400
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
typeRoles.display.family
|
primary
|
computed |
|
typeRoles.display.letterSpacing
|
-0.015em
|
computed |
|
typeRoles.display.lineHeight
|
1.12
|
computed |
|
typeRoles.display.step
|
h1
|
computed |
|
typeRoles.display.weight
|
700
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
typeRoles.heading.family
|
primary
|
computed |
|
typeRoles.heading.letterSpacing
|
-0.01em
|
computed |
|
typeRoles.heading.lineHeight
|
1.2
|
computed |
|
typeRoles.heading.step
|
h2
|
computed |
|
typeRoles.heading.weight
|
650
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
typeRoles.label.family
|
secondary
|
computed |
|
typeRoles.label.lineHeight
|
1.25
|
computed |
|
typeRoles.label.step
|
sm
|
computed |
|
typeRoles.label.weight
|
500
|
computed |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
typeRoles.mono.family
|
tertiary
|
computed |
|
typeRoles.mono.lineHeight
|
1.6
|
computed |
|
typeRoles.mono.step
|
sm
|
computed |
|
typeRoles.mono.weight
|
400
|
computed |
|
Rôles d'espacement
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.controlGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.controlPaddingBlock
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.controlPaddingInline
|
1rem
|
computed |
scales.space.steps.md
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.denseSection
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.fine
|
0.25rem
|
computed |
scales.space.steps.2xs
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.flowGap
|
1rem
|
computed |
scales.space.steps.md
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.focalSection
|
3.375rem
|
computed |
scales.space.steps.2xl
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.headingAfter
|
0.55em
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.iconGap
|
0.5rem
|
computed |
scales.space.steps.xs
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.inlineControl
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.pageGutter
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.pageShellGap
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.relatedGroup
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.repeatedContainer
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.routineSection
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
spaceRoles.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
Rôles de retour
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
feedback.dark.error.border
|
oklch(0.720000 0.147050 22.091)
|
computed |
|
feedback.dark.error.surface
|
oklch(0.194444 0.009282 24.636)
|
computed |
|
feedback.dark.error.text
|
oklch(0.940000 0.005916 21.000)
|
computed |
|
feedback.dark.info.border
|
oklch(0.720000 0.130050 247.091)
|
computed |
|
feedback.dark.info.surface
|
oklch(0.194444 0.006307 249.636)
|
computed |
|
feedback.dark.info.text
|
oklch(0.940000 0.006120 246.000)
|
computed |
|
feedback.dark.success.border
|
oklch(0.720000 0.205700 142.091)
|
computed |
|
feedback.dark.success.surface
|
oklch(0.194444 0.007259 144.636)
|
computed |
|
feedback.dark.success.text
|
oklch(0.940000 0.023256 141.000)
|
computed |
|
feedback.dark.warning.border
|
oklch(0.720000 0.124949 82.091)
|
computed |
|
feedback.dark.warning.surface
|
oklch(0.194444 0.004641 84.636)
|
computed |
|
feedback.dark.warning.text
|
oklch(0.940000 0.011424 81.000)
|
computed |
|
feedback.light.error.border
|
oklch(0.550000 0.198000 21.727)
|
computed |
|
feedback.light.error.surface
|
oklch(0.951111 0.003220 24.636)
|
computed |
|
feedback.light.error.text
|
oklch(0.220000 0.020880 21.000)
|
computed |
|
feedback.light.info.border
|
oklch(0.550000 0.128699 246.727)
|
computed |
|
feedback.light.info.surface
|
oklch(0.951111 0.003220 249.636)
|
computed |
|
feedback.light.info.text
|
oklch(0.220000 0.013200 246.000)
|
computed |
|
feedback.light.success.border
|
oklch(0.550000 0.164700 141.727)
|
computed |
|
feedback.light.success.surface
|
oklch(0.951111 0.011900 144.636)
|
computed |
|
feedback.light.success.text
|
oklch(0.220000 0.017279 141.000)
|
computed |
|
feedback.light.warning.border
|
oklch(0.550000 0.101700 81.727)
|
computed |
|
feedback.light.warning.surface
|
oklch(0.951111 0.007000 84.636)
|
computed |
|
feedback.light.warning.text
|
oklch(0.220000 0.010559 81.000)
|
computed |
|
Contrats de composants
Les valeurs des composants proviennent du graphe déclaré final et de ses consommateurs actifs.
Données actives de création
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.blockquote.borderWidth
|
0.25rem
|
manual |
scales.border.widths.blockquote
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.body.containerMax
|
80rem
|
manual |
|
components.body.fontSize
|
clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)
|
computed |
scales.type.steps.base
|
components.body.measure
|
70ch
|
manual |
|
components.body.queryInlineSize
|
100cqi
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.card.borderWidth
|
0.0625rem
|
manual |
scales.border.widths.default
|
components.card.padding
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.card.radius
|
1.25rem
|
computed |
scales.radius.steps.large
|
components.card.shadow
|
none
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.choiceControl.opticalOffset
|
0.25rem
|
computed |
scales.space.steps.2xs
|
components.choiceControl.size
|
1rem
|
computed |
scales.space.steps.md
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.control.disabledOpacity
|
0.6
|
manual |
|
components.control.minBlockSize
|
2.75rem
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.form.fieldBackground.dark
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
components.form.fieldBackground.light
|
oklch(0.962222 0.000810 257.364)
|
computed |
surfaces.light.base.neutral.backgroundStrong
|
components.form.fieldBackgroundFocus.dark
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
components.form.fieldBackgroundFocus.light
|
oklch(0.951111 0.000957 257.182)
|
computed |
surfaces.light.base.neutral.backgroundMuted
|
components.form.inlineThreshold
|
48rem
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.grid.fiveColumnThreshold
|
72rem
|
manual |
|
components.grid.fourColumnThreshold
|
64rem
|
manual |
|
components.grid.gap
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.grid.maxColumns
|
3
|
manual |
|
components.grid.sixColumnThreshold
|
80rem
|
manual |
|
components.grid.threeColumnThreshold
|
60rem
|
manual |
|
components.grid.twoColumnThreshold
|
30rem
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.inlineCode.padding
|
0.15em 0.4em
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.link.decorationColor
|
color-mix(in srgb, currentColor 38%, transparent)
|
manual |
|
components.link.decorationThickness
|
0.08em
|
manual |
|
components.link.underlineOffset
|
0.16em
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.list.indentation
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.navigation.containerGap
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.navigation.expandedThreshold
|
768px
|
manual |
|
components.navigation.itemFlow
|
0.5rem
|
computed |
scales.space.steps.xs
|
components.navigation.languageExpandedThreshold
|
36rem
|
manual |
|
components.navigation.menuDesktopGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.menuGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
components.navigation.menuWideGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.panelDesktopGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.panelGap
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.navigation.primaryGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.spaciousThreshold
|
960px
|
manual |
|
components.navigation.utilitiesFlow
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.utilityGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
components.navigation.utilityInlineThreshold
|
481px
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.submitControl.minInlineSize
|
16rem
|
manual |
|
| Chemin | Valeur | Source | Référence |
|---|---|---|---|
components.textarea.minBlockSize
|
10rem
|
manual |
|
Exemples sémantiques réels
Ces exemples utilisent les éléments sémantiques ordinaires et tout le vocabulaire de design gouverné.
light
light / tinted
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
light / branded
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
light / bold
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
dark
dark / neutral
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
dark / tinted
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
dark / branded
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
dark / bold
Cette carte sémantique applique le mode et le fond choisis avec le vocabulaire gouverné.
Contrat de carte
Contrat de carte
Cet article consomme le contrat complet de carte sans classe de présentation.
Exemple de statut avec le traitement de succès du framework.
Exemple d'alerte avec le traitement d'erreur du framework.
Matrice des relations de composants
Des contrôles sémantiques réels testent chaque contexte de surface et chaque état d'interaction publié.
dark.base.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.base.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.base.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.base.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.high.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.high.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.high.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.high.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.highest.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.highest.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.highest.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.highest.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.low.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.low.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.low.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.low.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.mid.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.mid.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.mid.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
dark.mid.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.base.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.base.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.base.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.base.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.high.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.high.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.high.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.high.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.highest.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.highest.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.highest.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.highest.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.low.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.low.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.low.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.low.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.mid.bold
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.mid.branded
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.mid.neutral
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
light.mid.tinted
Résumé du volet
Le contenu reste visible, sémantique et utilisable au clavier.
Retour de succès
Retour d'avertissement
Retour d'erreur
Retour d'information
| Relation |
|---|
| Résultat peint |
Matrice des relations de grille de section
Ces exemples passent par le schéma, l'expansion du document et le compilateur de mise en page normaux.
En-tête de grille de section
En-tête de grille de section
En-tête de grille de section
En-tête de grille de section
En-tête de grille de section
En-tête de grille de section
En-tête de grille de section
one
two
three
four
En-tête de grille de section
Sorties émises et gouvernées
Les propriétés, variables de compilation et classes proviennent de leurs manifestes et schémas propriétaires.
Propriétés personnalisées générées
| Nom | Type | Source |
|---|---|---|
--base-blockquote-border-width
|
semantic |
components.blockquote.borderWidth
|
--base-body-measure
|
semantic |
components.body.measure
|
--base-border-width
|
semantic |
scales.border.widths.default
|
--base-choice-control-optical-offset
|
semantic |
components.choiceControl.opticalOffset
|
--base-choice-control-size
|
semantic |
components.choiceControl.size
|
--base-color-border
|
semantic |
surfaces.light.base.neutral.border
|
--base-color-border-strong
|
semantic |
surfaces.light.base.neutral.borderStrong
|
--base-color-focus-ring
|
semantic |
surfaces.light.base.neutral.focus
|
--base-color-heading
|
semantic |
surfaces.light.base.neutral.heading
|
--base-color-interactive
|
semantic |
surfaces.light.base.neutral.interactive
|
--base-color-primary
|
semantic |
ramps.light.brand.9
|
--base-color-scheme
|
semantic |
identity.stage.default
|
--base-color-selection
|
semantic |
manifest-owned
|
--base-color-surface-muted
|
semantic |
manifest-owned
|
--base-color-text
|
semantic |
surfaces.light.base.neutral.text
|
--base-color-text-muted
|
semantic |
surfaces.light.base.neutral.textMuted
|
--base-control-disabled-opacity
|
semantic |
components.control.disabledOpacity
|
--base-control-min-block-size
|
semantic |
components.control.minBlockSize
|
--base-disclosure-measure
|
semantic |
components.body.measure
|
--base-elevation-shadow
|
semantic |
scales.elevation.levels.1
|
--base-feedback-error-border
|
semantic |
feedback.{light,dark}.error.border
|
--base-feedback-error-surface
|
semantic |
feedback.{light,dark}.error.surface
|
--base-feedback-error-text
|
semantic |
feedback.{light,dark}.error.text
|
--base-feedback-info-border
|
semantic |
feedback.{light,dark}.info.border
|
--base-feedback-info-surface
|
semantic |
feedback.{light,dark}.info.surface
|
--base-feedback-info-text
|
semantic |
feedback.{light,dark}.info.text
|
--base-feedback-success-border
|
semantic |
feedback.{light,dark}.success.border
|
--base-feedback-success-surface
|
semantic |
feedback.{light,dark}.success.surface
|
--base-feedback-success-text
|
semantic |
feedback.{light,dark}.success.text
|
--base-feedback-warning-border
|
semantic |
feedback.{light,dark}.warning.border
|
--base-feedback-warning-surface
|
semantic |
feedback.{light,dark}.warning.surface
|
--base-feedback-warning-text
|
semantic |
feedback.{light,dark}.warning.text
|
--base-font-size-base
|
semantic |
scales.type.steps.base
|
--base-font-size-h1
|
semantic |
scales.type.steps.h1
|
--base-font-size-h2
|
semantic |
scales.type.steps.h2
|
--base-font-size-h3
|
semantic |
scales.type.steps.h3
|
--base-font-size-h4
|
semantic |
scales.type.steps.h4
|
--base-font-size-lead
|
semantic |
scales.type.steps.lead
|
--base-font-size-sm
|
semantic |
scales.type.steps.sm
|
--base-form-measure
|
semantic |
components.body.measure
|
--base-grid-gap
|
semantic |
components.grid.gap
|
--base-inline-code-padding
|
semantic |
components.inlineCode.padding
|
--base-layout-container-max
|
semantic |
components.body.containerMax
|
--base-link-decoration-color
|
semantic |
components.link.decorationColor
|
--base-link-decoration-thickness
|
semantic |
components.link.decorationThickness
|
--base-link-underline-offset
|
semantic |
components.link.underlineOffset
|
--base-list-indentation
|
semantic |
components.list.indentation
|
--base-motion-duration-reduced
|
semantic |
scales.motion.durations.reduced
|
--base-navigation-container-gap
|
semantic |
components.navigation.containerGap
|
--base-navigation-item-flow
|
semantic |
components.navigation.itemFlow
|
--base-navigation-menu-desktop-gap
|
semantic |
components.navigation.menuDesktopGap
|
--base-navigation-menu-gap
|
semantic |
components.navigation.menuGap
|
--base-navigation-menu-wide-gap
|
semantic |
components.navigation.menuWideGap
|
--base-navigation-panel-desktop-gap
|
semantic |
components.navigation.panelDesktopGap
|
--base-navigation-panel-gap
|
semantic |
components.navigation.panelGap
|
--base-navigation-primary-gap
|
semantic |
components.navigation.primaryGap
|
--base-navigation-utilities-flow
|
semantic |
components.navigation.utilitiesFlow
|
--base-navigation-utility-gap
|
semantic |
components.navigation.utilityGap
|
--base-outline-width
|
semantic |
scales.border.widths.focus
|
--base-page-gutter
|
semantic |
scales.space.steps.md
|
--base-radius-default
|
semantic |
scales.radius.steps.default
|
--base-radius-large
|
semantic |
scales.radius.steps.large
|
--base-radius-pill
|
semantic |
scales.radius.steps.pill
|
--base-radius-small
|
semantic |
scales.radius.steps.small
|
--base-section-grid-gap
|
semantic |
components.grid.gap
|
--base-section-rhythm-closing
|
semantic |
scales.space.steps.sectionBlock
|
--base-section-rhythm-dense
|
semantic |
scales.space.steps.lg
|
--base-section-rhythm-focal
|
semantic |
scales.space.steps.sectionBlock
|
--base-section-rhythm-opening
|
semantic |
scales.space.steps.sectionBlock
|
--base-section-rhythm-routine
|
semantic |
scales.space.steps.sectionBlock
|
--base-space-control-gap
|
semantic |
spaceRoles.controlGap
|
--base-space-control-padding-block
|
semantic |
spaceRoles.controlPaddingBlock
|
--base-space-control-padding-inline
|
semantic |
spaceRoles.controlPaddingInline
|
--base-space-flow-gap
|
semantic |
spaceRoles.flowGap
|
--base-space-heading-after
|
semantic |
spaceRoles.headingAfter
|
--base-space-section-block
|
semantic |
spaceRoles.sectionBlock
|
--base-spacing-2xs
|
semantic |
scales.space.steps.2xs
|
--base-spacing-lg
|
semantic |
scales.space.steps.lg
|
--base-spacing-md
|
semantic |
scales.space.steps.md
|
--base-spacing-sm
|
semantic |
scales.space.steps.sm
|
--base-spacing-xl
|
semantic |
scales.space.steps.xl
|
--base-spacing-xs
|
semantic |
scales.space.steps.xs
|
--base-submit-control-min-inline-size
|
semantic |
components.submitControl.minInlineSize
|
--base-surface-background
|
semantic |
surfaces.light.base.neutral.background
|
--base-textarea-min-block-size
|
semantic |
components.textarea.minBlockSize
|
--base-transition-base
|
semantic |
scales.motion.durations.base, scales.motion.easings.standard
|
--base-transition-slow
|
semantic |
scales.motion.durations.slow, scales.motion.easings.standard
|
--base-type-body-font-family
|
semantic |
typeRoles.body.family
|
--base-type-body-font-weight
|
semantic |
typeRoles.body.weight
|
--base-type-body-line-height
|
semantic |
typeRoles.body.lineHeight
|
--base-type-display-font-family
|
semantic |
typeRoles.display.family
|
--base-type-display-font-weight
|
semantic |
typeRoles.display.weight
|
--base-type-display-line-height
|
semantic |
typeRoles.display.lineHeight
|
--base-type-heading-font-family
|
semantic |
typeRoles.heading.family
|
--base-type-heading-font-weight
|
semantic |
typeRoles.heading.weight
|
--base-type-heading-line-height
|
semantic |
typeRoles.heading.lineHeight
|
--base-type-label-font-family
|
semantic |
typeRoles.label.family
|
--base-type-label-font-weight
|
semantic |
typeRoles.label.weight
|
--base-type-label-line-height
|
semantic |
typeRoles.label.lineHeight
|
--base-type-mono-font-family
|
semantic |
typeRoles.mono.family
|
--base-type-mono-font-weight
|
semantic |
typeRoles.mono.weight
|
--base-type-mono-line-height
|
semantic |
typeRoles.mono.lineHeight
|
--base-wide-measure
|
semantic |
components.body.containerMax
|
--component-card-border-width
|
component |
components.card.borderWidth
|
--component-card-padding
|
component |
components.card.padding
|
--component-card-radius
|
component |
components.card.radius
|
--component-card-shadow
|
component |
components.card.shadow
|
--skin-border-blockquote
|
primitive |
scales.border.widths.blockquote
|
--skin-border-default
|
primitive |
scales.border.widths.default
|
--skin-border-focus
|
primitive |
scales.border.widths.focus
|
--skin-elevation-level-1
|
primitive |
scales.elevation.levels.1
|
--skin-light-brand-9
|
primitive |
ramps.light.brand.9
|
--skin-motion-duration-base
|
primitive |
scales.motion.durations.base
|
--skin-motion-duration-reduced
|
primitive |
scales.motion.durations.reduced
|
--skin-motion-duration-slow
|
primitive |
scales.motion.durations.slow
|
--skin-motion-easing-standard
|
primitive |
scales.motion.easings.standard
|
--skin-radius-default
|
primitive |
scales.radius.steps.default
|
--skin-radius-large
|
primitive |
scales.radius.steps.large
|
--skin-radius-pill
|
primitive |
scales.radius.steps.pill
|
--skin-radius-small
|
primitive |
scales.radius.steps.small
|
--skin-space-2xs
|
primitive |
scales.space.steps.2xs
|
--skin-space-lg
|
primitive |
scales.space.steps.lg
|
--skin-space-md
|
primitive |
scales.space.steps.md
|
--skin-space-section-block
|
primitive |
scales.space.steps.sectionBlock
|
--skin-space-sm
|
primitive |
scales.space.steps.sm
|
--skin-space-xl
|
primitive |
scales.space.steps.xl
|
--skin-space-xs
|
primitive |
scales.space.steps.xs
|
--skin-type-size-base
|
primitive |
scales.type.steps.base
|
--skin-type-size-h1
|
primitive |
scales.type.steps.h1
|
--skin-type-size-h2
|
primitive |
scales.type.steps.h2
|
--skin-type-size-h3
|
primitive |
scales.type.steps.h3
|
--skin-type-size-h4
|
primitive |
scales.type.steps.h4
|
--skin-type-size-lead
|
primitive |
scales.type.steps.lead
|
--skin-type-size-sm
|
primitive |
scales.type.steps.sm
|
Variables Sass
| Nom | Source |
|---|---|
$base-document-query-inline-size
|
components.body.queryInlineSize
|
$base-form-inline-threshold
|
components.form.inlineThreshold
|
$base-grid-five-column-threshold
|
components.grid.fiveColumnThreshold
|
$base-grid-four-column-threshold
|
components.grid.fourColumnThreshold
|
$base-grid-six-column-threshold
|
components.grid.sixColumnThreshold
|
$base-grid-three-column-threshold
|
components.grid.threeColumnThreshold
|
$base-grid-two-column-threshold
|
components.grid.twoColumnThreshold
|
$base-navigation-expanded-threshold
|
components.navigation.expandedThreshold
|
$base-navigation-language-expanded-threshold
|
components.navigation.languageExpandedThreshold
|
$base-navigation-spacious-threshold
|
components.navigation.spaciousThreshold
|
$base-navigation-utility-inline-threshold
|
components.navigation.utilityInlineThreshold
|
$base-section-grid-three-column-threshold
|
components.grid.threeColumnThreshold
|
$base-section-grid-two-column-threshold
|
components.grid.twoColumnThreshold
|
Classes de design gouvernées
| Nom | Source |
|---|---|
has-action-primary
|
design.action=primary
|
has-action-secondary
|
design.action=secondary
|
has-background-bold
|
design.background=bold
|
has-background-branded
|
design.background=branded
|
has-background-neutral
|
design.background=neutral
|
has-background-tinted
|
design.background=tinted
|
has-depth-base
|
design.depth=base
|
has-depth-high
|
design.depth=high
|
has-depth-highest
|
design.depth=highest
|
has-depth-low
|
design.depth=low
|
has-depth-mid
|
design.depth=mid
|
has-theme-dark
|
design.theme=dark
|
has-theme-light
|
design.theme=light
|
Classes de framework gouvernées
| Nom | Propriétaire | Objectif |
|---|---|---|
action-group
|
src/site/modules/elements/action-group
|
Adjacent action layout |
card-grid
|
src/site/modules/elements/card-grid
|
Repeated card layout |
card-grid-capacity-1
|
src/site/styles/framework.scss
|
One-column card-grid capacity |
card-grid-capacity-2
|
src/site/styles/framework.scss
|
Two-column card-grid capacity |
card-grid-capacity-3
|
src/site/styles/framework.scss
|
Three-column card-grid capacity |
card-grid-capacity-4
|
src/site/styles/framework.scss
|
Four-column card-grid capacity |
card-grid-capacity-5
|
src/site/styles/framework.scss
|
Five-column card-grid capacity |
card-grid-capacity-6
|
src/site/styles/framework.scss
|
Six-column card-grid capacity |
card-grid-container
|
src/site/modules/elements/card-grid
|
Card-grid container-query host |
htmx-indicator
|
src/site/assets/js/htmx.min.js
|
HTMX request progress integration hook |
language-navigation
|
src/site/modules/elements/menu-languages
|
Responsive language navigation wrapper |
language-toggle
|
src/site/modules/elements/menu-languages
|
Language navigation icon control |
media-arrangement-featured
|
src/site/pipeline/media.js
|
Full-span featured card slots |
media-arrangement-overlay
|
src/site/pipeline/media.js
|
Overlaid media and content slots |
media-arrangement-split
|
src/site/pipeline/media.js
|
Container-responsive split slots |
media-arrangement-stacked
|
src/site/pipeline/media.js
|
Stacked media and content slots |
media-aspect-auto
|
src/site/styles/generated.scss
|
Accepted automatic media aspect |
media-aspect-behavior-adaptive
|
src/site/pipeline/media.js
|
Container-responsive intrinsic-to-fixed media aspect behavior |
media-aspect-behavior-fixed
|
src/site/pipeline/media.js
|
Fixed media aspect behavior |
media-aspect-classic
|
src/site/styles/generated.scss
|
Accepted classic media aspect |
media-aspect-landscape
|
src/site/styles/generated.scss
|
Accepted landscape media aspect |
media-aspect-portrait
|
src/site/styles/generated.scss
|
Accepted portrait media aspect |
media-aspect-square
|
src/site/styles/generated.scss
|
Accepted square media aspect |
media-aspect-tall
|
src/site/styles/generated.scss
|
Accepted tall media aspect |
media-aspect-vertical
|
src/site/styles/generated.scss
|
Accepted vertical media aspect |
media-aspect-widescreen
|
src/site/styles/generated.scss
|
Accepted widescreen media aspect |
media-attachment-fixed
|
src/site/pipeline/media.js
|
Capability-gated fixed image backdrop reveal |
media-attachment-fixed-wide
|
src/site/pipeline/media.js
|
Wide-container fixed image backdrop reveal |
media-attachment-scroll
|
src/site/pipeline/media.js
|
Normal section backdrop attachment |
media-caption-center
|
src/site/pipeline/media.js
|
Design-owned centered caption alignment |
media-caption-credit-corner
|
src/site/modules/elements/media-frame.njk
|
Credit-only figcaption overlay bound to the media viewport |
media-caption-start
|
src/site/pipeline/media.js
|
Design-owned start caption alignment |
media-content
|
src/site/modules/elements/container/container.njk
|
Shared non-media content slot for media hosts |
media-credit
|
src/site/modules/elements/media-frame.njk
|
Catalog-derived media provenance |
media-credit-corner
|
src/site/modules/elements/media-frame.njk
|
Shared corner credit treatment |
media-credit-corner-end
|
src/site/modules/elements/media-frame.njk
|
Logical-end image credit placement |
media-credit-corner-start
|
src/site/modules/elements/media-frame.njk
|
Logical-start image credit placement |
media-download
|
src/site/modules/elements/media-frame.njk
|
Explicit separately named raw-master download action |
media-fit-contain
|
src/site/pipeline/media.js
|
Contain media fit |
media-fit-cover
|
src/site/pipeline/media.js
|
Cover media fit |
media-frame
|
src/site/pipeline/media.js
|
Shared semantic image frame |
media-frame-none
|
src/site/pipeline/media.js
|
Unframed media treatment |
media-frame-raised
|
src/site/pipeline/media.js
|
Raised media frame treatment |
media-frame-subtle
|
src/site/pipeline/media.js
|
Subtle media frame treatment |
media-gallery
|
src/site/modules/elements/media-gallery
|
Static-first gallery container |
media-gallery-capacity-1
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a one-item maximum capacity |
media-gallery-capacity-2
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a two-item maximum capacity |
media-gallery-capacity-3
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a three-item maximum capacity |
media-gallery-capacity-4
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a four-item maximum capacity |
media-gallery-capacity-5
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a five-item maximum capacity |
media-gallery-capacity-6
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a six-item maximum capacity |
media-gallery-presentation-grid
|
src/site/styles/framework.scss
|
Static responsive gallery grid |
media-gallery-presentation-mosaic
|
src/site/styles/framework.scss
|
Named mixed-prominence gallery composition |
media-gallery-presentation-scroll-snap
|
src/site/styles/framework.scss
|
Capacity-controlled horizontal scroll-snap gallery |
media-gallery-track
|
src/site/modules/elements/media-gallery
|
Grid and scroll-snap gallery layout host |
media-image
|
src/site/pipeline/media.js
|
Canonical responsive image projection |
media-image-focal-adaptive
|
src/site/pipeline/media.js
|
Catalog focal-point projection for adaptive multi-column crops |
media-laboratory
|
src/site/common/media-laboratory/media-laboratory.render.yaml
|
Technical media appendix spacing boundary |
media-layout-card-bleed
|
src/site/pipeline/media.js
|
Edge-to-edge card media layout recipe |
media-layout-card-contained
|
src/site/pipeline/media.js
|
Padded card media layout recipe |
media-layout-edge-to-edge
|
src/site/pipeline/media.js
|
Edge media beside contained content recipe |
media-layout-editorial-offset
|
src/site/pipeline/media.js
|
Offset editorial media recipe |
media-layout-editorial-split
|
src/site/pipeline/media.js
|
Responsive editorial split recipe |
media-layout-full-bleed
|
src/site/pipeline/media.js
|
Full-width media with contained content recipe |
media-layout-gallery-grid
|
src/site/pipeline/media.js
|
Uniform gallery layout recipe |
media-layout-gallery-mosaic
|
src/site/pipeline/media.js
|
Mixed-prominence gallery layout recipe |
media-layout-inline
|
src/site/pipeline/media.js
|
Inline media layout recipe |
media-layout-overlap
|
src/site/pipeline/media.js
|
Bounded media and content overlap recipe |
media-layout-section-backdrop
|
src/site/pipeline/media.js
|
Discoverable section backdrop recipe |
media-layout-video
|
src/site/pipeline/media.js
|
Poster-first video layout recipe |
media-lightbox
|
src/site/modules/elements/media-gallery
|
Native dialog lightbox |
media-lightbox-actions
|
src/site/modules/elements/media-gallery
|
Native previous and next lightbox actions |
media-lightbox-close
|
src/site/modules/elements/media-gallery
|
Native dialog close action |
media-lightbox-figure
|
src/site/modules/elements/media-gallery
|
Expanded image and caption composition |
media-lightbox-link
|
src/site/modules/elements/media-frame.njk
|
Styled direct-image link enhanced by the optional lightbox |
media-lightbox-media
|
src/site/modules/elements/media-frame.njk
|
Inert responsive lightbox media template |
media-lightbox-stage
|
src/site/modules/elements/media-gallery
|
Responsive expanded rendition stage |
media-lightbox-status
|
src/site/modules/elements/media-gallery
|
Current gallery position announcement |
media-lightbox-unavailable
|
src/site/modules/elements/media-gallery
|
Component-local expanded-image failure and recovery state |
media-mosaic-enhanced
|
src/site/assets/js/media-mosaic.js
|
Measured mosaic row-span capability |
media-motion-hover-zoom
|
src/site/pipeline/media.js
|
Hover-capable clipped media enlargement |
media-motion-none
|
src/site/pipeline/media.js
|
Static media treatment |
media-motion-parallax-medium
|
src/site/pipeline/media.js
|
Progressive medium-distance view-timeline parallax treatment |
media-motion-parallax-strong
|
src/site/pipeline/media.js
|
Progressive strong-distance view-timeline parallax treatment |
media-motion-parallax-subtle
|
src/site/pipeline/media.js
|
Progressive low-distance view-timeline parallax treatment |
media-motion-reveal
|
src/site/pipeline/media.js
|
Progressive view-timeline reveal treatment |
media-overlay-none
|
src/site/pipeline/media.js
|
Resolved media without a readability overlay |
media-overlay-readable
|
src/site/pipeline/media.js
|
Media requiring a framework-owned readability scrim |
media-position-after
|
src/site/pipeline/media.js
|
Logical after media position |
media-position-before
|
src/site/pipeline/media.js
|
Logical before media position |
media-position-inline
|
src/site/pipeline/media.js
|
Inline media position |
media-position-overlay
|
src/site/pipeline/media.js
|
Overlay media position |
media-prominence-featured
|
src/site/pipeline/media.js
|
Featured media item prominence |
media-prominence-standard
|
src/site/pipeline/media.js
|
Standard media item prominence |
media-relationship-card-media
|
src/site/pipeline/media.js
|
Card media relationship |
media-relationship-figure
|
src/site/pipeline/media.js
|
Figure media relationship |
media-relationship-gallery-item
|
src/site/pipeline/media.js
|
Gallery item media relationship |
media-relationship-inline
|
src/site/pipeline/media.js
|
Inline media relationship |
media-relationship-section-backdrop
|
src/site/pipeline/media.js
|
Section backdrop media relationship |
media-relationship-section-media
|
src/site/pipeline/media.js
|
Editorial section media relationship |
media-relationship-video
|
src/site/pipeline/media.js
|
Video media relationship |
media-tone-branded
|
src/site/pipeline/media.js
|
Branded media tone |
media-tone-muted
|
src/site/pipeline/media.js
|
Muted media tone |
media-tone-natural
|
src/site/pipeline/media.js
|
Natural media tone |
media-transcript-link
|
src/site/modules/elements/media-frame.njk
|
Localized informative-video transcript reference |
media-video
|
src/site/pipeline/media.js
|
Canonical poster-first video projection |
media-video-toggle
|
src/site/modules/elements/container/container.njk
|
Accessible decorative-video pause and resume action |
media-video-unavailable
|
src/site/modules/elements/media-frame.njk
|
Component-local video request failure and retry state |
nav-panel
|
src/site/modules/elements/menu-navigation
|
Responsive navigation disclosure panel |
nav-primary
|
src/site/modules/elements/menu-navigation-primary
|
Primary navigation wrapper |
nav-primary-brand
|
src/site/modules/elements/menu-navigation-primary
|
Primary navigation brand link |
nav-primary-menu
|
src/site/modules/elements/menu-navigation-primary
|
Primary navigation menu group |
nav-primary-utilities-end
|
src/site/modules/elements/menu-navigation-primary
|
Trailing primary navigation utilities |
nav-primary-utilities-start
|
src/site/modules/elements/menu-navigation-primary
|
Leading primary navigation utilities |
nav-toggle
|
src/site/modules/elements/menu-navigation
|
Responsive navigation disclosure control |
nav-toggle-icon
|
src/site/modules/elements/menu-navigation
|
State-independent navigation toggle icon |
nav-toggle-state-closed
|
src/site/modules/elements/menu-navigation
|
Collapsed navigation toggle decoration |
nav-toggle-state-open
|
src/site/modules/elements/menu-navigation
|
Expanded navigation toggle decoration |
section-grid
|
src/site/pipeline/layout.js
|
Schema-generated section grid host |
section-grid-align-center
|
src/site/styles/framework.scss
|
Schema-generated center alignment |
section-grid-align-start
|
src/site/styles/framework.scss
|
Schema-generated start alignment |
section-grid-align-stretch
|
src/site/styles/framework.scss
|
Schema-generated stretch alignment |
section-grid-capacity-1
|
src/site/styles/framework.scss
|
Schema-generated one-column section-grid capacity |
section-grid-capacity-2
|
src/site/styles/framework.scss
|
Schema-generated two-column section-grid capacity |
section-grid-capacity-3
|
src/site/styles/framework.scss
|
Schema-generated three-column section-grid capacity |
section-grid-header
|
src/site/pipeline/layout.js
|
Schema-generated full-span first header |
section-grid-item
|
src/site/pipeline/layout.js
|
Schema-generated participating first header |
site-topbar
|
src/site/common/topbar
|
Site utility bar layout |
skip-link
|
src/site/common/skip-link
|
Keyboard-visible native link to the shared main-content target |
utility-navigation
|
src/site/common/topbar
|
Compact company-interaction navigation |
État du lint du skin
Les comptes et avis proviennent de la même évaluation que celle de la compilation.
- Problèmes bloquants
- 0
- Problèmes dérogés
- 0
- Dérogations inutilisées
- 0
- Valeurs de composant gouvernées (niveau 3)
- 23
État des analyses et avis
L'analyse APCA facultative n'est pas activée. Les contrôles de contraste WCAG 2.2 du dépôt restent actifs.