@idds/styles 1.0.37 → 1.0.39

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/tab-vertical.css +10 -10
  3. package/src/components/tooltip.css +121 -122
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.37",
3
+ "version": "1.0.39",
4
4
  "description": "Shared CSS styles and colors for INA Digital Design System",
5
5
  "type": "module",
6
6
  "main": "./src/index.css",
package/src/components/tab-vertical.css CHANGED
@@ -90,13 +90,13 @@
90
90
  .ina-tab-vertical__tab--variant-outline:hover:not(
91
91
  .ina-tab-vertical__tab--disabled
92
92
  ) {
93
- color: var(--ina-primary-500);
93
+ color: var(--ina-primary-300);
94
94
  }
95
95
 
96
96
  .ina-tab-vertical--use-brand-color
97
97
  .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
98
- color: var(--ina-primary-500);
99
- border-left-color: var(--ina-primary-500);
98
+ color: var(--ina-primary-300);
99
+ border-left-color: var(--ina-primary-300);
100
100
  }
101
101
 
102
102
  /* Variant: Button Brand */
@@ -112,8 +112,8 @@
112
112
  }
113
113
 
114
114
  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
115
- background-color: var(--ina-primary-500);
116
- color: var(--ina-white) !important;
115
+ background-color: var(--ina-primary-25);
116
+ color: var(--ina-primary-300) !important;
117
117
  font-weight: 600;
118
118
  }
119
119
 
@@ -158,12 +158,12 @@
158
158
  .ina-tab-vertical__tab--variant-button-white:hover:not(
159
159
  .ina-tab-vertical__tab--disabled
160
160
  ) {
161
- color: var(--ina-primary-500);
161
+ color: var(--ina-primary-300);
162
162
  }
163
163
 
164
164
  .ina-tab-vertical--use-brand-color
165
165
  .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
166
- color: var(--ina-primary-500);
166
+ color: var(--ina-primary-300);
167
167
  }
168
168
 
169
169
  /* Disabled State */
@@ -191,7 +191,7 @@
191
191
 
192
192
  /* Focus State */
193
193
  .ina-tab-vertical__tab:focus {
194
- outline: 2px solid var(--ina-primary-500);
194
+ outline: 2px solid var(--ina-primary-300);
195
195
  outline-offset: 2px;
196
196
  }
197
197
 
@@ -246,8 +246,8 @@
246
246
 
247
247
  [data-theme='dark']
248
248
  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
249
- background-color: var(--ina-primary-500);
250
- color: var(--ina-white) !important;
249
+ background-color: var(--ina-primary-25);
250
+ color: var(--ina-primary-300) !important;
251
251
  }
252
252
 
253
253
  [data-theme='dark'] .ina-tab-vertical--variant-button-white {
package/src/components/tooltip.css CHANGED
@@ -23,8 +23,6 @@
23
23
  /* Prevent clipping by any parent container */
24
24
  transform: translateZ(0);
25
25
  will-change: transform;
26
- /* Create new stacking context to ensure z-index works */
27
- isolation: isolate;
28
26
  }
29
27
 
30
28
  /* Basic Tooltip Bubble */
@@ -38,6 +36,7 @@
38
36
  padding: var(--ina-spacing-3);
39
37
  border-radius: var(--ina-radius-lg);
40
38
  white-space: nowrap;
39
+ min-width: fit-content;
41
40
  max-width: 320px;
42
41
  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
43
42
  0 4px 6px -2px rgba(10, 13, 18, 0.03);
@@ -46,6 +45,7 @@
46
45
  .ina-tooltip__bubble--basic {
47
46
  white-space: normal;
48
47
  word-wrap: break-word;
48
+ max-width: 320px;
49
49
  }
50
50
 
51
51
  /* Card Tooltip (Light, Dark, Media) */
@@ -60,21 +60,6 @@
60
60
  display: flex;
61
61
  flex-direction: column;
62
62
  }
63
- @media (max-width: 639px) {
64
- .ina-tooltip__card {
65
- width: 280px;
66
- }
67
- }
68
- @media (max-width: 480px) {
69
- .ina-tooltip__card {
70
- width: 240px;
71
- }
72
- }
73
- @media (max-width: 320px) {
74
- .ina-tooltip__card {
75
- width: 200px;
76
- }
77
- }
78
63
 
79
64
  .ina-tooltip__card--light {
80
65
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
@@ -213,221 +198,236 @@
213
198
  flex-shrink: 0;
214
199
  }
215
200
 
216
- /* Tooltip arrow */
217
- .ina-tooltip__arrow {
201
+ /* Tooltip arrow using pseudo element ::after */
202
+ .ina-tooltip__content::after {
203
+ content: '';
218
204
  position: absolute;
219
205
  width: 0;
220
206
  height: 0;
221
- }
222
-
223
- /* Arrow colors for variants - menggunakan warna yang sama dengan card */
224
- .ina-tooltip__arrow--variant-basic {
225
- border-top-color: var(--ina-black, var(--ina-neutral-900));
226
- border-bottom-color: var(--ina-black, var(--ina-neutral-900));
227
- border-left-color: var(--ina-black, var(--ina-neutral-900));
228
- border-right-color: var(--ina-black, var(--ina-neutral-900));
229
- }
230
-
231
- .ina-tooltip__arrow--variant-light {
232
- border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
233
- border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
234
- border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
235
- border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
236
- }
237
-
238
- .ina-tooltip__arrow--variant-dark {
239
- border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
240
- border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
241
- border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
242
- border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
243
- }
244
-
245
- .ina-tooltip__arrow--variant-media {
246
- border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
247
- border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
248
- border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
249
- border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
207
+ pointer-events: none;
250
208
  }
251
209
 
252
210
  /* Positioning classes */
211
+ /* Reduced margin to eliminate gap and prevent hover area break */
253
212
  .ina-tooltip--placement-top {
254
213
  bottom: 100%;
255
214
  left: 50%;
256
215
  transform: translateX(-50%);
257
- margin-bottom: 8px;
216
+ margin-bottom: 0;
258
217
  }
259
218
 
260
219
  .ina-tooltip--placement-top-start {
261
220
  bottom: 100%;
262
221
  left: 0;
263
- margin-bottom: 8px;
222
+ margin-bottom: 0;
264
223
  }
265
224
 
266
225
  .ina-tooltip--placement-top-end {
267
226
  bottom: 100%;
268
227
  right: 0;
269
- margin-bottom: 8px;
228
+ margin-bottom: 0;
270
229
  }
271
230
 
272
231
  .ina-tooltip--placement-bottom {
273
232
  top: 100%;
274
233
  left: 50%;
275
234
  transform: translateX(-50%);
276
- margin-top: 8px;
235
+ margin-top: 0;
277
236
  }
278
237
 
279
238
  .ina-tooltip--placement-bottom-start {
280
239
  top: 100%;
281
240
  left: 0;
282
- margin-top: 8px;
241
+ margin-top: 0;
283
242
  }
284
243
 
285
244
  .ina-tooltip--placement-bottom-end {
286
245
  top: 100%;
287
246
  right: 0;
288
- margin-top: 8px;
247
+ margin-top: 0;
289
248
  }
290
249
 
291
250
  .ina-tooltip--placement-left {
292
251
  right: 100%;
293
252
  top: 50%;
294
253
  transform: translateY(-50%);
295
- margin-right: 8px;
254
+ margin-right: 0;
296
255
  }
297
256
 
298
257
  .ina-tooltip--placement-left-start {
299
258
  right: 100%;
300
259
  top: 0;
301
- margin-right: 8px;
260
+ margin-right: 0;
302
261
  }
303
262
 
304
263
  .ina-tooltip--placement-left-end {
305
264
  right: 100%;
306
265
  bottom: 0;
307
- margin-right: 8px;
266
+ margin-right: 0;
308
267
  }
309
268
 
310
269
  .ina-tooltip--placement-right {
311
270
  left: 100%;
312
271
  top: 50%;
313
272
  transform: translateY(-50%);
314
- margin-left: 8px;
273
+ margin-left: 0;
315
274
  }
316
275
 
317
276
  .ina-tooltip--placement-right-start {
318
277
  left: 100%;
319
278
  top: 0;
320
- margin-left: 8px;
279
+ margin-left: 0;
321
280
  }
322
281
 
323
282
  .ina-tooltip--placement-right-end {
324
283
  left: 100%;
325
284
  bottom: 0;
326
- margin-left: 8px;
285
+ margin-left: 0;
327
286
  }
328
287
 
329
- /* Arrow positioning - Top arrows (pointing down) */
330
- .ina-tooltip__arrow--placement-top {
288
+ /* Arrow positioning using ::after pseudo element */
289
+ /* Using smaller border size (4px) for sharper/lancip arrow */
290
+ /* Arrow positioned at edge of content to eliminate gap */
291
+ /* Top arrows (pointing down) */
292
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
331
293
  left: 50%;
332
294
  transform: translateX(-50%);
333
- bottom: -6px;
334
- border-left: 6px solid transparent;
335
- border-right: 6px solid transparent;
336
- border-top: 6px solid;
295
+ bottom: -4px; /* Positioned at edge, overlapping trigger slightly */
296
+ border-left: 4px solid transparent;
297
+ border-right: 4px solid transparent;
298
+ border-top: 4px solid;
299
+ /* Color will inherit from parent bubble/card background */
337
300
  }
338
301
 
339
- .ina-tooltip__arrow--placement-top-start {
302
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
340
303
  left: 16px;
341
- bottom: -6px;
342
- border-left: 6px solid transparent;
343
- border-right: 6px solid transparent;
344
- border-top: 6px solid;
304
+ bottom: -4px;
305
+ border-left: 4px solid transparent;
306
+ border-right: 4px solid transparent;
307
+ border-top: 4px solid;
345
308
  }
346
309
 
347
- .ina-tooltip__arrow--placement-top-end {
310
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
348
311
  right: 16px;
349
- bottom: -6px;
350
- border-left: 6px solid transparent;
351
- border-right: 6px solid transparent;
352
- border-top: 6px solid;
312
+ bottom: -4px;
313
+ border-left: 4px solid transparent;
314
+ border-right: 4px solid transparent;
315
+ border-top: 4px solid;
353
316
  }
354
317
 
355
318
  /* Bottom arrows (pointing up) */
356
- .ina-tooltip__arrow--placement-bottom {
319
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
357
320
  left: 50%;
358
321
  transform: translateX(-50%);
359
- top: -6px;
360
- border-left: 6px solid transparent;
361
- border-right: 6px solid transparent;
362
- border-bottom: 6px solid;
322
+ top: -4px; /* Positioned at edge, overlapping trigger slightly */
323
+ border-left: 4px solid transparent;
324
+ border-right: 4px solid transparent;
325
+ border-bottom: 4px solid;
363
326
  }
364
327
 
365
- .ina-tooltip__arrow--placement-bottom-start {
328
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
366
329
  left: 16px;
367
- top: -6px;
368
- border-left: 6px solid transparent;
369
- border-right: 6px solid transparent;
370
- border-bottom: 6px solid;
330
+ top: -4px;
331
+ border-left: 4px solid transparent;
332
+ border-right: 4px solid transparent;
333
+ border-bottom: 4px solid;
371
334
  }
372
335
 
373
- .ina-tooltip__arrow--placement-bottom-end {
336
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
374
337
  right: 16px;
375
- top: -6px;
376
- border-left: 6px solid transparent;
377
- border-right: 6px solid transparent;
378
- border-bottom: 6px solid;
338
+ top: -4px;
339
+ border-left: 4px solid transparent;
340
+ border-right: 4px solid transparent;
341
+ border-bottom: 4px solid;
379
342
  }
380
343
 
381
344
  /* Left arrows (pointing right) */
382
- .ina-tooltip__arrow--placement-left {
345
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
383
346
  top: 50%;
384
347
  transform: translateY(-50%);
385
- right: -6px;
386
- border-top: 6px solid transparent;
387
- border-bottom: 6px solid transparent;
388
- border-left: 6px solid;
348
+ right: -4px; /* Positioned at edge, overlapping trigger slightly */
349
+ border-top: 4px solid transparent;
350
+ border-bottom: 4px solid transparent;
351
+ border-left: 4px solid;
389
352
  }
390
353
 
391
- .ina-tooltip__arrow--placement-left-start {
354
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
392
355
  top: 16px;
393
- right: -6px;
394
- border-top: 6px solid transparent;
395
- border-bottom: 6px solid transparent;
396
- border-left: 6px solid;
356
+ right: -4px;
357
+ border-top: 4px solid transparent;
358
+ border-bottom: 4px solid transparent;
359
+ border-left: 4px solid;
397
360
  }
398
361
 
399
- .ina-tooltip__arrow--placement-left-end {
362
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
400
363
  bottom: 16px;
401
- right: -6px;
402
- border-top: 6px solid transparent;
403
- border-bottom: 6px solid transparent;
404
- border-left: 6px solid;
364
+ right: -4px;
365
+ border-top: 4px solid transparent;
366
+ border-bottom: 4px solid transparent;
367
+ border-left: 4px solid;
405
368
  }
406
369
 
407
370
  /* Right arrows (pointing left) */
408
- .ina-tooltip__arrow--placement-right {
371
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
409
372
  top: 50%;
410
373
  transform: translateY(-50%);
411
- left: -6px;
412
- border-top: 6px solid transparent;
413
- border-bottom: 6px solid transparent;
414
- border-right: 6px solid;
374
+ left: -4px; /* Positioned at edge, overlapping trigger slightly */
375
+ border-top: 4px solid transparent;
376
+ border-bottom: 4px solid transparent;
377
+ border-right: 4px solid;
415
378
  }
416
379
 
417
- .ina-tooltip__arrow--placement-right-start {
380
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
418
381
  top: 16px;
419
- left: -6px;
420
- border-top: 6px solid transparent;
421
- border-bottom: 6px solid transparent;
422
- border-right: 6px solid;
382
+ left: -4px;
383
+ border-top: 4px solid transparent;
384
+ border-bottom: 4px solid transparent;
385
+ border-right: 4px solid;
423
386
  }
424
387
 
425
- .ina-tooltip__arrow--placement-right-end {
388
+ .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
426
389
  bottom: 16px;
427
- left: -6px;
428
- border-top: 6px solid transparent;
429
- border-bottom: 6px solid transparent;
430
- border-right: 6px solid;
390
+ left: -4px;
391
+ border-top: 4px solid transparent;
392
+ border-bottom: 4px solid transparent;
393
+ border-right: 4px solid;
394
+ }
395
+ .ina-tooltip__content {
396
+ max-width: 320px;
397
+ min-width: fit-content;
398
+ }
399
+ /* Arrow colors - match parent bubble/card background color */
400
+ /* Arrow is ::after on .ina-tooltip__content, so we use variant class on content */
401
+ /* For basic variant - arrow color matches bubble background */
402
+ .ina-tooltip__content--show-arrow.ina-tooltip--variant-basic::after {
403
+ border-top-color: var(--ina-black, var(--ina-neutral-900));
404
+ border-bottom-color: var(--ina-black, var(--ina-neutral-900));
405
+ border-left-color: var(--ina-black, var(--ina-neutral-900));
406
+ border-right-color: var(--ina-black, var(--ina-neutral-900));
407
+ }
408
+
409
+ /* For light variant - arrow color matches card background */
410
+ .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after {
411
+ border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
412
+ border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
413
+ border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
414
+ border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
415
+ }
416
+
417
+ /* For dark variant - arrow color matches card background */
418
+ .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
419
+ border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
420
+ border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
421
+ border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
422
+ border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
423
+ }
424
+
425
+ /* For media variant - arrow color matches card background */
426
+ .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
427
+ border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
428
+ border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
429
+ border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
430
+ border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
431
431
  }
432
432
 
433
433
  /* Visibility states */
@@ -457,7 +457,6 @@
457
457
  white-space: normal;
458
458
  padding: 6px 10px;
459
459
  }
460
-
461
460
  .ina-tooltip__card {
462
461
  width: 280px;
463
462
  }