@moda/tokens 5.10.104 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +8 -8
  2. package/lib/assets/stylesheets/_tokens.scss +3 -3
  3. package/lib/assets/stylesheets/tokens/_functions.scss +22 -19
  4. package/lib/assets/stylesheets/tokens/_mixins.scss +12 -9
  5. package/lib/assets/stylesheets/tokens/_utilities.scss +11 -8
  6. package/lib/assets/stylesheets/tokens/_variables.scss +4 -4
  7. package/lib/assets/stylesheets/tokens/variables/_colors.scss +3 -1
  8. package/lib/assets/stylesheets/tokens/variables/_space.scss +28 -26
  9. package/lib/assets/stylesheets/tokens/variables/_typography.scss +44 -54
  10. package/package.json +1 -1
  11. package/src/index.scss +1 -1
package/README.md CHANGED
@@ -34,23 +34,23 @@ npm install --save @moda/tokens
34
34
  Import the library and utilize the mixins or functions in your SCSS files:
35
35
 
36
36
  ```scss
37
- @import "~@moda/tokens";
37
+ @use '~@moda/tokens';
38
38
 
39
39
  // Use functions to access values:
40
40
  p {
41
- @include text(body1);
41
+ @include tokens.text(body1);
42
42
  }
43
43
  ```
44
44
 
45
45
  Import the library and utilize the values in TypeScript:
46
46
 
47
47
  ```tsx
48
- import { color } from "@moda/tokens";
48
+ import { color } from '@moda/tokens';
49
49
 
50
- color("ink");
50
+ color('ink');
51
51
  ```
52
52
 
53
- - **Netlify deploy config** is located here: https://github.com/ModaOperandi/tokens/blob/main/netlify.toml
53
+ - **Netlify deploy config** is located here: https://github.com/ModaOperandi/tokens/blob/main/netlify.toml
54
54
 
55
55
  - **Netlify site overview**: https://app.netlify.com/sites/moda-tokens/overview
56
56
 
@@ -96,15 +96,15 @@ Refer to the files in the [variables directory](https://github.com/ModaOperandi/
96
96
 
97
97
  Returns the font-stack associated with the key.
98
98
 
99
- #### `__dangerously-get-letter-spacing__($index)`
99
+ #### `dangerously-get-letter-spacing($index)`
100
100
 
101
101
  Returns the letter-spacing associated with the index.
102
102
 
103
- #### `__dangerously-get-line-height__($index)`
103
+ #### `dangerously-get-line-height($index)`
104
104
 
105
105
  Returns the line-height associated with the index.
106
106
 
107
- #### `__dangerously-get-font-size__($index)`
107
+ #### `dangerously-get-font-size($index)`
108
108
 
109
109
  Returns the font-size associated with the index.
110
110
 
package/lib/assets/stylesheets/_tokens.scss CHANGED
@@ -1,3 +1,3 @@
1
- @import "tokens/functions";
2
- @import "tokens/mixins";
3
- @import "tokens/variables";
1
+ @forward 'tokens/functions';
2
+ @forward 'tokens/mixins';
3
+ @forward 'tokens/variables';
package/lib/assets/stylesheets/tokens/_functions.scss CHANGED
@@ -1,12 +1,15 @@
1
- @import "utilities";
2
- @import "variables";
1
+ @use 'sass:list';
2
+ @use 'sass:map';
3
+ @use 'sass:meta';
4
+ @use 'utilities';
5
+ @use 'variables';
3
6
 
4
7
  @function font-family($key) {
5
- @return __fetch__(map-get($typography, "fonts"), $key);
8
+ @return utilities.fetch(map.get(variables.$typography, 'fonts'), $key);
6
9
  }
7
10
 
8
11
  @function color($key, $opacity: null) {
9
- $value: __fetch__(map-get($colors, "all"), $key);
12
+ $value: utilities.fetch(map.get(variables.$colors, 'all'), $key);
10
13
  @if $opacity {
11
14
  @return rgba($value, $opacity);
12
15
  } @else {
@@ -14,40 +17,40 @@
14
17
  }
15
18
  }
16
19
 
17
- // `__dangerously-get-` functions are named this way to discourage their use.
20
+ // `dangerously-get-` functions are named this way to discourage their use.
18
21
  // Users of this library should always be utilizing codified text treatments via the `text` mixin.
19
- @function __dangerously-get-letter-spacing__($index) {
20
- @return __access__(map-get($typography, "letter-spacing"), $index);
22
+ @function dangerously-get-letter-spacing($index) {
23
+ @return utilities.access(map.get(variables.$typography, 'letter-spacing'), $index);
21
24
  }
22
25
 
23
- @function __dangerously-get-line-height__($index) {
24
- @return __access__(map-get($typography, "line-heights"), $index);
26
+ @function dangerously-get-line-height($index) {
27
+ @return utilities.access(map.get(variables.$typography, 'line-heights'), $index);
25
28
  }
26
29
 
27
- @function __dangerously-get-font-size__($index) {
28
- @return __access__(map-get($typography, "font-scale"), $index);
30
+ @function dangerously-get-font-size($index) {
31
+ @return utilities.access(map.get(variables.$typography, 'font-scale'), $index);
29
32
  }
30
33
 
31
34
  @function space($indexOrKey) {
32
- @if type-of($indexOrKey) != number {
33
- @return __fetch__(map-get($space, "map"), $indexOrKey);
35
+ @if meta.type-of($indexOrKey) != number {
36
+ @return utilities.fetch(map.get(variables.$space, 'map'), $indexOrKey);
34
37
  }
35
38
 
36
- @return __access__(map-get($space, "scale"), $indexOrKey);
39
+ @return utilities.access(map.get(variables.$space, 'scale'), $indexOrKey);
37
40
  }
38
41
 
39
42
  @function spacing($indices...) {
40
43
  $spacing: ();
41
44
 
42
45
  @each $index in $indices {
43
- $spacing: append($spacing, space($index));
46
+ $spacing: list.append($spacing, space($index));
44
47
  }
45
48
 
46
49
  @return $spacing;
47
50
  }
48
51
 
49
52
  @function text-treatment($key) {
50
- @return __fetch__(map-get($typography, "text-treatments"), $key);
53
+ @return utilities.fetch(map.get(variables.$typography, 'text-treatments'), $key);
51
54
  }
52
55
 
53
56
  /// @param {prop (string)} $prop
@@ -56,12 +59,12 @@
56
59
  /// Either list of properties
57
60
  /// @return {string | null} declares !important or not
58
61
  @function important($important: false, $prop: null) {
59
- @if type-of($important) == bool {
62
+ @if meta.type-of($important) == bool {
60
63
  @return if($important, !important, null);
61
64
  }
62
65
 
63
- @if type-of($important) == list {
64
- @return if(index($important, $prop), !important, null);
66
+ @if meta.type-of($important) == list {
67
+ @return if(list.index($important, $prop), !important, null);
65
68
  }
66
69
 
67
70
  @return null;
package/lib/assets/stylesheets/tokens/_mixins.scss CHANGED
@@ -1,31 +1,34 @@
1
- @import "variables";
2
- @import "functions";
1
+ @use 'sass:meta';
2
+ @use 'sass:string';
3
+ @use 'variables';
4
+ @use 'functions';
5
+ @use 'utilities';
3
6
 
4
7
  @mixin compound($map, $important: false) {
5
8
  @each $prop, $value in $map {
6
- @if type-of($value) == string {
7
- #{$prop}: #{unquote($value)} important($important, $prop);
9
+ @if meta.type-of($value) == string {
10
+ #{$prop}: #{string.unquote($value)} functions.important($important, $prop);
8
11
  } @else {
9
- #{$prop}: #{$value} important($important, $prop);
12
+ #{$prop}: #{$value} functions.important($important, $prop);
10
13
  }
11
14
  }
12
15
  }
13
16
 
14
17
  @mixin breakpoint($key, $prop: min-width) {
15
18
  @if $prop == max-width {
16
- @media (#{$prop}: __fetch__($breakpoints, $key)) {
19
+ @media (#{$prop}: utilities.fetch(variables.$breakpoints, $key)) {
17
20
  @content;
18
21
  }
19
22
  }
20
23
 
21
24
  @if $prop == min-width {
22
- @media (#{$prop}: (__fetch__($breakpoints, $key) + $root-one-px)) {
25
+ @media (#{$prop}: (utilities.fetch(variables.$breakpoints, $key) + variables.$root-one-px)) {
23
26
  @content;
24
27
  }
25
28
  }
26
29
  }
27
30
 
28
31
  @mixin text($key, $font: sans, $important: false) {
29
- font-family: font-family($font) important($important, font-family);
30
- @include compound(text-treatment($key), $important);
32
+ font-family: functions.font-family($font) functions.important($important, font-family);
33
+ @include compound(functions.text-treatment($key), $important);
31
34
  }
package/lib/assets/stylesheets/tokens/_utilities.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @use "sass:list";
2
+ @use "sass:map";
3
+ @use "sass:string";
1
4
  @use 'sass:math';
2
5
 
3
6
  /// Returns the named value of a map. Throws an error if it does not exist.
@@ -7,9 +10,9 @@
7
10
  /// @param {string} $key
8
11
  /// The key to access
9
12
  /// @return {any} keyed value of `$map`
10
- @function __fetch__($map, $key) {
11
- @if map-has-key($map, quote($key)) {
12
- @return map-get($map, quote($key));
13
+ @function fetch($map, $key) {
14
+ @if map.has-key($map, string.quote($key)) {
15
+ @return map.get($map, string.quote($key));
13
16
  } @else {
14
17
  @error "ERROR: the key: '#{$key}' is not defined";
15
18
  }
@@ -22,8 +25,8 @@
22
25
  /// @param {integer (unitless)} $index
23
26
  /// The 0-based index to access
24
27
  /// @return {any} positional value of `$list`
25
- @function __access__($list, $index) {
26
- @return nth($list, $index + 1);
28
+ @function access($list, $index) {
29
+ @return list.nth($list, $index + 1);
27
30
  }
28
31
 
29
32
  /// Merge multiple maps
@@ -31,14 +34,14 @@
31
34
  /// @param {maps} $maps
32
35
  /// The list of maps to merge
33
36
  /// @return {map} merged map
34
- @function __merge__($maps...) {
37
+ @function merge($maps...) {
35
38
  $collection: ();
36
39
  @each $map in $maps {
37
- $collection: map-merge($collection, $map);
40
+ $collection: map.merge($collection, $map);
38
41
  }
39
42
  @return $collection;
40
43
  }
41
44
 
42
- @function __strip-units__($value) {
45
+ @function strip-units($value) {
43
46
  @return math.div($value, ($value * 0 + 1));
44
47
  }
package/lib/assets/stylesheets/tokens/_variables.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "variables/typography";
2
- @import "variables/colors";
3
- @import "variables/space";
4
- @import "variables/breakpoints";
1
+ @forward 'variables/typography';
2
+ @forward 'variables/colors';
3
+ @forward 'variables/space';
4
+ @forward 'variables/breakpoints';
package/lib/assets/stylesheets/tokens/variables/_colors.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../utilities";
2
+
1
3
  $colors-greyscale: (
2
4
  'coal': #000000,
3
5
  'ink': #191a1b,
@@ -45,7 +47,7 @@ $colors-mens: (
45
47
  'canary': #f0f659
46
48
  );
47
49
 
48
- $colors-all: __merge__($colors-greyscale, $colors-ui, $colors-global, $colors-womens, $colors-mens);
50
+ $colors-all: utilities.merge($colors-greyscale, $colors-ui, $colors-global, $colors-womens, $colors-mens);
49
51
 
50
52
  $colors: (
51
53
  all: $colors-all,
package/lib/assets/stylesheets/tokens/variables/_space.scss CHANGED
@@ -1,46 +1,48 @@
1
+ @use "../utilities";
2
+
1
3
  $spacing-scale: (
2
4
  // 0 - 0x
3
- 0rem,
5
+ 0rem,
4
6
  // 1 - quarter-x
5
- 0.25rem,
7
+ 0.25rem,
6
8
  // 2 - half-x
7
- 0.5rem,
9
+ 0.5rem,
8
10
  // 3 - three-quarter-x
9
- 0.75rem,
11
+ 0.75rem,
10
12
  // 4 - 1x
11
- 1rem,
13
+ 1rem,
12
14
  // 5 - one-and-a-half-x
13
- 1.5rem,
15
+ 1.5rem,
14
16
  // 6 - 2x
15
- 2rem,
17
+ 2rem,
16
18
  // 7 - 3x
17
- 3rem,
19
+ 3rem,
18
20
  // 8 - 4x
19
- 4rem,
21
+ 4rem,
20
22
  // 9 - 6x
21
- 6rem,
23
+ 6rem,
22
24
  // 10 - 8x
23
- 8rem,
25
+ 8rem,
24
26
  // 11 - 12x
25
- 12rem,
27
+ 12rem,
26
28
  // 12 - 24x
27
- 24rem
29
+ 24rem
28
30
  );
29
31
 
30
32
  $spacing-map: (
31
- "0x": __access__($spacing-scale, 0),
32
- "quarter-x": __access__($spacing-scale, 1),
33
- "half-x": __access__($spacing-scale, 2),
34
- "three-quarter-x": __access__($spacing-scale, 3),
35
- "1x": __access__($spacing-scale, 4),
36
- "one-and-a-half-x": __access__($spacing-scale, 5),
37
- "2x": __access__($spacing-scale, 6),
38
- "3x": __access__($spacing-scale, 7),
39
- "4x": __access__($spacing-scale, 8),
40
- "6x": __access__($spacing-scale, 9),
41
- "8x": __access__($spacing-scale, 10),
42
- "12x": __access__($spacing-scale, 11),
43
- "24x": __access__($spacing-scale, 12)
33
+ '0x': utilities.access($spacing-scale, 0),
34
+ 'quarter-x': utilities.access($spacing-scale, 1),
35
+ 'half-x': utilities.access($spacing-scale, 2),
36
+ 'three-quarter-x': utilities.access($spacing-scale, 3),
37
+ '1x': utilities.access($spacing-scale, 4),
38
+ 'one-and-a-half-x': utilities.access($spacing-scale, 5),
39
+ '2x': utilities.access($spacing-scale, 6),
40
+ '3x': utilities.access($spacing-scale, 7),
41
+ '4x': utilities.access($spacing-scale, 8),
42
+ '6x': utilities.access($spacing-scale, 9),
43
+ '8x': utilities.access($spacing-scale, 10),
44
+ '12x': utilities.access($spacing-scale, 11),
45
+ '24x': utilities.access($spacing-scale, 12)
44
46
  );
45
47
 
46
48
  $space: (
package/lib/assets/stylesheets/tokens/variables/_typography.scss CHANGED
@@ -1,93 +1,83 @@
1
1
  @use 'sass:math';
2
- @import "../utilities";
2
+ @use '../utilities';
3
3
 
4
4
  $root-font-size: 16px;
5
- $root-one-px: math.div(1, __strip-units__($root-font-size));
5
+ $root-one-px: math.div(1, utilities.strip-units($root-font-size));
6
6
 
7
- $font-stack-moda-sans: "Moda Operandi Sans", Arial, sans-serif;
8
- $font-stack-moda-serif: "Moda Operandi Serif", "Times New Roman", Times, serif;
9
- $font-stack-code: Menlo, Monaco, Consolas, "Courier New", monospace;
7
+ $font-stack-moda-sans: 'Moda Operandi Sans', Arial, sans-serif;
8
+ $font-stack-moda-serif: 'Moda Operandi Serif', 'Times New Roman', Times, serif;
9
+ $font-stack-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
10
10
 
11
11
  $fonts: (
12
12
  sans: $font-stack-moda-sans,
13
13
  serif: $font-stack-moda-serif,
14
- code: $font-stack-code,
14
+ code: $font-stack-code
15
15
  );
16
16
 
17
17
  $line-heights: 1.1, 1.2, 1.4, 1.6;
18
18
 
19
19
  $letter-spacing: 0, 0.02em, 0.04em, 0.1em;
20
20
 
21
- $font-scale: (
22
- 0.75rem,
23
- 0.8125rem,
24
- 1rem,
25
- 1.25rem,
26
- 1.5rem,
27
- 2rem,
28
- 3rem,
29
- 3.75rem,
30
- 6rem
31
- );
21
+ $font-scale: (0.75rem, 0.8125rem, 1rem, 1.25rem, 1.5rem, 2rem, 3rem, 3.75rem, 6rem);
32
22
 
33
23
  $text-treatments: (
34
24
  display: (
35
- font-size: __access__($font-scale, 8),
36
- line-height: __access__($line-heights, 0),
37
- letter-spacing: __access__($letter-spacing, 0),
25
+ font-size: utilities.access($font-scale, 8),
26
+ line-height: utilities.access($line-heights, 0),
27
+ letter-spacing: utilities.access($letter-spacing, 0)
38
28
  ),
39
29
  h1: (
40
- font-size: __access__($font-scale, 7),
41
- line-height: __access__($line-heights, 1),
42
- letter-spacing: __access__($letter-spacing, 0),
30
+ font-size: utilities.access($font-scale, 7),
31
+ line-height: utilities.access($line-heights, 1),
32
+ letter-spacing: utilities.access($letter-spacing, 0)
43
33
  ),
44
34
  h2: (
45
- font-size: __access__($font-scale, 6),
46
- line-height: __access__($line-heights, 0),
47
- letter-spacing: __access__($letter-spacing, 0),
35
+ font-size: utilities.access($font-scale, 6),
36
+ line-height: utilities.access($line-heights, 0),
37
+ letter-spacing: utilities.access($letter-spacing, 0)
48
38
  ),
49
39
  h3: (
50
- font-size: __access__($font-scale, 5),
51
- line-height: __access__($line-heights, 1),
52
- letter-spacing: __access__($letter-spacing, 0),
40
+ font-size: utilities.access($font-scale, 5),
41
+ line-height: utilities.access($line-heights, 1),
42
+ letter-spacing: utilities.access($letter-spacing, 0)
53
43
  ),
54
44
  h4: (
55
- font-size: __access__($font-scale, 4),
56
- line-height: __access__($line-heights, 2),
57
- letter-spacing: __access__($letter-spacing, 0),
45
+ font-size: utilities.access($font-scale, 4),
46
+ line-height: utilities.access($line-heights, 2),
47
+ letter-spacing: utilities.access($letter-spacing, 0)
58
48
  ),
59
49
  h5: (
60
- font-size: __access__($font-scale, 3),
61
- line-height: __access__($line-heights, 2),
62
- letter-spacing: __access__($letter-spacing, 1),
50
+ font-size: utilities.access($font-scale, 3),
51
+ line-height: utilities.access($line-heights, 2),
52
+ letter-spacing: utilities.access($letter-spacing, 1)
63
53
  ),
64
54
  h6: (
65
- font-size: __access__($font-scale, 2),
66
- line-height: __access__($line-heights, 2),
67
- letter-spacing: __access__($letter-spacing, 2),
55
+ font-size: utilities.access($font-scale, 2),
56
+ line-height: utilities.access($line-heights, 2),
57
+ letter-spacing: utilities.access($letter-spacing, 2)
68
58
  ),
69
59
  body1: (
70
- font-size: __access__($font-scale, 1),
71
- line-height: __access__($line-heights, 3),
72
- letter-spacing: __access__($letter-spacing, 2),
60
+ font-size: utilities.access($font-scale, 1),
61
+ line-height: utilities.access($line-heights, 3),
62
+ letter-spacing: utilities.access($letter-spacing, 2)
73
63
  ),
74
64
  bold1: (
75
- font-size: __access__($font-scale, 1),
76
- line-height: __access__($line-heights, 3),
77
- letter-spacing: __access__($letter-spacing, 3),
78
- font-weight: bold,
65
+ font-size: utilities.access($font-scale, 1),
66
+ line-height: utilities.access($line-heights, 3),
67
+ letter-spacing: utilities.access($letter-spacing, 3),
68
+ font-weight: bold
79
69
  ),
80
70
  body2: (
81
- font-size: __access__($font-scale, 0),
82
- line-height: __access__($line-heights, 2),
83
- letter-spacing: __access__($letter-spacing, 2),
71
+ font-size: utilities.access($font-scale, 0),
72
+ line-height: utilities.access($line-heights, 2),
73
+ letter-spacing: utilities.access($letter-spacing, 2)
84
74
  ),
85
75
  eyebrow: (
86
- font-size: __access__($font-scale, 0),
87
- line-height: __access__($line-heights, 2),
88
- letter-spacing: __access__($letter-spacing, 3),
89
- text-transform: uppercase,
90
- ),
76
+ font-size: utilities.access($font-scale, 0),
77
+ line-height: utilities.access($line-heights, 2),
78
+ letter-spacing: utilities.access($letter-spacing, 3),
79
+ text-transform: uppercase
80
+ )
91
81
  );
92
82
 
93
83
  $typography: (
@@ -96,5 +86,5 @@ $typography: (
96
86
  letter-spacing: $letter-spacing,
97
87
  font-scale: $font-scale,
98
88
  root-font-size: $root-font-size,
99
- text-treatments: $text-treatments,
89
+ text-treatments: $text-treatments
100
90
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moda/tokens",
3
- "version": "5.10.104",
3
+ "version": "6.0.0",
4
4
  "description": "Constant values for modaoperandi.com",
5
5
  "repository": "git@github.com:ModaOperandi/tokens.git",
6
6
  "author": "Moda Operandi",
package/src/index.scss CHANGED
@@ -1 +1 @@
1
- @import '../lib/assets/stylesheets/tokens';
1
+ @forward '../lib/assets/stylesheets/tokens';