diff --git a/package.json b/package.json index 06ccede..a6c3323 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "oui-kit", "type": "module", - "version": "0.23.13", + "version": "0.23.14", "author": { "email": "dirk.holtwick@gmail.com", "name": "Dirk Holtwick", diff --git a/stylus/mixins/index.styl b/stylus/mixins/index.styl index 4f30f06..eb58193 100644 --- a/stylus/mixins/index.styl +++ b/stylus/mixins/index.styl @@ -8,3 +8,4 @@ @require "./text.styl"; @require "./positions.styl"; @require "./animation.styl"; +@require "./utopia.styl"; diff --git a/stylus/mixins/utopia.styl b/stylus/mixins/utopia.styl new file mode 100644 index 0000000..7d2ca40 --- /dev/null +++ b/stylus/mixins/utopia.styl @@ -0,0 +1,51 @@ + +--step--2 = 0.6944rem; +--step--1 = 0.8333rem; +--step-0 = 1rem; +--step-1 = 1.2rem; +--step-2 = 1.44rem; +--step-3 = 1.728rem; +--step-4 = 2.0736rem; +--step-5 = 2.4883rem; + +font-size-step(value = 0) { + font-size: lookup("--step-" + value); + font-size: unquote("var(--step-" + value + ")"); +} + +--space-3xs = 0.25rem; +--space-2xs = 0.5rem; +--space-xs = 0.75rem; +--space-s = 1rem; +--space-m = 1.5rem; +--space-l = 2rem; +--space-xl = 3rem; +--space-2xl = 4rem; +--space-3xl = 6rem; +--space-3xs-2xs = 0.25rem; +--space-2xs-xs = 0.5rem; +--space-xs-s = 0.75rem; +--space-s-m = 1rem; +--space-m-l = 1.5rem; +--space-l-xl = 2rem; +--space-xl-2xl = 3rem; +--space-2xl-3xl = 4rem; +--space-s-l = 1rem; + +gap-space(value) { + if lookup("--space-" + value) { + & > * { + margin-right: lookup("--space-" + value); + margin-right: unquote("var(--space-" + value + ")"); + } + } else { + & > * { + margin-right: lookup("--space-s"); + margin-right: unquote("var(--space-s)"); + } + } + + & > *:last-child { + margin-right: 0; + } +} diff --git a/stylus/preset/utopia.styl b/stylus/preset/utopia.styl index d7f8f87..e485951 100644 --- a/stylus/preset/utopia.styl +++ b/stylus/preset/utopia.styl @@ -35,57 +35,6 @@ utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.333,5,2,&s=0.75|0.5|0.25,1.5| --space-s-l: unquote("clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem)"); } ---step--2 = 0.6944rem; ---step--1 = 0.8333rem; ---step-0 = 1rem; ---step-1 = 1.2rem; ---step-2 = 1.44rem; ---step-3 = 1.728rem; ---step-4 = 2.0736rem; ---step-5 = 2.4883rem; - -font-size-step(value = 0) { - font-size: lookup("--step-" + value); - font-size: unquote("var(--step-" + value + ")"); -} - ---space-3xs = 0.25rem; ---space-2xs = 0.5rem; ---space-xs = 0.75rem; ---space-s = 1rem; ---space-m = 1.5rem; ---space-l = 2rem; ---space-xl = 3rem; ---space-2xl = 4rem; ---space-3xl = 6rem; ---space-3xs-2xs = 0.25rem; ---space-2xs-xs = 0.5rem; ---space-xs-s = 0.75rem; ---space-s-m = 1rem; ---space-m-l = 1.5rem; ---space-l-xl = 2rem; ---space-xl-2xl = 3rem; ---space-2xl-3xl = 4rem; ---space-s-l = 1rem; - -gap-space(value) { - if lookup("--space-" + value) { - & > * { - margin-right: lookup("--space-" + value); - margin-right: unquote("var(--space-" + value + ")"); - } - } else { - & > * { - margin-right: lookup("--space-s"); - margin-right: unquote("var(--space-s)"); - } - } - - & > *:last-child { - margin-right: 0; - } -} - oui-utopia() { --text-font-weight-bold: 600; --text-list-indent: px(32);