@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/scss/storybook.scss

@@ -1,43 +0,0 @@
-// Enables feature flag for GlButton border migration
-// to see in Storybook the expected new styles
-$feature-button-border: true;
-
-@import 'tokens';
-
-@import 'functions';
-@import 'variables';
-
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-
-@import 'bootstrap_vue';
-
-@import 'mixins';
-@import 'utility-mixins/index';
-
-@import 'fonts';
-
-@import 'body';
-@import 'components';
-
-@import 'storybook_dark_mode';
-
-/**
- * Custom padding for docs pages. This improves the integration in Pajamas pages.
- */
-.sbdocs-wrapper {
-  padding-top: $gl-spacing-scale-2 !important;
-  padding-bottom: 0 !important;
-}
-
-.bootstrap-vue-docs {
-  @import "../vendor/bootstrap-vue/docs/assets/css/docs.min";
-  @import "../vendor/bootstrap-vue/docs/assets/scss/styles";
-}
-
-// This imports the tailwind.css file.
-// Note that adding `.css` here would break the inline import.
-// These utilities are imported last, because that's
-// what we do in GitLab as well.
-@import 'tailwind';

package/src/scss/storybook_dark_mode.scss

@@ -1,21 +0,0 @@
-@import 'variables';
-
-// conditional overrides for dark mode for use in storybook.
-// Because we only use application.css from gitlab (and not
-// application_dark), we need to override some base rules so
-// that we can more easily test components in dark mode
-
-// This is because dark mode in gitlab currently depends on
-// overriding SCSS variables, but we want gitlab-ui dark mode
-// to use Custom Properties instead
-
-.gl-dark {
-  // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
-  // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
-  --gl-text-color: #{$gray-50};
-  --white: #{$gray-900}; // define mapping between the colours in dark mode. I have used the values from GitLab for consistency: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss
-  --gray-10: #{$gray-950};
-  --gray-600: #{$gray-300};
-
-  color-scheme: dark;
-}

package/src/scss/tokens.scss

@@ -1,2 +0,0 @@
-@import '../tokens/build/css/tokens';
-@import '../tokens/build/css/tokens.dark';

package/src/scss/typescale/_index.scss

@@ -1,103 +0,0 @@
-@mixin gl-typescale-ui($selector: 'body') {
-  #{$selector} {
-    @apply gl-text-base;
-    @apply gl-text-gray-900;
-    @apply gl-font-regular;
-    @apply gl-font-normal;
-    @apply gl-leading-normal;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h-display,
-  .gl-h1,
-  .gl-h2,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @apply gl-font-bold;
-    @apply gl-mt-0;
-    @apply gl-mb-0;
-  }
-
-  .h-display {
-    @include gl-fluid-font-size($min: $gl-font-size-h-display, $max: $gl-font-size-h-display-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
-  }
-
-  h1,
-  .gl-h1 {
-    @include gl-fluid-font-size($min: $gl-font-size-h1, $max: $gl-font-size-h1-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
-  }
-
-  h2,
-  .gl-h2 {
-    @include gl-fluid-font-size($min: $gl-font-size-h2, $max: $gl-font-size-h2-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
-  }
-
-  h3,
-  .gl-h3 {
-    @apply gl-text-lg;
-    @apply gl-leading-20;
-  }
-
-  h4,
-  .gl-h4 {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-  }
-
-  h5,
-  .gl-h5,
-  h6,
-  .gl-h6 {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-    @apply gl-text-gray-700;
-  }
-
-  p,
-  .gl-paragraph {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-    @apply gl-mt-0;
-    @apply gl-mb-0;
-
-    + p,
-    + .gl-paragraph {
-      @apply gl-mt-5;
-    }
-
-    &.lg {
-      @apply gl-leading-24;
-    }
-  }
-
-  .sm {
-    @apply gl-text-sm;
-  }
-
-  .lg {
-    @apply gl-text-lg;
-  }
-
-  .monospace {
-    @apply gl-font-monospace;
-  }
-
-  blockquote {
-    @apply gl-text-gray-700;
-    @apply gl-py-3;
-    @apply gl-pl-6;
-    @apply gl-my-3;
-    @apply gl-mx-0;
-    @include gl-inset-border-l-4-gray-100;
-  }
-}

package/src/scss/typescale/typeface_demo.html

@@ -1,70 +0,0 @@
-<table>
-  <thead>
-    <tr>
-      <th class="gl-pb-5 gl-pr-10">
-        <h4>Primary typeface</h4>
-        <h1>GitLab Sans</h1>
-      </th>
-      <th class="gl-pb-5 monospace">
-        <h4>Monospaced typeface</h4>
-        <h1>GitLab Mono</h1>
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p class="sm">
-          UI Small Paragraph • 0.75rem (12px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace sm">
-          UI Small Monospace • 0.75rem (12px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p>
-          UI Paragraph • 0.875rem (14px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace">
-          UI Monospace • 0.875rem (14px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p class="lg">
-          UI Large Paragraph • 1rem (16px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace lg">
-          UI Large Monospace • 1rem (16px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>

package/src/scss/typescale/typescale.md

@@ -1,82 +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/utility-mixins/index';
-@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/).

package/src/scss/typescale/typescale_demo.html

@@ -1,78 +0,0 @@
-<h1 class="h-display gl-mb-5">UI Display • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
-<p class="lg">UI Large Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in
-  a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-  merge requests, milestones, snippets and more.</p>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-<p class="sm">UI Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in
-  a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-  merge requests, milestones, snippets and more.</p>
-<div class="gl-mt-5">UI Label • Not a paragraph, different line-height</div>
-<div class="gl-mt-5 sm">UI Small Label • Not a paragraph, different line-height</div>
-<div class="gl-mt-5 monospace lg">UI Large Monospace</div>
-<div class="gl-mt-5 monospace">UI Monospace</div>
-<div class="gl-mt-5 monospace sm">UI Small Monospace</div>
-<h1 class="gl-mt-6 gl-mb-5">UI h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-
-<h2 class="gl-mt-6 gl-mb-3">UI h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-
-<h3 class="gl-mt-6 gl-mb-3">UI h3 • GitLab uses "GitLab Flavored Markdown" (GFM)</h3>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-
-<h4 class="gl-mt-6 gl-mb-3">UI h4 • GitLab uses "GitLab Flavored Markdown" (GFM)</h4>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-
-<h5 class="gl-mt-6 gl-mb-3">UI h5 • GitLab uses "GitLab Flavored Markdown" (GFM)</h5>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-
-<h6 class="gl-mt-6 gl-mb-3">UI h6 • GitLab uses "GitLab Flavored Markdown" (GFM)</h6>
-<p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
-  ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
-  milestones, snippets and more.</p>
-<blockquote>
-  <p>
-    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-    requests, milestones, snippets and more.
-  </p>
-</blockquote>
-<blockquote>
-  <ul>
-    <li>Blockquote list item 1</li>
-    <li>Blockquote list item 2</li>
-  </ul>
-</blockquote>
-<blockquote>
-  <table>
-    <thead>
-      <tr>
-        <th>header</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>cell</td>
-      </tr>
-    </tbody>
-  </table>
-</blockquote>
-<blockquote>
-  <blockquote>
-    <p>
-      Nested blockquote
-    </p>
-  </blockquote>
-</blockquote>

package/src/scss/typescale/typescale_demo.scss

@@ -1,8 +0,0 @@
-@import '../variables';
-@import '../mixins';
-@import '../utility-mixins/index';
-@import './index';
-
-@include gl-typescale-ui;
-
-@import '../utilities';