@policystudio/policy-studio-ui-vue 1.2.0-access.2 → 1.2.0-access.21

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 (37) hide show
  1. package/dist/css/psui_styles_output.css +585 -325
  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 +19 -28
  7. package/src/assets/scss/components/PsButton.scss +128 -91
  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 +25 -30
  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 +134 -134
  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/badges-and-tags/PsMiniTag.vue +5 -5
  33. package/src/components/buttons/PsButton.vue +111 -20
  34. package/src/components/navigations/PsBreadcrumb.vue +1 -1
  35. package/src/components/table-results/PsTableResults.vue +2 -2
  36. package/src/components/ui/PsIcon.vue +10 -5
  37. package/tailwind.config.js +70 -87
package/src/assets/scss/components/PsButton.scss CHANGED
@@ -1,168 +1,205 @@
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;
6
- transition-duration: 130ms;
3
+ @apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out psui-duration-[130ms] psui-no-underline psui-cursor-pointer;
7
4
 
8
5
  span {
9
- @apply psui-font-bold psui-flex-shrink-0;
10
- line-height: 130%;
11
- font-family: inherit;
12
- text-align: right;
6
+ @apply psui-font-semibold psui-flex-shrink-0 psui-leading-[130%] psui-font-[inherit] psui-text-right;
13
7
  }
14
8
 
15
9
  &:focus {
16
- outline: none;
10
+ @apply psui-outline-none;
17
11
  }
18
12
 
19
13
  &:focus-visible {
20
- outline: 2px solid #2563EB;
21
- outline-offset: 2px;
22
- border-radius: 6px;
23
- }
14
+ @apply psui-outline-2 psui-outline psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
15
+ }
24
16
 
25
- &.icon-right {
26
- @apply psui-flex-row-reverse;
17
+ &[href] {
18
+ @apply psui-inline-flex;
27
19
  }
28
-
20
+
29
21
  &.size-big {
30
- @apply psui-flex psui-items-center psui-content-center;
31
- padding: 9.5px 16px;
32
-
33
- &.icon-left {
34
- padding: 8px 16px;
35
- i {
36
- font-size: 24px;
37
- margin-right: 8px;
38
- }
39
- }
22
+ @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-[9.5px] psui-px-4 psui-text-[16px];
40
23
 
41
- &.icon-right {
42
- padding: 8px 16px;
43
- i {
44
- font-size: 24px;
45
- margin-left: 8px;
46
- }
47
- }
24
+ &.icon-left,
25
+ &.icon-right,
26
+ &.icon-both {
27
+ @apply psui-py-2 psui-px-4;
28
+ }
29
+
30
+ .icon-left-side {
31
+ @apply psui-text-[24px] psui-mr-2;
32
+ }
33
+
34
+ .icon-right-side {
35
+ @apply psui-text-[24px] psui-ml-2;
36
+ }
48
37
  }
49
38
 
50
39
  &.size-medium {
51
- @apply psui-flex psui-items-center psui-content-center;
52
- padding: 7px 13px;
53
- font-size: 14px;
40
+ @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-1.5 psui-px-3 psui-text-[14px];
54
41
 
55
- &.icon-left i {
56
- font-size: 18px;
57
- margin-right: 4px;
42
+ .icon-left-side {
43
+ @apply psui-text-[18px] psui-mr-1;
58
44
  }
59
45
 
60
- &.icon-right i {
61
- font-size: 18px;
62
- margin-left: 4px;
46
+ .icon-right-side {
47
+ @apply psui-text-[18px] psui-ml-1;
63
48
  }
64
49
  }
65
50
 
66
51
  &.size-small {
67
- @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-1 psui-px-2;
68
- font-size: 14px;
52
+ @apply psui-flex psui-items-center psui-justify-center psui-py-1 psui-px-2 psui-rounded psui-text-[14px];
69
53
 
70
- &.layout-onlytext {
54
+ &.layout-onlytext,
55
+ &.layout-textonly {
71
56
  &: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
- }
57
+ @apply psui-bg-blue-20 psui-text-blue-60 psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.05)];
58
+ }
75
59
  }
76
60
 
77
- &.hover.layout-onlytext {
78
- @apply psui-text-blue-60 psui-bg-blue-20 !important;
61
+ &.hover.layout-onlytext,
62
+ &.hover.layout-textonly {
63
+ @apply psui-bg-blue-20 psui-text-blue-60 !important;
79
64
  }
80
65
 
81
- &.icon-left {
82
- i {
83
- font-size: 18px;
84
- margin-right: 4px;
85
- }
66
+ .icon-left-side {
67
+ @apply psui-text-[18px] psui-mr-1;
86
68
  }
87
69
 
88
- &.icon-right {
89
- i {
90
- font-size: 18px;
91
- margin-left: 4px;
92
- }
70
+ .icon-right-side {
71
+ @apply psui-text-[18px] psui-ml-1;
93
72
  }
94
73
  }
95
74
 
96
- &.layout-solid {
97
- @apply psui-bg-blue-60 psui-text-white;
75
+ &.size-compact {
76
+ @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-0.5 psui-px-1.5 psui-text-[14px];
77
+
78
+ .icon-left-side {
79
+ @apply psui-text-[16px] psui-mr-0.5;
80
+ }
81
+
82
+ .icon-right-side {
83
+ @apply psui-text-[16px] psui-ml-0.5;
84
+ }
85
+ }
86
+
87
+ /* Layout Solid (alias: Primary) */
88
+ &.layout-solid,
89
+ &.layout-primary {
90
+ @apply psui-bg-blue-60 psui-text-white;
98
91
 
99
92
  &.hover {
100
- @apply psui-bg-blue-50 psui-text-white;
93
+ @apply psui-bg-blue-65 psui-text-white;
101
94
  }
102
95
 
103
96
  &: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);
97
+ @apply psui-bg-blue-65 psui-text-white psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.15)];
106
98
  }
107
99
 
108
100
  &.disabled {
109
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
110
- }
101
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
102
+
103
+ .icon-left-side,
104
+ .icon-right-side {
105
+ @apply psui-text-gray-40;
106
+ }
107
+ }
111
108
  }
112
109
 
113
- &.layout-outline {
114
- @apply psui-text-blue-60 psui-border psui-border-blue-50;
115
- background: transparent;
110
+ /* Layout Outline (alias: Secondary) */
111
+ &.layout-outline,
112
+ &.layout-secondary {
113
+ @apply psui-bg-transparent psui-text-gray-80 psui-border psui-border-blue-30;
114
+
115
+ .icon-left-side,
116
+ .icon-right-side {
117
+ @apply psui-text-blue-60;
118
+ }
116
119
 
117
120
  &.hover,
118
121
  &:active {
119
- @apply psui-border psui-border-blue-60
122
+ @apply psui-bg-blue-20 psui-text-blue-80 psui-border psui-border-blue-30;
123
+
124
+ .icon-left-side,
125
+ .icon-right-side {
126
+ @apply psui-text-blue-60;
127
+ }
120
128
  }
121
129
 
122
130
  &.disabled {
123
- @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
124
- }
131
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-border psui-border-gray-30 psui-cursor-default;
132
+
133
+ .icon-left-side,
134
+ .icon-right-side {
135
+ @apply psui-text-gray-40;
136
+ }
137
+ }
125
138
  }
126
139
 
127
- &.layout-ghost {
140
+ /* &.layout-ghost {
128
141
  @apply psui-bg-blue-20 psui-text-blue-60;
129
142
 
130
143
  &.hover {
131
- @apply psui-bg-blue-10
132
- }
144
+ @apply psui-bg-blue-10;
145
+ }
133
146
 
134
147
  &:active:not(.disabled) {
135
- box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
148
+ @apply psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.05)];
136
149
  }
137
150
 
138
151
  &.disabled {
139
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
152
+ @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
140
153
  }
141
- }
154
+ } */
142
155
 
143
- &.layout-onlytext {
144
- @apply psui-text-blue-60;
156
+ /* Layout OnlyText (alias: TextOnly) */
157
+ &.layout-onlytext,
158
+ &.layout-textonly {
159
+ @apply psui-text-gray-80;
145
160
 
146
- &.disabled {
147
- @apply psui-text-gray-40 psui-cursor-default
161
+ .icon-left-side,
162
+ .icon-right-side {
163
+ @apply psui-text-blue-60;
148
164
  }
149
-
165
+
150
166
  &.hover {
151
- @apply psui-text-blue-50
167
+ @apply psui-bg-blue-20 psui-text-blue-80;
168
+
169
+ .icon-left-side,
170
+ .icon-right-side {
171
+ @apply psui-text-blue-65;
172
+ }
173
+ }
174
+
175
+ &.disabled {
176
+ @apply psui-text-gray-60 psui-cursor-default;
177
+
178
+ .icon-left-side,
179
+ .icon-right-side {
180
+ @apply psui-text-gray-40;
181
+ }
152
182
  }
153
183
  }
154
184
 
155
- &.layout-caution {
156
- @apply psui-bg-red-10 psui-text-red-20;
185
+ /* Layout Caution (alias: Destructive) */
186
+ &.layout-caution,
187
+ &.layout-destructive {
188
+ @apply psui-bg-red-80 psui-text-white;
157
189
 
158
- &.hover,
190
+ &.hover,
159
191
  &:active:not(.disabled) {
160
- @apply psui-bg-red-10 psui-text-red-70;
192
+ @apply psui-bg-red-10 psui-text-red-80;
161
193
  }
162
194
 
163
195
  &.disabled {
164
- @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
196
+ @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
197
+
198
+ .icon-left-side,
199
+ .icon-right-side {
200
+ @apply psui-text-gray-40;
201
+ }
165
202
  }
166
203
  }
167
204
  }
168
- }
205
+ }
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,56 +1,51 @@
1
1
  @layer components {
2
2
  .psui-el-mini-tag {
3
- @apply psui-flex psui-rounded-full psui-items-center psui-flex-row;
4
- width: fit-content;
3
+ @apply psui-flex psui-flex-row psui-items-center psui-rounded psui-w-fit;
5
4
 
6
5
  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%;
11
- letter-spacing: 0.5px;
6
+ @apply psui-w-full psui-font-semibold psui-pt-[1px] psui-px-[4px] psui-pb-[3px] psui-text-[12px] psui-leading-[16px];
12
7
  }
13
8
 
14
- &-layout{
15
- &-solid-info{
16
- @apply psui-bg-blue-50 psui-text-white
9
+ &-layout {
10
+ &-info {
11
+ @apply psui-bg-blue-20 psui-text-blue-65 psui-border psui-border-blue-40;
17
12
  }
18
13
 
19
- &-info {
20
- @apply psui-bg-blue-20 psui-text-blue-60
14
+ &-success {
15
+ @apply psui-bg-green-10 psui-text-green-80 psui-border psui-border-green-20;
21
16
  }
22
17
 
23
- &-solid-success {
24
- @apply psui-bg-green-20 psui-text-white
18
+ &-warning {
19
+ @apply psui-bg-yellow-10 psui-text-yellow-60 psui-border psui-border-yellow-20;
25
20
  }
26
-
27
- &-success {
28
- @apply psui-bg-green-10 psui-text-green-70
21
+
22
+ &-error {
23
+ @apply psui-bg-red-10 psui-text-red-80 psui-border psui-border-red-20;
29
24
  }
30
25
 
31
- &-solid-warning {
32
- @apply psui-bg-yellow-20 psui-text-white
26
+ &-default {
27
+ @apply psui-bg-gray-10 psui-text-gray-60 psui-border psui-border-gray-30;
33
28
  }
34
29
 
35
- &-warning {
36
- @apply psui-bg-yellow-10 psui-text-yellow-70
30
+ &-dark-info {
31
+ @apply psui-bg-blue-60 psui-text-white;
37
32
  }
38
33
 
39
- &-solid-error {
40
- @apply psui-bg-red-20 psui-text-white
34
+ &-dark-success {
35
+ @apply psui-bg-green-80 psui-text-white;
41
36
  }
42
37
 
43
- &-error {
44
- @apply psui-bg-red-10 psui-text-red-20
38
+ &-dark-warning {
39
+ @apply psui-bg-yellow-80 psui-text-white;
45
40
  }
46
41
 
47
- &-solid-default {
48
- @apply psui-bg-gray-40 psui-text-white
42
+ &-dark-error {
43
+ @apply psui-bg-red-80 psui-text-white;
49
44
  }
50
45
 
51
- &-default {
52
- @apply psui-bg-gray-20 psui-text-gray-50
46
+ &-dark-default {
47
+ @apply psui-bg-gray-30 psui-text-gray-80;
53
48
  }
54
49
  }
55
50
  }
56
- }
51
+ }
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