@henriquepetrelli/hp-design-system 1.1.13 → 1.1.15

package/dist/style.css

@@ -410,7 +410,7 @@ body {
 .button-tertiary__label[data-v-0401b00e] {
   display: block;
   color: inherit;
-}.button-icon[data-v-32ab443d] {
+}.button-icon[data-v-8cf8a123] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -423,36 +423,36 @@ body {
   border: 0;
   cursor: pointer;
 }
-.button-icon--lg[data-v-32ab443d] {
+.button-icon--lg[data-v-8cf8a123] {
   width: 64px;
   height: 64px;
 }
-.button-icon--sm[data-v-32ab443d] {
+.button-icon--sm[data-v-8cf8a123] {
   width: 32px;
   height: 32px;
   font-size: 15px;
 }
-.button-icon--is-loading[data-v-32ab443d] {
+.button-icon--is-loading[data-v-8cf8a123] {
   cursor: default;
 }
-.button-icon[data-v-32ab443d]:not(:disabled):not(.button-icon--is-loading):focus-visible {
+.button-icon[data-v-8cf8a123]:not(:disabled):not(.button-icon--is-loading):focus-visible {
   outline: 2px solid var(--color-secondary);
   outline-offset: 2px;
 }
-.button-icon[data-v-32ab443d]:not(:disabled):not(.button-icon--is-loading):hover {
+.button-icon[data-v-8cf8a123]:not(:disabled):not(.button-icon--is-loading):hover {
   transform: scale(1.0175);
   opacity: 0.9;
 }
-.button-icon[style*="--background-color: transparent"][data-v-32ab443d]:not(:disabled):not(.button-icon--is-loading):hover {
+.button-icon[style*="--background-color: transparent"][data-v-8cf8a123]:not(:disabled):not(.button-icon--is-loading):hover {
   background-color: rgba(var(--icon-color), 0.1);
 }
-.button-icon[data-v-32ab443d]:not(:disabled):not(.button-icon--is-loading):active {
+.button-icon[data-v-8cf8a123]:not(:disabled):not(.button-icon--is-loading):active {
   transform: scale(0.985);
 }
-.button-icon--disabled[data-v-32ab443d], .button-icon[data-v-32ab443d]:not(.button-icon--is-loading):disabled {
+.button-icon--disabled[data-v-8cf8a123], .button-icon[data-v-8cf8a123]:not(.button-icon--is-loading):disabled {
   opacity: 0.5;
   cursor: default;
-}.button-letter[data-v-4df7cc96] {
+}.button-letter[data-v-13b75270] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -461,40 +461,35 @@ body {
   border-radius: 50px;
   font-size: 1rem;
   font-weight: 600;
-  background-color: var(--background-color);
   border: 0;
   cursor: pointer;
+  background-color: var(--background-color);
+  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
 }
-.button-letter--lg[data-v-4df7cc96] {
-  font-size: 1.4rem;
-  font-weight: 600;
+.button-letter--lg[data-v-13b75270] {
   width: 64px;
   height: 64px;
+  font-size: 1.4rem;
 }
-.button-letter--sm[data-v-4df7cc96] {
+.button-letter--sm[data-v-13b75270] {
   width: 32px;
   height: 32px;
   font-size: 0.8rem;
-  font-weight: 600;
 }
-.button-letter--is-loading[data-v-4df7cc96] {
+.button-letter--is-loading[data-v-13b75270] {
   cursor: default;
 }
-.button-letter[data-v-4df7cc96]:not(:disabled):not(.button-letter--is-loading):focus-visible {
-  outline: 2px solid var(--color-secondary);
-  outline-offset: 2px;
-}
-.button-letter[data-v-4df7cc96]:not(:disabled):not(.button-letter--is-loading):hover {
+.button-letter[data-v-13b75270]:not(:disabled):not(.button-letter--is-loading):hover {
   transform: scale(1.0175);
-  opacity: 0.9;
-}
-.button-letter[style*="--background-color: transparent"][data-v-4df7cc96]:not(:disabled):not(.button-letter--is-loading):hover {
-  background-color: rgba(var(--letter-color), 0.1);
 }
-.button-letter[data-v-4df7cc96]:not(:disabled):not(.button-letter--is-loading):active {
+.button-letter[data-v-13b75270]:not(:disabled):not(.button-letter--is-loading):active {
   transform: scale(0.985);
 }
-.button-letter--disabled[data-v-4df7cc96], .button-letter[data-v-4df7cc96]:not(.button-letter--is-loading):disabled {
+.button-letter[data-v-13b75270]:not(:disabled):not(.button-letter--is-loading):focus-visible {
+  outline: 2px solid var(--color-secondary);
+  outline-offset: 2px;
+}
+.button-letter--disabled[data-v-13b75270], .button-letter[data-v-13b75270]:disabled {
   cursor: default;
 }.alert[data-v-10dcca72] {
   padding: 10px;
@@ -1289,39 +1284,39 @@ body {
 .toggle-switch__input:disabled + .toggle-switch__label[data-v-14c54b46] {
   cursor: not-allowed;
   opacity: 0.6;
-}.theme-switcher-container[data-v-699fb0fe] {
+}.theme-switcher-container[data-v-e4250caa] {
   position: relative;
   display: inline-block;
 }
-.toggle--checkbox[data-v-699fb0fe] {
+.toggle--checkbox[data-v-e4250caa] {
   position: absolute;
   opacity: 0;
   height: 0;
   width: 0;
 }
-.toggle--checkbox:checked ~ .background[data-v-699fb0fe] {
+.toggle--checkbox:checked ~ .background[data-v-e4250caa] {
   background: #1357a6;
 }
-.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe] {
+.toggle--checkbox:checked + .toggle--label[data-v-e4250caa] {
   background: var(--dark-background-color);
   border-color: var(--dark-border-color);
 }
-.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe] {
+.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-e4250caa] {
   left: 14px;
   width: 2px;
 }
-.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:before {
+.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-e4250caa]:before {
   width: 2px;
   height: 2px;
   top: -6px;
 }
-.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:after {
+.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-e4250caa]:after {
   width: 2px;
   height: 2px;
   left: -8px;
   top: 4px;
 }
-.toggle--label[data-v-699fb0fe] {
+.toggle--label[data-v-e4250caa] {
   width: 48px;
   height: 24px;
   background: var(--light-background-color);
@@ -1332,12 +1327,12 @@ body {
   transition: all 350ms ease-in;
   cursor: pointer;
 }
-.toggle--label[data-v-699fb0fe]:focus-visible {
+.toggle--label[data-v-e4250caa]:focus-visible {
   outline: 2px solid #005fcc;
   outline-offset: 2px;
   transition: 0s;
 }
-.toggle--label-background[data-v-699fb0fe] {
+.toggle--label-background[data-v-e4250caa] {
   width: 4px;
   height: 2px;
   border-radius: 2px;
@@ -1347,7 +1342,7 @@ body {
   top: 11px;
   transition: all 150ms ease-in;
 }
-.toggle--label-background[data-v-699fb0fe]:before {
+.toggle--label-background[data-v-e4250caa]:before {
   content: "";
   position: absolute;
   top: -4px;
@@ -1358,7 +1353,7 @@ body {
   left: -5px;
   transition: all 150ms ease-in;
 }
-.toggle--label-background[data-v-699fb0fe]:after {
+.toggle--label-background[data-v-e4250caa]:after {
   content: "";
   position: absolute;
   top: 4px;
@@ -1369,7 +1364,7 @@ body {
   left: -3px;
   transition: all 150ms ease-in;
 }
-.toggle--label[data-v-699fb0fe]:before {
+.toggle--label[data-v-e4250caa]:before {
   content: "";
   width: 18px;
   height: 18px;
@@ -1380,18 +1375,18 @@ body {
   top: 1px;
   left: 1px;
   transition: all 350ms ease-in;
-  animation-name: reverse-699fb0fe;
+  animation-name: reverse-e4250caa;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
 }
-.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:before {
+.toggle--checkbox:checked + .toggle--label[data-v-e4250caa]:before {
   background: #fff;
   border-color: #e8e8ea;
-  animation-name: switch-699fb0fe;
+  animation-name: switch-e4250caa;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
 }
-.toggle--label[data-v-699fb0fe]:after {
+.toggle--label[data-v-e4250caa]:after {
   content: "";
   position: absolute;
   box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
@@ -1404,11 +1399,11 @@ body {
   opacity: 0;
   transition: all 250ms ease-in;
 }
-.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:after {
+.toggle--checkbox:checked + .toggle--label[data-v-e4250caa]:after {
   opacity: 1;
   transition-delay: 350ms;
 }
-.theme-icons[data-v-699fb0fe] {
+.theme-icons[data-v-e4250caa] {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -1417,24 +1412,24 @@ body {
   width: 80%;
   left: 10%;
 }
-.sun-icon[data-v-699fb0fe],
-.moon-icon[data-v-699fb0fe] {
+.sun-icon[data-v-e4250caa],
+.moon-icon[data-v-e4250caa] {
   font-size: 10px;
   transition: opacity 0.3s ease;
 }
-.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-699fb0fe] {
+.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-e4250caa] {
   opacity: 1;
 }
-.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-699fb0fe] {
+.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-e4250caa] {
   opacity: 0.5;
 }
-.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-699fb0fe] {
+.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-e4250caa] {
   opacity: 0.5;
 }
-.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-699fb0fe] {
+.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-e4250caa] {
   opacity: 1;
 }
-@keyframes switch-699fb0fe {
+@keyframes switch-e4250caa {
 0% {
     left: 1px;
 }
@@ -1447,7 +1442,7 @@ body {
     width: 18px;
 }
 }
-@keyframes reverse-699fb0fe {
+@keyframes reverse-e4250caa {
 0% {
     left: 25px;
     width: 18px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@henriquepetrelli/hp-design-system",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "type": "module",
   "main": "./dist/hp-design-system.umd.js",
   "module": "./dist/hp-design-system.es.js",