TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-21 15:35:00 +03:00
Code Issues Projects Releases Wiki Activity

Reverted to not using CSS variables in TW

Browse Source
This commit is contained in:
Peter Zimon 2024-11-20 14:22:27 +01:00
parent 06a7e2983f
commit 7e39eeddda
13 changed files with 862 additions and 2059 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-design-system/components.json
View File

@ -7,7 +7,7 @@
"config": "tailwind.config.js",
"css": "styles.css",
"baseColor": "neutral",
"cssVariables": true,
"cssVariables": false,
"prefix": ""
},
"aliases": {

5
apps/admin-x-design-system/src/components/typography/heading.tsx
View File

@ -9,7 +9,8 @@ const headingVariants = cva(
{
variants: {
size: {
1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
pagetitle: 'scroll-m-20 text-2xl font-bold tracking-tighter lg:text-3xl',
1: 'scroll-m-20 text-3xl font-bold tracking-tight lg:text-4xl',
2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
3: 'text-2xl font-semibold tracking-tight',
4: 'text-xl font-semibold tracking-tight',
@ -30,7 +31,7 @@ export interface HeadingProps
}
const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
({className, size = 1, asChild = false, ...props}, ref) => {
({className, size = 'pagetitle', asChild = false, ...props}, ref) => {
const Comp = asChild ? Slot : `h${size}`;
return (
<Comp

6
apps/admin-x-design-system/src/components/ui/breadcrumb.tsx
View File

@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
<ol
ref={ref}
className={cn(
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
'flex flex-wrap items-center gap-1.5 break-words text-sm text-neutral-500 sm:gap-2.5 dark:text-neutral-400',
className
)}
{...props}
@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
return (
<Comp
ref={ref}
className={cn('transition-colors hover:text-foreground', className)}
className={cn('transition-colors hover:text-neutral-950 dark:hover:text-neutral-50', className)}
{...props}
/>
);
@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef<
ref={ref}
aria-current="page"
aria-disabled="true"
className={cn('font-normal text-foreground', className)}
className={cn('font-normal text-neutral-950 dark:text-neutral-50', className)}
role="link"
{...props}
/>

22
apps/admin-x-design-system/src/components/ui/button.tsx
View File

@ -2,25 +2,25 @@ import * as React from 'react';
import {Slot} from '@radix-ui/react-slot';
import {cva, type VariantProps} from 'class-variance-authority';
import {cn} from '../../lib/utils';
import {cn} from '@/lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
default: 'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90',
destructive: 'dark:bg-red-900 dark:hover:bg-red-900/90 bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:text-neutral-50',
outline: 'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
ghost: 'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
link: 'text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50'
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
default: 'h-9 px-3 py-2',
sm: 'h-8 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10'
icon: 'h-9 w-9'
}
},
defaultVariants: {

65
apps/admin-x-design-system/styles.css
View File

@ -26,71 +26,6 @@
@import url(https://fonts.bunny.net/css?family=fira-mono:400,700);
@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700);
/* ShadCN variables */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
/* Defaults */
@layer base {
/* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */

60
apps/admin-x-design-system/tailwind.config.cjs
View File

@ -43,6 +43,25 @@ module.exports = {
950: '#222427',
975: '#191B1E'
},
neutral: {
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',
@ -291,10 +310,10 @@ module.exports = {
prose: '65ch'
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: 'calc(var(--radius) - 4px)',
sm: '0.3rem',
DEFAULT: '0.4rem',
md: '0.6rem',
lg: '0.8rem',
xl: '1.2rem',
'2xl': '1.6rem',
'3xl': '2.4rem',
@ -323,41 +342,6 @@ module.exports = {
tight: '1.35em',
tighter: '1.25em',
supertight: '1.1em'
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
}
}
}
}

1591
apps/post-analytics-spike/dist/index-aeb0d0b2.mjs → apps/post-analytics-spike/dist/index-c87e5883.mjs vendored
View File

File diff suppressed because it is too large Load Diff

2
apps/post-analytics-spike/dist/index-aeb0d0b2.mjs.map → apps/post-analytics-spike/dist/index-c87e5883.mjs.map vendored
View File

File diff suppressed because one or more lines are too long

4
apps/post-analytics-spike/dist/modals-227cf2ca.mjs → apps/post-analytics-spike/dist/modals-57ae95c9.mjs vendored
View File

@ -1,4 +1,4 @@
import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-aeb0d0b2.mjs";
import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-c87e5883.mjs";
var a0 = [
"a",
"button",
@ -1078,4 +1078,4 @@ const lo = "bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]", o0 = ({
export {
Do as default
};
//# sourceMappingURL=modals-227cf2ca.mjs.map
//# sourceMappingURL=modals-57ae95c9.mjs.map

2
apps/post-analytics-spike/dist/modals-227cf2ca.mjs.map → apps/post-analytics-spike/dist/modals-57ae95c9.mjs.map vendored
View File

File diff suppressed because one or more lines are too long

4
apps/post-analytics-spike/dist/post-analytics-spike.js vendored
View File

File diff suppressed because one or more lines are too long

8
apps/post-analytics-spike/src/PostAnalytics.tsx
View File

@ -19,8 +19,12 @@ const PostAnalytics = () => {
</GHDSBreadcrumbList>
</GHDSBreadcrumb>
<div className="flex items-start justify-between">
<GHDSHeading size={1}>Post analytics</GHDSHeading>
<GHDSButton size={'sm'} className="mt-1">It is something!</GHDSButton>
<GHDSHeading size="pagetitle">Post analytics</GHDSHeading>
<div className="flex items-center mt-1 gap-2">
<GHDSButton variant='outline'>Refresh</GHDSButton>
<GHDSButton variant='outline'>Share</GHDSButton>
<GHDSButton variant='outline'>•••</GHDSButton>
</div>
</div>
</header>
<div className="mt-8 border rounded-lg border-grey-300 min-h-[500px] flex items-center justify-center text-grey-500">

1150
yarn.lock
View File

File diff suppressed because it is too large Load Diff