Core

Manage library wide config, tokens, and base styles.

npm install @vrembem/core

@use "@vrembem/core";

Modules

Vrembem uses Sass modules to manage global configuration and design tokens throughout the library.

@vrembem/core/config: A Sass module for managing global configuration options. This is available across all components to set things like BEM naming syntax, prefixes, and output options.
@vrembem/core/tokens: A Sass module to define, manage, and output global and component-level design tokens expressed as CSS variables.

Options

Core comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

Unlock scroll

@use "@vrembem/core" with (
  $config: (
    // A prefix to apply to block class names. Provided value is automatically 
    // suffixed with a "-" character when applied.
    // @type string
    "prefix-blocks": "",

    // A prefix to apply to element class names
    // @type string
    "prefix-elements": "__",

    // A prefix to apply to modifier class names
    // @type string
    "prefix-modifiers": "--",

    // A prefix to apply to modifier value class names
    // @type string
    "prefix-modifier-values": "-",

    // A prefix to apply to CSS variable tokens. Map values requires a default
    // key and value along with any component specific prefixes as needed.
    // Provided value(s) are automatically suffixed with a "-" character.
    // @type string | map
    "prefix-tokens": "vb",

    // The palette to build CSS variables from
    // @type map
    "palette": (
      "primary": oklch(74% 40% 158deg),   // #30c883
      "secondary": oklch(62% 40% 244deg), // #008dde
      "neutral": oklch(74% 4% 236deg),    // #a2adb4
      "important": oklch(60% 40% 28deg),  // #ce5247
    ),

    // Number of decimal places to round colors converted to oklch color space
    // @type number
    "palette-round-decimal": 4,

    // A map of key/value pairs for preset lightness and chroma variants. These
    // are used as a lookup map whenever the key is used in a palette get call.
    // Example:
    // - tokens.get("palette", "primary", "500") => oklch(50% var(--vb-primary-c) var(--vb-primary-h))
    // - tokens.get("palette", "primary", "800") => oklch(20% calc(var(--vb-primary-c) * 0.8) var(--vb-primary-h))
    // @type map
    "palette-variants": (
      "50":  (98%, 10%), // The lightest variant in the palette
      "75":  (96%, 20%),
      "100": (90%, 40%),
      "200": (80%, 80%),
      "300": 70%,
      "400": 60%,
      "500": 50%,
      "600": 40%,
      "700": 30%,
      "800": (20%, 80%),
      "900": (18%, 70%),
      "950": (16%, 60%), // The darkest variant in the palette
    ),

    // Whether or not to output theme tokens. If disabled, the default theme is 
    // output as normal base tokens in the :root selector.
    // @type boolean
    "theme-output": true,

    // Sets the default theme option
    // @type string
    "theme-default": "light",

    // A map of breakpoint key/value pairs
    // @type map
    "breakpoints": (
      "xs": 480px,
      "sm": 620px,
      "md": 760px,
      "lg": 990px,
      "xl": 1380px
    )
  )
);

Design tokens

Design tokens are the foundation of the Vrembem library and help to establish a consistent design language across components. Tokens are managed by the @vrembem/core/tokens module and are output as CSS variables.

Output

Design token CSS variables are not automatically output when @vrembem/core is imported or used. To output core CSS variables, use the vrembem/tokens entry at the end of your Sass manifest file.

@forward "vrembem/tokens";

Alternatively, custom properties can also be output manually using the core/tokens and core/themes modules:

// Import core to bootstrap
@use "@vrembem/core";

// Import tokens module
@use "@vrembem/core/tokens";

// Wrap the output in the tokens layer
@layer tokens {
  // Output all registered tokens as CSS variables
  @include tokens.output;
}

It is recommended to output design token CSS variables at the end of your Sass manifest file. This ensures that all defined properties in your Sass partials are included in the output.

Reference

Below is a reference to all CSS variables and their values. Theme variables use the value based on the current theme.

Variable	Value
`--vb-prefix-tokens` Copied!	`vb` Copied!
`--vb-breakpoint-xs` Copied!	`480px` Copied!
`--vb-breakpoint-sm` Copied!	`620px` Copied!
`--vb-breakpoint-md` Copied!	`760px` Copied!
`--vb-breakpoint-lg` Copied!	`990px` Copied!
`--vb-breakpoint-xl` Copied!	`1380px` Copied!
`--vb-backdrop-color` Copied!	`var(--vb-neutral-950)` Copied!
`--vb-backdrop-opacity` Copied!	`80%` Copied!
`--vb-base-background` Copied!	`var(--vb-background)` Copied!
`--vb-base-foreground` Copied!	`var(--vb-foreground)` Copied!
`--vb-spacing` Copied!	`0.25rem` Copied!
`--vb-spacing-xs` Copied!	`var(--vb-spacing)` Copied!
`--vb-spacing-sm` Copied!	`calc(var(--vb-spacing) * 2)` Copied!
`--vb-spacing-md` Copied!	`calc(var(--vb-spacing) * 4)` Copied!
`--vb-spacing-lg` Copied!	`calc(var(--vb-spacing) * 6)` Copied!
`--vb-spacing-xl` Copied!	`calc(var(--vb-spacing) * 8)` Copied!
`--vb-em-spacing` Copied!	`0.25em` Copied!
`--vb-em-spacing-xs` Copied!	`var(--vb-em-spacing)` Copied!
`--vb-em-spacing-sm` Copied!	`calc(var(--vb-em-spacing) * 2)` Copied!
`--vb-em-spacing-md` Copied!	`calc(var(--vb-em-spacing) * 4)` Copied!
`--vb-em-spacing-lg` Copied!	`calc(var(--vb-em-spacing) * 6)` Copied!
`--vb-em-spacing-xl` Copied!	`calc(var(--vb-em-spacing) * 8)` Copied!
`--vb-border-width` Copied!	`1px` Copied!
`--vb-border-style` Copied!	`solid` Copied!
`--vb-border` Copied!	`var(--vb-border-width) var(--vb-border-style) var(--vb-border-color)` Copied!
`--vb-border-strong` Copied!	`var(--vb-border-width) var(--vb-border-style) var(--vb-border-color-strong)` Copied!
`--vb-border-stronger` Copied!	`var(--vb-border-width) var(--vb-border-style) var(--vb-border-color-stronger)` Copied!
`--vb-border-radius` Copied!	`0.25rem` Copied!
`--vb-border-radius-lg` Copied!	`0.5rem` Copied!
`--vb-border-radius-circle` Copied!	`9999px` Copied!
`--vb-box-shadow-0` Copied!	`0 0 0 1px var(--vb-box-shadow-outline-color)` Copied!
`--vb-drop-shadow-0` Copied!	`0 0 1px var(--vb-drop-shadow-outline-color)` Copied!
`--vb-shadow-1` Copied!	`0 2px 2px var(--vb-shadow-color)` Copied!
`--vb-shadow-2` Copied!	`0 4px 4px var(--vb-shadow-color)` Copied!
`--vb-shadow-3` Copied!	`0 6px 6px var(--vb-shadow-color)` Copied!
`--vb-shadow-4` Copied!	`0 12px 12px var(--vb-shadow-color)` Copied!
`--vb-shadow-5` Copied!	`0 24px 24px var(--vb-shadow-color)` Copied!
`--vb-box-shadow-outline` Copied!	`var(--vb-box-shadow-0)` Copied!
`--vb-box-shadow-xs` Copied!	`var(--vb-box-shadow-0), var(--vb-shadow-1)` Copied!
`--vb-box-shadow-sm` Copied!	`var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2)` Copied!
`--vb-box-shadow-md` Copied!	`var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3)` Copied!
`--vb-box-shadow-lg` Copied!	`var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3), var(--vb-shadow-4)` Copied!
`--vb-box-shadow-xl` Copied!	`var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3), var(--vb-shadow-4), var(--vb-shadow-5)` Copied!
`--vb-drop-shadow-outline` Copied!	`drop-shadow(var(--vb-drop-shadow-0))` Copied!
`--vb-drop-shadow-xs` Copied!	`drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1))` Copied!
`--vb-drop-shadow-sm` Copied!	`drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2))` Copied!
`--vb-drop-shadow-md` Copied!	`drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3))` Copied!
`--vb-drop-shadow-lg` Copied!	`drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3)) drop-shadow(var(--vb-shadow-4))` Copied!
`--vb-drop-shadow-xl` Copied!	`drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3)) drop-shadow(var(--vb-shadow-4)) drop-shadow(var(--vb-shadow-5))` Copied!
`--vb-font-family` Copied!	`var(--vb-font-family-sans)` Copied!
`--vb-font-family-sans` Copied!	`system-ui, ui-sans-serif, sans-serif` Copied!
`--vb-font-family-serif` Copied!	`ui-serif, serif` Copied!
`--vb-font-family-mono` Copied!	`ui-monospace, monospace` Copied!
`--vb-font-size` Copied!	`1rem` Copied!
`--vb-font-size-sm` Copied!	`0.875rem` Copied!
`--vb-font-size-lg` Copied!	`1.125rem` Copied!
`--vb-line-height` Copied!	`1.5` Copied!
`--vb-font-weight-thin` Copied!	`100` Copied!
`--vb-font-weight-extra-light` Copied!	`200` Copied!
`--vb-font-weight-light` Copied!	`300` Copied!
`--vb-font-weight-regular` Copied!	`400` Copied!
`--vb-font-weight-medium` Copied!	`500` Copied!
`--vb-font-weight-semi-bold` Copied!	`600` Copied!
`--vb-font-weight-bold` Copied!	`700` Copied!
`--vb-font-weight-extra-bold` Copied!	`800` Copied!
`--vb-font-weight-black` Copied!	`900` Copied!
`--vb-transition-duration` Copied!	`0.3s` Copied!
`--vb-transition-duration-short` Copied!	`0.15s` Copied!
`--vb-transition-duration-long` Copied!	`0.6s` Copied!
`--vb-transition-timing-function` Copied!	`cubic-bezier(0.4, 0, 0.2, 1)` Copied!
`--vb-transition` Copied!	`var(--vb-transition-duration) var(--vb-transition-timing-function)` Copied!
`--vb-transition-short` Copied!	`var(--vb-transition-duration-short) var(--vb-transition-timing-function)` Copied!
`--vb-transition-long` Copied!	`var(--vb-transition-duration-long) var(--vb-transition-timing-function)` Copied!
`--vb-focus-ring-width` Copied!	`3px` Copied!
`--vb-focus-ring-style` Copied!	`solid` Copied!
`--vb-focus-ring-offset` Copied!	`0` Copied!
`--vb-focus-ring-color` Copied!	`var(--vb-primary)` Copied!
`--vb-focus-ring-opacity` Copied!	`32%` Copied!
`--vb-form-control-size` Copied!	`2.5rem` Copied!
`--vb-form-control-size-sm` Copied!	`2rem` Copied!
`--vb-form-control-size-lg` Copied!	`3rem` Copied!
`--vb-form-control-font-size` Copied!	`var(--vb-font-size)` Copied!
`--vb-form-control-font-size-sm` Copied!	`var(--vb-font-size-sm)` Copied!
`--vb-form-control-font-size-lg` Copied!	`var(--vb-font-size-lg)` Copied!
`--vb-form-control-line-height` Copied!	`1` Copied!
`--vb-form-control-border-width` Copied!	`var(--vb-border-width)` Copied!
`--vb-form-control-border-radius` Copied!	`var(--vb-border-radius)` Copied!
`--vb-form-control-padding-y` Copied!	`0.5rem` Copied!
`--vb-form-control-padding-y-sm` Copied!	`0.25rem` Copied!
`--vb-form-control-padding-y-lg` Copied!	`0.75rem` Copied!
`--vb-form-control-padding-x` Copied!	`1rem` Copied!
`--vb-form-control-padding-x-sm` Copied!	`0.5rem` Copied!
`--vb-form-control-padding-x-lg` Copied!	`1.5rem` Copied!
`--vb-form-control-padding` Copied!	`var(--vb-form-control-padding-y) var(--vb-form-control-padding-x)` Copied!
`--vb-form-control-padding-sm` Copied!	`var(--vb-form-control-padding-y-sm) var(--vb-form-control-padding-x-sm)` Copied!
`--vb-form-control-padding-lg` Copied!	`var(--vb-form-control-padding-y-lg) var(--vb-form-control-padding-x-lg)` Copied!
`--vb-form-control-accent` Copied!	`var(--vb-primary)` Copied!
`--vb-form-control-foreground` Copied!	`var(--vb-foreground-strong)` Copied!
`--vb-form-control-background` Copied!	`var(--vb-background)` Copied!
`--vb-form-control-background-disabled` Copied!	`var(--vb-background-alt)` Copied!
`--vb-form-control-background-readonly` Copied!	`var(--vb-background-alt)` Copied!
`--vb-form-control-box-shadow` Copied!	`none` Copied!
`--vb-form-control-opacity-disabled` Copied!	`0.6` Copied!
`--vb-form-control-transition-timing-function` Copied!	`var(--vb-transition-timing-function)` Copied!
`--vb-form-control-transition-duration` Copied!	`var(--vb-transition-duration-short)` Copied!
`--vb-form-control-transition-property` Copied!	`outline` Copied!
`--vb-form-control-choice-size` Copied!	`1.25em` Copied!
`--vb-form-control-choice-color` Copied!	`var(--vb-foreground-subtle)` Copied!
`--vb-form-control-choice-accent` Copied!	`var(--vb-form-control-accent)` Copied!
`--vb-form-control-choice-fill` Copied!	`var(--vb-form-control-background)` Copied!
`--vb-form-control-choice-transition-property` Copied!	`(background-color, outline)` Copied!
`--vb-black` Copied!	`oklch(0% 0 0deg)` Copied!
`--vb-white` Copied!	`oklch(100% 0 0deg)` Copied!
`--vb-primary` Copied!	`oklch(74% 0.16 158deg)` Copied!
`--vb-primary-l` Copied!	`74%` Copied!
`--vb-primary-c` Copied!	`0.16` Copied!
`--vb-primary-h` Copied!	`158deg` Copied!
`--vb-primary-50` Copied!	`oklch(98% calc(var(--vb-primary-c) * 0.1) var(--vb-primary-h))` Copied!
`--vb-primary-75` Copied!	`oklch(96% calc(var(--vb-primary-c) * 0.2) var(--vb-primary-h))` Copied!
`--vb-primary-100` Copied!	`oklch(90% calc(var(--vb-primary-c) * 0.4) var(--vb-primary-h))` Copied!
`--vb-primary-200` Copied!	`oklch(80% calc(var(--vb-primary-c) * 0.8) var(--vb-primary-h))` Copied!
`--vb-primary-300` Copied!	`oklch(70% var(--vb-primary-c) var(--vb-primary-h))` Copied!
`--vb-primary-400` Copied!	`oklch(60% var(--vb-primary-c) var(--vb-primary-h))` Copied!
`--vb-primary-500` Copied!	`oklch(50% var(--vb-primary-c) var(--vb-primary-h))` Copied!
`--vb-primary-600` Copied!	`oklch(40% var(--vb-primary-c) var(--vb-primary-h))` Copied!
`--vb-primary-700` Copied!	`oklch(30% var(--vb-primary-c) var(--vb-primary-h))` Copied!
`--vb-primary-800` Copied!	`oklch(20% calc(var(--vb-primary-c) * 0.8) var(--vb-primary-h))` Copied!
`--vb-primary-900` Copied!	`oklch(18% calc(var(--vb-primary-c) * 0.7) var(--vb-primary-h))` Copied!
`--vb-primary-950` Copied!	`oklch(16% calc(var(--vb-primary-c) * 0.6) var(--vb-primary-h))` Copied!
`--vb-secondary` Copied!	`oklch(62% 0.16 244deg)` Copied!
`--vb-secondary-l` Copied!	`62%` Copied!
`--vb-secondary-c` Copied!	`0.16` Copied!
`--vb-secondary-h` Copied!	`244deg` Copied!
`--vb-secondary-50` Copied!	`oklch(98% calc(var(--vb-secondary-c) * 0.1) var(--vb-secondary-h))` Copied!
`--vb-secondary-75` Copied!	`oklch(96% calc(var(--vb-secondary-c) * 0.2) var(--vb-secondary-h))` Copied!
`--vb-secondary-100` Copied!	`oklch(90% calc(var(--vb-secondary-c) * 0.4) var(--vb-secondary-h))` Copied!
`--vb-secondary-200` Copied!	`oklch(80% calc(var(--vb-secondary-c) * 0.8) var(--vb-secondary-h))` Copied!
`--vb-secondary-300` Copied!	`oklch(70% var(--vb-secondary-c) var(--vb-secondary-h))` Copied!
`--vb-secondary-400` Copied!	`oklch(60% var(--vb-secondary-c) var(--vb-secondary-h))` Copied!
`--vb-secondary-500` Copied!	`oklch(50% var(--vb-secondary-c) var(--vb-secondary-h))` Copied!
`--vb-secondary-600` Copied!	`oklch(40% var(--vb-secondary-c) var(--vb-secondary-h))` Copied!
`--vb-secondary-700` Copied!	`oklch(30% var(--vb-secondary-c) var(--vb-secondary-h))` Copied!
`--vb-secondary-800` Copied!	`oklch(20% calc(var(--vb-secondary-c) * 0.8) var(--vb-secondary-h))` Copied!
`--vb-secondary-900` Copied!	`oklch(18% calc(var(--vb-secondary-c) * 0.7) var(--vb-secondary-h))` Copied!
`--vb-secondary-950` Copied!	`oklch(16% calc(var(--vb-secondary-c) * 0.6) var(--vb-secondary-h))` Copied!
`--vb-neutral` Copied!	`oklch(74% 0.016 236deg)` Copied!
`--vb-neutral-l` Copied!	`74%` Copied!
`--vb-neutral-c` Copied!	`0.016` Copied!
`--vb-neutral-h` Copied!	`236deg` Copied!
`--vb-neutral-50` Copied!	`oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h))` Copied!
`--vb-neutral-75` Copied!	`oklch(96% calc(var(--vb-neutral-c) * 0.2) var(--vb-neutral-h))` Copied!
`--vb-neutral-100` Copied!	`oklch(90% calc(var(--vb-neutral-c) * 0.4) var(--vb-neutral-h))` Copied!
`--vb-neutral-200` Copied!	`oklch(80% calc(var(--vb-neutral-c) * 0.8) var(--vb-neutral-h))` Copied!
`--vb-neutral-300` Copied!	`oklch(70% var(--vb-neutral-c) var(--vb-neutral-h))` Copied!
`--vb-neutral-400` Copied!	`oklch(60% var(--vb-neutral-c) var(--vb-neutral-h))` Copied!
`--vb-neutral-500` Copied!	`oklch(50% var(--vb-neutral-c) var(--vb-neutral-h))` Copied!
`--vb-neutral-600` Copied!	`oklch(40% var(--vb-neutral-c) var(--vb-neutral-h))` Copied!
`--vb-neutral-700` Copied!	`oklch(30% var(--vb-neutral-c) var(--vb-neutral-h))` Copied!
`--vb-neutral-800` Copied!	`oklch(20% calc(var(--vb-neutral-c) * 0.8) var(--vb-neutral-h))` Copied!
`--vb-neutral-900` Copied!	`oklch(18% calc(var(--vb-neutral-c) * 0.7) var(--vb-neutral-h))` Copied!
`--vb-neutral-950` Copied!	`oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h))` Copied!
`--vb-important` Copied!	`oklch(60% 0.16 28deg)` Copied!
`--vb-important-l` Copied!	`60%` Copied!
`--vb-important-c` Copied!	`0.16` Copied!
`--vb-important-h` Copied!	`28deg` Copied!
`--vb-important-50` Copied!	`oklch(98% calc(var(--vb-important-c) * 0.1) var(--vb-important-h))` Copied!
`--vb-important-75` Copied!	`oklch(96% calc(var(--vb-important-c) * 0.2) var(--vb-important-h))` Copied!
`--vb-important-100` Copied!	`oklch(90% calc(var(--vb-important-c) * 0.4) var(--vb-important-h))` Copied!
`--vb-important-200` Copied!	`oklch(80% calc(var(--vb-important-c) * 0.8) var(--vb-important-h))` Copied!
`--vb-important-300` Copied!	`oklch(70% var(--vb-important-c) var(--vb-important-h))` Copied!
`--vb-important-400` Copied!	`oklch(60% var(--vb-important-c) var(--vb-important-h))` Copied!
`--vb-important-500` Copied!	`oklch(50% var(--vb-important-c) var(--vb-important-h))` Copied!
`--vb-important-600` Copied!	`oklch(40% var(--vb-important-c) var(--vb-important-h))` Copied!
`--vb-important-700` Copied!	`oklch(30% var(--vb-important-c) var(--vb-important-h))` Copied!
`--vb-important-800` Copied!	`oklch(20% calc(var(--vb-important-c) * 0.8) var(--vb-important-h))` Copied!
`--vb-important-900` Copied!	`oklch(18% calc(var(--vb-important-c) * 0.7) var(--vb-important-h))` Copied!
`--vb-important-950` Copied!	`oklch(16% calc(var(--vb-important-c) * 0.6) var(--vb-important-h))` Copied!
`--vb-background` Copied!	Light theme value `var(--vb-white)` Copied! Dark theme value `var(--vb-neutral-800)` Copied!
`--vb-background-alt` Copied!	Light theme value `var(--vb-neutral-50)` Copied! Dark theme value `var(--vb-neutral-900)` Copied!
`--vb-background-shift` Copied!	Light theme value `var(--vb-neutral-75)` Copied! Dark theme value `var(--vb-neutral-950)` Copied!
`--vb-foreground-strong` Copied!	Light theme value `var(--vb-neutral-950)` Copied! Dark theme value `var(--vb-white)` Copied!
`--vb-foreground` Copied!	Light theme value `var(--vb-neutral-500)` Copied! Dark theme value `var(--vb-neutral-200)` Copied!
`--vb-foreground-subtle` Copied!	Light theme value `var(--vb-neutral-300)` Copied! Dark theme value `var(--vb-neutral-400)` Copied!
`--vb-foreground-accent` Copied!	Light theme value `var(--vb-primary-300)` Copied! Dark theme value `var(--vb-primary-200)` Copied!
`--vb-foreground-accent-alt` Copied!	Light theme value `var(--vb-secondary)` Copied! Dark theme value `var(--vb-secondary-200)` Copied!
`--vb-primary-background` Copied!	Light theme value `var(--vb-primary-75)` Copied! Dark theme value `var(--vb-primary-600)` Copied!
`--vb-primary-foreground` Copied!	Light theme value `var(--vb-primary-600)` Copied! Dark theme value `var(--vb-primary-75)` Copied!
`--vb-secondary-background` Copied!	Light theme value `var(--vb-secondary-75)` Copied! Dark theme value `var(--vb-secondary-600)` Copied!
`--vb-secondary-foreground` Copied!	Light theme value `var(--vb-secondary-600)` Copied! Dark theme value `var(--vb-secondary-75)` Copied!
`--vb-neutral-background` Copied!	Light theme value `var(--vb-neutral-75)` Copied! Dark theme value `var(--vb-neutral-600)` Copied!
`--vb-neutral-foreground` Copied!	Light theme value `var(--vb-neutral-600)` Copied! Dark theme value `var(--vb-neutral-75)` Copied!
`--vb-important-background` Copied!	Light theme value `var(--vb-important-75)` Copied! Dark theme value `var(--vb-important-600)` Copied!
`--vb-important-foreground` Copied!	Light theme value `var(--vb-important-600)` Copied! Dark theme value `var(--vb-important-75)` Copied!
`--vb-border-color` Copied!	Light theme value `oklch(0% 0 0deg / 0.1)` Copied! Dark theme value `oklch(100% 0 0deg / 0.1)` Copied!
`--vb-border-color-strong` Copied!	Light theme value `oklch(0% 0 0deg / 0.2)` Copied! Dark theme value `oklch(100% 0 0deg / 0.2)` Copied!
`--vb-border-color-stronger` Copied!	Light theme value `oklch(0% 0 0deg / 0.3)` Copied! Dark theme value `oklch(100% 0 0deg / 0.3)` Copied!
`--vb-shadow-color` Copied!	Light theme value `oklch(40% var(--vb-neutral-c) var(--vb-neutral-h) / 8%)` Copied! Dark theme value `oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h) / 80%)` Copied!
`--vb-box-shadow-outline-color` Copied!	Light theme value `oklch(40% var(--vb-neutral-c) var(--vb-neutral-h) / 8%)` Copied! Dark theme value `oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h) / 8%)` Copied!
`--vb-drop-shadow-outline-color` Copied!	Light theme value `oklch(40% var(--vb-neutral-c) var(--vb-neutral-h) / 32%)` Copied! Dark theme value `oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h) / 32%)` Copied!

There are no variables that match your search.

Edit page

Why Vrembem

Flex

Menu

On this page

Core

Modules

Options

Design tokens

Output

Reference