Colors

Gray   

.gray-25

.gray-50

.gray-100

.gray-200

.gray-300

.gray-400

.gray-500

.gray-600

.gray-700

.gray-800

.gray-900

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

Primary   

.primary-25

.primary-50

.primary-100

.primary-200

.primary-300

.primary-400

.primary-500

.primary-600

.primary-700

.primary-800

.primary-900

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

Error   

.error-25

.error-50

.error-100

.error-200

.error-300

.error-400

.error-500

.error-600

.error-700

.error-800

.error-900

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

Warning   

.warning-25

.warning-50

.warning-100

.warning-200

.warning-300

.warning-400

.warning-500

.warning-600

.warning-700

.warning-800

.warning-900

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

Success   

.success-25

.success-50

.success-100

.success-200

.success-300

.success-400

.success-500

.success-600

.success-700

.success-800

.success-900

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