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.
Baseline
$baseline-height-px: 12px !default
Default baseline height. For calculation convinence,
the font size of <html> is set at the value of this variable,
except when the value is less than 12px.
Spacing
$spacing-tiny-rem: baseline(0.5) !default
$spacing-small-rem: baseline(1) !default
$spacing-medium-rem: baseline(2) !default
$spacing-large-rem: baseline(4) !default
Typography
$typography-main: constant-get(typography-stacks, sans-serif) !default
Default font family of body texts.
$typography-main-size-px: 16px !default
This variable is used for type scale calculation from size level 1 to 8.
The value of this variable is treated as level 6 and a calculated rem value
is used to set the font-size property of body.
$typography-size-scale-ratio: constant-get(scale-ratios, minor-second) !default
Default type scale ratio of texts. Different level font sizes are calculated
based on this variable and $typography-main-size-px.
$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-baseline-divided: false !default
By default $baseline-height-px is used as the basic unit for calculating typography line heights.
If the value of this variable is true, $baseline-height-px / 2 will be used for
calculation.
$typography-main-expected-line-height-ratios: (1.3, 1.5, 1.5, 1.5) !default
Default expected line height ratios of body texts at level 5, 6, 7 and 8. The values are used for calculating body texts line heights and might not match the calcualted values exactly.
$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, 12) !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, 60%) !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: darken($line-color-light, 30%) !default
$line-color-muted: darken($line-color-light, 8%) !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
$grid-gutter-width-rem: $spacing-medium-rem !default
Default horizontal padding of grid columns.
$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