nightshade 0.2.0 → 1.0.0-1

package/dist/nightshade.css

@@ -0,0 +1 @@
+:root{--sp: 8px;--sp0-5: calc(.5 * var(--sp));--sp1: var(--sp);--sp1-5: calc(1.5 * var(--sp));--sp2: calc(2 * var(--sp));--sp2-5: calc(2.5 * var(--sp));--sp3: calc(3 * var(--sp));--sp4: calc(4 * var(--sp));--sp5: calc(5 * var(--sp));--sp6: calc(6 * var(--sp));--sp7: calc(7 * var(--sp));--sp8: calc(8 * var(--sp));--sp9: calc(9 * var(--sp));--sp10: calc(10 * var(--sp));--sp12: calc(12 * var(--sp));--sp16: calc(16 * var(--sp));--sp24: calc(24 * var(--sp));--sp32: calc(32 * var(--sp))}:root{--font-main: sans-serif;--font-monospace: monospace;--font-size: 16px;--font-size-small: 14px;--font-size-smaller: 12px;--font-size-large: 18px;--font-size-larger: 20px;--font-weight: 400;--font-weight-bold: 500;--line-height: 1.5em}:root{--color-base-0: hsl(280deg, 10%, 100%);--color-base-1: hsl(280deg, 10%, 96%);--color-base-2: hsl(280deg, 10%, 92%);--color-base-3: hsl(280deg, 10%, 88%);--color-base-4: hsl(280deg, 10%, 80%);--color-text-0: hsl(280deg, 10%, 20%);--color-text-1: hsl(280deg, 10%, 48%);--color-text-2: hsl(280deg, 10%, 64%);--color-text-3: hsl(280deg, 10%, 72%);--color-text-4: hsl(280deg, 10%, 78%);--color-default: var(--color-text-0);--color-default-0: var(--color-base-0);--color-default-1: var(--color-base-1);--color-default-2: var(--color-base-2);--color-default-3: var(--color-base-3);--color-default-4: var(--color-base-4);--color-default-text: var(--color-text-0);--color-default-surface-top: var(--color-default-1);--color-default-surface-bottom: var(--color-default-3);--color-default-focus: var(--color-primary-focus);--color-default-outline: var(--color-default-2);--color-default-shadow: var(--color-default-4);--color-primary: var(--color-primary-2);--color-primary-0: hsl(310deg, 64%, 75%);--color-primary-1: hsl(310deg, 64%, 64%);--color-primary-2: hsl(310deg, 64%, 50%);--color-primary-3: hsl(310deg, 64%, 44%);--color-primary-4: hsl(310deg, 64%, 36%);--color-primary-text: #fff;--color-primary-surface-top: var(--color-primary-1);--color-primary-surface-bottom: var(--color-primary-3);--color-primary-focus: var(--color-primary-0);--color-primary-outline: var(--color-primary-2);--color-primary-shadow: var(--color-primary-4);--color-secondary: var(--color-secondary-2);--color-secondary-0: hsl(290deg, 50%, 75%);--color-secondary-1: hsl(290deg, 50%, 64%);--color-secondary-2: hsl(290deg, 50%, 50%);--color-secondary-3: hsl(290deg, 50%, 44%);--color-secondary-4: hsl(290deg, 50%, 36%);--color-secondary-text: #fff;--color-secondary-surface-top: var(--color-secondary-1);--color-secondary-surface-bottom: var(--color-secondary-3);--color-secondary-focus: var(--color-secondary-0);--color-secondary-outline: var(--color-secondary-2);--color-secondary-shadow: var(--color-secondary-4);--color-tertiary: var(--color-tertiary-2);--color-tertiary-0: hsl(176deg, 50%, 78%);--color-tertiary-1: hsl(176deg, 50%, 72%);--color-tertiary-2: hsl(176deg, 50%, 50%);--color-tertiary-3: hsl(176deg, 50%, 44%);--color-tertiary-4: hsl(176deg, 50%, 36%);--color-tertiary-text: #fff;--color-tertiary-surface-top: var(--color-tertiary-1);--color-tertiary-surface-bottom: var(--color-tertiary-3);--color-tertiary-focus: var(--color-tertiary-0);--color-tertiary-outline: var(--color-tertiary-2);--color-tertiary-shadow: var(--color-tertiary-4);--color-success: var(--color-success-2);--color-success-0: hsl(96deg, 60%, 76%);--color-success-1: hsl(96deg, 60%, 68%);--color-success-2: hsl(96deg, 60%, 50%);--color-success-3: hsl(96deg, 60%, 44%);--color-success-4: hsl(96deg, 60%, 36%);--color-success-text: #fff;--color-success-surface-top: var(--color-success-1);--color-success-surface-bottom: var(--color-success-3);--color-success-focus: var(--color-success-0);--color-success-outline: var(--color-success-2);--color-success-shadow: var(--color-success-4);--color-warning: var(--color-warning-3);--color-warning-0: hsl(48deg, 88%, 85%);--color-warning-1: hsl(48deg, 88%, 80%);--color-warning-2: hsl(48deg, 88%, 60%);--color-warning-3: hsl(48deg, 88%, 48%);--color-warning-4: hsl(48deg, 88%, 40%);--color-warning-text: #000;--color-warning-surface-top: var(--color-warning-1);--color-warning-surface-bottom: var(--color-warning-3);--color-warning-focus: var(--color-warning-0);--color-warning-outline: var(--color-warning-2);--color-warning-shadow: var(--color-warning-4);--color-danger: var(--color-danger-2);--color-danger-0: hsl(350deg, 88%, 75%);--color-danger-1: hsl(350deg, 88%, 64%);--color-danger-2: hsl(350deg, 88%, 50%);--color-danger-3: hsl(350deg, 88%, 44%);--color-danger-4: hsl(350deg, 88%, 32%);--color-danger-text: #fff;--color-danger-surface-top: var(--color-danger-1);--color-danger-surface-bottom: var(--color-danger-3);--color-danger-focus: var(--color-danger-0);--color-danger-outline: var(--color-danger-2);--color-danger-shadow: var(--color-danger-4)}.Theme-dark{--color-base-0: hsl(280deg, 5%, 16%);--color-base-1: hsl(280deg, 5%, 20%);--color-base-2: hsl(280deg, 5%, 24%);--color-base-3: hsl(280deg, 5%, 27%);--color-base-4: hsl(280deg, 5%, 32%);--color-text-0: hsl(280deg, 10%, 96%);--color-text-1: hsl(280deg, 10%, 72%);--color-text-2: hsl(280deg, 10%, 50%);--color-text-3: hsl(280deg, 10%, 44%);--color-text-4: hsl(280deg, 10%, 40%);--color-default-0: var(--color-base-4);--color-default-1: var(--color-base-3);--color-default-2: var(--color-base-2);--color-default-3: var(--color-base-1);--color-default-4: var(--color-base-0)}:root{--background-color: var(--color-base-0);--text-color: var(--color-text-0);--link-color: var(--color-primary-2);--link-color-hover: var(--color-primary-1);--code-color: var(--color-secondary);--color-subtle: var(--color-text-1);--color-sublime: var(--color-text-2);--border-radius: var(--sp2);--border-radius-small: var(--sp);--border-radius-large: var(--sp4);--input-size: var(--sp4);--input-size-small: var(--sp3);--input-size-smaller: var(--sp2);--input-size-large: var(--sp5);--input-size-larger: var(--sp6);--color-overlay-backdrop: rgba(0,0,0,.08);--color-overlay-shadow: rgba(0,0,0,.15)}.Theme-dark{--color-overlay-backdrop: rgba(255,255,255,.04)}*{box-sizing:border-box}html,body,img,form{margin:0;padding:0;border:0}html{font-size:var(--font-size);font-family:var(--font-main);font-weight:var(--font-weight);line-height:var(--line-height);color:var(--text-color);background:var(--background-color);text-rendering:optimizeLegibility}a{color:var(--link-color);text-decoration:none;cursor:pointer}a:hover{color:var(--link-color-hover)}button,input,textarea{font-family:inherit;font-size:inherit}input[type=checkbox]{cursor:pointer}h1{font-weight:var(--font-weight-bold);font-size:32px;line-height:32px;margin:var(--sp3) 0}h2{font-weight:var(--font-weight);font-size:28px;line-height:28px;margin:var(--sp2) 0}h3{font-size:24px;line-height:24px;font-weight:var(--font-weight-bold);margin:var(--sp2) 0}h4{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);line-height:var(--sp2);margin:var(--sp) 0}h5,h6{font-size:var(--font-size-small);font-weight:var(--font-weight);color:var(--color-text-1);text-transform:uppercase;margin:var(--sp) 0}strong{font-weight:var(--font-weight-bold)}kbd{position:relative;display:inline-block;text-align:center;border:1px solid var(--color-base-2);border-bottom-width:2px;border-bottom-color:var(--color-base-3);height:1.5em;min-width:1.5em;padding:0 .25em;margin:0 2px;border-radius:4px;font:inherit;background:var(--color-base-0);background:radial-gradient(100% 100% at 100% 0%,var(--color-base-0) 0%,var(--color-base-1) 100%)}kbd:after{content:"";position:absolute;z-index:-1;top:2px;bottom:-4px;left:-3px;right:-3px;border-radius:var(--border-radius-small);border:1px solid var(--color-base-4)}code{font:12px/1.4 var(--font-monospace)}:not(pre)>code{color:var(--code-color);white-space:nowrap}pre{line-height:1.2em;white-space:pre-wrap}.color-primary{color:var(--color-primary)}.color-secondary{color:var(--color-secondary)}.color-tertiary{color:var(--color-tertiary)}.color-success{color:var(--color-success)}.color-warning{color:var(--color-warning)}.color-danger{color:var(--color-danger)}.color-subtle{color:var(--color-subtle)}.color-sublime{color:var(--color-sublime)}.pad-0{padding:0}.pad-1{padding:var(--sp1)}.pad-2{padding:var(--sp2)}.pad-3{padding:var(--sp3)}.pad-4{padding:var(--sp4)}.pad-5{padding:var(--sp5)}.pad-6{padding:var(--sp6)}.pad-x0{padding-left:0;padding-right:0}.pad-x1{padding-left:var(--sp1);padding-right:var(--sp1)}.pad-x2{padding-left:var(--sp2);padding-right:var(--sp2)}.pad-x3{padding-left:var(--sp3);padding-right:var(--sp3)}.pad-x4{padding-left:var(--sp4);padding-right:var(--sp4)}.pad-x5{padding-left:var(--sp5);padding-right:var(--sp5)}.pad-x6{padding-left:var(--sp6);padding-right:var(--sp6)}.pad-y0{padding-top:0;padding-bottom:0}.pad-y1{padding-top:var(--sp1);padding-bottom:var(--sp1)}.pad-y2{padding-top:var(--sp2);padding-bottom:var(--sp2)}.pad-y3{padding-top:var(--sp3);padding-bottom:var(--sp3)}.pad-y4{padding-top:var(--sp4);padding-bottom:var(--sp4)}.pad-y5{padding-top:var(--sp5);padding-bottom:var(--sp5)}.pad-y6{padding-top:var(--sp6);padding-bottom:var(--sp6)}.pad-l0{padding-left:0}.pad-l1{padding-left:var(--sp1)}.pad-l2{padding-left:var(--sp2)}.pad-l3{padding-left:var(--sp3)}.pad-l4{padding-left:var(--sp4)}.pad-l5{padding-left:var(--sp5)}.pad-l6{padding-left:var(--sp6)}.pad-r0{padding-right:0}.pad-r1{padding-right:var(--sp1)}.pad-r2{padding-right:var(--sp2)}.pad-r3{padding-right:var(--sp3)}.pad-r4{padding-right:var(--sp4)}.pad-r5{padding-right:var(--sp5)}.pad-r6{padding-right:var(--sp6)}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.flex-5{flex:5}.flex-6{flex:6}.flex-7{flex:7}.flex-8{flex:8}.flex-9{flex:9}.flex-10{flex:10}.flex-11{flex:11}.flex-12{flex:12}.input-clear{display:block;width:100%;border:0;outline:0;background:none}.input-mono{font:12px/1.4 var(--font-monospace)}.text-small{font-size:var(--font-size-small)}.text-large{font-size:var(--font-size-large)}.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}.fade-scale-enter-active,.fade-scale-leave-active{transition:opacity .5s,transform .5s}.fade-scale-enter-from{transform:scale(.75);opacity:0}.fade-scale-leave-to{transform:scale(1.25);opacity:0}.fade-squash-enter-active,.fade-squash-leave-active{transition:opacity .25s,transform .25s}.fade-squash-enter-from,.fade-squash-leave-to{transform:scale(10,.1);opacity:0}.fade-swipe-enter-active,.fade-swipe-leave-active{transition:opacity .25s,transform .25s}.fade-swipe-enter-from{transform:translate(-96px,-32px);opacity:0}.fade-swipe-leave-to{transform:translate(96px,-32px);opacity:0}.fade-shove-enter-active,.fade-shove-leave-active{transition:opacity .3s,transform .3s}.fade-shove-enter-from{opacity:0}.fade-shove-leave-to{transform:translate(16px,-16px) scale(.95);opacity:0}.fade-left-enter-active,.fade-left-leave-active,.fade-right-enter-active,.fade-right-leave-active,.fade-top-enter-active,.fade-top-leave-active,.fade-bottom-enter-active,.fade-bottom-leave-active{transition:opacity .25s,transform .25s}.fade-left-enter-from,.fade-left-leave-to,.fade-right-enter-from,.fade-right-leave-to,.fade-top-enter-from,.fade-top-leave-to,.fade-bottom-enter-from,.fade-bottom-leave-to{opacity:0}.fade-left-enter-from,.fade-left-leave-to{transform:translate(16px)}.fade-right-enter-from,.fade-right-leave-to{transform:translate(-16px)}.fade-top-enter-from,.fade-top-leave-to{transform:translateY(16px)}.fade-bottom-enter-from,.fade-bottom-leave-to{transform:translateY(-16px)}.Btn[data-v-68eb9336]{--Btn-padding: var(--sp1-5);--Btn-size: var(--input-size);--Btn-text-color: inherit;--Btn-outline-color: transparent;--Btn-outline-color-effective: transparent;--Btn-outline-color-focus: var(--color-primary);--Btn-surface-top: transparent;--Btn-surface-bottom: transparent;--Btn-shadow-color: transparent;-webkit-appearance:none;position:relative;z-index:1;margin:0;padding:0 var(--Btn-padding);height:var(--Btn-size);line-height:var(--Btn-size);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:var(--sp);border:0;border-radius:var(--border-radius-small);cursor:pointer;font:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;color:var(--Btn-text-color);outline:2px solid var(--Btn-outline-color-effective);background:radial-gradient(120% 150% at 80% 0%,var(--Btn-surface-top),var(--Btn-surface-bottom));background-clip:padding-box;box-shadow:0 1px 1px var(--Btn-shadow-color);transition:color .3s,outline .3s,filter .3s,border-radius .3s}.Btn[data-v-68eb9336]:focus,.Btn[data-v-68eb9336]:active,.Btn[data-v-68eb9336]:hover{transition:none}.Btn[data-v-68eb9336]:not(:disabled):hover,.Btn.Btn-pseudo-hover[data-v-68eb9336]{filter:brightness(1.07)}.Btn[data-v-68eb9336]:not(:disabled):focus,.Btn.Btn-pseudo-focus[data-v-68eb9336]{z-index:10;--Btn-outline-color-effective: var(--Btn-outline-color-focus)}.Btn[data-v-68eb9336]:not(:disabled):active,.Btn.Btn-pseudo-active[data-v-68eb9336]{padding-top:1px;box-shadow:0 6px 12px #00000014 inset,0 1px 2px #0000001f inset}.Label[data-v-68eb9336]{line-height:var(--Btn-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Icon[data-v-68eb9336]{width:var(--sp2);display:flex;align-items:center;justify-content:center}.Btn-square[data-v-68eb9336]{padding-left:0;padding-right:0;width:var(--Btn-size);justify-content:center}.Btn-round[data-v-68eb9336]{border-radius:var(--border-radius-large)}.Btn-disabled[data-v-68eb9336]{opacity:.64;filter:saturate(40%);cursor:not-allowed}.Btn-block[data-v-68eb9336]{flex:1 1 auto;display:flex;justify-content:center}.Btn-outline[data-v-68eb9336]{--Btn-outline-color-effective: var(--Btn-outline-color)}.Btn-large[data-v-68eb9336]{--Btn-size: var(--input-size-large);--Btn-padding: var(--sp2);font-size:var(--font-size-large)}.Btn-small[data-v-68eb9336]{--Btn-size: var(--input-size-small);--Btn-padding: var(--sp);font-size:var(--font-size-small)}.Btn-small .Icon[data-v-68eb9336]{font-size:var(--font-size-small)}.Btn-iconPos-right .Icon[data-v-68eb9336]{order:100}.Btn-default[data-v-68eb9336]{--Btn-text-color: var(--color-default-text);--Btn-surface-top: var(--color-default-surface-top);--Btn-surface-bottom: var(--color-default-surface-bottom);--Btn-surface-top-hover: var(--color-default-surface-top-hover);--Btn-surface-bottom-hover: var(--color-default-surface-bottom-hover);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus);--Btn-shadow-color: var(--color-default-shadow)}.Btn-primary[data-v-68eb9336]{--Btn-text-color: var(--color-primary-text);--Btn-surface-top: var(--color-primary-surface-top);--Btn-surface-bottom: var(--color-primary-surface-bottom);--Btn-surface-top-hover: var(--color-primary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-primary-surface-bottom-hover);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus);--Btn-shadow-color: var(--color-primary-shadow)}.Btn-secondary[data-v-68eb9336]{--Btn-text-color: var(--color-secondary-text);--Btn-surface-top: var(--color-secondary-surface-top);--Btn-surface-bottom: var(--color-secondary-surface-bottom);--Btn-surface-top-hover: var(--color-secondary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-secondary-surface-bottom-hover);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus);--Btn-shadow-color: var(--color-secondary-shadow)}.Btn-tertiary[data-v-68eb9336]{--Btn-text-color: var(--color-tertiary-text);--Btn-surface-top: var(--color-tertiary-surface-top);--Btn-surface-bottom: var(--color-tertiary-surface-bottom);--Btn-surface-top-hover: var(--color-tertiary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-tertiary-surface-bottom-hover);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus);--Btn-shadow-color: var(--color-tertiary-shadow)}.Btn-success[data-v-68eb9336]{--Btn-text-color: var(--color-success-text);--Btn-surface-top: var(--color-success-surface-top);--Btn-surface-bottom: var(--color-success-surface-bottom);--Btn-surface-top-hover: var(--color-success-surface-top-hover);--Btn-surface-bottom-hover: var(--color-success-surface-bottom-hover);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus);--Btn-shadow-color: var(--color-success-shadow)}.Btn-warning[data-v-68eb9336]{--Btn-text-color: var(--color-warning-text);--Btn-surface-top: var(--color-warning-surface-top);--Btn-surface-bottom: var(--color-warning-surface-bottom);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus);--Btn-shadow-color: var(--color-warning-shadow)}.Btn-danger[data-v-68eb9336]{--Btn-text-color: var(--color-danger-text);--Btn-surface-top: var(--color-danger-surface-top);--Btn-surface-bottom: var(--color-danger-surface-bottom);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus);--Btn-shadow-color: var(--color-danger-shadow)}.Btn-link-default[data-v-68eb9336]{--Btn-text-color: var(--color-default);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus)}.Btn-link-primary[data-v-68eb9336]{--Btn-text-color: var(--color-primary);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus)}.Btn-link-secondary[data-v-68eb9336]{--Btn-text-color: var(--color-secondary);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus)}.Btn-link-tertiary[data-v-68eb9336]{--Btn-text-color: var(--color-tertiary);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus)}.Btn-link-success[data-v-68eb9336]{--Btn-text-color: var(--color-success);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus)}.Btn-link-warning[data-v-68eb9336]{--Btn-text-color: var(--color-warning);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus)}.Btn-link-danger[data-v-68eb9336]{--Btn-text-color: var(--color-danger);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus)}.Circle[data-v-48fdb4ac]{--CircleSize: var(--sp2);width:var(--CircleSize);height:var(--CircleSize);border-radius:var(--CircleSize);box-shadow:0 1px 3px #00000040}.Circle-normal[data-v-48fdb4ac]{--CircleSize: var(--sp2) }.Circle-large[data-v-48fdb4ac]{--CircleSize: var(--sp4) }.Circle-larger[data-v-48fdb4ac]{--CircleSize: var(--sp6) }.HGroup[data-v-0129c1cb]{display:flex;flex-flow:row nowrap}.HGroup-align-stretch[data-v-0129c1cb]{align-items:stretch}.HGroup-align-baseline[data-v-0129c1cb]{align-items:baseline}.HGroup-align-center[data-v-0129c1cb]{align-items:center}.HGroup-align-start[data-v-0129c1cb]{align-items:flex-start}.HGroup-align-end[data-v-0129c1cb]{align-items:flex-end}.HGroup-justify-center[data-v-0129c1cb]{justify-content:center}.HGroup-justify-start[data-v-0129c1cb]{justify-content:flex-start}.HGroup-justify-end[data-v-0129c1cb]{justify-content:flex-end}.HGroup-justify-space-around[data-v-0129c1cb]{justify-content:space-around}.HGroup-justify-space-between[data-v-0129c1cb]{justify-content:space-between}.HGroup-gap-0[data-v-0129c1cb]{gap:0}.HGroup-gap-1[data-v-0129c1cb]{gap:var(--sp)}.HGroup-gap-2[data-v-0129c1cb]{gap:var(--sp2)}.HGroup-gap-3[data-v-0129c1cb]{gap:var(--sp3)}.HStack[data-v-48a370d0]{display:flex;align-items:stretch}.HStack[data-v-48a370d0]>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.HStack[data-v-48a370d0]>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.Sizer[data-v-2f099547]{flex:1;min-width:0;min-height:0}.VGroup[data-v-dac034b8]{display:flex;flex-flow:column nowrap}.VGroup-align-stretch[data-v-dac034b8]{align-items:stretch}.VGroup-align-baseline[data-v-dac034b8]{align-items:baseline}.VGroup-align-center[data-v-dac034b8]{align-items:center}.VGroup-align-start[data-v-dac034b8]{align-items:flex-start}.VGroup-align-end[data-v-dac034b8]{align-items:flex-end}.VGroup-justify-center[data-v-dac034b8]{justify-content:center}.VGroup-justify-start[data-v-dac034b8]{justify-content:flex-start}.VGroup-justify-end[data-v-dac034b8]{justify-content:flex-end}.VGroup-justify-space-around[data-v-dac034b8]{justify-content:space-around}.VGroup-justify-space-between[data-v-dac034b8]{justify-content:space-between}.VGroup-gap-0[data-v-dac034b8]{gap:0}.VGroup-gap-1[data-v-dac034b8]{gap:var(--sp)}.VGroup-gap-2[data-v-dac034b8]{gap:var(--sp2)}.VGroup-gap-3[data-v-dac034b8]{gap:var(--sp3)}.VGroup-gap-4[data-v-dac034b8]{gap:var(--sp4)}

package/dist/nightshade.js

@@ -0,0 +1,186 @@
+var v = Object.defineProperty;
+var a = (t, n) => v(t, "name", { value: n, configurable: !0 });
+import { openBlock as s, createBlock as p, resolveDynamicComponent as g, normalizeClass as c, withCtx as y, renderSlot as d, createElementBlock as u, createCommentVNode as _, toDisplayString as b } from "vue";
+const r = /* @__PURE__ */ a((t, n) => {
+  const e = t.__vccOpts || t;
+  for (const [i, o] of n)
+    e[i] = o;
+  return e;
+}, "_export_sfc"), h = {
+  props: {
+    label: { type: String },
+    title: { type: String },
+    icon: { type: String },
+    iconPos: { type: String, default: "left" },
+    kind: { type: String, default: "link-default" },
+    hoverKind: { type: String },
+    customTag: { type: String },
+    href: { type: String },
+    debounce: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: !1 },
+    size: { type: String, default: "normal" },
+    square: { type: Boolean, default: !1 },
+    block: { type: Boolean, default: !1 },
+    round: { type: Boolean, default: !1 },
+    outline: { type: Boolean, default: !1 },
+    pseudoFocus: { type: Boolean, default: !1 },
+    pseudoHover: { type: Boolean, default: !1 },
+    pseudoActive: { type: Boolean, default: !1 }
+  },
+  data() {
+    return {
+      hover: !1,
+      blocked: !1
+    };
+  },
+  computed: {
+    tagName() {
+      return this.customTag ?? "button";
+    },
+    actualKind() {
+      const { kind: t, hoverKind: n, hover: e } = this;
+      return e ? n ?? t : t;
+    }
+  },
+  methods: {
+    onUiActivate() {
+      this.debounce > 0 && (this.blocked = !0, setTimeout(() => {
+        this.blocked = !1;
+      }, this.debounce));
+    }
+  }
+}, m = {
+  key: 0,
+  class: "Label"
+};
+function B(t, n, e, i, o, l) {
+  return s(), p(g(l.tagName), {
+    ref: "button",
+    class: c(["Btn button", [
+      `Btn-${e.size}`,
+      `Btn-${l.actualKind}`,
+      `Btn-iconPos-${e.iconPos}`,
+      {
+        "Btn-disabled": e.disabled || o.blocked,
+        "Btn-square": e.square,
+        "Btn-round": e.round,
+        "Btn-outline": e.outline,
+        "Btn-block": e.block,
+        "Btn-pseudo-focus": e.pseudoFocus,
+        "Btn-pseudo-hover": e.pseudoHover,
+        "Btn-pseudo-active": e.pseudoActive
+      }
+    ]]),
+    disabled: e.disabled || o.blocked,
+    title: e.title ?? e.label,
+    href: e.href,
+    onUiactivate: n[0] || (n[0] = (f) => l.onUiActivate(f)),
+    onMouseenter: n[1] || (n[1] = (f) => o.hover = !0),
+    onMouseleave: n[2] || (n[2] = (f) => o.hover = !1)
+  }, {
+    default: y(() => [
+      d(t.$slots, "icon", {
+        hover: o.hover,
+        blocked: o.blocked
+      }, () => [
+        e.icon ? (s(), u("i", {
+          key: 0,
+          class: c([e.icon, "Icon"])
+        }, null, 2)) : _("", !0)
+      ], !0),
+      e.label ? (s(), u("span", m, b(e.label), 1)) : _("", !0),
+      d(t.$slots, "default", {
+        hover: o.hover,
+        blocked: o.blocked
+      }, void 0, !0)
+    ]),
+    _: 3
+  }, 40, ["class", "disabled", "title", "href"]);
+}
+a(B, "_sfc_render$5");
+const k = /* @__PURE__ */ r(h, [["render", B], ["__scopeId", "data-v-68eb9336"]]), S = {
+  props: {
+    size: { type: String, default: "normal" }
+  }
+};
+function $(t, n, e, i, o, l) {
+  return s(), u("div", {
+    class: c(["Circle", [
+      `Circle-${e.size}`
+    ]])
+  }, [
+    d(t.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+a($, "_sfc_render$4");
+const G = /* @__PURE__ */ r(S, [["render", $], ["__scopeId", "data-v-48fdb4ac"]]), H = {
+  props: {
+    tagName: { type: String, default: "div" },
+    align: { type: String, default: "center" },
+    justify: { type: String },
+    gap: { type: String, default: "1" }
+  }
+};
+function z(t, n, e, i, o, l) {
+  return s(), p(g(e.tagName), {
+    class: c(["HGroup", [
+      `HGroup-align-${e.align}`,
+      `HGroup-justify-${e.justify}`,
+      `HGroup-gap-${e.gap}`
+    ]])
+  }, {
+    default: y(() => [
+      d(t.$slots, "default", {}, void 0, !0)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+a(z, "_sfc_render$3");
+const C = /* @__PURE__ */ r(H, [["render", z], ["__scopeId", "data-v-0129c1cb"]]), I = {}, j = { class: "HStack" };
+function N(t, n, e, i, o, l) {
+  return s(), u("div", j, [
+    d(t.$slots, "default", {}, void 0, !0)
+  ]);
+}
+a(N, "_sfc_render$2");
+const V = /* @__PURE__ */ r(I, [["render", N], ["__scopeId", "data-v-48a370d0"]]), A = {}, K = { class: "Sizer" };
+function q(t, n) {
+  return s(), u("div", K);
+}
+a(q, "_sfc_render$1");
+const x = /* @__PURE__ */ r(A, [["render", q], ["__scopeId", "data-v-2f099547"]]), P = {
+  props: {
+    align: { type: String, default: "stretch" },
+    justify: { type: String },
+    gap: { type: String, default: "1" }
+  }
+};
+function T(t, n, e, i, o, l) {
+  return s(), u("div", {
+    class: c(["VGroup", [
+      `VGroup-align-${e.align}`,
+      `VGroup-justify-${e.justify}`,
+      `VGroup-gap-${e.gap}`
+    ]])
+  }, [
+    d(t.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+a(T, "_sfc_render");
+const U = /* @__PURE__ */ r(P, [["render", T], ["__scopeId", "data-v-dac034b8"]]), M = {
+  Btn: k,
+  Circle: G,
+  HGroup: C,
+  HStack: V,
+  Sizer: x,
+  VGroup: U
+};
+export {
+  k as Btn,
+  G as Circle,
+  C as HGroup,
+  V as HStack,
+  x as Sizer,
+  U as VGroup,
+  M as components
+};

package/package.json

@@ -1,27 +1,34 @@
 {
-  "name": "nightshade",
-  "version": "0.2.0",
-  "description": "CSS framework foundation",
-  "scripts": {
-    "dev": "stylus -w -o assets/site.css -u autoprefixer-stylus assets/site.styl",
-    "build": "stylus -c -o assets/site.css -u autoprefixer-stylus assets/site.styl",
-    "version": "npm run build && git add -A"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/inca/nightshade.git"
-  },
-  "keywords": [
-    "css"
-  ],
-  "author": "Boris Okunskiy",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/inca/nightshade/issues"
-  },
-  "homepage": "https://inca.github.io/nightshade",
-  "devDependencies": {
-    "autoprefixer-stylus": "^0.9.4",
-    "stylus": "^0.54.5"
-  }
+    "name": "nightshade",
+    "version": "1.0.0-1",
+    "description": "Vue UI library & design system",
+    "type": "module",
+    "exports": {
+        ".": "./dist/nightshade.js",
+        "./stylesheets.css": "./dist/nightshade.css",
+        "./stylesheets/*": "./stylesheets/*"
+    },
+    "files": [
+        "dist",
+        "stylesheets"
+    ],
+    "scripts": {
+        "dev": "vite --host",
+        "build": "NODE_ENV=production vite build",
+        "prepublish": "npm run build",
+        "postpublish": "git push origin main --tags"
+    },
+    "author": "Boris Okunskiy",
+    "license": "ISC",
+    "peerDependencies": {
+        "vue": "^3.5.13"
+    },
+    "devDependencies": {
+        "@nodescript/eslint-config": "^2.0.3",
+        "@types/node": "^22.10.5",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "eslint": "^9.17.0",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.7"
+    }
 }

package/stylesheets/base.css

@@ -0,0 +1,142 @@
+* {
+    box-sizing: border-box;
+}
+
+html,
+body,
+img,
+form {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+html {
+    font-size: var(--font-size);
+    font-family: var(--font-main);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+
+    color: var(--text-color);
+    background: var(--background-color);
+
+    text-rendering: optimizeLegibility;
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+a:hover {
+    color: var(--link-color-hover);
+}
+
+button,
+input,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+input[type="checkbox"] {
+    cursor: pointer;
+}
+
+h1 {
+    font-weight: var(--font-weight-bold);
+    font-size: 32px;
+    line-height: 32px;
+    margin: var(--sp3) 0;
+}
+
+h2 {
+    font-weight: var(--font-weight);
+    font-size: 28px;
+    line-height: 28px;
+    margin: var(--sp2) 0;
+}
+
+h3 {
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: var(--font-weight-bold);
+    margin: var(--sp2) 0;
+}
+
+h4 {
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--sp2);
+    margin: var(--sp) 0;
+}
+
+h5 {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight);
+    color: var(--color-text-1);
+    text-transform: uppercase;
+    margin: var(--sp) 0;
+}
+
+h6 {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight);
+    color: var(--color-text-1);
+    text-transform: uppercase;
+    margin: var(--sp) 0;
+}
+
+strong {
+    font-weight: var(--font-weight-bold);
+}
+
+kbd {
+    position: relative;
+
+    display: inline-block;
+    text-align: center;
+
+    border: 1px solid var(--color-base-2);
+    border-bottom-width: 2px;
+    border-bottom-color: var(--color-base-3);
+    height: 1.5em;
+    min-width: 1.5em;
+    padding: 0 .25em;
+    margin: 0 2px;
+    border-radius: 4px;
+
+    font: inherit;
+    background: var(--color-base-0);
+    background: radial-gradient(
+        100% 100% at 100% 0%,
+        var(--color-base-0) 0%,
+        var(--color-base-1) 100%);
+}
+
+kbd::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 2px;
+    bottom: -4px;
+    left: -3px;
+    right: -3px;
+    border-radius: var(--border-radius-small);
+    border: 1px solid var(--color-base-4);
+}
+
+code {
+    font: 12px/1.4 var(--font-monospace)
+}
+
+:not(pre) > code {
+    color: var(--code-color);
+    white-space: nowrap;
+}
+
+pre {
+    line-height: 1.2em;
+    white-space: pre-wrap;
+}

package/stylesheets/index.css

@@ -0,0 +1,8 @@
+@import './vars/spacing.css';
+@import './vars/typography.css';
+@import './vars/color-tokens.css';
+@import './vars/commons.css';
+
+@import './base.css';
+@import './util.css';
+@import './transitions.css';

package/stylesheets/transitions.css

@@ -0,0 +1,106 @@
+/* Fade */
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* Fade Scale */
+
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+    transition: opacity .5s, transform .5s;
+}
+
+.fade-scale-enter-from {
+    transform: scale(.75);
+    opacity: 0;
+}
+
+.fade-scale-leave-to {
+    transform: scale(1.25);
+    opacity: 0;
+}
+
+/* Fade Squash */
+
+.fade-squash-enter-active,
+.fade-squash-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-squash-enter-from,
+.fade-squash-leave-to {
+    transform: scale(10, .1);
+    opacity: 0;
+}
+
+/* Fade Swipe */
+
+.fade-swipe-enter-active,
+.fade-swipe-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-swipe-enter-from {
+    transform: translate(-96px, -32px);
+    opacity: 0;
+}
+
+.fade-swipe-leave-to {
+    transform: translate(96px, -32px);
+    opacity: 0;
+}
+
+/* Fade Shove */
+
+.fade-shove-enter-active,
+.fade-shove-leave-active {
+    transition: opacity .3s, transform .3s;
+}
+
+.fade-shove-enter-from {
+    opacity: 0;
+}
+
+.fade-shove-leave-to {
+    transform: translate(16px, -16px) scale(.95);
+    opacity: 0;
+}
+
+/* Fade + Directional slide */
+
+.fade-left-enter-active, .fade-left-leave-active,
+.fade-right-enter-active, .fade-right-leave-active,
+.fade-top-enter-active, .fade-top-leave-active,
+.fade-bottom-enter-active, .fade-bottom-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-left-enter-from, .fade-left-leave-to,
+.fade-right-enter-from, .fade-right-leave-to,
+.fade-top-enter-from, .fade-top-leave-to,
+.fade-bottom-enter-from , .fade-bottom-leave-to {
+    opacity: 0;
+}
+
+.fade-left-enter-from, .fade-left-leave-to {
+    transform: translate(16px, 0);
+}
+
+.fade-right-enter-from, .fade-right-leave-to {
+    transform: translate(-16px, 0);
+}
+
+.fade-top-enter-from, .fade-top-leave-to {
+    transform: translate(0, 16px);
+}
+
+.fade-bottom-enter-from, .fade-bottom-leave-to {
+    transform: translate(0, -16px);
+}

package/stylesheets/util.css

@@ -0,0 +1,82 @@
+.color-primary { color: var(--color-primary) }
+.color-secondary { color: var(--color-secondary) }
+.color-tertiary { color: var(--color-tertiary) }
+.color-success { color: var(--color-success) }
+.color-warning { color: var(--color-warning) }
+.color-danger { color: var(--color-danger) }
+.color-subtle { color: var(--color-subtle) }
+.color-sublime { color: var(--color-sublime) }
+
+.pad-0 { padding: 0 }
+.pad-1 { padding: var(--sp1) }
+.pad-2 { padding: var(--sp2) }
+.pad-3 { padding: var(--sp3) }
+.pad-4 { padding: var(--sp4) }
+.pad-5 { padding: var(--sp5) }
+.pad-6 { padding: var(--sp6) }
+
+.pad-x0 { padding-left: 0; padding-right: 0; }
+.pad-x1 { padding-left: var(--sp1); padding-right: var(--sp1); }
+.pad-x2 { padding-left: var(--sp2); padding-right: var(--sp2); }
+.pad-x3 { padding-left: var(--sp3); padding-right: var(--sp3); }
+.pad-x4 { padding-left: var(--sp4); padding-right: var(--sp4); }
+.pad-x5 { padding-left: var(--sp5); padding-right: var(--sp5); }
+.pad-x6 { padding-left: var(--sp6); padding-right: var(--sp6); }
+
+.pad-y0 { padding-top: 0; padding-bottom: 0; }
+.pad-y1 { padding-top: var(--sp1); padding-bottom: var(--sp1); }
+.pad-y2 { padding-top: var(--sp2); padding-bottom: var(--sp2); }
+.pad-y3 { padding-top: var(--sp3); padding-bottom: var(--sp3); }
+.pad-y4 { padding-top: var(--sp4); padding-bottom: var(--sp4); }
+.pad-y5 { padding-top: var(--sp5); padding-bottom: var(--sp5); }
+.pad-y6 { padding-top: var(--sp6); padding-bottom: var(--sp6); }
+
+.pad-l0 { padding-left: 0; }
+.pad-l1 { padding-left: var(--sp1); }
+.pad-l2 { padding-left: var(--sp2); }
+.pad-l3 { padding-left: var(--sp3); }
+.pad-l4 { padding-left: var(--sp4); }
+.pad-l5 { padding-left: var(--sp5); }
+.pad-l6 { padding-left: var(--sp6); }
+
+.pad-r0 { padding-right: 0; }
+.pad-r1 { padding-right: var(--sp1); }
+.pad-r2 { padding-right: var(--sp2); }
+.pad-r3 { padding-right: var(--sp3); }
+.pad-r4 { padding-right: var(--sp4); }
+.pad-r5 { padding-right: var(--sp5); }
+.pad-r6 { padding-right: var(--sp6); }
+
+.flex-1 { flex: 1 }
+.flex-2 { flex: 2 }
+.flex-3 { flex: 3 }
+.flex-4 { flex: 4 }
+.flex-5 { flex: 5 }
+.flex-6 { flex: 6 }
+.flex-7 { flex: 7 }
+.flex-8 { flex: 8 }
+.flex-9 { flex: 9 }
+.flex-10 { flex: 10 }
+.flex-11 { flex: 11 }
+.flex-12 { flex: 12 }
+
+.input-clear {
+    display: block;
+    width: 100%;
+    border: 0;
+    outline: 0;
+    background: none;
+}
+
+.input-mono {
+    font: 12px/1.4 var(--font-monospace);
+}
+
+.text-small { font-size: var(--font-size-small) }
+.text-large { font-size: var(--font-size-large) }
+
+.nowrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}