fulldev-ui 0.1.64

package/src/components/wrapper/todo.md

@@ -0,0 +1,20 @@
+# Chores
+- Apply props gutter, which controls the outer padding/margin. Now is frame: panel/fill/viewport
+- Apply props spacer, which controls the margin between children. Now is always enabled, but should be optional: none, components, prose (probably not needed with prose and writeup component. This whole prop might be skipped)
+- Should be renamed to 'containers', because 'layouts' are used used for collections. Or maybe 'structures'. Or we should use template for the content collections. We need a name that also fits 'Divider'.
+
+
+# New components
+- Prose (for articles etc. Should apply styling to non-component html elements)
+- Writeup (for small content areas, like in a section. Should apply styling to non-component html elements)
+- Field (for form fields with label etc. Should adapt based on the element, like horizontal for checkboxes)
+- Divider (for separating with a light border)
+
+## Low priority
+- Toast
+- Modal
+- Drawer
+- Alert
+- Tooltip
+- Legal
+- Banner

package/src/content/pages/index.md

@@ -0,0 +1,2 @@
+---
+---

package/src/css/border.css

@@ -0,0 +1,23 @@
+:root {
+  --border-radius: 1;
+  --full-border-width: 1px;
+  --full-transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
+}
+
+:root,
+.full-compact,
+.full-size-xs,
+.full-size-sm,
+.full-size-md,
+.full-size-lg,
+.full-size-xl {
+  --full-border-radius-1: calc(
+    var(--border-radius) * var(--space-element-2) * 0.25
+  );
+  --full-border-radius-2: calc(
+    var(--border-radius) * var(--space-element-2) * 0.5
+  );
+  --full-border-radius-3: calc(
+    var(--border-radius) * var(--space-element-2) * 1
+  );
+}

package/src/css/colors.css

@@ -0,0 +1,328 @@
+:root,
+.full-theme-light {
+  --base-background: hsl(0, 0%, 100%);
+  --base-hover: hsl(0, 0%, 97%);
+  --base-border: hsl(0, 0%, 83%);
+  --base-focus: hsl(0, 0%, 10%);
+  --base-foreground: hsl(0, 0%, 4%);
+
+  --raised-background: hsl(0, 0%, 97%);
+  --raised-hover: var(--base-hover);
+  --raised-border: var(--base-border);
+  --raised-focus: var(--base-focus);
+  --raised-foreground: var(--base-foreground);
+
+  --accent-background: var(--base-background);
+  --accent-hover: var(--base-hover);
+  --accent-border: var(--base-border);
+  --accent-focus: var(--base-focus);
+  --accent-foreground: var(--primary-background);
+
+  --muted-background: var(--base-background);
+  --muted-hover: var(--base-hover);
+  --muted-border: var(--base-border);
+  --muted-focus: var(--base-focus);
+  --muted-foreground: hsl(0, 0%, 25%);
+
+  --ghost-background: transparent;
+  --ghost-hover: var(--base-hover);
+  --ghost-border: transparent;
+  --ghost-focus: var(--base-focus);
+  --ghost-foreground: var(--base-foreground);
+
+  --outline-background: transparent;
+  --outline-hover: var(--hover);
+  --outline-border: hsl(0, 0%, 83%);
+  --outline-focus: var(--base-focus);
+  --outline-foreground: var(--base-foreground);
+
+  --secondary-background: hsl(0, 0%, 94%);
+  --secondary-hover: hsl(0, 0%, 92%);
+  --secondary-border: transparent;
+  --secondary-focus: var(--base-focus);
+  --secondary-foreground: var(--base-foreground);
+
+  --primary-background: hsl(0, 0%, 0%);
+  --primary-hover: hsl(0, 0%, 16%);
+  --primary-border: transparent;
+  --primary-focus: var(--base-focus);
+  --primary-foreground: hsl(0, 0%, 100%);
+
+  color-scheme: light;
+}
+
+.full-theme-dark,
+.dark,
+[data-theme='dark'] {
+  --base-background: #020202;
+  --base-hover: #101010;
+  --base-border: #333333;
+  --base-focus: #fff;
+  --base-foreground: #fff;
+
+  --muted-background: var(--base-background);
+  --muted-hover: var(--base-hover);
+  --muted-border: var(--base-border);
+  --muted-focus: var(--base-focus);
+  --muted-foreground: #dcdcdc;
+
+  --raised-background: #101010;
+  --raised-hover: var(--base-hover);
+  --raised-border: var(--base-border);
+  --raised-focus: var(--base-focus);
+  --raised-foreground: var(--base-foreground);
+
+  --accent-background: var(--base-background);
+  --accent-hover: var(--base-hover);
+  --accent-border: var(--base-border);
+  --accent-focus: var(--base-focus);
+  --accent-foreground: var(--primary-background);
+
+  --ghost-background: transparent;
+  --ghost-hover: var(--base-hover);
+  --ghost-border: transparent;
+  --ghost-focus: var(--base-focus);
+  --ghost-foreground: var(--base-foreground);
+
+  --outline-background: transparent;
+  --outline-hover: var(--hover);
+  --outline-border: #333333;
+  --outline-focus: var(--base-focus);
+  --outline-foreground: var(--base-foreground);
+
+  --secondary-background: #1f1f1f;
+  --secondary-hover: #191919;
+  --secondary-border: transparent;
+  --secondary-focus: var(--base-focus);
+  --secondary-foreground: var(--base-foreground);
+
+  --primary-background: #fff;
+  --primary-hover: #dcdcdc;
+  --primary-border: transparent;
+  --primary-focus: var(--base-focus);
+  --primary-foreground: var(--base-background);
+
+  color-scheme: dark;
+}
+
+/* --------------------------- */
+/* Generate colors */
+/* --------------------------- */
+
+:root,
+:where([class*='full-theme-']),
+.full-variant-base,
+.full-variant-base
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--base-background);
+  --hover: var(--base-hover);
+  --border: var(--base-border);
+  --focus: var(--base-focus);
+  --foreground: var(--base-foreground);
+}
+
+.full-variant-primary,
+.full-variant-primary
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--primary-background);
+  --hover: var(--primary-hover);
+  --border: var(--primary-border);
+  --focus: var(--primary-focus);
+  --foreground: var(--primary-foreground);
+}
+
+.full-variant-secondary,
+.full-variant-secondary
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--secondary-background);
+  --hover: var(--secondary-hover);
+  --border: var(--secondary-border);
+  --focus: var(--secondary-focus);
+  --foreground: var(--secondary-foreground);
+}
+
+.full-variant-accent,
+.full-variant-accent
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--accent-background);
+  --hover: var(--accent-hover);
+  --border: var(--accent-border);
+  --focus: var(--accent-focus);
+  --foreground: var(--accent-foreground);
+}
+
+.full-variant-muted,
+.full-variant-muted
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--muted-background);
+  --hover: var(--muted-hover);
+  --border: var(--muted-border);
+  --focus: var(--muted-focus);
+  --foreground: var(--muted-foreground);
+}
+
+.full-variant-ghost,
+.full-variant-ghost
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--ghost-background);
+  --hover: var(--ghost-hover);
+  --border: var(--ghost-border);
+  --focus: var(--ghost-focus);
+  --foreground: var(--ghost-foreground);
+}
+
+.full-variant-outline,
+.full-variant-outline
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--outline-background);
+  --hover: var(--outline-hover);
+  --border: var(--outline-border);
+  --focus: var(--outline-focus);
+  --foreground: var(--outline-foreground);
+}
+
+.full-variant-raised,
+.full-variant-raised
+  *:not(
+    .full-variant-base,
+    .full-variant-base *,
+    .full-variant-primary,
+    .full-variant-primary *,
+    .full-variant-secondary,
+    .full-variant-secondary *,
+    .full-variant-accent,
+    .full-variant-accent *,
+    .full-variant-muted,
+    .full-variant-muted *,
+    .full-variant-ghost,
+    .full-variant-ghost *,
+    .full-variant-outline,
+    .full-variant-outline *,
+    .full-variant-raised,
+    .full-variant-raised *
+  ) {
+  --background: var(--raised-background);
+  --hover: var(--raised-hover);
+  --border: var(--raised-border);
+  --focus: var(--raised-focus);
+  --foreground: var(--raised-foreground);
+}

package/src/css/font.css

@@ -0,0 +1,15 @@
+:root {
+  --full-font-family: 'IBM Plex Sans', sans-serif;
+  --full-font-weight: 400;
+
+  --full-heading-font-family: var(--full-font-family);
+  --full-heading-font-weight: 700;
+
+  --full-button-font-family: var(--full-font-family);
+  --full-button-font-weight: 500;
+}
+
+.full-density-compact {
+  --full-heading-font-family: var(--full-font-family);
+  --full-heading-font-weight: 600;
+}

package/src/css/main.css

@@ -0,0 +1,4 @@
+@import './sizes.css';
+@import './colors.css';
+@import './border.css';
+@import './font.css';