@pinuts/bsr-uikit-relaunch 0.2.7 → 0.2.8

package/dist/styles/form.module.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 @import "./variables/_variables.scss";
 
 /* GENERAL INPUT STYLES */
@@ -9,7 +9,7 @@
   padding: 0 $base-gap * 4 0 $base-gap * 0.5;
 
   .label {
-    font-family: "TradeGothicNext";
+    font-family: "TradeGothicNext", "TradeGothicNextLT", sans-serif;
     font-size: $input-label-font-size;
     font-weight: $fontweight-bold;
     line-height: $input-label-line-height;
@@ -21,7 +21,8 @@
       margin-inline-start: $base-gap;
     }
 
-    &.labelFocused, .required {
+    &.labelFocused,
+    .required {
       color: $bsr-black-90;
     }
   }
@@ -31,7 +32,8 @@
     gap: $base-gap;
     position: relative;
 
-    .info, .success {
+    .info,
+    .success {
       display: flex;
       height: 18px;
       position: relative;
@@ -104,7 +106,7 @@
 .input,
 .select,
 .textarea {
-  font-family: "TradeGothicNext";
+  font-family: "TradeGothicNext", "TradeGothicNextLT", sans-serif;
   font-size: $inputField-font-size;
   font-weight: $fontweight-normal;
   line-height: $inputField-line-height;
@@ -118,22 +120,23 @@
   align-items: flex-start;
   align-self: stretch;
 
-  &:focus, &:focus-visible, &:active {
+  &:focus,
+  &:focus-visible,
+  &:active {
     color: $bsr-black-90;
     border-color: currentColor;
     outline: $bsr-border-width-m solid currentColor;
   }
 }
 
-/* SELECT INPUT */ 
+/* SELECT INPUT */
 .select {
-  appearance:none;
+  appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.75L6 5.25L10.5 0.75' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   background-position-x: calc(100% - #{$base-gap * 4});
   background-position-y: center;
   background-repeat: no-repeat;
 
-
   &:focus-visible {
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25L6 0.75L10.5 5.25' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   }
@@ -145,7 +148,7 @@
   flex-direction: column;
   gap: ($base-gap * 2);
   margin-bottom: $base-gap * 5;
-  font-family: "TradeGothicNext";
+  font-family: "TradeGothicNext", "TradeGothicNextLT", sans-serif;
 
   ul {
     list-style-type: none;
@@ -180,13 +183,14 @@
   }
 
   .helperText {
-      color: $bsr-black-60;
-      font-size: $input-label-font-size;
-      line-height: $input-label-line-height;
+    color: $bsr-black-60;
+    font-size: $input-label-font-size;
+    line-height: $input-label-line-height;
   }
 
   [aria-disabled="true"] {
-    input, label {
+    input,
+    label {
       color: $bsr-black-40;
       border-color: $bsr-black-40;
       pointer-events: none;
@@ -248,7 +252,10 @@ input[type="radio"] {
   outline: 3.4px solid white;
   outline-offset: $bsr-border-width-m * -1 - 3px;
 
-  &:hover, &:active, &:focus-visible, &:focus {
+  &:hover,
+  &:active,
+  &:focus-visible,
+  &:focus {
     cursor: pointer;
     background-color: $bsr-grey-100;
     border-width: 2px;
@@ -279,7 +286,7 @@ button {
   gap: $base-gap * 3;
   justify-content: center;
   min-height: $base-gap * 10;
-  p { 
+  p {
     margin: 0;
   }
 
@@ -291,7 +298,8 @@ button {
     justify-content: center;
     min-height: $base-gap * 10;
 
-    &:hover, &:focus-visible {
+    &:hover,
+    &:focus-visible {
       background-color: $bsr-brick-100 !important;
       color: $bsr-white-100 !important;
       border-color: $bsr-brick-100 !important;
@@ -307,7 +315,6 @@ button {
     justify-content: center;
     min-height: $base-gap * 10;
   }
-
 }
 
 button[type="submit"] {
@@ -317,14 +324,16 @@ button[type="submit"] {
   color: $bsr-white-100;
   border: $bsr-border-width-m solid $bsr-brick-100;
 
-  &:hover, &:focus-visible {
-      background-color: $bsr-white-100;
-      color: $bsr-brick-100;
-      text-decoration-color: currentColor;
+  &:hover,
+  &:focus-visible {
+    background-color: $bsr-white-100;
+    color: $bsr-brick-100;
+    text-decoration-color: currentColor;
   }
 
-  &:focus, &:focus-visible {
-      outline: none;
+  &:focus,
+  &:focus-visible {
+    outline: none;
   }
 }
 
@@ -334,37 +343,38 @@ form input[type="checkbox"]:read-only {
   border-width: 2px;
 }
 
-form input[type="checkbox"], form input[type="checkbox"] {
+form input[type="checkbox"],
+form input[type="checkbox"] {
   height: 0;
   width: 0;
   position: absolute;
   opacity: 0;
 }
 
-form input[type="checkbox"]+label {
+form input[type="checkbox"] + label {
   padding-left: 0;
 }
 
-form input[type="checkbox"]:checked+label {
+form input[type="checkbox"]:checked + label {
   color: #1e1e1e;
 }
 
-form input[type="checkbox"]:checked+label:before {
+form input[type="checkbox"]:checked + label:before {
   border-color: #1e1e1e;
   background-color: #fff;
   background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
 }
 
-form input[type="checkbox"]+label:hover:before{
+form input[type="checkbox"] + label:hover:before {
   background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75001 11.6251C5.57001 11.6251 5.38626 11.5613 5.24376 11.4263L0.743764 7.3013C0.440014 7.02005 0.417514 6.54755 0.698764 6.24005C0.980014 5.9363 1.45251 5.9138 1.76001 6.19505L5.70876 9.8138L14.2025 0.611304C14.4838 0.307554 14.9563 0.288804 15.2638 0.570054C15.5675 0.851304 15.5863 1.3238 15.305 1.6313L6.30501 11.3813C6.15876 11.5426 5.95626 11.6213 5.75376 11.6213L5.75001 11.6251Z%27 fill=%27%23808080%27 stroke=%27%23808080%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
   border-width: 2px;
 }
 
-form input[type="checkbox"]:checked+label:hover:before {
+form input[type="checkbox"]:checked + label:hover:before {
   background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
 }
 
-form input[type="checkbox"]+label:before {
+form input[type="checkbox"] + label:before {
   content: "";
   position: relative;
   height: 24px;
@@ -386,7 +396,7 @@ form input[type="checkbox"]+label:before {
 
 /* TAG */
 .tag {
-  position:relative;
+  position: relative;
   color: $bsr-grey-100;
   display: inline-flex;
   align-items: center;
@@ -413,12 +423,13 @@ form input[type="checkbox"]+label:before {
     background-color: transparent;
     color: $text-secondary;
   }
-  
+
   &:hover {
     cursor: pointer;
   }
 
-  &:focus, &:focus-within {
+  &:focus,
+  &:focus-within {
     box-shadow: rgba($bsr-brick-100, 0.5) 0px 0px 0px 4px;
     &:is(button):not(.disabled) {
       outline: $base-gap solid $bsr-brick-100;
@@ -451,7 +462,8 @@ form input[type="checkbox"]+label:before {
         }
       }
 
-      &:focus, &:focus-visible {
+      &:focus,
+      &:focus-visible {
         outline: none;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",