fulldev-ui 0.3.0-beta.3 → 0.3.2

package/src/css/props/structure.scss

@@ -1,228 +0,0 @@
-/* Horizontal */
-.structure-row {
-  display: flex;
-
-  & > .full {
-    margin-top: 0;
-  }
-}
-
-/* Vertical */
-.structure-column {
-  display: flex;
-  flex-direction: column;
-
-  & > .full {
-    margin-left: 0;
-  }
-}
-
-/* Horizontal with equa columns */
-.structure-split {
-  display: grid;
-  grid-template-columns: 1fr;
-
-  & > .full {
-    margin: 0;
-  }
-
-  @media (min-width: 1024px) {
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: var(--space-6);
-
-    & > .full {
-      margin-top: 0;
-    }
-  }
-}
-
-/* Horizontal and wrapping */
-.structure-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: stretch;
-  gap: var(--space-2);
-}
-
-/* Horizontal with space-between */
-.structure-spread {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: stretch;
-  gap: var(--space-4);
-  width: 100%;
-
-  & > .full {
-    width: auto;
-  }
-}
-
-/* Equal columns and rows */
-.structure-grid {
-  --column-width: calc(15 * var(--element-3));
-
-  display: grid;
-  position: relative;
-  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
-  gap: var(--space-3);
-  width: 100%;
-}
-
-/* Equal rows, but not columns */
-.structure-bento {
-  display: grid;
-  position: relative;
-  grid-template-columns: 1fr;
-  width: 100%;
-
-  @media (min-width: 1024px) {
-    grid-template-columns: 1fr 1fr 1fr;
-
-    & > *:nth-child(2n) {
-      grid-column-start: span 2;
-    }
-  }
-}
-
-/* Equal columns, but not rows */
-.structure-masonry {
-  --column-width: calc(16 * var(--element-3));
-  --gap: var(--space-3);
-
-  position: relative;
-  column-gap: var(--gap);
-  column-fill: balance;
-  column-width: var(--column-width);
-  column-count: 6;
-  break-inside: avoid;
-  width: 100%;
-
-  & > .full + .full {
-    break-inside: avoid;
-    margin-top: var(--gap);
-    margin-bottom: var(--gap);
-  }
-}
-
-/* Equal columns, scrollable horizontally */
-.structure-carousel {
-  --column-width: calc(16 * var(--element-3));
-
-  display: flex;
-  position: relative;
-  position: relative;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--space-3);
-  padding-bottom: var(--space-3);
-  width: 100%;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
-
-  > .full {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: var(--column-width);
-    scroll-snap-align: center;
-  }
-}
-
-@mixin space-x {
-  > {
-    .full + .full {
-      margin-left: var(--space-5);
-    }
-
-    .full + .group,
-    .full + .button,
-    .full + .switch {
-      margin-left: var(--space-4);
-    }
-
-    .full + .heading,
-    .full + .label,
-    .full + .link,
-    .full + .list,
-    .full + .paragraph,
-    .full + .tagline,
-    .full + .input,
-    .full + .badge,
-    .full + .rating {
-      margin-left: var(--space-3);
-    }
-
-    .paragraph + .paragraph,
-    .button:not(.variant-link) + .button:not(.variant-link),
-    .input + .button {
-      margin-left: var(--space-2);
-    }
-
-    .label + .input {
-      margin-left: var(--space-1);
-    }
-
-    .image + .full,
-    .icon + .full {
-      margin-left: var(--space-5);
-    }
-  }
-}
-
-@mixin space-y {
-  > {
-    .full + .full {
-      margin-top: var(--space-5);
-    }
-
-    .full + .group,
-    .full + .button,
-    .full + .switch {
-      margin-top: var(--space-4);
-    }
-
-    .full + .heading,
-    .full + .label,
-    .full + .link,
-    .full + .list,
-    .full + .paragraph,
-    .full + .tagline,
-    .full + .input,
-    .full + .badge,
-    .full + .rating {
-      margin-top: var(--space-3);
-    }
-
-    .paragraph + .paragraph,
-    .button:not(.variant-link) + .button:not(.variant-link),
-    .input + .button {
-      margin-top: var(--space-2);
-    }
-
-    .label + .input {
-      margin-top: var(--space-1);
-    }
-
-    .image + .full,
-    .icon + .full {
-      margin-top: var(--space-5);
-    }
-  }
-}
-
-/* For ALL */
-.structure-split {
-  @media (max-width: 1023.999px) {
-    @include space-y;
-  }
-}
-
-.structure-row {
-  @include space-x;
-}
-
-.structure-column {
-  @include space-y;
-}

package/src/css/props/variant.scss

@@ -1,130 +0,0 @@
-.variant-solid {
-  background-color: var(--solid);
-  color: var(--solid-contrast);
-
-  .full {
-    color: var(--background);
-  }
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--solid-hover);
-    }
-
-    &:active {
-      background-color: var(--solid-hover);
-    }
-  }
-}
-
-.variant-soft {
-  background-color: var(--background-soft);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--background-hover);
-    }
-
-    &:active {
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-surface {
-  // box-shadow: inset 0 0 0 1px var(--border-outline);
-  border: 1px solid var(--border-outline);
-  background-color: var(--background-surface);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-surface);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-outline {
-  // box-shadow: inset 0 0 0 1px var(--border-outline);
-  border: 1px solid var(--border-outline);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-surface);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-ghost {
-  box-shadow: none;
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      background-color: var(--background-soft);
-    }
-
-    &:active {
-      background-color: var(--background-active);
-    }
-  }
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}
-
-.variant-subtle {
-  // box-shadow: inset 0 0 0 1px var(--border);
-  border: 1px solid var(--border);
-  background-color: var(--background-subtle);
-  color: var(--foreground);
-
-  &:is(a, button),
-  &[href] {
-    &:hover {
-      // box-shadow: inset 0 0 0 1px var(--border-hover);
-      border: 1px solid var(--border-hover);
-    }
-  }
-
-
-
-  &.contrast {
-    color: var(--foreground-contrast);
-  }
-}

package/src/css/radix.css

@@ -1,281 +0,0 @@
-:root,
-.light,
-.light-theme,
-.theme-light,
-[data-theme='light'] {
-  --base-1: #f8f9fb;
-  --base-2: #f4f6f9;
-  --base-3: #ebedef;
-  --base-4: #e3e4e7;
-  --base-5: #dcdde0;
-  --base-6: #d4d5d8;
-  --base-7: #c9cacd;
-  --base-8: #b6b7ba;
-  --base-9: #88898c;
-  --base-10: #7d7f81;
-  --base-11: #5f6062;
-  --base-12: #1e2022;
-
-  --base-a1: #3c3d3f04;
-  --base-a2: #1c3d5f08;
-  --base-a3: #0b1b1e11;
-  --base-a4: #07081419;
-  --base-a5: #03050f20;
-  --base-a6: #03040c28;
-  --base-a7: #01020933;
-  --base-a8: #04050a47;
-  --base-a9: #01020675;
-  --base-a10: #02040681;
-  --base-a11: #0102049f;
-  --base-a12: #000205e1;
-
-  --base-contrast: #ffffff;
-  --base-surface: #ffffffcc;
-  --base-indicator: #88898c;
-  --base-track: #88898c;
-
-  --brand-1: #f9fafb;
-  --brand-2: #f2f6ff;
-  --brand-3: #e7eeff;
-  --brand-4: #d9e5ff;
-  --brand-5: #c9d9ff;
-  --brand-6: #b4cbff;
-  --brand-7: #98b7ff;
-  --brand-8: #769aff;
-  --brand-9: #2b00ff;
-  --brand-10: #3e00c7;
-  --brand-11: #2f39f8;
-  --brand-12: #172574;
-
-  --brand-a1: #7c7d3f04;
-  --brand-a2: #f2f6ff;
-  --brand-a3: #e7eeff;
-  --brand-a4: #d9e5ff;
-  --brand-a5: #c9d9ff;
-  --brand-a6: #b4cbff;
-  --brand-a7: #98b7ff;
-  --brand-a8: #769aff;
-  --brand-a9: #2b00ff;
-  --brand-a10: #3e00c7;
-  --brand-a11: #010df7d0;
-  --brand-a12: #000f66e8;
-
-  --brand-contrast: #fff;
-  --brand-surface: #f0f5ffcc;
-  --brand-indicator: #2b00ff;
-  --brand-track: #2b00ff;
-
-  color-scheme: light;
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root,
-    .light,
-    .light-theme,
-    .theme-light,
-    [data-theme='light'] {
-      --base-1: oklch(98.1% 0.003 264.5);
-      --base-2: oklch(97.2% 0.004 264.5);
-      --base-3: oklch(94.4% 0.004 264.5);
-      --base-4: oklch(91.9% 0.004 264.5);
-      --base-5: oklch(89.7% 0.004 264.5);
-      --base-6: oklch(87.4% 0.004 264.5);
-      --base-7: oklch(83.9% 0.004 264.5);
-      --base-8: oklch(77.9% 0.004 264.5);
-      --base-9: oklch(63.1% 0.004 264.5);
-      --base-10: oklch(59.5% 0.004 264.5);
-      --base-11: oklch(48.8% 0.004 264.5);
-      --base-12: oklch(24.1% 0.004 264.5);
-
-      --base-a1: color(display-p3 0.008 0.012 0.02 / 0.012);
-      --base-a2: color(display-p3 0.008 0.149 0.298 / 0.028);
-      --base-a3: color(display-p3 0.008 0.071 0.078 / 0.064);
-      --base-a4: color(display-p3 0.008 0.012 0.059 / 0.096);
-      --base-a5: color(display-p3 0.004 0.008 0.047 / 0.124);
-      --base-a6: color(display-p3 0.008 0.012 0.043 / 0.156);
-      --base-a7: color(display-p3 0.004 0.008 0.035 / 0.2);
-      --base-a8: color(display-p3 0.004 0.004 0.027 / 0.275);
-      --base-a9: color(display-p3 0.004 0.008 0.024 / 0.459);
-      --base-a10: color(display-p3 0 0.012 0.02 / 0.502);
-      --base-a11: color(display-p3 0 0.008 0.016 / 0.622);
-      --base-a12: color(display-p3 0 0.008 0.02 / 0.881);
-
-      --base-contrast: #ffffff;
-      --base-surface: color(display-p3 1 1 1 / 80%);
-      --base-indicator: oklch(63.1% 0.004 264.5);
-      --base-track: oklch(63.1% 0.004 264.5);
-
-      --brand-1: oklch(98.4% 0.002 269);
-      --brand-2: oklch(97.2% 0.013 269);
-      --brand-3: oklch(94.9% 0.027 269);
-      --brand-4: oklch(92.3% 0.053 269);
-      --brand-5: oklch(89% 0.08 269);
-      --brand-6: oklch(84.9% 0.112 269);
-      --brand-7: oklch(79.3% 0.137 269);
-      --brand-8: oklch(71.5% 0.178 269);
-      --brand-9: oklch(46.3% 0.306 269);
-      --brand-10: oklch(40.9% 0.306 269);
-      --brand-11: oklch(49.5% 0.272 269);
-      --brand-12: oklch(31.3% 0.135 269);
-
-      --brand-a1: color(display-p3 0.333 0.337 0.02 / 0.012);
-      --brand-a2: color(display-p3 0.008 0.255 1 / 0.032);
-      --brand-a3: color(display-p3 0.004 0.267 0.945 / 0.076);
-      --brand-a4: color(display-p3 0.008 0.286 0.969 / 0.128);
-      --brand-a5: color(display-p3 0.004 0.239 0.957 / 0.188);
-      --brand-a6: color(display-p3 0.004 0.255 0.953 / 0.267);
-      --brand-a7: color(display-p3 0.004 0.247 0.945 / 0.371);
-      --brand-a8: color(display-p3 0 0.216 0.953 / 0.502);
-      --brand-a9: color(display-p3 0.141 0 0.961 / 0.989);
-      --brand-a10: color(display-p3 0.204 0 0.745 / 0.981);
-      --brand-a11: color(display-p3 0 0.039 0.918 / 0.805);
-      --brand-a12: color(display-p3 0 0.047 0.376 / 0.897);
-
-      --brand-contrast: #fff;
-      --brand-surface: color(display-p3 0.945 0.961 0.996 / 0.8);
-      --brand-indicator: oklch(46.3% 0.306 269);
-      --brand-track: oklch(46.3% 0.306 269);
-
-      color-scheme: dark;
-    }
-  }
-}
-
-.dark,
-.dark-theme,
-.theme-dark,
-[data-theme='dark'] {
-  --base-1: #080b14;
-  --base-2: #141822;
-  --base-3: #1c2130;
-  --base-4: #232938;
-  --base-5: #2a3040;
-  --base-6: #333949;
-  --base-7: #404758;
-  --base-8: #596072;
-  --base-9: #676d80;
-  --base-10: #747b8e;
-  --base-11: #abb3c7;
-  --base-12: #eaeef8;
-
-  --base-a1: #00000000;
-  --base-a2: #c8dbf410;
-  --base-a3: #adc0fa1f;
-  --base-a4: #b5cbfa28;
-  --base-a5: #bdd0fe30;
-  --base-a6: #c6d6fe3a;
-  --base-a7: #c9daff4a;
-  --base-a8: #d3dfff66;
-  --base-a9: #d6dffd76;
-  --base-a10: #d7e2fe85;
-  --base-a11: #dde6fec3;
-  --base-a12: #f1f5fef8;
-
-  --base-contrast: #ffffff;
-  --base-surface: rgba(0, 0, 0, 0.05);
-  --base-indicator: #676d80;
-  --base-track: #676d80;
-
-  --brand-1: #050a1c;
-  --brand-2: #0e152c;
-  --brand-3: #121d5b;
-  --brand-4: #17237c;
-  --brand-5: #1d2c93;
-  --brand-6: #2538a6;
-  --brand-7: #2d43be;
-  --brand-8: #354ede;
-  --brand-9: #2b00ff;
-  --brand-10: #3e00c7;
-  --brand-11: #96adff;
-  --brand-12: #d3e0ff;
-
-  --brand-a1: #0000f709;
-  --brand-a2: #416af71b;
-  --brand-a3: #2846fd4e;
-  --brand-a4: #2a42ff71;
-  --brand-a5: #2f48ff8a;
-  --brand-a6: #3754fe9f;
-  --brand-a7: #3b58ffb9;
-  --brand-a8: #3c58fedc;
-  --brand-a9: #2b00ff;
-  --brand-a10: #4f00fec3;
-  --brand-a11: #96adff;
-  --brand-a12: #d3e0ff;
-
-  --brand-contrast: #fff;
-  --brand-surface: #141f4480;
-  --brand-indicator: #2b00ff;
-  --brand-track: #2b00ff;
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark,
-    .dark-theme,
-    .theme-dark,
-    [data-theme='dark'] {
-      --base-1: oklch(15.1% 0.02 269.2);
-      --base-2: oklch(20.9% 0.021 269.2);
-      --base-3: oklch(25.1% 0.029 269.2);
-      --base-4: oklch(28.1% 0.03 269.2);
-      --base-5: oklch(31.1% 0.03 269.2);
-      --base-6: oklch(34.6% 0.03 269.2);
-      --base-7: oklch(39.8% 0.03 269.2);
-      --base-8: oklch(49% 0.03 269.2);
-      --base-9: oklch(53.7% 0.03 269.2);
-      --base-10: oklch(58.3% 0.03 269.2);
-      --base-11: oklch(76.8% 0.03 269.2);
-      --base-12: oklch(94.9% 0.014 269.2);
-
-      --base-a1: color(display-p3 0 0 0 / 0);
-      --base-a2: color(display-p3 0.824 0.894 0.992 / 0.06);
-      --base-a3: color(display-p3 0.698 0.769 1 / 0.119);
-      --base-a4: color(display-p3 0.729 0.816 1 / 0.153);
-      --base-a5: color(display-p3 0.749 0.82 1 / 0.187);
-      --base-a6: color(display-p3 0.788 0.843 1 / 0.225);
-      --base-a7: color(display-p3 0.796 0.859 0.996 / 0.289);
-      --base-a8: color(display-p3 0.843 0.886 1 / 0.395);
-      --base-a9: color(display-p3 0.859 0.89 1 / 0.454);
-      --base-a10: color(display-p3 0.863 0.902 1 / 0.513);
-      --base-a11: color(display-p3 0.882 0.914 0.996 / 0.755);
-      --base-a12: color(display-p3 0.953 0.965 0.996 / 0.967);
-
-      --base-contrast: #ffffff;
-      --base-surface: color(display-p3 0 0 0 / 5%);
-      --base-indicator: oklch(53.7% 0.03 269.2);
-      --base-track: oklch(53.7% 0.03 269.2);
-
-      --brand-1: oklch(15.1% 0.04 269);
-      --brand-2: oklch(20.2% 0.048 269);
-      --brand-3: oklch(26.9% 0.111 269);
-      --brand-4: oklch(31.7% 0.149 269);
-      --brand-5: oklch(36.1% 0.167 269);
-      --brand-6: oklch(40.3% 0.177 269);
-      --brand-7: oklch(45% 0.192 269);
-      --brand-8: oklch(50.3% 0.22 269);
-      --brand-9: oklch(46.3% 0.306 269);
-      --brand-10: oklch(40.9% 0.306 269);
-      --brand-11: oklch(77.7% 0.197 269);
-      --brand-12: oklch(91.1% 0.068 269);
-
-      --brand-a1: color(display-p3 0 0 1 / 0.034);
-      --brand-a2: color(display-p3 0.278 0.447 0.996 / 0.098);
-      --brand-a3: color(display-p3 0.188 0.29 0.996 / 0.289);
-      --brand-a4: color(display-p3 0.196 0.267 1 / 0.424);
-      --brand-a5: color(display-p3 0.212 0.294 1 / 0.517);
-      --brand-a6: color(display-p3 0.243 0.333 1 / 0.598);
-      --brand-a7: color(display-p3 0.267 0.357 1 / 0.695);
-      --brand-a8: color(display-p3 0.267 0.357 1 / 0.827);
-      --brand-a9: color(display-p3 0.161 0.012 1 / 0.958);
-      --brand-a10: color(display-p3 0.29 0.012 1 / 0.729);
-      --brand-a11: color(display-p3 0.62 0.69 1 / 0.975);
-      --brand-a12: color(display-p3 0.847 0.89 1 / 0.988);
-
-      --brand-contrast: #fff;
-      --brand-surface: color(display-p3 0.078 0.118 0.259 / 0.5);
-      --brand-indicator: oklch(46.3% 0.306 269);
-      --brand-track: oklch(46.3% 0.306 269);
-    }
-  }
-}