@idds/styles 1.0.50 → 1.0.52

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/colors/primitives/index.css +1 -0
  3. package/src/components/button.css +11 -7
  4. package/src/components/tab-horizontal.css +9 -9
  5. package/src/components/tab-vertical.css +9 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.50",
3
+ "version": "1.0.52",
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/colors/primitives/index.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --ina-neutral-800: #1f1f1f;
13
13
  --ina-neutral-900: #141414;
14
14
  --ina-neutral-1000: #050505;
15
+ --ina-primary-primary: #141414;
15
16
 
16
17
  /* Blue Colors */
17
18
  --ina-blue-50: #fafcff;
package/src/components/button.css CHANGED
@@ -109,18 +109,22 @@
109
109
  }
110
110
  /* Hierarchy modifiers - Primary */
111
111
  .ina-button--primary {
112
- background-color: var(--ina-primary-300);
112
+ background-color: var(--ina-primary-primary);
113
113
  color: var(--ina-white, var(--ina-neutral-25));
114
114
  border: none;
115
115
  }
116
116
 
117
117
  .ina-button--primary:hover:not(:disabled) {
118
- background-color: var(--ina-primary-400, var(--ina-blue-400));
118
+ background-color: color-mix(
119
+ in srgb,
120
+ var(--ina-primary-primary, var(--ina-content-primary)) 90%,
121
+ transparent
122
+ );
119
123
  }
120
124
 
121
125
  .ina-button--primary:focus:not(:disabled) {
122
- background-color: var(--ina-primary-300, var(--ina-blue-300));
123
- outline: 2px solid var(--ina-primary-300, var(--ina-blue-300));
126
+ background-color: var(--ina-primary-primary, var(--ina-content-primary));
127
+ outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
124
128
  outline-offset: 2px;
125
129
  }
126
130
 
@@ -144,7 +148,7 @@
144
148
 
145
149
  .ina-button--secondary:focus:not(:disabled) {
146
150
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
147
- outline: 2px solid var(--ina-primary-300, var(--ina-blue-300));
151
+ outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
148
152
  outline-offset: 2px;
149
153
  }
150
154
 
@@ -169,7 +173,7 @@
169
173
 
170
174
  .ina-button--tertiary:focus:not(:disabled) {
171
175
  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
172
- outline: 2px solid var(--ina-primary-300, var(--ina-blue-300));
176
+ outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
173
177
  outline-offset: 2px;
174
178
  }
175
179
 
@@ -197,7 +201,7 @@
197
201
 
198
202
  .ina-button--link:focus:not(:disabled) {
199
203
  color: var(--ina-guide-400, var(--Guide-400));
200
- outline: 2px solid var(--ina-primary-300, var(--ina-blue-300));
204
+ outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
201
205
  outline-offset: 2px;
202
206
  }
203
207
 
package/src/components/tab-horizontal.css CHANGED
@@ -101,13 +101,13 @@
101
101
  .ina-tab-horizontal__tab--variant-outline:hover:not(
102
102
  .ina-tab-horizontal__tab--disabled
103
103
  ) {
104
- color: var(--ina-primary-300);
104
+ color: var(--ina-primary-primary);
105
105
  }
106
106
 
107
107
  .ina-tab-horizontal--use-brand-color
108
108
  .ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
109
- color: var(--ina-primary-300);
110
- border-bottom-color: var(--ina-primary-300);
109
+ color: var(--ina-primary-primary);
110
+ border-bottom-color: var(--ina-primary-primary);
111
111
  }
112
112
 
113
113
  /* Variant: Button Brand */
@@ -123,8 +123,8 @@
123
123
  }
124
124
 
125
125
  .ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
126
- background-color: var(--ina-primary-300);
127
- color: var(--ina-white) !important;
126
+ background-color: var(--ina-primary-25);
127
+ color: var(--ina-primary-primary) !important;
128
128
  font-weight: 600;
129
129
  }
130
130
 
@@ -168,12 +168,12 @@
168
168
  .ina-tab-horizontal__tab--variant-button-white:hover:not(
169
169
  .ina-tab-horizontal__tab--disabled
170
170
  ) {
171
- color: var(--ina-primary-300);
171
+ color: var(--ina-primary-primary);
172
172
  }
173
173
 
174
174
  .ina-tab-horizontal--use-brand-color
175
175
  .ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
176
- color: var(--ina-primary-300);
176
+ color: var(--ina-primary-primary);
177
177
  }
178
178
 
179
179
  /* Disabled State */
@@ -263,8 +263,8 @@
263
263
 
264
264
  [data-theme='dark']
265
265
  .ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
266
- background-color: var(--ina-primary-300);
267
- color: var(--ina-white) !important;
266
+ background-color: var(--ina-primary-25);
267
+ color: var(--ina-primary-primary) !important;
268
268
  }
269
269
 
270
270
  [data-theme='dark'] .ina-tab-horizontal--variant-button-white {
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-300);
93
+ color: var(--ina-primary-primary);
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-300);
99
- border-left-color: var(--ina-primary-300);
98
+ color: var(--ina-primary-primary);
99
+ border-left-color: var(--ina-primary-primary);
100
100
  }
101
101
 
102
102
  /* Variant: Button Brand */
@@ -113,7 +113,7 @@
113
113
 
114
114
  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
115
115
  background-color: var(--ina-primary-25);
116
- color: var(--ina-primary-300) !important;
116
+ color: var(--ina-primary-primary) !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-300);
161
+ color: var(--ina-primary-primary);
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-300);
166
+ color: var(--ina-primary-primary);
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-300);
194
+ outline: 2px solid var(--ina-primary-primary);
195
195
  outline-offset: 2px;
196
196
  }
197
197
 
@@ -247,7 +247,8 @@
247
247
  [data-theme='dark']
248
248
  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
249
249
  background-color: var(--ina-primary-25);
250
- color: var(--ina-primary-300) !important;
250
+ color: var(--ina-primary-primary) !important;
251
+ font-weight: 600;
251
252
  }
252
253
 
253
254
  [data-theme='dark'] .ina-tab-vertical--variant-button-white {