@sproutsocial/racine 10.0.3-menuhotfix.0 → 11.0.0-beta.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 (5) hide show
  1. package/__flow__/themes/dark/_themed.scss +14 -29
  2. package/__flow__/themes/light/_themed.scss +14 -29
  3. package/dist/themes/dark/_themed.scss +14 -29
  4. package/dist/themes/light/_themed.scss +14 -29
  5. package/package.json +1 -1
package/__flow__/themes/dark/_themed.scss CHANGED
@@ -7,90 +7,75 @@
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
10
- $theme: map-get($dark, 'default');
11
-
12
- // MIXIN
13
- // CSS properties that are theme-dependent must be wrapped in this mixin.
14
- // It will convert semantic tokens to the appropriate theme-dependent CSS property.
15
- @mixin themed() {
16
- & {
17
- $theme-map: () !global;
18
- @each $key, $submap in $theme {
19
- $value: map-get($theme, "#{$key}");
20
- $theme-map: map-merge($theme-map, ($key: $value)) !global;
21
- }
22
- @content;
23
- $theme-map: null !global;
24
- }
25
- }
10
+ $theme: map-get($dark, "default");
26
11
 
27
12
  // FUNCTIONS
28
13
  // This function will allow you to get any value from the theme.
29
14
  // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
30
15
  @function t($key) {
31
16
  $keys: _str-split($key, ".");
32
- @return _map-deep-get($theme-map, $keys);
17
+ @return _map-deep-get($theme, $keys);
33
18
  }
34
19
 
35
20
  // The rest of the functions are convenience methods to get theme values for subsets of the theme.
36
21
  // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
37
22
  @function colors($key) {
38
23
  $keys: _str-split($key, ".");
39
- @return _map-deep-get($theme-map, join("colors", $keys));
24
+ @return _map-deep-get($theme, join("colors", $keys));
40
25
  }
41
26
 
42
27
  // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
43
28
  @function typography($key) {
44
29
  $keys: _str-split($key, ".");
45
- @return _map-deep-get($theme-map, join("typography", $keys));
30
+ @return _map-deep-get($theme, join("typography", $keys));
46
31
  }
47
32
 
48
33
  // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
49
34
  @function fontWeights($key) {
50
35
  $keys: _str-split($key, ".");
51
- @return _map-deep-get($theme-map, join("fontWeights", $keys));
36
+ @return _map-deep-get($theme, join("fontWeights", $keys));
52
37
  }
53
38
 
54
39
  // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
55
40
  @function space($key) {
56
41
  $keys: _str-split($key, ".");
57
- @return _map-deep-get($theme-map, join("space", $keys));
42
+ @return _map-deep-get($theme, join("space", $keys));
58
43
  }
59
44
 
60
45
  // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
61
46
  @function radii($key) {
62
47
  $keys: _str-split($key, ".");
63
- @return _map-deep-get($theme-map, join("radii", $keys));
48
+ @return _map-deep-get($theme, join("radii", $keys));
64
49
  }
65
50
 
66
51
  // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
67
52
  @function borders($key) {
68
53
  $keys: _str-split($key, ".");
69
- @return _map-deep-get($theme-map, join("borders", $keys));
54
+ @return _map-deep-get($theme, join("borders", $keys));
70
55
  }
71
56
 
72
57
  // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
73
58
  @function borderWidths($key) {
74
59
  $keys: _str-split($key, ".");
75
- @return _map-deep-get($theme-map, join("borderWidths", $keys));
60
+ @return _map-deep-get($theme, join("borderWidths", $keys));
76
61
  }
77
62
 
78
63
  // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
79
64
  @function shadows($key) {
80
65
  $keys: _str-split($key, ".");
81
- @return _map-deep-get($theme-map, join("shadows", $keys));
66
+ @return _map-deep-get($theme, join("shadows", $keys));
82
67
  }
83
68
 
84
69
  // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
85
70
  @function easing($key) {
86
71
  $keys: _str-split($key, ".");
87
- @return _map-deep-get($theme-map, join("easing", $keys));
72
+ @return _map-deep-get($theme, join("easing", $keys));
88
73
  }
89
74
 
90
75
  // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
91
76
  @function duration($key) {
92
77
  $keys: _str-split($key, ".");
93
- @return _map-deep-get($theme-map, join("duration", $keys));
78
+ @return _map-deep-get($theme, join("duration", $keys));
94
79
  }
95
80
 
96
81
  // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
104
89
  // empty array/list
105
90
  $split-arr: ();
106
91
  // first index of separator in string
107
- $index : str-index($string, $separator);
92
+ $index: str-index($string, $separator);
108
93
  // loop through string
109
94
  @while $index != null {
110
95
  // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
114
99
  // remove item and separator from string
115
100
  $string: str-slice($string, $index + 1);
116
101
  // find new index of separator
117
- $index : str-index($string, $separator);
102
+ $index: str-index($string, $separator);
118
103
  }
119
104
  // add the remaining string to list (the last item)
120
105
  $split-arr: append($split-arr, $string);
package/__flow__/themes/light/_themed.scss CHANGED
@@ -7,90 +7,75 @@
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
10
- $theme: map-get($light, 'default');
11
-
12
- // MIXIN
13
- // CSS properties that are theme-dependent must be wrapped in this mixin.
14
- // It will convert semantic tokens to the appropriate theme-dependent CSS property.
15
- @mixin themed() {
16
- & {
17
- $theme-map: () !global;
18
- @each $key, $submap in $theme {
19
- $value: map-get($theme, "#{$key}");
20
- $theme-map: map-merge($theme-map, ($key: $value)) !global;
21
- }
22
- @content;
23
- $theme-map: null !global;
24
- }
25
- }
10
+ $theme: map-get($light, "default");
26
11
 
27
12
  // FUNCTIONS
28
13
  // This function will allow you to get any value from the theme.
29
14
  // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
30
15
  @function t($key) {
31
16
  $keys: _str-split($key, ".");
32
- @return _map-deep-get($theme-map, $keys);
17
+ @return _map-deep-get($theme, $keys);
33
18
  }
34
19
 
35
20
  // The rest of the functions are convenience methods to get theme values for subsets of the theme.
36
21
  // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
37
22
  @function colors($key) {
38
23
  $keys: _str-split($key, ".");
39
- @return _map-deep-get($theme-map, join("colors", $keys));
24
+ @return _map-deep-get($theme, join("colors", $keys));
40
25
  }
41
26
 
42
27
  // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
43
28
  @function typography($key) {
44
29
  $keys: _str-split($key, ".");
45
- @return _map-deep-get($theme-map, join("typography", $keys));
30
+ @return _map-deep-get($theme, join("typography", $keys));
46
31
  }
47
32
 
48
33
  // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
49
34
  @function fontWeights($key) {
50
35
  $keys: _str-split($key, ".");
51
- @return _map-deep-get($theme-map, join("fontWeights", $keys));
36
+ @return _map-deep-get($theme, join("fontWeights", $keys));
52
37
  }
53
38
 
54
39
  // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
55
40
  @function space($key) {
56
41
  $keys: _str-split($key, ".");
57
- @return _map-deep-get($theme-map, join("space", $keys));
42
+ @return _map-deep-get($theme, join("space", $keys));
58
43
  }
59
44
 
60
45
  // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
61
46
  @function radii($key) {
62
47
  $keys: _str-split($key, ".");
63
- @return _map-deep-get($theme-map, join("radii", $keys));
48
+ @return _map-deep-get($theme, join("radii", $keys));
64
49
  }
65
50
 
66
51
  // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
67
52
  @function borders($key) {
68
53
  $keys: _str-split($key, ".");
69
- @return _map-deep-get($theme-map, join("borders", $keys));
54
+ @return _map-deep-get($theme, join("borders", $keys));
70
55
  }
71
56
 
72
57
  // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
73
58
  @function borderWidths($key) {
74
59
  $keys: _str-split($key, ".");
75
- @return _map-deep-get($theme-map, join("borderWidths", $keys));
60
+ @return _map-deep-get($theme, join("borderWidths", $keys));
76
61
  }
77
62
 
78
63
  // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
79
64
  @function shadows($key) {
80
65
  $keys: _str-split($key, ".");
81
- @return _map-deep-get($theme-map, join("shadows", $keys));
66
+ @return _map-deep-get($theme, join("shadows", $keys));
82
67
  }
83
68
 
84
69
  // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
85
70
  @function easing($key) {
86
71
  $keys: _str-split($key, ".");
87
- @return _map-deep-get($theme-map, join("easing", $keys));
72
+ @return _map-deep-get($theme, join("easing", $keys));
88
73
  }
89
74
 
90
75
  // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
91
76
  @function duration($key) {
92
77
  $keys: _str-split($key, ".");
93
- @return _map-deep-get($theme-map, join("duration", $keys));
78
+ @return _map-deep-get($theme, join("duration", $keys));
94
79
  }
95
80
 
96
81
  // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
104
89
  // empty array/list
105
90
  $split-arr: ();
106
91
  // first index of separator in string
107
- $index : str-index($string, $separator);
92
+ $index: str-index($string, $separator);
108
93
  // loop through string
109
94
  @while $index != null {
110
95
  // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
114
99
  // remove item and separator from string
115
100
  $string: str-slice($string, $index + 1);
116
101
  // find new index of separator
117
- $index : str-index($string, $separator);
102
+ $index: str-index($string, $separator);
118
103
  }
119
104
  // add the remaining string to list (the last item)
120
105
  $split-arr: append($split-arr, $string);
package/dist/themes/dark/_themed.scss CHANGED
@@ -7,90 +7,75 @@
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
10
- $theme: map-get($dark, 'default');
11
-
12
- // MIXIN
13
- // CSS properties that are theme-dependent must be wrapped in this mixin.
14
- // It will convert semantic tokens to the appropriate theme-dependent CSS property.
15
- @mixin themed() {
16
- & {
17
- $theme-map: () !global;
18
- @each $key, $submap in $theme {
19
- $value: map-get($theme, "#{$key}");
20
- $theme-map: map-merge($theme-map, ($key: $value)) !global;
21
- }
22
- @content;
23
- $theme-map: null !global;
24
- }
25
- }
10
+ $theme: map-get($dark, "default");
26
11
 
27
12
  // FUNCTIONS
28
13
  // This function will allow you to get any value from the theme.
29
14
  // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
30
15
  @function t($key) {
31
16
  $keys: _str-split($key, ".");
32
- @return _map-deep-get($theme-map, $keys);
17
+ @return _map-deep-get($theme, $keys);
33
18
  }
34
19
 
35
20
  // The rest of the functions are convenience methods to get theme values for subsets of the theme.
36
21
  // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
37
22
  @function colors($key) {
38
23
  $keys: _str-split($key, ".");
39
- @return _map-deep-get($theme-map, join("colors", $keys));
24
+ @return _map-deep-get($theme, join("colors", $keys));
40
25
  }
41
26
 
42
27
  // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
43
28
  @function typography($key) {
44
29
  $keys: _str-split($key, ".");
45
- @return _map-deep-get($theme-map, join("typography", $keys));
30
+ @return _map-deep-get($theme, join("typography", $keys));
46
31
  }
47
32
 
48
33
  // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
49
34
  @function fontWeights($key) {
50
35
  $keys: _str-split($key, ".");
51
- @return _map-deep-get($theme-map, join("fontWeights", $keys));
36
+ @return _map-deep-get($theme, join("fontWeights", $keys));
52
37
  }
53
38
 
54
39
  // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
55
40
  @function space($key) {
56
41
  $keys: _str-split($key, ".");
57
- @return _map-deep-get($theme-map, join("space", $keys));
42
+ @return _map-deep-get($theme, join("space", $keys));
58
43
  }
59
44
 
60
45
  // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
61
46
  @function radii($key) {
62
47
  $keys: _str-split($key, ".");
63
- @return _map-deep-get($theme-map, join("radii", $keys));
48
+ @return _map-deep-get($theme, join("radii", $keys));
64
49
  }
65
50
 
66
51
  // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
67
52
  @function borders($key) {
68
53
  $keys: _str-split($key, ".");
69
- @return _map-deep-get($theme-map, join("borders", $keys));
54
+ @return _map-deep-get($theme, join("borders", $keys));
70
55
  }
71
56
 
72
57
  // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
73
58
  @function borderWidths($key) {
74
59
  $keys: _str-split($key, ".");
75
- @return _map-deep-get($theme-map, join("borderWidths", $keys));
60
+ @return _map-deep-get($theme, join("borderWidths", $keys));
76
61
  }
77
62
 
78
63
  // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
79
64
  @function shadows($key) {
80
65
  $keys: _str-split($key, ".");
81
- @return _map-deep-get($theme-map, join("shadows", $keys));
66
+ @return _map-deep-get($theme, join("shadows", $keys));
82
67
  }
83
68
 
84
69
  // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
85
70
  @function easing($key) {
86
71
  $keys: _str-split($key, ".");
87
- @return _map-deep-get($theme-map, join("easing", $keys));
72
+ @return _map-deep-get($theme, join("easing", $keys));
88
73
  }
89
74
 
90
75
  // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
91
76
  @function duration($key) {
92
77
  $keys: _str-split($key, ".");
93
- @return _map-deep-get($theme-map, join("duration", $keys));
78
+ @return _map-deep-get($theme, join("duration", $keys));
94
79
  }
95
80
 
96
81
  // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
104
89
  // empty array/list
105
90
  $split-arr: ();
106
91
  // first index of separator in string
107
- $index : str-index($string, $separator);
92
+ $index: str-index($string, $separator);
108
93
  // loop through string
109
94
  @while $index != null {
110
95
  // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
114
99
  // remove item and separator from string
115
100
  $string: str-slice($string, $index + 1);
116
101
  // find new index of separator
117
- $index : str-index($string, $separator);
102
+ $index: str-index($string, $separator);
118
103
  }
119
104
  // add the remaining string to list (the last item)
120
105
  $split-arr: append($split-arr, $string);
package/dist/themes/light/_themed.scss CHANGED
@@ -7,90 +7,75 @@
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
10
- $theme: map-get($light, 'default');
11
-
12
- // MIXIN
13
- // CSS properties that are theme-dependent must be wrapped in this mixin.
14
- // It will convert semantic tokens to the appropriate theme-dependent CSS property.
15
- @mixin themed() {
16
- & {
17
- $theme-map: () !global;
18
- @each $key, $submap in $theme {
19
- $value: map-get($theme, "#{$key}");
20
- $theme-map: map-merge($theme-map, ($key: $value)) !global;
21
- }
22
- @content;
23
- $theme-map: null !global;
24
- }
25
- }
10
+ $theme: map-get($light, "default");
26
11
 
27
12
  // FUNCTIONS
28
13
  // This function will allow you to get any value from the theme.
29
14
  // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
30
15
  @function t($key) {
31
16
  $keys: _str-split($key, ".");
32
- @return _map-deep-get($theme-map, $keys);
17
+ @return _map-deep-get($theme, $keys);
33
18
  }
34
19
 
35
20
  // The rest of the functions are convenience methods to get theme values for subsets of the theme.
36
21
  // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
37
22
  @function colors($key) {
38
23
  $keys: _str-split($key, ".");
39
- @return _map-deep-get($theme-map, join("colors", $keys));
24
+ @return _map-deep-get($theme, join("colors", $keys));
40
25
  }
41
26
 
42
27
  // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
43
28
  @function typography($key) {
44
29
  $keys: _str-split($key, ".");
45
- @return _map-deep-get($theme-map, join("typography", $keys));
30
+ @return _map-deep-get($theme, join("typography", $keys));
46
31
  }
47
32
 
48
33
  // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
49
34
  @function fontWeights($key) {
50
35
  $keys: _str-split($key, ".");
51
- @return _map-deep-get($theme-map, join("fontWeights", $keys));
36
+ @return _map-deep-get($theme, join("fontWeights", $keys));
52
37
  }
53
38
 
54
39
  // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
55
40
  @function space($key) {
56
41
  $keys: _str-split($key, ".");
57
- @return _map-deep-get($theme-map, join("space", $keys));
42
+ @return _map-deep-get($theme, join("space", $keys));
58
43
  }
59
44
 
60
45
  // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
61
46
  @function radii($key) {
62
47
  $keys: _str-split($key, ".");
63
- @return _map-deep-get($theme-map, join("radii", $keys));
48
+ @return _map-deep-get($theme, join("radii", $keys));
64
49
  }
65
50
 
66
51
  // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
67
52
  @function borders($key) {
68
53
  $keys: _str-split($key, ".");
69
- @return _map-deep-get($theme-map, join("borders", $keys));
54
+ @return _map-deep-get($theme, join("borders", $keys));
70
55
  }
71
56
 
72
57
  // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
73
58
  @function borderWidths($key) {
74
59
  $keys: _str-split($key, ".");
75
- @return _map-deep-get($theme-map, join("borderWidths", $keys));
60
+ @return _map-deep-get($theme, join("borderWidths", $keys));
76
61
  }
77
62
 
78
63
  // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
79
64
  @function shadows($key) {
80
65
  $keys: _str-split($key, ".");
81
- @return _map-deep-get($theme-map, join("shadows", $keys));
66
+ @return _map-deep-get($theme, join("shadows", $keys));
82
67
  }
83
68
 
84
69
  // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
85
70
  @function easing($key) {
86
71
  $keys: _str-split($key, ".");
87
- @return _map-deep-get($theme-map, join("easing", $keys));
72
+ @return _map-deep-get($theme, join("easing", $keys));
88
73
  }
89
74
 
90
75
  // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
91
76
  @function duration($key) {
92
77
  $keys: _str-split($key, ".");
93
- @return _map-deep-get($theme-map, join("duration", $keys));
78
+ @return _map-deep-get($theme, join("duration", $keys));
94
79
  }
95
80
 
96
81
  // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
104
89
  // empty array/list
105
90
  $split-arr: ();
106
91
  // first index of separator in string
107
- $index : str-index($string, $separator);
92
+ $index: str-index($string, $separator);
108
93
  // loop through string
109
94
  @while $index != null {
110
95
  // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
114
99
  // remove item and separator from string
115
100
  $string: str-slice($string, $index + 1);
116
101
  // find new index of separator
117
- $index : str-index($string, $separator);
102
+ $index: str-index($string, $separator);
118
103
  }
119
104
  // add the remaining string to list (the last item)
120
105
  $split-arr: append($split-arr, $string);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "10.0.3-menuhotfix.0",
3
+ "version": "11.0.0-beta.0",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",