@ozdao/prometheus-framework 0.2.112 → 0.2.114

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -70,86 +70,79 @@
 </script>
 
 <template>
-	<section 
-		id="hero" 
-		class="pd-thin"
+	<div 
+		class="pd-t-8r pd-big bg-black t-white pos-relative o-hidden "
 	>
-
-		<div 
-			class="pd-big bg-black t-white pos-relative radius-extra o-hidden "
-		>
-			<div class="flex-column flex-center flex t-center pos-relative z-index-1">
-				
-				<h1 
-					class="mn-b-semi" 
-					v-html="t('title')"
-				/>
-
-				<p 
-					class="mn-b-big p-big t-transp" 
-					v-html="t('description')"
-				/>
-				
-				<FieldBig 
-					:input="mood" 
-			    :typingSpeed="100"
-			    :loopTyping="true"
-			    :enableTyping="true"
-			    :placeholder="t('placeholder')"
-			    :action="t('action')"
-			    @update:input="mood = $event"
-			    @action="router.push({name: 'Product Recommmendation', query: {mood: mood}})"
-					class="mn-b-big pd-big bg-black-transp-50 bg-blur-thin w-100 w-max-40r"
-				/>
-
-				<p 
-					class="w-m-60r t-transp mn-b-semi p-medium" 
-					v-html="t('subdescription')"
-				/>
-
-				<div style="max-width: 50rem;" class="w-100 h-max gap-thin cols-6">
-
-					<a 
-						v-for="(preset,index) in presets" 
-						:key="preset" 
-						@click.stop="router.push({name: 'Product Recommmendation', query: {mood: preset}})"
-						class="
-							uppercase 
-							pd-thin
-							t-medium
-							flex-center
-							flex-column
-							flex-nowrap
-							flex
-							bg-black-transp-50 
-							bg-blur-thin
-							radius-semi
-							cursor-pointer
-							transition-elastic
-							hover-easeInOut-1 
-						"
-					>
-						<img 
-							:src="(FILE_SERVER_URL || '') + '/icons/moods/' + preset + '.svg'" 
-							class="w-100"
-						/>
-
-						<span class="t-white"> 
-							{{ t(`presets.` + preset) }}
-						</span>
-					</a>
-
-				</div>
+		<div class="flex-column flex-center flex t-center pos-relative z-index-1">
+			
+			<h1 
+				class="mn-b-semi" 
+				v-html="t('title')"
+			/>
+
+			<p 
+				class="mn-b-big p-big t-transp" 
+				v-html="t('description')"
+			/>
+			
+			<FieldBig 
+				:input="mood" 
+		    :typingSpeed="100"
+		    :loopTyping="true"
+		    :enableTyping="true"
+		    :placeholder="t('placeholder')"
+		    :action="t('action')"
+		    @update:input="mood = $event"
+		    @action="router.push({name: 'Product Recommmendation', query: {mood: mood}})"
+				class="mn-b-big pd-big bg-black-transp-50 bg-blur-thin w-100 w-max-40r"
+			/>
+
+			<p 
+				class="w-m-60r t-transp mn-b-semi p-medium" 
+				v-html="t('subdescription')"
+			/>
+
+			<div style="max-width: 50rem;" class="w-100 h-max gap-thin cols-6">
+
+				<a 
+					v-for="(preset,index) in presets" 
+					:key="preset" 
+					@click.stop="router.push({name: 'Product Recommmendation', query: {mood: preset}})"
+					class="
+						uppercase 
+						pd-thin
+						t-medium
+						flex-center
+						flex-column
+						flex-nowrap
+						flex
+						bg-black-transp-50 
+						bg-blur-thin
+						radius-semi
+						cursor-pointer
+						transition-elastic
+						hover-easeInOut-1 
+					"
+				>
+					<img 
+						:src="(FILE_SERVER_URL || '') + '/icons/moods/' + preset + '.svg'" 
+						class="w-100"
+					/>
+
+					<span class="t-white"> 
+						{{ t(`presets.` + preset) }}
+					</span>
+				</a>
 
 			</div>
 
-      <div class="w-100 h-100 flex flex-center pos-absolute pos-t-0 pos-r-0 z-index-0">
-    	  <div style="background-image: url(/spiral.jpg)" class="spiral"></div>
-      </div>
-
 		</div>
 
-	</section>
+    <div class="w-100 h-100 flex flex-center pos-absolute pos-t-0 pos-r-0 z-index-0">
+  	  <div style="background-image: url(/spiral.jpg)" class="spiral"></div>
+    </div>
+
+	</div>
 </template>
 
 <style>

package/src/modules/products/components/sections/MenuSection.vue

@@ -5,7 +5,7 @@
 		</h2>
 
 		<transition name="fade" mode="out-in"  appear>
-			<div v-if="!menu"  class="w-100 h-15r radius-big flex-center bg-grey">
+			<div v-if="!menu"  class="w-100 h-15r radius-big flex-center bg-light">
 				<Loader class="pos-relative"/>
 			</div>
 
@@ -13,7 +13,7 @@
 				<router-link :to="getMarketplaceLink([category.url])"
 					v-for="(category,index) in store.categories.state.all" 
 					:key="category" 
-					class="cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-grey radius-big pd-medium grid-item"
+					class="cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-big pd-medium grid-item"
 				>
 
 					<video 

package/src/modules/products/components/sections/PopularProducts.vue

@@ -1,6 +1,6 @@
 <template>
 <div id="popularProducts" class="pd-thin">
-	<div class="bg-grey radius-big pd-t-big pd-b-big">
+	<div class="bg-light radius-big pd-t-big pd-b-big">
 
 		<h2 class="mn-b-semi t-center " v-html="t('title')"/>
 		
@@ -11,7 +11,7 @@
 		    	<transition name="fade" mode="out-in" appear>
 						<div 
 							v-if="!value.name" 
-							class="h-100 w-100 radius-big flex-center bg-grey"
+							class="h-100 w-100 radius-big flex-center bg-light"
 						>
 							<Loader class="pos-relative"/>
 						</div>

package/src/modules/products/components/sections/SectionProduct.vue

@@ -2,7 +2,7 @@
 	<div class="cols-2-1_2 w-100 gap-big">
 		
 		<div class="flex-nowrap flex-column flex pos-relative">
-			<div class="h-100 h-max-50vh bg-grey radius-big o-hidden">
+			<div class="h-100 h-max-50vh bg-light radius-big o-hidden">
 				<!-- PRODUCT IMAGE -->
 				<Images360
 					v-if="product && product.image3d"
@@ -13,7 +13,7 @@
 
 				<img
 					v-if="images[0] && !product.image3d"
-					class="h-100 bg-grey w-100"
+					class="h-100 bg-light w-100"
 					style="object-fit: contain;"
 					:src="(FILE_SERVER_URL || '') + images[0]"
 				/>
@@ -75,7 +75,7 @@
 				<div 
 					v-if="product.information.length > 0" 
 					v-for="information in product.information" 
-					class="w-100 pd-small radius-small bg-grey-transp-30 product-information"
+					class="w-100 pd-small radius-small bg-light-transp-30 product-information"
 				>
 					<p class="t-demi">{{ information.name }}</p>
 					<p>{{ information.value }}</p>

package/src/modules/products/products.client.js

@@ -16,7 +16,6 @@ import SectionProduct from './components/sections/SectionProduct.vue';
 import HeroRecommendation from './components/sections/HeroRecommendation.vue';
 import FilterProducts from './components/sections/FilterProducts.vue';
 // import MenuSection from './components/sections/MenuSection.vue';
-import SortProducts from './components/sections/SortProducts.vue';
 import EditModifications from './components/sections/EditModifications.vue';
 import PopularProducts from './components/sections/PopularProducts.vue';
 import EditProductInfo from './components/sections/EditProductInfo.vue';
@@ -57,7 +56,6 @@ export {
   HeroRecommendation,
   FilterProducts,
   // MenuSection,
-  SortProducts,
   EditModifications,
   PopularProducts,
   EditProductInfo,

package/src/modules/reports/components/pages/BackofficeReports.vue

@@ -8,7 +8,7 @@
       <div 
         v-for="report in state.all"
         :key="report._id"
-        class="radius-medium pd-small bg-grey"
+        class="radius-medium pd-small bg-light"
       >
         <!-- Here, you should update the properties of the report object to reflect the actual structure of a report -->
         <!-- For example, I'm using 'user', 'type', and 'reason'. You should replace them with actual report properties -->
@@ -16,19 +16,19 @@
         <p class="t-black p-small mn-b-small">
           <span class="uppercase t-transp">User</span>
           <br> 
-          <span class="pd-2px radius-big d-inline-block bg-grey t-semi">{{report.user}}</span> <!-- Updated this line -->
+          <span class="pd-2px radius-big d-inline-block bg-light t-semi">{{report.user}}</span> <!-- Updated this line -->
         </p>
 
         <p class="t-black p-small mn-b-small">
           <span class="uppercase t-transp">Type</span>
           <br> 
-          <span class="pd-2px radius-big d-inline-block bg-grey t-semi">{{report.type}}</span> <!-- Updated this line -->
+          <span class="pd-2px radius-big d-inline-block bg-light t-semi">{{report.type}}</span> <!-- Updated this line -->
         </p>
 
         <p class="t-black p-small mn-b-small">
           <span class="uppercase t-transp">Reason</span>
           <br> 
-          <span class="pd-2px radius-big d-inline-block bg-grey t-semi">{{report.reason}}</span> <!-- Updated this line -->
+          <span class="pd-2px radius-big d-inline-block bg-light t-semi">{{report.reason}}</span> <!-- Updated this line -->
         </p>
 
         <div class="gap-thin flex-nowrap flex">

package/src/modules/spots/components/blocks/CardSpot.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="radius-big o-hidden pos-relative cols-2-1_3">
-    <Map :apiKey="GOOGLE_MAPS_API_KEY" :location="{lat: spot.location.coordinates[1] ,lng: spot.location.coordinates[0]}" class=""/>
+    <Map 
+      :apiKey="GOOGLE_MAPS_API_KEY" 
+      :location="{
+        lat: spot.location.coordinates[1],
+        lng: spot.location.coordinates[0]
+      }" 
+      :locale="$i18n.locale"
+      class=""
+    />
 
     <div class="pd-medium w-100">
 

package/src/modules/spots/components/blocks/SpotMemberModify.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="br-grey radius-small mn-b-small">
+    <div class="br-grey-transp-25 radius-small mn-b-small">
       <VueSelect 
         v-if="props.spot === null"
         v-model="spotForm.subspot"
@@ -8,7 +8,7 @@
         :get-option-label='option => option.name' 
         class="w-100 mn-b-small"
       /> 
-      <div v-else class="pd-small br-grey br-1px br-solid">
+      <div v-else class="pd-small br-grey-transp-25 br-1px br-solid">
         {{ spotForm.name ? spotForm.name : 'Безымянный' }}
       </div>
     </div>

package/src/modules/spots/components/layouts/Spots.vue

@@ -37,7 +37,6 @@
 					</router-view>
 
 		</div>
-    <!-- <Footer/> -->
 	</div>
 </template>
 
@@ -53,7 +52,6 @@
  	import Field from "@pf/src/components/Field/Field.vue";
  	// Partials
 	import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
-	import Footer from '@pf/src/components/Footer/Footer.vue'
  	import Dropdown from "@pf/src/components/Dropdown/Dropdown.vue";
 
  	import Filters from '@pf/src/modules/marketplace/components/sections/Filters.vue'

package/src/modules/spots/components/pages/Spot.vue

@@ -25,7 +25,7 @@
         class="
           radius-small 
           o-hidden
-          br-1px br-solid br-grey 
+          br-1px br-solid br-grey-transp-25 
           mn-b-thin
         "
         >
@@ -43,7 +43,7 @@
            <ul>
             <li v-if="spot.members.length < 1">В отделе еще нет участников</li>
             <User 
-              class="br-b br-solid br-grey" 
+              class="br-b br-solid br-grey-transp-25" 
               v-for="(member, index) in spot.members" 
               :key="index" 
               :user="member.user" 
@@ -58,7 +58,7 @@
         class="
           radius-small 
           o-hidden
-          br-1px br-solid br-grey 
+          br-1px br-solid br-grey-transp-25 
           mn-b-thin
         "
         >
@@ -75,7 +75,7 @@
         <template #content>
           <ul>
             <li v-if="spot.subspots.length < 1">В отделе еще нет подотделов</li>
-            <SpotSub  v-for="(subspotsartment, index) in spot.subspots" @click="$router.push(`/app/organization/spots/${subspotsartment._id}`)" :key="index" class="br-b br-solid br-grey" :spot="subspotsartment" />
+            <SpotSub  v-for="(subspotsartment, index) in spot.subspots" @click="$router.push(`/app/organization/spots/${subspotsartment._id}`)" :key="index" class="br-b br-solid br-grey-transp-25" :spot="subspotsartment" />
           </ul>
         </template>
       </Spoiler>

package/src/modules/spots/components/pages/SpotEdit.vue

@@ -144,7 +144,7 @@
       </Block>
     </div>
 
-    <Button :submit="onDelete" :callback="redirectToDash" class="w-100 bg-grey">Delete Spot</Button>
+    <Button :submit="onDelete" :callback="redirectToDash" class="w-100 bg-light">Delete Spot</Button>
   </div>
 </template>
 

package/src/modules/spots/components/sections/PlaceModify.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="br-grey radius-small mn-b-small">
+    <div class="br-grey-transp-25 radius-small mn-b-small">
       <Select 
         :options="[
           {name: 'Кафе',        value: 'cafe'}, 

package/src/modules/spots/components/sections/Places.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <div class="br-grey radius-small mn-b-small">
+    <div class="br-grey-transp-25 radius-small mn-b-small">
       <Select 
         :options="[
           {name: 'Кафе',        value: 'cafe'}, 

package/src/modules/users/components/pages/Profile.vue

@@ -5,7 +5,7 @@
 	>
 		<div 
 			v-if="users.state.current.status === 'removed'"
-			class="flex-center flex pd-medium radius-big bg-grey uppercase t-semi w-100 h-100"
+			class="flex-center flex pd-medium radius-big bg-light uppercase t-semi w-100 h-100"
 		>
 			Sorry, user has been removed.
 		</div>
@@ -27,7 +27,7 @@
 
 			<section 
 
-				class="flex-center pos-relative flex flex-column t-center w-100 mn-b-semi radius-medium pd-medium bg-grey"
+				class="flex-center pos-relative flex flex-column t-center w-100 mn-b-semi radius-medium pd-medium bg-light"
 			>
 
 				<Dropdown 
@@ -158,7 +158,7 @@
 			
 			
 
-			<Menu class="mn-b-regular bg-grey">
+			<Menu class="mn-b-regular bg-light">
 
 			  <MenuItem @click="router.push({name: 'User Events', params: {_id: route.params._id}})" class="cursor-pointer">
 			    <IconEvents class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
@@ -176,7 +176,7 @@
 			  </MenuItem>
 			</Menu>
 
-			<Menu v-if="APP_NAME === 'Weeder'"class="mn-b-regular bg-grey">
+			<Menu v-if="APP_NAME === 'Weeder'"class="mn-b-regular bg-light">
 				<MenuItem @click="router.push({name: 'User Wallet', params: {_id: route.params._id}})" class="cursor-pointer">
 			    <IconGroups class="i-semi" :icon="true"/>
 			    <span>Wallet</span>
@@ -192,7 +192,7 @@
 			  
 			<Menu 
 				v-if="auth.state.user._id === route.params._id"
-				class="bg-grey"
+				class="bg-light"
 			>
 			  <MenuItem 
 			  	@click="router.push({

package/src/modules/users/components/pages/ProfileBlogposts.vue

@@ -20,7 +20,7 @@
 				{ name: 'Drafts', 		value: 'drafts' },
 				{ name: 'Following', 	value: 'following' },	
 			]"
-			class="mn-b-small o-hidden h5 radius-big bg-grey"
+			class="mn-b-small o-hidden h5 radius-big bg-light"
 		/>
 
 		<Feed 

package/src/modules/users/components/pages/ProfileComments.vue

@@ -10,7 +10,7 @@
 				{ name: 'My posts', 	value: 'posts' },
 				{ name: 'Following', 	value: 'hubs' },	
 			]"
-			class="mn-r-medium o-hidden h5 radius-big bg-grey"
+			class="mn-r-medium o-hidden h5 radius-big bg-light"
 		/>
 
 		<Feed 

package/src/modules/users/components/pages/ProfileEdit.vue

@@ -14,7 +14,7 @@
       v-model:field="user.username"     
       label="@"  
       placeholder="Not specified" 
-      class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+      class="mn-b-thin w-100 bg-light pd-medium radius-small" 
       disabled="true"
       :validation="organizationName" 
     />
@@ -23,7 +23,7 @@
     <!--  -->
     <h3 class="mn-b-small">Profile</h3>
 
-    <div class="mn-b-thin radius-small w-100 h-10r bg-grey flex-center flex-column flex">
+    <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
        <UploadImage 
           v-model:photo="user.profile.photo"
           :uploadPath="'users/' + user._id + '/avatars'"
@@ -36,7 +36,7 @@
       v-model:field="user.profile.name"     
       label="Name"  
       placeholder="Not specified" 
-      class="mn-b-thin bg-grey pd-medium radius-small" 
+      class="mn-b-thin bg-light pd-medium radius-small" 
       :validation="organizationName" 
     />
 
@@ -44,7 +44,7 @@
       v-model:field="user.profile.description"     
       label="Description"  
       placeholder="Not specified" 
-      class="mn-b-semi bg-grey pd-medium radius-small" 
+      class="mn-b-semi bg-light pd-medium radius-small" 
       disabled="true"
       :validation="organizationName" 
     />
@@ -56,7 +56,7 @@
       label="Birthday"  
       type="date"
       placeholder="Not specified" 
-      class="mn-b-semi bg-grey pd-medium radius-small" 
+      class="mn-b-semi bg-light pd-medium radius-small" 
       :validation="organizationName" 
     /> -->
     <h3 class="mn-b-small">Socials</h3>
@@ -66,25 +66,25 @@
       v-model:field="user.socials.instagram"
       label="Instagram"   
       placeholder="" 
-      class="mn-b-thin bg-grey pd-medium radius-small" 
+      class="mn-b-thin bg-light pd-medium radius-small" 
     />
     <Field 
       v-model:field="user.socials.twitter"
       label="Twitter"   
       placeholder="" 
-      class="mn-b-thin bg-grey pd-medium radius-small" 
+      class="mn-b-thin bg-light pd-medium radius-small" 
     />
     <Field 
       v-model:field="user.socials.facebook"
       label="Facebook"   
       placeholder="" 
-      class="mn-b-thin bg-grey pd-medium radius-small" 
+      class="mn-b-thin bg-light pd-medium radius-small" 
     />
     <Field 
       v-model:field="user.socials.telegram"
       label="Telegram"   
       placeholder="" 
-      class="mn-b-semi bg-grey pd-medium radius-small" 
+      class="mn-b-semi bg-light pd-medium radius-small" 
     />
     <!--  -->
     <h3 class="mn-b-small">Account</h3>
@@ -93,7 +93,7 @@
       v-model:field="user.phone"     
       label="Phone"  
       placeholder="Not specified" 
-      class="mn-b-thin bg-grey pd-medium mn-b-thin radius-small" 
+      class="mn-b-thin bg-light pd-medium mn-b-thin radius-small" 
       disabled="true"
       :validation="organizationName" 
     />
@@ -102,7 +102,7 @@
       v-model:field="user.email"     
       label="Email"  
       placeholder="Not specified" 
-      class="mn-b-semi  bg-grey pd-medium radius-small" 
+      class="mn-b-semi  bg-light pd-medium radius-small" 
       :disabled="true"
       :validation="organizationName" 
     />

package/src/modules/users/components/pages/ProfileEvents.vue

@@ -26,7 +26,7 @@
 				{ name: 'My', 	value: 'owner' },
 				{ name: 'Participant', 	value: 'participant' },	
 			]"
-			class="mn-b-small o-hidden h5 radius-big bg-grey"
+			class="mn-b-small o-hidden h5 radius-big bg-light"
 		/>
 
 		<Feed 

package/src/modules/users/components/pages/ProfileLikes.vue

@@ -10,7 +10,7 @@
 				{ name: 'My posts', 	value: 'posts' },
 				{ name: 'Following', 	value: 'hubs' },	
 			]"
-			class="mn-r-medium o-hidden h5 radius-big bg-grey"
+			class="mn-r-medium o-hidden h5 radius-big bg-light"
 		/>
 
 		<Feed 

package/src/modules/users/components/sections/FeaturedUsers.vue

@@ -17,7 +17,7 @@
       <div class="flex flex-nowrap">
         <CardUser 
           v-for="user in usersList.slice(0,6)" 
-          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-light pd-small radius-medium"
           :user="user" 
           :photo="user.profile.photo"
           :name="user.profile.name || user.phone || user.username"
@@ -38,7 +38,7 @@
       <div class="flex flex-nowrap">
         <CardUser 
           v-for="user in usersList.slice(7,14)" 
-          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-light pd-small radius-medium"
           :user="user" 
           :photo="user.profile.photo"
           :name="user.profile.name || user.phone || user.username"
@@ -59,7 +59,7 @@
       <div class="flex flex-nowrap">
         <CardUser 
           v-for="user in usersList.slice(15,22)" 
-          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-light pd-small radius-medium"
           :user="user" 
           :photo="user.profile.photo"
           :name="user.profile.name || user.phone || user.username"

package/src/modules/wallet/views/components/pages/Payments.vue

@@ -16,7 +16,7 @@
       :actions="[
         { to: { name: 'PaymentsCreate'}, label: 'Create Payment' }
       ]"
-      class="mn-b-small bg-grey bg-grey radius-big"
+      class="mn-b-small bg-light bg-light radius-big"
     />
 
     <Feed
@@ -42,7 +42,7 @@
     >
       <div
         v-for="payment in items" 
-         class="bg-grey pos-relative pd-medium radius-big"
+         class="bg-light pos-relative pd-medium radius-big"
       >
         {{payment}}
       </div>

package/src/modules/wallet/views/components/pages/Wallet.vue

@@ -25,14 +25,14 @@
 
        <div v-if="!state.account" class="mn-b-semi cols-2 gap-thin">
           <div
-            class="w-100 pd-medium radius-medium t-center bg-grey"
+            class="w-100 pd-medium radius-medium t-center bg-light"
           >
             <h3 class="mn-b-small">Make first order and start earning Weeder Token</h3>
             <button class="mn-l-auto mn-r-auto bg-main button">Explore marketplace</button>
           </div>
 
           <div
-            class="w-100 pd-medium flex-center flex flex-column radius-medium t-center bg-grey"
+            class="w-100 pd-medium flex-center flex flex-column radius-medium t-center bg-light"
           >
             <h3 
               v-if="!state.account"
@@ -84,7 +84,7 @@
 
     <section class="cols-3 gap-thin">
       <div 
-        class="radius-medium bg-grey"
+        class="radius-medium bg-light"
         v-for="income in state.rewards"
       > 
         <div class="flex-nowrap br-b br-black-transp-10 br-solid flex pd-medium">

package/src/styles/base/borders.scss

@@ -23,6 +23,10 @@ body {
 	.br-light 				{ border-color: rgba(var(--light), 	1.00); }
 	.br-white 				{ border-color: rgba(var(--white), 	1.00); }
 	.br-red 				{ border-color: red; }
+	// Border Grey transp
+	.br-grey-transp-50 		{ border-color: rgba(var(--grey), 	0.50); }
+	.br-grey-transp-25		{ border-color: rgba(var(--grey), 	0.25); }
+	.br-grey-transp-10		{ border-color: rgba(var(--grey), 	0.10); }
 	// Border Black Transp
 	.br-black-transp		{ border-color: rgba(var(--black), 0.05); }
 	.br-black-transp-5     	{ border-color: rgba(var(--black), 0.05); }