Skip to main content

Overview

Squeeze can be used with either Curology or Agency branding.

Using in your app​

The currently active brand is set at a global level, as there are no known use cases where multiple brands would be used in the same application.

To setup Squeeze for a particular brand, two steps are required:

  • Create the brand context provider
  • Import the appropriate CSS Custom Properties for the brand.

Typical usage​

BrandProvider React Component​

This component wraps your application in a context provider to make the brand available to all components. This is required in order to use any components which rely on being brand-aware.

DeclareBrandVariables React Component​

This component imports the appropriate CSS Custom Properties for the given brand. (Returns a <style> tag with the CSS Custom Properties for the brand)

Example: Using BrandProvider and DeclareBrandVariables in a brand-aware Next.js root layout

// src/app/[brand]/layout.tsx
import type { Brand } from '@curology/ui-components-web/brand';
import { BrandProvider } from '@curology/ui-components-web/brand/context';
import { DeclareBrandVariables } from '@curology/ui-components-web/brand/DeclareBrandVariables';

type Props = {
  children: React.ReactNode;
  params: { brand: Brand };
};

export default function Layout({ children, params: { brand } }: Props) {
  return (
    <html lang="en">
      <head>
        <DeclareBrandVariables brand={brand} />
      </head>
      <body>
        <BrandProvider brand={brand}>
          {children}
        </BrandProvider>
      </body>
    </html>
  );
}

Directly importing CSS Custom Properties​

If your application does not support multiple brands, you can directly import the CSS Custom Properties for the brand you are using. When using this method, you do not need to use the DeclareBrandVariables components.

Example:

// Some root level file in your app
import '@curology/ui-tokens/curology';
// OR
import '@curology/ui-tokens/agency';

How it works​

Components can be themed two ways: "tokens" or conditional code. For more information on how to style components based on a theme, read about Design Tokens and Tailwind, or conditionally applying styles based on theme.