@sproutsocial/racine 8.8.0-dar35-beta.1 → 8.8.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.
- package/CHANGELOG.md +10 -0
- package/__flow__/Drawer/index.stories.js +3 -3
- package/__flow__/themes/_themes.scss +19 -17
- package/dist/themes/_themes.scss +19 -17
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -51,7 +51,7 @@ const DrawerComponent = ({ direction, offset }) => {
|
|
|
51
51
|
padding={300}
|
|
52
52
|
>
|
|
53
53
|
<Button onClick={onOpen}>
|
|
54
|
-
<Icon color="
|
|
54
|
+
<Icon color="icon.inverse" name="notifications" />
|
|
55
55
|
</Button>
|
|
56
56
|
</Box>
|
|
57
57
|
<Drawer
|
|
@@ -105,10 +105,10 @@ const NectarDrawerComponent = ({ direction, offset }) => {
|
|
|
105
105
|
<Button
|
|
106
106
|
onClick={isNotificationsOpen ? closeNotifications : openNotifications}
|
|
107
107
|
>
|
|
108
|
-
<Icon color="
|
|
108
|
+
<Icon color="icon.base" name="notifications" />
|
|
109
109
|
</Button>
|
|
110
110
|
<Button onClick={isPoplarOpen ? closePoplar : openPoplar} mt={400}>
|
|
111
|
-
<Icon color="
|
|
111
|
+
<Icon color="icon.base" name="link" />
|
|
112
112
|
</Button>
|
|
113
113
|
</Box>
|
|
114
114
|
<Drawer
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
|
|
10
10
|
// so we need to map-get "default" to access it.
|
|
11
11
|
$themes: (
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
light: map-get($default, "default"),
|
|
13
|
+
dark: map-get($dark, "default")
|
|
14
14
|
);
|
|
15
15
|
|
|
16
16
|
// MIXIN
|
|
@@ -33,68 +33,68 @@ $themes: (
|
|
|
33
33
|
// This function will allow you to get any value from the theme.
|
|
34
34
|
// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
|
|
35
35
|
@function t($key) {
|
|
36
|
-
$keys:
|
|
36
|
+
$keys: _str-split($key, ".");
|
|
37
37
|
@return _map-deep-get($theme-map, $keys);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
//
|
|
40
|
+
// The rest of the functions are convenience methods to get theme values for subsets of the theme.
|
|
41
41
|
// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
|
|
42
42
|
@function colors($key) {
|
|
43
|
-
$keys:
|
|
43
|
+
$keys: _str-split($key, ".");
|
|
44
44
|
@return _map-deep-get($theme-map, join("colors", $keys));
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
|
|
48
48
|
@function typography($key) {
|
|
49
|
-
$keys:
|
|
49
|
+
$keys: _str-split($key, ".");
|
|
50
50
|
@return _map-deep-get($theme-map, join("typography", $keys));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
|
|
54
54
|
@function fontWeights($key) {
|
|
55
|
-
$keys:
|
|
55
|
+
$keys: _str-split($key, ".");
|
|
56
56
|
@return _map-deep-get($theme-map, join("fontWeights", $keys));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
|
|
60
60
|
@function space($key) {
|
|
61
|
-
$keys:
|
|
61
|
+
$keys: _str-split($key, ".");
|
|
62
62
|
@return _map-deep-get($theme-map, join("space", $keys));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
|
|
66
66
|
@function radii($key) {
|
|
67
|
-
$keys:
|
|
67
|
+
$keys: _str-split($key, ".");
|
|
68
68
|
@return _map-deep-get($theme-map, join("radii", $keys));
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
|
|
72
72
|
@function borders($key) {
|
|
73
|
-
$keys:
|
|
73
|
+
$keys: _str-split($key, ".");
|
|
74
74
|
@return _map-deep-get($theme-map, join("borders", $keys));
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
|
|
78
78
|
@function borderWidths($key) {
|
|
79
|
-
$keys:
|
|
79
|
+
$keys: _str-split($key, ".");
|
|
80
80
|
@return _map-deep-get($theme-map, join("borderWidths", $keys));
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
|
|
84
84
|
@function shadows($key) {
|
|
85
|
-
$keys:
|
|
85
|
+
$keys: _str-split($key, ".");
|
|
86
86
|
@return _map-deep-get($theme-map, join("shadows", $keys));
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
|
|
90
90
|
@function easing($key) {
|
|
91
|
-
$keys:
|
|
91
|
+
$keys: _str-split($key, ".");
|
|
92
92
|
@return _map-deep-get($theme-map, join("easing", $keys));
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
|
|
96
96
|
@function duration($key) {
|
|
97
|
-
$keys:
|
|
97
|
+
$keys: _str-split($key, ".");
|
|
98
98
|
@return _map-deep-get($theme-map, join("duration", $keys));
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -103,8 +103,9 @@ $themes: (
|
|
|
103
103
|
// If you import this file with @use, these functions will be excluded because they are private.
|
|
104
104
|
|
|
105
105
|
// Via https://stackoverflow.com/a/42295154
|
|
106
|
-
//
|
|
107
|
-
|
|
106
|
+
// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
|
|
107
|
+
// Only works with a single-character separator.
|
|
108
|
+
@function _str-split($string, $separator) {
|
|
108
109
|
// empty array/list
|
|
109
110
|
$split-arr: ();
|
|
110
111
|
// first index of separator in string
|
|
@@ -127,7 +128,8 @@ $themes: (
|
|
|
127
128
|
}
|
|
128
129
|
|
|
129
130
|
// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
|
|
130
|
-
// Iterates over a list of keys to read multi-level maps
|
|
131
|
+
// Iterates over a list of keys to read multi-level maps.
|
|
132
|
+
// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
|
|
131
133
|
@function _map-deep-get($map, $keys) {
|
|
132
134
|
@each $key in $keys {
|
|
133
135
|
$map: map-get($map, $key);
|
package/dist/themes/_themes.scss
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
|
|
10
10
|
// so we need to map-get "default" to access it.
|
|
11
11
|
$themes: (
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
light: map-get($default, "default"),
|
|
13
|
+
dark: map-get($dark, "default")
|
|
14
14
|
);
|
|
15
15
|
|
|
16
16
|
// MIXIN
|
|
@@ -33,68 +33,68 @@ $themes: (
|
|
|
33
33
|
// This function will allow you to get any value from the theme.
|
|
34
34
|
// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
|
|
35
35
|
@function t($key) {
|
|
36
|
-
$keys:
|
|
36
|
+
$keys: _str-split($key, ".");
|
|
37
37
|
@return _map-deep-get($theme-map, $keys);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
//
|
|
40
|
+
// The rest of the functions are convenience methods to get theme values for subsets of the theme.
|
|
41
41
|
// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
|
|
42
42
|
@function colors($key) {
|
|
43
|
-
$keys:
|
|
43
|
+
$keys: _str-split($key, ".");
|
|
44
44
|
@return _map-deep-get($theme-map, join("colors", $keys));
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
|
|
48
48
|
@function typography($key) {
|
|
49
|
-
$keys:
|
|
49
|
+
$keys: _str-split($key, ".");
|
|
50
50
|
@return _map-deep-get($theme-map, join("typography", $keys));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
|
|
54
54
|
@function fontWeights($key) {
|
|
55
|
-
$keys:
|
|
55
|
+
$keys: _str-split($key, ".");
|
|
56
56
|
@return _map-deep-get($theme-map, join("fontWeights", $keys));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
|
|
60
60
|
@function space($key) {
|
|
61
|
-
$keys:
|
|
61
|
+
$keys: _str-split($key, ".");
|
|
62
62
|
@return _map-deep-get($theme-map, join("space", $keys));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
|
|
66
66
|
@function radii($key) {
|
|
67
|
-
$keys:
|
|
67
|
+
$keys: _str-split($key, ".");
|
|
68
68
|
@return _map-deep-get($theme-map, join("radii", $keys));
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
|
|
72
72
|
@function borders($key) {
|
|
73
|
-
$keys:
|
|
73
|
+
$keys: _str-split($key, ".");
|
|
74
74
|
@return _map-deep-get($theme-map, join("borders", $keys));
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
|
|
78
78
|
@function borderWidths($key) {
|
|
79
|
-
$keys:
|
|
79
|
+
$keys: _str-split($key, ".");
|
|
80
80
|
@return _map-deep-get($theme-map, join("borderWidths", $keys));
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
|
|
84
84
|
@function shadows($key) {
|
|
85
|
-
$keys:
|
|
85
|
+
$keys: _str-split($key, ".");
|
|
86
86
|
@return _map-deep-get($theme-map, join("shadows", $keys));
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
|
|
90
90
|
@function easing($key) {
|
|
91
|
-
$keys:
|
|
91
|
+
$keys: _str-split($key, ".");
|
|
92
92
|
@return _map-deep-get($theme-map, join("easing", $keys));
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
|
|
96
96
|
@function duration($key) {
|
|
97
|
-
$keys:
|
|
97
|
+
$keys: _str-split($key, ".");
|
|
98
98
|
@return _map-deep-get($theme-map, join("duration", $keys));
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -103,8 +103,9 @@ $themes: (
|
|
|
103
103
|
// If you import this file with @use, these functions will be excluded because they are private.
|
|
104
104
|
|
|
105
105
|
// Via https://stackoverflow.com/a/42295154
|
|
106
|
-
//
|
|
107
|
-
|
|
106
|
+
// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
|
|
107
|
+
// Only works with a single-character separator.
|
|
108
|
+
@function _str-split($string, $separator) {
|
|
108
109
|
// empty array/list
|
|
109
110
|
$split-arr: ();
|
|
110
111
|
// first index of separator in string
|
|
@@ -127,7 +128,8 @@ $themes: (
|
|
|
127
128
|
}
|
|
128
129
|
|
|
129
130
|
// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
|
|
130
|
-
// Iterates over a list of keys to read multi-level maps
|
|
131
|
+
// Iterates over a list of keys to read multi-level maps.
|
|
132
|
+
// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
|
|
131
133
|
@function _map-deep-get($map, $keys) {
|
|
132
134
|
@each $key in $keys {
|
|
133
135
|
$map: map-get($map, $key);
|