@tekkare/auriga 0.1.24 → 0.1.26

package/dist/runtime/components/argStyle.vue

@@ -291,10 +291,9 @@ button {
 
 .oip_btn {
   border-radius: 8px !important;
-  padding: 10px 20px !important;
+  padding: 0px 16px !important;
   outline: none !important;
   cursor: pointer !important;
-  max-height: 16px;
   white-space: nowrap;
   display: flex;
   justify-content: center;
@@ -309,54 +308,66 @@ button {
   width: fit-content;
 }
 
-.oip_primary_button {
+.oip_btn_s {
+  height: 32px;
+}
+
+.oip_btn_m {
+  height: 40px;
+}
+
+.oip_full_btn {
+  width: calc(100% - 32px) !important;
+}
+
+.oip_primary-fill_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button .oip_button_spinner div {
+.oip_primary-fill_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_primary_button:hover,
-.oip_primary_button:focus {
+.oip_primary-fill_button:hover,
+.oip_primary-fill_button:focus {
   background: var(--primary-hover2) !important;
   border: 2px solid var(--primary-hover2) !important;
   box-shadow: none !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button.is-disabled,
-.oip_primary_button.is-disabled:hover,
-.oip_primary_button.is-disabled:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+.oip_primary-fill_button.is-disabled,
+.oip_primary-fill_button.is-disabled:hover,
+.oip_primary-fill_button.is-disabled:focus {
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
-.oip_primary_icon_button {
+.oip_primary-fill_icon_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_primary_icon_button .oip_button_spinner div {
+.oip_primary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_primary_icon_button:hover,
-.oip_primary_icon_button:focus {
+.oip_primary-fill_icon_button:hover,
+.oip_primary-fill_icon_button:focus {
   background: var(--primary-hover) !important;
   border: 2px solid var(--primary-hover) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_secondary_button,
+/*.oip_secondary_button,
 .oip_secondary_button:hover,
 .oip_secondary_button:focus {
   background: var(--pure-white) !important;
@@ -379,269 +390,255 @@ button {
   box-shadow: none !important;
   color: var(--wild-blue-yonder) !important;
   padding: 10px !important;
-}
+}*/
 
-.oip_terciary_button,
-.oip_dark_button,
-.oip_tertiary_button {
+.oip_secondary-fill_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_tertiary_button:hover,
-.oip_tertiary_button:focus,
-.oip_terciary_button:hover,
-.oip_terciary_button:focus,
-.oip_dark_button:hover,
-.oip_dark_button:focus,
-.oip_terciary_icon_button:hover,
-.oip_terciary_icon_button:focus,
-.oip_tertiary_icon_button:hover,
-.oip_tertiary_icon_button:focus,
-.oip_dark_icon_button:hover,
-.oip_dark_icon_button:focus {
+.oip_secondary-fill_button:hover,
+.oip_secondary-fill_button:focus,
+.oip_secondary-fill_icon_button:hover,
+.oip_secondary-fill_icon_button:focus {
   background: #21223d !important;
   border: 2px solid #21223d !important;
   box-shadow: none !important;
 }
 
-.oip_tertiary_button .oip_button_spinner div,
-.oip_dark_button .oip_button_spinner div,
-.oip_tertiary_icon_button .oip_button_spinner div,
-.oip_dark_icon_button .oip_button_spinner div {
+.oip_secondary-fill_button .oip_button_spinner div,
+.oip_secondary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_terciary_icon_button,
-.oip_tertiary_icon_button,
-.oip_dark_icon_button {
+.oip_secondary-fill_icon_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
 .oip_disable_button,
 .oip_disable_button:hover,
 .oip_disable_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .oip_disable_icon_button,
 .oip_disable_icon_button:hover,
 .oip_disable_icon_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .el-button + .el-button {
   margin-left: 0px !important;
 }
-.oip_skeleton_button {
+.oip_secondary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover,
-.oip_skeleton_button:focus {
+.oip_secondary-stroke_button:hover,
+.oip_secondary-stroke_button:focus {
   background: rgba(62, 63, 94, 0.05) !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover .oip__button_prefix_icon,
-.oip_skeleton_button:focus .oip__button_prefix_icon,
-.oip_skeleton_button:hover .oip__button_suffix_icon,
-.oip_skeleton_button:focus .oip__button_suffix_icon {
+.oip_secondary-stroke_button:hover .oip__button_prefix_icon,
+.oip_secondary-stroke_button:focus .oip__button_prefix_icon,
+.oip_secondary-stroke_button:hover .oip__button_suffix_icon,
+.oip_secondary-stroke_button:focus .oip__button_suffix_icon {
   stroke: var(--independence) !important;
   color: var(--independence) !important;
 }
-.oip_skeleton_button .oip_button_spinner div,
-.oip_skeleton_icon_button .oip_button_spinner div {
+.oip_secondary-stroke_button .oip_button_spinner div,
+.oip_secondary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--independence);
   border-color: var(--independence) transparent transparent transparent;
 }
-.oip_skeleton_icon_button {
+.oip_secondary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_skeleton_icon_button:hover,
-.oip_skeleton_icon_button:focus {
+.oip_secondary-stroke_icon_button:hover,
+.oip_secondary-stroke_icon_button:focus {
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
 }
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_buttonn:focus svg,
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_button:focus svg {
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_buttonn:focus svg,
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_button:focus svg {
   stroke: var(--primary) !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button {
+.oip_primary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button:hover,
-.oip_outlined_button:focus,
-.oip_outlined_icon_button:hover,
-.oip_outlined_icon_button:focus {
+.oip_primary-stroke_button:hover,
+.oip_primary-stroke_button:focus,
+.oip_primary-stroke_icon_button:hover,
+.oip_primary-stroke_icon_button:focus {
   background: rgba(33, 118, 255, 0.05) !important;
   color: var(--primary-hover2) !important;
 }
-.oip_outlined_button .oip_button_spinner div,
-.oip_outlined_icon_button .oip_button_spinner div {
+.oip_primary-stroke_button .oip_button_spinner div,
+.oip_primary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--primary);
   border-color: var(--primary) transparent transparent transparent;
 }
-.oip_outlined_icon_button {
+.oip_primary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--primary) !important;
 }
-.oip_warning_button {
+.oip_warning-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: none !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_button:hover,
-.oip_warning_button:focus,
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:focus {
+.oip_warning-stroke_button:hover,
+.oip_warning-stroke_button:focus,
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:focus {
   background: rgba(239, 68, 68, 0.2) !important;
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_button .oip_button_spinner div,
-.oip_warning_icon_button .oip_button_spinner div {
+.oip_warning-stroke_button .oip_button_spinner div,
+.oip_warning-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-alert);
   border-color: var(--system-alert) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip_button_spinner div,
-.oip_warning_icon_button:hover .oip_button_spinner div {
+.oip_warning-stroke_button:hover .oip_button_spinner div,
+.oip_warning-stroke_icon_button:hover .oip_button_spinner div {
   border: 2px solid var(--alert-hover);
   border-color: var(--alert-hover) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip__button_prefix_icon,
-.oip_warning_button:focus .oip__button_prefix_icon,
-.oip_warning_button:hover .oip__button_suffix_icon,
-.oip_warning_button:focus .oip__button_suffix_icon {
+.oip_warning-stroke_button:hover .oip__button_prefix_icon,
+.oip_warning-stroke_button:focus .oip__button_prefix_icon,
+.oip_warning-stroke_button:hover .oip__button_suffix_icon,
+.oip_warning-stroke_button:focus .oip__button_suffix_icon {
   stroke: var(--alert-hover) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_icon_button {
+.oip_warning-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:hover {
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:hover {
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_icon_button:hover svg,
-.oip_warning_icon_button:hover svg {
+.oip_warning-stroke_icon_button:hover svg,
+.oip_warning-stroke_icon_button:hover svg {
   stroke: var(--alert-hover) !important;
   color: var(--alert-hover) !important;
 }
-.oip_red_button {
+.oip_warning-fill_button {
   background: var(--system-alert) !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_red_button:hover,
-.oip_red_button:focus,
-.oip_red_icon_button:hover,
-.oip_red_icon_button:focus {
+.oip_warning-fill_button:hover,
+.oip_warning-fill_button:focus,
+.oip_warning-fill_icon_button:hover,
+.oip_warning-fill_icon_button:focus {
   background: var(--alert-hover) !important;
   border: 2px solid var(--alert-hover) !important;
   box-shadow: none !important;
 }
-.oip_red_button .oip_button_spinner div,
-.oip_red_icon_button .oip_button_spinner div {
+.oip_warning-fill_button .oip_button_spinner div,
+.oip_warning-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_red_icon_button {
+.oip_warning-fill_icon_button {
   background: var(--system-alert) !important;
   border: 2px solid var(--system-alert) !important;
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_green_button {
+.oip_success-fill_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_green_button:hover,
-.oip_green_button:focus,
-.oip_green_icon_button:hover,
-.oip_green_icon_button:focus {
+.oip_success-fill_button:hover,
+.oip_success-fill_button:focus,
+.oip_success-fill_icon_button:hover,
+.oip_success-fill_icon_button:focus {
   background: #2eb830 !important;
   border: 2px solid #2eb830 !important;
   box-shadow: none !important;
 }
-.oip_green_button .oip_button_spinner div,
-.oip_green_icon_button .oip_button_spinner div {
+.oip_success-fill_button .oip_button_spinner div,
+.oip_success-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_green_icon_button {
+.oip_success-fill_icon_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_success_button {
+.oip_success-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   color: var(--system-success) !important;
 }
-.oip_success_button:hover,
-.oip_success_button:focus,
-.oip_success_icon_button:hover,
-.oip_success_icon_button:focus {
+.oip_success-stroke_button:hover,
+.oip_success-stroke_button:focus,
+.oip_success-stroke_icon_button:hover,
+.oip_success-stroke_icon_button:focus {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   background: rgba(34, 197, 94, 0.05) !important;
   color: #069a3d !important;
 }
-.oip_success_button .oip_button_spinner div,
-.oip_success_icon_button .oip_button_spinner div {
+.oip_success-stroke_button .oip_button_spinner div,
+.oip_success-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-success);
   border-color: var(--system-success) transparent transparent transparent;
 }
-.oip_success_icon_button {
+.oip_success-stroke_icon_button {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-success) !important;
 }
 .oip_button_flex {
@@ -714,7 +711,6 @@ button {
   padding: 4px 8px;
   align-items: center;
   gap: 8px;
-  height: 16px;
 }
 .oip_tag > svg {
   cursor: pointer;
@@ -725,7 +721,7 @@ button {
   background-color: var(--pure-white) !important;
   color: var(--lavendar-grey) !important;
 }
-.oip_tag.is_red {
+.oip_tag.is_rose {
   background: rgba(244, 63, 94, 0.1) !important;
   color: #9f1239;
 }
@@ -733,7 +729,7 @@ button {
   background: rgba(236, 72, 153, 0.1) !important;
   color: #9d174d;
 }
-.oip_tag.is_lilac {
+.oip_tag.is_fushia {
   background: rgba(217, 70, 239, 0.1) !important;
   color: #86198f;
 }
@@ -741,19 +737,23 @@ button {
   background: rgba(168, 85, 247, 0.1) !important;
   color: #6b21a8;
 }
-.oip_tag.is_indigo {
+.oip_tag.is_violet {
   background: rgba(139, 92, 246, 0.1) !important;
   color: #5b21b6;
 }
-.oip_tag.is_blue {
+.oip_tag.is_indigo {
   background: rgba(99, 102, 241, 0.1) !important;
   color: #3730a3;
 }
-.oip_tag.is_sapphire {
+.oip_tag.is_blue {
+  background: rgba(59, 130, 246, 0.1) !important;
+  color: #1e40af;
+}
+.oip_tag.is_sky {
   background: rgba(14, 165, 233, 0.1) !important;
   color: #075985;
 }
-.oip_tag.is_turquoise {
+.oip_tag.is_cyan {
   background: rgba(6, 182, 212, 0.1) !important;
   color: #155e75;
 }
@@ -769,7 +769,7 @@ button {
   background: rgba(34, 197, 94, 0.1) !important;
   color: #166534;
 }
-.oip_tag.is_olive {
+.oip_tag.is_lime {
   background: rgba(132, 204, 22, 0.1) !important;
   color: #3f6212;
 }
@@ -777,67 +777,23 @@ button {
   background: rgba(234, 179, 8, 0.1) !important;
   color: #854d0e;
 }
-.oip_tag.is_beige {
+.oip_tag.is_amber {
   background: rgba(245, 158, 11, 0.1) !important;
   color: #92400e;
 }
-.oip_tag.is_coral {
+.oip_tag.is_orange {
   background: rgba(249, 115, 22, 0.1) !important;
   color: #9a3412;
 }
 
-.oip_tag.is_orange {
-  background: var(--orange) !important;
-  border: 1px solid var(--orange) !important;
-}
-.oip_tag.is_lime {
-  background: var(--lime) !important;
-  border: 1px solid var(--lime) !important;
-}
-.oip_tag.is_cyan {
-  background: var(--cyan) !important;
-  border: 1px solid var(--cyan) !important;
-}
-.oip_tag.is_primary {
-  background: var(--primary) !important;
-  border: 1px solid var(--primary) !important;
-}
-.oip_tag.is_accent {
-  background: var(--accent) !important;
-  border: 1px solid var(--accent) !important;
-}
-.oip_tag.is_alert {
-  background: var(--alert) !important;
-  border: 1px solid var(--alert) !important;
-}
-.oip_tag.is_warning {
-  background: var(--warning) !important;
-  border: 1px solid var(--warning) !important;
-}
-.oip_tag.is_success {
-  background: var(--success) !important;
-  border: 1px solid var(--success) !important;
-}
-.oip_tag.is_light_grey {
+.oip_tag.is_gray {
   background: var(--background) !important;
   color: var(--independence) !important;
 }
-.oip_tag.is_light_grey svg {
+.oip_tag.is_gray svg {
   stroke: var(--cool-grey);
   color: var(--cool-grey);
 }
-.oip_tag.is_light_red {
-  background: rgba(251, 70, 84, 0.1) !important;
-  color: var(--alert) !important;
-}
-.oip_tag.is_light_green {
-  background: rgba(50, 209, 117, 0.1) !important;
-  color: var(--success) !important;
-}
-.oip_tag.is_light_primary {
-  background: #e9f1ff !important;
-  color: var(--primary) !important;
-}
 .oip_tag .oip_tag__close {
   display: inline-block;
   cursor: pointer;
@@ -1040,4 +996,9 @@ button {
   align-items: flex-start;
   gap: 4px;
 }
+
+.arg_page {
+  height: 100%;
+  width: 100%;
+}
 </style>

package/dist/runtime/components/argTags.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   name: "argTags",
   components: { argIcon, argStyle },
   props: {
-    setStyle: { type: String, default: "light_grey" },
+    setStyle: { type: String, default: "gray" },
     haveClose: { type: Boolean, default: false }
   },
   emits: ["onClose"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",