Skip to content

Commit cea8dae

Browse files
gravitanogravitano
committed
chore(ui): update file paths and dependencies
1 parent 4fddbd9 commit cea8dae

17 files changed

+478
-5387
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"docs:serve": "vitepress serve docs"
2222
},
2323
"dependencies": {
24+
"@morpheme/design-tokens": "^1.0.0",
2425
"@headlessui/vue": "^1.7.22",
2526
"@vueuse/core": "^11.0.3",
2627
"floating-vue": "^5.2.2",

‎packages/themes/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"license": "MIT",
1717
"dependencies": {
1818
"@morpheme/design-tokens": "^0.1.0-alpha.5",
19+
"@morpheme/theme": "^1.0.0",
1920
"vue": "^3.4.38",
2021
"sass": "^1.77.8"
2122
},

‎packages/ui/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"pagino": "^1.4.1",
3232
"@vueup/vue-quill": "^1.0.0-beta.8",
3333
"quill": "^1.3.7",
34-
"vue": "^3.4.38"
34+
"vue": "^3.4.38",
35+
"radix-vue": "^1.9.5"
3536
},
3637
"devDependencies": {
3738
"vue-tsc": "^2.1.4",

‎stories/foundation/colors/Colors.stories.ts ‎packages/ui/src/foundation/colors/Colors.stories.ts

File renamed without changes.

‎stories/foundation/colors/Colors.vue ‎packages/ui/src/foundation/colors/Colors.vue

+67-67
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,67 @@
1-
<script setup lang="ts">
2-
import tokens from '@morpheme/design-tokens/js/tailwind';
3-
4-
const colors = tokens.colors;
5-
6-
// colors.primary = primary;
7-
// colors.secondary = secondary;
8-
// colors.info = colors.info;
9-
// colors.warning = colors.warning;
10-
// colors.success = colors.success;
11-
// colors.error = colors.error;
12-
13-
const brandColors = [
14-
'bg-primary-500',
15-
'bg-secondary-500',
16-
'bg-info-500',
17-
'bg-warning-500',
18-
'bg-success-500',
19-
'bg-error-500',
20-
];
21-
22-
const copy = (color: string) => {
23-
navigator.clipboard.writeText(color);
24-
};
25-
</script>
26-
27-
<template>
28-
<h1 class="text-3xl font-bold mb-5">Colors</h1>
29-
<h3 class="text-lg font-semibold mb-3">Brand Colors</h3>
30-
<div class="grid gap-4 grid-cols-2 sm:grid-cols-6">
31-
<div v-for="color in brandColors" :key="color">
32-
<div
33-
class="rounded h-10 cursor-pointer"
34-
:class="color"
35-
@click="copy(colors[color.replace('bg-', '').replace('-500', '')][500])"
36-
></div>
37-
<p class="text-sm mt-1">
38-
{{ color.replace('bg-', '').replace('-500', '') }}
39-
<span class="font-mono text-gray-500 ml-1">
40-
{{ colors[color.replace('bg-', '').replace('-500', '')][500] }}
41-
</span>
42-
</p>
43-
</div>
44-
</div>
45-
<h3 class="text-lg font-semibold mb-3 mt-10">Tailwind Colors</h3>
46-
<div class="space-y-4 divide divide-y">
47-
<template v-for="(color, name) in colors" :key="name">
48-
<div v-if="typeof color !== 'string'" class="flex gap-4 py-3">
49-
<h4 class="w-2/12 font-semibold shrink-0">
50-
{{ name }}
51-
</h4>
52-
<div class="rounded px-3 py-2 w-10/12 grid grid-cols-5 gap-4">
53-
<div v-for="(c, shade) in color" :key="c">
54-
<div
55-
:style="{backgroundColor: c}"
56-
class="h-10 rounded cursor-pointer"
57-
@click="copy(c)"
58-
></div>
59-
<div class="text-sm mt-1">
60-
{{ shade }} <span class="text-gray-500">{{ c }}</span>
61-
</div>
62-
</div>
63-
</div>
64-
</div>
65-
</template>
66-
</div>
67-
</template>
1+
<script setup lang="ts">
2+
import tokens from '@morpheme/design-tokens/js/tailwind';
3+
4+
const colors = tokens.colors;
5+
6+
// colors.primary = primary;
7+
// colors.secondary = secondary;
8+
// colors.info = colors.info;
9+
// colors.warning = colors.warning;
10+
// colors.success = colors.success;
11+
// colors.error = colors.error;
12+
13+
const brandColors = [
14+
'bg-primary-500',
15+
'bg-secondary-500',
16+
'bg-info-500',
17+
'bg-warning-500',
18+
'bg-success-500',
19+
'bg-error-500',
20+
];
21+
22+
const copy = (color: string) => {
23+
navigator.clipboard.writeText(color);
24+
};
25+
</script>
26+
27+
<template>
28+
<h1 class="text-3xl font-bold mb-5">Colors</h1>
29+
<h3 class="text-lg font-semibold mb-3">Brand Colors</h3>
30+
<div class="grid gap-4 grid-cols-2 sm:grid-cols-6">
31+
<div v-for="color in brandColors" :key="color">
32+
<div
33+
class="rounded h-10 cursor-pointer"
34+
:class="color"
35+
@click="copy(colors[color.replace('bg-', '').replace('-500', '')][500])"
36+
></div>
37+
<p class="text-sm mt-1">
38+
{{ color.replace('bg-', '').replace('-500', '') }}
39+
<span class="font-mono text-gray-500 ml-1">
40+
{{ colors[color.replace('bg-', '').replace('-500', '')][500] }}
41+
</span>
42+
</p>
43+
</div>
44+
</div>
45+
<h3 class="text-lg font-semibold mb-3 mt-10">Tailwind Colors</h3>
46+
<div class="space-y-4 divide divide-y">
47+
<template v-for="(color, name) in colors" :key="name">
48+
<div v-if="typeof color !== 'string'" class="flex gap-4 py-3">
49+
<h4 class="w-2/12 font-semibold shrink-0">
50+
{{ name }}
51+
</h4>
52+
<div class="rounded px-3 py-2 w-10/12 grid grid-cols-5 gap-4">
53+
<div v-for="(c, shade) in color" :key="c">
54+
<div
55+
:style="{backgroundColor: c}"
56+
class="h-10 rounded cursor-pointer"
57+
@click="copy(c)"
58+
></div>
59+
<div class="text-sm mt-1">
60+
{{ shade }} <span class="text-gray-500">{{ c }}</span>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</template>
66+
</div>
67+
</template>

‎stories/foundation/elevation/Elevation.stories.ts ‎packages/ui/src/foundation/elevation/Elevation.stories.ts

File renamed without changes.

‎stories/foundation/elevation/Elevation.vue ‎packages/ui/src/foundation/elevation/Elevation.vue

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<script setup lang="ts">
2-
import tokens from '@morpheme/design-tokens/js/tailwind';
3-
</script>
4-
5-
<template>
6-
<h1 class="text-3xl font-bold mb-5">Elevation</h1>
7-
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
8-
<template v-for="(shadow, name) in tokens.boxShadow" :key="name">
9-
<div :style="{boxShadow: shadow}" class="rounded-xl p-6 border bg-white">
10-
<div class="mb-2 font-semibold">
11-
{{ name === 'DEFAULT' ? 'shadow' : `shadow-${name}` }}
12-
</div>
13-
<code class="text-mono text-xs">{{ shadow }}</code>
14-
</div>
15-
</template>
16-
</div>
17-
</template>
1+
<script setup lang="ts">
2+
import tokens from '@morpheme/design-tokens/js/tailwind';
3+
</script>
4+
5+
<template>
6+
<h1 class="text-3xl font-bold mb-5">Elevation</h1>
7+
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
8+
<template v-for="(shadow, name) in tokens.boxShadow" :key="name">
9+
<div :style="{boxShadow: shadow}" class="rounded-xl p-6 border bg-white">
10+
<div class="mb-2 font-semibold">
11+
{{ name === 'DEFAULT' ? 'shadow' : `shadow-${name}` }}
12+
</div>
13+
<code class="text-mono text-xs">{{ shadow }}</code>
14+
</div>
15+
</template>
16+
</div>
17+
</template>

‎stories/foundation/font/Font.stories.ts ‎packages/ui/src/foundation/font/Font.stories.ts

File renamed without changes.

‎stories/foundation/font/Font.vue ‎packages/ui/src/foundation/font/Font.vue

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
<script setup lang="ts">
2-
import tokens from '@morpheme/design-tokens/js/tailwind';
3-
</script>
4-
5-
<template>
6-
<h1 class="text-3xl font-bold mb-5">Font Family</h1>
7-
<div class="space-y-5 divide-y">
8-
<div v-for="(font, name) in tokens.fontFamily" :key="name" class="pt-4">
9-
<div>
10-
<div class="font-semibold text-xl">
11-
{{ name }}
12-
</div>
13-
<p class="text-sm">
14-
<code>{{ font }}</code>
15-
</p>
16-
</div>
17-
<p
18-
class="border-2 bg-gray-50 rounded-xl p-4 mt-4"
19-
:style="{fontFamily: font}"
20-
>
21-
Lorem ipsum dolor sit amet consectetur, adipisicing elit
22-
</p>
23-
</div>
24-
</div>
25-
</template>
1+
<script setup lang="ts">
2+
import tokens from '@morpheme/design-tokens/js/tailwind';
3+
</script>
4+
5+
<template>
6+
<h1 class="text-3xl font-bold mb-5">Font Family</h1>
7+
<div class="space-y-5 divide-y">
8+
<div v-for="(font, name) in tokens.fontFamily" :key="name" class="pt-4">
9+
<div>
10+
<div class="font-semibold text-xl">
11+
{{ name }}
12+
</div>
13+
<p class="text-sm">
14+
<code>{{ font }}</code>
15+
</p>
16+
</div>
17+
<p
18+
class="border-2 bg-gray-50 rounded-xl p-4 mt-4"
19+
:style="{fontFamily: font}"
20+
>
21+
Lorem ipsum dolor sit amet consectetur, adipisicing elit
22+
</p>
23+
</div>
24+
</div>
25+
</template>

‎stories/foundation/rounded/Rounded.stories.ts ‎packages/ui/src/foundation/rounded/Rounded.stories.ts

File renamed without changes.

‎stories/foundation/rounded/Rounded.vue ‎packages/ui/src/foundation/rounded/Rounded.vue

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
<script setup lang="ts">
2-
import tokens from '@morpheme/design-tokens/js/tailwind';
3-
import {remToPx} from '../utils';
4-
</script>
5-
6-
<template>
7-
<h1 class="text-3xl font-bold mb-5">Rounded</h1>
8-
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
9-
<div
10-
v-for="(rounded, name) in tokens.borderRadius"
11-
:key="name"
12-
:style="{borderRadius: rounded}"
13-
class="p-6 border-2 text-center bg-white"
14-
>
15-
<div class="font-semibold mb-3">
16-
{{ name === 'DEFAULT' ? 'rounded' : `rounded-${name}` }}
17-
</div>
18-
<code>{{ rounded }} ({{ remToPx(rounded) }})</code>
19-
</div>
20-
</div>
21-
</template>
1+
<script setup lang="ts">
2+
import tokens from '@morpheme/design-tokens/js/tailwind';
3+
import {remToPx} from '../utils';
4+
</script>
5+
6+
<template>
7+
<h1 class="text-3xl font-bold mb-5">Rounded</h1>
8+
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
9+
<div
10+
v-for="(rounded, name) in tokens.borderRadius"
11+
:key="name"
12+
:style="{borderRadius: rounded}"
13+
class="p-6 border-2 text-center bg-white"
14+
>
15+
<div class="font-semibold mb-3">
16+
{{ name === 'DEFAULT' ? 'rounded' : `rounded-${name}` }}
17+
</div>
18+
<code>{{ rounded }} ({{ remToPx(rounded) }})</code>
19+
</div>
20+
</div>
21+
</template>

‎stories/foundation/typography/Typography.stories.ts ‎packages/ui/src/foundation/typography/Typography.stories.ts

File renamed without changes.

‎stories/foundation/typography/Typography.vue ‎packages/ui/src/foundation/typography/Typography.vue

+38-38
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
<script setup lang="ts">
2-
import tokens from '@morpheme/design-tokens/js/tailwind';
3-
import {remToPx} from '../utils';
4-
</script>
5-
6-
<template>
7-
<h1 class="text-3xl font-bold mb-5">Typography</h1>
8-
<h2 class="text-2xl font-semibold">Font Size</h2>
9-
<div class="space-y-5 divide-y">
10-
<div v-for="(size, name) in tokens.fontSize" :key="name" class="pt-4">
11-
<div>
12-
<div class="font-semibold text-lg">{{ `text-${name}` }}</div>
13-
14-
<ul class="font-mono text-xs mt-1">
15-
<li>Font size: {{ size }}</li>
16-
</ul>
17-
</div>
18-
<p class="border-2 rounded-xl p-4 mt-4" :style="{fontSize: size}">
19-
Lorem ipsum dolor sit amet consectetur, adipisicing elit
20-
</p>
21-
</div>
22-
</div>
23-
<h2 class="text-2xl font-semibold mt-10">Font Weight</h2>
24-
<div class="space-y-5 divide-y">
25-
<div v-for="(weight, name) in tokens.fontWeight" :key="name" class="pt-4">
26-
<div>
27-
<div class="font-semibold text-lg">{{ `text-${name}` }}</div>
28-
29-
<ul class="font-mono text-xs mt-1">
30-
<li>Font weight: {{ weight }}</li>
31-
</ul>
32-
</div>
33-
<p class="border-2 rounded-xl p-4 mt-4" :style="{fontWeight: weight}">
34-
Lorem ipsum dolor sit amet consectetur, adipisicing elit
35-
</p>
36-
</div>
37-
</div>
38-
</template>
1+
<script setup lang="ts">
2+
import tokens from '@morpheme/design-tokens/js/tailwind';
3+
import {remToPx} from '../utils';
4+
</script>
5+
6+
<template>
7+
<h1 class="text-3xl font-bold mb-5">Typography</h1>
8+
<h2 class="text-2xl font-semibold">Font Size</h2>
9+
<div class="space-y-5 divide-y">
10+
<div v-for="(size, name) in tokens.fontSize" :key="name" class="pt-4">
11+
<div>
12+
<div class="font-semibold text-lg">{{ `text-${name}` }}</div>
13+
14+
<ul class="font-mono text-xs mt-1">
15+
<li>Font size: {{ size }}</li>
16+
</ul>
17+
</div>
18+
<p class="border-2 rounded-xl p-4 mt-4" :style="{fontSize: size}">
19+
Lorem ipsum dolor sit amet consectetur, adipisicing elit
20+
</p>
21+
</div>
22+
</div>
23+
<h2 class="text-2xl font-semibold mt-10">Font Weight</h2>
24+
<div class="space-y-5 divide-y">
25+
<div v-for="(weight, name) in tokens.fontWeight" :key="name" class="pt-4">
26+
<div>
27+
<div class="font-semibold text-lg">{{ `text-${name}` }}</div>
28+
29+
<ul class="font-mono text-xs mt-1">
30+
<li>Font weight: {{ weight }}</li>
31+
</ul>
32+
</div>
33+
<p class="border-2 rounded-xl p-4 mt-4" :style="{fontWeight: weight}">
34+
Lorem ipsum dolor sit amet consectetur, adipisicing elit
35+
</p>
36+
</div>
37+
</div>
38+
</template>

‎stories/foundation/utils.ts ‎packages/ui/src/foundation/utils.ts

File renamed without changes.

0 commit comments

Comments
 (0)