testio-tailwind 1.1.1 → 2.0.0

package/.eleventy.js

@@ -2,14 +2,11 @@ const filters = require('./utils/filters.js')
 const transforms = require('./utils/transforms.js')
 const collections = require('./utils/collections.js')
 const markdownIt = require('./utils/markdown.js');
-const appConfigs = {
-  cirro: { output: "dist/" }
-}
 
 module.exports = function (eleventyConfig) {
     // Folders to copy to build dir (See. 1.1)
     eleventyConfig.addPassthroughCopy({
-        "src/static/site.webmanifest": "", 
+        "src/static/site.webmanifest": ".", 
         "src/static/*": "static", 
         "src/assets/fonts/*": "assets/fonts",
         "src/static/downloads/*": "downloads",
@@ -44,7 +41,7 @@ module.exports = function (eleventyConfig) {
     return {
         dir: {
             input: "src",
-            output: appConfigs[process.env.APP].output,
+            output: "dist",
             includes: "_includes",
             layouts: "_layouts"
         },

package/README.md

@@ -48,40 +48,4 @@ npm run build
 ### Integration of the design system into your app
 
 1. Import `app.css` to get all relevant modules and files.
-2. Use the following PostCss configuration in your code `postcss.config.js` file:
-   
-    ```
-    const tailwindConfig = require('./PATHTO/tailwind.config');
-    
-    module.exports = {
-      plugins: [
-        require('postcss-import'),
-        require('tailwindcss/nesting'),
-        require('tailwindcss')({
-          content: [
-            './YOUR_LAYOUTS/**/*.{html,js,haml,pug,njk}',
-          ],
-          theme: tailwindConfig.theme,
-          plugins: tailwindConfig.plugins,
-        }),
-        require('postcss-simple-vars')(
-          {
-              variables: {
-                  package_path: '../../..',
-                  fonts_path: 'fonts'
-              }
-          }
-        ),
-        require('autoprefixer')
-      ]
-    }
-4. Change the path to the `tailwind.config.js` file from the package.
-   
-   ```
-     const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
-6. Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.
-   
-    ```
-      content: [
-        './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
-      ],
+2. Run TailWindCSS V4 to compile everything.

package/icon-classes-extractor.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const readline = require('readline');
 
-async function extractIconClasses(app) {
+async function extractIconClasses() {
   const fileStream = fs.createReadStream('src/assets/stylesheets/components/iconfont.css');
 
   const rl = readline.createInterface({
@@ -16,7 +16,7 @@ async function extractIconClasses(app) {
       iconClasses.push(line.split(':')[0].replace('.', ''));
   }
 
-  fs.writeFile('src/static/icons-' + app + '.json', JSON.stringify(iconClasses), err => {
+  fs.writeFile('src/static/icons.json', JSON.stringify(iconClasses), err => {
     if (err) {
         console.log('Error writing file', err)
     } else {
@@ -25,5 +25,5 @@ async function extractIconClasses(app) {
   });
 }
 
-extractIconClasses('cirro');
+extractIconClasses();
 

package/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "testio-tailwind",
-	"version": "1.1.1",
+	"version": "2.0.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
-		"clean": "del dist",
-		"dev:cirro-postcss": "postcss src/assets/stylesheets/*.css -o src/static/app.compiled.css --watch --verbose --config src/assets/stylesheets/",
-		"dev:scripts": "webpack --watch --config webpack.config.js",
+		"clean": "del dist --force",
 		"dev:11ty": "eleventy --serve --watch",
-		"build:cirro-11ty": "ELEVENTY_ENV=production APP=cirro eleventy",
-		"build:cirro-postcss": "NODE_ENV=production postcss src/assets/stylesheets/app.css -o dist/static/app.compiled.css --config src/assets/stylesheets/",
-		"build:scripts": "NODE_ENV=production webpack --mode production --config webpack.config.js",
-		"build:icon-page": "node icon-classes-extractor.js; cp src/static/icons-cirro.json dist/static/icons-cirro.json;",
+		"dev:tailwind": "npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --watch",
+		"dev:scripts": "webpack --watch --config webpack.config.js",
+		"build:tailwind": " npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --minify",
+		"build:11ty": "eleventy",
+		"build:scripts": "webpack --mode production --config webpack.config.js",
+		"build:icon-page": "node icon-classes-extractor.js",
 		"build:copy_entry_file": "cp index.html dist",
-		"start": "cross-env APP=cirro run-p dev:* --print-label",
-		"build": "cross-env APP=cirro run-s clean build:* --print-label"
+		"start": "cross-env run-p dev:* --print-label",
+		"build": "cross-env run-s clean build:* --print-label"
 	},
 	"author": "test IO",
 	"license": "",
@@ -21,27 +21,19 @@
 		"@11ty/eleventy": "^2.0.1",
 		"@babel/core": "^7.17.10",
 		"@babel/preset-env": "^7.17.10",
-		"autoprefixer": "^10.4.21",
 		"babel-loader": "^8.2.5",
 		"cross-env": "^7.0.3",
 		"css-loader": "^5.0.1",
 		"del-cli": "^3.0.1",
 		"luxon": "^1.25.0",
 		"npm-run-all": "^4.1.5",
-		"postcss": "^8.5.6",
-		"postcss-cli": "^8.0.0",
-		"postcss-import": "^16.1.0",
-		"postcss-loader": "^4.0.4",
-		"postcss-nesting": "^13.0.1",
 		"pug-plugin": "^6.0.0",
-		"tailwindcss": "^3.4.17",
 		"webpack": "^5.x",
 		"webpack-cli": ">=4.x"
 	},
 	"dependencies": {
 		"@babel/plugin-transform-class-properties": "^7.27.1",
-		"@tailwindcss/forms": "^0.1.4",
-		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/cli": "^4.1.11",
 		"autosize": "^5.0.1",
 		"dropzone": "^6.0.0-beta.2",
 		"echarts": "^5.6.0",
@@ -49,18 +41,10 @@
 		"html-minifier-terser": "^7.2.0",
 		"jquery": "^3.6.0",
 		"markdown-it": "^14.1.0",
-		"postcss-simple-vars": "^7.0.1",
 		"select2": "^4.1.0-rc.0",
+		"tailwind": "^4.0.0",
+		"tailwindcss": "^4.1.11",
 		"tom-select": "^2.3.1",
 		"trix": "^2.0.7"
-	},
-	"peerDependencies": {
-		"@tailwindcss/postcss": "^4.1.10",
-		"@tailwindcss/typography": "^0.5.16",
-		"autoprefixer": "^10.0.0",
-		"postcss": "^8.1.0",
-		"postcss-cli": "^9.0.1",
-		"tailwindcss": "^3.4.17",
-		"tom-select": "^2.3.1"
 	}
 }

package/src/_includes/head.njk

@@ -43,9 +43,9 @@
 <!-- Links to information about the author(s) of the document -->
 <link rel="author" href="humans.txt">
 
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#000000">

package/src/assets/images/pencil.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="pencil" x="0" y="0.83" width="20" height="20" style="fill:none;"/>
+    <clipPath id="_clip1">
+        <rect x="0" y="0.83" width="20" height="20"/>
+    </clipPath>
+    <g clip-path="url(#_clip1)">
+        <path d="M4.806,16.72C4.806,16.82 4.706,16.82 4.506,16.82C4.305,16.82 4.205,16.82 4.205,16.72C4.005,16.519 4.005,16.219 4.205,16.018L15.319,4.79C14.919,4.188 14.518,3.587 14.418,2.885L2.303,15.116L0,20.83L5.807,18.524L17.922,6.294C17.222,6.193 16.521,5.792 16.02,5.391L4.806,16.72ZM19.324,1.582C18.323,0.579 16.821,0.579 15.82,1.582L15.319,2.083C15.419,4.088 16.921,5.592 18.824,5.592L19.324,5.191C20.225,4.088 20.225,2.584 19.324,1.582Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

package/src/assets/stylesheets/app.css

@@ -1,79 +1,104 @@
-@import "components/reset";
 
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
 
-@import "tom-select/dist/css/tom-select.css";
-@import "select2/dist/css/select2.css";
-@import "trix/dist/trix.css";
+@import "tailwindcss";
+@import './tailwind_config.css';
+@import './tailwind_custom_utilities.css';
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+@import './components/reset.css' layer(base);
+
+@import 'tom-select/dist/css/tom-select.css' layer(components);
+@import 'select2/dist/css/select2.css' layer(components);
+@import 'trix/dist/trix.css' layer(components);
+
+
+@import './components/actionbar.css' layer(components);
+@import './components/buttons.css' layer(components);
+@import './components/cards.css' layer(components);
+@import './components/header.css' layer(components);
+@import './components/layout.css' layer(components);
+@import './components/sidebar.css' layer(components);
+@import './components/icons.css' layer(components);
+@import './components/iconfont.css' layer(components);
+@import './components/popover.css' layer(components);
+@import './components/typography.css' layer(components);
+@import './components/lists.css' layer(components);
+@import './components/sections.css' layer(components);
+@import './components/dropdown.css' layer(components);
+@import './components/list_item.css' layer(components);
+@import './components/task_issue_item.css' layer(components);
+@import './components/devices.css' layer(components);
+@import './components/images.css' layer(components);
+@import './components/banner_card.css' layer(components);
+@import './components/toggleswitch.css' layer(components);
+@import './components/selectable_token.css' layer(components);
+@import './components/checkboxes_radiobuttons.css' layer(components);
+@import './components/form_grid.css' layer(components);
+@import './components/form_card.css' layer(components);
+@import './components/forms.css' layer(components);
+@import './components/search.css' layer(components);
+@import './components/tom_select.css' layer(components);
+@import './components/trix_editor.css' layer(components);
+@import './components/uploads.css' layer(components);
+@import './components/radio_tabs.css' layer(components);
+@import './components/user_item.css' layer(components);
+@import './components/alerts.css' layer(components);
+@import './components/tags.css' layer(components);
+@import './components/markdown_trix_styles.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/drawer.css' layer(components);
+@import './components/modals.css' layer(components);
+@import './components/progress.css' layer(components);
+@import './components/loading_spinner.css' layer(components);
+@import './components/test_item.css' layer(components);
+@import './components/metrics.css' layer(components);
+@import './components/resultmodule.css' layer(components);
+@import './components/chat.css' layer(components);
+@import './components/emptystate_message.css' layer(components);
+@import './components/splitview.css' layer(components);
+@import './components/tables.css' layer(components);
+@import './components/metasidebar.css' layer(components);
+@import './components/notifications.css' layer(components);
+@import './components/select2.css' layer(components);
+@import './components/select.css' layer(components);
+@import './components/test_header.css' layer(components);
+@import './components/ratingscale.css' layer(components);
 
+@import './components/customer/customer_header.css' layer(components);
+@import './components/customer/customer_sidebar.css' layer(components);
+@import './components/customer/customer_productcards.css' layer(components);
 
-@import "components/actionbar";
-@import "components/buttons";
-@import "components/cards";
-@import "components/header";
-@import "components/layout";
-@import "components/sidebar";
-@import "components/icons";
-@import "components/iconfont";
-@import "components/popover";
-@import "components/typography";
-@import "components/lists";
-@import "components/sections";
-@import "components/dropdown";
-@import "components/list_item";
-@import "components/task_issue_item";
-@import "components/devices";
-@import "components/images";
-@import "components/banner_card";
-@import "components/toggleswitch";
-@import "components/selectable_token";
-@import "components/checkboxes_radiobuttons";
-@import "components/form_grid";
-@import "components/form_card";
-@import "components/forms";
-@import "components/search";
-@import "components/tom_select";
-@import "components/trix_editor";
-@import "components/uploads";
-@import "components/radio_tabs";
-@import "components/user_item";
-@import "components/alerts";
-@import "components/tags";
-@import "components/markdown_trix_styles";
-@import "components/tabs";
-@import "components/drawer";
-@import "components/modals";
-@import "components/progress";
-@import "components/loading_spinner";
-@import "components/test_item";
-@import "components/metrics";
-@import "components/resultmodule";
-@import "components/chat";
-@import "components/emptystate_message";
-@import "components/splitview";
-@import "components/tables";
-@import "components/metasidebar";
-@import "components/notifications";
-@import "components/select2";
-@import "components/select";
-@import "components/test_header";
-@import "components/ratingscale";
+@import './components/tester/tester_header.css' layer(components);
+@import './components/tester/tester_sidebar.css' layer(components);
+@import './components/tester/tester_cards.css' layer(components);
 
-@import "components/customer/customer_header";
-@import "components/customer/customer_sidebar";
-@import "components/customer/customer_productcards";
+@import './components/manager/manager_header.css' layer(components);
+@import './components/manager/manager_sidebar.css' layer(components);
 
-@import "components/tester/tester_header";
-@import "components/tester/tester_sidebar";
-@import "components/tester/tester_cards";
+@import './components/designsystem/designsystem-styles.css' layer(components);
 
-@import "components/manager/manager_header";
-@import "components/manager/manager_sidebar";
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-@import "components/designsystem/designsystem-styles";
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
-@import "tailwindcss/utilities";
+.source-sans-3-<uniquifier> {
+  font-family: "Source Sans 3", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: <weight>;
+  font-style: normal;
+}

package/src/assets/stylesheets/components/alerts.css

@@ -18,7 +18,7 @@
 }
 
 .alert .close:hover, .alert .close:focus {
-  @apply text-white bg-link-hover outline-none;
+  @apply text-white bg-link-hover outline-hidden;
   .icon {
     @apply text-white;
   }

package/src/assets/stylesheets/components/buttons.css

@@ -1,7 +1,7 @@
 .btn,
 input.btn,
 input[type="submit"].btn {
-  @apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
+  @apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
 
   &:hover,
   &:focus,

package/src/assets/stylesheets/components/cards.css

@@ -1,13 +1,13 @@
 .grid-cards-achievements {
   @apply grid gap-grid-gutter;
   grid-template-columns: 1fr 1fr;
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }
@@ -15,16 +15,16 @@
 .grid-cards {
   @apply grid gap-grid-gutter;
   grid-template-columns: 1fr;
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }
@@ -46,14 +46,14 @@
 }
 
 .card-title {
-  @apply block overflow-ellipsis text-heading-5 leading-5;
+  @apply block text-ellipsis text-heading-5 leading-5;
 }
 
 .card.card-sm {
   @apply w-full sm:w-card-sm;
 
   .card-title {
-    @apply block overflow-ellipsis text-heading-5 leading-5 text-center;
+    @apply block text-ellipsis text-heading-5 leading-5 text-center;
   }
 }
 

package/src/assets/stylesheets/components/chat.css

@@ -70,7 +70,8 @@ img.chat-avatar {
   justify-content: center;
   padding: 0;
   .icon {
-    @apply h-icon-xs text-icon-xs;
+    height: var(--font-size-icon-xs);
+    font-size: var(--font-size-icon-xs);
   }
 }
 
@@ -91,7 +92,9 @@ img.chat-avatar {
     @apply text-white border-0 bg-link-hover;
   }
   .icon {
-    @apply h-icon-xs text-icon-xs mr-xxs;
+    @apply mr-xxs;
+    height: var(--font-size-icon-xs);
+    font-size: var(--font-size-icon-xs);
   }
 }
 
@@ -122,14 +125,14 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message .chat-message-addons .btn {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
   &:hover, &:focus, &:active {
     @apply text-white bg-link-hover;
   }
 }
 
 .chat-message-item.your-message .chat-message-addons .tag-item {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
 }
 
 .chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
@@ -143,14 +146,14 @@ img.chat-avatar {
 }
 
 .chat-message-item.announcement .chat-message-addons .btn {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray backdrop-opacity-25;
   &:hover, &:focus, &:active {
     @apply text-white bg-link-hover;
   }
 }
 
 .chat-message-item.announcement .chat-message-addons .tag-item {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
 }
 
 

package/src/assets/stylesheets/components/customer/customer_productcards.css

@@ -1,12 +1,12 @@
 .grid-productcards {
   @apply grid gap-grid-gutter;
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  @screen 3xl {
+  @media (width >= theme(--breakpoint-3xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
 }

package/src/assets/stylesheets/components/designsystem/designsystem-styles.css

@@ -79,4 +79,8 @@
 
 .color-cell {
   @apply flex flex-col justify-start items-start text-left px-5 py-2.5;
+}
+
+.color-cell p {
+  @apply first:lowercase last:uppercase;
 }

package/src/assets/stylesheets/components/devices.css

@@ -20,7 +20,7 @@
 }
 
 .device.outline {
-  @apply p-sm border border-bordercolor rounded outline-none;
+  @apply p-sm border border-bordercolor rounded outline-hidden;
 }
 
 .device-icon {

package/src/assets/stylesheets/components/forms.css

@@ -3,7 +3,7 @@
 }
 
 .form-label {
-  @apply text-label text-label leading-tight;
+  @apply text-label leading-tight;
 
   &.optional::after {
     content: "(optional)";
@@ -26,7 +26,7 @@
 
 .form-control,
 .form-control-static {
-  @apply h-btn w-full text-base border border-bordercolor;
+  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded;
 }
 
 .form-check .field_with_errors input[type="checkbox"],
@@ -71,14 +71,7 @@
 }
 
 textarea.form-control {
-  @apply h-auto min-h-btn;
-}
-
-.form-control-search {
-  /* padding-right: ($input-padding-x * 3);
-  background-repeat: no-repeat;
-  background-position: center right ($input-height * .25);
-  background-size: ($input-height * .50) ($input-height * .50); */
+  @apply h-auto min-h-btn pt-xs;
 }
 
 .form-control-label {

package/src/assets/stylesheets/components/header.css

@@ -1,4 +1,3 @@
-
 .header {
   @apply h-header flex items-center bg-header;
   grid-area: header;
@@ -70,7 +69,7 @@
   content: url("/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg");
   height: 13px;
   width: 74px;
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply h-md;
     width: 128px;
   }

package/src/assets/stylesheets/components/icons.css

@@ -2,23 +2,43 @@
 /*/ Icon sizes and spacing /*/
 
 .icon {
-  @apply h-icon text-icon align-bottom;
+  height: var(--font-size-icon);
+  font-size: var(--font-size-icon);
+}
+
+.icon-xxs {
+  height: var(--font-size-icon-xxs);
+  font-size: var(--font-size-icon-xxs);
 }
 
 .icon-xs {
-  @apply h-icon-xs text-icon-xs;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
+}
+
+.icon-xs {
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .icon-sm {
-  @apply h-icon-sm text-icon-sm;
+  height: var(--font-size-icon-sm);
+  font-size: var(--font-size-icon-sm);
 }
 
 .icon-lg {
-  @apply h-icon-lg text-icon-lg;
+  height: var(--font-size-icon-lg);
+  font-size: var(--font-size-icon-lg);
 }
 
 .icon-xl {
-  @apply h-icon-xl text-icon-xl;
+  height: var(--font-size-icon-xl);
+  font-size: var(--font-size-icon-xl);
+}
+
+.icon-xxl {
+  height: var(--font-size-icon-xxl);
+  font-size: var(--font-size-icon-xxl);
 }
 
 .icon-functional {

package/src/assets/stylesheets/components/list_item.css

@@ -1,4 +1,3 @@
-
 .list-listitems .listitem,
 .list-listitems .listitem-with-footer {
   @apply mb-xs; 
@@ -11,7 +10,7 @@
                         "badge metrics actions";
   grid-template-columns: auto 1fr auto;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-areas:  "badge title metrics actions";
   }
 }