@graupl/graupl 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/utilities/spacing/spacing.css

@@ -0,0 +1,2 @@
+@layer graupl.utilities{.g-0.columns{--graupl-columns-column-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;--graupl-columns-row-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.g-0:not(.columns){gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.g-1.columns{--graupl-columns-column-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*0.125))!important;--graupl-columns-row-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*0.125))!important}.g-1:not(.columns){gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.g-2.columns{--graupl-columns-column-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*0.25))!important;--graupl-columns-row-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*0.25))!important}.g-2:not(.columns){gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.g-3.columns{--graupl-columns-column-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*0.5))!important;--graupl-columns-row-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*0.5))!important}.g-3:not(.columns){gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.g-4.columns{--graupl-columns-column-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*0.75))!important;--graupl-columns-row-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*0.75))!important}.g-4:not(.columns){gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.g-5.columns{--graupl-columns-column-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;--graupl-columns-row-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.g-5:not(.columns){gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.g-6.columns{--graupl-columns-column-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;--graupl-columns-row-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.g-6:not(.columns){gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.g-7.columns{--graupl-columns-column-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;--graupl-columns-row-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.g-7:not(.columns){gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.g-8.columns{--graupl-columns-column-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;--graupl-columns-row-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.g-8:not(.columns){gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.g-9.columns{--graupl-columns-column-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;--graupl-columns-row-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.g-9:not(.columns){gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.g-10.columns{--graupl-columns-column-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;--graupl-columns-row-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.g-10:not(.columns){gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.rg-0.columns{--graupl-columns-row-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.rg-0:not(.columns){row-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.rg-1.columns{--graupl-columns-row-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*0.125))!important}.rg-1:not(.columns){row-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.rg-2.columns{--graupl-columns-row-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*0.25))!important}.rg-2:not(.columns){row-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.rg-3.columns{--graupl-columns-row-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*0.5))!important}.rg-3:not(.columns){row-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.rg-4.columns{--graupl-columns-row-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*0.75))!important}.rg-4:not(.columns){row-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.rg-5.columns{--graupl-columns-row-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.rg-5:not(.columns){row-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.rg-6.columns{--graupl-columns-row-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.rg-6:not(.columns){row-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.rg-7.columns{--graupl-columns-row-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.rg-7:not(.columns){row-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.rg-8.columns{--graupl-columns-row-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.rg-8:not(.columns){row-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.rg-9.columns{--graupl-columns-row-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.rg-9:not(.columns){row-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.rg-10.columns{--graupl-columns-row-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.rg-10:not(.columns){row-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.cg-0.columns{--graupl-columns-column-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.cg-0:not(.columns){-moz-column-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;column-gap:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.cg-1.columns{--graupl-columns-column-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*0.125))!important}.cg-1:not(.columns){-moz-column-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important;column-gap:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.cg-2.columns{--graupl-columns-column-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*0.25))!important}.cg-2:not(.columns){-moz-column-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important;column-gap:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.cg-3.columns{--graupl-columns-column-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*0.5))!important}.cg-3:not(.columns){-moz-column-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important;column-gap:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.cg-4.columns{--graupl-columns-column-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*0.75))!important}.cg-4:not(.columns){-moz-column-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important;column-gap:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.cg-5.columns{--graupl-columns-column-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.cg-5:not(.columns){-moz-column-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;column-gap:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.cg-6.columns{--graupl-columns-column-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.cg-6:not(.columns){-moz-column-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;column-gap:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.cg-7.columns{--graupl-columns-column-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.cg-7:not(.columns){-moz-column-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;column-gap:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.cg-8.columns{--graupl-columns-column-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.cg-8:not(.columns){-moz-column-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;column-gap:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.cg-9.columns{--graupl-columns-column-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.cg-9:not(.columns){-moz-column-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;column-gap:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.cg-10.columns{--graupl-columns-column-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.cg-10:not(.columns){-moz-column-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;column-gap:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.p-0{padding:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.p-1{padding:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.p-2{padding:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.p-3{padding:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.p-4{padding:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.p-5{padding:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.p-6{padding:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.p-7{padding:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.p-8{padding:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.p-9{padding:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.p-10{padding:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.pt-0{padding-top:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.pt-1{padding-top:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.pt-2{padding-top:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.pt-3{padding-top:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.pt-4{padding-top:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.pt-5{padding-top:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.pt-6{padding-top:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.pt-7{padding-top:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.pt-8{padding-top:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.pt-9{padding-top:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.pt-10{padding-top:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.pr-0{padding-right:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.pr-1{padding-right:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.pr-2{padding-right:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.pr-3{padding-right:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.pr-4{padding-right:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.pr-5{padding-right:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.pr-6{padding-right:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.pr-7{padding-right:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.pr-8{padding-right:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.pr-9{padding-right:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.pr-10{padding-right:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.pb-0{padding-bottom:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.pb-1{padding-bottom:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.pb-2{padding-bottom:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.pb-3{padding-bottom:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.pb-4{padding-bottom:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.pb-5{padding-bottom:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.pb-6{padding-bottom:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.pb-7{padding-bottom:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.pb-8{padding-bottom:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.pb-9{padding-bottom:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.pb-10{padding-bottom:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.pl-0{padding-left:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.pl-1{padding-left:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.pl-2{padding-left:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.pl-3{padding-left:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.pl-4{padding-left:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.pl-5{padding-left:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.pl-6{padding-left:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.pl-7{padding-left:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.pl-8{padding-left:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.pl-9{padding-left:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.pl-10{padding-left:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.px-0{padding-left:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;padding-right:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.px-1{padding-left:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important;padding-right:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.px-2{padding-left:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important;padding-right:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.px-3{padding-left:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important;padding-right:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.px-4{padding-left:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important;padding-right:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.px-5{padding-left:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;padding-right:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.px-6{padding-left:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;padding-right:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.px-7{padding-left:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;padding-right:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.px-8{padding-left:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;padding-right:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.px-9{padding-left:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;padding-right:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.px-10{padding-left:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;padding-right:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.py-0{padding-bottom:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;padding-top:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.py-1{padding-bottom:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important;padding-top:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.py-2{padding-bottom:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important;padding-top:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.py-3{padding-bottom:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important;padding-top:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.py-4{padding-bottom:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important;padding-top:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.py-5{padding-bottom:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;padding-top:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.py-6{padding-bottom:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;padding-top:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.py-7{padding-bottom:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;padding-top:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.py-8{padding-bottom:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;padding-top:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.py-9{padding-bottom:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;padding-top:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.py-10{padding-bottom:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;padding-top:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.m-0{margin:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.m-1{margin:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.m-2{margin:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.m-3{margin:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.m-4{margin:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.m-5{margin:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.m-6{margin:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.m-7{margin:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.m-8{margin:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.m-9{margin:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.m-10{margin:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.mt-0{margin-top:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.mt-1{margin-top:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.mt-2{margin-top:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.mt-3{margin-top:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.mt-4{margin-top:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.mt-5{margin-top:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.mt-6{margin-top:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.mt-7{margin-top:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.mt-8{margin-top:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.mt-9{margin-top:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.mt-10{margin-top:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.mr-0{margin-right:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.mr-1{margin-right:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.mr-2{margin-right:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.mr-3{margin-right:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.mr-4{margin-right:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.mr-5{margin-right:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.mr-6{margin-right:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.mr-7{margin-right:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.mr-8{margin-right:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.mr-9{margin-right:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.mr-10{margin-right:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.mb-0{margin-bottom:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.mb-1{margin-bottom:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.mb-2{margin-bottom:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.mb-3{margin-bottom:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.mb-4{margin-bottom:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.mb-5{margin-bottom:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.mb-6{margin-bottom:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.mb-7{margin-bottom:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.mb-8{margin-bottom:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.mb-9{margin-bottom:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.mb-10{margin-bottom:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.ml-0{margin-left:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.ml-1{margin-left:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.ml-2{margin-left:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.ml-3{margin-left:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.ml-4{margin-left:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.ml-5{margin-left:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.ml-6{margin-left:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.ml-7{margin-left:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.ml-8{margin-left:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.ml-9{margin-left:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.ml-10{margin-left:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.mx-0{margin-left:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;margin-right:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.mx-1{margin-left:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important;margin-right:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.mx-2{margin-left:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important;margin-right:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.mx-3{margin-left:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important;margin-right:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.mx-4{margin-left:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important;margin-right:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.mx-5{margin-left:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;margin-right:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.mx-6{margin-left:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;margin-right:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.mx-7{margin-left:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;margin-right:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.mx-8{margin-left:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;margin-right:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.mx-9{margin-left:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;margin-right:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.mx-10{margin-left:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;margin-right:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}.my-0{margin-bottom:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important;margin-top:var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))!important}.my-1{margin-bottom:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important;margin-top:var(--graupl-spacer-1,calc(var(--graupl-spacer, 1rem)*.125))!important}.my-2{margin-bottom:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important;margin-top:var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))!important}.my-3{margin-bottom:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important;margin-top:var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))!important}.my-4{margin-bottom:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important;margin-top:var(--graupl-spacer-4,calc(var(--graupl-spacer, 1rem)*.75))!important}.my-5{margin-bottom:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important;margin-top:var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))!important}.my-6{margin-bottom:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important;margin-top:var(--graupl-spacer-6,calc(var(--graupl-spacer, 1rem)*1.5))!important}.my-7{margin-bottom:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important;margin-top:var(--graupl-spacer-7,calc(var(--graupl-spacer, 1rem)*2))!important}.my-8{margin-bottom:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important;margin-top:var(--graupl-spacer-8,calc(var(--graupl-spacer, 1rem)*3))!important}.my-9{margin-bottom:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important;margin-top:var(--graupl-spacer-9,calc(var(--graupl-spacer, 1rem)*5))!important}.my-10{margin-bottom:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important;margin-top:var(--graupl-spacer-10,calc(var(--graupl-spacer, 1rem)*10))!important}}
+/*# sourceMappingURL=spacing.css.map */

package/dist/utilities/spacing/spacing.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/utilities/spacing/_index.scss","spacing.css"],"names":[],"mappings":"AASI,wBCQM,aACE,+FAAA,CAGA,4FCjBV,CDsBQ,mBAEI,uECrBZ,CDUQ,aACE,mGAAA,CAGA,gGCVV,CDeQ,mBAEI,0ECdZ,CDGQ,aACE,kGAAA,CAGA,+FCHV,CDQQ,mBAEI,yECPZ,CDJQ,aACE,iGAAA,CAGA,8FCIV,CDCQ,mBAEI,wECAZ,CDXQ,aACE,kGAAA,CAGA,+FCWV,CDNQ,mBAEI,yECOZ,CDlBQ,aACE,+FAAA,CAGA,4FCkBV,CDbQ,mBAEI,uECcZ,CDzBQ,aACE,iGAAA,CAGA,8FCyBV,CDpBQ,mBAEI,yECqBZ,CDhCQ,aACE,+FAAA,CAGA,4FCgCV,CD3BQ,mBAEI,uEC4BZ,CDvCQ,aACE,+FAAA,CAGA,4FCuCV,CDlCQ,mBAEI,uECmCZ,CD9CQ,aACE,+FAAA,CAGA,4FC8CV,CDzCQ,mBAEI,uEC0CZ,CDrDQ,cACE,iGAAA,CAGA,8FCqDV,CDhDQ,oBAEI,yECiDZ,CDjCQ,cACE,4FCmCV,CD9BQ,oBAEI,2EC+BZ,CDvCQ,cACE,gGCyCV,CDpCQ,oBAEI,8ECqCZ,CD7CQ,cACE,+FC+CV,CD1CQ,oBAEI,6EC2CZ,CDnDQ,cACE,8FCqDV,CDhDQ,oBAEI,4ECiDZ,CDzDQ,cACE,+FC2DV,CDtDQ,oBAEI,6ECuDZ,CD/DQ,cACE,4FCiEV,CD5DQ,oBAEI,2EC6DZ,CDrEQ,cACE,8FCuEV,CDlEQ,oBAEI,6ECmEZ,CD3EQ,cACE,4FC6EV,CDxEQ,oBAEI,2ECyEZ,CDjFQ,cACE,4FCmFV,CD9EQ,oBAEI,2EC+EZ,CDvFQ,cACE,4FCyFV,CDpFQ,oBAEI,2ECqFZ,CD7FQ,eACE,8FC+FV,CD1FQ,qBAEI,6EC2FZ,CD/GQ,cACE,+FCiHV,CD5GQ,oBAEI,mFAAA,CAAA,8EC6GZ,CDrHQ,cACE,mGCuHV,CDlHQ,oBAEI,sFAAA,CAAA,iFCmHZ,CD3HQ,cACE,kGC6HV,CDxHQ,oBAEI,qFAAA,CAAA,gFCyHZ,CDjIQ,cACE,iGCmIV,CD9HQ,oBAEI,oFAAA,CAAA,+EC+HZ,CDvIQ,cACE,kGCyIV,CDpIQ,oBAEI,qFAAA,CAAA,gFCqIZ,CD7IQ,cACE,+FC+IV,CD1IQ,oBAEI,mFAAA,CAAA,8EC2IZ,CDnJQ,cACE,iGCqJV,CDhJQ,oBAEI,qFAAA,CAAA,gFCiJZ,CDzJQ,cACE,+FC2JV,CDtJQ,oBAEI,mFAAA,CAAA,8ECuJZ,CD/JQ,cACE,+FCiKV,CD5JQ,oBAEI,mFAAA,CAAA,8EC6JZ,CDrKQ,cACE,+FCuKV,CDlKQ,oBAEI,mFAAA,CAAA,8ECmKZ,CD3KQ,eACE,iGC6KV,CDxKQ,qBAEI,qFAAA,CAAA,gFCyKZ,CDpMI,KA4CM,2EC2JV,CDvMI,KA4CM,8EC8JV,CD1MI,KA4CM,6ECiKV,CD7MI,KA4CM,4ECoKV,CDhNI,KA4CM,6ECuKV,CDnNI,KA4CM,2EC0KV,CDtNI,KA4CM,6EC6KV,CDzNI,KA4CM,2ECgLV,CD5NI,KA4CM,2ECmLV,CD/NI,KA4CM,2ECsLV,CDlOI,MA4CM,6ECyLV,CDrOI,MA4CM,+EC4LV,CDxOI,MA4CM,kFC+LV,CD3OI,MA4CM,iFCkMV,CD9OI,MA4CM,gFCqMV,CDjPI,MA4CM,iFCwMV,CDpPI,MA4CM,+EC2MV,CDvPI,MA4CM,iFC8MV,CD1PI,MA4CM,+ECiNV,CD7PI,MA4CM,+ECoNV,CDhQI,MA4CM,+ECuNV,CDnQI,OA4CM,iFC0NV,CDtQI,MA4CM,iFC6NV,CDzQI,MA4CM,oFCgOV,CD5QI,MA4CM,mFCmOV,CD/QI,MA4CM,kFCsOV,CDlRI,MA4CM,mFCyOV,CDrRI,MA4CM,iFC4OV,CDxRI,MA4CM,mFC+OV,CD3RI,MA4CM,iFCkPV,CD9RI,MA4CM,iFCqPV,CDjSI,MA4CM,iFCwPV,CDpSI,OA4CM,mFC2PV,CDvSI,MA4CM,kFC8PV,CD1SI,MA4CM,qFCiQV,CD7SI,MA4CM,oFCoQV,CDhTI,MA4CM,mFCuQV,CDnTI,MA4CM,oFC0QV,CDtTI,MA4CM,kFC6QV,CDzTI,MA4CM,oFCgRV,CD5TI,MA4CM,kFCmRV,CD/TI,MA4CM,kFCsRV,CDlUI,MA4CM,kFCyRV,CDrUI,OA4CM,oFC4RV,CDxUI,MA4CM,gFC+RV,CD3UI,MA4CM,mFCkSV,CD9UI,MA4CM,kFCqSV,CDjVI,MA4CM,iFCwSV,CDpVI,MA4CM,kFC2SV,CDvVI,MA4CM,gFC8SV,CD1VI,MA4CM,kFCiTV,CD7VI,MA4CM,gFCoTV,CDhWI,MA4CM,gFCuTV,CDnWI,MA4CM,gFC0TV,CDtWI,OA4CM,kFC6TV,CDzWI,MA4CM,gFAAA,CAAA,iFCiUV,CD7WI,MA4CM,mFAAA,CAAA,oFCqUV,CDjXI,MA4CM,kFAAA,CAAA,mFCyUV,CDrXI,MA4CM,iFAAA,CAAA,kFC6UV,CDzXI,MA4CM,kFAAA,CAAA,mFCiVV,CD7XI,MA4CM,gFAAA,CAAA,iFCqVV,CDjYI,MA4CM,kFAAA,CAAA,mFCyVV,CDrYI,MA4CM,gFAAA,CAAA,iFC6VV,CDzYI,MA4CM,gFAAA,CAAA,iFCiWV,CD7YI,MA4CM,gFAAA,CAAA,iFCqWV,CDjZI,OA4CM,kFAAA,CAAA,mFCyWV,CDrZI,MA4CM,kFAAA,CAAA,+EC6WV,CDzZI,MA4CM,qFAAA,CAAA,kFCiXV,CD7ZI,MA4CM,oFAAA,CAAA,iFCqXV,CDjaI,MA4CM,mFAAA,CAAA,gFCyXV,CDraI,MA4CM,oFAAA,CAAA,iFC6XV,CDzaI,MA4CM,kFAAA,CAAA,+ECiYV,CD7aI,MA4CM,oFAAA,CAAA,iFCqYV,CDjbI,MA4CM,kFAAA,CAAA,+ECyYV,CDrbI,MA4CM,kFAAA,CAAA,+EC6YV,CDzbI,MA4CM,kFAAA,CAAA,+ECiZV,CD7bI,OA4CM,oFAAA,CAAA,iFCqZV,CDjcI,KA4CM,0ECwZV,CDpcI,KA4CM,6EC2ZV,CDvcI,KA4CM,4EC8ZV,CD1cI,KA4CM,2ECiaV,CD7cI,KA4CM,4ECoaV,CDhdI,KA4CM,0ECuaV,CDndI,KA4CM,4EC0aV,CDtdI,KA4CM,0EC6aV,CDzdI,KA4CM,0ECgbV,CD5dI,KA4CM,0ECmbV,CD/dI,MA4CM,4ECsbV,CDleI,MA4CM,8ECybV,CDreI,MA4CM,iFC4bV,CDxeI,MA4CM,gFC+bV,CD3eI,MA4CM,+ECkcV,CD9eI,MA4CM,gFCqcV,CDjfI,MA4CM,8ECwcV,CDpfI,MA4CM,gFC2cV,CDvfI,MA4CM,8EC8cV,CD1fI,MA4CM,8ECidV,CD7fI,MA4CM,8ECodV,CDhgBI,OA4CM,gFCudV,CDngBI,MA4CM,gFC0dV,CDtgBI,MA4CM,mFC6dV,CDzgBI,MA4CM,kFCgeV,CD5gBI,MA4CM,iFCmeV,CD/gBI,MA4CM,kFCseV,CDlhBI,MA4CM,gFCyeV,CDrhBI,MA4CM,kFC4eV,CDxhBI,MA4CM,gFC+eV,CD3hBI,MA4CM,gFCkfV,CD9hBI,MA4CM,gFCqfV,CDjiBI,OA4CM,kFCwfV,CDpiBI,MA4CM,iFC2fV,CDviBI,MA4CM,oFC8fV,CD1iBI,MA4CM,mFCigBV,CD7iBI,MA4CM,kFCogBV,CDhjBI,MA4CM,mFCugBV,CDnjBI,MA4CM,iFC0gBV,CDtjBI,MA4CM,mFC6gBV,CDzjBI,MA4CM,iFCghBV,CD5jBI,MA4CM,iFCmhBV,CD/jBI,MA4CM,iFCshBV,CDlkBI,OA4CM,mFCyhBV,CDrkBI,MA4CM,+EC4hBV,CDxkBI,MA4CM,kFC+hBV,CD3kBI,MA4CM,iFCkiBV,CD9kBI,MA4CM,gFCqiBV,CDjlBI,MA4CM,iFCwiBV,CDplBI,MA4CM,+EC2iBV,CDvlBI,MA4CM,iFC8iBV,CD1lBI,MA4CM,+ECijBV,CD7lBI,MA4CM,+ECojBV,CDhmBI,MA4CM,+ECujBV,CDnmBI,OA4CM,iFC0jBV,CDtmBI,MA4CM,+EAAA,CAAA,gFC8jBV,CD1mBI,MA4CM,kFAAA,CAAA,mFCkkBV,CD9mBI,MA4CM,iFAAA,CAAA,kFCskBV,CDlnBI,MA4CM,gFAAA,CAAA,iFC0kBV,CDtnBI,MA4CM,iFAAA,CAAA,kFC8kBV,CD1nBI,MA4CM,+EAAA,CAAA,gFCklBV,CD9nBI,MA4CM,iFAAA,CAAA,kFCslBV,CDloBI,MA4CM,+EAAA,CAAA,gFC0lBV,CDtoBI,MA4CM,+EAAA,CAAA,gFC8lBV,CD1oBI,MA4CM,+EAAA,CAAA,gFCkmBV,CD9oBI,OA4CM,iFAAA,CAAA,kFCsmBV,CDlpBI,MA4CM,iFAAA,CAAA,8EC0mBV,CDtpBI,MA4CM,oFAAA,CAAA,iFC8mBV,CD1pBI,MA4CM,mFAAA,CAAA,gFCknBV,CD9pBI,MA4CM,kFAAA,CAAA,+ECsnBV,CDlqBI,MA4CM,mFAAA,CAAA,gFC0nBV,CDtqBI,MA4CM,iFAAA,CAAA,8EC8nBV,CD1qBI,MA4CM,mFAAA,CAAA,gFCkoBV,CD9qBI,MA4CM,iFAAA,CAAA,8ECsoBV,CDlrBI,MA4CM,iFAAA,CAAA,8EC0oBV,CDtrBI,MA4CM,iFAAA,CAAA,8EC8oBV,CD1rBI,OA4CM,mFAAA,CAAA,gFCkpBV,CACF","file":"spacing.css"}

package/dist/utilities/typography/typography.css

@@ -0,0 +1,2 @@
+@layer graupl.utilities{.text-xs{font-size:var(--graupl-font-xs,calc(var(--graupl-font-base, 1rem)*.694))!important}.text-sm{font-size:var(--graupl-font-sm,calc(var(--graupl-font-base, 1rem)*.833))!important}.text-base{font-size:var(--graupl-font-base,calc(var(--graupl-font-base, 1rem)*1))!important}.text-lg{font-size:var(--graupl-font-lg,calc(var(--graupl-font-base, 1rem)*1.2))!important}.text-xl{font-size:var(--graupl-font-xl,calc(var(--graupl-font-base, 1rem)*1.44))!important}.text-2xl{font-size:var(--graupl-font-2xl,calc(var(--graupl-font-base, 1rem)*1.728))!important}.text-3xl{font-size:var(--graupl-font-3xl,calc(var(--graupl-font-base, 1rem)*2.074))!important}.text-4xl{font-size:var(--graupl-font-4xl,calc(var(--graupl-font-base, 1rem)*2.488))!important}.text-5xl{font-size:var(--graupl-font-5xl,calc(var(--graupl-font-base, 1rem)*2.986))!important}.text-paragraph{font-size:var(--graupl-paragraph-font-size,var(--graupl-body-font-size,var(--graupl-font-base,calc(var(--graupl-font-base, 1rem)*1))))!important;font-weight:var(--graupl-paragraph-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)))!important;line-height:var(--graupl-paragraph-line-height,var(--graupl-body-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-paragraph-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0)!important}.text-small{font-size:var(--graupl-small-font-size, )!important;font-weight:var(--graupl-small-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)))!important;line-height:var(--graupl-small-line-height,var(--graupl-line-height,1.2em))!important;margin:var(--graupl-small-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0)!important}.text-h1{font-family:var(--graupl-h1-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h1-font-size,var(--graupl-font-5xl,calc(var(--graupl-font-base, 1rem)*2.986)))!important;font-weight:var(--graupl-h1-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h1-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h1-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.text-h2{font-family:var(--graupl-h2-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h2-font-size,var(--graupl-font-4xl,calc(var(--graupl-font-base, 1rem)*2.488)))!important;font-weight:var(--graupl-h2-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h2-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h2-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.text-h3{font-family:var(--graupl-h3-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h3-font-size,var(--graupl-font-3xl,calc(var(--graupl-font-base, 1rem)*2.074)))!important;font-weight:var(--graupl-h3-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h3-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h3-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.text-h4{font-family:var(--graupl-h4-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(var(--graupl-font-base, 1rem)*1.728)))!important;font-weight:var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h4-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.text-h5{font-family:var(--graupl-h5-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h5-font-size,var(--graupl-font-xl,calc(var(--graupl-font-base, 1rem)*1.44)))!important;font-weight:var(--graupl-h5-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h5-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h5-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.text-h6{font-family:var(--graupl-h6-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h6-font-size,var(--graupl-font-lg,calc(var(--graupl-font-base, 1rem)*1.2)))!important;font-weight:var(--graupl-h6-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h6-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;margin:var(--graupl-h6-margin,var(--graupl-heading-margin,0 0 var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)) 0))!important}.font-light{font-weight:var(--graupl-font-weight-light,300)!important}.font-normal{font-weight:var(--graupl-font-weight-normal,400)!important}.font-bold{font-weight:var(--graupl-font-weight-bold,700)!important}.font-italic{font-style:italic!important}.font-not-italic{font-style:normal!important}}
+/*# sourceMappingURL=typography.css.map */

package/dist/utilities/typography/typography.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/utilities/typography/_index.scss","typography.css"],"names":[],"mappings":"AASI,wBCAA,SACE,kFCNJ,CDKE,SACE,kFCHJ,CDEE,WACE,iFCAJ,CDDE,SACE,iFCGJ,CDJE,SACE,kFCMJ,CDPE,UACE,oFCSJ,CDVE,UACE,oFCYJ,CDbE,UACE,oFCeJ,CDhBE,UACE,oFCkBJ,CDdA,gBAEE,gJAAA,CACA,6HAAA,CACA,wHAAA,CAHA,iHCmBF,CDbA,YAEE,mDAAA,CACA,yHAAA,CACA,qFAAA,CAHA,6GCkBF,CDZA,SAEE,8MAAA,CACA,+GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICkBF,CDXA,SAEE,8MAAA,CACA,+GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICiBF,CDVA,SAEE,8MAAA,CACA,+GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICgBF,CDTA,SAEE,8MAAA,CACA,+GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICeF,CDRA,SAEE,8MAAA,CACA,6GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICcF,CDPA,SAEE,8MAAA,CACA,4GAAA,CACA,sJAAA,CACA,oHAAA,CAJA,uICaF,CDJE,YACE,yDCMJ,CDPE,aACE,0DCSJ,CDVE,WACE,wDCYJ,CDPA,aACE,2BCSF,CDNA,iBACE,2BCQF,CACF","file":"typography.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {
@@ -61,7 +61,7 @@
     "@eslint/js": "^9.0.0",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
-    "cssnano": "^6.1.2",
+    "cssnano": "^7.0.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -72,7 +72,7 @@
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
-    "postcss-discard-comments": "^6.0.2",
+    "postcss-discard-comments": "^7.0.0",
     "prettier": "^3.2.5",
     "sass": "^1.69.5",
     "standard-version": "^9.5.0",

package/scss/_defaults.scss

@@ -14,7 +14,20 @@ $use-important: true !default;
 $content-max-width: 96ch !default;
 
 // Spacing properties.
-$gap: 1rem !default;
+$spacer: 1rem !default;
+$spacer-multipliers: (
+  0: 0,
+  1: 0.125,
+  2: 0.25,
+  3: 0.5,
+  4: 0.75,
+  5: 1,
+  6: 1.5,
+  7: 2,
+  8: 3,
+  9: 5,
+  10: 10,
+) !default;
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -25,14 +38,6 @@ $border-radius: 0.125rem !default;
 $border-width: 2px !default;
 $border-style: solid !default;
 
-// Font properties.
-$font-size-base: 1rem !default;
-$font-size: (
-  small: $font-size-base * 0.875,
-  default: $font-size-base,
-  large: $font-size-base * 1.125,
-) !default;
-
 // Transition properties.
 $transition-duration-base: 100;
 $transition-duration: (

package/scss/_variables.scss

@@ -10,7 +10,16 @@ $content-max-width: var(
 );
 
 // Spacing properties.
-$gap: var(--#{defaults.$prefix}-gap, defaults.$gap);
+$spacer: var(--#{defaults.$prefix}-spacer, defaults.$spacer);
+$spacers: ();
+
+@each $key, $value in defaults.$spacer-multipliers {
+  $space: var(
+    --#{defaults.$prefix}-spacer-#{$key},
+    calc(#{$value} * #{$spacer})
+  );
+  $spacers: map.set($spacers, $key, $space);
+}
 
 // Border properties.
 $border-radius: var(
@@ -20,25 +29,6 @@ $border-radius: var(
 $border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
 $border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
 
-// Font properties.
-$font-size: (
-  small:
-    var(
-      --#{defaults.$prefix}-font-size-small,
-      map.get(defaults.$font-size, small)
-    ),
-  default:
-    var(
-      --#{defaults.$prefix}-font-size-default,
-      map.get(defaults.$font-size, default)
-    ),
-  large:
-    var(
-      --#{defaults.$prefix}-font-size-large,
-      map.get(defaults.$font-size, large)
-    ),
-);
-
 // Transition properties.
 $transition-duration: (
   fast:

package/scss/base/form/_variables.scss

@@ -3,16 +3,17 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
 @use "sass:map";
 
 $input-padding-x: var(
   --#{root-defaults.$prefix}-input-padding-x,
-  #{root-variables.$gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
 $input-padding-y: var(
   --#{root-defaults.$prefix}-input-padding-y,
-  calc(#{root-variables.$gap} / 2)
+  #{map.get(root-variables.$spacers, 3)}
 );
 $input-padding: var(
   --#{root-defaults.$prefix}-input-padding,
@@ -20,7 +21,7 @@ $input-padding: var(
 );
 $input-font-size: var(
   --#{root-defaults.$prefix}-input-font-size,
-  #{map.get(root-variables.$font-size, default)}
+  #{map.get(typography.$font-sizes, base)}
 );
 $label-font-size: var(
   --#{root-defaults.$prefix}-label-font-size,
@@ -32,7 +33,7 @@ $fieldset-direction: var(
 );
 $fieldset-gap: var(
   --#{root-defaults.$prefix}-fieldset-gap,
-  calc(#{root-variables.$gap} / 4)
+  map.get(root-variables.$spacers, 2)
 );
 $fieldset-padding-x: var(
   --#{root-defaults.$prefix}-fieldset-padding-x,

package/scss/component/button/_index.scss

@@ -1,7 +1,7 @@
 // Graupl Button Component.
 
 @use "../../defaults" as root-defaults;
-@use "../../theme/variables" as theme;
+@use "../../theme/color/variables" as color;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 @use "../../mixins/media-queries" as *;
@@ -86,7 +86,7 @@
       }
     }
 
-    @each $color, $map in theme.$theme-active {
+    @each $color, $map in color.$theme-active {
       &.#{$color} {
         --#{root-defaults.$prefix}-button-hover-background: #{map.get(
             $map,

package/scss/component/button/_variables.scss

@@ -3,6 +3,7 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
 @use "sass:map";
 
@@ -17,11 +18,11 @@ $button-min-height: var(
 );
 $button-padding-x: var(
   --#{root-defaults.$prefix}-button-padding-x,
-  #{root-variables.$gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
 $button-padding-y: var(
   --#{root-defaults.$prefix}-button-padding-y,
-  calc(#{root-variables.$gap} / 2)
+  #{map.get(root-variables.$spacers, 3)}
 );
 $button-padding: var(
   --#{root-defaults.$prefix}-button-padding,
@@ -29,7 +30,7 @@ $button-padding: var(
 );
 $button-font-size: var(
   --#{root-defaults.$prefix}-button-font-size,
-  #{map.get(root-variables.$font-size, default)}
+  #{map.get(typography.$font-sizes, base)}
 );
 $button-transition: var(
   --#{root-defaults.$prefix}-button-transition,

package/scss/functions/_theme.scss

@@ -1,10 +1,10 @@
 // A function to get the specific theme shades.
 
 @use "sass:map";
-@use "../theme/variables" as theme;
+@use "../theme/color/variables" as color;
 
 @function get($color, $shade) {
-  $color-map: map.get(theme.$theme-active, $color);
+  $color-map: map.get(color.$theme-active, $color);
   $value: map.get($color-map, $shade);
 
   @return $value;

package/scss/layout/columns/_index.scss

@@ -8,11 +8,8 @@
 @include layer(layout) {
   .columns {
     display: grid;
-    grid-template-columns: var(
-      --#{root-defaults.$prefix}-columns,
-      repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
-    );
-    gap: $columns-gap;
+    grid-template-columns: $columns-grid-template-columns;
+    gap: $columns-row-gap $columns-column-gap;
 
     > * {
       grid-column: span $columns-span;

package/scss/layout/columns/_variables.scss

@@ -3,21 +3,31 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "sass:map";
 
-$columns-gap: var(
-  --#{root-defaults.$prefix}-columns-gap,
-  #{root-variables.$gap}
+$columns-row-gap: var(
+  --#{root-defaults.$prefix}-columns-row-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$columns-column-gap: var(
+  --#{root-defaults.$prefix}-columns-column-gap,
+  #{map.get(root-variables.$spacers, 5)}
 );
 $columns-count: var(
   --#{root-defaults.$prefix}-columns-count,
   #{defaults.$columns-count}
 );
+
+// Calculate the min-width of each column based on the content-max-width and column-gap.
+// We take the maximum width of the page and subtract the gap width multiplied by the number of
+// columns minus one (to account for the gaps between columns).
+// We then divide this by the number of columns to get the min-width of each column.
 /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
 $columns-min-width: var(
   --#{root-defaults.$prefix}-columns-min-width,
   calc(
     (
-        #{root-variables.$content-max-width} - #{$columns-gap} *
+        #{root-variables.$content-max-width} - #{$columns-column-gap} *
           (#{$columns-count} - 1)
       ) / #{$columns-count}
   )
@@ -27,6 +37,10 @@ $columns-max-width: var(
   --#{root-defaults.$prefix}-columns-max-width,
   #{defaults.$columns-max-width}
 );
+$columns-grid-template-columns: var(
+  --#{root-defaults.$prefix}-columns-grid-template-columns,
+  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
+);
 $columns-span: var(
   --#{root-defaults.$prefix}-columns-span,
   #{defaults.$columns-span}

package/scss/layout/container/_variables.scss

@@ -3,10 +3,11 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "sass:map";
 
 $container-gap: var(
   --#{root-defaults.$prefix}-container-gap,
-  #{root-variables.$gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
 $container-content-max-width: var(
   --#{root-defaults.$prefix}-container-content-max-width,

package/scss/theme/_index.scss

@@ -1,44 +1,4 @@
-// Graupl Theme.
+// Graupl theme.
 
-@use "variables" as *;
-@use "../mixins/layer" as *;
-@use "../defaults" as root-defaults;
-@use "sass:map";
-@use "../functions/theme";
-
-@include layer(theme) {
-  :root {
-    background: $global-background;
-    color: $global-font-color;
-    font-family: $global-font-family;
-    font-size: $global-font-size;
-
-    @each $color, $map in $theme-light {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
-      }
-    }
-  }
-
-  // Set the active theme for dark mode.
-  .dark-mode {
-    @each $color, $map in $theme-dark {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
-      }
-    }
-
-    color-scheme: dark;
-  }
-
-  // Set the active theme for light mode.
-  .light-mode {
-    @each $color, $map in $theme-light {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
-      }
-    }
-
-    color-scheme: light;
-  }
-}
+@forward "color";
+@forward "typography";

package/scss/theme/{_defaults.scss → color/_defaults.scss}

@@ -57,16 +57,3 @@ $dark-map: (
   800: 200,
   900: 100,
 ) !default;
-
-// Font properties.
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-$global-font-family:
-  system-ui,
-  -apple-system,
-  blinkmacsystemfont,
-  "Segoe UI",
-  roboto,
-  "Helvetica Neue",
-  arial,
-  sans-serif !default;
-$global-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem);

package/scss/theme/color/_index.scss

@@ -0,0 +1,42 @@
+// Color theme styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+@use "../../functions/theme";
+
+@include layer(theme) {
+  :root {
+    background: $root-background;
+    color: $root-font-color;
+
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+  }
+
+  // Set the active theme for dark mode.
+  .dark-mode {
+    @each $color, $map in $theme-dark {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+
+    color-scheme: dark;
+  }
+
+  // Set the active theme for light mode.
+  .light-mode {
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+
+    color-scheme: light;
+  }
+}

package/scss/theme/{_variables.scss → color/_variables.scss}

@@ -1,7 +1,7 @@
 // Variables referencing custom properties.
 
 @use "defaults";
-@use "../defaults" as root-defaults;
+@use "../../defaults" as root-defaults;
 @use "sass:map";
 
 // A colour map of base colours and their shades.
@@ -110,22 +110,12 @@ $theme-active: ();
   );
 }
 
-// Font properties.
-$global-font-family: var(
-  --#{root-defaults.$prefix}-global-font-family,
-  #{defaults.$global-font-family}
-);
-$global-font-size: var(
-  --#{root-defaults.$prefix}-global-font-size,
-  #{defaults.$global-font-size}
-);
-
 // Colour properties.
-$global-font-color: var(
-  --#{root-defaults.$prefix}-global-font-color,
+$root-font-color: var(
+  --#{root-defaults.$prefix}-root-font-color,
   #{map.get(map.get($theme-active, primary), 900)}
 );
-$global-background: var(
-  --#{root-defaults.$prefix}-global-background,
+$root-background: var(
+  --#{root-defaults.$prefix}-root-background,
   #{map.get(map.get($theme-active, primary), 100)}
 );

package/scss/theme/color/color.scss

@@ -0,0 +1,3 @@
+// Color theme styles.
+
+@forward "index";

package/scss/theme/typography/_defaults.scss

@@ -0,0 +1,41 @@
+// Default values for Graupl.
+//
+// Generally, these should not be used directly when styling components.
+// They are mainly used to provide default fallbacks for custom properties
+// which can be found in the `variables.scss` file.
+
+// font properties.
+$font-size: 1rem !default;
+$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
+$line-height: 1.2em !default;
+
+// Multipliers for font sizes.
+// This uses a minor third scale.
+// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000
+$font-size-multipliers: (
+  xs: 0.694,
+  sm: 0.833,
+  base: 1,
+  lg: 1.2,
+  xl: 1.44,
+  2xl: 1.728,
+  3xl: 2.074,
+  4xl: 2.488,
+  5xl: 2.986,
+) !default;
+$font-weights: (
+  light: 300,
+  normal: 400,
+  bold: 700,
+);
+
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$root-font-family:
+  system-ui,
+  -apple-system,
+  blinkmacsystemfont,
+  "Segoe UI",
+  roboto,
+  "Helvetica Neue",
+  arial,
+  sans-serif !default;