docs(design): some typography and color rules documented

Trendyol · muratcorlu · Jun 13, 2022 · May 22, 2022 · May 29, 2022 · Jun 3, 2022
commit 913d997e81dc5e2a46372fcad5b987125f579d63
diff --git a/docs/design-system/colors.stories.mdx b/docs/design-system/colors.stories.mdx
@@ -10,12  10,27 @@ Baklava uses a list of defined color with some default values.
   <ColorItem
     title="--bl-color-primary"
     subtitle="Primary Color"
-    colors={{ Primary: '#F27A1A', Hover: '#EF6114' }}
     colors={{ '': '#F27A1A', '--hover': '#EF6114' }}
   />
   <ColorItem
     title="--bl-color-secondary"
     subtitle="Secondary Color"
-    colors={{ Secondary: '#273142', Hover: '#0F131A' }}
     colors={{ '': '#273142', '--hover': '#0F131A' }}
   />
   <ColorItem
     title="--bl-color-tertiary"
     subtitle="Tertiary Color"
     colors={{ '': '#f1f2f7', '--hover': '#d5d9e1' }}
   />
   <ColorItem
     title="--bl-color-success"
     subtitle="Success Color"
     colors={{ '': '#0bc15c', '--hover': '#09a44e' }}
   />
   <ColorItem
     title="--bl-color-danger"
     subtitle="Danger Color"
     colors={{ '': '#ff5043', '--hover': '#ff3028' }}
   />
   <ColorItem
     title="--bl-color-content"

diff --git a/docs/design-system/typography.stories.mdx b/docs/design-system/typography.stories.mdx
@@ -1,66  1,89 @@
-import { Meta, Typeset } from '@storybook/addon-docs';
 import { Meta, Typeset, Canvas, Story } from '@storybook/addon-docs';
 import { html } from 'lit';
 
 <Meta
   title="Design System/Typography"
   parameters={{
     viewMode: 'docs',
-    previewTabs: {
-      canvas: {
-        hidden: true,
-      },
-    },
   }}
 />
 
 # Baklava Typography
 
-export const typography = {
-  type: {
-    primary: '"Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif',
-  },
-  weight: {
-    light: '300',
-    regular: '400',
-    medium: '500',
-    semiabold: '600',
-    bold: '700',
-  },
-  size: {
-    s1: 8,
-    s2: 10,
-    s3: 12,
-    m1: 14,
-    m2: 16,
-    m3: 20,
-    l1: 24,
-    l2: 28,
-    l3: 32,
-    l4: 48,
-    l5: 64,
-  },
-};
-
-export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-**Font:** Rubik
-
-**Weights:** 300(light), 400(regular), 500(medium), 600(semibold), 700(bold)
-
-<Typeset
-  fontSizes={[
-    Number(typography.size.s1),
-    Number(typography.size.s2),
-    Number(typography.size.s3),
-    Number(typography.size.m1),
-    Number(typography.size.m2),
-    Number(typography.size.m3),
-    Number(typography.size.l1),
-    Number(typography.size.l2),
-    Number(typography.size.l3),
-    Number(typography.size.l4),
-    Number(typography.size.l5),
-  ]}
-  fontWeight={typography.weight.bold}
-  sampleText={SampleText}
-  fontFamily={typography.type.primary}
-/>
 We use **Rubik** font by default in Baklava Design System.
 
 ## Display Titles
 
 `Display 1` and `Display 2` titles are our largest titles. We generally use them in landing pages.
 
 <Story name="Display 1">
   {html`<h1 style="font: var(--bl-font-display-1)">Display 1</h1>`}
 </Story>
 
 <Story name="Display 2">
   {html`<h1 style="font: var(--bl-font-display-2-light)">Display 2 Light</h1>
   <h1 style="font: var(--bl-font-display-2-regular)">Display 2 Regular</h1>
   <h1 style="font: var(--bl-font-display-2-medium)">Display 2 Medium</h1>
   <h1 style="font: var(--bl-font-display-2-semibold)">Display 2 Semibold</h1>
   <h1 style="font: var(--bl-font-display-2-bold)">Display 2 Bold</h1>`}
 </Story>
 
 ## Sub-Titles
 
 Sub-titles are used widely in many components.
 
 <Story name="Sub Title 1">
   {html`<h1 style="font: var(--bl-font-title-1-regular)">Sub Title 1 Regular</h1>
   <h1 style="font: var(--bl-font-title-1-medium)">Sub Title 1 Medium</h1>
   <h1 style="font: var(--bl-font-title-1-semibold)">Sub Title 1 Semibold</h1>
   <h1 style="font: var(--bl-font-title-1-bold)">Sub Title 1 Bold</h1>`}
 </Story>
 
 <Story name="Sub Title 2">
   {html`<h1 style="font: var(--bl-font-title-2-regular)">Sub Title 2 Regular</h1>
   <h1 style="font: var(--bl-font-title-2-medium)">Sub Title 2 Medium</h1>
   <h1 style="font: var(--bl-font-title-2-semibold)">Sub Title 2 Semibold</h1>
   <h1 style="font: var(--bl-font-title-2-bold)">Sub Title 2 Bold</h1>`}
 </Story>
 
 <Story name="Sub Title 3">
   {html`<h1 style="font: var(--bl-font-title-3-regular)">Sub Title 3 Regular</h1>
   <h1 style="font: var(--bl-font-title-3-medium)">Sub Title 3 Medium</h1>
   <h1 style="font: var(--bl-font-title-3-semibold)">Sub Title 3 Semibold</h1>
   <h1 style="font: var(--bl-font-title-3-bold)">Sub Title 3 Bold</h1>`}
 </Story>
 
 <Story name="Sub Title 4">
   {html`<h1 style="font: var(--bl-font-title-4-regular)">Sub Title 4 Regular</h1>
   <h1 style="font: var(--bl-font-title-4-medium)">Sub Title 4 Medium</h1>
   <h1 style="font: var(--bl-font-title-4-semibold)">Sub Title 4 Semibold</h1>
   <h1 style="font: var(--bl-font-title-4-bold)">Sub Title 4 Bold</h1>`}
 </Story>
 
 ## CSS Variables
 
 Here are the CSS variables provided and used in all of the Baklava components regarding to typography rules:
 
 ```css
 --bl-font-family: 'RubikVariable', sans-serif;
 
 /* Font weights */
 --bl-font-weight-light: 300;
 --bl-font-weight-regular: 400;
 --bl-font-weight-medium: 500;
 --bl-font-weight-semibold: 600;
 --bl-font-weight-bold: 700;
 
 /* Font sizes */
 --bl-font-size-2xs: 8px;
 --bl-font-size-xs: 10px;
 --bl-font-size-s: 12px;
 --bl-font-size-m: 14px;
 --bl-font-size-l: 16px;
 --bl-font-size-xl: 20px;
 --bl-font-size-2xl: 24px;
 --bl-font-size-3xl: 28px;
 --bl-font-size-4xl: 32px;
 --bl-font-size-5xl: 48px;
 --bl-font-size-6xl: 64px;
 ```
diff --git a/src/themes/default.css b/src/themes/default.css
@@ -4,10  4,10 @@
   /* Colors */
   --bl-color-primary: #f27a1a;
   --bl-color-primary-hover: #ef6114;
-  --bl-color-tertiary: #f1f2f7;
-  --bl-color-tertiary-hover: #d5d9e1;
   --bl-color-secondary: #273142;
   --bl-color-secondary-hover: #0f131a;
   --bl-color-tertiary: #f1f2f7;
   --bl-color-tertiary-hover: #d5d9e1;
   --bl-color-success: #0bc15c;
   --bl-color-success-hover: #09a44e;
   --bl-color-danger: #ff5043;
@@ -29,16  29,22 @@
   --bl-size-l: 24px;
   --bl-size-xl: 32px;
   --bl-size-2xl: 40px;
-  --bl-size-3xl: 64px;
-  --bl-size-4xl: 80px;
   --bl-size-4xl: 48px;
   --bl-size-5xl: 56px;
   --bl-size-6xl: 64px;
   --bl-size-7xl: 80px;
 
   /* Typography */
-  --bl-font-family: rubikvariable, sans-serif;
   --bl-font-family: 'RubikVariable', sans-serif;
 
   /* Font weights */
   --bl-font-weight-light: 300;
   --bl-font-weight-regular: 400;
   --bl-font-weight-medium: 500;
   --bl-font-weight-semibold: 600;
   --bl-font-weight-bold: 700;
 
   /* Font sizes */
   --bl-font-size-2xs: 8px;
   --bl-font-size-xs: 10px;
   --bl-font-size-s: 12px;
@@ -52,9  58,17 @@
   --bl-font-size-6xl: 64px;
 
   /* Font Style: Display 1 */
-  --bl-font-display-1: var(--bl-font-weight-bold) var(--bl-font-size-6xl) / var(--bl-size-4xl)
   --bl-font-display-1: var(--bl-font-weight-bold) var(--bl-font-size-6xl) / var(--bl-size-7xl)
     var(--bl-font-family);
 
   /* Font Style: Display 2 */
   --bl-font-display-2: var(--bl-font-size-5xl) / var(--bl-size-4xl) var(--bl-font-family);
   --bl-font-display-2-light: var(--bl-font-weight-light) var(--bl-font-display-2);
   --bl-font-display-2-regular: var(--bl-font-weight-regular) var(--bl-font-display-2);
   --bl-font-display-2-medium: var(--bl-font-weight-medium) var(--bl-font-display-2);
   --bl-font-display-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-display-2);
   --bl-font-display-2-bold: var(--bl-font-weight-bold) var(--bl-font-display-2);
 
   /* Font Style: Title 1 */
   --bl-font-title-1: var(--bl-font-size-xl) / var(--bl-size-xl) var(--bl-font-family);
   --bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);