This is a common repository for maintaining the FDS (Forest Digital Service) design system code. The design system is built on top of the Carbon Design System within Figma. Feel free to check our Figma FDS Design System.
This repository provides the custom design tokens and custom stylesheets for Carbon UI libary and Primevue UI library to support the FDS Design System. A shared landing page styling can be found here.
Your project needs to have Sass configured to load .scss
files
npm i @bcgov-nr/nr-theme
yarn add @bcgov-nr/nr-theme
custom.scss
file in ./src
import './custom.scss';
to your App.tsx
filecustom.scss
file to your taste with this examplebx
to your project
./src/index.tsx
:
import { ClassPrefix } from '@carbon/react';
<App />
with ClassPrefix
:
<ClassPrefix prefix="bx">
<App />
</ClassPrefix>
For vue3 application, due to the restriction of the Carbon UI library, we will use PrimeVue to integrate with this common theme repo.
Configuration:
Follow the installation guide from PrimeVue official documentation to install PrimeVue
npm install primevue primeicons
Add the following the main.ts file
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
// use bootstrap4 as default style
import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
// import the component override style sheet for primevue
import '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
const app = createApp(App);
app.use(PrimeVue);
Install the SASS loader
npm install -D sass-loader sass
The landing page stylesheet can apply to all applications regardless the UI libraries. Apply the custom class name to your landing page elements, and import the landing page stylesheet.
@import '@bcgov-nr/nr-theme/style-sheets/landing-page-components-overrides.scss';