@graupl/graupl 1.0.0-alpha.4 → 1.0.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/base/form/form.css.map +1 -1
- package/dist/base/link/link.css.map +1 -1
- package/dist/component/button/button.css.map +1 -1
- package/dist/graupl.css +1 -1
- package/dist/graupl.css.map +1 -1
- package/dist/layout/columns/columns.css.map +1 -1
- package/dist/layout/container/container.css.map +1 -1
- package/dist/state/focus/focus.css.map +1 -1
- package/dist/theme/theme.css +1 -1
- package/dist/theme/theme.css.map +1 -1
- package/package.json +2 -2
- package/scss/base/form/_defaults.scss +0 -2
- package/scss/base/form/_variables.scss +49 -39
- package/scss/base/link/_defaults.scss +0 -2
- package/scss/base/link/_variables.scss +12 -8
- package/scss/component/button/_defaults.scss +0 -2
- package/scss/component/button/_index.scss +19 -7
- package/scss/component/button/_variables.scss +47 -43
- package/scss/layout/columns/_defaults.scss +0 -2
- package/scss/layout/columns/_index.scss +5 -5
- package/scss/layout/columns/_variables.scss +16 -7
- package/scss/layout/container/_defaults.scss +0 -2
- package/scss/layout/container/_index.scss +16 -12
- package/scss/layout/container/_variables.scss +12 -8
- package/scss/mixins/_layer.scss +2 -2
- package/scss/state/focus/_defaults.scss +0 -2
- package/scss/state/focus/_variables.scss +13 -9
- package/scss/theme/_defaults.scss +4 -5
- package/scss/theme/_index.scss +13 -7
- package/scss/theme/_variables.scss +20 -10
- package/scss/utilities/colors/_defaults.scss +0 -2
- package/dist/utilities/background/background.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [1.0.0-alpha.5](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2024-04-23)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* allow multiple default files to accept overrides ([#28](https://github.com/Graupl/graupl/issues/28)) ([da7ffa0](https://github.com/Graupl/graupl/commit/da7ffa0685e70cf90645c77148171ec505b6455b))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Build System
|
|
14
|
+
|
|
15
|
+
* **npm:** remove dist before compiling sass ([02505b7](https://github.com/Graupl/graupl/commit/02505b761c8197ea8acb928cccce02ca2a4404d9))
|
|
16
|
+
|
|
5
17
|
## [1.0.0-alpha.4](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2024-04-22)
|
|
6
18
|
|
|
7
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/form/_index.scss","../../../scss/base/form/_variables.scss","form.css"],"names":[],"mappings":"AASI,mBCHF,sBAME,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/form/_index.scss","../../../scss/base/form/_variables.scss","form.css"],"names":[],"mappings":"AASI,mBCHF,sBAME,mFC2FkB,CD5FlB,+ECwFiB,CDzFjB,4ECqFiB,CDlFjB,4ECOc,CDXd,sJECF,CFKE,iDACE,kBEDJ,CFKA,MACE,0GEHF,CFMA,SAOE,wHCoFqB,CDrFrB,mHCiFoB,CDlFpB,gHC8EoB,CDlFpB,YAAA,CACA,sDAAA,CAMA,6GCgBiB,CDrBjB,8DCKW,CDJX,2NEAF,CFOI,4EAGE,kBELN,CACF,CHzBI,oBCoCF,sBAME,iKCwFiB,CD1FjB,6JCKe,CDNf,uKCyEiB,CDvEjB,mJEPF,CFUE,4EACE,qKENJ,CFKE,6DACE,qKENJ,CFSE,iDACE,gLCmEwB,CDlExB,kKELJ,CFOI,uGACE,iNEHN,CFEI,wFACE,iNEHN,CFQA,MACE,6KENF,CFQE,+DACE,qMENJ,CFUA,SAEE,+LCnBkB,CDkBlB,2MCqDoB,CDnDpB,gLERF,CFUE,kBACE,6NCoD2B,CDnD3B,wMERJ,CFUI,wBACE,qMERN,CACF","file":"form.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/link/_index.scss","link.css"],"names":[],"mappings":"AASI,mBCHF,EACE,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/link/_index.scss","../../../scss/base/link/_variables.scss","link.css"],"names":[],"mappings":"AASI,mBCHF,EACE,oECCmB,CDDnB,4DCCmB,CDAnB,qGEHF,CACF,CHGI,oBCIF,EACE,kJEJF,CFME,QACE,2JEJJ,CFOE,SACE,4JELJ,CFQE,UACE,0JENJ,CFQI,gBACE,2JENN,CACF","file":"link.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css","../../../scss/mixins/_media-queries.scss"],"names":[],"mappings":"AASI,wBCCF,QAEE,kBAAA,CAQA,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css","../../../scss/mixins/_media-queries.scss"],"names":[],"mappings":"AASI,wBCCF,QAEE,kBAAA,CAQA,oFC0FmB,CD3FnB,+ECuFkB,CDxFlB,6ECoFkB,CDhFlB,cAAA,CAXA,YAAA,CAUA,6ECQe,CDhBf,sBAAA,CAEA,+CCFgB,CDChB,6CCLe,CDOf,yJCSa,CDRb,0bEFF,CFSE,cACE,mDEPJ,CFUE,eACE,0DERJ,CFWE,iBACE,kBETJ,CFWI,+CAEE,cEVN,CChBA,uCHgCE,QACE,iOEbF,CFeE,cACE,kEEbJ,CFgBE,eACE,yEEdJ,CACF,CACF,CH9BI,oBCiDF,QAEE,8JCMgB,CDPhB,kKCyDkB,CDvDlB,oJEhBF,CFkBE,cAEE,oKCKoB,CDNpB,wKCwDsB,CDtDtB,0JEhBJ,CFmBE,eAEE,qKCGqB,CDJrB,yKCsDuB,CDpDvB,2JEjBJ,CFyBI,gEAGE,uKCLqB,CDIrB,2KC8CuB,CD5CvB,6JEnBN,CFwBI,gBACE,oJAAA,CAIA,qJAAA,CAIA,gJAAA,CACA,sJAAA,CAIA,uJAAA,CAIA,yJElCN,CFgBI,kBACE,0JAAA,CAIA,2JAAA,CAIA,sJAAA,CACA,4JAAA,CAIA,6JAAA,CAIA,+JE1BN,CFQI,iBACE,uJAAA,CAIA,wJAAA,CAIA,mJAAA,CACA,yJAAA,CAIA,0JAAA,CAIA,4JElBN,CACF","file":"button.css"}
|
package/dist/graupl.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;@layer graupl.base{input,select,textarea{border-radius:var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-input-border-width,var(--graupl-border-width,2px));font-size:var(--graupl-input-font-size,var(--graupl-font-size-default,1rem));padding:var(--graupl-input-padding,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-input-padding-x,var(--graupl-gap,1rem)))}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}label{font-size:var(--graupl-label-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)))}fieldset{border-radius:var(--graupl-fieldset-border-radius,var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem)));border-style:var(--graupl-fieldset-border-style,var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-fieldset-border-width,var(--graupl-input-border-width,var(--graupl-border-width,2px)));display:flex;flex-flow:var(--graupl-fieldset-direction,column) wrap;font-size:var(--graupl-fieldset-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)));gap:var(--graupl-fieldset-gap,calc(var(--graupl-gap, 1rem)/4));padding:var(--graupl-fieldset-padding,var(--graupl-fieldset-padding-y,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2))) var(--graupl-fieldset-padding-x,var(--graupl-input-padding-x,var(--graupl-gap,1rem))))}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{cursor:not-allowed}}@layer graupl.theme{input,select,textarea{accent-color:var(--graupl-input-accent-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));background:var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b))));color:var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input::placeholder,select::placeholder,textarea::placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input:disabled,select:disabled,textarea:disabled{border-color:var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d))))}input:disabled::-moz-placeholder,select:disabled::-moz-placeholder,textarea:disabled::-moz-placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}label{color:var(--graupl-label-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}label:has(+input:disabled,+textarea:disabled,+select:disabled){color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset{background:var(--graupl-fieldset-background,var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-fieldset-border-color,var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))));color:var(--graupl-fieldset-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}fieldset:disabled{border-color:var(--graupl-fieldset-disabled-border-color,var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))));color:var(--graupl-fieldset-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset:disabled label{color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}}@layer graupl.base{a{-webkit-text-decoration:var(--graupl-link-text-decoration,underline);text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,2px))}}@layer graupl.theme{a{color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:active{color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:visited{color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:visited:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}}@layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}}@layer graupl.layout{@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}@layer graupl.component{.button{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-size-default,1rem));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-button-padding-x,var(--graupl-gap,1rem)));transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform,none)}.button:active{transform:var(--graupl-button-active-transform,scale(.95))}.button:disabled{cursor:not-allowed}.button:disabled:active,.button:disabled:hover{transform:none}@media (prefers-reduced-motion:reduce){.button{transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform-reduced-motion,none)}.button:active{transform:var(--graupl-button-active-transform-reduced-motion,scale(.98))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}.button:hover{background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-hover-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:active{background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-active-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:disabled,.button:disabled:active,.button:disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.primary{--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}@layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--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, 2px)))))}}@layer graupl.theme{:root{background:var(--graupl-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}.dark-mode{--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--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--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}.light-mode{--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--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--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}}@layer graupl.utilities{.bg-primary-100{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.text-primary-100{color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.bg-primary-200{background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.text-primary-200{color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.bg-primary-300{background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.text-primary-300{color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.bg-primary-400{background:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.text-primary-400{color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.bg-primary-500{background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.text-primary-500{color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.bg-primary-600{background:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.text-primary-600{color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.bg-primary-700{background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.text-primary-700{color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.bg-primary-800{background:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.text-primary-800{color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.bg-primary-900{background:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.text-primary-900{color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.bg-secondary-100{background:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.text-secondary-100{color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.bg-secondary-200{background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.text-secondary-200{color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.bg-secondary-300{background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.text-secondary-300{color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.bg-secondary-400{background:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.text-secondary-400{color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.bg-secondary-500{background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.text-secondary-500{color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.bg-secondary-600{background:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.text-secondary-600{color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.bg-secondary-700{background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.text-secondary-700{color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.bg-secondary-800{background:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.text-secondary-800{color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.bg-secondary-900{background:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.text-secondary-900{color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.bg-tertiary-100{background:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.text-tertiary-100{color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.bg-tertiary-200{background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.text-tertiary-200{color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.bg-tertiary-300{background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.text-tertiary-300{color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.bg-tertiary-400{background:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.text-tertiary-400{color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.bg-tertiary-500{background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.text-tertiary-500{color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.bg-tertiary-600{background:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.text-tertiary-600{color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.bg-tertiary-700{background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.text-tertiary-700{color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.bg-tertiary-800{background:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.text-tertiary-800{color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.bg-tertiary-900{background:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}.text-tertiary-900{color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}}
|
|
1
|
+
@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;@layer graupl.base{input,select,textarea{border-radius:var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-input-border-width,var(--graupl-border-width,2px));font-size:var(--graupl-input-font-size,var(--graupl-font-size-default,1rem));padding:var(--graupl-input-padding,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-input-padding-x,var(--graupl-gap,1rem)))}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}label{font-size:var(--graupl-label-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)))}fieldset{border-radius:var(--graupl-fieldset-border-radius,var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem)));border-style:var(--graupl-fieldset-border-style,var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-fieldset-border-width,var(--graupl-input-border-width,var(--graupl-border-width,2px)));display:flex;flex-flow:var(--graupl-fieldset-direction,column) wrap;font-size:var(--graupl-fieldset-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)));gap:var(--graupl-fieldset-gap,calc(var(--graupl-gap, 1rem)/4));padding:var(--graupl-fieldset-padding,var(--graupl-fieldset-padding-y,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2))) var(--graupl-fieldset-padding-x,var(--graupl-input-padding-x,var(--graupl-gap,1rem))))}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{cursor:not-allowed}}@layer graupl.theme{input,select,textarea{accent-color:var(--graupl-input-accent-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));background:var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b))));color:var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input::placeholder,select::placeholder,textarea::placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input:disabled,select:disabled,textarea:disabled{border-color:var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d))))}input:disabled::-moz-placeholder,select:disabled::-moz-placeholder,textarea:disabled::-moz-placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}label{color:var(--graupl-label-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}label:has(+input:disabled,+textarea:disabled,+select:disabled){color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset{background:var(--graupl-fieldset-background,var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-fieldset-border-color,var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))));color:var(--graupl-fieldset-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}fieldset:disabled{border-color:var(--graupl-fieldset-disabled-border-color,var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))));color:var(--graupl-fieldset-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset:disabled label{color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}}@layer graupl.base{a{-webkit-text-decoration:var(--graupl-link-text-decoration,underline);text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,2px))}}@layer graupl.theme{a{color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:active{color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:visited{color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:visited:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}}@layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}}@layer graupl.layout{@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}@layer graupl.component{.button{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-size-default,1rem));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-button-padding-x,var(--graupl-gap,1rem)));transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform,none)}.button:active{transform:var(--graupl-button-active-transform,scale(.95))}.button:disabled{cursor:not-allowed}.button:disabled:active,.button:disabled:hover{transform:none}@media (prefers-reduced-motion:reduce){.button{transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform-reduced-motion,none)}.button:active{transform:var(--graupl-button-active-transform-reduced-motion,scale(.98))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}.button:hover{background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-hover-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:active{background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-active-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:disabled,.button:disabled:active,.button:disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.primary{--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}@layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--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, 2px)))))}}@layer graupl.theme{:root{background:var(--graupl-global-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-global-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-global-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-global-font-size,clamp(.85rem,.8rem + .5vw,1.25rem));--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--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--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))}.dark-mode{--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--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--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}.light-mode{--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--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--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}}@layer graupl.utilities{.bg-primary-100{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.text-primary-100{color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.bg-primary-200{background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.text-primary-200{color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.bg-primary-300{background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.text-primary-300{color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.bg-primary-400{background:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.text-primary-400{color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.bg-primary-500{background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.text-primary-500{color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.bg-primary-600{background:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.text-primary-600{color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.bg-primary-700{background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.text-primary-700{color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.bg-primary-800{background:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.text-primary-800{color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.bg-primary-900{background:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.text-primary-900{color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.bg-secondary-100{background:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.text-secondary-100{color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.bg-secondary-200{background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.text-secondary-200{color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.bg-secondary-300{background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.text-secondary-300{color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.bg-secondary-400{background:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.text-secondary-400{color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.bg-secondary-500{background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.text-secondary-500{color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.bg-secondary-600{background:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.text-secondary-600{color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.bg-secondary-700{background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.text-secondary-700{color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.bg-secondary-800{background:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.text-secondary-800{color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.bg-secondary-900{background:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.text-secondary-900{color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.bg-tertiary-100{background:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.text-tertiary-100{color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.bg-tertiary-200{background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.text-tertiary-200{color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.bg-tertiary-300{background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.text-tertiary-300{color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.bg-tertiary-400{background:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.text-tertiary-400{color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.bg-tertiary-500{background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.text-tertiary-500{color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.bg-tertiary-600{background:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.text-tertiary-600{color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.bg-tertiary-700{background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.text-tertiary-700{color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.bg-tertiary-800{background:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.text-tertiary-800{color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.bg-tertiary-900{background:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}.text-tertiary-900{color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}}
|
|
2
2
|
/*# sourceMappingURL=graupl.css.map */
|
package/dist/graupl.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../scss/_init.scss","../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/mixins/_media-queries.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss","../scss/utilities/colors/_index.scss"],"names":[],"mappings":"AAEA,iGAAA,CCOI,mBCHF,sBAME,
|
|
1
|
+
{"version":3,"sources":["../scss/_init.scss","../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/mixins/_media-queries.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss","../scss/utilities/colors/_index.scss"],"names":[],"mappings":"AAEA,iGAAA,CCOI,mBCHF,sBAME,mFC2FkB,CD5FlB,+ECwFiB,CDzFjB,4ECqFiB,CDlFjB,4ECOc,CDXd,sJEEF,CFIE,iDACE,kBEAJ,CFIA,MACE,0GEFF,CFKA,SAOE,wHCoFqB,CDrFrB,mHCiFoB,CDlFpB,gHC8EoB,CDlFpB,YAAA,CACA,sDAAA,CAMA,6GCgBiB,CDrBjB,8DCKW,CDJX,2NECF,CFMI,4EAGE,kBEJN,CACF,CH1BI,oBCoCF,sBAME,iKCwFiB,CD1FjB,6JCKe,CDNf,uKCyEiB,CDvEjB,mJENF,CFSE,4EACE,qKELJ,CFIE,6DACE,qKELJ,CFQE,iDACE,gLCmEwB,CDlExB,kKEJJ,CFMI,uGACE,iNEFN,CFCI,wFACE,iNEFN,CFOA,MACE,6KELF,CFOE,+DACE,qMELJ,CFSA,SAEE,+LCnBkB,CDkBlB,2MCqDoB,CDnDpB,gLEPF,CFSE,kBACE,6NCoD2B,CDnD3B,wMEPJ,CFSI,wBACE,qMEPN,CACF,CHtEI,mBIHF,EACE,oECCmB,CDDnB,4DCCmB,CDAnB,qGD4EF,CACF,CH5EI,oBIIF,EACE,kJD2EF,CCzEE,QACE,2JD2EJ,CCxEE,SACE,4JD0EJ,CCvEE,UACE,0JDyEJ,CCvEI,gBACE,2JDyEN,CACF,CH7FI,qBMFF,kCAEE,4FAAA,CAIA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XHiGF,CGvFE,4GACE,mBH0FJ,CGvFE,sDACE,oBH0FJ,CGvFE,oDACE,mBH0FJ,CGvFE,0DACE,sBH0FJ,CIpIA,SACE,YAAA,CAKA,oDCRU,CDIV,+SJ2IF,CIrIE,WACE,6CJuIJ,CIlIE,SACE,wBJoIJ,CIjIE,QACE,uBJmIJ,CIxIE,SACE,wBJ0IJ,CIvIE,QACE,uBJyIJ,CI9IE,SACE,wBJgJJ,CI7IE,QACE,uBJ+IJ,CIpJE,SACE,wBJsJJ,CInJE,QACE,uBJqJJ,CAnCF,CHpII,qBOuBF,mCACE,SACE,8BJkJF,CACF,CACF,CH7KI,wBSCF,QAEE,kBAAA,CAQA,oFC0FmB,CD3FnB,+ECuFkB,CDxFlB,6ECoFkB,CDhFlB,cAAA,CAXA,YAAA,CAUA,6ECQe,CDhBf,sBAAA,CAEA,+CCFgB,CDChB,6CCLe,CDOf,yJCSa,CDRb,0bNoLF,CM7KE,cACE,mDN+KJ,CM5KE,eACE,0DN8KJ,CM3KE,iBACE,kBN6KJ,CM3KI,+CAEE,cN4KN,CQtMA,uCFgCE,QACE,iONyKF,CMvKE,cACE,kENyKJ,CMtKE,eACE,yENwKJ,CACF,CACF,CHpNI,oBSiDF,QAEE,8JCMgB,CDPhB,kKCyDkB,CDvDlB,oJNsKF,CMpKE,cAEE,oKCKoB,CDNpB,wKCwDsB,CDtDtB,0JNsKJ,CMnKE,eAEE,qKCGqB,CDJrB,yKCsDuB,CDpDvB,2JNqKJ,CM7JI,gEAGE,uKCLqB,CDIrB,2KC8CuB,CD5CvB,6JNmKN,CM9JI,gBACE,oJAAA,CAIA,qJAAA,CAIA,gJAAA,CACA,sJAAA,CAIA,uJAAA,CAIA,yJNoJN,CMtKI,kBACE,0JAAA,CAIA,2JAAA,CAIA,sJAAA,CACA,4JAAA,CAIA,6JAAA,CAIA,+JN4JN,CM9KI,iBACE,uJAAA,CAIA,wJAAA,CAIA,mJAAA,CACA,yJAAA,CAIA,0JAAA,CAIA,4JNoKN,CACF,CHvQI,oBYHF,eACE,wBAAA,CAGA,smBCyBe,CD3Bf,iSAAA,CACA,0JT8QF,CACF,CH/QI,oBcAF,MACE,8JCqHgB,CDpHhB,yJCgHgB,CD/GhB,uICqGiB,CDpGjB,2ECwGe,CDpGX,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHXySN,CWnSA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBX0TF,CWtTA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBX6UF,CACF,CH9WI,wBgBGE,gBACE,wIb8WN,Ca3WI,kBACE,mIb6WN,CalXI,gBACE,wIboXN,CajXI,kBACE,mIbmXN,CaxXI,gBACE,wIb0XN,CavXI,kBACE,mIbyXN,Ca9XI,gBACE,wIbgYN,Ca7XI,kBACE,mIb+XN,CapYI,gBACE,wIbsYN,CanYI,kBACE,mIbqYN,Ca1YI,gBACE,wIb4YN,CazYI,kBACE,mIb2YN,CahZI,gBACE,wIbkZN,Ca/YI,kBACE,mIbiZN,CatZI,gBACE,wIbwZN,CarZI,kBACE,mIbuZN,Ca5ZI,gBACE,wIb8ZN,Ca3ZI,kBACE,mIb6ZN,CalaI,kBACE,8IboaN,CajaI,oBACE,yIbmaN,CaxaI,kBACE,8Ib0aN,CavaI,oBACE,yIbyaN,Ca9aI,kBACE,8IbgbN,Ca7aI,oBACE,yIb+aN,CapbI,kBACE,8IbsbN,CanbI,oBACE,yIbqbN,Ca1bI,kBACE,8Ib4bN,CazbI,oBACE,yIb2bN,CahcI,kBACE,8IbkcN,Ca/bI,oBACE,yIbicN,CatcI,kBACE,8IbwcN,CarcI,oBACE,yIbucN,Ca5cI,kBACE,8Ib8cN,Ca3cI,oBACE,yIb6cN,CaldI,kBACE,8IbodN,CajdI,oBACE,yIbmdN,CaxdI,iBACE,2Ib0dN,CavdI,mBACE,sIbydN,Ca9dI,iBACE,2IbgeN,Ca7dI,mBACE,sIb+dN,CapeI,iBACE,2IbseN,CaneI,mBACE,sIbqeN,Ca1eI,iBACE,2Ib4eN,CazeI,mBACE,sIb2eN,CahfI,iBACE,wIbkfN,Ca/eI,mBACE,mIbifN,CatfI,iBACE,2IbwfN,CarfI,mBACE,sIbufN,Ca5fI,iBACE,2Ib8fN,Ca3fI,mBACE,sIb6fN,CalgBI,iBACE,2IbogBN,CajgBI,mBACE,sIbmgBN,CaxgBI,iBACE,2Ib0gBN,CavgBI,mBACE,sIbygBN,CACF","file":"graupl.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI,qBCDF,SACE,YAAA,CAKA,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI,qBCDF,SACE,YAAA,CAKA,oDCRU,CDIV,+SEHF,CFSE,WACE,6CEPJ,CFYE,SACE,wBEVJ,CFaE,QACE,uBEXJ,CFME,SACE,wBEJJ,CFOE,QACE,uBELJ,CFAE,SACE,wBEEJ,CFCE,QACE,uBECJ,CFNE,SACE,wBEQJ,CFLE,QACE,uBEOJ,CFFA,mCACE,SACE,8BEIF,CACF,CACF","file":"columns.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBCFF,kCAEE,4FAAA,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBCFF,kCAEE,4FAAA,CAIA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XCNF,CDgBE,4GACE,mBCbJ,CDgBE,sDACE,oBCbJ,CDgBE,oDACE,mBCbJ,CDgBE,0DACE,sBCbJ,CACF","file":"container.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI,oBCHF,eACE,wBAAA,CAGA,
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI,oBCHF,eACE,wBAAA,CAGA,smBCyBe,CD3Bf,iSAAA,CACA,0JEFF,CACF","file":"focus.css"}
|
package/dist/theme/theme.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.theme{:root{background:var(--graupl-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}.dark-mode{--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--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--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}.light-mode{--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--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--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}}
|
|
1
|
+
@layer graupl.theme{:root{background:var(--graupl-global-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-global-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-global-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-global-font-size,clamp(.85rem,.8rem + .5vw,1.25rem));--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--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--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))}.dark-mode{--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--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--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}.light-mode{--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--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--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}}
|
|
2
2
|
/*# sourceMappingURL=theme.css.map */
|
package/dist/theme/theme.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI,oBCAF,MACE,
|
|
1
|
+
{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI,oBCAF,MACE,8JCqHgB,CDpHhB,yJCgHgB,CD/GhB,uICqGiB,CDpGjB,2ECwGe,CDpGX,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHEiBN,CFXA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBEkCF,CF9BA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBEqDF,CACF","file":"theme.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graupl/graupl",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.5",
|
|
4
4
|
"description": "A modular and modern CSS framework.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"prettier": "prettier '**/*.{js,mjs,cjs,scss,sass}'",
|
|
37
37
|
"stylelint": "stylelint '**/*.scss' --allow-empty-input",
|
|
38
38
|
"lint": "npm run eslint -- --fix && npm run stylelint -- --fix && npm run prettier -- --write",
|
|
39
|
-
"sass": "sass scss:dist",
|
|
39
|
+
"sass": "rm -rf dist && sass scss:dist",
|
|
40
40
|
"postcss": "postcss 'dist/**/*.css' --replace",
|
|
41
41
|
"build": "npm run sass && npm run postcss",
|
|
42
42
|
"release": "git add dist/. && standard-version -a",
|
|
@@ -1,133 +1,143 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as base;
|
|
4
3
|
@use "defaults";
|
|
5
|
-
@use "
|
|
4
|
+
@use "../../variables" as root-variables;
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
6
6
|
@use "../../functions/theme";
|
|
7
|
+
@use "sass:map";
|
|
7
8
|
|
|
8
|
-
$input-padding-x: var(
|
|
9
|
+
$input-padding-x: var(
|
|
10
|
+
--#{root-defaults.$prefix}-input-padding-x,
|
|
11
|
+
#{root-variables.$gap}
|
|
12
|
+
);
|
|
9
13
|
$input-padding-y: var(
|
|
10
|
-
--#{defaults.$prefix}-input-padding-y,
|
|
11
|
-
calc(#{
|
|
14
|
+
--#{root-defaults.$prefix}-input-padding-y,
|
|
15
|
+
calc(#{root-variables.$gap} / 2)
|
|
12
16
|
);
|
|
13
17
|
$input-padding: var(
|
|
14
|
-
--#{defaults.$prefix}-input-padding,
|
|
18
|
+
--#{root-defaults.$prefix}-input-padding,
|
|
15
19
|
#{$input-padding-y} #{$input-padding-x}
|
|
16
20
|
);
|
|
17
21
|
$input-font-size: var(
|
|
18
|
-
--#{defaults.$prefix}-input-font-size,
|
|
19
|
-
#{map.get(
|
|
22
|
+
--#{root-defaults.$prefix}-input-font-size,
|
|
23
|
+
#{map.get(root-variables.$font-size, default)}
|
|
20
24
|
);
|
|
21
25
|
$label-font-size: var(
|
|
22
|
-
--#{defaults.$prefix}-label-font-size,
|
|
26
|
+
--#{root-defaults.$prefix}-label-font-size,
|
|
23
27
|
#{$input-font-size}
|
|
24
28
|
);
|
|
25
29
|
$fieldset-direction: var(
|
|
26
|
-
--#{defaults.$prefix}-fieldset-direction,
|
|
30
|
+
--#{root-defaults.$prefix}-fieldset-direction,
|
|
27
31
|
#{defaults.$fieldset-direction}
|
|
28
32
|
);
|
|
29
|
-
$fieldset-gap: var(
|
|
33
|
+
$fieldset-gap: var(
|
|
34
|
+
--#{root-defaults.$prefix}-fieldset-gap,
|
|
35
|
+
calc(#{root-variables.$gap} / 4)
|
|
36
|
+
);
|
|
30
37
|
$fieldset-padding-x: var(
|
|
31
|
-
--#{defaults.$prefix}-fieldset-padding-x,
|
|
38
|
+
--#{root-defaults.$prefix}-fieldset-padding-x,
|
|
32
39
|
#{$input-padding-x}
|
|
33
40
|
);
|
|
34
41
|
$fieldset-padding-y: var(
|
|
35
|
-
--#{defaults.$prefix}-fieldset-padding-y,
|
|
42
|
+
--#{root-defaults.$prefix}-fieldset-padding-y,
|
|
36
43
|
#{$input-padding-y}
|
|
37
44
|
);
|
|
38
45
|
$fieldset-padding: var(
|
|
39
|
-
--#{defaults.$prefix}-fieldset-padding,
|
|
46
|
+
--#{root-defaults.$prefix}-fieldset-padding,
|
|
40
47
|
#{$fieldset-padding-y} #{$fieldset-padding-x}
|
|
41
48
|
);
|
|
42
49
|
$fieldset-font-size: var(
|
|
43
|
-
--#{defaults.$prefix}-fieldset-font-size,
|
|
50
|
+
--#{root-defaults.$prefix}-fieldset-font-size,
|
|
44
51
|
#{$input-font-size}
|
|
45
52
|
);
|
|
46
53
|
|
|
47
54
|
// Background properties.
|
|
48
55
|
$input-background: var(
|
|
49
|
-
--#{defaults.$prefix}-input-background,
|
|
56
|
+
--#{root-defaults.$prefix}-input-background,
|
|
50
57
|
#{theme.get(primary, 100)}
|
|
51
58
|
);
|
|
52
59
|
$fieldset-background: var(
|
|
53
|
-
--#{defaults.$prefix}-fieldset-background,
|
|
60
|
+
--#{root-defaults.$prefix}-fieldset-background,
|
|
54
61
|
#{$input-background}
|
|
55
62
|
);
|
|
56
63
|
|
|
57
64
|
// Text properties.
|
|
58
65
|
$input-color: var(
|
|
59
|
-
--#{defaults.$prefix}-input-color,
|
|
66
|
+
--#{root-defaults.$prefix}-input-color,
|
|
60
67
|
#{theme.get(primary, 900)}
|
|
61
68
|
);
|
|
62
69
|
$input-placeholder-color: var(
|
|
63
|
-
--#{defaults.$prefix}-input-placeholder-color,
|
|
70
|
+
--#{root-defaults.$prefix}-input-placeholder-color,
|
|
64
71
|
#{theme.get(secondary, 600)}
|
|
65
72
|
);
|
|
66
|
-
$label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
|
|
67
|
-
$fieldset-color: var(
|
|
73
|
+
$label-color: var(--#{root-defaults.$prefix}-label-color, #{$input-color});
|
|
74
|
+
$fieldset-color: var(
|
|
75
|
+
--#{root-defaults.$prefix}-fieldset-color,
|
|
76
|
+
#{$input-color}
|
|
77
|
+
);
|
|
68
78
|
$input-disabled-color: var(
|
|
69
|
-
--#{defaults.$prefix}-input-disabled-color,
|
|
79
|
+
--#{root-defaults.$prefix}-input-disabled-color,
|
|
70
80
|
#{theme.get(secondary, 400)}
|
|
71
81
|
);
|
|
72
82
|
$input-disabled-placeholder-color: var(
|
|
73
|
-
--#{defaults.$prefix}-input-disabled-placeholder-color,
|
|
83
|
+
--#{root-defaults.$prefix}-input-disabled-placeholder-color,
|
|
74
84
|
#{$input-disabled-color}
|
|
75
85
|
);
|
|
76
86
|
$label-disabled-color: var(
|
|
77
|
-
--#{defaults.$prefix}-label-disabled-color,
|
|
87
|
+
--#{root-defaults.$prefix}-label-disabled-color,
|
|
78
88
|
#{$input-disabled-color}
|
|
79
89
|
);
|
|
80
90
|
$fieldset-disabled-color: var(
|
|
81
|
-
--#{defaults.$prefix}-fieldset-disabled-color,
|
|
91
|
+
--#{root-defaults.$prefix}-fieldset-disabled-color,
|
|
82
92
|
#{$input-disabled-color}
|
|
83
93
|
);
|
|
84
94
|
|
|
85
95
|
// Border properties.
|
|
86
96
|
$input-border-width: var(
|
|
87
|
-
--#{defaults.$prefix}-input-border-width,
|
|
88
|
-
#{
|
|
97
|
+
--#{root-defaults.$prefix}-input-border-width,
|
|
98
|
+
#{root-variables.$border-width}
|
|
89
99
|
);
|
|
90
100
|
$input-border-style: var(
|
|
91
|
-
--#{defaults.$prefix}-botton-border-style,
|
|
92
|
-
#{
|
|
101
|
+
--#{root-defaults.$prefix}-botton-border-style,
|
|
102
|
+
#{root-variables.$border-style}
|
|
93
103
|
);
|
|
94
104
|
$input-border-radius: var(
|
|
95
|
-
--#{defaults.$prefix}-input-border-radius,
|
|
96
|
-
#{
|
|
105
|
+
--#{root-defaults.$prefix}-input-border-radius,
|
|
106
|
+
#{root-variables.$border-radius}
|
|
97
107
|
);
|
|
98
108
|
$fieldset-border-width: var(
|
|
99
|
-
--#{defaults.$prefix}-fieldset-border-width,
|
|
109
|
+
--#{root-defaults.$prefix}-fieldset-border-width,
|
|
100
110
|
#{$input-border-width}
|
|
101
111
|
);
|
|
102
112
|
$fieldset-border-style: var(
|
|
103
|
-
--#{defaults.$prefix}-fieldset-border-style,
|
|
113
|
+
--#{root-defaults.$prefix}-fieldset-border-style,
|
|
104
114
|
#{$input-border-style}
|
|
105
115
|
);
|
|
106
116
|
$fieldset-border-radius: var(
|
|
107
|
-
--#{defaults.$prefix}-fieldset-border-radius,
|
|
117
|
+
--#{root-defaults.$prefix}-fieldset-border-radius,
|
|
108
118
|
#{$input-border-radius}
|
|
109
119
|
);
|
|
110
120
|
|
|
111
121
|
// Border colour properties.
|
|
112
122
|
$input-border-color: var(
|
|
113
|
-
--#{defaults.$prefix}-input-border-color,
|
|
123
|
+
--#{root-defaults.$prefix}-input-border-color,
|
|
114
124
|
#{theme.get(secondary, 700)}
|
|
115
125
|
);
|
|
116
126
|
$input-disabled-border-color: var(
|
|
117
|
-
--#{defaults.$prefix}-input-disabled-border-color,
|
|
127
|
+
--#{root-defaults.$prefix}-input-disabled-border-color,
|
|
118
128
|
#{theme.get(secondary, 200)}
|
|
119
129
|
);
|
|
120
130
|
$fieldset-border-color: var(
|
|
121
|
-
--#{defaults.$prefix}-fieldset-border-color,
|
|
131
|
+
--#{root-defaults.$prefix}-fieldset-border-color,
|
|
122
132
|
#{$input-border-color}
|
|
123
133
|
);
|
|
124
134
|
$fieldset-disabled-border-color: var(
|
|
125
|
-
--#{defaults.$prefix}-fieldset-disabled-border-color,
|
|
135
|
+
--#{root-defaults.$prefix}-fieldset-disabled-border-color,
|
|
126
136
|
#{$input-disabled-border-color}
|
|
127
137
|
);
|
|
128
138
|
|
|
129
139
|
// Accent color properties.
|
|
130
140
|
$input-accent-color: var(
|
|
131
|
-
--#{defaults.$prefix}-input-accent-color,
|
|
141
|
+
--#{root-defaults.$prefix}-input-accent-color,
|
|
132
142
|
#{theme.get(primary, 700)}
|
|
133
143
|
);
|
|
@@ -1,28 +1,32 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as base;
|
|
4
3
|
@use "defaults";
|
|
4
|
+
@use "../../variables" as root-variables;
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
5
6
|
@use "../../functions/theme";
|
|
6
7
|
|
|
7
8
|
// Link properties.
|
|
8
9
|
$link-text-decoration: var(
|
|
9
|
-
--#{defaults.$prefix}-link-text-decoration,
|
|
10
|
+
--#{root-defaults.$prefix}-link-text-decoration,
|
|
10
11
|
#{defaults.$link-text-decoration}
|
|
11
12
|
);
|
|
12
13
|
$link-text-decoration-thickness: var(
|
|
13
|
-
--#{defaults.$prefix}-link-text-decoration-thickness,
|
|
14
|
-
#{
|
|
14
|
+
--#{root-defaults.$prefix}-link-text-decoration-thickness,
|
|
15
|
+
#{root-variables.$border-width}
|
|
16
|
+
);
|
|
17
|
+
$link-color: var(
|
|
18
|
+
--#{root-defaults.$prefix}-link-color,
|
|
19
|
+
#{theme.get(primary, 700)}
|
|
15
20
|
);
|
|
16
|
-
$link-color: var(--#{defaults.$prefix}-link-color, #{theme.get(primary, 700)});
|
|
17
21
|
$link-hover-color: var(
|
|
18
|
-
--#{defaults.$prefix}-link-hover-color,
|
|
22
|
+
--#{root-defaults.$prefix}-link-hover-color,
|
|
19
23
|
#{theme.get(tertiary, 700)}
|
|
20
24
|
);
|
|
21
25
|
$link-active-color: var(
|
|
22
|
-
--#{defaults.$prefix}-link-active-color,
|
|
26
|
+
--#{root-defaults.$prefix}-link-active-color,
|
|
23
27
|
#{theme.get(tertiary, 700)}
|
|
24
28
|
);
|
|
25
29
|
$link-visited-color: var(
|
|
26
|
-
--#{defaults.$prefix}-link-visited-color,
|
|
30
|
+
--#{root-defaults.$prefix}-link-visited-color,
|
|
27
31
|
#{theme.get(primary, 700)}
|
|
28
32
|
);
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
// They are mainly used to provide default fallbacks for custom properties
|
|
5
5
|
// which can be found in the `variables.scss` file.
|
|
6
6
|
|
|
7
|
-
@forward "../../defaults";
|
|
8
|
-
|
|
9
7
|
$button-hover-transform: none !default;
|
|
10
8
|
$button-hover-transform-reduced-motion: none !default;
|
|
11
9
|
$button-active-transform: scale(0.95) !default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Graupl Button Component.
|
|
2
2
|
|
|
3
|
-
@use "defaults";
|
|
3
|
+
@use "../../defaults" as root-defaults;
|
|
4
4
|
@use "../../theme/variables" as theme;
|
|
5
5
|
@use "variables" as *;
|
|
6
6
|
@use "../../mixins/layer" as *;
|
|
@@ -88,12 +88,24 @@
|
|
|
88
88
|
|
|
89
89
|
@each $color, $map in theme.$theme-active {
|
|
90
90
|
&.#{$color} {
|
|
91
|
-
--#{defaults.$prefix}-button-hover-background: #{map.get(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
--#{defaults.$prefix}-button-active-
|
|
96
|
-
|
|
91
|
+
--#{root-defaults.$prefix}-button-hover-background: #{map.get(
|
|
92
|
+
$map,
|
|
93
|
+
700
|
|
94
|
+
)};
|
|
95
|
+
--#{root-defaults.$prefix}-button-active-background: #{map.get(
|
|
96
|
+
$map,
|
|
97
|
+
700
|
|
98
|
+
)};
|
|
99
|
+
--#{root-defaults.$prefix}-button-border-color: #{map.get($map, 700)};
|
|
100
|
+
--#{root-defaults.$prefix}-button-hover-border-color: #{map.get(
|
|
101
|
+
$map,
|
|
102
|
+
700
|
|
103
|
+
)};
|
|
104
|
+
--#{root-defaults.$prefix}-button-active-border-color: #{map.get(
|
|
105
|
+
$map,
|
|
106
|
+
700
|
|
107
|
+
)};
|
|
108
|
+
--#{root-defaults.$prefix}-button-disabled-border-color: #{map.get(
|
|
97
109
|
$map,
|
|
98
110
|
200
|
|
99
111
|
)};
|
|
@@ -1,128 +1,132 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as base;
|
|
4
3
|
@use "defaults";
|
|
5
|
-
@use "
|
|
4
|
+
@use "../../variables" as root-variables;
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
6
6
|
@use "../../functions/theme";
|
|
7
|
+
@use "sass:map";
|
|
7
8
|
|
|
8
9
|
// Button properties.
|
|
9
10
|
$button-min-width: var(
|
|
10
|
-
--#{defaults.$prefix}-button-min-width,
|
|
11
|
-
#{defaults.$interactive-min-width}
|
|
11
|
+
--#{root-defaults.$prefix}-button-min-width,
|
|
12
|
+
#{root-defaults.$interactive-min-width}
|
|
12
13
|
);
|
|
13
14
|
$button-min-height: var(
|
|
14
|
-
--#{defaults.$prefix}-button-min-height,
|
|
15
|
-
#{defaults.$interactive-min-height}
|
|
15
|
+
--#{root-defaults.$prefix}-button-min-height,
|
|
16
|
+
#{root-defaults.$interactive-min-height}
|
|
17
|
+
);
|
|
18
|
+
$button-padding-x: var(
|
|
19
|
+
--#{root-defaults.$prefix}-button-padding-x,
|
|
20
|
+
#{root-variables.$gap}
|
|
16
21
|
);
|
|
17
|
-
$button-padding-x: var(--#{defaults.$prefix}-button-padding-x, #{base.$gap});
|
|
18
22
|
$button-padding-y: var(
|
|
19
|
-
--#{defaults.$prefix}-button-padding-y,
|
|
20
|
-
calc(#{
|
|
23
|
+
--#{root-defaults.$prefix}-button-padding-y,
|
|
24
|
+
calc(#{root-variables.$gap} / 2)
|
|
21
25
|
);
|
|
22
26
|
$button-padding: var(
|
|
23
|
-
--#{defaults.$prefix}-button-padding,
|
|
27
|
+
--#{root-defaults.$prefix}-button-padding,
|
|
24
28
|
#{$button-padding-y} #{$button-padding-x}
|
|
25
29
|
);
|
|
26
30
|
$button-font-size: var(
|
|
27
|
-
--#{defaults.$prefix}-button-font-size,
|
|
28
|
-
#{map.get(
|
|
31
|
+
--#{root-defaults.$prefix}-button-font-size,
|
|
32
|
+
#{map.get(root-variables.$font-size, default)}
|
|
29
33
|
);
|
|
30
34
|
$button-transition: var(
|
|
31
|
-
--#{defaults.$prefix}-button-transition,
|
|
32
|
-
background #{map.get(
|
|
33
|
-
color #{map.get(
|
|
34
|
-
border-color #{map.get(
|
|
35
|
-
transform #{map.get(
|
|
35
|
+
--#{root-defaults.$prefix}-button-transition,
|
|
36
|
+
background #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
|
|
37
|
+
color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
|
|
38
|
+
border-color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
|
|
39
|
+
transform #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function}
|
|
36
40
|
);
|
|
37
41
|
$button-transition-reduced-motion: var(
|
|
38
|
-
--#{defaults.$prefix}-button-transition-reduced-motion,
|
|
39
|
-
background #{map.get(
|
|
40
|
-
color #{map.get(
|
|
41
|
-
border-color #{map.get(
|
|
42
|
+
--#{root-defaults.$prefix}-button-transition-reduced-motion,
|
|
43
|
+
background #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
|
|
44
|
+
color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
|
|
45
|
+
border-color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function}
|
|
42
46
|
);
|
|
43
47
|
|
|
44
48
|
// Transform properties.
|
|
45
49
|
$button-hover-transform: var(
|
|
46
|
-
--#{defaults.$prefix}-button-hover-transform,
|
|
50
|
+
--#{root-defaults.$prefix}-button-hover-transform,
|
|
47
51
|
#{defaults.$button-hover-transform}
|
|
48
52
|
);
|
|
49
53
|
$button-active-transform: var(
|
|
50
|
-
--#{defaults.$prefix}-button-active-transform,
|
|
54
|
+
--#{root-defaults.$prefix}-button-active-transform,
|
|
51
55
|
#{defaults.$button-active-transform}
|
|
52
56
|
);
|
|
53
57
|
$button-hover-transform-reduced-motion: var(
|
|
54
|
-
--#{defaults.$prefix}-button-hover-transform-reduced-motion,
|
|
58
|
+
--#{root-defaults.$prefix}-button-hover-transform-reduced-motion,
|
|
55
59
|
#{defaults.$button-hover-transform-reduced-motion}
|
|
56
60
|
);
|
|
57
61
|
$button-active-transform-reduced-motion: var(
|
|
58
|
-
--#{defaults.$prefix}-button-active-transform-reduced-motion,
|
|
62
|
+
--#{root-defaults.$prefix}-button-active-transform-reduced-motion,
|
|
59
63
|
#{defaults.$button-active-transform-reduced-motion}
|
|
60
64
|
);
|
|
61
65
|
|
|
62
66
|
// Background properties.
|
|
63
67
|
$button-background: var(
|
|
64
|
-
--#{defaults.$prefix}-button-background,
|
|
68
|
+
--#{root-defaults.$prefix}-button-background,
|
|
65
69
|
#{theme.get(primary, 100)}
|
|
66
70
|
);
|
|
67
71
|
$button-hover-background: var(
|
|
68
|
-
--#{defaults.$prefix}-button-hover-background,
|
|
72
|
+
--#{root-defaults.$prefix}-button-hover-background,
|
|
69
73
|
#{theme.get(primary, 900)}
|
|
70
74
|
);
|
|
71
75
|
$button-active-background: var(
|
|
72
|
-
--#{defaults.$prefix}-button-active-background,
|
|
76
|
+
--#{root-defaults.$prefix}-button-active-background,
|
|
73
77
|
#{theme.get(primary, 900)}
|
|
74
78
|
);
|
|
75
79
|
$button-disabled-background: var(
|
|
76
|
-
--#{defaults.$prefix}-button-disabled-background,
|
|
80
|
+
--#{root-defaults.$prefix}-button-disabled-background,
|
|
77
81
|
#{theme.get(primary, 100)}
|
|
78
82
|
);
|
|
79
83
|
|
|
80
84
|
// Text properties.
|
|
81
85
|
$button-color: var(
|
|
82
|
-
--#{defaults.$prefix}-button-color,
|
|
86
|
+
--#{root-defaults.$prefix}-button-color,
|
|
83
87
|
#{theme.get(primary, 900)}
|
|
84
88
|
);
|
|
85
89
|
$button-hover-color: var(
|
|
86
|
-
--#{defaults.$prefix}-button-hover-color,
|
|
90
|
+
--#{root-defaults.$prefix}-button-hover-color,
|
|
87
91
|
#{theme.get(primary, 100)}
|
|
88
92
|
);
|
|
89
93
|
$button-active-color: var(
|
|
90
|
-
--#{defaults.$prefix}-button-active-color,
|
|
94
|
+
--#{root-defaults.$prefix}-button-active-color,
|
|
91
95
|
#{theme.get(primary, 100)}
|
|
92
96
|
);
|
|
93
97
|
$button-disabled-color: var(
|
|
94
|
-
--#{defaults.$prefix}-button-disabled-color,
|
|
98
|
+
--#{root-defaults.$prefix}-button-disabled-color,
|
|
95
99
|
#{theme.get(primary, 200)}
|
|
96
100
|
);
|
|
97
101
|
|
|
98
102
|
// Border properties.
|
|
99
103
|
$button-border-width: var(
|
|
100
|
-
--#{defaults.$prefix}-button-border-width,
|
|
101
|
-
#{
|
|
104
|
+
--#{root-defaults.$prefix}-button-border-width,
|
|
105
|
+
#{root-variables.$border-width}
|
|
102
106
|
);
|
|
103
107
|
$button-border-style: var(
|
|
104
|
-
--#{defaults.$prefix}-botton-border-style,
|
|
105
|
-
#{
|
|
108
|
+
--#{root-defaults.$prefix}-botton-border-style,
|
|
109
|
+
#{root-variables.$border-style}
|
|
106
110
|
);
|
|
107
111
|
$button-border-radius: var(
|
|
108
|
-
--#{defaults.$prefix}-button-border-radius,
|
|
109
|
-
#{
|
|
112
|
+
--#{root-defaults.$prefix}-button-border-radius,
|
|
113
|
+
#{root-variables.$border-radius}
|
|
110
114
|
);
|
|
111
115
|
|
|
112
116
|
// Border colour properties.
|
|
113
117
|
$button-border-color: var(
|
|
114
|
-
--#{defaults.$prefix}-button-border-color,
|
|
118
|
+
--#{root-defaults.$prefix}-button-border-color,
|
|
115
119
|
#{theme.get(primary, 900)}
|
|
116
120
|
);
|
|
117
121
|
$button-hover-border-color: var(
|
|
118
|
-
--#{defaults.$prefix}-button-hover-border-color,
|
|
122
|
+
--#{root-defaults.$prefix}-button-hover-border-color,
|
|
119
123
|
#{theme.get(primary, 900)}
|
|
120
124
|
);
|
|
121
125
|
$button-active-border-color: var(
|
|
122
|
-
--#{defaults.$prefix}-button-active-border-color,
|
|
126
|
+
--#{root-defaults.$prefix}-button-active-border-color,
|
|
123
127
|
#{theme.get(primary, 900)}
|
|
124
128
|
);
|
|
125
129
|
$button-disabled-border-color: var(
|
|
126
|
-
--#{defaults.$prefix}-button-disabled-border-color,
|
|
130
|
+
--#{root-defaults.$prefix}-button-disabled-border-color,
|
|
127
131
|
#{theme.get(primary, 200)}
|
|
128
132
|
);
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
// They are mainly used to provide default fallbacks for custom properties
|
|
5
5
|
// which can be found in the `variables.scss` file.
|
|
6
6
|
|
|
7
|
-
@forward "../../defaults";
|
|
8
|
-
|
|
9
7
|
$columns-max-width: 1fr !default;
|
|
10
8
|
$columns-count: 3 !default;
|
|
11
9
|
$columns-disable-width: 48ch !default;
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
@use "variables" as *;
|
|
4
4
|
@use "defaults";
|
|
5
|
-
@use "../../
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
6
6
|
@use "../../mixins/layer" as *;
|
|
7
7
|
|
|
8
8
|
@include layer(layout) {
|
|
9
9
|
.columns {
|
|
10
10
|
display: grid;
|
|
11
11
|
grid-template-columns: var(
|
|
12
|
-
--#{defaults.$prefix}-columns,
|
|
12
|
+
--#{root-defaults.$prefix}-columns,
|
|
13
13
|
repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
|
|
14
14
|
);
|
|
15
15
|
gap: $columns-gap;
|
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
|
|
22
22
|
@for $i from defaults.$columns-min-count through defaults.$columns-max-count {
|
|
23
23
|
.count-#{$i} {
|
|
24
|
-
--#{defaults.$prefix}-columns-count: #{$i};
|
|
24
|
+
--#{root-defaults.$prefix}-columns-count: #{$i};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.span-#{$i} {
|
|
28
|
-
--#{defaults.$prefix}-columns-span: #{$i};
|
|
28
|
+
--#{root-defaults.$prefix}-columns-span: #{$i};
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
// Disable columns on small screens to avoid horizontal bleeding.
|
|
33
33
|
@media screen and (max-width: #{defaults.$columns-disable-width}) {
|
|
34
34
|
.columns {
|
|
35
|
-
--#{defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
|
|
35
|
+
--#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -1,24 +1,33 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as base;
|
|
4
3
|
@use "defaults";
|
|
4
|
+
@use "../../variables" as root-variables;
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
5
6
|
|
|
6
|
-
$columns-gap: var(
|
|
7
|
+
$columns-gap: var(
|
|
8
|
+
--#{root-defaults.$prefix}-columns-gap,
|
|
9
|
+
#{root-variables.$gap}
|
|
10
|
+
);
|
|
7
11
|
$columns-count: var(
|
|
8
|
-
--#{defaults.$prefix}-columns-count,
|
|
12
|
+
--#{root-defaults.$prefix}-columns-count,
|
|
9
13
|
#{defaults.$columns-count}
|
|
10
14
|
);
|
|
15
|
+
/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
|
|
11
16
|
$columns-min-width: var(
|
|
12
|
-
--#{defaults.$prefix}-columns-min-width,
|
|
17
|
+
--#{root-defaults.$prefix}-columns-min-width,
|
|
13
18
|
calc(
|
|
14
|
-
(
|
|
19
|
+
(
|
|
20
|
+
#{root-variables.$content-max-width} - #{$columns-gap} *
|
|
21
|
+
(#{$columns-count} - 1)
|
|
22
|
+
) / #{$columns-count}
|
|
15
23
|
)
|
|
16
24
|
);
|
|
25
|
+
/* stylelint-enable scss/operator-no-newline-after */
|
|
17
26
|
$columns-max-width: var(
|
|
18
|
-
--#{defaults.$prefix}-columns-max-width,
|
|
27
|
+
--#{root-defaults.$prefix}-columns-max-width,
|
|
19
28
|
#{defaults.$columns-max-width}
|
|
20
29
|
);
|
|
21
30
|
$columns-span: var(
|
|
22
|
-
--#{defaults.$prefix}-columns-span,
|
|
31
|
+
--#{root-defaults.$prefix}-columns-span,
|
|
23
32
|
#{defaults.$columns-span}
|
|
24
33
|
);
|
|
@@ -2,34 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
@use "variables" as *;
|
|
4
4
|
@use "../../mixins/layer" as *;
|
|
5
|
-
@use "defaults";
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
6
6
|
|
|
7
7
|
@include layer(layout) {
|
|
8
8
|
.container,
|
|
9
9
|
.container > .full-width {
|
|
10
|
-
--#{defaults.$prefix}-container-full-width: minmax(
|
|
11
|
-
|
|
10
|
+
--#{root-defaults.$prefix}-container-full-width: minmax(
|
|
11
|
+
#{$container-gap},
|
|
12
|
+
1fr
|
|
13
|
+
);
|
|
14
|
+
--#{root-defaults.$prefix}-container-content: min(
|
|
12
15
|
#{$container-content-max-width},
|
|
13
16
|
calc(100% - #{$container-gap} * 2)
|
|
14
17
|
);
|
|
15
|
-
--#{defaults.$prefix}-container-breakout: minmax(
|
|
18
|
+
--#{root-defaults.$prefix}-container-breakout: minmax(
|
|
16
19
|
0,
|
|
17
20
|
#{$container-breakout-width}
|
|
18
21
|
);
|
|
19
|
-
--#{defaults.$prefix}-container-feature: minmax(
|
|
22
|
+
--#{root-defaults.$prefix}-container-feature: minmax(
|
|
20
23
|
0,
|
|
21
24
|
#{$container-feature-width}
|
|
22
25
|
);
|
|
23
26
|
|
|
24
27
|
display: grid;
|
|
25
28
|
grid-template-columns:
|
|
26
|
-
[full-width-start] var(--#{defaults.$prefix}-container-full-width)
|
|
27
|
-
[feature-start] var(--#{defaults.$prefix}-container-feature)
|
|
28
|
-
[breakout-start] var(--#{defaults.$prefix}-container-breakout)
|
|
29
|
-
[content-start] var(--#{defaults.$prefix}-container-content)
|
|
30
|
-
|
|
31
|
-
var(--#{defaults.$prefix}-container-
|
|
32
|
-
var(--#{defaults.$prefix}-container-
|
|
29
|
+
[full-width-start] var(--#{root-defaults.$prefix}-container-full-width)
|
|
30
|
+
[feature-start] var(--#{root-defaults.$prefix}-container-feature)
|
|
31
|
+
[breakout-start] var(--#{root-defaults.$prefix}-container-breakout)
|
|
32
|
+
[content-start] var(--#{root-defaults.$prefix}-container-content)
|
|
33
|
+
[content-end]
|
|
34
|
+
var(--#{root-defaults.$prefix}-container-breakout) [breakout-end]
|
|
35
|
+
var(--#{root-defaults.$prefix}-container-feature) [feature-end]
|
|
36
|
+
var(--#{root-defaults.$prefix}-container-full-width) [full-width-end];
|
|
33
37
|
|
|
34
38
|
> :not(.breakout, .full-width, .feature) {
|
|
35
39
|
grid-column: content;
|
|
@@ -1,26 +1,30 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as base;
|
|
4
3
|
@use "defaults";
|
|
4
|
+
@use "../../variables" as root-variables;
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
5
6
|
|
|
6
|
-
$container-gap: var(
|
|
7
|
+
$container-gap: var(
|
|
8
|
+
--#{root-defaults.$prefix}-container-gap,
|
|
9
|
+
#{root-variables.$gap}
|
|
10
|
+
);
|
|
7
11
|
$container-content-max-width: var(
|
|
8
|
-
--#{defaults.$prefix}-container-content-max-width,
|
|
9
|
-
#{
|
|
12
|
+
--#{root-defaults.$prefix}-container-content-max-width,
|
|
13
|
+
#{root-variables.$content-max-width}
|
|
10
14
|
);
|
|
11
15
|
$container-breakout-max-width: var(
|
|
12
|
-
--#{defaults.$prefix}-container-breakout-max-width,
|
|
16
|
+
--#{root-defaults.$prefix}-container-breakout-max-width,
|
|
13
17
|
calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
|
|
14
18
|
);
|
|
15
19
|
$container-breakout-width: var(
|
|
16
|
-
--#{defaults.$prefix}-container-breakout-width,
|
|
20
|
+
--#{root-defaults.$prefix}-container-breakout-width,
|
|
17
21
|
calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
|
|
18
22
|
);
|
|
19
23
|
$container-feature-max-width: var(
|
|
20
|
-
--#{defaults.$prefix}-container-feature-max-width,
|
|
24
|
+
--#{root-defaults.$prefix}-container-feature-max-width,
|
|
21
25
|
calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
|
|
22
26
|
);
|
|
23
27
|
$container-feature-width: var(
|
|
24
|
-
--#{defaults.$prefix}-container-feature-width,
|
|
28
|
+
--#{root-defaults.$prefix}-container-feature-width,
|
|
25
29
|
calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
|
|
26
30
|
);
|
package/scss/mixins/_layer.scss
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
// These should be used to define the layers of your components to ensure that
|
|
4
4
|
// they are output in the correct order in the final compiled CSS.
|
|
5
5
|
|
|
6
|
-
@use "../defaults" as
|
|
6
|
+
@use "../defaults" as root-defaults;
|
|
7
7
|
|
|
8
8
|
@mixin layer($layer) {
|
|
9
9
|
@at-root {
|
|
10
|
-
@layer #{
|
|
10
|
+
@layer #{root-defaults.$prefix}.#{$layer} {
|
|
11
11
|
@content;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
@@ -1,36 +1,40 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
|
-
@use "../../variables" as
|
|
3
|
+
@use "../../variables" as root-variables;
|
|
4
4
|
@use "defaults";
|
|
5
|
+
@use "../../defaults" as root-defaults;
|
|
5
6
|
@use "../../functions/theme";
|
|
6
7
|
|
|
7
|
-
$focus-width: var(
|
|
8
|
+
$focus-width: var(
|
|
9
|
+
--#{root-defaults.$prefix}-focus-width,
|
|
10
|
+
#{root-variables.$border-width}
|
|
11
|
+
);
|
|
8
12
|
$focus-outline-color: var(
|
|
9
|
-
--#{defaults.$prefix}-focus-outline-color,
|
|
13
|
+
--#{root-defaults.$prefix}-focus-outline-color,
|
|
10
14
|
#{theme.get(primary, 900)}
|
|
11
15
|
);
|
|
12
16
|
$focus-outline-width: var(
|
|
13
|
-
--#{defaults.$prefix}-focus-outline-width,
|
|
17
|
+
--#{root-defaults.$prefix}-focus-outline-width,
|
|
14
18
|
#{$focus-width}
|
|
15
19
|
);
|
|
16
20
|
$focus-outline-style: var(
|
|
17
|
-
--#{defaults.$prefix}-focus-outline-style,
|
|
21
|
+
--#{root-defaults.$prefix}-focus-outline-style,
|
|
18
22
|
#{defaults.$focus-outline-style}
|
|
19
23
|
);
|
|
20
24
|
$focus-outline-offset: var(
|
|
21
|
-
--#{defaults.$prefix}-focus-outline-offset,
|
|
25
|
+
--#{root-defaults.$prefix}-focus-outline-offset,
|
|
22
26
|
calc(-1 * #{$focus-outline-width})
|
|
23
27
|
);
|
|
24
28
|
$focus-box-shadow-color: var(
|
|
25
|
-
--#{defaults.$prefix}-focus-box-shadow-color,
|
|
29
|
+
--#{root-defaults.$prefix}-focus-box-shadow-color,
|
|
26
30
|
#{theme.get(primary, 100)}
|
|
27
31
|
);
|
|
28
32
|
$focus-box-shadow-style: var(
|
|
29
|
-
--#{defaults.$prefix}-focus-box-shadow-style,
|
|
33
|
+
--#{root-defaults.$prefix}-focus-box-shadow-style,
|
|
30
34
|
#{defaults.$focus-box-shadow-style}
|
|
31
35
|
);
|
|
32
36
|
$focus-box-shadow: var(
|
|
33
|
-
--#{defaults.$prefix}-focus-box-shadow,
|
|
37
|
+
--#{root-defaults.$prefix}-focus-box-shadow,
|
|
34
38
|
#{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style} #{$focus-box-shadow-color},
|
|
35
39
|
0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}
|
|
36
40
|
);
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
// which can be found in the `variables.scss` file.
|
|
6
6
|
|
|
7
7
|
@use "sass:map";
|
|
8
|
-
@forward "../defaults";
|
|
9
8
|
|
|
10
9
|
// Colours.
|
|
11
10
|
$default-colors: (
|
|
@@ -42,9 +41,9 @@ $default-colors: (
|
|
|
42
41
|
800: hsl(340deg 75% 20%),
|
|
43
42
|
900: hsl(340deg 85% 10%),
|
|
44
43
|
),
|
|
45
|
-
)
|
|
44
|
+
);
|
|
46
45
|
$custom-colors: () !default;
|
|
47
|
-
$colors: map.merge($default-colors, $custom-colors)
|
|
46
|
+
$colors: map.merge($default-colors, $custom-colors);
|
|
48
47
|
|
|
49
48
|
// A map for reversing the shade values of the dark theme.
|
|
50
49
|
$dark-map: (
|
|
@@ -61,7 +60,7 @@ $dark-map: (
|
|
|
61
60
|
|
|
62
61
|
// Font properties.
|
|
63
62
|
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
|
|
64
|
-
$font-family:
|
|
63
|
+
$global-font-family:
|
|
65
64
|
system-ui,
|
|
66
65
|
-apple-system,
|
|
67
66
|
blinkmacsystemfont,
|
|
@@ -70,4 +69,4 @@ $font-family:
|
|
|
70
69
|
"Helvetica Neue",
|
|
71
70
|
arial,
|
|
72
71
|
sans-serif !default;
|
|
73
|
-
$font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem);
|
|
72
|
+
$global-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem);
|
package/scss/theme/_index.scss
CHANGED
|
@@ -2,23 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
@use "variables" as *;
|
|
4
4
|
@use "../mixins/layer" as *;
|
|
5
|
-
@use "defaults";
|
|
5
|
+
@use "../defaults" as root-defaults;
|
|
6
6
|
@use "sass:map";
|
|
7
7
|
@use "../functions/theme";
|
|
8
8
|
|
|
9
9
|
@include layer(theme) {
|
|
10
10
|
:root {
|
|
11
|
-
background: $background;
|
|
12
|
-
color: $font-color;
|
|
13
|
-
font-family: $font-family;
|
|
14
|
-
font-size: $font-size;
|
|
11
|
+
background: $global-background;
|
|
12
|
+
color: $global-font-color;
|
|
13
|
+
font-family: $global-font-family;
|
|
14
|
+
font-size: $global-font-size;
|
|
15
|
+
|
|
16
|
+
@each $color, $map in $theme-light {
|
|
17
|
+
@each $shade, $value in $map {
|
|
18
|
+
--#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
|
|
19
|
+
}
|
|
20
|
+
}
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
// Set the active theme for dark mode.
|
|
18
24
|
.dark-mode {
|
|
19
25
|
@each $color, $map in $theme-dark {
|
|
20
26
|
@each $shade, $value in $map {
|
|
21
|
-
--#{defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
|
|
27
|
+
--#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
|
|
22
28
|
}
|
|
23
29
|
}
|
|
24
30
|
|
|
@@ -29,7 +35,7 @@
|
|
|
29
35
|
.light-mode {
|
|
30
36
|
@each $color, $map in $theme-light {
|
|
31
37
|
@each $shade, $value in $map {
|
|
32
|
-
--#{defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
|
|
38
|
+
--#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
|
|
33
39
|
}
|
|
34
40
|
}
|
|
35
41
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Variables referencing custom properties.
|
|
2
2
|
|
|
3
3
|
@use "defaults";
|
|
4
|
+
@use "../defaults" as root-defaults;
|
|
4
5
|
@use "sass:map";
|
|
5
6
|
|
|
6
7
|
// A colour map of base colours and their shades.
|
|
@@ -13,7 +14,10 @@ $colors: ();
|
|
|
13
14
|
|
|
14
15
|
@each $shade, $value in $map {
|
|
15
16
|
// Set the custom prop name and fallback value.
|
|
16
|
-
$color-property: var(
|
|
17
|
+
$color-property: var(
|
|
18
|
+
--#{root-defaults.$prefix}-#{$color}--#{$shade},
|
|
19
|
+
$value
|
|
20
|
+
);
|
|
17
21
|
|
|
18
22
|
// Add the custom prop to the map.
|
|
19
23
|
$color-map: map.merge(
|
|
@@ -52,15 +56,15 @@ $theme-active: ();
|
|
|
52
56
|
|
|
53
57
|
// Set the custom prop names and fallback values.
|
|
54
58
|
$light-property: var(
|
|
55
|
-
--#{defaults.$prefix}-theme-light--#{$color}--#{$shade},
|
|
59
|
+
--#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade},
|
|
56
60
|
$value
|
|
57
61
|
);
|
|
58
62
|
$dark-property: var(
|
|
59
|
-
--#{defaults.$prefix}-theme-dark--#{$color}--#{$shade},
|
|
63
|
+
--#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade},
|
|
60
64
|
$dark-value
|
|
61
65
|
);
|
|
62
66
|
$active-property: var(
|
|
63
|
-
--#{defaults.$prefix}-theme-active--#{$color}--#{$shade},
|
|
67
|
+
--#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade},
|
|
64
68
|
$light-property
|
|
65
69
|
);
|
|
66
70
|
|
|
@@ -107,15 +111,21 @@ $theme-active: ();
|
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
// Font properties.
|
|
110
|
-
$font-family: var(
|
|
111
|
-
|
|
114
|
+
$global-font-family: var(
|
|
115
|
+
--#{root-defaults.$prefix}-global-font-family,
|
|
116
|
+
#{defaults.$global-font-family}
|
|
117
|
+
);
|
|
118
|
+
$global-font-size: var(
|
|
119
|
+
--#{root-defaults.$prefix}-global-font-size,
|
|
120
|
+
#{defaults.$global-font-size}
|
|
121
|
+
);
|
|
112
122
|
|
|
113
123
|
// Colour properties.
|
|
114
|
-
$font-color: var(
|
|
115
|
-
--#{defaults.$prefix}-font-color,
|
|
124
|
+
$global-font-color: var(
|
|
125
|
+
--#{root-defaults.$prefix}-global-font-color,
|
|
116
126
|
#{map.get(map.get($theme-active, primary), 900)}
|
|
117
127
|
);
|
|
118
|
-
$background: var(
|
|
119
|
-
--#{defaults.$prefix}-background,
|
|
128
|
+
$global-background: var(
|
|
129
|
+
--#{root-defaults.$prefix}-global-background,
|
|
120
130
|
#{map.get(map.get($theme-active, primary), 100)}
|
|
121
131
|
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
body:before{border-bottom:2px solid #000;content:"Error: Undefined variable.\a \2577 \a 6 \2502 @if defaults.$use-important {\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/functions/_important.scss 6:7 insert()\a scss/utilities/background/_index.scss 14:21 @content\a scss/mixins/_layer.scss 11:7 layer()\a scss/utilities/background/_index.scss 8:1 @forward\a scss/utilities/background/background.scss 3:1 root stylesheet";display:block;font-family:Source Code Pro,SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,monospace,monospace;margin-bottom:1em;padding:1em;white-space:pre}
|