otimus-library 0.2.45 → 0.2.47

package/{styles → src/styles}/colors.scss

@@ -1,71 +1,71 @@
-@use './variables.scss';
-
-.oc.color {
-  // Purple Colors
-  &.p-1 {
-    color: variables.$color-brand-p-1;
-  }
-  &.p-2 {
-    color: variables.$color-brand-dp-1;
-  }
-  &.p-3 {
-    color: variables.$color-brand-p-3;
-  }
-  &.p-4 {
-    color: variables.$color-brand-p-4;
-  }
-  &.p-5 {
-    color: variables.$color-brand-p-5;
-  }
-  &.p-6 {
-    color: variables.$color-brand-p-6;
-  }
-
-  // Dark Purple Colors
-  &.dp-1 {
-    color: variables.$color-brand-dp-1;
-  }
-  &.dp-2 {
-    color: variables.$color-brand-dp-2;
-  }
-  &.dp-3 {
-    color: variables.$color-brand-dp-3;
-  }
-  &.dp-4 {
-    color: variables.$color-brand-dp-4;
-  }
-  &.dp-5 {
-    color: variables.$color-brand-dp-5;
-  }
-
-  // Green Colors
-  &.g-1 {
-    color: variables.$color-brand-g-1;
-  }
-  &.g-2 {
-    color: variables.$color-brand-g-2;
-  }
-  &.g-3 {
-    color: variables.$color-brand-g-3;
-  }
-  &.g-4 {
-    color: variables.$color-brand-g-4;
-  }
-  &.g-5 {
-    color: variables.$color-brand-g-5;
-  }
-  &.g-6 {
-    color: variables.$color-brand-g-6;
-  }
-
-  // Status Colors
-  &.error {
-    color: variables.$color-error;
-  }
-  &.success {
-    color: variables.$color-success;
-  }
-  &.error {
-    color: variables.$color-error;
-  }
+@use './variables.scss';
+
+.oc.color {
+  // Purple Colors
+  &.p-1 {
+    color: variables.$color-brand-p-1;
+  }
+  &.p-2 {
+    color: variables.$color-brand-dp-1;
+  }
+  &.p-3 {
+    color: variables.$color-brand-p-3;
+  }
+  &.p-4 {
+    color: variables.$color-brand-p-4;
+  }
+  &.p-5 {
+    color: variables.$color-brand-p-5;
+  }
+  &.p-6 {
+    color: variables.$color-brand-p-6;
+  }
+
+  // Dark Purple Colors
+  &.dp-1 {
+    color: variables.$color-brand-dp-1;
+  }
+  &.dp-2 {
+    color: variables.$color-brand-dp-2;
+  }
+  &.dp-3 {
+    color: variables.$color-brand-dp-3;
+  }
+  &.dp-4 {
+    color: variables.$color-brand-dp-4;
+  }
+  &.dp-5 {
+    color: variables.$color-brand-dp-5;
+  }
+
+  // Green Colors
+  &.g-1 {
+    color: variables.$color-brand-g-1;
+  }
+  &.g-2 {
+    color: variables.$color-brand-g-2;
+  }
+  &.g-3 {
+    color: variables.$color-brand-g-3;
+  }
+  &.g-4 {
+    color: variables.$color-brand-g-4;
+  }
+  &.g-5 {
+    color: variables.$color-brand-g-5;
+  }
+  &.g-6 {
+    color: variables.$color-brand-g-6;
+  }
+
+  // Status Colors
+  &.error {
+    color: variables.$color-error;
+  }
+  &.success {
+    color: variables.$color-success;
+  }
+  &.error {
+    color: variables.$color-error;
+  }
 }

package/{styles → src/styles}/components/buttons/buttons.scss

@@ -1,226 +1,226 @@
-@use '../../variables.scss';
-
-.oc.button {
-  height: 3rem;
-
-  padding: 0 2rem;
-
-  background-color: variables.$color-gray-4;
-  color: variables.$color-gray-1;
-
-  border-radius: 0.5rem;
-  border: none;
-
-  font-weight: 500;
-  font-size: 1rem;
-  transition: 0.15s ease;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  cursor: pointer;
-
-  span{
-    pointer-events: none;
-  }
-
-  &.disabled{
-    opacity: .4;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &.align-left{
-    padding-left: 1rem;
-  }
-
-  &.align-right{
-    padding-right: 1rem;
-  }
-
-  &:active{
-    transform: scale(0.99);
-    filter: brightness(0.97);
-  }
-
-  &.white {
-    background-color: variables.$color-white;
-    color: variables.$color-gray-3;
-  }
-
-  &.no-bg{
-    color: variables.$color-gray-3;
-    background-color: transparent;
-
-    &:hover{
-      background-color: variables.$color-gray-6;
-    }
-  }
-
-  &.error{
-    background-color: variables.$color-error;
-    color: variables.$color-gray-6;
-  }
-
-  //Purple Tones
-  &.p-1{
-    background-color: variables.$color-brand-p-1;
-    color: variables.$color-gray-6;
-  }
-  
-  &.p-2{
-    background-color: variables.$color-brand-dp-1;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-3{
-    background-color: variables.$color-brand-p-4;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-4{
-    background-color: variables.$color-brand-p-6;
-    color: variables.$color-gray-6;
-  }
-  
-  //Green Tones
-  &.g-1{
-    background-color: variables.$color-brand-g-1;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-2{
-    background-color: variables.$color-brand-g-2;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-3{
-    background-color: variables.$color-brand-g-3;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-4{
-    background-color: variables.$color-brand-g-6;
-    color: variables.$color-brand-dp-1;
-  }
-  
-  &.gray-1 {
-    background-color: variables.$color-gray-6;
-    color: variables.$color-gray-3
-  }
-
-  &.gray-2{
-    background-color: variables.$color-gray-4;
-    color: variables.$color-gray-1
-  }
-
-  &.gray-3{
-    background-color: variables.$color-gray-3;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-4{
-    background-color: variables.$color-gray-2;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-5{
-    background-color: variables.$color-gray-1;
-    color: variables.$color-gray-6;
-  }
-  
-  // SIZES
-  &.tiny {
-    height: 2rem !important;
-  }
-
-  &.small{
-    height: 2.5rem !important;
-  }
-
-  &.large{
-    height: 3.5rem !important;
-  }
-
-  //ICON
-  &.icon{
-    height: 3rem;
-    width: 3rem;
-    padding: 0;
-
-    gap: 0 ;
-
-    &.tiny{
-      width: 2rem !important;
-    }
-
-    &.small{
-      width: 2.5rem !important;
-      padding: 0;
-    }
-
-    &.large{
-      width: 3.5rem !important;
-      padding: 0;
-    
-      // font-size: 2rem !important;
-    }
-  }
-
-  &.outlined{
-    background-color: transparent;
-    border: 2px solid;
-
-    //Purple Tones
-    &.p-1{
-      color: variables.$color-brand-p-1;
-    }
-    
-    &.p-2{
-      color: variables.$color-brand-dp-1;
-    }
-  
-    &.p-3{
-      color: variables.$color-brand-p-4;
-    }
-  
-    &.p-4{
-      color: variables.$color-brand-p-6;
-    }
-    
-    //Green Tones
-    &.g-1{
-      color: variables.$color-brand-g-1;
-    }
-  
-    &.g-2{
-      color: variables.$color-brand-g-2;
-    }
-  
-    &.g-3{
-      color: variables.$color-brand-g-3;
-    }
-  
-    &.g-4{
-      color: variables.$color-brand-g-6;
-    }
-     
-    //Gray
-
-    &.gray-1{
-      color: variables.$color-gray-3;
-    }
-
-    &.gray-2{
-      color: variables.$color-gray-2;
-    }
-
-    &.gray-3{
-      color: variables.$color-gray-1;
-    }
-  }
-}
-
+@use '../../variables.scss';
+
+.oc.button {
+  height: 3rem;
+
+  padding: 0 2rem;
+
+  background-color: variables.$color-gray-4;
+  color: variables.$color-gray-1;
+
+  border-radius: 0.5rem;
+  border: none;
+
+  font-weight: 500;
+  font-size: 1rem;
+  transition: 0.15s ease;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  cursor: pointer;
+
+  span{
+    pointer-events: none;
+  }
+
+  &.disabled{
+    opacity: .4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &.align-left{
+    padding-left: 1rem;
+  }
+
+  &.align-right{
+    padding-right: 1rem;
+  }
+
+  &:active{
+    transform: scale(0.99);
+    filter: brightness(0.97);
+  }
+
+  &.white {
+    background-color: variables.$color-white;
+    color: variables.$color-gray-3;
+  }
+
+  &.no-bg{
+    color: variables.$color-gray-3;
+    background-color: transparent;
+
+    &:hover{
+      background-color: variables.$color-gray-6;
+    }
+  }
+
+  &.error{
+    background-color: variables.$color-error;
+    color: variables.$color-gray-6;
+  }
+
+  //Purple Tones
+  &.p-1{
+    background-color: variables.$color-brand-p-1;
+    color: variables.$color-gray-6;
+  }
+  
+  &.p-2{
+    background-color: variables.$color-brand-dp-1;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-3{
+    background-color: variables.$color-brand-p-4;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-4{
+    background-color: variables.$color-brand-p-6;
+    color: variables.$color-gray-6;
+  }
+  
+  //Green Tones
+  &.g-1{
+    background-color: variables.$color-brand-g-1;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-2{
+    background-color: variables.$color-brand-g-2;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-3{
+    background-color: variables.$color-brand-g-3;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-4{
+    background-color: variables.$color-brand-g-6;
+    color: variables.$color-brand-dp-1;
+  }
+  
+  &.gray-1 {
+    background-color: variables.$color-gray-6;
+    color: variables.$color-gray-3
+  }
+
+  &.gray-2{
+    background-color: variables.$color-gray-4;
+    color: variables.$color-gray-1
+  }
+
+  &.gray-3{
+    background-color: variables.$color-gray-3;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-4{
+    background-color: variables.$color-gray-2;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-5{
+    background-color: variables.$color-gray-1;
+    color: variables.$color-gray-6;
+  }
+  
+  // SIZES
+  &.tiny {
+    height: 2rem !important;
+  }
+
+  &.small{
+    height: 2.5rem !important;
+  }
+
+  &.large{
+    height: 3.5rem !important;
+  }
+
+  //ICON
+  &.icon{
+    height: 3rem;
+    width: 3rem;
+    padding: 0;
+
+    gap: 0 ;
+
+    &.tiny{
+      width: 2rem !important;
+    }
+
+    &.small{
+      width: 2.5rem !important;
+      padding: 0;
+    }
+
+    &.large{
+      width: 3.5rem !important;
+      padding: 0;
+    
+      // font-size: 2rem !important;
+    }
+  }
+
+  &.outlined{
+    background-color: transparent;
+    border: 2px solid;
+
+    //Purple Tones
+    &.p-1{
+      color: variables.$color-brand-p-1;
+    }
+    
+    &.p-2{
+      color: variables.$color-brand-dp-1;
+    }
+  
+    &.p-3{
+      color: variables.$color-brand-p-4;
+    }
+  
+    &.p-4{
+      color: variables.$color-brand-p-6;
+    }
+    
+    //Green Tones
+    &.g-1{
+      color: variables.$color-brand-g-1;
+    }
+  
+    &.g-2{
+      color: variables.$color-brand-g-2;
+    }
+  
+    &.g-3{
+      color: variables.$color-brand-g-3;
+    }
+  
+    &.g-4{
+      color: variables.$color-brand-g-6;
+    }
+     
+    //Gray
+
+    &.gray-1{
+      color: variables.$color-gray-3;
+    }
+
+    &.gray-2{
+      color: variables.$color-gray-2;
+    }
+
+    &.gray-3{
+      color: variables.$color-gray-1;
+    }
+  }
+}
+
 @import './buttons.shui.scss';