Prepare command bar to support modeling commands (#1184)

* Tweak toaster look and feel

* Add icons, tweak plus icon names

* Rename commandBarMeta to commandBarConfig

* Refactor command bar, add support for icons

* Create a tailwind plugin for aria-pressed button state

* Remove overlay from behind command bar

* Clean up toolbar

* Button and other style tweaks

* Icon tweaks follow-up: make old icons work with new sizing

* Delete unused static icons

* More CSS tweaks

* Small CSS tweak to project sidebar

* Add command bar E2E test

* fumpt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* fix typo in a comment

* Fix icon padding (built version only)

* Update onboarding and warning banner icons padding

* Misc minor style fixes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

tailwind.config.js

@@ -1,3 +1,5 @@
+const plugin = require('tailwindcss/plugin')
+
 const themeColorRamps = [
   { name: 'chalkboard', stops: 12 },
   { name: 'energy', stops: 12 },
@@ -10,27 +12,23 @@ const themeColorRamps = [
   { name: 'warn', stops: 8 },
   { name: 'succeed', stops: 8 },
 ]
-const toOKLCHVar = val => `oklch(var(${val}) / <alpha-value>) `
+const toOKLCHVar = (val) => `oklch(var(${val}) / <alpha-value>) `
 
 const themeColors = Object.fromEntries(
-  themeColorRamps.map(({name, stops}) => [
-      name,
-      Object.fromEntries(
-          new Array(stops)
-              .fill(0)
-              .map((_, i) => [
-                  (i + 1) * 10,
-                  toOKLCHVar(`--_${name}-${(i + 1) * 10}`),
-              ])
-      ),
+  themeColorRamps.map(({ name, stops }) => [
+    name,
+    Object.fromEntries(
+      new Array(stops)
+        .fill(0)
+        .map((_, i) => [(i + 1) * 10, toOKLCHVar(`--_${name}-${(i + 1) * 10}`)])
+    ),
   ])
 )
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  mode: 'jit',
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
       colors: {
@@ -41,5 +39,22 @@ module.exports = {
   darkMode: 'class',
   plugins: [
     require('@headlessui/tailwindcss'),
+    // custom plugin to add variants for aria-pressed
+    // To use, just add a class of 'group-pressed:<some-tailwind-class>' or 'pressed:<some-tailwind-class>'
+    // to your element. Based on https://dev.to/philw_/tying-tailwind-styling-to-aria-attributes-502f
+    plugin(function ({ addVariant, e }) {
+      addVariant('group-pressed', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.group[aria-pressed='true'] .${e(
+            `group-pressed${separator}${className}`
+          )}`
+        })
+      })
+      addVariant('pressed', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`pressed${separator}${className}`)}[aria-pressed='true']`
+        })
+      })
+    }),
   ],
 }