@microsoft/atlas-css 2.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/dist/tokens.json +1 -1
  4. package/package.json +3 -3
  5. package/src/atomics/README.md +5 -5
  6. package/src/atomics/border.scss +37 -8
  7. package/src/atomics/index.scss +1 -0
  8. package/src/atomics/line-clamp.scss +27 -0
  9. package/src/atomics/typography.scss +3 -3
  10. package/src/components/button.scss +3 -3
  11. package/src/mixins/control.scss +1 -1
  12. package/src/tokens/breakpoints.scss +1 -1
  13. package/src/tokens/themes.scss +8 -8
  14. package/tokens/README.md +2 -2
package/dist/tokens.json CHANGED
@@ -1 +1 @@
1
- {"animation":{"name":"animation","location":"/css/src/tokens/animation.scss","tokens":{"$input-timing-function":"cubic-bezier(0.4, 0, 0.23, 1)","$input-transition-duration":"200ms","$nav-bar-transition-duration":"86ms"}},"border":{"name":"border","location":"/css/src/tokens/border.scss","tokens":{"$border-width":"1px","$border-width-lg":"0.5rem","$border-radius":"0.25rem","$border-radius-lg":"0.5rem"}},"breakpoints":{"name":"breakpoints","location":"/css/src/tokens/breakpoints.scss","tokens":{"$container-gap":"64px","$breakpoint-tablet":"768px","$breakpoint-desktop":"1088px","$breakpoint-widescreen":"1472px"}},"colors":{"name":"colors","location":"/css/src/tokens/colors.scss","tokens":{"$white-static":"#fff","$black-static":"#000","$text":"var(--theme-text)","$text-subtle":"var(--theme-text-subtle)","$text-invert":"var(--theme-text-invert)","$hyperlink":"var(--theme-hyperlink)","$text-glow-high-contrast":"var(--theme-text-glow-high-contrast)","$box-shadow-color-light":"var(--theme-box-shadow-light)","$box-shadow-color-medium":"var(--theme-box-shadow-medium)","$box-shadow-color-heavy":"var(--theme-box-shadow-heavy)","$box-shadow-color-extra-heavy":"var(--theme-box-shadow-extra-heavy)","$body-background":"var(--theme-body-background)","$body-background-medium":"var(--theme-body-background-medium)","$alternate-background":"var(--theme-alternate-background)","$alternate-background-medium":"var(--theme-alternate-background-medium)","$overlay":"var(--theme-overlay)","$overlay-invert":"var(--theme-overlay-invert)","$overlay-static":"rgba(0, 0, 0, 0.5)","$border":"var(--theme-border)","$code-header":"var(--theme-code-header)","$code-block":"var(--theme-code-block)","$inline-code":"var(--theme-inline-code)","$table-header":"var(--theme-table-header)","$table-row-header":"var(--theme-table-row-header)","$table-border-dark":"var(--theme-table-border-dark)","$facepile-red":"var(--theme-facepile-red)","$facepile-teal":"var(--theme-facepile-teal)","$facepile-blue":"var(--theme-facepile-blue)","$default-hover":"var(--theme-hover-base)","$default-hover-invert":"var(--theme-body-background-medium)","$border-white-high-contrast":"var(--theme-border-white-high-contrast)","$border-yellow-high-contrast":"var(--theme-border-yellow-high-contrast)","$code-highlight-background":"var(--theme-code-highlight-background)","$visited":"var(--theme-visited)","$score-low-off":"var(--theme-score-low-off)","$score-low":"var(--theme-score-low)","$score-medium-off":"var(--theme-score-medium-off)","$score-medium":"var(--theme-score-medium)","$score-high-off":"var(--theme-score-high-off)","$score-high":"var(--theme-score-high)","$primary":"var(--theme-primary-base)","$primary-background":"var(--theme-primary-background)","$primary-background-glow-high-contrast":"var(--theme-primary-background-glow-high-contrast)","$primary-dark":"var(--theme-primary-dark)","$primary-hover":"var(--theme-primary-hover)","$primary-active":"var(--theme-primary-active)","$primary-invert":"var(--theme-primary-invert)","$primary-box-shadow":"var(--theme-primary-box-shadow)","$secondary":"var(--theme-secondary-base)","$secondary-background":"var(--theme-secondary-background)","$secondary-background-glow-high-contrast":"var(--theme-secondary-background-glow-high-contrast)","$secondary-dark":"var(--theme-secondary-dark)","$secondary-hover":"var(--theme-secondary-hover)","$secondary-active":"var(--theme-secondary-active)","$secondary-invert":"var(--theme-secondary-invert)","$secondary-box-shadow":"var(--theme-secondary-box-shadow)","$tertiary":"var(--theme-tertiary-base)","$tertiary-background":"var(--theme-tertiary-background)","$tertiary-background-glow-high-contrast":"var(--theme-tertiary-background-glow-high-contrast)","$tertiary-dark":"var(--theme-tertiary-dark)","$tertiary-hover":"var(--theme-tertiary-hover)","$tertiary-active":"var(--theme-tertiary-active)","$tertiary-invert":"var(--theme-tertiary-invert)","$tertiary-box-shadow":"var(--theme-tertiary-box-shadow)","$success":"var(--theme-success-base)","$success-background":"var(--theme-success-background)","$success-background-glow-high-contrast":"var(--theme-success-background-glow-high-contrast)","$success-dark":"var(--theme-success-dark)","$success-hover":"var(--theme-success-hover)","$success-active":"var(--theme-success-active)","$success-invert":"var(--theme-success-invert)","$success-box-shadow":"var(--theme-success-box-shadow)","$info":"var(--theme-info-base)","$info-background":"var(--theme-info-background)","$info-background-glow-high-contrast":"var(--theme-info-background-glow-high-contrast)","$info-dark":"var(--theme-info-dark)","$info-hover":"var(--theme-info-hover)","$info-active":"var(--theme-info-active)","$info-invert":"var(--theme-info-invert)","$info-box-shadow":"var(--theme-info-box-shadow)","$warning":"var(--theme-warning-base)","$warning-background":"var(--theme-warning-background)","$warning-background-glow-high-contrast":"var(--theme-warning-background-glow-high-contrast)","$warning-dark":"var(--theme-warning-dark)","$warning-hover":"var(--theme-warning-hover)","$warning-active":"var(--theme-warning-active)","$warning-invert":"var(--theme-warning-invert)","$warning-box-shadow":"var(--theme-warning-box-shadow)","$danger":"var(--theme-danger-base)","$danger-background":"var(--theme-danger-background)","$danger-background-glow-high-contrast":"var(--theme-danger-background-glow-high-contrast)","$danger-dark":"var(--theme-danger-dark)","$danger-hover":"var(--theme-danger-hover)","$danger-active":"var(--theme-danger-active)","$danger-invert":"var(--theme-danger-invert)","$danger-box-shadow":"var(--theme-danger-box-shadow)","$colors":{"primary":"var(--theme-primary-base),var(--theme-primary-background),var(--theme-primary-dark),var(--theme-primary-hover),var(--theme-primary-active),var(--theme-primary-invert),var(--theme-primary-box-shadow),var(--theme-primary-background-glow-high-contrast)","secondary":"var(--theme-secondary-base),var(--theme-secondary-background),var(--theme-secondary-dark),var(--theme-secondary-hover),var(--theme-secondary-active),var(--theme-secondary-invert),var(--theme-secondary-box-shadow),var(--theme-secondary-background-glow-high-contrast)","tertiary":"var(--theme-tertiary-base),var(--theme-tertiary-background),var(--theme-tertiary-dark),var(--theme-tertiary-hover),var(--theme-tertiary-active),var(--theme-tertiary-invert),var(--theme-tertiary-box-shadow),var(--theme-tertiary-background-glow-high-contrast)","success":"var(--theme-success-base),var(--theme-success-background),var(--theme-success-dark),var(--theme-success-hover),var(--theme-success-active),var(--theme-success-invert),var(--theme-success-box-shadow),var(--theme-success-background-glow-high-contrast)","info":"var(--theme-info-base),var(--theme-info-background),var(--theme-info-dark),var(--theme-info-hover),var(--theme-info-active),var(--theme-info-invert),var(--theme-info-box-shadow),var(--theme-info-background-glow-high-contrast)","warning":"var(--theme-warning-base),var(--theme-warning-background),var(--theme-warning-dark),var(--theme-warning-hover),var(--theme-warning-active),var(--theme-warning-invert),var(--theme-warning-box-shadow),var(--theme-warning-background-glow-high-contrast)","danger":"var(--theme-danger-base),var(--theme-danger-background),var(--theme-danger-dark),var(--theme-danger-hover),var(--theme-danger-active),var(--theme-danger-invert),var(--theme-danger-box-shadow),var(--theme-danger-background-glow-high-contrast)"},"$color-index-base":"1","$color-index-background":"2","$color-index-dark":"3","$color-index-hover":"4","$color-index-active":"5","$color-index-invert":"6","$color-index-box-shadow":"7","$color-index-background-glow-high-contrast":"8"}},"direction":{"name":"direction","location":"/css/src/tokens/direction.scss","tokens":{"$user-text-direction":"ltr","$user-left":"left","$user-right":"right","$user-translate-x-direction":"1","$directions":{"top":"top","right":"right","bottom":"bottom","left":"left"}}},"display":{"name":"display","location":"/css/src/tokens/display.scss","tokens":{"$displays":"block, flex, inline, inline-block, inline-flex, grid, none"}},"focus":{"name":"focus","location":"/css/src/tokens/focus.scss","tokens":{"$focus-width":"0.125rem","$focus-style":"dashed","$focus-outline-offset":"0.25rem","$focus-visible-use-polyfill":false}},"font-stack":{"name":"font-stack","location":"/css/src/tokens/font-stack.scss","tokens":{"$monospace-font-stack":"SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace","$normal-font-stack":"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji","$quote-font-stack":"Arial, Helvetica Neue, Helvetica, sans-serif"}},"layout":{"name":"layout","location":"/css/src/tokens/layout.scss","tokens":{"$column-gap":"0.75rem","$large-column-gap":"1.5rem","$reading-max-width":"50rem"}},"palette":{"name":"palette","location":"/css/src/tokens/palette.scss","tokens":{"$palette-grey-10":"#fafafa","$palette-grey-20":"#f2f2f2","$palette-grey-30":"#e6e6e6","$palette-grey-40":"#d2d2d2","$palette-grey-50":"#bcbcbc","$palette-grey-60":"#a2a2a2","$palette-grey-70":"#8e8e8e","$palette-grey-80":"#757575","$palette-grey-90":"#505050","$palette-grey-100":"#404040","$palette-grey-110":"#2f2f2f","$palette-grey-120":"#171717","$palette-black":"#000","$palette-black-opacity-90":"rgba(0, 0, 0, 0.9)","$palette-black-opacity-80":"rgba(0, 0, 0, 0.8)","$palette-black-opacity-70":"rgba(0, 0, 0, 0.7)","$palette-black-opacity-60":"rgba(0, 0, 0, 0.6)","$palette-black-opacity-50":"rgba(0, 0, 0, 0.5)","$palette-black-opacity-40":"rgba(0, 0, 0, 0.4)","$palette-black-opacity-30":"rgba(0, 0, 0, 0.3)","$palette-black-opacity-20":"rgba(0, 0, 0, 0.2)","$palette-black-opacity-10":"rgba(0, 0, 0, 0.1)","$palette-black-opacity-0":"rgba(0, 0, 0, 0)","$palette-white":"#fff","$palette-white-opacity-0":"rgba(255, 255, 255, 0)","$palette-white-opacity-10":"rgba(255, 255, 255, 0.1)","$palette-white-opacity-20":"rgba(255, 255, 255, 0.2)","$palette-white-opacity-30":"rgba(255, 255, 255, 0.3)","$palette-white-opacity-40":"rgba(255, 255, 255, 0.4)","$palette-white-opacity-50":"rgba(255, 255, 255, 0.5)","$palette-white-opacity-60":"rgba(255, 255, 255, 0.6)","$palette-white-opacity-70":"rgba(255, 255, 255, 0.7)","$palette-white-opacity-80":"rgba(255, 255, 255, 0.8)","$palette-white-opacity-90":"rgba(255, 255, 255, 0.9)","$palette-black-opacity-108":"rgba(0, 0, 0, 0.11)","$palette-black-opacity-132":"rgba(0, 0, 0, 0.13)","$palette-black-opacity-22":"rgba(0, 0, 0, 0.22)","$palette-black-opacity-18":"rgba(0, 0, 0, 0.18)","$palette-white-opacity-108":"rgba(255, 255, 255, 0.11)","$palette-white-opacity-132":"rgba(255, 255, 255, 0.13)","$palette-white-opacity-22":"rgba(255, 255, 255, 0.22)","$palette-white-opacity-18":"rgba(255, 255, 255, 0.18)","$palette-blue-10":"#d7eaf8","$palette-blue-20":"#9ccbee","$palette-blue-30":"#75b6e7","$palette-blue-40":"#278cda","$palette-blue-50":"#0078d4","$palette-blue-60":"#0065b3","$palette-blue-70":"#00579a","$palette-blue-80":"#004173","$palette-blue-90":"#002b4d","$palette-blue-100":"#000a13","$palette-blue-opacity-30":"rgba(0, 101, 179, 0.3)","$palette-blue-opacity-70":"rgba(0, 101, 179, 0.7)","$palette-navy-10":"#dfe5ee","$palette-navy-20":"#c1cbdc","$palette-navy-30":"#a4b2c9","$palette-navy-40":"#899ab5","$palette-navy-50":"#70819f","$palette-navy-60":"#4a5d7e","$palette-navy-70":"#243a5e","$palette-navy-80":"#14294c","$palette-navy-90":"#061329","$palette-navy-100":"#000910","$palette-navy-opacity-30":"rgba(15, 42, 47, 0.3)","$palette-navy-opacity-70":"rgba(15, 42, 47, 0.7)","$palette-turqoise-10":"#e9fbff","$palette-turqoise-20":"#bdf5ff","$palette-turqoise-30":"#7becff","$palette-turqoise-40":"#50e6ff","$palette-turqoise-50":"#41b9cf","$palette-turqoise-60":"#328e9f","$palette-turqoise-70":"#28727f","$palette-turqoise-80":"#19474f","$palette-turqoise-90":"#0f2a2f","$palette-turqoise-100":"#050e0f","$palette-green-10":"#dff6dd","$palette-green-20":"#acd7aa","$palette-green-30":"#7cbb7b","$palette-green-40":"#489d48","$palette-green-50":"#2a8b2a","$palette-green-60":"#107c10","$palette-green-70":"#0b6413","$palette-green-80":"#054b16","$palette-green-90":"#05350c","$palette-green-100":"#061a00","$palette-green-opacity-30":"rgba(72, 157, 72, 0.3)","$palette-green-opacity-70":"rgba(72, 157, 72, 0.7)","$palette-purple-10":"#efd9fd","$palette-purple-20":"#e0b7fe","$palette-purple-30":"#d59dff","$palette-purple-40":"#ac7ee1","$palette-purple-50":"#9970d3","$palette-purple-60":"#8661c5","$palette-purple-70":"#624991","$palette-purple-80":"#3b2e58","$palette-purple-90":"#201843","$palette-purple-100":"#03002c","$palette-purple-opacity-30":"rgba(32, 24, 67, 0.3)","$palette-purple-opacity-70":"rgba(32, 24, 67, 0.7)","$palette-yellow-10":"#fff4ce","$palette-yellow-20":"#ffe79f","$palette-yellow-30":"#ffdf84","$palette-yellow-40":"#ffcb3f","$palette-yellow-50":"#ffb900","$palette-yellow-60":"#d19501","$palette-yellow-70":"#966802","$palette-yellow-80":"#6a4b16","$palette-yellow-90":"#4f340e","$palette-yellow-100":"#2d1703","$palette-yellow-opacity-30":"rgba(255, 187, 0, 0.3)","$palette-yellow-opacity-70":"rgba(255, 187, 0, 0.7)","$palette-red-10":"#fde7e9","$palette-red-20":"#e5a7a8","$palette-red-30":"#d4797a","$palette-red-40":"#c54f4f","$palette-red-50":"#b62626","$palette-red-60":"#a80000","$palette-red-70":"#870000","$palette-red-80":"#630001","$palette-red-90":"#470001","$palette-red-100":"#290001","$palette-red-opacity-30":"rgba(168, 0, 0, 0.3)","$palette-red-opacity-70":"rgba(168, 0, 0, 0.7)","$palette-yellow-high-contrast":"#ff0","$palette-yellow-high-contrast-hover":"#ff3","$palette-visited-high-contrast":"#3cff00"}},"position":{"name":"position","location":"/css/src/tokens/position.scss","tokens":{"$positions":"fixed, absolute, relative, sticky"}},"radius":{"name":"radius","location":"/css/src/tokens/radius.scss","tokens":{"$radius-sm":"2px","$radius":"4px","$radius-lg":"6px","$radius-rounded":"290486px"}},"schemes":{"name":"schemes","location":"/css/src/tokens/schemes.scss","tokens":{"$color-schemes":{"light":"light","dark":"dark","high-contrast":"dark"}}},"shadow":{"name":"shadow","location":"/css/src/tokens/shadow.scss","tokens":{"$box-shadow-light":"0 1.6px 3.6px 0 var(--theme-box-shadow-medium), 0 0.3px 0.9px 0 var(--theme-box-shadow-light)","$box-shadow-medium":"0 3.2px 7.2px 0 var(--theme-box-shadow-medium), 0 0.6px 1.8px 0 var(--theme-box-shadow-light)","$box-shadow-heavy":"0 6.4px 14.4px 0 var(--theme-box-shadow-medium), 0 1.2px 3.6px 0 var(--theme-box-shadow-light)","$box-shadow-extra-heavy":"0 25.6px 57.6px 0 var(--theme-box-shadow-extra-heavy), 0 4.8px 14.4px 0 var(--theme-box-shadow-heavy)"}},"spacing":{"name":"spacing","location":"/css/src/tokens/spacing.scss","tokens":{"$layout-0":"0","$layout-1":"0.5rem","$layout-2":"1rem","$layout-3":"1.5rem","$layout-4":"2rem","$layout-5":"3rem","$layout-6":"4rem","$layout-7":"6rem","$layout-8":"8rem","$spacer-0":"0","$spacer-1":"0.125rem","$spacer-2":"0.25rem","$spacer-3":"0.5rem","$spacer-4":"0.75rem","$spacer-5":"1rem","$spacer-6":"1.25rem","$spacer-7":"1.5rem","$spacer-8":"2rem","$spacer-9":"2.5rem","$spacer-10":"3rem"}},"themes":{"name":"themes","location":"/css/src/tokens/themes.scss","tokens":{"$themes":{"light":{"text":"#171717","text-subtle":"#505050","text-invert":"#fff","text-glow-high-contrast":"#171717","box-shadow-light":"rgba0,0,0,0.11)","box-shadow-medium":"rgba(0,0,0,0.13)","box-shadow-heavy":"rgba(0,0,0,0.18)","box-shadow-extra-heavy":"rgba(0,0,0,0.22)","overlay":"rgba(0,0,0,0.7)","overlay-invert":"#fff","body-background":"#fff","body-background-medium":"#f2f2f2","alternate-background":"#171717","alternate-background-medium":"#2f2f2f","border":"#e6e6e6","table-header":"#e6e6e6","table-row-header":"#fafafa","table-border-dark":"#d2d2d2","hover-base":"#2f2f2f","hover-invert":"#fafafa","border-white-high-contrast":"rgba(255,255,255,0)","border-yellow-high-contrast":"rgba(0,0,0,0)","code-header":"#e6e6e6","code-block":"#f2f2f2","inline-code":"#e6e6e6","code-highlight-background":"#fff4ce","visited":"#624991","score-low-off":"rgba(168,0,0,0.3)","score-low":"#b62626","score-medium-off":"rgba(255,187,0,0.3)","score-medium":"#ffb900","score-high-off":"rgba(72,157,72,0.3)","score-high":"#2a8b2a","hyperlink":"#0065b3","primary-base":"#0078d4","primary-background":"#d7eaf8","primary-background-glow-high-contrast":"#d7eaf8","primary-dark":"#004173","primary-hover":"#0065b3","primary-active":"#00579a","primary-box-shadow":"rgba(0,101,179,0.3)","primary-invert":"#fff","secondary-base":"#a2a2a2","secondary-background":"#e6e6e6","secondary-background-glow-high-contrast":"#e6e6e6","secondary-dark":"#2f2f2f","secondary-hover":"#d2d2d2","secondary-active":"#d2d2d2","secondary-box-shadow":"rgba(0,0,0,0.3)","secondary-invert":"#000","tertiary-base":"#243a5e","tertiary-background":"#061329","tertiary-background-glow-high-contrast":"#061329","tertiary-dark":"#a4b2c9","tertiary-hover":"#14294c","tertiary-active":"#70819f","tertiary-box-shadow":"rgba(38,23,63,0.3)","tertiary-invert":"#fff","success-base":"#107c10","success-background":"#dff6dd","success-background-glow-high-contrast":"#dff6dd","success-dark":"#054b16","success-hover":"#0b6413","success-active":"#054b16","success-box-shadow":"rgba(72,157,72,0.3)","success-invert":"#fff","info-base":"#8661c5","info-background":"#efd9fd","info-background-glow-high-contrast":"#efd9fd","info-dark":"#3b2e58","info-hover":"#8661c5","info-active":"#624991","info-box-shadow":"rgba(32,24,67,0.3)","info-invert":"#fff","warning-base":"#ffb900","warning-background":"#fff4ce","warning-background-glow-high-contrast":"#fff4ce","warning-dark":"#6a4b16","warning-hover":"#d19501","warning-active":"#966802","warning-box-shadow":"rgba(255,187,0,0.3)","warning-invert":"#000","danger-base":"#a80000","danger-background":"#fde7e9","danger-background-glow-high-contrast":"#fde7e9","danger-dark":"#470001","danger-hover":"#870000","danger-active":"#630001","danger-box-shadow":"rgba(168,0,0,0.3)","danger-invert":"#fff","facepile-red":"#a80000","facepile-teal":"#328e9f","facepile-blue":"#0078d4"},"dark":{"text":"#e6e6e6","text-subtle":"#d2d2d2","text-invert":"#2f2f2f","text-glow-high-contrast":"#e6e6e6","box-shadow-light":"rgba255,255,255,0.11)","box-shadow-medium":"rgba(255,255,255,0.13)","box-shadow-heavy":"rgba(255,255,255,0.18)","box-shadow-extra-heavy":"rgba(255,255,255,0.22)","overlay":"rgba(0,0,0,0.7)","overlay-invert":"#fff","body-background":"#171717","body-background-medium":"#2f2f2f","alternate-background":"#f2f2f2","alternate-background-medium":"#fafafa","border":"#404040","table-header":"#404040","table-row-header":"#2f2f2f","table-border-dark":"#505050","hover-base":"#d2d2d2","hover-invert":"#2f2f2f","border-white-high-contrast":"rgba(255,255,255,0)","border-yellow-high-contrast":"rgba(0,0,0,0)","code-header":"#404040","code-block":"#2f2f2f","inline-code":"#404040","code-highlight-background":"#0b6413","visited":"#ac7ee1","score-low-off":"rgba(168,0,0,0.7)","score-low":"#b62626","score-medium-off":"rgba(255,187,0,0.3)","score-medium":"#ffcb3f","score-high-off":"rgba(72,157,72,0.7)","score-high":"#489d48","hyperlink":"#75b6e7","primary-base":"#75b6e7","primary-background":"#004173","primary-background-glow-high-contrast":"#004173","primary-dark":"#9ccbee","primary-hover":"#278cda","primary-active":"#0078d4","primary-box-shadow":"rgba(0,101,179,0.3)","primary-invert":"#000","secondary-base":"#757575","secondary-background":"#404040","secondary-background-glow-high-contrast":"#404040","secondary-dark":"#e6e6e6","secondary-hover":"#8e8e8e","secondary-active":"#a2a2a2","secondary-box-shadow":"rgba(0,0,0,0.7)","secondary-invert":"#fff","tertiary-base":"#404040","tertiary-background":"#171717","tertiary-background-glow-high-contrast":"#171717","tertiary-dark":"#e6e6e6","tertiary-hover":"#505050","tertiary-active":"#757575","tertiary-box-shadow":"rgba(0,101,179,0.3)","tertiary-invert":"#fff","success-base":"#7cbb7b","success-background":"#054b16","success-background-glow-high-contrast":"#054b16","success-dark":"#dff6dd","success-hover":"#489d48","success-active":"#7cbb7b","success-box-shadow":"rgba(72,157,72,0.7)","success-invert":"#000","info-base":"#9970d3","info-background":"#3b2e58","info-background-glow-high-contrast":"#3b2e58","info-dark":"#efd9fd","info-hover":"#ac7ee1","info-active":"#d59dff","info-box-shadow":"rgba(32,24,67,0.7)","info-invert":"#000","warning-base":"#ffb900","warning-background":"#6a4b16","warning-background-glow-high-contrast":"#6a4b16","warning-dark":"#fff4ce","warning-hover":"#ffcb3f","warning-active":"#ffdf84","warning-box-shadow":"rgba(255,187,0,0.7)","warning-invert":"#000","danger-base":"#d4797a","danger-background":"#630001","danger-background-glow-high-contrast":"#630001","danger-dark":"#fde7e9","danger-hover":"#c54f4f","danger-active":"#d4797a","danger-box-shadow":"rgba(168,0,0,0.7)","danger-invert":"#000","facepile-red":"#c54f4f","facepile-teal":"#50e6ff","facepile-blue":"#278cda"},"high-contrast":{"text":"#fff","text-subtle":"#fff","text-invert":"#000","text-glow-high-contrast":"#ff0","box-shadow-light":"rgba255,255,255,0)","box-shadow-medium":"rgba(255,255,255,0)","box-shadow-heavy":"rgba(255,255,255,0)","box-shadow-extra-heavy":"rgba(255,255,255,0)","overlay":"#404040","overlay-invert":"#fff","body-background":"#000","body-background-medium":"#000","alternate-background":"#fff","alternate-background-medium":"#fff","border":"#fff","table-header":"#505050","table-row-header":"#171717","table-border-dark":"#fff","hover-base":"#ff0","hover-invert":"#000","border-white-high-contrast":"#fff","border-yellow-high-contrast":"#ff0","code-header":"#000","code-block":"#000","inline-code":"#2f2f2f","code-highlight-background":"#0b6413","visited":"#3cff00","score-low-off":"#a80000","score-low":"#fde7e9","score-medium-off":"rgba(255,187,0,0.7)","score-medium":"#ffe79f","score-high-off":"#107c10","score-high":"#dff6dd","hyperlink":"#ff0","primary-base":"#ff0","primary-background":"#000","primary-background-glow-high-contrast":"#ff0","primary-dark":"#ff0","primary-hover":"#ff3","primary-active":"#ff3","primary-box-shadow":"#fff","primary-invert":"#000","secondary-base":"#e6e6e6","secondary-background":"#000","secondary-background-glow-high-contrast":"#505050","secondary-dark":"#e6e6e6","secondary-hover":"#d2d2d2","secondary-active":"#d2d2d2","secondary-box-shadow":"#e6e6e6","secondary-invert":"#000","tertiary-base":"#fff","tertiary-background":"#000","tertiary-background-glow-high-contrast":"#fff","tertiary-dark":"#fff","tertiary-hover":"#e6e6e6","tertiary-active":"#e6e6e6","tertiary-box-shadow":"#fff","tertiary-invert":"#000","success-base":"#acd7aa","success-background":"#000","success-background-glow-high-contrast":"#acd7aa","success-dark":"#dff6dd","success-hover":"#dff6dd","success-active":"#dff6dd","success-box-shadow":"#fff","success-invert":"#000","info-base":"#e0b7fe","info-background":"#000","info-background-glow-high-contrast":"#e0b7fe","info-dark":"#efd9fd","info-hover":"#efd9fd","info-active":"#efd9fd","info-box-shadow":"#fff","info-invert":"#000","warning-base":"#ffe79f","warning-background":"#000","warning-background-glow-high-contrast":"#ffe79f","warning-dark":"#fff4ce","warning-hover":"#fff4ce","warning-active":"#fff4ce","warning-box-shadow":"#fff","warning-invert":"#000","danger-base":"#e5a7a8","danger-background":"#000","danger-background-glow-high-contrast":"#e5a7a8","danger-dark":"#fde7e9","danger-hover":"#fde7e9","danger-active":"#fde7e9","danger-box-shadow":"#fff","danger-invert":"#000","facepile-red":"#d4797a","facepile-teal":"#7becff","facepile-blue":"#75b6e7"}}}},"typography":{"name":"typography","location":"/css/src/tokens/typography.scss","tokens":{"$document-font-size":"16px","$font-size-9":"0.75rem","$font-size-8":"0.875rem","$font-size-7":"1rem","$font-size-6":"1.125rem","$font-size-5":"1.25rem","$font-size-4":"1.5rem","$font-size-3":"1.75rem","$font-size-2":"2.125rem","$font-size-1":"2.5rem","$font-size-0":"3.375rem","$weight-light":"100","$weight-semilight":"200","$weight-normal":"400","$weight-semibold":"600","$weight-bold":"700","$letter-spacing-medium":"0.125rem","$letter-spacing-wide":"0.225rem"}},"z-index":{"name":"z-index","location":"/css/src/tokens/z-index.scss","tokens":{"$zindex-active":"1","$zindex-hover":"2","$zindex-focus":"3","$zindex-multi":"4","$zindex-dropdown":"1000","$zindex-sticky":"1020","$zindex-fixed":"1030","$zindex-modal-backdrop":"1040","$zindex-modal":"1050","$zindex-popover":"1060","$zindex-tooltip":"1070","$zindex-stretched-link":"1"}}}
1
+ {"animation":{"name":"animation","location":"/css/src/tokens/animation.scss","tokens":{"$input-timing-function":"cubic-bezier(0.4, 0, 0.23, 1)","$input-transition-duration":"200ms","$nav-bar-transition-duration":"86ms"}},"border":{"name":"border","location":"/css/src/tokens/border.scss","tokens":{"$border-width":"1px","$border-width-lg":"0.5rem","$border-radius":"0.25rem","$border-radius-lg":"0.5rem"}},"breakpoints":{"name":"breakpoints","location":"/css/src/tokens/breakpoints.scss","tokens":{"$container-gap":"64px","$breakpoint-tablet":"768px","$breakpoint-desktop":"1088px","$breakpoint-widescreen":"1800px"}},"colors":{"name":"colors","location":"/css/src/tokens/colors.scss","tokens":{"$white-static":"#fff","$black-static":"#000","$text":"var(--theme-text)","$text-subtle":"var(--theme-text-subtle)","$text-invert":"var(--theme-text-invert)","$hyperlink":"var(--theme-hyperlink)","$text-glow-high-contrast":"var(--theme-text-glow-high-contrast)","$box-shadow-color-light":"var(--theme-box-shadow-light)","$box-shadow-color-medium":"var(--theme-box-shadow-medium)","$box-shadow-color-heavy":"var(--theme-box-shadow-heavy)","$box-shadow-color-extra-heavy":"var(--theme-box-shadow-extra-heavy)","$body-background":"var(--theme-body-background)","$body-background-medium":"var(--theme-body-background-medium)","$alternate-background":"var(--theme-alternate-background)","$alternate-background-medium":"var(--theme-alternate-background-medium)","$overlay":"var(--theme-overlay)","$overlay-invert":"var(--theme-overlay-invert)","$overlay-static":"rgba(0, 0, 0, 0.5)","$border":"var(--theme-border)","$code-header":"var(--theme-code-header)","$code-block":"var(--theme-code-block)","$inline-code":"var(--theme-inline-code)","$table-header":"var(--theme-table-header)","$table-row-header":"var(--theme-table-row-header)","$table-border-dark":"var(--theme-table-border-dark)","$facepile-red":"var(--theme-facepile-red)","$facepile-teal":"var(--theme-facepile-teal)","$facepile-blue":"var(--theme-facepile-blue)","$default-hover":"var(--theme-hover-base)","$default-hover-invert":"var(--theme-body-background-medium)","$border-white-high-contrast":"var(--theme-border-white-high-contrast)","$border-yellow-high-contrast":"var(--theme-border-yellow-high-contrast)","$code-highlight-background":"var(--theme-code-highlight-background)","$visited":"var(--theme-visited)","$score-low-off":"var(--theme-score-low-off)","$score-low":"var(--theme-score-low)","$score-medium-off":"var(--theme-score-medium-off)","$score-medium":"var(--theme-score-medium)","$score-high-off":"var(--theme-score-high-off)","$score-high":"var(--theme-score-high)","$primary":"var(--theme-primary-base)","$primary-background":"var(--theme-primary-background)","$primary-background-glow-high-contrast":"var(--theme-primary-background-glow-high-contrast)","$primary-dark":"var(--theme-primary-dark)","$primary-hover":"var(--theme-primary-hover)","$primary-active":"var(--theme-primary-active)","$primary-invert":"var(--theme-primary-invert)","$primary-box-shadow":"var(--theme-primary-box-shadow)","$secondary":"var(--theme-secondary-base)","$secondary-background":"var(--theme-secondary-background)","$secondary-background-glow-high-contrast":"var(--theme-secondary-background-glow-high-contrast)","$secondary-dark":"var(--theme-secondary-dark)","$secondary-hover":"var(--theme-secondary-hover)","$secondary-active":"var(--theme-secondary-active)","$secondary-invert":"var(--theme-secondary-invert)","$secondary-box-shadow":"var(--theme-secondary-box-shadow)","$tertiary":"var(--theme-tertiary-base)","$tertiary-background":"var(--theme-tertiary-background)","$tertiary-background-glow-high-contrast":"var(--theme-tertiary-background-glow-high-contrast)","$tertiary-dark":"var(--theme-tertiary-dark)","$tertiary-hover":"var(--theme-tertiary-hover)","$tertiary-active":"var(--theme-tertiary-active)","$tertiary-invert":"var(--theme-tertiary-invert)","$tertiary-box-shadow":"var(--theme-tertiary-box-shadow)","$success":"var(--theme-success-base)","$success-background":"var(--theme-success-background)","$success-background-glow-high-contrast":"var(--theme-success-background-glow-high-contrast)","$success-dark":"var(--theme-success-dark)","$success-hover":"var(--theme-success-hover)","$success-active":"var(--theme-success-active)","$success-invert":"var(--theme-success-invert)","$success-box-shadow":"var(--theme-success-box-shadow)","$info":"var(--theme-info-base)","$info-background":"var(--theme-info-background)","$info-background-glow-high-contrast":"var(--theme-info-background-glow-high-contrast)","$info-dark":"var(--theme-info-dark)","$info-hover":"var(--theme-info-hover)","$info-active":"var(--theme-info-active)","$info-invert":"var(--theme-info-invert)","$info-box-shadow":"var(--theme-info-box-shadow)","$warning":"var(--theme-warning-base)","$warning-background":"var(--theme-warning-background)","$warning-background-glow-high-contrast":"var(--theme-warning-background-glow-high-contrast)","$warning-dark":"var(--theme-warning-dark)","$warning-hover":"var(--theme-warning-hover)","$warning-active":"var(--theme-warning-active)","$warning-invert":"var(--theme-warning-invert)","$warning-box-shadow":"var(--theme-warning-box-shadow)","$danger":"var(--theme-danger-base)","$danger-background":"var(--theme-danger-background)","$danger-background-glow-high-contrast":"var(--theme-danger-background-glow-high-contrast)","$danger-dark":"var(--theme-danger-dark)","$danger-hover":"var(--theme-danger-hover)","$danger-active":"var(--theme-danger-active)","$danger-invert":"var(--theme-danger-invert)","$danger-box-shadow":"var(--theme-danger-box-shadow)","$colors":{"primary":"var(--theme-primary-base),var(--theme-primary-background),var(--theme-primary-dark),var(--theme-primary-hover),var(--theme-primary-active),var(--theme-primary-invert),var(--theme-primary-box-shadow),var(--theme-primary-background-glow-high-contrast)","secondary":"var(--theme-secondary-base),var(--theme-secondary-background),var(--theme-secondary-dark),var(--theme-secondary-hover),var(--theme-secondary-active),var(--theme-secondary-invert),var(--theme-secondary-box-shadow),var(--theme-secondary-background-glow-high-contrast)","tertiary":"var(--theme-tertiary-base),var(--theme-tertiary-background),var(--theme-tertiary-dark),var(--theme-tertiary-hover),var(--theme-tertiary-active),var(--theme-tertiary-invert),var(--theme-tertiary-box-shadow),var(--theme-tertiary-background-glow-high-contrast)","success":"var(--theme-success-base),var(--theme-success-background),var(--theme-success-dark),var(--theme-success-hover),var(--theme-success-active),var(--theme-success-invert),var(--theme-success-box-shadow),var(--theme-success-background-glow-high-contrast)","info":"var(--theme-info-base),var(--theme-info-background),var(--theme-info-dark),var(--theme-info-hover),var(--theme-info-active),var(--theme-info-invert),var(--theme-info-box-shadow),var(--theme-info-background-glow-high-contrast)","warning":"var(--theme-warning-base),var(--theme-warning-background),var(--theme-warning-dark),var(--theme-warning-hover),var(--theme-warning-active),var(--theme-warning-invert),var(--theme-warning-box-shadow),var(--theme-warning-background-glow-high-contrast)","danger":"var(--theme-danger-base),var(--theme-danger-background),var(--theme-danger-dark),var(--theme-danger-hover),var(--theme-danger-active),var(--theme-danger-invert),var(--theme-danger-box-shadow),var(--theme-danger-background-glow-high-contrast)"},"$color-index-base":"1","$color-index-background":"2","$color-index-dark":"3","$color-index-hover":"4","$color-index-active":"5","$color-index-invert":"6","$color-index-box-shadow":"7","$color-index-background-glow-high-contrast":"8"}},"direction":{"name":"direction","location":"/css/src/tokens/direction.scss","tokens":{"$user-text-direction":"ltr","$user-left":"left","$user-right":"right","$user-translate-x-direction":"1","$directions":{"top":"top","right":"right","bottom":"bottom","left":"left"}}},"display":{"name":"display","location":"/css/src/tokens/display.scss","tokens":{"$displays":"block, flex, inline, inline-block, inline-flex, grid, none"}},"focus":{"name":"focus","location":"/css/src/tokens/focus.scss","tokens":{"$focus-width":"0.125rem","$focus-style":"dashed","$focus-outline-offset":"0.25rem","$focus-visible-use-polyfill":false}},"font-stack":{"name":"font-stack","location":"/css/src/tokens/font-stack.scss","tokens":{"$monospace-font-stack":"SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace","$normal-font-stack":"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji","$quote-font-stack":"Arial, Helvetica Neue, Helvetica, sans-serif"}},"layout":{"name":"layout","location":"/css/src/tokens/layout.scss","tokens":{"$column-gap":"0.75rem","$large-column-gap":"1.5rem","$reading-max-width":"50rem"}},"palette":{"name":"palette","location":"/css/src/tokens/palette.scss","tokens":{"$palette-grey-10":"#fafafa","$palette-grey-20":"#f2f2f2","$palette-grey-30":"#e6e6e6","$palette-grey-40":"#d2d2d2","$palette-grey-50":"#bcbcbc","$palette-grey-60":"#a2a2a2","$palette-grey-70":"#8e8e8e","$palette-grey-80":"#757575","$palette-grey-90":"#505050","$palette-grey-100":"#404040","$palette-grey-110":"#2f2f2f","$palette-grey-120":"#171717","$palette-black":"#000","$palette-black-opacity-90":"rgba(0, 0, 0, 0.9)","$palette-black-opacity-80":"rgba(0, 0, 0, 0.8)","$palette-black-opacity-70":"rgba(0, 0, 0, 0.7)","$palette-black-opacity-60":"rgba(0, 0, 0, 0.6)","$palette-black-opacity-50":"rgba(0, 0, 0, 0.5)","$palette-black-opacity-40":"rgba(0, 0, 0, 0.4)","$palette-black-opacity-30":"rgba(0, 0, 0, 0.3)","$palette-black-opacity-20":"rgba(0, 0, 0, 0.2)","$palette-black-opacity-10":"rgba(0, 0, 0, 0.1)","$palette-black-opacity-0":"rgba(0, 0, 0, 0)","$palette-white":"#fff","$palette-white-opacity-0":"rgba(255, 255, 255, 0)","$palette-white-opacity-10":"rgba(255, 255, 255, 0.1)","$palette-white-opacity-20":"rgba(255, 255, 255, 0.2)","$palette-white-opacity-30":"rgba(255, 255, 255, 0.3)","$palette-white-opacity-40":"rgba(255, 255, 255, 0.4)","$palette-white-opacity-50":"rgba(255, 255, 255, 0.5)","$palette-white-opacity-60":"rgba(255, 255, 255, 0.6)","$palette-white-opacity-70":"rgba(255, 255, 255, 0.7)","$palette-white-opacity-80":"rgba(255, 255, 255, 0.8)","$palette-white-opacity-90":"rgba(255, 255, 255, 0.9)","$palette-black-opacity-108":"rgba(0, 0, 0, 0.11)","$palette-black-opacity-132":"rgba(0, 0, 0, 0.13)","$palette-black-opacity-22":"rgba(0, 0, 0, 0.22)","$palette-black-opacity-18":"rgba(0, 0, 0, 0.18)","$palette-white-opacity-108":"rgba(255, 255, 255, 0.11)","$palette-white-opacity-132":"rgba(255, 255, 255, 0.13)","$palette-white-opacity-22":"rgba(255, 255, 255, 0.22)","$palette-white-opacity-18":"rgba(255, 255, 255, 0.18)","$palette-blue-10":"#d7eaf8","$palette-blue-20":"#9ccbee","$palette-blue-30":"#75b6e7","$palette-blue-40":"#278cda","$palette-blue-50":"#0078d4","$palette-blue-60":"#0065b3","$palette-blue-70":"#00579a","$palette-blue-80":"#004173","$palette-blue-90":"#002b4d","$palette-blue-100":"#000a13","$palette-blue-opacity-30":"rgba(0, 101, 179, 0.3)","$palette-blue-opacity-70":"rgba(0, 101, 179, 0.7)","$palette-navy-10":"#dfe5ee","$palette-navy-20":"#c1cbdc","$palette-navy-30":"#a4b2c9","$palette-navy-40":"#899ab5","$palette-navy-50":"#70819f","$palette-navy-60":"#4a5d7e","$palette-navy-70":"#243a5e","$palette-navy-80":"#14294c","$palette-navy-90":"#061329","$palette-navy-100":"#000910","$palette-navy-opacity-30":"rgba(15, 42, 47, 0.3)","$palette-navy-opacity-70":"rgba(15, 42, 47, 0.7)","$palette-turqoise-10":"#e9fbff","$palette-turqoise-20":"#bdf5ff","$palette-turqoise-30":"#7becff","$palette-turqoise-40":"#50e6ff","$palette-turqoise-50":"#41b9cf","$palette-turqoise-60":"#328e9f","$palette-turqoise-70":"#28727f","$palette-turqoise-80":"#19474f","$palette-turqoise-90":"#0f2a2f","$palette-turqoise-100":"#050e0f","$palette-green-10":"#dff6dd","$palette-green-20":"#acd7aa","$palette-green-30":"#7cbb7b","$palette-green-40":"#489d48","$palette-green-50":"#2a8b2a","$palette-green-60":"#107c10","$palette-green-70":"#0b6413","$palette-green-80":"#054b16","$palette-green-90":"#05350c","$palette-green-100":"#061a00","$palette-green-opacity-30":"rgba(72, 157, 72, 0.3)","$palette-green-opacity-70":"rgba(72, 157, 72, 0.7)","$palette-purple-10":"#efd9fd","$palette-purple-20":"#e0b7fe","$palette-purple-30":"#d59dff","$palette-purple-40":"#ac7ee1","$palette-purple-50":"#9970d3","$palette-purple-60":"#8661c5","$palette-purple-70":"#624991","$palette-purple-80":"#3b2e58","$palette-purple-90":"#201843","$palette-purple-100":"#03002c","$palette-purple-opacity-30":"rgba(32, 24, 67, 0.3)","$palette-purple-opacity-70":"rgba(32, 24, 67, 0.7)","$palette-yellow-10":"#fff4ce","$palette-yellow-20":"#ffe79f","$palette-yellow-30":"#ffdf84","$palette-yellow-40":"#ffcb3f","$palette-yellow-50":"#ffb900","$palette-yellow-60":"#d19501","$palette-yellow-70":"#966802","$palette-yellow-80":"#6a4b16","$palette-yellow-90":"#4f340e","$palette-yellow-100":"#2d1703","$palette-yellow-opacity-30":"rgba(255, 187, 0, 0.3)","$palette-yellow-opacity-70":"rgba(255, 187, 0, 0.7)","$palette-red-10":"#fde7e9","$palette-red-20":"#e5a7a8","$palette-red-30":"#d4797a","$palette-red-40":"#c54f4f","$palette-red-50":"#b62626","$palette-red-60":"#a80000","$palette-red-70":"#870000","$palette-red-80":"#630001","$palette-red-90":"#470001","$palette-red-100":"#290001","$palette-red-opacity-30":"rgba(168, 0, 0, 0.3)","$palette-red-opacity-70":"rgba(168, 0, 0, 0.7)","$palette-yellow-high-contrast":"#ff0","$palette-yellow-high-contrast-hover":"#ff3","$palette-visited-high-contrast":"#3cff00"}},"position":{"name":"position","location":"/css/src/tokens/position.scss","tokens":{"$positions":"fixed, absolute, relative, sticky"}},"radius":{"name":"radius","location":"/css/src/tokens/radius.scss","tokens":{"$radius-sm":"2px","$radius":"4px","$radius-lg":"6px","$radius-rounded":"290486px"}},"schemes":{"name":"schemes","location":"/css/src/tokens/schemes.scss","tokens":{"$color-schemes":{"light":"light","dark":"dark","high-contrast":"dark"}}},"shadow":{"name":"shadow","location":"/css/src/tokens/shadow.scss","tokens":{"$box-shadow-light":"0 1.6px 3.6px 0 var(--theme-box-shadow-medium), 0 0.3px 0.9px 0 var(--theme-box-shadow-light)","$box-shadow-medium":"0 3.2px 7.2px 0 var(--theme-box-shadow-medium), 0 0.6px 1.8px 0 var(--theme-box-shadow-light)","$box-shadow-heavy":"0 6.4px 14.4px 0 var(--theme-box-shadow-medium), 0 1.2px 3.6px 0 var(--theme-box-shadow-light)","$box-shadow-extra-heavy":"0 25.6px 57.6px 0 var(--theme-box-shadow-extra-heavy), 0 4.8px 14.4px 0 var(--theme-box-shadow-heavy)"}},"spacing":{"name":"spacing","location":"/css/src/tokens/spacing.scss","tokens":{"$layout-0":"0","$layout-1":"0.5rem","$layout-2":"1rem","$layout-3":"1.5rem","$layout-4":"2rem","$layout-5":"3rem","$layout-6":"4rem","$layout-7":"6rem","$layout-8":"8rem","$spacer-0":"0","$spacer-1":"0.125rem","$spacer-2":"0.25rem","$spacer-3":"0.5rem","$spacer-4":"0.75rem","$spacer-5":"1rem","$spacer-6":"1.25rem","$spacer-7":"1.5rem","$spacer-8":"2rem","$spacer-9":"2.5rem","$spacer-10":"3rem"}},"themes":{"name":"themes","location":"/css/src/tokens/themes.scss","tokens":{"$themes":{"light":{"text":"#171717","text-subtle":"#505050","text-invert":"#fff","text-glow-high-contrast":"#171717","box-shadow-light":"rgba0,0,0,0.11)","box-shadow-medium":"rgba(0,0,0,0.13)","box-shadow-heavy":"rgba(0,0,0,0.18)","box-shadow-extra-heavy":"rgba(0,0,0,0.22)","overlay":"rgba(0,0,0,0.7)","overlay-invert":"#fff","body-background":"#fff","body-background-medium":"#f2f2f2","alternate-background":"#171717","alternate-background-medium":"#2f2f2f","border":"#e6e6e6","table-header":"#e6e6e6","table-row-header":"#fafafa","table-border-dark":"#d2d2d2","hover-base":"#2f2f2f","hover-invert":"#fafafa","border-white-high-contrast":"rgba(255,255,255,0)","border-yellow-high-contrast":"rgba(0,0,0,0)","code-header":"#e6e6e6","code-block":"#f2f2f2","inline-code":"#e6e6e6","code-highlight-background":"#fff4ce","visited":"#624991","score-low-off":"rgba(168,0,0,0.3)","score-low":"#b62626","score-medium-off":"rgba(255,187,0,0.3)","score-medium":"#ffb900","score-high-off":"rgba(72,157,72,0.3)","score-high":"#2a8b2a","hyperlink":"#0065b3","primary-base":"#0078d4","primary-background":"#d7eaf8","primary-background-glow-high-contrast":"#d7eaf8","primary-dark":"#004173","primary-hover":"#0065b3","primary-active":"#00579a","primary-box-shadow":"rgba(0,101,179,0.3)","primary-invert":"#fff","secondary-base":"#a2a2a2","secondary-background":"#e6e6e6","secondary-background-glow-high-contrast":"#e6e6e6","secondary-dark":"#2f2f2f","secondary-hover":"#d2d2d2","secondary-active":"#d2d2d2","secondary-box-shadow":"rgba(0,0,0,0.3)","secondary-invert":"#000","tertiary-base":"#243a5e","tertiary-background":"#061329","tertiary-background-glow-high-contrast":"#061329","tertiary-dark":"#a4b2c9","tertiary-hover":"#14294c","tertiary-active":"#70819f","tertiary-box-shadow":"rgba(38,23,63,0.3)","tertiary-invert":"#fff","success-base":"#107c10","success-background":"#dff6dd","success-background-glow-high-contrast":"#dff6dd","success-dark":"#054b16","success-hover":"#0b6413","success-active":"#054b16","success-box-shadow":"rgba(72,157,72,0.3)","success-invert":"#fff","info-base":"#8661c5","info-background":"#efd9fd","info-background-glow-high-contrast":"#efd9fd","info-dark":"#3b2e58","info-hover":"#8661c5","info-active":"#624991","info-box-shadow":"rgba(32,24,67,0.3)","info-invert":"#fff","warning-base":"#ffb900","warning-background":"#fff4ce","warning-background-glow-high-contrast":"#fff4ce","warning-dark":"#6a4b16","warning-hover":"#d19501","warning-active":"#966802","warning-box-shadow":"rgba(255,187,0,0.3)","warning-invert":"#000","danger-base":"#a80000","danger-background":"#fde7e9","danger-background-glow-high-contrast":"#fde7e9","danger-dark":"#470001","danger-hover":"#870000","danger-active":"#630001","danger-box-shadow":"rgba(168,0,0,0.3)","danger-invert":"#fff","facepile-red":"#a80000","facepile-teal":"#328e9f","facepile-blue":"#0078d4"},"dark":{"text":"#e6e6e6","text-subtle":"#d2d2d2","text-invert":"#2f2f2f","text-glow-high-contrast":"#e6e6e6","box-shadow-light":"rgba0,0,0,0.11)","box-shadow-medium":"rgba(0,0,0,0.13)","box-shadow-heavy":"rgba(0,0,0,0.18)","box-shadow-extra-heavy":"rgba(0,0,0,0.22)","overlay":"rgba(0,0,0,0.7)","overlay-invert":"#fff","body-background":"#171717","body-background-medium":"#2f2f2f","alternate-background":"#f2f2f2","alternate-background-medium":"#fafafa","border":"#404040","table-header":"#404040","table-row-header":"#2f2f2f","table-border-dark":"#505050","hover-base":"#d2d2d2","hover-invert":"#2f2f2f","border-white-high-contrast":"rgba(255,255,255,0)","border-yellow-high-contrast":"rgba(0,0,0,0)","code-header":"#404040","code-block":"#2f2f2f","inline-code":"#404040","code-highlight-background":"#0b6413","visited":"#ac7ee1","score-low-off":"rgba(168,0,0,0.7)","score-low":"#b62626","score-medium-off":"rgba(255,187,0,0.3)","score-medium":"#ffcb3f","score-high-off":"rgba(72,157,72,0.7)","score-high":"#489d48","hyperlink":"#75b6e7","primary-base":"#75b6e7","primary-background":"#004173","primary-background-glow-high-contrast":"#004173","primary-dark":"#9ccbee","primary-hover":"#278cda","primary-active":"#0078d4","primary-box-shadow":"rgba(0,101,179,0.3)","primary-invert":"#000","secondary-base":"#757575","secondary-background":"#404040","secondary-background-glow-high-contrast":"#404040","secondary-dark":"#e6e6e6","secondary-hover":"#8e8e8e","secondary-active":"#a2a2a2","secondary-box-shadow":"rgba(0,0,0,0.7)","secondary-invert":"#fff","tertiary-base":"#404040","tertiary-background":"#171717","tertiary-background-glow-high-contrast":"#171717","tertiary-dark":"#e6e6e6","tertiary-hover":"#505050","tertiary-active":"#757575","tertiary-box-shadow":"rgba(0,101,179,0.3)","tertiary-invert":"#fff","success-base":"#7cbb7b","success-background":"#054b16","success-background-glow-high-contrast":"#054b16","success-dark":"#dff6dd","success-hover":"#489d48","success-active":"#7cbb7b","success-box-shadow":"rgba(72,157,72,0.7)","success-invert":"#000","info-base":"#9970d3","info-background":"#3b2e58","info-background-glow-high-contrast":"#3b2e58","info-dark":"#efd9fd","info-hover":"#ac7ee1","info-active":"#d59dff","info-box-shadow":"rgba(32,24,67,0.7)","info-invert":"#000","warning-base":"#ffb900","warning-background":"#6a4b16","warning-background-glow-high-contrast":"#6a4b16","warning-dark":"#fff4ce","warning-hover":"#ffcb3f","warning-active":"#ffdf84","warning-box-shadow":"rgba(255,187,0,0.7)","warning-invert":"#000","danger-base":"#d4797a","danger-background":"#630001","danger-background-glow-high-contrast":"#630001","danger-dark":"#fde7e9","danger-hover":"#c54f4f","danger-active":"#d4797a","danger-box-shadow":"rgba(168,0,0,0.7)","danger-invert":"#000","facepile-red":"#c54f4f","facepile-teal":"#50e6ff","facepile-blue":"#278cda"},"high-contrast":{"text":"#fff","text-subtle":"#fff","text-invert":"#000","text-glow-high-contrast":"#ff0","box-shadow-light":"rgba0,0,0,0.11)","box-shadow-medium":"rgba(0,0,0,0.13)","box-shadow-heavy":"rgba(0,0,0,0.18)","box-shadow-extra-heavy":"rgba(0,0,0,0.22)","overlay":"#404040","overlay-invert":"#fff","body-background":"#000","body-background-medium":"#000","alternate-background":"#fff","alternate-background-medium":"#fff","border":"#fff","table-header":"#505050","table-row-header":"#171717","table-border-dark":"#fff","hover-base":"#ff0","hover-invert":"#000","border-white-high-contrast":"#fff","border-yellow-high-contrast":"#ff0","code-header":"#000","code-block":"#000","inline-code":"#2f2f2f","code-highlight-background":"#0b6413","visited":"#3cff00","score-low-off":"#a80000","score-low":"#fde7e9","score-medium-off":"rgba(255,187,0,0.7)","score-medium":"#ffe79f","score-high-off":"#107c10","score-high":"#dff6dd","hyperlink":"#ff0","primary-base":"#ff0","primary-background":"#000","primary-background-glow-high-contrast":"#ff0","primary-dark":"#ff0","primary-hover":"#ff3","primary-active":"#ff3","primary-box-shadow":"#fff","primary-invert":"#000","secondary-base":"#e6e6e6","secondary-background":"#000","secondary-background-glow-high-contrast":"#505050","secondary-dark":"#e6e6e6","secondary-hover":"#d2d2d2","secondary-active":"#d2d2d2","secondary-box-shadow":"#e6e6e6","secondary-invert":"#000","tertiary-base":"#fff","tertiary-background":"#000","tertiary-background-glow-high-contrast":"#fff","tertiary-dark":"#fff","tertiary-hover":"#e6e6e6","tertiary-active":"#e6e6e6","tertiary-box-shadow":"#fff","tertiary-invert":"#000","success-base":"#acd7aa","success-background":"#000","success-background-glow-high-contrast":"#acd7aa","success-dark":"#dff6dd","success-hover":"#dff6dd","success-active":"#dff6dd","success-box-shadow":"#fff","success-invert":"#000","info-base":"#e0b7fe","info-background":"#000","info-background-glow-high-contrast":"#e0b7fe","info-dark":"#efd9fd","info-hover":"#efd9fd","info-active":"#efd9fd","info-box-shadow":"#fff","info-invert":"#000","warning-base":"#ffe79f","warning-background":"#000","warning-background-glow-high-contrast":"#ffe79f","warning-dark":"#fff4ce","warning-hover":"#fff4ce","warning-active":"#fff4ce","warning-box-shadow":"#fff","warning-invert":"#000","danger-base":"#e5a7a8","danger-background":"#000","danger-background-glow-high-contrast":"#e5a7a8","danger-dark":"#fde7e9","danger-hover":"#fde7e9","danger-active":"#fde7e9","danger-box-shadow":"#fff","danger-invert":"#000","facepile-red":"#d4797a","facepile-teal":"#7becff","facepile-blue":"#75b6e7"}}}},"typography":{"name":"typography","location":"/css/src/tokens/typography.scss","tokens":{"$document-font-size":"16px","$font-size-9":"0.75rem","$font-size-8":"0.875rem","$font-size-7":"1rem","$font-size-6":"1.125rem","$font-size-5":"1.25rem","$font-size-4":"1.5rem","$font-size-3":"1.75rem","$font-size-2":"2.125rem","$font-size-1":"2.5rem","$font-size-0":"3.375rem","$weight-light":"100","$weight-semilight":"200","$weight-normal":"400","$weight-semibold":"600","$weight-bold":"700","$letter-spacing-medium":"0.125rem","$letter-spacing-wide":"0.225rem"}},"z-index":{"name":"z-index","location":"/css/src/tokens/z-index.scss","tokens":{"$zindex-active":"1","$zindex-hover":"2","$zindex-focus":"3","$zindex-multi":"4","$zindex-dropdown":"1000","$zindex-sticky":"1020","$zindex-fixed":"1030","$zindex-modal-backdrop":"1040","$zindex-modal":"1050","$zindex-popover":"1060","$zindex-tooltip":"1070","$zindex-stretched-link":"1"}}}
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "2.0.0",
3
+ "version": "3.2.0",
4
4
  "description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
7
- "lint": "stylelint ./src/**/*.scss",
8
- "lint-fix": "stylelint ./src/**/*.scss --fix",
7
+ "lint": "stylelint \"./src/**/*.scss\"",
8
+ "lint-fix": "stylelint \"./src/**/*.scss\" --fix",
9
9
  "start": "parcel watch src/index.scss --no-autoinstall",
10
10
  "build": "npm run build:css && npm run tokens",
11
11
  "build:css": "parcel build src/index.scss --no-cache --no-autoinstall",
package/src/atomics/README.md CHANGED
@@ -7,9 +7,9 @@ Welcome to Atomics ⚛! These are small, single purpose, CSS classes that can be
7
7
  Most of our classes fall into one of several categories. Those that affect ...
8
8
 
9
9
  - display (ex. `.display-inline-flex`)
10
- - spacing (ex. `.margin-inline-l`);
10
+ - spacing (ex. `.margin-inline-lg`);
11
11
  - color (ex. `.color-primary`)
12
- - typography (ex. `.font-size-m`);
12
+ - typography (ex. `.font-size-md`);
13
13
  - flex properties (ex. `.justify-content-center`)
14
14
  - and more ...
15
15
 
@@ -29,14 +29,14 @@ The first part of nearly every Atomic class represent the css property that it w
29
29
 
30
30
  ## Values
31
31
 
32
- While CSS property values are straightfoward (they just match the CSS property), the value property is not always as easy to guess. We have a few rules that help us figure out how to write values in class names.
32
+ While CSS properties are straightfoward (they just match the CSS), the value property is not always as easy to guess. We have a few rules that help us figure out how to write values in class names.
33
33
 
34
34
  1. When the CSS value is a string (such as `flex-end` in `justify-content: flex-end`, or `grid` in `display: grid;`) then we just use that string directly (meaning these classes become `.justify-content-flex-end` and `.display-grid`).
35
35
  2. In some cases, such as themed colors values, values are associated concepts.
36
36
  - Such as `primary` in the class `.color-primary`. (The `primary` is blue on light theme and yellow on high contrast theme.)
37
37
  - Such as `semibold` in the class `font-weight-semibold`.
38
38
  3. When a number value with a particular unit is involved, that value is typically represented as an at-least-two-letter-t-shirt size.
39
- - Spacing and non-heading typography values follow this convention, as in `xs, sm, md, lg, xl, xxl` in `margin-top-xl`, and `font-size-m`.
39
+ - Spacing and non-heading typography values follow this convention, as in `xs, sm, md, lg, xl, xxl` in `margin-top-xl`, and `font-size-md`.
40
40
  - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
41
41
  4. Within a series of values that are all unitless numbers, those numbers are used directly, as in `flex-grow: 1;` being represented by `flex-grow-1`.
42
42
  5. When a shorthand property's value is multi-part, we choose a reasonable default and omit the value completely.
@@ -49,6 +49,6 @@ Screen sizes are represented by one of the following strings:
49
49
 
50
50
  - `tablet`, representing screens tablet and larger.
51
51
  - `desktop`, representing screen desktop width and larger.
52
- - `widescreen`, representing very wide screens to inifinity.
52
+ - `widescreen`, representing very wide screens to infinity.
53
53
 
54
54
  Use a mobile first approach when using Atomics, including the universally applicable class (i.e. the one that does not have a screensize at the end), and when necessary overwrite its values on larger screens.
package/src/atomics/border.scss CHANGED
@@ -2,16 +2,25 @@
2
2
  border: $border-width solid $border !important;
3
3
  }
4
4
 
5
+ .border-lg {
6
+ border: $border-width-lg solid $border !important;
7
+ }
8
+
5
9
  .border-none {
6
10
  border: none !important;
7
11
  }
8
12
 
9
13
  // Rules for each side
14
+
10
15
  @each $border-key, $direction in $directions {
11
16
  .border-#{$border-key} {
12
17
  border-#{$direction}: $border-width solid $border !important;
13
18
  }
14
19
 
20
+ .border-#{$border-key}-lg {
21
+ border-#{$direction}: $border-width-lg solid $border !important;
22
+ }
23
+
15
24
  .border-#{$border-key}-none {
16
25
  border-#{$direction}: 0 !important;
17
26
  }
@@ -22,30 +31,32 @@
22
31
  border: $border-width solid $border !important;
23
32
  }
24
33
 
34
+ .border-lg-tablet {
35
+ border: $border-width-lg solid $border !important;
36
+ }
37
+
25
38
  .border-none-tablet {
26
39
  border: none !important;
27
40
  }
28
41
 
29
42
  // Rules for each side
43
+
30
44
  @each $border-key, $direction in $directions {
31
45
  .border-#{$border-key}-tablet {
32
46
  border-#{$direction}: $border-width solid $border !important;
33
47
  }
34
48
 
49
+ .border-#{$border-key}-lg-tablet {
50
+ border-#{$direction}: $border-width-lg solid $border !important;
51
+ }
52
+
35
53
  .border-#{$border-key}-none-tablet {
36
54
  border-#{$direction}: 0 !important;
37
55
  }
38
56
  }
39
57
  }
40
58
 
41
- // Modifiers
42
- .border-high-contrast {
43
- border: $border-width solid $border-white-high-contrast !important;
44
-
45
- &-hover:hover {
46
- border: $border-width solid $border-yellow-high-contrast !important;
47
- }
48
- }
59
+ // Radius
49
60
 
50
61
  .border-radius {
51
62
  border-radius: $border-radius !important;
@@ -54,3 +65,21 @@
54
65
  .border-radius-lg {
55
66
  border-radius: $border-radius-lg !important;
56
67
  }
68
+
69
+ // Colors
70
+
71
+ @each $name, $color-set in $colors {
72
+ $base: nth($color-set, $color-index-base);
73
+
74
+ .border-color-#{$name} {
75
+ border-color: $base !important;
76
+ }
77
+ }
78
+
79
+ .border-high-contrast {
80
+ border: $border-width solid $border-white-high-contrast !important;
81
+
82
+ &-hover:hover {
83
+ border: $border-width solid $border-yellow-high-contrast !important;
84
+ }
85
+ }
package/src/atomics/index.scss CHANGED
@@ -6,3 +6,4 @@
6
6
  @import './spacing.scss';
7
7
  @import './flex.scss';
8
8
  @import './position.scss';
9
+ @import './line-clamp.scss';
package/src/atomics/line-clamp.scss ADDED
@@ -0,0 +1,27 @@
1
+ %line-clamp {
2
+ /*stylelint-disable*/
3
+ display: -webkit-box;
4
+ -webkit-box-orient: vertical;
5
+ overflow: hidden;
6
+ }
7
+
8
+ @mixin line-clamp($lines: 1) {
9
+ @extend %line-clamp;
10
+ -webkit-line-clamp: $lines !important;
11
+ }
12
+
13
+ .line-clamp-1 {
14
+ @include line-clamp(1);
15
+ }
16
+
17
+ .line-clamp-2 {
18
+ @include line-clamp(2);
19
+ }
20
+
21
+ .line-clamp-3 {
22
+ @include line-clamp(3);
23
+ }
24
+
25
+ .line-clamp-4 {
26
+ @include line-clamp(4);
27
+ }
package/src/atomics/typography.scss CHANGED
@@ -46,15 +46,15 @@
46
46
  font-size: $font-size-5 !important;
47
47
  }
48
48
 
49
- .font-size-l {
49
+ .font-size-lg {
50
50
  font-size: $font-size-6 !important;
51
51
  }
52
52
 
53
- .font-size-m {
53
+ .font-size-md {
54
54
  font-size: $font-size-7 !important;
55
55
  }
56
56
 
57
- .font-size-s {
57
+ .font-size-sm {
58
58
  font-size: $font-size-8 !important;
59
59
  }
60
60
 
package/src/components/button.scss CHANGED
@@ -30,8 +30,6 @@ $button-font-weight: $weight-semibold !default;
30
30
 
31
31
  justify-content: center;
32
32
  padding-top: $button-padding-vertical;
33
- padding-#{$user-left}: $button-padding-horizontal;
34
- padding-#{$user-right}: $button-padding-horizontal;
35
33
  padding-bottom: $button-padding-vertical;
36
34
  border-width: $button-border-width;
37
35
  border-radius: $button-border-radius;
@@ -40,8 +38,10 @@ $button-font-weight: $weight-semibold !default;
40
38
  color: $button-color;
41
39
  font-weight: $button-font-weight;
42
40
  text-align: center;
43
- white-space: nowrap;
41
+ text-decoration: none;
44
42
  cursor: pointer;
43
+ padding-#{$user-left}: $button-padding-horizontal;
44
+ padding-#{$user-right}: $button-padding-horizontal;
45
45
 
46
46
  strong {
47
47
  color: inherit;
package/src/mixins/control.scss CHANGED
@@ -12,7 +12,7 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
12
12
  position: relative;
13
13
  align-items: center;
14
14
  justify-content: flex-start;
15
- height: 2.25em;
15
+ min-height: 2.25em;
16
16
  padding-top: $control-padding-vertical;
17
17
  padding-right: $control-padding-horizontal;
18
18
  padding-bottom: $control-padding-vertical;
package/src/tokens/breakpoints.scss CHANGED
@@ -7,5 +7,5 @@ $container-gap: 64px !default;
7
7
  // Breakpoints
8
8
  $breakpoint-tablet: 768px !default;
9
9
  $breakpoint-desktop: 1088px !default;
10
- $breakpoint-widescreen: 1472px !default;
10
+ $breakpoint-widescreen: 1800px !default;
11
11
  //@end-sass-export-section
package/src/tokens/themes.scss CHANGED
@@ -102,10 +102,10 @@ $themes: (
102
102
  'text-subtle': $palette-grey-40,
103
103
  'text-invert': $palette-grey-110,
104
104
  'text-glow-high-contrast': $palette-grey-30,
105
- 'box-shadow-light': $palette-white-opacity-108,
106
- 'box-shadow-medium': $palette-white-opacity-132,
107
- 'box-shadow-heavy': $palette-white-opacity-18,
108
- 'box-shadow-extra-heavy': $palette-white-opacity-22,
105
+ 'box-shadow-light': $palette-black-opacity-108,
106
+ 'box-shadow-medium': $palette-black-opacity-132,
107
+ 'box-shadow-heavy': $palette-black-opacity-18,
108
+ 'box-shadow-extra-heavy': $palette-black-opacity-22,
109
109
  'overlay': $palette-black-opacity-70,
110
110
  'overlay-invert': $palette-white,
111
111
  'body-background': $palette-grey-120,
@@ -197,10 +197,10 @@ $themes: (
197
197
  'text-subtle': $palette-white,
198
198
  'text-invert': $palette-black,
199
199
  'text-glow-high-contrast': $palette-yellow-high-contrast,
200
- 'box-shadow-light': $palette-white-opacity-0,
201
- 'box-shadow-medium': $palette-white-opacity-0,
202
- 'box-shadow-heavy': $palette-white-opacity-0,
203
- 'box-shadow-extra-heavy': $palette-white-opacity-0,
200
+ 'box-shadow-light': $palette-black-opacity-108,
201
+ 'box-shadow-medium': $palette-black-opacity-132,
202
+ 'box-shadow-heavy': $palette-black-opacity-18,
203
+ 'box-shadow-extra-heavy': $palette-black-opacity-22,
204
204
  'overlay': $palette-grey-100,
205
205
  'overlay-invert': $palette-white,
206
206
  'body-background': $palette-black,
package/tokens/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Atlas CSS Tokens
2
2
 
3
- A design tokens is a definition of a design-related variable, such as one that affects color, typography, or spacing. Design tokens must be shareable and fairly platform agnostic. Atlas's design tokens are written in Scss (buzzword: source of truth!), and though a [build process](../tokens/index.js), translated and published into JSON so they can be more easily shared by solutions that do not use Scss.
3
+ A design tokens is a definition of a design-related variable, such as one that affects color, typography, or spacing. Design tokens must be shareable and fairly platform agnostic. Atlas's design tokens are written in Scss (buzzword: source of truth!), and though a [build process](https://github.com/microsoft/atlas-design/blob/main/css/tokens/index.js), translated and published into JSON so they can be more easily shared by solutions that do not use Scss.
4
4
 
5
5
  ## Access our design tokens
6
6
 
7
- Firstly, in order to access these tokens, you must have installed atlas-css in your project. [See installation steps]('../../../README.md). Once this is complete, you'll need to decide whether you want to reference them in Scss or JSON.
7
+ Firstly, in order to access these tokens, you must have installed atlas-css in your project. [See installation steps]('https://github.com/microsoft/atlas-design'). Once this is complete, you'll need to decide whether you want to reference them in Scss or JSON.
8
8
 
9
9
  ### Get Scss from NPM
10
10