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

package/build/index.js

@@ -1 +0,0 @@
-module.exports = {cssstats: require('./build.json')}

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,eCoBsB,CDnBtB,kHAA4G,CAG9G,WACE,iBAAkB,CAClB,iBAAkB,CAClB,eCYwB,CDXxB,uHAAiH","file":"marketing-support.css","sourcesContent":["$marketing-font-path: \"/primer-marketing-support/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}\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}\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-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%);\n$blue-mktg: mix($blue-400, $blue-500, 42%);\n\n// Animations\n$transition-time: 0.4s;\n\n// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12\n// i.e. After 40px, we have 48, 64, 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$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;\n$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;\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// stylelint-disable declaration-bang-space-before\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\", \"Segoe UI Symbol\" !default;\n\n// Monospace font stack\n$mono-font: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, 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/layout/columns.scss

@@ -1,56 +0,0 @@
-// Grid system
-//
-// Create rows with `.columns` to clear the floated columns and outdent the
-// padding on `.column`s with negative margin for alignment.
-
-@warn ".columns, .column, .one-third, .two-thirds, .one-fourth, .one-half, .three-fourths, .one-fifth, .four-fifths, .centered will be deprecated in 12.0.0 please migrate to grid.scss";
-
-.columns {
-  margin-right: -$grid-gutter;
-  margin-left: -$grid-gutter;
-  @include clearfix;
-}
-
-// Base class for every column (requires a column width from below)
-.column {
-  float: left;
-  padding-right: $grid-gutter;
-  padding-left: $grid-gutter;
-}
-
-// Column widths
-.one-third {
-  width: 33.333333%;
-}
-
-.two-thirds {
-  width: 66.666667%;
-}
-
-.one-fourth {
-  width: 25%;
-}
-
-.one-half {
-  width: 50%;
-}
-
-.three-fourths {
-  width: 75%;
-}
-
-.one-fifth {
-  width: 20%;
-}
-
-.four-fifths {
-  width: 80%;
-}
-
-// Centers content horizontally. Can be used inside or outside the grid.
-.centered {
-  display: block;
-  float: none;
-  margin-right: auto;
-  margin-left: auto;
-}

package/marketing/buttons/README.md

@@ -1,39 +0,0 @@
-# Primer Marketing CSS Buttons
-
-> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
-
-This repository is a module of the full [primer][primer] repository.
-
-## Documentation
-
-Find further documentation at [primer.style/css/utilities/marketing-buttons](https://primer.style/css/utilities/marketing-buttons).
-
-## Usage
-
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
-
-```scss
-@import "primer-marketing-buttons/index.scss";
-```
-
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Build
-
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
-
-```
-$ npm run build
-```
-
-## License
-
-MIT © [GitHub](https://github.com/)
-
-[primer]: https://github.com/primer/css
-[primer-support]: https://github.com/primer/css-support
-[support]: https://github.com/primer/css-support
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/

package/marketing/support/README.md

@@ -1,31 +0,0 @@
-# Primer Marketing Support
-
-> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
->
-> Most of the time to include these you'll only need to add `@import "./primer-marketing-support";` to the top of your bundle. If you want only a specific partial you can import them separately.
-
-This repository is a module of the full [primer][primer] repository.
-
-## Usage
-
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
-
-```scss
-@import "primer-marketing-support/index.scss";
-```
-
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Documentation
-
-Find further documentation at [primer.style/css/support/marketing-variables](https://primer.style/css/support/marketing-variables).
-
-## License
-
-MIT © [GitHub](https://github.com/)
-
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/

package/marketing/type/README.md

@@ -1,39 +0,0 @@
-# Primer Marketing CSS Typography
-
-> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
-
-This repository is a module of the full [primer][primer] repository.
-
-## Documentation
-
-Find further documentation at [primer.style/css/utilities/marketing-type](https://primer.style/css/utilities/marketing-type).
-
-## Usage
-
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
-
-```scss
-@import "primer-marketing-typography/index.scss";
-```
-
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Build
-
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
-
-```
-$ npm run build
-```
-
-## License
-
-MIT © [GitHub](https://github.com/)
-
-[primer]: https://github.com/primer/css
-[primer-support]: https://github.com/primer/css-support
-[support]: https://github.com/primer/css-support
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/

package/marketing/utilities/README.md

@@ -1,36 +0,0 @@
-# Primer Marketing CSS Utilities
-
-This repository is a module of the full [primer-marketing-css][primer-marketing-css] repository.
-
-## Usage
-
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
-
-```scss
-@import "primer-marketing-utilities/index.scss";
-```
-
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Build
-
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/utilities](https://primer.style/css/utilities).
-
-## License
-
-[MIT](./LICENSE) © [GitHub](https://github.com/)
-
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
-[primer-marketing-css]: https://github.com/primer/css-marketing

package/marketing/utilities/margin.scss

@@ -1,18 +0,0 @@
-// Margin spacer utilities for marketing
-// Utilities only added for y-direction margin (i.e. top & bottom)
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-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,28 +0,0 @@
-// Padding spacer utilities for marketing
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
-// stylelint-disable comment-empty-line-before
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-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/support/mixins/buttons.scss

@@ -1,160 +0,0 @@
-// stylelint-disable block-closing-brace-newline-after
-
-// 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,
-    [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 {
-      color: rgba($color, 0.4);
-      background-color: $bg2;
-      background-image: none;
-      border-color: transparentize($black, 0.8); // back to default .btn
-      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,
-    [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 {
-      color: rgba($color, 0.75);
-      background-color: mix($bg2, $white, 50%);
-      background-image: none;
-      border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of 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,
-  [open] > & {
-    color: $text-white;
-    background-color: darken($color, 5%);
-    background-image: none;
-    border-color: $black-fade-50;
-    box-shadow: $btn-active-shadow;
-  }
-
-  &:disabled,
-  &.disabled {
-    color: rgba($color, 0.4);
-    background-color: $bg2;
-    background-image: none;
-    border-color: transparentize($black, 0.8); // back to default .btn
-    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,
-  [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 {
-    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 @@
-//
-//
-// -------- 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 based on same hue as $gray-900
-$black: #1b1f23 !default;
-$white: #fff !default;
-
-$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;