@graupl/graupl 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/css/normalize.css

@@ -1,2 +1,2 @@
-@layer graupl.normalize{*,:after,:before{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}hr{box-sizing:content-box;height:0}pre{font-family:monospace;font-size:1em}abbr[title]{border-bottom:0;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}details{display:block}summary{display:list-item}}
-/*# sourceMappingURL=normalize.css.map */
+@layer graupl.normalize{*,:before,:after{box-sizing:border-box}html{text-size-adjust:100%;line-height:1.15}body{margin:0}hr{box-sizing:content-box;height:0}pre{font-family:monospace;font-size:1em}abbr[title]{border-bottom:0;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}}
+/*# sourceMappingURL=normalize.css.map */

package/dist/css/normalize.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../node_modules/@graupl/core/src/scss/_normalize.scss","normalize.css"],"names":[],"mappings":"AASI,wBCMF,iBAGE,qBCbF,CDoBA,KACE,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBClBF,CDwBA,KACE,QCtBF,CD4BA,GACE,sBAAA,CACA,QC1BF,CD+BA,IACE,qBAAA,CACA,aC7BF,CDoCA,YACE,eAAA,CACA,wCAAA,CAAA,gCClCF,CDsCA,SAEE,kBCpCF,CDyCA,cAGE,qBAAA,CACA,aCvCF,CD2CA,MACE,aCzCF,CD6CA,QAGE,aAAA,CACA,aAAA,CAFA,iBAAA,CAGA,uBC3CF,CD8CA,IACE,aC5CF,CD+CA,IACE,SC7CF,CDoDA,sCAME,mBAAA,CACA,cAAA,CACA,gBAAA,CAHA,QC/CF,CDsDA,cAGE,mBCpDF,CDwDA,gDAIE,yBAAA,CAAA,sBAAA,CAAA,iBCtDF,CD0DA,wHAKE,iBAAA,CADA,SCvDF,CD4DA,4GAIE,6BC1DF,CD8DA,SACE,0BC5DF,CDgEA,OACE,SC9DF,CDkEA,SACE,uBChEF,CDoEA,kFAEE,WClEF,CDuEA,cACE,4BAAA,CAAA,yBAAA,CAAA,oBAAA,CACA,mBCrEF,CDyEA,yCACE,uBAAA,CAAA,eCvEF,CD4EA,6BACE,yBAAA,CAAA,iBAAA,CACA,YC1EF,CDgFA,QACE,aC9EF,CDkFA,QACE,iBChFF,CACF","file":"normalize.css"}
+{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCMF,uCAUA,4CAQA,cAOA,mCAOA,wCASA,6DAMA,4BAOA,kDAQA,oBAKA,8EAQA,kBAIA,cAQA,mGAYA,kCAOA,kEAQA,oJASA,0IAQA,oCAKA,iBAKA,iCAKA,8FAOA,uDAMA,yDAMA,4DAQA,sBAKA","sources":["dist/css/normalize.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/_normalize.scss"],"sourcesContent":["@layer graupl.normalize {\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  html {\n    line-height: 1.15;\n    text-size-adjust: 100%;\n  }\n  body {\n    margin: 0;\n  }\n  hr {\n    box-sizing: content-box;\n    height: 0;\n  }\n  pre {\n    font-family: monospace;\n    font-size: 1em;\n  }\n  abbr[title] {\n    border-bottom: 0;\n    text-decoration: underline dotted;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp {\n    font-family: monospace;\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    position: relative;\n    font-size: 75%;\n    line-height: 0;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    margin: 0;\n    font-family: inherit;\n    font-size: 100%;\n    line-height: 1.15;\n  }\n  button,\n  select {\n    /* 1 */\n    text-transform: none;\n  }\n  button,\n  [type=button],\n  [type=reset],\n  [type=submit] {\n    appearance: button;\n  }\n  button::-moz-focus-inner,\n  [type=button]::-moz-focus-inner,\n  [type=reset]::-moz-focus-inner,\n  [type=submit]::-moz-focus-inner {\n    padding: 0;\n    border-style: none;\n  }\n  button:-moz-focusring,\n  [type=button]:-moz-focusring,\n  [type=reset]:-moz-focusring,\n  [type=submit]:-moz-focusring {\n    outline: 1px dotted ButtonText;\n  }\n  fieldset {\n    padding: 0.35em 0.75em 0.625em;\n  }\n  legend {\n    padding: 0;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  [type=number]::-webkit-inner-spin-button,\n  [type=number]::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [type=search] {\n    appearance: textfield;\n    outline-offset: -2px;\n  }\n  [type=search]::-webkit-search-decoration {\n    appearance: none;\n  }\n  ::-webkit-file-upload-button {\n    appearance: button; /* 1 */\n    font: inherit; /* 2 */\n  }\n  details {\n    display: block;\n  }\n  summary {\n    display: list-item;\n  }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core normalize.\n//\n// This file is manually forked from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n//\n// We wanted to scope normalize.css to a normalize layer along with some customizations, so we forked it here.\n//\n// @use cannot be used in this file because you cannot insert it into a layer.\n//\n// @import would technically work, but it is not recommended by Sass and will eventually be removed.\n// Using @import would cause headaches down the line, so a manual fork was the best option.\n\n@use \"mixins/layer\" as *;\n\n@include layer(normalize) {\n  // Correct box sizing of all elements to ensure everything is consistent.\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  // Document.\n\n  // 1. Correct the line height in all browsers.\n  // 2. Prevent adjustments of font size after orientation changes in iOS.\n  html {\n    line-height: 1.15; // 1.\n    text-size-adjust: 100%; // 2.\n  }\n\n  // Secions.\n\n  // Remove the margin in all browsers.\n  body {\n    margin: 0;\n  }\n\n  // Grouping content.\n\n  // Add the correct box sizing in Firefox.\n  hr {\n    box-sizing: content-box;\n    height: 0;\n  }\n\n  // 1. Correct the inheritance and scaling of font size in all browsers.\n  // 2. Correct the odd `em` font sizing in all browsers.\n  pre {\n    font-family: monospace; // 1.\n    font-size: 1em; // 2.\n  }\n\n  // Text-level semantics.\n\n  // 1. Remove the bottom border in Chrome 57-\n  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n  abbr[title] {\n    border-bottom: 0; // 1.\n    text-decoration: underline dotted; // 2.\n  }\n\n  // Add the correct font weight in Chrome, Edge, and Safari.\n  b,\n  strong {\n    font-weight: bolder;\n  }\n\n  // 1. Correct the inheritance and scaling of font size in all browsers.\n  // 2. Correct the odd `em` font sizing in all browsers.\n  code,\n  kbd,\n  samp {\n    font-family: monospace; // 1.\n    font-size: 1em; // 2.\n  }\n\n  // Add the correct font size in all browsers.\n  small {\n    font-size: 80%;\n  }\n\n  // Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n  sub,\n  sup {\n    position: relative;\n    font-size: 75%;\n    line-height: 0;\n    vertical-align: baseline;\n  }\n\n  sub {\n    bottom: -0.25em;\n  }\n\n  sup {\n    top: -0.5em;\n  }\n\n  // Forms.\n\n  // 1. Change the font styles in all browsers.\n  // 2. Remove the margin in Firefox and Safari.\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    margin: 0; // 2.\n    font-family: inherit; // 1.\n    font-size: 100%; // 1.\n    line-height: 1.15; // 1.\n  }\n\n  // Remove the inheritance of text transform in Firefox.\n  button,\n  select {\n    /* 1 */\n    text-transform: none;\n  }\n\n  // Correct the inability to style clickable types in iOS and Safari.\n  button,\n  [type=\"button\"],\n  [type=\"reset\"],\n  [type=\"submit\"] {\n    appearance: button;\n  }\n\n  // Remove the inner border and padding in Firefox.\n  button::-moz-focus-inner,\n  [type=\"button\"]::-moz-focus-inner,\n  [type=\"reset\"]::-moz-focus-inner,\n  [type=\"submit\"]::-moz-focus-inner {\n    padding: 0;\n    border-style: none;\n  }\n\n  // Restore the focus styles unset by the previous rule.\n  button:-moz-focusring,\n  [type=\"button\"]:-moz-focusring,\n  [type=\"reset\"]:-moz-focusring,\n  [type=\"submit\"]:-moz-focusring {\n    outline: 1px dotted ButtonText;\n  }\n\n  // Correct the padding in Firefox.\n  fieldset {\n    padding: 0.35em 0.75em 0.625em;\n  }\n\n  // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.\n  legend {\n    padding: 0;\n  }\n\n  // Add the correct vertical alignment in Chrome, Firefox, and Opera.\n  progress {\n    vertical-align: baseline;\n  }\n\n  // Correct the cursor style of increment and decrement buttons in Chrome.\n  [type=\"number\"]::-webkit-inner-spin-button,\n  [type=\"number\"]::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  // 1. Correct the odd appearance in Chrome and Safari.\n  // 2. Correct the outline style in Safari.\n  [type=\"search\"] {\n    appearance: textfield; // 1.\n    outline-offset: -2px; // 2.\n  }\n\n  // Remove the inner padding in Chrome and Safari on macOS.\n  [type=\"search\"]::-webkit-search-decoration {\n    appearance: none;\n  }\n\n  // 1. Correct the inability to style clickable types in iOS and Safari.\n  // 2. Change font properties to `inherit` in Safari.\n  ::-webkit-file-upload-button {\n    appearance: button; /* 1 */\n    font: inherit; /* 2 */\n  }\n\n  // Interactive.\n\n  // Add the correct display in Edge, IE 10+, and Firefox.\n  details {\n    display: block;\n  }\n\n  // Add the correct display in all browsers.\n  summary {\n    display: list-item;\n  }\n}\n"],"names":[]}

package/dist/css/state/focus.css

@@ -1,2 +1,2 @@
-@layer graupl.state{:focus-visible{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem)) inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, .125rem)))))}.focus{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem)) inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, .125rem)))))}}
-/*# sourceMappingURL=focus.css.map */
+@layer graupl.state{:focus-visible,.focus{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem)))var(--graupl-focus-outline-style,dotted)var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1*var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem)))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem))inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}}
+/*# sourceMappingURL=focus.css.map */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/state/focus/_index.scss","../../../node_modules/@graupl/core/src/scss/state/focus/_mixins.scss","../../../node_modules/@graupl/core/src/scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI,oBC4BA,eC7BF,wNC8BmB,CD3BnB,kUC+BiB,CDjCjB,8WCiBc,CDhBd,8JEJA,CH+BE,OC7BF,wNC8BmB,CD3BnB,kUC+BiB,CDjCjB,8WCiBc,CDhBd,8JEEA,CACF","file":"focus.css"}
+{"version":3,"sourceRoot":null,"mappings":"ACSI,oBCiCA","sources":["dist/css/state/focus.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_mixins.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_variables.scss"],"sourcesContent":["@layer graupl.state {\n  *:focus-visible {\n    border-color: var(--graupl-focus-border-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n    outline: var(--graupl-focus-outline, var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    outline-offset: var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)))));\n    box-shadow: var(--graupl-focus-box-shadow, 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)) inset var(--graupl-focus-box-shadow-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n  }\n  *.focus {\n    border-color: var(--graupl-focus-border-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n    outline: var(--graupl-focus-outline, var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    outline-offset: var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)))));\n    box-shadow: var(--graupl-focus-box-shadow, 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)) inset var(--graupl-focus-box-shadow-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n  }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core focus state styles.\n//\n// This module provides the styles for Graupl's focus state.\n//\n// The focus state is applied to an element when it is focused by the user.\n//\n// The following classes are generated by default:\n// - `.focus`: The focus state class.\n// - `:focus-visible`: The focus pseudo-class (from the root state selectors).\n//\n// The following custom properties can be used to customize the focus state:\n// | Property                             | Description                                         | Default Value                                                                                           |\n// | ---                                  | ---                                                 | ---                                                                                                     |\n// | `--graupl-focus-width`               | The width of both the focus outline and box shadow. | `var(--graupl-border-width)`                                                                            |\n// | `--graupl-focus-outline-color`       | The color of the focus outline.                     | `var(--graupl-color)`                                                                                   |\n// | `--graupl-focus-outline-width`       | The width of the focus outline.                     | `var(--graupl-focus-width)`                                                                             |\n// | `--graupl-focus-outline-style`       | The style of the focus outline.                     | `dotted`                                                                                                |\n// | `--graupl-focus-outline`             | The outline applied in the focus state.             | `var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color)` |\n// | `--graupl-focus-outline-offset`      | The offset of the focus outline.                    | `calc(-1 * var(--graupl-focus-outline-width))`                                                          |\n// | `--graupl-focus-box-shadow-color`    | The color of the focus box shadow.                  | `var(--graupl-background)`                                                                              |\n// | `--graupl-focus-border-color`        | The color applied to the border in the focus state. | `var(--graupl-background)`                                                                              |\n// | `--graupl-focus-box-shadow`          | The box shadow of the focus state.                  | `0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)`                            |\n//\n// The following sass variables can be used to customize the generation of the focus state:\n// | Variable               | Description                     | Default Value |\n// | ---                    | ---                             | ---           |\n// | `$focus-outline-style` | The style of the focus outline. | `dotted`      |\n//\n// Note: This focus styles are also applied to the `:focus-visible` pseudo-class by default.\n//\n// @example\n//   <button class=\"focus\">Focus</button>\n\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"mixins\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n@include layer(state) {\n  @each $state in map.get(root-defaults.$state-selectors, focus) {\n    // e.g. *.focus or *:focus-visible\n    *#{$state} {\n      @include apply-focus;\n    }\n  }\n}\n","// @graupl/core focus state mixins.\n\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies the focus state.\n@mixin apply-focus() {\n  border-color: $focus-border-color;\n  outline: $focus-outline;\n  outline-offset: $focus-outline-offset;\n  box-shadow: $focus-box-shadow;\n}\n","// @graupl/core focus state variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property                 | Default                                                                                               |\n// | ------------------------------- | ----------------------------------------------------------------------------------------------------- |\n// | --graupl-focus-width            | var(--graupl-border-width)                                                                            |\n// | --graupl-focus-outline-color    | var(--graupl-color)                                                                                   |\n// | --graupl-focus-outline-width    | var(--graupl-focus-width)                                                                             |\n// | --graupl-focus-outline-style    | solid                                                                                                 |\n// | --graupl-focus-outline          | var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color) |\n// | --graupl-focus-outline-offset   | calc(-1 * var(--graupl-focus-outline-width))                                                          |\n// | --graupl-focus-box-shadow-color | var(--graupl-background)                                                                              |\n// | --graupl-focus-border-color     | var(--graupl-background)                                                                              |\n// | --graupl-focus-box-shadow       | 0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)                            |\n\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n\n// --graupl-focus-width\n$focus-width: var(\n  --#{root-defaults.$prefix}focus-width,\n  #{root-variables.$border-width}\n);\n\n// --graupl-focus-outline-color\n$focus-outline-color: var(\n  --#{root-defaults.$prefix}focus-outline-color,\n  #{color.$color}\n);\n\n// --graupl-focus-outline-width\n$focus-outline-width: var(\n  --#{root-defaults.$prefix}focus-outline-width,\n  #{$focus-width}\n);\n\n// --graupl-focus-outline-style\n$focus-outline-style: var(\n  --#{root-defaults.$prefix}focus-outline-style,\n  #{defaults.$focus-outline-style}\n);\n\n// --graupl-focus-outline\n$focus-outline: var(\n  --#{root-defaults.$prefix}focus-outline,\n  #{$focus-outline-width} #{$focus-outline-style} #{$focus-outline-color}\n);\n\n// --graupl-focus-outline-offset\n$focus-outline-offset: var(\n  --#{root-defaults.$prefix}focus-outline-offset,\n  calc(-1 * #{$focus-outline-width})\n);\n\n// --graupl-focus-box-shadow-color\n$focus-box-shadow-color: var(\n  --#{root-defaults.$prefix}focus-box-shadow-color,\n  #{color.$background}\n);\n\n// --graupl-focus-border-color\n$focus-border-color: var(\n  --#{root-defaults.$prefix}focus-border-color,\n  #{color.$background}\n);\n\n// --graupl-focus-box-shadow\n$focus-box-shadow: var(\n  --#{root-defaults.$prefix}focus-box-shadow,\n  0 0 0 #{$focus-width} inset #{$focus-box-shadow-color}\n);\n"],"names":[]}

package/dist/css/state.css

@@ -1,2 +1,2 @@
-@layer graupl.state{:focus-visible{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem)) inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, .125rem)))))}.focus{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem)) inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, .125rem)))))}}
-/*# sourceMappingURL=state.css.map */
+@layer graupl.state{:focus-visible,.focus{border-color:var(--graupl-focus-border-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));outline:var(--graupl-focus-outline,var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem)))var(--graupl-focus-outline-style,dotted)var(--graupl-focus-outline-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));outline-offset:var(--graupl-focus-outline-offset,calc(-1*var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,.125rem)))));box-shadow:var(--graupl-focus-box-shadow,0 0 0 var(--graupl-focus-width,var(--graupl-border-width,.125rem))inset var(--graupl-focus-box-shadow-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}}
+/*# sourceMappingURL=state.css.map */

package/dist/css/state.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../node_modules/@graupl/core/src/scss/state/focus/_index.scss","../../node_modules/@graupl/core/src/scss/state/focus/_mixins.scss","../../node_modules/@graupl/core/src/scss/state/focus/_variables.scss","state.css"],"names":[],"mappings":"AASI,oBC4BA,eC7BF,wNC8BmB,CD3BnB,kUC+BiB,CDjCjB,8WCiBc,CDhBd,8JEJA,CH+BE,OC7BF,wNC8BmB,CD3BnB,kUC+BiB,CDjCjB,8WCiBc,CDhBd,8JEEA,CACF","file":"state.css"}
+{"version":3,"sourceRoot":null,"mappings":"ACSI,oBCiCA","sources":["dist/css/state.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_mixins.scss","var/www/html/node_modules/@graupl/core/src/scss/state/focus/_variables.scss"],"sourcesContent":["@layer graupl.state {\n  *:focus-visible {\n    border-color: var(--graupl-focus-border-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n    outline: var(--graupl-focus-outline, var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    outline-offset: var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)))));\n    box-shadow: var(--graupl-focus-box-shadow, 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)) inset var(--graupl-focus-box-shadow-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n  }\n  *.focus {\n    border-color: var(--graupl-focus-border-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n    outline: var(--graupl-focus-outline, var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    outline-offset: var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)))));\n    box-shadow: var(--graupl-focus-box-shadow, 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 0.125rem)) inset var(--graupl-focus-box-shadow-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n  }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core focus state styles.\n//\n// This module provides the styles for Graupl's focus state.\n//\n// The focus state is applied to an element when it is focused by the user.\n//\n// The following classes are generated by default:\n// - `.focus`: The focus state class.\n// - `:focus-visible`: The focus pseudo-class (from the root state selectors).\n//\n// The following custom properties can be used to customize the focus state:\n// | Property                             | Description                                         | Default Value                                                                                           |\n// | ---                                  | ---                                                 | ---                                                                                                     |\n// | `--graupl-focus-width`               | The width of both the focus outline and box shadow. | `var(--graupl-border-width)`                                                                            |\n// | `--graupl-focus-outline-color`       | The color of the focus outline.                     | `var(--graupl-color)`                                                                                   |\n// | `--graupl-focus-outline-width`       | The width of the focus outline.                     | `var(--graupl-focus-width)`                                                                             |\n// | `--graupl-focus-outline-style`       | The style of the focus outline.                     | `dotted`                                                                                                |\n// | `--graupl-focus-outline`             | The outline applied in the focus state.             | `var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color)` |\n// | `--graupl-focus-outline-offset`      | The offset of the focus outline.                    | `calc(-1 * var(--graupl-focus-outline-width))`                                                          |\n// | `--graupl-focus-box-shadow-color`    | The color of the focus box shadow.                  | `var(--graupl-background)`                                                                              |\n// | `--graupl-focus-border-color`        | The color applied to the border in the focus state. | `var(--graupl-background)`                                                                              |\n// | `--graupl-focus-box-shadow`          | The box shadow of the focus state.                  | `0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)`                            |\n//\n// The following sass variables can be used to customize the generation of the focus state:\n// | Variable               | Description                     | Default Value |\n// | ---                    | ---                             | ---           |\n// | `$focus-outline-style` | The style of the focus outline. | `dotted`      |\n//\n// Note: This focus styles are also applied to the `:focus-visible` pseudo-class by default.\n//\n// @example\n//   <button class=\"focus\">Focus</button>\n\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"mixins\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n@include layer(state) {\n  @each $state in map.get(root-defaults.$state-selectors, focus) {\n    // e.g. *.focus or *:focus-visible\n    *#{$state} {\n      @include apply-focus;\n    }\n  }\n}\n","// @graupl/core focus state mixins.\n\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies the focus state.\n@mixin apply-focus() {\n  border-color: $focus-border-color;\n  outline: $focus-outline;\n  outline-offset: $focus-outline-offset;\n  box-shadow: $focus-box-shadow;\n}\n","// @graupl/core focus state variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property                 | Default                                                                                               |\n// | ------------------------------- | ----------------------------------------------------------------------------------------------------- |\n// | --graupl-focus-width            | var(--graupl-border-width)                                                                            |\n// | --graupl-focus-outline-color    | var(--graupl-color)                                                                                   |\n// | --graupl-focus-outline-width    | var(--graupl-focus-width)                                                                             |\n// | --graupl-focus-outline-style    | solid                                                                                                 |\n// | --graupl-focus-outline          | var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color) |\n// | --graupl-focus-outline-offset   | calc(-1 * var(--graupl-focus-outline-width))                                                          |\n// | --graupl-focus-box-shadow-color | var(--graupl-background)                                                                              |\n// | --graupl-focus-border-color     | var(--graupl-background)                                                                              |\n// | --graupl-focus-box-shadow       | 0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)                            |\n\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n\n// --graupl-focus-width\n$focus-width: var(\n  --#{root-defaults.$prefix}focus-width,\n  #{root-variables.$border-width}\n);\n\n// --graupl-focus-outline-color\n$focus-outline-color: var(\n  --#{root-defaults.$prefix}focus-outline-color,\n  #{color.$color}\n);\n\n// --graupl-focus-outline-width\n$focus-outline-width: var(\n  --#{root-defaults.$prefix}focus-outline-width,\n  #{$focus-width}\n);\n\n// --graupl-focus-outline-style\n$focus-outline-style: var(\n  --#{root-defaults.$prefix}focus-outline-style,\n  #{defaults.$focus-outline-style}\n);\n\n// --graupl-focus-outline\n$focus-outline: var(\n  --#{root-defaults.$prefix}focus-outline,\n  #{$focus-outline-width} #{$focus-outline-style} #{$focus-outline-color}\n);\n\n// --graupl-focus-outline-offset\n$focus-outline-offset: var(\n  --#{root-defaults.$prefix}focus-outline-offset,\n  calc(-1 * #{$focus-outline-width})\n);\n\n// --graupl-focus-box-shadow-color\n$focus-box-shadow-color: var(\n  --#{root-defaults.$prefix}focus-box-shadow-color,\n  #{color.$background}\n);\n\n// --graupl-focus-border-color\n$focus-border-color: var(\n  --#{root-defaults.$prefix}focus-border-color,\n  #{color.$background}\n);\n\n// --graupl-focus-box-shadow\n$focus-box-shadow: var(\n  --#{root-defaults.$prefix}focus-box-shadow,\n  0 0 0 #{$focus-width} inset #{$focus-box-shadow-color}\n);\n"],"names":[]}

package/dist/css/theme/color.css

@@ -1,2 +1,2 @@
-@layer graupl.theme{:root{background:var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-primary:#2063df;--graupl-primary--100:#e6eeff;--graupl-primary--200:#9ebefa;--graupl-primary--300:#5e90ed;--graupl-primary--400:#3672e2;--graupl-primary--500:#2063df;--graupl-primary--600:#1d59c9;--graupl-primary--700:#1244a1;--graupl-primary--800:#052561;--graupl-primary--900:#001233;--graupl-secondary:#6c7093;--graupl-secondary--100:#edeef7;--graupl-secondary--200:#bdbfdb;--graupl-secondary--300:#9497b8;--graupl-secondary--400:#7b7e9d;--graupl-secondary--500:#6c7093;--graupl-secondary--600:#626484;--graupl-secondary--700:#474a6b;--graupl-secondary--800:#242642;--graupl-secondary--900:#0f1124;--graupl-tertiary:#c36;--graupl-tertiary--100:#fde7ef;--graupl-tertiary--200:#f2a6bf;--graupl-tertiary--300:#e06c92;--graupl-tertiary--400:#d14775;--graupl-tertiary--500:#c36;--graupl-tertiary--600:#b82e5c;--graupl-tertiary--700:#931f46;--graupl-tertiary--800:#590d26;--graupl-tertiary--900:#2f0412;--graupl-theme-active--primary:var(--graupl-theme--light--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary:var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary:var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412))}.active-mode{--graupl-theme-active--primary:var(--graupl-theme-active--primary,var(--graupl-theme--light--primary,var(--graupl-primary,#2063df)));--graupl-theme-active--primary--100:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-theme-active--primary--200:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-theme-active--primary--300:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)));--graupl-theme-active--primary--400:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)));--graupl-theme-active--primary--500:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)));--graupl-theme-active--primary--600:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)));--graupl-theme-active--primary--700:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-theme-active--primary--800:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-theme-active--primary--900:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-theme-active--secondary:var(--graupl-theme-active--secondary,var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093)));--graupl-theme-active--secondary--100:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-theme-active--secondary--200:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-theme-active--secondary--300:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)));--graupl-theme-active--secondary--400:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)));--graupl-theme-active--secondary--500:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)));--graupl-theme-active--secondary--600:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)));--graupl-theme-active--secondary--700:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-theme-active--secondary--800:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-theme-active--secondary--900:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-theme-active--tertiary:var(--graupl-theme-active--tertiary,var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36)));--graupl-theme-active--tertiary--100:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-theme-active--tertiary--200:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-theme-active--tertiary--300:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)));--graupl-theme-active--tertiary--400:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)));--graupl-theme-active--tertiary--500:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)));--graupl-theme-active--tertiary--600:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)));--graupl-theme-active--tertiary--700:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-theme-active--tertiary--800:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-theme-active--tertiary--900:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));color-scheme:active}.light-mode{--graupl-theme-active--primary:var(--graupl-theme--light--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary:var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary:var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}.dark-mode{--graupl-theme-active--primary:var(--graupl-theme--dark--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary:var(--graupl-theme--dark--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary:var(--graupl-theme--dark--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}}
-/*# sourceMappingURL=color.css.map */
+@layer graupl.theme{:root{background:var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-primary:#2063df;--graupl-primary--100:#e6eeff;--graupl-primary--200:#9ebefa;--graupl-primary--300:#5e90ed;--graupl-primary--400:#3672e2;--graupl-primary--500:#2063df;--graupl-primary--600:#1d59c9;--graupl-primary--700:#1244a1;--graupl-primary--800:#052561;--graupl-primary--900:#001233;--graupl-secondary:#6c7093;--graupl-secondary--100:#edeef7;--graupl-secondary--200:#bdbfdb;--graupl-secondary--300:#9497b8;--graupl-secondary--400:#7b7e9d;--graupl-secondary--500:#6c7093;--graupl-secondary--600:#626484;--graupl-secondary--700:#474a6b;--graupl-secondary--800:#242642;--graupl-secondary--900:#0f1124;--graupl-tertiary:#c36;--graupl-tertiary--100:#fde7ef;--graupl-tertiary--200:#f2a6bf;--graupl-tertiary--300:#e06c92;--graupl-tertiary--400:#d14775;--graupl-tertiary--500:#c36;--graupl-tertiary--600:#b82e5c;--graupl-tertiary--700:#931f46;--graupl-tertiary--800:#590d26;--graupl-tertiary--900:#2f0412;--graupl-theme-active--primary:var(--graupl-theme--light--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary:var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary:var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412))}.active-mode{--graupl-theme-active--primary:var(--graupl-theme-active--primary,var(--graupl-theme--light--primary,var(--graupl-primary,#2063df)));--graupl-theme-active--primary--100:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-theme-active--primary--200:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-theme-active--primary--300:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)));--graupl-theme-active--primary--400:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)));--graupl-theme-active--primary--500:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)));--graupl-theme-active--primary--600:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)));--graupl-theme-active--primary--700:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-theme-active--primary--800:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-theme-active--primary--900:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-theme-active--secondary:var(--graupl-theme-active--secondary,var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093)));--graupl-theme-active--secondary--100:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-theme-active--secondary--200:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-theme-active--secondary--300:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)));--graupl-theme-active--secondary--400:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)));--graupl-theme-active--secondary--500:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)));--graupl-theme-active--secondary--600:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)));--graupl-theme-active--secondary--700:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-theme-active--secondary--800:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-theme-active--secondary--900:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-theme-active--tertiary:var(--graupl-theme-active--tertiary,var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36)));--graupl-theme-active--tertiary--100:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-theme-active--tertiary--200:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-theme-active--tertiary--300:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)));--graupl-theme-active--tertiary--400:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)));--graupl-theme-active--tertiary--500:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)));--graupl-theme-active--tertiary--600:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)));--graupl-theme-active--tertiary--700:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-theme-active--tertiary--800:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-theme-active--tertiary--900:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));color-scheme:normal}.light-mode{--graupl-theme-active--primary:var(--graupl-theme--light--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary:var(--graupl-theme--light--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary:var(--graupl-theme--light--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}.dark-mode{--graupl-theme-active--primary:var(--graupl-theme--dark--primary,var(--graupl-primary,#2063df));--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary:var(--graupl-theme--dark--secondary,var(--graupl-secondary,#6c7093));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary:var(--graupl-theme--dark--tertiary,var(--graupl-tertiary,#c36));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}}
+/*# sourceMappingURL=color.css.map */

package/dist/css/theme/color.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/theme/color/_index.scss","../../../node_modules/@graupl/core/src/scss/theme/color/_variables.scss","color.css","../../../node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"names":[],"mappings":"AASI,oBCCF,MACE,4JCkJgB,CDjJhB,kJC0IW,CDnIL,wBAAA,CAEA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,6BAAA,CAFA,0BAAA,CAEA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAAA,+BAAA,CAFA,sBAAA,CAEA,8BAAA,CAAA,8BAAA,CAAA,8BAAA,CAAA,8BAAA,CAAA,2BAAA,CAAA,8BAAA,CAAA,8BAAA,CAAA,8BAAA,CAAA,8BAAA,CAUA,gGAAA,CAEA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAFA,sGAAA,CAEA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAFA,gGAAA,CAEA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHE+BR,CCrDA,aHmCU,oIAAA,CAEA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAAA,uJAAA,CAFA,4IAAA,CAEA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAAA,+JAAA,CAFA,qIAAA,CAEA,2JAAA,CAAA,2JAAA,CAAA,2JAAA,CAAA,2JAAA,CAAA,wJAAA,CAAA,2JAAA,CAAA,2JAAA,CAAA,2JAAA,CAAA,2JAAA,CAKN,mBE4CJ,CCtFA,YHmCU,gGAAA,CAEA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAFA,sGAAA,CAEA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAFA,gGAAA,CAEA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAKN,kBE6EJ,CCvHA,WHmCU,+FAAA,CAEA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAFA,qGAAA,CAEA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAFA,+FAAA,CAEA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAKN,iBE8GJ,CACF","file":"color.css"}
+{"version":3,"sourceRoot":null,"mappings":"ACSI,oBCsKF,++IEjKA,0iJAAA,20GAAA","sources":["dist/css/theme/color.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/theme/color/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/theme/color/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":["@layer graupl.theme {\n  :root {\n    background: var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));\n    color: var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));\n    --graupl-primary: hsl(219, 75%, 50%);\n    --graupl-primary--100: hsl(219, 100%, 95%);\n    --graupl-primary--200: hsl(219, 90%, 80%);\n    --graupl-primary--300: hsl(219, 80%, 65%);\n    --graupl-primary--400: hsl(219, 75%, 55%);\n    --graupl-primary--500: hsl(219, 75%, 50%);\n    --graupl-primary--600: hsl(219, 75%, 45%);\n    --graupl-primary--700: hsl(219, 80%, 35%);\n    --graupl-primary--800: hsl(219, 90%, 20%);\n    --graupl-primary--900: hsl(219, 100%, 10%);\n    --graupl-secondary: hsl(235, 15%, 50%);\n    --graupl-secondary--100: hsl(235, 40%, 95%);\n    --graupl-secondary--200: hsl(235, 30%, 80%);\n    --graupl-secondary--300: hsl(235, 20%, 65%);\n    --graupl-secondary--400: hsl(235, 15%, 55%);\n    --graupl-secondary--500: hsl(235, 15%, 50%);\n    --graupl-secondary--600: hsl(235, 15%, 45%);\n    --graupl-secondary--700: hsl(235, 20%, 35%);\n    --graupl-secondary--800: hsl(235, 30%, 20%);\n    --graupl-secondary--900: hsl(235, 40%, 10%);\n    --graupl-tertiary: hsl(340, 60%, 50%);\n    --graupl-tertiary--100: hsl(340, 85%, 95%);\n    --graupl-tertiary--200: hsl(340, 75%, 80%);\n    --graupl-tertiary--300: hsl(340, 65%, 65%);\n    --graupl-tertiary--400: hsl(340, 60%, 55%);\n    --graupl-tertiary--500: hsl(340, 60%, 50%);\n    --graupl-tertiary--600: hsl(340, 60%, 45%);\n    --graupl-tertiary--700: hsl(340, 65%, 35%);\n    --graupl-tertiary--800: hsl(340, 75%, 20%);\n    --graupl-tertiary--900: hsl(340, 85%, 10%);\n    --graupl-theme-active--primary: var(--graupl-theme--light--primary, var(--graupl-primary, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--100: var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));\n    --graupl-theme-active--primary--200: var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));\n    --graupl-theme-active--primary--300: var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));\n    --graupl-theme-active--primary--400: var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));\n    --graupl-theme-active--primary--500: var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--600: var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));\n    --graupl-theme-active--primary--700: var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));\n    --graupl-theme-active--primary--800: var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));\n    --graupl-theme-active--primary--900: var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));\n    --graupl-theme-active--secondary: var(--graupl-theme--light--secondary, var(--graupl-secondary, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--100: var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));\n    --graupl-theme-active--secondary--200: var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));\n    --graupl-theme-active--secondary--300: var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));\n    --graupl-theme-active--secondary--400: var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));\n    --graupl-theme-active--secondary--500: var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--600: var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));\n    --graupl-theme-active--secondary--700: var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));\n    --graupl-theme-active--secondary--800: var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));\n    --graupl-theme-active--secondary--900: var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));\n    --graupl-theme-active--tertiary: var(--graupl-theme--light--tertiary, var(--graupl-tertiary, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--100: var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));\n    --graupl-theme-active--tertiary--200: var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));\n    --graupl-theme-active--tertiary--300: var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));\n    --graupl-theme-active--tertiary--400: var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));\n    --graupl-theme-active--tertiary--500: var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--600: var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));\n    --graupl-theme-active--tertiary--700: var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));\n    --graupl-theme-active--tertiary--800: var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));\n    --graupl-theme-active--tertiary--900: var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));\n  }\n  .active-mode {\n    --graupl-theme-active--primary: var(--graupl-theme-active--primary, var(--graupl-theme--light--primary, var(--graupl-primary, hsl(219, 75%, 50%))));\n    --graupl-theme-active--primary--100: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n    --graupl-theme-active--primary--200: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n    --graupl-theme-active--primary--300: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%))));\n    --graupl-theme-active--primary--400: var(--graupl-theme-active--primary--400, var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%))));\n    --graupl-theme-active--primary--500: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n    --graupl-theme-active--primary--600: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n    --graupl-theme-active--primary--700: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n    --graupl-theme-active--primary--800: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%))));\n    --graupl-theme-active--primary--900: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n    --graupl-theme-active--secondary: var(--graupl-theme-active--secondary, var(--graupl-theme--light--secondary, var(--graupl-secondary, hsl(235, 15%, 50%))));\n    --graupl-theme-active--secondary--100: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n    --graupl-theme-active--secondary--200: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n    --graupl-theme-active--secondary--300: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))));\n    --graupl-theme-active--secondary--400: var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))));\n    --graupl-theme-active--secondary--500: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n    --graupl-theme-active--secondary--600: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n    --graupl-theme-active--secondary--700: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n    --graupl-theme-active--secondary--800: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%))));\n    --graupl-theme-active--secondary--900: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n    --graupl-theme-active--tertiary: var(--graupl-theme-active--tertiary, var(--graupl-theme--light--tertiary, var(--graupl-tertiary, hsl(340, 60%, 50%))));\n    --graupl-theme-active--tertiary--100: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n    --graupl-theme-active--tertiary--200: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n    --graupl-theme-active--tertiary--300: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%))));\n    --graupl-theme-active--tertiary--400: var(--graupl-theme-active--tertiary--400, var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%))));\n    --graupl-theme-active--tertiary--500: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n    --graupl-theme-active--tertiary--600: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n    --graupl-theme-active--tertiary--700: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n    --graupl-theme-active--tertiary--800: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%))));\n    --graupl-theme-active--tertiary--900: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n    color-scheme: active;\n  }\n  .light-mode {\n    --graupl-theme-active--primary: var(--graupl-theme--light--primary, var(--graupl-primary, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--100: var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));\n    --graupl-theme-active--primary--200: var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));\n    --graupl-theme-active--primary--300: var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));\n    --graupl-theme-active--primary--400: var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));\n    --graupl-theme-active--primary--500: var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--600: var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));\n    --graupl-theme-active--primary--700: var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));\n    --graupl-theme-active--primary--800: var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));\n    --graupl-theme-active--primary--900: var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));\n    --graupl-theme-active--secondary: var(--graupl-theme--light--secondary, var(--graupl-secondary, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--100: var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));\n    --graupl-theme-active--secondary--200: var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));\n    --graupl-theme-active--secondary--300: var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));\n    --graupl-theme-active--secondary--400: var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));\n    --graupl-theme-active--secondary--500: var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--600: var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));\n    --graupl-theme-active--secondary--700: var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));\n    --graupl-theme-active--secondary--800: var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));\n    --graupl-theme-active--secondary--900: var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));\n    --graupl-theme-active--tertiary: var(--graupl-theme--light--tertiary, var(--graupl-tertiary, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--100: var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));\n    --graupl-theme-active--tertiary--200: var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));\n    --graupl-theme-active--tertiary--300: var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));\n    --graupl-theme-active--tertiary--400: var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));\n    --graupl-theme-active--tertiary--500: var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--600: var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));\n    --graupl-theme-active--tertiary--700: var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));\n    --graupl-theme-active--tertiary--800: var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));\n    --graupl-theme-active--tertiary--900: var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));\n    color-scheme: light;\n  }\n  .dark-mode {\n    --graupl-theme-active--primary: var(--graupl-theme--dark--primary, var(--graupl-primary, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--100: var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));\n    --graupl-theme-active--primary--200: var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));\n    --graupl-theme-active--primary--300: var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));\n    --graupl-theme-active--primary--400: var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));\n    --graupl-theme-active--primary--500: var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));\n    --graupl-theme-active--primary--600: var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));\n    --graupl-theme-active--primary--700: var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));\n    --graupl-theme-active--primary--800: var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));\n    --graupl-theme-active--primary--900: var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));\n    --graupl-theme-active--secondary: var(--graupl-theme--dark--secondary, var(--graupl-secondary, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--100: var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));\n    --graupl-theme-active--secondary--200: var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));\n    --graupl-theme-active--secondary--300: var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));\n    --graupl-theme-active--secondary--400: var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));\n    --graupl-theme-active--secondary--500: var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));\n    --graupl-theme-active--secondary--600: var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));\n    --graupl-theme-active--secondary--700: var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));\n    --graupl-theme-active--secondary--800: var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));\n    --graupl-theme-active--secondary--900: var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));\n    --graupl-theme-active--tertiary: var(--graupl-theme--dark--tertiary, var(--graupl-tertiary, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--100: var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));\n    --graupl-theme-active--tertiary--200: var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));\n    --graupl-theme-active--tertiary--300: var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));\n    --graupl-theme-active--tertiary--400: var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));\n    --graupl-theme-active--tertiary--500: var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));\n    --graupl-theme-active--tertiary--600: var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));\n    --graupl-theme-active--tertiary--700: var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));\n    --graupl-theme-active--tertiary--800: var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));\n    --graupl-theme-active--tertiary--900: var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));\n    color-scheme: dark;\n  }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core color theme styles.\n//\n// This module wires up the global colour tokens and theme variants.\n//\n// The following selectors are generated by default:\n// - `:root`: Defines base colours and the active theme properties.\n// - `.light-mode`: Defines the light theme properties and sets `color-scheme: light`.\n// - `.dark-mode`: Defines the dark theme properties and sets `color-scheme: dark`.\n//\n// The following custom properties can be used to customize colour theming:\n// | Property                                | Description                                | Default Value                               |\n// | ---                                     | ---                                        | ---                                         |\n// | `--graupl-primary`                      | Primary base colour.                       | `hsl(219deg 75% 50%)`                       |\n// | `--graupl-primary--100`                 | Primary shade 100.                         | `hsl(219deg 100% 95%)`                      |\n// | `--graupl-primary--200`                 | Primary shade 200.                         | `hsl(219deg 90% 80%)`                       |\n// | `--graupl-primary--300`                 | Primary shade 300.                         | `hsl(219deg 80% 65%)`                       |\n// | `--graupl-primary--400`                 | Primary shade 400.                         | `hsl(219deg 75% 55%)`                       |\n// | `--graupl-primary--500`                 | Primary shade 500.                         | `hsl(219deg 75% 50%)`                       |\n// | `--graupl-primary--600`                 | Primary shade 600.                         | `hsl(219deg 75% 45%)`                       |\n// | `--graupl-primary--700`                 | Primary shade 700.                         | `hsl(219deg 80% 35%)`                       |\n// | `--graupl-primary--800`                 | Primary shade 800.                         | `hsl(219deg 90% 20%)`                       |\n// | `--graupl-primary--900`                 | Primary shade 900.                         | `hsl(219deg 100% 10%)`                      |\n// | `--graupl-secondary`                    | Secondary base colour.                     | `hsl(235deg 15% 50%)`                       |\n// | `--graupl-secondary--100`               | Secondary shade 100.                       | `hsl(235deg 40% 95%)`                       |\n// | `--graupl-secondary--200`               | Secondary shade 200.                       | `hsl(235deg 30% 80%)`                       |\n// | `--graupl-secondary--300`               | Secondary shade 300.                       | `hsl(235deg 20% 65%)`                       |\n// | `--graupl-secondary--400`               | Secondary shade 400.                       | `hsl(235deg 15% 55%)`                       |\n// | `--graupl-secondary--500`               | Secondary shade 500.                       | `hsl(235deg 15% 50%)`                       |\n// | `--graupl-secondary--600`               | Secondary shade 600.                       | `hsl(235deg 15% 45%)`                       |\n// | `--graupl-secondary--700`               | Secondary shade 700.                       | `hsl(235deg 20% 35%)`                       |\n// | `--graupl-secondary--800`               | Secondary shade 800.                       | `hsl(235deg 30% 20%)`                       |\n// | `--graupl-secondary--900`               | Secondary shade 900.                       | `hsl(235deg 40% 10%)`                       |\n// | `--graupl-tertiary`                     | Tertiary base colour.                      | `hsl(340deg 60% 50%)`                       |\n// | `--graupl-tertiary--100`                | Tertiary shade 100.                        | `hsl(340deg 85% 95%)`                       |\n// | `--graupl-tertiary--200`                | Tertiary shade 200.                        | `hsl(340deg 75% 80%)`                       |\n// | `--graupl-tertiary--300`                | Tertiary shade 300.                        | `hsl(340deg 65% 65%)`                       |\n// | `--graupl-tertiary--400`                | Tertiary shade 400.                        | `hsl(340deg 60% 55%)`                       |\n// | `--graupl-tertiary--500`                | Tertiary shade 500.                        | `hsl(340deg 60% 50%)`                       |\n// | `--graupl-tertiary--600`                | Tertiary shade 600.                        | `hsl(340deg 60% 45%)`                       |\n// | `--graupl-tertiary--700`                | Tertiary shade 700.                        | `hsl(340deg 65% 35%)`                       |\n// | `--graupl-tertiary--800`                | Tertiary shade 800.                        | `hsl(340deg 75% 20%)`                       |\n// | `--graupl-tertiary--900`                | Tertiary shade 900.                        | `hsl(340deg 85% 10%)`                       |\n// | `--graupl-theme-light--primary`         | Light theme primary base colour.           | `var(--graupl-primary)`                     |\n// | `--graupl-theme-light--primary--100`    | Light theme primary shade 100.             | `var(--graupl-primary--100)`                |\n// | `--graupl-theme-light--primary--200`    | Light theme primary shade 200.             | `var(--graupl-primary--200)`                |\n// | `--graupl-theme-light--primary--300`    | Light theme primary shade 300.             | `var(--graupl-primary--300)`                |\n// | `--graupl-theme-light--primary--400`    | Light theme primary shade 400.             | `var(--graupl-primary--400)`                |\n// | `--graupl-theme-light--primary--500`    | Light theme primary shade 500.             | `var(--graupl-primary--500)`                |\n// | `--graupl-theme-light--primary--600`    | Light theme primary shade 600.             | `var(--graupl-primary--600)`                |\n// | `--graupl-theme-light--primary--700`    | Light theme primary shade 700.             | `var(--graupl-primary--700)`                |\n// | `--graupl-theme-light--primary--800`    | Light theme primary shade 800.             | `var(--graupl-primary--800)`                |\n// | `--graupl-theme-light--primary--900`    | Light theme primary shade 900.             | `var(--graupl-primary--900)`                |\n// | `--graupl-theme-light--secondary`       | Light theme secondary base colour.         | `var(--graupl-secondary)`                   |\n// | `--graupl-theme-light--secondary--100`  | Light theme secondary shade 100.           | `var(--graupl-secondary--100)`              |\n// | `--graupl-theme-light--secondary--200`  | Light theme secondary shade 200.           | `var(--graupl-secondary--200)`              |\n// | `--graupl-theme-light--secondary--300`  | Light theme secondary shade 300.           | `var(--graupl-secondary--300)`              |\n// | `--graupl-theme-light--secondary--400`  | Light theme secondary shade 400.           | `var(--graupl-secondary--400)`              |\n// | `--graupl-theme-light--secondary--500`  | Light theme secondary shade 500.           | `var(--graupl-secondary--500)`              |\n// | `--graupl-theme-light--secondary--600`  | Light theme secondary shade 600.           | `var(--graupl-secondary--600)`              |\n// | `--graupl-theme-light--secondary--700`  | Light theme secondary shade 700.           | `var(--graupl-secondary--700)`              |\n// | `--graupl-theme-light--secondary--800`  | Light theme secondary shade 800.           | `var(--graupl-secondary--800)`              |\n// | `--graupl-theme-light--secondary--900`  | Light theme secondary shade 900.           | `var(--graupl-secondary--900)`              |\n// | `--graupl-theme-light--tertiary`        | Light theme tertiary base colour.          | `var(--graupl-tertiary)`                    |\n// | `--graupl-theme-light--tertiary--100`   | Light theme tertiary shade 100.            | `var(--graupl-tertiary--100)`               |\n// | `--graupl-theme-light--tertiary--200`   | Light theme tertiary shade 200.            | `var(--graupl-tertiary--200)`               |\n// | `--graupl-theme-light--tertiary--300`   | Light theme tertiary shade 300.            | `var(--graupl-tertiary--300)`               |\n// | `--graupl-theme-light--tertiary--400`   | Light theme tertiary shade 400.            | `var(--graupl-tertiary--400)`               |\n// | `--graupl-theme-light--tertiary--500`   | Light theme tertiary shade 500.            | `var(--graupl-tertiary--500)`               |\n// | `--graupl-theme-light--tertiary--600`   | Light theme tertiary shade 600.            | `var(--graupl-tertiary--600)`               |\n// | `--graupl-theme-light--tertiary--700`   | Light theme tertiary shade 700.            | `var(--graupl-tertiary--700)`               |\n// | `--graupl-theme-light--tertiary--800`   | Light theme tertiary shade 800.            | `var(--graupl-tertiary--800)`               |\n// | `--graupl-theme-light--tertiary--900`   | Light theme tertiary shade 900.            | `var(--graupl-tertiary--900)`               |\n// | `--graupl-theme-dark--primary`          | Dark theme primary base colour.            | `var(--graupl-primary)`                     |\n// | `--graupl-theme-dark--primary--100`     | Dark theme primary shade 100.              | `var(--graupl-primary--900)`                |\n// | `--graupl-theme-dark--primary--200`     | Dark theme primary shade 200.              | `var(--graupl-primary--800)`                |\n// | `--graupl-theme-dark--primary--300`     | Dark theme primary shade 300.              | `var(--graupl-primary--700)`                |\n// | `--graupl-theme-dark--primary--400`     | Dark theme primary shade 400.              | `var(--graupl-primary--600)`                |\n// | `--graupl-theme-dark--primary--500`     | Dark theme primary shade 500.              | `var(--graupl-primary--500)`                |\n// | `--graupl-theme-dark--primary--600`     | Dark theme primary shade 600.              | `var(--graupl-primary--400)`                |\n// | `--graupl-theme-dark--primary--700`     | Dark theme primary shade 700.              | `var(--graupl-primary--300)`                |\n// | `--graupl-theme-dark--primary--800`     | Dark theme primary shade 800.              | `var(--graupl-primary--200)`                |\n// | `--graupl-theme-dark--primary--900`     | Dark theme primary shade 900.              | `var(--graupl-primary--100)`                |\n// | `--graupl-theme-dark--secondary`        | Dark theme secondary base colour.          | `var(--graupl-secondary)`                   |\n// | `--graupl-theme-dark--secondary--100`   | Dark theme secondary shade 100.            | `var(--graupl-secondary--900)`              |\n// | `--graupl-theme-dark--secondary--200`   | Dark theme secondary shade 200.            | `var(--graupl-secondary--800)`              |\n// | `--graupl-theme-dark--secondary--300`   | Dark theme secondary shade 300.            | `var(--graupl-secondary--700)`              |\n// | `--graupl-theme-dark--secondary--400`   | Dark theme secondary shade 400.            | `var(--graupl-secondary--600)`              |\n// | `--graupl-theme-dark--secondary--500`   | Dark theme secondary shade 500.            | `var(--graupl-secondary--500)`              |\n// | `--graupl-theme-dark--secondary--600`   | Dark theme secondary shade 600.            | `var(--graupl-secondary--400)`              |\n// | `--graupl-theme-dark--secondary--700`   | Dark theme secondary shade 700.            | `var(--graupl-secondary--300)`              |\n// | `--graupl-theme-dark--secondary--800`   | Dark theme secondary shade 800.            | `var(--graupl-secondary--200)`              |\n// | `--graupl-theme-dark--secondary--900`   | Dark theme secondary shade 900.            | `var(--graupl-secondary--100)`              |\n// | `--graupl-theme-dark--tertiary`         | Dark theme tertiary base colour.           | `var(--graupl-tertiary)`                    |\n// | `--graupl-theme-dark--tertiary--100`    | Dark theme tertiary shade 100.             | `var(--graupl-tertiary--900)`               |\n// | `--graupl-theme-dark--tertiary--200`    | Dark theme tertiary shade 200.             | `var(--graupl-tertiary--800)`               |\n// | `--graupl-theme-dark--tertiary--300`    | Dark theme tertiary shade 300.             | `var(--graupl-tertiary--700)`               |\n// | `--graupl-theme-dark--tertiary--400`    | Dark theme tertiary shade 400.             | `var(--graupl-tertiary--600)`               |\n// | `--graupl-theme-dark--tertiary--500`    | Dark theme tertiary shade 500.             | `var(--graupl-tertiary--500)`               |\n// | `--graupl-theme-dark--tertiary--600`    | Dark theme tertiary shade 600.             | `var(--graupl-tertiary--400)`               |\n// | `--graupl-theme-dark--tertiary--700`    | Dark theme tertiary shade 700.             | `var(--graupl-tertiary--300)`               |\n// | `--graupl-theme-dark--tertiary--800`    | Dark theme tertiary shade 800.             | `var(--graupl-tertiary--200)`               |\n// | `--graupl-theme-dark--tertiary--900`    | Dark theme tertiary shade 900.             | `var(--graupl-tertiary--100)`               |\n// | `--graupl-theme-active--primary`        | Active theme primary base colour.          | `var(--graupl-theme-light--primary)`        |\n// | `--graupl-theme-active--primary--100`   | Active theme primary shade 100.            | `var(--graupl-theme-light--primary--100)`   |\n// | `--graupl-theme-active--primary--200`   | Active theme primary shade 200.            | `var(--graupl-theme-light--primary--200)`   |\n// | `--graupl-theme-active--primary--300`   | Active theme primary shade 300.            | `var(--graupl-theme-light--primary--300)`   |\n// | `--graupl-theme-active--primary--400`   | Active theme primary shade 400.            | `var(--graupl-theme-light--primary--400)`   |\n// | `--graupl-theme-active--primary--500`   | Active theme primary shade 500.            | `var(--graupl-theme-light--primary--500)`   |\n// | `--graupl-theme-active--primary--600`   | Active theme primary shade 600.            | `var(--graupl-theme-light--primary--600)`   |\n// | `--graupl-theme-active--primary--700`   | Active theme primary shade 700.            | `var(--graupl-theme-light--primary--700)`   |\n// | `--graupl-theme-active--primary--800`   | Active theme primary shade 800.            | `var(--graupl-theme-light--primary--800)`   |\n// | `--graupl-theme-active--primary--900`   | Active theme primary shade 900.            | `var(--graupl-theme-light--primary--900)`   |\n// | `--graupl-theme-active--secondary`      | Active theme secondary base colour.        | `var(--graupl-theme-light--secondary)`      |\n// | `--graupl-theme-active--secondary--100` | Active theme secondary shade 100.          | `var(--graupl-theme-light--secondary--100)` |\n// | `--graupl-theme-active--secondary--200` | Active theme secondary shade 200.          | `var(--graupl-theme-light--secondary--200)` |\n// | `--graupl-theme-active--secondary--300` | Active theme secondary shade 300.          | `var(--graupl-theme-light--secondary--300)` |\n// | `--graupl-theme-active--secondary--400` | Active theme secondary shade 400.          | `var(--graupl-theme-light--secondary--400)` |\n// | `--graupl-theme-active--secondary--500` | Active theme secondary shade 500.          | `var(--graupl-theme-light--secondary--500)` |\n// | `--graupl-theme-active--secondary--600` | Active theme secondary shade 600.          | `var(--graupl-theme-light--secondary--600)` |\n// | `--graupl-theme-active--secondary--700` | Active theme secondary shade 700.          | `var(--graupl-theme-light--secondary--700)` |\n// | `--graupl-theme-active--secondary--800` | Active theme secondary shade 800.          | `var(--graupl-theme-light--secondary--800)` |\n// | `--graupl-theme-active--secondary--900` | Active theme secondary shade 900.          | `var(--graupl-theme-light--secondary--900)` |\n// | `--graupl-theme-active--tertiary`       | Active theme tertiary base colour.         | `var(--graupl-theme-light--tertiary)`       |\n// | `--graupl-theme-active--tertiary--100`  | Active theme tertiary shade 100.           | `var(--graupl-theme-light--tertiary--100)`  |\n// | `--graupl-theme-active--tertiary--200`  | Active theme tertiary shade 200.           | `var(--graupl-theme-light--tertiary--200)`  |\n// | `--graupl-theme-active--tertiary--300`  | Active theme tertiary shade 300.           | `var(--graupl-theme-light--tertiary--300)`  |\n// | `--graupl-theme-active--tertiary--400`  | Active theme tertiary shade 400.           | `var(--graupl-theme-light--tertiary--400)`  |\n// | `--graupl-theme-active--tertiary--500`  | Active theme tertiary shade 500.           | `var(--graupl-theme-light--tertiary--500)`  |\n// | `--graupl-theme-active--tertiary--600`  | Active theme tertiary shade 600.           | `var(--graupl-theme-light--tertiary--600)`  |\n// | `--graupl-theme-active--tertiary--700`  | Active theme tertiary shade 700.           | `var(--graupl-theme-light--tertiary--700)`  |\n// | `--graupl-theme-active--tertiary--800`  | Active theme tertiary shade 800.           | `var(--graupl-theme-light--tertiary--800)`  |\n// | `--graupl-theme-active--tertiary--900`  | Active theme tertiary shade 900.           | `var(--graupl-theme-light--tertiary--900)`  |\n// | `--graupl-root-color`                   | Base text colour applied to `:root`.       | `var(--graupl-theme-active--primary--900)`  |\n// | `--graupl-root-background`              | Base background colour applied to `:root`. | `var(--graupl-theme-active--primary--100)`  |\n// | `--graupl-color`                        | Text colour token.                         | `var(--graupl-root-color)`                  |\n// | `--graupl-background`                   | Background colour token.                   | `var(--graupl-root-background)`             |\n// | `--graupl-border-color`                 | Border colour token.                       | `var(--graupl-color)`                       |\n//\n// The following sass variables can be used to customize colour generation:\n// | Variable                  | Description                                        | Default Value             |\n// | ---                       | ---                                                | ---                       |\n// | `$selector-base`          | The selector base for the component.               | `.`                       |\n// | `$modifier-selector-base` | The selector base for component modifiers.         | `.`                       |\n// | `$generate-base-colors`   | Flag to generate base colour tokens.               | `true`                    |\n// | `$generate-base-themes`   | Flag to generate base theme tokens.                | `true`                    |\n// | `$theme-selector-base`    | The selector base for the theme modifiers.         | `$modifier-selector-base` |\n// | `$theme-selector-prefix`  | Prefix for theme modifiers.                        | `\".\"`                     |\n// | `$theme-selector-suffix`  | Suffix for theme modifiers.                        | `\"-mode\"`                 |\n// | `$root-selector-base`     | The base selector for the root component.          | `\":\"`                     |\n// | `$root-selector`          | The selector for the root component.               | `\"root\"`                  |\n// | `$colors`                 | Map of base colours and shades.                    | See `_defaults.scss`      |\n// | `$themes`                 | List of available themes.                          | `(light, dark)`           |\n// | `$default-theme`          | Theme used for the active tokens at `:root`.       | `light`                   |\n// | `$theme-mappings`         | Shade remapping per theme.                         | See `_defaults.scss`      |\n// | `$theme-map`              | Expanded map of theme → colour → shade references. | Auto-generated            |\n//\n// @example\n// <div class=\"dark-mode\">\n//   <p>Content inside a dark theme container.</p>\n// </div>\n//\n// @example\n// <div class=\"light-mode\">\n//   <p>Content inside a light theme container.</p>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(theme) {\n  // :root\n  #{defaults.$root-selector-base}#{defaults.$root-selector} {\n    background: $root-background;\n    color: $root-color;\n\n    // Generate the default colour properties.\n    @each $color, $map in defaults.$colors {\n      @each $shade, $value in $map {\n        // Handle _default shade vs proper shade mappings.\n        @if $shade == \"_default\" {\n          --#{root-defaults.$prefix}#{$color}: #{$value};\n        } @else {\n          --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};\n        }\n      }\n    }\n\n    // Generate the active theme properties.\n    @each $color, $map in map.get($themes, defaults.$default-theme) {\n      @each $shade, $value in $map {\n        // Handle _default shade vs proper shade mappings.\n        @if $shade == \"_default\" {\n          --#{root-defaults.$prefix}theme-active--#{$color}: #{$value};\n        } @else {\n          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};\n        }\n      }\n    }\n  }\n\n  // Generate the available theme properties.\n  @each $theme-name, $theme in $themes {\n    // e.g. .light-mode, .dark-mode\n    @include theme.theme($theme-name) {\n      @each $color, $map in $theme {\n        @each $shade, $value in $map {\n          // Handle _default shade vs proper shade mappings.\n          @if $shade == \"_default\" {\n            --#{root-defaults.$prefix}theme-active--#{$color}: #{$value};\n          } @else {\n            --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};\n          }\n        }\n      }\n\n      color-scheme: #{$theme-name};\n    }\n  }\n}\n","// @graupl/core color theme variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property                       | Default                                   |\n// | ------------------------------------- | ----------------------------------------- |\n// | --graupl-primary                      | hsl(219deg 75% 50%)                       |\n// | --graupl-primary--100                 | hsl(219deg 100% 95%)                      |\n// | --graupl-primary--200                 | hsl(219deg 90% 80%)                       |\n// | --graupl-primary--300                 | hsl(219deg 80% 65%)                       |\n// | --graupl-primary--400                 | hsl(219deg 75% 55%)                       |\n// | --graupl-primary--500                 | hsl(219deg 75% 50%)                       |\n// | --graupl-primary--600                 | hsl(219deg 75% 45%)                       |\n// | --graupl-primary--700                 | hsl(219deg 80% 35%)                       |\n// | --graupl-primary--800                 | hsl(219deg 90% 20%)                       |\n// | --graupl-primary--900                 | hsl(219deg 100% 10%)                      |\n// | --graupl-secondary                    | hsl(235deg 15% 50%)                       |\n// | --graupl-secondary--100               | hsl(235deg 40% 95%)                       |\n// | --graupl-secondary--200               | hsl(235deg 30% 80%)                       |\n// | --graupl-secondary--300               | hsl(235deg 20% 65%)                       |\n// | --graupl-secondary--400               | hsl(235deg 15% 55%)                       |\n// | --graupl-secondary--500               | hsl(235deg 15% 50%)                       |\n// | --graupl-secondary--600               | hsl(235deg 15% 45%)                       |\n// | --graupl-secondary--700               | hsl(235deg 20% 35%)                       |\n// | --graupl-secondary--800               | hsl(235deg 30% 20%)                       |\n// | --graupl-secondary--900               | hsl(235deg 40% 10%)                       |\n// | --graupl-tertiary                     | hsl(340deg 60% 50%)                       |\n// | --graupl-tertiary--100                | hsl(340deg 85% 95%)                       |\n// | --graupl-tertiary--200                | hsl(340deg 75% 80%)                       |\n// | --graupl-tertiary--300                | hsl(340deg 65% 65%)                       |\n// | --graupl-tertiary--400                | hsl(340deg 60% 55%)                       |\n// | --graupl-tertiary--500                | hsl(340deg 60% 50%)                       |\n// | --graupl-tertiary--600                | hsl(340deg 60% 45%)                       |\n// | --graupl-tertiary--700                | hsl(340deg 65% 35%)                       |\n// | --graupl-tertiary--800                | hsl(340deg 75% 20%)                       |\n// | --graupl-tertiary--900                | hsl(340deg 85% 10%)                       |\n// | --graupl-theme--light--primary        | var(--graupl-primary)                     |\n// | --graupl-theme-light--primary--100    | var(--graupl-primary--100)                |\n// | --graupl-theme-light--primary--200    | var(--graupl-primary--200)                |\n// | --graupl-theme-light--primary--300    | var(--graupl-primary--300)                |\n// | --graupl-theme-light--primary--400    | var(--graupl-primary--400)                |\n// | --graupl-theme-light--primary--500    | var(--graupl-primary--500)                |\n// | --graupl-theme-light--primary--600    | var(--graupl-primary--600)                |\n// | --graupl-theme-light--primary--700    | var(--graupl-primary--700)                |\n// | --graupl-theme-light--primary--800    | var(--graupl-primary--800)                |\n// | --graupl-theme-light--primary--900    | var(--graupl-primary--900)                |\n// | --graupl-theme--light--secondary      | var(--graupl-secondary)                   |\n// | --graupl-theme-light--secondary--100  | var(--graupl-secondary--100)              |\n// | --graupl-theme-light--secondary--200  | var(--graupl-secondary--200)              |\n// | --graupl-theme-light--secondary--300  | var(--graupl-secondary--300)              |\n// | --graupl-theme-light--secondary--400  | var(--graupl-secondary--400)              |\n// | --graupl-theme-light--secondary--500  | var(--graupl-secondary--500)              |\n// | --graupl-theme-light--secondary--600  | var(--graupl-secondary--600)              |\n// | --graupl-theme-light--secondary--700  | var(--graupl-secondary--700)              |\n// | --graupl-theme-light--secondary--800  | var(--graupl-secondary--800)              |\n// | --graupl-theme-light--secondary--900  | var(--graupl-secondary--900)              |\n// | --graupl-theme--light--tertiary       | var(--graupl-tertiary)                    |\n// | --graupl-theme-light--tertiary--100   | var(--graupl-tertiary--100)               |\n// | --graupl-theme-light--tertiary--200   | var(--graupl-tertiary--200)               |\n// | --graupl-theme-light--tertiary--300   | var(--graupl-tertiary--300)               |\n// | --graupl-theme-light--tertiary--400   | var(--graupl-tertiary--400)               |\n// | --graupl-theme-light--tertiary--500   | var(--graupl-tertiary--500)               |\n// | --graupl-theme-light--tertiary--600   | var(--graupl-tertiary--600)               |\n// | --graupl-theme-light--tertiary--700   | var(--graupl-tertiary--700)               |\n// | --graupl-theme-light--tertiary--800   | var(--graupl-tertiary--800)               |\n// | --graupl-theme-light--tertiary--900   | var(--graupl-tertiary--900)               |\n// | --graupl-theme--dark--primary         | var(--graupl-primary)                     |\n// | --graupl-theme-dark--primary--100     | var(--graupl-primary--900)                |\n// | --graupl-theme-dark--primary--200     | var(--graupl-primary--800)                |\n// | --graupl-theme-dark--primary--300     | var(--graupl-primary--700)                |\n// | --graupl-theme-dark--primary--400     | var(--graupl-primary--600)                |\n// | --graupl-theme-dark--primary--500     | var(--graupl-primary--500)                |\n// | --graupl-theme-dark--primary--600     | var(--graupl-primary--400)                |\n// | --graupl-theme-dark--primary--700     | var(--graupl-primary--300)                |\n// | --graupl-theme-dark--primary--800     | var(--graupl-primary--200)                |\n// | --graupl-theme-dark--primary--900     | var(--graupl-primary--100)                |\n// | --graupl-theme--dark--secondary       | var(--graupl-secondary)                   |\n// | --graupl-theme-dark--secondary--100   | var(--graupl-secondary--900)              |\n// | --graupl-theme-dark--secondary--200   | var(--graupl-secondary--800)              |\n// | --graupl-theme-dark--secondary--300   | var(--graupl-secondary--700)              |\n// | --graupl-theme-dark--secondary--400   | var(--graupl-secondary--600)              |\n// | --graupl-theme-dark--secondary--500   | var(--graupl-secondary--500)              |\n// | --graupl-theme-dark--secondary--600   | var(--graupl-secondary--400)              |\n// | --graupl-theme-dark--secondary--700   | var(--graupl-secondary--300)              |\n// | --graupl-theme-dark--secondary--800   | var(--graupl-secondary--200)              |\n// | --graupl-theme-dark--secondary--900   | var(--graupl-secondary--100)              |\n// | --graupl-theme--dark--tertiary        | var(--graupl-tertiary)                    |\n// | --graupl-theme-dark--tertiary--100    | var(--graupl-tertiary--900)               |\n// | --graupl-theme-dark--tertiary--200    | var(--graupl-tertiary--800)               |\n// | --graupl-theme-dark--tertiary--300    | var(--graupl-tertiary--700)               |\n// | --graupl-theme-dark--tertiary--400    | var(--graupl-tertiary--600)               |\n// | --graupl-theme-dark--tertiary--500    | var(--graupl-tertiary--500)               |\n// | --graupl-theme-dark--tertiary--600    | var(--graupl-tertiary--400)               |\n// | --graupl-theme-dark--tertiary--700    | var(--graupl-tertiary--300)               |\n// | --graupl-theme-dark--tertiary--800    | var(--graupl-tertiary--200)               |\n// | --graupl-theme-dark--tertiary--900    | var(--graupl-tertiary--100)               |\n// | --graupl-theme-active--primary        | var(--graupl-theme-light--primary)        |\n// | --graupl-theme-active--primary--100   | var(--graupl-theme-light--primary--100)   |\n// | --graupl-theme-active--primary--200   | var(--graupl-theme-light--primary--200)   |\n// | --graupl-theme-active--primary--300   | var(--graupl-theme-light--primary--300)   |\n// | --graupl-theme-active--primary--400   | var(--graupl-theme-light--primary--400)   |\n// | --graupl-theme-active--primary--500   | var(--graupl-theme-light--primary--500)   |\n// | --graupl-theme-active--primary--600   | var(--graupl-theme-light--primary--600)   |\n// | --graupl-theme-active--primary--700   | var(--graupl-theme-light--primary--700)   |\n// | --graupl-theme-active--primary--800   | var(--graupl-theme-light--primary--800)   |\n// | --graupl-theme-active--primary--900   | var(--graupl-theme-light--primary--900)   |\n// | --graupl-theme-active--secondary      | var(--graupl-theme-light--secondary)      |\n// | --graupl-theme-active--secondary--100 | var(--graupl-theme-light--secondary--100) |\n// | --graupl-theme-active--secondary--200 | var(--graupl-theme-light--secondary--200) |\n// | --graupl-theme-active--secondary--300 | var(--graupl-theme-light--secondary--300) |\n// | --graupl-theme-active--secondary--400 | var(--graupl-theme-light--secondary--400) |\n// | --graupl-theme-active--secondary--500 | var(--graupl-theme-light--secondary--500) |\n// | --graupl-theme-active--secondary--600 | var(--graupl-theme-light--secondary--600) |\n// | --graupl-theme-active--secondary--700 | var(--graupl-theme-light--secondary--700) |\n// | --graupl-theme-active--secondary--800 | var(--graupl-theme-light--secondary--800) |\n// | --graupl-theme-active--secondary--900 | var(--graupl-theme-light--secondary--900) |\n// | --graupl-theme-active--tertiary       | var(--graupl-theme-light--tertiary)       |\n// | --graupl-theme-active--tertiary--100  | var(--graupl-theme-light--tertiary--100)  |\n// | --graupl-theme-active--tertiary--200  | var(--graupl-theme-light--tertiary--200)  |\n// | --graupl-theme-active--tertiary--300  | var(--graupl-theme-light--tertiary--300)  |\n// | --graupl-theme-active--tertiary--400  | var(--graupl-theme-light--tertiary--400)  |\n// | --graupl-theme-active--tertiary--500  | var(--graupl-theme-light--tertiary--500)  |\n// | --graupl-theme-active--tertiary--600  | var(--graupl-theme-light--tertiary--600)  |\n// | --graupl-theme-active--tertiary--700  | var(--graupl-theme-light--tertiary--700)  |\n// | --graupl-theme-active--tertiary--800  | var(--graupl-theme-light--tertiary--800)  |\n// | --graupl-theme-active--tertiary--900  | var(--graupl-theme-light--tertiary--900)  |\n// | --graupl-root-color                   | var(--graupl-theme-active--primary--900)  |\n// | --graupl-root-background              | var(--graupl-theme-active--primary--100)  |\n// | --graupl-color                        | var(--graupl-root-color)                  |\n// | --graupl-background                   | var(--graupl-root-background)             |\n// | --graupl-border-color                 | var(--graupl-color)                       |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// A colour map of base colours and their shades.\n$colors: ();\n\n// Create a map for each colour.\n@each $color, $map in defaults.$colors {\n  // A map for the current colour.\n  $color-map: ();\n\n  @each $shade, $value in $map {\n    $color-property: \"\";\n\n    // Set the custom prop name and fallback value.\n    // Handle _default shade vs proper shade mappings.\n    @if $shade == \"_default\" {\n      // --graupl-primary, --graupl-secondary, --graupl-tertiary\n      $color-property: var(--#{root-defaults.$prefix}#{$color}, $value);\n    } @else {\n      // --graupl-primary--100, --graupl-primary--200, --graupl-primary--300, --graupl-primary--400, --graupl-primary--500, --graupl-primary--600, --graupl-primary--700, --graupl-primary--800, --graupl-primary--900\n      // --graupl-secondary--100, --graupl-secondary--200, --graupl-secondary--300, --graupl-secondary--400, --graupl-secondary--500, --graupl-secondary--600, --graupl-secondary--700, --graupl-secondary--800, --graupl-secondary--900\n      // --graupl-tertiary--100, --graupl-tertiary--200, --graupl-tertiary--300, --graupl-tertiary--400, --graupl-tertiary--500, --graupl-tertiary--600, --graupl-tertiary--700, --graupl-tertiary--800, --graupl-tertiary--900\n      $color-property: var(\n        --#{root-defaults.$prefix}#{$color}--#{$shade},\n        $value\n      );\n    }\n\n    // Add the custom prop to the map.\n    $color-map: map.merge(\n      $color-map,\n      (\n        $shade: $color-property,\n      )\n    );\n  }\n\n  // Merge the colour map with the existing colours.\n  $colors: map.merge(\n    $colors,\n    (\n      $color: $color-map,\n    )\n  );\n}\n\n$themes: (\n  active: (),\n);\n\n// Generate all of the theme properties.\n@each $theme-name, $theme-map in defaults.$theme-map {\n  $theme: ();\n\n  @each $color-name, $map in $theme-map {\n    $color-map: ();\n\n    @each $shade, $value in $map {\n      $color-property: \"\";\n\n      // Set the custom prop name and fallback value.\n      // Handle _default shade vs proper shade mappings.\n      @if $shade == \"_default\" {\n        // --graupl-theme--light--primary, --graupl-theme--light--secondary, --graupl-theme--light--tertiary\n        // --graupl-theme--dark--primary, --graupl-theme--dark--secondary, --graupl-theme--dark--tertiary\n        $color-property: var(\n          --#{root-defaults.$prefix}theme--#{$theme-name}--#{$color-name},\n          #{map.get($colors, map.get($value, color), map.get($value, shade))}\n        );\n      } @else {\n        // --graupl-theme-light--primary--100, --graupl-theme-light--primary--200, --graupl-theme-light--primary--300, --graupl-theme-light--primary--400, --graupl-theme-light--primary--500, --graupl-theme-light--primary--600, --graupl-theme-light--primary--700, --graupl-theme-light--primary--800, --graupl-theme-light--primary--900\n        // --graupl-theme-light--secondary--100, --graupl-theme-light--secondary--200, --graupl-theme-light--secondary--300, --graupl-theme-light--secondary--400, --graupl-theme-light--secondary--500, --graupl-theme-light--secondary--600, --graupl-theme-light--secondary--700, --graupl-theme-light--secondary--800, --graupl-theme-light--secondary--900\n        // --graupl-theme-light--tertiary--100, --graupl-theme-light--tertiary--200, --graupl-theme-light--tertiary--300, --graupl-theme-light--tertiary--400, --graupl-theme-light--tertiary--500, --graupl-theme-light--tertiary--600, --graupl-theme-light--tertiary--700, --graupl-theme-light--tertiary--800, --graupl-theme-light--tertiary--900\n        // --graupl-theme-dark--primary--100, --graupl-theme-dark--primary--200, --graupl-theme-dark--primary--300, --graupl-theme-dark--primary--400, --graupl-theme-dark--primary--500, --graupl-theme-dark--primary--600, --graupl-theme-dark--primary--700, --graupl-theme-dark--primary--800, --graupl-theme-dark--primary--900\n        // --graupl-theme-dark--secondary--100, --graupl-theme-dark--secondary--200, --graupl-theme-dark--secondary--300, --graupl-theme-dark--secondary--400, --graupl-theme-dark--secondary--500, --graupl-theme-dark--secondary--600, --graupl-theme-dark--secondary--700, --graupl-theme-dark--secondary--800, --graupl-theme-dark--secondary--900\n        // --graupl-theme-dark--tertiary--100, --graupl-theme-dark--tertiary--200, --graupl-theme-dark--tertiary--300, --graupl-theme-dark--tertiary--400, --graupl-theme-dark--tertiary--500, --graupl-theme-dark--tertiary--600, --graupl-theme-dark--tertiary--700, --graupl-theme-dark--tertiary--800, --graupl-theme-dark--tertiary--900\n        $color-property: var(\n          --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},\n          #{map.get($colors, map.get($value, color), map.get($value, shade))}\n        );\n      }\n\n      $color-map: map.merge(\n        $color-map,\n        (\n          $shade: $color-property,\n        )\n      );\n    }\n\n    $theme: map.merge(\n      $theme,\n      (\n        $color-name: $color-map,\n      )\n    );\n  }\n\n  $themes: map.merge(\n    $themes,\n    (\n      $theme-name: $theme,\n    )\n  );\n}\n\n// Generate the active theme properties.\n@if map.has-key($themes, defaults.$default-theme) {\n  @each $color-name, $map in map.get($themes, defaults.$default-theme) {\n    $color-map: ();\n\n    @each $shade, $value in $map {\n      $color-property: \"\";\n\n      // Set the custom prop name and fallback value.\n      // Handle _default shade vs proper shade mappings.\n      @if $shade == \"_default\" {\n        // --graupl-theme-active--primary, --graupl-theme-active--secondary, --graupl-theme-active--tertiary\n        $color-property: var(\n          --#{root-defaults.$prefix}theme-active--#{$color-name},\n          #{$value}\n        );\n      } @else {\n        // --graupl-theme-active--primary--100, --graupl-theme-active--primary--200, --graupl-theme-active--primary--300, --graupl-theme-active--primary--400, --graupl-theme-active--primary--500, --graupl-theme-active--primary--600, --graupl-theme-active--primary--700, --graupl-theme-active--primary--800, --graupl-theme-active--primary--900\n        // --graupl-theme-active--secondary--100, --graupl-theme-active--secondary--200, --graupl-theme-active--secondary--300, --graupl-theme-active--secondary--400, --graupl-theme-active--secondary--500, --graupl-theme-active--secondary--600, --graupl-theme-active--secondary--700, --graupl-theme-active--secondary--800, --graupl-theme-active--secondary--900\n        // --graupl-theme-active--tertiary--100, --graupl-theme-active--tertiary--200, --graupl-theme-active--tertiary--300, --graupl-theme-active--tertiary--400, --graupl-theme-active--tertiary--500, --graupl-theme-active--tertiary--600, --graupl-theme-active--tertiary--700, --graupl-theme-active--tertiary--800, --graupl-theme-active--tertiary--900\n        $color-property: var(\n          --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},\n          #{$value}\n        );\n      }\n\n      $color-map: map.merge(\n        $color-map,\n        (\n          $shade: $color-property,\n        )\n      );\n    }\n\n    $themes: map.merge(\n      $themes,\n      (\n        active: map.merge(\n            map.get($themes, active),\n            (\n              $color-name: $color-map,\n            )\n          ),\n      )\n    );\n  }\n}\n\n// Colour properties.\n// --graupl-root-color\n$root-color: var(--#{root-defaults.$prefix}root-color);\n\n// --graupl-root-background\n$root-background: var(--#{root-defaults.$prefix}root-background);\n\n@if map.has-key($themes, active, primary, 900) {\n  // --graupl-root-color\n  $root-color: var(\n    --#{root-defaults.$prefix}root-color,\n    #{map.get(map.get(map.get($themes, active), primary), 900)}\n  );\n}\n\n@if map.has-key($themes, active, primary, 100) {\n  // --graupl-root-background\n  $root-background: var(\n    --#{root-defaults.$prefix}root-background,\n    #{map.get(map.get(map.get($themes, active), primary), 100)}\n  );\n}\n\n// --graupl-color\n$color: var(--#{root-defaults.$prefix}color, #{$root-color});\n\n// --graupl-background\n$background: var(--#{root-defaults.$prefix}background, #{$root-background});\n\n// --graupl-border-color\n$border-color: var(--#{root-defaults.$prefix}border-color, #{$color});\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n///   The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n  #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n    @content;\n  }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n///   The map of custom props.\n/// @param {string} $selector-base\n///   The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n///   The selector prefix for the theme modifer.\n/// @param {string} $scope\n///   The scope of the custom properties.\n/// @param {string} $base\n///   The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n  $theme-map,\n  $selector-base,\n  $selector-prefix,\n  $scope: \"\",\n  $base: \"&\"\n) {\n  @each $color, $map in $theme-map {\n    // e.g. &.primary, &.secondary, &.tertiary\n    #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n      @each $prop, $value in $map {\n        --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n            map.get($value, color),\n            map.get($value, shade)\n          )};\n      }\n    }\n  }\n}\n"],"names":[]}

package/dist/css/theme/typography.css

@@ -1,2 +1,2 @@
-@layer graupl.base{p{margin:var(--graupl-paragraph-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0)}small{margin:var(--graupl-small-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0)}h1{margin:var(--graupl-h1-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}h2{margin:var(--graupl-h2-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}h3{margin:var(--graupl-h3-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}h4{margin:var(--graupl-h4-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}h5{margin:var(--graupl-h5-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}h6{margin:var(--graupl-h6-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)) 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))}}@layer graupl.theme{:root{font-family:var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-root-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}b,strong{font-weight:var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))}body{color:var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));font-size:var(--graupl-body-font-size,var(--graupl-font-base,calc(var(--graupl-font-size-base, 1rem)*1)));font-weight:var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400));line-height:var(--graupl-body-line-height,var(--graupl-line-height,1.2em))}p{color:var(--graupl-paragraph-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));font-size:var(--graupl-paragraph-font-size,var(--graupl-body-font-size,var(--graupl-font-base,calc(var(--graupl-font-size-base, 1rem)*1))));font-weight:var(--graupl-paragraph-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)));line-height:var(--graupl-paragraph-line-height,var(--graupl-body-line-height,var(--graupl-line-height,1.2em)))}small{color:var(--graupl-small-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));font-size:var(--graupl-small-font-size,var(--graupl-font-sm,calc(var(--graupl-font-size-base, 1rem)*.833)));font-weight:var(--graupl-small-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)));line-height:var(--graupl-small-line-height,var(--graupl-line-height,1.2em))}h1{color:var(--graupl-h1-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h1-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h1-font-size,var(--graupl-font-5xl,calc(var(--graupl-font-size-base, 1rem)*2.986)));font-weight:var(--graupl-h1-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h1-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h2{color:var(--graupl-h2-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h2-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h2-font-size,var(--graupl-font-4xl,calc(var(--graupl-font-size-base, 1rem)*2.488)));font-weight:var(--graupl-h2-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h2-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h3{color:var(--graupl-h3-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h3-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h3-font-size,var(--graupl-font-3xl,calc(var(--graupl-font-size-base, 1rem)*2.074)));font-weight:var(--graupl-h3-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h3-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h4{color:var(--graupl-h4-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h4-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(var(--graupl-font-size-base, 1rem)*1.728)));font-weight:var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h5{color:var(--graupl-h5-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h5-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h5-font-size,var(--graupl-font-xl,calc(var(--graupl-font-size-base, 1rem)*1.44)));font-weight:var(--graupl-h5-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h5-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h6{color:var(--graupl-h6-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h6-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h6-font-size,var(--graupl-font-lg,calc(var(--graupl-font-size-base, 1rem)*1.2)));font-weight:var(--graupl-h6-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h6-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}}
-/*# sourceMappingURL=typography.css.map */
+@layer graupl.base{p{margin:var(--graupl-paragraph-margin,0 0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0)}small{margin:var(--graupl-small-margin,0 0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0)}h1{margin:var(--graupl-h1-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}h2{margin:var(--graupl-h2-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}h3{margin:var(--graupl-h3-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}h4{margin:var(--graupl-h4-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}h5{margin:var(--graupl-h5-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}h6{margin:var(--graupl-h6-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))}}@layer graupl.theme{:root{font-family:var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-root-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}b,strong{font-weight:var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))}body{color:var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));font-size:var(--graupl-body-font-size,var(--graupl-font-base,calc(1*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400));line-height:var(--graupl-body-line-height,var(--graupl-line-height,1.2em))}p{color:var(--graupl-paragraph-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));font-size:var(--graupl-paragraph-font-size,var(--graupl-body-font-size,var(--graupl-font-base,calc(1*var(--graupl-font-size-base,1rem)))));font-weight:var(--graupl-paragraph-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)));line-height:var(--graupl-paragraph-line-height,var(--graupl-body-line-height,var(--graupl-line-height,1.2em)))}small{color:var(--graupl-small-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));font-size:var(--graupl-small-font-size,var(--graupl-font-sm,calc(.833*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-small-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)));line-height:var(--graupl-small-line-height,var(--graupl-line-height,1.2em))}h1{color:var(--graupl-h1-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h1-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h1-font-size,var(--graupl-font-5xl,calc(2.986*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h1-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h1-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h2{color:var(--graupl-h2-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h2-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h2-font-size,var(--graupl-font-4xl,calc(2.488*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h2-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h2-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h3{color:var(--graupl-h3-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h3-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h3-font-size,var(--graupl-font-3xl,calc(2.074*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h3-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h3-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h4{color:var(--graupl-h4-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h4-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(1.728*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h5{color:var(--graupl-h5-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h5-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h5-font-size,var(--graupl-font-xl,calc(1.44*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h5-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h5-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}h6{color:var(--graupl-h6-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));font-family:var(--graupl-h6-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)));font-size:var(--graupl-h6-font-size,var(--graupl-font-lg,calc(1.2*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-h6-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))));line-height:var(--graupl-h6-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))}}
+/*# sourceMappingURL=typography.css.map */

package/dist/css/theme/typography.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/theme/typography/_index.scss","typography.css","../../../node_modules/@graupl/core/src/scss/theme/typography/_variables.scss"],"names":[],"mappings":"AASI,mBCFF,EACE,uGCJF,CDOA,MACE,mGCLF,CDQA,GACE,qLCNF,CDSA,GACE,qLCPF,CDUA,GACE,qLCRF,CDWA,GACE,qLCTF,CDYA,GACE,qLCVF,CDaA,GACE,qLCXF,CACF,CFjBI,oBCgCF,MACE,qIEGe,CFFf,yECZF,CDeA,SAEE,6ECbF,CDgBA,KACE,+LEeS,CFdT,yGEEa,CFDb,+EESe,CFRf,0ECdF,CDiBA,EACE,6NE4Bc,CF3Bd,2IEWkB,CFVlB,mHEsBoB,CFrBpB,8GCfF,CDkBA,MACE,yNEyCU,CFxCV,2GEwBc,CFvBd,+GEmCgB,CFlChB,2EChBF,CDmBA,GACE,kPE0EO,CFzEP,oMEiEa,CFhEb,0GEuDW,CFtDX,4IEmEa,CFlEb,0GCjBF,CDoBA,GACE,kPEsFO,CFrFP,oME6Ea,CF5Eb,0GEmEW,CFlEX,4IE+Ea,CF9Eb,0GClBF,CDqBA,GACE,kPEkGO,CFjGP,oMEyFa,CFxFb,0GE+EW,CF9EX,4IE2Fa,CF1Fb,0GCnBF,CDsBA,GACE,kPE8GO,CF7GP,oMEqGa,CFpGb,0GE2FW,CF1FX,4IEuGa,CFtGb,0GCpBF,CDuBA,GACE,kPE0HO,CFzHP,oMEiHa,CFhHb,wGEuGW,CFtGX,4IEmHa,CFlHb,0GCrBF,CDwBA,GACE,kPEsIO,CFrIP,oME6Ha,CF5Hb,uGEmHW,CFlHX,4IE+Ha,CF9Hb,0GCtBF,CACF","file":"typography.css"}
+{"version":3,"sourceRoot":null,"mappings":"AESI,mBCwIkC,wGAKJ,wGAKH,qLAKA,qLAKA,qLAKA,qLAKA,qLAKA,sLD3K3B,oBCkLF,sNAM+B,uFAMA,ycAQK,8kBAQJ,ugBAQH,6xBASA,6xBASA,6xBASA,6xBASA,2xBASA","sources":["dist/css/theme/typography.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_variables.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.base {\n  p {\n    margin: var(--graupl-paragraph-margin, 0 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0);\n  }\n  small {\n    margin: var(--graupl-small-margin, 0 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0);\n  }\n  h1 {\n    margin: var(--graupl-h1-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n  h2 {\n    margin: var(--graupl-h2-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n  h3 {\n    margin: var(--graupl-h3-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n  h4 {\n    margin: var(--graupl-h4-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n  h5 {\n    margin: var(--graupl-h5-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n  h6 {\n    margin: var(--graupl-h6-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0));\n  }\n}\n@layer graupl.theme {\n  :root {\n    font-family: var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);\n    font-size: var(--graupl-root-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));\n  }\n  b,\n  strong {\n    font-weight: var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700));\n  }\n  body {\n    color: var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n    font-size: var(--graupl-body-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-body-font-weight, var(--graupl-font-weight-normal, 400));\n    line-height: var(--graupl-body-line-height, var(--graupl-line-height, 1.2em));\n  }\n  p {\n    color: var(--graupl-paragraph-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    font-size: var(--graupl-paragraph-font-size, var(--graupl-body-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n    font-weight: var(--graupl-paragraph-font-weight, var(--graupl-body-font-weight, var(--graupl-font-weight-normal, 400)));\n    line-height: var(--graupl-paragraph-line-height, var(--graupl-body-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  small {\n    color: var(--graupl-small-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    font-size: var(--graupl-small-font-size, var(--graupl-font-sm, calc(0.833 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-small-font-weight, var(--graupl-body-font-weight, var(--graupl-font-weight-normal, 400)));\n    line-height: var(--graupl-small-line-height, var(--graupl-line-height, 1.2em));\n  }\n  h1 {\n    color: var(--graupl-h1-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h1-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h1-font-size, var(--graupl-font-5xl, calc(2.986 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h1-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h1-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  h2 {\n    color: var(--graupl-h2-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h2-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h2-font-size, var(--graupl-font-4xl, calc(2.488 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h2-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h2-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  h3 {\n    color: var(--graupl-h3-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h3-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h3-font-size, var(--graupl-font-3xl, calc(2.074 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h3-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h3-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  h4 {\n    color: var(--graupl-h4-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h4-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h4-font-size, var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h4-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h4-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  h5 {\n    color: var(--graupl-h5-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h5-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h5-font-size, var(--graupl-font-xl, calc(1.44 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h5-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h5-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n  h6 {\n    color: var(--graupl-h6-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n    font-family: var(--graupl-h6-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif)));\n    font-size: var(--graupl-h6-font-size, var(--graupl-font-lg, calc(1.2 * var(--graupl-font-size-base, 1rem))));\n    font-weight: var(--graupl-h6-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700))));\n    line-height: var(--graupl-h6-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em)));\n  }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n  xs: 0.694,\n  sm: 0.833,\n  base: 1,\n  lg: 1.2,\n  xl: 1.44,\n  2xl: 1.728,\n  3xl: 2.074,\n  4xl: 2.488,\n  5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n  $font-size-multipliers: map.merge(\n    $-font-size-multipliers,\n    $font-size-multipliers\n  );\n}\n\n// Weights.\n$-font-weights: (\n  light: 300,\n  normal: 400,\n  bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n  $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n  system-ui,\n  -apple-system,\n  blinkmacsystemfont,\n  \"Segoe UI\",\n  roboto,\n  \"Helvetica Neue\",\n  arial,\n  sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core typography theme styles.\n//\n// This module defines typography tokens for body text, small text, and headings.\n//\n// The following selectors are generated by default:\n// - `:root`: Sets root font family and size.\n// - `b`: Applies the bold weight token.\n// - `strong`: Applies the bold weight token.\n// - `body`: Applies body typography tokens.\n// - `p`: Applies paragraph typography tokens.\n// - `small`: Applies small text typography tokens.\n// - `h1`: Applies H1 typography tokens.\n// - `h2`: Applies H2 typography tokens.\n// - `h3`: Applies H3 typography tokens.\n// - `h4`: Applies H4 typography tokens.\n// - `h5`: Applies H5 typography tokens.\n// - `h6`: Applies H6 typography tokens.\n//\n// The following custom properties can be used to customize typography:\n// | Property                         | Description                      | Default Value                                                                                           |\n// | ---                              | ---                              | ---                                                                                                     |\n// | `--graupl-font-size-base`        | Base font size used for scaling. | `1rem`                                                                                                  |\n// | `--graupl-line-height`           | Base line height.                | `1.2em`                                                                                                 |\n// | `--graupl-font-xs`               | XS font size token.              | `calc(0.694 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-sm`               | Small font size token.           | `calc(0.833 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-base`             | Base font size token.            | `var(--graupl-font-size-base)`                                                                          |\n// | `--graupl-font-lg`               | Large font size token.           | `calc(1.2 * var(--graupl-font-size-base))`                                                              |\n// | `--graupl-font-xl`               | XL font size token.              | `calc(1.44 * var(--graupl-font-size-base))`                                                             |\n// | `--graupl-font-2xl`              | 2XL font size token.             | `calc(1.728 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-3xl`              | 3XL font size token.             | `calc(2.074 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-4xl`              | 4XL font size token.             | `calc(2.488 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-5xl`              | 5XL font size token.             | `calc(2.986 * var(--graupl-font-size-base))`                                                            |\n// | `--graupl-font-weight-light`     | Light font weight token.         | `300`                                                                                                   |\n// | `--graupl-font-weight-normal`    | Normal font weight token.        | `400`                                                                                                   |\n// | `--graupl-font-weight-bold`      | Bold font weight token.          | `700`                                                                                                   |\n// | `--graupl-root-font-family`      | Root font family.                | `system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, sans-serif` |\n// | `--graupl-root-font-size`        | Root font size.                  | `clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem)`                                                         |\n// | `--graupl-body-font-size`        | Body font size.                  | `var(--graupl-font-base)`                                                                               |\n// | `--graupl-body-line-height`      | Body line height.                | `var(--graupl-line-height)`                                                                             |\n// | `--graupl-body-font-weight`      | Body font weight.                | `var(--graupl-font-weight-normal)`                                                                      |\n// | `--graupl-body-color`            | Body text colour.                | `var(--graupl-color)`                                                                                   |\n// | `--graupl-paragraph-font-size`   | Paragraph font size.             | `var(--graupl-body-font-size)`                                                                          |\n// | `--graupl-paragraph-line-height` | Paragraph line height.           | `var(--graupl-body-line-height)`                                                                        |\n// | `--graupl-paragraph-margin`      | Paragraph margin.                | `0 0 var(--graupl-spacer-2) 0`                                                                          |\n// | `--graupl-paragraph-font-weight` | Paragraph font weight.           | `var(--graupl-body-font-weight)`                                                                        |\n// | `--graupl-paragraph-color`       | Paragraph text colour.           | `var(--graupl-body-color)`                                                                              |\n// | `--graupl-small-font-size`       | Small text font size.            | `var(--graupl-font-sm)`                                                                                 |\n// | `--graupl-small-line-height`     | Small text line height.          | `var(--graupl-line-height)`                                                                             |\n// | `--graupl-small-margin`          | Small text margin.               | `0 0 var(--graupl-spacer-2) 0`                                                                          |\n// | `--graupl-small-font-weight`     | Small text font weight.          | `var(--graupl-body-font-weight)`                                                                        |\n// | `--graupl-small-color`           | Small text colour.               | `var(--graupl-body-color)`                                                                              |\n// | `--graupl-heading-font-family`   | Heading font family.             | `var(--graupl-root-font-family)`                                                                        |\n// | `--graupl-heading-line-height`   | Heading line height.             | `var(--graupl-line-height)`                                                                             |\n// | `--graupl-heading-margin`        | Base heading margin.             | `var(--graupl-spacer-5) 0 var(--graupl-spacer-2) 0`                                                     |\n// | `--graupl-heading-font-weight`   | Base heading font weight.        | `var(--graupl-font-weight-bold)`                                                                        |\n// | `--graupl-heading-color`         | Base heading colour.             | `var(--graupl-color)`                                                                                   |\n// | `--graupl-h1-font-size`          | H1 font size.                    | `var(--graupl-font-5xl)`                                                                                |\n// | `--graupl-h1-line-height`        | H1 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h1-margin`             | H1 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h1-font-family`        | H1 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h1-font-weight`        | H1 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h1-color`              | H1 colour.                       | `var(--graupl-heading-color)`                                                                           |\n// | `--graupl-h2-font-size`          | H2 font size.                    | `var(--graupl-font-4xl)`                                                                                |\n// | `--graupl-h2-line-height`        | H2 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h2-margin`             | H2 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h2-font-family`        | H2 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h2-font-weight`        | H2 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h2-color`              | H2 colour.                       | `var(--graupl-heading-color)`                                                                           |\n// | `--graupl-h3-font-size`          | H3 font size.                    | `var(--graupl-font-3xl)`                                                                                |\n// | `--graupl-h3-line-height`        | H3 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h3-margin`             | H3 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h3-font-family`        | H3 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h3-font-weight`        | H3 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h3-color`              | H3 colour.                       | `var(--graupl-heading-color)`                                                                           |\n// | `--graupl-h4-font-size`          | H4 font size.                    | `var(--graupl-font-2xl)`                                                                                |\n// | `--graupl-h4-line-height`        | H4 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h4-margin`             | H4 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h4-font-family`        | H4 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h4-font-weight`        | H4 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h4-color`              | H4 colour.                       | `var(--graupl-heading-color)`                                                                           |\n// | `--graupl-h5-font-size`          | H5 font size.                    | `var(--graupl-font-xl)`                                                                                 |\n// | `--graupl-h5-line-height`        | H5 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h5-margin`             | H5 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h5-font-family`        | H5 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h5-font-weight`        | H5 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h5-color`              | H5 colour.                       | `var(--graupl-heading-color)`                                                                           |\n// | `--graupl-h6-font-size`          | H6 font size.                    | `var(--graupl-font-lg)`                                                                                 |\n// | `--graupl-h6-line-height`        | H6 line height.                  | `var(--graupl-heading-line-height)`                                                                     |\n// | `--graupl-h6-margin`             | H6 margin.                       | `var(--graupl-heading-margin)`                                                                          |\n// | `--graupl-h6-font-family`        | H6 font family.                  | `var(--graupl-heading-font-family)`                                                                     |\n// | `--graupl-h6-font-weight`        | H6 font weight.                  | `var(--graupl-heading-font-weight)`                                                                     |\n// | `--graupl-h6-color`              | H6 colour.                       | `var(--graupl-heading-color)`                                                                           |\n//\n// The following sass variables can be used to customize typography generation:\n// | Variable                      | Description                                    | Default Value                                   |\n// | ---                           | ---                                            | ---                                             |\n// | `$selector-base`              | The selector base for the component.           | `\"\"`                                            |\n// | `$modifier-selector-base`     | The selector base for component modifiers.     | `\".\"`                                           |\n// | `$paragraph-selector-base`    | The base selector for the paragraph component. | `$selector-base`                                |\n// | `$paragraph-selector`         | The selector for the paragraph component.      | `\"p\"`                                           |\n// | `$small-selector-base`        | The base selector for the small component.     | `$selector-base`                                |\n// | `$small-selector`             | The selector for the small component.          | `\"small\"`                                       |\n// | `$h1-selector-base`           | The base selector for the h1 component.        | `$selector-base`                                |\n// | `$h1-selector`                | The selector for the h1 component.             | `\"h1\"`                                          |\n// | `$h2-selector-base`           | The base selector for the h2 component.        | `$selector-base`                                |\n// | `$h2-selector`                | The selector for the h2 component.             | `\"h2\"`                                          |\n// | `$h3-selector-base`           | The base selector for the h3 component.        | `$selector-base`                                |\n// | `$h3-selector`                | The selector for the h3 component.             | `\"h3\"`                                          |\n// | `$h4-selector-base`           | The base selector for the h4 component.        | `$selector-base`                                |\n// | `$h4-selector`                | The selector for the h4 component.             | `\"h4\"`                                          |\n// | `$h5-selector-base`           | The base selector for the h5 component.        | `$selector-base`                                |\n// | `$h5-selector`                | The selector for the h5 component.             | `\"h5\"`                                          |\n// | `$h6-selector-base`           | The base selector for the h6 component.        | `$selector-base`                                |\n// | `$h6-selector`                | The selector for the h6 component.             | `\"h6\"`                                          |\n// | `$root-selector-base`         | The base selector for the root component.      | `\":\"`                                           |\n// | `$root-selector`              | The selector for the root component.           | `\"root\"`                                        |\n// | `$bold-selector-base`         | The base selector for the bold component.      | `$selector-base`                                |\n// | `$bold-selector`              | The selector for the bold component.           | `\"b\"`                                           |\n// | `$strong-selector-base`       | The base selector for the strong component.    | `$selector-base`                                |\n// | `$strong-selector`            | The selector for the strong component.         | `\"strong\"`                                      |\n// | `$body-selector-base`         | The base selector for the body component.      | `$selector-base`                                |\n// | `$body-selector`              | The selector for the body component.           | `\"body\"`                                        |\n// | `$generate-base-font-sizes`   | Flag to generate the base font-size scale.     | `true`                                          |\n// | `$generate-base-font-weights` | Flag to generate the base font-weight scale.   | `true`                                          |\n// | `$font-size-base`             | Base font size for the scale.                  | `1rem`                                          |\n// | `$root-font-size`             | Root font size value.                          | `clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem)` |\n// | `$line-height`                | Base line height.                              | `1.2em`                                         |\n// | `$font-size-multipliers`      | Map of size keys to multipliers.               | Minor third scale (see `_defaults.scss`)        |\n// | `$font-weights`               | Map of weight keys to values.                  | `light:300`, `normal:400`, `bold:700`           |\n// | `$root-font-family`           | Root font family stack.                        | System stack                                    |\n//\n// @example\n// <div>\n//   <h1>Heading 1</h1>\n//   <p>Body copy with a <strong>bold</strong> word.</p>\n//   <small>Supporting small text.</small>\n// </div>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"sass:map\";\n\n@include layer(base) {\n  // p\n  #{defaults.$paragraph-selector-base}#{defaults.$paragraph-selector} {\n    margin: $paragraph-margin;\n  }\n\n  // small\n  #{defaults.$small-selector-base}#{defaults.$small-selector} {\n    margin: $small-margin;\n  }\n\n  // h1\n  #{defaults.$h1-selector-base}#{defaults.$h1-selector} {\n    margin: $h1-margin;\n  }\n\n  // h2\n  #{defaults.$h2-selector-base}#{defaults.$h2-selector} {\n    margin: $h2-margin;\n  }\n\n  // h3\n  #{defaults.$h3-selector-base}#{defaults.$h3-selector} {\n    margin: $h3-margin;\n  }\n\n  // h4\n  #{defaults.$h4-selector-base}#{defaults.$h4-selector} {\n    margin: $h4-margin;\n  }\n\n  // h5\n  #{defaults.$h5-selector-base}#{defaults.$h5-selector} {\n    margin: $h5-margin;\n  }\n\n  // h6\n  #{defaults.$h6-selector-base}#{defaults.$h6-selector} {\n    margin: $h6-margin;\n  }\n}\n\n@include layer(theme) {\n  // :root\n  #{defaults.$root-selector-base}#{defaults.$root-selector} {\n    font-family: $root-font-family;\n    font-size: $root-font-size;\n  }\n\n  // b, strong\n  #{defaults.$bold-selector-base}#{defaults.$bold-selector},\n  #{defaults.$strong-selector-base}#{defaults.$strong-selector} {\n    font-weight: $font-weight-bold;\n  }\n\n  // body\n  #{defaults.$body-selector-base}#{defaults.$body-selector} {\n    color: $body-color;\n    font-size: $body-font-size;\n    font-weight: $body-font-weight;\n    line-height: $body-line-height;\n  }\n\n  // p\n  #{defaults.$paragraph-selector-base}#{defaults.$paragraph-selector} {\n    color: $paragraph-color;\n    font-size: $paragraph-font-size;\n    font-weight: $paragraph-font-weight;\n    line-height: $paragraph-line-height;\n  }\n\n  // small\n  #{defaults.$small-selector-base}#{defaults.$small-selector} {\n    color: $small-color;\n    font-size: $small-font-size;\n    font-weight: $small-font-weight;\n    line-height: $small-line-height;\n  }\n\n  // h1\n  #{defaults.$h1-selector-base}#{defaults.$h1-selector} {\n    color: $h1-color;\n    font-family: $h1-font-family;\n    font-size: $h1-font-size;\n    font-weight: $h1-font-weight;\n    line-height: $h1-line-height;\n  }\n\n  // h2\n  #{defaults.$h2-selector-base}#{defaults.$h2-selector} {\n    color: $h2-color;\n    font-family: $h2-font-family;\n    font-size: $h2-font-size;\n    font-weight: $h2-font-weight;\n    line-height: $h2-line-height;\n  }\n\n  // h3\n  #{defaults.$h3-selector-base}#{defaults.$h3-selector} {\n    color: $h3-color;\n    font-family: $h3-font-family;\n    font-size: $h3-font-size;\n    font-weight: $h3-font-weight;\n    line-height: $h3-line-height;\n  }\n\n  // h4\n  #{defaults.$h4-selector-base}#{defaults.$h4-selector} {\n    color: $h4-color;\n    font-family: $h4-font-family;\n    font-size: $h4-font-size;\n    font-weight: $h4-font-weight;\n    line-height: $h4-line-height;\n  }\n\n  // h5\n  #{defaults.$h5-selector-base}#{defaults.$h5-selector} {\n    color: $h5-color;\n    font-family: $h5-font-family;\n    font-size: $h5-font-size;\n    font-weight: $h5-font-weight;\n    line-height: $h5-line-height;\n  }\n\n  // h6\n  #{defaults.$h6-selector-base}#{defaults.$h6-selector} {\n    color: $h6-color;\n    font-family: $h6-font-family;\n    font-size: $h6-font-size;\n    font-weight: $h6-font-weight;\n    line-height: $h6-line-height;\n  }\n}\n","// @graupl/core typography theme variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property                | Default                                                                                               |\n// | ------------------------------ | ----------------------------------------------------------------------------------------------------- |\n// | --graupl-font-size-base        | 1rem                                                                                                  |\n// | --graupl-line-height           | 1.2em                                                                                                 |\n// | --graupl-font-xs               | calc(0.694 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-sm               | calc(0.833 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-base             | calc(1 * var(--graupl-font-size-base))                                                                |\n// | --graupl-font-lg               | calc(1.2 * var(--graupl-font-size-base))                                                              |\n// | --graupl-font-xl               | calc(1.44 * var(--graupl-font-size-base))                                                             |\n// | --graupl-font-2xl              | calc(1.728 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-3xl              | calc(2.074 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-4xl              | calc(2.488 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-5xl              | calc(2.986 * var(--graupl-font-size-base))                                                            |\n// | --graupl-font-weight-light     | 300                                                                                                   |\n// | --graupl-font-weight-normal    | 400                                                                                                   |\n// | --graupl-font-weight-bold      | 700                                                                                                   |\n// | --graupl-root-font-family      | system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, sans-serif |\n// | --graupl-root-font-size        | clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem)                                                         |\n// | --graupl-body-font-size        | var(--graupl-font-base)                                                                               |\n// | --graupl-body-line-height      | var(--graupl-line-height)                                                                             |\n// | --graupl-body-font-weight      | var(--graupl-font-weight-normal)                                                                      |\n// | --graupl-body-color            | var(--graupl-color)                                                                                   |\n// | --graupl-paragraph-font-size   | var(--graupl-body-font-size)                                                                          |\n// | --graupl-paragraph-line-height | var(--graupl-body-line-height)                                                                        |\n// | --graupl-paragraph-margin      | 0 0 var(--graupl-spacer-2) 0                                                                          |\n// | --graupl-paragraph-font-weight | var(--graupl-body-font-weight)                                                                        |\n// | --graupl-paragraph-color       | var(--graupl-body-color)                                                                              |\n// | --graupl-small-font-size       | var(--graupl-font-sm)                                                                                 |\n// | --graupl-small-line-height     | var(--graupl-line-height)                                                                             |\n// | --graupl-small-margin          | 0 0 var(--graupl-spacer-2) 0                                                                          |\n// | --graupl-small-font-weight     | var(--graupl-body-font-weight)                                                                        |\n// | --graupl-small-color           | var(--graupl-body-color)                                                                              |\n// | --graupl-heading-font-family   | var(--graupl-root-font-family)                                                                        |\n// | --graupl-heading-line-height   | var(--graupl-line-height)                                                                             |\n// | --graupl-heading-margin        | var(--graupl-spacer-5) 0 var(--graupl-spacer-2) 0                                                     |\n// | --graupl-heading-font-weight   | var(--graupl-font-weight-bold)                                                                        |\n// | --graupl-heading-color         | var(--graupl-body-color)                                                                              |\n// | --graupl-h1-font-size          | var(--graupl-font-5xl)                                                                                |\n// | --graupl-h1-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h1-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h1-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h1-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h1-color              | var(--graupl-heading-color)                                                                           |\n// | --graupl-h2-font-size          | var(--graupl-font-4xl)                                                                                |\n// | --graupl-h2-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h2-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h2-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h2-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h2-color              | var(--graupl-heading-color)                                                                           |\n// | --graupl-h3-font-size          | var(--graupl-font-3xl)                                                                                |\n// | --graupl-h3-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h3-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h3-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h3-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h3-color              | var(--graupl-heading-color)                                                                           |\n// | --graupl-h4-font-size          | var(--graupl-font-2xl)                                                                                |\n// | --graupl-h4-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h4-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h4-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h4-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h4-color              | var(--graupl-heading-color)                                                                           |\n// | --graupl-h5-font-size          | var(--graupl-font-xl)                                                                                 |\n// | --graupl-h5-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h5-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h5-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h5-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h5-color              | var(--graupl-heading-color)                                                                           |\n// | --graupl-h6-font-size          | var(--graupl-font-lg)                                                                                 |\n// | --graupl-h6-line-height        | var(--graupl-heading-line-height)                                                                     |\n// | --graupl-h6-margin             | var(--graupl-heading-margin)                                                                          |\n// | --graupl-h6-font-family        | var(--graupl-heading-font-family)                                                                     |\n// | --graupl-h6-font-weight        | var(--graupl-heading-font-weight)                                                                     |\n// | --graupl-h6-color              | var(--graupl-heading-color)                                                                           |\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../color/variables\" as color-variables;\n@use \"defaults\";\n@use \"sass:map\";\n\n// Font properties.\n// --graupl-font-size-base\n$font-size-base: var(\n  --#{root-defaults.$prefix}font-size-base,\n  #{defaults.$font-size-base}\n);\n\n// --graupl-line-height\n$line-height: var(\n  --#{root-defaults.$prefix}line-height,\n  #{defaults.$line-height}\n);\n\n// Generate all of the font-size-x custom properties.\n$font-sizes: ();\n\n@each $key, $value in defaults.$font-size-multipliers {\n  // --graupl-font-xs, --graupl-font-sm, --graupl-font-base, --graupl-font-lg, --graupl-font-xl, --graupl-font-2xl, --graupl-font-3xl, --graupl-font-4xl, --graupl-font-5xl\n  $size: var(\n    --#{root-defaults.$prefix}font-#{$key},\n    calc(#{$value} * #{$font-size-base})\n  );\n  $font-sizes: map.set($font-sizes, $key, $size);\n}\n\n$font-weights: ();\n\n@each $key, $value in defaults.$font-weights {\n  // --graupl-font-weight-light, --graupl-font-weight-normal, --graupl-font-weight-bold\n  $weight: var(--#{root-defaults.$prefix}font-weight-#{$key}, $value);\n  $font-weights: map.set($font-weights, $key, $weight);\n}\n\n// --graupl-font-weight-bold\n$font-weight-bold: var(\n  --#{root-defaults.$prefix}font-weight-bold,\n  #{map.get($font-weights, bold)}\n);\n\n// Root properties.\n// --graupl-root-font-family\n$root-font-family: var(\n  --#{root-defaults.$prefix}root-font-family,\n  #{defaults.$root-font-family}\n);\n\n// --graupl-root-font-size\n$root-font-size: var(\n  --#{root-defaults.$prefix}root-font-size,\n  #{defaults.$root-font-size}\n);\n\n// Typography properties.\n// --graupl-body-font-size\n$body-font-size: var(\n  --#{root-defaults.$prefix}body-font-size,\n  #{map.get($font-sizes, base)}\n);\n\n// --graupl-body-line-height\n$body-line-height: var(\n  --#{root-defaults.$prefix}body-line-height,\n  #{$line-height}\n);\n\n// --graupl-body-font-weight\n$body-font-weight: var(\n  --#{root-defaults.$prefix}body-font-weight,\n  #{map.get($font-weights, normal)}\n);\n\n// --graupl-body-color\n$body-color: var(\n  --#{root-defaults.$prefix}body-color,\n  #{color-variables.$color}\n);\n\n// --graupl-paragraph-font-size\n$paragraph-font-size: var(\n  --#{root-defaults.$prefix}paragraph-font-size,\n  #{$body-font-size}\n);\n\n// --graupl-paragraph-line-height\n$paragraph-line-height: var(\n  --#{root-defaults.$prefix}paragraph-line-height,\n  #{$body-line-height}\n);\n\n// --graupl-paragraph-margin\n$paragraph-margin: var(\n  --#{root-defaults.$prefix}paragraph-margin,\n  0 0 #{map.get(root-variables.$spacers, 2)} 0\n);\n\n// --graupl-paragraph-font-weight\n$paragraph-font-weight: var(\n  --#{root-defaults.$prefix}paragraph-font-weight,\n  #{$body-font-weight}\n);\n\n// --graupl-paragraph-color\n$paragraph-color: var(\n  --#{root-defaults.$prefix}paragraph-color,\n  #{$body-color}\n);\n\n// --graupl-small-font-size\n$small-font-size: var(\n  --#{root-defaults.$prefix}small-font-size,\n  #{map.get($font-sizes, sm)}\n);\n\n// --graupl-small-line-height\n$small-line-height: var(\n  --#{root-defaults.$prefix}small-line-height,\n  #{$line-height}\n);\n\n// --graupl-small-margin\n$small-margin: var(\n  --#{root-defaults.$prefix}small-margin,\n  0 0 #{map.get(root-variables.$spacers, 2)} 0\n);\n\n// --graupl-small-font-weight\n$small-font-weight: var(\n  --#{root-defaults.$prefix}small-font-weight,\n  #{$body-font-weight}\n);\n\n// --graupl-small-color\n$small-color: var(--#{root-defaults.$prefix}small-color, #{$body-color});\n\n// Headings properties.\n// --graupl-heading-font-family\n$heading-font-family: var(\n  --#{root-defaults.$prefix}heading-font-family,\n  $root-font-family\n);\n\n// --graupl-heading-line-height\n$heading-line-height: var(\n  --#{root-defaults.$prefix}heading-line-height,\n  #{$line-height}\n);\n\n// --graupl-heading-margin\n$heading-margin: var(\n  --#{root-defaults.$prefix}heading-margin,\n  #{map.get(root-variables.$spacers, 5)} 0\n    #{map.get(root-variables.$spacers, 2)} 0\n);\n\n// --graupl-heading-font-weight\n$heading-font-weight: var(\n  --#{root-defaults.$prefix}heading-font-weight,\n  #{$font-weight-bold}\n);\n\n// --graupl-heading-color\n$heading-color: var(--#{root-defaults.$prefix}heading-color, #{$body-color});\n\n// H1 properties.\n// --graupl-h1-font-size\n$h1-font-size: var(\n  --#{root-defaults.$prefix}h1-font-size,\n  #{map.get($font-sizes, 5xl)}\n);\n\n// --graupl-h1-line-height\n$h1-line-height: var(\n  --#{root-defaults.$prefix}h1-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h1-margin\n$h1-margin: var(--#{root-defaults.$prefix}h1-margin, #{$heading-margin});\n\n// --graupl-h1-font-family\n$h1-font-family: var(\n  --#{root-defaults.$prefix}h1-font-family,\n  $heading-font-family\n);\n\n// --graupl-h1-font-weight\n$h1-font-weight: var(\n  --#{root-defaults.$prefix}h1-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h1-color\n$h1-color: var(--#{root-defaults.$prefix}h1-color, #{$heading-color});\n\n// H2 properties.\n// --graupl-h2-font-size\n$h2-font-size: var(\n  --#{root-defaults.$prefix}h2-font-size,\n  #{map.get($font-sizes, 4xl)}\n);\n\n// --graupl-h2-line-height\n$h2-line-height: var(\n  --#{root-defaults.$prefix}h2-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h2-margin\n$h2-margin: var(--#{root-defaults.$prefix}h2-margin, #{$heading-margin});\n\n// --graupl-h2-font-family\n$h2-font-family: var(\n  --#{root-defaults.$prefix}h2-font-family,\n  $heading-font-family\n);\n\n// --graupl-h2-font-weight\n$h2-font-weight: var(\n  --#{root-defaults.$prefix}h2-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h2-color\n$h2-color: var(--#{root-defaults.$prefix}h2-color, #{$heading-color});\n\n// H3 properties.\n// --graupl-h3-font-size\n$h3-font-size: var(\n  --#{root-defaults.$prefix}h3-font-size,\n  #{map.get($font-sizes, 3xl)}\n);\n\n// --graupl-h3-line-height\n$h3-line-height: var(\n  --#{root-defaults.$prefix}h3-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h3-margin\n$h3-margin: var(--#{root-defaults.$prefix}h3-margin, #{$heading-margin});\n\n// --graupl-h3-font-family\n$h3-font-family: var(\n  --#{root-defaults.$prefix}h3-font-family,\n  $heading-font-family\n);\n\n// --graupl-h3-font-weight\n$h3-font-weight: var(\n  --#{root-defaults.$prefix}h3-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h3-color\n$h3-color: var(--#{root-defaults.$prefix}h3-color, #{$heading-color});\n\n// H4 properties.\n// --graupl-h4-font-size\n$h4-font-size: var(\n  --#{root-defaults.$prefix}h4-font-size,\n  #{map.get($font-sizes, 2xl)}\n);\n\n// --graupl-h4-line-height\n$h4-line-height: var(\n  --#{root-defaults.$prefix}h4-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h4-margin\n$h4-margin: var(--#{root-defaults.$prefix}h4-margin, #{$heading-margin});\n\n// --graupl-h4-font-family\n$h4-font-family: var(\n  --#{root-defaults.$prefix}h4-font-family,\n  $heading-font-family\n);\n\n// --graupl-h4-font-weight\n$h4-font-weight: var(\n  --#{root-defaults.$prefix}h4-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h4-color\n$h4-color: var(--#{root-defaults.$prefix}h4-color, #{$heading-color});\n\n// H5 properties.\n// --graupl-h5-font-size\n$h5-font-size: var(\n  --#{root-defaults.$prefix}h5-font-size,\n  #{map.get($font-sizes, xl)}\n);\n\n// --graupl-h5-line-height\n$h5-line-height: var(\n  --#{root-defaults.$prefix}h5-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h5-margin\n$h5-margin: var(--#{root-defaults.$prefix}h5-margin, #{$heading-margin});\n\n// --graupl-h5-font-family\n$h5-font-family: var(\n  --#{root-defaults.$prefix}h5-font-family,\n  $heading-font-family\n);\n\n// --graupl-h5-font-weight\n$h5-font-weight: var(\n  --#{root-defaults.$prefix}h5-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h5-color\n$h5-color: var(--#{root-defaults.$prefix}h5-color, #{$heading-color});\n\n// H6 properties.\n// --graupl-h6-font-size\n$h6-font-size: var(\n  --#{root-defaults.$prefix}h6-font-size,\n  #{map.get($font-sizes, lg)}\n);\n\n// --graupl-h6-line-height\n$h6-line-height: var(\n  --#{root-defaults.$prefix}h6-line-height,\n  #{$heading-line-height}\n);\n\n// --graupl-h6-margin\n$h6-margin: var(--#{root-defaults.$prefix}h6-margin, #{$heading-margin});\n\n// --graupl-h6-font-family\n$h6-font-family: var(\n  --#{root-defaults.$prefix}h6-font-family,\n  $heading-font-family\n);\n\n// --graupl-h6-font-weight\n$h6-font-weight: var(\n  --#{root-defaults.$prefix}h6-font-weight,\n  $heading-font-weight\n);\n\n// --graupl-h6-color\n$h6-color: var(--#{root-defaults.$prefix}h6-color, #{$heading-color});\n"],"names":[]}