@vario-software/vario-app-framework-frontend 2025.37.0

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@vario-software/vario-app-framework-frontend",
+  "version": "2025.37.0",
+  "repository": "https://github.com/vario-software/vario-app-framework",
+  "author": "VARIO Software AG",
+  "homepage": "https://www.vario.ag",
+  "description": "Provides CSS and useful JavaScript utilities for app features and capabilities to make a VARIO Cloud App appear in the corporate design, giving it a consistent look.",
+  "license": "MIT",
+  "publishConfig": { "access": "public" }
+}

package/script/communication.js

@@ -0,0 +1,30 @@
+import { appIdentifier, integrationId } from './parameters.js';
+
+const sendMain = payload =>
+{
+  window.parent.postMessage({
+    appIdentifier,
+    integrationId,
+    ...payload,
+  }, '*');
+};
+
+const receiveMain = actions =>
+{
+  const controller = new AbortController();
+
+  window.addEventListener('message', ({ data }) =>
+  {
+    Object.keys(actions).forEach(key =>
+    {
+      if (typeof data === 'object' && key in data)
+      {
+        actions[key](data[key]);
+      }
+    });
+  }, { signal: controller.signal });
+
+  return () => controller.abort();
+};
+
+export { sendMain, receiveMain };

package/script/height.js

@@ -0,0 +1,31 @@
+import { sendMain } from './communication.js';
+
+let transferedHeight;
+
+const transferHeight = () =>
+{
+  const height = document.body.scrollHeight;
+
+  if (transferedHeight !== height)
+  {
+    sendMain({ height });
+
+    transferedHeight = height;
+  }
+};
+
+const initHeightTransfer = () =>
+{
+  transferHeight();
+
+  const observer = new MutationObserver(transferHeight);
+
+  observer.observe(document.body, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+};
+
+export { initHeightTransfer };

package/script/index.js

@@ -0,0 +1,12 @@
+import { secureIntegration } from './secure.js';
+import { initHeightTransfer } from './height.js';
+import { initAppTokenHandling } from './token.js';
+import { initSharedSettings } from './sharedSettings.js';
+
+window.addEventListener('DOMContentLoaded', () =>
+{
+  secureIntegration();
+  initHeightTransfer();
+  initAppTokenHandling();
+  initSharedSettings();
+});

package/script/interaction.js

@@ -0,0 +1,38 @@
+import { sendMain, receiveMain } from './communication.js';
+
+const confirm = (confirmation, callback) =>
+{
+  sendMain({
+    confirmation,
+  });
+
+  const unsubscribe = receiveMain({
+    confimation: ({ key, values }) =>
+    {
+      callback(key, values);
+
+      unsubscribe();
+    },
+  });
+};
+
+const initStickynav = () => new Promise(resolve =>
+{
+  sendMain({
+    initStickynav: true,
+  });
+
+  const handleResponse = ({ data }) =>
+  {
+    if (data.initStickynav)
+    {
+      window.removeEventListener('message', handleResponse);
+
+      resolve(data.initStickynav);
+    }
+  };
+
+  window.addEventListener('message', handleResponse);
+});
+
+export { initStickynav, confirm };

package/script/parameters.js

@@ -0,0 +1,33 @@
+const url = new URL(window.location.href);
+
+const parameters = url.searchParams;
+
+const appIdentifier = parameters.get('appIdentifier');
+const integrationId = parameters.get('integrationId');
+
+const language = parameters.get('language');
+const supportMode = parameters.get('supportMode');
+const myCompanyId = parameters.get('myCompanyId');
+const uimode = parameters.get('uimode');
+const detailDatagridTable = parameters.get('detailDatagridTable');
+
+const superUser = parameters.get('superUser');
+const permissions = parameters.get('permissions');
+
+const additionalPayload = parameters.get('additionalPayload');
+
+export {
+  appIdentifier,
+  integrationId,
+
+  language,
+  supportMode,
+  myCompanyId,
+  uimode,
+  detailDatagridTable,
+
+  superUser,
+  permissions,
+
+  additionalPayload,
+};

package/script/permission.js

@@ -0,0 +1,11 @@
+const url = new URL(window.location.href);
+
+const parameters = url.searchParams;
+
+const superUser = parameters.get('superUser');
+const permissions = parameters.get('permissions');
+
+export function hasPermission(permission)
+{
+  return (superUser === 'true') || permissions.split(',').includes(permission);
+}

package/script/secure.js

@@ -0,0 +1,51 @@
+import { superUser, permissions } from './parameters.js';
+
+/* We need to ensure that this integration only
+   works when running in a "VARIO Cloud" frame.
+
+   So we make sure that it is embedded and that
+   the parent window is the VARIO Cloud.
+
+        {tenant}.vario.cloud ✓ valid
+  {tenant}.stage-vario.cloud ✓ valid
+    {tenant}.dev-vario.cloud ✓ valid
+                   localhost ✓ valid
+  */
+
+const getMainUrl = property =>
+{
+  if (document.referrer)
+  {
+    const refUrl = new URL(document.referrer);
+    return refUrl[property];
+  }
+
+  return 'tenant.vario.cloud';
+};
+
+const isValidIntegration = () =>
+{
+  if (window.parent === window)
+  {
+    return false;
+  }
+
+  if (!getMainUrl('hostname').match(/^[A-Za-z0-9-.]+\.(dev-|stage-)?vario\.cloud$|^localhost$/))
+  {
+    return false;
+  }
+
+  return true;
+};
+
+const secureIntegration = () =>
+{
+  if (!isValidIntegration())
+  {
+    throw new Error('Application does not run within VARIO-Cloud.');
+  }
+};
+
+const hasPermission = permission => (superUser === 'true') || permissions.split(',').includes(permission);
+
+export { secureIntegration, hasPermission };

package/script/sharedSettings.js

@@ -0,0 +1,42 @@
+import { sendMain, receiveMain } from './communication.js';
+import { uimode, detailDatagridTable } from './parameters.js';
+
+const sharedSettings = { uimode, detailDatagridTable };
+
+const transferSettings = (key, value) =>
+{
+  sendMain({
+    updateSettings: {
+      key,
+      value,
+    },
+  });
+};
+
+const initSharedSettings = () =>
+{
+  initUIMode();
+
+  receiveMain({
+    updateSettings: data =>
+    {
+      sharedSettings[data.key] = data.value;
+
+      initUIMode();
+    },
+  });
+};
+
+const initUIMode = () =>
+{
+  if (sharedSettings.uimode === 'dark')
+  {
+    window.document.body.classList.add('v-dark');
+  }
+  else
+  {
+    window.document.body.classList.remove('v-dark');
+  }
+};
+
+export { initSharedSettings, transferSettings, sharedSettings };

package/script/stickynavButtons.js

@@ -0,0 +1,56 @@
+import { sendMain } from './communication.js';
+
+export default class StickynavButtons
+{
+  #buttons = {};
+
+  add = function (button)
+  {
+    this.#buttons[button.key] = button;
+
+    this.#update();
+  };
+
+  delete = function (key)
+  {
+    delete this.#buttons[key];
+
+    this.#update();
+  };
+
+  toggleLoading = function (key)
+  {
+    this.#buttons[key].loading = !this.#buttons[key].loading;
+
+    this.#update();
+  };
+
+  toggleActive = function (key)
+  {
+    this.#buttons[key].disabled = !this.#buttons[key].disabled;
+
+    this.#update();
+  };
+
+  keys = function ()
+  {
+    return Object.keys(this.#buttons);
+  };
+
+  values = function ()
+  {
+    return Object.values(this.#buttons);
+  };
+
+  get = function (key)
+  {
+    return this.#buttons[key];
+  };
+
+  #update = function()
+  {
+    const stickynavButtons = this.values();
+
+    sendMain({ stickynavButtons });
+  };
+}

package/script/stickynavEditmode.js

@@ -0,0 +1,76 @@
+import { sendMain, receiveMain } from './communication.js';
+
+export default class StickynavEditmode
+{
+  #editFn = null;
+
+  #saveFn = null;
+
+  #cancelFn = null;
+
+  isActive = false;
+
+  constructor()
+  {
+    sendMain({ editmode: { add: true } });
+
+    this.unsubscribe = receiveMain({
+      edit: () =>
+      {
+        if (this.#editFn)
+        {
+          this.#editFn();
+        }
+
+        this.isActive = true;
+      },
+
+      save: () =>
+      {
+        if (this.#saveFn)
+        {
+          this.#saveFn();
+        }
+
+        this.isActive = false;
+      },
+
+      cancel: () =>
+      {
+        if (this.#cancelFn)
+        {
+          this.#cancelFn();
+        }
+
+        this.isActive = false;
+      },
+    });
+  }
+
+  activate = function ()
+  {
+    this.unsubscribe();
+
+    sendMain({ editmode: { activate: true } });
+  };
+
+  deactivate = function ()
+  {
+    sendMain({ editmode: { remove: true } });
+  };
+
+  setEditFn = function (callback)
+  {
+    this.#editFn = callback;
+  };
+
+  setSaveFn = function (callback)
+  {
+    this.#saveFn = callback;
+  };
+
+  setCancelFn = function (callback)
+  {
+    this.#cancelFn = callback;
+  };
+}

package/script/token.js

@@ -0,0 +1,20 @@
+let appToken;
+
+const initAppTokenHandling = () =>
+{
+  const url = new URL(window.location.href);
+
+  appToken = url.searchParams.get('appToken');
+
+  window.addEventListener('message', ({ data }) =>
+  {
+    if (data.appToken)
+    {
+      appToken = data.appToken;
+    }
+  });
+};
+
+const getAppToken = () => appToken;
+
+export { initAppTokenHandling, getAppToken };

package/style/button.css

@@ -0,0 +1,54 @@
+.v-button {
+  display: flex;
+  align-items: center;
+  position: relative;
+  border: 1px solid lightgrey;
+  border-radius: var(--v-border-radius);
+  outline: 0;
+  font-weight: 500;
+  padding: 0.2857em 1.1429em; /* 4px 16px */
+  font-family: inherit;
+  line-height: 1.715em; /* 24px */
+  color: var(--v-accent);
+  cursor: pointer;
+  min-height: 2.572em; /* 36px */
+  vertical-align: middle;
+  font-size: inherit;
+  transition: background 0.6s;
+  background: transparent radial-gradient(circle, transparent 1%, white 1%) center/14000%;
+}
+
+.v-button:active {
+  background-color: color-mix(in srgb, var(--v-accent), transparent 60%);
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.v-button::after {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  background-color: currentcolor;
+  transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.v-button:hover::after {
+  opacity: 0.1;
+}
+
+.v-button:active::after {
+  opacity: 0.14;
+}
+
+.v-button:not(.v-icon-only) > .v-icon {
+  margin-right: 0.3333em; /* 6px */
+}
+
+
+.v-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/style/card.css

@@ -0,0 +1,36 @@
+.v-card {
+  box-shadow: 0 0 0.2857em rgb(0 0 0 / 20%) !important; /* 0 0 4px */
+  border-radius: var(--v-border-radius);
+  overflow: hidden;
+  background-color: white;
+}
+
+.v-card > .v-head {
+  display: flex;
+  line-height: 2em; /* 28px */
+  letter-spacing: 0.0094em; /* 0.1316px */
+}
+
+.v-card > .v-head > .v-title {
+  color: var(--v-primary);
+  border-radius: var(--v-border-radius) 0 var(--v-border-radius) 0;
+  padding: 0.375em 1.125em; /* 6px 18px */
+  background-color: #e0e0e0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-bottom: 0.5625em; /* 9px */
+  font-size: 1.1429em; /* 18px */
+}
+
+.v-card > .v-head > .v-header {
+  display: inherit;
+  flex: 1 0 auto;
+  padding: 0 1.1429em 0.3571em 0.5714em; /* 0 16px 5px 8px */
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.v-card > .v-content:not(.v-no-padding) {
+  padding: 0 1.1429em 1.1429em; /* 0 16px 16px */
+}

package/style/checkbox.css

@@ -0,0 +1,69 @@
+.v-checkbox {
+  position: relative;
+}
+
+.v-checkbox input {
+  display: none;
+  cursor: pointer;
+}
+
+.v-checkbox input + label {
+  position: relative;
+  cursor: pointer;
+}
+
+.v-checkbox input + label::before {
+  content: '';
+  background-color: transparent;
+  border: 0.1429em solid rgb(0 0 0 / 54%); /* 2px */
+  border-radius: var(--v-border-radius);
+  padding: 0.5em; /* 7px */
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 0.3571em; /* 5px */
+  transition: background-color 150ms;
+}
+
+.v-checkbox input:checked + label::before {
+  background-color: var(--v-secondary);
+  border-color: var(--v-secondary);
+}
+
+.v-checkbox::after {
+  content: '';
+  position: absolute;
+  top: 0.32em; /* 4.5px */
+  left: -0.1em; /* -1.4px */
+  width: 1.4286em; /* 20px */
+  height: 1.4286em; /* 20px */
+  border-radius: 50%;
+  background: currentcolor;
+  opacity: 0.06;
+  transform: scale3d(0, 0, 1);
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.v-checkbox:hover::after {
+  transform: scale3d(1.4, 1.4, 1);
+}
+
+.v-checkbox input + label::after {
+  content: '';
+  position: absolute;
+  top: 0.0714em; /* 1px */
+  left: 0.4286em; /* 6px */
+  width: 0.2857em; /* 4px */
+  height: 0.7857em; /* 11px */
+  border: solid #fff;
+  border-width: 0 0.1429em 0.1429em 0; /* 2px 2px */
+  transform: rotate(45deg);
+  opacity: 0;
+  transition: opacity 100ms 100ms;
+}
+
+.v-checkbox input:checked + label::after {
+  opacity: 1;
+}

package/style/datagrid.css

@@ -0,0 +1,64 @@
+.v-datagrid > .v-head {
+  padding: 0.5714em 1.1429em; /* 8px 16px */
+  display: flex;
+}
+
+.v-datagrid > .v-head > .v-input {
+  flex: 1 0 auto;
+  max-width: 17.8572em; /* 250px */
+  min-width: 7.1429em; /* 100px */
+}
+
+.v-datagrid > .v-head > .v-header {
+  flex: 1 0 auto;
+  display: inherit;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.v-datagrid > .v-foot {
+  text-align: right;
+  font-weight: 400;
+  font-size: 0.8571em; /* 12px */
+  line-height: 3.5em; /* 42px */
+  padding: 0.3334em 1.1667em 0.3334em 1.3334em; /* 4px 14px 4px 16px */
+  border-top: 1px solid rgb(0 0 0 / 12%);
+  color: #666;
+}
+
+.v-datagrid > table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.v-datagrid > table > thead > tr > th,
+.v-datagrid > table > tbody > tr > td {
+  position: relative;
+  line-height: 4.1669em; /* 50px */
+  font-size: 0.8571em; /* 12px */
+  padding: 0;
+  text-align: center;
+}
+
+.v-datagrid > table > thead > tr > th {
+  background: var(--v-secondary);
+  font-weight: 500;
+  color: #fff;
+}
+
+.v-datagrid > table > tbody > tr > td {
+  cursor: pointer;
+}
+
+.v-datagrid > table > tbody > tr:hover > td::before {
+  content: '';
+  background: rgb(0 0 0 / 3%);
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.v-datagrid > table > tbody > tr:nth-child(2n) > td {
+  background: rgb(0 0 0 / 6%);
+}

package/style/distances.css

@@ -0,0 +1,159 @@
+:root {
+  --spacing-xs: 0.286em;
+  --spacing-sm: 0.572em;
+  --spacing-md: 1.143em;
+  --spacing-lg: 1.715em;
+}
+
+.v-pa-xs { 
+  padding: var(--spacing-xs);
+ }
+
+.v-pa-sm { 
+  padding: var(--spacing-sm);
+ }
+
+.v-pa-md { 
+  padding: var(--spacing-md);
+ }
+
+.v-pa-lg { 
+  padding: var(--spacing-lg); 
+}
+
+.v-py-xs { 
+  padding-top: var(--spacing-xs); 
+  padding-bottom: var(--spacing-xs); 
+}
+
+.v-py-sm { 
+  padding-top: var(--spacing-sm); 
+  padding-bottom: var(--spacing-sm); 
+}
+
+.v-py-md { 
+  padding-top: var(--spacing-md); 
+  padding-bottom: var(--spacing-md); 
+}
+
+.v-py-lg { 
+  padding-top: var(--spacing-lg); 
+  padding-bottom: var(--spacing-lg); 
+}
+
+.v-px-xs { 
+  padding-left: var(--spacing-xs); 
+  padding-right: var(--spacing-xs); 
+}
+
+.v-px-sm { 
+  padding-left: var(--spacing-sm); 
+  padding-right: var(--spacing-sm); 
+}
+
+.v-px-md { 
+  padding-left: var(--spacing-md); 
+  padding-right: var(--spacing-md); 
+}
+
+.v-px-lg { 
+  padding-left: var(--spacing-lg); 
+  padding-right: var(--spacing-lg); 
+}
+
+.v-pt-xs { padding-top: var(--spacing-xs); }
+.v-pt-sm { padding-top: var(--spacing-sm); }
+.v-pt-md { padding-top: var(--spacing-md); }
+.v-pt-lg { padding-top: var(--spacing-lg); }
+
+.v-pb-xs { padding-bottom: var(--spacing-xs); }
+.v-pb-sm { padding-bottom: var(--spacing-sm); }
+.v-pb-md { padding-bottom: var(--spacing-md); }
+.v-pb-lg { padding-bottom: var(--spacing-lg); }
+
+.v-pl-xs { padding-left: var(--spacing-xs); }
+.v-pl-sm { padding-left: var(--spacing-sm); }
+.v-pl-md { padding-left: var(--spacing-md); }
+.v-pl-lg { padding-left: var(--spacing-lg); }
+
+.v-pr-xs { padding-right: var(--spacing-xs); }
+.v-pr-sm { padding-right: var(--spacing-sm); }
+.v-pr-md { padding-right: var(--spacing-md); }
+.v-pr-lg { padding-right: var(--spacing-lg); }
+
+.v-ma-xs { 
+  margin: var(--spacing-xs);
+ }
+
+.v-ma-sm { 
+  margin: var(--spacing-sm);
+ }
+
+.v-ma-md { 
+  margin: var(--spacing-md);
+ }
+
+.v-ma-lg { 
+  margin: var(--spacing-lg); 
+}
+
+
+.v-my-xs { 
+  margin-top: var(--spacing-xs); 
+  margin-bottom: var(--spacing-xs); 
+}
+
+.v-my-sm { 
+  margin-top: var(--spacing-sm); 
+  margin-bottom: var(--spacing-sm); 
+}
+
+.v-my-md { 
+  margin-top: var(--spacing-md); 
+  margin-bottom: var(--spacing-md); 
+}
+
+.v-my-lg { 
+  margin-top: var(--spacing-lg); 
+  margin-bottom: var(--spacing-lg); 
+}
+
+.v-mx-xs { 
+  margin-left: var(--spacing-xs); 
+  margin-right: var(--spacing-xs); 
+}
+
+.v-mx-sm { 
+  margin-left: var(--spacing-sm); 
+  margin-right: var(--spacing-sm); 
+}
+
+.v-mx-md { 
+  margin-left: var(--spacing-md); 
+  margin-right: var(--spacing-md); 
+}
+
+.v-mx-lg { 
+  margin-left: var(--spacing-lg); 
+  margin-right: var(--spacing-lg); 
+}
+
+.v-mt-xs { margin-top: var(--spacing-xs); }
+.v-mt-sm { margin-top: var(--spacing-sm); }
+.v-mt-md { margin-top: var(--spacing-md); }
+.v-mt-lg { margin-top: var(--spacing-lg); }
+
+.v-mb-xs { margin-bottom: var(--spacing-xs); }
+.v-mb-sm { margin-bottom: var(--spacing-sm); }
+.v-mb-md { margin-bottom: var(--spacing-md); }
+.v-mb-lg { margin-bottom: var(--spacing-lg); }
+
+.v-ml-xs { margin-left: var(--spacing-xs); }
+.v-ml-sm { margin-left: var(--spacing-sm); }
+.v-ml-md { margin-left: var(--spacing-md); }
+.v-ml-lg { margin-left: var(--spacing-lg); }
+
+.v-mr-xs { margin-right: var(--spacing-xs); }
+.v-mr-sm { margin-right: var(--spacing-sm); }
+.v-mr-md { margin-right: var(--spacing-md); }
+.v-mr-lg { margin-right: var(--spacing-lg); }

package/style/grid-backup.css

@@ -0,0 +1,63 @@
+.v-row {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
+
+  --gap: 1.715em;
+
+  gap: var(--gap);
+}
+
+.v-row-xs { --gap: 0.286em; }
+.v-row-sm { --gap: 0.572em; }
+.v-row-md { --gap: 1.143em; }
+.v-row-lg { --gap: 1.715em; }
+.v-row-xl { --gap: 3.5em; }
+
+.v-row-xs, 
+.v-row-sm, 
+.v-row-md, 
+.v-row-lg, 
+.v-row-xl {
+  gap: var(--gap);
+}
+
+[class^="v-col-"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  flex: 1 1 calc(var(--col) * 100%);
+  max-width: calc(var(--col) * 100%);
+}
+
+.v-col-shrink {
+  flex: 0 0 auto !important;
+  width: auto !important;
+  max-width: none !important;
+}
+
+.v-col-grow {
+  flex: 1 1 auto !important;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.v-content > .v-row [class^="v-col-"],
+.v-content.v-row [class^="v-col-"] {
+  max-width: calc(100% * var(--col) - (var(--gap) / 2));
+  flex: 1 1 calc(100% * var(--col) - (var(--gap) / 2));
+}
+
+.v-col-1  { --col: 1 / 12; }
+.v-col-2  { --col: 2 / 12; }
+.v-col-3  { --col: 3 / 12; }
+.v-col-4  { --col: 4 / 12; }
+.v-col-5  { --col: 5 / 12; }
+.v-col-6  { --col: 6 / 12; }
+.v-col-7  { --col: 7 / 12; }
+.v-col-8  { --col: 8 / 12; }
+.v-col-9  { --col: 9 / 12; }
+.v-col-10 { --col: 10 / 12; }
+.v-col-11 { --col: 11 / 12; }
+.v-col-12 { --col: 1; }

package/style/grid.css

@@ -0,0 +1,67 @@
+/* Grid container */
+.v-row {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
+
+  --gap: 1.715em;
+
+  gap: var(--gap);
+}
+
+.v-row-xs { --gap: 0.286em; }
+.v-row-sm { --gap: 0.572em; }
+.v-row-md { --gap: 1.143em; }
+.v-row-lg { --gap: 1.715em; }
+.v-row-xl { --gap: 3.5em; }
+
+.v-col-1, .v-col-2, .v-col-3, .v-col-4,
+.v-col-5, .v-col-6, .v-col-7, .v-col-8,
+.v-col-9, .v-col-10, .v-col-11, .v-col-12 {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  flex: 1 1 calc(var(--col) * 100%);
+  max-width: calc(var(--col) * 100%);
+  align-items: stretch;
+}
+
+.v-col-content-natural{
+  align-items: flex-start;
+}
+
+.v-col-1  { --col: 1/12; }
+.v-col-2  { --col: 2/12; }
+.v-col-3  { --col: 3/12; }
+.v-col-4  { --col: 4/12; }
+.v-col-5  { --col: 5/12; }
+.v-col-6  { --col: 6/12; }
+.v-col-7  { --col: 7/12; }
+.v-col-8  { --col: 8/12; }
+.v-col-9  { --col: 9/12; }
+.v-col-10 { --col: 10/12; }
+.v-col-11 { --col: 11/12; }
+.v-col-12 { --col: 1;     }
+
+.v-col-shrink {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.v-col-grow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.v-col-vertical-center {
+  align-self: center;
+}

package/style/hr.css

@@ -0,0 +1,5 @@
+.v-hr{
+  border:none;
+  border-bottom: 1px solid rgb(0 0 0 / 24%);
+  margin: 1.143em 0;
+}

package/style/icon.css

@@ -0,0 +1,6 @@
+.v-icon {
+  display: inline-block;
+  width: 1em; /* 18px */
+  height: 1em; /* 18px */
+  font-size: 1.2858em; /* 18px */
+}

package/style/index.css

@@ -0,0 +1,13 @@
+@import 'variables.css';
+@import 'root.css';
+@import 'card.css';
+@import 'button.css';
+@import 'icon.css';
+@import 'input.css';
+@import 'hr.css';
+@import 'datagrid.css';
+@import 'grid.css';
+@import 'link.css';
+@import 'distances.css';
+@import 'checkbox.css';
+@import 'toggle.css';

package/style/input.css

@@ -0,0 +1,96 @@
+.v-input {
+  position: relative;
+}
+
+.v-input::before,
+.v-input::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.v-input::before {
+  border-bottom: 1px solid rgb(0 0 0 / 24%);
+  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.v-input:hover::before {
+  border-color: var(--v-secondary);
+}
+
+.v-input::after {
+  height: 0.1429em; /* 2px */
+  top: auto;
+  transform-origin: center bottom;
+  transform: scale3d(0, 1, 1);
+  background: var(--v-secondary);
+  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.v-input:focus-within::after {
+  transform: scale3d(1, 1, 1);
+}
+
+.v-input:focus-within .v-label {
+  color: var(--v-primary);
+}
+
+.v-input > input {
+  font: inherit;
+  line-height: 1.7143em; /* 24px */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  min-width: 0;
+  outline: 0;
+  user-select: auto;
+  letter-spacing: 0.0094em;
+  border: none;
+  color: rgb(0 0 0 / 87%);
+  padding: 1.1429em 0.4286em 0 0; /* 16px 6px 0 0 */
+}
+
+.v-input:has(.v-icon) > input {
+  padding-right: 1.7143em; /* 24px */
+}
+
+.v-input > .v-label {
+  pointer-events: none;
+  top: 0.7143em; /* 10px */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: absolute;
+  letter-spacing: 0.0094em;
+  color: rgb(0 0 0 / 60%);
+  transform-origin: left top;
+  line-height: 1.4286em; /* 20px */
+}
+
+.v-input > .v-icon {
+  pointer-events: none;
+  top: 0.5556em; /* 10px */
+  position: absolute;
+  right: 0.2222em; /* 4px */
+  color: rgb(0 0 0 / 60%);
+  line-height: 1.1111em; /* 20px */
+}
+
+.v-input > .v-label,
+.v-input:focus-within > .v-label.v-stack, 
+.v-input:has(input:not(:placeholder-shown)) > .v-label.v-stack{
+  transform: translateY(-30%) scale(0.75);
+  max-width: 133%;
+}
+
+.v-input:focus-within > .v-label.v-stackl {
+  color: currentcolor;
+}
+
+.v-input > .v-label.v-stack {
+  transform: translateY(0);
+  transition:
+    transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
+    max-width 0.324s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/style/link.css

@@ -0,0 +1,15 @@
+.v-link:link,
+.v-link:visited {
+  color: #588712;
+  text-decoration-color: #588712;
+}
+
+.v-link:hover,
+.v-link:visited:hover {
+  color: var(--v-accent);
+}
+
+.v-link:hover:not(.v-banner),
+.v-link:visited:hover:not(.v-banner) {
+  text-decoration-line: none;
+}

package/style/root.css

@@ -0,0 +1,53 @@
+:root {
+  --v-primary: #2e2e2e;
+  --v-secondary: #84b933;
+  --v-secondary-light: #96cc44;
+  --v-accent: #ab2e68;
+  --v-positive: #84b933;
+  --v-negative: #cd4837;
+  --v-info: #11518c;
+  --v-warning: #f0b618;
+  --v-dark: #1d1d1d;
+  --v-dark-page: #121212;
+  --v-border-radius: 4px;
+}
+
+body {
+  font-family:
+    Roboto,
+    -apple-system,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+  padding: 0.7143em; /* 10px | to fit exact distance in the app */
+  margin: 0;
+  color: var(--v-primary);
+  overscroll-behavior-x: none; /* prevent scroll bounce effect */
+  background:#fff;
+}
+
+.text-center{
+  text-align: center;
+}
+
+.text-grey{
+  color: rgb(0 0 0 / 60%) !important;
+  text-decoration-color: rgb(0 0 0 / 60%) !important;
+}
+
+.text-white{
+  color: #fff !important;
+  text-decoration-color: #fff !important;
+}
+
+.hidden{
+  display:none !important;
+}
+
+.full-height: {
+  height: 100%;
+}
+
+.full-width: {
+  width: 100%;
+}

package/style/toggle.css

@@ -0,0 +1,60 @@
+.v-toggle {
+  position: relative;
+}
+
+.v-toggle input {
+  display: none;
+  cursor: pointer;
+}
+
+.v-toggle input + label {
+  position: relative;
+  cursor: pointer;
+}
+
+.v-toggle input + label::before {
+  content: '';
+  display: inline-block;
+  height: 1em; /* 14px */
+  width: 2.2858em; /* 32px */
+  opacity: 0.38;
+  border-radius: 0.5em /* 7px */;
+  vertical-align: middle;
+  background-color: currentcolor;
+  cursor: pointer;
+  margin-right: 0.3571em; /* 5px */
+  transition: background-color 150ms;
+}
+
+.v-toggle input:checked + label::before {
+  background-color: var(--v-secondary);
+}
+
+.v-toggle input + label::after {
+  content: '';
+  position: absolute;
+  background-color: #fff;
+  border-radius: 50vh;
+  padding: 0.7143em; /* 10px */
+  top: -0.0714em; /* -1px */
+  left: 0;
+  cursor: pointer;
+  margin-right: 0.3571em; /* 5px */
+  box-shadow:
+    0 3px 1px -2px rgb(0 0 0 / 20%),
+    0 2px 2px 0 rgb(0 0 0 / 14%),
+    0 1px 5px 0 rgb(0 0 0 / 12%);
+  outline: 0 solid rgb(0 0 0 / 6%);
+  transition:
+    left 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    outline 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.v-toggle input:checked + label::after {
+  left: 0.8571em; /* 12px */
+  background-color: var(--v-secondary);
+}
+
+.v-toggle:hover input + label::after {
+  outline-width: 0.2143em; /* 3px */
+}

package/style/variables.css

@@ -0,0 +1,13 @@
+:root {
+  --v-primary: #2e2e2e;
+  --v-secondary: #84b933;
+  --v-secondary-light: #96cc44;
+  --v-accent: #ab2e68;
+  --v-positive: #84b933;
+  --v-negative: #cd4837;
+  --v-info: #11518c;
+  --v-warning: #f0b618;
+  --v-dark: #1d1d1d;
+  --v-dark-page: #121212;
+  --v-border-radius: 4px;
+}