@taktikal/branding

What is this package for?

Taktikal does a lot of white-label "branded UI". Companies provide their primary color, and we generate a color system from that primary color which our UI components make use of.

This package is responsible for generating themes based on primary colors, and passing those themes on to UI components. It also provides Taktikal's own theme, for use within non-branded UI.

Getting started

This package requires @taktikal/stylesheets as a peer dependency, so install it first.

npm i -S @taktikal/stylesheets@latest

This package extends @taktikal/stylesheet's CSSVariables interface with the theme variables from our color system. It does that via cssVariables.d.ts. You will need to reference cssVariables.d.ts in your project's tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "@taktikal/branding/cssVariables"
      // ...
    ]
  }
}

If your project wants the default theme to be Taktikal's theme, you can provide it via TaktikalThemeStylesheetContext. If your project uses Next.js, add this to the root of your custom App (_app.tsx).

return (
  <TaktikalThemeStylesheetContext>
    ...
  </TaktikalThemeStylesheetContext>
);

You can provide a branded theme with BrandedThemeStylesheetContext.

return (
  <BrandedThemeStylesheetContext colorPrimary={colorPrimary}>
    ...
  </BrandedThemeStylesheetContext>
);

It takes a single required prop of colorPrimary which should be a hex color string.

It also accepts an optional apply boolean prop. By default it's true, but if set to false the TaktikalThemeStylesheetContext will be used instead. This is just a convenience for the case where you have a "use branded UI" boolean.

return (
  <BrandedThemeStylesheetContext
    colorPrimary={colorPrimary}
    apply={shouldUseBrandedUI}
  >
    ...
  </BrandedThemeStylesheetContext>
);

Usage

This package just provides values that @taktikal/stylesheets can make use of. You see how @taktikal/stylesheets is used here.

This package extends CSSVariables like so:

interface CSSVariables {
  dominant500: string;
  unsafe_primary: string;

  black500: string;

  light500: string;
  light700: string;
  light800: string;
  light900: string;

  medium100: string;
  medium200: string;
  medium300: string;
  medium400: string;
  medium500: string;
  medium600: string;
  medium700: string;
  medium800: string;

  dark100: string;
  dark200: string;
  dark300: string;
  dark400: string;

  /**
   * Number from 0-100.
   *
   * 0 is black, 100 is white.
   */
  primaryBrightness: number;
  isPrimaryLight: boolean;
  isBranded: boolean;
}