frutjam 1.4.0-beta.0 → 1.4.0

package/src/components/link.css

@@ -1,159 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility link {
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 4px;
-    color: var(--link-700);
-    font-size: var(--link-text-size, 1rem);
-
-    &:focus {
-        outline-style: none;
-        @media (forced-colors: active) {
-            outline: 2px solid transparent;
-            outline-offset: 2px;
-        }
-    }
-
-    &:focus-visible {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
-    }
-
-    @media (hover: hover) {
-        &:hover {
-            color: light-dark(var(--link-800), var(--link-500));
-        }
-    }
-}
-
-@utility link-hover {
-    text-decoration-line: none;
-    &:hover {
-        @media (hover: hover) {
-            text-decoration-line: underline;
-        }
-    }
-}
-
-@utility link-primary {
-  --link-50: var(--primary-50);
-  --link-100: var(--primary-100);
-  --link-200: var(--primary-200);
-  --link-300: var(--primary-300);
-  --link-400: var(--primary-400);
-  --link-500: var(--primary-500);
-  --link-600: var(--primary-600);
-  --link-700: var(--primary-700);
-  --link-800: var(--primary-800);
-  --link-900: var(--primary-900);
-  --link-950: var(--primary-950);
-}
-
-@utility link-secondary {
-  --link-50: var(--secondary-50);
-  --link-100: var(--secondary-100);
-  --link-200: var(--secondary-200);
-  --link-300: var(--secondary-300);
-  --link-400: var(--secondary-400);
-  --link-500: var(--secondary-500);
-  --link-600: var(--secondary-600);
-  --link-700: var(--secondary-700);
-  --link-800: var(--secondary-800);
-  --link-900: var(--secondary-900);
-  --link-950: var(--secondary-950);
-}
-
-@utility link-accent {
-  --link-50: var(--accent-50);
-  --link-100: var(--accent-100);
-  --link-200: var(--accent-200);
-  --link-300: var(--accent-300);
-  --link-400: var(--accent-400);
-  --link-500: var(--accent-500);
-  --link-600: var(--accent-600);
-  --link-700: var(--accent-700);
-  --link-800: var(--accent-800);
-  --link-900: var(--accent-900);
-  --link-950: var(--accent-950);
-}
-
-@utility link-info {
-  --link-50: var(--info-50);
-  --link-100: var(--info-100);
-  --link-200: var(--info-200);
-  --link-300: var(--info-300);
-  --link-400: var(--info-400);
-  --link-500: var(--info-500);
-  --link-600: var(--info-600);
-  --link-700: var(--info-700);
-  --link-800: var(--info-800);
-  --link-900: var(--info-900);
-  --link-950: var(--info-950);
-}
-
-@utility link-success {
-  --link-50: var(--success-50);
-  --link-100: var(--success-100);
-  --link-200: var(--success-200);
-  --link-300: var(--success-300);
-  --link-400: var(--success-400);
-  --link-500: var(--success-500);
-  --link-600: var(--success-600);
-  --link-700: var(--success-700);
-  --link-800: var(--success-800);
-  --link-900: var(--success-900);
-  --link-950: var(--success-950);
-}
-
-@utility link-warning {
-  --link-50: var(--warning-50);
-  --link-100: var(--warning-100);
-  --link-200: var(--warning-200);
-  --link-300: var(--warning-300);
-  --link-400: var(--warning-400);
-  --link-500: var(--warning-500);
-  --link-600: var(--warning-600);
-  --link-700: var(--warning-700);
-  --link-800: var(--warning-800);
-  --link-900: var(--warning-900);
-  --link-950: var(--warning-950);
-}
-
-@utility link-error {
-  --link-50: var(--error-50);
-  --link-100: var(--error-100);
-  --link-200: var(--error-200);
-  --link-300: var(--error-300);
-  --link-400: var(--error-400);
-  --link-500: var(--error-500);
-  --link-600: var(--error-600);
-  --link-700: var(--error-700);
-  --link-800: var(--error-800);
-  --link-900: var(--error-900);
-  --link-950: var(--error-950);
-}
-
-@utility link-xs {
-  --link-text-size: 0.75rem;
-}
-
-@utility link-sm {
-  --link-text-size: 0.875rem;
-}
-
-@utility link-md {
-  --link-text-size: 1rem;
-}
-
-@utility link-lg {
-  --link-text-size: 1.125rem;
-}
-
-@utility link-xl {
-  --link-text-size: 1.25rem;
-}
-
-@utility link-2xl {
-  --link-text-size: 1.375rem;
-}

package/src/components/modal.css

@@ -1,129 +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: light-dark(
-    var(--core-0),
-    var(--core-1000)
-  );
-  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);
-
-  background-color: light-dark(
-        var(--core-0),
-        var(--core-1000)
-  );
-  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 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,22 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-    overflow-y: auto;
-    overflow-x:hidden;
-    position: sticky;
-    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)
-    );
-}

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,22 +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/link.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);
-}