@broxus/react-uikit 0.23.2 → 0.24.0

package/README.md

@@ -1,3 +1,330 @@
 # Broxus / UIkit
 
-Collection of the React-based components and CSS utilities that helps build user interfaces of the web applications.
+A React component library built on top of **[React component](https://github.com/react-component)** primitives and
+adapted to the **[UIkit](https://getuikit.com/)** CSS framework. Provides a collection of lightweight, composable
+components and CSS utilities for building web application interfaces.
+
+Components are designed as building blocks — simple and minimal by default, with the expectation that projects
+apply their own styling and theming via the SCSS customization system.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Components](#components)
+  - [Layout](#layout)
+  - [Navigation](#navigation)
+  - [Forms & Controls](#forms--controls)
+  - [Data Display](#data-display)
+  - [Typography](#typography)
+  - [Feedback](#feedback)
+  - [Interactive Containers](#interactive-containers)
+  - [Actions](#actions)
+  - [System](#system)
+- [Customization](#customization)
+  - [Pre-built CSS](#pre-built-css)
+  - [SCSS Entry Points](#scss-entry-points)
+  - [Selective Import](#selective-import)
+  - [Overriding SCSS Variables](#overriding-scss-variables)
+  - [Overriding CSS Custom Properties](#overriding-css-custom-properties)
+  - [Hook Mixins](#hook-mixins)
+  - [Color Mode](#color-mode)
+- [Key Conventions](#key-conventions)
+
+## Installation
+
+Install the package as project dependency
+
+```shell
+npm install @broxus/react-uikit
+```
+
+```shell
+yarn add @broxus/react-uikit
+```
+
+```shell
+pnpm add @broxus/react-uikit
+```
+
+```shell
+bun add @broxus/react-uikit
+```
+
+## Components
+
+### Layout
+
+Page structure, spacing, and responsive grid primitives.
+
+| Component | Description |
+|---|---|
+| `Section` | Full-width page section with background variants (`default`, `muted`, `primary`, `secondary`, `tertiary`) and size options |
+| `Container` | Max-width content wrapper with horizontal padding |
+| `Grid` | CSS grid with configurable gaps, dividers, responsive child widths, and equal-height matching |
+| `Flex` / `Flex.Item` | Flexbox container and items with responsive alignment, direction, wrap, and ordering |
+| `Width` | Fixed, fractional (`1-2`, `1-3`, etc.), or responsive width control |
+| `Tile` | Content tile with background variants, similar to Section but for individual blocks |
+| `Cover` | Fills container with an image or video while maintaining aspect ratio |
+| `Align` / `Align.Left` / `Align.Center` / `Align.Right` | Horizontal content alignment with RTL support |
+| `Divider` | Horizontal or vertical separator line |
+
+### Navigation
+
+Menus, tabs, breadcrumbs, and other navigation patterns.
+
+| Component | Description |
+|---|---|
+| `Navbar` | Top navigation bar with `.Container`, `.Left`, `.Center`, `.Right`, `.Nav`, `.Item`, `.Toggle` |
+| `Nav` | Vertical, horizontal, or inline menu with submenus, groups, headers, and dividers |
+| `Subnav` | Secondary navigation with `divider` and `pill` variants |
+| `Breadcrumb` | Hierarchical breadcrumb trail |
+| `Tabs` | Tabbed interface (`line`, `card`, `editable-card`) with configurable position and size |
+| `Segmented` | Segmented control for switching between 2 or more options |
+| `Dotnav` | Dot indicator navigation (e.g. for sliders) |
+| `Iconnav` | Icon-based navigation |
+
+### Forms & Controls
+
+Input elements, selectors, and form layout.
+
+| Component | Description |
+|---|---|
+| `Form` | Form container with `.Label`, `.Fieldset`, `.Legend`, `.Controls` — supports `stacked` and `horizontal` layouts |
+| `Input` | Text input with prefix, suffix, clear button, and validation states |
+| `Input.Number` | Numeric input with increment/decrement |
+| `Input.Password` | Password input with visibility toggle |
+| `TextArea` | Multiline text input with character count |
+| `Select` | Dropdown select with single, multiple, and tags modes, search, and loading state |
+| `Checkbox` / `Checkbox.Group` | Checkbox with indeterminate state and group support |
+| `Radio` / `Radio.Group` | Radio button with group support |
+| `Switch` | Toggle switch with loading state and custom labels |
+| `Slider` | Range slider for numeric value selection |
+| `DatePicker` | Date selection with calendar popup and range support |
+
+### Data Display
+
+Components for presenting structured content.
+
+| Component | Description |
+|---|---|
+| `Card` | Content card with `.Header`, `.Body`, `.Footer`, `.Title`, `.Badge`, `.Media` — supports style variants and hover effects |
+| `Badge` | Small label or count indicator |
+| `Label` | Status label with `success`, `warning`, `danger` variants |
+| `List` / `List.Item` | Styled list with marker types (`bullet`, `disc`, `divider`, `striped`, etc.) and color options |
+| `DescriptionList` | Term–description pairs (`<dl>`) with `.Term` and `.Description` |
+| `Progress` | Progress bar |
+| `Article` | Article content wrapper with `.Title` and `.Meta` |
+
+### Typography
+
+Text styling and heading components.
+
+| Component | Description |
+|---|---|
+| `Text` | Styled text with color, size, weight, transform, alignment, and wrapping control |
+| `Heading` | Section heading with size scale and decorations (`bullet`, `divider`, `line`) |
+| `Link` | Styled link with variants (`heading`, `muted`, `reset`, `text`, `toggle`) |
+
+### Feedback
+
+Notifications, dialogs, and loading indicators.
+
+| Component | Description |
+|---|---|
+| `Alert` | Notification message with severity levels (`primary`, `success`, `warning`, `danger`) and close animation |
+| `Modal` | Dialog window with centered, full-screen, and custom container options |
+| `Drawer` | Side panel with `push`, `reveal`, and `slide` animations |
+| `Spinner` | SVG loading spinner with configurable size |
+| `Overlay` | Content overlay with positioning options |
+
+### Interactive Containers
+
+Expandable, collapsible, and popup containers.
+
+| Component | Description |
+|---|---|
+| `Accordion` / `Accordion.Item` | Collapsible content panels |
+| `Drop` | Popup overlay attached to a trigger element, with placement and arrow options |
+| `Dropdown` | Dropdown menu (wraps Drop) |
+
+### Actions
+
+Buttons and action triggers.
+
+| Component | Description |
+|---|---|
+| `Button` / `Button.Group` | Action button with variants (`primary`, `secondary`, `tertiary`, `danger`, `link`, `text`), sizes, and shapes (`circle`, `round`) |
+| `Close` | Close button (X icon) |
+
+### System
+
+Configuration providers and base utilities.
+
+| Component | Description |
+|---|---|
+| `ConfigProvider` | Global configuration for component defaults: icons, locale, breakpoints, direction, popup containers |
+| `Inverse` | Color mode provider for light/dark theme switching with persistence |
+| `Icon` | Icon from the built-in icon set |
+
+## Customization
+
+The library provides two ways to consume styles:
+
+- **Pre-built CSS** — ready-to-use stylesheets available at `@broxus/react-uikit/assets/*.css`, no SCSS toolchain needed (see [Pre-built CSS](#pre-built-css))
+- **SCSS source** — full customization via variables, tokens, and hook mixins
+
+The SCSS styling system has two layers:
+
+- **SCSS variables** (compile-time) — used for computations (`color.scale()`, `rgba()`, math) and resolved to literal values at build
+- **CSS custom properties** (runtime) — the actual design tokens consumed by components via `var(--...)`
+
+### Pre-built CSS
+
+Pre-compiled CSS assets available without an SCSS toolchain:
+
+| Asset | Purpose |
+|---|---|
+| `@broxus/react-uikit/assets/uikit.min.css` | Fully compiled CSS with [default component set](#selective-import) |
+| `@broxus/react-uikit/assets/vars.css` | Global (`--global-*`) and base (`--base-*`) CSS custom properties. Component-specific tokens are included in their respective modules |
+| `@broxus/react-uikit/assets/custom-media.css` | PostCSS custom media queries for breakpoints |
+
+Components can also be imported individually:
+
+```css
+@import '@broxus/react-uikit/assets/button.css';
+@import '@broxus/react-uikit/assets/card.css';
+@import '@broxus/react-uikit/assets/modal.css';
+```
+
+Module names correspond to component names in the [component map](#selective-import).
+
+> [!WARNING] Important
+> 
+> Component styles use [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) for responsive breakpoints (`@media (--media-breakpoint-small)`, etc.). These are not natively supported by browsers and require [PostCSS](https://postcss.org/) with [postcss-custom-media](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) plugin to be processed. Import `@broxus/react-uikit/assets/custom-media.css` to provide the breakpoint definitions.
+
+### SCSS Entry Points
+
+| Entry point | Purpose |
+|---|---|
+| `@broxus/react-uikit/styles/import` | Main entry — outputs component styles with conditional token generation |
+| `@broxus/react-uikit/styles/vars` | Outputs only `:root` CSS custom properties (tokens), no component styles |
+| `@broxus/react-uikit/styles/tokens` | Re-exports token mixins (`button-tokens`, `card-tokens`, etc.) for selective inclusion |
+| `@broxus/react-uikit/styles/variables` | SCSS variable defaults — override via `@forward ... with (...)` |
+| `@broxus/react-uikit/styles/components` | Re-exports component style mixins and inverse style mixins |
+
+### Selective Import
+
+Include only the components you need to reduce CSS output:
+
+```scss
+@use '@broxus/react-uikit/styles/import' with (
+    $components: (button: true, card: true, control: true, modal: true),
+);
+```
+
+Or include everything:
+
+```scss
+@use '@broxus/react-uikit/styles/import' with (
+    $components: (all: true),
+);
+```
+
+Component map:
+
+| Group | Enabled by default | Disabled by default |
+|---|---|---|
+| Base | `base` | — |
+| Elements | `link`, `heading`, `divider`, `list`, `icon`, `form`, `control`, `input-password`, `input-number`, `checkbox`, `radio`, `datepicker`, `button`, `slider`, `switch`, `select`, `textarea` | `description-list`, `progress` |
+| Layout | `section`, `container`, `grid`, `tile`, `card` | — |
+| Common | `close`, `spinner`, `alert`, `badge`, `label`, `tooltip` | `totop`, `marker`, `overlay`, `article`, `search`, `placeholder` |
+| Interaction | `accordion`, `drop`, `dropdown`, `modal`, `drawer` | `sticky`, `leader` |
+| Navigation | `nav`, `navbar`, `subnav`, `segmented`, `breadcrumb`, `tabs` | `dotnav`, `thumbnav`, `iconnav` |
+| Utilities | `animation`, `motion`, `width`, `height`, `text`, `align`, `svg`, `utility`, `flex`, `margin`, `padding`, `position`, `transition`, `visibility` | `column`, `cover`, `background`, `inverse` |
+
+### Overriding SCSS Variables
+
+Override library defaults by forwarding with new values:
+
+```scss
+@forward '@broxus/react-uikit/styles/variables' with (
+    $global-font-family: 'Inter', sans-serif !default,
+    $global-primary-color: #ad6d60 !default,
+    $global-background: #0d0d0d !default,
+    $global-border-radius: 8px !default,
+    $button-primary-hover-background: color.scale(#ad6d60, $lightness: -8%) !default,
+);
+```
+
+### Overriding CSS Custom Properties
+
+Token mixins accept `@content` blocks to override specific CSS custom properties:
+
+```scss
+@use '@broxus/react-uikit/styles/tokens';
+
+:root {
+    @include tokens.global-tokens {
+        --global-primary-color: #ad6d60;
+        --global-background: #0d0d0d;
+    }
+    @include tokens.button-tokens {
+        --button-round-border-radius: var(--global-small-border-radius);
+        --button-disabled-background: rgba(173, 109, 96, 6%);
+    }
+    // Components without overrides — just include with defaults:
+    @include tokens.card-tokens;
+    @include tokens.alert-tokens;
+}
+```
+
+### Hook Mixins
+
+Inject custom CSS into component render points. Define mixins and register them via the `$mixins` map:
+
+```scss
+// _mixins.scss
+@mixin hook-button() {
+    font-weight: 500;
+    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
+}
+
+// index.scss
+@use 'sass:meta';
+@use 'mixins';
+
+@use '@broxus/react-uikit/styles/import' as * with (
+    $components: (all: true),
+    $mixins: (
+        'hook-button': meta.get-mixin('hook-button', 'mixins'),
+    ),
+);
+```
+
+Hook naming convention: `hook-{component}`, `hook-{component}-{modifier}`, `hook-{component}-{state}`,
+`hook-{component}-misc`, `hook-inverse-{component}`.
+
+### Color Mode
+
+The `$*-color-mode` variables control text color direction, not the theme itself:
+
+- `light` — light text on dark background
+- `dark` — dark text on light background
+
+```scss
+@forward '@broxus/react-uikit/styles/variables' with (
+    $section-default-color-mode: light,   // dark background, light text
+    $section-primary-color-mode: dark,    // primary background, dark text
+    $card-primary-color-mode: dark,
+    $navbar-color-mode: light,
+);
+```
+
+## Key Conventions
+
+- **Compound components** — complex components use dot-notation: `Card.Header`, `Flex.Item`, `Nav.Sub`, etc.
+- **Responsive breakpoints** — layout and typography components support `s`, `m`, `l`, `xl` breakpoint configs
+- **Standard sizes** — `xsmall | small | medium | large | xlarge`
+- **Form states** — `success | warning | danger | blank`
+- **RTL support** — all components support `direction` prop or global config via `ConfigProvider`
+- **Selective import** — SCSS entry points accept a `$components` map to include only needed component styles

package/dist/assets/accordion.css

@@ -129,7 +129,4 @@
   --accordion-icon-margin-right: var(--global-small-margin);
   --accordion-icon-color: var(--global-color);
   --accordion-icon-size: 1.4rem;
-  --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
-  --inverse-accordion-title-hover-color: var(--inverse-global-color);
-  --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
-}
+}

package/dist/assets/alert.css

@@ -9,6 +9,10 @@
   padding-right: var(--alert-padding-right);
   position: relative;
 }
+.uk-alert a:not([class]) {
+  color: inherit;
+  text-decoration: underline;
+}
 
 /* Add margin if adjacent element */
 * + .uk-alert {
@@ -101,7 +105,30 @@
   padding-top: 0;
 }
 
+/*
+ * Content
+ */
+.uk-alert h1,
+.uk-alert h2,
+.uk-alert h3,
+.uk-alert h4,
+.uk-alert h5,
+.uk-alert h6 {
+  color: inherit;
+}
+
+.uk-alert a:not([class]) {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.uk-alert a:not([class]):hover {
+  color: inherit;
+  text-decoration: underline;
+}
+
 :root {
+  --alert-border-radius: var(--global-border-radius);
   --alert-margin-vertical: var(--global-margin);
   --alert-padding: var(--global-small-gutter);
   --alert-padding-right: calc(var(--alert-padding) + 15px);
@@ -117,4 +144,4 @@
   --alert-warning-color: var(--global-warning-color);
   --alert-danger-background: rgb(250.2, 178.68, 168.6);
   --alert-danger-color: var(--global-danger-color);
-}
+}

package/dist/assets/align.css

@@ -37,7 +37,7 @@
 }
 
 /* Phone landscape and bigger */
-@media (min-width: 640px) {
+@media (--media-breakpoint-small) {
   .uk-align-left\@s {
     float: left;
     margin-right: var(--align-margin-horizontal);
@@ -50,7 +50,7 @@
   }
 }
 /* Tablet landscape and bigger */
-@media (min-width: 960px) {
+@media (--media-breakpoint-medium) {
   .uk-align-left\@m {
     float: left;
     margin-right: var(--align-margin-horizontal);
@@ -63,7 +63,7 @@
   }
 }
 /* Desktop and bigger */
-@media (min-width: 1200px) {
+@media (--media-breakpoint-large) {
   .uk-align-left\@l {
     float: left;
     margin-top: 0;
@@ -86,7 +86,7 @@
   }
 }
 /* Large screen and bigger */
-@media (min-width: 1600px) {
+@media (--media-breakpoint-xlarge) {
   .uk-align-left\@xl {
     float: left;
     margin-right: var(--align-margin-horizontal-l);
@@ -102,4 +102,4 @@
   --align-margin-horizontal: var(--global-gutter);
   --align-margin-horizontal-l: var(--global-medium-gutter);
   --align-margin-vertical: var(--global-gutter);
-}
+}

package/dist/assets/animation.css

@@ -384,4 +384,4 @@
   --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
   --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-}
+}

package/dist/assets/article.css

@@ -26,7 +26,7 @@
 }
 
 /* Tablet landscape and bigger */
-@media (min-width: 960px) {
+@media (--media-breakpoint-medium) {
   .uk-article-title {
     font-size: var(--article-title-font-size-m);
   }
@@ -47,5 +47,4 @@
   --article-meta-font-size: var(--global-small-font-size);
   --article-meta-line-height: 1.4;
   --article-meta-color: var(--global-muted-color);
-  --inverse-article-meta-color: var(--inverse-global-muted-color);
-}
+}

package/dist/assets/background.css

@@ -115,25 +115,25 @@
 /* Image
  ========================================================================== */
 /* Phone portrait and smaller */
-@media (max-width: 639px) {
+@media (--media-breakpoint-xsmall-max) {
   .uk-background-image\@s {
     background-image: none !important;
   }
 }
 /* Phone landscape and smaller */
-@media (max-width: 959px) {
+@media (--media-breakpoint-small-max) {
   .uk-background-image\@m {
     background-image: none !important;
   }
 }
 /* Tablet landscape and smaller */
-@media (max-width: 1199px) {
+@media (--media-breakpoint-medium-max) {
   .uk-background-image\@l {
     background-image: none !important;
   }
 }
 /* Desktop and smaller */
-@media (max-width: 1599px) {
+@media (--media-breakpoint-large-max) {
   .uk-background-image\@xl {
     background-image: none !important;
   }
@@ -206,4 +206,4 @@
   --primary-background: var(--global-primary-background);
   --secondary-background: var(--global-secondary-background);
   --tertiary-background: var(--global-tertiary-background);
-}
+}

package/dist/assets/badge.css

@@ -40,7 +40,4 @@
   --badge-color: var(--global-inverse-color);
   --badge-font-size: var(--global-small-font-size);
   --badge-hover-color: var(--global-inverse-color);
-  --inverse-badge-background: var(--inverse-global-primary-background);
-  --inverse-badge-color: var(--inverse-global-inverse-color);
-  --inverse-badge-hover-color: var(--inverse-global-inverse-color);
-}
+}

package/dist/assets/base.css

@@ -294,7 +294,7 @@ h6, .uk-h6 {
 }
 
 /* Tablet landscape and bigger */
-@media (min-width: 960px) {
+@media (--media-breakpoint-medium) {
   h1, .uk-h1 {
     font-size: var(--base-h1-font-size-m);
   }
@@ -558,14 +558,4 @@ template {
   --uk-breakpoint-m: var(--breakpoint-medium);
   --uk-breakpoint-l: var(--breakpoint-large);
   --uk-breakpoint-xl: var(--breakpoint-xlarge);
-  --inverse-base-color: var(--inverse-global-color);
-  --inverse-base-link-color: var(--inverse-global-emphasis-color);
-  --inverse-base-link-hover-color: var(--inverse-global-emphasis-color);
-  --inverse-base-code-color: var(--inverse-global-color);
-  --inverse-base-em-color: var(--inverse-global-emphasis-color);
-  --inverse-base-heading-color: var(--inverse-global-emphasis-color);
-  --inverse-base-hr-border: var(--inverse-global-color);
-  --inverse-base-focus-outline: var(--inverse-global-emphasis-color);
-  --inverse-base-blockquote-color: var(--inverse-global-emphasis-color);
-  --inverse-base-blockquote-footer-color: var(--inverse-global-color);
-}
+}

package/dist/assets/breadcrumb.css

@@ -62,8 +62,4 @@
   --breadcrumb-divider-margin-horizontal: 20px;
   --breadcrumb-divider-font-size: var(--breadcrumb-item-font-size);
   --breadcrumb-divider-color: var(--global-muted-color);
-  --inverse-breadcrumb-item-color: var(--inverse-global-muted-color);
-  --inverse-breadcrumb-item-hover-color: var(--inverse-global-color);
-  --inverse-breadcrumb-item-active-color: var(--inverse-global-color);
-  --inverse-breadcrumb-divider-color: var(--inverse-global-muted-color);
-}
+}

package/dist/assets/button.css

@@ -368,6 +368,17 @@
   vertical-align: middle; /* 2 */
 }
 
+.uk-button-group .uk-button-circle:not(:last-child),
+.uk-button-group .uk-button-round:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.uk-button-group .uk-button-circle:not(:first-child),
+.uk-button-group .uk-button-round:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
 :root {
   --button-line-height: var(--global-control-height);
   --button-xsmall-line-height: var(--global-control-xsmall-height);
@@ -452,40 +463,4 @@
   --button-link-hover-color: var(--global-link-hover-color);
   --button-link-hover-text-decoration: underline;
   --button-link-disabled-color: var(--global-muted-color);
-  --inverse-button-color: var(--inverse-global-inverse-color);
-  --inverse-button-default-background: var(--inverse-global-primary-background);
-  --inverse-button-default-color: var(--inverse-global-inverse-color);
-  --inverse-button-default-hover-background: rgb(242.25, 242.25, 242.25);
-  --inverse-button-default-hover-color: var(--inverse-global-inverse-color);
-  --inverse-button-default-active-background: rgb(229.5, 229.5, 229.5);
-  --inverse-button-default-active-color: var(--inverse-global-inverse-color);
-  --inverse-button-primary-background: var(--inverse-global-primary-background);
-  --inverse-button-primary-color: var(--inverse-global-inverse-color);
-  --inverse-button-primary-hover-background: rgb(242.25, 242.25, 242.25);
-  --inverse-button-primary-hover-color: var(--inverse-global-inverse-color);
-  --inverse-button-primary-active-background: rgb(229.5, 229.5, 229.5);
-  --inverse-button-primary-active-color: var(--inverse-global-inverse-color);
-  --inverse-button-secondary-background: var(--inverse-global-primary-background);
-  --inverse-button-secondary-color: var(--inverse-global-inverse-color);
-  --inverse-button-secondary-hover-background: rgb(242.25, 242.25, 242.25);
-  --inverse-button-secondary-hover-color: var(--inverse-global-inverse-color);
-  --inverse-button-secondary-active-background: rgb(229.5, 229.5, 229.5);
-  --inverse-button-secondary-active-color: var(--inverse-global-inverse-color);
-  --inverse-button-tertiary-background: var(--inverse-global-primary-background);
-  --inverse-button-tertiary-color: var(--inverse-global-inverse-color);
-  --inverse-button-tertiary-hover-background: rgb(242.25, 242.25, 242.25);
-  --inverse-button-tertiary-hover-color: var(--inverse-global-inverse-color);
-  --inverse-button-tertiary-active-background: rgb(229.5, 229.5, 229.5);
-  --inverse-button-tertiary-active-color: var(--inverse-global-inverse-color);
-  --inverse-button-danger-background: var(--button-danger-background);
-  --inverse-button-danger-color: var(--button-danger-color);
-  --inverse-button-danger-hover-background: var(--button-danger-hover-background);
-  --inverse-button-danger-hover-color: var(--button-danger-hover-color);
-  --inverse-button-danger-active-background: var(--button-danger-active-background);
-  --inverse-button-danger-active-color: var(--button-danger-active-color);
-  --inverse-button-text-color: var(--inverse-global-emphasis-color);
-  --inverse-button-text-hover-color: var(--inverse-global-muted-color);
-  --inverse-button-text-disabled-color: var(--inverse-global-muted-color);
-  --inverse-button-link-color: var(--inverse-global-emphasis-color);
-  --inverse-button-link-hover-color: var(--inverse-global-muted-color);
-}
+}

package/dist/assets/card.css

@@ -24,7 +24,7 @@
 }
 
 /* Desktop and bigger */
-@media (min-width: 1200px) {
+@media (--media-breakpoint-large) {
   .uk-card-body {
     padding: var(--card-body-padding-vertical-l) var(--card-body-padding-horizontal-l);
   }
@@ -187,7 +187,7 @@
  * Large
  */
 /* Desktop and bigger */
-@media (min-width: 1200px) {
+@media (--media-breakpoint-large) {
   .uk-card-large.uk-card-body,
   .uk-card-large .uk-card-body {
     padding: var(--card-large-body-padding-vertical-l) var(--card-large-body-padding-horizontal-l);
@@ -250,6 +250,4 @@
   --card-large-header-padding-vertical-l: 35px;
   --card-large-footer-padding-horizontal-l: var(--global-large-gutter);
   --card-large-footer-padding-vertical-l: 35px;
-  --inverse-card-badge-background: var(--inverse-global-primary-background);
-  --inverse-card-badge-color: var(--inverse-global-inverse-color);
-}
+}

package/dist/assets/checkbox.css

@@ -237,4 +237,4 @@
   --checkbox-checked-control-background: rgba(30, 135, 240, 0.15);
   --checkbox-checked-control-color: #1e87f0;
   --checkbox-checked-control-padding: 10px;
-}
+}

package/dist/assets/close.css

@@ -19,6 +19,4 @@
 :root {
   --close-color: var(--global-muted-color);
   --close-hover-color: var(--global-color);
-  --inverse-close-color: var(--inverse-global-muted-color);
-  --inverse-close-hover-color: var(--inverse-global-color);
-}
+}