@onetype/framework 2.0.40 → 2.0.42

package/lib/items/elements/global/notice/notice.css

@@ -1,91 +1,57 @@
+/* Root */
+
 .e-2e3de5ec
 {
 	display: flex;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-2e3de5ec > .holder
 {
 	display: flex;
 	align-items: center;
 	gap: var(--ot-spacing-s);
 	width: 100%;
-	padding: 10px var(--ot-spacing-m);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	border-radius: var(--ot-radius-m);
 	font-size: var(--ot-size-s);
+	border: 1px solid transparent;
 }
 
+/* Icon */
+
 .e-2e3de5ec > .holder > .icon
 {
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 	flex-shrink: 0;
 }
 
+/* Text */
+
 .e-2e3de5ec > .holder > .text
 {
 	line-height: 1.4;
 }
 
-/* Colors */
+/* Color variants */
 
-.e-2e3de5ec > .holder[variant="red"]
-{
-	background: var(--ot-red-opacity);
-	border: 1px solid rgba(244, 63, 94, 0.25);
-	color: var(--ot-red);
-}
+.e-2e3de5ec > .holder.red { background: var(--ot-red-opacity); border-color: var(--ot-red-border); color: var(--ot-red); }
+.e-2e3de5ec > .holder.green { background: var(--ot-green-opacity); border-color: var(--ot-green-border); color: var(--ot-green); }
+.e-2e3de5ec > .holder.blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-border); color: var(--ot-blue); }
+.e-2e3de5ec > .holder.orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
+.e-2e3de5ec > .holder.brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-border); color: var(--ot-brand); }
 
-.e-2e3de5ec > .holder[variant="green"]
-{
-	background: var(--ot-green-opacity);
-	border: 1px solid rgba(52, 211, 153, 0.25);
-	color: var(--ot-green);
-}
+/* Background variants */
 
-.e-2e3de5ec > .holder[variant="blue"]
-{
-	background: var(--ot-blue-opacity);
-	border: 1px solid rgba(56, 189, 248, 0.25);
-	color: var(--ot-blue);
-}
+.e-2e3de5ec > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); color: var(--ot-text-2); }
 
-.e-2e3de5ec > .holder[variant="orange"]
-{
-	background: var(--ot-orange-opacity);
-	border: 1px solid rgba(251, 146, 60, 0.25);
-	color: var(--ot-orange);
-}
+/* Size variants */
 
-.e-2e3de5ec > .holder[variant="brand"]
-{
-	background: var(--ot-brand-opacity);
-	border: 1px solid rgba(99, 102, 241, 0.25);
-	color: var(--ot-brand);
-}
-
-.e-2e3de5ec > .holder[variant="bg-1"]
-{
-	background: var(--ot-bg-1);
-	border: 1px solid var(--ot-bg-1-border);
-	color: var(--ot-text-2);
-}
-
-.e-2e3de5ec > .holder[variant="bg-2"]
-{
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	color: var(--ot-text-2);
-}
-
-.e-2e3de5ec > .holder[variant="bg-3"]
-{
-	background: var(--ot-bg-3);
-	border: 1px solid var(--ot-bg-3-border);
-	color: var(--ot-text-2);
-}
-
-.e-2e3de5ec > .holder[variant="bg-4"]
-{
-	background: var(--ot-bg-4);
-	border: 1px solid var(--ot-bg-4-border);
-	color: var(--ot-text-2);
-}
+.e-2e3de5ec > .holder.size-s { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-2e3de5ec > .holder.size-m { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-2e3de5ec > .holder.size-l { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

package/lib/items/elements/global/notice/notice.js

@@ -17,15 +17,15 @@ onetype.AddonReady('elements', (elements) =>
 				value: ''
 			},
 			variant: {
-				type: 'string',
-				value: 'red',
-				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+				type: 'array',
+				value: ['red'],
+				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
+				<div :class="'holder ' + variant.join(' ')">
 					<i ot-if="icon" class="icon">{{ icon }}</i>
 					<span class="text">{{ text }}</span>
 				</div>

package/lib/items/elements/global/parameters/parameters.css

@@ -1,9 +1,13 @@
+/* Root */
+
 .e-29179902
 {
 	display: flex;
 	width: 100%;
 }
 
+/* Holder */
+
 .e-29179902 > .holder
 {
 	display: flex;
@@ -11,13 +15,7 @@
 	width: 100%;
 }
 
-.e-29179902 > .holder[variant="bg-2"]
-{
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	border-radius: var(--ot-radius-m);
-	padding: var(--ot-spacing-m);
-}
+/* Param */
 
 .e-29179902 > .holder > .param
 {
@@ -34,6 +32,8 @@
 	border-bottom: none;
 }
 
+/* Left */
+
 .e-29179902 > .holder > .param > .left
 {
 	display: flex;
@@ -41,6 +41,8 @@
 	gap: var(--ot-spacing-s);
 }
 
+/* Name */
+
 .e-29179902 > .holder > .param > .left > .name
 {
 	font-size: var(--ot-size-m);
@@ -49,29 +51,46 @@
 	color: var(--ot-text-1);
 }
 
+/* Type badge */
+
 .e-29179902 > .holder > .param > .left > .type
 {
-	font-size: 10px;
+	font-size: var(--ot-size-s);
 	font-weight: 500;
-	padding: 2px 6px;
-	border-radius: 4px;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
 	background: var(--ot-blue-opacity);
 	color: var(--ot-blue);
 }
 
+/* Required badge */
+
 .e-29179902 > .holder > .param > .left > .required
 {
-	font-size: 10px;
+	font-size: var(--ot-size-s);
 	font-weight: 500;
-	padding: 2px 6px;
-	border-radius: 4px;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
 	background: var(--ot-orange-opacity);
 	color: var(--ot-orange);
 }
 
-.e-29179902 > .holder > .param > .desc
+/* Description */
+
+.e-29179902 > .holder > .param > .description
 {
 	font-size: var(--ot-size-s);
 	color: var(--ot-text-2);
 	text-align: right;
 }
+
+/* Background variants */
+
+.e-29179902 > .holder.bg-1 { background: var(--ot-bg-1); border: 1px solid var(--ot-bg-1-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-2 { background: var(--ot-bg-2); border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-3 { background: var(--ot-bg-3); border: 1px solid var(--ot-bg-3-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-4 { background: var(--ot-bg-4); border: 1px solid var(--ot-bg-4-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+
+/* Border variant */
+
+.e-29179902 > .holder.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }

package/lib/items/elements/global/parameters/parameters.js

@@ -10,25 +10,34 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						name: { type: 'string', value: '' },
+						type: { type: 'string', value: '' },
+						required: { type: 'boolean', value: false },
+						description: { type: 'string', value: '' }
+					}
+				}
 			},
 			variant: {
-				type: 'string',
-				value: '',
-				options: ['', 'bg-2']
+				type: 'array',
+				value: [],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
+				<div :class="'holder ' + variant.join(' ')">
 					<div ot-for="item in items" class="param">
 						<div class="left">
 							<span class="name">{{ item.name }}</span>
 							<span class="type">{{ item.type }}</span>
 							<span ot-if="item.required" class="required">required</span>
 						</div>
-						<span ot-if="item.description" class="desc">{{ item.description }}</span>
+						<span ot-if="item.description" class="description">{{ item.description }}</span>
 					</div>
 				</div>
 			`;

package/lib/items/elements/global/tags/tags.css

@@ -1,8 +1,13 @@
+/* Root */
+
 .e-4a1d382d
 {
 	display: flex;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-4a1d382d > .holder
 {
 	display: flex;
@@ -11,11 +16,13 @@
 	flex-wrap: wrap;
 }
 
+/* Tag */
+
 .e-4a1d382d > .holder > .tag
 {
 	display: flex;
 	align-items: center;
-	padding: 6px 14px;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	font-size: var(--ot-size-s);
 	font-weight: 500;
 	color: var(--ot-text-2);
@@ -25,7 +32,7 @@
 	cursor: pointer;
 	outline: none;
 	white-space: nowrap;
-	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
 }
 
 .e-4a1d382d > .holder > .tag:hover
@@ -45,10 +52,10 @@
 
 .e-4a1d382d > .holder > .tag > .dot
 {
-	width: 6px;
-	height: 6px;
+	width: var(--ot-spacing-s);
+	height: var(--ot-spacing-s);
 	border-radius: 50%;
-	margin-right: 6px;
+	margin-right: var(--ot-spacing-s);
 	flex-shrink: 0;
 }
 
@@ -62,3 +69,9 @@
 {
 	background: white;
 }
+
+/* Size variants */
+
+.e-4a1d382d > .holder.size-s > .tag { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-4a1d382d > .holder.size-m > .tag { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-s); }
+.e-4a1d382d > .holder.size-l > .tag { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

package/lib/items/elements/global/tags/tags.js

@@ -10,12 +10,20 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: ['All']
+				value: ['All'],
+				each: {
+					type: 'string'
+				}
 			},
 			active: {
 				type: 'string',
 				value: 'All'
 			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['size-s', 'size-m', 'size-l']
+			},
 			_change: {
 				type: 'function'
 			}
@@ -38,7 +46,7 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<div class="holder">
+				<div :class="'holder ' + variant.join(' ')">
 					<button
 						ot-for="tag in normalized()"
 						:class="'tag' + (tag.label === active ? ' active' : '')"

package/lib/items/elements/navigation/navbar/navbar.css

@@ -1,17 +1,21 @@
+/* Root */
+
 .e-64d8716d
 {
 	display: flex;
 	flex-direction: column;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-64d8716d > .holder
 {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	height: 48px;
+	height: var(--ot-height-l);
 	padding: 0 var(--ot-spacing-m);
-	background: var(--ot-bg-1);
 	border-bottom: 1px solid var(--ot-bg-2-border);
 }
 
@@ -27,17 +31,16 @@
 
 .e-64d8716d > .holder > .logo > .logo-icon
 {
-	height: 16px;
+	height: var(--ot-size-m);
 }
 
 .e-64d8716d > .holder > .logo > .logo-arrow
 {
 	display: none;
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
 }
 
-
 /* Tabs */
 
 .e-64d8716d > .holder > .tabs
@@ -54,26 +57,25 @@
 	display: flex;
 	align-items: center;
 	height: 100%;
-	gap: 6px;
+	gap: var(--ot-spacing-s);
 	padding: 0 var(--ot-spacing-m);
 	border-right: 1px solid var(--ot-bg-2-border);
 	text-decoration: none;
 	white-space: nowrap;
-	transition: color 0.2s ease, background 0.2s ease;
+	transition: color 0.15s ease, background 0.15s ease;
 	font-weight: 500;
 	color: var(--ot-text-2);
 }
 
 .e-64d8716d > .holder .tab > i
 {
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 }
 
 .e-64d8716d > .holder .tab:hover,
 .e-64d8716d > .holder .tab.active
 {
 	color: var(--ot-text-1);
-	background: var(--ot-bg-2);
 }
 
 /* Right */
@@ -94,8 +96,8 @@
 	display: none;
 	align-items: center;
 	justify-content: center;
-	width: 34px;
-	height: 34px;
+	width: var(--ot-height-m);
+	height: var(--ot-height-m);
 	margin-left: auto;
 	background: none;
 	border: none;
@@ -105,7 +107,7 @@
 
 .e-64d8716d > .holder > .burger > i
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 }
 
 /* Menu */
@@ -114,7 +116,6 @@
 {
 	display: none;
 	flex-direction: column;
-	background: var(--ot-bg-1);
 	border-bottom: 1px solid var(--ot-bg-2-border);
 }
 
@@ -122,8 +123,8 @@
 {
 	display: flex;
 	align-items: center;
-	gap: 8px;
-	padding: 10px var(--ot-spacing-m);
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	font-size: var(--ot-size-m);
 	font-weight: 500;
 	color: var(--ot-text-2);
@@ -133,16 +134,37 @@
 
 .e-64d8716d > .menu > .link > i
 {
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 }
 
 .e-64d8716d > .menu > .link:hover,
 .e-64d8716d > .menu > .link.active
 {
 	color: var(--ot-text-1);
-	background: var(--ot-bg-2);
 }
 
+/* Background variants */
+
+.e-64d8716d > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-64d8716d > .holder.bg-1 ~ .menu { background: var(--ot-bg-1); }
+.e-64d8716d > .holder.bg-1 .tab:hover, .e-64d8716d > .holder.bg-1 .tab.active { background: var(--ot-bg-1-hover); }
+.e-64d8716d > .holder.bg-1 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-1 ~ .menu > .link.active { background: var(--ot-bg-1-hover); }
+
+.e-64d8716d > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-64d8716d > .holder.bg-2 ~ .menu { background: var(--ot-bg-2); }
+.e-64d8716d > .holder.bg-2 .tab:hover, .e-64d8716d > .holder.bg-2 .tab.active { background: var(--ot-bg-2-hover); }
+.e-64d8716d > .holder.bg-2 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-2 ~ .menu > .link.active { background: var(--ot-bg-2-hover); }
+
+.e-64d8716d > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-64d8716d > .holder.bg-3 ~ .menu { background: var(--ot-bg-3); }
+.e-64d8716d > .holder.bg-3 .tab:hover, .e-64d8716d > .holder.bg-3 .tab.active { background: var(--ot-bg-3-hover); }
+.e-64d8716d > .holder.bg-3 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-3 ~ .menu > .link.active { background: var(--ot-bg-3-hover); }
+
+.e-64d8716d > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-64d8716d > .holder.bg-4 ~ .menu { background: var(--ot-bg-4); }
+.e-64d8716d > .holder.bg-4 .tab:hover, .e-64d8716d > .holder.bg-4 .tab.active { background: var(--ot-bg-4-hover); }
+.e-64d8716d > .holder.bg-4 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-4 ~ .menu > .link.active { background: var(--ot-bg-4-hover); }
+
 /* Mobile */
 
 @media screen and (max-width: 900px)

package/lib/items/elements/navigation/navbar/navbar.js

@@ -10,13 +10,23 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: [
-					{ icon: 'widgets', label: 'Transforms', href: '/transforms', position: 'left' },
-					{ icon: 'payments', label: 'Pricing', href: '/pricing', position: 'left' },
-					{ icon: 'menu_book', label: 'Docs', href: 'https://docs.onetype.ai/transforms', position: 'left' },
-					{ icon: 'code', label: 'GitHub', href: 'https://github.com/nicely-gg/transforms', position: 'right' },
-					{ icon: 'arrow_forward', label: 'Get Started', href: '/get-started', position: 'right' }
-				]
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						icon: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						href: { type: 'string', value: '' },
+						target: { type: 'string', value: '' },
+						position: { type: 'string', value: 'left', options: ['left', 'right'] },
+						match: { type: 'string|array', value: '' }
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4']
 			}
 		},
 		render: function()
@@ -53,7 +63,7 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<nav class="holder">
+				<nav :class="'holder ' + variant.join(' ')">
 					<a class="logo" href="/">
 						<img class="logo-icon" src="https://cdn.onetype.ai/brand/logo/full-orange.svg" alt="OneType" />
 						<i class="logo-arrow">keyboard_arrow_down</i>
@@ -64,7 +74,7 @@ onetype.AddonReady('elements', (elements) =>
 					<div class="right">
 						<a ot-for="item in right" :class="'tab' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
-					<button class="burger" ot-click="toggle"><i ot-if="!open">menu</i><i ot-if="open">close</i></button>
+					<button class="burger" ot-click="toggle"><i>{{ open ? 'close' : 'menu' }}</i></button>
 				</nav>
 				<div ot-if="open" class="menu">
 					<a ot-for="item in all" :class="'link' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>