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