fix(scrollbar.style): various

.changeset/silly-dragons-buy.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Apply various fixes to the new scrollbar style.

src/tasty/__snapshots__/tasty.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`tasty() API should allow multiple wrapping 1`] = `
 }
 
 .c0.c0 {
-  color: var(--white-color, rgb(0 0 0 / 1));
+  color: var(--white-color);
   --current-color: var(--white-color, white);
   --current-color-rgb: var(--white-color-rgb);
 }
@@ -120,7 +120,7 @@ exports[`tasty() API should create element styles 1`] = `
 }
 
 .c0.c0[data-is-modified] [data-element="Element"] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -190,7 +190,7 @@ exports[`tasty() API should fallback to default variant 1`] = `
 }
 
 .c0.c0 {
-  color: var(--white-color, rgb(0 0 0 / 1));
+  color: var(--white-color);
   --current-color: var(--white-color, white);
   --current-color-rgb: var(--white-color-rgb);
 }
@@ -226,7 +226,7 @@ exports[`tasty() API should merge element styles 1`] = `
 }
 
 .c0.c0[data-is-modified] [data-element="Element"] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -263,7 +263,7 @@ exports[`tasty() API should merge styles 1`] = `
 }
 
 .c0.c0[data-is-modified] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -300,7 +300,7 @@ exports[`tasty() API should merge styles in custom prop 1`] = `
 }
 
 .c0.c0[data-is-modified] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -367,7 +367,7 @@ exports[`tasty() API should support camelCase modifiers 1`] = `
 }
 
 .c0.c0[data-is-somehow-modified] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -400,7 +400,7 @@ exports[`tasty() API should support kebab-case modifiers 1`] = `
 }
 
 .c0.c0[data-is-somehow-modified] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }
@@ -433,7 +433,7 @@ exports[`tasty() API should support modifiers 1`] = `
 }
 
 .c0.c0[data-is-modified] {
-  color: var(--purple-color, rgb(0 0 0 / 1));
+  color: var(--purple-color);
   --current-color: var(--purple-color, purple);
   --current-color-rgb: var(--purple-color-rgb);
 }

src/tasty/styles.test.ts

@@ -115,70 +115,4 @@ describe('Tasty style tests', () => {
       'margin-bottom': '1rem',
     });
   });
-
-  it('should return undefined for undefined scrollbar', () => {
-    expect(scrollbarStyle({})).toBeUndefined();
-  });
-
-  it('should return correct styles for two colors', () => {
-    expect(scrollbarStyle({ scrollbar: '#dark #clear' })).toEqual({
-      'scrollbar-color': 'var(--dark-color) var(--clear-color)',
-      '&::-webkit-scrollbar-corner': {
-        background: 'var(--clear-color)',
-      },
-    });
-  });
-
-  it('should return correct styles for `thin` scrollbar', () => {
-    expect(scrollbarStyle({ scrollbar: 'thin' })).toEqual({
-      'scrollbar-width': 'thin',
-      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
-    });
-  });
-
-  it('should return correct styles for `none` scrollbar', () => {
-    expect(scrollbarStyle({ scrollbar: 'none' })).toEqual({
-      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
-      '&::-webkit-scrollbar': {
-        width: 'none',
-        height: 'none',
-      },
-    });
-  });
-
-  it('should handle custom overflow with scrollbar', () => {
-    expect(scrollbarStyle({ scrollbar: 'always', overflow: 'scroll' })).toEqual(
-      {
-        overflow: 'scroll',
-        'scrollbar-gutter': 'always',
-        'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
-      },
-    );
-  });
-
-  it('should handle styled scrollbar', () => {
-    expect(scrollbarStyle({ scrollbar: 'styled' })).toEqual({
-      'scrollbar-width': 'thin',
-      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
-      '&::-webkit-scrollbar': {
-        width: '8px',
-        height: '8px',
-        background: 'var(--scrollbar-track-color)',
-        transition:
-          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
-      },
-      '&::-webkit-scrollbar-thumb': {
-        background: 'var(--scrollbar-thumb-color)',
-        borderRadius: '8px',
-        minHeight: '24px',
-        transition:
-          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
-      },
-      '&::-webkit-scrollbar-corner': {
-        background: 'var(--scrollbar-track-color)',
-        transition:
-          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
-      },
-    });
-  });
 });

src/tasty/styles/scrollbar.test.ts

@@ -0,0 +1,109 @@
+import { scrollbarStyle } from './scrollbar';
+
+describe('scrollbarStyle', () => {
+  it('returns undefined when scrollbar is not defined', () => {
+    expect(scrollbarStyle({})).toBeUndefined();
+  });
+
+  it('handles boolean true value as thin', () => {
+    const result = scrollbarStyle({ scrollbar: true });
+    expect(result['scrollbar-width']).toBe('thin');
+  });
+
+  it('handles number value as size', () => {
+    const result = scrollbarStyle({ scrollbar: 10 });
+    expect(result['&::-webkit-scrollbar']['width']).toBe('10');
+    expect(result['&::-webkit-scrollbar']['height']).toBe('10');
+  });
+
+  it('handles "none" modifier', () => {
+    const result = scrollbarStyle({ scrollbar: 'none' });
+    expect(result['scrollbar-width']).toBe('none');
+    expect(result['scrollbar-color']).toBe('transparent transparent');
+    expect(result['&::-webkit-scrollbar']['width']).toBe('0px');
+  });
+
+  it('handles "styled" modifier with proper defaults', () => {
+    const result = scrollbarStyle({ scrollbar: 'styled' });
+    expect(result['scrollbar-width']).toBe('thin');
+    expect(result['&::-webkit-scrollbar']['width']).toBe('8px');
+    expect(result['&::-webkit-scrollbar-thumb']['border-radius']).toBe('8px');
+    expect(result['&::-webkit-scrollbar-thumb']['min-height']).toBe('24px');
+  });
+
+  it('handles custom colors', () => {
+    const result = scrollbarStyle({ scrollbar: '#red #blue #green' });
+    expect(result['scrollbar-color']).toBe(
+      'var(--red-color) var(--blue-color)',
+    );
+    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+      'var(--blue-color)',
+    );
+    expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
+      'var(--red-color)',
+    );
+    expect(result['&::-webkit-scrollbar-corner']['background']).toBe(
+      'var(--green-color)',
+    );
+  });
+
+  it('handles "always" modifier with overflow', () => {
+    const result = scrollbarStyle({ scrollbar: 'always', overflow: 'auto' });
+    expect(result['overflow']).toBe('auto');
+    expect(result['scrollbar-gutter']).toBe('stable');
+    expect(result['&::-webkit-scrollbar']['display']).toBe('block');
+  });
+
+  it('combines modifiers correctly', () => {
+    const result = scrollbarStyle({ scrollbar: 'thin styled #red' });
+    expect(result['scrollbar-width']).toBe('thin');
+    expect(result['scrollbar-color']).toBe(
+      'var(--red-color) var(--scrollbar-track-color, transparent)',
+    );
+    expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
+      'var(--red-color)',
+    );
+  });
+
+  it('applies custom colors to styled scrollbars', () => {
+    const result = scrollbarStyle({
+      scrollbar: 'styled #purple #dark #light-grey',
+    });
+    expect(result['scrollbar-color']).toBe(
+      'var(--purple-color) var(--dark-color)',
+    );
+    expect(result['&::-webkit-scrollbar']['background']).toBe(
+      'var(--dark-color)',
+    );
+    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+      'var(--dark-color)',
+    );
+    expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
+      'var(--purple-color)',
+    );
+    expect(result['&::-webkit-scrollbar-corner']['background']).toBe(
+      'var(--light-grey-color)',
+    );
+  });
+
+  it('applies partial custom colors with defaults', () => {
+    const result = scrollbarStyle({ scrollbar: 'styled #danger' });
+    // Only thumb color specified, track should use default
+    expect(result['scrollbar-color']).toBe(
+      'var(--danger-color) var(--scrollbar-track-color, transparent)',
+    );
+    expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
+      'var(--danger-color)',
+    );
+    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+      'var(--scrollbar-track-color, transparent)',
+    );
+  });
+
+  it('ensures all CSS properties are kebab-cased', () => {
+    const result = scrollbarStyle({ scrollbar: 'styled thin' });
+    // Check that camelCase properties are converted to kebab-case
+    expect(result['&::-webkit-scrollbar-thumb']['border-radius']).toBe('8px');
+    expect(result['&::-webkit-scrollbar-thumb']['min-height']).toBe('24px');
+  });
+});