frutjam 1.2.0-beta.0 → 1.2.0

package/src/components/modal.css

@@ -1,130 +0,0 @@
-@import "../theme/jams/base.css";
-@import "../theme/placement.css";
-@import "../theme/animation/slide.css";
-
-@utility modal{  
-  display: grid;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  align-items: center;
-  z-index: 999;
-  overscroll-behavior: contain;
-  overflow: hidden;
-  justify-items: center;
-  color: inherit;
-  padding: 0.75rem;
-  background-color: transparent;
-  inset: 0rem;
-  margin: 0rem;
-  pointer-events: none;
-  visibility: hidden;
-  position: fixed;
-
-
-  &:not(modal:not([open]):not(.modal-open)),
-  &::backdrop {
-    @starting-style {
-      visibility: hidden;
-      opacity: 0%;
-    }
-
-    opacity: 100%;
-    background-color: color-mix(in oklab,var(--core-800)50%,transparent);
-  }
-  &[open], &.modal-open {
-
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 100%;
-
-    @starting-style {
-      visibility: hidden;
-      opacity: 0%;
-    }
-
-    .modal-body {
-      translate: 0 0;
-      scale: 1;
-      opacity: 1;
-    }
-  }
-}
-
-@utility modal-backdrop {
-  display: grid;
-  grid-column-start: 1;
-  grid-row-start: 1;
-  align-self: stretch;
-  justify-self: stretch;
-  color: transparent;
-  background-color: transparent;
-  z-index: -1;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-@utility modal-body {
-  /* @apply shadow-sm; */
-
-  box-shadow: light-dark(
-    var(--core-100),
-    var(--core-900)
-  ) 0px 1px 1px;
-
-  @media (forced-colors: active) {
-    outline-style: solid;
-    outline-width: 1px;
-  }
-  grid-column-start: 1;
-  grid-row-start: 1;
-  max-height: 100vh;
-  width: calc(11/12 * 100%);
-  max-width: 32rem;
-  padding: 1.5rem;
-  transform: scale(95%, 95%);
-  opacity: 0%;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border-radius: var(--radius-modal);
-
-  /* --tw-shadow-color: light-dark(
-    color-mix(in oklab,var(--core-300)50%,transparent),
-    color-mix(in oklab,var(--core-900)60%,transparent)
-  ); */
-  background: light-dark(
-    var(--core-50),
-    var(--core-950)
-  );
-  color: light-dark(
-    var(--core-800),
-    var(--core-50)
-  );
-  border: 1px solid light-dark(
-    var(--core-300),
-    var(--core-900)
-  );
-  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
-}
-
-
-
-/* placements */
-@utility modal-x-* {
-  justify-items:--value(--x-*);
-}
-
-@utility modal-y-* {
-  align-items:--value(--y-*);
-}
-
-/* animation */
-@utility modal-slide-* {
-  :where(.modal-body) {
-    translate:--value(--slide-*);
-    scale: 1;
-  }
-}

package/src/components/nav.css

@@ -1,36 +0,0 @@
-/* use for breadcrums and menu */
-@import "../theme/placement.css";
-
-@utility nav-x-* {
-  justify-self: --value(--x-*);
-  & > :where(.nav-list) {
-    display: flex;
-    justify-content: --value(--x-*);
-    align-items: center;
-    flex-direction: row;
-    column-gap: 0.5rem;
-  }
-}
-
-@utility nav {
-  @apply nav-x-start;
-}
-
-@utility nav-y-* {
-  display:flex;
-  row-gap: 0.75rem;
-  flex-direction: column;
-  justify-self: --value(--y-*);
-  width: 100%;
-
-  & > :where(.nav-list) {
-      display: flex;
-      row-gap: 0.25rem;
-      align-items: start;
-      flex-direction: column;
-      width: 100%;
-      & > :where(li) {
-        width: 100%;
-      }
-  }
-}

package/src/components/popover.css

@@ -1,140 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility popover {
-  pointer-events: none;
-  visibility: hidden;
-  position: fixed;
-  inset: 0rem;
-  margin: 0rem;
-  padding: 0rem;
-  display: grid;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  align-items: center;
-  justify-items: center;
-  background-color: transparent;
-  color: inherit;
-  z-index: 999;
-  overflow: hidden;
-  overscroll-behavior: contain;
-
-  &:not(popover:not([popover]:popover-open)), &::backdrop {
-    opacity: 100%;
-    @starting-style {
-      visibility: hidden;
-      opacity: 0%;
-    }
-    background-color: var(--default-600);
-  }
-
-  &[popover]:popover-open {
-    pointer-events: auto;
-    visibility: visible;
-    opacity: 100%;
-
-    @starting-style {
-      visibility: hidden;
-      opacity: 0%;
-    }
-
-    .popover-body {
-      translate: 0 0;
-      scale: 1;
-      opacity: 1;
-    }
-  }
-}
-
-@utility popover-backdrop {
-  display: grid;
-  grid-column-start: 1;
-  grid-row-start: 1;
-  align-self: stretch;
-  justify-self: stretch;
-  color: transparent;
-  z-index: -1;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-@utility popover-body {
-
-  background-color: var(--core-50);
-  color: var(--core-950);
-  border-radius: 1.5rem;
-  border: 1px solid light-dark(
-    color-mix(in oklab,var(--core-300)50%,transparent),
-    color-mix(in oklab,var(--core-900)60%,transparent)
-  );
-
-  @layer components {
-    @apply shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
-  }
-}
-
-@utility popover-top {
-  @layer components {
-    @apply place-items-start;
-
-    :where(.popover-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 -100%;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-middle {
-  @layer components {
-    @apply place-items-center;
-
-    :where(.popover-body) {
-      @apply h-auto w-11/12 max-w-[32rem];
-      max-height: calc(100vh - 5em);
-      translate: 0 2%;
-      scale: 98%;
-    }
-  }
-}
-
-@utility popover-bottom {
-  @layer components {
-    @apply place-items-end;
-
-    :where(.popover-body) {
-      @apply h-auto w-full max-w-none rounded-none;
-      max-height: calc(100vh - 5em);
-      translate: 0 100%;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-start {
-  @layer components {
-    @apply place-items-start;
-
-    :where(.popover-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: -100% 0;
-      scale: 1;
-    }
-  }
-}
-
-@utility popover-end {
-  @layer components {
-    @apply place-items-end;
-
-    :where(.popover-body) {
-      @apply h-screen max-h-none w-auto max-w-none rounded-none;
-      translate: 100% 0;
-      scale: 1;
-    }
-  }
-}

package/src/components/sidebar.css

@@ -1,21 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility sidebar {
-    position: sticky;
-    overflow-y: auto;
-    gap: 1.25rem;
-    max-height: 100dvh;
-    padding: 1.5rem;
-    border-inline-style: solid;
-    border-inline-width: 1px;
-    border-color: light-dark(
-        var(--core-200),
-        var(--core-900)
-    );
-    background-color: light-dark(
-        var(--core-0),
-        var(--core-1000)
-    );
-    display: flex;
-    flex-direction: column;
-}

package/src/components/typography.css

@@ -1,7 +0,0 @@
-@import '../theme/typography.css';
-@utility style {
-    h1 {
-        font-size: 2.25rem;
-        font-weight: 700;
-    }
-}

package/src/main.css

@@ -1,21 +0,0 @@
-@import "./components/header.css";
-@import "./components/sidebar.css";
-@import "./components/container.css";
-@import "./components/button.css";
-@import "./components/input.css";
-@import "./components/modal.css";
-@import "./components/drawer.css";
-@import "./components/checkbox.css";
-@import "./components/accordion.css";
-/* @import "./components/popover.css"; */
-/* @import "./components/dropdown.css"; */
-@import "./components/divider.css";
-@import "./components/nav.css";
-@import "./components/card.css";
-@import "./components/breadcrumb.css";
-@import "./components/badge.css";
-
-/* utilities */
-@import "./utilities/headings.css";
-@import "./utilities/para.css";
-@import "./utilities/surface.css";

package/src/main.js

@@ -1 +0,0 @@
-import "./main.css"

package/src/theme/animation/slide.css

@@ -1,6 +0,0 @@
-@theme {
-    --slide-up: 0 100%;
-    --slide-down: 0 -100%;
-    --slide-left: 100% 0;
-    --slide-right: -100% 0;
-}

package/src/theme/animation/wiggle.css

@@ -1,14 +0,0 @@
-@theme {
-    --animate-wiggle: wiggle 1s linear infinite;
-    @keyframes wiggle {
-      0% {
-        transform: rotate(345deg) translateY(-100%);
-      }
-      50% {
-        transform: rotate(325deg) translateY(100%);
-      }
-      100% {
-        transform: rotate(345deg) translateY(200%);
-      }
-    }
-}

package/src/theme/jams/base.css

@@ -1,123 +0,0 @@
-@import "../../base/preflight.css" layer(theme);
-@import "./snowberry.css";
-@import "./darkberry.css";
-
-@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *, [data-theme="snowberry"], [data-theme="snowberry"] *),  @media (prefers-color-scheme: light));
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *, [data-theme="darkberry"], [data-theme="darkberry"] *),  @media (prefers-color-scheme: dark));
-
-:root {
-    color-scheme: var(--color-scheme);
-}
-
-@theme inline {
-    --color-core-0: var(--core-0);
-    --color-core-50: var(--core-50);
-    --color-core-100: var(--core-100);
-    --color-core-200: var(--core-200);
-    --color-core-300: var(--core-300);
-    --color-core-400: var(--core-400);
-    --color-core-500: var(--core-500);
-    --color-core-600: var(--core-600);
-    --color-core-700: var(--core-700);
-    --color-core-800: var(--core-800);
-    --color-core-900: var(--core-900);
-    --color-core-950: var(--core-950);
-    --color-core-1000: var(--core-1000);
-
-    --color-default-50: var(--default-50);
-    --color-default-100: var(--default-100);
-    --color-default-200: var(--default-200);
-    --color-default-300: var(--default-300);
-    --color-default-400: var(--default-400);
-    --color-default-500: var(--default-500);
-    --color-default-600: var(--default-600);
-    --color-default-700: var(--default-700);
-    --color-default-800: var(--default-800);
-    --color-default-900: var(--default-900);
-    --color-default-950: var(--default-950);
-
-
-    --color-primary-50: var(--primary-50);
-    --color-primary-100: var(--primary-100);
-    --color-primary-200: var(--primary-200);
-    --color-primary-300: var(--primary-300);
-    --color-primary-400: var(--primary-400);
-    --color-primary-500: var(--primary-500);
-    --color-primary-600: var(--primary-600);
-    --color-primary-700: var(--primary-700);
-    --color-primary-800: var(--primary-800);
-    --color-primary-900: var(--primary-900);
-    --color-primary-950: var(--primary-950);
-
-    --color-secondary-50: var(--secondary-50);
-    --color-secondary-100: var(--secondary-100);
-    --color-secondary-200: var(--secondary-200);
-    --color-secondary-300: var(--secondary-300);
-    --color-secondary-400: var(--secondary-400);
-    --color-secondary-500: var(--secondary-500);
-    --color-secondary-600: var(--secondary-600);
-    --color-secondary-700: var(--secondary-700);
-    --color-secondary-800: var(--secondary-800);
-    --color-secondary-900: var(--secondary-900);
-    --color-secondary-950: var(--secondary-950);
-
-    --color-accent-50: var(--accent-50);
-    --color-accent-100: var(--accent-100);
-    --color-accent-200: var(--accent-200);
-    --color-accent-300: var(--accent-300);
-    --color-accent-400: var(--accent-400);
-    --color-accent-500: var(--accent-500);
-    --color-accent-600: var(--accent-600);
-    --color-accent-700: var(--accent-700);
-    --color-accent-800: var(--accent-800);
-    --color-accent-900: var(--accent-900);
-    --color-accent-950: var(--accent-950);
-
-    --color-info-50: var(--info-50);
-    --color-info-100: var(--info-100);
-    --color-info-200: var(--info-200);
-    --color-info-300: var(--info-300);
-    --color-info-400: var(--info-400);
-    --color-info-500: var(--info-500);
-    --color-info-600: var(--info-600);
-    --color-info-700: var(--info-700);
-    --color-info-800: var(--info-800);
-    --color-info-900: var(--info-900);
-    --color-info-950: var(--info-950);
-
-    --color-success-50: var(--success-50);
-    --color-success-100: var(--success-100);
-    --color-success-200: var(--success-200);
-    --color-success-300: var(--success-300);
-    --color-success-400: var(--success-400);
-    --color-success-500: var(--success-500);
-    --color-success-600: var(--success-600);
-    --color-success-700: var(--success-700);
-    --color-success-800: var(--success-800);
-    --color-success-900: var(--success-900);
-    --color-success-950: var(--success-950);
-
-    --color-warning-50: var(--warning-50);
-    --color-warning-100: var(--warning-100);
-    --color-warning-200: var(--warning-200);
-    --color-warning-300: var(--warning-300);
-    --color-warning-400: var(--warning-400);
-    --color-warning-500: var(--warning-500);
-    --color-warning-600: var(--warning-600);
-    --color-warning-700: var(--warning-700);
-    --color-warning-800: var(--warning-800);
-    --color-warning-900: var(--warning-900);
-    --color-warning-950: var(--warning-950);
-
-    --color-error-50: var(--error-50);
-    --color-error-100: var(--error-100);
-    --color-error-200: var(--error-200);
-    --color-error-300: var(--error-300);
-    --color-error-400: var(--error-400);
-    --color-error-500: var(--error-500);
-    --color-error-600: var(--error-600);
-    --color-error-700: var(--error-700);
-    --color-error-800: var(--error-800);
-    --color-error-900: var(--error-900);
-    --color-error-950: var(--error-950);
-}

package/src/theme/jams/darkberry.css

@@ -1,134 +0,0 @@
-@utility darkberry{
-    --color-scheme: dark;
-
-    --radius-btn: 0.5rem;
-    --radius-input: 0.5rem;
-    --radius-checkbox: 0.375rem;
-    --radius-modal: 1rem;
-    --radius-accordion: 0.5rem;
-    --radius-dropdown: 0.5rem;
-    --radius-card: 1rem;
-    --radius-badge: 0.5rem;
-
-    --core-0: oklch(1 0 0);
-    --core-50: oklch(.985 .001 106.423);
-    --core-100: oklch(.97 .001 106.424);
-    --core-200: oklch(.923 .003 48.717);
-    --core-300: oklch(.869 .005 56.366);
-    --core-400: oklch(.709 .01 56.259);
-    --core-500: oklch(.553 .013 58.071);
-    --core-600: oklch(.444 .011 73.639);
-    --core-700: oklch(.374 .01 67.558);
-    --core-800: oklch(.268 .007 34.298);
-    --core-900: oklch(.216 .006 56.043);
-    --core-950: oklch(.147 .004 49.25);
-    --core-1000: oklch(0.15 0 0);
-
-    --default-50: oklch(0.985 0 0);
-    --default-100: oklch(0.967 0.001 286.375);
-    --default-200: oklch(0.92 0.004 286.32);
-    --default-300: oklch(0.871 0.006 286.286);
-    --default-400: oklch(0.705 0.015 286.067);
-    --default-500: oklch(0.552 0.016 285.938);
-    --default-600: oklch(0.442 0.017 285.786);
-    --default-700: oklch(0.37 0.013 285.805);
-    --default-800: oklch(0.274 0.006 286.033);
-    --default-900: oklch(0.21 0.006 285.885);
-    --default-950: oklch(0.141 0.005 285.823);
-    
-    --primary-50: oklch(0.97 0.014 254.604);
-    --primary-100: oklch(0.932 0.032 255.585);
-    --primary-200: oklch(0.882 0.059 254.128);
-    --primary-300: oklch(0.809 0.105 251.813);
-    --primary-400: oklch(0.707 0.165 254.624);
-    --primary-500: oklch(0.623 0.214 259.815);
-    --primary-600: oklch(0.546 0.245 262.881);
-    --primary-700: oklch(0.488 0.243 264.376);
-    --primary-800: oklch(0.424 0.199 265.638);
-    --primary-900: oklch(0.379 0.146 265.522);
-    --primary-950: oklch(0.282 0.091 267.935);
-
-    --secondary-50: oklch(0.969 0.015 12.422);
-    --secondary-100: oklch(0.941 0.03 12.58);
-    --secondary-200: oklch(0.892 0.058 10.001);
-    --secondary-300: oklch(0.81 0.117 11.638);
-    --secondary-400: oklch(0.712 0.194 13.428);
-    --secondary-500: oklch(0.645 0.246 16.439);
-    --secondary-600: oklch(0.586 0.253 17.585);
-    --secondary-700: oklch(0.514 0.222 16.935);
-    --secondary-800: oklch(0.455 0.188 13.697);
-    --secondary-900: oklch(0.41 0.159 10.272);
-    --secondary-950: oklch(0.271 0.105 12.094);
-
-    --accent-50: oklch(0.969 0.016 293.756);
-    --accent-100: oklch(0.943 0.029 294.588);
-    --accent-200: oklch(0.894 0.057 293.283);
-    --accent-300: oklch(0.811 0.111 293.571);
-    --accent-400: oklch(0.702 0.183 293.541);
-    --accent-500: oklch(0.606 0.25 292.717);
-    --accent-600: oklch(0.541 0.281 293.009);
-    --accent-700: oklch(0.491 0.27 292.581);
-    --accent-800: oklch(0.432 0.232 292.759);
-    --accent-900: oklch(0.38 0.189 293.745);
-    --accent-950: oklch(0.283 0.141 291.089);
-  
-    
-    --info-50: oklch(0.979 0.021 166.113);
-    --info-100: oklch(0.95 0.052 163.051);
-    --info-200: oklch(0.905 0.093 164.15);
-    --info-300: oklch(0.845 0.143 164.978);
-    --info-400: oklch(0.765 0.177 163.223);
-    --info-500: oklch(0.696 0.17 162.48);
-    --info-600: oklch(0.596 0.145 163.225);
-    --info-700: oklch(0.508 0.118 165.612);
-    --info-800: oklch(0.432 0.095 166.913);
-    --info-900: oklch(0.378 0.077 168.94);
-    --info-950: oklch(0.262 0.051 172.552);
-  
-    --success-50: oklch(0.982 0.018 155.826);
-    --success-100: oklch(0.962 0.044 156.743);
-    --success-200: oklch(0.925 0.084 155.995);
-    --success-300: oklch(0.871 0.15 154.449);
-    --success-400: oklch(0.792 0.209 151.711);
-    --success-500: oklch(0.723 0.219 149.579);
-    --success-600: oklch(0.627 0.194 149.214);
-    --success-700: oklch(0.527 0.154 150.069);
-    --success-800: oklch(0.448 0.119 151.328);
-    --success-900: oklch(0.393 0.095 152.535);
-    --success-950: oklch(0.266 0.065 152.934);
-    
-    --warning-50: oklch(0.987 0.026 102.212);
-    --warning-100: oklch(0.973 0.071 103.193);
-    --warning-200: oklch(0.945 0.129 101.54);
-    --warning-300: oklch(0.905 0.182 98.111);
-    --warning-400: oklch(0.852 0.199 91.936);
-    --warning-500: oklch(0.795 0.184 86.047);
-    --warning-600: oklch(0.681 0.162 75.834);
-    --warning-700: oklch(0.554 0.135 66.442);
-    --warning-800: oklch(0.476 0.114 61.907);
-    --warning-900: oklch(0.421 0.095 57.708);
-    --warning-950: oklch(0.286 0.066 53.813);
-    
-    --error-50: oklch(0.971 0.013 17.38);
-    --error-100: oklch(0.936 0.032 17.717);
-    --error-200: oklch(0.885 0.062 18.334);
-    --error-300: oklch(0.808 0.114 19.571);
-    --error-400: oklch(0.704 0.191 22.216);
-    --error-500: oklch(0.637 0.237 25.331);
-    --error-600: oklch(0.577 0.245 27.325);
-    --error-700: oklch(0.505 0.213 27.518);
-    --error-800: oklch(0.444 0.177 26.899);
-    --error-900: oklch(0.396 0.141 25.723);
-    --error-950: oklch(0.258 0.092 26.042);
-}
-
-
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
-      @apply darkberry;
-    }
-}
-  
-[data-theme="darkberry"], [data-theme="dark"] {
-    @apply darkberry
-}