fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/css/color.scss

@@ -0,0 +1,289 @@
+:root,
+.theme-light,
+[data-theme='light'] {
+  --brand-1: #fbf9f8;
+  --brand-2: #fff1ec;
+  --brand-3: #ffe6db;
+  --brand-4: #ffd3c2;
+  --brand-5: #ffc4ad;
+  --brand-6: #ffb397;
+  --brand-7: #ff9e7e;
+  --brand-8: #f5845f;
+  --brand-9: #f50;
+  --brand-10: #ed4d00;
+  --brand-11: #ca4900;
+  --brand-12: #5b2a1a;
+  --brand-contrast: #fff;
+
+  --base-1: #f9f9fa;
+  --base-2: #f5f6f8;
+  --base-3: #ececf0;
+  --base-4: #e3e4e9;
+  --base-5: #dcdde2;
+  --base-6: #d4d5dc;
+  --base-7: #c8cad2;
+  --base-8: #b5b7c2;
+  --base-9: #878994;
+  --base-10: #7c7e89;
+  --base-11: #5e6068;
+  --base-12: #1e1f24;
+  --base-contrast: #ffffff;
+
+  color-scheme: light;
+}
+
+.theme-dark,
+[data-theme='dark'] {
+  --brand-1: #160f0d;
+  --brand-2: #201511;
+  --brand-3: #38190f;
+  --brand-4: #4f1602;
+  --brand-5: #5e1e07;
+  --brand-6: #6f2c15;
+  --brand-7: #873c23;
+  --brand-8: #ae4d2c;
+  --brand-9: #f50;
+  --brand-10: #ed4d00;
+  --brand-11: #ff976f;
+  --brand-12: #ffd8c9;
+  --brand-contrast: #fff;
+
+  --base-1: #101113;
+  --base-2: #18191b;
+  --base-3: #212225;
+  --base-4: #282a2d;
+  --base-5: #2e3135;
+  --base-6: #373a3f;
+  --base-7: #44474e;
+  --base-8: #5c616a;
+  --base-9: #696e77;
+  --base-10: #777b84;
+  --base-11: #b0b4ba;
+  --base-12: #edeef0;
+  --base-contrast: #ffffff;
+
+  color-scheme: dark;
+}
+
+/* --------------------------- */
+/* Generate colors */
+/* --------------------------- */
+
+@mixin selector($selector,
+  $selectors: $selector) {
+  #{$selectors},
+  #{$selector},
+  #{$selector}
+    :is(
+      [class*='theme-'],
+      [class*='color-'],
+      [class*='variant-'],
+      .contrast
+    ):not(
+      #{$selector}
+        [class*='color-']
+        :is([class*='theme-'], [class*='variant-'], .contrast)
+    )
+    :not(
+      #{$selector}
+        [class*='color-']:is([class*='theme-'], [class*='variant-'], .contrast)
+    ) {
+    @content;
+  }
+}
+
+:where(:root),
+:where(.theme-light),
+:where(.theme-dark),
+.color-base,
+.color-base
+  .full:not(.color-base [class*='color-']):not(
+    .color-base [class*='color-'] .full
+  ) {
+  --color-1: var(--base-1);
+  --color-2: var(--base-2);
+  --color-3: var(--base-3);
+  --color-4: var(--base-4);
+  --color-5: var(--base-5);
+  --color-6: var(--base-6);
+  --color-7: var(--base-7);
+  --color-8: var(--base-8);
+  --color-9: var(--base-9);
+  --color-10: var(--base-10);
+  --color-11: var(--base-11);
+  --color-12: var(--base-12);
+  --color-contrast: var(--base-contrast);
+}
+
+.color-brand,
+.color-brand
+  .full:not(.color-brand [class*='color-']):not(
+    .color-brand [class*='color-'] .full
+  ) {
+  --color-1: var(--brand-1);
+  --color-2: var(--brand-2);
+  --color-3: var(--brand-3);
+  --color-4: var(--brand-4);
+  --color-5: var(--brand-5);
+  --color-6: var(--brand-6);
+  --color-7: var(--brand-7);
+  --color-8: var(--brand-8);
+  --color-9: var(--brand-9);
+  --color-10: var(--brand-10);
+  --color-11: var(--brand-11);
+  --color-12: var(--brand-12);
+  --color-contrast: var(--brand-contrast);
+}
+
+* {
+  --background: var(--color-1);
+  --border: var(--color-6);
+  --text: var(--color-11);
+
+  &:where(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+}
+
+.variant-solid,
+.variant-solid
+  .full:not(.variant-solid [class*='variant-']):not(
+    .variant-solid [class*='variant-'] .full
+  ) {
+  --background: var(--color-9);
+  --border: transparent;
+  --text: var(--color-contrast);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-1);
+    --background: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --background: var(--color-10);
+
+      &:is(.contrast &, .contrast) {
+        --background: var(--color-12);
+      }
+    }
+  }
+}
+
+.variant-surface,
+.variant-surface
+  .full:not(.variant-surface [class*='variant-']):not(
+    .variant-surface [class*='variant-'] .full
+  ) {
+  --background: var(--color-3);
+  --border: var(--color-7);
+  --text: var(--color-11);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --background: var(--color-4);
+      --border: var(--color-8);
+    }
+
+    &:active {
+      --background: var(--color-5);
+    }
+  }
+}
+
+.variant-soft,
+.variant-soft
+  .full:not(.variant-soft [class*='variant-']):not(
+    .variant-soft [class*='variant-'] .full
+  ) {
+  --background: var(--color-3);
+  --border: transparent;
+  --text: var(--color-11);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --background: var(--color-4);
+    }
+
+    &:active {
+      --background: var(--color-5);
+    }
+  }
+}
+
+.variant-outline,
+.variant-outline
+  .full:not(.variant-outline [class*='variant-']):not(
+    .variant-outline [class*='variant-'] .full
+  ) {
+  --background: transparent;
+  --border: var(--color-7);
+  --text: var(--color-11);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --background: var(--color-3);
+      --border: var(--color-8);
+    }
+
+    &:active {
+      --background: var(--color-5);
+    }
+  }
+}
+
+.variant-ghost,
+.variant-ghost
+  .full:not(.variant-ghost [class*='variant-']):not(
+    .variant-ghost [class*='variant-'] .full
+  ) {
+  --background: transparent;
+  --border: transparent;
+  --text: var(--color-11);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --background: var(--color-3);
+    }
+
+    &:active {
+      --background: var(--color-4);
+    }
+  }
+}
+
+.variant-subtle,
+.variant-subtle
+  .full:not(.variant-subtle [class*='variant-']):not(
+    .variant-subtle [class*='variant-'] .full
+  ) {
+  --background: var(--color-2);
+  --border: var(--color-6);
+  --text: var(--color-11);
+
+  &:is(.contrast &, .contrast) {
+    --text: var(--color-12);
+  }
+
+  &:is(a, button, [href]) {
+    &:hover {
+      --border: var(--color-8);
+    }
+  }
+}

package/src/css/size.scss

@@ -0,0 +1,293 @@
+:root {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 9px;
+  --space-sm-4: 12px;
+  --space-sm-5: 24px;
+  --space-sm-6: 48px;
+  --space-sm-7: 72px;
+
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 12px;
+  --space-md-4: 16px;
+  --space-md-5: 32px;
+  --space-md-6: 64px;
+  --space-md-7: 96px;
+
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 15px;
+  --space-lg-4: 20px;
+  --space-lg-5: 40px;
+  --space-lg-6: 80px;
+  --space-lg-7: 120px;
+
+  --text-xs-1: 12px;
+  --text-xs-2: 12px;
+  --text-xs-3: 12px;
+  --text-xs-4: 14px;
+  --text-xs-5: 16px;
+  --text-xs-6: 18px;
+  --text-xs-7: 20px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 14px;
+  --text-sm-4: 16px;
+  --text-sm-5: 18px;
+  --text-sm-6: 20px;
+  --text-sm-7: 24px;
+
+  --text-md-1: 14px;
+  --text-md-2: 16px;
+  --text-md-3: 16px;
+  --text-md-4: 18px;
+  --text-md-5: 20px;
+  --text-md-6: 24px;
+  --text-md-7: 30px;
+
+  --text-lg-1: 16px;
+  --text-lg-2: 18px;
+  --text-lg-3: 18px;
+  --text-lg-4: 20px;
+  --text-lg-5: 24px;
+  --text-lg-6: 30px;
+  --text-lg-7: 36px;
+
+  --text-xl-1: 16px;
+  --text-xl-2: 18px;
+  --text-xl-3: 20px;
+  --text-xl-4: 24px;
+  --text-xl-5: 30px;
+  --text-xl-6: 36px;
+  --text-xl-7: 48px;
+
+  @media (min-width: 768px) {
+    --text-xs-3: 14px;
+    --text-xs-4: 16px;
+    --text-xs-5: 18px;
+    --text-xs-6: 20px;
+    --text-xs-7: 24px;
+
+    --text-sm-3: 16px;
+    --text-sm-4: 18px;
+    --text-sm-5: 20px;
+    --text-sm-6: 24px;
+    --text-sm-7: 30px;
+
+    --text-md-3: 18px;
+    --text-md-4: 20px;
+    --text-md-5: 24px;
+    --text-md-6: 30px;
+    --text-md-7: 36px;
+
+    --text-lg-3: 20px;
+    --text-lg-4: 24px;
+    --text-lg-5: 30px;
+    --text-lg-6: 36px;
+    --text-lg-7: 48px;
+
+    --text-xl-2: 20px;
+    --text-xl-3: 24px;
+    --text-xl-4: 30px;
+    --text-xl-5: 36px;
+    --text-xl-6: 48px;
+    --text-xl-7: 60px;
+  }
+}
+
+.compact {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 7.5px;
+  --space-sm-4: 9px;
+  --space-sm-5: 12px;
+  --space-sm-6: 15px;
+  --space-sm-7: 18px;
+
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 10px;
+  --space-md-4: 12px;
+  --space-md-5: 16px;
+  --space-md-6: 20px;
+  --space-md-7: 24px;
+
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 12.5px;
+  --space-lg-4: 15px;
+  --space-lg-5: 20px;
+  --space-lg-6: 25px;
+  --space-lg-7: 30px;
+
+  --text-xs-1: 12px;
+  --text-xs-2: 12px;
+  --text-xs-3: 12px;
+  --text-xs-4: 14px;
+  --text-xs-5: 16px;
+  --text-xs-6: 18px;
+  --text-xs-7: 20px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 14px;
+  --text-sm-4: 16px;
+  --text-sm-5: 18px;
+  --text-sm-6: 20px;
+  --text-sm-7: 24px;
+
+  --text-md-1: 14px;
+  --text-md-2: 16px;
+  --text-md-3: 16px;
+  --text-md-4: 18px;
+  --text-md-5: 20px;
+  --text-md-6: 24px;
+  --text-md-7: 30px;
+
+  --text-lg-1: 16px;
+  --text-lg-2: 18px;
+  --text-lg-3: 18px;
+  --text-lg-4: 20px;
+  --text-lg-5: 24px;
+  --text-lg-6: 30px;
+  --text-lg-7: 30px;
+
+  --text-xl-1: 16px;
+  --text-xl-2: 18px;
+  --text-xl-3: 20px;
+  --text-xl-4: 24px;
+  --text-xl-5: 30px;
+  --text-xl-6: 30px;
+  --text-xl-7: 30px;
+}
+
+/* --------------------------- */
+/* Generate sizes */
+/* --------------------------- */
+
+@mixin selector($selector,
+  $selectors: $selector) {
+  #{$selectors},
+  #{$selector},
+  #{$selector}
+    .compact:not(#{$selector} [class*='size-'] .compact):not(
+      #{$selector} [class*='size-'].compact
+    ) {
+    @content;
+  }
+}
+
+@include selector('.size-xs') {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+  --space-7: var(--space-sm-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
+
+  --text-1: var(--text-xs-1);
+  --text-2: var(--text-xs-2);
+  --text-3: var(--text-xs-3);
+  --text-4: var(--text-xs-4);
+  --text-5: var(--text-xs-5);
+  --text-6: var(--text-xs-6);
+  --text-7: var(--text-xs-7);
+}
+
+@include selector('.size-sm') {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+  --space-7: var(--space-sm-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
+
+  --text-1: var(--text-sm-1);
+  --text-2: var(--text-sm-2);
+  --text-3: var(--text-sm-3);
+  --text-4: var(--text-sm-4);
+  --text-5: var(--text-sm-5);
+  --text-6: var(--text-sm-6);
+  --text-7: var(--text-sm-7);
+}
+
+@include selector(
+  '.size-md',
+  ':where(:root), :where(.compact)'
+) {
+  --space-1: var(--space-md-1);
+  --space-2: var(--space-md-2);
+  --space-3: var(--space-md-3);
+  --space-4: var(--space-md-4);
+  --space-5: var(--space-md-5);
+  --space-6: var(--space-md-6);
+  --space-7: var(--space-md-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-md-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-md-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-md-3));
+
+  --text-1: var(--text-md-1);
+  --text-2: var(--text-md-2);
+  --text-3: var(--text-md-3);
+  --text-4: var(--text-md-4);
+  --text-5: var(--text-md-5);
+  --text-6: var(--text-md-6);
+  --text-7: var(--text-md-7);
+}
+
+@include selector('.size-lg') {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+  --space-7: var(--space-lg-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
+
+  --text-1: var(--text-lg-1);
+  --text-2: var(--text-lg-2);
+  --text-3: var(--text-lg-3);
+  --text-4: var(--text-lg-4);
+  --text-5: var(--text-lg-5);
+  --text-6: var(--text-lg-6);
+  --text-7: var(--text-lg-7);
+}
+
+@include selector('.size-xl') {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+  --space-7: var(--space-lg-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
+
+  --text-1: var(--text-xl-1);
+  --text-2: var(--text-xl-2);
+  --text-3: var(--text-xl-3);
+  --text-4: var(--text-xl-4);
+  --text-5: var(--text-xl-5);
+  --text-6: var(--text-xl-6);
+  --text-7: var(--text-xl-7);
+}

package/src/css/space.scss

@@ -0,0 +1,94 @@
+@mixin space-x {
+  > {
+    .full + .full {
+      margin-left: var(--space-6);
+    }
+
+    .full + .group,
+    .full + .row,
+    .full + .wrap,
+    .full + .button,
+    .full + .switch {
+      margin-left: var(--space-5);
+    }
+
+    .full + .heading,
+    .full + .link,
+    .full + .list,
+    .full + .paragraph,
+    .full + .text,
+    .full + .tagline,
+    .full + .input,
+    .full + .badge,
+    .full + .rating {
+      margin-left: var(--space-4);
+    }
+
+    .paragraph + .paragraph,
+    .text + .text,
+    .button + .button,
+    .input + .button {
+      margin-left: var(--space-3);
+    }
+
+    .full + .label,
+    .label + .full {
+      margin-left: var(--space-2);
+    }
+
+    .image + .full,
+    .icon + .full {
+      margin-left: var(--space-6);
+    }
+  }
+}
+
+@mixin space-y {
+  > {
+    .full + .full {
+      margin-top: var(--space-6);
+    }
+
+    .full + .group,
+    .full + .row,
+    .full + .wrap,
+    .full + .button,
+    .full + .switch {
+      margin-top: var(--space-5);
+    }
+
+    .full + .heading,
+    .full + .label,
+    .full + .link,
+    .full + .list,
+    .full + .paragraph,
+    .full + .text,
+    .full + .tagline,
+    .full + .input,
+    .full + .textarea,
+    .full + .select,
+    .full + .badge,
+    .full + .rating {
+      margin-top: var(--space-4);
+    }
+
+    .paragraph + .paragraph,
+    .text + .text,
+    .button:not(.variant-link) + .button:not(.variant-link),
+    .input + .button {
+      margin-top: var(--space-3);
+    }
+
+    .label + .input,
+    .variant-link + .variant-link,
+    .label + .textarea,
+    .label + .select {
+      margin-top: var(--space-2);
+    }
+
+    .image + .full,
+    .icon + .full {
+      margin-top: var(--space-6);
+    }
+  }
+}

package/src/css/styles.css

@@ -1,9 +1,8 @@
 :root,
 .full {
   --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
-  --border-width: 1px;
 
-  --font-family: 'IBM Plex Sans', sans-serif;
+  --font-family: 'Raleway', sans-serif;
   --font-weight: 400;
 
   --text-heading-font-family: var(--font-family);