<commit_before>// @flow
// JavaScript Style Objects (jso)
import { css, media } from './jss'

// TODO: Note web vs native properties
// TODO: Should web only props live in cso?

// -------------------------------------
// Configuration
export const sansRegularFontStack = '"AtlasGroteskRegular", "AtlasGrotesk-Regular", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansBoldFontStack = '"AtlasGroteskBold", "AtlasGrotesk-Bold", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansBlackFontStack = '"AtlasGroteskBlack", "AtlasGrotesk-Black", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansLightFontStack = '"AtlasGroteskLight", "AtlasGrotesk-Light", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const monoRegularFontStack = '"AtlasTypewriterRegular", "AtlasTypewriter-Regular", "Andale Mono", "Consolas", "Lucida Console", "Menlo", "Luxi Mono", monospace'

// Web specific
export const minBreak2 = '(min-width: 40em)'      // 2: 640  / 16 = 40em
export const minBreak3 = '(min-width: 60em)'      // 3: 960  / 16 = 60em
export const minBreak4 = '(min-width: 85em)'      // 4: 1360 / 16 = 85em
export const minBreak5 = '(min-width: 107.5em)'   // 5: 1720 / 16 = 107.5em
export const minBreak6 = '(min-width: 130em)'     // 6: 2080 / 16 = 130em
export const minBreak7 = '(min-width: 152.5em)'   // 7: 2440 / 16 = 152.5em

export const maxBreak2 = '(max-width: 39.9375em)' // 2: 639  / 16 = 39.9375em

export const ease = 'cubic-bezier(0.23, 1, 0.32, 1)'
export const easeInOutQuart = 'cubic-bezier(0.77, 0, 0.175, 1)'
export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)'

// -------------------------------------
// Flex
// - [css-tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
// - [react-native flex implementation](https://facebook.github.io/yoga/)

export const flex = { display: 'flex' }
export const flex1 = { ...flex, flex: 1 }
export const flex2 = { ...flex, flex: 2 }
export const flex3 = { ...flex, flex: 3 }
export const inlineFlex = { display: 'inline-flex' }
export const flexColumn = { flexDirection: 'column' }
export const flexRow = { flexDirection: 'row' }
export const flexWrap = { flexWrap: 'wrap' }
export const flexNoWrap = { flexWrap: 'nowrap' }<commit_msg>styles - add some more max breakpoints<commit_after>// @flow
// JavaScript Style Objects (jso)
import { css, media } from './jss'

// TODO: Note web vs native properties
// TODO: Should web only props live in cso?

// -------------------------------------
// Configuration
export const sansRegularFontStack = '"AtlasGroteskRegular", "AtlasGrotesk-Regular", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansBoldFontStack = '"AtlasGroteskBold", "AtlasGrotesk-Bold", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansBlackFontStack = '"AtlasGroteskBlack", "AtlasGrotesk-Black", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const sansLightFontStack = '"AtlasGroteskLight", "AtlasGrotesk-Light", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif'
export const monoRegularFontStack = '"AtlasTypewriterRegular", "AtlasTypewriter-Regular", "Andale Mono", "Consolas", "Lucida Console", "Menlo", "Luxi Mono", monospace'

// Web specific
export const minBreak2 = '(min-width: 40em)'      // 2: 640  / 16 = 40em
export const minBreak3 = '(min-width: 60em)'      // 3: 960  / 16 = 60em
export const minBreak4 = '(min-width: 85em)'      // 4: 1360 / 16 = 85em
export const minBreak5 = '(min-width: 107.5em)'   // 5: 1720 / 16 = 107.5em
export const minBreak6 = '(min-width: 130em)'     // 6: 2080 / 16 = 130em
export const minBreak7 = '(min-width: 152.5em)'   // 7: 2440 / 16 = 152.5em

export const maxBreak2 = '(max-width: 39.9375em)' // 2: 639  / 16 = 39.9375em
export const maxBreak3 = '(max-width: 59.9375em)' // 3: 959  / 16 = 59.9375em
export const maxBreak4 = '(max-width: 84.9375em)' // 4: 1359 / 16 = 84.9375em

export const ease = 'cubic-bezier(0.23, 1, 0.32, 1)'
export const easeInOutQuart = 'cubic-bezier(0.77, 0, 0.175, 1)'
export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)'

// -------------------------------------
// Flex
// - [css-tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
// - [react-native flex implementation](https://facebook.github.io/yoga/)

export const flex = { display: 'flex' }
export const flex1 = { ...flex, flex: 1 }
export const flex2 = { ...flex, flex: 2 }
export const flex3 = { ...flex, flex: 3 }
export const inlineFlex = { display: 'inline-flex' }
export const flexColumn = { flexDirection: 'column' }
export const flexRow = { flexDirection: 'row' }
export const flexWrap = { flexWrap: 'wrap' }
export const flexNoWrap = { flexWrap: 'nowrap' }
{'fraction_non_alphanumeric': 0.18510858324715615, 'fraction_numerical': 0.06390899689762151, 'mean_word_length': 3.4986046511627906, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4847532', 'n_tokens_mistral': 1942, 'n_tokens_neox': 1660, 'n_words': 465}