draft-components 0.72.1 → 0.73.0

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.
Files changed (6) hide show
  1. package/css/draft-components-utils.css +1 -1
  2. package/package.json +1 -1
  3. package/scss/draft-components-utils.scss +2 -1
  4. package/scss/utils/{_borders.scss → _border.scss} +0 -0
  5. package/scss/utils/_color.scss +601 -0
  6. package/scss/utils/_typography.scss +0 -318
package/css/draft-components-utils.css CHANGED
@@ -1 +1 @@
1
- .d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}.box-content{box-sizing:content-box!important}.box-border{box-sizing:border-box!important}.width-full{width:100%!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-center{align-items:center!important;display:flex!important;justify-content:center!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column{flex-direction:column!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-justify-start{justify-content:flex-start!important}.flex-justify-end{justify-content:flex-end!important}.flex-justify-center{justify-content:center!important}.flex-justify-between{justify-content:space-between!important}.flex-justify-around{justify-content:space-around!important}.flex-items-start{align-items:flex-start!important}.flex-items-end{align-items:flex-end!important}.flex-items-center{align-items:center!important}.flex-items-baseline{align-items:baseline!important}.flex-items-stretch{align-items:stretch!important}.flex-content-start{align-content:flex-start!important}.flex-content-end{align-content:flex-end!important}.flex-content-center{align-content:center!important}.flex-content-between{align-content:space-between!important}.flex-content-around{align-content:space-around!important}.flex-content-stretch{align-content:stretch!important}.flex-1{flex:1!important}.flex-auto{flex:auto!important}.flex-grow-0{flex-grow:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-self-auto{align-self:auto!important}.flex-self-start{align-self:flex-start!important}.flex-self-end{align-self:flex-end!important}.flex-self-center{align-self:center!important}.flex-self-baseline{align-self:baseline!important}.flex-self-stretch{align-self:stretch!important}.m-auto{margin:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-bottom:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.m-0{margin:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-bottom:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-bottom:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-bottom:.75rem!important}.mt-3,.my-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.m-4{margin:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-bottom:1rem!important}.mt-4,.my-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.m-5{margin:1.25rem!important}.mx-5{margin-left:1.25rem!important;margin-right:1.25rem!important}.my-5{margin-bottom:1.25rem!important}.mt-5,.my-5{margin-top:1.25rem!important}.mr-5{margin-right:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.m-6{margin:1.5rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-6{margin-bottom:1.5rem!important}.mt-6,.my-6{margin-top:1.5rem!important}.mr-6{margin-right:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.m-8{margin:2rem!important}.mx-8{margin-left:2rem!important;margin-right:2rem!important}.my-8{margin-bottom:2rem!important}.mt-8,.my-8{margin-top:2rem!important}.mr-8{margin-right:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.m-10{margin:2.5rem!important}.mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.my-10{margin-bottom:2.5rem!important}.mt-10,.my-10{margin-top:2.5rem!important}.mr-10{margin-right:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.m-12{margin:3rem!important}.mx-12{margin-left:3rem!important;margin-right:3rem!important}.my-12{margin-bottom:3rem!important}.mt-12,.my-12{margin-top:3rem!important}.mr-12{margin-right:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.m-16{margin:4rem!important}.mx-16{margin-left:4rem!important;margin-right:4rem!important}.my-16{margin-bottom:4rem!important}.mt-16,.my-16{margin-top:4rem!important}.mr-16{margin-right:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.m-20{margin:5rem!important}.mx-20{margin-left:5rem!important;margin-right:5rem!important}.my-20{margin-bottom:5rem!important}.mt-20,.my-20{margin-top:5rem!important}.mr-20{margin-right:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.m-24{margin:6rem!important}.mx-24{margin-left:6rem!important;margin-right:6rem!important}.my-24{margin-bottom:6rem!important}.mt-24,.my-24{margin-top:6rem!important}.mr-24{margin-right:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.p-0{padding:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.p-3{padding:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-bottom:.75rem!important}.pt-3,.py-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-bottom:1rem!important}.pt-4,.py-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.p-5{padding:1.25rem!important}.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.py-5{padding-bottom:1.25rem!important}.pt-5,.py-5{padding-top:1.25rem!important}.pr-5{padding-right:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.p-6{padding:1.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important}.pt-6,.py-6{padding-top:1.5rem!important}.pr-6{padding-right:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.p-8{padding:2rem!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.py-8{padding-bottom:2rem!important}.pt-8,.py-8{padding-top:2rem!important}.pr-8{padding-right:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.p-10{padding:2.5rem!important}.px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.py-10{padding-bottom:2.5rem!important}.pt-10,.py-10{padding-top:2.5rem!important}.pr-10{padding-right:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.p-12{padding:3rem!important}.px-12{padding-left:3rem!important;padding-right:3rem!important}.py-12{padding-bottom:3rem!important}.pt-12,.py-12{padding-top:3rem!important}.pr-12{padding-right:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.p-16{padding:4rem!important}.px-16{padding-left:4rem!important;padding-right:4rem!important}.py-16{padding-bottom:4rem!important}.pt-16,.py-16{padding-top:4rem!important}.pr-16{padding-right:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.p-20{padding:5rem!important}.px-20{padding-left:5rem!important;padding-right:5rem!important}.py-20{padding-bottom:5rem!important}.pt-20,.py-20{padding-top:5rem!important}.pr-20{padding-right:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.p-24{padding:6rem!important}.px-24{padding-left:6rem!important;padding-right:6rem!important}.py-24{padding-bottom:6rem!important}.pt-24,.py-24{padding-top:6rem!important}.pr-24{padding-right:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-10{gap:2.5rem!important}.gap-12{gap:3rem!important}.gap-16{gap:4rem!important}.gap-20{gap:5rem!important}.gap-24{gap:6rem!important}.rounded-none{border-radius:0!important}.rounded-2xs{border-radius:.125rem!important}.rounded-xs{border-radius:.25rem!important}.rounded-sm{border-radius:.3125rem!important}.rounded-md{border-radius:.375rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-xl{border-radius:.625rem!important}.rounded-2xl{border-radius:.75rem!important}.rounded-circle{border-radius:50%!important}.border{border:1px solid #d4d4d8!important}.border-top{border-top:1px solid #d4d4d8!important}.border-right{border-right:1px solid #d4d4d8!important}.border-bottom{border-bottom:1px solid #d4d4d8!important}.border-left{border-left:1px solid #d4d4d8!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-dashed{border-style:dashed!important}.border-dotted{border-style:dotted!important}.color-inherit{color:inherit!important}.color-primary{color:var(--dc-primary-text-color)!important}.color-secondary{color:var(--dc-secondary-text-color)!important}.color-tertiary{color:var(--dc-tertiary-text-color)!important}.color-link{color:var(--dc-link-text-color)!important}.color-error{color:var(--dc-error-text-color)!important}.color-warning{color:var(--dc-warning-text-color)!important}.color-info{color:var(--dc-info-text-color)!important}.color-success{color:var(--dc-success-text-color)!important}.text-gray-50{color:#fafafa!important}.text-gray-100{color:#f4f4f5!important}.text-gray-200{color:#e4e4e7!important}.text-gray-300{color:#d4d4d8!important}.text-gray-400{color:#a1a1aa!important}.text-gray-500{color:#71717a!important}.text-gray-600{color:#52525b!important}.text-gray-700{color:#3f3f46!important}.text-gray-800{color:#27272a!important}.text-gray-900{color:#18181b!important}.text-blue-50{color:#eff6ff!important}.text-blue-100{color:#dbeafe!important}.text-blue-200{color:#bfdbfe!important}.text-blue-300{color:#93c5fd!important}.text-blue-400{color:#60a5fa!important}.text-blue-500{color:#3b82f6!important}.text-blue-600{color:#2563eb!important}.text-blue-700{color:#1d4ed8!important}.text-blue-800{color:#1e40af!important}.text-blue-900{color:#1e3a8a!important}.text-cyan-50{color:#e3fafc!important}.text-cyan-100{color:#c5f6fa!important}.text-cyan-200{color:#99e9f2!important}.text-cyan-300{color:#66d9e8!important}.text-cyan-400{color:#3bc9db!important}.text-cyan-500{color:#22b8cf!important}.text-cyan-600{color:#15aabf!important}.text-cyan-700{color:#1098ad!important}.text-cyan-800{color:#0c8599!important}.text-cyan-900{color:#0b7285!important}.text-red-50{color:#fff5f5!important}.text-red-100{color:#ffe3e3!important}.text-red-200{color:#ffc9c9!important}.text-red-300{color:#ffa8a8!important}.text-red-400{color:#ff8787!important}.text-red-500{color:#ff6b6b!important}.text-red-600{color:#fa5252!important}.text-red-700{color:#f03e3e!important}.text-red-800{color:#e03131!important}.text-red-900{color:#b52626!important}.text-green-50{color:#f2fcf5!important}.text-green-100{color:#e2fbe8!important}.text-green-200{color:#c7f5d4!important}.text-green-300{color:#9fecb1!important}.text-green-400{color:#77d989!important}.text-green-500{color:#5ec169!important}.text-green-600{color:#4ca054!important}.text-green-700{color:#3b7c44!important}.text-green-800{color:#306339!important}.text-green-900{color:#285131!important}.text-lime-50{color:#f4fce3!important}.text-lime-100{color:#e9fac8!important}.text-lime-200{color:#d8f5a2!important}.text-lime-300{color:#c0eb75!important}.text-lime-400{color:#a9e34b!important}.text-lime-500{color:#94d82d!important}.text-lime-600{color:#82c91e!important}.text-lime-700{color:#74b816!important}.text-lime-800{color:#66a80f!important}.text-lime-900{color:#47730a!important}.text-indigo-50{color:#edf2ff!important}.text-indigo-100{color:#dbe4ff!important}.text-indigo-200{color:#bac8ff!important}.text-indigo-300{color:#91a7ff!important}.text-indigo-400{color:#748ffc!important}.text-indigo-500{color:#5c7cfa!important}.text-indigo-600{color:#4c6ef5!important}.text-indigo-700{color:#4263eb!important}.text-indigo-800{color:#3b5bdb!important}.text-indigo-900{color:#364fc7!important}.text-yellow-50{color:#fffceb!important}.text-yellow-100{color:#fff3bf!important}.text-yellow-200{color:#ffec99!important}.text-yellow-300{color:#ffe066!important}.text-yellow-400{color:#ffd43b!important}.text-yellow-500{color:#fcc419!important}.text-yellow-600{color:#f0a800!important}.text-yellow-700{color:#c78100!important}.text-yellow-800{color:#ab6700!important}.text-yellow-900{color:#995200!important}.text-orange-50{color:#fff4e6!important}.text-orange-100{color:#ffe8cc!important}.text-orange-200{color:#ffd8a8!important}.text-orange-300{color:#ffc078!important}.text-orange-400{color:#ffa94d!important}.text-orange-500{color:#ff922b!important}.text-orange-600{color:#fd7e14!important}.text-orange-700{color:#f76707!important}.text-orange-800{color:#e8590c!important}.text-orange-900{color:#d9480f!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semi-bold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extra-bold{font-weight:800!important}.text-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-no-underline{text-decoration:none!important}.text-no-select{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.text-no-wrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.fs-xs{font-size:.75rem!important}.fs-sm{font-size:.875rem!important}.fs-base{font-size:1rem!important}.fs-lg{font-size:1.125rem!important}.fs-xl{font-size:1.5rem!important}.fs-2xl{font-size:1.75rem!important}.fs-3xl{font-size:2rem!important}
1
+ .d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}.box-content{box-sizing:content-box!important}.box-border{box-sizing:border-box!important}.width-full{width:100%!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-center{align-items:center!important;display:flex!important;justify-content:center!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column{flex-direction:column!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-justify-start{justify-content:flex-start!important}.flex-justify-end{justify-content:flex-end!important}.flex-justify-center{justify-content:center!important}.flex-justify-between{justify-content:space-between!important}.flex-justify-around{justify-content:space-around!important}.flex-items-start{align-items:flex-start!important}.flex-items-end{align-items:flex-end!important}.flex-items-center{align-items:center!important}.flex-items-baseline{align-items:baseline!important}.flex-items-stretch{align-items:stretch!important}.flex-content-start{align-content:flex-start!important}.flex-content-end{align-content:flex-end!important}.flex-content-center{align-content:center!important}.flex-content-between{align-content:space-between!important}.flex-content-around{align-content:space-around!important}.flex-content-stretch{align-content:stretch!important}.flex-1{flex:1!important}.flex-auto{flex:auto!important}.flex-grow-0{flex-grow:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-self-auto{align-self:auto!important}.flex-self-start{align-self:flex-start!important}.flex-self-end{align-self:flex-end!important}.flex-self-center{align-self:center!important}.flex-self-baseline{align-self:baseline!important}.flex-self-stretch{align-self:stretch!important}.m-auto{margin:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-bottom:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.m-0{margin:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-bottom:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-bottom:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-bottom:.75rem!important}.mt-3,.my-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.m-4{margin:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-bottom:1rem!important}.mt-4,.my-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.m-5{margin:1.25rem!important}.mx-5{margin-left:1.25rem!important;margin-right:1.25rem!important}.my-5{margin-bottom:1.25rem!important}.mt-5,.my-5{margin-top:1.25rem!important}.mr-5{margin-right:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.m-6{margin:1.5rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-6{margin-bottom:1.5rem!important}.mt-6,.my-6{margin-top:1.5rem!important}.mr-6{margin-right:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.m-8{margin:2rem!important}.mx-8{margin-left:2rem!important;margin-right:2rem!important}.my-8{margin-bottom:2rem!important}.mt-8,.my-8{margin-top:2rem!important}.mr-8{margin-right:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.m-10{margin:2.5rem!important}.mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.my-10{margin-bottom:2.5rem!important}.mt-10,.my-10{margin-top:2.5rem!important}.mr-10{margin-right:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.m-12{margin:3rem!important}.mx-12{margin-left:3rem!important;margin-right:3rem!important}.my-12{margin-bottom:3rem!important}.mt-12,.my-12{margin-top:3rem!important}.mr-12{margin-right:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.m-16{margin:4rem!important}.mx-16{margin-left:4rem!important;margin-right:4rem!important}.my-16{margin-bottom:4rem!important}.mt-16,.my-16{margin-top:4rem!important}.mr-16{margin-right:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.m-20{margin:5rem!important}.mx-20{margin-left:5rem!important;margin-right:5rem!important}.my-20{margin-bottom:5rem!important}.mt-20,.my-20{margin-top:5rem!important}.mr-20{margin-right:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.m-24{margin:6rem!important}.mx-24{margin-left:6rem!important;margin-right:6rem!important}.my-24{margin-bottom:6rem!important}.mt-24,.my-24{margin-top:6rem!important}.mr-24{margin-right:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.p-0{padding:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.p-3{padding:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-bottom:.75rem!important}.pt-3,.py-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-bottom:1rem!important}.pt-4,.py-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.p-5{padding:1.25rem!important}.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.py-5{padding-bottom:1.25rem!important}.pt-5,.py-5{padding-top:1.25rem!important}.pr-5{padding-right:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.p-6{padding:1.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important}.pt-6,.py-6{padding-top:1.5rem!important}.pr-6{padding-right:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.p-8{padding:2rem!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.py-8{padding-bottom:2rem!important}.pt-8,.py-8{padding-top:2rem!important}.pr-8{padding-right:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.p-10{padding:2.5rem!important}.px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.py-10{padding-bottom:2.5rem!important}.pt-10,.py-10{padding-top:2.5rem!important}.pr-10{padding-right:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.p-12{padding:3rem!important}.px-12{padding-left:3rem!important;padding-right:3rem!important}.py-12{padding-bottom:3rem!important}.pt-12,.py-12{padding-top:3rem!important}.pr-12{padding-right:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.p-16{padding:4rem!important}.px-16{padding-left:4rem!important;padding-right:4rem!important}.py-16{padding-bottom:4rem!important}.pt-16,.py-16{padding-top:4rem!important}.pr-16{padding-right:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.p-20{padding:5rem!important}.px-20{padding-left:5rem!important;padding-right:5rem!important}.py-20{padding-bottom:5rem!important}.pt-20,.py-20{padding-top:5rem!important}.pr-20{padding-right:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.p-24{padding:6rem!important}.px-24{padding-left:6rem!important;padding-right:6rem!important}.py-24{padding-bottom:6rem!important}.pt-24,.py-24{padding-top:6rem!important}.pr-24{padding-right:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-10{gap:2.5rem!important}.gap-12{gap:3rem!important}.gap-16{gap:4rem!important}.gap-20{gap:5rem!important}.gap-24{gap:6rem!important}.rounded-none{border-radius:0!important}.rounded-2xs{border-radius:.125rem!important}.rounded-xs{border-radius:.25rem!important}.rounded-sm{border-radius:.3125rem!important}.rounded-md{border-radius:.375rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-xl{border-radius:.625rem!important}.rounded-2xl{border-radius:.75rem!important}.rounded-circle{border-radius:50%!important}.border{border:1px solid #d4d4d8!important}.border-top{border-top:1px solid #d4d4d8!important}.border-right{border-right:1px solid #d4d4d8!important}.border-bottom{border-bottom:1px solid #d4d4d8!important}.border-left{border-left:1px solid #d4d4d8!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-dashed{border-style:dashed!important}.border-dotted{border-style:dotted!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semi-bold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extra-bold{font-weight:800!important}.text-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-no-underline{text-decoration:none!important}.text-no-select{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.text-no-wrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.fs-xs{font-size:.75rem!important}.fs-sm{font-size:.875rem!important}.fs-base{font-size:1rem!important}.fs-lg{font-size:1.125rem!important}.fs-xl{font-size:1.5rem!important}.fs-2xl{font-size:1.75rem!important}.fs-3xl{font-size:2rem!important}.color-inherit{color:inherit!important}.color-primary{color:var(--dc-primary-text-color)!important}.color-secondary{color:var(--dc-secondary-text-color)!important}.color-tertiary{color:var(--dc-tertiary-text-color)!important}.color-link{color:var(--dc-link-text-color)!important}.color-error{color:var(--dc-error-text-color)!important}.color-warning{color:var(--dc-warning-text-color)!important}.color-info{color:var(--dc-info-text-color)!important}.color-success{color:var(--dc-success-text-color)!important}.text-gray-50{color:#fafafa!important}.text-gray-100{color:#f4f4f5!important}.text-gray-200{color:#e4e4e7!important}.text-gray-300{color:#d4d4d8!important}.text-gray-400{color:#a1a1aa!important}.text-gray-500{color:#71717a!important}.text-gray-600{color:#52525b!important}.text-gray-700{color:#3f3f46!important}.text-gray-800{color:#27272a!important}.text-gray-900{color:#18181b!important}.text-blue-50{color:#eff6ff!important}.text-blue-100{color:#dbeafe!important}.text-blue-200{color:#bfdbfe!important}.text-blue-300{color:#93c5fd!important}.text-blue-400{color:#60a5fa!important}.text-blue-500{color:#3b82f6!important}.text-blue-600{color:#2563eb!important}.text-blue-700{color:#1d4ed8!important}.text-blue-800{color:#1e40af!important}.text-blue-900{color:#1e3a8a!important}.text-cyan-50{color:#e3fafc!important}.text-cyan-100{color:#c5f6fa!important}.text-cyan-200{color:#99e9f2!important}.text-cyan-300{color:#66d9e8!important}.text-cyan-400{color:#3bc9db!important}.text-cyan-500{color:#22b8cf!important}.text-cyan-600{color:#15aabf!important}.text-cyan-700{color:#1098ad!important}.text-cyan-800{color:#0c8599!important}.text-cyan-900{color:#0b7285!important}.text-red-50{color:#fff5f5!important}.text-red-100{color:#ffe3e3!important}.text-red-200{color:#ffc9c9!important}.text-red-300{color:#ffa8a8!important}.text-red-400{color:#ff8787!important}.text-red-500{color:#ff6b6b!important}.text-red-600{color:#fa5252!important}.text-red-700{color:#f03e3e!important}.text-red-800{color:#e03131!important}.text-red-900{color:#b52626!important}.text-green-50{color:#f2fcf5!important}.text-green-100{color:#e2fbe8!important}.text-green-200{color:#c7f5d4!important}.text-green-300{color:#9fecb1!important}.text-green-400{color:#77d989!important}.text-green-500{color:#5ec169!important}.text-green-600{color:#4ca054!important}.text-green-700{color:#3b7c44!important}.text-green-800{color:#306339!important}.text-green-900{color:#285131!important}.text-lime-50{color:#f4fce3!important}.text-lime-100{color:#e9fac8!important}.text-lime-200{color:#d8f5a2!important}.text-lime-300{color:#c0eb75!important}.text-lime-400{color:#a9e34b!important}.text-lime-500{color:#94d82d!important}.text-lime-600{color:#82c91e!important}.text-lime-700{color:#74b816!important}.text-lime-800{color:#66a80f!important}.text-lime-900{color:#47730a!important}.text-indigo-50{color:#edf2ff!important}.text-indigo-100{color:#dbe4ff!important}.text-indigo-200{color:#bac8ff!important}.text-indigo-300{color:#91a7ff!important}.text-indigo-400{color:#748ffc!important}.text-indigo-500{color:#5c7cfa!important}.text-indigo-600{color:#4c6ef5!important}.text-indigo-700{color:#4263eb!important}.text-indigo-800{color:#3b5bdb!important}.text-indigo-900{color:#364fc7!important}.text-yellow-50{color:#fffceb!important}.text-yellow-100{color:#fff3bf!important}.text-yellow-200{color:#ffec99!important}.text-yellow-300{color:#ffe066!important}.text-yellow-400{color:#ffd43b!important}.text-yellow-500{color:#fcc419!important}.text-yellow-600{color:#f0a800!important}.text-yellow-700{color:#c78100!important}.text-yellow-800{color:#ab6700!important}.text-yellow-900{color:#995200!important}.text-orange-50{color:#fff4e6!important}.text-orange-100{color:#ffe8cc!important}.text-orange-200{color:#ffd8a8!important}.text-orange-300{color:#ffc078!important}.text-orange-400{color:#ffa94d!important}.text-orange-500{color:#ff922b!important}.text-orange-600{color:#fd7e14!important}.text-orange-700{color:#f76707!important}.text-orange-800{color:#e8590c!important}.text-orange-900{color:#d9480f!important}.bg-gray-50{color:#fafafa!important}.bg-gray-100{color:#f4f4f5!important}.bg-gray-200{color:#e4e4e7!important}.bg-gray-300{color:#d4d4d8!important}.bg-gray-400{color:#a1a1aa!important}.bg-gray-500{color:#71717a!important}.bg-gray-600{color:#52525b!important}.bg-gray-700{color:#3f3f46!important}.bg-gray-800{color:#27272a!important}.bg-gray-900{color:#18181b!important}.bg-blue-50{color:#eff6ff!important}.bg-blue-100{color:#dbeafe!important}.bg-blue-200{color:#bfdbfe!important}.bg-blue-300{color:#93c5fd!important}.bg-blue-400{color:#60a5fa!important}.bg-blue-500{color:#3b82f6!important}.bg-blue-600{color:#2563eb!important}.bg-blue-700{color:#1d4ed8!important}.bg-blue-800{color:#1e40af!important}.bg-blue-900{color:#1e3a8a!important}.bg-cyan-50{color:#e3fafc!important}.bg-cyan-100{color:#c5f6fa!important}.bg-cyan-200{color:#99e9f2!important}.bg-cyan-300{color:#66d9e8!important}.bg-cyan-400{color:#3bc9db!important}.bg-cyan-500{color:#22b8cf!important}.bg-cyan-600{color:#15aabf!important}.bg-cyan-700{color:#1098ad!important}.bg-cyan-800{color:#0c8599!important}.bg-cyan-900{color:#0b7285!important}.bg-red-50{color:#fff5f5!important}.bg-red-100{color:#ffe3e3!important}.bg-red-200{color:#ffc9c9!important}.bg-red-300{color:#ffa8a8!important}.bg-red-400{color:#ff8787!important}.bg-red-500{color:#ff6b6b!important}.bg-red-600{color:#fa5252!important}.bg-red-700{color:#f03e3e!important}.bg-red-800{color:#e03131!important}.bg-red-900{color:#b52626!important}.bg-green-50{color:#f2fcf5!important}.bg-green-100{color:#e2fbe8!important}.bg-green-200{color:#c7f5d4!important}.bg-green-300{color:#9fecb1!important}.bg-green-400{color:#77d989!important}.bg-green-500{color:#5ec169!important}.bg-green-600{color:#4ca054!important}.bg-green-700{color:#3b7c44!important}.bg-green-800{color:#306339!important}.bg-green-900{color:#285131!important}.bg-lime-50{color:#f4fce3!important}.bg-lime-100{color:#e9fac8!important}.bg-lime-200{color:#d8f5a2!important}.bg-lime-300{color:#c0eb75!important}.bg-lime-400{color:#a9e34b!important}.bg-lime-500{color:#94d82d!important}.bg-lime-600{color:#82c91e!important}.bg-lime-700{color:#74b816!important}.bg-lime-800{color:#66a80f!important}.bg-lime-900{color:#47730a!important}.bg-indigo-50{color:#edf2ff!important}.bg-indigo-100{color:#dbe4ff!important}.bg-indigo-200{color:#bac8ff!important}.bg-indigo-300{color:#91a7ff!important}.bg-indigo-400{color:#748ffc!important}.bg-indigo-500{color:#5c7cfa!important}.bg-indigo-600{color:#4c6ef5!important}.bg-indigo-700{color:#4263eb!important}.bg-indigo-800{color:#3b5bdb!important}.bg-indigo-900{color:#364fc7!important}.bg-yellow-50{color:#fffceb!important}.bg-yellow-100{color:#fff3bf!important}.bg-yellow-200{color:#ffec99!important}.bg-yellow-300{color:#ffe066!important}.bg-yellow-400{color:#ffd43b!important}.bg-yellow-500{color:#fcc419!important}.bg-yellow-600{color:#f0a800!important}.bg-yellow-700{color:#c78100!important}.bg-yellow-800{color:#ab6700!important}.bg-yellow-900{color:#995200!important}.bg-orange-50{color:#fff4e6!important}.bg-orange-100{color:#ffe8cc!important}.bg-orange-200{color:#ffd8a8!important}.bg-orange-300{color:#ffc078!important}.bg-orange-400{color:#ffa94d!important}.bg-orange-500{color:#ff922b!important}.bg-orange-600{color:#fd7e14!important}.bg-orange-700{color:#f76707!important}.bg-orange-800{color:#e8590c!important}.bg-orange-900{color:#d9480f!important}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "draft-components",
3
- "version": "0.72.1",
3
+ "version": "0.73.0",
4
4
  "description": "The set of React.js components for rapid prototyping.",
5
5
  "main": "components/index.js",
6
6
  "files": [
package/scss/draft-components-utils.scss CHANGED
@@ -3,5 +3,6 @@
3
3
  @import 'utils/margin';
4
4
  @import 'utils/padding';
5
5
  @import 'utils/gap';
6
- @import 'utils/borders';
6
+ @import 'utils/border';
7
7
  @import 'utils/typography';
8
+ @import 'utils/color';
package/scss/utils/{_borders.scss → _border.scss} RENAMED
File without changes
package/scss/utils/_color.scss ADDED
@@ -0,0 +1,601 @@
1
+ @use '../abstracts' as dc;
2
+
3
+ /*------------------------------------*\
4
+ #TEXT COLOR
5
+ \*------------------------------------*/
6
+ .color-inherit {
7
+ color: inherit !important;
8
+ }
9
+
10
+ .color-primary {
11
+ color: var(--dc-primary-text-color) !important;
12
+ }
13
+
14
+ .color-secondary {
15
+ color: var(--dc-secondary-text-color) !important;
16
+ }
17
+
18
+ .color-tertiary {
19
+ color: var(--dc-tertiary-text-color) !important;
20
+ }
21
+
22
+ .color-link {
23
+ color: var(--dc-link-text-color) !important;
24
+ }
25
+
26
+ .color-error {
27
+ color: var(--dc-error-text-color) !important;
28
+ }
29
+
30
+ .color-warning {
31
+ color: var(--dc-warning-text-color) !important;
32
+ }
33
+
34
+ .color-info {
35
+ color: var(--dc-info-text-color) !important;
36
+ }
37
+
38
+ .color-success {
39
+ color: var(--dc-success-text-color) !important;
40
+ }
41
+
42
+ .text-gray-50 {
43
+ color: dc.$gray-50 !important;
44
+ }
45
+ .text-gray-100 {
46
+ color: dc.$gray-100 !important;
47
+ }
48
+ .text-gray-200 {
49
+ color: dc.$gray-200 !important;
50
+ }
51
+ .text-gray-300 {
52
+ color: dc.$gray-300 !important;
53
+ }
54
+ .text-gray-400 {
55
+ color: dc.$gray-400 !important;
56
+ }
57
+ .text-gray-500 {
58
+ color: dc.$gray-500 !important;
59
+ }
60
+ .text-gray-600 {
61
+ color: dc.$gray-600 !important;
62
+ }
63
+ .text-gray-700 {
64
+ color: dc.$gray-700 !important;
65
+ }
66
+ .text-gray-800 {
67
+ color: dc.$gray-800 !important;
68
+ }
69
+ .text-gray-900 {
70
+ color: dc.$gray-900 !important;
71
+ }
72
+
73
+ .text-blue-50 {
74
+ color: dc.$blue-50 !important;
75
+ }
76
+ .text-blue-100 {
77
+ color: dc.$blue-100 !important;
78
+ }
79
+ .text-blue-200 {
80
+ color: dc.$blue-200 !important;
81
+ }
82
+ .text-blue-300 {
83
+ color: dc.$blue-300 !important;
84
+ }
85
+ .text-blue-400 {
86
+ color: dc.$blue-400 !important;
87
+ }
88
+ .text-blue-500 {
89
+ color: dc.$blue-500 !important;
90
+ }
91
+ .text-blue-600 {
92
+ color: dc.$blue-600 !important;
93
+ }
94
+ .text-blue-700 {
95
+ color: dc.$blue-700 !important;
96
+ }
97
+ .text-blue-800 {
98
+ color: dc.$blue-800 !important;
99
+ }
100
+ .text-blue-900 {
101
+ color: dc.$blue-900 !important;
102
+ }
103
+
104
+ .text-cyan-50 {
105
+ color: dc.$cyan-50 !important;
106
+ }
107
+ .text-cyan-100 {
108
+ color: dc.$cyan-100 !important;
109
+ }
110
+ .text-cyan-200 {
111
+ color: dc.$cyan-200 !important;
112
+ }
113
+ .text-cyan-300 {
114
+ color: dc.$cyan-300 !important;
115
+ }
116
+ .text-cyan-400 {
117
+ color: dc.$cyan-400 !important;
118
+ }
119
+ .text-cyan-500 {
120
+ color: dc.$cyan-500 !important;
121
+ }
122
+ .text-cyan-600 {
123
+ color: dc.$cyan-600 !important;
124
+ }
125
+ .text-cyan-700 {
126
+ color: dc.$cyan-700 !important;
127
+ }
128
+ .text-cyan-800 {
129
+ color: dc.$cyan-800 !important;
130
+ }
131
+ .text-cyan-900 {
132
+ color: dc.$cyan-900 !important;
133
+ }
134
+
135
+ .text-red-50 {
136
+ color: dc.$red-50 !important;
137
+ }
138
+ .text-red-100 {
139
+ color: dc.$red-100 !important;
140
+ }
141
+ .text-red-200 {
142
+ color: dc.$red-200 !important;
143
+ }
144
+ .text-red-300 {
145
+ color: dc.$red-300 !important;
146
+ }
147
+ .text-red-400 {
148
+ color: dc.$red-400 !important;
149
+ }
150
+ .text-red-500 {
151
+ color: dc.$red-500 !important;
152
+ }
153
+ .text-red-600 {
154
+ color: dc.$red-600 !important;
155
+ }
156
+ .text-red-700 {
157
+ color: dc.$red-700 !important;
158
+ }
159
+ .text-red-800 {
160
+ color: dc.$red-800 !important;
161
+ }
162
+ .text-red-900 {
163
+ color: dc.$red-900 !important;
164
+ }
165
+
166
+ .text-green-50 {
167
+ color: dc.$green-50 !important;
168
+ }
169
+ .text-green-100 {
170
+ color: dc.$green-100 !important;
171
+ }
172
+ .text-green-200 {
173
+ color: dc.$green-200 !important;
174
+ }
175
+ .text-green-300 {
176
+ color: dc.$green-300 !important;
177
+ }
178
+ .text-green-400 {
179
+ color: dc.$green-400 !important;
180
+ }
181
+ .text-green-500 {
182
+ color: dc.$green-500 !important;
183
+ }
184
+ .text-green-600 {
185
+ color: dc.$green-600 !important;
186
+ }
187
+ .text-green-700 {
188
+ color: dc.$green-700 !important;
189
+ }
190
+ .text-green-800 {
191
+ color: dc.$green-800 !important;
192
+ }
193
+ .text-green-900 {
194
+ color: dc.$green-900 !important;
195
+ }
196
+
197
+ .text-lime-50 {
198
+ color: dc.$lime-50 !important;
199
+ }
200
+ .text-lime-100 {
201
+ color: dc.$lime-100 !important;
202
+ }
203
+ .text-lime-200 {
204
+ color: dc.$lime-200 !important;
205
+ }
206
+ .text-lime-300 {
207
+ color: dc.$lime-300 !important;
208
+ }
209
+ .text-lime-400 {
210
+ color: dc.$lime-400 !important;
211
+ }
212
+ .text-lime-500 {
213
+ color: dc.$lime-500 !important;
214
+ }
215
+ .text-lime-600 {
216
+ color: dc.$lime-600 !important;
217
+ }
218
+ .text-lime-700 {
219
+ color: dc.$lime-700 !important;
220
+ }
221
+ .text-lime-800 {
222
+ color: dc.$lime-800 !important;
223
+ }
224
+ .text-lime-900 {
225
+ color: dc.$lime-900 !important;
226
+ }
227
+
228
+ .text-indigo-50 {
229
+ color: dc.$indigo-50 !important;
230
+ }
231
+ .text-indigo-100 {
232
+ color: dc.$indigo-100 !important;
233
+ }
234
+ .text-indigo-200 {
235
+ color: dc.$indigo-200 !important;
236
+ }
237
+ .text-indigo-300 {
238
+ color: dc.$indigo-300 !important;
239
+ }
240
+ .text-indigo-400 {
241
+ color: dc.$indigo-400 !important;
242
+ }
243
+ .text-indigo-500 {
244
+ color: dc.$indigo-500 !important;
245
+ }
246
+ .text-indigo-600 {
247
+ color: dc.$indigo-600 !important;
248
+ }
249
+ .text-indigo-700 {
250
+ color: dc.$indigo-700 !important;
251
+ }
252
+ .text-indigo-800 {
253
+ color: dc.$indigo-800 !important;
254
+ }
255
+ .text-indigo-900 {
256
+ color: dc.$indigo-900 !important;
257
+ }
258
+
259
+ .text-yellow-50 {
260
+ color: dc.$yellow-50 !important;
261
+ }
262
+ .text-yellow-100 {
263
+ color: dc.$yellow-100 !important;
264
+ }
265
+ .text-yellow-200 {
266
+ color: dc.$yellow-200 !important;
267
+ }
268
+ .text-yellow-300 {
269
+ color: dc.$yellow-300 !important;
270
+ }
271
+ .text-yellow-400 {
272
+ color: dc.$yellow-400 !important;
273
+ }
274
+ .text-yellow-500 {
275
+ color: dc.$yellow-500 !important;
276
+ }
277
+ .text-yellow-600 {
278
+ color: dc.$yellow-600 !important;
279
+ }
280
+ .text-yellow-700 {
281
+ color: dc.$yellow-700 !important;
282
+ }
283
+ .text-yellow-800 {
284
+ color: dc.$yellow-800 !important;
285
+ }
286
+ .text-yellow-900 {
287
+ color: dc.$yellow-900 !important;
288
+ }
289
+
290
+ .text-orange-50 {
291
+ color: dc.$orange-50 !important;
292
+ }
293
+ .text-orange-100 {
294
+ color: dc.$orange-100 !important;
295
+ }
296
+ .text-orange-200 {
297
+ color: dc.$orange-200 !important;
298
+ }
299
+ .text-orange-300 {
300
+ color: dc.$orange-300 !important;
301
+ }
302
+ .text-orange-400 {
303
+ color: dc.$orange-400 !important;
304
+ }
305
+ .text-orange-500 {
306
+ color: dc.$orange-500 !important;
307
+ }
308
+ .text-orange-600 {
309
+ color: dc.$orange-600 !important;
310
+ }
311
+ .text-orange-700 {
312
+ color: dc.$orange-700 !important;
313
+ }
314
+ .text-orange-800 {
315
+ color: dc.$orange-800 !important;
316
+ }
317
+ .text-orange-900 {
318
+ color: dc.$orange-900 !important;
319
+ }
320
+
321
+ /*------------------------------------*\
322
+ #BACKGROUND COLOR
323
+ \*------------------------------------*/
324
+ .bg-gray-50 {
325
+ color: dc.$gray-50 !important;
326
+ }
327
+ .bg-gray-100 {
328
+ color: dc.$gray-100 !important;
329
+ }
330
+ .bg-gray-200 {
331
+ color: dc.$gray-200 !important;
332
+ }
333
+ .bg-gray-300 {
334
+ color: dc.$gray-300 !important;
335
+ }
336
+ .bg-gray-400 {
337
+ color: dc.$gray-400 !important;
338
+ }
339
+ .bg-gray-500 {
340
+ color: dc.$gray-500 !important;
341
+ }
342
+ .bg-gray-600 {
343
+ color: dc.$gray-600 !important;
344
+ }
345
+ .bg-gray-700 {
346
+ color: dc.$gray-700 !important;
347
+ }
348
+ .bg-gray-800 {
349
+ color: dc.$gray-800 !important;
350
+ }
351
+ .bg-gray-900 {
352
+ color: dc.$gray-900 !important;
353
+ }
354
+
355
+ .bg-blue-50 {
356
+ color: dc.$blue-50 !important;
357
+ }
358
+ .bg-blue-100 {
359
+ color: dc.$blue-100 !important;
360
+ }
361
+ .bg-blue-200 {
362
+ color: dc.$blue-200 !important;
363
+ }
364
+ .bg-blue-300 {
365
+ color: dc.$blue-300 !important;
366
+ }
367
+ .bg-blue-400 {
368
+ color: dc.$blue-400 !important;
369
+ }
370
+ .bg-blue-500 {
371
+ color: dc.$blue-500 !important;
372
+ }
373
+ .bg-blue-600 {
374
+ color: dc.$blue-600 !important;
375
+ }
376
+ .bg-blue-700 {
377
+ color: dc.$blue-700 !important;
378
+ }
379
+ .bg-blue-800 {
380
+ color: dc.$blue-800 !important;
381
+ }
382
+ .bg-blue-900 {
383
+ color: dc.$blue-900 !important;
384
+ }
385
+
386
+ .bg-cyan-50 {
387
+ color: dc.$cyan-50 !important;
388
+ }
389
+ .bg-cyan-100 {
390
+ color: dc.$cyan-100 !important;
391
+ }
392
+ .bg-cyan-200 {
393
+ color: dc.$cyan-200 !important;
394
+ }
395
+ .bg-cyan-300 {
396
+ color: dc.$cyan-300 !important;
397
+ }
398
+ .bg-cyan-400 {
399
+ color: dc.$cyan-400 !important;
400
+ }
401
+ .bg-cyan-500 {
402
+ color: dc.$cyan-500 !important;
403
+ }
404
+ .bg-cyan-600 {
405
+ color: dc.$cyan-600 !important;
406
+ }
407
+ .bg-cyan-700 {
408
+ color: dc.$cyan-700 !important;
409
+ }
410
+ .bg-cyan-800 {
411
+ color: dc.$cyan-800 !important;
412
+ }
413
+ .bg-cyan-900 {
414
+ color: dc.$cyan-900 !important;
415
+ }
416
+
417
+ .bg-red-50 {
418
+ color: dc.$red-50 !important;
419
+ }
420
+ .bg-red-100 {
421
+ color: dc.$red-100 !important;
422
+ }
423
+ .bg-red-200 {
424
+ color: dc.$red-200 !important;
425
+ }
426
+ .bg-red-300 {
427
+ color: dc.$red-300 !important;
428
+ }
429
+ .bg-red-400 {
430
+ color: dc.$red-400 !important;
431
+ }
432
+ .bg-red-500 {
433
+ color: dc.$red-500 !important;
434
+ }
435
+ .bg-red-600 {
436
+ color: dc.$red-600 !important;
437
+ }
438
+ .bg-red-700 {
439
+ color: dc.$red-700 !important;
440
+ }
441
+ .bg-red-800 {
442
+ color: dc.$red-800 !important;
443
+ }
444
+ .bg-red-900 {
445
+ color: dc.$red-900 !important;
446
+ }
447
+
448
+ .bg-green-50 {
449
+ color: dc.$green-50 !important;
450
+ }
451
+ .bg-green-100 {
452
+ color: dc.$green-100 !important;
453
+ }
454
+ .bg-green-200 {
455
+ color: dc.$green-200 !important;
456
+ }
457
+ .bg-green-300 {
458
+ color: dc.$green-300 !important;
459
+ }
460
+ .bg-green-400 {
461
+ color: dc.$green-400 !important;
462
+ }
463
+ .bg-green-500 {
464
+ color: dc.$green-500 !important;
465
+ }
466
+ .bg-green-600 {
467
+ color: dc.$green-600 !important;
468
+ }
469
+ .bg-green-700 {
470
+ color: dc.$green-700 !important;
471
+ }
472
+ .bg-green-800 {
473
+ color: dc.$green-800 !important;
474
+ }
475
+ .bg-green-900 {
476
+ color: dc.$green-900 !important;
477
+ }
478
+
479
+ .bg-lime-50 {
480
+ color: dc.$lime-50 !important;
481
+ }
482
+ .bg-lime-100 {
483
+ color: dc.$lime-100 !important;
484
+ }
485
+ .bg-lime-200 {
486
+ color: dc.$lime-200 !important;
487
+ }
488
+ .bg-lime-300 {
489
+ color: dc.$lime-300 !important;
490
+ }
491
+ .bg-lime-400 {
492
+ color: dc.$lime-400 !important;
493
+ }
494
+ .bg-lime-500 {
495
+ color: dc.$lime-500 !important;
496
+ }
497
+ .bg-lime-600 {
498
+ color: dc.$lime-600 !important;
499
+ }
500
+ .bg-lime-700 {
501
+ color: dc.$lime-700 !important;
502
+ }
503
+ .bg-lime-800 {
504
+ color: dc.$lime-800 !important;
505
+ }
506
+ .bg-lime-900 {
507
+ color: dc.$lime-900 !important;
508
+ }
509
+
510
+ .bg-indigo-50 {
511
+ color: dc.$indigo-50 !important;
512
+ }
513
+ .bg-indigo-100 {
514
+ color: dc.$indigo-100 !important;
515
+ }
516
+ .bg-indigo-200 {
517
+ color: dc.$indigo-200 !important;
518
+ }
519
+ .bg-indigo-300 {
520
+ color: dc.$indigo-300 !important;
521
+ }
522
+ .bg-indigo-400 {
523
+ color: dc.$indigo-400 !important;
524
+ }
525
+ .bg-indigo-500 {
526
+ color: dc.$indigo-500 !important;
527
+ }
528
+ .bg-indigo-600 {
529
+ color: dc.$indigo-600 !important;
530
+ }
531
+ .bg-indigo-700 {
532
+ color: dc.$indigo-700 !important;
533
+ }
534
+ .bg-indigo-800 {
535
+ color: dc.$indigo-800 !important;
536
+ }
537
+ .bg-indigo-900 {
538
+ color: dc.$indigo-900 !important;
539
+ }
540
+
541
+ .bg-yellow-50 {
542
+ color: dc.$yellow-50 !important;
543
+ }
544
+ .bg-yellow-100 {
545
+ color: dc.$yellow-100 !important;
546
+ }
547
+ .bg-yellow-200 {
548
+ color: dc.$yellow-200 !important;
549
+ }
550
+ .bg-yellow-300 {
551
+ color: dc.$yellow-300 !important;
552
+ }
553
+ .bg-yellow-400 {
554
+ color: dc.$yellow-400 !important;
555
+ }
556
+ .bg-yellow-500 {
557
+ color: dc.$yellow-500 !important;
558
+ }
559
+ .bg-yellow-600 {
560
+ color: dc.$yellow-600 !important;
561
+ }
562
+ .bg-yellow-700 {
563
+ color: dc.$yellow-700 !important;
564
+ }
565
+ .bg-yellow-800 {
566
+ color: dc.$yellow-800 !important;
567
+ }
568
+ .bg-yellow-900 {
569
+ color: dc.$yellow-900 !important;
570
+ }
571
+
572
+ .bg-orange-50 {
573
+ color: dc.$orange-50 !important;
574
+ }
575
+ .bg-orange-100 {
576
+ color: dc.$orange-100 !important;
577
+ }
578
+ .bg-orange-200 {
579
+ color: dc.$orange-200 !important;
580
+ }
581
+ .bg-orange-300 {
582
+ color: dc.$orange-300 !important;
583
+ }
584
+ .bg-orange-400 {
585
+ color: dc.$orange-400 !important;
586
+ }
587
+ .bg-orange-500 {
588
+ color: dc.$orange-500 !important;
589
+ }
590
+ .bg-orange-600 {
591
+ color: dc.$orange-600 !important;
592
+ }
593
+ .bg-orange-700 {
594
+ color: dc.$orange-700 !important;
595
+ }
596
+ .bg-orange-800 {
597
+ color: dc.$orange-800 !important;
598
+ }
599
+ .bg-orange-900 {
600
+ color: dc.$orange-900 !important;
601
+ }
package/scss/utils/_typography.scss CHANGED
@@ -1,323 +1,5 @@
1
1
  @use '../abstracts' as dc;
2
2
 
3
- /*------------------------------------*\
4
- #TEXT COLOR
5
- \*------------------------------------*/
6
- .color-inherit {
7
- color: inherit !important;
8
- }
9
-
10
- .color-primary {
11
- color: var(--dc-primary-text-color) !important;
12
- }
13
-
14
- .color-secondary {
15
- color: var(--dc-secondary-text-color) !important;
16
- }
17
-
18
- .color-tertiary {
19
- color: var(--dc-tertiary-text-color) !important;
20
- }
21
-
22
- .color-link {
23
- color: var(--dc-link-text-color) !important;
24
- }
25
-
26
- .color-error {
27
- color: var(--dc-error-text-color) !important;
28
- }
29
-
30
- .color-warning {
31
- color: var(--dc-warning-text-color) !important;
32
- }
33
-
34
- .color-info {
35
- color: var(--dc-info-text-color) !important;
36
- }
37
-
38
- .color-success {
39
- color: var(--dc-success-text-color) !important;
40
- }
41
-
42
- .text-gray-50 {
43
- color: dc.$gray-50 !important;
44
- }
45
- .text-gray-100 {
46
- color: dc.$gray-100 !important;
47
- }
48
- .text-gray-200 {
49
- color: dc.$gray-200 !important;
50
- }
51
- .text-gray-300 {
52
- color: dc.$gray-300 !important;
53
- }
54
- .text-gray-400 {
55
- color: dc.$gray-400 !important;
56
- }
57
- .text-gray-500 {
58
- color: dc.$gray-500 !important;
59
- }
60
- .text-gray-600 {
61
- color: dc.$gray-600 !important;
62
- }
63
- .text-gray-700 {
64
- color: dc.$gray-700 !important;
65
- }
66
- .text-gray-800 {
67
- color: dc.$gray-800 !important;
68
- }
69
- .text-gray-900 {
70
- color: dc.$gray-900 !important;
71
- }
72
-
73
- .text-blue-50 {
74
- color: dc.$blue-50 !important;
75
- }
76
- .text-blue-100 {
77
- color: dc.$blue-100 !important;
78
- }
79
- .text-blue-200 {
80
- color: dc.$blue-200 !important;
81
- }
82
- .text-blue-300 {
83
- color: dc.$blue-300 !important;
84
- }
85
- .text-blue-400 {
86
- color: dc.$blue-400 !important;
87
- }
88
- .text-blue-500 {
89
- color: dc.$blue-500 !important;
90
- }
91
- .text-blue-600 {
92
- color: dc.$blue-600 !important;
93
- }
94
- .text-blue-700 {
95
- color: dc.$blue-700 !important;
96
- }
97
- .text-blue-800 {
98
- color: dc.$blue-800 !important;
99
- }
100
- .text-blue-900 {
101
- color: dc.$blue-900 !important;
102
- }
103
-
104
- .text-cyan-50 {
105
- color: dc.$cyan-50 !important;
106
- }
107
- .text-cyan-100 {
108
- color: dc.$cyan-100 !important;
109
- }
110
- .text-cyan-200 {
111
- color: dc.$cyan-200 !important;
112
- }
113
- .text-cyan-300 {
114
- color: dc.$cyan-300 !important;
115
- }
116
- .text-cyan-400 {
117
- color: dc.$cyan-400 !important;
118
- }
119
- .text-cyan-500 {
120
- color: dc.$cyan-500 !important;
121
- }
122
- .text-cyan-600 {
123
- color: dc.$cyan-600 !important;
124
- }
125
- .text-cyan-700 {
126
- color: dc.$cyan-700 !important;
127
- }
128
- .text-cyan-800 {
129
- color: dc.$cyan-800 !important;
130
- }
131
- .text-cyan-900 {
132
- color: dc.$cyan-900 !important;
133
- }
134
-
135
- .text-red-50 {
136
- color: dc.$red-50 !important;
137
- }
138
- .text-red-100 {
139
- color: dc.$red-100 !important;
140
- }
141
- .text-red-200 {
142
- color: dc.$red-200 !important;
143
- }
144
- .text-red-300 {
145
- color: dc.$red-300 !important;
146
- }
147
- .text-red-400 {
148
- color: dc.$red-400 !important;
149
- }
150
- .text-red-500 {
151
- color: dc.$red-500 !important;
152
- }
153
- .text-red-600 {
154
- color: dc.$red-600 !important;
155
- }
156
- .text-red-700 {
157
- color: dc.$red-700 !important;
158
- }
159
- .text-red-800 {
160
- color: dc.$red-800 !important;
161
- }
162
- .text-red-900 {
163
- color: dc.$red-900 !important;
164
- }
165
-
166
- .text-green-50 {
167
- color: dc.$green-50 !important;
168
- }
169
- .text-green-100 {
170
- color: dc.$green-100 !important;
171
- }
172
- .text-green-200 {
173
- color: dc.$green-200 !important;
174
- }
175
- .text-green-300 {
176
- color: dc.$green-300 !important;
177
- }
178
- .text-green-400 {
179
- color: dc.$green-400 !important;
180
- }
181
- .text-green-500 {
182
- color: dc.$green-500 !important;
183
- }
184
- .text-green-600 {
185
- color: dc.$green-600 !important;
186
- }
187
- .text-green-700 {
188
- color: dc.$green-700 !important;
189
- }
190
- .text-green-800 {
191
- color: dc.$green-800 !important;
192
- }
193
- .text-green-900 {
194
- color: dc.$green-900 !important;
195
- }
196
-
197
- .text-lime-50 {
198
- color: dc.$lime-50 !important;
199
- }
200
- .text-lime-100 {
201
- color: dc.$lime-100 !important;
202
- }
203
- .text-lime-200 {
204
- color: dc.$lime-200 !important;
205
- }
206
- .text-lime-300 {
207
- color: dc.$lime-300 !important;
208
- }
209
- .text-lime-400 {
210
- color: dc.$lime-400 !important;
211
- }
212
- .text-lime-500 {
213
- color: dc.$lime-500 !important;
214
- }
215
- .text-lime-600 {
216
- color: dc.$lime-600 !important;
217
- }
218
- .text-lime-700 {
219
- color: dc.$lime-700 !important;
220
- }
221
- .text-lime-800 {
222
- color: dc.$lime-800 !important;
223
- }
224
- .text-lime-900 {
225
- color: dc.$lime-900 !important;
226
- }
227
-
228
- .text-indigo-50 {
229
- color: dc.$indigo-50 !important;
230
- }
231
- .text-indigo-100 {
232
- color: dc.$indigo-100 !important;
233
- }
234
- .text-indigo-200 {
235
- color: dc.$indigo-200 !important;
236
- }
237
- .text-indigo-300 {
238
- color: dc.$indigo-300 !important;
239
- }
240
- .text-indigo-400 {
241
- color: dc.$indigo-400 !important;
242
- }
243
- .text-indigo-500 {
244
- color: dc.$indigo-500 !important;
245
- }
246
- .text-indigo-600 {
247
- color: dc.$indigo-600 !important;
248
- }
249
- .text-indigo-700 {
250
- color: dc.$indigo-700 !important;
251
- }
252
- .text-indigo-800 {
253
- color: dc.$indigo-800 !important;
254
- }
255
- .text-indigo-900 {
256
- color: dc.$indigo-900 !important;
257
- }
258
-
259
- .text-yellow-50 {
260
- color: dc.$yellow-50 !important;
261
- }
262
- .text-yellow-100 {
263
- color: dc.$yellow-100 !important;
264
- }
265
- .text-yellow-200 {
266
- color: dc.$yellow-200 !important;
267
- }
268
- .text-yellow-300 {
269
- color: dc.$yellow-300 !important;
270
- }
271
- .text-yellow-400 {
272
- color: dc.$yellow-400 !important;
273
- }
274
- .text-yellow-500 {
275
- color: dc.$yellow-500 !important;
276
- }
277
- .text-yellow-600 {
278
- color: dc.$yellow-600 !important;
279
- }
280
- .text-yellow-700 {
281
- color: dc.$yellow-700 !important;
282
- }
283
- .text-yellow-800 {
284
- color: dc.$yellow-800 !important;
285
- }
286
- .text-yellow-900 {
287
- color: dc.$yellow-900 !important;
288
- }
289
-
290
- .text-orange-50 {
291
- color: dc.$orange-50 !important;
292
- }
293
- .text-orange-100 {
294
- color: dc.$orange-100 !important;
295
- }
296
- .text-orange-200 {
297
- color: dc.$orange-200 !important;
298
- }
299
- .text-orange-300 {
300
- color: dc.$orange-300 !important;
301
- }
302
- .text-orange-400 {
303
- color: dc.$orange-400 !important;
304
- }
305
- .text-orange-500 {
306
- color: dc.$orange-500 !important;
307
- }
308
- .text-orange-600 {
309
- color: dc.$orange-600 !important;
310
- }
311
- .text-orange-700 {
312
- color: dc.$orange-700 !important;
313
- }
314
- .text-orange-800 {
315
- color: dc.$orange-800 !important;
316
- }
317
- .text-orange-900 {
318
- color: dc.$orange-900 !important;
319
- }
320
-
321
3
  /*------------------------------------*\
322
4
  #TEXT WEIGHT
323
5
  \*------------------------------------*/