Blueprint Styler

Overview:

Blueprint Styler is a tool that allows users to create custom global styles for Blueprint.js components using CSS custom properties, also known as “Tokens”. By overriding the default Blueprint global CSS, users can have more control over the styling of the components. There are two ways to create a custom theme: integrating Blueprint Styler into an existing project or creating a new theme within the Blueprint Styler project itself.

Features:

• Custom Global Styles: Override or replace the default Blueprint global CSS with custom styles.
• CSS Custom Properties: Use CSS custom properties (Tokens) to define and manage the styling of Blueprint.js components.
• Integration with Existing Project: Easily install Blueprint Styler into an existing project and import the necessary styles.
• Demo React App: Develop and test themes in the demo React app provided with Blueprint Styler.
• Theme Manifest: Add new themes to the style manifest file for easy reference and selection.
• Style Overrides: Copy and paste existing styles from Blueprint Styler’s library and modify them to create custom styles.
• Utility SCSS Files: Access utility SCSS files in the global folder for additional styling options.

Installation:

Theme Blueprint In Your Project:

1. Install Blueprint Styler in your project by running either of the following commands:
   • npm install blueprint-styler
   • yarn add blueprint-styler
2. Import the blueprint base styles from ./base/blueprint.css and ./base/blueprint-tokens.css.
3. Optionally, import an existing style override to start from, located at ./overrides/{style_name}/override.css and ./overrides/{style_name}/override-tokens.css.
4. In your CSS file, add a :root selector and override the --custom-properties from blueprint-tokens.css.
5. If needed, override global CSS in blueprint.css for additional control.

Create A Blueprint Theme In This Project:

1. Create a new _example folder in ./src/styles.
2. The _example folder must contain:
   • A root SCSS file named index.scss, which will compile into the overrides/example/override.css and overrides/example/override-tokens.css files. This file must also set the $ns (namespace) and !default $root-selector variables.
   • A secondary root file named styler-styles.scss that extends index.scss to style the demo React app components. This file must reset the $root-selector to scope the style to an app’s theme switching method.
3. Add your theme to the src/styles/style-manifest.ts file, following the pattern of other themes.
4. Ensure that everything exported is wrapped in a #{$root-selector} {...} block to scope it accordingly.
5. Copy and paste variables and styles from files in ./src/styles/_blueprint/common/ and ./src/styles/_blueprint/components/, and change the values to override them.
6. Test your theme by running the demo app with yarn start, accessing http://localhost:9000/, and selecting the theme from the style dropdown.

Summary:

Blueprint Styler is a versatile tool that allows users to create custom global styles for Blueprint.js components. By utilizing CSS custom properties and overrides, users can have full control over the styling of these components. With the option to integrate into an existing project or create a new theme within the Blueprint Styler project, users have flexibility in how they implement and test their custom styling. The provided demo app and utility SCSS files further enhance the customization capabilities of Blueprint Styler.