@publicismedia-ds/ui-theme v0.0.1

Theme

The Theme component provides scss for the following:

• Colors
• Typography
  • Default styles
• Icons
• Mixins
  • space
  • toEm
  • toRem
  • clearFix
  • hideText
• Breakpoints

NOTE: This theme requires the dart-sass implementation (package name "sass"). The LibSass implementation (package name "node-sass") does not support the latest sass spec.

Install

npm install @publicismedia-ds/ui-theme

Quickstart

Drop this in your main scss file to get going!

• All includes are optional and only needed once

@use "@publicismedia-ds/ui-theme" as theme;

@include theme.font_importRoboto; //Import Roboto font from Google
@include theme.font_typography; //Base styles for various tags
@include theme.icon_importIcons; //Import icon font from hosted url
@include theme.color_paletteClasses; //Mixin adds color classes for color and background-color

Colors

• For the full palette of colors, variable names, and classes see the live example story

You can use theme colors in scss like so:

span {
	color: theme.$color_primary-gold;
}
span {
	color: theme.$color_green;
}
span {
	color: theme.$color_status-success;
}

HTML classes

You also have the option of using color classes. The class implementation provides a quick way to color text and backgrounds. The class names are not included by default. To include them add the following line to your main scss file:

@include theme.color_paletteClasses; //Mixin adds color classes for color and background-color

<p class="color-primary">Some text I want colored</p>
<p class="color-red">Some text I want colored</p>
<div class="bg-status-success">This background will be colored</div>

Typography

Font Roboto

@include theme.font_importRoboto; //Import Roboto font from Google

span {
	//Use any one of these
	@include theme.font_robotoLight;
	@include theme.font_robotoRegular;
	@include theme.font_robotoMedium;
	@include theme.font_robotoBold;
	@include theme.font_robotoBlack;
}

Default styles

You have the option of including default typography styles which provides base styles for the following:

• Headings <h1><h2><h3><h4><h5><h6>
• Anchor text links <a>
• Paragraphs <p>
• Bolds <strong><b>
• Italics <dfn><cite><em><i>
• Tags with Title attribute <p><strong><em><span><abbr><acronym>

@include theme.font_typography; //Base styles for various tags

Icons

Publicis Media has a custom icon-font that provides icons for all of our applications.

• For the full list of icons and classes see the live example story

Icon classes

Using icon classes is the preferred implementation

@include theme.icon_importIcons; //Import Icons font from hosted url

<i class="icon-lion"></i>

SCSS icons

Not preferred but you have the option to use the icon variables directly

@include theme.icon_importIcons; //Import Icons font from hosted url

span:before {
	display: inline;
	font-family: theme.$icon_font;
	content: theme.$icon_lion;
}

Mixins

mixin_space

The space function is used to generate pixel values while enforcing brand spacing.

• space($multiple: 1, $base: 4)
• The values passed in are multipled to return a px value

span {
	margin: theme.mixin_space(10); //10 * 4 (default) = 40px
	padding: theme.mixin_space(5); //5 * 4 (default) = 20px;
}

mixin_toEm

The toEm function is used to convert font pixel units to em units

• toEm($fontSize: 16, $baseSize: 16)
• the \$baseSize 16 is assumed to be the browser default

span {
	font-size: theme.mixin_toEm(20); //20px => 20 / 16 (default) = 1.25em;
	//Default line-height is 1em which cooresponds to current font-size
	//Current font-size = 1.25em so current line-height is 1em = 1.25em implicitly
}
span {
	font-size: theme.mixin_toEm(20); //20px => 20 / 16 (default) = 1.25em;
	//22px but we use 20 as base since that is the font-size
	line-height: theme.mixin_toEm(22, 20); //22 / 20 = 1.1em
}

mixin_toRem

The toRem function is used to convert font pixel units to rem units

• toRem($fontSize: 16, $baseSize: 16)
• the \$baseSize 16 is assumed to be the browser default

span {
	font-size: theme.mixin_toRem(20); //20px => 20 / 16 (default) = 1.25rem;
	//Default line-height is 1em which cooresponds to current font-size
	//Current font-size = 1.25rem so current line-height is 1em = 1.25rem implicitly
}
span {
	font-size: theme.mixin_toRem(20); //20px => 20 / 16 (default) = 1.25rem;
	//22px but we use 20 as base since that is the font-size
	line-height: theme.mixin_toEm(22, 20); //22 / 20 = 1.1rem
}

clearFix classes

The clr / clear-fix classes can be used if you opted to include the default typography via @include theme.font_typography; These classes allow you to quickly apply the clearFix without needing additional CSS.

<div class="clr">
	<div style="float:left">Some floated content</div>
</div>

mixin_clearFix

The clearFix mixin is applied on a container of floated elements to correctly calculate container height

• clearFix()
• By default a <div> containing an child element with float:left will have a height of 0 zero
• Apply clearFix and the <div> will be the height of the floated child element

<div id="container">
	<div style="float:left">Some floated content</div>
</div>

#container {
	@include theme.mixin_clearFix;
}

hideText class

The seo / hide-text classes can be used if you opted to include the default typography via @include theme.font_typography; These classes allow you to quickly hideText without needing additional CSS.

<a href="#">
	Learn More
	<span class="seo">about our product xyz</span>
</a>

mixin_hideText

The hideText mixin is designed to visually hide content while keeping the content on-page and accessible to screen-readers for accessibility and search engines for SEO.

• hideText()

<a href="#">
	Learn More
	<span>about our product xyz</span>
</a>

a span {
	@include theme.mixin_hideText;
}

Breakpoints

For responsive designs standard breakpoints are provided

• "xs" - 480px
• "sm" - 767px
• "md" - 992px
• "lg" - 1200px
• "xl" - 1440px
• "xxl" - 1600px

breakpoint_query

• query($breakpoint, $direction: "max")
• Any of the above strings can be passed in as \$breakpoint

div {
	column-count: 2;

	@include theme.breakpoint_query("sm") {
		column-count: 1;
	}
}

SCSS variables

$xs: 480px;
$xs-max: 767px;
$md: 992px;
$lg: 1200px;
$xl: 1440px;
$xxl: 1600px;

div {
	max-width: theme.$breakpoint_xxl;
	margin: auto;
}