@kompasid/lit-web-components 0.6.7 → 0.7.0

package/tailwind/tailwind.ts

@@ -699,6 +699,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.25rem;
   }
 
+  .mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .ml-0 {
     margin-left: 0px;
   }
@@ -735,10 +739,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: 2.5rem;
   }
 
-  .mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .mr-3 {
     margin-right: 0.75rem;
   }
@@ -751,6 +751,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: 1rem;
   }
 
+  .mr-6 {
+    margin-right: 1.5rem;
+  }
+
   .mt-1 {
     margin-top: 0.25rem;
   }
@@ -779,10 +783,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-top: 2rem;
   }
 
-  .mr-6 {
-    margin-right: 1.5rem;
-  }
-
   .block {
     display: block;
   }
@@ -799,10 +799,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     display: none;
   }
 
+  .aspect-video {
+    aspect-ratio: 16 / 9;
+  }
+
   .h-10 {
     height: 2.5rem;
   }
 
+  .h-12 {
+    height: 3rem;
+  }
+
   .h-16 {
     height: 4rem;
   }
@@ -876,16 +884,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: max-content;
   }
 
-  .h-12 {
-    height: 3rem;
-  }
-
   .w-1\\/2 {
     width: 50%;
   }
 
-  .w-1\\/4 {
-    width: 25%;
+  .w-1\\/3 {
+    width: 33.333333%;
   }
 
   .w-1\\/5 {
@@ -896,6 +900,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 2.5rem;
   }
 
+  .w-11\\/12 {
+    width: 91.666667%;
+  }
+
   .w-16 {
     width: 4rem;
   }
@@ -908,10 +916,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 0.625rem;
   }
 
+  .w-2\\/3 {
+    width: 66.666667%;
+  }
+
   .w-20 {
     width: 5rem;
   }
 
+  .w-3\\/4 {
+    width: 75%;
+  }
+
   .w-32 {
     width: 8rem;
   }
@@ -944,10 +960,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 2rem;
   }
 
-  .w-80 {
-    width: 20rem;
-  }
-
   .w-9 {
     width: 2.25rem;
   }
@@ -976,30 +988,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .w-1\\/3 {
-    width: 33.333333%;
-  }
-
-  .w-3\\/4 {
-    width: 75%;
-  }
-
-  .w-4\\/5 {
-    width: 80%;
-  }
-
-  .w-2\\/4 {
-    width: 50%;
-  }
-
-  .w-2\\/3 {
-    width: 66.666667%;
-  }
-
-  .w-11\\/12 {
-    width: 91.666667%;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1151,10 +1139,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     gap: 2rem;
   }
 
-  .gap-2 {
-    gap: 0.5rem;
-  }
-
   .gap-y-2 {
     row-gap: 0.5rem;
   }
@@ -1290,6 +1274,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-color: rgb(136 136 136 / var(--tw-border-opacity));
   }
 
+  .border-dark-9 {
+    --tw-border-opacity: 1;
+    border-color: rgb(35 35 35 / var(--tw-border-opacity));
+  }
+
   .border-green-400 {
     --tw-border-opacity: 1;
     border-color: rgb(106 195 34 / var(--tw-border-opacity));
@@ -1415,6 +1404,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(51 51 51 / var(--tw-bg-opacity));
   }
 
+  .bg-orange-100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 238 204 / var(--tw-bg-opacity));
+  }
+
   .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1425,21 +1419,6 @@ 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-300 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(247 100 76 / var(--tw-bg-opacity));
-  }
-
-  .bg-red-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(208 13 18 / var(--tw-bg-opacity));
-  }
-
-  .bg-red-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 32 19 / var(--tw-bg-opacity));
-  }
-
   .bg-opacity-75 {
     --tw-bg-opacity: 0.75;
   }
@@ -1478,19 +1457,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding: 1.25rem;
   }
 
-  .p-8 {
-    padding: 2rem;
-  }
-
   .p-6 {
     padding: 1.5rem;
   }
 
-  .px-10 {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-
   .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -1556,31 +1526,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
-  .px-9 {
-    padding-left: 2.25rem;
-    padding-right: 2.25rem;
-  }
-
-  .px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .py-12 {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-
-  .px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -1665,6 +1610,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 2.5rem;
   }
 
+  .pt-2 {
+    padding-top: 0.5rem;
+  }
+
   .pt-4 {
     padding-top: 1rem;
   }
@@ -1693,6 +1642,13 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: end;
   }
 
+  .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;
   }
@@ -1742,6 +1698,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     font-weight: 400;
   }
 
+  .uppercase {
+    text-transform: uppercase;
+  }
+
   .capitalize {
     text-transform: capitalize;
   }
@@ -1774,6 +1734,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     line-height: 1.5;
   }
 
+  .leading-tight {
+    line-height: 1.25;
+  }
+
   .tracking-wide {
     letter-spacing: 0.025em;
   }
@@ -1813,6 +1777,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(0 85 154 / var(--tw-text-opacity));
   }
 
+  .text-dark-5 {
+    --tw-text-opacity: 1;
+    color: rgb(18 18 18 / var(--tw-text-opacity));
+  }
+
   .text-dark-6 {
     --tw-text-opacity: 1;
     color: rgb(46 46 46 / var(--tw-text-opacity));
@@ -1848,6 +1817,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(221 221 221 / var(--tw-text-opacity));
   }
 
+  .text-grey-400 {
+    --tw-text-opacity: 1;
+    color: rgb(153 153 153 / var(--tw-text-opacity));
+  }
+
   .text-grey-500 {
     --tw-text-opacity: 1;
     color: rgb(102 102 102 / var(--tw-text-opacity));
@@ -1863,14 +1837,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(255 122 0 / var(--tw-text-opacity));
   }
 
-  .text-white {
+  .text-orange-500 {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+    color: rgb(219 93 0 / var(--tw-text-opacity));
   }
 
-  .text-grey-400 {
+  .text-white {
     --tw-text-opacity: 1;
-    color: rgb(153 153 153 / var(--tw-text-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
   .underline {
@@ -1917,18 +1891,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   @media (min-width: 640px) {
-    .sm\\:w-1\\/2 {
-      width: 50%;
-    }
-
     .sm\\:w-3\\/4 {
       width: 75%;
     }
 
-    .sm\\:w-1\\/4 {
-      width: 25%;
-    }
-
     .sm\\:max-w-lg {
       max-width: 32rem;
     }
@@ -2027,6 +1993,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       min-height: 244px;
     }
 
+    .md\\:w-1\\/2 {
+      width: 50%;
+    }
+
     .md\\:w-3\\/5 {
       width: 60%;
     }
@@ -2067,26 +2037,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 100%;
     }
 
-    .md\\:w-1\\/2 {
-      width: 50%;
-    }
-
-    .md\\:w-3\\/4 {
-      width: 75%;
-    }
-
-    .md\\:w-1\\/4 {
-      width: 25%;
-    }
-
-    .md\\:w-1\\/3 {
-      width: 33.333333%;
-    }
-
-    .md\\:w-2\\/3 {
-      width: 66.666667%;
-    }
-
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
@@ -2103,6 +2053,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
 
+    .md\\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .md\\:flex-row {
       flex-direction: row;
     }
@@ -2210,6 +2164,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 1.5rem;
     }
 
+    .md\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .md\\:py-1 {
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
@@ -2230,11 +2189,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.5rem;
     }
 
-    .md\\:px-8 {
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-
     .md\\:pb-4 {
       padding-bottom: 1rem;
     }
@@ -2344,10 +2298,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       min-height: 220px;
     }
 
-    .lg\\:w-\\[410px\\] {
-      width: 410px;
-    }
-
     .lg\\:w-1\\/2 {
       width: 50%;
     }
@@ -2356,16 +2306,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 33.333333%;
     }
 
-    .lg\\:w-3\\/4 {
-      width: 75%;
-    }
-
-    .lg\\:w-2 {
-      width: 0.5rem;
-    }
-
-    .lg\\:w-2\\/3 {
-      width: 66.666667%;
+    .lg\\:w-\\[410px\\] {
+      width: 410px;
     }
 
     .lg\\:max-w-7xl {
@@ -2438,30 +2380,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   @media (min-width: 1280px) {
-    .xl\\:block {
-      display: block;
-    }
-
-    .xl\\:flex {
-      display: flex;
-    }
-
-    .xl\\:hidden {
-      display: none;
-    }
-
-    .xl\\:w-1\\/3 {
-      width: 33.333333%;
-    }
-
-    .xl\\:w-1\\/2 {
-      width: 50%;
-    }
-
-    .xl\\:w-1\\/4 {
-      width: 25%;
-    }
-
     .xl\\:px-0 {
       padding-left: 0px;
       padding-right: 0px;

package/tailwind.config.js

@@ -16,7 +16,8 @@ export default {
         5: '#121212',
         6: '#2E2E2E',
         7: '#E0E0E0',
-        8: '#888888'
+        8: '#888888',
+        9: '#232323'
       },
       white: '#FFFFFF',
       black: '#000000',