Voca foundations

Vocas foundation variables are exported.

import {
    borders,
    breakpoints,
    colors,
    grid,
    layers,
    motion,
    shadows,
    spacing,
    typography,
    focus,
} from '@telia-ace/alliance-ui/voca/foundations';

console.log(colors.purple500);
// #990ae3

The Alliance CLI provides easy access to Vocas foundations through CSS variables in the DOM. They are also accessible in the Alliance cloud environments.

They can all be accessed using the var() CSS function.

Variable	Equivalent Voca SCSS Variable
--font-telia-heading	$telia-typography-telia-sans-heading-font-family
--font-telia-sans	$telia-typography-telia-sans-font-family
--font-normal	$telia-typography-weight-normal
--font-medium	$telia-typography-weight-medium
--font-bold	$telia-typography-weight-bold
--spacing-0	$telia-spacing-0
--spacing-2	$telia-spacing-2
--spacing-4	$telia-spacing-4
--spacing-8	$telia-spacing-8
--spacing-12	$telia-spacing-12
--spacing-16	$telia-spacing-16
--spacing-20	$telia-spacing-20
--spacing-24	$telia-spacing-24
--spacing-32	$telia-spacing-32
--spacing-48	$telia-spacing-48
--spacing-64	$telia-spacing-64
--spacing-80	$telia-spacing-80
--spacing-96	$telia-spacing-96
--spacing-128	$telia-spacing-128
--box-shadow-none	$telia-shadow-none
--box-shadow-sm	$telia-shadow-sm
--box-shadow-md	$telia-shadow-md
--box-shadow-lg	$telia-shadow-lg
--duration-50	$telia-duration-50
--duration-100	$telia-duration-100
--duration-150	$telia-duration-150
--duration-200	$telia-duration-200
--duration-250	$telia-duration-250
--duration-300	$telia-duration-300
--duration-350	$telia-duration-350
--duration-400	$telia-duration-400
--duration-500	$telia-duration-500
--duration-1500	$telia-duration-1500
--duration-2000	$telia-duration-2000
--timing-ease-in	$telia-ease-in
--timing-ease-out	$telia-ease-out
--timing-ease-in-out	$telia-ease-in-out
--layer-base	$layer-base
--layer-dropdown	$layer-dropdown
--layer-header	$layer-header
--layer-modal	$layer-modal
--border-width-none	$telia-border-width-0
--border-width-xs	$telia-border-width-1
--border-width-sm	$telia-border-width-2
--border-width-md	$telia-border-width-3
--border-radius-none	$telia-border-radiusNone
--border-radius-default	$telia-border-radiusDefault
--border-radius-sm	$telia-border-radiusSm
--border-radius-lg	$telia-border-radiusLg
--border-radius-full	$telia-border-radiusFull
--screen-size-sm	$telia-breakpoint-small
--screen-size-md	$telia-breakpoint-medium
--screen-size-lg	$telia-breakpoint-large
--screen-size-xl	$telia-breakpoint-xlarge
--grid-gutter-sm	$gutter
--grid-gutter-md	$gutter-medium
--grid-gutter-lg	$gutter-large
--grid-page-padding-sm	$page-padding
--grid-page-padding-md	$page-padding-m
--grid-page-padding-lg	$page-padding-l
--grid-page-padding-xl	$page-padding-xl
--purple-100	$telia-purple-100
--purple-200	$telia-purple-200
--purple-300	$telia-purple-300
--purple-400	$telia-purple-400
--purple-500	$telia-purple-500
--purple-600	$telia-purple-600
--purple-700	$telia-purple-700
--purple-800	$telia-purple-800
--purple-850	$telia-purple-850
--purple-900	$telia-purple-900
--beige-50	$telia-beige-50
--beige-100	$telia-beige-100
--beige-200	$telia-beige-200
--beige-300	$telia-beige-300
--beige-400	$telia-beige-400
--beige-500	$telia-beige-500
--beige-600	$telia-beige-600
--beige-700	$telia-beige-700
--beige-800	$telia-beige-800
--beige-900	$telia-beige-900
--gray-50	$telia-gray-50
--gray-100	$telia-gray-100
--gray-200	$telia-gray-200
--gray-300	$telia-gray-300
--gray-400	$telia-gray-400
--gray-500	$telia-gray-500
--gray-600	$telia-gray-600
--gray-700	$telia-gray-700
--gray-800	$telia-gray-800
--gray-900	$telia-gray-900
--green-100	$telia-green-100
--green-200	$telia-green-200
--green-300	$telia-green-300
--green-400	$telia-green-400
--green-500	$telia-green-500
--green-600	$telia-green-600
--green-700	$telia-green-700
--green-800	$telia-green-800
--green-900	$telia-green-900
--red-100	$telia-red-100
--red-200	$telia-red-200
--red-300	$telia-red-300
--red-400	$telia-red-400
--red-500	$telia-red-500
--red-600	$telia-red-600
--red-700	$telia-red-700
--red-800	$telia-red-800
--red-900	$telia-red-900
--orange-100	$telia-orange-100
--orange-200	$telia-orange-200
--orange-300	$telia-orange-300
--orange-400	$telia-orange-400
--orange-500	$telia-orange-500
--orange-600	$telia-orange-600
--orange-700	$telia-orange-700
--orange-800	$telia-orange-800
--orange-900	$telia-orange-900
--blue-100	$telia-blue-100
--blue-200	$telia-blue-200
--blue-300	$telia-blue-300
--blue-400	$telia-blue-400
--blue-500	$telia-blue-500
--blue-600	$telia-blue-600
--blue-700	$telia-blue-700
--blue-800	$telia-blue-800
--blue-900	$telia-blue-900
--white	$telia-white
--black	$telia-black
--functional-black	$telia-functional-black
--functional-transparent	$telia-functional-transparent
--transparent-black-50	$telia-transparent-black-50
--transparent-black-100	$telia-transparent-black-100
--transparent-black-200	$telia-transparent-black-200
--transparent-black-300	$telia-transparent-black-300
--transparent-black-400	$telia-transparent-black-400
--transparent-black-500	$telia-transparent-black-500
--transparent-black-600	$telia-transparent-black-600
--transparent-black-700	$telia-transparent-black-700
--transparent-black-800	$telia-transparent-black-800
--transparent-black-850	$telia-transparent-black-850
--transparent-black-900	$telia-transparent-black-900
--transparent-white-50	$telia-transparent-white-50
--transparent-white-100	$telia-transparent-white-100
--transparent-white-200	$telia-transparent-white-200
--transparent-white-300	$telia-transparent-white-300
--transparent-white-400	$telia-transparent-white-400
--transparent-white-500	$telia-transparent-white-500
--transparent-white-600	$telia-transparent-white-600
--transparent-white-700	$telia-transparent-white-700
--transparent-white-800	$telia-transparent-white-800
--transparent-white-850	$telia-transparent-white-850
--transparent-white-900	$telia-transparent-white-900
--focus-border	$telia-focus-border-width solid $telia-focus-color