@neoptocom/neopto-ui 0.9.9 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/styles/library.css +62 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neoptocom/neopto-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
|
|
6
6
|
"keywords": [
|
package/src/styles/library.css
CHANGED
|
@@ -33,3 +33,65 @@
|
|
|
33
33
|
.btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
|
|
34
34
|
.btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }
|
|
35
35
|
.btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }
|
|
36
|
+
|
|
37
|
+
/* Unified Scrollbar Styles */
|
|
38
|
+
:root {
|
|
39
|
+
--scrollbar-width: 6px;
|
|
40
|
+
--scrollbar-thumb: #797980;
|
|
41
|
+
--scrollbar-thumb-hover: #9C9C9C;
|
|
42
|
+
--scrollbar-track: transparent;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark {
|
|
46
|
+
--scrollbar-thumb: #4b4d59;
|
|
47
|
+
--scrollbar-thumb-hover: #797980;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Default scrollbar - applies to most scrollable containers */
|
|
51
|
+
* {
|
|
52
|
+
scrollbar-width: thin;
|
|
53
|
+
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
*::-webkit-scrollbar {
|
|
57
|
+
width: var(--scrollbar-width);
|
|
58
|
+
height: var(--scrollbar-width);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
*::-webkit-scrollbar-track {
|
|
62
|
+
background: var(--scrollbar-track);
|
|
63
|
+
border-radius: 1rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
*::-webkit-scrollbar-thumb {
|
|
67
|
+
background: var(--scrollbar-thumb);
|
|
68
|
+
border-radius: 1rem;
|
|
69
|
+
border: 2px solid transparent;
|
|
70
|
+
background-clip: padding-box;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
74
|
+
background: var(--scrollbar-thumb-hover);
|
|
75
|
+
background-clip: padding-box;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Scrollbar width variants */
|
|
79
|
+
.scrollbar-thin::-webkit-scrollbar {
|
|
80
|
+
width: 6px;
|
|
81
|
+
height: 6px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.scrollbar-medium::-webkit-scrollbar {
|
|
85
|
+
width: 8px;
|
|
86
|
+
height: 8px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Hide scrollbar utility */
|
|
90
|
+
.hide-scrollbar {
|
|
91
|
+
scrollbar-width: none;
|
|
92
|
+
-ms-overflow-style: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.hide-scrollbar::-webkit-scrollbar {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|