Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-07 21:30:06 +04:00
Code Issues Projects Releases Wiki Activity

Add theme settings (#2054)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-23 20:52:06 +01:00
committed by GitHub
parent 215eaa4acb
commit 9bbcb99b90
52 changed files with 1459 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/scss/ui/_buttons.scss
View File

@@ -10,7 +10,7 @@
--#{$prefix}btn-border-color: #{$btn-border-color};
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
--#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-bg};
--#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -72,7 +72,7 @@
//
// Button color variations
//
@each $color, $value in $theme-colors {
@each $color, $value in map-merge($theme-colors, $social-colors) {
.btn-#{$color} {
@if $color == 'dark' {
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
@@ -84,7 +84,7 @@
--#{$prefix}btn-active-border-color: transparent;
}
--#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg, #{$white});
--#{$prefix}btn-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
@@ -92,7 +92,7 @@
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
}
.btn-outline-#{$color} {
@@ -107,21 +107,19 @@
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
}
}
@each $name, $color in $theme-colors {
.btn-ghost-#{$name} {
--#{$prefix}btn-color: var(--#{$prefix}#{$name});
.btn-ghost-#{$color} {
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-fg);
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
--#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
--#{$prefix}btn-active-color: var(--#{$prefix}#{$name}-fg);
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$name});
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name});
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}gradient: none;
@@ -186,9 +184,9 @@
.btn-floating {
position: fixed;
z-index: $zindex-fixed;
bottom: 1.5rem;
right: 1.5rem;
border-radius: $border-radius-pill;
bottom: 1rem;
left: 1rem;
box-shadow: var(--#{$prefix}shadow-dropdown);
}
//

4
core/scss/ui/_forms.scss
View File

@@ -68,7 +68,7 @@ Form control
*/
.form-control {
&:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
color: var(--#{$prefix}body-color);
-webkit-text-fill-color: var(--#{$prefix}body-color);
}
@@ -125,7 +125,7 @@ Form control
.form-fieldset {
padding: 1rem;
margin-bottom: 1rem;
background: var(--#{$prefix}body-bg);
background: var(--#{$prefix}bg-surface-secondary);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
}

2
core/scss/ui/_offcanvas.scss
View File

@@ -1,5 +1,5 @@
.offcanvas-header {
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
.offcanvas-footer {

2
core/scss/ui/_tags.scss
View File

@@ -7,7 +7,7 @@
border-radius: var(--#{$prefix}border-radius);
padding: 0 0.5rem;
background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}box-shadow-input);
box-shadow: var(--#{$prefix}shadow-input);
gap: .5rem;
.btn-close {

5
core/scss/ui/_type.scss
View File

@@ -6,6 +6,11 @@
a {
text-decoration-skip-ink: auto;
color: color-mix(in srgb, transparent, var(--#{$prefix}link-color) var(--#{$prefix}link-opacity, 100%));
&:hover {
color: color-mix(in srgb, transparent, var(--#{$prefix}link-hover-color) var(--#{$prefix}link-opacity, 100%));
}
}
h1,