@graupl/graupl 1.0.0-alpha.0

package/dist/component/button/button.css

@@ -0,0 +1,55 @@
+@layer graupl.component{
+  .button{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    min-width:var(--graupl-button-min-width, 44px);
+    min-height:var(--graupl-button-min-height, 44px);
+    padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
+    transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
+    border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
+    border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
+    border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
+    font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
+    cursor:pointer;
+  }
+  .button:hover{
+    transform:var(--graupl-button-hover-transform, none);
+  }
+  .button:active{
+    transform:var(--graupl-button-active-transform, scale(0.95));
+  }
+}
+@layer graupl.theme{
+  .button{
+    border-color:var(--graupl-button-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+    color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+  }
+  .button:hover{
+    border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+  }
+  .button:active{
+    border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+  }
+  .button.primary{
+    --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+  }
+  .button.secondary{
+    --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+  }
+}
+
+/*# sourceMappingURL=button.css.map */

package/dist/component/button/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8CCJe;IDKf,gDCDgB;IDEhB,+JCOa;IDNb,0cCcgB;IDbhB,+EC4DkB;ID3DlB,iFC+DkB;ID9DlB,uFCkEmB;IDjEnB,+ECMe;IDLf,cAAA;EELF;EFOE;IACE,oDCemB;ECpBvB;EFQE;IACE,4DCeoB;ECrBxB;AACF;AHbI;ECwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;EClCb;EFUE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ECjCnB;EFWE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;EChCpB;EFYE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EEVJ;EFaE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EEXJ;AACF","file":"button.css"}

package/dist/graupl.css

@@ -0,0 +1,171 @@
+@layer graupl.base{
+  a{
+    -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
+            text-decoration:var(--graupl-link-text-decoration, underline);
+    text-decoration-thickness:var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 2px));
+  }
+}
+@layer graupl.theme{
+  a{
+    color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
+  }
+  a:hover{
+    color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
+  }
+  a:active{
+    color:var(--graupl-link-active-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
+  }
+  a:visited{
+    color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
+  }
+  a:visited:hover{
+    color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
+  }
+}
+@layer graupl.layout{
+  .container,
+  .container > .full-width{
+    --graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
+    --graupl-container-content:min(
+      var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
+      calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
+    );
+    --graupl-container-breakout:minmax(
+      0,
+      var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
+    );
+    --graupl-container-feature:minmax(
+      0,
+      var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
+    );
+    display:grid;
+    grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
+  }
+  .container > :not(.breakout, .full-width, .feature),
+  .container > .full-width > :not(.breakout, .full-width, .feature){
+    grid-column:content;
+  }
+  .container .breakout,
+  .container > .full-width .breakout{
+    grid-column:breakout;
+  }
+  .container .feature,
+  .container > .full-width .feature{
+    grid-column:feature;
+  }
+  .container .full-width,
+  .container > .full-width .full-width{
+    grid-column:full-width;
+  }
+}
+@layer graupl.layout{
+  .columns{
+    display:grid;
+    grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
+    gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
+  }
+  .columns-1{
+    --graupl-columns-count:1;
+  }
+  .columns-2{
+    --graupl-columns-count:2;
+  }
+  .columns-3{
+    --graupl-columns-count:3;
+  }
+  .columns-4{
+    --graupl-columns-count:4;
+  }
+  @media screen and (max-width: 48ch){
+    .columns{
+      --graupl-columns-min-width:1fr;
+    }
+  }
+}
+@layer graupl.component{
+  .button{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    min-width:var(--graupl-button-min-width, 44px);
+    min-height:var(--graupl-button-min-height, 44px);
+    padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
+    transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
+    border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
+    border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
+    border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
+    font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
+    cursor:pointer;
+  }
+  .button:hover{
+    transform:var(--graupl-button-hover-transform, none);
+  }
+  .button:active{
+    transform:var(--graupl-button-active-transform, scale(0.95));
+  }
+}
+@layer graupl.theme{
+  .button{
+    border-color:var(--graupl-button-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+    color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+  }
+  .button:hover{
+    border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+  }
+  .button:active{
+    border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
+  }
+  .button.primary{
+    --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+    --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
+  }
+  .button.secondary{
+    --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+    --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
+  }
+}
+@layer graupl.state{
+  *:focus-visible{
+    border-color:transparent;
+    outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
+    box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
+  }
+}
+@layer graupl.theme{
+  :root{
+    background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
+    color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
+    font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
+    font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
+  }
+  .dark-mode{
+    --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
+    --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
+    --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
+    --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
+    --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+    --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+  }
+  .light-mode{
+    --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
+    --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
+    --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
+    --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
+    --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+    --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+  }
+}
+
+/*# sourceMappingURL=graupl.css.map */

package/dist/graupl.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","graupl.css","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss"],"names":[],"mappings":"AASI;ECHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;ECN/B;AACF;AHGI;ECIF;IACE,uJCCS;ECLX;EFME;IACE,mKCEa;ECNjB;EFOE;IACE,oKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,mKCTW;ECGjB;AACF;AHdI;EIFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;EDiBJ;ECTE;;IACE,mBAAA;EDYJ;ECTE;;IACE,oBAAA;EDYJ;ECTE;;IACE,mBAAA;EDYJ;ECTE;;IACE,sBAAA;EDYJ;AACF;AHlDI;EKDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;EH4DZ;EE/CE;IACE,wBAAA;EFiDJ;EElDE;IACE,wBAAA;EFoDJ;EErDE;IACE,wBAAA;EFuDJ;EExDE;IACE,wBAAA;EF0DJ;EErDA;IACE;MACE,8BAAA;IFuDF;EACF;AACF;AH1EI;EODF;IACE,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8CCJe;IDKf,gDCDgB;IDEhB,+JCOa;IDNb,0cCcgB;IDbhB,+EC4DkB;ID3DlB,iFC+DkB;ID9DlB,uFCkEmB;IDjEnB,+ECMe;IDLf,cAAA;EJ8EF;EI5EE;IACE,oDCemB;EL+DvB;EI3EE;IACE,4DCeoB;EL8DxB;AACF;AHhGI;EOwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;ELiDb;EIzEE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ELkDnB;EIxEE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;ELmDpB;EIvEE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EJyEJ;EItEE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EJwEJ;AACF;AH/HI;ESHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;EPgHjB;AACF;AHvII;EWDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ETzBV;EQvIA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;ERyIF;EQrIA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;ERuIF;AACF","file":"graupl.css"}

package/dist/layout/columns/columns.css

@@ -0,0 +1,26 @@
+@layer graupl.layout{
+  .columns{
+    display:grid;
+    grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
+    gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
+  }
+  .columns-1{
+    --graupl-columns-count:1;
+  }
+  .columns-2{
+    --graupl-columns-count:2;
+  }
+  .columns-3{
+    --graupl-columns-count:3;
+  }
+  .columns-4{
+    --graupl-columns-count:4;
+  }
+  @media screen and (max-width: 48ch){
+    .columns{
+      --graupl-columns-min-width:1fr;
+    }
+  }
+}
+
+/*# sourceMappingURL=columns.css.map */

package/dist/layout/columns/columns.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ECAZ;EFaE;IACE,wBAAA;EEXJ;EFUE;IACE,wBAAA;EERJ;EFOE;IACE,wBAAA;EELJ;EFIE;IACE,wBAAA;EEFJ;EFOA;IACE;MACE,8BAAA;IELF;EACF;AACF","file":"columns.css"}

package/dist/layout/container/container.css

@@ -0,0 +1,38 @@
+@layer graupl.layout{
+  .container,
+  .container > .full-width{
+    --graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
+    --graupl-container-content:min(
+      var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
+      calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
+    );
+    --graupl-container-breakout:minmax(
+      0,
+      var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
+    );
+    --graupl-container-feature:minmax(
+      0,
+      var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
+    );
+    display:grid;
+    grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
+  }
+  .container > :not(.breakout, .full-width, .feature),
+  .container > .full-width > :not(.breakout, .full-width, .feature){
+    grid-column:content;
+  }
+  .container .breakout,
+  .container > .full-width .breakout{
+    grid-column:breakout;
+  }
+  .container .feature,
+  .container > .full-width .feature{
+    grid-column:feature;
+  }
+  .container .full-width,
+  .container > .full-width .full-width{
+    grid-column:full-width;
+  }
+}
+
+/*# sourceMappingURL=container.css.map */

package/dist/layout/container/container.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI;ECFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;ECPJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,oBAAA;ECZJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,sBAAA;ECZJ;AACF","file":"container.css"}

package/dist/state/focus/focus.css

@@ -0,0 +1,10 @@
+@layer graupl.state{
+  *:focus-visible{
+    border-color:transparent;
+    outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
+    box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
+  }
+}
+
+/*# sourceMappingURL=focus.css.map */

package/dist/state/focus/focus.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;ECxBjB;AACF","file":"focus.css"}

package/dist/theme/theme.css

@@ -0,0 +1,26 @@
+@layer graupl.theme{
+  :root{
+    background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
+    color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
+    font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
+    font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
+  }
+  .dark-mode{
+    --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
+    --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
+    --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
+    --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
+    --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+    --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+  }
+  .light-mode{
+    --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
+    --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
+    --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
+    --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
+    --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+    --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+  }
+}
+
+/*# sourceMappingURL=theme.css.map */

package/dist/theme/theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ECzKV;EFSA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;EEPF;EFWA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;EETF;AACF","file":"theme.css"}

package/docs/.vitepress/config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  lang: "en-US",
+  title: "Graupl",
+  description: "A modular and modern CSS framework.",
+  base: "/graupl/",
+  themeConfig: {
+    socialLinks: [{ icon: "github", url: "https://github.com/Graupl/graupl" }],
+  },
+});

package/docs/.vitepress/theme/custom.scss

@@ -0,0 +1,35 @@
+@use "../../../scss/theme/variables" as theme;
+
+:root {
+  --vp-c-brand: #{theme.$theme-light--primary--dark};
+  --vp-c-brand-1: #{theme.$theme-light--primary--dark};
+  --vp-c-brand-2: #{theme.$theme-light--primary--dark};
+  --vp-c-brand-3: #{theme.$theme-light--primary--dark};
+  --vp-c-bg: #{theme.$theme-light--light};
+  --vp-c-bg-alt: #{theme.$theme-light--light};
+  --vp-c-bg-elv: #{theme.$theme-light--light};
+  --vp-c-bg-soft: #{theme.$theme-light--light};
+  --vp-c-border: #{theme.$theme-light--secondary--dark};
+  --vp-c-divider: #{theme.$theme-light--secondary--dark};
+  --vp-c-gutter: #{theme.$theme-light--secondary--dark};
+  --vp-c-text-1: #{theme.$theme-light--dark};
+  --vp-c-text-2: #{theme.$theme-light--dark};
+  --vp-c-text-3: #{theme.$theme-light--dark};
+}
+
+.dark {
+  --vp-c-brand: #{theme.$theme-light--primary--light};
+  --vp-c-brand-1: #{theme.$theme-light--primary--light};
+  --vp-c-brand-2: #{theme.$theme-light--primary--light};
+  --vp-c-brand-3: #{theme.$theme-light--primary--light};
+  --vp-c-bg: #{theme.$theme-light--dark};
+  --vp-c-bg-alt: #{theme.$theme-light--dark};
+  --vp-c-bg-elv: #{theme.$theme-light--dark};
+  --vp-c-bg-soft: #{theme.$theme-light--dark};
+  --vp-c-border: #{theme.$theme-light--secondary--light};
+  --vp-c-divider: #{theme.$theme-light--secondary--light};
+  --vp-c-gutter: #{theme.$theme-light--secondary--light};
+  --vp-c-text-1: #{theme.$theme-light--light};
+  --vp-c-text-2: #{theme.$theme-light--light};
+  --vp-c-text-3: #{theme.$theme-light--light};
+}

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from "vitepress/theme";
+import "./custom.scss";
+
+export default DefaultTheme;

package/docs/index.md

@@ -0,0 +1,7 @@
+---
+layout: home
+
+hero:
+  name: "Graupl"
+  tagline: "A modular and modern CSS framework."
+---

package/eslint.config.js

@@ -0,0 +1,73 @@
+import jsdoc from "eslint-plugin-jsdoc";
+import globals from "globals";
+import js from "@eslint/js";
+import prettier from "eslint-config-prettier";
+
+const files = ["*.js", "*.cjs"];
+const ignores = [
+  "dist/",
+  "docs/.vitepress/cache/",
+  "docs/.vitepress/dist/",
+  "!.*.js",
+  "!.*.mjs",
+  "!.*.cjs",
+];
+
+const config = {
+  plugins: {
+    jsdoc,
+  },
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+      ...globals.es2021,
+    },
+  },
+  rules: {
+    "no-console": [
+      "warn",
+      {
+        allow: ["warn", "error"],
+      },
+    ],
+    "jsdoc/no-defaults": 0,
+    "jsdoc/tag-lines": [
+      "warn",
+      "always",
+      {
+        applyToEndTag: false,
+        startLines: 1,
+        endLines: 0,
+        tags: {
+          property: { lines: "never" },
+          param: { lines: "never" },
+        },
+      },
+    ],
+  },
+  settings: {
+    jsdoc: {
+      mode: "permissive",
+      tagNamePreference: {
+        augments: {
+          message:
+            "@extends is to be used over @augments as it is more evocative of classes than @augments",
+          replacement: "extends",
+        },
+      },
+    },
+  },
+};
+
+export default [
+  js.configs.recommended,
+  prettier,
+  jsdoc.configs["flat/recommended"],
+  config,
+  {
+    files,
+  },
+  {
+    ignores,
+  },
+];

package/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    @layer normalize, graupl;
+
+    @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css") layer(normalize);
+  </style>
+  <link rel="stylesheet" href="dist/graupl.css">
+</head>
+<body>
+  <main class="container">
+    <h1>Hello Graupl!</h1>
+    <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
+    <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
+    <p>Graupl support light and dark modes out-of-the-box.</p>
+    <h2>Buttons</h2>
+    <p>There are 3 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
+    <div class="columns">
+      <button class="button">Button</button>
+      <button class="button primary">Primary Button</button>
+      <button class="button secondary">Secondary Button</button>
+    </div>
+  </main>
+</body>
+</html>

package/lint-staged.config.js

@@ -0,0 +1,6 @@
+const config = {
+  "*.{js,mjs,cjs}": ["eslint --fix", "prettier --write"],
+  "*.{scss,sass}": ["stylelint --fix", "prettier --write"],
+};
+
+export default config;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@graupl/graupl",
+  "version": "1.0.0-alpha.0",
+  "description": "A modular and modern CSS framework.",
+  "type": "module",
+  "scripts": {
+    "prepare": "husky install",
+    "commit": "git cz",
+    "eslint": "eslint .",
+    "prettier": "prettier '**/*.{js,mjs,cjs,scss,sass}'",
+    "stylelint": "stylelint '**/*.scss' --allow-empty-input",
+    "lint": "npm run eslint -- --fix && npm run stylelint -- --fix && npm run prettier --  --write",
+    "sass": "sass scss:dist",
+    "postcss": "postcss 'dist/**/*.css' --replace",
+    "build": "npm run sass && npm run postcss",
+    "release": "git add dist/. && standard-version -a",
+    "prerelease": "npm run lint && npm run build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Graupl/graupl.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Graupl/graupl/issues"
+  },
+  "homepage": "https://github.com/Graupl/graupl#readme",
+  "devDependencies": {
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@eslint/js": "^9.0.0",
+    "autoprefixer": "^10.4.19",
+    "commitizen": "^4.3.0",
+    "cssnano": "^6.1.2",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-jsdoc": "^48.2.3",
+    "globals": "^15.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "postcss-discard-comments": "^6.0.2",
+    "prettier": "^3.2.5",
+    "sass": "^1.69.5",
+    "standard-version": "^9.5.0",
+    "stylelint": "^16.3.1",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.0",
+    "vite": "^5.2.8",
+    "vitepress": "^1.1.0"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: [
+    require("autoprefixer"),
+    // @todo: add cssnano when ready
+    // Waiting on upstream issue for postcss-calc: https://github.com/postcss/postcss-calc/issues/77
+    // require("cssnano"),
+    require("postcss-discard-comments"),
+  ],
+};
+
+module.exports = config;

package/prettier.config.js

@@ -0,0 +1,16 @@
+/** @type {import("prettier").Config} */
+const config = {
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  quoteProps: "as-needed",
+  trailingComma: "es5",
+  bracketSpacing: true,
+  arrowParens: "always",
+  htmlWhitespaceSensitivity: "css",
+  endOfLine: "lf",
+  printWidth: 80,
+};
+
+export default config;