@1771technologies/lytenyte-pro 1.0.20 → 2.0.0-dev.0

package/css/all-colors.css

@@ -0,0 +1,8 @@
+@import "@1771technologies/lytenyte-design/design.css";
+@import "@1771technologies/lytenyte-design/cotton-candy.css";
+@import "@1771technologies/lytenyte-design/dark.css";
+@import "@1771technologies/lytenyte-design/light.css";
+@import "@1771technologies/lytenyte-design/shadcn-vars.css";
+@import "@1771technologies/lytenyte-design/shadcn.css";
+@import "@1771technologies/lytenyte-design/teal.css";
+@import "@1771technologies/lytenyte-design/term.css";

package/css/components/button.css

@@ -0,0 +1,176 @@
+@layer ln-grid {
+  /* BUTTON ELEMENTS */
+  [data-ln-button] {
+    box-sizing: border-box;
+    font-weight: 500;
+
+    &:focus-visible {
+      outline: 1px solid var(--ln-primary-50);
+    }
+
+    &[data-ln-size="xs"] {
+      height: 24px;
+      font-size: 0.75rem;
+      line-height: 20px;
+      padding: 0px var(--ln-padding-field-sm);
+      border-radius: var(--ln-radius-field-sm);
+    }
+    &[data-ln-size="sm"] {
+      height: 30px;
+      font-size: 0.75rem;
+      line-height: 20px;
+      padding: 0px var(--ln-padding-field-md);
+      border-radius: var(--ln-radius-field-md);
+    }
+    &[data-ln-size="md"] {
+      height: 32px;
+      font-size: 0.875rem;
+      line-height: 20px;
+      padding: 0px var(--ln-padding-field-md);
+      border-radius: var(--ln-radius-field-md);
+    }
+    &[data-ln-size="lg"] {
+      height: 36px;
+      font-size: 0.875rem;
+      line-height: 22px;
+      padding: 0px var(--ln-padding-field-lg);
+      border-radius: var(--ln-radius-field-lg);
+    }
+    &[data-ln-size="mx"] {
+      height: 38px;
+      font-size: 0.875rem;
+      line-height: 22px;
+      padding: 0px var(--ln-padding-field-xl);
+      border-radius: var(--ln-radius-field-lg);
+    }
+
+    transition-property: background-color, color;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    border: 1px solid transparent;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.99);
+    }
+
+    &:disabled {
+      background-color: var(--ln-bg-strong);
+      border: 1px solid transparent;
+      color: var(--ln-text-xlight);
+      cursor: not-allowed;
+    }
+  }
+
+  [data-ln-button="primary"] {
+    --mix-color: black;
+    background-color: var(--ln-primary-50);
+    color: var(--ln-text-primary-button);
+    border: 1px solid var(--ln-primary-70);
+
+    &:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--ln-primary-50) 90%, var(--mix-color) 10%);
+    }
+  }
+
+  [data-ln-button="secondary"] {
+    background-color: transparent;
+    color: var(--ln-text);
+
+    &:hover:not(:disabled) {
+      background-color: var(--ln-bg);
+    }
+  }
+
+  [data-ln-button="tertiary"] {
+    background-color: var(--ln-bg-button-light);
+    border: 1px solid var(--ln-border-button-light);
+
+    &:hover:not(:disabled) {
+      background-color: var(--ln-bg);
+    }
+  }
+
+  [data-ln-button="website"] {
+    border: 1px solid var(--ln-gray-30);
+    color: var(--ln-gray-80);
+    box-shadow:
+      inset 0 0 11px 0 hsla(176, 55%, 89%, 0.16),
+      0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px); /* Safari support */
+
+    &:hover {
+      background-color: var(--ln-gray-20);
+    }
+  }
+
+  .ln-light,
+  .light {
+    [data-ln-button="website"] {
+      border: 1px solid var(--ln-gray-60);
+    }
+
+    [data-ln-button="primary"] {
+      border: 1px solid #005ffa;
+      &:disabled {
+        border: 1px solid transparent;
+      }
+    }
+  }
+
+  [data-ln-button][data-ln-icon="true"] {
+    padding: 0px;
+
+    &[data-ln-size="xs"] {
+      height: 24px;
+      width: 24px;
+      max-height: 24px;
+      max-width: 24px;
+      min-height: 24px;
+      min-width: 24px;
+    }
+
+    &[data-ln-size="sm"] {
+      height: 30px;
+      width: 30px;
+      max-height: 30px;
+      max-width: 30px;
+      min-height: 30px;
+      min-width: 30px;
+    }
+    &[data-ln-size="md"] {
+      height: 32px;
+      width: 32px;
+      max-height: 32px;
+      max-width: 32px;
+      min-height: 32px;
+      min-width: 32px;
+    }
+    &[data-ln-size="lg"] {
+      height: 36px;
+      width: 36px;
+      max-height: 36px;
+      max-width: 36px;
+      min-height: 36px;
+      min-width: 36px;
+    }
+    &[data-ln-size="mx"] {
+      height: 40px;
+      width: 40px;
+      max-height: 40px;
+      max-width: 40px;
+      min-height: 40px;
+      min-width: 40px;
+    }
+  }
+}

package/css/components/checkbox.css

@@ -0,0 +1,54 @@
+@layer ln-grid {
+  [data-ln-checkbox] {
+    background-color: var(--ln-gray-00);
+    border: 1px solid var(--ln-border-strong);
+    border-radius: 4px;
+    box-sizing: border-box;
+
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+    max-width: 20px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &:focus-within {
+      outline: 1px solid var(--ln-primary-50);
+    }
+
+    & input {
+      cursor: pointer;
+    }
+
+    &[data-ln-checked="true"],
+    &[data-ln-indeterminate="true"] {
+      background-color: var(--ln-primary-50);
+      border: 1px solid var(--ln-primary-50);
+      color: var(--ln-gray-00);
+    }
+
+    &[data-ln-disabled] {
+      background-color: var(--ln-gray-40);
+      border: 1px solid var(--ln-gray-40);
+      color: var(--ln-gray-80);
+      cursor: not-allowed;
+    }
+
+    &:not([data-ln-disabled="true"])[data-ln-checked="true"]:hover {
+      box-shadow:
+        0 2px 3px 0 var(--ln-primary-50),
+        0 0 0 2px var(--ln-primary-30);
+    }
+
+    &:not([data-ln-disabled="true"]):hover {
+      box-shadow:
+        0 2px 3px 0 var(--ln-gray-50),
+        0 0 0 2px var(--ln-gray-30);
+    }
+  }
+}

package/css/components/input.css

@@ -0,0 +1,64 @@
+@layer ln-grid {
+  [data-ln-input] {
+    display: flex;
+    align-items: center;
+
+    background-color: var(--ln-bg-form-field);
+    border-radius: var(--ln-radius-field-sm);
+    border: 1px solid transparent;
+    box-shadow:
+      0 1.5px 2px 0 rgba(120, 126, 140, 0.15),
+      0 0 0 1px var(--ln-gray-30);
+    height: 28px;
+    box-sizing: border-box;
+    padding-inline: var(--ln-space-20);
+    padding-block: 0px;
+
+    font-family: var(--ln-typeface);
+    font-size: var(--ln-font-md);
+    color: var(--ln-text);
+    line-height: 8px;
+
+    transition-property: border-color;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    &:hover {
+      border: 1px solid var(--ln-primary-30);
+    }
+    &:focus-within {
+      outline: none;
+      border: 1px solid var(--ln-primary-50);
+      box-shadow: 0 0 0 2px var(--ln-primary-30);
+    }
+
+    &[data-ln-size="sm"] {
+      height: 24px;
+      font-size: var(--ln-font-sm);
+    }
+
+    &[data-ln-error] {
+      border: 1px solid var(--ln-red-50);
+      box-shadow: 0 0 0 2px var(--ln-red-30);
+    }
+
+    &[data-ln-disabled],
+    &:disabled {
+      border: 1px solid var(--ln-gray-20);
+      box-shadow: none;
+      color: var(--ln-text-xlight);
+      background-color: var(--ln-gray-05);
+      cursor: not-allowed;
+
+      &:focus-within {
+        outline: none;
+        border: 1px solid var(--ln-gray-20);
+        box-shadow: none;
+      }
+
+      &:hover {
+        border: 1px solid var(--ln-gray-20);
+      }
+    }
+  }
+}

package/css/components/tree-view.css

@@ -0,0 +1,108 @@
+@layer ln-grid {
+  .ln-grid .ln-tree-view {
+    &[data-ln-viewport="true"] {
+      background-color: var(--ln-bg-ui-panel);
+    }
+
+    & [data-ln-row="true"][data-ln-selected="true"]::before {
+      content: "";
+      display: unset;
+
+      position: unset;
+      width: unset;
+      height: unset;
+      background: unset;
+      pointer-events: unset;
+      z-index: unset;
+    }
+
+    [data-ln-row="true"] [data-ln-cell="true"] {
+      padding-inline: var(--ln-space-20);
+      background-color: var(--ln-bg-ui-panel);
+
+      &:focus {
+        background-color: var(--ln-bg-strong);
+      }
+      &:focus::before {
+        content: unset;
+        left: unset;
+        top: unset;
+        position: unset;
+        border: unset;
+        background-color: unset;
+        width: unset;
+        height: unset;
+        pointer-events: unset;
+      }
+    }
+
+    [data-ln-tree-view-cell] {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      gap: var(--ln-space-20);
+
+      padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth));
+
+      &[data-ln-tree-over="true"] {
+        position: relative;
+
+        &[data-ln-tree-before="true"]::before {
+          top: 0px;
+        }
+        &[data-ln-tree-before="false"]::before {
+          bottom: 0px;
+        }
+
+        &::before {
+          position: absolute;
+          content: "";
+          left: 0px;
+          width: 100%;
+          height: 1px;
+          background-color: var(--ln-primary-50);
+        }
+      }
+
+      &[data-ln-tree-view-cell-expandable="false"] {
+        /* space 60 for the icon and 8px for the gap. */
+        padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth) + var(--ln-space-60));
+      }
+
+      &[data-ln-tree-view-cell="leaf"] {
+        padding-inline-start: calc(var(--ln-space-40) * (var(--ln-row-depth) + 1) + var(--ln-space-20) + 1px);
+      }
+
+      &[data-ln-tree-view-cell-expanded="true"] [data-ln-tree-view-cell-expander="true"] {
+        transform: rotate(90deg);
+      }
+
+      & [data-ln-tree-view-cell-expander="true"] {
+        border-radius: var(--ln-radius-field-md);
+        background-color: transparent;
+        border: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--ln-space-60);
+        height: var(--ln-space-60);
+        min-width: var(--ln-space-60);
+        min-height: var(--ln-space-60);
+        max-width: var(--ln-space-60);
+        max-height: var(--ln-space-60);
+        margin-inline-start: calc(var(--ln-padding-horizontal-cell) * -1 + 3px);
+
+        &:hover {
+          background-color: var(--ln-bg-button-light);
+          cursor: pointer;
+        }
+      }
+    }
+
+    & [data-ln-row="true"] [data-ln-cell="true"] {
+      border-bottom: unset;
+    }
+  }
+}

package/css/components.css

@@ -0,0 +1,300 @@
+@import "./components/button.css";
+@import "./components/input.css";
+@import "./components/tree-view.css";
+@import "./components/checkbox.css";
+
+@layer ln-grid {
+  /* DIALOG TITLE AND DESCRIPTION */
+  [data-ln-dialog-title="true"] {
+    margin: 0px;
+    padding: 0px;
+
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 22px;
+  }
+  [data-ln-dialog-description="true"] {
+    margin: 0px;
+    padding: 0px;
+
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 20px;
+  }
+
+  /* DIALOG CONTAINER */
+  [data-ln-dialog="true"] {
+    margin: 0px;
+    padding: var(--ln-space-40);
+    max-width: unset;
+    max-height: unset;
+
+    color: var(--ln-text-dark);
+    border-radius: var(--ln-radius-lg);
+
+    inset-block-start: 10%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    overflow: unset;
+
+    font-family: var(--ln-typeface);
+
+    border: 1px solid var(--ln-border-popover);
+    background-color: var(--ln-bg-popover);
+    box-shadow: var(--ln-shadow-400);
+
+    transition-property: opacity, scale;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    &[data-ln-transition="opening"],
+    &[data-ln-transition="closing"] {
+      opacity: 0;
+      transform: scale(0.98) translateX(-50%);
+    }
+    &::backdrop {
+      backdrop-filter: blur(1px);
+      background-color: transparent;
+      transition-property: backdrop-filter;
+      transition-duration: var(--ln-transition-duration);
+      transition-timing-function: var(--ln-transition-fn);
+    }
+    &[data-ln-transition="opening"]::backdrop,
+    &[data-ln-transition="closing"]::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(0px);
+    }
+  }
+
+  /* DIALOG CLOSE BUTTON */
+  [data-ln-dialog-close="true"] {
+    margin: 0;
+    padding: 3px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 26px;
+    min-height: 26px;
+
+    border: transparent;
+    border-radius: var(--ln-radius);
+
+    transition-property: background-color, color;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    color: var(--ln-border-icon);
+    background-color: var(--ln-bg-light);
+
+    &:hover:not(:disabled) {
+      cursor: pointer;
+      background-color: var(--ln-bg-strong);
+    }
+    &:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+  }
+
+  /* MENU */
+  [data-ln-menu-popover="true"],
+  [data-ln-menu="true"][data-ln-submenu="true"] {
+    margin: 0px;
+    padding: var(--ln-space-05);
+    max-width: unset;
+    max-height: unset;
+
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+
+    color: var(--ln-text);
+    border-radius: var(--ln-radius-lg);
+
+    inset-block-start: 10%;
+    inset-inline-start: 50%;
+    overflow: unset;
+
+    font-family: var(--ln-typeface);
+
+    border: 1px solid var(--ln-border-popover);
+    background-color: var(--ln-bg-popover);
+    box-shadow: var(--ln-shadow-400);
+
+    transition-property: opacity, scale;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    &[data-ln-transition="opening"],
+    &[data-ln-transition="closing"] {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+    &::backdrop {
+      background-color: transparent;
+      transition-property: backdrop-filter;
+      transition-duration: var(--ln-transition-duration);
+      transition-timing-function: var(--ln-transition-fn);
+    }
+
+    [data-ln-dialog-arrow="true"] {
+      position: absolute;
+
+      [data-ln-dialog-arrow-area="true"] {
+        fill: var(--ln-bg-popover);
+      }
+      [data-ln-dialog-arrow-border] {
+        stroke: var(--ln-border-popover);
+      }
+
+      &[data-ln-placement="bottom"] {
+        top: 0px;
+        transform: translateY(-100%);
+      }
+      &[data-ln-placement="top"] {
+        bottom: 0px;
+        transform: translateY(100%) rotate(180deg);
+      }
+      &[data-ln-placement="left"] {
+        right: 0px;
+        transform: translateX(calc(100% - 4px)) rotate(90deg);
+      }
+      &[data-ln-placement="right"] {
+        left: 0px;
+        transform: translateX(calc(-100% + 4px)) rotate(-90deg);
+      }
+    }
+  }
+
+  [data-ln-menu-separator="true"] {
+    height: 1px;
+    background-color: var(--ln-border-xstrong);
+    margin-block: var(--ln-space-02);
+    margin-inline: calc(var(--ln-space-05) * -1);
+  }
+
+  [data-ln-menu-item="true"] {
+    padding-inline-start: var(--ln-space-25);
+    padding-inline-end: var(--ln-space-20);
+    padding-block: var(--ln-space-20);
+    border-radius: var(--ln-radius-md);
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    &[data-ln-disabled="true"] {
+      color: var(--ln-text-xlight);
+    }
+
+    &[data-ln-checked="true"] {
+      background-color: var(--ln-primary-10);
+    }
+
+    font-size: 0.875rem;
+    line-height: 20px;
+    font-weight: 400;
+
+    &:focus {
+      outline: none;
+    }
+
+    &[data-ln-open="true"] {
+      background-color: var(--ln-bg-light);
+    }
+
+    &[data-ln-active="true"] {
+      background-color: var(--ln-bg-light);
+    }
+  }
+
+  /* POPOVER  */
+  [data-ln-popover="true"] {
+    margin: 0px;
+    padding: var(--ln-space-40);
+    max-width: unset;
+    max-height: unset;
+
+    color: var(--ln-text-dark);
+    border-radius: var(--ln-radius-lg);
+
+    inset-block-start: 10%;
+    inset-inline-start: 50%;
+    overflow: unset;
+
+    font-family: var(--ln-typeface);
+
+    border: 1px solid var(--ln-border);
+    background-color: var(--ln-bg);
+    box-shadow: var(--ln-shadow-400);
+
+    transition-property: opacity, scale;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    &[data-ln-transition="opening"],
+    &[data-ln-transition="closing"] {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+    &::backdrop {
+      background-color: transparent;
+      transition-property: backdrop-filter;
+      transition-duration: var(--ln-transition-duration);
+      transition-timing-function: var(--ln-transition-fn);
+    }
+
+    [data-ln-dialog-arrow="true"] {
+      position: absolute;
+
+      [data-ln-dialog-arrow-area="true"] {
+        fill: var(--ln-bg);
+      }
+      [data-ln-dialog-arrow-border] {
+        stroke: var(--ln-border);
+      }
+
+      &[data-ln-placement="bottom"] {
+        top: 0px;
+        transform: translateY(-100%);
+      }
+      &[data-ln-placement="top"] {
+        bottom: 0px;
+        transform: translateY(100%) rotate(180deg);
+      }
+      &[data-ln-placement="left"] {
+        right: 0px;
+        transform: translateX(calc(100% - 4px)) rotate(90deg);
+      }
+      &[data-ln-placement="right"] {
+        left: 0px;
+        transform: translateX(calc(-100% + 4px)) rotate(-90deg);
+      }
+    }
+  }
+
+  [data-ln-popover="true"][data-ln-smart-select-container="true"] {
+    padding: var(--ln-space-10) var(--ln-space-05);
+
+    min-width: var(--ln-anchor-width);
+    box-sizing: border-box;
+
+    background-color: var(--ln-bg-strong);
+    color: var(--ln-text);
+    font-size: var(--ln-font-md);
+
+    & [data-ln-smart-option] {
+      cursor: pointer;
+      padding-block: var(--ln-space-05);
+      padding-inline: var(--ln-space-20);
+
+      border-radius: var(--ln-radius-md);
+      height: 32px;
+
+      &[data-ln-active="true"] {
+        background-color: var(--ln-gray-05);
+      }
+    }
+  }
+}

package/css/cotton-candy.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/cotton-candy.css";

package/css/dark.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/dark.css";