Variables
We created many variables you can use. For use them simply import the variables .scss file.
@import 'gralig/scss/abstracts/_variables.scss';
Initial Variables
You can check colors page for the initial color variables.
| Variable | Type | Value |
|---|---|---|
| $font-size | font-size | 1.6rem |
| $font-size-s | font-size | 1.4rem |
| $font-size-l | font-size | 1.2rem |
| $font-thin | font-weight | lighter |
| $font-normal | font-weight | normal |
| $font-bold | font-weight | bold |
| $font-family-general | font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif |
| $font-family | font-family | "Catamaran", sans-serif |
| $space-xxs | size | 0.2rem |
| $space-xs | size | 0.4rem |
| $space-s | size | 0.8rem |
| $space | size | 1.2rem |
| $space-m | size | 1.6rem |
| $space-l | size | 2.4rem |
| $space-xl | size | 3.2rem |
| $space-xxl | size | 6.4rem |
| $line-height-s | size | 1.2 |
| $line-height | size | 1.5 |
| $line-height-m | size | 1.6 |
| $line-height-l | size | 1.7 |
| $border-radius | size | 0.2rem |
| $border-radius-full | size | 50% |
| $border-radius-full | size | 50% |
| $transition-default | transition | all 0.15s ease-in |
| $transition-secondary | transition | all 0.3s ease-in |
| $transparent | color | transparent |
| $white | color | hsl(0, 0%, 100%) |
Derived Variables
| Variable | Type | Value |
|---|---|---|
| $color-background | color | $white |
| $color-font | color | $abbey |
| $color-font-secondary | color | $oslo |
| $color-font-revert | color | $porcelain |
| $color-main | color | $abbey |
| $color-secondary | color | $raven |
| $color-light | color | $iron |
| $color-lighter | color | $porcelain |
| $color-border | color | $iron |
| $color-border-dark | color | $raven |
| $color-input-disabled | color | $porcelain |
| $color-input-placeholder | color | $mischka |
| $el-box-shadow | color | 0 0 3px 1px rgba($color-main, 0.5) |
| $el-box-shadow-blue | color | 0 0 3px 1px rgba($color-blue, 0.5) |
| $el-box-shadow-green | color | 0 0 3px 1px rgba($color-green, 0.5) |
| $el-box-shadow-yellow | color | 0 0 3px 1px rgba($color-yellow, 0.5) |
| $el-box-shadow-red | color | 0 0 3px 1px rgba($color-red, 0.5) |
| $p-size | font-size | $font-size |
| $p-s-size | font-size | $font-size * 0.8125 |
| $p-l-size | font-size | $font-size * 1.125 |
| $el-font-size | font-size | $font-size * 0.8125 |
| $el-font-size-s | font-size | $font-size * 0.6875 |
| $el-font-size-l | font-size | $font-size * 0.9375 |
| $content-padding-inline | size | $space-xl |
| $content-padding-block | size | $space-m |
| $color-blue | color | $summer |
| $color-blue-light | color | $summer-light |
| $color-blue-lighter | color | $summer-lighter |
| $color-blue-dark | color | $summer-dark |
| $color-blue-darker | color | $summer-darker |
| $color-green | color | $shamrock |
| $color-green-light | color | $shamrock-light |
| $color-green-lighter | color | $shamrock-lighter |
| $color-green-dark | color | $shamrock-dark |
| $color-green-darker | color | $shamrock-darker |
| $color-yellow | color | $tulip |
| $color-yellow-light | color | $tulip-light |
| $color-yellow-lighter | color | $tulip-lighter |
| $color-yellow-dark | color | $tulip-dark |
| $color-yellow-darker | color | $tulip-darker |
| $color-red | color | $flame |
| $color-red-light | color | $flame-light |
| $color-red-lighter | color | $flame-lighter |
| $color-red-dark | color | $flame-dark |
| $color-red-darker | color | $flame-darker |
Dark Mode Variables
| Variable | Type | Value |
|---|---|---|
| $color-font-dt | color | $iron |
| $color-font-secondary-dt | color | $ghost |
| $color-font-revert-dt | color | $woodsmoke |
| $color-background-dt | color | $woodsmoke |
| $color-main-dt | color | $raven |
| $color-secondary-dt | color | $oslo |
| $color-button-font-dt | color | $woodsmoke |
| $color-border-dt | color | $abbey |
| $color-border-light-dt | color | $oslo |
| $color-code-dt | color | $shark |
| $color-mute-dt | color | darken($abbey, 8%) |
| $color-alert-dt | color | $oslo |
| $color-alert-font-dt | color | $shark |
| $color-card-dt | color | $shark |
| $color-link-font-dt | color | $oslo |
| $color-link-hover-dt | color | $ghost |
| $color-input-disabled-dt | color | rgba($iron, 0.2) |
| $color-input-placeholder-dt | color | $abbey |