@primer/css 0.0.0-1ea75fe → 0.0.0-202110118627

package/utilities/typography.scss

@@ -1,5 +1,4 @@
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-closing-brace-space-before, selector-list-comma-newline-after, comment-empty-line-before
+// stylelint-disable comment-empty-line-before
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -18,6 +17,7 @@
 
 /* Set the font size to 26px */
 .h1 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h1-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h1-size !important; }
@@ -25,6 +25,7 @@
 
 /* Set the font size to 22px */
 .h2 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h2-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h2-size !important; }
@@ -32,6 +33,7 @@
 
 /* Set the font size to 18px */
 .h3 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h3-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h3-size !important; }
@@ -51,11 +53,17 @@
 .h6 { font-size: $h6-size !important; }
 
 // Heading utilities
-.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 { font-weight: $font-weight-bold !important; }
 
 // Type utilities that match type sale
 /* Set the font size to 26px */
 .f1 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h1-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h1-size !important; }
@@ -63,6 +71,7 @@
 
 /* Set the font size to 22px */
 .f2 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h2-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h2-size !important; }
@@ -70,6 +79,7 @@
 
 /* Set the font size to 18px */
 .f3 {
+  // stylelint-disable-next-line primer/typography
   font-size: $h3-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h3-size !important; }
@@ -90,6 +100,7 @@
 // Type utils with light weight that match type scale
 /* Set the font size to 40px and weight to light */
 .f00-light {
+  // stylelint-disable-next-line primer/typography
   font-size: $h00-size-mobile !important;
   font-weight: $font-weight-light !important;
 
@@ -98,6 +109,7 @@
 
 /* Set the font size to 32px and weight to light */
 .f0-light {
+  // stylelint-disable-next-line primer/typography
   font-size: $h0-size-mobile !important;
   font-weight: $font-weight-light !important;
 
@@ -106,6 +118,7 @@
 
 /* Set the font size to 26px and weight to light */
 .f1-light {
+  // stylelint-disable-next-line primer/typography
   font-size: $h1-size-mobile !important;
   font-weight: $font-weight-light !important;
 
@@ -114,6 +127,7 @@
 
 /* Set the font size to 22px and weight to light */
 .f2-light {
+  // stylelint-disable-next-line primer/typography
   font-size: $h2-size-mobile !important;
   font-weight: $font-weight-light !important;
 
@@ -123,6 +137,7 @@
 // Same size and weight as .lead but without color property
 /* Set the font size to 18px and weight to light */
 .f3-light {
+  // stylelint-disable-next-line primer/typography
   font-size: $h3-size-mobile !important;
   font-weight: $font-weight-light !important;
 
@@ -135,24 +150,29 @@
 
 /* Large leading paragraphs */
 .lead {
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 30px;
   font-size: $h3-size;
   font-weight: $font-weight-light;
-  color: $gray-600;
 }
 
 // Line-height variations
 // Close to commonly used line-heights. Most line-heights
 // combined with type size equate to whole pixels.
 // Will be improved with future typography scale updates.
-/* Set the line height to ultra condensed */
-.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
-/* Set the line height to condensed */
-.lh-condensed { line-height: $lh-condensed !important; }
-/* Set the line height to default */
-.lh-default { line-height: $lh-default !important; }
-/* Set the line height to zero */
-.lh-0 { line-height: 0 !important; }
+// Responsive line-height
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Set the line height to ultra condensed */
+    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+    /* Set the line height to condensed */
+    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
+    /* Set the line height to default */
+    .lh#{$variant}-default { line-height: $lh-default !important; }
+    /* Set the line height to zero */
+    .lh#{$variant}-0 { line-height: 0 !important; }
+  }
+}
 
 // Text alignments
 // Responsive text alignment
@@ -171,7 +191,9 @@
 /* Set the font weight to normal */
 .text-normal { font-weight: $font-weight-normal !important; }
 /* Set the font weight to bold */
-.text-bold { font-weight: $font-weight-bold !important;}
+.text-bold { font-weight: $font-weight-bold !important; }
+.text-semibold { font-weight: $font-weight-semibold !important; }
+.text-light { font-weight: $font-weight-light !important; }
 /* Set the font to italic */
 .text-italic { font-style: italic !important; }
 /* Make text uppercase */
@@ -184,27 +206,34 @@
 .no-wrap { white-space: nowrap !important; }
 /* Normal white space */
 .ws-normal { white-space: normal !important; }
-/* Allow long lines with no spaces to line break */
+
+/* Force long "words" to wrap if they exceed the width of the container */
+.wb-break-word {
+  word-break: break-word !important;
+  // this is for backwards compatibility with browsers that don't respect overflow-wrap
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+/*
+ * Specifically apply word-break: break-all; per MDN:
+ *
+ * > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`,
+ * > `word-break: break-all` will create a break at the exact place where text would
+ * > otherwise overflow its container (even if putting an entire word on its own line
+ * > would negate the need for a break).
+ *
+ * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
+ */
 .wb-break-all { word-break: break-all !important; }
 
 .text-emphasized {
   font-weight: $font-weight-bold;
-  color: $text-gray-dark;
 }
 
 // List styles
 .list-style-none { list-style: none !important; }
 
-// Text Shadows
-/* Add a dark text shadow */
-.text-shadow-dark {
-  text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
-}
-/* Add a light text shadow */
-.text-shadow-light {
-  text-shadow: 0 1px 0 rgba($white, 0.5);
-}
-
 /* Set to monospace font */
 .text-mono {
   font-family: $mono-font !important;

package/utilities/visibility-display.scss

@@ -1,17 +1,4 @@
 // Visibility and display utilities
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
-
-$display-values: (
-  block,
-  flex,
-  inline,
-  inline-block,
-  inline-flex,
-  none,
-  table,
-  table-cell
-);
 
 // Responsive display utilities
 @each $breakpoint, $variant in $responsive-variants {

package/.browserslistrc

@@ -1,6 +0,0 @@
-> 5%
-last 2 firefox versions
-last 2 chrome versions
-last 2 safari versions
-last 2 edge versions
-ie 11

package/.eslintrc.json

@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "plugin:github/es6",
-    "plugin:github/recommended"
-  ],
-  "env": {
-    "es6": true,
-    "node": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2017
-  }
-}

package/.stylelintrc.json

@@ -1,9 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-primer"
-  ],
-  "rules": {
-    "primer/no-override": false,
-    "primer/selector-no-utility": false
-  }
-}

package/MIGRATING.md

@@ -1,70 +0,0 @@
-# 12.0.0
-The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
-
-## npm
-First, install the new package.
-
-```sh
-npm install --save @primer/css
-```
-
-If you use the `primer` package, all you'll need to do is:
-
-```sh
-npm uninstall --save primer
-```
-
-If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
-
-```sh
-jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
-```
-
-And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
-
-## Sass
-There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
-
-### Sass imports
-Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
-
-* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
-* Otherwise...
-    1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
-        * `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
-        * `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
-    1. Replace `primer-` with `@primer/css/`, e.g.
-        * `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
-        * `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
-    1. Delete `lib/` from every Primer CSS path, e.g.
-        * `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
-        * `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
-
-If your text editor supports search and replace regular expressions, the following patterns should work:
-
-| find | replace |
-| :--- | :--- |
-| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
-| `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
-| `primer\b` | `@primer/css`
-
-#### `primer-migrate`
-You can also use the included [`primer-migrate` script](bin/primer-migrate):
-
-```sh
-npx -p @primer/css primer-migrate path/to/**/*.scss
-```
-
-### Sass include paths
-If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
-
-If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
-
-## Fonts
-The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
-
-1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
-1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
-1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
-
-[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration

package/bin/primer-migrate

@@ -1,86 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * XXX: we use Node.js native modules only here to avoid
- * requiring any runtime dependencies when folks install
- * @primer/css
- */
-
-const fs = require('fs')
-const {promisify} = require('util')
-const readFile = promisify(fs.readFile)
-const writeFile = promisify(fs.writeFile)
-const {dirname, join} = require('path')
-
-const IMPORT_PATTERN = /\@import\s+['"]([^'"]+)['"]/g
-const replacements = [
-  [/primer-marketing-(\w+)(\/lib)?/, '@primer/css/marketing/$1'],
-  [/primer-(\w+)(\/lib)?/, '@primer/css/$1'],
-  [/primer\b/, '@primer/css']
-]
-
-const paths = process.argv.slice(2)
-const warn = (...args) => console.warn(...args)
-
-if (paths.length) {
-  Promise.all(
-    paths.map(path => {
-      return migrate(path).then(reps => report(reps, path))
-    })
-  ).catch(die)
-} else {
-  readFile('/dev/stdin', 'utf8')
-    .then(input => {
-      const [output, reps] = replace(input)
-      report(reps, 'stdin')
-      process.stdout.write(output)
-    })
-    .catch(die)
-}
-
-function migrate(path) {
-  return readFile(path, 'utf8').then(input => {
-    if (!IMPORT_PATTERN.test(input)) {
-      warn(`No SCSS imports found in ${path}`)
-      return false
-    }
-
-    const [output, reps] = replace(input)
-    if (reps.length) {
-      return writeFile(path, output, 'utf8').then(() => reps)
-    } else {
-      return false
-    }
-  })
-}
-
-function replace(input) {
-  const reps = []
-  const output = input.replace(IMPORT_PATTERN, (str, path) => {
-    for (const [from, to] of replacements) {
-      if (from.test(path)) {
-        const replaced = str.replace(from, to)
-        reps.push([path, path.replace(from, to)])
-        return replaced
-      }
-    }
-    return str
-  })
-  return [output, reps]
-}
-
-function report(reps, path) {
-  if (reps.length) {
-    warn(`Replaced ${reps.length} imports in ${path}:`)
-    for (const [i, [from, to]] of Object.entries(reps)) {
-      warn(`  ${Number(i) + 1}. (${from}) -> (${to})`)
-    }
-  } else {
-    warn(`No legacy imports found in ${path}`)
-  }
-}
-
-function die(error) {
-  console.error(error)
-  process.exitCode = 1
-}