fulldev-ui 0.1.64 → 0.2.10

package/src/css/colors.css

@@ -1,136 +1,108 @@
 :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%);
+.theme-light [data-theme='light'] {
+  --base-background: hsl(223, 54%, 98%);
+  --base-hover: hsl(223, 16%, 93%);
+  --base-border: hsl(223, 16%, 87%);
+  --base-focus: hsl(223, 16%, 9%);
+  --base-foreground: hsl(223, 10%, 3%);
+
+  --secondary-background: hsl(223, 20%, 90%);
+  --secondary-hover: hsl(223, 20%, 92%);
+  --secondary-foreground: var(--base-foreground);
 
-  --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);
+  --primary-background: hsl(223, 20%, 9%);
+  --primary-hover: hsl(223, 20%, 16%);
+  --primary-foreground: var(--base-background);
 
-  --accent-background: var(--base-background);
-  --accent-hover: var(--base-hover);
-  --accent-border: var(--base-border);
-  --accent-focus: var(--base-focus);
+  --outline-border: hsl(223, 16%, 85%);
+  --muted-foreground: hsl(223, 16%, 22%);
+  --raised-background: hsl(223, 38%, 96%);
   --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,
+.theme-dark,
 .dark,
 [data-theme='dark'] {
-  --base-background: #020202;
-  --base-hover: #101010;
-  --base-border: #333333;
-  --base-focus: #fff;
-  --base-foreground: #fff;
+  --base-background: hsl(223, 54%, 5%);
+  --base-hover: hsl(223, 20%, 10%);
+  --base-border: hsl(223, 16%, 20%);
+  --base-focus: hsl(223, 16%, 100%);
+  --base-foreground: hsl(223, 10%, 100%);
+
+  --secondary-background: hsl(223, 20%, 15%);
+  --secondary-hover: hsl(223, 20%, 13%);
+  --secondary-foreground: var(--base-foreground);
 
-  --muted-background: var(--base-background);
-  --muted-hover: var(--base-hover);
-  --muted-border: var(--base-border);
-  --muted-focus: var(--base-focus);
-  --muted-foreground: #dcdcdc;
+  --primary-background: hsl(223, 16%, 100%);
+  --primary-hover: hsl(223, 16%, 90%);
+  --primary-foreground: var(--base-background);
 
-  --raised-background: #101010;
-  --raised-hover: var(--base-hover);
-  --raised-border: var(--base-border);
-  --raised-focus: var(--base-focus);
-  --raised-foreground: var(--base-foreground);
+  --outline-border: hsl(223, 16%, 26%);
+  --muted-foreground: hsl(223, 16%, 86%);
+  --raised-background: hsl(223, 36%, 7%);
 
-  --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);
+  color-scheme: dark;
+}
+/* More neutral color theme. Used in < 0.2 */
+/* :root,
+.theme-light {
+  --base-background: hsl(0, 0%, 100%);
+  --base-hover: hsl(223, 16%, 97%);
+  --base-border: hsl(223, 10%, 87%);
+  --base-focus: hsl(223, 22%, 9%);
+  --base-foreground: hsl(223, 22%, 5%);
 
-  --ghost-background: transparent;
-  --ghost-hover: var(--base-hover);
-  --ghost-border: transparent;
-  --ghost-focus: var(--base-focus);
-  --ghost-foreground: var(--base-foreground);
+  --secondary-background: hsl(223, 10%, 94%);
+  --secondary-hover: hsl(223, 10%, 92%);
+  --secondary-foreground: var(--base-foreground);
 
-  --outline-background: transparent;
-  --outline-hover: var(--hover);
-  --outline-border: #333333;
-  --outline-focus: var(--base-focus);
-  --outline-foreground: var(--base-foreground);
+  --primary-background: hsl(223, 22%, 9%);
+  --primary-hover: hsl(223, 22%, 15%);
+  --primary-foreground: var(--base-background);
 
-  --secondary-background: #1f1f1f;
-  --secondary-hover: #191919;
-  --secondary-border: transparent;
-  --secondary-focus: var(--base-focus);
+  --outline-border: hsl(223, 10%, 85%);
+  --muted-foreground: hsl(223, 10%, 16%);
+  --raised-background: var(--base-hover);
+  --accent-foreground: var(--primary-background);
+
+  color-scheme: light;
+} */
+/* .theme-dark,
+.dark,
+[data-theme='dark'] {
+  --base-background: hsl(223, 22%, 5%);
+  --base-hover: hsl(223, 16%, 7%);
+  --base-border: hsl(223, 10%, 20%);
+  --base-focus: hsl(223, 10%, 100%);
+  --base-foreground: hsl(223, 10%, 100%);
+
+  --secondary-background: hsl(223, 10%, 13%);
+  --secondary-hover: hsl(223, 10%, 11%);
   --secondary-foreground: var(--base-foreground);
 
-  --primary-background: #fff;
-  --primary-hover: #dcdcdc;
-  --primary-border: transparent;
-  --primary-focus: var(--base-focus);
+  --primary-background: hsl(223, 10%, 100%);
+  --primary-hover: hsl(223, 10%, 90%);
   --primary-foreground: var(--base-background);
 
+  --outline-border: hsl(223, 10%, 26%);
+  --muted-foreground: hsl(223, 10%, 90%);
+  --raised-background: var(--base-hover);
+  --accent-foreground: var(--primary-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 *
-  ) {
+:where(:root),
+:where([class*='theme-']),
+.variant-base,
+.variant-base
+  [class*='density-']:not(.variant-base [class*='variant-'] [class*='theme-']) {
   --background: var(--base-background);
   --hover: var(--base-hover);
   --border: var(--base-border);
@@ -138,191 +110,86 @@
   --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 *
+.variant-primary,
+.variant-primary
+  [class*='density-']:not(
+    .variant-primary [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--primary-background);
-  --hover: var(--primary-hover);
-  --border: var(--primary-border);
-  --focus: var(--primary-focus);
-  --foreground: var(--primary-foreground);
+  --background: var(--primary-background, var(--base-foreground));
+  --hover: var(--primary-hover, var(--base-hover));
+  --border: var(--primary-border, transparent);
+  --focus: var(--primary-focus, var(--base-focus));
+  --foreground: var(--primary-foreground, var(--base-background));
 }
 
-.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 *
+.variant-secondary,
+.variant-secondary
+  [class*='density-']:not(
+    .variant-secondary [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--secondary-background);
-  --hover: var(--secondary-hover);
-  --border: var(--secondary-border);
-  --focus: var(--secondary-focus);
-  --foreground: var(--secondary-foreground);
+  --background: var(--secondary-background, var(--base-background));
+  --hover: var(--secondary-hover, var(--base-hover));
+  --border: var(--secondary-border, transparent);
+  --focus: var(--secondary-focus, var(--base-focus));
+  --foreground: var(--secondary-foreground, var(--base-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 *
+.variant-accent,
+.variant-accent
+  [class*='density-']:not(
+    .variant-accent [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--accent-background);
-  --hover: var(--accent-hover);
-  --border: var(--accent-border);
-  --focus: var(--accent-focus);
-  --foreground: var(--accent-foreground);
+  --background: var(--accent-background, var(--base-background));
+  --hover: var(--accent-hover, var(--base-hover));
+  --border: var(--accent-border, var(--base-border));
+  --focus: var(--accent-focus, var(--base-focus));
+  --foreground: var(--accent-foreground, var(--base-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 *
+.variant-muted,
+.variant-muted
+  [class*='density-']:not(
+    .variant-muted [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--muted-background);
-  --hover: var(--muted-hover);
-  --border: var(--muted-border);
-  --focus: var(--muted-focus);
-  --foreground: var(--muted-foreground);
+  --background: var(--muted-background, var(--base-background));
+  --hover: var(--muted-hover, var(--base-hover));
+  --border: var(--muted-border, var(--base-border));
+  --focus: var(--muted-focus, var(--base-focus));
+  --foreground: var(--muted-foreground, var(--base-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 *
+.variant-ghost,
+.variant-ghost
+  [class*='density-']:not(
+    .variant-ghost [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--ghost-background);
-  --hover: var(--ghost-hover);
-  --border: var(--ghost-border);
-  --focus: var(--ghost-focus);
-  --foreground: var(--ghost-foreground);
+  --background: var(--ghost-background, transparent);
+  --hover: var(--ghost-hover, var(--base-hover));
+  --border: var(--ghost-border, transparent);
+  --focus: var(--ghost-focus, var(--base-focus));
+  --foreground: var(--ghost-foreground, var(--base-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 *
+.variant-outline,
+.variant-outline
+  [class*='density-']:not(
+    .variant-outline [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--outline-background);
-  --hover: var(--outline-hover);
-  --border: var(--outline-border);
-  --focus: var(--outline-focus);
-  --foreground: var(--outline-foreground);
+  --background: var(--outline-background, transparent);
+  --hover: var(--outline-hover, var(--base-hover));
+  --border: var(--outline-border, var(--base-border));
+  --focus: var(--outline-focus, var(--base-focus));
+  --foreground: var(--outline-foreground, var(--base-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 *
+.variant-raised,
+.variant-raised
+  [class*='density-']:not(
+    .variant-raised [class*='variant-'] [class*='theme-']
   ) {
-  --background: var(--raised-background);
-  --hover: var(--raised-hover);
-  --border: var(--raised-border);
-  --focus: var(--raised-focus);
-  --foreground: var(--raised-foreground);
+  --background: var(--raised-background, var(--base-background));
+  --hover: var(--raised-hover, var(--base-hover));
+  --border: var(--raised-border, var(--base-border));
+  --focus: var(--raised-focus, var(--base-focus));
+  --foreground: var(--raised-foreground, var(--base-foreground));
 }

package/src/css/main.css

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