Skip to content

Commit

Permalink
Merge pull request #112 from DuckyMomo20012/dev
Browse files Browse the repository at this point in the history 
chore: update demo & mantine theme
  • Loading branch information
@DuckyMomo20012
DuckyMomo20012 authored Oct 19, 2023
2 parents e59b236 + 4825898 commit 39cee9a
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 76 deletions.
15 changes: 14 additions & 1 deletion src/components/TypographyDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Icon } from '@iconify/react';
import { Blockquote, Code, Highlight, Stack } from '@mantine/core';
import { Blockquote, Code, Highlight, Stack, Title } from '@mantine/core';
import { memo } from 'react';
import { Feature } from '@/components/ui/Feature';
import { type ControlledDemoProps } from '@/pages';
Expand Down Expand Up @@ -47,6 +47,19 @@ const TypographyDemo = memo(function TypographyDemo({
Highlight This, definitely THIS and also this!
</Highlight>
</Feature>

<Feature
className="col-span-1 md:col-span-2"
group="Typography"
title="Title"
>
<Title order={1}>{label}</Title>
<Title order={2}>{label}</Title>
<Title order={3}>{label}</Title>
<Title order={4}>{label}</Title>
<Title order={5}>{label}</Title>
<Title order={6}>{label}</Title>
</Feature>
</>
);
});
Expand Down
70 changes: 62 additions & 8 deletions src/context/MantineProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import {
MantineProvider as BaseMantineProvider,
type MantineBreakpointsValues,
type MantineShadowsValues,
createTheme,
rem,
} from '@mantine/core';
import twDefaultColors from 'tailwindcss/colors';

Expand Down Expand Up @@ -29,14 +31,6 @@ const convertColor = (twColors) => {
};

const theme = createTheme({
breakpoints: {
xs: '30em',
sm: '40em',
md: '48em',
lg: '64em',
xl: '80em',
'2xl': '96em',
} as MantineBreakpointsValues,
colors: {
...convertColor(twDefaultColors),
dark: [
Expand Down Expand Up @@ -66,6 +60,66 @@ const theme = createTheme({
'#4a044e',
],
},
primaryColor: 'slate',
fontFamily:
'-apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif',
fontFamilyMonospace:
'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace',
defaultRadius: 'lg',

headings: {
fontFamily:
'-apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif',
fontWeight: '700',
sizes: {
h1: { fontSize: rem(36), lineHeight: '2.5rem' },
h2: { fontSize: rem(30), lineHeight: '2.25rem' },
h3: { fontSize: rem(24), lineHeight: '2rem' },
h4: { fontSize: rem(20), lineHeight: '1.75rem' },
h5: { fontSize: rem(18), lineHeight: '1.75rem' },
h6: { fontSize: rem(16), lineHeight: '1.5rem' },
},
},

lineHeights: {
xs: '1.25',
sm: '1.375',
md: '1.5',
lg: '1.625',
xl: '2',
},

radius: {
xs: rem(2),
sm: rem(4),
md: rem(6),
lg: rem(8),
xl: rem(12),
},

breakpoints: {
xs: '30em',
sm: '40em',
md: '48em',
lg: '64em',
xl: '80em',
'2xl': '96em',
} as MantineBreakpointsValues,

shadows: {
xs: `0 ${rem(1)} ${rem(2)} 0 rgb(0 0 0 / 0.05)`,
// prettier-ignore
sm: `0 ${rem(1)} ${rem(3)} 0 rgb(0 0 0 / 0.1), 0 ${rem(1)} ${rem(2)} ${rem(-1)} rgb(0 0 0 / 0.1)`,
// prettier-ignore
md: `0 ${rem(4)} ${rem(6)} ${rem(-1)} rgb(0 0 0 / 0.1), 0 ${rem(2)} ${rem(4)} ${rem(-2)} rgb(0 0 0 / 0.1)`,
// prettier-ignore
lg: `0 ${rem(10)} ${rem(15)} ${rem(-3)} rgb(0 0 0 / 0.1), 0 ${rem(4)} ${rem(6)} ${rem(-4)} rgb(0 0 0 / 0.1)`,
// prettier-ignore
xl: `0 ${rem(20)} ${rem(25)} ${rem(-5)} rgb(0 0 0 / 0.1), 0 ${rem(8)} ${rem(10)} ${rem(-6)} rgb(0 0 0 / 0.1)`,
// NOTE: Extend keys rather than breakpoints MUST NOT start with number
xl2: `0 ${rem(25)} ${rem(50)} ${rem(-12)} rgb(0 0 0 / 0.25)`,
inner: `inset 0 ${rem(2)} ${rem(4)} 0 rgb(0 0 0 / 0.05)`,
} as MantineShadowsValues,
});

const MantineProvider = ({ children }: { children?: React.ReactNode }) => {
Expand Down
67 changes: 0 additions & 67 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,5 @@
@import '@mantine/core/styles.css';

:root {
--mantine-line-height: 1.5;
/* Ref: https://systemfontstack.com/ */
--mantine-font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial,
sans-serif;
--mantine-font-family-monospace: Menlo, Consolas, Monaco, Liberation Mono,
Lucida Console, monospace;
--mantine-font-family-heading: Iowan Old Style, Apple Garamond, Baskerville,
Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--mantine-line-height-xs: 1.25;
--mantine-line-height-sm: 1.375;
--mantine-line-height-md: 1.5;
--mantine-line-height-lg: 1.625;
--mantine-line-height-xl: 1.2;
--mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.125rem * var(--mantine-scale)) 0 rgba(0, 0, 0, 0.05);
--mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) 0 rgba(0, 0, 0, 0.1),
0 calc(0.0625rem * var(--mantine-scale))
calc(0.125rem * var(--mantine-scale))
calc(-0.0625rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
--mantine-shadow-md: 0 calc(0.25rem * var(--mantine-scale))
calc(0.375rem * var(--mantine-scale))
calc(-0.0625rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
0 calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale))
calc(-0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
--mantine-shadow-lg: 0 calc(0.625rem * var(--mantine-scale))
calc(0.9375rem * var(--mantine-scale))
calc(-0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
0 calc(0.25rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale))
calc(-0.25rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
--mantine-shadow-xl: 0 calc(1.25rem * var(--mantine-scale))
calc(1.5625rem * var(--mantine-scale))
calc(-0.3125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
0 calc(0.5rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale))
calc(-0.375rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
/* NOTE: Theme keys MUST NOT start with number */
--mantine-shadow-xl2: 0 calc(1.5625rem * var(--mantine-scale))
calc(3.125rem * var(--mantine-scale)) calc(-0.75rem * var(--mantine-scale))
rgba(0, 0, 0, 0.25);
--mantine-radius-xs: calc(0.125rem * var(--mantine-scale));
--mantine-radius-sm: calc(0.25rem * var(--mantine-scale));
--mantine-radius-md: calc(0.375rem * var(--mantine-scale));
--mantine-radius-lg: calc(0.5rem * var(--mantine-scale));
--mantine-radius-xl: calc(0.75rem * var(--mantine-scale));
--mantine-h1-font-size: calc(2.25rem * var(--mantine-scale));
--mantine-h1-line-height: 2.5rem;
--mantine-h1-font-weight: 700;
--mantine-h2-font-size: calc(1.875rem * var(--mantine-scale));
--mantine-h2-line-height: 2.25rem;
--mantine-h2-font-weight: 700;
--mantine-h3-font-size: calc(1.5rem * var(--mantine-scale));
--mantine-h3-line-height: 2rem;
--mantine-h3-font-weight: 700;
--mantine-h4-font-size: calc(1.25rem * var(--mantine-scale));
--mantine-h4-line-height: 1.75rem;
--mantine-h4-font-weight: 700;
--mantine-h5-font-size: calc(1.125rem * var(--mantine-scale));
--mantine-h5-line-height: 1.75rem;
--mantine-h5-font-weight: 700;
--mantine-h6-font-size: calc(1rem * var(--mantine-scale));
--mantine-h6-line-height: 1.5rem;
--mantine-h6-font-weight: 700;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

1 comment on commit 39cee9a

@vercel
Copy link

@vercel vercel bot commented on 39cee9a Oct 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

my-nextjs-template – ./

my-nextjs-template-one.vercel.app
my-nextjs-template-duckymomo20012.vercel.app
my-nextjs-template-git-main-duckymomo20012.vercel.app

Please sign in to comment.