How to use the @patternfly/react-tokens.global_Color_light_100.value function in @patternfly/react-tokens

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
};

// Labels

// 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_light_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,

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_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_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
};

// Labels

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_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,

// 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_light_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,

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 = {
  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_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
};

function getBackground(status, backgroundColor = global_Color_light_100.value) {
  switch (status) {
    case "running":
      return `linear-gradient(to right,${global_active_color_100.value} 0,${
        global_active_color_100.value
      } 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
    case "completed":
      return `linear-gradient(to right,${global_success_color_100.value} 0,${
        global_success_color_100.value
      } 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
    case "failed":
      return `linear-gradient(to right,${global_danger_color_100.value} 0,${
        global_danger_color_100.value
      } 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
    default:
      return `linear-gradient(to right,${global_warning_color_100.value} 0,${
        global_warning_color_100.value

import { css, StyleSheet } from '@patternfly/react-styles';

const styles = StyleSheet.create({
  demoLayout: {
    backgroundColor: global_BackgroundColor_dark_100.value,
    backgroundImage: 'url("/assets/images/pfbg_1200.jpg")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    '& > *': {
      '.chart-overflow': {
        '& svg': {
          overflow: 'visible'
        }
      },
      '.chart-title': {
        color: global_Color_light_100.value,
        marginBottom: '25px',
        marginLeft: '10px'
      }
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });