How to use @patternfly/react-tokens - 10 common examples

normal: global_FontWeight_normal && global_FontWeight_normal.var,
    semi_bold: global_FontWeight_semi_bold && global_FontWeight_semi_bold.var,
    bold: global_FontWeight_bold && global_FontWeight_bold.var,
    link: global_link_FontWeight && global_link_FontWeight.var
  },

  // Array or Object: Values for lineHeight prop
  lineHeights: {
    sm: global_LineHeight_sm && global_LineHeight_sm.var,
    md: global_LineHeight_md && global_LineHeight_md.var
  },

  // Array or Object: Values for border props
  borders: {
    sm: global_BorderWidth_sm && `${global_BorderWidth_sm.var} solid`,
    md: global_BorderWidth_md && `${global_BorderWidth_md.var} solid`,
    lg: global_BorderWidth_lg && `${global_BorderWidth_lg.var} solid`
  },

  // Array or Object: Values for boxShadow prop
  shadows: {
    sm: global_BoxShadow_sm && global_BoxShadow_sm.var,
    sm_left: global_BoxShadow_sm_left && global_BoxShadow_sm_left.var,
    sm_right: global_BoxShadow_sm_right && global_BoxShadow_sm_right.var,
    sm_bottom: global_BoxShadow_sm_bottom && global_BoxShadow_sm_bottom.var,
    sm_top: global_BoxShadow_sm_top && global_BoxShadow_sm_top.var,
    md: global_BoxShadow_md && global_BoxShadow_md.var,
    md_left: global_BoxShadow_md_left && global_BoxShadow_md_left.var,
    md_right: global_BoxShadow_md_right && global_BoxShadow_md_right.var,
    md_bottom: global_BoxShadow_md_bottom && global_BoxShadow_md_bottom.var,
    md_top: global_BoxShadow_md_top && global_BoxShadow_md_top.var,
    lg: global_BoxShadow_lg && global_BoxShadow_lg.var,

/* eslint-disable camelcase */
import {
  global_Color_dark_100,
  global_Color_dark_200,
  global_Color_light_100,
  global_success_color_100,
  global_success_color_200,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {

global_Color_light_100,
  global_success_color_100,
  global_success_color_200,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

global_success_color_200,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

// Labels
const LABEL_PROPS = {

global_Color_dark_100,
  global_Color_dark_200,
  global_Color_light_100,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_200.value;
const COLOR_FILL = global_active_color_200.value;
const COLOR_SCALE = ['#39a5dc', '#9C92F5', '#59C768', '#FFD47D'];
const COLOR_STACK_STROKE = global_Color_light_100.value;
const COLOR_STROKE = global_active_color_300.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

global_Color_dark_200,
  global_Color_light_100,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_active_color_200.value;
const COLOR_SCALE = ['#39a5dc', '#9C92F5', '#59C768', '#FFD47D'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_active_color_300.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

// Labels

/* eslint-disable camelcase */
import {
  global_active_color_200,
  global_active_color_300,
  global_Color_dark_100,
  global_Color_dark_200,
  global_Color_light_100,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_active_color_200.value;
const COLOR_SCALE = ['#39a5dc', '#9C92F5', '#59C768', '#FFD47D'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_active_color_300.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {

global_Color_light_100,
  global_success_color_100,
  global_success_color_200,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_200.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_light_100.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

global_Color_light_100,
  global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';

// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_active_color_200.value;
const COLOR_SCALE = ['#39a5dc', '#9C92F5', '#59C768', '#FFD47D'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_active_color_300.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;

// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

// Labels
const LABEL_PROPS = {

// Layout
const LAYOUT_PROPS = {
  width: 451, // Todo: want to ensure the value is coming from theme
  height: 301,
  padding: 8,
  colorScale: COLOR_SCALE
};

// Labels
const LABEL_PROPS = {
  fontFamily: TYPOGRAPHY_FONT_FAMILY,
  fontSize: TYPOGRAPHY_FONT_SIZE,
  letterSpacing: TYPOGRAPHY_LETTER_SPACING,
  padding: 10,
  fill: global_Color_dark_100.value,
  stroke: 'transparent'
};
const LABEL_CENTERED_PROPS = Object.assign({ textAnchor: 'middle' }, LABEL_PROPS);

// Strokes
const STROKE_LINE_CAP = 'round';
const STROKE_LINE_JOIN = 'round';

export default Theme({
  COLOR_AXIS_FILL,
  COLOR_AXIS_STROKE,
  COLOR_FILL,
  COLOR_SCALE,
  COLOR_STACK_STROKE,
  COLOR_STROKE,
  COLOR_TOOLTIP_FILL,