optimized-react-component-library-xyz123 2.5.1 → 2.5.3

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "2.5.1",
3
+ "version": "2.5.3",
4
4
  "description": "A modern React component library using TypeScript with React 19 support.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -8,6 +8,8 @@
8
8
  --dark-orientation-active: #f4bf56;
9
9
  --dark-background-second: #200827;
10
10
  --dark-background-third: #747474;
11
+ --dark-alertintext: #adc7e5;
12
+ --dark-alertintext-text: #dc7d0a;
11
13
  }
12
14
 
13
15
  @media (prefers-color-scheme: dark) {
@@ -67,7 +69,6 @@
67
69
  color: var(--dark-text);
68
70
  }
69
71
 
70
-
71
72
  /*--Navigation header / menu ----*/
72
73
 
73
74
  .pts-navigation-header-container {
@@ -75,81 +76,74 @@
75
76
  }
76
77
 
77
78
  .pts-navigation-header-logo-container,
78
- .pts-navigation-header-headline-container {
79
- border-color: var(--dark-background-third)!important;
79
+ .pts-navigation-header-headline-container {
80
+ border-color: var(--dark-background-third) !important;
80
81
  }
81
- .pts-navigation-header-nav-container button svg path,
82
- .pts-navigation-header-nav-container button svg line{
82
+ .pts-navigation-header-nav-container button svg path,
83
+ .pts-navigation-header-nav-container button svg line {
83
84
  color: var(--dark-text);
84
85
  fill: var(--dark-text);
85
86
  stroke: var(--dark-text);
86
87
  }
87
88
 
88
- .pts-navigation-header-container svg path {
89
- fill: var(--dark-text);
90
- }
91
-
92
-
93
- .pts-navigation-header-nav-container,
94
- .pts-navigation-header-button-label {
95
- background: var(--dark-background-second);
96
- color: var(--dark-text);
97
- }
98
-
99
- .pts-expand-icon svg rect{
100
- fill: var(--dark-action);
101
- }
102
-
103
-
104
- .pts-contract-icon svg rect{
105
- fill: var(--dark-orientation-active);
106
- }
89
+ .pts-navigation-header-container svg path {
90
+ fill: var(--dark-text);
91
+ }
107
92
 
93
+ .pts-navigation-header-nav-container,
94
+ .pts-navigation-header-button-label {
95
+ background: var(--dark-background-second);
96
+ color: var(--dark-text);
97
+ }
108
98
 
109
- .pts-navigation-close-text{
110
- color: var(--dark-text);
111
- }
99
+ .pts-expand-icon svg rect {
100
+ fill: var(--dark-action);
101
+ }
112
102
 
113
- .pts-navigation-close-button{
114
- background: var(--dark-main);
115
- color: var(--dark-text);
116
- }
103
+ .pts-contract-icon svg rect {
104
+ fill: var(--dark-orientation-active);
105
+ }
117
106
 
118
- .pts-navigation-close-button svg path{
119
- stroke: var(--dark-text);
120
- }
107
+ .pts-navigation-close-text {
108
+ color: var(--dark-text);
109
+ }
121
110
 
122
- .pts-navigation-link-expand-button{
123
- background-color: var(--dark-main);
124
- }
111
+ .pts-navigation-close-button {
112
+ background: var(--dark-main);
113
+ color: var(--dark-text);
114
+ }
125
115
 
126
- .pts-navigation-link-expand-button svg path{
127
- stroke: var(--dark-main)!important;
128
- }
116
+ .pts-navigation-close-button svg path {
117
+ stroke: var(--dark-text);
118
+ }
129
119
 
130
- .pts-navigation-with-close-button,
131
- .pts-navigation-menu-container,
132
- .pts-navigation-button,
133
- .pts-navigation-close-container,
134
- .pts-sub-navigation-item,
135
- .pts-sub-navigation-item a,
136
- .pts-navigation-button > a {
137
- background: var(--dark-main);
138
- color: var(--dark-text);
139
- border-color: var(--dark-background-third);
140
- }
120
+ .pts-navigation-link-expand-button {
121
+ background-color: var(--dark-main);
122
+ }
141
123
 
142
- .pts-navigation-button a {
124
+ .pts-navigation-link-expand-button svg path {
125
+ stroke: var(--dark-main) !important;
126
+ }
143
127
 
144
- color: var(--dark-text);
128
+ .pts-navigation-with-close-button,
129
+ .pts-navigation-menu-container,
130
+ .pts-navigation-button,
131
+ .pts-navigation-close-container,
132
+ .pts-sub-navigation-item,
133
+ .pts-sub-navigation-item a,
134
+ .pts-navigation-button > a {
135
+ background: var(--dark-main);
136
+ color: var(--dark-text);
137
+ border-color: var(--dark-background-third);
138
+ }
145
139
 
146
- }
140
+ .pts-navigation-button a {
141
+ color: var(--dark-text);
142
+ }
147
143
 
148
- .pts-sub-navigation-container {
144
+ .pts-sub-navigation-container {
149
145
  border-left: var(--dark-action) 5px solid;
150
- }
151
-
152
-
146
+ }
153
147
 
154
148
  /*-------MAIN CONTENT-------*/
155
149
  section,
@@ -171,7 +165,6 @@ background-color: var(--dark-main);
171
165
  .MoreInfoIcon svg {
172
166
  background-color: var(--dark-action);
173
167
  }
174
-
175
168
 
176
169
  .pts-serviceHeadlineAndBody-container a svg path,
177
170
  .MoreInfoIcon svg path {
@@ -423,11 +416,11 @@ background-color: var(--dark-main);
423
416
  stroke: #000000;
424
417
  }
425
418
 
426
- /*---------- LINK STANDARD ------------*/
427
- .pts-standard-link-icon svg {
419
+ /*---------- LINK STANDARD ------------*/
420
+ .pts-standard-link-icon svg {
428
421
  background-color: var(--dark-action);
429
422
  }
430
- .pts-standard-link svg path{
423
+ .pts-standard-link svg path {
431
424
  fill: var(--dark-main);
432
425
  color: #000000;
433
426
  }
@@ -437,20 +430,20 @@ background-color: var(--dark-main);
437
430
  }
438
431
 
439
432
  /*----------------- COLLAPSE -----------------*/
440
- .pts-collapse-content{
441
- color:var(--dark-text);
433
+ .pts-collapse-content {
434
+ color: var(--dark-text);
442
435
  }
443
436
 
444
437
  .pts-collapse-button {
445
438
  background-color: var(--dark-action);
446
- color:var(--dark-main);
439
+ color: var(--dark-main);
447
440
  }
448
441
 
449
- .pts-open-close-icon svg path{
442
+ .pts-open-close-icon svg path {
450
443
  fill: var(--dark-main);
451
444
  }
452
445
 
453
- .pts-collapse-body.open{
446
+ .pts-collapse-body.open {
454
447
  border-color: var(--dark-info);
455
448
  background: var(--dark-main);
456
449
  }
@@ -503,6 +496,26 @@ background-color: var(--dark-main);
503
496
  background-color: rgba(255, 255, 255, 0.5);
504
497
  }
505
498
 
499
+ /* ---------- ALERT IN TEXT ---------- */
500
+
501
+ .pts-alertInText-left {
502
+ border: 1px solid var(--dark-alertintext);
503
+ background-color: var(--dark-alertintext);
504
+ }
505
+ .pts-alertInText-left svg circle {
506
+ fill: var(--dark-background);
507
+ }
508
+ .pts-alertInText-left svg rect {
509
+ fill: var(--dark-alertintext);
510
+ }
511
+ .pts-alertInText-left svg .pts-alertInText-icon-dot-over-i {
512
+ fill: var(--dark-alertintext);
513
+ }
514
+ .pts-alertInText-right {
515
+ border: 1px solid var(--dark-alertintext);
516
+ color: var(--dark-alertintext-text);
517
+ }
518
+
506
519
  /*-------------Autofill-----------*/
507
520
  input:autofill,
508
521
  input:autofill:hover,
@@ -520,6 +533,4 @@ background-color: var(--dark-main);
520
533
  input:-moz-autofill {
521
534
  box-shadow: 0 0 0 1000px transparent inset !important;
522
535
  }
523
-
524
-
525
536
  }
@@ -1052,7 +1052,7 @@ input:focus-visible:-webkit-autofill {
1052
1052
  }
1053
1053
  .pts-alertInText-right {
1054
1054
  display: flex;
1055
- padding: 1.6rem;
1055
+ padding: 0 1.6rem;
1056
1056
  justify-content: flex-start;
1057
1057
  align-items: flex-start;
1058
1058
  width: 100%;