Skip to content

Commit

Permalink
feat: preset-default improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreaSimonePorceddu
andreaSimonePorceddu committed Nov 5, 2021
1 parent 81a3844 commit 56d0862
Show file tree
Hide file tree
Showing 12 changed files with 1,575 additions and 181 deletions.
1,610 changes: 1,470 additions & 140 deletions devtool/src/_shared/css/classes.css
View file

Large diffs are not rendered by default.

38 changes: 28 additions & 10 deletions devtool/src/_shared/css/dark-variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@
--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
--letter-spacings-body: 0.02em;
--letter-spacings-heading: 0.01em;
--line-heights-body: 1.3em;
--line-heights-heading: 1.6em;
--letter-spacings-none: 0em;
--line-heights-body: 1.7;
--line-heights-heading: 1.5;
--line-heights-none: 1;
--opacities-none: 0;
--opacities-light: 0.2;
--opacities-medium: 0.6;
Expand All @@ -58,22 +60,38 @@
--shadows-light: 0px 6px 20px #E6E6E6;
--shadows-medium: 0px 6px 20px #C5C5C5;
--shadows-strong: 0px 6px 20px #A3A3A3;
--sizes-25: 25%;
--sizes-50: 50%;
--sizes-75: 75%;
--sizes-100: 100%;
--sizes-2xs: 8px;
--sizes-xs: 16px;
--sizes-s: 24px;
--sizes-m: 32px;
--sizes-l: 40px;
--sizes-xl: 48px;
--sizes-2xl: 56px;
--sizes-25vh: 25vh;
--sizes-50vh: 50vh;
--sizes-75vh: 75vh;
--sizes-100vh: 100vh;
--sizes-25vw: 25vw;
--sizes-50vw: 50vw;
--sizes-75vw: 75vw;
--sizes-100vw: 100vw;
--sizes-none: 0px;
--spacings-2xs: 8px;
--spacings-xs: 16px;
--spacings-s: 24px;
--spacings-m: 32px;
--spacings-l: 40px;
--spacings-xl: 48px;
--spacings-2xl: 56px;
--spacings-none: 0px;
--spacings-none: 0rem;
--spacings-3xs: .25rem;
--spacings-2xs: .5rem;
--spacings-xs: 1rem;
--spacings-s: 1.5rem;
--spacings-m: 2rem;
--spacings-l: 2.5rem;
--spacings-xl: 3rem;
--spacings-2xl: 3.5rem;
--spacings-3xl: 4rem;
--spacings-4xl: 5rem;
--spacings-5xl: 6rem;
--transitions-slow: 1s ease;
--transitions-medium: .6s ease;
--transitions-fast: .3s ease;
Expand Down
38 changes: 28 additions & 10 deletions devtool/src/_shared/css/light-variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@
--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
--letter-spacings-body: 0.02em;
--letter-spacings-heading: 0.01em;
--line-heights-body: 1.3em;
--line-heights-heading: 1.6em;
--letter-spacings-none: 0em;
--line-heights-body: 1.7;
--line-heights-heading: 1.5;
--line-heights-none: 1;
--opacities-none: 0;
--opacities-light: 0.2;
--opacities-medium: 0.6;
Expand All @@ -58,22 +60,38 @@
--shadows-light: 0px 6px 20px #E6E6E6;
--shadows-medium: 0px 6px 20px #C5C5C5;
--shadows-strong: 0px 6px 20px #A3A3A3;
--sizes-25: 25%;
--sizes-50: 50%;
--sizes-75: 75%;
--sizes-100: 100%;
--sizes-2xs: 8px;
--sizes-xs: 16px;
--sizes-s: 24px;
--sizes-m: 32px;
--sizes-l: 40px;
--sizes-xl: 48px;
--sizes-2xl: 56px;
--sizes-25vh: 25vh;
--sizes-50vh: 50vh;
--sizes-75vh: 75vh;
--sizes-100vh: 100vh;
--sizes-25vw: 25vw;
--sizes-50vw: 50vw;
--sizes-75vw: 75vw;
--sizes-100vw: 100vw;
--sizes-none: 0px;
--spacings-2xs: 8px;
--spacings-xs: 16px;
--spacings-s: 24px;
--spacings-m: 32px;
--spacings-l: 40px;
--spacings-xl: 48px;
--spacings-2xl: 56px;
--spacings-none: 0px;
--spacings-none: 0rem;
--spacings-3xs: .25rem;
--spacings-2xs: .5rem;
--spacings-xs: 1rem;
--spacings-s: 1.5rem;
--spacings-m: 2rem;
--spacings-l: 2.5rem;
--spacings-xl: 3rem;
--spacings-2xl: 3.5rem;
--spacings-3xl: 4rem;
--spacings-4xl: 5rem;
--spacings-5xl: 6rem;
--transitions-slow: 1s ease;
--transitions-medium: .6s ease;
--transitions-fast: .3s ease;
Expand Down
1 change: 1 addition & 0 deletions devtool/src/_shared/template/SideBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const SideBar: React.FC<Props> = ({ open, setOpen }) => {
>
<Slices onNavigate={toggle} />
</Accordion>
<div className="mb-3xs" />
<Accordion
open={openMenu === 'components'}
setOpen={getAccordionHandler('components')}
Expand Down
2 changes: 2 additions & 0 deletions devtool/src/_shared/template/SideBar/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
align-items: flex-start;
padding-left: var(--spacings-l);
padding-right: var(--spacings-l);
padding-top: var(--spacings-3xs);
padding-bottom: var(--spacings-3xs);
}

.open.container {
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/options/Options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function Options() {
return (
<div className={styles.container} data-morfeo-theme="light">
<img src={logoVertical} alt="logo" className={styles.image} />
<p className={clsx(styles.description, 'morfeo-typography-p1', 'my-xl')}>
<p className={clsx('morfeo-typography-p1', 'my-xl')}>
{t('bigDescription')}
</p>
<button
Expand Down
4 changes: 0 additions & 4 deletions devtool/src/options/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@
background-color: var(--colors-primary-dark) !important;
}

.description {
line-height: var(--line-heights-heading) !important;
}

@media screen and (min-width: 375px) {
.description {
max-width: 100%;
Expand Down
1 change: 1 addition & 0 deletions packages/preset-default/src/base/letterSpacings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ import { LetterSpacings } from '@morfeo/spec';
export const letterSpacings: LetterSpacings = {
body: '0.02em',
heading: '0.01em',
none: '0em',
};
5 changes: 3 additions & 2 deletions packages/preset-default/src/base/lineHeights.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { LineHeights } from '@morfeo/spec';

export const lineHeights: LineHeights = {
body: '1.3em',
heading: '1.6em',
body: '1.7',
heading: '1.5',
none: '1',
};
23 changes: 20 additions & 3 deletions packages/preset-default/src/base/sizes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,29 @@
import { Sizes } from '@morfeo/spec';

export const sizes: Sizes = {
export const sizes = {
'2xs': '8px',
xs: '16px',
s: '24px',
m: '32px',
l: '40px',
xl: '48px',
'2xl': '56px',
25: '25%',
50: '50%',
75: '75%',
100: '100%',
'25vh': '25vh',
'50vh': '50vh',
'75vh': '75vh',
'100vh': '100vh',
'25vw': '25vw',
'50vw': '50vw',
'75vw': '75vw',
'100vw': '100vw',
none: '0px',
};

type LocalSizes = typeof sizes;

declare module '@morfeo/spec' {
export interface Sizes extends LocalSizes {}
}

30 changes: 19 additions & 11 deletions packages/preset-default/src/base/spacings.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import { Spacings } from '@morfeo/spec';

export const spacings: Spacings = {
'2xs': '8px',
xs: '16px',
s: '24px',
m: '32px',
l: '40px',
xl: '48px',
'2xl': '56px',
none: '0px',
export const spacings = {
none: '0rem',
'3xs': '.25rem',
'2xs': '.5rem',
xs: '1rem',
s: '1.5rem',
m: '2rem',
l: '2.5rem',
xl: '3rem',
'2xl': '3.5rem',
'3xl': '4rem',
'4xl': '5rem',
'5xl': '6rem',
};

type LocalSpacings = typeof spacings;

declare module '@morfeo/spec' {
export interface Spacings extends LocalSpacings {}
}
2 changes: 2 additions & 0 deletions packages/spec/src/types/fonts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export type FontSizeProperty = keyof FontSizeProps;
export interface LineHeights {
body: string;
heading: string;
none: string;
}

export type LineHeight = keyof LineHeights;
Expand All @@ -75,6 +76,7 @@ export type LineHeightProperty = keyof LineHeightProps;
export interface LetterSpacings {
body: string;
heading: string;
none: string;
}

export type LetterSpacing = keyof LetterSpacings;
Expand Down

0 comments on commit 56d0862

Please sign in to comment.