@gitlab/ui 115.9.0 → 115.9.1

package/src/scss/typescale/typescale.md

@@ -1,81 +0,0 @@
-GitLab UI typescale is an implementation of the Pajamas [typescale specification](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
-
-## Usage
-
-When you import GitLab UI SCSS, the typescale is not applied automatically. To apply the UI
-Typescale, include the `gl-typescale-ui` `@mixin` in your application SCSS code:
-
-```scss
-@import '@gitlab/ui/src/scss/gitlab_ui';
-
-@include gl-typescale-ui;
-```
-
-You can also include the Typescale and omit the rest of GitLab UI CSS. The following
-code demonstrates the minimal configuration required to use the UI Typescale in a project:
-
-```scss
-@import '@gitlab/ui/src/scss/variables';
-@import '@gitlab/ui/src/scss/mixins';
-@import '@gitlab/ui/src/scss/typescale/index';
-
-@include gl-typescale-ui;
-```
-
-## Implementation notes
-
-### Font stack
-
-The Typescale uses the following font stack:
-
-- Regular: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu,
-  Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji'`
-- Monospace: `'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
-  'Courier New', 'andale mono', 'lucida console', monospace`
-
-### Font-size
-
-Text size is determined by the following parameters:
-
-- Content type:
-  - UI: default
-  - Markdown: `markdown`
-  - Compact Markdown: `compact-markdown`
-- Media breakpoints:
-  - `min-width: 0`: default
-  - `min-width: 768px`: `md`
-  - `min-width: 992px`: `lg`
-  - `min-width: 1200px`: `xl`
-- Font family:
-  - Regular: default
-  - Monospace: `monospace`
-- Element type:
-  - small paragraph / UI text: `sm`
-  - medium paragraph / UI text: default
-  - large paragraph / UI text: `lg`
-  - headers: `h1..h6`
-
-#### Variables
-
-Typescale variables are located in the `scss/variables.scss`. They follow the naming convention:
-`$gl-font-size-[content-type]-[font-family]-[element-type]-[breakpoint]`. Default typescale
-parameters are omitted from the variable name. For example:
-
-```sass
-// content-type: UI, font-family: regular, element-type: h1, media breakpoint: default
-$gl-font-size-h1: px-to-rem(23px);
-
-// content-type: markdown, font-family: regular, element-type: h1, media-breakpoint: min-width: 1200px
-$gl-font-size-markdown-h1-xl: px-to-rem(32px); 
-
-// content-type: compact markdown, font-family: regular, element-type: large paragraph / label
-$gl-font-size-compact-markdown-lg: px-to-rem(15px); 
-```
-
-### Line-height
-
-The minimum line-height in Pajamas’ typescale specification is `16px`/`1rem`. Label text, which is
-any text that is neither paragraph nor a header, uses this line-height. Paragraphs have a
-line-height of `20px`/`1.25rem`. You can see the line-height for other typescale’s elements in the
-[typescale sketch file](https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%23168-responsive-type-spec-previews/).