Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Refactor SCSS variables to use color.adjust for improved color manipulation (#2068)

Browse Source 
* Refactor dark mode SCSS variables to use color.adjust for improved color manipulation

* Refactor dark mode SCSS variables to remove unnecessary color space parameter for cleaner code

* Update sass dependency to version 1.78.0

* Create sour-dragons-eat.md
This commit is contained in:
Paweł Kuna
2025-01-18 14:33:14 +01:00
committed by GitHub
parent 0e4bf5fc73
commit 875cafa474
6 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/sour-dragons-eat.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Refactor SCSS variables to use `color.adjust` for improved color manipulation

2
package.json
View File

@@ -179,7 +179,7 @@
"rollup": "2.79.2", "rollup": "2.79.2",
"rollup-plugin-babel": "^4.4.0", "rollup-plugin-babel": "^4.4.0",
"rollup-plugin-cleanup": "^3.2.1", "rollup-plugin-cleanup": "^3.2.1",
"sass": "1.71.1", "sass": "1.78.0",
"star-rating.js": "^4.3.1", "star-rating.js": "^4.3.1",
"tinymce": "^7.6.0", "tinymce": "^7.6.0",
"tom-select": "^2.4.1", "tom-select": "^2.4.1",

8
pnpm-lock.yaml generated
View File

@@ -164,8 +164,8 @@ devDependencies:
specifier: ^3.2.1 specifier: ^3.2.1
version: 3.2.1(rollup@2.79.2) version: 3.2.1(rollup@2.79.2)
sass: sass:
specifier: 1.71.1 specifier: 1.78.0
version: 1.71.1 version: 1.78.0
star-rating.js: star-rating.js:
specifier: ^4.3.1 specifier: ^4.3.1
version: 4.3.1 version: 4.3.1
@@ -7694,8 +7694,8 @@ packages:
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
dev: true dev: true
/sass@1.71.1: /sass@1.78.0:
resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==} resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:

12
src/scss/_variables-dark.scss
View File

@@ -1,12 +1,14 @@
@use "sass:color";
// //
// Dark mode // Dark mode
// //
$darken-dark: darken($dark, 2%) !default; $darken-dark: color.adjust($dark, $lightness: -2%) !default;
$lighten-dark: lighten($dark, 2%) !default; $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
$border-color-dark: lighten($dark, 8%) !default; $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
$border-color-translucent-dark: rgba(72, 110, 149, .14) !default; $border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
$border-dark-color-dark: lighten($dark, 4%) !default; $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
$border-active-color-dark: lighten($dark, 12%) !default; $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
//new bootsrap variables //new bootsrap variables
$body-color-dark: $gray-200 !default; $body-color-dark: $gray-200 !default;

4
src/scss/layout/_dark.scss
View File

@@ -1,3 +1,5 @@
@use "sass:color";
// stylelint-disable declaration-no-important // stylelint-disable declaration-no-important
body { body {
@@ -40,7 +42,7 @@ body {
--#{$prefix}bg-surface-secondary: #{$lighten-dark}; --#{$prefix}bg-surface-secondary: #{$lighten-dark};
--#{$prefix}bg-surface-tertiary: #{$darken-dark}; --#{$prefix}bg-surface-tertiary: #{$darken-dark};
--#{$prefix}link-color: #{lighten($primary, 8%)}; --#{$prefix}link-color: #{color.adjust($primary, $lightness: 8%)};
--#{$prefix}link-hover-color: #{$primary}; --#{$prefix}link-hover-color: #{$primary};
--#{$prefix}active-bg: #{$lighten-dark}; --#{$prefix}active-bg: #{$lighten-dark};

4
src/scss/ui/_buttons.scss
View File

@@ -1,3 +1,5 @@
@use "sass:color";
// //
// Button // Button
// //
@@ -51,7 +53,7 @@
} }
.btn-link { .btn-link {
color: #{lighten($primary, 5%)}; color: #{color.adjust($primary, $lightness: 5%)};
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;