Basics

Source: index.md

Installation

Lightelligence Styles can be integrated to any project by installing the npm package via npm.

$ npm install @lightelligence/styles --save-dev

Usage

In your index.html page you need to make sure you add the index.css file :

<html>
<head>
    <title>My awesome Lightelligence App</title>
    <link href="node_modules/@lightelligence/styles/dist/index.css" rel="stylesheet"/>
</head>
<body>
<div class="olt-Frame">
    <button class="olt-Button">Hello World</button>
</div>
</body>
</html>

The index.css file exist under node_modules/@lightelligence/styles/dist/index.css. In most cases you need to add the whole dist/ directory to your public/dist directory of your project to make those files accessible by the browser

The index.css file itself will load the necessary fonts from dist/fonts, so you don't need to worry about adding those manually.

Make sure that you also wrap your content in a olt-Frame class, which will set defaults for most of the common elements. Part of the properties set by olt-Frame are colors, fonts, box-sizing, etc.

Known issues

Currently there is a bug with cssnano, which affects users of this styleguide to minify the output of their CSS files.

The bug is reported and the following workaround needs to be used until the external library is updated :

In package.json file of your application please include :

{
 "name": "...",
 ...
 "cssnano": {
    "preset": [
      "default",
      {
        "calc": false
      }
    ]
  }
}

Concepts

Source: core/concepts.md

Modular Notation

Lightelligence UI relies on SUIT css naming patterns. If you got used to lowercase and dashes, it might look unfamiliar at first, but this will change very quickly because SUIT just makes sense where classic BEM either gets messy or just isn't suited, i.e. responsive utilities aren't covered by classic BEM.

Namespace

In order to prevent collisions, any of the css names get prefixed with the olt- namespace except for the state-classes which should never go alone.

OLT stands for OSRAM Lightelligence

Components

Component names are denoted in pascalcase, e.g. Card.

Syntax: olt-<Component>

Descendants

Descendant names are camelcase. Separated by their parent component's name by a single dash, e.g. Card-header.

Syntax: olt-<Component> olt-<ComponentName>-<descendant>

Modifiers

Modifier names add up to the component, separated by double-dash, e.g. Card--primary.

Syntax: olt-<Component>--<modifier>

States

State css names are camelcase and prefixed by is-, e.g. Button is-disabled.

Syntax: olt-<Component> is-<state>

Utilities

All utility classes are camelcase and prefixed with u-.

You may target particular screens by adding a breakpoint-infix, e.g. md- targets everything above. Combine multiple classes in order.

Syntax: olt-u-[sm-|md-|lg-|xl-]<utility>{Value1|Value2|...}.

Interactions

All interactive components work out of the box without the need of Javascript. Have a look at the examples to find out what is particularly needed in order to make it happen. However, you could always opt-out of this behavior by simply omitting trigger elements and control state classes via Javascript.

Colors

We support a set of Colors

Color	Name	Utility Class
	Primary	`olt-u-colorPrimary`
	Secondary	`olt-u-colorSecondary`
	Info	`olt-u-colorInfo`
	Warning	`olt-u-colorWarning`
	Error	`olt-u-colorError`
	Success	`olt-u-colorSuccess`
	Light ( White )	`olt-u-colorLight`
	Dark	`olt-u-colorDark`

Screen

Source: core/screen.md

Breakpoints

The styleguide uses the following breakpoints :

Name	Extra small	Small	Medium	Large	Extra large
Breakpoint	<576px	≥576px	≥768px	≥992px	≥1200px
Prefix	xs	sm	md	lg	xl

Custom media

In order to make your own custom stuff responsive along the lines of this without hardcoding breakpoints in media-queries, @lightelligence/styles provides suitable definitions as @custom-media-rules.

@custom-media --olt-xs-down (max-width: 575.98px);
@custom-media --olt-sm-up (min-width: 576px);
@custom-media --olt-sm-down (max-width: 767.98px);
@custom-media --olt-md-up (min-width: 768px);
@custom-media --olt-md-down (max-width: 991.98px);
@custom-media --olt-lg-up (min-width: 992px);
@custom-media --olt-lg-down (max-width: 1199.98px);
@custom-media --olt-xl-up (min-width: 1200px);

Usage

@media (--olt-md-up) {
  /* Styles for tablet portrait and above */
}

Please note that @custom-media at-rule as being part of "Media Queries Level 5" isn't supported natively by any browser today, so you will need to transpile your css for getting it to work, e.g. using postcss-custom-media.

White labeling

Source: core/white-labeling.md

Description

Lightelligence styles supports limited white labeling that can achieve the effect of having a feel of your application to match different corporate styles.

The white labeling feature includes changing the primary color :

Color	Name	CSS Custom Property
	Primary	`--olt-colorPrimary`

Exposed custom properties

The design system's primary color that can be white labeled is exposed as CSS Custom Properties. However since there are additional shades of that color, which are mainly a mix between white and dark, there are also additional exposed CSS Custom Properties.

All those additional shades, though, can be derived by a color calculation between the Primary / Secondary and a black or white colors. See example below on how to properly use the white labeling feature with JavaScript.

:root {

  /**
   * The two major colors that are selectable
   */
  --olt-primaryColor: #f60;

  /**
   * Color variations that are calculations based on the above colors.
   */
  --olt-primaryColor-white-10: #fff0e6;
  --olt-primaryColor-white-15: #ffe8d9;
  --olt-primaryColor-white-20: #ffe0cc;
  --olt-primaryColor-white-30: #ffd1b3;
  --olt-primaryColor-white-40: #ffc299;
  --olt-primaryColor-white-50: #ffb380;
  --olt-primaryColor-white-60: #ffa366;
  --olt-primaryColor-white-70: #ff944d;
  --olt-primaryColor-white-80: #ff8533;
  --olt-primaryColor-black-10: #1a0a00;
  --olt-primaryColor-black-15: #260f00;
  --olt-primaryColor-black-20: #331400;
  --olt-primaryColor-black-30: #4d1f00;
  --olt-primaryColor-black-40: #662900;
  --olt-primaryColor-black-50: #803300;
  --olt-primaryColor-black-60: #993d00;
  --olt-primaryColor-black-70: #b34700;
  --olt-primaryColor-black-80: #cc5200;
  --olt-primaryColor-secondary-30: #562b1f;
  --olt-primaryColor-secondary-40: #6e341a;
  --olt-primaryColor-secondary-80: #cf5509;

  /**
   * Color that are exposed as read-only.
   */
  --olt-readonly-secondaryColor: #0d122c;
  --olt-readonly-errorColor: #fd5952;
  --olt-readonly-successColor: #02bf1b;
  --olt-readonly-infoColor: #46b4cd;
  --olt-readonly-warningColor: #ffc94d;
  --olt-readonly-lightColor: #fff;
  --olt-readonly-darkColor: #000;
  --olt-readonly-gray100Color: #f5f6f8;
  --olt-readonly-gray200Color: #e9ecef;
  --olt-readonly-gray300Color: #e3e4e5;
  --olt-readonly-gray400Color: #d0d1d3;
  --olt-readonly-gray500Color: #a7a8aa;
  --olt-readonly-gray600Color: #58585a;
  --olt-readonly-gray700Color: #343a40;
  --olt-readonly-gray800Color: #2e3338;
  --olt-readonly-gray900Color: #212529;

}

Example

.input--color-box {
  width: 100px;
  height: 17px;
  border-radius: 4px;
  margin-left: 15px;
  border: 2px solid white;
  display: inline-block;
}
.input--color {
  opacity: 0;
}


const styles = getComputedStyle(document.documentElement);
const documentStyle = document.documentElement.style;
const primaryPicker = document.getElementById("primaryPicker");
const primaryValue = document.getElementById("primaryValue");
const primaryProperty = '--olt-primaryColor';

const mixes = [
  {
    name: "white",
    color: "#fff",
    shades: [0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8]
  },
  {
    name: "black",
    color: "#000",
    shades: [0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8]
  },
  {
    name: "secondary",
    color: "#0d122c",
    shades: [0.3, 0.4, 0.8]
  }
]

// We use https://www.github.com/bgrins/TinyColor to calculate the colors
const primaryColor = tinycolor( styles.getPropertyValue( primaryProperty ) );

primaryPicker.value = primaryColor.toHexString();

function updateValues( primaryColor ) {
  primaryValue.style.backgroundColor = primaryColor.toHexString();
}

function updateStylesheets( primaryColor ) {
  documentStyle.setProperty( primaryProperty, primaryColor.toHexString() );
  mixes.forEach( mix => {
    const name = mix.name;
    const color = mix.color;
    mix.shades.forEach( shade => {
      const mixProperty = prefix => `${prefix}-${name}-${shade * 100}`;
      const primaryMix = tinycolor.mix( color, primaryColor, shade * 100 );
      const primaryPropertyName = mixProperty( primaryProperty );
      documentStyle.setProperty( primaryPropertyName, primaryMix.toHexString() );
    } );
  } );
}

function update() {
  const primaryColor = tinycolor( primaryPicker.value );
  updateValues( primaryColor );
  updateStylesheets( primaryColor );
}

primaryPicker.addEventListener('change', update);

update();

const darkModeToggle = document.getElementById("darkToggle");
const card = document.getElementById("card");
darkModeToggle.addEventListener('change', () => {
  const isDarkMode = darkModeToggle.checked;
  console.log( isDarkMode );
  if ( isDarkMode ) {
    card.style.backgroundColor = "#0d122c";
    card.classList.add("olt-Theme-dark");
  } else {
    card.style.backgroundColor = "#fff";
    card.classList.remove("olt-Theme-dark");
  }
} );

Prefix	Column fixed size	Column auto size	Offset
xs	`olt-Grid-item--xs-1`	`olt-Grid-item--xs-auto`	`olt-Grid-item--xs-offset1`
sm	`olt-Grid-item--sm-1`	`olt-Grid-item--sm-auto`	`olt-Grid-item--sm-offset1`
md	`olt-Grid-item--md-1`	`olt-Grid-item--md-auto`	`olt-Grid-item--md-offset1`
lg	`olt-Grid-item--lg-1`	`olt-Grid-item--lg-auto`	`olt-Grid-item--lg-offset1`
xl	`olt-Grid-item--xl-1`	`olt-Grid-item--xl-auto`	`olt-Grid-item--xl-offset1`

Class name	CSS properties
`olt-u-alignItemsStart`	`align-items: flex-start`
`olt-u-alignItemsCenter`	`align-items: center`
`olt-u-alignItemsEnd`	`align-items: flex-end`
`olt-u-alignItemsStretch`	`align-items: stretch`
`olt-u-alignItemsBaseline`	`align-items: baseline`

Prefix	Example	Description
xs	`olt-u-xs-alignItemsStart`	Will set `align-items: flex-start` on the element when rendered on extra small screen
sm	`olt-u-sm-alignItemsCenter`	Will set `align-items: center` on the element when rendered on a small screen
md	`olt-u-md-alignItemsStart`	Will set `align-items: flex-start` on the element when rendered on a medium sized screen
lg	`olt-u-lg-alignItemsEnd`	Will set `align-items: flex-end` on the element when rendered on a large screen
xl	`olt-u-xl-alignItemsStart`	Will set `align-items: flex-start` on the element when rendered on extra large screen

Class name	Sets background color to
`olt-u-backgroundColorPrimary`
`olt-u-backgroundColorSecondary`
`olt-u-backgroundColorInfo`
`olt-u-backgroundColorError`
`olt-u-backgroundColorSuccess`
`olt-u-backgroundColorGray100`
`olt-u-backgroundColorGray200`
`olt-u-backgroundColorGray300`
`olt-u-backgroundColorGray400`
`olt-u-backgroundColorGray500`
`olt-u-backgroundColorGray600`
`olt-u-backgroundColorGray700`
`olt-u-backgroundColorGray800`
`olt-u-backgroundColorGray900`

Prefix	Example	Description
xs	`olt-u-xs-backgroundColorPrimary`	Will set primary background color on the element when rendered on extra small screen
sm	`olt-u-sm-backgroundColorSecondary`	Will set secondary background color on the element when rendered on a small screen
md	`olt-u-md-backgroundColorPrimary`	Will set primary background color on the element when rendered on a medium sized screen
lg	`olt-u-lg-backgroundColorError`	Will set error background color on the element when rendered on a large screen
xl	`olt-u-xl-backgroundColorInfo`	Will set info background color on the element when rendered on extra large screen

Class name	CSS Properties
`olt-u-border`	`border: 1px solid #E3E4E5;`
`olt-u-borderTop`	`border-top: 1px solid #E3E4E5;`
`olt-u-borderRight`	`border-right: 1px solid #E3E4E5;`
`olt-u-borderBottom`	`border-bottom: 1px solid #E3E4E5;`
`olt-u-borderLeft`	`border-left: 1px solid #E3E4E5;`
`olt-u-borderNone`	`border: none;`
`olt-u-borderTopNone`	`border-top: none;`
`olt-u-borderRightNone`	`border-right: none;`
`olt-u-borderBottomNone`	`border-bottom: none;`
`olt-u-borderLeftNone`	`border-left: none;`

Prefix	Example	Description
xs	`olt-u-xs-border`	Will set border on the element when rendered on extra small screen
sm	`olt-u-sm-borderTop`	Will set top border the element when rendered on a small screen
md	`olt-u-md-borderNone`	Will remove border of the element when rendered on a medium sized screen
lg	`olt-u-lg-borderBottomNone`	Will remove bottom border of the element when rendered on a large screen
xl	`olt-u-xl-borderLeft`	Will set left border on the element when rendered on extra large screen

Class name	Sets border color to
`olt-u-borderColorPrimary`
`olt-u-borderColorInfo`
`olt-u-borderColorError`
`olt-u-borderColorSuccess`
`olt-u-borderColorGray100`
`olt-u-borderColorGray200`
`olt-u-borderColorGray300`
`olt-u-borderColorGray400`
`olt-u-borderColorGray500`
`olt-u-borderColorGray600`
`olt-u-borderColorGray700`
`olt-u-borderColorGray800`
`olt-u-borderColorGray900`

Prefix	Example	Description
xs	`olt-u-xs-borderColorPrimary`	Will set primary border color on the element when rendered on extra small screen
sm	`olt-u-sm-borderColorSecondary`	Will set secondary border color on the element when rendered on a small screen
md	`olt-u-md-borderColorPrimary`	Will set primary border color on the element when rendered on a medium sized screen
lg	`olt-u-lg-borderColorError`	Will set error border color on the element when rendered on a large screen
xl	`olt-u-xl-borderColorInfo`	Will set info border color on the element when rendered on extra large screen

Prefix	Example	Description
xs	`olt-u-xs-colorPrimary`	Will set primary the color on the element when rendered on extra small screen
sm	`olt-u-sm-colorSecondary`	Will set secondary the color on the element when rendered on a small screen
md	`olt-u-md-colorPrimary`	Will set primary the color on the element when rendered on a medium sized screen
lg	`olt-u-lg-colorError`	Will set error the color on the element when rendered on a large screen
xl	`olt-u-xl-colorInfo`	Will set info the color on the element when rendered on extra large screen

large (24 x 24)	medium (16 x 16)	small (12 x 12)

Class name	CSS properties
`olt-u-displayNone`	`display: none`
`olt-u-displayInline`	`display: inline`
`olt-u-displayInlineBlock`	`display: inline-block`
`olt-u-displayBlock`	`display: block`
`olt-u-displayTable`	`display: table`
`olt-u-displayTableRow`	`display: table-row`
`olt-u-displayTableCell`	`display: table-cell`
`olt-u-displayFlex`	`display: flex`
`olt-u-displayInlineFlex`	`display: inline-flex`

Class name	CSS properties
`olt-u-flexRow`	`flex-direction: row`
`olt-u-flexRowReverse`	`flex-direction: row-reverse`
`olt-u-flexColumn`	`flex-direction: column`
`olt-u-flexColumnReverse`	`flex-direction: column-reverse`
`olt-u-flexWrap`	`flex-wrap: wrap`
`olt-u-flexWrapReverse`	`flex-wrap: wrap-reverse`
`olt-u-flexNowrap`	`flex-wrap: nowrap`

Class name	Reponsive	Sets the font to
`olt-u-H500`	x	Page Title
`olt-u-H400`	x	Card Title
`olt-u-H300`		Subtitle
`olt-u-H200`		Content Title
`olt-u-H100`		Stepper Title
`olt-u-content`		Content
`olt-u-description`		Description
`olt-u-support`		Support
`olt-u-code`	x	Code

Prefix	Example	Description
xs	`olt-u-xs-displayNone`	Will set `display: none` on the element when rendered on extra small screen
sm	`olt-u-sm-displayInline`	Will set `display: inline` on the element when rendered on a small screen
md	`olt-u-md-displayBlock`	Will set `display: block` on the element when rendered on a medium sized screen
lg	`olt-u-lg-displayFlex`	Will set `display: flex` on the element when rendered on a large screen
xl	`olt-u-xl-displayNone`	Will set `display: none` on the element when rendered on extra large screen

Prefix	Example	Description
xs	`olt-u-xs-flexRow`	Will set `flex-direction: row` on the element when rendered on extra small screen
sm	`olt-u-sm-flexColumn`	Will set `flex-direction: column` on the element when rendered on a small screen
md	`olt-u-md-flexRow`	Will set `flex-direction: row` on the element when rendered on a medium sized screen
lg	`olt-u-lg-flexWrap`	Will set `flex-wrap: wrap` on the element when rendered on a large screen
xl	`olt-u-xl-flexNowrap`	Will set `flex-wrap: nowrap` on the element when rendered on extra large screen

Font	L	M	S
Page Title (H500)	24px, bold, 32px line height	22px, bold, 26px line height	20px, bold, 24px line height
Card Title (H400)	20px, bold, 24px line height	20px, bold, 24px line height	18px, bold, 20px line height
Code	14px, 22px line height	14px, 22px line height	18px, 24px line height

Class name	CSS properties
`olt-u-justifyContentStart`	`justify-content: flex-start`
`olt-u-justifyContentCenter`	`justify-content: center`
`olt-u-justifyContentEnd`	`justify-content: flex-end`
`olt-u-justifyContentBetween`	`justify-content: space-between`
`olt-u-justifyContentAround`	`justify-content: space-around`
`olt-u-justifyContentEvenly`	`justify-content: space-evenly`

Prefix	Example	Description
xs	`olt-u-xs-justifyContentStart`	Will set `justify-content: start` on the element when rendered on extra small screen
sm	`olt-u-sm-justifyContentEnd`	Will set `justify-content: end` on the element when rendered on a small screen
md	`olt-u-md-justifyContentBetween`	Will set `justify-content: between` on the element when rendered on a medium sized screen
lg	`olt-u-lg-justifyContentEnd`	Will set `justify-content: end` on the element when rendered on a large screen
xl	`olt-u-xl-justifyContentStart`	Will set `justify-content: start` on the element when rendered on extra large screen

Class name	CSS properties
`olt-u-margin4`	`margin: 4px;`
`olt-u-marginTopAuto`	`margin-top: auto;`
`olt-u-marginRight96`	`margin-right: 96px;`
`olt-u-marginBottom8`	`margin-bottom: 8px;`
`olt-u-marginLeftAuto`	`margin-left: auto;`
`olt-u-marginXAuto`	`margin-left: auto; margin-right: auto;`
`olt-u-marginY16`	`margin-top: 16px; margin-bottom: 16px;`

Prefix	Example	Description
xs	`olt-u-xs-margin8`	Will set `margin: 8px` on the element when rendered on extra small screen
sm	`olt-u-sm-marginTop16`	Will set `margin-top: 16px;` on the element when rendered on a small screen
md	`olt-u-md-marginXAuto`	Will set `margin-left: auto; margin-right: auto;` on the element when rendered on a medium sized screen
lg	`olt-u-lg-marginBottom16`	Will set `margin-bottom: 16px;` to the element when rendered on a large screen
xl	`olt-u-xl-marginLeft4`	Will set `margin-left: 4px;` to the element when rendered on extra large screen

Class name	CSS properties
`olt-u-overflowAuto`	`overflow: auto`
`olt-u-overflowVisible`	`overflow: visible`
`olt-u-overflowHidden`	`overflow: hidden`
`olt-u-overflowScroll`	`overflow: scroll`
`olt-u-overflowInitial`	`overflow: initial`

Class name	CSS properties
`olt-u-overflowXAuto`	`overflow-x: auto`
`olt-u-overflowYHidden`	`overflow-y: hidden`

Prefix	Example	Description
xs	`olt-u-xs-overflowXauto`	Will set `overflow-x: auto` on the element when rendered on extra small screen
sm	`olt-u-sm-overflowScroll`	Will set `overflow: scroll` on the element when rendered on a small screen
md	`olt-u-md-overflowYVisible`	Will set `overflow-y: visible` on the element when rendered on a medium sized screen
lg	`olt-u-lg-overflowScroll`	Will set `overflow: scroll` on the element when rendered on a large screen
xl	`olt-u-xl-overflowHidden`	Will set `overflow: hidden` on the element when rendered on extra large screen

Basics

Installation

Usage

Known issues

Concepts

Modular Notation

Namespace

Components

Descendants

Modifiers

States

Utilities

Interactions

Colors

Screen

Breakpoints

Custom media

Usage

White labeling

Description

Exposed custom properties

Example

ActionButton

Description

Disabled

Avatar

Description

Colors

Sizes

Preset modifiers

Button

Description

Types

Progressing Actions

Light Theme (default)

Dark Theme

Completing Actions

Destructive Actions

Levels of emphasis

Light Theme

Dark Theme

Confirmative Actions

Levels of emphasis

Light Theme

Dark Theme

Emphasis

Theme

Types

Disabled

Progress

Decorations

Pagination

Card

Description

Examples

Card with title, description and context icon

Card with title, description, content and context icon

Card with title, content and image

Colors

Selectable Card

Edit Card

Nested Cards

Chip

Description

Colors

Variations

Disabled

Selectable

Decorations

Icons

Bubble

Dialog

Description

A title of a card

Filter

Description

Icon

Description

Colors

General

Class name	CSS properties
`olt-u-padding4`	`padding: 4px;`
`olt-u-paddingTop8`	`padding-top: 8px;`
`olt-u-paddingRight96`	`padding-right: 96px;`
`olt-u-paddingBottom8`	`padding-bottom: 8px;`
`olt-u-paddingLeft16`	`padding-left: 16px;`
`olt-u-paddingX16`	`padding-left: 16px; padding-right: 16px;`
`olt-u-paddingY16`	`padding-top: 16px; padding-bottom: 16px;`

Prefix	Example	Description
xs	`olt-u-xs-padding8`	Will set `padding: 8px` on the element when rendered on extra small screen
sm	`olt-u-sm-paddingTop16`	Will set `padding-top: 16px;` on the element when rendered on a small screen
md	`olt-u-md-paddingX24`	Will set `padding-left: 24px; padding-right: 24px;` on the element when rendered on a medium sized screen
lg	`olt-u-lg-paddingBottom16`	Will set `padding-bottom: 16px;` to the element when rendered on a large screen
xl	`olt-u-xl-paddingLeft4`	Will set `padding-left: 4px;` to the element when rendered on extra large screen

Class name	CSS properties
`olt-u-textAlignLeft`	`text-align: left`
`olt-u-textAlignCenter`	`text-align: center`
`olt-u-textAlignRight`	`text-align: right`
`olt-u-textAlignJustify`	`text-align: justify`
`olt-u-textAlignInitial`	`text-align: initial`

Prefix	Example	Description
xs	`olt-u-xs-textAlignLeft`	Will set `text-align: left` on the element when rendered on extra small screen
sm	`olt-u-sm-textAlignCenter`	Will set `text-align: center` on the element when rendered on a small screen
md	`olt-u-md-textAlignRight`	Will set `text-align: right` on the element when rendered on a medium sized screen
lg	`olt-u-lg-textAlignCenter`	Will set `text-align: center` on the element when rendered on a large screen
xl	`olt-u-xl-textAlignJustify`	Will set `text-align: justify` on the element when rendered on extra large screen