frutjam 1.4.0-beta.0 → 2.0.0-beta.0

package/src/components/card.css

@@ -1,122 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility card-outline {
-    border: 1px solid light-dark(
-      var(--core-200),
-      var(--core-900)
-    );
-}
-
-@utility card-dashed {
-    border: 1px dashed light-dark(
-      var(--core-200),
-      var(--core-900)
-    );
-}
-
-/* card size */
-
-@utility card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--radius-card);
-    overflow:hidden;
-    background-color: light-dark(
-        var(--core-0),
-        var(--core-1000)
-    );
-
-    :where(figure:first-child) {
-        overflow: hidden;
-        border-start-start-radius: inherit;
-        border-start-end-radius: inherit;
-        border-end-start-radius: unset;
-        border-end-end-radius: unset;
-    }
-    
-    :where(figure:last-child) {
-        overflow: hidden;
-        border-start-start-radius: unset;
-        border-start-end-radius: unset;
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-    }
-}
-
-@utility card-body {
-    display: flex;
-    gap: 0.5rem;
-    flex: auto;
-    flex-direction: column;
-    padding: var(--card-body-padding, 1.5rem);
-
-    :where(p){
-        flex-grow: 1;
-        font-size: var(--card-body-font-size, 1rem);
-    }
-}
-
-@utility card-title {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-weight: 600;
-    font-size: var(--card-title-font-size, 1.125rem);
-}
-
-
-@utility card-xs {
-  &:is(.card-body) {
-    --card-body-padding: 0.5rem;
-    --card-body-font-size: 0.6875rem;
-  }
-
-  &:is(.card-title) {
-    --card-title-font-size: 0.875rem;
-  }
-}
-
-@utility card-sm {
-  &:is(.card-body) {
-    --card-body-padding: 1rem;
-    --card-body-font-size: 0.75rem;
-  }
-
-  &:is(.card-title) {
-    --card-title-font-size: 1rem;
-  }
-}
-
-@utility card-md {
-  &:is(.card-body) {
-    --card-body-padding: 1.5rem;
-    --card-body-font-size: 0.875rem;
-  }
-
-  &:is(.card-title) {
-    --card-title-font-size: 1.125rem;
-  }
-}
-
-@utility card-lg {
-  &:is(.card-body) {
-    --card-body-padding: 2rem;
-    --card-body-font-size: 1rem;
-  }
-
-  &:is(.card-title) {
-    --card-title-font-size: 1.25rem;
-  }
-}
-
-@utility card-xl {
-  &:is(.card-body) {
-    --card-body-padding: 2.5rem;
-    --card-body-font-size: 1.125rem;
-  }
-
-  &:is(.card-title) {
-    --card-title-font-size: 1.375rem;
-  }
-}

package/src/components/checkbox.css

@@ -1,291 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility checkbox-xs {
-  padding: 0.1875rem;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-@utility checkbox-sm {
-  padding: 0.25rem;
-  width: 1rem;
-  height: 1rem;
-}
-
-@utility checkbox-md {
-  padding: 0.3125rem;
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-@utility checkbox-lg {
-  padding: 0.375rem;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-@utility checkbox-xl {
-  padding: 0.4375rem;
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-@utility checkbox-2xl {
-  padding: 0.5rem;
-  width: 2rem;
-  height: 2rem;
-}
-
-/*checkbox-circle deprecated: Remove this in stable release*/
-@utility checkbox-circle {
-  border-radius: calc(infinity * 1px);
-  aspect-ratio: 1 / 1;
-}
-
-@utility checkbox-rounded {
-  border-radius: calc(infinity * 1px);
-  aspect-ratio: 1 / 1;
-}
-
-@utility checkbox-square {
-  border-radius: var(--radius-checkbox);
-  aspect-ratio: 1 / 1;
-}
-
-@utility checkbox {
-    @apply checkbox-md;
-    /* box-shadow: light-dark(
-      var(--core-100),
-      var(--core-900)
-    ) 0px 1px 1px; */
-    position: relative;
-    transition-duration: 350ms;
-    flex-shrink: 0;
-    cursor: pointer;
-    appearance: none;
-    vertical-align: middle;
-
-    box-shadow: 0 0 0 0px var(--checkbox-100), 0 0 0 calc(1px + 0px) light-dark(var(--checkbox-300), var(--checkbox-800)), 0 0 var(--checkbox-100);
-    /* border: 1.6px solid var(--checkbox-100); */
-    /* outline: 1px solid light-dark(
-      var(--checkbox-400),
-      var(--checkbox-700)
-    ); */
-      
-    background-color: light-dark(
-      var(--checkbox-100),
-      color-mix(in oklab, var(--checkbox-600) 15%, transparent)
-    );
-
-
-    /* &:not(
-      .checkbox-primary,
-      .checkbox-secondary,
-      .checkbox-accent,
-      .checkbox-info,
-      .checkbox-success,
-      .checkbox-warning,
-      .checkbox-error
-    ){
-      outline: 1px solid light-dark(
-        var(--checkbox-400),
-        var(--checkbox-700)
-      );
-      border: 0.5px solid light-dark(
-        var(--checkbox-50),
-        var(--checkbox-900)
-      );
-    }
-
-    &:is(
-      .checkbox-primary,
-      .checkbox-secondary,
-      .checkbox-accent,
-      .checkbox-info,
-      .checkbox-success,
-      .checkbox-warning,
-      .checkbox-error
-    ){
-      outline: 1px solid var(--checkbox-700);
-      border: 0.5px solid light-dark(
-        var(--checkbox-50),
-        var(--checkbox-900)
-      );
-    } */
-
-
-    /* background-color: transparent; */
-    /* color: light-dark(var(--checkbox-700), var(--checkbox-200)); */
-    color: light-dark(var(--checkbox-700), var(--checkbox-200));
-    border-radius: var(--radius-checkbox);
-
-    &::before {
-      content: none;
-      opacity: 0%;
-      background-color: currentcolor;
-      transform: rotate(45deg);
-      transition: transform 300ms, background-color 100ms;
-      display: block;
-      width: 100%;
-      height: 100%;
-      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
-      font-size: 1rem;
-      line-height: 0.75;
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--checkbox-700, currentColor);
-      outline-offset: 2px;
-    }
-
-    &:checked,
-    &[aria-checked="true"] {
-      box-shadow: 0 0 0 0px var(--checkbox-100),   0 0 0 calc(1px + 0px) light-dark(var(--checkbox-500), var(--checkbox-700)), 0 0 var(--checkbox-100);
-      background-color: light-dark(var(--checkbox-300), var(--checkbox-600));
-      transition: transform 300ms, background-color 100ms;
-
-      &::before {
-        content: '✔︎';
-        opacity: 100%;
-      }
-
-      @media (forced-colors: active) {
-        &:before {
-          content: '✔︎';
-          transform: rotate(0deg);
-          background-color: light-dark(var(--checkbox-200), var(--checkbox-600));
-          clip-path:none;
-        }
-      }
-    }
-
-    &:indeterminate {
-      &:before {
-        opacity: 100%;
-        transform: rotate(0deg) translate(0, -35%);
-        clip-path: polygon(
-          20% 100%,
-          20% 80%,
-          50% 80%,
-          50% 80%,
-          80% 80%,
-          80% 100%
-        );
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 20%;
-    }
-
-    --checkbox-50: var(--default-50);
-    --checkbox-100: var(--default-100);
-    --checkbox-200: var(--default-200);
-    --checkbox-300: var(--default-300);
-    --checkbox-400: var(--default-400);
-    --checkbox-500: var(--default-500);
-    --checkbox-600: var(--default-600);
-    --checkbox-700: var(--default-700);
-    --checkbox-800: var(--default-800);
-    --checkbox-900: var(--default-900);
-    --checkbox-950: var(--default-950);
-}
-
-@utility checkbox-primary {
-  --checkbox-50: var(--primary-50);
-  --checkbox-100: var(--primary-100);
-  --checkbox-200: var(--primary-200);
-  --checkbox-300: var(--primary-300);
-  --checkbox-400: var(--primary-400);
-  --checkbox-500: var(--primary-500);
-  --checkbox-600: var(--primary-600);
-  --checkbox-700: var(--primary-700);
-  --checkbox-800: var(--primary-800);
-  --checkbox-900: var(--primary-900);
-  --checkbox-950: var(--primary-950);
-}
-
-@utility checkbox-secondary {
-  --checkbox-50: var(--secondary-50);
-  --checkbox-100: var(--secondary-100);
-  --checkbox-200: var(--secondary-200);
-  --checkbox-300: var(--secondary-300);
-  --checkbox-400: var(--secondary-400);
-  --checkbox-500: var(--secondary-500);
-  --checkbox-600: var(--secondary-600);
-  --checkbox-700: var(--secondary-700);
-  --checkbox-800: var(--secondary-800);
-  --checkbox-900: var(--secondary-900);
-  --checkbox-950: var(--secondary-950);
-}
-
-@utility checkbox-accent {
-  --checkbox-50: var(--accent-50);
-  --checkbox-100: var(--accent-100);
-  --checkbox-200: var(--accent-200);
-  --checkbox-300: var(--accent-300);
-  --checkbox-400: var(--accent-400);
-  --checkbox-500: var(--accent-500);
-  --checkbox-600: var(--accent-600);
-  --checkbox-700: var(--accent-700);
-  --checkbox-800: var(--accent-800);
-  --checkbox-900: var(--accent-900);
-  --checkbox-950: var(--accent-950);
-}
-
-@utility checkbox-info {
-  --checkbox-50: var(--info-50);
-  --checkbox-100: var(--info-100);
-  --checkbox-200: var(--info-200);
-  --checkbox-300: var(--info-300);
-  --checkbox-400: var(--info-400);
-  --checkbox-500: var(--info-500);
-  --checkbox-600: var(--info-600);
-  --checkbox-700: var(--info-700);
-  --checkbox-800: var(--info-800);
-  --checkbox-900: var(--info-900);
-  --checkbox-950: var(--info-950);
-}
-
-@utility checkbox-success {
-  --checkbox-50: var(--success-50);
-  --checkbox-100: var(--success-100);
-  --checkbox-200: var(--success-200);
-  --checkbox-300: var(--success-300);
-  --checkbox-400: var(--success-400);
-  --checkbox-500: var(--success-500);
-  --checkbox-600: var(--success-600);
-  --checkbox-700: var(--success-700);
-  --checkbox-800: var(--success-800);
-  --checkbox-900: var(--success-900);
-  --checkbox-950: var(--success-950);
-}
-
-@utility checkbox-warning {
-  --checkbox-50: var(--warning-50);
-  --checkbox-100: var(--warning-100);
-  --checkbox-200: var(--warning-200);
-  --checkbox-300: var(--warning-300);
-  --checkbox-400: var(--warning-400);
-  --checkbox-500: var(--warning-500);
-  --checkbox-600: var(--warning-600);
-  --checkbox-700: var(--warning-700);
-  --checkbox-800: var(--warning-800);
-  --checkbox-900: var(--warning-900);
-  --checkbox-950: var(--warning-950);
-}
-
-@utility checkbox-error {
-  --checkbox-50: var(--error-50);
-  --checkbox-100: var(--error-100);
-  --checkbox-200: var(--error-200);
-  --checkbox-300: var(--error-300);
-  --checkbox-400: var(--error-400);
-  --checkbox-500: var(--error-500);
-  --checkbox-600: var(--error-600);
-  --checkbox-700: var(--error-700);
-  --checkbox-800: var(--error-800);
-  --checkbox-900: var(--error-900);
-  --checkbox-950: var(--error-950);
-}

package/src/components/container.css

@@ -1,52 +0,0 @@
-@utility container {
-  margin-inline: auto;
-  padding-inline: 1rem;
-  @media (width >= 640px) { /* sm */
-    padding-inline: 2rem;
-  }
-  @media (width >= 1024px) { /* lg */
-    padding-inline: 4rem;
-  }
-}
-
-@utility container-xs {
-  max-width: 320px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-@utility container-sm {
-  max-width: 640px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-@utility container-md {
-  max-width: 768px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-
-@utility container-lg {
-  max-width: 1024px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-
-@utility container-xl {
-  max-width: 1280px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-
-@utility container-2xl {
-  max-width: 1536px;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-
-@utility container-full {
-  width: 100%;
-  max-width: 100%;
-  margin-inline: auto;
-  padding-inline: 1rem;
-  box-sizing: border-box;
-}

package/src/components/divider.css

@@ -1,229 +0,0 @@
-@import "../theme/jams/base.css";
-
-@utility divider-x {
-    &:not(:empty) {
-        column-gap: 0.5rem;
-    }
-    &::before, &::after {
-        width: 100%;
-        height: 0.5px;
-    }
-}
-
-@utility divider-x-solid {
-    @apply divider-x;
-    &::before, &::after {
-        background: light-dark(
-            var(--divider-700),
-            var(--divider-900)
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-top: 0.5px solid var(--divider-700);
-        }
-    }
-}
-
-@utility divider-x-dashed {
-    @apply divider-x;
-    &::before, &::after {
-        background: repeating-linear-gradient(
-            to right,
-            var(--divider-700) 0,
-            var(--divider-700) 5px,
-            transparent 5px,
-            transparent 10px
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-top: 0.5px dashed var(--divider-700);
-        }
-    }
-}
-/* Container with two sections and a vertical divider in between.
-
-✅ This will work correctly when:
-    - You set a fixed height on `.container` (e.g. height: 200px), OR
-    - You set `height: 100%` on `.container` **AND**
-    all parent elements (including html and body) also have `height: 100%`
-
-⚠️ If you use `height: 100%` but the parent elements do not have defined height,
-    the vertical divider will collapse because 100% of "auto" is meaningless in CSS.
-
-💡 Best practice:
-    Use fixed height for predictable layouts.
-    Use 100% height only if you're sure the full layout chain supports it. */
-
-
-@utility divider-y {
-    flex-direction: column;
-    &:not(:empty) {
-        row-gap: 0.5rem;
-    }
-    &::before, &::after {
-        width: 0.5px;
-        flex: 1;
-    }
-}
-
-@utility divider-y-solid {
-    @apply divider-y;
-    &::before, &::after {
-        background: light-dark(
-            var(--divider-700),
-            var(--divider-800)
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-left: 0.5px solid var(--divider-700);
-        }
-    }
-}
-
-@utility divider-y-dashed {
-    @apply divider-y;
-    &::before, &::after {
-        background: repeating-linear-gradient(
-            to bottom,
-            var(--divider-700) 0,
-            var(--divider-700) 5px,
-            transparent 5px,
-            transparent 10px
-        );
-    }
-    @media print {
-        &::before,
-        &::after {
-            border-left: 0.5px dashed var(--divider-700);
-        }
-    }
-}
-
-@utility divider {
-    @apply divider-x-solid;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: auto;
-
-    &::before, &::after {
-        content: '';
-    }
-
-    --divider-50: var(--default-50);
-    --divider-100: var(--default-100);
-    --divider-200: var(--default-200);
-    --divider-300: var(--default-300);
-    --divider-400: var(--default-400);
-    --divider-500: var(--default-500);
-    --divider-600: var(--default-600);
-    --divider-700: light-dark(var(--default-200),var(--default-600));
-    --divider-800: var(--default-800);
-    --divider-900: var(--default-900);
-    --divider-950: var(--default-950);
-}
-  
-  @utility divider-primary {
-    --divider-50: var(--primary-50);
-    --divider-100: var(--primary-100);
-    --divider-200: var(--primary-200);
-    --divider-300: var(--primary-300);
-    --divider-400: var(--primary-400);
-    --divider-500: var(--primary-500);
-    --divider-600: var(--primary-600);
-    --divider-700: var(--primary-700);
-    --divider-800: var(--primary-800);
-    --divider-900: var(--primary-900);
-    --divider-950: var(--primary-950);
-  }
-  
-  @utility divider-secondary {
-    --divider-50: var(--secondary-50);
-    --divider-100: var(--secondary-100);
-    --divider-200: var(--secondary-200);
-    --divider-300: var(--secondary-300);
-    --divider-400: var(--secondary-400);
-    --divider-500: var(--secondary-500);
-    --divider-600: var(--secondary-600);
-    --divider-700: var(--secondary-700);
-    --divider-800: var(--secondary-800);
-    --divider-900: var(--secondary-900);
-    --divider-950: var(--secondary-950);
-  }
-  
-  @utility divider-accent {
-    --divider-50: var(--accent-50);
-    --divider-100: var(--accent-100);
-    --divider-200: var(--accent-200);
-    --divider-300: var(--accent-300);
-    --divider-400: var(--accent-400);
-    --divider-500: var(--accent-500);
-    --divider-600: var(--accent-600);
-    --divider-700: var(--accent-700);
-    --divider-800: var(--accent-800);
-    --divider-900: var(--accent-900);
-    --divider-950: var(--accent-950);
-  }
-  
-  @utility divider-info {
-    --divider-50: var(--info-50);
-    --divider-100: var(--info-100);
-    --divider-200: var(--info-200);
-    --divider-300: var(--info-300);
-    --divider-400: var(--info-400);
-    --divider-500: var(--info-500);
-    --divider-600: var(--info-600);
-    --divider-700: var(--info-700);
-    --divider-800: var(--info-800);
-    --divider-900: var(--info-900);
-    --divider-950: var(--info-950);
-  }
-  
-  @utility divider-success {
-    --divider-50: var(--success-50);
-    --divider-100: var(--success-100);
-    --divider-200: var(--success-200);
-    --divider-300: var(--success-300);
-    --divider-400: var(--success-400);
-    --divider-500: var(--success-500);
-    --divider-600: var(--success-600);
-    --divider-700: var(--success-700);
-    --divider-800: var(--success-800);
-    --divider-900: var(--success-900);
-    --divider-950: var(--success-950);
-  }
-  
-  @utility divider-warning {
-    --divider-50: var(--warning-50);
-    --divider-100: var(--warning-100);
-    --divider-200: var(--warning-200);
-    --divider-300: var(--warning-300);
-    --divider-400: var(--warning-400);
-    --divider-500: var(--warning-500);
-    --divider-600: var(--warning-600);
-    --divider-700: var(--warning-700);
-    --divider-800: var(--warning-800);
-    --divider-900: var(--warning-900);
-    --divider-950: var(--warning-950);
-  }
-  
-  @utility divider-error {
-    --divider-50: var(--error-50);
-    --divider-100: var(--error-100);
-    --divider-200: var(--error-200);
-    --divider-300: var(--error-300);
-    --divider-400: var(--error-400);
-    --divider-500: var(--error-500);
-    --divider-600: var(--error-600);
-    --divider-700: var(--error-700);
-    --divider-800: var(--error-800);
-    --divider-900: var(--error-900);
-    --divider-950: var(--error-950);
-  }