@sproutsocial/racine 8.7.0 → 8.8.0-dar35-beta.1
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
CHANGED
|
@@ -42,11 +42,6 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
|
|
|
42
42
|
font-weight: bold;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
li:not(:last-child) a,
|
|
46
|
-
li:not(:last-child) button {
|
|
47
|
-
font-weight: normal;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
45
|
li:not(:last-child)::after {
|
|
51
46
|
content: "/";
|
|
52
47
|
color: ${(props) => props.theme.colors.text.body};
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
|
|
2
|
+
// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
|
|
3
|
+
|
|
4
|
+
// SET-UP
|
|
5
|
+
// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
|
|
6
|
+
@import "../../dist/themes/default.scss";
|
|
7
|
+
@import "../../dist/themes/dark.scss";
|
|
8
|
+
|
|
9
|
+
// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
|
|
10
|
+
// so we need to map-get "default" to access it.
|
|
11
|
+
$themes: (
|
|
12
|
+
light: map-get($default, "default"),
|
|
13
|
+
dark: map-get($dark, "default")
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
// MIXIN
|
|
17
|
+
// CSS properties that are theme-dependent must be wrapped in this mixin
|
|
18
|
+
@mixin themed() {
|
|
19
|
+
@each $theme, $map in $themes {
|
|
20
|
+
.theme--#{$theme} & {
|
|
21
|
+
$theme-map: () !global;
|
|
22
|
+
@each $key, $submap in $map {
|
|
23
|
+
$value: map-get(map-get($themes, $theme), "#{$key}");
|
|
24
|
+
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
|
25
|
+
}
|
|
26
|
+
@content;
|
|
27
|
+
$theme-map: null !global;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// FUNCTIONS
|
|
33
|
+
// This function will allow you to get any value from the theme.
|
|
34
|
+
// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
|
|
35
|
+
@function t($key) {
|
|
36
|
+
$keys: _string-split($key, ".");
|
|
37
|
+
@return _map-deep-get($theme-map, $keys);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// These functions are convenience methods to get theme values for subsets of the theme.
|
|
41
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
|
|
42
|
+
@function colors($key) {
|
|
43
|
+
$keys: _string-split($key, ".");
|
|
44
|
+
@return _map-deep-get($theme-map, join("colors", $keys));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
|
|
48
|
+
@function typography($key) {
|
|
49
|
+
$keys: _string-split($key, ".");
|
|
50
|
+
@return _map-deep-get($theme-map, join("typography", $keys));
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
|
|
54
|
+
@function fontWeights($key) {
|
|
55
|
+
$keys: _string-split($key, ".");
|
|
56
|
+
@return _map-deep-get($theme-map, join("fontWeights", $keys));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
|
|
60
|
+
@function space($key) {
|
|
61
|
+
$keys: _string-split($key, ".");
|
|
62
|
+
@return _map-deep-get($theme-map, join("space", $keys));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
|
|
66
|
+
@function radii($key) {
|
|
67
|
+
$keys: _string-split($key, ".");
|
|
68
|
+
@return _map-deep-get($theme-map, join("radii", $keys));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
|
|
72
|
+
@function borders($key) {
|
|
73
|
+
$keys: _string-split($key, ".");
|
|
74
|
+
@return _map-deep-get($theme-map, join("borders", $keys));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
|
|
78
|
+
@function borderWidths($key) {
|
|
79
|
+
$keys: _string-split($key, ".");
|
|
80
|
+
@return _map-deep-get($theme-map, join("borderWidths", $keys));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
|
|
84
|
+
@function shadows($key) {
|
|
85
|
+
$keys: _string-split($key, ".");
|
|
86
|
+
@return _map-deep-get($theme-map, join("shadows", $keys));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
|
|
90
|
+
@function easing($key) {
|
|
91
|
+
$keys: _string-split($key, ".");
|
|
92
|
+
@return _map-deep-get($theme-map, join("easing", $keys));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
|
|
96
|
+
@function duration($key) {
|
|
97
|
+
$keys: _string-split($key, ".");
|
|
98
|
+
@return _map-deep-get($theme-map, join("duration", $keys));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// UTILITIES
|
|
102
|
+
// Helper functions that power the functions above. Not relevant to the theme.
|
|
103
|
+
// If you import this file with @use, these functions will be excluded because they are private.
|
|
104
|
+
|
|
105
|
+
// Via https://stackoverflow.com/a/42295154
|
|
106
|
+
// Only works with a single-character separator
|
|
107
|
+
@function _string-split($string, $separator) {
|
|
108
|
+
// empty array/list
|
|
109
|
+
$split-arr: ();
|
|
110
|
+
// first index of separator in string
|
|
111
|
+
$index : str-index($string, $separator);
|
|
112
|
+
// loop through string
|
|
113
|
+
@while $index != null {
|
|
114
|
+
// get the substring from the first character to the separator
|
|
115
|
+
$item: str-slice($string, 1, $index - 1);
|
|
116
|
+
// push item to array
|
|
117
|
+
$split-arr: append($split-arr, $item);
|
|
118
|
+
// remove item and separator from string
|
|
119
|
+
$string: str-slice($string, $index + 1);
|
|
120
|
+
// find new index of separator
|
|
121
|
+
$index : str-index($string, $separator);
|
|
122
|
+
}
|
|
123
|
+
// add the remaining string to list (the last item)
|
|
124
|
+
$split-arr: append($split-arr, $string);
|
|
125
|
+
|
|
126
|
+
@return $split-arr;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
|
|
130
|
+
// Iterates over a list of keys to read multi-level maps
|
|
131
|
+
@function _map-deep-get($map, $keys) {
|
|
132
|
+
@each $key in $keys {
|
|
133
|
+
$map: map-get($map, $key);
|
|
134
|
+
}
|
|
135
|
+
@return $map;
|
|
136
|
+
}
|
|
@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
var Nav = _styledComponents.default.nav.withConfig({
|
|
11
11
|
displayName: "styles__Nav",
|
|
12
12
|
componentId: "sc-1ub1apc-0"
|
|
13
|
-
})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)
|
|
13
|
+
})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
|
|
14
14
|
return props.theme.typography[200];
|
|
15
15
|
}, function (props) {
|
|
16
16
|
return props.theme.fontFamily;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
|
|
2
|
+
// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
|
|
3
|
+
|
|
4
|
+
// SET-UP
|
|
5
|
+
// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
|
|
6
|
+
@import "../../dist/themes/default.scss";
|
|
7
|
+
@import "../../dist/themes/dark.scss";
|
|
8
|
+
|
|
9
|
+
// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
|
|
10
|
+
// so we need to map-get "default" to access it.
|
|
11
|
+
$themes: (
|
|
12
|
+
light: map-get($default, "default"),
|
|
13
|
+
dark: map-get($dark, "default")
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
// MIXIN
|
|
17
|
+
// CSS properties that are theme-dependent must be wrapped in this mixin
|
|
18
|
+
@mixin themed() {
|
|
19
|
+
@each $theme, $map in $themes {
|
|
20
|
+
.theme--#{$theme} & {
|
|
21
|
+
$theme-map: () !global;
|
|
22
|
+
@each $key, $submap in $map {
|
|
23
|
+
$value: map-get(map-get($themes, $theme), "#{$key}");
|
|
24
|
+
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
|
25
|
+
}
|
|
26
|
+
@content;
|
|
27
|
+
$theme-map: null !global;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// FUNCTIONS
|
|
33
|
+
// This function will allow you to get any value from the theme.
|
|
34
|
+
// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
|
|
35
|
+
@function t($key) {
|
|
36
|
+
$keys: _string-split($key, ".");
|
|
37
|
+
@return _map-deep-get($theme-map, $keys);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// These functions are convenience methods to get theme values for subsets of the theme.
|
|
41
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
|
|
42
|
+
@function colors($key) {
|
|
43
|
+
$keys: _string-split($key, ".");
|
|
44
|
+
@return _map-deep-get($theme-map, join("colors", $keys));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
|
|
48
|
+
@function typography($key) {
|
|
49
|
+
$keys: _string-split($key, ".");
|
|
50
|
+
@return _map-deep-get($theme-map, join("typography", $keys));
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
|
|
54
|
+
@function fontWeights($key) {
|
|
55
|
+
$keys: _string-split($key, ".");
|
|
56
|
+
@return _map-deep-get($theme-map, join("fontWeights", $keys));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
|
|
60
|
+
@function space($key) {
|
|
61
|
+
$keys: _string-split($key, ".");
|
|
62
|
+
@return _map-deep-get($theme-map, join("space", $keys));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
|
|
66
|
+
@function radii($key) {
|
|
67
|
+
$keys: _string-split($key, ".");
|
|
68
|
+
@return _map-deep-get($theme-map, join("radii", $keys));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
|
|
72
|
+
@function borders($key) {
|
|
73
|
+
$keys: _string-split($key, ".");
|
|
74
|
+
@return _map-deep-get($theme-map, join("borders", $keys));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
|
|
78
|
+
@function borderWidths($key) {
|
|
79
|
+
$keys: _string-split($key, ".");
|
|
80
|
+
@return _map-deep-get($theme-map, join("borderWidths", $keys));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
|
|
84
|
+
@function shadows($key) {
|
|
85
|
+
$keys: _string-split($key, ".");
|
|
86
|
+
@return _map-deep-get($theme-map, join("shadows", $keys));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
|
|
90
|
+
@function easing($key) {
|
|
91
|
+
$keys: _string-split($key, ".");
|
|
92
|
+
@return _map-deep-get($theme-map, join("easing", $keys));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
|
|
96
|
+
@function duration($key) {
|
|
97
|
+
$keys: _string-split($key, ".");
|
|
98
|
+
@return _map-deep-get($theme-map, join("duration", $keys));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// UTILITIES
|
|
102
|
+
// Helper functions that power the functions above. Not relevant to the theme.
|
|
103
|
+
// If you import this file with @use, these functions will be excluded because they are private.
|
|
104
|
+
|
|
105
|
+
// Via https://stackoverflow.com/a/42295154
|
|
106
|
+
// Only works with a single-character separator
|
|
107
|
+
@function _string-split($string, $separator) {
|
|
108
|
+
// empty array/list
|
|
109
|
+
$split-arr: ();
|
|
110
|
+
// first index of separator in string
|
|
111
|
+
$index : str-index($string, $separator);
|
|
112
|
+
// loop through string
|
|
113
|
+
@while $index != null {
|
|
114
|
+
// get the substring from the first character to the separator
|
|
115
|
+
$item: str-slice($string, 1, $index - 1);
|
|
116
|
+
// push item to array
|
|
117
|
+
$split-arr: append($split-arr, $item);
|
|
118
|
+
// remove item and separator from string
|
|
119
|
+
$string: str-slice($string, $index + 1);
|
|
120
|
+
// find new index of separator
|
|
121
|
+
$index : str-index($string, $separator);
|
|
122
|
+
}
|
|
123
|
+
// add the remaining string to list (the last item)
|
|
124
|
+
$split-arr: append($split-arr, $string);
|
|
125
|
+
|
|
126
|
+
@return $split-arr;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
|
|
130
|
+
// Iterates over a list of keys to read multi-level maps
|
|
131
|
+
@function _map-deep-get($map, $keys) {
|
|
132
|
+
@each $key in $keys {
|
|
133
|
+
$map: map-get($map, $key);
|
|
134
|
+
}
|
|
135
|
+
@return $map;
|
|
136
|
+
}
|
package/lib/Breadcrumb/styles.js
CHANGED
|
@@ -2,7 +2,7 @@ import styled from "styled-components";
|
|
|
2
2
|
var Nav = styled.nav.withConfig({
|
|
3
3
|
displayName: "styles__Nav",
|
|
4
4
|
componentId: "sc-1ub1apc-0"
|
|
5
|
-
})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)
|
|
5
|
+
})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
|
|
6
6
|
return props.theme.typography[200];
|
|
7
7
|
}, function (props) {
|
|
8
8
|
return props.theme.fontFamily;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/racine",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.8.0-dar35-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"__flow__",
|
|
@@ -52,16 +52,13 @@
|
|
|
52
52
|
},
|
|
53
53
|
"lint-staged": {
|
|
54
54
|
"**/*.js": [
|
|
55
|
-
"eslint --fix"
|
|
56
|
-
"git add"
|
|
55
|
+
"eslint --fix"
|
|
57
56
|
],
|
|
58
57
|
"*.scss": [
|
|
59
|
-
"stylelint --fix"
|
|
60
|
-
"git add"
|
|
58
|
+
"stylelint --fix"
|
|
61
59
|
],
|
|
62
60
|
"icons/*.svg": [
|
|
63
|
-
"yarn icon-lint write"
|
|
64
|
-
"git add"
|
|
61
|
+
"yarn icon-lint write"
|
|
65
62
|
]
|
|
66
63
|
},
|
|
67
64
|
"dependencies": {
|