How to use the @times-components/styleguide.colours.section function in @times-components/styleguide

/* eslint-disable react/prop-types */

import React from "react";
import { View } from "react-native";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

const styles = {
  color: colours.section.comment,
  fontFamily: fonts.supporting,
  fontSize: fontSizes.cardMetaMobile,
  letterSpacing: 0.6,
  lineHeight: 12
};

const authorsAST = require("./fixtures/authors.json");

const preventDefaultedAction = decorateAction =>
  decorateAction([
    ([e, ...args]) => {
      e.preventDefault();
      return ["[SyntheticEvent (storybook prevented default)]", ...args];
    }
  ]);

showSummaryContent && 
            }
            datePublicationProps={{ date: publishedTime }}
            headline={() => (
              
                
              
            )}
            labelProps={{
              color: colours.section[section] || colours.section.default,
              title: label
            }}
          />
        
      
    
  );
};

bylines
                          ? {
                              ast: bylines,
                              color: colours.section.default
                            }
                          : null
                      }
                      content={this.renderContent}
                      datePublicationProps={{
                        date: publishedTime,
                        publication: publicationName
                      }}
                      headline={this.renderHeadline()}
                      labelProps={{
                        color:
                          colours.section[section] || colours.section.default,
                        isVideo: hasVideo,
                        title: label
                      }}
                    />
                  
                
              
            
          
        )}

{({ theme: { sectionColour } }) => (
              
            )}

component: ({ select }) => (
        
      ),
      name: "With title",

const childProps = {
    bylineProps: bylines
      ? {
          ast: bylines,
          color: colours.section.default
        }
      : null,
    datePublicationProps: {
      date: publishedTime,
      publication: publicationName
    },
    headline: (
      
    ),
    labelProps: {
      color: colours.section[section] || colours.section.default,
      isVideo: hasVideo,
      title: label
    }
  };

  const children = showImage ? (
    }
    />
  ) : (
    
      
        }

imageWrapper: {
    width: 60,
    height: 45
  },
  mastheadLogo: {
    width: 285,
    height: 73,
    marginVertical: spacing(2)
  },
  separator: {
    borderBottomColor: colours.functional.keyline,
    marginVertical: spacing(5),
    width: "100%"
  },
  title: {
    color: colours.section.comment,
    fontFamily: fonts.body,
    fontSize: fontSizes.secondary,
    marginBottom: spacing(5)
  }
};

const mediumBreakpointStyles = {
  container: {
    ...smallBreakpointStyles.container,
    marginHorizontal: spacing(6),
    marginVertical: spacing(3),
    padding: spacing(3)
  },
  column: {
    flex: 1
  },

/>
                      );
                    })}
                  
                )
              }
              datePublicationProps={{ date: publishedTime, showDay: false }}
              headline={
                
              }
              labelProps={{
                color: colours.section[section] || colours.section.default,
                isVideo: hasVideo,
                title: label
              }}
            />
          
        
      ),
      onPress
    });
  }
}

import {
  colours,
  fonts,
  fontSizes,
  spacing
} from "@times-components/styleguide";

const styles = {
  bylineOpinion: {
    color: colours.section.comment,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMetaMobile,
    letterSpacing: 0.6,
    lineHeight: 12,
    marginTop: spacing(3),
    textTransform: "uppercase"
  },
  container: {
    alignItems: "center",
    paddingTop: spacing(4),
    paddingBottom: spacing(2)
  },
  headline: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.tileLeadHeadline,

const selectSection = select =>
  select("Section", pick(colours.section, sections), colours.section.default);