@carbon/type 10.0.0-rc.0 → 10.2.0

package/scss/_font-family.scss

@@ -7,7 +7,9 @@
 
 /// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
 /// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
-/// @type {Map}
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $carbon--font-families: (
   'mono':
     unquote(
@@ -23,20 +25,27 @@ $carbon--font-families: (
   'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 );
 
-/// Get the font-family for an IBM Plex font.
+/// Get the font-family for an IBM Plex font
 /// @param {String} $name
 /// @return {String}
+/// @access public
+/// @group @carbon/type
 @function carbon--font-family($name) {
   @return map-get($carbon--font-families, $name);
 }
 
-/// Include the `font-family` definition for the given name in your selector.
+/// Include the `font-family` definition for the given name in your selector
 /// @param {String} $name
+/// @access public
+/// @group @carbon/type
 @mixin carbon--font-family($name) {
   font-family: carbon--font-family($name);
 }
 
-/// Suggested font weights to be used in product.
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $carbon--font-weights: (
   'light': 300,
   'regular': 400,
@@ -46,12 +55,16 @@ $carbon--font-weights: (
 /// Retrieve the font-weight value for a given name
 /// @param {String} $weight
 /// @return {Number}
+/// @access public
+/// @group @carbon/type
 @function carbon--font-weight($weight) {
   @return map-get($carbon--font-weights, $weight);
 }
 
 /// Set the `font-weight` property with the value for a given name
 /// @param {String} $weight
+/// @access public
+/// @group @carbon/type
 @mixin carbon--font-weight($weight) {
   font-weight: carbon--font-weight($weight);
 }

package/scss/_inlined/_classes.scss

@@ -0,0 +1,41 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'prefix';
+@import 'styles';
+@import 'font-family';
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--type-classes {
+  // Font families
+  @each $name, $value in $carbon--font-families {
+    .#{$prefix}--type-#{$name} {
+      font-family: $value;
+    }
+  }
+
+  // Font weights
+  @each $name, $value in $carbon--font-weights {
+    .#{$prefix}--type-#{$name} {
+      font-weight: $value;
+    }
+  }
+
+  // Font styles
+  .#{$prefix}--type-italic {
+    font-style: italic;
+  }
+
+  // Type styles
+  @each $name, $value in $tokens {
+    .#{$prefix}--type-#{$name} {
+      @include carbon--type-style($name, map-has-key($value, breakpoints));
+    }
+  }
+}

package/scss/_inlined/_font-family.scss

@@ -0,0 +1,70 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$carbon--font-families: (
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
+  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
+  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+);
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function carbon--font-family($name) {
+  @return map-get($carbon--font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-family($name) {
+  font-family: carbon--font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$carbon--font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+);
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function carbon--font-weight($weight) {
+  @return map-get($carbon--font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-weight($weight) {
+  font-weight: carbon--font-weight($weight);
+}

package/scss/_inlined/_prefix.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$prefix: 'bx' !default;

package/scss/_inlined/_reset.scss

@@ -0,0 +1,43 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../vendor/@carbon/layout/convert';
+@import 'font-family';
+
+/// Include a type reset for a given body and mono font family
+/// @param {Number} $base-font-size [$carbon--base-font-size] - The base font size for your document
+/// @param {String} $body-font-family [carbon--font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [carbon--font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @carbon/type
+@mixin carbon--type-reset(
+  $base-font-size: $carbon--base-font-size,
+  $body-font-family: carbon--font-family('sans'),
+  $mono-font-family: carbon--font-family('mono')
+) {
+  html {
+    font-size: $base-font-size;
+  }
+
+  body {
+    font-family: $body-font-family;
+    font-weight: 400;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  // IBM Plex uses semibold instead of bold, as a result we need to map
+  // tags that use `font-weight: bold` to the semibold value
+  strong {
+    font-weight: 600;
+  }
+
+  code {
+    font-family: $mono-font-family;
+  }
+}

package/scss/_inlined/_scale.scss

@@ -0,0 +1,59 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../vendor/@carbon/layout/convert';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
+@function carbon--get-type-size($step) {
+  @if $step == 1 {
+    @return 12px;
+  }
+  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+  @return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+
+/// Type scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$carbon--type-scale: ();
+@for $i from 1 through 23 {
+  $carbon--type-scale: append(
+    $carbon--type-scale,
+    carbon--rem(carbon--get-type-size($i))
+  );
+}
+
+/// Get the value of a specific step in the typescale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
+@function carbon--type-scale($step) {
+  @return nth($carbon--type-scale, $step);
+}
+
+/// Set the font-size value of a selector with the value at the given `$step`
+/// @param {Number} $step
+/// @access public
+/// @group @carbon/type
+@mixin carbon--type-scale($step) {
+  font-size: carbon--type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias carbon--type-scale
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-size($step) {
+  font-size: carbon--type-scale($step);
+}