@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

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
-}

package/dist/marketing-support.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/marketing/src/marketing/support/variables.scss","../src/marketing/src/support/variables/typography.scss"],"names":[],"mappings":"AAGA,WACE,iBAAkB,CAClB,iBAAkB,CAClB,eCmBsB,CDlBtB,yFAA4G,CAC5G,iBAAkB,CAGpB,WACE,iBAAkB,CAClB,iBAAkB,CAClB,eCUwB,CDTxB,8FAAiH,CACjH,iBAAkB,CAGpB,WACE,iBAAkB,CAClB,iBAAkB,CAClB,eCCoB,CDApB,wFAA2G,CAC3G,iBAAkB","file":"marketing-support.css","sourcesContent":["$marketing-font-path: \"/fonts/\" !default;\n\n// Type\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: $font-weight-normal;\n  src: local(\"Inter\"), local(\"Inter-Regular\"), url(\"#{$marketing-font-path}Inter-Regular.woff\") format(\"woff\");\n  font-display: swap;\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: $font-weight-semibold;\n  src: local(\"Inter Medium\"), local(\"Inter-Medium\"), url(\"#{$marketing-font-path}Inter-Medium.woff\") format(\"woff\");\n  font-display: swap;\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: $font-weight-bold;\n  src: local(\"Inter Bold\"), local(\"Inter-Bold\"), url(\"#{$marketing-font-path}Inter-Bold.woff\") format(\"woff\");\n  font-display: swap;\n}\n\n$font-mktg: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !default;\n\n// Builds upon @primer/css/support/variables/typography.scss\n$h000-size: 64px !default;\n$h000-size-mobile: 48px !default;\n\n// Colors\n$green-mktg: mix($green-500, $green-400, 50%) !default;\n$blue-mktg: mix($blue-400, $blue-500, 42%) !default;\n\n// Animations\n$transition-time: 0.4s !default;\n\n// Increases the core spacing scale first by 8px for $spacer-7, then by 16px\n// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,\n// 80, 96, etc.\n$spacer-7:  $spacer * 6 !default;  // 48px\n$spacer-8:  $spacer * 8 !default;  // 64px\n$spacer-9:  $spacer * 10 !default; // 80px\n$spacer-10: $spacer * 12 !default; // 96px\n$spacer-11: $spacer * 14 !default; // 112px\n$spacer-12: $spacer * 16 !default; // 128px\n\n$marketing-spacers: (\n  7: $spacer-7,\n  8: $spacer-8,\n  9: $spacer-9,\n  10: $spacer-10,\n  11: $spacer-11,\n  12: $spacer-12,\n) !default;\n\n$marketing-all-spacers: map-merge(\n  (\n    0: 0,\n    1: $spacer-1,\n    2: $spacer-2,\n    3: $spacer-3,\n    4: $spacer-4,\n    5: $spacer-5,\n    6: $spacer-6,\n  ),\n  $marketing-spacers,\n) !default;\n\n$marketing-position-variants: (\n  \"\": \"\",\n  md: \"-md\",\n  lg: \"-lg\",\n) !default;\n","// Typography variables\n\n// Heading sizes - mobile\n// h4-h6 remain the same size on both mobile & desktop\n$h00-size-mobile: 40px !default;\n$h0-size-mobile: 32px !default;\n$h1-size-mobile: 26px !default;\n$h2-size-mobile: 22px !default;\n$h3-size-mobile: 18px !default;\n\n// Heading sizes - desktop\n$h00-size: 48px !default;\n$h0-size: 40px !default;\n$h1-size: 32px !default;\n$h2-size: 24px !default;\n$h3-size: 20px !default;\n$h4-size: 16px !default;\n$h5-size: 14px !default;\n$h6-size: 12px !default;\n\n$font-size-small: 12px !default;\n\n// Font weights\n$font-weight-bold: 600 !default;\n$font-weight-semibold: 500 !default;\n$font-weight-normal: 400 !default;\n$font-weight-light: 300 !default;\n\n// Line heights\n$lh-condensed-ultra: 1 !default;\n$lh-condensed: 1.25 !default;\n$lh-default: 1.5 !default;\n\n// Font stacks\n$body-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\" !default;\n\n// Monospace font stack\n$mono-font: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace !default;\n\n// The base body size\n$body-font-size: 14px !default;\n$body-line-height: $lh-default !default;\n"]}

package/dist/support.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"support.css"}

package/marketing/utilities/margin.scss

@@ -1,17 +0,0 @@
-// Margin spacer utilities for marketing
-// Utilities only added for y-direction margin (i.e. top & bottom)
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
-
-      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
-
-      .my#{$variant}-#{$scale} {
-        margin-top: $size !important;
-        margin-bottom: $size !important;
-      }
-    }
-  }
-}

package/marketing/utilities/padding.scss

@@ -1,24 +0,0 @@
-// Padding spacer utilities for marketing
-// stylelint-disable block-opening-brace-space-before
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
-      // Set a #{$size} padding for all sides
-      .p#{$variant}-#{$scale}   { padding: #{$size} !important; }
-      // Set a #{$size} padding to the top
-      .pt#{$variant}-#{$scale}  { padding-top: #{$size} !important; }
-      // Set a #{$size} padding to the right
-      .pr#{$variant}-#{$scale}  { padding-right: #{$size} !important; }
-      // Set a #{$size} padding to the bottom
-      .pb#{$variant}-#{$scale}  { padding-bottom: #{$size} !important; }
-      // Set a #{$size} padding to the left
-      .pl#{$variant}-#{$scale}  { padding-left: #{$size} !important; }
-      // Set a #{$size} padding to the top & bottom
-      .py#{$variant}-#{$scale} {
-        padding-top: #{$size} !important;
-        padding-bottom: #{$size} !important;
-      }
-    }
-  }
-}

package/postcss.config.js

@@ -1,14 +0,0 @@
-module.exports = {
-  parser: 'postcss-scss',
-  map: {
-    sourcesContent: true,
-    annotation: true
-  },
-  plugins: {
-    'postcss-node-sass': {
-      includePaths: ['node_modules'],
-      outputStyle: 'compressed'
-    },
-    'autoprefixer': {}
-  }
-}

package/prettier.config.js

@@ -1 +0,0 @@
-module.exports = require('eslint-plugin-github/prettier.config')

package/release.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  dryRun: true,
-  plugins: ['./lib/semantic-release-plugin']
-}

package/support/mixins/buttons.scss

@@ -1,172 +0,0 @@
-
-// TODO: See if the mixins below can be deprecated
-// Might still be needed for .btn-blue
-// ------------------------------------------------------------------
-
-// Button color generator for primary and themed buttons
-
-// New button hotness
-@mixin btn-solid($color, $bg, $bg2) {
-  color: $color;
-  background-color: $bg2;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
-  @if $bg == $gray-000 {
-    &:focus,
-    &.focus {
-      box-shadow: $btn-input-focus-shadow;
-    }
-
-    &:hover,
-    &.hover {
-      background-color: darken($bg2, 3%);
-      background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
-      background-position: 0 -$em-spacer-5;
-      border-color: rgba($black, 0.35);
-    }
-
-    &:active,
-    &.selected,
-    &[aria-selected=true],
-    [open] > & {
-      background-color: darken(desaturate($bg, 10%), 6%);
-      background-image: none;
-      border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
-      box-shadow: $btn-active-shadow;
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled=true] {
-      color: rgba($color, 0.4);
-      background-color: $bg2;
-      background-image: none;
-      border-color: $border-color-button;
-      box-shadow: none;
-    }
-
-  }
-  @else {
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
-    }
-
-    &:hover,
-    &.hover {
-      background-color: darken($bg2, 2%);
-      background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
-      background-position: 0 -$em-spacer-5;
-      border-color: $black-fade-50;
-    }
-
-    &:active,
-    &.selected,
-    &[aria-selected=true],
-    [open] > & {
-      background-color: darken(mix($bg, $bg2, 50%), 7%);
-      background-image: none;
-      border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
-      box-shadow: $btn-active-shadow;
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled=true] {
-      color: rgba($color, 0.75);
-      background-color: mix($bg2, $white, 50%);
-      background-image: none;
-      border-color: $border-color-button;
-      box-shadow: none;
-    }
-
-    .Counter {
-      color: darken($bg, 8%);
-      background-color: $white;
-    }
-  }
-}
-
-// Inverse button hover style
-@mixin btn-inverse($color, $bg, $bg2) {
-  color: $color;
-  background-color: $bg;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
-  &:focus {
-    box-shadow: 0 0 0 0.2em rgba($color, 0.4);
-  }
-
-  &:hover {
-    color: $text-white;
-    background-color: $color;
-    background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
-    border-color: $black-fade-50;
-
-    .Counter {
-      color: $text-white;
-    }
-  }
-
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $text-white;
-    background-color: darken($color, 5%);
-    background-image: none;
-    border-color: $black-fade-50;
-    box-shadow: $btn-active-shadow;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: rgba($color, 0.4);
-    background-color: $bg2;
-    background-image: none;
-    border-color: $border-color-button;
-    box-shadow: none;
-  }
-}
-
-// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
-  color: $text-color;
-  background-color: $bg-color;
-  background-image: none;
-
-  .Counter {
-    background-color: rgba($black, 0.07);
-  }
-
-  &:hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $bg-color;
-    background-color: $text-color;
-    background-image: none;
-    border-color: $text-color;
-
-    .Counter {
-      color: $text-color;
-      background-color: $bg-color;
-    }
-  }
-
-  &:focus {
-    border-color: $text-color;
-    box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: $black-fade-30;
-    background-color: $bg-white;
-    border-color: $black-fade-15;
-    box-shadow: none;
-  }
-}

package/support/variables/color-system.scss

@@ -1,243 +0,0 @@
-// Black based on same hue as $gray-900
-$black: #1b1f23 !default;
-$white: #fff !default;
-
-//
-//
-// -------- Grays --------
-$gray-000:        #fafbfc !default;
-$gray-100:        #f6f8fa !default;
-$gray-200:        #e1e4e8 !default;
-$gray-300:        #d1d5da !default;
-$gray-400:        #959da5 !default;
-$gray-500:        #6a737d !default;
-$gray-600:        #586069 !default;
-$gray-700:        #444d56 !default;
-$gray-800:        #2f363d !default;
-$gray-900:        #24292e !default; // body font color
-
-// -------- Blue --------
-$blue-000:        #f1f8ff !default;
-$blue-100:        #dbedff !default;
-$blue-200:        #c8e1ff !default;
-$blue-300:        #79b8ff !default;
-$blue-400:        #2188ff !default;
-$blue-500:        #0366d6 !default; // Default: Passes AA with #fff
-$blue-600:        #005cc5 !default;
-$blue-700:        #044289 !default;
-$blue-800:        #032f62 !default;
-$blue-900:        #05264c !default; // Passes with 1/2/300 blues
-
-// -------- Green --------
-$green-000:       #f0fff4 !default;
-$green-100:       #dcffe4 !default;
-$green-200:       #bef5cb !default;
-$green-300:       #85e89d !default;
-$green-400:       #34d058 !default;
-$green-500:       #28a745 !default; // Default. passes AA Large
-$green-600:       #22863a !default; // Text green, passes AA on #fff
-$green-700:       #176f2c !default;
-$green-800:       #165c26 !default;
-$green-900:       #144620 !default;
-
-// -------- Yellow --------
-$yellow-000:      #fffdef !default;
-$yellow-100:      #fffbdd !default;
-$yellow-200:      #fff5b1 !default;
-$yellow-300:      #ffea7f !default;
-$yellow-400:      #ffdf5d !default;
-$yellow-500:      #ffd33d !default;
-$yellow-600:      #f9c513 !default;
-$yellow-700:      #dbab09 !default;
-$yellow-800:      #b08800 !default;
-$yellow-900:      #735c0f !default;
-
-// -------- Orange --------
-$orange-000:      #fff8f2 !default;
-$orange-100:      #ffebda !default;
-$orange-200:      #ffd1ac !default;
-$orange-300:      #ffab70 !default;
-$orange-400:      #fb8532 !default;
-$orange-500:      #f66a0a !default; // Default. passes AA Large with #fff
-$orange-600:      #e36209 !default;
-$orange-700:      #d15704 !default;
-$orange-800:      #c24e00 !default;
-$orange-900:      #a04100 !default;
-
-// -------- Red --------
-$red-000:         #ffeef0 !default;
-$red-100:         #ffdce0 !default;
-$red-200:         #fdaeb7 !default;
-$red-300:         #f97583 !default;
-$red-400:         #ea4a5a !default;
-$red-500:         #d73a49 !default; // Default. passes AA
-$red-600:         #cb2431 !default;
-$red-700:         #b31d28 !default;
-$red-800:         #9e1c23 !default;
-$red-900:         #86181d !default;
-
-// -------- Purple --------
-$purple-000:      #f5f0ff !default;
-$purple-100:      #e6dcfd !default;
-$purple-200:      #d1bcf9 !default;
-$purple-300:      #b392f0 !default;
-$purple-400:      #8a63d2 !default;
-$purple-500:      #6f42c1 !default; // passes AA with #fff
-$purple-600:      #5a32a3 !default;
-$purple-700:      #4c2889 !default;
-$purple-800:      #3a1d6e !default;
-$purple-900:      #29134e !default;
-
-// -------- Pink --------
-$pink-000:      #ffeef8 !default;
-$pink-100:      #fedbf0 !default;
-$pink-200:      #f9b3dd !default;
-$pink-300:      #f692ce !default;
-$pink-400:      #ec6cb9 !default;
-$pink-500:      #ea4aaa !default;
-$pink-600:      #d03592 !default;
-$pink-700:      #b93a86 !default;
-$pink-800:      #99306f !default;
-$pink-900:      #6d224f !default;
-
-// -------- Fades --------
-$black-fade-15:      rgba($black, 0.15) !default;
-$black-fade-30:      rgba($black, 0.3) !default;
-$black-fade-50:      rgba($black, 0.5) !default;
-$black-fade-70:      rgba($black, 0.7) !default;
-$black-fade-85:      rgba($black, 0.85) !default;
-
-$white-fade-15:      rgba($white, 0.15) !default;
-$white-fade-30:      rgba($white, 0.3) !default;
-$white-fade-50:      rgba($white, 0.5) !default;
-$white-fade-70:      rgba($white, 0.7) !default;
-$white-fade-85:      rgba($white, 0.85) !default;
-
-// -------- Color defaults --------
-$red:         $red-500 !default;
-$purple:      $purple-500 !default;
-$blue:        $blue-500 !default;
-$green:       $green-500 !default;
-$yellow:      $yellow-500 !default;
-$orange:      $orange-500 !default;
-
-$gray-dark:   $gray-900 !default;
-$gray-light:  $gray-400 !default;
-$gray:        $gray-500 !default;
-
-// -------- Color gradient maps --------
-
-$grays: (
-  0: $gray-000,
-  1: $gray-100,
-  2: $gray-200,
-  3: $gray-300,
-  4: $gray-400,
-  5: $gray-500,
-  6: $gray-600,
-  7: $gray-700,
-  8: $gray-800,
-  9: $gray-900,
-) !default;
-
-$blues: (
-  0: $blue-000,
-  1: $blue-100,
-  2: $blue-200,
-  3: $blue-300,
-  4: $blue-400,
-  5: $blue-500,
-  6: $blue-600,
-  7: $blue-700,
-  8: $blue-800,
-  9: $blue-900,
-) !default;
-
-$greens: (
-  0: $green-000,
-  1: $green-100,
-  2: $green-200,
-  3: $green-300,
-  4: $green-400,
-  5: $green-500,
-  6: $green-600,
-  7: $green-700,
-  8: $green-800,
-  9: $green-900,
-) !default;
-
-$yellows: (
-  0: $yellow-000,
-  1: $yellow-100,
-  2: $yellow-200,
-  3: $yellow-300,
-  4: $yellow-400,
-  5: $yellow-500,
-  6: $yellow-600,
-  7: $yellow-700,
-  8: $yellow-800,
-  9: $yellow-900,
-) !default;
-
-$oranges: (
-  0: $orange-000,
-  1: $orange-100,
-  2: $orange-200,
-  3: $orange-300,
-  4: $orange-400,
-  5: $orange-500,
-  6: $orange-600,
-  7: $orange-700,
-  8: $orange-800,
-  9: $orange-900,
-) !default;
-
-$reds: (
-  0: $red-000,
-  1: $red-100,
-  2: $red-200,
-  3: $red-300,
-  4: $red-400,
-  5: $red-500,
-  6: $red-600,
-  7: $red-700,
-  8: $red-800,
-  9: $red-900,
-) !default;
-
-$purples: (
-  0: $purple-000,
-  1: $purple-100,
-  2: $purple-200,
-  3: $purple-300,
-  4: $purple-400,
-  5: $purple-500,
-  6: $purple-600,
-  7: $purple-700,
-  8: $purple-800,
-  9: $purple-900,
-) !default;
-
-$pinks: (
-  0: $pink-000,
-  1: $pink-100,
-  2: $pink-200,
-  3: $pink-300,
-  4: $pink-400,
-  5: $pink-500,
-  6: $pink-600,
-  7: $pink-700,
-  8: $pink-800,
-  9: $pink-900,
-) !default;
-
-$hue-maps: (
-  "gray": $grays,
-  "blue": $blues,
-  "green": $greens,
-  "yellow": $yellows,
-  "orange": $oranges,
-  "red": $reds,
-  "purple": $purples,
-  "pink": $pinks,
-) !default;

package/support/variables/colors.scss

@@ -1,55 +0,0 @@
-@import "color-system.scss";
-// Color variables
-
-// Border colors
-$border-white:       $white !default;
-$border-black-fade:  $black-fade-15 !default;
-$border-white-fade:  $white-fade-15 !default;
-$border-gray-dark:   $gray-300 !default;
-$border-gray-darker: $gray-700 !default;
-$border-gray-light:  lighten($gray-200, 3%) !default;
-$border-gray:        $gray-200 !default;
-$border-blue:        $blue-500 !default;
-$border-blue-light:  $blue-200 !default;
-$border-green:       $green-400 !default;
-$border-green-light: desaturate($green-300, 40%) !default;
-$border-purple:      $purple !default;
-$border-red:         $red !default;
-$border-red-light:   $red-300 !default;
-$border-yellow:      $yellow-600 !default;
-
-// Background colors
-$bg-white:          $white !default;
-$bg-black:          $black !default;
-$bg-black-fade:     $black-fade-50 !default;
-$bg-blue-light:     $blue-000 !default;
-$bg-blue:           $blue-500 !default;
-$bg-gray-dark:      $gray-900 !default;
-$bg-gray-light:     $gray-000 !default;
-$bg-gray:           $gray-100 !default;
-$bg-green:          $green-500 !default;
-$bg-green-light:    $green-100 !default;
-$bg-orange:         $orange-700 !default;
-$bg-purple:         $purple-500 !default;
-$bg-purple-light:   $purple-000 !default;
-$bg-pink:           $pink-500 !default;
-$bg-red:            $red-500 !default;
-$bg-red-light:      $red-000 !default;
-$bg-yellow:         $yellow-500 !default;
-$bg-yellow-light:   $yellow-200 !default;
-$bg-yellow-dark:    $yellow-700 !default;
-
-// Text colors
-$text-black:        $black !default;
-$text-white:        $white !default;
-$text-blue:         $blue-500 !default;
-$text-gray-dark:    $gray-900 !default;
-$text-gray-light:   $gray-500 !default;
-$text-gray:         $gray-600 !default;
-$text-green:        $green-600 !default;
-$text-orange:       $orange-900 !default;
-$text-orange-light: $orange-600 !default;
-$text-purple:       $purple !default;
-$text-pink:         $pink-500 !default;
-$text-red:          $red-600 !default;
-$text-yellow:       $yellow-800 !default;