@fibery/ui-kit 1.0.2 → 1.0.5
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/package.json +8 -3
- package/src/Button.js +6 -6
- package/src/Select/components.tsx +87 -0
- package/src/Select/index.tsx +210 -0
- package/src/Select/{styles.js → styles.ts} +36 -19
- package/src/ThemeProvider.tsx +94 -5
- package/src/antd/styles.ts +119 -0
- package/src/designSystem.ts +98 -61
- package/src/error-alert.tsx +55 -0
- package/src/form-field-loader.tsx +0 -1
- package/src/icons/Icon.tsx +2 -2
- package/src/icons/ast/AppStoreOneColor.ts +1 -1
- package/src/icons/ast/Checked.ts +1 -1
- package/src/icons/ast/ExtensionAvatar.ts +1 -1
- package/src/icons/ast/Integration.ts +1 -1
- package/src/icons/ast/RicheditorImageAlignCenter.ts +1 -1
- package/src/icons/ast/RicheditorImageAlignLeft.ts +1 -1
- package/src/icons/ast/RicheditorImageAlignRight.ts +1 -1
- package/src/icons/ast/RicheditorImageUpload.ts +1 -1
- package/src/icons/ast/RicheditorImageWrapCenter.ts +1 -1
- package/src/icons/ast/RicheditorImageWrapLeft.ts +1 -1
- package/src/icons/ast/RicheditorImageWrapRight.ts +1 -1
- package/src/Select/components.js +0 -64
- package/src/Select/index.d.ts +0 -11
- package/src/Select/index.js +0 -140
- package/src/Select/lazy.js +0 -35
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import {css} from "@linaria/core";
|
|
2
|
+
import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
|
|
3
|
+
|
|
4
|
+
export const inputOverrides = {
|
|
5
|
+
main: {
|
|
6
|
+
font: "inherit",
|
|
7
|
+
color: themeVars.textColor,
|
|
8
|
+
outline: "none",
|
|
9
|
+
backgroundColor: themeVars.inputBgColor,
|
|
10
|
+
borderRadius: border.radius6,
|
|
11
|
+
minHeight: layout.inputHeight,
|
|
12
|
+
paddingTop: 0,
|
|
13
|
+
paddingBottom: 0,
|
|
14
|
+
paddingLeft: space.l,
|
|
15
|
+
paddingRight: space.l,
|
|
16
|
+
border: 0,
|
|
17
|
+
borderColor: colors.transparent,
|
|
18
|
+
transition: `box-shadow ${transition}`,
|
|
19
|
+
boxShadow: themeVars.inputBorderColor,
|
|
20
|
+
letterSpacing: 0,
|
|
21
|
+
"::placeholder": {
|
|
22
|
+
color: themeVars.inputPlaceholderTextColor,
|
|
23
|
+
opacity: 1,
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
hover: {
|
|
27
|
+
boxShadow: `0 0 0 1px ${themeVars.opacity.regular} !important`,
|
|
28
|
+
transition: `box-shadow ${transition}`,
|
|
29
|
+
},
|
|
30
|
+
focus: {
|
|
31
|
+
boxShadow: `0 0 0 1px ${themeVars.opacity.light}, 0 0 0 3px ${themeVars.focus} !important`,
|
|
32
|
+
transition: `box-shadow ${transition}`,
|
|
33
|
+
},
|
|
34
|
+
disabled: {
|
|
35
|
+
color: `${themeVars.accentTextColor}`,
|
|
36
|
+
backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
|
|
37
|
+
borderColor: colors.transparent,
|
|
38
|
+
boxShadow: `${themeVars.inputBorderColor} !important`,
|
|
39
|
+
transition: `box-shadow ${transition}`,
|
|
40
|
+
WebkitTextFillColor: "currentColor",
|
|
41
|
+
cursor: "default",
|
|
42
|
+
":hover": {
|
|
43
|
+
boxShadow: `${themeVars.inputBorderColor}`,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const inputStyles = css`
|
|
49
|
+
& .ant-input-prefix {
|
|
50
|
+
margin-right: -24px;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
${{
|
|
55
|
+
...textStyles.regular,
|
|
56
|
+
"& .ant-input-group-addon": {
|
|
57
|
+
backgroundColor: colors.transparent,
|
|
58
|
+
border: "none",
|
|
59
|
+
padding: 0,
|
|
60
|
+
textAlign: "left",
|
|
61
|
+
boxShadow: shadows.border,
|
|
62
|
+
":hover": inputOverrides.hover,
|
|
63
|
+
":focus": inputOverrides.focus,
|
|
64
|
+
},
|
|
65
|
+
"& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
|
|
66
|
+
"& .ant-input": inputOverrides.main,
|
|
67
|
+
"& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
68
|
+
"& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
69
|
+
"& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
70
|
+
"& .ant-input-affix-wrapper > input.ant-input": {
|
|
71
|
+
padding: "0 12px",
|
|
72
|
+
border: "inherit",
|
|
73
|
+
outline: "inherit",
|
|
74
|
+
},
|
|
75
|
+
"& .ant-input-affix-wrapper": {
|
|
76
|
+
font: "inherit",
|
|
77
|
+
padding: 0,
|
|
78
|
+
border: "none",
|
|
79
|
+
boxShadow: "none",
|
|
80
|
+
backgroundColor: colors.transparent,
|
|
81
|
+
},
|
|
82
|
+
"& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
|
|
83
|
+
border: "none !important",
|
|
84
|
+
outline: "none !important",
|
|
85
|
+
boxShadow: "none !important",
|
|
86
|
+
},
|
|
87
|
+
"& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
|
|
88
|
+
borderColor: "transparent",
|
|
89
|
+
},
|
|
90
|
+
"& .ant-cascader-picker:focus .ant-cascader-input, & .ant-cascader-picker:focus:hover .ant-cascader-input":
|
|
91
|
+
inputOverrides.focus,
|
|
92
|
+
"& .ant-select-auto-complete.ant-select": {
|
|
93
|
+
...textStyles.regular,
|
|
94
|
+
"& .ant-select-selection--single": {height: layout.inputHeight},
|
|
95
|
+
"& .ant-input": inputOverrides.main,
|
|
96
|
+
"& .ant-input.ant-input:hover": inputOverrides.hover,
|
|
97
|
+
"& .ant-input.ant-input:focus": inputOverrides.focus,
|
|
98
|
+
"& .ant-input.ant-input-disabled": inputOverrides.disabled,
|
|
99
|
+
},
|
|
100
|
+
"& textarea.ant-input": {
|
|
101
|
+
paddingTop: space.m,
|
|
102
|
+
paddingBottom: space.m,
|
|
103
|
+
},
|
|
104
|
+
"& .ant-select-disabled .ant-select-selection": {
|
|
105
|
+
backgroundColor: colors.transparent,
|
|
106
|
+
},
|
|
107
|
+
"&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
|
|
108
|
+
inputOverrides.hover,
|
|
109
|
+
"&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
|
|
110
|
+
"&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
|
|
111
|
+
inputOverrides.disabled,
|
|
112
|
+
"&& input::placeholder, && textarea::placeholder": {
|
|
113
|
+
color: themeVars.textColor,
|
|
114
|
+
opacity: opacity.regular,
|
|
115
|
+
},
|
|
116
|
+
"& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s},
|
|
117
|
+
"& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s + space.xl + space.m}, // Match TitlePreview spacing
|
|
118
|
+
}}
|
|
119
|
+
`;
|
package/src/designSystem.ts
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
/* eslint-disable max-lines */
|
|
2
2
|
import chroma from "chroma-js";
|
|
3
|
+
import {ThemeMode} from "./theme-settings";
|
|
3
4
|
import ColorHash from "color-hash";
|
|
4
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
blackA,
|
|
7
|
+
indigo,
|
|
8
|
+
indigoDark,
|
|
9
|
+
red,
|
|
10
|
+
blue,
|
|
11
|
+
blueDark,
|
|
12
|
+
redDark,
|
|
13
|
+
sage,
|
|
14
|
+
slate,
|
|
15
|
+
slateDark,
|
|
16
|
+
whiteA,
|
|
17
|
+
yellow,
|
|
18
|
+
yellowDark,
|
|
19
|
+
} from "./Pallete";
|
|
5
20
|
import _ from "lodash";
|
|
6
21
|
import {createInlineTheme as createInlineStyles} from "./create-inline-theme";
|
|
7
22
|
|
|
@@ -119,6 +134,7 @@ const lightColors = {
|
|
|
119
134
|
menuFooterColor: getOpacities(whiteA.whiteA0).opacity20,
|
|
120
135
|
menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity40,
|
|
121
136
|
textColor: slateDark.slate3,
|
|
137
|
+
textSelectionColor: getOpacities(blue.blue10).opacity20,
|
|
122
138
|
accentTextColor: slate.slate10,
|
|
123
139
|
disabledTextColor: slate.slate9,
|
|
124
140
|
inversedTextColor: slateDark.slate3,
|
|
@@ -126,6 +142,9 @@ const lightColors = {
|
|
|
126
142
|
linkBorder: `1px solid ${getOpacities(indigoDark.indigo10).opacity20}`,
|
|
127
143
|
linkHoverColor: indigo.indigo10,
|
|
128
144
|
linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
|
|
145
|
+
codeColor: red.red9,
|
|
146
|
+
codeBgColor: makeChromaColor("#F24461").luminance(0.92).css(),
|
|
147
|
+
codeBlockBgColor: sage.sage3,
|
|
129
148
|
entityNodeColor: slateDark.slate3,
|
|
130
149
|
entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
|
|
131
150
|
entityNodeHoverColor: slateDark.slate7,
|
|
@@ -140,6 +159,7 @@ const lightColors = {
|
|
|
140
159
|
inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity100}`,
|
|
141
160
|
inputPlaceholderTextColor: slate.slate10,
|
|
142
161
|
buttonColor: slate.slate10,
|
|
162
|
+
buttonPrimaryTextColor: slate.slate2,
|
|
143
163
|
menuTextColor: slate.slate12,
|
|
144
164
|
selectedMenuTextColor: slate.slate2,
|
|
145
165
|
actionMenuBg: whiteA.whiteA0,
|
|
@@ -192,19 +212,12 @@ const lightColors = {
|
|
|
192
212
|
//end
|
|
193
213
|
placeholderTextColor: "#65788B",
|
|
194
214
|
disabledInversedTextColor: shades.light,
|
|
195
|
-
codeColor: "#F24461",
|
|
196
|
-
codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
|
|
197
215
|
danger: brandColors.red,
|
|
198
216
|
active: brandColors.red,
|
|
199
217
|
warning: "#FFD41E",
|
|
200
218
|
cardBg: "#FFFFFF",
|
|
201
219
|
cardSelected: "#FFFB8F",
|
|
202
220
|
cardSelectedHover: "rgba(240, 244, 247, 0.6)",
|
|
203
|
-
menuSelected: "rgba(240, 244, 247, 1)",
|
|
204
|
-
menuSelectedHover: "rgba(240, 244, 247, 1)",
|
|
205
|
-
menuBg1: "hsl(151, 10.6%, 95.2%)",
|
|
206
|
-
menuBg2: "rgba(255, 255, 255, 0.1)",
|
|
207
|
-
menuBg3: "rgba(255, 255, 255, 0.3)",
|
|
208
221
|
infoBox: "rgba(255, 212, 0, 0.2)",
|
|
209
222
|
errorBg: "rgba(255, 241, 240, 1)",
|
|
210
223
|
timelineCard: "#FCE07D",
|
|
@@ -233,6 +246,7 @@ const darkColors = {
|
|
|
233
246
|
menuFooterColor: getOpacities(slateDark.slate3).opacity20,
|
|
234
247
|
menuFooterHoverColor: getOpacities(slateDark.slate3).opacity40,
|
|
235
248
|
textColor: slate.slate6,
|
|
249
|
+
textSelectionColor: getOpacities(blueDark.blue10).opacity40,
|
|
236
250
|
accentTextColor: slate.slate10,
|
|
237
251
|
disabledTextColor: slateDark.slate9,
|
|
238
252
|
inversedTextColor: slate.slate6,
|
|
@@ -240,6 +254,9 @@ const darkColors = {
|
|
|
240
254
|
linkBorder: `1px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
|
|
241
255
|
linkHoverColor: indigoDark.indigo10,
|
|
242
256
|
linkBorderHover: `1px solid ${getOpacities(indigoDark.indigo10).opacity80}`,
|
|
257
|
+
codeColor: red.red8,
|
|
258
|
+
codeBgColor: makeChromaColor(redDark.red3).luminance(0.05).darken(0.5).css(),
|
|
259
|
+
codeBlockBgColor: slateDark.slate3,
|
|
243
260
|
entityNodeColor: slate.slate8,
|
|
244
261
|
entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
|
|
245
262
|
entityNodeHoverColor: slate.slate7,
|
|
@@ -253,7 +270,8 @@ const darkColors = {
|
|
|
253
270
|
inputBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
|
|
254
271
|
inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
|
|
255
272
|
inputPlaceholderTextColor: slate.slate10,
|
|
256
|
-
buttonColor:
|
|
273
|
+
buttonColor: slateDark.slate10,
|
|
274
|
+
buttonPrimaryTextColor: slate.slate6,
|
|
257
275
|
menuTextColor: slate.slate8,
|
|
258
276
|
selectedMenuTextColor: slate.slate2,
|
|
259
277
|
actionMenuBg: slateDark.slate4,
|
|
@@ -306,19 +324,12 @@ const darkColors = {
|
|
|
306
324
|
//end
|
|
307
325
|
placeholderTextColor: "#65788B",
|
|
308
326
|
disabledInversedTextColor: lights.light,
|
|
309
|
-
|
|
310
|
-
codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
|
|
311
|
-
danger: brandColors.red,
|
|
327
|
+
danger: redDark.red9,
|
|
312
328
|
active: brandColors.red,
|
|
313
329
|
warning: "#FFD41E",
|
|
314
330
|
cardBg: slateDark.slate6,
|
|
315
331
|
cardSelected: slateDark.slate5,
|
|
316
332
|
cardSelectedHover: slateDark.slate5,
|
|
317
|
-
menuSelected: "rgba(240, 244, 247, 1)",
|
|
318
|
-
menuSelectedHover: "rgba(240, 244, 247, 1)",
|
|
319
|
-
menuBg1: "#132331",
|
|
320
|
-
menuBg2: "rgba(255, 255, 255, 0.05)",
|
|
321
|
-
menuBg3: "rgba(255, 255, 255, 0.08)",
|
|
322
333
|
infoBox: "rgba(255, 212, 0, 0.2)",
|
|
323
334
|
errorBg: "rgba(255, 241, 240, 1)",
|
|
324
335
|
timelineCard: "#FCE07D",
|
|
@@ -347,6 +358,7 @@ const oldColors = {
|
|
|
347
358
|
menuFooterColor: "rgba(255, 255, 255, 0.05)",
|
|
348
359
|
menuFooterHoverColor: "rgba(255, 255, 255, 0.08)",
|
|
349
360
|
textColor: "#2A3844",
|
|
361
|
+
textSelectionColor: getOpacities(blue.blue10).opacity20,
|
|
350
362
|
accentTextColor: "#65788B",
|
|
351
363
|
disabledTextColor: shades.regular,
|
|
352
364
|
inversedTextColor: "#FFFFFF",
|
|
@@ -354,6 +366,9 @@ const oldColors = {
|
|
|
354
366
|
linkBorder: `1px solid ${getOpacities(indigoDark.indigo10).opacity30}`,
|
|
355
367
|
linkHoverColor: indigo.indigo10,
|
|
356
368
|
linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
|
|
369
|
+
codeColor: red.red9,
|
|
370
|
+
codeBgColor: makeChromaColor("#F24461").luminance(0.92).css(),
|
|
371
|
+
codeBlockBgColor: sage.sage3,
|
|
357
372
|
entityNodeColor: slateDark.slate3,
|
|
358
373
|
entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
|
|
359
374
|
entityNodeHoverColor: slateDark.slate7,
|
|
@@ -368,6 +383,7 @@ const oldColors = {
|
|
|
368
383
|
inputBorderHoverColor: `0 0 0 1px ${shades.light}`,
|
|
369
384
|
inputPlaceholderTextColor: "#65788B",
|
|
370
385
|
buttonColor: slate.slate10,
|
|
386
|
+
buttonPrimaryTextColor: slate.slate6,
|
|
371
387
|
menuTextColor: "#FFFFFF",
|
|
372
388
|
selectedMenuTextColor: "#FFFFFF",
|
|
373
389
|
actionMenuBg: whiteA.whiteA0,
|
|
@@ -414,19 +430,12 @@ const oldColors = {
|
|
|
414
430
|
//end
|
|
415
431
|
placeholderTextColor: "#65788B",
|
|
416
432
|
disabledInversedTextColor: lights.light,
|
|
417
|
-
codeColor: "#F24461",
|
|
418
|
-
codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
|
|
419
433
|
danger: brandColors.red,
|
|
420
434
|
active: brandColors.red,
|
|
421
435
|
warning: "#FFD41E",
|
|
422
436
|
cardBg: "#FFFFFF",
|
|
423
437
|
cardSelected: "#FFFB8F",
|
|
424
438
|
cardSelectedHover: "rgba(240, 244, 247, 0.6)",
|
|
425
|
-
menuSelected: "rgba(240, 244, 247, 1)",
|
|
426
|
-
menuSelectedHover: "rgba(240, 244, 247, 1)",
|
|
427
|
-
menuBg1: "#132331",
|
|
428
|
-
menuBg2: "rgba(255, 255, 255, 0.05)",
|
|
429
|
-
menuBg3: "rgba(255, 255, 255, 0.08)",
|
|
430
439
|
infoBox: "rgba(255, 212, 0, 0.2)",
|
|
431
440
|
errorBg: "rgba(255, 241, 240, 1)",
|
|
432
441
|
timelineCard: "#FCE07D",
|
|
@@ -458,28 +467,15 @@ export function getOldColors(): typeof oldColors {
|
|
|
458
467
|
return oldColors;
|
|
459
468
|
}
|
|
460
469
|
|
|
461
|
-
const getDefaultTheme = () => {
|
|
462
|
-
|
|
463
|
-
let theme = null;
|
|
464
|
-
try {
|
|
465
|
-
const flagsValue = localStorage.getItem("persist:flags");
|
|
466
|
-
const local = flagsValue ? JSON.parse(flagsValue) : {};
|
|
467
|
-
theme = local["not-light-theme"] ? null : "light";
|
|
468
|
-
} catch (e) {
|
|
469
|
-
// sl
|
|
470
|
-
}
|
|
471
|
-
return new URLSearchParams(document.location.search).get("theme") || theme || "old";
|
|
472
|
-
}
|
|
473
|
-
return "old";
|
|
470
|
+
const getDefaultTheme = (): never => {
|
|
471
|
+
throw Error("Please specify theme mode");
|
|
474
472
|
};
|
|
475
473
|
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
export function getThemeValue<T>(mode: Mode, values: Record<Mode, T>): T {
|
|
479
|
-
return values[mode];
|
|
474
|
+
export function getThemeValue<T>(theme: ThemeMode, values: Record<ThemeMode, T>): T {
|
|
475
|
+
return values[theme];
|
|
480
476
|
}
|
|
481
477
|
|
|
482
|
-
function getTypeColors(themeColor: string) {
|
|
478
|
+
function getTypeColors(themeColor: string, theme: ThemeMode) {
|
|
483
479
|
let color;
|
|
484
480
|
// switch to chroma.valid once we start using 2.0.1
|
|
485
481
|
try {
|
|
@@ -489,7 +485,8 @@ function getTypeColors(themeColor: string) {
|
|
|
489
485
|
color = brandColors.green;
|
|
490
486
|
}
|
|
491
487
|
const boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
|
|
492
|
-
|
|
488
|
+
|
|
489
|
+
const oldTypeColors = {
|
|
493
490
|
primary: color,
|
|
494
491
|
opacity: getOpacities(color),
|
|
495
492
|
darkenPrimary: getDarkenColor(color),
|
|
@@ -501,6 +498,43 @@ function getTypeColors(themeColor: string) {
|
|
|
501
498
|
focus: chroma(color).alpha(0.25).css(),
|
|
502
499
|
separator: chroma(color).alpha(0.3).css(),
|
|
503
500
|
};
|
|
501
|
+
|
|
502
|
+
const lightTypeColors = {
|
|
503
|
+
primary: color,
|
|
504
|
+
opacity: getOpacities(color),
|
|
505
|
+
darkenPrimary: getDarkenColor(color),
|
|
506
|
+
brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
|
|
507
|
+
boardBg: boardBg.hex(),
|
|
508
|
+
boardBgOverlay: boardBg.alpha(0.8).css(),
|
|
509
|
+
headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
|
|
510
|
+
detailsBg: chroma(color).alpha(0.6).luminance(0.85).hex(),
|
|
511
|
+
focus: chroma(color).alpha(0.25).css(),
|
|
512
|
+
separator: chroma(color).alpha(0.3).css(),
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
const darkTypeColors = {
|
|
516
|
+
primary: color,
|
|
517
|
+
opacity: getOpacities(color),
|
|
518
|
+
darkenPrimary: getDarkenColor(color),
|
|
519
|
+
brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
|
|
520
|
+
boardBg: boardBg.hex(),
|
|
521
|
+
boardBgOverlay: boardBg.alpha(0.8).css(),
|
|
522
|
+
headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
|
|
523
|
+
detailsBg: chroma(color).alpha(0.03).luminance(0.8).darken(0.1).hex(),
|
|
524
|
+
focus: chroma(color).alpha(0.25).css(),
|
|
525
|
+
separator: chroma(color).alpha(0.3).css(),
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
switch (theme) {
|
|
529
|
+
case "light":
|
|
530
|
+
return lightTypeColors;
|
|
531
|
+
case "dark":
|
|
532
|
+
return darkTypeColors;
|
|
533
|
+
case "old":
|
|
534
|
+
return oldTypeColors;
|
|
535
|
+
default:
|
|
536
|
+
return oldTypeColors;
|
|
537
|
+
}
|
|
504
538
|
}
|
|
505
539
|
|
|
506
540
|
type DesignColor = typeof darkColors | typeof lightColors | typeof oldColors;
|
|
@@ -513,13 +547,16 @@ const colorsByTheme: Record<string, DesignColor> = {
|
|
|
513
547
|
old: oldColors,
|
|
514
548
|
};
|
|
515
549
|
|
|
516
|
-
export const getThemeColors
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
}
|
|
550
|
+
export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColors = _.memoize(
|
|
551
|
+
(themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
|
|
552
|
+
const colors = colorsByTheme[theme];
|
|
553
|
+
return {
|
|
554
|
+
...getTypeColors(themeColor, theme),
|
|
555
|
+
...colors,
|
|
556
|
+
};
|
|
557
|
+
},
|
|
558
|
+
(themeColor, theme) => themeColor + theme
|
|
559
|
+
);
|
|
523
560
|
|
|
524
561
|
export const getTextColor = (color: string): string => {
|
|
525
562
|
return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
|
|
@@ -529,8 +566,15 @@ export const getBrightenColor = (color: string): string => {
|
|
|
529
566
|
return makeChromaColor(color).brighten(0.15).hex();
|
|
530
567
|
};
|
|
531
568
|
|
|
532
|
-
export const getLinkedHighlightBackgroundColor = (color: string): string => {
|
|
533
|
-
|
|
569
|
+
export const getLinkedHighlightBackgroundColor = (themeColors: ThemeColors, color: string): string => {
|
|
570
|
+
switch (themeColors.mode) {
|
|
571
|
+
case "dark":
|
|
572
|
+
return makeChromaColor(color).alpha(0.4).luminance(0.5).css("hsl");
|
|
573
|
+
case "light":
|
|
574
|
+
return makeChromaColor(color).alpha(0.3).luminance(0.6).css("hsl");
|
|
575
|
+
default:
|
|
576
|
+
return makeChromaColor(color).alpha(0.3).luminance(0.6).css("hsl");
|
|
577
|
+
}
|
|
534
578
|
};
|
|
535
579
|
|
|
536
580
|
export const cardTypeColors = [
|
|
@@ -555,7 +599,7 @@ export const cardTypeColors = [
|
|
|
555
599
|
export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
|
|
556
600
|
|
|
557
601
|
export const colors = {
|
|
558
|
-
...getTypeColors(brandColors.green),
|
|
602
|
+
...getTypeColors(brandColors.green, "light"),
|
|
559
603
|
brandColors,
|
|
560
604
|
stateColors,
|
|
561
605
|
textColor: "#2A3844",
|
|
@@ -564,20 +608,13 @@ export const colors = {
|
|
|
564
608
|
inversedTextColor: "#FFFFFF",
|
|
565
609
|
disabledInversedTextColor: lights.light,
|
|
566
610
|
linkColor: brandColors.blue,
|
|
567
|
-
codeColor: "#F24461",
|
|
568
|
-
codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
|
|
569
611
|
danger: brandColors.red,
|
|
570
612
|
active: brandColors.red,
|
|
571
613
|
warning: "#FFD41E",
|
|
572
614
|
cardBg: "#FFFFFF",
|
|
573
615
|
cardSelected: "#FFFB8F",
|
|
574
616
|
cardSelectedHover: "rgba(240, 244, 247, 0.6)",
|
|
575
|
-
menuSelected: "rgba(240, 244, 247, 1)",
|
|
576
|
-
menuSelectedHover: "rgba(240, 244, 247, 1)",
|
|
577
617
|
unitBg: "rgba(220, 224, 228, 0.33)",
|
|
578
|
-
menuBg1: "#132331",
|
|
579
|
-
menuBg2: "rgba(255, 255, 255, 0.075)",
|
|
580
|
-
menuBg3: "rgba(81, 182, 157, 0.2)",
|
|
581
618
|
infoBox: "rgba(255, 212, 0, 0.2)",
|
|
582
619
|
modalBg: "rgba(26, 42, 94, 0.3)",
|
|
583
620
|
errorBg: "rgba(255, 241, 240, 1)",
|
|
@@ -707,7 +744,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
|
|
|
707
744
|
return colorHash.hex(name);
|
|
708
745
|
});
|
|
709
746
|
|
|
710
|
-
export const themeVars = Object.keys(getThemeColors("#FFFFFF")).reduce((vars, key) => {
|
|
747
|
+
export const themeVars = Object.keys(getThemeColors("#FFFFFF", "light")).reduce((vars, key) => {
|
|
711
748
|
if (key === "opacity") {
|
|
712
749
|
vars[key] = Object.fromEntries(
|
|
713
750
|
Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--fibery-opacity-${opacityKey})`])
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {css} from "@linaria/core";
|
|
2
|
+
import {colors, getOpacities, layout, radius, space, textStyles} from "./designSystem";
|
|
3
|
+
import {Button} from "./Button";
|
|
4
|
+
import CloseIcon from "./icons/react/Close";
|
|
5
|
+
|
|
6
|
+
const errorAlert = css`
|
|
7
|
+
border: 1px solid ${colors.stateColors.error};
|
|
8
|
+
background-color: ${colors.errorBg};
|
|
9
|
+
padding: 0 ${space.l}px;
|
|
10
|
+
min-height: ${layout.itemHeight}px;
|
|
11
|
+
border-radius: ${radius}px;
|
|
12
|
+
display: flex;
|
|
13
|
+
gap: ${space.s}px;
|
|
14
|
+
align-items: center;
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
const messageStyle = css`
|
|
18
|
+
${textStyles.heading5}
|
|
19
|
+
`;
|
|
20
|
+
|
|
21
|
+
const descriptionStyle = css`
|
|
22
|
+
${textStyles.regular}
|
|
23
|
+
`;
|
|
24
|
+
|
|
25
|
+
const buttonColor = getOpacities(colors.placeholderTextColor).overlay;
|
|
26
|
+
|
|
27
|
+
export function ErrorAlert({
|
|
28
|
+
message,
|
|
29
|
+
description,
|
|
30
|
+
closable,
|
|
31
|
+
onClose,
|
|
32
|
+
}: {
|
|
33
|
+
message: string;
|
|
34
|
+
description?: string;
|
|
35
|
+
closable?: boolean;
|
|
36
|
+
onClose?: () => void;
|
|
37
|
+
}): JSX.Element {
|
|
38
|
+
return (
|
|
39
|
+
<div className={errorAlert}>
|
|
40
|
+
<div
|
|
41
|
+
className={css`
|
|
42
|
+
flex-grow: 2;
|
|
43
|
+
`}
|
|
44
|
+
>
|
|
45
|
+
<div className={messageStyle}>{message}</div>
|
|
46
|
+
{description ? <div className={descriptionStyle}>{description}</div> : null}
|
|
47
|
+
</div>
|
|
48
|
+
{closable && onClose ? (
|
|
49
|
+
<div>
|
|
50
|
+
<Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={26} />
|
|
51
|
+
</div>
|
|
52
|
+
) : null}
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
package/src/icons/Icon.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {css} from "@linaria/core";
|
|
2
|
-
import {
|
|
2
|
+
import {themeVars, iconSize as defaultIconSize, radius, viewBoxSize} from "../designSystem";
|
|
3
3
|
import {generateIconFromAst} from "./generateIconFromAst";
|
|
4
4
|
import {IconProps} from "./types";
|
|
5
5
|
import {getShiftStyle} from "./getShiftStyle";
|
|
@@ -37,7 +37,7 @@ export function Icon({
|
|
|
37
37
|
style={getShiftStyle({containerSize, elementSize: iconSize})}
|
|
38
38
|
className={iconStyle}
|
|
39
39
|
>
|
|
40
|
-
<g style={color === null ? {} : {fill: color ||
|
|
40
|
+
<g style={color === null ? {} : {fill: color || themeVars.textColor}}>{children}</g>
|
|
41
41
|
</svg>
|
|
42
42
|
) : (
|
|
43
43
|
generateIconFromAst(icon.icon.children[0], `svg-${icon.name}`, {
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const AppStoreOneColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.73 8.229v4.488a.9.9 0 0 1-.9.9h-4.5a.9.9 0 1 1 0-1.8h2.328L5.794 6.954A.9.9 0 0 1 7.067 5.68l4.863 4.863V8.23a.9.9 0 0 1 1.8 0Z"
|
|
6
|
+
const AppStoreOneColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fill":"hsl(205, 9.0%, 47.3%)"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.73 8.229v4.488a.9.9 0 0 1-.9.9h-4.5a.9.9 0 1 1 0-1.8h2.328L5.794 6.954A.9.9 0 0 1 7.067 5.68l4.863 4.863V8.23a.9.9 0 0 1 1.8 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M1.03 5.7c0-4.113.588-4.7 4.7-4.7 4.113 0 4.7.587 4.7 4.7 0 .43-.006.821-.022 1.177l-1.59-1.59c-.01-.718-.046-1.24-.12-1.631-.084-.45-.197-.602-.259-.665-.062-.062-.215-.174-.664-.26-.462-.086-1.108-.121-2.045-.121-.937 0-1.582.035-2.044.122-.45.085-.602.197-.665.26-.062.062-.174.214-.259.664-.087.462-.122 1.107-.122 2.044s.035 1.582.122 2.044c.085.45.197.602.26.665.062.062.214.174.664.26.408.076.959.112 1.727.12l1.584 1.584c-.38.02-.8.027-1.267.027-4.113 0-4.7-.587-4.7-4.7ZM13.56 18.295c-3.555 0-4.48-.245-4.663-3.022h1.619c.018.213.046.203.076.366.085.45.197.602.26.665.062.062.214.174.664.259.462.087 1.108.122 2.045.122.937 0 1.582-.035 2.044-.122.45-.085.602-.197.664-.26.063-.062.175-.214.26-.664.087-.462.122-1.107.122-2.044s-.035-1.583-.122-2.045c-.085-.45-.197-.602-.26-.664-.062-.062-.214-.175-.664-.26-.163-.03-.157-.035-.37-.054V8.953c2.778.184 3.026 1.085 3.026 4.642 0 4.112-.588 4.7-4.7 4.7Z"},"children":[]}]}],"metadata":""}]},"name":"app-store-one-color"};
|
|
7
7
|
|
|
8
8
|
export default AppStoreOneColor;
|
package/src/icons/ast/Checked.ts
CHANGED
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const Checked: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const Checked: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.79 15.1c.406 0 .721-.155.936-.482l5.553-8.486c.155-.239.221-.459.221-.667 0-.56-.417-.965-.99-.965-.392 0-.637.143-.875.518L8.76 12.7 6.288 9.633c-.22-.262-.46-.38-.793-.38-.578 0-.995.41-.995.97 0 .25.077.47.292.714l3.075 3.722c.256.304.542.441.923.441Z"},"children":[]}],"metadata":""}]},"name":"checked"};
|
|
7
7
|
|
|
8
8
|
export default Checked;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const ExtensionAvatar: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const ExtensionAvatar: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.904 8.585a3.071 3.071 0 1 1 6.143 0 3.071 3.071 0 0 1-6.143 0Zm3.072-1.57a1.571 1.571 0 1 0 0 3.141 1.571 1.571 0 0 0 0-3.142Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M5.555 3.348a8 8 0 1 1 8.89 13.304 8 8 0 0 1-8.89-13.304Zm.89 11.973a6.4 6.4 0 0 0 7.338-.159 1.571 1.571 0 0 0-1.486-1.06H7.654a1.571 1.571 0 0 0-1.475 1.032c.086.064.175.127.265.187Zm-1.4-1.27A6.402 6.402 0 0 1 8.752 3.724a6.4 6.4 0 0 1 6.175 10.363 3.07 3.07 0 0 0-2.63-1.484H7.655a3.07 3.07 0 0 0-2.608 1.45Z"},"children":[]}]}],"metadata":""}]},"name":"extension-avatar"};
|
|
7
7
|
|
|
8
8
|
export default ExtensionAvatar;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const Integration: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const Integration: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"m7.735 5.927.7.7-.7.699A.803.803 0 1 0 8.872 8.46l.7-.699 2.667 2.668-.7.699a.8.8 0 0 0-.006 1.142.802.802 0 0 0 1.142-.007l.7-.699.7.7a.803.803 0 0 0 1.135 0l.634-.634a5.292 5.292 0 0 0 .523-6.861l1.375-1.376a.815.815 0 0 0 .211-.318.802.802 0 0 0-1.098-1 .804.804 0 0 0-.248.183L15.23 3.634a5.283 5.283 0 0 0-6.861.523l-.634.634a.803.803 0 0 0 0 1.136Zm6.972 4.569-.066.066-4.525-4.525-.678-.678.066-.066a3.655 3.655 0 0 1 5.203 0 3.658 3.658 0 0 1 0 5.203ZM12.248 15.226a.772.772 0 0 0 .049-.05l.006-.007a.803.803 0 0 0-.053-1.082L5.912 7.75a.803.803 0 0 0-1.135 0l-.634.634a5.283 5.283 0 0 0-.523 6.862l-1.378 1.377a.804.804 0 1 0 1.136 1.136l1.377-1.378a5.292 5.292 0 0 0 6.862-.523l.63-.63ZM5.278 9.52l.066-.067 5.204 5.204-.066.066a3.658 3.658 0 0 1-5.204 0 3.658 3.658 0 0 1 0-5.203Z"},"children":[]}]}],"metadata":""}]},"name":"integration"};
|
|
7
7
|
|
|
8
8
|
export default Integration;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageAlignCenter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageAlignCenter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.6 8.6v2.8h4.8V8.6H7.6ZM7 7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H7ZM3 4.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85A.85.85 0 0 1 3 4.15ZM3 16.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85a.85.85 0 0 1-.85-.85Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-align-center"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageAlignCenter;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageAlignLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageAlignLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M4.5 8.5v3h5v-3h-5ZM4 7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H4ZM3 4.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85A.85.85 0 0 1 3 4.15ZM3 16.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85a.85.85 0 0 1-.85-.85Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-align-left"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageAlignLeft;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageAlignRight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageAlignRight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.6 8.6v2.8h4.8V8.6h-4.8ZM10 7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-6ZM3 4.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85A.85.85 0 0 1 3 4.15ZM3 16.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85a.85.85 0 0 1-.85-.85Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-align-right"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageAlignRight;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageUpload: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageUpload: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M5.232 7.172a1.94 1.94 0 1 1 3.88 0 1.94 1.94 0 0 1-3.88 0Zm1.94-.485a.485.485 0 1 0 0 .97.485.485 0 0 0 0-.97Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M18 12.419V4.343A2.343 2.343 0 0 0 15.657 2H4.343A2.343 2.343 0 0 0 2 4.343v11.314A2.343 2.343 0 0 0 4.343 18h11.314A2.343 2.343 0 0 0 18 15.657v-3.238ZM4.343 3.455a.889.889 0 0 0-.888.888v11.314c0 .4.263.737.626.85l8.637-8.637a.727.727 0 0 1 1.029 0l2.799 2.798V4.343a.889.889 0 0 0-.89-.888H4.344Zm12.203 9.27-3.314-3.313L6.1 16.545h9.558c.49 0 .889-.398.889-.888v-2.932Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-upload"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageUpload;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageWrapCenter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageWrapCenter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.2 8.6v2.8h3.6V8.6H8.2ZM8 7c-.5 0-1 .448-1 1v4c0 .552.5 1 1 1h4c.5 0 1-.448 1-1V8c0-.552-.5-1-1-1H8ZM3 4.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85A.85.85 0 0 1 3 4.15ZM3 16.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85a.85.85 0 0 1-.85-.85ZM3 12c0-.552.5-1 1-1s1 .448 1 1-.5 1-1 1-1-.448-1-1ZM3 8c0-.552.5-1 1-1s1 .448 1 1-.5 1-1 1-1-.448-1-1ZM15 8c0-.552.5-1 1-1s1 .448 1 1-.5 1-1 1-1-.448-1-1ZM15 12c0-.552.5-1 1-1s1 .448 1 1-.5 1-1 1-1-.448-1-1Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-wrap-center"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageWrapCenter;
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
import { IconDefinition } from '../types';
|
|
5
5
|
|
|
6
|
-
const RicheditorImageWrapLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"
|
|
6
|
+
const RicheditorImageWrapLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M4.6 8.6v2.8h4.8V8.6H4.6ZM4 7a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H4ZM3 4.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85A.85.85 0 0 1 3 4.15ZM3 16.15c0-.47.38-.85.85-.85h12.3a.85.85 0 0 1 0 1.7H3.85a.85.85 0 0 1-.85-.85ZM13 8c0-.552.5-1 1-1h2c.5 0 1 .448 1 1s-.5 1-1 1h-2c-.5 0-1-.448-1-1ZM13 12c0-.552.5-1 1-1h2c.5 0 1 .448 1 1s-.5 1-1 1h-2c-.5 0-1-.448-1-1Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-wrap-left"};
|
|
7
7
|
|
|
8
8
|
export default RicheditorImageWrapLeft;
|