Customize in Oxygen Builder

Getting Started

Getting Started

Create a stylesheets to be able to modify the base properties of the Tokens.

1. In the Builder, go to Stylesheets → Add Folder → Enter a name oxyblock-core → OK
2. Click on oxyblock-core → Add Stylesheets → Enter a name ob-custom-tokens → OK
3. Paste this code in the Style Sheet

:root {
  /* CUSTOM CODE HERE */
}

Modify the Colors Tokens

You want to modify the base colors as primary, secondary or others from the Colors Base and if you want to modify their variations in Colors Variants

/* COLOR PRIMARY */
--ob-primary-h: 6;
--ob-primary-s: 71%;
--ob-primary-l: 44%;

--ob-primary-l-50: 96%;
--ob-primary-l-100: 92%;
--ob-primary-l-200: 85%;
--ob-primary-l-300: 77%;
--ob-primary-l-400: 70%;
--ob-primary-l-500: var(--ob-primary-l);
--ob-primary-l-600: 50%;
--ob-primary-l-700: 37%;
--ob-primary-l-800: 25%;
--ob-primary-l-900: 12%;

/* COLOR SECONDARY */
--ob-secondary-h: 214;
--ob-secondary-s: 28%;
--ob-secondary-l: 26%;

--ob-secondary-l-50: 96%;
--ob-secondary-l-100: 92%;
--ob-secondary-l-200: 82%;
--ob-secondary-l-300: 71%;
--ob-secondary-l-400: 55%;
--ob-secondary-l-500: var(--ob-secondary-l);
--ob-secondary-l-600: 23%;
--ob-secondary-l-700: 20%;
--ob-secondary-l-800: 16%;
--ob-secondary-l-900: 11%;

Modify the Typography Tokens

You want to modify the font size variables in Font Size

--ob-text-base-size: 62.5%;
--ob-text-unit: 1.2rem;

--ob-text-xs: calc(var(--ob-text-unit) * 1);
--ob-text-4xl: calc(var(--ob-text-unit) * 4);

Modify the Sizes Tokens

You want to modify the font size variables in Size 4 points

--ob-size-unit  1.2rem

--ob-size-2: calc( var(--ob-size-unit) * 1 );
--ob-size-8: calc( var(--ob-size-unit) * 4 );
--ob-size-20: calc( var(--ob-size-unit) * 10 );