CSS Configurations

How to customize the way CSS works

To reduce your CSS bundle size and help you ship your own styles along with the necessary styles for the components, style includes can be configured in the configuration object of the setup mixin. It accepts the following options:

@import 'webcoreui/styles';
@include setup((
    // Define paths for your fonts
    fontRegular: '/fonts/Inter-Regular.woff2',
    fontBold: '/fonts/Inter-Bold.woff2'

    // Optionally, define which styles you'd like to include
    includeResets: true,
    includeUtilities: true,
    includeTooltip: true,
    includeScrollbarStyles: true
));

Property	Default value	Purpose
`includeResets`	`true`	Include reset styles for native HTML elements, such as `code`, `pre`, or `ul`. Set to `false` if you want to use your own CSS resets.
`includeUtilities`	`true`	Adds utility classes for CSS. Read more about the available utility classes here.
`includeTooltip`	`true`	Adds global styles for tooltips.
`includeScrollbarStyles`	`true`	Adds global styles for scrollbars.

webcore.config.scss

While the setup mixin can be used once to define generic styles that will be bundled in your CSS, the webcore.config.scss file can be used to define individual component styles. To configure how Webcore component are displayed, you can define the following maps in your webcore.config.scss file:

// Override breakpoints
$breakpoints: (
    'xs': 600px,
    'sm': 800px,
    'md': 1024px,
    'lg': 1200px
);

// Override paddings, margins, and gaps
$spacing: (
    'none':    0,
    'xxs':     2px,
    'xs':      5px,
    'sm':      10px,
    'md':      15px,
    'default': 20px,
    'lg':      25px,
    'xl':      30px,
    '2xl':     35px,
    '3xl':     40px,
    '4xl':     45px,
    '5xl':     50px
);

// Override font sizes
$fontSizes: (
    'xs':       12px,
    'sm':       14px,
    'md':       16px,
    'default':  18px,
    'lg':       21px,
    'xl':       24px,
    '2xl':      28px,
    '3xl':      32px
);

// Override line heights
$lineHeights: (
    'normal': normal,
    'hmd': 1.5,
    'hlg': 1.7
);

// Override z-index values
$layers: (
    'bg': -1,
    'default': 0,
    'fg': 1,
    'overlay': 2,
    'popup': 3,
    'top':  98,
    'header': 99,
    'modal': 100
);

// Disable animations
$disableAnimations: false

You can also override border-radius values using the following CSS variables:

body {
    --w-sm-radius: 2px;
    --w-md-radius: 5px;
    --w-lg-radius: 10px;
    --w-xl-radius: 15px;
}

If you leave your webcore.config.scss file empty, the above rules will be applied as default.

Overriding Component Styles

Default component styles can also be changed by overriding the following CSS variables:

html body {
    // Avatar component
    --w-avatar-border: var(--w-color-primary-70);

    // Checkbox component
    --w-checkbox-color: var(--w-color-primary);

    // Collapsible component
    --w-collapsible-initial-height: 0;
    --w-collapsible-max-height: 100%;

    // Progress component
    --w-progress-color: var(--w-color-primary);
    --w-progress-background: var(--w-color-primary-50);
    --w-progress-stripe-light: var(--w-color-primary);
    --w-progress-stripe-dark: var(--w-color-primary-10);

    // Radio component
    --w-radio-color: var(--w-color-primary);

    // Rating component
    --w-rating-color: var(--w-color-primary);
    --w-rating-empty-color: var(--w-color-primary);
    --w-rating-empty-background: var(--w-color-primary-70);
    --w-rating-size: 18px;

    // Scrollbars
    --w-scrollbar-bg: var(--w-color-primary-60);
    --w-scrollbar-fg: var(--w-color-primary-50);

    // Slider component
    --w-slider-background: var(--w-color-primary-50);
    --w-slider-color: var(--w-color-primary);
    --w-slider-thumb: var(--w-color-primary-50);

    // Spinner component
    --w-spinner-color: var(--w-color-primary);
    --w-spinner-width: 2px;
    --w-spinner-speed: 2s;
    --w-spinner-size: 30px;
    --w-spinner-dash: 8;

    // Switch component
    --w-switch-off-color: var(--w-color-primary-50);
    --w-switch-on-color: var(--w-color-primary);

    // ThemeSwitcher component
    --w-theme-switcher-size: 20px;

    // Timeline component
    --w-timeline-color: var(--w-color-primary-50);
    --w-timeline-text-color: var(--w-color-primary);
    --w-timeline-counter: decimal;

    // Tooltips
    --w-tooltip-background: var(--w-color-primary);
    --w-tooltip-color: var(--w-color-primary-70);
}

<- Imports Resets ->

Request improvement for this page