otimus-library 0.3.47 → 0.3.49

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 (23) hide show
  1. package/README.md +26 -26
  2. package/fesm2022/otimus-library.mjs +82 -74
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +7 -1
  5. package/package.json +1 -1
  6. package/styles/colors.scss +70 -70
  7. package/styles/components/buttons/buttons.scss +225 -225
  8. package/styles/components/buttons/buttons.shui.scss +61 -61
  9. package/styles/components/index.scss +2 -2
  10. package/styles/components/inputs/inputs.scss +248 -248
  11. package/styles/components/inputs/inputs.shui.scss +225 -225
  12. package/styles/components/table/table.scss +98 -98
  13. package/styles/components/table/table.shui.scss +50 -50
  14. package/styles/components/tooltip.scss +26 -26
  15. package/styles/fonts.scss +178 -178
  16. package/styles/grid.scss +1122 -1122
  17. package/styles/patterns/shui/colors.shui.scss +154 -154
  18. package/styles/patterns/shui/fonts.shui.scss +65 -65
  19. package/styles/patterns/shui/index.shui.scss +24 -24
  20. package/styles/patterns/shui/variables.shui.scss +23 -23
  21. package/styles/states.scss +5 -5
  22. package/styles/styles.scss +47 -47
  23. package/styles/variables.scss +47 -47
package/styles/patterns/shui/colors.shui.scss CHANGED
@@ -1,155 +1,155 @@
1
- @import './variables.shui.scss';
2
-
3
- .shui, .shui .oc {
4
- &.color, .oc.color {
5
- // Base Color classes
6
- &.b-0 {
7
- color: variables.$color-shui-base-0;
8
- }
9
-
10
- &.b-1 {
11
- color: variables.$color-shui-base-1;
12
- }
13
-
14
- &.b-2 {
15
- color: variables.$color-shui-base-2;
16
- }
17
-
18
- // UI Color classes
19
- &.ui-0 {
20
- color: variables.$color-shui-ui-0;
21
- }
22
-
23
- &.ui-1 {
24
- color: variables.$color-shui-ui-1;
25
- }
26
-
27
- &.ui-2 {
28
- color: variables.$color-shui-ui-2;
29
- }
30
-
31
- &.ui-3 {
32
- color: variables.$color-shui-ui-3;
33
- }
34
-
35
- &.ui-4 {
36
- color: variables.$color-shui-ui-4;
37
- }
38
-
39
- &.ui-5 {
40
- color: variables.$color-shui-ui-5;
41
- }
42
-
43
- &.ui-6 {
44
- color: variables.$color-shui-ui-6;
45
- }
46
-
47
- &.ui-7 {
48
- color: variables.$color-shui-ui-7;
49
- }
50
-
51
- &.ui-8, &.p-1 {
52
- color: variables.$color-shui-ui-8 !important;
53
- }
54
-
55
- // Functional color classes
56
- &.f-green {
57
- color: variables.$color-shui-functional-green;
58
- }
59
-
60
- &.f-yellow {
61
- color: variables.$color-shui-functional-yellow;
62
- }
63
-
64
- &.f-red {
65
- color: variables.$color-shui-functional-red;
66
- }
67
- }
68
-
69
-
70
- &.bg, .oc.color.bg {
71
- // Base Color classes
72
- &.b-0 {
73
- background-color: variables.$color-shui-base-0;
74
- }
75
-
76
- &.b-1 {
77
- background-color: variables.$color-shui-base-0;
78
- }
79
-
80
- &.b-2 {
81
- background-color: variables.$color-shui-base-0;
82
- }
83
-
84
- &.b-3 {
85
- background-color: variables.$color-shui-base-0;
86
- }
87
-
88
- // UI Color classes
89
- &.ui-0 {
90
- background-color: variables.$color-shui-ui-0;
91
- }
92
-
93
- &.ui-1 {
94
- background-color: variables.$color-shui-ui-1;
95
- }
96
-
97
- &.ui-2 {
98
- background-color: variables.$color-shui-ui-2;
99
- }
100
-
101
- &.ui-3 {
102
- background-color: variables.$color-shui-ui-3;
103
- }
104
-
105
- &.ui-4 {
106
- background-color: variables.$color-shui-ui-4;
107
- }
108
-
109
- &.ui-5 {
110
- background-color: variables.$color-shui-ui-5;
111
- }
112
-
113
- &.ui-6 {
114
- background-color: variables.$color-shui-ui-6;
115
- }
116
-
117
- &.ui-7 {
118
- background-color: variables.$color-shui-ui-7;
119
- }
120
-
121
- &.ui-8, &.p-1 {
122
- background-color: variables.$color-shui-ui-8;
123
- }
124
-
125
- // Functional color classes
126
- &.f-green {
127
- background-color: variables.$color-shui-functional-green;
128
- }
129
-
130
- &.f-yellow {
131
- background-color: variables.$color-shui-functional-yellow;
132
- }
133
-
134
- &.f-red {
135
- background-color: variables.$color-shui-functional-red;
136
- }
137
- }
138
-
139
- &.text, .oc.color.text {
140
- &.text-primary {
141
- color: variables.$color-shui-ui-0;
142
- opacity: 90%;
143
- }
144
-
145
- &.text-secondary {
146
- color: variables.$color-shui-ui-0;
147
- opacity: 60%;
148
- }
149
-
150
- &.text-disabled {
151
- color: variables.$color-shui-ui-0;
152
- opacity: 60%;
153
- }
154
- }
1
+ @import './variables.shui.scss';
2
+
3
+ .shui, .shui .oc {
4
+ &.color, .oc.color {
5
+ // Base Color classes
6
+ &.b-0 {
7
+ color: variables.$color-shui-base-0;
8
+ }
9
+
10
+ &.b-1 {
11
+ color: variables.$color-shui-base-1;
12
+ }
13
+
14
+ &.b-2 {
15
+ color: variables.$color-shui-base-2;
16
+ }
17
+
18
+ // UI Color classes
19
+ &.ui-0 {
20
+ color: variables.$color-shui-ui-0;
21
+ }
22
+
23
+ &.ui-1 {
24
+ color: variables.$color-shui-ui-1;
25
+ }
26
+
27
+ &.ui-2 {
28
+ color: variables.$color-shui-ui-2;
29
+ }
30
+
31
+ &.ui-3 {
32
+ color: variables.$color-shui-ui-3;
33
+ }
34
+
35
+ &.ui-4 {
36
+ color: variables.$color-shui-ui-4;
37
+ }
38
+
39
+ &.ui-5 {
40
+ color: variables.$color-shui-ui-5;
41
+ }
42
+
43
+ &.ui-6 {
44
+ color: variables.$color-shui-ui-6;
45
+ }
46
+
47
+ &.ui-7 {
48
+ color: variables.$color-shui-ui-7;
49
+ }
50
+
51
+ &.ui-8, &.p-1 {
52
+ color: variables.$color-shui-ui-8 !important;
53
+ }
54
+
55
+ // Functional color classes
56
+ &.f-green {
57
+ color: variables.$color-shui-functional-green;
58
+ }
59
+
60
+ &.f-yellow {
61
+ color: variables.$color-shui-functional-yellow;
62
+ }
63
+
64
+ &.f-red {
65
+ color: variables.$color-shui-functional-red;
66
+ }
67
+ }
68
+
69
+
70
+ &.bg, .oc.color.bg {
71
+ // Base Color classes
72
+ &.b-0 {
73
+ background-color: variables.$color-shui-base-0;
74
+ }
75
+
76
+ &.b-1 {
77
+ background-color: variables.$color-shui-base-0;
78
+ }
79
+
80
+ &.b-2 {
81
+ background-color: variables.$color-shui-base-0;
82
+ }
83
+
84
+ &.b-3 {
85
+ background-color: variables.$color-shui-base-0;
86
+ }
87
+
88
+ // UI Color classes
89
+ &.ui-0 {
90
+ background-color: variables.$color-shui-ui-0;
91
+ }
92
+
93
+ &.ui-1 {
94
+ background-color: variables.$color-shui-ui-1;
95
+ }
96
+
97
+ &.ui-2 {
98
+ background-color: variables.$color-shui-ui-2;
99
+ }
100
+
101
+ &.ui-3 {
102
+ background-color: variables.$color-shui-ui-3;
103
+ }
104
+
105
+ &.ui-4 {
106
+ background-color: variables.$color-shui-ui-4;
107
+ }
108
+
109
+ &.ui-5 {
110
+ background-color: variables.$color-shui-ui-5;
111
+ }
112
+
113
+ &.ui-6 {
114
+ background-color: variables.$color-shui-ui-6;
115
+ }
116
+
117
+ &.ui-7 {
118
+ background-color: variables.$color-shui-ui-7;
119
+ }
120
+
121
+ &.ui-8, &.p-1 {
122
+ background-color: variables.$color-shui-ui-8;
123
+ }
124
+
125
+ // Functional color classes
126
+ &.f-green {
127
+ background-color: variables.$color-shui-functional-green;
128
+ }
129
+
130
+ &.f-yellow {
131
+ background-color: variables.$color-shui-functional-yellow;
132
+ }
133
+
134
+ &.f-red {
135
+ background-color: variables.$color-shui-functional-red;
136
+ }
137
+ }
138
+
139
+ &.text, .oc.color.text {
140
+ &.text-primary {
141
+ color: variables.$color-shui-ui-0;
142
+ opacity: 90%;
143
+ }
144
+
145
+ &.text-secondary {
146
+ color: variables.$color-shui-ui-0;
147
+ opacity: 60%;
148
+ }
149
+
150
+ &.text-disabled {
151
+ color: variables.$color-shui-ui-0;
152
+ opacity: 60%;
153
+ }
154
+ }
155
155
  }
package/styles/patterns/shui/fonts.shui.scss CHANGED
@@ -1,65 +1,65 @@
1
- @font-face {
2
- font-family: 'Siemens-Sans';
3
- src: url('../../../assets/fonts/siemens/SiemensSans-Roman.woff2') format('woff2'),
4
- url('../../../assets/fonts/siemens/SiemensSans-Roman.woff') format('woff');
5
- font-weight: normal;
6
- font-style: normal;
7
- }
8
-
9
- @font-face {
10
- font-family: 'Siemens-Sans';
11
- src: url('../../../assets/fonts/siemens/SiemensSans-Bold.woff2') format('woff2'),
12
- url('../../../assets/fonts/siemens/SiemensSans-Bold.woff') format('woff');
13
- font-weight: bold;
14
- font-style: normal;
15
- }
16
-
17
- @font-face {
18
- font-family: 'Siemens-Sans';
19
- src: url('../../../assets/fonts/siemens/SiemensSans-Italic.woff2') format('woff2'),
20
- url('../../../assets/fonts/siemens/SiemensSans-Italic.woff') format('woff');
21
- font-weight: normal;
22
- font-style: italic;
23
- }
24
-
25
- @font-face {
26
- font-family: 'Siemens-Sans';
27
- src: url('../../../assets/fonts/siemens/SiemensSans-BoldItalic.woff2') format('woff2'),
28
- url('../../../assets/fonts/siemens/SiemensSans-BoldItalic.woff') format('woff');
29
- font-weight: bold;
30
- font-style: italic;
31
- }
32
-
33
- @font-face {
34
- font-family: 'Siemens-Sans';
35
- src: url('../../../assets/fonts/siemens/SiemensSans-Black.woff2') format('woff2'),
36
- url('../../../assets/fonts/siemens/SiemensSans-Black.woff') format('woff');
37
- font-weight: 900;
38
- font-style: normal;
39
- }
40
-
41
- @font-face {
42
- font-family: 'Siemens-Sans';
43
- src: url('../../../assets/fonts/siemens/SiemensSans-BlackItalic.woff2') format('woff2'),
44
- url('../../../assets/fonts/siemens/SiemensSans-BlackItalic.woff') format('woff');
45
- font-weight: 900;
46
- font-style: italic;
47
- }
48
-
49
- /* Bree Global Headline */
50
- @font-face {
51
- font-family: 'Siemens-Font';
52
- src: url('../../../assets/fonts/siemens/SH-Bree-Headline-Regular.woff2') format('woff2'),
53
- url('../../../assets/fonts/siemens/SH-Bree-Headline-Regular.woff') format('woff');
54
- font-weight: normal;
55
- font-style: normal;
56
- }
57
-
58
- @font-face {
59
- font-family: 'Siemens-Font';
60
- src: url('../../../assets/fonts/siemens/SH-Bree-Headline-Oblique.woff2') format('woff2'),
61
- url('../../../assets/fonts/siemens/SH-Bree-Headline-Oblique.woff') format('woff');
62
- font-weight: normal;
63
- font-style: italic;
64
- }
65
-
1
+ @font-face {
2
+ font-family: 'Siemens-Sans';
3
+ src: url('../../../assets/fonts/siemens/SiemensSans-Roman.woff2') format('woff2'),
4
+ url('../../../assets/fonts/siemens/SiemensSans-Roman.woff') format('woff');
5
+ font-weight: normal;
6
+ font-style: normal;
7
+ }
8
+
9
+ @font-face {
10
+ font-family: 'Siemens-Sans';
11
+ src: url('../../../assets/fonts/siemens/SiemensSans-Bold.woff2') format('woff2'),
12
+ url('../../../assets/fonts/siemens/SiemensSans-Bold.woff') format('woff');
13
+ font-weight: bold;
14
+ font-style: normal;
15
+ }
16
+
17
+ @font-face {
18
+ font-family: 'Siemens-Sans';
19
+ src: url('../../../assets/fonts/siemens/SiemensSans-Italic.woff2') format('woff2'),
20
+ url('../../../assets/fonts/siemens/SiemensSans-Italic.woff') format('woff');
21
+ font-weight: normal;
22
+ font-style: italic;
23
+ }
24
+
25
+ @font-face {
26
+ font-family: 'Siemens-Sans';
27
+ src: url('../../../assets/fonts/siemens/SiemensSans-BoldItalic.woff2') format('woff2'),
28
+ url('../../../assets/fonts/siemens/SiemensSans-BoldItalic.woff') format('woff');
29
+ font-weight: bold;
30
+ font-style: italic;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: 'Siemens-Sans';
35
+ src: url('../../../assets/fonts/siemens/SiemensSans-Black.woff2') format('woff2'),
36
+ url('../../../assets/fonts/siemens/SiemensSans-Black.woff') format('woff');
37
+ font-weight: 900;
38
+ font-style: normal;
39
+ }
40
+
41
+ @font-face {
42
+ font-family: 'Siemens-Sans';
43
+ src: url('../../../assets/fonts/siemens/SiemensSans-BlackItalic.woff2') format('woff2'),
44
+ url('../../../assets/fonts/siemens/SiemensSans-BlackItalic.woff') format('woff');
45
+ font-weight: 900;
46
+ font-style: italic;
47
+ }
48
+
49
+ /* Bree Global Headline */
50
+ @font-face {
51
+ font-family: 'Siemens-Font';
52
+ src: url('../../../assets/fonts/siemens/SH-Bree-Headline-Regular.woff2') format('woff2'),
53
+ url('../../../assets/fonts/siemens/SH-Bree-Headline-Regular.woff') format('woff');
54
+ font-weight: normal;
55
+ font-style: normal;
56
+ }
57
+
58
+ @font-face {
59
+ font-family: 'Siemens-Font';
60
+ src: url('../../../assets/fonts/siemens/SH-Bree-Headline-Oblique.woff2') format('woff2'),
61
+ url('../../../assets/fonts/siemens/SH-Bree-Headline-Oblique.woff') format('woff');
62
+ font-weight: normal;
63
+ font-style: italic;
64
+ }
65
+
package/styles/patterns/shui/index.shui.scss CHANGED
@@ -1,24 +1,24 @@
1
- @use '../../variables.scss';
2
- @import './fonts.shui.scss';
3
- @import './colors.shui.scss';
4
-
5
- .shui {
6
- font-family: 'Siemens-sans';
7
-
8
- ::-webkit-scrollbar-thumb {
9
- background: variables.$color-shui-ui-8;
10
- border: 0px none #ffffff;
11
- border-radius: 52px;
12
- }
13
- ::-webkit-scrollbar-thumb:hover {
14
- background: variables.$color-shui-ui-8;
15
- }
16
- ::-webkit-scrollbar-thumb:active {
17
- background: variables.$color-shui-ui-8;
18
- }
19
- ::-webkit-scrollbar-track {
20
- background: variables.$color-shui-base-2;
21
- border: 0px none #ffffff;
22
- border-radius: 50px;
23
- }
24
- }
1
+ @use '../../variables.scss';
2
+ @import './fonts.shui.scss';
3
+ @import './colors.shui.scss';
4
+
5
+ .shui {
6
+ font-family: 'Siemens-sans';
7
+
8
+ ::-webkit-scrollbar-thumb {
9
+ background: variables.$color-shui-ui-8;
10
+ border: 0px none #ffffff;
11
+ border-radius: 52px;
12
+ }
13
+ ::-webkit-scrollbar-thumb:hover {
14
+ background: variables.$color-shui-ui-8;
15
+ }
16
+ ::-webkit-scrollbar-thumb:active {
17
+ background: variables.$color-shui-ui-8;
18
+ }
19
+ ::-webkit-scrollbar-track {
20
+ background: variables.$color-shui-base-2;
21
+ border: 0px none #ffffff;
22
+ border-radius: 50px;
23
+ }
24
+ }
package/styles/patterns/shui/variables.shui.scss CHANGED
@@ -1,23 +1,23 @@
1
- // Light base
2
- $color-shui-base-0: #ffffff;
3
- $color-shui-base-1: #ebebeb;
4
- $color-shui-base-2: #f5f5f5;
5
-
6
- $color-shui-ui-0: #009999;
7
- $color-shui-ui-1: #000000;
8
- $color-shui-ui-2: #ec6602;
9
- $color-shui-ui-3: #cf4b00;
10
- $color-shui-ui-4: #d85808;
11
- $color-shui-ui-5: #7d7d7d;
12
- $color-shui-ui-6: #c8c8c8;
13
- $color-shui-ui-7: #ffffff;
14
-
15
- $color-shui-ui-8: #0169b2;
16
-
17
- // Functional color
18
- $color-shui-functional-green: #009a38;
19
- $color-shui-functional-yellow: #ffd200;
20
- $color-shui-functional-red: #e7001d;
21
-
22
- // BW Colors
23
- $color-shui-black: #000000;
1
+ // Light base
2
+ $color-shui-base-0: #ffffff;
3
+ $color-shui-base-1: #ebebeb;
4
+ $color-shui-base-2: #f5f5f5;
5
+
6
+ $color-shui-ui-0: #009999;
7
+ $color-shui-ui-1: #000000;
8
+ $color-shui-ui-2: #ec6602;
9
+ $color-shui-ui-3: #cf4b00;
10
+ $color-shui-ui-4: #d85808;
11
+ $color-shui-ui-5: #7d7d7d;
12
+ $color-shui-ui-6: #c8c8c8;
13
+ $color-shui-ui-7: #ffffff;
14
+
15
+ $color-shui-ui-8: #0169b2;
16
+
17
+ // Functional color
18
+ $color-shui-functional-green: #009a38;
19
+ $color-shui-functional-yellow: #ffd200;
20
+ $color-shui-functional-red: #e7001d;
21
+
22
+ // BW Colors
23
+ $color-shui-black: #000000;
package/styles/states.scss CHANGED
@@ -1,5 +1,5 @@
1
- .oc.disabled{
2
- opacity: .5;
3
- pointer-events: none;
4
- cursor: not-allowed;
5
- }
1
+ .oc.disabled{
2
+ opacity: .5;
3
+ pointer-events: none;
4
+ cursor: not-allowed;
5
+ }
package/styles/styles.scss CHANGED
@@ -1,48 +1,48 @@
1
- @import './components/index.scss';
2
- @import './grid.scss';
3
- @import './colors.scss';
4
- @import './states.scss';
5
- @import './variables.scss';
6
- @import './fonts.scss';
7
- @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
8
-
9
- *{
10
- font-family: 'Ubuntu', sans-serif;
11
- box-sizing: border-box;
12
- }
13
-
14
- ::-webkit-scrollbar {
15
- width: 6px;
16
- height: 6px;
17
- }
18
- ::-webkit-scrollbar-button {
19
- width: 0px;
20
- height: 0px;
21
- }
22
- ::-webkit-scrollbar-thumb {
23
- background: #5505a2;
24
- border: 0px none #ffffff;
25
- border-radius: 52px;
26
- }
27
- ::-webkit-scrollbar-thumb:hover {
28
- background: #5505a2;
29
- }
30
- ::-webkit-scrollbar-thumb:active {
31
- background: #5505a2;
32
- }
33
- ::-webkit-scrollbar-track {
34
- background: #f8f9ff;
35
- border: 0px none #ffffff;
36
- border-radius: 50px;
37
- }
38
- ::-webkit-scrollbar-track:hover {
39
- background: #d1d5db;
40
- }
41
- ::-webkit-scrollbar-track:active {
42
- background: #d1d5db;
43
- }
44
- ::-webkit-scrollbar-corner {
45
- background: transparent;
46
- }
47
-
1
+ @import './components/index.scss';
2
+ @import './grid.scss';
3
+ @import './colors.scss';
4
+ @import './states.scss';
5
+ @import './variables.scss';
6
+ @import './fonts.scss';
7
+ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
8
+
9
+ *{
10
+ font-family: 'Ubuntu', sans-serif;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ ::-webkit-scrollbar {
15
+ width: 6px;
16
+ height: 6px;
17
+ }
18
+ ::-webkit-scrollbar-button {
19
+ width: 0px;
20
+ height: 0px;
21
+ }
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #5505a2;
24
+ border: 0px none #ffffff;
25
+ border-radius: 52px;
26
+ }
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #5505a2;
29
+ }
30
+ ::-webkit-scrollbar-thumb:active {
31
+ background: #5505a2;
32
+ }
33
+ ::-webkit-scrollbar-track {
34
+ background: #f8f9ff;
35
+ border: 0px none #ffffff;
36
+ border-radius: 50px;
37
+ }
38
+ ::-webkit-scrollbar-track:hover {
39
+ background: #d1d5db;
40
+ }
41
+ ::-webkit-scrollbar-track:active {
42
+ background: #d1d5db;
43
+ }
44
+ ::-webkit-scrollbar-corner {
45
+ background: transparent;
46
+ }
47
+
48
48
  @import './patterns/shui/index.shui.scss';