@kompasid/lit-web-components 0.4.0 → 0.4.2

package/tailwind/tailwind.ts

@@ -642,6 +642,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-top: -1.75rem;
   }
 
+  .mb-0 {
+    margin-bottom: 0px;
+  }
+
   .mb-1 {
     margin-bottom: 0.25rem;
   }
@@ -650,10 +654,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 0.5rem;
   }
 
-  .mb-4 {
-    margin-bottom: 1rem;
-  }
-
   .ml-0 {
     margin-left: 0px;
   }
@@ -746,10 +746,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 2rem;
   }
 
-  .h-9 {
-    height: 2.25rem;
-  }
-
   .h-auto {
     height: auto;
   }
@@ -758,12 +754,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 100%;
   }
 
-  .w-1\\/4 {
-    width: 25%;
+  .w-1\\/5 {
+    width: 20%;
   }
 
-  .w-16 {
-    width: 4rem;
+  .w-10 {
+    width: 2.5rem;
   }
 
   .w-20 {
@@ -778,6 +774,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 1rem;
   }
 
+  .w-4\\/5 {
+    width: 80%;
+  }
+
   .w-40 {
     width: 10rem;
   }
@@ -798,6 +798,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 138px;
   }
 
+  .w-\\[296px\\] {
+    width: 296px;
+  }
+
   .w-auto {
     width: auto;
   }
@@ -806,10 +810,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .max-w-2xl {
-    max-width: 42rem;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -863,10 +863,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     grid-auto-flow: row;
   }
 
-  .grid-flow-col {
-    grid-auto-flow: column;
-  }
-
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -883,10 +879,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-rows-1 {
-    grid-template-rows: repeat(1, minmax(0, 1fr));
-  }
-
   .grid-rows-2 {
     grid-template-rows: repeat(2, minmax(0, 1fr));
   }
@@ -943,12 +935,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     row-gap: 1rem;
   }
 
-  .space-x-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -977,9 +963,13 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-radius: 0.375rem;
   }
 
-  .rounded-b {
-    border-bottom-right-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
+  .rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .rounded-b-xl {
+    border-bottom-right-radius: 0.75rem;
+    border-bottom-left-radius: 0.75rem;
   }
 
   .border {
@@ -990,6 +980,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-width: 2px;
   }
 
+  .border-b {
+    border-bottom-width: 1px;
+  }
+
   .border-b-2 {
     border-bottom-width: 2px;
   }
@@ -1003,14 +997,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-color: rgb(147 200 253 / var(--tw-border-opacity));
   }
 
-  .border-dark-2 {
+  .border-dark-6 {
     --tw-border-opacity: 1;
-    border-color: rgb(56 56 56 / var(--tw-border-opacity));
+    border-color: rgb(46 46 46 / var(--tw-border-opacity));
   }
 
-  .border-dark-6 {
+  .border-dark-8 {
     --tw-border-opacity: 1;
-    border-color: rgb(46 46 46 / var(--tw-border-opacity));
+    border-color: rgb(136 136 136 / var(--tw-border-opacity));
   }
 
   .border-green-400 {
@@ -1058,11 +1052,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(225 240 255 / var(--tw-bg-opacity));
   }
 
-  .bg-blue-300 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(90 171 252 / var(--tw-bg-opacity));
-  }
-
   .bg-blue-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(3 86 168 / var(--tw-bg-opacity));
@@ -1128,18 +1117,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(255 220 63 / var(--tw-bg-opacity));
   }
 
-  .bg-red-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 32 19 / var(--tw-bg-opacity));
-  }
-
-  .bg-yellow-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 204 0 / var(--tw-bg-opacity));
-  }
-
-  .bg-opacity-50 {
-    --tw-bg-opacity: 0.5;
+  .bg-opacity-75 {
+    --tw-bg-opacity: 0.75;
   }
 
   .object-cover {
@@ -1179,6 +1158,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1.5rem;
   }
 
+  .px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .py-0 {
     padding-top: 0px;
     padding-bottom: 0px;
@@ -1189,26 +1173,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 0.125rem;
   }
 
-  .py-1 {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
-  .py-1\\.5 {
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-  }
-
   .py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 
-  .py-2\\.5 {
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
   .py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
@@ -1219,6 +1188,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 1rem;
   }
 
+  .py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -1291,6 +1265,13 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: center;
   }
 
+  .font-sans {
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+  }
+
   .font-serif {
     font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   }
@@ -1314,12 +1295,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     font-weight: 700;
   }
 
-  .leading-4 {
-    line-height: 1rem;
+  .font-normal {
+    font-weight: 400;
   }
 
-  .leading-6 {
-    line-height: 1.5rem;
+  .leading-5 {
+    line-height: 1.25rem;
+  }
+
+  .leading-\\[18px\\] {
+    line-height: 18px;
+  }
+
+  .leading-\\[22px\\] {
+    line-height: 22px;
   }
 
   .leading-none {
@@ -1374,11 +1363,21 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(46 46 46 / var(--tw-text-opacity));
   }
 
+  .text-dark-7 {
+    --tw-text-opacity: 1;
+    color: rgb(224 224 224 / var(--tw-text-opacity));
+  }
+
   .text-green-300 {
     --tw-text-opacity: 1;
     color: rgb(151 219 83 / var(--tw-text-opacity));
   }
 
+  .text-green-400 {
+    --tw-text-opacity: 1;
+    color: rgb(106 195 34 / var(--tw-text-opacity));
+  }
+
   .text-green-500 {
     --tw-text-opacity: 1;
     color: rgb(80 167 24 / var(--tw-text-opacity));
@@ -1389,6 +1388,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .text-grey-500 {
+    --tw-text-opacity: 1;
+    color: rgb(102 102 102 / var(--tw-text-opacity));
+  }
+
   .text-grey-600 {
     --tw-text-opacity: 1;
     color: rgb(51 51 51 / var(--tw-text-opacity));
@@ -1415,20 +1419,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
-  .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
-  }
-
-  .ring-grey-100 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-  }
-
   @media (min-width: 640px) {
     .sm\\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1446,6 +1436,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 2rem;
     }
 
+    .md\\:mb-0 {
+      margin-bottom: 0px;
+    }
+
     .md\\:ml-1 {
       margin-left: 0.25rem;
     }
@@ -1470,14 +1464,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 2rem;
     }
 
-    .md\\:flex {
-      display: flex;
+    .md\\:block {
+      display: block;
     }
 
     .md\\:hidden {
       display: none;
     }
 
+    .md\\:h-12 {
+      height: 3rem;
+    }
+
     .md\\:w-3\\/5 {
       width: 60%;
     }
@@ -1490,8 +1488,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
-    .md\\:max-w-none {
-      max-width: none;
+    .md\\:w-\\[400px\\] {
+      width: 400px;
+    }
+
+    .md\\:w-full {
+      width: 100%;
     }
 
     .md\\:max-w-sm {
@@ -1506,16 +1508,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       flex-direction: row;
     }
 
-    .md\\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-      --tw-space-x-reverse: 0;
-      margin-right: calc(2rem * var(--tw-space-x-reverse));
-      margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+    .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-y-reverse: 0;
+      margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+      margin-bottom: calc(1rem * var(--tw-space-y-reverse));
     }
 
     .md\\:self-end {
       align-self: flex-end;
     }
 
+    .md\\:rounded-lg {
+      border-radius: 0.5rem;
+    }
+
     .md\\:px-0 {
       padding-left: 0px;
       padding-right: 0px;
@@ -1526,6 +1532,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 5rem;
     }
 
+    .md\\:px-6 {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+
+    .md\\:py-6 {
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+    }
+
+    .md\\:pb-4 {
+      padding-bottom: 1rem;
+    }
+
     .md\\:pt-8 {
       padding-top: 2rem;
     }
@@ -1554,6 +1574,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       line-height: 1.75rem;
     }
 
+    .md\\:leading-6 {
+      line-height: 1.5rem;
+    }
+
     .md\\:tracking-normal {
       letter-spacing: 0em;
     }
@@ -1593,6 +1617,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       display: block;
     }
 
+    .lg\\:flex {
+      display: flex;
+    }
+
     .lg\\:hidden {
       display: none;
     }

package/tailwind.config.js

@@ -14,7 +14,9 @@ export default {
         3: '#252525',
         4: '#1E1E1E',
         5: '#121212',
-        6: '#2E2E2E'
+        6: '#2E2E2E',
+        7: '#E0E0E0',
+        8: '#888888'
       },
       white: '#FFFFFF',
       black: '#000000',