native-document 1.0.125 → 1.0.127

package/src/ui/tokens/colors-dark.scss

@@ -0,0 +1,57 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --transparent: transparent;
+    --background: #242426;
+    --background-color: #242426;
+    --text-color: black;
+
+    --red: #ff4245;
+    --orange: #ff9230;
+    --yellow: #ffd600;
+    --green: #30d158;
+    --mint: #00dac3;
+    --teal: #00d2e0;
+    --cyan: #3cd3fe;
+    --blue: #0091ff;
+    --indigo: #6b5dff;
+    --purple: #db34f2;
+    --pink: #ff375f;
+    --brown: #b78a66;
+    --gray: #8e8e93;
+    --gray-lite-1: #636366;
+    --gray-lite-2: #48484a;
+    --gray-lite-3: #3a3a3c;
+    --gray-lite-4: #2c2c2e;
+    --gray-lite-5: #1c1c1e;
+    --white: #FFFFFF;
+    --black: #000000;
+    --sidereal-black: #0a0a0a;
+
+    --contrasted-red: #ff6165;
+    --contrasted-orange: #ffa056;
+    --contrasted-yellow: #fedf43;
+    --contrasted-green: #4ad968;
+    --contrasted-mint: #54dfcb;
+    --contrasted-teal: #3bddec;
+    --contrasted-cyan: #6dd9ff;
+    --contrasted-blue: #5cb8ff;
+    --contrasted-indigo: #a7aaff;
+    --contrasted-purple: #ea8dff;
+    --contrasted-pink: #ff8ac4;
+    --contrasted-brown: #dba679;
+    --contrasted-gray: #aeaeb2;
+    --contrasted-gray-lite-1: #7c7c80;
+    --contrasted-gray-lite-2: #545456;
+    --contrasted-gray-lite-3: #444446;
+    --contrasted-gray-lite-4: #363638;
+    --contrasted-gray-lite-5: #242426;
+  }
+}
+
+.light-mode {
+  color-scheme: light;
+}
+
+.dark-mode {
+  color-scheme: dark;
+}

package/src/ui/tokens/colors.scss

@@ -0,0 +1,54 @@
+:root {
+  --transparent: transparent;
+  --background: white;
+  --background-color: white;
+  --text-color: black;
+
+  --red: #ff383c;
+  --dark-red: #721c24;
+  --orange: #ff8d28;
+  --dark-orange: #ff8d28;
+  --yellow: #ffcc00;
+  --dark-yellow: #7e6c15;
+  --green: #34c759;
+  --dark-green: #155724;
+  --mint: #00c8b3;
+  --teal: #00c3d0;
+  --cyan: #00c0e8;
+  --blue: #0088ff;
+  --dark-lite-blue: #0c5460;
+  --dark-blue: #004085;
+  --indigo: #6155f5;
+  --purple: #cb30e0;
+  --pink: #ff2d55;
+  --brown: #ac7f5e;
+  --dark-brown: #856404;
+  --gray: #8e8e93;
+  --gray-lite-1: #aeaeb2;
+  --gray-lite-2: #c7c7cc;
+  --gray-lite-3: #d1d1d6;
+  --gray-lite-4: #e5e5ea;
+  --gray-lite-5: #f2f2f7;
+  --white: #ffffff;
+  --black: #000000;
+  --sidereal-black: #0a0a0a;
+
+  --contrasted-red: #e9152d;
+  --contrasted-orange: #c55300;
+  --contrasted-yellow: #a16a00;
+  --contrasted-green: #008932;
+  --contrasted-mint: #008575;
+  --contrasted-teal: #008198;
+  --contrasted-cyan: #007eae;
+  --contrasted-blue: #1e6ef4;
+  --contrasted-indigo: #564ade;
+  --contrasted-purple: #b02fc2;
+  --contrasted-pink: #e7124d;
+  --contrasted-brown: #956d51;
+  --contrasted-gray: #6c6c70;
+  --contrasted-gray-lite-1: #8e8e93;
+  --contrasted-gray-lite-2: #aeaeb2;
+  --contrasted-gray-lite-3: #bcbcc0;
+  --contrasted-gray-lite-4: #d8d8dc;
+  --contrasted-gray-lite-5: #ebebf0;
+}

package/src/ui/tokens/components.scss

@@ -0,0 +1,32 @@
+.tag {
+  display: inline-block;
+  background: var(--gray-lite-3);
+  color: var(--white);
+  padding: var(--space-tiny) var(--space-comfortable);
+  border-radius: var(--radius-pill);
+}
+.spacer {
+  flex: 1;
+}
+.hidden {
+  display: none;
+}
+.note {
+  font-size: var(--note-size);
+}
+.hint {
+  font-size: var(--hint-size);
+}
+.right-footer-options {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: var(--space-cozy);
+  align-items: center;
+  align-content: center;
+}
+.no-margin {
+  margin: 0 !important;
+}
+.no-padding {
+  padding: 0 !important;
+}

package/src/ui/tokens/fonts.scss

@@ -0,0 +1,57 @@
+:root {
+  --font: Inter, Arial, sans-serif;
+  --diablo-detail-size: .5rem;
+  --diablo-size: .6rem;
+  --hint-size: .7rem;
+  --note-size: .8rem;
+  --description-size: 0.9rem;
+  --text-size: 1rem;
+  --field-size: .9rem;
+  --important-size: 1.25rem;
+
+  --main-title: 2.5rem;
+  --h1-font-size: 2.5rem;
+  --section-title: 1.6rem;
+  --h2-font-size: 1.6rem;
+  --sub-section-title: 1.4rem;
+  --h3-font-size:  1.4rem;
+  --content-title: 1.5rem;
+  --h4-font-size: 1.5rem;
+  --legend-title: 1.25rem;
+  --h5-font-size: 1.25rem;
+  --h6-font-size: 1.15rem;
+  --field-title: .9rem;
+  --text: 1rem;
+  --paragraph: 1rem;
+}
+
+* {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+H1, .main-title {
+  font-size: var(--main-title);
+  font-weight: 600;
+}
+H2, .section-title {
+  font-size: var(--section-title);
+  font-weight: 600;
+}
+H3, .sub-section-title, .card-title {
+  font-size: var(--block-title-size);
+  font-weight: 600;
+}
+H4, .content-title, .paragraph-title {
+  font-size: var(--sub-block-title-size);
+  font-weight: 600;
+}
+H5, .legend-title {
+  font-size: var(--sub-block-title-size);
+  font-weight: 600;
+}
+H6, .field-title, .hint-title {
+
+}
+p, .paragraph {
+}

package/src/ui/tokens/glass.scss

@@ -0,0 +1,10 @@
+
+.glass-container {
+  background: radial-gradient(circle, var(--transparent) 70%, var(--glass-color) 100%);
+  border-radius: 15px;
+  backdrop-filter: var(--glass-blur);
+  --webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  padding: 1rem;
+  overflow: hidden;
+}

package/src/ui/tokens/index.scss

@@ -0,0 +1,38 @@
+@use "reset";
+@use "opacity";
+@use "viewports";
+@use "fonts";
+@use "spacings";
+@use "colors" as colors;
+@use "colors-dark";
+@use "shadows";
+@use "layouts";
+@use "glass";
+@use "others";
+@use "animation";
+@use "radius";
+@use "components";
+
+@use "vars";
+
+
+body {
+  padding: 0;
+  margin: 0;
+  word-break: break-word;
+  font-family: var(--font);
+  color-scheme: light dark;
+  color: var(--text-color);
+}
+
+* {
+  box-sizing: border-box;
+  //transition: all .3s ease-in-out;
+}
+
+.titles-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  margin-top: 2rem;
+}

package/src/ui/tokens/layouts.scss

@@ -0,0 +1,228 @@
+:root {
+  --z-stack-z-index: 10_000;
+  --glass-color: rgba(255, 255, 255, 0.4);
+  --glass-blur: blur(1px);
+  --glass-shadow:  0px 4px 30px rgba(0, 0, 0, 0.2);
+  --glass-border: rgba(255, 255, 255, .5);
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+  column-gap: var(--space-tight);
+  &.started, &.leading {
+    justify-content: flex-start;
+  }
+  &.centered {
+    justify-content: center;
+  }
+  &.ended, &.trailing {
+    justify-content: flex-end;
+  }
+}
+.flex-fill, .flex-spacer {
+  flex: 1;
+}
+.grid {
+  display: grid;
+  grid-gap: var(--space-tight);
+}
+.custom-grid {
+  display: grid;
+  grid-template-columns: attr(data-columns, 1fr);
+  grid-template-rows: attr(data-rows, 0fr);
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.h-stack, .h-stack-multiline {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: center;
+  align-content: center;
+}
+.h-stack-responsive {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+.h-stack-multiline {
+  flex-wrap: wrap;
+}
+.v-stack {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+body.z-stack-open {
+  overflow: hidden;
+}
+.z-stack, .z-stack-relative {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--z-stack-z-index);
+  backdrop-filter: var(--glass-blur);
+  &.fill-parent {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .top-right {
+    top: 0;
+    right: 0;
+  }
+  .top-left {
+    top: 0;
+    left: 0;
+  }
+
+  .bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .left,
+  .left-center {
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .right,
+  .right-center {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+}
+
+.z-stack {
+  position: fixed;
+}
+.z-stack-relative {
+  position: absolute;
+}
+
+/** Alignment */
+.align-start, .align-top {
+  justify-content: flex-start;
+}
+.align-center, .align-middle {
+  justify-content: center;
+}
+.align-end, .align-bottom {
+  justify-content: flex-end;
+}
+.align-stretch {
+  justify-content: stretch;
+}
+.align-between {
+  justify-content: space-between;
+}
+.align-around {
+  justify-content: space-around;
+}
+.align-evenly {
+  justify-content: space-evenly;
+}
+
+/** Content Alignment */
+.content-stretch {
+  align-items: stretch;
+}
+.content-center, .content-middle {
+  align-items: center;
+}
+.content-start, .content-top {
+  align-items: flex-start;
+}
+.content-end, .content-bottom {
+  align-items: flex-end;
+}
+
+/** Spacing */
+.space-tiny {
+  column-gap: var(--space-tiny);
+  row-gap: var(--space-tiny);
+}
+.space-tight {
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.space-cozy {
+  column-gap: var(--space-cozy);
+  row-gap: var(--space-cozy);
+}
+.space-cozy-comfortable {
+  column-gap: var(--space-cozy-comfortable);
+  row-gap: var(--space-cozy-comfortable);
+}
+.space-comfortable {
+  column-gap: var(--space-comfortable);
+  row-gap: var(--space-comfortable);
+}
+.space-relaxed {
+  column-gap: var(--space-relaxed);
+  row-gap: var(--space-relaxed);
+}
+.space-loose {
+  column-gap: var(--space-loose);
+  row-gap: var(--space-loose);
+}
+.space-spacious {
+  column-gap: var(--space-spacious);
+  row-gap: var(--space-spacious);
+}
+
+/** Text Alignment */
+.text-center {
+  text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  .h-stack-responsive {
+    flex-direction: row;
+  }
+}

package/src/ui/tokens/opacity.scss

@@ -0,0 +1,21 @@
+:root {
+  --opacity-hidden: 0;
+  --opacity-disabled: .5;
+  --opacity-middle: .5;
+  --opacity-backdrop: .7;
+  --opacity-unfocused: .8;
+  --opacity-visible: 1;
+
+  --opacity-ghost: .1;
+  --opacity-faint: .2;
+  --opacity-subtle: .3;
+  --opacity-light: .4;
+  --opacity-medium: .5;
+  --opacity-moderate: .6;
+  --opacity-strong: .7;
+  --opacity-bold: .8;
+  --opacity-intense: .9;
+  --opacity-full: 1;
+
+  --background-opacity: .35;
+}

package/src/ui/tokens/others.scss

@@ -0,0 +1,11 @@
+:root {
+  --radius-small: 0.25rem;
+  --radius-medium: 0.5rem;
+  --radius-large: 1rem;
+  --radius-round: 50%;
+  --radius-pill: 35px;
+  --radius-none: 0;
+
+
+  --radius-modal: 12px;
+}

package/src/ui/tokens/radius.scss

@@ -0,0 +1,6 @@
+:root {
+  --radius-button: 5px;
+  --radius-card: 5px;
+  --radius-pill: 35px;
+  --radius-x: 10px;
+}

package/src/ui/tokens/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/ui/tokens/shadows.scss

@@ -0,0 +1,29 @@
+:root {
+  --shadow-focus-color: rgba(59, 130, 246, 0.5);
+  --shadow-inner-color: rgba(0, 0, 0, 0.06);
+  --shadow-outline-color: rgba(59, 130, 246, 0.5);
+  --shadow-glow-color: rgba(59, 130, 246, 0.3);
+
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1),
+               0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07),
+               0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
+               0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
+               0 10px 10px rgba(0, 0, 0, 0.04);
+  --shadow-double-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-modal: 0 20px 25px rgba(0, 0, 0, 0.15);
+  --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.12);
+
+  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --shadow-inner: inset 0 2px 4px var(--shadow-inner-color);
+  --shadow-outline: 0 0 0 3px var(--shadow-outline-color);
+  --shadow-glow: 0 0 20px var(--shadow-glow-color);
+}

package/src/ui/tokens/spacings.scss

@@ -0,0 +1,13 @@
+:root {
+  --space-tiny: 0.25rem;
+  --space-tight: 0.35rem;
+  --space-cozy: 0.5rem;
+  --space-cozy-comfortable: 0.75rem;
+  --space-comfortable: 1rem;
+  --space-relaxed: 1.5rem;
+  --space-loose: 2rem;
+  --space-spacious: 3rem;
+
+  --container-padding: 1rem;
+  --container-margin: 0rem;
+}

package/src/ui/tokens/vars.scss

@@ -0,0 +1,35 @@
+:root {
+  /* Primary */
+  --color-primary:          var(--blue);
+  --color-primary-hover:    var(--contrasted-blue);
+
+  /* Secondary */
+  --color-secondary:        var(--gray-lite-4);
+  --color-secondary-hover:  var(--gray-lite-3);
+  --color-secondary-text:   var(--text-color);
+
+  /* Danger */
+  --color-danger:           var(--red);
+  --color-danger-hover:     var(--contrasted-red);
+
+  /* Success */
+  --color-success:          var(--green);
+  --color-success-hover:    var(--contrasted-green);
+
+  /* Warning */
+  --color-warning:          var(--yellow);
+  --color-warning-hover:    var(--contrasted-yellow);
+
+  /* Info */
+  --color-info:             var(--cyan);
+  --color-info-hover:       var(--contrasted-cyan);
+
+  /* Ghost */
+  --color-ghost:            transparent;
+  --color-ghost-hover:      var(--gray-lite-5);
+  --color-ghost-text:       var(--text-color);
+
+  /* Link */
+  --color-link:             var(--blue);
+  --color-link-hover:       var(--contrasted-blue);
+}

package/src/ui/tokens/viewports.scss

@@ -0,0 +1,30 @@
+
+:root {
+  --mobile-width: 320px;
+  --tablet-width: 768px;
+  --desktop-width: 1024px;
+  --wide-desktop-width: 1280px;
+  --fullhd-width: 1440px;
+
+  --floor-layer: 0;
+  --noitifcation-layer: 1;
+  --dropdown-layer: 4;
+  --tooltip-layer: 2;
+  --overlay-layer: 10000;
+  --modal-layer: 10001;
+}
+
+@media only screen and (min-width: 768px) {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+  .at-least-tablet {
+    display: none;
+  }
+}

package/utils.js

@@ -1,10 +1,12 @@
 import NativeFetch from "./src/fetch/NativeFetch";
 import * as Cache from "./src/core/utils/cache";
 import * as filters from "./src/core/utils/filters/index";
-
+import {classPropertyAccumulator, cssPropertyAccumulator} from "./src/core/utils/property-accumulator";
 
 export {
     NativeFetch,
     Cache,
     filters,
+    classPropertyAccumulator,
+    cssPropertyAccumulator
 };

package/src/ui/components/button/Button.js

@@ -1,8 +0,0 @@
-import { Button } from "../../../core/elements";
-
-import './button.css';
-
-const ButtonRender = function($description) {
-
-    return Button('Just a button');
-};