@codecademy/gamut-styles 17.14.0 → 17.14.1-alpha.05003b.0

package/core/index.scss

@@ -1,4 +1,3 @@
 @forward "../utils";
 @forward "reboot";
 @forward "fonts";
-@forward "typography";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.14.0",
+  "version": "17.14.1-alpha.05003b.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.1",
+    "@codecademy/variance": "0.26.2-alpha.05003b.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/utils/index.scss

@@ -1,5 +1 @@
-// import order is unfortunately important here
-// variables needs to access functions, and mixins needs to access variables
-@forward "functions/index";
 @forward "variables/index";
-@forward "mixins/index";

package/utils/variables/_typography.scss

@@ -47,10 +47,10 @@ $line-height-headings: 1.1;
 // Font sizes
 
 $font-size-base: base.$base-unit;
-$font-size-h1: px-rem(64);
-$font-size-h2: px-rem(44);
-$font-size-h3: px-rem(34);
-$font-size-h4: px-rem(26);
-$font-size-h5: px-rem(22);
-$font-size-h6: px-rem(20);
+$font-size-h1: 4rem;
+$font-size-h2: 2.75rem;
+$font-size-h3: 2.125rem;
+$font-size-h4: 1.625rem;
+$font-size-h5: 1.375rem;
+$font-size-h6: 1.25rem;
 $font-size-small: 85%;

package/utils/variables/index.scss

@@ -1,5 +1,3 @@
 @forward "colors";
 @forward "base";
-@forward "grid";
 @forward "typography";
-@forward "responsive";

package/core/_typography.scss

@@ -1,36 +0,0 @@
-// https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_type.scss
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-bottom: $margin-bottom-headings;
-  font-weight: $font-weight-headings;
-  line-height: $line-height-headings;
-}
-
-h1 {
-  font-size: $font-size-h1;
-}
-h2 {
-  font-size: $font-size-h2;
-}
-h3 {
-  font-size: $font-size-h3;
-}
-h4 {
-  font-size: $font-size-h4;
-}
-h5 {
-  font-size: $font-size-h5;
-}
-h6 {
-  font-size: $font-size-h6;
-}
-
-small {
-  font-size: $font-size-small;
-  font-weight: $font-weight-normal;
-}

package/utils/functions/index.scss

@@ -1,26 +0,0 @@
-@use "sass:math";
-
-@function strip-units($number) {
-  @return math.div($number, ($number * 0 + 1));
-}
-
-@function px-rem($px, $base-px: 16) {
-  @return calc(strip-units($px) / strip-units($base-px)) * 1rem;
-}
-
-@function px-em($px, $base-px: 16) {
-  @return calc(strip-units($px) / strip-units($base-px)) * 1em;
-}
-
-// Math
-@function pow($number, $exponent) {
-  $value: 1;
-
-  @if $exponent > 0 {
-    @for $i from 1 through $exponent {
-      $value: $value * $number;
-    }
-  }
-
-  @return $value;
-}

package/utils/mixins/_font-smoothing.scss

@@ -1,9 +0,0 @@
-@mixin font-smoothing($value: on) {
-  @if $value == on {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  } @else {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-  }
-}

package/utils/mixins/_no-select.scss

@@ -1,4 +0,0 @@
-@mixin no-select {
-  -webkit-touch-callout: none;
-  user-select: none;
-}

package/utils/mixins/_responsive.scss

@@ -1,85 +0,0 @@
-// Try to use these simple mixins if possible for your responsive needs
-@use "../variables/grid" as *;
-
-// Example usage:
-//
-// .grid {
-//  display: flex;
-//  flex-direction: column;
-//  @include md-viewport {
-//    flex-direction: row;
-//  }
-// }
-
-@mixin sm-viewport {
-  @media only screen and (min-width: $grid-sm-min) {
-    @content;
-  }
-}
-
-@mixin md-viewport {
-  @media only screen and (min-width: $grid-md-min) {
-    @content;
-  }
-}
-
-@mixin lg-viewport {
-  @media only screen and (min-width: $grid-lg-min) {
-    @content;
-  }
-}
-
-@mixin xl-viewport {
-  @media only screen and (min-width: $grid-xl-min) {
-    @content;
-  }
-}
-
-// Media query abstractions if you need more complex responsive behavior
-// or custom breakpoints
-
-@mixin screen-size-lte($max) {
-  @media screen and (max-width: $max) {
-    @content;
-  }
-}
-
-@mixin screen-size-between($min, $max) {
-  @media screen and (min-width: $min) and (max-width: $max) {
-    @content;
-  }
-}
-
-@mixin screen-size-gte($min) {
-  @media screen and (min-width: $min) {
-    @content;
-  }
-}
-
-// Named view port mixin
-
-@mixin getViewport($viewport) {
-  @if $viewport == "xl" {
-    @include xl-viewport() {
-      @content;
-    }
-  }
-  @if $viewport == "lg" {
-    @include lg-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "md" {
-    @include md-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "sm" {
-    @include sm-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "xs" {
-    @content;
-  }
-}

package/utils/mixins/_shadow.scss

@@ -1,19 +0,0 @@
-// depth based box-shadows
-
-@mixin shadow($depth: 1) {
-  @if $depth == 1 {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  }
-  @if $depth == 2 {
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  }
-  @if $depth == 3 {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-  }
-  @if $depth == 4 {
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-  }
-  @if $depth == 5 {
-    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
-  }
-}

package/utils/mixins/_sr-only.scss

@@ -1,37 +0,0 @@
-// shamelessly stolen from bootstrap
-// https://github.com/twbs/bootstrap/blob/2085c142679563189dbc34ec6bf4b00e32b8f615/scss/mixins/_screen-reader.scss
-
-@mixin screenreader-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
-}
-
-@mixin sr-only {
-  @warn "This is deprecated, please use screenreader-only";
-  @include screenreader-only;
-}
-
-@mixin screenreader-only-focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-    clip-path: none;
-  }
-}
-
-@mixin sr-only-focusable {
-  @warn "This is deprecated, please use screenreader-only-focusable";
-  @include screenreader-only-focusable;
-}

package/utils/mixins/index.scss

@@ -1,6 +0,0 @@
-@forward "font-smoothing";
-@forward "no-select";
-@forward "responsive";
-@forward "shadow";
-@forward "sr-only";
-@forward "legacy";

package/utils/mixins/legacy.scss

@@ -1,48 +0,0 @@
-// Legacy Helper mixins
-@use "../variables/index.scss";
-@use "../mixins/responsive" as *;
-
-// these variables should be located in ../variables
-// instead, they're co-located with their legacy functions so they can be removed more easily
-// NOTE: when removing, also remove the legacyBreakpoints JS object in gamut-styles/variables.js
-$bp-phone: 0;
-$bp-tablet: 736px;
-$bp-desktop: 960px;
-
-@mixin device-phone {
-  @include screen-size-between($bp-phone, $bp-tablet - 1) {
-    @content;
-  }
-}
-
-@mixin device-tablet {
-  @include screen-size-between($bp-tablet, $bp-desktop - 1) {
-    @content;
-  }
-}
-
-@mixin device-desktop {
-  @include screen-size-gte($bp-desktop) {
-    @content;
-  }
-}
-
-@mixin devices($devices...) {
-  @each $device in $devices {
-    @if $device == phone {
-      @include device-phone {
-        @content;
-      }
-    }
-    @if $device == tablet {
-      @include device-tablet {
-        @content;
-      }
-    }
-    @if $device == desktop {
-      @include device-desktop {
-        @content;
-      }
-    }
-  }
-}

package/utils/variables/_grid.scss

@@ -1,15 +0,0 @@
-// Overrides for the Grid component
-@use "../functions/index.scss" as *;
-
-// NOTE: When updating, make sure you also update the gamut-styles/variables.js file
-
-$max-content-width: 1440px;
-
-$grid-cols: 12;
-$grid-gutter-width: px-rem(16);
-$grid-outer-margin: px-rem(16);
-$grid-xs-min: px-rem(480);
-$grid-sm-min: px-rem(768);
-$grid-md-min: px-rem(1024);
-$grid-lg-min: px-rem(1200);
-$grid-xl-min: px-rem($max-content-width);

package/utils/variables/_responsive.scss

@@ -1 +0,0 @@
-$screenSizes: ("xs", "sm", "md", "lg", "xl");

package/utils/variables/index.js

@@ -1,8 +0,0 @@
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line no-console
-  console.warn(
-    'Importing from `gamut-styles/utils/variables` is now deprecated, please import directly from the gamut-styles package'
-  );
-}
-
-export * from '../../dist/variables';