.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
new file mode 100644
index 00000000..4f00b545
--- /dev/null
+++ b/docs/.vitepress/config.js
@@ -0,0 +1,54 @@
+import { resolve } from 'path'
+import svgLoader from 'vite-svg-loader'
+
+export default {
+ title: 'Omorphia',
+ description: 'A components library used for Modrinth.',
+ themeConfig: {
+ sidebar: [
+ {
+ items: [
+ { text: 'Introduction', link: '/' },
+ { text: 'Setup', link: '/setup' },
+ ]
+ },
+ {
+ text: 'Components',
+ items: [
+ { text: 'Icons', link: '/components/icons' },
+ { text: 'Button', link: '/components/button' },
+ { text: 'Card', link: '/components/card' },
+ ]
+ }
+ ],
+ footer: {
+ message: 'Released under the GPLv3 License.',
+ copyright: 'Copyright © 2023-present Rinth, Inc.'
+ },
+ },
+ vite: {
+ plugins: [
+ svgLoader({
+ svgoConfig: {
+ plugins: [
+ {
+ name: 'preset-default',
+ params: {
+ overrides: {
+ removeViewBox: false,
+ },
+ },
+ },
+ ],
+ }, }
+ ),
+ ],
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, '../../lib'),
+ 'omorphia': resolve(__dirname, '../../lib'),
+ },
+ dedupe: ['vue'],
+ }
+ }
+}
diff --git a/docs/.vitepress/theme/DemoContainer.vue b/docs/.vitepress/theme/DemoContainer.vue
new file mode 100644
index 00000000..3694d60c
--- /dev/null
+++ b/docs/.vitepress/theme/DemoContainer.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/compat.scss b/docs/.vitepress/theme/compat.scss
new file mode 100644
index 00000000..30473c5b
--- /dev/null
+++ b/docs/.vitepress/theme/compat.scss
@@ -0,0 +1,17 @@
+body {
+ color: var(--vp-c-text-1);
+ background-color: var(--vp-c-bg);
+}
+
+.VPLink, .title, .pager-link, .link, .header-anchor {
+ color: inherit;
+ transition: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active:not(&:disabled) {
+ scale: 1;
+ }
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 00000000..f47e39a9
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,14 @@
+import DefaultTheme from 'vitepress/theme'
+import Omorphia from 'omorphia'
+import DemoContainer from './DemoContainer.vue'
+
+
+import './compat.scss'
+
+export default {
+ ...DefaultTheme,
+ enhanceApp(ctx) {
+ ctx.app.use(Omorphia)
+ ctx.app.component('DemoContainer', DemoContainer)
+ }
+}
diff --git a/docs/components/button.md b/docs/components/button.md
new file mode 100644
index 00000000..44193fdd
--- /dev/null
+++ b/docs/components/button.md
@@ -0,0 +1,13 @@
+# Button
+
+
+
+
+
+```vue
+
+```
diff --git a/docs/components/card.md b/docs/components/card.md
new file mode 100644
index 00000000..3c441848
--- /dev/null
+++ b/docs/components/card.md
@@ -0,0 +1,13 @@
+# Card
+
+
+
+ This is a card!
+
+
+
+```vue
+
+This is a card!
+
+```
diff --git a/docs/components/icons.md b/docs/components/icons.md
new file mode 100644
index 00000000..1f5fd452
--- /dev/null
+++ b/docs/components/icons.md
@@ -0,0 +1,9 @@
+# Icons
+
+
+
+
+
+```vue
+
+```
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 00000000..58bc6e20
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/public/favicon.svg b/docs/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to docs/favicon.svg
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 00000000..3639e127
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,14 @@
+# Introduction
+
+## Overview
+
+Omorphia is Modrinth's internal component and style library for its Vue projects. It includes:
+
+- 🧩 Typed components which enhance HTML elements and provide a consistent UI
+- 🎨 CSS classes to easily style elements with a coherent style
+
+Omorphia is used in [Knossos](https://github.com/modrinth/knossos) (modrinth.com) and [Theseus](https://github.com/modrinth/theseus) (Minecraft launcher).
+
+## Getting started
+
+Follow the instructions on the [➜ **setup page** 🛠️](/setup).
diff --git a/docs/setup.md b/docs/setup.md
new file mode 100644
index 00000000..4e9e66af
--- /dev/null
+++ b/docs/setup.md
@@ -0,0 +1,5 @@
+# Setup
+
+```bash
+npm install omorphia
+```
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..686295e6
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/src/assets/icons/align-left.svg b/lib/assets/icons/align-left.svg
similarity index 100%
rename from src/assets/icons/align-left.svg
rename to lib/assets/icons/align-left.svg
diff --git a/src/assets/icons/archive.svg b/lib/assets/icons/archive.svg
similarity index 100%
rename from src/assets/icons/archive.svg
rename to lib/assets/icons/archive.svg
diff --git a/src/assets/icons/asterisk.svg b/lib/assets/icons/asterisk.svg
similarity index 100%
rename from src/assets/icons/asterisk.svg
rename to lib/assets/icons/asterisk.svg
diff --git a/src/assets/icons/bell-ring.svg b/lib/assets/icons/bell-ring.svg
similarity index 100%
rename from src/assets/icons/bell-ring.svg
rename to lib/assets/icons/bell-ring.svg
diff --git a/src/assets/icons/bell.svg b/lib/assets/icons/bell.svg
similarity index 100%
rename from src/assets/icons/bell.svg
rename to lib/assets/icons/bell.svg
diff --git a/src/assets/icons/book.svg b/lib/assets/icons/book.svg
similarity index 100%
rename from src/assets/icons/book.svg
rename to lib/assets/icons/book.svg
diff --git a/src/assets/icons/box.svg b/lib/assets/icons/box.svg
similarity index 100%
rename from src/assets/icons/box.svg
rename to lib/assets/icons/box.svg
diff --git a/src/assets/icons/calendar.svg b/lib/assets/icons/calendar.svg
similarity index 100%
rename from src/assets/icons/calendar.svg
rename to lib/assets/icons/calendar.svg
diff --git a/src/assets/icons/chart.svg b/lib/assets/icons/chart.svg
similarity index 100%
rename from src/assets/icons/chart.svg
rename to lib/assets/icons/chart.svg
diff --git a/src/assets/icons/check-circle.svg b/lib/assets/icons/check-circle.svg
similarity index 100%
rename from src/assets/icons/check-circle.svg
rename to lib/assets/icons/check-circle.svg
diff --git a/src/assets/icons/check.svg b/lib/assets/icons/check.svg
similarity index 100%
rename from src/assets/icons/check.svg
rename to lib/assets/icons/check.svg
diff --git a/src/assets/icons/chevron-left.svg b/lib/assets/icons/chevron-left.svg
similarity index 100%
rename from src/assets/icons/chevron-left.svg
rename to lib/assets/icons/chevron-left.svg
diff --git a/src/assets/icons/chevron-right.svg b/lib/assets/icons/chevron-right.svg
similarity index 100%
rename from src/assets/icons/chevron-right.svg
rename to lib/assets/icons/chevron-right.svg
diff --git a/src/assets/icons/clear.svg b/lib/assets/icons/clear.svg
similarity index 100%
rename from src/assets/icons/clear.svg
rename to lib/assets/icons/clear.svg
diff --git a/src/assets/icons/client.svg b/lib/assets/icons/client.svg
similarity index 100%
rename from src/assets/icons/client.svg
rename to lib/assets/icons/client.svg
diff --git a/src/assets/icons/clipboard-copy.svg b/lib/assets/icons/clipboard-copy.svg
similarity index 100%
rename from src/assets/icons/clipboard-copy.svg
rename to lib/assets/icons/clipboard-copy.svg
diff --git a/src/assets/icons/coins.svg b/lib/assets/icons/coins.svg
similarity index 100%
rename from src/assets/icons/coins.svg
rename to lib/assets/icons/coins.svg
diff --git a/src/assets/icons/contract.svg b/lib/assets/icons/contract.svg
similarity index 100%
rename from src/assets/icons/contract.svg
rename to lib/assets/icons/contract.svg
diff --git a/src/assets/icons/copyright.svg b/lib/assets/icons/copyright.svg
similarity index 100%
rename from src/assets/icons/copyright.svg
rename to lib/assets/icons/copyright.svg
diff --git a/src/assets/icons/currency.svg b/lib/assets/icons/currency.svg
similarity index 100%
rename from src/assets/icons/currency.svg
rename to lib/assets/icons/currency.svg
diff --git a/src/assets/icons/dashboard.svg b/lib/assets/icons/dashboard.svg
similarity index 100%
rename from src/assets/icons/dashboard.svg
rename to lib/assets/icons/dashboard.svg
diff --git a/src/assets/icons/download.svg b/lib/assets/icons/download.svg
similarity index 100%
rename from src/assets/icons/download.svg
rename to lib/assets/icons/download.svg
diff --git a/src/assets/icons/dropdown.svg b/lib/assets/icons/dropdown.svg
similarity index 100%
rename from src/assets/icons/dropdown.svg
rename to lib/assets/icons/dropdown.svg
diff --git a/src/assets/icons/edit.svg b/lib/assets/icons/edit.svg
similarity index 100%
rename from src/assets/icons/edit.svg
rename to lib/assets/icons/edit.svg
diff --git a/src/assets/icons/exit.svg b/lib/assets/icons/exit.svg
similarity index 100%
rename from src/assets/icons/exit.svg
rename to lib/assets/icons/exit.svg
diff --git a/src/assets/icons/expand.svg b/lib/assets/icons/expand.svg
similarity index 100%
rename from src/assets/icons/expand.svg
rename to lib/assets/icons/expand.svg
diff --git a/src/assets/icons/external.svg b/lib/assets/icons/external.svg
similarity index 100%
rename from src/assets/icons/external.svg
rename to lib/assets/icons/external.svg
diff --git a/src/assets/icons/eye-off.svg b/lib/assets/icons/eye-off.svg
similarity index 100%
rename from src/assets/icons/eye-off.svg
rename to lib/assets/icons/eye-off.svg
diff --git a/src/assets/icons/eye.svg b/lib/assets/icons/eye.svg
similarity index 100%
rename from src/assets/icons/eye.svg
rename to lib/assets/icons/eye.svg
diff --git a/src/assets/icons/file-text.svg b/lib/assets/icons/file-text.svg
similarity index 100%
rename from src/assets/icons/file-text.svg
rename to lib/assets/icons/file-text.svg
diff --git a/src/assets/icons/file.svg b/lib/assets/icons/file.svg
similarity index 100%
rename from src/assets/icons/file.svg
rename to lib/assets/icons/file.svg
diff --git a/src/assets/icons/filter.svg b/lib/assets/icons/filter.svg
similarity index 100%
rename from src/assets/icons/filter.svg
rename to lib/assets/icons/filter.svg
diff --git a/src/assets/icons/gap.svg b/lib/assets/icons/gap.svg
similarity index 100%
rename from src/assets/icons/gap.svg
rename to lib/assets/icons/gap.svg
diff --git a/src/assets/icons/github.svg b/lib/assets/icons/github.svg
similarity index 100%
rename from src/assets/icons/github.svg
rename to lib/assets/icons/github.svg
diff --git a/src/assets/icons/globe.svg b/lib/assets/icons/globe.svg
similarity index 100%
rename from src/assets/icons/globe.svg
rename to lib/assets/icons/globe.svg
diff --git a/src/assets/icons/grid.svg b/lib/assets/icons/grid.svg
similarity index 100%
rename from src/assets/icons/grid.svg
rename to lib/assets/icons/grid.svg
diff --git a/src/assets/icons/hamburger.svg b/lib/assets/icons/hamburger.svg
similarity index 100%
rename from src/assets/icons/hamburger.svg
rename to lib/assets/icons/hamburger.svg
diff --git a/src/assets/icons/hash.svg b/lib/assets/icons/hash.svg
similarity index 100%
rename from src/assets/icons/hash.svg
rename to lib/assets/icons/hash.svg
diff --git a/src/assets/icons/heart-handshake.svg b/lib/assets/icons/heart-handshake.svg
similarity index 100%
rename from src/assets/icons/heart-handshake.svg
rename to lib/assets/icons/heart-handshake.svg
diff --git a/src/assets/icons/heart.svg b/lib/assets/icons/heart.svg
similarity index 100%
rename from src/assets/icons/heart.svg
rename to lib/assets/icons/heart.svg
diff --git a/src/assets/icons/image.svg b/lib/assets/icons/image.svg
similarity index 100%
rename from src/assets/icons/image.svg
rename to lib/assets/icons/image.svg
diff --git a/src/assets/icons/info.svg b/lib/assets/icons/info.svg
similarity index 100%
rename from src/assets/icons/info.svg
rename to lib/assets/icons/info.svg
diff --git a/src/assets/icons/issues.svg b/lib/assets/icons/issues.svg
similarity index 100%
rename from src/assets/icons/issues.svg
rename to lib/assets/icons/issues.svg
diff --git a/src/assets/icons/left-arrow.svg b/lib/assets/icons/left-arrow.svg
similarity index 100%
rename from src/assets/icons/left-arrow.svg
rename to lib/assets/icons/left-arrow.svg
diff --git a/src/assets/icons/lightbulb.svg b/lib/assets/icons/light-bulb.svg
similarity index 100%
rename from src/assets/icons/lightbulb.svg
rename to lib/assets/icons/light-bulb.svg
diff --git a/src/assets/icons/link.svg b/lib/assets/icons/link.svg
similarity index 100%
rename from src/assets/icons/link.svg
rename to lib/assets/icons/link.svg
diff --git a/src/assets/icons/list.svg b/lib/assets/icons/list.svg
similarity index 100%
rename from src/assets/icons/list.svg
rename to lib/assets/icons/list.svg
diff --git a/src/assets/icons/lock.svg b/lib/assets/icons/lock.svg
similarity index 100%
rename from src/assets/icons/lock.svg
rename to lib/assets/icons/lock.svg
diff --git a/src/assets/icons/log-out.svg b/lib/assets/icons/log-out.svg
similarity index 100%
rename from src/assets/icons/log-out.svg
rename to lib/assets/icons/log-out.svg
diff --git a/src/assets/icons/moon.svg b/lib/assets/icons/moon.svg
similarity index 100%
rename from src/assets/icons/moon.svg
rename to lib/assets/icons/moon.svg
diff --git a/src/assets/icons/omorphia.svg b/lib/assets/icons/omorphia.svg
similarity index 100%
rename from src/assets/icons/omorphia.svg
rename to lib/assets/icons/omorphia.svg
diff --git a/src/assets/icons/paintbrush.svg b/lib/assets/icons/paintbrush.svg
similarity index 100%
rename from src/assets/icons/paintbrush.svg
rename to lib/assets/icons/paintbrush.svg
diff --git a/src/assets/icons/plus.svg b/lib/assets/icons/plus.svg
similarity index 100%
rename from src/assets/icons/plus.svg
rename to lib/assets/icons/plus.svg
diff --git a/src/assets/icons/report.svg b/lib/assets/icons/report.svg
similarity index 100%
rename from src/assets/icons/report.svg
rename to lib/assets/icons/report.svg
diff --git a/src/assets/icons/right-arrow.svg b/lib/assets/icons/right-arrow.svg
similarity index 100%
rename from src/assets/icons/right-arrow.svg
rename to lib/assets/icons/right-arrow.svg
diff --git a/src/assets/icons/save.svg b/lib/assets/icons/save.svg
similarity index 100%
rename from src/assets/icons/save.svg
rename to lib/assets/icons/save.svg
diff --git a/src/assets/icons/search.svg b/lib/assets/icons/search.svg
similarity index 100%
rename from src/assets/icons/search.svg
rename to lib/assets/icons/search.svg
diff --git a/src/assets/icons/send.svg b/lib/assets/icons/send.svg
similarity index 100%
rename from src/assets/icons/send.svg
rename to lib/assets/icons/send.svg
diff --git a/src/assets/icons/server.svg b/lib/assets/icons/server.svg
similarity index 100%
rename from src/assets/icons/server.svg
rename to lib/assets/icons/server.svg
diff --git a/src/assets/icons/settings.svg b/lib/assets/icons/settings.svg
similarity index 100%
rename from src/assets/icons/settings.svg
rename to lib/assets/icons/settings.svg
diff --git a/src/assets/icons/shield.svg b/lib/assets/icons/shield.svg
similarity index 100%
rename from src/assets/icons/shield.svg
rename to lib/assets/icons/shield.svg
diff --git a/src/assets/icons/slash.svg b/lib/assets/icons/slash.svg
similarity index 100%
rename from src/assets/icons/slash.svg
rename to lib/assets/icons/slash.svg
diff --git a/src/assets/icons/star.svg b/lib/assets/icons/star.svg
similarity index 100%
rename from src/assets/icons/star.svg
rename to lib/assets/icons/star.svg
diff --git a/src/assets/icons/sun.svg b/lib/assets/icons/sun.svg
similarity index 100%
rename from src/assets/icons/sun.svg
rename to lib/assets/icons/sun.svg
diff --git a/src/assets/icons/sunrise.svg b/lib/assets/icons/sunrise.svg
similarity index 100%
rename from src/assets/icons/sunrise.svg
rename to lib/assets/icons/sunrise.svg
diff --git a/src/assets/icons/tag.svg b/lib/assets/icons/tag.svg
similarity index 100%
rename from src/assets/icons/tag.svg
rename to lib/assets/icons/tag.svg
diff --git a/src/assets/icons/tags.svg b/lib/assets/icons/tags.svg
similarity index 100%
rename from src/assets/icons/tags.svg
rename to lib/assets/icons/tags.svg
diff --git a/src/assets/icons/transfer.svg b/lib/assets/icons/transfer.svg
similarity index 100%
rename from src/assets/icons/transfer.svg
rename to lib/assets/icons/transfer.svg
diff --git a/src/assets/icons/trash.svg b/lib/assets/icons/trash.svg
similarity index 100%
rename from src/assets/icons/trash.svg
rename to lib/assets/icons/trash.svg
diff --git a/src/assets/icons/undo.svg b/lib/assets/icons/undo.svg
similarity index 100%
rename from src/assets/icons/undo.svg
rename to lib/assets/icons/undo.svg
diff --git a/src/assets/icons/unknown-donation.svg b/lib/assets/icons/unknown-donation.svg
similarity index 100%
rename from src/assets/icons/unknown-donation.svg
rename to lib/assets/icons/unknown-donation.svg
diff --git a/src/assets/icons/unknown.svg b/lib/assets/icons/unknown.svg
similarity index 100%
rename from src/assets/icons/unknown.svg
rename to lib/assets/icons/unknown.svg
diff --git a/src/assets/icons/updated.svg b/lib/assets/icons/updated.svg
similarity index 100%
rename from src/assets/icons/updated.svg
rename to lib/assets/icons/updated.svg
diff --git a/src/assets/icons/upload.svg b/lib/assets/icons/upload.svg
similarity index 100%
rename from src/assets/icons/upload.svg
rename to lib/assets/icons/upload.svg
diff --git a/src/assets/icons/user-plus.svg b/lib/assets/icons/user-plus.svg
similarity index 100%
rename from src/assets/icons/user-plus.svg
rename to lib/assets/icons/user-plus.svg
diff --git a/src/assets/icons/user-x.svg b/lib/assets/icons/user-x.svg
similarity index 100%
rename from src/assets/icons/user-x.svg
rename to lib/assets/icons/user-x.svg
diff --git a/src/assets/icons/user.svg b/lib/assets/icons/user.svg
similarity index 100%
rename from src/assets/icons/user.svg
rename to lib/assets/icons/user.svg
diff --git a/src/assets/icons/users.svg b/lib/assets/icons/users.svg
similarity index 100%
rename from src/assets/icons/users.svg
rename to lib/assets/icons/users.svg
diff --git a/src/assets/icons/version.svg b/lib/assets/icons/version.svg
similarity index 100%
rename from src/assets/icons/version.svg
rename to lib/assets/icons/version.svg
diff --git a/src/assets/icons/wiki.svg b/lib/assets/icons/wiki.svg
similarity index 100%
rename from src/assets/icons/wiki.svg
rename to lib/assets/icons/wiki.svg
diff --git a/src/assets/icons/x.svg b/lib/assets/icons/x.svg
similarity index 100%
rename from src/assets/icons/x.svg
rename to lib/assets/icons/x.svg
diff --git a/src/assets/omorphia.scss b/lib/assets/omorphia.scss
similarity index 100%
rename from src/assets/omorphia.scss
rename to lib/assets/omorphia.scss
diff --git a/src/assets/styles/accessibility.scss b/lib/assets/styles/accessibility.scss
similarity index 100%
rename from src/assets/styles/accessibility.scss
rename to lib/assets/styles/accessibility.scss
diff --git a/src/assets/styles/classes.scss b/lib/assets/styles/classes.scss
similarity index 94%
rename from src/assets/styles/classes.scss
rename to lib/assets/styles/classes.scss
index 62b0b311..a3c5af66 100644
--- a/src/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -1,7 +1,7 @@
a,
.clickable {
- transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out,
- scale 0.05s ease-in-out, outline 0.2s ease-in-out;
+ transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
+ outline 0.2s ease-in-out;
&:active:not(&:disabled) {
scale: 0.95;
@@ -50,4 +50,4 @@ a,
:last-child {
margin-bottom: 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
similarity index 76%
rename from src/assets/styles/defaults.scss
rename to lib/assets/styles/defaults.scss
index 17c9a7ab..656e762c 100644
--- a/src/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -7,10 +7,9 @@ body {
// Defaults
background-color: var(--color-bg);
color: var(--color-base);
- --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
- Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
- --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
- Liberation Mono, monospace;
+ --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+ Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
font-family: var(--font-standard);
font-size: 16px;
font-weight: var(--font-weight-regular);
@@ -23,7 +22,7 @@ a {
text-decoration: none;
&:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
}
diff --git a/src/assets/styles/highlightjs.scss b/lib/assets/styles/highlightjs.scss
similarity index 69%
rename from src/assets/styles/highlightjs.scss
rename to lib/assets/styles/highlightjs.scss
index 24cf322e..351c093f 100644
--- a/src/assets/styles/highlightjs.scss
+++ b/lib/assets/styles/highlightjs.scss
@@ -1,10 +1,10 @@
.hljs,
.hljs-subst {
- color: #444
+ color: #444;
}
.hljs-comment {
- color: #888888
+ color: #888888;
}
.hljs-keyword,
@@ -14,7 +14,7 @@
.hljs-doctag,
.hljs-name {
color: #f58300;
- font-weight: bold
+ font-weight: bold;
}
.hljs-type,
@@ -25,13 +25,13 @@
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
- color: var(--color-brand)
+ color: var(--color-brand);
}
.hljs-title,
.hljs-section {
color: #008888;
- font-weight: bold
+ font-weight: bold;
}
.hljs-regexp,
@@ -41,34 +41,34 @@
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
- color: #BC6060
+ color: #bc6060;
}
.hljs-literal {
- color: #78A960
+ color: #78a960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
- color: #f58300
+ color: #f58300;
}
.hljs-meta {
- color: #1f7199
+ color: #1f7199;
}
.hljs-meta-string {
- color: #4d99bf
+ color: #4d99bf;
}
.hljs-emphasis {
- font-style: italic
+ font-style: italic;
}
.hljs-strong {
- font-weight: bold
+ font-weight: bold;
}
pre {
@@ -80,10 +80,10 @@ pre {
overflow-x: hidden;
code {
- line-height: 100%;
- padding: 0.2em;
- letter-spacing: -0.05em;
- word-break: normal;
- font-family: monospace;
+ line-height: 100%;
+ padding: 0.2em;
+ letter-spacing: -0.05em;
+ word-break: normal;
+ font-family: monospace;
}
}
diff --git a/src/assets/styles/normalize.scss b/lib/assets/styles/normalize.scss
similarity index 92%
rename from src/assets/styles/normalize.scss
rename to lib/assets/styles/normalize.scss
index b0c1902d..2768db43 100644
--- a/src/assets/styles/normalize.scss
+++ b/lib/assets/styles/normalize.scss
@@ -174,7 +174,8 @@ textarea {
*/
button,
-input { /* 1 */
+input {
+ /* 1 */
overflow: visible;
}
@@ -184,7 +185,8 @@ input { /* 1 */
*/
button,
-select { /* 1 */
+select {
+ /* 1 */
text-transform: none;
}
@@ -193,9 +195,9 @@ select { /* 1 */
*/
button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
-webkit-appearance: button;
}
@@ -204,9 +206,9 @@ button,
*/
button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
@@ -216,9 +218,9 @@ button::-moz-focus-inner,
*/
button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
@@ -267,8 +269,8 @@ textarea {
* 2. Remove the padding in IE 10.
*/
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
@@ -277,8 +279,8 @@ textarea {
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
height: auto;
}
@@ -287,7 +289,7 @@ textarea {
* 2. Correct the outline style in Safari.
*/
-[type="search"] {
+[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
@@ -296,7 +298,7 @@ textarea {
* Remove the inner padding in Chrome and Safari on macOS.
*/
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
@@ -346,4 +348,4 @@ template {
[hidden] {
display: none;
-}
\ No newline at end of file
+}
diff --git a/lib/assets/styles/utility.scss b/lib/assets/styles/utility.scss
new file mode 100644
index 00000000..d6ed04d0
--- /dev/null
+++ b/lib/assets/styles/utility.scss
@@ -0,0 +1,136 @@
+$gaps: (
+ '0': 0,
+ 'auto': auto,
+ 'xs': var(--gap-xs),
+ 'sm': var(--gap-sm),
+ 'md': var(--gap-md),
+ 'lg': var(--gap-lg),
+ 'xl': var(--gap-xl),
+);
+
+@each $name, $value in $gaps {
+ [class*='padding-#{$name}'] {
+ padding: $value;
+ }
+ [class*='padding-inline-#{$name}'] {
+ padding-inline: $value;
+ }
+ [class*='padding-block-#{$name}'] {
+ padding-block: $value;
+ }
+ [class*='padding-top-#{$name}'] {
+ padding-top: $value;
+ }
+ [class*='padding-bottom-#{$name}'] {
+ padding-bottom: $value;
+ }
+ [class*='padding-left-#{$name}'] {
+ padding-left: $value;
+ }
+ [class*='padding-right-#{$name}'] {
+ padding-right: $value;
+ }
+ [class*='margin-#{$name}'] {
+ margin: $value;
+ }
+ [class*='margin-inline-#{$name}'] {
+ margin-inline: $value;
+ }
+ [class*='margin-block-#{$name}'] {
+ margin-block: $value;
+ }
+ [class*='margin-top-#{$name}'] {
+ margin-top: $value;
+ }
+ [class*='margin-bottom-#{$name}'] {
+ margin-bottom: $value;
+ }
+ [class*='margin-left-#{$name}'] {
+ margin-left: $value;
+ }
+ [class*='margin-right-#{$name}'] {
+ margin-right: $value;
+ }
+}
+
+$bg-colors: (
+ 'base': var(--color-bg),
+ 'raised': var(--color-raised-bg),
+ 'clickable': var(--color-button-bg),
+ 'brand': var(--color-brand),
+ 'red': var(--color-red),
+ 'orange': var(--color-orange),
+ 'green': var(--color-green),
+ 'blue': var(--color-blue),
+ 'purple': var(--color-purple),
+ 'gray': var(--color-gray),
+);
+
+@each $name, $value in $bg-colors {
+ [class*='bg-#{$name}'] {
+ background-color: $value;
+ }
+}
+
+$colors: (
+ 'base': var(--color-base),
+ 'contrast': var(--color-contrast),
+ 'accent-contrast': var(--color-accent-contrast),
+ 'brand': var(--color-brand),
+ 'red': var(--color-red),
+ 'orange': var(--color-orange),
+ 'green': var(--color-green),
+ 'blue': var(--color-blue),
+ 'purple': var(--color-purple),
+ 'gray': var(--color-gray),
+);
+
+@each $name, $value in $colors {
+ [class*='color-#{$name}'] {
+ color: $value;
+ }
+}
+
+$radii: (
+ '0': 0,
+ 'xs': var(--radius-xs),
+ 'sm': var(--radius-sm),
+ 'md': var(--radius-md),
+ 'lg': var(--radius-lg),
+ 'xl': var(--radius-xl),
+ 'max': var(--radius-max),
+);
+
+@each $name, $value in $gaps {
+ [class*='radius-#{$name}'] {
+ border-radius: $value;
+ }
+ [class*='radius-top-left-#{$name}'] {
+ border-top-left-radius: $value;
+ }
+ [class*='radius-bottom-left-#{$name}'] {
+ border-bottom-left-radius: $value;
+ }
+ [class*='radius-top-right-#{$name}'] {
+ border-top-right-radius: $value;
+ }
+ [class*='radius-bottom-right-#{$name}'] {
+ border-bottom-right-radius: $value;
+ }
+ [class*='radius-top-#{$name}'] {
+ border-top-right-radius: $value;
+ border-top-left-radius: $value;
+ }
+ [class*='radius-bottom-#{$name}'] {
+ border-bottom-right-radius: $value;
+ border-bottom-left-radius: $value;
+ }
+ [class*='radius-left-#{$name}'] {
+ border-top-left-radius: $value;
+ border-bottom-left-radius: $value;
+ }
+ [class*='radius-right-#{$name}'] {
+ border-top-right-radius: $value;
+ border-bottom-right-radius: $value;
+ }
+}
diff --git a/src/assets/styles/variables.scss b/lib/assets/styles/variables.scss
similarity index 95%
rename from src/assets/styles/variables.scss
rename to lib/assets/styles/variables.scss
index fa70d279..e96048ec 100644
--- a/src/assets/styles/variables.scss
+++ b/lib/assets/styles/variables.scss
@@ -1,5 +1,5 @@
html {
- @extend .dark-mode;
+ @extend .light-mode;
--dark-color-base: #b0bac5;
--dark-color-contrast: #ecf9fb;
@@ -17,7 +17,7 @@ html {
--radius-max: 999999999px;
}
-.light-mode {
+.light-mode, .light {
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-button-bg: hsl(220, 13%, 91%);
@@ -36,7 +36,7 @@ html {
--color-brand: var(--color-green);
}
-.dark-mode {
+.dark-mode, .dark {
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-button-bg: hsl(222, 13%, 30%);
diff --git a/src/components/base/Button.vue b/lib/components/base/Button.vue
similarity index 72%
rename from src/components/base/Button.vue
rename to lib/components/base/Button.vue
index 9503264b..38beb795 100644
--- a/src/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -1,7 +1,7 @@
@@ -52,7 +41,7 @@ const iconOnly = computed(() => {
-
+
@@ -62,7 +51,7 @@ const iconOnly = computed(() => {
-
+
{
class="omorphia__button button-base padding-block-sm padding-inline-lg radius-sm"
:class="{
'standard-button': defaultDesign,
- 'icon-only': iconOnly,
+ 'icon-only': props.iconOnly,
'bg-raised': defaultDesign && color === 'raised',
'bg-red': defaultDesign && color === 'danger',
'bg-brand': defaultDesign && color === 'primary',
@@ -80,15 +69,15 @@ const iconOnly = computed(() => {
:target="external ? '_blank' : '_self'"
>
-
-
+
+
-
+
Missing link or action!
diff --git a/src/components/base/Card.vue b/lib/components/base/Card.vue
similarity index 72%
rename from src/components/base/Card.vue
rename to lib/components/base/Card.vue
index 0e3e6662..7fda57bc 100644
--- a/src/components/base/Card.vue
+++ b/lib/components/base/Card.vue
@@ -1,8 +1,7 @@
@@ -35,12 +34,9 @@ function toggleCollapsed() {
>