From fb36b681795d9a83786e630412cffa243ea1fa18 Mon Sep 17 00:00:00 2001 From: Matt Aitken Date: Tue, 25 Apr 2023 21:48:51 +0100 Subject: [PATCH] Setup the Shadcn styles, but not using CSS vars --- apps/webapp/styles/tailwind-include.css | 14 ++- apps/webapp/tailwind.config.js | 125 ++++++++++++++++++++---- pnpm-lock.yaml | 41 ++++---- 3 files changed, 143 insertions(+), 37 deletions(-) diff --git a/apps/webapp/styles/tailwind-include.css b/apps/webapp/styles/tailwind-include.css index 2aac95872..dbb509ce3 100644 --- a/apps/webapp/styles/tailwind-include.css +++ b/apps/webapp/styles/tailwind-include.css @@ -5,5 +5,15 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); body { - color: white; - } \ No newline at end of file + color: white; +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + } +} diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index 8152c9901..e76516f57 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -1,25 +1,94 @@ /** @type {import('tailwindcss').Config} */ const parentConfig = require("@trigger.dev/tailwind-config/tailwind.config"); -const colors = require('tailwindcss/colors') +const colors = require("tailwindcss/colors"); + +const background = "hsl(224 71% 4%)"; +const foreground = "hsl(213 31% 91%)"; + +const muted = "hsl(223 47% 11%)"; +const mutedForeground = "hsl(215.4 16.3% 56.9%)"; + +const popover = "hsl(224 71% 4%)"; +const popoverForeground = "hsl(215 20.2% 65.1%)"; + +const card = "hsl(0 0% 100%)"; +const cardForeground = "hsl(222.2 47.4% 11.2%)"; + +const border = "hsl(216 34% 17%)"; +const input = "hsl(216 34% 17%)"; + +const primary = "hsl(210 40% 98%)"; +const primaryForeground = "hsl(222.2 47.4% 1.2%)"; + +const secondary = "hsl(222.2 47.4% 11.2%)"; +const secondaryForeground = "hsl(210 40% 98%)"; + +const accent = "hsl(216 34% 17%)"; +const accentForeground = "hsl(210 40% 98%)"; + +const destructive = "hsl(0 63% 31%)"; +const destructiveForeground = "hsl(210 40% 98%)"; + +const ring = "hsl(216 34% 17%)"; + +const radius = "0.5rem"; module.exports = { ...parentConfig, theme: { ...parentConfig.theme, - + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, extend: { ...parentConfig.extend, - fontFamily: { sans: ["Inter", "sans-serif"], title: ["Poppins", "sans-serif"], mono: ["Roboto Mono", "monospace"], }, colors: { - 'slate': { - 1000: '#060F1E', - 950: '#0A1423', - 850: '#141D2E', + border, + input, + ring, + background, + foreground, + primary: { + DEFAULT: primary, + foreground: primaryForeground, + }, + secondary: { + DEFAULT: secondary, + foreground: secondaryForeground, + }, + destructive: { + DEFAULT: destructive, + foreground: destructiveForeground, + }, + muted: { + DEFAULT: muted, + foreground: mutedForeground, + }, + accent: { + DEFAULT: accent, + foreground: accentForeground, + }, + popover: { + DEFAULT: popover, + foreground: popoverForeground, + }, + card: { + DEFAULT: card, + foreground: cardForeground, + }, + slate: { + 1000: "#060F1E", + 950: "#0A1423", + 850: "#141D2E", }, acid: { 400: "#F1FF98", @@ -34,24 +103,44 @@ module.exports = { devEnv: colors.pink, liveEnv: colors.green, }, + borderRadius: { + lg: radius, + md: `calc(${radius} - 2px)`, + sm: `calc(${radius} - 4px)`, + }, + keyframes: { + "accordion-down": { + from: { height: 0 }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: 0 }, + }, + float: { + "0%": { transform: "translatey(0px)" }, + "50%": { transform: "translatey(7px)" }, + "100%": { transform: "translatey(0px)" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-primary": `linear-gradient(90deg, acid-500 0%, toxic-500 100%)`, "gradient-primary-hover": `linear-gradient(80deg, acid-600 0%, toxic-600 100%)`, }, gridTemplateColumns: { - 'carousel': 'repeat(6, 200px)', + carousel: "repeat(6, 200px)", }, - keyframes: { - float: { - '0%': { transform: 'translatey(0px)' }, - '50%': { transform: 'translatey(7px)' }, - '100%': { transform: 'translatey(0px)' }, - } - } }, }, plugins: [ - require('tailwind-scrollbar-hide'), require("@tailwindcss/forms"), require("@tailwindcss/typography") - ] -}; \ No newline at end of file + require("tailwind-scrollbar-hide"), + require("@tailwindcss/forms"), + require("@tailwindcss/typography"), + require("tailwindcss-animate"), + ], +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d64a9b0c..fd5983e9f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -209,7 +209,7 @@ importers: '@aws-sdk/s3-request-presigner': 3.245.0 '@cakework/client': 0.0.54 '@cfworker/json-schema': 1.12.5 - '@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu + '@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde '@codemirror/commands': 6.1.3 '@codemirror/lang-javascript': 6.1.2 '@codemirror/lang-json': 6.0.1 @@ -238,7 +238,7 @@ importers: '@trigger.dev/internal': link:../../packages/internal '@typeform/embed-react': 2.14.1_react@18.2.0 '@types/simple-oauth2': 5.0.4 - '@uiw/react-codemirror': 4.19.5_k4ec5g7vuuzzonc3d6xbjnmmle + '@uiw/react-codemirror': 4.19.5_aguurb4bmecpxzejz52amioxne bcryptjs: 2.4.3 class-variance-authority: 0.5.2_typescript@4.9.4 classnames: 2.3.2 @@ -3151,12 +3151,13 @@ packages: prettier: 2.8.2 dev: false - /@codemirror/autocomplete/6.4.0_czcfkg2f66rxeiodoti7r2gulu: + /@codemirror/autocomplete/6.4.0_eo6pz6bvsllvatnnwfprpuflde: resolution: {integrity: sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==} peerDependencies: '@codemirror/language': ^6.0.0 '@codemirror/state': ^6.0.0 '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 dependencies: '@codemirror/language': 6.3.2 '@codemirror/state': 6.2.0 @@ -3176,7 +3177,7 @@ packages: /@codemirror/lang-javascript/6.1.2: resolution: {integrity: sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==} dependencies: - '@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu + '@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde '@codemirror/language': 6.3.2 '@codemirror/lint': 6.1.0 '@codemirror/state': 6.2.0 @@ -5230,7 +5231,7 @@ packages: eslint: 8.31.0 eslint-import-resolver-node: 0.3.6 eslint-import-resolver-typescript: 3.5.3_vz4tyq5r7fh66imfi352lmrvhq - eslint-plugin-import: 2.27.5_2ac3tknkazjoq5fxmuugu665ny + eslint-plugin-import: 2.27.5_qdjeohovcytra7xto5vgmxssaq eslint-plugin-jest: 26.9.0_y6565ziejixavcuubgd3r7fqr4 eslint-plugin-jest-dom: 4.0.3_eslint@8.31.0 eslint-plugin-jsx-a11y: 6.7.1_eslint@8.31.0 @@ -6448,17 +6449,18 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@uiw/codemirror-extensions-basic-setup/4.19.5_wd2tsis3in55bkaiwnc2c46tom: + /@uiw/codemirror-extensions-basic-setup/4.19.5_tbeldtdcrf45b35pezgkzq2u4e: resolution: {integrity: sha512-1zt7ZPJ01xKkSW/KDy0FZNga0bngN1fC594wCVG7FBi60ehfcAucpooQ+JSPScKXopxcb+ugPKZvVLzr9/OfzA==} peerDependencies: '@codemirror/autocomplete': '>=6.0.0' '@codemirror/commands': '>=6.0.0' '@codemirror/language': '>=6.0.0' + '@codemirror/lint': '>=6.0.0' '@codemirror/search': '>=6.0.0' '@codemirror/state': '>=6.0.0' '@codemirror/view': '>=6.0.0' dependencies: - '@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu + '@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde '@codemirror/commands': 6.1.3 '@codemirror/language': 6.3.2 '@codemirror/lint': 6.1.0 @@ -6467,11 +6469,14 @@ packages: '@codemirror/view': 6.7.2 dev: false - /@uiw/react-codemirror/4.19.5_k4ec5g7vuuzzonc3d6xbjnmmle: + /@uiw/react-codemirror/4.19.5_aguurb4bmecpxzejz52amioxne: resolution: {integrity: sha512-ZCHh8d7beXbF8/t7F1+yHht6A9Y6CdKeOkZq4A09lxJEnyTQrj1FMf2zvfaqc7K23KNjkTCtSlbqKKbVDgrWaw==} peerDependencies: + '@babel/runtime': '>=7.11.0' '@codemirror/state': '>=6.0.0' + '@codemirror/theme-one-dark': '>=6.0.0' '@codemirror/view': '>=6.0.0' + codemirror: '>=6.0.0' react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: @@ -6480,13 +6485,14 @@ packages: '@codemirror/state': 6.2.0 '@codemirror/theme-one-dark': 6.1.0 '@codemirror/view': 6.7.2 - '@uiw/codemirror-extensions-basic-setup': 4.19.5_wd2tsis3in55bkaiwnc2c46tom - codemirror: 6.0.1 + '@uiw/codemirror-extensions-basic-setup': 4.19.5_tbeldtdcrf45b35pezgkzq2u4e + codemirror: 6.0.1_@lezer+common@1.0.2 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 transitivePeerDependencies: - '@codemirror/autocomplete' - '@codemirror/language' + - '@codemirror/lint' - '@codemirror/search' dev: false @@ -7914,16 +7920,18 @@ packages: engines: {node: '>=0.10.0'} dev: false - /codemirror/6.0.1: + /codemirror/6.0.1_@lezer+common@1.0.2: resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==} dependencies: - '@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu + '@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde '@codemirror/commands': 6.1.3 '@codemirror/language': 6.3.2 '@codemirror/lint': 6.1.0 '@codemirror/search': 6.2.3 '@codemirror/state': 6.2.0 '@codemirror/view': 6.7.2 + transitivePeerDependencies: + - '@lezer/common' dev: false /collection-visit/1.0.0: @@ -9275,7 +9283,7 @@ packages: debug: 4.3.4 enhanced-resolve: 5.12.0 eslint: 8.31.0 - eslint-plugin-import: 2.27.5_2ac3tknkazjoq5fxmuugu665ny + eslint-plugin-import: 2.27.5_qdjeohovcytra7xto5vgmxssaq get-tsconfig: 4.4.0 globby: 13.1.3 is-core-module: 2.11.0 @@ -9285,7 +9293,7 @@ packages: - supports-color dev: true - /eslint-module-utils/2.7.4_v73lhamtbyinynmwa5fn7kpmfq: + /eslint-module-utils/2.7.4_sqt5xxn4ciiurbqrzlaarm6ama: resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} engines: {node: '>=4'} peerDependencies: @@ -9310,7 +9318,6 @@ packages: debug: 3.2.7 eslint: 8.31.0 eslint-import-resolver-node: 0.3.7 - eslint-import-resolver-typescript: 3.5.3_vz4tyq5r7fh66imfi352lmrvhq transitivePeerDependencies: - supports-color dev: true @@ -9335,7 +9342,7 @@ packages: regexpp: 3.2.0 dev: true - /eslint-plugin-import/2.27.5_2ac3tknkazjoq5fxmuugu665ny: + /eslint-plugin-import/2.27.5_qdjeohovcytra7xto5vgmxssaq: resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -9353,7 +9360,7 @@ packages: doctrine: 2.1.0 eslint: 8.31.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.7.4_v73lhamtbyinynmwa5fn7kpmfq + eslint-module-utils: 2.7.4_sqt5xxn4ciiurbqrzlaarm6ama has: 1.0.3 is-core-module: 2.11.0 is-glob: 4.0.3