Color palette
The design system provides some colors that can be used globally. Currently they are primarily suited for icons.
Available colors
Color | Name | Value |
|---|---|---|
| oc-color-icon-archive | rgb(255, 207, 1) | |
| oc-color-icon-audio | rgb(208, 67, 236) | |
| oc-color-icon-code | #171C1F | |
| oc-color-icon-document | rgb(44, 101, 255) | |
| oc-color-icon-drawio | rgb(255, 111, 0) | |
| oc-color-icon-epub | rgb(244, 187, 68) | |
| oc-color-icon-file | #171C1F | |
| oc-color-icon-folder | rgb(44, 101, 255) | |
| oc-color-icon-form | rgb(102, 166, 163) | |
| oc-color-icon-graphic | rgb(235, 201, 74) | |
| oc-color-icon-ifc | rgb(208, 67, 236) | |
| oc-color-icon-image | rgb(255, 111, 0) | |
| oc-color-icon-jupyter | rgb(243, 119, 38) | |
| oc-color-icon-markdown | rgb(75, 100, 137) | |
| oc-color-icon-medical | rgb(9, 132, 219) | |
| oc-color-icon-pdf | rgb(225, 5, 14) | |
| oc-color-icon-presentation | rgb(255, 64, 6) | |
| oc-color-icon-root | rgb(0, 187, 219) | |
| oc-color-icon-spreadsheet | rgb(0, 182, 87) | |
| oc-color-icon-text | #171C1F | |
| oc-color-icon-video | rgb(0, 187, 219) |
Usage
You can use these variables in your SCSS files or style blocks:
scss
.element {
color: var(--oc-role-icon-folder);
}