How to use @carbon/colors - 10 common examples

export const field02 = gray80;

export const inverse01 = gray100;
export const inverse02 = gray10;

export const support01 = red50;
export const support02 = green40;
export const support03 = yellow;
export const support04 = blue50;

export const inverseSupport01 = red60;
export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;

export const overlay01 = rgba(gray100, 0.7);

export const danger = red60;

// Interaction states
export const focus = white;
export const inverseFocusUi = blue60;

export const hoverPrimary = '#0353e9';
export const activePrimary = blue80;

export const hoverPrimaryText = blue30;

export const hoverSecondary = '#606060';
export const activeSecondary = gray80;

export const hoverTertiary = gray10;

export const field02 = gray70;

export const inverse01 = gray100;
export const inverse02 = gray10;

export const support01 = red50;
export const support02 = green40;
export const support03 = yellow;
export const support04 = blue50;

export const inverseSupport01 = red60;
export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;

export const overlay01 = rgba(gray100, 0.7);

export const danger = red60;

// Interaction states
export const focus = white;
export const inverseFocusUi = blue60;

export const hoverPrimary = '#0353e9';
export const activePrimary = blue80;

export const hoverPrimaryText = blue30;

export const hoverSecondary = '#606060';
export const activeSecondary = gray80;

export const hoverTertiary = gray10;

export const field02 = white;

export const inverse01 = white;
export const inverse02 = gray80;

export const support01 = red60;
export const support02 = green50;
export const support03 = yellow;
export const support04 = blue70;

export const inverseSupport01 = red50;
export const inverseSupport02 = green40;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue50;

export const overlay01 = rgba(gray100, 0.5);

export const danger = red60;

// Interaction states
export const focus = blue60;
export const inverseFocusUi = white;

export const hoverPrimary = '#0353e9';
export const activePrimary = blue80;

export const hoverPrimaryText = blue70;

export const hoverSecondary = '#4c4c4c';
export const activeSecondary = gray60;

export const hoverTertiary = '#0353e9';

export const field02 = gray10;

export const inverse01 = white;
export const inverse02 = gray80;

export const support01 = red60;
export const support02 = green50;
export const support03 = yellow;
export const support04 = blue70;

export const inverseSupport01 = red50;
export const inverseSupport02 = green40;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue50;

export const overlay01 = rgba(gray100, 0.5);

export const danger = red60;

// Interaction states
export const focus = blue60;
export const inverseFocusUi = white;

export const hoverPrimary = '#0353e9';
export const activePrimary = blue80;

export const hoverPrimaryText = blue70;

export const hoverSecondary = '#4c4c4c';
export const activeSecondary = gray60;

export const hoverTertiary = '#0353e9';