NR-Theme

Description

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.

Installation and Usage

Prerequisite

Your project needs to have Sass configured to load .scss files

Install from npm (for React + Carbon project)

1. Install the package:

npm i @bcgov-nr/nr-theme

2. Create a styles.scss file in your project, and add the following code to the file:

@use "@bcgov-nr/nr-theme/style-sheets/overrides.scss";

3. Import the styles.scss file in your application entry file (e.g., main.tsx):

import "./styles.scss";

Use your own copy of the stylesheet (for React + Carbon project)

Please check the sample main.tsx file for a React application:

• In your project, create a new folder called styles under src
• Copy the assets/font folder to the styles folder
• Copy the design-tokens folder to the styles folder
• Copy the style-sheets/overrides.scss file to the styles folder. The styles folder should look like
• Import the overrides.scss file into your main.tsx
• Config the theme in main.tsx and use "SideNav" and "Content" component to apply the layout

import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "@carbon/styles/css/styles.css";
import "./styles/style-sheets/overrides.scss";

import { Theme } from "@carbon/react";
import {
  Header,
  HeaderName,
  SideNav,
  SideNavItems,
  SideNavLink,
  Content,
  Toggle,
} from "@carbon/react";
import { Home, Information } from "@carbon/icons-react";

const RootComponent = () => {
  const [theme, setTheme] = useState<"g10" | "g100">("g10");

  const handleToggle = (checked: boolean) => {
    setTheme(checked ? "g100" : "g10");
  };

  return (
    <StrictMode>
      <Theme theme={theme}>
        <Header aria-label="Carbon UI Shell Example">
          <HeaderName href="#" prefix="IBM">
            MyApp
          </HeaderName>

          <div style={{ marginLeft: "auto", marginRight: "1rem" }}>
            <Toggle
              id="theme-toggle"
              labelA="Light"
              labelB="Dark"
              toggled={theme === "g100"}
              onToggle={handleToggle}
            />
          </div>
        </Header>

        <SideNav isFixedNav expanded isChildOfHeader={false}>
          <SideNavItems>
            <SideNavLink href="#" renderIcon={Home}>
              Home
            </SideNavLink>

            <SideNavLink href="/about" renderIcon={Information} isActive>
              About
            </SideNavLink>
          </SideNavItems>
        </SideNav>

        <Content>
          <App />
        </Content>
      </Theme>
    </StrictMode>
  );
};

createRoot(document.getElementById("root")!).render(<RootComponent />);

Usage (React)

• Create a custom.scss file in ./src
• Add import './custom.scss'; to your App.tsx file
• Configure your custom.scss file to your taste with this example
• Add a global css prefix bx to your project
  • in ./src/index.tsx:
    • import { ClassPrefix } from '@carbon/react';
  • wrap your <App /> with ClassPrefix:

    • <ClassPrefix prefix="bx">
          <App />
      </ClassPrefix>

Usage (Vue3)

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
  

Usage (Application Landing Page)

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';