Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save tankxu/fd15761e13594d232bb25efd48c59c0b to your computer and use it in GitHub Desktop.
Save tankxu/fd15761e13594d232bb25efd48c59c0b to your computer and use it in GitHub Desktop.
const tokenArray = [
{ name: 'color-background-default', value: '#f5f7fa'},
{ name: 'color-background-white', value: '#fff'},
{ name: 'color-background-dark', value: '#202d40'},
{ name: 'color-background-tooltip', value: '#202d40'},
{ name: 'color-background-message-warning', value: '#fffbe5'},
{ name: 'color-background-message-success', value: '#f2ffe0'},
{ name: 'color-background-message-error', value: '#fff0f0'},
{ name: 'color-background-message-info', value: '#e6f7ff'},
{ name: 'color-background-list-row-hover', value: '#f5f7fa'},
{ name: 'color-background-icon-button-hover', value: '#f5f7fa'},
{ name: 'color-base-black', value: '#000'},
{ name: 'color-base-white', value: '#fff'},
{ name: 'color-base-grey-100', value: '#f5f7fa'},
{ name: 'color-base-grey-200', value: '#e6e9ed'},
{ name: 'color-base-grey-300', value: '#dadfe6'},
{ name: 'color-base-grey-400', value: '#c5cedb'},
{ name: 'color-base-grey-500', value: '#adbacc'},
{ name: 'color-base-grey-600', value: '#8592a6'},
{ name: 'color-base-grey-700', value: '#606c80'},
{ name: 'color-base-grey-800', value: '#202d40'},
{ name: 'color-base-grey-900', value: '#171d26'},
{ name: 'color-base-blue-100', value: '#e6f7ff'},
{ name: 'color-base-blue-200', value: '#cceaff'},
{ name: 'color-base-blue-300', value: '#8cc6ff'},
{ name: 'color-base-blue-400', value: '#3d98ff'},
{ name: 'color-base-blue-500', value: '#06f'},
{ name: 'color-base-blue-600', value: '#0052cc'},
{ name: 'color-base-blue-700', value: '#0f4799'},
{ name: 'color-base-blue-800', value: '#1d4073'},
{ name: 'color-base-red-100', value: '#fff0f0'},
{ name: 'color-base-red-200', value: '#fed2d2'},
{ name: 'color-base-red-300', value: '#fc9c9c'},
{ name: 'color-base-red-400', value: '#f76469'},
{ name: 'color-base-red-500', value: '#eb333f'},
{ name: 'color-base-red-600', value: '#ca1628'},
{ name: 'color-base-red-700', value: '#9a1325'},
{ name: 'color-base-red-800', value: '#791122'},
{ name: 'color-base-orange-100', value: '#fff4e0'},
{ name: 'color-base-orange-200', value: '#ffe0b3'},
{ name: 'color-base-orange-300', value: '#fec57c'},
{ name: 'color-base-orange-400', value: '#fba337'},
{ name: 'color-base-orange-500', value: '#f0850a'},
{ name: 'color-base-orange-600', value: '#cb6b0b'},
{ name: 'color-base-orange-700', value: '#9e540a'},
{ name: 'color-base-orange-800', value: '#7b4209'},
{ name: 'color-base-yellow-100', value: '#fffbe5'},
{ name: 'color-base-yellow-200', value: '#fff4c2'},
{ name: 'color-base-yellow-300', value: '#fde586'},
{ name: 'color-base-yellow-400', value: '#fbd341'},
{ name: 'color-base-yellow-500', value: '#edb807'},
{ name: 'color-base-yellow-600', value: '#ce9c09'},
{ name: 'color-base-yellow-700', value: '#a07708'},
{ name: 'color-base-yellow-800', value: '#725409'},
{ name: 'color-base-green-100', value: '#f2ffe0'},
{ name: 'color-base-green-200', value: '#dbfdb5'},
{ name: 'color-base-green-300', value: '#adf269'},
{ name: 'color-base-green-400', value: '#7ad93a'},
{ name: 'color-base-green-500', value: '#4fbe0e'},
{ name: 'color-base-green-600', value: '#3ea00e'},
{ name: 'color-base-green-700', value: '#2e7d0c'},
{ name: 'color-base-green-800', value: '#205c0a'},
{ name: 'color-base-cyan-100', value: '#e5feff'},
{ name: 'color-base-cyan-200', value: '#c4fafd'},
{ name: 'color-base-cyan-300', value: '#8ef3fa'},
{ name: 'color-base-cyan-400', value: '#3de6f5'},
{ name: 'color-base-cyan-500', value: '#0ccadf'},
{ name: 'color-base-cyan-600', value: '#0ba4bc'},
{ name: 'color-base-cyan-700', value: '#097c90'},
{ name: 'color-base-cyan-800', value: '#096072'},
{ name: 'color-base-purple-100', value: '#f4e5ff'},
{ name: 'color-base-purple-200', value: '#dbb5fd'},
{ name: 'color-base-purple-300', value: '#c28bf9'},
{ name: 'color-base-purple-400', value: '#a657f4'},
{ name: 'color-base-purple-500', value: '#892aef'},
{ name: 'color-base-purple-600', value: '#6812ca'},
{ name: 'color-base-purple-700', value: '#4b109e'},
{ name: 'color-base-purple-800', value: '#380d77'},
{ name: 'color-border-default', value: '#dadfe6'},
{ name: 'color-border-secondary', value: '#e6e9ed'},
{ name: 'color-border-tertiary', value: '#f5f7fa'},
{ name: 'color-border-focus', value: '#06f'},
{ name: 'color-border-warning', value: '#edb807'},
{ name: 'color-border-error', value: '#eb333f'},
{ name: 'color-border-image', value: '#e6e9ed'},
{ name: 'color-border-project-avatar', value: '#dadfe6'},
{ name: 'color-brand-primary', value: '#202d40'},
{ name: 'color-brand-primary-hover', value: '#606c80'},
{ name: 'color-brand-primary-active', value: '#171d26'},
{ name: 'color-brand-primary-disabled', value: 'rgba(0, 0, 0, 0.5)'},
{ name: 'color-brand-secondary', value: '#06f'},
{ name: 'color-brand-secondary-hover', value: '#0f4799'},
{ name: 'color-brand-secondary-active', value: '#1d4073'},
{ name: 'color-brand-secondary-disabled', value: 'rgba(0, 0, 0, 0.5)'},
{ name: 'color-line-default', value: '#dadfe6'},
{ name: 'color-line-secondary', value: '#e6e9ed'},
{ name: 'color-line-separator', value: '#dadfe6'},
{ name: 'color-shadow-default', value: 'rgba(0, 0, 0, 0.1)'},
{ name: 'color-shadow-deep', value: 'rgba(0, 0, 0, 0.15)'},
{ name: 'color-text-default', value: '#202d40'},
{ name: 'color-text-secondary', value: '#606c80'},
{ name: 'color-text-tertiary', value: '#8592a6'},
{ name: 'color-text-link', value: '#06f'},
{ name: 'color-text-link-hover', value: '#0f4799'},
{ name: 'color-text-link-active', value: '#1d4073'},
{ name: 'color-text-link-disabled', value: 'rgba(0, 0, 0, 0.5)'},
{ name: 'color-text-warning', value: '#edb807'},
{ name: 'color-text-warning-hover', value: '#a07708'},
{ name: 'color-text-danger', value: '#eb333f'},
{ name: 'color-text-danger-hover', value: '#9a1325'},
{ name: 'color-text-success', value: '#4fbe0e'},
{ name: 'color-text-success-hover', value: '#2e7d0c'},
{ name: 'color-text-placeholder', value: 'rgba(0, 0, 0, 0.5)'},
{ name: 'color-text-inverse-default', value: '#fff'},
{ name: 'color-text-inverse-secondary', value: '#c5cedb'},
{ name: 'color-text-inverse-tertiary', value: '#8592a6'},
{ name: 'color-text-label-grey', value: '#606c80'},
{ name: 'color-text-label-yellow', value: '#a07708'},
{ name: 'color-text-label-green', value: '#3ea00e'},
{ name: 'color-text-label-blue', value: '#0052cc'},
{ name: 'color-text-label-orange', value: '#cb6b0b'},
{ name: 'color-text-label-purple', value: '#6812ca'},
{ name: 'color-text-label-red', value: '#9a1325'},
{ name: 'color-text-label-cyan', value: '#097c90'},
{ name: 'color-table-text-default', value: '#202d40'},
{ name: 'font-weight-default', value: '400'},
{ name: 'font-weight-bold', value: '600'},
{ name: 'font-weight-base', value: '400'},
{ name: 'font-weight-heading', value: '600'},
{ name: 'line-height-heading', value: '1.25'},
{ name: 'line-height-text', value: '1.5'},
{ name: 'line-height-rest', value: '1'},
{ name: 'opacity-default', value: '1'},
{ name: 'opacity-half', value: '0.5'},
{ name: 'opacity-disappear', value: '0'},
{ name: 'opacity-text-placehodler', value: '0.5'},
{ name: 'border-radius-circle', value: '50%'},
{ name: 'border-radius-square', value: '0'},
{ name: 'border-radius-small', value: '2px'},
{ name: 'border-radius-medium', value: '4px'},
{ name: 'border-radius-large', value: '8px'},
{ name: 'border-radius-default', value: '2px'},
{ name: 'shadow-button', value: '0 1px 2px 0 rgba(0, 0, 0, 0.1)'},
{ name: 'shadow-button-hover', value: '0 2px 4px 0 rgba(0, 0, 0, 0.15)'},
{ name: 'shadow-card', value: '0 2px 4px 0 rgba(0, 0, 0, 0.1)'},
{ name: 'shadow-card-hover', value: '0 4px 6px 0 rgba(0, 0, 0, 0.15)'},
{ name: 'shadow-drawer-right', value: '-4px 0 14px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.15)'},
{ name: 'shadow-drawer-left', value: '4px 0 14px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.15)'},
{ name: 'shadow-modal', value: '0 6px 12px 0 rgba(0, 0, 0, 0.1)'},
{ name: 'shadow-modal-hover', value: '0 8px 14px 0 rgba(0, 0, 0, 0.15)'},
{ name: 'size-avatar-user-xx-small', value: '24px'},
{ name: 'size-avatar-user-x-small', value: '28px'},
{ name: 'size-avatar-user-small', value: '32px'},
{ name: 'size-avatar-user-medium', value: '40px'},
{ name: 'size-avatar-user-large', value: '64px'},
{ name: 'size-avatar-user-x-large', value: '128px'},
{ name: 'size-avatar-user-xx-large', value: '200px'},
{ name: 'size-avatar-project-xx-small', value: '16px'},
{ name: 'size-avatar-project-x-small', value: '24px'},
{ name: 'size-avatar-project-small', value: '32px'},
{ name: 'size-avatar-project-medium', value: '40px'},
{ name: 'size-avatar-project-large', value: '64px'},
{ name: 'size-avatar-project-x-large', value: '96px'},
{ name: 'size-avatar-project-xx-large', value: '200px'},
{ name: 'size-font-x-small', value: '12px'},
{ name: 'size-font-small', value: '14px'},
{ name: 'size-font-medium', value: '16px'},
{ name: 'size-font-large', value: '18px'},
{ name: 'size-font-x-large', value: '24px'},
{ name: 'size-font-xx-large', value: '36px'},
{ name: 'size-font-xxx-large', value: '48px'},
{ name: 'size-font-xxxx-large', value: '56px'},
{ name: 'size-font-body-default', value: '14px'},
{ name: 'size-font-body-secondary', value: '12px'},
{ name: 'size-font-subtitle', value: '16px'},
{ name: 'size-font-title', value: '18px'},
{ name: 'size-font-heading', value: '24px'},
{ name: 'size-font-display-small', value: '36px'},
{ name: 'size-font-display-medium', value: '48px'},
{ name: 'size-font-display-large', value: '56px'},
{ name: 'size-icon-x-small', value: '12px'},
{ name: 'size-icon-small', value: '14px'},
{ name: 'size-icon-medium', value: '16px'},
{ name: 'size-icon-large', value: '18px'},
{ name: 'size-icon-x-large', value: '24px'},
{ name: 'size-icon-xx-large', value: '36px'},
{ name: 'size-icon-xxx-large', value: '48px'},
{ name: 'size-icon-xxxx-large', value: '56px'},
{ name: 'size-layout-xx-small', value: '140px'},
{ name: 'size-layout-x-small', value: '280px'},
{ name: 'size-layout-small', value: '420px'},
{ name: 'size-layout-medium', value: '560px'},
{ name: 'size-layout-large', value: '700px'},
{ name: 'size-layout-x-large', value: '840px'},
{ name: 'size-layout-xx-large', value: '980px'},
{ name: 'spacing-10', value: '10px'},
{ name: 'spacing-20', value: '20px'},
{ name: 'spacing-30', value: '30px'},
{ name: 'spacing-40', value: '40px'},
{ name: 'spacing-60', value: '60px'},
{ name: 'spacing-80', value: '80px'},
{ name: 'spacing-100', value: '100px'},
{ name: 'spacing-none', value: '0'},
{ name: 'spacing-xxx-small', value: '2px'},
{ name: 'spacing-xx-small', value: '4px'},
{ name: 'spacing-x-small', value: '8px'},
{ name: 'spacing-small', value: '12px'},
{ name: 'spacing-medium', value: '16px'},
{ name: 'spacing-large', value: '24px'},
{ name: 'spacing-x-large', value: '32px'},
{ name: 'spacing-xx-large', value: '48px'},
{ name: 'duration-immediately', value: '0.05s'},
{ name: 'duration-instantly', value: '0s'},
{ name: 'duration-paused', value: '3.2s'},
{ name: 'duration-promptly', value: '0.2s'},
{ name: 'duration-quickly', value: '0.1s'},
{ name: 'duration-slowly', value: '0.4s'},
{ name: 'z-index-deepdive', value: '-99999'},
{ name: 'z-index-default', value: '1'},
{ name: 'z-index-dialog', value: '6000'},
{ name: 'z-index-docked', value: '4'},
{ name: 'z-index-dropdown', value: '7000'},
{ name: 'z-index-modal', value: '9000'},
{ name: 'z-index-overlay', value: '8000'},
{ name: 'z-index-popup', value: '5000'},
{ name: 'z-index-reminder', value: '8500'},
{ name: 'z-index-spinner', value: '9050'},
{ name: 'z-index-sticky', value: '100'},
{ name: 'z-index-toast', value: '10000'}
]
let snippets = {}
tokenArray.map(token => {
let name = token.name
let value = token.value
let snippetsValue = {}
snippetsValue.prefix = "ck-" + name
snippetsValue.body = [value]
snippetsValue.description = value
snippets[name] = snippetsValue
})
console.log(JSON.stringify(snippets))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment