lecom-ui 5.3.19 → 5.3.21
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/README.md +1 -1
- package/dist/components/Collapse/Collapse.js +94 -0
- package/dist/components/DataTable/DataTable.utils.js +37 -30
- package/dist/components/DataTable/Table.js +1 -0
- package/dist/plugin/extend.js +78 -78
- package/dist/plugin/fontFaces.js +172 -172
- package/dist/plugin/general.js +12 -12
- package/dist/plugin/pluginDev.cjs +5 -5
- package/dist/plugin/pluginNext.cjs +5 -5
- package/dist/plugin/pluginNextTurbo.cjs +5 -5
- package/dist/plugin/pluginVite.cjs +5 -5
- package/dist/plugin/template.js +31 -31
- package/dist/plugin/typographies.js +152 -152
- package/dist/plugin/varsTheme.js +79 -79
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
lecom-ui
|
|
1
|
+
lecom-ui
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { ChevronRight } from 'lucide-react';
|
|
6
|
+
|
|
7
|
+
const collapseTriggerVariants = cva(
|
|
8
|
+
"flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
small: "text-sm py-1.5 px-4 min-h-8",
|
|
13
|
+
medium: "text-base py-2.5 px-4 min-h-10",
|
|
14
|
+
large: "text-lg py-3 px-4 min-h-12"
|
|
15
|
+
},
|
|
16
|
+
ghost: {
|
|
17
|
+
true: "bg-transparent border-none",
|
|
18
|
+
false: "border-t-none border-grey-400"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
size: "large",
|
|
23
|
+
ghost: false
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
const CollapseRoot = AccordionPrimitive.Root;
|
|
28
|
+
const CollapseItem = AccordionPrimitive.Item;
|
|
29
|
+
const CollapsePanel = React.forwardRef(
|
|
30
|
+
({
|
|
31
|
+
header,
|
|
32
|
+
children,
|
|
33
|
+
extra,
|
|
34
|
+
expandIconPosition = "start",
|
|
35
|
+
size = "large",
|
|
36
|
+
ghost = false,
|
|
37
|
+
disabled = false,
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}, ref) => /* @__PURE__ */ React.createElement(
|
|
41
|
+
CollapseItem,
|
|
42
|
+
{
|
|
43
|
+
ref,
|
|
44
|
+
...props,
|
|
45
|
+
className: cn(
|
|
46
|
+
"group w-full",
|
|
47
|
+
disabled && "pointer-events-none opacity-50",
|
|
48
|
+
className
|
|
49
|
+
)
|
|
50
|
+
},
|
|
51
|
+
/* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
52
|
+
AccordionPrimitive.Trigger,
|
|
53
|
+
{
|
|
54
|
+
disabled,
|
|
55
|
+
className: cn(
|
|
56
|
+
collapseTriggerVariants({ size, ghost }),
|
|
57
|
+
"flex gap-2 items-center text-left font-normal"
|
|
58
|
+
)
|
|
59
|
+
},
|
|
60
|
+
/* @__PURE__ */ React.createElement(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
className: cn(
|
|
64
|
+
"flex flex-1 items-center justify-between gap-4 w-full",
|
|
65
|
+
expandIconPosition === "end" ? "flex-row-reverse" : ""
|
|
66
|
+
)
|
|
67
|
+
},
|
|
68
|
+
/* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
|
|
69
|
+
"span",
|
|
70
|
+
{
|
|
71
|
+
className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
|
|
72
|
+
},
|
|
73
|
+
/* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
|
|
74
|
+
), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
|
|
75
|
+
extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
|
|
76
|
+
)
|
|
77
|
+
)),
|
|
78
|
+
/* @__PURE__ */ React.createElement(
|
|
79
|
+
AccordionPrimitive.Content,
|
|
80
|
+
{
|
|
81
|
+
className: cn(
|
|
82
|
+
"overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
|
|
83
|
+
)
|
|
84
|
+
},
|
|
85
|
+
/* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
|
|
86
|
+
)
|
|
87
|
+
)
|
|
88
|
+
);
|
|
89
|
+
CollapsePanel.displayName = "CollapsePanel";
|
|
90
|
+
const Collapse = Object.assign(CollapseRoot, {
|
|
91
|
+
Panel: CollapsePanel
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
export { Collapse, collapseTriggerVariants };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { cn } from '../../lib/utils.js';
|
|
3
|
-
import { ArrowUpDown } from 'lucide-react';
|
|
3
|
+
import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
|
|
4
4
|
import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
5
5
|
import { Typography } from '../Typography/Typography.js';
|
|
6
6
|
|
|
@@ -31,36 +31,47 @@ function buildCellSelect({
|
|
|
31
31
|
}
|
|
32
32
|
);
|
|
33
33
|
}
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
function renderSortArrow({
|
|
35
|
+
column,
|
|
36
|
+
externalColumn,
|
|
37
|
+
table
|
|
37
38
|
}) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (
|
|
45
|
-
|
|
39
|
+
const sorted = column.getIsSorted();
|
|
40
|
+
const handleClick = (event) => {
|
|
41
|
+
event.stopPropagation();
|
|
42
|
+
const sortingHandler = column.getToggleSortingHandler?.();
|
|
43
|
+
if (externalColumn.onSort) {
|
|
44
|
+
externalColumn.onSort({ table, column });
|
|
45
|
+
} else if (sortingHandler) {
|
|
46
|
+
sortingHandler(event);
|
|
46
47
|
}
|
|
48
|
+
};
|
|
49
|
+
if (sorted === "asc") {
|
|
50
|
+
return /* @__PURE__ */ React.createElement(ArrowUp, { size: 16, className: "ml-1 text-grey-950", onClick: handleClick });
|
|
51
|
+
}
|
|
52
|
+
if (sorted === "desc") {
|
|
47
53
|
return /* @__PURE__ */ React.createElement(
|
|
48
|
-
|
|
54
|
+
ArrowDown,
|
|
49
55
|
{
|
|
50
56
|
size: 16,
|
|
51
|
-
className: "ml-1 text-grey-
|
|
52
|
-
onClick:
|
|
53
|
-
event.stopPropagation();
|
|
54
|
-
const sortingHandler = column.getToggleSortingHandler?.();
|
|
55
|
-
if (externalColumn.onSort) {
|
|
56
|
-
externalColumn.onSort({ table, column });
|
|
57
|
-
} else if (sortingHandler) {
|
|
58
|
-
sortingHandler(event);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
57
|
+
className: "ml-1 text-grey-950",
|
|
58
|
+
onClick: handleClick
|
|
61
59
|
}
|
|
62
60
|
);
|
|
63
61
|
}
|
|
62
|
+
return /* @__PURE__ */ React.createElement(
|
|
63
|
+
ArrowUpDown,
|
|
64
|
+
{
|
|
65
|
+
size: 16,
|
|
66
|
+
className: "ml-1 text-grey-400 group-hover:text-grey-950",
|
|
67
|
+
onClick: handleClick
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
function buildColumns({
|
|
72
|
+
columns,
|
|
73
|
+
size = "middle"
|
|
74
|
+
}) {
|
|
64
75
|
const mappedColumns = columns.map((externalColumn) => ({
|
|
65
76
|
accessorKey: externalColumn.key,
|
|
66
77
|
header: ({ table, column }) => {
|
|
@@ -86,7 +97,8 @@ function buildColumns({
|
|
|
86
97
|
className: cn(
|
|
87
98
|
"group flex items-center gap-1",
|
|
88
99
|
hasSort && "hover:cursor-pointer"
|
|
89
|
-
)
|
|
100
|
+
),
|
|
101
|
+
onClick: () => externalColumn.onSort?.({ table, column })
|
|
90
102
|
},
|
|
91
103
|
typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
|
|
92
104
|
Typography,
|
|
@@ -98,12 +110,7 @@ function buildColumns({
|
|
|
98
110
|
},
|
|
99
111
|
externalColumn.title
|
|
100
112
|
) : title,
|
|
101
|
-
renderSortArrow({
|
|
102
|
-
hasSort,
|
|
103
|
-
column,
|
|
104
|
-
externalColumn,
|
|
105
|
-
table
|
|
106
|
-
})
|
|
113
|
+
hasSort && renderSortArrow({ column, externalColumn, table })
|
|
107
114
|
);
|
|
108
115
|
},
|
|
109
116
|
cell: ({ row }) => {
|
|
@@ -49,6 +49,7 @@ function Table({
|
|
|
49
49
|
className: cn(
|
|
50
50
|
"h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
|
|
51
51
|
size === "small" && "h-10",
|
|
52
|
+
header.column.getIsSorted() && "bg-grey-50 font-medium",
|
|
52
53
|
header.column.columnDef.meta?.headerClassName
|
|
53
54
|
),
|
|
54
55
|
"data-header": header.id,
|
package/dist/plugin/extend.js
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
const extend = {
|
|
2
|
-
colors: {
|
|
3
|
-
background: 'hsl(var(--background))',
|
|
4
|
-
foreground: 'hsl(var(--foreground))',
|
|
5
|
-
card: {
|
|
6
|
-
DEFAULT: 'hsl(var(--card))',
|
|
7
|
-
foreground: 'hsl(var(--card-foreground))',
|
|
8
|
-
},
|
|
9
|
-
popover: {
|
|
10
|
-
DEFAULT: 'hsl(var(--popover))',
|
|
11
|
-
foreground: 'hsl(var(--popover-foreground))',
|
|
12
|
-
},
|
|
13
|
-
primary: {
|
|
14
|
-
DEFAULT: 'hsl(var(--primary))',
|
|
15
|
-
foreground: 'hsl(var(--primary-foreground))',
|
|
16
|
-
},
|
|
17
|
-
secondary: {
|
|
18
|
-
DEFAULT: 'hsl(var(--secondary))',
|
|
19
|
-
foreground: 'hsl(var(--secondary-foreground))',
|
|
20
|
-
},
|
|
21
|
-
muted: {
|
|
22
|
-
DEFAULT: 'hsl(var(--muted))',
|
|
23
|
-
foreground: 'hsl(var(--muted-foreground))',
|
|
24
|
-
},
|
|
25
|
-
accent: {
|
|
26
|
-
DEFAULT: 'hsl(var(--accent))',
|
|
27
|
-
foreground: 'hsl(var(--accent-foreground))',
|
|
28
|
-
},
|
|
29
|
-
destructive: {
|
|
30
|
-
DEFAULT: 'hsl(var(--destructive))',
|
|
31
|
-
foreground: 'hsl(var(--destructive-foreground))',
|
|
32
|
-
},
|
|
33
|
-
border: 'hsl(var(--border))',
|
|
34
|
-
input: 'hsl(var(--input))',
|
|
35
|
-
ring: 'hsl(var(--ring))',
|
|
36
|
-
chart: {
|
|
37
|
-
1: 'hsl(var(--chart-1))',
|
|
38
|
-
2: 'hsl(var(--chart-2))',
|
|
39
|
-
3: 'hsl(var(--chart-3))',
|
|
40
|
-
4: 'hsl(var(--chart-4))',
|
|
41
|
-
5: 'hsl(var(--chart-5))',
|
|
42
|
-
6: 'hsl(var(--chart-6))',
|
|
43
|
-
7: 'hsl(var(--chart-7))',
|
|
44
|
-
8: 'hsl(var(--chart-8))',
|
|
45
|
-
},
|
|
46
|
-
sidebar: {
|
|
47
|
-
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
48
|
-
foreground: 'hsl(var(--sidebar-foreground))',
|
|
49
|
-
primary: 'hsl(var(--sidebar-primary))',
|
|
50
|
-
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
51
|
-
accent: 'hsl(var(--sidebar-accent))',
|
|
52
|
-
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
53
|
-
border: 'hsl(var(--sidebar-border))',
|
|
54
|
-
ring: 'hsl(var(--sidebar-ring))',
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
|
-
borderRadius: {
|
|
58
|
-
lg: 'var(--radius)',
|
|
59
|
-
md: 'calc(var(--radius) - 2px)',
|
|
60
|
-
sm: 'calc(var(--radius) - 4px)',
|
|
61
|
-
},
|
|
62
|
-
keyframes: {
|
|
63
|
-
'accordion-down': {
|
|
64
|
-
from: { height: '0' },
|
|
65
|
-
to: { height: 'var(--radix-accordion-content-height)' },
|
|
66
|
-
},
|
|
67
|
-
'accordion-up': {
|
|
68
|
-
from: { height: 'var(--radix-accordion-content-height)' },
|
|
69
|
-
to: { height: '0' },
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
animation: {
|
|
73
|
-
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
74
|
-
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
75
|
-
},
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export { extend };
|
|
1
|
+
const extend = {
|
|
2
|
+
colors: {
|
|
3
|
+
background: 'hsl(var(--background))',
|
|
4
|
+
foreground: 'hsl(var(--foreground))',
|
|
5
|
+
card: {
|
|
6
|
+
DEFAULT: 'hsl(var(--card))',
|
|
7
|
+
foreground: 'hsl(var(--card-foreground))',
|
|
8
|
+
},
|
|
9
|
+
popover: {
|
|
10
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
11
|
+
foreground: 'hsl(var(--popover-foreground))',
|
|
12
|
+
},
|
|
13
|
+
primary: {
|
|
14
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
15
|
+
foreground: 'hsl(var(--primary-foreground))',
|
|
16
|
+
},
|
|
17
|
+
secondary: {
|
|
18
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
19
|
+
foreground: 'hsl(var(--secondary-foreground))',
|
|
20
|
+
},
|
|
21
|
+
muted: {
|
|
22
|
+
DEFAULT: 'hsl(var(--muted))',
|
|
23
|
+
foreground: 'hsl(var(--muted-foreground))',
|
|
24
|
+
},
|
|
25
|
+
accent: {
|
|
26
|
+
DEFAULT: 'hsl(var(--accent))',
|
|
27
|
+
foreground: 'hsl(var(--accent-foreground))',
|
|
28
|
+
},
|
|
29
|
+
destructive: {
|
|
30
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
31
|
+
foreground: 'hsl(var(--destructive-foreground))',
|
|
32
|
+
},
|
|
33
|
+
border: 'hsl(var(--border))',
|
|
34
|
+
input: 'hsl(var(--input))',
|
|
35
|
+
ring: 'hsl(var(--ring))',
|
|
36
|
+
chart: {
|
|
37
|
+
1: 'hsl(var(--chart-1))',
|
|
38
|
+
2: 'hsl(var(--chart-2))',
|
|
39
|
+
3: 'hsl(var(--chart-3))',
|
|
40
|
+
4: 'hsl(var(--chart-4))',
|
|
41
|
+
5: 'hsl(var(--chart-5))',
|
|
42
|
+
6: 'hsl(var(--chart-6))',
|
|
43
|
+
7: 'hsl(var(--chart-7))',
|
|
44
|
+
8: 'hsl(var(--chart-8))',
|
|
45
|
+
},
|
|
46
|
+
sidebar: {
|
|
47
|
+
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
48
|
+
foreground: 'hsl(var(--sidebar-foreground))',
|
|
49
|
+
primary: 'hsl(var(--sidebar-primary))',
|
|
50
|
+
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
51
|
+
accent: 'hsl(var(--sidebar-accent))',
|
|
52
|
+
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
53
|
+
border: 'hsl(var(--sidebar-border))',
|
|
54
|
+
ring: 'hsl(var(--sidebar-ring))',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
borderRadius: {
|
|
58
|
+
lg: 'var(--radius)',
|
|
59
|
+
md: 'calc(var(--radius) - 2px)',
|
|
60
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
61
|
+
},
|
|
62
|
+
keyframes: {
|
|
63
|
+
'accordion-down': {
|
|
64
|
+
from: { height: '0' },
|
|
65
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
66
|
+
},
|
|
67
|
+
'accordion-up': {
|
|
68
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
69
|
+
to: { height: '0' },
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
animation: {
|
|
73
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
74
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export { extend };
|
package/dist/plugin/fontFaces.js
CHANGED
|
@@ -1,172 +1,172 @@
|
|
|
1
|
-
const fontFaces = (publicPath) => [
|
|
2
|
-
{
|
|
3
|
-
fontFamily: 'Roboto',
|
|
4
|
-
fontStyle: 'italic',
|
|
5
|
-
fontWeight: '100',
|
|
6
|
-
fontDisplay: 'swap',
|
|
7
|
-
src: `url('${publicPath}/fonts/Roboto/thin-100-italic.woff2')`,
|
|
8
|
-
},
|
|
9
|
-
{
|
|
10
|
-
fontFamily: 'Roboto',
|
|
11
|
-
fontStyle: 'italic',
|
|
12
|
-
fontWeight: '300',
|
|
13
|
-
fontDisplay: 'swap',
|
|
14
|
-
src: `url('${publicPath}/fonts/Roboto/light-300-italic.woff2')`,
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
fontFamily: 'Roboto',
|
|
18
|
-
fontStyle: 'italic',
|
|
19
|
-
fontWeight: '400',
|
|
20
|
-
fontDisplay: 'swap',
|
|
21
|
-
src: `url('${publicPath}/fonts/Roboto/regular-400-italic.woff2')`,
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
fontFamily: 'Roboto',
|
|
25
|
-
fontStyle: 'italic',
|
|
26
|
-
fontWeight: '500',
|
|
27
|
-
fontDisplay: 'swap',
|
|
28
|
-
src: `url('${publicPath}/fonts/Roboto/medium-500-italic.woff2')`,
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
fontFamily: 'Roboto',
|
|
32
|
-
fontStyle: 'italic',
|
|
33
|
-
fontWeight: '700',
|
|
34
|
-
fontDisplay: 'swap',
|
|
35
|
-
src: `url('${publicPath}/fonts/Roboto/bold-700-italic.woff2')`,
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
fontFamily: 'Roboto',
|
|
39
|
-
fontStyle: 'italic',
|
|
40
|
-
fontWeight: '900',
|
|
41
|
-
fontDisplay: 'swap',
|
|
42
|
-
src: `url('${publicPath}/fonts/Roboto/black-900-italic.woff2')`,
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
fontFamily: 'Roboto',
|
|
46
|
-
fontStyle: 'normal',
|
|
47
|
-
fontWeight: '100',
|
|
48
|
-
fontDisplay: 'swap',
|
|
49
|
-
src: `url('${publicPath}/fonts/Roboto/thin-100.woff2')`,
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
fontFamily: 'Roboto',
|
|
53
|
-
fontStyle: 'normal',
|
|
54
|
-
fontWeight: '300',
|
|
55
|
-
fontDisplay: 'swap',
|
|
56
|
-
src: `url('${publicPath}/fonts/Roboto/light-300.woff2')`,
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
fontFamily: 'Roboto',
|
|
60
|
-
fontStyle: 'normal',
|
|
61
|
-
fontWeight: '400',
|
|
62
|
-
fontDisplay: 'swap',
|
|
63
|
-
src: `url('${publicPath}/fonts/Roboto/regular-400.woff2')`,
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
fontFamily: 'Roboto',
|
|
67
|
-
fontStyle: 'normal',
|
|
68
|
-
fontWeight: '500',
|
|
69
|
-
fontDisplay: 'swap',
|
|
70
|
-
src: `url('${publicPath}/fonts/Roboto/medium-500.woff2')`,
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
fontFamily: 'Roboto',
|
|
74
|
-
fontStyle: 'normal',
|
|
75
|
-
fontWeight: '700',
|
|
76
|
-
fontDisplay: 'swap',
|
|
77
|
-
src: `url('${publicPath}/fonts/Roboto/bold-700.woff2')`,
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
fontFamily: 'Roboto',
|
|
81
|
-
fontStyle: 'normal',
|
|
82
|
-
fontWeight: '900',
|
|
83
|
-
fontDisplay: 'swap',
|
|
84
|
-
src: `url('${publicPath}/fonts/Roboto/black-900.woff2')`,
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
fontFamily: 'Montserrat',
|
|
88
|
-
fontStyle: 'italic',
|
|
89
|
-
fontWeight: '100 900',
|
|
90
|
-
fontDisplay: 'swap',
|
|
91
|
-
src: `url('${publicPath}/fonts/Montserrat/italic.woff2')`,
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
fontFamily: 'Montserrat',
|
|
95
|
-
fontStyle: 'normal',
|
|
96
|
-
fontWeight: '100 900',
|
|
97
|
-
fontDisplay: 'swap',
|
|
98
|
-
src: `url('${publicPath}/fonts/Montserrat/normal.woff2')`,
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
fontFamily: 'IBM Plex Mono',
|
|
102
|
-
fontStyle: 'italic',
|
|
103
|
-
fontWeight: '100',
|
|
104
|
-
fontDisplay: 'swap',
|
|
105
|
-
src: `url('${publicPath}/fonts/Ibm/thin-100-italic.woff2')`,
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
fontFamily: 'IBM Plex Mono',
|
|
109
|
-
fontStyle: 'italic',
|
|
110
|
-
fontWeight: '300',
|
|
111
|
-
fontDisplay: 'swap',
|
|
112
|
-
src: `url('${publicPath}/fonts/Ibm/light-300-italic.woff2')`,
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
fontFamily: 'IBM Plex Mono',
|
|
116
|
-
fontStyle: 'italic',
|
|
117
|
-
fontWeight: '400',
|
|
118
|
-
fontDisplay: 'swap',
|
|
119
|
-
src: `url('${publicPath}/fonts/Ibm/regular-400-italic.woff2')`,
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
fontFamily: 'IBM Plex Mono',
|
|
123
|
-
fontStyle: 'italic',
|
|
124
|
-
fontWeight: '500',
|
|
125
|
-
fontDisplay: 'swap',
|
|
126
|
-
src: `url('${publicPath}/fonts/Ibm/medium-500-italic.woff2')`,
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
fontFamily: 'IBM Plex Mono',
|
|
130
|
-
fontStyle: 'italic',
|
|
131
|
-
fontWeight: '700',
|
|
132
|
-
fontDisplay: 'swap',
|
|
133
|
-
src: `url('${publicPath}/fonts/Ibm/bold-700-italic.woff2')`,
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
fontFamily: 'IBM Plex Mono',
|
|
137
|
-
fontStyle: 'normal',
|
|
138
|
-
fontWeight: '100',
|
|
139
|
-
fontDisplay: 'swap',
|
|
140
|
-
src: `url('${publicPath}/fonts/Ibm/thin-100.woff2')`,
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
fontFamily: 'IBM Plex Mono',
|
|
144
|
-
fontStyle: 'normal',
|
|
145
|
-
fontWeight: '300',
|
|
146
|
-
fontDisplay: 'swap',
|
|
147
|
-
src: `url('${publicPath}/fonts/Ibm/light-300.woff2')`,
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
fontFamily: 'IBM Plex Mono',
|
|
151
|
-
fontStyle: 'normal',
|
|
152
|
-
fontWeight: '400',
|
|
153
|
-
fontDisplay: 'swap',
|
|
154
|
-
src: `url('${publicPath}/fonts/Ibm/regular-400.woff2')`,
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
fontFamily: 'IBM Plex Mono',
|
|
158
|
-
fontStyle: 'normal',
|
|
159
|
-
fontWeight: '500',
|
|
160
|
-
fontDisplay: 'swap',
|
|
161
|
-
src: `url('${publicPath}/fonts/Ibm/medium-500.woff2')`,
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
fontFamily: 'IBM Plex Mono',
|
|
165
|
-
fontStyle: 'normal',
|
|
166
|
-
fontWeight: '700',
|
|
167
|
-
fontDisplay: 'swap',
|
|
168
|
-
src: `url('${publicPath}/fonts/Ibm/bold-700.woff2')`,
|
|
169
|
-
},
|
|
170
|
-
];
|
|
171
|
-
|
|
172
|
-
export { fontFaces };
|
|
1
|
+
const fontFaces = (publicPath) => [
|
|
2
|
+
{
|
|
3
|
+
fontFamily: 'Roboto',
|
|
4
|
+
fontStyle: 'italic',
|
|
5
|
+
fontWeight: '100',
|
|
6
|
+
fontDisplay: 'swap',
|
|
7
|
+
src: `url('${publicPath}/fonts/Roboto/thin-100-italic.woff2')`,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
fontFamily: 'Roboto',
|
|
11
|
+
fontStyle: 'italic',
|
|
12
|
+
fontWeight: '300',
|
|
13
|
+
fontDisplay: 'swap',
|
|
14
|
+
src: `url('${publicPath}/fonts/Roboto/light-300-italic.woff2')`,
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
fontFamily: 'Roboto',
|
|
18
|
+
fontStyle: 'italic',
|
|
19
|
+
fontWeight: '400',
|
|
20
|
+
fontDisplay: 'swap',
|
|
21
|
+
src: `url('${publicPath}/fonts/Roboto/regular-400-italic.woff2')`,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
fontFamily: 'Roboto',
|
|
25
|
+
fontStyle: 'italic',
|
|
26
|
+
fontWeight: '500',
|
|
27
|
+
fontDisplay: 'swap',
|
|
28
|
+
src: `url('${publicPath}/fonts/Roboto/medium-500-italic.woff2')`,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
fontFamily: 'Roboto',
|
|
32
|
+
fontStyle: 'italic',
|
|
33
|
+
fontWeight: '700',
|
|
34
|
+
fontDisplay: 'swap',
|
|
35
|
+
src: `url('${publicPath}/fonts/Roboto/bold-700-italic.woff2')`,
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
fontFamily: 'Roboto',
|
|
39
|
+
fontStyle: 'italic',
|
|
40
|
+
fontWeight: '900',
|
|
41
|
+
fontDisplay: 'swap',
|
|
42
|
+
src: `url('${publicPath}/fonts/Roboto/black-900-italic.woff2')`,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
fontFamily: 'Roboto',
|
|
46
|
+
fontStyle: 'normal',
|
|
47
|
+
fontWeight: '100',
|
|
48
|
+
fontDisplay: 'swap',
|
|
49
|
+
src: `url('${publicPath}/fonts/Roboto/thin-100.woff2')`,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
fontFamily: 'Roboto',
|
|
53
|
+
fontStyle: 'normal',
|
|
54
|
+
fontWeight: '300',
|
|
55
|
+
fontDisplay: 'swap',
|
|
56
|
+
src: `url('${publicPath}/fonts/Roboto/light-300.woff2')`,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
fontFamily: 'Roboto',
|
|
60
|
+
fontStyle: 'normal',
|
|
61
|
+
fontWeight: '400',
|
|
62
|
+
fontDisplay: 'swap',
|
|
63
|
+
src: `url('${publicPath}/fonts/Roboto/regular-400.woff2')`,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
fontFamily: 'Roboto',
|
|
67
|
+
fontStyle: 'normal',
|
|
68
|
+
fontWeight: '500',
|
|
69
|
+
fontDisplay: 'swap',
|
|
70
|
+
src: `url('${publicPath}/fonts/Roboto/medium-500.woff2')`,
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
fontFamily: 'Roboto',
|
|
74
|
+
fontStyle: 'normal',
|
|
75
|
+
fontWeight: '700',
|
|
76
|
+
fontDisplay: 'swap',
|
|
77
|
+
src: `url('${publicPath}/fonts/Roboto/bold-700.woff2')`,
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
fontFamily: 'Roboto',
|
|
81
|
+
fontStyle: 'normal',
|
|
82
|
+
fontWeight: '900',
|
|
83
|
+
fontDisplay: 'swap',
|
|
84
|
+
src: `url('${publicPath}/fonts/Roboto/black-900.woff2')`,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
fontFamily: 'Montserrat',
|
|
88
|
+
fontStyle: 'italic',
|
|
89
|
+
fontWeight: '100 900',
|
|
90
|
+
fontDisplay: 'swap',
|
|
91
|
+
src: `url('${publicPath}/fonts/Montserrat/italic.woff2')`,
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
fontFamily: 'Montserrat',
|
|
95
|
+
fontStyle: 'normal',
|
|
96
|
+
fontWeight: '100 900',
|
|
97
|
+
fontDisplay: 'swap',
|
|
98
|
+
src: `url('${publicPath}/fonts/Montserrat/normal.woff2')`,
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
fontFamily: 'IBM Plex Mono',
|
|
102
|
+
fontStyle: 'italic',
|
|
103
|
+
fontWeight: '100',
|
|
104
|
+
fontDisplay: 'swap',
|
|
105
|
+
src: `url('${publicPath}/fonts/Ibm/thin-100-italic.woff2')`,
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
fontFamily: 'IBM Plex Mono',
|
|
109
|
+
fontStyle: 'italic',
|
|
110
|
+
fontWeight: '300',
|
|
111
|
+
fontDisplay: 'swap',
|
|
112
|
+
src: `url('${publicPath}/fonts/Ibm/light-300-italic.woff2')`,
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
fontFamily: 'IBM Plex Mono',
|
|
116
|
+
fontStyle: 'italic',
|
|
117
|
+
fontWeight: '400',
|
|
118
|
+
fontDisplay: 'swap',
|
|
119
|
+
src: `url('${publicPath}/fonts/Ibm/regular-400-italic.woff2')`,
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
fontFamily: 'IBM Plex Mono',
|
|
123
|
+
fontStyle: 'italic',
|
|
124
|
+
fontWeight: '500',
|
|
125
|
+
fontDisplay: 'swap',
|
|
126
|
+
src: `url('${publicPath}/fonts/Ibm/medium-500-italic.woff2')`,
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
fontFamily: 'IBM Plex Mono',
|
|
130
|
+
fontStyle: 'italic',
|
|
131
|
+
fontWeight: '700',
|
|
132
|
+
fontDisplay: 'swap',
|
|
133
|
+
src: `url('${publicPath}/fonts/Ibm/bold-700-italic.woff2')`,
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
fontFamily: 'IBM Plex Mono',
|
|
137
|
+
fontStyle: 'normal',
|
|
138
|
+
fontWeight: '100',
|
|
139
|
+
fontDisplay: 'swap',
|
|
140
|
+
src: `url('${publicPath}/fonts/Ibm/thin-100.woff2')`,
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
fontFamily: 'IBM Plex Mono',
|
|
144
|
+
fontStyle: 'normal',
|
|
145
|
+
fontWeight: '300',
|
|
146
|
+
fontDisplay: 'swap',
|
|
147
|
+
src: `url('${publicPath}/fonts/Ibm/light-300.woff2')`,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
fontFamily: 'IBM Plex Mono',
|
|
151
|
+
fontStyle: 'normal',
|
|
152
|
+
fontWeight: '400',
|
|
153
|
+
fontDisplay: 'swap',
|
|
154
|
+
src: `url('${publicPath}/fonts/Ibm/regular-400.woff2')`,
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
fontFamily: 'IBM Plex Mono',
|
|
158
|
+
fontStyle: 'normal',
|
|
159
|
+
fontWeight: '500',
|
|
160
|
+
fontDisplay: 'swap',
|
|
161
|
+
src: `url('${publicPath}/fonts/Ibm/medium-500.woff2')`,
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
fontFamily: 'IBM Plex Mono',
|
|
165
|
+
fontStyle: 'normal',
|
|
166
|
+
fontWeight: '700',
|
|
167
|
+
fontDisplay: 'swap',
|
|
168
|
+
src: `url('${publicPath}/fonts/Ibm/bold-700.woff2')`,
|
|
169
|
+
},
|
|
170
|
+
];
|
|
171
|
+
|
|
172
|
+
export { fontFaces };
|
package/dist/plugin/general.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const general = {
|
|
2
|
-
'*': {
|
|
3
|
-
borderColor: 'hsl(var(--border))',
|
|
4
|
-
},
|
|
5
|
-
body: {
|
|
6
|
-
backgroundColor: 'hsl(var(--background))',
|
|
7
|
-
fontFamily: 'Roboto, sans-serif',
|
|
8
|
-
color: 'hsl(var(--foreground))',
|
|
9
|
-
},
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { general };
|
|
1
|
+
const general = {
|
|
2
|
+
'*': {
|
|
3
|
+
borderColor: 'hsl(var(--border))',
|
|
4
|
+
},
|
|
5
|
+
body: {
|
|
6
|
+
backgroundColor: 'hsl(var(--background))',
|
|
7
|
+
fontFamily: 'Roboto, sans-serif',
|
|
8
|
+
color: 'hsl(var(--foreground))',
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { general };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
-
|
|
3
|
-
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
-
|
|
5
|
-
module.exports = buildPlugin('../public');
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
+
|
|
3
|
+
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
+
|
|
5
|
+
module.exports = buildPlugin('../public');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
-
|
|
3
|
-
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
-
|
|
5
|
-
module.exports = buildPlugin('~/node_modules/lecom-ui/dist/public');
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
+
|
|
3
|
+
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
+
|
|
5
|
+
module.exports = buildPlugin('~/node_modules/lecom-ui/dist/public');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
-
|
|
3
|
-
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
-
|
|
5
|
-
module.exports = buildPlugin('node_modules/lecom-ui/dist/public');
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
+
|
|
3
|
+
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
+
|
|
5
|
+
module.exports = buildPlugin('node_modules/lecom-ui/dist/public');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
-
|
|
3
|
-
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
-
|
|
5
|
-
module.exports = buildPlugin('/node_modules/lecom-ui/dist/public');
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
2
|
+
|
|
3
|
+
const buildPlugin = require('./template').buildPlugin;
|
|
4
|
+
|
|
5
|
+
module.exports = buildPlugin('/node_modules/lecom-ui/dist/public');
|
package/dist/plugin/template.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import Plugin from 'tailwindcss/plugin';
|
|
2
|
-
|
|
3
|
-
import { colors } from '../tokens/colors';
|
|
4
|
-
import { fonts } from '../tokens/fonts';
|
|
5
|
-
|
|
6
|
-
import { extend } from './extend';
|
|
7
|
-
import { fontFaces } from './fontFaces';
|
|
8
|
-
import { general } from './general';
|
|
9
|
-
import { typographies } from './typographies';
|
|
10
|
-
import { varsTheme } from './varsTheme';
|
|
11
|
-
|
|
12
|
-
const buildPlugin = (publicPath) =>
|
|
13
|
-
Plugin(
|
|
14
|
-
({ addBase, addComponents }) => {
|
|
15
|
-
addBase(varsTheme);
|
|
16
|
-
fontFaces(publicPath).map((fontFace) =>
|
|
17
|
-
addBase({ '@font-face': fontFace })
|
|
18
|
-
);
|
|
19
|
-
addBase(general);
|
|
20
|
-
addComponents(typographies);
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
theme: {
|
|
24
|
-
fontFamily: fonts,
|
|
25
|
-
colors,
|
|
26
|
-
extend,
|
|
27
|
-
},
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
export { buildPlugin };
|
|
1
|
+
import Plugin from 'tailwindcss/plugin';
|
|
2
|
+
|
|
3
|
+
import { colors } from '../tokens/colors';
|
|
4
|
+
import { fonts } from '../tokens/fonts';
|
|
5
|
+
|
|
6
|
+
import { extend } from './extend';
|
|
7
|
+
import { fontFaces } from './fontFaces';
|
|
8
|
+
import { general } from './general';
|
|
9
|
+
import { typographies } from './typographies';
|
|
10
|
+
import { varsTheme } from './varsTheme';
|
|
11
|
+
|
|
12
|
+
const buildPlugin = (publicPath) =>
|
|
13
|
+
Plugin(
|
|
14
|
+
({ addBase, addComponents }) => {
|
|
15
|
+
addBase(varsTheme);
|
|
16
|
+
fontFaces(publicPath).map((fontFace) =>
|
|
17
|
+
addBase({ '@font-face': fontFace })
|
|
18
|
+
);
|
|
19
|
+
addBase(general);
|
|
20
|
+
addComponents(typographies);
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
theme: {
|
|
24
|
+
fontFamily: fonts,
|
|
25
|
+
colors,
|
|
26
|
+
extend,
|
|
27
|
+
},
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
export { buildPlugin };
|
|
@@ -1,152 +1,152 @@
|
|
|
1
|
-
const montSerrat = { fontFamily: 'Montserrat, sans-serif' };
|
|
2
|
-
const roboto = { fontFamily: 'Roboto, sans-serif' };
|
|
3
|
-
const ibm = { fontFamily: 'IBM Plex Mono, sans-serif' };
|
|
4
|
-
const fontWeight700 = { fontWeight: '700' };
|
|
5
|
-
const fontWeight600 = { fontWeight: '600' };
|
|
6
|
-
const fontWeight500 = { fontWeight: '500' };
|
|
7
|
-
const fontWeight400 = { fontWeight: '400' };
|
|
8
|
-
const fontSize3 = { fontSize: '3rem' };
|
|
9
|
-
const fontSize2 = { fontSize: '2rem' };
|
|
10
|
-
const fontSize25 = { fontSize: '2.5rem' };
|
|
11
|
-
const fontSize15 = { fontSize: '1.5rem' };
|
|
12
|
-
const fontSize125 = { fontSize: '1.25rem' };
|
|
13
|
-
const fontSize1 = { fontSize: '1rem' };
|
|
14
|
-
const fontSize0875 = { fontSize: '0.875rem' };
|
|
15
|
-
const fontSize075 = { fontSize: '0.75rem' };
|
|
16
|
-
|
|
17
|
-
const typographies = {
|
|
18
|
-
'.heading-xxlarge-500': {
|
|
19
|
-
...montSerrat,
|
|
20
|
-
...fontSize3,
|
|
21
|
-
...fontWeight500,
|
|
22
|
-
lineHeight: '3.25rem',
|
|
23
|
-
},
|
|
24
|
-
'.heading-xlarge-500': {
|
|
25
|
-
...montSerrat,
|
|
26
|
-
...fontSize25,
|
|
27
|
-
...fontWeight500,
|
|
28
|
-
lineHeight: '2.75rem',
|
|
29
|
-
},
|
|
30
|
-
'.heading-large-600': {
|
|
31
|
-
...montSerrat,
|
|
32
|
-
...fontSize2,
|
|
33
|
-
...fontWeight600,
|
|
34
|
-
lineHeight: '2.25rem',
|
|
35
|
-
},
|
|
36
|
-
'.heading-large-500': {
|
|
37
|
-
...montSerrat,
|
|
38
|
-
...fontSize2,
|
|
39
|
-
...fontWeight500,
|
|
40
|
-
lineHeight: '2.25rem',
|
|
41
|
-
},
|
|
42
|
-
'.heading-medium-600': {
|
|
43
|
-
...montSerrat,
|
|
44
|
-
...fontSize15,
|
|
45
|
-
...fontWeight600,
|
|
46
|
-
lineHeight: '1.75rem',
|
|
47
|
-
},
|
|
48
|
-
'.heading-medium-500': {
|
|
49
|
-
...montSerrat,
|
|
50
|
-
...fontSize15,
|
|
51
|
-
...fontWeight500,
|
|
52
|
-
lineHeight: '1.75rem',
|
|
53
|
-
},
|
|
54
|
-
'.heading-small-600': {
|
|
55
|
-
...montSerrat,
|
|
56
|
-
...fontSize125,
|
|
57
|
-
...fontWeight600,
|
|
58
|
-
lineHeight: '1.5rem',
|
|
59
|
-
},
|
|
60
|
-
'.heading-small-500': {
|
|
61
|
-
...montSerrat,
|
|
62
|
-
...fontSize125,
|
|
63
|
-
...fontWeight500,
|
|
64
|
-
lineHeight: '1.5rem',
|
|
65
|
-
},
|
|
66
|
-
'.heading-xsmall-600': {
|
|
67
|
-
...montSerrat,
|
|
68
|
-
...fontSize1,
|
|
69
|
-
...fontWeight600,
|
|
70
|
-
lineHeight: '1.25rem',
|
|
71
|
-
},
|
|
72
|
-
'.heading-xsmall-500': {
|
|
73
|
-
...montSerrat,
|
|
74
|
-
...fontSize1,
|
|
75
|
-
...fontWeight500,
|
|
76
|
-
lineHeight: '1.25rem',
|
|
77
|
-
},
|
|
78
|
-
'.heading-xxsmall-600': {
|
|
79
|
-
...montSerrat,
|
|
80
|
-
...fontSize0875,
|
|
81
|
-
lineHeight: '1.25rem',
|
|
82
|
-
...fontWeight600,
|
|
83
|
-
},
|
|
84
|
-
'.heading-xxsmall-500': {
|
|
85
|
-
...montSerrat,
|
|
86
|
-
...fontSize0875,
|
|
87
|
-
lineHeight: '1.25rem',
|
|
88
|
-
...fontWeight500,
|
|
89
|
-
},
|
|
90
|
-
'.body-large-700': {
|
|
91
|
-
...roboto,
|
|
92
|
-
...fontSize1,
|
|
93
|
-
lineHeight: '1.5rem',
|
|
94
|
-
...fontWeight700,
|
|
95
|
-
},
|
|
96
|
-
'.body-large-500': {
|
|
97
|
-
...roboto,
|
|
98
|
-
...fontSize1,
|
|
99
|
-
lineHeight: '1.5rem',
|
|
100
|
-
...fontWeight500,
|
|
101
|
-
},
|
|
102
|
-
'.body-large-400': {
|
|
103
|
-
...roboto,
|
|
104
|
-
...fontSize1,
|
|
105
|
-
lineHeight: '1.5rem',
|
|
106
|
-
...fontWeight400,
|
|
107
|
-
},
|
|
108
|
-
'.body-medium-700': {
|
|
109
|
-
...roboto,
|
|
110
|
-
...fontSize0875,
|
|
111
|
-
lineHeight: '1.25rem',
|
|
112
|
-
...fontWeight700,
|
|
113
|
-
},
|
|
114
|
-
'.body-medium-500': {
|
|
115
|
-
...roboto,
|
|
116
|
-
...fontSize0875,
|
|
117
|
-
lineHeight: '1.25rem',
|
|
118
|
-
...fontWeight500,
|
|
119
|
-
},
|
|
120
|
-
'.body-medium-400': {
|
|
121
|
-
...roboto,
|
|
122
|
-
...fontSize0875,
|
|
123
|
-
lineHeight: '1.25rem',
|
|
124
|
-
...fontWeight400,
|
|
125
|
-
},
|
|
126
|
-
'.body-small-700': {
|
|
127
|
-
...roboto,
|
|
128
|
-
...fontSize075,
|
|
129
|
-
lineHeight: '1rem',
|
|
130
|
-
...fontWeight700,
|
|
131
|
-
},
|
|
132
|
-
'.body-small-500': {
|
|
133
|
-
...roboto,
|
|
134
|
-
...fontSize075,
|
|
135
|
-
lineHeight: '1rem',
|
|
136
|
-
...fontWeight500,
|
|
137
|
-
},
|
|
138
|
-
'.body-small-400': {
|
|
139
|
-
...roboto,
|
|
140
|
-
...fontSize075,
|
|
141
|
-
lineHeight: '1rem',
|
|
142
|
-
...fontWeight400,
|
|
143
|
-
},
|
|
144
|
-
'.code-medium-400': {
|
|
145
|
-
...ibm,
|
|
146
|
-
...fontSize0875,
|
|
147
|
-
lineHeight: '1.25rem',
|
|
148
|
-
...fontWeight400,
|
|
149
|
-
},
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
export { typographies };
|
|
1
|
+
const montSerrat = { fontFamily: 'Montserrat, sans-serif' };
|
|
2
|
+
const roboto = { fontFamily: 'Roboto, sans-serif' };
|
|
3
|
+
const ibm = { fontFamily: 'IBM Plex Mono, sans-serif' };
|
|
4
|
+
const fontWeight700 = { fontWeight: '700' };
|
|
5
|
+
const fontWeight600 = { fontWeight: '600' };
|
|
6
|
+
const fontWeight500 = { fontWeight: '500' };
|
|
7
|
+
const fontWeight400 = { fontWeight: '400' };
|
|
8
|
+
const fontSize3 = { fontSize: '3rem' };
|
|
9
|
+
const fontSize2 = { fontSize: '2rem' };
|
|
10
|
+
const fontSize25 = { fontSize: '2.5rem' };
|
|
11
|
+
const fontSize15 = { fontSize: '1.5rem' };
|
|
12
|
+
const fontSize125 = { fontSize: '1.25rem' };
|
|
13
|
+
const fontSize1 = { fontSize: '1rem' };
|
|
14
|
+
const fontSize0875 = { fontSize: '0.875rem' };
|
|
15
|
+
const fontSize075 = { fontSize: '0.75rem' };
|
|
16
|
+
|
|
17
|
+
const typographies = {
|
|
18
|
+
'.heading-xxlarge-500': {
|
|
19
|
+
...montSerrat,
|
|
20
|
+
...fontSize3,
|
|
21
|
+
...fontWeight500,
|
|
22
|
+
lineHeight: '3.25rem',
|
|
23
|
+
},
|
|
24
|
+
'.heading-xlarge-500': {
|
|
25
|
+
...montSerrat,
|
|
26
|
+
...fontSize25,
|
|
27
|
+
...fontWeight500,
|
|
28
|
+
lineHeight: '2.75rem',
|
|
29
|
+
},
|
|
30
|
+
'.heading-large-600': {
|
|
31
|
+
...montSerrat,
|
|
32
|
+
...fontSize2,
|
|
33
|
+
...fontWeight600,
|
|
34
|
+
lineHeight: '2.25rem',
|
|
35
|
+
},
|
|
36
|
+
'.heading-large-500': {
|
|
37
|
+
...montSerrat,
|
|
38
|
+
...fontSize2,
|
|
39
|
+
...fontWeight500,
|
|
40
|
+
lineHeight: '2.25rem',
|
|
41
|
+
},
|
|
42
|
+
'.heading-medium-600': {
|
|
43
|
+
...montSerrat,
|
|
44
|
+
...fontSize15,
|
|
45
|
+
...fontWeight600,
|
|
46
|
+
lineHeight: '1.75rem',
|
|
47
|
+
},
|
|
48
|
+
'.heading-medium-500': {
|
|
49
|
+
...montSerrat,
|
|
50
|
+
...fontSize15,
|
|
51
|
+
...fontWeight500,
|
|
52
|
+
lineHeight: '1.75rem',
|
|
53
|
+
},
|
|
54
|
+
'.heading-small-600': {
|
|
55
|
+
...montSerrat,
|
|
56
|
+
...fontSize125,
|
|
57
|
+
...fontWeight600,
|
|
58
|
+
lineHeight: '1.5rem',
|
|
59
|
+
},
|
|
60
|
+
'.heading-small-500': {
|
|
61
|
+
...montSerrat,
|
|
62
|
+
...fontSize125,
|
|
63
|
+
...fontWeight500,
|
|
64
|
+
lineHeight: '1.5rem',
|
|
65
|
+
},
|
|
66
|
+
'.heading-xsmall-600': {
|
|
67
|
+
...montSerrat,
|
|
68
|
+
...fontSize1,
|
|
69
|
+
...fontWeight600,
|
|
70
|
+
lineHeight: '1.25rem',
|
|
71
|
+
},
|
|
72
|
+
'.heading-xsmall-500': {
|
|
73
|
+
...montSerrat,
|
|
74
|
+
...fontSize1,
|
|
75
|
+
...fontWeight500,
|
|
76
|
+
lineHeight: '1.25rem',
|
|
77
|
+
},
|
|
78
|
+
'.heading-xxsmall-600': {
|
|
79
|
+
...montSerrat,
|
|
80
|
+
...fontSize0875,
|
|
81
|
+
lineHeight: '1.25rem',
|
|
82
|
+
...fontWeight600,
|
|
83
|
+
},
|
|
84
|
+
'.heading-xxsmall-500': {
|
|
85
|
+
...montSerrat,
|
|
86
|
+
...fontSize0875,
|
|
87
|
+
lineHeight: '1.25rem',
|
|
88
|
+
...fontWeight500,
|
|
89
|
+
},
|
|
90
|
+
'.body-large-700': {
|
|
91
|
+
...roboto,
|
|
92
|
+
...fontSize1,
|
|
93
|
+
lineHeight: '1.5rem',
|
|
94
|
+
...fontWeight700,
|
|
95
|
+
},
|
|
96
|
+
'.body-large-500': {
|
|
97
|
+
...roboto,
|
|
98
|
+
...fontSize1,
|
|
99
|
+
lineHeight: '1.5rem',
|
|
100
|
+
...fontWeight500,
|
|
101
|
+
},
|
|
102
|
+
'.body-large-400': {
|
|
103
|
+
...roboto,
|
|
104
|
+
...fontSize1,
|
|
105
|
+
lineHeight: '1.5rem',
|
|
106
|
+
...fontWeight400,
|
|
107
|
+
},
|
|
108
|
+
'.body-medium-700': {
|
|
109
|
+
...roboto,
|
|
110
|
+
...fontSize0875,
|
|
111
|
+
lineHeight: '1.25rem',
|
|
112
|
+
...fontWeight700,
|
|
113
|
+
},
|
|
114
|
+
'.body-medium-500': {
|
|
115
|
+
...roboto,
|
|
116
|
+
...fontSize0875,
|
|
117
|
+
lineHeight: '1.25rem',
|
|
118
|
+
...fontWeight500,
|
|
119
|
+
},
|
|
120
|
+
'.body-medium-400': {
|
|
121
|
+
...roboto,
|
|
122
|
+
...fontSize0875,
|
|
123
|
+
lineHeight: '1.25rem',
|
|
124
|
+
...fontWeight400,
|
|
125
|
+
},
|
|
126
|
+
'.body-small-700': {
|
|
127
|
+
...roboto,
|
|
128
|
+
...fontSize075,
|
|
129
|
+
lineHeight: '1rem',
|
|
130
|
+
...fontWeight700,
|
|
131
|
+
},
|
|
132
|
+
'.body-small-500': {
|
|
133
|
+
...roboto,
|
|
134
|
+
...fontSize075,
|
|
135
|
+
lineHeight: '1rem',
|
|
136
|
+
...fontWeight500,
|
|
137
|
+
},
|
|
138
|
+
'.body-small-400': {
|
|
139
|
+
...roboto,
|
|
140
|
+
...fontSize075,
|
|
141
|
+
lineHeight: '1rem',
|
|
142
|
+
...fontWeight400,
|
|
143
|
+
},
|
|
144
|
+
'.code-medium-400': {
|
|
145
|
+
...ibm,
|
|
146
|
+
...fontSize0875,
|
|
147
|
+
lineHeight: '1.25rem',
|
|
148
|
+
...fontWeight400,
|
|
149
|
+
},
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
export { typographies };
|
package/dist/plugin/varsTheme.js
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
const varsTheme = {
|
|
2
|
-
':root': {
|
|
3
|
-
'--background': '0 0% 100%',
|
|
4
|
-
'--foreground': '0 0% 14.9%',
|
|
5
|
-
'--card': '0 0% 100%',
|
|
6
|
-
'--card-foreground': '0 0% 3.9%',
|
|
7
|
-
'--popover': '0 0% 100%',
|
|
8
|
-
'--popover-foreground': '0 0% 14.9%',
|
|
9
|
-
'--primary': '0 0% 9%',
|
|
10
|
-
'--primary-foreground': '0 0% 98%',
|
|
11
|
-
'--secondary': '0 0% 96.1%',
|
|
12
|
-
'--secondary-foreground': '0 0% 9%',
|
|
13
|
-
'--muted': '0 0% 96.1%',
|
|
14
|
-
'--muted-foreground': '0 0% 45.1%',
|
|
15
|
-
'--accent': '0 0% 96.1%',
|
|
16
|
-
'--accent-foreground': '0 0% 9%',
|
|
17
|
-
'--destructive': '0 84.2% 60.2%',
|
|
18
|
-
'--destructive-foreground': '0 0% 98%',
|
|
19
|
-
'--border': '0 0% 89.8%',
|
|
20
|
-
'--input': '0 0% 89.8%',
|
|
21
|
-
'--ring': '0 0% 3.9%',
|
|
22
|
-
'--chart-1': '12 76% 61%',
|
|
23
|
-
'--chart-2': '173 58% 39%',
|
|
24
|
-
'--chart-3': '197 37% 24%',
|
|
25
|
-
'--chart-4': '43 74% 66%',
|
|
26
|
-
'--chart-5': '27 87% 67%',
|
|
27
|
-
'--chart-6': '228 57% 51%',
|
|
28
|
-
'--chart-7': '52 95% 53%',
|
|
29
|
-
'--chart-8': '0 85% 51%',
|
|
30
|
-
'--radius': '0.5rem',
|
|
31
|
-
'--sidebar-background': '0 0% 100%',
|
|
32
|
-
'--sidebar-foreground': '240 5.3% 26.1%',
|
|
33
|
-
'--sidebar-primary': '240 5.9% 10%',
|
|
34
|
-
'--sidebar-primary-foreground': '0 0% 98%',
|
|
35
|
-
'--sidebar-accent': '240 4.8% 95.9%',
|
|
36
|
-
'--sidebar-accent-foreground': '240 5.9% 10%',
|
|
37
|
-
'--sidebar-border': '220 13% 91%',
|
|
38
|
-
'--sidebar-ring': '217.2 91.2% 59.8%',
|
|
39
|
-
},
|
|
40
|
-
'.dark': {
|
|
41
|
-
'--background': '0 0% 3.9%',
|
|
42
|
-
'--foreground': '0 0% 98%',
|
|
43
|
-
'--card': '0 0% 3.9%',
|
|
44
|
-
'--card-foreground': '0 0% 98%',
|
|
45
|
-
'--popover': '0 0% 3.9%',
|
|
46
|
-
'--popover-foreground': '0 0% 98%',
|
|
47
|
-
'--primary': '0 0% 98%',
|
|
48
|
-
'--primary-foreground': '0 0% 9%',
|
|
49
|
-
'--secondary': '0 0% 14.9%',
|
|
50
|
-
'--secondary-foreground': '0 0% 98%',
|
|
51
|
-
'--muted': '0 0% 14.9%',
|
|
52
|
-
'--muted-foreground': '0 0% 63.9%',
|
|
53
|
-
'--accent': '0 0% 14.9%',
|
|
54
|
-
'--accent-foreground': '0 0% 98%',
|
|
55
|
-
'--destructive': '0 62.8% 30.6%',
|
|
56
|
-
'--destructive-foreground': '0 0% 98%',
|
|
57
|
-
'--border': '0 0% 14.9%',
|
|
58
|
-
'--input': '0 0% 14.9%',
|
|
59
|
-
'--ring': '0 0% 83.1%',
|
|
60
|
-
'--chart-1': '220 70% 50%',
|
|
61
|
-
'--chart-2': '160 60% 45%',
|
|
62
|
-
'--chart-3': '30 80% 55%',
|
|
63
|
-
'--chart-4': '280 65% 60%',
|
|
64
|
-
'--chart-5': '340 75% 55%',
|
|
65
|
-
'--chart-6': '228 57% 51%',
|
|
66
|
-
'--chart-7': '52 95% 53%',
|
|
67
|
-
'--chart-8': '0 85% 51%',
|
|
68
|
-
'--sidebar-background': '240 5.9% 10%',
|
|
69
|
-
'--sidebar-foreground': '240 4.8% 95.9%',
|
|
70
|
-
'--sidebar-primary': '224.3 76.3% 48%',
|
|
71
|
-
'--sidebar-primary-foreground': '0 0% 100%',
|
|
72
|
-
'--sidebar-accent': '240 3.7% 15.9%',
|
|
73
|
-
'--sidebar-accent-foreground': '240 4.8% 95.9%',
|
|
74
|
-
'--sidebar-border': '240 3.7% 15.9%',
|
|
75
|
-
'--sidebar-ring': '217.2 91.2% 59.8%',
|
|
76
|
-
},
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
export { varsTheme };
|
|
1
|
+
const varsTheme = {
|
|
2
|
+
':root': {
|
|
3
|
+
'--background': '0 0% 100%',
|
|
4
|
+
'--foreground': '0 0% 14.9%',
|
|
5
|
+
'--card': '0 0% 100%',
|
|
6
|
+
'--card-foreground': '0 0% 3.9%',
|
|
7
|
+
'--popover': '0 0% 100%',
|
|
8
|
+
'--popover-foreground': '0 0% 14.9%',
|
|
9
|
+
'--primary': '0 0% 9%',
|
|
10
|
+
'--primary-foreground': '0 0% 98%',
|
|
11
|
+
'--secondary': '0 0% 96.1%',
|
|
12
|
+
'--secondary-foreground': '0 0% 9%',
|
|
13
|
+
'--muted': '0 0% 96.1%',
|
|
14
|
+
'--muted-foreground': '0 0% 45.1%',
|
|
15
|
+
'--accent': '0 0% 96.1%',
|
|
16
|
+
'--accent-foreground': '0 0% 9%',
|
|
17
|
+
'--destructive': '0 84.2% 60.2%',
|
|
18
|
+
'--destructive-foreground': '0 0% 98%',
|
|
19
|
+
'--border': '0 0% 89.8%',
|
|
20
|
+
'--input': '0 0% 89.8%',
|
|
21
|
+
'--ring': '0 0% 3.9%',
|
|
22
|
+
'--chart-1': '12 76% 61%',
|
|
23
|
+
'--chart-2': '173 58% 39%',
|
|
24
|
+
'--chart-3': '197 37% 24%',
|
|
25
|
+
'--chart-4': '43 74% 66%',
|
|
26
|
+
'--chart-5': '27 87% 67%',
|
|
27
|
+
'--chart-6': '228 57% 51%',
|
|
28
|
+
'--chart-7': '52 95% 53%',
|
|
29
|
+
'--chart-8': '0 85% 51%',
|
|
30
|
+
'--radius': '0.5rem',
|
|
31
|
+
'--sidebar-background': '0 0% 100%',
|
|
32
|
+
'--sidebar-foreground': '240 5.3% 26.1%',
|
|
33
|
+
'--sidebar-primary': '240 5.9% 10%',
|
|
34
|
+
'--sidebar-primary-foreground': '0 0% 98%',
|
|
35
|
+
'--sidebar-accent': '240 4.8% 95.9%',
|
|
36
|
+
'--sidebar-accent-foreground': '240 5.9% 10%',
|
|
37
|
+
'--sidebar-border': '220 13% 91%',
|
|
38
|
+
'--sidebar-ring': '217.2 91.2% 59.8%',
|
|
39
|
+
},
|
|
40
|
+
'.dark': {
|
|
41
|
+
'--background': '0 0% 3.9%',
|
|
42
|
+
'--foreground': '0 0% 98%',
|
|
43
|
+
'--card': '0 0% 3.9%',
|
|
44
|
+
'--card-foreground': '0 0% 98%',
|
|
45
|
+
'--popover': '0 0% 3.9%',
|
|
46
|
+
'--popover-foreground': '0 0% 98%',
|
|
47
|
+
'--primary': '0 0% 98%',
|
|
48
|
+
'--primary-foreground': '0 0% 9%',
|
|
49
|
+
'--secondary': '0 0% 14.9%',
|
|
50
|
+
'--secondary-foreground': '0 0% 98%',
|
|
51
|
+
'--muted': '0 0% 14.9%',
|
|
52
|
+
'--muted-foreground': '0 0% 63.9%',
|
|
53
|
+
'--accent': '0 0% 14.9%',
|
|
54
|
+
'--accent-foreground': '0 0% 98%',
|
|
55
|
+
'--destructive': '0 62.8% 30.6%',
|
|
56
|
+
'--destructive-foreground': '0 0% 98%',
|
|
57
|
+
'--border': '0 0% 14.9%',
|
|
58
|
+
'--input': '0 0% 14.9%',
|
|
59
|
+
'--ring': '0 0% 83.1%',
|
|
60
|
+
'--chart-1': '220 70% 50%',
|
|
61
|
+
'--chart-2': '160 60% 45%',
|
|
62
|
+
'--chart-3': '30 80% 55%',
|
|
63
|
+
'--chart-4': '280 65% 60%',
|
|
64
|
+
'--chart-5': '340 75% 55%',
|
|
65
|
+
'--chart-6': '228 57% 51%',
|
|
66
|
+
'--chart-7': '52 95% 53%',
|
|
67
|
+
'--chart-8': '0 85% 51%',
|
|
68
|
+
'--sidebar-background': '240 5.9% 10%',
|
|
69
|
+
'--sidebar-foreground': '240 4.8% 95.9%',
|
|
70
|
+
'--sidebar-primary': '224.3 76.3% 48%',
|
|
71
|
+
'--sidebar-primary-foreground': '0 0% 100%',
|
|
72
|
+
'--sidebar-accent': '240 3.7% 15.9%',
|
|
73
|
+
'--sidebar-accent-foreground': '240 4.8% 95.9%',
|
|
74
|
+
'--sidebar-border': '240 3.7% 15.9%',
|
|
75
|
+
'--sidebar-ring': '217.2 91.2% 59.8%',
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export { varsTheme };
|
package/package.json
CHANGED