@bagelink/vue 0.0.160 → 0.0.164

package/src/components/formkit/MiscFields.vue

@@ -1,74 +1,74 @@
 <template>
-	<div class="misc-wrap">
-		<Btn
-			class="add-btn"
-			color="gray"
-			flat
-			@click="addToField(field)"
-			v-for="(field, i) in fields.filter(
+  <div class="misc-wrap">
+    <Btn
+      class="add-btn"
+      color="gray"
+      flat
+      @click="addToField(field)"
+      v-for="(field, i) in fields.filter(
 				(field: any) => field.value?.length === 0,
 			)"
-			:key="i"
-			thin
-		>
-			{{ addBtnLabel }} {{ field.context?.label }}
-		</Btn>
-	</div>
+      :key="i"
+      thin
+    >
+      {{ addBtnLabel }} {{ field.context?.label }}
+    </Btn>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { Btn } from '@bagelink/vue';
+import { Btn } from "@bagelink/vue";
 
 const props = defineProps<{
-	context: Record<string, any>;
-	addBtnLabel: string
+  context: Record<string, any>;
+  addBtnLabel: string;
 }>();
 
 const fields = $computed(() => props.context?.node?.parent?.children || []);
 
 const addToField = (field: any) => {
-	field.input([{}]);
-	console.log(fields);
+  field.input([{}]);
+  console.log(fields);
 };
 </script>
 
 <style scoped>
 .misc-wrap {
-	display: flex;
-	gap: 1rem;
-	border-top: 1px solid var(--border-color);
-	padding-top: 0.5rem;
-	margin-bottom: auto;
+  display: flex;
+  gap: 1rem;
+  border-top: 1px solid var(--border-color);
+  padding-top: 0.5rem;
+  margin-bottom: auto;
 }
 
 .gray.thin.btn-txt.btn.add-btn {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-	padding-left: 0;
-	padding-right: 0;
-	transition: var(--bgl-transition);
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-left: 0;
+  padding-right: 0;
+  transition: var(--bgl-transition);
 }
 
 .add-btn:active {
-	background: none !important;
+  background: none !important;
 }
 
 .add-btn::before {
-	content: '+';
-	font-size: 10px;
-	background: var(--bgl-gray-light);
-	border-radius: 100%;
-	height: 14px;
-	width: 14px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--bgl-gray);
+  content: "+";
+  font-size: 10px;
+  background: var(--bgl-gray-light);
+  border-radius: 100%;
+  height: 14px;
+  width: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bgl-gray);
 }
 
 .add-btn:hover::before {
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
 </style>

package/src/components/formkit/Toggle.vue

@@ -1,164 +1,164 @@
 <template>
-	<div
-		class="bagel-input checkbox"
-		:class="{ check: context?.attrs.isCheckbox }"
-		:title="context?.help"
-	>
-		<label class="switch">
-			<input
-				@change="() => props.context?.node.input(inputVal)"
-				type="checkbox"
-				v-model="inputVal"
-				:id="context?.id"
-			>
-			<span class="slider round" />
-		</label>
-	</div>
+  <div
+    class="bagel-input checkbox"
+    :class="{ check: context?.attrs.isCheckbox }"
+    :title="context?.help"
+  >
+    <label class="switch">
+      <input
+        @change="() => props.context?.node.input(inputVal)"
+        type="checkbox"
+        v-model="inputVal"
+        :id="context?.id"
+      />
+      <span class="slider round" />
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { watch } from "vue";
 
 const props = defineProps({
-	context: Object,
+  context: Object,
 });
 
 let inputVal = $ref(false);
 
 watch(
-	() => props.context?.value,
-	(newVal) => {
-		inputVal = newVal;
-	},
-	{ immediate: true },
+  () => props.context?.value,
+  (newVal) => {
+    inputVal = newVal;
+  },
+  { immediate: true }
 );
 </script>
 
 <style>
 .checkbox-label {
-	display: flex;
-	gap: 0.5rem;
-	flex-direction: row-reverse;
-	justify-content: flex-end;
-	align-items: center;
-	cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
 }
 </style>
 
 <style scoped>
 .no-edit {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 .radio-wrap p {
-	display: inline-block;
-	color: var(--input-bg);
-	font-size: var(--input-font-size);
-	margin-inline-end: 10px;
+  display: inline-block;
+  color: var(--input-bg);
+  font-size: var(--input-font-size);
+  margin-inline-end: 10px;
 }
 
 .radio-wrap label {
-	padding: 3px 5px;
-	display: inline-block;
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	background: var(--input-bg);
-	color: var(--bgl-black);
-	text-align: center;
-	margin: 8px 5px;
-	cursor: pointer;
-	user-select: none;
+  padding: 3px 5px;
+  display: inline-block;
+  border-radius: var(--input-border-radius);
+  font-size: var(--input-font-size);
+  background: var(--input-bg);
+  color: var(--bgl-black);
+  text-align: center;
+  margin: 8px 5px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .bagel-input .radio-wrap label::after {
-	background: transparent;
+  background: transparent;
 }
 
 .radio-wrap input {
-	display: none;
+  display: none;
 }
 
-.radio-wrap input:checked:checked+label {
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
+.radio-wrap input:checked:checked + label {
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
 
 .checkbox {
-	position: relative;
+  position: relative;
 }
 
 .switch {
-	position: relative;
-	display: inline-block;
-	height: calc(var(--input-height) / 2);
-	width: var(--input-height);
-	border-radius: var(--input-height);
+  position: relative;
+  display: inline-block;
+  height: calc(var(--input-height) / 2);
+  width: var(--input-height);
+  border-radius: var(--input-height);
 }
 
 .switch input {
-	opacity: 0;
-	width: 0;
-	height: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
 .bagel-input.checkbox.check {
-	margin: 0;
+  margin: 0;
 }
 
 .bagel-input.checkbox.check .switch {
-	width: calc(var(--input-height) / 2);
-	height: calc(var(--input-height) / 2);
-	transition: 0.2s;
+  width: calc(var(--input-height) / 2);
+  height: calc(var(--input-height) / 2);
+  transition: 0.2s;
 }
 
 .bagel-input.checkbox.check .slider:before {
-	position: absolute;
-	font-family: 'Material Symbols Outlined', serif;
-	content: '';
-	color: var(--bgl-white);
-	background: transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  position: absolute;
+  font-family: "Material Symbols Outlined", serif;
+  content: "";
+  color: var(--bgl-white);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.bagel-input.checkbox.check input:checked+.slider:before {
-	transform: none;
-	content: 'check';
+.bagel-input.checkbox.check input:checked + .slider:before {
+  transform: none;
+  content: "check";
 }
 
 .slider {
-	position: absolute;
-	cursor: pointer;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: var(--input-bg);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
-	border-radius: calc(var(--input-height) / 2);
-	box-shadow: inset 0 0 10px #00000020;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--input-bg);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: calc(var(--input-height) / 2);
+  box-shadow: inset 0 0 10px #00000020;
 }
 
 .slider:before {
-	position: absolute;
-	content: '';
-	height: calc(var(--input-height) / 2 - 4px);
-	width: calc(var(--input-height) / 2 - 4px);
-	left: 2px;
-	bottom: 2px;
-	border-radius: 50%;
-	background: var(--bgl-white);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
+  position: absolute;
+  content: "";
+  height: calc(var(--input-height) / 2 - 4px);
+  width: calc(var(--input-height) / 2 - 4px);
+  left: 2px;
+  bottom: 2px;
+  border-radius: 50%;
+  background: var(--bgl-white);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-input:checked+.slider {
-	background: var(--bgl-blue);
+input:checked + .slider {
+  background: var(--bgl-primary);
 }
 
-input:checked+.slider:before {
-	transform: translateX(calc(var(--input-height) / 2));
+input:checked + .slider:before {
+  transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/styles/bagel.css

@@ -4,6 +4,7 @@
 @import "text.css";
 @import "scrollbar.css";
 @import "theme.css";
+@import "dark.css";
 @import "transitions.css";
 @import "./fonts/Ploni.css";
 

package/src/styles/buttons.css

@@ -49,6 +49,11 @@ button,
 }
 
 
+.btn.thin {
+    height: calc(var(--btn-height) * 0.7);
+    line-height: calc(var(--btn-height) * 0.7);
+}
+
 @media screen and (max-width: 910px) {
     .btn {
         padding: 0 20px;

package/src/styles/dark.css

@@ -0,0 +1,46 @@
+[theme="dark"] {
+  --bgl-blue-20: rgba(46, 91, 255, 20%);
+  --bgl-blue-dark: #191c30;
+  --bgl-blue-light: #20262f;
+  --bgl-black: #dbdcdc;
+  --bgl-black-tint: #686868;
+  --bgl-white: #212121;
+  --bgl-gray: #606060;
+  --bgl-gray-light: #252729;
+  --bgl-gray-80: #e8ecef;
+  --bgl-gray-20: rgba(183, 183, 183, 0.2);
+  --bgl-pink: #f1416c;
+  --bgl-red: #9b403f;
+  --bgl-red-tint: #392828;
+  --bgl-yellow: #ffbb00;
+  --bgl-yellow-light: #fff6d5;
+  --bgl-green: #52875b;
+  --border-color: #292b2e;
+  --bgl-bg: #24252a;
+  --bgl-shadow: #4c577d26;
+  --input-bg: #252729;
+  --input-color: #929394;
+  --label-color: #92939480;
+  --placeholder-color: #92939440;
+  --input-height: 40px;
+  --bgl-hover-filter: brightness(120%);
+  --bgl-active-filter: brightness(100%);
+}
+
+[theme="dark"] .formkit-outer input:focus-visible,
+[theme="dark"] .formkit-outer select:focus-visible,
+[theme="dark"] .formkit-outer textarea:focus-visible,
+.input.active {
+  outline: none;
+  box-shadow: inset 0 0 10px #181212;
+}
+
+/* use this is to override the nav color */
+[theme="dark"] .nav {
+  --bgl-white: var(--bgl-black) !important;
+  /* --bgl-primary: #081851; */
+}
+
+[theme="dark"]input::-webkit-calendar-picker-indicator {
+  filter: invert(48%);
+}

package/src/styles/fonts/Ploni.css

@@ -4,7 +4,7 @@
     font-weight: 200;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-ultralight.woff2) format('woff2'), url(./Ploni/ploni-ultralight.woff) format('woff'), url(./Ploni/ploni-ultralight.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultralight-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultralight-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultralight-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -13,7 +13,7 @@
     font-weight: 300;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-light.woff2) format('woff2'), url(./Ploni/ploni-light.woff) format('woff'), url(./Ploni/ploni-light.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-light-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-light-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-light-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -22,7 +22,7 @@
     font-weight: 400;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-regular.woff2) format('woff2'), url(./Ploni/ploni-regular.woff) format('woff'), url(./Ploni/ploni-regular.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-regular-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-regular-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-regular-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -31,7 +31,7 @@
     font-weight: 500;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-medium.woff2) format('woff2'), url(./Ploni/ploni-medium.woff) format('woff'), url(./Ploni/ploni-medium.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-medium-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-medium-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-medium-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -40,7 +40,7 @@
     font-weight: 600;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-demibold.woff2) format('woff2'), url(./Ploni/ploni-demibold.woff) format('woff'), url(./Ploni/ploni-demibold.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-demibold-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-demibold-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-demibold-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -49,7 +49,7 @@
     font-weight: 700;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-bold.woff2) format('woff2'), url(./Ploni/ploni-bold.woff) format('woff'), url(./Ploni/ploni-bold.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-bold-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-bold-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-bold-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -58,7 +58,7 @@
     font-weight: 800;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-ultrabold.woff2) format('woff2'), url(./Ploni/ploni-ultrabold.woff) format('woff'), url(./Ploni/ploni-ultrabold.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultrabold-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultrabold-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-ultrabold-aaa.eot) format('eot')
 }
 
 @font-face {
@@ -67,5 +67,5 @@
     font-weight: 900;
     font-stretch: 100%;
     font-display: swap;
-    src: url(./Ploni/ploni-black.woff2) format('woff2'), url(./Ploni/ploni-black.woff) format('woff'), url(./Ploni/ploni-black.eot) format('eot')
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-black-aaa.woff2) format('woff2'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-black-aaa.woff) format('woff'), url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/ploni/ploni-black-aaa.eot) format('eot')
 }

package/src/styles/inputs.css

@@ -12,16 +12,25 @@ select {
     text-align: start;
     margin-bottom: 0.5rem;
     width: 100%;
+    color: var(--bgl-black);
 }
 
-.bagel-input label {
+.bagel-input::placeholder .bagel-input label {
     display: block;
     font-size: var(--input-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
-    color: var(--input-color);
 }
 
+.bagel-input::placeholder {
+    color: var(--placeholder-color);
+}
+
+.bagel-input label {
+    color: var(--label-color);
+}
+
+
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {
@@ -42,6 +51,13 @@ select {
     width: 100%;
 }
 
+.bagel-input input::placeholder,
+.bagel-input textarea::placeholder,
+.bagel-input select::placeholder,
+.custom-select .input::placeholder {
+    color: var(--placeholder-color);
+}
+
 .bagel-input.search-wrap {
     display: flex;
     flex-direction: row;
@@ -84,11 +100,7 @@ select {
 }
 
 .bagel-input:focus-within label {
-    color: var(--bgl-blue);
-}
-
-.bagel-input:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .bagel-input select.no-edit,
@@ -105,7 +117,7 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 label.active {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .inline-80 {
@@ -130,7 +142,7 @@ label.active {
 }
 
 button.formkit-input {
-    background: var(--bgl-blue);
+    background: var(--bgl-primary);
     color: var(--bgl-white);
     border: none;
     padding: 0 1.5rem;
@@ -182,7 +194,7 @@ button.formkit-input:active {
     font-size: var(--input-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
-    color: var(--input-color);
+    color: var(--label-color);
 }
 
 .formkit-outer input,
@@ -256,11 +268,11 @@ button.formkit-input:active {
 }
 
 .formkit-outer:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .formkit-outer:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .formkit-outer select.no-edit,
@@ -277,7 +289,7 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 label.active {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .label-count-0 label {
@@ -297,6 +309,38 @@ label.active {
     display: none;
 }
 
+input[type="color"] {
+    padding: 0.025rem 0.05rem;
+    display: block;
+    width: var(--input-height);
+    height: var(--input-height);
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+input[type="color"]::-webkit-color-swatch {
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-moz-color-swatch {
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-webkit-color-swatch:hover {
+    box-shadow: inset 0 0 10px #00000050;
+}
+
+input[type="color"]::-moz-color-swatch:hover {
+    box-shadow: inset 0 0 10px #00000050;
+}
+
 @media screen and (max-width: 910px) {
     .bagel-input.wider input {
         min-width: 120px;