BackgroundColors

GrayBackground   

.bg-gray-25

.bg-gray-50

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500

.bg-gray-600

.bg-gray-700

.bg-gray-800

.bg-gray-900

Copy
Edit
<!-- components/BackgroundColors/GrayBackground.html --> <p class="bg-gray-25 gray-800 p-3">.bg-gray-25</p> <p class="bg-gray-50 gray-800 p-3">.bg-gray-50</p> <p class="bg-gray-100 gray-800 p-3">.bg-gray-100</p> <p class="bg-gray-200 gray-800 p-3">.bg-gray-200</p> <p class="bg-gray-300 gray-800 p-3">.bg-gray-300</p> <p class="bg-gray-400 gray-25 p-3">.bg-gray-400</p> <p class="bg-gray-500 gray-25 p-3">.bg-gray-500</p> <p class="bg-gray-600 gray-25 p-3">.bg-gray-600</p> <p class="bg-gray-700 gray-25 p-3">.bg-gray-700</p> <p class="bg-gray-800 gray-25 p-3">.bg-gray-800</p> <p class="bg-gray-900 gray-25 p-3">.bg-gray-900</p>
Copy
Copy
Edit
/* scss/BackgroundColors/_GrayBackground.scss */ .bg-gray-25 { background-color: $gray-25 !important; } .bg-gray-50 { background-color: $gray-50 !important; } .bg-gray-100 { background-color: $gray-100 !important; } .bg-gray-200 { background-color: $gray-200 !important; } .bg-gray-300 { background-color: $gray-300 !important; } .bg-gray-400 { background-color: $gray-400 !important; } .bg-gray-500 { background-color: $gray-500 !important; } .bg-gray-600 { background-color: $gray-600 !important; } .bg-gray-700 { background-color: $gray-700 !important; } .bg-gray-800 { background-color: $gray-800 !important; } .bg-gray-900 { background-color: $gray-900 !important; }
Cancel

PrimaryBackground   

.bg-primary-25

.bg-primary-50

.bg-primary-100

.bg-primary-200

.bg-primary-300

.bg-primary-400

.bg-primary-500

.bg-primary-600

.bg-primary-700

.bg-primary-800

.bg-primary-900

Copy
Edit
<!-- components/BackgroundColors/PrimaryBackground.html --> <p class="bg-primary-25 gray-800 p-3">.bg-primary-25</p> <p class="bg-primary-50 gray-800 p-3">.bg-primary-50</p> <p class="bg-primary-100 gray-800 p-3">.bg-primary-100</p> <p class="bg-primary-200 gray-800 p-3">.bg-primary-200</p> <p class="bg-primary-300 gray-800 p-3">.bg-primary-300</p> <p class="bg-primary-400 gray-25 p-3">.bg-primary-400</p> <p class="bg-primary-500 gray-25 p-3">.bg-primary-500</p> <p class="bg-primary-600 gray-25 p-3">.bg-primary-600</p> <p class="bg-primary-700 gray-25 p-3">.bg-primary-700</p> <p class="bg-primary-800 gray-25 p-3">.bg-primary-800</p> <p class="bg-primary-900 gray-25 p-3">.bg-primary-900</p>
Copy
Copy
Edit
/* scss/BackgroundColors/_PrimaryBackground.scss */ .bg-primary-25 { background-color: $primary-25 !important; } .bg-primary-50 { background-color: $primary-50 !important; } .bg-primary-100 { background-color: $primary-100 !important; } .bg-primary-200 { background-color: $primary-200 !important; } .bg-primary-300 { background-color: $primary-300 !important; } .bg-primary-400 { background-color: $primary-400 !important; } .bg-primary-500 { background-color: $primary-500 !important; } .bg-primary-600 { background-color: $primary-600 !important; } .bg-primary-700 { background-color: $primary-700 !important; } .bg-primary-800 { background-color: $primary-800 !important; } .bg-primary-900 { background-color: $primary-900 !important; }
Cancel

ErrorBackground   

.bg-error-25

.bg-error-50

.bg-error-100

.bg-error-200

.bg-error-300

.bg-error-400

.bg-error-500

.bg-error-600

.bg-error-700

.bg-error-800

.bg-error-900

Copy
Edit
<!-- components/BackgroundColors/ErrorBackground.html --> <p class="bg-error-25 gray-800 p-3">.bg-error-25</p> <p class="bg-error-50 gray-800 p-3">.bg-error-50</p> <p class="bg-error-100 gray-800 p-3">.bg-error-100</p> <p class="bg-error-200 gray-800 p-3">.bg-error-200</p> <p class="bg-error-300 gray-800 p-3">.bg-error-300</p> <p class="bg-error-400 gray-25 p-3">.bg-error-400</p> <p class="bg-error-500 gray-25 p-3">.bg-error-500</p> <p class="bg-error-600 gray-25 p-3">.bg-error-600</p> <p class="bg-error-700 gray-25 p-3">.bg-error-700</p> <p class="bg-error-800 gray-25 p-3">.bg-error-800</p> <p class="bg-error-900 gray-25 p-3">.bg-error-900</p>
Copy
Copy
Edit
/* scss/BackgroundColors/_ErrorBackground.scss */ .bg-error-25 { background-color: $error-25 !important; } .bg-error-50 { background-color: $error-50 !important; } .bg-error-100 { background-color: $error-100 !important; } .bg-error-200 { background-color: $error-200 !important; } .bg-error-300 { background-color: $error-300 !important; } .bg-error-400 { background-color: $error-400 !important; } .bg-error-500 { background-color: $error-500 !important; } .bg-error-600 { background-color: $error-600 !important; } .bg-error-700 { background-color: $error-700 !important; } .bg-error-800 { background-color: $error-800 !important; } .bg-error-900 { background-color: $error-900 !important; }
Cancel

WarningBackground   

bg-.warning-25

bg-.warning-50

.bg-warning-100

.bg-warning-200

.bg-warning-300

.bg-warning-400

.bg-warning-500

.bg-warning-600

.bg-warning-700

.bg-warning-800

.bg-warning-900

Copy
Edit
<!-- components/BackgroundColors/WarningBackground.html --> <p class="bg-warning-25 gray-800 p-3">bg-.warning-25</p> <p class="bg-warning-50 gray-800 p-3">bg-.warning-50</p> <p class="bg-warning-100 gray-800 p-3">.bg-warning-100</p> <p class="bg-warning-200 gray-800 p-3">.bg-warning-200</p> <p class="bg-warning-300 gray-800 p-3">.bg-warning-300</p> <p class="bg-warning-400 gray-25 p-3">.bg-warning-400</p> <p class="bg-warning-500 gray-25 p-3">.bg-warning-500</p> <p class="bg-warning-600 gray-25 p-3">.bg-warning-600</p> <p class="bg-warning-700 gray-25 p-3">.bg-warning-700</p> <p class="bg-warning-800 gray-25 p-3">.bg-warning-800</p> <p class="bg-warning-900 gray-25 p-3">.bg-warning-900</p>
Copy
Copy
Edit
/* scss/BackgroundColors/_WarningBackground.scss */ .bg-warning-25 { background-color: $warning-25 !important; } .bg-warning-50 { background-color: $warning-50 !important; } .bg-warning-100 { background-color: $warning-100 !important; } .bg-warning-200 { background-color: $warning-200 !important; } .bg-warning-300 { background-color: $warning-300 !important; } .bg-warning-400 { background-color: $warning-400 !important; } .bg-warning-500 { background-color: $warning-500 !important; } .bg-warning-600 { background-color: $warning-600 !important; } .bg-warning-700 { background-color: $warning-700 !important; } .bg-warning-800 { background-color: $warning-800 !important; } .bg-warning-900 { background-color: $warning-900 !important; }
Cancel

SuccessBackground   

.bg-success-25

.bg-success-50

.bg-success-100

.bg-success-200

.bg-success-300

.bg-success-400

.bg-success-500

.bg-success-600

.bg-success-700

.bg-success-800

.bg-success-900

Copy
Edit
<!-- components/BackgroundColors/SuccessBackground.html --> <p class="bg-success-25 gray-800 p-3">.bg-success-25</p> <p class="bg-success-50 gray-800 p-3">.bg-success-50</p> <p class="bg-success-100 gray-800 p-3">.bg-success-100</p> <p class="bg-success-200 gray-800 p-3">.bg-success-200</p> <p class="bg-success-300 gray-800 p-3">.bg-success-300</p> <p class="bg-success-400 gray-25 p-3">.bg-success-400</p> <p class="bg-success-500 gray-25 p-3">.bg-success-500</p> <p class="bg-success-600 gray-25 p-3">.bg-success-600</p> <p class="bg-success-700 gray-25 p-3">.bg-success-700</p> <p class="bg-success-800 gray-25 p-3">.bg-success-800</p> <p class="bg-success-900 gray-25 p-3">.bg-success-900</p>
Copy
Copy
Edit
/* scss/BackgroundColors/_SuccessBackground.scss */ .bg-success-25 { background-color: $success-25 !important; } .bg-success-50 { background-color: $success-50 !important; } .bg-success-100 { background-color: $success-100 !important; } .bg-success-200 { background-color: $success-200 !important; } .bg-success-300 { background-color: $success-300 !important; } .bg-success-400 { background-color: $success-400 !important; } .bg-success-500 { background-color: $success-500 !important; } .bg-success-600 { background-color: $success-600 !important; } .bg-success-700 { background-color: $success-700 !important; } .bg-success-800 { background-color: $success-800 !important; } .bg-success-900 { background-color: $success-900 !important; }
Cancel