From 0ad3b9f0952401595c8d2d23b66b92f595761b50 Mon Sep 17 00:00:00 2001 From: Uriel Date: Sat, 8 Apr 2023 21:52:52 +0200 Subject: [PATCH] Theme support (#663) Co-authored-by: ButterscotchV --- gui/package.json | 2 +- gui/public/i18n/en/translation.ftl | 1 + gui/src/components/commons/BaseModal.tsx | 8 +- gui/src/components/commons/Checkbox.tsx | 2 +- gui/src/components/commons/Dropdown.tsx | 6 +- gui/src/components/commons/Radio.tsx | 7 +- gui/src/components/commons/ThemeSelector.tsx | 45 +++ gui/src/components/commons/icon/CloseIcon.tsx | 16 +- .../components/commons/icon/MaximiseIcon.tsx | 9 +- .../components/commons/icon/MinimiseIcon.tsx | 6 +- gui/src/components/commons/icon/ResetIcon.tsx | 9 +- gui/src/components/commons/icon/VRCIcon.tsx | 6 +- .../settings/pages/GeneralSettings.tsx | 25 +- gui/src/hooks/config.ts | 6 + gui/src/index.css | 55 ++- gui/tailwind.config.cjs | 71 +++- package-lock.json | 348 +++++++++++------- 17 files changed, 432 insertions(+), 190 deletions(-) create mode 100644 gui/src/components/commons/ThemeSelector.tsx diff --git a/gui/package.json b/gui/package.json index 80a78d5d34..afeeff9422 100644 --- a/gui/package.json +++ b/gui/package.json @@ -82,7 +82,7 @@ "prettier": "^2.7.1", "pretty-quick": "^3.1.3", "tailwind-gradient-mask-image": "^1.0.0", - "tailwindcss": "^3.0.23", + "tailwindcss": "^3.3.1", "vite": "^4.0.3" } } diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl index 0f58669a09..b537a06dc9 100644 --- a/gui/public/i18n/en/translation.ftl +++ b/gui/public/i18n/en/translation.ftl @@ -337,6 +337,7 @@ settings-general-interface-feedback_sound = Feedback sound settings-general-interface-feedback_sound-description = This option will play a sound when a reset is triggered settings-general-interface-feedback_sound-label = Feedback sound settings-general-interface-feedback_sound-volume = Feedback sound volume +settings-general-interface-theme = Color theme settings-general-interface-lang = Select language settings-general-interface-lang-description = Change the default language you want to use. settings-general-interface-lang-placeholder = Select the language to use diff --git a/gui/src/components/commons/BaseModal.tsx b/gui/src/components/commons/BaseModal.tsx index ff6e1caf90..e2861ac19e 100644 --- a/gui/src/components/commons/BaseModal.tsx +++ b/gui/src/components/commons/BaseModal.tsx @@ -17,14 +17,16 @@ export function BaseModal({ overlayClassName={ props.overlayClassName || classNames( - 'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center items-center w-full h-full bg-background-90 bg-opacity-60 z-20' + 'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center', + 'items-center w-full h-full bg-background-90 bg-opacity-60 z-20' ) } className={ props.className || classNames( - props.className as string, - 'items-center focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg text-white' + 'items-center focus:ring-transparent focus:ring-offset-transparent', + 'focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg', + 'text-background-10' ) } > diff --git a/gui/src/components/commons/Checkbox.tsx b/gui/src/components/commons/Checkbox.tsx index 71a635d2a4..2727d0b824 100644 --- a/gui/src/components/commons/Checkbox.tsx +++ b/gui/src/components/commons/Checkbox.tsx @@ -44,7 +44,7 @@ export function CheckBox({
-
    +
      {items.map((item) => (
    • + />
      {label} {desciption && ( diff --git a/gui/src/components/commons/ThemeSelector.tsx b/gui/src/components/commons/ThemeSelector.tsx new file mode 100644 index 0000000000..52af2f2d93 --- /dev/null +++ b/gui/src/components/commons/ThemeSelector.tsx @@ -0,0 +1,45 @@ +import classNames from 'classnames'; +import { Control, Controller } from 'react-hook-form'; + +export function ThemeSelector({ + control, + name, + value, + // input props + disabled, + colors, + ...props +}: { + control: Control; + name: string; + colors: string | undefined; + value: string | number; +} & React.HTMLProps) { + return ( + ( + + )} + /> + ); +} diff --git a/gui/src/components/commons/icon/CloseIcon.tsx b/gui/src/components/commons/icon/CloseIcon.tsx index 4ecc38a7f3..dabfc08e46 100644 --- a/gui/src/components/commons/icon/CloseIcon.tsx +++ b/gui/src/components/commons/icon/CloseIcon.tsx @@ -1,3 +1,5 @@ +import classNames from 'classnames'; + export function CloseIcon({ className, size = 35, @@ -9,21 +11,13 @@ export function CloseIcon({ - - + + ); } diff --git a/gui/src/components/commons/icon/MaximiseIcon.tsx b/gui/src/components/commons/icon/MaximiseIcon.tsx index e5bb192c91..56a54225d0 100644 --- a/gui/src/components/commons/icon/MaximiseIcon.tsx +++ b/gui/src/components/commons/icon/MaximiseIcon.tsx @@ -1,17 +1,16 @@ +import classNames from 'classnames'; + export function MaximiseIcon({ className }: { className?: string }) { return ( - + ); } diff --git a/gui/src/components/commons/icon/MinimiseIcon.tsx b/gui/src/components/commons/icon/MinimiseIcon.tsx index 9823a06193..7cee44d672 100644 --- a/gui/src/components/commons/icon/MinimiseIcon.tsx +++ b/gui/src/components/commons/icon/MinimiseIcon.tsx @@ -1,13 +1,15 @@ +import classNames from 'classnames'; + export function MinimiseIcon({ className }: { className?: string }) { return ( - + ); } diff --git a/gui/src/components/commons/icon/ResetIcon.tsx b/gui/src/components/commons/icon/ResetIcon.tsx index ba98310bb1..597f4ce839 100644 --- a/gui/src/components/commons/icon/ResetIcon.tsx +++ b/gui/src/components/commons/icon/ResetIcon.tsx @@ -4,19 +4,18 @@ export function FullResetIcon({ width = 33 }: { width?: number }) { width={width} height="29" viewBox="0 0 33 29" + className="stroke-background-10" fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } diff --git a/gui/src/components/settings/pages/GeneralSettings.tsx b/gui/src/components/settings/pages/GeneralSettings.tsx index 69f7798809..7e586c265e 100644 --- a/gui/src/components/settings/pages/GeneralSettings.tsx +++ b/gui/src/components/settings/pages/GeneralSettings.tsx @@ -26,6 +26,7 @@ import { WrenchIcon } from '../../commons/icon/WrenchIcons'; import { LangSelector } from '../../commons/LangSelector'; import { NumberSelector } from '../../commons/NumberSelector'; import { Radio } from '../../commons/Radio'; +import { ThemeSelector } from '../../commons/ThemeSelector'; import { Typography } from '../../commons/Typography'; import { SettingsPageLayout } from '../SettingsPageLayout'; @@ -77,6 +78,7 @@ interface SettingsForm { watchNewDevices: boolean; feedbackSound: boolean; feedbackSoundVolume: number; + theme: string; }; } @@ -123,6 +125,7 @@ const defaultValues = { watchNewDevices: true, feedbackSound: true, feedbackSoundVolume: 0.5, + theme: 'slime', }, }; @@ -207,6 +210,7 @@ export function GeneralSettings() { watchNewDevices: values.interface.watchNewDevices, feedbackSound: values.interface.feedbackSound, feedbackSoundVolume: values.interface.feedbackSoundVolume, + theme: values.interface.theme, }); }; @@ -226,6 +230,7 @@ export function GeneralSettings() { watchNewDevices: config?.watchNewDevices, feedbackSound: config?.feedbackSound, feedbackSoundVolume: config?.feedbackSoundVolume, + theme: config?.theme, }, }; @@ -905,7 +910,25 @@ export function GeneralSettings() { step={0.1} />
      - +
      + + {l10n.getString('settings-general-interface-theme')} + +
      + + +
      +
      {l10n.getString('settings-general-interface-lang')} diff --git a/gui/src/hooks/config.ts b/gui/src/hooks/config.ts index c32bd214e4..f85606cd76 100644 --- a/gui/src/hooks/config.ts +++ b/gui/src/hooks/config.ts @@ -18,6 +18,7 @@ export interface Config { devSettings: DeveloperModeWidgetForm; feedbackSound: boolean; feedbackSoundVolume: number; + theme: string; } export interface ConfigContext { @@ -33,6 +34,7 @@ const defaultConfig: Partial = { watchNewDevices: true, feedbackSound: true, feedbackSoundVolume: 0.5, + theme: 'slime', }; function fallbackToDefaults(loadedConfig: any): Config { @@ -52,6 +54,9 @@ export function useConfigProvider(): ConfigContext { } : null; set(newConfig as Config); + if ('theme' in config) { + document.documentElement.dataset.theme = config.theme; + } if (!debounceTimer.current) { debounceTimer.current = setTimeout(async () => { @@ -85,6 +90,7 @@ export function useConfigProvider(): ConfigContext { const loadedConfig = fallbackToDefaults(JSON.parse(json)); set(loadedConfig); + document.documentElement.dataset.theme = loadedConfig.theme; setLoading(false); return loadedConfig; } catch (e) { diff --git a/gui/src/index.css b/gui/src/index.css index 327c7987a7..3aac76e59c 100644 --- a/gui/src/index.css +++ b/gui/src/index.css @@ -39,11 +39,64 @@ body { font-display: swap; } -html { +:root { overflow: hidden; background: theme('colors.background.20'); } +/* Colors have to be in RGB format currently */ +:root { + --background-10: 255, 255, 255; + --background-20: 120, 164, 198; + --background-30: 96, 138, 171; + --background-40: 61, 99, 129; + --background-50: 26, 61, 89; + --background-60: 17, 45, 67; + --background-70: 8, 30, 48; + --background-80: 0, 16, 28; + --background-90: 0, 5, 9; + + --accent-background-10: 187, 138, 229; + --accent-background-20: 157, 92, 212; + --accent-background-30: 101, 69, 154; + --accent-background-40: 98, 59, 131; + --accent-background-50: 46, 33, 69; + + --success: 80, 232, 151; + --warning: 216, 205, 55; + --critical: 223, 109, 140; + --special: 164, 79, 237; + --window-icon-stroke: 192, 161, 216; + + --default-color: 255, 255, 255; +} + +:root[data-theme='trans'] { + --background-10: 77, 34, 43; + --background-20: 26, 102, 130; + --background-30: 9, 84, 112; + --background-40: 79, 159, 189; + --background-50: 238, 238, 238; + --background-60: 255, 255, 255; + --background-70: 245, 169, 184; + --background-80: 91, 206, 250; + --background-90: 0, 5, 9; + + --accent-background-10: 181, 58, 82; + --accent-background-20: 252, 202, 212; + --accent-background-30: 247, 183, 196; + --accent-background-40: 247, 183, 196; + --accent-background-50: 245, 169, 184; + + --success: 68, 194, 127; + --warning: 240, 221, 58; + --critical: 223, 109, 140; + --special: 164, 79, 237; + --window-icon-stroke: 28, 154, 201; + + --default-color: 29, 29, 29; +} + #root { height: 100%; } diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs index 8b4e9d7257..991b840dd0 100644 --- a/gui/tailwind.config.cjs +++ b/gui/tailwind.config.cjs @@ -21,6 +21,26 @@ const colors = { 700: '#623B83', 900: '#2E2145', }, + 'trans-blue': { + 100: '#4D222B', // Dark text + 200: '#1A6682', // Some lighter-ish text + 300: '#095470', // Light-ish text + 400: '#4F9FBD', // Button hover in some places + 500: '#EEEEEE', // Darker trans white tracker list background + 600: '#FFFFFF', // Trans white tracker list background and some buttons + 700: '#F5A9B8', // Trans pink home background + 800: '#5BCEFA', // Trans blue trans outer background + 900: '#000509', + }, + 'trans-pink': { + 100: '#B53A52', // Accent text + 200: '#FCCAD4', // Lighter trans pink button + 300: '#F7B7C4', // Somewhat lighter trans pink button + 400: '#F7B7C4', // Somewhat lighter trans pink button + 500: '#F5A9B8', // Trans pink buttons + 700: '#FA91A6', // Darker trans pink button + 900: '#F77C94', // Even darker trans pink home bottom + }, }; module.exports = { @@ -36,26 +56,33 @@ module.exports = { extend: { colors: { status: { - success: '#50E897', - warning: '#D8CD37', - critical: '#DF6D8C', - special: '#A44FED', + success: 'rgb(var(--success), )', + warning: 'rgb(var(--warning), )', + critical: 'rgb(var(--critical), )', + special: 'rgb(var(--special), )', + }, + window: { + icon: 'rgb(var(--window-icon-stroke), )', }, ...colors, - background: Object.keys(colors['blue-gray']).reduce( - (curr, colork, index) => ({ - ...curr, - [(index + 1) * 10]: colors['blue-gray'][colork], - }), - {} - ), - 'accent-background': Object.keys(colors.purple).reduce( - (curr, colork, index) => ({ - ...curr, - [(index + 1) * 10]: colors.purple[colork], - }), - {} - ), + background: { + 10: 'rgb(var(--background-10), )', + 20: 'rgb(var(--background-20), )', + 30: 'rgb(var(--background-30), )', + 40: 'rgb(var(--background-40), )', + 50: 'rgb(var(--background-50), )', + 60: 'rgb(var(--background-60), )', + 70: 'rgb(var(--background-70), )', + 80: 'rgb(var(--background-80), )', + 90: 'rgb(var(--background-90), )', + }, + 'accent-background': { + 10: 'rgb(var(--accent-background-10), )', + 20: 'rgb(var(--accent-background-20), )', + 30: 'rgb(var(--accent-background-30), )', + 40: 'rgb(var(--accent-background-40), )', + 50: 'rgb(var(--accent-background-50), )', + }, }, fontSize: { DEFAULT: rem(12), @@ -64,7 +91,7 @@ module.exports = { DEFAULT: 500, }, color: { - DEFAULT: '#ffffff', + DEFAULT: 'rgb(var(--default-color), )', }, keyframes: { bounce: { @@ -78,12 +105,16 @@ module.exports = { }, }, }, + backgroundImage: { + 'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`, + slime: `linear-gradient(135deg, ${colors.purple[100]} 50%, ${colors['blue-gray'][700]} 50% 100%)`, + }, }, }, plugins: [ require('@tailwindcss/forms'), require('tailwind-gradient-mask-image'), - plugin(function ({ addUtilities, theme }) { + plugin(function ({ addUtilities }) { const textConfig = (fontSize, fontWeight) => ({ fontSize, fontWeight, diff --git a/package-lock.json b/package-lock.json index fb4eeb4171..c1f8f49e59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,7 +71,7 @@ "prettier": "^2.7.1", "pretty-quick": "^3.1.3", "tailwind-gradient-mask-image": "^1.0.0", - "tailwindcss": "^3.0.23", + "tailwindcss": "^3.3.1", "vite": "^4.0.3" } }, @@ -3664,38 +3664,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "dev": true, - "dependencies": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - } - }, - "node_modules/acorn-node/node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "dev": true, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/address": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz", @@ -3749,6 +3717,12 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -4485,15 +4459,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/defined": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", - "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", - "dev": true, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/detect-port-alt": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", @@ -4523,23 +4488,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, - "node_modules/detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "dev": true, - "dependencies": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - }, - "bin": { - "detective": "bin/detective.js" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -6488,6 +6436,15 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz", + "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/js-sdsl": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz", @@ -6837,6 +6794,17 @@ "node": ">=8" } }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -7212,6 +7180,15 @@ "node": ">=0.10.0" } }, + "node_modules/pirates": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/pkg-up": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz", @@ -8823,6 +8800,56 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/sucrase": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz", + "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==", + "dev": true, + "dependencies": { + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -8882,34 +8909,35 @@ "dev": true }, "node_modules/tailwindcss": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", - "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", + "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==", "dev": true, "dependencies": { "arg": "^5.0.2", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", + "jiti": "^1.17.2", "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.18", + "postcss": "^8.0.9", "postcss-import": "^14.1.0", "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.4", "postcss-nested": "6.0.0", - "postcss-selector-parser": "^6.0.10", + "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "bin": { "tailwind": "lib/cli.js", @@ -9011,6 +9039,27 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/three": { "version": "0.148.0", "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz", @@ -9045,6 +9094,12 @@ "node": ">=8.0" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", @@ -9512,15 +9567,6 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, - "node_modules/xtend": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "dev": true, - "engines": { - "node": ">=0.4" - } - }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", @@ -11952,31 +11998,6 @@ "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", "requires": {} }, - "acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "dev": true, - "requires": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - }, - "dependencies": { - "acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "dev": true - } - } - }, - "acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "dev": true - }, "address": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz", @@ -12012,6 +12033,12 @@ "color-convert": "^2.0.1" } }, + "any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -12527,12 +12554,6 @@ "object-keys": "^1.1.1" } }, - "defined": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", - "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", - "dev": true - }, "detect-port-alt": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", @@ -12557,17 +12578,6 @@ } } }, - "detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "dev": true, - "requires": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - } - }, "didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -13964,6 +13974,12 @@ } } }, + "jiti": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz", + "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==", + "dev": true + }, "js-sdsl": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz", @@ -14223,6 +14239,17 @@ "minimatch": "^3.0.4" } }, + "mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "requires": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -14475,6 +14502,12 @@ "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", "dev": true }, + "pirates": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", + "dev": true + }, "pkg-up": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz", @@ -15554,6 +15587,42 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==" }, + "sucrase": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz", + "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==", + "dev": true, + "requires": { + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "dependencies": { + "commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + } + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -15598,34 +15667,35 @@ "dev": true }, "tailwindcss": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", - "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", + "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==", "dev": true, "requires": { "arg": "^5.0.2", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", + "jiti": "^1.17.2", "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.18", + "postcss": "^8.0.9", "postcss-import": "^14.1.0", "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.4", "postcss-nested": "6.0.0", - "postcss-selector-parser": "^6.0.10", + "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "dependencies": { "arg": { @@ -15684,6 +15754,24 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, + "thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "requires": { + "any-promise": "^1.0.0" + } + }, + "thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "requires": { + "thenify": ">= 3.1.0 < 4" + } + }, "three": { "version": "0.148.0", "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz", @@ -15712,6 +15800,12 @@ "is-number": "^7.0.0" } }, + "ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", @@ -16012,12 +16106,6 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, - "xtend": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "dev": true - }, "y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",