# Design System Provider

For more information view the [design system provider readme](https://github.com/microsoft/fast/tree/master/packages/components/fast-foundation/src/design-system-provider/README.md).

### Jupyter Design System Properties

| Property Name                   | Type                        | Attribute Name                     | CSS Custom property                |
| ------------------------------- | --------------------------- | ---------------------------------- | ---------------------------------- |
| fillColor                       | string                      | fill-color                         | fill-color                         |
| neutralPalette                  | string[]                    | N/A                                | N/A                                |
| accentPalette                   | string[]                    | N/A                                | N/A                                |
| density                         | DensityOffset               | number                             | density                            |
| designUnit                      | number                      | number                             | design-unit                        |
| baseHeightMultiplier            | number                      | base-height-multiplier             | base-height-multiplier             |
| baseHorizontalSpacingMultiplier | number                      | base-horizontal-spacing-multiplier | base-horizontal-spacing-multiplier |
| controlCornerRadius             | number                      | corner-radius                      | corner-radius                      |
| strokeWidth                     | number                      | stroke-width                       | stroke-width                       |
| focusStrokeWidth                | number                      | focus-stroke-width                 | focus-stroke-width                 |
| disabledOpacity                 | number                      | disabled-opacity                   | disabled-opacity                   |
| typeRampMinus2FontSize          | string                      | type-ramp-minus-2-font-size        | type-ramp-minus-2-font-size        |
| typeRampMinus2LineHeight        | string                      | type-ramp-minus-2-line-height      | type-ramp-minus-2-line-height      |
| typeRampMinus1FontSize          | string                      | type-ramp-minus-1-font-size        | type-ramp-minus-1-font-size        |
| typeRampMinus1LineHeight        | string                      | type-ramp-minus-1-line-height      | type-ramp-minus-1-line-height      |
| typeRampBaseFontSize            | string                      | type-ramp-base-font-size           | type-ramp-base-font-size           |
| typeRampBaseLineHeight          | string                      | type-ramp-base-line-height         | type-ramp-base-line-height         |
| typeRampPlus1FontSize           | string                      | type-ramp-plus-1-font-size         | type-ramp-plus-1-font-size         |
| typeRampPlus1LineHeight         | string                      | type-ramp-plus-1-line-height       | type-ramp-plus-1-line-height       |
| typeRampPlus2FontSize           | string                      | type-ramp-plus-2-font-size         | type-ramp-plus-2-font-size         |
| typeRampPlus2LineHeight         | string                      | type-ramp-plus-2-line-height       | type-ramp-plus-2-line-height       |
| typeRampPlus3FontSize           | string                      | type-ramp-plus-3-font-size         | type-ramp-plus-3-font-size         |
| typeRampPlus3LineHeight         | string                      | type-ramp-plus-3-line-height       | type-ramp-plus-3-line-height       |
| typeRampPlus4FontSize           | string                      | type-ramp-plus-4-font-size         | type-ramp-plus-4-font-size         |
| typeRampPlus4LineHeight         | string                      | type-ramp-plus-4-line-height       | type-ramp-plus-4-line-height       |
| typeRampPlus5FontSize           | string                      | type-ramp-plus-5-font-size         | type-ramp-plus-5-font-size         |
| typeRampPlus5LineHeight         | string                      | type-ramp-plus-5-line-height       | type-ramp-plus-5-line-height       |
| typeRampPlus6FontSize           | string                      | type-ramp-plus-6-font-size         | type-ramp-plus-6-font-size         |
| typeRampPlus6LineHeight         | string                      | type-ramp-plus-6-line-height       | type-ramp-plus-6-line-height       |
| accentFillRestDelta             | number                      | accent-fill-rest-delta             | N/A                                |
| accentFillHoverDelta            | number                      | accent-fill-hover-delta            | N/A                                |
| accentFillActiveDelta           | number                      | accent-fill-active-delta           | N/A                                |
| accentFillFocusDelta            | number                      | accent-fill-focus-delta            | N/A                                |
| accentForegroundRestDelta       | number                      | accent-foreground-rest-delta       | N/A                                |
| accentForegroundHoverDelta      | number                      | accent-foreground-hover-delta      | N/A                                |
| accentForegroundActiveDelta     | number                      | accent-foreground-active-delta     | N/A                                |
| accentForegroundFocusDelta      | number                      | accent-foreground-focus-delta      | N/A                                |
| neutralFillRestDelta            | number                      | neutral-fill-rest-delta            | N/A                                |
| neutralFillHoverDelta           | number                      | neutral-fill-hover-delta           | N/A                                |
| neutralFillActiveDelta          | number                      | neutral-fill-active-delta          | N/A                                |
| neutralFillFocusDelta           | number                      | neutral-fill-focus-delta           | N/A                                |
| neutralFillInputRestDelta       | number                      | neutral-fill-input-rest-delta      | N/A                                |
| neutralFillInputHoverDelta      | number                      | neutral-fill-input-hover-delta     | N/A                                |
| neutralFillInputActiveDelta     | number                      | neutral-fill-input-active-delta    | N/A                                |
| neutralFillInputFocusDelta      | number                      | neutral-fill-input-focus-delta     | N/A                                |
| neutralFillStealthRestDelta     | number                      | neutral-fill-stealth-rest-delta    | N/A                                |
| neutralFillStealthHoverDelta    | number                      | neutral-fill-stealth-hover-delta   | N/A                                |
| neutralFillStealthActiveDelta   | number                      | neutral-fill-stealth-active-delta  | N/A                                |
| neutralFillStealthFocusDelta    | number                      | neutral-fill-stealth-focus-delta   | N/A                                |
| neutralFillStrongHoverDelta     | number                      | neutral-fill-strong-hover-delta    | N/A                                |
| neutralFillStrongActiveDelta    | number                      | neutral-fill-strong-hover-active   | N/A                                |
| neutralFillStrongFocusDelta     | number                      | neutral-fill-strong-hover-focus    | N/A                                |
| baseLayerLuminance              | number base-layer-luminance |                                    | N/A                                |
| neutralFillLayerRestDelta       | number                      | neutral-fill-layer-rest-delta      | N/A                                |
| neutralForegroundHoverDelta     | number                      | neutral-foreground-hover-delta     | N/A                                |
| neutralForegroundActiveDelta    | number                      | neutral-foreground-active-delta    | N/A                                |
| neutralForegroundFocusDelta     | number                      | neutral-foreground-focus-delta     | N/A                                |
| neutralStrokeDividerRestDelta   | number                      | neutral-stroke-divider-rest-delta  | N/A                                |
| neutralStrokeRestDelta          | number                      | neutral-stroke-rest-delta          | N/A                                |
| neutralStrokeHoverDelta         | number                      | neutral-stroke-hover-delta         | N/A                                |
| neutralStrokeActiveDelta        | number                      | neutral-stroke-active-delta        | N/A                                |
| neutralStrokeFocusDelta         | number                      | neutral-stroke-focus-delta         | N/A                                |
