@carbon/styles 0.2.0-rc.0 → 0.2.0

package/docs/sass.md

@@ -51,6 +51,7 @@ between version updates.
 | [`scss/compat/`](#compatibility)       | Helper themes and tokens for migrating from v10 to v11     |
 | [`scss/config`](#config)               | Configure various options for the package                  |
 | [`scss/feature-flags`](#feature-flags) | Configure various feature flags for experiments            |
+| [`scss/font-face`](#font-face)         | Configure the IBM Plex font and languages                  |
 | [`scss/grid`](#grid)                   | Access and use the CSS Grid built-in to Carbon             |
 | [`scss/motion`](#motion)               | Helper function, mixins, and tokens for motion             |
 | [`scss/reset`](#reset)                 | A CSS Reset                                                |
@@ -100,6 +101,42 @@ docs.
 | :------------------------------------------ | :------------------------- |
 | `@use '@carbon/styles/scss/feature-flags';` | `scss/_feature-flags.scss` |
 
+## Font Face
+
+| Import                                  | Filepath               |
+| :-------------------------------------- | :--------------------- |
+| `@use '@carbon/styles/scss/font-face';` | `scss/_font-face.scss` |
+
+### Using IBM Plex
+
+By default, IBM Plex will be emitted when importing via the `@carbon/styles`
+main entrypoint or referencing the `font-face` file directly. If you do not want
+the font-face declarations to be emitted, you can set the `css--font-face` token
+to `false`:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $css--font-face: false,
+);
+```
+
+### Emitting additional typefaces
+
+When using the font-face declarations, only `IBM Plex Sans` and `IBM Plex Mono`
+are emitted. If you would like to emit additional typefaces, like
+`IBM Plex Sans Arabic`, you can set additional config tokens:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $css--plex-arabic: true,
+);
+```
+
+| IBM Plex Language | Token               |
+| :---------------- | :------------------ |
+| Arabic            | `$css--plex-arabic` |
+| TODO              | `TODO`              |
+
 ## Grid
 
 | Import                             | Filepath          |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.2.0-rc.0",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.30.0-rc.0",
-    "@carbon/feature-flags": "^0.6.0-rc.0",
-    "@carbon/grid": "^10.33.0-rc.0",
-    "@carbon/layout": "^10.29.0-rc.0",
-    "@carbon/motion": "^10.22.0-rc.0",
-    "@carbon/themes": "^10.40.0-rc.0",
-    "@carbon/type": "^10.33.0-rc.0",
+    "@carbon/colors": "^10.30.0",
+    "@carbon/feature-flags": "^0.6.0",
+    "@carbon/grid": "^10.33.0",
+    "@carbon/layout": "^10.29.0",
+    "@carbon/motion": "^10.22.0",
+    "@carbon/themes": "^10.40.0",
+    "@carbon/type": "^10.33.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.17.0-rc.0",
+    "@carbon/test-utils": "^10.17.0",
     "css": "^3.0.0"
   },
-  "gitHead": "df847d04273c0783bea8c3034bd4c11bdbe5eaa3"
+  "gitHead": "9c2eb1cfa0e5b2c4dc0142b98cd8828e84640af8"
 }

package/scss/components/loading/_functions.scss

@@ -6,5 +6,5 @@
 //
 
 @function loading-progress($circumference, $percentage) {
-  @return $circumference - $percentage / 100 * $circumference;
+  @return $circumference - $percentage * 0.01 * $circumference;
 }

package/scss/components/pagination-nav/_mixins.scss

@@ -31,7 +31,7 @@
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$spacing-05 / 2});
+    left: calc(50% - #{$spacing-05 * 0.5});
     width: $spacing-05;
     opacity: 1;
   }

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -160,8 +160,8 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position / 2});
-    left: calc(50% - #{$select-icon-top-position / 2});
+    top: calc(50% - #{$select-icon-top-position * 0.5});
+    left: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }
 

package/scss/components/structured-list/_mixins.scss

@@ -24,7 +24,7 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
+  padding: $padding * 0.25;
 }
 
 /// Used only for [data-structured-list]
@@ -32,13 +32,13 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding / 2;
-  padding-left: $padding / 2;
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding / 2;
-    padding-left: $padding / 2;
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
   }
 }
 

package/scss/utilities/_convert.scss

@@ -8,6 +8,8 @@
 /// Default font size
 /// @type Number
 /// @access public
+@use "sass:math";
+
 $base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -21,7 +23,7 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1rem;
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -35,5 +37,5 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1em;
+  @return math.div($px, $base-font-size) * 1em;
 }