@carbon/styles 0.9.0 → 0.11.0

package/scss/fonts/_sans.scss

@@ -0,0 +1,153 @@
+//
+// 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.
+//
+
+@use '../config';
+@use './src';
+@use './unicode';
+
+$font-family: 'IBM Plex Sans';
+$name: 'IBM-Plex-Sans';
+$styles: (normal, italic);
+$unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
+$formats: (woff2, woff);
+
+@mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 100;
+        src: src.get($name, Thin, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin extralight($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 200;
+        src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin light($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 300;
+        src: src.get($name, Light, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin regular($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 400;
+        src: src.get($name, Regular, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin text($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 450;
+        src: src.get($name, Text, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin medium($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 500;
+        src: src.get($name, Medium, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin semibold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 600;
+        src: src.get($name, SemiBold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin bold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 700;
+        src: src.get($name, Bold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin all($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @include thin($styles, $unicode-ranges);
+  @include extralight($styles, $unicode-ranges);
+  @include light($styles, $unicode-ranges);
+  @include regular($styles, $unicode-ranges);
+  @include text($styles, $unicode-ranges);
+  @include medium($styles, $unicode-ranges);
+  @include semibold($styles, $unicode-ranges);
+  @include bold($styles, $unicode-ranges);
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}

package/scss/fonts/_serif.scss

@@ -0,0 +1,153 @@
+//
+// 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.
+//
+
+@use '../config';
+@use './src';
+@use './unicode';
+
+$font-family: 'IBM Plex Serif';
+$name: 'IBM-Plex-Serif';
+$styles: (normal, italic);
+$unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
+$formats: (woff2, woff);
+
+@mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 100;
+        src: src.get($name, Thin, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin extralight($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 200;
+        src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin light($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 300;
+        src: src.get($name, Light, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin regular($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 400;
+        src: src.get($name, Regular, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin text($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 450;
+        src: src.get($name, Text, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin medium($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 500;
+        src: src.get($name, Medium, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin semibold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 600;
+        src: src.get($name, SemiBold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin bold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 700;
+        src: src.get($name, Bold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin all($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @include thin($styles, $unicode-ranges);
+  @include extralight($styles, $unicode-ranges);
+  @include light($styles, $unicode-ranges);
+  @include regular($styles, $unicode-ranges);
+  @include text($styles, $unicode-ranges);
+  @include medium($styles, $unicode-ranges);
+  @include semibold($styles, $unicode-ranges);
+  @include bold($styles, $unicode-ranges);
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}

package/scss/fonts/_src.scss

@@ -0,0 +1,102 @@
+//
+// 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.
+//
+
+@use '../config';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+$-filenames: (
+  IBM-Plex-Mono: 'IBMPlexMono',
+  IBM-Plex-Sans-Arabic: 'IBMPlexSansArabic',
+  IBM-Plex-Sans-Devanagari: 'IBMPlexSansDevanagari',
+  IBM-Plex-Sans-Hebrew: 'IBMPlexSansHebrew',
+  IBM-Plex-Sans-Thai-Looped: 'IBMPlexSansThaiLooped',
+  IBM-Plex-Sans-Thai: 'IBMPlexSansThai',
+  IBM-Plex-Sans: 'IBMPlexSans',
+  IBM-Plex-Serif: 'IBMPlexSerif',
+);
+
+@function -get-base-filename($name) {
+  @return map.get($-filenames, $name);
+}
+
+/// The default resolver for locating a font file in the `@ibm/plex` package.
+/// This function will return a path that will work in bundling tools like
+/// webpack but will not work without a tool that understands paths that are
+/// prefixed with `~`
+///
+/// @param {String} $name
+/// @param {String} $weight
+/// @param {String} $style
+/// @param {String} $unicode-range
+/// @param {List} $formats
+/// @returns List
+@function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
+  $filename: -get-base-filename($name);
+
+  // Special case for weight = Regular (400)
+  @if $weight == Regular {
+    @if $style == italic {
+      $filename: '#{$filename}-Italic';
+    } @else {
+      $filename: '#{$filename}-Regular';
+    }
+  } @else {
+    // Otherwise add weight + optional style (italic)
+    $filename: '#{$filename}-#{$weight}';
+    @if $style == italic {
+      $filename: '#{$filename}Italic';
+    }
+  }
+
+  $filenames: ();
+
+  @each $format in $formats {
+    $url: $filename;
+
+    @if $unicode-range {
+      $url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+    } @else {
+      $url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
+    }
+
+    // Add extension
+    $url: '#{$url}.#{$format}';
+    $filenames: list.append(
+      $filenames,
+      url('#{$url}') format('#{$format}'),
+      $separator: comma
+    );
+  }
+
+  @return $filenames;
+}
+
+/// The resolver used for locating the filepaths in `url() format()` values in
+/// @font-face blocks
+$resolver: meta.get-function('-default-resolver') !default;
+
+/// Retrieve the list of `url() format()` values used in the `src` property in
+/// an `@font-face` block
+
+/// @param {String} $name
+/// @param {String} $weight
+/// @param {String} $style
+/// @param {String} $unicode-range
+/// @param {List} $formats
+/// @returns List
+@function get($name, $weight, $style, $unicode-range: null, $formats) {
+  @return meta.call(
+    $resolver,
+    $name: $name,
+    $weight: $weight,
+    $style: $style,
+    $unicode-range: $unicode-range,
+    $formats: $formats
+  );
+}

package/scss/fonts/unicode/_index.scss

@@ -0,0 +1,124 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+
+/// All available unicode ranges where the keys are unicode range names and the
+/// value is the list of unicode ranges that are applicable
+/// @type {List}
+$ranges: (
+  Cyrillic: (
+    'U+0400-045F',
+    'U+0472-0473',
+    'U+0490-049D',
+    'U+04A0-04A5',
+    'U+04AA-04AB',
+    'U+04AE-04B3',
+    'U+04B6-04BB',
+    'U+04C0-04C2',
+    'U+04CF-04D9',
+    'U+04DC-04DF',
+    'U+04E2-04E9',
+    'U+04EE-04F5',
+    'U+04F8-04F9',
+  ),
+  Greek: (
+    'U+0384-038A',
+    'U+038C',
+    'U+038E-03A1',
+    'U+03A3-03CE',
+  ),
+  Latin1: (
+    'U+0000',
+    'U+000D',
+    'U+0020-007E',
+    'U+00A0-00A3',
+    'U+00A4-00FF',
+    'U+0131',
+    'U+0152-0153',
+    'U+02C6',
+    'U+02DA',
+    'U+02DC',
+    'U+2013-2014',
+    'U+2018-201A',
+    'U+201C-201E',
+    'U+2020-2022',
+    'U+2026',
+    'U+2030',
+    'U+2039-203A',
+    'U+2044',
+    'U+2074',
+    'U+20AC',
+    'U+2122',
+    'U+2212',
+    'U+FB01-FB02',
+  ),
+  Latin2: (
+    'U+0100-024F',
+    'U+0259',
+    'U+1E00-1EFF',
+    'U+20A0-20AB',
+    'U+20AD-20CF',
+    'U+2C60-2C7F',
+    'U+A720-A7FF',
+    'U+FB01-FB02',
+  ),
+  Latin3: (
+    'U+0102-0103',
+    'U+1EA0-1EF9',
+    'U+20AB',
+  ),
+  Pi: (
+    'U+0E3F',
+    'U+2032-2033',
+    'U+2070',
+    'U+2075-2079',
+    'U+2080-2081',
+    'U+2083',
+    'U+2085-2089',
+    'U+2113',
+    'U+2116',
+    'U+2126',
+    'U+212E',
+    'U+2150-2151',
+    'U+2153-215E',
+    'U+2190-2199',
+    'U+21A9-21AA',
+    'U+21B0-21B3',
+    'U+21B6-21B7',
+    'U+21BA-21BB',
+    'U+21C4',
+    'U+21C6',
+    'U+2202',
+    'U+2206',
+    'U+220F',
+    'U+2211',
+    'U+221A',
+    'U+221E',
+    'U+222B',
+    'U+2248',
+    'U+2260',
+    'U+2264-2265',
+    'U+25CA',
+    'U+2713',
+    'U+274C',
+    'U+2B0E-2B11',
+    'U+EBE1-EBE7',
+    'U+ECE0',
+    'U+EFCC',
+  ),
+);
+
+/// Retrieve the unicode range for a given unicode range name
+/// @param {String} $name
+/// @returns {List}
+@function get-range($name) {
+  @if map.has-key($ranges, $name) {
+    @return map.get($ranges, $name);
+  }
+  @error 'Unable to find range with the name: #{$name}';
+}

package/scss/_font-face.scss

@@ -1,13 +0,0 @@
-@use 'config';
-@use '@ibm/plex/default' as sans;
-@use '@ibm/plex/mono' as mono;
-@use '@ibm/plex/arabic' as arabic;
-
-@if config.$css--font-face == true {
-  @include sans.all;
-  @include mono.all;
-
-  @if config.$css--plex-arabic == true {
-    @include arabic.all;
-  }
-} ;

package/scss/utilities/_layer-set.scss

@@ -1,38 +0,0 @@
-//
-// Copyright IBM Corp. 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use 'sass:list';
-@use 'sass:meta';
-@use '../config' as *;
-@use './custom-property';
-
-/// Define a map of layer sets, each set should have values for each layer in
-/// the application. The key of this map is used for the CSS Custom Property
-/// name whose value is updated as more layers are added.
-/// @type {Map}
-$layer-sets: () !default;
-
-/// Emit the layer tokens defined in $layer-sets for the given $level
-/// @param {Number} $level
-@mixin -emit-layer-tokens($level) {
-  @each $key, $layer-set in $layer-sets {
-    $value: list.nth($layer-set, $level);
-    @include custom-property.declaration($key, $value);
-  }
-}
-
-:root {
-  @include -emit-layer-tokens(1);
-}
-
-.#{$prefix}--layer {
-  @include -emit-layer-tokens(2);
-
-  .#{$prefix}--layer {
-    @include -emit-layer-tokens(3);
-  }
-}