richie-education 2.10.0 → 2.11.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/js/data/useSession/index.tsx +20 -1
- package/js/data/useSession/no-authentication.spec.tsx +47 -0
- package/package.json +24 -24
- package/scss/colors/_gradients.scss +27 -0
- package/scss/colors/_palette.scss +31 -0
- package/scss/colors/_schemes.scss +127 -0
- package/scss/{settings/_colors.scss → colors/_theme.scss} +9 -184
- package/scss/settings/_variables.scss +5 -2
- package/scss/tools/_colors.scss +56 -0
|
@@ -39,7 +39,26 @@ export const Session = createContext<SessionContext>({} as any);
|
|
|
39
39
|
* @param user the current user state. Read below to see possible states
|
|
40
40
|
* @param destroy set Session to undefined then make a request to logout user from OpenEdX
|
|
41
41
|
*/
|
|
42
|
-
export const SessionProvider = ({ children }: PropsWithChildren<
|
|
42
|
+
export const SessionProvider = ({ children }: PropsWithChildren<{}>) => {
|
|
43
|
+
// Make sure there is an authentication backend before attempting to use it
|
|
44
|
+
// to provide a session.
|
|
45
|
+
if (AuthenticationApi) {
|
|
46
|
+
return <SessionProviderInner>{children}</SessionProviderInner>;
|
|
47
|
+
} else {
|
|
48
|
+
const value = useMemo(() => {
|
|
49
|
+
const destroy = () => {
|
|
50
|
+
throw new Error('No authentication backend provided.');
|
|
51
|
+
};
|
|
52
|
+
const login = destroy;
|
|
53
|
+
const register = destroy;
|
|
54
|
+
return { destroy, login, register, user: null };
|
|
55
|
+
}, []);
|
|
56
|
+
|
|
57
|
+
return <Session.Provider value={value}>{children}</Session.Provider>;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export const SessionProviderInner = ({ children }: PropsWithChildren<{}>) => {
|
|
43
62
|
/**
|
|
44
63
|
* `user` is:
|
|
45
64
|
* - `undefined` when we have not made the `whoami` request yet;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
2
|
+
import fetchMock from 'fetch-mock';
|
|
3
|
+
import { ContextFactory as mockContextFactory } from 'utils/test/factories';
|
|
4
|
+
import createQueryClient from 'utils/react-query/createQueryClient';
|
|
5
|
+
import { Maybe, Nullable } from 'types/utils';
|
|
6
|
+
import { User } from 'types/User';
|
|
7
|
+
import { SessionProvider, useSession } from '.';
|
|
8
|
+
|
|
9
|
+
jest.mock('utils/context', () => ({
|
|
10
|
+
__esModule: true,
|
|
11
|
+
default: mockContextFactory({
|
|
12
|
+
authentication: undefined,
|
|
13
|
+
}).generate(),
|
|
14
|
+
}));
|
|
15
|
+
|
|
16
|
+
describe('useSession', () => {
|
|
17
|
+
const queryClient = createQueryClient({ persistor: true });
|
|
18
|
+
|
|
19
|
+
beforeEach(() => {
|
|
20
|
+
jest.useFakeTimers('modern');
|
|
21
|
+
queryClient.clear();
|
|
22
|
+
fetchMock.restore();
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
afterEach(() => {
|
|
26
|
+
jest.clearAllTimers();
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('provides a null user if there is no authentication backend', async () => {
|
|
30
|
+
let userInComponent: Maybe<Nullable<User>>;
|
|
31
|
+
|
|
32
|
+
const Component = () => {
|
|
33
|
+
const { user } = useSession();
|
|
34
|
+
userInComponent = user;
|
|
35
|
+
return <span>component rendered</span>;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
render(
|
|
39
|
+
<SessionProvider>
|
|
40
|
+
<Component />
|
|
41
|
+
</SessionProvider>,
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
expect(userInComponent).toBeNull();
|
|
45
|
+
screen.getByText('component rendered');
|
|
46
|
+
});
|
|
47
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "richie-education",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.11.0",
|
|
4
4
|
"description": "A CMS to build learning portals for Open Education",
|
|
5
5
|
"main": "sandbox/manage.py",
|
|
6
6
|
"scripts": {
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
"not dead"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@babel/core": "7.16.
|
|
38
|
+
"@babel/core": "7.16.7",
|
|
39
39
|
"@babel/plugin-syntax-dynamic-import": "7.8.3",
|
|
40
|
-
"@babel/plugin-transform-modules-commonjs": "7.16.
|
|
41
|
-
"@babel/preset-env": "7.16.
|
|
42
|
-
"@babel/preset-react": "7.16.
|
|
43
|
-
"@babel/preset-typescript": "7.16.
|
|
40
|
+
"@babel/plugin-transform-modules-commonjs": "7.16.7",
|
|
41
|
+
"@babel/preset-env": "7.16.7",
|
|
42
|
+
"@babel/preset-react": "7.16.7",
|
|
43
|
+
"@babel/preset-typescript": "7.16.7",
|
|
44
44
|
"@formatjs/cli": "4.5.0",
|
|
45
|
-
"@formatjs/intl-relativetimeformat": "9.
|
|
45
|
+
"@formatjs/intl-relativetimeformat": "9.4.1",
|
|
46
46
|
"@helpscout/helix": "0.2.0",
|
|
47
47
|
"@sentry/browser": "6.16.1",
|
|
48
48
|
"@sentry/types": "6.16.1",
|
|
@@ -53,40 +53,40 @@
|
|
|
53
53
|
"@types/faker": "5.5.9",
|
|
54
54
|
"@types/fetch-mock": "7.3.5",
|
|
55
55
|
"@types/iframe-resizer": "3.5.9",
|
|
56
|
-
"@types/jest": "27.0
|
|
56
|
+
"@types/jest": "27.4.0",
|
|
57
57
|
"@types/js-cookie": "3.0.1",
|
|
58
58
|
"@types/lodash-es": "4.17.5",
|
|
59
59
|
"@types/query-string": "6.3.0",
|
|
60
|
-
"@types/react": "17.0.
|
|
60
|
+
"@types/react": "17.0.38",
|
|
61
61
|
"@types/react-autosuggest": "10.1.5",
|
|
62
62
|
"@types/react-dom": "17.0.11",
|
|
63
63
|
"@types/react-modal": "3.13.1",
|
|
64
|
-
"@typescript-eslint/eslint-plugin": "5.
|
|
65
|
-
"@typescript-eslint/parser": "5.
|
|
66
|
-
"babel-jest": "27.4.
|
|
64
|
+
"@typescript-eslint/eslint-plugin": "5.8.1",
|
|
65
|
+
"@typescript-eslint/parser": "5.8.1",
|
|
66
|
+
"babel-jest": "27.4.5",
|
|
67
67
|
"babel-loader": "8.2.3",
|
|
68
68
|
"babel-plugin-react-intl": "8.2.25",
|
|
69
69
|
"bootstrap": ">=4.6.0 <5",
|
|
70
70
|
"cljs-merge": "1.1.1",
|
|
71
|
-
"core-js": "3.
|
|
71
|
+
"core-js": "3.20.2",
|
|
72
72
|
"downshift": "6.1.7",
|
|
73
73
|
"eslint": "8.3.0",
|
|
74
|
-
"eslint-config-airbnb": "19.0.
|
|
74
|
+
"eslint-config-airbnb": "19.0.4",
|
|
75
75
|
"eslint-config-airbnb-typescript": "16.1.0",
|
|
76
76
|
"eslint-config-prettier": "8.3.0",
|
|
77
77
|
"eslint-plugin-compat": "4.0.0",
|
|
78
|
-
"eslint-plugin-formatjs": "2.
|
|
79
|
-
"eslint-plugin-import": "2.25.
|
|
78
|
+
"eslint-plugin-formatjs": "2.20.1",
|
|
79
|
+
"eslint-plugin-import": "2.25.4",
|
|
80
80
|
"eslint-plugin-jsx-a11y": "6.5.1",
|
|
81
81
|
"eslint-plugin-prettier": "4.0.0",
|
|
82
|
-
"eslint-plugin-react": "7.
|
|
82
|
+
"eslint-plugin-react": "7.28.0",
|
|
83
83
|
"eslint-plugin-react-hooks": "4.3.0",
|
|
84
84
|
"faker": "5.5.3",
|
|
85
85
|
"fetch-mock": "9.11.0",
|
|
86
86
|
"glob": "7.2.0",
|
|
87
87
|
"iframe-resizer": "4.3.2",
|
|
88
88
|
"intl-pluralrules": "1.3.1",
|
|
89
|
-
"jest": "27.4.
|
|
89
|
+
"jest": "27.4.5",
|
|
90
90
|
"js-cookie": "3.0.1",
|
|
91
91
|
"lodash-es": "4.17.21",
|
|
92
92
|
"mdn-polyfills": "5.20.0",
|
|
@@ -97,19 +97,19 @@
|
|
|
97
97
|
"react": "17.0.2",
|
|
98
98
|
"react-autosuggest": "10.1.0",
|
|
99
99
|
"react-dom": "17.0.2",
|
|
100
|
-
"react-intl": "5.
|
|
100
|
+
"react-intl": "5.24.1",
|
|
101
101
|
"react-modal": "3.14.4",
|
|
102
|
-
"react-query": "3.34.
|
|
103
|
-
"sass": "1.45.
|
|
102
|
+
"react-query": "3.34.7",
|
|
103
|
+
"sass": "1.45.2",
|
|
104
104
|
"source-map-loader": "3.0.0",
|
|
105
|
-
"typescript": "4.5.
|
|
105
|
+
"typescript": "4.5.4",
|
|
106
106
|
"webpack": "5.65.0",
|
|
107
107
|
"webpack-cli": "4.9.1",
|
|
108
108
|
"whatwg-fetch": "3.6.2",
|
|
109
109
|
"xhr-mock": "2.5.1",
|
|
110
|
-
"yargs": "17.3.
|
|
110
|
+
"yargs": "17.3.1"
|
|
111
111
|
},
|
|
112
112
|
"resolutions": {
|
|
113
|
-
"@types/react": "17.0.
|
|
113
|
+
"@types/react": "17.0.38"
|
|
114
114
|
}
|
|
115
115
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// Named gradients
|
|
2
|
+
// ---------
|
|
3
|
+
$neutral-gradient: linear-gradient(
|
|
4
|
+
to top,
|
|
5
|
+
r-color('silver') 0,
|
|
6
|
+
r-color('smoke') 13rem,
|
|
7
|
+
r-color('white') 14rem,
|
|
8
|
+
r-color('white')
|
|
9
|
+
) !default;
|
|
10
|
+
$middle-gradient: linear-gradient(285deg, r-color('grey59') 3%, r-color('grey87') 98%) !default;
|
|
11
|
+
$dark-gradient: linear-gradient(285deg, r-color('grey32') 3%, r-color('grey59') 98%) !default;
|
|
12
|
+
$white-mask-gradient: (
|
|
13
|
+
linear-gradient(
|
|
14
|
+
to right,
|
|
15
|
+
r-color('white') 0%,
|
|
16
|
+
rgba(r-color('white'), 0.85) 15%,
|
|
17
|
+
rgba(r-color('white'), 0.15) 60%,
|
|
18
|
+
rgba(r-color('white'), 0) 70%
|
|
19
|
+
),
|
|
20
|
+
linear-gradient(
|
|
21
|
+
to left,
|
|
22
|
+
r-color('white') 0%,
|
|
23
|
+
rgba(r-color('white'), 0.85) 15%,
|
|
24
|
+
rgba(r-color('white'), 0.15) 60%,
|
|
25
|
+
rgba(r-color('white'), 0) 70%
|
|
26
|
+
)
|
|
27
|
+
) !default;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
///
|
|
2
|
+
/// Color palette and schemes
|
|
3
|
+
///
|
|
4
|
+
|
|
5
|
+
// Named colors
|
|
6
|
+
// ---------
|
|
7
|
+
$palette: (
|
|
8
|
+
'black': #090909,
|
|
9
|
+
'dark-grey': #232323,
|
|
10
|
+
'charcoal': #29303b,
|
|
11
|
+
'slate-grey': #686868,
|
|
12
|
+
'battleship-grey': #686f7a,
|
|
13
|
+
'light-grey': #d2d2d2,
|
|
14
|
+
'silver': #d5dbe0,
|
|
15
|
+
'azure2': #eceff1,
|
|
16
|
+
'smoke': #fdfdfd,
|
|
17
|
+
'white': #ffffff,
|
|
18
|
+
'denim': #0067b7,
|
|
19
|
+
'firebrick6': #f72c30,
|
|
20
|
+
'purplish-grey': #726c74,
|
|
21
|
+
'grey32': #525151,
|
|
22
|
+
'grey59': #969696,
|
|
23
|
+
'grey87': #dfdfdf,
|
|
24
|
+
'indianred3': #df484b,
|
|
25
|
+
'midnightblue': #141b2c,
|
|
26
|
+
) !default;
|
|
27
|
+
|
|
28
|
+
// On a Richie child project you can easily change a specific value using:
|
|
29
|
+
// $palette: recursive-map-merge($palette, (
|
|
30
|
+
// 'firebrick6': #123,
|
|
31
|
+
// ));
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
// Basic color schemes
|
|
2
|
+
// ---------
|
|
3
|
+
$purplish-grey-scheme: (
|
|
4
|
+
font-color: r-color('white'),
|
|
5
|
+
link-color: r-color('firebrick6'),
|
|
6
|
+
svg-color: r-color('white'),
|
|
7
|
+
background: r-color('purplish-grey'),
|
|
8
|
+
hover-font-color: r-color('white'),
|
|
9
|
+
hover-background: r-color('purplish-grey'),
|
|
10
|
+
) !default;
|
|
11
|
+
$battleship-grey-scheme: (
|
|
12
|
+
font-color: r-color('white'),
|
|
13
|
+
link-color: r-color('firebrick6'),
|
|
14
|
+
svg-color: r-color('white'),
|
|
15
|
+
background: r-color('battleship-grey'),
|
|
16
|
+
hover-font-color: r-color('white'),
|
|
17
|
+
hover-background: r-color('battleship-grey'),
|
|
18
|
+
) !default;
|
|
19
|
+
$indianred3-scheme: (
|
|
20
|
+
font-color: r-color('white'),
|
|
21
|
+
link-color: r-color('light-grey'),
|
|
22
|
+
svg-color: r-color('white'),
|
|
23
|
+
background: r-color('indianred3'),
|
|
24
|
+
hover-font-color: r-color('white'),
|
|
25
|
+
hover-background: r-color('firebrick6'),
|
|
26
|
+
) !default;
|
|
27
|
+
$firebrick6-scheme: (
|
|
28
|
+
font-color: r-color('white'),
|
|
29
|
+
link-color: r-color('light-grey'),
|
|
30
|
+
svg-color: r-color('white'),
|
|
31
|
+
background: r-color('firebrick6'),
|
|
32
|
+
hover-font-color: r-color('white'),
|
|
33
|
+
hover-background: r-color('indianred3'),
|
|
34
|
+
) !default;
|
|
35
|
+
$white-scheme: (
|
|
36
|
+
font-color: r-color('black'),
|
|
37
|
+
h1-color: r-color('black'),
|
|
38
|
+
h2-color: r-color('black'),
|
|
39
|
+
svg-color: r-color('black'),
|
|
40
|
+
background: r-color('white'),
|
|
41
|
+
hover-font-color: r-color('firebrick6'),
|
|
42
|
+
hover-background: darken(r-color('white'), 8%),
|
|
43
|
+
) !default;
|
|
44
|
+
$smoke-scheme: (
|
|
45
|
+
font-color: r-color('firebrick6'),
|
|
46
|
+
svg-color: r-color('firebrick6'),
|
|
47
|
+
background: r-color('smoke'),
|
|
48
|
+
hover-font-color: r-color('indianred3'),
|
|
49
|
+
hover-background: r-color('white'),
|
|
50
|
+
) !default;
|
|
51
|
+
$light-grey-scheme: (
|
|
52
|
+
font-color: r-color('black'),
|
|
53
|
+
h1-color: r-color('black'),
|
|
54
|
+
h2-color: r-color('black'),
|
|
55
|
+
svg-color: r-color('black'),
|
|
56
|
+
background: r-color('light-grey'),
|
|
57
|
+
hover-font-color: r-color('firebrick6'),
|
|
58
|
+
hover-background: r-color('battleship-grey'),
|
|
59
|
+
) !default;
|
|
60
|
+
$azure2: (
|
|
61
|
+
font-color: r-color('black'),
|
|
62
|
+
h1-color: r-color('black'),
|
|
63
|
+
h2-color: r-color('black'),
|
|
64
|
+
svg-color: r-color('black'),
|
|
65
|
+
background: r-color('azure2'),
|
|
66
|
+
hover-font-color: r-color('firebrick6'),
|
|
67
|
+
hover-background: r-color('battleship-grey'),
|
|
68
|
+
) !default;
|
|
69
|
+
$clouds-scheme: (
|
|
70
|
+
background: bottom left / 100% 70% no-repeat r-color('smoke')
|
|
71
|
+
url('../../richie/images/components/clouds.jpg'),
|
|
72
|
+
) !default;
|
|
73
|
+
$waves-scheme: (
|
|
74
|
+
background: top 1vw left 50% / 98% 7vw no-repeat r-color('white')
|
|
75
|
+
url('../../richie/images/components/waves.svg'),
|
|
76
|
+
) !default;
|
|
77
|
+
$transparent-dark-scheme: (
|
|
78
|
+
font-color: r-color('black'),
|
|
79
|
+
h1-color: r-color('black'),
|
|
80
|
+
h2-color: r-color('black'),
|
|
81
|
+
link-color: r-color('firebrick6'),
|
|
82
|
+
svg-color: r-color('black'),
|
|
83
|
+
background: transparent,
|
|
84
|
+
border-color: r-color('black'),
|
|
85
|
+
hover-font-color: r-color('firebrick6'),
|
|
86
|
+
hover-svg-color: r-color('firebrick6'),
|
|
87
|
+
hover-border-color: r-color('firebrick6'),
|
|
88
|
+
) !default;
|
|
89
|
+
$neutral-gradient-scheme: (
|
|
90
|
+
font-color: r-color('black'),
|
|
91
|
+
link-color: r-color('firebrick6'),
|
|
92
|
+
svg-color: r-color('black'),
|
|
93
|
+
background: $neutral-gradient,
|
|
94
|
+
) !default;
|
|
95
|
+
$middle-gradient-scheme: (
|
|
96
|
+
font-color: r-color('black'),
|
|
97
|
+
link-color: r-color('black'),
|
|
98
|
+
svg-color: r-color('black'),
|
|
99
|
+
background: $middle-gradient,
|
|
100
|
+
hover-font-color: r-color('black'),
|
|
101
|
+
) !default;
|
|
102
|
+
$dark-gradient-scheme: (
|
|
103
|
+
font-color: r-color('black'),
|
|
104
|
+
h1-color: r-color('white'),
|
|
105
|
+
h2-color: r-color('white'),
|
|
106
|
+
link-color: r-color('black'),
|
|
107
|
+
svg-color: r-color('black'),
|
|
108
|
+
background: $dark-gradient,
|
|
109
|
+
hover-font-color: r-color('black'),
|
|
110
|
+
) !default;
|
|
111
|
+
$dark-gradient-alt-scheme: map-merge(
|
|
112
|
+
$dark-gradient-scheme,
|
|
113
|
+
(
|
|
114
|
+
font-color: r-color('white'),
|
|
115
|
+
link-color: r-color('white'),
|
|
116
|
+
svg-color: r-color('white'),
|
|
117
|
+
hover-font-color: r-color('white'),
|
|
118
|
+
)
|
|
119
|
+
) !default;
|
|
120
|
+
$white-mask-gradient-scheme: (
|
|
121
|
+
font-color: r-color('black'),
|
|
122
|
+
h1-color: r-color('black'),
|
|
123
|
+
h2-color: r-color('black'),
|
|
124
|
+
svg-color: r-color('black'),
|
|
125
|
+
background: $white-mask-gradient,
|
|
126
|
+
hover-font-color: r-color('firebrick6'),
|
|
127
|
+
) !default;
|
|
@@ -1,187 +1,5 @@
|
|
|
1
|
-
///
|
|
2
|
-
/// Color palette and schemes
|
|
3
|
-
///
|
|
4
|
-
|
|
5
|
-
// Named colors
|
|
6
|
-
// ---------
|
|
7
|
-
$palette: (
|
|
8
|
-
'black': #090909,
|
|
9
|
-
'dark-grey': #232323,
|
|
10
|
-
'charcoal': #29303b,
|
|
11
|
-
'slate-grey': #686868,
|
|
12
|
-
'battleship-grey': #686f7a,
|
|
13
|
-
'light-grey': #d2d2d2,
|
|
14
|
-
'silver': #d5dbe0,
|
|
15
|
-
'azure2': #eceff1,
|
|
16
|
-
'smoke': #fdfdfd,
|
|
17
|
-
'white': #ffffff,
|
|
18
|
-
'denim': #0067b7,
|
|
19
|
-
'firebrick6': #f72c30,
|
|
20
|
-
'purplish-grey': #726c74,
|
|
21
|
-
'grey32': #525151,
|
|
22
|
-
'grey59': #969696,
|
|
23
|
-
'grey87': #dfdfdf,
|
|
24
|
-
'indianred3': #df484b,
|
|
25
|
-
'midnightblue': #141b2c,
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
// Named gradients
|
|
29
|
-
// ---------
|
|
30
|
-
$neutral-gradient: linear-gradient(
|
|
31
|
-
to top,
|
|
32
|
-
r-color('silver') 0,
|
|
33
|
-
r-color('smoke') 13rem,
|
|
34
|
-
r-color('white') 14rem,
|
|
35
|
-
r-color('white')
|
|
36
|
-
);
|
|
37
|
-
$middle-gradient: linear-gradient(285deg, r-color('grey59') 3%, r-color('grey87') 98%);
|
|
38
|
-
$dark-gradient: linear-gradient(285deg, r-color('grey32') 3%, r-color('grey59') 98%);
|
|
39
|
-
$white-mask-gradient: (
|
|
40
|
-
linear-gradient(
|
|
41
|
-
to right,
|
|
42
|
-
r-color('white') 0%,
|
|
43
|
-
rgba(r-color('white'), 0.85) 15%,
|
|
44
|
-
rgba(r-color('white'), 0.15) 60%,
|
|
45
|
-
rgba(r-color('white'), 0) 70%
|
|
46
|
-
),
|
|
47
|
-
linear-gradient(
|
|
48
|
-
to left,
|
|
49
|
-
r-color('white') 0%,
|
|
50
|
-
rgba(r-color('white'), 0.85) 15%,
|
|
51
|
-
rgba(r-color('white'), 0.15) 60%,
|
|
52
|
-
rgba(r-color('white'), 0) 70%
|
|
53
|
-
)
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
// Basic color schemes
|
|
57
|
-
// ---------
|
|
58
|
-
$purplish-grey-scheme: (
|
|
59
|
-
font-color: r-color('white'),
|
|
60
|
-
link-color: r-color('firebrick6'),
|
|
61
|
-
svg-color: r-color('white'),
|
|
62
|
-
background: r-color('purplish-grey'),
|
|
63
|
-
hover-font-color: r-color('white'),
|
|
64
|
-
hover-background: r-color('purplish-grey'),
|
|
65
|
-
);
|
|
66
|
-
$battleship-grey-scheme: (
|
|
67
|
-
font-color: r-color('white'),
|
|
68
|
-
link-color: r-color('firebrick6'),
|
|
69
|
-
svg-color: r-color('white'),
|
|
70
|
-
background: r-color('battleship-grey'),
|
|
71
|
-
hover-font-color: r-color('white'),
|
|
72
|
-
hover-background: r-color('battleship-grey'),
|
|
73
|
-
);
|
|
74
|
-
$indianred3-scheme: (
|
|
75
|
-
font-color: r-color('white'),
|
|
76
|
-
link-color: r-color('light-grey'),
|
|
77
|
-
svg-color: r-color('white'),
|
|
78
|
-
background: r-color('indianred3'),
|
|
79
|
-
hover-font-color: r-color('white'),
|
|
80
|
-
hover-background: r-color('firebrick6'),
|
|
81
|
-
);
|
|
82
|
-
$firebrick6-scheme: (
|
|
83
|
-
font-color: r-color('white'),
|
|
84
|
-
link-color: r-color('light-grey'),
|
|
85
|
-
svg-color: r-color('white'),
|
|
86
|
-
background: r-color('firebrick6'),
|
|
87
|
-
hover-font-color: r-color('white'),
|
|
88
|
-
hover-background: r-color('indianred3'),
|
|
89
|
-
);
|
|
90
|
-
$white-scheme: (
|
|
91
|
-
font-color: r-color('black'),
|
|
92
|
-
h1-color: r-color('black'),
|
|
93
|
-
h2-color: r-color('black'),
|
|
94
|
-
svg-color: r-color('black'),
|
|
95
|
-
background: r-color('white'),
|
|
96
|
-
hover-font-color: r-color('firebrick6'),
|
|
97
|
-
hover-background: darken(r-color('white'), 8%),
|
|
98
|
-
);
|
|
99
|
-
$smoke-scheme: (
|
|
100
|
-
font-color: r-color('firebrick6'),
|
|
101
|
-
svg-color: r-color('firebrick6'),
|
|
102
|
-
background: r-color('smoke'),
|
|
103
|
-
hover-font-color: r-color('indianred3'),
|
|
104
|
-
hover-background: r-color('white'),
|
|
105
|
-
);
|
|
106
|
-
$light-grey-scheme: (
|
|
107
|
-
font-color: r-color('black'),
|
|
108
|
-
h1-color: r-color('black'),
|
|
109
|
-
h2-color: r-color('black'),
|
|
110
|
-
svg-color: r-color('black'),
|
|
111
|
-
background: r-color('light-grey'),
|
|
112
|
-
hover-font-color: r-color('firebrick6'),
|
|
113
|
-
hover-background: r-color('battleship-grey'),
|
|
114
|
-
);
|
|
115
|
-
$azure2: (
|
|
116
|
-
font-color: r-color('black'),
|
|
117
|
-
h1-color: r-color('black'),
|
|
118
|
-
h2-color: r-color('black'),
|
|
119
|
-
svg-color: r-color('black'),
|
|
120
|
-
background: r-color('azure2'),
|
|
121
|
-
hover-font-color: r-color('firebrick6'),
|
|
122
|
-
hover-background: r-color('battleship-grey'),
|
|
123
|
-
);
|
|
124
|
-
$clouds-scheme: (
|
|
125
|
-
background: bottom left / 100% 70% no-repeat r-color('smoke')
|
|
126
|
-
url('../../richie/images/components/clouds.jpg'),
|
|
127
|
-
);
|
|
128
|
-
$waves-scheme: (
|
|
129
|
-
background: top 1vw left 50% / 98% 7vw no-repeat r-color('white')
|
|
130
|
-
url('../../richie/images/components/waves.svg'),
|
|
131
|
-
);
|
|
132
|
-
$transparent-dark-scheme: (
|
|
133
|
-
font-color: r-color('black'),
|
|
134
|
-
h1-color: r-color('black'),
|
|
135
|
-
h2-color: r-color('black'),
|
|
136
|
-
link-color: r-color('firebrick6'),
|
|
137
|
-
svg-color: r-color('black'),
|
|
138
|
-
background: transparent,
|
|
139
|
-
border-color: r-color('black'),
|
|
140
|
-
hover-font-color: r-color('firebrick6'),
|
|
141
|
-
hover-svg-color: r-color('firebrick6'),
|
|
142
|
-
hover-border-color: r-color('firebrick6'),
|
|
143
|
-
);
|
|
144
|
-
$neutral-gradient-scheme: (
|
|
145
|
-
font-color: r-color('black'),
|
|
146
|
-
link-color: r-color('firebrick6'),
|
|
147
|
-
svg-color: r-color('black'),
|
|
148
|
-
background: $neutral-gradient,
|
|
149
|
-
);
|
|
150
|
-
$middle-gradient-scheme: (
|
|
151
|
-
font-color: r-color('black'),
|
|
152
|
-
link-color: r-color('black'),
|
|
153
|
-
svg-color: r-color('black'),
|
|
154
|
-
background: $middle-gradient,
|
|
155
|
-
hover-font-color: r-color('black'),
|
|
156
|
-
);
|
|
157
|
-
$dark-gradient-scheme: (
|
|
158
|
-
font-color: r-color('black'),
|
|
159
|
-
h1-color: r-color('white'),
|
|
160
|
-
h2-color: r-color('white'),
|
|
161
|
-
link-color: r-color('black'),
|
|
162
|
-
svg-color: r-color('black'),
|
|
163
|
-
background: $dark-gradient,
|
|
164
|
-
hover-font-color: r-color('black'),
|
|
165
|
-
);
|
|
166
|
-
$dark-gradient-alt-scheme: map-merge(
|
|
167
|
-
$dark-gradient-scheme,
|
|
168
|
-
(
|
|
169
|
-
font-color: r-color('white'),
|
|
170
|
-
link-color: r-color('white'),
|
|
171
|
-
svg-color: r-color('white'),
|
|
172
|
-
hover-font-color: r-color('white'),
|
|
173
|
-
)
|
|
174
|
-
);
|
|
175
|
-
$white-mask-gradient-scheme: (
|
|
176
|
-
font-color: r-color('black'),
|
|
177
|
-
h1-color: r-color('black'),
|
|
178
|
-
h2-color: r-color('black'),
|
|
179
|
-
svg-color: r-color('black'),
|
|
180
|
-
background: $white-mask-gradient,
|
|
181
|
-
hover-font-color: r-color('firebrick6'),
|
|
182
|
-
);
|
|
183
|
-
|
|
184
1
|
// Theme schemes
|
|
2
|
+
|
|
185
3
|
$r-theme: (
|
|
186
4
|
// Used from styleguide to build available scheme to demonstrate, used to create button variant
|
|
187
5
|
banner:
|
|
@@ -614,4 +432,11 @@ $r-theme: (
|
|
|
614
432
|
base-color: r-color('denim'),
|
|
615
433
|
base-color-light: r-color('white'),
|
|
616
434
|
)
|
|
617
|
-
);
|
|
435
|
+
) !default;
|
|
436
|
+
|
|
437
|
+
// On a Richie child project you can easily change a specific value using:
|
|
438
|
+
// $r-theme: recursive-map-merge($r-theme, (
|
|
439
|
+
// topbar: (
|
|
440
|
+
// base-background: yellow,
|
|
441
|
+
// )
|
|
442
|
+
// ));
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
@import 'bootstrap/scss/functions';
|
|
2
2
|
@import 'bootstrap/scss/variables';
|
|
3
3
|
|
|
4
|
-
// Design color
|
|
5
|
-
@import 'colors';
|
|
4
|
+
// Design color stuff
|
|
5
|
+
@import '../colors/palette';
|
|
6
|
+
@import '../colors/gradients';
|
|
7
|
+
@import '../colors/schemes';
|
|
8
|
+
@import '../colors/theme';
|
|
6
9
|
|
|
7
10
|
// One pixel shortcut
|
|
8
11
|
$onepixel: 0.0625rem;
|
package/scss/tools/_colors.scss
CHANGED
|
@@ -350,3 +350,59 @@
|
|
|
350
350
|
|
|
351
351
|
@return $prop;
|
|
352
352
|
}
|
|
353
|
+
|
|
354
|
+
/// Recursively merge two maps.
|
|
355
|
+
/// Reference: https://github.com/pentzzsolt/sass-recursive-map-merge/blob/master/_recursive-map-merge.scss
|
|
356
|
+
///
|
|
357
|
+
/// @arg {Map} $map1
|
|
358
|
+
/// First map - default configuration
|
|
359
|
+
///
|
|
360
|
+
/// @arg {Map} $map2
|
|
361
|
+
/// Second map - overwrite configuration
|
|
362
|
+
///
|
|
363
|
+
/// @returns {Map}
|
|
364
|
+
/// Merged map
|
|
365
|
+
///
|
|
366
|
+
@function recursive-map-merge($map1, $map2, $config: ()) {
|
|
367
|
+
@if (type-of($map1) == map or (type-of($map1) == list and length($map1) == 0)) and
|
|
368
|
+
(type-of($map2) == map or (type-of($map2) == list and length($map2) == 0))
|
|
369
|
+
{
|
|
370
|
+
$result: $map1;
|
|
371
|
+
@each $key, $value in $map2 {
|
|
372
|
+
@if (type-of(map-get($result, $key)) == map and type-of($value) == map) {
|
|
373
|
+
$result: map-merge(
|
|
374
|
+
$result,
|
|
375
|
+
(
|
|
376
|
+
$key: recursive-map-merge(map-get($result, $key), $value),
|
|
377
|
+
)
|
|
378
|
+
);
|
|
379
|
+
} @else if
|
|
380
|
+
(
|
|
381
|
+
map-get($config, 'merge-lists') and
|
|
382
|
+
type-of(map-get($result, $key)) ==
|
|
383
|
+
list and
|
|
384
|
+
type-of($value) ==
|
|
385
|
+
list
|
|
386
|
+
)
|
|
387
|
+
{
|
|
388
|
+
$result: map-merge(
|
|
389
|
+
$result,
|
|
390
|
+
(
|
|
391
|
+
$key: join(map-get($result, $key), $value),
|
|
392
|
+
)
|
|
393
|
+
);
|
|
394
|
+
} @else {
|
|
395
|
+
$result: map-merge(
|
|
396
|
+
$result,
|
|
397
|
+
(
|
|
398
|
+
$key: $value,
|
|
399
|
+
)
|
|
400
|
+
);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
@return $result;
|
|
404
|
+
} @else {
|
|
405
|
+
@warn "recursive-map-merge() expects it\'s parameters to be map types!";
|
|
406
|
+
@return null;
|
|
407
|
+
}
|
|
408
|
+
}
|