@idds/styles 1.0.31 → 1.0.33

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/toast.css +3 -0
  3. package/src/components/tooltip.css +52 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.31",
3
+ "version": "1.0.33",
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/toast.css CHANGED
@@ -108,6 +108,9 @@
108
108
 
109
109
  .ina-toast__icon {
110
110
  margin-right: var(--ina-spacing-2);
111
+ margin-top: 0;
112
+ margin-bottom: 0;
113
+ color: var(--ina-white);
111
114
  }
112
115
 
113
116
  /* Toast text area */
package/src/components/tooltip.css CHANGED
@@ -27,16 +27,18 @@
27
27
 
28
28
  /* Basic Tooltip Bubble */
29
29
  .ina-tooltip__bubble {
30
- background-color: var(--ina-neutral-700, var(--Neutral-700));
31
- color: var(--ina-content-white, var(--Content-White));
30
+ background-color: var(--ina-black, var(--ina-neutral-900));
31
+ color: var(--ina-white, var(--ina-neutral-25));
32
32
  pointer-events: auto;
33
- font-size: 12px;
34
- font-weight: 600;
35
- line-height: 16px;
36
- padding: 8px 12px;
37
- border-radius: 8px;
33
+ font-size: var(--ina-font-xs);
34
+ font-weight: var(--ina-font-medium);
35
+ line-height: var(--ina-line-height-xs);
36
+ padding: var(--ina-spacing-3);
37
+ border-radius: var(--ina-radius-lg);
38
38
  white-space: nowrap;
39
- max-width: 200px;
39
+ max-width: 320px;
40
+ box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
41
+ 0 4px 6px -2px rgba(10, 13, 18, 0.03);
40
42
  }
41
43
 
42
44
  .ina-tooltip__bubble--basic {
@@ -48,14 +50,29 @@
48
50
  .ina-tooltip__card {
49
51
  position: relative;
50
52
  pointer-events: auto;
51
- border-radius: 8px;
52
- box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
53
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
53
+ border-radius: var(--ina-radius-lg);
54
+ box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
55
+ 0 4px 6px -2px rgba(10, 13, 18, 0.03);
54
56
  overflow: hidden;
55
57
  width: 320px;
56
58
  display: flex;
57
59
  flex-direction: column;
58
60
  }
61
+ @media (max-width: 639px) {
62
+ .ina-tooltip__card {
63
+ width: 280px;
64
+ }
65
+ }
66
+ @media (max-width: 480px) {
67
+ .ina-tooltip__card {
68
+ width: 240px;
69
+ }
70
+ }
71
+ @media (max-width: 320px) {
72
+ .ina-tooltip__card {
73
+ width: 200px;
74
+ }
75
+ }
59
76
 
60
77
  .ina-tooltip__card--light {
61
78
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
@@ -64,7 +81,7 @@
64
81
 
65
82
  .ina-tooltip__card--dark {
66
83
  background-color: var(--ina-neutral-900, var(--Neutral-900));
67
- color: var(--ina-content-white, var(--Content-White));
84
+ color: var(--ina-white, var(--ina-neutral-25));
68
85
  }
69
86
 
70
87
  .ina-tooltip__card--media {
@@ -80,10 +97,7 @@
80
97
  width: 24px;
81
98
  height: 24px;
82
99
  border-radius: 50%;
83
- background-color: var(
84
- --ina-background-secondary,
85
- var(--Background-Secondary)
86
- );
100
+ background-color: var(--ina-background-secondary, var(--ina-neutral-50));
87
101
  border: none;
88
102
  cursor: pointer;
89
103
  display: flex;
@@ -95,16 +109,16 @@
95
109
  }
96
110
 
97
111
  .ina-tooltip__close:hover {
98
- background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
112
+ background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
99
113
  }
100
114
 
101
115
  .ina-tooltip__card--dark .ina-tooltip__close {
102
116
  background-color: var(--ina-neutral-800, var(--Neutral-800));
103
- color: var(--ina-content-white, var(--Content-White));
117
+ color: var(--ina-white, var(--ina-neutral-25));
104
118
  }
105
119
 
106
120
  .ina-tooltip__card--dark .ina-tooltip__close:hover {
107
- background-color: var(--ina-neutral-700, var(--Neutral-700));
121
+ background-color: var(--ina-black, var(--ina-neutral-900));
108
122
  }
109
123
 
110
124
  /* Image section (for media variant) */
@@ -112,7 +126,7 @@
112
126
  width: 100%;
113
127
  height: 200px;
114
128
  overflow: hidden;
115
- background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
129
+ background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
116
130
  display: flex;
117
131
  align-items: center;
118
132
  justify-content: center;
@@ -126,7 +140,7 @@
126
140
 
127
141
  /* Content section */
128
142
  .ina-tooltip__content-section {
129
- padding: 32px 64px;
143
+ padding: var(--ina-spacing-4);
130
144
  display: flex;
131
145
  flex-direction: column;
132
146
  gap: 16px;
@@ -141,19 +155,19 @@
141
155
  }
142
156
 
143
157
  .ina-tooltip__card--dark .ina-tooltip__title {
144
- color: var(--ina-content-white, var(--Content-White));
158
+ color: var(--ina-white, var(--ina-neutral-25));
145
159
  }
146
160
 
147
161
  .ina-tooltip__description {
148
162
  font-size: 12px;
149
163
  font-weight: 400;
150
164
  line-height: 16px;
151
- color: var(--ina-content-secondary, var(--Content-Secondary));
165
+ color: var(--ina-content-secondary, var(--ina-neutral-600));
152
166
  margin: 0;
153
167
  }
154
168
 
155
169
  .ina-tooltip__card--dark .ina-tooltip__description {
156
- color: var(--ina-content-tertiary, var(--Content-Tertiary));
170
+ color: var(--ina-content-tertiary, var(--ina-neutral-400));
157
171
  }
158
172
 
159
173
  /* Pagination dots */
@@ -167,7 +181,7 @@
167
181
  width: 6px;
168
182
  height: 6px;
169
183
  border-radius: 50%;
170
- background-color: var(--ina-stroke-primary, var(--Stroke-Primary));
184
+ background-color: var(--ina-stroke-primary, var(--ina-neutral-200));
171
185
  transition: all 0.2s ease;
172
186
  }
173
187
 
@@ -178,11 +192,11 @@
178
192
  }
179
193
 
180
194
  .ina-tooltip__card--dark .ina-tooltip__pagination-dot {
181
- background-color: var(--ina-neutral-600, var(--Neutral-600));
195
+ background-color: var(--ina-neutral-600, var(--ina-neutral-600));
182
196
  }
183
197
 
184
198
  .ina-tooltip__card--dark .ina-tooltip__pagination-dot--active {
185
- background-color: var(--ina-content-white, var(--Content-White));
199
+ background-color: var(--ina-white, var(--ina-neutral-25));
186
200
  }
187
201
 
188
202
  /* Action buttons */
@@ -204,12 +218,12 @@
204
218
  height: 0;
205
219
  }
206
220
 
207
- /* Arrow colors for variants */
221
+ /* Arrow colors for variants - menggunakan warna yang sama dengan card */
208
222
  .ina-tooltip__arrow--variant-basic {
209
- border-top-color: var(--ina-neutral-700, var(--Neutral-700));
210
- border-bottom-color: var(--ina-neutral-700, var(--Neutral-700));
211
- border-left-color: var(--ina-neutral-700, var(--Neutral-700));
212
- border-right-color: var(--ina-neutral-700, var(--Neutral-700));
223
+ border-top-color: var(--ina-black, var(--ina-neutral-900));
224
+ border-bottom-color: var(--ina-black, var(--ina-neutral-900));
225
+ border-left-color: var(--ina-black, var(--ina-neutral-900));
226
+ border-right-color: var(--ina-black, var(--ina-neutral-900));
213
227
  }
214
228
 
215
229
  .ina-tooltip__arrow--variant-light {
@@ -220,10 +234,10 @@
220
234
  }
221
235
 
222
236
  .ina-tooltip__arrow--variant-dark {
223
- border-top-color: var(--ina-neutral-900, var(--Neutral-900));
224
- border-bottom-color: var(--ina-neutral-900, var(--Neutral-900));
225
- border-left-color: var(--ina-neutral-900, var(--Neutral-900));
226
- border-right-color: var(--ina-neutral-900, var(--Neutral-900));
237
+ border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
238
+ border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
239
+ border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
240
+ border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
227
241
  }
228
242
 
229
243
  .ina-tooltip__arrow--variant-media {
@@ -429,7 +443,7 @@
429
443
 
430
444
  /* Focus styles */
431
445
  .ina-tooltip:focus {
432
- outline: 2px solid var(--ina-primary-500, var(--Primary-500));
446
+ outline: 2px solid var(--ina-primary-500, var(--ina-blue-500));
433
447
  outline-offset: 2px;
434
448
  }
435
449
 
@@ -447,6 +461,6 @@
447
461
  }
448
462
 
449
463
  .ina-tooltip__content-section {
450
- padding: 24px 32px;
464
+ padding: var(--ina-spacing-3);
451
465
  }
452
466
  }