@aristobyte-ui/label 2.9.1 → 2.10.0

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 (3) hide show
  1. package/es/components/Label/Label.scss +98 -64
  2. package/lib/components/Label/Label.scss +98 -64
  3. package/package.json +2 -2
package/es/components/Label/Label.scss CHANGED
@@ -1,62 +1,63 @@
1
1
  @use '@aristobyte-ui/utils/styles' as *;
2
2
 
3
- // @TODO: update styles currently there is a "#{name}"
4
-
5
3
  .label {
6
- display: inline-flex;
7
4
  align-items: center;
8
- font-weight: 500;
9
- user-select: none;
10
- border-width: 1px;
11
- border-style: solid;
12
5
  border-radius: 0.625rem;
6
+ border-style: solid;
7
+ border-width: 1px;
8
+ display: inline-flex;
9
+ font-weight: 500;
10
+ line-height: 1rem;
13
11
  padding: 0.25rem 0.6875rem;
12
+ user-select: none;
13
+ }
14
+
15
+ .label-xsm {
16
+ font-size: 0.75rem;
17
+ padding: 0.125rem 0.5rem;
18
+ }
19
+
20
+ .label-sm {
14
21
  font-size: 0.875rem;
15
- line-height: 1rem;
22
+ padding: 0.25rem 0.625rem;
23
+ }
16
24
 
17
- &-size {
18
- &--xsm {
19
- font-size: 0.75rem;
20
- padding: 0.125rem 0.5rem;
21
- }
22
- &--sm {
23
- font-size: 0.875rem;
24
- padding: 0.25rem 0.625rem;
25
- }
26
- &--md {
27
- font-size: 1rem;
28
- padding: 0.375rem 0.75rem;
29
- }
30
- &--lg {
31
- font-size: 1.125rem;
32
- padding: 0.5rem 1rem;
33
- }
34
- &--xlg {
35
- font-size: 1.25rem;
36
- padding: 0.625rem 1.25rem;
37
- }
38
- }
25
+ .label-md {
26
+ font-size: 1rem;
27
+ padding: 0.375rem 0.75rem;
28
+ }
39
29
 
40
- &-radius {
41
- &--none {
42
- border-radius: 0;
43
- }
44
- &--sm {
45
- border-radius: 0.125rem;
46
- }
47
- &--md {
48
- border-radius: 0.375rem;
49
- }
50
- &--lg {
51
- border-radius: 0.75rem;
52
- }
53
- &--full {
54
- border-radius: 9999px;
55
- }
56
- }
30
+ .label-lg {
31
+ font-size: 1.125rem;
32
+ padding: 0.5rem 1rem;
33
+ }
34
+
35
+ .label-xlg {
36
+ font-size: 1.25rem;
37
+ padding: 0.625rem 1.25rem;
57
38
  }
58
39
 
59
- @mixin variant($name, $color) {
40
+ .label-radius-none {
41
+ border-radius: 0;
42
+ }
43
+
44
+ .label-radius-sm {
45
+ border-radius: 0.125rem;
46
+ }
47
+
48
+ .label-radius-md {
49
+ border-radius: 0.375rem;
50
+ }
51
+
52
+ .label-radius-lg {
53
+ border-radius: 0.75rem;
54
+ }
55
+
56
+ .label-radius-full {
57
+ border-radius: 9999px;
58
+ }
59
+
60
+ @mixin label-variant($name, $color, $hover-color) {
60
61
  .label-#{$name}-solid {
61
62
  background-color: rgba($color, 0.2);
62
63
  border-color: $color;
@@ -64,7 +65,15 @@
64
65
  }
65
66
 
66
67
  .label-#{$name}-solid:hover {
67
- background-color: rgba($color, 0.3);
68
+ background-color: rgba($color, 0.27);
69
+ }
70
+
71
+ .label-#{$name}-solid:disabled {
72
+ background-color: rgba($color, 0.5);
73
+ border-color: rgba($color, 0.5);
74
+ color: rgba($color, 0.5);
75
+ cursor: not-allowed;
76
+ opacity: 0.5;
68
77
  }
69
78
 
70
79
  .label-#{$name}-outline {
@@ -77,6 +86,14 @@
77
86
  background-color: rgba($color, 0.07);
78
87
  }
79
88
 
89
+ .label-#{$name}-outline:disabled {
90
+ background-color: transparent;
91
+ border-color: rgba($color, 0.5);
92
+ color: rgba($color, 0.5);
93
+ cursor: not-allowed;
94
+ opacity: 0.5;
95
+ }
96
+
80
97
  .label-#{$name}-outline-dashed {
81
98
  background-color: transparent;
82
99
  border-color: $color;
@@ -88,6 +105,14 @@
88
105
  background-color: rgba($color, 0.07);
89
106
  }
90
107
 
108
+ .label-#{$name}-outline-dashed:disabled {
109
+ background-color: transparent;
110
+ border-color: rgba($color, 0.5);
111
+ color: rgba($color, 0.5);
112
+ cursor: not-allowed;
113
+ opacity: 0.5;
114
+ }
115
+
91
116
  .label-#{$name}-no-outline {
92
117
  background-color: rgba($color, 0.2);
93
118
  border-color: transparent;
@@ -95,33 +120,42 @@
95
120
  }
96
121
 
97
122
  .label-#{$name}-no-outline:hover {
98
- background-color: rgba($color, 0.3);
123
+ background-color: rgba($color, 0.27);
124
+ }
125
+
126
+ .label-#{$name}-no-outline:disabled {
127
+ background-color: rgba($color, 0.5);
128
+ border-color: transparent;
129
+ color: rgba($color, 0.5);
130
+ cursor: not-allowed;
131
+ opacity: 0.5;
99
132
  }
100
133
 
101
134
  .label-#{$name}-glowing {
102
135
  background-color: rgba($color, 0.2);
103
- color: $color;
104
- box-shadow: 0 0 6px rgba($color, 0.5);
105
136
  border-color: transparent;
137
+ box-shadow: 0 0 6px rgba($color, 0.5);
138
+ color: $color;
106
139
  }
107
140
 
108
141
  .label-#{$name}-glowing:hover {
109
- box-shadow: 0 0 8px rgba($color, 0.7);
142
+ background-color: rgba($hover-color, 0.27);
143
+ box-shadow: 0 0 8px rgba($hover-color, 0.5);
144
+ color: $hover-color;
110
145
  }
111
146
 
112
- .label-#{$name}-solid:disabled,
113
- .label-#{$name}-outline:disabled,
114
- .label-#{$name}-outline-dashed:disabled,
115
- .label-#{$name}-no-outline:disabled,
116
147
  .label-#{$name}-glowing:disabled {
117
- opacity: 0.5;
148
+ background-color: rgba($color, 0.5);
149
+ box-shadow: 0 0 6px rgba($color, 0.5);
150
+ color: rgba($color, 0.5);
118
151
  cursor: not-allowed;
152
+ opacity: 0.5;
119
153
  }
120
154
  }
121
155
 
122
- @include variant('default', #1f2937);
123
- @include variant('primary', #2563eb);
124
- @include variant('secondary', #4f46e5);
125
- @include variant('success', #16a34a);
126
- @include variant('warning', #d97706);
127
- @include variant('error', #dc2626);
156
+ @include label-variant('default', $color-default, $color-default-hover);
157
+ @include label-variant('primary', $color-primary, $color-primary-hover);
158
+ @include label-variant('secondary', $color-secondary, $color-secondary-hover);
159
+ @include label-variant('success', $color-success, $color-success-hover);
160
+ @include label-variant('warning', $color-warning, $color-warning-hover);
161
+ @include label-variant('error', $color-error, $color-error-hover);
package/lib/components/Label/Label.scss CHANGED
@@ -1,62 +1,63 @@
1
1
  @use '@aristobyte-ui/utils/styles' as *;
2
2
 
3
- // @TODO: update styles currently there is a "#{name}"
4
-
5
3
  .label {
6
- display: inline-flex;
7
4
  align-items: center;
8
- font-weight: 500;
9
- user-select: none;
10
- border-width: 1px;
11
- border-style: solid;
12
5
  border-radius: 0.625rem;
6
+ border-style: solid;
7
+ border-width: 1px;
8
+ display: inline-flex;
9
+ font-weight: 500;
10
+ line-height: 1rem;
13
11
  padding: 0.25rem 0.6875rem;
12
+ user-select: none;
13
+ }
14
+
15
+ .label-xsm {
16
+ font-size: 0.75rem;
17
+ padding: 0.125rem 0.5rem;
18
+ }
19
+
20
+ .label-sm {
14
21
  font-size: 0.875rem;
15
- line-height: 1rem;
22
+ padding: 0.25rem 0.625rem;
23
+ }
16
24
 
17
- &-size {
18
- &--xsm {
19
- font-size: 0.75rem;
20
- padding: 0.125rem 0.5rem;
21
- }
22
- &--sm {
23
- font-size: 0.875rem;
24
- padding: 0.25rem 0.625rem;
25
- }
26
- &--md {
27
- font-size: 1rem;
28
- padding: 0.375rem 0.75rem;
29
- }
30
- &--lg {
31
- font-size: 1.125rem;
32
- padding: 0.5rem 1rem;
33
- }
34
- &--xlg {
35
- font-size: 1.25rem;
36
- padding: 0.625rem 1.25rem;
37
- }
38
- }
25
+ .label-md {
26
+ font-size: 1rem;
27
+ padding: 0.375rem 0.75rem;
28
+ }
39
29
 
40
- &-radius {
41
- &--none {
42
- border-radius: 0;
43
- }
44
- &--sm {
45
- border-radius: 0.125rem;
46
- }
47
- &--md {
48
- border-radius: 0.375rem;
49
- }
50
- &--lg {
51
- border-radius: 0.75rem;
52
- }
53
- &--full {
54
- border-radius: 9999px;
55
- }
56
- }
30
+ .label-lg {
31
+ font-size: 1.125rem;
32
+ padding: 0.5rem 1rem;
33
+ }
34
+
35
+ .label-xlg {
36
+ font-size: 1.25rem;
37
+ padding: 0.625rem 1.25rem;
57
38
  }
58
39
 
59
- @mixin variant($name, $color) {
40
+ .label-radius-none {
41
+ border-radius: 0;
42
+ }
43
+
44
+ .label-radius-sm {
45
+ border-radius: 0.125rem;
46
+ }
47
+
48
+ .label-radius-md {
49
+ border-radius: 0.375rem;
50
+ }
51
+
52
+ .label-radius-lg {
53
+ border-radius: 0.75rem;
54
+ }
55
+
56
+ .label-radius-full {
57
+ border-radius: 9999px;
58
+ }
59
+
60
+ @mixin label-variant($name, $color, $hover-color) {
60
61
  .label-#{$name}-solid {
61
62
  background-color: rgba($color, 0.2);
62
63
  border-color: $color;
@@ -64,7 +65,15 @@
64
65
  }
65
66
 
66
67
  .label-#{$name}-solid:hover {
67
- background-color: rgba($color, 0.3);
68
+ background-color: rgba($color, 0.27);
69
+ }
70
+
71
+ .label-#{$name}-solid:disabled {
72
+ background-color: rgba($color, 0.5);
73
+ border-color: rgba($color, 0.5);
74
+ color: rgba($color, 0.5);
75
+ cursor: not-allowed;
76
+ opacity: 0.5;
68
77
  }
69
78
 
70
79
  .label-#{$name}-outline {
@@ -77,6 +86,14 @@
77
86
  background-color: rgba($color, 0.07);
78
87
  }
79
88
 
89
+ .label-#{$name}-outline:disabled {
90
+ background-color: transparent;
91
+ border-color: rgba($color, 0.5);
92
+ color: rgba($color, 0.5);
93
+ cursor: not-allowed;
94
+ opacity: 0.5;
95
+ }
96
+
80
97
  .label-#{$name}-outline-dashed {
81
98
  background-color: transparent;
82
99
  border-color: $color;
@@ -88,6 +105,14 @@
88
105
  background-color: rgba($color, 0.07);
89
106
  }
90
107
 
108
+ .label-#{$name}-outline-dashed:disabled {
109
+ background-color: transparent;
110
+ border-color: rgba($color, 0.5);
111
+ color: rgba($color, 0.5);
112
+ cursor: not-allowed;
113
+ opacity: 0.5;
114
+ }
115
+
91
116
  .label-#{$name}-no-outline {
92
117
  background-color: rgba($color, 0.2);
93
118
  border-color: transparent;
@@ -95,33 +120,42 @@
95
120
  }
96
121
 
97
122
  .label-#{$name}-no-outline:hover {
98
- background-color: rgba($color, 0.3);
123
+ background-color: rgba($color, 0.27);
124
+ }
125
+
126
+ .label-#{$name}-no-outline:disabled {
127
+ background-color: rgba($color, 0.5);
128
+ border-color: transparent;
129
+ color: rgba($color, 0.5);
130
+ cursor: not-allowed;
131
+ opacity: 0.5;
99
132
  }
100
133
 
101
134
  .label-#{$name}-glowing {
102
135
  background-color: rgba($color, 0.2);
103
- color: $color;
104
- box-shadow: 0 0 6px rgba($color, 0.5);
105
136
  border-color: transparent;
137
+ box-shadow: 0 0 6px rgba($color, 0.5);
138
+ color: $color;
106
139
  }
107
140
 
108
141
  .label-#{$name}-glowing:hover {
109
- box-shadow: 0 0 8px rgba($color, 0.7);
142
+ background-color: rgba($hover-color, 0.27);
143
+ box-shadow: 0 0 8px rgba($hover-color, 0.5);
144
+ color: $hover-color;
110
145
  }
111
146
 
112
- .label-#{$name}-solid:disabled,
113
- .label-#{$name}-outline:disabled,
114
- .label-#{$name}-outline-dashed:disabled,
115
- .label-#{$name}-no-outline:disabled,
116
147
  .label-#{$name}-glowing:disabled {
117
- opacity: 0.5;
148
+ background-color: rgba($color, 0.5);
149
+ box-shadow: 0 0 6px rgba($color, 0.5);
150
+ color: rgba($color, 0.5);
118
151
  cursor: not-allowed;
152
+ opacity: 0.5;
119
153
  }
120
154
  }
121
155
 
122
- @include variant('default', #1f2937);
123
- @include variant('primary', #2563eb);
124
- @include variant('secondary', #4f46e5);
125
- @include variant('success', #16a34a);
126
- @include variant('warning', #d97706);
127
- @include variant('error', #dc2626);
156
+ @include label-variant('default', $color-default, $color-default-hover);
157
+ @include label-variant('primary', $color-primary, $color-primary-hover);
158
+ @include label-variant('secondary', $color-secondary, $color-secondary-hover);
159
+ @include label-variant('success', $color-success, $color-success-hover);
160
+ @include label-variant('warning', $color-warning, $color-warning-hover);
161
+ @include label-variant('error', $color-error, $color-error-hover);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/label",
3
3
  "description": "AristoByteUI Label component: a reusable, styled label for forms and UI elements.",
4
- "version": "2.9.1",
4
+ "version": "2.10.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -49,7 +49,7 @@
49
49
  "sass": "^1.97.3"
50
50
  },
51
51
  "dependencies": {
52
- "@aristobyte-ui/utils": "^2.9.1"
52
+ "@aristobyte-ui/utils": "^2.10.0"
53
53
  },
54
54
  "exports": {
55
55
  ".": {