diff --git a/AGENTS.md b/AGENTS.md index a224ce75926..e4161d75524 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -184,13 +184,12 @@ Ghost Admin uses **TailwindCSS v4** via the `@tailwindcss/vite` plugin. CSS proc @import "./preflight.css"; @import "tailwindcss/utilities.css"; @import "tw-animate-css"; - -@config "./tailwind.config.cjs"; +@import "./tailwind.theme.css"; ``` **Why unlayered:** Ember's legacy CSS (`.flex`, `.hidden`, etc.) is unlayered. If Tailwind utilities were in a `@layer`, they would lose to Ember's unlayered CSS in the cascade. Keeping both unlayered means source order determines specificity. -The `@config` bridge loads `tailwind.config.cjs` for the custom theme (colors, spacing, shadows, etc.). `tw-animate-css` is the v4 replacement for `tailwindcss-animate`. +Theme tokens/variants/animations are defined in CSS (`apps/shade/tailwind.theme.css` + runtime vars in `styles.css`), so there is no JS `@config` bridge in the Admin runtime lane. `tw-animate-css` is the v4 replacement for `tailwindcss-animate`. ### Critical Rule: Embedded Apps Must NOT Import Shade Independently @@ -202,7 +201,7 @@ Public-facing apps (`comments-ui`, `signup-form`, `sodo-search`, `portal`, `anno ### Legacy Apps -`admin-x-design-system` and `admin-x-settings` keep TW v3 dependencies for their own Storybook builds. Their source files are consumed via `@source` in admin's v4 pipeline for production. +`admin-x-design-system` and `admin-x-settings` are consumed via `@source` in admin's centralized v4 pipeline for production, and both packages build with CSS-first Tailwind v4 setup. ## Code Guidelines diff --git a/apps/activitypub/.eslintrc.cjs b/apps/activitypub/.eslintrc.cjs index 32bd108486a..7c72a55091c 100644 --- a/apps/activitypub/.eslintrc.cjs +++ b/apps/activitypub/.eslintrc.cjs @@ -1,5 +1,5 @@ /* eslint-env node */ -const tailwindConfig = `${__dirname}/tailwind.config.cjs`; +const tailwindCssConfig = `${__dirname}/../admin/src/index.css`; module.exports = { root: true, @@ -16,6 +16,9 @@ module.exports = { settings: { react: { version: 'detect' + }, + tailwindcss: { + config: tailwindCssConfig } }, rules: { @@ -53,12 +56,12 @@ module.exports = { 'react/no-array-index-key': 'error', 'react/jsx-key': 'off', - 'tailwindcss/classnames-order': ['error', {config: tailwindConfig}], - 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: tailwindConfig}], - 'tailwindcss/enforces-shorthand': ['warn', {config: tailwindConfig}], - 'tailwindcss/migration-from-tailwind-2': ['warn', {config: tailwindConfig}], + 'tailwindcss/classnames-order': 'off', + 'tailwindcss/enforces-negative-arbitrary-values': 'warn', + 'tailwindcss/enforces-shorthand': 'warn', + 'tailwindcss/migration-from-tailwind-2': 'warn', 'tailwindcss/no-arbitrary-value': 'off', 'tailwindcss/no-custom-classname': 'off', - 'tailwindcss/no-contradicting-classname': ['error', {config: tailwindConfig}] + 'tailwindcss/no-contradicting-classname': 'error' } }; diff --git a/apps/activitypub/tailwind.config.cjs b/apps/activitypub/tailwind.config.cjs deleted file mode 100644 index c88401e41d6..00000000000 --- a/apps/activitypub/tailwind.config.cjs +++ /dev/null @@ -1,54 +0,0 @@ -const adminXPreset = require('@tryghost/shade/tailwind.cjs'); - -/** - * Important: Any changes made to this file need to be mirrored to the tailwind - * config in the admin package. - */ - -module.exports = { - presets: [adminXPreset('.shade-activitypub')], - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', '../../node_modules/@tryghost/shade/es/**/*.{js,ts,jsx,tsx}'], - theme: { - extend: { - keyframes: { - lineExpand: { - '0%': { - transform: 'scaleX(0)', - transformOrigin: 'right' - }, - '100%': { - transform: 'scaleX(1)', - transformOrigin: 'right' - } - }, - scale: { - '0%': { - transform: 'scale(0.8)' - }, - '70%': { - transform: 'scale(1.1)' - }, - '100%': { - transform: 'scale(1)' - } - } - }, - animation: { - 'onboarding-handle-bg': 'fadeIn 0.2s ease-in 0.5s forwards', - 'onboarding-handle-line': 'lineExpand 0.2s ease-in-out 0.7s forwards', - 'onboarding-handle-label': 'fadeIn 0.2s ease-in 1.2s forwards', - 'onboarding-next-button': 'fadeIn 0.2s ease-in 2s forwards', - 'onboarding-followers': 'fadeIn 0.2s ease-in 0.5s forwards, scale 0.3s ease-in 0.5s forwards' - } - } - }, - plugins: [ - require('tailwindcss/plugin')(function ({ addUtilities }) { - addUtilities({ - '.break-anywhere': { - 'overflow-wrap': 'anywhere', - }, - }) - }), - ], -}; diff --git a/apps/admin-x-design-system/.eslintrc.cjs b/apps/admin-x-design-system/.eslintrc.cjs index 7a091849e4a..31cfd6a9083 100644 --- a/apps/admin-x-design-system/.eslintrc.cjs +++ b/apps/admin-x-design-system/.eslintrc.cjs @@ -1,4 +1,4 @@ -const tailwindConfig = `${__dirname}/tailwind.config.cjs`; +const tailwindCssConfig = `${__dirname}/../admin/src/index.css`; module.exports = { extends: [ @@ -14,6 +14,9 @@ module.exports = { settings: { react: { version: 'detect' + }, + tailwindcss: { + config: tailwindCssConfig } }, rules: { @@ -35,12 +38,12 @@ module.exports = { // Enforce kebab-case (lowercase with hyphens) for all filenames 'ghost/filenames/match-regex': ['error', '^[a-z0-9.-]+$', false], - 'tailwindcss/classnames-order': ['error', {config: tailwindConfig}], - 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: tailwindConfig}], - 'tailwindcss/enforces-shorthand': ['warn', {config: tailwindConfig}], - 'tailwindcss/migration-from-tailwind-2': ['warn', {config: tailwindConfig}], + 'tailwindcss/classnames-order': 'off', + 'tailwindcss/enforces-negative-arbitrary-values': 'warn', + 'tailwindcss/enforces-shorthand': 'warn', + 'tailwindcss/migration-from-tailwind-2': 'warn', 'tailwindcss/no-arbitrary-value': 'off', 'tailwindcss/no-custom-classname': 'off', - 'tailwindcss/no-contradicting-classname': ['error', {config: tailwindConfig}] + 'tailwindcss/no-contradicting-classname': 'error' } }; diff --git a/apps/admin-x-design-system/package.json b/apps/admin-x-design-system/package.json index da3538c41e9..64ddd0cc088 100644 --- a/apps/admin-x-design-system/package.json +++ b/apps/admin-x-design-system/package.json @@ -23,9 +23,7 @@ }, "files": [ "es", - "types", - "tailwind.cjs", - "tailwind.config.cjs" + "types" ], "devDependencies": { "@codemirror/lang-html": "6.4.11", @@ -38,8 +36,7 @@ "@storybook/react": "8.6.14", "@storybook/react-vite": "8.6.14", "@storybook/testing-library": "0.2.2", - "@tailwindcss/forms": "0.5.10", - "@tailwindcss/line-clamp": "0.4.4", + "@tailwindcss/postcss": "^4", "@testing-library/react": "14.3.1", "@testing-library/react-hooks": "8.0.1", "@types/lodash-es": "4.17.12", @@ -49,7 +46,7 @@ "chai": "4.5.0", "eslint-plugin-react-hooks": "4.6.2", "eslint-plugin-react-refresh": "0.4.24", - "eslint-plugin-tailwindcss": "3.18.2", + "eslint-plugin-tailwindcss": "4.0.0-beta.0", "jsdom": "28.1.0", "lodash-es": "4.17.21", "postcss": "8.5.6", @@ -59,7 +56,7 @@ "rollup-plugin-node-builtins": "2.1.2", "sinon": "18.0.1", "storybook": "8.6.14", - "tailwindcss": "3.4.18", + "tailwindcss": "^4", "typescript": "5.8.3", "validator": "13.12.0", "vite": "5.4.20", diff --git a/apps/admin-x-design-system/postcss.config.cjs b/apps/admin-x-design-system/postcss.config.cjs index ab7c4939b1d..2ca9a4e3ed6 100644 --- a/apps/admin-x-design-system/postcss.config.cjs +++ b/apps/admin-x-design-system/postcss.config.cjs @@ -1,8 +1,7 @@ module.exports = { plugins: { 'postcss-import': {}, - 'tailwindcss/nesting': {}, - tailwindcss: {}, + '@tailwindcss/postcss': {}, autoprefixer: {} } }; diff --git a/apps/admin-x-design-system/styles.base.css b/apps/admin-x-design-system/styles.base.css new file mode 100644 index 00000000000..0300e4875b2 --- /dev/null +++ b/apps/admin-x-design-system/styles.base.css @@ -0,0 +1,122 @@ +@import './preflight.css'; + +@import 'tailwindcss/theme.css'; +@import '@tryghost/shade/tailwind.theme.css'; + +@import url(https://fonts.bunny.net/css?family=cardo:400,700); +@import url(https://fonts.bunny.net/css?family=manrope:300,500,700); +@import url(https://fonts.bunny.net/css?family=merriweather:300,700); +@import url(https://fonts.bunny.net/css?family=nunito:400,600,700); +@import url(https://fonts.bunny.net/css?family=old-standard-tt:400,700); +@import url(https://fonts.bunny.net/css?family=prata:400); +@import url(https://fonts.bunny.net/css?family=roboto:400,500,700); +@import url(https://fonts.bunny.net/css?family=rufina:400,500,700); +@import url(https://fonts.bunny.net/css?family=tenor-sans:400); +@import url(https://fonts.bunny.net/css?family=space-grotesk:700); +@import url(https://fonts.bunny.net/css?family=chakra-petch:400); +@import url(https://fonts.bunny.net/css?family=noto-sans:400,700); +@import url(https://fonts.bunny.net/css?family=poppins:400,700); +@import url(https://fonts.bunny.net/css?family=fira-sans:400,700); +@import url(https://fonts.bunny.net/css?family=inter:400,700); +@import url(https://fonts.bunny.net/css?family=noto-serif:400,700); +@import url(https://fonts.bunny.net/css?family=lora:400,700); +@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,700); +@import url(https://fonts.bunny.net/css?family=space-mono:400,700); +@import url(https://fonts.bunny.net/css?family=fira-mono:400,700); +@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700); + +/* Defaults */ +@layer base { + /* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */ + @font-face { + font-family: "Inter"; + src: local("Inter") format("truetype-variations"); + font-weight: 100 900; + } + + .admin-x-base { + & { + @apply font-sans text-black text-base leading-normal; + } + + h1, h2, h3, h4, h5 { + @apply font-bold tracking-tight leading-tighter; + } + + h1 { + @apply text-4xl leading-supertight; + } + + h2 { + @apply text-2xl; + } + + h3 { + @apply text-xl; + } + + h4 { + @apply text-lg; + } + + h5 { + @apply text-md leading-supertight; + } + + h6 { + @apply text-md leading-normal; + } + } +} + +.admin-x-base { + line-height: 1.5; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + letter-spacing: unset; + + height: 100vh; + width: 100%; + overflow-x: hidden; + overflow-y: auto; +} + + +/* +Used to be for fixed bottom mobile menu bar +@media (max-width: 800px) { + .admin-x-base { + height: calc(100vh - 55px); + } +} */ + +.dark .admin-x-base { + color: #FAFAFB; +} + +.dark .admin-x-base .gh-loading-orb-container { + background-color: #000000; +} + +.dark .admin-x-base .gh-loading-orb { + filter: invert(100%); +} + +.admin-x-base .no-scrollbar::-webkit-scrollbar { + display: none; /* Chrome */ +} + +.admin-x-base .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* Prose classes are for formatting arbitrary HTML that comes from the API */ +.gh-prose-links a { + color: #30CF43; +} diff --git a/apps/admin-x-design-system/styles.css b/apps/admin-x-design-system/styles.css index 492db897e21..68ad7b04fda 100644 --- a/apps/admin-x-design-system/styles.css +++ b/apps/admin-x-design-system/styles.css @@ -1,8 +1,8 @@ @import './preflight.css'; -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@import 'tailwindcss/theme.css'; +@import '@tryghost/shade/tailwind.theme.css'; +@import 'tailwindcss/utilities.css'; @import url(https://fonts.bunny.net/css?family=cardo:400,700); @import url(https://fonts.bunny.net/css?family=manrope:300,500,700); diff --git a/apps/admin-x-design-system/tailwind.cjs b/apps/admin-x-design-system/tailwind.cjs deleted file mode 100644 index e4cfe82b866..00000000000 --- a/apps/admin-x-design-system/tailwind.cjs +++ /dev/null @@ -1,7 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const config = require('./tailwind.config'); - -module.exports = selector => ({ - ...config, - important: selector -}); diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs deleted file mode 100644 index e7e3e3df9fa..00000000000 --- a/apps/admin-x-design-system/tailwind.config.cjs +++ /dev/null @@ -1,329 +0,0 @@ -// Used for eslint and storybook. Styles should not be compiled directly with this, they should be compiled by calling the function in tailwind.cjs -module.exports = { - content: ['./src/**/*.{js,ts,jsx,tsx}'], - important: '.admin-x-design-system', - - corePlugins: { - preflight: false // we're providing our own scoped CSS reset - }, - // darkMode: 'class', - darkMode: ['variant', [':is(.dark &):not(.light &)']], - theme: { - screens: { - sm: '480px', - md: '640px', - lg: '1024px', - xl: '1320px', - xxl: '1440px', - xxxl: '1600px', - tablet: '860px' - }, - colors: { - transparent: 'transparent', - current: 'currentColor', - accent: 'var(--accent-color, #ff0095)', - white: '#FFF', - black: '#15171A', - grey: { - DEFAULT: '#ABB4BE', - 50: '#FAFAFB', - 75: '#F9FAFB', - 100: '#F4F5F6', - 150: '#F1F3F4', - 200: '#EBEEF0', - 250: '#E5E9ED', - 300: '#DDE1E5', - 400: '#CED4D9', - 500: '#AEB7C1', - 600: '#95A1AD', - 700: '#7C8B9A', - 800: '#626D79', - 900: '#394047', - 925: '#2E3338', - 950: '#222427', - 975: '#191B1E' - }, - green: { - DEFAULT: '#30CF43', - 100: '#E1F9E4', - 400: '#58DA67', - 500: '#30CF43', - 600: '#2AB23A' - }, - blue: { - DEFAULT: '#14B8FF', - 100: '#DBF4FF', - 400: '#42C6FF', - 500: '#14B8FF', - 600: '#00A4EB' - }, - purple: { - DEFAULT: '#8E42FF', - 100: '#EDE0FF', - 400: '#A366FF', - 500: '#8E42FF', - 600: '7B1FFF' - }, - pink: { - DEFAULT: '#FB2D8D', - 100: '#FFDFEE', - 400: '#FF5CA8', - 500: '#FB2D8D', - 600: '#F70878' - }, - red: { - DEFAULT: '#F50B23', - 100: '#FFE0E0', - 400: '#F9394C', - 500: '#F50B23', - 600: '#DC091E' - }, - yellow: { - DEFAULT: '#FFB41F', - 100: '#FFF1D6', - 400: '#FFC247', - 500: '#FFB41F', - 600: '#F0A000' - }, - lime: { - DEFAULT: '#B5FF18' - } - }, - fontFamily: { - cardo: 'Cardo', - manrope: 'Manrope', - merriweather: 'Merriweather', - nunito: 'Nunito', - 'tenor-sans': 'Tenor Sans', - 'old-standard-tt': 'Old Standard TT', - prata: 'Prata', - roboto: 'Roboto', - rufina: 'Rufina', - inter: 'Inter', - sans: 'Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif', - serif: 'Georgia, serif', - mono: 'Consolas, Liberation Mono, Menlo, Courier, monospace', - inherit: 'inherit', - 'space-grotesk': 'Space Grotesk', - 'chakra-petch': 'Chakra Petch', - 'noto-sans': 'Noto Sans', - poppins: 'Poppins', - 'fira-sans': 'Fira Sans', - 'noto-serif': 'Noto Serif', - lora: 'Lora', - 'ibm-plex-serif': 'IBM Plex Serif', - 'space-mono': 'Space Mono', - 'fira-mono': 'Fira Mono', - 'jetbrains-mono': 'JetBrains Mono' - }, - boxShadow: { - DEFAULT: '0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08)', - xs: '0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 10px -12px rgba(0,0,0,.1)', - sm: '0 0 1px rgba(0,0,0,.12), 0 1px 6px rgba(0,0,0,0.03), 0 8px 10px -8px rgba(0,0,0,.1)', - md: '0 0 1px rgba(0,0,0,0.12), 0 1px 6px rgba(0,0,0,0.03), 0 8px 10px -8px rgba(0,0,0,0.05), 0px 24px 37px -21px rgba(0, 0, 0, 0.05)', - 'md-heavy': '0 0 1px rgba(0,0,0,0.22), 0 1px 6px rgba(0,0,0,0.15), 0 8px 10px -8px rgba(0,0,0,0.16), 0px 24px 37px -21px rgba(0, 0, 0, 0.46)', - lg: '0 0 7px rgba(0, 0, 0, 0.08), 0 2.1px 2.2px -5px rgba(0, 0, 0, 0.011), 0 5.1px 5.3px -5px rgba(0, 0, 0, 0.016), 0 9.5px 10px -5px rgba(0, 0, 0, 0.02), 0 17px 17.9px -5px rgba(0, 0, 0, 0.024), 0 31.8px 33.4px -5px rgba(0, 0, 0, 0.029), 0 76px 80px -5px rgba(0, 0, 0, 0.04)', - xl: '0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07)', - inner: 'inset 0 0 4px 0 rgb(0 0 0 / 0.08)', - none: '0 0 #0000' - }, - extend: { - keyframes: { - toasterIn: { - '0.00%': { - transform: 'translateY(100%)' - }, - '26.52%': { - transform: 'translateY(-3.90px)' - }, - '63.26%': { - transform: 'translateY(1.2px)' - }, - '100.00%': { - transform: 'translateY(0px)' - } - }, - toasterTopIn: { - '0.00%': { - transform: 'translateY(-82px)' - }, - '26.52%': { - transform: 'translateY(5.90px)' - }, - '63.26%': { - transform: 'translateY(-1.77px)' - }, - '100.00%': { - transform: 'translateY(0px)' - } - }, - toasterOut: { - '0%': { - opacity: '1' - }, - '100%': { - opacity: '0' - } - }, - fadeIn: { - '0%': { - opacity: '0' - }, - '100%': { - opacity: '1' - } - }, - fadeOut: { - '0%': { - opacity: '1' - }, - '100%': { - opacity: '0' - } - }, - modalIn: { - '0%': { - transform: 'translateY(32px)' - }, - '100%': { - transform: 'translateY(0px)' - } - }, - modalInFromRight: { - '0%': { - transform: 'translateX(32px)', - opacity: '0' - }, - '100%': { - transform: 'translateX(0px)', - opacity: '1' - } - }, - modalInReverse: { - '0%': { - transform: 'translateY(-32px)' - }, - '100%': { - transform: 'translateY(0px)' - } - }, - spin: { - '0%': { - transform: 'rotate(0deg)' - }, - '100%': { - transform: 'rotate(360deg)' - } - } - }, - animation: { - 'toaster-in': 'toasterIn 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950)', - 'toaster-out': 'toasterOut 0.4s 0s 1 ease forwards', - 'toaster-top-in': 'toasterTopIn 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950)', - 'fade-in': 'fadeIn 0.15s ease forwards', - 'fade-out': 'fadeOut 0.15s ease forwards', - 'setting-highlight-fade-out': 'fadeOut 0.2s 1.4s ease forwards', - 'modal-backdrop-in': 'fadeIn 0.15s ease forwards', - 'modal-in': 'modalIn 0.25s ease forwards', - 'modal-in-from-right': 'modalInFromRight 0.25s ease forwards', - 'modal-in-reverse': 'modalInReverse 0.25s ease forwards', - spin: 'spin 1s linear infinite' - }, - spacing: { - px: '1px', - 0: '0px', - 0.5: '0.2rem', - 1: '0.4rem', - 1.5: '0.6rem', - 2: '0.8rem', - 2.5: '1rem', - 3: '1.2rem', - 3.5: '1.4rem', - 4: '1.6rem', - 5: '2rem', - 6: '2.4rem', - 7: '2.8rem', - 8: '3.2rem', - 9: '3.6rem', - 10: '4rem', - 11: '4.4rem', - 12: '4.8rem', - 14: '5.6rem', - 16: '6.4rem', - 18: '7.2rem', - 20: '8rem', - 22: '9.2rem', - 24: '9.6rem', - 28: '11.2rem', - 32: '12.8rem', - 36: '14.4rem', - 40: '16rem', - 44: '17.6rem', - 48: '19.2rem', - 52: '20.8rem', - 56: '22.4rem', - 60: '24rem', - 64: '25.6rem', - 72: '28.8rem', - 80: '32rem', - 96: '38.4rem' - }, - maxWidth: { - none: 'none', - 0: '0rem', - xs: '32rem', - sm: '38.4rem', - md: '44.8rem', - lg: '51.2rem', - xl: '57.6rem', - '2xl': '67.2rem', - '3xl': '76.8rem', - '4xl': '89.6rem', - '5xl': '102.4rem', - '6xl': '115.2rem', - '7xl': '132rem', - '8xl': '140rem', - '9xl': '156rem', - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - prose: '65ch' - }, - borderRadius: { - sm: '0.3rem', - DEFAULT: '0.4rem', - md: '0.6rem', - lg: '0.8rem', - xl: '1.2rem', - '2xl': '1.6rem', - '3xl': '2.4rem', - full: '9999px' - }, - fontSize: { - '2xs': '1.0rem', - base: '1.4rem', - xs: '1.2rem', - sm: '1.3rem', - md: '1.4rem', - lg: '1.65rem', - xl: '2rem', - '2xl': '2.4rem', - '3xl': '2.8rem', - '4xl': '3.6rem', - '5xl': ['4.2rem', '1.15'], - '6xl': ['6rem', '1'], - '7xl': ['7.2rem', '1'], - '8xl': ['9.6rem', '1'], - '9xl': ['12.8rem', '1'], - inherit: 'inherit' - }, - lineHeight: { - base: '1.5em', - tight: '1.35em', - tighter: '1.25em', - supertight: '1.1em' - } - } - } -}; diff --git a/apps/admin-x-settings/.eslintrc.cjs b/apps/admin-x-settings/.eslintrc.cjs index a1e03b32e50..dc2a815e5d5 100644 --- a/apps/admin-x-settings/.eslintrc.cjs +++ b/apps/admin-x-settings/.eslintrc.cjs @@ -1,5 +1,5 @@ /* eslint-env node */ -const tailwindConfig = `${__dirname}/tailwind.config.cjs`; +const tailwindCssConfig = `${__dirname}/../admin/src/index.css`; module.exports = { root: true, @@ -16,6 +16,9 @@ module.exports = { settings: { react: { version: 'detect' + }, + tailwindcss: { + config: tailwindCssConfig } }, rules: { @@ -139,12 +142,12 @@ module.exports = { 'react/no-array-index-key': 'error', 'react/jsx-key': 'off', - 'tailwindcss/classnames-order': ['error', {config: tailwindConfig}], - 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: tailwindConfig}], - 'tailwindcss/enforces-shorthand': ['warn', {config: tailwindConfig}], - 'tailwindcss/migration-from-tailwind-2': ['warn', {config: tailwindConfig}], + 'tailwindcss/classnames-order': 'off', + 'tailwindcss/enforces-negative-arbitrary-values': 'warn', + 'tailwindcss/enforces-shorthand': 'warn', + 'tailwindcss/migration-from-tailwind-2': 'warn', 'tailwindcss/no-arbitrary-value': 'off', 'tailwindcss/no-custom-classname': 'off', - 'tailwindcss/no-contradicting-classname': ['error', {config: tailwindConfig}] + 'tailwindcss/no-contradicting-classname': 'error' } }; diff --git a/apps/admin-x-settings/package.json b/apps/admin-x-settings/package.json index 9e8672a27b7..85fc5384286 100644 --- a/apps/admin-x-settings/package.json +++ b/apps/admin-x-settings/package.json @@ -63,7 +63,7 @@ "@vitejs/plugin-react": "4.7.0", "eslint-plugin-react-hooks": "4.6.2", "eslint-plugin-react-refresh": "0.4.24", - "eslint-plugin-tailwindcss": "3.18.2", + "eslint-plugin-tailwindcss": "4.0.0-beta.0", "stylelint": "15.11.0", "vite": "5.4.20", "vite-plugin-css-injected-by-js": "3.5.2", diff --git a/apps/admin-x-settings/src/assets/images/email-design-user-image.jpg b/apps/admin-x-settings/src/assets/images/email-design-user-image.jpg new file mode 100644 index 00000000000..208fa832943 Binary files /dev/null and b/apps/admin-x-settings/src/assets/images/email-design-user-image.jpg differ diff --git a/apps/admin-x-settings/src/components/settings/email-design/color-picker-field.tsx b/apps/admin-x-settings/src/components/settings/email-design/color-picker-field.tsx index 85f20dbc789..a6a94906b44 100644 --- a/apps/admin-x-settings/src/components/settings/email-design/color-picker-field.tsx +++ b/apps/admin-x-settings/src/components/settings/email-design/color-picker-field.tsx @@ -17,7 +17,7 @@ const ColorPickerField: React.FC = ({title, value, onChan return (
- {title} + {title}