@teamturing/token-studio 1.1.0

package/dist/index.js

@@ -0,0 +1,651 @@
+'use strict';
+
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
+const gray = {
+  gray50: '#F9FAFB',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray300: '#D1D5DB',
+  gray400: '#8D94A0',
+  gray500: '#7A828D',
+  gray600: '#6F7680',
+  gray700: '#575C64',
+  gray800: '#43484E',
+  gray900: '#33373B'
+};
+const violet = {
+  violet50: '#F3EFFD',
+  violet100: '#E8E1FB',
+  violet200: '#D9CDF9',
+  violet300: '#C6B5F6',
+  violet400: '#9C7EEF',
+  violet500: '#835EEB',
+  violet600: '#7756D6',
+  violet700: '#5D43A7',
+  violet800: '#483481',
+  violet900: '#372763'
+};
+const green = {
+  green50: '#E9FAF6',
+  green100: '#BAEFE2',
+  green200: '#98E8D4',
+  green300: '#69DDC0',
+  green400: '#4CD6B4',
+  green500: '#1FCCA1',
+  green600: '#1CBA93',
+  green700: '#169172',
+  green800: '#117059',
+  green900: '#0D5644'
+};
+const yellow = {
+  yellow50: '#FFF9E6',
+  yellow100: '#FFECB2',
+  yellow200: '#FFE28D',
+  yellow300: '#FFD559',
+  yellow400: '#FFCD39',
+  yellow500: '#FFC107',
+  yellow600: '#E8B006',
+  yellow700: '#B58905',
+  yellow800: '#8C6A04',
+  yellow900: '#6B5103'
+};
+const red = {
+  red50: '#FEE9EB',
+  red100: '#FBBCC0',
+  red200: '#F99CA2',
+  red300: '#F66E78',
+  red400: '#F5525D',
+  red500: '#F22735',
+  red600: '#DC2330',
+  red700: '#AC1C26',
+  red800: '#85151D',
+  red900: '#661016'
+};
+const blue = {
+  blue50: '#edf2fd',
+  blue100: '#c6d8fa',
+  blue200: '#abc5f7',
+  blue300: '#84aaf4',
+  blue400: '#6d99f1',
+  blue500: '#4880ee',
+  blue600: '#4274d9',
+  blue700: '#335ba9',
+  blue800: '#284683',
+  blue900: '#1e3664'
+};
+const shade = {
+  transparent: '#FFFFFF00',
+  white: '#FFFFFF',
+  white10A: '#FFFFFF1A',
+  black: '#000000',
+  black60A: '#00000099'
+};
+const palette = {
+  ...gray,
+  ...violet,
+  ...green,
+  ...yellow,
+  ...red,
+  ...blue,
+  ...shade
+};
+
+const textColor = {
+  'text/primary': palette.violet500,
+  'text/accent/blue': palette.blue500,
+  'text/accent/green': palette.green500,
+  'text/accent/yellow': palette.yellow500,
+  'text/accent/red': palette.red500,
+  'text/neutral/subtlest': palette.gray400,
+  'text/neutral/subtler': palette.gray500,
+  'text/neutral/subtle': palette.gray700,
+  'text/neutral': palette.gray900,
+  'text/inverse': palette.white,
+  'text/inverse/subtle': palette.gray200,
+  'text/inverse/subtler': palette.gray300,
+  'text/disabled': palette.gray400,
+  'text/success': palette.green500,
+  'text/warning': palette.yellow500,
+  'text/danger': palette.red500,
+  'text/selected/neutral': palette.gray900
+};
+const bgColor = {
+  'bg/secondary': palette.violet50,
+  'bg/secondary/hovered': palette.violet200,
+  'bg/secondary/pressed': palette.violet200,
+  'bg/primary': palette.violet500,
+  'bg/primary/hovered': palette.violet700,
+  'bg/primary/pressed': palette.violet700,
+  'bg/neutral/subtler': palette.transparent,
+  'bg/neutral/subtler/hovered': palette.gray100,
+  'bg/neutral/subtler/pressed': palette.gray100,
+  'bg/neutral/subtle': palette.gray50,
+  'bg/neutral/subtle/hovered': palette.gray200,
+  'bg/neutral/subtle/pressed': palette.gray200,
+  'bg/neutral': palette.gray100,
+  'bg/neutral/hovered': palette.gray300,
+  'bg/neutral/pressed': palette.gray300,
+  'bg/neutral/bold': palette.gray700,
+  'bg/neutral/bold/hovered': palette.gray900,
+  'bg/neutral/bold/pressed': palette.gray900,
+  'bg/neutral/bolder': palette.gray900,
+  'bg/neutral/bolder/hovered': palette.black,
+  'bg/neutral/bolder/pressed': palette.black,
+  'bg/disabled': palette.gray100,
+  'bg/disabled/subtlest': palette.transparent,
+  'bg/input': palette.white,
+  'bg/accent/green/subtlest': palette.green50,
+  'bg/accent/yellow/subtlest': palette.yellow50,
+  'bg/accent/red/subtlest': palette.red50,
+  'bg/accent/red/subtle': palette.red400,
+  'bg/accent/red': palette.red500,
+  'bg/accent/gray/subtlest': palette.gray200,
+  'bg/accent/blue/subtlest': palette.blue50,
+  'bg/selected/violet': palette.violet500,
+  'bg/selected/neutral': palette.gray900,
+  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/inverse': palette.black,
+  'bg/inverse/subtlest': palette.white10A,
+  'bg/success': palette.green50,
+  'bg/success/bold': palette.green500,
+  'bg/warning': palette.yellow50,
+  'bg/warning/bold': palette.yellow500,
+  'bg/danger': palette.red50,
+  'bg/danger/bold': palette.red400,
+  'bg/danger/bold/hovered': palette.red600,
+  'bg/danger/bold/pressed': palette.red600
+};
+const borderColor = {
+  'border/neutral/subtle': palette.gray100,
+  'border/neutral': palette.gray200,
+  'border/neutral/bolder': palette.gray300,
+  'border/input': palette.gray200,
+  'border/inverse': palette.white10A,
+  'border/disabled': palette.gray100,
+  'border/primary': palette.violet500,
+  'border/hovered': palette.blue300,
+  'border/focused': palette.blue500,
+  'border/danger': palette.red500,
+  'border/success': palette.green500
+};
+const iconColor = {
+  'icon/neutral': palette.gray300,
+  'icon/neutral/bold': palette.gray400,
+  'icon/neutral/bolder': palette.gray700,
+  'icon/accent/gray': palette.gray900,
+  'icon/accent/blue': palette.blue500,
+  'icon/accent/blue/bold': palette.blue700,
+  'icon/accent/green': palette.green500,
+  'icon/accent/yellow': palette.yellow500,
+  'icon/accent/red': palette.red500,
+  'icon/inverse': palette.white,
+  'icon/disabled': palette.gray300,
+  'icon/disabled/subtler': palette.gray200,
+  'icon/selected/primary': palette.violet500,
+  'icon/selected/neutral': palette.gray900,
+  'icon/primary': palette.violet500,
+  'icon/primary/subtle': palette.violet300,
+  'icon/primary/bold': palette.violet700,
+  'icon/success': palette.green500,
+  'icon/warning': palette.yellow500,
+  'icon/danger': palette.red500
+};
+const linkColor = {
+  'link': palette.blue500,
+  'link/hovered': palette.blue700,
+  'link/pressed': palette.blue700,
+  'link/neutral': palette.gray500,
+  'link/neutral/hovered': palette.gray700,
+  'link/neutral/pressed': palette.gray700,
+  'link/neutral/bold': palette.gray700,
+  'link/neutral/bold/hovered': palette.gray900,
+  'link/neutral/bold/pressed': palette.gray900,
+  'link/disabled': palette.gray700
+};
+const dimColor = {
+  dim: palette.black60A
+};
+const scaleColor = {
+  'scale/violet/0': palette.violet50,
+  'scale/violet/1': palette.violet100,
+  'scale/violet/2': palette.violet200,
+  'scale/violet/3': palette.violet300,
+  'scale/violet/4': palette.violet400,
+  'scale/violet/5': palette.violet500,
+  'scale/violet/6': palette.violet600,
+  'scale/violet/7': palette.violet700,
+  'scale/violet/8': palette.violet800,
+  'scale/violet/9': palette.violet900
+};
+const color = {
+  ...textColor,
+  ...bgColor,
+  ...borderColor,
+  ...iconColor,
+  ...linkColor,
+  ...dimColor,
+  ...scaleColor
+};
+
+const shadow = {
+  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
+};
+
+const surfaceElevation = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
+const shadowElevation = {
+  'shadow/overlay': shadow.shadowMedium
+};
+const elevation = {
+  ...surfaceElevation,
+  ...shadowElevation
+};
+
+const colorStopList = {
+  colorStopListVioletPink: '#8E6CF0, #CF75F3',
+  colorStopListBlackGray: '#0F0E0F, #595959',
+  colorStopListWhite: '#FFFFFF, #FFFFFF00',
+  colorStopListBlack: '#000000, #00000000'
+};
+
+const direction = {
+  directionToRight: 'to right',
+  directionToLeft: 'to left',
+  directionToRightBottom: 'to right bottom',
+  directionToTop: 'to top'
+};
+
+const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
+const textGradient = {
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const bgGradient = {
+  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
+};
+const borderGradient = {
+  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const overlayGradient = {
+  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
+  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+};
+const gradient = {
+  ...textGradient,
+  ...bgGradient,
+  ...borderGradient,
+  ...overlayGradient
+};
+
+const opacity$1 = {
+  opacity50: 0.5
+};
+
+const accentOpacity = {
+  accent: opacity$1.opacity50
+};
+const opacity = {
+  ...accentOpacity
+};
+
+const rounding = {
+  rounding0: 0,
+  rounding4: 4,
+  rounding8: 8,
+  rounding12: 12,
+  rounding16: 16,
+  rounding20: 20,
+  rounding24: 24,
+  rounding32: 32,
+  rounding9999: 9999
+};
+
+const radii = {
+  none: rounding.rounding0,
+  xxs: rounding.rounding4,
+  xs: rounding.rounding8,
+  s: rounding.rounding12,
+  m: rounding.rounding16,
+  l: rounding.rounding20,
+  xl: rounding.rounding24,
+  xxl: rounding.rounding32,
+  full: rounding.rounding9999
+};
+
+const unit = 4;
+const spacing = {
+  spacing0: 0 * unit,
+  // 0
+  spacing1: 1,
+  // 1
+  spacing2: 0.5 * unit,
+  // 2
+  spacing4: 1 * unit,
+  // 4
+  spacing6: 1.5 * unit,
+  // 6
+  spacing8: 2 * unit,
+  // 8
+  spacing12: 3 * unit,
+  // 12
+  spacing16: 4 * unit,
+  // 16
+  spacing20: 5 * unit,
+  // 20
+  spacing24: 6 * unit,
+  // 24
+  spacing28: 7 * unit,
+  // 28
+  spacing32: 8 * unit,
+  // 32
+  spacing40: 10 * unit,
+  // 40
+  spacing48: 12 * unit,
+  // 48
+  spacing56: 14 * unit,
+  // 56
+  spacing64: 16 * unit,
+  // 64
+  spacing72: 18 * unit,
+  // 72
+  spacing80: 20 * unit,
+  // 80
+  spacing96: 24 * unit,
+  // 96
+  spacing112: 28 * unit,
+  // 112
+  spacing120: 30 * unit,
+  // 120
+  spacing128: 32 * unit,
+  // 128
+  spacing160: 40 * unit,
+  // 160
+  spacing192: 48 * unit,
+  // 192
+  spacing200: 50 * unit,
+  // 200
+  spacing320: 80 * unit // 320
+};
+
+const space = {
+  '-80': -spacing.spacing320,
+  '-50': -spacing.spacing200,
+  '-48': -spacing.spacing192,
+  '-40': -spacing.spacing160,
+  '-32': -spacing.spacing128,
+  '-30': -spacing.spacing120,
+  '-28': -spacing.spacing112,
+  '-24': -spacing.spacing96,
+  '-20': -spacing.spacing80,
+  '-18': -spacing.spacing72,
+  '-16': -spacing.spacing64,
+  '-14': -spacing.spacing56,
+  '-12': -spacing.spacing48,
+  '-10': -spacing.spacing40,
+  '-8': -spacing.spacing32,
+  '-7': -spacing.spacing28,
+  '-6': -spacing.spacing24,
+  '-5': -spacing.spacing20,
+  '-4': -spacing.spacing16,
+  '-3': -spacing.spacing12,
+  '-2': -spacing.spacing8,
+  '-1': -spacing.spacing4,
+  '-0.5': -spacing.spacing2,
+  '-0.25': -spacing.spacing1,
+  0: spacing.spacing0,
+  0.25: spacing.spacing1,
+  0.5: spacing.spacing2,
+  1: spacing.spacing4,
+  2: spacing.spacing8,
+  3: spacing.spacing12,
+  4: spacing.spacing16,
+  5: spacing.spacing20,
+  6: spacing.spacing24,
+  7: spacing.spacing28,
+  8: spacing.spacing32,
+  10: spacing.spacing40,
+  12: spacing.spacing48,
+  14: spacing.spacing56,
+  16: spacing.spacing64,
+  18: spacing.spacing72,
+  20: spacing.spacing80,
+  24: spacing.spacing96,
+  28: spacing.spacing112,
+  30: spacing.spacing120,
+  32: spacing.spacing128,
+  40: spacing.spacing160,
+  48: spacing.spacing192,
+  50: spacing.spacing200,
+  80: spacing.spacing320
+};
+
+const fontSize = {
+  fontSize50: 10,
+  fontSize100: 12,
+  fontSize200: 14,
+  fontSize300: 16,
+  fontSize400: 18,
+  fontSize500: 20,
+  fontSize600: 22,
+  fontSize700: 24,
+  fontSize800: 28,
+  fontSize900: 32,
+  fontSize1000: 40,
+  fontSize1100: 48,
+  fontSize1200: 64,
+  fontSize1300: 100
+};
+
+const fontWeight = {
+  fontWeight100: 100,
+  fontWeight200: 200,
+  fontWeight300: 300,
+  fontWeight400: 400,
+  fontWeight500: 500,
+  fontWeight600: 600,
+  fontWeight700: 700,
+  fontWeight800: 800,
+  fontWeight900: 900
+};
+
+const lineHeight = {
+  lineHeight1: 1.4,
+  lineHeight2: 1.5
+};
+
+const fontSizes = {
+  xxs: fontSize.fontSize100,
+  xs: fontSize.fontSize200,
+  s: fontSize.fontSize300,
+  m: fontSize.fontSize500,
+  l: fontSize.fontSize700,
+  xl: fontSize.fontSize800,
+  xxl: fontSize.fontSize900,
+  display4: fontSize.fontSize1000,
+  display3: fontSize.fontSize1100,
+  display2: fontSize.fontSize1200,
+  display1: fontSize.fontSize1300
+};
+
+const fontWeights = {
+  regular: fontWeight.fontWeight400,
+  medium: fontWeight.fontWeight500,
+  bold: fontWeight.fontWeight700
+};
+
+const lineHeights = {
+  1: lineHeight.lineHeight1,
+  2: lineHeight.lineHeight2
+};
+
+const typography = {
+  'display1': {
+    fontSize: fontSizes.display1,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display2': {
+    fontSize: fontSizes.display2,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display3': {
+    fontSize: fontSizes.display3,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display4': {
+    fontSize: fontSizes.display4,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/regular': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxl': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/bold': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xl/regular': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xl': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xl/bold': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'l/regular': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'l': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'l/bold': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'm/regular': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'm': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'm/bold': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  's/regular': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  's': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  's/bold': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xs/regular': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xs': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xs/bold': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/regular': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxs': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/bold': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  }
+};
+
+exports.accentOpacity = accentOpacity;
+exports.baseBreakpoints = baseBreakpoints;
+exports.bgColor = bgColor;
+exports.bgGradient = bgGradient;
+exports.borderColor = borderColor;
+exports.borderGradient = borderGradient;
+exports.breakpoints = breakpoints;
+exports.color = color;
+exports.dimColor = dimColor;
+exports.elevation = elevation;
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.gradient = gradient;
+exports.iconColor = iconColor;
+exports.lineHeights = lineHeights;
+exports.linkColor = linkColor;
+exports.opacity = opacity;
+exports.overlayGradient = overlayGradient;
+exports.radii = radii;
+exports.scaleColor = scaleColor;
+exports.shadowElevation = shadowElevation;
+exports.space = space;
+exports.surfaceElevation = surfaceElevation;
+exports.textColor = textColor;
+exports.textGradient = textGradient;
+exports.typography = typography;

package/dist/token/breakpoints/index.d.ts

@@ -0,0 +1,4 @@
+declare const baseBreakpoints: number[];
+declare const breakpoints: string[];
+export default breakpoints;
+export { baseBreakpoints };