mirror of
https://github.com/tabler/tabler.git
synced 2026-08-28 12:56:24 +04:00
codecalm
6481499ccd
- navbar-folded / navbar-folded-hover with flyout submenus and persisted pin toggle - sidebar refresh: light by default, 16rem wide, rounded inset pills, zero-jump fold - demo pages, Theme Settings section, docs and btn-action usage rule
73 lines
2.7 KiB
SCSS
73 lines
2.7 KiB
SCSS
@use '../config' as *;
|
|
|
|
:root,
|
|
:host {
|
|
// No fixed root font-size: rem sizing must track the user's browser preference (WCAG 1.4.4)
|
|
height: 100%;
|
|
}
|
|
|
|
:root,
|
|
:host,
|
|
[data-bs-theme='light'],
|
|
[data-theme='light'] {
|
|
color-scheme: light;
|
|
--spacer: var(--spacer-2);
|
|
|
|
--bg-surface: light-dark(var(--bg-surface-primary), var(--gray-800));
|
|
--bg-surface-primary: var(--white);
|
|
--bg-surface-secondary: light-dark(var(--gray-50), var(--gray-900));
|
|
--bg-surface-tertiary: light-dark(var(--gray-50), var(--gray-800));
|
|
--bg-surface-dark: var(--gray-900);
|
|
--bg-surface-inverted: light-dark(var(--gray-900), var(--gray-100));
|
|
--bg-forms: light-dark(var(--bg-surface), var(--gray-900));
|
|
--bg-forms-disabled: light-dark(var(--bg-surface-secondary), var(--gray-800));
|
|
|
|
--text-inverted: light-dark(var(--gray-100), var(--gray-800));
|
|
|
|
--body-color: light-dark(var(--gray-700), var(--gray-200));
|
|
--body-bg: light-dark(var(--bg-surface-secondary), var(--gray-900));
|
|
|
|
// Same color-mix() expression in both modes — no light-dark() needed.
|
|
--link-color: var(--primary);
|
|
--link-hover-color: color-mix(in srgb, var(--primary), #000 20%);
|
|
|
|
--secondary: light-dark(var(--gray-500), var(--gray-400));
|
|
--tertiary: var(--gray-400);
|
|
|
|
--border-color: light-dark(#{$border-color}, var(--gray-700));
|
|
--border-color-translucent: light-dark(#{$border-color-translucent}, var(--dark-mode-border-color-translucent));
|
|
--border-dark-color: light-dark(#{$border-dark-color}, var(--dark-mode-border-dark-color));
|
|
--border-dark-color-translucent: #{$border-dark-color-translucent};
|
|
--border-light-color: #{$border-light-color};
|
|
--border-light-color-translucent: #{$border-light-color-translucent};
|
|
--border-active-color: light-dark(#{$border-active-color}, var(--dark-mode-border-active-color));
|
|
--border-active-color-translucent: #{$border-active-color-translucent};
|
|
|
|
--icon-color: #{$icon-color};
|
|
|
|
--active-bg: light-dark(#{$active-bg}, #{$lighten-dark});
|
|
|
|
--disabled-bg: #{$disabled-bg};
|
|
// $disabled-color already derives from var(--body-color) at compute time, so it
|
|
// adapts to dark mode on its own — no light-dark() or dark-block override needed.
|
|
--disabled-color: #{$disabled-color};
|
|
|
|
--code-color: #{$code-color};
|
|
--code-bg: #{$code-bg};
|
|
|
|
--dark-mode-border-color: #{$border-color-dark};
|
|
--dark-mode-border-color-translucent: #{$border-color-translucent-dark};
|
|
--dark-mode-border-active-color: #{$border-active-color-dark};
|
|
--dark-mode-border-dark-color: #{$border-dark-color-dark};
|
|
|
|
--page-padding: #{$page-padding};
|
|
--page-padding-y: #{$page-padding-y};
|
|
|
|
--sidebar-width: #{$sidebar-width};
|
|
--sidebar-folded-width: #{$sidebar-folded-width};
|
|
|
|
@include media-breakpoint-down($cards-grid-breakpoint) {
|
|
--page-padding: #{$page-padding-sm};
|
|
}
|
|
}
|