Lightning Design System tokens, icons and fonts for iOS

iOS static library for Salesforce Lightning Design System Tokens.

Current release: Spring ’17

Simple Install

Install CocoaPods:

$ sudo gem install cocoapods

Navigate to your iOS project directory and run:

$ pod init

A Podfile will be created at the root of your project directory.

Add the following to your Podfile under use_frameworks!:

pod 'DesignSystem'

run:

$ pod install

A workspace for you project will be created (ending in .xcworkspace)

Open this workspace file in xcode. Use this workspace for future builds.

Update your search paths

After opening the workspace go to YourProject->YourProjectTarget->Build Settings-> Header Search Paths, and remove everything but $(inherited) non-recursive.

Manual Submodule/Subproject Setup

See more info

Sample Application

See Demo App for a library browser and sample code.

Swift Usage

Setup

To use the SLDS library in Swift, import the library:

import DesignSystem

SLDS extensions and constants are now accessible within your file.

Examples

Colors

let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

let fillColor = UIColor.sldsFill(.brand)

let textColor = UIColor.sldsTextColor(.colorTextDefault)

Colors Overrides

Set up an override then use colors as you normally would throughout your application.

UIColor.sldsOverrideBackgroundColor(.colorBackground, with: UIColor.cyan)
let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

UIColor.sldsOverrideBorderColor(.colorBorderBrand, with: UIColor.cyan)
let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

UIColor.sldsOverrideFill(.brand, with: UIColor.cyan)
let fillColor = UIColor.sldsFill(.brand)

UIColor.sldsOverrideTextColor(.colorTextBrand, with: UIColor.cyan)
let textColor = UIColor.sldsTextColor(.colorTextDefault)

Fonts and text sizes

label.font = UIFont.sldsFont(.bold, with: .medium)

Icons

Action Icons

let icon = UIImage.sldsActionIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsActionIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Custom Icons

let icon = UIImage.sldsCustomIcon(.custom1, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldCustomIcon(.custom1, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Standard Icons

let icon = UIImage.sldsStandardIcon(.account, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsStandardIcon(.account, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Utility Icons

let icon = UIImage.sldsUtilityIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsUtilityIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Objective-C Usage

Examples

Colors

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];
    
UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];
    
UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];
    
UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

Color Overrides

Set up an override then use colors as you normally would throughout your application.

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIColor sldsOverrideBackgroundColor:SLDSCardColorBackground with:UIColor.cyanColor];
UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];
    
[UIColor sldsOverrideBorderColor:SLDSColorBorderBrand with:UIColor.cyanColor];
UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];
    
[UIColor sldsOverrideFill:SLDSFillBrand with:UIColor.cyanColor];
UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];
    
[UIColor sldsOverrideTextColor:SLDSColorTextBrand with:UIColor.cyanColor];
UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

Fonts and text sizes

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIFont* f = [UIFont sldsFont:SLDSFontRegular withSize:SLDSFontSizeXLarge];

Icons

Action Icons

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIImage *icon = [UIImage sldsActionIcon:SLDSIconActionNewCustom98 withSize:20.0f];

Custom Icons

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIImage *icon = [UIImage sldsCustomIcon:SLDSIconCustom1 withSize:20.0f];

Standard Icons

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIImage *icon = [UIImage sldsStandardIcon:SLDSIconStandardAccount withSize:20.0f];

Utility Icons

#import <DesignSystem/SalesforceDesignSystem.h> 

...

UIImage *icon = [UIImage sldsUtilityIcon:SLDSIconUtility3dots withSize:20.0f];

Library Build (not required)

In case you want to use your own custom design tokens or extend the SLDS library, you will need to rebuild the Generated folder. After making edits to the gulp scripts, run the following commands.

$ npm install
$ npm start

Licenses

• Source code is licensed under BSD 3-Clause
• All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
• The Salesforce Sans font is licensed under our font license