Skip to content

Commit 4d95d81

Browse files
authored
Merge pull request #83 from gecut/refactor/components
refactor(components): separate `styles` & `directives` of components
2 parents eba8321 + c7a7a33 commit 4d95d81

File tree

38 files changed

+1073
-233
lines changed

38 files changed

+1073
-233
lines changed

demo/button/scripts.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,16 @@ render(
5959
svg: buttonsContents[type].iconSVG!,
6060
}
6161
: undefined,
62-
onClick: (event) => {
63-
const target = event.currentTarget as HTMLButtonElement;
62+
events: {
63+
click: (event) => {
64+
const target = event.currentTarget as HTMLButtonElement;
6465
65-
target.setAttribute('loading', '');
66+
target.setAttribute('loading', '');
6667
67-
setTimeout(() => {
68-
target.removeAttribute('loading');
69-
}, 5120);
68+
setTimeout(() => {
69+
target.removeAttribute('loading');
70+
}, 5120);
71+
},
7072
},
7173
label: buttonsContents[type].name,
7274

demo/cards/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en" class="color-scheme-auto bg-background font-vazirmatn">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gecut Cards</title>
7+
<link rel="icon" href="/favicon.ico" sizes="any" />
8+
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
9+
<link rel="manifest" href="/manifest.json" />
10+
<script type="module" src="../main/global.ts"></script>
11+
<script type="module" src="./scripts.ts"></script>
12+
</head>
13+
<body class="bg-surface max-w-screen-sm mx-auto px-2"></body>
14+
</html>

demo/cards/scripts.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* eslint-disable max-len */
2+
import {map} from '@gecut/lit-helper';
3+
import {html, render} from 'lit/html.js';
4+
5+
const cards = ['elevated', 'filled', 'outlined'];
6+
const cardsStyles: Record<string, string> = {
7+
elevated: 'gecut-card-elevated',
8+
filled: 'gecut-card-filled',
9+
outlined: 'gecut-card-outlined',
10+
};
11+
const cardsSelectableStyles: Record<string, string> = {
12+
elevated: 'gecut-card-elevated-selectable',
13+
filled: 'gecut-card-filled-selectable',
14+
outlined: 'gecut-card-outlined-selectable',
15+
};
16+
17+
render(
18+
html`
19+
<main class="p-4" role="main">
20+
<div class="flex flex-col gap-2 p-4">
21+
<h2 class="text-titleLarge text-onSurfaceVariant">Normal Cards</h2>
22+
23+
${map(
24+
this,
25+
cards,
26+
(type) => html`
27+
<div
28+
class="${cardsStyles[
29+
type
30+
]} capitalize flex flex-col h-24 w-full p-4 text-titleSmall justify-end items-start"
31+
>
32+
${type}
33+
</div>
34+
`,
35+
)}
36+
</div>
37+
<div class="flex flex-col gap-2 p-4">
38+
<h2 class="text-titleLarge text-onSurfaceVariant">Selectable Cards</h2>
39+
40+
${map(
41+
this,
42+
cards,
43+
(type) => html`
44+
<div
45+
class="${cardsSelectableStyles[
46+
type
47+
]} capitalize flex flex-col h-24 w-full p-4 text-titleSmall justify-end items-start"
48+
>
49+
${type} selectable
50+
</div>
51+
`,
52+
)}
53+
</div>
54+
</main>
55+
`,
56+
document.body,
57+
);

demo/dialog/scripts.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,14 @@ render(
7373
class="flex items-center justify-around gap-4 text-bodyMedium text-onSurface text-pretty capitalize mb-6"
7474
>
7575
${gecutButton({
76-
onClick: () =>
77-
helper.open({
78-
headline: 'headline' in helper.content ? helper.content.headline + '*' : '',
79-
}),
8076
type: 'filled',
8177
label: 'headline' in helper.content ? helper.content.headline : 'Open',
78+
events: {
79+
click: () =>
80+
helper.open({
81+
headline: 'headline' in helper.content ? helper.content.headline + '*' : '',
82+
}),
83+
},
8284
})}
8385
${gecutContext<string>()(helper.provider, (value) => html`${value}`)}
8486
</div>

demo/icon-button/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en" class="color-scheme-auto bg-background font-vazirmatn">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gecut Icon Buttons</title>
7+
<link rel="icon" href="/favicon.ico" sizes="any" />
8+
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
9+
<link rel="manifest" href="/manifest.json" />
10+
<script type="module" src="../main/global.ts"></script>
11+
<script type="module" src="./scripts.ts"></script>
12+
</head>
13+
<body class="bg-surface max-w-screen-sm mx-auto px-2"></body>
14+
</html>

demo/icon-button/scripts.ts

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* eslint-disable max-len */
2+
import {gecutIconButton} from '@gecut/components';
3+
import {map} from '@gecut/lit-helper';
4+
import {html, render} from 'lit/html.js';
5+
6+
import type {IconButtonContent} from '@gecut/components';
7+
import type {MaybePromise} from '@gecut/types';
8+
9+
const iconButtonTypes: NonNullable<IconButtonContent['type']>[] = ['filled', 'filledTonal', 'outlined', 'normal'];
10+
const iconButtonsContents: Record<
11+
NonNullable<IconButtonContent['type']>,
12+
{iconSVG: MaybePromise<string>; name?: string; hint?: string; loaderSVG?: string} & Partial<IconButtonContent>
13+
> = {
14+
normal: {
15+
name: 'normal',
16+
href: document.URL,
17+
target: '_blank',
18+
hint: 'Links do not have a disabled state',
19+
iconSVG:
20+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="42" stroke-dashoffset="42" d="M11 5H5V19H19V13"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.9s" values="42;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M13 11L20 4"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.9s" dur="0.45s" values="12;0"/></path><path stroke-dasharray="8" stroke-dashoffset="8" d="M21 3H15M21 3V9"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.35s" dur="0.3s" values="8;0"/></path></g></svg>',
21+
},
22+
filled: {
23+
name: 'filled',
24+
selectedIcon: {
25+
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><mask id="lineMdBuyMeACoffeeFilled0"><path fill="#fff" d="M5 6C5 4 7 6 11.5 6C16 6 19 4 19 6L19 7C19 8.5 17 9 12.5 9C8 9 5 9 5 7L5 6Z"/></mask><mask id="lineMdBuyMeACoffeeFilled1"><path fill="#fff" d="M10.125 18.15C10.04 17.29 9.4 11.98 9.4 11.98C9.4 11.98 11.34 12.31 12.5 11.73C13.66 11.16 14.98 11 14.98 11C14.98 11 14.4 17.96 14.35 18.46C14.3 18.96 13.45 19.3 12.95 19.3L11.23 19.3C10.73 19.3 10.21 19 10.125 18.15Z"/></mask><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="32" stroke-dashoffset="32" d="M7.5 10.5C7.5 10.5 8.33 17.43 8.5 19C8.67 20.57 10 21 11 21L13 21C14.5 21 15.875 19.86 16 19C16.125 18.14 17 7 17 7"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="32;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M16.5 6C16.5 3.5 14 3 12 3C10 3 9.1 3.43 8 4"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.2s" dur="0.3s" values="12;24"/></path></g><rect width="16" height="5" x="20" y="4" fill="currentColor" mask="url(#lineMdBuyMeACoffeeFilled0)"><animate fill="freeze" attributeName="x" begin="0.6s" dur="0.6s" values="20;4"/></rect><rect width="8" height="10" x="8" y="20" fill="currentColor" mask="url(#lineMdBuyMeACoffeeFilled1)"><animate fill="freeze" attributeName="y" begin="1.5s" dur="0.6s" values="20;10"/></rect></svg>',
26+
},
27+
loaderSVG:
28+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="currentColor" fill-opacity="0" stroke-dasharray="48" stroke-dashoffset="48" d="M17 9v9a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.9s" values="48;0"/><animate fill="freeze" attributeName="fill-opacity" begin="1.2s" dur="0.225s" values="0;0.5"/></path><path stroke-dasharray="14" stroke-dashoffset="14" d="M17 14H20C20.55 14 21 13.55 21 13V10C21 9.45 20.55 9 20 9H17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.9s" dur="0.3s" values="14;28"/></path></g><mask id="lineMdCoffeeTwotoneLoop0"><path fill="none" stroke="#fff" stroke-width="1.5" d="M8 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M16 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4"><animateMotion calcMode="linear" dur="4.5s" path="M0 0v-8" repeatCount="indefinite"/></path></mask><rect width="24" height="0" y="7" fill="currentColor" mask="url(#lineMdCoffeeTwotoneLoop0)"><animate fill="freeze" attributeName="y" begin="1.2s" dur="0.9s" values="7;2"/><animate fill="freeze" attributeName="height" begin="1.2s" dur="0.9s" values="0;5"/></rect></svg>',
29+
iconSVG:
30+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><mask id="lineMdBuyMeACoffeeTwotone0"><path fill="#fff" d="M5 6C5 4 7 6 11.5 6C16 6 19 4 19 6L19 7C19 8.5 17 9 12.5 9C8 9 5 9 5 7L5 6Z"/></mask><mask id="lineMdBuyMeACoffeeTwotone1"><path fill="#fff" d="M10.125 18.15C10.04 17.29 9.4 11.98 9.4 11.98C9.4 11.98 11.34 12.31 12.5 11.73C13.66 11.16 14.98 11 14.98 11C14.98 11 14.4 17.96 14.35 18.46C14.3 18.96 13.45 19.3 12.95 19.3L11.23 19.3C10.73 19.3 10.21 19 10.125 18.15Z"/></mask><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="32" stroke-dashoffset="32" d="M7.5 10.5C7.5 10.5 8.33 17.43 8.5 19C8.67 20.57 10 21 11 21L13 21C14.5 21 15.875 19.86 16 19C16.125 18.14 17 7 17 7"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.8s" values="32;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M16.5 6C16.5 3.5 14 3 12 3C10 3 9.1 3.43 8 4"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.6s" dur="0.4s" values="12;24"/></path></g><rect width="16" height="5" x="20" y="4" fill="currentColor" mask="url(#lineMdBuyMeACoffeeTwotone0)"><animate fill="freeze" attributeName="x" begin="0.8s" dur="0.8s" values="20;4"/></rect><rect width="8" height="10" x="8" y="20" fill="currentColor" fill-opacity="0.5" mask="url(#lineMdBuyMeACoffeeTwotone1)"><animate fill="freeze" attributeName="y" begin="2s" dur="0.8s" values="20;10"/></rect></svg>',
31+
},
32+
filledTonal: {
33+
name: 'filled tonal',
34+
loaderSVG:
35+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="14" stroke-dashoffset="14" d="M6 19h12"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.75s" dur="0.6s" values="14;0"/></path><path stroke-dasharray="18" stroke-dashoffset="18" d="M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="18;0"/><animate attributeName="d" calcMode="linear" dur="2.25s" keyTimes="0;0.7;1" repeatCount="indefinite" values="M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5;M12 4 h2 v3 h2.5 L12 11.5M12 4 h-2 v3 h-2.5 L12 11.5;M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5"/></path></g></svg>',
36+
iconSVG:
37+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="14" stroke-dashoffset="14" d="M6 19h12"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.75s" dur="0.6s" values="14;0"/></path><path stroke-dasharray="18" stroke-dashoffset="18" d="M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1s" values="18;0"/></path></g></svg>',
38+
},
39+
outlined: {
40+
name: 'outlined',
41+
iconSVG:
42+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="66" stroke-dashoffset="66" d="M12 3H8C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.9s" values="66;132"/></path><path stroke-dasharray="26" stroke-dashoffset="26" d="M12 8C14.20914 8 16 9.79086 16 12C16 14.20914 14.20914 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.05s" dur="0.6s" values="26;0"/></path></g><circle cx="17" cy="7" r="1.5" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="1.65s" dur="0.6s" values="0;1"/></circle></svg>',
43+
},
44+
};
45+
46+
render(
47+
html`
48+
<main class="p-4" role="main">
49+
<div class="flex flex-col p-4">
50+
${map(this, iconButtonTypes, (type) => {
51+
const content = iconButtonsContents[type];
52+
53+
return html`
54+
<h2 class="text-onSurfaceVariant text-titleLarge capitalize mb-2">${content.name}</h2>
55+
<p class="text-onSurface text-bodyMedium empty:hidden mb-2">${content.hint}</p>
56+
<div class="flex gap-4 mb-6">
57+
${gecutIconButton({
58+
type,
59+
loader: content.loaderSVG
60+
? {
61+
svg: content.loaderSVG!,
62+
}
63+
: undefined,
64+
svg: content.iconSVG,
65+
title: content.name,
66+
events: {
67+
click: (event) => {
68+
console.log(event);
69+
70+
const target = event.currentTarget as HTMLButtonElement;
71+
72+
target.setAttribute('loading', '');
73+
74+
setTimeout(() => {
75+
target.removeAttribute('loading');
76+
}, 5120);
77+
},
78+
},
79+
80+
...content,
81+
})}
82+
${gecutIconButton({
83+
type,
84+
loader: content.loaderSVG
85+
? {
86+
svg: content.loaderSVG!,
87+
}
88+
: undefined,
89+
svg: content.iconSVG,
90+
91+
title: content.name + ' disabled',
92+
93+
...content,
94+
95+
disabled: true,
96+
})}
97+
${gecutIconButton({
98+
type,
99+
loader: content.loaderSVG
100+
? {
101+
svg: content.loaderSVG!,
102+
}
103+
: undefined,
104+
svg: content.iconSVG,
105+
106+
title: content.name + ' loading',
107+
108+
...content,
109+
110+
loading: true,
111+
})}
112+
${gecutIconButton({
113+
type,
114+
svg: content.iconSVG,
115+
116+
title: content.name + ' toggle',
117+
118+
...content,
119+
120+
toggle: true,
121+
})}
122+
</div>
123+
`;
124+
})}
125+
</div>
126+
</main>
127+
`,
128+
document.body,
129+
);

demo/lists/scripts.ts

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable max-len */
2-
import {gecutItem} from '@gecut/components';
3-
import {map} from 'lit/directives/map.js';
2+
import {gecutList} from '@gecut/components';
43
import {range} from 'lit/directives/range.js';
54
import {html, render} from 'lit/html.js';
65

@@ -9,53 +8,49 @@ import placeHolderImage from '../public/placeholder.webp';
98
render(
109
html`
1110
<main role="main">
12-
<div class="flex flex-col">
13-
${map(range(3), (i) =>
14-
gecutItem({
11+
<div class="flex flex-col p-4 gap-4 max-h-screen">
12+
${gecutList(
13+
{
14+
box: 'filled',
15+
},
16+
range(2),
17+
(i) => ({
1518
leading: {
16-
type: 'icon',
19+
element: 'icon',
1720
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="20" stroke-dashoffset="20" d="M12 5C13.66 5 15 6.34 15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="20;0"/></path><path stroke-dasharray="36" stroke-dashoffset="36" d="M12 14C16 14 19 16 19 17V19H5V17C5 16 8 14 12 14z" opacity="0"><set attributeName="opacity" begin="0.75s" to="1"/><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.75s" dur="0.6s" values="36;0"/></path></g></svg>',
1821
},
1922
headline: 'List Item: ' + i,
2023
}),
2124
)}
22-
${map(range(3), (i) =>
23-
gecutItem({
24-
onClick: console.log,
25-
leading: {type: 'avatar:character', character: 'C'},
25+
${gecutList(
26+
{
27+
box: 'filled',
28+
},
29+
range(3),
30+
(i) => ({
31+
leading: {element: 'avatar:character', character: 'C'},
2632
headline: 'List Item: ' + i,
33+
events: {click: console.log},
2734
supportingText:
2835
'Hybrid UI is a cutting-edge web front-end framework that empowers developers to create high-performance, memory-safe, and visually stunning applications. It provides a comprehensive set of tools and features to streamline development and deliver exceptional user experiences.',
2936
}),
3037
)}
31-
${map(range(3), (i) =>
32-
gecutItem({
33-
headline: 'List Item: ' + i,
38+
${gecutList(
39+
{
40+
box: 'filled',
41+
scrollable: true,
42+
fade: 'auto',
43+
},
44+
range(10),
45+
(i) => ({
46+
href: '#' + i,
3447
leading: {
35-
type: 'icon',
36-
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-dasharray="20" stroke-dashoffset="20" d="M12 5C13.66 5 15 6.34 15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="20;0"/></path><path stroke-dasharray="36" stroke-dashoffset="36" d="M12 14C16 14 19 16 19 17V19H5V17C5 16 8 14 12 14z" opacity="0"><set attributeName="opacity" begin="0.75s" to="1"/><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.75s" dur="0.6s" values="36;0"/></path></g></svg>',
37-
},
38-
supportingText:
39-
'Hybrid UI is a cutting-edge web front-end framework that empowers developers to create high-performance, memory-safe, and visually stunning applications. It provides a comprehensive set of tools and features to streamline development and deliver exceptional user experiences.',
40-
supportingTextTwoLine: true,
41-
trailingSupportingText: {
42-
type: 'number',
43-
value: '1000',
44-
maximum: 99,
48+
element: 'image',
49+
placeholder: placeHolderImage,
50+
source: 'https://picsum.photos/' + (i + 100),
4551
},
46-
}),
47-
)}
48-
${map(range(10), (i) =>
49-
gecutItem({
50-
href: '#' + i,
51-
leading: {type: 'image', placeholder: placeHolderImage, source: 'https://picsum.photos/' + (i + 1) * 100},
5252
headline: 'List Item: ' + i,
5353
divider: true,
54-
trailing: {
55-
type: 'icon-button',
56-
onClick: console.log,
57-
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275q0 .15-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"/></svg>',
58-
},
5954
supportingText:
6055
'Hybrid UI is a cutting-edge web front-end framework that empowers developers to create high-performance, memory-safe, and visually stunning applications. It provides a comprehensive set of tools and features to streamline development and deliver exceptional user experiences.',
6156
}),

demo/main/global.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import '@gecut/styles/css';
2-
@import '@gecut/styles/palettes/h260.css';
2+
@import './h154.css';
33

44
html,
55
body {

0 commit comments

Comments
 (0)