From a02c0a6990c94e9253b6f269fcb32de5f01c776c Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 9 Feb 2026 18:49:59 +0000 Subject: [PATCH 1/9] Update to OKLCH design system --- package-lock.json | 154 ++++++++++++---------------------------------- package.json | 2 +- 2 files changed, 42 insertions(+), 114 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a68ecd67..bec566024 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "dependencies": { "@floating-ui/react": "^0.26.23", "@headlessui/react": "^2.2.9", - "@oxide/design-system": "^4.1.0", + "@oxide/design-system": "^4.1.1--canary.163.21836818924.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-tabs": "^1.1.0", @@ -174,7 +174,6 @@ "resolved": "https://registry.npmjs.org/@asciidoctor/opal-runtime/-/opal-runtime-3.0.1.tgz", "integrity": "sha512-iW7ACahOG0zZft4A/4CqDcc7JX+fWRNjV5tFAVkNCzwZD+EnFolPaUOPYt8jzadc0+Bgd80cQTtRMQnaaV1kkg==", "license": "MIT", - "peer": true, "dependencies": { "glob": "8.1.0", "unxhr": "1.2.0" @@ -778,7 +777,6 @@ "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "eslint-visitor-keys": "^3.4.3" }, @@ -798,7 +796,6 @@ "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } @@ -809,7 +806,6 @@ "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@eslint/object-schema": "^2.1.7", "debug": "^4.3.1", @@ -825,7 +821,6 @@ "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -837,7 +832,6 @@ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -851,7 +845,6 @@ "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@eslint/core": "^0.17.0" }, @@ -865,7 +858,6 @@ "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@types/json-schema": "^7.0.15" }, @@ -879,7 +871,6 @@ "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", @@ -904,7 +895,6 @@ "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -916,7 +906,6 @@ "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -930,7 +919,6 @@ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -944,7 +932,6 @@ "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -958,7 +945,6 @@ "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } @@ -969,7 +955,6 @@ "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" @@ -1108,7 +1093,6 @@ "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=18.18.0" } @@ -1119,7 +1103,6 @@ "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" @@ -1134,7 +1117,6 @@ "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=12.22" }, @@ -1149,7 +1131,6 @@ "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=18.18" }, @@ -1164,6 +1145,7 @@ "integrity": "sha512-soa2bPUJAFruLL4z/CnMfSEKGznm5ebz29fIa9PxYtu8HHyLKNE1NXAs6dylfw1jn/ilEIfO2oLLN6uAafb7DA==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@babel/generator": "^7.26.2", "@babel/parser": "^7.26.2", @@ -1565,9 +1547,9 @@ "license": "MIT" }, "node_modules/@oxide/design-system": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-4.1.0.tgz", - "integrity": "sha512-sFNgDf8B8Yial+3uYTfrBaQOT+2BNUlzBgubsHM88m5MMMhjNfPktGZTYy7PtGdYjzkLKSFXWYEjq248l/1MQg==", + "version": "4.1.1--canary.163.21836818924.0", + "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-4.1.1--canary.163.21836818924.0.tgz", + "integrity": "sha512-ngc49JEjkRK/zMuBOp1lemaYjNkRyvyJFz8zWh16eARgm93qIg/mmWO4NnkD5nObTjBKd3d/9c2C6YVoiKHukw==", "license": "MPL 2.0", "dependencies": { "@floating-ui/react": "^0.27.16", @@ -5692,6 +5674,7 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.7.tgz", "integrity": "sha512-wAHc/cgKzW7LZNFloThyHnV/AX9gTg3w5yAv0gvQHPZoCnepwqCMtzbuPbb2UvfvO32XZ46e8bPOYbfZhzVnnQ==", "license": "MIT", + "peer": true, "dependencies": { "@tanstack/query-core": "5.90.7" }, @@ -6187,6 +6170,7 @@ "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -6197,6 +6181,7 @@ "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -6425,7 +6410,8 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz", "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@yarnpkg/lockfile": { "version": "1.1.0", @@ -6454,6 +6440,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "devOptional": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -6467,7 +6454,6 @@ "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } @@ -6491,7 +6477,6 @@ "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -6739,6 +6724,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001669", "electron-to-chromium": "^1.5.41", @@ -6832,7 +6818,6 @@ "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6" } @@ -7504,8 +7489,7 @@ "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/define-data-property": { "version": "1.1.4", @@ -7615,7 +7599,6 @@ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", "license": "MIT", - "peer": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -7642,7 +7625,6 @@ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -7658,7 +7640,6 @@ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -7978,7 +7959,6 @@ "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" @@ -7996,7 +7976,6 @@ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -8010,7 +7989,6 @@ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -8027,7 +8005,6 @@ "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8039,7 +8016,6 @@ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -8057,7 +8033,6 @@ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -8070,8 +8045,7 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/eslint/node_modules/escape-string-regexp": { "version": "4.0.0", @@ -8079,7 +8053,6 @@ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -8093,7 +8066,6 @@ "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -8107,7 +8079,6 @@ "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, "license": "ISC", - "peer": true, "dependencies": { "is-glob": "^4.0.3" }, @@ -8121,7 +8092,6 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -8132,7 +8102,6 @@ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -8146,7 +8115,6 @@ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -8160,7 +8128,6 @@ "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", @@ -8179,7 +8146,6 @@ "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -8193,7 +8159,6 @@ "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", "dev": true, "license": "BSD-3-Clause", - "peer": true, "dependencies": { "estraverse": "^5.1.0" }, @@ -8207,7 +8172,6 @@ "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "estraverse": "^5.2.0" }, @@ -8221,7 +8185,6 @@ "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">=4.0" } @@ -8242,7 +8205,6 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -8336,8 +8298,7 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/fast-equals": { "version": "5.2.2", @@ -8370,16 +8331,14 @@ "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/fast-levenshtein": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/fastq": { "version": "1.17.1", @@ -8397,7 +8356,6 @@ "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "flat-cache": "^4.0.0" }, @@ -8492,7 +8450,6 @@ "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -8520,7 +8477,6 @@ "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" @@ -8534,8 +8490,7 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", "dev": true, - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/form-data": { "version": "4.0.4", @@ -8634,8 +8589,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/fsevents": { "version": "2.3.3", @@ -8738,7 +8692,6 @@ "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", "deprecated": "Glob versions prior to v9 are no longer supported", "license": "ISC", - "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -8771,7 +8724,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -8948,7 +8900,6 @@ "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.1.1.tgz", "integrity": "sha512-+o4Y4Z0CLuyemeccvGN4bAO20aauB2N9tFEAep5x4OW34kV4PTarBHm6RL02afYt2BMKcr0D2Agep8S3nJPIBg==", "license": "MIT", - "peer": true, "dependencies": { "domhandler": "5.0.3", "htmlparser2": "10.0.0" @@ -9004,7 +8955,6 @@ "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.6.tgz", "integrity": "sha512-qcpPWLaSvqXi+TndiHbCa+z8qt0tVzjMwFGFBAa41ggC+ZA5BHaMIeMJla9g3VSp4SmiZb9qyQbmbpHYpIfPOg==", "license": "MIT", - "peer": true, "dependencies": { "domhandler": "5.0.3", "html-dom-parser": "5.1.1", @@ -9043,7 +8993,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", @@ -9056,7 +9005,6 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">=0.12" }, @@ -9157,7 +9105,6 @@ "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">= 4" } @@ -9168,7 +9115,6 @@ "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -9186,7 +9132,6 @@ "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.8.19" } @@ -9207,7 +9152,6 @@ "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", "license": "ISC", - "peer": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -9223,8 +9167,7 @@ "version": "0.2.4", "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz", "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/internmap": { "version": "2.0.3", @@ -9562,16 +9505,14 @@ "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/json-stable-stringify": { "version": "1.1.1", @@ -9597,8 +9538,7 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/jsonfile": { "version": "6.1.0", @@ -9629,7 +9569,6 @@ "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "json-buffer": "3.0.1" } @@ -9650,7 +9589,6 @@ "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" @@ -9914,7 +9852,6 @@ "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -9956,8 +9893,7 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/lodash.throttle": { "version": "4.1.1", @@ -10318,6 +10254,7 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "@bundled-es-modules/cookie": "^2.0.1", "@bundled-es-modules/statuses": "^1.0.1", @@ -10409,8 +10346,7 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/negotiator": { "version": "0.6.3", @@ -10531,7 +10467,6 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", "license": "ISC", - "peer": true, "dependencies": { "wrappy": "1" } @@ -10567,7 +10502,6 @@ "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", @@ -10628,6 +10562,7 @@ "integrity": "sha512-LDDSIu5J/4D4gFUuQQIEQpAC6maNEbMg4nC8JL/+Pe0cUDR86dtVZ09E2x5MwCh8f9yfktoaxt5x6UIVyzrajg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "tsgolint": "bin/tsgolint.js" }, @@ -10646,7 +10581,6 @@ "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "yocto-queue": "^0.1.0" }, @@ -10663,7 +10597,6 @@ "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -10720,7 +10653,6 @@ "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "callsites": "^3.0.0" }, @@ -10943,7 +10875,6 @@ "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -11056,6 +10987,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -11078,7 +11010,6 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">= 0.8.0" } @@ -11088,6 +11019,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -11376,6 +11308,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -11439,6 +11372,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -11494,8 +11428,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/react-remove-scroll": { "version": "2.6.3", @@ -11817,7 +11750,6 @@ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=4" } @@ -12357,7 +12289,6 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" }, @@ -12370,7 +12301,6 @@ "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz", "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==", "license": "MIT", - "peer": true, "dependencies": { "style-to-object": "1.0.9" } @@ -12380,7 +12310,6 @@ "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz", "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==", "license": "MIT", - "peer": true, "dependencies": { "inline-style-parser": "0.2.4" } @@ -12428,7 +12357,8 @@ "version": "4.1.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/tapable": { "version": "2.3.0", @@ -12527,6 +12457,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -12685,6 +12616,7 @@ "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "~0.25.0", "get-tsconfig": "^4.7.5" @@ -12742,7 +12674,6 @@ "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "prelude-ls": "^1.2.1" }, @@ -12786,6 +12717,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -12799,8 +12731,7 @@ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz", "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==", "devOptional": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/unist-util-is": { "version": "6.0.0", @@ -12895,7 +12826,6 @@ "resolved": "https://registry.npmjs.org/unxhr/-/unxhr-1.2.0.tgz", "integrity": "sha512-6cGpm8NFXPD9QbSNx0cD2giy7teZ6xOkCUH3U89WKVkL9N9rBrWjlCwhR94Re18ZlAop4MOc3WU1M3Hv/bgpIw==", "license": "MIT", - "peer": true, "engines": { "node": ">=8.11" } @@ -12937,7 +12867,6 @@ "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "punycode": "^2.1.0" } @@ -13115,6 +13044,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz", "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -13250,6 +13180,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13467,7 +13398,6 @@ "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -13476,8 +13406,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/ws": { "version": "8.18.0", @@ -13595,7 +13524,6 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, diff --git a/package.json b/package.json index 5df46b5fe..138ad67c9 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "dependencies": { "@floating-ui/react": "^0.26.23", "@headlessui/react": "^2.2.9", - "@oxide/design-system": "^4.1.0", + "@oxide/design-system": "^4.1.1--canary.163.21836818924.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-tabs": "^1.1.0", From 994596b80b4be87f8dbaa15d974160a26541a9df Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Thu, 12 Feb 2026 11:42:55 +0000 Subject: [PATCH 2/9] Initial light theme pass --- app/components/CapacityBar.tsx | 2 +- app/components/DocsPopover.tsx | 2 +- app/components/ErrorPage.tsx | 8 +- app/components/InstanceAutoRestartPopover.tsx | 2 +- app/components/Sidebar.tsx | 2 +- app/components/TimeSeriesChart.tsx | 6 +- app/components/TopBar.tsx | 5 +- app/forms/image-upload.tsx | 2 +- app/layouts/AuthLayout.tsx | 2 +- app/layouts/helpers.tsx | 2 +- app/pages/DeviceAuthSuccessPage.tsx | 2 +- app/pages/DeviceAuthVerifyPage.tsx | 2 +- app/pages/LoginPage.tsx | 2 +- app/pages/LoginPageSaml.tsx | 2 +- .../project/instances/SerialConsolePage.tsx | 4 +- app/table/cells/LinkCell.tsx | 2 +- app/ui/lib/ActionMenu.tsx | 6 +- app/ui/lib/BulkActionMenu.tsx | 2 +- app/ui/lib/Button.tsx | 2 +- app/ui/lib/CalendarCell.tsx | 4 +- app/ui/lib/CardBlock.tsx | 2 +- app/ui/lib/Checkbox.tsx | 14 ++- app/ui/lib/Combobox.tsx | 2 +- app/ui/lib/CopyToClipboard.tsx | 2 +- app/ui/lib/DateField.tsx | 2 +- app/ui/lib/DropdownMenu.tsx | 2 +- app/ui/lib/EmptyMessage.tsx | 2 +- app/ui/lib/FileInput.tsx | 8 +- app/ui/lib/Listbox.tsx | 2 +- app/ui/lib/Message.tsx | 10 +-- app/ui/lib/Modal.tsx | 4 +- app/ui/lib/NumberInput.tsx | 2 +- app/ui/lib/PageHeader.tsx | 4 +- app/ui/lib/Popover.tsx | 2 +- app/ui/lib/Progress.tsx | 2 +- app/ui/lib/PropertiesTable.tsx | 2 +- app/ui/lib/Radio.tsx | 12 +-- app/ui/lib/ResourceMeter.tsx | 2 +- app/ui/lib/SideModal.tsx | 2 +- app/ui/lib/SkipLink.tsx | 2 +- app/ui/lib/Table.tsx | 2 +- app/ui/lib/Tag.tsx | 2 +- app/ui/lib/TextInput.tsx | 2 +- app/ui/lib/Toast.tsx | 6 +- app/ui/styles/components/Tabs.css | 90 ++++++------------- app/ui/styles/components/button.css | 82 ++++++++++------- app/ui/styles/components/menu-button.css | 2 +- app/ui/styles/components/menu-list.css | 8 +- app/ui/styles/components/table.css | 45 +++++++--- app/ui/styles/components/tooltip.css | 2 +- app/ui/styles/index.css | 1 + index.html | 6 +- package-lock.json | 8 +- package.json | 2 +- 54 files changed, 201 insertions(+), 198 deletions(-) diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx index d07497cfb..905854194 100644 --- a/app/components/CapacityBar.tsx +++ b/app/components/CapacityBar.tsx @@ -87,7 +87,7 @@ function Bar({ pct }: { pct: number }) { return (
diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx index 17fb385b4..185d7a948 100644 --- a/app/components/DocsPopover.tsx +++ b/app/components/DocsPopover.tsx @@ -54,7 +54,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx index a655a2571..db279eda6 100644 --- a/app/components/ErrorPage.tsx +++ b/app/components/ErrorPage.tsx @@ -20,7 +20,7 @@ const GradientBackground = () => ( className="fixed top-0 right-0 bottom-0 left-0 -z-10" style={{ background: - 'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)', + 'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)', }} /> ) @@ -41,10 +41,10 @@ export function ErrorPage({ children }: Props) {
-
+
-
- +
+
{children}
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx index d94c6c396..ef4e41796 100644 --- a/app/components/InstanceAutoRestartPopover.tsx +++ b/app/components/InstanceAutoRestartPopover.tsx @@ -50,7 +50,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance }) diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx index 79be17f02..8214374c3 100644 --- a/app/components/Sidebar.tsx +++ b/app/components/Sidebar.tsx @@ -19,7 +19,7 @@ const linkStyles = (isActive = false) => cn( 'flex h-7 items-center rounded-md px-2 text-sans-md [&>svg]:mr-2', isActive - ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary' + ? 'text-accent bg-accent hover:bg-accent-hover [&>svg]:text-accent-tertiary' : 'hover:bg-hover [&>svg]:text-quaternary text-default' ) diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx index 9f4c9d337..79c20f522 100644 --- a/app/components/TimeSeriesChart.tsx +++ b/app/components/TimeSeriesChart.tsx @@ -92,7 +92,7 @@ function renderTooltip(props: TooltipProps, unit?: string) { } = payload[0] if (!timestamp || typeof value !== 'number') return null return ( -
+
{longDateTime(timestamp)}
@@ -315,10 +315,10 @@ const MetricsMessage = ({
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx index 675349eef..cb9f36085 100644 --- a/app/components/TopBar.tsx +++ b/app/components/TopBar.tsx @@ -53,10 +53,7 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) { const bigIconBox = 'flex h-[34px] w-[34px] items-center justify-center rounded' const BigIdenticon = ({ name }: { name: string }) => ( - + ) const SystemIcon = () => ( diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index 8b3ec80d0..c77852af5 100644 --- a/app/forms/image-upload.tsx +++ b/app/forms/image-upload.tsx @@ -675,7 +675,7 @@ export default function ImageCreate() { label="Image uploaded successfully" className={ allDone - ? 'bg-accent-secondary *:text-accent transition-colors' + ? 'bg-accent *:text-accent transition-colors' : 'transition-colors' } /> diff --git a/app/layouts/AuthLayout.tsx b/app/layouts/AuthLayout.tsx index 98cf88fe2..4f5b1c9cd 100644 --- a/app/layouts/AuthLayout.tsx +++ b/app/layouts/AuthLayout.tsx @@ -15,7 +15,7 @@ export default function AuthLayout() { className="relative h-screen" style={{ background: - 'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)', + 'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)', }} > diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx index 22530762b..42244e9c2 100644 --- a/app/layouts/helpers.tsx +++ b/app/layouts/helpers.tsx @@ -22,7 +22,7 @@ export function ContentPane() { return (
diff --git a/app/pages/DeviceAuthSuccessPage.tsx b/app/pages/DeviceAuthSuccessPage.tsx index a7e3eccd8..17fdb1b24 100644 --- a/app/pages/DeviceAuthSuccessPage.tsx +++ b/app/pages/DeviceAuthSuccessPage.tsx @@ -12,7 +12,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react' */ export default function DeviceAuthSuccessPage() { return ( -
+
diff --git a/app/pages/DeviceAuthVerifyPage.tsx b/app/pages/DeviceAuthVerifyPage.tsx index 601a094ab..28903f8b4 100644 --- a/app/pages/DeviceAuthVerifyPage.tsx +++ b/app/pages/DeviceAuthVerifyPage.tsx @@ -33,7 +33,7 @@ export default function DeviceAuthVerifyPage() { return (
{ event.preventDefault() diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx index fecc42df9..3ca1741a7 100644 --- a/app/pages/LoginPage.tsx +++ b/app/pages/LoginPage.tsx @@ -44,7 +44,7 @@ export default function LoginPage() { <>
{silo}
diff --git a/app/pages/LoginPageSaml.tsx b/app/pages/LoginPageSaml.tsx index 897dd86e7..6087da897 100644 --- a/app/pages/LoginPageSaml.tsx +++ b/app/pages/LoginPageSaml.tsx @@ -24,7 +24,7 @@ export default function LoginPageSaml() { <>
{silo}
diff --git a/app/pages/project/instances/SerialConsolePage.tsx b/app/pages/project/instances/SerialConsolePage.tsx index 2a0eba1cc..4a6790429 100644 --- a/app/pages/project/instances/SerialConsolePage.tsx +++ b/app/pages/project/instances/SerialConsolePage.tsx @@ -139,7 +139,7 @@ export default function SerialConsolePage() {
@@ -199,7 +199,7 @@ function SerialSkeleton({ children, animate }: SkeletonProps) { background: 'linear-gradient(180deg, rgba(8, 15, 17, 0) 0%, #080F11 100%)', }} /> -
+
{children}
diff --git a/app/table/cells/LinkCell.tsx b/app/table/cells/LinkCell.tsx index 106917eb8..d77a1e735 100644 --- a/app/table/cells/LinkCell.tsx +++ b/app/table/cells/LinkCell.tsx @@ -13,7 +13,7 @@ import { classed } from '~/util/classed' const linkClass = 'link-with-underline group flex h-full w-full items-center text-sans-md' /** Pushes out the link area to the entire cell for improved clickability™ */ -const Pusher = classed.div`absolute inset-0 w-[calc(100%-2px)] right-[2px] group-hover:bg-raise` +const Pusher = classed.div`absolute inset-0 group-hover:bg-raise` /** * Because this returns a component, it should only be used in a static context diff --git a/app/ui/lib/ActionMenu.tsx b/app/ui/lib/ActionMenu.tsx index 805ea0d95..777079a76 100644 --- a/app/ui/lib/ActionMenu.tsx +++ b/app/ui/lib/ActionMenu.tsx @@ -117,7 +117,7 @@ export function ActionMenu(props: ActionMenuProps) { >
{items.length > 0 && ( -
+
+
{actionButtons}
{selectedCount} selected diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx index 206f8c036..a0ec80ef7 100644 --- a/app/ui/lib/Button.tsx +++ b/app/ui/lib/Button.tsx @@ -45,7 +45,7 @@ export const buttonStyle = ({ variant = 'primary', }: ButtonStyleProps = {}) => { return cn( - 'ox-button active-clicked elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0', + 'ox-button active-clicked rounded-md inline-flex items-center justify-center align-top disabled:cursor-default shrink-0', `btn-${variant}`, sizeStyle[size], variant === 'danger' diff --git a/app/ui/lib/CalendarCell.tsx b/app/ui/lib/CalendarCell.tsx index d7aee306f..841e020bc 100644 --- a/app/ui/lib/CalendarCell.tsx +++ b/app/ui/lib/CalendarCell.tsx @@ -85,7 +85,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) { isSelected && !isDisabled ? isInvalid ? 'text-error bg-error-secondary' - : 'text-accent-secondary bg-accent-secondary' + : 'text-accent-secondary bg-accent' : 'text-secondary hover:bg-tertiary', isRoundedLeft && 'rounded-l', isRoundedRight && 'rounded-r', @@ -104,7 +104,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) { isSelected && !isDisabled ? isInvalid ? 'group-hover:bg-error-secondary-hover' - : 'group-hover:bg-accent-secondary-hover' + : 'group-hover:bg-accent-hover' : '', !isSelected && !isDisabled ? 'hover:bg-tertiary' : '' )} diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx index 5fd890636..5b2880057 100644 --- a/app/ui/lib/CardBlock.tsx +++ b/app/ui/lib/CardBlock.tsx @@ -28,7 +28,7 @@ export function CardBlock({ children, width = 'full' }: CardBlockProps) { return (
diff --git a/app/ui/lib/Checkbox.tsx b/app/ui/lib/Checkbox.tsx index cb5d02886..8ac95e5ac 100644 --- a/app/ui/lib/Checkbox.tsx +++ b/app/ui/lib/Checkbox.tsx @@ -12,19 +12,17 @@ import { Checkmark12Icon } from '@oxide/design-system/icons/react' import { classed } from '~/util/classed' const Check = () => ( - + ) -const Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none` +const Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent-inverse light:bg-green-600 pointer-events-none` const inputStyle = ` - appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 + appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 outline-none disabled:cursor-not-allowed - hover:border-hover hover:cursor-pointer - checked:bg-accent-secondary checked:border-accent-secondary - indeterminate:hover:border-accent checked:hover:border-accent - hover:indeterminate:bg-accent-secondary-hover hover:checked:bg-accent-secondary-hover - indeterminate:bg-accent-secondary indeterminate:border-accent-secondary + hover:border-raise hover:cursor-pointer + checked:bg-accent checked:border-accent-tertiary checked:hover:light:border-accent checked:hover:border-accent-secondary + indeterminate:bg-accent indeterminate:border-accent-tertiary indeterminate:hover:light:border-accent indeterminate:hover:border-accent-secondary ` export type CheckboxProps = { diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx index 96aaa0eaf..5dfffaeec 100644 --- a/app/ui/lib/Combobox.tsx +++ b/app/ui/lib/Combobox.tsx @@ -179,7 +179,7 @@ export const Combobox = ({ `flex rounded-md border focus-within:ring-2`, hasError ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error' - : 'border-default focus-within:ring-accent-secondary hover:border-hover', + : 'border-default focus-within:ring-accent-secondary hover:border-raise', disabled ? 'text-disabled bg-disabled border-default! cursor-not-allowed' : 'bg-default', diff --git a/app/ui/lib/CopyToClipboard.tsx b/app/ui/lib/CopyToClipboard.tsx index 733084276..89156611a 100644 --- a/app/ui/lib/CopyToClipboard.tsx +++ b/app/ui/lib/CopyToClipboard.tsx @@ -56,7 +56,7 @@ export const CopyToClipboard = ({ className={cn( 'active-clicked relative h-5 w-5 rounded', hasCopied - ? 'text-accent bg-accent-secondary' + ? 'text-accent bg-accent' : 'text-tertiary hover:text-default hover:bg-hover', className diff --git a/app/ui/lib/DateField.tsx b/app/ui/lib/DateField.tsx index ce984fe12..db3a6f7d4 100644 --- a/app/ui/lib/DateField.tsx +++ b/app/ui/lib/DateField.tsx @@ -130,7 +130,7 @@ function DateSegment({ }} className={cn( 'group box-content rounded-md px-px text-right tabular-nums outline-hidden', - !readOnly && 'focus:text-raise focus:bg-accent-secondary-hover', + !readOnly && 'focus:text-raise focus:bg-accent-hover', segment.type === 'timeZoneName' ? 'text-sans-sm ml-1' : 'text-sans-md' )} // Segment props turns this into a focusable element diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx index 4637b1855..7839848bd 100644 --- a/app/ui/lib/DropdownMenu.tsx +++ b/app/ui/lib/DropdownMenu.tsx @@ -40,7 +40,7 @@ export function Content({ className, children, anchor = 'bottom end', gap }: Con anchor={anchor} // goofy gap because tailwind hates string interpolation className={cn( - 'dropdown-menu-content elevation-2 outline-hidden', + 'dropdown-menu-content shadow-menu outline-hidden', gap === 8 && `[--anchor-gap:8px]`, className )} diff --git a/app/ui/lib/EmptyMessage.tsx b/app/ui/lib/EmptyMessage.tsx index c1136384e..efd6aa8e9 100644 --- a/app/ui/lib/EmptyMessage.tsx +++ b/app/ui/lib/EmptyMessage.tsx @@ -43,7 +43,7 @@ export function EmptyMessage(props: Props) { return (
{props.icon && ( -
+
{props.icon}
)} diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx index dc0f34db1..e74708a66 100644 --- a/app/ui/lib/FileInput.tsx +++ b/app/ui/lib/FileInput.tsx @@ -81,16 +81,16 @@ export function FileInput({
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx index 0691124bf..4acd2ff96 100644 --- a/app/ui/lib/Listbox.tsx +++ b/app/ui/lib/Listbox.tsx @@ -104,7 +104,7 @@ export const Listbox = ({ `text-sans-md flex h-11 items-center justify-between rounded-md border`, hasError ? 'focus-error border-error-secondary hover:border-error' - : 'border-default hover:border-hover', + : 'border-default hover:border-raise', open && 'ring-accent-secondary ring-2', open && hasError && 'ring-error-secondary', isDisabled diff --git a/app/ui/lib/Message.tsx b/app/ui/lib/Message.tsx index be3e90072..5fbdcb602 100644 --- a/app/ui/lib/Message.tsx +++ b/app/ui/lib/Message.tsx @@ -38,10 +38,10 @@ const defaultIcon: Record = { } const color: Record = { - success: 'bg-accent-secondary border-accent/10', - error: 'bg-error-secondary border-destructive/10', - notice: 'bg-notice-secondary border-notice/10', - info: 'bg-info-secondary border-blue-800/10', + success: 'bg-accent', + error: 'bg-error', + notice: 'bg-notice', + info: 'bg-info', } const textColor: Record = { @@ -77,7 +77,7 @@ export const Message = ({ return (
- + {title} {children} diff --git a/app/ui/lib/NumberInput.tsx b/app/ui/lib/NumberInput.tsx index fa4c49417..3792654b7 100644 --- a/app/ui/lib/NumberInput.tsx +++ b/app/ui/lib/NumberInput.tsx @@ -37,7 +37,7 @@ export function NumberInput(props: NumberInputProps) { 'relative flex rounded-md border', props.error ? 'border-error-secondary hover:border-error' - : 'border-default hover:border-hover', + : 'border-default hover:border-raise', props.isDisabled && 'border-default!', props.className )} diff --git a/app/ui/lib/PageHeader.tsx b/app/ui/lib/PageHeader.tsx index 53886cdce..51aaab48e 100644 --- a/app/ui/lib/PageHeader.tsx +++ b/app/ui/lib/PageHeader.tsx @@ -17,9 +17,9 @@ interface PageTitleProps { } export const PageTitle = ({ children: title, icon }: PageTitleProps) => { return ( -

+

{icon} - {title} + {title}

) } diff --git a/app/ui/lib/Popover.tsx b/app/ui/lib/Popover.tsx index 9387fcba7..60bcef5f8 100644 --- a/app/ui/lib/Popover.tsx +++ b/app/ui/lib/Popover.tsx @@ -39,7 +39,7 @@ export function Popover(props: PopoverProps) {
{children} diff --git a/app/ui/lib/Progress.tsx b/app/ui/lib/Progress.tsx index 6d1218508..ad80e4775 100644 --- a/app/ui/lib/Progress.tsx +++ b/app/ui/lib/Progress.tsx @@ -20,7 +20,7 @@ export type ProgressProps = { export const Progress = (props: ProgressProps) => (
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx index 0393eb8f2..8315bff80 100644 --- a/app/ui/lib/PropertiesTable.tsx +++ b/app/ui/lib/PropertiesTable.tsx @@ -41,7 +41,7 @@ export function PropertiesTable({ aria-label="Properties table" className={cn( className, - 'properties-table border-default min-w-min basis-6/12 rounded-lg border', + 'properties-table bg-default border-default min-w-min basis-6/12 rounded-lg border', '*:border-secondary *:border-t *:pr-6 *:pl-3 [&>*:nth-child(-n+2)]:border-t-0!', 'grid grid-cols-[minmax(min-content,1fr)_3fr]', { diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx index 38f4d8fed..e4bae2914 100644 --- a/app/ui/lib/Radio.tsx +++ b/app/ui/lib/Radio.tsx @@ -24,8 +24,8 @@ export type RadioProps = Omit, 'type'> & { const fieldStyles = ` peer appearance-none absolute outline-hidden - border border-default h-4 w-4 rounded-full bg-default hover:border-hover checked:hover:border-accent - checked:bg-accent-secondary checked:border-accent-secondary disabled:bg-disabled hover:disabled:bg-disabled + border border-default h-4 w-4 rounded-full bg-default hover:border-raise checked:hover:border-accent-secondary checked:hover:light:border-accent + checked:bg-accent checked:border-accent-secondary disabled:bg-disabled hover:disabled:bg-disabled disabled:hover:bg-transparent ` @@ -34,7 +34,7 @@ export const Radio = ({ children, className, alignTop, ...inputProps }: RadioPro {/* the dot in the middle. hide by default, use peer-checked to show if checked */} -
+
{children && {children}} @@ -42,18 +42,18 @@ export const Radio = ({ children, className, alignTop, ...inputProps }: RadioPro ) const cardLabelStyles = ` - text-sans-md border rounded-md border-default bg-default hover:border-hover + text-sans-md border rounded-md border-default bg-default hover:border-raise peer-focus:ring-2 peer-focus:ring-accent-secondary w-44 text-raise *:border-secondary *:p-3 cursor-pointer - peer-checked:bg-accent-secondary + peer-checked:bg-accent peer-checked:border-accent-secondary peer-checked:hover:border-accent peer-checked:*:border-accent peer-checked:*:border-accent-secondary peer-checked:text-accent peer-checked:[&>*_.text-default]:text-accent-secondary peer-disabled:cursor-not-allowed - peer-disabled:bg-disabled peer-disabled:peer-checked:bg-accent-secondary + peer-disabled:bg-disabled peer-disabled:peer-checked:bg-accent peer-checked:peer-disabled:hover:border-accent-secondary peer-disabled:hover:border-default peer-disabled:[&>*_.text-default]:text-disabled peer-disabled:text-disabled peer-disabled:peer-checked:text-accent-disabled peer-disabled:peer-checked:[&>*_.text-default]:text-accent-disabled ` diff --git a/app/ui/lib/ResourceMeter.tsx b/app/ui/lib/ResourceMeter.tsx index 539ff995c..0732e934b 100644 --- a/app/ui/lib/ResourceMeter.tsx +++ b/app/ui/lib/ResourceMeter.tsx @@ -42,7 +42,7 @@ export const ResourceMeter = ({ ? 'bg-destructive-secondary' : value > warningThreshold ? 'bg-notice-secondary' - : 'bg-accent-secondary' + : 'bg-accent' return (
diff --git a/app/ui/lib/SkipLink.tsx b/app/ui/lib/SkipLink.tsx index 66654240b..a451aa75a 100644 --- a/app/ui/lib/SkipLink.tsx +++ b/app/ui/lib/SkipLink.tsx @@ -13,7 +13,7 @@ const skipLinkStyles = ` uppercase text-mono-lg rounded inline-flex items-center justify-center focus:ring-2 focus:ring-accent-secondary - bg-accent-secondary border-transparent text-accent text-mono-sm + bg-accent border-transparent text-accent text-mono-sm transition-all motion-reduce:transform-none ` diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx index 25c3ba751..ca27e061c 100644 --- a/app/ui/lib/Table.tsx +++ b/app/ui/lib/Table.tsx @@ -101,7 +101,7 @@ Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProp >
diff --git a/app/ui/lib/Tag.tsx b/app/ui/lib/Tag.tsx index 857d548c0..8b7d4a7bc 100644 --- a/app/ui/lib/Tag.tsx +++ b/app/ui/lib/Tag.tsx @@ -28,7 +28,7 @@ export const tagColors: Record>> = notice: 'bg-notice text-inverse', }, secondary: { - default: 'bg-accent-secondary text-accent', + default: 'bg-accent text-accent', destructive: 'bg-destructive-secondary text-destructive', notice: 'bg-notice-secondary text-notice', neutral: 'bg-secondary text-default', diff --git a/app/ui/lib/TextInput.tsx b/app/ui/lib/TextInput.tsx index a5c3fcc90..826d9dd5b 100644 --- a/app/ui/lib/TextInput.tsx +++ b/app/ui/lib/TextInput.tsx @@ -68,7 +68,7 @@ export function TextInput({ 'flex items-center rounded-md border', error ? 'border-error-secondary hover:border-error' - : 'border-default hover:border-hover', + : 'border-default hover:border-raise', disabled && 'border-default!', className )} diff --git a/app/ui/lib/Toast.tsx b/app/ui/lib/Toast.tsx index 6d31e0d28..27c213c0b 100644 --- a/app/ui/lib/Toast.tsx +++ b/app/ui/lib/Toast.tsx @@ -49,7 +49,7 @@ const defaultTitle: Record = { } const color: Record = { - success: 'bg-accent-secondary', + success: 'bg-accent', error: 'bg-error-secondary', info: 'bg-notice-secondary', } @@ -84,7 +84,7 @@ export const Toast = ({ return (
* { - @apply rounded-md bg-transparent px-1.5 py-1; +.ox-tab[data-state='active'], +.ox-tab.is-selected { + @apply text-accent border-accent light:border-green-800 light:text-raise; } -/* Hover states */ -.ox-tabs-list .ox-tab:hover > * { - @apply bg-hover; +.ox-tab > * { + @apply rounded-md bg-transparent px-1.5 py-1; } - -/* Active states */ -.ox-tab[data-state='active'] { - @apply text-accent border-accent; +.ox-tab:hover > * { + @apply bg-hover; } -.ox-tabs-list .ox-tab[data-state='active']:hover > * { - @apply bg-accent-secondary; +.ox-tab[data-state='active']:hover > *, +.ox-tab.is-selected:hover > * { + @apply !bg-accent light:bg-hover!; } -/* Badge styles */ .ox-tab > .ox-badge { @apply -mt-1 text-current select-none; } -.ox-tab[data-state='inactive'] > .ox-badge { +.ox-tab[data-state='inactive'] > .ox-badge, +.ox-tab:not(.is-selected) > .ox-badge { @apply bg-disabled; } -.ox-tab[data-state='active'] > .ox-badge { - @apply bg-accent-secondary-hover; -} - -/* Full width variants */ -.ox-tabs.full-width { - @apply !mx-0 !w-full; -} - -.ox-tabs.full-width > .ox-tabs-panel { - @apply mx-[var(--content-gutter)]; -} - -.ox-tabs.full-width .ox-tabs-list:before { - @apply border-secondary block w-10 min-w-max flex-shrink-0 border-b; - content: ''; -} - -/* Side tabs styles */ -.ox-side-tabs-list { - @apply sticky top-10 flex w-[180px] flex-shrink-0 flex-col gap-0.5 self-start; -} - -.ox-side-tabs-list .ox-tab { - @apply text-sans-md text-secondary h-auto rounded-md p-2 py-1.5 whitespace-nowrap normal-case !no-underline; - border-bottom: none; -} - -.ox-side-tabs-list .ox-tab[data-state='active'] { - @apply text-accent bg-accent-secondary; - border: none; -} - -.ox-side-tabs .ox-tabs-panel { - @apply mx-0 ml-4; -} - -.ox-side-tabs-list .ox-tab[data-state='active']:hover { - @apply bg-accent-secondary-hover; -} - -.ox-side-tabs-list .ox-tab:not([data-state='active']):hover { - @apply text-default bg-hover; +.ox-tab[data-state='active'] > .ox-badge, +.ox-tab.is-selected > .ox-badge { + @apply bg-accent; } diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css index 5fc6fe285..debd19c29 100644 --- a/app/ui/styles/components/button.css +++ b/app/ui/styles/components/button.css @@ -8,43 +8,57 @@ .ox-button { @apply relative; -} -.active-clicked:active:not(.visually-disabled) { - @apply motion-safe:translate-y-px; -} -.ox-button:after { - content: ''; - @apply absolute top-0 right-0 bottom-0 left-0 rounded-md border border-current opacity-[0.05]; -} -.btn-primary { - @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover disabled:text-accent-disabled disabled:bg-accent-secondary; -} -.btn-primary:disabled > .spinner, -.btn-primary.visually-disabled > .spinner { - @apply text-accent; -} -.btn-secondary { - @apply text-default bg-secondary hover:bg-hover disabled:text-disabled disabled:bg-secondary; -} -.btn-secondary:disabled > .spinner, -.btn-secondary.visually-disabled > .spinner { - @apply text-default; -} + &:after { + content: ''; + @apply absolute top-0 right-0 bottom-0 left-0 rounded-md border border-current/5; + } + &.btn-primary { + @apply text-accent bg-accent hover:bg-accent-hover disabled:text-accent/35 disabled:bg-accent; + } + &.btn-primary:disabled > .spinner, + &.btn-primary.visually-disabled > .spinner { + @apply text-accent; + } -.btn-danger { - @apply text-destructive bg-destructive-secondary hover:bg-destructive-secondary-hover disabled:text-destructive-disabled disabled:bg-destructive-secondary; -} -.btn-danger:disabled > .spinner, -.btn-danger.visually-disabled > .spinner { - @apply text-destructive; -} + &.btn-secondary { + @apply text-secondary bg-secondary hover:bg-hover disabled:text-secondary/35 disabled:bg-secondary; + } + &.btn-secondary:disabled > .spinner, + &.btn-secondary.visually-disabled > .spinner { + @apply text-secondary; + } -.btn-ghost { - @apply text-default border-default hover:bg-hover disabled:text-disabled border disabled:bg-transparent; -} -.btn-ghost:after { - @apply hidden; + &.btn-danger { + @apply text-destructive bg-destructive hover:bg-destructive-hover disabled:text-destructive/35 disabled:bg-destructive; + } + &.btn-danger:disabled > .spinner, + &.btn-danger.visually-disabled > .spinner { + @apply text-destructive; + } + + &.btn-ghost { + @apply text-secondary hover:bg-hover disabled:text-secondary/35 disabled:bg-transparent; + } + &.btn-ghost:after { + @apply border-current/20; + } + + &.btn-accent-ghost { + @apply text-accent border-accent-secondary hover:bg-accent-hover border; + } + + &.btn-accent-ghost:after { + @apply hidden; + } + + &.btn-accent-solid { + @apply text-inverse bg-accent-inverse; + } + + &.btn-accent-solid:after { + @apply hidden; + } } /** diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css index c7ad40e8a..2b029cd17 100644 --- a/app/ui/styles/components/menu-button.css +++ b/app/ui/styles/components/menu-button.css @@ -8,7 +8,7 @@ .dropdown-menu-content { /* we want menu popover to be on top of top bar and pagination bar too */ - @apply bg-raise border-secondary z-(--z-top-bar-dropdown) min-w-36 rounded-md border p-0; + @apply bg-raise light:bg-default z-(--z-top-bar-dropdown) min-w-36 rounded-md p-0; & .DropdownMenuItem { @apply text-sans-md text-default border-secondary flex w-full cursor-pointer items-center border-b py-2 pr-6 pl-3 text-left select-none last:border-b-0; diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css index 8975447ee..309e83510 100644 --- a/app/ui/styles/components/menu-list.css +++ b/app/ui/styles/components/menu-list.css @@ -7,7 +7,7 @@ */ .ox-menu { - @apply bg-raise border-secondary elevation-2 !max-h-[17.5rem] overflow-y-auto rounded-md border; + @apply bg-raise shadow-menu !max-h-[17.5rem] overflow-y-auto rounded-md; } .ox-menu-item { @@ -19,15 +19,15 @@ } .ox-menu-item.is-highlighted.is-selected { - @apply bg-accent-secondary-hover; + @apply bg-accent-hover; } .ox-menu-item.is-selected[data-highlighted] { - @apply bg-accent-secondary-hover; + @apply bg-accent-hover; } .ox-menu-item.is-selected { - @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover border-0; + @apply text-accent bg-accent hover:bg-accent-hover border-0; .ox-badge { @apply text-inverse bg-accent ring-0; } diff --git a/app/ui/styles/components/table.css b/app/ui/styles/components/table.css index 231f6ae6b..1b2b85daf 100644 --- a/app/ui/styles/components/table.css +++ b/app/ui/styles/components/table.css @@ -55,6 +55,17 @@ table.ox-table { @apply bg-default sticky left-0 z-10; } + /* Border between sticky first column and second column: + first column owns the right border, second column drops its left border */ + & td:first-of-type > div, + & th:first-of-type > div { + @apply border-r; + } + & td:nth-of-type(2) > div, + & th:nth-of-type(2) > div { + @apply border-l-0; + } + /* Last column is sticky if it is a more actions cell @@ -306,30 +317,42 @@ table.ox-table { Drop shadow appears if content is below a sticky cell and the table is overflowing */ +td:first-of-type, +th:first-of-type, +td:last-of-type.action-col, +th:last-of-type.action-col { + transition-property: box-shadow; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 250ms; +} + .scrolled td:first-of-type, -.scrolled th:first-of-type, +.scrolled th:first-of-type { + box-shadow: 6px 0 8px -2px oklch(0 0 0 / 0.2); +} .overflowing td:last-of-type.action-col, .overflowing th:last-of-type.action-col { - @apply elevation-2; + box-shadow: -6px 0 8px -2px oklch(0 0 0 / 0.2); +} +.light .scrolled td:first-of-type, +.light .scrolled th:first-of-type { + box-shadow: 6px 0 8px -2px oklch(0 0 0 / 0.05); +} +.light .overflowing td:last-of-type.action-col, +.light .overflowing th:last-of-type.action-col { + box-shadow: -6px 0 8px -2px oklch(0 0 0 / 0.05); } /* Stops shadow from overflowing below - -1px helps with a visual glitch when a bit - underneath shows through */ .scrolled td:first-of-type, .scrolled th:first-of-type { - clip-path: inset(0px -40px 0px -1px); + clip-path: inset(0px -40px 0px 0px); } .overflowing td:last-of-type.action-col, .overflowing th:last-of-type.action-col { - clip-path: inset(0px -1px 0px -40px); -} - -.scrolled td:first-of-type:before, -.scrolled th:first-of-type:before { - @apply border-r-secondary absolute top-0 right-0 bottom-0 border-r content-['']; + clip-path: inset(0px 0px 0px -40px); } .simplebar-scrollbar { diff --git a/app/ui/styles/components/tooltip.css b/app/ui/styles/components/tooltip.css index ebaa86e5d..ad13b7b8b 100644 --- a/app/ui/styles/components/tooltip.css +++ b/app/ui/styles/components/tooltip.css @@ -7,7 +7,7 @@ */ .ox-tooltip { - @apply text-sans-md text-default bg-raise border-secondary elevation-2 rounded-md border p-2; + @apply text-sans-md text-default bg-raise shadow-tooltip rounded-md p-2; } .ox-tooltip-arrow { diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css index 6c39b7811..66e93a470 100644 --- a/app/ui/styles/index.css +++ b/app/ui/styles/index.css @@ -47,6 +47,7 @@ @import '@xterm/xterm/css/xterm.css' layer(components); @source '../../../node_modules/@oxide/design-system/dist'; +@custom-variant light (&:where([data-theme=light], [data-theme=light] *)); @theme { --animate-spin-slow: spin 5s linear infinite; diff --git a/index.html b/index.html index 0e190e369..928c94ad8 100644 --- a/index.html +++ b/index.html @@ -13,12 +13,14 @@ Oxide Console - + + - + +