@hmscodes/honey-core 1.0.22 → 1.0.23

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/input/input-floating-label.component.scss +46 -30
  4. package/projects/honey-core/src/lib/components/input-dropdown/hc-input-dropdown.component.scss +76 -24
  5. package/projects/honey-core/styles/hc-button.scss +1 -0
  6. package/projects/honey-core/styles/variables.css +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hmscodes/honey-core",
3
- "version": "1.0.22",
3
+ "version": "1.0.23",
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.22",
3
+ "version": "1.0.23",
4
4
  "exports": {
5
5
  "./styles/variables.css": {
6
6
  "default": "./styles/variables.css"
package/projects/honey-core/src/lib/components/input/input-floating-label.component.scss CHANGED
@@ -1,33 +1,34 @@
1
1
  .hc-input {
2
2
  position: relative;
3
- border: none;
3
+ display: block;
4
+ border: 0;
4
5
  padding: 0;
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);
6
+ margin: 0.5rem 0;
7
+ width: 100%;
8
+ min-inline-size: 0;
9
+ --hc-input-radius: 8px;
10
+ --hc-input-bg: var(--hc-text-white, var(--shc-text-white));
11
+ --hc-input-border: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 24%, transparent);
12
+ --hc-input-border-hover: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 34%, transparent);
10
13
  --hc-input-border-focus: var(--hc-primary-500, var(--shc-primary-500));
11
14
  --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
- }
15
+ --hc-input-label: var(--hc-text-light, var(--shc-text-light));
16
+ --hc-input-label-float: var(--hc-text-strong, var(--shc-text-strong));
17
+ --hc-input-error: var(--hc-primary-700, var(--shc-primary-700));
18
18
 
19
19
  input {
20
+ font-family: var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
20
21
  width: 100%;
21
- min-height: 52px;
22
- padding: 1.5rem 0.95rem 0.55rem;
23
- font-size: 0.98rem;
22
+ min-height: 32px;
23
+ padding: 0.6rem 0.78rem 0.28rem;
24
+ font-size: 0.95rem;
24
25
  line-height: 1.3;
25
26
  color: var(--hc-input-text);
26
27
  background: var(--hc-input-bg);
27
28
  border: 1px solid var(--hc-input-border);
28
29
  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;
30
+ box-shadow: none;
31
+ transition: border-color 0.16s ease, box-shadow 0.16s ease;
31
32
 
32
33
  &:hover:not(:focus) {
33
34
  border-color: var(--hc-input-border-hover);
@@ -36,12 +37,20 @@
36
37
  &:focus {
37
38
  outline: none;
38
39
  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);
40
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc-input-border-focus) 18%, transparent);
40
41
  }
41
42
 
42
- &:focus + label,
43
43
  &:not(:placeholder-shown) + label {
44
- transform: translateY(-1.03rem) scale(0.94);
44
+ top: -0.42rem;
45
+ transform: none;
46
+ font-size: 0.72rem;
47
+ color: var(--hc-input-label-float);
48
+ }
49
+
50
+ &:focus + label {
51
+ top: -0.42rem;
52
+ transform: none;
53
+ font-size: 0.72rem;
45
54
  color: var(--hc-input-border-focus);
46
55
  }
47
56
 
@@ -56,24 +65,31 @@
56
65
 
57
66
  &:disabled {
58
67
  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);
68
+ color: var(--hc-disabled-text, var(--shc-disabled-text));
69
+ background: color-mix(in srgb, var(--hc-disabled-bg, var(--shc-disabled-bg)) 45%, var(--hc-text-white, var(--shc-text-white)));
70
+ border-color: color-mix(in srgb, var(--hc-disabled-bg, var(--shc-disabled-bg)) 70%, var(--hc-text-white, var(--shc-text-white)));
62
71
  box-shadow: none;
72
+
73
+ + label {
74
+ color: var(--hc-disabled-text, var(--shc-disabled-text));
75
+ }
63
76
  }
64
77
  }
65
78
 
66
79
  label {
80
+ font-family: var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
67
81
  position: absolute;
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;
82
+ left: 0.62rem;
83
+ top: 0.72rem;
84
+ transform: none;
85
+ transform-origin: left center;
86
+ transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
72
87
  pointer-events: none;
73
88
  color: var(--hc-input-label);
74
89
  background-color: var(--hc-input-bg);
75
- padding: 0 0.35rem;
76
- border-radius: 8px;
77
- font-size: 0.92rem;
90
+ padding: 0 0.2rem;
91
+ border-radius: 4px;
92
+ font-size: 0.84rem;
93
+ line-height: 1.2;
78
94
  }
79
95
  }
package/projects/honey-core/src/lib/components/input-dropdown/hc-input-dropdown.component.scss CHANGED
@@ -1,38 +1,86 @@
1
1
  .hc-input {
2
2
  position: relative;
3
- border: none;
3
+ display: block;
4
+ border: 0;
4
5
  padding: 0;
5
- margin: 1rem 0;
6
+ margin: 0.5rem 0;
7
+ width: 100%;
8
+ min-inline-size: 0;
9
+ --hc-input-radius: 8px;
10
+ --hc-input-bg: var(--hc-text-white, var(--shc-text-white));
11
+ --hc-input-border: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 24%, transparent);
12
+ --hc-input-border-hover: color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 34%, transparent);
13
+ --hc-input-border-focus: var(--hc-primary-500, var(--shc-primary-500));
14
+ --hc-input-text: var(--hc-text-strong, var(--shc-text-strong));
15
+ --hc-input-label: var(--hc-text-light, var(--shc-text-light));
16
+ --hc-input-label-float: var(--hc-text-strong, var(--shc-text-strong));
6
17
 
7
18
  input {
19
+ font-family: var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
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: 32px;
22
+ padding: 0.6rem 0.78rem 0.28rem;
23
+ font-size: 0.95rem;
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: none;
30
+ transition: border-color 0.16s ease, box-shadow 0.16s 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 2px color-mix(in srgb, var(--hc-input-border-focus) 18%, transparent);
17
40
  }
18
41
 
19
- &:focus + label,
20
42
  &:not(:placeholder-shown) + label {
21
- transform: translateY(-1rem);
22
- font-size: 0.75rem;
23
- color: var(--hc-primary-500, var(--shc-primary-500));
43
+ top: -0.42rem;
44
+ transform: none;
45
+ font-size: 0.72rem;
46
+ color: var(--hc-input-label-float);
47
+ }
48
+
49
+ &:focus + label {
50
+ top: -0.42rem;
51
+ transform: none;
52
+ font-size: 0.72rem;
53
+ color: var(--hc-input-border-focus);
54
+ }
55
+
56
+ &:disabled {
57
+ cursor: not-allowed;
58
+ color: var(--hc-disabled-text, var(--shc-disabled-text));
59
+ background: color-mix(in srgb, var(--hc-disabled-bg, var(--shc-disabled-bg)) 45%, var(--hc-text-white, var(--shc-text-white)));
60
+ border-color: color-mix(in srgb, var(--hc-disabled-bg, var(--shc-disabled-bg)) 70%, var(--hc-text-white, var(--shc-text-white)));
61
+ box-shadow: none;
62
+
63
+ + label {
64
+ color: var(--hc-disabled-text, var(--shc-disabled-text));
65
+ }
24
66
  }
25
67
  }
26
68
 
27
69
  label {
70
+ font-family: var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
28
71
  position: absolute;
29
- left: 0.8rem;
30
- top: 1rem;
31
- transition: all 0.2s ease;
72
+ left: 0.62rem;
73
+ top: 0.72rem;
74
+ transform: none;
75
+ transform-origin: left center;
76
+ transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
32
77
  pointer-events: none;
33
- color: #666;
34
- background-color: white;
78
+ color: var(--hc-input-label);
79
+ background-color: var(--hc-input-bg);
35
80
  padding: 0 0.2rem;
81
+ border-radius: 4px;
82
+ font-size: 0.84rem;
83
+ line-height: 1.2;
36
84
  }
37
85
  }
38
86
 
@@ -41,26 +89,30 @@
41
89
 
42
90
  .dropdown-options {
43
91
  list-style: none;
44
- margin: 0;
45
- padding: 0;
92
+ margin: 0.2rem 0 0;
93
+ padding: 0.2rem;
46
94
  position: absolute;
47
95
  top: calc(100% + 4px);
48
96
  left: 0;
49
97
  right: 0;
50
- background: white;
51
- border: 1px solid #ccc;
52
- border-radius: 4px;
98
+ background: var(--hc-text-white, var(--shc-text-white));
99
+ border: 1px solid color-mix(in srgb, var(--hc-text-strong, var(--shc-text-strong)) 24%, transparent);
100
+ border-radius: 8px;
53
101
  z-index: 10;
54
102
  max-height: 200px;
55
103
  overflow-y: auto;
56
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
104
+ box-shadow: 0 8px 18px -16px rgba(16, 24, 40, 0.36);
57
105
 
58
106
  li {
59
- padding: 0.6rem 0.8rem;
107
+ font-family: var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
108
+ padding: 0.54rem 0.62rem;
109
+ border-radius: 6px;
60
110
  cursor: pointer;
111
+ transition: background-color 0.18s ease, transform 0.14s ease;
61
112
 
62
113
  &:hover {
63
- background-color: #f5f5f5;
114
+ background-color: color-mix(in srgb, var(--hc-background-main, var(--shc-background-main)) 55%, var(--hc-text-white, var(--shc-text-white)));
115
+ transform: none;
64
116
  }
65
117
  }
66
118
  }
package/projects/honey-core/styles/hc-button.scss CHANGED
@@ -43,6 +43,7 @@ $hcButtonPadding : 24px !default;
43
43
 
44
44
  @include flex(center);
45
45
  @include hcTypography($hcButtonFontSize, var(--color-button), $hcButtonFontWeight);
46
+ font-family : var(--hc-font-family, 'DM Sans', 'Nunito Sans', 'Segoe UI', sans-serif);
46
47
  gap : 8px;
47
48
  box-sizing : border-box;
48
49
  width : var(--width);
package/projects/honey-core/styles/variables.css CHANGED
@@ -1,4 +1,6 @@
1
1
  :root {
2
+ --shc-font-family : 'DM Sans', 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
3
+
2
4
  --shc-primary-500 : #FF7A00;
3
5
  --shc-primary-600 : #E86B00;
4
6
  --shc-primary-700 : #CC5D00;
@@ -31,6 +33,7 @@
31
33
  --hc-text-strong : var(--shc-text-strong);
32
34
  --hc-text-light : var(--shc-text-light);
33
35
  --hc-text-white : var(--shc-text-white);
36
+ --hc-font-family : var(--shc-font-family);
34
37
 
35
38
  --hc-background-main : var(--shc-background-main);
36
39
  --hc-disabled-bg : var(--shc-disabled-bg);