Lightning in Skuid¶
Overview¶
We offer a design system that visually mirrors Salesforce’s Lightning Design System. With Skuid’s version of Lightning, you can seamlessly match Skuid components to Lightning pages in your Salesforce org.
Explore Lightning Sample Pages to see what you can do with this design system.
Note
If your Lightning Theme settings in Salesforce have been customized, you may notice style discrepancies. Update Skuid’s version of Lightning in the Design System Studio to match your custom styling.
Comparable Components¶
While there’s significant overlap, Skuid and Lightning components don’t align perfectly. To assist in matching your pages, we’ve added “comparable” Skuid variants that are visually similar to Lightning styling. In the Design System Studio, comparable components are noted as variant labels. Additional context is noted in the description, when applicable.
With this table, you can search for Lightning components and their Skuid counterparts.
| Skuid Variant | Lightning Tokens | Lightning Component | Lightning Styling |
| Accordion | Default | Accordion | |
| Expandable Section | Expandable Section | ||
| Button Group | Neutral | Button Group | Neutral |
| Button Icon Group | Default | ||
| Row Actions | With Row Actions | ||
| Inverse | Inverse | ||
| Default | Brand | ||
| Outline Brand | Outline Brand | ||
| Header | Default | Page Header | |
| Masthead | Default | Global Header | |
| Navigation | Default | Global Navigation | |
| Tab Container | Default | Scoped Tabs | |
| Tab Set | Default | Tabs | |
| Object Detail Tabs | |||
| File Tabs | |||
| Blue Selected State | |||
| Table | Default | Data Tables | |
| Column Dividers | |||
| Striped Rows | |||
| No Border | |||
| Header Dividers | |||
| Text | Title | Rich Text | |
| Uppercase | |||
| Default | |||
| Small | |||
| Medium | |||
| Increased | |||
| Large | |||
| Extra Large | |||
| Huge | |||
| Gigantic | |||
| Vertical Navigation | Default | Vertical Navigation | |
| Compact | |||
| Shaded Background | |||
| Borderless | |||
| Autocomplete | Default | Lookups | |
| Slim | |||
| Badge | Default | Badges | |
| Primary | |||
| Success | |||
| Warning | |||
| Error | |||
| Darker | |||
| Lighter | |||
| Button | Icon | Buttons | |
| Small | |||
| Row Actions | |||
| Inverse | |||
| Utility | Neutral | ||
| Destructive | |||
| Primary | Brand | ||
| Base | |||
| Slim | |||
| Circular | |||
| Datepicker button | |||
| Date | |||
| Circular with Border | |||
| Text Destructive | |||
| Success | |||
| Outline Brand | |||
| Circular Brand | |||
| Checkbox | Default | Checkbox | |
| No Border | |||
| Datepicker | Default | Datepickers | |
| Datetime | Default | Datetime Pickers | |
| Field | Default | Form Element | |
| Input Text | Default | Input | |
| Slim | |||
| Input Text Area | Default | Textarea | |
| Slim | |||
| Menu | Default | Menus | |
| Blue | |||
| Modal | Default | Modals | |
| Radio List | Default | Radio Group | |
| Select | Default | Select | |
| Slim | |||
| Slider | Default | Slider | |
| Switch | Default | Checkbox Toggle | |
| Time | Default | Timepicker | |
| Toast Message | Default | Toast | |
| Error | |||
| Warning | |||
| Success | |||
| Tooltip | Default | Tooltip | |
| Light |
Comparable Variables¶
Similar to components, Skuid variables and Lightning design tokens don’t align perfectly. To assist in matching your pages, we’ve added “comparable” Skuid variants that are visually similar to Lightning styling. In the Design System Studio, comparable variables are noted in variant labels. Additional context is noted in the description, when applicable.
This section includes each variable type in the Design System Studio. These tables are intended to help you find the appropriate Skuid style variants for your Lightning pages.
Brand Colors¶
This section compares Skuid’s Brand color variants and Lightning’s color-related tokens.
| Skuid Variant | Lightning Tokens |
| Blue 20 (#032D60) | palette-blue-20 |
| Destructive Text (#EA001E) | palette-red-50, color-text-destructive |
| Background Highlight (#FAFFBD) | color-background-highlight |
| Background Error (#FE5C4C) | color-background-error |
| Active Destructive Red (#8E030F) | palette-red-30, color-background-destructive-active, color-background-destructive-hover |
| Destructive Red (#BA0517) | palette-red-40, brand-header-contrast-warm, brand-header-contrast-warm-active, color-background-destructive, color-background-error-dark |
| Background Success Dark (#2E844A) | palette-green-50, color-background-success-dark |
| Background Success (#45C65A) | palette-green-70, color-background-success |
| Brand Darker (#014486) | palette-blue-30, color-brand-darker, brand-accessible-active, brand-background-dark, brand-header-contrast-cool, brand-header-contrast-cool-active, brand-text-link-active |
| Brand Dark (#0176D3) | palette-blue-50, color-brand-dark, brand-accessible, brand-dark, brand-primary-active, brand-text-link |
| Brand (#1B96FF) | palette-blue-60, color-brand, brand-primary |
| Background Alternative (#FFFFFF) | brand-header, brand-header-contrast-inverse, color-gray-1, palette-neutral-100, color-background-alternative, color-background-light, table-color-background-header-hover |
| Gray 2 (#FAFAF9) | color-gray-2 |
| Gray 3 (#F3F2F2) | color-gray-3 |
| Gray 4 (#ECEBEA) | color-gray-4 |
| Gray 5 (#DDDBDA) | color-gray-5 |
| Gray 6 (#C9C7C5) | color-gray-6, brand-disabled |
| Gray 7 (B0ADAB) | color-gray-7 |
| Gray 8 (#969492) | color-gray-8 |
| Gray 9 (#706E6B) | color-gray-9 |
| Gray 10 (#514F4D) | color-gray-10 |
| Gray 11 (#3E3E3C) | color-gray-11 |
| Gray 12 (#2B2826) | color-gray-12 |
| Gray 13 (#080707) | color-gray-13 |
| Brand Primary | brand-primary, palette-blue-60, color-brand |
Functional Colors¶
This section compares Skuid’s Functional color variants and Lightning’s color-related tokens.
| Skuid Variant | Lightning Tokens |
| Background | color-background-alt, color-background-light, table-color-background-header-hover |
| Font | color-gray-13 |
| Border | color-gray-5 |
| Selected Border | color-brand-dark |
| Focus | palette-orange-70, color-background-warning, color-background-warning-dark |
Borders¶
This section compares Skuid’s Border variants and Lightning’s radius tokens.
| Skuid Variant | Lightning Tokens |
| Small (2px) | border-radius-small |
| Primary (4px) | border-radius-medium |
Opacity¶
This section compares Skuid’s Opacity variants and Lightning’s opacity tokens.
| Skuid Variant | Lightning Tokens |
| Dark (80%) | opacity-5 |
| Medium (50%) | opacity-8 |
Shadows¶
This section compares Skuid’s Shadow variants and Lightning’s shadow tokens.
| Skuid Variant | Lightning Tokens |
| Card Shadow | card-shadow |
Typography¶
This section compares Skuid’s Typography variants and Lightning’s font tokens.
| Skuid Variant | Lightning Tokens |
| Lightning Fonts | font-family |
| Font Size 1 | font-size-1 |
| Font Size 2 | font-size-2 |
| Font Size 3 | font-size-3 |
| Font Size 4 | font-size-4 |
| Font Size 5 | font-size-5 |
| Font Size 7 | font-size-7 |
| Font Size 8 | font-size-8 |
| Font Size 9 | font-size-9 |
| Font Size 10 | font-size-10 |
| Font Size 11 | font-size-11 |
| Bold | font-weight-bold |
| Regular | font-weight-regular |
| Regular | line-height-reset |
| Comfortable | line-height-heading |
| Roomy | line-height-text |