diff --git a/components/Atoms/Font/Font.stories.js b/components/Atoms/Font/Font.stories.js new file mode 100644 index 0000000..b444c49 --- /dev/null +++ b/components/Atoms/Font/Font.stories.js @@ -0,0 +1,29 @@ +import Title from './Title.twig'; +import Paragraph from './Paragraph.twig'; +import './font.css'; + +export default { + title: 'Design System/Atoms/Fonts' +}; + +export const titles = () => Title(); + +export const paragraphs = { + render: (args) => Paragraph(args), + args: { + bold: false, + italic: false, + lineThrough: false + }, + argTypes: { + bold: { + control: { type: 'boolean' } + }, + italic: { + control: { type: 'boolean' } + }, + lineThrough: { + control: { type: 'boolean' } + } + } +}; diff --git a/components/Atoms/Font/Paragraph.twig b/components/Atoms/Font/Paragraph.twig new file mode 100644 index 0000000..19555c9 --- /dev/null +++ b/components/Atoms/Font/Paragraph.twig @@ -0,0 +1,14 @@ +{% set classes = '' %} +{% if bold %} + {% set classes = classes ~ ' font-bold' %} +{% endif %} +{% if italic %} + {% set classes = classes ~ ' italic' %} +{% endif %} +{% if lineThrough %} + {% set classes = classes ~ ' line-through' %} +{% endif %} +
+
Paragraphe 1 : Portez ce vieux whisky au juge blond qui fume.
+
Paragraphe 2 : Portez ce vieux whisky au juge blond qui fume.
+
diff --git a/components/Atoms/Font/Title.twig b/components/Atoms/Font/Title.twig new file mode 100644 index 0000000..4a9fb2e --- /dev/null +++ b/components/Atoms/Font/Title.twig @@ -0,0 +1,8 @@ +
+
H1 Title
+
H2 Title
+
H3 Title
+
H4 Title
+
H5 Title
+
H6 Title
+
diff --git a/components/Atoms/Font/font.css b/components/Atoms/Font/font.css new file mode 100644 index 0000000..5fd12e6 --- /dev/null +++ b/components/Atoms/Font/font.css @@ -0,0 +1,64 @@ +.Fonts { + display: grid; + > div { + display: flex; + align-items: flex-end; + border-bottom: 1px solid var(--grey-lighter); + padding: 1rem 0; + } +} + +.h1 { + font-size: var(--font-size-h1); + font-weight: var(--font-weight-h1); + line-height: var(--line-height-h1); +} + +.h2 { + font-size: var(--font-size-h2); + font-weight: var(--font-weight-h2); + line-height: var(--line-height-h2); +} + +.h3 { + font-size: var(--font-size-h3); + font-weight: var(--font-weight-h3); + line-height: var(--line-height-h3); +} + +.h4 { + font-size: var(--font-size-h4); + font-weight: var(--font-weight-h4); + line-height: var(--line-height-h4); +} + +.h5 { + font-size: var(--font-size-h5); + font-weight: var(--font-weight-h5); + line-height: var(--line-height-h5); +} + +.h6 { + font-size: var(--font-size-h6); + font-weight: var(--font-weight-h6); + line-height: var(--line-height-h6); +} + +.paragraph-1 { + font-size: var(--font-size-paragraph-1); + line-height: var(--line-height-paragraph-1); +} +.paragraph-2 { + font-size: var(--font-size-paragraph-2); + line-height: var(--line-height-paragraph-2); +} + +.paragraph { + &--semibold { + font-weight: 600; + } + + &--bold { + font-weight: 700; + } +} diff --git a/components/variables.css b/components/variables.css index dc42378..c66325d 100644 --- a/components/variables.css +++ b/components/variables.css @@ -37,72 +37,32 @@ --apple-green: #57c032; --pink: #d800df; - --font-weight-h1: 800; - --font-weight-h2: 700; - --font-weight-h3: 700; + --font-weight-h1: 700; + --font-weight-h2: 800; + --font-weight-h3: 800; --font-weight-h4: 700; --font-weight-h5: 600; --font-weight-h6: 400; - --font-size-2xs: rem-convert(12px); - --font-size-xs: rem-convert(14px); - --font-size-sm: rem-convert(16px); - --font-size-base: rem-convert(18px); - --font-size-lg: rem-convert(20px); - --font-size-xl: rem-convert(24px); - --font-size-2xl: rem-convert(32px); - --font-size-3xl: rem-convert(36px); - --font-size-4xl: rem-convert(38px); - - --font-size-h1-d: var(--font-size-4xl); - --font-size-h1-m: rem-convert(28px); - --font-size-h2-d: var(--font-size-3xl); - --font-size-h2-m: rem-convert(26px); - --font-size-h3-d: var(--font-size-2xl); - --font-size-h3-m: rem-convert(22px); - --font-size-h4-d: var(--font-size-xl); - --font-size-h4-m: var(--font-size-lg); - --font-size-h5-d: var(--font-size-lg); - --font-size-h5-m: var(--font-size-base); - --font-size-h6-d: var(--font-size-lg); - --font-size-h6-m: var(--font-size-base); - - --line-height-h1-d: rem-convert(57px); - --line-height-h1-m: rem-convert(42px); - --line-height-h2-d: rem-convert(54px); - --line-height-h2-m: rem-convert(39px); - --line-height-h3-d: rem-convert(48px); - --line-height-h3-m: rem-convert(33px); - --line-height-h4-d: rem-convert(30px); - --line-height-h4-m: rem-convert(32px); - --line-height-h5-d: rem-convert(28px); - --line-height-h5-m: rem-convert(26px); - --line-height-h6-d: rem-convert(28px); - --line-height-h6-m: rem-convert(26px); - - --font-size-paragraph-1: var(--font-size-base); - --font-size-paragraph-2: var(--font-size-sm); - --font-size-paragraph-3: var(--font-size-sm); - --font-size-paragraph-4: var(--font-size-xs); - --font-size-paragraph-5: var(--font-size-xs); - --font-size-paragraph-6: var(--font-size-xs); - --font-size-paragraph-7: var(--font-size-2xs); - - --line-height-paragraph-1: rem-convert(27px); - --line-height-paragraph-2: rem-convert(24px); - --line-height-paragraph-3: rem-convert(24px); - --line-height-paragraph-4: rem-convert(20px); - --line-height-paragraph-5: rem-convert(20px); - --line-height-paragraph-6: rem-convert(16.4px); - --line-height-paragraph-7: rem-convert(14.4px); - - --font-family-paragraph-1: 'Poppins'; - --font-family-paragraph-2: 'Poppins'; - --font-family-paragraph-3: 'Roboto'; - --font-family-paragraph-4: 'Poppins'; - --font-family-paragraph-5: 'Roboto'; - --font-family-paragraph-6: 'Roboto Condensed'; - --font-family-paragraph-7: 'Roboto Condensed'; + --line-height-h1: normal; + --line-height-h2: normal; + --line-height-h3: normal; + --line-height-h4: normal; + --line-height-h5: normal; + --line-height-h6: normal; + + --font-size-h1: rem-convert(28px); + --font-size-h2: rem-convert(20px); + --font-size-h3: rem-convert(16px); + --font-size-h4: rem-convert(16px); + --font-size-h5: rem-convert(14px); + --font-size-h6: rem-convert(14px); + + --font-size-paragraph-1: rem-convert(14px); + --font-size-paragraph-2: rem-convert(12px); + + --line-height-paragraph-1: rem-convert(19px); + --line-height-paragraph-2: rem-convert(16px); --font-size-button-large: var(--font-size-sm); --font-size-button-medium: var(--font-size-xs);