There is a newer version of Luda.

Let's go!

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: 14px !default

This variable is used for type scale calculation from size level 1 to 7. 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

$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