Skip to content

Commit f385b28

Browse files
PatrikMatiaskoPatrikMatiasko
committed
theme generator
Spacer Certificates
1 parent 9746ea7 commit f385b28

31 files changed

Lines changed: 1317 additions & 952 deletions

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@
6060
"@opentelemetry/sdk-trace-web": "^1.18.1",
6161
"@storybook/addons": "^7.5.3",
6262
"@types/convert-units": "^2.3.9",
63+
"@types/dompurify": "^3.0.2",
6364
"@types/lodash": "^4.14.202",
65+
"@types/mustache": "^4.2.2",
6466
"@types/node": "^18.16.17",
6567
"@types/react": "^18.2.38",
6668
"@types/react-dom": "^18.2.17",
@@ -75,10 +77,12 @@
7577
"bootstrap": "^5.3.2",
7678
"classnames": "^2.3.2",
7779
"detect-browser": "^5.3.0",
80+
"dompurify": "^3.0.5",
7881
"framer-motion": "^10.16.5",
7982
"jest-sonar-reporter": "^2.0.0",
8083
"jsoneditor": "^9.10.4",
8184
"lodash": "^4.17.21",
85+
"mustache": "^4.2.0",
8286
"oidc-react": "^3.2.2",
8387
"random-words": "^2.0.0",
8488
"rc-scrollbars": "^1.1.6",

‎scripts/build.theme.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,18 @@ async function run(argv) {
3333
}
3434

3535
// build theme color
36-
const commandThemeColors = `npx babel ./src/components/Atomic/_utils/colors.ts --out-file build/lib/_utils/colors.js ${extensions}`
37-
const { stderrColor, stdoutColor } = await exec(commandThemeColors, {
36+
const commandThemeUtils = `npx babel ./src/components/Atomic/_utils/ -d build/lib/_utils ${extensions}`
37+
const { stderrUtils, stdoutUtils } = await exec(commandThemeUtils, {
3838
env: { ...process.env, ...env },
3939
cwd,
4040
})
4141

42-
if (stderrColor) {
43-
throw new Error(`'${commandThemeColors}' failed with \n${stderrColor}`)
42+
if (stderrUtils) {
43+
throw new Error(`'${commandThemeUtils}' failed with \n${stderrUtils}`)
4444
}
4545

46-
if (verbose && stdoutColor) {
47-
console.log(stdoutColor)
46+
if (verbose && stdoutUtils) {
47+
console.log(stdoutUtils)
4848
}
4949

5050
const buildPath = path.join(cwd, './build')

‎src/components/Atomic/ActionButton/ActionButton.styles.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { css } from '@emotion/react'
2-
import { colors } from '../_utils/colors'
32
import { get, ThemeType } from '../_theme'
43

54
export const actionButton = css`
@@ -20,7 +19,7 @@ export const item = (theme: ThemeType) => css`
2019
display: flex;
2120
align-items: center;
2221
text-decoration: none;
23-
color: ${colors.neutral500};
22+
color: ${get(theme, `ActionButton.item.color`)};
2423
transition: all 0.3s;
2524
padding: 8px 0;
2625
cursor: pointer;
@@ -50,7 +49,7 @@ export const icon = (theme: ThemeType) => css`
5049
display: inline-flex;
5150
align-items: center;
5251
justify-content: center;
53-
color: ${colors.neutral500};
52+
color: ${get(theme, `ActionButton.icon.color`)};
5453
transition: all 0.3s;
5554
cursor: pointer;
5655
@@ -60,5 +59,5 @@ export const icon = (theme: ThemeType) => css`
6059
`
6160

6261
export const iconActive = (theme: ThemeType) => css`
63-
color: ${get(theme, `ActionButton.icon.acive.color`)};
62+
color: ${get(theme, `ActionButton.icon.active.color`)};
6463
`

‎src/components/Atomic/Alert/Alert.styles.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ export const icon = (theme: ThemeType) => css`
6868
color: ${get(theme, 'Alert.icon.color')};
6969
`
7070

71-
export const label = css`
71+
export const label = (theme: ThemeType) => css`
7272
padding-left: 12px;
73-
color: ${colors.neutral600};
73+
color: ${get(theme, 'Alert.label.color')};
7474
`
7575

7676
export const iconClose = (theme: ThemeType) => css`

‎src/components/Atomic/App/App.styles.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { css } from '@emotion/react'
2+
import { fontPrimary } from '../_utils/commonStyles'
3+
import { ThemeType, get } from '../_theme'
24

3-
export const global = css`
5+
export const global = (theme: ThemeType) => css`
46
* {
57
box-sizing: border-box;
68
}
79
body {
810
margin: 0;
11+
font-family: ${get(theme, `Global.fontPrimary`, fontPrimary)};
912
}
1013
`

‎src/components/Atomic/Checkbox/Chceckbox.styles.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { css } from '@emotion/react'
2-
import { colors } from '../_utils/colors'
32
import styled from '@emotion/styled'
43
import { get, ThemeType } from '../_theme'
54

@@ -68,9 +67,9 @@ export const input = (theme: ThemeType) => css`
6867
}
6968
`
7069

71-
export const label = css`
70+
export const label = (theme: ThemeType) => css`
7271
font-size: 12px;
73-
color: #81868c;
72+
color: ${get(theme, `Checkbox.label.color`)};
7473
padding-left: 8px;
7574
cursor: pointer;
7675
line-height: 18px;
@@ -79,6 +78,6 @@ export const label = css`
7978
font-weight: 400;
8079
`
8180

82-
export const error = css`
83-
border-color: ${colors.red};
81+
export const error = (theme: ThemeType) => css`
82+
border-color: ${get(theme, `Checkbox.error.red`)};
8483
`

‎src/components/Atomic/CopyElement/CopyElement.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const text = css`
3636
line-height: 18px;
3737
`
3838

39-
export const copied = css`
39+
export const copied = (theme: ThemeType) => css`
4040
display: flex;
4141
align-items: center;
4242
justify-content: center;
@@ -45,7 +45,7 @@ export const copied = css`
4545
padding: 0 8px;
4646
height: 24px;
4747
box-sizing: border-box;
48-
color: #fff;
48+
color: ${get(theme, 'CopyElement.copied.color')};
4949
text-decoration: none;
5050
transform: translateX(100%);
5151
position: absolute;
@@ -56,7 +56,7 @@ export const copied = css`
5656
5757
&:hover {
5858
text-decoration: none;
59-
color: #fff;
59+
color: ${get(theme, 'CopyElement.hover.copied.color')};
6060
}
6161
`
6262

‎src/components/Atomic/Dropzone/Dropzone.styles.ts‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,35 @@
11
import { css } from '@emotion/react'
2-
import { colors } from '../_utils/colors'
3-
import { fontPrimary } from '../_utils/commonStyles'
2+
import { ThemeType, get } from '../_theme'
43

5-
export const dropzoneContainer = css`
4+
export const dropzoneContainer = (theme: ThemeType) => css`
65
padding: 32px;
7-
border: 1px dashed ${colors.neutral300};
6+
border: 1px dashed ${get(theme, `Dropzone.container.borderColor`)};
87
border-radius: 8px;
98
`
109

11-
export const placeholder = css`
10+
export const placeholder = (theme: ThemeType) => css`
1211
display: flex;
1312
flex-direction: column;
1413
align-items: center;
15-
color: ${colors.neutral500};
14+
color: ${get(theme, `Dropzone.placeholder.color`)};
1615
`
1716

18-
export const placeholderText = css`
19-
font-family: ${fontPrimary};
20-
color: ${colors.neutral800};
21-
font-style: normal;
17+
export const placeholderText = (theme: ThemeType) => css`
18+
color: ${get(theme, `Dropzone.placeholder.text.color`)};
2219
font-weight: 400;
2320
font-size: 14px;
2421
line-height: 22px;
2522
margin: 12px 0 0 0;
2623
2724
span {
28-
color: ${colors.primary};
25+
color: ${get(theme, `Dropzone.placeholder.highlight.color`)};
2926
text-decoration: underline;
3027
cursor: pointer;
3128
}
3229
`
3330

34-
export const placeholderDescription = css`
35-
font-family: ${fontPrimary};
36-
color: ${colors.neutral500};
31+
export const placeholderDescription = (theme: ThemeType) => css`
32+
color: ${get(theme, `Dropzone.placeholder.description.color`)};
3733
font-weight: 400;
3834
font-size: 12px;
3935
line-height: 18px;
@@ -65,23 +61,20 @@ export const fileLine = css`
6561
padding-left: 12px;
6662
`
6763

68-
export const fileName = css`
69-
font-family: ${fontPrimary};
70-
color: ${colors.neutral800};
71-
font-style: normal;
64+
export const fileName = (theme: ThemeType) => css`
65+
color: ${get(theme, `Dropzone.file.color`)};
7266
font-weight: 400;
7367
font-size: 14px;
7468
line-height: 22px;
7569
`
7670

77-
export const closeIcon = css`
71+
export const closeIcon = (theme: ThemeType) => css`
7872
cursor: pointer;
79-
color: ${colors.neutral500};
73+
color: ${get(theme, `Dropzone.file.close.color`)};
8074
`
8175

82-
export const fileSize = css`
83-
font-family: ${fontPrimary};
84-
color: ${colors.neutral500};
76+
export const fileSize = (theme: ThemeType) => css`
77+
color: ${get(theme, `Dropzone.file.size.color`)};
8578
font-weight: 400;
8679
font-size: 12px;
8780
line-height: 18px;

‎src/components/Atomic/Dropzone/Dropzone.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ const Dropzone: FC<Props> = (props) => {
2828

2929
const renderFile = useCallback(
3030
(file: any) => {
31-
console.log(file)
3231
const nameArray = file.name.split('.')
3332
const format = nameArray[nameArray.length - 1]
3433
const index = customFileRenders?.findIndex((item) => item.format === format.toLowerCase())

‎src/components/Atomic/Editor/Editor.styles.ts‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { css } from '@emotion/react'
22

3-
import { colors } from '../_utils/colors'
43
import { ThemeType, get } from '../_theme'
5-
import { fontPrimary } from '../_utils/commonStyles'
64

75
export const editor = (theme: ThemeType) => css`
86
position: relative;
@@ -24,19 +22,10 @@ export const editor = (theme: ThemeType) => css`
2422
2523
.ace_gutter {
2624
background: ${get(theme, `Editor.gutter.background`)};
27-
// //padding: 16px 0;
28-
//
25+
2926
.ace_gutter-cell {
30-
//font-family: 'Poppins', sans-serif;
31-
//font-style: normal;
32-
//font-weight: 400;
33-
//font-size: 14px;
34-
// //line-height: 22px;
35-
// text-align: center;
36-
color: ${colors.neutral600};
27+
color: ${get(theme, `Editor.gutter.color`)};
3728
padding: 0 16px;
38-
// display: flex;
39-
// align-items: center;
4029
}
4130
}
4231
@@ -55,21 +44,21 @@ export const editor = (theme: ThemeType) => css`
5544
.ace_constant,
5645
.ace_paren,
5746
.ace_variable {
58-
color: ${colors.neutral600};
47+
color: ${get(theme, `Editor.variable.color`)};
5948
}
6049
6150
.ace_constant {
6251
&.ace_boolean {
63-
color: ${colors.yellow};
52+
color: ${get(theme, `Editor.constant.boolean.color`)};
6453
}
6554
6655
&.ace_numeric {
67-
color: ${colors.red};
56+
color: ${get(theme, `Editor.constant.numeric.color`)};
6857
}
6958
}
7059
7160
.ace_string {
72-
color: ${colors.green};
61+
color: ${get(theme, `Editor.constant.string.color`)};
7362
}
7463
}
7564
}
@@ -86,17 +75,16 @@ export const fullSizeBtn = (theme: ThemeType) => css`
8675
padding: 4px 8px;
8776
border-radius: 4px;
8877
cursor: pointer;
89-
color: #81868c;
78+
color: ${get(theme, `Editor.fullSizeBtn.color`)};
9079
transition: all 0.3s;
9180
9281
&:hover {
9382
text-decoration: none !important;
94-
color: ${get(theme, `Editor.hover.color`)};
83+
color: ${get(theme, `Editor.fullSizeBtn.hover.color`)};
9584
}
9685
`
9786

9887
export const text = css`
99-
font-family: ${fontPrimary};
10088
font-size: 12px;
10189
font-style: normal;
10290
font-weight: 400;

0 commit comments

Comments
 (0)