@policystudio/policy-studio-ui-vue 1.2.0-access.1 → 1.2.0-access.10

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 (36) hide show
  1. package/dist/css/psui_styles_output.css +275 -206
  2. package/doc/src/stories/Button.stories.ts +95 -73
  3. package/doc/src/stories/DropdownList.stories.ts +2 -2
  4. package/doc/src/stories/Typography.mdx +14 -14
  5. package/package.json +1 -1
  6. package/src/assets/scss/components/PsAccordion.scss +2 -2
  7. package/src/assets/scss/components/PsButton.scss +118 -71
  8. package/src/assets/scss/components/PsCardInfos.scss +1 -1
  9. package/src/assets/scss/components/PsChartLegend.scss +2 -2
  10. package/src/assets/scss/components/PsCheckbox.scss +2 -2
  11. package/src/assets/scss/components/PsChips.scss +1 -1
  12. package/src/assets/scss/components/PsCollapse.scss +1 -1
  13. package/src/assets/scss/components/PsDataTable.scss +1 -1
  14. package/src/assets/scss/components/PsDateCardInfo.scss +7 -4
  15. package/src/assets/scss/components/PsDialog.scss +2 -2
  16. package/src/assets/scss/components/PsDraggable.scss +1 -1
  17. package/src/assets/scss/components/PsDropdownList.scss +2 -2
  18. package/src/assets/scss/components/PsInlineSelector.scss +3 -3
  19. package/src/assets/scss/components/PsInput.scss +2 -2
  20. package/src/assets/scss/components/PsInputSelect.scss +2 -2
  21. package/src/assets/scss/components/PsInputTextArea.scss +3 -3
  22. package/src/assets/scss/components/PsMiniTag.scss +15 -14
  23. package/src/assets/scss/components/PsRadioButton.scss +2 -2
  24. package/src/assets/scss/components/PsSlider.scss +1 -1
  25. package/src/assets/scss/components/PsTabHeader.scss +1 -1
  26. package/src/assets/scss/components/PsTableResults.scss +12 -12
  27. package/src/assets/scss/components/PsTestimonialCard.scss +3 -3
  28. package/src/assets/scss/components/PsToast.scss +1 -1
  29. package/src/assets/scss/components/PsToggle.scss +1 -1
  30. package/src/assets/scss/components/_PsTableResults.scss +3 -3
  31. package/src/components/badges-and-tags/PsDateCardInfo.vue +16 -5
  32. package/src/components/buttons/PsButton.vue +74 -17
  33. package/src/components/chips/PsChips.vue +10 -2
  34. package/src/components/navigations/PsBreadcrumb.vue +1 -1
  35. package/src/components/table-results/PsTableResults.vue +2 -2
  36. package/tailwind.config.js +66 -86
package/src/assets/scss/components/PsButton.scss CHANGED
@@ -1,12 +1,10 @@
1
1
  @layer components {
2
-
3
2
  .psui-el-button {
4
-
5
- @apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md psui-transition-all psui-ease-in-out;
3
+ @apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out;
6
4
  transition-duration: 130ms;
7
5
 
8
6
  span {
9
- @apply psui-font-bold psui-flex-shrink-0;
7
+ @apply psui-font-semibold psui-flex-shrink-0;
10
8
  line-height: 130%;
11
9
  font-family: inherit;
12
10
  text-align: right;
@@ -17,152 +15,201 @@
17
15
  }
18
16
 
19
17
  &:focus-visible {
20
- outline: 2px solid #2563EB;
21
- outline-offset: 2px;
22
- border-radius: 6px;
23
- }
24
-
25
- &.icon-right {
26
- @apply psui-flex-row-reverse;
18
+ outline: 2px solid #2563eb;
19
+ outline-offset: 2px;
20
+ border-radius: 6px;
27
21
  }
28
-
22
+
29
23
  &.size-big {
30
- @apply psui-flex psui-items-center psui-content-center;
24
+ @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md;
31
25
  padding: 9.5px 16px;
32
-
33
- &.icon-left {
34
- padding: 8px 16px;
35
- i {
36
- font-size: 24px;
37
- margin-right: 8px;
38
- }
39
- }
26
+ font-size: 16px;
40
27
 
41
- &.icon-right {
42
- padding: 8px 16px;
43
- i {
44
- font-size: 24px;
45
- margin-left: 8px;
46
- }
47
- }
28
+ &.icon-left,
29
+ &.icon-right,
30
+ &.icon-both {
31
+ padding: 8px 16px;
32
+ }
33
+
34
+ .icon-left-side {
35
+ font-size: 24px;
36
+ margin-right: 8px;
37
+ }
38
+
39
+ .icon-right-side {
40
+ font-size: 24px;
41
+ margin-left: 8px;
42
+ }
48
43
  }
49
44
 
50
45
  &.size-medium {
51
- @apply psui-flex psui-items-center psui-content-center;
52
- padding: 7px 13px;
46
+ @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md;
47
+ padding: 6px 12px;
53
48
  font-size: 14px;
54
49
 
55
- &.icon-left i {
50
+ .icon-left-side {
56
51
  font-size: 18px;
57
52
  margin-right: 4px;
58
53
  }
59
54
 
60
- &.icon-right i {
55
+ .icon-right-side {
61
56
  font-size: 18px;
62
57
  margin-left: 4px;
63
58
  }
64
59
  }
65
60
 
66
61
  &.size-small {
67
- @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-1 psui-px-2;
62
+ @apply psui-flex psui-items-center psui-justify-center psui-py-1 psui-px-2 psui-rounded;
68
63
  font-size: 14px;
69
64
 
70
65
  &.layout-onlytext {
71
66
  &:active:not(.disabled) {
72
- @apply psui-bg-blue-20 psui-text-blue-60;
73
- box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
74
- }
67
+ @apply psui-bg-blue-20 psui-text-blue-60;
68
+ box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
69
+ }
75
70
  }
76
71
 
77
72
  &.hover.layout-onlytext {
78
- @apply psui-text-blue-60 psui-bg-blue-20 !important;
73
+ @apply psui-bg-blue-20 psui-text-blue-60 !important;
79
74
  }
80
75
 
81
- &.icon-left {
82
- i {
83
- font-size: 18px;
84
- margin-right: 4px;
85
- }
76
+ .icon-left-side {
77
+ font-size: 18px;
78
+ margin-right: 4px;
86
79
  }
87
80
 
88
- &.icon-right {
89
- i {
90
- font-size: 18px;
91
- margin-left: 4px;
92
- }
81
+ .icon-right-side {
82
+ font-size: 18px;
83
+ margin-left: 4px;
84
+ }
85
+ }
86
+
87
+ &.size-compact {
88
+ @apply psui-flex psui-items-center psui-justify-center psui-rounded;
89
+ padding: 2px 6px;
90
+ font-size: 14px;
91
+
92
+ .icon-left-side {
93
+ font-size: 16px;
94
+ margin-right: 2px;
95
+ }
96
+
97
+ .icon-right-side {
98
+ font-size: 16px;
99
+ margin-left: 2px;
93
100
  }
94
101
  }
95
102
 
96
103
  &.layout-solid {
97
- @apply psui-bg-blue-60 psui-text-white;
104
+ @apply psui-bg-blue-60 psui-text-white;
98
105
 
99
106
  &.hover {
100
- @apply psui-bg-blue-50 psui-text-white;
107
+ @apply psui-bg-blue-65 psui-text-white;
101
108
  }
102
109
 
103
110
  &:active:not(.disabled) {
104
- @apply psui-bg-blue-50 psui-text-white;
105
- box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
111
+ @apply psui-bg-blue-65 psui-text-white;
112
+ box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
106
113
  }
107
114
 
108
115
  &.disabled {
109
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
110
- }
116
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
117
+
118
+ .icon-left-side,
119
+ .icon-right-side {
120
+ @apply psui-text-gray-40;
121
+ }
122
+ }
111
123
  }
112
124
 
113
125
  &.layout-outline {
114
- @apply psui-text-blue-60 psui-border psui-border-blue-50;
126
+ @apply psui-text-gray-80 psui-border psui-border-blue-30;
115
127
  background: transparent;
116
128
 
129
+ .icon-left-side,
130
+ .icon-right-side {
131
+ @apply psui-text-blue-50;
132
+ }
133
+
117
134
  &.hover,
118
135
  &:active {
119
- @apply psui-border psui-border-blue-60
136
+ @apply psui-bg-blue-20 psui-text-blue-80 psui-border psui-border-blue-30;
137
+
138
+ .icon-left-side,
139
+ .icon-right-side {
140
+ @apply psui-text-blue-60;
141
+ }
120
142
  }
121
143
 
122
144
  &.disabled {
123
- @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
124
- }
145
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-border-gray-30 psui-cursor-default;
146
+
147
+ .icon-left-side,
148
+ .icon-right-side {
149
+ @apply psui-text-gray-40;
150
+ }
151
+ }
125
152
  }
126
153
 
127
154
  &.layout-ghost {
128
155
  @apply psui-bg-blue-20 psui-text-blue-60;
129
156
 
130
157
  &.hover {
131
- @apply psui-bg-blue-10
132
- }
158
+ @apply psui-bg-blue-10;
159
+ }
133
160
 
134
161
  &:active:not(.disabled) {
135
- box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
162
+ box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
136
163
  }
137
164
 
138
165
  &.disabled {
139
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
166
+ @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
140
167
  }
141
168
  }
142
169
 
143
170
  &.layout-onlytext {
144
- @apply psui-text-blue-60;
171
+ @apply psui-text-gray-80;
145
172
 
146
- &.disabled {
147
- @apply psui-text-gray-40 psui-cursor-default
173
+ .icon-left-side,
174
+ .icon-right-side {
175
+ @apply psui-text-blue-50;
148
176
  }
149
-
177
+
150
178
  &.hover {
151
- @apply psui-text-blue-50
179
+ @apply psui-bg-blue-20 psui-text-blue-80;
180
+
181
+ .icon-left-side,
182
+ .icon-right-side {
183
+ @apply psui-text-blue-65;
184
+ }
185
+ }
186
+
187
+ &.disabled {
188
+ @apply psui-text-gray-60 psui-cursor-default;
189
+
190
+ .icon-left-side,
191
+ .icon-right-side {
192
+ @apply psui-text-gray-40;
193
+ }
152
194
  }
153
195
  }
154
196
 
155
197
  &.layout-caution {
156
- @apply psui-bg-red-10 psui-text-red-20;
198
+ @apply psui-bg-red-80 psui-text-white;
157
199
 
158
- &.hover,
200
+ &.hover,
159
201
  &:active:not(.disabled) {
160
- @apply psui-bg-red-10 psui-text-red-70;
202
+ @apply psui-bg-red-10 psui-text-red-80;
161
203
  }
162
204
 
163
205
  &.disabled {
164
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
206
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
207
+
208
+ .icon-left-side,
209
+ .icon-right-side {
210
+ @apply psui-text-gray-40;
211
+ }
165
212
  }
166
213
  }
167
214
  }
168
- }
215
+ }
package/src/assets/scss/components/PsCardInfos.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  &-content {
11
- @apply psui-w-full psui-flex psui-justify-end psui-items-center psui-text-p;
11
+ @apply psui-w-full psui-flex psui-justify-end psui-items-center psui-text-16;
12
12
  }
13
13
 
14
14
  &-icon {
package/src/assets/scss/components/PsChartLegend.scss CHANGED
@@ -14,11 +14,11 @@
14
14
  }
15
15
 
16
16
  &-total {
17
- @apply psui-text-p psui-text-gray-80 psui-mt-1;
17
+ @apply psui-text-16 psui-text-gray-80 psui-mt-1;
18
18
  }
19
19
 
20
20
  &-percentage {
21
- @apply psui-text-gray-50 psui-text-p psui-mt-1;
21
+ @apply psui-text-gray-50 psui-text-16 psui-mt-1;
22
22
  }
23
23
  }
24
24
 
package/src/assets/scss/components/PsCheckbox.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  &.size-small {
27
- @apply psui-text-small;
27
+ @apply psui-text-14;
28
28
 
29
29
  &.layout-default {
30
30
  input:checked ~.psui-el-checkmark::before {
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  &.size-big {
68
- @apply psui-text-big;
68
+ @apply psui-text-16;
69
69
 
70
70
  &.layout-mixed {
71
71
  input:checked ~.psui-el-checkmark::before {
package/src/assets/scss/components/PsChips.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  .psui-el-chips-wrapper {
34
- @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
34
+ @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-14 psui-border psui-border-gray-40;
35
35
  padding: 5px 8px 5px 8px;
36
36
 
37
37
  &:hover {
package/src/assets/scss/components/PsCollapse.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .psui-el-collapse-item-header-wrapper {
41
- @apply psui-flex psui-items-center psui-py-2 psui-text-small psui-w-full;
41
+ @apply psui-flex psui-items-center psui-py-2 psui-text-14 psui-w-full;
42
42
 
43
43
  .psui-el-collapse-item-title {
44
44
  @apply psui-ml-1 psui-text-gray-70 hover:psui-text-blue-60;
package/src/assets/scss/components/PsDataTable.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components{
2
2
 
3
3
  .psui-el-table {
4
- @apply psui-w-full psui-table-fixed psui-border psui-border-gray-20 psui-text-small psui-text-gray-60 psui-border-separate psui-overflow-hidden psui-rounded;
4
+ @apply psui-w-full psui-table-fixed psui-border psui-border-gray-20 psui-text-14 psui-text-gray-60 psui-border-separate psui-overflow-hidden psui-rounded;
5
5
  border-spacing: 0;
6
6
 
7
7
  &.psui-text-right {
package/src/assets/scss/components/PsDateCardInfo.scss CHANGED
@@ -1,14 +1,17 @@
1
1
  @layer components {
2
2
  .psui-el-date-card {
3
- @apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-small psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
3
+ @apply psui-flex psui-text-14 psui-leading-5 psui-text-white psui-flex-col psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
4
4
 
5
5
  &-month-day, &-year {
6
- @apply psui-text-small;
7
- padding: 4px 8px;
6
+ @apply psui-px-2 psui-py-[2px];
8
7
  }
9
8
 
10
9
  &-year {
11
- @apply psui-bg-blue-50 psui-w-full psui-font-bold;
10
+ @apply psui-bg-blue-65;
11
+ }
12
+
13
+ &-month-day {
14
+ @apply psui-flex psui-items-center psui-space-x-1 psui-bg-blue-60;
12
15
  }
13
16
  }
14
17
  }
package/src/assets/scss/components/PsDialog.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  padding: 9.6px 9.6px 11.2px 9.6px;
32
32
 
33
33
  .psui-el-dialog-wrapper {
34
- @apply psui-flex-col psui-text-small
34
+ @apply psui-flex-col psui-text-14
35
35
  }
36
36
 
37
37
  i {
@@ -54,7 +54,7 @@
54
54
  @apply psui-ml-3
55
55
  }
56
56
  .psui-el-dialog-wrapper {
57
- @apply psui-text-small psui-py-1
57
+ @apply psui-text-14 psui-py-1
58
58
  }
59
59
  }
60
60
 
package/src/assets/scss/components/PsDraggable.scss CHANGED
@@ -42,7 +42,7 @@
42
42
  padding: 7px 16px;
43
43
 
44
44
  &-title {
45
- @apply psui-text-gray-50 psui-text-small psui-flex psui-items-center;
45
+ @apply psui-text-gray-50 psui-text-14 psui-flex psui-items-center;
46
46
 
47
47
  .psui-el-checkbox {
48
48
  @apply psui-text-gray-50;
package/src/assets/scss/components/PsDropdownList.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4 psui-space-y-1;
4
4
 
5
5
  .psui-el-dropdown-menu-list-item {
6
- @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all;
6
+ @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-14 psui-text-gray-60 psui-cursor-pointer psui-transition-all;
7
7
  padding: 7px 20px;
8
8
 
9
9
  &-left-label {
@@ -25,7 +25,7 @@
25
25
 
26
26
  &.layout-rich {
27
27
  .psui-el-dropdown-menu-list-item {
28
- @apply psui-text-p psui-rounded-md psui-mx-4;
28
+ @apply psui-text-16 psui-rounded-md psui-mx-4;
29
29
  padding: 11.5px 16px 11.5px 8px;
30
30
 
31
31
  &:hover {
package/src/assets/scss/components/PsInlineSelector.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .psui-el-inline-selector {
3
- @apply psui-w-auto psui-max-w-full psui-text-h4 psui-relative psui-flex-shrink-0 psui-text-blue-60 psui-box-border;
3
+ @apply psui-w-auto psui-max-w-full psui-text-20 psui-relative psui-flex-shrink-0 psui-text-blue-60 psui-box-border;
4
4
 
5
5
  ::-webkit-scrollbar {
6
6
  @apply psui-bg-gray-30;
@@ -18,7 +18,7 @@
18
18
  padding-bottom: 3px;
19
19
 
20
20
  &::placeholder {
21
- @apply psui-text-h4 psui-text-gray-40
21
+ @apply psui-text-20 psui-text-gray-40
22
22
  }
23
23
  }
24
24
 
@@ -79,7 +79,7 @@
79
79
  @apply psui-flex psui-items-center psui-w-full;
80
80
 
81
81
  > p {
82
- @apply psui-inline-block psui-text-big psui-text-gray-60 psui-flex-shrink-0;
82
+ @apply psui-inline-block psui-text-16 psui-text-gray-60 psui-flex-shrink-0;
83
83
  }
84
84
 
85
85
  p + p {
package/src/assets/scss/components/PsInput.scss CHANGED
@@ -68,7 +68,7 @@
68
68
  &.layout-default {
69
69
 
70
70
  input {
71
- @apply psui-text-p;
71
+ @apply psui-text-16;
72
72
  padding: 11.5px 16px;
73
73
  }
74
74
 
@@ -95,7 +95,7 @@
95
95
  /* ----------------------------------------- */
96
96
  &.layout-mini {
97
97
  input {
98
- @apply psui-text-small;
98
+ @apply psui-text-14;
99
99
  padding: 7px 8px;
100
100
  }
101
101
  &.status-resting {
package/src/assets/scss/components/PsInputSelect.scss CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
 
49
49
  select {
50
- @apply psui-appearance-none psui-bg-transparent psui-text-big psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
50
+ @apply psui-appearance-none psui-bg-transparent psui-text-16 psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
51
51
  padding: 11.5px 26px 11.5px 16px;
52
52
  min-width: 100%;
53
53
 
@@ -96,7 +96,7 @@
96
96
  }
97
97
 
98
98
  select {
99
- @apply psui-text-small psui-w-full psui-appearance-none psui-bg-transparent psui-border psui-border-gray-30;
99
+ @apply psui-text-14 psui-w-full psui-appearance-none psui-bg-transparent psui-border psui-border-gray-30;
100
100
  border-radius: 4px;
101
101
  padding: 7px 8px;
102
102
 
package/src/assets/scss/components/PsInputTextArea.scss CHANGED
@@ -22,13 +22,13 @@
22
22
  transition: ease 130ms;
23
23
 
24
24
  label {
25
- @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1;
25
+ @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-16 psui-py-1;
26
26
  font-size: 16px;
27
27
  line-height: 32px;
28
28
  }
29
29
 
30
30
  textarea {
31
- @apply psui-appearance-none psui-w-full psui-h-full psui-text-big psui-border psui-border-gray-30 psui-bg-white psui-text-gray-60 psui-resize-none psui-rounded-md psui-p-4;
31
+ @apply psui-appearance-none psui-w-full psui-h-full psui-text-16 psui-border psui-border-gray-30 psui-bg-white psui-text-gray-60 psui-resize-none psui-rounded-md psui-p-4;
32
32
 
33
33
  &:hover,
34
34
  &:focus,
@@ -37,7 +37,7 @@
37
37
  }
38
38
 
39
39
  ::placeholder {
40
- @apply psui-text-big
40
+ @apply psui-text-16
41
41
  }
42
42
  }
43
43
  }
package/src/assets/scss/components/PsMiniTag.scss CHANGED
@@ -1,31 +1,31 @@
1
1
  @layer components {
2
2
  .psui-el-mini-tag {
3
- @apply psui-flex psui-rounded-full psui-items-center psui-flex-row;
3
+ @apply psui-flex psui-flex-row psui-items-center psui-rounded;
4
4
  width: fit-content;
5
5
 
6
6
  span {
7
- @apply psui-w-full psui-font-bold psui-uppercase;
8
- padding: 3px 8px 3px 8px;
9
- font-size: 10px;
10
- line-height: 100%;
7
+ @apply psui-w-full psui-font-semibold;
8
+ padding: 1px 4px 3px 4px;
9
+ font-size: 12px;
10
+ line-height: 16px;
11
11
  letter-spacing: 0.5px;
12
12
  }
13
13
 
14
- &-layout{
15
- &-solid-info{
16
- @apply psui-bg-blue-50 psui-text-white
14
+ &-layout {
15
+ &-solid-info {
16
+ @apply psui-bg-blue-60 psui-text-white
17
17
  }
18
18
 
19
19
  &-info {
20
- @apply psui-bg-blue-20 psui-text-blue-60
20
+ @apply psui-bg-blue-20 psui-text-blue-65 psui-border psui-border-blue-40
21
21
  }
22
22
 
23
23
  &-solid-success {
24
24
  @apply psui-bg-green-20 psui-text-white
25
25
  }
26
-
26
+
27
27
  &-success {
28
- @apply psui-bg-green-10 psui-text-green-70
28
+ @apply psui-bg-green-10 psui-text-green-80 psui-border psui-border-green-20
29
29
  }
30
30
 
31
31
  &-solid-warning {
@@ -33,7 +33,8 @@
33
33
  }
34
34
 
35
35
  &-warning {
36
- @apply psui-bg-yellow-10 psui-text-yellow-70
36
+ @apply psui-bg-yellow-10 psui-border psui-border-yellow-20;
37
+ color: #584C25;
37
38
  }
38
39
 
39
40
  &-solid-error {
@@ -41,7 +42,7 @@
41
42
  }
42
43
 
43
44
  &-error {
44
- @apply psui-bg-red-10 psui-text-red-20
45
+ @apply psui-bg-red-10 psui-text-red-80 psui-border psui-border-red-20
45
46
  }
46
47
 
47
48
  &-solid-default {
@@ -53,4 +54,4 @@
53
54
  }
54
55
  }
55
56
  }
56
- }
57
+ }
package/src/assets/scss/components/PsRadioButton.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  &.size-small {
17
- @apply psui-text-small;
17
+ @apply psui-text-14;
18
18
 
19
19
  input {
20
20
  @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  &.size-big {
48
- @apply psui-text-small;
48
+ @apply psui-text-14;
49
49
 
50
50
  input {
51
51
  @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
package/src/assets/scss/components/PsSlider.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @apply psui-mb-2;
5
5
 
6
6
  span {
7
- @apply psui-text-gray-50 psui-text-small
7
+ @apply psui-text-gray-50 psui-text-14
8
8
  }
9
9
  }
10
10
 
package/src/assets/scss/components/PsTabHeader.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @apply psui-flex;
5
5
 
6
6
  button {
7
- @apply transition-default psui-text-small;
7
+ @apply transition-default psui-text-14;
8
8
 
9
9
  &.status-disabled {
10
10
  @apply psui-cursor-not-allowed;