@helpwave/hightide 0.3.0 → 0.5.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/dist/index.d.mts +107 -50
- package/dist/index.d.ts +107 -50
- package/dist/index.js +849 -501
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +815 -468
- package/dist/index.mjs.map +1 -1
- package/dist/style/globals.css +463 -461
- package/dist/style/uncompiled/theme/breakpoints.css +0 -1
- package/dist/style/uncompiled/theme/{colors-component.css → colors/component.css} +1 -2
- package/dist/style/uncompiled/theme/colors/index.css +5 -0
- package/dist/style/uncompiled/theme/{colors-semantic.css → colors/semantic.css} +2 -3
- package/dist/style/uncompiled/theme/colors/utilities.css +65 -0
- package/dist/style/uncompiled/theme/components.css +98 -19
- package/dist/style/uncompiled/theme/index.css +3 -5
- package/dist/style/uncompiled/theme/shadow.css +7 -0
- package/dist/style/uncompiled/utitlity/coloring.css +0 -68
- package/dist/style/uncompiled/utitlity/shadow.css +0 -10
- package/package.json +18 -17
- /package/dist/style/uncompiled/theme/{colors-basic.css → colors/basic.css} +0 -0
- /package/dist/style/uncompiled/theme/{variants.css → colors/variants.css} +0 -0
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
@import './
|
|
2
|
-
@import './colors-basic.css';
|
|
1
|
+
@import './basic.css';
|
|
3
2
|
|
|
4
3
|
/*
|
|
5
4
|
* default light-theme sematic colors
|
|
@@ -94,7 +93,7 @@
|
|
|
94
93
|
--color-primary: var(--color-purple-400);
|
|
95
94
|
|
|
96
95
|
--color-neutral: var(--color-gray-700);
|
|
97
|
-
--color-neutral-hover: var(--color-gray-
|
|
96
|
+
--color-neutral-hover: var(--color-gray-600);
|
|
98
97
|
--color-neutral-outline-hover: var(--color-gray-200);
|
|
99
98
|
}
|
|
100
99
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@utility primary {
|
|
2
|
+
@apply reset-coloring-variables;
|
|
3
|
+
--coloring-color: var(--color-primary);
|
|
4
|
+
--coloring-on-color: var(--color-on-primary);
|
|
5
|
+
--coloring-hover: var(--color-primary-hover);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@utility secondary {
|
|
9
|
+
@apply reset-coloring-variables;
|
|
10
|
+
--coloring-color: var(--color-secondary);
|
|
11
|
+
--coloring-on-color: var(--color-on-secondary);
|
|
12
|
+
--coloring-hover: var(--color-secondary-hover);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@utility positive {
|
|
16
|
+
@apply reset-coloring-variables;
|
|
17
|
+
--coloring-color: var(--color-positive);
|
|
18
|
+
--coloring-on-color: var(--color-on-positive);
|
|
19
|
+
--coloring-hover: var(--color-positive-hover);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@utility negative {
|
|
23
|
+
@apply reset-coloring-variables;
|
|
24
|
+
--coloring-color: var(--color-negative);
|
|
25
|
+
--coloring-on-color: var(--color-on-negative);
|
|
26
|
+
--coloring-hover: var(--color-negative-hover);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@utility warning {
|
|
30
|
+
@apply reset-coloring-variables;
|
|
31
|
+
--coloring-color: var(--color-warning);
|
|
32
|
+
--coloring-on-color: var(--color-on-warning);
|
|
33
|
+
--coloring-hover: var(--color-warning-hover);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@utility neutral {
|
|
37
|
+
@apply reset-coloring-variables;
|
|
38
|
+
--coloring-color: var(--color-neutral);
|
|
39
|
+
--coloring-on-color: var(--color-on-neutral);
|
|
40
|
+
--coloring-hover: var(--color-neutral-hover);
|
|
41
|
+
--coloring-text: var(--color-neutral-text);
|
|
42
|
+
--coloring-text-hover: var(--color-neutral-text-hover);
|
|
43
|
+
--coloring-outline: var(--color-neutral-outline);
|
|
44
|
+
--coloring-outline-hover: var(--color-neutral-outline-hover);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@utility disabled {
|
|
48
|
+
@apply reset-coloring-variables;
|
|
49
|
+
--coloring-color: var(--color-disabled);
|
|
50
|
+
--coloring-on-color: var(--color-on-disabled);
|
|
51
|
+
--coloring-hover: var(--color-disabled);
|
|
52
|
+
--coloring-text-hover: transparent;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@utility description {
|
|
56
|
+
@apply reset-coloring-variables;
|
|
57
|
+
--coloring-color: var(--color-description);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@utility surface {
|
|
61
|
+
@apply reset-coloring-variables;
|
|
62
|
+
--coloring-color: var(--color-surface);
|
|
63
|
+
--coloring-on-color: var(--color-on-surface);
|
|
64
|
+
--coloring-hover: var(--color-surface-hover);
|
|
65
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* Button */
|
|
2
2
|
@layer components {
|
|
3
3
|
.btn-xs {
|
|
4
|
-
@apply flex-row-1 items-center justify-center px-1 py-0.75 rounded-1 h-
|
|
4
|
+
@apply flex-row-1 items-center justify-center px-1 py-0.75 rounded-1 h-6 text-sm;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.btn-sm {
|
|
@@ -70,10 +70,103 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
/* Focus */
|
|
74
|
+
@utility focus-style-outline {
|
|
75
|
+
&:focus-visible {
|
|
76
|
+
@apply outline-solid outline-2 outline-focus outline-offset-2;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@utility focus-style-border {
|
|
81
|
+
&:focus-visible {
|
|
82
|
+
@apply border-2 border-focus;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@utility focus-style-default {
|
|
87
|
+
&:focus-visible:not(.focus-style-none) {
|
|
88
|
+
@apply focus-style-outline;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@utility focus-style-none {
|
|
93
|
+
&:focus-visible {
|
|
94
|
+
@apply outline-none;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@utility input-element {
|
|
99
|
+
@apply border-2 border-transparent focus-style-none focus-style-border;
|
|
100
|
+
&:not([data-disabled]):not([data-invalid]) {
|
|
101
|
+
@apply bg-input-background hover:border-primary;
|
|
102
|
+
|
|
103
|
+
&:not([data-value]) {
|
|
104
|
+
@apply text-placeholder;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&[data-value] {
|
|
108
|
+
@apply text-input-text;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&:not([data-disabled])[data-invalid] {
|
|
113
|
+
@apply bg-negative/20;
|
|
114
|
+
|
|
115
|
+
--color-focus: var(--color-negative);
|
|
116
|
+
|
|
117
|
+
&[data-value] {
|
|
118
|
+
@apply text-negative;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&:not([data-value]) {
|
|
122
|
+
@apply text-placeholder;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&[data-disabled] {
|
|
127
|
+
@apply bg-disabled text-on-disabled;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* input-elements */
|
|
132
|
+
@layer components {
|
|
133
|
+
*[data-name="input"]:not(.default-style-none) {
|
|
134
|
+
@apply px-3 py-2 rounded-md h-10 input-element;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
*[data-name="textarea"]:not(.default-style-none) {
|
|
138
|
+
@apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
*[data-name="select-button"]:not(.default-style-none) {
|
|
142
|
+
@apply flex-row-2 items-center justify-between rounded-md px-3 py-2 input-element;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
*[data-name="select-button-chips"]:not(.default-style-none) {
|
|
146
|
+
@apply flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5 input-element;
|
|
147
|
+
&:not([data-disabled]){
|
|
148
|
+
@apply hover:cursor-pointer;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
*[data-name="checkbox"]:not(.default-style-none) {
|
|
153
|
+
@apply flex-col-0 items-center justify-center rounded input-element focus-style-outline;
|
|
154
|
+
&:not([data-disabled]){
|
|
155
|
+
@apply hover:cursor-pointer;
|
|
156
|
+
}
|
|
157
|
+
&:not([data-disabled]):not([data-invalid]):not([data-value='false']) {
|
|
158
|
+
@apply bg-primary/40 border-primary text-primary;
|
|
159
|
+
}
|
|
160
|
+
&:not([data-disabled]):not([data-invalid])[data-value='false'] {
|
|
161
|
+
@apply border-border text-border hover:border-primary hover:text-primary bg-transparent;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
73
166
|
/* HTML Element defaults */
|
|
74
167
|
@layer components {
|
|
75
168
|
* {
|
|
76
|
-
@apply border-border list-none;
|
|
169
|
+
@apply border-border list-none placeholder-placeholder;
|
|
77
170
|
|
|
78
171
|
@variant dark {
|
|
79
172
|
color-scheme: dark;
|
|
@@ -88,10 +181,6 @@
|
|
|
88
181
|
@apply cursor-pointer text-nowrap;
|
|
89
182
|
}
|
|
90
183
|
|
|
91
|
-
input {
|
|
92
|
-
@apply placeholder-placeholder
|
|
93
|
-
}
|
|
94
|
-
|
|
95
184
|
*:disabled {
|
|
96
185
|
@apply cursor-not-allowed;
|
|
97
186
|
}
|
|
@@ -107,22 +196,13 @@
|
|
|
107
196
|
@apply outline-0 ring-0;
|
|
108
197
|
}
|
|
109
198
|
|
|
110
|
-
|
|
111
|
-
@apply
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.focus-style-within:focus-within {
|
|
115
|
-
@apply outline-2 outline-focus;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.focus-style-none {
|
|
119
|
-
@apply focus-visible:outline-0 focus-within:outline-0 outline-offset-0;
|
|
199
|
+
* {
|
|
200
|
+
@apply focus-style-default;
|
|
120
201
|
}
|
|
121
202
|
|
|
122
203
|
/**
|
|
123
204
|
* Table
|
|
124
205
|
*/
|
|
125
|
-
|
|
126
206
|
table {
|
|
127
207
|
@apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
|
|
128
208
|
}
|
|
@@ -161,13 +241,12 @@
|
|
|
161
241
|
}
|
|
162
242
|
|
|
163
243
|
/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
|
|
164
|
-
|
|
165
244
|
@supports selector(::-webkit-scrollbar) {
|
|
166
245
|
* {
|
|
167
246
|
scrollbar-color: initial;
|
|
168
247
|
}
|
|
169
248
|
|
|
170
|
-
:root{
|
|
249
|
+
:root {
|
|
171
250
|
--scrollbar-width: 10px;
|
|
172
251
|
--scrollbar-padding: 1px;
|
|
173
252
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
@import './
|
|
2
|
-
@import './colors-basic.css';
|
|
3
|
-
@import './colors-semantic.css';
|
|
4
|
-
@import './colors-component.css';
|
|
1
|
+
@import './colors/index.css';
|
|
5
2
|
@import './typography.css';
|
|
6
3
|
@import './breakpoints.css';
|
|
7
|
-
@import './components.css';
|
|
4
|
+
@import './components.css';
|
|
5
|
+
@import './shadow.css';
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
|
|
3
1
|
@utility coloring-solid {
|
|
4
2
|
@apply
|
|
5
3
|
bg-[var(--coloring-solid-color,var(--coloring-color))]
|
|
@@ -57,70 +55,4 @@
|
|
|
57
55
|
--coloring-text-hover: initial;
|
|
58
56
|
--coloring-outline: initial;
|
|
59
57
|
--coloring-outline-hover: initial;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@utility primary {
|
|
63
|
-
@apply reset-coloring-variables;
|
|
64
|
-
--coloring-color: var(--color-primary);
|
|
65
|
-
--coloring-on-color: var(--color-on-primary);
|
|
66
|
-
--coloring-hover: var(--color-primary-hover);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@utility secondary {
|
|
70
|
-
@apply reset-coloring-variables;
|
|
71
|
-
--coloring-color: var(--color-secondary);
|
|
72
|
-
--coloring-on-color: var(--color-on-secondary);
|
|
73
|
-
--coloring-hover: var(--color-secondary-hover);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@utility positive {
|
|
77
|
-
@apply reset-coloring-variables;
|
|
78
|
-
--coloring-color: var(--color-positive);
|
|
79
|
-
--coloring-on-color: var(--color-on-positive);
|
|
80
|
-
--coloring-hover: var(--color-positive-hover);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
@utility negative {
|
|
84
|
-
@apply reset-coloring-variables;
|
|
85
|
-
--coloring-color: var(--color-negative);
|
|
86
|
-
--coloring-on-color: var(--color-on-negative);
|
|
87
|
-
--coloring-hover: var(--color-negative-hover);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@utility warning {
|
|
91
|
-
@apply reset-coloring-variables;
|
|
92
|
-
--coloring-color: var(--color-warning);
|
|
93
|
-
--coloring-on-color: var(--color-on-warning);
|
|
94
|
-
--coloring-hover: var(--color-warning-hover);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
@utility neutral {
|
|
98
|
-
@apply reset-coloring-variables;
|
|
99
|
-
--coloring-color: var(--color-neutral);
|
|
100
|
-
--coloring-on-color: var(--color-on-neutral);
|
|
101
|
-
--coloring-hover: var(--color-neutral-hover);
|
|
102
|
-
--coloring-text: var(--color-neutral-text);
|
|
103
|
-
--coloring-text-hover: var(--color-neutral-text-hover);
|
|
104
|
-
--coloring-outline: var(--color-neutral-outline);
|
|
105
|
-
--coloring-outline-hover: var(--color-neutral-outline-hover);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@utility disabled {
|
|
109
|
-
@apply reset-coloring-variables;
|
|
110
|
-
--coloring-color: var(--color-disabled);
|
|
111
|
-
--coloring-on-color: var(--color-on-disabled);
|
|
112
|
-
--coloring-hover: var(--color-disabled);
|
|
113
|
-
--coloring-text-hover: transparent;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@utility description {
|
|
117
|
-
@apply reset-coloring-variables;
|
|
118
|
-
--coloring-color: var(--color-description);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
@utility surface {
|
|
122
|
-
@apply reset-coloring-variables;
|
|
123
|
-
--coloring-color: var(--color-surface);
|
|
124
|
-
--coloring-on-color: var(--color-on-surface);
|
|
125
|
-
--coloring-hover: var(--color-surface-hover);
|
|
126
58
|
}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
|
|
3
1
|
@utility shadow-side {
|
|
4
2
|
box-shadow: var(--shadow-right, 0 0 0 transparent),
|
|
5
3
|
var(--shadow-left, 0 0 0 transparent),
|
|
@@ -39,14 +37,6 @@
|
|
|
39
37
|
--tw-shadow-color: rgba(0, 0, 0, 0.10);
|
|
40
38
|
}
|
|
41
39
|
|
|
42
|
-
@utility shadow-hw-bottom {
|
|
43
|
-
--shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 10%));
|
|
44
|
-
|
|
45
|
-
@variant dark {
|
|
46
|
-
--shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 20%));
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
40
|
@layer utilities {
|
|
51
41
|
.shadow-around {
|
|
52
42
|
@apply shadow-around-2;
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"url": "git+https://github.com/helpwave/hightide.git"
|
|
8
8
|
},
|
|
9
9
|
"license": "MPL-2.0",
|
|
10
|
-
"version": "0.
|
|
10
|
+
"version": "0.5.0",
|
|
11
11
|
"files": [
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
@@ -38,36 +38,37 @@
|
|
|
38
38
|
"test": "jest"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@
|
|
41
|
+
"@helpwave/internationalization": "0.4.0",
|
|
42
|
+
"@tailwindcss/cli": "4.1.18",
|
|
42
43
|
"@tanstack/react-table": "8.21.3",
|
|
43
44
|
"clsx": "2.1.1",
|
|
44
|
-
"lucide-react": "0.
|
|
45
|
+
"lucide-react": "0.561.0",
|
|
45
46
|
"postcss": "8.5.3",
|
|
46
|
-
"react": "
|
|
47
|
-
"react-dom": "
|
|
48
|
-
"tailwindcss": "4.1.
|
|
49
|
-
"@helpwave/internationalization": "0.4.0"
|
|
47
|
+
"react": "19.2.3",
|
|
48
|
+
"react-dom": "19.2.3",
|
|
49
|
+
"tailwindcss": "4.1.18"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@babel/core": "7.26.0",
|
|
53
53
|
"@babel/preset-env": "7.26.0",
|
|
54
54
|
"@babel/preset-react": "7.26.3",
|
|
55
55
|
"@babel/preset-typescript": "7.26.0",
|
|
56
|
-
"@faker-js/faker": "
|
|
57
|
-
"@helpwave/eslint-config": "0.0.
|
|
58
|
-
"@storybook/addon-docs": "
|
|
59
|
-
"@storybook/addon-links": "
|
|
60
|
-
"@storybook/nextjs": "
|
|
61
|
-
"@tailwindcss/postcss": "4.
|
|
56
|
+
"@faker-js/faker": "10.1.0",
|
|
57
|
+
"@helpwave/eslint-config": "0.0.11",
|
|
58
|
+
"@storybook/addon-docs": "10.1.9",
|
|
59
|
+
"@storybook/addon-links": "10.1.9",
|
|
60
|
+
"@storybook/nextjs": "10.1.9",
|
|
61
|
+
"@tailwindcss/postcss": "4.1.18",
|
|
62
62
|
"@types/jest": "30.0.0",
|
|
63
63
|
"@types/node": "20.17.10",
|
|
64
|
-
"@types/react": "
|
|
65
|
-
"@types/react-dom": "
|
|
64
|
+
"@types/react": "19.2.3",
|
|
65
|
+
"@types/react-dom": "19.2.3",
|
|
66
66
|
"@types/tinycolor2": "1.4.6",
|
|
67
|
+
"@vitest/mocker": "^4.0.16",
|
|
67
68
|
"eslint": "9.31.0",
|
|
68
|
-
"eslint-plugin-storybook": "
|
|
69
|
+
"eslint-plugin-storybook": "10.1.9",
|
|
69
70
|
"jest": "30.2.0",
|
|
70
|
-
"storybook": "
|
|
71
|
+
"storybook": "10.1.9",
|
|
71
72
|
"ts-jest": "29.4.5",
|
|
72
73
|
"tsup": "8.5.0",
|
|
73
74
|
"typescript": "5.7.2",
|
|
File without changes
|
|
File without changes
|