fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/css/props/structure.scss

@@ -0,0 +1,228 @@
+/* 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

@@ -0,0 +1,130 @@
+.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

@@ -0,0 +1,281 @@
+: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);
+    }
+  }
+}