@use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; @use '@oddbird/blend'; @use 'functions' as fn; @include iro.props-store(( --dims: ( --size: ( --0: 0, --10: iro.fn-px-to-rem(1px), --25: iro.fn-px-to-rem(2px), --40: iro.fn-px-to-rem(3px), --50: iro.fn-px-to-rem(4px), --65: iro.fn-px-to-rem(5px), --75: iro.fn-px-to-rem(6px), --85: iro.fn-px-to-rem(7px), --100: iro.fn-px-to-rem(8px), --115: iro.fn-px-to-rem(9px), --125: iro.fn-px-to-rem(10px), --130: iro.fn-px-to-rem(11px), --150: iro.fn-px-to-rem(12px), --160: iro.fn-px-to-rem(13px), --175: iro.fn-px-to-rem(14px), --200: iro.fn-px-to-rem(16px), --225: iro.fn-px-to-rem(18px), --250: iro.fn-px-to-rem(20px), --275: iro.fn-px-to-rem(22px), --300: iro.fn-px-to-rem(24px), --325: iro.fn-px-to-rem(26px), --400: iro.fn-px-to-rem(32px), --450: iro.fn-px-to-rem(36px), --500: iro.fn-px-to-rem(40px), --550: iro.fn-px-to-rem(44px), --600: iro.fn-px-to-rem(48px), --700: iro.fn-px-to-rem(56px), --800: iro.fn-px-to-rem(64px), --900: iro.fn-px-to-rem(72px), --1000: iro.fn-px-to-rem(80px), --1200: iro.fn-px-to-rem(96px), --1700: iro.fn-px-to-rem(136px), --2300: iro.fn-px-to-rem(184px), --2400: iro.fn-px-to-rem(192px), --2500: iro.fn-px-to-rem(200px), --2600: iro.fn-px-to-rem(208px), --2800: iro.fn-px-to-rem(224px), --3200: iro.fn-px-to-rem(256px), --3400: iro.fn-px-to-rem(272px), --3500: iro.fn-px-to-rem(280px), --3600: iro.fn-px-to-rem(288px), --3800: iro.fn-px-to-rem(304px), --4600: iro.fn-px-to-rem(368px), --5000: iro.fn-px-to-rem(400px), --6000: iro.fn-px-to-rem(480px), ), --font: ( --standard: ( --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), --line-height: 1.5, ), --headline: ( --family: ('Garet', fn.dim(--font --standard --family, null)), --line-height: 1.3, --weight: 700, --feature-settings: '\'ss02\'' 1, ), --mono: ( --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace), --line-height: 1.4, ) ), --font-size: ( --50: iro.fn-px-to-rem(11px), --75: iro.fn-px-to-rem(13px), --100: iro.fn-px-to-rem(14px), --150: iro.fn-px-to-rem(16px), --200: iro.fn-px-to-rem(18px), --300: iro.fn-px-to-rem(20px), --400: iro.fn-px-to-rem(24px), --500: iro.fn-px-to-rem(28px), --600: iro.fn-px-to-rem(32px), --700: iro.fn-px-to-rem(36px), --800: iro.fn-px-to-rem(40px), --900: iro.fn-px-to-rem(45px), --1000: iro.fn-px-to-rem(50px), --1100: iro.fn-px-to-rem(60px), ), --border: ( --thick: 4px, --medium: 2px, --thin: 1px, ), --focus: ( --outline-width: 3px, ), --paragraph: ( --margin-top: fn.dim(--size --300, null), ), --heading: ( --margin-top: fn.dim(--size --700, null), --margin-top-sibling: fn.dim(--size --325, null), --lg: fn.dim(--font-size --400, null), --md: fn.dim(--font-size --75, null), --sm: fn.dim(--font-size --50, null), --display: ( --xxl: fn.dim(--font-size --900, null), --xl: fn.dim(--font-size --600, null), --lg: fn.dim(--font-size --300, null), --md: fn.dim(--font-size --150, null), --sm: fn.dim(--font-size --75, null), --xs: fn.dim(--font-size --50, null), ) ), --list: ( --indent: fn.dim(--size --400, null), --compact-indent: fn.dim(--size --250, null), ), ), ), 'dims'); @include iro.props-store(( --dims: ( --heading: ( --margin-top: fn.dim(--size --600, null), ), --list: ( --indent: fn.dim(--size --300), ), ) ), 'sm'); @include iro.props-store(( --dims: ( --heading: ( --margin-top: fn.dim(--size --500, null), ), --list: ( --indent: fn.dim(--size --250), ), ) ), 'xs'); // @include iro.props-store(( --colors: ( --gray: fn.gray-palette(100%), ), ), 'palette-light-hi'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(96%), ), ), 'palette-light'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(92%), ), ), 'palette-light-lo'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(88%), ), ), 'palette-light-lo2'); @include iro.props-store(( --colors: ( --bg-hi2: fn.color(--gray --1, null), // Lightest background --bg-hi: fn.color(--gray --2, null), // Lighter background --bg: fn.color(--gray --3, null), // Background --obj-hi: fn.color(--gray --4, null), --obj: fn.color(--gray --5, null), --obj-lo: fn.color(--gray --6, null), --fg-hi3: fn.color(--gray --7, null), // Disabled text --fg-hi2: fn.color(--gray --8, null), // Placeholder text --fg-hi: fn.color(--gray --9, null), // Faint text --fg: fn.color(--gray --10, null), // Text --fg-lo: fn.color(--gray --11, null), // Strong text --border: ( --regular: fn.color(--obj, null), --stable: iro.props-get-static(--colors --gray --5, 'palette-light'), ), --blue: fn.color-palette(blend.lch(48% 50 279)), --purple: fn.color-palette(blend.lch(48% 50 308)), --red: fn.color-palette(blend.lch(48% 50 23)), --green: fn.color-palette(blend.lch(63% 50 147)), --yellow: fn.color-palette(blend.lch(68% 50 70)), --accent: ( --primary: iro.props-ref('colors', --colors --blue), --error: iro.props-ref('colors', --colors --red), --success: iro.props-ref('colors', --colors --green), --warning: iro.props-ref('colors', --colors --yellow), --link-idle: iro.props-ref('colors', --colors --blue), --link-visited: iro.props-ref('colors', --colors --purple), ), --selection: ( --bg: fn.color(--accent --primary --selection, null), --bg-img: fn.color(--accent --primary --semi, null), --fg: fn.color(--accent --primary --fg, null), ), --focus: ( --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --semi, null), --fill: fn.color(--accent --primary --bg, null), --text: fn.color(--accent --primary --obj, null), --fill-text: fn.color(--accent --primary --fg, null), ), ), ), 'colors'); // @include iro.props-store(( --colors: ( --gray: fn.gray-palette(1%), ), ), 'palette-dark-hi2'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(5%), ), ), 'palette-dark-hi'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(9%), ), ), 'palette-dark'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(13%), ), ), 'palette-dark-lo'); @include iro.props-store(( --colors: ( --border: ( --stable: iro.props-get-static(--colors --gray --5, 'palette-dark-lo'), ), --blue: fn.color-palette(blend.lch(63% 50 279), -1), --purple: fn.color-palette(blend.lch(63% 50 308), -1), --red: fn.color-palette(blend.lch(63% 50 23), -1), --green: fn.color-palette(blend.lch(78% 50 147), -1), --yellow: fn.color-palette(blend.lch(88% 50 70), -1), --accent: ( --primary: iro.props-ref('colors-dark', --colors --blue), --error: iro.props-ref('colors-dark', --colors --red), --success: iro.props-ref('colors-dark', --colors --green), --warning: iro.props-ref('colors-dark', --colors --yellow), --link-idle: iro.props-ref('colors-dark', --colors --blue), --link-visited: iro.props-ref('colors-dark', --colors --purple), ), ) ), 'colors-dark'); // @each $breakpoint in map-keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @include iro.props-store(( --colors: () ), $breakpoint); } }