panelui-native 0.40.0 → 0.43.0

package/theme.css

@@ -389,172 +389,185 @@
      * "All themes must have the same variables" otherwise.
      */
 
-    /* Moon — monochrome and high-contrast: pure black/white, electric blue accent,
-       hairline borders, tight corners. */
+    /*
+     * Moon — a near-black canvas under a lavender-blue accent, with elevation
+     * carried by a ladder of barely-separated surfaces and 1px hairlines
+     * rather than by shadow. Corners are tight and the type contrast is high.
+     *
+     * The character of this family lives in the *distance between* the
+     * surfaces, not in any one of them: #0f1011, #141516, #18191a and #191a1b
+     * are within a few points of each other, so a card on a panel on the
+     * canvas reads as three planes without any of them looking lighter than
+     * the room. Flattening that ladder to two values is what makes a dark
+     * theme look like a screenshot with the brightness turned down.
+     */
     @variant moon {
       --color-background: #ffffff;
-      --color-foreground: #171717;
+      --color-foreground: #08090a;
 
       --color-card: #ffffff;
-      --color-card-foreground: #171717;
+      --color-card-foreground: #08090a;
 
       --color-popover: #ffffff;
-      --color-popover-foreground: #171717;
+      --color-popover-foreground: #08090a;
 
       --color-overlay: #ffffff;
-      --color-overlay-foreground: #171717;
+      --color-overlay-foreground: #08090a;
 
-      --color-primary: #171717;
+      --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
 
       --color-secondary: rgba(0, 0, 0, 0.05);
-      --color-secondary-foreground: #171717;
+      --color-secondary-foreground: #08090a;
 
       --color-muted: rgba(0, 0, 0, 0.05);
-      --color-muted-foreground: #666666;
+      --color-muted-foreground: #6b6f76;
 
-      --color-accent: rgba(0, 0, 0, 0.05);
-      --color-accent-foreground: #171717;
+      --color-accent: rgba(0, 0, 0, 0.06);
+      --color-accent-foreground: #08090a;
 
-      --color-destructive: #e5484d;
+      --color-destructive: #eb5757;
       --color-destructive-foreground: #c62b30;
 
-      --color-info: #0070f3;
-      --color-info-foreground: #0060d1;
+      --color-info: #4ea7fc;
+      --color-info-foreground: #0b6ec4;
 
-      --color-success: #45a557;
-      --color-success-foreground: #297c3b;
+      --color-success: #27a644;
+      --color-success-foreground: #1c7a32;
 
-      --color-warning: #f5a623;
-      --color-warning-foreground: #a35200;
+      --color-warning: #f2c94c;
+      --color-warning-foreground: #8a6d0b;
 
-      --color-border: rgba(0, 0, 0, 0.09);
+      --color-border: rgba(0, 0, 0, 0.08);
       --color-input: rgba(0, 0, 0, 0.12);
-      --color-ring: #171717;
-
-      --color-surface: #fafafa;
-      --color-surface-secondary: #f4f4f4;
-      --color-surface-tertiary: #ededed;
-      --color-skeleton: rgba(0, 0, 0, 0.08);
-
-      --color-info-soft: rgba(0, 112, 243, 0.08);
-      --color-info-subtle: rgba(0, 112, 243, 0.06);
-      --color-success-soft: rgba(69, 165, 87, 0.1);
-      --color-success-subtle: rgba(69, 165, 87, 0.08);
-      --color-warning-soft: rgba(245, 166, 35, 0.1);
-      --color-warning-subtle: rgba(245, 166, 35, 0.08);
-      --color-destructive-soft: rgba(229, 72, 77, 0.1);
-      --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+      --color-ring: #5e6ad2;
+
+      --color-surface: #f5f6f6;
+      --color-surface-secondary: #f6f7f7;
+      --color-surface-tertiary: #eeeff1;
+      --color-skeleton: rgba(0, 0, 0, 0.07);
+
+      --color-info-soft: rgba(78, 167, 252, 0.1);
+      --color-info-subtle: rgba(78, 167, 252, 0.08);
+      --color-success-soft: rgba(39, 166, 68, 0.1);
+      --color-success-subtle: rgba(39, 166, 68, 0.08);
+      --color-warning-soft: rgba(242, 201, 76, 0.14);
+      --color-warning-subtle: rgba(242, 201, 76, 0.1);
+      --color-destructive-soft: rgba(235, 87, 87, 0.1);
+      --color-destructive-subtle: rgba(235, 87, 87, 0.08);
 
       /* syntax colours */
-      --color-code-keyword: #8250df;
-      --color-code-string: #0a7d55;
-      --color-code-number: #0550ae;
-      --color-code-comment: #8b949e;
+      --color-code-keyword: #5e6ad2;
+      --color-code-string: #1c7a32;
+      --color-code-number: #0b6ec4;
+      --color-code-comment: #8a8f98;
       --color-code-function: #6639ba;
       --color-code-property: #953800;
-      --color-code-punctuation: #57606a;
-      --color-code-inserted: #0a7d55;
+      --color-code-punctuation: #62666d;
+      --color-code-inserted: #1c7a32;
       --color-code-deleted: #cf222e;
 
       /* chart series, in order of prominence */
-      --color-chart-1: #0070f3;
-      --color-chart-2: #171717;
-      --color-chart-3: #7928ca;
-      --color-chart-4: #f5a623;
-      --color-chart-5: #0a9396;
-    
+      --color-chart-1: #5e6ad2;
+      --color-chart-2: #4ea7fc;
+      --color-chart-3: #27a644;
+      --color-chart-4: #f2c94c;
+      --color-chart-5: #7a7fad;
+
       /* Moon shape scale */
-      --radius-xs: 2px;
-      --radius-sm: 4px;
-      --radius-md: 5px;
-      --radius-lg: 6px;
-      --radius-xl: 8px;
-      --radius-2xl: 10px;
-      --radius-3xl: 14px;
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+      --radius-xl: 16px;
+      --radius-2xl: 24px;
+      --radius-3xl: 32px;
     }
 
     @variant moon-dark {
-      --color-background: #000000;
-      --color-foreground: #ededed;
+      --color-background: #010102;
+      --color-foreground: #f7f8f8;
 
-      --color-card: #0a0a0a;
-      --color-card-foreground: #ededed;
+      --color-card: #0f1011;
+      --color-card-foreground: #f7f8f8;
 
-      --color-popover: #101010;
-      --color-popover-foreground: #ededed;
+      --color-popover: #141516;
+      --color-popover-foreground: #f7f8f8;
 
-      --color-overlay: #191919;
-      --color-overlay-foreground: #ededed;
+      --color-overlay: #18191a;
+      --color-overlay-foreground: #f7f8f8;
 
-      --color-primary: #ededed;
-      --color-primary-foreground: #0a0a0a;
+      --color-primary: #5e6ad2;
+      --color-primary-foreground: #ffffff;
 
-      --color-secondary: rgba(255, 255, 255, 0.09);
-      --color-secondary-foreground: #ededed;
+      --color-secondary: rgba(255, 255, 255, 0.06);
+      --color-secondary-foreground: #f7f8f8;
 
-      --color-muted: rgba(255, 255, 255, 0.09);
-      --color-muted-foreground: #a1a1a1;
+      --color-muted: rgba(255, 255, 255, 0.06);
+      --color-muted-foreground: #8a8f98;
 
-      --color-accent: rgba(255, 255, 255, 0.09);
-      --color-accent-foreground: #ededed;
+      --color-accent: rgba(255, 255, 255, 0.08);
+      --color-accent-foreground: #f7f8f8;
 
-      --color-destructive: #e5484d;
-      --color-destructive-foreground: #ff6369;
+      --color-destructive: #eb5757;
+      --color-destructive-foreground: #ff8a8a;
 
-      --color-info: #0070f3;
-      --color-info-foreground: #52a8ff;
+      --color-info: #4ea7fc;
+      --color-info-foreground: #8ec5ff;
 
-      --color-success: #45a557;
-      --color-success-foreground: #62c073;
+      --color-success: #27a644;
+      --color-success-foreground: #4cc061;
 
-      --color-warning: #f5a623;
-      --color-warning-foreground: #f1a10d;
+      --color-warning: #f2c94c;
+      --color-warning-foreground: #f5d97a;
 
-      --color-border: rgba(255, 255, 255, 0.09);
-      --color-input: rgba(255, 255, 255, 0.14);
-      --color-ring: #ededed;
+      /* The hairlines are opaque, not translucent: the surface ladder is only
+         a few points wide, so a border mixed with whatever is under it would
+         read as a different line on each of them. */
+      --color-border: #23252a;
+      --color-input: #34343a;
+      --color-ring: #5e6ad2;
 
-      --color-surface: #0f0f0f;
-      --color-surface-secondary: #161616;
-      --color-surface-tertiary: #1d1d1d;
-      --color-skeleton: rgba(255, 255, 255, 0.11);
+      --color-surface: #0f1011;
+      --color-surface-secondary: #141516;
+      --color-surface-tertiary: #18191a;
+      --color-skeleton: rgba(255, 255, 255, 0.08);
 
-      --color-info-soft: rgba(0, 112, 243, 0.12);
-      --color-info-subtle: rgba(0, 112, 243, 0.18);
-      --color-success-soft: rgba(69, 165, 87, 0.1);
-      --color-success-subtle: rgba(69, 165, 87, 0.16);
-      --color-warning-soft: rgba(245, 166, 35, 0.1);
-      --color-warning-subtle: rgba(245, 166, 35, 0.16);
-      --color-destructive-soft: rgba(229, 72, 77, 0.1);
-      --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+      --color-info-soft: rgba(78, 167, 252, 0.16);
+      --color-info-subtle: rgba(78, 167, 252, 0.1);
+      --color-success-soft: rgba(39, 166, 68, 0.18);
+      --color-success-subtle: rgba(39, 166, 68, 0.12);
+      --color-warning-soft: rgba(242, 201, 76, 0.16);
+      --color-warning-subtle: rgba(242, 201, 76, 0.1);
+      --color-destructive-soft: rgba(235, 87, 87, 0.16);
+      --color-destructive-subtle: rgba(235, 87, 87, 0.1);
 
       /* syntax colours */
-      --color-code-keyword: #d2a8ff;
-      --color-code-string: #7ee787;
-      --color-code-number: #79c0ff;
-      --color-code-comment: #8b949e;
+      --color-code-keyword: #828fff;
+      --color-code-string: #4cc061;
+      --color-code-number: #8ec5ff;
+      --color-code-comment: #62666d;
       --color-code-function: #d2a8ff;
       --color-code-property: #ffa657;
-      --color-code-punctuation: #8b949e;
-      --color-code-inserted: #7ee787;
-      --color-code-deleted: #ff7b72;
+      --color-code-punctuation: #8a8f98;
+      --color-code-inserted: #4cc061;
+      --color-code-deleted: #ff8a8a;
 
       /* chart series, in order of prominence */
-      --color-chart-1: #3291ff;
-      --color-chart-2: #ededed;
-      --color-chart-3: #a855f7;
-      --color-chart-4: #fbbf24;
-      --color-chart-5: #2dd4bf;
-    
+      --color-chart-1: #5e6ad2;
+      --color-chart-2: #4ea7fc;
+      --color-chart-3: #27a644;
+      --color-chart-4: #f2c94c;
+      --color-chart-5: #7a7fad;
+
       /* Moon shape scale */
-      --radius-xs: 2px;
-      --radius-sm: 4px;
-      --radius-md: 5px;
-      --radius-lg: 6px;
-      --radius-xl: 8px;
-      --radius-2xl: 10px;
-      --radius-3xl: 14px;
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+      --radius-xl: 16px;
+      --radius-2xl: 24px;
+      --radius-3xl: 32px;
     }
 
     /* Grass — green accent on warm-neutral greys, with soft generous corners. */