Sass Design tokens

Make it Sassy

_design-tokens.scss:

Included as a reference: you probably won’t need to use these as you should use the sass functions and mixins (ie getColour()).

/**
 * Do not edit directly
 * Generated on Mon, 09 Jan 2023 12:05:06 GMT
 */

$gg-color-black: #000000 !default;
$gg-color-white: #FFFFFF !default;
$gg-color-light-pink: #EB5F8E !default;
$gg-color-light-green: #72B72A !default;
$gg-color-light-blue: #35ADCE !default;
$gg-color-yellow: #FCC31E !default;
$gg-color-red: #d60000 !default;
$gg-color-dark-blue: #00528A !default;
$gg-color-olive: #B9CC3F !default;
$gg-color-turquoise: #00CEB3 !default;
$gg-color-light-orange: #F39722 !default;
$gg-color-lavender: #C380BB !default;
$gg-color-bright-orange: #F76908 !default;
$gg-color-graphite: #2F2E31 !default;
$gg-color-dove-grey: #666666 !default;
$gg-color-alto: #D0D0D0 !default;
$gg-color-wild-sand: #F5F5F5 !default;
$gg-color-gallery: #ECECEC !default;
$gg-color-pastel-yellow: #FEF3D2 !default;
$gg-color-pastel-green: #E3F1D4 !default;
$gg-color-pastel-red: #FBE6E6 !default;
$gg-color-pastel-blue: #D7EFF5 !default;
$gg-breakpoint-tiny: 320px !default;
$gg-breakpoint-small: 360px !default;
$gg-breakpoint-medium: 768px !default;
$gg-breakpoint-large: 992px !default;
$gg-grid-unit: 8px !default;
$gg-icon-small: 16px !default;
$gg-icon-medium: 24px !default;
$gg-icon-large: 48px !default;
$gg-icon-huge: 72px !default;
$gg-icon-gargantuan: 120px !default;
$gg-icon-colossal: 192px !default;
$gg-image-tiny: 72px !default;
$gg-image-small: 120px !default;
$gg-image-medium: 192px !default;
$gg-image-large: 312px !default;
$gg-image-huge: 504px !default;
$gg-layout-min-width: 320px !default;
$gg-layout-max-width: 1140px !default;
$gg-layout-header-height: 56px !default;
$gg-layout-readable-width: 680px !default;
$gg-spacer-fine: 4px !default;
$gg-spacer-tiny: 8px !default;
$gg-spacer-small: 16px !default;
$gg-spacer-medium: 24px !default;
$gg-spacer-large: 48px !default;
$gg-spacer-huge: 72px !default;
$gg-text-megaphone-font-size: 40px !default;
$gg-text-megaphone-line-height: 48px !default;
$gg-text-megaphone-font-weight: 700 !default;
$gg-text-megaphone-medium-breakpoint-font-size: 82px !default;
$gg-text-megaphone-medium-breakpoint-line-height: 88px !default;
$gg-text-megaphone-medium-breakpoint-letter-spacing: -.02em !default;
$gg-text-shout-font-size: 32px !default;
$gg-text-shout-line-height: 40px !default;
$gg-text-shout-font-weight: 700 !default;
$gg-text-shout-medium-breakpoint-font-size: 54px !default;
$gg-text-shout-medium-breakpoint-line-height: 64px !default;
$gg-text-louder-font-size: 24px !default;
$gg-text-louder-line-height: 32px !default;
$gg-text-louder-font-weight: 700 !default;
$gg-text-louder-medium-breakpoint-font-size: 36px !default;
$gg-text-louder-medium-breakpoint-line-height: 48px !default;
$gg-text-louder-regular-font-size: 24px !default;
$gg-text-louder-regular-line-height: 32px !default;
$gg-text-louder-regular-font-weight: 500 !default;
$gg-text-louder-regular-medium-breakpoint-font-size: 36px !default;
$gg-text-louder-regular-medium-breakpoint-line-height: 48px !default;
$gg-text-loud-font-size: 20px !default;
$gg-text-loud-line-height: 24px !default;
$gg-text-loud-font-weight: 500 !default;
$gg-text-loud-medium-breakpoint-font-size: 24px !default;
$gg-text-loud-medium-breakpoint-line-height: 32px !default;
$gg-text-loud-bold-font-size: 20px !default;
$gg-text-loud-bold-line-height: 24px !default;
$gg-text-loud-bold-font-weight: 700 !default;
$gg-text-loud-bold-medium-breakpoint-font-size: 24px !default;
$gg-text-loud-bold-medium-breakpoint-line-height: 32px !default;
$gg-text-speak-up-font-size: 16px !default;
$gg-text-speak-up-font-weight: 700 !default;
$gg-text-speak-up-line-height: 24px !default;
$gg-text-speak-font-size: 16px !default;
$gg-text-speak-font-weight: 400 !default;
$gg-text-speak-line-height: 24px !default;
$gg-text-murmur-font-size: 14px !default;
$gg-text-murmur-letter-spacing: .02em !default;
$gg-text-murmur-font-weight: 400 !default;
$gg-text-murmur-line-height: 21px !default;
$gg-text-murmur-bold-font-size: 14px !default;
$gg-text-murmur-bold-letter-spacing: .02em !default;
$gg-text-murmur-bold-font-weight: 700 !default;
$gg-text-murmur-bold-line-height: 21px !default;
$gg-text-whisper-loud-font-size: 12px !default;
$gg-text-whisper-loud-letter-spacing: .02em !default;
$gg-text-whisper-loud-font-weight: 700 !default;
$gg-text-whisper-loud-line-height: 18px !default;
$gg-text-whisper-font-size: 12px !default;
$gg-text-whisper-letter-spacing: .02em !default;
$gg-text-whisper-font-weight: 400 !default;
$gg-text-whisper-line-height: 18px !default;

$tokens: (
  'gg-color': (
    'black': $gg-color-black,
    'white': $gg-color-white,
    'light-pink': $gg-color-light-pink,
    'light-green': $gg-color-light-green,
    'light-blue': $gg-color-light-blue,
    'yellow': $gg-color-yellow,
    'red': $gg-color-red,
    'dark-blue': $gg-color-dark-blue,
    'olive': $gg-color-olive,
    'turquoise': $gg-color-turquoise,
    'light-orange': $gg-color-light-orange,
    'lavender': $gg-color-lavender,
    'bright-orange': $gg-color-bright-orange,
    'graphite': $gg-color-graphite,
    'dove-grey': $gg-color-dove-grey,
    'alto': $gg-color-alto,
    'wild-sand': $gg-color-wild-sand,
    'gallery': $gg-color-gallery,
    'pastel': (
      'yellow': $gg-color-pastel-yellow,
      'green': $gg-color-pastel-green,
      'red': $gg-color-pastel-red,
      'blue': $gg-color-pastel-blue
    )
  ),
  'gg-breakpoint': (
    'tiny': $gg-breakpoint-tiny,
    'small': $gg-breakpoint-small,
    'medium': $gg-breakpoint-medium,
    'large': $gg-breakpoint-large
  ),
  'gg-grid': (
    'unit': $gg-grid-unit
  ),
  'gg-icon': (
    'small': $gg-icon-small,
    'medium': $gg-icon-medium,
    'large': $gg-icon-large,
    'huge': $gg-icon-huge,
    'gargantuan': $gg-icon-gargantuan,
    'colossal': $gg-icon-colossal
  ),
  'gg-image': (
    'tiny': $gg-image-tiny,
    'small': $gg-image-small,
    'medium': $gg-image-medium,
    'large': $gg-image-large,
    'huge': $gg-image-huge
  ),
  'gg-layout': (
    'min-width': $gg-layout-min-width,
    'max-width': $gg-layout-max-width,
    'header-height': $gg-layout-header-height,
    'readable-width': $gg-layout-readable-width
  ),
  'gg-spacer': (
    'fine': $gg-spacer-fine,
    'tiny': $gg-spacer-tiny,
    'small': $gg-spacer-small,
    'medium': $gg-spacer-medium,
    'large': $gg-spacer-large,
    'huge': $gg-spacer-huge
  ),
  'gg-text': (
    'megaphone': (
      'font-size': $gg-text-megaphone-font-size,
      'line-height': $gg-text-megaphone-line-height,
      'font-weight': $gg-text-megaphone-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-megaphone-medium-breakpoint-font-size,
        'line-height': $gg-text-megaphone-medium-breakpoint-line-height,
        'letter-spacing': $gg-text-megaphone-medium-breakpoint-letter-spacing
      )
    ),
    'shout': (
      'font-size': $gg-text-shout-font-size,
      'line-height': $gg-text-shout-line-height,
      'font-weight': $gg-text-shout-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-shout-medium-breakpoint-font-size,
        'line-height': $gg-text-shout-medium-breakpoint-line-height
      )
    ),
    'louder': (
      'font-size': $gg-text-louder-font-size,
      'line-height': $gg-text-louder-line-height,
      'font-weight': $gg-text-louder-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-louder-medium-breakpoint-font-size,
        'line-height': $gg-text-louder-medium-breakpoint-line-height
      )
    ),
    'louder-regular': (
      'font-size': $gg-text-louder-regular-font-size,
      'line-height': $gg-text-louder-regular-line-height,
      'font-weight': $gg-text-louder-regular-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-louder-regular-medium-breakpoint-font-size,
        'line-height': $gg-text-louder-regular-medium-breakpoint-line-height
      )
    ),
    'loud': (
      'font-size': $gg-text-loud-font-size,
      'line-height': $gg-text-loud-line-height,
      'font-weight': $gg-text-loud-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-loud-medium-breakpoint-font-size,
        'line-height': $gg-text-loud-medium-breakpoint-line-height
      )
    ),
    'loud-bold': (
      'font-size': $gg-text-loud-bold-font-size,
      'line-height': $gg-text-loud-bold-line-height,
      'font-weight': $gg-text-loud-bold-font-weight,
      'medium-breakpoint': (
        'font-size': $gg-text-loud-bold-medium-breakpoint-font-size,
        'line-height': $gg-text-loud-bold-medium-breakpoint-line-height
      )
    ),
    'speak-up': (
      'font-size': $gg-text-speak-up-font-size,
      'font-weight': $gg-text-speak-up-font-weight,
      'line-height': $gg-text-speak-up-line-height
    ),
    'speak': (
      'font-size': $gg-text-speak-font-size,
      'font-weight': $gg-text-speak-font-weight,
      'line-height': $gg-text-speak-line-height
    ),
    'murmur': (
      'font-size': $gg-text-murmur-font-size,
      'letter-spacing': $gg-text-murmur-letter-spacing,
      'font-weight': $gg-text-murmur-font-weight,
      'line-height': $gg-text-murmur-line-height
    ),
    'murmur-bold': (
      'font-size': $gg-text-murmur-bold-font-size,
      'letter-spacing': $gg-text-murmur-bold-letter-spacing,
      'font-weight': $gg-text-murmur-bold-font-weight,
      'line-height': $gg-text-murmur-bold-line-height
    ),
    'whisper-loud': (
      'font-size': $gg-text-whisper-loud-font-size,
      'letter-spacing': $gg-text-whisper-loud-letter-spacing,
      'font-weight': $gg-text-whisper-loud-font-weight,
      'line-height': $gg-text-whisper-loud-line-height
    ),
    'whisper': (
      'font-size': $gg-text-whisper-font-size,
      'letter-spacing': $gg-text-whisper-letter-spacing,
      'font-weight': $gg-text-whisper-font-weight,
      'line-height': $gg-text-whisper-line-height
    )
  )
);