@inc2734/unitone-css 0.23.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Takashi Kitajima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+# unitone CSS
+
+unitone CSS is a CSS framework. This framework was inspired by (Every Layout)[https://every-layout.dev/].
+
+## GitHub
+https://github.com/inc2734/unitone-css
+
+## NPM
+https://www.npmjs.com/package/@inc2734/unitone-css
+
+## Storybook
+https://inc2734.github.io/unitone-css
+
+## Browser support
+Modern browser only.
+
+## License
+MIT

package/dist/app.css

@@ -0,0 +1 @@
+:root{--unitone--measure:38rem;--unitone--color-white:#fff;--unitone--color-black:#000;--unitone--color-text:#222;--unitone--font-size:0;--unitone--base-font-size:16;--unitone--harmonic-sequence-base:8;--unitone--min-harmonic-sequence-base:9;--unitone--max-harmonic-sequence-base:var(--unitone--harmonic-sequence-base);--unitone--half-leading:.3;--unitone--line-height-slope:-0.16666;--unitone--font-family:sans-serif;--unitone--_space-reference-value:clamp(1,var(--unitone--line-height-slope) * var(--unitone--fluid-font-size-magnification,calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)))) + 1 + 2 * var(--unitone--half-leading) + -1 * var(--unitone--line-height-slope),2 * var(--unitone--half-leading) + 1) /3;--unitone--ms-2:calc(var(--unitone--_space-reference-value) * 1);--unitone--ms-1:calc(var(--unitone--_space-reference-value) * 2);--unitone--ms0:0;--unitone--ms1:calc(var(--unitone--_space-reference-value) * 3);--unitone--ms2:calc(var(--unitone--_space-reference-value) * 5);--unitone--ms3:calc(var(--unitone--_space-reference-value) * 8);--unitone--ms4:calc(var(--unitone--_space-reference-value) * 13);--unitone--ms5:calc(var(--unitone--_space-reference-value) * 21);--unitone--ms6:calc(var(--unitone--_space-reference-value) * 34);--unitone--ms7:calc(var(--unitone--_space-reference-value) * 55);--unitone--em-2:calc(1em * var(--unitone--ms-2));--unitone--em-1:calc(1em * var(--unitone--ms-1));--unitone--em0:0em;--unitone--em1:calc(1em * var(--unitone--ms1));--unitone--em2:calc(1em * var(--unitone--ms2));--unitone--em3:calc(1em * var(--unitone--ms3));--unitone--em4:calc(1em * var(--unitone--ms4));--unitone--em5:calc(1em * var(--unitone--ms5));--unitone--em6:calc(1em * var(--unitone--ms6));--unitone--em7:calc(1em * var(--unitone--ms7));--unitone--rem-2:calc(1rem * var(--unitone--ms-2));--unitone--rem-1:calc(1rem * var(--unitone--ms-1));--unitone--rem0:0rem;--unitone--rem1:calc(1rem * var(--unitone--ms1));--unitone--rem2:calc(1rem * var(--unitone--ms2));--unitone--rem3:calc(1rem * var(--unitone--ms3));--unitone--rem4:calc(1rem * var(--unitone--ms4));--unitone--rem5:calc(1rem * var(--unitone--ms5));--unitone--rem6:calc(1rem * var(--unitone--ms6));--unitone--rem7:calc(1rem * var(--unitone--ms7));--unitone--s-2:var(--unitone--em-2);--unitone--s-1:var(--unitone--em-1);--unitone--s0:var(--unitone--em0);--unitone--s1:var(--unitone--em1);--unitone--s2:clamp(calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms2) - calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) * 1em + calc((var(--unitone--ms2) - calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms2) * 1em);--unitone--s3:clamp(calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms3) - calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) * 1em + calc((var(--unitone--ms3) - calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms3) * 1em);--unitone--s4:clamp(calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms4) - calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) * 1em + calc((var(--unitone--ms4) - calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms4) * 1em);--unitone--s5:clamp(calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms5) - calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) * 1em + calc((var(--unitone--ms5) - calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms5) * 1em);--unitone--s6:clamp(calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms6) - calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) * 1em + calc((var(--unitone--ms6) - calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms6) * 1em);--unitone--s7:clamp(calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms7) - calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) * 1em + calc((var(--unitone--ms7) - calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms7) * 1em);--unitone--container-max-width:1280px;--unitone--_grid-gutters:calc(11 * var(--unitone--s1));--unitone--pg0:0%;--unitone--pg1:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 1 + var(--unitone--s1) * 0);--unitone--pg2:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 2 + var(--unitone--s1) * 1);--unitone--pg3:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 3 + var(--unitone--s1) * 2);--unitone--pg4:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 4 + var(--unitone--s1) * 3);--unitone--pg5:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 5 + var(--unitone--s1) * 4);--unitone--pg6:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 6 + var(--unitone--s1) * 5);--unitone--pg7:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 7 + var(--unitone--s1) * 6);--unitone--pg8:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 8 + var(--unitone--s1) * 7);--unitone--pg9:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 9 + var(--unitone--s1) * 8);--unitone--pg10:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 10 + var(--unitone--s1) * 9);--unitone--pg11:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 11 + var(--unitone--s1) * 10);--unitone--pg12:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 12 + var(--unitone--s1) * 11);--unitone--cg0:0%;--unitone--cg1:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 1 + var(--unitone--s1) * 0);--unitone--cg2:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 2 + var(--unitone--s1) * 1);--unitone--cg3:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 3 + var(--unitone--s1) * 2);--unitone--cg4:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 4 + var(--unitone--s1) * 3);--unitone--cg5:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 5 + var(--unitone--s1) * 4);--unitone--cg6:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 6 + var(--unitone--s1) * 5);--unitone--cg7:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 7 + var(--unitone--s1) * 6);--unitone--cg8:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 8 + var(--unitone--s1) * 7);--unitone--cg9:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 9 + var(--unitone--s1) * 8);--unitone--cg10:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 10 + var(--unitone--s1) * 9);--unitone--cg11:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 11 + var(--unitone--s1) * 10);--unitone--cg12:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 12 + var(--unitone--s1) * 11);--unitone--shadow:0 5px 20px -5px rgba(0,0,0,.2)}html{font-size:calc(var(--unitone--base-font-size) * 1px)}body{-webkit-font-smoothing:antialiased;background-color:var(--unitone--color-white);color:var(--unitone--color-text);font-family:var(--unitone--font-family);overflow-wrap:break-word}*{font-size:calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)) * 1rem);line-height:clamp(1,var(--unitone--line-height-slope) * var(--unitone--fluid-font-size-magnification,calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)))) + 1 + 2 * var(--unitone--half-leading) + -1 * var(--unitone--line-height-slope),2 * var(--unitone--half-leading) + 1)}*,:after,:before{box-sizing:border-box}html{hanging-punctuation:allow-end;line-break:normal}a{text-decoration-thickness:1px;text-underline-offset:.1em}address,article,aside,blockquote,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,li,main,nav,ol,p,pre,section,table,ul{margin:0;padding:0}li{margin-left:1.5em}small,sup{font-size:smaller}@supports (font-variant-position:super){sup{font-size:inherit;font-variant-position:super;vertical-align:baseline}}sub{font-size:smaller}@supports (font-variant-position:sub){sub{font-size:inherit;font-variant-position:sub;vertical-align:baseline}}figure,picture{max-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:where(figure,picture) :where(img,video){display:table;margin-bottom:0;margin-top:0}:where(figure,picture) :where(img:not([width]),video:not([width])){width:100%}img,video{height:auto;max-width:100%}[data-unitone-layout~=both-sides]{--unitone--gap:var(--unitone--s1);--unitone--align-items:flex-start;--unitone--content-width:fit-content;--unitone--content-max-width:var(--unitone--measure);align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap);justify-content:space-between}[data-unitone-layout~=both-sides]>*{flex-basis:var(--unitone--content-width);flex-grow:0;max-width:min(100%,var(--unitone--content-max-width))}[data-unitone-layout~=decorator]{--unitone--background-color:transparent;--unitone--border-color:transparent;--unitone--border-width:0;--unitone--border-radius:0;--unitone--padding:var(--unitone--s0);--unitone--box-shadow:none;--unitone--position:static;--unitone--top:initial;--unitone--right:initial;--unitone--bottom:initial;--unitone--left:initial;--unitone--z-index:initial;background-color:var(--unitone--background-color);border:var(--unitone--border-width) solid var(--unitone--border-color);border-radius:var(--unitone--border-radius);bottom:var(--unitone--bottom);box-shadow:var(--unitone--box-shadow);color:var(--unitone--color);left:var(--unitone--left);padding:calc(var(--unitone--padding) - var(--unitone--half-leading) * 1em) var(--unitone--padding);position:var(--unitone--position);right:var(--unitone--right);top:var(--unitone--top);z-index:var(--unitone--z-index)}[data-unitone-layout~=decorator][data-unitone-layout~=-shadow]{--unitone--box-shadow:var(--unitone--shadow)}[data-unitone-layout~=decorator][data-unitone-layout~="-position:relative"]{--unitone--position:relative!important}[data-unitone-layout~=decorator][data-unitone-layout~="-position:absolute"]{--unitone--position:absolute!important}[data-unitone-layout~=decorator][data-unitone-layout~="-position:sticky"]{--unitone--position:sticky!important}[data-unitone-layout~=decorator][data-unitone-layout~="-position:fixed"]{--unitone--position:fixed!important}[data-unitone-layout~=center]{align-items:center;display:flex;flex-direction:column;margin-left:auto;margin-right:auto}[data-unitone-layout~=center][data-unitone-layout~=-with-text]{text-align:center}[data-unitone-layout~=cluster]{--unitone--align-items:flex-start;--unitone--gap:calc(var(--unitone--s1) / 2) var(--unitone--s1);--unitone--justify-content:flex-start;align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap);justify-content:var(--unitone--justify-content);list-style:none}[data-unitone-layout~=cluster]>*{margin:0}[data-unitone-layout~=container]{--unitone--gutters:var(--unitone--rem1);--unitone--max-width:var(--unitone--container-max-width);box-sizing:content-box;margin-left:auto;margin-right:auto;max-width:100%;padding-left:var(--unitone--gutters);padding-right:var(--unitone--gutters);width:min(100% - var(--unitone--gutters) * 2,var(--unitone--max-width))}[data-unitone-layout~=cover]{--unitone--gap:var(--unitone--s1);--unitone--min-height:100vh;--unitone--justify-content:center;display:flex;flex-flow:column;gap:var(--unitone--gap);justify-content:var(--unitone--justify-content);min-height:var(--unitone--min-height);overflow:hidden;padding:var(--unitone--gap)}[data-unitone-layout~=cover]>*{margin-bottom:0;margin-top:0}[data-unitone-layout~=cover][data-unitone-layout~=-no-padding]{padding:0}[data-unitone-layout~=cover__content]{margin-bottom:auto;margin-top:auto}[data-unitone-layout~=float]{--unitone--gap:var(--unitone--s1);--unitone--min-measure:calc(var(--unitone--measure) / 2);--unitone--min-width:calc(var(--unitone--measure) / 2);width:max(min(var(--unitone--min-width),100%),min((var(--unitone--min-width) + var(--unitone--gap) + var(--unitone--min-measure) - 100%) * 999,100%))}[data-unitone-layout~=float]:not([data-unitone-layout~=-right]),[data-unitone-layout~=float][data-unitone-layout~=-left]{float:left;margin-bottom:var(--unitone--gap);margin-right:var(--unitone--gap)}[data-unitone-layout~=float][data-unitone-layout~=-right]{float:right;margin-bottom:var(--unitone--gap);margin-left:var(--unitone--gap)}[data-unitone-layout~=frame]{--unitone--ratio:16/9;position:relative}[data-unitone-layout~=frame]:before{content:"";display:block;padding:calc(100% / (var(--unitone--ratio))) 0 0}[data-unitone-layout~=frame]>*{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%}[data-unitone-layout~=frame] img,[data-unitone-layout~=frame] video{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (orientation:portrait){[data-unitone-layout~=frame][data-unitone-layout~=-switch]:before{padding-top:calc(var(--unitone--ratio) * 100%)}}[data-unitone-layout~=layers]{--unitone--gap:var(--unitone--s1);--unitone--columns:12;display:grid;gap:var(--unitone--gap);grid-template-columns:repeat(var(--unitone--columns),1fr);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;overflow:hidden;position:relative}[data-unitone-layout~=layers]>*{--unitone--align-self:auto;--unitone--justify-self:auto;--unitone--grid-column:1/-1;--unitone--grid-row:1/-1;align-self:var(--unitone--align-self);grid-column:var(--unitone--grid-column);grid-row:var(--unitone--grid-row);justify-self:var(--unitone--justify-self);position:relative}[data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(picture,figure),[data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child,picture:first-child,figure:first-child){bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}[data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(img,video),[data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child){height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;width:100%}[data-unitone-layout~=responsive-grid]{--unitone--column-min-width:250px;--unitone--gap:var(--unitone--s1);grid-gap:var(--unitone--gap);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--unitone--column-min-width),100%),1fr))}[data-unitone-layout~=gutters]{--unitone--padding:var(--unitone--s4);padding-bottom:var(--unitone--padding);padding-top:var(--unitone--padding)}[data-unitone-layout~=stack]{--unitone--gap:var(--unitone--s1);display:flex;flex-direction:column;gap:var(--unitone--gap)}[data-unitone-layout~=stack]>*{flex:0 0 auto;margin-bottom:0;margin-top:0}[data-unitone-layout~=stack]:only-child{height:100%}[data-unitone-layout~=stack][data-unitone-layout~=-negative]{gap:0}[data-unitone-layout~=stack][data-unitone-layout~=-negative]>*+*{margin-top:calc(-1 * var(--unitone--gap))}[data-unitone-layout~=switcher]{--unitone--gap:var(--unitone--s1);--unitone--threshold:var(--unitone--measure);display:flex;flex-wrap:wrap;gap:var(--unitone--gap)}[data-unitone-layout~=switcher]>*{flex-basis:calc((var(--unitone--threshold) - 100%) * 999);flex-grow:1}[data-unitone-layout~=text]{--unitone--max-width:var(--unitone--measure)}[data-unitone-layout~=text]>*{--unitone--gap:var(--unitone--s1);margin:0 auto}[data-unitone-layout~=text]>:not(:first-child){margin-top:calc(var(--unitone--margin-top, 1) * var(--unitone--gap))}[data-unitone-layout~=text]>:not(:last-child){margin-bottom:calc(var(--unitone--margin-bottom, 1) * var(--unitone--gap))}[data-unitone-layout~=text]>h1{--unitone--font-size:4}[data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6){--unitone--margin-bottom:0}[data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6)+:where(h2,h3,h4,h5,h6){--unitone--margin-top:.5}[data-unitone-layout~=text]>h2{--unitone--font-size:3}[data-unitone-layout~=text]>h3{--unitone--font-size:2}[data-unitone-layout~=text]>h4{--unitone--font-size:1}[data-unitone-layout~=text]>h5{--unitone--font-size:0}[data-unitone-layout~=text]>h5+*{--unitone--margin-top:.5}[data-unitone-layout~=text]>h6{--unitone--font-size:0}[data-unitone-layout~=text]>h6+*{--unitone--margin-top:.5}:where([data-unitone-layout~=text]>*){max-width:min(100%,var(--unitone--max-width))}:where([data-unitone-layout~=text][data-unitone-layout~=-center])>*{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}[data-unitone-layout~=text]:lang(ja){font-feature-settings:"palt" 0;font-kerning:none}[data-unitone-layout~=text]:lang(ja)>:where(h1,h2,h3,h4,h5){font-feature-settings:"palt" 1;font-kerning:normal}[data-unitone-layout~=with-sidebar]{--unitone--content-min-width:50%;--unitone--content-max-width:100%;--unitone--gap:var(--unitone--s1);--unitone--align-items:flex-start;align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap)}[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:first-child,[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:first-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:first-child{flex-basis:0;flex-grow:999;max-width:min(100%,var(--unitone--content-max-width));min-width:min(100%,var(--unitone--content-min-width))}[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:last-child,[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:first-child,[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:last-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:first-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:last-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:first-child{flex-basis:var(--unitone--sidebar-width);flex-grow:1;min-width:1rem}[data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:last-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:last-child,[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:last-child{flex-basis:0;flex-grow:999;max-width:min(100%,var(--unitone--content-max-width));min-width:min(100%,var(--unitone--content-min-width))}[data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]{flex-direction:row-reverse}[data-unitone-layout~="-align-items:start"]{--unitone--align-items:flex-start!important}[data-unitone-layout~="-align-items:center"]{--unitone--align-items:center!important}[data-unitone-layout~="-align-items:end"]{--unitone--align-items:flex-end!important}[data-unitone-layout~="-align-self:auto"]{--unitone--align-self:auto!important}[data-unitone-layout~="-align-self:normal"]{--unitone--align-self:normal!important}[data-unitone-layout~="-align-self:start"]{--unitone--align-self:start!important}[data-unitone-layout~="-align-self:end"]{--unitone--align-self:end!important}[data-unitone-layout~="-align-self:center"]{--unitone--align-self:center!important}[data-unitone-layout~="-align-self:stretch"]{--unitone--align-self:stretch!important}[data-unitone-layout~="-align-self:baseline"]{--unitone--align-self:baseline!important}[data-unitone-layout~="-align:start"]{margin-left:0!important}[data-unitone-layout~="-align:center"]{margin-left:auto!important;margin-right:auto!important}[data-unitone-layout~="-align:end"]{margin-right:0!important}[data-unitone-layout~=-fluid-typography]{font-size:clamp(1rem * calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size))),calc((calc(-22.5 * calc((calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))) - calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) / (57.5)) + calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) * 1rem) + (calc((calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))) - calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) / (57.5)) * 100vw)),1rem * calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))))!important}[data-unitone-layout~="-gap:-2"]{--unitone--gap:var(--unitone--s-2)!important}[data-unitone-layout~="-gap:-1"]{--unitone--gap:var(--unitone--s-1)!important}[data-unitone-layout~="-gap:0"]{--unitone--gap:var(--unitone--s0)!important}[data-unitone-layout~="-gap:1"]{--unitone--gap:var(--unitone--s1)!important}[data-unitone-layout~="-gap:2"]{--unitone--gap:var(--unitone--s2)!important}[data-unitone-layout~="-gap:3"]{--unitone--gap:var(--unitone--s3)!important}[data-unitone-layout~="-gap:4"]{--unitone--gap:var(--unitone--s4)!important}[data-unitone-layout~="-gap:5"]{--unitone--gap:var(--unitone--s5)!important}[data-unitone-layout~="-gap:6"]{--unitone--gap:var(--unitone--s6)!important}[data-unitone-layout~="-gap:7"]{--unitone--gap:var(--unitone--s7)!important}[data-unitone-layout~="-gutters:-2"]{--unitone--gutters:var(--unitone--rem-2)!important}[data-unitone-layout~="-gutters:-1"]{--unitone--gutters:var(--unitone--rem-1)!important}[data-unitone-layout~="-gutters:0"]{--unitone--gutters:var(--unitone--rem0)!important}[data-unitone-layout~="-gutters:1"]{--unitone--gutters:var(--unitone--rem1)!important}[data-unitone-layout~="-gutters:2"]{--unitone--gutters:var(--unitone--rem2)!important}[data-unitone-layout~="-gutters:3"]{--unitone--gutters:var(--unitone--rem3)!important}[data-unitone-layout~="-gutters:4"]{--unitone--gutters:var(--unitone--rem4)!important}[data-unitone-layout~="-gutters:5"]{--unitone--gutters:var(--unitone--rem5)!important}[data-unitone-layout~="-gutters:6"]{--unitone--gutters:var(--unitone--rem6)!important}[data-unitone-layout~="-gutters:7"]{--unitone--gutters:var(--unitone--rem7)!important}[data-unitone-layout~="-justify-content:start"]{--unitone--justify-content:flex-start!important}[data-unitone-layout~="-justify-content:center"]{--unitone--justify-content:center!important}[data-unitone-layout~="-justify-content:end"]{--unitone--justify-content:flex-end!important}[data-unitone-layout~="-justify-content:space-between"]{--unitone--justify-content:space-between!important}[data-unitone-layout~="-justify-self:auto"]{--unitone--justify-self:auto!important}[data-unitone-layout~="-justify-self:normal"]{--unitone--justify-self:normal!important}[data-unitone-layout~="-justify-self:start"]{--unitone--justify-self:start!important}[data-unitone-layout~="-justify-self:end"]{--unitone--justify-self:end!important}[data-unitone-layout~="-justify-self:center"]{--unitone--justify-self:center!important}[data-unitone-layout~="-justify-self:stretch"]{--unitone--justify-self:stretch!important}[data-unitone-layout~="-justify-self:baseline"]{--unitone--justify-self:baseline!important}[data-unitone-layout~="-padding:-2"]{--unitone--padding:var(--unitone--s-2)!important}[data-unitone-layout~="-padding:-1"]{--unitone--padding:var(--unitone--s-1)!important}[data-unitone-layout~="-padding:0"]{--unitone--padding:var(--unitone--s0)!important}[data-unitone-layout~="-padding:1"]{--unitone--padding:var(--unitone--s1)!important}[data-unitone-layout~="-padding:2"]{--unitone--padding:var(--unitone--s2)!important}[data-unitone-layout~="-padding:3"]{--unitone--padding:var(--unitone--s3)!important}[data-unitone-layout~="-padding:4"]{--unitone--padding:var(--unitone--s4)!important}[data-unitone-layout~="-padding:5"]{--unitone--padding:var(--unitone--s5)!important}[data-unitone-layout~="-padding:6"]{--unitone--padding:var(--unitone--s6)!important}[data-unitone-layout~="-padding:7"]{--unitone--padding:var(--unitone--s7)!important}

package/dist/app.js

@@ -0,0 +1 @@
+(()=>{function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var e=function(t){var e=parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size")),n=parseFloat(window.getComputedStyle(t).getPropertyValue("font-size"));t.style.setProperty("--unitone--fluid-font-size-magnification",n/e)},n=new ResizeObserver((function(n){var r,o=function(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var o=0,a=function(){};return{s:a,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,u=!0,l=!1;return{s:function(){r=r.call(e)},n:function(){var t=r.next();return u=t.done,t},e:function(t){l=!0,i=t},f:function(){try{u||null==r.return||r.return()}finally{if(l)throw i}}}}(n);try{for(o.s();!(r=o.n()).done;){var a=r.value;e(a.target)}}catch(t){o.e(t)}finally{o.f()}}));document.querySelectorAll('[data-unitone-layout~="-fluid-typography"]').forEach((function(t){n.observe(t),e(t)}))})();

package/dist/storybook.css

@@ -0,0 +1 @@
+:root{--unitone--measure:38rem;--unitone--color-white:#fff;--unitone--color-black:#000;--unitone--color-text:#222;--unitone--font-size:0;--unitone--base-font-size:16;--unitone--harmonic-sequence-base:8;--unitone--min-harmonic-sequence-base:9;--unitone--max-harmonic-sequence-base:var(--unitone--harmonic-sequence-base);--unitone--half-leading:.3;--unitone--line-height-slope:-0.16666;--unitone--font-family:sans-serif;--unitone--_space-reference-value:clamp(1,var(--unitone--line-height-slope) * var(--unitone--fluid-font-size-magnification,calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)))) + 1 + 2 * var(--unitone--half-leading) + -1 * var(--unitone--line-height-slope),2 * var(--unitone--half-leading) + 1) /3;--unitone--ms-2:calc(var(--unitone--_space-reference-value) * 1);--unitone--ms-1:calc(var(--unitone--_space-reference-value) * 2);--unitone--ms0:0;--unitone--ms1:calc(var(--unitone--_space-reference-value) * 3);--unitone--ms2:calc(var(--unitone--_space-reference-value) * 5);--unitone--ms3:calc(var(--unitone--_space-reference-value) * 8);--unitone--ms4:calc(var(--unitone--_space-reference-value) * 13);--unitone--ms5:calc(var(--unitone--_space-reference-value) * 21);--unitone--ms6:calc(var(--unitone--_space-reference-value) * 34);--unitone--ms7:calc(var(--unitone--_space-reference-value) * 55);--unitone--em-2:calc(1em * var(--unitone--ms-2));--unitone--em-1:calc(1em * var(--unitone--ms-1));--unitone--em0:0em;--unitone--em1:calc(1em * var(--unitone--ms1));--unitone--em2:calc(1em * var(--unitone--ms2));--unitone--em3:calc(1em * var(--unitone--ms3));--unitone--em4:calc(1em * var(--unitone--ms4));--unitone--em5:calc(1em * var(--unitone--ms5));--unitone--em6:calc(1em * var(--unitone--ms6));--unitone--em7:calc(1em * var(--unitone--ms7));--unitone--rem-2:calc(1rem * var(--unitone--ms-2));--unitone--rem-1:calc(1rem * var(--unitone--ms-1));--unitone--rem0:0rem;--unitone--rem1:calc(1rem * var(--unitone--ms1));--unitone--rem2:calc(1rem * var(--unitone--ms2));--unitone--rem3:calc(1rem * var(--unitone--ms3));--unitone--rem4:calc(1rem * var(--unitone--ms4));--unitone--rem5:calc(1rem * var(--unitone--ms5));--unitone--rem6:calc(1rem * var(--unitone--ms6));--unitone--rem7:calc(1rem * var(--unitone--ms7));--unitone--s-2:var(--unitone--em-2);--unitone--s-1:var(--unitone--em-1);--unitone--s0:var(--unitone--em0);--unitone--s1:var(--unitone--em1);--unitone--s2:clamp(calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms2) - calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) * 1em + calc((var(--unitone--ms2) - calc(var(--unitone--ms1) + var(--unitone--ms2) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms2) * 1em);--unitone--s3:clamp(calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms3) - calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) * 1em + calc((var(--unitone--ms3) - calc(var(--unitone--ms1) + var(--unitone--ms3) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms3) * 1em);--unitone--s4:clamp(calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms4) - calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) * 1em + calc((var(--unitone--ms4) - calc(var(--unitone--ms1) + var(--unitone--ms4) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms4) * 1em);--unitone--s5:clamp(calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms5) - calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) * 1em + calc((var(--unitone--ms5) - calc(var(--unitone--ms1) + var(--unitone--ms5) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms5) * 1em);--unitone--s6:clamp(calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms6) - calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) * 1em + calc((var(--unitone--ms6) - calc(var(--unitone--ms1) + var(--unitone--ms6) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms6) * 1em);--unitone--s7:clamp(calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125) * 1em,calc(calc(-22.5 * calc((var(--unitone--ms7) - calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) / (57.5)) + calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) * 1em + calc((var(--unitone--ms7) - calc(var(--unitone--ms1) + var(--unitone--ms7) * 0.28125)) / (57.5)) * 100vw),var(--unitone--ms7) * 1em);--unitone--container-max-width:1280px;--unitone--_grid-gutters:calc(11 * var(--unitone--s1));--unitone--pg0:0%;--unitone--pg1:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 1 + var(--unitone--s1) * 0);--unitone--pg2:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 2 + var(--unitone--s1) * 1);--unitone--pg3:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 3 + var(--unitone--s1) * 2);--unitone--pg4:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 4 + var(--unitone--s1) * 3);--unitone--pg5:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 5 + var(--unitone--s1) * 4);--unitone--pg6:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 6 + var(--unitone--s1) * 5);--unitone--pg7:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 7 + var(--unitone--s1) * 6);--unitone--pg8:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 8 + var(--unitone--s1) * 7);--unitone--pg9:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 9 + var(--unitone--s1) * 8);--unitone--pg10:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 10 + var(--unitone--s1) * 9);--unitone--pg11:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 11 + var(--unitone--s1) * 10);--unitone--pg12:calc(calc((100% - var(--unitone--_grid-gutters)) / 12) * 12 + var(--unitone--s1) * 11);--unitone--cg0:0%;--unitone--cg1:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 1 + var(--unitone--s1) * 0);--unitone--cg2:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 2 + var(--unitone--s1) * 1);--unitone--cg3:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 3 + var(--unitone--s1) * 2);--unitone--cg4:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 4 + var(--unitone--s1) * 3);--unitone--cg5:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 5 + var(--unitone--s1) * 4);--unitone--cg6:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 6 + var(--unitone--s1) * 5);--unitone--cg7:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 7 + var(--unitone--s1) * 6);--unitone--cg8:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 8 + var(--unitone--s1) * 7);--unitone--cg9:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 9 + var(--unitone--s1) * 8);--unitone--cg10:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 10 + var(--unitone--s1) * 9);--unitone--cg11:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 11 + var(--unitone--s1) * 10);--unitone--cg12:calc(calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / 12) * 12 + var(--unitone--s1) * 11);--unitone--shadow:0 5px 20px -5px rgba(0,0,0,.2)}html{font-size:calc(var(--unitone--base-font-size) * 1px)}body{-webkit-font-smoothing:antialiased;background-color:var(--unitone--color-white);color:var(--unitone--color-text);font-family:var(--unitone--font-family);overflow-wrap:break-word}#root *,.docs-story *{font-size:calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)) * 1rem);line-height:clamp(1,var(--unitone--line-height-slope) * var(--unitone--fluid-font-size-magnification,calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)))) + 1 + 2 * var(--unitone--half-leading) + -1 * var(--unitone--line-height-slope),2 * var(--unitone--half-leading) + 1)}#root *,#root :after,#root :before,.docs-story *,.docs-story :after,.docs-story :before{box-sizing:border-box}#root html,.docs-story html{hanging-punctuation:allow-end;line-break:normal}#root a,.docs-story a{text-decoration-thickness:1px;text-underline-offset:.1em}#root address,#root article,#root aside,#root blockquote,#root dd,#root details,#root dialog,#root div,#root dl,#root dt,#root fieldset,#root figcaption,#root figure,#root footer,#root form,#root h1,#root h2,#root h3,#root h4,#root h5,#root h6,#root header,#root hgroup,#root hr,#root li,#root main,#root nav,#root ol,#root p,#root pre,#root section,#root table,#root ul,.docs-story address,.docs-story article,.docs-story aside,.docs-story blockquote,.docs-story dd,.docs-story details,.docs-story dialog,.docs-story div,.docs-story dl,.docs-story dt,.docs-story fieldset,.docs-story figcaption,.docs-story figure,.docs-story footer,.docs-story form,.docs-story h1,.docs-story h2,.docs-story h3,.docs-story h4,.docs-story h5,.docs-story h6,.docs-story header,.docs-story hgroup,.docs-story hr,.docs-story li,.docs-story main,.docs-story nav,.docs-story ol,.docs-story p,.docs-story pre,.docs-story section,.docs-story table,.docs-story ul{margin:0;padding:0}#root li,.docs-story li{margin-left:1.5em}#root small,#root sup,.docs-story small,.docs-story sup{font-size:smaller}@supports (font-variant-position:super){#root sup,.docs-story sup{font-size:inherit;font-variant-position:super;vertical-align:baseline}}#root sub,.docs-story sub{font-size:smaller}@supports (font-variant-position:sub){#root sub,.docs-story sub{font-size:inherit;font-variant-position:sub;vertical-align:baseline}}#root figure,#root picture,.docs-story figure,.docs-story picture{max-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#root :where(figure,picture) :where(img,video),.docs-story :where(figure,picture) :where(img,video){display:table;margin-bottom:0;margin-top:0}#root :where(figure,picture) :where(img:not([width]),video:not([width])),.docs-story :where(figure,picture) :where(img:not([width]),video:not([width])){width:100%}#root img,#root video,.docs-story img,.docs-story video{height:auto;max-width:100%}#root [data-unitone-layout~=both-sides],.docs-story [data-unitone-layout~=both-sides]{--unitone--gap:var(--unitone--s1);--unitone--align-items:flex-start;--unitone--content-width:fit-content;--unitone--content-max-width:var(--unitone--measure);align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap);justify-content:space-between}#root [data-unitone-layout~=both-sides]>*,.docs-story [data-unitone-layout~=both-sides]>*{flex-basis:var(--unitone--content-width);flex-grow:0;max-width:min(100%,var(--unitone--content-max-width))}#root [data-unitone-layout~=decorator],.docs-story [data-unitone-layout~=decorator]{--unitone--background-color:transparent;--unitone--border-color:transparent;--unitone--border-width:0;--unitone--border-radius:0;--unitone--padding:var(--unitone--s0);--unitone--box-shadow:none;--unitone--position:static;--unitone--top:initial;--unitone--right:initial;--unitone--bottom:initial;--unitone--left:initial;--unitone--z-index:initial;background-color:var(--unitone--background-color);border:var(--unitone--border-width) solid var(--unitone--border-color);border-radius:var(--unitone--border-radius);bottom:var(--unitone--bottom);box-shadow:var(--unitone--box-shadow);color:var(--unitone--color);left:var(--unitone--left);padding:calc(var(--unitone--padding) - var(--unitone--half-leading) * 1em) var(--unitone--padding);position:var(--unitone--position);right:var(--unitone--right);top:var(--unitone--top);z-index:var(--unitone--z-index)}#root [data-unitone-layout~=decorator][data-unitone-layout~=-shadow],.docs-story [data-unitone-layout~=decorator][data-unitone-layout~=-shadow]{--unitone--box-shadow:var(--unitone--shadow)}#root [data-unitone-layout~=decorator][data-unitone-layout~="-position:relative"],.docs-story [data-unitone-layout~=decorator][data-unitone-layout~="-position:relative"]{--unitone--position:relative!important}#root [data-unitone-layout~=decorator][data-unitone-layout~="-position:absolute"],.docs-story [data-unitone-layout~=decorator][data-unitone-layout~="-position:absolute"]{--unitone--position:absolute!important}#root [data-unitone-layout~=decorator][data-unitone-layout~="-position:sticky"],.docs-story [data-unitone-layout~=decorator][data-unitone-layout~="-position:sticky"]{--unitone--position:sticky!important}#root [data-unitone-layout~=decorator][data-unitone-layout~="-position:fixed"],.docs-story [data-unitone-layout~=decorator][data-unitone-layout~="-position:fixed"]{--unitone--position:fixed!important}#root [data-unitone-layout~=center],.docs-story [data-unitone-layout~=center]{align-items:center;display:flex;flex-direction:column;margin-left:auto;margin-right:auto}#root [data-unitone-layout~=center][data-unitone-layout~=-with-text],.docs-story [data-unitone-layout~=center][data-unitone-layout~=-with-text]{text-align:center}#root [data-unitone-layout~=cluster],.docs-story [data-unitone-layout~=cluster]{--unitone--align-items:flex-start;--unitone--gap:calc(var(--unitone--s1) / 2) var(--unitone--s1);--unitone--justify-content:flex-start;align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap);justify-content:var(--unitone--justify-content);list-style:none}#root [data-unitone-layout~=cluster]>*,.docs-story [data-unitone-layout~=cluster]>*{margin:0}#root [data-unitone-layout~=container],.docs-story [data-unitone-layout~=container]{--unitone--gutters:var(--unitone--rem1);--unitone--max-width:var(--unitone--container-max-width);box-sizing:content-box;margin-left:auto;margin-right:auto;max-width:100%;padding-left:var(--unitone--gutters);padding-right:var(--unitone--gutters);width:min(100% - var(--unitone--gutters) * 2,var(--unitone--max-width))}#root [data-unitone-layout~=cover],.docs-story [data-unitone-layout~=cover]{--unitone--gap:var(--unitone--s1);--unitone--min-height:100vh;--unitone--justify-content:center;display:flex;flex-flow:column;gap:var(--unitone--gap);justify-content:var(--unitone--justify-content);min-height:var(--unitone--min-height);overflow:hidden;padding:var(--unitone--gap)}#root [data-unitone-layout~=cover]>*,.docs-story [data-unitone-layout~=cover]>*{margin-bottom:0;margin-top:0}#root [data-unitone-layout~=cover][data-unitone-layout~=-no-padding],.docs-story [data-unitone-layout~=cover][data-unitone-layout~=-no-padding]{padding:0}#root [data-unitone-layout~=cover__content],.docs-story [data-unitone-layout~=cover__content]{margin-bottom:auto;margin-top:auto}#root [data-unitone-layout~=float],.docs-story [data-unitone-layout~=float]{--unitone--gap:var(--unitone--s1);--unitone--min-measure:calc(var(--unitone--measure) / 2);--unitone--min-width:calc(var(--unitone--measure) / 2);width:max(min(var(--unitone--min-width),100%),min((var(--unitone--min-width) + var(--unitone--gap) + var(--unitone--min-measure) - 100%) * 999,100%))}#root [data-unitone-layout~=float]:not([data-unitone-layout~=-right]),#root [data-unitone-layout~=float][data-unitone-layout~=-left],.docs-story [data-unitone-layout~=float]:not([data-unitone-layout~=-right]),.docs-story [data-unitone-layout~=float][data-unitone-layout~=-left]{float:left;margin-bottom:var(--unitone--gap);margin-right:var(--unitone--gap)}#root [data-unitone-layout~=float][data-unitone-layout~=-right],.docs-story [data-unitone-layout~=float][data-unitone-layout~=-right]{float:right;margin-bottom:var(--unitone--gap);margin-left:var(--unitone--gap)}#root [data-unitone-layout~=frame],.docs-story [data-unitone-layout~=frame]{--unitone--ratio:16/9;position:relative}#root [data-unitone-layout~=frame]:before,.docs-story [data-unitone-layout~=frame]:before{content:"";display:block;padding:calc(100% / (var(--unitone--ratio))) 0 0}#root [data-unitone-layout~=frame]>*,.docs-story [data-unitone-layout~=frame]>*{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%}#root [data-unitone-layout~=frame] img,#root [data-unitone-layout~=frame] video,.docs-story [data-unitone-layout~=frame] img,.docs-story [data-unitone-layout~=frame] video{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (orientation:portrait){#root [data-unitone-layout~=frame][data-unitone-layout~=-switch]:before,.docs-story [data-unitone-layout~=frame][data-unitone-layout~=-switch]:before{padding-top:calc(var(--unitone--ratio) * 100%)}}#root [data-unitone-layout~=layers],.docs-story [data-unitone-layout~=layers]{--unitone--gap:var(--unitone--s1);--unitone--columns:12;display:grid;gap:var(--unitone--gap);grid-template-columns:repeat(var(--unitone--columns),1fr);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;overflow:hidden;position:relative}#root [data-unitone-layout~=layers]>*,.docs-story [data-unitone-layout~=layers]>*{--unitone--align-self:auto;--unitone--justify-self:auto;--unitone--grid-column:1/-1;--unitone--grid-row:1/-1;align-self:var(--unitone--align-self);grid-column:var(--unitone--grid-column);grid-row:var(--unitone--grid-row);justify-self:var(--unitone--justify-self);position:relative}#root [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(picture,figure),#root [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child,picture:first-child,figure:first-child),.docs-story [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(picture,figure),.docs-story [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child,picture:first-child,figure:first-child){bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}#root [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(img,video),#root [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child),.docs-story [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:first-child :where(img,video),.docs-story [data-unitone-layout~=layers][data-unitone-layout~=-cover]>:where(img:first-child,video:first-child){height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;width:100%}#root [data-unitone-layout~=responsive-grid],.docs-story [data-unitone-layout~=responsive-grid]{--unitone--column-min-width:250px;--unitone--gap:var(--unitone--s1);grid-gap:var(--unitone--gap);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--unitone--column-min-width),100%),1fr))}#root [data-unitone-layout~=gutters],.docs-story [data-unitone-layout~=gutters]{--unitone--padding:var(--unitone--s4);padding-bottom:var(--unitone--padding);padding-top:var(--unitone--padding)}#root [data-unitone-layout~=stack],.docs-story [data-unitone-layout~=stack]{--unitone--gap:var(--unitone--s1);display:flex;flex-direction:column;gap:var(--unitone--gap)}#root [data-unitone-layout~=stack]>*,.docs-story [data-unitone-layout~=stack]>*{flex:0 0 auto;margin-bottom:0;margin-top:0}#root [data-unitone-layout~=stack]:only-child,.docs-story [data-unitone-layout~=stack]:only-child{height:100%}#root [data-unitone-layout~=stack][data-unitone-layout~=-negative],.docs-story [data-unitone-layout~=stack][data-unitone-layout~=-negative]{gap:0}#root [data-unitone-layout~=stack][data-unitone-layout~=-negative]>*+*,.docs-story [data-unitone-layout~=stack][data-unitone-layout~=-negative]>*+*{margin-top:calc(-1 * var(--unitone--gap))}#root [data-unitone-layout~=switcher],.docs-story [data-unitone-layout~=switcher]{--unitone--gap:var(--unitone--s1);--unitone--threshold:var(--unitone--measure);display:flex;flex-wrap:wrap;gap:var(--unitone--gap)}#root [data-unitone-layout~=switcher]>*,.docs-story [data-unitone-layout~=switcher]>*{flex-basis:calc((var(--unitone--threshold) - 100%) * 999);flex-grow:1}#root [data-unitone-layout~=text],.docs-story [data-unitone-layout~=text]{--unitone--max-width:var(--unitone--measure)}#root [data-unitone-layout~=text]>*,.docs-story [data-unitone-layout~=text]>*{--unitone--gap:var(--unitone--s1);margin:0 auto}#root [data-unitone-layout~=text]>:not(:first-child),.docs-story [data-unitone-layout~=text]>:not(:first-child){margin-top:calc(var(--unitone--margin-top, 1) * var(--unitone--gap))}#root [data-unitone-layout~=text]>:not(:last-child),.docs-story [data-unitone-layout~=text]>:not(:last-child){margin-bottom:calc(var(--unitone--margin-bottom, 1) * var(--unitone--gap))}#root [data-unitone-layout~=text]>h1,.docs-story [data-unitone-layout~=text]>h1{--unitone--font-size:4}#root [data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6),.docs-story [data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6){--unitone--margin-bottom:0}#root [data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6)+:where(h2,h3,h4,h5,h6),.docs-story [data-unitone-layout~=text]>:where(h2,h3,h4,h5,h6)+:where(h2,h3,h4,h5,h6){--unitone--margin-top:.5}#root [data-unitone-layout~=text]>h2,.docs-story [data-unitone-layout~=text]>h2{--unitone--font-size:3}#root [data-unitone-layout~=text]>h3,.docs-story [data-unitone-layout~=text]>h3{--unitone--font-size:2}#root [data-unitone-layout~=text]>h4,.docs-story [data-unitone-layout~=text]>h4{--unitone--font-size:1}#root [data-unitone-layout~=text]>h5,.docs-story [data-unitone-layout~=text]>h5{--unitone--font-size:0}#root [data-unitone-layout~=text]>h5+*,.docs-story [data-unitone-layout~=text]>h5+*{--unitone--margin-top:.5}#root [data-unitone-layout~=text]>h6,.docs-story [data-unitone-layout~=text]>h6{--unitone--font-size:0}#root [data-unitone-layout~=text]>h6+*,.docs-story [data-unitone-layout~=text]>h6+*{--unitone--margin-top:.5}#root :where([data-unitone-layout~=text]>*),.docs-story :where([data-unitone-layout~=text]>*){max-width:min(100%,var(--unitone--max-width))}#root :where([data-unitone-layout~=text][data-unitone-layout~=-center])>*,.docs-story :where([data-unitone-layout~=text][data-unitone-layout~=-center])>*{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#root [data-unitone-layout~=text]:lang(ja),.docs-story [data-unitone-layout~=text]:lang(ja){font-feature-settings:"palt" 0;font-kerning:none}#root [data-unitone-layout~=text]:lang(ja)>:where(h1,h2,h3,h4,h5),.docs-story [data-unitone-layout~=text]:lang(ja)>:where(h1,h2,h3,h4,h5){font-feature-settings:"palt" 1;font-kerning:normal}#root [data-unitone-layout~=with-sidebar],.docs-story [data-unitone-layout~=with-sidebar]{--unitone--content-min-width:50%;--unitone--content-max-width:100%;--unitone--gap:var(--unitone--s1);--unitone--align-items:flex-start;align-items:var(--unitone--align-items);display:flex;flex-wrap:wrap;gap:var(--unitone--gap)}#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:first-child,#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:first-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:first-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:first-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:first-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:first-child{flex-basis:0;flex-grow:999;max-width:min(100%,var(--unitone--content-max-width));min-width:min(100%,var(--unitone--content-min-width))}#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:last-child,#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:first-child,#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:last-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:first-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:last-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:first-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert]):not([data-unitone-layout~="-sidebar:left"])>:last-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:first-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:right"]>:last-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:first-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:left"]>:last-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:first-child{flex-basis:var(--unitone--sidebar-width);flex-grow:1;min-width:1rem}#root [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:last-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:last-child,#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:last-child,.docs-story [data-unitone-layout~=with-sidebar]:not([data-unitone-layout~=-revert])[data-unitone-layout~="-sidebar:left"]>:last-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]:not([data-unitone-layout~="-sidebar:left"])>:last-child,.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert][data-unitone-layout~="-sidebar:right"]>:last-child{flex-basis:0;flex-grow:999;max-width:min(100%,var(--unitone--content-max-width));min-width:min(100%,var(--unitone--content-min-width))}#root [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert],.docs-story [data-unitone-layout~=with-sidebar][data-unitone-layout~=-revert]{flex-direction:row-reverse}#root [data-unitone-layout~="-align-items:start"],.docs-story [data-unitone-layout~="-align-items:start"]{--unitone--align-items:flex-start!important}#root [data-unitone-layout~="-align-items:center"],.docs-story [data-unitone-layout~="-align-items:center"]{--unitone--align-items:center!important}#root [data-unitone-layout~="-align-items:end"],.docs-story [data-unitone-layout~="-align-items:end"]{--unitone--align-items:flex-end!important}#root [data-unitone-layout~="-align-self:auto"],.docs-story [data-unitone-layout~="-align-self:auto"]{--unitone--align-self:auto!important}#root [data-unitone-layout~="-align-self:normal"],.docs-story [data-unitone-layout~="-align-self:normal"]{--unitone--align-self:normal!important}#root [data-unitone-layout~="-align-self:start"],.docs-story [data-unitone-layout~="-align-self:start"]{--unitone--align-self:start!important}#root [data-unitone-layout~="-align-self:end"],.docs-story [data-unitone-layout~="-align-self:end"]{--unitone--align-self:end!important}#root [data-unitone-layout~="-align-self:center"],.docs-story [data-unitone-layout~="-align-self:center"]{--unitone--align-self:center!important}#root [data-unitone-layout~="-align-self:stretch"],.docs-story [data-unitone-layout~="-align-self:stretch"]{--unitone--align-self:stretch!important}#root [data-unitone-layout~="-align-self:baseline"],.docs-story [data-unitone-layout~="-align-self:baseline"]{--unitone--align-self:baseline!important}#root [data-unitone-layout~="-align:start"],.docs-story [data-unitone-layout~="-align:start"]{margin-left:0!important}#root [data-unitone-layout~="-align:center"],.docs-story [data-unitone-layout~="-align:center"]{margin-left:auto!important;margin-right:auto!important}#root [data-unitone-layout~="-align:end"],.docs-story [data-unitone-layout~="-align:end"]{margin-right:0!important}#root [data-unitone-layout~=-fluid-typography],.docs-story [data-unitone-layout~=-fluid-typography]{font-size:clamp(1rem * calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size))),calc((calc(-22.5 * calc((calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))) - calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) / (57.5)) + calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) * 1rem) + (calc((calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))) - calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)))) / (57.5)) * 100vw)),1rem * calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))))!important}#root [data-unitone-layout~="-gap:-2"],.docs-story [data-unitone-layout~="-gap:-2"]{--unitone--gap:var(--unitone--s-2)!important}#root [data-unitone-layout~="-gap:-1"],.docs-story [data-unitone-layout~="-gap:-1"]{--unitone--gap:var(--unitone--s-1)!important}#root [data-unitone-layout~="-gap:0"],.docs-story [data-unitone-layout~="-gap:0"]{--unitone--gap:var(--unitone--s0)!important}#root [data-unitone-layout~="-gap:1"],.docs-story [data-unitone-layout~="-gap:1"]{--unitone--gap:var(--unitone--s1)!important}#root [data-unitone-layout~="-gap:2"],.docs-story [data-unitone-layout~="-gap:2"]{--unitone--gap:var(--unitone--s2)!important}#root [data-unitone-layout~="-gap:3"],.docs-story [data-unitone-layout~="-gap:3"]{--unitone--gap:var(--unitone--s3)!important}#root [data-unitone-layout~="-gap:4"],.docs-story [data-unitone-layout~="-gap:4"]{--unitone--gap:var(--unitone--s4)!important}#root [data-unitone-layout~="-gap:5"],.docs-story [data-unitone-layout~="-gap:5"]{--unitone--gap:var(--unitone--s5)!important}#root [data-unitone-layout~="-gap:6"],.docs-story [data-unitone-layout~="-gap:6"]{--unitone--gap:var(--unitone--s6)!important}#root [data-unitone-layout~="-gap:7"],.docs-story [data-unitone-layout~="-gap:7"]{--unitone--gap:var(--unitone--s7)!important}#root [data-unitone-layout~="-gutters:-2"],.docs-story [data-unitone-layout~="-gutters:-2"]{--unitone--gutters:var(--unitone--rem-2)!important}#root [data-unitone-layout~="-gutters:-1"],.docs-story [data-unitone-layout~="-gutters:-1"]{--unitone--gutters:var(--unitone--rem-1)!important}#root [data-unitone-layout~="-gutters:0"],.docs-story [data-unitone-layout~="-gutters:0"]{--unitone--gutters:var(--unitone--rem0)!important}#root [data-unitone-layout~="-gutters:1"],.docs-story [data-unitone-layout~="-gutters:1"]{--unitone--gutters:var(--unitone--rem1)!important}#root [data-unitone-layout~="-gutters:2"],.docs-story [data-unitone-layout~="-gutters:2"]{--unitone--gutters:var(--unitone--rem2)!important}#root [data-unitone-layout~="-gutters:3"],.docs-story [data-unitone-layout~="-gutters:3"]{--unitone--gutters:var(--unitone--rem3)!important}#root [data-unitone-layout~="-gutters:4"],.docs-story [data-unitone-layout~="-gutters:4"]{--unitone--gutters:var(--unitone--rem4)!important}#root [data-unitone-layout~="-gutters:5"],.docs-story [data-unitone-layout~="-gutters:5"]{--unitone--gutters:var(--unitone--rem5)!important}#root [data-unitone-layout~="-gutters:6"],.docs-story [data-unitone-layout~="-gutters:6"]{--unitone--gutters:var(--unitone--rem6)!important}#root [data-unitone-layout~="-gutters:7"],.docs-story [data-unitone-layout~="-gutters:7"]{--unitone--gutters:var(--unitone--rem7)!important}#root [data-unitone-layout~="-justify-content:start"],.docs-story [data-unitone-layout~="-justify-content:start"]{--unitone--justify-content:flex-start!important}#root [data-unitone-layout~="-justify-content:center"],.docs-story [data-unitone-layout~="-justify-content:center"]{--unitone--justify-content:center!important}#root [data-unitone-layout~="-justify-content:end"],.docs-story [data-unitone-layout~="-justify-content:end"]{--unitone--justify-content:flex-end!important}#root [data-unitone-layout~="-justify-content:space-between"],.docs-story [data-unitone-layout~="-justify-content:space-between"]{--unitone--justify-content:space-between!important}#root [data-unitone-layout~="-justify-self:auto"],.docs-story [data-unitone-layout~="-justify-self:auto"]{--unitone--justify-self:auto!important}#root [data-unitone-layout~="-justify-self:normal"],.docs-story [data-unitone-layout~="-justify-self:normal"]{--unitone--justify-self:normal!important}#root [data-unitone-layout~="-justify-self:start"],.docs-story [data-unitone-layout~="-justify-self:start"]{--unitone--justify-self:start!important}#root [data-unitone-layout~="-justify-self:end"],.docs-story [data-unitone-layout~="-justify-self:end"]{--unitone--justify-self:end!important}#root [data-unitone-layout~="-justify-self:center"],.docs-story [data-unitone-layout~="-justify-self:center"]{--unitone--justify-self:center!important}#root [data-unitone-layout~="-justify-self:stretch"],.docs-story [data-unitone-layout~="-justify-self:stretch"]{--unitone--justify-self:stretch!important}#root [data-unitone-layout~="-justify-self:baseline"],.docs-story [data-unitone-layout~="-justify-self:baseline"]{--unitone--justify-self:baseline!important}#root [data-unitone-layout~="-padding:-2"],.docs-story [data-unitone-layout~="-padding:-2"]{--unitone--padding:var(--unitone--s-2)!important}#root [data-unitone-layout~="-padding:-1"],.docs-story [data-unitone-layout~="-padding:-1"]{--unitone--padding:var(--unitone--s-1)!important}#root [data-unitone-layout~="-padding:0"],.docs-story [data-unitone-layout~="-padding:0"]{--unitone--padding:var(--unitone--s0)!important}#root [data-unitone-layout~="-padding:1"],.docs-story [data-unitone-layout~="-padding:1"]{--unitone--padding:var(--unitone--s1)!important}#root [data-unitone-layout~="-padding:2"],.docs-story [data-unitone-layout~="-padding:2"]{--unitone--padding:var(--unitone--s2)!important}#root [data-unitone-layout~="-padding:3"],.docs-story [data-unitone-layout~="-padding:3"]{--unitone--padding:var(--unitone--s3)!important}#root [data-unitone-layout~="-padding:4"],.docs-story [data-unitone-layout~="-padding:4"]{--unitone--padding:var(--unitone--s4)!important}#root [data-unitone-layout~="-padding:5"],.docs-story [data-unitone-layout~="-padding:5"]{--unitone--padding:var(--unitone--s5)!important}#root [data-unitone-layout~="-padding:6"],.docs-story [data-unitone-layout~="-padding:6"]{--unitone--padding:var(--unitone--s6)!important}#root [data-unitone-layout~="-padding:7"],.docs-story [data-unitone-layout~="-padding:7"]{--unitone--padding:var(--unitone--s7)!important}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@inc2734/unitone-css",
+  "version": "0.23.0",
+  "description": "",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inc2734/unitone-css"
+  },
+  "files": [
+    "src",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "css"
+  ],
+  "scripts": {
+    "prepublish": "run-s build",
+    "clean": "rimraf dist",
+    "css:app": "sass --no-source-map src/app.scss:dist/app.css && postcss dist/app.css -r",
+    "css:storybook": "sass --no-source-map src/storybook.scss:dist/storybook.css && postcss dist/storybook.css -r",
+    "css": "run-p css:*",
+    "js:app": "webpack ./src/app.js -o ./dist/ --output-filename app.js --config webpack.config.js",
+    "js": "run-p js:*",
+    "build": "run-s clean format css js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "format:js": "prettier --write './src/**/*.{js,jsx}'",
+    "format": "run-p format:*",
+    "server": "start-storybook -p 6006",
+    "public": "npm run build && build-storybook -c ./.storybook -o ./public"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.18.2",
+    "@babel/core": "^7.18.2",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/html": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@whitespace/storybook-addon-html": "^5.0.0",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "cssnano": "^5.1.10",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
+    "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
+    "sass": "^1.52.1"
+  },
+  "dependencies": {}
+}

package/src/app.js

@@ -0,0 +1,21 @@
+const setFluidFontSizeMagnification = (target) => {
+  const baseFontSize = parseFloat(
+    window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),
+  );
+  const fontSize = parseFloat(window.getComputedStyle(target).getPropertyValue('font-size'));
+  target.style.setProperty('--unitone--fluid-font-size-magnification', fontSize / baseFontSize);
+};
+
+const fluidFontSizeResizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setFluidFontSizeMagnification(entry.target);
+  }
+});
+
+const fluidFontSizeElements = document.querySelectorAll(
+  '[data-unitone-layout~="-fluid-typography"]',
+);
+fluidFontSizeElements.forEach((target) => {
+  fluidFontSizeResizeObserver.observe(target);
+  setFluidFontSizeMagnification(target);
+});

package/src/app.scss

@@ -0,0 +1,8 @@
+@use 'settings/settings';
+@use 'foundation/foundation';
+@use 'layout-primitives/layout-primitives';
+@use 'helper/helper';
+
+@include foundation.foundation();
+@include layout-primitives.layout-primitives();
+@include helper.helper();

package/src/foundation/_foundation.scss

@@ -0,0 +1,108 @@
+@use '../variables/variables' as variables;
+
+@mixin foundation() {
+  * {
+    font-size: #{ variables.$font-size };
+    line-height: #{ variables.$line-height };
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    line-break: normal;
+    hanging-punctuation: allow-end;
+  }
+
+  a {
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 1px;
+  }
+
+  address,
+  article,
+  aside,
+  blockquote,
+  details,
+  dialog,
+  dd,
+  div,
+  dl,
+  dt,
+  fieldset,
+  figcaption,
+  figure,
+  footer,
+  form,
+  h1, h2, h3, h4, h5, h6,
+  header,
+  hgroup,
+  hr,
+  li,
+  main,
+  nav,
+  ol,
+  p,
+  pre,
+  section,
+  table,
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin-left: 1.5em;
+  }
+
+  small {
+    font-size: smaller;
+  }
+
+  sup {
+    font-size: smaller;
+
+    @supports (font-variant-position: super) {
+      font-variant-position: super;
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+  }
+
+  sub {
+    font-size: smaller;
+
+    @supports (font-variant-position: sub) {
+      font-variant-position: sub;
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+  }
+
+  picture,
+  figure {
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  :where(figure, picture) {
+    :where(img, video) {
+      margin-top: 0;
+      margin-bottom: 0;
+      display: table;
+    }
+
+    :where(img:not([width]), video:not([width])) {
+      width: 100%;
+    }
+  }
+
+  img,
+  video {
+    height: auto;
+    max-width: 100%;
+  }
+}

package/src/helper/_align-items.scss

@@ -0,0 +1,7 @@
+@mixin align-items() {
+  @each $key, $value in (start: flex-start, center: center, end: flex-end) {
+    [data-unitone-layout~="-align-items\:#{ $key }"] {
+      --unitone--align-items: #{ $value } !important;
+    }
+  }
+}

package/src/helper/_align-self.scss

@@ -0,0 +1,17 @@
+$_values: (
+  auto: auto,
+  normal: normal,
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+  baseline: baseline,
+);
+
+@mixin align-self() {
+  @each $key, $value in $_values {
+    [data-unitone-layout~="-align-self\:#{ $key }"] {
+      --unitone--align-self: #{ $value } !important;
+    }
+  }
+}

package/src/helper/_align.scss

@@ -0,0 +1,14 @@
+@mixin align() {
+  [data-unitone-layout~="-align\:start"] {
+    margin-left: 0 !important;
+  }
+
+  [data-unitone-layout~="-align\:center"] {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  [data-unitone-layout~="-align\:end"] {
+    margin-right: 0 !important;
+  }
+}

package/src/helper/_fluid-typography.scss

@@ -0,0 +1,7 @@
+@use '../variables/variables' as variables;
+
+@mixin fluid-typography() {
+  [data-unitone-layout~="-fluid-typography"] {
+    font-size: #{ variables.$fluid-font-size } !important;
+  }
+}

package/src/helper/_gap.scss

@@ -0,0 +1,7 @@
+@mixin gap() {
+  @for $i from -2 through 7 {
+    [data-unitone-layout~="-gap\:#{ $i }"] {
+      --unitone--gap: var(--unitone--s#{ $i }) !important;
+    }
+  }
+}

package/src/helper/_gutters.scss

@@ -0,0 +1,7 @@
+@mixin gutters() {
+  @for $i from -2 through 7 {
+    [data-unitone-layout~="-gutters\:#{ $i }"] {
+      --unitone--gutters: var(--unitone--rem#{ $i }) !important;
+    }
+  }
+}

package/src/helper/_helper.scss

@@ -0,0 +1,21 @@
+@use 'align-items';
+@use 'align-self';
+@use 'align';
+@use 'fluid-typography';
+@use 'gap';
+@use 'gutters';
+@use 'justify-content';
+@use 'justify-self';
+@use 'padding';
+
+@mixin helper() {
+  @include align-items.align-items();
+  @include align-self.align-self();
+  @include align.align();
+  @include fluid-typography.fluid-typography();
+  @include gap.gap();
+  @include gutters.gutters();
+  @include justify-content.justify-content();
+  @include justify-self.justify-self();
+  @include padding.padding();
+}

package/src/helper/_justify-content.scss

@@ -0,0 +1,7 @@
+@mixin justify-content() {
+  @each $key, $value in (start: flex-start, center: center, end: flex-end, space-between: space-between) {
+    [data-unitone-layout~="-justify-content\:#{ $key }"] {
+      --unitone--justify-content: #{ $value } !important;
+    }
+  }
+}

package/src/helper/_justify-self.scss

@@ -0,0 +1,17 @@
+$_values: (
+  auto: auto,
+  normal: normal,
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+  baseline: baseline,
+);
+
+@mixin justify-self() {
+  @each $key, $value in $_values {
+    [data-unitone-layout~="-justify-self\:#{ $key }"] {
+      --unitone--justify-self: #{ $value } !important;
+    }
+  }
+}

package/src/helper/_padding.scss

@@ -0,0 +1,7 @@
+@mixin padding() {
+  @for $i from -2 through 7 {
+    [data-unitone-layout~="-padding\:#{ $i }"] {
+      --unitone--padding: var(--unitone--s#{ $i }) !important;
+    }
+  }
+}

package/src/layout-primitives/_layout-primitives.scss

@@ -0,0 +1,33 @@
+@use 'both-sides/both-sides';
+@use 'decorator/decorator';
+@use 'center/center';
+@use 'cluster/cluster';
+@use 'container/container';
+@use 'cover/cover';
+@use 'float/float';
+@use 'frame/frame';
+@use 'layers/layers';
+@use 'responsive-grid/responsive-grid';
+@use 'gutters/gutters';
+@use 'stack/stack';
+@use 'switcher/switcher';
+@use 'text/text';
+@use 'with-sidebar/with-sidebar';
+
+@mixin layout-primitives() {
+  @include both-sides.both-sides();
+  @include decorator.decorator();
+  @include center.center();
+  @include cluster.cluster();
+  @include container.container();
+  @include cover.cover();
+  @include float.float();
+  @include frame.frame();
+  @include layers.layers();
+  @include responsive-grid.responsive-grid();
+  @include gutters.gutters();
+  @include stack.stack();
+  @include switcher.switcher();
+  @include text.text();
+  @include with-sidebar.with-sidebar();
+}

package/src/layout-primitives/both-sides/BothSides.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const BothSides = ({ gap, alignItems, style, ...props }) => {
+  style = {
+    ...style,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'both-sides',
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+        'undefined' !== typeof alignItems ? `-align-items:${alignItems}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/both-sides/README.md

@@ -0,0 +1,54 @@
+## Usage
+
+```html
+<div data-unitone-layout="both-sides">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</div>
+```
+
+### Customizing gap
+
+```html
+<div data-unitone-layout="both-sides -gap:1">
+  ...
+</div>
+```
+
+### Customizing align
+
+```html
+<ul data-unitone-layout="both-sides -align-items:center">
+  ...
+</ul>
+```
+
+### Customizing item max-width
+
+```html
+<div data-unitone-layout="both-sides">
+  <p style="--unitone--content-max-width: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</div>
+```
+
+### Customizing item width
+
+```html
+<div data-unitone-layout="both-sides">
+  <p style="--unitone--content-width: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</div>
+```