add pill component

app/views/console/storage/index.phtml

@@ -215,6 +215,9 @@
 
 
 <!-- for Torsten TEMP LOCATION-->
+<div class="pill">default</div>
+<div class="pill is-disabled">disabled</div>
+<div class="pill is-pending">pending</div>
 <section class="upload-box">
     <div class="upload-box-header">
         <h4 class="upload-box-title">

public/styles/comps/pill.less

@@ -0,0 +1,11 @@
+.pill {
+  --p-pill-text-color:var(--config-defalut-color-hsl, var(--pill-text-color));
+
+  color: hsl(var(--p-pill-text-color));
+  background-color: hsl(~"var(--p-pill-text-color) / 0.2");
+  display:inline-grid; place-content:center; padding-inline:12px; height:30px; border-radius:15px;
+  font-size:14px; font-weight:500;
+
+  &.is-disabled { --p-pill-text-color:var(--config-disabled-color-hsl); }
+  &.is-pending  { --p-pill-text-color:var(--config-pending-color-hsl);  }
+}

public/styles/default.less

@@ -35,6 +35,7 @@ img[src=""] {
 @import "comps/scroll";
 @import "comps/tabs";
 @import "comps/upload-box";
+@import "comps/pill";
 
 html {
   padding: 0;

public/styles/themes.less

@@ -92,6 +92,12 @@
     --config-console-nav-switch-background: #ececec;
     --config-console-nav-switch-color: #868686;
     --config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
+
+    // HSL colors for flexibility with opacity
+    // States colors - HSL colors (used by - pills)
+    --config-defalut-color-hsl: 0 0% 62%;
+    --config-disabled-color-hsl: 0 0% 62%;
+    --config-pending-color-hsl: 36 100% 47%;
   
     .theme-dark {
         --config-color-primary: #f02e65;