Theming
With the power of Sass, you can extend Luda themes just as you wish.
Override Built in Styles
Luda themes are written in Sass, you can override certain css selectors to change built in styles. The source code is idempotent, that means you focus on selector priorities but not orders when overriding. In this way, your styles are more stable and maintainable.
For convinence, there are some built-in modifier classes to change the appearances of components. Each modifier class is marked as Modifier in this documentation. If they’re not enough for you, you can create your own modifiers.
Override Default Variables
Theme Sass variables are defined with the !default flag.
You should define your variables before importing Luda theme variables,
so built-in variables with the same names will be overriten.
There are two types of theme variables, global variables and component variables. Component variables targets spefic components, they can be referenced in each component’s document. Global variables are used to define global style rules across components. If a global variable is changed, any component references to it will inherit its style defination. You can find all global variables in the list below.
Global Sass Variables
Breakpoint
$breakpoint-width-pxs: (s: 0, m: 768px, l: 1200px) !default
You can override this variable according to your needs, make sure the value is a sass map. Except the key of the first pair in the map, all the other keys are treated as postfixes which will be added to the end of responsive components’ classnames.
$breakpoint-aspect-ratios: (p: 0, l: 1.0001) !default
Default defination of screen aspect ratio breakpoints, make sure the value is a map if you want to change it.
$breakpoint-resolutions: (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
Default defination of screen resolution breakpoints, make sure the value is a map if you want to change it.
Spacing
$spacing-base-rem: 1rem !default
$spacing-tiny-rem: $spacing-base-rem / 2 !default
$spacing-small-rem: $spacing-base-rem !default
$spacing-medium-rem: $spacing-base-rem * 2 !default
$spacing-large-rem: $spacing-base-rem * 4 !default
Typography
$typography-main: constant-get(typography-stacks, sans-serif) !default
Default font family of body texts.
$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default
Default baseline offset ratio of body texts font family, it’s used to calculate text paddings for better baseline alignment.
$typography-main-size-px: 14px !default
Default font size of body texts.
A calculated rem value will be used to set the font-size property of body.
$typography-main-size-level: 5 !default
Default font size level of body texts. The value must be an integer between 1 and 6.
$typography-size-scale-ratio: constant-get(scale-ratios, minor-third) !default
Default type scale ratio of texts. Different level font sizes are calculated
based on this variable and $typography-main-size-level.
$typography-main-line-height-ratio: 26 / 14 !default
Default line height of body texts. The height of baseline grid is calculated
based on this variable and $typography-main-size-px.
$typography-main-color: $color-main !default
Default color of body texts.
Layer
$z-index-low: -1 !default
$z-index-normal: 0 !default
$z-index-high: 1 !default
$z-index-higher: 2 !default
$z-index-much-higher: 3 !default
$z-index-highest: 4 !default
Opacity
$opacity-emphasis: 1 !default
$opacity-main: 0.9 !default
$opacity-muted: 0.618 !default
$opacity-more-muted: 0.382 !default
$opacity-most-muted: 0.1 !default
$opacity-disabled: $opacity-muted !default
Color
$color-primary: hsba(340, 54, 98) !default
$color-secondary: hsba(0, 0, 56) !default
$color-danger: hsba(0, 82, 82) !default
$color-dark: hsba(0, 0, 32) !default
$color-light: hsba(0, 0, 100) !default
$color-emphasis: $color-dark !default
$color-main: lighten($color-dark, 10%) !default
$color-muted: lighten($color-dark, 50%) !default
$color-inverse-emphasis: $color-light !default
$color-inverse-main: rgba($color-light, $opacity-main) !default
$color-inverse-muted: rgba($color-light, $opacity-muted) !default
Background
$background-color-primary: $color-primary !default
$background-color-secondary: lighten($color-secondary, 30%) !default
$background-color-danger: $color-danger !default
$background-color-dark: $color-dark !default
$background-color-light: $color-light !default
$background-color-muted: darken($background-color-light, 3%) !default
$background-color-emphasis: lighten($background-color-primary, 22%) !default
$background-color-main: $background-color-light !default
$background-color-inverse-emphasis: lighten($background-color-primary, 22%) !default
$background-color-inverse-main: $background-color-dark !default
$background-color-inverse-muted: lighten($background-color-dark, 3%) !default
Border
$line-width-main: 1px !default
$line-color-primary: $color-primary !default
$line-color-secondary: lighten($color-secondary, 30%) !default
$line-color-danger: $color-danger !default
$line-color-dark: $color-dark !default
$line-color-light: $color-light !default
$line-color-emphasis: $line-color-primary !default
$line-color-main: lighten($line-color-dark, 60%) !default
$line-color-muted: lighten($line-color-dark, 40%) !default
$line-color-inverse-emphasis: $line-color-primary !default
$line-color-inverse-main: rgba($line-color-light, $opacity-main) !default
$line-color-inverse-muted: rgba($line-color-light, $opacity-muted) !default
$border-radius-sharp: 0 !default
$border-radius-rounded: 2px !default
$border-radius-circle: 9999px !default
$border-radius-main: $border-radius-sharp !default
Shadow
$box-shadow-low: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08) !default
$box-shadow-normal: 0 0.56rem 1.68rem rgba(0, 0, 0, 0.112) !default
$box-shadow-high: 0 0.784rem 2.352rem rgba(0, 0, 0, 0.1568) !default
$box-shadow-inset-low: null !default
$box-shadow-inset-normal: null !default
$box-shadow-inset-high: null !default
$text-shadow-low: null !default
$text-shadow-normal: null !default
$text-shadow-high: null !default
Animation
$transition-duration-short: 0.25s !default
$transition-duration-normal: 0.5s !default
$transition-duration-long: 1s !default
$transition-timing-function-main: ease !default
Others
$base-cursor: default !default
Default cursor of html.
$base-word-break: break-word !default
Default word break rule of body texts.
$base-text-underline-position: under !default
$base-text-rendering: optimizeLegibility !default
$base-webkit-font-smoothing: antialiased !default
$base-moz-font-smoothing: grayscale !default
$base-tap-highlight-color: transparent !default
$base-webkit-touch-callout: none !default
$base-html-background: $background-color-inverse-muted !default
$base-body-min-height: 100vh !default
$base-body-background: $background-color-main !default
$base-selection-color: $color-inverse-main !default
$base-selection-background-color: $background-color-dark !default