Customize in Oxygen Builder
Getting Started
Create a stylesheets to be able to modify the base properties of the Tokens.
- In the Builder, go to Stylesheets → Add Folder → Enter a name
oxyblock-core
→ OK - Click on oxyblock-core → Add Stylesheets → Enter a name
ob-custom-tokens
→ OK - 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 );