Setup the Shadcn styles, but not using CSS vars

This commit is contained in:
Matt Aitken
2023-04-25 21:48:51 +01:00
parent e14a2554ad
commit fb36b68179
3 changed files with 143 additions and 37 deletions
+12 -2
View File
@@ -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;
}
color: white;
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}
+107 -18
View File
@@ -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")
]
};
require("tailwind-scrollbar-hide"),
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("tailwindcss-animate"),
],
};
+24 -17
View File
@@ -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