1. Advisor
  2. @twilio-paste/design-tokens
  3. @twilio-paste/design-tokens code examples
View all @twilio-paste/design-tokens analysis

How to use @twilio-paste/design-tokens - 10 common examples

To help you get started, we’ve selected a few @twilio-paste/design-tokens examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github twilio-labs / paste / packages / paste-theme-tokens / src / default / index.ts View on Github external
borderColors,
  borderWidths,
  radii,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  boxShadows,
  sizings,
  spacings,
  textColors,
  zIndices,
} from '@twilio-paste/design-tokens';

const breakpoints = [sizings.size40, sizings.size100, sizings.size120];

export const DefaultTheme = {
  shadows: boxShadows,
  backgroundColors,
  borderColors,
  borderWidths,
  radii,
  breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
github twilio-labs / paste / packages / paste-theme-tokens / src / default / index.ts View on Github external
radii,
  breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / default / index.ts View on Github external
breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / default / index.ts View on Github external
colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / default / index.ts View on Github external
fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / sendgrid / index.ts View on Github external
borderColors,
  borderWidths,
  radii,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  boxShadows,
  sizings,
  spacings,
  textColors,
  zIndices,
} from '@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6';

const breakpoints = [sizings.size40, sizings.size100, sizings.size120];

export const SendGridTheme = {
  shadows: boxShadows,
  backgroundColors,
  borderColors,
  borderWidths,
  radii,
  breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
github twilio-labs / paste / packages / paste-theme-tokens / src / sendgrid / index.ts View on Github external
radii,
  breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / sendgrid / index.ts View on Github external
breakpoints,
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / sendgrid / index.ts View on Github external
colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};
github twilio-labs / paste / packages / paste-theme-tokens / src / sendgrid / index.ts View on Github external
fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  widths: sizings,
  maxWidths: sizings,
  minWidths: sizings,
  heights: sizings,
  maxHeights: sizings,
  minHeights: sizings,
  sizes: sizings,
  iconSizes: {
    sizeIcon10: sizings.sizeIcon10,
    sizeIcon20: sizings.sizeIcon20,
    sizeIcon30: sizings.sizeIcon30,
    sizeIcon40: sizings.sizeIcon40,
  },
  space: spacings,
  textColors,
  zIndices,
};

@twilio-paste/design-tokens

Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.

MIT
Latest version published 2 months ago

Package Health Score

66 / 100
Full package analysis

Popular @twilio-paste/design-tokens functions

Similar packages