ds-sdc-core

This package contains the theming functionality for the Journey Design System

Getting started

To install the IRCC Digital Journey Labs Design System styles, you will need to run the following command using npm:

npm install --save-dev @ircc-ca/ds-sdc-core

Usage

In your root-level stylesheet, initialize the design system with:

@use '~@ircc-ca/ds-sdc-core/index' as ircc-ds;
@include ircc-ds.theme-init-required(ircc-ds.palette-journeylab(), default, large, light);
@include ircc-ds.element-styles();

Alternatively, you can pass in dark instead of light as the final parameter of theme-init-required() to initialize only the dark color scheme, or system if you would like to default to the user's operating system settings.

A list of elements can be passed to element-styles() to include, should only certain element styles be desired.

Element style tokens and layouts

• Button
• Checkbox
• Global
• Link
• Radiobutton

Partials

• Disable

• Focus

• Layout

• Paint

• Snapins material

Constant tokens

• Common size constants
• Template constants
• Font sizes and families

Typography

• Fontawesome imports and declarations
• Heading and Body imports and declarations
• Typography levels and usage declarations

Utilities

• Color mode and token
• Size mode and token
• Theming utilities for contextual css
• Device capabilities and user contextual settings
• Additional Integer related math
• Additional functions for Sass Lists
• Additional functions for Sass Strings

Notes

A css reset is not currently expected or required, if you are experiencing an unexpected visual bug, please submit a Bug. This package is intended to apply with minimal effort based on HTML tags and minimal use of class selectors to reduce overhead in existing projects. As this project is a work in progress, usage of multiple design systems is recommended, so long as they don't visually conflict. If you find an issue, please submit a Bug or Feature Request on our Github and add the core tag.