@inera/ids-design 7.1.3 → 7.2.1

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 (15) hide show
  1. package/components/header-inera/header-inera-item-lit.js +1 -1
  2. package/components/header-inera/header-inera-item.css +1 -0
  3. package/components/header-inera-admin/composite-header-inera-admin.css +98 -39
  4. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  5. package/components/header-inera-admin/header-inera-admin-item.css +1 -0
  6. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  7. package/components/header-inera-admin/header-inera-admin.css +97 -39
  8. package/components/tabs/tabs-lit.js +1 -1
  9. package/components/tabs/tabs.css +3 -0
  10. package/package.json +1 -1
  11. package/tokens/themes/1177-admin-tokens.css +300 -0
  12. package/tokens/themes/1177-pro-tokens.css +300 -0
  13. package/tokens/themes/1177-tokens.css +300 -0
  14. package/tokens/themes/inera-admin-tokens.css +290 -0
  15. package/tokens/themes/inera-tokens.css +290 -0
package/tokens/themes/inera-tokens.css ADDED
@@ -0,0 +1,290 @@
1
+ .ids--inera.ids--light,
2
+ .ids--inera.ids--dark {
3
+ --ids-palette-primary-30: #7e2a4c;
4
+ --ids-palette-primary-40: #a33662;
5
+ --ids-palette-primary-50: #c03f73;
6
+ --ids-palette-primary-60: #e481a9;
7
+ --ids-palette-primary-90: #e3abc1;
8
+ --ids-palette-secondary-40: #e7dac5;
9
+ --ids-palette-secondary-90: #f6f1e9;
10
+ --ids-palette-secondary-95: #f9f6f1;
11
+ --ids-palette-accent-30: #305a47;
12
+ --ids-palette-accent-40: #40775e;
13
+ --ids-palette-accent-90: #94d1b6;
14
+ --ids-palette-neutral-10: #151515;
15
+ --ids-palette-neutral-15: #252525;
16
+ --ids-palette-neutral-20: #353636;
17
+ --ids-palette-neutral-40: #727373;
18
+ --ids-palette-neutral-90: #cccccc;
19
+ --ids-palette-neutral-99: #f0f0f0;
20
+ --ids-palette-neutral-100: #ffffff;
21
+ --ids-palette-success-40: #2c863f;
22
+ --ids-palette-success-99: #e7f7ea;
23
+ --ids-palette-attention-40: #ffd748;
24
+ --ids-palette-attention-95: #fff7d9;
25
+ --ids-palette-error-40: #db0f00;
26
+ --ids-palette-error-60: #f52819;
27
+ --ids-palette-error-99: #ffeceb;
28
+ }
29
+
30
+ .ids--inera.ids--light {
31
+ --ids-input-height: 3rem;
32
+ --ids-input-padding-x: 1.25rem;
33
+ --ids-textarea-padding-x: 1.25rem;
34
+ --ids-select-height: 3rem;
35
+ --ids-select-padding-x: 1.25rem;
36
+ --ids-search-button-small-padding-x: 1.75rem;
37
+ --ids-search-button-small-padding-y: 0.75rem;
38
+ --ids-search-button-small-font-seize: 1.125rem;
39
+ --ids-search-button-small-line-height: 1.5rem;
40
+ --ids-font-family-primary: Open sans;
41
+ --ids-font-family-secondary: Poppins;
42
+ --ids-color-surface-background-default: #ffffff;
43
+ --ids-color-surface-border-default: #727373;
44
+ --ids-color-surface-text-on-default: #353636;
45
+ --ids-color-surface-background-elevated-1: #ffffff;
46
+ --ids-color-surface-border-elevated-1: #cccccc;
47
+ --ids-color-surface-text-on-elevated-1: #353636;
48
+ --ids-color-surface-text-subtle-on-elevated-1: #727373;
49
+ --ids-color-surface-background-elevated-2: #ffffff;
50
+ --ids-color-surface-text-on-elevated-2: #353636;
51
+ --ids-color-surface-border-elevated-2: #cccccc;
52
+ --ids-color-surface-background-alternative: #f9f6f1;
53
+ --ids-color-surface-text-on-alternative: #353636;
54
+ --ids-color-surface-background-alternative-elevated-1: #f9f6f1;
55
+ --ids-color-surface-text-on-alternative-elevated-1: #353636;
56
+ --ids-color-brand-text-logo: #a33662;
57
+ --ids-color-brand-text-primary: #a33662;
58
+ --ids-color-brand-background-primary: #a33662;
59
+ --ids-color-brand-background-primary-subtle: #7e2a4c;
60
+ --ids-color-brand-background-primary-subtle-2: #c03f73;
61
+ --ids-color-brand-border-primary: #a33662;
62
+ --ids-color-brand-text-on-primary: #ffffff;
63
+ --ids-color-brand-background-secondary: #f9f6f1;
64
+ --ids-color-brand-text-on-secondary: #353636;
65
+ --ids-color-navigation-background-default: #a33662;
66
+ --ids-color-navigation-border-default: #a33662;
67
+ --ids-color-navigation-text-default: #7e2a4c;
68
+ --ids-color-navigation-icon-default: #a33662;
69
+ --ids-color-navigation-text-on-default: #ffffff;
70
+ --ids-color-navigation-background-hover: #7e2a4c;
71
+ --ids-color-navigation-border-hover: #7e2a4c;
72
+ --ids-color-navigation-text-hover: #7e2a4c;
73
+ --ids-color-navigation-text-on-hover: #ffffff;
74
+ --ids-color-navigation-background-active: #7e2a4c;
75
+ --ids-color-navigation-border-active: #7e2a4c;
76
+ --ids-color-navigation-text-active: #7e2a4c;
77
+ --ids-color-navigation-text-on-active: #ffffff;
78
+ --ids-color-interactive-background-default: #40775e;
79
+ --ids-color-interactive-border-default: #40775e;
80
+ --ids-color-interactive-text-default: #40775e;
81
+ --ids-color-interactive-text-on-default: #ffffff;
82
+ --ids-color-interactive-background-hover: #305a47;
83
+ --ids-color-interactive-border-hover: #305a47;
84
+ --ids-color-interactive-text-hover: #305a47;
85
+ --ids-color-interactive-text-on-hover: #ffffff;
86
+ --ids-color-interactive-background-active: #305a47;
87
+ --ids-color-interactive-border-active: #305a47;
88
+ --ids-color-interactive-text-active: #305a47;
89
+ --ids-color-interactive-text-on-active: #ffffff;
90
+ --ids-color-interactive-background-disabled: #ffffff;
91
+ --ids-color-interactive-border-disabled: #cccccc;
92
+ --ids-color-interactive-text-disabled: #727373;
93
+ --ids-color-interactive-text-on-disabled: #727373;
94
+ --ids-color-interactive-focus-outline: #353636;
95
+ --ids-color-interactive-focus-outline-on: #ffffff;
96
+ --ids-color-feedback-background-information: #f0f0f0;
97
+ --ids-color-feedback-border-information: #727373;
98
+ --ids-color-feedback-text-on-information: #353636;
99
+ --ids-color-feedback-text-information: #353636;
100
+ --ids-color-feedback-background-success: #e7f7ea;
101
+ --ids-color-feedback-border-success: #2c863f;
102
+ --ids-color-feedback-text-on-success: #353636;
103
+ --ids-color-feedback-text-success: #2c863f;
104
+ --ids-color-feedback-background-attention: #fff7d9;
105
+ --ids-color-feedback-border-attention: #727373;
106
+ --ids-color-feedback-text-on-attention: #353636;
107
+ --ids-color-feedback-text-attention: #353636;
108
+ --ids-color-feedback-background-error: #ffeceb;
109
+ --ids-color-feedback-border-error: #db0f00;
110
+ --ids-color-feedback-text-on-error: #353636;
111
+ --ids-color-feedback-text-error: #db0f00;
112
+ --ids-color-feedback-background-notification: #a33662;
113
+ --ids-color-feedback-text-on-notification: #ffffff;
114
+ --ids-color-form-background-default: #f9f6f1;
115
+ --ids-color-form-border-default: #40775e;
116
+ --ids-color-form-text-on-default: #353636;
117
+ --ids-color-form-placeholder-text-on-default: #727373;
118
+ --ids-color-form-background-light-default: #ffffff;
119
+ --ids-color-form-border-light-default: #40775e;
120
+ --ids-color-form-text-on-light-default: #353636;
121
+ --ids-color-form-placeholder-text-on-light-default: #727373;
122
+ --ids-color-form-background-active: #f9f6f1;
123
+ --ids-color-form-border-active: #40775e;
124
+ --ids-color-form-text-on-active: #353636;
125
+ --ids-color-form-placeholder-text-on-active: #727373;
126
+ --ids-color-form-background-light-active: #ffffff;
127
+ --ids-color-form-border-light-active: #40775e;
128
+ --ids-color-form-text-on-light-active: #353636;
129
+ --ids-color-form-placeholder-text-on-light-active: #727373;
130
+ --ids-color-form-background-disabled: #f0f0f0;
131
+ --ids-color-form-border-disabled: #727373;
132
+ --ids-color-form-text-on-light-disabled: #727373;
133
+ --ids-color-form-placeholder-text-on-light-disabled: #727373;
134
+ --ids-color-form-background-light-disabled: #f0f0f0;
135
+ --ids-color-form-border-light-disabled: #727373;
136
+ --ids-color-form-text-on-disabled: #727373;
137
+ --ids-color-form-placeholder-text-on-disabled: #727373;
138
+ --ids-color-form-background-invalid: #ffeceb;
139
+ --ids-color-form-border-invalid: #db0f00;
140
+ --ids-color-form-text-on-invalid: #353636;
141
+ --ids-color-form-placeholder-text-on-invalid: #727373;
142
+ --ids-color-form-message-background-invalid: #ffffff;
143
+ --ids-color-form-message-border-invalid: #db0f00;
144
+ --ids-color-form-message-text-on-invalid: #db0f00;
145
+ --ids-color-form-background-light-invalid: #ffeceb;
146
+ --ids-color-form-border-light-invalid: #db0f00;
147
+ --ids-color-form-text-on-light-invalid: #353636;
148
+ --ids-color-form-placeholder-text-on-light-invalid: #727373;
149
+ --ids-color-heading-text-xxl: #a33662;
150
+ --ids-color-heading-text-xl: #a33662;
151
+ --ids-color-heading-text-l: #a33662;
152
+ --ids-color-heading-text-m: #a33662;
153
+ --ids-color-heading-text-s: #353636;
154
+ --ids-color-heading-text-xs: #353636;
155
+ --ids-border-radius-primary: 0.1875rem;
156
+ --ids-border-radius-secondary: 0.3125rem;
157
+ --ids-border-width-general: 0.0625rem;
158
+ --ids-border-width-invalid: 0.125rem;
159
+ }
160
+
161
+ .ids--inera.ids--dark {
162
+ --ids-input-height: 3rem;
163
+ --ids-input-padding-x: 1.25rem;
164
+ --ids-textarea-padding-x: 1.25rem;
165
+ --ids-select-height: 3rem;
166
+ --ids-select-padding-x: 1.25rem;
167
+ --ids-search-button-small-padding-x: 1.75rem;
168
+ --ids-search-button-small-padding-y: 0.75rem;
169
+ --ids-search-button-small-font-seize: 1.125rem;
170
+ --ids-search-button-small-line-height: 1.5rem;
171
+ --ids-font-family-primary: Open sans;
172
+ --ids-font-family-secondary: Poppins;
173
+ --ids-color-surface-background-default: #151515;
174
+ --ids-color-surface-border-default: #727373;
175
+ --ids-color-surface-text-on-default: #ffffff;
176
+ --ids-color-surface-background-elevated-1: #252525;
177
+ --ids-color-surface-border-elevated-1: #727373;
178
+ --ids-color-surface-text-on-elevated-1: #ffffff;
179
+ --ids-color-surface-text-subtle-on-elevated-1: #f0f0f0;
180
+ --ids-color-surface-background-elevated-2: #353636;
181
+ --ids-color-surface-text-on-elevated-2: #ffffff;
182
+ --ids-color-surface-border-elevated-2: #727373;
183
+ --ids-color-surface-background-alternative: #151515;
184
+ --ids-color-surface-text-on-alternative: #ffffff;
185
+ --ids-color-surface-background-alternative-elevated-1: #252525;
186
+ --ids-color-surface-text-on-alternative-elevated-1: #ffffff;
187
+ --ids-color-brand-text-logo: #c03f73;
188
+ --ids-color-brand-text-primary: #e481a9;
189
+ --ids-color-brand-background-primary: #252525;
190
+ --ids-color-brand-background-primary-subtle: #7e2a4c;
191
+ --ids-color-brand-background-primary-subtle-2: #151515;
192
+ --ids-color-brand-border-primary: #c03f73;
193
+ --ids-color-brand-text-on-primary: #ffffff;
194
+ --ids-color-brand-background-secondary: #252525;
195
+ --ids-color-brand-text-on-secondary: #ffffff;
196
+ --ids-color-navigation-background-default: #151515;
197
+ --ids-color-navigation-border-default: #e3abc1;
198
+ --ids-color-navigation-text-default: #ffffff;
199
+ --ids-color-navigation-icon-default: #e3abc1;
200
+ --ids-color-navigation-text-on-default: #e3abc1;
201
+ --ids-color-navigation-background-hover: #e481a9;
202
+ --ids-color-navigation-border-hover: #e481a9;
203
+ --ids-color-navigation-text-hover: #ffffff;
204
+ --ids-color-navigation-text-on-hover: #e3abc1;
205
+ --ids-color-navigation-background-active: #e481a9;
206
+ --ids-color-navigation-border-active: #e481a9;
207
+ --ids-color-navigation-text-active: #ffffff;
208
+ --ids-color-navigation-text-on-active: #e3abc1;
209
+ --ids-color-interactive-background-default: #94d1b6;
210
+ --ids-color-interactive-border-default: #94d1b6;
211
+ --ids-color-interactive-text-default: #94d1b6;
212
+ --ids-color-interactive-text-on-default: #151515;
213
+ --ids-color-interactive-background-hover: #ffffff;
214
+ --ids-color-interactive-border-hover: #ffffff;
215
+ --ids-color-interactive-text-hover: #ffffff;
216
+ --ids-color-interactive-text-on-hover: #305a47;
217
+ --ids-color-interactive-background-active: #ffffff;
218
+ --ids-color-interactive-border-active: #ffffff;
219
+ --ids-color-interactive-text-active: #ffffff;
220
+ --ids-color-interactive-text-on-active: #305a47;
221
+ --ids-color-interactive-background-disabled: #cccccc;
222
+ --ids-color-interactive-border-disabled: #cccccc;
223
+ --ids-color-interactive-text-disabled: #cccccc;
224
+ --ids-color-interactive-text-on-disabled: #727373;
225
+ --ids-color-interactive-focus-outline: #f0f0f0;
226
+ --ids-color-interactive-focus-outline-on: #353636;
227
+ --ids-color-feedback-background-information: #252525;
228
+ --ids-color-feedback-border-information: #727373;
229
+ --ids-color-feedback-text-on-information: #ffffff;
230
+ --ids-color-feedback-text-information: #cccccc;
231
+ --ids-color-feedback-background-success: #252525;
232
+ --ids-color-feedback-border-success: #2c863f;
233
+ --ids-color-feedback-text-on-success: #ffffff;
234
+ --ids-color-feedback-text-success: #2c863f;
235
+ --ids-color-feedback-background-attention: #252525;
236
+ --ids-color-feedback-border-attention: #ffd748;
237
+ --ids-color-feedback-text-on-attention: #ffffff;
238
+ --ids-color-feedback-text-attention: #ffd748;
239
+ --ids-color-feedback-background-error: #252525;
240
+ --ids-color-feedback-border-error: #f52819;
241
+ --ids-color-feedback-text-on-error: #ffffff;
242
+ --ids-color-feedback-text-error: #f52819;
243
+ --ids-color-feedback-background-notification: #c03f73;
244
+ --ids-color-feedback-text-on-notification: #ffffff;
245
+ --ids-color-form-background-default: #151515;
246
+ --ids-color-form-border-default: #94d1b6;
247
+ --ids-color-form-text-on-default: #ffffff;
248
+ --ids-color-form-placeholder-text-on-default: #f0f0f0;
249
+ --ids-color-form-background-light-default: #151515;
250
+ --ids-color-form-border-light-default: #94d1b6;
251
+ --ids-color-form-text-on-light-default: #ffffff;
252
+ --ids-color-form-placeholder-text-on-light-default: #f0f0f0;
253
+ --ids-color-form-background-active: #151515;
254
+ --ids-color-form-border-active: #ffffff;
255
+ --ids-color-form-text-on-active: #ffffff;
256
+ --ids-color-form-placeholder-text-on-active: #f0f0f0;
257
+ --ids-color-form-background-light-active: #151515;
258
+ --ids-color-form-border-light-active: #ffffff;
259
+ --ids-color-form-text-on-light-active: #ffffff;
260
+ --ids-color-form-placeholder-text-on-light-active: #f0f0f0;
261
+ --ids-color-form-background-disabled: #151515;
262
+ --ids-color-form-border-disabled: #cccccc;
263
+ --ids-color-form-text-on-light-disabled: #f0f0f0;
264
+ --ids-color-form-placeholder-text-on-light-disabled: #f0f0f0;
265
+ --ids-color-form-background-light-disabled: #151515;
266
+ --ids-color-form-border-light-disabled: #cccccc;
267
+ --ids-color-form-text-on-disabled: #f0f0f0;
268
+ --ids-color-form-placeholder-text-on-disabled: #f0f0f0;
269
+ --ids-color-form-background-invalid: #151515;
270
+ --ids-color-form-border-invalid: #f52819;
271
+ --ids-color-form-text-on-invalid: #ffffff;
272
+ --ids-color-form-placeholder-text-on-invalid: #f0f0f0;
273
+ --ids-color-form-message-background-invalid: #353636;
274
+ --ids-color-form-message-border-invalid: #f52819;
275
+ --ids-color-form-message-text-on-invalid: #ffffff;
276
+ --ids-color-form-background-light-invalid: #151515;
277
+ --ids-color-form-border-light-invalid: #f52819;
278
+ --ids-color-form-text-on-light-invalid: #ffffff;
279
+ --ids-color-form-placeholder-text-on-light-invalid: #f0f0f0;
280
+ --ids-color-heading-text-xxl: #ffffff;
281
+ --ids-color-heading-text-xl: #ffffff;
282
+ --ids-color-heading-text-l: #ffffff;
283
+ --ids-color-heading-text-m: #ffffff;
284
+ --ids-color-heading-text-s: #ffffff;
285
+ --ids-color-heading-text-xs: #ffffff;
286
+ --ids-border-radius-primary: 0.1875rem;
287
+ --ids-border-radius-secondary: 0.3125rem;
288
+ --ids-border-width-general: 0.125rem;
289
+ --ids-border-width-invalid: 0.125rem;
290
+ }