@kartverket/backstage-plugin-risk-scorecard 3.9.2 → 3.9.3
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/css/theme.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/*
|
|
2
|
+
This file contains custom CSS styles for the ROS plugin in Backstage, as well as our own overrides of Backstage UI styles. For colors that should vary depending on mode: declare them in both :root and [data-theme-mode='dark'] sections and then use the variables in your code.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
The Text-fill-scenario-and-action and Text-border-scenario-and-action variables are here as proofs of concept for how variables can be defined for both "default (light/:root) and dark mode and then our code can simply refer to the variable and don't are about the mode.
|
|
7
|
+
*/
|
|
8
|
+
[data-root-for='ros'] {
|
|
9
|
+
--green-50: #e9f8eb;
|
|
10
|
+
--green-100: #d0ecd6;
|
|
11
|
+
--green-200: #9fd2ab;
|
|
12
|
+
--green-300: #66b077;
|
|
13
|
+
--green-500: #156630;
|
|
14
|
+
|
|
15
|
+
--light-blue-100: #cae3fe;
|
|
16
|
+
--light-blue-200: #9bc9fe;
|
|
17
|
+
|
|
18
|
+
--blue-600: #1f5492;
|
|
19
|
+
|
|
20
|
+
--red-100: #ffe2d4;
|
|
21
|
+
--red-200: #ebb095;
|
|
22
|
+
--red-300: #e58869;
|
|
23
|
+
--red-400: #d04a14;
|
|
24
|
+
--red-500: #a32f00;
|
|
25
|
+
--red-600: #862906;
|
|
26
|
+
--red-700: #722609;
|
|
27
|
+
--red-800: #541f0b;
|
|
28
|
+
--red-900: #39170a;
|
|
29
|
+
--red-bright: #d3302f;
|
|
30
|
+
|
|
31
|
+
--orange-50: #fcebcd;
|
|
32
|
+
--orange-100: #ffdd9d;
|
|
33
|
+
--orange-200: #ebbe76;
|
|
34
|
+
--orange-300: #cf914a;
|
|
35
|
+
--orange-400: #bc7729;
|
|
36
|
+
--orange-500: #8e5a1f;
|
|
37
|
+
|
|
38
|
+
--gray-50: #f8f8f8;
|
|
39
|
+
--gray-100: #eae7e7;
|
|
40
|
+
--gray-200: #c8c5c5;
|
|
41
|
+
--gray-300: #a2a0a0;
|
|
42
|
+
--gray-400: #706f6e;
|
|
43
|
+
--gray-500: #5a5858;
|
|
44
|
+
--gray-600: #4a4848;
|
|
45
|
+
--gray-700: #403f3f;
|
|
46
|
+
--gray-800: #2e2e2e;
|
|
47
|
+
--gray-900: #212121;
|
|
48
|
+
--gray-medium: #808080;
|
|
49
|
+
|
|
50
|
+
/* -------Button styles------- */
|
|
51
|
+
.button-red {
|
|
52
|
+
background-color: var(--red-bright);
|
|
53
|
+
color: var(--bui-white);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.button-green {
|
|
57
|
+
background-color: var(--green-500);
|
|
58
|
+
color: var(--bui-white);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.button-gray {
|
|
62
|
+
background-color: var(--gray-medium);
|
|
63
|
+
color: var(--bui-white);
|
|
64
|
+
}
|
|
65
|
+
/* ---------------------------- */
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Dark mode custom styles can be added here */
|
|
69
|
+
/* [data-theme-mode='dark'] [data-root-for='ros'] {
|
|
70
|
+
|
|
71
|
+
} */
|
package/dist/PluginRoot.esm.js
CHANGED
|
@@ -7,7 +7,7 @@ import { ScenarioProvider } from './contexts/ScenarioContext.esm.js';
|
|
|
7
7
|
import { riScRouteRef, scenarioRouteRef } from './routes.esm.js';
|
|
8
8
|
import { RiScProvider } from './contexts/RiScContext.esm.js';
|
|
9
9
|
import 'remixicon/fonts/remixicon.css';
|
|
10
|
-
import './theme.css.esm.js';
|
|
10
|
+
import './plugins/ros/css/theme.css.esm.js';
|
|
11
11
|
import { DefaultRiScTypesProvider } from './contexts/DefaultRiScTypesContext.esm.js';
|
|
12
12
|
|
|
13
13
|
const emotionInsertionPoint = document.createElement("meta");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PluginRoot.esm.js","sources":["../src/PluginRoot.tsx"],"sourcesContent":["import { Route, Routes } from 'react-router-dom';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { RiScPlugin } from './components/riScPlugin/RiScPlugin';\nimport { ScenarioProvider } from './contexts/ScenarioContext';\nimport { riScRouteRef, scenarioRouteRef } from './routes';\nimport { RiScProvider } from './contexts/RiScContext';\nimport 'remixicon/fonts/remixicon.css';\nimport '
|
|
1
|
+
{"version":3,"file":"PluginRoot.esm.js","sources":["../src/PluginRoot.tsx"],"sourcesContent":["import { Route, Routes } from 'react-router-dom';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { RiScPlugin } from './components/riScPlugin/RiScPlugin';\nimport { ScenarioProvider } from './contexts/ScenarioContext';\nimport { riScRouteRef, scenarioRouteRef } from './routes';\nimport { RiScProvider } from './contexts/RiScContext';\nimport 'remixicon/fonts/remixicon.css';\nimport '../css/theme.css';\nimport { DefaultRiScTypesProvider } from './contexts/DefaultRiScTypesContext.tsx';\n\nconst emotionInsertionPoint = document.createElement('meta');\nemotionInsertionPoint.setAttribute('name', 'emotion-insertion-point');\ndocument.querySelector('head')?.appendChild(emotionInsertionPoint);\n\nconst cache = createCache({\n key: 'css',\n insertionPoint: emotionInsertionPoint,\n});\n\nfunction ProvidedPlugin() {\n return (\n <CacheProvider value={cache}>\n <RiScProvider>\n <DefaultRiScTypesProvider>\n <ScenarioProvider>\n <RiScPlugin />\n </ScenarioProvider>\n </DefaultRiScTypesProvider>\n </RiScProvider>\n </CacheProvider>\n );\n}\n\nexport function PluginRoot() {\n return (\n <Routes>\n <Route path=\"/\" element={<ProvidedPlugin />} />\n <Route path={riScRouteRef.path} element={<ProvidedPlugin />} />\n <Route path={scenarioRouteRef.path} element={<ProvidedPlugin />} />\n </Routes>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,MAAM,qBAAA,GAAwB,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC3D,qBAAA,CAAsB,YAAA,CAAa,QAAQ,yBAAyB,CAAA;AACpE,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA,EAAG,WAAA,CAAY,qBAAqB,CAAA;AAEjE,MAAM,QAAQ,WAAA,CAAY;AAAA,EACxB,GAAA,EAAK,KAAA;AAAA,EACL,cAAA,EAAgB;AAClB,CAAC,CAAA;AAED,SAAS,cAAA,GAAiB;AACxB,EAAA,uBACE,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,KAAA,EACpB,8BAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA,EACd,CAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,UAAA,GAAa;AAC3B,EAAA,4BACG,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,GAAA,EAAI,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,oBAC7C,GAAA,CAAC,SAAM,IAAA,EAAM,YAAA,CAAa,MAAM,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,oBAC7D,GAAA,CAAC,SAAM,IAAA,EAAM,gBAAA,CAAiB,MAAM,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI;AAAA,GAAA,EACnE,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styleInject from '
|
|
1
|
+
import styleInject from '../../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
3
|
var css_248z = "/*\nThis file contains custom CSS styles for the ROS plugin in Backstage, as well as our own overrides of Backstage UI styles. For colors that should vary depending on mode: declare them in both :root and [data-theme-mode='dark'] sections and then use the variables in your code.\n*/\n\n/*\nThe Text-fill-scenario-and-action and Text-border-scenario-and-action variables are here as proofs of concept for how variables can be defined for both \"default (light/:root) and dark mode and then our code can simply refer to the variable and don't are about the mode.\n*/\n[data-root-for='ros'] {\n --green-50: #e9f8eb;\n --green-100: #d0ecd6;\n --green-200: #9fd2ab;\n --green-300: #66b077;\n --green-500: #156630;\n\n --light-blue-100: #cae3fe;\n --light-blue-200: #9bc9fe;\n\n --blue-600: #1f5492;\n\n --red-100: #ffe2d4;\n --red-200: #ebb095;\n --red-300: #e58869;\n --red-400: #d04a14;\n --red-500: #a32f00;\n --red-600: #862906;\n --red-700: #722609;\n --red-800: #541f0b;\n --red-900: #39170a;\n --red-bright: #d3302f;\n\n --orange-50: #fcebcd;\n --orange-100: #ffdd9d;\n --orange-200: #ebbe76;\n --orange-300: #cf914a;\n --orange-400: #bc7729;\n --orange-500: #8e5a1f;\n\n --gray-50: #f8f8f8;\n --gray-100: #eae7e7;\n --gray-200: #c8c5c5;\n --gray-300: #a2a0a0;\n --gray-400: #706f6e;\n --gray-500: #5a5858;\n --gray-600: #4a4848;\n --gray-700: #403f3f;\n --gray-800: #2e2e2e;\n --gray-900: #212121;\n --gray-medium: #808080;\n\n /* -------Button styles------- */\n .button-red {\n background-color: var(--red-bright);\n color: var(--bui-white);\n }\n\n .button-green {\n background-color: var(--green-500);\n color: var(--bui-white);\n }\n\n .button-gray {\n background-color: var(--gray-medium);\n color: var(--bui-white);\n }\n /* ---------------------------- */\n}\n\n/* Dark mode custom styles can be added here */\n/* [data-theme-mode='dark'] [data-root-for='ros'] {\n\n} */\n";
|
|
4
4
|
styleInject(css_248z);
|
package/package.json
CHANGED
|
File without changes
|