@idds/styles 1.0.44 → 1.0.45

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/password-input.css +1 -1
  3. package/src/components/stepper.css +25 -14
  4. package/src/components/text-area.css +1 -1
  5. package/src/components/text-field.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.44",
3
+ "version": "1.0.45",
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/password-input.css CHANGED
@@ -28,7 +28,7 @@
28
28
  display: flex;
29
29
  align-items: center;
30
30
  gap: var(--ina-spacing-2);
31
- border-radius: var(--ina-radius-xl);
31
+ border-radius: var(--ina-radius-lg);
32
32
  border: 1px solid var(--ina-stroke-primary);
33
33
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
34
34
  background-color: var(--ina-background-primary);
package/src/components/stepper.css CHANGED
@@ -10,6 +10,14 @@
10
10
  justify-content: space-between;
11
11
  width: 100%;
12
12
  }
13
+ .ina-stepper--horizontal .ina-stepper__separator {
14
+ position: relative;
15
+ bottom: 12px;
16
+ }
17
+ .ina-stepper--vertical .ina-stepper__separator {
18
+ position: relative;
19
+ bottom: 12px;
20
+ }
13
21
 
14
22
  /* Vertical Layout */
15
23
  .ina-stepper--vertical {
@@ -44,7 +52,9 @@
44
52
  align-self: flex-start;
45
53
  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
46
54
  /* Separator width is 2px, so margin-left: 12px - 1px = 11px */
47
- margin-left: 11px;
55
+ position: relative;
56
+ left: 12px;
57
+ bottom: 0;
48
58
  }
49
59
 
50
60
  .ina-stepper--horizontal-responsive .ina-stepper__item:last-child {
@@ -71,6 +81,10 @@
71
81
  margin-bottom: 1rem;
72
82
  padding: 0;
73
83
  width: 100%;
84
+ height: 24px;
85
+ min-height: 24px;
86
+ max-height: 24px;
87
+ overflow: visible;
74
88
  }
75
89
 
76
90
  .ina-stepper--vertical .ina-stepper__item:last-child {
@@ -127,16 +141,6 @@
127
141
  flex-grow: 1;
128
142
  }
129
143
 
130
- /* Content (for vertical stepper) */
131
- .ina-stepper__content {
132
- margin-top: 0.5rem;
133
- font-size: 0.875rem;
134
- color: var(--ina-content-primary);
135
- text-align: left;
136
- width: 100%;
137
- padding-left: calc(24px + 0.75rem);
138
- }
139
-
140
144
  /* Separator */
141
145
  .ina-stepper__separator {
142
146
  flex-grow: 1;
@@ -159,7 +163,8 @@
159
163
  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
160
164
  /* Separator width is 2px, so we need to position it so its center aligns with icon center */
161
165
  /* margin-left: 12px (icon center) - 1px (half separator) = 11px */
162
- margin-left: 11px;
166
+ position: relative;
167
+ left: 12px;
163
168
  }
164
169
 
165
170
  /* States */
@@ -187,13 +192,19 @@
187
192
  }
188
193
 
189
194
  /* Inactive State (default) */
190
- .ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__icon-wrapper {
195
+ .ina-stepper__item:not(.ina-stepper__item--active):not(
196
+ .ina-stepper__item--completed
197
+ ):not(.ina-stepper__item--error)
198
+ .ina-stepper__icon-wrapper {
191
199
  border-color: var(--ina-stroke-primary);
192
200
  color: var(--ina-content-tertiary);
193
201
  background-color: var(--ina-background-secondary);
194
202
  }
195
203
 
196
- .ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__label {
204
+ .ina-stepper__item:not(.ina-stepper__item--active):not(
205
+ .ina-stepper__item--completed
206
+ ):not(.ina-stepper__item--error)
207
+ .ina-stepper__label {
197
208
  color: var(--ina-content-tertiary);
198
209
  }
199
210
 
package/src/components/text-area.css CHANGED
@@ -19,7 +19,7 @@
19
19
  display: flex;
20
20
  align-items: flex-start;
21
21
  gap: var(--ina-spacing-2);
22
- border-radius: 8px;
22
+ border-radius: var(--ina-radius-lg);
23
23
  border: 1px solid var(--ina-stroke-primary);
24
24
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
25
25
  background-color: var(--ina-background-primary);
package/src/components/text-field.css CHANGED
@@ -11,7 +11,7 @@
11
11
  font-size: var(--ina-font-sm);
12
12
  font-weight: var(--ina-font-medium);
13
13
  color: var(--ina-content-primary);
14
- margin-bottom: 8px;
14
+ margin-bottom: var(--ina-spacing-2);
15
15
  }
16
16
 
17
17
  /* Input wrapper */
@@ -19,7 +19,7 @@
19
19
  display: flex;
20
20
  align-items: center;
21
21
  gap: var(--ina-spacing-2);
22
- border-radius: 8px;
22
+ border-radius: var(--ina-radius-lg);
23
23
  border: 1px solid var(--ina-stroke-primary);
24
24
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
25
25
  background-color: var(--ina-background-primary);