@hmscodes/honey-core 1.0.21 → 1.0.22

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 (6) hide show
  1. package/package.json +1 -1
  2. package/projects/honey-core/package.json +1 -1
  3. package/projects/honey-core/src/lib/components/button/button.component.html +3 -1
  4. package/projects/honey-core/src/lib/components/button/button.component.scss +17 -12
  5. package/projects/honey-core/src/lib/components/input/input-floating-label.component.scss +56 -14
  6. package/projects/honey-core/styles/hc-button.scss +44 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hmscodes/honey-core",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "scripts": {
5
5
  "ng": "ng",
6
6
  "start": "ng serve",
package/projects/honey-core/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hmscodes/honey-core",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "exports": {
5
5
  "./styles/variables.css": {
6
6
  "default": "./styles/variables.css"
package/projects/honey-core/src/lib/components/button/button.component.html CHANGED
@@ -6,6 +6,8 @@
6
6
  (click)="onClick.emit($event)"
7
7
  >
8
8
  @if (!loading) {
9
+ <span class="hc-button__label">
9
10
  <ng-content />
11
+ </span>
10
12
  }
11
- </button>
13
+ </button>
package/projects/honey-core/src/lib/components/button/button.component.scss CHANGED
@@ -1,25 +1,30 @@
1
1
  @use '../../../../styles/hc-button.scss' as *;
2
2
 
3
3
  button {
4
- font-size : 50px;
4
+ position : relative;
5
+ overflow : hidden;
6
+ isolation : isolate;
5
7
 
6
8
  &.loading {
7
- position : relative;
9
+ pointer-events: none;
8
10
 
9
11
  &::before {
10
- content : "...";
12
+ content : "";
11
13
  position : absolute;
12
- top : -10px;
13
- color : var(--hc-text-white, var(--shc-text-white));
14
- font-size : 32px;
15
- animation : dotAnimation 1.5s infinite steps(4);
14
+ width : 16px;
15
+ height : 16px;
16
+ top : calc(50% - 8px);
17
+ left : calc(50% - 8px);
18
+ border-radius: 50%;
19
+ border : 2px solid color-mix(in srgb, currentColor 28%, transparent);
20
+ border-top-color: currentColor;
21
+ animation : spinner .8s linear infinite;
16
22
  }
17
23
  }
18
24
  }
19
25
 
20
- @keyframes dotAnimation {
21
- 0% { content: ""; }
22
- 25% { content: "."; }
23
- 50% { content: ".."; }
24
- 75% { content: "..."; }
26
+ @keyframes spinner {
27
+ to {
28
+ transform : rotate(360deg);
29
+ }
25
30
  }
package/projects/honey-core/src/lib/components/input/input-floating-label.component.scss CHANGED
@@ -3,35 +3,77 @@
3
3
  border: none;
4
4
  padding: 0;
5
5
  margin: 1rem 0;
6
+ --hc-input-radius: 14px;
7
+ --hc-input-bg: var(--hc-background-main, var(--shc-background-main));
8
+ --hc-input-border: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 16%, transparent);
9
+ --hc-input-border-hover: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 24%, transparent);
10
+ --hc-input-border-focus: var(--hc-primary-500, var(--shc-primary-500));
11
+ --hc-input-text: var(--hc-text-strong, var(--shc-text-strong));
12
+ --hc-input-label: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 62%, white);
13
+ --hc-input-error: var(--hc-danger-500, #dc3545);
14
+
15
+ &:focus-within {
16
+ filter: saturate(1.02);
17
+ }
6
18
 
7
19
  input {
8
20
  width: 100%;
9
- padding: 1.2rem 0.8rem 0.4rem;
10
- font-size: 1rem;
11
- border: 1px solid #ccc;
12
- border-radius: 4px;
21
+ min-height: 52px;
22
+ padding: 1.5rem 0.95rem 0.55rem;
23
+ font-size: 0.98rem;
24
+ line-height: 1.3;
25
+ color: var(--hc-input-text);
26
+ background: var(--hc-input-bg);
27
+ border: 1px solid var(--hc-input-border);
28
+ border-radius: var(--hc-input-radius);
29
+ box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04), 0 6px 16px -14px rgba(16, 24, 40, 0.32);
30
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
31
+
32
+ &:hover:not(:focus) {
33
+ border-color: var(--hc-input-border-hover);
34
+ }
13
35
 
14
36
  &:focus {
15
37
  outline: none;
16
- border-color: var(--hc-primary-500, var(--shc-primary-500));
38
+ border-color: var(--hc-input-border-focus);
39
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-input-border-focus) 22%, transparent), 0 14px 22px -18px rgba(16, 24, 40, 0.6);
17
40
  }
18
41
 
19
42
  &:focus + label,
20
43
  &:not(:placeholder-shown) + label {
21
- transform: translateY(-1rem);
22
- font-size: 0.75rem;
23
- color: var(--hc-primary-500, var(--shc-primary-500));
44
+ transform: translateY(-1.03rem) scale(0.94);
45
+ color: var(--hc-input-border-focus);
46
+ }
47
+
48
+ &.ng-invalid.ng-touched {
49
+ border-color: var(--hc-input-error);
50
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc-input-error) 20%, transparent);
51
+
52
+ + label {
53
+ color: var(--hc-input-error);
54
+ }
55
+ }
56
+
57
+ &:disabled {
58
+ cursor: not-allowed;
59
+ color: color-mix(in srgb, var(--hc-input-text) 58%, white);
60
+ background: color-mix(in srgb, var(--hc-input-bg) 90%, #f0f0f0);
61
+ border-color: color-mix(in srgb, var(--hc-input-border) 72%, white);
62
+ box-shadow: none;
24
63
  }
25
64
  }
26
65
 
27
66
  label {
28
67
  position: absolute;
29
- left: 0.8rem;
30
- top: 1rem;
31
- transition: all 0.2s ease;
68
+ left: 0.7rem;
69
+ top: 0.96rem;
70
+ transform-origin: left top;
71
+ transition: transform 0.2s ease, color 0.2s ease, top 0.2s ease;
32
72
  pointer-events: none;
33
- color: #666;
34
- background-color: white;
35
- padding: 0 0.2rem;
73
+ color: var(--hc-input-label);
74
+ background-color: var(--hc-input-bg);
75
+ padding: 0 0.35rem;
76
+ border-radius: 8px;
77
+ font-size: 0.92rem;
36
78
  }
37
79
  }
package/projects/honey-core/styles/hc-button.scss CHANGED
@@ -1,6 +1,6 @@
1
- $hcButtonBorderRadius : 12px !default;
1
+ $hcButtonBorderRadius : 14px !default;
2
2
  $hcButtonFontSize : 14px !default;
3
- $hcButtonFontWeight : normal !default;
3
+ $hcButtonFontWeight : 600 !default;
4
4
  $hcButtonPadding : 24px !default;
5
5
 
6
6
  /**
@@ -36,8 +36,9 @@ $hcButtonPadding : 24px !default;
36
36
  %hc-button {
37
37
  --color-button : var(--color);
38
38
  --color-button-hover : var(--hover-color);
39
+ --color-button-active : var(--hover-color);
39
40
  --width : fit-content;
40
- --height : 36px;
41
+ --height : 42px;
41
42
  --h-padding : #{$hcButtonPadding};
42
43
 
43
44
  @include flex(center);
@@ -51,11 +52,19 @@ $hcButtonPadding : 24px !default;
51
52
  outline : none;
52
53
  border : 1px solid transparent;
53
54
  border-radius : $hcButtonBorderRadius;
54
- transition : background .2s, color .2s, box-shadow .2s;
55
+ letter-spacing : 0.01em;
56
+ transform : translateY(0);
57
+ transition : background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .16s ease, filter .2s ease;
55
58
  cursor : pointer;
56
59
 
60
+ &:not(:disabled):focus-visible {
61
+ box-shadow : 0 0 0 3px hsla(var(--hc-primary-500-hsl, var(--shc-primary-500-hsl)), 0.24);
62
+ }
63
+
57
64
  &:disabled {
58
65
  @include colorButton(var(--hc-disabled-text, var(--shc-disabled-text)), var(--hc-disabled-bg, var(--shc-disabled-bg)), var(--hc-disabled-bg, var(--shc-disabled-bg)));
66
+ box-shadow : none;
67
+ opacity : 0.72;
59
68
  cursor : not-allowed;
60
69
  }
61
70
  }
@@ -72,12 +81,14 @@ $hcButtonPadding : 24px !default;
72
81
  &.c-primary {
73
82
  --color-button : var(--hc-background-primary, var(--shc-background-primary));
74
83
  --color-button-hover : var(--hc-background-primary-hover, var(--shc-background-primary-hover));
84
+ --color-button-active : var(--hc-primary-700, var(--shc-primary-700));
75
85
  }
76
86
 
77
87
  &.c-secondary {
78
88
  color : var(--hc-brown-600, var(--shc-brown-600)) !important;
79
89
  --color-button : var(--hc-background-secondary, var(--shc-background-secondary));
80
90
  --color-button-hover : var(--hc-background-secondary-hover, var(--shc-background-secondary-hover));
91
+ --color-button-active : var(--hc-secondary-700, var(--shc-secondary-700));
81
92
  }
82
93
  }
83
94
 
@@ -88,9 +99,22 @@ $hcButtonPadding : 24px !default;
88
99
  .hc-button.s-solid {
89
100
  @extend %hc-button;
90
101
  @include colorButton(var(--hc-background-main, var(--shc-background-main)), var(--color-button), transparent);
102
+ background-image : linear-gradient(180deg, color-mix(in srgb, var(--color-button) 86%, white), var(--color-button));
103
+ box-shadow : 0 12px 24px -16px hsla(var(--hc-primary-500-hsl, var(--shc-primary-500-hsl)), 0.72), 0 2px 4px rgba(0, 0, 0, 0.18);
91
104
 
92
105
  &:not(:disabled):hover {
93
106
  background : var(--color-button-hover);
107
+ background-image : linear-gradient(180deg, color-mix(in srgb, var(--color-button-hover) 90%, white), var(--color-button-hover));
108
+ transform : translateY(-1px);
109
+ box-shadow : 0 14px 24px -16px hsla(var(--hc-primary-500-hsl, var(--shc-primary-500-hsl)), 0.75), 0 6px 10px -8px rgba(0, 0, 0, 0.4);
110
+ }
111
+
112
+ &:not(:disabled):active {
113
+ background : var(--color-button-active);
114
+ background-image : none;
115
+ transform : translateY(0);
116
+ box-shadow : 0 4px 10px -8px rgba(0, 0, 0, 0.5);
117
+ filter : saturate(1.08);
94
118
  }
95
119
  }
96
120
 
@@ -100,9 +124,17 @@ $hcButtonPadding : 24px !default;
100
124
  .hc-button.s-hollow {
101
125
  @extend %hc-button;
102
126
  @include colorButton(var(--color-button), transparent, var(--color-button));
127
+ border-width : 1.5px;
128
+ backdrop-filter : saturate(1.1);
103
129
 
104
130
  &:not(:disabled):hover {
105
131
  @include colorButton(var(--hc-background-main, var(--shc-background-main)), var(--color-button), transparent);
132
+ transform : translateY(-1px);
133
+ }
134
+
135
+ &:not(:disabled):active {
136
+ @include colorButton(var(--hc-background-main, var(--shc-background-main)), var(--color-button-active), transparent);
137
+ transform : translateY(0);
106
138
  }
107
139
 
108
140
  &:disabled {
@@ -123,6 +155,12 @@ $hcButtonPadding : 24px !default;
123
155
 
124
156
  &:not(:disabled):hover {
125
157
  @include colorButton(var(--color-button-hover), transparent, transparent);
158
+ background : color-mix(in srgb, var(--color-button) 12%, transparent);
159
+ }
160
+
161
+ &:not(:disabled):active {
162
+ @include colorButton(var(--color-button-active), transparent, transparent);
163
+ background : color-mix(in srgb, var(--color-button) 20%, transparent);
126
164
  }
127
165
 
128
166
  &:disabled {
@@ -139,7 +177,7 @@ $hcButtonPadding : 24px !default;
139
177
  }
140
178
 
141
179
  &.h-small {
142
- --height : 32px;
180
+ --height : 36px;
143
181
  --h-padding : 16px;
144
182
  font-size : 12px;
145
183
  }
@@ -159,7 +197,7 @@ $hcButtonPadding : 24px !default;
159
197
  }
160
198
  }
161
199
 
162
- .hc-primary {
200
+ .c-primary {
163
201
  &:disabled {
164
202
  @include colorButton(hsla(var(--hc-primary-400-hsl), 0.5), transparent, hsla(var(--hc-primary-400-hsl), 0.5));
165
203
  }